/**
 * Tokens — valores exactos de la colección de variables "Legazyum / Hi-Fi"
 * de Figma (§2 de la especificación). No modificar sin confirmar contra Figma.
 */

:root {
	/* Color — Oxford Blue / acento azul eléctrico. Dos acentos, no uno:
	   --lgzm-accent sobre blanco da 5,9:1. Ese mismo azul sobre el Oxford
	   Blue solo da 3,2:1 y no pasa AA, por eso existe --lgzm-accent-on-ink
	   (6,4:1). Dentro de cualquier panel azul el acento es accent-on-ink,
	   nunca accent. */
	--lgzm-ink: #03063D;
	--lgzm-ink-secondary: rgba(3, 6, 61, .72);
	--lgzm-ink-tertiary: rgba(3, 6, 61, .48);
	--lgzm-ink-hairline: rgba(3, 6, 61, .12);
	--lgzm-ink-wash: #F2F2F6;

	--lgzm-accent: #2F4BFF;
	--lgzm-accent-hover: #1B33D6;
	--lgzm-accent-on-ink: #7C8CFF;
	--lgzm-accent-wash: #EDEFFF;

	--lgzm-paper: #FFFFFF;
	--lgzm-on-ink: #FFFFFF;
	--lgzm-on-ink-hairline: rgba(255, 255, 255, .14);
	--lgzm-platinum: #E6E6E6;
	--lgzm-whatsapp: #25D366;

	/* Radios */
	--lgzm-radius-8: 8px;
	--lgzm-radius-16: 16px;
	--lgzm-radius-24: 24px;
	--lgzm-radius-32: 32px;
	--lgzm-radius-pill: 999px;

	/* Espaciado y retícula */
	--lgzm-margin-mobile: 20px;
	--lgzm-container: 1200px;
	--lgzm-gutter-desktop: 120px;
	--lgzm-section-mobile: 40px;
	--lgzm-section-desktop: 64px;

	/* Marquee superior (petición del cliente, 2026-09-01). El offset es lo
	   que la cabecera flotante tiene que bajar mientras la banda sigue a la
	   vista; header.js lo va reduciendo con el scroll. El valor por defecto
	   es la altura completa para que, sin JS, la cabecera quede debajo de la
	   banda en vez de encima de ella. */
	--lgzm-marquee-h: 36px;
	--lgzm-marquee-offset: var(--lgzm-marquee-h);

	/* Movimiento (§ auditoría de animación). Las curvas por defecto de CSS
	   son demasiado flojas para movimiento deliberado; estas son las
	   equivalentes fuertes. Regla de uso: lo que entra o sale lleva
	   ease-out; lo que se mueve o se transforma en pantalla, ease-in-out;
	   un cambio de color de hover puede quedarse en ease. Nunca ease-in en
	   UI: arranca lento justo cuando el usuario está mirando. */
	--lgzm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--lgzm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--lgzm-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

	/* Duraciones. Techo de 300ms para UI: a igualdad de curva, 200ms se
	   percibe como más rápido y más receptivo que 400ms. La salida
	   siempre más corta que la entrada. */
	--lgzm-dur-fast: 140ms;
	--lgzm-dur-press: 160ms;
	--lgzm-dur-ui: 220ms;
	--lgzm-dur-surface: 260ms;
	--lgzm-dur-exit: 180ms;

	/* Sección "Cómo trabajamos" (ficha del proceso). Estas duraciones se
	   salen del techo de 300ms a propósito: es contenido explicativo de
	   una landing, que se ve una vez por visita, no interfaz de uso
	   diario. --lgzm-dur-dwell tiene que valer lo mismo que la constante
	   DWELL de assets/js/proceso.js: es el mismo temporizador, uno lo
	   cuenta y el otro lo dibuja. */
	--lgzm-dur-barrido: 620ms;
	--lgzm-dur-contador: 520ms;
	--lgzm-dur-deriva: 7000ms;
	--lgzm-dur-dwell: 6000ms;
	--lgzm-proceso-min: 340px;

	/*
	 * Breakpoint móvil/desktop: NO está definido explícitamente en la
	 * especificación (los frames de Figma solo cubren 375 y 1440). Se usa
	 * 1024px como valor de trabajo — confirmar contra Figma antes de dar
	 * por cerrada la retícula intermedia (tablet).
	 */
	--lgzm-bp-desktop: 1024px;
}