/*
 * Theme Name: UTS
 * Theme URI: https://www.uts.edu.co/
 * Description: Tema de bloques a medida para la Institución Universitaria Tecnológica de Santander.
 * Version: 1.0.0
 * Author: Equipo UTS
 * Text Domain: uts
 * Domain Path: /languages
 * Requires at least: 6.0
 * Requires PHP: 8.3
 * License: proprietary
 */

/* ==========================================================================
   Sólo va aquí lo que theme.json no puede expresar. Ni un color literal:
   todo sale de las variables de la paleta y de settings.custom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
}

/*
 * El cromado va pegado. WordPress envuelve cada parte de plantilla en su
 * propio elemento y le aplica el blockGap de 24 px como a cualquier bloque
 * hermano, así que sin esto aparece aire entre la barra de servicio, el
 * encabezado, el acceso rápido y el pie.
 *
 * Se apunta al ENVOLTORIO de la parte y no a las clases de dentro: enumerar
 * clases dejó fuera los envoltorios de acceso rápido y de los flotantes, y el
 * acceso rápido quedó separado del encabezado por 24 px que el diseño no
 * tiene. Así queda cubierta cualquier parte, también las que vengan después.
 *
 * El «main» de la portada no es una parte de plantilla pero tiene el mismo
 * problema: sus franjas van pegadas al acceso rápido, sin canal en medio.
 */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > .uts-portada {
	margin-block: 0;
}

/*
 * Las franjas del cromado tienen que llegar a los bordes de la pantalla.
 *
 * No llegaban por dos motivos encadenados. Uno: la regla de escape que
 * WordPress genera para los bloques a todo ancho es
 * «.wp-site-blocks > .alignfull», con hijo DIRECTO, y las franjas del cromado
 * viven dentro del envoltorio «div.wp-block-template-part», así que la regla
 * nunca les aplicaba. Y dos: «--wp--style--root--padding-left» no se emite en
 * esta instalación, así que ni siquiera había valor que compensar.
 *
 * Resultado: la barra, el encabezado, el acceso rápido y el pie quedaban
 * metidos 24 px y se veía el papel del fondo por los lados, como un marco.
 * Aquí se sacan a pulso con el token de aire del tema.
 */
.wp-site-blocks > .wp-block-template-part > .alignfull {
	margin-inline: calc( var(--wp--custom--contenedor--aire) * -1 );
	width: calc( 100% + var(--wp--custom--contenedor--aire) * 2 );
	max-width: none;
	padding-inline: 0;
}

/*
 * UN SOLO contenedor por dentro: 1.200 px de tope con 24 px de aire, o sea
 * 1.152 útiles, como manda la sección 4 de CLAUDE.md. Se declara a mano
 * porque «alignwide» dentro de un «alignfull» sumaba el relleno dos veces y
 * cada pieza acababa en un canal distinto: medido a 375 px, la barra en 53,
 * el encabezado en 58, el pie en 55 y el acceso rápido en 24.
 */
.uts-barra-servicio__interior,
.uts-encabezado__interior,
.uts-diapositiva__interior,
.uts-de-interes__interior,
.uts-novedades__interior,
.uts-trayectoria__interior,
.uts-medios__interior,
.uts-publicidad__interior,
.uts-aviso__interior,
.uts-pie__columnas,
.uts-pie__contacto,
.uts-pie__legal {
	max-width: var(--wp--custom--contenedor--ancho);
	margin-inline: auto;
	padding-inline: var(--wp--custom--contenedor--aire);
	box-sizing: border-box;
}

.uts-principal {
	padding-block: var(--wp--preset--spacing--80);
}

/*
 * El contenido comparte el contenedor del cromado.
 *
 * Antes el título y la prosa iban en la columna de 760 px CENTRADA, así que
 * empezaban en 333 px mientras la barra de servicio, el encabezado, el acceso
 * rápido y el pie empezaban en 137: quedaba una franja vacía de casi 200 px a
 * la izquierda y el contenido parecía suelto, sin relación con la página.
 *
 * Ahora los bloques del contenido van en «wide» —los mismos 1.152 px del
 * cromado— y la columna de lectura de 760 px de la sección 4 se conserva como
 * MEDIDA de línea, no como caja centrada: la prosa se limita a 760 px pero
 * arranca en el borde del contenedor, alineada con todo lo demás.
 */
/*
 * «.uts-libre» marca los componentes que ponen su propia medida —el listado
 * de noticias, los filtros, la columna de «Más noticias»—. Sin la exclusión,
 * la rejilla de tarjetas (que es un <ul>) quedaba topada a 760 px.
 */
/*
 * Se excluye lo que ya lleva alineación propia: «alignwide» y «alignfull»
 * fijan su ancho por su cuenta, y toparlos aquí —o peor, ponerles
 * «max-width: none»— les quita ese ancho y los manda al borde de la pantalla.
 */
.uts-principal
	:is( p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6, .wp-block-post-excerpt, .wp-block-post-terms, .wp-block-post-date, .wp-block-search, .wp-block-buttons ):not( .alignwide ):not( .alignfull ):not( .uts-libre, .uts-libre * ) {
	max-width: var(--wp--style--global--content-size);
}

/* Texto sólo para lectores de pantalla. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Cejilla: versalitas del diseño. */
.uts-cejilla {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

/*
 * La cejilla sobre una superficie de color.
 *
 * «apagado» (#6E6F72) rinde 5,02:1 sobre blanco y 4,74:1 sobre papel, que es
 * para lo que se eligió. Sobre las dos superficies cálidas del sistema se
 * queda corto —4,09:1 sobre arena y 4,21:1 sobre beige— y la cejilla mide
 * 11 px, así que le toca el mínimo de 4,5:1 (SC 1.4.3). En esas dos baja un
 * escalón de la misma escala de grises, a «gris» (#5C5648): 5,94:1 sobre arena
 * y 6,11:1 sobre beige, con el mismo matiz.
 */
.uts-principal :where( .has-arena-background-color, .has-beige-background-color ) .uts-cejilla {
	color: var(--wp--preset--color--gris);
}

/* --------------------------------------------------------------------------
   2 · Accesibilidad transversal
   -------------------------------------------------------------------------- */

/*
 * SC 2.4.11 · el encabezado es fijo, así que sin este colchón el foco del
 * teclado queda debajo de la barra y no se ve a dónde saltó.
 */
:where( a, button, input, select, textarea, summary, [tabindex] ),
:where( h1, h2, h3, h4, h5, h6 ),
[id] {
	scroll-margin-top: var(--wp--custom--cromado--aire-foco);
}

/*
 * Lo mismo abajo: al bajar con Tab, el navegador deja el elemento pegado al borde
 * inferior, justo donde flotan la burbuja del chat y, en móvil, la pestaña de
 * accesibilidad. Este colchón (burbuja + su aire + un margen) lo deja por encima.
 */
:where( a, button, input, select, textarea, summary, [tabindex] ) {
	scroll-margin-bottom: calc( var(--wp--custom--flotante--lado-ayuda) + var(--wp--custom--flotante--aire) + 16px );
}

/* SC 2.4.7 · el foco siempre se ve, y con contraste sobre cualquier fondo. */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-escudo);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radio--chico);
}

/* Sobre el verde oscuro el anillo tiene que ser claro para separarse. */
.uts-barra-servicio :where( a, button, input ):focus-visible,
.uts-banner :where( a, button, input ):focus-visible,
.uts-pie :where( a, button, input ):focus-visible {
	outline-color: var(--wp--preset--color--verde-limon);
}

/* SC 2.5.8 · objetivo táctil mínimo. */
.uts-barra-servicio a,
.uts-barra-servicio button,
.uts-pie a,
.uts-encabezado a {
	min-height: 24px;
}

/*
 * Un enlace que es TODO el contenido de su punto de lista no es un enlace
 * dentro de una frase: es un destino de navegación y le toca el mínimo de
 * 24 px. El «:only-child» es lo que traza la línea — un enlace en medio de
 * una oración dentro de un <li> no lo cumple y se queda como texto corrido,
 * que es lo correcto.
 */
.uts-principal li > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/*
 * Entrada de una fila del desplegable. El estado final es el visible, así que
 * si el movimiento está anulado la fila simplemente aparece: nunca se queda
 * invisible por una animación que no corre.
 */
@keyframes uts-entra-fila {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* SC 2.2.2 · quien pide menos movimiento no recibe ninguno. */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   2 bis · Un solo menú de cromado, filtrado por sitio

   Los doce ítems viven en un único menú «wp_navigation» —el desplegable de
   core/navigation sólo pinta sus propios ítems, así que con dos menús los de
   utilidad no podían entrar en la hamburguesa—. Cada ítem lleva su clase y
   aquí se decide dónde se ve cada grupo.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   3 · Barra de servicio
   -------------------------------------------------------------------------- */

.uts-barra-servicio {
	padding-block: 0;
	font-size: var(--wp--preset--font-size--pequeno);
}

/* 36 px exactos: sin padding vertical y con los hijos centrados, no
   estirados, o cada icono empuja la franja por encima del diseño. */
.uts-barra-servicio .uts-barra-servicio__interior {
	min-height: var(--wp--custom--cromado--alto-barra);
	gap: var(--wp--preset--spacing--60);
	padding-block: 0;
	align-items: center;
}

.uts-barra-servicio__gov {
	margin: 0;
	flex: none;
}

.uts-barra-servicio__gov img {
	display: block;
	height: 20px;
	width: auto;
	/*
	 * Sustituye a los «width» y «height» que llevaba el HTML: core/image no los
	 * emite y el editor daba la imagen por inválida. Con la proporción
	 * declarada, el navegador reserva el hueco antes de que la imagen cargue,
	 * que es justo lo que evitaban aquellos atributos. Son 110 × 26.
	 */
	aspect-ratio: 110 / 26;
}


.uts-barra-servicio__utiles {
	gap: var(--wp--preset--spacing--30);
	flex: none;
}

/* El buscador de la barra: sólo la lupa; el campo se despliega al pulsarla. */
.uts-barra-servicio__buscador {
	margin: 0;
}

.uts-barra-servicio__buscador .wp-block-search__button {
	background: transparent;
	border: 1px solid var(--wp--custom--barra--trazo);
	border-radius: var(--wp--custom--radio--chico);
	color: var(--wp--preset--color--blanco);
	padding: 4px 8px;
	min-height: 24px;
}

.uts-barra-servicio__buscador .wp-block-search__button:hover,
.uts-barra-servicio__buscador .wp-block-search__button:focus,
.uts-barra-servicio__buscador .wp-block-search__button:active {
	background: transparent;
	color: var(--wp--preset--color--verde-limon);
	border-color: var(--wp--preset--color--verde-limon);
}

.uts-barra-servicio__buscador .wp-block-search__input {
	border: 1px solid var(--wp--custom--barra--trazo);
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	padding: 4px 8px;
}

/*
 * El campo se abre como una CAPA a la izquierda de la lupa, por encima de los
 * enlaces de la barra, y no dentro de la fila. Antes ocupaba sitio: la fila ya
 * va casi llena (GOV.CO, el menú y los íconos en 1200 px), así que al abrirse
 * el buscador el grupo de idioma y búsqueda se caía a una segunda fila y la
 * barra saltaba de 36 a 89 px, moviendo toda la página (visto en el ensayo
 * del 1 oct). El abrir y cerrar sigue siendo el del bloque del núcleo: aquí
 * sólo cambia dónde aparece. El núcleo lo oculta con «width: 0 !important»
 * mientras está cerrado, así que el ancho de abajo sólo rige abierto.
 */
.uts-barra-servicio__buscador .wp-block-search__inside-wrapper {
	position: relative;
}

.uts-barra-servicio__buscador .wp-block-search__input {
	position: absolute;
	top: 50%;
	right: calc( 100% + 6px );
	transform: translateY( -50% );
	width: min( 260px, calc( 100vw - 96px ) );
	z-index: 110;
	box-shadow: var(--wp--preset--shadow--tarjeta);
}

/* Cerrado, la capa no recibe clics que caigan sobre los enlaces de la barra. */
.uts-barra-servicio__buscador.wp-block-search__searchfield-hidden .wp-block-search__input {
	pointer-events: none;
	box-shadow: none;
}

/* Cerrado, el núcleo recorta el formulario; abierto, la capa tiene que asomar. */
.uts-barra-servicio__buscador:not(.wp-block-search__searchfield-hidden),
.uts-barra-servicio__buscador:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	overflow: visible;
}

/* --------------------------------------------------------------------------
   4 · Encabezado
   -------------------------------------------------------------------------- */

/*
 * El pegado va en el ENVOLTORIO de la parte de plantilla, no en el grupo de
 * dentro. WordPress envuelve cada parte en su propio elemento, y un «sticky»
 * puesto en el grupo interior sólo se pega dentro de ese envoltorio —que mide
 * exactamente lo mismo que el grupo—, así que no se pega a nada. En este tema
 * la única parte con etiqueta «header» es el encabezado, de ahí el selector.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.uts-encabezado {
	padding-block: 0;
	border-bottom: 1px solid var(--wp--custom--traza--encabezado);
	box-shadow: var(--wp--custom--sombra--encabezado);
}

/* 68 px exactos: el logo de 52 px manda y el aire se reparte centrando. */
.uts-encabezado .uts-encabezado__interior {
	min-height: var(--wp--custom--cromado--alto-encabezado);
	gap: var(--wp--preset--spacing--60);
	padding-block: 0;
	align-items: center;
}

.uts-encabezado__logo {
	margin: 0;
	flex: none;
}

/*
 * El enlace del logo, en bloque y sin interlineado: en línea dejaba bajo la
 * imagen el hueco de los descendentes (unos 10 px) y la cabecera crecía de
 * 68 a 74 px, lo que corría todo lo que depende de su alto.
 */
.uts-encabezado__logo a {
	display: block;
	line-height: 0;
}

.uts-encabezado__logo img {
	display: block;
	/*
	 * 64 px en una cabecera de 68: desde el 29 sep el logo es el SVG sin
	 * escudo, más angosto, y a 52 px las tres líneas del nombre medían unos
	 * 5 px de alto por letra. A 64 ocupa lo mismo que el de escudo (144 px).
	 */
	height: 64px;
	width: auto;
	/*
	 * Sustituye a los «width» y «height» que llevaba el HTML: core/image no los
	 * emite y el editor daba la imagen por inválida. Con la proporción
	 * declarada, el navegador reserva el hueco antes de que la imagen cargue,
	 * que es justo lo que evitaban aquellos atributos.
	 *
	 * Es la proporción del PNG (632 × 210). Si existe «assets/img/logo-uts.svg»
	 * se usa ese archivo y functions.php escribe aquí encima la proporción de
	 * su «viewBox» (uts_logo_archivo()): no hace falta tocar esta regla.
	 */
	aspect-ratio: 632 / 210;
}


.uts-encabezado__accion {
	flex: none;
}

.uts-encabezado__accion .wp-block-button__link {
	padding: 10px 20px;
}

/* --------------------------------------------------------------------------
   5 · Pie
   -------------------------------------------------------------------------- */

.uts-pie {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	color: var(--wp--custom--pie--texto);
	font-size: var(--wp--preset--font-size--menor);
}

/* Título de columna: cejilla en limón. */
.uts-cejilla-pie {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-limon);
	margin-block-end: var(--wp--preset--spacing--50);
}

.uts-cejilla-pie--menor {
	font-size: var(--wp--preset--font-size--cejilla);
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	margin-block-end: var(--wp--preset--spacing--40);
}

/*
 * Los enlaces del pie: blanco al 55 %. Es el mínimo medido (5,39:1) que
 * cumple la Resolución 1519. NO BAJAR DE AHÍ.
 */
.uts-pie a:where( :not( .wp-element-button ) ) {
	color: var(--wp--custom--pie--enlace);
	text-decoration: none;
}

.uts-pie a:where( :not( .wp-element-button ) ):hover,
.uts-pie a:where( :not( .wp-element-button ) ):focus,
.uts-pie a:where( :not( .wp-element-button ) ):active {
	color: var(--wp--preset--color--verde-limon);
	text-decoration: underline;
}


.uts-pie .uts-pie__redes {
	gap: var(--wp--preset--spacing--40);
}

.uts-pie .uts-pie__redes .wp-block-social-link {
	margin: 0;
}

/* Mismo motivo que arriba: el núcleo pinta cada red con su color de marca. */
.uts-pie .uts-pie__redes .wp-social-link,
.uts-pie .uts-pie__redes .wp-block-social-link-anchor {
	color: var(--wp--custom--pie--enlace);
	padding: 0;
	gap: var(--wp--preset--spacing--30);
	background: transparent;
}

.uts-pie .uts-pie__redes .wp-social-link:hover,
.uts-pie .uts-pie__redes .wp-block-social-link-anchor:hover,
.uts-pie .uts-pie__redes .wp-block-social-link-anchor:focus,
.uts-pie .uts-pie__redes .wp-block-social-link-anchor:active {
	color: var(--wp--preset--color--verde-limon);
	transform: none;
	background: transparent;
}

.uts-pie .uts-pie__redes .wp-block-social-link-label {
	font-size: var(--wp--preset--font-size--menor);
}

/*
 * Sello GOV.CO al cierre de la columna «Información Pública».
 *
 * Es el mismo PNG blanco de la barra de servicio (110×26). El alto se fija en
 * CSS y el ancho va «auto» porque core/image no emite los atributos width y
 * height: sin esto la imagen se pinta a su tamaño natural y descuadra la
 * columna. El margen superior la separa del último enlace del menú, que si no
 * parece uno más de la lista.
 */
.uts-pie__gov {
	margin: var(--wp--preset--spacing--50) 0 0;
}

.uts-pie__gov img {
	display: block;
	height: 26px;
	width: auto;
}

/*
 * El sello vive sobre el verde oscuro y es blanco: no hay contraste que medir
 * en el texto, pero sí hace falta que el enlace responda. Al pasar y al pulsar
 * se atenúa un punto; el anillo de foco lo pone la regla global.
 */
.uts-pie__gov a {
	display: inline-block;
	transition: opacity var(--wp--custom--transicion--base);
}

.uts-pie__gov a:hover,
.uts-pie__gov a:focus-visible {
	opacity: 0.75;
}

/* Regla 4 · en móvil no hay hover: el toque tiene que responder igual. */
.uts-pie__gov a:active {
	opacity: 0.55;
	transition-duration: var(--wp--custom--transicion--pulsa);
}

@media ( prefers-reduced-motion: reduce ) {
	.uts-pie__gov a { transition: none; }
}

/* Medios institucionales. */
.uts-pie__medios {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--pie--linea);
}

.uts-pie__medios-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.uts-pie__medio {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: 24px;
}

.uts-pie__medio-accion {
	margin-inline-start: auto;
	display: inline-flex;
}

