/* Portada. Medidas tomadas del frame "Home" (1512 px de ancho). */

/* ---------------- Hero ---------------- */

.agn-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(34rem, 58.9vw, 55.6875rem); /* 891 */
	/* El panel cierra a 48 del borde inferior en el Figma. */
	padding-block: calc(var(--agn-cabecera) + 4rem) clamp(1.25rem, 3.17vw, 3rem);
	color: var(--agn-blanco);
	isolation: isolate;
	overflow: hidden;
}

.agn-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.agn-hero__fondo img,
.agn-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agn-hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 32%),
		linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%);
}

.agn-hero__interior {
	position: relative;
	width: 100%;
}

.agn-hero__panel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.5rem, 16.53vw, 15.625rem);
	align-items: start;
	/* Figma: panel de 1420x432; texto a 63 del borde superior, logotipo a 179
	   del izquierdo y el botón cerrando a 39 del inferior. */
	min-height: clamp(16rem, 23.15vw, 21.875rem);
	padding: clamp(1.25rem, 2.98vw, 2.8125rem) clamp(1.25rem, 2.84vw, 2.6875rem)
		clamp(1rem, 2.25vw, 2.125rem) clamp(1.5rem, 11.84vw, 11.1875rem);
}

.agn-hero__logo {
	width: clamp(84px, 8.73vw, 132px);
	margin-top: clamp(0px, .86vw, 13px);
}

.agn-hero__titulo {
	max-width: 816px;
	margin: 0 0 clamp(.5rem, .93vw, .875rem);
	font-size: var(--agn-fs-display);
	font-style: italic;
	font-weight: var(--agn-peso-bold);
	color: var(--agn-blanco);
}

.agn-hero__bajada {
	max-width: 741px;
	font-size: var(--agn-fs-body);
}

.agn-hero__accion {
	margin-top: clamp(1rem, 1.85vw, 1.75rem);
}

@media (max-width: 900px) {
	.agn-hero__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.agn-hero__accion {
		margin-top: 1.5rem;
	}
}

/* Figma movil: el panel arranca directo en el titular, sin el logotipo. */
@media (max-width: 760px) {
	.agn-hero__logo {
		display: none;
	}
}

/* ---------------- Cadena de valor ---------------- */

.agn-cadena {
	/* Figma: banda de 916 de alto, titulo a 121 del borde superior. */
	padding-block: clamp(3rem, 8vw, 7.5625rem) clamp(3rem, 8.8vw, 8.3125rem);
	background: var(--agn-azul-fuerte);
	color: var(--agn-blanco);
}

.agn-cadena__encabezado {
	display: flex;
	flex-wrap: wrap;
	/* Figma: el boton va centrado a la altura del bloque de titulo. */
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.25rem);
	/* Del pie del titulo al borde superior de los circulos: 64. */
	margin-bottom: clamp(2rem, 4.23vw, 4rem);
	padding-inline: clamp(0px, 2.72vw, 41px);
}

.agn-cadena__titulo {
	/* El ancho marca donde parte el boton: ajustado para que quede junto al
	   texto y no al borde de la caja. */
	max-width: 760px;
	margin: 0;
	font-size: var(--agn-fs-seccion);
	/* Figma: 45/50. El tramo en negrita cursiva lo marca .agn-enfasis. */
	line-height: 1.112;
	font-weight: var(--agn-peso-regular);
}

.agn-cadena__encabezado .agn-btn {
	/* Mas corto que el Figma (157) y con el rotulo centrado, no pegado a la
	   izquierda. El ancho minimo lo pone .agn-btn (100px). */
	justify-content: center;
	gap: 1.25rem;
}

