/**
 * Bloque uts/ficha-programa — la ficha de un programa.
 *
 * Ni un color literal: todo sale de theme.json. El canal de 1.200 px lo ponen
 * las reglas de aquí para no depender del style.css compartido.
 *
 * @package uts
 */

.uts-programa {
	margin: 0;
	color: var(--wp--preset--color--tinta);
}

/*
 * La ficha de programa abre con la portada a sangre, pegada a la barra de
 * acceso rápido: se le quita el aire superior que el <main> compartido añade en
 * las demás páginas interiores. Se doblan las clases (0,2,0) para ganar a
 * «.uts-principal» —el style.css del bloque carga antes que el principal— y el
 * «margin-block-start» anula el hueco del blockGap raíz entre la barra y el main.
 */
.uts-principal.uts-principal--ficha {
	padding-block-start: 0;
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.uts-programa__portada {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--base-color, #fff);
	/*
	 * A sangre de borde a borde. El bloque va «alignfull», pero el padding raíz
	 * del tema le deja el aire lateral del contenedor (24px); se tira de la
	 * portada exactamente ese aire para llegar al borde visible. No se usa 100vw
	 * porque incluiría la barra de desplazamiento y provocaría scroll horizontal.
	 */
	margin-inline: calc( var(--wp--custom--contenedor--aire) * -1 );
}

/* Foto de fondo y su velo, para que el texto blanco siempre contraste. */
.uts-programa__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.uts-programa__foto picture {
	display: block;
	width: 100%;
	height: 100%;
}

.uts-programa__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * La foto mide 1920 × 500, que es la cinta en una pantalla de 1920: allí
	 * entra clavada. Al estrecharse la ventana la cinta conserva los 500 px de
	 * alto, así que «cover» recorta POR LOS LADOS —66 % visible en un portátil
	 * de 1280, 40 % en una tableta—. De ahí la regla del panel del editor: el
	 * motivo, centrado.
	 *
	 * El 30 % vertical sólo actúa si alguien sube una foto MÁS ALTA de 500 px:
	 * entonces sube el punto de corte para no comerse el rostro. Es el caso de
	 * las seis fotos antiguas de 1980 × 630 y de cualquier retrato de cuerpo
	 * entero, que es justo lo que hay que evitar subiendo la medida correcta.
	 */
	object-position: center 30%;
}

.uts-programa__portada.tiene-foto .uts-programa__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--programa--velo-fondo);
}

/* Sin foto, un degradado de marca para que la portada nunca se vea pobre. */
.uts-programa__portada.sin-foto {
	background: linear-gradient( 120deg, var(--wp--preset--color--verde-oscuro) 0%, var(--wp--preset--color--verde-escudo) 100% );
}

/* --------------------------------------------------------------------------
   La cinta · alto FIJO, como el banner de las demás páginas

   Igual que «.uts-banner-pagina» en style.css: alto fijo, la foto de fondo con
   «cover» y el texto encima. Antes era «clamp( 420px, 34vw, 500px )», que hacía
   que la cinta cambiara de forma con cada ancho de ventana y que no hubiera una
   medida única que darle a quien prepara la foto. Ahora hay una sola:

   ╔═══════════════════════════════════════════════════════════════════════╗
   ║  FOTO DEL PROGRAMA: 1920 × 500 px                                     ║
   ╚═══════════════════════════════════════════════════════════════════════╝

   Son exactamente las medidas de la cinta en una pantalla de 1920: ahí la foto
   entra clavada, sin recorte y sin ampliarse. En pantallas más angostas la
   cinta conserva los 500 px de alto y se estrecha, así que recorta POR LOS
   LADOS —nunca por arriba—: por eso la única regla para quien elige la foto es
   dejar el motivo centrado en horizontal.

   El alto se declara en theme.json («custom.programa.altoBanner») para que la
   medida viva en un solo sitio y no haya que buscarla por el CSS.
   -------------------------------------------------------------------------- */

@media ( min-width: 783px ) {

	.uts-programa__portada.tiene-foto {
		display: flex;
		align-items: center;
		min-height: var(--wp--custom--programa--alto-banner);
	}

	.uts-programa__portada.tiene-foto .uts-programa__portada-interior {
		width: 100%;
	}
}