.uts-pie__icono {
	flex: none;
}

/* Tarjeta blanca con los sellos de calidad. */
.uts-pie__sellos {
	margin-block-start: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--blanco);
	border-radius: var(--wp--custom--radio--base);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--60);
	flex-wrap: wrap;
}

.uts-pie__sellos img {
	display: block;
	width: auto;
	height: 46px;
}

/* Bloque de contacto. */
.uts-pie__contacto {
	margin-block-start: var(--wp--preset--spacing--80);
	padding-block-start: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--custom--pie--linea);
}

.uts-pie__contacto-rejilla {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
}

.uts-pie__bloque {
	min-width: 0;
}

.uts-pie__bloque-titulo {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	color: var(--wp--custom--pie--fuerte);
	margin-block-end: var(--wp--preset--spacing--50);
	overflow-wrap: anywhere;
}

.uts-pie__datos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/*
 * «overflow-wrap: anywhere» y «min-width: 0» no son adorno: a 320 px, y más
 * aún con el texto al 125 %, «notificacionesjudiciales@correo.uts.edu.co» es
 * una cadena que el navegador no parte por sí sola y empuja el pie fuera de
 * la pantalla.
 */
.uts-pie__datos li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.5;
	min-width: 0;
}

.uts-pie__datos li > span,
.uts-pie__datos a {
	min-width: 0;
	overflow-wrap: anywhere;
}

.uts-pie__datos .uts-pie__icono {
	color: var(--wp--preset--color--verde-limon);
	margin-block-start: 2px;
}

.uts-pie__datos strong {
	color: var(--wp--custom--pie--fuerte);
	font-weight: 600;
}

.uts-pie__vigilancia {
	margin-block-start: var(--wp--preset--spacing--50);
	line-height: 1.65;
}

/* Línea legal final. */
.uts-pie__legal {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--custom--pie--linea);
	/* Aire a la derecha para que la burbuja de ayuda, que es fija, no se
	   siente encima de la línea de derechos. */
	padding-inline-end: calc( var(--wp--custom--flotante--lado-ayuda) + var(--wp--custom--flotante--aire) );
}

.uts-pie__legal-rejilla {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	flex-wrap: wrap;
}

.uts-pie__legal-enlaces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--wp--preset--spacing--60);
	flex-wrap: wrap;
}

/*
 * SC 2.5.8 · estos dos son enlaces sueltos, no van dentro de una frase, así
 * que no les vale la excepción de los enlaces en línea: necesitan los 24 px.
 */
.uts-pie__legal-enlaces a {
	color: var(--wp--preset--color--verde-limon);
	text-decoration: underline;
	font-size: var(--wp--preset--font-size--pequeno);
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.uts-pie__derechos {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--custom--pie--enlace);
	margin: 0;
}

/* --------------------------------------------------------------------------
   5 bis · Utilidades flotantes
   Obligación legal (Resolución 1519 de 2020). El control de accesibilidad NO
   va al final de la página: en el DOM es lo primero, así que el teclado lo
   alcanza justo después del enlace de salto al contenido.
   -------------------------------------------------------------------------- */

/*
 * La escala del texto la fija el panel de accesibilidad.
 *
 * Se aplica a la RAÍZ y no a «body» por dos razones. Una, todos los tamaños
 * del tema están en rem, así que escalando la raíz crecen a la vez el cuerpo,
 * los títulos y el espaciado, en proporción. Y dos, los estilos globales que
 * genera theme.json fijan el tamaño en «body» con la misma especificidad que
 * cualquier regla nuestra y se cargan después, así que ahí siempre ganarían.
 *
 * El factor es un número sin unidad, no un porcentaje: «calc(1rem * 125%)» no
 * es válido —no se puede multiplicar una longitud por un porcentaje— y la
 * declaración se descarta en silencio.
 */
:root {
	--uts-factor-texto: 1;
}

html {
	font-size: calc( 100% * var(--uts-factor-texto) );
}

.uts-flotantes__accesibilidad {
	position: fixed;
	left: 0;
	top: 42%;
	z-index: 90;
}

.uts-flotantes__ayuda {
	position: fixed;
	right: var(--wp--custom--flotante--aire);
	bottom: var(--wp--custom--flotante--aire);
	z-index: 90;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* El anillo blanco de 2 px es lo que separa el flotante de cualquier fondo. */
.uts-flotante {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	box-shadow: var(--wp--custom--sombra--flotante);
	transition: background var(--wp--custom--transicion--base);
}

.uts-flotante--accesibilidad {
	width: var(--wp--custom--flotante--lado);
	height: var(--wp--custom--flotante--lado);
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
	border-radius: 0 var(--wp--custom--radio--chico) var(--wp--custom--radio--chico) 0;
}

.uts-flotante--accesibilidad:hover,
.uts-flotante--accesibilidad:focus-visible {
	background: var(--wp--preset--color--verde-oscuro);
}

/* Regla 4 · el 41 % de las visitas son móviles y en móvil no hay hover. */
.uts-flotante--accesibilidad:active {
	background: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--verde-limon);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

.uts-flotante--ayuda {
	width: var(--wp--custom--flotante--lado-ayuda);
	height: var(--wp--custom--flotante--lado-ayuda);
	background: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--verde-limon);
	border-radius: 50%;
	flex: none;
}

.uts-pie .uts-flotante--ayuda,
.uts-flotante--ayuda:hover,
.uts-flotante--ayuda:focus-visible {
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--verde-limon);
	text-decoration: none;
}

.uts-flotante--ayuda:active {
	background: var(--wp--preset--color--verde-escudo);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/*
 * Chat de tawk.to (opción B). Mientras su ventana está abierta, la burbuja
 * del tema se aparta: la ventana ocupa esa esquina y trae su propio botón
 * para minimizar. Se oculta con visibility y no con display, para que el
 * foco pueda volver a ella en cuanto se cierra el chat.
 */
.uts-flotantes__ayuda.is-chat-abierto {
	visibility: hidden;
}

/*
 * Mientras se descarga el chat, que ahora sólo se pide al pulsar la burbuja
 * (inc/chat.php). Un pulso suave dice que algo está pasando; el lector de
 * pantalla lo sabe por «aria-busy» y por el aviso de la región viva.
 */
.uts-flotantes__ayuda.is-chat-cargando .uts-flotante--ayuda {
	cursor: progress;
	animation: uts-chat-cargando 1.1s ease-in-out infinite;
}

@keyframes uts-chat-cargando {
	50% {
		opacity: 0.55;
	}
}

@media (prefers-reduced-motion: reduce) {
	.uts-flotantes__ayuda.is-chat-cargando .uts-flotante--ayuda {
		animation: none;
	}
}

.uts-flotante--ayuda {
	position: relative;
}

/*
 * Mensajes sin leer. Limón sobre verde oscuro (8,99:1), con el mismo anillo
 * blanco del flotante para despegarse de cualquier fondo. La cifra la anuncia
 * la etiqueta del botón; aquí es sólo la señal visual.
 */
.uts-flotante__contador {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	box-shadow: 0 0 0 2px var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.uts-flotantes__etiqueta {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--sutil);
	border-radius: var(--wp--custom--radio--chico);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	color: var(--wp--preset--color--verde-oscuro);
	box-shadow: var(--wp--custom--sombra--etiqueta);
	white-space: nowrap;
}

/* Panel de accesibilidad. */
.uts-panel-accesibilidad {
	position: absolute;
	left: calc( var(--wp--custom--flotante--lado) + var(--wp--preset--spacing--30) );
	top: 0;
	width: 250px;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--base);
	box-shadow: var(--wp--custom--sombra--panel);
	padding: var(--wp--preset--spacing--60);
}

.uts-panel-accesibilidad[hidden] {
	display: none;
}

.uts-panel-accesibilidad__titulo {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 800;
	color: var(--wp--preset--color--verde-oscuro);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.uts-panel-accesibilidad__grupo {
	margin-block-end: var(--wp--preset--spacing--50);
}

.uts-panel-accesibilidad__rotulo {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.uts-panel-accesibilidad__botones {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.uts-panel-accesibilidad__boton,
.uts-panel-accesibilidad__conmutador,
.uts-panel-accesibilidad__restablecer {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	cursor: pointer;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--verde-escudo);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--chico);
	min-height: 36px;
}

.uts-panel-accesibilidad__boton {
	min-width: 40px;
	font-size: var(--wp--preset--font-size--menor);
}

.uts-panel-accesibilidad__boton:disabled {
	color: var(--wp--preset--color--apagado);
	cursor: not-allowed;
}

.uts-panel-accesibilidad__valor {
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
	min-width: 4.5ch;
	text-align: center;
}

.uts-panel-accesibilidad__conmutador {
	display: block;
	width: 100%;
	text-align: start;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--menor);
	margin-block-end: var(--wp--preset--spacing--30);
}

/* aria-pressed es la fuente de verdad del estado, así que el estilo del
   activado se cuelga de él y no de una clase aparte que se desincroniza. */
.uts-panel-accesibilidad__conmutador[aria-pressed="true"] {
	background: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
}

.uts-panel-accesibilidad__boton:hover,
.uts-panel-accesibilidad__conmutador:hover,
.uts-panel-accesibilidad__restablecer:hover {
	border-color: var(--wp--preset--color--verde-escudo);
	background: var(--wp--preset--color--beige);
}

.uts-panel-accesibilidad__conmutador[aria-pressed="true"]:hover {
	background: var(--wp--preset--color--verde-oscuro);
	border-color: var(--wp--preset--color--verde-oscuro);
}

.uts-panel-accesibilidad__boton:active,
.uts-panel-accesibilidad__conmutador:active,
.uts-panel-accesibilidad__restablecer:active {
	background: var(--wp--preset--color--arena);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

.uts-panel-accesibilidad__restablecer {
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--menor);
}

.uts-panel-accesibilidad__nota {
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--apagado);
	margin: var(--wp--preset--spacing--40) 0 0;
	line-height: 1.4;
}

/* Modo de contraste reforzado: sube el texto secundario a tinta y hace
   sólidos los trazos que están en deuda al 25–45 %. */
.uts-contraste-reforzado body {
	color: var(--wp--preset--color--tinta);
}

.uts-contraste-reforzado :is( p, li, span, dd, dt, figcaption ) {
	color: inherit;
}


/*
 * Los trazos se vuelven sólidos redefiniendo LA VARIABLE, no el border-color
 * de cada componente. Es la única forma fiable: los estilos de bloque se
 * encolan aparte y perseguirlos regla por regla no funcionó. Tocando la
 * variable cambia a la vez todo lo que la consume, incluidos los bloques.
 *
 * Va con «html.» delante para ganar a «:root» de theme.json, que declara las
 * variables con la misma especificidad de clase.
 *
 * OJO · esto NO cancela la deuda de CLAUDE.md §5.2. El trazo al 35 % rinde
 * 1,47:1 y sigue incumpliendo el SC 1.4.11 en el estado normal. El arreglo de
 * fondo es dejarlo sólido para todo el mundo, y eso está pendiente de decisión
 * del cliente porque cambia fondos que él eligió.
 */
html.uts-contraste-reforzado {
	--wp--custom--traza--ficha: var(--wp--custom--traza--control);
	--wp--custom--traza--sutil: var(--wp--custom--traza--control);
	--wp--custom--traza--encabezado: var(--wp--custom--traza--control);
}

.uts-contraste-reforzado .uts-accesos__descriptor,
.uts-contraste-reforzado .uts-accesos__cejilla {
	color: var(--wp--preset--color--gris);
}

/*
 * Enlace dentro de una frase (SC 1.4.1): subrayado siempre, porque frente al
 * texto el color solo rinde 2,08:1. La clase la pone uts_enlace_en_texto()
 * (inc/contenido.php) sólo cuando el párrafo o el ítem tiene texto propio; los
 * ítems que son únicamente un enlace se quedan como estaban.
 */
main .uts-texto-con-enlace a:where( :not( .wp-element-button ) ) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

main .uts-texto-con-enlace a:where( :not( .wp-element-button ) ):hover {
	text-decoration-thickness: 2px;
}

/* Subrayado de enlaces: para quien no distingue el enlace sólo por color. */
.uts-enlaces-subrayados a:where( :not( .wp-element-button ) ) {
	text-decoration: underline;
}

/* Espaciado del texto (SC 1.4.12): más interlineado, letra y palabra. */
.uts-espaciado :is( p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6, a, span ) {
	line-height: 1.6 !important;
	letter-spacing: 0.08em !important;
	word-spacing: 0.16em !important;
}

.uts-espaciado :is( p, ul, ol, blockquote ) {
	margin-block: 1.4em !important;
}

/* Fuente legible: pila de sistema muy legible, sin peticiones externas. */
.uts-fuente-legible,
.uts-fuente-legible :is( body, p, li, a, span, button, input, select, textarea, label, dd, dt, th, td, blockquote, figcaption, h1, h2, h3, h4, h5, h6 ) {
	font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
}

/* Detener animaciones (SC 2.2.2 / 2.3.3): anula animación y transición. El
   video de fondo lo pausa el JS (flotantes.js). */
html.uts-sin-animaciones *,
html.uts-sin-animaciones *::before,
html.uts-sin-animaciones *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* Cursor grande: puntero ampliado con SVG en línea (sin recurso externo). */
html.uts-cursor-grande,
html.uts-cursor-grande * {
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%202.5%2019.5%2011l-6.6%201.2%203.4%206.6-2.4%201.2-3.4-6.6L5%2018.5z'%20fill='black'%20stroke='white'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important;
}

html.uts-cursor-grande :is( a, button, [role="button"], input[type="submit"], label, summary, select ) {
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%2011V4.8a1.4%201.4%200%200%201%202.8%200V10l1-.2V6a1.4%201.4%200%200%201%202.8%200v4.1l1-.1a1.4%201.4%200%200%201%202.8%200V16a4%204%200%200%201-4%204h-2.6a4%204%200%200%201-3-1.4L5.4%2014a1.4%201.4%200%200%201%202-2z'%20fill='black'%20stroke='white'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 9 3, pointer !important;
}

/* «Cursor grande» solo tiene sentido con puntero (ratón). En dispositivos
   táctiles sin puntero fino se oculta el conmutador: ahí no haría nada. */
@media ( hover: none ) and ( pointer: coarse ) {
	.uts-panel-accesibilidad__conmutador[data-uts-cursor] {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   6 · Tarjetas de listado
   -------------------------------------------------------------------------- */

.uts-tarjeta {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

.uts-tarjeta img {
	border-radius: var(--wp--custom--radio--chico);
}

/* --------------------------------------------------------------------------
   6 bis · Página de resultados de búsqueda

   La búsqueda mezcla noticias, páginas y programas, así que cada resultado es
   una tarjeta con su chip de tipo, su titular, su resumen y su fecha, en ese
   orden. Antes eran párrafos separados por una línea: los tres tipos se leían
   igual y el «Seguir leyendo» caía suelto en su propio renglón.
   -------------------------------------------------------------------------- */

.uts-busqueda__cabecera {
	margin-block-end: var(--wp--preset--spacing--60);
}

.uts-busqueda__cejilla {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-escudo);
}

/*
 * El titular de la búsqueda es deliberadamente pequeño: es una pantalla de
 * tránsito, no una página que se lea. Lo que importa es el término y el
 * recuento, no el rótulo.
 */
.uts-busqueda__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
	text-wrap: balance;
}

.uts-busqueda__termino {
	color: var(--wp--preset--color--verde-escudo);
}

.uts-busqueda__termino::before { content: "«"; }
.uts-busqueda__termino::after { content: "»"; }

.uts-busqueda__cuenta {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.uts-busqueda__campo {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* --- Un resultado --- */

.uts-resultado {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
	transition: border-color var(--wp--custom--transicion--base),
		box-shadow var(--wp--custom--transicion--base);
}

.uts-resultado + .uts-resultado {
	margin-block-start: var(--wp--preset--spacing--40);
}

.uts-resultado:hover,
.uts-resultado:focus-within {
	border-color: var(--wp--preset--color--verde-escudo);
	box-shadow: 0 6px 20px -14px rgba( 26, 20, 19, 0.45 );
}

.uts-resultado__tipo {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.uts-resultado__titulo {
	margin: 0;
	line-height: 1.3;
	text-wrap: pretty;
}

.uts-resultado__titulo a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.uts-resultado__titulo a:hover,
.uts-resultado__titulo a:focus-visible {
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * La tarjeta ocupa la franja ancha, pero el texto no: a 1152 px el renglón se
 * hace larguísimo y cuesta volver al principio de la línea siguiente. El
 * titular y el resumen se quedan en una medida de lectura cómoda.
 */
.uts-resultado__titulo,
.uts-resultado__extracto {
	max-width: 78ch;
	margin-inline: 0;
}

.uts-resultado__extracto {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--gris);
	text-wrap: pretty;
}

.uts-resultado__extracto p {
	margin: 0;
}

.uts-resultado__fecha {
	margin: var(--wp--preset--spacing--30) 0 0;
}

/*
 * Paginación: 35 páginas de resultados se recorren con el teclado y con el
 * dedo, así que cada número es un objetivo de 40 px (SC 2.5.8) y la página en
 * la que se está va marcada, no sólo en negrita.
 */
.uts-busqueda__paginacion {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	flex-wrap: wrap;
}

.uts-busqueda__paginacion .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.uts-busqueda__paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.uts-busqueda__paginacion .page-numbers:hover,
.uts-busqueda__paginacion .page-numbers:focus-visible {
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--verde-escudo);
}

.uts-busqueda__paginacion .page-numbers.current {
	background: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
}

/* Los puntos suspensivos no son un botón: ni caja ni borde. */
.uts-busqueda__paginacion .page-numbers.dots {
	min-width: 0;
	padding-inline: 2px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--apagado);
}

.uts-busqueda__paginacion .wp-block-query-pagination-previous,
.uts-busqueda__paginacion .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--verde-escudo);
	border-radius: var(--wp--custom--radio--base);
	color: var(--wp--preset--color--verde-escudo);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	text-decoration: none;
}

.uts-busqueda__paginacion .wp-block-query-pagination-previous:hover,
.uts-busqueda__paginacion .wp-block-query-pagination-next:hover,
.uts-busqueda__paginacion .wp-block-query-pagination-previous:focus-visible,
.uts-busqueda__paginacion .wp-block-query-pagination-next:focus-visible {
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
}

@media ( prefers-reduced-motion: reduce ) {
	.uts-resultado { transition: none; }
}

