/* Componentes reutilizables del sistema AGN. */

/* ---------- Botón pastilla ---------- */

.agn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 62px;
	/* Figma: 24 a la izquierda, 22 a la derecha y el icono de 28. */
	padding: .5rem 22px .5rem 24px;
	border: 0;
	border-radius: var(--agn-r-pill);
	box-shadow: var(--agn-sombra);
	color: var(--agn-btn-texto, var(--agn-gris));
	font-size: var(--agn-fs-boton);
	font-weight: var(--agn-peso-semi);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--agn-transicion), filter var(--agn-transicion);
}

.agn-btn:hover,
.agn-btn:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.05);
	/* El color se repite aqui para ganarle a la regla general de a:hover. */
	color: var(--agn-btn-texto, var(--agn-gris));
}

.agn-btn__icono {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
}

/* Botón pequeño del formulario de contacto: 148x40 en el Figma. */
.agn-btn--mini {
	min-width: 148px;
	min-height: 40px;
	gap: 16px;
	padding: 4px 11px 4px 22px;
	font-size: var(--agn-fs-boton);
}

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

/* El color de la etiqueta viaja en una variable para que tambien valga en hover. */
.agn-btn--verde   { background: var(--agn-verde);      --agn-btn-texto: var(--agn-gris);   }
.agn-btn--azul    { background: var(--agn-azul);       --agn-btn-texto: var(--agn-blanco); }
.agn-btn--naranja { background: var(--agn-naranja);    --agn-btn-texto: var(--agn-gris);   }
.agn-btn--blanco  { background: var(--agn-blanco);     --agn-btn-texto: var(--agn-gris);   }
.agn-btn--gris    { background: #c2c1b8;               --agn-btn-texto: var(--agn-gris);   }
.agn-btn--acento  { background: var(--agn-acento);     --agn-btn-texto: var(--agn-acento-texto); }
.agn-btn--claro   { background: var(--agn-gris-claro); --agn-btn-texto: var(--agn-gris);   }
.agn-btn--agua    { background: var(--agn-agua);       --agn-btn-texto: var(--agn-blanco); }

/* Icono de descarga: círculo blanco de 40 con flecha hacia abajo. */
.agn-btn__icono--descarga {
	width: 40px;
	height: 40px;
}

.agn-btn:has(.agn-btn__icono--descarga) {
	padding-right: 19px;
}

/* ---------- Superficie de vidrio ---------- */

.agn-vidrio {
	background: var(--agn-vidrio);
	border: 1px solid var(--agn-vidrio-borde);
	border-radius: var(--agn-r-lg);
	backdrop-filter: blur(var(--agn-vidrio-desenfoque));
	-webkit-backdrop-filter: blur(var(--agn-vidrio-desenfoque));
}

.agn-vidrio--sm { border-radius: var(--agn-r-sm); }

/* ---------- Tarjeta de noticia ---------- */

.agn-tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--agn-r-md);
	overflow: hidden;
	box-shadow: var(--agn-sombra);
	background: var(--agn-blanco);
	text-decoration: none;
	transition: transform var(--agn-transicion), box-shadow var(--agn-transicion);
}

.agn-tarjeta:hover,
.agn-tarjeta:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
	color: inherit;
}

.agn-tarjeta__medio {
	position: relative;
	aspect-ratio: var(--agn-tarjeta-medio, 322 / 236);
	background: var(--agn-gris-claro);
	overflow: hidden;
}

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

.agn-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	flex: 1;
	min-height: 169px;
	padding: 1.75rem 1.5rem;
	background: var(--agn-velo-suave);
	transition: background var(--agn-transicion);
}

.agn-tarjeta__titulo {
	margin: 0;
	font-size: var(--agn-fs-body);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-negro);
	line-height: var(--agn-interlineado);
	transition: color var(--agn-transicion);
}

.agn-tarjeta__meta {
	margin-top: auto;
	font-size: var(--agn-fs-mini);
	color: var(--agn-gris);
	transition: color var(--agn-transicion);
}


/* Al pasar el cursor el pie se pinta de azul con el texto en blanco y asoma
   la flecha, como en la muestra del Figma. */
.agn-tarjeta:hover .agn-tarjeta__cuerpo,
.agn-tarjeta:focus-visible .agn-tarjeta__cuerpo {
	background: var(--agn-acento);
}

.agn-tarjeta:hover .agn-tarjeta__titulo,
.agn-tarjeta:focus-visible .agn-tarjeta__titulo,
.agn-tarjeta:hover .agn-tarjeta__meta,
.agn-tarjeta:focus-visible .agn-tarjeta__meta {
	color: var(--agn-acento-texto);
}

