/*
 * Pie de página.
 *
 * El color, la tipografía y el espaciado salen de theme.json y de los atributos
 * de cada bloque, así que todo eso se sigue editando desde el Editor de Sitio.
 * Aquí solo queda lo que el marcado de bloques no sabe expresar: el logotipo en
 * blanco, los iconos de las sedes y un par de estados de interacción.
 *
 * Se carga en el front-end y también como estilo del editor.
 */

/* ---------------------------------------------------------------------------
 * La maquetación que antes generaba WordPress
 *
 * Mientras el pie fue un patrón de bloques, su composición —cada « display:flex »,
 * cada « gap », cada alineación— no estaba escrita en ninguna parte: WordPress
 * la deducía de los atributos de cada bloque y la servía en clases con hash
 * (« wp-container-core-group-is-layout-9c71b8b7 »). Al dejar de haber bloques,
 * esas clases y su CSS desaparecen.
 *
 * Son doce reglas y están aquí, colgadas de las clases del tema. Los valores no
 * son nuevos: son exactamente los que WordPress emitía.
 *
 * Van al principio del archivo a propósito, para que todo lo que viene después
 * pueda relevarlas sin pelear por especificidad.
 * ------------------------------------------------------------------------ */

/* El bloque raíz: columna centrada con el relleno global, y separación entre la
   reja, el filete y la barra legal.

   Las dos últimas líneas no son de WordPress: son el cinturón de seguridad de
   la «Disciplina de ancho» —ver el apartado 0—, y viven aquí porque el selector
   es el mismo y una hoja no debe declarar dos veces lo mismo. */
.sjo-footer > * {
	margin-block-start: 0;
	margin-block-end: 0;
	max-width: 100%;
	margin-inline: auto;
}

.sjo-footer > * + * {
	margin-block-start: var( --wp--preset--spacing--50 );
}

/* La reja de dos columnas. « nowrap » es de la maqueta: en escritorio las dos
   columnas no se parten; el apilado en pantallas menores lo decide más abajo la
   consulta de medios que ya existía. */
.sjo-footer__reja {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --wp--preset--spacing--50 );
}

.sjo-footer__marca {
	flex-basis: 32.26%;
}

.sjo-footer__mapa {
	flex-basis: 64.52%;
}

.sjo-footer__reja > .wp-block-column {
	flex-grow: 1;
	min-width: 0;
}

/* Las dos sedes, una al lado de la otra. */
.sjo-footer__sedes {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	align-items: flex-start;
	margin-top: var( --wp--preset--spacing--50 );
}

.sjo-footer__sede {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var( --wp--preset--spacing--20 );
}

/* Teléfono y «Cómo llegar», en la misma línea. */
.sjo-footer__datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--30 );
}

/* El mapa del sitio: cuatro columnas repartidas a lo ancho. */
.sjo-footer__cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--40 );
}

/* Las dos últimas líneas son del apartado 2: las cuatro columnas reparten el
   ancho por igual y se reordenan solas en pantallas intermedias, sin depender de
   un punto de ruptura fijo. Viven aquí porque el selector es el mismo. */
.sjo-footer__col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var( --wp--preset--spacing--30 );
	flex: 1 1 150px;
	min-width: 150px;
}

/* Los enlaces de cada columna, en vertical y sin separación: el aire lo pone el
   interlineado de cada uno. */
.sjo-footer .wp-block-navigation,
.sjo-footer .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* El margen de arriba es del apartado 4 y va fluido en vez de fijo: 88 px en
   escritorio, la medida de la maqueta, y baja hasta 2,5 rem en móvil, donde un
   hueco así partiría el pie en dos. */
.sjo-footer__extras {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
	margin-top: clamp( 2.5rem, 6vw, 88px );
}

/* La fila de botones. Más abajo se releva por una rejilla de cuatro pistas, que
   es lo que alinea cada botón con el encabezado que tiene encima.

   Las cuatro últimas líneas son del apartado 4: anulan cualquier relleno o
   margen que pudiera desplazar los botones respecto a la guía del contenido. */
.sjo-footer__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	justify-content: flex-start;
	align-items: center;
	margin-inline: 0;
	padding-inline: 0;
}

/* La barra legal: copyright a la izquierda, redes a la derecha.

   Las dos últimas líneas son del apartado 4: la barra comparte con las tarjetas
   de campus la misma columna de 1240 px —ambas son «alignwide»—, así que el
   copyright arranca justo en el borde izquierdo de la tarjeta «Campus
   Principal» y las redes rematan en el derecho: una sola guía vertical. */
.sjo-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var( --wp--preset--spacing--30 );
	padding-inline: var( --sjo-bar-inset );
}

