/**
 * Sistema Visual de Programas UTS — capa de layout de STEP-07.
 *
 * Complementa style.css del child (tokens --uts-* y componentes base, STEP-05).
 * Fuente de valores: DESIGN.md §2–§7 y DESIGN_PROGRAMAS.md §§14–29/32–40.
 * Sin hex nuevos: solo tokens; pesos/medidas citados en DESIGN.md.
 * Carga: requiere enqueue desde functions.php del child (User-Run del
 * dueño STEP-05); hasta entonces este archivo no se sirve al front.
 *
 * @package Astra_Child_UTS
 * @since 1.0.0
 */

/* Token de escala tipográfica (DESIGN.md §3) no declarado aún en style.css. */
.uts-programas {
	--uts-fs-md: 18px;
}

/*
 * Single desktop (decisión del dueño, opción b del wireframe §39 /
 * DESIGN.md §7): contenido 62% + aside 38% sticky en ≥1200px; 1 columna
 * en <1200px (el aside fluye debajo, después del contenido).
 */
.uts-programas .uts-single-cols {
	display: grid;
	gap: var(--uts-space-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1200px) {
	.uts-programas .uts-single-cols {
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	}

	/* Evaluación: sticky solo desktop (DESIGN.md §7). */
	.uts-programas .uts-single-aside {
		position: sticky;
		top: var(--uts-space-6);
	}
}

/* Tipos (DESIGN.md §3). */
.uts-programas .uts-hero-lede {
	font-size: var(--uts-fs-md);
	color: var(--uts-text);
}
.uts-programas .uts-breadcrumbs {
	font-size: var(--uts-fs-xs);
}

/* Titular de ProgramCard parte del sistema de titulares (DESIGN.md §2). */
.uts-programas .uts-card h3 {
	color: var(--uts-heading);
}

/* Acento por nivel en ProgramCard (DESIGN.md §6.1): existente en markup. */
.uts-programas .program-card--uni {
	border-left-color: var(--uts-badge-uni-fg);
}

/* ProgramStats sobre fondo alternado (DESIGN.md §6.2): el wrapper
 * div.uts-stats-wrap existe en template-parts/program/program-stats.php. */
.uts-programas .uts-stats-wrap {
	background: var(--uts-surface-muted);
	border-radius: var(--uts-radius-md);
	padding: var(--uts-space-5);
	margin-top: var(--uts-space-5);
}

/* Ficha de contacto por campus (DESIGN.md §6.6): el markup la usa. */
.uts-programas .uts-contact-card {
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-md);
	box-shadow: var(--uts-shadow-1);
	padding: var(--uts-space-5);
	margin-bottom: var(--uts-space-4);
}

/* Fase explícita del pathway: peso de etiqueta (DESIGN.md §3: pesos 600). */
.uts-programas .uts-pathway-fase {
	font-weight: 600;
}

/* CTA sticky-bottom móvil: en ≥768px se oculta (lo gobierna el CSS del
 * child solo en <768px, donde ya existe position: sticky; bottom). */
@media (min-width: 768px) {
	.uts-programas .uts-cta-sticky {
		display: none;
	}
}

/*
 * v2 (STEP-04, SPEC E-16 §C/§F) — bloques aditivos; conserva todas las
 * reglas v1 de arriba. Valores: tokens --uts-* (style.css) y DESIGN.md §2-§7.
 * Sin !important, sin hex, sin URLs externas, sin JS.
 */

/* Filtros (SCREEN-01, O-01): lista de chips sin viñetas, pill wrap + grupo. */
.uts-programas ul.uts-filters-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--uts-space-2);
}
.uts-programas .uts-filters-group {
	min-width: 0;
}
@media (max-width: 767px) {
	.uts-programas .uts-filters-group {
		flex: 0 0 auto;
	}
}

