/* Secciones editoriales (campo flexible). */

.agn-seccion {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.agn-seccion--blanco  { background: var(--agn-blanco); }
.agn-seccion--gris    { background: #f7f7f7; }
.agn-seccion--azul    { background: var(--agn-azul-palido); }
.agn-seccion--oscuro  { background: var(--agn-gris); color: var(--agn-blanco); }
.agn-seccion--verde   { background: var(--agn-verde-palido); }

.agn-seccion--oscuro .agn-titulo-seccion,
.agn-seccion--oscuro .agn-prosa {
	color: var(--agn-blanco);
}

/* Bloques de texto corrido: el Figma deja 101 arriba, 87 bajo el titular y
   56 entre bloques seguidos. */
.agn-seccion--texto {
	padding-block: clamp(2rem, 6.68vw, 101px) 0;
}

.agn-seccion--texto + .agn-seccion--texto {
	padding-top: clamp(1.5rem, 3.7vw, 56px);
}

.agn-seccion--texto .agn-titulo-seccion {
	margin-bottom: clamp(1.5rem, 5.75vw, 87px);
}

.agn-seccion--texto:last-child {
	padding-block: clamp(2rem, 8.4vw, 127px) clamp(2.5rem, 14.62vw, 221px);
}

/* Prosa */

.agn-prosa {
	font-size: var(--agn-fs-body);
	color: var(--agn-gris);
}

.agn-prosa > * + * {
	margin-top: 1.25em;
}

.agn-prosa h2 { font-size: var(--agn-fs-xl); }
.agn-prosa h3 { font-size: var(--agn-fs-lg); }

/* Figma: los enlaces del cuerpo van en naranja y negrita. */
.agn-prosa a {
	color: var(--agn-naranja);
	font-weight: var(--agn-peso-bold);
	text-decoration: underline;
}

.agn-prosa a:hover,
.agn-prosa a:focus-visible {
	color: var(--agn-naranja);
	opacity: .75;
}

.agn-prosa img {
	border-radius: var(--agn-r-md);
}

.agn-prosa li::marker {
	color: var(--agn-verde);
}

/* Texto + imagen */

.agn-seccion__rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
}

.agn-seccion--invertida .agn-seccion__medio {
	order: 2;
}

.agn-seccion__medio img {
	width: 100%;
	border-radius: var(--agn-r-md);
}

.agn-seccion__intro {
	max-width: 70ch;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.agn-figura {
	margin: 0;
	text-align: center;
}

.agn-figura figcaption {
	margin-top: 1rem;
	font-size: var(--agn-fs-mini);
	color: var(--agn-gris);
}

/* Atributos en burbuja */

.agn-atributos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.5rem, 3.5vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-atributo {
	margin: 0;
	text-align: center;
}

.agn-atributo__burbuja {
	display: grid;
	place-items: center;
	width: clamp(140px, 13vw, 200px);
	height: clamp(140px, 13vw, 200px);
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: var(--agn-burbuja, var(--agn-verde));
}

.agn-atributo__burbuja img {
	max-width: 44%;
	height: auto;
}

.agn-atributo__titulo {
	margin: 0 0 .5rem;
	font-size: var(--agn-fs-md);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-gris);
}

.agn-atributo__texto {
	margin: 0;
	font-size: var(--agn-fs-sm);
	color: var(--agn-gris);
}

/* Línea de tiempo.
   Figma: año grande desde 199, punto de 60 centrado en 584 y contenido en 691. */

.agn-seccion--linea {
	padding-top: 0;
	padding-bottom: clamp(2rem, 8.73vw, 132px);
}

.agn-seccion--linea .agn-titulo-seccion {
	margin: 0 0 clamp(2rem, 6.15vw, 93px);
}

.agn-linea {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;

	/* Geometría del eje: punto de 60 centrado en 495 y año desde 48. */
	--agn-hito-punto: clamp(20px, 3.97vw, 60px);
	--agn-hito-punto-x: clamp(14px, 30.75vw, 465px);
	--agn-hito-anio-top: clamp(0px, 3.17vw, 48px);
	--agn-hito-anio-fs: clamp(2.75rem, 6.61vw, 100px);
	/* Centro óptico del año: la mitad de su caja de línea (1.3). */
	--agn-hito-anio-centro: calc(var(--agn-hito-anio-top) + var(--agn-hito-anio-fs) * .65);
	--agn-hito-salto: clamp(1.5rem, 6.61vw, 100px);
}

.agn-hito {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 465fr) minmax(0, 732fr);
	gap: clamp(1rem, 9.06vw, 137px);
	margin: 0;
}