/* Figma: circulo de 28 a 16 del borde superior y 17 del derecho. */
.agn-tarjeta__marca {
	position: absolute;
	top: 16px;
	right: 17px;
	display: grid;
	width: 28px;
	height: 28px;
	opacity: 0;
	transition: opacity var(--agn-transicion);
}

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

.agn-tarjeta:hover .agn-tarjeta__marca,
.agn-tarjeta:focus-visible .agn-tarjeta__marca {
	opacity: 1;
}

/* Sin ratón no hay hover: la flecha se queda a la vista. */
@media (hover: none) {
	.agn-tarjeta__marca {
		opacity: 1;
	}
}

/* ---------- Tarjeta de newsletter ---------- */

.agn-newsletter-tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--agn-r-md);
	overflow: hidden;
	box-shadow: var(--agn-sombra);
	text-decoration: none;
	transition: transform var(--agn-transicion);
}

.agn-newsletter-tarjeta:hover,
.agn-newsletter-tarjeta:focus-visible {
	transform: translateY(-4px);
	color: inherit;
}

.agn-newsletter-tarjeta__top {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Figma: el titulo queda apoyado abajo, a 33 del borde inferior. */
	justify-content: flex-end;
	gap: 1rem;
	flex: 1;
	min-height: 192px;
	padding: 3.375rem 1.5rem 2.0625rem;
}

/* Figma: flecha de 23 px a 15 px del borde superior y 25 px del derecho. */
.agn-newsletter-tarjeta__marca {
	position: absolute;
	top: 15px;
	right: 25px;
	display: grid;
	width: 23px;
	height: 23px;
	transition: transform var(--agn-transicion), opacity var(--agn-transicion);
}

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

.agn-newsletter-tarjeta:hover .agn-newsletter-tarjeta__marca,
.agn-newsletter-tarjeta:focus-visible .agn-newsletter-tarjeta__marca {
	transform: scale(1.12);
}

.agn-newsletter-tarjeta__titulo {
	margin: 0;
	font-size: var(--agn-fs-body);
	font-weight: var(--agn-peso-bold);
	color: var(--agn-negro);
	line-height: 1.2;
}

.agn-newsletter-tarjeta__pie {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .75rem;
	min-height: 98px;
	padding: 1rem 1.5rem;
}

.agn-newsletter-tarjeta__numero {
	font-size: clamp(2rem, 2.98vw, 2.8125rem);
	font-weight: var(--agn-peso-semi);
	color: var(--agn-negro);
	line-height: 1;
}

/* Figma: el numero grande y, a su derecha, el mes sobre el ano en italica. */
.agn-newsletter-tarjeta__fecha {
	display: flex;
	flex-direction: column;
	font-style: italic;
	font-size: var(--agn-fs-mini);
	line-height: 1.15;
	color: var(--agn-negro);
}

.agn-newsletter-tarjeta__top,
.agn-newsletter-tarjeta__pie {
	transition: background var(--agn-transicion);
}

.agn-newsletter-tarjeta--azul    .agn-newsletter-tarjeta__top { background: var(--agn-azul-claro); }
.agn-newsletter-tarjeta--azul    .agn-newsletter-tarjeta__pie { background: var(--agn-azul-palido); }
.agn-newsletter-tarjeta--verde   .agn-newsletter-tarjeta__top { background: var(--agn-verde); }
.agn-newsletter-tarjeta--verde   .agn-newsletter-tarjeta__pie { background: var(--agn-verde-palido); }
.agn-newsletter-tarjeta--naranja .agn-newsletter-tarjeta__top { background: var(--agn-naranja); }
.agn-newsletter-tarjeta--naranja .agn-newsletter-tarjeta__pie { background: var(--agn-naranja-palido); }

/* ---------- Archivo del newsletter ---------- */

/* Figma: en el listado las tarjetas están en gris y sólo al pasar el cursor
   toman su color y aparece la flecha. */
