/*
 * Variables del sistema. Fuente de verdad:
 *   color       _docs/sistema-color.md
 *   tipografía  _docs/tipografia.md
 *   espaciado   _docs/espaciado.md
 *
 * Mobile first: los valores base son los del móvil; las media queries
 * solo cambian lo que cambia por tramo.
 */

:root {
	/* ── Color · corporativos ─────────────────────────────── */
	--azul:      #012D65;
	--beige-100: #ECE1D3;

	/* ── Color · rampa del beige ──────────────────────────── */
	--beige-50:  #F4EEE6; /* fondo de las superficies grandes: páginas, menú, pie */
	--beige-500: #BA925F; /* decorativo: numeración en reposo, reglas, filetes */
	--beige-600: #967041; /* acento de texto sobre fondo claro */
	--beige-700: #795B34; /* acento en texto de menos de 24 px sobre claro */

	/* ── Color · apoyo ────────────────────────────────────── */
	--azul-700: #2C4A73;
	--azul-300: rgba(1, 45, 101, .28);
	/* Azul grisáceo muy suave: el corporativo al 10 % sobre blanco, no un
	   color muestreado. Fondo de las fases 01–03 del 01 (sistema-color.md). */
	--azul-50:  color-mix(in srgb, var(--azul) 10%, var(--blanco));
	--papel:    #FBF8F2;
	--blanco:   #FFFFFF;

	/* ── Familias ─────────────────────────────────────────── */
	--serif: "DM Serif Display", Georgia, "Times New Roman", serif;
	--sans:  "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* ── Escala ───────────────────────────────────────────── */
	--fs-h1:       clamp(2.125rem, 1.771rem + 2.48vw, 4.5rem);
	--fs-h2:       clamp(1.875rem, 1.738rem + 1.33vw, 3.25rem);
	--fs-h3:       clamp(1.5rem, 1.462rem + 0.667vw, 2.25rem);
	--fs-intro:    clamp(1.125rem, 1.0135rem + 0.4575vw, 1.5625rem); /* 18 → 25 px (brief 02, p. 14) */
	--fs-lectura:  clamp(1rem, 0.9914rem + 0.1634vw, 1.1875rem); /* 16,5 → 19 px (brief 02, p. 14) */
	--fs-interfaz: clamp(0.8125rem, 0.7777rem + 0.143vw, 0.9375rem);
	--fs-micro:    clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem);

	/*
	 * Textos de firma: 11–12 px, con suelo de 11 (menu.md, tipografia.md).
	 * Pasa por 11 px a 390 y 12 px a 1440.
	 */
	--fs-firma: clamp(0.6875rem, 0.6643rem + 0.0952vw, 0.75rem);

	/* ── Escala · específicos ─────────────────────────────── */
	--fs-hero-pregunta:     clamp(1.5rem, 1.291rem + 0.857vw, 2.25rem); /* 24–36 px: nunca por debajo de 24, por contraste */
	--fs-hero-final:        clamp(2.125rem, 1.686rem + 2.57vw, 4.5rem);
	--fs-menu-claim:        clamp(2.25rem, 1.95rem + 2vw, 4rem);
	--fs-menu-numero:       clamp(1.875rem, 1.645rem + 1.71vw, 3.375rem);
	--fs-menu-titulo:       clamp(1.125rem, 1.114rem + 0.429vw, 1.625rem);
	--fs-menu-subtitulo:    clamp(0.9375rem, 0.9143rem + 0.0952vw, 1.062rem); /* 15 px a 390, 16 a 1440, 17 hacia 2480 */
	--fs-cortina-principal: clamp(2.625rem, 2.007rem + 3.048vw, 5rem);
	--fs-cortina-secundario: clamp(2.25rem, 1.864rem + 2.095vw, 4rem);
	--fs-cabecera-numero:   clamp(1.5rem, 1.1893rem + 0.7619vw, 1.875rem); /* 24–30 px: nunca por debajo de 24, por contraste */

	/* ── Interlineado ─────────────────────────────────────── */
	--lh-h1:       1.02;
	--lh-h2:       1.08;
	--lh-h3:       1.12;
	--lh-intro:    1.5;
	--lh-lectura:  1.6;
	--lh-interfaz: 1.2;

	/* Tracking de las mayúsculas: baja cuanto más grande es el texto.
	   0,12–0,14 em en textos pequeños (cabecera, pie, rótulos); 0,07 em
	   en títulos en mayúsculas de 18 px o más (títulos del menú). */
	--tracking-mayusculas:        0.13em;
	--tracking-mayusculas-grande: 0.07em;

	/* ── Espaciado ────────────────────────────────────────── */
	--columnas:    4;
	--medianil:    clamp(1rem, 0.745rem + 1.046vw, 2rem);
	--margen:      clamp(1.25rem, 5.2vw, 6.25rem);
	--lectura:     100%; /* M: ancho del contenedor */
	--separacion:  clamp(1.75rem, 1.049rem + 2.876vw, 4.5rem);
	--cabecera:    clamp(4.5rem, 3.863rem + 2.614vw, 7rem);
	--area-segura: clamp(5.75rem, 4.985rem + 3.137vw, 8.75rem);

	/* R3 · Filete corto: 40–60 px (componentes.md). */
	--filete-corto: clamp(2.5rem, 1.9rem + 1.5vw, 3.75rem);

	/* ── Controles ────────────────────────────────────────── */
	--control-minimo: 44px;
	--cerrar:         44px;
	--cta-alto:       56px;

	/* Tarjetas del selector del 03: la proporción de la página 5 del brief. */
	--tarjeta-proporcion: 417 / 427;

	/* ── Capas ────────────────────────────────────────────── */
	--z-cabecera:      100;
	--z-capa:          1000; /* menú y cortina; nunca a la vez */
	--z-capa-cabecera: 1010;

	/* ── Tiempos ──────────────────────────────────────────── */
	/* Secuencia del hero (hero.md), acumulativa: cada pregunta entra y se
	   queda; 2,5 s entre una y otra y 3 s con las cuatro. Al cierre salen
	   las cuatro a la vez, la foto se oscurece y entra la frase final,
	   que empieza mientras salen: no hay instante de pantalla vacía.
	   Sin --t-cue: la indicación de continuar no se porta. */
	--t-q1:       0.8s;
	--t-q2:       3.3s;
	--t-q3:       5.8s;
	--t-q4:       8.3s;
	--t-cierre:  11.3s;
	--t-final:   11.5s;
	--dur-q:      1.1s; /* entrada de cada pregunta */
	--dur-cruce:  0.6s; /* salida de las preguntas y entrada de la frase */
	--dur-cierre: 0.8s; /* velo y cabecera */

	--t-hover:          220ms;
	--t-zoom:           300ms; /* la foto de las tarjetas del 04, al pasar */
	--t-selector:       350ms; /* fundido y atenuado del selector del 03 */
	--t-menu-fundido:   520ms;
	--t-menu-retardo:   120ms;
	--t-menu-capa:      380ms; /* entrada y salida de la capa; menu.js la lee */
	--t-menu-fila:      260ms; /* número y flecha de cada fila */
	--t-cortina-abrir:  550ms;
	--t-cortina-cerrar: 475ms;
	/* Entrada común (.loha-entrada): epílogo y pantallas de los casos. El
	   texto sube y aparece; la imagen aparece un poco después. */
	--t-entrada:         900ms;
	--t-entrada-imagen:  1200ms;
	--t-entrada-retardo: 350ms;
	--curva-suave:      cubic-bezier(.22, .61, .36, 1);
}

/* Tablet vertical · 600–1023 px */
@media (min-width: 600px) {
	:root {
		--columnas: 8;
		--lectura:  58ch;
		--cerrar:   48px;
	}
}

/* Tablet apaisada y escritorio · desde 1024 px: composición de escritorio */
@media (min-width: 1024px) {
	:root {
		--columnas: 12;
		--lectura:  65ch;
	}
}