/* =========================================================================
   Siglo 21 Theme — hoja de estilos principal
   1. Fuentes
   2. Tokens
   3. Reset y base
   4. Utilidades (botones, formas, accesibilidad)
   5. Header y navegación
   6. Home: hero
   7. Home: introducción
   8. Home: autoridades
   9. Home: equipo
   10. Home: franja decorativa
   11. Home: obras y mosaico
   12. Home: campus
   13. Home: eventos
   14. Footer
   15. Contenido genérico
   16. Responsive
   ========================================================================= */

/* 1. Fuentes ------------------------------------------------------------ */

@font-face {
	font-family: 'Alfabet';
	src: url('../fonts/alfabet-regular.woff2') format('woff2'),
	     url('../fonts/alfabet-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alfabet';
	src: url('../fonts/alfabet-medium.woff2') format('woff2'),
	     url('../fonts/alfabet-medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alfabet';
	src: url('../fonts/alfabet-semibold.woff2') format('woff2'),
	     url('../fonts/alfabet-semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alfabet';
	src: url('../fonts/alfabet-bold.woff2') format('woff2'),
	     url('../fonts/alfabet-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alfabet';
	src: url('../fonts/alfabet-black.woff2') format('woff2'),
	     url('../fonts/alfabet-black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Archivo (variable, 400-700) para el texto corrido. Dos archivos por rango
   de caracteres: el segundo sólo se descarga si la página usa latin-ext. */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
	               U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
	               U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
	               U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ------------------------------------------------------------- */

:root {
	--s21-verde: #12a085;
	--s21-verde-osc: #0d7d68;
	--s21-aqua: #7fd4c1;
	--s21-rosa: #f0a5c8;
	--s21-gris: #3a3a3a;
	--s21-negro: #1d1d1b;
	--s21-texto: #46484a;
	--s21-blanco: #ffffff;
	--s21-crema: #fbfbf9;
	--s21-linea: #e4e4e0;

	--s21-ancho: 1240px;
	--s21-gutter: clamp(1.25rem, 4vw, 3rem);
	--s21-radio: 6px;
	--s21-header: 84px;

	/* Alfabet titula; Archivo lleva el texto corrido. */
	--s21-fuente: 'Alfabet', 'Helvetica Neue', Arial, sans-serif;
	--s21-fuente-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

	--s21-blur-texto: 10px;
	--s21-dur-reveal: .7s;
	--s21-ease-salida: cubic-bezier(.16, 1, .3, 1);
}

/* 3. Reset y base ------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--s21-fuente-texto);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--s21-texto);
	background: var(--s21-blanco);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

h1, h4,
.s21-volanta,
.s21-btn,
.s21-nav__lista a,
.s21-nav__cta,
.s21-header__logo-texto,
.s21-evento__link {
	font-family: var(--s21-fuente);
}

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: 1.12;
	color: var(--s21-negro);
	letter-spacing: -.01em;
}

h2, h3 {
	font-family: var(--s21-fuente-texto);
}

p {
	margin: 0 0 1.1em;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	cursor: pointer;
}

/* 4. Utilidades --------------------------------------------------------- */

.s21-inner,
.s21-hero__inner,
.s21-intro__inner,
.s21-equipo__inner,
.s21-eventos__inner,
.s21-footer__inner,
.s21-footer__barra-inner,
.s21-header__inner {
	width: 100%;
	max-width: var(--s21-ancho);
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.s21-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--s21-verde);
	color: #fff;
	text-decoration: none;
}

.s21-skip:focus {
	left: 1rem;
	top: 1rem;
}

.s21-btn {
	display: inline-block;
	padding: .8rem 1.9rem;
	border-radius: var(--s21-radio);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.s21-btn--verde {
	background: var(--s21-verde);
	color: #fff;
	border: 2px solid var(--s21-verde);
}

.s21-btn--verde:hover {
	background: var(--s21-verde-osc);
	border-color: var(--s21-verde-osc);
}

.s21-btn--blanco {
	background: #fff;
	color: var(--s21-negro);
	border: 2px solid #fff;
}

.s21-btn--blanco:hover {
	background: transparent;
	color: #fff;
}

.s21-btn--outline {
	background: transparent;
	color: var(--s21-verde);
	border: 2px solid var(--s21-verde);
}

.s21-btn--outline:hover {
	background: var(--s21-verde);
	color: #fff;
}

.s21-volanta {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--s21-negro);
}

/* En el maquetado la parte destacada del título es verde a secas: no lleva
   fondo ni subrayado. */
.s21-resaltado {
	color: var(--s21-verde);
}

/* Recursos gráficos del diseño (onda rosa y figuras de línea). Se posicionan
   de forma absoluta y nunca capturan el puntero. */
.s21-intro__figura,
.s21-intro__onda,
.s21-autoridad__figura {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* Entradas al hacer scroll -----------------------------------------------
   Los bloques suben con un fade; los textos resuelven palabra por palabra.
   Las palabras las envuelve el JS: sin JS no existe .s21-w y el texto se lee
   normal. Nunca se esconde texto desde el CSS de arranque. */

[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
}

[data-reveal].s21-visible {
	opacity: 1;
	transform: none;
	transition: opacity var(--s21-dur-reveal) var(--s21-ease-salida),
	            transform var(--s21-dur-reveal) var(--s21-ease-salida);
	transition-delay: var(--s21-d, 0ms);
}

.s21-w {
	display: inline-block;
	opacity: 0;
	filter: blur(var(--s21-blur-texto));
}

.s21-w[data-listo="true"] {
	opacity: 1;
	filter: none;
}

/* 5. Header y navegación ------------------------------------------------ */

.s21-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--s21-linea);
	transition: background-color .3s ease, border-color .3s ease;
}

/* En la portada el header queda fijo sobre el hero: así el cambio a fondo
   sólido al hacer scroll no mueve el layout. */
body.s21-header-transparente .s21-header {
	position: fixed;
	inset: 0 0 auto;
}

.s21-header--transparente {
	background: transparent;
	border-bottom: 0;
}

.s21-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: var(--s21-header);
}

.s21-header__logo {
	display: flex;
	align-items: center;
}

.s21-header__logo-img {
	width: auto;
	max-height: 100px;
}

/* Sobre el hero va el logo claro; apenas el header toma fondo blanco (al
   scrollear, o en cualquier página interna) pasa el oscuro. */
.s21-header__logo-img--claro {
	display: none;
}

.s21-header--transparente .s21-header__logo-img--claro {
	display: block;
}

.s21-header--transparente .s21-header__logo-img--oscuro {
	display: none;
}

.s21-header__logo-texto {
	font-weight: 900;
	font-size: 1.3rem;
	text-decoration: none;
	color: var(--s21-negro);
}

.s21-header--transparente .s21-header__logo-texto {
	color: #fff;
}

.s21-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.s21-nav__lista {
	display: flex;
	align-items: center;
	gap: 1.9rem;
}

.s21-nav__lista a {
	font-size: .92rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--s21-negro);
	padding-block: .4rem;
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease;
}

.s21-nav__lista a:hover,
.s21-nav__lista .current-menu-item > a {
	border-bottom-color: var(--s21-verde);
}

.s21-header--transparente .s21-nav__lista a {
	color: #fff;
}

.s21-nav__cta {
	padding: .55rem 1.35rem;
	border-radius: 999px;
	background: var(--s21-verde);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.s21-nav__cta:hover {
	background: var(--s21-verde-osc);
}

.s21-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
}

.s21-burger span {
	display: block;
	height: 2px;
	width: 24px;
	margin-inline: auto;
	background: var(--s21-negro);
	transition: transform .25s ease, opacity .2s ease;
}

.s21-header--transparente .s21-burger span {
	background: #fff;
}

/* Banderas de GTranslate en el menú: sin aire quedan pegadas entre sí y al
   botón destacado. */
a.glink {
	display: inline-block;
	margin: 3px;
}

/* 6. Home: hero --------------------------------------------------------- */

.s21-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(92vh, 820px);
	padding-block: calc(var(--s21-header) + 4rem) 5rem;
	background-color: var(--s21-gris);
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}

.s21-hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(20, 24, 26, .78) 0%, rgba(20, 24, 26, .45) 45%, rgba(20, 24, 26, .12) 100%);
}

