/**
 * Portada SANJO 2026
 *
 * ---------------------------------------------------------------------------
 * Cómo está montada
 *
 * La portada es un relato de ocho capítulos entre una apertura y una tira de
 * alianzas. Cada capítulo es una sección con la misma anatomía:
 *
 *   <section class="sjo-p sjo-p--fe">
 *     <div class="sjo-p__deco">   adornos, sin ratón y sin lector de pantalla
 *     <p   class="sjo-p__numeral">01
 *     <p   class="sjo-p__rotulo">01 — La fe
 *     <div class="sjo-p__interior"> el contenido que sí se lee
 *
 * El contenido va en flujo: rejillas y columnas que se recolocan solas. Lo
 * único que se coloca por coordenadas son los adornos —el blasón, los arcos, los
 * telones, el aro, el cuadro rojo y las fotografías sueltas de cada capítulo—,
 * y viven en « .sjo-p__deco », una capa aparte con « pointer-events: none » para
 * que no puedan empujar ni tapar nada.
 *
 * Se descartó reproducir el lienzo de 1440 escalado con cada pieza en las
 * coordenadas del Figma: con todo en absoluto, un texto que ocupa una línea más
 * que en la maqueta se sale de su caja y se monta sobre lo de abajo, porque no
 * hay nada que empuje. Un sitio con contenido real, escrito desde el
 * administrador, no aguanta eso.
 *
 * ---------------------------------------------------------------------------
 * Cualquier pantalla, no dos pantallas
 *
 * La maqueta viene dibujada a 1440 y a 390, pero esas dos medidas no aparecen
 * en ninguna parte de esta hoja: son el punto de partida para deducir una
 * proporción, no un destino.
 *
 * - **Los tamaños** —letra, adornos, huecos— se expresan con « clamp() » y una
 *   pendiente en « vw ». Entre un móvil de 320 y un monitor de 2560 el titular
 *   crece de forma continua y guarda la misma proporción con su columna que en
 *   el Figma; no hay ningún ancho en el que algo salte de golpe.
 * - **La composición** cambia en dos sitios, y solo porque a partir de ahí deja
 *   de caber: por debajo de 1024 los adornos que se montarían sobre el texto se
 *   apagan y las cuadrículas de cuatro pasan a dos, y por debajo de 782 todo va
 *   a una columna y las listas de tarjetas se vuelven carrusel (el de
 *   assets/js/carrusel.js, que ya existía).
 * - **El ancho de lectura** se acota en « --sjo-p-ancho ». En un monitor muy
 *   ancho la página no se estira sin fin: el contenido se queda en una medida
 *   legible y lo que crece es el margen, que es lo que hace el diseño.
 *
 * Nada mide en píxeles fijos salvo los filetes y los pictogramas, que son
 * piezas de tamaño invariable por definición.
 *
 * ---------------------------------------------------------------------------
 * Dónde está cada cosa
 *
 * Las fotografías con corte diagonal usan « mask-image » con el SVG que exporta
 * el Figma (assets/svg/portada/mask-*.svg). El duotono azul de algunas es la
 * misma receta del diseño: la foto, encima un multiplicar azul y encima un
 * trama en modo pantalla.
 */

/* ---------------------------------------------------------------------------
 * Fichas de color y medida
 *
 * Los colores de marca ya están en theme.json y se leen como preset. Aquí solo
 * quedan los que son de esta portada y de ningún otro sitio: los dos grises del
 * texto largo y las medidas del ritmo vertical.
 * ------------------------------------------------------------------------ */

.sjo-p,
.sjo-apertura,
.sjo-alianzas {
	--sjo-p-gutter: clamp( 1.25rem, 6.94vw, 7.5rem );
	--sjo-p-ancho: 1560px;
	--sjo-puerta-fotos: clamp( 15rem, 30.5vw, 30rem );
	--sjo-p-gris: #5a6472;
	--sjo-p-tinta: #14181f;
	--sjo-p-aire: clamp( 3.5rem, 7vw, 7.5rem );
	--sjo-p-filete: var( --wp--preset--color--rojo );
	--sjo-p-numeral: rgba( 0, 64, 120, 0.3 );
	--sjo-p-rotulo: var( --wp--preset--color--rojo );

	/* Y las secciones van pegadas unas a otras: entre capítulos no hay aire. El
	   hueco de bloque que reparte el grupo de la plantilla se anula aquí, y
	   basta una clase para ganarle porque « :where() » no suma especificidad. */
	margin-block: 0;
}

.sjo-p {
	position: relative;
	overflow: hidden;
	padding-block: var( --sjo-p-aire );
	box-sizing: border-box;
	font-family: var( --wp--preset--font-family--heading );
}

/* Sobre fondo oscuro cambian el numeral y el rótulo, no el resto. */
.sjo-p.es-oscura {
	--sjo-p-numeral: rgba( 255, 255, 255, 0.32 );
	--sjo-p-rotulo: var( --wp--preset--color--base );
	--sjo-p-filete: var( --wp--preset--color--rojo );
}

.sjo-p.es-roja {
	--sjo-p-numeral: rgba( 255, 255, 255, 0.45 );
	--sjo-p-rotulo: var( --wp--preset--color--base );
	--sjo-p-filete: var( --wp--preset--color--base );
}

.sjo-p__interior {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: var( --sjo-p-ancho );
	margin-inline: auto;
	padding-inline: var( --sjo-p-gutter );
}

/* La capa de adornos. No la toca el ratón ni la lee un lector de pantalla: es
   decoración, y si se pudiera pulsar taparía enlaces de verdad. */
