/**
 * Bloque uts/trayectoria — la franja de «Once años» con sus cifras.
 *
 * Ni un color literal: todo sale de theme.json. El canal de 1.200 px lo pone
 * style.css, que es donde viven las reglas compartidas con el cromado.
 *
 * @package uts
 */

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

/* --------------------------------------------------------------------------
   El fondo
   -------------------------------------------------------------------------- */

.uts-trayectoria__medio {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.uts-trayectoria__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* El interés de la foto está en el tercio superior, no en el centro. */
	object-position: 50% 20%;
	display: block;
}

/*
 * Velo al 94 %: la foto es textura, no información. Tan opaco porque debajo
 * puede ir cualquier fotografía y las cifras tienen que leerse igual.
 */
.uts-trayectoria__velo {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--wp--custom--trayectoria--velo);
}

.uts-trayectoria__interior {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
	padding-block: calc( var(--wp--preset--spacing--80) + var(--wp--preset--spacing--50) );
}

/* --------------------------------------------------------------------------
   La cabecera
   -------------------------------------------------------------------------- */

.uts-trayectoria__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--70);
	margin-block-end: var(--wp--preset--spacing--60);
}

.uts-trayectoria__presentacion {
	max-width: 512px;
}

.uts-trayectoria__cejilla {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--raleway);
	/* «2015 – 2026» más grande desde el 2 oct (13 → 20 px; 16 en móvil); el mismo token en /avance/. */
	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 */
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-limon);
}

.uts-trayectoria__raya {
	flex: none;
	display: block;
	width: var(--wp--preset--spacing--70);
	height: 1px;
	background: var(--wp--preset--color--verde-limon);
}

.uts-trayectoria__titulo {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-2);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.uts-trayectoria__texto {
	margin: 0;
	color: var(--wp--custom--trayectoria--texto);
	line-height: 1.65;
}

/*
 * El botón va en limón sobre el verde oscuro: 8,99:1. El verde escudo del tema
 * desaparecería sobre este fondo, que es el mismo aviso que da CLAUDE.md sobre
 * el menú.
 */
.uts-trayectoria .uts-trayectoria__accion {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	/* SC 2.5.8 · objetivo táctil. */
	min-height: var(--wp--custom--banner--control);
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--verde-limon);
	border-radius: var(--wp--custom--radio--chico);
	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: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transicion--base),
		color var(--wp--custom--transicion--base);
}

.uts-trayectoria .uts-trayectoria__accion svg {
	flex: none;
}

.uts-trayectoria .uts-trayectoria__accion:hover,
.uts-trayectoria .uts-trayectoria__accion:focus-visible,
.uts-trayectoria .uts-trayectoria__accion:active {
	background-color: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
}

/* Regla 4 · en móvil no hay hover, así que el toque necesita respuesta. */
.uts-trayectoria .uts-trayectoria__accion:active {
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/* Sobre el verde oscuro el anillo de foco es limón, como en el pie. */
.uts-trayectoria :where( a ):focus-visible {
	outline-color: var(--wp--preset--color--verde-limon);
}

/* --------------------------------------------------------------------------
   Las tarjetas · superficie común

   El trazo al 18 % no cumple el 3:1 del SC 1.4.11, pero no le aplica: estas
   tarjetas no son controles ni transmiten estado, y lo que hay dentro se
   identifica por su texto. Es separación visual, no información.
   -------------------------------------------------------------------------- */

.uts-comparacion,
.uts-indicador {
	background: var(--wp--custom--trayectoria--superficie);
	border: 1px solid var(--wp--custom--trayectoria--trazo);
	border-radius: var(--wp--custom--radio--base);
}

.uts-trayectoria__comparaciones,
.uts-trayectoria__indicadores {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Las dos comparaciones
   -------------------------------------------------------------------------- */

.uts-trayectoria__comparaciones {
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
}

.uts-comparacion {
	padding: var(--wp--preset--spacing--60);
}

.uts-comparacion__rotulo {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--custom--trayectoria--texto);
}

.uts-comparacion__cifras {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

/*
 * Los años se agrandaron el 2 de octubre a pedido (14 → 24 px en escritorio,
 * 18 en móvil), en Raleway 800, para que «2015 → 2026» se lea como parte del
 * mensaje y no como una nota. Siguen por debajo de la cifra (30 y 36 px), que
 * es la que manda. Vale para la portada y para /avance/, que comparten estilo.
 */
.uts-comparacion__anio {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--custom--trayectoria--anio);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--custom--trayectoria--texto);
}