.agn-hito + .agn-hito {
	margin-top: var(--agn-hito-salto);
}

/* Tramo de eje: del centro de un punto al centro del siguiente, de modo que
   la línea no sobresalga ni arriba del primero ni abajo del último. */
.agn-hito:not(:last-child)::before {
	content: '';
	position: absolute;
	z-index: 0;
	top: var(--agn-hito-anio-centro);
	left: calc(var(--agn-hito-punto-x) + var(--agn-hito-punto) / 2 - 1px);
	width: 2px;
	height: calc(100% + var(--agn-hito-salto));
	background: var(--agn-gris);
}

/* Punto gris de 60 centrado en el año. */
.agn-hito::after {
	content: '';
	position: absolute;
	z-index: 1;
	left: var(--agn-hito-punto-x);
	top: var(--agn-hito-anio-centro);
	width: var(--agn-hito-punto);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #d9d9d9;
	transform: translateY(-50%);
}

.agn-hito__anio {
	display: block;
	padding: var(--agn-hito-anio-top) 0 0 clamp(0px, 7.28vw, 110px);
	font-size: var(--agn-hito-anio-fs);
	font-weight: var(--agn-peso-bold);
	line-height: 1.3;
	color: var(--agn-hito-color, var(--agn-azul));
}

.agn-hito__cuerpo {
	padding-top: 0;
}

.agn-hito__bajada {
	margin: 0 0 clamp(.25rem, .46vw, 7px);
	font-size: var(--agn-fs-boton);
	font-weight: var(--agn-peso-bold);
	text-transform: uppercase;
	color: #d9d9d9;
}

.agn-hito__titulo {
	max-width: 640px;
	margin: 0 0 clamp(.75rem, 1.59vw, 24px);
	font-size: clamp(1.5rem, 2.65vw, 40px);
	font-weight: var(--agn-peso-bold);
	line-height: 1.22;
	color: var(--agn-gris);
}

.agn-hito__texto {
	max-width: 520px;
	font-size: var(--agn-fs-body);
	line-height: 1.22;
}

.agn-hito__texto p {
	margin: 0;
}

@media (max-width: 860px) {
	.agn-hito::before,
	.agn-hito::after {
		display: none;
	}

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

	.agn-hito__anio {
		padding: 0;
	}

	.agn-hito__cuerpo {
		padding-top: 0;
	}
}

/* Pasos (etapas del GNL).
   Figma: fotografía de 664x400, texto desde 823 y separador de 6. */

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

.agn-pasos {
	display: block;
	margin: clamp(2rem, 5.89vw, 89px) 0 0;
	padding: 0;
	list-style: none;
}

.agn-paso {
	display: grid;
	/* Figma nuevo: fotografía de 500 y texto de 761 desde 662. */
	grid-template-columns: minmax(0, 500fr) minmax(0, 761fr);
	gap: clamp(1rem, 4.83vw, 73px);
	align-items: start;
	margin: 0;
	padding: 0 0 clamp(1rem, 2.78vw, 42px);
	/* Figma: 2px. */
	border-bottom: 2px solid #e5e5e5;
	border-radius: 0;
	background: none;
}

.agn-paso + .agn-paso {
	margin-top: clamp(1rem, 2.78vw, 42px);
}

.agn-paso:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.agn-paso__medio {
	display: block;
	aspect-ratio: 500 / 300;
	border-radius: var(--agn-r-xs);
	overflow: hidden;
	background: var(--agn-gris-claro);
}

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

/* El titular arranca 58 bajo el borde superior de la fotografía. */
.agn-paso__cuerpo {
	padding-top: clamp(.75rem, 3.84vw, 58px);
}

.agn-paso__titulo {
	margin: 0 0 clamp(.75rem, 1.72vw, 26px);
	font-size: var(--agn-fs-xl);
	font-weight: var(--agn-peso-bold);
	line-height: 1.22;
	color: var(--agn-gris);
}

.agn-paso__texto {
	font-size: var(--agn-fs-body);
	line-height: 1.22;
}

.agn-paso__texto p {
	margin: 0 0 .75em;
}

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

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

	.agn-paso__cuerpo {
		padding-top: 0;
	}
}

/* Personas dentro de secciones */