.s21-hero__inner {
	position: relative;
	z-index: 1;
}

.s21-hero__titulo {
	max-width: 55%;
	margin: 0 0 1.4rem;
	font-size: clamp(2.4rem, 5.4vw, 4.15rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.06;
}

.s21-hero__texto {
	max-width: 44ch;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
}

/* 7. Home: introducción ------------------------------------------------- */

.s21-intro {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 7rem);
	background: var(--s21-blanco);
	overflow: hidden;
}

.s21-intro__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5.5rem);
	align-items: center;
}

.s21-intro__figura {
	top: 12%;
	left: -140px;
	width: clamp(200px, 22vw, 330px);
	opacity: .9;
}

.s21-intro__marca {
	position: relative;
	min-height: 260px;
}

.s21-intro__onda {
	top: 50%;
	left: 50%;
	width: 132%;
	max-width: none;
	transform: translate(-50%, -46%);
	opacity: .75;
}

.s21-intro__logo {
	position: relative;
	z-index: 1;
	margin-bottom: 1.5rem;
}

.s21-intro__logo img {
	max-width: 170px;
}

.s21-intro__lockup {
	position: relative;
	z-index: 2;
}

.s21-intro__lockup img {
	max-width: 420px;
}

.s21-intro__texto {
	max-width: 80%;
	font-size: .95rem;
	line-height: 1.8;
	color: var(--s21-texto);
}