/* StudyPlan en tarjetas (SCREEN-02, REQ-03): 1 col móvil, 2 col ≥768. */
.uts-programas .uts-plan-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--uts-space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.uts-programas .uts-plan-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}
.uts-programas .uts-semestre {
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-md);
	box-shadow: var(--uts-shadow-1);
	padding: var(--uts-space-4);
}
.uts-programas .uts-semestre-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--uts-space-3);
}
.uts-programas .uts-semestre-head h3 {
	margin: 0;
	font-size: var(--uts-fs-lg);
	font-weight: 600;
	color: var(--uts-heading);
}
.uts-programas .uts-semestre-count {
	font-size: var(--uts-fs-xs);
	font-weight: 600;
	color: var(--uts-text);
}
.uts-programas .uts-asignaturas {
	list-style: none;
	margin: var(--uts-space-3) 0 0;
	padding: 0;
	font-size: var(--uts-fs-base);
}
.uts-programas .uts-asignaturas li + li {
	margin-top: var(--uts-space-1);
}

/*
 * Ritmo del sistema CTA (REQ-04, O-06): el CTA no lleva margin propio;
 * la separación vive en sus contenedores (gap/margin del contenedor,
 * nunca CTAs pegados).
 */
.uts-programas .uts-single-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--uts-space-5);
}
.uts-programas .uts-single-aside .uts-contact-card {
	align-self: stretch;
}
.uts-programas .uts-cta-final {
	margin-top: var(--uts-space-6);
}

/* v3 premium (SPEC E-35 §F) — aditivo, sin !important/hex/CDN/JS. */

/* Token --uts-space-7 (DESIGN.md §4: 48px) aún no declarado en style.css;
 * mismo patrón de --uts-fs-md en la cabecera de este archivo. */
.uts-programas {
	--uts-space-7: 48px;
}

/* Hero archive panel (DESIGN.md §2). */
.uts-programas .uts-hero--panel {
	background: var(--uts-surface-muted);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-lg);
	padding: var(--uts-space-7) var(--uts-space-6);
}
@media (max-width: 1199px) {
	.uts-programas .uts-hero--panel {
		padding: var(--uts-space-6) var(--uts-space-5);
	}
}
@media (max-width: 767px) {
	.uts-programas .uts-hero--panel {
		padding: var(--uts-space-5) var(--uts-space-4);
	}
}
.uts-programas .uts-eyebrow {
	font-size: var(--uts-fs-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	color: var(--uts-primary);
	margin: 0 0 var(--uts-space-2);
}
.uts-programas .uts-conteo {
	display: inline-block;
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-sm);
	padding: 6px 12px;
	font-size: var(--uts-fs-base);
}
.uts-programas .uts-conteo strong {
	font-weight: 700;
	color: var(--uts-primary);
}

/* Buscador (SCREEN-01). */
.uts-programas .uts-search {
	display: flex;
	gap: var(--uts-space-3);
	margin-top: var(--uts-space-4);
}
.uts-programas .uts-search input[type="search"] {
	flex: 1;
	min-height: 48px;
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-sm);
	padding: 12px 14px;
	font-size: var(--uts-fs-base);
	color: var(--uts-text);
}
.uts-programas .uts-search input[type="search"]:focus-visible {
	outline: 2px solid var(--uts-focus);
	outline-offset: 2px;
}
.uts-programas .uts-search button.uts-cta {
	border: 0;
	font: inherit;
}
@media (max-width: 767px) {
	.uts-programas .uts-search {
		flex-direction: column;
	}
	.uts-programas .uts-search .uts-cta {
		width: 100%;
		text-align: center;
	}
}