.agn-personas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agn-personas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agn-personas--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.agn-personas--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1000px) {
	.agn-personas--4,
	.agn-personas--5,
	.agn-personas--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

	.agn-seccion--invertida .agn-seccion__medio {
		order: 0;
	}

	.agn-paso {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.agn-paso__medio {
		grid-column: 1 / -1;
	}

	.agn-personas--3,
	.agn-personas--4,
	.agn-personas--5,
	.agn-personas--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Burbujas ---------------- */

/* Figma: lienzo de 1334x765; círculo sólido de 358 y tres de 490. */
/* Figma: los círculos arrancan 54 bajo la cabecera y cierran 72 antes. */
.agn-seccion--burbujas {
	padding-block: clamp(1.5rem, 3.57vw, 54px) clamp(2rem, 4.76vw, 72px);
}

.agn-burbujas {
	position: relative;
	/* Figma nuevo: tres círculos de 470 sobre un lienzo de 1334x538. */
	aspect-ratio: 1334 / 538;
}

.agn-burbuja {
	position: absolute;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 35.23%;
	aspect-ratio: 1;
	border-radius: 50%;
	/* Figma: degradado naranja a blanco al 50% de opacidad. Al ser
	   semitransparente, los solapes entre circulos quedan a la vista. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 470'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='437.709' y1='470' x2='32.291' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.716346' stop-color='%23f2a558'/%3E%3Cstop offset='.923077' stop-color='white'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='235' cy='235' r='235' fill='url(%23g)' fill-opacity='.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	text-align: center;
}

/* 1: «natural», al medio y más arriba. 2 y 3: a los lados, 68 más abajo. */
.agn-burbuja--1 { left: 32.38%; top: 0;      padding-top: 4.95%; }
.agn-burbuja--2 { left: 0;      top: 12.64%; padding-top: 5.02%; }
.agn-burbuja--3 { left: 64.77%; top: 12.64%; padding-top: 5.02%; }

.agn-burbuja__rotulo {
	width: 52.34%;
	margin: 0;
	font-size: min(2.5rem, 8.51cqw);
	font-weight: var(--agn-peso-bold);
	line-height: 1.2;
	color: var(--agn-gris);
}

.agn-burbuja__texto {
	margin: 0;
	font-size: min(1.125rem, 3.83cqw);
	line-height: 1.22;
	color: var(--agn-gris);
}

.agn-burbuja--1 .agn-burbuja__texto { width: 79.57%; margin-top: 2.02%; }
.agn-burbuja--2 .agn-burbuja__texto { width: 69.15%; margin-top: 1.05%; }
.agn-burbuja--3 .agn-burbuja__texto { width: 80.43%; margin-top: 1.05%; }

@media (max-width: 860px) {
	.agn-burbujas {
		display: grid;
		gap: 1.5rem;
		aspect-ratio: auto;
	}

	.agn-burbuja {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		padding: clamp(1.5rem, 6vw, 2.5rem);
		border-radius: var(--agn-r-md);
		/* Apiladas ya no se solapan: color plano en vez del circulo con degradado. */
		background: #f8d2ab;
	}

	.agn-burbuja__rotulo,
	.agn-burbuja__texto {
		width: 100%;
	}

	.agn-burbuja__rotulo { font-size: var(--agn-fs-xl); }
	.agn-burbuja__texto  { font-size: var(--agn-fs-body); margin-top: .75rem; }
}

/* ---------------- Acordeón ---------------- */

/* Figma: tarjeta de 1334 con pestaña de 274x102 y separador desde 363. */
.agn-seccion--acordeon {
	padding-top: clamp(1rem, 2.84vw, 43px);
	padding-bottom: clamp(2.5rem, 7.61vw, 115px);
}

/* En "¿Qué es el Gas Natural?" el acordeón sigue a las burbujas sin aire. */
.agn-seccion--burbujas + .agn-seccion--acordeon {
	padding-top: 0;
}

.agn-acordeon {
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-acordeon__item {
	margin: 0;
}

.agn-acordeon__item + .agn-acordeon__item {
	margin-top: clamp(1rem, 2.12vw, 32px);
}

.agn-seccion--acordeon-num .agn-acordeon__item + .agn-acordeon__item {
	margin-top: clamp(1rem, 2.45vw, 37px);
}

.agn-acordeon__caja {
	border-radius: var(--agn-r-md);
	background: #f7f7f7;
	box-shadow: var(--agn-sombra-ficha);
	overflow: hidden;
}

.agn-acordeon__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: clamp(64px, 6.75vw, 102px);
	padding-right: clamp(1rem, 1.92vw, 29px);
	list-style: none;
	cursor: pointer;
}

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

/* Pestaña naranja de 274x102 con el rótulo a 33. */
.agn-acordeon__rotulo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: clamp(150px, 18.12vw, 274px);
	min-height: clamp(64px, 6.75vw, 102px);
	padding-inline: clamp(1rem, 2.98vw, 45px);
	border-radius: var(--agn-r-md) var(--agn-r-md) var(--agn-r-md) 0;
	background: var(--agn-naranja);
	/* Figma: 33 en #404040; se usa la escala de 30. */
	font-size: var(--agn-fs-lg);
	font-style: italic;
	font-weight: var(--agn-peso-semi);
	color: var(--agn-gris);
}

/* Figma: círculo blanco macizo de 50, sin borde. */
.agn-acordeon__flecha {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp(34px, 3.31vw, 50px);
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: var(--agn-blanco);
	transition: transform var(--agn-transicion);
}

.agn-acordeon__flecha svg {
	width: 52%;
	height: auto;
}

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

/* El separador nace a la derecha de la pestaña. */
.agn-acordeon__cuerpo {
	position: relative;
	/* El texto empieza a 61 del borde de la tarjeta. */
	padding: clamp(1.5rem, 3.31vw, 50px) clamp(1rem, 5.29vw, 80px)
		clamp(1.5rem, 2.71vw, 41px) clamp(1rem, 4.03vw, 61px);
	font-size: var(--agn-fs-body);
	line-height: 1.22;
	color: var(--agn-gris);
}

/* El separador nace a la derecha de la pestaña; va en un pseudo-elemento para
   que el cuerpo pueda ocupar todo el ancho y la animación no recorte el texto. */
.agn-acordeon__cuerpo::before {
	content: '';
	position: absolute;
	top: 0;
	left: clamp(150px, 18.12vw, 274px);
	right: 0;
	border-top: 1px solid #d9d9d9;
}

.agn-acordeon__cuerpo > * {
	margin: 0 0 .75em;
}

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

@media (max-width: 760px) {
	.agn-acordeon__cuerpo {
		padding-inline: clamp(1rem, 5vw, 2rem);
	}

	.agn-acordeon__cuerpo::before {
		left: 0;
	}
}

/* ---------------- Título con panel ---------------- */

/* Figma: rótulo a la izquierda y panel de 919 desde 504. */
.agn-seccion--panel {
	position: relative;
	padding-block: clamp(1.5rem, 5.89vw, 89px);
	isolation: isolate;
}

.agn-seccion--panel-foto {
	display: grid;
	align-items: center;
	min-height: calc(100vw * var(--agn-seccion-alto, .31));
	padding-block: clamp(1.5rem, 3.31vw, 50px);
	color: var(--agn-blanco);
	overflow: hidden;
}

.agn-seccion__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--agn-gris);
}

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