/*
 * En el teléfono la cinta la sigue midiendo el texto —son seis piezas, de las
 * migas al botón de inscripción, y recortarlas dejaría el hero inservible—, con
 * un mínimo para que nunca quede raquítica cuando el título es corto.
 */
@media ( max-width: 782px ) {

	.uts-programa__portada.tiene-foto {
		min-height: var(--wp--custom--programa--alto-banner-movil);
	}
}

.uts-programa__portada-interior {
	position: relative;
	z-index: 1;
	max-width: var(--wp--custom--contenedor--ancho);
	margin-inline: auto;
	padding-inline: var(--wp--custom--contenedor--aire);
	padding-block: var(--wp--preset--spacing--70);
}

.uts-programa__migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--menor);
	color: rgba( 255, 255, 255, 0.75 );
}

.uts-programa__migas a {
	color: rgba( 255, 255, 255, 0.85 );
	text-decoration: none;
}

/*
 * :focus Y :active incluidos. theme.json pinta de verde oscuro AMBOS estados de
 * cualquier enlace, y sobre este hero —que es verde oscuro— eso borra el
 * rótulo. «:focus-visible» NO basta: sólo responde al teclado, así que tras un
 * clic de ratón el enlace se queda con «:focus» a secas y el texto se queda
 * verde hasta que se pulsa en otro sitio. Es el fallo que se vio en el botón
 * «Plan de estudios (PDF)».
 */
.uts-programa__migas a:hover,
.uts-programa__migas a:focus,
.uts-programa__migas a:focus-visible,
.uts-programa__migas a:active {
	color: var(--wp--preset--color--verde-limon);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uts-programa__nivel {
	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-limon);
}

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

/* Insignia de acreditación: el sello morado. */
.uts-programa__acreditado {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--pastilla);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	color: var(--wp--preset--color--morado-claro);
	background: rgba( 88, 28, 135, 0.92 );
	box-shadow: 0 0 0 1px rgba( 226, 201, 255, 0.35 );
}

.uts-programa__sello {
	flex: none;
	display: block;
	width: 28px;
	height: auto;
	border-radius: var(--wp--custom--radio--chico);
	background: #fff;
	padding: 2px;
}

/* Datos clave de portada */
.uts-programa__resumen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	margin: var(--wp--preset--spacing--60) 0 0;
}

.uts-programa__resumen-item dt {
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 600;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.70 );
}

.uts-programa__resumen-item dd {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--entrada);
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* Acciones de portada */
.uts-programa__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
}

.uts-programa__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 48px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	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;
	text-decoration: none;
	color: var(--wp--preset--color--verde-oscuro);
	background: var(--wp--preset--color--verde-limon);
	transition: transform var(--wp--custom--transicion--pulsa), background var(--wp--custom--transicion--base);
}

.uts-programa__cta:hover,
.uts-programa__cta:focus-visible {
	background: #fff;
	/* theme.json pone subrayado a todo <a> en hover; estos son botones. */
	text-decoration: none;
}

.uts-programa__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*
 * El color va DENTRO del :active, con dos clases (0,2,0), para ganarle al
 * «a:active» de theme.json (0,1,0), que pinta de VERDE OSCURO el texto de
 * cualquier enlace al pulsarlo. Sobre este hero —que es verde oscuro— eso
 * dejaba el rótulo invisible justo en el momento de tocarlo: el botón «Plan de
 * estudios (PDF)» desaparecía al hacer clic. Es la misma trampa que ya estaba
 * anotada en las migas y en el CTA de bloque del lateral.
 */
.uts-programa__cta:active {
	transform: translateY( 1px );
	color: var(--wp--preset--color--verde-oscuro);
}

/* Secundario: contorno sobre la portada oscura. */
.uts-programa__cta--sec {
	color: #fff;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba( 255, 255, 255, 0.55 );
}