/* Panel de filtros (SCREEN-01). */
.uts-programas nav.uts-filters {
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-lg);
	padding: var(--uts-space-5);
	gap: var(--uts-space-5);
}
.uts-programas .uts-filters-title {
	font-size: var(--uts-fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 700;
	color: var(--uts-text);
	margin: 0 0 var(--uts-space-2);
}

/* Card premium con media (SCREEN-02): padding 0 y overlay del badge. */
.uts-programas a.uts-card:has(.uts-card-media) {
	padding: 0;
	overflow: hidden;
}
.uts-programas .uts-card-media {
	position: relative;
	aspect-ratio: 400 / 250;
	overflow: hidden;
}
.uts-programas .uts-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--uts-dur-base) var(--uts-easing);
}
.uts-programas a.uts-card:hover .uts-card-media img {
	transform: scale(1.04);
}
.uts-programas .uts-card-media .uts-badge {
	position: absolute;
	top: var(--uts-space-3);
	left: var(--uts-space-3);
	box-shadow: var(--uts-shadow-1);
}
.uts-programas .uts-card-body {
	padding: var(--uts-space-4) var(--uts-space-5);
}
.uts-programas .uts-card-body .uts-meta-strong {
	font-size: var(--uts-fs-xs);
	font-weight: 600;
	color: var(--uts-heading);
}
.uts-programas .uts-flag {
	display: inline-block;
	font-size: var(--uts-fs-xs);
	font-weight: 600;
	padding: 2px 10px;
	border-radius: var(--uts-radius-sm);
	background: var(--uts-surface-muted);
	border: 1px solid var(--uts-border);
	color: var(--uts-heading);
}
.uts-programas .uts-flag--nuevo {
	background: var(--uts-badge-uni-bg);
	border-color: var(--uts-badge-uni-bg);
	color: var(--uts-badge-uni-fg);
}
.uts-programas a.uts-card:hover .uts-card-body h3 {
	text-decoration: underline;
}

/* Stats: mini-tarjetas por celda (SCREEN-02). */
.uts-programas dl.uts-stats > div {
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-sm);
	padding: var(--uts-space-3);
}

/* Pathway dots numerados (SCREEN-02). */
.uts-programas ol.uts-pathway {
	counter-reset: utspath;
}
.uts-programas ol.uts-pathway li {
	counter-increment: utspath;
	position: relative;
}
.uts-programas .uts-pathway-dot {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: var(--uts-fs-xs);
	font-weight: 700;
}
.uts-programas .uts-pathway-dot::before {
	content: counter(utspath);
}
.uts-programas .uts-pathway-node--tech .uts-pathway-dot {
	background: var(--uts-primary);
	color: var(--uts-on-primary);
}
.uts-programas .uts-pathway-node--uni .uts-pathway-dot {
	background: var(--uts-badge-uni-bg);
	color: var(--uts-badge-uni-fg);
	border: 1px solid var(--uts-badge-uni-fg);
}
.uts-programas ol.uts-pathway li:not(:first-child)::before {
	content: "";
	display: inline-block;
	width: var(--uts-space-5);
	height: 2px;
	background: var(--uts-border);
}
@media (max-width: 767px) {
	.uts-programas .uts-pathway-dot {
		margin-left: -29px;
	}
}

/* Gratuidad (SCREEN-03). */
.uts-programas .uts-gratuidad {
	display: flex;
	gap: var(--uts-space-3);
	align-items: flex-start;
	background: var(--uts-badge-uni-bg);
	border: 1px solid var(--uts-border);
	border-left: 3px solid var(--uts-badge-uni-fg);
	border-radius: var(--uts-radius-md);
	padding: var(--uts-space-4);
	margin-top: var(--uts-space-5);
}
.uts-programas .uts-gratuidad > svg {
	flex: none;
	color: var(--uts-badge-uni-fg);
}
.uts-programas .uts-gratuidad p {
	margin: 0;
	color: var(--uts-heading);
}
.uts-programas .uts-gratuidad a {
	color: var(--uts-badge-uni-fg);
}
.uts-programas .uts-gratuidad a:focus-visible {
	outline: 2px solid var(--uts-focus);
	outline-offset: 2px;
}

/* Contacto head + avatar (SCREEN-03). */
.uts-programas .uts-contact-head {
	display: flex;
	align-items: center;
	gap: var(--uts-space-3);
	margin-bottom: var(--uts-space-3);
}
.uts-programas img.uts-contact-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--uts-border);
}
.uts-programas .uts-contact-head h3 {
	margin: 0;
}

