/*
 * Páginas interiores.
 *
 * La banda de apertura y la banda de cierre, que llevan las ocho páginas de
 * «Nosotros» y llevarán las veinticinco que faltan. Entre las dos va el cuerpo,
 * compuesto con el campo de secciones; cada tipo de sección trae su propio
 * bloque de estilos más abajo, conforme se van maquetando.
 *
 * Las medidas van fluidas y no con los píxeles del Figma: 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 — el canalón de 100 px es el 6,94 % de 1440,
 * y así está escrito.
 */

.sjo-hero,
.sjo-cta {
	/* El azul del diseño, con respaldo por si la hoja se usa fuera del theme. */
	--sjo-azul: var( --wp--preset--color--azul, #004078 );

	/* El mismo canalón que la cabecera y el pie, para que las tres franjas
	   respiren igual a cualquier ancho. */
	--sjo-gutter: clamp( 2rem, 6.94vw, 100px );

	position: relative;
	box-sizing: border-box;
	background-color: var( --sjo-azul );
	color: var( --wp--preset--color--base, #fff );
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * El fondo: fotografía y dos velos
 *
 * Los velos son CSS sobre el contenedor de la fotografía y no capas del
 * marcado, igual que en el banner de la portada: son tratamiento del fondo, no
 * contenido. El plano baja el brillo de toda la imagen; el lateral oscurece la
 * izquierda, que es donde va el texto, y se abre hacia la derecha para que la
 * fotografía se vea.
 * ------------------------------------------------------------------------ */

.sjo-hero__medio,
.sjo-cta__medio {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

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

.sjo-hero__medio::before {
	background-color: rgba( 0, 64, 120, 0.58 );
}

.sjo-hero__medio::after {
	background-image: linear-gradient(
		90deg,
		rgba( 0, 64, 120, 0.92 ) 0%,
		rgba( 0, 64, 120, 0.35 ) 62%,
		rgba( 0, 64, 120, 0 ) 100%
	);
}

/* La banda de cierre lleva el velo un punto más cerrado: encima van botones, y
   un botón de contorno blanco sobre una fotografía clara no se lee. */
.sjo-cta__medio::before {
	background-color: rgba( 0, 64, 120, 0.62 );
}

.sjo-cta__medio::after {
	background-image: linear-gradient(
		90deg,
		rgba( 0, 64, 120, 0.94 ) 0%,
		rgba( 0, 64, 120, 0.45 ) 60%,
		rgba( 0, 64, 120, 0.15 ) 100%
	);
}

/* ---------------------------------------------------------------------------
 * La banda de apertura
 * ------------------------------------------------------------------------ */

.sjo-hero {
	display: flex;
	min-height: 460px;
	padding-inline: var( --sjo-gutter );

	/* El texto no va centrado: se apoya en el tercio inferior, como en la
	   maqueta. Los 68 px de abajo son los que deja el diseño bajo la bajada. */
	padding-block: var( --wp--preset--spacing--60 ) 68px;
	align-items: flex-end;
}

/* La misma caja que « .sjo-s__interior »: mismo tope de 1340 px y centrada
   igual. Así el texto de la banda de apertura arranca en la misma vertical que
   el de las secciones de abajo. Con un tope menor y sin centrar, en un monitor
   ancho el titular se quedaba pegado al canalón mientras el contenido se había
   ido al centro, y las dos columnas ya no se leían como una sola.

   El ancho de lectura no cambia: lo siguen fijando el titular y la bajada con
   sus propios topes. */
.sjo-hero__interior,
.sjo-cta__interior {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 83.75rem;
	margin-inline: auto;
}

.sjo-hero__rotulo {
	/* La separación con el filete la pone el propio filete. */
	margin: 0;
	color: rgba( 201, 220, 234, 0.9 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	font-weight: 600;
	line-height: 1.333;

	/* 3,4 px sobre 12 px son 0,283 em. El Figma da el interletraje en píxeles;
	   en em sobrevive al tamaño fluido. */
	letter-spacing: 0.283em;
	text-transform: uppercase;
}

.sjo-hero__titular {
	margin: 1rem 0 0;
	max-width: 56.25rem;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );

	/* 52 px en el lienzo de 1440. No hay preset con ese tamaño, así que va
	   fluido entre 2 rem en móvil y 3,25 rem en escritorio. */
	font-size: clamp( 2rem, 3.61vw, 3.25rem );
	font-weight: 800;
	line-height: 1.077;
	letter-spacing: -0.031em;
	text-wrap: balance;
}

.sjo-hero__bajada {
	margin: 1.5rem 0 0;
	max-width: 41.25rem;
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
	font-size: var( --wp--preset--font-size--large, 1.125rem );
	line-height: 1.667;
}

/* ---------------------------------------------------------------------------
 * La banda de cierre
 * ------------------------------------------------------------------------ */

.sjo-cta {
	display: flex;
	min-height: 474px;
	padding-inline: var( --sjo-gutter );
	padding-block: 72px 68px;
	align-items: center;
}

.sjo-cta__titular {
	margin: 0;
	max-width: 40rem;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: var( --wp--preset--font-size--xxx-large, 2.25rem );
	font-weight: 800;
	line-height: 1.222;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.sjo-cta__texto {
	margin: 1.25rem 0 0;
	max-width: 37.5rem;
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
	font-size: var( --wp--preset--font-size--medium, 1rem );
	line-height: 1.75;
}

.sjo-cta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
	margin: var( --wp--preset--spacing--50 ) 0 0;
}

.sjo-cta__nota {
	margin: 1.5rem 0 0;
	color: rgba( 201, 220, 234, 0.75 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.538;
	letter-spacing: 0.031em;
}

/* ---------------------------------------------------------------------------
 * El cuerpo de la página
 * ------------------------------------------------------------------------ */

.sjo-main--pagina {
	margin-block: 0;
	padding-inline: 0;
}

/* Lo que se escribe con el editor de bloques sí se encierra en su columna: las
   bandas sangran de borde a borde, un párrafo no. */
.sjo-pagina__contenido {
	padding-block: var( --wp--preset--spacing--60 );
}

/* ---------------------------------------------------------------------------
 * Pantallas pequeñas
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	.sjo-hero {
		min-height: 22rem;
		padding-block: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--50 );
	}

	/* En móvil la banda de cierre se parte en dos: la fotografía pasa a ser
	   una franja de 180 px arriba y el texto baja al azul macizo. No es un
	   apaño de ancho —es lo que hace la maqueta móvil— y se lee mucho mejor:
	   el titular deja de competir con la escena que tiene detrás. */
	.sjo-cta {
		display: block;
		min-height: 0;
		padding-inline: 0;
		padding-block: 0 clamp( 2rem, 10.26vw, 2.5rem );
	}

	.sjo-cta__medio {
		position: static;
		height: clamp( 9rem, 46.15vw, 11.25rem );
	}

	/* El velo va en dos capas, como en escritorio: una plana que tiñe la
	   fotografía entera y un degradado encima que la cierra en el azul macizo
	   de la banda. La franja no es una fotografía suelta, es la parte de arriba
	   de la banda, y sin el degradado se veía el corte entre las dos.
	   El plano va **más cerrado que en escritorio**, no menos: aquí la
	   fotografía y el texto no comparten sitio, se tocan, y con la escena a
	   plena luz el empalme se leía como dos bloques pegados en vez de como una
	   sola pieza. */
	.sjo-cta__medio::before {
		background-color: rgba( 0, 64, 120, 0.72 );
	}

	.sjo-cta__interior {

		/* El canalón se lo queda el interior, así que tiene que entrar en su
		   ancho: sin esto los 100 % más los dos lados daban 454 px en una
		   pantalla de 390 y el texto se salía. */
		box-sizing: border-box;
		padding-inline: var( --sjo-gutter );

		/* 40 px entre el pie de la franja y el filete, como en la maqueta. */
		padding-top: clamp( 1.75rem, 10.26vw, 2.5rem );
	}

	/* En vertical el degradado lateral no sirve —el texto ocupa todo el ancho—,
	   así que se cambia por uno de arriba abajo, que es el que deja legible el
	   texto sobre cualquier fotografía. */
	.sjo-hero__medio::after {
		background-image: linear-gradient(
			180deg,
			rgba( 0, 64, 120, 0.35 ) 0%,
			rgba( 0, 64, 120, 0.85 ) 100%
		);
	}

	/* En la banda de cierre el degradado cierra **en el color de la banda**: la
	   fotografía entra en el azul sin costura, que es lo que hace la maqueta.
	   Llega al azul pleno en el 88 % y no en el 100 %: los últimos píxeles de
	   la franja son ya azul liso, así que no hay ninguna línea donde acabe la
	   fotografía y empiece el fondo. */
	.sjo-cta__medio::after {
		background-image: linear-gradient(
			180deg,
			rgba( 0, 64, 120, 0.45 ) 0%,
			rgba( 0, 64, 120, 0.86 ) 50%,
			rgba( 0, 64, 120, 1 ) 82%
		);
	}

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

/* ---------------------------------------------------------------------------
 * Las secciones del cuerpo
 *
 * Lo común a todas: el fondo, el canalón y la anchura máxima. Lo propio de cada
 * tipo va en su bloque, más abajo.
 * ------------------------------------------------------------------------ */

.sjo-s {
	/* El canalón: 100 px sobre el lienzo de 1440 (6,94 %) y 32 px sobre el de
	   390. El mínimo no baja de 32 porque es el que fija la maqueta móvil. */
	--sjo-gutter: clamp( 2rem, 6.94vw, 100px );

	/* El aire de arriba y abajo: 96 px en escritorio, 56 en móvil, que es donde
	   la maqueta pone el filete rojo de cada sección. */
	--sjo-s-aire: clamp( 3.5rem, 6.67vw, 6rem );

	/* El gris del texto largo. Es el mismo que usa la portada —« --sjo-p-gris »—,
	   pero aquella variable está declarada dentro de « .sjo-p » y no llega hasta
	   aquí, así que se repite el valor en lugar de heredarlo.

	   No es el preset « texto » de theme.json (#55575e): ese viene del UI Kit
	   antiguo y es más neutro. La maqueta «Propuesta», que es contra la que se
	   maqueta el sitio, pide este otro, con algo de azul dentro. */
	--sjo-s-gris: #5a6472;

	/* Y lo mismo con el negro de los titulares de tarjeta: el preset « tinta »
	   es #1f2024 y la maqueta pide #14181f, que es el que usa la portada. */
	--sjo-s-tinta: #14181f;

	box-sizing: border-box;
	padding-inline: var( --sjo-gutter );
	padding-block: var( --sjo-s-aire );
	color: var( --sjo-s-gris );
}

/* El fondo se declara dos veces a propósito, y no es una repetición: el color
   pinta la banda y la variable la leen las piezas que tienen que teñirse de lo
   que haya detrás —el corte diagonal del tríptico, sin ir más lejos—. */
.sjo-s.es-fondo-blanco {
	--sjo-s-fondo: var( --wp--preset--color--base, #fff );

	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s.es-fondo-crema {
	--sjo-s-fondo: var( --wp--preset--color--crema, #f4f1ec );

	background-color: var( --wp--preset--color--crema, #f4f1ec );
}

/* En azul se invierte todo: el titular pasa a blanco y el texto al azul claro,
   que es el par que el diseño usa en las bandas oscuras. */
.sjo-s.es-fondo-azul {
	--sjo-s-fondo: var( --wp--preset--color--azul, #004078 );

	background-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
}

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

/* Sobre el azul el antetítulo deja de ser rojo: la maqueta lo pasa al azul
   claro de la familia. El rojo sobre #004078 se apaga —no llega a 3:1— y
   además compite con el filete, que sí sigue siendo rojo. */
.sjo-s.es-fondo-azul .sjo-s__rotulo {
	color: rgba( 201, 220, 234, 0.9 );
}

/* El bloque de texto de una sección no se estira a lo ancho de la banda: el
   diseño lo corta a 640 px para que el titular baje de línea antes de volverse
   una tira ilegible. */
.sjo-s__encabezado {
	max-width: 40rem;
}

/* El antetítulo encoge poco —de 12 px a 11— pero abre mucho: la maqueta le da
   3,4 px de tracking en escritorio y solo 1,6 en móvil, porque a 390 px una
   línea tan suelta se parte en dos. Las dos medidas se escriben como clamp
   para que el paso de una a otra sea continuo. */
.sjo-s__rotulo {
	margin: 0;
	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__titular {
	/* 20 px bajo el antetitulo, como en la maqueta. */
	margin: 1.25rem 0 0;
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );

	/* 44 px sobre el lienzo de 1440 y 30 sobre el de 390. La interlínea va por
	   su cuenta y no como múltiplo, porque el diseño no la escala igual: 50/44
	   arriba (1,14) y 38/30 abajo (1,27). Un solo número dejaría el titular
	   móvil apretado o el de escritorio demasiado suelto. */
	font-size: clamp( 1.875rem, 3.06vw, 2.75rem );
	font-weight: 800;
	line-height: clamp( 2.375rem, 3.47vw, 3.125rem );

	/* −1,4 px en los dos extremos de la maqueta, así que es una medida fija y
	   no una proporción del cuerpo. */
	letter-spacing: -0.0875rem;
	text-wrap: balance;
}

.sjo-s__texto {
	margin-top: var( --wp--preset--spacing--40 );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: clamp( 1.5rem, 1.94vw, 1.75rem );
}

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

.sjo-s__texto > :last-child {
	margin-bottom: 0;
}

/* 40 px entre párrafos en la maqueta —más que la interlínea de 28, para que
   cada párrafo de la carta se lea como un bloque aparte—. */
.sjo-s__texto p + p {
	margin-top: clamp( 1.5rem, 2.78vw, 2.5rem );
}

/* ---------------------------------------------------------------------------
 * Texto con imagen
 * ------------------------------------------------------------------------ */

.sjo-s--texto-imagen .sjo-s__reja {
	display: grid;

	/* La proporción del diseño: 600 px de fotografía y 590 de texto sobre un
	   lienzo de 1440, con el canalón descontado. Prácticamente mitad y mitad. */
	grid-template-columns: 1fr 1fr;
	gap: clamp( 2rem, 3.5vw, 3.125rem );

	/* Estirada, no centrada. En la maqueta la fotografía llega tan abajo como
	   el texto de al lado —627 px de alto junto a la carta larga, 389 junto al
	   párrafo corto de «¿Quiénes somos?»—, y eso no es una proporción fija de
	   la imagen sino la altura de la columna vecina. Con « center » la foto
	   conservaba su propio alto y dejaba un escalón vacío debajo. */
	align-items: stretch;
	max-width: 83.75rem;
	margin-inline: auto;
}

/* El orden lo decide la clase, no el marcado: así la fotografía sigue yendo
   primero en el código —que es como se lee en un móvil y con lector de
   pantalla— vaya al lado que vaya en escritorio. */
.sjo-s--texto-imagen.es-imagen-derecha .sjo-s__medio {
	order: 2;
}

/* La caja manda; la fotografía, nunca.
 *
 * El alto de esta columna lo pone el texto de al lado —más un suelo, por si el
 * texto es corto—, y la imagen se recorta dentro. Va en posición absoluta a
 * propósito: así no aporta alto ninguno al cálculo de la rejilla.
 *
 * Sin eso, quien sube la fotografía decide la maqueta. Estaba pasando: en
 * «¿Quiénes somos?» la sección medía exactamente lo que medía el archivo
 * —595 × 438, la proporción del original—, y una foto vertical de cámara de
 * móvil habría estirado la sección hasta dejar el texto perdido arriba. Ahora
 * da igual lo que se suba: entra recortada en la caja que fija el código. */
.sjo-s--texto-imagen .sjo-s__medio {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;

	/* El suelo por si la columna de texto es corta: sin esto una sección de dos
	   líneas dejaría la fotografía convertida en una tira. 389 px sobre el
	   lienzo de 1440 es el menor de los dos altos que usa la maqueta. */
	min-height: clamp( 13rem, 27vw, 24.5rem );
}

.sjo-s--texto-imagen .sjo-s__medio .sjo-foto,
.sjo-s--texto-imagen .sjo-s__medio img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Sin redondear. En la maqueta esta fotografía va con las cuatro esquinas
	   rectas —es una foto puesta sobre la página, no una tarjeta—, y el
	   redondeo la convertía en otra cosa. */
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * El marco en diagonal
 *
 * La fotografía de la izquierda no va en un rectángulo: los lados caen a plomo
 * y los filos de arriba y abajo van en diagonal, como una fotografía apoyada
 * de medio lado sobre la página. Medido sobre la maqueta, los dos filos bajan
 * 32 px cada 300 de ancho: un sesgo de 6,1°.
 *
 * Es « skewY » y no « rotate »: girándola se torcerían también los lados, y en
 * la maqueta están rectos.
 *
 * La escena se endereza por dentro con el sesgo contrario, para que las
 * personas salgan de pie: lo que está torcido es el marco, no la fotografía.
 * Al enderezarla sus esquinas se salen del marco, así que se le da alto de
 * sobra y « object-fit » recorta lo que sobre.
 *
 * La maqueta no da ninguna señal para saber qué fotografías llevan este trato
 * —de 56 hay 5, repartidas a los dos lados en el resto de páginas—, así que
 * aquí se ata al lado, que es lo que acierta en esta página. Si más adelante
 * hay que decidirlo pantalla a pantalla, el sitio es un campo en la sección.
 * ------------------------------------------------------------------------ */

/* El sesgo lo decide ahora « es-diagonal », un campo de la sección, y no el
   lado en que caiga la fotografía. Las reglas están al final del archivo. */

/* El rectángulo redondeado de siempre: la esquina superior izquierda recta y
   las otras tres generosas.

   Va también con la fotografía a la izquierda. Antes no: aquel lado llevaba
   siempre el sesgo y no necesitaba radio, pero desde que el sesgo lo decide
   « es-diagonal » —un campo de la sección— una fotografía a la izquierda y sin
   diagonal se quedaba a escuadra, sola entre secciones redondeadas. Se ven así
   los niveles de Inicial y Secundaria. */
.sjo-s--texto-imagen.es-imagen-derecha .sjo-s__medio img,
.sjo-s--texto-imagen.es-imagen-izquierda:not( .es-diagonal ) .sjo-s__medio img {
	border-radius: 0 24px 24px 24px;
}

.sjo-s__firma {
	margin: var( --wp--preset--spacing--40 ) 0 0;
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: var( --wp--preset--font-size--medium, 1rem );
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.0125em;
}

.sjo-s__firma-pie {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.538;
}

@media ( max-width: 781px ) {
	/* El hueco entre filas se apaga porque cada pieza ya trae el suyo en un
	   margen; si no, entre la firma y su pie se abría un renglón que no existe. */
	.sjo-s--texto-imagen .sjo-s__reja {
		grid-template-columns: 1fr;
		gap: var( --wp--preset--spacing--50 );
		row-gap: 0;
	}

	/* Apiladas, la fotografía se mete entre el titular y los párrafos, que es
	   donde la pone la maqueta móvil en cuatro de las cinco secciones de este
	   tipo. Para intercalarla hay que deshacer la caja de la columna:
	   « display: contents » lo hace sin tocar el marcado y deja a sus hijos de
	   hermanos de la fotografía, listos para ordenarlos. */
	.sjo-s--texto-imagen .sjo-s__columna {
		display: contents;
	}

	.sjo-s--texto-imagen .sjo-s__encabezado {
		order: 1;
	}

	.sjo-s--texto-imagen .sjo-s__medio,
	.sjo-s--texto-imagen.es-imagen-derecha .sjo-s__medio,
	.sjo-s--texto-imagen.es-imagen-izquierda .sjo-s__medio {
		order: 2;
		margin-top: var( --wp--preset--spacing--50 );
	}

	.sjo-s--texto-imagen .sjo-s__texto {
		order: 3;
		margin-top: var( --wp--preset--spacing--50 );
	}

	.sjo-s--texto-imagen .sjo-s__firma {
		order: 4;
	}

	.sjo-s--texto-imagen .sjo-s__firma-pie {
		order: 5;
	}

	.sjo-s--texto-imagen .sjo-s__acciones {
		order: 6;
	}

	/* El destaque cierra la sección, detrás de todo. */
	.sjo-s--texto-imagen .sjo-s__destaque {
		order: 7;
	}

	/* En una sola columna ya no hay columna vecina cuya altura igualar, así que
	   la caja toma la proporción que le da la maqueta móvil —y la sigue
	   fijando el código, no el archivo que se suba—.

	   Va apuntada al tipo de sección y no a « .sjo-s__medio » a secas: sin el
	   apellido se colaba en la declaración, que usa la misma clase, y le ponía
	   una caja de 210 px a una fotografía de 360 que no estaba recortada. */
	.sjo-s--texto-imagen .sjo-s__medio {
		height: auto;
		min-height: 0;
		aspect-ratio: 326 / 210;
	}


	/* Las dos fotografías llevan aquí la misma forma que el resto: esquina
	   superior izquierda recta y las otras tres redondeadas. Iba después del
	   bloque de arriba y con menos peso, así que la de la izquierda se quedaba
	   a escuadra. */
	.sjo-s--texto-imagen .sjo-s__medio,
	.sjo-s--texto-imagen .sjo-s__medio img {
		border-radius: 0 24px 24px 24px;
	}
}

/* Sin fotografía no hay dos columnas.
 *
 * La sección admite quedarse sin imagen —una carta puede ir sola—, y entonces
 * la rejilla dejaba media pantalla en blanco a la derecha. La columna pasa a
 * ocupar el ancho entero, pero con un tope de medida: un párrafo de 1440 px de
 * ancho no se lee. */
.sjo-s--texto-imagen .sjo-s__columna:only-child {
	grid-column: 1 / -1;
	max-width: 46rem;
}

/* ---------------------------------------------------------------------------
 * Cifras
 * ------------------------------------------------------------------------ */

.sjo-s--cifras {
	/* Pegada a la sección de arriba: en el diseño las dos son un solo bloque
	   blanco, y dos rellenos seguidos abrirían un hueco que no está. */
	padding-top: 0;
}

.sjo-s__cifras {
	display: grid;

	/* Cuatro caben en una fila de 1440; con menos ancho van bajando de dos en
	   dos sin que haya que declarar cada escalón.

	   El « min() » del mínimo es lo que salva el móvil: con 180 px a secas, a
	   390 de pantalla no entraban dos y las cuatro cifras se apilaban en
	   columna. La maqueta móvil las quiere de dos en dos, y el 45 % lo
	   consigue sin añadir un punto de ruptura. */
	grid-template-columns: repeat( auto-fit, minmax( min( 11.25rem, 45% ), 1fr ) );
	gap: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
	max-width: 83.75rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.sjo-s__cifra {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

/* El pictograma toma el color de aquí: el SVG hereda con « currentColor ». */
.sjo-s__cifra-pic {
	display: block;
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__cifra-pic svg {
	display: block;
	width: 28px;
	height: 28px;
}

.sjo-s--cifras.es-fondo-azul .sjo-s__cifra-pic {
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
}

.sjo-s__cifra-num {
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );

	/* 40/46 sobre el lienzo de 1440 y 32/40 sobre el de 390. El tracking va en
	   medida fija porque la maqueta le da −1,4 px en los dos tamaños. */
	font-size: clamp( 2rem, 2.78vw, 2.5rem );
	font-weight: 800;
	line-height: clamp( 2.5rem, 3.19vw, 2.875rem );
	letter-spacing: -0.0875rem;
	font-variant-numeric: tabular-nums;
}

/* 13/20 en escritorio, 12/18 en móvil. */
.sjo-s__cifra-txt {
	font-size: clamp( 0.75rem, 0.9vw, 0.8125rem );
	line-height: clamp( 1.125rem, 1.39vw, 1.25rem );
	letter-spacing: 0.0125rem;
}

/* En azul, la cifra se lee en blanco. */
.sjo-s--cifras.es-fondo-azul .sjo-s__cifra-num {
	color: var( --wp--preset--color--base, #fff );
}

/* ---------------------------------------------------------------------------
 * Tríptico
 *
 * Una fotografía y, encima, tres tramos separados por dos cortes del color del
 * fondo. Los cortes son bordes de los propios tramos: así miden exactamente lo
 * que mide la tira, sin declarar su alto en ninguna parte.
 * ------------------------------------------------------------------------ */

.sjo-s__interior {
	max-width: 83.75rem;
	margin-inline: auto;
}

/* 16/28 en escritorio y 15/24 en móvil. */
.sjo-s__bajada {
	margin: 1.25rem 0 0;
	max-width: 38.75rem;
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: clamp( 1.5rem, 1.94vw, 1.75rem );
}

.sjo-s--triptico .sjo-s__triptico {
	position: relative;
	margin-top: var( --wp--preset--spacing--60 );
}

/* La fotografía ocupa solo la franja de arriba. No cubre el tramo entero
   porque debajo de ella va el texto de cada uno, ya sobre el fondo de la
   sección. */
.sjo-s__triptico-foto {
	position: absolute;
	inset: 0 0 auto;
	aspect-ratio: 1240 / 380;

	/* La esquina superior izquierda va viva y las otras tres redondeadas: es la
	   forma que el diseño repite en fotografías y botones. */
	border-radius: 0 24px 24px 24px;
	overflow: hidden;
}

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

/* El velo que hace legible el texto sobre la escena.

   Va aquí y no en cada tramo. Antes era uno por tramo, y como los tramos van
   por encima y sin recortar, sus cuatro esquinas cuadradas asomaban por fuera
   de las esquinas redondeadas de la fotografía: en las puntas de la tira se
   veía una muesca azul oscura sobre el crema. Puesto aquí lo recorta la propia
   tira, que es además lo que hace la maqueta —un solo velo de 1240 × 230, no
   tres—. */
.sjo-s__triptico-foto::after {
	content: "";
	position: absolute;
	inset: 38% 0 0;
	background-image: linear-gradient(
		180deg,
		rgba( 0, 64, 120, 0 ) 0%,
		rgba( 0, 64, 120, 0.62 ) 55%,
		rgba( 0, 64, 120, 0.94 ) 100%
	);
	pointer-events: none;
}

.sjo-s__tramos {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La cabeza —numeral y titular— es exactamente tan alta como la fotografía:
   un tercio del ancho de la tira, y de ahí sale el 380 de alto. Así el texto
   de abajo empieza justo donde acaba la escena, sin declarar ninguna altura. */
.sjo-s__tramo-cabeza {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	gap: 0.5rem;
	aspect-ratio: 124 / 114;
	padding: 1.75rem;
	color: var( --wp--preset--color--base, #fff );
}

/* El corte. Toma el color del fondo de la sección, que es lo que hace que
   parezca que la fotografía está partida y no que tiene una raya encima. */
.sjo-s__tramo + .sjo-s__tramo .sjo-s__tramo-cabeza {
	border-inline-start: 6px solid var( --sjo-s-fondo, #f4f1ec );
}


.sjo-s__tramo-num,
.sjo-s__tramo-tit {
	position: relative;
}

.sjo-s__tramo-num {
	color: rgba( 201, 220, 234, 0.85 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.2em;
}

.sjo-s__tramo-tit {
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.67vw, 1.5rem );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.017em;
	text-wrap: balance;
}

/* El texto cae a plomo con su tramo, ya fuera de la fotografía. El recorte de
   la derecha es el de la maqueta: 380 de ancho en una columna de 409. */
.sjo-s__tramo-txt {
	/* 40 px bajo la fotografía, como en la maqueta. */
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
	padding-inline-end: clamp( 1rem, 2.34vw, 1.8125rem );
	font-size: 0.9375rem;
	line-height: 1.6;
}


/* El color del corte es « --sjo-s-fondo », que se declara arriba junto al fondo
   de cada banda: es el mismo selector y no se declara dos veces. */

@media ( max-width: 781px ) {
	/* En móvil el tríptico deja de ser una escena partida: la fotografía va
	   entera arriba y los tres tramos pasan a ser un carrusel de tarjetas
	   blancas con su numeral, su titular y su texto juntos. Es como lo pinta la
	   maqueta, y es lo único que cabe: tres escenas de 400 px no entran en una
	   pantalla de 390. */
	.sjo-s--triptico .sjo-s__triptico {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	/* « relative » y no « static »: la fotografía va dentro en posición
	   absoluta, y sin caja propia se medía contra el tríptico entero —430 px de
	   alto— y se recortaba a los 200 de arriba. Salía la mitad superior de una
	   escena estirada: techos, y las cabezas cortadas. */
	.sjo-s__triptico-foto {
		position: relative;
		aspect-ratio: 326 / 200;
		border-radius: 0 20px 20px 20px;
	}

	/* Sin texto encima, el velo sobra. */
	.sjo-s__triptico-foto::after {
		content: none;
	}

	.sjo-s__tramos {
		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__tramos::-webkit-scrollbar {
		display: none;
	}

	/* La tarjeta blanca es el « li » entero.

	   Antes el fondo y el redondeo iban en la cabeza y en el texto por separado,
	   cada uno con media forma. Como las tarjetas se estiran a la más alta, a la
	   que tenía el titular en una línea le sobraban veintitantos píxeles por
	   debajo sin fondo: se veía la tarjeta cortada y con una costura en medio. */
	.sjo-s__tramo {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		background-color: var( --wp--preset--color--base, #fff );
		border-radius: 0 20px 20px 20px;

		overflow: hidden;
		scroll-snap-align: start;
	}

	/* La tarjeta blanca. Ya no hay fotografía debajo, así que ni velo ni corte
	   ni texto en blanco: el numeral y el titular vuelven a leerse en oscuro. */
	.sjo-s__tramo-cabeza {
		aspect-ratio: auto;
		padding: 1.5rem 1.5rem 0;
		color: inherit;
	}

	/* Apiladas en tarjetas, ya no hay escena que partir. */
	.sjo-s__tramo + .sjo-s__tramo .sjo-s__tramo-cabeza {
		border-inline-start: 0;
	}

	.sjo-s__tramo-num {
		color: var( --wp--preset--color--rojo, #e00026 );
		font-size: 0.6875rem;
		letter-spacing: 0.1455em;
	}

	.sjo-s__tramo-tit {
		color: var( --wp--preset--color--azul, #004078 );
		font-size: 1.1875rem;
		line-height: 1.368;
		letter-spacing: -0.025rem;
	}

	.sjo-s__tramo-txt {
		margin: 0;
		padding: 0.75rem 1.5rem 1.5rem;
		font-size: 0.8125rem;
		line-height: 1.615;
	}

}

/* ---------------------------------------------------------------------------
 * Fichas
 * ------------------------------------------------------------------------ */

.sjo-s--fichas {
	position: relative;
	overflow: hidden;
}

/* El aro del fondo. Es una circunferencia y la dibuja el CSS: no hace falta un
   SVG para un borde redondo, y así escala con la sección en vez de deformarse. */
.sjo-s__aro {
	position: absolute;
	top: -7.5rem;
	inset-inline-end: -5rem;
	width: 32.5rem;
	height: 32.5rem;
	border: 1px solid rgba( 201, 220, 234, 0.22 );
	border-radius: 50%;
	pointer-events: none;
}

.sjo-s--fichas .sjo-s__interior {
	position: relative;
}

.sjo-s__enlace-fila {
	margin: var( --wp--preset--spacing--40 ) 0 0;
}

.sjo-s__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.014em;
	text-decoration: none;
}

.sjo-s__enlace::after {
	content: "\2192";
	transition: transform 0.2s ease;
}

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

.sjo-s__fichas {
	display: grid;

	/* Dos, como en la maqueta. Con « auto-fit » salían tres en pantallas anchas
	   y la cuarta se quedaba sola en su fila. */
	grid-template-columns: repeat( 2, 1fr );

	/* 40 px entre columnas y 32 entre filas, como en la maqueta. */
	gap: 2rem clamp( 1.25rem, 2.78vw, 2.5rem );

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

.sjo-s__ficha {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.5rem 0.875rem;

	/* 168 px de alto sobre el lienzo de 1440: es lo que iguala las cuatro
	   fichas aunque una lleve una línea más de texto. */
	box-sizing: border-box;
	min-height: clamp( 9rem, 11.67vw, 10.5rem );
	padding: 1.75rem 2rem;
	background-color: rgba( 255, 255, 255, 0.07 );

	/* La esquina superior izquierda recta, la inferior izquierda apenas
	   redondeada y las dos de la derecha generosas: la misma forma que los
	   botones y las fotografías. */
	border-radius: 0 32px 32px 12px;
}

.sjo-s__ficha-pic {
	display: block;
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__ficha-pic svg {
	display: block;
	width: 26px;
	height: 26px;
}

.sjo-s__ficha-tit {
	margin: 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.sjo-s__ficha-num {
	color: rgba( 201, 220, 234, 0.5 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.077em;
	font-variant-numeric: tabular-nums;
}

.sjo-s__ficha-txt {
	grid-column: 1 / -1;
	margin: 0.625rem 0 0;
	color: rgba( 201, 220, 234, 0.85 );
	font-size: 0.875rem;
	line-height: 1.571;
}

/* Sobre fondo claro la ficha necesita otro relleno: un blanco al 7 % sobre
   blanco no se ve. */
.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha,
.sjo-s--fichas.es-fondo-crema .sjo-s__ficha {
	background-color: rgba( 0, 64, 120, 0.05 );
}

.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha-pic,
.sjo-s--fichas.es-fondo-crema .sjo-s__ficha-pic,
.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha-tit,
.sjo-s--fichas.es-fondo-crema .sjo-s__ficha-tit {
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha-txt,
.sjo-s--fichas.es-fondo-crema .sjo-s__ficha-txt,
.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha-num,
.sjo-s--fichas.es-fondo-crema .sjo-s__ficha-num {
	color: var( --wp--preset--color--texto, #55575e );
}

.sjo-s--fichas.es-fondo-blanco .sjo-s__enlace,
.sjo-s--fichas.es-fondo-crema .sjo-s__enlace {
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--fichas.es-fondo-blanco .sjo-s__aro,
.sjo-s--fichas.es-fondo-crema .sjo-s__aro {
	border-color: rgba( 0, 64, 120, 0.12 );
}

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

@media ( max-width: 781px ) {
	.sjo-s__aro {
		display: none;
	}

	/* En móvil las cuatro fichas pasan a ser un carrusel, como en la maqueta.
	   Y cambian de piel: sobre el azul de la sección la ficha deja de ser un
	   blanco al 7 % y se vuelve una tarjeta blanca maciza, con el numeral
	   arriba en azul y el pictograma fuera —en una tarjeta de 326 px, el
	   pictograma y el numeral en la misma línea se estorban—. */
	.sjo-s__fichas {
		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__fichas::-webkit-scrollbar {
		display: none;
	}

	.sjo-s__ficha {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		gap: 0;
		padding: 1.5rem;
		background-color: var( --wp--preset--color--base, #fff );
		border-radius: 0 20px 20px 20px;
		scroll-snap-align: start;
	}

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

	.sjo-s__ficha-pic {
		display: none;
	}

	/* El numeral se va arriba del todo y crece: en la maqueta móvil es él quien
	   abre la tarjeta, no el pictograma. */
	.sjo-s__ficha-num {
		order: -1;
		color: var( --wp--preset--color--azul, #004078 );
		font-size: 1.1875rem;
		line-height: 1.368;
		letter-spacing: 0.0526em;
	}

	.sjo-s__ficha-tit,
	.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha-tit,
	.sjo-s--fichas.es-fondo-crema .sjo-s__ficha-tit {
		margin-top: 0.5rem;
		color: var( --sjo-s-gris, #5a6472 );
		font-size: 0.8125rem;
		line-height: 1.615;
		letter-spacing: -0.0154em;
	}

	.sjo-s__ficha-txt,
	.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha-txt,
	.sjo-s--fichas.es-fondo-crema .sjo-s__ficha-txt {
		margin-top: 0.4375rem;
		color: var( --sjo-s-gris, #5a6472 );
		font-size: 0.8125rem;
		line-height: 1.615;
	}
}


/* ---------------------------------------------------------------------------
 * Tira de tarjetas
 * ------------------------------------------------------------------------ */

.sjo-s__tira-cabecera {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
}

/* El bloque de texto cede el ancho que necesitan las flechas. Sin este tope el
   titular se estira hasta empujarlas a la línea de abajo, y el diseño las pone
   a la derecha del titular.

   Son 700 px y no los 640 del resto de secciones: aquí la maqueta ensancha el
   titular para que «Seis promesas que sostienen los trece años de escolaridad»
   entre en dos líneas. Con 640 caía en tres y la cabecera crecía de más. */
.sjo-s__tira-cabecera .sjo-s__encabezado {
	flex: 1 1 43.75rem;
	max-width: 43.75rem;
	min-width: 0;
}

.sjo-s__tira-cabecera .sjo-s__controles {
	flex: 0 0 auto;
}

.sjo-s__controles {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sjo-s__cuenta {
	margin: 0 0.5rem 0 0;
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.27;
	font-variant-numeric: tabular-nums;
}

.sjo-s__cuenta-total {
	color: rgba( 90, 100, 114, 0.7 );
	font-size: 0.9375rem;
	font-weight: 500;
}

.sjo-s__control {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba( 0, 64, 120, 0.18 );
	border-radius: 50%;
	background: none;
	color: rgba( 0, 64, 120, 0.4 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Dando vueltas sin fin no hay flecha que no lleve a ninguna parte, así que
   ninguna se apaga. Lo que queda es la jerarquía de la maqueta: «siguiente» en
   azul macizo, porque es el gesto que se espera, y «anterior» en contorno. */
.sjo-s__control[data-sjo-carrusel-ir="1"] {
	border-color: var( --wp--preset--color--azul, #004078 );
	background-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__control[data-sjo-carrusel-ir="-1"]:hover,
.sjo-s__control[data-sjo-carrusel-ir="-1"]:focus-visible {
	border-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--tira {
	/* El alto de la tira: 500 px sobre el lienzo de 1440. Lo fija la tarjeta
	   destacada y las demás se estiran hasta ahí, que es lo que alinea los
	   enlaces de todas las tarjetas en una misma línea, como en la maqueta. */
	--sjo-carrusel-alto: clamp( 22rem, 34.72vw, 31.25rem );

	/* Los anchos de tarjeta son el reparto exacto del ancho disponible: una
	   destacada más las miniaturas que quepan, sin que sobre ni falte un
	   píxel. Por eso los escribe el guion —solo él sabe cuánto mide la caja— y
	   estos valores son el respaldo para el primer pintado y para cuando no
	   hay JavaScript.

	   Se guarda la proporción de la maqueta, 620:400, que es lo que importa;
	   las cifras absolutas salen de la pantalla de cada cual. */
	--sjo-carrusel-ancho: clamp( 16.75rem, 27.78vw, 25rem );
	--sjo-carrusel-ancho-destacada: clamp( 16.75rem, 43.06vw, 38.75rem );
}

.sjo-s__tira {
	display: flex;
	gap: clamp( 1rem, 1.39vw, 1.25rem );

	/* 48 px bajo la bajada. */
	margin: clamp( 2rem, 3.33vw, 3rem ) 0 0;
	padding: 0;
	list-style: none;

	/* Ni sangría ni relleno: la fila empieza y acaba justo en los bordes del
	   interior. Es lo que hace que no asome nunca media tarjeta —la siguiente
	   arranca exactamente en el borde derecho, fuera de la vista—, y para eso
	   los anchos de tarjeta los calcula el guion a partir de lo que mide esta
	   caja, en vez de venir dados en píxeles. */
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.sjo-s__tarjeta {
	display: flex;
	flex-direction: column;
	flex: 0 0 var( --sjo-carrusel-ancho );
	scroll-snap-align: start;

	/* El ancho se anima porque la tarjeta que pasa a primera crece en el sitio
	   —el guion la mantiene pegada al borde izquierdo mientras tanto—. */
	transition: flex-basis 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.sjo-s__tarjeta-foto,
.sjo-s__tarjeta-foto img {
	display: block;
	width: 100%;
	border-radius: 0 24px 24px 24px;
}

/* « height: auto » no es de adorno: WordPress imprime « width » y « height » en
   la etiqueta, y con los dos puestos el navegador da por definido el alto y se
   salta el « aspect-ratio ». La miniatura salía con la proporción del archivo
   —378 px de alto en vez de 238— y estiraba la fila entera. */
.sjo-s__tarjeta-foto img {
	height: auto;
	aspect-ratio: 400 / 238;
	object-fit: cover;
}

/* « border-box » importa aquí: la tarjeta destacada fija su alto con un
   « min-height », y en la caja de contenido ese alto se habría sumado a los
   40 px de relleno de cada lado —500 pedidos, 580 pintados—. */
.sjo-s__tarjeta-cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-grow: 1;
	box-sizing: border-box;
	gap: 0.625rem;
	padding-top: var( --wp--preset--spacing--40 );
}

.sjo-s__tarjeta-pic {
	display: block;
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__tarjeta-pic svg {
	display: block;
}

.sjo-s__tarjeta-tit {
	margin: 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: -0.014em;
}

.sjo-s__tarjeta-txt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.571;
}

.sjo-s__tarjeta-enlace {
	margin-top: auto;
	padding-top: 0.5rem;
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.015em;
	text-decoration: none;
}

/* El hueco va de margen y no de espacios dentro del contenido: en HTML dos
   espacios seguidos se cuentan como uno y la flecha quedaba pegada al rótulo. */
.sjo-s__tarjeta-enlace::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s ease;
}

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

/* La destacada: más ancha, y el texto sobre su propia fotografía.
 *
 * Cuál es no lo decide el marcado sino el guion: la destacada es siempre la que
 * está en primer lugar, así que al avanzar el carrusel esta clase salta de una
 * tarjeta a la siguiente. El servidor la pone en la primera para que la sección
 * ya salga bien pintada antes de que cargue ningún script. */
.sjo-s__tarjeta.es-destacada {
	position: relative;
	flex-basis: var( --sjo-carrusel-ancho-destacada );
	border-radius: 0 24px 24px 24px;
	overflow: hidden;
}

.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-foto,
.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-foto img {
	position: absolute;
	inset: 0;
	height: 100%;
	border-radius: 0;
	aspect-ratio: auto;
	object-fit: cover;
}

.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo {
	position: relative;
	justify-content: flex-end;
	min-height: var( --sjo-carrusel-alto );
	padding: clamp( 1.5rem, 2.78vw, 2.5rem );
	color: var( --wp--preset--color--base, #fff );
}

/* El velo, para que el texto se lea sobre cualquier fotografía.
 *
 * Arranca al 26 % de la altura, que es donde la maqueta lo hace nacer: por
 * encima la fotografía se ve limpia y por debajo el azul cierra casi opaco.
 *
 * Entra con una transición propia porque la tarjeta destacada va cambiando: sin
 * ella, cada vez que el carrusel avanza el azul aparecería de golpe sobre la
 * fotografía recién llegada. */
.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo::before {
	content: "";
	position: absolute;
	inset: 26% 0 0;
	background-image: linear-gradient(
		180deg,
		rgba( 0, 64, 120, 0 ) 0%,
		rgba( 0, 64, 120, 0.6 ) 42%,
		rgba( 0, 64, 120, 0.9 ) 72%,
		rgba( 0, 64, 120, 0.97 ) 100%
	);
	pointer-events: none;
	animation: sjo-tira-velo 0.55s ease both;
}

/* El salto entre la vuelta de verdad y su copia se hace a oscuras: sin
   transición de ancho y sin que el velo vuelva a entrar. Sin esto, cada vez
   que el carrusel completa una vuelta se vería la tarjeta encogerse y crecer
   otra vez en el sitio. */
.sjo-s__tira.es-quieta .sjo-s__tarjeta {
	transition: none;
}

.sjo-s__tira.es-quieta .sjo-s__tarjeta-cuerpo::before,
.sjo-s__tira.es-quieta .sjo-s__tarjeta-cuerpo > * {
	animation: none;
}

@keyframes sjo-tira-velo {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* El texto entra con el velo, no antes: si no, se leía un instante en blanco
   sobre la fotografía todavía sin fondo. */
.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo > * {
	position: relative;
	animation: sjo-tira-velo 0.55s ease both;
}

.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-pic {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-tit {
	color: var( --wp--preset--color--base, #fff );
	font-size: clamp( 1.5rem, 2.08vw, 1.875rem );
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.027em;
}

.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-txt {
	color: rgba( 201, 220, 234, 0.92 );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-enlace {
	margin-top: 0.75rem;
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__barra {
	position: relative;
	height: 3px;

	/* 56 px bajo las tarjetas. */
	margin-top: clamp( 2rem, 3.89vw, 3.5rem );
	background-color: rgba( 0, 64, 120, 0.1 );
}

.sjo-s__barra-avance {
	position: absolute;
	inset: 0 auto 0 0;
	width: 33%;
	background-color: rgba( 0, 64, 120, 0.85 );
	transition: width 0.15s linear;
}

/* ---------------------------------------------------------------------------
 * Los puntos, que son el indicador del móvil
 *
 * En la maqueta móvil no hay flechas ni contador ni barra: hay seis puntos, y
 * el de la tarjeta que se está viendo se estira y se pone rojo. Ocupan mucho
 * menos que los controles de escritorio, que a 390 px no caben en su línea.
 *
 * Son botones y no adornos: si están en pantalla, se puede saltar a una tarjeta
 * concreta con el dedo o con el teclado.
 * ------------------------------------------------------------------------ */

.sjo-s__carrusel-puntos {
	display: none;
	gap: 0.5rem;
	margin-top: var( --wp--preset--spacing--50 );
}

.sjo-s__carrusel-punto {
	width: 8px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background-color: rgba( 167, 198, 221, 0.5 );
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.sjo-s__carrusel-punto.es-activo {
	width: 24px;
	background-color: var( --wp--preset--color--rojo, #e00026 );
}

/* Sobre el azul, los puntos apagados pasan a blanco translúcido: el azul claro
   sobre #004078 no se distingue. El activo sigue siendo rojo, que es lo que lo
   separa de los demás. */
.sjo-s.es-fondo-azul .sjo-s__carrusel-punto {
	background-color: rgba( 255, 255, 255, 0.5 );
}

.sjo-s.es-fondo-azul .sjo-s__carrusel-punto.es-activo {
	background-color: var( --wp--preset--color--rojo, #e00026 );
}

/* Las copias que cuelga el guion para dar la vuelta sin fin solo tienen sentido
   mientras la sección es un carrusel. En las que solo lo son en móvil, en
   escritorio se apagan: si no, el tríptico saldría con seis tramos y las fichas
   con ocho. */
@media ( min-width: 782px ) {
	[data-sjo-carrusel="movil"] .es-copia {
		display: none;
	}
}

@media ( max-width: 781px ) {
	/* En móvil no hay tarjeta destacada: la maqueta pinta las seis iguales
	   —fotografía arriba, texto debajo en oscuro y enlace en rojo—, sin velo
	   azul. Con 390 px de ancho, una tarjeta grande no deja sitio a la
	   siguiente y el carrusel deja de leerse como carrusel.

	   Se anula aquí en lugar de no poner la clase, para que el guion pueda
	   seguir llevando la cuenta de cuál va primera sin saber nada del ancho de
	   la pantalla. */
	.sjo-s__tarjeta,
	.sjo-s__tarjeta.es-destacada {
		position: static;
		flex-basis: var( --sjo-carrusel-ancho );
		border-radius: 0;
		overflow: visible;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-foto,
	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-foto img {
		position: static;
		height: auto;
		border-radius: 0 20px 20px 20px;
		aspect-ratio: 268 / 170;
		object-fit: cover;
	}

	.sjo-s__tarjeta-foto,
	.sjo-s__tarjeta-foto img {
		border-radius: 0 20px 20px 20px;
	}

	.sjo-s__tarjeta-foto img {
		aspect-ratio: 268 / 170;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo {
		position: static;
		justify-content: flex-start;
		min-height: 0;
		padding: var( --wp--preset--spacing--40 ) 0 0;
		color: inherit;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo::before {
		content: none;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo > * {
		animation: none;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-pic {
		color: var( --wp--preset--color--azul, #004078 );
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-tit {
		color: var( --sjo-s-tinta, #14181f );
		font-size: 1.1875rem;
		line-height: 1.368;
		letter-spacing: -0.0175rem;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-txt {
		color: inherit;
		font-size: 0.875rem;
		line-height: 1.571;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-enlace {
		margin-top: auto;
		color: var( --wp--preset--color--rojo, #e00026 );
	}

	.sjo-s__tarjeta-tit {
		font-size: 1.1875rem;
	}

	/* El contador, las flechas y la barra son de escritorio; aquí mandan los
	   puntos. */
	.sjo-s__controles,
	.sjo-s__barra {
		display: none;
	}

	.sjo-s__carrusel-puntos {
		display: flex;
	}

	.sjo-s__tira-cabecera {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Al apilarse la cabecera, el eje principal pasa a ser el vertical y aquel
	   « flex-basis » de 700 px —pensado como ancho— se convertía en 700 px de
	   alto: medio metro de blanco entre la bajada y las tarjetas. */
	.sjo-s__tira-cabecera .sjo-s__encabezado {
		flex: 0 0 auto;
		max-width: none;
	}
}

/* Quien pide menos movimiento no ve ni el velo entrando ni la tarjeta
   creciendo; el carrusel sigue funcionando, pero a saltos secos. Que se mueva
   solo también se apaga, y eso se decide en el guion. */
@media ( prefers-reduced-motion: reduce ) {
	.sjo-s__tarjeta,
	.sjo-s__carrusel-punto {
		transition: none;
	}

	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo::before,
	.sjo-s__tarjeta.es-destacada .sjo-s__tarjeta-cuerpo > * {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * Declaración
 * ------------------------------------------------------------------------ */

/* La sangría: lo que hay entre el borde del contenido y el borde de la
   pantalla. Con el lienzo estrecho es el canalón; con el lienzo ancho, la
   mitad de lo que sobra a los lados del interior de 1340 px.

   « overflow: clip » está por el ancho de la barra de desplazamiento, que
   « 100vw » cuenta y el contenido no: sin él la fotografía se pasaría unos
   quince píxeles y la página entera se podría mover de lado. */
.sjo-s--declaracion {
	--sjo-sangrado: max( var( --sjo-gutter ), calc( ( 100vw - 83.75rem ) / 2 ) );

	overflow: clip;
}

/* La rejilla no va mitad y mitad: en la maqueta el texto ocupa 660 del
   interior y la fotografía 480 —más lo que sangra—, con 100 de calle. */
.sjo-s--declaracion .sjo-s__reja {
	display: grid;
	gap: clamp( 2rem, 6.94vw, 100px );
	align-items: center;
	max-width: 83.75rem;
	margin-inline: auto;
}

.sjo-s--declaracion.es-imagen-derecha .sjo-s__reja {
	grid-template-columns: 11fr 8fr;
}

.sjo-s--declaracion.es-imagen-izquierda .sjo-s__reja {
	grid-template-columns: 8fr 11fr;
}

.sjo-s--declaracion.es-imagen-derecha .sjo-s__medio {
	order: 2;
}

/* La fotografía se queda dentro de su columna.

   El Figma la saca hasta el borde de la pantalla con una sola esquina rota, y
   así estuvo; el colegio pidió lo contrario, y es lo que manda. Vuelve a ser un
   rectángulo con la forma de siempre: esquina superior izquierda a escuadra y
   las otras tres redondeadas, como las fotos del resto del sitio. */
.sjo-s--declaracion .sjo-s__medio {
	width: 100%;
}

/* Sin proporción fija: la fotografía se ve entera, con un tope de alto.

   Con una caja apaisada obligatoria, un retrato vertical se quedaba en una
   franja del medio —de la foto de la Visión, 580×775, solo se veía el 53 %, y
   lo que quedaba era una cara ampliada—. Dejándola con su propia proporción se
   ve completa, y el tope impide que una foto muy alta estire la sección: el
   alto lo sigue decidiendo el código, no el archivo que suban.

   El punto de recorte va alto porque cuando toca recortar, lo que interesa
   guardar es la cara, que casi nunca está en el centro geométrico.

   « height: auto » es obligatorio: si no, el atributo « height » que imprime
   WordPress gana y manda el archivo. */
.sjo-s--declaracion .sjo-s__medio img {
	display: block;
	width: 100%;
	height: auto;
	max-height: clamp( 18rem, 31.9vw, 28.75rem );
	object-fit: cover;
	object-position: center 35%;
	border-radius: 0 24px 24px 24px;
}

.sjo-s--declaracion .sjo-s__columna {
	position: relative;
}

/* Aquí el titular es la declaración misma, y va un punto menor que el de una
   sección corriente: 40/50 en vez de 44/50, porque es un párrafo largo y no un
   rótulo de dos palabras. */
.sjo-s--declaracion .sjo-s__titular {
	font-size: clamp( 1.875rem, 2.78vw, 2.5rem );
	line-height: clamp( 2.375rem, 3.47vw, 3.125rem );
	letter-spacing: -0.075rem;
}

/* Y el texto de apoyo, uno mayor: 17/30. */
.sjo-s--declaracion .sjo-s__texto {
	font-size: clamp( 0.9375rem, 1.18vw, 1.0625rem );
	line-height: clamp( 1.5rem, 2.08vw, 1.875rem );
}

/* El numeral hueco. Va detrás del encabezado y asomando por arriba, como en el
   diseño; lo que sobresalga lo recorta la sección. */
.sjo-s__numeral {
	position: absolute;

	/* Asoma por arriba y su pie queda por encima del titular: es lo que hace
	   que se lea como fondo y no como una cifra más del texto. */
	top: -0.76em;
	z-index: 0;
	color: transparent;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 5rem, 13.89vw, 12.5rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	-webkit-text-stroke: 1.5px rgba( 0, 64, 120, 0.13 );
	user-select: none;
}

.sjo-s--declaracion.es-imagen-derecha .sjo-s__numeral {
	inset-inline-start: -0.04em;
}

/* Con la fotografía a la izquierda el texto queda a la derecha, y el numeral se
   va con él: en el diseño siempre está del lado de afuera. */
.sjo-s--declaracion.es-imagen-izquierda .sjo-s__numeral {
	inset-inline-end: -0.04em;
}

.sjo-s--declaracion .sjo-s__encabezado,
.sjo-s--declaracion .sjo-s__texto,
.sjo-s--declaracion .sjo-s__puntos {
	position: relative;
	z-index: 1;
}

/* La declaración usa toda su columna —660 px— y no los 640 del tope general:
   es un párrafo, no un rótulo, y con 640 caía una línea de más. */
.sjo-s--declaracion .sjo-s__encabezado {
	max-width: none;
}

/* Las filas van a 44 px de paso: 24 de pictograma y 20 de aire. */
.sjo-s__puntos {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;

	/* 74 px bajo el texto, que es lo que separa la declaración de su lista. */
	margin: clamp( 2rem, 5.14vw, 4.625rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__punto {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 24px;
}

.sjo-s__punto-pic {
	display: block;
	flex: 0 0 auto;
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__punto-pic svg {
	display: block;
	width: 24px;
	height: 24px;
}

.sjo-s__punto-txt {
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.9375rem, 1.18vw, 1.0625rem );
	font-weight: 600;
	line-height: 1.412;
	letter-spacing: -0.0125rem;
}

@media ( max-width: 781px ) {

	/* En móvil el orden cambia: primero la declaración, después la fotografía y
	   al final la lista de puntos. En escritorio la fotografía va al costado y
	   los puntos cuelgan del texto, así que están anidados dentro de la
	   columna; « display: contents » deshace esa caja sin tocar el marcado y
	   deja los tres como hermanos, listos para ordenarlos. */
	.sjo-s--declaracion .sjo-s__reja {
		display: flex;
		flex-direction: column;
		gap: var( --wp--preset--spacing--50 );
	}

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

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

	.sjo-s--declaracion .sjo-s__texto {
		order: 2;
		margin-top: 0;
	}

	/* Las dos variantes por su nombre: el « order: 2 » que coloca la foto en la
	   columna derecha en escritorio lleva dos clases en el mismo elemento y pesa
	   más que un « .sjo-s--declaracion .sjo-s__medio » a secas, media query o no.
	   Sin igualar la especificidad, la Visión sacaba la foto antes del texto. */
	.sjo-s--declaracion.es-imagen-derecha .sjo-s__medio,
	.sjo-s--declaracion.es-imagen-izquierda .sjo-s__medio {
		order: 3;
		width: 100%;
		margin-inline-start: 0;
	}

	.sjo-s--declaracion .sjo-s__puntos {
		order: 4;
		margin-top: 0;
	}

	/* El numeral hueco es de escritorio: a 390 px de ancho no cabe detrás del
	   titular sin comérselo. La maqueta móvil no lo lleva en ninguna sección. */
	.sjo-s__numeral {
		display: none;
	}

	/* En móvil sí hay caja: 326 × 210, que es lo que dan las dos pantallas de
	   la maqueta móvil —Visión y Misión— y lo que impide que un retrato vertical
	   deje la sección convertida en una tira.

	   La proporción va en la fotografía y no en su caja. En la caja no servía:
	   el alto que sale de « aspect-ratio » no resuelve porcentajes contra él, y
	   la fotografía se quedaba o en sus 436 px —saliéndose 94 por debajo del
	   borde de la sección— o en cero. Es la misma receta que ya usan los
	   Valores.

	   El fallo de fondo era otro: la caja de 210 px se la ponía, sin querer, la
	   regla de « texto con imagen », que iba sin apellido y alcanzaba a todas
	   las secciones. Ya está apuntada. */
	.sjo-s--declaracion .sjo-s__medio img {
		height: auto;
		max-height: none;
		aspect-ratio: 326 / 210;

		/* Más arriba que en escritorio: al pasar de una caja alta a una apaisada,
		   lo primero que se pierde es la cabeza. */
		object-position: center 28%;
	}

	/* Los rótulos de los puntos pasan a azul y suben a 16/26; las filas van a
	   50 px de paso. */
	.sjo-s__puntos {
		gap: 1.5rem;
	}

	.sjo-s__punto-pic svg {
		width: 26px;
		height: 26px;
	}

	.sjo-s__punto-txt {
		color: var( --wp--preset--color--azul, #004078 );
		font-size: 1rem;
		line-height: 1.625;
	}
}

/* ---------------------------------------------------------------------------
 * Cita
 * ------------------------------------------------------------------------ */

.sjo-s--cita {
	--sjo-sangrado: max( var( --sjo-gutter ), calc( ( 100vw - 83.75rem ) / 2 ) );

	position: relative;
	overflow: clip;
}

/* El aro del diseño: una circunferencia fina que entra por arriba y la sección
   recorta. Cuelga de la sección y no del texto porque en la maqueta su sitio se
   mide desde el borde del lienzo, no desde la frase. Es adorno: ni ocupa sitio
   ni recibe el puntero. */
.sjo-s--cita::before {
	content: "";
	position: absolute;
	top: calc( -1 * clamp( 5rem, 11.11vw, 10rem ) );
	inset-inline-start: clamp( 1rem, 8.33vw, 7.5rem );
	z-index: 0;
	width: clamp( 12rem, 29.17vw, 26.25rem );
	aspect-ratio: 1;
	border: 1px solid rgba( 0, 64, 120, 0.16 );
	border-radius: 50%;
	pointer-events: none;
}

/* La frase ocupa 720 del interior y la fotografía 462 más lo que sangra.
 *
 * La fotografía va en posición absoluta y no en una columna de la rejilla
 * porque en la maqueta es más alta que la banda de contenido: se sale del
 * relleno por arriba y por abajo en vez de estirar la sección. Con ella dentro
 * del flujo, la sección crecía de 520 a 557. El alto lo fija el texto, con un
 * suelo que es el de la maqueta. */
.sjo-s--cita .sjo-s__reja {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp( 14rem, 22.78vw, 20.5rem );
	max-width: 83.75rem;
	margin-inline: auto;
}

/* « margin: 0 » no es cosmético: un « blockquote » trae 40 px a cada lado del
   navegador, y con ellos la frase no caía a plomo con el filete. */
.sjo-s__cita {
	margin: 0;
	max-width: 58.06%;
}

/* Recta y dentro de su columna. El Figma la saca hasta el borde y la tuerce
   5,6°, como la de «Bienvenida»; el colegio prefirió verla derecha, y es lo que
   vale. Queda con la forma de la familia, igual que las demás. */
.sjo-s--cita .sjo-s__medio {
	position: absolute;
	top: 50%;
	inset-inline-end: 0;
	width: 37.26%;
	transform: translateY( -50% );
	border-radius: 0 24px 24px 24px;
	overflow: hidden;
}

/* Las comillas van aquí y no en el texto: así lo que se copia sale limpio, y
   quien escribe no tiene que acordarse de teclear las angulares. */
.sjo-s__cita-txt {
	margin: clamp( 1.5rem, 2.78vw, 2.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.75rem, 4.03vw, 3.625rem );
	font-weight: 800;
	line-height: clamp( 2.25rem, 4.58vw, 4.125rem );
	letter-spacing: -0.125rem;
	text-wrap: balance;
}

.sjo-s__cita-txt::before {
	content: "\00AB";
}

.sjo-s__cita-txt::after {
	content: "\00BB";
}

.sjo-s__cita-pie {
	display: block;
	margin-top: clamp( 1rem, 1.67vw, 1.5rem );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.9375rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.025rem;
}

.sjo-s--cita .sjo-s__medio .sjo-foto {
	display: block;
}

/* Como en la declaración: se ve entera, con tope de alto y el recorte —cuando
   toque— por la parte de arriba. */
.sjo-s--cita .sjo-s__medio img {
	display: block;
	width: 100%;
	height: auto;
	max-height: clamp( 14rem, 25vw, 22.5rem );
	object-fit: cover;
	object-position: center 35%;
}

@media ( max-width: 781px ) {

	/* En una columna sola vuelve al flujo y ocupa el ancho entero. */
	.sjo-s--cita .sjo-s__medio {
		position: static;
		top: auto;
		inset-inline-end: auto;
		width: 100%;
		transform: none;
	}

	.sjo-s--cita .sjo-s__reja {
		display: flex;
		min-height: 0;
		gap: var( --wp--preset--spacing--50 );
	}

	.sjo-s__cita {
		max-width: none;
	}

	.sjo-s--cita .sjo-s__medio img {
		top: 0;
		height: auto;
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
 * Valor rector y derivados
 * ------------------------------------------------------------------------ */

.sjo-s--valores {
	overflow: clip;
}

.sjo-s--valores .sjo-s__interior {
	position: relative;
}

/* El numeral del Ideario, aquí arriba a la derecha. Mismo adorno que en la
   declaración; solo cambia de esquina. */
.sjo-s--valores .sjo-s__numeral {
	inset-inline-end: 0;
}

/* La tarjeta y la fotografía se solapan: ese cruce es el diseño, no un
   descuido. La proporción sale del lienzo de 1440 —702 px de tarjeta contra
   590 de fotografía— y el canalón es negativo para que se monten. */
/* La caja que comparten la fotografía y la lista.
 *
 * El hueco de arriba es lo que la fotografía sobresale por encima del panel
 * —100 px sobre el lienzo de 1440—, para que al levantarla no se coma el aire
 * de la bajada. */
.sjo-s__valores-caja {
	position: relative;
	margin-top: clamp( 2rem, 4.44vw, 4rem );
}

/* La fotografía se monta sobre el panel azul: ese cruce es el diseño, no un
   descuido. Sale un poco del interior por la derecha —hasta 1403 de los 1440
   del lienzo—, sin llegar al borde. */
.sjo-s--valores .sjo-s__medio {
	position: absolute;

	/* Sube 100 px por encima del panel, como en la maqueta. No pisa la bajada
	   porque esta acaba en 740 y la fotografía empieza en 765. */
	top: calc( -1 * clamp( 0rem, 6.94vw, 100px ) );
	inset-inline-end: -5.08%;
	z-index: 2;
	width: 51.45%;
}

.sjo-s--valores .sjo-s__medio img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 638 / 426;
	border-radius: 0 24px 24px 24px;
	object-fit: cover;
}

/* La cruz del diseño, en la costura entre el panel y la fotografía. */
.sjo-s--valores .sjo-s__medio::after {
	content: "";
	position: absolute;
	inset-inline-start: -1.15rem;
	bottom: -1.15rem;
	width: 3.5rem;
	height: 3.5rem;
	background-color: #0d5f7a;
	clip-path: polygon(
		36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%,
		64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%
	);
}


/* La lista: el valor rector ocupa la fila entera y los tres derivados se
   reparten la de abajo. El hueco entre filas —64 px— es justo lo que la
   fotografía sobresale por debajo del panel más el aire que pide la maqueta. */
.sjo-s__valores {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	column-gap: clamp( 1.5rem, 2.78vw, 2.5rem );
	row-gap: clamp( 2rem, 4.44vw, 4rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El panel azul. La esquina superior izquierda a escuadra, la inferior
   izquierda apenas rota y las dos de la derecha muy abiertas: es la misma
   familia de formas, con los radios subidos porque la caja es grande. */
.sjo-s__valor.es-rector {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	box-sizing: border-box;
	min-height: clamp( 14rem, 19.44vw, 17.5rem );
	padding: clamp( 1.75rem, 3.89vw, 3.5rem );
	border-radius: 0 56px 56px 24px;
	background-color: var( --wp--preset--color--azul, #004078 );
	color: rgba( 201, 220, 234, 0.92 );
	overflow: hidden;
}

/* El velo con el que el panel se funde en la fotografía que se le monta
   encima: sin él, el azul termina en un canto recto justo debajo de la foto. */
.sjo-s__valor.es-rector::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 9.68%;
	background-image: linear-gradient( 90deg, var( --wp--preset--color--azul, #004078 ) 0%, rgba( 0, 64, 120, 0 ) 100% );
	transform: scaleX( -1 );
	pointer-events: none;
}

/* El pictograma y el rótulo del rector van en la misma línea. */
.sjo-s__valor.es-rector .sjo-s__valor-pic {
	float: inline-start;
	margin-inline-end: 0.875rem;
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__valor.es-rector .sjo-s__valor-pic svg {
	width: 34px;
	height: 34px;
}

.sjo-s__valor-rotulo {
	margin: 0.5rem 0 0;
	color: rgba( 201, 220, 234, 0.8 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.455;
	letter-spacing: 0.218em;
	text-transform: uppercase;
}

.sjo-s__valor.es-rector .sjo-s__valor-tit {
	clear: both;
	margin-top: 1.25rem;
	color: var( --wp--preset--color--base, #fff );
	font-size: clamp( 1.5rem, 2.36vw, 2.125rem );
	font-weight: 800;
	line-height: 1.176;
	letter-spacing: -0.0625rem;
}

.sjo-s__valor.es-rector .sjo-s__valor-txt {
	max-width: 38.75rem;
	color: inherit;
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: 1.625;
}

.sjo-s__valor-pic {
	display: block;
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__valor-pic svg {
	display: block;
	width: 28px;
	height: 28px;
}

/* 24/30 en la maqueta, contra los 21 de una tarjeta corriente: aquí cada valor
   es un rótulo de una palabra y aguanta el cuerpo. */
.sjo-s__valor-tit {
	margin: 1.25rem 0 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.1875rem, 1.67vw, 1.5rem );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.03125rem;
}

.sjo-s__valor-txt {
	margin: 0.625rem 0 0;
	font-size: clamp( 0.8125rem, 1.04vw, 0.9375rem );
	line-height: 1.733;
}

@media ( max-width: 1023px ) {

	/* Con dos columnas el valor rector sigue ocupando la fila entera. */
	.sjo-s__valores {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 781px ) {

	/* En móvil se deshace el montaje: la fotografía vuelve al flujo, encima, y
	   los cuatro valores —el rector incluido— pasan a ser las tarjetas de un
	   carrusel. Es como lo pinta la maqueta, y es lo único que cabe: un panel
	   de 1240 px no entra en una pantalla de 390. */
	.sjo-s__valores-caja {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	/* Vuelve al flujo, pero sigue siendo « relative »: de ella cuelga la cruz,
	   y con « static » se iba a buscar el ancestro posicionado y aterrizaba
	   sobre la tarjeta. */
	.sjo-s--valores .sjo-s__medio {
		position: relative;
		top: auto;
		inset-inline-end: auto;
		width: 100%;
		transform: none;
	}

	.sjo-s--valores .sjo-s__medio img {
		aspect-ratio: 326 / 210;
	}

	/* La cruz baja a la esquina de la fotografía: ya no hay costura con el
	   panel, pero la marca sigue en la maqueta. */
	.sjo-s--valores .sjo-s__medio::after {
		inset-inline-start: -1rem;
		bottom: -1rem;
		width: 3rem;
		height: 3rem;
	}

	.sjo-s__valores {
		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__valores::-webkit-scrollbar {
		display: none;
	}

	/* Las cuatro tarjetas son iguales: crema sobre el blanco de la sección. El
	   rector pierde el azul —ahí sería un bloque macizo que se come la
	   pantalla— y se distingue por su rótulo rojo. */
	.sjo-s__valor,
	.sjo-s__valor.es-rector {
		box-sizing: border-box;
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		min-height: 0;
		padding: 1.5rem;
		border-radius: 0 20px 20px 20px;
		background-color: var( --wp--preset--color--crema, #f4f1ec );
		color: var( --sjo-s-gris, #5a6472 );
		scroll-snap-align: start;
	}

	.sjo-s__valor.es-rector::after {
		content: none;
	}

	.sjo-s__valor.es-rector .sjo-s__valor-pic {
		float: none;
		margin-inline-end: 0;
		color: var( --wp--preset--color--azul, #004078 );
	}

	.sjo-s__valor-pic svg,
	.sjo-s__valor.es-rector .sjo-s__valor-pic svg {
		width: 26px;
		height: 26px;
	}

	.sjo-s__valor-rotulo {
		margin-top: 0.75rem;
		color: var( --wp--preset--color--rojo, #e00026 );
		letter-spacing: 0.109em;
	}

	.sjo-s__valor-tit,
	.sjo-s__valor.es-rector .sjo-s__valor-tit {
		clear: none;
		margin-top: 0.375rem;
		color: var( --wp--preset--color--azul, #004078 );
		font-size: 1.1875rem;
		line-height: 1.368;
		letter-spacing: -0.03125rem;
	}

	/* El rector aprieta algo más el titular: es el único de dos palabras. */
	.sjo-s__valor.es-rector .sjo-s__valor-tit {
		letter-spacing: -0.0625rem;
	}

	.sjo-s__valor-txt,
	.sjo-s__valor.es-rector .sjo-s__valor-txt {
		margin-top: 0.5rem;
		max-width: none;
		color: var( --sjo-s-gris, #5a6472 );
		font-size: 0.8125rem;
		line-height: 1.615;
	}
}


/* ---------------------------------------------------------------------------
 * Colegios de la red
 * ------------------------------------------------------------------------ */

.sjo-s__colegios-cabecera {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--40 );
}

.sjo-s__colegios-cabecera .sjo-s__encabezado {
	flex: 1 1 40rem;
	min-width: 0;
}

/* La cifra hueca con su rótulo debajo, alineados a la derecha. Es el mismo
   adorno que el numeral del Ideario —trazo fino y sin relleno—, pero aquí
   cuenta algo: cuántos colegios son. */
.sjo-s__cuenta-grande {
	flex: 0 0 auto;
	margin: 0;
	text-align: end;
}

.sjo-s__cuenta-cifra {
	display: block;
	color: transparent;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 5rem, 14.58vw, 13.125rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.038em;
	-webkit-text-stroke: 1.5px rgba( 0, 64, 120, 0.3 );
	user-select: none;
}

.sjo-s__cuenta-rotulo {
	display: block;
	margin-top: 0.75rem;
	color: rgba( 0, 64, 120, 0.6 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.455;
	letter-spacing: 0.218em;
	text-transform: uppercase;
}

.sjo-s.es-fondo-azul .sjo-s__cuenta-cifra {
	-webkit-text-stroke-color: rgba( 201, 220, 234, 0.35 );
}

.sjo-s.es-fondo-azul .sjo-s__cuenta-rotulo {
	color: rgba( 201, 220, 234, 0.7 );
}

.sjo-s__colegios {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	align-items: end;
	gap: clamp( 1rem, 1.39vw, 1.25rem );
	margin: clamp( 2.5rem, 5.56vw, 5rem ) 0 0;
	padding: 0;
	list-style: none;
}

/* La tarjeta: esquina superior izquierda a escuadra, la de abajo apenas rota y
   las dos de la derecha muy abiertas. Es la forma de las fichas, con los radios
   subidos. */
.sjo-s__colegio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	min-height: clamp( 11rem, 15.28vw, 13.75rem );
	padding: clamp( 1.5rem, 2.22vw, 2rem );
	border-radius: 0 40px 40px 16px;
	background-color: var( --wp--preset--color--base, #fff );
}

/* La del propio colegio: en azul, más alta y levantada sobre las demás. Es la
   que dice «estás aquí», así que se separa del resto también en el sitio. */
.sjo-s__colegio.es-nuestro {
	min-height: clamp( 12rem, 16.67vw, 15rem );
	background-color: var( --wp--preset--color--azul, #004078 );
	color: rgba( 201, 220, 234, 0.9 );
}

.sjo-s__colegio-pic {
	display: block;
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__colegio-pic svg {
	display: block;
	width: 30px;
	height: 30px;
}

.sjo-s__colegio.es-nuestro .sjo-s__colegio-pic {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__colegio-rotulo {
	margin: auto 0 0;
	padding-top: 1.5rem;
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.455;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sjo-s__colegio.es-nuestro .sjo-s__colegio-rotulo {
	color: rgba( 201, 220, 234, 0.85 );
}

.sjo-s__colegio-nombre {
	margin: 0.5rem 0 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.0625rem, 1.32vw, 1.1875rem );
	font-weight: 600;
	line-height: 1.368;
	letter-spacing: -0.019em;
}

.sjo-s__colegio.es-nuestro .sjo-s__colegio-nombre {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__colegio-enlace,
.sjo-s__colegio-nota {
	margin: 1.125rem 0 0;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.538;
	letter-spacing: 0.0125rem;
	text-decoration: none;
}

.sjo-s__colegio-enlace {
	color: var( --wp--preset--color--rojo, #e00026 );
}

.sjo-s__colegio-enlace::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s ease;
}

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

.sjo-s__colegio-nota {
	color: rgba( 201, 220, 234, 0.9 );
	font-weight: 500;
}

@media ( max-width: 1023px ) {

	.sjo-s__colegios {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 781px ) {

	/* Los cuatro colegios pasan a carrusel, como el tríptico y las fichas:
	   apilados eran cuatro tarjetas iguales y una pantalla y media de scroll
	   para leer cuatro nombres. */
	.sjo-s__colegios {
		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__colegios::-webkit-scrollbar {
		display: none;
	}

	/* En fila, levantar la propia sí vuelve a significar algo, pero el alto lo
	   iguala el carrusel a la más alta: lo que la distingue es el azul. */
	.sjo-s__colegio,
	.sjo-s__colegio.es-nuestro {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		min-height: 0;
		border-radius: 0 24px 24px 16px;
		scroll-snap-align: start;
	}

	.sjo-s__colegios-cabecera {
		flex-direction: column;
	}

	/* Apilada la cabecera, el eje principal pasa a ser el vertical y aquel
	   « flex-basis » de 640 px —pensado como ancho— se convertiría en 640 px de
	   alto: un socavón entre la bajada y las tarjetas. */
	.sjo-s__colegios-cabecera .sjo-s__encabezado {
		flex: 0 0 auto;
	}

	/* La cifra se va al principio y encoge: a 390 px de ancho, 210 px de cifra
	   son media pantalla. */
	.sjo-s__cuenta-grande {
		order: -1;
		align-self: flex-start;
		text-align: start;
	}

	.sjo-s__cuenta-cifra {
		font-size: 5rem;
	}

	/* Tres en fila, como en la maqueta: « auto-fit » con un mínimo del 45 % las
	   dejaba en dos más una. Con cuatro sí se quieren de dos en dos, así que lo
	   decide la cuenta y no el ancho. */
	.sjo-s--cifras.es-cuenta-3 .sjo-s__cifras {
		grid-template-columns: repeat( 3, 1fr );
		gap: var( --wp--preset--spacing--40 ) 0.5625rem;
	}

	.sjo-s--cifras.es-cuenta-3 .sjo-s__cifra-num {
		font-size: 1.75rem;
	}

	.sjo-s--cifras.es-cuenta-3 .sjo-s__cifra-txt {
		font-size: 0.8125rem;
		line-height: 1.231;
	}
}

/* ---------------------------------------------------------------------------
 * Mapa de la red
 * ------------------------------------------------------------------------ */

.sjo-s__mapa-cabecera {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--40 );
}

.sjo-s__mapa-cabecera .sjo-s__encabezado {
	flex: 1 1 40rem;
	min-width: 0;
}

.sjo-s__hito {
	flex: 0 0 auto;
	max-width: 27.5rem;
}

/* La fecha de fundación, hueca como el resto de cifras grandes del sitio. */
.sjo-s__hito-cifra {
	margin: 0;
	color: transparent;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 3.5rem, 6.67vw, 6rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.042em;
	-webkit-text-stroke: 1.5px rgba( 201, 220, 234, 0.45 );
	user-select: none;
}

.sjo-s__hito-txt {
	margin: 0.75rem 0 0;
	color: rgba( 201, 220, 234, 0.8 );
	font-size: 0.9375rem;
	line-height: 1.733;
}

/* ---------------------------------------------------------------------------
 * El mapa
 *
 * La silueta va como imagen y los marcadores encima en porcentaje, así que todo
 * el conjunto escala junto sin recalcular nada. El alto sale de la proporción
 * del lienzo —1240 × 586—, y el SVG, que es más alto, se recorta por abajo: la
 * Antártida no aporta nada y el mapa queda mejor cortado.
 * ------------------------------------------------------------------------ */

.sjo-s__mapa {
	position: relative;

	/* El mapa es el contenedor de referencia: así los discos y su desplazamiento
	   se miden en « cqw » —porcentaje de su ancho— y todo escala junto. */
	container-type: inline-size;
	margin-top: clamp( 2rem, 3.33vw, 3rem );
	aspect-ratio: 1240 / 586;
	overflow: clip;
}

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

/* Lo que se centra en la coordenada es **el disco**, no la fila entera.

   Con « translate(-50%, -50%) » se centraba la caja completa —disco más
   rótulo—, así que cuanto más largo el nombre del continente, más se corría el
   disco de su sitio: Europa caía casi tres puntos a la izquierda. El
   desplazamiento es ahora medio disco, que en el lienzo de 1240 son 1,855 cqw. */
.sjo-s__marcador,
.sjo-s__marcador-local {
	position: absolute;
	top: var( --sjo-y );
	left: var( --sjo-x );
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	transform: translate( -1.855cqw, -50% );
	white-space: nowrap;
}

/* Con el rótulo a la izquierda el disco queda al final de la fila, así que hay
   que retroceder la fila entera y volver media medida de disco. */
.sjo-s__marcador.es-izquierda {
	transform: translate( calc( -100% + 1.855cqw ), -50% );
}

/* El punto propio es más pequeño que un disco de continente, así que retrocede
   su propia media medida y no la de aquellos. */
.sjo-s__marcador-local {
	transform: translate( calc( -100% + 0.645cqw ), -50% );
}

/* Oceanía saca el rótulo por la izquierda: pegada al borde derecho del mapa,
   hacia el otro lado no cabría. */
.sjo-s__marcador.es-izquierda,
.sjo-s__marcador-local {
	flex-direction: row-reverse;
}


/* El disco de la cifra. Su medida son 46 px sobre el lienzo de 1240, escritos
   en « cqw » —porcentaje del ancho del mapa— y no en « % », que se resolvería
   contra la fila del marcador y dejaba el disco en su mínimo de 26 px. */
.sjo-s__marcador-cifra {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3.71cqw;
	min-width: 22px;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.75rem, 1.25vw, 1.125rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.022em;
}

.sjo-s__marcador-rotulo {
	color: rgba( 255, 255, 255, 0.95 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.5625rem, 0.76vw, 0.6875rem );
	font-weight: 600;
	line-height: 1.636;
	letter-spacing: 0.164em;
	text-transform: uppercase;
}

/* El punto propio: un disco pequeño con su halo, para que se distinga de los
   marcadores de continente sin competir con ellos. */
.sjo-s__marcador-local::before {
	content: "";
	flex: 0 0 auto;
	width: 1.29cqw;
	min-width: 10px;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var( --wp--preset--color--rojo, #e00026 );
	box-shadow: 0 0 0 0.5rem rgba( 224, 0, 38, 0.25 );
}

.sjo-s__marcador-local .sjo-s__marcador-rotulo {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__mapa-pie {
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
	max-width: 43.75rem;
	color: rgba( 201, 220, 234, 0.7 );
	font-size: 0.875rem;
	line-height: 1.714;
}

/* ---------------------------------------------------------------------------
 * La lista de países
 *
 * Es lo mismo que cuenta el mapa, escrito. No es una repetición perezosa: es lo
 * que hace que la sección se pueda leer sin ver el dibujo.
 * ------------------------------------------------------------------------ */

.sjo-s__continentes {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: clamp( 1.5rem, 2.22vw, 2rem ) clamp( 0.75rem, 0.97vw, 0.75rem );
	margin: clamp( 2rem, 4.44vw, 4rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__continente-tit {
	margin: 0;
	color: rgba( 201, 220, 234, 0.65 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sjo-s__paises {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 0.8125rem;
	line-height: 1.846;
}

.sjo-s__mapa-enlace {
	display: inline-block;
	margin-top: clamp( 2rem, 3.33vw, 3rem );
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.571;
	letter-spacing: 0.0125rem;
	text-decoration: none;
}

.sjo-s__mapa-enlace::after {
	content: "\2197";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s ease;
}

.sjo-s__mapa-enlace:hover::after,
.sjo-s__mapa-enlace:focus-visible::after {
	transform: translate( 0.15rem, -0.15rem );
}

@media ( max-width: 1023px ) {

	.sjo-s__continentes {
		grid-template-columns: repeat( 4, 1fr );
	}
}

@media ( max-width: 781px ) {

	/* El mapa se queda. Estuvo apagado en móvil porque los siete rótulos se
	   pisaban unos a otros, pero apagarlo dejaba la sección sin lo único que
	   enseña de verdad que la red es mundial. Lo que se va son los rótulos: los
	   siete continentes están escritos justo debajo, con sus países, así que el
	   disco con la cifra basta y no se pierde nada.

	   Y se sale del canalón hasta el borde de la pantalla. Dentro se quedaba en
	   326 px de ancho y 181 de alto, que es una franja donde no se distingue la
	   silueta; a lo ancho entero gana 64 px y la lectura cambia. */
	.sjo-s__mapa {
		width: 100vw;
		margin-inline: calc( 50% - 50vw );
	}

	.sjo-s__marcador-rotulo {
		display: none;
	}

	/* Sin rótulo al lado, el disco deja de ir en una fila y se centra él solo
	   sobre su punto. */
	.sjo-s__marcador,
	.sjo-s__marcador.es-izquierda {
		transform: translate( -50%, -50% );
	}

	/* El punto propio conserva su rótulo: es el único que dice algo que no está
	   en la lista de abajo.

	   Y lo saca por la derecha, no por la izquierda. Trujillo cae al 28 % del
	   ancho del mapa, y con el rótulo hacia fuera la palabra se salía por el
	   borde: se leía « RUJILLO, PERÚ ». */
	.sjo-s__marcador-local {
		flex-direction: row;
		transform: translate( -0.645cqw, -50% );
	}

	.sjo-s__marcador-local .sjo-s__marcador-rotulo {
		display: block;
		font-size: 0.625rem;
		letter-spacing: 0.1em;
	}

	.sjo-s__mapa-pie {
		margin-top: clamp( 1.25rem, 5.13vw, 1.5rem );
	}

	.sjo-s__continentes {
		grid-template-columns: repeat( 2, 1fr );
	}

	.sjo-s__mapa-cabecera {
		flex-direction: column;
	}

	.sjo-s__mapa-cabecera .sjo-s__encabezado {
		flex: 0 0 auto;
	}

	.sjo-s__hito {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Texto con ficha de datos
 * ------------------------------------------------------------------------ */

.sjo-s--ficha .sjo-s__reja {
	display: grid;

	/* 560 de texto y 500 de ficha sobre el interior de 1240, con 140 de calle. */
	grid-template-columns: 56fr 50fr;
	gap: clamp( 2rem, 9.72vw, 8.75rem );
	align-items: start;
	max-width: 83.75rem;
	margin-inline: auto;
}

.sjo-s--ficha .sjo-s__encabezado {
	max-width: none;
}

/* La ficha: azul, con la esquina superior izquierda a escuadra, la de abajo
   apenas rota y las dos de la derecha muy abiertas. */
.sjo-s__datos {
	box-sizing: border-box;
	padding: clamp( 1.75rem, 2.78vw, 2.5rem );
	border-radius: 0 48px 48px 20px;
	background-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__datos-cabeza {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 clamp( 1.5rem, 2.78vw, 2.5rem );
}

.sjo-s__datos-pic {
	display: block;
	flex: 0 0 auto;
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__datos-pic svg {
	display: block;
	width: 30px;
	height: 30px;
}

.sjo-s__datos-rotulo {
	color: rgba( 201, 220, 234, 0.8 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.455;
	letter-spacing: 0.218em;
	text-transform: uppercase;
}

.sjo-s__datos-lista {
	margin: 0;
}

.sjo-s__datos-etiqueta {
	color: rgba( 201, 220, 234, 0.6 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sjo-s__datos-valor {
	margin: 0.25rem 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.0125rem;
}

.sjo-s__datos-valor + .sjo-s__datos-etiqueta {
	margin-top: 1rem;
}

@media ( max-width: 781px ) {

	.sjo-s--ficha .sjo-s__reja {
		grid-template-columns: 1fr;
		gap: var( --wp--preset--spacing--50 );
	}
}

/* ---------------------------------------------------------------------------
 * Organigrama
 *
 * El árbol es una sucesión de niveles centrados. Cada nivel se une al de arriba
 * con una raya vertical dibujada como pseudoelemento; no hay ni una caja
 * colocada en coordenadas, de modo que el organigrama se recompone solo cuando
 * cambia el número de órganos o el ancho de la pantalla.
 * ------------------------------------------------------------------------ */

.sjo-s--organigrama {
	--sjo-raya: rgba( 0, 64, 120, 0.28 );
	--sjo-salto: clamp( 1.25rem, 2.22vw, 2rem );

	/* Lo que miden las cajas de los costados y la calle que las separa del
	   órgano principal. Están en variables porque la raya que los une se calcula
	   con las dos. */
	--sjo-lado-ancho: clamp( 9rem, 16.67vw, 15rem );
	--sjo-lado-calle: clamp( 1rem, 3.47vw, 3.125rem );
}

.sjo-s__organi-rotulo {
	margin: 0 0 clamp( 1.5rem, 3.06vw, 2.75rem );
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.455;
	letter-spacing: 0.218em;
	text-transform: uppercase;
}

.sjo-s__organi {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * La caja
 *
 * Una sola forma con tres pieles: de contorno para lo que está por encima del
 * colegio, maciza para lo que manda dentro y tenue para lo que acompaña.
 * ------------------------------------------------------------------------ */

.sjo-s__nodo {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0.75rem 1.25rem;
	border-radius: 0 26px 26px 10px;
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
}

.sjo-s__nodo.es-contorno {
	border: 1px solid var( --wp--preset--color--azul, #004078 );
	background-color: var( --sjo-s-fondo, #fff );
}

.sjo-s__nodo.es-tenue {
	background-color: rgba( 0, 64, 120, 0.05 );
}

.sjo-s__nodo.es-principal {
	border-radius: 0 28px 28px 10px;
	background-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--base, #fff );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Las cajas de los lados y de las direcciones son un punto menores. */
.sjo-s__nodo.es-menudo {
	padding: 0.625rem 1rem;
	border-radius: 0 21px 21px 10px;
	font-size: 0.75rem;
	font-weight: 500;
}

.sjo-s__nodo.es-principal.es-menudo {
	border-radius: 0 28px 28px 10px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
 * Las rayas
 *
 * Cada nivel se cuelga del de arriba con una raya vertical centrada. Se dibuja
 * como margen superior más pseudoelemento, así que crece y encoge con el
 * « --sjo-salto » y nunca hay que declarar dónde empieza.
 * ------------------------------------------------------------------------ */

.sjo-s__organi-cadena {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --sjo-salto );
	width: 100%;
	max-width: 25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjo-s__organi-cadena .sjo-s__nodo {
	width: 100%;
}

.sjo-s__organi-cadena li + li {
	position: relative;
}

.sjo-s__organi-cadena li + li::before,
.sjo-s__organi-cumbre::before,
.sjo-s__organi-asesoria::before,
.sjo-s__organi-ramas::before,
.sjo-s__nodo.es-base::before {
	content: "";
	position: absolute;
	top: calc( -1 * var( --sjo-salto ) );
	left: 50%;
	width: 2px;
	height: var( --sjo-salto );
	background-color: var( --sjo-raya );
	transform: translateX( -50% );
}

/* ---------------------------------------------------------------------------
 * La cumbre: el órgano principal con sus dos ramas de costado
 * ------------------------------------------------------------------------ */

.sjo-s__organi-cumbre {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var( --sjo-lado-calle );
	row-gap: var( --sjo-salto );
	width: 100%;
	margin-top: var( --sjo-salto );
}

/* La pista del carrusel móvil no existe como caja en escritorio: con
   « contents » sus tres hijos pasan a ser celdas de la rejilla de arriba, que
   es exactamente donde estaban antes de que hubiera pista. */
.sjo-s__organi-grupos,
.sjo-s__organi-ramas-caja {
	display: contents;
}

/* Cada pieza en su celda: sin decirlo, la asesoría se colocaría sola en la
   primera columna de la segunda fila. Y cada una alineada hacia el centro del
   dibujo, que es de donde salen las rayas. */
.sjo-s__organi-lado {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sjo-s__organi-lado.es-izquierda {
	grid-area: 1 / 1;
	align-items: flex-start;
}

.sjo-s__organi-cumbre .sjo-s__nodo.es-principal {
	grid-area: 1 / 2;
	width: clamp( 15rem, 26.39vw, 23.75rem );
	padding-block: 1.25rem;
}

.sjo-s__organi-lado.es-derecha {
	grid-area: 1 / 3;
	align-items: flex-end;
}

/* El rótulo de las direcciones es cosa de móvil. */
.sjo-s__organi-etiqueta.es-ramas {
	display: none;
}

/* La raya que ata cada rama al órgano principal.

   Va del costado de las cajas al centro, y ese trecho no es una medida fija:
   es lo que sobra de la columna una vez puestas las cajas, más la calle de la
   rejilla. De ahí el « calc »; con un ancho fijo la raya se quedaba corta o se
   metía por debajo de las cajas según el ancho de la pantalla. */
.sjo-s__organi-lado:not( :empty )::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc( 100% - var( --sjo-lado-ancho ) + var( --sjo-lado-calle ) );
	height: 2px;
	background-color: var( --sjo-raya );
}

.sjo-s__organi-lado.es-izquierda::after {
	inset-inline-start: var( --sjo-lado-ancho );
}

.sjo-s__organi-lado.es-derecha::after {
	inset-inline-end: var( --sjo-lado-ancho );
}

.sjo-s__organi-lado-lista {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: var( --sjo-lado-ancho );
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjo-s__organi-lado.es-izquierda .sjo-s__organi-lado-lista {
	margin-inline-end: auto;
}

.sjo-s__organi-lado.es-derecha .sjo-s__organi-lado-lista {
	margin-inline-start: auto;
}

/* El rótulo de la rama derecha se alinea con el borde izquierdo de sus cajas,
   no con el derecho: es un antetítulo, y en la maqueta arranca a plomo con la
   primera. Con « align-items: flex-end » se iba al otro lado. */
.sjo-s__organi-lado.es-derecha .sjo-s__organi-etiqueta {
	width: var( --sjo-lado-ancho );
	text-align: start;
}

.sjo-s__organi-etiqueta {
	margin: 0;
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * La fila de asesoría
 * ------------------------------------------------------------------------ */

/* Ocupa la fila entera bajo la cumbre: sin decirlo se colocaría sola en la
   primera columna de la segunda fila. */
.sjo-s__organi-asesoria {
	position: relative;
	width: 100%;
	grid-area: 2 / 1 / 3 / -1;
}

.sjo-s__organi-fila {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 0.75rem, 1.39vw, 1.25rem );
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__organi-fila .sjo-s__nodo {
	padding-block: 1rem;
	font-size: 0.75rem;
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Las direcciones
 *
 * De la raya que baja del centro sale un travesaño que reparte a las cuatro, y
 * de él cuelga cada una. El travesaño va de centro a centro de la primera y la
 * última: si llegara a los bordes, sobresaldría por fuera de las cajas.
 * ------------------------------------------------------------------------ */

.sjo-s__organi-ramas {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 0.75rem, 1.39vw, 1.25rem );
	width: 100%;
	margin: calc( var( --sjo-salto ) * 2 ) 0 0;
	padding: 0;
	list-style: none;
}

/* El travesaño. Los « calc » son lo que hace que empiece y acabe en el centro
   de las cajas de los extremos y no en sus bordes: media caja por cada lado. */
.sjo-s__organi-ramas::after {
	content: "";
	position: absolute;
	top: calc( -1 * var( --sjo-salto ) );
	left: calc( 12.5% - 0.375 * clamp( 0.75rem, 1.39vw, 1.25rem ) );
	right: calc( 12.5% - 0.375 * clamp( 0.75rem, 1.39vw, 1.25rem ) );
	height: 2px;
	background-color: var( --sjo-raya );
}

.sjo-s__organi-rama {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* La bajada de cada dirección hasta el travesaño. */
.sjo-s__organi-rama::before {
	content: "";
	position: absolute;
	top: calc( -1 * var( --sjo-salto ) );
	left: 50%;
	width: 2px;
	height: var( --sjo-salto );
	background-color: var( --sjo-raya );
	transform: translateX( -50% );
}

.sjo-s__organi-rama .sjo-s__organi-etiqueta {
	margin-top: clamp( 1rem, 1.67vw, 1.5rem );
}

.sjo-s__organi-items {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	color: var( --sjo-s-gris, #5a6472 );
	font-size: 0.875rem;
	line-height: 2;
}

/* ---------------------------------------------------------------------------
 * El pie del árbol
 * ------------------------------------------------------------------------ */

.sjo-s__nodo.es-base {
	position: relative;
	width: clamp( 14rem, 22.22vw, 20rem );
	margin-top: calc( var( --sjo-salto ) * 2 );
	padding-block: 1rem;
	font-size: 0.9375rem;
}

.sjo-s__nodo.es-base::before {
	top: calc( -1 * var( --sjo-salto ) * 2 );
	height: calc( var( --sjo-salto ) * 2 );
}

/* Sobre el azul, las rayas y las cajas se invierten. */
.sjo-s--organigrama.es-fondo-azul {
	--sjo-raya: rgba( 201, 220, 234, 0.35 );
}

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

.sjo-s--organigrama.es-fondo-azul .sjo-s__nodo.es-contorno {
	border-color: rgba( 201, 220, 234, 0.45 );
}

.sjo-s--organigrama.es-fondo-azul .sjo-s__nodo.es-tenue {
	background-color: rgba( 255, 255, 255, 0.08 );
}

.sjo-s--organigrama.es-fondo-azul .sjo-s__nodo.es-principal {
	background-color: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--azul, #004078 );
}

@media ( max-width: 1023px ) {

	.sjo-s__organi-fila,
	.sjo-s__organi-ramas {
		grid-template-columns: repeat( 2, 1fr );
	}

	/* Con dos columnas el travesaño ya no reparte a cuatro: se apaga y cada
	   dirección se sostiene con su propia bajada. */
	.sjo-s__organi-ramas::after {
		left: calc( 25% - 0.25 * clamp( 0.75rem, 1.39vw, 1.25rem ) );
		right: calc( 25% - 0.25 * clamp( 0.75rem, 1.39vw, 1.25rem ) );
	}
}

@media ( max-width: 781px ) {

	/* En móvil el árbol se parte en dos carruseles, que es lo que hace la
	   maqueta: uno con los tres grupos que cuelgan de la Dirección General
	   —asistencia, participación y asesoría— y otro con las cuatro direcciones.
	   Entre medias queda el tronco, que sigue siendo tronco: Compañía, Red
	   Educativa y Dirección General arriba, Estudiantes al final.

	   Apilarlo todo, como estaba, daba 2200 px de sección y encima se leía al
	   revés: la Asistencia salía encima de la Dirección General, como si la
	   Dirección colgara de ella. */
	.sjo-s__organi-cumbre {
		display: block;
	}

	/* La pista vuelve a ser una caja: en escritorio es « contents » y sus hijos
	   son celdas de la rejilla. */
	.sjo-s__organi-grupos {
		display: flex;
		gap: clamp( 1rem, 1.39vw, 1.25rem );
		margin-top: calc( var( --sjo-salto ) * 1.5 );
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.sjo-s__organi-grupos::-webkit-scrollbar {
		display: none;
	}

	/* Cada grupo es una tarjeta. */
	.sjo-s__organi-lado,
	.sjo-s__organi-lado.es-izquierda,
	.sjo-s__organi-lado.es-derecha,
	.sjo-s__organi-asesoria {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		box-sizing: border-box;
		align-items: stretch;
		width: auto;
		margin: 0;
		padding: 1.25rem;
		border: 1px solid rgba( 0, 64, 120, 0.14 );
		border-radius: 0 20px 20px 20px;
		scroll-snap-align: start;
	}

	/* Las rayas de escritorio no pintan nada dentro de una tarjeta. */
	.sjo-s__organi-lado:not( :empty )::after,
	.sjo-s__organi-lado.es-izquierda:not( :empty )::after,
	.sjo-s__organi-lado.es-derecha:not( :empty )::after,
	.sjo-s__organi-asesoria::before {
		content: none;
	}

	.sjo-s__organi-lado-lista,
	.sjo-s__organi-fila {
		display: block;
		width: auto;
		max-width: none;
		margin: 0.75rem 0 0;
	}

	/* Dentro de la tarjeta, los nombres dejan de ser cajas y vuelven a ser lo
	   que son: una lista. Tres cajas metidas en otra caja de 268 px no se leían
	   como jerarquía, se leían como ruido. */
	.sjo-s__organi-lado .sjo-s__nodo,
	.sjo-s__organi-fila .sjo-s__nodo {
		width: auto;
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var( --wp--preset--color--azul, #004078 );
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.5;
		text-align: start;
	}

	.sjo-s__organi-lado .sjo-s__nodo + .sjo-s__nodo,
	.sjo-s__organi-fila .sjo-s__nodo + .sjo-s__nodo {
		margin-top: 0.5rem;
	}

	.sjo-s__organi-etiqueta {
		text-align: start;
	}

	/* ---------------------------------------------------------------------
	 * Las cuatro direcciones, el segundo carrusel
	 * ------------------------------------------------------------------ */

	/* El « width » no sobra: « .sjo-s__organi » centra a sus hijos, así que sin
	   medida propia esta caja se ajusta al contenido, y con las tarjetas pidiendo
	   el 100 % de una anchura que aún no existe el cálculo se dispara —salía una
	   pista de 33 millones de píxeles y las cuatro direcciones fuera de la
	   pantalla. */
	.sjo-s__organi-ramas-caja {
		display: block;
		width: 100%;
		margin-top: calc( var( --sjo-salto ) * 1.5 );
	}

	/* El tronco a todo el ancho, como en la maqueta: 326 px sobre 390. */
	.sjo-s__organi-cumbre .sjo-s__nodo.es-principal {
		width: 100%;
	}

	/* Aquí sí hace falta nombrar lo que se está recorriendo: en escritorio las
	   cuatro se ven a la vez colgando del travesaño y se explican solas. */
	.sjo-s__organi-etiqueta.es-ramas {
		display: block;
		color: var( --sjo-s-gris, #5a6472 );
	}

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

	.sjo-s__organi-ramas::-webkit-scrollbar {
		display: none;
	}

	/* El travesaño y las bajadas se apagan: en fila no reparten nada. */
	.sjo-s__organi-ramas::after,
	.sjo-s__organi-rama::before {
		content: none;
	}

	.sjo-s__organi-rama {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		box-sizing: border-box;
		padding: 1.25rem;
		background-color: var( --wp--preset--color--crema, #f4f1ec );
		border-radius: 0 20px 20px 20px;
		scroll-snap-align: start;
	}

	/* Dentro de la tarjeta el nombre de la dirección es un titular, no una caja
	   azul: la caja ya es la tarjeta. */
	.sjo-s__organi-rama .sjo-s__nodo.es-principal {
		width: auto;
		min-height: 0;
		padding: 0;
		background: none;
		color: var( --wp--preset--color--azul, #004078 );
		font-size: 1.125rem;
		line-height: 1.333;

		/* El nodo es una rejilla con todo centrado, que es lo que quiere una
		   caja del árbol; aquí ya no es una caja, es el titular de la tarjeta, y
		   « text-align » solo no basta para moverlo. */
		justify-items: start;
		text-align: start;
	}

	.sjo-s__organi-rama .sjo-s__organi-etiqueta {
		margin-top: 0.625rem;
	}

	.sjo-s__organi-items {
		margin-top: 0.625rem;
		font-size: 0.8125rem;
		line-height: 1.846;
		text-align: start;
	}

	/* ---------------------------------------------------------------------
	 * El tronco
	 * ------------------------------------------------------------------ */

	.sjo-s__organi-cadena {
		max-width: none;
	}

	.sjo-s__nodo.es-base {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Banda con frase sobre fotografía
 * ------------------------------------------------------------------------ */

.sjo-s--banda {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp( 15rem, 23.61vw, 21.25rem );
	background-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--base, #fff );
	overflow: hidden;
}

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

.sjo-s__banda-medio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* El velo, para que la frase se lea sobre cualquier fotografía. */
.sjo-s__banda-medio::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba( 0, 64, 120, 0.62 );
}

.sjo-s--banda .sjo-s__interior {
	position: relative;
	z-index: 1;
}

.sjo-s__banda-frase {
	margin: clamp( 1.5rem, 2.22vw, 2rem ) 0 0;
	max-width: 53.75rem;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.375rem, 2.22vw, 2rem );
	font-weight: 800;
	line-height: 1.313;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Retratos de un equipo
 * ------------------------------------------------------------------------ */

.sjo-s__retratos-cabecera {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--40 );
}

.sjo-s__retratos-cabecera .sjo-s__encabezado {
	flex: 1 1 40rem;
	min-width: 0;
}

.sjo-s__retratos-enlace {
	flex: 0 0 auto;
	margin-top: clamp( 1rem, 4.44vw, 4rem );
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.571;
	letter-spacing: 0.0125rem;
	text-decoration: none;
}

.sjo-s__retratos-enlace::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform 0.2s ease;
}

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

.sjo-s__retratos {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: clamp( 1rem, 1.39vw, 1.25rem );
	margin: clamp( 2.5rem, 5.56vw, 5rem ) 0 0;
	padding: 0;
	list-style: none;
}

/* La caja del retrato. Mientras no haya fotografía enseña el pictograma
   centrado: no es un hueco, es un sitio reservado, y así se puede publicar la
   sección antes de que lleguen las fotos. */
.sjo-s__retrato-caja {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 232 / 300;
	border-radius: 0 24px 24px 24px;
	background-color: rgba( 0, 64, 120, 0.07 );
	overflow: hidden;
}

.sjo-s__retrato.es-destacada .sjo-s__retrato-caja {
	background-color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__retrato-pic {
	display: block;
	color: rgba( 0, 64, 120, 0.25 );
}

.sjo-s__retrato-pic svg {
	display: block;
	width: 44px;
	height: 44px;
}

.sjo-s__retrato.es-destacada .sjo-s__retrato-pic {
	color: rgba( 255, 255, 255, 0.4 );
}

/* Con fotografía, esta tapa el pictograma sin que el marcado cambie. */
.sjo-s__retrato-foto,
.sjo-s__retrato-foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.sjo-s__retrato-cargo {
	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.625rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sjo-s__retrato-nombre {
	margin: 0.25rem 0 0;
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	font-weight: 600;
	line-height: 1.389;
	letter-spacing: -0.0187rem;
}

/* Quien dirige lleva el nombre en azul: es el único realce que le queda una vez
   que la caja de arriba ya lo distingue. */
.sjo-s__retrato.es-destacada .sjo-s__retrato-nombre {
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__retratos-nota {
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
	max-width: 55rem;
	color: rgba( 90, 100, 114, 0.8 );
	font-size: 0.8125rem;
	line-height: 1.692;
}

@media ( max-width: 1023px ) {

	.sjo-s__retratos {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 781px ) {

	/* Los cinco retratos pasan a carrusel, como en la maqueta móvil: de dos en
	   dos eran tres filas y media y 1364 px de sección para cinco nombres. */
	.sjo-s__retratos {
		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__retratos::-webkit-scrollbar {
		display: none;
	}

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

	/* El alto de la maqueta —280 px—, pero contra el ancho de aquí.

	   En la maqueta la tarjeta mide 232 de ancho porque asoma la siguiente; como
	   aquí no asoma ninguna, ocupa los 326 enteros, y guardar la proporción
	   232 × 280 le daba 394 px de alto: casi una pantalla de azul liso. Lo que
	   hay que conservar es el alto, no la proporción. */
	.sjo-s__retrato-caja {
		aspect-ratio: 326 / 280;
	}

	.sjo-s__retratos-cabecera {
		flex-direction: column;
	}

	.sjo-s__retratos-cabecera .sjo-s__encabezado {
		flex: 0 0 auto;
	}

	.sjo-s__retratos-enlace {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Equipos con pestañas
 * ------------------------------------------------------------------------ */

.sjo-s__pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: clamp( 2rem, 4.44vw, 4rem );
}

.sjo-s__pestana {
	padding: 0.75rem 1.375rem;
	border: 1px solid #e3ebf2;
	border-radius: 999px;
	background-color: var( --wp--preset--color--base, #fff );
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.429;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sjo-s__pestana:hover {
	border-color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__pestana.es-activa {
	border-color: var( --wp--preset--color--azul, #004078 );
	background-color: var( --wp--preset--color--azul, #004078 );
	color: var( --wp--preset--color--base, #fff );
	font-weight: 600;
}

.sjo-s__panel {
	margin-top: clamp( 1.5rem, 2.78vw, 2.5rem );
}

/* Sin JavaScript se ven los siete paneles seguidos; con él, solo el activo. La
   separación entre paneles solo hace falta en el primer caso. */
.sjo-s__panel + .sjo-s__panel {
	margin-top: clamp( 1rem, 1.67vw, 1.5rem );
}

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

.sjo-s__persona {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: 1rem;
	min-height: 7rem;
	padding: 1.25rem;
	border-radius: 0 16px 16px 16px;
	background-color: var( --wp--preset--color--base, #fff );
}

/* El avatar es un círculo vacío a propósito: el directorio con fotografías se
   publica al inicio de cada año escolar, y hasta entonces esto marca el sitio
   sin fingir que hay un retrato. */
.sjo-s__persona-avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba( 0, 64, 120, 0.08 );
}

.sjo-s__persona-datos {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.sjo-s__persona-rol {
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.467;
	letter-spacing: -0.0125rem;
}

.sjo-s__persona-area {
	color: var( --sjo-s-gris, #5a6472 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.455;
	letter-spacing: 0.145em;
	text-transform: uppercase;
}

.sjo-s__equipos-nota {
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
	color: var( --sjo-s-gris, #5a6472 );
	font-size: 0.8125rem;
	line-height: 1.538;
}

@media ( max-width: 1023px ) {

	.sjo-s__personas {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 781px ) {

	/* Las pestañas se recorren de lado: con siete a 390 px, apiladas ocuparían
	   media pantalla antes de enseñar a nadie. */
	.sjo-s__pestanas {
		flex-wrap: nowrap;
		margin-inline: calc( var( --sjo-gutter ) * -1 );
		padding-inline: var( --sjo-gutter );
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
	}

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

	.sjo-s__pestana {
		flex: 0 0 auto;
	}

	.sjo-s__personas {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Áreas numeradas con collage
 * ------------------------------------------------------------------------ */

.sjo-s__areas-cabecera {
	display: grid;

	/* 620 de texto y 540 de collage sobre el interior de 1240. */
	grid-template-columns: 62fr 54fr;
	gap: clamp( 2rem, 5.56vw, 5rem );
	align-items: start;
}

.sjo-s--areas .sjo-s__encabezado {
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * El collage
 *
 * Tres fotografías solapadas. El sitio de cada una va aquí y no en un campo:
 * solapar imágenes es composición, no contenido, y desde un formulario nadie
 * acierta a ojo. Las medidas son porcentajes de la caja del collage —540 × 448
 * sobre el lienzo de 1440—, así que el conjunto escala junto.
 *
 * El filete que las separa es un borde del color del fondo de la sección, no un
 * hueco: por eso se ve blanco aunque estén una encima de otra.
 * ------------------------------------------------------------------------ */

.sjo-s__collage {
	position: relative;
	aspect-ratio: 540 / 448;
}

.sjo-s__collage-foto {
	position: absolute;
	box-sizing: border-box;
	border: 8px solid var( --sjo-s-fondo, #f4f1ec );
	border-radius: 0 24px 24px 24px;
	overflow: hidden;
}

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

.sjo-s__collage-foto:nth-child( 1 ) {
	left: 0;
	top: 0;
	width: 55.56%;
	height: 48.58%;
}

.sjo-s__collage-foto:nth-child( 2 ) {
	left: 48.15%;
	top: 22.34%;
	width: 51.85%;
	height: 44.11%;
}

.sjo-s__collage-foto:nth-child( 3 ) {
	left: 18.52%;
	top: 53.62%;
	width: 55.56%;
	height: 46.38%;
}

/* ---------------------------------------------------------------------------
 * La lista
 * ------------------------------------------------------------------------ */

.sjo-s__areas {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );

	/* 88 px entre filas: en la maqueta cada área arranca 230 px por debajo de
	   la anterior, y el numeral hueco pide ese aire para no apelmazarse. */
	gap: clamp( 2.5rem, 6.11vw, 5.5rem ) clamp( 2rem, 4.17vw, 3.75rem );
	margin: clamp( 3rem, 6.94vw, 6.25rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__area {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp( 1rem, 1.25vw, 1.125rem );
	align-items: start;
}

/* El numeral hueco, igual que el del Ideario pero a la medida de una lista. */
.sjo-s__area-num {
	color: transparent;
	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.042em;
	-webkit-text-stroke: 1.5px rgba( 0, 64, 120, 0.25 );
	user-select: none;
}

.sjo-s__area-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: 600;
	line-height: 1.273;
	letter-spacing: -0.025rem;
}

.sjo-s__area-txt {
	margin: 0.625rem 0 0;
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	line-height: 1.733;
}

.sjo-s.es-fondo-azul .sjo-s__area-num {
	-webkit-text-stroke-color: rgba( 201, 220, 234, 0.35 );
}

@media ( max-width: 1023px ) {

	.sjo-s__areas-cabecera {
		grid-template-columns: 1fr;
	}

	/* Sin columna al lado, el collage no necesita media pantalla: se queda con
	   el ancho de una fotografía y algo más. */
	.sjo-s__collage {
		max-width: 33.75rem;
	}
}

@media ( max-width: 781px ) {

	.sjo-s__areas {
		grid-template-columns: 1fr;
	}

	/* El numeral se pone encima del nombre: a 390 px, restarle 90 al texto para
	   dejarle sitio al lado lo parte en columnas de tres palabras. */
	.sjo-s__area {
		grid-template-columns: 1fr;
		row-gap: 0.25rem;
	}

	.sjo-s__area-num {
		font-size: 3rem;
	}
}

/* ---------------------------------------------------------------------------
 * Lo que estrena APAFA
 *
 * Ninguna de estas cinco cosas es un tipo de sección nuevo: son cuatro tipos que
 * ya existían aprendiendo a hacer algo más. Salía más barato que dar de alta
 * cuatro tipos casi iguales, y lo que se añade aquí queda disponible para las
 * pantallas que faltan.
 * ------------------------------------------------------------------------ */

/* El botón bajo el texto de «texto con imagen». */
.sjo-s__acciones {
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
}

/* ---------------------------------------------------------------------------
 * El marco rojo corrido
 *
 * Un filete que asoma por debajo y por el lado de fuera, como una segunda copia
 * de la fotografía desplazada 48 px en diagonal. En la maqueta acompaña siempre
 * a una fotografía en diagonal, y del mismo lado hacia donde cae el sesgo, así
 * que el sesgo entra con el marco aunque la fotografía vaya a la derecha —que
 * es donde el tema no lo pone por defecto—.
 * ------------------------------------------------------------------------ */

.sjo-s--texto-imagen.es-con-marco .sjo-s__medio {
	transform: skewY( -6.1deg );

	/* El recorte baja a la fotografía: si se quedara aquí, se llevaría por
	   delante el filete, que justamente tiene que salirse. */
	overflow: visible;
}

.sjo-s--texto-imagen.es-con-marco .sjo-s__medio .sjo-foto {
	border-radius: 20px;
	overflow: hidden;
}

/* Enderezada por dentro, con alto de sobra para que las esquinas del sesgo no
   dejen triángulos en blanco. Igual que la fotografía diagonal de la izquierda. */
.sjo-s--texto-imagen.es-con-marco .sjo-s__medio img {
	top: -10%;
	height: 120%;
	transform: skewY( 6.1deg );
	border-radius: 0;
}

/* El filete va detrás: « .sjo-s__medio » lleva « transform », así que crea su
   propio contexto de apilado y el « z-index » negativo lo deja bajo la
   fotografía sin colarse debajo del fondo de la sección. */
.sjo-s--texto-imagen.es-con-marco .sjo-s__medio::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 3rem -3rem -3rem 3rem;
	border: 2px solid var( --wp--preset--color--rojo, #e00026 );
	border-radius: 20px;
	pointer-events: none;
}

/* Con la fotografía a la derecha, el marco se corre hacia fuera por el otro
   lado: hacia la izquierda. */
.sjo-s--texto-imagen.es-con-marco.es-imagen-derecha .sjo-s__medio::before {
	inset: 3rem 3rem -3rem -3rem;
}

/* ---------------------------------------------------------------------------
 * La banda, cuando lleva contenido y no solo una frase
 *
 * Con antetítulo y párrafo deja de ser un respiro entre dos secciones y pasa a
 * ser una sección con todas las de la ley: pide más alto y un titular mayor. Lo
 * decide el antetítulo, que es lo que distingue a las dos en la maqueta.
 * ------------------------------------------------------------------------ */

.sjo-s__banda-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--banda:has( .sjo-s__banda-rotulo ) {
	min-height: clamp( 20rem, 29.17vw, 26.25rem );
}

.sjo-s--banda:has( .sjo-s__banda-rotulo ) .sjo-s__banda-frase {
	max-width: 56.25rem;
	font-size: clamp( 2rem, 3.33vw, 3rem );
	line-height: 1.167;
	letter-spacing: -0.033em;
}

.sjo-s__banda-txt {
	margin: clamp( 1rem, 1.67vw, 1.5rem ) 0 0;
	max-width: 47.5rem;
	color: rgba( 201, 220, 234, 0.9 );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: 1.75;
}

/* ---------------------------------------------------------------------------
 * Fichas: nota al pie, tres columnas y fichas sin numeral ni pictograma
 * ------------------------------------------------------------------------ */

.sjo-s__fichas-nota {
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
	max-width: 53.75rem;
	color: rgba( 201, 220, 234, 0.75 );
	font-size: 0.875rem;
	line-height: 1.714;
}

.sjo-s--fichas.es-fondo-blanco .sjo-s__fichas-nota,
.sjo-s--fichas.es-fondo-crema .sjo-s__fichas-nota {
	color: rgba( 90, 100, 114, 0.8 );
}

/* Con tres por fila la ficha es más estrecha y no necesita tanto alto: 150 px
   sobre el lienzo de 1440, frente a los 168 de la rejilla de dos. */
.sjo-s--fichas.es-columnas-3 .sjo-s__fichas {
	grid-template-columns: repeat( 3, 1fr );
}

.sjo-s--fichas.es-columnas-3 .sjo-s__ficha {
	min-height: clamp( 8rem, 10.42vw, 9.375rem );
}

/* Sin pictograma la ficha pierde su primera columna, y sin numeral también la
   última: el titular ocupa la fila entera. Las dos cosas se miran por separado
   porque se apagan por separado. */
.sjo-s__ficha:not( :has( .sjo-s__ficha-pic ) ) {
	grid-template-columns: 1fr auto;
}

/* Y con titular y texto —y nada más— la ficha se lee de arriba abajo, no
   centrada: con « center » el bloque quedaba flotando en mitad de la caja. */
.sjo-s__ficha:not( :has( .sjo-s__ficha-pic ) ):not( :has( .sjo-s__ficha-num ) ) {
	grid-template-columns: 1fr;
	align-content: start;
	align-items: start;
}

/* ---------------------------------------------------------------------------
 * El otro numeral de «áreas»: rojo, pequeño y encima del nombre
 *
 * La lista deja de ser una enumeración solemne de seis áreas y pasa a ser tres
 * pasos en fila. Mismo contenido, otro peso.
 * ------------------------------------------------------------------------ */

.sjo-s--areas.es-numeral-rojo .sjo-s__areas {
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 2.5rem, 4.44vw, 4rem ) clamp( 1.5rem, 2.78vw, 2.5rem );
	margin-top: clamp( 2.5rem, 5.56vw, 5rem );
}

.sjo-s--areas.es-numeral-rojo .sjo-s__area {
	grid-template-columns: 1fr;
	row-gap: 0.875rem;
}

.sjo-s--areas.es-numeral-rojo .sjo-s__area-num {
	color: var( --wp--preset--color--rojo, #e00026 );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	line-height: 1.273;
	letter-spacing: normal;
	-webkit-text-stroke: 0;
}

/* Sin collage al lado, el encabezado no tiene por qué encogerse a 620 px: la
   rejilla de dos columnas dejaba media pantalla en blanco. */
.sjo-s__areas-cabecera:not( :has( .sjo-s__collage ) ) {
	grid-template-columns: 1fr;
}

@media ( max-width: 1023px ) {

	.sjo-s--areas.es-numeral-rojo .sjo-s__areas,
	.sjo-s--fichas.es-columnas-3 .sjo-s__fichas {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 781px ) {

	.sjo-s--areas.es-numeral-rojo .sjo-s__areas {
		grid-template-columns: 1fr;
	}

	/* En una columna el numeral rojo ya está encima del nombre: no hay nada que
	   rehacer, solo hay que impedir que la regla general lo agrande. */
	.sjo-s--areas.es-numeral-rojo .sjo-s__area-num {
		font-size: 1.125rem;
	}

	/* El sesgo y el marco son cosa del escritorio, como la fotografía diagonal
	   de la izquierda: en una columna estrecha el sesgo se come demasiado alto y
	   el filete no tiene por dónde asomar. */
	/* El « height » es solo de la fotografía. Cuando iba también en su caja le
	   ganaba a la proporción y la caja crecía hasta el alto del contenido: 234
	   px en vez de los 210 de la maqueta, y el párrafo de debajo quedaba pegado
	   a la imagen. */
	.sjo-s--texto-imagen.es-con-marco .sjo-s__medio,
	.sjo-s--texto-imagen.es-con-marco .sjo-s__medio img {
		transform: none;
	}

	.sjo-s--texto-imagen.es-con-marco .sjo-s__medio img {
		top: 0;
		height: 100%;
	}

	.sjo-s--texto-imagen.es-con-marco .sjo-s__medio .sjo-foto {
		border-radius: 0 24px 24px 24px;
	}

	.sjo-s--texto-imagen.es-con-marco .sjo-s__medio::before {
		content: none;
	}
}

/* Con contenido de verdad encima, el velo tiene que trabajar más: la frase
   suelta se lee sobre casi cualquier fotografía, pero un párrafo de tres
   líneas no. Y quien suba la fotografía no va a poder medir el contraste, así
   que lo fija el código. */
.sjo-s--banda:has( .sjo-s__banda-rotulo ) .sjo-s__banda-medio::after {
	background-color: rgba( 0, 64, 120, 0.74 );
}

/* ---------------------------------------------------------------------------
 * Las áreas, en móvil, son un carrusel
 *
 * Es lo que hace la maqueta móvil con las dos listas de APAFA, y es lo mismo
 * que ya hacen el tríptico y las fichas: en una columna de 326 px, seis
 * apartados apilados son un scroll largo sin forma. La tarjeta cambia de piel
 * —blanca, con el nombre en azul— y el numeral se retira: en 268 px de ancho
 * un « 01 » de 76 px se come la tarjeta, y de todos modos era adorno.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

	.sjo-s__areas {
		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__areas::-webkit-scrollbar {
		display: none;
	}

	.sjo-s__area {
		display: flex;
		flex-direction: column;
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		box-sizing: border-box;
		padding: 1.5rem;
		background-color: var( --wp--preset--color--base, #fff );
		border-radius: 0 20px 20px 20px;
		scroll-snap-align: start;
	}

	.sjo-s--areas.es-numeral-rojo .sjo-s__area,
	.sjo-s--areas.es-numeral-hueco .sjo-s__area {
		row-gap: 0;
	}

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

	.sjo-s__area-tit {
		color: var( --wp--preset--color--azul, #004078 );
		font-size: 1.25rem;
		line-height: 1.3;
	}

	.sjo-s__area-txt {
		margin-top: 0.5rem;
		font-size: 0.9375rem;
		line-height: 1.4;
	}
}

/* ---------------------------------------------------------------------------
 * La ficha sin numeral, en móvil
 *
 * La piel móvil de la ficha está pensada para la ficha numerada: tarjeta blanca
 * con el numeral abriendo en azul y el nombre debajo, en gris y pequeño, como
 * un rótulo. Sin numeral esa jerarquía se queda sin cabeza —el nombre es lo
 * único que hay y se leía como un pie— y sobre una sección blanca la tarjeta
 * blanca desaparecía del todo.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

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

	.sjo-s__ficha:not( :has( .sjo-s__ficha-num ) ) .sjo-s__ficha-tit,
	.sjo-s--fichas.es-fondo-blanco .sjo-s__ficha:not( :has( .sjo-s__ficha-num ) ) .sjo-s__ficha-tit,
	.sjo-s--fichas.es-fondo-crema .sjo-s__ficha:not( :has( .sjo-s__ficha-num ) ) .sjo-s__ficha-tit {
		margin-top: 0;
		color: var( --sjo-s-tinta, #14181f );
		font-size: 0.875rem;
		line-height: 1.286;
	}

	.sjo-s__ficha:not( :has( .sjo-s__ficha-num ) ) .sjo-s__ficha-txt {
		margin-top: 0.625rem;
		font-size: 0.875rem;
		line-height: 1.5;
	}
}

/* ---------------------------------------------------------------------------
 * El destaque: una tarjeta montada sobre la fotografía
 *
 * Va fuera de « .sjo-s__medio » a propósito. La fotografía puede ir en diagonal
 * y recortada, y la tarjeta ni se tuerce con ella ni se deja recortar: son dos
 * piezas que se solapan, no una dentro de otra.
 * ------------------------------------------------------------------------ */

.sjo-s--texto-imagen.es-con-destaque .sjo-s__reja {
	position: relative;
}

.sjo-s__destaque {
	position: absolute;
	z-index: 2;

	/* Cuelga por debajo de la fotografía y se mete en el aire de la sección:
	   es lo que hace que se lea como puesta encima y no como parte de ella. */
	bottom: calc( -1 * clamp( 1rem, 3.33vw, 3rem ) );
	box-sizing: border-box;
	width: min( 35rem, 100% );
	padding: clamp( 1.75rem, 3.06vw, 2.75rem );
	background-color: var( --wp--preset--color--azul, #004078 );
	border-radius: 0 48px 48px 20px;
	box-shadow: 0 18px 22px rgba( 0, 26, 56, 0.18 );
	color: var( --wp--preset--color--base, #fff );
}

/* Se corre hacia el lado del texto, que es el sitio que hay libre: con la
   fotografía a la derecha, la tarjeta se sale por la izquierda. */
.sjo-s--texto-imagen.es-imagen-derecha .sjo-s__destaque {
	right: clamp( 1.5rem, 2.78vw, 2.5rem );
}

.sjo-s--texto-imagen.es-imagen-izquierda .sjo-s__destaque {
	left: clamp( 1.5rem, 2.78vw, 2.5rem );
}

.sjo-s__destaque-pic {
	display: block;
	margin-bottom: clamp( 1.25rem, 1.94vw, 1.75rem );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__destaque-pic svg {
	display: block;
	width: 32px;
	height: 32px;
}

.sjo-s__destaque-tit {
	margin: 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.81vw, 1.625rem );
	font-weight: 800;
	line-height: 1.231;
	letter-spacing: -0.023em;
}

.sjo-s__destaque-txt {
	margin: clamp( 1.25rem, 1.94vw, 1.75rem ) 0 0;
	color: rgba( 201, 220, 234, 0.9 );
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	line-height: 1.733;
}

/* ---------------------------------------------------------------------------
 * Fila escalonada de fotografías
 *
 * Cada columna sube un escalón respecto a la de su izquierda. El escalón va
 * aquí y no en un campo: cuánto sube cada una depende de cuántas haya, y se
 * cuenta desde el final —« nth-last-child »— para que la última quede siempre
 * a ras y no haya que tocar nada al añadir o quitar una columna.
 * ------------------------------------------------------------------------ */

.sjo-s--escalonada {
	--sjo-escalon: clamp( 1rem, 2.5vw, 2.25rem );
}

.sjo-s__escalones {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );

	/* 41 px sobre el lienzo de 1440: lo que deja tres columnas de 386 dentro
	   del interior de 1240. */
	gap: clamp( 1.5rem, 2.85vw, 2.5625rem );

	/* Con el escalón por encima, el aire bajo la bajada es el que le queda a la
	   columna que no sube: 82 px sobre el lienzo. */
	margin: clamp( 2rem, 5.69vw, 5.125rem ) 0 0;
	padding: 0;
	list-style: none;
}

/* Cuántos escalones baja cada columna lo pone el dato, en « --sjo-i »: la
   primera es la que más baja y la última queda a ras. Se contaba aquí con
   « nth-last-child », pero el carrusel clona las columnas para dar la vuelta
   sin fin y con las copias detrás la cuenta salía al revés. */
.sjo-s__escalon {
	margin-top: calc( var( --sjo-i, 0 ) * var( --sjo-escalon ) );
}

/* La caja manda, no el archivo: la proporción es la de la maqueta —386 × 295,5—
   y lo que se suba entra recortado. Una fotografía vertical de móvil habría
   estirado su columna y roto el escalonado de las otras dos. */
.sjo-s__escalon-foto {
	aspect-ratio: 386 / 295.5;
	border-radius: 0 24px 24px 24px;
	overflow: hidden;
}

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

.sjo-s__escalon-tit {
	margin: clamp( 1.25rem, 2.08vw, 1.875rem ) 0 0;
	color: var( --wp--preset--color--azul, #004078 );
	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.188;
	letter-spacing: -0.025em;
}

.sjo-s__escalon-txt {
	margin: 0.875rem 0 0;
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	line-height: 1.733;
}

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

/* ---------------------------------------------------------------------------
 * Escalera de pasos con fotografía
 *
 * La fotografía va pegada al borde de la pantalla y por eso vive fuera del
 * interior, como la de la banda. Su medida la fija el código —620 × 596 sobre
 * el lienzo de 1440— y no el archivo que se suba.
 *
 * El último paso es la llegada y se pinta al revés: caja blanca sobre el azul.
 * Lo decide el orden, no un interruptor.
 * ------------------------------------------------------------------------ */

.sjo-s--ruta {
	position: relative;
	min-height: clamp( 34rem, 68.89vw, 62rem );
	overflow: hidden;
}

.sjo-s__ruta-medio {
	position: absolute;
	bottom: 0;
	width: clamp( 14rem, 43.06vw, 38.75rem );
	height: clamp( 18rem, 41.39vw, 37.25rem );
}

.sjo-s--ruta.es-imagen-izquierda .sjo-s__ruta-medio {
	left: 0;
	border-radius: 0 24px 0 0;
	overflow: hidden;
}

.sjo-s--ruta.es-imagen-derecha .sjo-s__ruta-medio {
	right: 0;
	border-radius: 24px 0 0 0;
	overflow: hidden;
}

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

/* El interior no se posiciona a propósito: así la fotografía, que va dentro
   de él para quedar en su sitio en móvil, se mide en escritorio contra la
   sección y puede salirse hasta el borde de la pantalla. Lo que sube de plano
   es el texto, que es lo que tiene que quedar por encima. */
.sjo-s--ruta .sjo-s__encabezado,
.sjo-s--ruta .sjo-s__pasos {
	position: relative;
	z-index: 1;
}

.sjo-s__pasos {
	display: grid;

	/* 50 px entre pasos sobre el lienzo de 1440. */
	row-gap: clamp( 1.5rem, 3.47vw, 3.125rem );

	/* 632 de los 1240 del interior: la mitad justa, dejándole la otra a la
	   fotografía. */
	width: min( 100%, 51%  );
	margin: clamp( 2.5rem, 8.19vw, 7.375rem ) 0 0 auto;
	padding: 0;
	list-style: none;
}

.sjo-s--ruta.es-imagen-derecha .sjo-s__pasos {
	margin-inline: 0 auto;
}

.sjo-s__paso {
	display: grid;
	grid-template-columns: clamp( 2.5rem, 3.89vw, 3.5rem ) 1fr;
	column-gap: clamp( 0.75rem, 1.11vw, 1rem );
	align-items: start;
}

.sjo-s__paso-num {
	color: rgba( 201, 220, 234, 0.6 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.375rem, 1.81vw, 1.625rem );
	font-weight: 800;
	line-height: 1.231;
	letter-spacing: -0.023em;
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.sjo-s__paso-tit {
	margin: 0;
	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: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.sjo-s__paso-txt {
	margin: 0.4375rem 0 0;
	color: rgba( 201, 220, 234, 0.85 );
	font-size: clamp( 0.8125rem, 0.97vw, 0.875rem );
	line-height: 1.571;
}

/* La llegada. La caja se sale del ancho de la columna por los dos lados, lo
   justo para que su relleno no desalinee el texto con el de los pasos de
   arriba: el numeral y el titular siguen a plomo. */
.sjo-s__paso.es-llegada {
	margin-inline: calc( -1 * clamp( 1rem, 2.22vw, 2rem ) );
	padding: clamp( 1.25rem, 1.67vw, 1.5rem ) clamp( 1rem, 2.22vw, 2rem );
	background-color: var( --wp--preset--color--base, #fff );
	border-radius: 20px;
}

.sjo-s__paso.es-llegada .sjo-s__paso-num {
	color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s__paso.es-llegada .sjo-s__paso-tit {
	color: var( --sjo-s-tinta, #14181f );
	font-weight: 800;
}

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

/* Sobre fondo claro la escalera se da la vuelta: los pasos en tinta y la
   llegada en azul, que es el único modo de que siga destacando. */
.sjo-s--ruta.es-fondo-blanco .sjo-s__paso-tit,
.sjo-s--ruta.es-fondo-crema .sjo-s__paso-tit {
	color: var( --sjo-s-tinta, #14181f );
}

.sjo-s--ruta.es-fondo-blanco .sjo-s__paso-txt,
.sjo-s--ruta.es-fondo-crema .sjo-s__paso-txt {
	color: var( --sjo-s-gris, #5a6472 );
}

.sjo-s--ruta.es-fondo-blanco .sjo-s__paso-num,
.sjo-s--ruta.es-fondo-crema .sjo-s__paso-num {
	color: rgba( 0, 64, 120, 0.35 );
}

.sjo-s--ruta.es-fondo-blanco .sjo-s__paso.es-llegada,
.sjo-s--ruta.es-fondo-crema .sjo-s__paso.es-llegada {
	background-color: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--ruta.es-fondo-blanco .sjo-s__paso.es-llegada .sjo-s__paso-num,
.sjo-s--ruta.es-fondo-crema .sjo-s__paso.es-llegada .sjo-s__paso-num {
	color: rgba( 201, 220, 234, 0.7 );
}

.sjo-s--ruta.es-fondo-blanco .sjo-s__paso.es-llegada .sjo-s__paso-tit,
.sjo-s--ruta.es-fondo-crema .sjo-s__paso.es-llegada .sjo-s__paso-tit {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s--ruta.es-fondo-blanco .sjo-s__paso.es-llegada .sjo-s__paso-txt,
.sjo-s--ruta.es-fondo-crema .sjo-s__paso.es-llegada .sjo-s__paso-txt {
	color: rgba( 201, 220, 234, 0.85 );
}

/* ---------------------------------------------------------------------------
 * Formulario en tarjeta
 *
 * Lo que va dentro de la tarjeta lo devuelve el plugin, así que la piel se pide
 * por elemento —« input », « label »— y no por sus clases: así sigue valiendo
 * si mañana el formulario lo pinta otro. Las clases de Forminator van detrás
 * solo donde hace falta ganarle a su propia hoja.
 * ------------------------------------------------------------------------ */

.sjo-s__form-reja {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 2rem, 4.17vw, 3.75rem );
	align-items: start;
}

/* Sin formulario la sección se queda en una columna: media pantalla en blanco
   al lado de un texto no es una maqueta, es un hueco. */
.sjo-s--formulario.es-sin-formulario .sjo-s__form-reja {
	grid-template-columns: 1fr;
}

.sjo-s--formulario.es-sin-formulario .sjo-s__columna {
	max-width: 46rem;
}

/* 540 × 335,5 sobre el lienzo de 1440, y lo que se suba entra recortado. */
.sjo-s__form-medio {
	margin-top: clamp( 1.5rem, 3.33vw, 3rem );
	aspect-ratio: 540 / 335.5;
	max-width: 33.75rem;
	border-radius: 0 24px 24px 24px;
	overflow: hidden;
}

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

.sjo-s__form-tarjeta {
	box-sizing: border-box;
	padding: clamp( 1.75rem, 3.06vw, 2.75rem );
	background-color: var( --wp--preset--color--crema, #f4f1ec );
	border-radius: 0 48px 48px 20px;
}

/* Sobre una sección crema la tarjeta necesita el contraste al revés. */
.sjo-s--formulario.es-fondo-crema .sjo-s__form-tarjeta {
	background-color: var( --wp--preset--color--base, #fff );
}

.sjo-s__form-nota {
	margin: clamp( 1.25rem, 1.94vw, 1.75rem ) 0 0;
	color: rgba( 90, 100, 114, 0.8 );
	font-size: 0.75rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Las tres, en pantalla pequeña
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {

	.sjo-s__form-reja {
		grid-template-columns: 1fr;
	}

	.sjo-s__pasos {
		width: 100%;
		margin-inline: 0;
	}

	/* Sin sitio al costado, la fotografía de la escalera deja de ir pegada al
	   borde y pasa a abrir la sección. */
	.sjo-s--ruta {
		min-height: 0;
	}

	.sjo-s--ruta .sjo-s__ruta-medio {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 326 / 200;
		margin-bottom: clamp( 1.5rem, 3.33vw, 3rem );
		border-radius: 0 24px 24px 24px;
	}
}

@media ( max-width: 781px ) {

	/* El destaque deja de estar montado sobre la fotografía: en una columna no
	   hay nada sobre lo que montarse. */
	.sjo-s__destaque {
		position: static;
		width: 100%;
		margin-top: clamp( 1.5rem, 3.33vw, 3rem );
	}

	.sjo-s--texto-imagen.es-con-destaque .sjo-s__reja {
		row-gap: 0;
	}

	/* La fila escalonada pasa a carrusel: en una columna el escalón no dice
	   nada, porque no hay contra qué escalonarse. */
	.sjo-s__escalones {
		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__escalones::-webkit-scrollbar {
		display: none;
	}

	.sjo-s__escalon {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		margin-top: 0;
		scroll-snap-align: start;
	}

	.sjo-s__escalon-tit {
		font-size: 1.25rem;
		line-height: 1.3;
	}

	/* La escalera se pone en fila india y estrena la línea que une los pasos:
	   en escritorio la columna ya se lee de arriba abajo sola, pero aquí, con
	   el ancho de un móvil, la guía hace falta. */
	.sjo-s__pasos {
		position: relative;
		margin-top: clamp( 2rem, 5.56vw, 5rem );
	}

	.sjo-s__paso {
		position: relative;
		grid-template-columns: 1fr;
		padding-inline-start: 2.375rem;
	}

	/* El nodo de cada paso, y la línea que baja de él hasta el siguiente. La
	   línea es del nodo y no de la lista: así el último no la lleva y no queda
	   un rabo colgando. */
	.sjo-s__paso::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.375rem;
		width: 16px;
		height: 16px;
		background-color: rgba( 201, 220, 234, 0.55 );
		border-radius: 50%;
	}

	.sjo-s__paso:not( :last-child )::after {
		content: "";
		position: absolute;
		left: 7px;
		top: 1.75rem;
		bottom: calc( -1 * clamp( 1.5rem, 3.47vw, 3.125rem ) );
		width: 2px;
		background-color: rgba( 201, 220, 234, 0.28 );
	}

	.sjo-s__paso-num {
		font-size: 0.8125rem;
		line-height: 1.231;
		letter-spacing: 0.0769em;
	}

	.sjo-s__paso.es-llegada {
		margin-inline: 0;
		padding-inline: 2.375rem 1.25rem;
	}

	.sjo-s__paso.es-llegada::before {
		left: 1.25rem;
		background-color: var( --wp--preset--color--azul, #004078 );
	}

	.sjo-s--ruta.es-fondo-blanco .sjo-s__paso::before,
	.sjo-s--ruta.es-fondo-crema .sjo-s__paso::before {
		background-color: rgba( 0, 64, 120, 0.35 );
	}

	.sjo-s--ruta.es-fondo-blanco .sjo-s__paso:not( :last-child )::after,
	.sjo-s--ruta.es-fondo-crema .sjo-s__paso:not( :last-child )::after {
		background-color: rgba( 0, 64, 120, 0.18 );
	}

	.sjo-s--ruta.es-fondo-blanco .sjo-s__paso.es-llegada::before,
	.sjo-s--ruta.es-fondo-crema .sjo-s__paso.es-llegada::before {
		background-color: rgba( 201, 220, 234, 0.7 );
	}

	.sjo-s__form-medio {
		max-width: none;
		aspect-ratio: 326 / 210;
	}

	.sjo-s__form-tarjeta {
		border-radius: 0 24px 24px 20px;
	}
}

/* ---------------------------------------------------------------------------
 * La diagonal, ahora por campo y no por lado
 *
 * El sesgo estaba atado a « es-imagen-izquierda » porque en Bienvenida era ahí
 * donde acertaba, y el comentario de aquel bloque ya avisaba de que el sitio
 * bueno era un campo en la sección. Exalumnos lo pide con la fotografía a la
 * derecha y sin marco rojo, así que ha llegado el momento: manda la clase, y
 * las secciones que ya estaban puestas se marcaron con ella.
 * ------------------------------------------------------------------------ */

.sjo-s--texto-imagen.es-diagonal .sjo-s__medio {
	transform: skewY( -6.1deg );
	border-radius: 20px;
	overflow: hidden;
}

.sjo-s--texto-imagen.es-diagonal .sjo-s__medio img {
	top: -10%;
	height: 120%;
	transform: skewY( 6.1deg );

	/* La forma va en el contenedor, que es el que está torcido: si además la
	   llevara la fotografía, saldrían dos redondeos desalineados. */
	border-radius: 0;
}

@media ( max-width: 781px ) {

	/* En una columna estrecha el sesgo se come demasiado alto, igual que
	   pasaba con la fotografía diagonal de la izquierda. */
	/* El « height » es solo de la fotografía. Cuando iba también en su caja le
	   ganaba a la proporción y la caja crecía hasta el alto del contenido: 234
	   px en vez de los 210 de la maqueta, y el párrafo de debajo quedaba pegado
	   a la imagen. */
	.sjo-s--texto-imagen.es-diagonal .sjo-s__medio,
	.sjo-s--texto-imagen.es-diagonal .sjo-s__medio img {
		transform: none;
	}

	.sjo-s--texto-imagen.es-diagonal .sjo-s__medio img {
		top: 0;
		height: 100%;
	}

	.sjo-s--texto-imagen.es-diagonal .sjo-s__medio {
		border-radius: 0 24px 24px 24px;
	}
}

/* ---------------------------------------------------------------------------
 * Dos sitios donde la maqueta pide más aire al pie que el de la sección
 *
 * El tema da el mismo aire arriba y abajo —96 px sobre el lienzo de 1440— y en
 * casi todas las secciones la maqueta hace lo mismo, con 104 al pie. Hay dos
 * excepciones, y las dos están medidas:
 * ------------------------------------------------------------------------ */

/* La lista de áreas con el numeral hueco cierra con 188 px en Apoyo
   Institucional y 202 en APAFA: casi el doble. Son las dos únicas veces que
   aparece este tipo y las dos coinciden, así que no es despiste de la maqueta
   —el numeral hueco es grande y pide sitio por debajo para no chocar con la
   sección siguiente. */
.sjo-s--areas.es-numeral-hueco {
	padding-bottom: clamp( 4rem, 13.5vw, 12.125rem );
}

/* El destaque va en posición absoluta, así que no suma alto: colgaba dentro del
   aire de la sección y quedaba a 48 px del borde en vez de a 104. Se le devuelve
   al pie lo que la tarjeta se lleva. */
.sjo-s--texto-imagen.es-con-destaque {
	padding-bottom: calc( var( --sjo-s-aire ) + clamp( 1rem, 3.33vw, 3rem ) );
}

/* ---------------------------------------------------------------------------
 * La banda, en móvil
 *
 * Deja de ser una franja con la fotografía de fondo y el texto encima: la
 * maqueta móvil pone la fotografía como una tarjeta y el texto debajo, sobre el
 * azul macizo. Es lo mismo que hace con la banda de cierre, y por lo mismo —a
 * 390 px el titular compite con la escena que tiene detrás y pierde.
 *
 * El interior pasa a « display: contents » para poder intercalar la fotografía
 * entre sus hijos: el canalón se muda a la sección, que es quien queda con la
 * caja.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

	.sjo-s--banda,
	.sjo-s--banda:has( .sjo-s__banda-rotulo ) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		box-sizing: border-box;
		padding-inline: var( --sjo-gutter, clamp( 2rem, 6.94vw, 100px ) );
	}

	.sjo-s--banda .sjo-s__interior {
		display: contents;
	}

	/* El orden de la maqueta, que no es el mismo en las dos bandas: con
	   antetítulo la fotografía cierra —APAFA—; sin él va en medio, entre el
	   filete y la frase —Personal SANJO—. */
	.sjo-s--banda .sjo-p__filete {
		order: 0;
	}

	.sjo-s--banda .sjo-s__banda-rotulo {
		order: 1;
	}

	.sjo-s--banda .sjo-s__banda-frase {
		order: 2;
	}

	.sjo-s--banda .sjo-s__banda-txt {
		order: 3;
	}

	.sjo-s--banda .sjo-s__banda-medio {
		position: static;
		order: 4;
		aspect-ratio: 326 / 210;
		margin-top: clamp( 1.25rem, 5.13vw, 1.5rem );
		border-radius: 0 24px 24px 24px;
		overflow: hidden;
	}

	.sjo-s--banda:not( :has( .sjo-s__banda-rotulo ) ) .sjo-s__banda-medio {
		order: 1;
	}

	/* Sin texto encima, el velo sobra. */
	.sjo-s--banda .sjo-s__banda-medio::after {
		content: none;
	}

	.sjo-s--banda .sjo-s__banda-medio img {
		object-position: center 40%;
	}

	/* La frase deja de necesitar el aire que la separaba del filete: ahora entre
	   los dos va la fotografía. */
	.sjo-s--banda:not( :has( .sjo-s__banda-rotulo ) ) .sjo-s__banda-frase {
		margin-top: clamp( 1.5rem, 8.21vw, 2rem );
	}
}

/* ---------------------------------------------------------------------------
 * «Los siete equipos», en móvil
 *
 * La maqueta móvil no encoge las pestañas: cambia de estrategia. En vez de
 * siete pestañas con su lista, enseña los siete nombres numerados y, aparte, la
 * plana docente repartida por áreas curriculares. Tiene sentido: a 390 px una
 * tira de siete pestañas se sale de la pantalla y obliga a arrastrar para
 * descubrir que hay más.
 *
 * Las pestañas y sus paneles siguen impresos —el buscador los encuentra— y solo
 * se apagan aquí.
 * ------------------------------------------------------------------------ */

.sjo-s__equipos-resumen {
	display: none;
}

@media ( max-width: 781px ) {

	.sjo-s--equipos .sjo-s__pestanas,
	.sjo-s--equipos .sjo-s__panel {
		display: none;
	}

	.sjo-s__equipos-resumen {
		display: block;
		margin-top: clamp( 2rem, 10.26vw, 2.5rem );
	}

	.sjo-s__equipos-lista {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Cada fila: numeral, nombre y —solo donde la cuenta dice algo— cuántos son.
	   El filete que las separa va debajo de todas menos de la última. */
	.sjo-s__equipos-fila {
		display: grid;
		grid-template-columns: 2.25rem 1fr auto;
		align-items: baseline;
		gap: 0.5rem;
		padding-block: 0.875rem;
	}

	.sjo-s__equipos-fila + .sjo-s__equipos-fila {
		border-top: 1px solid rgba( 0, 64, 120, 0.12 );
	}

	.sjo-s__equipos-num {
		color: rgba( 0, 64, 120, 0.35 );
		font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.1455em;
		font-variant-numeric: tabular-nums;
	}

	.sjo-s__equipos-nombre {
		color: var( --wp--preset--color--azul, #004078 );
		font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: -0.0125rem;
	}

	.sjo-s__equipos-cuenta {
		color: var( --wp--preset--color--rojo, #e00026 );
		font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.0909em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* ---------------------------------------------------------------------
	 * La plana docente, por áreas
	 * ------------------------------------------------------------------ */

	.sjo-s__plana {
		margin-top: clamp( 1.75rem, 8.21vw, 2rem );
	}

	.sjo-s__equipos-etiqueta {
		margin: 0;
		color: rgba( 90, 100, 114, 0.8 );
		font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
		font-size: 0.625rem;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	.sjo-s__plana-lista {
		display: flex;
		gap: clamp( 1rem, 1.39vw, 1.25rem );
		margin: 0.875rem 0 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.sjo-s__plana-lista::-webkit-scrollbar {
		display: none;
	}

	.sjo-s__plana-area {
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		box-sizing: border-box;
		padding: 1.25rem;
		background-color: var( --wp--preset--color--base, #fff );
		border-radius: 0 20px 20px 20px;
		scroll-snap-align: start;
	}

	.sjo-s--equipos.es-fondo-blanco .sjo-s__plana-area {
		background-color: var( --wp--preset--color--crema, #f4f1ec );
	}

	.sjo-s__plana-nombre {
		margin: 0;
		color: var( --wp--preset--color--rojo, #e00026 );
		font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
		font-size: 0.625rem;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	.sjo-s__plana-cifra {
		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: 2rem;
		font-weight: 800;
		line-height: 1.25;
		letter-spacing: -0.05rem;
	}

	.sjo-s__plana-pie {
		margin: 0;
		color: var( --sjo-s-gris, #5a6472 );
		font-size: 0.8125rem;
		line-height: 1.385;
	}

	.sjo-s__plana-roles {
		margin: 1rem 0 0;
		padding: 0;
		list-style: none;
	}

	.sjo-s__plana-roles li {
		padding-block: 0.4375rem;
		color: var( --sjo-s-tinta, #14181f );
		font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.5;
	}

	.sjo-s__plana-roles li + li {
		border-top: 1px solid rgba( 0, 64, 120, 0.12 );
	}
}

/* ---------------------------------------------------------------------------
 * Dos arreglos de Exalumnos en móvil
 * ------------------------------------------------------------------------ */

/* La fotografía de apertura de la fila escalonada solo existe en móvil. */
.sjo-s__escalones-foto {
	display: none;
}

@media ( max-width: 781px ) {

	/* La fotografía de la escalera se pegaba al último renglón de la bajada:
	   no llevaba margen arriba, solo abajo. En la maqueta hay 32 px. */
	.sjo-s--ruta .sjo-s__ruta-medio {
		margin-top: clamp( 1.5rem, 8.21vw, 2rem );
	}

	/* La fila escalonada: una sola fotografía arriba y las tarjetas en titular y
	   texto, como en la maqueta. Con una por tarjeta, cada una medía 382 px y
	   solo se veía una cada vez. */
	.sjo-s__escalones-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__escalones-foto img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

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

	/* Sin fotografía, la tarjeta necesita su propia caja para no quedarse en dos
	   párrafos sueltos sobre el fondo. */
	.sjo-s__escalon {
		box-sizing: border-box;
		padding: 1.5rem;
		background-color: var( --wp--preset--color--base, #fff );
		border-radius: 0 20px 20px 20px;
	}

	.sjo-s--escalonada.es-fondo-blanco .sjo-s__escalon {
		background-color: var( --wp--preset--color--crema, #f4f1ec );
	}

	.sjo-s__escalon-tit {
		margin-top: 0;
	}
}