/* Cabecera, menú overlay y pie. */

/* ---------------- Cabecera ---------------- */

.agn-cabecera {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--agn-z-cabecera);
	padding-top: 29px;
	transition: padding var(--agn-transicion);
}

.agn-cabecera > .agn-contenedor {
	transition: padding var(--agn-transicion);
}

/* Al bajar, la barra se acerca al borde: la mitad del margen. */
.agn-cabecera.is-compacta {
	padding-top: 15px;
}

/* Y encoge: menos alto y logotipo mas chico. */
.agn-cabecera.is-compacta .agn-cabecera__barra {
	min-height: 86px;
}

.agn-cabecera.is-compacta .agn-cabecera__marca {
	width: 96px;
}

.agn-cabecera.is-compacta > .agn-contenedor {
	padding-inline: calc(var(--agn-margen-amplio) / 2);
}

/* Ya fuera de la fotografía de cabecera, el vidrio no contrasta: la barra
   pasa al azul de marca, el mismo que usa la ficha de noticia en el Figma. */
.agn-cabecera.is-compacta .agn-cabecera__barra {
	background: var(--agn-azul);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: var(--agn-sombra);
}

/* La barra de administración de WordPress no debe tapar la cabecera. */
body.admin-bar .agn-cabecera {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .agn-cabecera {
		top: 46px;
	}
}

.agn-cabecera--solida {
	position: static;
	padding-top: 0;
	background: var(--agn-blanco);
	box-shadow: var(--agn-sombra-suave);
}

.agn-cabecera__barra {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	min-height: var(--agn-cabecera);
	transition: min-height var(--agn-transicion);
	padding-inline: clamp(1.25rem, 2.9vw, 2.75rem);
	border-radius: 80px;
	transition: background var(--agn-transicion), box-shadow var(--agn-transicion);
	/* Figma: la barra va al 20%, más opaca que los paneles. */
	background: var(--agn-vidrio-barra);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.agn-cabecera--solida .agn-cabecera__barra {
	border-radius: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	min-height: 96px;
}

.agn-cabecera__marca {
	justify-self: center;
	display: block;
	width: 114px;
	transition: width var(--agn-transicion);
}

.agn-cabecera__marca img {
	width: 100%;
	height: auto;
}

.agn-cabecera__rrss {
	justify-self: start;
}

.agn-cabecera__acciones {
	justify-self: end;
}

/* Botón hamburguesa */

.agn-menu-boton {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.agn-menu-boton span:not(.agn-solo-lectores) {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 3px;
	background: var(--agn-blanco);
	transition: transform var(--agn-transicion), opacity var(--agn-transicion);
}

.agn-cabecera--solida .agn-menu-boton span:not(.agn-solo-lectores) {
	background: var(--agn-gris);
}

/* La cabecera flota sobre foto o sobre el azul: los iconos van en blanco. */
.agn-cabecera__rrss svg [fill="#404040"] {
	fill: var(--agn-blanco);
}

.agn-cabecera__rrss svg [stroke="#404040"] {
	stroke: var(--agn-blanco);
}

/* Solo la cabecera blanca de las páginas sin foto los deja en gris. */
.agn-cabecera--solida .agn-cabecera__rrss svg [fill="#404040"] {
	fill: var(--agn-gris);
}

.agn-cabecera--solida .agn-cabecera__rrss svg [stroke="#404040"] {
	stroke: var(--agn-gris);
}

/* Sobre una fotografía clara el blanco se pierde: el JS mide el brillo de la
   foto detrás de los iconos y marca el body, y cada página puede forzarlo
   desde «Iconos de la cabecera». */
body.agn-cabecera-clara .agn-cabecera__rrss svg [fill="#404040"],
body.agn-cabecera-iconos-oscuros .agn-cabecera__rrss svg [fill="#404040"] {
	fill: var(--agn-gris);
}

body.agn-cabecera-clara .agn-cabecera__rrss svg [stroke="#404040"],
body.agn-cabecera-iconos-oscuros .agn-cabecera__rrss svg [stroke="#404040"] {
	stroke: var(--agn-gris);
}

/* ---------------- Menú overlay ---------------- */

.agn-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--agn-z-overlay);
	display: flex;
	flex-direction: column;
	background: var(--agn-blanco);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1.5rem);
	transition: opacity var(--agn-transicion), transform var(--agn-transicion), visibility var(--agn-transicion);
	overflow-y: auto;
}