/* Tags de campos + marker de listas (SCREEN-03). */
.uts-programas ul.uts-campos-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uts-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.uts-programas ul.uts-campos-lista li {
	background: var(--uts-surface-muted);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-sm);
	padding: 6px 12px;
	font-size: var(--uts-fs-xs);
	font-weight: 600;
	color: var(--uts-heading);
}
.uts-programas ul.uts-lista li::marker {
	color: var(--uts-primary);
}

/* Plan: ghost numeral por semestre. El counter-increment vive en el
 * elemento (no en el ::before) para que el contador avance. */
.uts-programas ol.uts-plan-cards {
	counter-reset: utssem;
}
.uts-programas .uts-semestre {
	counter-increment: utssem;
	position: relative;
	overflow: hidden;
}
.uts-programas .uts-semestre::before {
	content: counter(utssem);
	position: absolute;
	right: var(--uts-space-4);
	top: var(--uts-space-3);
	font-size: var(--uts-fs-xxl);
	line-height: 1;
	font-weight: 700;
	color: var(--uts-border);
}
@supports (color: color-mix(in srgb, var(--uts-primary) 14%, transparent)) {
	.uts-programas .uts-semestre::before {
		color: color-mix(in srgb, var(--uts-primary) 14%, transparent);
	}
}

/* Paginación (SCREEN-01). */
.uts-programas .ast-pagination {
	margin-top: var(--uts-space-6);
}

/* Hero single a 2 columnas (DESIGN.md §7). Base 1 col; el modificador
 * --media (aplicado por el PHP solo con thumbnail) activa 2 col desktop. */
.uts-programas .uts-hero-cols {
	display: grid;
	gap: var(--uts-space-6);
	grid-template-columns: minmax(0, 1fr);
}
.uts-programas .uts-hero-media {
	border-radius: var(--uts-radius-md);
	box-shadow: var(--uts-shadow-1);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.uts-programas .uts-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 899px) {
	.uts-programas .uts-hero-cols--media {
		grid-template-columns: minmax(0, 1fr);
	}
	.uts-programas .uts-hero-media {
		max-width: 480px;
	}
}
@media (min-width: 900px) {
	.uts-programas .uts-hero-cols--media {
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	}
}

/*
 * v4 (STEP-01, pulido G1) — bloque ADITIVO después de v1-v3: no altera
 * ninguna regla previa. Valores: tokens --uts-* (style.css) + las medidas
 * citadas en la spec G1 §S5/S6/S1-S4 (dots 32px/40px, conectores 28x2,
 * bordes dashed). Sin !important, sin hex nuevos (el texto sobre fondo
 * sólido usa el token --uts-on-primary), sin URLs externas, sin JS.
 * Este archivo se encola después de style.css del child
 * (functions.php: dependency 'astra-child-uts'), así que las
 * redeclaraciones de abajo ganan por orden a igual especificidad.
 */

/* ---------- SCREEN-01 archive ---------- */

/*
 * S5: `.uts-conteo` pasa de pill a texto (STEP-02 lo reubica tras la
 * lede): fondo transparente, sin borde, tipografía xs y color de texto.
 * `strong` conserva su regla v3 (700 / --uts-primary).
 */
.uts-programas .uts-conteo {
	display: block;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-size: var(--uts-fs-xs);
	color: var(--uts-text);
}

/*
 * S6.1: banda del modelo con dots por fase. Contrato con STEP-02: cada
 * fase añade `<span class="uts-model-dot">` (el icono decorativo actual va
 * dentro o lo sustituye). Base 32px circular; el color vive en las
 * variantes por fase, nunca el texto (la señal de fase sigue siendo el
 * texto explícito de `.uts-model-fase-texto`).
 */
.uts-programas .uts-model-dot {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: var(--uts-fs-xs);
	font-weight: 700;
}
.uts-programas .uts-model-fase--tech .uts-model-dot {
	background: var(--uts-primary);
	color: var(--uts-on-primary);
}
.uts-programas .uts-model-fase--transicion .uts-model-dot {
	background: var(--uts-surface);
	color: var(--uts-text);
	border: 1px solid var(--uts-border);
}
.uts-programas .uts-model-fase--uni .uts-model-dot {
	background: var(--uts-badge-uni-bg);
	color: var(--uts-badge-uni-fg);
	border: 1px solid var(--uts-badge-uni-fg);
}

