/* ============================================================
   CONSULTORA CATARATAS — DESIGN TOKENS v1.0
   Fuente de verdad del sistema visual. Sesión #2 · 2026-08-20.

   Regla 4 y 5 de CLAUDE.md: ninguna pieza usa un color, una
   tipografía, un spacing, un radio o un easing que no esté acá.
   Si una pieza necesita un valor nuevo, se agrega al token
   primero — nunca al asset.

   Derivación: paleta extraída por muestreo de píxel de
   `archivos fuente/logo.png` y `Brochure Cataratas.pdf`.
   Ver DEC-003 para la discrepancia con logo.ai.
   ============================================================ */

:root {

  /* ---------- 1 · COLOR ------------------------------------
     Estrategia: Restrained. Un primario, neutros, cero acentos
     decorativos. El azul se gana su lugar; no se reparte.      */

  /* Marca — el azul del isotipo, verbatim del archivo original */
  --azul:            #1B7CB1;   /* Azul Cataratas. Solo grafismo, superficies y texto ≥24px. 4.29:1 sobre papel */
  --azul-profundo:   #14618A;   /* Texto azul de tamaño normal. 6.30:1 sobre papel ✓ AA */
  --azul-abisal:     #0B3A55;   /* Superficies oscuras con temperatura de marca */
  --azul-claro:      #6FB6DE;   /* Único azul legible sobre tinta. 7.93:1 ✓ AAA */
  --azul-agua:       #EAF2F7;   /* Franja tenue. El agua vista desde arriba */

  /* Neutros — el papel nunca es blanco puro (regla del registro editorial) */
  --papel:           #F7F7F5;   /* Fondo canónico del sistema */
  --papel-hondo:     #EFEEEA;   /* Segundo plano, franjas alternas */
  --blanco:          #FFFFFF;   /* Solo superficies elevadas y texto sobre tinta */
  --tinta:           #1A1819;   /* Negro de marca, muestreado del brochure. 16.47:1 ✓ AAA */
  --tinta-suave:     #6B6A66;   /* Texto secundario y numeración. 5.04:1 sobre papel ✓ AA */

  /* Nota: la versión inicial de esta paleta tenía un cuarto gris
     (#A3A19B) para numeración y metadatos. Se eliminó al medirlo:
     2.3:1 sobre papel, por debajo del mínimo AA. Un gris que no se
     puede usar en texto no merece ser un token — invita a usarlo. */

  /* Líneas — el sistema se construye con hairlines, no con cajas */
  --linea:           rgba(26, 24, 25, 0.13);
  --linea-fuerte:    rgba(26, 24, 25, 0.30);
  --linea-azul:      rgba(27, 124, 177, 0.28);
  --linea-inversa:   rgba(255, 255, 255, 0.16);

  /* Semánticos — usar estos en los componentes, no los crudos de arriba */
  --fondo:           var(--papel);
  --fondo-alt:       var(--papel-hondo);
  --fondo-inverso:   var(--tinta);
  --texto:           var(--tinta);
  --texto-suave:     var(--tinta-suave);
  --texto-inverso:   var(--blanco);
  --acento:          var(--azul);
  --acento-texto:    var(--azul-profundo);


  /* ---------- 2 · TIPOGRAFÍA -------------------------------
     Dos familias. Ni una más (regla 6: la simplicidad es la marca).

     Newsreader — serif editorial de lectura, con itálica real.
       Da la gravedad de un estudio profesional sin caer en el
       serif de invitación de casamiento (Playfair está vetado).

     Archivo — grotesca de Omnibus-Type, fundición de Buenos
       Aires. Tipografía argentina para una firma argentina; el
       detalle no se explica en el sitio, se nota en el resultado.

     Inter, Roboto, Helvetica y Arial están PROHIBIDAS: son la
     huella dactilar del sitio generado por IA.                 */

  --fuente-display:  'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --fuente-texto:    'Archivo', 'Helvetica Neue', system-ui, sans-serif;

  /* Escala fluida — clamp(mín, preferido, máx) */
  --t-display:       clamp(2.5rem, 1.6rem + 5.4vw, 6.5rem);
  --t-titulo:        clamp(2rem,   1.35rem + 2.9vw, 3.5rem);
  --t-seccion:       clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-sub:           clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --t-cuerpo:        1.0625rem;   /* 17px — nunca por debajo de 16px */
  --t-chico:         0.9375rem;   /* 15px */
  --t-micro:         0.75rem;     /* 12px — solo eyebrows y metadatos en mayúsculas */

  --interlinea-display: 0.94;
  --interlinea-titulo:  1.06;
  --interlinea-cuerpo:  1.62;

  --tracking-display: -0.025em;
  --tracking-titulo:  -0.015em;
  --tracking-cuerpo:  0;
  --tracking-eyebrow: 0.22em;   /* Ecos del tracking abierto del wordmark original */
  --tracking-wordmark: 0.16em;

  --medida:          62ch;       /* Largo de línea máximo en cuerpo de texto */


  /* ---------- 3 · ESPACIO ----------------------------------
     Escala de 8pt sin excepciones. Cero valores como 13px.     */

  --e-1:   0.25rem;   /*   4 */
  --e-2:   0.5rem;    /*   8 */
  --e-3:   0.75rem;   /*  12 */
  --e-4:   1rem;      /*  16 */
  --e-5:   1.5rem;    /*  24 */
  --e-6:   2rem;      /*  32 */
  --e-7:   3rem;      /*  48 */
  --e-8:   4rem;      /*  64 */
  --e-9:   6rem;      /*  96 */
  --e-10:  8rem;      /* 128 */
  --e-11: 10rem;      /* 160 */

  /* Ritmo vertical de sección — el registro editorial respira fuerte */
  --aire-seccion:  clamp(5rem, 3.5rem + 7vw, 11rem);
  --canal:         clamp(1.25rem, 0.6rem + 3vw, 4.5rem);   /* Margen lateral */
  --ancho-max:     78rem;
  --ancho-texto:   42rem;


  /* ---------- 4 · RADIOS -----------------------------------
     Cerca de cero, deliberadamente. El isotipo es línea recta y
     agua; no hay una sola esquina redondeada en la marca. El
     `rounded-2xl` por defecto es otra huella del sitio genérico. */

  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-pill: 999px;   /* Únicamente el punto del eyebrow */


  /* ---------- 5 · SOMBRAS ----------------------------------
     Casi inexistentes y siempre con temperatura azul — nunca
     negro plano (Quality Bar, pregunta 2).                     */

  --sombra-0: none;
  --sombra-1: 0 1px 2px rgba(11, 58, 85, 0.05);
  --sombra-2: 0 1px 2px rgba(11, 58, 85, 0.05),
              0 14px 34px -18px rgba(11, 58, 85, 0.20);


  /* ---------- 6 · MOVIMIENTO -------------------------------
     El sistema tiene una sola idea de movimiento: EL DESCENSO.
     Todo entra desde arriba y se asienta. Nada sube.
     Las curvas nativas de CSS están vetadas por débiles.        */

  --curva-descenso:  cubic-bezier(0.23, 1, 0.32, 1);      /* Entradas. Arranca rápido, se asienta */
  --curva-traslado:  cubic-bezier(0.77, 0, 0.175, 1);     /* Movimiento en pantalla */
  --curva-agua:      cubic-bezier(0.32, 0.72, 0, 1);      /* Recorridos largos y continuos */

  --t-presion:   140ms;   /* Feedback de :active */
  --t-hover:     200ms;   /* Estados de hover */
  --t-estado:    280ms;   /* Cambios de estado de UI */
  --t-revelado:  760ms;   /* Entrada de contenido al viewport */
  --t-ambiente:  9s;      /* Movimiento ambiental continuo */
  --escalon:     55ms;    /* Retardo entre elementos de una cascada */


  /* ---------- 7 · CAPAS ------------------------------------ */

  --z-fondo:     -1;
  --z-base:       0;
  --z-elevado:   10;
  --z-nav:       80;
  --z-grano:     90;
  --z-modal:   1000;
}


/* ---------- 8 · MOVIMIENTO REDUCIDO -------------------------
   Regla 9 del Quality Bar y accesibilidad. Movimiento reducido
   NO es cero movimiento: se conservan opacidad y color, se
   elimina todo desplazamiento y todo lo ambiental.            */

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-revelado: 240ms;
    --t-ambiente: 0s;
    --escalon:    0ms;
  }
}