/*
 * «:focus» va aquí junto a «:hover», y no sólo «:focus-visible».
 *
 * Es LO QUE ARREGLA EL FALLO REPORTADO. «:focus-visible» sólo casa cuando el
 * foco llega por teclado; al pulsar con el ratón el enlace se queda con
 * «:focus» a secas, y entonces manda el «a:focus» de theme.json, que pinta el
 * texto de verde oscuro. Sobre este hero —verde oscuro— el rótulo se borraba y
 * así se quedaba hasta que se pulsaba en otro punto de la página, que es
 * exactamente lo que describió el cliente.
 *
 * El anillo de foco sigue reservado a «:focus-visible» unas líneas más arriba:
 * el color tiene que ser correcto siempre, el anillo sólo cuando se navega con
 * teclado.
 */
.uts-programa__cta--sec:hover,
.uts-programa__cta--sec:focus,
.uts-programa__cta--sec:focus-visible {
	color: #fff;
	background: rgba( 255, 255, 255, 0.12 );
	box-shadow: inset 0 0 0 1.5px #fff;
}

/*
 * Regla 4 del contrato: en móvil no hay hover, así que el :active es la única
 * respuesta al toque. Se refuerza el velo y el contorno, y el texto se queda
 * en blanco.
 */
.uts-programa__cta--sec:active {
	color: #fff;
	background: rgba( 255, 255, 255, 0.22 );
	box-shadow: inset 0 0 0 1.5px #fff;
}

/* --------------------------------------------------------------------------
   Ciclo propedéutico · la ruta tecnología → universitario

   Franja «beige» a sangre entre el hero y el cuerpo. Deja claro desde el inicio
   que el programa es parte de un ciclo (6 + 4 semestres) y enlaza con su socio.
   -------------------------------------------------------------------------- */

.uts-programa__ciclo {
	margin-inline: calc( var(--wp--custom--contenedor--aire) * -1 );
	background: var(--wp--preset--color--beige);
}

.uts-programa__ciclo-interior {
	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-programa__ciclo-cejilla {
	margin: 0 0 var(--wp--preset--spacing--40);
	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);
}

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

.uts-programa__peldano {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--wp--preset--spacing--40) 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);
}

/* Peldaño actual: destacado en verde, es donde está el aspirante. */
.uts-programa__peldano.es-actual {
	background: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
}

/* Flecha de continuidad entre los dos peldaños (triángulo en el hueco). */
.uts-programa__peldano:first-child::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translate( calc( var(--wp--preset--spacing--50) * 0.5 + 50% ), -50% );
	width: 0;
	height: 0;
	border-block: 7px solid transparent;
	border-inline-start: 9px solid var(--wp--preset--color--verde-escudo);
}

