/* Mesa de Mujeres con Energía AGN.
   Figma (lienzo 1512): logotipo de 153x285 en 89/355, diagrama de 880x677 en
   273/764 con cinco objetivos alrededor, banda del dato en 1542 (1334x292),
   actividades de 634x400 y panel de integrantes de 1334x1257 en 4190. */

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

.agn-hero-pagina--mesa .agn-hero-pagina__logo {
	max-width: clamp(6rem, 10.12vw, 153px);
	margin: 0;
}

/* ---------------- Diagrama de objetivos ---------------- */

/* El lienzo va de 26 a 1423 (1397x685) y sangra 63 a la izquierda. */
.agn-objetivos {
	padding-block: clamp(1.5rem, 2.91vw, 44px) clamp(2rem, 6.15vw, 93px);
}

.agn-objetivos__lienzo {
	position: relative;
	container-type: inline-size;
	width: calc(100% + clamp(0px, 4.17vw, 63px));
	margin-left: calc(-1 * clamp(0px, 4.17vw, 63px));
	aspect-ratio: 1397 / 685;
}

.agn-objetivos__figura {
	position: absolute;
	left: 17.68%;
	top: 0;
	width: 62.99%;
}

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

/* Círculos blancos con la flecha, sobre los brazos del diagrama. */
.agn-objetivos__nodo {
	position: absolute;
	display: grid;
	place-items: center;
	width: 4.29%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--agn-blanco);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

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

/* Medidos sobre el propio diagrama: cada flecha va en el centro de su lóbulo. */
.agn-objetivos__nodo--1 { left: 31.71%; top: 5.70%; }
.agn-objetivos__nodo--2 { left: 20.47%; top: 43.21%; }
.agn-objetivos__nodo--3 { left: 26.41%; top: 84.23%; }
.agn-objetivos__nodo--4 { left: 73.52%; top: 32.85%; }
.agn-objetivos__nodo--5 { left: 70.08%; top: 82.49%; }

/* Los dos últimos apuntan hacia la derecha. */
.agn-objetivos__nodo--4 svg,
.agn-objetivos__nodo--5 svg {
	transform: scaleX(-1);
}

.agn-objetivos__bloque {
	position: absolute;
}

/* Figma: el logotipo blanco de 153x285 en el centro de la molécula. */
.agn-objetivos__centro {
	position: absolute;
	display: block;
	left: 49.82%;
	top: 54.16%;
	width: 10.95%;
	margin: 0;
	transform: translate(-50%, -50%);
}

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

.agn-objetivos__centro--texto {
	width: 26.27%;
	font-size: min(1.75rem, 2cqw);
	line-height: 1.22;
	text-align: center;
	color: var(--agn-blanco);
}

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

.agn-objetivos__bloque--1,
.agn-objetivos__bloque--2,
.agn-objetivos__bloque--3 {
	text-align: right;
}

/* Cada rótulo queda centrado sobre su lóbulo, a 3.9 del borde del círculo. */
.agn-objetivos__bloque--1,
.agn-objetivos__bloque--2,
.agn-objetivos__bloque--3,
.agn-objetivos__bloque--4,
.agn-objetivos__bloque--5 {
	transform: translateY(-50%);
}

.agn-objetivos__bloque--1 { left: 0; top: 10.07%; width: 24.96%; }
.agn-objetivos__bloque--2 { left: 0; top: 47.59%; width: 13.72%; }
.agn-objetivos__bloque--3 { left: 0; top: 88.61%; width: 19.66%; }
.agn-objetivos__bloque--4 { left: 84.54%; top: 37.23%; right: 0; }
.agn-objetivos__bloque--5 { left: 79.20%; top: 86.86%; right: 0; }

/* Botón de 219x62 justo bajo el último objetivo. */
.agn-objetivos__boton {
	min-width: min(219px, 15.68cqw);
	min-height: min(62px, 4.44cqw);
	margin-top: min(11px, .79cqw);
	padding: .35em 1.1em;
	font-size: min(1.25rem, 1.43cqw);
}

.agn-objetivos__boton span {
	text-decoration: underline;
	text-underline-offset: .25em;
}

.agn-objetivos__boton .agn-btn__icono {
	width: min(28px, 2.01cqw);
	height: min(28px, 2.01cqw);
}

/* Bajo 900 el diagrama se apila: imagen arriba y objetivos en lista. */
@media (max-width: 900px) {
	.agn-objetivos__lienzo {
		width: 100%;
		margin-left: 0;
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.agn-objetivos__figura,
	.agn-objetivos__centro,
	.agn-objetivos__bloque {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		transform: none;
		text-align: left;
	}

	.agn-objetivos__centro {
		width: 120px;
	}

	.agn-objetivos__nodo {
		display: none;
	}

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

	.agn-objetivos__centro {
		font-size: var(--agn-fs-body);
		text-align: left;
		color: var(--agn-gris);
	}

	.agn-objetivos__boton {
		min-width: 219px;
		min-height: 62px;
		margin-top: 1rem;
		font-size: var(--agn-fs-boton);
	}

	.agn-objetivos__boton .agn-btn__icono {
		width: 28px;
		height: 28px;
	}
}

/* ---------------- Dato destacado ---------------- */

.agn-dato-mesa {
	padding-bottom: clamp(2.5rem, 7.28vw, 110px);
}

/* Caja de 1334x292 con círculo de 192. */
.agn-dato-mesa__caja {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.25rem, 5.36vw, 81px);
	min-height: clamp(12rem, 19.31vw, 292px);
	padding: clamp(1.5rem, 3.31vw, 50px) clamp(1.25rem, 4.63vw, 70px)
		clamp(1.5rem, 3.31vw, 50px) clamp(1.25rem, 7.61vw, 115px);
	border-radius: var(--agn-r-md);
	background: var(--agn-agua);
}

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

