/* Nuestros socios. */

/* La fotografia se recorta manteniendo su proporcion: nunca se deforma. En
   escritorio la banda y la foto tienen casi la misma proporcion (2,10), asi
   que practicamente no se recorta. Anclada arriba para no cortar los cascos
   si la banda quedara mas alta que la foto. */
.agn-hero-pagina--socios .agn-hero-pagina__fondo img {
	object-position: 50% 5%;
}

/* En movil la banda es mucho mas alta que ancha, asi que lo que se recorta
   son los costados: la foto va centrada en los dos ejes. */
@media (max-width: 760px) {
	.agn-hero-pagina--socios .agn-hero-pagina__fondo img {
		object-position: 50% 50%;
	}
}

/* Figma: la ayuda cae en 769 y el selector en 833. */
.agn-socios {
	padding-block: clamp(2rem, 3.24vw, 3.0625rem) clamp(3rem, 6vw, 5.5rem);
}

.agn-socios__ayuda {
	margin: 0 0 clamp(1.5rem, 2.12vw, 2rem);
	font-size: var(--agn-fs-body);
	color: var(--agn-gris);
}

/* Nueve círculos de 128 con paso de 151, alineados a la izquierda y en una
   sola fila: si falta ancho se encogen en vez de saltar de línea. */
.agn-socios__selector {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(.5rem, 1.45vw, 22px);
	margin: 0 0 clamp(2rem, 4.37vw, 4.125rem);
	padding: 0;
	list-style: none;
}

.agn-socios__selector li {
	flex: 0 1 clamp(72px, 8.47vw, 128px);
	min-width: 0;
	margin: 0;
}

.agn-socios__logo {
	display: grid;
	place-items: center;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	padding: 16%;
	border: 0;
	border-radius: 50%;
	background: var(--agn-gris-claro);
	cursor: pointer;
	filter: grayscale(1);
	opacity: .75;
	transition: filter var(--agn-transicion), opacity var(--agn-transicion), background var(--agn-transicion);
}

.agn-socios__logo:hover,
.agn-socios__logo:focus-visible,
.agn-socios__logo.is-activo {
	background: var(--agn-blanco);
	box-shadow: var(--agn-sombra);
	filter: none;
	opacity: 1;
}

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

.agn-socios__logo span {
	font-size: .7rem;
	font-weight: var(--agn-peso-semi);
	line-height: 1.1;
	text-align: center;
	color: var(--agn-gris);
}

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

/* El mapa va a la derecha, en una columna de 226. */
.agn-socio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(70px, 7.47vw, 113px);
	gap: clamp(1.5rem, 10.78vw, 163px);
	align-items: start;
}

.agn-socio__mapa {
	order: 2;
}

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

.agn-socio__mapa {
	position: relative;
}

.agn-socio__marca {
	position: absolute;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 3px solid var(--agn-blanco);
	border-radius: 50%;
	background: var(--agn-naranja);
	box-shadow: 0 0 0 4px rgba(242, 165, 88, .35);
}

.agn-socio__titulo {
	max-width: 762px;
	margin: 0 0 clamp(1rem, 1.39vw, 21px);
	padding-left: clamp(0px, 1.06vw, 16px);
	font-size: var(--agn-fs-display);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-gris);
}

.agn-socio__texto {
	max-width: 983px;
	padding-left: clamp(0px, 1.06vw, 16px);
	font-size: var(--agn-fs-body);
	color: var(--agn-gris);
}

.agn-socio__datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.98vw, 2.8125rem);
	max-width: 1044px;
	margin: clamp(2rem, 4.17vw, 3.9375rem) 0 0;
	padding: 0;
	list-style: none;
}

.agn-dato {
	display: flex;
	/* El texto va centrado a la altura del icono, no pegado arriba. */
	align-items: center;
	gap: clamp(1rem, 2.31vw, 35px);
	margin: 0;
}

.agn-dato__icono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp(80px, 8.6vw, 130px);
	height: clamp(80px, 8.6vw, 130px);
	border-radius: 50%;
	/* Figma: verde agua, no azul. */
	background: #70a9a7;
}

.agn-dato__icono img {
	max-width: 68%;
	max-height: 60%;
	width: auto;
	height: auto;
}

.agn-dato__titulo {
	margin: 0 0 .35rem;
	font-size: var(--agn-fs-body);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-gris);
}