.agn-cadena__etapas {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-cadena__etapa {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
}

/* En escritorio el acordeon no existe visualmente: la caja y la cabecera se
   disuelven y el icono, el rotulo y los logotipos vuelven a ser hijos de la
   etapa. El JS deja todos los <details> abiertos sobre 760. */
.agn-cadena__caja,
.agn-cadena__cabecera {
	display: contents;
}

.agn-cadena__cabecera::-webkit-details-marker {
	display: none;
}

/* Sobre 760 la cabecera no debe responder al clic: si no, pulsar el rotulo
   pliega la etapa y se pierden sus logotipos. */
.agn-cadena__cabecera > * {
	pointer-events: none;
}

.agn-cadena__flecha {
	display: none;
}

/* Tramo entre dos etapas: 97x6 centrado en la altura del circulo. */
.agn-cadena__etapa--enlazada::before {
	content: '';
	position: absolute;
	top: calc(var(--agn-cadena-circulo) / 2 - 3px);
	/* 16 de aire a cada lado para que no toque los circulos. */
	left: calc(50% + var(--agn-cadena-circulo) / 2 + 16px);
	width: calc(100% - var(--agn-cadena-circulo) - 32px);
	height: 6px;
	border-radius: 3px;
	/* Blanco al 20% ya mezclado con la banda: asi la punta de flecha puede
	   solaparse con la linea sin que se note la union. */
	background: #5689c3;
}

/* Solo el primer tramo lleva punta de flecha en el Figma. Va pegada al final
   de la linea: mismo color solido, extremos y vertice redondeados. */
.agn-cadena__etapa--flecha::after {
	content: '';
	position: absolute;
	top: calc(var(--agn-cadena-circulo) / 2 - 26px);
	/* La punta cae justo donde termina la linea. */
	left: calc(150% - var(--agn-cadena-circulo) / 2 - 39px);
	width: 26px;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 52' fill='none'%3E%3Cpath d='M3 3l20 23-20 23' stroke='%235689c3' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 52px no-repeat;
}

.agn-cadena__icono {
	--agn-cadena-circulo: clamp(96px, 10.58vw, 160px);
	display: grid;
	place-items: center;
	width: var(--agn-cadena-circulo);
	height: var(--agn-cadena-circulo);
	border-radius: 50%;
	background: rgba(0, 0, 0, .1);
}

.agn-cadena__etapa {
	--agn-cadena-circulo: clamp(96px, 10.58vw, 160px);
}

.agn-cadena__icono img {
	max-width: 65%;
	max-height: 59%;
	width: auto;
}

.agn-cadena__etiqueta {
	/* Dos lineas reservadas: asi los logotipos de todas las etapas arrancan
	   a la misma altura, como en el Figma. */
	min-height: calc(2 * var(--agn-interlineado) * var(--agn-fs-body));
	max-width: 240px;
	margin-top: 16px;
	font-size: var(--agn-fs-body);
	font-weight: var(--agn-peso-bold);
}

/* Logotipos de la etapa: circulos de 120, de a dos por fila. */
.agn-cadena__logos {
	/* Rejilla de dos columnas: los circulos se encogen con la columna en vez
	   de saltar a una sola fila cuando la pantalla es mas angosta que 1512. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-items: center;
	gap: 10px 12px;
	width: 100%;
	max-width: 252px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

/* Con uno o dos logotipos el Figma los apila en una columna. */
.agn-cadena__logos--1,
.agn-cadena__logos--2 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 120px;
}

.agn-cadena__logo {
	width: 100%;
	max-width: 120px;
	margin: 0;
}

.agn-cadena__logo > a,
.agn-cadena__logo > span {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	/* Figma: los logotipos llegan a ~92% del circulo. */
	padding: 5%;
	border-radius: 50%;
	background: var(--agn-blanco);
	transition: transform var(--agn-transicion);
}

.agn-cadena__logo > a:hover,
.agn-cadena__logo > a:focus-visible {
	transform: scale(1.06);
}

.agn-cadena__logo img {
	max-width: 100%;
	max-height: 53%;
	width: auto;
	object-fit: contain;
}

.agn-cadena__logo-nombre {
	font-size: var(--agn-fs-mini);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-gris);
	text-align: center;
}

@media (max-width: 1100px) {
	.agn-cadena__etapas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 1rem;
	}

	.agn-cadena__etapa--enlazada::before,
	.agn-cadena__etapa--flecha::after {
		display: none;
	}
}

/* Figma movil: cada etapa pasa a una fila, con el icono chico a la izquierda,
   el rotulo al lado y los logotipos debajo, separadas por una linea. */
@media (max-width: 760px) {
	.agn-cadena__etapas {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.agn-cadena__etapa,
	.agn-cadena__icono {
		--agn-cadena-circulo: 62px;
	}

	.agn-cadena__etapa {
		display: block;
		padding-block: 1.125rem;
		text-align: left;
	}

	/* Figma movil: cada etapa es un acordeon. La cabecera lleva el icono, el
	   rotulo y la flecha; los logotipos solo se ven al abrirla. */
	.agn-cadena__caja {
		display: block;
	}

	.agn-cadena__cabecera > * {
		pointer-events: auto;
	}

	.agn-cadena__cabecera {
		display: grid;
		grid-template-columns: var(--agn-cadena-circulo) minmax(0, 1fr) 40px;
		column-gap: 1.125rem;
		align-items: center;
		list-style: none;
		cursor: pointer;
	}

	.agn-cadena__flecha {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--agn-blanco);
		color: var(--agn-gris);
		transition: transform var(--agn-transicion);
	}

	.agn-cadena__flecha svg {
		width: 45%;
		height: auto;
	}

	.agn-cadena__caja:not([open]) .agn-cadena__flecha {
		transform: rotate(180deg);
	}

	.agn-cadena__etapa + .agn-cadena__etapa {
		border-top: 1px solid rgba(255, 255, 255, .25);
	}

	.agn-cadena__etiqueta {
		min-height: 0;
		max-width: none;
		margin-top: 0;
	}

	.agn-cadena__logos,
	.agn-cadena__logos--1,
	.agn-cadena__logos--2 {
		/* El cliente pidio tres por fila. */
		grid-template-columns: repeat(3, minmax(0, 68px));
		justify-content: start;
		justify-items: start;
		gap: 12px;
		/* Sin el 100% heredado: con el margen de sangria desbordaba la banda. */
		width: auto;
		max-width: none;
		/* Alineados con el rotulo, no con el icono. */
		margin: 14px 0 0 calc(var(--agn-cadena-circulo) + 1.125rem);
	}

	.agn-cadena__logo {
		max-width: 68px;
	}
}

