/* ==========================================================================
   Vijoli · Variables de diseño y tipografías
   Estructura y ritmo tomados de la referencia editorial; color de Vijoli.
   ========================================================================== */

@font-face {
  font-family: "Cormorant";
  src: url("../fuentes/cormorant-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fuentes/cormorant-italica.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fuentes/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --negro: #111111;
  --tinta: #0C1013;            /* el fondo oscuro del logo */
  --texto: #111111;
  --texto-2: #5E6B7E;
  --texto-3: #686E78;
  --borde: #E4E4E7;
  --borde-suave: #F0F0F2;
  --fondo: #FFFFFF;
  --fondo-2: #FAF8F7;
  --rosa: #ECA29F;             /* rosado de la marca: sólo detalles */
  --rosa-texto: #A85A56;       /* rosado para texto sobre blanco (4.9:1) */
  --rosa-suave: #FBEDEC;
  --exito: #2F6B4F;
  --error: #A33B2A;
  --aviso: #8A5A12;
  --estrella: #EAB308;

  /* Tipografía */
  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espacios */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --borde-lateral: clamp(16px, 3.2vw, 40px);
  --ancho-max: 1440px;

  /* Barra superior y encabezado (medidas de la referencia) */
  --alto-barra: 44px;
  --alto-encabezado: 84px;

  /* Movimiento: la curva que usa la referencia en todo */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --rapido: 0.25s;
  --medio: 0.6s;
  --lento: 0.8s;

  --radio: 2px;
  --sombra: 0 10px 30px rgba(17, 17, 17, 0.08);
  --sombra-fuerte: 0 20px 60px rgba(17, 17, 17, 0.16);
}

@media (max-width: 809px) {
  :root {
    --alto-barra: 36px;
    --alto-encabezado: 64px;
  }
}