.s21-intro__texto p {
	margin-bottom: 1.7em;
}

.s21-intro__texto p:last-child {
	margin-bottom: 0;
}

/* 8. Home: autoridades -------------------------------------------------- */

/* Cada bloque es una fila a todo el ancho con tres franjas: el panel verde
   sangra hasta el borde de la página, la foto queda adentro, y del lado de
   afuera de la foto queda un respiro en blanco. En los bloques invertidos el
   orden de las franjas se espeja. */

.s21-autoridades {
	position: relative;
	overflow: hidden;
	background: var(--s21-blanco);
}

.s21-autoridad {
	position: relative;
	display: grid;
	grid-template-columns: 50fr 35fr 15fr;
	align-items: stretch;
	overflow: hidden;
}

.s21-autoridad--invertida {
	grid-template-columns: 15fr 35fr 50fr;
}

.s21-autoridad__texto {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
	background: var(--s21-verde);
	color: #fff;
}

.s21-autoridad--invertida .s21-autoridad__texto {
	grid-column: 3;
	align-items: flex-start;
}

/* El contenido no se estira hasta el borde del panel: se apoya del lado de la
   foto, que es donde cae la vista. La figura queda afuera de esta regla: es
   decorativa y se posiciona sola. */
.s21-autoridad__texto > :not(.s21-autoridad__figura) {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 34rem;
}

.s21-autoridad__foto {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	min-height: 340px;
}

.s21-autoridad__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s21-autoridad__nombre {
	margin: 0 0 .35rem;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	color: #fff;
}

.s21-autoridad__cargo {
	margin: 0 0 1.6rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.s21-autoridad__cita {
	margin: 0;
	font-size: .95rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, .95);
}

/* La figura de línea vive dentro del panel verde de cada bloque: asoma por el
   borde exterior y el panel la recorta. Alterna de lado con el bloque. */
.s21-autoridad__figura {
	top: 50%;
	left: 0;
	width: clamp(200px, 22vw, 360px);
	transform: translate(-38%, -50%);
	opacity: .55;
	z-index: 0;
}

.s21-autoridad--invertida .s21-autoridad__figura {
	left: auto;
	right: 0;
	transform: translate(38%, -50%);
}

/* Las secciones a las que apunta el menú dejan aire para el header fijo. */
.s21-autoridades[id],
.s21-obras[id] {
	scroll-margin-top: 90px;
}

/* 9. Home: equipo ------------------------------------------------------- */

.s21-equipo {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	background: var(--s21-blanco);
}

.s21-equipo__inner {
	--s21-equipo-gap: clamp(1.5rem, 4vw, 3rem);

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s21-equipo-gap);
}

.s21-persona {
	position: relative;
}

/* Línea divisoria entre integrantes, centrada en el espacio que los separa.
   Sólo con tres columnas: en dos, el tercero abre fila y la línea caería
   pegada al borde izquierdo de la grilla. */