.sjo-p__deco {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.sjo-p__deco img,
.sjo-p__deco svg {
	display: block;
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Piezas que se repiten en todos los capítulos
 * ------------------------------------------------------------------------ */

/* El filete rojo de 48 × 3 que abre cada sección. */
.sjo-p__filete {
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 0 1.375rem;
	/* El respaldo importa: este filete ya no es solo de la portada, lo usan
	   también las bandas de las páginas interiores, donde « --sjo-p-filete » no
	   está definida. Sin él, el filete existe pero no se ve. */
	background-color: var( --sjo-p-filete, var( --wp--preset--color--rojo, #e00026 ) );
	border-radius: 2px;
}

/* El numeral gigante de contorno que asoma por arriba de cada capítulo.
 *
 * Es un párrafo corriente con « -webkit-text-stroke », no un SVG: se quiere
 * construido con marcado y hoja de estilos, sin piezas dibujadas aparte.
 *
 * El trazo va a 2 px y no a 1: esa propiedad no dibuja un trazo vectorial, sino
 * que rasteriza el contorno junto con el texto, y a 260 px de cuerpo una línea
 * de un píxel sale dentada. Con dos, el borde se lee continuo. Es el único
 * remedio que hay sin salirse de CSS.
 *
 * En la maqueta el numeral se sale por arriba de la sección y se recorta contra
 * ella; aquí lo hace el « overflow: hidden » de « .sjo-p ». */
.sjo-p__numeral {
	position: absolute;
	top: 0;
	left: var( --sjo-p-gutter );
	z-index: 1;
	margin: 0;
	font-size: clamp( 6.5rem, 18vw, 16rem );
	font-weight: 700;
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 2px var( --sjo-p-numeral );
	transform: translateY( -40% );
	pointer-events: none;
	user-select: none;
}

/* En móvil el numeral se va a la derecha y se recorta contra el borde, que es
   como lo resuelve la maqueta de 390. */
@media ( max-width: 781px ) {
	.sjo-p__numeral {
		left: auto;
		right: -0.25rem;
		font-size: 8.25rem;
		transform: translateY( -18% );
	}
}

/* El rótulo vertical del margen izquierdo. Se gira con transform, no con
   « writing-mode », porque el diseño lo quiere leyéndose de abajo arriba y con
   el tracking abierto: writing-mode giraría también las letras. */
.sjo-p__rotulo {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	width: 16px;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.283em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --sjo-p-rotulo );
	transform-origin: center;
	transform: translate( calc( var( --sjo-p-gutter ) * 0.6 ), -50% ) rotate( -90deg );
	pointer-events: none;
}

@media ( max-width: 781px ) {
	.sjo-p__rotulo {
		transform: translate( 0.6875rem, -50% ) rotate( -90deg );
	}
}

/* Titular de capítulo: el de los capítulos 02, 03 y 08. */
.sjo-p__titular {
	margin: 0;
	font-size: clamp( 1.75rem, 3.6vw, 4rem );
	font-weight: 800;
	line-height: 1.077;
	letter-spacing: -0.031em;
	color: var( --wp--preset--color--azul );
}

.es-oscura .sjo-p__titular,
.es-roja .sjo-p__titular {
	color: var( --wp--preset--color--base );
}

/* Bajada: el párrafo que va debajo del titular. */
.sjo-p__bajada {
	max-width: 38rem;
	margin: 1.5rem 0 0;
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 400;
	line-height: 1.778;
	color: var( --sjo-p-tinta );
}

.es-oscura .sjo-p__bajada,
.es-roja .sjo-p__bajada {
	color: var( --wp--preset--color--azul-tenue );
}

/* ---------------------------------------------------------------------------
 * Botones de la portada
 *
 * El diseño 2026 les da una forma nueva: píldora salvo la esquina inferior
 * izquierda, que se queda casi recta. Se escribe con las cuatro esquinas por
 * separado porque « border-radius » abreviado no admite mezclar píldora y valor
 * fijo sin repetirlo todo.
 *
 * La forma va acotada a « .sjo-p »: el resto del sitio sigue con los botones
 * del UI Kit anterior hasta que se rehagan sus pantallas.
 * ------------------------------------------------------------------------ */

.sjo-p__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	box-sizing: border-box;
	min-height: 54px;
	padding: 0.9375rem 1.625rem 0.9375rem 1.875rem;
	border: 0;
	/* La silueta del botón SANJO: **solo la esquina superior izquierda es
	   recta**; las otras tres van en píldora.

	   En el Figma la inferior izquierda está anotada como 50 px, pero sobre un
	   botón de 42 a 54 px de alto eso es más de la mitad de su altura, así que
	   tanto Figma como el navegador lo recortan a media altura, que es
	   exactamente una píldora. Escribirlo como píldora evita además que el
	   navegador reescale las cuatro esquinas a la vez para que quepan, que es lo
	   que pasa cuando la suma de dos radios de un mismo lado se pasa del alto. */
	border-radius: 0 999px 999px 999px;
	background-color: var( --wp--preset--color--rojo );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.013em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* La flecha entra al pasar el cursor, como pide la descripción del componente
   «Botón · Primario» del Figma. Ocupa sitio desde el principio para que el
   botón no cambie de ancho al señalarlo. */
.sjo-p__boton::after {
	content: "\2192";
	font-size: 1rem;
	font-weight: 500;
	opacity: 0;
	transform: translateX( -0.25rem );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.sjo-p__boton:hover,
.sjo-p__boton:focus-visible {
	background-color: var( --wp--preset--color--rojo-oscuro );
	color: var( --wp--preset--color--base );
}

.sjo-p__boton:hover::after,
.sjo-p__boton:focus-visible::after {
	opacity: 1;
}

/* Contorno: el segundo botón de la apertura y del cierre. */
.sjo-p__boton.es-contorno {
	background-color: transparent;
	border: 1.5px solid rgba( 255, 255, 255, 0.5 );
	padding-inline: 1.875rem;
}

.sjo-p__boton.es-contorno:hover,
.sjo-p__boton.es-contorno:focus-visible {
	background-color: rgba( 255, 255, 255, 0.12 );
	border-color: var( --wp--preset--color--base );
}

/* Blanco sobre rojo: el de «Ver todo el Arte». */
.sjo-p__boton.es-blanco {
	min-height: 48px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--rojo );
}

.sjo-p__boton.es-blanco:hover,
.sjo-p__boton.es-blanco:focus-visible {
	background-color: var( --wp--preset--color--crema );
	color: var( --wp--preset--color--rojo-oscuro );
}

/* Azul: el de «Ver convenios». */
.sjo-p__boton.es-azul {
	min-height: 52px;
	background-color: var( --wp--preset--color--azul );
}

.sjo-p__boton.es-azul:hover,
.sjo-p__boton.es-azul:focus-visible {
	background-color: var( --wp--preset--color--azul-oscuro );
}

/* Enlace con flecha: «Leer noticia», «Conocer Inicial», «Ver todas». */
.sjo-p__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.429;
	letter-spacing: 0.014em;
	color: var( --wp--preset--color--azul );
	text-decoration: none;
}

.sjo-p__enlace::after {
	content: "\2192";
	color: var( --wp--preset--color--rojo );
	transition: transform 0.2s ease;
}

.sjo-p__enlace:hover::after,
.sjo-p__enlace:focus-visible::after {
	transform: translateX( 0.25rem );
}

.es-oscura .sjo-p__enlace {
	color: var( --wp--preset--color--base );
}

.es-oscura .sjo-p__enlace::after {
	color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * Fotografías con corte diagonal
 *
 * El diseño recorta casi todas las fotos con la misma familia de máscaras: una
 * caja de esquinas redondeadas con un corte en diagonal. Se aplica con
 * « mask-image » y el SVG exportado; cada foto dice cuál en « --sjo-mask ».
 *
 * Si el navegador no soporta máscaras la foto se ve entera y rectangular, que
 * es una degradación aceptable: se pierde el corte, no la imagen.
 * ------------------------------------------------------------------------ */

.sjo-foto {
	position: relative;
	display: block;
	overflow: hidden;
	-webkit-mask-image: var( --sjo-mask );
	mask-image: var( --sjo-mask );
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.sjo-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Duotono azul. Son tres capas, como en el diseño: la foto, un multiplicar
   azul y un modo pantalla cálido que le devuelve algo de luz a las sombras. */
/* El duotono es un grupo de mezcla propio.

   Sin « isolation », lo que se funde no es la fotografía sino lo que haya
   detrás, y eso depende de qué capa de composición le toque en cada momento: en
   cuanto una animación promociona la imagen, el color se calcula contra otro
   fondo y el duotono cambia solo. Declarando el grupo, el resultado es siempre
   el mismo. */
.sjo-foto.es-duotono {
	isolation: isolate;
}

.sjo-foto.es-duotono::before,
.sjo-foto.es-duotono::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sjo-foto.es-duotono::before {
	background-color: rgba( 0, 64, 120, 0.88 );
	mix-blend-mode: multiply;
}

.sjo-foto.es-duotono::after {
	background-color: rgba( 255, 219, 204, 0.22 );
	mix-blend-mode: screen;
}

/* ---------------------------------------------------------------------------
 * Apertura
 *
 * El banner es un carrusel de diapositivas, y cada una trae su propio fondo:
 * una fotografía o un vídeo. Encima van los tres velos del diseño —uno plano
 * que baja el contraste general, uno lateral que oscurece por la izquierda para
 * que se lea el titular, y uno inferior que funde con las cifras— y sobre ellos
 * la columna de texto.
 *
 * **La cabecera flota encima.** En la maqueta el banner empieza en el borde
 * superior de la página y la cabecera no tiene fondo: se ve la fotografía a
 * través de ella. De colocarla se encarga el bloque de cabecera; aquí solo hay
 * que dejarle sitio, y de eso se ocupa el relleno superior de la diapositiva.
 *
 * ---------------------------------------------------------------------------
 * Cómo se apilan
 *
 * Todo el banner es una sola casilla de rejilla: las diapositivas, las cifras y
 * los controles ocupan la misma y se ordenan con « z-index ». Así el fondo de
 * la diapositiva llega hasta abajo del todo —también por detrás de las cifras,
 * que en el diseño van al aire sobre la fotografía— sin sacar el vídeo de su
 * diapositiva.
 *
 * Las diapositivas se apilan entre sí con la misma técnica. Mientras no haya
 * JavaScript no se apilan: se ven una debajo de otra, que es lo que tiene que
 * pasar si el archivo no llega a cargar y también dentro del editor.
 * ------------------------------------------------------------------------ */

.sjo-apertura {
	position: relative;
	display: grid;
	box-sizing: border-box;
	/* El banner ocupa la pantalla entera. « svh » y no « vh » ni « dvh »: en un
	   móvil, « vh » cuenta como si la barra del navegador no existiera y recorta
	   el pie del banner, y « dvh » cambia de valor al aparecer y desaparecer esa
	   barra, lo que hace saltar la página al desplazarse. « svh » es la altura
	   con la barra a la vista, que es la única que siempre se ve entera.

	   Es « min-height » y no « height »: si un titular largo o dos botones
	   apilados no caben, el banner crece en vez de cortarlos. */
	min-height: 100vh;
	min-height: 100svh;
	background-color: var( --wp--preset--color--azul-oscuro );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--heading );
	overflow: hidden;
}

.sjo-apertura > * {
	grid-area: 1 / 1;
	min-width: 0;
}

/* Las diapositivas. Sin JavaScript se leen en columna; con él, apiladas. */
.sjo-apertura__slides.tiene-js {
	display: grid;
}

.sjo-apertura__slides.tiene-js > .sjo-apertura__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0.7s;
}

.sjo-apertura__slides.tiene-js > .sjo-apertura__slide.es-activa {
	opacity: 1;
	visibility: visible;
}

.sjo-apertura__slide {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Centrada entre los dos rellenos: arriba el que deja sitio a la cabecera,
	   abajo el que reserva la franja de cifras. Es la relación de la maqueta,
	   donde la columna tiene 182 px por encima y 179 por debajo. */
	justify-content: center;
	box-sizing: border-box;
	/* Arriba, sitio para la cabecera que flota encima; abajo, el aire del
	   diseño. El valor mínimo tiene que superar la cabecera de móvil —cinta de
	   40 px y barra de 88— o el rótulo se metería debajo. */
	padding-block: clamp( 10rem, 14vw, 13rem ) clamp( 2.5rem, 4vw, 3.5rem );
}

/* Cuando hay cifras, la diapositiva les reserva su sitio abajo: van al aire
   sobre la fotografía, no en una franja aparte. */
.sjo-apertura.es-con-cifras .sjo-apertura__slide {
	padding-bottom: clamp( 8rem, 11vw, 10.5rem );
}

/* ---------------------------------------------------------------------------
 * El fondo de cada diapositiva
 * ------------------------------------------------------------------------ */

.sjo-apertura__medio {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sjo-apertura__medio img,
.sjo-apertura__medio video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sjo-apertura__medio::before,
.sjo-apertura__medio::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Velo plano + velo lateral, en una sola capa. */
.sjo-apertura__medio::before {
	background-color: rgba( 0, 42, 80, 0.52 );
	background-image: linear-gradient(
		90deg,
		rgba( 0, 42, 80, 0.95 ) 0%,
		rgba( 0, 42, 80, 0.55 ) 50%,
		rgba( 0, 42, 80, 0 ) 100%
	);
}

/* Velo inferior: arranca a media altura y cierra en casi opaco. */
.sjo-apertura__medio::after {
	top: 42%;
	background-image: linear-gradient(
		180deg,
		rgba( 0, 42, 80, 0 ) 0%,
		rgba( 0, 42, 80, 0.5 ) 55%,
		rgba( 0, 42, 80, 0.94 ) 100%
	);
}

/* ---------------------------------------------------------------------------
 * La columna de texto
 * ------------------------------------------------------------------------ */

.sjo-apertura__interior {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: var( --sjo-p-ancho );
	margin-inline: auto;
	padding-inline: var( --sjo-p-gutter );
}

.sjo-apertura__columna {
	max-width: 43.75rem;
}

.sjo-apertura__etiqueta {
	margin: 0 0 1.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.231;
	letter-spacing: 0.262em;
	text-transform: uppercase;
	color: var( --wp--preset--color--azul-tenue );
}

/* El titular son dos piezas: la primera sólida y la segunda de contorno. */
.sjo-apertura__titular {
	margin: 0;
	font-size: clamp( 2rem, 4.2vw, 4.625rem );
	font-weight: 800;
	line-height: 1.033;
	letter-spacing: -0.027em;
	color: var( --wp--preset--color--base );
}

/* La segunda voz del titular, dibujada solo con el contorno de la letra.
 *
 * Además del tracking —ver la nota del final del archivo—, esta necesita soltar
 * el interlineado. El titular va a 1,033, que para letra sólida es la medida de
 * la maqueta, pero con contorno los trazos de una línea llegan a tocar los de la
 * de abajo y el conjunto se lee como un enredo. A 1,12 las dos líneas respiran
 * sin que el bloque deje de leerse como una sola pieza. */
.sjo-apertura__titular.es-contorno {
	line-height: 1.12;
	color: transparent;
	-webkit-text-stroke: 1.25px rgba( 255, 255, 255, 0.92 );
}

.sjo-apertura__bajada {
	max-width: 32.5rem;
	margin: 2.25rem 0 0;
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 400;
	line-height: 1.778;
	color: var( --wp--preset--color--azul-tenue );
}

.sjo-apertura__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2.375rem 0 0;
}

/* ---------------------------------------------------------------------------
 * Las cifras
 *
 * Son del colegio y no de cada banner: van fuera de las diapositivas y no
 * cambian al pasar de una a otra.
 * ------------------------------------------------------------------------ */

.sjo-apertura__cifras {
	position: relative;
	z-index: 3;
	align-self: end;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem clamp( 1.5rem, 3vw, 3.25rem );
	box-sizing: border-box;
	width: 100%;
	max-width: var( --sjo-p-ancho );
	margin: 0 auto;
	padding: 0 var( --sjo-p-gutter ) clamp( 2.5rem, 4vw, 3.5rem );
	list-style: none;
}

.sjo-apertura__cifra {
	display: grid;
	grid-template-columns: 28px auto;
	column-gap: 0.75rem;
	margin-block: 0;
}

/* El pictograma no es contenido: es la marca de qué cifra es esta. Va de
   fondo, no de <img>, para que quien edita no tenga que elegirlo. */
.sjo-apertura__cifra::before {
	content: "";
	grid-row: 1 / span 2;
	width: 28px;
	height: 28px;
	margin-top: 0.375rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sjo-apertura__numero {
	display: block;
	font-size: clamp( 1.75rem, 2.5vw, 2.25rem );
	font-weight: 700;
	line-height: 1.111;
	letter-spacing: -0.031em;
	color: var( --wp--preset--color--base );
	font-variant-numeric: tabular-nums;
}

.sjo-apertura__etiqueta-cifra {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.455;
	letter-spacing: 0.127em;
	text-transform: uppercase;
	color: rgba( 201, 220, 234, 0.85 );
}

/* ---------------------------------------------------------------------------
 * Los controles del carrusel
 *
 * Los pinta assets/js/banner.js, así que este bloque solo existe en el front.
 * Van abajo a la derecha, a la altura de las cifras.
 * ------------------------------------------------------------------------ */

.sjo-apertura__controles {
	position: relative;
	z-index: 4;
	align-self: end;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: clamp( 2.5rem, 4vw, 3.5rem );
	margin-right: var( --sjo-p-gutter );
}

.sjo-apertura__flechas {
	display: flex;
	gap: 0.5rem;
}

.sjo-apertura__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 999px;
	background-color: rgba( 0, 42, 80, 0.35 );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sjo-apertura__flecha:hover,
.sjo-apertura__flecha:focus-visible {
	background-color: var( --wp--preset--color--rojo );
	border-color: var( --wp--preset--color--rojo );
}

.sjo-apertura__puntos {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Cada punto es un botón de verdad. La barra mide 4 px pero el área de
   pulsación llega a 20, que es lo mínimo cómodo con el dedo. */
.sjo-apertura__punto {
	width: 14px;
	height: 20px;
	padding: 8px 3px;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	transition: width 0.25s ease;
}

.sjo-apertura__punto::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background-color: rgba( 255, 255, 255, 0.4 );
	transition: background-color 0.25s ease;
}

.sjo-apertura__punto[aria-current="true"] {
	width: 24px;
}

.sjo-apertura__punto[aria-current="true"]::before {
	background-color: var( --wp--preset--color--rojo );
}

.sjo-apertura__contador {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: rgba( 201, 220, 234, 0.85 );
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * El banner en pantallas pequeñas
 *
 * El diseño de móvil quita las cifras: no caben sin apretar el titular, que es
 * lo que tiene que leerse primero. Y los dos botones se apilan a todo el ancho.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	/* En móvil la maqueta no centra: baja el bloque de texto y lo apoya cerca
	   del borde inferior, con la fotografía respirando por arriba. */
	.sjo-apertura__slide,
	.sjo-apertura.es-con-cifras .sjo-apertura__slide {
		justify-content: flex-end;
		padding-block: clamp( 9rem, 30vw, 11rem ) 2.5rem;
	}

	.sjo-apertura__acciones {
		flex-direction: column;
		align-items: stretch;
	}

	.sjo-apertura__acciones .sjo-p__boton {
		justify-content: center;
		min-height: 50px;
	}

	.sjo-apertura__cifras {
		display: none;
	}

	/* Sin cifras debajo, los controles se quedan solos abajo a la derecha y hay
	   que devolverles el aire que les daba la franja. */
	.sjo-apertura__controles {
		margin-bottom: 1.5rem;
	}

	.sjo-apertura__flecha {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sjo-apertura__slides.tiene-js > .sjo-apertura__slide {
		transition: none;
	}

	.sjo-apertura__flecha,
	.sjo-apertura__punto,
	.sjo-apertura__punto::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Tira de alianzas
 *
 * Una cinta de logotipos que se desplaza sin fin. La descripción del componente
 * en Figma la define como un ciclo lineal de 10 s sobre una fila periódica: se
 * reproduce duplicando la fila y animando un ciclo exacto, de modo que el salto
 * de vuelta al principio cae en un punto idéntico y no se ve.
 *
 * El desplazamiento es CSS puro. Sin animaciones —o con « prefers-reduced-
 * motion »— la cinta se queda quieta y se puede arrastrar con el dedo.
 * ------------------------------------------------------------------------ */

.sjo-alianzas {
	padding-block: clamp( 2.25rem, 3.5vw, 2.75rem );
	background-color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--heading );
	overflow: hidden;
}

.sjo-alianzas__interior {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --sjo-p-ancho );
	margin-inline: auto;
	padding-inline: var( --sjo-p-gutter );
}

.sjo-alianzas__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	align-items: baseline;
	justify-content: space-between;
}

.sjo-alianzas__titulo {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--azul );
}

.sjo-alianzas__bajada {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.538;
	color: var( --sjo-p-gris, #5a6472 );
}

.sjo-alianzas__cinta {
	margin-top: clamp( 1.5rem, 2.5vw, 2.125rem );
	overflow: hidden;
	/* Los logotipos se desvanecen contra los bordes en vez de cortarse a hachazo. */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
}

.sjo-alianzas__fila {
	display: flex;
	align-items: center;
	gap: clamp( 2.5rem, 6vw, 6rem );
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: sjo-cinta 24s linear infinite;
}

.sjo-alianzas__cinta:hover .sjo-alianzas__fila {
	animation-play-state: paused;
}

.sjo-alianzas__logo {
	flex: 0 0 auto;
	width: clamp( 4.625rem, 11vw, 10rem );
}

.sjo-alianzas__logo img {
	display: block;
	width: 100%;
	height: clamp( 1.625rem, 4vw, 3.5rem );
	object-fit: contain;
}

/* La fila lleva los logotipos dos veces; mover exactamente la mitad deja la
   segunda copia justo donde estaba la primera. */
@keyframes sjo-cinta {
	from {
		transform: translateX( 0 );
	}

	to {
		transform: translateX( -50% );
	}
}

/* ---------------------------------------------------------------------------
/* ---------------------------------------------------------------------------
 * 01 · La fe
 *
 * Crema arriba con la cita y las tres fotografías, y una banda azul abajo con
 * los tres pilares.
 *
 * ---------------------------------------------------------------------------
 * La banda azul va de borde a borde
 *
 * Y por eso es hermana de la sección, no hija del contenedor de contenido: si
 * colgara de él heredaría su ancho máximo y en un monitor ancho se quedaría
 * cortada a los lados, con la crema asomando por fuera. Dentro de la banda, su
 * propia lista vuelve a acotarse a la columna de lectura, que es lo que alinea
 * los pilares con el texto de arriba.
 *
 * ---------------------------------------------------------------------------
 * El racimo de fotografías
 *
 * Las tres van dentro de « .sjo-fe__fotos », una caja de proporción fija que se
 * coloca arriba a la derecha, y dentro de ella cada foto va en porcentaje.
 *
 * Se hizo así porque colocarlas contra la sección no aguanta: la sección crece
 * y mengua con lo que se escriba en la cita, de modo que la foto de más abajo
 * se metía dentro de la banda azul en cuanto el texto ocupaba dos líneas menos.
 * Contra una caja de proporción fija, el racimo conserva su composición mida lo
 * que mida la sección.
 *
 * Las tres son bloques de imagen del editor, como el resto de la sección: se
 * cambian donde se ven, no en un formulario aparte.
 * ------------------------------------------------------------------------ */

.sjo-p--fe {
	padding-bottom: 0;
	background-color: var( --wp--preset--color--crema );
}

.sjo-fe__columna {
	max-width: 41.25rem;
	padding-block: clamp( 1.5rem, 4vw, 4.5rem ) clamp( 3rem, 6vw, 5rem );
}

.sjo-fe__cita {
	margin: 0;
	font-size: clamp( 1.625rem, 5.3vw, 5.875rem );
	font-weight: 800;
	line-height: 1.053;
	letter-spacing: -0.026em;
	color: var( --wp--preset--color--azul );
}

.sjo-fe__atribucion {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.467;
	letter-spacing: 0.027em;
	color: var( --sjo-p-gris );
}

.sjo-fe__atribucion::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background-color: var( --wp--preset--color--rojo );
}

.sjo-fe__bajada {
	max-width: 34.875rem;
	margin: 2.125rem 0 0;
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	line-height: 1.778;
	color: var( --sjo-p-tinta );
}

/* ---------------------------------------------------------------------------
 * La banda de los pilares
 * ------------------------------------------------------------------------ */

.sjo-fe__pilares {
	position: relative;
	z-index: 2;
	margin-block: 0;
	padding-block: clamp( 2.5rem, 5vw, 4.5rem );
	background-color: var( --wp--preset--color--azul );
}

.sjo-fe__lista {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 2rem, 5vw, 5.25rem );
	box-sizing: border-box;
	max-width: var( --sjo-p-ancho );
	margin: 0 auto;
	padding: 0 var( --sjo-p-gutter );
	list-style: none;
}

/* Pictograma a la izquierda y las dos líneas de texto a la derecha.
 *
 * El pictograma ocupa las dos filas de la columna estrecha. Sin ese « span », la
 * rejilla reparte tres elementos en dos columnas y el párrafo cae debajo del
 * pictograma, fuera de su sitio y con el ancho equivocado. */
.sjo-fe__pilar {
	display: grid;
	grid-template-columns: 36px minmax( 0, 1fr );
	column-gap: 1.25rem;
	margin-block: 0;
}

.sjo-fe__pilar::before {
	content: "";
	grid-row: 1 / span 2;
	grid-column: 1;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sjo-fe__pilar h3 {
	grid-column: 2;
	align-self: center;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--base );
}

.sjo-fe__pilar p {
	grid-column: 2;
	margin: 0.625rem 0 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.571;
	color: var( --wp--preset--color--azul-tenue );
}

/* ---------------------------------------------------------------------------
 * Las tres fotografías
 * ------------------------------------------------------------------------ */

.sjo-fe__fotos {
	position: relative;
	/* Por encima de la banda azul, que va en z-index 2: si el racimo llega a
	   tocarla —con una cita larga que lo empuje hacia abajo— tiene que verse
	   entero, no cortado a media foto. */
	z-index: 3;
}

.sjo-fe__fotos .sjo-foto {
	position: absolute;
}

/* Las tres medidas y los tres sitios son los de la maqueta, en porcentaje del
   racimo: la grande arriba a la derecha, la de comunidad abajo a la izquierda y
   la de Chaminade cruzándose con las dos. */
.sjo-fe__foto-1 {
	top: 0;
	left: 31.7%;
	width: 61.5%;
	aspect-ratio: 344 / 399;
	--sjo-mask: url( "../svg/portada/mask-fe-principal.svg" );
}

.sjo-fe__foto-2 {
	top: 47.9%;
	left: 0;
	width: 44.7%;
	aspect-ratio: 250 / 286;
	--sjo-mask: url( "../svg/portada/mask-fe-comunidad.svg" );
}

.sjo-fe__foto-3 {
	top: 69.4%;
	left: 50.6%;
	width: 49.4%;
	aspect-ratio: 276 / 182;
	--sjo-mask: url( "../svg/portada/mask-fe-chaminade.svg" );
}

/* Entrada: las tres suben y se acercan, una detrás de otra. El estado de
   reposo solo se aplica si hay JavaScript, así que sin él se ven puestas. */