.agn-dato-mesa__icono img {
	width: 70%;
	height: auto;
}

.agn-dato-mesa__cuerpo {
	max-width: 727px;
	margin: clamp(0px, .26vw, 4px) 0 0;
}

.agn-dato-mesa__texto {
	margin: 0;
	font-size: var(--agn-fs-xxl);
	font-weight: var(--agn-peso-regular);
	line-height: 1.22;
	color: var(--agn-blanco);
}

.agn-dato-mesa__texto .agn-enfasis {
	font-weight: var(--agn-peso-bold);
	font-style: normal;
}

/* Figma: la fuente va en cursiva de 18 al 40% de blanco. */
.agn-dato-mesa__fuente {
	margin: clamp(.5rem, 1.32vw, 20px) 0 0;
	font-size: var(--agn-fs-sm);
	font-style: italic;
	line-height: 1.22;
	color: rgba(255, 255, 255, .4);
}

@media (max-width: 760px) {
	.agn-dato-mesa__caja {
		flex-direction: column;
		align-items: flex-start;
		padding-inline: clamp(1.25rem, 5vw, 2rem);
	}
}

/* ---------------- Actividades ---------------- */

.agn-actividades {
	padding-bottom: clamp(3rem, 10.38vw, 157px);
}

.agn-actividades .agn-titulo-seccion {
	margin: 0 0 clamp(1.5rem, 4.7vw, 71px);
}

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

/* Figma nuevo: fotografía de 500x300 y texto de 751 desde 672. */
.agn-actividad {
	display: grid;
	grid-template-columns: minmax(0, 500fr) minmax(0, 751fr);
	gap: clamp(1.25rem, 5.49vw, 83px);
	align-items: start;
	margin: 0;
	padding-bottom: clamp(1.25rem, 2.45vw, 37px);
	border-bottom: 2px solid #e5e5e5;
}

.agn-actividad + .agn-actividad {
	margin-top: clamp(1rem, 1.26vw, 19px);
}

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

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

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

/* El titular arranca 11 bajo el borde superior de la fotografía. */
.agn-actividad__cuerpo {
	padding-top: clamp(.5rem, .73vw, 11px);
}

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

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

.agn-actividad__texto p {
	margin: 0;
}

.agn-actividad__boton {
	margin-top: clamp(1rem, 2.45vw, 37px);
}

/* ---------------- Integrantes ---------------- */

.agn-integrantes {
	padding-bottom: clamp(3rem, 8.99vw, 136px);
}

.agn-integrantes .agn-titulo-seccion {
	/* En el Figma "Integrantes" va en cursiva fina y el resto en negrita recta. */
	margin: 0 0 clamp(2rem, 4.1vw, 62px);
	max-width: 736px;
	font-style: italic;
	font-weight: var(--agn-peso-light);
}

.agn-integrantes .agn-enfasis {
	font-style: normal;
}

/* Panel de 1334x1257 en gris muy claro. */
.agn-integrantes__panel {
	padding: clamp(2rem, 4.96vw, 75px) clamp(1.25rem, 3.31vw, 50px)
		clamp(2.5rem, 6.88vw, 104px);
	border-radius: var(--agn-r-md);
	background: #f7f7f7;
}

/* Comité: dos fichas horizontales con retrato de 197. */
.agn-personas--comite {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4.89vw, 74px);
	padding-inline: clamp(0px, 1.98vw, 30px);
	margin-bottom: clamp(2.5rem, 6.61vw, 100px);
}

.agn-personas--comite .agn-persona {
	display: grid;
	grid-template-columns: clamp(96px, 13.03vw, 197px) minmax(0, 1fr);
	gap: clamp(1rem, 1.39vw, 21px);
	align-items: start;
}

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

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

/* Directorio: cinco columnas con retrato de 156 centrado. */
.agn-personas--directorio {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1.5rem, 4.63vw, 70px) clamp(.5rem, .79vw, 12px);
	justify-items: center;
}

.agn-personas--directorio .agn-persona {
	max-width: 197px;
	text-align: center;
}

.agn-personas--directorio .agn-persona__foto {
	width: clamp(84px, 10.32vw, 156px);
	margin: 0 auto clamp(.5rem, .99vw, 15px);
}

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

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

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

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

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

	.agn-personas--comite {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 0;
	}

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

/* Figma: en los integrantes el nombre va arriba y el apellido debajo. */
.agn-integrantes .agn-persona__nombre .agn-enfasis {
	display: block;
}