/* Cifras en columna: siempre con las cifras alineadas. */
.uts-num,
.uts-tarjeta time,
.wp-block-post-date {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6 ter · Noticias · la tarjeta y la etiqueta de categoría

   Viven aquí y no en el CSS de un bloque porque las usan tres: «Novedades» en
   la portada, el listado y la ficha. Un bloque sólo carga su hoja cuando está
   en la página, y la portada no lleva el bloque de la tarjeta suelta.
   -------------------------------------------------------------------------- */

.uts-chip {
	display: inline-block;
	padding: var(--wp--preset--spacing--20) 10px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--verde-escudo);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--cejilla--chip);
	text-transform: uppercase;
	color: var(--wp--preset--color--blanco);
}

.uts-chip--magenta {
	background: var(--wp--preset--color--magenta);
}

.uts-chip--gris {
	background: var(--wp--preset--color--gris);
}

.uts-chip--morado {
	background: var(--wp--preset--color--morado);
}

.uts-chip--verde-oscuro {
	background: var(--wp--preset--color--verde-oscuro);
}

.uts-chip--tinta {
	background: var(--wp--preset--color--tinta);
}

.uts-chip--apagado {
	background: var(--wp--preset--color--apagado);
}

a.uts-chip,
a.uts-chip:hover,
a.uts-chip:focus {
	color: var(--wp--preset--color--blanco);
}

/* --------------------------------------------------------------------------
   Color por campus (oferta académica y su sección en la portada)

   Hay programas con el mismo nombre en varios campus; el color le dice al
   aspirante de un vistazo dónde se dicta cada uno. La clase .uts-campus--*
   sólo fija dos variables; quien la lleva decide cómo usarlas: pastilla
   (.uts-campus), muestra redonda (.uts-campus-punto) o filete superior de la
   tarjeta (.uts-campus-traza). Los tonos viven en theme.json →
   custom.campus; el color nunca va solo, siempre acompaña al nombre.
   -------------------------------------------------------------------------- */

.uts-campus--bucaramanga {
	--uts-campus-texto: var(--wp--custom--campus--bucaramanga--texto);
	--uts-campus-fondo: var(--wp--custom--campus--bucaramanga--fondo);
}

.uts-campus--piedecuesta {
	--uts-campus-texto: var(--wp--custom--campus--piedecuesta--texto);
	--uts-campus-fondo: var(--wp--custom--campus--piedecuesta--fondo);
}

.uts-campus--velez {
	--uts-campus-texto: var(--wp--custom--campus--velez--texto);
	--uts-campus-fondo: var(--wp--custom--campus--velez--fondo);
}

.uts-campus--barrancabermeja {
	--uts-campus-texto: var(--wp--custom--campus--barrancabermeja--texto);
	--uts-campus-fondo: var(--wp--custom--campus--barrancabermeja--fondo);
}

.uts-campus--virtual {
	--uts-campus-texto: var(--wp--custom--campus--virtual--texto);
	--uts-campus-fondo: var(--wp--custom--campus--virtual--fondo);
}

/* Pastilla: texto del campus sobre su fondo tintado (≥ 5,1:1 en los cinco). */
.uts-campus {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px 2px 8px;
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--uts-campus-fondo, var(--wp--preset--color--arena));
	font-weight: 600;
	line-height: 1.4;
	color: var(--uts-campus-texto, var(--wp--preset--color--gris));
}

.uts-campus svg {
	flex: none;
	color: currentColor;
}

/* Muestra redonda, para filtros y accesos por campus. */
.uts-campus-punto {
	display: inline-block;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--uts-campus-texto, var(--wp--preset--color--borde));
	vertical-align: 0;
}

/* Filete superior de la tarjeta: al recorrer la rejilla, cada campus forma su
   propio bloque de color y las copias de un mismo programa no se confunden. */
.uts-noticia.uts-campus-traza {
	border-top: 4px solid var(--uts-campus-texto);
}

a.uts-chip:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

a.uts-chip:active {
	transform: translateY( 1px );
}

.uts-noticia {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--sutil);
	border-radius: var(--wp--custom--radio--base);
	transition: box-shadow var(--wp--custom--transicion--base), transform var(--wp--custom--transicion--pulsa);
}

.uts-noticia:hover {
	box-shadow: var(--wp--preset--shadow--tarjeta);
}

/* Regla 4 · en móvil no hay hover: el toque tiene que responder con algo. */
.uts-noticia:active {
	transform: translateY( 1px );
	box-shadow: none;
}

/*
 * El anillo de foco va en la tarjeta entera y no en el titular: el enlace se
 * estira por encima de toda la tarjeta, y un anillo alrededor de dos líneas de
 * título no diría qué se va a abrir.
 */
.uts-noticia:has( .uts-noticia__enlace:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--verde-escudo);
	outline-offset: 2px;
}

@supports selector( :has( * ) ) {

	.uts-noticia__enlace:focus-visible {
		outline: none;
	}
}

.uts-noticia__foto {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--wp--custom--novedades--foto);
	overflow: hidden;
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--borde);
}

.uts-noticia__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--transicion--entrada) var(--wp--custom--transicion--curva);
}

.uts-noticia:hover .uts-noticia__imagen {
	transform: scale( 1.03 );
}

/*
 * Afiches cuadrados y verticales: enteros, sobre la arena del contenedor. Un
 * recorte a 16:10 les cortaría el texto, que en muchas noticias viejas es lo
 * único que dice de qué trata.
 */
.uts-noticia__foto.es-cuadrada .uts-noticia__imagen,
.uts-noticia__foto.es-vertical .uts-noticia__imagen {
	object-fit: contain;
}

.uts-noticia:hover .uts-noticia__foto.es-cuadrada .uts-noticia__imagen,
.uts-noticia:hover .uts-noticia__foto.es-vertical .uts-noticia__imagen {
	transform: none;
}

.uts-noticia__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
}

/* En el código va después del titular; a la vista, encima. */
.uts-noticia__categoria {
	order: -1;
	align-self: flex-start;
	margin: 0;
}

.uts-noticia__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-noticia__enlace,
.uts-noticia__enlace:hover,
.uts-noticia__enlace:focus {
	color: inherit;
	text-decoration: none;
}

.uts-noticia__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

.uts-noticia:hover .uts-noticia__enlace {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.uts-noticia__extracto {
	margin: 0;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}

.uts-noticia__fecha {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: auto 0 0;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--apagado);
}

.uts-noticia__fecha svg {
	flex: none;
}

/* --------------------------------------------------------------------------
   6 quater · Noticias · el listado
   -------------------------------------------------------------------------- */

.uts-cabecera-listado {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--custom--traza--sutil);
}

.uts-cabecera-listado > * {
	margin: 0;
}

.uts-cabecera-listado__cejilla {
	color: var(--wp--preset--color--verde-escudo);
}

.uts-cabecera-listado__cejilla a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.uts-cabecera-listado__cejilla a:hover {
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-cabecera-listado__titulo {
	font-size: var(--wp--preset--font-size--titulo-1);
}

.uts-cabecera-listado__titulo span {
	color: var(--wp--preset--color--verde-escudo);
}

.uts-cabecera-listado__entradilla,
.uts-cabecera-listado__entradilla p {
	margin: 0;
	font-size: var(--wp--preset--font-size--entrada);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}

.uts-listado .uts-listado__rejilla {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-listado .uts-listado__rejilla > li {
	margin: 0;
}

.uts-listado .uts-tarjeta-noticia {
	height: 100%;
}

.uts-noticia--listado .uts-noticia__foto {
	height: auto;
	aspect-ratio: 16 / 10;
}

.uts-noticia--listado .uts-noticia__titulo {
	font-size: var(--wp--preset--font-size--entrada);
	line-height: 1.35;
}

.uts-listado__vacio {
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--beige);
	border-radius: var(--wp--custom--radio--base);
	font-size: var(--wp--preset--font-size--entrada);
	color: var(--wp--preset--color--tinta);
}

.uts-paginacion {
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--80);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
}

.uts-paginacion .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.uts-paginacion a,
.uts-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.uts-paginacion a:hover {
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration: none;
}

.uts-paginacion a:active {
	background: var(--wp--preset--color--arena);
}

.uts-paginacion .page-numbers.current {
	border-color: var(--wp--preset--color--verde-escudo);
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
}

.uts-paginacion .page-numbers.dots {
	min-width: 0;
	border: 0;
	background: none;
}

/* --------------------------------------------------------------------------
   6 quinquies · Noticias · la ficha
   -------------------------------------------------------------------------- */

.uts-ficha__cabecera {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: 920px;
}

.uts-ficha__cabecera > * {
	margin: 0;
}

.uts-ficha__volver a {
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.uts-ficha__volver a:hover {
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.uts-chips .wp-block-post-terms__separator {
	display: none;
}

.uts-principal .uts-chips a.uts-chip {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 0;
}

.uts-ficha__titulo.wp-block-post-title {
	font-size: var(--wp--custom--noticia--titulo);
	line-height: 1.15;
}

.uts-ficha__fecha {
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--apagado);
}

.uts-ficha__cuerpo {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var(--wp--custom--noticia--lateral);
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}

.uts-ficha__contenido {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	min-width: 0;
	max-width: var(--wp--style--global--content-size);
}

.uts-ficha__contenido > * {
	margin: 0;
}

.uts-ficha__imagen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radio--base);
}

.uts-ficha__texto {
	font-size: var(--wp--preset--font-size--entrada);
	line-height: 1.7;
}

.uts-ficha__texto > * + * {
	margin-block-start: 1.1em;
}

.uts-ficha__texto a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.uts-ficha__texto :where( h2, h3 ) {
	margin-block-start: 1.6em;
}

.uts-ficha__etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--traza--sutil);
	font-size: var(--wp--preset--font-size--pequeno);
}

.uts-ficha__etiquetas .wp-block-post-terms__prefix {
	margin-inline-end: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.uts-ficha__etiquetas .wp-block-post-terms__separator {
	display: none;
}

.uts-ficha__etiquetas a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--gris);
	text-decoration: none;
}

.uts-ficha__etiquetas a:hover {
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-ficha__navegacion {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--custom--traza--sutil);
}

.uts-ficha__navegacion > * {
	margin: 0;
}

.uts-ficha__navegacion a {
	display: block;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration: none;
}

.uts-ficha__navegacion a:hover {
	text-decoration: underline;
}

.uts-ficha__navegacion .post-navigation-link__label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--cejilla);
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

.uts-ficha__navegacion .post-navigation-link-next {
	grid-column: 2;
	text-align: end;
}

/*
 * La columna lateral acompaña al lector mientras baja. El colchón es la
 * cabecera fija más un poco de aire, para que no quede debajo de ella.
 */
.uts-ficha__lateral {
	position: sticky;
	top: calc( var(--wp--custom--cromado--alto-encabezado) + var(--wp--preset--spacing--60) );
	margin: 0;
}

/*
 * Lo que trae el contenido migrado del portal viejo: videos, galerías, tablas,
 * desplegables y enlaces a PDF que el exportador convirtió desde WPBakery.
 */
.uts-ficha__imagen.es-cuadrada img,
.uts-ficha__imagen.es-vertical img {
	max-height: 760px;
	object-fit: contain;
	background: var(--wp--preset--color--arena);
}

.uts-ficha__texto img {
	max-width: 100%;
	height: auto;
}

.uts-ficha__texto .aligncenter {
	display: block;
	margin-inline: auto;
}

.uts-ficha__texto .has-text-align-center {
	text-align: center;
}

.uts-ficha__texto .has-text-align-right {
	text-align: right;
}

.uts-ficha__texto .wp-caption {
	max-width: 100%;
}

.uts-ficha__texto .wp-caption-text {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--apagado);
}

.uts-ficha__texto .uts-video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.uts-ficha__texto .uts-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--wp--custom--radio--base);
}

.uts-ficha__texto .wp-video,
.uts-ficha__texto video {
	max-width: 100%;
	height: auto;
}

.uts-ficha__texto .uts-galeria {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 10rem, 1fr ) );
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-ficha__texto .uts-galeria li {
	margin: 0;
}

.uts-ficha__texto .uts-galeria img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radio--chico);
}

.uts-ficha__texto .uts-imagen-contenido {
	margin: 0;
}

.uts-ficha__texto .uts-imagen-contenido img {
	border-radius: var(--wp--custom--radio--base);
}

.uts-ficha__texto .uts-enlace-pdf a,
.uts-ficha__texto .uts-boton-contenido a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--verde-escudo);
	border-radius: var(--wp--custom--radio--base);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.uts-ficha__texto .uts-enlace-pdf a {
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--verde-escudo);
}

.uts-ficha__texto .uts-enlace-pdf a::before {
	content: "PDF";
	padding: 2px 6px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--verde-escudo);
	font-size: var(--wp--preset--font-size--cejilla);
	letter-spacing: var(--wp--custom--cejilla--chip);
	color: var(--wp--preset--color--blanco);
}

.uts-ficha__texto .uts-boton-contenido a {
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
}

.uts-ficha__texto .uts-enlace-pdf a:hover,
.uts-ficha__texto .uts-boton-contenido a:hover {
	border-color: var(--wp--preset--color--verde-oscuro);
	background: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--blanco);
}

.uts-ficha__texto .uts-enlace-pdf a:hover::before {
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-ficha__texto .uts-enlace-pdf a:active,
.uts-ficha__texto .uts-boton-contenido a:active {
	transform: translateY( 1px );
}

.uts-ficha__texto .uts-desplegable {
	padding: 0 var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
}

.uts-ficha__texto .uts-desplegable + .uts-desplegable {
	margin-block-start: var(--wp--preset--spacing--30);
}

.uts-ficha__texto .uts-desplegable summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--verde-oscuro);
	cursor: pointer;
}

.uts-ficha__texto .uts-desplegable[open] summary {
	margin-block-end: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--custom--traza--sutil);
}

.uts-ficha__texto .uts-destacado {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--beige);
	border-radius: var(--wp--custom--radio--base);
}

.uts-ficha__texto .uts-tabla {
	overflow-x: auto;
}

.uts-ficha__texto table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.45;
}

.uts-ficha__texto th,
.uts-ficha__texto td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--traza--ficha);
	text-align: left;
	vertical-align: top;
}

.uts-ficha__texto th {
	background: var(--wp--preset--color--arena);
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	color: var(--wp--preset--color--verde-oscuro);
}

@media ( max-width: 1024px ) {

	.uts-listado .uts-listado__rejilla {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.uts-ficha__cuerpo {
		grid-template-columns: minmax( 0, 1fr );
	}

	.uts-ficha__lateral {
		position: static;
		max-width: var(--wp--style--global--content-size);
	}
}

@media ( max-width: 640px ) {

	.uts-listado .uts-listado__rejilla {
		grid-template-columns: minmax( 0, 1fr );
		gap: var(--wp--preset--spacing--50);
	}

	.uts-noticia--listado .uts-noticia__titulo {
		font-size: var(--wp--preset--font-size--base);
	}

	.uts-cabecera-listado__titulo {
		font-size: var(--wp--preset--font-size--titulo-2);
	}

	.uts-ficha__navegacion {
		grid-template-columns: minmax( 0, 1fr );
	}

	.uts-ficha__navegacion .post-navigation-link-next {
		grid-column: 1;
		text-align: start;
	}

	/* Números de página: en 320 px sólo caben los vecinos, y el núcleo ya los recorta. */
	.uts-paginacion .wp-block-query-pagination-previous,
	.uts-paginacion .wp-block-query-pagination-next {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------------------
   5 bis · Las vistas previas del editor son inertes

   «add_editor_style» mete esta hoja en el lienzo del editor, y ahí las vistas
   previas de los bloques del tema traen sus enlaces de verdad. Un clic en uno
   de ellos navegaba el iframe a la página del enlace: el editor desaparecía y
   parecía que la plantilla se había roto. Con esto el clic atraviesa la vista
   previa y selecciona el bloque, que es lo que se espera.

   Se apunta a «.uts-editor-previa», que es el envoltorio que pone el script del
   editor alrededor de la vista previa, y no al bloque entero: el aviso de más
   abajo lleva un botón que sí tiene que poder pulsarse. Fuera del editor
   ninguna de estas reglas aplica.
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .uts-editor-previa a,
.editor-styles-wrapper .uts-editor-previa button,
.editor-styles-wrapper .uts-editor-previa video {
	pointer-events: none;
}

/*
 * El aviso que explica dónde se edita cada bloque. Sólo existe en el editor:
 * lo pinta la función «edit» del bloque, nunca el render de PHP.
 */
.editor-styles-wrapper .uts-editor-nota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--beige);
	border-inline-start: 3px solid var(--wp--preset--color--verde-escudo);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--tinta);
}

.editor-styles-wrapper .uts-editor-nota__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.editor-styles-wrapper .uts-editor-nota__accion {
	flex: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	cursor: pointer;
}

.editor-styles-wrapper .uts-editor-nota__accion:hover,
.editor-styles-wrapper .uts-editor-nota__accion:focus-visible {
	background: var(--wp--preset--color--verde-oscuro);
}

/* --------------------------------------------------------------------------
   6 bis · El «main» de la portada

   Las franjas de la portada son a sangre y cada una pone su propio
   contenedor de 1.200 px por dentro. Lo de cada franja vive en el CSS de su
   bloque; aquí sólo queda lo que es del envoltorio.
   -------------------------------------------------------------------------- */

.uts-portada {
	margin-inline: calc( var(--wp--custom--contenedor--aire) * -1 );
	width: calc( 100% + var(--wp--custom--contenedor--aire) * 2 );
	max-width: none;
	padding-inline: 0;
}

/*
 * Las franjas de la portada se pegan unas a otras: cada una pone su propio aire
 * por dentro y el diseño no tiene canal entre ellas. WordPress mete 24 px de
 * separación entre bloques hermanos, y eso dejaba una banda de papel entre el
 * hero y «De interés».
 */
.uts-portada > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   7 · Móvil · validado a 390 px y a 320 px
   -------------------------------------------------------------------------- */

