/* ============================================================
   CAALF · UNA — tokens
   Dirección de arte "Señalética" (cerrada el 16 set 2026).
   Ningún valor de color, espaciado, tipografía, radio, sombra,
   duración o easing se escribe suelto fuera de este archivo.
   ============================================================ */

:root {

  /* --- Color -------------------------------------------------
     Contraste verificado con script (ver README del repo):
     blanco/morado 10.03:1 · texto/amarillo 10.01:1 ·
     texto/superficie 15.36:1 · morado/superficie 8.52:1 ·
     amarillo/morado 5.55:1 · texto/blanco 18.09:1            */

  --color-morado: #4B22A8;          /* dominante, bloques a sangre */
  --color-morado-hondo: #35167A;    /* estados sobre morado */
  --color-superficie: #EFEAFB;      /* bloques claros */
  --color-blanco: #FFFFFF;          /* isla de logos institucionales */
  --color-texto: #1A1030;           /* texto sobre claro */
  --color-texto-suave: #4A3D6B;     /* secundario sobre claro, 7.34:1 */
  --color-sobre-morado: #E6DCFF;    /* secundario sobre morado, 7.94:1 */
  --color-amarillo: #F0B838;        /* acento: siempre la acción */
  --color-amarillo-hondo: #D9A21F;  /* hover del acento */
  --color-borde: #8B77BE;           /* borde con significado (campos, contenedores): 3.25:1 sobre claro */
  --color-filete: #D6CBF2;          /* línea decorativa, no transmite información */
  --color-borde-morado: rgba(255, 255, 255, 0.24);

  /* Estado */
  --color-foco-claro: #4B22A8;      /* anillo de foco sobre claro */
  --color-foco-morado: #F0B838;     /* anillo de foco sobre morado */
  --color-aviso: #8A5A00;           /* pendiente / aviso, 5.31:1 sobre superficie */
  --color-aviso-fondo: #FBF1D8;
  --color-error: #A01B14;           /* fallo de carga, 6.44:1 sobre superficie */

  /* --- Tipografía -------------------------------------------- */

  --fuente-display: "Archivo", system-ui, -apple-system, sans-serif;
  --fuente-texto: "Instrument Sans", system-ui, -apple-system, sans-serif;

  --ancho-display: 115;             /* eje wdth de Archivo en titulares */
  --ancho-display-medio: 112;

  --fs-display: clamp(2.5rem, 8.5vw, 6.5rem);      /*  40 → 104 */
  --fs-h1: clamp(2.0625rem, 7.4vw, 4.5rem);        /*  33 →  72 */
  --fs-h2: clamp(1.75rem, 4.2vw, 2.75rem);         /*  28 →  44 */
  --fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);          /*  20 →  24 */
  --fs-dato: clamp(1.625rem, 4.4vw, 2.5rem);       /*  26 →  40 */
  --fs-cuerpo: clamp(1.125rem, 0.35vw + 1.05rem, 1.1875rem);  /* 18 → 19 */
  --fs-cuerpo-grande: clamp(1.1875rem, 1vw + 1rem, 1.375rem); /* 19 → 22 */
  --fs-menor: 1rem;                                /*  16 */
  --fs-rotulo: 0.6875rem;                          /*  11 */
  --fs-rotulo-menor: 0.625rem;                     /*  10 */

  --lh-display: 0.94;
  --lh-titular: 0.98;
  --lh-h2: 1.05;
  --lh-dato: 1;
  --lh-cuerpo: 1.55;
  --lh-rotulo: 1.3;

  --tr-display: -0.02em;
  --tr-titular: -0.015em;
  --tr-rotulo: 0.16em;
  --tr-boton: 0.01em;

  --peso-texto: 400;
  --peso-medio: 500;
  --peso-fuerte: 700;
  --peso-display: 800;

  /* --- Espaciado (base 4) ------------------------------------ */

  --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;
  --e-11: 192px;

  /* --- Anchos de contenedor (tres) --------------------------- */

  --ancho-angosto: 720px;   /* texto corrido */
  --ancho-medio: 1040px;    /* listas, plan de estudios, formulario */
  --ancho-ancho: 1320px;    /* hero, cintas de datos, footer */
  --margen-lateral: clamp(20px, 5vw, 64px);

  /* --- Alturas de sección (tres) ------------------------------ */

  --seccion-corta: clamp(40px, 6vw, 64px);
  --seccion-media: clamp(64px, 9vw, 112px);
  --seccion-alta: clamp(88px, 12vw, 160px);

  /* --- Forma -------------------------------------------------- */

  --radio: 2px;             /* bloques: la dirección es de canto vivo */
  --radio-pildora: 999px;   /* CTA flotante y puntos de la burbuja */
  --radio-burbuja: 28px;    /* globo de diálogo del bloque de acción del hero */

  --sombra-flotante: 0 6px 24px rgba(26, 16, 48, 0.28);
  --sombra-isla: 0 1px 0 rgba(26, 16, 48, 0.08);

  --borde-fino: 1px;
  --borde-grueso: 3px;

  /* --- Motion -------------------------------------------------- */

  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --dur-latido: 1400ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --desplazamiento-revelado: 16px;

  /* --- Interacción -------------------------------------------- */

  /* Alto reservado para el formulario de HubSpot. Son medidas reales tomadas
     con tools/qa.mjs: si se recorta el contenido del formulario desde el panel
     de HubSpot (logos e introducción repetidos), hay que volver a medir y
     bajar estos dos valores, o queda un hueco. */
  --alto-formulario: 1840px;
  --alto-formulario-ancho: 1100px;

  --area-tactil: 44px;
  --grosor-foco: 3px;
  --separacion-foco: 2px;
}