.agn-archivo .agn-newsletter-tarjeta__top { background: #f5f5f5; }
.agn-archivo .agn-newsletter-tarjeta__pie { background: #c1c1c1; }

.agn-archivo .agn-newsletter-tarjeta__marca {
	opacity: 0;
}

.agn-archivo .agn-newsletter-tarjeta:hover .agn-newsletter-tarjeta__marca,
.agn-archivo .agn-newsletter-tarjeta:focus-visible .agn-newsletter-tarjeta__marca {
	opacity: 1;
}

.agn-archivo .agn-newsletter-tarjeta--azul:hover .agn-newsletter-tarjeta__top,
.agn-archivo .agn-newsletter-tarjeta--azul:focus-visible .agn-newsletter-tarjeta__top { background: var(--agn-azul-claro); }
.agn-archivo .agn-newsletter-tarjeta--azul:hover .agn-newsletter-tarjeta__pie,
.agn-archivo .agn-newsletter-tarjeta--azul:focus-visible .agn-newsletter-tarjeta__pie { background: var(--agn-azul-palido); }
.agn-archivo .agn-newsletter-tarjeta--verde:hover .agn-newsletter-tarjeta__top,
.agn-archivo .agn-newsletter-tarjeta--verde:focus-visible .agn-newsletter-tarjeta__top { background: var(--agn-verde); }
.agn-archivo .agn-newsletter-tarjeta--verde:hover .agn-newsletter-tarjeta__pie,
.agn-archivo .agn-newsletter-tarjeta--verde:focus-visible .agn-newsletter-tarjeta__pie { background: var(--agn-verde-palido); }
.agn-archivo .agn-newsletter-tarjeta--naranja:hover .agn-newsletter-tarjeta__top,
.agn-archivo .agn-newsletter-tarjeta--naranja:focus-visible .agn-newsletter-tarjeta__top { background: var(--agn-naranja); }
.agn-archivo .agn-newsletter-tarjeta--naranja:hover .agn-newsletter-tarjeta__pie,
.agn-archivo .agn-newsletter-tarjeta--naranja:focus-visible .agn-newsletter-tarjeta__pie { background: var(--agn-naranja-palido); }

/* ---------- Filtros tipo pastilla ---------- */

.agn-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-filtros li {
	margin: 0;
}

.agn-filtro {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: .35rem 1.75rem;
	border: 0;
	border-radius: var(--agn-r-pill);
	background: var(--agn-blanco);
	color: var(--agn-gris);
	font-size: var(--agn-fs-boton);
	font-weight: var(--agn-peso-semi);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--agn-transicion);
}

.agn-filtro:hover,
.agn-filtro:focus-visible {
	background: var(--agn-naranja-palido);
	color: var(--agn-gris);
}

.agn-filtro.is-activo,
.agn-filtro[aria-current="true"] {
	background: var(--agn-naranja);
}

/* ---------- Puntos de carrusel ---------- */

.agn-puntos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-punto {
	flex: 0 0 50px;
	width: 50px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--agn-velo-suave);
	cursor: pointer;
	transition: background var(--agn-transicion);
}

.agn-punto.is-activo,
.agn-punto[aria-current="true"] {
	background: rgba(64, 64, 64, .5);
}

/* ---------- Redes sociales ---------- */

.agn-rrss {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-rrss li {
	margin: 0;
}

.agn-rrss a {
	display: block;
	width: 33px;
	height: 33px;
	transition: transform var(--agn-transicion);
}

.agn-rrss a:hover,
.agn-rrss a:focus-visible {
	transform: scale(1.12);
}

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

/* ---------- Formulario de suscripción ---------- */

.agn-suscripcion__campo {
	display: flex;
	align-items: center;
	max-width: 583px;
	border: 1px solid var(--agn-blanco);
	border-radius: var(--agn-r-xl);
	background: var(--agn-vidrio-fuerte);
	overflow: hidden;
}

.agn-suscripcion__campo input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 63px;
	padding: 0 1.5rem;
	border: 0;
	background: transparent;
	color: var(--agn-blanco);
	font-size: var(--agn-fs-boton);
}

.agn-suscripcion__campo input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .85);
}

.agn-suscripcion__campo input[type="email"]:focus {
	outline: none;
}

.agn-suscripcion__campo button {
	height: 63px;
	min-width: 146px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 0 100px 100px 0;
	background: var(--agn-blanco);
	color: var(--agn-gris);
	font-size: var(--agn-fs-boton);
	font-weight: var(--agn-peso-bold);
	cursor: pointer;
	transition: background var(--agn-transicion);
}

.agn-suscripcion__campo button:hover,
.agn-suscripcion__campo button:focus-visible {
	background: var(--agn-verde);
}

/* ---------- Rejillas ---------- */

.agn-rejilla {
	display: grid;
	gap: clamp(1rem, 2.3vw, 2.1875rem);
}

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

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

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