/* Figma: degradado negro de .1 arriba a .5 abajo sobre la fotografía. */
.agn-seccion__fondo--oscuro::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .55) 100%);
}

.agn-seccion--panel + .agn-seccion--pasos,
.agn-seccion--banda-icono + .agn-seccion--pasos {
	padding-block: 0;
}

.agn-seccion--panel + .agn-seccion--pasos .agn-pasos,
.agn-seccion--banda-icono + .agn-seccion--pasos .agn-pasos {
	margin-top: 0;
}

.agn-seccion--panel .agn-seccion__interior {
	display: grid;
	grid-template-columns: minmax(0, 1fr)
		minmax(0, min(var(--agn-panel-ancho, 919px), var(--agn-panel-ancho-pc, 68.891%)));
	gap: 0;
	align-items: start;
}

.agn-seccion__rotulo {
	align-self: start;
	max-width: 340px;
	margin: clamp(.25rem, 1.99vw, 30px) 0 0;
	/* Figma: 40 en regular, no 55 en light. */
	font-size: var(--agn-fs-xxl);
	font-weight: var(--agn-peso-regular);
	line-height: 1.11;
	color: inherit;
}

.agn-seccion__rotulo .agn-enfasis {
	font-weight: var(--agn-peso-bold);
}

.agn-seccion__panel {
	padding: clamp(1rem, 2.25vw, 34px) clamp(1rem, 1.26vw, 19px)
		clamp(1rem, 2.25vw, 34px) clamp(1.25rem, 2.38vw, 36px);
	border-radius: var(--agn-r-sm);
	background: #f7f7f7;
}

.agn-seccion--panel-foto .agn-seccion__rotulo {
	margin-top: clamp(1rem, 4.63vw, 70px);
}

.agn-seccion--panel-foto .agn-seccion__panel {
	padding: clamp(1rem, 2.65vw, 40px) clamp(1.25rem, 4.3vw, 65px)
		clamp(1rem, 2.65vw, 40px) clamp(1.25rem, 4.5vw, 68px);
	/* Figma: radio 20, igual que el resto de los paneles de vidrio. */
	border-radius: var(--agn-r-lg);
	background: var(--agn-vidrio);
}

