/* ===========================================================================
   Iris: tokens

   Los valores salen del Manual de Marca (lámina 19, colores corporativos) y de
   las cuatro vistas de la maqueta (IRIS - VISTAS), medidas sobre el PDF a 1440.

   Los componentes usan SIEMPRE el rol semántico, nunca el número. Si mañana
   cambia la paleta, se toca aquí y en ningún sitio más.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Las dos familias, autohospedadas.

   TÍTULOS: Big Noodle Titling es la del manual («exclusivamente para títulos,
   y solo en regular»), pero no está en Google Fonts y todavía no tenemos el
   archivo. Mientras tanto va BEBAS NEUE, la más cercana con licencia libre
   (OFL): condensada, de caja alta y de un solo peso. Cuando llegue el .otf de
   Big Noodle se convierte a .woff2, se declara aquí con su propio @font-face y
   se cambia --iris-display. Nada más: ningún componente nombra la familia.

   CUERPO: Nunito, la secundaria del manual. Google la sirve como fuente
   VARIABLE (eje wght de 200 a 1000), así que un archivo por subconjunto cubre
   Regular, Bold y Black.

   Autohospedarlas no es solo rendimiento: es lo que permite que la CSP diga
   font-src 'self' sin una sola excepción.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -----------------------------------------------------------------------
     Paleta de marca — los ocho colores de la brocha, verbatim del manual
     (lámina 19). Su ORDEN también es de marca: del turquesa al rojo. El
     manual pone «Orden de colores» entre los usos indebidos.
     -------------------------------------------------------------------- */
  --iris-turquesa: #13b1bb;
  --iris-azul: #2e81c4;
  --iris-jade: #138a71;
  --iris-verde: #43a638;
  --iris-lima: #a4c31f;
  --iris-amarillo: #fec90a;
  --iris-naranja: #f29110;
  --iris-rojo: #e52c2e;

  /* EL AMARILLO DE LA WEB NO ES EL DEL MANUAL. Lo confirmó el cliente el 13 de
     octubre: botones, tarjetas, píldoras y el pie van en #ECB505, el mostaza
     de la maqueta. El #FEC90A de arriba queda para su franja de la brocha.

     CONTRASTE, Y ES DECISIÓN DE DISEÑO: el texto blanco sobre este mostaza da
     1,9:1. No llega ni al 3:1 que AA pide al texto grande. Está así en la
     maqueta y así se implementa; la salida, si algún día se pide AA, es el
     texto en negro (11:1), no oscurecer el amarillo. */
  --iris-mostaza: #ecb505;
  --iris-mostaza-hondo: #d29f00;

  /* El negro del manual es #1D1D1B; la maqueta usa negro puro en los bloques
     oscuros y en los titulares. Se sigue a la maqueta en pantalla. */
  --iris-negro: #000000;
  --iris-tinta: #1d1d1b;
  --iris-blanco: #ffffff;

  /* El fondo de las cuatro vistas: un crema muy claro, no blanco. Las
     tarjetas blancas se despegan de él sin necesidad de borde. */
  --iris-crema: #fffcee;
  --iris-crema-hondo: #f6efd2;

  /* El casi blanco de las secciones que se alternan con el crema: que no
     todo sea el mismo amarillo pálido (pedido del cliente, ronda 3). Un
     blanco puro haría que las tarjetas blancas desaparecieran. */
  --iris-hueso: #fdfdfa;

  /* La escala del fondo de la portada, que cambia con el scroll (ronda 13,
     assets/js/fondo.js): crema, hueso, arena pálida y un mostaza apenas
     insinuado. Tonos de pared, todos muy pálidos: el cambio se nota, el
     corte no. */
  --iris-arena: #f6efdf;
  --iris-mostaza-palido: #fcf3d6;

  /* TEXTURA DE PARED (prueba, ronda 13; solo en la portada): látex mate
     pasado con rodillo. Dos ruidos SVG que genera el navegador —no se
     descarga nada—: un grano fino y, encima, unas vetas verticales muy
     suaves, las del rodillo. stitchTiles hace que no se note la repetición.
     Para quitarla, borrar la regla de .home en components.css §19. */
  --textura-pared:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 0 0.20 0.42 0 0 0 -0.17'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.0025' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.40 0 0 0 0 0.33 0 0 0 0 0.22 0.22 0 0 0 -0.1'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23r)'/%3E%3C/svg%3E");

  --iris-gris: #6b6a63;
  --iris-gris-claro: #d9d9d9;

  /* -----------------------------------------------------------------------
     Roles semánticos
     -------------------------------------------------------------------- */
  --color-fondo: var(--iris-crema);
  --color-fondo-claro: var(--iris-hueso);
  --color-superficie: var(--iris-blanco);
  --color-texto: var(--iris-negro);
  --color-texto-suave: #3b3a36;
  --color-titular: var(--iris-negro);
  --color-acento: var(--iris-mostaza);
  --color-sobre-acento: var(--iris-blanco);
  --color-enlace: var(--iris-negro);
  --color-foco: var(--iris-azul);
  --color-borde: var(--iris-mostaza);
  --color-error: var(--iris-rojo);
  --color-ok: var(--iris-verde);

  /* -----------------------------------------------------------------------
     Tipografía
     -------------------------------------------------------------------- */
  --iris-display: 'Bebas Neue', 'Big Noodle Titling', 'Oswald', 'Arial Narrow', sans-serif;
  --iris-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala medida en la maqueta a 1440 y escalada con clamp() hasta 390. El
     primer valor es el del móvil y el último el de 1440. */
  --t-display: clamp(3rem, 1.6rem + 5.6vw, 6.375rem);  /* 102 px: hero */
  --t-h1: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);       /* 92 px: «Tres soluciones» */
  --t-h2: clamp(2.25rem, 1.45rem + 3.2vw, 4.25rem);     /* 68 px: titular de sección */
  --t-h3: clamp(1.875rem, 1.35rem + 2vw, 3rem);         /* 48 px: bloques */
  --t-h4: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);      /* 34 px: tarjetas */
  --t-h5: clamp(1.25rem, 1.1rem + .5vw, 1.625rem);      /* 26 px: píldoras */
  --t-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);  /* 21 px: bajada del hero */
  --t-body: 1.0625rem;                                  /* 17 px */
  --t-small: 0.9375rem;                                 /* 15 px */
  --t-mini: 0.8125rem;                                  /* 13 px: rótulos del pie */

  --leading-body: 1.5;
  --leading-titular: 0.92;
  --tracking-titular: 0.005em;
  --peso-titular: 400;

  /* -----------------------------------------------------------------------
     Espacio — escala de 4
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* El ritmo entre secciones: 140 px en la maqueta, 72 en el móvil. */
  --seccion: clamp(4.5rem, 3rem + 5vw, 8.75rem);

  /* -----------------------------------------------------------------------
     Retícula — 1180 px de contenido dentro de 1440
     -------------------------------------------------------------------- */
  --contenedor: calc(73.75rem + var(--canaleta) * 2);
  --canaleta: clamp(1rem, 0.4rem + 2.6vw, 2rem);

  /* -----------------------------------------------------------------------
     Forma
     -------------------------------------------------------------------- */
  --radio-s: 0.25rem;
  --radio-m: 0.25rem;
  --radio-l: 0.25rem;
  /* Las tarjetas grandes de la maqueta: 40 px a 1440. */
  --radio-xl: 0.25rem;
  --radio-pildora: 0.25rem;

  /* FORMAS: EL ESCALÓN DEL MANUAL (ronda 10). Las píldoras, los círculos con
     flecha diagonal y las esquinas muy redondeadas eran las de Tricolor. Iris
     toma las de su manual: esquinas rectas (4 px) y un escalón en la esquina
     de los bloques, como en sus portadillas de capítulo. --escalon es el lado
     de ese escalón; la flecha (→) va en un cuadro encajado en él. */
  --escalon: clamp(2.75rem, 2.4rem + 1vw, 3.5rem);

  --franja-alto: clamp(1.25rem, 0.9rem + 1vw, 2.25rem);
  --franja-fina: 0.5rem;

  --sombra-tarjeta: 0 6px 0 rgb(0 0 0 / 0.06), 0 10px 24px rgb(0 0 0 / 0.08);
  --sombra-alta: 0 18px 40px rgb(0 0 0 / 0.18);

  --iris-icono-trazo: 1.6;

  /* Área táctil mínima. */
  --tactil: 2.75rem;

  /* -----------------------------------------------------------------------
     Capas
     -------------------------------------------------------------------- */
  --z-cabecera: 50;
  --z-menu: 60;
  --z-aviso: 80;
  --z-flotante: 90;

  /* -----------------------------------------------------------------------
     Movimiento
     -------------------------------------------------------------------- */
  --ease-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-corta: 160ms;
  --dur-media: 320ms;
}

/* ---------------------------------------------------------------------------
   Contextos de color. Un bloque oscuro o amarillo REASIGNA los roles, en vez
   de repetir reglas para cada componente que vive dentro (PLANTILLA §6).
--------------------------------------------------------------------------- */
.on-dark {
  --color-texto: var(--iris-blanco);
  --color-texto-suave: rgb(255 255 255 / 0.82);
  --color-titular: var(--iris-blanco);
  --color-enlace: var(--iris-blanco);
  --color-foco: var(--iris-mostaza);
  color: var(--color-texto);
}

.on-acento {
  --color-texto: var(--iris-blanco);
  --color-texto-suave: rgb(255 255 255 / 0.92);
  --color-titular: var(--iris-blanco);
  --color-enlace: var(--iris-blanco);
  --color-foco: var(--iris-negro);
  color: var(--color-texto);
}