@media (min-width: 1025px) {
	.s21-persona + .s21-persona::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--s21-equipo-gap) / -2);
		width: 1px;
		background: var(--s21-aqua);
	}
}

/* Las cuatro partes de cada integrante (texto, foto, cargo, nombre) comparten
   fila con las de al lado: así las fotos arrancan y terminan al mismo nivel
   aunque los textos tengan largos distintos. */
@supports (grid-template-rows: subgrid) {
	.s21-equipo__inner {
		grid-template-rows: repeat(4, auto);
		row-gap: 0;
	}

	.s21-persona {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		align-content: start;
	}
}

.s21-persona__texto {
	font-size: .84rem;
	line-height: 1.8;
	color: var(--s21-texto);
	margin-bottom: 1.4rem;
}

/* Sin subgrid, el texto reserva un alto fijo para que las fotos no se
   desalineen del todo. */
@supports not (grid-template-rows: subgrid) {
	.s21-persona__texto {
		min-height: 9em;
	}
}

.s21-persona__foto {
	margin-bottom: 1.4rem;
	overflow: hidden;
	border-radius: var(--s21-radio);
}

.s21-persona__foto img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.s21-persona__cargo {
	margin: 0 0 .2rem;
	font-size: .74rem;
	line-height: 1.5;
	color: #8b8d8f;
}

.s21-persona__nombre {
	margin: 0;
	font-size: 1.1rem;
	color: var(--s21-negro);
}

/* 10. Home: franja decorativa ------------------------------------------- */

.s21-franja {
	overflow: hidden;
	line-height: 0;
}

.s21-franja img {
	width: 100%;
	min-height: 90px;
	object-fit: cover;
}

/* 11. Home: obras y mosaico --------------------------------------------- */

.s21-obras {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}

.s21-obras__encabezado,
.s21-obras__pie {
	width: 100%;
	max-width: var(--s21-ancho);
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
}

.s21-obras__columnas {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Titular grande en peso regular y con las líneas casi tocándose, como el
   maquetado: el peso fuerte lo lleva la volanta, no el título. */
.s21-obras__titulo {
	margin: 0;
	/* El ancho va en em, no en píxeles: el corte de línea del maquetado
	   («Una colección / que le pone / alma al / conocimiento») se mantiene igual
	   en cualquier tamaño de pantalla. */
	max-width: 7.3em;
	font-size: clamp(2.2rem, 4.4vw, 3.9rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.015em;
}

.s21-obras__texto {
	margin: 0 0 1.8rem;
	font-size: .95rem;
	line-height: 1.5;
}

.s21-mosaico {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.s21-mosaico__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--s21-crema);
}

.s21-mosaico__item--ancha {
	grid-column: 1 / -1;
}

.s21-mosaico__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s ease;
}

.s21-mosaico__item--ancha img {
	aspect-ratio: 16 / 5;
}

.s21-mosaico__item a:hover img {
	transform: scale(1.03);
}

.s21-obras__pie {
	text-align: center;
}

/* 12. Home: campus ------------------------------------------------------ */

.s21-campus {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(78vh, 640px);
	padding-block: clamp(4rem, 9vw, 7rem);
	background-color: var(--s21-gris);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.s21-campus__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.s21-campus__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 40, 34, .82) 0%, rgba(18, 40, 34, .5) 60%, rgba(18, 40, 34, .3) 100%);
}

.s21-campus__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--s21-ancho);
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
}

.s21-campus__titulo {
	margin: 0 0 1.3rem;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	color: #fff;
}

.s21-campus__texto {
	max-width: 58ch;
	margin: 0 0 2rem;
	font-size: .92rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, .92);
}

/* 13. Home: eventos ----------------------------------------------------- */

.s21-eventos {
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background: var(--s21-blanco);
}

.s21-eventos__titulo {
	margin: 0 0 2.5rem;
	font-size: 1.35rem;
	font-weight: 600;
}

.s21-eventos__grilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 2.6rem);
}

.s21-evento__foto {
	margin-bottom: 1.4rem;
	overflow: hidden;
	border-radius: var(--s21-radio);
}