/* Conector 28x2 entre fases consecutivas (patrón v3 del pathway:
 * li:not(:first-child)::before). Se oculta en el riel vertical mobile. */
.uts-programas .uts-model-fase:not(:first-child)::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--uts-border);
}

/* Labels de fase: 700 y --uts-heading (spec S6.1). */
.uts-programas .uts-model-fase-texto {
	font-weight: 700;
	color: var(--uts-heading);
}

/* Riel vertical mobile: la banda se apila y los dots cuelgan de la línea
 * (mismo patrón que el pathway <768). El margen del dot calcula
 * -(borde 2 + padding 16 + radio 16 + 1) = -33px para centrar el dot de
 * 32px sobre el riel de 2px, igual que el -29px del dot de 24px en v3. */
@media (max-width: 767px) {
	.uts-programas .uts-model-fases {
		flex-direction: column;
		align-items: flex-start;
		border-left: 2px solid var(--uts-border);
		padding-left: var(--uts-space-4);
	}
	.uts-programas .uts-model-fase:not(:first-child)::before {
		display: none;
	}
	.uts-programas .uts-model-fase .uts-model-dot {
		margin-left: -33px;
	}
}

/*
 * S6.2: eyebrow con primario mezclado a tinta bajo @supports; sin soporte
 * queda la regla v3 (color --uts-primary) como fallback.
 */
@supports (color: color-mix(in srgb, var(--uts-primary) 65%, var(--uts-ink))) {
	.uts-programas .uts-eyebrow {
		color: color-mix(in srgb, var(--uts-primary) 65%, var(--uts-ink));
	}
}

/* S6.3: filtros con aire propio y grid separado. */
.uts-programas nav.uts-filters {
	margin-block: var(--uts-space-6);
}
.uts-programas .uts-grid {
	margin-top: var(--uts-space-5);
}

/* Mobile: grupos apilados en columna y scroll-x por grupo (los chips de
 * un grupo se desplazan dentro de su grupo, no toda la barra junta).
 * Anula el scroll horizontal global de v1 en nav.uts-filters. */
@media (max-width: 767px) {
	.uts-programas nav.uts-filters {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		overflow: visible;
	}
	.uts-programas .uts-filters-group {
		overflow-x: auto;
	}
	.uts-programas ul.uts-filters-list {
		flex-wrap: nowrap;
	}
}

/* Stats críticos a 1 columna en mobile (spec §7: stats/contacto 1 col). */
@media (max-width: 767px) {
	.uts-programas dl.uts-stats {
		grid-template-columns: 1fr;
	}
}

/* ---------- SCREEN-02 single ---------- */

/*
 * S1: gratuidad con dot sólido de 40px. Contrato con STEP-03: el dot
 * envuelve al SVG decorativo (aria-hidden). El texto ya es heading por la
 * regla v3 de `.uts-gratuidad p`; aquí solo el dot y el enlace.
 */
.uts-programas .uts-gratuidad-dot {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--uts-badge-uni-fg);
	color: var(--uts-on-primary);
}
.uts-programas .uts-gratuidad a {
	font-weight: 600;
	text-decoration: underline;
}

/*
 * S2: nav de anclajes panelizado (borde + radio + la sombra v1 --uts-shadow-2
 * que ya trae). Los links pasan a target de 40px (inline-flex para centrar
 * el texto verticalmente). El scroll-x de v1 se conserva en mobile.
 */
.uts-programas nav.uts-anchors {
	margin-block: var(--uts-space-6);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-md);
	padding: var(--uts-space-3) var(--uts-space-4);
}
.uts-programas nav.uts-anchors a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