/*
 * El cuerpo de las cifras sale de dos tokens propios y no de la escala de
 * titulares: el diseno pide 30 y 36 px, y entre «titulo-2» (30) y «titulo-1»
 * (52) no hay ningun paso. Con «titulo-1» el «30.692 m2» se partia en dos
 * lineas y la unidad quedaba colgando.
 */
.uts-comparacion__valor {
	display: block;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--custom--trayectoria--cifra-antes);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--custom--trayectoria--texto);
}

/*
 * La cifra de hoy es la que manda: más grande, más gruesa y en blanco. La de
 * 2015 se queda en gris para que la comparación se lea de un vistazo.
 */
.uts-comparacion__hito.es-actual .uts-comparacion__anio {
	color: var(--wp--preset--color--verde-limon);
}

.uts-comparacion__hito.es-actual .uts-comparacion__valor {
	font-size: var(--wp--custom--trayectoria--cifra);
	font-weight: 800;
	color: var(--wp--preset--color--blanco);
}

/* Crece con los años (2 oct): 20 → 32 px en escritorio, 24 en móvil. */
.uts-comparacion__flecha {
	flex: none;
	width: var(--wp--custom--trayectoria--flecha-tam);
	height: var(--wp--custom--trayectoria--flecha-tam);
	color: var(--wp--custom--trayectoria--flecha);
}

.uts-comparacion__delta {
	margin-inline-start: auto;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radio--chico);
	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--entrada);
	font-weight: 800;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Los cinco indicadores
   -------------------------------------------------------------------------- */

.uts-trayectoria__indicadores {
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: var(--wp--preset--spacing--40);
}

.uts-indicador {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	text-align: center;
}

.uts-indicador__cifra {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--custom--trayectoria--cifra);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--verde-limon);
}

/*
 * La descripción sube a cuerpo de texto normal: es una frase entera bajo una
 * cifra de 36 px, y a 13 px se leía como una nota al pie. El año se queda un
 * paso por debajo porque es un rótulo, no una frase, y compite con la cifra
 * que tiene justo debajo.
 */
.uts-indicador__descripcion {
	display: block;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
	color: var(--wp--custom--trayectoria--texto);
}

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

@media ( max-width: 900px ) {

	.uts-trayectoria__foto {
		object-position: 50% 50%;
	}

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

	/*
	 * En móvil el botón se va al final y a todo el ancho: arriba, junto al
	 * titular, empujaba las cifras fuera de la primera pantalla.
	 *
	 * «display: contents» disuelve la cabecera para que sus dos hijos pasen a
	 * ser hijos directos de la columna flexible. Sin eso el «order» del botón
	 * no tendría contra qué ordenarse y se quedaría donde estaba.
	 */
	.uts-trayectoria__cabecera {
		display: contents;
	}

	.uts-trayectoria__presentacion {
		max-width: none;
	}

	.uts-trayectoria .uts-trayectoria__accion {
		order: 9;
		width: 100%;
		justify-content: center;
		margin-block-start: 0;
	}

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

	.uts-comparacion {
		padding: var(--wp--preset--spacing--50);
	}

	.uts-comparacion__cifras {
		gap: var(--wp--preset--spacing--50);
	}

	/* Cinco en fila no caben: pasan a dos columnas. */
	.uts-trayectoria__indicadores {
		grid-template-columns: 1fr 1fr;
	}

	.uts-indicador {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

}

/*
 * A 320 px la fila de cifras de la comparación no cabe en una línea: la
 * insignia del delta baja y se coloca debajo, alineada al principio.
 */
@media ( max-width: 400px ) {

	.uts-comparacion__cifras {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40);
	}

	.uts-comparacion__delta {
		margin-inline-start: 0;
	}
}