@media ( max-width: 900px ) {

	.uts-barra-servicio .uts-barra-servicio__interior {
		gap: var(--wp--preset--spacing--40);
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	

	

	
	

	

	
	

	
	

	/*
	 * El bloque de utilidades: una banda verde oscuro a sangre, con las
	 * esquinas de arriba redondeadas para que se lea como una pieza y no como
	 * seis filas sueltas que casualmente comparten color.
	 *
	 * El primer ítem del grupo se detecta con «principal + utilidad», el punto
	 * exacto donde cambia. No vale «:first-of-type»: eso mira el tipo de
	 * elemento —todos son «li»— y apuntaba al primer ítem del menú entero.
	 */
	
	

	

	

	
	

	

	
	

	
	
	
	
	
	

	
	

	
	

	

	.uts-encabezado .uts-encabezado__logo img {
		height: 56px; /* cabecera de 64 px */
	}

	.uts-encabezado .uts-encabezado__interior {
		min-height: 64px;
	}

	/* El botón «Inscripciones» estorba junto a la hamburguesa: la maqueta móvil
	   no lo lleva. «Admisiones» sigue en el menú. Misma nota de especificidad:
	   «.wp-block-buttons» del núcleo es «display: flex». */
	.uts-encabezado .uts-encabezado__accion {
		display: none;
	}

	
	

	

	
	

	.uts-pie__contacto-rejilla {
		grid-template-columns: 1fr;
	}

	.uts-pie__legal-rejilla {
		flex-direction: column;
		align-items: flex-start;
	}

	/*
	 * Los dos flotantes bajan a las esquinas inferiores OPUESTAS, como círculos
	 * de 52 px. La etiqueta «¿Necesitas ayuda?» se va: a 390 px ocuparía media
	 * pantalla y taparía el contenido.
	 */
	.uts-flotantes__accesibilidad {
		left: var(--wp--preset--spacing--50);
		top: auto;
		bottom: var(--wp--preset--spacing--50);
	}

	.uts-flotante--accesibilidad {
		border-radius: 50%;
	}

	.uts-flotantes__ayuda {
		right: var(--wp--preset--spacing--50);
		bottom: var(--wp--preset--spacing--50);
	}

	.uts-flotante--ayuda {
		width: var(--wp--custom--flotante--lado);
		height: var(--wp--custom--flotante--lado);
	}

	.uts-flotantes__etiqueta {
		display: none;
	}

	/*
	 * Mientras el chat tiene algo que decir («Abriendo el chat…», «está
	 * tardando», «no respondió»), la etiqueta aparece también en móvil, a la
	 * izquierda de la burbuja y en varias líneas si hace falta.
	 */
	.uts-flotantes__ayuda.is-chat-mensaje .uts-flotantes__etiqueta {
		display: block;
		white-space: normal;
		max-width: min( 240px, calc( 100vw - var(--wp--custom--flotante--lado) - 48px ) );
	}

	/* El panel sube desde el botón y se ajusta al ancho de la pantalla. */
	.uts-panel-accesibilidad {
		position: fixed;
		left: var(--wp--preset--spacing--50);
		right: var(--wp--preset--spacing--50);
		top: auto;
		bottom: calc( var(--wp--custom--flotante--lado) + var(--wp--preset--spacing--70) );
		width: auto;
		max-width: 320px;
	}
}

@media ( max-width: 480px ) {

	.uts-pie {
		padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}

	.uts-pie__sellos img {
		height: 38px;
	}

	.uts-principal {
		padding-block: var(--wp--preset--spacing--70);
	}
}

@media ( max-width: 360px ) {

	.uts-encabezado .uts-encabezado__logo img {
		height: 48px;
	}


}

/* --------------------------------------------------------------------------
   Plantilla «Página con banner» — templates/banner.html

   Un hero como el de la ficha de programa para las páginas importantes: franja
   verde a sangre con la imagen destacada bajo un velo verde y el título encima.
   Sin foto, queda el verde oscuro sólido. Selectores propios, sin colisiones.
   -------------------------------------------------------------------------- */

.uts-principal.uts-principal--banner {
	padding-block-start: 0;
	margin-block-start: 0;
}

.uts-banner-pagina {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* Cinta de alto contenido (tope 420px). La imagen destacada va de fondo con
	   object-fit:cover, así que SE RECORTA para llenar el ancho completo.
	   ─────────────────────────────────────────────────────────────────────────
	   MEDIDA RECOMENDADA DE LA FOTO DESTACADA: 1920 × 420 px (proporción 32:7).
	   Para pantallas grandes / retina: 2400 × 525 px (misma proporción).
	   · El ancho ≥ 1920 evita que el navegador la AMPLÍE (ahí se pierde calidad).
	   · El 26vw llega a los 420 px alrededor de los 1.615 px de ventana y ahí se
	     queda. Es algo más que la proporción de la foto (1920 ÷ 420 = 4,57, o sea
	     22vw): se eligió a propósito para que la cinta sea MÁS ALTA que antes en
	     todos los anchos —con 22vw, un portátil de 1366 px la vería en 301 px,
	     por debajo de los 328 px que tenía con el tope de 360—. A cambio, por
	     debajo de 1.615 px la foto se recorta un poco por arriba y por abajo.
	   · Pon el motivo principal CENTRADO en horizontal: en pantallas más angostas
	     la cinta recorta por los lados, no por arriba/abajo.
	   (Una foto tipo 1600×500 se ve ampliada y recortada: es más angosta que 1920.)

	   El 17 de septiembre de 2026 subió de 360 a 420 px por pedido del cliente:
	   las fotos que se estaban preparando quedaban demasiado apaisadas. */
	min-height: clamp( 280px, 26vw, 420px );
	margin-block-end: var(--wp--preset--spacing--70);
	/* A sangre de borde a borde: el <main> deja el aire lateral del contenedor
	   (24px) y se tira del banner exactamente ese aire, igual que la portada de
	   la ficha. No se usa 100vw para no incluir la barra de desplazamiento. */
	margin-inline: calc( var(--wp--custom--contenedor--aire) * -1 );
	background: var(--wp--preset--color--verde-oscuro);
}

.uts-banner-pagina__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.uts-banner-pagina__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Sube el punto de recorte para no comerse el motivo principal. */
	object-position: center 30%;
}

/* Velo verde: oscuro a la izquierda (donde va el título), más claro a la derecha. */
.uts-banner-pagina__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 100deg, rgba( 19, 47, 32, 0.94 ) 0%, rgba( 19, 47, 32, 0.80 ) 46%, rgba( 19, 47, 32, 0.42 ) 100% );
}

.uts-banner-pagina__interior {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--custom--contenedor--ancho);
	margin-inline: auto;
	padding-inline: var(--wp--custom--contenedor--aire);
	padding-block: var(--wp--preset--spacing--60);
}

.uts-banner-pagina__titulo {
	margin: 0;
	max-width: 26ch;
	color: #fff;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-1);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

@media ( max-width: 782px ) {

	.uts-banner-pagina {
		min-height: clamp( 200px, 42vw, 300px );
	}

	.uts-banner-pagina__titulo {
		font-size: var(--wp--preset--font-size--titulo-2);
	}
}

/* --------------------------------------------------------------------------
   Índice «En esta página» (.uts-indice)

   Saltos a las secciones de la PROPIA página (anclas #). Se ven como
   hipervínculos —texto verde subrayado, cada uno con una flecha ↓ que anuncia
   el salto hacia abajo— y NUNCA como los botones de acción: así no se
   confunden con las descargas ni los trámites, que sí son botones. Los enlaces
   siguen siendo bloques del editor (rótulo + lista de enlaces); aquí sólo
   cambia su presentación.
   -------------------------------------------------------------------------- */

.uts-indice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50) 0;
}

/* Neutraliza el margen entre hijos que inyecta el layout de flujo del grupo:
   aquí el espaciado lo da el «gap» del propio índice. */
.uts-indice > * {
	margin-block: 0;
}

/* Rótulo en versalitas, igual que las demás cejillas del tema. */
.uts-indice__rotulo {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

.uts-indice__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--30);
}

/* La flecha vive en el <li>, fuera del enlace, para que NO quede subrayada. */
.uts-indice__lista li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	min-height: 24px; /* objetivo táctil de la fila (SC 2.5.8) */
}

.uts-indice__lista li::before {
	content: "↓";
	color: var(--wp--preset--color--verde-escudo);
	font-weight: 700;
	line-height: 1;
}

.uts-indice__lista a {
	color: var(--wp--preset--color--verde-escudo);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--wp--custom--transicion--base);
}

.uts-indice__lista a:hover,
.uts-indice__lista a:focus-visible {
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration-thickness: 2px;
}

.uts-indice__lista li:hover::before,
.uts-indice__lista li:focus-within::before {
	color: var(--wp--preset--color--verde-oscuro);
}

/* Regla 4 · en móvil no hay hover: el toque necesita respuesta. */
.uts-indice__lista a:active {
	color: var(--wp--preset--color--verde-oscuro);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes (acordeón .uts-pregunta)

   core/details nativo —abre y cierra sin JavaScript— presentado como tarjeta:
   fondo blanco, borde suave (el mismo de las fichas), esquina de 8 px y un
   chevron que gira al abrir. La afordancia la llevan el texto de la pregunta y
   el chevron en verde escudo; el borde sólo agrupa. Cada pregunta es un
   objetivo táctil holgado.
   -------------------------------------------------------------------------- */

.uts-pregunta.wp-block-details {
	margin-block: 0 var(--wp--preset--spacing--30);
	padding: 0;
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
	transition: border-color var(--wp--custom--transicion--base),
		box-shadow var(--wp--custom--transicion--base);
}

.uts-pregunta.wp-block-details:hover {
	border-color: var(--wp--preset--color--verde-escudo);
}

.uts-pregunta.wp-block-details[open] {
	border-color: var(--wp--preset--color--verde-escudo);
	box-shadow: 0 6px 20px -14px rgba( 26, 20, 19, 0.45 );
}

/* La pregunta: el control que abre y cierra. */
.uts-pregunta.wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: 24px; /* objetivo táctil (SC 2.5.8) */
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--entrada);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--tinta);
	transition: color var(--wp--custom--transicion--base);
}

/* Oculta el triángulo nativo del <summary> en todos los navegadores. */
.uts-pregunta.wp-block-details > summary::-webkit-details-marker { display: none; }
.uts-pregunta.wp-block-details > summary::marker { content: ""; }

.uts-pregunta.wp-block-details > summary:hover {
	color: var(--wp--preset--color--verde-escudo);
}

/* Chevron con dos trazos; se empuja a la derecha y gira al abrir. */
.uts-pregunta.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-inline-start: auto;
	border-right: 2px solid var(--wp--preset--color--verde-escudo);
	border-bottom: 2px solid var(--wp--preset--color--verde-escudo);
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--wp--custom--transicion--base);
}

.uts-pregunta.wp-block-details[open] > summary::after {
	transform: translateY(1px) rotate(-135deg);
}

/* Respuesta: alineada con la pregunta y con aire inferior. */
.uts-pregunta.wp-block-details > :not(summary) {
	margin-block: 0;
	padding-inline: var(--wp--preset--spacing--50);
}

/*
 * Ritmo vertical dentro de la respuesta. El «blockGap» del editor no se aplica
 * dentro de un <details> (no es contenedor de layout), así que sin esto los
 * párrafos, listas y subtítulos de una respuesta larga quedan pegados. Da aire
 * tras el resumen, entre bloques y —un poco más— alrededor de los subtítulos.
 */
.uts-pregunta.wp-block-details > summary + :not(summary) {
	margin-block-start: var(--wp--preset--spacing--40);
}

.uts-pregunta.wp-block-details > :not(summary) + :not(summary) {
	margin-block-start: var(--wp--preset--spacing--30);
}

.uts-pregunta.wp-block-details > :not(summary) + :is(h2, h3, h4, h5, h6),
.uts-pregunta.wp-block-details > :is(h2, h3, h4, h5, h6) + :not(summary) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Listas dentro de la respuesta: además del margen lateral común, necesitan
 * sangría propia para las viñetas; con sólo «padding-inline» quedaban pegadas
 * al borde de la tarjeta. Se suma la sangría de la lista al margen del contenido.
 */
.uts-pregunta.wp-block-details > :is(ul, ol) {
	padding-inline-start: calc(var(--wp--preset--spacing--50) + 1.25em);
}

.uts-pregunta.wp-block-details > :last-child {
	margin-bottom: var(--wp--preset--spacing--40);
}

/*
 * Aire entre los puntos de una lista dentro de la respuesta. Cuando cada punto
 * es un documento —enlace, descripción y fecha en tres renglones—, el interlineado
 * por defecto los pega unos con otros y la lista se lee como un párrafo largo:
 * no se distingue dónde termina un documento y empieza el siguiente.
 */
.uts-pregunta.wp-block-details > :is(ul, ol) > li + li {
	margin-block-start: var(--wp--preset--spacing--40);
}

.uts-pregunta.wp-block-details > :is(ul, ol) > li {
	line-height: 1.6;
}

/* Figuras dentro del acordeón: el pie va bajo la imagen, no centrado en toda
   la columna de lectura (si no, queda despegado de la imagen que describe). */
.uts-pregunta.wp-block-details figure.wp-block-image {
	width: fit-content;
	max-width: 100%;
}

/* Regla 4 · respuesta al toque en móvil (sin :hover). */
.uts-pregunta.wp-block-details > summary:active {
	color: var(--wp--preset--color--verde-oscuro);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/* Regla 5 · sin movimiento del chevron si se pide reducirlo. */
@media ( prefers-reduced-motion: reduce ) {
	.uts-pregunta.wp-block-details,
	.uts-pregunta.wp-block-details > summary,
	.uts-pregunta.wp-block-details > summary::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Columna de consulta (aside reutilizable) + pasos + secciones por público

   Piezas para páginas de información (gratuidad, admisiones, etc.): una columna
   lateral con botones de consulta que se apoya en core/columns, tarjetas de
   paso numeradas, y encabezados de sección que diferencian los públicos.
   -------------------------------------------------------------------------- */

/* Aside de consulta: tarjeta pegajosa con botones de enlace externo. */
.uts-consulta {
	position: sticky;
	top: var(--wp--custom--cromado--aire-foco, 130px);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
}

.uts-consulta__cejilla {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

.uts-consulta__titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--verde-escudo);
}

.uts-consulta__texto {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}

.uts-consulta__botones {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.uts-consulta__botones .wp-block-button {
	width: 100%;
}

.uts-consulta__botones .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	min-height: 50px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--base);
	background: var(--wp--preset--color--verde-escudo);
	color: #fff;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--wp--custom--transicion--base), transform var(--wp--custom--transicion--pulsa);
}

/* Flecha de enlace externo (↗), sin imagen. */
.uts-consulta__botones .wp-block-button__link::after {
	content: "\2197";
	flex: none;
	font-size: 1.15em;
	line-height: 1;
}

.uts-consulta__botones .wp-block-button__link:hover,
.uts-consulta__botones .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--verde-oscuro);
	color: #fff;
	text-decoration: none;
}

.uts-consulta__botones .wp-block-button__link:active {
	transform: translateY( 1px );
}

/* Encabezado de sección por público (nuevos / antiguos). */
.uts-grupo {
	margin-block: var(--wp--preset--spacing--70) 0;
}

.uts-grupo__titulo {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--40);
}

.uts-grupo__titulo::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.1em;
	bottom: 0.1em;
	width: 6px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--verde-limon);
}

.uts-grupo__lead {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--entrada);
}

@media ( max-width: 782px ) {

	.uts-consulta {
		position: static;
		top: auto;
	}
}

/* --------------------------------------------------------------------------
   Calendario académico · tarjetas por período con descargas de PDF
   -------------------------------------------------------------------------- */

.uts-periodos {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--50);
}

.uts-periodo {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
	overflow: hidden;
}

/* El período vigente se destaca con el borde verde. */
.uts-periodo--vigente {
	border-color: var(--wp--preset--color--verde-escudo);
	box-shadow: 0 0 0 1px var(--wp--preset--color--verde-escudo);
}

.uts-periodo__cabecera {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--arena);
	border-bottom: 1px solid var(--wp--custom--traza--sutil);
}

.uts-periodo--vigente .uts-periodo__cabecera {
	background: var(--wp--preset--color--verde-escudo);
	border-bottom-color: var(--wp--preset--color--verde-escudo);
}

.uts-periodo__anio {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--verde-escudo);
	font-variant-numeric: tabular-nums;
}

.uts-periodo--vigente .uts-periodo__anio {
	color: #fff;
}

.uts-periodo__semestre {
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
}

.uts-periodo--vigente .uts-periodo__semestre {
	color: rgba( 255, 255, 255, 0.85 );
}

.uts-periodo__badge {
	margin-inline-start: auto;
	padding: 2px 10px;
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--chip);
	text-transform: uppercase;
}

.uts-periodo__descargas {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	flex: 1;
}

.uts-cal-descarga {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--traza--sutil);
	border-radius: var(--wp--custom--radio--base);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--wp--custom--transicion--base), background var(--wp--custom--transicion--base);
}

.uts-cal-descarga:hover,
.uts-cal-descarga:focus-visible {
	border-color: var(--wp--preset--color--verde-escudo);
	background: var(--wp--preset--color--papel);
	text-decoration: none;
}

/* Ícono de documento por CSS (el SVG en el contenido lo filtra KSES). */
.uts-cal-descarga::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--verde-escudo);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.uts-cal-descarga__cuerpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.uts-cal-descarga__sub {
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--apagado);
}

.uts-cal-descarga__tag {
	flex: none;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--chip);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

/*
 * Rótulo «AJUSTE» de los valores pecuniarios: el ajuste de diciembre es el que
 * trae los valores que rigen, así que se marca en verde, en versalitas y más
 * grande que la línea secundaria. Verde escudo sobre blanco: 8,74:1.
 */
.uts-pec-ajuste {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 800;
	letter-spacing: var(--wp--custom--cejilla--chip);
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wp--preset--color--verde-escudo);
	/* Pastilla de fondo suave: el verde escudo al 12 % sobre blanco (6,9:1 con
	   el texto). El beige queda de respaldo para navegadores sin color-mix(). */
	align-self: flex-start;
	margin-bottom: 4px;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--beige);
	background: color-mix( in srgb, var(--wp--preset--color--verde-escudo) 12%, var(--wp--preset--color--blanco) );
}

/*
 * Va entre la cabecera y los PDF (ver render.php del bloque), a tamaño de
 * cuerpo y no de metadato: es un aviso de que el calendario cambió.
 */
.uts-periodo__modif {
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	color: var(--wp--preset--color--gris);
}

.uts-periodo__modif a {
	color: var(--wp--preset--color--verde-escudo);
	font-weight: 600;
}