.agn-seccion__panel .agn-prosa {
	font-size: var(--agn-fs-body);
	line-height: 1.22;
	color: inherit;
}

.agn-seccion__panel .agn-prosa p {
	margin: 0 0 1em;
}

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

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

	.agn-seccion__rotulo {
		margin-top: 0;
		max-width: none;
	}
}

/* Lista numerada dentro del panel (Propuesta de valor). */
.agn-seccion__panel .agn-prosa ol {
	counter-reset: agn-punto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-seccion__panel .agn-prosa ol li {
	position: relative;
	margin: 0;
	padding-left: clamp(2.5rem, 4.17vw, 63px);
	font-size: var(--agn-fs-body);
	line-height: 1.22;
}

.agn-seccion__panel .agn-prosa ol li + li {
	margin-top: clamp(.75rem, 1.26vw, 19px);
}

.agn-seccion__panel .agn-prosa ol li::before {
	counter-increment: agn-punto;
	content: counter(agn-punto);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: clamp(28px, 2.51vw, 38px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--agn-verde);
	color: var(--agn-gris);
	font-size: var(--agn-fs-sm);
	font-weight: var(--agn-peso-bold);
	line-height: 1;
}

/* ---------------- Rueda de valores ---------------- */

/* Figma: lienzo de 1390x699 con la imagen de 968 y ocho rótulos alrededor. */
.agn-seccion--valores {
	padding-block: clamp(2rem, 5.76vw, 87px) clamp(2rem, 5.36vw, 81px);
}

.agn-valores {
	position: relative;
	container-type: inline-size;
	width: calc(100% + clamp(0px, 3.7vw, 56px));
	margin-left: calc(-1 * clamp(0px, 3.7vw, 56px));
	aspect-ratio: 1390 / 699;
}

.agn-valores__figura {
	position: absolute;
	left: 17.70%;
	top: 0;
	width: 69.64%;
}

.agn-valores__figura img {
	display: block;
	width: 100%;
	height: auto;
}

.agn-valores__nodo {
	position: absolute;
	display: grid;
	place-items: center;
	width: 4.24%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--agn-blanco);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.agn-valores__nodo svg {
	width: 55%;
	height: auto;
}

/* Centros del Figma sobre el lienzo de 1390x699, con el circulo de 59. */
.agn-valores__nodo--1 { left: 39.21%; top:  3.29%; }
.agn-valores__nodo--2 { left: 23.35%; top: 16.02%; }
.agn-valores__nodo--3 { left: 19.50%; top: 48.78%; }
.agn-valores__nodo--4 { left: 27.01%; top: 73.68%; }
.agn-valores__nodo--5 { left: 43.45%; top: 78.68%; }
.agn-valores__nodo--6 { left: 65.32%; top: 80.97%; }
.agn-valores__nodo--7 { left: 80.65%; top: 65.95%; }
.agn-valores__nodo--8 { left: 81.22%; top: 22.17%; }

/* Los tres de la derecha apuntan hacia fuera. */
.agn-valores__nodo--6 svg,
.agn-valores__nodo--7 svg,
.agn-valores__nodo--8 svg {
	transform: scaleX(-1);
}

/* Figma: «Valores Éticos» centrado en 556/279 y «Valores de Acción» en 934. */
.agn-valores__centro {
	position: absolute;
	top: 39.91%;
	margin: 0;
	font-size: min(2.5rem, 2.878cqw);
	font-weight: var(--agn-peso-light);
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	color: var(--agn-gris);
	transform: translateX(-50%);
}

.agn-valores__centro .agn-enfasis {
	display: block;
	font-style: italic;
	font-weight: var(--agn-peso-bold);
}

.agn-valores__centro--izquierda { left: 40.00%; }
.agn-valores__centro--derecha   { left: 67.16%; }

.agn-valores__rotulo {
	position: absolute;
	margin: 0;
	font-size: min(1.875rem, 2.16cqw);
	font-weight: var(--agn-peso-bold);
	line-height: 1.22;
	color: var(--agn-gris);
}

.agn-valores__rotulo--1,
.agn-valores__rotulo--2,
.agn-valores__rotulo--3,
.agn-valores__rotulo--4,
.agn-valores__rotulo--5 {
	text-align: right;
}

.agn-valores__rotulo--1 { left: 5.04%;  top: 2.72%;  width: 30.94%; }
.agn-valores__rotulo--2 { left: 0;      top: 26.61%; width: 22.16%; }
.agn-valores__rotulo--3 { left: 3.96%;  top: 63.81%; width: 17.84%; }
.agn-valores__rotulo--4 { left: 13.38%; top: 88.98%; width: 21.73%; }
.agn-valores__rotulo--5 { left: 37.41%; top: 92.85%; width: 16.40%; }
.agn-valores__rotulo--6 { left: 62.37%; top: 92.85%; width: 12.66%; }
.agn-valores__rotulo--7 { left: 87.99%; top: 67.38%; width: 16.98%; }
.agn-valores__rotulo--8 { left: 78.56%; top: 9.87%;  width: 19.57%; }

@media (max-width: 900px) {
	.agn-valores {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
		margin-left: 0;
		aspect-ratio: auto;
	}

	.agn-valores__figura,
	.agn-valores__centro,
	.agn-valores__rotulo {
		position: static;
		width: 100%;
		text-align: left;
		white-space: normal;
		transform: none;
	}

	.agn-valores__centro {
		font-size: var(--agn-fs-lg);
	}

	.agn-valores__centro .agn-enfasis {
		display: inline;
	}

	.agn-valores__nodo {
		display: none;
	}

	.agn-valores__rotulo {
		font-size: var(--agn-fs-lg);
	}
}

/* ---------------- Banda con pestaña vertical ---------------- */

/* Figma: tarjeta de 1334x360 con pestaña verde de 130 y texto desde 291. */
.agn-seccion--banda {
	padding-block: 0 clamp(2rem, 11.31vw, 171px);
}

.agn-banda {
	display: grid;
	grid-template-columns: clamp(64px, 8.6vw, 130px) minmax(0, 1fr);
	min-height: clamp(14rem, 23.81vw, 360px);
	border-radius: var(--agn-r-md);
	background: #f7f7f7;
	box-shadow: var(--agn-sombra-ficha);
	overflow: hidden;
}

.agn-banda__pestana {
	display: grid;
	place-items: center;
	margin: 0;
	background: var(--agn-verde);
}

/* Solo el span directo: .agn-enfasis es otro span y la rotacion se aplicaba
   dos veces, dejando "fundamentales" al reves. */
.agn-banda__pestana > span {
	display: block;
	font-size: var(--agn-fs-md);
	line-height: 1.22;
	color: var(--agn-gris);
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* Figma: "Objetivos" y "fundamentales" van en dos lineas. Solo display, sin
   transform: el giro ya lo pone el span contenedor. */
.agn-banda__pestana > span > .agn-enfasis {
	display: block;
}

.agn-banda__cuerpo {
	padding: clamp(1.5rem, 3.37vw, 51px) clamp(1.25rem, 5.42vw, 82px)
		clamp(1.5rem, 3.37vw, 51px) clamp(1.25rem, 4.76vw, 72px);
	font-size: var(--agn-fs-body);
	line-height: 1.22;
}

.agn-banda__cuerpo p {
	margin: 0 0 clamp(1rem, 1.79vw, 27px);
}

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

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

	.agn-banda__pestana > span {
		writing-mode: horizontal-tb;
		transform: none;
		padding-block: .75rem;
	}
}

/* ---------------- Acordeón numerado (Grupos de trabajo) ---------------- */

/* Figma: pestaña de 130x102 verde y el título al lado, en 251. */
.agn-seccion--acordeon-num .agn-acordeon__rotulo--numero {
	min-width: clamp(64px, 8.6vw, 130px);
	justify-content: center;
	padding-inline: 0;
	background: var(--agn-verde);
	font-style: normal;
	/* Figma: 40. */
	font-size: var(--agn-fs-xxl);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-gris);
}

