/* 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);
}

/* Cada entrada lleva el color predominante de su propia sección: se enciende
   al pasar el cursor y queda fijo en la página en la que estamos. El mapa de
   colores está más abajo, en "Color de sección del menú". */
.agn-overlay__nav a:hover,
.agn-overlay__nav a:focus-visible,
.agn-overlay__nav .current-menu-item > a,
.agn-overlay__nav .current_page_item > a,
.agn-overlay__nav .current-menu-parent > a,
.agn-overlay__nav .current-page-ancestor > a,
.agn-overlay__nav .current-menu-ancestor > a {
	color: var(--agn-menu-color, var(--agn-azul));
}

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

/* ---------------- Color de sección del menú ----------------
   Un color por destino, tomado del elemento que manda en cada página. Para
   cambiar cualquiera basta con tocar la línea que corresponda. */
.agn-overlay__nav .menu-item-home,
.agn-overlay__nav .agn-menu-inicio,
.agn-overlay__nav .agn-menu-newsletter,
.agn-overlay__nav .agn-menu-noticias {
	--agn-menu-color: var(--agn-azul);
}

.agn-overlay__nav .agn-menu-quienes-somos,
.agn-overlay__nav .agn-menu-podcast-conversar {
	--agn-menu-color: var(--agn-verde);
}

.agn-overlay__nav .agn-menu-que-es-el-gas-natural {
	--agn-menu-color: var(--agn-naranja);
}

.agn-overlay__nav .agn-menu-nuestros-socios,
.agn-overlay__nav .agn-menu-mesa-de-mujeres {
	--agn-menu-color: var(--agn-agua);
}

/* Los mismos acentos que usan las páginas de archivo. */
.agn-overlay__nav .agn-menu-opinion {
	--agn-menu-color: #58bcd8;
}

.agn-overlay__nav .agn-menu-somos-agn {
	--agn-menu-color: #3ec3b2;
}

.agn-overlay__nav .agn-menu-videos {
	--agn-menu-color: #6dd76d;
}

.agn-overlay__nav .agn-menu-documentos,
.agn-overlay__nav .agn-menu-transparencia {
	--agn-menu-color: #7ff21c;
}

.agn-overlay__nav .agn-menu-contacto,
.agn-overlay__nav .agn-menu-estados-financieros {
	--agn-menu-color: var(--agn-azul-fuerte);
}

.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);
}

/* El alta vive en el formulario externo: aqui solo el boton, que no debe
   estirarse a todo el ancho del panel como hacia el campo de correo. */
.agn-suscripcion__boton {
	align-self: flex-start;
	width: auto;
}

.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;
}

/* La copia de los legales que va dentro de la segunda columna solo se usa en
   movil; en escritorio manda la de la franja. */
.agn-pie__legales--columna {
	display: none;
}

.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);
	}
}

/* ---------------- Pie en movil ----------------
   Figma movil: sin el logotipo, los enlaces en dos columnas —los legales
   siguen a la segunda, bajo «Repositorio»— y las redes solas en la franja de
   abajo, con los circulos mas grandes. */
@media (max-width: 760px) {
	.agn-pie__bloque {
		--agn-pie-aire: clamp(1.25rem, 6vw, 1.75rem);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--agn-pie-aire);
		row-gap: 0;
		min-height: 0;
	}

	/* La caja intermedia se disuelve para que las columnas sean celdas de la
	   misma rejilla; el relleno pasa a cada columna, de modo que la franja de
	   redes pueda ir a sangre completa. */
	.agn-pie__cuerpo {
		display: contents;
	}

	.agn-pie__marca {
		display: none;
	}

	.agn-pie__columna {
		align-self: start;
		padding-block: var(--agn-pie-aire);
	}

	.agn-pie__columna--principal {
		grid-column: 1;
		padding-left: var(--agn-pie-aire);
	}

	.agn-pie__columna--secundaria {
		grid-column: 2;
		padding-right: var(--agn-pie-aire);
	}

	/* Los legales pasan a la columna; la copia de la franja se guarda. */
	.agn-pie__legales--columna {
		display: flex;
	}

	.agn-pie__legales--franja {
		display: none;
	}

	/* Banda de redes, a todo el ancho y centrada. */
	.agn-pie__franja {
		grid-column: 1 / -1;
		justify-content: center;
		padding: var(--agn-pie-aire);
	}

	.agn-pie__rrss .agn-rrss {
		gap: clamp(1.25rem, 6vw, 2rem);
	}

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

/* ---------------- 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;
	}
}