/*
 * S3: pathway en 2 etapas (cards). Contrato con STEP-04: el wrapper lleva
 * SOLO `.uts-pathway--etapas` (lista enumerada, sin la clase legacy
 * `uts-pathway` para no heredar su layout flex); cada etapa es
 * `li.uts-pathway-etapa` con modificador `--tech` (borde-izq primario) o
 * `--uni` (borde-izq badge-uni-fg); cabeza `.uts-pathway-etapa-head` que
 * reutiliza `.uts-model-dot` + título `.uts-pathway-etapa-titulo`;
 * lista `.uts-pathway-steps` con pasos `.uts-pathway-paso` (divisor dashed
 * entre consecutivos) y el último paso además
 * `.uts-pathway-paso--final` (destacado); el único `<a>` del componente
 * vive intacto dentro de ese paso final.
 */
.uts-programas .uts-pathway--etapas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--uts-space-5);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
	.uts-programas .uts-pathway--etapas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}
.uts-programas .uts-pathway-etapa {
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	/* Borde-izq 3px: mismo grosor y patrón que las ProgramCards (v1). */
	border-left: 3px solid var(--uts-primary);
	border-radius: var(--uts-radius-md);
	box-shadow: var(--uts-shadow-1);
	padding: var(--uts-space-5);
}
.uts-programas .uts-pathway-etapa--uni {
	border-left-color: var(--uts-badge-uni-fg);
}
.uts-programas .uts-pathway-etapa-head {
	display: flex;
	align-items: center;
	gap: var(--uts-space-3);
}
.uts-programas .uts-pathway-etapa--tech .uts-model-dot {
	background: var(--uts-primary);
	color: var(--uts-on-primary);
}
.uts-programas .uts-pathway-etapa--uni .uts-model-dot {
	background: var(--uts-badge-uni-bg);
	color: var(--uts-badge-uni-fg);
	border: 1px solid var(--uts-badge-uni-fg);
}
.uts-programas .uts-pathway-etapa-titulo {
	margin: 0;
	font-size: var(--uts-fs-lg);
	font-weight: 700;
	color: var(--uts-heading);
}
.uts-programas .uts-pathway-steps {
	list-style: none;
	margin: var(--uts-space-4) 0 0;
	padding: 0;
}
.uts-programas .uts-pathway-paso {
	font-size: var(--uts-fs-base);
	color: var(--uts-text);
}
/* Divisor dashed entre pasos consecutivos. */
.uts-programas .uts-pathway-paso + .uts-pathway-paso {
	margin-top: var(--uts-space-2);
	padding-top: var(--uts-space-3);
	border-top: 1px dashed var(--uts-border);
}
.uts-programas .uts-pathway-paso--final {
	padding: var(--uts-space-3);
	background: var(--uts-surface-muted);
	border-radius: var(--uts-radius-sm);
	font-weight: 600;
	color: var(--uts-heading);
}
.uts-programas .uts-pathway-steps a {
	color: inherit;
	text-decoration: underline;
}
.uts-programas .uts-pathway-steps a:focus-visible {
	outline: 2px solid var(--uts-focus);
	outline-offset: 2px;
}

/*
 * S4: ritmo de secciones del single (incluye #relacionados y
 * #inscripcion, que llevan .uts-section). margin-top space-7 redeclarado
 * después del margin-top space-6 de v2 en .uts-cta-final gana por orden.
 */
.uts-programas .uts-section {
	margin-top: var(--uts-space-7);
}
.uts-programas .uts-section h2 {
	margin-bottom: var(--uts-space-4);
}

/*
 * v5 leads (CRM-S2, corrección visual) — bloque ADITIVO después de v1-v4:
 * la sección solicitar información vive en el aside del single, tras
 * Contacto, como panel de tarjeta igual que .uts-contact-card (DESIGN.md
 * §6.6). Los tokens de estado --uts-success/--uts-danger están
 * documentados en DESIGN.md §2 y se declaran aquí con el mismo patrón de
 * --uts-fs-md/--uts-space-7 (aún no existen en style.css). Sin !important,
 * sin hex fuera de los de DESIGN.md §2, sin URLs, sin JS.
 */

/* Tokens de estado (DESIGN.md §2) aún no declarados en style.css. */
.uts-programas {
	--uts-success: #166534;
	--uts-danger: #B91C1C;
}

