/*
 * Vida Sanjo
 * ---------------------------------------------------------------------------
 * Los nueve tipos de sección que estrenan las diez páginas de «Vida Sanjo» —el
 * mosaico del índice, el texto con apunte, la sigla, la destacada con sus
 * acompañantes, el mosaico de baldosas con ficha, el marcador de las casas, el
 * campo de destinos, los grupos y la escalera— y lo que se le añadió a «Fichas»
 * y a «Frentes» para que sirvieran aquí sin duplicarlos.
 *
 * Va después de « paginas » y de « propuesta »: casi todo cuelga de « .sjo-s »,
 * que aquel declara, y las dos extensiones pisan a propósito reglas que
 * «propuesta» ya escribió.
 *
 * Las medidas son fluidas, no las del Figma: cada clamp() lleva el mínimo de la
 * maqueta de 390, el valor proporcional al lienzo de 1440 (px / 14,4 = vw) y el
 * máximo de la maqueta de escritorio.
 */

.sjo-s--teselas,
.sjo-s--apunte,
.sjo-s--sigla,
.sjo-s--destacadas,
.sjo-s--mosaico,
.sjo-s--marcador,
.sjo-s--destinos,
.sjo-s--grupos,
.sjo-s--escalera {
	/* Los azules de la familia, con nombre corto: en este archivo salen en casi
	   todas las secciones y escribir el preset entero cada vez alargaba las
	   reglas sin explicar nada. */
	--sjo-v-azul: var( --wp--preset--color--azul, #004078 );
	--sjo-v-medio: var( --wp--preset--color--azul-medio, #006ba1 );
	--sjo-v-celeste: var( --wp--preset--color--celeste, #a7c6dd );
	--sjo-v-tenue: var( --wp--preset--color--azul-tenue, #c9dcea );
	--sjo-v-crema: var( --wp--preset--color--crema, #f4f1ec );

	/* La forma de la familia: esquina superior izquierda en ángulo y las otras
	   tres redondeadas. Se escribe una vez y la usan las nueve. */
	--sjo-v-forma: 0 24px 24px 24px;
}

/* ---------------------------------------------------------------------------
 * Teselas — el mosaico de entradas del índice
 * ------------------------------------------------------------------------ */

.sjo-s__teselas {
	display: grid;

	/* Doce columnas: el mosaico está dibujado sobre esa reja y cada baldosa
	   ocupa 3, 4 o 6. Así las tres filas de la maqueta acaban justas en el borde
	   sin que nadie tenga que sumar anchos a mano. */
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 1.67vw, 1.5rem );

	/* 72 px bajo la bajada, como en la maqueta. */
	margin: clamp( 2.5rem, 5vw, 4.5rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__tesela {
	grid-column: span var( --sjo-ancho, 4 );

	/* La altura no se fija por filas —no se sabe cuántas habrá— sino por
	   baldosa: las de una misma fila se estiran hasta la más alta. */
	min-height: clamp( 15rem, 20.83vw, 18.75rem );

	/* Al pasar el cursor la baldosa crece un punto: es la señal de que ahí se
	   puede pulsar. */
	transition: transform 0.3s ease;
}

.sjo-s__tesela:hover,
.sjo-s__tesela:focus-within {
	z-index: 2;
	transform: scale( 1.02 );
}

.sjo-s__tesela.es-alta {
	min-height: clamp( 15rem, 25vw, 22.5rem );
}

.sjo-s__tesela-caja {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	height: 100%;
	padding: clamp( 1.25rem, 1.67vw, 1.5rem );
	border-radius: var( --sjo-v-forma );
	background-color: var( --sjo-v-azul );
	overflow: hidden;
	text-decoration: none;
}

.sjo-s__tesela-foto,
.sjo-s__tesela-foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Las fotografías del diseño vienen con las esquinas redondeadas **dentro del
   archivo**: son PNG recortados, con los cuatro picos transparentes. Sobre una
   baldosa cuya esquina superior izquierda es recta, ese pico deja un triángulo
   del color de la caja. Un 4 % de más empuja los picos fuera del recorte y no
   se nota: la fotografía ya iba recortada por «cover». */
.sjo-s__tesela-foto img,
.sjo-s__baldosa-foto img {
	transform: scale( 1.04 );
}

/* El enlace es de móvil: en escritorio la baldosa entera ya lleva a la página y
   una segunda llamada dentro del mismo enlace solo repite lo dicho. */
.sjo-s__tesela-enlace {
	display: none;
}

/* El velo: sin él el nombre no se lee sobre una fotografía clara. Arranca casi
   transparente arriba y cierra opaco abajo, que es donde va el texto. */
.sjo-s__tesela-velo {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgba( 0, 22, 44, 0.88 ) 0%,
		rgba( 0, 22, 44, 0.66 ) 34%,
		rgba( 0, 22, 44, 0.12 ) 78%,
		rgba( 0, 22, 44, 0 ) 100%
	);
}

.sjo-s__tesela-cuerpo {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sjo-s__tesela-tit {
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );

	/* El nombre crece con la baldosa: en la maqueta las anchas lo llevan a 26 px
	   y las estrechas a 20. Se resuelve con una consulta de contenedor y no con
	   una regla por ancho, que serían tres reglas diciendo lo mismo. */
	font-size: clamp( 1.25rem, 1.39vw, 1.375rem );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

@container ( min-width: 22rem ) {
	.sjo-s__tesela-tit {
		font-size: clamp( 1.375rem, 1.81vw, 1.625rem );
	}
}

.sjo-s__tesela-txt {
	color: rgba( 255, 255, 255, 0.88 );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Apunte — la columna de texto y el panel del margen
 * ------------------------------------------------------------------------ */

.sjo-s__apunte-reja {
	display: grid;

	/* 700 y 460 sobre el lienzo de 1440, con 120 de aire entre las dos. */
	grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr );
	gap: clamp( 2rem, 8.33vw, 7.5rem );
	align-items: start;
}

.sjo-s__apunte-txt {
	margin: clamp( 1.25rem, 1.94vw, 1.75rem ) 0 0;
	max-width: 41.25rem;
}

.sjo-s__apunte-txt p {
	margin: 0 0 clamp( 1rem, 1.39vw, 1.25rem );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: 1.75;
}

.sjo-s__apunte-txt p:last-child {
	margin-bottom: 0;
}

/* El remate: el mismo párrafo, en azul y un punto más grande. Es lo que el
   diseño usa para cerrar el argumento antes del botón. */
.sjo-s__apunte-remate {
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
	max-width: 41.25rem;
	color: var( --sjo-v-azul );
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
	line-height: 1.6;
}

.sjo-s__apunte-pie {
	margin: clamp( 1.75rem, 2.78vw, 2.5rem ) 0 0;
}

.sjo-s__apunte-panel {
	box-sizing: border-box;
	padding: clamp( 1.75rem, 3.06vw, 2.75rem );
	border-radius: var( --sjo-v-forma );
	background-color: var( --sjo-v-azul );
	color: var( --sjo-v-tenue );
}

.sjo-s__apunte-panel-rotulo {
	margin: 0;
	color: rgba( 201, 220, 234, 0.9 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__apunte-panel-tit {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.375rem, 1.94vw, 1.75rem );
	font-weight: 800;
	line-height: 1.214;
	letter-spacing: -0.02em;
}

.sjo-s__apunte-panel-txt {
	margin: clamp( 1rem, 1.39vw, 1.25rem ) 0 0;
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.625;
}

.sjo-s__apunte-puntos {
	display: grid;
	gap: clamp( 0.75rem, 1.11vw, 1rem );
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__apunte-punto {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	align-items: baseline;
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.625;
}

.sjo-s__apunte-punto-num {
	color: var( --sjo-v-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* El logotipo va sobre blanco. Los sellos de las instituciones vienen en su
   color sobre fondo transparente, y el de Cambridge —gris oscuro— desaparece
   sobre el azul del panel. Una tarjeta blanca es además lo que pide cualquier
   manual de marca para ponerlos sobre un fondo oscuro. */
.sjo-s__apunte-marca {
	display: inline-block;
	margin: clamp( 1.25rem, 1.94vw, 1.75rem ) 0 0;
	padding: clamp( 0.75rem, 1.11vw, 1rem ) clamp( 1rem, 1.39vw, 1.25rem );
	border-radius: 12px;
	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s__apunte-marca img {
	display: block;
	width: auto;
	max-width: 11.25rem;
	height: auto;
}

.sjo-s__apunte-panel-pie {
	margin: clamp( 1.75rem, 3.33vw, 3rem ) 0 0;
}

.sjo-s__apunte-enlace {
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	font-weight: 700;
	text-decoration: none;
}

.sjo-s__apunte-enlace::after {
	content: " \2192";
	color: var( --sjo-v-celeste );
}

.sjo-s__apunte-enlace:hover,
.sjo-s__apunte-enlace:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Sigla — el panel que deletrea unas siglas
 * ------------------------------------------------------------------------ */

/* Va pegada a la sección de arriba: es su remate, no una sección más. Por eso
   se le quita el aire de cabecera que « .sjo-s » le da a todas. */
.sjo-s--sigla {
	padding-top: 0;
}

.sjo-s__sigla {
	box-sizing: border-box;
	padding: clamp( 1.75rem, 3.06vw, 2.75rem );
	border-radius: var( --sjo-v-forma );
	background-color: var( --sjo-v-azul );
}

.sjo-s__sigla-rotulo {
	margin: 0;
	color: rgba( 201, 220, 234, 0.9 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__sigla-letras {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( clamp( 8rem, 13.89vw, 12.5rem ), 1fr ) );
	gap: clamp( 1.5rem, 2.22vw, 2rem );
	margin: clamp( 1.75rem, 3.06vw, 2.75rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__sigla-letra {
	display: flex;
	flex-direction: column;
	gap: clamp( 0.5rem, 0.833vw, 0.75rem );
}

.sjo-s__sigla-inicial {
	color: var( --sjo-v-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 2.75rem, 4.17vw, 3.75rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sjo-s__sigla-palabra {
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
 * Destacadas — una tarjeta grande y el resto al lado
 * ------------------------------------------------------------------------ */

.sjo-s__destacadas-cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp( 1.5rem, 4.17vw, 3.75rem );
}

.sjo-s__destacadas-cifra {
	margin: 0;
	text-align: end;
}

.sjo-s__destacadas-cifra-num {
	display: block;
	color: var( --sjo-v-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 3rem, 5vw, 4.5rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sjo-s__destacadas-cifra-txt {
	display: block;
	margin: clamp( 0.5rem, 0.833vw, 0.75rem ) 0 0;
	color: var( --sjo-s-gris, #5c6470 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__destacadas {
	display: grid;

	/* La destacada ocupa la mitad y las acompañantes la otra: es la proporción
	   de la maqueta —620 y 580 sobre 1240— y la que deja a la tarjeta azul sitio
	   para su párrafo largo sin partirlo en cinco líneas. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: clamp( 1.5rem, 2.78vw, 2.5rem );
	align-items: stretch;

	/* 80 px bajo la bajada, como en la maqueta. */
	margin: clamp( 2.5rem, 5.56vw, 5rem ) 0 0;
}

.sjo-s__destacada {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: clamp( 1.75rem, 3.06vw, 2.75rem );
	border-radius: var( --sjo-v-forma );
	background-color: var( --sjo-v-azul );
	color: var( --sjo-v-tenue );
}

.sjo-s__destacada-rotulo {
	margin: 0;
	color: rgba( 201, 220, 234, 0.9 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__destacada-tit {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.5rem, 2.22vw, 2rem );
	font-weight: 800;
	line-height: 1.1875;
	letter-spacing: -0.02em;
}

.sjo-s__destacada-txt {
	margin: clamp( 1rem, 1.81vw, 1.625rem ) 0 0;
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.625;
}

/* El pie va abajo del todo aunque el párrafo sea corto: en la maqueta la
   tarjeta es alta y el «Estudiantes de Secundaria» descansa en su base. */
.sjo-s__destacada-pie {
	margin: auto 0 0;
	padding-top: clamp( 1.5rem, 2.78vw, 2.5rem );
	color: var( --sjo-v-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 700;
	letter-spacing: clamp( 0.08rem, 0.153vw, 0.1375rem );
}

.sjo-s__destacadas-items,
.sjo-s__destacadas-grupo {
	display: grid;
	gap: clamp( 1.5rem, 2.78vw, 2.5rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Con carrusel las acompañantes llegan en pares. En escritorio cada par es una
   fila de dos, y los pares se apilan: sale la misma rejilla de dos por dos que
   sin agrupar, pero el marcado ya viene partido para el carrusel de móvil. */
.sjo-s--destacadas.es-carrusel .sjo-s__destacadas {
	/* Las filas se declaran —una por par— para que la tarjeta principal pueda
	   abarcarlas todas con « 1 / -1 »: contra una rejilla implícita, ese « -1 »
	   no significa nada y la tarjeta se queda en la primera fila. */
	grid-template-rows: repeat( var( --sjo-grupos, 2 ), auto );
	align-content: start;
	gap: clamp( 1.5rem, 2.78vw, 2.5rem );
}

.sjo-s--destacadas.es-carrusel .sjo-s__destacada {
	grid-row: 1 / -1;
}

.sjo-s--destacadas.es-carrusel .sjo-s__destacadas-grupo {
	grid-column: 2;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-content: start;
}

/* Con dos acompañantes van una encima de otra; con cuatro, en dos columnas.
   Es la diferencia entre «Premiaciones» y «Consejo Estudiantil», y no hace
   falta un campo para decirla: la cuenta ya está en la lista. */
.sjo-s__destacadas-items:has( > :nth-child( 3 ) ) {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-content: space-between;
}

.sjo-s--destacadas.es-items-tarjeta .sjo-s__destacadas-item {
	box-sizing: border-box;
	padding: clamp( 1.5rem, 2.5vw, 2.25rem );
	border-radius: var( --sjo-v-forma );
	background-color: var( --sjo-v-crema );
}

/* Sobre un fondo crema la tarjeta crema no se vería: ahí pasa a blanca, que es
   lo que hace el diseño en todas las secciones de esta familia. */
.sjo-s--destacadas.es-items-tarjeta.es-fondo-crema .sjo-s__destacadas-item {
	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s__destacadas-item-rotulo {
	margin: 0 0 clamp( 0.5rem, 0.833vw, 0.75rem );
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__destacadas-item-tit {
	margin: 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sjo-s__destacadas-item-txt {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.625;
}

.sjo-s__destacadas-item-pie {
	margin: clamp( 1rem, 1.39vw, 1.25rem ) 0 0;
	color: var( --sjo-v-medio );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 700;
	letter-spacing: clamp( 0.08rem, 0.153vw, 0.1375rem );
}

/* ---------------------------------------------------------------------------
 * Mosaico — baldosas pegadas, cada una con su ficha
 * ------------------------------------------------------------------------ */

.sjo-s__mosaico {
	display: grid;
	grid-template-columns: repeat( var( --sjo-columnas, 3 ), minmax( 0, 1fr ) );

	/* Las baldosas van pegadas: un hilo de 2 px las separa sin romper la forma
	   única, que es lo que hace la maqueta. */
	gap: 2px;

	/* 80 px bajo la bajada, como en la maqueta. */
	margin: clamp( 2.5rem, 5.56vw, 5rem ) 0 0;
	padding: 0;
	list-style: none;

	/* El mosaico se lee como una sola forma redondeada, pero el recorte no se
	   hace aquí: cada esquina la redondea la baldosa que le toca —lo marca
	   sjo_seccion_mosaico_esquinas()—. Recortando la lista entera, una baldosa
	   no podría crecer al pasarle el cursor sin que el recorte se la comiera. */
}

.sjo-s__baldosa {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* El alto mínimo es el de una baldosa sin texto —las de «Arte», que solo
	   llevan numeral, nombre y enlace—. Las que sí lo llevan crecen solas
	   hasta los 380 px de la maqueta: el alto lo pone el contenido, no una
	   medida escrita que habría que cambiar en cada página. */
	min-height: clamp( 11rem, 15.28vw, 13.75rem );
	padding: clamp( 1.5rem, 2.22vw, 2rem );
	background-color: var( --sjo-v-tenue );
	overflow: hidden;

	/* Al pasar el cursor la baldosa crece un punto y se levanta: es la señal de
	   que ahí se puede pulsar. Crece sobre las de al lado, por eso sube de
	   plano. */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sjo-s__baldosa:hover,
.sjo-s__baldosa:focus-within {
	z-index: 2;
	transform: scale( 1.025 );
	box-shadow: 0 18px 42px rgba( 0, 22, 44, 0.22 );
}

/* Las cuatro esquinas del mosaico. El resto de las baldosas quedan a escuadra:
   juntas forman la forma de la familia. */
.sjo-s__baldosa.es-sup-der {
	border-top-right-radius: 24px;
}

.sjo-s__baldosa.es-inf-izq {
	border-bottom-left-radius: 24px;
}

.sjo-s__baldosa.es-inf-der {
	border-bottom-right-radius: 24px;
}

.sjo-s__baldosa.es-tono-claro {
	background-color: var( --sjo-v-tenue );
}

.sjo-s__baldosa.es-tono-celeste {
	background-color: var( --sjo-v-celeste );
}

.sjo-s__baldosa.es-tono-medio {
	background-color: var( --sjo-v-medio );
}

.sjo-s__baldosa.es-tono-oscuro {
	background-color: var( --sjo-v-azul );
}

.sjo-s__baldosa-foto,
.sjo-s__baldosa-foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sjo-s__baldosa-velo {
	position: absolute;
	inset: 0;
	background-color: rgba( 0, 22, 44, 0.55 );
}

/* Sin titular, la sección es la continuación de la de arriba —el mosaico de
   disciplinas bajo «Cuatro disciplinas deportivas», la tira de valores bajo su
   fotografía— y no empieza de nuevo: se le quita el aire de cabecera, que si no
   se suma al de cierre de la anterior y deja 192 px en blanco entre un párrafo
   y las tarjetas que lo continúan. */
.sjo-s--mosaico:not( :has( .sjo-s__titular ) ),
.sjo-s--areas.es-tira:not( :has( .sjo-s__titular ) ) {
	padding-top: 0;
}

.sjo-s__interior > .sjo-s__mosaico:first-child {
	margin-top: 0;
}

.sjo-s__baldosa-num {
	position: relative;
	color: rgba( 255, 255, 255, 0.45 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 2.25rem, 3.33vw, 3rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

/* Sobre los dos tonos claros el numeral fantasma se pierde en blanco: ahí pasa
   a ser el azul de la familia rebajado. */
.sjo-s__baldosa.es-tono-claro .sjo-s__baldosa-num,
.sjo-s__baldosa.es-tono-celeste .sjo-s__baldosa-num {
	color: rgba( 0, 64, 120, 0.28 );
}

.sjo-s__baldosa-tit {
	position: relative;
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sjo-s__baldosa.es-tono-claro .sjo-s__baldosa-tit,
.sjo-s__baldosa.es-tono-celeste .sjo-s__baldosa-tit {
	color: var( --sjo-v-azul );
}

.sjo-s__baldosa-txt {
	position: relative;
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: rgba( 255, 255, 255, 0.88 );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	line-height: 1.625;
}

.sjo-s__baldosa.es-tono-claro .sjo-s__baldosa-txt,
.sjo-s__baldosa.es-tono-celeste .sjo-s__baldosa-txt {
	color: var( --sjo-s-gris, #5c6470 );
}

.sjo-s__baldosa-abrir {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: auto 0 0;
	padding: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	font-weight: 700;
	text-align: start;
	cursor: pointer;
}

.sjo-s__baldosa.es-tono-claro .sjo-s__baldosa-abrir,
.sjo-s__baldosa.es-tono-celeste .sjo-s__baldosa-abrir {
	color: var( --wp--preset--color--rojo, #e00026 );
}

.sjo-s__baldosa-abrir:hover,
.sjo-s__baldosa-abrir:focus-visible {
	text-decoration: underline;
}

.sjo-s__baldosa-flecha {
	transition: transform 0.25s ease;
}

.sjo-s__baldosa-abrir:hover .sjo-s__baldosa-flecha {
	transform: translateX( 3px );
}

/* ---------------------------------------------------------------------------
 * La ficha de detalle
 *
 * Nace escrita en la página. Sin JavaScript el « dialog » vuelve a ser un
 * bloque normal debajo del mosaico —se lee todo, nada se queda esperando—; con
 * JavaScript, assets/js/vida.js lo abre como diálogo modal.
 * ------------------------------------------------------------------------ */

.sjo-s__ficha-detalle {
	box-sizing: border-box;
	width: min( 50rem, calc( 100vw - 2 * var( --sjo-gutter ) ) );
	max-width: none;

	/* Centrada en los dos ejes. Un « dialog » abierto se coloca con sus propios
	   márgenes, así que « auto » en los cuatro lados es lo que lo centra: no hay
	   que posicionarlo a mano. */
	margin: auto;
	max-height: calc( 100dvh - 2 * clamp( 1rem, 4vw, 3rem ) );
	padding: 0;
	border: 0;
	border-radius: var( --sjo-v-forma );
	background-color: var( --wp--preset--color--base, #fff );
	color: var( --sjo-s-gris, #5c6470 );

	/* En horizontal se recorta —así el radio de la esquina muerde de verdad—;
	   en vertical se desliza, que es como se lee una ficha más alta que la
	   pantalla. En una sola declaración: « overflow-y » suelto lo borraba el
	   atajo que venía detrás. */
	overflow: hidden auto;
}

/* Sin guion el navegador esconde todo « dialog » que no esté abierto. Aquí se
   le devuelve el sitio: la ficha pasa a ser una tarjeta más, debajo del
   mosaico, y la página se lee entera.

   « sin-dialogo » es el mismo caso con JavaScript pero sin « showModal »: lo
   marca assets/js/vida.js cuando el navegador no sabe abrir diálogos. */
html:not( .tiene-js ) .sjo-s__ficha-detalle,
html.sin-dialogo .sjo-s__ficha-detalle {
	display: block;
	position: static;
	margin: clamp( 1rem, 1.67vw, 1.5rem ) auto 0;
	max-height: none;

	/* Los dos ejes: « overflow-y: visible » con la horizontal recortada lo
	   vuelve a convertir en caja con barra, y aquí no hay nada que deslizar. */
	overflow: visible;
}

.sjo-s__ficha-detalle::backdrop {
	background-color: rgba( 20, 32, 46, 0.66 );
}

.sjo-s__ficha-cabeza {
	position: relative;
	padding: clamp( 1.75rem, 2.78vw, 2.5rem ) clamp( 1.75rem, 3.06vw, 2.75rem );
	background-color: var( --sjo-v-tenue );
}

.sjo-s__ficha-detalle.es-tono-celeste .sjo-s__ficha-cabeza {
	background-color: var( --sjo-v-celeste );
}

.sjo-s__ficha-detalle.es-tono-medio .sjo-s__ficha-cabeza {
	background-color: var( --sjo-v-medio );
}

.sjo-s__ficha-detalle.es-tono-oscuro .sjo-s__ficha-cabeza {
	background-color: var( --sjo-v-azul );
}

.sjo-s__ficha-num {
	display: block;
	color: rgba( 0, 64, 120, 0.3 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 2.25rem, 3.06vw, 2.75rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sjo-s__ficha-detalle.es-tono-medio .sjo-s__ficha-num,
.sjo-s__ficha-detalle.es-tono-oscuro .sjo-s__ficha-num {
	color: rgba( 255, 255, 255, 0.4 );
}

.sjo-s__ficha-rotulo {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --sjo-v-medio );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__ficha-detalle.es-tono-medio .sjo-s__ficha-rotulo,
.sjo-s__ficha-detalle.es-tono-oscuro .sjo-s__ficha-rotulo {
	color: rgba( 255, 255, 255, 0.8 );
}

.sjo-s__ficha-detalle .sjo-s__ficha-tit {
	margin: clamp( 0.25rem, 0.556vw, 0.5rem ) 0 0;
	color: var( --sjo-v-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.5rem, 2.22vw, 2rem );
	font-weight: 800;
	line-height: 1.1875;
	letter-spacing: -0.02em;
}

.sjo-s__ficha-detalle.es-tono-medio .sjo-s__ficha-tit,
.sjo-s__ficha-detalle.es-tono-oscuro .sjo-s__ficha-tit {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__ficha-cerrar {
	position: absolute;
	top: clamp( 1.25rem, 2.22vw, 2rem );
	right: clamp( 1.25rem, 2.22vw, 2rem );
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba( 0, 64, 120, 0.12 );
	color: var( --sjo-v-azul );
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.sjo-s__ficha-detalle.es-tono-medio .sjo-s__ficha-cerrar,
.sjo-s__ficha-detalle.es-tono-oscuro .sjo-s__ficha-cerrar {
	background-color: rgba( 255, 255, 255, 0.2 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__ficha-cuerpo {
	padding: clamp( 1.75rem, 2.78vw, 2.5rem ) clamp( 1.75rem, 3.06vw, 2.75rem );
}

/* La tinta se declara entera: « .sjo-s__ficha-txt » nace pensado para una ficha
   sobre fondo azul y viene en azul pálido, que sobre el blanco del cuerpo de la
   ficha de detalle no se lee. */
.sjo-s__ficha-detalle .sjo-s__ficha-txt {
	margin: 0;
	color: var( --sjo-s-gris, #5c6470 );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: 1.75;
}

.sjo-s__ficha-datos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( clamp( 8rem, 16.67vw, 15rem ), 1fr ) );
	gap: clamp( 1rem, 1.67vw, 1.5rem );
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
}

.sjo-s__ficha-dato dt {
	margin: 0 0 0.375rem;
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__ficha-dato dd {
	margin: 0;
	color: var( --sjo-s-tinta, #14181f );
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.5;
}

.sjo-s__ficha-chips-rotulo {
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 clamp( 0.75rem, 1.11vw, 1rem );
	color: var( --sjo-s-gris, #5c6470 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__ficha-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjo-s__ficha-chip {
	padding: 0.5rem 0.9375rem;
	border-radius: 999px;
	background-color: var( --sjo-v-crema );
	color: var( --sjo-v-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	font-weight: 600;
}

.sjo-s__ficha-detalle .sjo-s__ficha-pie {
	margin: clamp( 1.75rem, 2.78vw, 2.5rem ) 0 0;
}

/* ---------------------------------------------------------------------------
 * Marcador — la tabla de puntos de las casas
 * ------------------------------------------------------------------------ */

.sjo-s__marcador-cabecera {
	display: grid;
	grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr );
	gap: clamp( 1.5rem, 4.17vw, 3.75rem );
	align-items: start;
}

.sjo-s__marcador-panel {
	box-sizing: border-box;
	padding: clamp( 1.25rem, 2.08vw, 1.875rem );
	border-radius: var( --sjo-v-forma );
	background-color: var( --sjo-v-azul );
	color: var( --sjo-v-tenue );
}

.sjo-s__marcador-panel-rotulo {
	margin: 0;
	color: rgba( 201, 220, 234, 0.9 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__marcador-panel-txt {
	margin: clamp( 0.5rem, 0.833vw, 0.75rem ) 0 0;
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.5;
}

.sjo-s__casas {
	display: grid;

	/* La maqueta deja las casas muy sueltas a propósito, para que las barras se
	   lean como un gráfico y no como una tabla. */
	gap: clamp( 1.75rem, 5vw, 4.5rem );

	/* 100 px bajo la bajada. */
	margin: clamp( 2.5rem, 6.94vw, 6.25rem ) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sjo-s__casa {
	display: grid;
	grid-template-columns: clamp( 2.5rem, 4.86vw, 4.375rem ) minmax( 0, clamp( 6rem, 13.2vw, 11.875rem ) ) minmax( 0, 1fr ) auto;
	gap: clamp( 0.75rem, 1.67vw, 1.5rem );
	align-items: center;
}

.sjo-s__casa-puesto {
	color: var( --sjo-v-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* La primera en rojo: es la única distinción que hace el diseño, y basta. */
.sjo-s__casa.es-primera .sjo-s__casa-puesto {
	color: var( --wp--preset--color--rojo, #e00026 );
}

.sjo-s__casa-nombre {
	margin: 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sjo-s__casa-barra {
	display: block;
	height: 8px;
	border-radius: 999px;
	background-color: var( --wp--preset--color--azul-100, #e0e9f1 );
	overflow: hidden;
}

.sjo-s__casa-parte {
	display: block;
	width: var( --sjo-parte, 0% );
	height: 100%;
	border-radius: 999px;
	background-color: var( --sjo-v-celeste );
}

/* El color de la barra baja con el puesto. Aquí « nth-child » sí vale: el
   marcador no es carrusel, así que nadie duplica sus filas. */
.sjo-s__casa:nth-child( 1 ) .sjo-s__casa-parte {
	background-color: var( --sjo-v-azul );
}

.sjo-s__casa:nth-child( 2 ) .sjo-s__casa-parte {
	background-color: var( --sjo-v-medio );
}

.sjo-s__casa:nth-child( 3 ) .sjo-s__casa-parte {
	background-color: #6ba7cf;
}

.sjo-s__casa-puntos {
	margin: 0;
	text-align: end;
}

.sjo-s__casa-num {
	display: block;
	color: var( --sjo-v-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.5rem, 2.22vw, 2rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.sjo-s__casa-unidad {
	display: block;
	margin: 0.375rem 0 0;
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	line-height: 1.3;
}

.sjo-s__marcador-nota {
	margin: clamp( 2.5rem, 5.56vw, 5rem ) 0 0;
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	line-height: 1.5;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Destinos — el campo de puntos que une el colegio con el mundo
 * ------------------------------------------------------------------------ */

.sjo-s--destinos {
	position: relative;

	/* El lienzo del dibujo es de 1440 x 900, así que la sección mide 62,5 vw de
	   alto: así los nodos —que van en porcentaje— caen exactamente donde los
	   deja el trazo del SVG, sea cual sea el ancho de la ventana. */
	height: clamp( 40rem, 62.5vw, 56.25rem );
	padding-block: 0;
	overflow: hidden;
}

.sjo-s__campo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.sjo-s__campo-reja {
	stroke: var( --sjo-v-azul );
	stroke-width: 1;
	opacity: 0.07;
}

.sjo-s__campo-arco {
	fill: none;
	stroke: var( --sjo-v-medio );
	stroke-width: 1;
	opacity: 0.16;
}

.sjo-s__campo-trazo {
	stroke: var( --sjo-v-medio );
	stroke-width: 1;
	stroke-dasharray: 5 6;
	opacity: 0.55;
}

.sjo-s--destinos .sjo-s__interior {
	position: relative;
	height: 100%;
}

.sjo-s__destinos-cabecera {
	display: grid;
	grid-template-columns: minmax( 0, 1.6fr ) minmax( 0, 1fr );
	gap: clamp( 1.5rem, 6.94vw, 6.25rem );
	align-items: start;
	padding-top: var( --sjo-s-aire );
}

.sjo-s__destinos-txt {
	margin: clamp( 1.25rem, 1.94vw, 1.75rem ) 0 0;
	max-width: 41.25rem;
}

.sjo-s__destinos-txt p {
	margin: 0 0 clamp( 1rem, 1.39vw, 1.25rem );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: 1.75;
}

.sjo-s__destinos-txt p:last-child {
	margin-bottom: 0;
}

.sjo-s__destinos-cifras {
	display: grid;

	/* Tres, siempre: son las tres cifras de la maqueta y en dos filas dejan de
	   leerse como una sola serie. */
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 0.75rem, 1.39vw, 1.25rem );
	margin: clamp( 2rem, 3.61vw, 3.25rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__destinos-cifra-num {
	display: block;
	color: var( --sjo-v-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 2.25rem, 3.33vw, 3rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sjo-s__destinos-cifra-txt {
	display: block;
	margin: clamp( 0.375rem, 0.556vw, 0.5rem ) 0 0;
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	line-height: 1.4;
}

.sjo-s__nodos {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;

	/* No atrapa el ratón: debajo no hay nada que pulsar, pero tampoco tiene por
	   qué tapar lo que haya encima si algún día lo hay. */
	pointer-events: none;
}

/* Acotado a « .sjo-s__nodos » a propósito, y no por gusto de anidar.

   « .sjo-s__nodo » a secas alcanzaba también las cajas del organigrama, que se
   llaman igual y se declaran en paginas.css. Como vida.css se encola después y
   las dos reglas pesan lo mismo, ganaba esta: en el organigrama no hay
   « --sjo-x » ni « --sjo-y », así que las veinte cajas caían en el respaldo
   « 50% / 50% » y se apilaban todas en el mismo punto.

   Estos « li » solo existen dentro de « .sjo-s__nodos », así que el contenedor
   no acota de menos, y a cambio deja el nombre libre para quien lo use fuera. */
.sjo-s__nodos .sjo-s__nodo {
	position: absolute;
	left: var( --sjo-x, 50% );
	top: var( --sjo-y, 50% );
	display: flex;

	/* Centrado, no arriba: lo que tiene que caer en la coordenada es **el
	   punto**, y con « flex-start » el punto se iba al borde de una caja que
	   mide lo que mida su nombre —dos líneas en unos destinos y una en otros—,
	   así que cada punto se desviaba una cantidad distinta de su trazo. */
	align-items: center;
	gap: clamp( 0.5rem, 0.972vw, 0.875rem );

	/* El relleno de la lista se pone a cero aquí: estos « li » no son una lista
	   de lectura sino puntos colocados sobre un dibujo, y cualquier relleno
	   heredado los corre de su sitio. */
	margin: 0;
	padding: 0;

	/* La caja se sube media altura para que su centro —y con él el punto— caiga
	   justo en la coordenada. */
	transform: translateY( -50% );
}

.sjo-s__nodo-punto {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-inline-start: -9px;
	border-radius: 50%;
	background-color: var( --sjo-v-medio );
}

.sjo-s__nodos .sjo-s__nodo.es-tono-claro .sjo-s__nodo-punto {
	background-color: var( --sjo-v-celeste );
}

.sjo-s__nodos .sjo-s__nodo.es-tono-oscuro .sjo-s__nodo-punto {
	background-color: var( --sjo-v-azul );
}

/* El punto de partida lleva aro: es el único de su clase y el dibujo lo
   distingue así. */
/* Con aro, el punto ocupa más y su rótulo necesita más aire. */
.sjo-s__nodos .sjo-s__nodo.es-origen {
	gap: clamp( 1rem, 1.6vw, 1.375rem );
}

.sjo-s__nodos .sjo-s__nodo.es-origen .sjo-s__nodo-punto {
	width: 26px;
	height: 26px;
	margin-inline-start: -13px;
	background-color: var( --wp--preset--color--rojo, #e00026 );
	box-shadow: 0 0 0 9px rgba( 224, 0, 38, 0.14 );
}

.sjo-s__nodo-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 14.75rem;
}

.sjo-s__nodo-rotulo {
	color: var( --sjo-s-gris, #5c6470 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.08rem, 0.153vw, 0.1375rem );
	text-transform: uppercase;
}

.sjo-s__nodos .sjo-s__nodo.es-origen .sjo-s__nodo-rotulo {
	color: var( --wp--preset--color--rojo, #e00026 );
}

.sjo-s__nodo-nombre {
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.9375rem, 1.25vw, 1.125rem );
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
 * Grupos — un enunciado numerado y, al lado, lo que lo compone
 * ------------------------------------------------------------------------ */

.sjo-s__grupos {
	display: grid;
	gap: clamp( 2rem, 4.17vw, 3.75rem );

	/* 96 px bajo la bajada. */
	margin: clamp( 2.5rem, 6.67vw, 6rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__grupo-caja {
	display: grid;

	/* 340 de enunciado y 856 de tarjetas sobre el lienzo de 1240. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2.5fr );
	gap: clamp( 1.5rem, 3.06vw, 2.75rem );
	align-items: start;
}

.sjo-s__grupo-num {
	display: block;
	color: var( --sjo-v-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 2.25rem, 3.33vw, 3rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sjo-s__grupo-tit {
	margin: clamp( 1rem, 1.67vw, 1.5rem ) 0 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sjo-s__grupo-txt {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	line-height: 1.625;
}

.sjo-s__grupo-items {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 1.94vw, 1.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjo-s__grupo-item {
	box-sizing: border-box;
	padding: clamp( 1.5rem, 2.22vw, 2rem );
	border-radius: var( --sjo-v-forma );
	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s__grupo-item-rotulo {
	margin: 0 0 clamp( 0.5rem, 0.833vw, 0.75rem );
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s__grupo-item-tit {
	margin: 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sjo-s__grupo-item-txt {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	line-height: 1.625;
}

/* ---------------------------------------------------------------------------
 * Escalera — columnas que suben, una por escalón
 * ------------------------------------------------------------------------ */

.sjo-s--escalera {
	/* La base y el paso de la subida. Con cinco peldaños dan 200, 276, 352, 428
	   y 504 px de alto, que es lo que mide la maqueta; con tres, la escalera
	   sigue subiendo igual, solo que más corta. */
	--sjo-escalera-base: clamp( 9rem, 13.89vw, 12.5rem );
	--sjo-escalera-paso: clamp( 2rem, 5.28vw, 4.75rem );
}

.sjo-s__escalera {
	display: grid;
	grid-template-columns: repeat( var( --sjo-total, 5 ), minmax( 0, 1fr ) );
	gap: clamp( 0.375rem, 0.694vw, 0.625rem );
	align-items: end;

	/* 96 px bajo la bajada. */
	margin: clamp( 2.5rem, 6.67vw, 6rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__grada {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: calc( var( --sjo-escalera-base ) + var( --sjo-i, 0 ) * var( --sjo-escalera-paso ) );
	padding: clamp( 1.25rem, 2.08vw, 1.875rem );

	/* Se apoyan en una misma línea, así que solo se redondea por arriba. */
	border-radius: 0 24px 0 0;
	background-color: #d7e5f0;
}

.sjo-s__grada.es-tono-1 {
	background-color: var( --wp--preset--color--azul-200, #bcd0e0 );
}

.sjo-s__grada.es-tono-2 {
	background-color: var( --sjo-v-celeste );
}

.sjo-s__grada.es-tono-3 {
	background-color: var( --sjo-v-medio );
}

.sjo-s__grada.es-tono-4 {
	background-color: var( --sjo-v-azul );
}

.sjo-s__grada-num {
	color: rgba( 0, 64, 120, 0.5 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 700;
	letter-spacing: 0.1em;
}

.sjo-s__grada-nivel {
	margin: clamp( 0.375rem, 0.556vw, 0.5rem ) 0 0;
	color: var( --sjo-v-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.08rem, 0.153vw, 0.1375rem );
	text-transform: uppercase;
}

.sjo-s__grada-sigla {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --sjo-v-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.75rem, 2.5vw, 2.25rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sjo-s__grada-nombre {
	margin: clamp( 0.5rem, 0.833vw, 0.75rem ) 0 0;
	color: var( --sjo-s-gris, #5c6470 );
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	line-height: 1.4;
}

/* Sobre los dos tonos oscuros se invierte la tinta entera. */
.sjo-s__grada.es-tono-3 .sjo-s__grada-num,
.sjo-s__grada.es-tono-4 .sjo-s__grada-num {
	color: rgba( 255, 255, 255, 0.55 );
}

.sjo-s__grada.es-tono-3 .sjo-s__grada-nivel,
.sjo-s__grada.es-tono-4 .sjo-s__grada-nivel,
.sjo-s__grada.es-tono-3 .sjo-s__grada-sigla,
.sjo-s__grada.es-tono-4 .sjo-s__grada-sigla {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__grada.es-tono-3 .sjo-s__grada-nombre,
.sjo-s__grada.es-tono-4 .sjo-s__grada-nombre {
	color: rgba( 255, 255, 255, 0.82 );
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió a «Fichas»
 *
 * La ficha de siempre es compacta —pictograma, titular y numeral en una línea—.
 * Vida Sanjo pide otra: alta, con rótulo, párrafo y un enlace al pie. Es la
 * misma sección con otra forma, no una sección nueva: el encabezado, la nota y
 * el carrusel de móvil son los mismos.
 * ------------------------------------------------------------------------ */

.sjo-s--fichas.es-columnas-4 .sjo-s__fichas {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha {
	/* Relativa por la papeleta, que se ancla a su esquina. */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
	padding: clamp( 1.5rem, 2.5vw, 2.25rem );
	border-radius: var( --sjo-v-forma, 0 24px 24px 24px );
	background-color: var( --wp--preset--color--crema, #f4f1ec );
}

/* Sobre crema la tarjeta crema no se vería; pasa a blanca, como en el resto de
   la familia. */
.sjo-s--fichas.es-estilo-tarjeta.es-fondo-crema .sjo-s__ficha {
	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-azul {
	background-color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-crema {
	background-color: var( --wp--preset--color--crema, #f4f1ec );
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-blanco {
	background-color: var( --wp--preset--color--base, #fff );
}

/* La fotografía de la tarjeta sale del relleno: en la maqueta llega a los tres
   bordes y el texto empieza por debajo. */
.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-con-foto {
	padding: 0;
	background-color: transparent;
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-foto {
	margin: 0 0 clamp( 1.25rem, 1.94vw, 1.75rem );
	border-radius: var( --sjo-v-forma, 0 24px 24px 24px );
	overflow: hidden;
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-foto img {
	display: block;
	width: 100%;
	height: clamp( 12rem, 18.47vw, 16.625rem );
	object-fit: cover;
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-rotulo {
	margin: 0 0 clamp( 0.5rem, 0.833vw, 0.75rem );
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
	text-transform: uppercase;
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-azul .sjo-s__ficha-rotulo {
	color: rgba( 201, 220, 234, 0.9 );
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-tit {
	color: var( --sjo-s-tinta, #14181f );
	font-size: clamp( 1.25rem, 1.67vw, 1.5rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-azul .sjo-s__ficha-tit {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-txt {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --sjo-s-gris, #5c6470 );
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.625;
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-azul .sjo-s__ficha-txt {
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-num {
	order: -1;
	margin: 0 0 clamp( 0.75rem, 1.11vw, 1rem );
	color: var( --wp--preset--color--rojo, #e00026 );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	letter-spacing: 0.1em;
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-azul .sjo-s__ficha-num {
	color: rgba( 255, 255, 255, 0.7 );
}

/* El pie se pega al fondo de la tarjeta aunque el párrafo sea corto: así los
   enlaces de una fila quedan todos a la misma altura. */
.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-pie {
	margin: auto 0 0;
	padding-top: clamp( 1.5rem, 2.22vw, 2rem );
}

.sjo-s__ficha-enlace {
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	font-weight: 700;
	text-decoration: none;
}

.sjo-s__ficha-enlace::after {
	content: " \2192";
}

.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha.es-tono-azul .sjo-s__ficha-enlace {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__ficha-enlace:hover,
.sjo-s__ficha-enlace:focus-visible {
	text-decoration: underline;
}

/* La papeleta de «De la lista a la urna»: un cuadro vacío en los pasos previos
   y uno marcado en el último. Lo dibuja el CSS porque es un cuadrado y una
   cruz: no hace falta un SVG para eso. */
.sjo-s__ficha-marca {
	position: absolute;
	top: clamp( 1.5rem, 2.5vw, 2.25rem );
	right: clamp( 1.5rem, 2.5vw, 2.25rem );
	width: 22px;
	height: 22px;
	border: 1.5px solid rgba( 0, 64, 120, 0.3 );
	border-radius: 4px;
}

.sjo-s__ficha-marca.es-marcada {
	border-color: var( --wp--preset--color--rojo, #e00026 );
	background-color: var( --wp--preset--color--rojo, #e00026 );
}

/* La cruz de la papeleta marcada: dos barras blancas cruzadas. Son dos
   pseudoelementos y no un SVG porque son dos rectángulos girados. */
.sjo-s__ficha-marca.es-marcada::before,
.sjo-s__ficha-marca.es-marcada::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s__ficha-marca.es-marcada::before {
	transform: translate( -50%, -50% ) rotate( 45deg );
}

.sjo-s__ficha-marca.es-marcada::after {
	transform: translate( -50%, -50% ) rotate( -45deg );
}
/* ---------------------------------------------------------------------------
 * Lo que se le añadió a «Frentes»: el estilo « bandas »
 *
 * El mismo acordeón, apilado a todo lo ancho. Cada cabecera es una baldosa
 * crema con su numeral fantasma, su nombre, su segunda línea y, a la derecha,
 * cuántas piezas trae dentro.
 * ------------------------------------------------------------------------ */

.sjo-s--frentes.es-estilo-bandas .sjo-s__frentes {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 0.75rem, 1.11vw, 1rem );
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente {
	border-radius: var( --sjo-v-forma, 0 24px 24px 24px );
	background-color: var( --wp--preset--color--crema, #f4f1ec );
	overflow: hidden;
}

.sjo-s--frentes.es-estilo-bandas.es-fondo-crema .sjo-s__frente {
	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente.es-abierto {
	background-color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-cabeza {
	display: grid;
	grid-template-columns: clamp( 3.5rem, 9.72vw, 8.75rem ) minmax( 0, 1fr ) auto auto;
	align-items: center;
	gap: clamp( 0.75rem, 1.67vw, 1.5rem );
	padding: clamp( 1.25rem, 2.08vw, 1.875rem ) clamp( 1.25rem, 2.08vw, 1.875rem );
}

/* El numeral fantasma: grande, en azul claro, detrás del nombre. */
.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-num {
	color: var( --wp--preset--color--celeste, #a7c6dd );
	font-size: clamp( 2.25rem, 3.33vw, 3rem );
	letter-spacing: -0.03em;
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-nombre {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-tit {
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente.es-abierto .sjo-s__frente-tit {
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-sub {
	color: var( --sjo-s-gris, #5c6470 );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	font-weight: 400;
	line-height: 1.4;
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente.es-abierto .sjo-s__frente-sub {
	color: rgba( 201, 220, 234, 0.85 );
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-apunte {
	color: var( --wp--preset--color--azul-medio, #006ba1 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	font-weight: 700;
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente.es-abierto .sjo-s__frente-apunte {
	color: var( --wp--preset--color--celeste, #a7c6dd );
}

/* En bandas el signo no se va al pie: la cabecera es una fila y le toca el
   extremo derecho. */
.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-signo {
	margin-top: 0;
}

.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-panel {
	padding: 0 clamp( 1.25rem, 2.08vw, 1.875rem ) clamp( 1.75rem, 2.78vw, 2.5rem )
		calc( clamp( 3.5rem, 9.72vw, 8.75rem ) + clamp( 2rem, 3.75vw, 3.375rem ) );
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió a «Áreas»: la tira
 *
 * Tres o cuatro columnas cortas con el numeral encima del nombre. Es la tira de
 * valores del deporte y la de cargos de una casa: la continuación de la sección
 * de arriba, no una lista larga.
 * ------------------------------------------------------------------------ */

.sjo-s--areas.es-tira .sjo-s__areas {
	grid-template-columns: repeat( auto-fit, minmax( clamp( 10rem, 15.97vw, 14.375rem ), 1fr ) );
	gap: clamp( 1.75rem, 3.06vw, 2.75rem );
	margin: clamp( 1.75rem, 3.89vw, 3.5rem ) 0 0;
}

.sjo-s--areas.es-tira .sjo-s__area {
	grid-template-columns: minmax( 0, 1fr );
	row-gap: clamp( 0.75rem, 1.11vw, 1rem );
	align-content: start;
}

.sjo-s--areas.es-tira .sjo-s__area-tit {
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Sin numeral la tira es solo nombre y texto: los cargos de una casa no son una
   secuencia y numerarlos insinuaría un orden que no existe. */
.sjo-s--areas.es-numeral-ninguno .sjo-s__area-num {
	display: none;
}

/* La tira que va pegada a la sección de arriba no repite su aire de cabecera. */
.sjo-s--areas.es-tira .sjo-s__encabezado.es-solo-rotulo {
	max-width: none;
}

.sjo-s__encabezado.es-solo-rotulo {
	margin-bottom: clamp( 1rem, 1.67vw, 1.5rem );
}

/* ---------------------------------------------------------------------------
 * Retratos en carrusel — «Sanjosefinos que hoy destacan»
 *
 * La misma sección que el Consejo Directivo, con otra forma: fichas anchas que
 * se recorren con flechas en vez de cinco retratos verticales en fila.
 * ------------------------------------------------------------------------ */

.sjo-s--retratos.es-carrusel {
	/* El hueco entre fichas, aparte: hace falta dos veces —para separarlas y
	   para descontarlo del ancho de cada una—. */
	--sjo-retratos-hueco: clamp( 1rem, 1.39vw, 1.25rem );

	/* Tres fichas justas, ni una partida por la mitad. Se reparte el ancho de
	   la pista entre las que caben en vez de fijar 380 px: con una medida fija,
	   en cualquier pantalla que no sea 1440 la cuarta asomaba a medias, y media
	   ficha no se lee ni se sabe si hay que arrastrar. */
	--sjo-retratos-caben: 3;
	--sjo-carrusel-ancho: calc(
		( 100% - ( var( --sjo-retratos-caben ) - 1 ) * var( --sjo-retratos-hueco ) )
		/ var( --sjo-retratos-caben )
	);
}

/* En tabletas caben dos; en móvil, una. */
@media ( max-width: 1023px ) {
	.sjo-s--retratos.es-carrusel {
		--sjo-retratos-caben: 2;
	}
}

.sjo-s--retratos.es-carrusel .sjo-s__retratos {
	display: flex;
	grid-template-columns: none;
	gap: var( --sjo-retratos-hueco );
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sjo-s--retratos.es-carrusel .sjo-s__retratos::-webkit-scrollbar {
	display: none;
}

.sjo-s--retratos.es-carrusel .sjo-s__retrato {
	flex: 0 0 var( --sjo-carrusel-ancho );
	scroll-snap-align: start;
}

/* Apaisada: la ficha de un exalumno lleva su retrato en horizontal, no el
   vertical de un retrato de carné. */
.sjo-s--retratos.es-carrusel .sjo-s__retrato-caja {
	aspect-ratio: 380 / 260;
	background-color: rgba( 0, 64, 120, 0.09 );
}

/* Mientras no hay fotografía, el sitio reservado se nombra. Va en el CSS y no
   en el marcado porque es lo que se ve, no lo que se dice: en cuanto llegue la
   fotografía desaparece sin que nadie tenga que borrar nada. */
.sjo-s--retratos.es-carrusel .sjo-s__retrato-pic {
	display: none;
}

.sjo-s--retratos.es-carrusel .sjo-s__retrato-caja::after {
	content: "RETRATO";
	color: rgba( 0, 64, 120, 0.35 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.6875rem, 0.833vw, 0.75rem );
	font-weight: 600;
	letter-spacing: clamp( 0.1rem, 0.236vw, 0.2125rem );
}

.sjo-s--retratos.es-carrusel .sjo-s__retrato-caja:has( .sjo-s__retrato-foto )::after {
	content: none;
}

.sjo-s--retratos.es-carrusel .sjo-s__retrato-nombre {
	color: var( --sjo-v-azul );
	font-size: clamp( 1.0625rem, 1.39vw, 1.25rem );
}

.sjo-s__retrato-detalle {
	margin: 0.375rem 0 0;
	color: var( --sjo-s-gris, #5c6470 );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	line-height: 1.5;
}

/* Las dos flechas del encabezado. Redondas y de contorno, como en la maqueta. */
.sjo-s__retratos-controles {
	display: flex;
	gap: 0.75rem;
	margin-top: clamp( 1rem, 4.44vw, 4rem );
}

.sjo-s__retratos-controles .sjo-s__control {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba( 0, 64, 120, 0.3 );
	border-radius: 50%;
	background: none;
	color: var( --sjo-v-azul );
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.sjo-s__retratos-controles .sjo-s__control:hover,
.sjo-s__retratos-controles .sjo-s__control:focus-visible {
	border-color: var( --sjo-v-azul );
	background-color: rgba( 0, 64, 120, 0.08 );
}

/* ---------------------------------------------------------------------------
 * Móvil
 *
 * A 390 px la maqueta rehace varias de estas secciones, no solo las estrecha:
 * la tesela deja de ser una fotografía con el nombre encima y pasa a ser
 * fotografía arriba y texto debajo; el campo de destinos deja de ser un mapa y
 * se convierte en una ruta vertical; el marcador parte cada casa en dos líneas.
 * Todo eso está aquí y no en el marcado: una sola escritura, dos formas.
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {
	.sjo-s__apunte-reja,
	.sjo-s__marcador-cabecera,
	.sjo-s__destinos-cabecera {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Esta cabecera es una fila, no una reja: la cifra se pone debajo del
	   titular, que si no se queda en una columna de cuatro palabras. */
	.sjo-s__destacadas-cabecera {
		flex-direction: column;
		gap: clamp( 1.5rem, 2.78vw, 2.5rem );
	}

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

	.sjo-s__grupo-caja {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s__destacadas-cifra {
		text-align: start;
	}
}

@media ( max-width: 781px ) {

	/* --- Teselas --- */

	.sjo-s__teselas {
		display: flex;
		grid-template-columns: none;
		gap: clamp( 1rem, 1.39vw, 1.25rem );
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.sjo-s__teselas::-webkit-scrollbar {
		display: none;
	}

	.sjo-s__tesela {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		min-height: 0;
		scroll-snap-align: start;
	}

	/* La tarjeta de móvil: fotografía arriba y texto debajo, sobre el fondo de
	   la sección. El velo sobra —el nombre ya no va encima de la fotografía— y
	   la caja deja de ser azul. */
	.sjo-s__tesela-caja {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		overflow: visible;
	}

	.sjo-s__tesela-foto {
		position: static;
		display: block;
		width: 100%;
		height: clamp( 8.75rem, 38.46vw, 11.25rem );
		border-radius: var( --sjo-v-forma );
		overflow: hidden;
	}

	.sjo-s__tesela-foto img {
		position: static;
		transform: none;
	}

	.sjo-s__tesela-velo {
		display: none;
	}

	.sjo-s__tesela-cuerpo {
		flex-grow: 1;
		gap: clamp( 0.5rem, 2.05vw, 0.625rem );
		padding: clamp( 1rem, 4.1vw, 1.25rem ) 0 0;
	}

	.sjo-s__tesela-tit {
		color: var( --sjo-v-azul );
		font-size: 1.125rem;
	}

	.sjo-s__tesela-txt {
		color: var( --sjo-s-gris, #5c6470 );
		font-size: 0.875rem;
	}

	.sjo-s__tesela-enlace {
		display: block;
		margin-top: auto;
		padding-top: clamp( 0.5rem, 2.05vw, 0.625rem );
		color: var( --wp--preset--color--rojo, #e00026 );
		font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
		font-size: 0.8125rem;
		font-weight: 700;
	}

	/* --- Apunte --- */

	.sjo-s__apunte-reja {
		gap: clamp( 1.75rem, 8.21vw, 2.5rem );
	}

	.sjo-s__apunte-punto {
		grid-template-columns: 2.25rem 1fr;
	}

	/* --- Sigla --- */

	.sjo-s__sigla-letras {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: clamp( 1.25rem, 5.13vw, 1.5rem );
	}

	/* --- Destacadas --- */

	.sjo-s__destacadas-items:has( > :nth-child( 3 ) ) {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* --- Una destacada y las demás, en carrusel --- */

	/* La tarjeta principal y cada par de acompañantes son una tarjeta del
	   carrusel: tres en total —«Presidencia» y las secretarías de dos en dos—,
	   que es lo que dibuja la maqueta móvil. */
	.sjo-s--destacadas.es-carrusel .sjo-s__destacadas {
		display: flex;
		grid-template-columns: none;
		grid-template-rows: none;
		gap: clamp( 1rem, 1.39vw, 1.25rem );
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.sjo-s--destacadas.es-carrusel .sjo-s__destacadas::-webkit-scrollbar {
		display: none;
	}

	.sjo-s--destacadas.es-carrusel .sjo-s__destacada,
	.sjo-s--destacadas.es-carrusel .sjo-s__destacadas-grupo {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		scroll-snap-align: start;
	}

	.sjo-s--destacadas.es-carrusel .sjo-s__destacadas-grupo {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		align-content: start;
		gap: clamp( 1.5rem, 7.18vw, 2rem );
	}

	/* Apiladas en una tarjeta que no llena la pantalla, la principal no tiene
	   contra qué estirarse: se queda con el alto de su texto. */
	.sjo-s--destacadas.es-carrusel .sjo-s__destacada {
		grid-row: auto;
	}

	/* --- Mosaico --- */

	.sjo-s__mosaico {
		grid-template-columns: minmax( 0, 1fr );

		/* Apiladas, cada baldosa recupera su propia forma: la de todas juntas
		   solo tiene sentido cuando forman un bloque. */
		gap: clamp( 0.75rem, 3.08vw, 1rem );
		border-radius: 0;
		overflow: visible;
	}

	.sjo-s__baldosa {
		min-height: clamp( 15rem, 71.79vw, 18.875rem );
		border-radius: var( --sjo-v-forma );
		overflow: hidden;
	}

	/* Con carrusel la pila se pone de lado: es lo que pide la maqueta donde hay
	   seis baldosas y apilarlas dejaría la sección larguísima. */
	.sjo-s--mosaico[ data-sjo-carrusel ] .sjo-s__mosaico {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.sjo-s--mosaico[ data-sjo-carrusel ] .sjo-s__mosaico::-webkit-scrollbar {
		display: none;
	}

	.sjo-s--mosaico[ data-sjo-carrusel ] .sjo-s__baldosa {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		scroll-snap-align: start;
	}

	/* --- La ficha de detalle --- */

	.sjo-s__ficha-datos {
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 0.75rem, 3.08vw, 1rem );
	}

	/* --- Áreas en tira --- */

	/* La tira no es carrusel —son cuatro palabras y arrastrar para leer la
	   segunda sería absurdo—, así que en móvil se apila: el numeral a la
	   izquierda y el nombre a su lado, como en la maqueta. Hay que devolverle el
	   « grid » porque paginas.css pasa todas las áreas a fila en este ancho. */
	.sjo-s--areas.es-tira .sjo-s__areas {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 1.25rem, 5.13vw, 1.5rem );
		overflow: visible;
	}

	/* En móvil, paginas.css convierte cada área en una tarjeta blanca de
	   carrusel y esconde su numeral. La tira no es eso: es una lista corta que
	   continúa la sección de arriba, así que recupera su forma. */
	.sjo-s--areas.es-tira .sjo-s__area {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		column-gap: clamp( 1rem, 4.1vw, 1.25rem );
		align-items: center;
		flex: none;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.sjo-s--areas.es-tira .sjo-s__area-num {
		display: block;
		font-size: 2.25rem;
	}

	/* Con texto, el numeral va **encima** del nombre y no a su lado: al lado
	   deja el nombre en una columna de dos palabras y el numeral flotando a
	   media altura del párrafo. Es lo que hace la maqueta móvil en «Cómo se
	   gana el Interhouse»; en la tira sin texto —los cuatro valores del
	   deporte— el numeral sí va al lado, porque solo tiene una palabra que
	   acompañar. */
	.sjo-s--areas.es-tira .sjo-s__area:has( .sjo-s__area-txt ) {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: clamp( 0.5rem, 2.05vw, 0.625rem );
	}

	.sjo-s--areas.es-tira .sjo-s__area:has( .sjo-s__area-txt ) .sjo-s__area-num {
		line-height: 1;
	}

	.sjo-s--areas.es-tira .sjo-s__area-tit {
		font-size: 1.125rem;
	}

	/* Sin numeral no hay dos columnas que repartir, y el numeral sigue sin
	   pintarse: la regla que lo devuelve a la tira cuenta más clases que la que
	   lo apaga, así que hay que volver a decirlo aquí. */
	.sjo-s--areas.es-tira.es-numeral-ninguno .sjo-s__area {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s--areas.es-tira.es-numeral-ninguno .sjo-s__area-num {
		display: none;
	}

	/* --- Retratos en carrusel --- */

	/* Una ficha por pantalla: a 326 px, dos dejan la segunda en un asomo que
	   no se lee y hace dudar de si hay que arrastrar o no. */
	.sjo-s--retratos.es-carrusel {
		--sjo-retratos-caben: 1;
	}

	.sjo-s--retratos.es-carrusel .sjo-s__retrato {
		flex-basis: var( --sjo-carrusel-ancho, 100% );
	}

	/* --- Marcador --- */

	/* Cada casa en dos líneas: puesto, nombre y puntos arriba; la barra, a todo
	   lo ancho, debajo. A 326 px no cabe todo en una fila sin partir el nombre. */
	.sjo-s__casa {
		grid-template-columns: 2.75rem minmax( 0, 1fr ) auto;
		gap: 0.5rem 0.75rem;
	}

	/* El sitio de cada pieza se escribe entero: en el marcado la barra va antes
	   que los puntos —es lo que se lee primero con un lector de pantalla— y en
	   móvil tiene que dibujarse debajo de los dos. */
	.sjo-s__casa-puesto {
		grid-area: 1 / 1;
	}

	.sjo-s__casa-nombre {
		grid-area: 1 / 2;
	}

	.sjo-s__casa-puntos {
		grid-area: 1 / 3;
	}

	.sjo-s__casa-barra {
		grid-area: 2 / 1 / 2 / -1;
	}

	.sjo-s__casa-num {
		display: inline;
		font-size: 1.25rem;
	}

	/* El rótulo de la unidad se dice una vez, tras la primera cifra: repetirlo
	   cuatro veces en una columna estrecha es ruido. */
	.sjo-s__casa:not( :first-child ) .sjo-s__casa-unidad {
		display: none;
	}

	.sjo-s__casa-unidad {
		display: inline;
		margin: 0 0 0 0.375rem;
	}

	.sjo-s__casas {
		gap: clamp( 1.75rem, 8.21vw, 2.5rem );
	}

	/* --- Destinos --- */

	/* En móvil deja de ser un mapa: no hay ancho para separar cinco puntos sin
	   que los nombres se pisen. La maqueta lo convierte en una ruta vertical,
	   que dice lo mismo —de dónde se sale y adónde se llega— en una columna. */
	.sjo-s--destinos {
		height: auto;
		padding-block: var( --sjo-s-aire );
	}

	.sjo-s__campo {
		display: none;
	}

	.sjo-s__destinos-cabecera {
		padding-top: 0;
	}

	.sjo-s__destinos-cifras {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: clamp( 0.5rem, 2.56vw, 0.75rem );
	}

	.sjo-s__destinos-cifra-num {
		font-size: 1.75rem;
	}

	.sjo-s__nodos {
		position: relative;
		inset: auto;
		display: grid;
		gap: clamp( 1.5rem, 7.18vw, 2rem );
		margin: clamp( 2rem, 10.26vw, 2.5rem ) 0 0;
		padding-inline-start: 1.25rem;
		pointer-events: auto;
	}

	/* La línea de la ruta: un hilo vertical que une los nodos. Es el mismo
	   dibujo del mapa, puesto de pie. */
	.sjo-s__nodos::before {
		content: "";
		position: absolute;
		top: 0.5rem;
		bottom: 0.5rem;
		left: 0;
		width: 2px;
		background-color: rgba( 0, 107, 161, 0.3 );
	}

	.sjo-s__nodos .sjo-s__nodo {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
	}

	.sjo-s__nodo-punto {
		width: 10px;
		height: 10px;
		margin-inline-start: -1.5rem;
		margin-top: 0.375rem;
	}

	.sjo-s__nodos .sjo-s__nodo.es-origen .sjo-s__nodo-punto {
		width: 14px;
		height: 14px;
		margin-inline-start: calc( -1.5rem - 2px );
		box-shadow: 0 0 0 5px rgba( 224, 0, 38, 0.14 );
	}

	.sjo-s__nodo-cuerpo {
		max-width: none;
	}

	/* --- Grupos --- */

	.sjo-s__grupo-items {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s__grupos {
		gap: clamp( 2.5rem, 12.31vw, 3.5rem );
	}

	/* --- Escalera --- */

	/* De pie una columna no puede subir contra nada, así que la escalera se
	   tumba: las filas crecen **a lo ancho**, de 182 px a los 326 de la pista,
	   que es lo que dibuja la maqueta móvil. El escalón sigue estando; lo que
	   cambia es el eje. */
	.sjo-s__escalera {
		grid-template-columns: minmax( 0, 1fr );
		justify-items: start;
		gap: clamp( 0.5rem, 2.05vw, 0.625rem );
	}

	.sjo-s__grada {
		/* Lo que le falta a cada peldaño para llegar al borde: uno menos por
		   cada escalón que le queda por subir. */
		width: calc( 100% - ( var( --sjo-total, 5 ) - 1 - var( --sjo-i, 0 ) ) * 11% );
		min-width: 9rem;
		height: auto;
		padding: clamp( 1rem, 4.1vw, 1.25rem );
		border-radius: 0 16px 16px 16px;
	}

	.sjo-s__grada-nivel {
		margin: 0.125rem 0 0;
	}

	.sjo-s__grada-sigla {
		margin: 0.375rem 0 0;
		font-size: 1.75rem;
	}

	.sjo-s__grada-nombre {
		margin: 0.25rem 0 0;
	}

	/* --- Fichas --- */

	/* Sin carrusel, la rejilla se queda en una columna: paginas.css las pasa a
	   fila con desbordamiento para todas, y aquí hay que devolverles la pila. */
	.sjo-s--fichas.es-sin-carrusel .sjo-s__fichas {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 1.25rem, 5.13vw, 1.5rem );
		overflow: visible;
	}

	.sjo-s--fichas.es-sin-carrusel .sjo-s__ficha {
		flex: none;
	}

	/* --- Fichas en tarjeta --- */

	.sjo-s--fichas.es-columnas-4 .sjo-s__fichas {
		grid-template-columns: none;
	}

	.sjo-s--fichas.es-estilo-tarjeta .sjo-s__ficha-foto img {
		height: clamp( 9rem, 46.15vw, 11.25rem );
	}

	/* --- Frentes en bandas --- */

	/* La cabecera se parte en dos líneas: el numeral y el nombre arriba, el
	   apunte y el signo debajo. A 326 px las cuatro columnas no caben. */
	.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-cabeza {
		grid-template-columns: 3.5rem minmax( 0, 1fr ) auto;
		gap: 0.5rem 0.75rem;
	}

	.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-num {
		font-size: 2rem;
	}

	.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-apunte {
		grid-column: 2;
	}

	.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-signo {
		grid-row: 1 / span 2;
		grid-column: 3;
		align-self: center;
	}

	.sjo-s--frentes.es-estilo-bandas .sjo-s__frente-panel {
		padding-inline-start: clamp( 1.25rem, 5.13vw, 1.875rem );
	}
}

/* ---------------------------------------------------------------------------
 * Movimiento
 *
 * Lo poco que se mueve aquí es la flecha de «Ver detalle» y el degradado de la
 * barra del marcador. Quien haya pedido que nada se mueva, no ve ni eso.
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.sjo-s__baldosa-flecha,
	.sjo-s__baldosa,
	.sjo-s__tesela,
	.sjo-s__casa-parte {
		transition: none;
	}

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

	.sjo-s__baldosa-abrir:hover .sjo-s__baldosa-flecha {
		transform: none;
	}
}

/* Las copias que cuelga el guion del carrusel ya las apaga paginas.css en
   escritorio, pero con una cuenta de clases menor que la de la tarjeta alta de
   aquí: sin esto, la rejilla salía con las fichas repetidas. Se repite la regla
   con la cuenta suficiente en vez de bajar la de la tarjeta, que es la que
   describe la forma y no debería depender de esto. */
@media ( min-width: 782px ) {
	[ data-sjo-carrusel="movil" ] .sjo-s__ficha.es-copia,
	[ data-sjo-carrusel="movil" ] .sjo-s__tesela.es-copia,
	[ data-sjo-carrusel="movil" ] .sjo-s__baldosa.es-copia {
		display: none;
	}
}