.tiene-js .sjo-fe__fotos .sjo-p__anima {
	transform: translateY( 2.25rem ) scale( 0.96 );
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

.tiene-js .sjo-fe__fotos .sjo-p__anima.es-visible {
	transform: none;
}

.sjo-fe__fotos .sjo-p__anima:nth-child( 2 ) {
	transition-delay: 0.14s;
}

.sjo-fe__fotos .sjo-p__anima:nth-child( 3 ) {
	transition-delay: 0.28s;
}

/* El blasón, detrás de todo. */
.sjo-fe__blason {
	position: absolute;
	top: 8%;
	right: -9%;
	width: min( 36vw, 34rem );
	opacity: 0.55;
}

/* ---------------------------------------------------------------------------
 * La sección, a pantalla completa
 *
 * Dos filas: la crema, que se queda con todo lo que sobre, y la banda azul, que
 * mide lo que mida su contenido y se apoya en el borde inferior. Así el capítulo
 * ocupa la pantalla entera sin que nada se estire de más.
 *
 * ---------------------------------------------------------------------------
 * El racimo de fotografías
 *
 * En la maqueta no es un bloque compacto puesto al lado del texto: es una pieza
 * **alta**. Sobre un lienzo de 1440 × 904 va de y=67 a y=662 —arranca por encima
 * de donde empieza la cita y baja hasta meterse en la banda azul— y su borde
 * derecho, 1327, es el mismo que el de la fila de pilares. Es lo que hace que la
 * página se lea como dos columnas y no como un texto con una foto al margen.
 *
 * Por eso se coloca contra la sección y no dentro de la rejilla: la rejilla lo
 * dejaría encerrado en la fila crema, centrado y pequeño.
 *
 * Su medida sale del menor de tres límites, porque tres cosas distintas pueden
 * ser la que aprieta:
 *
 *   38.8vw   la proporción de la maqueta con el ancho de la ventana;
 *   61.8vh   lo mismo con el alto, que es lo que manda en un portátil bajo,
 *            donde si no se saldría por arriba;
 *   47.1%    de la columna de lectura, que es lo que manda en un monitor
 *            ancho, donde la página deja de crecer y el racimo tiene que
 *            quedarse con el texto en vez de irse al filo de la pantalla.
 *
 * Va en « z-index: 3 », por encima de la banda: en la maqueta la cruza 34 px, y
 * si quedara por debajo se vería cortado a media foto.
 * ------------------------------------------------------------------------ */
@media ( min-width: 1024px ) {
	.sjo-p--fe {
		display: grid;
		grid-template-rows: minmax( 0, 1fr ) auto;
		min-height: 100vh;
		min-height: 100svh;
	}

	.sjo-p--fe > .sjo-p__interior {
		grid-row: 1;
		align-self: center;
	}

	.sjo-fe__fotos {
		position: absolute;
		/* 67 de 904, la altura a la que arranca en la maqueta. */
		top: 7.4%;
		/* El borde derecho de la columna de lectura. */
		right: max(
			var( --sjo-p-gutter ),
			calc( ( 100% - var( --sjo-p-ancho ) ) / 2 + var( --sjo-p-gutter ) )
		);
		width: min(
			38.8vw,
			61.8vh,
			calc( ( min( 100%, var( --sjo-p-ancho ) ) - 2 * var( --sjo-p-gutter ) ) * 0.471 )
		);
		aspect-ratio: 559 / 595;
	}

	/* La columna de lectura encoge con el racimo.

	   En « rem » se quedaba con los 660 px de la maqueta de 1440 mientras el
	   racimo se medía en « vw » y se acercaba: su borde izquierdo cae siempre al
	   54,3 % de la ventana, así que por debajo de 1300 la fotografía de la
	   comunidad se montaba sobre la cita. El 53 % es ese 54,3 menos el aire de
	   separación, y por encima de 1446 vuelve a mandar el tope en « rem ». */
	.sjo-fe__columna {
		max-width: min( 41.25rem, 53% );
	}

	.sjo-fe__pilares {
		grid-row: 2;
	}
}

/* ---------------------------------------------------------------------------
 * Por debajo de 1024
 *
 * El blasón y las dos fotografías pequeñas desaparecen —ahí se montarían sobre
 * el texto— y la grande baja a ocupar el ancho de la columna, entre la cita y
 * los pilares, que es donde la pone la maqueta de móvil.
 *
 * No hace falta reordenar nada: en el marcado el racimo ya va entre la columna
 * de texto y la banda, que es el orden de lectura de la maqueta de móvil. En
 * escritorio se saca de ahí colocándolo en absoluto.
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {
	.sjo-fe__fotos {
		position: static;
		width: auto;
		aspect-ratio: auto;
		margin: 0 var( --sjo-p-gutter );
	}

	.sjo-fe__pilares {
		margin-top: clamp( 2.5rem, 6vw, 3.5rem );
	}

	.sjo-fe__lista {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* El blasón se apaga con el selector de la capa de adornos, no con el suyo.

	   « .sjo-p__deco img » le da « display: block » y vale por una clase y un
	   elemento; « .sjo-fe__blason » vale por una clase, y un « @media » no añade
	   especificidad. Escrito a secas, la regla no ganaba y el blasón se seguía
	   dibujando por detrás de la cita en tableta, que es justo lo que este
	   bloque quiere evitar. */
	.sjo-p__deco img.sjo-fe__blason,
	.sjo-fe__foto-2,
	.sjo-fe__foto-3 {
		display: none;
	}

	.sjo-fe__foto-1 {
		position: static;
		width: 100%;
		aspect-ratio: 326 / 210;
	}
}


.sjo-p--aula {
	/* El pie de la sección, en una variable: la banda diagonal lo necesita para
	   saber cuánto tiene que bajar por debajo del bloque de niveles y llegar al
	   borde. */
	--sjo-aula-pie: clamp( 5rem, 10vw, 9rem );

	background-color: var( --wp--preset--color--azul );
	padding-bottom: var( --sjo-aula-pie );
}

.sjo-aula__cabecera {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: clamp( 2rem, 4vw, 3rem );
	justify-content: space-between;
	align-items: start;
}

/* La regla de edades: el raíl, los tres tramos y las marcas de año. Se dibuja
   con la rejilla y no con posiciones absolutas, así que se estira sin
   descuadrarse. */
.sjo-aula__regla {
	align-self: end;
	max-width: 37.5rem;
}

.sjo-aula__regla-rotulo {
	margin: 0 0 2.375rem;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.273;
	letter-spacing: 0.145em;
	text-transform: uppercase;
	color: rgba( 201, 220, 234, 0.6 );
}

.sjo-aula__rail {
	position: relative;
	height: 8px;
	border-radius: 1px;
	background-color: rgba( 255, 255, 255, 0.22 );
}

/* Los tres tramos, en porcentaje sobre los trece años de escolaridad. */
.sjo-aula__tramo {
	position: absolute;
	top: 0;
	height: 8px;
	background-color: var( --wp--preset--color--base );
	transition: background-color 0.25s ease, height 0.25s ease, top 0.25s ease;
}

.sjo-aula__tramo.es-inicial {
	left: 0;
	width: 15.385%;
}

.sjo-aula__tramo.es-primaria {
	left: 23.077%;
	width: 38.462%;
}

.sjo-aula__tramo.es-secundaria {
	left: 69.231%;
	width: 30.769%;
}

.sjo-aula__anios {
	display: grid;
	grid-template-columns: repeat( 14, 1fr );
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.sjo-aula__anio {
	position: relative;
	padding-top: 0.875rem;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.273;
	letter-spacing: 0.036em;
	color: rgba( 255, 255, 255, 0.45 );
	transform: translateX( -50% );
}

.sjo-aula__anio::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	width: 1px;
	height: 7px;
	background-color: rgba( 255, 255, 255, 0.35 );
}

/* Los años que abren o cierran un tramo van marcados en rojo. */
.sjo-aula__anio.es-hito {
	font-weight: 600;
	color: rgba( 255, 255, 255, 0.95 );
}

.sjo-aula__anio.es-hito::before {
	height: 12px;
	background-color: var( --wp--preset--color--rojo );
}

/* La primera y la última marca se pegan al borde del raíl. */
.sjo-aula__anio:first-child {
	transform: none;
}

.sjo-aula__anio:first-child::before {
	left: 0;
}

.sjo-aula__anio:last-child {
	transform: translateX( -100% );
}

.sjo-aula__anio:last-child::before {
	left: auto;
	right: 0;
}

.sjo-aula__niveles {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 1.5rem, 4vw, 3.125rem );
	margin: clamp( 3rem, 6vw, 6rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-aula__nivel {
	display: flex;
	flex-direction: column;
}

/* El escalonado del diseño: cada columna arranca 28 px más arriba que la
   anterior. Es puramente visual, así que se apaga en cuanto no hay tres. */
@media ( min-width: 1024px ) {
	.sjo-aula__nivel:nth-child( 2 ) {
		margin-top: -1.75rem;
	}

	.sjo-aula__nivel:nth-child( 3 ) {
		margin-top: -3.5rem;
	}
}

.sjo-aula__foto {
	width: 100%;
	aspect-ratio: 380 / 300;
	--sjo-mask: url( "../svg/portada/mask-nivel.svg" );
	transition: transform 0.35s ease;
}

.sjo-aula__nivel:hover .sjo-aula__foto {
	transform: scale( 1.03 );
}

.sjo-aula__nombre {
	margin: 2.25rem 0 0;
	font-size: clamp( 1.375rem, 1.8vw, 1.625rem );
	font-weight: 600;
	line-height: 1.231;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--base );
}

.sjo-aula__meta {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.538;
	letter-spacing: 0.031em;
	color: var( --wp--preset--color--azul-tenue );
}

/* El margen de abajo garantiza el aire con el botón. El « margin-top: auto »
   del botón lo empuja al pie de la columna cuando sobra sitio, pero cuando no
   sobra vale cero y sin esto se quedarían pegados. */
.sjo-aula__texto {
	margin: 0.875rem 0 1.5rem;
	font-size: 0.875rem;
	line-height: 1.571;
	color: var( --wp--preset--color--azul-tenue );
}

/* El enlace del nivel no es un enlace con flecha que se pone rojo: es un botón
 * que se enciende.
 *
 * Lleva puesto el relleno del botón desde el principio y en reposo va sin
 * fondo, de modo que al señalar el nivel solo cambian el color y el fondo. Si
 * el relleno apareciera al señalar, la columna crecería de golpe y con ella la
 * fila entera de la rejilla: las tres columnas darían un salto.
 *
 * El margen negativo compensa ese relleno para que en reposo el rótulo quede a
 * plomo con el texto de encima; al encenderse, la píldora asoma un poco por la
 * izquierda, que es lo que la hace leerse como un botón que sale. */