@media ( max-width: 640px ) {

	.uts-periodos {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * Tarjeta de borde verde (fondo blanco + borde verde-escudo). Se usa, p. ej., en
 * los componentes del control interno de la página «Entes de Control», para
 * distinguirlos de las tarjetas de fondo arena. El fondo y el radio los pone el
 * bloque (backgroundColor + border.radius); esta clase sólo añade el borde.
 */
.uts-borde-verde {
	border: 1px solid var(--wp--preset--color--verde-escudo);
}

/*
 * Contenedor de sección (.uts-seccion)
 *
 * Envuelve una sección entera de una página interior —título, texto y lo que
 * lleve dentro— en una tarjeta de color, para que se lea como una unidad. El
 * fondo, el radio y el relleno los pone el bloque desde el editor
 * (backgroundColor + border.radius + spacing.padding), así que Comunicaciones
 * puede cambiarlos sin tocar código.
 *
 * Lo único que añade esta clase es el ajuste de móvil: a 32 px de relleno por
 * lado, sumados a los 24 px de aire lateral del tema, la columna de lectura se
 * quedaba en 193 px a 320 px de ancho —unos 30 caracteres por línea—. Debajo de
 * 600 px el relleno lateral baja a 16 px y el texto recupera 40 px. Lleva
 * «!important» porque el relleno del bloque viaja en el atributo «style» y no
 * hay otra forma de ganarle desde la hoja.
 */
.uts-seccion {
	margin-block: var( --wp--preset--spacing--60 );
}

@media ( max-width: 600px ) {

	.uts-seccion {
		padding-right: var( --wp--preset--spacing--50 ) !important;
		padding-left: var( --wp--preset--spacing--50 ) !important;
	}
}

/*
 * Correos dentro del contenido
 *
 * El mismo problema que ya está resuelto en el pie, pero en las secciones de
 * contacto de las páginas interiores: «saludocupacional@correo.uts.edu.co»
 * mide 249 px y el navegador no lo parte por sí solo. A 320 px, con los 24 px
 * de aire del tema y el relleno de «.uts-seccion», la columna se queda en unos
 * 210 px y la dirección se sale de la pantalla. Se parte por donde haga falta.
 */
.uts-principal a[href^="mailto:"] {
	overflow-wrap: anywhere;
}

/*
 * Lista de documentos (.uts-documentos)
 *
 * Listas donde cada punto es un documento descargable: el enlace con su
 * formato y, detrás, la fecha de publicación en <small>. Esa fecha rompe el
 * «:only-child» de la regla de arriba, así que el enlace se quedaba sin el
 * mínimo táctil de 24 px (SC 2.5.8) aunque siga siendo un destino de
 * navegación y no un enlace en medio de una frase. Aquí se lo devuelve.
 */
.uts-principal .uts-documentos li > a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.uts-principal .uts-documentos small {
	display: inline-block;
	margin-block-start: 2px;
	color: var( --wp--preset--color--apagado );
	white-space: nowrap;
}

/*
 * Cuando el punto trae además la descripción del documento —el «por medio de la
 * cual…»—, el enlace se destaca en negrita y el renglón de la descripción
 * respira: así se distingue el nombre de la norma de lo que dice, sin tener que
 * envolver nada en etiquetas extra que el editor de bloques no conserva.
 */
.uts-principal .uts-documentos li > a {
	font-weight: 600;
}

.uts-principal .uts-documentos li {
	line-height: 1.6;
}

.uts-principal .uts-documentos li + li {
	margin-block-start: var( --wp--preset--spacing--40 );
}

/*
 * Tarjeta de instrucciones (.uts-instrucciones)
 *
 * Variante de .uts-area para lo que hay que seguir paso a paso —el protocolo de
 * un accidente, un trámite—. El texto va un punto más grande que el del resto
 * de la página: son pasos que alguien lee con prisa, a veces desde el teléfono
 * y en una urgencia, así que la legibilidad manda sobre la densidad.
 *
 * OJO: no confundir con «.uts-pasos», que es otra cosa —la lista numerada de
 * la sección «Proceso de inscripción»—.
 */
/*
 * El rótulo del paso es lo que guía la lectura —«Paso 1», «Paso 2»—, así que va
 * más grande que una cejilla normal y sin el espaciado de versalitas, que a este
 * tamaño separa demasiado. El cuerpo de la tarjeta se queda en la medida de
 * lectura del resto del portal.
 */
.uts-instrucciones .uts-area__cejilla {
	margin-bottom: 6px;
	font-size: var( --wp--preset--font-size--entrada );
	font-weight: 800;
	letter-spacing: 0.04em;
}

.uts-instrucciones li {
	line-height: 1.6;
}

/*
 * Galerías de página interior
 *
 * Las fotos llevan el mismo radio que las tarjetas y las figuras: sin él, son
 * lo único con esquina viva en toda la página y se ven pegadas al fondo.
 */
.uts-principal .wp-block-gallery img {
	border-radius: var( --wp--custom--radio--base );
}

/*
 * Fichas (.uts-fichas)
 *
 * Una lista que se lee como etiquetas, no como enumeración: sirve para
 * conjuntos de nombres cortos —los talleres de un campus, las modalidades de
 * un programa— donde lo que importa es ver todo el conjunto de un vistazo.
 * Diecinueve talleres en columna hacen una tarjeta larguísima; en fichas caben
 * en tres renglones.
 */
.uts-fichas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-fichas li {
	margin: 0;
	padding: 5px 12px;
	font-size: var( --wp--preset--font-size--menor );
	line-height: 1.3;
	color: var( --wp--preset--color--tinta );
	background-color: var( --wp--preset--color--papel );
	border: 1px solid var( --wp--custom--traza--sutil );
	border-radius: var( --wp--custom--radio--pastilla );
}

/*
 * Tarjeta de área (.uts-area)
 *
 * Para las páginas de pilar —Bienestar, y las que vengan—: una foto que ocupa
 * todo el ancho de la tarjeta, la cejilla del pilar, el nombre del área, para
 * quién es y los enlaces que lleva. La foto se recorta a 16:9 desde el marco,
 * así que sirven fotos cuadradas o apaisadas sin descuadrar la rejilla, que es
 * lo que pasaba en el portal viejo.
 *
 * El color del pilar se pasa una vez en --area-tono; por defecto es el magenta
 * de Bienestar, que es el del pilar en la portada.
 */
.uts-area {
	--area-tono: var( --wp--preset--color--magenta );

	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var( --wp--custom--traza--ficha );
	border-radius: var( --wp--custom--radio--base );
	transition: border-color var(--wp--custom--transicion--base), box-shadow var(--wp--custom--transicion--base);
}

.uts-area:hover {
	border-color: var( --area-tono );
	box-shadow: 0 10px 26px -20px color-mix( in srgb, var( --area-tono ) 70%, transparent );
}

/* La foto sale del relleno de la tarjeta: va de borde a borde, arriba. */
.uts-area > figure.wp-block-image {
	margin: calc( var(--wp--preset--spacing--50) * -1 ) calc( var(--wp--preset--spacing--50) * -1 ) var(--wp--preset--spacing--40);
}

.uts-area > figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Cejilla del área, en el color del pilar. */
.uts-area__cejilla {
	margin: 0 0 4px;
	font-family: var( --wp--preset--font-family--raleway );
	font-size: var( --wp--preset--font-size--cejilla );
	font-weight: 700;
	letter-spacing: var( --wp--custom--cejilla--espaciado );
	text-transform: uppercase;
	color: var( --area-tono );
}

.uts-area h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Los botones de la tarjeta se alinean abajo, aunque los textos midan distinto. */
.uts-area .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}

@media ( prefers-reduced-motion: reduce ) {
	.uts-area { transition: none; }
}

/*
 * Variante verde: para las tarjetas que no presentan un área de Bienestar sino
 * un trámite o un destino (los servicios de Inscripción, por ejemplo). El
 * magenta es el color de Extensión y Bienestar en la portada.
 */
.uts-area--verde {
	--area-tono: var( --wp--preset--color--verde-escudo );
}

/*
 * Sello de acreditación en alta calidad dentro del contenido (p. ej. la franja
 * de gratuidad de Inscripción). El archivo mide 263 × 260: a 180 px se ve nítido
 * y no compite con el texto de al lado. En móvil, al apilarse las columnas,
 * queda centrado debajo del texto y un poco más pequeño.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-sello-acreditacion img {
	width: 180px;
	height: auto;
}

@media (max-width: 781px) {
	:is( .uts-principal, .editor-styles-wrapper ) .uts-sello-acreditacion img {
		width: 140px;
	}
}

/* Regla 4 · en móvil no hay «hover»: el toque también necesita respuesta. */
.uts-area:active {
	border-color: var( --area-tono );
}

/*
 * Espacio reservado para una fotografía (.uts-espacio-foto)
 *
 * Marca, dentro de una página ya publicada, el hueco donde va a ir una foto que
 * todavía no existe. Se ve como un recuadro punteado con una nota, para que a
 * nadie se le pase que falta; quien edita lo borra e inserta allí el bloque de
 * imagen. No se usa para decorar: si el hueco se queda, se nota.
 */
.uts-espacio-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: var( --wp--preset--spacing--50 );
	text-align: center;
	color: var( --wp--preset--color--gris );
	background-color: var( --wp--preset--color--papel );
	border: 2px dashed var( --wp--custom--traza--control );
	border-radius: var( --wp--custom--radio--base );
}

.uts-espacio-foto p {
	margin: 0;
	font-size: var( --wp--preset--font-size--menor );
}

/*
 * Tarjeta de recurso (.uts-recurso)
 *
 * Cada base de datos o biblioteca digital: el logotipo arriba —con una altura
 * fija para que nueve logos de proporciones distintas no descuadren la rejilla—,
 * el nombre, para qué sirve y el enlace de acceso. La tarjeta entera es un
 * grupo del editor, así que Comunicaciones añade o quita recursos sin tocar CSS.
 */
.uts-recurso {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var( --wp--custom--traza--ficha );
}

.uts-recurso figure.wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	margin: 0 0 var( --wp--preset--spacing--40 );
}

.uts-recurso figure.wp-block-image img {
	max-height: 72px;
	width: auto;
	object-fit: contain;
}

.uts-recurso .wp-block-buttons {
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--40 );
}

/*
 * Figuras de página interior (.uts-figura)
 *
 * El problema que resuelve: las fotos que se heredan del sitio viejo vienen con
 * proporciones y tamaños distintos —1024×678, 2227×1485, 700×986—, así que al
 * ponerlas en columnas cada una dejaba un hueco diferente y la página se leía
 * descuadrada. Aquí el MARCO manda sobre la foto: la figura fija la proporción
 * y la imagen la rellena recortándose por el centro.
 *
 * Se aplica como clase del bloque de imagen —«uts-figura uts-figura--apaisada»—,
 * así que Comunicaciones puede cambiar la foto desde el editor y el encuadre se
 * mantiene solo. El radio es el mismo de las tarjetas, para que las fotos no
 * sean lo único con esquina viva en la página.
 *
 * Sin modificador la imagen conserva su proporción original y sólo gana el
 * radio; los modificadores son para cuando varias fotos tienen que cuadrar
 * entre sí o con el bloque de texto que llevan al lado.
 */
.uts-figura img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radio--base );
}

.uts-figura--apaisada img,
.uts-figura--retrato img,
.uts-figura--cuadrada img {
	object-fit: cover;
}

/*
 * 3:2 y no 4:3 porque las fotos que vienen del sitio viejo ya están en esa
 * proporción —1024×678, 2227×1485—: así el recorte es casi nulo y la foto no
 * crece más alto que el párrafo que lleva al lado.
 */
.uts-figura--apaisada img {
	aspect-ratio: 3 / 2;
}

.uts-figura--retrato img {
	aspect-ratio: 3 / 4;
}

/*
 * Foto reducida (.uts-figura--reducida)
 *
 * Para las filas de «texto a un lado, foto al otro» cuando el texto es corto:
 * a todo el ancho de su columna la foto salía mucho más alta que el párrafo y
 * la fila se veía descompensada. Aquí la foto se limita y se centra en su
 * columna, así que baja de altura sin recortarse más —la proporción no cambia,
 * cambia el tamaño— y el aire que queda a los lados hace de separación con el
 * texto.
 *
 * El límite va en «rem» y no en porcentaje para que la foto no vuelva a crecer
 * en pantallas anchas.
 */
.uts-figura--reducida {
	max-width: 20rem;
	margin-inline: auto;
}

.uts-figura--cuadrada img {
	aspect-ratio: 1 / 1;
}

/*
 * Botón secundario del perfil del rector (.uts-rector-avance)
 *
 * Blanco con borde verde para que no compita con «Inscríbete»: es una
 * invitación a leer, no la acción principal. Va en CSS y no con los colores
 * del bloque porque las clases de color del núcleo llevan «!important» y
 * dejarían el botón sin respuesta al pasar, al enfocar y al tocar. Se listan
 * los cuatro estados porque theme.json pinta :focus y :active de todo botón.
 */
.uts-rector-avance .wp-block-button__link {
	border: 2px solid var( --wp--preset--color--verde-escudo );
	background-color: var( --wp--preset--color--blanco );
	color: var( --wp--preset--color--verde-escudo );
}

.uts-rector-avance .wp-block-button__link:hover,
.uts-rector-avance .wp-block-button__link:focus,
.uts-rector-avance .wp-block-button__link:focus-visible,
.uts-rector-avance .wp-block-button__link:active {
	background-color: var( --wp--preset--color--verde-escudo );
	color: var( --wp--preset--color--blanco );
}

/*
 * Retrato de persona (.uts-figura--arriba)
 *
 * El recorte por el centro sirve para edificios y paisajes, pero en un retrato
 * la cara queda en el tercio superior: al pasar a 16:9 en móvil, o al estirarse
 * junto a un texto largo, el centro cortaba la frente. Aquí el recorte se ancla
 * arriba, así que lo que se pierde es la parte baja de la foto.
 */
.uts-figura--arriba img {
	object-position: 50% 15%;
}

/*
 * El pie va bajo la foto, no centrado bajo una imagen estrecha: con el marco
 * ocupando todo el ancho de la columna, centrarlo lo dejaba flotando.
 */
.uts-figura figcaption {
	margin-top: var( --wp--preset--spacing--40 );
	text-align: left;
	color: var( --wp--preset--color--apagado );
}

/*
 * Columna de foto que acompaña a otra de contenido (.uts-columna-media)
 *
 * Cuando una foto va al lado de una pila de tarjetas, la proporción fija deja
 * un hueco debajo: las dos columnas del núcleo ya miden igual, pero la foto no
 * llega abajo. Con esta clase en la COLUMNA, la foto se estira hasta el borde
 * inferior y se recorta por el centro, así que las dos columnas terminan a la
 * misma altura sea cual sea el largo del texto de al lado.
 *
 * El «min-height» evita el caso contrario —una columna de texto muy corta que
 * dejaría la foto convertida en una franja.
 *
 * «height: 0» con «flex: 1 1 0» es lo que hace que MANDE EL TEXTO: sin eso, el
 * alto natural de la foto entraba en el cálculo de la fila, y una foto vertical
 * —700×986— estiraba la fila muy por debajo del último párrafo. Así la foto no
 * aporta alto propio (salvo el mínimo) y sólo rellena el que dejan las demás
 * columnas.
 */
.uts-columna-media {
	display: flex;
	flex-direction: column;
}