.agn-overlay[hidden] {
	display: none;
}

.agn-overlay.is-abierto {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.agn-overlay__interior {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
	width: 100%;
	max-width: calc(var(--agn-ancho) + var(--agn-margen) * 2);
	margin-inline: auto;
	padding: 59px var(--agn-margen) clamp(2rem, 6.08vw, 92px);
}

.agn-overlay__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--agn-gris-claro);
}

.agn-overlay__marca {
	display: block;
	width: 114px;
}

.agn-overlay__cerrar {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--agn-gris);
	cursor: pointer;
}

.agn-overlay__cerrar svg {
	width: 100%;
	height: 100%;
}

.agn-overlay__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 2rem;
	flex: 1;
	/* Figma: del filete al lema hay 37 y de la última entrada al pie 29. */
	padding-block: clamp(1.5rem, 2.45vw, 37px) clamp(1.25rem, 1.92vw, 29px);
}

.agn-overlay__lema {
	max-width: 495px;
	margin: 0;
	font-size: var(--agn-fs-display);
	font-style: italic;
	font-weight: var(--agn-peso-bold);
	color: var(--agn-gris);
	line-height: 1.11;
}

.agn-overlay__nav ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.agn-overlay__nav li {
	margin: 0;
}

/* Figma: entradas de 50 con 2 de separación. */
.agn-overlay__nav li + li {
	margin-top: 2px;
}

.agn-overlay__nav a {
	display: block;
	padding: 0;
	font-size: var(--agn-fs-lg);
	line-height: 50px;
	color: var(--agn-gris);
	text-decoration: none;
	transition: color var(--agn-transicion);
}

.agn-overlay__nav a:hover,
.agn-overlay__nav a:focus-visible {
	color: var(--agn-azul);
}

.agn-overlay__nav .current-menu-item > a,
.agn-overlay__nav .current_page_item > a {
	font-weight: var(--agn-peso-bold);
}

.agn-overlay__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: clamp(.75rem, 1.32vw, 20px);
	border-top: 1px solid var(--agn-gris-claro);
}

.agn-overlay__pie nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 6.55vw, 99px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-overlay__pie nav li {
	margin: 0;
}

.agn-overlay__pie nav a {
	font-size: var(--agn-fs-sm);
	font-weight: var(--agn-peso-light);
	color: var(--agn-gris);
	text-decoration: none;
	line-height: 45px;
}

.agn-overlay__pie nav a:hover,
.agn-overlay__pie nav a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 860px) {
	.agn-overlay__cuerpo {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 24px;
	}

	.agn-overlay__nav ul {
		text-align: left;
	}

	.agn-overlay__nav a {
		font-size: var(--agn-fs-md);
		line-height: 2.1;
	}

	.agn-overlay__pie {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.agn-overlay__pie nav ul {
		flex-direction: column;
		gap: 0;
	}
}

/* ---------------- Pie ---------------- */

.agn-pie {
	position: relative;
	padding-block: clamp(3rem, 7.47vw, 7.0625rem);
	background: var(--agn-gris);
	color: var(--agn-blanco);
	isolation: isolate;
}

.agn-pie__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.agn-pie__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* En el Figma la banda del pie va sin velo: el texto vive dentro de los dos
   paneles, asi que la fotografia se ve a su brillo original. */
.agn-pie__fondo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(64, 64, 64, .06) 0%, rgba(64, 64, 64, .12) 100%);
}

.agn-pie__rejilla {
	display: grid;
	/* Figma: dos bloques de 673 y 630 con 31 entre medio, de 89 a 1423. */
	grid-template-columns: minmax(0, 673fr) minmax(0, 630fr);
	gap: clamp(1rem, 2.05vw, 1.9375rem);
	align-items: stretch;
}

/* Suscripción */

.agn-suscripcion {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1rem, 1.26vw, 1.1875rem);
	min-height: clamp(16rem, 21.89vw, 20.6875rem);
	/* 45 arriba y abajo; 43 a los lados, que es lo que necesita el titular
	   para caber en una linea como en el Figma. */
	padding: clamp(1.5rem, 2.98vw, 2.8125rem) clamp(1.25rem, 2.51vw, 2.375rem);
	border-radius: var(--agn-r-sm);
	background: var(--agn-velo);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.agn-suscripcion__titulo {
	margin: 0;
	font-size: var(--agn-fs-lg);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-blanco);
}