.sjo-aula__nivel .sjo-p__enlace {
	margin-top: auto;
	align-self: flex-start;
	margin-left: -1.125rem;
	padding: 0.6875rem 1.125rem;
	border-radius: 0 999px 999px 999px;
	background-color: transparent;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sjo-aula__nivel:hover .sjo-p__enlace,
.sjo-aula__nivel:focus-within .sjo-p__enlace {
	background-color: var( --wp--preset--color--rojo );
	color: var( --wp--preset--color--base );
}

/* La flecha va en rojo por defecto; sobre el rojo del botón tiene que ser
   blanca como el rótulo. */
.sjo-aula__nivel:hover .sjo-p__enlace::after,
.sjo-aula__nivel:focus-within .sjo-p__enlace::after {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * La regla se pinta en el tramo del nivel señalado
 *
 * Lo dice la descripción del componente en Figma: «al pasar el cursor por una
 * columna se colorea su tramo de la regla». El tramo además engorda un poco,
 * creciendo hacia los dos lados desde el centro del raíl.
 *
 * La regla y las columnas viven en ramas distintas del marcado, así que se
 * enlazan con « :has() » sobre la sección, que es el ancestro común. La
 * correspondencia es por posición —primera columna, primer tramo— y eso vale
 * porque los tramos son tres y fijos, y el campo de niveles está limitado a
 * tres. Donde « :has() » no exista, sencillamente no se pinta.
 * ------------------------------------------------------------------------ */

.sjo-p--aula:has( .sjo-aula__nivel:nth-child( 1 ):hover ) .sjo-aula__tramo.es-inicial,
.sjo-p--aula:has( .sjo-aula__nivel:nth-child( 1 ):focus-within ) .sjo-aula__tramo.es-inicial,
.sjo-p--aula:has( .sjo-aula__nivel:nth-child( 2 ):hover ) .sjo-aula__tramo.es-primaria,
.sjo-p--aula:has( .sjo-aula__nivel:nth-child( 2 ):focus-within ) .sjo-aula__tramo.es-primaria,
.sjo-p--aula:has( .sjo-aula__nivel:nth-child( 3 ):hover ) .sjo-aula__tramo.es-secundaria,
.sjo-p--aula:has( .sjo-aula__nivel:nth-child( 3 ):focus-within ) .sjo-aula__tramo.es-secundaria {
	top: -3px;
	height: 14px;
	background-color: var( --wp--preset--color--rojo );
}

/* ---------------------------------------------------------------------------
 * La banda diagonal
 *
 * Nace abajo y sube en diagonal hasta cruzar por detrás de las fotografías de
 * los niveles.
 *
 * **Va atada al bloque de niveles, no al alto de la sección.** Atada a la
 * sección no funciona: si alguien escribe una descripción de una línea más, la
 * sección crece, y un porcentaje de ese alto se va hacia abajo dejando la
 * diagonal muy por debajo de las fotografías. Colgando del bloque de niveles, el
 * borde cruza las fotos escriba quien escriba lo que escriba.
 *
 * La diagonal se dibuja con « clip-path » y no con el SVG que exportó el Figma.
 * El SVG hay que estirarlo para llenar su caja, y al estirarlo cambia el ángulo;
 * con un recorte en « vw » la inclinación es siempre la misma —70 px de caída
 * sobre 1440 de ancho, que es la del diseño— mida lo que mida la banda. Y es una
 * descarga menos.
 * ------------------------------------------------------------------------ */

/* El corte se abre en 782 y no en 1024: entre esos dos anchos los niveles
   siguen siendo tres columnas con su fotografía, así que la diagonal también
   tiene que cruzarlas. Por debajo de 782 la lista se vuelve carrusel —flexible—
   y un pseudoelemento se convertiría en una tarjeta más, así que ahí manda la
   franja de « .sjo-aula__banda ». */
@media ( min-width: 782px ) {
	.sjo-aula__niveles {
		position: relative;
	}

	.sjo-aula__niveles::before {
		content: "";
		position: absolute;
		/* Medido sobre el sitio: a 37 % del bloque de niveles el borde entra por
		   la parte baja de las fotografías, que es donde lo pone la maqueta. */
		top: 37%;
		left: 50%;
		width: 100vw;
		/* Baja hasta el borde de la sección, ni un píxel menos.

		   Estaba con un alto fijo y ahí quedaba el fallo: donde acababa la banda
		   volvía a verse el azul base de la sección, en una franja al pie. Como
		   esto cuelga del bloque de niveles y la sección sigue un poco más abajo
		   —lo que mida su relleno inferior—, se ancla el pie a esa misma medida en
		   negativo y no queda nada sin tapar. */
		/* Se pasa de largo a propósito: una pantalla entera por debajo del bloque
		   de niveles, y de recortarla se encarga el « overflow: hidden » de la
		   sección.

		   Antes bajaba justo el relleno del pie, y eso solo vale si el bloque de
		   niveles acaba pegado al final del contenido. Al repartir el sobrante
		   arriba y abajo para que la sección ocupara una pantalla, dejó de acabar
		   ahí: bajo la banda reaparecía el azul base en una franja. Sobrando, no
		   puede faltar. */
		bottom: -100vh;
		transform: translateX( -50% );
		background-color: var( --wp--preset--color--azul-oscuro );
		clip-path: polygon( 0 4.86vw, 100% 0, 100% 100%, 0 100% );
	}

	/* Las columnas, por delante de la diagonal. */
	.sjo-aula__nivel {
		position: relative;
		z-index: 1;
	}

	/* De 782 para arriba manda la de arriba; la franja es la de móvil. */
	.sjo-aula__banda {
		display: none;
	}
}

/* En pantallas pequeñas no hay fotografías a las que llegar —las tarjetas del
   carrusel son solo texto— y la lista es un carrusel flexible, donde un
   pseudoelemento se convertiría en una tarjeta más. Así que ahí la banda sigue
   siendo lo que es en la maqueta de móvil: una franja baja que cose con la
   sección siguiente, dibujada igual con « clip-path ». */
.sjo-aula__banda {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: clamp( 3rem, 15vw, 6rem );
	background-color: var( --wp--preset--color--azul-oscuro );
	clip-path: polygon( 0 4.86vw, 100% 0, 100% 100%, 0 100% );
}

/* La sección ya no fuerza la proporción de la maqueta.

   Estaba puesta cuando la banda se medía en porcentaje del alto de la sección;
   ahora la banda cuelga del bloque de niveles, así que ese alto mínimo solo
   podía sobrar por abajo: dejaba un tramo de azul claro por debajo de donde
   acaba la diagonal. La sección mide lo que mide su contenido. */

@media ( max-width: 1023px ) {
	.sjo-aula__cabecera {
		grid-template-columns: 1fr;
	}

	.sjo-aula__regla {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 03 · Nuestra propuesta
 *
 * Cuatro pilares. Cada uno es fotografía arriba y tarjeta debajo, y **el pilar
 * entero es una sola pieza**: la tarjeta monta sobre el pie de la fotografía, de
 * modo que entre las dos no queda costura, y las dos reaccionan a la vez cuando
 * se las señala.
 *
 * Al señalar un pilar pasan tres cosas, y las tres a la vez para que se lean
 * como una sola: la tarjeta se pone roja —como dice la descripción del
 * componente en Figma—, sobre la fotografía baja un degradado del mismo rojo, y
 * el conjunto crece un punto y medio.
 *
 * El gobierno del señalado está en el « li » y no en el enlace: si estuviera en
 * el enlace, pasar el cursor por la fotografía no encendería nada, y la
 * fotografía es la mitad de la pieza. Con « :focus-within » se consigue lo mismo
 * llegando con el teclado.
 * ------------------------------------------------------------------------ */

.sjo-p--propuesta {
	background-color: var( --wp--preset--color--base );
}

.sjo-propuesta__lista {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 1rem, 1.4vw, 1.25rem );
	margin: clamp( 3rem, 6vw, 6.5rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-propuesta__pilar {
	position: relative;
	display: flex;
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

/* Crece y se despega al señalarla. Es la señal de que la tarjeta lleva a otra
   página: si se enciende pero no se mueve, parece decoración. */
.sjo-propuesta__pilar:hover,
.sjo-propuesta__pilar:focus-within {
	transform: scale( 1.035 ) translateY( -6px );
}

/* El enlace envuelve la pieza entera: fotografía y tarjeta.
 *
 * Y lleva la silueta del conjunto: esquina superior izquierda recta —como la
 * fotografía— y las otras tres redondeadas a 48, que es el radio del diseño.
 *
 * De aquí cuelga la sombra, y no del elemento de lista.
 *
 * Estaba en el « li », que es un rectángulo sin redondear, así que al crecer la
 * pieza la sombra asomaba por fuera de las esquinas curvas: cuatro puntas
 * cuadradas donde no debía haber ninguna. Una sombra tiene que salir de la
 * misma forma a la que acompaña. */
.sjo-propuesta__enlace {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	border-radius: 0 48px 48px 48px;
	/* Recorta lo que se salga por las curvas: sin esto, al escalar la pieza
	   asoma un filo de la fotografía por la esquina de arriba. */
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.3s ease;
}

.sjo-propuesta__pilar:hover .sjo-propuesta__enlace,
.sjo-propuesta__pilar:focus-within .sjo-propuesta__enlace {
	box-shadow: 0 22px 44px rgba( 0, 41, 79, 0.18 );
}

.sjo-propuesta__foto {
	width: 100%;
	aspect-ratio: 295 / 250;
	--sjo-mask: url( "../svg/portada/mask-propuesta.svg" );
}

/* El pie de la fotografía se disuelve en el color de la tarjeta.

   Sin esto, por muy pegadas que estén, entre las dos hay un cambio de color de
   golpe y eso se lee como una línea que marca la unión. Con el degradado la
   fotografía se apaga hacia el celeste y no hay borde que ver. */
.sjo-propuesta__foto::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 42%;
	background-image: linear-gradient(
		180deg,
		rgba( 167, 198, 221, 0 ) 0%,
		rgba( 167, 198, 221, 0.55 ) 58%,
		var( --wp--preset--color--celeste ) 100%
	);
	transition: opacity 0.25s ease;
	pointer-events: none;
}

/* Al señalar el pilar, el que manda es el rojo: el celeste se retira. */
.sjo-propuesta__pilar:hover .sjo-propuesta__foto::before,
.sjo-propuesta__pilar:focus-within .sjo-propuesta__foto::before {
	opacity: 0;
}

/* El degradado rojo que baja sobre la fotografía al señalar el pilar. Arranca
   transparente arriba y cierra abajo, contra la tarjeta, que a esas alturas ya
   es roja: así las dos mitades se funden en vez de encontrarse en una línea. */
.sjo-propuesta__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		rgba( 224, 0, 38, 0 ) 0%,
		rgba( 224, 0, 38, 0.35 ) 55%,
		rgba( 224, 0, 38, 0.85 ) 100%
	);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.sjo-propuesta__pilar:hover .sjo-propuesta__foto::after,
.sjo-propuesta__pilar:focus-within .sjo-propuesta__foto::after {
	opacity: 1;
}

/* La tarjeta es un enlace de bloque: toda ella se puede pulsar.
 *
 * Sube doce píxeles sobre el pie de la fotografía y, encima de eso, entra en
 * ella con una cuña en diagonal —el « ::before » de más abajo—. La unión deja de
 * ser una línea recta y pasa a ser el mismo corte inclinado que usa el diseño en
 * la banda del capítulo 02 y en las máscaras de las fotografías.
 *
 * La cuña va en un pseudoelemento y no recortando la tarjeta con « clip-path »
 * porque un recorte se llevaría por delante las esquinas redondeadas de abajo:
 * un polígono no las tiene. */
.sjo-propuesta__tarjeta {
	position: relative;
	z-index: 1;
	display: block;
	flex: 1 1 auto;
	margin-top: -0.75rem;
	padding: 2rem 1.75rem;
	border-radius: 0 0 48px 48px;
	background-color: var( --wp--preset--color--celeste );
	color: var( --wp--preset--color--azul );
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sjo-propuesta__pilar:hover .sjo-propuesta__tarjeta,
.sjo-propuesta__pilar:focus-within .sjo-propuesta__tarjeta {
	background-color: var( --wp--preset--color--rojo );
	color: var( --wp--preset--color--base );
}

/* La cuña que mete la tarjeta dentro de la fotografía.

   « background-color: inherit » hace que siga el color de la tarjeta sin
   repetirlo: cuando la tarjeta se pone roja al señalarla, la cuña también. */
.sjo-propuesta__tarjeta::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	/* Un píxel de más y un píxel de solape con la tarjeta: sin eso, con alturas
	   fraccionarias el navegador deja una costura de medio píxel entre la cuña y
	   la tarjeta, y esa costura se ve. */
	height: calc( min( 1.1vw, 20px ) + 1px );
	margin-bottom: -1px;
	background-color: inherit;
	/* Triángulo apoyado en el lado derecho: la unión sube hacia la derecha, en
	   el mismo sentido que la banda diagonal del capítulo 02. */
	clip-path: polygon( 100% 0, 100% 100%, 0 100% );
}

.sjo-propuesta__tarjeta h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: -0.011em;
	color: inherit;
}

.sjo-propuesta__tarjeta p {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.538;
	color: inherit;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * El hueco a la derecha del titular
 *
 * El encabezado se queda apilado —titular y debajo bajada—: se probó a pasar la
 * bajada a una segunda columna y no se lee bien un párrafo largo ahí al lado.
 *
 * El hueco se llena con una pieza del vocabulario del propio diseño: tres aros
 * de contorno con un nodo dentro, que es lo mismo que hay en la constelación del
 * capítulo 06 y en el aro del 04. Dibujado con borde y radio, sin SVG.
 *
 * Va muy tenue a propósito. Debajo hay cuatro fotografías y cuatro tarjetas que
 * se encienden en rojo al señalarlas: lo de arriba tiene que acompañar, no
 * competir.
 * ------------------------------------------------------------------------ */

.sjo-propuesta__aros {
	position: absolute;
	/* Centrado justo fuera de la esquina superior derecha, de modo que solo se
	   ve el cuadrante que entra en la página. */
	top: -14%;
	right: -8%;
	width: min( 34%, 30rem );
	aspect-ratio: 1;
}

.sjo-propuesta__aro {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	border: 1px solid rgba( 0, 64, 120, 0.12 );
	border-radius: 50%;
	transform: translate( -50%, -50% );
}

.sjo-propuesta__aro:nth-child( 1 ) {
	width: 100%;
}

.sjo-propuesta__aro:nth-child( 2 ) {
	width: 68%;
}

.sjo-propuesta__aro:nth-child( 3 ) {
	width: 40%;
}

/* El nodo rojo en el centro: el mismo acento que marca Trujillo en la
   constelación. Es el único punto de color de la parte de arriba. */
.sjo-propuesta__nodo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--rojo );
	opacity: 0.55;
	transform: translate( -50%, -50% );
}

/* Por debajo de 1024 no hay hueco que llenar: el titular ocupa el ancho. */
@media ( max-width: 1023px ) {
	.sjo-propuesta__aros {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sjo-propuesta__pilar {
		transition: none;
	}

	.sjo-propuesta__pilar:hover,
	.sjo-propuesta__pilar:focus-within {
		transform: none;
	}
}

@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.sjo-propuesta__lista {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ---------------------------------------------------------------------------
 * 04 · La huella
 *
 * Texto a la izquierda y cuatro fichas blancas ligeramente giradas, con dos
 * fotos en duotono y dos adornos —el aro y el cuadro rojo— a la derecha.
 *
 * El giro y el solape de las fichas son de escritorio. Debajo de 1024 vuelven a
 * ser una lista recta, y en móvil un carrusel.
 * ------------------------------------------------------------------------ */

.sjo-p--huella {
	background-color: var( --wp--preset--color--crema );
}

.sjo-huella__columna {
	max-width: 30.625rem;
}

.sjo-huella__titular {
	margin: 0;
	font-size: clamp( 1.75rem, 3.2vw, 3.5rem );
	font-weight: 800;
	line-height: 1.087;
	letter-spacing: -0.035em;
	color: var( --wp--preset--color--azul );
}

.sjo-huella__bajada {
	max-width: 29.375rem;
	margin: 1.375rem 0 0;
	font-size: clamp( 1rem, 1.4vw, 1.25rem );
	line-height: 1.6;
	color: var( --sjo-p-tinta );
}

.sjo-huella__fichas {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 15rem ) );
	gap: 1.75rem;
	margin: clamp( 2.5rem, 5vw, 3.5rem ) 0 0;
	padding: 0;
	list-style: none;
}

/* El elemento de lista lleva el sitio: el giro del montón y el movimiento al
   señalarlo. */
.sjo-huella__pieza {
	position: relative;
	display: flex;
	transition: transform 0.25s ease;
}

/* «Al pasar el cursor la tarjeta sube 14 px y la sombra se abre», dice la
   descripción de la ficha en Figma. Además se endereza y crece un poco: son
   fichas que llevan a otra página, y eso hay que decirlo. */
.sjo-huella__pieza:hover,
.sjo-huella__pieza:focus-within {
	transform: translateY( -14px ) scale( 1.04 );
	z-index: 2;
}

/* Y la ficha lleva la caja. Separar las dos cosas es lo que permite que la
   sombra salga de la forma de la ficha y no del rectángulo que la contiene. */
.sjo-huella__ficha {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
	padding: 1.25rem 1.375rem;
	border: 1px solid rgba( 0, 64, 120, 0.14 );
	background-color: var( --wp--preset--color--base );
	box-shadow: 0 8px 22px 0 rgba( 0, 41, 79, 0.12 );
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.25s ease;
}

.sjo-huella__pieza:hover .sjo-huella__ficha,
.sjo-huella__pieza:focus-within .sjo-huella__ficha {
	box-shadow: 0 18px 34px 0 rgba( 0, 41, 79, 0.18 );
}

.sjo-huella__ficha img {
	width: 26px;
	height: 26px;
}

.sjo-huella__ficha h3 {
	margin: 0.875rem 0 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: -0.011em;
	color: var( --wp--preset--color--azul );
}

.sjo-huella__ficha p {
	margin: 0.375rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --sjo-p-gris );
}

/* El desorden estudiado del diseño: cada ficha con su giro y su desplazamiento.
   Solo en escritorio, y solo para las cuatro primeras. */
@media ( min-width: 1024px ) {
	.sjo-huella__pieza:nth-child( 1 ) {
		transform: rotate( 4deg );
	}

	.sjo-huella__pieza:nth-child( 2 ) {
		transform: rotate( -3deg ) translateY( -0.75rem );
	}

	.sjo-huella__pieza:nth-child( 3 ) {
		transform: rotate( -2deg ) translate( 0.75rem, 0.5rem );
	}

	.sjo-huella__pieza:nth-child( 4 ) {
		transform: rotate( 3deg );
	}

	/* La segunda fila sube y se mete un poco bajo la primera: en la maqueta las
	   cuatro fichas son un montón, no una rejilla, y se solapan. Sin esto queda
	   un hueco muerto entre las dos filas y otro debajo. */
	.sjo-huella__pieza:nth-child( n + 3 ) {
		margin-top: -1rem;
	}

	.sjo-huella__pieza:nth-child( 1 ):hover,
	.sjo-huella__pieza:nth-child( 2 ):hover,
	.sjo-huella__pieza:nth-child( 3 ):hover,
	.sjo-huella__pieza:nth-child( 4 ):hover,
	.sjo-huella__pieza:nth-child( 1 ):focus-within,
	.sjo-huella__pieza:nth-child( 2 ):focus-within,
	.sjo-huella__pieza:nth-child( 3 ):focus-within,
	.sjo-huella__pieza:nth-child( 4 ):focus-within {
		transform: translateY( -14px ) scale( 1.04 );
	}
}

/* ---------------------------------------------------------------------------
 * Las tres fotografías
 *
 * Van las tres dentro de « .sjo-huella__fotos », que en escritorio se estira
 * sobre el contenedor de contenido. Así las tres se miden contra la misma caja
 * y guardan entre ellas la relación de la maqueta.
 *
 * **El racimo tiene proporción fija**, y los porcentajes de cada fotografía son
 * de él, no del contenedor. Estaban referidos al contenedor y ahí quedaba el
 * fallo: ese contenedor crece con lo que se escriba, y al crecer separaba las
 * tres fotografías unas de otras hasta deshacer la composición del Figma.
 *
 * La caja del racimo son las coordenadas de la maqueta: de x=630 a x=1360 y de
 * y=112 a y=804 sobre un lienzo de 1440, o sea 730 × 692.
 * ------------------------------------------------------------------------ */

.sjo-huella__fotos .sjo-foto {
	position: absolute;
}

.sjo-huella__foto-1 {
	top: 0;
	left: 45.2%;
	width: 54.8%;
	aspect-ratio: 400 / 480;
	--sjo-mask: url( "../svg/portada/mask-huella-cancha.svg" );
}

.sjo-huella__foto-2 {
	top: 23.4%;
	left: 0;
	width: 45.2%;
	aspect-ratio: 330 / 216;
	--sjo-mask: url( "../svg/portada/mask-huella-jornada.svg" );
}

.sjo-huella__foto-3 {
	top: 61.3%;
	left: 13.7%;
	width: 36.7%;
	aspect-ratio: 1;
	--sjo-mask: url( "../svg/portada/mask-huella-comunidad.svg" );
}

/* Entrada escalonada, como en el capítulo 01. */
.tiene-js .sjo-huella__fotos .sjo-p__anima {
	transform: translateY( 2.25rem ) scale( 0.96 );
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

.tiene-js .sjo-huella__fotos .sjo-p__anima.es-visible {
	transform: none;
}

.sjo-huella__fotos .sjo-p__anima:nth-child( 2 ) {
	transition-delay: 0.14s;
}

.sjo-huella__fotos .sjo-p__anima:nth-child( 3 ) {
	transition-delay: 0.28s;
}

/* Los dos adornos del tema, contra la sección. Son una circunferencia y un
   cuadrado girado: se dibujan con borde y con « transform », no con SVG. */
.sjo-huella__aro {
	position: absolute;
	top: 68.7%;
	left: 85.4%;
	width: 25%;
	aspect-ratio: 1;
	border: 1.5px solid rgba( 0, 64, 120, 0.16 );
	border-radius: 50%;
}

.sjo-huella__cuadro {
	position: absolute;
	top: 57.6%;
	left: 87.9%;
	width: 9.17%;
	aspect-ratio: 1;
	background-color: var( --wp--preset--color--rojo );
	transform: rotate( 14deg );
}

/* En escritorio el racimo se estira sobre el contenedor de contenido, que toma
   la proporción de la maqueta: 902 de alto menos el aire de arriba y de abajo,
   sobre 1440 de ancho. Es lo que hace que los porcentajes de las tres
   fotografías signifiquen lo que significan en el Figma. */
@media ( min-width: 1024px ) {
	.sjo-p--huella > .sjo-p__interior {
		position: relative;
	}

	.sjo-huella__fotos {
		position: absolute;
		/* El racimo arranca al 12,4 % del alto de la sección, que es donde lo pone
		   la maqueta —112 de 902—. Se descuenta el aire porque el racimo cuelga del
		   contenedor, que empieza justo después de él. */
		top: calc( 12.4vh - var( --sjo-p-cabeza ) );
		left: 43.75%;
		/* El menor de los dos límites, como en las palabras del capítulo 05: en una
		   pantalla ancha y baja manda el alto, o el racimo no cabría. */
		width: min( 50.7%, 80.9vh );
		aspect-ratio: 730 / 692;
		z-index: 1;
		pointer-events: none;
	}

	/* La columna de texto y las fichas, por delante del racimo. */
	.sjo-huella__columna,
	.sjo-huella__fichas {
		position: relative;
		z-index: 2;
	}

	/* Y encogiendo con él, por lo mismo que en el capítulo 01: el racimo se mide
	   en porcentaje de la sección —su borde izquierdo está siempre en el 44,7 %
	   y la fotografía de comunidad, la más adelantada, en el 52,6 %— mientras la
	   columna y las fichas medían en « rem » lo que miden en un lienzo de 1440.
	   Por debajo de 1200 la bajada se metía debajo de la jornada y la ficha de
	   « Houses » debajo de la comunidad. */
	.sjo-huella__columna {
		max-width: min( 30.625rem, 40% );
	}

	/* Las dos fichas se reparten el hueco que queda, en vez de medir 15 rem
	   cada una pase lo que pase. 31,75 rem son las dos columnas de la maqueta
	   más su hueco: por encima de 1440 nada cambia. */
	.sjo-huella__fichas {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		max-width: min( 31.75rem, 49% );
	}
}

@media ( max-width: 1023px ) {
	.sjo-huella__fichas {
		grid-template-columns: 1fr;
	}

	.sjo-huella__foto-2,
	.sjo-huella__foto-3,
	.sjo-huella__cuadro {
		display: none;
	}

	.sjo-huella__fotos .sjo-foto {
		position: static;
	}

	.sjo-huella__foto-1 {
		display: block;
		width: 100%;
		aspect-ratio: 326 / 200;
		margin-block: 2rem 0;
	}

	.sjo-huella__aro {
		top: 1rem;
		left: auto;
		right: -3rem;
		width: 9.375rem;
	}
}

/* ---------------------------------------------------------------------------
 * 05 · El escenario
 *
 * La sección roja. Los cinco lenguajes artísticos van en una columna de
 * palabras que se pisan entre sí: unas sólidas, una rellena con una fotografía
 * y dos de contorno.
 *
 * En la maqueta cada palabra está en su coordenada. Aquí van en flujo con
 * márgenes negativos: mantienen el solape y siguen siendo texto de verdad
 * —seleccionable, traducible y legible por un lector de pantalla—.
 * ------------------------------------------------------------------------ */

.sjo-p--escenario {
	background-color: var( --wp--preset--color--rojo );
	color: var( --wp--preset--color--base );
}

.sjo-escenario__titular {
	max-width: 38.75rem;
	margin: 0;
	font-size: clamp( 1.625rem, 3.2vw, 3.5rem );
	font-weight: 800;
	line-height: 1.087;
	letter-spacing: -0.026em;
	color: var( --wp--preset--color--base );
}

.sjo-escenario__acciones {
	margin-top: 1.75rem;
}

.sjo-escenario__lenguajes {
	margin: clamp( 1.5rem, 3vw, 2.5rem ) 0 0;
	padding: 0;
	list-style: none;
	font-weight: 800;
	letter-spacing: -0.038em;
	line-height: 1.02;
}

.sjo-escenario__lenguaje {
	margin: 0;
	color: var( --wp--preset--color--base );
	white-space: nowrap;
}

/* Los cinco tamaños y desplazamientos de la maqueta, en proporción al ancho de
   la ventana para que el solape aguante en cualquier pantalla. */
.sjo-escenario__lenguaje:nth-child( 1 ) {
	font-size: max( 2.5rem, min( 7.2vw, 11.5vh ) );
}

.sjo-escenario__lenguaje:nth-child( 2 ) {
	margin-left: clamp( 1.5rem, 10.4vw, 11.5rem );
	margin-top: -0.15em;
	font-size: max( 2.875rem, min( 9.9vw, 15.8vh ) );
	color: transparent;
	background-image: url( "../img/portada/escenario-teatro.png" );
	background-size: cover;
	background-position: center;
	-webkit-background-clip: text;
	background-clip: text;
}

.sjo-escenario__lenguaje:nth-child( 3 ) {
	margin-left: 0;
	margin-top: -0.18em;
	font-size: max( 3.5rem, min( 12.6vw, 20vh ) );
	letter-spacing: 0;
	color: transparent;
	-webkit-text-stroke: 2px rgba( 255, 255, 255, 0.9 );
}

/* «Música» arranca a los 676 px de la maqueta sobre un lienzo de 1440, que son
   40vw. Estaba en 46,9 y se iba cien píxeles a la derecha. */
.sjo-escenario__lenguaje:nth-child( 4 ) {
	margin-left: 40vw;
	margin-top: -0.3em;
	font-size: max( 2.25rem, min( 6.6vw, 10.5vh ) );
}

/* «Artes plásticas» empezaba seis píxeles antes de que acabara «Música»: las dos
   se tocaban y la de arriba se quedaba sin aire por debajo. Ahora baja lo justo
   para que entre ellas quede un respiro. */
.sjo-escenario__lenguaje:nth-child( 5 ) {
	margin-top: 0.1em;
	font-size: max( 1.125rem, min( 3.7vw, 5.9vh ) );
	letter-spacing: 0;
	color: transparent;
	-webkit-text-stroke: 1.2px rgba( 255, 255, 255, 0.9 );
}

/* Telones y pictograma: los adornos de la sección. */
.sjo-escenario__telon-1 {
	position: absolute;
	left: -20%;
	bottom: -18%;
	width: 108%;
	height: 66%;
	background-color: var( --wp--preset--color--granate );
	transform: rotate( 7deg );
}

.sjo-escenario__telon-2 {
	position: absolute;
	top: -28%;
	right: -12%;
	width: 39%;
	height: 140%;
	background-color: rgba( 156, 0, 27, 0.55 );
	transform: rotate( -9deg );
}

.sjo-escenario__pictograma {
	position: absolute;
	top: 36%;
	right: -3%;
	width: min( 41.7vw, 40.5rem );
	opacity: 0.9;
}

.sjo-escenario__foto {
	position: absolute;
	top: 10%;
	right: 4%;
	width: min( 27.8vw, 27rem );
	aspect-ratio: 400 / 436;
	--sjo-mask: url( "../svg/portada/mask-escenario-estrado.svg" );
	transform: rotate( 4deg );
}

@media ( max-width: 1023px ) {
	.sjo-escenario__pictograma {
		top: 30%;
		right: -20%;
		width: 15rem;
	}

	.sjo-escenario__foto {
		position: static;
		width: 100%;
		aspect-ratio: 336 / 217;
		margin-top: clamp( 2rem, 5vw, 3rem );
		transform: none;
	}

	.sjo-escenario__acciones .sjo-p__boton {
		width: 100%;
		justify-content: center;
	}

	.sjo-escenario__lenguaje {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
 * 06 · El mundo
 *
 * La constelación: arcos concéntricos que salen de Trujillo y trazos punteados
 * hasta cada alianza. Todo eso es adorno de escritorio; el contenido —las
 * alianzas— es una lista que en móvil se vuelve carrusel.
 *
 * ---------------------------------------------------------------------------
 * La regla que gobierna esta sección
 *
 * Aquí no hay una composición, hay un **dibujo con puntos que tienen que
 * coincidir**: cada trazo punteado sale del aro de Trujillo y tiene que morir
 * en el nodo de su alianza. Son dos capas distintas del marcado —el adorno y la
 * lista— y solo coinciden si las dos se miden contra la misma caja y en la
 * misma unidad.
 *
 * De ahí las tres decisiones de las que cuelga todo lo demás:
 *
 * 1. **La sección toma la proporción de la maqueta**, 900 de alto sobre 1440 de
 *    ancho. Así un porcentaje vertical significa aquí lo mismo que en el Figma.
 * 2. **Todo lo colocado va contra la sección**, nunca contra el contenedor de
 *    contenido, que es más corto. El punto de origen se sale de la columna de
 *    texto por eso: estaba en el flujo, ciento veintiocho píxeles a la izquierda
 *    y ciento catorce por encima de donde convergen los cinco trazos, que
 *    arrancaban en el aire.
 * 3. **Lo que hay dentro de cada alianza se mide en « vw »**, no en « rem ». El
 *    nodo está a 86 px del alto de su caja en una maqueta de 1440, y esos 86 px
 *    son la suma del sello, el nombre y sus márgenes: si esa suma no encoge con
 *    la sección, el trazo deja de aterrizar en el punto. Los tamaños de letra sí
 *    llevan suelo en « rem » —por debajo de cierto cuerpo no se lee—, y para que
 *    ese suelo no mueva el nodo, **la caja de línea del nombre va fija en « vw »
 *    aunque la letra crezca**.
 * ------------------------------------------------------------------------ */

.sjo-p--mundo {
	background-color: var( --wp--preset--color--crema );
}

.sjo-mundo__columna {
	max-width: 33.75rem;
}

.sjo-mundo__titular {
	margin: 0;
	font-size: clamp( 1.75rem, 3.9vw, 4.3125rem );
	font-weight: 800;
	line-height: 1.071;
	letter-spacing: -0.029em;
	color: var( --wp--preset--color--azul );
}

.sjo-mundo__bajada {
	max-width: 30rem;
	margin: 0.875rem 0 0;
	font-size: clamp( 1rem, 1.18vw, 1.0625rem );
	line-height: 1.647;
	color: var( --sjo-p-tinta );
}

.sjo-mundo__acciones {
	margin-top: 0.75rem;
}

.sjo-mundo__alianzas {
	margin: clamp( 2.5rem, 5vw, 3.5rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-mundo__alianza {
	position: relative;
}

.sjo-mundo__alianza h3 {
	margin: 0.875rem 0 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: -0.011em;
	color: var( --wp--preset--color--azul );
}

/* « scale-down » y no « contain »: el segundo agranda el logotipo hasta llenar
   su caja, y en una pantalla de 2560 esa caja pide 267 px a un sello que tiene
   197. El resultado es un escudo borroso. Con « scale-down » la imagen nunca
   pasa de su tamaño real: se queda un poco menor que su hueco, pero nítida. */
.sjo-mundo__sello {
	display: block;
	width: 9.375rem;
	height: 3rem;
	object-fit: scale-down;
	object-position: left center;
}

/* El filete bajo el nombre y, encima de él, el nodo: el punto donde aterriza el
   trazo que viene de Trujillo. Sin ellos la línea punteada acaba en el aire. */
.sjo-mundo__filete {
	position: relative;
	display: block;
	width: 10rem;
	height: 1px;
	margin-top: 0.5rem;
	background-color: rgba( 0, 64, 120, 0.3 );
}

/* La diana: dónde tiene que morir el trazo de esta alianza.

   No se ve —mide cero— y su único trabajo es dejarse medir. Cuelga del filete,
   así que va donde vaya el nombre: si el sello resulta más alto de lo previsto o
   la caja de línea crece, la marca baja con ellos y el trazo la sigue. */
.sjo-mundo__diana {
	position: absolute;
	width: 0;
	height: 0;
}

.sjo-mundo__filete > .sjo-mundo__diana {
	left: 50%;
	top: 0;
}

.sjo-mundo__alianza.es-nodo > .sjo-mundo__diana {
	left: 5px;
	top: 16px;
}

.sjo-mundo__nodo {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--azul );
}

/* La alianza sin sello —«Exalumnos Destacados» en la maqueta— se pinta como un
   nodo suelto: punto rojo a la izquierda y el texto a su lado. */
.sjo-mundo__alianza.es-nodo {
	padding-left: 1.8125rem;
}

.sjo-mundo__alianza.es-nodo h3 {
	margin-top: 0;
}

.sjo-mundo__punto {
	position: absolute;
	left: 0;
	top: 11px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--rojo );
}

.sjo-mundo__clase {
	margin: 0.625rem 0 0;
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --sjo-p-gris );
}

.sjo-mundo__detalle {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.385;
	color: var( --sjo-p-gris );
}

/* El punto de origen: Trujillo. */
.sjo-mundo__origen {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: clamp( 2rem, 4vw, 3rem ) 0 0;
}

/* Un aro rojo con su nodo dentro. Dos circunferencias, o sea CSS. */
.sjo-mundo__aro {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid rgba( 224, 0, 38, 0.45 );
	border-radius: 50%;
}

.sjo-mundo__aro::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--rojo );
	transform: translate( -50%, -50% );
}

.sjo-mundo__sitio > strong {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.385;
	letter-spacing: 0.185em;
	color: var( --wp--preset--color--azul );
}

.sjo-mundo__sitio > span {
	display: block;
	margin-top: 0.1875rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --sjo-p-gris );
}