.uts-programa__peldano-nivel {
	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-programa__peldano.es-actual .uts-programa__peldano-nivel {
	color: rgba( 255, 255, 255, 0.75 );
}

.uts-programa__peldano-titulo {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--entrada);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.uts-programa__peldano.es-actual .uts-programa__peldano-titulo {
	color: #fff;
}

a.uts-programa__peldano-enlace {
	color: var(--wp--preset--color--verde-escudo);
}

a.uts-programa__peldano-enlace:hover,
a.uts-programa__peldano-enlace:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uts-programa__peldano-aqui {
	align-self: flex-start;
	margin-top: 2px;
	padding: 2px 8px;
	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-programa__peldano-sem {
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.uts-programa__peldano.es-actual .uts-programa__peldano-sem {
	color: rgba( 255, 255, 255, 0.8 );
}

/*
 * La nota del ciclo va en «base», no en «menor»: no es un pie de página, es la
 * condición de ingreso —hay que graduarse antes de la tecnología— y la cuenta
 * de cuánto dura la carrera entera. Es lo que el aspirante viene a averiguar,
 * así que se lee al tamaño del cuerpo del texto y no al de una aclaración.
 */
.uts-programa__ciclo-nota {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}

@media ( max-width: 560px ) {

	.uts-programa__ruta {
		flex-direction: column;
	}

	/* En columna, el flex-basis de 260px pasa a ser altura: se anula para que
	   cada peldaño mida lo que ocupa su contenido. */
	.uts-programa__peldano {
		flex: 0 0 auto;
	}

	/* Apilados, el orden vertical ya marca la secuencia: sobra la flecha. */
	.uts-programa__peldano:first-child::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Cuerpo · prosa + lateral
   -------------------------------------------------------------------------- */

.uts-programa__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: var(--wp--preset--spacing--70);
	max-width: var(--wp--custom--contenedor--ancho);
	margin-inline: auto;
	padding-inline: var(--wp--custom--contenedor--aire);
	padding-block: var(--wp--preset--spacing--70);
	align-items: start;
}

.uts-programa__prosa {
	min-width: 0;
	font-size: var(--wp--preset--font-size--entrada);
	line-height: 1.7;
	color: var(--wp--preset--color--tinta);
	/* Las secciones se separan con «gap» y no con márgenes: dentro de una caja,
	   el margen del primer o del último hijo se escapa del contenedor. */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

/*
 * Contenedor de sección · el estándar del portal.
 *
 * Es el mismo que llevan la ficha técnica y la coordinación de la columna
 * lateral, y el de las páginas de trámites: fondo blanco, trazo sólido de
 * «borde» —el token de theme.json, nada de hex sueltos—, radio de 8 px y el
 * aire del contenedor. Así la ficha se lee como una rejilla de tarjetas y no
 * como un texto corrido al lado de unas cajas.
 */
.uts-programa__seccion {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio--base);
	padding: var(--wp--preset--spacing--60);
}

.uts-programa__prosa :where( h2 ) {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 800;
	letter-spacing: -0.01em;
	/* Dentro de su caja, el encabezado abre la sección: no necesita aire arriba. */
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--verde-escudo);
}

.uts-programa__prosa :where( p, ul, ol ) {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* El último elemento de cada caja no deja margen muerto contra el borde. */
.uts-programa__seccion > :last-child {
	margin-bottom: 0;
}

.uts-programa__seccion--video video {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radio--base);
	background: #000;
}

/* --------------------------------------------------------------------------
   Plan de estudios · malla por semestres

   Franja «arena» a sangre al pie de la ficha, con una tarjeta blanca por
   semestre. El número de tarjetas lo pone el editor (6 en tecnologías, 4 en
   el ciclo universitario); aquí sólo se dibujan.
   -------------------------------------------------------------------------- */

.uts-programa__plan {
	/* A sangre de borde a borde, con la misma técnica que la portada: se anula
	   el aire lateral del contenedor para llegar al borde visible. */
	margin-inline: calc( var(--wp--custom--contenedor--aire) * -1 );
	background: var(--wp--preset--color--arena);
}

.uts-programa__plan-interior {
	max-width: var(--wp--custom--contenedor--ancho);
	margin-inline: auto;
	padding-inline: var(--wp--custom--contenedor--aire);
	padding-block: var(--wp--preset--spacing--70);
}

.uts-programa__plan-cabecera {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--60);
}

.uts-programa__plan-ciclo {
	margin: 0;
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}

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

.uts-programa__plan-titulo {
	margin: 0;
	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);
}

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

.uts-programa__semestre {
	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;
}

.uts-programa__semestre-cabecera {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--verde-escudo);
	color: #fff;
}

.uts-programa__semestre-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--wp--custom--radio--pastilla);
	background: 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: 800;
	font-variant-numeric: tabular-nums;
}

.uts-programa__semestre-et {
	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;
}

.uts-programa__cursos {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	counter-reset: uts-curso;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.45;
	color: var(--wp--preset--color--tinta);
}

.uts-programa__cursos li {
	position: relative;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline-start: 1.9em;
	border-top: 1px solid var(--wp--custom--traza--sutil);
}

.uts-programa__cursos li:first-child {
	border-top: 0;
}

.uts-programa__cursos li::before {
	counter-increment: uts-curso;
	content: counter( uts-curso );
	position: absolute;
	inset-inline-start: 0;
	top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	color: var(--wp--preset--color--apagado);
	font-variant-numeric: tabular-nums;
}

.uts-programa__semestre-vacio {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--menor);
	font-style: italic;
	color: var(--wp--preset--color--gris);
}