.uts-columna-media .uts-figura {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.uts-columna-media .uts-figura img {
	flex: 1 1 0;
	height: 0;
	min-height: 12rem;
	aspect-ratio: auto;
}

/*
 * A partir de móvil grande las columnas del núcleo se apilan, y una foto
 * retrato apilada ocupa pantalla y media. Debajo de 782 px —el punto en el que
 * el núcleo apila «wp-block-columns»— todas las figuras pasan a apaisada, y la
 * foto que se estiraba vuelve a una proporción fija porque ya no tiene ninguna
 * columna vecina cuya altura igualar.
 */
@media ( max-width: 781px ) {

	.uts-figura--retrato img,
	.uts-figura--cuadrada img,
	.uts-columna-media .uts-figura img {
		flex: none;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

/*
 * Rejilla de símbolos (.uts-simbolos)
 *
 * Escudo, bandera y logo vienen con proporciones opuestas —el escudo es más
 * alto que ancho, el logo tres veces más ancho que alto— y cada tarjeta salía
 * de una altura distinta. Aquí la imagen se encaja entera en una franja de
 * alto fijo, sin recortarse, y las tarjetas se estiran hasta la más alta.
 * La clase va en el bloque de columnas; cada columna lleva su tarjeta.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-simbolos > .wp-block-column {
	display: flex;
	flex-direction: column;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-simbolos > .wp-block-column > .wp-block-group {
	flex: 1;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-simbolos .uts-figura {
	max-width: none;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-simbolos .uts-figura img {
	height: 10rem;
	object-fit: contain;
	border-radius: 0;
}

/*
 * Fichas de funcionarios (.uts-funcionarios / .uts-funcionario)
 *
 * La rejilla la reparte el bloque «grupo» del núcleo en modo grid, así que
 * añadir o quitar a alguien desde el editor no obliga a tocar nada aquí. Esta
 * hoja sólo pone lo que el editor no expresa: el aire interno entre los datos de
 * la ficha y el tamaño de la lista de títulos, que es texto de apoyo y no debe
 * competir con el nombre.
 */
.uts-funcionario > * {
	margin-block: 0 var( --wp--preset--spacing--30 );
}

.uts-funcionario > :last-child {
	margin-block-end: 0;
}

/* El cargo reserva dos líneas aunque ocupe una: así los nombres arrancan a la
   misma altura en toda la fila de la rejilla, que es lo que deja recorrer la
   página en horizontal sin que la vista tropiece. */
.uts-funcionario > .uts-cejilla:first-child {
	min-height: 3.2em;  /* respaldo donde «lh» no exista */
	min-height: 2lh;    /* exactamente dos renglones, sea cual sea el interlineado */
}

.uts-funcionario h3 {
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.uts-funcionario__contacto {
	font-size: var( --wp--preset--font-size--menor );
	line-height: 1.5;
}

/* La cejilla secundaria de la ficha («Formación académica») va un punto por
   debajo de la del cargo: las dos son versalitas, pero sólo una titula. */
.uts-cejilla--menor {
	font-size: var( --wp--preset--font-size--cejilla );
	color: var( --wp--preset--color--apagado );
	margin-block-start: var( --wp--preset--spacing--50 ) !important;
}

.uts-funcionario__formacion {
	margin-block: 0;
	padding-inline-start: 1.1em;
	font-size: var( --wp--preset--font-size--menor );
	line-height: 1.5;
	color: var( --wp--preset--color--gris );
}

.uts-funcionario__formacion li {
	margin-block-end: 4px;
}

/*
 * Redes sociales en páginas interiores (.uts-redes)
 *
 * Se aplica como clase del bloque «Iconos sociales». El núcleo pinta cada red
 * con su color de marca y la regla de objetivo táctil de los <li> estira el
 * enlace, así que los iconos salían ovalados y de seis colores distintos.
 * Aquí se igualan al manual: círculos de 40 px en verde escudo con el icono
 * blanco; al pasar o tocar, verde oscuro con el icono en limón (8,99:1).
 */
.uts-principal .uts-redes {
	gap: var( --wp--preset--spacing--30 );
}

.uts-principal .uts-redes .wp-block-social-link {
	margin: 0;
}

.uts-principal .uts-redes .wp-social-link,
.uts-principal .uts-redes .wp-block-social-link {
	color: var( --wp--preset--color--blanco );
	background-color: var( --wp--preset--color--verde-escudo );
	border-radius: var( --wp--custom--radio--pastilla );
	transition: background-color var( --wp--custom--transicion--base ),
		color var( --wp--custom--transicion--base );
}

.uts-principal .uts-redes li > a.wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	min-height: 0;
	padding: 0;
	color: inherit;
	border-radius: inherit;
}

.uts-principal .uts-redes .wp-block-social-link-anchor svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.uts-principal .uts-redes .wp-social-link:hover,
.uts-principal .uts-redes .wp-social-link:focus-within,
.uts-principal .uts-redes .wp-social-link:active {
	color: var( --wp--preset--color--verde-limon );
	background-color: var( --wp--preset--color--verde-oscuro );
	transform: none;
}

/*
 * Tarjeta de campus (.uts-tarjeta-campus) y lista de datos (.uts-datos-campus)
 *
 * Página «Regionales». Los datos de contacto son pares «rótulo: valor», no una
 * enumeración, así que van sin viñeta. La tarjeta es una columna flexible para
 * que el botón de oferta quede al pie en las tres, aunque una dirección ocupe
 * más líneas que otra.
 */
.uts-principal .uts-datos-campus {
	margin-block: var( --wp--preset--spacing--40 );
	padding: 0;
	list-style: none;
}

.uts-principal .uts-datos-campus li + li {
	margin-top: var( --wp--preset--spacing--20 );
}

.uts-tarjeta-campus {
	display: flex;
	flex-direction: column;
}

.uts-tarjeta-campus > .wp-block-buttons {
	margin-top: auto;
}

/*
 * Tarjetas de departamento (.uts-dep__foto / .uts-dep__logo)
 *
 * Las tres imágenes vienen del portal viejo con proporciones distintas (dos
 * fotos de 3:2 y un logotipo de 6:5), así que sin una proporción común las
 * tarjetas quedaban de distinta altura y los títulos bailaban. Se fija 3:2 para
 * las tres, con una diferencia que importa: una foto se puede recortar y un
 * logotipo no —recortarlo lo mutila—, así que el logo se encaja entero sobre un
 * fondo del tema.
 */
/* La tarjeta entera responde al ratón y al toque, aunque el enlace sea el
   título: si toda la pieza se levanta, se entiende que toda la pieza lleva a
   alguna parte. Las tres quedan a la misma altura para que la fila no baile. */
.uts-dep {
	height: 100%;
	/* El color del borde lo pone la hoja, no el bloque: el «arena» de la paleta
	   sobre el papel del sitio rinde 1,16:1 y no se ve. Esta es la misma traza
	   que llevan las demás tarjetas del portal —acordeones, fichas—, así que la
	   página no estrena un borde propio. */
	border-color: var( --wp--custom--traza--ficha );
	box-shadow: 0 1px 2px rgba( 26, 20, 19, 0.04 );
	transition: border-color var( --wp--custom--transicion--base ),
		box-shadow var( --wp--custom--transicion--base );
}

.uts-dep:hover,
.uts-dep:focus-within {
	border-color: var( --wp--preset--color--verde-escudo );
	box-shadow: 0 6px 20px -14px rgba( 26, 20, 19, 0.45 );
}

.uts-dep > :first-child {
	margin-block-start: 0;
}

.uts-dep > :last-child {
	margin-block-end: 0;
}

.uts-dep h3 {
	margin-block-end: var( --wp--preset--spacing--30 );
}

.uts-dep__foto img,
.uts-dep__logo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var( --wp--custom--radio--base );
}

.uts-dep__foto img {
	object-fit: cover;
}

.uts-dep__logo img {
	object-fit: contain;
	padding: var( --wp--preset--spacing--50 );
	background-color: var( --wp--preset--color--arena );
}

/*
 * Ficha de texto (.uts-ficha-texto)
 *
 * Dos bloques de texto enfrentados —misión y visión, o su versión en inglés—:
 * fondo blanco y borde verde escudo. Al ir dentro de una sección que ya es
 * blanca, el borde es lo único que separa la tarjeta del fondo, y por eso se
 * pinta con el verde de acento (8,25:1 sobre blanco) en lugar de con la traza
 * suave de las demás fichas del portal. Comparten altura para que la pareja no
 * quede escalonada.
 */
.uts-ficha-texto {
	height: 100%;
	border-color: var( --wp--preset--color--verde-escudo );
}

.uts-ficha-texto > :first-child {
	margin-block-start: 0;
}

.uts-ficha-texto > :last-child {
	margin-block-end: 0;
}

.uts-ficha-texto h3 {
	margin-block-end: var( --wp--preset--spacing--30 );
}

/* --------------------------------------------------------------------------
   Código de Integridad (.uts-valor)

   Los cinco valores del código tienen color propio: es la identidad de esa
   estrategia y la institución la usa en todas sus piezas. Los cinco colores
   viven en theme.json (`settings.custom.integridad`), no aquí, para no dejar
   hex sueltos en la hoja.

   Cómo se usan: el color va en la CINTA del encabezado y en el punto, nunca
   como color del texto. Cuatro de los cinco —limón, azul claro, naranja y
   dorado— sobre blanco rinden entre 1,5:1 y 2,4:1 y no pasarían el mínimo de
   4,5:1 como texto (SC 1.4.3). Sobre la cinta el texto va en tinta, que rinde
   entre 7:1 y 10:1; sólo el vino del compromiso, que es oscuro, lleva texto
   blanco.
   -------------------------------------------------------------------------- */

.uts-valor {
	--uts-valor-color: var(--wp--preset--color--verde-escudo);
	--uts-valor-texto: var(--wp--preset--color--tinta);

	overflow: hidden;
}

.uts-valor--compromiso {
	--uts-valor-color: var(--wp--custom--integridad--compromiso);
	--uts-valor-texto: var(--wp--preset--color--blanco);
}

.uts-valor--respeto {
	--uts-valor-color: var(--wp--custom--integridad--respeto);
}

.uts-valor--honestidad {
	--uts-valor-color: var(--wp--custom--integridad--honestidad);
}

.uts-valor--diligencia {
	--uts-valor-color: var(--wp--custom--integridad--diligencia);
}

.uts-valor--justicia {
	--uts-valor-color: var(--wp--custom--integridad--justicia);
}

/* La cinta del encabezado: el nombre del valor sobre su color. */
.uts-principal .uts-valor__titulo {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--uts-valor-color);
	border-radius: var(--wp--custom--radio--base);
	color: var(--uts-valor-texto);
}

/* El punto es el mismo signo del material impreso, rehecho como forma. */
.uts-valor__titulo::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
	background: var(--uts-valor-texto);
	opacity: 0.9;
}

/*
 * Aire debajo del video: sin él, las fichas de los artículos quedaban pegadas
 * al borde del reproductor y la sección se leía como un solo bloque negro.
 */
.uts-principal .uts-valor > figure.wp-block-video,
.uts-principal .uts-pregunta figure.wp-block-video {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* El video del valor: nunca a pantalla completa ni arrancando solo. */
.uts-principal .uts-valor video,
.uts-principal .uts-pregunta video {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radio--base);
	background: var(--wp--preset--color--tinta);
}

.uts-valor__articulos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 17rem, 1fr ) );
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-principal .uts-valor__articulos li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-inline-start: 4px solid var(--uts-valor-color);
	border-radius: var(--wp--custom--radio--base);
}

.uts-valor__articulos .uts-valor__tipo {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

.uts-valor__articulos .uts-valor__nombre {
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.uts-valor__articulos .uts-valor__resumen {
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
}

.uts-valor__articulos a {
	margin-block-start: auto;
	align-self: start;
}

/*
 * Rejilla de filas iguales (.uts-rejilla-igual)
 *
 * En una rejilla del núcleo las celdas comparten alto dentro de SU fila, así
 * que un grupo de cinco tarjetas queda con tres altas arriba y dos más bajas
 * abajo. Con «grid-auto-rows: 1fr» todas las filas miden lo mismo y el bloque
 * se lee como un conjunto. Se aplica como clase del grupo en rejilla.
 *
 * Es la hermana de «.uts-columnas-iguales», y la diferencia importa al elegir:
 * aquella empareja las tarjetas de UNA fila, porque el bloque de columnas del
 * núcleo es un contenedor por fila —seis tarjetas en dos bloques de columnas se
 * emparejan de tres en tres y las dos bandas siguen midiendo distinto—. Cuando
 * TODAS las tarjetas tienen que verse iguales, van en un solo grupo en rejilla
 * con esta clase. El grupo ya estira sus hijos («align-items: stretch»), así
 * que la tarjeta llena su celda sin ninguna regla más.
 *
 * El selector nombra también «.editor-styles-wrapper»: sin eso la regla sólo
 * vale en el frente y quien edita ve las tarjetas descuadradas mientras el
 * visitante las ve iguales.
 *
 * La clase NO toca el reparto de columnas: de eso se encarga el propio bloque.
 * Las tres páginas que la usan declaran «minimumColumnWidth», que reparte y
 * apila solo según el ancho disponible; fijar aquí un punto de apilado se
 * llevaría por delante ese reparto en las demás.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-rejilla-igual {
	grid-auto-rows: 1fr;
}

/* --------------------------------------------------------------------------
   Tablas de contenido en páginas interiores
   --------------------------------------------------------------------------
 *
 * La tabla del núcleo llega del editor sin más que el tamaño de letra y el
 * color del trazo que fija «theme.json»: sin relleno en las celdas, sin
 * encabezado distinguible y sin manera de leerla en un teléfono. Las reglas de
 * «.uts-ficha__texto table» ya resolvían esto, pero sólo dentro de la ficha de
 * programa. Aquí se llevan al contenido de cualquier página interior.
 *
 * El dibujo es el aprobado: el trazo va FUERA, en un marco redondeado que
 * envuelve la tabla entera, y dentro no hay ni una línea vertical. Sólo un
 * filete horizontal separa una fila de la siguiente. Una rejilla completa de
 * celdas encierra cada dato en su cajón y obliga al ojo a saltar bordes; sin
 * las verticales, la vista recorre la columna de un tirón, que es como se lee
 * una lista de quince precios.
 *
 * El encabezado no es un título en negrita: es una cejilla —versalitas de
 * 11 px con espaciado— sobre arena. Pesa lo justo para saber qué hay en cada
 * columna sin competir con los datos, que es lo que sí se viene a leer.
 *
 * El selector abarca «.editor-styles-wrapper» porque la tabla se edita en
 * sitio y Comunicaciones tiene que ver el resultado mientras escribe.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table {
	margin-block: var( --wp--preset--spacing--60 );
	border: 1px solid var( --wp--custom--traza--tabla );
	border-radius: var( --wp--custom--radio--base );
}

/*
 * El marco se desborda en horizontal: a 320 px una tabla de tres columnas no
 * cabe de ninguna manera, y desplazarla es preferible a partir las palabras
 * letra a letra. Como el desplazamiento tiene que poder hacerse también con el
 * teclado (SC 2.1.1), la figura es enfocable: el «tabindex», el rol y la
 * etiqueta los pone «uts_tabla_desplazable()» en inc/contenido.php.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table {
	overflow-x: auto;
}

:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	line-height: 1.5;
}

/*
 * El núcleo cierra el encabezado con un filete de 3 px y el pie con otro. Aquí
 * el encabezado ya se separa por su propio fondo de arena, así que ese trazo
 * grueso sólo mete una raya negra en medio del dibujo.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table :where( thead, tfoot ) {
	border: 0;
}

/* El encabezado, en versalitas sobre arena. */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table th {
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
	border: 0;
	background: var( --wp--preset--color--arena );
	text-align: left;
	vertical-align: bottom;
	font-family: var( --wp--preset--font-family--raleway );
	font-size: var( --wp--preset--font-size--cejilla );
	font-weight: 700;
	letter-spacing: var( --wp--custom--cejilla--espaciado );
	text-transform: uppercase;
	color: var( --wp--preset--color--gris );
	white-space: nowrap;
}

/*
 * Las celdas sólo llevan el filete de arriba. «tabular-nums» hace que las
 * cifras de una columna midan todas lo mismo y se comparen en vertical, que es
 * la regla de la sección 4 del contrato.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table td {
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
	border: 0;
	border-top: 1px solid var( --wp--custom--traza--tabla );
	text-align: left;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}

/*
 * El rayado va de serie, sin que haya que elegir el estilo «Rayas» en el
 * editor: cualquier tabla que Comunicaciones inserte sale ya legible. Es un
 * velo de arena al 32 %, no un gris: sobre el blanco de una tarjeta o sobre el
 * papel del sitio se posa igual de bien, porque se mezcla con lo que tenga
 * detrás en vez de taparlo.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table tbody tr:nth-child( even ) td {
	background: color-mix( in srgb, var( --wp--preset--color--arena ) 32%, transparent );
}

/* El estilo «Rayas» del núcleo pinta un gris fuera de paleta: se neutraliza. */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table.is-style-stripes tbody tr:nth-child( odd ) {
	background: transparent;
}

/*
 * El enlace de una celda no es un enlace en medio de una frase: es un destino
 * de navegación, y como tal le corresponde el mínimo táctil de 24 px (SC
 * 2.5.8). Es la misma solución que ya llevan los listados de documentos.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table td a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/*
 * El pie de la tabla queda dentro del marco, separado por su propio filete:
 * describe la tabla, así que se lee como parte de ella y no como un párrafo
 * suelto de la página.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table figcaption {
	margin: 0;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
	border-top: 1px solid var( --wp--custom--traza--tabla );
	text-align: left;
	font-size: var( --wp--preset--font-size--pequeno );
	color: var( --wp--preset--color--apagado );
}

/*
 * A 782 px el texto baja un punto y el relleno se aprieta, para que quepan
 * tres columnas antes de tener que desplazar la tabla.
 */
@media ( max-width: 782px ) {

	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table table {
		font-size: var( --wp--preset--font-size--menor );
	}

	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table th,
	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table td,
	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table figcaption {
		padding: var( --wp--preset--spacing--40 );
	}

	/*
	 * El encabezado deja de ir en una línea. En el escritorio «nowrap» mantiene
	 * los rótulos limpios, pero en el teléfono fija un ancho mínimo por columna
	 * que empuja la última fuera del marco: la columna del ejemplo en PDF
	 * quedaba escondida detrás del desplazamiento y nadie la buscaba.
	 */
	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table th {
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   Aviso vigente de página interior (.uts-aviso-pagina)
   --------------------------------------------------------------------------
 *
 * Para la información que caduca —una fecha de expedición, un plazo, un cierre
 * temporal—: lo que hoy en el portal viejo va en rojo de 24 puntos y centrado,
 * que grita sin jerarquizar y falla el contraste. Aquí es una tarjeta con una
 * franja de acento al costado; el fondo, el radio y el relleno los pone el
 * bloque desde el editor, así que Comunicaciones cambia el color del aviso sin
 * tocar código y sólo tiene que borrar el grupo cuando el aviso deje de estar
 * vigente.
 */
.uts-aviso-pagina {
	position: relative;
	border-inline-start: 6px solid var( --wp--preset--color--verde-escudo );
}

.uts-aviso-pagina > :first-child {
	margin-block-start: 0;
}

.uts-aviso-pagina > :last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Proceso de inscripción (.uts-pasos, .uts-hitos, .uts-requisitos)

   Piezas de la página de Admisiones. Quien la lee es un bachiller de 17 años
   o su madre o su padre, casi siempre desde el teléfono, y casi siempre con
   una pregunta concreta: qué tengo que hacer ahora, qué papeles necesito,
   cuánto cuesta y hasta cuándo hay plazo. Todo lo que sigue existe para que
   esas cuatro respuestas se encuentren sin leer la página entera.
   -------------------------------------------------------------------------- */

/*
 * Los pasos numerados.
 *
 * El selector abarca «.editor-styles-wrapper» además de «.uts-principal» para
 * que se vean igual dentro del editor, que es donde se reordenan. Va con
 * «:is()» y no con «:where()» porque «:where()» no suma especificidad y la
 * regla perdería contra los topes de medida de la columna de lectura.
 *
 * Es «<ol class="uts-pasos"><li>»: una lista ordenada de verdad, así que un
 * lector de pantalla anuncia «1 de 6» sin que haya que escribirlo en el texto.
 * Sirve cuando cada paso cabe en una frase —Admisiones—. Cuando el paso lleva
 * subtítulos, botones, columnas o tablas, que es lo que un <li> del bloque de
 * lista no puede contener, se usa el acordeón «.uts-pasos-acordeon» de más
 * abajo, que además pliega el trámite entero.
 *
 * «grid-template-columns» es obligatorio: sin él la rejilla crea una columna
 * implícita del ancho del contenido y las tarjetas se salen de la pantalla en
 * el teléfono. Con «minmax(0, 1fr)» la columna mide lo que mide el contenedor
 * y el contenido se ajusta.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos {
	counter-reset: uts-paso;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos > li {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	padding-inline-start: calc( var(--wp--preset--spacing--60) * 2 + 24px );
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
}

/* El número en un disco verde: es el ancla visual del paso. */
:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos > li::before {
	counter-increment: uts-paso;
	content: counter( uts-paso );
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--60);
	inset-inline-start: var(--wp--preset--spacing--60);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--entrada);
	font-weight: 800;
	line-height: 1;
}

/*
 * El título del paso es h3, o h4 cuando la lista va dentro de un acordeón
 * cuyo título ya es h3 (Política de Gratuidad): así la jerarquía que anuncia
 * el lector de pantalla es correcta y el paso se ve igual.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos :is( h3, h4 ) {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--titulo-3);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos p {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/*
 * Las listas del núcleo llegan sin margen inferior, así que el párrafo que
 * cierra un paso se pegaba al último punto de la lista de arriba y los dos se
 * leían como uno solo.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos :where( ul, ol ) {
	margin-block-end: var(--wp--preset--spacing--50);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos :where( ul, ol ):last-child {
	margin-block-end: 0;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Cuándo ocurre cada paso: una línea corta, siempre en el mismo sitio. */
.uts-pasos .uts-paso__cuando {
	display: inline-flex;
	align-items: center;
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 4px var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--wp--preset--color--beige);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-oscuro);
}

/* El calendario: fecha grande arriba, hito debajo. Se lee de un vistazo. */
.uts-principal .uts-hitos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-principal .uts-hitos > li {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--blanco);
	border-radius: var(--wp--custom--radio--base);
	border-block-start: 4px solid var(--wp--preset--color--verde-limon);
}

.uts-hitos .uts-hito__fecha {
	display: block;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--verde-oscuro);
	font-variant-numeric: tabular-nums;
}

.uts-hitos .uts-hito__que {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
}