/* Adornos: la retícula, los arcos, los trazos y la foto.

   La retícula es la cuadrícula de 120 px de la maqueta, puesta en « vw » para
   que siga siendo de doce columnas mida lo que mida la pantalla. */
.sjo-mundo__reticula {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient( 90deg, rgba( 0, 64, 120, 0.07 ) 0 1px, transparent 1px 8.333vw ),
		repeating-linear-gradient( 180deg, rgba( 0, 64, 120, 0.07 ) 0 1px, transparent 1px 13.333svh );
}

/* Los cinco arcos comparten centro: el punto de Trujillo, que en la maqueta
   está en x=250 de 1440 e y=764 de 900. Cada uno trae su diámetro en el
   atributo « style », en porcentaje del ancho de la sección. */
.sjo-mundo__arco {
	position: absolute;
	left: 17.361%;
	top: 84.889%;
	aspect-ratio: 1;
	border: 1px solid rgba( 0, 64, 120, 0.14 );
	border-radius: 50%;
	transform: translate( -50%, -50% );
}

.sjo-mundo__trazos {
	position: absolute;
	inset: 0;
}

/* Los cinco trazos arrancan en el mismo sitio: su esquina inferior izquierda es
   el centro del aro de Trujillo. Cada uno trae en el atributo « style » cuánto
   avanza y cuánto sube.

   **El nodo va dentro del trazo**, clavado en su esquina superior derecha, que
   es donde muere la línea. Antes vivía dentro de la alianza, bajo su nombre, y
   ahí el punto y la línea se calculaban por caminos distintos —uno era la suma
   del alto del sello, del nombre y de sus márgenes; la otra, un porcentaje de la
   sección—. Sobre el papel daban lo mismo, pero basta que uno se desvíe para que
   dejen de encontrarse. Colgado de la propia línea no puede discrepar. */
.sjo-mundo__trazo {
	position: absolute;
	left: 17.361%;
	bottom: 15.111%;
}

.sjo-mundo__trazo img {
	display: block;
	width: 100%;
	height: 100%;
}

.sjo-mundo__trazo .sjo-mundo__nodo {
	position: absolute;
	top: 0;
	right: 0;
	/* Centrado sobre el extremo, no colgando de él. */
	transform: translate( 50%, -50% );
}

/* El de los exalumnos es rojo y un punto mayor, como en la maqueta. */
.sjo-mundo__trazo.es-roja .sjo-mundo__nodo {
	background-color: var( --wp--preset--color--rojo );
}

.sjo-mundo__foto {
	position: absolute;
	right: 6.25%;
	bottom: 5.889%;
	width: 16.667%;
	aspect-ratio: 240 / 288;
	--sjo-mask: url( "../svg/portada/mask-mundo-foto.svg" );
}

/* ---------------------------------------------------------------------------
 * La constelación, dentro de una pantalla
 *
 * La sección mide exactamente el alto de la ventana y no se pasa. Eso obliga a
 * soltar la proporción de la maqueta —1440 × 900— y con ella la comodidad de
 * medirlo todo contra el ancho: si el alto lo manda la ventana, un « vw » ya no
 * dice nada sobre lo vertical.
 *
 * La regla que lo resuelve: **cada eje se ancla por su lado**.
 *
 * - Lo horizontal —dónde cae cada alianza, cuánto avanza cada trazo, el ancho
 *   del sello y del filete— va en « vw » o en porcentaje del ancho.
 * - Lo vertical —el alto del sello, la caja de línea del nombre, los márgenes
 *   que llevan hasta el nodo— va en « svh », las mismas centésimas del alto de
 *   la ventana en las que están puestos los porcentajes de la constelación.
 *
 * Así los dos extremos de cada trazo siguen coincidiendo mida lo que mida la
 * ventana: el de abajo porque sale del mismo punto que el aro, y el de arriba
 * porque el nodo de su alianza está a 9,556svh de la caja —los 86 px de la
 * maqueta sobre 900— y el trazo acaba justo ahí.
 *
 * Lo único que cambia respecto al Figma es la **inclinación** de las líneas, que
 * se abre o se cierra con la forma de la ventana. Son líneas de conexión: lo que
 * tienen que decir es qué une con qué, y eso lo siguen diciendo.
 * ------------------------------------------------------------------------ */