.agn-dato__titulo:empty {
	display: none;
}

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

/* En estos datos lo destacado va en negrita recta, no en cursiva. */
.agn-dato__texto .agn-enfasis {
	font-style: normal;
}

/* "Más información en: ..." */
.agn-socio__sitio {
	margin: clamp(2rem, 4.7vw, 71px) 0 0;
	font-size: var(--agn-fs-body);
	color: var(--agn-gris);
}

/* Figma: el enlace va en agua, negrita cursiva y subrayado. */
.agn-socio__sitio a {
	font-style: italic;
	font-weight: var(--agn-peso-bold);
	text-decoration: underline;
	color: var(--agn-agua);
}

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

@media (max-width: 860px) {
	.agn-socios__selector {
		flex-wrap: wrap;
	}

	.agn-socios__selector li {
		flex: 0 0 auto;
		width: clamp(72px, 19vw, 110px);
	}

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

	.agn-socio__mapa {
		order: 0;
		max-width: 113px;
	}

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

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

	.agn-socio__mapa {
		max-width: 260px;
	}

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

/* ---------------- Entrada del switcher ---------------- */

@keyframes agn-socio-entra {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.agn-socio.is-entrando .agn-socio__mapa,
.agn-socio.is-entrando .agn-socio__titulo,
.agn-socio.is-entrando .agn-socio__texto,
.agn-socio.is-entrando .agn-socio__datos > li,
.agn-socio.is-entrando .agn-socio__sitio {
	animation: agn-socio-entra .5s cubic-bezier(.4, 0, .2, 1) both;
}

.agn-socio.is-entrando .agn-socio__mapa { animation-delay: 0s; }
.agn-socio.is-entrando .agn-socio__titulo { animation-delay: .07s; }
.agn-socio.is-entrando .agn-socio__texto { animation-delay: .14s; }
.agn-socio.is-entrando .agn-socio__datos > li:nth-child(1) { animation-delay: .21s; }
.agn-socio.is-entrando .agn-socio__datos > li:nth-child(2) { animation-delay: .27s; }
.agn-socio.is-entrando .agn-socio__datos > li:nth-child(3) { animation-delay: .33s; }
.agn-socio.is-entrando .agn-socio__datos > li:nth-child(4) { animation-delay: .39s; }
.agn-socio.is-entrando .agn-socio__datos > li:nth-child(n + 5) { animation-delay: .45s; }
.agn-socio.is-entrando .agn-socio__sitio { animation-delay: .5s; }

/* El círculo elegido también acusa recibo del cambio. */
.agn-socios__logo.is-activo {
	animation: agn-socio-marca .45s cubic-bezier(.34, 1.4, .64, 1);
}

@keyframes agn-socio-marca {
	from { transform: scale(.88); }
	to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.agn-socio.is-entrando .agn-socio__mapa,
	.agn-socio.is-entrando .agn-socio__titulo,
	.agn-socio.is-entrando .agn-socio__texto,
	.agn-socio.is-entrando .agn-socio__datos > li,
	.agn-socio.is-entrando .agn-socio__sitio,
	.agn-socios__logo.is-activo {
		animation: none;
	}
}

/* Los iconos del Figma vienen como SVG con fill="currentColor": el blanco lo
   pone esta regla y el círculo verde agua, .agn-dato__icono. */
.agn-dato__icono--svg {
	color: var(--agn-blanco);
}

.agn-dato__icono--svg svg {
	display: block;
	width: 52%;
	height: auto;
}

/* ---------------- Mapa acostado en móvil ----------------
   Figma móvil: el mapa de Chile va girado, con el norte a la izquierda, en una
   banda de ancho completo sobre el texto. La proporción es la del archivo
   (260x1386); si algún socio sube otro mapa, basta cambiar la variable. */
@media (max-width: 760px) {
	.agn-socio__mapa {
		--agn-mapa-proporcion: .1876;
		position: relative;
		container-type: inline-size;
		width: 100%;
		max-width: none;
		height: calc(100cqw * var(--agn-mapa-proporcion));
		margin-bottom: clamp(1rem, 4vw, 1.5rem);
	}

	.agn-socio__mapa img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		height: 100cqw;
		transform: translate(-50%, -50%) rotate(-90deg);
	}
}