.s21-evento__foto img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.s21-evento__cuerpo {
	padding-left: 1.2rem;
	border-left: 3px solid var(--s21-verde);
}

.s21-evento__titulo {
	margin: 0 0 .5rem;
	font-size: 1.02rem;
	line-height: 1.3;
}

.s21-evento__titulo a {
	text-decoration: none;
}

.s21-evento__titulo a:hover {
	color: var(--s21-verde);
}

.s21-evento__texto {
	font-size: .84rem;
	line-height: 1.8;
}

.s21-evento__link {
	font-size: .85rem;
	font-weight: 700;
	color: var(--s21-negro);
	text-decoration: none;
	border-bottom: 2px solid var(--s21-verde);
	padding-bottom: 2px;
}

.s21-evento__link:hover {
	color: var(--s21-verde);
}

/* 14. Footer ------------------------------------------------------------ */

.s21-footer {
	background: var(--s21-gris);
	color: rgba(255, 255, 255, .82);
	font-size: .84rem;
}

.s21-footer__inner {
	display: grid;
	grid-template-columns: minmax(200px, 320px) 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.s21-footer__marca img {
	max-width: 190px;
}

.s21-footer__marca-texto {
	font-size: 1.4rem;
	font-weight: 900;
	color: #fff;
}

.s21-footer__columnas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.s21-footer__titulo {
	margin: 0 0 1rem;
	font-size: .88rem;
	font-weight: 600;
	color: #fff;
}

.s21-footer__lista li + li {
	margin-top: .55rem;
}

.s21-footer__lista a,
.s21-footer__nav a {
	text-decoration: none;
	color: rgba(255, 255, 255, .78);
	transition: color .2s ease;
}

.s21-footer__lista a:hover,
.s21-footer__nav a:hover {
	color: #fff;
}

.s21-footer__barra {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.s21-footer__barra-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.1rem;
	font-size: .78rem;
}

.s21-redes {
	display: flex;
	gap: .55rem;
}

.s21-redes__link {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;
	transition: background-color .2s ease;
}

.s21-redes__link:hover {
	background: var(--s21-verde);
}

.s21-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
}

.s21-footer__copy {
	margin: 0;
	color: rgba(255, 255, 255, .6);
}

/* 14b. Botón volver arriba ---------------------------------------------- */

.s21-arriba {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 80;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}

.s21-arriba--visible {
	opacity: 1;
	transform: translateY(0);
}

.s21-arriba img {
	width: 100%;
	height: 100%;
}

/* 15. Contenido genérico ------------------------------------------------ */

.s21-contenido {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding: clamp(2.5rem, 7vw, 5rem) var(--s21-gutter);
}

.s21-contenido--centrado {
	text-align: center;
}

.s21-contenido__titulo {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.s21-contenido__foto {
	margin-bottom: 2rem;
	border-radius: var(--s21-radio);
	overflow: hidden;
}

.s21-prosa {
	font-size: 1rem;
	line-height: 1.8;
}

.s21-prosa a {
	color: var(--s21-verde);
}

.s21-listado {
	display: grid;
	gap: 2.5rem;
}

.s21-entrada__foto {
	display: block;
	margin-bottom: 1rem;
	border-radius: var(--s21-radio);
	overflow: hidden;
}

.s21-entrada__titulo {
	font-size: 1.35rem;
	margin-bottom: .4rem;
}

.s21-entrada__titulo a {
	text-decoration: none;
}

.s21-buscador {
	display: flex;
	gap: .5rem;
	margin-block: 1.5rem;
	justify-content: center;
}

.s21-buscador input {
	flex: 1 1 auto;
	max-width: 320px;
	padding: .75rem 1rem;
	border: 1px solid var(--s21-linea);
	border-radius: var(--s21-radio);
	font: inherit;
}

/* 16. Blog: listado, archivos y entrada ---------------------------------- */

/* El hero va a sangre bajo el header transparente. Sin imagen queda la banda
   verde, así que el título nunca se apoya sobre un fondo indefinido. */
.s21-blog-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 46vh, 520px);
	padding-block: clamp(7rem, 13vw, 9rem) clamp(3rem, 6vw, 4.5rem);
	background-color: var(--s21-verde);
	background-position: center;
	background-size: cover;
}

