/* Tokens del sistema de diseño AGN.
   Valores tomados del Figma "AGN Maqueta web" (lienzo de 1512 px). */

:root {
	/* Marca */
	--agn-azul-fuerte: #2c6cb4;
	--agn-azul: #519cf1;
	--agn-azul-claro: #64aaf8;
	--agn-azul-palido: #c0e1fc;
	--agn-verde: #9eec5d;
	--agn-verde-palido: #e5fdbf;
	--agn-naranja: #f2a558;
	--agn-naranja-palido: #fdf1c3;
	--agn-amarillo: #f9d85f;
	--agn-agua: #5daba8;

	/* Neutros */
	--agn-gris: #404040;
	--agn-gris-claro: #ececec;
	--agn-blanco: #fff;
	--agn-negro: #000;

	/* Superficies translúcidas sobre fotografía.
	   Figma: los paneles van en blanco al 10% con radio 20; la barra de la
	   cabecera, en blanco al 20% con radio 80. */
	--agn-vidrio: rgba(255, 255, 255, .1);
	--agn-vidrio-barra: rgba(255, 255, 255, .2);
	--agn-vidrio-borde: rgba(255, 255, 255, .2);
	--agn-vidrio-desenfoque: 12px;
	--agn-vidrio-fuerte: rgba(255, 255, 255, .3);

	/* Acento de las páginas de archivo: pastilla de año activa y hover de las
	   tarjetas. Columna usa el suyo (#58BCD8 en el Figma). */
	--agn-acento: var(--agn-azul);
	--agn-acento-suave: var(--agn-azul-palido);
	--agn-acento-texto: var(--agn-blanco);
	--agn-velo: rgba(64, 64, 64, .3);
	--agn-velo-suave: rgba(64, 64, 64, .1);

	/* Texto */
	--agn-texto: var(--agn-gris);
	--agn-texto-inverso: var(--agn-blanco);

	/* Tipografía */
	--agn-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--agn-peso-light: 300;
	--agn-peso-regular: 400;
	--agn-peso-semi: 600;
	--agn-peso-bold: 700;

	/* Escala fluida: el valor del Figma se alcanza justo a 1512 px y ahí se
	   estabiliza; el mínimo corresponde a 360 px. */
	--agn-fs-display: clamp(2rem, 1.551rem + 2vw, 3.4375rem);       /* 55 */
	--agn-fs-hero: clamp(1.875rem, 1.484rem + 1.736vw, 3.125rem);   /* 50 */
	--agn-fs-seccion: clamp(1.75rem, 1.381rem + 1.515vw, 2.8125rem); /* 45 */
	--agn-fs-xxl: clamp(1.625rem, 1.321rem + 1.248vw, 2.5rem);      /* 40 */
	--agn-fs-xl: clamp(1.5rem, 1.285rem + 0.955vw, 2.1875rem);      /* 35 */
	--agn-fs-lg: clamp(1.375rem, 1.219rem + 0.694vw, 1.875rem);     /* 30 */
	--agn-fs-md: clamp(1.25rem, 1.152rem + 0.434vw, 1.5625rem);     /* 25 */
	--agn-fs-body: 1.0625rem;                                     /* 17 */
	--agn-fs-boton: clamp(1rem, 0.922rem + 0.347vw, 1.25rem);       /* 20 */
	--agn-fs-sm: 1rem;                                            /* 16 */
	--agn-fs-xs: 0.9375rem;                                       /* 15 */
	--agn-fs-mini: 0.875rem;                                      /* 14 */

	--agn-interlineado: 1.22;       /* Montserrat "normal" del Figma */
	--agn-interlineado-titulo: 1.22;

	/* Rejilla */
	--agn-ancho: 1334px;          /* contenido: de 89 a 1423 en el Figma */
	--agn-ancho-amplio: 1420px;   /* tarjetas de vidrio a sangre parcial */
	--agn-margen: clamp(1.25rem, 5.89vw, 5.5625rem);
	/* Margen de los paneles a sangre parcial: 46px en el lienzo de 1512. */
	--agn-margen-amplio: clamp(1rem, 3.042vw, 2.875rem);
	/* Distancia del borde de la pantalla al inicio del contenido. */
	--agn-gutter: max(var(--agn-margen), calc((100vw - var(--agn-ancho)) / 2));

	/* Radios */
	--agn-r-xs: 10px;
	--agn-r-sm: 11px;
	--agn-r-md: 15px;
	--agn-r-lg: 20px;
	--agn-r-xl: 37px;
	--agn-r-pill: 115px;

	/* Sombra y transición */
	--agn-sombra: 0 4px 4px rgba(0, 0, 0, .25);
	--agn-sombra-suave: 0 2px 10px rgba(0, 0, 0, .1);
	/* Figma: las fichas grises llevan 0 4 4 al 10%. */
	--agn-sombra-ficha: 0 4px 4px rgba(0, 0, 0, .1);
	--agn-transicion: 200ms ease;

	/* Ritmo vertical de secciones */
	--agn-seccion: clamp(3.5rem, 6vw, 7rem);
	--agn-espacio-xs: .5rem;
	--agn-espacio-sm: 1rem;
	--agn-espacio-md: 1.5rem;
	--agn-espacio-lg: 2.5rem;
	--agn-espacio-xl: 4rem;

	/* Alturas fijas */
	--agn-cabecera: 126px;
	--agn-z-cabecera: 100;
	--agn-z-overlay: 200;
}

@media (max-width: 782px) {
	:root {
		--agn-cabecera: 78px;
	}
}