@media (max-width: 640px) {
	.agn-rejilla--4,
	.agn-rejilla--3,
	.agn-rejilla--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fichas de persona ---------- */

.agn-personas {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-persona {
	margin: 0;
}

/* La foto se sube cuadrada: el circulo y el borde los pone el CSS, nunca la
   imagen, para que todas se vean iguales. */
.agn-persona__foto {
	aspect-ratio: 1;
	border: 1px solid #d9d9d9;
	border-radius: 50%;
	overflow: hidden;
	background: var(--agn-gris-claro);
}

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

.agn-persona__nombre {
	margin: 0;
	font-weight: var(--agn-peso-regular);
	text-transform: uppercase;
	color: var(--agn-gris);
}

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

.agn-persona__cargo,
.agn-persona__empresa {
	margin: 0;
	color: #8a8a8a;
}


/* ---------------- Parallax de las fotografías de fondo ----------------
   La clase agn-parallax la pone el <body> cuando está activado en
   Datos del Sitio. La foto se hace más alta que su caja para poder
   desplazarse sin dejar franjas, y el JS solo mueve --agn-parallax-y. */
.agn-parallax {
	--agn-parallax-mov: 45px;
}

.agn-parallax--suave  { --agn-parallax-mov: 26px; }
.agn-parallax--medio  { --agn-parallax-mov: 45px; }
.agn-parallax--fuerte { --agn-parallax-mov: 72px; }

.agn-parallax .agn-hero__fondo,
.agn-parallax .agn-hero-pagina__fondo,
.agn-parallax .agn-seccion__fondo,
.agn-parallax .agn-bloque-foto__fondo,
.agn-parallax .agn-estudios__fondo,
.agn-parallax .agn-pie__fondo {
	overflow: hidden;
}

.agn-parallax .agn-hero__fondo > img,
.agn-parallax .agn-hero-pagina__fondo > img,
.agn-parallax .agn-seccion__fondo > img,
.agn-parallax .agn-bloque-foto__fondo > img,
.agn-parallax .agn-estudios__fondo > img,
.agn-parallax .agn-pie__fondo > img {
	/* El par de píxeles de más evita que el redondeo deje una franja. */
	height: calc(100% + var(--agn-parallax-mov) * 2 + 2px);
	margin-top: calc(var(--agn-parallax-mov) * -1 - 1px);
	transform: translate3d(0, var(--agn-parallax-y, 0px), 0);
	will-change: transform;
}

/* Quien pide menos movimiento en el sistema lo ve quieto. */
@media (prefers-reduced-motion: reduce) {
	.agn-parallax .agn-hero__fondo > img,
	.agn-parallax .agn-hero-pagina__fondo > img,
	.agn-parallax .agn-seccion__fondo > img,
	.agn-parallax .agn-bloque-foto__fondo > img,
	.agn-parallax .agn-estudios__fondo > img,
	.agn-parallax .agn-pie__fondo > img {
		height: 100%;
		margin-top: 0;
		transform: none;
		will-change: auto;
	}
}


/* ---------------- Fila de alianzas / logotipos ----------------
   Figma: cuatro bloques de 277x178 con 75 de separación y una línea fina
   centrada en cada hueco. Al pasar el cursor el bloque se vuelve una ficha
   verde con la flecha arriba a la derecha. */
.agn-alianzas__lista {
	--agn-alianzas-hueco: clamp(1rem, 4.96vw, 75px);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: var(--agn-alianzas-hueco);
	margin: 0;
	padding: 0;
	list-style: none;
}

.agn-alianzas__item {
	position: relative;
	display: grid;
	margin: 0;
}

.agn-alianzas__item + .agn-alianzas__item::before {
	content: '';
	position: absolute;
	top: 8.15%;
	bottom: 8.15%;
	left: calc(var(--agn-alianzas-hueco) / -2);
	width: 1px;
	background: #d9d9d9;
}

.agn-alianzas__bloque {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 277px;
	margin-inline: auto;
	aspect-ratio: 277 / 178;
	/* Sin esto un logotipo alto estira la ficha y descuadra la fila. */
	min-height: 0;
	border-radius: var(--agn-r-md);
	transition: background var(--agn-transicion), box-shadow var(--agn-transicion);
}

.agn-alianzas__bloque img {
	display: block;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

a.agn-alianzas__bloque:hover,
a.agn-alianzas__bloque:focus-visible {
	background: var(--agn-verde);
	box-shadow: var(--agn-sombra);
}

/* Sobre el verde los logotipos a color se pierden (el de OLACDE es verde),
   asi que en hover pasan a su version en negro. */
.agn-alianzas__bloque img {
	transition: filter var(--agn-transicion);
}

a.agn-alianzas__bloque:hover img,
a.agn-alianzas__bloque:focus-visible img {
	filter: brightness(0);
}

.agn-alianzas__marca {
	position: absolute;
	top: 11px;
	right: 11px;
	display: grid;
	width: 28px;
	height: 28px;
	opacity: 0;
	transition: opacity var(--agn-transicion);
}

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

a.agn-alianzas__bloque:hover .agn-alianzas__marca,
a.agn-alianzas__bloque:focus-visible .agn-alianzas__marca {
	opacity: 1;
}

/* Sin ratón la ficha no se puede mostrar: dejamos la flecha siempre visible. */
@media (hover: none) {
	.agn-alianzas__marca {
		opacity: 1;
	}
}

@media (max-width: 860px) {
	.agn-alianzas__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(1.5rem, 5vw, 2.5rem);
	}

	/* En dos columnas solo hay línea entre la primera y la segunda de la fila. */
	.agn-alianzas__item:nth-child(odd)::before {
		content: none;
	}
}