.agn-aportar {
	/* Figma: titulo a 70 del borde superior de la banda. */
	padding-block: clamp(2.5rem, 4.63vw, 4.375rem) clamp(2.5rem, 5.22vw, 4.9375rem);
}

.agn-aportar .agn-titulo-seccion {
	margin-bottom: clamp(1.5rem, 2.78vw, 2.625rem);
}

/* Subtitulo opcional bajo el titular: texto corrido, sin el peso del titulo. */
.agn-aportar__subtitulo {
	max-width: 900px;
	margin: calc(clamp(1.5rem, 2.78vw, 2.625rem) * -1 + .75rem) 0 clamp(1.5rem, 2.78vw, 2.625rem);
	/* Mismo cuerpo que las viñetas del diagrama. */
	font-size: var(--agn-fs-sm);
	line-height: 1.33;
	color: var(--agn-gris);
}

.agn-aportar__subtitulo p {
	margin: 0 0 .6em;
}

.agn-aportar__subtitulo p:last-child {
	margin-bottom: 0;
}



.agn-aportar__lienzo {
	position: relative;
}

.agn-aportar__diagrama {
	position: relative;
	width: min(100%, 812px);
	margin-inline: auto;
}

/* El centro y el ancho de cada icono vienen del Figma, en la plantilla. */
.agn-aportar__icono-diagrama {
	position: absolute;
	left: var(--agn-x);
	top: var(--agn-y);
	width: var(--agn-ancho);
	transform: translate(-50%, -50%);
}

.agn-aportar__icono-diagrama svg {
	width: 100%;
	height: auto;
}

.agn-aportar__etiqueta {
	position: absolute;
	left: var(--agn-x);
	top: var(--agn-y);
	display: flex;
	flex-direction: column;
	margin: 0;
	transform: translate(-50%, -50%);
	text-align: center;
	line-height: 1.24;
	color: var(--agn-negro);
	white-space: nowrap;
}

.agn-aportar__etiqueta span {
	font-weight: var(--agn-peso-regular);
}

.agn-aportar__etiqueta strong {
	font-style: italic;
	font-weight: var(--agn-peso-bold);
}

.agn-aportar__etiqueta--normal {
	font-size: clamp(.8125rem, .55rem + 1.17vw, 1.5625rem);
}

.agn-aportar__etiqueta--grande {
	font-size: clamp(1.125rem, .69rem + 1.93vw, 2.5rem);
	line-height: 1.31;
}

.agn-aportar__bloque {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	max-width: 400px;
}

.agn-aportar__icono {
	flex: 0 0 auto;
	width: 56px;
}

.agn-aportar__texto ul {
	margin: 0;
	padding-left: 1.2em;
	font-size: var(--agn-fs-sm);
	/* Figma: la lista va en cursiva regular y lo destacado en negrita. */
	font-style: italic;
	font-weight: var(--agn-peso-regular);
}

.agn-aportar__texto strong {
	font-weight: var(--agn-peso-bold);
}

/* Dentro de cada viñeta, lo marcado con <em> vuelve al peso normal. */
.agn-aportar__texto em {
	font-style: italic;
	font-weight: var(--agn-peso-regular);
}

.agn-aportar__texto li + li {
	margin-top: 1em;
}

@media (min-width: 1101px) {
	/*
	 * Todo el conjunto escala junto: el lienzo guarda la proporcion del
	 * Figma (1334x736) y tanto el diagrama como los textos se miden en
	 * porcentaje sobre el. Con el diagrama en px fijos, bajo 1512 el dibujo
	 * se comia el espacio de los textos y se montaban encima.
	 */
	.agn-aportar__lienzo {
		container-type: inline-size;
		/* Todo el conjunto escala desde aqui: achicarlo deja el titular por
		   encima de la barra flotante. */
		max-width: 1180px;
		margin-inline: auto;
		aspect-ratio: 1334 / 736;
		min-height: 0;
	}

	.agn-aportar__diagrama {
		container-type: inline-size;
		position: absolute;
		left: 17.54%;
		top: 0;
		width: 60.87%;
		margin: 0;
	}

	/* Las etiquetas se miden contra el diagrama; los textos, contra el lienzo. */
	.agn-aportar__etiqueta--normal {
		font-size: min(1.5625rem, 3.08cqw);
	}

	.agn-aportar__etiqueta--grande {
		font-size: min(2.625rem, 5.17cqw);
	}

	.agn-aportar__texto ul {
		font-size: min(1.125rem, 1.35cqw);
	}

	/* Posiciones tomadas del Figma, relativas a la caja de contenido. */
	.agn-aportar__bloque {
		position: absolute;
	}

	.agn-aportar__bloque--izquierda {
		left: -1.12%;
		top: 64.7%;
		width: 18.7%;
		max-width: 249px;
	}

	.agn-aportar__bloque--derecha-superior {
		left: 57.3%;
		top: 3.5%;
		width: 29.8%;
		max-width: 397px;
	}

	.agn-aportar__bloque--derecha-inferior {
		left: 78.6%;
		top: 56.4%;
		width: 23.2%;
		max-width: 309px;
	}
}

@media (max-width: 1100px) {
	.agn-aportar__lienzo {
		display: grid;
		gap: 2rem;
	}

	.agn-aportar__bloque {
		max-width: none;
	}
}