@media ( max-width: 900px ) {

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

@media ( max-width: 560px ) {

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

/* --------------------------------------------------------------------------
   Lateral · ficha técnica y coordinación
   -------------------------------------------------------------------------- */

.uts-programa__lateral {
	position: sticky;
	top: var(--wp--custom--cromado--aire-foco);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.uts-programa__tarjeta {
	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-programa__tarjeta-titulo {
	margin: 0 0 var(--wp--preset--spacing--40);
	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-programa__tecnica {
	margin: 0;
}

.uts-programa__fila {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--traza--sutil);
}

.uts-programa__fila:first-child {
	border-top: 0;
	padding-top: 0;
}

.uts-programa__fila dt {
	flex: none;
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
}

.uts-programa__fila dd {
	margin: 0;
	text-align: right;
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	font-variant-numeric: tabular-nums;
}

.uts-programa__descarga,
.uts-programa__contacto a {
	color: var(--wp--preset--color--verde-escudo);
}

.uts-programa__descarga {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	text-decoration: none;
}

.uts-programa__descarga:hover,
.uts-programa__descarga:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Gratuidad: botón bajo la matrícula. Limón como superficie (permitido) con
   texto verde oscuro; en hover invierte a verde oscuro con texto limón. */
.uts-programa__gratuidad {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
	min-height: 46px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--base);
	background: 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;
	text-decoration: none;
	transition: transform var(--wp--custom--transicion--pulsa), background var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base);
}

.uts-programa__gratuidad svg {
	flex: none;
}

.uts-programa__gratuidad:hover,
.uts-programa__gratuidad:focus-visible {
	color: var(--wp--preset--color--verde-limon);
	background: var(--wp--preset--color--verde-oscuro);
	text-decoration: none;
}

.uts-programa__gratuidad:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-oscuro);
	outline-offset: 2px;
}

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

.uts-programa__gratuidad-nota {
	margin: var(--wp--preset--spacing--20) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.4;
	color: var(--wp--preset--color--gris);
}

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

	.uts-programa__gratuidad {
		transition: none;
	}

	.uts-programa__gratuidad:active {
		transform: none;
	}
}

/* Coordinación */
.uts-programa__persona {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.uts-programa__persona-foto {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: var(--wp--custom--radio--pastilla);
	object-fit: cover;
	/* Un aro sutil separa el círculo de fondos claros. */
	box-shadow: 0 0 0 1px var(--wp--custom--traza--sutil);
}

.uts-programa__persona-nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.uts-programa__contacto {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
}

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

.uts-programa__contacto-et {
	display: block;
	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);
}

/* CTA de bloque al pie del lateral */
.uts-programa__cta--bloque {
	justify-content: center;
	color: #fff;
	background: var(--wp--preset--color--verde-escudo);
}

.uts-programa__cta--bloque:hover,
.uts-programa__cta--bloque:focus,
.uts-programa__cta--bloque:focus-visible,
.uts-programa__cta--bloque:active {
	/* El color va aquí, con dos clases (0,2,0), para ganar a los :hover,
	   :focus y :active de theme.json, que si no pintarían el texto de verde
	   oscuro sobre este mismo fondo verde oscuro y lo harían desaparecer.
	   «:focus» a secas es imprescindible: tras un clic de ratón el botón
	   conserva el foco y el rótulo se quedaba borrado. */
	color: #fff;
	background: var(--wp--preset--color--verde-oscuro);
}

.uts-programa__aviso {
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--gris);
}

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

@media ( max-width: 900px ) {

	.uts-programa__cuerpo {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
		/*
		 * Se quita el aire lateral propio: en una columna ya lo pone la raíz del
		 * tema (24px en «wp-site-blocks»), y sumados dejaban la caja de sección
		 * a 48px del borde y su texto a 72px. En un teléfono de 390 eso son seis
		 * palabras por renglón. Con esto la caja arranca en el margen de siempre
		 * y el texto queda donde estaba antes de meterla.
		 */
		padding-inline: 0;
	}

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

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

@media ( max-width: 480px ) {

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

	.uts-programa__acciones .uts-programa__cta {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* Regla 5 · sin movimiento cuando se pide reducirlo */
@media ( prefers-reduced-motion: reduce ) {

	.uts-programa__cta {
		transition: none;
	}

	.uts-programa__cta:active {
		transform: none;
	}
}