/*
 * Infraestructura
 * ---------------------------------------------------------------------------
 * Los cuatro tipos de sección que estrenan «Áreas e Instalaciones» y «Tour 360»
 * —las dos sedes, los espacios numerados, el panel del recorrido y el visor con
 * sus chips— y el numeral fantasma que se le añadió a «Áreas» para «Cómo
 * moverte».
 *
 * Va después de « vida »: casi todo cuelga de « .sjo-s », que declara
 * « paginas », y la extensión de «Áreas» pisa a propósito reglas que aquel
 * archivo ya escribió.
 *
 * Las medidas son fluidas, no las del Figma: cada clamp() lleva el mínimo de la
 * maqueta de 390, el valor proporcional al lienzo de 1440 (px / 14,4 = vw) y el
 * máximo de la maqueta de escritorio.
 */

.sjo-s--campus,
.sjo-s--espacios,
.sjo-s--tour,
.sjo-s--visor {
	/* Los azules de la familia, con nombre corto, igual que en « vida ». */
	--sjo-i-azul: var( --wp--preset--color--azul, #004078 );
	--sjo-i-medio: var( --wp--preset--color--azul-medio, #006ba1 );
	--sjo-i-celeste: var( --wp--preset--color--celeste, #a7c6dd );
	--sjo-i-tenue: var( --wp--preset--color--azul-tenue, #c9dcea );
	--sjo-i-crema: var( --wp--preset--color--crema, #f4f1ec );
	--sjo-i-rojo: var( --wp--preset--color--rojo, #e00026 );

	/* El punto que le falta a la paleta: entre el celeste y el azul medio. La
	   escala de los espacios son cuatro pasos y este es el tercero; no está en
	   theme.json porque no se usa en ningún otro sitio del sitio. */
	--sjo-i-medio-claro: #7fb3d5;

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

	/* Ninguna pieza de esta familia sangra hasta el borde: en la maqueta lo
	   hacen las dos fotografías de «Áreas e Instalaciones», pero se decidió
	   dejarlas dentro del canalón. El recorte se queda por lo que se monta
	   —el panel sobre la fotografía, la insignia sobre el panel—. */
	overflow: clip;
}

/* ---------------------------------------------------------------------------
 * Dos campus — el encabezado con su fotografía y las dos tarjetas
 * ------------------------------------------------------------------------ */

.sjo-s--campus .sjo-s__campus-cabecera {
	display: grid;

	/* 560 de texto y 620 de fotografía sobre el interior de 1340. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 46.27% );
	gap: clamp( 2rem, 4.17vw, 3.75rem );
	align-items: start;
}

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

/* La fotografía se queda dentro del canalón, con la forma de la familia. En la
   maqueta llega al borde de la pantalla; aquí no, por decisión del cliente: una
   fotografía pegada al borde se lee como un corte y no como una pieza. */
.sjo-s--campus .sjo-s__campus-foto {
	border-radius: var( --sjo-i-forma );
	overflow: hidden;
}

.sjo-s--campus .sjo-s__campus-foto img {
	display: block;
	width: 100%;

	/* « height: auto » no es de adorno: WordPress imprime « width » y « height »
	   en el « img », y con el alto puesto en el atributo el « aspect-ratio » del
	   CSS no llega a aplicarse —la fotografía sale con la proporción del archivo
	   y no con la de la maqueta—. */
	height: auto;
	aspect-ratio: 620 / 340;
	object-fit: cover;
}

.sjo-s__sedes {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: clamp( 1rem, 2.78vw, 2.5rem );

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

/* Sin fotografía —«¿Prefieres verlo en persona?»— las tarjetas arrancan más
   cerca del encabezado: no hay nada que dejar respirar encima. */
.sjo-s--campus:not( .es-con-foto ) .sjo-s__sedes {
	margin-top: clamp( 2rem, 4.72vw, 4.25rem );
}

.sjo-s__sede {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: clamp( 13rem, 18.06vw, 16.25rem );
	padding: clamp( 1.75rem, 2.78vw, 2.5rem );
	border-radius: var( --sjo-i-forma );
	background: var( --sjo-i-crema );
}

.sjo-s__sede.es-tono-azul {
	background: var( --sjo-i-azul );
}

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

.sjo-s__sede-rotulo {
	margin: 0;
	color: var( --sjo-i-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.25em;
	text-transform: uppercase;
}

.sjo-s__sede.es-tono-azul .sjo-s__sede-rotulo {
	color: var( --sjo-i-tenue );
}

.sjo-s__sede-tit {
	margin: clamp( 0.625rem, 0.83vw, 0.75rem ) 0 0;
	color: var( --sjo-s-tinta, #14181f );
	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__sede.es-tono-azul .sjo-s__sede-tit {
	color: var( --wp--preset--color--base, #fff );
}

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

.sjo-s__sede.es-tono-azul .sjo-s__sede-txt {
	color: var( --sjo-i-tenue );
}

.sjo-s__sede-dato {
	margin: clamp( 0.5rem, 0.83vw, 0.75rem ) 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.444;
}

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

/* El teléfono se marca desde el móvil, pero en pantalla es el mismo texto de la
   maqueta: sin subrayado ni color de enlace. */
.sjo-s__sede-tel {
	color: inherit;
	text-decoration: none;
}

.sjo-s__sede-tel:hover,
.sjo-s__sede-tel:focus-visible {
	text-decoration: underline;
}

.sjo-s__sede-pie {
	margin: auto 0 0;
	padding-top: clamp( 1.25rem, 2.22vw, 2rem );
}

.sjo-s__sede-enlace {
	color: var( --sjo-i-rojo );
	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__sede.es-tono-azul .sjo-s__sede-enlace {
	color: var( --wp--preset--color--base, #fff );
}

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

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

/* ---------------------------------------------------------------------------
 * Espacios — la cuenta del 01 al 13, en tres formas
 * ------------------------------------------------------------------------ */

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

/* La cifra del total: el número grande en celeste y debajo qué cuenta. Es la
   única pieza de la sección que habla de las tres juntas. */
.sjo-s__espacios-cifra {
	display: grid;
	justify-items: end;
	margin: 0;
	text-align: end;
}

.sjo-s__espacios-cifra-num {
	color: var( --sjo-i-celeste );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 3rem, 5vw, 4.5rem );
	font-weight: 800;
	line-height: 1.083;
	letter-spacing: -0.042em;
}

.sjo-s__espacios-cifra-txt {
	margin-top: clamp( 0.25rem, 0.83vw, 0.75rem );
	color: var( --sjo-s-gris, #5a6472 );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.167em;
	text-transform: uppercase;
}

.sjo-s__espacios {
	margin: clamp( 2rem, 4.86vw, 4.375rem ) 0 0;
	padding: 0;
	list-style: none;
}

.sjo-s__espacio-tit {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-weight: 800;
	letter-spacing: -0.018em;
}

.sjo-s__espacio-txt {
	margin: clamp( 0.5rem, 0.97vw, 0.875rem ) 0 0;
}

/* --- Baldosas: una grande y cuatro pegadas -------------------------------- */

/* La junta entre baldosas. Tres píxeles de línea a cualquier tamaño: es un
   filete, de los que no crecen con la pantalla. */
.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacios {
	display: grid;

	/* 620 · 304 · 304 sobre el interior de 1340, y dos filas iguales: la
	   baldosa grande ocupa las dos. */
	grid-template-columns: minmax( 0, 620fr ) minmax( 0, 304fr ) minmax( 0, 304fr );
	gap: 6px;

	/* Las esquinas son de la composición entera, no de cada baldosa: con el
	   recorte aquí, cada una puede ser un rectángulo y la reja se encarga. */
	border-radius: var( --sjo-i-forma );
	overflow: hidden;
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	min-height: clamp( 9rem, 12.5vw, 11.25rem );
	padding: clamp( 1.25rem, 1.94vw, 1.75rem );
	background: var( --sjo-i-tenue );
}

/* La escala de azules: cada baldosa un punto más oscura que la anterior. Solo
   aquí: en las otras dos formas la escala no la lleva la pieza entera sino el
   cuadro del numeral, y pintar la fila de color la convertiría en una banda. */
.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-rampa-2 {
	background: var( --sjo-i-celeste );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-rampa-3 {
	background: var( --sjo-i-medio-claro );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-rampa-4 {
	background: var( --sjo-i-medio );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-destacado {
	grid-column: 1;
	grid-row: 1 / span 2;
	justify-content: center;
	padding: clamp( 1.75rem, 3.33vw, 3rem );
	background: var( --sjo-i-azul );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio-num {
	color: rgba( 0, 64, 120, 0.7 );
	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;
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-rampa-4 .sjo-s__espacio-num {
	color: rgba( 255, 255, 255, 0.7 );
}

/* En la baldosa grande el numeral es el fantasma de la maqueta: enorme, detrás
   del nombre y sin competir con él. */
.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-destacado .sjo-s__espacio-num {
	color: rgba( 201, 220, 234, 0.5 );
	font-size: clamp( 2.5rem, 3.89vw, 3.5rem );
	font-weight: 800;
	line-height: 1.107;
	letter-spacing: -0.036em;
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio-cuerpo {
	margin-top: clamp( 0.5rem, 0.56vw, 0.5rem );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-destacado .sjo-s__espacio-cuerpo {
	margin-top: clamp( 1.25rem, 1.94vw, 1.75rem );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio-tit {
	color: var( --sjo-i-azul );
	font-size: clamp( 1.0625rem, 1.53vw, 1.375rem );
	line-height: 1.273;
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-rampa-4 .sjo-s__espacio-tit,
.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-destacado .sjo-s__espacio-tit {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-destacado .sjo-s__espacio-tit {
	font-size: clamp( 1.75rem, 2.78vw, 2.5rem );
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio-txt {
	color: rgba( 0, 64, 120, 0.85 );
	font-size: clamp( 0.8125rem, 0.903vw, 0.8125rem );
	line-height: 1.538;
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-rampa-4 .sjo-s__espacio-txt {
	color: rgba( 255, 255, 255, 0.85 );
}

.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-destacado .sjo-s__espacio-txt {
	color: var( --sjo-i-tenue );
	font-size: clamp( 0.875rem, 1.11vw, 1rem );
	line-height: 1.75;
}

/* --- Tarjetas: cuatro, con el numeral en su cuadro ------------------------ */

.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacios {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: clamp( 0.75rem, 0.69vw, 0.625rem );
}

.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: clamp( 13rem, 18.89vw, 17rem );
	padding: clamp( 1.5rem, 2.22vw, 2rem );
	border-radius: var( --sjo-i-forma );
	background: var( --wp--preset--color--base, #fff );
}

/* El cuadro del numeral: la misma forma de la familia a escala pequeña. */
.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio-num,
.sjo-s--espacios.es-estilo-panel .sjo-s__espacio-num {
	display: grid;
	place-items: center;
	border-radius: 0 12px 12px 12px;
	background: var( --sjo-i-tenue );
	color: var( --sjo-i-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.014em;
}

.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio-num {
	width: clamp( 3rem, 4.44vw, 4rem );
	height: clamp( 3rem, 4.44vw, 4rem );
	font-size: clamp( 1.125rem, 1.53vw, 1.375rem );
}

/* La escala, en el cuadro: es lo único que se tiñe en las tarjetas y en el
   panel. */
.sjo-s--espacios:not( .es-estilo-baldosas ) .sjo-s__espacio.es-rampa-2 .sjo-s__espacio-num {
	background: var( --sjo-i-celeste );
}

.sjo-s--espacios:not( .es-estilo-baldosas ) .sjo-s__espacio.es-rampa-3 .sjo-s__espacio-num {
	background: var( --sjo-i-medio-claro );
}

.sjo-s--espacios:not( .es-estilo-baldosas ) .sjo-s__espacio.es-rampa-4 .sjo-s__espacio-num {
	background: var( --sjo-i-medio );
}

/* Sobre los dos pasos oscuros de la escala el numeral pasa a blanco: en azul
   sobre azul no se lee. */
.sjo-s--espacios .sjo-s__espacio.es-rampa-3 .sjo-s__espacio-num,
.sjo-s--espacios .sjo-s__espacio.es-rampa-4 .sjo-s__espacio-num {
	color: var( --wp--preset--color--base, #fff );
}

.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio-cuerpo {
	margin-top: clamp( 1.25rem, 1.81vw, 1.625rem );
}

.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio-tit {
	color: var( --sjo-s-tinta, #14181f );
	font-size: clamp( 1.0625rem, 1.53vw, 1.375rem );
	line-height: 1.273;
}

.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio-txt {
	color: var( --sjo-s-gris, #5a6472 );
	font-size: clamp( 0.875rem, 0.972vw, 0.875rem );
	line-height: 1.571;
}

/* --- Panel: la fotografía y, encima, la lista ----------------------------- */

.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-reja {
	display: grid;

	/* La fotografía ocupa poco menos de la mitad del interior y el panel se le
	   monta encima por su izquierda. */
	grid-template-columns: minmax( 0, 46% ) minmax( 0, 1fr );
	align-items: center;
	margin-top: clamp( 2rem, 4.86vw, 4.375rem );
}

/* Como la del encabezado de «Dos campus»: dentro del canalón y con la forma de
   la familia, no pegada al borde de la pantalla. */
.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto {
	grid-column: 1;
	grid-row: 1;
	border-radius: var( --sjo-i-forma );
	overflow: hidden;
}

.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 620 / 544;
	object-fit: cover;
}

.sjo-s--espacios.es-estilo-panel .sjo-s__espacios {
	position: relative;
	grid-column: 2;
	grid-row: 1;

	/* Lo que el panel se monta sobre la fotografía: 60 px en la maqueta. */
	margin: 0 0 0 calc( -1 * clamp( 1.5rem, 4.17vw, 3.75rem ) );
	padding: clamp( 1.75rem, 3.33vw, 3rem );
	border-radius: var( --sjo-i-forma );
	background: var( --sjo-i-crema );
}

/* Con fondo crema el panel se perdería contra la sección: ahí es blanco. */
.sjo-s--espacios.es-estilo-panel.es-fondo-crema .sjo-s__espacios {
	background: var( --wp--preset--color--base, #fff );
}

.sjo-s--espacios.es-estilo-panel .sjo-s__espacio {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: clamp( 0.875rem, 1.39vw, 1.25rem );
	align-items: start;
}

.sjo-s--espacios.es-estilo-panel .sjo-s__espacio + .sjo-s__espacio {
	margin-top: clamp( 1.5rem, 2.36vw, 2.125rem );
}

.sjo-s--espacios.es-estilo-panel .sjo-s__espacio-num {
	width: clamp( 2.5rem, 3.06vw, 2.75rem );
	height: clamp( 2.5rem, 3.06vw, 2.75rem );
	border-radius: 0 10px 10px 10px;
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
}

.sjo-s--espacios.es-estilo-panel .sjo-s__espacio-tit {
	color: var( --sjo-s-tinta, #14181f );
	font-size: clamp( 1.0625rem, 1.53vw, 1.375rem );
	line-height: 1.273;
}

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

/* ---------------------------------------------------------------------------
 * Tour 360 — el panel que invita al recorrido
 * ------------------------------------------------------------------------ */

.sjo-s__tour {
	display: grid;

	/* 700 de texto y 580 de fotografía sobre el panel de 1240. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 46.77% );
	border-radius: var( --sjo-i-forma );
	background: var( --sjo-i-tenue );
	overflow: hidden;
}

/* Sin fotografía el texto ocupa el panel entero. */
.sjo-s--tour:not( .es-con-foto ) .sjo-s__tour {
	grid-template-columns: minmax( 0, 1fr );
}

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

.sjo-s--tour .sjo-s__rotulo {
	color: var( --sjo-i-rojo );
}

.sjo-s__tour-tit {
	margin: clamp( 0.625rem, 1.11vw, 1rem ) 0 0;
	max-width: 34rem;
	color: var( --sjo-i-azul );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.5rem, 2.22vw, 2rem );
	font-weight: 800;
	line-height: 1.1875;
	letter-spacing: -0.025em;
}

.sjo-s__tour-txt {
	margin: clamp( 1rem, 1.67vw, 1.5rem ) 0 0;
	max-width: 34rem;
	color: rgba( 0, 64, 120, 0.85 );
	font-size: clamp( 0.875rem, 1.04vw, 0.9375rem );
	line-height: 1.733;
}

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

.sjo-s__tour-enlace {
	color: var( --sjo-i-azul );
	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__tour-enlace::after {
	content: "\00a0\00a0\2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

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

.sjo-s__tour-medio {
	position: relative;

	/* Los 352 px del panel en la maqueta. Es un mínimo y no una altura fija:
	   si el texto de al lado crece, la fotografía crece con él. */
	min-height: clamp( 12.5rem, 24.44vw, 22rem );
}

/* Llena la celda: en escritorio el alto lo marca el texto del panel y la
   fotografía se recorta para acompañarlo. Cuando el panel se apila, el alto lo
   pone el « aspect-ratio » del contenedor. */
.sjo-s__tour-medio img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El velo azul de la maqueta: la fotografía sostiene la insignia, así que no
   puede competir con ella. */
.sjo-s__tour-medio::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 64, 120, 0.34 );
}

/* La insignia: un círculo rojo con «360°» dentro. Lo dibuja el CSS —es un
   círculo y dos cifras— para poder cambiar el texto sin tocar un gráfico. */
.sjo-s__tour-insignia {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp( 4.5rem, 7.22vw, 6.5rem );
	height: clamp( 4.5rem, 7.22vw, 6.5rem );
	border-radius: 50%;
	background: var( --sjo-i-rojo );
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: clamp( 1.125rem, 1.67vw, 1.5rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.0125em;
	transform: translate( -50%, -50% ) scale( var( --sjo-i-crece, 1 ) );
}

/* ---------------------------------------------------------------------------
 * Visor — los chips de los espacios y la vista del recorrido
 * ------------------------------------------------------------------------ */

/* El encabezado del visor reparte texto y bajada en dos columnas: el titular es
   corto y la explicación larga, y una debajo de otra dejaría media pantalla
   vacía. */
.sjo-s__visor-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--visor .sjo-s__encabezado {
	max-width: none;
}

.sjo-s__visor-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__visor-barra {
	position: relative;
	display: flex;
	align-items: center;
	margin: clamp( 1.5rem, 4.17vw, 3.75rem ) 0 0;
}

/* La tira de chips se desplaza de lado: trece nombres no caben ni en 1440 ni
   en 390, y partirlos en dos filas rompería la lectura de la barra. */
.sjo-s__visor-chips {
	display: flex;
	gap: 0.625rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;

	/* Sitio para el difuminado y las flechas de la derecha. */
	padding-inline-end: clamp( 3rem, 13.89vw, 12.5rem );
}

.sjo-s__visor-chips::-webkit-scrollbar {
	display: none;
}

.sjo-s__visor-chip {
	flex: none;
	padding: 0 1.375rem;
	height: clamp( 2.5rem, 3.06vw, 2.75rem );
	border: 1px solid var( --wp--preset--color--azul-100, #e3ebf2 );
	border-radius: 999px;
	background: 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;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sjo-s__visor-chip:hover,
.sjo-s__visor-chip:focus-visible {
	border-color: var( --sjo-i-celeste );
}

.sjo-s__visor-chip.es-activa,
.sjo-s__visor-chip[ aria-selected="true" ] {
	border-color: var( --sjo-i-rojo );
	background: var( --sjo-i-rojo );
	color: var( --wp--preset--color--base, #fff );
}

/* El difuminado del final de la tira, que avisa de que sigue habiendo chips.
   Toma el color de la sección, así que vale en blanco y en crema. */
.sjo-s__visor-flechas {
	position: absolute;
	inset-inline-end: 0;
	display: flex;
	gap: 0.75rem;
	padding-inline-start: clamp( 3rem, 8.33vw, 7.5rem );
	background: linear-gradient( to right, transparent, var( --sjo-s-fondo, #fff ) 42% );
}

.sjo-s__visor-flecha {
	display: grid;
	place-items: center;
	width: clamp( 2.5rem, 3.06vw, 2.75rem );
	height: clamp( 2.5rem, 3.06vw, 2.75rem );
	border: 0;
	border-radius: 50%;
	background: var( --sjo-i-celeste );
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading, Montserrat, sans-serif );
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sjo-s__visor-flecha.es-siguiente {
	background: var( --sjo-i-azul );
}

.sjo-s__visor-flecha:hover {
	background: var( --sjo-i-medio );
}

/* Sin nada que desplazar las flechas sobran: las apaga el guion. */
.sjo-s__visor-flechas[ hidden ] {
	display: none;
}

.sjo-s__vista {
	position: relative;
	display: grid;
	margin: clamp( 1.25rem, 3.33vw, 3rem ) 0 0;
	border-radius: var( --sjo-i-forma );
	overflow: hidden;
}

/* Sin JavaScript se ven las trece vistas seguidas; con él, solo la elegida. */
.sjo-s__vista + .sjo-s__vista {
	margin-top: clamp( 0.75rem, 1.11vw, 1rem );
}

/* Hay que decirlo: « display: grid » de la regla de arriba pisa el
   « display: none » que el navegador da a « [hidden] », y las trece vistas se
   quedarían apiladas aunque el guion las hubiera cerrado. */
.sjo-s__vista[ hidden ] {
	display: none;
}

.sjo-s__vista-medio {
	grid-area: 1 / 1;
}

.sjo-s__vista-medio img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1240 / 560;
	object-fit: cover;
}

/* El velo: sobre la panorámica a plena luz no se leería ni el nombre ni la
   nota. */
.sjo-s__vista-medio::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 26, 51, 0.54 );
}

.sjo-s__vista-cuerpo {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp( 1.5rem, 2.78vw, 2.5rem );
	text-align: center;
}

.sjo-s__vista-boton {
	display: grid;
	place-items: center;
	width: clamp( 5rem, 7.78vw, 7rem );
	height: clamp( 5rem, 7.78vw, 7rem );
	border-radius: 50%;
	background: var( --sjo-i-rojo );
	text-decoration: none;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

a.sjo-s__vista-boton:hover,
a.sjo-s__vista-boton:focus-visible {
	background: var( --wp--preset--color--rojo-oscuro, #ad001d );
	transform: scale( 1.06 );
}

.sjo-s__vista-insignia {
	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;
	letter-spacing: -0.015em;
}

.sjo-s__vista-tit {
	margin: clamp( 1.5rem, 2.78vw, 2.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.5rem, 2.22vw, 2rem );
	font-weight: 800;
	line-height: 1.1875;
	letter-spacing: -0.025em;
}

.sjo-s__vista-nota {
	margin: clamp( 0.5rem, 0.83vw, 0.75rem ) 0 0;
	max-width: 37.5rem;
	color: rgba( 255, 255, 255, 0.85 );
	font-size: clamp( 0.8125rem, 0.903vw, 0.8125rem );
	line-height: 1.538;
}

/* ---------------------------------------------------------------------------
 * Lo que se le añadió a «Áreas»: el numeral fantasma
 *
 * «Cómo moverte» son tres columnas con un numeral enorme en celeste encima del
 * gesto. Es la tira de siempre con otro numeral, no una sección nueva: por eso
 * es una clase más y no un tipo.
 * ------------------------------------------------------------------------ */

.sjo-s--areas.es-numeral-fantasma .sjo-s__area-num {
	color: rgba( 167, 198, 221, 0.7 );
	font-size: clamp( 2.75rem, 4.44vw, 4rem );
	line-height: 1.094;
	letter-spacing: -0.031em;

	/* El numeral hueco de «Áreas» va de contorno; este es macizo. */
	-webkit-text-stroke: 0;
}

.sjo-s--areas.es-numeral-fantasma.es-tira .sjo-s__area {
	row-gap: clamp( 0.5rem, 1.11vw, 1rem );
}

.sjo-s--areas.es-numeral-fantasma.es-tira .sjo-s__area-tit {
	color: var( --sjo-s-tinta, #14181f );
	font-size: clamp( 1.25rem, 1.81vw, 1.625rem );
	line-height: 1.231;
	letter-spacing: -0.023em;
}

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

@media ( max-width: 1023px ) {

	/* Con el lienzo estrecho, el encabezado y su fotografía se apilan: a media
	   pantalla la fotografía sale del tamaño de un sello. */
	.sjo-s--campus .sjo-s__campus-cabecera {
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 1.5rem, 3.33vw, 2rem );
	}

	.sjo-s--campus .sjo-s__campus-foto img {
		aspect-ratio: 16 / 9;
	}

	.sjo-s--espacios .sjo-s__espacios-cabecera {
		grid-template-columns: minmax( 0, 1fr );
		gap: clamp( 1rem, 2.78vw, 1.5rem );
	}

	/* La cifra deja de ir al margen y pasa a ser una línea bajo la bajada, con
	   el número y su rótulo uno al lado del otro, como en la maqueta móvil. */
	.sjo-s__espacios-cifra {
		grid-auto-flow: column;
		justify-content: start;
		justify-items: start;
		column-gap: 0.75rem;
		align-items: baseline;
		text-align: start;
	}

	.sjo-s__espacios-cifra-txt {
		margin-top: 0;
	}

	/* Cuatro tarjetas en una fila dejan cada una en una columna de dos palabras:
	   a este ancho van de dos en dos. */
	.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacios {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* El panel deja de montarse sobre la fotografía: a este ancho el solape se
	   comería media imagen. */
	.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-reja {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto {
		grid-row: 1;
	}

	.sjo-s--espacios.es-estilo-panel .sjo-s__espacios-foto img {
		aspect-ratio: 16 / 10;
	}

	.sjo-s--espacios.es-estilo-panel .sjo-s__espacios {
		grid-column: 1;
		grid-row: 2;
		margin: clamp( 1.5rem, 3.33vw, 2rem ) 0 0;
	}

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

	/* La fotografía pasa arriba: en el panel apilado, el texto va debajo de lo
	   que anuncia. */
	.sjo-s--tour .sjo-s__tour-medio {
		order: -1;
	}

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

	.sjo-s__visor-cabecera > .sjo-s__bajada {
		margin-top: 1.25rem;
	}
}

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

@media ( max-width: 781px ) {

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

	/* --- Espacios --- */

	/* La baldosa grande arriba, a todo el ancho, y las cuatro pequeñas en dos
	   por dos, como en la maqueta móvil. */
	.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacios {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.sjo-s--espacios.es-estilo-baldosas .sjo-s__espacio.es-destacado {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacios {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0.75rem;
	}

	.sjo-s--espacios.es-estilo-tarjetas .sjo-s__espacio {
		min-height: 0;
	}

	/* --- Tour --- */

	.sjo-s__tour-medio {
		min-height: 0;
		aspect-ratio: 326 / 200;
	}

	/* La insignia baja a la esquina de la fotografía: centrada, le quitaría
	   sitio a lo que se ve. */
	.sjo-s__tour-insignia {
		top: auto;
		bottom: 0;
		left: auto;
		right: clamp( 1rem, 6.15vw, 1.5rem );
		transform: translateY( 50% ) scale( var( --sjo-i-crece, 1 ) );
	}

	.sjo-s__tour-acciones {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	/* --- Visor --- */

	/* En móvil no hay flechas: la tira se arrastra con el dedo y dos botones de
	   44 px se comerían tres chips de sitio. Queda el difuminado, que es lo que
	   avisa de que sigue habiendo. */
	.sjo-s__visor-flechas {
		gap: 0;
		width: 6rem;
		padding-inline-start: 0;
		pointer-events: none;
	}

	.sjo-s__visor-flecha {
		display: none;
	}

	.sjo-s__visor-chips {
		padding-inline-end: 4rem;
	}

	.sjo-s__vista-medio img {
		aspect-ratio: 326 / 420;
	}
}