/* Figma movil: aqui no hay cadena. El circulo amarillo encabeza, centrado, y
   debajo van las tres etapas como filas sueltas: un circulo de color con el
   icono en blanco a la izquierda y, a la derecha, el titulo y sus vinetas.
   La imagen del diagrama se oculta; los circulos los dibuja el CSS porque los
   textos reales son mas largos que los de la maqueta y cada etapa necesita el
   alto que le pida su contenido. */
@media (max-width: 760px) {
	.agn-aportar__lienzo {
		/* Figma (lienzo 472): circulo de 56, texto desde 104 -> 19 de aire. */
		--agn-circulo: 56px;
		display: grid;
		grid-template-columns: var(--agn-circulo) minmax(0, 1fr);
		column-gap: 19px;
		row-gap: 0;
	}

	/* Los hijos del diagrama pasan a ser celdas del mismo lienzo. */
	.agn-aportar__diagrama {
		display: contents;
	}

	.agn-aportar__diagrama > img {
		display: none;
	}

	/* Circulo de color con el icono en blanco. Ocupa las dos filas de su
	   etapa y se apoya arriba, de modo que queda centrado contra el titulo y
	   las vinetas arrancan justo bajo su borde inferior, como en el Figma. */
	.agn-aportar__icono-diagrama {
		position: static;
		grid-column: 1;
		align-self: start;
		display: grid;
		place-items: center;
		width: var(--agn-circulo);
		height: var(--agn-circulo);
		border-radius: 50%;
		background: var(--agn-color);
		transform: none;
	}

	/* Cada icono trae su propia proporcion, asi que el Figma les da un tamano
	   distinto a cada uno dentro del circulo (medido sobre 56: candado 26 de
	   ancho, planta 45, enchufe 23). Por eso el ancho va icono por icono. */
	.agn-aportar__icono-diagrama svg {
		width: 46%;
		height: auto;
	}

	/* Los SVG vienen del Figma con el gris fijo; sobre el color van en blanco. */
	.agn-aportar__icono-diagrama svg path[fill="#404040"] {
		fill: #fff;
	}

	.agn-aportar__icono-diagrama:nth-of-type(1) {
		grid-row: 2 / 4;
		--agn-color: var(--agn-azul-claro);
	}

	.agn-aportar__icono-diagrama:nth-of-type(2) {
		grid-row: 4 / 6;
		--agn-color: var(--agn-verde);
	}

	.agn-aportar__icono-diagrama:nth-of-type(2) svg {
		width: 80%;
	}

	.agn-aportar__icono-diagrama:nth-of-type(3) {
		grid-row: 6 / 8;
		--agn-color: var(--agn-naranja);
	}

	.agn-aportar__icono-diagrama:nth-of-type(3) svg {
		width: 41%;
	}

	.agn-aportar__etiqueta {
		position: relative;
		/* Se anulan los desplazamientos del lienzo de escritorio. */
		left: auto;
		top: auto;
		transform: none;
		white-space: normal;
	}

	/* «Evolución Energética»: el circulo amarillo que encabeza la seccion,
	   centrado y plano, sin degradado ni cuello. Figma: 236 de 472. */
	.agn-aportar__etiqueta--grande {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: center;
		display: grid;
		place-content: center;
		width: min(236px, 58%);
		aspect-ratio: 1;
		margin: 0 0 29px;
		padding: 10%;
		border-radius: 50%;
		background: var(--agn-amarillo);
		font-size: min(1.5rem, 5.6vw);
		color: var(--agn-gris);
	}

	/* El titulo se centra en una caja del alto del circulo: asi los dos
	   quedan a la misma altura sin depender del cuerpo de la letra. */
	.agn-aportar__etiqueta--normal {
		grid-column: 2;
		display: flex;
		align-items: center;
		min-height: var(--agn-circulo);
		/* «Evolución Segura» en una linea, no apilado. */
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: .3em;
		margin: 0;
		font-size: min(1.0625rem, 4.1vw);
		text-align: left;
	}

	.agn-aportar__diagrama > p:nth-of-type(1) { grid-row: 2; }
	.agn-aportar__diagrama > p:nth-of-type(3) { grid-row: 4; }
	.agn-aportar__diagrama > p:nth-of-type(4) { grid-row: 6; }

	.agn-aportar__bloque {
		grid-column: 2;
		align-self: start;
		/* Aire entre una etapa y la siguiente (Figma: 30). Va al pie de las
		   vinetas y no sobre el titulo siguiente: asi baja la fila entera y el
		   circulo de color no se queda arriba, desalineado de su titulo. */
		margin-bottom: 30px;
	}

	.agn-aportar__bloque:last-child {
		margin-bottom: 0;
	}

	.agn-aportar__bloque--derecha-superior { grid-row: 3; }
	.agn-aportar__bloque--izquierda       { grid-row: 5; }
	.agn-aportar__bloque--derecha-inferior { grid-row: 7; }

	/* Viñetas compactas, como en la referencia. */
	.agn-aportar__texto ul {
		padding-left: 1.1em;
		font-size: .8125rem;
		line-height: 1.34;
	}

	.agn-aportar__texto li + li {
		margin-top: .18em;
	}
}