@media ( min-width: 1200px ) {
	.sjo-p--mundo {
		height: 100vh;
		height: 100svh;
		/* Los 178 px a los que la maqueta pone el filete rojo, sobre 900. */
		padding-block: 19.778svh 0;
	}

	/* El contenedor de contenido deja de ser referencia de posición ni de ancho:
	   lo que se coloca en esta sección se mide contra la sección, igual que el
	   adorno.
	
	   El « max-width » que se quita es el de todas las secciones, 1560 px, y aquí
	   hacía daño: **por encima de 1800 px de ancho el contenedor deja de crecer y
	   se centra**, así que la columna se iba a la derecha —172 px a 1905— mientras
	   la constelación seguía midiéndose contra la sección entera. El titular
	   acababa metiéndose debajo del sello de Cambridge. */
	.sjo-mundo__interior {
		position: static;
		max-width: none;
	}

	/* La columna encoge con la constelación. En « rem » se quedaba del tamaño de
	   una maqueta de 1440 mientras el mapa se encogía con la pantalla, y por
	   debajo de ese ancho la bajada acababa metiéndose bajo el nodo de los
	   exalumnos. Son los 540 y los 480 de la maqueta, en proporción. */
	.sjo-mundo__columna {
		max-width: 37.5vw;
	}

	.sjo-mundo__bajada {
		max-width: 33.333vw;
	}

	/* El titular también mira al alto: en una ventana baja, tres líneas a cuerpo
	   de maqueta empujan el botón sobre el aro de Trujillo. */
	.sjo-mundo__titular {
		font-size: max( 1.75rem, min( 3.9vw, 6.222vh ) );
	}

	/* Trujillo, el centro del que salen los cinco trazos. El desplazamiento de
	   media anchura del aro es lo que pone su centro —y no su esquina— sobre el
	   punto. */
	.sjo-mundo__origen {
		position: absolute;
		left: 17.361%;
		top: 84.889%;
		align-items: flex-start;
		gap: 0.833vw;
		margin: 0;
		transform: translate( -1.528vw, -1.528vw );
	}

	.sjo-mundo__aro {
		width: 3.056vw;
		height: 3.056vw;
	}

	.sjo-mundo__aro::before {
		width: 0.972vw;
		height: 0.972vw;
	}

	/* El rótulo no se centra con el aro: en la maqueta lo que queda a la altura
	   del punto es su primera línea, y el detalle cuelga por debajo. */
	.sjo-mundo__sitio {
		margin-top: 1.444svh;
	}

	.sjo-mundo__sitio > strong {
		font-size: max( 0.6875rem, 0.903vw );
	}

	.sjo-mundo__sitio > span {
		margin-top: 0.333svh;
		font-size: max( 0.6875rem, 0.833vw );
	}

	/* La fotografía también se ancla por los dos ejes: los 288 px de alto de la
	   maqueta sobre 900. Con la proporción atada al ancho crecía sola en una
	   pantalla panorámica —a 3440 pedía casi setecientos píxeles de alto— y subía
	   hasta meterse debajo de St. Mary's. El recorte lo resuelve el « object-fit:
	   cover » de la imagen, que no se deforma. */
	.sjo-mundo__foto {
		height: 32%;
	}

	.sjo-mundo__alianzas {
		position: absolute;
		inset: 0;
		margin: 0;
	}

	.sjo-mundo__alianza {
		position: absolute;
	}

	/* Las tres alturas que llevan hasta el nodo, en « svh »: el sello, el hueco
	   y la caja de línea del nombre. Con el margen del filete suman 10,445svh, y
	   el nodo queda 0,889 por encima: los 86 px de la maqueta sobre 900. */
	.sjo-mundo__sello {
		width: 10.417vw;
		height: 5.333svh;
	}

	.sjo-mundo__alianza h3 {
		margin-top: 1.556svh;
		/* El cuerpo mira a los dos lados —y lleva suelo, porque por debajo de
		   trece píxeles no se lee—, pero la caja de línea va fija en « svh »: si
		   creciera con el suelo, el nodo bajaría con ella y el trazo se quedaría
		   corto. */
		font-size: max( 0.8125rem, min( 1.25vw, 2vh ) );
		line-height: 2.667svh;
		white-space: nowrap;
	}

	.sjo-mundo__filete {
		width: 11.111vw;
		margin-top: 0.889svh;
	}

	/* En la maqueta el punto no se posa sobre la rayita: queda ocho píxeles por
	   encima, rozándola. */
	.sjo-mundo__filete > .sjo-mundo__diana {
		top: -0.889svh;
	}

	.sjo-mundo__alianza.es-nodo > .sjo-mundo__diana {
		left: 0.347vw;
		top: 1.778svh;
	}

	.sjo-mundo__nodo {
		width: 0.556vw;
		height: 0.556vw;
	}

	.sjo-mundo__trazo.es-roja .sjo-mundo__nodo {
		width: 0.694vw;
		height: 0.694vw;
	}

	/* El punto de la tarjeta del nodo suelto solo existe donde no hay trazos:
	   con constelación, el que se ve es el del extremo de su línea. */
	.sjo-mundo__punto {
		display: none;
	}

	.sjo-mundo__alianza.es-nodo {
		width: 20.069vw;
		padding-left: 2.014vw;
	}

	.sjo-mundo__clase {
		margin-top: 1.111svh;
		font-size: max( 0.5625rem, 0.694vw );
	}

	.sjo-mundo__detalle {
		margin-top: 2.667svh;
		font-size: max( 0.75rem, 0.903vw );
	}

	.sjo-mundo__alianza .sjo-p__enlace {
		margin-top: 1.556svh;
		font-size: max( 0.75rem, 0.903vw );
		color: var( --wp--preset--color--rojo );
	}

	/* Las cinco posiciones de la maqueta: el ancho en porcentaje de 1440, el
	   alto en porcentaje de 900.
	
	   **Cada una lleva además el ancho de su caja**, que no es el mismo para las
	   cinco. Con un ancho común, el panel que se despliega al señalar Harvard
	   —su explicación y su enlace— se metía por debajo de St. Mary's, que está a
	   su derecha. En la maqueta cada caja mide justo lo que necesita su texto, y
	   es eso lo que las mantiene separadas cuando se abren. */
	.sjo-mundo__alianza:nth-child( 1 ) {
		top: 22.889%;
		left: 48.611%;
		width: 12.847vw;
	}

	.sjo-mundo__alianza:nth-child( 2 ) {
		top: 15.333%;
		left: 75.694%;
		width: 9.028vw;
	}

	.sjo-mundo__alianza:nth-child( 3 ) {
		top: 41.556%;
		left: 61.944%;
		width: 13.194vw;
	}

	.sjo-mundo__alianza:nth-child( 4 ) {
		top: 27.556%;
		left: 85.417%;
		width: 13.889vw;
	}

	/* El nodo suelto baja cincuenta píxeles respecto a la maqueta. Ahí donde lo
	   pone el Figma, el «Conocer más» de University of Dayton —que solo aparece
	   al señalarla, y por eso no se ve en la maqueta— le caía justo encima. */
	.sjo-mundo__alianza:nth-child( 5 ) {
		top: 66.667%;
		left: 43.819%;
		width: 20.069vw;
	}

	/* La explicación y el enlace solo salen al señalar la alianza, como en el
	   prototipo. Se dejan en el flujo para que un lector de pantalla los lea
	   siempre; lo que cambia es la opacidad. */
	.sjo-mundo__detalle,
	.sjo-mundo__alianza .sjo-p__enlace {
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.sjo-mundo__alianza:hover .sjo-mundo__detalle,
	.sjo-mundo__alianza:hover .sjo-p__enlace,
	.sjo-mundo__alianza:focus-within .sjo-mundo__detalle,
	.sjo-mundo__alianza:focus-within .sjo-p__enlace {
		opacity: 1;
	}

	/* La del nodo suelto enseña su explicación siempre: no tiene sello ni filete
	   que la presenten, así que sin ella no se entiende qué es. */
	.sjo-mundo__alianza.es-nodo .sjo-mundo__detalle {
		opacity: 1;
	}

	/* De la sexta en adelante no hay sitio dibujado en la maqueta: caen en la
	   lista normal en lugar de encima de otra. */
	.sjo-mundo__alianza:nth-child( n + 6 ) {
		position: static;
		width: auto;
	}
}

@media ( min-width: 782px ) and ( max-width: 1199px ) {
	/* Ni carrusel ni constelación: en esta franja las alianzas se reparten en
	   columnas, que es lo que evita una tira de cinco fichas una bajo otra. */
	.sjo-mundo__alianzas {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
		gap: 2.5rem 2rem;
	}
}

@media ( max-width: 1199px ) {
	.sjo-mundo__reticula,
	.sjo-mundo__trazos,
	.sjo-mundo__foto {
		display: none;
	}

	.sjo-mundo__arco {
		left: -60%;
		top: auto;
		bottom: -10%;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 07 · La puerta abierta
 *
 * El cierre: la llamada a la Admisión, los dos campus y una columna de fotos
 * que sube sin fin por la derecha. La columna es la misma receta que la cinta
 * de alianzas, en vertical.
 * ------------------------------------------------------------------------ */

.sjo-p--puerta {
	background-color: var( --wp--preset--color--azul );
	padding-block: 0;
}

/* La columna de fotografías llega al filo derecho de la página, como en la
   maqueta —en el Figma arranca a los 1001 px y muere en los 1440—, así que la
   rejilla no puede toparse en el ancho de lectura.

   Lo que sí hay que conservar es **dónde empieza el texto**: el relleno de la
   izquierda reproduce el centrado que antes hacía el tope, de modo que la
   columna sigue alineada con la de las demás secciones y las fotos se van hasta
   el borde. */
.sjo-puerta__reja {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --sjo-puerta-fotos );
	/* El hueco cubre el desbordamiento de la ventana de fotografías.

	   Esa ventana se ensancha 3,5 rem por cada lado para que la fotografía del
	   centro pueda crecer sin recortarse (ver « .tiene-gsap .sjo-puerta__fotos »),
	   y lo que se sale por la izquierda cae sobre esta columna. A 1440 sobraba
	   sitio y no se notaba; por debajo de 1300 la tira pasaba por encima de la
	   dirección del campus anexo. Son esos 3,5 rem más el aire de separación. */
	column-gap: 5rem;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding-left: max( 0px, calc( ( 100% - var( --sjo-p-ancho ) ) / 2 ) );
	min-height: clamp( 34rem, 58vw, 60rem );
}

.sjo-puerta__columna {
	max-width: 48.75rem;
	padding: var( --sjo-p-aire ) 0 var( --sjo-p-aire ) var( --sjo-p-gutter );
}

.sjo-puerta__titular {
	margin: 0;
	font-size: clamp( 1.6875rem, 4vw, 4.4375rem );
	font-weight: 800;
	line-height: 1.069;
	letter-spacing: -0.028em;
	color: var( --wp--preset--color--base );
}

.sjo-puerta__bajada {
	max-width: 38.75rem;
	margin: 1.625rem 0 0;
	font-size: clamp( 1rem, 1.4vw, 1.25rem );
	line-height: 1.6;
	color: var( --wp--preset--color--azul-tenue );
}

.sjo-puerta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.25rem;
}

.sjo-puerta__campus {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 2.5rem;
	margin: 2.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sjo-puerta__sede {
	display: grid;
	grid-template-columns: 1px 26px 1fr;
	column-gap: 1rem;
	padding-top: 1.25rem;
}

.sjo-puerta__sede::before {
	content: "";
	background-color: rgba( 255, 255, 255, 0.35 );
}

.sjo-puerta__sede img {
	width: 26px;
	height: 26px;
}

.sjo-puerta__sede h3 {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.412;
	letter-spacing: -0.012em;
	color: var( --wp--preset--color--base );
}

.sjo-puerta__direccion {
	margin: 0.3125rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.538;
	color: var( --wp--preset--color--azul-tenue );
}

.sjo-puerta__telefono {
	display: inline-block;
	margin: 0.3125rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.014em;
	color: var( --wp--preset--color--base );
	text-decoration: none;
}

.sjo-puerta__telefono:hover {
	text-decoration: underline;
}

/* La columna de fotos de la derecha. */
.sjo-puerta__fotos {
	position: relative;
	align-self: stretch;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 180deg, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( 180deg, transparent, #000 8%, #000 92%, transparent );
}

.sjo-puerta__tira {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: sjo-tira 30s linear infinite;
}

.sjo-puerta__fotos:hover .sjo-puerta__tira {
	animation-play-state: paused;
}

.sjo-puerta__tira > li {
	flex: 0 0 auto;
}

/* Las tres formas de la maqueta, que encajan una en otra.

   Antes iba una sola máscara para todas y cada unión dejaba una cuña de azul:
   la diagonal de abajo de una foto no tenía enfrente la diagonal de arriba de la
   siguiente, sino otra vez un borde recto.

   Ahora son tres y van en ciclo cerrado: las tres abren y cierran con la misma
   diagonal ascendente, y lo que cambia entre ellas es el alto. Entre dos
   cualesquiera queda la franja inclinada de doce píxeles que dibuja la maqueta,
   y la última empalma con la primera igual que con cualquier otra.

   Los márgenes negativos son los solapes, y van en porcentaje —que se mide
   contra el ancho— para que el encaje aguante a cualquier tamaño de columna. */
.sjo-puerta__tira .sjo-foto {
	width: 100%;
}

.sjo-puerta__tira .es-forma-a {
	aspect-ratio: 440 / 324;
	margin-bottom: -11.591%;
	--sjo-mask: url( "../svg/portada/mask-puerta-deporte.svg" );
}

.sjo-puerta__tira .es-forma-b {
	aspect-ratio: 440 / 355;
	margin-bottom: -11.591%;
	--sjo-mask: url( "../svg/portada/mask-puerta-comunidad.svg" );
}

/* La tercera cierra con la misma diagonal, no en recto.

   En la maqueta esta forma acaba plana y la primera empieza plana, porque allí
   la tira tiene principio y final. En un bucle no los tiene: ese empalme volvía
   cada vuelta y lo que se veía era **una banda azul horizontal cruzando la
   columna** justo después de que la fotografía terminara de salir, entre dos
   cortes rectos y con las esquinas redondeadas haciendo muesca.

   Con la diagonal en las dos —el pie de esta y la cabeza de la primera— el
   ciclo se cierra sobre sí mismo y todos los empalmes son el mismo: la franja
   inclinada de doce píxeles que sí dibuja la maqueta. */
.sjo-puerta__tira .es-forma-c {
	aspect-ratio: 440 / 323;
	margin-bottom: -10.909%;
	--sjo-mask: url( "../svg/portada/mask-puerta-inicial.svg" );
}

@keyframes sjo-tira {
	from {
		transform: translateY( 0 );
	}

	to {
		transform: translateY( -50% );
	}
}

.sjo-puerta__cuadro {
	position: absolute;
	right: calc( var( --sjo-puerta-fotos ) - 1.5rem );
	/* 706 px de los 921 de la maqueta: el cuadro se apoya abajo, no a media
	   altura. */
	bottom: 7%;
	width: min( 8.4vw, 8.125rem );
	height: min( 8.4vw, 8.125rem );
	background-color: var( --wp--preset--color--rojo );
	transform: rotate( 18deg );
	z-index: 2;
}

@media ( max-width: 1023px ) {
	.sjo-puerta__reja {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.sjo-puerta__columna {
		order: 2;
		padding: var( --sjo-p-aire ) var( --sjo-p-gutter );
	}

	.sjo-puerta__fotos {
		order: 1;
		height: 17rem;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sjo-puerta__campus {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.sjo-puerta__cuadro {
		right: 1.5rem;
		bottom: auto;
		top: 13rem;
		width: 4.25rem;
		height: 4.25rem;
	}
}

@media ( max-width: 781px ) {
	.sjo-puerta__acciones {
		flex-direction: column;
		align-items: stretch;
	}

	.sjo-puerta__acciones .sjo-p__boton {
		justify-content: center;
		min-height: 50px;
	}
}

/* ---------------------------------------------------------------------------
 * 08 · Ahora mismo
 *
 * Las noticias. La primera entrada ocupa la columna izquierda con su foto; las
 * tres siguientes son una lista a la derecha. En móvil la destacada se queda
 * arriba y las otras tres pasan a carrusel.
 * ------------------------------------------------------------------------ */

.sjo-p--noticias {
	background-color: var( --wp--preset--color--base );
}

.sjo-noticias__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: baseline;
	justify-content: space-between;
}

.sjo-noticias__reja {
	display: grid;
	grid-template-columns: minmax( 0, 1.09fr ) minmax( 0, 1fr );
	gap: clamp( 2.5rem, 6vw, 6.875rem );
	justify-content: space-between;
	margin-top: clamp( 2.5rem, 5vw, 4.875rem );
}

.sjo-noticias__foto {
	display: block;
	width: 100%;
	aspect-ratio: 590 / 336;
	--sjo-mask: url( "../svg/portada/mask-noticia.svg" );
}

.sjo-noticias__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.75rem 0 0;
	font-size: 0.6875rem;
	line-height: 1.455;
	letter-spacing: 0.145em;
	text-transform: uppercase;
}

.sjo-noticias__fecha {
	font-weight: 500;
	color: var( --sjo-p-gris );
}

.sjo-noticias__categoria {
	font-weight: 600;
	color: var( --wp--preset--color--rojo );
	text-decoration: none;
}

.sjo-noticias__destacada h3 {
	margin: 0.5rem 0 0;
	font-size: clamp( 1.25rem, 1.7vw, 1.5rem );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.0125em;
	color: var( --wp--preset--color--azul );
}

.sjo-noticias__destacada h3 a,
.sjo-noticias__nota h3 a {
	color: inherit;
	text-decoration: none;
}

.sjo-noticias__destacada h3 a:hover,
.sjo-noticias__nota h3 a:hover {
	color: var( --wp--preset--color--rojo );
}

.sjo-noticias__resumen {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.571;
	color: var( --sjo-p-gris );
}

.sjo-noticias__destacada .sjo-p__enlace {
	margin-top: 1.5rem;
}

.sjo-noticias__lista {
	display: grid;
	gap: clamp( 2rem, 4vw, 3.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
	align-content: start;
}

.sjo-noticias__nota h3 {
	margin: 0.5rem 0 0;
	font-size: clamp( 1.125rem, 1.4vw, 1.25rem );
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--azul );
}

.sjo-noticias__nota .sjo-noticias__meta {
	margin-top: 0;
}

@media ( max-width: 1023px ) {
	.sjo-noticias__reja {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * De capítulo en capítulo al desplazarse
 *
 * En escritorio la portada se lee por secciones: la mayoría ocupa la pantalla
 * entera, así que el desplazamiento se ancla a su principio en vez de dejar a
 * medias el final de una y el principio de la siguiente.
 *
 * ---------------------------------------------------------------------------
 * Por qué « proximity » y no « mandatory »
 *
 * Con « mandatory » el navegador **tiene** que parar en un punto de anclaje, y
 * eso solo funciona si todos miden lo mismo que la pantalla. Aquí no: «El aula»
 * crece con lo que se escriba en sus tres niveles y la cinta de alianzas es una
 * franja de doscientos píxeles. Obligar a parar en ellas significa o dejar
 * contenido sin poder leer o clavar la página en una banda de logotipos.
 *
 * Con « proximity » el anclaje solo actúa cuando el desplazamiento acaba cerca
 * de un principio de sección, que es justo lo que pasa al dar una vuelta de
 * rueda o un golpe de trackpad sobre una sección a pantalla completa. El efecto
 * de ir de capítulo en capítulo se nota igual, y lo que es más largo que la
 * pantalla se sigue pudiendo leer entero.
 *
 * ---------------------------------------------------------------------------
 * Dos detalles
 *
 * - **La cinta de alianzas no es punto de anclaje.** Es un tránsito entre el
 *   banner y el primer capítulo, no un capítulo: pararse ahí sería pararse en
 *   una franja que ocupa una quinta parte de la pantalla.
 * - **Va colgado de « body.home »**, no del documento a secas: esto es una
 *   decisión de la portada y no del sitio entero.
 * ------------------------------------------------------------------------ */

@media ( min-width: 1024px ) {
	html:has( body.home ) {
		scroll-snap-type: y proximity;
	}

	body.home .sjo-apertura,
	body.home .sjo-p,
	body.home .wp-site-blocks > footer {
		scroll-snap-align: start;
	}
}

/* ---------------------------------------------------------------------------
 * Carrusel en móvil
 *
 * assets/js/carrusel.js ya monta los puntos, el paso automático y la sincronía
 * con el arrastre para cualquier elemento con « .sjo-carrusel ». Lo que falta es
 * el tamaño de tarjeta de esta portada —fija, no al ancho entero, porque el
 * diseño deja asomar la siguiente— y el color de los puntos.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	ul.sjo-carrusel {
		display: flex;
		flex-wrap: nowrap;
		/* Dos márgenes de hueco entre tarjeta y tarjeta.

		   El carrusel va a sangre y la tarjeta ocupa la columna de lectura, así
		   que a los lados quedan los dos márgenes; con un hueco menor, por ahí
		   asomaba una astilla de la vecina. Con este, la siguiente empieza justo
		   donde acaba la pantalla: se ve una tarjeta y solo una, y de que hay más
		   avisan los puntos. */
		gap: calc( var( --sjo-p-gutter ) * 2 );
		margin-inline: calc( var( --sjo-p-gutter ) * -1 );
		padding-inline: var( --sjo-p-gutter );
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		/* El punto de anclaje es el filo de la página, no el del contenido, así
		   que sin esto la primera tarjeta queda con margen y las demás pegadas al
		   borde. */
		scroll-padding-inline: var( --sjo-p-gutter );
		scrollbar-width: none;
	}

	ul.sjo-carrusel::-webkit-scrollbar {
		display: none;
	}

	/* Una tarjeta por vista, y centrada.

	   Antes medían el 78 % del ancho para dejar asomar la siguiente, que es lo
	   que insinúa que hay más. En una pantalla de 390 eso deja la tarjeta
	   descentrada y un trozo de la vecina cortado por el filo: se lee peor de lo
	   que informa. El indicador de puntos ya cuenta cuántas hay.

	   El « 100 % » es del contenido del carrusel, que es el ancho de la página
	   menos sus dos márgenes: la tarjeta queda exactamente sobre la columna de
	   lectura, como el resto del texto de la sección. */
	ul.sjo-carrusel > li {
		/* El ancho va escrito, no como base de la caja flexible: varias de estas
		   listas traen topes propios de su versión de escritorio —anchos de
		   tarjeta, máximos de columna— y esos le ganan a una base del 100 %. Con
		   el ancho puesto y el tope anulado, las cinco miden lo mismo: la columna
		   de lectura de la sección. */
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		max-width: none;
		scroll-snap-align: start;
	}

	/* Las tarjetas del carrusel llevan fondo propio: en móvil el diseño las
	   saca del fondo de la sección y las pone en blanco. */
	.sjo-aula__niveles.sjo-carrusel > li,
	.sjo-mundo__alianzas.sjo-carrusel > li,
	.sjo-noticias__lista.sjo-carrusel > li {
		box-sizing: border-box;
		padding: 1.5rem;
		background-color: var( --wp--preset--color--base );
		border-radius: 2px;
	}

	.sjo-aula__niveles.sjo-carrusel .sjo-aula__nombre,
	.sjo-aula__niveles.sjo-carrusel .sjo-aula__meta,
	.sjo-aula__niveles.sjo-carrusel .sjo-aula__texto {
		color: var( --sjo-p-gris );
	}

	.sjo-aula__niveles.sjo-carrusel .sjo-aula__nombre {
		margin-top: 0;
		color: var( --wp--preset--color--azul );
	}

	.sjo-aula__niveles.sjo-carrusel .sjo-aula__meta {
		color: var( --wp--preset--color--rojo );
	}

	.sjo-aula__niveles.sjo-carrusel .sjo-p__enlace,
	.sjo-noticias__lista.sjo-carrusel .sjo-p__enlace {
		color: var( --wp--preset--color--rojo );
	}

	/* En el carrusel la foto del nivel no entra: la tarjeta es solo texto. */
	.sjo-aula__niveles.sjo-carrusel .sjo-aula__foto,
	.sjo-huella__fichas.sjo-carrusel .sjo-huella__pieza {
		transform: none;
		margin-top: 0;
	}

	.sjo-aula__niveles.sjo-carrusel .sjo-aula__foto {
		display: none;
	}

	/* El punto activo del diseño 2026 es una barra roja de 24 px. */
	.sjo-p .sjo-carrusel__punto[aria-current="true"] {
		width: 24px;
	}

	.sjo-p .sjo-carrusel__punto[aria-current="true"]::before {
		background-color: var( --wp--preset--color--rojo );
	}

	.sjo-p .sjo-carrusel__contador {
		display: none;
	}

	.sjo-p.es-oscura .sjo-carrusel__punto::before {
		background-color: rgba( 255, 255, 255, 0.35 );
	}
}

/* En escritorio no hay carrusel: la lista vuelve a ser lo que era y el
   indicador que monta el script se esconde. */
@media ( min-width: 782px ) {
	.sjo-p .sjo-carrusel__indicador {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Móvil: los ajustes que pide la maqueta de 390
 *
 * La versión pequeña ya estaba montada —las listas se vuelven carrusel, los
 * adornos se retiran—, así que esto son las diferencias que quedaban contra el
 * Figma de móvil, medidas contra sus 390 px de ancho.
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {
	/* En «La fe», la fotografía vuelve al flujo de verdad.
	 *
	 * La regla de más arriba que la coloca en absoluto lleva **dos clases**
	 * —« .sjo-fe__fotos .sjo-foto »— y la que la devolvía al flujo solo una, así
	 * que ganaba la primera aunque esta viviera dentro de un « @media ». El
	 * resultado: la fotografía montada encima del titular y de la cita.
	 *
	 * Un « @media » no añade especificidad. Para desactivar una regla de dos
	 * clases hace falta otra de dos clases. */
	.sjo-fe__fotos .sjo-foto {
		position: static;
	}

	/* Y deja aire antes de la banda azul: en la maqueta hay 48 px de crema
	   entre la fotografía y los tres pilares. */
	.sjo-fe__fotos {
		margin-bottom: clamp( 2rem, 8vw, 3rem );
	}
}

@media ( max-width: 781px ) {
	/* El margen lateral en móvil.

	   La maqueta de 390 lo pone en 32 px —el 6,94 % del ancho daba 27— y aquí va
	   en 40: en una pantalla estrecha el texto pegado al filo se lee peor, y el
	   rótulo girado del capítulo, que vive en ese margen, quedaba a un palmo de
	   la primera línea. */
	.sjo-p,
	.sjo-apertura,
	.sjo-alianzas {
		--sjo-p-gutter: max( 3rem, 6.94vw );
	}

	/* Y el rótulo se arrima más al borde para que ese aire sea de verdad suyo y
	   no se lo coma él. */
	.sjo-p__rotulo {
		transform: translate( calc( var( --sjo-p-gutter ) * 0.4 ), -50% ) rotate( -90deg );
	}

	/* «El mundo» en móvil no tiene mapa: no hay trazos que salgan de ningún
	   sitio, así que el punto de origen tampoco pinta nada. En la maqueta de 390
	   no está. */
	/* La marquesina de alianzas, de uno en uno.

	   A tamaño de escritorio caben seis o siete logotipos y la cinta continua se
	   lee bien. En 390 px cabe uno, y una cinta que corre con una sola pieza a la
	   vista es un logotipo que se escapa antes de poder leerlo. Aquí ocupa la
	   pantalla entera y se para en cada uno; de moverla se encarga alianzas() en
	   assets/js/animaciones.js. */
	.sjo-alianzas__fila {
		width: auto;
		gap: 0;
	}

	.sjo-alianzas__logo {
		flex: 0 0 100%;
	}

	.sjo-alianzas__logo img {
		height: 4.5rem;
	}

	.sjo-mundo__origen {
		display: none;
	}

	/* Y sus tarjetas son solo nombre y explicación —232 × 106 en la maqueta—, sin
	   sello ni filete: en una tarjeta de ese tamaño el logotipo se lleva la mitad
	   del sitio y deja el texto sin aire. */
	.sjo-mundo__alianzas.sjo-carrusel .sjo-mundo__sello,
	.sjo-mundo__alianzas.sjo-carrusel .sjo-mundo__filete {
		display: none;
	}

	.sjo-mundo__alianzas.sjo-carrusel .sjo-mundo__alianza h3 {
		margin-top: 0;
	}

	/* Las notas del cierre miden 268 en la maqueta, no los 300 del resto. */
}

/* ---------------------------------------------------------------------------
 * MÓVIL · la cinta del cierre, en horizontal y con fotografías cuadradas
 *
 * En escritorio es una columna que sube por la derecha, con las tres siluetas
 * en diagonal que encajan una en otra. En 390 px eso no se sostiene: la columna
 * pasa a ser una franja ancha y baja, y las diagonales dejan las fotografías
 * cortadas en cuñas que no se entienden.
 *
 * Aquí la cinta corre de lado, las fotografías son cuadradas y sin recorte, y
 * de que hay más se encarga el propio movimiento.
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {
	.sjo-puerta__fotos {
		/* El alto de la cinta, en un sitio: lo usan la ventana y cada fotografía.

		   En porcentajes encadenados no funciona —la lista no tiene alto propio y
		   el navegador se queda sin referencia: las fotografías salieron de tres
		   mil píxeles—, así que va escrito. */
		/* El alto lo pone la propia fotografía: una cuadrada a todo el ancho. */
		height: auto;
	}

	.sjo-puerta__tira {
		flex-direction: row;
		/* Sin hueco: el paso es exactamente una pantalla. */
		gap: 0;
		/* La animación de reserva, para quien no tenga la librería. */
		animation-name: sjo-tira-lado;
	}

	.sjo-puerta__tira > li {
		flex: 0 0 100%;
	}

	/* Cuadradas y enteras: ni máscara diagonal ni solapes. Los márgenes
	   negativos que encajan las tres siluetas en escritorio aquí solo servirían
	   para morderse unas a otras. */
	.sjo-puerta__tira .sjo-foto,
	.sjo-puerta__tira .es-forma-a,
	.sjo-puerta__tira .es-forma-b,
	.sjo-puerta__tira .es-forma-c {
		--sjo-mask: none;

		width: 100%;
		height: auto;
		aspect-ratio: 1;
		margin-bottom: 0;
		border-radius: 10px;
	}
}

/* La cinta de fotos en tablet.
 *
 * La regla de arriba las pone cuadradas y a todo el ancho, y está pensada para
 * el móvil: a 375 px un cuadrado mide 375 de alto y se lee como una tarjeta. La
 * misma regla a 837 px da fotografías de 837 × 837 —media pantalla de alto cada
 * una— y la sección se dispara a 1444 px.
 *
 * En esta franja se conserva la idea —una fotografía por pantalla, entera y sin
 * máscara— pero con una proporción apaisada, que es como están tomadas.
 */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.sjo-puerta__tira .sjo-foto,
	.sjo-puerta__tira .es-forma-a,
	.sjo-puerta__tira .es-forma-b,
	.sjo-puerta__tira .es-forma-c {
		aspect-ratio: 16 / 10;
	}
}

@keyframes sjo-tira-lado {
	from {
		transform: translateX( 0 );
	}

	to {
		transform: translateX( -50% );
	}
}

/* ---------------------------------------------------------------------------
 * Entrada de las secciones
 *
 * Cada capítulo aparece con un desplazamiento corto la primera vez que entra en
 * pantalla. Lo enciende assets/js/portada.js añadiendo « .es-visible »; si el
 * script no carga, el contenido se ve igual porque el estado de reposo solo se
 * aplica cuando hay JavaScript (clase « tiene-js » en el html).
 * ------------------------------------------------------------------------ */

.tiene-js .sjo-p__anima {
	opacity: 0;
	transform: translateY( 1.5rem );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.tiene-js .sjo-p__anima.es-visible {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.sjo-alianzas__fila,
	.sjo-puerta__tira {
		animation: none;
	}

	.tiene-js .sjo-p__anima {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sjo-p__boton,
	.sjo-p__boton::after,
	.sjo-p__enlace::after,
	.sjo-huella__ficha,
	.sjo-aula__foto,
	.sjo-propuesta__tarjeta {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Piezas sueltas del diseño
 *
 * El filete rojo de los titulares y los pictogramas de las cifras y de los tres
 * pilares. Se eligen con una clase, no con un selector de imagen, porque son
 * piezas fijas del diseño: cambiarlas sería rehacer la portada, no editarla.
 * ------------------------------------------------------------------------ */

/* El filete rojo de 48 × 3, dibujado sobre el primer bloque de la sección en
   lugar de pedir un bloque propio para una rayita. */
.sjo-p .tiene-filete::before,
.sjo-apertura .tiene-filete::before,
.sjo-alianzas .tiene-filete::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-bottom: 1.375rem;
	background-color: var( --sjo-p-filete, var( --wp--preset--color--rojo ) );
	border-radius: 2px;
}

/* Los pictogramas de las cifras y de los tres pilares. Son cinco y tres
   piezas fijas del diseño: se eligen con una clase, no con un selector de
   imagen, porque cambiarlos sería rehacer el diseño y no editar la página. */
.es-pic-fe::before {
	background-image: url( "../svg/portada/pic-fe.svg" );
}

.es-pic-aula::before {
	background-image: url( "../svg/portada/pic-aula.svg" );
}

.es-pic-acompanamiento::before {
	background-image: url( "../svg/portada/pic-acompanamiento.svg" );
}

.es-pic-mundo::before {
	background-image: url( "../svg/portada/pic-mundo.svg" );
}

.es-pic-campus::before {
	background-image: url( "../svg/portada/pic-campus.svg" );
}

.es-pic-fe-pilar::before {
	background-image: url( "../svg/portada/pic-fe-pilar.svg" );
}

.es-pic-familia::before {
	background-image: url( "../svg/portada/pic-familia.svg" );
}

.es-pic-servicio::before {
	background-image: url( "../svg/portada/pic-servicio.svg" );
}

/* El pictograma de cada uno de los tres pilares de «La fe» es el mismo
   « ::before » que dibuja su caja, y esa ya está declarada arriba, en el bloque
   de «La fe»: aquí solo llega el dibujo, por la clase « es-pic-* ». */

/* ---------------------------------------------------------------------------
 * Encabezado corriente de capítulo
 *
 * El que arma sjo_p_encabezado(): filete, titular y bajada. Los capítulos que
 * tienen apertura propia no lo usan.
 * ------------------------------------------------------------------------ */

.sjo-p__encabezado {
	max-width: 45rem;
}


/* ---------------------------------------------------------------------------
 * Las letras de contorno
 *
 * El diseño dibuja de contorno el numeral de cada capítulo, la segunda línea
 * del titular del banner y dos de los cinco lenguajes del arte.
 *
 * En el Figma eso es un trazo vectorial sobre el contorno **unido** de la
 * palabra: donde dos letras se tocan, el trazo las rodea por fuera y no se ve
 * ninguna costura. « -webkit-text-stroke » no puede hacer eso: traza cada letra
 * por separado y centra el trazo sobre su perfil, así que la mitad del grosor
 * cae dentro de la letra. Con el tracking negativo de la maqueta las letras se
 * solapan, y en el solape se ven los trazos interiores cruzándose: son las
 * «uniones raras».
 *
 * No hay forma de unir los contornos en CSS. Lo que sí quita el problema de
 * raíz es que las letras dejen de solaparse, así que **toda letra de contorno
 * lleva el tracking a cero**. Sale una palabra un poco más ancha que en el
 * Figma; a cambio se lee limpia, que era el objetivo del recurso.
 *
 * Se declara aquí, al final y en un solo sitio, para que la regla se aplique a
 * cualquier letra de contorno que se añada más adelante.
 * ------------------------------------------------------------------------ */

.sjo-p__numeral,
.sjo-apertura__titular.es-contorno,
.sjo-escenario__lenguaje:nth-child( 3 ),
.sjo-escenario__lenguaje:nth-child( 5 ) {
	/* Positivo, no cero: con cero las letras dejan de solaparse pero algunas
	   parejas de la Montserrat ExtraBold siguen quedando a menos de un trazo de
	   distancia, y los dos contornos se tocan. Una centésima de eme las separa
	   sin que la palabra pierda su compacidad. */
	letter-spacing: 0.015em;
	paint-order: stroke fill;
}

/* ---------------------------------------------------------------------------
 * Cuando manda GSAP
 *
 * assets/js/animaciones.js pone « tiene-gsap » en el documento antes de montar
 * nada, y a partir de ahí las entradas las lleva él: escalonadas, con
 * profundidad y con la desaceleración de la librería.
 *
 * Lo que hace falta aquí es **quitar el estado de reposo del CSS**. Si se
 * quedara, GSAP arrancaría una animación desde « opacity: 0 » hasta « opacity:
 * 0 » —anima hacia el valor calculado del elemento, y ese valor sería cero— y no
 * se vería nunca nada. Por eso estas reglas van al final del archivo: tienen que
 * ganarle a las de más arriba, que declaran ese reposo.
 * ------------------------------------------------------------------------ */

/* La columna de fotos del cierre deja de correr sola: con GSAP va a pasos,
   parándose en cada fotografía. Lo monta tira() en assets/js/animaciones.js.

   La animación CSS se queda como está para quien no tenga la librería: es la
   clase la que la apaga, no un borrado. */
.tiene-gsap .sjo-puerta__tira {
	animation: none;
}

/* Y en móvil también la marquesina de alianzas, que ahí pasa de uno en uno.
   En escritorio caben seis o siete logotipos y la cinta continua se lee bien. */
@media ( max-width: 1023px ) {
	.tiene-gsap .sjo-alianzas__fila {
		animation: none;
	}
}

/* Y la ventana de la columna gana holgura a los lados.

   La fotografía del centro crece casi un veinte por ciento, y esa ventana lleva
   « overflow: hidden » —lo necesita para el bucle y para el difuminado de los
   extremos—, así que sin holgura el crecimiento se recortaría justo por donde
   la forma tiene su diagonal y su esquina redondeada: se vería un corte recto.

   El margen negativo ensancha la ventana y el relleno devuelve la lista a su
   sitio, de modo que **las fotografías siguen midiendo la columna** y lo que
   sobra es sitio para crecer. Lo que se sale por la derecha se va fuera de la
   página, que es transparente, y por la izquierda pasa por encima del azul. */
@media ( min-width: 1024px ) {
	.tiene-gsap .sjo-puerta__fotos {
		box-sizing: border-box;
		margin-inline: -3.5rem;
		padding-inline: 3.5rem;
	}
}

/* La que está en el centro recupera su color.

   El velo azul del diseño son dos pseudoelementos —un multiplicar y un
   trama—, y esos no se pueden animar desde JavaScript. Lo que sí se puede es
   dejarles aquí la transición y que allí solo se encienda la clase. */
.sjo-puerta__tira .sjo-foto.es-duotono::before,
.sjo-puerta__tira .sjo-foto.es-duotono::after {
	transition: opacity 0.5s ease;
}

.sjo-puerta__tira > li.es-mirada .sjo-foto.es-duotono::before,
.sjo-puerta__tira > li.es-mirada .sjo-foto.es-duotono::after {
	opacity: 0;
}

.tiene-gsap .sjo-puerta__tira > li {
	/* El nivel de partida, para que el que crece pueda subir por encima. */
	position: relative;
	z-index: 1;
}

.tiene-gsap .sjo-p__anima,
.tiene-gsap .sjo-fe__fotos .sjo-p__anima,
.tiene-gsap .sjo-huella__fotos .sjo-p__anima {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
	transition-delay: 0s;
}

/* ---------------------------------------------------------------------------
 * «La huella» y «El escenario», a la altura de la pantalla
 *
 * Las dos ocupan exactamente el alto de la ventana, ni más ni menos. Es
 * « height » y no « min-height » a propósito: aquí lo que se pide es que no se
 * pasen, y lo que sobresalga lo recorta el « overflow: hidden » de « .sjo-p ».
 *
 * Para que no haya nada que recortar, el aire de arriba y de abajo deja de
 * seguir al ancho y sigue al alto: en una pantalla baja el relleno se encoge
 * solo y el contenido sigue cabiendo.
 *
 * Solo de 1024 para arriba. Por debajo el contenido se apila —las fichas en
 * carrusel, las palabras del arte una bajo otra— y encerrarlo en una pantalla lo
 * cortaría.
 * ------------------------------------------------------------------------ */

@media ( min-width: 1024px ) {
	.sjo-p--huella,
	.sjo-p--escenario {
		--sjo-p-aire: clamp( 2rem, 5.5vh, 6rem );
		/* La cabeza de la sección: el sitio que hay que dejar arriba para que el
		   numeral no quede tapado por el contenido. Son los 170 px que la maqueta
		   deja sobre un lienzo de 902 —el numeral asoma hasta el 156—, en
		   proporción al alto de la pantalla. */
		--sjo-p-cabeza: clamp( 5rem, 16vh, 11rem );

		min-height: 100vh;
		min-height: 100svh;
		padding-block: var( --sjo-p-cabeza ) var( --sjo-p-aire );
	}
}

/* Y se ajusta exactamente a la pantalla solo cuando hay sitio de sobra.

   En una pantalla baja, encerrar estas dos secciones en un alto fijo cortaría
   contenido —las cuatro fichas de «La huella» no encogen con la ventana, su alto
   lo marca su texto—. Ahí crece: es preferible que la sección se pase de largo a
   que se coma media ficha. */
@media ( min-width: 1024px ) and ( min-height: 820px ) {
	.sjo-p--huella,
	.sjo-p--escenario {
		height: 100vh;
		height: 100svh;
	}
}

/* ---------------------------------------------------------------------------
 * «El aula», a la altura de la pantalla
 *
 * Era la única sección numerada que no ocupaba una pantalla —a 1440 × 900 pedía
 * 1020 px— y eso se notaba: rompía el ritmo de ir de capítulo en capítulo y
 * dejaba el anclaje del desplazamiento a medio camino.
 *
 * El sitio se saca de donde sobraba, no encogiendo el texto:
 *
 * - **El pie de la sección sigue al alto.** Son los 90 px que la banda diagonal
 *   necesita para llegar al borde, y en «vw» crecían hasta 144 sin razón.
 * - **La fotografía de cada nivel se acota por lo alto.** Es la pieza que más
 *   ocupa —300 px de los 520 del bloque— y la única que puede ceder sin que se
 *   pierda nada: del recorte se encarga su « object-fit: cover ».
 * - **El hueco entre el encabezado y los niveles mira también al alto.**
 *
 * Y, como en las demás, una cadena de encogido: si aun así no cupiera, lo que
 * cede es la fotografía y no el texto.
 * ------------------------------------------------------------------------ */

@media ( min-width: 1024px ) {
	.sjo-p--aula {
		--sjo-aula-pie: min( 10vw, 10vh );
		--sjo-p-aire: clamp( 2rem, 5.5vh, 6rem );
		/* Más corta que en las otras: aquí el encabezado es de dos columnas y
		   ocupa menos alto, así que el numeral necesita menos sitio reservado. */
		--sjo-p-cabeza: clamp( 4.5rem, 13vh, 9rem );

		min-height: 100vh;
		min-height: 100svh;
		padding-block: var( --sjo-p-cabeza ) var( --sjo-aula-pie );
	}

	.sjo-aula__niveles {
		margin-top: min( 6vw, 7vh );
	}

	/* Los 300 px de la maqueta sobre 900 son 33 centésimas del alto; se dejan en
	   28 para que quepa el resto sin apretar el texto. */
	.sjo-aula__foto {
		max-height: 28vh;
		min-height: 0;
	}
}

@media ( min-width: 1024px ) and ( min-height: 820px ) {
	.sjo-p--aula {
		height: 100vh;
		height: 100svh;
		display: flex;
		flex-direction: column;
	}

	.sjo-p--aula > .sjo-p__interior {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		/* El sobrante se reparte arriba y abajo, no se acumula en un hueco. */
		justify-content: center;
		min-height: 0;
	}

	/* La cadena de encogido: cede la fotografía, nunca el texto. */
	.sjo-aula__niveles {
		flex: 0 1 auto;
		min-height: 0;
	}

	.sjo-aula__nivel {
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------------
 * «Nuestra propuesta» y «La puerta abierta», también a la altura de la pantalla
 *
 * Misma receta que «La huella» y «El escenario»: el aire de arriba y de abajo
 * deja de seguir al ancho y sigue al alto, para que en una pantalla baja se
 * encoja solo y el contenido siga cabiendo.
 *
 * Lo que cambia de una a otra es **quién se come el sitio que sobre**:
 *
 * - En la 03 el encabezado se queda arriba y las cuatro tarjetas se apoyan
 *   abajo; el aire que sobre queda entre medias, que es la composición de la
 *   maqueta. Se consigue repartiendo a lo alto y dándole a la lista un
 *   « margin-top: auto ».
 * - En la 07 no hay nada que repartir: la columna de texto ya iba centrada en
 *   su rejilla, así que basta con que la rejilla mida lo que la sección.
 * ------------------------------------------------------------------------ */

@media ( min-width: 1024px ) {
	.sjo-p--propuesta {
		--sjo-p-aire: clamp( 2rem, 5.5vh, 6rem );
		/* El sitio que hay que dejar arriba para que el contenido no tape el
		   numeral: al bajar el aire, el contenido sube. */
		--sjo-p-cabeza: clamp( 5rem, 16vh, 11rem );

		min-height: 100vh;
		min-height: 100svh;
		padding-block: var( --sjo-p-cabeza ) var( --sjo-p-aire );
	}

	.sjo-p--puerta {
		--sjo-p-aire: clamp( 2rem, 6vh, 7.5rem );

		min-height: 100vh;
		min-height: 100svh;
	}

	.sjo-puerta__reja {
		/* El cuadro rojo cuelga de esta caja y no de la sección.

		   Estaba en la sección, y las dos son la misma **solo hasta 1560 px**:
		   por encima, la rejilla topa ahí y se centra mientras la sección sigue
		   creciendo, así que el cuadro se iba despegando del filo de la columna
		   de fotos —setenta píxeles a 1920, casi cuatrocientos a 2560—. */
		position: relative;

		min-height: 100vh;
		min-height: 100svh;
	}
}

/* Y se ajustan exactamente a la pantalla solo cuando hay sitio de sobra, igual
   que las otras dos. En una ventana más baja de 700 px crecen en vez de
   recortar: el texto de las tarjetas no encoge con la ventana, y es preferible
   que la sección se pase de largo a que se coma media tarjeta. */
@media ( min-width: 1024px ) and ( min-height: 700px ) {
	.sjo-p--propuesta,
	.sjo-p--puerta {
		height: 100vh;
		height: 100svh;
	}

	.sjo-puerta__reja {
		height: 100%;
		min-height: 0;
	}

	.sjo-p--propuesta {
		display: flex;
		flex-direction: column;
	}

	/* Los adornos y el numeral van en absoluto, así que el único hijo en flujo
	   es el contenedor de contenido: se queda con toda la columna. */
	.sjo-p--propuesta > .sjo-p__interior {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		/* El sobrante se reparte arriba y abajo, no se acumula en el hueco.

		   Antes la lista llevaba « margin-top: auto », que apoya las tarjetas
		   abajo y manda **todo** lo que sobre a ese único hueco: ochenta píxeles
		   de más a 1920 y quinientos a 2560. El hueco de la maqueta mide 83 px
		   sobre 892, y ese es el que se pone; lo que sobre se va a los extremos,
		   donde no se lee como un agujero. */
		justify-content: center;
		/* Sin esto un hijo que no quepa impide encoger al padre, que es lo que
		   hace que un flex column se desborde sin avisar. */
		min-height: 0;
	}

	.sjo-propuesta__lista {
		margin-top: min( 6vw, 9.3vh );
		padding-top: 0;
		/* Puede encoger: en una ventana baja el sobrante es negativo y algo tiene
		   que ceder. Cede la fotografía, siguiendo esta cadena. */
		flex: 0 1 auto;
		min-height: 0;
	}

	.sjo-propuesta__pilar,
	.sjo-propuesta__enlace {
		min-height: 0;
	}

	/* La fotografía guarda la proporción de la maqueta salvo que no quepa: en
	   una pantalla baja se acorta —los 250 px de la maqueta sobre 900 son 27,8
	   centésimas del alto— y de recortarla sin deformarla se encarga el
	   « object-fit: cover » de la imagen. */
	.sjo-propuesta__foto {
		min-height: 0;
		max-height: 27.8vh;
	}

	/* El relleno de la tarjeta también mira al alto. A 1200 × 700 la columna se
	   queda tan estrecha que la explicación pasa de cuatro líneas a cinco, y con
	   el relleno de la maqueta la fila se salía trece píxeles. */
	.sjo-propuesta__tarjeta {
		padding-block: min( 2rem, 3.4vh );
	}
}

/* Las cinco palabras se miden contra el hueco que les queda, no contra la
 * pantalla
 *
 * Estaban en « vh », y esa medida no sabe nada de lo que tienen encima: el
 * titular ocupa una línea o dos según lo que se escriba, y el botón mide lo que
 * mida su texto. Sumado todo, el apilado se salía por abajo —a 1440 × 900 pedía
 * 724 px de los 707 que hay— y « El escenario » recortaba «Artes plásticas».
 *
 * Ahora la sección reparte a lo alto: el titular y el botón se llevan lo suyo, y
 * **el bloque de palabras se queda con todo lo que sobre**. Como ese hueco se lo
 * da el reparto y no su contenido, se puede declarar contenedor de consulta y
 * las palabras se miden en « cqh », que es un porcentaje de ese hueco. Sumadas
 * con sus solapes dan 95: caben siempre, y queda un dedo de aire por debajo.
 *
 * Las proporciones entre las cinco no cambian —son las de la maqueta—, y el tope
 * en « vw » sigue puesto para que en una pantalla ancha y baja no se salgan de
 * lado. Los dos topes guardan la misma proporción, así que o mandan los cinco
 * anchos o mandan los cinco altos: nunca se mezclan y el dibujo no se deforma.
 *
 * Un navegador que no entienda « cqh » descarta estas cinco declaraciones enteras
 * y se queda con las de « vh » de más arriba, que es de donde vienen. */
@media ( min-width: 1024px ) and ( min-height: 820px ) {
	.sjo-p--escenario {
		display: flex;
		flex-direction: column;
	}

	/* Los adornos y el numeral van en absoluto, así que el único hijo en flujo
	   es el contenedor de contenido: se queda con toda la columna. */
	.sjo-p--escenario > .sjo-p__interior {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		/* Sin esto un hijo que no quepa impide encoger al padre, que es lo que
		   hace que un flex column se desborde sin avisar. */
		min-height: 0;
	}

	.sjo-p--escenario .sjo-escenario__lenguajes {
		/* Base cero: el alto sale del reparto y no de las palabras. Es lo que
		   permite medirlas contra él sin morderse la cola. */
		flex: 1 1 0;
		min-height: 0;
		container-type: size;
	}

	.sjo-escenario__lenguaje:nth-child( 1 ) {
		font-size: min( 7.2vw, 19.35cqh );
	}

	.sjo-escenario__lenguaje:nth-child( 2 ) {
		font-size: min( 9.9vw, 26.6cqh );
	}

	.sjo-escenario__lenguaje:nth-child( 3 ) {
		font-size: min( 12.6vw, 33.65cqh );
	}

	.sjo-escenario__lenguaje:nth-child( 4 ) {
		font-size: min( 6.6vw, 17.65cqh );
	}

	.sjo-escenario__lenguaje:nth-child( 5 ) {
		font-size: min( 3.7vw, 9.9cqh );
	}
}

/* ---------------------------------------------------------------------------
 * «Ahora mismo», a la altura de la pantalla
 *
 * Es la sección más difícil de encerrar en una pantalla, y por una razón que no
 * tienen las otras: **su contenido lo escribe quien publica**. Cuatro titulares
 * y cuatro resúmenes de largo desconocido, y una línea de más en cada uno son
 * noventa píxeles que aparecen de la nada.
 *
 * Se resuelve por los dos lados:
 *
 * 1. **El texto deja de ser de largo libre.** Los titulares se cortan a dos
 *    líneas y los resúmenes también, que es lo que ya hacen en la maqueta. Un
 *    avance de noticia no es la noticia: si hace falta más, se entra. Con eso la
 *    altura de la sección pasa a ser calculable.
 * 2. **La fotografía absorbe lo que falte.** Si aun así no cabe, lo que cede es
 *    la fotografía destacada y no el texto, siguiendo la cadena de « min-height:
 *    0 » hasta ella.
 *
 * Y los huecos verticales miran al alto, no al ancho, como en las demás
 * secciones a pantalla completa.
 * ------------------------------------------------------------------------ */

@media ( min-width: 1024px ) {
	.sjo-p--noticias {
		--sjo-p-aire: clamp( 2rem, 5.5vh, 6rem );
		/* El sitio que hay que dejar arriba para que el contenido no tape el
		   numeral: al bajar el aire, el contenido sube. */
		--sjo-p-cabeza: clamp( 5rem, 16vh, 11rem );

		min-height: 100vh;
		min-height: 100svh;
		padding-block: var( --sjo-p-cabeza ) var( --sjo-p-aire );
	}

	.sjo-noticias__reja {
		margin-top: min( 5vw, 7vh );
	}

	.sjo-noticias__lista {
		gap: min( 4vw, 5vh );
	}

	/* Los 326 px de alto de la maqueta sobre 912. */
	.sjo-noticias__foto {
		max-height: 36vh;
	}

	/* Dos líneas y punto, tanto en el titular como en el resumen. Es lo que
	   dibuja la maqueta y lo que hace que la sección tenga una altura previsible
	   se escriba lo que se escriba. */
	.sjo-noticias__destacada h3,
	.sjo-noticias__nota h3,
	.sjo-noticias__resumen {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
}

/* Y se ajusta exactamente a la pantalla solo cuando hay sitio de sobra. Por
   debajo de 820 px de alto crece en vez de recortar: cuatro noticias con su
   fotografía no encogen tanto. */
@media ( min-width: 1024px ) and ( min-height: 820px ) {
	.sjo-p--noticias {
		height: 100vh;
		height: 100svh;
		display: flex;
		flex-direction: column;
	}

	/* Los adornos y el numeral van en absoluto, así que el único hijo en flujo
	   es el contenedor de contenido: se queda con toda la columna. */
	.sjo-p--noticias > .sjo-p__interior {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		/* El sobrante se reparte arriba y abajo, no se acumula en un solo hueco. */
		justify-content: center;
		min-height: 0;
	}

	/* La cadena de encogido: lo que cede cuando falta sitio es la fotografía. */
	.sjo-noticias__reja {
		flex: 0 1 auto;
		min-height: 0;
	}

	.sjo-noticias__destacada {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.sjo-noticias__foto {
		flex: 0 1 auto;
		min-height: 0;
	}
}

/* Los textos que entran letra a letra
 *
 * Las usan el titular del banner y los cinco lenguajes del arte. El partidor
 * está en assets/js/animaciones.js y es el mismo para los dos, así que las
 * clases también.
 *
 * El « inline-block » es lo que permite mover una letra: una caja en línea no
 * admite « transform ». Y el envoltorio de palabra es lo que evita que la línea
 * se parta por cualquier letra, ya que cada una es ahora una caja más.
 *
 * Solo existen si GSAP llegó a cargar; sin él los textos se quedan enteros y
 * quietos, que es como están escritos en la página. */
.sjo-letras__palabra {
	display: inline-block;
	white-space: nowrap;
}

.sjo-letras__letra {
	display: inline-block;
}

/* El envoltorio « <picture> » del banner no cuenta para la maquetación.
 *
 * La fotografía de fondo mide « height: 100% » contra « .sjo-apertura__medio »,
 * que está colocado en absoluto. Si « <picture> » se comportara como una caja
 * normal, la imagen mediría el 100 % de un envoltorio sin alto propio y se
 * quedaría en nada. Con « display: contents » el envoltorio desaparece a
 * efectos de maquetación y la imagen sigue midiéndose contra el contenedor,
 * exactamente igual que cuando no había dos versiones. */
.sjo-apertura__medio picture {
	display: contents;
}