/* Velo para que el título se lea sobre cualquier foto. */
.s21-blog-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .6) 100%);
}

.s21-blog-hero--liso::before {
	background: none;
}

.s21-blog-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--s21-ancho);
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
}

.s21-blog-hero__volanta {
	margin: 0 0 .6rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.s21-blog-hero__titulo {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(1.9rem, 4.4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

/* En pantallas grandes el título de la entrada se centra dentro del banner.
   El listado y los archivos siguen alineados a la izquierda. */
@media (min-width: 1025px) {
	body.single .s21-blog-hero__inner {
		text-align: center;
	}

	body.single .s21-blog-hero__titulo {
		max-width: 26ch;
		margin-inline: auto;
	}
}

/* Listado y lateral. El lateral es una columna fija: el listado se queda con
   el resto del ancho. */
.s21-blog {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--s21-blanco);
}

.s21-blog__inner {
	width: 100%;
	max-width: var(--s21-ancho);
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.s21-blog__grilla {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 4vw, 2.6rem);
}

.s21-blog__bajada,
.s21-blog__vacio {
	margin: 0 0 2rem;
	font-size: .95rem;
	line-height: 1.8;
	color: var(--s21-texto);
}

.s21-evento__fecha {
	margin: 0 0 .35rem;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8b8d8f;
}

/* Bloques del lateral. */
.s21-blog__lateral {
	display: grid;
	gap: 2.5rem;
	position: sticky;
	top: 100px;
}

.s21-widget__titulo {
	margin: 0 0 1rem;
	padding-bottom: .7rem;
	font-size: 1rem;
	font-weight: 700;
	border-bottom: 2px solid var(--s21-verde);
}

.s21-widget__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.s21-categoria a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .5rem 0;
	font-size: .88rem;
	color: var(--s21-texto);
	text-decoration: none;
	border-bottom: 1px solid #e8e9ea;
}

.s21-categoria a:hover {
	color: var(--s21-verde);
}

.s21-categoria--activa a {
	font-weight: 700;
	color: var(--s21-verde);
}

.s21-categoria__cuenta {
	flex: none;
	min-width: 1.6rem;
	padding: .1rem .4rem;
	font-size: .72rem;
	text-align: center;
	color: var(--s21-verde);
	background: rgba(18, 160, 133, .1);
	border-radius: 999px;
}

.s21-reciente__link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: .8rem;
	align-items: center;
	padding: .7rem 0;
	text-decoration: none;
	border-bottom: 1px solid #e8e9ea;
}

.s21-reciente__foto img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--s21-radio);
}

.s21-reciente__fecha {
	display: block;
	margin-bottom: .2rem;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8b8d8f;
}

.s21-reciente__titulo {
	display: block;
	font-size: .84rem;
	line-height: 1.4;
	color: var(--s21-negro);
}

.s21-reciente__link:hover .s21-reciente__titulo {
	color: var(--s21-verde);
}

/* Paginación del listado. */
.s21-paginacion {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.s21-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.s21-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: .7rem;
	font-size: .85rem;
	color: var(--s21-negro);
	text-decoration: none;
	border: 1px solid #e0e2e3;
	border-radius: var(--s21-radio);
}

.s21-paginacion .page-numbers:hover {
	border-color: var(--s21-verde);
	color: var(--s21-verde);
}

.s21-paginacion .page-numbers.current {
	background: var(--s21-verde);
	border-color: var(--s21-verde);
	color: #fff;
}

/* Pie de la entrada. */
.s21-contenido__pie {
	margin-top: 2.5rem;
	padding-top: 1.2rem;
	font-size: .85rem;
	border-top: 1px solid #e8e9ea;
}

.s21-contenido__etiqueta {
	font-weight: 700;
	margin-right: .4rem;
}

.s21-contenido__pie a {
	color: var(--s21-verde);
}

.s21-volver {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding: 0 var(--s21-gutter) clamp(3rem, 7vw, 5rem);
}

/* 17. Páginas de colección (Collector Systems) --------------------------- */

/* El plugin trae su propia grilla: acá solo se le da el ancho y el aire del
   resto del sitio. */
.s21-coleccion {
	width: 100%;
	max-width: var(--s21-ancho);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--s21-gutter);
}