/* ---------------- Newsletter ---------------- */

.agn-newsletter {
	/* Figma: banda de 543; titulo a 43 del borde superior. */
	padding-block: clamp(2rem, 2.84vw, 2.6875rem) clamp(2.5rem, 5.42vw, 5.125rem);
	overflow: hidden;
}

/* Columna de texto alineada al contenedor; el carrusel sangra a la derecha. */
.agn-newsletter__panel {
	display: grid;
	grid-template-columns: var(--agn-gutter) minmax(0, 623px) minmax(0, 1fr);
	align-items: start;
}

/* Titular de la sección, a todo el ancho sobre las dos columnas. */
.agn-newsletter__seccion {
	margin: 0 0 clamp(1.5rem, 3.44vw, 52px);
}

.agn-newsletter__intro {
	grid-column: 2;
	/* Figma: la columna de texto empieza 50 más abajo que las fichas. */
	padding-top: clamp(0px, 3.31vw, 50px);
	padding-right: clamp(1.5rem, 3vw, 3rem);
}

.agn-newsletter__encabezado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.75rem, 1.85vw, 28px);
	margin-bottom: clamp(1.5rem, 2.78vw, 42px);
}

.agn-newsletter__encabezado .agn-titulo-seccion {
	margin: 0;
}

/* Figma: estos titulos son de 35/42, no del tamano general de seccion (45). */
.agn-newsletter__encabezado .agn-titulo-seccion,
.agn-linkedin__encabezado .agn-titulo-seccion,
.agn-estudios__intro .agn-titulo-seccion,
.agn-noticias-home__encabezado .agn-titulo-seccion {
	font-size: var(--agn-fs-xl);
	line-height: 1.2;
}

/* Figma: la etiqueta del boton ocupa 130 y se parte en dos lineas. */
.agn-newsletter__encabezado .agn-btn > span {
	max-width: 130px;
	line-height: 1.1;
	text-align: center;
}

.agn-newsletter__texto {
	max-width: 537px;
	font-size: var(--agn-fs-body);
	color: var(--agn-negro);
}

.agn-newsletter__carrusel {
	grid-column: 3;
	min-width: 0;
	/* Las fichas arrancan 20 mas abajo que el titulo en el Figma. */
	padding-top: clamp(0px, 1.32vw, 20px);
}

.agn-newsletter__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 322px;
	gap: 18px;
	padding-bottom: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.agn-newsletter__pista::-webkit-scrollbar {
	display: none;
}

.agn-newsletter__control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(1.25rem, 4.96vw, 4.6875rem);
}

.agn-newsletter__control .agn-flecha-carrusel--siguiente {
	margin-left: 1rem;
}

.agn-newsletter__control .agn-puntos {
	justify-content: flex-start;
}

.agn-flecha-carrusel {
	/* Sin encogerse: dentro de un flex apretado el SVG se aplastaba. */
	flex: 0 0 34px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 33px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--agn-gris);
	cursor: pointer;
	transition: transform var(--agn-transicion), opacity var(--agn-transicion);
}

.agn-flecha-carrusel:hover,
.agn-flecha-carrusel:focus-visible {
	transform: translateX(3px);
}

.agn-flecha-carrusel--anterior {
	transform: scaleX(-1);
}

.agn-flecha-carrusel--anterior:hover,
.agn-flecha-carrusel--anterior:focus-visible {
	transform: scaleX(-1) translateX(3px);
}

/* Se esconde conservando el espacio, para que los puntos no salten. */
.agn-flecha-carrusel.is-oculta {
	visibility: hidden;
	pointer-events: none;
}

.agn-flecha-carrusel svg {
	flex: none;
	width: 17px;
	height: 33px;
}

@media (max-width: 1100px) {
	.agn-newsletter__panel {
		grid-template-columns: var(--agn-gutter) minmax(0, 1fr) 0;
		row-gap: clamp(1.5rem, 3vw, 2.5rem);
	}

	.agn-newsletter__intro {
		padding-right: var(--agn-gutter);
	}

	.agn-newsletter__carrusel {
		grid-column: 2 / -1;
	}

	.agn-newsletter__control {
		padding-left: 0;
	}
}

/* ---------------- AGN en LinkedIn ---------------- */

/* Banda celeste a sangre completa: en el Figma no es una tarjeta inserta. */
.agn-linkedin {
	padding-block: clamp(2.5rem, 4.5vw, 4.25rem) clamp(2.5rem, 4.76vw, 4.5rem);
	background: var(--agn-azul-palido);
	overflow: hidden;
}

/* En LinkedIn el pie del hover es azul, no naranja. */
.agn-linkedin .agn-tarjeta:hover .agn-tarjeta__cuerpo,
.agn-linkedin .agn-tarjeta:focus-visible .agn-tarjeta__cuerpo {
	background: var(--agn-azul-claro);
}

.agn-linkedin__encabezado {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1rem, 3.04vw, 2.875rem);
	margin-bottom: clamp(1.75rem, 3.7vw, 3.5rem);
}

.agn-linkedin__encabezado .agn-titulo-seccion {
	margin: 0;
}

.agn-linkedin__encabezado .agn-btn {
	margin-top: -2px;
}