.agn-seccion--acordeon-num .agn-acordeon__titulo {
	flex: 1;
	padding-left: clamp(1rem, 2.12vw, 32px);
	font-size: var(--agn-fs-lg);
	color: var(--agn-gris);
}

.agn-seccion--acordeon-num .agn-acordeon__titulo .agn-enfasis {
	font-style: italic;
	font-weight: var(--agn-peso-bold);
}

.agn-seccion--acordeon-num .agn-acordeon__cuerpo::before {
	left: clamp(64px, 7.41vw, 112px);
}

@media (max-width: 760px) {
	.agn-seccion--acordeon-num .agn-acordeon__cuerpo::before {
		left: 0;
	}
}

/* ---------------- Comité en dos fichas horizontales ---------------- */

.agn-seccion--personas {
	padding-block: 0 clamp(1.5rem, 5.76vw, 87px);
}

.agn-seccion--personas .agn-titulo-seccion {
	margin: 0 0 clamp(1.5rem, 3.31vw, 50px);
}

.agn-seccion--personas .agn-personas {
	padding: clamp(1.5rem, 3.7vw, 56px) clamp(1.25rem, 3.31vw, 50px)
		clamp(1.5rem, 5.16vw, 78px);
	border-radius: var(--agn-r-md);
	background: #f7f7f7;
	box-shadow: var(--agn-sombra);
}

