/* ==========================================================================
   Cognisar — tokens
   --------------------------------------------------------------------------
   Heredado del sistema visual de los carruseles (agencia/carruseles/sistema).
   Las reglas de marca que estan horneadas aqui y NO se discuten por seccion:

     · Blanco y negro puros. CERO acento. Lo que destaca, destaca por TAMANO.
     · Inter y solo Inter. Tres pesos: 900 titulares, 600 enfasis, 400 cuerpo.
     · Sin emoji, sin icono decorativo, sin caja de color, sin degradado.
     · Los botones no son de color: son bloques invertidos.

   Si algo se puede expresar aqui, vive aqui y no en style.css.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Tres valores. No hay mas. El negro puro se reserva para las secciones
     de corte (hero-cta y cierre); el resto del sitio es tinta sobre papel. */
  --paper:      #F7F5F1;
  --ink:        #16181C;
  --black:      #000000;
  --white:      #FFFFFF;

  /* Derivados. Sobre papel, 66% de tinta da 7.4:1 — pasa AA holgado.        */
  --ink-soft:   color-mix(in srgb, var(--ink) 66%, var(--paper));
  --ink-rule:   color-mix(in srgb, var(--ink) 16%, var(--paper));
  --paper-soft: rgba(255, 255, 255, .68);
  --paper-rule: rgba(255, 255, 255, .20);

  /* Contexto: cada seccion declara su par y los componentes lo heredan.
     Asi el mismo .btn funciona en papel y en negro sin una clase extra.     */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --rule: var(--ink-rule);

  /* --- Tipografia --------------------------------------------------------
     Inter via Google Fonts (woff2, ~50 KB). Los .ttf del proyecto de
     carruseles pesan 1 MB entre los tres: sirven para renderizar PNG, no
     para una landing.                                                       */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida. Un solo salto grande arriba: la jerarquia es el tamano.  */
  --t-display: clamp(2.375rem, 8.4vw, 6.5rem);
  --t-h2:      clamp(2rem,  5.2vw, 3.75rem);
  --t-h3:      clamp(1.375rem, 2.4vw, 1.75rem);
  --t-lead:    clamp(1.125rem, 1.9vw, 1.5rem);
  --t-body:    clamp(1rem, 1.35vw, 1.125rem);
  --t-sm:      .9375rem;
  --t-eyebrow: .75rem;
  --t-num:     clamp(4rem, 11vw, 8.5rem);

  --lh-tight:  .95;
  --lh-snug:   1.15;
  --lh-body:   1.55;
  --ls-tight:  -.035em;
  --ls-eyebrow: .14em;

  /* --- Espacio -----------------------------------------------------------
     Escala de 4px. Se usan estos y no valores libres.                       */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  --pad-x:      clamp(1.25rem, 5vw, 4rem);
  --pad-y:      clamp(4.5rem, 11vh, 8.5rem);
  --ancho:      74rem;   /* contenedor general   */
  --ancho-texto: 34rem;  /* medida de lectura    */

  /* --- Movimiento --------------------------------------------------------
     150-300ms, con significado. El marquee es el unico movimiento largo.    */
  --ease:   cubic-bezier(.2, .7, .3, 1);
  --rapido: 150ms;
  --medio:  240ms;

  /* --- Foco --------------------------------------------------------------
     El anillo se pinta con --fg (el color de TEXTO de la seccion), no con
     currentColor. Con currentColor, el boton primario — que es tinta con
     letra papel — dibujaba un anillo claro 3px por FUERA del boton, es
     decir sobre el fondo papel: foco invisible justo en el CTA principal.
     Con --fg el anillo contrasta siempre con el fondo de la seccion.        */
  --foco: 2px solid var(--fg);
  --foco-offset: 3px;

  /* Borde de componente. WCAG 1.4.11 pide 3:1: al 20% daba 1.66:1.          */
  --borde: color-mix(in srgb, var(--fg) 40%, transparent);
}