.agn-linkedin__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 322px;
	gap: 28px;
	padding-bottom: 6px;
	overflow-x: auto;
	/* El Figma usa una foto un poco mas baja en estas fichas. */
	--agn-tarjeta-medio: 322 / 233;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.agn-linkedin__pista::-webkit-scrollbar {
	display: none;
}

/* Control compartido por los carruseles de LinkedIn y Noticias. */
.agn-carrusel__control {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: center;
	margin-top: clamp(1rem, 2.18vw, 2.0625rem);
}

.agn-carrusel__control .agn-flecha-carrusel--siguiente {
	margin-left: 1rem;
}

/* Figma movil: el control va en una sola fila — flecha, puntos y flecha —
   ocupando el ancho. Sin esto los puntos de 50 mas las dos flechas no caben a
   440 y la flecha siguiente se cae a la linea de abajo. Vale para los tres
   carruseles de la portada: newsletter, LinkedIn y noticias. */
@media (max-width: 760px) {
	.agn-newsletter__control,
	.agn-carrusel__control {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: .75rem;
	}

	.agn-newsletter__control .agn-flecha-carrusel--siguiente,
	.agn-carrusel__control .agn-flecha-carrusel--siguiente {
		margin-left: 0;
	}

	.agn-newsletter__control .agn-puntos,
	.agn-carrusel__control .agn-puntos {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		justify-content: flex-start;
		min-width: 0;
		gap: .625rem;
	}

	/* Las pastillas se reparten el ancho disponible: cuantas mas haya, mas
	   cortas, pero la fila siempre queda llena de lado a lado. El reparto va en
	   el <li>, que es el elemento flexible de la lista. */
	.agn-newsletter__control .agn-puntos > li,
	.agn-carrusel__control .agn-puntos > li {
		flex: 1 1 0;
		min-width: 0;
	}

	.agn-newsletter__control .agn-punto,
	.agn-carrusel__control .agn-punto {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	/* En la maqueta las dos flechas se ven siempre, aunque no haya a donde ir. */
	.agn-newsletter__control .agn-flecha-carrusel.is-oculta,
	.agn-carrusel__control .agn-flecha-carrusel.is-oculta {
		visibility: visible;
	}
}

/* ---------------- Bloques sobre fotografía (Mesa, Podcast) ---------------- */

.agn-bloque-foto {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	color: var(--agn-blanco);
	isolation: isolate;
}

.agn-bloque-foto__accion {
	margin-top: clamp(1rem, 1.32vw, 1.25rem);
}

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

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

.agn-bloque-foto__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .1) 70%);
}

.agn-bloque-foto__panel {
	padding: clamp(1.5rem, 2.78vw, 2.625rem) clamp(1.5rem, 2.84vw, 2.6875rem)
		clamp(1.5rem, 1.92vw, 1.8125rem) clamp(1.5rem, 2.84vw, 2.6875rem);
}

.agn-bloque-foto__titulo {
	margin: 0 0 clamp(.5rem, .86vw, .8125rem);
	font-size: var(--agn-fs-xl);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-blanco);
}

/* Al revés que en los títulos de sección: aquí la base va en negrita y lo
   destacado en cursiva de peso normal. */
.agn-bloque-foto__titulo .agn-enfasis {
	font-weight: var(--agn-peso-regular);
}

.agn-bloque-foto__bajada {
	font-size: var(--agn-fs-body);
}

/* Mesa de Mujeres */

/* La banda mide 700 y el panel cierra a 47 del borde inferior. */
.agn-mesa {
	display: flex;
	align-items: flex-end;
	min-height: clamp(26rem, 46.3vw, 43.75rem);
	padding-block: calc(var(--agn-cabecera) + 2rem) clamp(1.5rem, 3.11vw, 2.9375rem);
}

.agn-mesa > .agn-contenedor {
	width: 100%;
}

.agn-mesa__panel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.25rem, 3.11vw, 2.9375rem);
	align-items: start;
	max-width: 834px;
	min-height: clamp(14rem, 19.58vw, 18.5rem);
}

.agn-mesa__logo {
	width: clamp(72px, 7.41vw, 112px);
	margin-top: clamp(0px, .33vw, 5px);
}

.agn-mesa__texto {
	max-width: 574px;
}


/* Podcast */

.agn-podcast {
	padding-block: clamp(1.5rem, 3.11vw, 2.9375rem);
}

.agn-podcast__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
	/* Figma: panel de 1420x477. */
	min-height: clamp(20rem, 31.55vw, 29.8125rem);
	padding-top: clamp(1.5rem, 4.23vw, 4rem);
}

.agn-podcast__texto {
	max-width: 769px;
}

/* "Escúchalo en:" y los iconos van en la misma linea. */
.agn-podcast__escuchar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.75rem, 1.46vw, 1.375rem);
	margin: clamp(1.25rem, 2.31vw, 2.1875rem) 0 0;
}

/* Figma: los iconos de plataforma van en blanco sobre la foto. */
.agn-podcast__plataformas svg [stroke] {
	stroke: var(--agn-blanco);
}

.agn-podcast__plataformas svg [fill]:not([fill="none"]) {
	fill: var(--agn-blanco);
}