/* Figma: el nombre arriba en regular y los apellidos abajo en negrita. */
.agn-seccion--personas .agn-persona__nombre .agn-enfasis {
	display: block;
}

.agn-seccion--personas .agn-personas--comite {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4.89vw, 74px);
	padding: clamp(1.5rem, 5.56vw, 84px) clamp(1rem, 4.76vw, 72px)
		clamp(1.5rem, 5.36vw, 81px);
}

.agn-personas--comite .agn-persona {
	display: grid;
	grid-template-columns: clamp(96px, 12.9vw, 195px) minmax(0, 1fr);
	gap: clamp(1rem, 1.46vw, 22px);
	align-items: start;
}

.agn-personas--comite .agn-persona__datos {
	padding-top: clamp(1rem, 2.58vw, 39px);
}

.agn-personas--comite .agn-persona__nombre {
	margin-bottom: clamp(.5rem, .79vw, 12px);
	font-size: var(--agn-fs-body);
	line-height: 1.25;
}

.agn-personas--comite .agn-persona__cargo {
	font-size: var(--agn-fs-sm);
	line-height: 1.35;
}

.agn-seccion--personas .agn-personas:not(.agn-personas--comite) {
	gap: clamp(1.25rem, 2.65vw, 40px) clamp(.5rem, .79vw, 12px);
	justify-items: center;
}

.agn-seccion--personas .agn-personas:not(.agn-personas--comite) .agn-persona {
	max-width: 197px;
	text-align: center;
}

.agn-seccion--personas .agn-personas:not(.agn-personas--comite) .agn-persona__foto {
	width: clamp(84px, 10.12vw, 153px);
	margin: 0 auto clamp(.5rem, 1.12vw, 17px);
}

.agn-seccion--personas .agn-personas:not(.agn-personas--comite) .agn-persona__nombre {
	margin-bottom: 6px;
	/* Figma: 20. */
	font-size: var(--agn-fs-body);
	line-height: 1.25;
}

.agn-seccion--personas .agn-personas:not(.agn-personas--comite) .agn-persona__empresa {
	/* Figma: 15. */
	font-size: var(--agn-fs-xs);
	line-height: 1.25;
}