.s21-coleccion > p:empty {
	display: none;
}

/* 18. Institucional ------------------------------------------------------ */

/* Barra de accesos: queda pegada bajo el header al scrollear, así las
   secciones siguen a un clic en una página larga. */
.s21-inst-barra {
	position: sticky;
	top: var(--s21-header);
	z-index: 70;
	background: var(--s21-blanco);
	border-bottom: 1px solid var(--s21-linea);
}

.s21-inst-barra__inner {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	width: 100%;
	max-width: var(--s21-ancho);
	margin-inline: auto;
	padding: .9rem var(--s21-gutter);
}

.s21-inst-barra__item {
	padding: .5rem 1.1rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--s21-verde);
	text-decoration: none;
	white-space: nowrap;
	background: #fff;
	border: 1px solid var(--s21-verde);
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}

.s21-inst-barra__item:hover {
	background: var(--s21-verde);
	color: #fff;
}

.s21-inst {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--s21-blanco);
}

.s21-inst__inner {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
}

.s21-inst__seccion {
	/* El header y la barra tapan el destino del ancla si no se deja aire. */
	scroll-margin-top: calc(var(--s21-header) + 70px);
	padding-block: clamp(2rem, 5vw, 3.2rem);
	border-top: 1px solid var(--s21-linea);
}

.s21-inst__seccion:first-child {
	border-top: 0;
	padding-top: 0;
}

.s21-inst__titulo {
	margin: 0 0 1.4rem;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	color: var(--s21-verde);
}

/* Preguntas frecuentes: <details> nativo, sin JavaScript. */
.s21-faq__item {
	border-bottom: 1px solid var(--s21-linea);
}

.s21-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-size: .96rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.s21-faq__pregunta::-webkit-details-marker {
	display: none;
}

.s21-faq__pregunta::after {
	content: '';
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--s21-verde);
	border-bottom: 2px solid var(--s21-verde);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}

.s21-faq__item[open] .s21-faq__pregunta::after {
	transform: rotate(-135deg) translateY(-2px);
}

.s21-faq__pregunta:hover {
	color: var(--s21-verde);
}

.s21-faq__respuesta {
	padding: 0 0 1.2rem;
	font-size: .9rem;
	line-height: 1.8;
	color: var(--s21-texto);
}

.s21-faq__respuesta p:last-child {
	margin-bottom: 0;
}

/* Formulario de visitas. */
.s21-formulario {
	margin-top: 2rem;
}

.s21-formulario__aviso {
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	font-size: .88rem;
	border-radius: var(--s21-radio);
	border-left: 3px solid;
}

.s21-formulario__aviso--ok {
	color: var(--s21-verde-osc);
	background: rgba(18, 160, 133, .08);
	border-color: var(--s21-verde);
}

.s21-formulario__aviso--error {
	color: #a3341f;
	background: rgba(163, 52, 31, .07);
	border-color: #a3341f;
}

.s21-formulario__form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem 1.4rem;
}

.s21-campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.s21-campo--comentarios,
.s21-formulario__form > .s21-btn {
	grid-column: 1 / -1;
}

.s21-campo__label {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6c6e70;
}

.s21-campo__req {
	color: var(--s21-verde);
}

.s21-campo__input {
	width: 100%;
	padding: .7rem .9rem;
	font: inherit;
	font-size: .9rem;
	color: var(--s21-negro);
	background: #fff;
	border: 1px solid var(--s21-linea);
	border-radius: var(--s21-radio);
	transition: border-color .2s ease;
}

.s21-campo__input:focus {
	outline: none;
	border-color: var(--s21-verde);
}

.s21-campo--trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.s21-formulario__form .s21-btn {
	justify-self: start;
	border: 0;
	cursor: pointer;
}