.agn-podcast__escucha {
	margin: 0;
	font-size: var(--agn-fs-body);
	font-style: italic;
	font-weight: var(--agn-peso-bold);
}

.agn-podcast .agn-bloque-foto__accion {
	margin-top: clamp(1.5rem, 2.98vw, 2.8125rem);
}

.agn-podcast__portada {
	width: clamp(200px, 25.07vw, 379px);
	margin-top: clamp(0px, 2.05vw, 31px);
}

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

/* ---------------- Mesa y Podcast en movil ----------------
   Figma movil: la fotografia deja de ser fondo y pasa a ser una banda
   superior; el contenido baja a un panel solido de color agua, a sangre
   completa. El logotipo (y en el podcast tambien «Escuchalo en:») quedan
   sobre la fotografia. */
@media (max-width: 760px) {
	.agn-mesa,
	.agn-podcast {
		display: grid;
		align-items: stretch;
		min-height: 0;
		padding: 0;
	}

	.agn-mesa > .agn-contenedor,
	.agn-podcast > .agn-contenedor {
		grid-row: 2;
		width: 100%;
		/* El panel sangra de lado a lado; el aire lo pone el propio panel. */
		padding-inline: 0;
	}

	.agn-mesa .agn-bloque-foto__fondo,
	.agn-podcast .agn-bloque-foto__fondo {
		position: relative;
		inset: auto;
		z-index: 0;
		grid-row: 1;
		height: 202px;
	}

	/* El parallax ya queda fuera en movil para todas las fotografias, en
	   components.css. */

	/* En pantallas anchas (sobre 436) la banda si recorta en vertical: el
	   recorte arranca arriba, donde estan los rostros y los brazos, y lo que
	   se pierde es el pasto del pie. */
	.agn-mesa .agn-bloque-foto__fondo > img {
		object-position: 50% 0;
	}

	/* Panel solido: se anula el vidrio. */
	.agn-mesa__panel,
	.agn-podcast__panel {
		display: block;
		max-width: none;
		min-height: 0;
		padding: clamp(1.25rem, 5vw, 1.75rem) var(--agn-gutter) clamp(1.5rem, 6vw, 2rem);
		border: 0;
		border-radius: 0;
		background: var(--agn-agua);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}

	/* El logotipo de Mesa se apoya sobre la fotografia. Figma (banda de 202):
	   52 de ancho, el borde superior a 94 y el pie a unos 14 del canto de la
	   foto. Con 62 de ancho el lockup media 116 de alto y se salia por abajo,
	   que es lo que lo hacia ver corrido hacia el pie. */
	.agn-mesa__logo {
		position: absolute;
		left: var(--agn-gutter);
		top: 94px;
		width: 50px;
		margin: 0;
		z-index: 1;
	}

	/* En el podcast, el logotipo y las plataformas tambien van sobre la foto. */
	.agn-podcast__portada {
		position: absolute;
		left: var(--agn-gutter);
		top: 86px;
		width: 152px;
		max-width: none;
		margin: 0;
		z-index: 1;
	}

	.agn-podcast__escuchar {
		position: absolute;
		right: var(--agn-gutter);
		top: 92px;
		display: grid;
		justify-items: center;
		gap: .5rem;
		margin: 0;
		z-index: 1;
	}
}

/* ---------------- Alianzas ---------------- */

.agn-alianzas {
	padding-block: clamp(3rem, 8.73vw, 8.25rem);
}

.agn-alianzas__encabezado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	margin-bottom: clamp(1.5rem, 4.1vw, 3.875rem);
}

.agn-alianzas__encabezado .agn-titulo-seccion {
	margin: 0;
}

/* En la portada los logotipos son archivos sueltos, sin margen propio. */
.agn-alianzas__bloque {
	padding: clamp(.75rem, 1.65vw, 25px);
}

/* ---------------- Estudios e informes ---------------- */

.agn-estudios {
	position: relative;
	padding-block: clamp(2rem, 3.44vw, 3.25rem);
	color: var(--agn-blanco);
	isolation: isolate;
}

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

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

.agn-estudios__panel {
	display: grid;
	grid-template-columns: minmax(0, 643fr) minmax(0, 574fr);
	gap: clamp(1.5rem, 7.61vw, 7.1875rem);
	/* Figma: panel de 1420x865, con 31 arriba y abajo y 43 a los lados. */
	min-height: clamp(30rem, 57.21vw, 54.0625rem);
	padding: clamp(1.25rem, 2.05vw, 1.9375rem) clamp(1.25rem, 2.84vw, 2.6875rem);
}

.agn-estudios__intro {
	padding-top: clamp(1rem, 2.98vw, 2.8125rem);
}

.agn-estudios__intro .agn-titulo-seccion {
	margin-bottom: clamp(1.5rem, 2.98vw, 2.8125rem);
}

.agn-estudios__texto {
	max-width: 643px;
	margin-bottom: clamp(1.5rem, 3.77vw, 3.5625rem);
	font-size: var(--agn-fs-body);
}