/*
 * Ficha lateral (.uts-ficha-lateral)
 *
 * El mismo aspecto que la ficha técnica del programa (.uts-programa__tarjeta):
 * títulos en versalitas grises y filas «etiqueta · valor» con el valor a la
 * derecha, en negrita y con cifras tabulares, separadas por una línea fina.
 * Es contenido editable: cada fila es un punto de lista con un <span> para la
 * etiqueta y un <strong> para el valor, así Comunicaciones cambia una fecha o
 * un valor sin tocar la estructura.
 */
/*
 * Los títulos van como título, no como cejilla: en esta ficha cada bloque
 * (fechas, valores, enlaces) es lo que el aspirante busca de un vistazo.
 * Raleway 800 en verde escudo a 17 px, como los años de «Nuestro Rector»;
 * 21 px resultó demasiado grande en una columna estrecha.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-lateral .uts-ficha-titulo {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--entrada);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--verde-escudo);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-lateral .uts-ficha-titulo:first-child {
	margin-top: 0;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-filas {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-filas > li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--traza--sutil);
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.4;
	color: var(--wp--preset--color--gris);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-filas > li:first-child {
	border-top: 0;
	padding-top: 0;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-filas > li strong {
	flex: none;
	max-width: 55%;
	text-align: right;
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	font-variant-numeric: tabular-nums;
}

/* En el editor la fila vive dentro de la capa editable: esa capa reparte etiqueta y valor. */
.editor-styles-wrapper .uts-ficha-filas > li {
	display: block;
}

.editor-styles-wrapper .uts-ficha-filas > li > .rich-text {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-lateral .uts-ficha-nota {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.5;
	color: var(--wp--preset--color--gris);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-enlaces {
	margin: 0;
	font-size: var(--wp--preset--font-size--menor);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-ficha-enlaces li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}

/*
 * Como la ficha del programa, acompaña la lectura en escritorio. Sólo si cabe
 * entera en la ventana: una ficha pegajosa más alta que la pantalla deja su
 * final fuera de alcance.
 */
/* Sólo en una columna: a todo lo ancho (el patrón «Datos de contacto») la
   ficha pegajosa se quedaba encima del contenido que la sigue. */
@media (min-width: 782px) and (min-height: 760px) {
	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-column > .uts-ficha-lateral {
		position: sticky;
		top: var(--wp--custom--cromado--aire-foco);
	}
}

/*
 * Fila de contenedores de igual altura (.uts-alto-igual, en un core/columns).
 * Primer uso: el inicio de Acreditación en Alta Calidad, donde el texto y la
 * ficha con la insignia tienen que terminar a la misma altura. Cada contenedor
 * llena su columna; la ficha deja de ser pegajosa aquí, porque un elemento
 * pegajoso no se estira. Al apilarse en el móvil vuelven a su alto natural.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-alto-igual > .wp-block-column {
	display: flex;
	flex-direction: column;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-alto-igual > .wp-block-column > .wp-block-group {
	flex: 1 1 auto;
	margin-block: 0;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-alto-igual .uts-ficha-lateral {
	position: static;
}

/*
 * Acordeón de trámites (.uts-tramites)
 *
 * Cada título lleva la pista «(ver proceso)», en letra menor y gris, para que
 * se entienda que el título se despliega. Va por CSS y no escrita en el título:
 * así no se pierde si alguien edita el título en el editor, y desaparece al
 * abrir, cuando el proceso ya está a la vista. Queda dentro del botón, así que
 * el lector de pantalla también la anuncia.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-tramites {
	margin-block-start: 0;
	gap: var( --wp--preset--spacing--30 );
}

/*
 * Menos aire entre trámites: el diseño de flujo sumaba 24 px de margen al
 * hueco de la rejilla, y el panel cerrado («hidden=until-found») conservaba su
 * relleno inferior, que dejaba una franja vacía bajo cada título.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-tramites > .wp-block-accordion-item {
	margin-block: 0;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-tramites .wp-block-accordion-panel[hidden] {
	padding-block: 0;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-tramites .wp-block-accordion-heading__toggle-title::after {
	content: " (ver proceso)";
	font-family: var(--wp--preset--font-family--source-sans-3, inherit);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--gris);
	white-space: nowrap;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-tramites .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-title::after {
	content: none;
}

/* La lista de documentos: casillas para revisar antes de empezar. */
:is( .uts-principal, .editor-styles-wrapper ) .uts-requisitos {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La frase que presenta la lista respira antes del primer documento. */
:is( .uts-principal, .editor-styles-wrapper ) p + .uts-requisitos {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * En el editor la lista se ve igual que en la página: cada documento en su
 * recuadro, con el nombre, el formato, la nota y el enlace en su sitio. Así
 * quien edita ve dónde termina un documento y empieza el siguiente, y no
 * funde los trozos por accidente. El cursor de texto sigue funcionando: los
 * <span> son formato del texto, no bloques.
 */
.editor-styles-wrapper .uts-requisitos > li {
	grid-template-columns: 22px minmax( 0, 1fr );
	min-height: 44px;
}

/*
 * En el editor el texto del punto vive dentro de una capa editable
 * (.rich-text): esa capa hace de columnas «nombre | enlace», igual que en la
 * página publicada.
 */
.editor-styles-wrapper .uts-requisitos > li > .rich-text {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: start;
	column-gap: var(--wp--preset--spacing--40);
}

/*
 * Cada documento en tres columnas: el chulo, el nombre (con su formato y, si
 * la tiene, la nota explicativa debajo) y «Ver un ejemplo» al frente. El chulo
 * reemplaza la casilla vacía, que parecía un control para marcar y no lo era.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-requisitos > li {
	display: grid;
	grid-template-columns: 22px minmax( 0, 1fr ) auto;
	align-items: start;
	column-gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--sutil);
	border-radius: var(--wp--custom--radio--base);
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-requisitos > li::before {
	content: "";
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--wp--preset--color--verde-escudo) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E" ) center / 14px no-repeat;
}

.uts-requisitos .uts-requisito__nombre {
	line-height: 1.45;
}

.uts-requisitos .uts-requisito__formato {
	margin-inline-start: 0.35em;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--apagado);
	white-space: nowrap;
}

/* La explicación va debajo del nombre, más pequeña: no compite con él. */
.uts-requisitos .uts-requisito__nota {
	display: block;
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
}

/* SC 2.5.8 · al menos 24 px de objetivo táctil. */
:is( .uts-principal, .editor-styles-wrapper ) .uts-requisitos a {
	display: inline-flex;
	align-items: center;
	justify-self: end;
	min-height: 24px;
	font-size: var(--wp--preset--font-size--menor);
	white-space: nowrap;
}

/* El dato que más se pregunta —cuánto cuesta— con el peso que merece. */
.uts-principal .uts-dato {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.uts-dato .uts-dato__cifra {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-2);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--verde-oscuro);
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 600px ) {

	:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos > li {
		padding: var(--wp--preset--spacing--50);
		padding-block-start: calc( var(--wp--preset--spacing--50) + 52px );
		padding-inline-start: var(--wp--preset--spacing--50);
	}

	:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos > li::before {
		inset-block-start: var(--wp--preset--spacing--50);
		inset-inline-start: var(--wp--preset--spacing--50);
	}

	/* En móvil el enlace baja, debajo del nombre y alineado con él. */
	:is( .uts-principal, .editor-styles-wrapper ) .uts-requisitos > li {
		grid-template-columns: 22px minmax( 0, 1fr );
	}

	:is( .uts-principal, .editor-styles-wrapper ) .uts-requisitos a {
		grid-column: 2;
		justify-self: start;
		margin-top: var(--wp--preset--spacing--20);
	}
}

/*
 * Aire bajo los subtítulos del contenido
 *
 * «theme.json» no da margen inferior a h4, h5 ni h6, así que un subtítulo del
 * contenido —el «2.1 · Valor pecuniario» del trámite de certificados, por
 * ejemplo— queda pegado a su propio párrafo y se lee como parte de él. El h2 y
 * el h3 ya lo traen; esto se lo devuelve a los tres que faltan, sin tocar la
 * escala tipográfica.
 */
.uts-principal :where( h4, h5, h6 ):not( .uts-cejilla, [class*="__" ] ) {
	margin-block-end: var( --wp--preset--spacing--30 );
}

/*
 * Columnas de igual alto (.uts-columnas-iguales)
 *
 * El bloque de columnas del núcleo estira la COLUMNA a la altura de la fila,
 * pero no lo que va dentro: dos tarjetas de color en columnas vecinas quedan
 * con el borde inferior a distinta altura y la fila se lee torcida. Esto hace
 * que el grupo de cada columna ocupe la columna entera.
 *
 * Se aplica como clase del bloque de columnas. Debajo de 782 px el núcleo
 * apila las columnas y la regla deja de tener efecto por sí sola.
 */
.uts-principal .uts-columnas-iguales > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.uts-principal .uts-columnas-iguales > .wp-block-column > .wp-block-group {
	flex: 1;
}

/*
 * Reparto de la tabla de tipos de certificado (.uts-tabla-valores)
 *
 * Sin anchos declarados el navegador reparte por contenido: el nombre del
 * certificado —que a veces trae una línea de aclaración— se lleva casi todo y
 * las dos columnas que se consultan de verdad, el valor y el ejemplo, quedan
 * apretadas contra el borde. Con estos tres anchos el valor cae siempre en el
 * mismo sitio y se comparan las quince cifras en vertical de un vistazo.
 *
 * Debajo de 782 px se sueltan: a esa anchura mandar la columna del nombre al
 * 52 % la parte en palabras sueltas.
 */
@media ( min-width: 783px ) {

	.uts-principal .uts-tabla-valores td:first-child,
	.uts-principal .uts-tabla-valores th:first-child {
		width: 52%;
	}

	.uts-principal .uts-tabla-valores td:nth-child( 2 ),
	.uts-principal .uts-tabla-valores th:nth-child( 2 ) {
		width: 30%;
	}

	.uts-principal .uts-tabla-valores td:last-child,
	.uts-principal .uts-tabla-valores th:last-child {
		width: 18%;
	}
}

/* ==========================================================================
   «Once años» (/avance/) · página conmemorativa
   --------------------------------------------------------------------------
   Corresponde a la pantalla «hitos» del lienzo aprobado. Las secciones se
   componen con bloques del núcleo; aquí va sólo lo que theme.json no expresa:
   la banda oscura de la portada, la línea de tiempo, las barras de reparto y
   los rótulos numerados de los pilares.

   Todo el texto es editable desde el editor: estas clases visten grupos y
   listas normales, no marcado propio.
   ========================================================================== */

/* --- Portada de la página: banda verde con la foto del campus --- */

.uts-hitos__hero {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--blanco);
	overflow: hidden;
}

/*
 * Relleno lateral de las franjas que toman su fondo del CSS y no del editor
 * (encabezado y «Liderazgo sectorial»). A los grupos con color de fondo elegido
 * en el editor WordPress les pone 1.25em 2.375em; éstas no lo recibían y en el
 * celular, y hasta 1150 px, el texto quedaba pegado al borde (revisión del
 * 2 oct). Mismo valor que las secciones hermanas, para que todo alinee. El alto
 * lo siguen dando los paddings del propio bloque.
 */
.uts-hitos__hero,
.uts-hitos__cesu {
	padding-left: 2.375em;
	padding-right: 2.375em;
}

/*
 * La foto va de fondo y no como <img>: es ambiente, no contenido, y así no
 * pide texto alternativo ni entra en el orden de lectura. El velo verde la
 * apaga lo suficiente para que el titular blanco siga muy por encima de 4,5:1.
 */
.uts-hitos__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient( to right, rgba( 19, 47, 32, 0.96 ) 0%, rgba( 19, 47, 32, 0.88 ) 55%, rgba( 19, 47, 32, 0.78 ) 100% ),
		var( --uts-hitos-fondo, url( "assets/img/fondo-trayectoria.jpg" ) );
	background-size: cover;
	background-position: center;
}

.uts-hitos__cejilla {
	color: var(--wp--preset--color--verde-limon);
}

/* «2015 — 2026» del encabezado: mismo tamaño que la cejilla de la franja de la portada (2 oct). */
.uts-hitos__hero .uts-hitos__cejilla:not(.uts-avance-cifras__cejilla) {
	font-size: var(--wp--custom--trayectoria--cejilla);
	font-weight: 800;
	letter-spacing: 0.14em;
	font-variant-numeric: lining-nums; /* cifras de altura pareja: Raleway trae las de estilo antiguo */
}

.uts-hitos__hero h1 {
	color: var(--wp--preset--color--blanco);
	letter-spacing: -0.03em;
}

.uts-hitos__hero p {
	color: rgba( 255, 255, 255, 0.88 );
}

/* Insignia de acreditación: morado con texto blanco. */
.uts-hitos__sello {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: var(--wp--custom--radio--pastilla);
	background-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
}

/* Ficha del rector dentro de la banda. */
.uts-hitos__rector img {
	border-radius: var(--wp--custom--radio--base);
	display: block;
	width: 100%;
	height: auto;
}

.uts-hitos__rector figcaption {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	text-align: start;
}

/* --- Tarjetas sobre la banda oscura: comparaciones y cifras --- */

.uts-hitos__panel {
	background-color: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	border-radius: var(--wp--custom--radio--base);
}

.uts-hitos__panel p { color: rgba( 255, 255, 255, 0.88 ); }

.uts-hitos__cifra {
	display: block;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-1);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--verde-limon);
}

.uts-hitos__delta {
	display: inline-block;
	margin-inline-start: 10px;
	padding: 2px 10px;
	border-radius: var(--wp--custom--radio--pastilla);
	background-color: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

/* --- Cronología: un año por fila, con su punto sobre la guía --- */

.uts-hitos__ruta {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La guía va en cada punto y no en la lista: si se dibuja en el <ul>, al
 * partirse entre páginas al imprimir el borde se pinta hasta el fondo y queda
 * una raya suelta. Es la misma lección del mapa del sitio.
 */
.uts-hitos__ruta > li {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-inline-start: 2px solid var(--wp--custom--traza--sutil);
	/* Los saltos de «Ir a un año» dejan el año por debajo de la cabecera fija. */
	scroll-margin-top: calc( var(--wp--custom--cromado--alto-encabezado) + var(--wp--preset--spacing--40) );
}

/*
 * Corte entre años (2 oct): una línea más marcada que la que separa los logros
 * de un mismo año, para que cada año se lea como un bloque. Va de fondo en la
 * caja de relleno, así que nace en la guía y no la cruza.
 */
.uts-hitos__ruta > li + li {
	background: linear-gradient( var(--wp--custom--traza--ficha), var(--wp--custom--traza--ficha) ) no-repeat 0 0 / 100% 1px;
}

/*
 * El año acompaña a sus logros mientras se baja (2 oct): se queda pegado bajo
 * la cabecera hasta que lo empuja el siguiente. El punto de la guía viaja con
 * él; por eso va en el año y no en el <li>.
 */
.uts-hitos__anio {
	position: sticky;
	top: calc( var(--wp--custom--cromado--alto-encabezado) + var(--wp--preset--spacing--40) );
	align-self: start;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--verde-escudo);
}

.uts-hitos__anio::before {
	content: "";
	position: absolute;
	/* Del borde del año a la guía: el relleno del <li> más medio punto. */
	inset-inline-start: calc( -1 * var(--wp--preset--spacing--50) - 9px );
	top: calc( 50% - 8px );
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--papel);
	border: 4px solid var(--wp--preset--color--verde-escudo);
}

/* El año en curso: punto relleno en limón, como el «2026» de las comparaciones. */
.uts-hitos__ruta > li.es-actual .uts-hitos__anio::before {
	background-color: var(--wp--preset--color--verde-limon);
}

.uts-hitos__ruta strong {
	display: block;
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.uts-hitos__detalle {
	display: block;
	margin-block-start: 4px;
	color: var(--wp--preset--color--gris);
}

/*
 * Varios hitos en un mismo año (desde el 1 oct): un solo punto por año y, a la
 * derecha, la lista de sus logros separados por un trazo fino (más fino y más
 * junto que el corte entre años).
 */
.uts-hitos__logros {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-hitos__logros > li + li {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px dashed var(--wp--custom--traza--sutil);
}

/*
 * «Ir a un año» (2 oct): una pastilla por año, enlaces de ancla a cada <li>.
 * Sin JavaScript. Los cuatro estados con dos clases: theme.json pinta los
 * estados de todo enlace en verde oscuro y ganaría con una sola.
 */
.uts-hitos__saltos ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

.uts-hitos__saltos a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: none;
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--pastilla);
	transition: background-color var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base), border-color var(--wp--custom--transicion--base);
}

.uts-hitos__saltos a:hover,
.uts-hitos__saltos a:focus,
.uts-hitos__saltos a:focus-visible,
.uts-hitos__saltos a:active {
	color: var(--wp--preset--color--blanco);
	background-color: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
}

.uts-hitos__saltos a:active { transform: translateY( 1px ); }

@media ( prefers-reduced-motion: reduce ) {
	.uts-hitos__saltos a { transition: none; }
	.uts-hitos__saltos a:active { transform: none; }
}

@media print {
	.uts-hitos__saltos { display: none; }
	.uts-hitos__anio { position: static; }
}

/* --- Seis pilares: tarjeta con su número --- */

.uts-hitos__numero {
	display: inline-block;
	min-width: 34px;
	padding: 3px 9px;
	border-radius: var(--wp--custom--radio--chico);
	background-color: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--verde-limon);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* --- Reparto por campus: rótulo, barra y cifra --- */

.uts-hitos__reparto {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.uts-hitos__reparto > li {
	display: grid;
	grid-template-columns: minmax( 120px, 170px ) 1fr minmax( 120px, auto );
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.uts-hitos__campus { font-weight: 600; }

/*
 * La barra es decorativa: la cifra y el porcentaje van escritos al lado, así
 * que quien no la ve no pierde nada. Por eso no lleva rol ni etiqueta. El
 * ancho viaja en --uts-parte, que es lo único que cambia por fila.
 */
.uts-hitos__barra {
	position: relative;
	height: 16px;
	border-radius: var(--wp--custom--radio--pastilla);
	background-color: var(--wp--preset--color--arena);
	overflow: hidden;
}

.uts-hitos__barra::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var( --uts-parte, 0% );
	background-color: var(--wp--preset--color--verde-escudo);
}

.uts-hitos__dato {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--tinta);
	text-align: end;
}

.uts-hitos__dato small { color: var(--wp--preset--color--apagado); }

/* --- Cifras de la gestión (uts/avance-cifras) ---
 * Usa el marcado y la hoja de estilos de la franja «Once años» de la portada;
 * aquí sólo se separa el rótulo «La gestión, en cifras» entre las dos filas.
 */
.uts-avance-cifras {
	margin-block-start: var(--wp--preset--spacing--60);
}

.uts-avance-cifras .uts-avance-cifras__cejilla {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
}

