/* ==========================================================================
   tokens.css — Variables de diseño (fuente única de verdad)
   Es el ÚNICO archivo con valores literales de color, tamaño, duración y
   curva. El resto del CSS solo usa var(--token). Excepciones técnicas (no
   admiten var()): condiciones de @media/@supports (breakpoints documentados
   en layout.css) y descriptores de fuentes.css. Catálogo: docs/tokens.md.
   Comprobación: python tools/verificar-componentes.py
   ========================================================================== */
:root {
  /* ---------- Paleta ---------- */
  --c-abismo: #0B2E36;
  --c-abismo-900: #082328;
  --c-laguna: #15606A;
  --c-agua: #2BB3A3;
  --c-agua-claro: #3FCBBA;
  --c-salmon: #F2876B;
  --c-soya: #D9B44A;
  --c-bruma: #EEF5F3;
  --c-blanco: #FFFFFF;
  --c-texto: #1C3A40;
  --c-texto-suave: #4F6B70;
  --c-texto-inverso: #CFE6E2;
  --c-texto-inverso-claro: #DDEFEC;   /* menú y texto del hero sobre fondo oscuro */
  --c-texto-inverso-suave: #A9CBC5;
  --c-texto-inverso-tenue: #8FB3AD;   /* pie de página */
  --c-borde: #D3E3DF;
  --c-borde-control: #6F8C91;   /* borde de campos: ≥ 3:1 sobre blanco y bruma (WCAG 1.4.11) */
  --c-error: #B4432A;
  --c-whatsapp: #128C7E;         /* verde azulado oficial de WhatsApp: ícono blanco 4,14:1 (WCAG 1.4.11) */
  --c-whatsapp-hover: #075E54;   /* verde oscuro oficial de WhatsApp: 7,67:1 */

  /* ---------- Transparencias semánticas ---------- */
  --overlay-abismo-leve: rgb(11 46 54 / .2);
  --overlay-abismo-suave: rgb(11 46 54 / .55);
  --overlay-abismo-medio: rgb(11 46 54 / .85);
  --overlay-abismo-fuerte: rgb(11 46 54 / .92);
  --overlay-pie-fuerte: rgb(8 35 40 / .82);       /* velo del pie sobre Footer.jpeg (abismo-900) */
  --overlay-pie-suave: rgb(8 35 40 / .35);
  --superficie-inversa: rgb(255 255 255 / .08);        /* fondos sutiles sobre oscuro */
  --superficie-inversa-hover: rgb(255 255 255 / .1);
  --superficie-inversa-activa: rgb(255 255 255 / .14); /* enlace de la página actual */
  --divisor-inverso: rgb(255 255 255 / .08);           /* líneas separadoras sobre oscuro */
  --borde-inverso-sutil: rgb(255 255 255 / .14);
  --borde-inverso: rgb(255 255 255 / .25);
  --borde-inverso-fuerte: rgb(255 255 255 / .55);

  /* ---------- Tipografía ---------- */
  /* Las familias "… Respaldo" son Arial ajustada a las métricas de la fuente web
     (fuentes.css): mientras carga la fuente no hay salto de layout. */
  --f-display: "Bricolage Grotesque", "Bricolage Grotesque Respaldo", system-ui, sans-serif;
  --f-body: "Figtree", "Figtree Respaldo", system-ui, -apple-system, sans-serif;

  /* Escala tipográfica */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: .95rem;
  --text-base: clamp(1rem, .96rem + .2vw, 1.1rem);
  --text-lg: 1.15rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.25rem, 1.05rem + .6vw, 1.45rem);
  --text-3xl: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  --text-4xl: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  /* Tamaños especiales fuera de la escala */
  --text-lead: clamp(1.05rem, 1rem + .4vw, 1.3rem);    /* entradillas */
  --text-hero: clamp(2.3rem, 1.4rem + 4.2vw, 4.6rem);
  --text-cifra: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  --text-monograma: 4rem;

  --leading-ajustado: 1.1;
  --leading-normal: 1.65;
  --leading-compacto: 1.4;          /* textos secundarios cortos en tarjetas compactas */
  --tracking-ajustado: -.015em;
  --tracking-amplio: .02em;
  --alto-mensaje: 1.4em;       /* reserva el alto de una línea de estado/error */
  --espacio-titulo: .6em;      /* margen inferior de títulos, proporcional a su tamaño */
  --espacio-parrafo: 1em;

  /* Anchos de lectura */
  --medida-texto: 65ch;
  --medida-lead: 52ch;
  --medida-titulo: 20ch;
  --medida-titulo-hero: 15ch;
  --medida-marca: 24ch;

  /* ---------- Espaciado ---------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Espaciados fluidos de layout */
  --pad-x: clamp(1.1rem, 4vw, 2.5rem);
  --pad-seccion: clamp(4rem, 8vw, 7.5rem);
  --pad-caja: clamp(1.5rem, 4vw, 2.5rem);
  --gap-columnas: clamp(2rem, 5vw, 4.5rem);
  --espacio-cabecera: clamp(2rem, 4vw, 3.5rem);
  --pad-cabecera-arriba: clamp(3.5rem, 8vw, 6rem);
  --pad-cabecera-abajo: clamp(4.5rem, 9vw, 7rem);
  --pad-hero-arriba: clamp(5rem, 12vw, 9rem);
  --pad-hero-abajo: clamp(7rem, 14vw, 11rem);
  --solape-cifras: clamp(-4rem, -6vw, -3rem);

  /* ---------- Medidas de layout y componentes ---------- */
  --ancho-max: 1180px;
  --header-h: 72px;
  --alto-viewport: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);        /* muesca de iOS */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-right: env(safe-area-inset-right, 0px);    /* muesca en horizontal */
  --alto-ola: clamp(40px, 6vw, 80px);
  --alto-ola-hero: clamp(50px, 8vw, 110px);

  --medida-xs: 220px;
  --medida-sm: 280px;
  --medida-md: 340px;
  --medida-lg: 460px;
  --alto-textarea: 140px;
  --tam-casilla: 22px;          /* casilla de autorización de datos */
  --alto-verificacion: 65px;    /* widget de Cloudflare Turnstile (tamaño normal/flexible) */

  --logo: 52px;
  --tactil: 44px;              /* objetivo táctil mínimo */
  --marcador-cadena: 52px;
  --icono-sm: 20px;
  --icono-md: 28px;
  --icono-lg: 32px;
  --ancho-bandera: 30px;
  --alto-completo-aliado: calc(2 * var(--text-sm) * var(--leading-compacto));  /* 2 líneas de nombre completo */
  --alto-texto-aliado: calc(var(--text-lg) * var(--leading-ajustado) + var(--space-1) + var(--alto-completo-aliado));  /* nombre + 2 líneas: tarjetas de igual altura */
  --sigla-aliado: clamp(var(--text-sm), 11cqi, var(--text-xl));  /* se adapta a la caja del logo (container query) */
  --ancho-logo-aliado-movil: 128px; /* caja del logo en la tarjeta horizontal (≤ 640px) */
  --alto-logo-aliado-movil: calc(var(--ancho-logo-aliado-movil) / 3);  /* proporción 3:1 de .aliados__logo */
  --vineta-noticia: .5em;           /* viñeta de .noticia__puntos (relativa al texto) */
  --vineta-noticia-desfase: .6em;   /* la centra con la primera línea */
  --tam-preloader: 48px;
  --tam-whatsapp: 56px;         /* botón flotante: área táctil ≥ 56px */
  --reserva-flotantes: calc(var(--space-5) + var(--tam-whatsapp) + var(--space-3) + var(--tactil));  /* alto de WhatsApp + volver arriba apilados */
  --grosor-preloader: 3px;
  --alto-hero: 80svh;          /* svh: no salta al mostrarse/ocultarse la barra del navegador móvil */
  --guion-trazo: 10px;         /* línea discontinua de la cadena */
  --guion-hueco: 8px;
  --blur-encabezado: 10px;

  /* ---------- Bordes ---------- */
  --hairline: 1px;
  --borde-medio: 2px;
  --borde-grueso: 3px;
  --borde-acento: 4px;

  /* ---------- Forma y profundidad ---------- */
  --radio-xs: 4px;
  --radio-sm: 10px;
  --radio: 14px;
  --radio-pill: 999px;
  --radio-circulo: 50%;
  --sombra-elevada: 0 18px 40px -20px rgb(11 46 54 / .35);

  --sombra-encabezado: 0 8px 24px -12px rgb(4 20 24 / .55);
  --sombra-flotante: 0 10px 24px -10px rgb(11 46 54 / .45);
  --sombra-whatsapp: 0 10px 24px -8px rgb(11 46 54 / .5);

  /* ---------- Foco (ver docs/accesibilidad.md) ----------
     Indicador de dos tonos: contorno --c-foco (≥ 3:1 sobre blanco, bruma y abismo)
     + halo interior --c-foco-halo (contrasta sobre fondos oscuros y fotos). */
  --c-foco: #E0633F;
  --c-foco-halo: var(--c-blanco);
  --foco-grosor: var(--borde-grueso);
  --foco-separacion: var(--borde-medio);

  /* ---------- Encabezado compacto ---------- */
  --fondo-encabezado: var(--c-abismo);
  --fondo-encabezado-compacto: var(--overlay-abismo-medio);   /* translúcido + blur */
  --escala-logo-compacto: .85;

  /* ---------- Movimiento (ver docs/ux-movimiento.md) ---------- */
  --dur-rapida: .15s;          /* feedback: hover, pulsación */
  --dur-media: .25s;           /* cambios de estado: menú, header, avisos */
  --dur-lenta: .4s;            /* entradas: aparición al hacer scroll, imágenes */
  --dur-contador: 1s;          /* animación de cifras */
  --dur-casi-cero: .01ms;      /* sustituye a todas con prefers-reduced-motion */
  --escalonado: 60ms;          /* retardo entre tarjetas de un mismo grupo */
  --ease-entrada: cubic-bezier(.2, .7, .2, 1);     /* desacelera: elementos que entran */
  --ease-cambio: cubic-bezier(.45, 0, .25, 1);     /* suave en ambos extremos: cambios de estado */
  --ease-salida: cubic-bezier(.5, 0, .75, 0);      /* acelera: elementos que salen */
  --desplazamiento-aparicion: 16px;                /* recorrido de la aparición al hacer scroll */
  --escala-pulsado: .97;                           /* botón en :active */
  --escala-hover-flotante: 1.06;                   /* botón flotante de WhatsApp en :hover */
  --escala-aparicion-flotante: .85;                /* escala inicial al aparecer */

  /* Pantalla de carga entre páginas (motion.css, transiciones.js) */
  --dur-preloader-salida: .4s;   /* fundido al terminar de cargar la página */
  --dur-preloader-entrada: .3s;  /* cubre la pantalla antes de navegar */
  --dur-preloader-giro: .8s;     /* una vuelta del anillo */
  --espera-preloader: 2.5s;      /* salvaguarda CSS: se retira solo si el JS no lo hace */

  /* Fondo del documento: lo que se ve entre páginas o al desvanecer el <main>.
     Oscuro (abismo) porque TODAS las páginas empiezan con cabecera oscura (hero o
     .cabecera-pagina): el fundido pasa de oscuro a oscuro, sin fogonazo claro.
     El blanco de las secciones lo pone <main>. */
  --fondo-documento: var(--c-abismo);
}