/*
 * Admisión
 * ---------------------------------------------------------------------------
 * Los cuatro tipos de sección que estrenan «Admisión», «Matrícula» y
 * «Traslado» —el recorrido de seis paradas, los requisitos en columnas, el
 * orden de prioridad y los pasos en tarjeta— y lo que se le añadió a «Dos
 * campus», al panel del Tour, al texto con apunte y al formulario para que
 * sirvieran aquí sin duplicarlos.
 *
 * Va después de « infraestructura »: las extensiones de «Dos campus» y del
 * panel pisan a propósito reglas que aquel archivo escribió.
 *
 * Las medidas son fluidas, no las del Figma: cada clamp() lleva el mínimo de la
 * maqueta de 390, el valor proporcional al lienzo de 1440 (px / 14,4 = vw) y el
 * máximo de la maqueta de escritorio.
 
 */

.sjo-s--recorrido,
.sjo-s--requisitos,
.sjo-s--prioridad,
.sjo-s--pasos {
	/* Los azules de la familia, con nombre corto, igual que en « vida » y en
	   « infraestructura ». */
	--sjo-a-azul: var( --wp--preset--color--azul, #004078 );
	--sjo-a-medio: var( --wp--preset--color--azul-medio, #006ba1 );
	--sjo-a-celeste: var( --wp--preset--color--celeste, #a7c6dd );
	--sjo-a-tenue: var( --wp--preset--color--azul-tenue, #c9dcea );
	--sjo-a-crema: var( --wp--preset--color--crema, #f4f1ec );
	--sjo-a-rojo: var( --wp--preset--color--rojo, #e00026 );

	/* La forma de la familia: esquina superior izquierda en ángulo y las otras
	   tres redondeadas. */
	--sjo-a-forma: 0 24px 24px 24px;
}

/* ---------------------------------------------------------------------------
 * Recorrido — las seis paradas sobre una línea
 * ------------------------------------------------------------------------ */

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

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

.sjo-s__recorrido-accion {
	margin: 0;
}

.sjo-s__paradas {
	position: relative;
	display: grid;

	/* Una columna por parada: así el centro de cada nodo cae siempre en el
	   mismo sitio, sean seis paradas o cuatro. */
	grid-template-columns: repeat( var( --sjo-total, 6 ), minmax( 0, 1fr ) );
	gap: clamp( 0.5rem, 1.11vw, 1rem );

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

/* La línea que une las paradas. Va del centro del primer nodo al del último
   —no de borde a borde— porque lo que une son las paradas, no la sección. */
.sjo-s__paradas::before,
.sjo-s__paradas::after {
	content: "";
	position: absolute;
	top: clamp( 1.25rem, 1.53vw, 1.375rem );
	left: calc( 50% / var( --sjo-total, 6 ) );
	right: calc( 50% / var( --sjo-total, 6 ) );
	height: 2px;
	background: rgba( 127, 179, 213, 0.4 );
}

/* Lo recorrido hasta la parada elegida, en rojo. El guion escribe en
   « --sjo-activo » el número de la parada; el ancho es la distancia del primer
   centro al suyo, y entre dos centros hay siempre el mismo trecho. */
.sjo-s__paradas::after {
	right: auto;
	width: calc(
		var( --sjo-activo, 0 ) *
		( 100% - 100% / var( --sjo-total, 6 ) ) /
		max( 1, var( --sjo-total, 6 ) - 1 )
	);
	background: var( --sjo-a-rojo );
	transition: width 0.5s ease;
}

.sjo-s__parada {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

/* Las paradas que son pestañas se pulsan; las de un índice, no. */
.sjo-s--recorrido.es-con-detalle .sjo-s__parada {
	cursor: pointer;
}

.sjo-s__parada-nodo {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp( 2.5rem, 3.33vw, 3rem );
	height: clamp( 2.5rem, 3.33vw, 3rem );
	border: 1.5px solid rgba( 167, 198, 221, 0.55 );
	border-radius: 50%;

	/* El fondo de la sección, para tapar la línea por debajo del nodo. */
	background: var( --sjo-s-fondo, #004078 );
	color: var( --sjo-a-tenue );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 1.04vw, 0.9375rem );
	font-weight: 600;
	line-height: 1;
}

/* La parada elegida va marcada. En el índice sin detalle la marcada es la
   primera, que es donde empieza el proceso. */
.sjo-s__parada.es-activa .sjo-s__parada-nodo,
.sjo-s__parada[ aria-selected="true" ] .sjo-s__parada-nodo {
	border-color: var( --sjo-a-rojo );
	background: var( --sjo-a-rojo );
	color: var( --wp--preset--color--base, #fff );
}

/* El índice sin detalle solo marca el contorno: ahí nadie ha elegido nada, y
   un nodo relleno prometería que se puede pulsar. */
.sjo-s--recorrido:not( .es-con-detalle ) .sjo-s__parada.es-activa .sjo-s__parada-nodo {
	background: var( --sjo-s-fondo, #004078 );
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s--recorrido.es-con-detalle .sjo-s__parada:hover .sjo-s__parada-nodo,
.sjo-s--recorrido.es-con-detalle .sjo-s__parada:focus-visible .sjo-s__parada-nodo {
	border-color: var( --wp--preset--color--base, #fff );
}

/* El panel del paso elegido. */
.sjo-s__paso-panel {
	margin: clamp( 2rem, 3.89vw, 3.5rem ) 0 0;
	padding: clamp( 1.5rem, 2.78vw, 2.5rem ) clamp( 1.75rem, 3.33vw, 3rem );
	border-radius: var( --sjo-a-forma );
	background: rgba( 255, 255, 255, 0.07 );
}

.sjo-s__paso-panel + .sjo-s__paso-panel {
	margin-top: clamp( 0.75rem, 1.11vw, 1rem );
}

/* Hay que decirlo: la regla de arriba no declara « display », pero el margen y
   el fondo seguirían pintándose si el guion escondiera el panel con
   « hidden » y algo le hubiera dado un display de caja. */
.sjo-s__paso-panel[ hidden ] {
	display: none;
}

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

.sjo-s__paso-panel-tit {
	margin: clamp( 0.375rem, 0.56vw, 0.5rem ) 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.25rem, 1.81vw, 1.625rem );
	font-weight: 800;
	line-height: 1.231;
	letter-spacing: -0.023em;
}

.sjo-s__paso-panel-txt {
	margin: clamp( 0.5rem, 0.83vw, 0.75rem ) 0 0;
	max-width: 46rem;
	color: var( --sjo-a-tenue );
	font-size: clamp( 0.9375rem, 1.04vw, 0.9375rem );
	line-height: 1.733;
}

/* Sobre fondo claro el panel es crema y el texto, tinta. */
.sjo-s--recorrido.es-fondo-blanco .sjo-s__paso-panel,
.sjo-s--recorrido.es-fondo-crema .sjo-s__paso-panel {
	background: rgba( 0, 64, 120, 0.05 );
}

.sjo-s--recorrido.es-fondo-blanco .sjo-s__paso-panel-tit,
.sjo-s--recorrido.es-fondo-crema .sjo-s__paso-panel-tit {
	color: var( --sjo-a-azul );
}

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

.sjo-s--recorrido.es-fondo-blanco .sjo-s__paso-panel-rotulo,
.sjo-s--recorrido.es-fondo-crema .sjo-s__paso-panel-rotulo {
	color: var( --sjo-a-rojo );
}

.sjo-s__parada-tit {
	margin-top: clamp( 0.75rem, 1.39vw, 1.25rem );
	max-width: 12rem;
	color: var( --wp--preset--color--base, #fff );
	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.529;
	letter-spacing: -0.023em;
}

.sjo-s__parada-txt {
	margin-top: 0.375rem;
	max-width: 12rem;
	color: var( --sjo-a-tenue );
	font-size: clamp( 0.8125rem, 0.903vw, 0.8125rem );
	line-height: 1.538;
}

/* Sobre fondo claro, el texto de las paradas se tiñe de la tinta de siempre. */
.sjo-s--recorrido.es-fondo-blanco .sjo-s__parada-tit,
.sjo-s--recorrido.es-fondo-crema .sjo-s__parada-tit {
	color: var( --sjo-s-tinta, #14181f );
}

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

.sjo-s--recorrido.es-fondo-blanco .sjo-s__parada-nodo,
.sjo-s--recorrido.es-fondo-crema .sjo-s__parada-nodo {
	border-color: rgba( 0, 64, 120, 0.25 );
	color: var( --sjo-a-azul );
}

/* ---------------------------------------------------------------------------
 * Requisitos — columnas con su lista numerada
 * ------------------------------------------------------------------------ */

.sjo-s__requisitos {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 2rem, 2.85vw, 2.5625rem );

	/* 100 px bajo la bajada, como en la maqueta. */
	margin: clamp( 2.5rem, 6.94vw, 6.25rem ) 0 0;
}

.sjo-s--requisitos.es-columnas-2 .sjo-s__requisitos {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

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

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

.sjo-s__requisito-tit {
	margin: clamp( 0.5rem, 0.69vw, 0.625rem ) 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.39vw, 1.25rem );
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.sjo-s__requisito-lista {
	display: grid;
	gap: clamp( 1.25rem, 2.08vw, 1.875rem );
	margin: clamp( 1.5rem, 2.36vw, 2.125rem ) 0 0;
	padding: 0;
	list-style: none;
}

/* El grupo que no lleva titular arranca a la altura de los que sí: si no, su
   primera línea queda descolgada media pulgada por encima de las otras dos. */
.sjo-s__requisito:not( :has( .sjo-s__requisito-tit ) ) .sjo-s__requisito-lista {
	margin-top: clamp( 1.5rem, 3.75vw, 3.375rem );
}

.sjo-s__requisito-punto {
	display: grid;
	grid-template-columns: clamp( 2rem, 2.78vw, 2.5rem ) minmax( 0, 1fr );
	align-items: start;
}

.sjo-s__requisito-num {
	color: var( --sjo-a-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 2.167;
	letter-spacing: 0.117em;
}

.sjo-s__requisito-txt {
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	line-height: 1.733;
}

.sjo-s__requisitos-nota {
	margin: clamp( 2rem, 3.33vw, 3rem ) 0 0;
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.8125rem, 0.903vw, 0.8125rem );
	line-height: 1.538;
}

/* ---------------------------------------------------------------------------
 * Orden de prioridad — barras que se acortan y se aclaran
 * ------------------------------------------------------------------------ */

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

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

.sjo-s--prioridad .sjo-s__prioridad-cabecera > .sjo-s__bajada {
	/* Lo que hay del filete al titular en la maqueta: así la bajada arranca a
	   la altura del titular y no a la del filete. */
	margin-top: clamp( 2.5rem, 3.89vw, 3.5rem );
	max-width: none;
}

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

.sjo-s__prioridades {
	display: grid;
	gap: clamp( 0.625rem, 0.83vw, 0.75rem );
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__prioridad {
	display: grid;
	grid-template-columns: clamp( 3rem, 6.67vw, 6rem ) minmax( 0, 1fr );
	align-items: center;
	box-sizing: border-box;
	min-height: clamp( 4.5rem, 6.39vw, 5.75rem );
	padding: clamp( 1rem, 1.67vw, 1.5rem ) clamp( 1.5rem, 3.33vw, 3rem );
	border-radius: var( --sjo-a-forma );
	background: var( --sjo-a-tono );
	color: var( --sjo-a-tono-tinta );

	/* Cada barra termina un poco antes que la anterior: es el orden de
	   prelación dibujado. Cinco centésimas por escalón es lo que mide en la
	   maqueta —de 1240 a 940 en seis criterios—. */
	margin-inline-end: calc( var( --sjo-i ) * 4.84% );
}

.sjo-s__prioridad.es-tono-0 {
	--sjo-a-tono: var( --sjo-a-azul );
	--sjo-a-tono-tinta: var( --sjo-a-tenue );
}

.sjo-s__prioridad.es-tono-1 {
	--sjo-a-tono: var( --sjo-a-medio );
	--sjo-a-tono-tinta: var( --sjo-a-tenue );
}

/* El punto intermedio que le falta a la paleta: entre el azul medio y el
   celeste. No está en theme.json porque solo se usa en esta escala. */
.sjo-s__prioridad.es-tono-2 {
	--sjo-a-tono: #4e9ac4;
	--sjo-a-tono-tinta: var( --wp--preset--color--azul-100, #e3ebf2 );
}

.sjo-s__prioridad.es-tono-3 {
	--sjo-a-tono: #7fb3d5;
	--sjo-a-tono-tinta: var( --sjo-a-azul );
}

.sjo-s__prioridad.es-tono-4 {
	--sjo-a-tono: var( --sjo-a-celeste );
	--sjo-a-tono-tinta: var( --sjo-a-azul );
}

.sjo-s__prioridad.es-tono-5 {
	--sjo-a-tono: var( --sjo-a-tenue );
	--sjo-a-tono-tinta: var( --sjo-a-azul );
}

.sjo-s__prioridad-num {
	color: inherit;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.25rem, 1.81vw, 1.625rem );
	font-weight: 800;
	line-height: 1.231;
	letter-spacing: -0.023em;
	opacity: 0.9;
}

/* Sobre los tres tonos oscuros el numeral es blanco y el texto va un punto por
   debajo: es la jerarquía de la maqueta. */
.sjo-s__prioridad.es-tono-0 .sjo-s__prioridad-num,
.sjo-s__prioridad.es-tono-1 .sjo-s__prioridad-num,
.sjo-s__prioridad.es-tono-2 .sjo-s__prioridad-num {
	color: var( --wp--preset--color--base, #fff );
	opacity: 1;
}

.sjo-s__prioridad-txt {
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.9375rem, 1.25vw, 1.125rem );
	font-weight: 500;
	line-height: 1.556;
	letter-spacing: -0.011em;
}

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

/* ---------------------------------------------------------------------------
 * Pasos en tarjeta — «Del banco a la firma»
 * ------------------------------------------------------------------------ */

.sjo-s__pasos-tarjetas {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 0.75rem, 0.83vw, 0.75rem );

	/* 100 px bajo el titular, como en la maqueta. */
	margin: clamp( 2.5rem, 6.94vw, 6.25rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__paso-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: clamp( 16rem, 24.44vw, 22rem );
	padding: clamp( 1.75rem, 2.22vw, 2rem );
	border-radius: var( --sjo-a-forma );
	background: var( --wp--preset--color--base, #fff );
}

/* El numeral fantasma de la esquina: grande, claro y detrás de todo. */
.sjo-s__paso-cifra {
	position: absolute;
	top: clamp( 1.25rem, 1.67vw, 1.5rem );
	right: clamp( 1.5rem, 2.22vw, 2rem );
	color: rgba( 167, 198, 221, 0.55 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 2.25rem, 3.89vw, 3.5rem );
	font-weight: 800;
	line-height: 1.107;
	letter-spacing: -0.036em;
}

.sjo-s__paso-rotulo {
	position: relative;
	margin: 0;
	color: var( --sjo-a-rojo );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sjo-s__paso-titulo {
	position: relative;
	margin: clamp( 0.5rem, 0.69vw, 0.625rem ) 0 0;

	/* Sitio para el numeral de la esquina: sin esto un titular largo se le
	   mete debajo. */
	padding-right: clamp( 2.5rem, 4.17vw, 3.75rem );
	color: var( --sjo-s-tinta, #14181f );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.25rem, 1.81vw, 1.625rem );
	font-weight: 800;
	line-height: 1.231;
	letter-spacing: -0.023em;
}

.sjo-s__paso-texto {
	margin: clamp( 1rem, 1.67vw, 1.5rem ) 0 0;
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.875rem, 0.972vw, 0.875rem );
	line-height: 1.571;
}

.sjo-s__paso-texto p {
	margin: 0;
}

.sjo-s__paso-texto p + p {
	margin-top: clamp( 0.75rem, 1.11vw, 1rem );
}

/* Las píldoras del pie: los bancos donde se abona. */
.sjo-s__paso-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: auto 0 0;
	padding: clamp( 1.25rem, 2.22vw, 2rem ) 0 0;
	list-style: none;
}

.sjo-s__paso-etiqueta {
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var( --sjo-a-crema );
	color: var( --sjo-a-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.385;
}

/* La píldora es siempre crema: lo que tiene detrás no es el fondo de la
   sección sino la tarjeta, que es blanca en los dos fondos. */

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

/* ---------------------------------------------------------------------------
 * Lo que se le añadió a «Dos campus»
 * ------------------------------------------------------------------------ */

/* La columna de texto de la cabecera: párrafos y, al pie, botón y enlace. */
.sjo-s__campus-txt {
	margin: clamp( 1.25rem, 1.94vw, 1.75rem ) 0 0;
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.9375rem, 1.11vw, 1rem );
	line-height: 1.75;
}

.sjo-s__campus-txt p {
	margin: 0;
}

.sjo-s__campus-txt p + p {
	margin-top: clamp( 1rem, 1.25vw, 1.125rem );
}

.sjo-s__campus-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 1rem, 2.22vw, 2rem );
	align-items: center;
	margin: clamp( 1.5rem, 2.78vw, 2.5rem ) 0 0;
}

.sjo-s__campus-enlace {
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	font-weight: 600;
	letter-spacing: 0.014em;
	text-decoration: none;
}

.sjo-s__campus-enlace::after {
	content: "\00a0\00a0\2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

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

/* La línea azul entre el titular y el texto: el rango de grados de «School». */
.sjo-s__sede-destaque {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --wp--preset--color--azul, #004078 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.0625rem, 1.53vw, 1.375rem );
	font-weight: 800;
	line-height: 1.364;
	letter-spacing: -0.018em;
}

.sjo-s__sede.es-tono-azul .sjo-s__sede-destaque {
	color: var( --wp--preset--color--base, #fff );
}

/* Los pares de grado y edad. */
.sjo-s__sede-filas {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: clamp( 1rem, 2.78vw, 2.5rem );
	row-gap: clamp( 1rem, 2.22vw, 2rem );
	margin: clamp( 1.25rem, 2.22vw, 2rem ) 0 0;
}

.sjo-s__sede-grado {
	margin: 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: 800;
	line-height: 1.333;
	letter-spacing: -0.011em;
}

.sjo-s__sede.es-tono-azul .sjo-s__sede-grado {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s__sede-edad {
	margin: 0;
	align-self: center;
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	line-height: 1.571;
}

.sjo-s__sede.es-tono-azul .sjo-s__sede-edad {
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
}

.sjo-s__sede-nota {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	line-height: 1.538;
	letter-spacing: 0.05em;
}

.sjo-s__sede.es-tono-azul .sjo-s__sede-nota {
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
}

/* El pie de la tarjeta con botón: el margen automático lo empuja abajo, igual
   que al enlace. */
.sjo-s__sede-pie .sjo-p__boton {
	display: inline-flex;
}

/* La tarjeta de dato: el titular es la cifra —«Noviembre», «02»— y crece hasta
   el tamaño de un titular de sección. */
.sjo-s--campus.es-estilo-dato .sjo-s__sede-tit {
	font-size: clamp( 2rem, 3.06vw, 2.75rem );
	line-height: 1.136;
	letter-spacing: -0.032em;
}

.sjo-s--campus.es-estilo-dato .sjo-s__sede.es-tono-crema .sjo-s__sede-tit,
.sjo-s--campus.es-estilo-dato .sjo-s__sede.es-tono-blanco .sjo-s__sede-tit {
	color: var( --wp--preset--color--azul, #004078 );
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió al panel del Tour: el tono azul y la columna de accesos
 * ------------------------------------------------------------------------ */

.sjo-s--tour.es-tono-azul .sjo-s__tour {
	background: var( --wp--preset--color--azul, #004078 );
}

.sjo-s--tour.es-tono-azul .sjo-s__rotulo,
.sjo-s--tour.es-tono-azul .sjo-s__tour-txt {
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
}

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

/* Sin fotografía, la derecha del panel son los accesos: el rótulo, los datos,
   los botones y la nota. */
.sjo-s--tour.es-con-accesos .sjo-s__tour {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 40% );
	align-items: center;
}

.sjo-s__tour-accesos {
	padding: clamp( 1.75rem, 3.33vw, 3rem ) clamp( 1.75rem, 3.33vw, 3rem ) clamp( 1.75rem, 3.33vw, 3rem ) 0;
}

.sjo-s__tour-accesos-rotulo {
	margin: 0 0 clamp( 1rem, 1.67vw, 1.5rem );
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sjo-s__tour-datos {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 1.25rem, 2.78vw, 2.5rem );
	margin: 0 0 clamp( 1.25rem, 2.22vw, 2rem );
}

.sjo-s__tour-dato-rotulo {
	margin: 0;
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.167em;
	text-transform: uppercase;
}

.sjo-s__tour-dato-valor {
	margin: 0.375rem 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
	font-weight: 800;
	line-height: 1.364;
	letter-spacing: -0.014em;
}

.sjo-s__tour-nota {
	margin: clamp( 0.75rem, 1.11vw, 1rem ) 0 0;
	color: rgba( 201, 220, 234, 0.8 );
	font-size: clamp( 0.75rem, 0.903vw, 0.8125rem );
	line-height: 1.538;
}

/* En el panel azul el enlace de texto y el botón de contorno se ven en claro. */
.sjo-s--tour.es-tono-azul .sjo-s__tour-enlace {
	color: var( --wp--preset--color--base, #fff );
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió al texto con apunte: el punto con titular y el remate
 * ------------------------------------------------------------------------ */

/* Con titular, el punto deja de ser una línea de una cuenta y pasa a ser un
   dato con su nombre: el titular arriba y el texto debajo. */
.sjo-s__apunte-punto.es-con-titulo {
	display: block;
}

.sjo-s__apunte-punto-tit {
	display: block;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.25rem, 1.81vw, 1.625rem );
	font-weight: 800;
	line-height: 1.231;
	letter-spacing: -0.023em;
}

.sjo-s__apunte-punto.es-con-titulo .sjo-s__apunte-punto-txt {
	display: block;
	margin-top: 0.375rem;
}

.sjo-s__apunte-panel-remate {
	margin: clamp( 1.25rem, 2.22vw, 2rem ) 0 0;
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	font-weight: 600;
	line-height: 1.571;
	letter-spacing: 0.007em;
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió al formulario: la ficha ancha y el diálogo
 * ------------------------------------------------------------------------ */

.sjo-s--formulario.es-estilo-ancha .sjo-s__form-tarjeta,
.sjo-s__form-dialogo .sjo-s__form-tarjeta {
	box-sizing: border-box;
	margin: clamp( 1.5rem, 4.17vw, 3.75rem ) 0 0;
	padding: clamp( 1.75rem, 3.33vw, 3rem );
	border-radius: var( --sjo-a-forma, 0 24px 24px 24px );
	background: var( --wp--preset--color--base, #fff );
}

/* Dentro del diálogo la ficha ya está dentro de una caja blanca: ni margen ni
   esquinas propias. */
.sjo-s__form-dialogo .sjo-s__form-tarjeta {
	margin: 0;
	border-radius: 0;
}

/* --- El diálogo --- */

/* La sección que solo contiene el diálogo no ocupa sitio en la página: lo que
   se ve de ella es el modal, y eso lo coloca el navegador. */
.sjo-s--formulario.es-estilo-dialogo {
	padding-block: 0;
}

.sjo-s__form-dialogo {
	width: min( 76.25rem, calc( 100vw - 2 * var( --sjo-gutter ) ) );
	max-width: none;
	max-height: calc( 100vh - 2 * clamp( 1rem, 3.33vw, 3rem ) );
	padding: 0;
	border: 0;
	border-radius: var( --sjo-a-forma, 0 24px 24px 24px );
	background: var( --wp--preset--color--base, #fff );
	overflow: hidden;
}

.sjo-s__form-dialogo::backdrop {
	background: rgba( 0, 26, 51, 0.62 );
}

/* Forminator esconde su formulario —« visibility: hidden »— y lo enseña cuando
   entra en pantalla, con un observador propio que le pone la clase
   « forminator-in ». Uno que nace dentro de un « dialog » cerrado **no entra
   nunca**: se quedaba invisible para siempre y el diálogo se abría con la ficha
   en blanco. Aquí se le devuelve la visibilidad, y con « !important » porque sus
   reglas apuntan con un « id » y contra un id no hay clase que valga. */
.sjo-s__form-dialogo .forminator-ui,
.sjo-s__form-dialogo [ id^="forminator-module" ] {
	visibility: visible !important;
	opacity: 1 !important;
}

.sjo-s__form-dialogo-caja {
	max-height: inherit;
	overflow-y: auto;
}

.sjo-s__form-cabecera {
	position: relative;
	padding: clamp( 1.5rem, 2.78vw, 2.5rem ) clamp( 1.75rem, 3.33vw, 3rem );
	background: var( --wp--preset--color--azul, #004078 );
}

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

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

.sjo-s__form-bajada {
	margin: clamp( 0.5rem, 0.83vw, 0.75rem ) 0 0;
	max-width: 44rem;
	color: var( --wp--preset--color--azul-tenue, #c9dcea );
	font-size: clamp( 0.8125rem, 0.903vw, 0.8125rem );
	line-height: 1.538;
}

.sjo-s__form-cerrar {
	position: absolute;
	top: clamp( 1.25rem, 2.22vw, 2rem );
	right: clamp( 1.25rem, 2.22vw, 2rem );
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.14 );
	color: var( --wp--preset--color--base, #fff );
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sjo-s__form-cerrar:hover,
.sjo-s__form-cerrar:focus-visible {
	background: rgba( 255, 255, 255, 0.26 );
}

/* Sin « dialog » —o sin JavaScript— la ficha vuelve al flujo de la página, con
   su cabecera azul, y se lee donde está. Es la misma receta que las fichas del
   mosaico de Vida Sanjo. */
.sin-dialogo .sjo-s--formulario.es-estilo-dialogo {
	padding-block: var( --sjo-s-aire );
}

.sin-dialogo .sjo-s__form-dialogo {
	display: block;
	position: static;
	width: auto;
	max-height: none;
}

.sin-dialogo .sjo-s__form-cerrar {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pantallas medianas
 * ------------------------------------------------------------------------ */

@media ( max-width: 1023px ) {

	/* Seis paradas en una fila dejan cada nombre en una columna de dos letras:
	   a este ancho la línea se pone de pie. */
	.sjo-s__paradas {
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 1.5rem, 3.33vw, 2rem );
	}

	.sjo-s__paradas::before {
		top: clamp( 1.25rem, 1.53vw, 1.375rem );
		bottom: clamp( 1.25rem, 1.53vw, 1.375rem );
		left: clamp( 1.25rem, 1.67vw, 1.5rem );
		right: auto;
		width: 2px;
		height: auto;
	}

	/* De pie, lo recorrido no se puede pintar sobre la línea: las paradas ya no
	   miden todas lo mismo —un nombre de dos líneas ocupa más— y el trazo rojo
	   acabaría a media parada. Lo que dice dónde estamos es el nodo relleno. */
	.sjo-s__paradas::after {
		display: none;
	}

	.sjo-s__parada {
		flex-direction: row;
		align-items: center;
		gap: clamp( 1rem, 2.22vw, 1.25rem );
		text-align: start;
	}

	.sjo-s__parada-tit,
	.sjo-s__parada-txt {
		margin-top: 0;
		max-width: none;
	}

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

	.sjo-s--prioridad .sjo-s__prioridad-cabecera {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s--prioridad .sjo-s__prioridad-cabecera > .sjo-s__bajada {
		margin-top: 1.25rem;
	}

	/* El acortado de las barras se reparte sobre un ancho mucho menor: con el
	   mismo porcentaje, la última quedaría en un tercio de pantalla. */
	.sjo-s__prioridad {
		margin-inline-end: calc( var( --sjo-i ) * 2%  );
	}

	.sjo-s--tour.es-con-accesos .sjo-s__tour {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s__tour-accesos {
		padding: 0 clamp( 1.75rem, 3.33vw, 3rem ) clamp( 1.75rem, 3.33vw, 3rem );
	}
}

/* ---------------------------------------------------------------------------
 * Móvil
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

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

	/* Las columnas pasan a carrusel, como en la maqueta: apiladas, las tres
	   listas seguidas son una página de documentos sin fin. Cada grupo se
	   convierte en su propia tarjeta crema. */
	.sjo-s--requisitos[ data-sjo-carrusel ] .sjo-s__requisitos {
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	/* El ancho lo reparte el guion en « --sjo-carrusel-ancho », como en los
	   otros quince carruseles del sitio: una tarjeta por pantalla, justa, y la
	   siguiente arrancando en el borde. Antes eran 80vw y asomaban 49 px de la
	   de al lado —una tarjeta cortada, que es lo que no se quiere ver—. */
	.sjo-s--requisitos[ data-sjo-carrusel ] .sjo-s__requisito {
		box-sizing: border-box;
		flex: 0 0 var( --sjo-carrusel-ancho, 100% );
		padding: clamp( 1.5rem, 6.15vw, 1.75rem );
		border-radius: var( --sjo-a-forma );
		background: var( --sjo-a-crema );
		scroll-snap-align: start;
	}

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

	/* En tarjeta, todos los grupos arrancan igual: la corrección de altura solo
	   tenía sentido cuando estaban uno al lado del otro. */
	.sjo-s__requisito:not( :has( .sjo-s__requisito-tit ) ) .sjo-s__requisito-lista {
		margin-top: clamp( 1.5rem, 3.85vw, 1.5rem );
	}

	/* Las barras dejan de acortarse: a 326 px de ancho, restarle un 5 % a cada
	   una deja la última sin sitio para su texto. La escala de color sigue
	   contando el orden. */
	.sjo-s__prioridad {
		grid-template-columns: auto minmax( 0, 1fr );
		column-gap: clamp( 1rem, 4.1vw, 1.25rem );
		margin-inline-end: 0;
		padding: clamp( 1rem, 4.1vw, 1.25rem ) clamp( 1.25rem, 5.13vw, 1.5rem );
	}

	/* Las tarjetas de paso se apilan a todo el ancho: son instrucciones que se
	   leen en orden, y la maqueta móvil no las pone en carrusel. */
	.sjo-s__pasos-tarjetas {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1rem;
	}

	.sjo-s__paso-tarjeta {
		min-height: 0;
	}

	.sjo-s__form-dialogo {
		width: 100vw;
		max-height: 100vh;
		border-radius: 0;
	}
}

/* El enlace de texto al pie de la columna del apunte: cuando lo que sigue no
   es la acción principal, como en «Traslado». */
.sjo-s__apunte-enlace-pie {
	color: var( --wp--preset--color--rojo, #e00026 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 0.8125rem, 0.972vw, 0.875rem );
	font-weight: 600;
	letter-spacing: 0.014em;
	text-decoration: none;
}

.sjo-s__apunte-enlace-pie::after {
	content: "\00a0\00a0\2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

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

/* ---------------------------------------------------------------------------
 * Los pares de grado y edad, apilados en móvil
 *
 * A 326 px de tarjeta, «Pre Kinder 3» y «03 años cumplidos al 31 de marzo» no
 * caben en la misma línea: la edad se partía en tres renglones contra el borde.
 * La maqueta móvil los apila —el grado arriba y la edad debajo— y separa cada
 * par con un filete, que es lo que deja leer los tres de un vistazo.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

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

	.sjo-s__sede-edad {
		margin-top: 0.125rem;
		align-self: auto;
	}

	/* El filete entre pares: desde el segundo, que el primero ya lo separa del
	   titular de la tarjeta. */
	.sjo-s__sede-edad + .sjo-s__sede-grado {
		margin-top: clamp( 0.75rem, 3.08vw, 1rem );
		padding-top: clamp( 0.75rem, 3.08vw, 1rem );
		border-top: 1px solid rgba( 0, 64, 120, 0.12 );
	}

	.sjo-s__sede.es-tono-azul .sjo-s__sede-edad + .sjo-s__sede-grado {
		border-top-color: rgba( 255, 255, 255, 0.16 );
	}
}