/*
 * «Liderazgo sectorial» (CESU). Hasta el 2 de octubre era una franja entera en
 * magenta, que a ese tamaño se leía agresiva y rompía con el resto de la
 * página. Ahora es una franja arena entre dos secciones en papel: titular en
 * verde oscuro, texto en gris, el botón verde de todo el sitio y la ficha del
 * rector en tarjeta blanca con filete limón. Todo con tokens y contraste AA:
 * sobre arena, verde oscuro 11,8:1 y gris 5,9:1; botón blanco sobre verde 8,7:1.
 */
.uts-hitos__cesu {
	background-color: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--tinta);
}

.uts-hitos__cesu h2 { color: var(--wp--preset--color--verde-oscuro); }

.uts-hitos__cesu .uts-hitos__cejilla { color: var(--wp--preset--color--gris); }

.uts-hitos__cesu .wp-block-column > p:not(.uts-cejilla) { color: var(--wp--preset--color--gris); }

/*
 * Botón «hoja de vida del rector»: verde escudo con texto blanco. Los cuatro
 * estados con dos clases, para ganarle al verde oscuro que theme.json pone en
 * todo enlace; las clases de color del núcleo llevan !important, de ahí el suyo.
 */
.uts-hitos__cesu .wp-block-button__link:hover,
.uts-hitos__cesu .wp-block-button__link:focus,
.uts-hitos__cesu .wp-block-button__link:focus-visible,
.uts-hitos__cesu .wp-block-button__link:active {
	background-color: var(--wp--preset--color--verde-oscuro) !important;
	color: var(--wp--preset--color--blanco) !important;
}

.uts-hitos__cesu .wp-block-button__link:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.uts-hitos__cesu .wp-block-button__link:active {
		transform: none;
	}
}

.uts-hitos__ficha {
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-top: 4px solid var(--wp--preset--color--verde-limon);
	border-radius: var(--wp--custom--radio--base);
	box-shadow: 0 10px 28px -18px rgba( 26, 20, 19, 0.35 );
}

.uts-hitos__ficha h3 { color: var(--wp--preset--color--verde-escudo); }
.uts-hitos__ficha p  { color: var(--wp--preset--color--gris); }

/* --- Cierre --- */

.uts-hitos__cierre { text-align: center; }

/*
 * Foto de cierre (2 oct): el rector en la Rendición de Cuentas, decorativa
 * (alt vacío). Esquinas y sombra de las tarjetas; en móvil se recorta a 4:3
 * centrada en el rector, para que no quede una franja delgada.
 */
.uts-hitos__foto-cierre img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radio--base);
	box-shadow: 0 18px 40px -24px rgba( 26, 20, 19, 0.45 );
}

@media ( max-width: 781px ) {
	.uts-hitos__foto-cierre img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 55% center;
	}
}

/*
 * Botones del cierre (oferta académica, en verde, y Acreditación, en morado):
 * las clases de color del núcleo llevan !important y anulaban el cambio al
 * pasar, así que no respondían. Se oscurece sólo el FONDO con una capa
 * (background-image, que esas clases no tocan); un filtro oscurecía también el
 * texto y el blanco quedaba grisáceo. Al pulsar, más oscuro y un píxel abajo.
 */
.uts-hitos__cierre .wp-block-button__link {
	transition: background-image var(--wp--custom--transicion--base), transform var(--wp--custom--transicion--pulsa);
}

.uts-hitos__cierre .wp-block-button__link:hover,
.uts-hitos__cierre .wp-block-button__link:focus-visible {
	background-image: linear-gradient(color-mix(in srgb, var(--wp--preset--color--tinta) 22%, transparent), color-mix(in srgb, var(--wp--preset--color--tinta) 22%, transparent));
}

.uts-hitos__cierre .wp-block-button__link:active {
	background-image: linear-gradient(color-mix(in srgb, var(--wp--preset--color--tinta) 34%, transparent), color-mix(in srgb, var(--wp--preset--color--tinta) 34%, transparent));
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.uts-hitos__cierre .wp-block-button__link {
		transition: none;
	}

	.uts-hitos__cierre .wp-block-button__link:active {
		transform: none;
	}
}

.uts-hitos__cierre::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 auto var(--wp--preset--spacing--50);
	border-radius: 2px;
	background-color: var(--wp--preset--color--verde-limon);
}

.uts-hitos__cierre p {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--tinta);
}

@media ( max-width: 781px ) {

	.uts-hitos__ruta > li { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }

	/*
	 * En una columna el año pegado tapa los logros que pasan por debajo: lleva
	 * el fondo de la sección y se pega justo al borde de la cabecera (unos
	 * píxeles por debajo de ella), sin rendija por donde asome el texto.
	 */
	.uts-hitos__anio {
		top: calc( var(--wp--custom--cromado--alto-encabezado) - 4px );
		z-index: 1;
		padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
		background-color: var(--wp--preset--color--papel);
	}

	.uts-hitos__reparto > li { grid-template-columns: 1fr; gap: 4px; }

	.uts-hitos__dato { text-align: start; }
}

/*
 * Migas sobre fondo claro: «Once años» (/avance/) y toda página sin banner.
 *
 * El bloque uts/migas está pensado para el hero verde de la plantilla
 * «banner»: pinta el texto en blanco translúcido. En estas plantillas la ruta
 * va sobre papel, así que hay que devolverle contraste. Los tonos son los de
 * siempre: «apagado» para el texto (4,74:1 sobre papel), verde escudo para los
 * enlaces y tinta para la página actual.
 *
 * «--claro» es la plantilla por defecto (page.html), la que no lleva banner:
 * ahí la ruta va encima del título, en el ancho del contenedor.
 */
/*
 * «Once años» (/avance/) va sin migas desde el 1 oct (plantilla especial y
 * temporal, a pedido). Sin ellas, el relleno superior del <main> quedaba como
 * una franja vacía sobre el bloque verde; arriba se deja el mismo aire que a
 * los lados.
 */
.uts-principal--hitos {
	padding-block-start: var(--wp--style--root--padding-left);
}

.uts-principal--hitos .uts-migas {
	padding-block: var(--wp--preset--spacing--40);
	margin-block-end: 0;
}

.uts-principal--claro .uts-migas {
	margin-block-end: 0;
}

:is( .uts-principal--hitos, .uts-principal--claro ) .uts-migas__lista { color: var(--wp--preset--color--apagado); }

:is( .uts-principal--hitos, .uts-principal--claro ) .uts-migas__item + .uts-migas__item::before { color: var(--wp--preset--color--borde); }

:is( .uts-principal--hitos, .uts-principal--claro ) .uts-migas__enlace { color: var(--wp--preset--color--verde-escudo); }

:is( .uts-principal--hitos, .uts-principal--claro ) .uts-migas__enlace:hover,
:is( .uts-principal--hitos, .uts-principal--claro ) .uts-migas__enlace:focus-visible,
:is( .uts-principal--hitos, .uts-principal--claro ) .uts-migas__enlace:active {
	color: var(--wp--preset--color--verde-oscuro);
}

:is( .uts-principal--hitos, .uts-principal--claro ) .uts-migas__actual { color: var(--wp--preset--color--tinta); }

/* --------------------------------------------------------------------------
   Acordeones del contenido (core/accordion)
   --------------------------------------------------------------------------
 *
 * El acordeón del núcleo llega sin más que el mecanismo: un botón, un panel y
 * un «+». Aquí se le da la tarjeta del sistema —fondo blanco, trazo y radio de
 * 8 px, como la ficha y los pasos— para que una página que mezcla secciones
 * abiertas y plegadas se lea como una sola cosa.
 *
 * El selector abarca «.editor-styles-wrapper» porque el acordeón se edita en
 * sitio y Comunicaciones tiene que ver la tarjeta mientras escribe.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --wp--preset--spacing--50 );
	margin-block: var( --wp--preset--spacing--60 );
}

/*
 * Un enlace «#ancla» a un bloque dentro de un panel abre ese acordeón (lo hace
 * el núcleo) y lo lleva a la vista. Con el colchón normal, el título del
 * acordeón quedaba debajo de la cabecera fija y no se sabía qué se había
 * abierto: se le suma el alto del título.
 */
.wp-block-accordion-panel > [id]:first-child {
	scroll-margin-top: calc( var( --wp--custom--cromado--aire-foco ) + 6rem );
}

:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-item {
	background: var( --wp--preset--color--blanco );
	border: 1px solid var( --wp--custom--traza--ficha );
	border-radius: var( --wp--custom--radio--base );
}

:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-heading {
	margin: 0;
	font-size: var( --wp--preset--font-size--titulo-3 );
}

:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle {
	gap: var( --wp--preset--spacing--50 );
	padding: var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--verde-oscuro );
}

/*
 * SC 2.4.7 · el anillo de foco va por dentro del botón. El botón ocupa la
 * tarjeta entera, así que un anillo por fuera se saldría del borde redondeado
 * y se vería cortado.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var( --wp--preset--color--verde-escudo );
	outline-offset: -4px;
	border-radius: var( --wp--custom--radio--base );
}

:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle:active {
	background: var( --wp--preset--color--papel );
}

/*
 * El indicador de abrir y cerrar.
 *
 * El acordeón del núcleo lo resuelve con un signo «+» de texto que gira 45°
 * hasta parecer una «×». El resto del portal —Control Interno, Rendición de
 * cuentas, la Revista, Planes estratégicos— usa desde el principio un chevrón
 * de 20 px que gira 180°, y dos gestos distintos para la misma acción obligan
 * a aprender el sitio dos veces. Aquí se unifica con aquél.
 *
 * El «+» sigue en el marcado guardado —es del bloque del núcleo y quitarlo lo
 * invalidaría en el editor—; sólo se oculta poniendo el cuerpo a cero y se
 * dibuja el chevrón con una máscara, que es lo que permite que herede el color
 * del texto y que el hover lo tiña sin repetir el trazado.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon {
	--uts-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );

	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	color: var( --wp--preset--color--verde-escudo );
	font-size: 0;
	-webkit-mask: var( --uts-chevron ) center / 20px 20px no-repeat;
	mask: var( --uts-chevron ) center / 20px 20px no-repeat;
	transition: transform var( --wp--custom--transicion--base );
}

/*
 * El núcleo gira su «+» 45°. Un chevrón a 45° queda torcido: el suyo apunta
 * arriba cuando está abierto, que es la misma convención de las otras páginas.
 */
:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate( 180deg );
}

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

	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle-icon {
		transition: none;
	}
}

:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-panel {
	padding: 0 var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--60 );
}

/*
 * Pasos numerados en acordeón (.uts-pasos-acordeon)
 *
 * La misma idea que «.uts-pasos», pero plegable: el trámite entero cabe en una
 * pantalla y quien vuelve a mitad del proceso abre su paso sin recorrer los
 * anteriores. El número lo pone el contador, igual que allí, así que añadir,
 * mover o borrar un paso renumera el resto sin tocar el texto.
 *
 * El acordeón lleva además «uts-libre» en el contenido: dentro de una tarjeta
 * que ya fija su ancho, el tope de 760 px de la columna de lectura deja un
 * hueco muerto contra el borde derecho.
 */
:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos-acordeon {
	counter-reset: uts-paso;
}

:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos-acordeon .wp-block-accordion-heading__toggle::before {
	counter-increment: uts-paso;
	content: counter( uts-paso );
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var( --wp--custom--radio--pastilla );
	background: var( --wp--preset--color--verde-escudo );
	color: var( --wp--preset--color--blanco );
	font-family: var( --wp--preset--font-family--raleway );
	font-size: var( --wp--preset--font-size--entrada );
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* El cuerpo del paso arranca bajo el título, no bajo el disco. */
:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos-acordeon .wp-block-accordion-panel {
	padding-inline-start: calc( var( --wp--preset--spacing--60 ) * 2 + 40px );
}

@media ( max-width: 600px ) {

	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-heading__toggle {
		gap: var( --wp--preset--spacing--40 );
		padding: var( --wp--preset--spacing--50 );
	}

	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-accordion-panel,
	:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos-acordeon .wp-block-accordion-panel {
		padding: 0 var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--50 );
	}

	:is( .uts-principal, .editor-styles-wrapper ) .uts-pasos-acordeon .wp-block-accordion-heading__toggle::before {
		width: 32px;
		height: 32px;
	}
}

/*
 * Bajo 600 px el relleno de las celdas se aprieta al mínimo. Cada píxel que se
 * ahorra a lado y lado de tres columnas es tres veces ese píxel que la tabla
 * deja de desplazarse, y a esa anchura lo que manda es que quepa.
 */
@media ( max-width: 600px ) {

	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table th,
	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table td,
	:is( .uts-principal, .editor-styles-wrapper ) .wp-block-table figcaption {
		padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--30 );
	}
}

/* --------------------------------------------------------------------------
   Página de error 404 (.uts-error)

   No es una página más: es la red de seguridad del cambio de portal. El sitio
   viejo vivía en «/sitio/» y el nuevo en la raíz, así que ninguna dirección
   antigua sobrevive con la misma forma y aquí va a caer quien traiga un enlace
   guardado, un resultado de buscador o un correo viejo. Por eso la pantalla se
   ordena en tres pasos —buscar, elegir un destino frecuente, avisar de que el
   enlace está roto— y no en una disculpa.

   La composición es la misma de las páginas interiores: secciones en tarjeta
   con su fondo, su radio de 8 px y su relleno puestos desde el editor, de modo
   que Comunicaciones puede cambiar los textos y los destinos desde Apariencia →
   Editor → Plantillas sin tocar una línea de código.
   -------------------------------------------------------------------------- */

.uts-error__cabecera {
	position: relative;
	overflow: hidden;
}

/*
 * El numeral grande es decoración, no información: lo que dice el error ya lo
 * dice la cejilla «Error 404» y el título. Por eso va como contenido generado
 * con texto alternativo vacío —«content: "404" / ""»—, que es la forma de
 * pedirle al lector de pantalla que lo ignore. Donde el navegador no entienda
 * esa sintaxis, la declaración entera se descarta y el numeral simplemente no
 * se pinta: nunca queda anunciado dos veces.
 */
.uts-error__cabecera::after {
	content: "404" / "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--wp--preset--spacing--60);
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: clamp(6rem, 11vw, 11rem);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--verde-escudo) 14%, transparent);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	user-select: none;
}

/*
 * La mascota —la U— saluda de pie delante del numeral, con las zapatillas en
 * el borde inferior de la tarjeta, como en la franja de la portada. Es adorno:
 * va como fondo de un seudoelemento vacío, así que no hay nada que anunciar.
 * Por debajo de 1024 px se quita: medido a 800, la tarjeta se estrecha y
 * la U tapaba el buscador.
 */
.uts-error__cabecera::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block-end: 0;
	/* A la izquierda del numeral, pisándole apenas el primer «4»: el ancho de
	   «404» en Raleway 800 es ~1,55 veces su tamaño de letra. */
	inset-inline-end: calc( var(--wp--preset--spacing--60) + clamp( 6rem, 11vw, 11rem ) * 1.25 );
	width: clamp( 140px, 14vw, 190px );
	aspect-ratio: 390 / 448;
	background: url( "assets/img/mascota-uts.png" ) no-repeat center bottom / contain;
	pointer-events: none;
}

@media ( max-width: 1023px ) {
	.uts-error__cabecera::before {
		content: none;
	}
}

/*
 * Columna de la mascota (.uts-columna-mascota), p. ej. en Portal Académico.
 *
 * Va en la COLUMNA del bloque de columnas, que ya se estira al alto de la
 * vecina; la imagen dentro queda fija bajo la cabecera mientras se baja por
 * las tarjetas (130 px: el mismo margen que usa el foco). Es adorno, con alt
 * vacío. En teléfono las columnas se apilan y la U quedaría sola al final de
 * la página, así que ahí la columna entera se quita.
 */
.uts-columna-mascota .wp-block-image {
	position: sticky;
	top: 130px;
	margin: 0;
}

.uts-columna-mascota .wp-block-image img {
	display: block;
	width: min( 100%, 240px );
	height: auto;
	margin-inline: auto;
}

@media ( max-width: 781px ) {
	.uts-columna-mascota {
		display: none;
	}
}

/*
 * La tarjeta lleva «uts-libre», así que sus hijos quedan fuera del tope de
 * 760 px del tema y se irían hasta el borde, por debajo del numeral. Se les
 * pone aquí su propia medida y se los levanta sobre la decoración.
 */
.uts-error__cabecera > * {
	position: relative;
	max-width: 38rem;
}

.uts-error__titulo {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	text-wrap: balance;
}

.uts-error__campo {
	margin-block-start: var(--wp--preset--spacing--60);
	max-width: 34rem;
}

/* --- Los destinos frecuentes --- */

/*
 * Las tarjetas son las mismas de las páginas de pilar (.uts-area), en el verde
 * del portal en vez del magenta de Bienestar: aquí no se está presentando un
 * área, se está señalando una salida.
 */
.uts-error__destinos .uts-area {
	--area-tono: var(--wp--preset--color--verde-escudo);
}

/*
 * Toda la tarjeta es el destino, no sólo el titular. El enlace del <h3> estira
 * un pseudoelemento sobre la tarjeta entera, así que el objetivo táctil pasa de
 * dos renglones de texto a los 300 × 160 px del recuadro (SC 2.5.8) sin
 * duplicar el enlace ni necesitar JavaScript. El anillo de foco sigue dibujado
 * sobre el titular, que es lo que se lee.
 */
.uts-error__destino {
	position: relative;
}

.uts-error__destino h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radio--base);
}

/*
 * La flecha vive en el <h3> y no dentro del <a>, igual que en el índice de
 * página: así no se subraya al pasar por encima y sigue al último renglón del
 * titular cuando el nombre parte en dos líneas.
 */
.uts-error__destino h3::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 0.3em;
	color: var(--wp--preset--color--verde-escudo);
	transition: transform var(--wp--custom--transicion--base);
}

.uts-error__destino:hover h3::after,
.uts-error__destino:focus-within h3::after {
	transform: translateX(3px);
}

/* Regla 4 · en móvil no hay «hover»: el toque necesita respuesta. */
.uts-error__destino:active {
	border-color: var(--area-tono);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/* --- Cierre --- */

.uts-error__cierre > * {
	max-width: 46rem;
}

.uts-error__cierre .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Por debajo de 900 px el numeral ya no cabe al lado del texto: se retira y la
 * tarjeta recupera todo su ancho. A esa anchura las columnas del núcleo aún no
 * se han apilado (lo hacen en 782 px), así que el que sobra es el numeral.
 */
@media (max-width: 900px) {

	.uts-error__cabecera::after {
		display: none;
	}

	.uts-error__cabecera > *,
	.uts-error__cierre > * {
		max-width: none;
	}
}