@media (max-width: 1000px) {
	.agn-personas--5,
	.agn-personas--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.agn-seccion--personas .agn-personas--comite {
		grid-template-columns: minmax(0, 1fr);
	}

	.agn-personas--3,
	.agn-personas--4,
	.agn-personas--5,
	.agn-personas--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* Figma: cuatro bloques de 277x178 separados por una línea vertical. */
.agn-seccion--logos {
	padding-block: 0 clamp(2.5rem, 12.43vw, 188px);
}

/* Los titulares de personas y grupos van en cursiva fina con la segunda
   parte en negrita recta, como el Figma. */
.agn-seccion--personas .agn-titulo-seccion,
.agn-seccion--acordeon .agn-titulo-seccion {
	font-style: italic;
	font-weight: var(--agn-peso-light);
}

.agn-seccion--personas .agn-titulo-seccion .agn-enfasis,
.agn-seccion--acordeon .agn-titulo-seccion .agn-enfasis {
	font-style: normal;
}

.agn-seccion--acordeon .agn-titulo-seccion {
	margin: 0 0 clamp(1.5rem, 3.71vw, 56px);
}

/* Párrafo de entrada en los bloques de texto con imagen. */
.agn-prosa .agn-lead {
	font-size: clamp(1.5rem, 2.65vw, 40px);
	font-weight: var(--agn-peso-regular);
	line-height: 1.22;
}

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

/* Bloque de texto con el logotipo al costado (¿Quiénes somos?). */
.agn-seccion--texto-imagen {
	padding-block: 0 clamp(2rem, 9.52vw, 144px);
}

.agn-seccion--texto-imagen .agn-seccion__rejilla {
	grid-template-columns: minmax(0, 320fr) minmax(0, 978fr);
	gap: clamp(1.5rem, 2.51vw, 38px);
	align-items: start;
}

.agn-seccion--texto-imagen .agn-seccion__medio {
	display: grid;
	place-items: center;
}

.agn-seccion--texto-imagen .agn-seccion__medio img {
	width: auto;
	max-width: clamp(110px, 11.64vw, 176px);
	border-radius: 0;
}

.agn-seccion--texto-imagen .agn-prosa p {
	margin: 0 0 clamp(1rem, 1.85vw, 28px);
	font-size: var(--agn-fs-sm);
	line-height: 1.35;
}

.agn-seccion--texto-imagen .agn-prosa p:last-child {
	margin-bottom: 0;
}

.agn-seccion--texto-imagen .agn-prosa p.agn-lead {
	margin-bottom: clamp(1rem, 1.85vw, 28px);
	font-size: clamp(1.5rem, 2.65vw, 40px);
	line-height: 1.22;
}

@media (max-width: 760px) {
	.agn-seccion--texto-imagen .agn-seccion__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------- Columnas con icono ----------------
   Figma: icono de 113, título a 27 de él, texto 51 más abajo y columnas
   de 628 con 78 de separación. */
.agn-seccion--columnas {
	padding-block: clamp(2rem, 3.64vw, 55px);
}

.agn-columnas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.5rem, 5.16vw, 78px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-columna {
	margin: 0;
}

.agn-columna__cabeza {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.79vw, 27px);
	margin-bottom: clamp(1rem, 3.37vw, 51px);
}

.agn-columna__icono {
	flex: 0 0 auto;
	display: block;
	width: clamp(64px, 7.47vw, 113px);
}

.agn-columna__icono img {
	display: block;
	width: 100%;
	height: auto;
}

.agn-columna__titulo {
	margin: 0;
	/* Figma: 40. */
	font-size: var(--agn-fs-xxl);
	font-weight: var(--agn-peso-bold);
	line-height: 1.2;
	color: var(--agn-gris);
}

.agn-columna__texto {
	font-size: var(--agn-fs-sm);
}

.agn-columna__texto ul {
	margin: 0;
	padding-left: 1.1em;
}

.agn-columna__texto li + li {
	margin-top: .5em;
}

/* Flecha de la banda con foto: círculo de 50 a 89 del borde derecho. */
.agn-seccion__ir {
	position: absolute;
	top: clamp(1rem, 4.17vw, 63px);
	right: clamp(1rem, 6.75vw, 102px);
	z-index: 2;
	display: grid;
	width: clamp(36px, 3.31vw, 50px);
	height: clamp(36px, 3.31vw, 50px);
	transition: transform var(--agn-transicion);
}

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

.agn-seccion__ir:hover,
.agn-seccion__ir:focus-visible {
	transform: scale(1.08);
}

/* Sin enlace la flecha pliega y despliega lo que viene debajo de la banda.
   El JS le quita el atributo hidden; sin JS no aparece y todo queda visible. */
.agn-seccion__ir--plegar {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
}

.agn-seccion__ir--plegar[aria-expanded="false"] svg {
	transform: rotate(180deg);
}

.agn-seccion__ir--plegar svg {
	transition: transform var(--agn-transicion);
}

/* Bloque plegable que el JS arma con las secciones que siguen a la banda. */
.agn-plegable[hidden] {
	display: block;
	height: 0;
	overflow: hidden;
}

/* ---------------- Banda naranja con ícono ---------------- */

/* Figma: tarjeta de 1334x253, círculo blanco de 192 a 79 y texto a 371. */
.agn-seccion--banda-icono {
	padding-block: clamp(1.5rem, 3.31vw, 50px);
}

.agn-banda-icono {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 6.61vw, 100px);
	padding: clamp(1.25rem, 2.02vw, 30px) clamp(1.25rem, 5.23vw, 79px);
	border-radius: var(--agn-r-md);
	background: var(--agn-naranja);
	box-shadow: var(--agn-sombra);
	color: var(--agn-blanco);
}

.agn-banda-icono__icono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp(84px, 12.7vw, 192px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--agn-blanco);
}

.agn-banda-icono__icono img,
.agn-banda-icono__icono svg {
	width: 62.5%;
	height: auto;
}

.agn-banda-icono__texto {
	margin: 0;
	/* El Figma usa 40; se baja un escalón de la escala. */
	font-size: var(--agn-fs-xl);
	font-weight: var(--agn-peso-regular);
	line-height: 1.22;
}

.agn-banda-icono__texto .agn-enfasis {
	font-style: italic;
	font-weight: var(--agn-peso-bold);
}

@media (max-width: 760px) {
	.agn-banda-icono {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
}

/* Botón opcional de cada paso (la agenda de la Mesa). */
.agn-paso__boton {
	margin-top: clamp(.75rem, 1.19vw, 18px);
}