.agn-estudios__lista {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-estudio {
	position: relative;
	display: flex;
	margin: 0;
	min-height: 261px;
	border-radius: var(--agn-r-md);
	background: var(--agn-blanco);
	color: var(--agn-negro);
	overflow: hidden;
	transition: background var(--agn-transicion), color var(--agn-transicion);
}

/* La ficha abierta destapa su fotografía; sin fotografía propia se vuelve
   transparente y deja ver la del fondo de la sección. */
.agn-estudio.is-activo {
	background: transparent;
	color: var(--agn-blanco);
}

.agn-estudio__medio {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--agn-transicion);
}

.agn-estudio.is-activo .agn-estudio__medio {
	opacity: 1;
}

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

.agn-estudio__medio::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
}

.agn-estudio__cuerpo {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	/* Figma: 32 arriba, 31 a los lados y 20 abajo dentro de una ficha de 261. */
	padding: clamp(1rem, 2.12vw, 2rem) clamp(1rem, 2.05vw, 1.9375rem)
		clamp(.75rem, 1.32vw, 1.25rem);
}

.agn-estudio.is-activo .agn-estudio__descarga {
	background: var(--agn-verde);
}

.agn-estudio__titulo {
	margin: 0;
	max-width: 517px;
	font-size: var(--agn-fs-body);
	font-weight: var(--agn-peso-bold);
	line-height: 1.2;
}

.agn-estudio__meta {
	margin: 0;
	font-size: var(--agn-fs-xs);
}

.agn-estudio .agn-btn {
	margin-top: auto;
}

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

/* La flecha del carrusel de estudios solo existe en movil. */
.agn-estudios__flecha {
	display: none;
}

/* Figma movil: las fichas se muestran de a una completa y se pasa con la
   flecha de la derecha o deslizando. */
@media (max-width: 760px) {
	.agn-estudios__carrusel {
		position: relative;
	}

	.agn-estudios__lista {
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		/* La pista termina antes del carril de la flecha, asi la ficha
		   siguiente queda fuera del area visible y no asoma. */
		margin-right: 38px;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.agn-estudios__lista::-webkit-scrollbar {
		display: none;
	}

	.agn-estudio {
		scroll-snap-align: start;
	}

	.agn-estudios__flecha {
		position: absolute;
		right: 0;
		top: 50%;
		display: grid;
		color: var(--agn-blanco);
		transform: translateY(-50%);
	}

	.agn-estudios__flecha.is-oculta {
		visibility: hidden;
	}
}

/* ---------------- Noticias ---------------- */

/* Banda amarilla a sangre completa, como en el Figma. */
.agn-noticias-home {
	padding-block: clamp(3rem, 6.55vw, 6.1875rem) clamp(1.25rem, 1.79vw, 1.6875rem);
	background: var(--agn-amarillo);
	overflow: hidden;
}

/* Figma: sobre la banda amarilla las fichas no llevan fondo propio; el pie
   solo se pinta (de naranja) al pasar el cursor. */
/* Figma: sin sombra y el pie en #404040 al 10% sobre la banda amarilla. */
.agn-noticias-home .agn-tarjeta {
	background: transparent;
	box-shadow: none;
}

.agn-noticias-home .agn-tarjeta:hover,
.agn-noticias-home .agn-tarjeta:focus-visible {
	box-shadow: none;
}

.agn-noticias-home .agn-tarjeta__cuerpo {
	background: var(--agn-velo-suave);
}

.agn-noticias-home__panel {
	display: grid;
	/* La columna de texto mide 451 en el Figma y las fichas arrancan en 600. */
	grid-template-columns: minmax(0, 451px) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.97vw, 60px);
}

/* Figma: titular, botón debajo y recién entonces el texto. */
.agn-noticias-home__encabezado {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1rem, 1.46vw, 22px);
	margin-bottom: clamp(1.5rem, 2.78vw, 42px);
}

.agn-noticias-home__encabezado .agn-titulo-seccion {
	margin: 0;
}

.agn-noticias-home__encabezado .agn-btn {
	margin-top: 3px;
}

.agn-noticias-home__texto {
	max-width: 501px;
	margin-bottom: 0;
	font-size: var(--agn-fs-body);
}

.agn-noticias-home__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 322px;
	gap: 25px;
	align-content: start;
	padding-bottom: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.agn-noticias-home__pista::-webkit-scrollbar {
	display: none;
}

/* La primera ficha lleva la flecha arriba a la derecha. */
.agn-filtro__icono {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-left: .75rem;
	border-radius: 50%;
	background: var(--agn-gris);
	color: var(--agn-blanco);
}

.agn-filtro__icono svg {
	width: 14px;
	height: 14px;
}

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

/* ---------------- Secciones genéricas ---------------- */

.agn-seccion-generica {
	padding-block: clamp(6rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem);
}

/* ---------------- Carruseles de la portada en escritorio ---------------- */

/*
 * En escritorio las fichas de LinkedIn se muestran en una fila de cuatro que
 * ocupa todo el ancho: ninguna queda cortada y no parece un carrusel. Bajo
 * 1025 vuelve el deslizador con todas las fichas.
 */
@media (min-width: 1025px) {
	.agn-linkedin__pista {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
		padding-bottom: 0;
	}

	.agn-linkedin__pista > :nth-child(n + 5) {
		display: none;
	}

	.agn-linkedin .agn-carrusel__control {
		display: none;
	}
}