/* 19. Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.s21-equipo__inner,
	.s21-eventos__grilla {
		grid-template-columns: repeat(2, 1fr);
	}

	.s21-footer__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.s21-burger {
		display: flex;
	}

	.s21-nav {
		position: fixed;
		inset: 0;
		z-index: 90;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 2rem;
		padding: 6rem var(--s21-gutter) 3rem;
		background: var(--s21-verde);
		transform: translateX(100%);
		transition: transform .32s ease;
		overflow-y: auto;
	}

	.s21-nav--abierta {
		transform: translateX(0);
	}

	.s21-nav__lista {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.4rem;
	}

	.s21-nav__lista a,
	.s21-header--transparente .s21-nav__lista a {
		color: #fff;
		font-size: 1.5rem;
		font-weight: 600;
	}

	.s21-nav__cta {
		background: #fff;
		color: var(--s21-verde);
	}

	.s21-menu-abierto {
		overflow: hidden;
	}

	/* El panel es hijo del header, así que tapa al logo y al botón. Los dos
	   suben por encima para seguir a mano con el menú abierto: el logo a la
	   izquierda y la cruz a la derecha. */
	.s21-header__logo,
	.s21-burger {
		position: relative;
		z-index: 95;
	}

	/* Con el menú abierto el header se apoya sobre el verde: sin fondo propio
	   y con el logo claro, venga de donde venga. */
	.s21-menu-abierto .s21-header {
		background: transparent;
		border-bottom-color: transparent;
	}

	.s21-menu-abierto .s21-header__logo-img--claro {
		display: block;
	}

	.s21-menu-abierto .s21-header__logo-img--oscuro {
		display: none;
	}

	.s21-menu-abierto .s21-header__logo-texto {
		color: #fff;
	}

	.s21-menu-abierto .s21-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.s21-menu-abierto .s21-burger span:nth-child(2) {
		opacity: 0;
	}

	.s21-menu-abierto .s21-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.s21-menu-abierto .s21-burger span {
		background: #fff;
	}

	.s21-intro__inner,
	.s21-obras__columnas {
		grid-template-columns: 1fr;
	}

	/* El lateral pasa debajo del listado y deja de seguir al scroll. */
	.s21-blog__inner {
		grid-template-columns: 1fr;
	}

	.s21-blog__lateral {
		position: static;
	}

	.s21-autoridad,
	.s21-autoridad--invertida {
		grid-template-columns: 1fr;
	}

	/* En una sola columna no hay franja blanca ni lado interno: el panel y la
	   foto se apilan a todo el ancho. */
	.s21-autoridad__texto,
	.s21-autoridad--invertida .s21-autoridad__texto,
	.s21-autoridad__foto {
		grid-column: 1;
		grid-row: auto;
	}

	.s21-autoridad__texto,
	.s21-autoridad--invertida .s21-autoridad__texto {
		align-items: stretch;
	}

	.s21-autoridad__texto > * {
		max-width: none;
	}

	.s21-autoridad__foto {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.s21-hero__titulo {
		max-width: 100%;
	}

	.s21-autoridad__figura {
		display: none;
	}

	.s21-intro__figura {
		display: none;
	}
}

@media (max-width: 640px) {
	.s21-equipo__inner,
	.s21-blog__grilla,
	.s21-eventos__grilla,
	.s21-mosaico {
		grid-template-columns: 1fr;
	}

	.s21-mosaico__item img,
	.s21-mosaico__item--ancha img {
		aspect-ratio: 4 / 3;
	}

	/* En una sola columna el subgrid no aporta nada: cada integrante se separa
	   del anterior con una línea y más aire. */
	.s21-equipo__inner {
		grid-template-rows: none;
		row-gap: 2.2rem;
	}

	.s21-persona {
		display: block;
		grid-row: auto;
	}

	.s21-persona + .s21-persona {
		padding-top: 2.2rem;
		border-top: 1px solid var(--s21-verde);
	}

	.s21-formulario__form {
		grid-template-columns: 1fr;
	}

	/* Con siete botones apilados la barra se comía media pantalla: en chico
	   queda en una fila que se arrastra de costado. */
	.s21-inst-barra__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.s21-inst-barra__inner::-webkit-scrollbar {
		display: none;
	}

	.s21-inst__seccion {
		scroll-margin-top: calc(var(--s21-header) + 60px);
	}

	.s21-persona__texto {
		min-height: 0;
	}

	.s21-footer__columnas {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.s21-footer__barra-inner {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.s21-w {
		opacity: 1 !important;
		filter: none !important;
	}

	/* El video de fondo es decorativo: con movimiento reducido queda la imagen. */
	.s21-campus__video {
		display: none;
	}
}