/*
 * Panel del formulario en el aside: superficie, borde, radio y sombra del
 * sistema (mismas reglas v1 de .uts-contact-card). El margin-top de 48px
 * de .uts-section (v4) queda anulado dentro del aside: la separación la
 * aporta el gap v2 del aside (24px). align-self: stretch para cubrir el
 * ancho del aside (la flex base alinea en flex-start).
 */
.uts-programas .uts-single-aside .uts-lead-panel {
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-md);
	box-shadow: var(--uts-shadow-1);
	padding: var(--uts-space-5);
	align-self: stretch;
	margin-top: 0;
}
@media (max-width: 767px) {
	.uts-programas .uts-single-aside .uts-lead-panel {
		padding: var(--uts-space-4);
	}
}

/* Aviso de estado (Contrato: ?lead=ok|error vía handler uts_lead).
 * Superficie neutra seria; la señal de estado es el borde izquierdo en
 * el token de estado correspondiente (no depende solo de color: el copy
 * explícito ya lo dice). */
.uts-programas .uts-lead-aviso {
	background: var(--uts-surface-muted);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-sm);
	padding: var(--uts-space-3) var(--uts-space-4);
	margin: 0 0 var(--uts-space-4);
	font-size: var(--uts-fs-base);
	color: var(--uts-heading);
}
.uts-programas .uts-lead-aviso--ok {
	border-left: 3px solid var(--uts-success);
}
.uts-programas .uts-lead-aviso--error {
	border-left: 3px solid var(--uts-danger);
}

/* Formulario: labels encima de los campos (sin placeholders como
 * etiqueta), ritmo de labels y campos (DESIGN.md §3: peso 600). */
.uts-programas .uts-lead-form {
	margin: 0;
}
.uts-programas .uts-lead-form .uts-lead-field {
	margin: 0 0 var(--uts-space-4);
}
.uts-programas .uts-lead-form .uts-lead-field label {
	display: block;
	margin-bottom: var(--uts-space-2);
	font-size: var(--uts-fs-base);
	font-weight: 600;
	color: var(--uts-heading);
}

/* Inputs y textarea: fondo surface, borde, radio y padding cómodo,
 * mismos valores del buscador v3 (padding 12x14, min-height 48). El
 * font-size base (16px) evita el zoom automático de iOS. El honeypot
 * (input sin .uts-lead-input, p display:none) NO recibe estos estilos. */
.uts-programas .uts-lead-form .uts-lead-input {
	width: 100%;
	min-height: 48px;
	background: var(--uts-surface);
	border: 1px solid var(--uts-border);
	border-radius: var(--uts-radius-sm);
	padding: 12px 14px;
	font-size: var(--uts-fs-base);
	line-height: 1.65;
	color: var(--uts-text);
	font-family: inherit;
}
.uts-programas .uts-lead-form textarea.uts-lead-input {
	min-height: 0;
	width: 100%;
	resize: vertical;
}
.uts-programas .uts-lead-form .uts-lead-input:focus-visible {
	outline: 2px solid var(--uts-focus);
	outline-offset: 2px;
}

/* Checkbox en fila legible: la fila lleva el mismo ritmo de separación
 * de los campos; el checkbox nativo flota al inicio del texto largo. */
.uts-programas .uts-lead-form .uts-lead-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--uts-space-2);
	margin: 0 0 var(--uts-space-4);
}
.uts-programas .uts-lead-form .uts-lead-consent input {
	flex: none;
	margin: 0;
}
.uts-programas .uts-lead-form .uts-lead-consent label {
	font-size: var(--uts-fs-base);
	font-weight: 400;
	color: var(--uts-text);
}

/* Submit: reutiliza .uts-cta íntegra; los resets (borde/fuente heredada)
 * siguen el patrón existente de .uts-search button.uts-cta (v3). El
 * margin-top queda en 0 porque el último <p> ya aporta la separación. */
.uts-programas .uts-lead-form .uts-lead-submit {
	border: 0;
	font: inherit;
	margin-top: 0;
	cursor: pointer;
}