/*
 * Propuesta Educativa.
 *
 * Los siete tipos de sección que estrenan estas cinco páginas —la barra de
 * etapas, la escala en degradado, los peldaños, las filas, los frentes, el
 * diagrama de tres círculos y el explorador de asignaturas— y lo que se le
 * añadió a cuatro que ya existían.
 *
 * Va en su propio archivo y se carga **después de paginas.css**: casi todo lo
 * de aquí cuelga de « .sjo-s », que aquel declara, y varias reglas relevan
 * piezas suyas con la misma cuenta de clases.
 *
 * Las medidas van fluidas y no con los píxeles del Figma, como en el resto del
 * tema: el diseño está hecho sobre un lienzo de 1440, pero nadie garantiza que
 * la pantalla mida eso. Lo que se conserva es la proporción.
 */

/* ---------------------------------------------------------------------------
 * La escala de tonos
 *
 * Cuatro secciones ordenan sus piezas de claro a oscuro: los fundamentos, los
 * peldaños, la barra de etapas y las filas. **No es una interpolación**: son
 * cuatro colores de la paleta, y entre el segundo y el tercero hay un salto
 * deliberado —de un azul apagado a uno saturado— que ninguna mezcla reproduce.
 *
 * El tono viene en una clase y no en « nth-child » a propósito: en móvil estas
 * listas son carrusel, y assets/js/secciones.js duplica sus hijos para dar la
 * vuelta sin fin. Un « nth-child » contaría también las copias y la escala
 * saldría partida por la mitad. La clase viaja con la copia y siempre acierta.
 * ------------------------------------------------------------------------ */