.agn-suscripcion__ayuda:not(:empty) {
	margin: 0;
	font-size: var(--agn-fs-boton);
	color: var(--agn-blanco);
}

/* Sin nota, el bloque no deja un hueco. */
.agn-suscripcion__ayuda:empty {
	display: none;
}

/* Bloque de enlaces */

.agn-pie__bloque {
	display: flex;
	flex-direction: column;
	min-height: clamp(16rem, 21.89vw, 20.6875rem);
	border-radius: var(--agn-r-xs);
	background: var(--agn-gris);
	overflow: hidden;
}

.agn-pie__cuerpo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3.37vw, 3.1875rem);
	flex: 1;
	padding: clamp(1.25rem, 2.25vw, 2.125rem) clamp(1.25rem, 2.51vw, 2.375rem)
		clamp(1.25rem, 2.58vw, 2.4375rem) clamp(1.5rem, 3.64vw, 3.4375rem);
}

/* Franja inferior del bloque: redes y enlaces legales. */
.agn-pie__franja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 1.85vw, 1.75rem);
	padding: clamp(.75rem, 1.52vw, 1.4375rem) clamp(1rem, 1.98vw, 1.875rem);
	background: #666;
}

/* En la franja los iconos son un poco mas chicos que en la cabecera. */
.agn-pie__rrss .agn-rrss {
	gap: 16px;
}

.agn-pie__rrss .agn-rrss a {
	width: 29px;
	height: 29px;
}

.agn-pie__legales {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.75rem, 1.39vw, 1.3125rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-pie__legales li {
	margin: 0;
}

.agn-pie__legales a {
	font-size: var(--agn-fs-mini);
	color: var(--agn-blanco);
	text-decoration: underline;
}

.agn-pie__legales a:hover,
.agn-pie__legales a:focus-visible {
	color: var(--agn-verde);
}

.agn-pie__marca {
	width: 100px;
}

.agn-pie__columna {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.agn-pie__columna > ul,
.agn-pie__columna > div > ul.menu {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-pie__columna > ul > li {
	margin: 0;
}

.agn-pie__columna .agn-rrss {
	flex-direction: row;
}

.agn-pie__columna a {
	font-size: var(--agn-fs-mini);
	color: var(--agn-blanco);
	text-decoration: underline;
}

.agn-pie__columna a:hover,
.agn-pie__columna a:focus-visible {
	color: var(--agn-verde);
}

.agn-pie__rrss {
	flex: 0 0 auto;
}

/* Sobre la franja gris del pie, los iconos van en blanco. */
.agn-pie__rrss svg [fill="#404040"] {
	fill: var(--agn-blanco);
}

.agn-pie__rrss svg [stroke="#404040"] {
	stroke: var(--agn-blanco);
}

.agn-pie__legal {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	font-size: var(--agn-fs-mini);
	color: rgba(255, 255, 255, .8);
}

@media (max-width: 1024px) {
	.agn-pie__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.agn-pie__bloque {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------- Cabecera y menú en pantallas chicas ---------------- */

/* Bajo 760 la barra deja solo el logotipo y el botón: las redes viven en el
   menú desplegado. */
@media (max-width: 760px) {
	.agn-cabecera {
		padding-top: 12px;
	}

	.agn-cabecera__barra {
		grid-template-columns: 1fr auto;
		gap: .75rem;
		min-height: 72px;
		padding-inline: 1rem;
	}

	.agn-cabecera--solida .agn-cabecera__barra {
		min-height: 72px;
	}

	.agn-cabecera__rrss {
		display: none;
	}

	.agn-cabecera__marca {
		justify-self: start;
		width: 92px;
	}

	.agn-cabecera.is-compacta {
		padding-top: 8px;
	}

	.agn-cabecera.is-compacta .agn-cabecera__barra {
		min-height: 64px;
	}

	.agn-cabecera.is-compacta .agn-cabecera__marca {
		width: 80px;
	}

	.agn-overlay__interior {
		padding-top: 24px;
	}

	.agn-overlay__cuerpo {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.agn-overlay__nav ul {
		text-align: left;
	}

	.agn-overlay__nav a {
		line-height: 2.1;
	}

	.agn-overlay__pie {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.agn-overlay__pie nav ul {
		gap: 1rem 1.5rem;
	}
}