.sjo-footer__redes {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Los hijos de cada caja flexible no traen margen propio.
 *
 * La separación la pone el « gap » de su contenedor, como hacía el layout de
 * bloques, que emitía « > * { margin-block: 0 } » en cada grupo. Sin esto se
 * suman los márgenes por omisión de « p » y « h2 » y el pie crece a lo alto. */
.sjo-footer__reja > *,
.sjo-footer__sedes > *,
.sjo-footer__sede > *,
.sjo-footer__datos > *,
.sjo-footer__cols > *,
.sjo-footer__col > *,
.sjo-footer__extras > *,
.sjo-footer__bar > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Ni el logotipo ni los iconos de redes arrastran interlineado.
 *
 * Lo ponía a cero la hoja de « core/site-logo » y la de « core/social-links ».
 * Sin ellas, el hueco del descendente estiraba ocho píxeles la caja del
 * logotipo y otros ocho la barra legal. */
.sjo-footer__logo,
.sjo-footer__redes a {
	display: block;
	line-height: 0;
}

/* Los iconos se pintan del color del texto, no de negro.
 *
 * Un « <svg> » sin « fill » se dibuja en negro. El relleno lo ponía la hoja del
 * bloque « core/social-links », que solo se cargaba porque había un bloque; al
 * dejar de haberlo, las cinco redes salían en negro sobre el azul del pie. */
.sjo-footer__redes svg {
	fill: currentColor;
}

/* Los enlaces del pie van sin subrayar.
 *
 * Lo quitaba la hoja del bloque « core/navigation », que solo se cargaba porque
 * había un bloque de navegación. El subrayado de los estados de interacción lo
 * pone más abajo este mismo archivo. */
.sjo-footer a {
	text-decoration: none;
}

/* El color de los enlaces del pie.
 *
 * Lo ponía « has-link-color » junto a una clase « wp-elements-N » que WordPress
 * numeraba por orden de aparición y cuya regla generaba al vuelo. Sin bloques no
 * hay ni clase ni regla, y el teléfono y el «Cómo llegar» de cada sede se
 * quedaban en azul oscuro sobre azul: invisibles.
 *
 * « :not(.wp-element-button) » es del original: los botones de acceso llevan su
 * propio color y no deben heredar este. */
.sjo-footer a:where( :not( .wp-element-button ) ) {
	color: var( --wp--preset--color--base, #fff );
}
/* ---------------------------------------------------------------------------
 * La tipografía que antes iba en atributos de bloque
 *
 * Los dos encabezados y el teléfono llevaban su peso y su interletraje en un
 * « style » en línea que escribía el editor. Aquí están, con los mismos valores.
 * ------------------------------------------------------------------------ */

.sjo-footer__sede-nombre {
	font-style: normal;
	font-weight: 600;
	line-height: 1.571;
}

.sjo-footer__col-titulo {
	font-style: normal;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sjo-footer__tel {
	font-style: normal;
	font-weight: 600;
}

.sjo-footer {
	/* Color de fondo, con la misma convención que el bloque de cabecera: una
	   variable local que hereda del token de theme.json y guarda un valor de
	   respaldo por si el pie se usa fuera del theme. */
	--sjo-azul: var( --wp--preset--color--azul, #004078 );

	/* Canalón lateral. Es el mismo valor que usa la cabecera, para que las dos
	   franjas respiren igual a cualquier ancho. El relleno global del sitio se
	   queda en 1 rem y en tablet dejaba el contenido casi pegado al borde; esta
	   regla lo releva porque footer.css carga después de las clases del núcleo,
	   con la misma especificidad. */
	--sjo-gutter: clamp( 1.25rem, 6.94vw, 100px );

	/* Azul de los botones de acceso en móvil. Ver la regla de @media 781px. */
	--sjo-boton-movil: #00558c;

	/* El pie ocupa el ancho completo de la pantalla, igual que la cabecera: no
	   encierra su contenido en una columna centrada, solo respeta el canalón.
	   Se releva aquí el ancho «wide» global en lugar de pelear con la
	   especificidad de las clases del núcleo, porque la disposición
	   «constrained» de dentro del pie lee esta variable y se ajusta sola. */
	--wp--style--global--wide-size: 100%;

	/* Montserrat es la tipografía de todo el texto del pie, igual que en la
	   cabecera: la maqueta no usa otra en ninguna de las dos franjas. */
	font-family: var( --wp--preset--font-family--heading, inherit );

	background-color: var( --sjo-azul );
	padding-inline: var( --sjo-gutter );
	padding-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--50 );

	/* Contención: pase lo que pase dentro del pie, no puede generar barra de
	   desplazamiento horizontal en la página. «clip» recorta sin crear un
	   contenedor de scroll, así que no rompe position:sticky de nada de fuera. */
	overflow-x: clip;

	/* Galón del acordeón de listas en móvil. Va como variable para no repetir
	   el SVG en cada regla. */
	--sjo-icon-chevron: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	--sjo-ease: 180ms cubic-bezier( 0.4, 0, 0.2, 1 );

	/* Esquina inferior izquierda de los botones. */
	--sjo-radio-sutil: var( --wp--custom--radius--md, 8px );

	/* Guía vertical de la barra inferior respecto a las tarjetas de campus.
	   0 = a ras de la caja de la tarjeta (los rectángulos de color se alinean
	   entre sí). Cámbialo a var( --wp--preset--spacing--40 ) si prefieres que
	   se alinee con el texto de dentro de la tarjeta en vez de con su borde. */
	--sjo-bar-inset: 0px;
}

/* ---------------------------------------------------------------------------
 * 0. Disciplina de ancho
 *
 * La franja va a sangre y su contenido también: cada fila ocupa todo el ancho
 * que deja el canalón. Esto es el cinturón de seguridad para que un bloque
 * añadido desde el editor sin alineación, o un texto largo que estire una fila
 * flexible, no se salga de esa caja.
 * ------------------------------------------------------------------------ */

/* El tope de ancho del bloque raíz está arriba, con el resto de « .sjo-footer >
   * »: el selector es el mismo y no se declara dos veces. */

/* Los elementos flexibles arrancan con min-width:auto y se niegan a encogerse
   por debajo de su contenido: es la vía habitual por la que una fila se sale.
   Sin tope de ancho a propósito: las filas ya se reparten y se parten solas. */
.sjo-footer .wp-block-group,
.sjo-footer .wp-block-column,
.sjo-footer .wp-block-navigation,
.sjo-footer .wp-block-buttons {
	min-width: 0;
}

/* Ninguna etiqueta larga («Convenios Internacionales») debe empujar su columna. */
.sjo-footer .wp-block-navigation-item__label,
.sjo-footer .wp-block-button__link {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * 1. Marca
 * ------------------------------------------------------------------------ */


/* Los cuerpos de 11, 13 y 17 px de la maqueta no están en la escala de
   theme.json, así que viajan en CSS y no en los atributos del bloque. El
   !important no es capricho: WordPress escribe las clases de preset como
   « .has-small-font-size{font-size:…!important} », y es la única forma de
   relevarlas sin sacar el preset del marcado. */

/* Lema: Montserrat Medium 17/26 en el azul claro, a dos líneas. Es la única
   pieza del pie que sube del cuerpo de 13 px, y ese salto es lo que la
   convierte en la voz de la marca en vez de en un dato más. */
.sjo-footer__lema {
	max-width: 340px;
	margin-top: 22px;
	margin-bottom: 30px;
	font-size: 17px !important;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.2px;
}

/* En «solo logotipos» los iconos no llevan color propio: heredan el del pie. */
.sjo-footer .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: currentColor;
	transition: opacity var( --sjo-ease );
}

.sjo-footer .wp-block-social-links.is-style-logos-only .wp-social-link svg {
	width: 20px;
	height: 20px;
}

.sjo-footer .wp-block-social-links .wp-social-link:hover,
.sjo-footer .wp-block-social-links .wp-social-link:focus-within {
	opacity: 0.7;
}

/* ---------------------------------------------------------------------------
 * 2. Columnas de enlaces
 * ------------------------------------------------------------------------ */

/* El reparto de ancho de las cuatro columnas está arriba, con el resto de
   « .sjo-footer__col »: el selector es el mismo y no se declara dos veces. */

/* Encabezado de columna: Montserrat SemiBold 11/16 en versalitas, blanco y muy
   espaciado. Es el rótulo más pequeño del pie y el interletraje es lo que lo
   mantiene legible a ese cuerpo. */
.sjo-footer__col > .wp-block-heading {
	font-size: 11px !important;
	line-height: 16px;
	letter-spacing: 1.6px;
}

/* Los enlaces de las listas comparten estilo con la dirección de los campus:
   Inter Regular 13/24 en el azul claro atenuado, no en blanco pleno. El blanco
   queda reservado para los encabezados de columna, los nombres de sede y los
   teléfonos, que es la jerarquía de la maqueta.

   Hace falta este nivel de especificidad porque el grupo del pie declara el
   color de enlace en blanco para todo su interior; con tres clases (0,3,1) se
   releva esa regla (0,2,0) sin recurrir a !important. */
.sjo-footer .sjo-footer__col .wp-block-navigation a:where( :not( .wp-element-button ) ) {
	color: var( --wp--preset--color--azul-200, #bcd0e0 );
	font-size: 13px !important;
	line-height: 24px;
	transition: color var( --sjo-ease );
}

/* Al activarse sube a blanco: el subrayado por sí solo apenas se percibe sobre
   un tono tan cercano al fondo. */
.sjo-footer .sjo-footer__col .wp-block-navigation a:where( :not( .wp-element-button ) ):hover,
.sjo-footer .sjo-footer__col .wp-block-navigation a:where( :not( .wp-element-button ) ):focus-visible {
	color: var( --wp--preset--color--base, #ffffff );
}

.sjo-footer .wp-block-navigation a:hover,
.sjo-footer .wp-block-navigation a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 3. Tarjetas de sede
 * ------------------------------------------------------------------------ */

/* Las sedes van sin fondo, sin recuadro y —desde esta versión del diseño— sin
   iconos: solo texto bajo el logotipo y el lema, en la misma guía vertical de
   la columna de marca. En escritorio se apilan, porque la columna de marca es
   un tercio y no da para dos a la par. */
.sjo-footer__sedes > .sjo-footer__sede {
	flex: 1 1 100%;
	max-width: 340px;
}

/* Las tres líneas de la tarjeta van a 13/20, que es el cuerpo base del pie. El
   nombre de sede se distingue por el peso y el blanco, no por el tamaño. */
.sjo-footer__sede > .wp-block-heading {
	font-size: 13px !important;
	line-height: 20px;
	letter-spacing: 0.6px;
}

.sjo-footer__dir,
.sjo-footer__tel,
.sjo-footer__cta {
	font-size: 13px !important;
	line-height: 20px;
}

/* Teléfono y «Cómo llegar» comparten fila, con 12 px a cada lado del punto
   que los separa. */
.sjo-footer .sjo-footer__datos {
	column-gap: 12px;
	row-gap: var( --wp--preset--spacing--20 );
}

.sjo-footer__datos > p {
	margin: 0;
}

/* El punto separador es decorativo, así que se dibuja aquí y no llega al
   lector de pantalla: entre los dos datos solo hay una pausa visual. */
.sjo-footer__cta::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-inline-end: 12px;
	vertical-align: 0.25em;
	border-radius: 50%;
	background-color: currentColor;
}

.sjo-footer__tel a {
	text-decoration: none;
}

.sjo-footer__tel a:hover,
.sjo-footer__tel a:focus-visible {
	text-decoration: underline;
}

/* «Cómo llegar →» va en el mismo azul claro que la dirección: en esta versión
   del diseño el acento de la tarjeta es el teléfono en blanco, no este enlace,
   así que aquí basta con el subrayado al activarse. */
.sjo-footer__cta a {
	text-decoration: none;
	transition: color var( --sjo-ease );
}

.sjo-footer__cta a:hover,
.sjo-footer__cta a:focus-visible {
	color: var( --wp--preset--color--base, #ffffff );
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 4. Separadores y barra inferior
 * ------------------------------------------------------------------------ */

/* El filete que cierra el pie: el azul claro de la paleta a un 22 %, que sobre
   la franja queda como una línea presente pero sin peso.
   El estilo «ancho» del propio bloque es lo que lo lleva de lado a lado de la
   columna: sin él, «wp-block-styles» lo deja en 100 px centrados. */
.sjo-footer__rule {
	border-color: var( --wp--preset--color--azul-200, #bcd0e0 );
	opacity: 0.22;
}

/* La guía vertical de la barra inferior y la alineación de la fila de botones
   están arriba, con el resto de « .sjo-footer__bar » y « .sjo-footer__acciones »:
   el selector es el mismo y no se declara dos veces. */

/* Barra inferior: copyright a la izquierda, en la guía del contenido, y redes
   sociales al otro extremo de la misma línea. El margen automático mantiene los
   iconos pegados al borde derecho aunque la fila se parta en dos. */
.sjo-footer__bar > p {
	margin: 0;
	font-size: 13px !important;
	line-height: 20px;
}

.sjo-footer .sjo-footer__bar > .wp-block-social-links {
	margin-inline-start: auto;
	gap: 18px;
}

@media ( max-width: 781px ) {

	.sjo-footer__bar > .wp-block-social-links {
		margin-inline-start: 0;
	}
}

/* La separación respecto a la lista de enlaces está arriba, con el resto de
   « .sjo-footer__extras »: el selector es el mismo y no se declara dos veces. */

/* Bajo la lista de enlaces los botones ocupan la fila entera: es lo que les
   permite entrar los cuatro en una sola línea dentro de la columna. */
.sjo-footer__extras > .sjo-footer__acciones {
	flex-basis: 100%;
}

/* Enlaces destacados.
 *
 * La maqueta los pasa de píldora rellena a píldora de contorno: fondo
 * transparente, un filete del azul claro al 30 % y el rótulo en blanco. Sobre
 * la franja azul el borde basta para dibujar la forma, y así el único bloque de
 * color del pie sigue siendo el logotipo.
 *
 * El color ya no viaja en los atributos del bloque —se quitó del patrón—, de
 * modo que aquí no hace falta ningún !important para relevar las clases de
 * preset que genera WordPress. */
.sjo-footer__acciones .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 40 px de alto, pero como mínimo: sobre la retícula de cuatro columnas un
	   rótulo largo se acomoda en dos líneas y con la altura fija se recortaría. */
	min-height: 40px;
	padding-block: 4px;
	padding-inline: 20px;
	border: 1px solid rgba( 201, 220, 234, 0.3 );
	/* Solo la esquina superior izquierda va a escuadra; las otras tres,
	   redondas. Es la forma que llevan los botones en el resto del sitio —la
	   banda de cierre, el UI Kit— y la inferior izquierda estaba quedándose en
	   un radio sutil que rompía el parecido.

	   Las tapas van a 25 px —la mitad de un botón de dos líneas— y no a la
	   mitad de los 40 px de uno de una: cuando los dos radios de un mismo lado
	   suman más que ese lado, el CSS reduce los cuatro a la vez con un mismo
	   factor, así que un botón de una línea los baja solo a 20 px y la tapa
	   sale exacta en los dos casos. Escribir « 999px » rompe justo por ahí: el
	   factor se vuelve tan pequeño que la píldora se queda en nada. */
	border-radius: 0 25px 25px 25px;
	background-color: transparent;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.2px;
	text-align: center;
	transition: background-color var( --sjo-ease ), border-color var( --sjo-ease );
}

/* Al activarse el filete sube a blanco y entra un velo claro detrás del
   rótulo: el contorno se afirma sin que la píldora cambie de color. */
.sjo-footer__acciones .wp-block-button__link:hover,
.sjo-footer__acciones .wp-block-button__link:focus-visible {
	border-color: var( --wp--preset--color--base, #ffffff );
	background-color: rgba( 255, 255, 255, 0.1 );
	color: var( --wp--preset--color--base, #ffffff );
}

/* ---------------------------------------------------------------------------
 * 4b. Geometría de escritorio
 *
 * Las medidas exactas de la maqueta (lienzo de 1440 px). Van en su propio
 * bloque para no tocar el pie apilado de tablet y móvil, que tiene su propio
 * ritmo y sus propios puntos de ruptura más abajo.
 * ------------------------------------------------------------------------ */

@media ( min-width: 1200px ) {

	/* 88 px de aire arriba y 67 px abajo. */
	.sjo-footer {
		padding-top: 88px;
		padding-bottom: 67px;
	}

	/* Las tres líneas de cada tarjeta de sede van a 4 px, que con la altura de
	   línea de 20 px da los 24 px de guía de la maqueta. */
	.sjo-footer .sjo-footer__sede {
		gap: 4px;
	}

	/* Los botones caen sobre la misma retícula de cuatro columnas que el mapa
	   del sitio: cada uno arranca a plomo con el encabezado que tiene encima.
	   Es una rejilla y no una fila flexible porque solo así las salidas
	   coinciden pase lo que pase con el largo de cada rótulo.

	   Las cuatro pistas y la calle de 24 px son las mismas que reparte
	   « .sjo-footer__cols » (flex: 1 1 150px con blockGap 40), de modo que las
	   dos filas comparten guía sin tener que declararla dos veces.

	   Los dos nombres de clase son obligados: el núcleo escribe
	   « body .is-layout-flex { display: flex } » con especificidad (0,1,1) y un
	   selector de una sola clase perdería sin avisar. */
	.sjo-footer .sjo-footer__acciones {
		display: grid;
		grid-template-columns: repeat( 4, 1fr );
		gap: 24px;
	}

	/* El botón no se estira hasta el final de su pista: mide lo que mide su
	   rótulo y se alinea al inicio, como en la maqueta. */
	.sjo-footer__acciones > .wp-block-button {
		justify-self: start;
		min-width: 0;
	}

	/* 51 px del filete a los botones y 32 px del filete a la línea legal. */
	.sjo-footer__rule {
		margin-top: 51px;
		margin-bottom: 32px;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Adaptación a pantallas pequeñas
 *
 * El bloque Columnas del núcleo ya apila la columna de marca y la de enlaces
 * por debajo de 782 px; lo que falta es ordenar lo de dentro, que es donde el
 * pie se estrecha de verdad.
 * ------------------------------------------------------------------------ */

/* TABLET (hasta 1199 px): la marca pasa a ocupar el ancho completo y las cuatro
   listas se reparten en DOS columnas. El !important es obligado: el núcleo fija
   « flex-wrap: nowrap !important » a partir de 782 px y el ancho de cada columna
   viaja en estilo en línea. Gana por especificidad, no por el !important. */
@media ( max-width: 1199px ) {

	.sjo-footer .wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: var( --wp--preset--spacing--60 );
	}

	.sjo-footer .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Las cuatro listas se quedan en una sola fila.
	 *
	 * Al apilar la marca, los enlaces heredan el ancho completo en vez del 68 %
	 * que tienen en escritorio: a 782 px salen a 172 px por lista y a partir de
	 * 900 px superan los 192 px que tienen en escritorio. Repartirlas en dos
	 * filas desaprovecharía justo el espacio que se acaba de ganar. Basta con no
	 * tocarlas: la regla base (flex: 1 1 150px) ya las reparte de cuatro en
	 * cuatro y las plegaría sola si el hueco no diera.
	 *
	 * Sedes y botones sí van de dos en dos: su contenido es más ancho que el de
	 * un enlace de menú y a cuatro por fila quedarían ilegibles. */
	.sjo-footer__sedes > .sjo-footer__sede,
	.sjo-footer__acciones > .wp-block-button {
		flex: 1 1 40%;
	}

	.sjo-footer__sedes > .sjo-footer__sede {
		max-width: none;
	}

	/* --- Centrado ---------------------------------------------------------
	 *
	 * Con las columnas apiladas, el contenido pasa a leerse como una pila de
	 * bloques centrados en lugar de una retícula alineada a la izquierda. El
	 * text-align cubre los textos; los contenedores flexibles no lo heredan y
	 * necesitan su propia alineación, uno por uno. */

	.sjo-footer {
		text-align: center;
	}

	.sjo-footer__cols,
	.sjo-footer__sedes,
	.sjo-footer__datos,
	.sjo-footer__extras,
	.sjo-footer__acciones,
	.sjo-footer__bar,
	.sjo-footer .wp-block-social-links {
		justify-content: center;
	}

	/* La navegación vertical del núcleo trae su propio align-items, así que hay
	   que declararlo aquí: el text-align del contenedor no le alcanza.
	   En un contenedor en columna el eje transversal es el horizontal, donde no
	   existe línea base que compartir, así que « baseline » se resuelve como
	   inicio y los enlaces quedan alineados a la izquierda dentro de su columna
	   centrada, a plomo con los títulos del acordeón. */
	.sjo-footer .wp-block-navigation {
		align-items: baseline;
	}

	/* La columna de enlaces entera queda alineada a la izquierda: el título y
	   sus enlaces comparten guía. El resto del pie —logotipo, lema, sedes,
	   botones y copyright— sigue centrado. */
	.sjo-footer__col {
		text-align: start;
	}

	.sjo-footer__lema {
		max-width: 32ch;
		margin-inline: auto;
	}

	/* Separación entre la fila de listas de arriba y la de abajo. Con el hueco
	   de 1 rem que traía el bloque, los cuatro conjuntos se leían como una sola
	   masa; así cada pareja se distingue de la de encima. */
	.sjo-footer__cols {
		row-gap: var( --wp--preset--spacing--70 );
	}
}

/* MÓVIL (hasta 781 px): una sola columna para las listas, que además se pliegan
   en acordeón. 781 es el punto en el que el propio núcleo apila el bloque
   Columnas, así que no hay que forzarlo. */
@media ( max-width: 781px ) {

	/* En móvil las píldoras usan un azul propio, pedido para esta vista, y ganan
	   aire arriba y abajo: 14 px llevan el área de toque a 50 px, por encima de
	   los 44 px que recomienda la WCAG para objetivos táctiles.

	   Aviso registrado: #00558c está más cerca del fondo del pie que el
	   #006ba1 de escritorio —1,37:1 contra 1,83:1—, así que la píldora se
	   recorta menos sobre la franja. El rótulo no sufre: blanco sobre #00558c
	   da 7,7:1 y cumple incluso AAA.

	   No es un token de la maqueta, es un ajuste de móvil, por eso vive en una
	   variable propia y no en la paleta de theme.json. */
	.sjo-footer__acciones .wp-block-button__link {
		/* El rótulo se centra y se acomoda en varias líneas si hace falta. */
		display: block;
		border-color: transparent;
		background-color: var( --sjo-boton-movil );
		padding-block: 14px;
		text-align: center;
	}

	.sjo-footer__acciones .wp-block-button__link:hover,
	.sjo-footer__acciones .wp-block-button__link:focus-visible {
		background-color: var( --wp--preset--color--base, #ffffff );
		color: var( --sjo-boton-movil );
	}

	/* Cada lista ocupa una fila entera: es un acordeón, y una fila plegable a
	   media anchura no se lee como tal. Su línea superior la separa de la de
	   arriba y marca dónde se puede pulsar. */
	.sjo-footer__col {
		flex-basis: 100%;
		min-width: 0;
		border-top: 1px solid rgba( 255, 255, 255, 0.18 );
	}

	/* En acordeón las secciones se separan con su propia línea divisoria, así
	   que el hueco entre filas sobra; el aire va fuera del bloque, despegándolo
	   de las sedes que quedan encima y de los botones de debajo. */
	.sjo-footer__cols {
		row-gap: 0;
		margin-top: 2rem;
		margin-bottom: 4rem;
	}

	/* --- Acordeón -------------------------------------------------------- */


	.sjo-footer__col:last-child {
		border-bottom: 1px solid rgba( 255, 255, 255, 0.18 );
	}

	.sjo-footer__col > .wp-block-heading {
		margin: 0;
	}

	/* El botón lo inserta footer.js dentro del <h2>, sin sustituirlo: ocupa
	   toda la fila para que el área pulsable sea la sección entera. */
	.sjo-footer__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		width: 100%;
		margin: 0;
		padding: 0.95rem 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		text-align: start;
		cursor: pointer;
	}

	.sjo-footer__toggle::after {
		content: "";
		flex: none;
		width: 0.9em;
		height: 0.9em;
		background-color: currentColor;
		transition: transform var( --sjo-ease );
		-webkit-mask: var( --sjo-icon-chevron ) no-repeat center / contain;
		mask: var( --sjo-icon-chevron ) no-repeat center / contain;
	}

	.sjo-footer__toggle[ aria-expanded="true" ]::after {
		transform: rotate( 180deg );
	}

	.sjo-footer__col.is-collapsed .wp-block-navigation {
		display: none;
	}

	.sjo-footer__col .wp-block-navigation {
		padding-bottom: var( --wp--preset--spacing--40 );
	}

	/* Teléfono y «Cómo llegar» dejan de compartir línea: en 320 px no caben y
	   partirlos a la fuerza deja huérfano el número. Apilados, el punto que los
	   separaba sobra. */
	.sjo-footer__datos {
		flex-direction: column;
		align-items: center;
	}

	.sjo-footer__cta::before {
		display: none;
	}

	/* Los enlaces del pie son el elemento táctil más pequeño de la página: a
	   0,9 rem sin relleno quedan en unos 22 px de alto, la mitad del objetivo
	   recomendado. El relleno vertical los acerca a los 40 px sin romper el
	   ritmo, porque se compensa bajando el hueco de la lista. */
	.sjo-footer .wp-block-navigation .wp-block-navigation-item__content {
		padding-block: 0.45rem;
	}

	.sjo-footer .wp-block-navigation {
		gap: var( --wp--preset--spacing--20 );
	}
}

/* ---------------------------------------------------------------------------
 * MÓVIL · el pie, como lo dibuja la maqueta de 390
 *
 * Lo que había estaba centrado y con las sedes por delante del acordeón. La
 * maqueta de móvil hace otra cosa, y tiene razón: **todo alineado a la
 * izquierda** —un pie centrado en una pantalla estrecha se lee como un cartel,
 * no como un índice— y el acordeón justo después del lema, que es lo que la
 * gente viene a buscar.
 *
 * Orden de la maqueta: marca, lema, acordeón, sedes, enlaces sueltos, redes y
 * copyright.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	/* Se deshace el centrado que llega de la franja de tableta. */
	.sjo-footer,
	.sjo-footer__col {
		text-align: start;
	}

	.sjo-footer__cols,
	.sjo-footer__sedes,
	.sjo-footer__datos,
	.sjo-footer__extras,
	.sjo-footer__acciones,
	.sjo-footer__bar,
	.sjo-footer .wp-block-social-links {
		justify-content: flex-start;
	}

	/* El lema pierde su centrado con el resto de la alineación a la izquierda,
	   pero se declara más abajo, junto a su « order »: es el mismo selector. */

	.sjo-footer__datos {
		align-items: flex-start;
	}

	/* El orden de la maqueta: marca, lema, acordeón, sedes y enlaces sueltos.

	   En escritorio el pie son dos columnas —a la izquierda la marca y las
	   sedes, a la derecha el acordeón y los enlaces— y al apilarse en móvil sale
	   el orden de las columnas, no el de la maqueta: las sedes quedan por
	   delante del acordeón.

	   Se arregla dejando que **las dos columnas desaparezcan como caja**. Con
	   « display: contents » sus piezas pasan a ser hijas directas del grupo, que
	   se vuelve una sola pila, y ahí ya se pueden ordenar entre ellas. Es lo
	   único que permite intercalar algo de una columna entre dos cosas de la
	   otra sin tocar el marcado.

	   El « :has » apunta a ese grupo y no a los otros dos « alignwide » del pie
	   —el filete y la barra final—, que no llevan acordeón dentro. */
	.sjo-footer > div:has( .sjo-footer__cols ) {
		flex-direction: column;
	}

	.sjo-footer > div:has( .sjo-footer__cols ) > div {
		display: contents;
	}

	.sjo-footer__logo {
		order: 1;
	}

	.sjo-footer__lema {
		order: 2;

		/* Y deja de ir centrado, como todo lo demás en esta pantalla. */
		margin-inline: 0;
	}

	.sjo-footer__cols {
		order: 3;
		margin-top: 2.5rem;
		margin-bottom: 2.5rem;
	}

	.sjo-footer__sedes {
		order: 4;
	}

	.sjo-footer__extras {
		order: 5;
	}

	/* El rótulo de cada sección, en versales pequeñas y espaciadas. El botón
	   hereda « font » del título y con eso se llevaba también su cuerpo: aquí se
	   dice lo que tiene que ser. */
	.sjo-footer__toggle {
		padding-block: 1.1rem;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	/* Y el signo de la derecha es un « + » que se vuelve « − », no una flecha.
	   Se dibuja con dos barras: una horizontal siempre y una vertical que
	   desaparece al abrir. */
	.sjo-footer__toggle::after {
		position: relative;
		width: 11px;
		height: 11px;

		/* Se descarta el galón que trae de escritorio: aquí el signo se dibuja
		   con dos degradados, no con una máscara. */
		background-color: transparent;
		-webkit-mask: none;
		mask: none;
		background-image:
			linear-gradient( currentColor, currentColor ),
			linear-gradient( currentColor, currentColor );
		background-repeat: no-repeat;
		background-position: center center, center center;
		/* La horizontal y la vertical. */
		background-size: 11px 1.5px, 1.5px 11px;
		transition: background-size var( --sjo-ease );
	}

	.sjo-footer__toggle[ aria-expanded="true" ]::after {
		/* La vertical se encoge hasta desaparecer: queda el menos. */
		background-size: 11px 1.5px, 1.5px 0;
		transform: none;
	}

	/* Los enlaces sueltos del final dejan de ser píldoras: en la maqueta son
	   texto, uno bajo otro, a la izquierda. Cuatro píldoras a todo el ancho
	   pesan más que el resto del pie junto y no son más pulsables. */
	.sjo-footer__acciones {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.sjo-footer__acciones .wp-block-button__link {
		display: inline-block;
		padding: 0.55rem 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		color: var( --wp--preset--color--azul-tenue, #c9dcea );
		font-size: 0.875rem;
		font-weight: 400;
		text-align: start;
	}

	.sjo-footer__acciones .wp-block-button__link:hover,
	.sjo-footer__acciones .wp-block-button__link:focus-visible {
		background-color: transparent;
		color: var( --wp--preset--color--base, #ffffff );
		text-decoration: underline;
	}

	/* Las dos sedes, una debajo de otra.

	   En tableta van a dos columnas y ahí funciona, pero en 390 px cada una se
	   queda en 163 px y «Los Claveles 112, Urb. California, Víctor Larco,
	   Trujillo» sale en cuatro líneas. La maqueta de móvil las apila, y con
	   razón. */
	.sjo-footer__sedes > .sjo-footer__sede {
		flex: 1 1 100%;
	}

	/* La barra del final: primero las redes y debajo el copyright, las dos a la
	   izquierda. */
	.sjo-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	/* Dos clases, no una: el núcleo escribe la justificación de este bloque con
	   « .is-content-justification-* » y un selector de una sola clase pierde. */
	.sjo-footer .sjo-footer__bar {
		align-items: flex-start;
	}

	.sjo-footer .sjo-footer__bar .wp-block-social-links {
		order: -1;
		justify-content: flex-start;
		margin-inline: 0;
	}
}

/* MÓVIL ESTRECHO (hasta 539 px): una sola columna.
 *
 * De 540 a 781 px las dos columnas funcionan: quedan unos 240 px por columna,
 * suficientes para una dirección o un rótulo de menú. Por debajo se caen a
 * ~150 px, donde «Los Claveles 112 · 044-283151» o «Convenios Internacionales»
 * se parten en tres líneas y el pie se vuelve ilegible. Ahí manda el contenido,
 * no la retícula. */
@media ( max-width: 539px ) {

	/* Los botones sí caen a uno por fila: un rótulo como «Infraestructura –
	   Tour 360» con su icono no es legible en 150 px. Los campus se quedan en
	   dos columnas a cualquier ancho, por decisión de diseño. */
	.sjo-footer__acciones > .wp-block-button {
		flex-basis: 100%;
	}

	/* Con las columnas tan estrechas, el hueco entre las dos sedes se recorta
	   para devolverle ancho útil a cada una. */
	.sjo-footer__sedes {
		column-gap: var( --wp--preset--spacing--30 );
		row-gap: var( --wp--preset--spacing--50 );
	}
}

/* ---------------------------------------------------------------------------
 * 6. Movimiento reducido
 * ------------------------------------------------------------------------ */

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

	.sjo-footer * {
		transition-duration: 1ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * El lema, un punto más pequeño en móvil
 *
 * Los cuerpos del pie viajan en píxeles con « !important » —es la única forma
 * de relevar las clases de preset de WordPress—, así que no bajan con la raíz
 * de style.css. Se ajusta el lema, que es el único que sube del cuerpo del
 * pie; los de 11 y 13 se quedan, porque ya son el mínimo legible del diseño y
 * un punto menos los deja en 10 y 12.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

	.sjo-footer__lema {
		font-size: 15px !important;
		line-height: 24px;
	}
}