.sjo-s .es-tono-0 {
	--sjo-tono: var( --wp--preset--color--azul-tenue, #c9dcea );
	--sjo-tono-tinta: var( --wp--preset--color--azul, #004078 );
	--sjo-tono-texto: rgba( 0, 42, 80, 0.72 );
}

.sjo-s .es-tono-1 {
	--sjo-tono: var( --wp--preset--color--celeste, #a7c6dd );
	--sjo-tono-tinta: var( --wp--preset--color--azul, #004078 );
	--sjo-tono-texto: rgba( 0, 42, 80, 0.78 );
}

.sjo-s .es-tono-2 {
	--sjo-tono: var( --wp--preset--color--azul-medio, #006ba1 );
	--sjo-tono-tinta: var( --wp--preset--color--base, #fff );
	--sjo-tono-texto: rgba( 255, 255, 255, 0.86 );
}

.sjo-s .es-tono-3,
.sjo-s .es-tono-4 {
	--sjo-tono: var( --wp--preset--color--azul, #004078 );
	--sjo-tono-tinta: var( --wp--preset--color--base, #fff );
	--sjo-tono-texto: rgba( 255, 255, 255, 0.86 );
}

.sjo-s .es-tono-4 {
	--sjo-tono: var( --wp--preset--color--azul-oscuro, #002a50 );
}

/* ---------------------------------------------------------------------------
 * Escala de bloques en degradado
 *
 * El Figma dibuja esta fila de borde a borde de la pantalla. No se hace: en
 * esta página **todo lo demás guarda el canalón** —el encabezado de la propia
 * sección, el de la de arriba y el de la de abajo—, y una fila pegada a los dos
 * bordes en medio de esa columna se lee como un descuadre y no como una
 * decisión. Las bandas que sí sangran en este tema son las de color completo
 * —la cabecera, la de apertura, la de cierre, la de frase—, que ocupan la
 * sección entera y no una pieza suelta dentro de ella.
 *
 * Así que la fila respeta la misma caja que el encabezado y redondea solo sus
 * esquinas exteriores, igual que la barra de etapas: sigue leyéndose como una
 * sola pieza partida y no como cuatro tarjetas sueltas.
 * ------------------------------------------------------------------------ */

.sjo-s__grados {
	display: grid;
	grid-template-columns: repeat( var( --sjo-total, 4 ), 1fr );

	/* La misma columna que « .sjo-s__interior », que es quien encierra al
	   encabezado: la fila empieza y acaba donde acaba el titular. */
	max-width: 83.75rem;
	margin: clamp( 2.5rem, 4.44vw, 4rem ) auto 0;
	padding: 0;
	list-style: none;
	border-radius: 20px;
	overflow: hidden;
}

.sjo-s__grado {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: clamp( 14rem, 18.06vw, 16.25rem );
	padding: clamp( 1.75rem, 2.5vw, 2.25rem ) clamp( 1.5rem, 2.36vw, 2.125rem );
	background-color: var( --sjo-tono );
	color: var( --sjo-tono-tinta );
	overflow: hidden;
}

.sjo-s__grado-num {
	position: relative;
	z-index: 1;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.1em;
	opacity: 0.85;
}

.sjo-s__grado-tit {
	position: relative;
	z-index: 1;
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
	max-width: 15ch;
	color: inherit;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.0625rem, 1.32vw, 1.1875rem );
	font-weight: 700;
	line-height: 1.263;
	letter-spacing: -0.01em;
}

.sjo-s__grado-txt {
	position: relative;
	z-index: 1;
	margin: 0.75rem 0 0;
	color: var( --sjo-tono-texto );
	font-size: 0.875rem;
	line-height: 1.571;
}

/* El numeral gigante del fondo. Entero y con aire debajo: colgando del borde
   quedaba cortado por la mitad y parecía un error de recorte, no un fondo. */
.sjo-s__grado-marca {
	position: absolute;
	inset-inline-start: clamp( 1.5rem, 2.36vw, 2.125rem );
	bottom: clamp( 1.25rem, 1.94vw, 1.75rem );
	z-index: 0;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 3.5rem, 5vw, 4.5rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: currentcolor;
	opacity: 0.16;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Peldaños
 *
 * Tres filas que avanzan hacia la derecha y se oscurecen. El escalón lo pone
 * « --sjo-i » y no un margen fijo: con cuatro peldaños el reparto sigue siendo
 * el mismo y no hay que tocar nada.
 * ------------------------------------------------------------------------ */

.sjo-s__peldanos {
	display: flex;
	flex-direction: column;
	gap: clamp( 1.5rem, 2.22vw, 2rem );
	margin: clamp( 2.5rem, 4.44vw, 4rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__peldano {
	display: grid;
	grid-template-columns: clamp( 12rem, 20.14vw, 18.125rem ) minmax( 0, 1fr );
	align-items: stretch;

	/* El escalón: cada uno arranca un poco más a la derecha y termina un poco
	   antes que el anterior. Ocho centésimas del ancho por peldaño es lo que
	   mide el desplazamiento en la maqueta. */
	margin-inline-start: calc( var( --sjo-i ) * 8% );
	margin-inline-end: calc( ( var( --sjo-total, 3 ) - 1 - var( --sjo-i ) ) * 4% );

	/* La forma de la familia: recta solo en la esquina de arriba a la izquierda,
	   como las tarjetas de colegio, las fichas y los escalones. Redondeando solo
	   por la derecha, la fotografía se quedaba a escuadra contra un panel
	   curvado y el corte se veía. */
	border-radius: 0 28px 28px 28px;
	background-color: var( --sjo-tono );
	color: var( --sjo-tono-tinta );
	overflow: hidden;
}

/* El primero se queda en crema: en la maqueta el recorrido empieza en el fondo
   de la página y solo se despega a partir del segundo. */
.sjo-s__peldano.es-tono-0 {
	--sjo-tono: var( --wp--preset--color--crema, #f4f1ec );
	--sjo-tono-tinta: var( --sjo-s-tinta, #14181f );
	--sjo-tono-texto: var( --sjo-s-gris, #5a6472 );
}

.sjo-s__peldano-foto {
	overflow: hidden;
}

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

.sjo-s__peldano-cuerpo {
	box-sizing: border-box;
	padding: clamp( 1.75rem, 2.78vw, 2.5rem ) clamp( 1.75rem, 3.33vw, 3rem );
}

.sjo-s__peldano-num {
	display: block;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	opacity: 0.85;
}

.sjo-s__peldano-tit {
	margin: 0.75rem 0 0;
	color: inherit;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	font-weight: 700;
	line-height: 1.273;
	letter-spacing: -0.01em;
}

.sjo-s__peldano-txt {
	margin: 1rem 0 0;
	color: var( --sjo-tono-texto );
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* La fotografía suelta de arriba es solo de móvil. */
.sjo-s__peldanos-foto {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Barra de etapas
 *
 * Cada tramo mide lo que dura su etapa. El reparto lo hace « flex-grow » con el
 * peso, así que la barra acaba justa en el borde mida lo que mida la pantalla y
 * añadir una etapa no obliga a recalcular ningún porcentaje.
 * ------------------------------------------------------------------------ */

.sjo-s__etapas {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin: clamp( 2.5rem, 4.44vw, 4rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__etapa {
	position: relative;
	flex: var( --sjo-peso, 1 ) 1 0;
	box-sizing: border-box;
	min-width: 0;
	min-height: clamp( 6.5rem, 9.03vw, 8.125rem );
	padding: clamp( 1.5rem, 2.22vw, 2rem ) clamp( 1.5rem, 2.08vw, 1.875rem );
	background-color: var( --sjo-tono );
	color: var( --sjo-tono-tinta );
}

/* Las esquinas se redondean solo por fuera: la barra es una sola pieza partida,
   no tres cajas sueltas. */
.sjo-s__etapa:first-child {
	border-radius: 20px 0 0 20px;
}

.sjo-s__etapa:last-child {
	border-radius: 0 20px 20px 0;
}

.sjo-s__etapa-nombre {
	margin: 0;
	color: inherit;
	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.182;
	letter-spacing: -0.02em;
}

.sjo-s__etapa-rango {
	margin: 0.5rem 0 0;
	color: var( --sjo-tono-texto );
	font-size: 0.875rem;
	line-height: 1.429;
}

/* El pie va **fuera** del color: cuelga justo bajo su tramo y alineado con su
   borde izquierdo. Por eso se coloca contra la caja de color —« top: 100% »— y
   no se deja en el flujo, donde el color se lo tragaría. */
.sjo-s__etapa-pie {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	margin: 0;
	padding-top: 1rem;
	color: var( --sjo-s-gris, #5a6472 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sjo-s__etapa-caja {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* El tramo que lleva a alguna parte se levanta al señalarlo, para que se note
   que se puede pulsar: una caja de color que no cambia no parece un enlace. */
.sjo-s__etapa.es-enlazada {
	transition: transform 0.3s var( --sjo-fx-curva, ease ), filter 0.3s ease;
}

.sjo-s__etapa.es-enlazada:hover,
.sjo-s__etapa.es-enlazada:focus-within {
	transform: translateY( -4px );
	filter: brightness( 1.06 );
}

.sjo-s__etapa-caja:focus-visible {
	outline: 2px solid var( --wp--preset--color--rojo, #e00026 );
	outline-offset: 4px;
}

/* Al saltar a una sección, que no quede debajo de la cabecera fija ni pegada al
   borde de arriba. */
.sjo-s[ id ] {
	scroll-margin-top: clamp( 4.5rem, 9vw, 7.5rem );
}

/* Y la sección se reserva ese hueco de abajo, o el pie se montaría sobre la
   sección siguiente. */
.sjo-s--etapas .sjo-s__etapas {
	margin-bottom: 3rem;
}

/* ---------------------------------------------------------------------------
 * Filas con fotografía
 * ------------------------------------------------------------------------ */

.sjo-s__filas {
	margin: clamp( 2.5rem, 4.44vw, 4rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__fila {
	display: grid;
	grid-template-columns: clamp( 10rem, 18.06vw, 16.25rem ) minmax( 0, 1fr ) auto;
	align-items: start;
	gap: clamp( 1.5rem, 2.78vw, 2.5rem );
	padding-block: clamp( 1.75rem, 2.78vw, 2.5rem );
}

.sjo-s__fila + .sjo-s__fila {
	border-top: 1px solid var( --wp--preset--color--border, #e4e4e7 );
}

.sjo-s__fila-foto {
	border-radius: 0 20px 20px 20px;
	overflow: hidden;
}

.sjo-s__fila-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 260 / 180;
	object-fit: cover;
}

/* El filete de cada fila se tiñe del tono que le toca: es lo que hace que la
   lista se lea como un recorrido y no como tres bloques sueltos. */
.sjo-s__fila-filete {
	display: block;
	width: 32px;
	height: 4px;
	border-radius: 2px;
	background-color: var( --sjo-tono );
}

.sjo-s__fila-tit {
	margin: 1rem 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.182;
	letter-spacing: -0.02em;
}

.sjo-s__fila-sub {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.538;
}

.sjo-s__fila-txt {
	margin: 1rem 0 0;
	max-width: 46rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.sjo-s__fila-enlace {
	align-self: center;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Frentes en acordeón
 *
 * En escritorio es una fila: el abierto se queda con la mitad y los demás con
 * una columna estrecha. El reparto lo hace « flex » y se anima, que es lo que
 * hace que se lea como un acordeón y no como un cambio de pantalla.
 * ------------------------------------------------------------------------ */

.sjo-s__frentes {
	display: flex;
	align-items: stretch;
	gap: clamp( 0.75rem, 1.11vw, 1rem );
	margin-top: clamp( 2.5rem, 4.44vw, 4rem );
	min-height: clamp( 20rem, 27.36vw, 24.625rem );
}

.sjo-s__frente {
	flex: 0 1 clamp( 8rem, 9.86vw, 8.875rem );
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: 0 24px 24px 24px;
	background-color: var( --wp--preset--color--base, #fff );
	transition: flex-basis 0.45s cubic-bezier( 0.4, 0, 0.2, 1 ), flex-grow 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
	overflow: hidden;
}

.sjo-s__frente.es-abierto {
	flex: 1 1 44%;
	background-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__frente-cabeza {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-grow: 1;
	gap: 0.75rem;
	box-sizing: border-box;
	width: 100%;
	padding: clamp( 1.75rem, 2.78vw, 2.5rem ) clamp( 1.25rem, 2.08vw, 1.875rem );
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.sjo-s__frente-num {
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.39vw, 1.25rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--celeste, #a7c6dd );
}

.sjo-s__frente.es-abierto .sjo-s__frente-num {
	color: var( --wp--preset--color--base, #fff );
}

/* El nombre envuelve al titular y a su segunda línea. En el acordeón de
   siempre esa segunda línea no existe, así que la caja desaparece —« contents »—
   y el titular vuelve a ser hijo directo de la cabecera: la columna queda como
   estaba antes de que «bandas» necesitara agrupar las dos. */
.sjo-s__frente-nombre {
	display: contents;
}

.sjo-s__frente-tit {
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.sjo-s__frente.es-abierto .sjo-s__frente-tit {
	color: var( --wp--preset--color--base, #fff );
	font-size: clamp( 1.25rem, 1.94vw, 1.75rem );
	line-height: 1.214;
}

/* El signo: dos barras que forman un « + » y se quedan en « − » al abrir. Es el
   mismo dibujo que el acordeón del pie, por no tener dos maneras. */
.sjo-s__frente-signo {
	margin-top: auto;
	width: 12px;
	height: 12px;
	background-image:
		linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor );
	background-repeat: no-repeat;
	background-position: center center, center center;
	background-size: 12px 1.5px, 1.5px 12px;
	color: var( --wp--preset--color--rojo, #e00026 );
	transition: background-size 0.25s ease;
}

.sjo-s__frente.es-abierto .sjo-s__frente-signo {
	background-size: 12px 1.5px, 1.5px 0;
	color: var( --wp--preset--color--celeste, #a7c6dd );
}

.sjo-s__frente-panel {
	padding: 0 clamp( 1.25rem, 2.08vw, 1.875rem ) clamp( 1.75rem, 2.78vw, 2.5rem );
}

.sjo-s__frente-rotulo {
	margin: 0;
	color: var( --wp--preset--color--celeste, #a7c6dd );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.sjo-s__frente-txt {
	margin: 1rem 0 0;
	max-width: 32rem;
	color: rgba( 255, 255, 255, 0.86 );
	font-size: 0.9375rem;
	line-height: 1.733;
}

/* Sin el guion, los cinco paneles se ven seguidos. Que se lean. */
.sjo-s__frente-panel[ hidden ] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Diagrama de tres círculos
 *
 * Tres discos del mismo tamaño colocados en triángulo y fundidos en
 * « multiply »: donde se solapan sale el color oscuro sin pintar una sola
 * intersección a mano. Si el navegador no entiende la mezcla, se ven tres
 * discos planos y la leyenda sigue diciendo lo mismo.
 * ------------------------------------------------------------------------ */

.sjo-s__venn-reja {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: center;
	gap: clamp( 2rem, 4.44vw, 4rem );
}

.sjo-s__dimensiones {
	display: flex;
	flex-direction: column;
	gap: clamp( 1rem, 1.53vw, 1.375rem );
	margin: clamp( 1.75rem, 2.78vw, 2.5rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__dimension {
	display: grid;
	grid-template-columns: 20px minmax( 0, 1fr );
	align-items: start;
	gap: 1rem;
}

.sjo-s__dimension-muestra {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background-color: var( --sjo-venn-color );
}

.sjo-s__dimension-datos {
	display: block;
}

.sjo-s__dimension-nombre {
	display: block;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	font-weight: 700;
	line-height: 1.25;
}

.sjo-s__dimension-txt {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.571;
}

/* Los tres colores del diagrama, por orden. Son los de la maqueta: el rojo de
   la marca para la pastoral y dos azules para las otras dos. */
.sjo-s__dimension,
.sjo-s__venn-disco {
	--sjo-venn-color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__dimension[ style*="--sjo-i: 0" ],
.sjo-s__venn-disco[ style*="--sjo-i: 0" ] {
	--sjo-venn-color: #e8415f;
}

.sjo-s__dimension[ style*="--sjo-i: 1" ],
.sjo-s__venn-disco[ style*="--sjo-i: 1" ] {
	--sjo-venn-color: #4a7ba7;
}

.sjo-s__dimension[ style*="--sjo-i: 2" ],
.sjo-s__venn-disco[ style*="--sjo-i: 2" ] {
	--sjo-venn-color: #3f92b5;
}

.sjo-s__venn {
	position: relative;
	width: min( 100%, 32.5rem );
	margin-inline: auto;
	aspect-ratio: 1 / 0.92;

	/* Los discos se miden contra esta caja, así que todo escala junto. */
	container-type: inline-size;
}

/* « border-box » no es de adorno: sin él el disco sale ovalado.
 *
 * « aspect-ratio: 1 » cuadra la **caja de contenido**, y el relleno que sube o
 * baja el rótulo dentro del disco se suma después: 322 de ancho por 354 de
 * alto, un huevo. Con « border-box » el relleno va por dentro del cuadrado y el
 * disco vuelve a ser un disco. */
.sjo-s__venn-disco {
	position: absolute;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 62cqw;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var( --sjo-venn-color );
	mix-blend-mode: multiply;
}

/* Arriba al centro, abajo a la izquierda y abajo a la derecha. */
.sjo-s__venn-disco[ style*="--sjo-i: 0" ] {
	top: 0;
	inset-inline-start: 19cqw;
	align-items: start;
	padding-top: 6cqw;
}

.sjo-s__venn-disco[ style*="--sjo-i: 1" ] {
	bottom: 0;
	inset-inline-start: 0;
	align-items: end;
	padding-bottom: 8cqw;
}

.sjo-s__venn-disco[ style*="--sjo-i: 2" ] {
	bottom: 0;
	inset-inline-end: 0;
	align-items: end;
	padding-bottom: 8cqw;
}

.sjo-s__venn-rotulo {
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.625rem, 1.8cqw, 0.75rem );
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* La pastilla del cruce va por encima de la mezcla: es lo único que no se funde
   con nada, porque es la conclusión y tiene que leerse. */
.sjo-s__venn-centro {
	position: absolute;

	/* En el medio de donde se cruzan las tres, no en su borde de arriba. Con los
	   discos cuadrados esa zona baja: empieza donde acaban los de abajo y acaba
	   donde acaba el de arriba. */
	top: 53%;
	left: 50%;
	z-index: 2;
	display: grid;
	justify-items: center;
	transform: translate( -50%, -50% );
	padding: clamp( 0.75rem, 2cqw, 1.125rem ) clamp( 1.25rem, 3.4cqw, 2rem );
	border-radius: 999px;
	background-color: var( --wp--preset--color--base, #fff );
	white-space: nowrap;
}

.sjo-s__venn-centro-tit {
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.9375rem, 2.8cqw, 1.125rem );
	font-weight: 700;
	line-height: 1.2;
}

.sjo-s__venn-centro-pie {
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.625rem, 1.7cqw, 0.75rem );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Explorador de asignaturas
 * ------------------------------------------------------------------------ */

.sjo-s__explorador-cabecera {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: start;
	gap: clamp( 2rem, 4.44vw, 4rem );
}

.sjo-s__explorador-entrada .sjo-s__bajada {
	margin-top: 0;
}

.sjo-s__explorador-pista {
	margin: 1.5rem 0 0;
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.sjo-s__explorador {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: start;
	gap: clamp( 2rem, 4.44vw, 4rem );
	margin-top: clamp( 2.5rem, 4.44vw, 4rem );
}

.sjo-s__grupo-rotulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0.75rem;
	color: var( --sjo-s-gris, #5a6472 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.sjo-s__grupo-rotulo:first-child {
	margin-top: 0;
}

.sjo-s__grupo-cuenta {
	color: var( --wp--preset--color--celeste, #a7c6dd );
	letter-spacing: 0;
}

.sjo-s__grupo-items {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.75rem;
}

.sjo-s__asignatura {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	border-radius: 12px;
	background-color: var( --wp--preset--color--base, #fff );
	color: var( --sjo-s-tinta, #14181f );
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}

.sjo-s__asignatura:hover {
	transform: translateY( -2px );
}

.sjo-s__asignatura.es-activa {
	background-color: var( --wp--preset--color--rojo, #e00026 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__asignatura-sigla {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background-color: var( --wp--preset--color--azul-100, #e0e9f1 );
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.sjo-s__asignatura.es-activa .sjo-s__asignatura-sigla {
	background-color: rgba( 255, 255, 255, 0.24 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__asignatura-nombre {
	font-size: 0.9375rem;
	line-height: 1.333;
}

/* La ficha. Solo se ve una: las demás las esconde el guion de las pestañas. */
.sjo-s__asig-ficha {
	border-radius: 0 28px 28px 28px;
	background-color: var( --wp--preset--color--base, #fff );
	overflow: hidden;
}

.sjo-s__asig-ficha[ hidden ] {
	display: none;
}

.sjo-s__asig-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 620 / 260;
	object-fit: cover;
}

.sjo-s__asig-cuerpo {
	position: relative;
	padding: clamp( 1.75rem, 2.78vw, 2.5rem );
}

/* La chapa con la sigla monta sobre la fotografía, como en la maqueta. */
.sjo-s__asig-sigla {
	position: absolute;
	top: 0;
	inset-inline-start: clamp( 1.75rem, 2.78vw, 2.5rem );
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	transform: translateY( -50% );
	border-radius: 0 14px 14px 14px;
	background-color: var( --wp--preset--color--rojo, #e00026 );
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.sjo-s__asig-area {
	margin: 1.25rem 0 0;
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.sjo-s__asig-tit {
	margin: 0.5rem 0 0;
	color: var( --wp--preset--color--azul, #004078 );
	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.025em;
}

.sjo-s__asig-txt {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.733;
}

.sjo-s__asig-txt p {
	margin: 0 0 1rem;
}

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

.sjo-s__asig-pie {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
	padding-top: 1.25rem;
	border-top: 1px dashed var( --wp--preset--color--border, #e4e4e7 );
}

.sjo-s__asig-nota {
	font-size: 0.8125rem;
	line-height: 1.538;
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió a «Texto con imagen»
 * ------------------------------------------------------------------------ */

/* La entradilla: el párrafo que resume, en azul y un punto mayor. */
.sjo-s__entradilla {
	margin: clamp( 1.25rem, 1.94vw, 1.75rem ) 0 0;
	max-width: 42rem;
	color: var( --wp--preset--color--azul, #004078 );
	font-size: clamp( 1.0625rem, 1.32vw, 1.1875rem );
	line-height: 1.579;
}

.sjo-s--texto-imagen.es-fondo-azul .sjo-s__entradilla {
	color: var( --wp--preset--color--base, #fff );
}

/* El pie de la fotografía: la frase y de quién es.
 *
 * Con pie, la rejilla se escribe a mano. La de siempre reparte las dos columnas
 * con « order » —así la fotografía va primera en el código vaya al lado que
 * vaya en pantalla—, y ahí un tercer hijo no tiene dónde caer. Con dos filas
 * declaradas, el texto ocupa las dos y el pie se queda bajo la fotografía. */
.sjo-s--texto-imagen.es-con-pie .sjo-s__reja {
	grid-template-rows: auto auto;
	align-items: start;
}

/* La fotografía vuelve a medir lo suyo: el alto se lo da su propia proporción y
   no la columna de al lado, porque debajo tiene que caber el pie. */
.sjo-s--texto-imagen.es-con-pie .sjo-s__medio {
	grid-column: 1;
	grid-row: 1;
	height: auto;
	aspect-ratio: 620 / 600;
}

.sjo-s--texto-imagen.es-con-pie .sjo-s__medio-pie {
	grid-column: 1;
	grid-row: 2;
}

.sjo-s--texto-imagen.es-con-pie .sjo-s__columna {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.sjo-s--texto-imagen.es-con-pie.es-imagen-derecha .sjo-s__medio,
.sjo-s--texto-imagen.es-con-pie.es-imagen-derecha .sjo-s__medio-pie {
	grid-column: 2;
}

.sjo-s--texto-imagen.es-con-pie.es-imagen-derecha .sjo-s__columna {
	grid-column: 1;
}

.sjo-s__medio-pie {
	margin: clamp( 1.25rem, 2.22vw, 2rem ) 0 0;
	text-align: center;
}

/* La sangría: la fotografía y su pie llegan al borde de la pantalla por su
   lado. Lo que se resta es exactamente lo que hay entre el borde de la reja y
   el de la ventana —el canalón, más lo que sobra cuando la reja toca su ancho
   máximo—, así que acierta a cualquier ancho sin un punto de ruptura. */
.sjo-s--texto-imagen.es-sangra {
	--sjo-sangria: calc( ( 100vw - min( 100vw - 2 * var( --sjo-gutter ), 83.75rem ) ) / 2 );
}

.sjo-s--texto-imagen.es-sangra.es-imagen-izquierda .sjo-s__medio,
.sjo-s--texto-imagen.es-sangra.es-imagen-izquierda .sjo-s__medio-pie {
	margin-inline-start: calc( -1 * var( --sjo-sangria ) );
}

.sjo-s--texto-imagen.es-sangra.es-imagen-derecha .sjo-s__medio,
.sjo-s--texto-imagen.es-sangra.es-imagen-derecha .sjo-s__medio-pie {
	margin-inline-end: calc( -1 * var( --sjo-sangria ) );
}

.sjo-s__medio-frase {
	display: block;
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: -0.01em;
}

.sjo-s__medio-fuente {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.538;
}

/* La píldora. */
.sjo-s__chip-fila {
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
}

.sjo-s__chip {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--celeste, #a7c6dd );
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.231;
	letter-spacing: 0.02em;
}

.sjo-s--texto-imagen.es-fondo-azul .sjo-s__chip {
	background-color: rgba( 255, 255, 255, 0.16 );
	color: var( --wp--preset--color--base, #fff );
}

/* La lista rotulada. */
.sjo-s__lista-caja {
	margin-top: clamp( 1.75rem, 2.78vw, 2.5rem );
}

.sjo-s__lista-rotulo {
	margin: 0 0 0.75rem;
	color: var( --sjo-s-gris, #5a6472 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.sjo-s--texto-imagen.es-fondo-azul .sjo-s__lista-rotulo {
	color: var( --wp--preset--color--celeste, #a7c6dd );
}

.sjo-s__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.867;
}

/* Los hitos: la pareja de cifras con su año y su sitio. */
.sjo-s__mojones {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
	gap: clamp( 1.5rem, 2.78vw, 2.5rem );
	margin: clamp( 2rem, 3.33vw, 3rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__mojon-cifra {
	display: block;
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.875rem, 2.78vw, 2.5rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.sjo-s__mojon-rotulo {
	display: block;
	margin-top: 0.5rem;
	color: var( --wp--preset--color--rojo-oscuro, #ad001d );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sjo-s__mojon-txt {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.571;
}

/* ---------------------------------------------------------------------------
 * «Fichas» con fotografía y «Áreas» con una sola
 * ------------------------------------------------------------------------ */

.sjo-s--fichas.es-con-imagen .sjo-s__interior {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: start;
	gap: clamp( 2rem, 4.44vw, 4rem );
}

.sjo-s--fichas.es-con-imagen .sjo-s__fichas {
	margin-top: 0;
}

.sjo-s__fichas-foto {
	margin-top: clamp( 1.75rem, 2.78vw, 2.5rem );
	border-radius: 0 24px 24px 24px;
	overflow: hidden;
}

.sjo-s__fichas-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 610 / 300;
	object-fit: cover;
}

/* La rejilla de la variante con fotografía va sobre azul y con las esquinas
   redondeadas solo por fuera, como en la maqueta.
 *
 * Y con el azul hay que devolverle a la ficha la tinta de fondo oscuro. La
 * sección es « es-fondo-crema », y paginas.css da por hecho que sobre crema las
 * fichas son un velo azul al 5 %: pinta el titular en azul y el texto en gris.
 * Sobre el azul lleno eso era **azul sobre azul** —el titular desaparecía— y un
 * gris oscuro que no se leía. Aquí manda el color de la tarjeta, no el de la
 * sección. */
.sjo-s--fichas.es-con-imagen .sjo-s__ficha {
	background-color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--fichas.es-con-imagen .sjo-s__ficha-tit,
.sjo-s--fichas.es-con-imagen .sjo-s__ficha-pic {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s--fichas.es-con-imagen .sjo-s__ficha-txt {
	color: rgba( 201, 220, 234, 0.85 );
}

.sjo-s--fichas.es-con-imagen .sjo-s__ficha-num {
	color: rgba( 201, 220, 234, 0.5 );
}

.sjo-s--fichas.es-con-imagen .sjo-s__ficha:first-child {
	border-radius: 20px 0 0 0;
}

.sjo-s--fichas.es-con-imagen .sjo-s__ficha:nth-child( 2 ) {
	border-radius: 0 20px 0 0;
}

.sjo-s--fichas.es-con-imagen .sjo-s__ficha:nth-last-child( 2 ) {
	border-radius: 0 0 0 20px;
}

.sjo-s--fichas.es-con-imagen .sjo-s__ficha:last-child {
	border-radius: 0 0 20px 0;
}

/* «Áreas» con una sola fotografía: ocupa el sitio del collage, entera.
 *
 * Hay que devolverle las dos columnas al encabezado. paginas.css las quita
 * cuando no encuentra collage —« :not( :has( .sjo-s__collage ) ) »— porque hasta
 * ahora «sin collage» y «sin nada al lado» eran lo mismo; con una fotografía
 * sola ya no, y sin esto la imagen caía debajo del titular a todo el ancho: mil
 * doscientos cuarenta píxeles de fotografía donde la maqueta pide seiscientos. */
.sjo-s--areas.es-foto-unica .sjo-s__areas-cabecera {
	grid-template-columns: 62fr 54fr;
}

.sjo-s__areas-foto {
	border-radius: 0 28px 28px 28px;
	overflow: hidden;
}

.sjo-s__areas-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 620 / 350;
	object-fit: cover;
}

/* Y el área deja de ser un titular para ser un párrafo.
 *
 * En «Apoyo Institucional» y en APAFA cada área es un nombre corto en negrita
 * con su explicación debajo. Aquí no hay nombre: el área **es** la frase —«Los
 * mismos dos objetivos», «Cuatro equipos»—, y compuesta en negrita a 22 px se
 * lee como un titular de tres líneas. La maqueta la pone en texto corriente. */
.sjo-s--areas.es-foto-unica .sjo-s__area-tit {
	font-size: clamp( 1rem, 1.32vw, 1.1875rem );
	font-weight: 400;
	line-height: 1.579;
}

/* Pero solo cuando el área **es** la frase. Con nombre y explicación —«Los
   cuatro equipos»— el nombre vuelve a ser un nombre y va en negrita, que es lo
   que separa una cosa de la otra. */
.sjo-s--areas.es-foto-unica .sjo-s__area-cuerpo:has( .sjo-s__area-txt ) .sjo-s__area-tit {
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 700;
	line-height: 1.333;
}

/* Y el numeral se pone encima del párrafo, no a su izquierda.
 *
 * Al lado funciona en «Apoyo Institucional», donde el área es un nombre corto
 * de una línea. Aquí el párrafo ocupa tres o cuatro y el numeral se queda
 * flotando arriba a la izquierda, con un hueco muerto debajo. */
.sjo-s--areas.es-foto-unica .sjo-s__area {
	grid-template-columns: minmax( 0, 1fr );
	row-gap: clamp( 0.75rem, 1.11vw, 1rem );

	/* Las filas, pegadas arriba. La columna se estira hasta el alto de la más
	   larga, y sin esto el reparto sobrante se va entre el numeral y el nombre:
	   los cuatro numerales quedaban a la misma altura y los cuatro nombres a
	   cuatro alturas distintas, cada uno según lo largo que fuera su texto. */
	align-content: start;
}

/* Tantas columnas como quepan, no dos fijas.
 *
 * Las dos columnas de « areas » son las de «Apoyo Institucional», donde hay seis
 * áreas de nombre corto. Aquí el número de columnas es el número de piezas: dos
 * objetivos en dos, cuatro equipos en cuatro. « auto-fit » lo resuelve solo —a
 * 1240 px caben cuatro de 260 y a 900 caben tres— y no hace falta contarlas ni
 * pasar el total desde la vista. */
.sjo-s--areas.es-foto-unica .sjo-s__areas {
	grid-template-columns: repeat( auto-fit, minmax( clamp( 13rem, 18vw, 16rem ), 1fr ) );
	gap: clamp( 2.5rem, 4.44vw, 4rem ) clamp( 1.5rem, 2.78vw, 2.5rem );
}

/* El numeral, macizo y en azul claro.
 *
 * Las dos secciones que estrenó «Propuesta» lo piden así, no hueco: en la
 * maqueta es una mancha de color que ancla la columna, y el contorno de
 * «Apoyo Institucional» —pensado para ir sobre el collage— aquí se pierde.
 * Es un tercer estilo del campo, no un cambio en los dos que ya había. */
.sjo-s--areas.es-numeral-celeste .sjo-s__area-num {
	color: var( --wp--preset--color--celeste, #a7c6dd );
	-webkit-text-stroke: 0;
}

.sjo-s__areas-nota {
	margin: clamp( 2rem, 3.33vw, 3rem ) 0 0;
	font-size: 0.8125rem;
	line-height: 1.538;
}

/* ---------------------------------------------------------------------------
 * La banda centrada
 *
 * La cita del Evangelio: sin fotografía, sin filete y con la frase al medio.
 * ------------------------------------------------------------------------ */

.sjo-s--banda.es-centrada .sjo-s__interior {
	text-align: center;
}

.sjo-s--banda.es-centrada .sjo-p__filete {
	display: none;
}

.sjo-s--banda.es-centrada .sjo-s__banda-frase {
	margin-inline: auto;
	max-width: 46rem;
	font-size: clamp( 1.375rem, 2.5vw, 2.25rem );
	line-height: 1.278;
}

.sjo-s--banda.es-centrada .sjo-s__banda-txt {
	margin-inline: auto;
	max-width: 34rem;
}

/* ---------------------------------------------------------------------------
 * Pantallas pequeñas
 *
 * No es «lo mismo apilado»: la barra de etapas se pone de pie, la escala y los
 * peldaños pasan a carrusel, el acordeón se vuelve vertical y el explorador
 * baja su ficha debajo de la lista. Es lo que hace la maqueta móvil.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

	/* --- La escala en degradado: carrusel de tarjetas blancas --- */

	.sjo-s__grados {
		display: flex;
		gap: 1rem;

		/* Sin radio ni recorte en la caja: aquí cada tarjeta lleva el suyo, y un
		   « overflow: hidden » impediría el desplazamiento del carrusel. */
		border-radius: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

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

	.sjo-s__grado {
		/* Una entera y nada de la siguiente: es la regla de los carruseles de
		   este tema. El ancho lo reparte assets/js/secciones.js, y por debajo de
		   640 px devuelve la pista entera para que no asome media tarjeta. */
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		scroll-snap-align: start;
		min-height: 13rem;
		border-radius: 0 20px 20px 20px;

		/* En móvil la escala se apaga: las tarjetas son todas blancas y lo que
		   las distingue es el numeral. Es lo que pinta la maqueta, y con el
		   degradado cada tarjeta se leería como una sección distinta. */
		background-color: var( --wp--preset--color--base, #fff );
		color: var( --sjo-s-tinta, #14181f );
	}

	.sjo-s__grado-num,
	.sjo-s__grado-tit {
		color: var( --wp--preset--color--azul, #004078 );
	}

	.sjo-s__grado-txt {
		color: var( --sjo-s-gris, #5a6472 );
	}

	/* El numeral de fondo pasa a contorno, como en la maqueta. */
	.sjo-s__grado-marca {
		color: transparent;
		opacity: 1;
		-webkit-text-stroke: 1.5px var( --wp--preset--color--celeste, #a7c6dd );
	}

	/* --- Peldaños: una fotografía arriba y los paneles en carrusel --- */

	.sjo-s__peldanos-foto {
		display: block;
		margin-top: clamp( 1.5rem, 8.21vw, 2rem );
		aspect-ratio: 326 / 210;
		border-radius: 0 24px 24px 24px;
		overflow: hidden;
	}

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

	.sjo-s__peldanos {
		flex-direction: row;
		gap: 1rem;
		margin-top: 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

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

	.sjo-s__peldano {
		/* Una entera y nada de la siguiente: es la regla de los carruseles de
		   este tema. El ancho lo reparte assets/js/secciones.js, y por debajo de
		   640 px devuelve la pista entera para que no asome media tarjeta. */
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		scroll-snap-align: start;
		display: block;

		/* Sin escalón: en una columna no hay contra qué escalonarse. */
		margin-inline: 0;
		border-radius: 0 20px 20px 20px;
	}

	.sjo-s__peldano-foto {
		display: none;
	}

	.sjo-s__peldano-num {
		display: none;
	}

	/* --- La barra de etapas, de pie --- */

	.sjo-s__etapas {
		flex-direction: column;
		gap: 4px;
		margin-bottom: 0;
	}

	.sjo-s__etapa {
		/* El peso sigue mandando, pero ahora sobre el alto. */
		flex: var( --sjo-peso, 1 ) 1 0;
		min-height: calc( var( --sjo-peso, 1 ) * 2.75rem );
		padding: 1.25rem 1.25rem 1.5rem;
	}

	.sjo-s__etapa:first-child {
		border-radius: 20px 20px 0 0;
	}

	.sjo-s__etapa:last-child {
		border-radius: 0 0 20px 20px;
	}

	/* Y el pie se mete dentro del color, arriba a la derecha. */
	.sjo-s__etapa-caja {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;

		/* Las dos filas, arriba y juntas. Sin esto se reparten el alto del tramo
		   —que es proporcional a lo que dura la etapa— y el rango se queda
		   flotando en mitad del color, lejos del nombre al que acompaña. */
		align-content: start;
		align-items: start;
		column-gap: 1rem;
		row-gap: 0.25rem;
	}

	.sjo-s__etapa-nombre {
		grid-column: 1;
	}

	.sjo-s__etapa-rango {
		grid-column: 1;
	}

	.sjo-s__etapa-pie {
		position: static;
		grid-column: 2;
		grid-row: 1;
		padding-top: 0.25rem;
		color: var( --sjo-tono-texto );
		text-align: end;
	}

	/* --- Filas: todo apilado, el enlace al final --- */

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

	.sjo-s__fila-foto img {
		aspect-ratio: 326 / 190;
	}

	.sjo-s__fila-cuerpo {
		margin-top: 1.25rem;
	}

	.sjo-s__fila-enlace {
		align-self: start;
		margin-top: 1rem;
	}

	/* --- El acordeón, de pie --- */

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

	.sjo-s__frente {
		flex: 0 0 auto;
		border-radius: 0 16px 16px 16px;
	}

	.sjo-s__frente.es-abierto {
		flex: 0 0 auto;
		border-radius: 0 24px 24px 24px;
	}

	/* Cerrado es una fila: numeral, nombre y el signo a la derecha. */
	.sjo-s__frente-cabeza {
		flex-direction: row;
		align-items: center;
		gap: 0.875rem;
		padding: 1.125rem 1.25rem;
	}

	.sjo-s__frente-tit {
		flex-grow: 1;
	}

	.sjo-s__frente-signo {
		margin-top: 0;
		flex: 0 0 auto;
	}

	/* Y abierto vuelve a apilarse, para que el titular respire. */
	.sjo-s__frente.es-abierto .sjo-s__frente-cabeza {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.75rem 1.5rem 0;
	}

	.sjo-s__frente.es-abierto .sjo-s__frente-signo {
		display: none;
	}

	.sjo-s__frente-panel {
		padding: 1rem 1.5rem 1.75rem;
	}

	/* --- El diagrama, encima de la leyenda --- */

	/* El orden de la maqueta móvil: encabezado, diagrama y leyenda. El diagrama
	   va **entre** los dos, no encima de todo, así que la columna desaparece
	   como caja para que sus dos piezas y él sean hermanos y se puedan ordenar
	   entre ellos. Es el mismo recurso que usa «Texto con imagen» para meter la
	   fotografía entre el titular y los párrafos. */
	.sjo-s__venn-reja {
		display: flex;
		flex-direction: column;
		gap: clamp( 1.5rem, 8.21vw, 2rem );
	}

	.sjo-s--venn .sjo-s__columna {
		display: contents;
	}

	.sjo-s--venn .sjo-s__encabezado {
		order: 1;
	}

	.sjo-s__venn {
		order: 2;
		width: min( 100%, 20rem );
		margin-inline: 0;
	}

	.sjo-s__dimensiones {
		order: 3;
		margin-top: 0;
	}

	/* --- El explorador: una columna y la ficha debajo --- */

	.sjo-s__explorador-cabecera,
	.sjo-s__explorador {
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 1.5rem, 8.21vw, 2rem );
	}

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

	.sjo-s__asig-foto img {
		aspect-ratio: 358 / 200;
	}

	/* --- «Fichas» con fotografía y «Áreas» con una sola --- */

	.sjo-s--fichas.es-con-imagen .sjo-s__interior {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s--fichas.es-con-imagen .sjo-s__ficha,
	.sjo-s--fichas.es-con-imagen .sjo-s__ficha:first-child,
	.sjo-s--fichas.es-con-imagen .sjo-s__ficha:nth-child( 2 ),
	.sjo-s--fichas.es-con-imagen .sjo-s__ficha:nth-last-child( 2 ),
	.sjo-s--fichas.es-con-imagen .sjo-s__ficha:last-child {
		border-radius: 0 20px 20px 20px;
	}

	/* --- El orden de las piezas nuevas --- */

	/* En móvil « .sjo-s__columna » desaparece como caja —« display: contents »—
	   para que la fotografía pueda intercalarse entre sus hijos, y el orden lo
	   decide « order »: encabezado 1, fotografía 2, texto 3, firma 4, pie de
	   firma 5, botón 6. Eso lo pone paginas.css.

	   Las piezas que se añadieron aquí no tenían ninguno, así que valían cero y
	   se iban **delante del encabezado**: la píldora y la lista de los niveles
	   salían antes del titular, y los hitos del legado, antes que nada. */
	.sjo-s--texto-imagen .sjo-s__entradilla {
		/* El mismo que el texto: dentro de la columna va antes, y con el mismo
		   número manda el orden del documento. */
		order: 3;
	}

	.sjo-s--texto-imagen .sjo-s__chip-fila {
		order: 7;
	}

	.sjo-s--texto-imagen .sjo-s__lista-caja {
		order: 8;
	}

	.sjo-s--texto-imagen .sjo-s__mojones {
		order: 9;
	}

	/* Y en «El legado de Chaminade» la fotografía baja detrás del párrafo, que
	   es donde la pone la maqueta móvil de esa sección. */
	.sjo-s--texto-imagen.es-con-pie .sjo-s__medio {
		order: 4;
	}

	/* --- «Áreas» con fotografía sola: párrafos apilados --- */

	/* En la maqueta móvil esta sección pierde los numerales y se queda en dos
	   párrafos seguidos bajo la fotografía. Tiene sentido: el numeral ordena una
	   rejilla de cuatro columnas, y en una sola columna no ordena nada —solo
	   mete una cifra de 48 px entre dos frases que se leen de corrido—. */
	.sjo-s--areas.es-foto-unica .sjo-s__areas {
		display: flex;
		flex-direction: column;
		gap: clamp( 1.25rem, 6.15vw, 1.5rem );
		overflow: visible;
	}

	/* Sin tarjeta: la piel móvil de « areas » viste cada área de blanco porque
	   allí son las tarjetas de un carrusel. Aquí son dos párrafos seguidos sobre
	   el fondo de la sección, como en la maqueta. */
	.sjo-s--areas.es-foto-unica .sjo-s__area {
		display: block;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
	}

	/* El numeral se va **solo donde el área es la frase**.
	 *
	 * En «Objetivos» no hay nombre: el área es el objetivo entero, y una cifra
	 * de 48 px entre dos párrafos que se leen de corrido no ordena nada. En «Los
	 * cuatro equipos» sí lo hay —nombre y explicación—, y ahí la maqueta móvil
	 * conserva el numeral abriendo cada bloque, con un filete entre uno y otro. */
	/* paginas.css esconde el numeral en móvil para todas las «áreas» —allí son
	   tarjetas de carrusel y el numeral no cabe—. Aquí hay que devolverlo. */
	.sjo-s--areas.es-foto-unica .sjo-s__area:has( .sjo-s__area-txt ) .sjo-s__area-num {
		display: block;
	}

	/* El nombre, en la tinta del texto y no en azul. El azul de paginas.css es el
	   de la tarjeta de carrusel, donde el nombre es lo único que destaca; aquí
	   lo que abre el bloque es el numeral. */
	.sjo-s--areas.es-foto-unica .sjo-s__area-tit {
		color: var( --sjo-s-tinta, #14181f );
	}

	.sjo-s--areas.es-foto-unica .sjo-s__area:not( :has( .sjo-s__area-txt ) ) .sjo-s__area-tit {
		font-size: 1rem;
		line-height: 1.625;
	}

	/* Con nombre y explicación, cada bloque se separa del siguiente con un
	   filete, como en la maqueta: sin él los cuatro equipos se leen como un
	   único texto largo. */
	.sjo-s--areas.es-foto-unica .sjo-s__area:has( .sjo-s__area-txt ) + .sjo-s__area {
		padding-top: clamp( 1.25rem, 6.15vw, 1.5rem );
		border-top: 1px solid var( --wp--preset--color--border, #e4e4e7 );
	}

	.sjo-s--areas.es-foto-unica .sjo-s__area-num {
		font-size: clamp( 2.5rem, 12.3vw, 3rem );
	}

	/* La fotografía, encima de los párrafos y con su proporción de móvil. */
	.sjo-s--areas.es-foto-unica .sjo-s__areas-cabecera {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s--areas.es-foto-unica .sjo-s__areas-foto {
		margin-top: clamp( 1.5rem, 8.21vw, 2rem );
		border-radius: 0 20px 20px 20px;
	}

	.sjo-s--areas.es-foto-unica .sjo-s__areas-foto img {
		aspect-ratio: 326 / 200;
	}

	/* --- Los hitos, en filas --- */

	/* En escritorio son dos columnas con la cifra arriba; aquí la maqueta los
	   pone en filas: la cifra a la izquierda, el sitio a la derecha y el texto
	   debajo, separados por un filete. */
	.sjo-s__mojones {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
	}

	.sjo-s__mojon {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		align-items: baseline;
		column-gap: 1rem;
		padding-block: 1.25rem;
	}

	.sjo-s__mojon + .sjo-s__mojon {
		border-top: 1px solid var( --wp--preset--color--border, #e4e4e7 );
	}

	.sjo-s__mojon-rotulo {
		margin-top: 0;
		text-align: end;
	}

	.sjo-s__mojon-txt {
		grid-column: 1 / -1;
		margin-top: 0.5rem;
	}

	/* --- La fotografía vuelve al canalón --- */

	/* La sangría es cosa de escritorio: en 390 px la maqueta mete la fotografía
	   dentro del canalón, derecha y con sus esquinas. Sangrando solo por la
	   izquierda quedaba descuadrada respecto al texto. */
	.sjo-s--texto-imagen.es-sangra.es-imagen-izquierda .sjo-s__medio,
	.sjo-s--texto-imagen.es-sangra.es-imagen-izquierda .sjo-s__medio-pie,
	.sjo-s--texto-imagen.es-sangra.es-imagen-derecha .sjo-s__medio,
	.sjo-s--texto-imagen.es-sangra.es-imagen-derecha .sjo-s__medio-pie {
		margin-inline: 0;
	}

	/* --- El pie, en tarjeta --- */

	/* El pie va al final, detrás de los hitos: es el remate de la sección. */
	.sjo-s--texto-imagen.es-con-pie .sjo-s__medio-pie {
		order: 10;
		box-sizing: border-box;
		padding: 1.5rem;
		border-radius: 0 20px 20px 20px;
		background-color: var( --wp--preset--color--crema, #f4f1ec );
		text-align: start;
	}

	.sjo-s--texto-imagen.es-fondo-crema.es-con-pie .sjo-s__medio-pie {
		background-color: var( --wp--preset--color--base, #fff );
	}

	.sjo-s__medio-frase {
		font-size: 1.125rem;
		line-height: 1.333;
	}

	/* Y la rejilla de una sola columna: las filas declaradas para el pie solo
	   tienen sentido con dos columnas. */
	.sjo-s--texto-imagen.es-con-pie .sjo-s__reja {
		grid-template-rows: none;
	}

	.sjo-s--texto-imagen.es-con-pie .sjo-s__medio,
	.sjo-s--texto-imagen.es-con-pie .sjo-s__medio-pie,
	.sjo-s--texto-imagen.es-con-pie .sjo-s__columna,
	.sjo-s--texto-imagen.es-con-pie.es-imagen-derecha .sjo-s__medio,
	.sjo-s--texto-imagen.es-con-pie.es-imagen-derecha .sjo-s__medio-pie,
	.sjo-s--texto-imagen.es-con-pie.es-imagen-derecha .sjo-s__columna {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Cuando se pide menos movimiento
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	.sjo-s__frente,
	.sjo-s__frente-signo,
	.sjo-s__asignatura,
	.sjo-s__etapa.es-enlazada {
		transition: none;
	}

	.sjo-s__asignatura:hover,
	.sjo-s__etapa.es-enlazada:hover,
	.sjo-s__etapa.es-enlazada:focus-within {
		transform: none;
	}
}