/*
 * U6 · Selector de ámbitos (componentes.md, U6, I2 e I3). Sin
 * JavaScript funciona con enlaces a anclas y :target (fase 5b). Con
 * selector.js (fase 5c) la sección lleva .loha-selector--js y el estado
 * lo dan las clases que pone el script, que no navega: el CSS atiende a
 * :target solo sin script. Encima, el atenuado de las tarjetas y el
 * fundido entre estados.
 *
 *   .loha-selector__pila     la rejilla: reposo, ámbitos y barra
 *   .loha-selector__reposo   encabezado, tarjetas y CONTINUAR
 *   .loha-ambito ×4          foto fundida (E, TA) o banda (TV, M) y texto
 *   .loha-selector__barra    VOLVER · pestañas · CONTINUAR
 *
 * Altura estable: el reposo y los cuatro ámbitos están en la misma celda
 * y los que no se ven se ocultan con visibility, que conserva su sitio.
 * El módulo mide siempre lo del más alto y la página no se desplaza al
 * abrir un ámbito, al cambiar de uno a otro ni al volver. visibility
 * además los saca del árbol de accesibilidad y del orden de tabulación.
 * En M el reposo queda fuera de la celda (ver «Estados»).
 */

.loha-selector {
	--hueco-selector: clamp(1.25rem, 0.5rem + 1.5vw, 2.25rem);
}

/* M y TV: el ámbito (fila 1), su barra justo debajo (fila 2) y el
   sobrante del reposo, si es más alto, al final (fila 3). El reposo
   ocupa las tres (en M, fuera de la celda: ver «Estados»). */
.loha-selector__pila {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
}

.loha-selector__reposo {
	grid-area: 1 / 1 / -1 / -1;
	padding: var(--separacion) var(--margen);
}

.loha-ambito {
	grid-area: 1 / 1;
	min-width: 0;
}

/* Reciben el foco sin ser controles: el ámbito, al abrirlo por ancla
   (tabindex="-1"); su titular y el del reposo, desde selector.js, al
   abrir y al volver. Sin contorno. */
.loha-ambito:focus-visible,
.loha-selector [tabindex="-1"]:focus-visible {
	outline: none;
}

.loha-selector__barra {
	grid-area: 2 / 1;
	min-width: 0;
}

/* ── Estados ──────────────────────────────────────────────── */
/* Reposo: ningún ámbito abierto. Abierto: sin script, el ámbito destino
   de la URL (#alojamiento…: tarjetas, pestañas y enlaces directos llevan
   ahí); con script, el que tiene .loha-ambito--abierta, y la sección,
   .loha-selector--abierto. VOLVER apunta a #ambitos, la sección, y
   vuelve el reposo.

   Fundido (I2), en --t-selector (350 ms) y ease-out, solo de opacidad:
   se mantiene con movimiento reducido.
   - La foto del ámbito, cruzada: la que se va y la que llega cambian a
     la vez durante los 350 ms, y la banda nunca se queda vacía.
   - El texto no se cruza: el que se va se apaga en la primera mitad y
     el que llega aparece en la segunda. Vale para el texto del ámbito,
     el reposo (encabezado, tarjetas y CONTINUAR) y la barra.
   visibility acompaña: se enciende al empezar, para que el titular
   pueda recibir el foco en el acto, y se apaga cuando la opacidad llega
   a 0; saca del árbol de accesibilidad y del tabulador lo que no se ve. */

.loha-selector {
	--t-selector-mitad: calc(var(--t-selector) / 2);
}

/* Oculto */

.loha-ambito {
	visibility: hidden;
	transition: visibility 0s var(--t-selector);
}

.loha-ambito__imagen {
	opacity: 0;
	transition: opacity var(--t-selector) ease-out;
}

.loha-ambito__texto {
	opacity: 0;
	transition: opacity var(--t-selector-mitad) ease-out;
}

.loha-selector__barra,
:is(.loha-selector:not(.loha-selector--js):has(.loha-ambito:target), .loha-selector--abierto) .loha-selector__reposo {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--t-selector-mitad) ease-out,
		visibility 0s var(--t-selector-mitad);
}

/* Visible */

:is(.loha-selector:not(.loha-selector--js) .loha-ambito:target, .loha-ambito--abierta) {
	visibility: visible;
	transition: visibility 0s;
}

:is(.loha-selector:not(.loha-selector--js) .loha-ambito:target, .loha-ambito--abierta) .loha-ambito__imagen {
	opacity: 1;
}

:is(.loha-selector:not(.loha-selector--js) .loha-ambito:target, .loha-ambito--abierta) .loha-ambito__texto {
	opacity: 1;
	transition: opacity var(--t-selector-mitad) ease-out var(--t-selector-mitad);
}

.loha-selector__reposo,
:is(.loha-selector:not(.loha-selector--js):has(.loha-ambito:target), .loha-selector--abierto) .loha-selector__barra {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--t-selector-mitad) ease-out var(--t-selector-mitad),
		visibility 0s;
}

/* M: el reposo, con las cuatro tarjetas apiladas, mide el doble que un
   ámbito abierto; en la misma celda dejaba unos 1000 px de papel vacío
   bajo la barra. Por debajo de 600 px el reposo queda fuera de la celda:
   con un ámbito abierto no se pinta, y en reposo no se pintan los
   ámbitos ni la barra. Los cuatro ámbitos siguen compartiendo celda
   entre sí, así que cambiar de uno a otro no mueve la página; al abrir y
   al volver cambia el alto, y selector.js deja a la persona al principio
   del ámbito o del reposo. Aquí, entre el reposo y el ámbito no hay
   fundido: aparece el ámbito. */
@media (max-width: 599px) {
	:is(.loha-selector:not(.loha-selector--js):has(.loha-ambito:target), .loha-selector--abierto) .loha-selector__reposo,
	.loha-selector:not(.loha-selector--js):not(:has(.loha-ambito:target)) :is(.loha-ambito, .loha-selector__barra),
	.loha-selector--js:not(.loha-selector--abierto) :is(.loha-ambito, .loha-selector__barra) {
		display: none;
	}
}

/* Solo se pinta la foto del ámbito abierto (y la del que se está yendo,
   durante el fundido): las demás no se descargan hasta que hacen falta.
   Su caja se queda, así que la altura no cambia: en TV y M la banda
   tiene su 16:9; en E y TA la foto va en absoluto. selector.js adelanta
   la descarga al tocar, enfocar o señalar una tarjeta o pestaña. */
.loha-selector:not(.loha-selector--js) .loha-ambito:not(:target) .loha-ambito__foto,
.loha-selector--js .loha-ambito:not(.loha-ambito--abierta, .loha-ambito--saliente) .loha-ambito__foto {
	display: none;
}

/* Sin :has(), todo seguido y visible: el contenido está en el HTML. */
@supports not selector(:has(a)) {
	.loha-selector__pila {
		display: block;
	}

	.loha-selector:not(.loha-selector--js) :is(.loha-ambito, .loha-selector__barra, .loha-ambito__imagen, .loha-ambito__texto) {
		opacity: 1;
		visibility: visible;
	}

	.loha-selector:not(.loha-selector--js) .loha-ambito .loha-ambito__foto {
		display: block;
	}
}

/* ── Reposo ───────────────────────────────────────────────── */

ul.loha-selector__tarjetas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--medianil);
	margin-top: var(--separacion);
}

@media (min-width: 600px) {
	ul.loha-selector__tarjetas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	ul.loha-selector__tarjetas {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Toda la tarjeta es el enlace: la foto y, debajo, el nombre en una
   banda azul, en mayúsculas y en blanco (brief 03, página 5).
   Cuando recibe el foco (al volver con Escape, selector.js, o con el
   tabulador) se ve entera: bajo la cabecera, que ya descuenta el
   scroll-padding-top del documento (cabecera.css), y con un medianil de
   aire para su contorno de foco. */
.loha-selector__tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	scroll-margin-block: var(--medianil);
}

.loha-selector__foto {
	display: block;
	aspect-ratio: var(--tarjeta-proporcion);
	overflow: hidden;
}

.loha-selector__imagen {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--encuadre-x, 50%) var(--encuadre-y, 50%);
}

.loha-selector__foto > .loha-provisional {
	height: 100%;
}

.loha-selector__nombre {
	display: block;
	flex: 1;
	padding: 0.95em 1em;
	font-family: var(--sans);
	font-size: var(--fs-interfaz);
	font-weight: 600;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-align: center;
	text-transform: uppercase;
}

/* I3 · Atenuado: al señalar una tarjeta con el puntero o enfocarla con
   el teclado, las otras tres bajan al 35 % y se desaturan. Solo la foto:
   un nombre azul al 35 % bajaría de 3:1 y el brief pide mantenerlos
   legibles. Sin escala (S6). El hover, solo con puntero fino; el foco
   visible, siempre; con el foco en una y el ratón en otra, las dos se
   quedan al 100 %. Opacidad y saturación, sin movimiento: se mantiene
   con movimiento reducido. */
.loha-selector__foto > * {
	transition:
		opacity var(--t-selector) ease-out,
		filter var(--t-selector) ease-out;
}

.loha-selector__tarjetas:has(.loha-selector__tarjeta:focus-visible) .loha-selector__tarjeta:not(:focus-visible, :hover) .loha-selector__foto > * {
	opacity: 0.35;
	filter: saturate(0.3);
}

@media (hover: hover) and (pointer: fine) {
	.loha-selector__tarjetas:has(.loha-selector__tarjeta:hover) .loha-selector__tarjeta:not(:hover, :focus-visible) .loha-selector__foto > * {
		opacity: 0.35;
		filter: saturate(0.3);
	}
}

/* CONTINUAR, bajo la rejilla y a la derecha. */
.loha-selector__salida {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--hueco-selector);
}

/* ── Ámbito abierto · M y TV ──────────────────────────────── */
/* La foto entera como banda arriba y el texto debajo, como R1
   --degradado en estos tramos. */

.loha-ambito__imagen {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.loha-ambito__foto {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--encuadre-x, 50%) var(--encuadre-y, 50%);
}

.loha-ambito__imagen > .loha-provisional {
	height: 100%;
}

.loha-ambito__texto {
	padding: var(--separacion) var(--margen) 0;
}

/* DECISIÓN ABIERTA: el titular del ámbito, al tamaño de H2
   (decisiones-abiertas.md): ocupa la pantalla como el titular del
   reposo. Es un h2 desde octubre de 2026 (antes h3): con el ámbito
   abierto, el reposo y su h2 no se ven. */
.loha-ambito .loha-encabezado__titular {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.loha-ambito .loha-lista--en-linea {
	margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

/* Los remates del ámbito, con algo más de interlínea que un H3 (1,25 en
   lugar de 1,12): la enumeración de verbos de Otros espacios va en dos
   líneas y el cliente la quiere algo más suelta (revisión del 03,
   03-09). Vale igual si el salto es del campo o del ancho. */
.loha-ambito .loha-encabezado__remate {
	line-height: 1.25;
}

/* Dos remates seguidos (Otros espacios) van juntos, como un par: de la
   línea base del uno a la del otro, 1,47 em, como antes (1,25 + 0,22).
   Sigue siendo más que entre las líneas de cada uno: la enumeración se
   suelta sin llegar a la separación del par. */
.loha-ambito .loha-encabezado__remate + .loha-encabezado__remate {
	margin-top: 0.22em;
}

/* La barra: las pestañas en fila, con su propio desplazamiento
   horizontal; VOLVER y CONTINUAR en una segunda línea. */
.loha-selector__barra {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"pestanas pestanas"
		"volver continuar";
	gap: 0.5rem var(--medianil);
	align-items: center;
	padding: var(--separacion) var(--margen);
}

.loha-selector__pestanas {
	grid-area: pestanas;
	display: flex;
	overflow-x: auto;
	border-bottom: 1px solid var(--c-filete);
	scrollbar-width: thin;
}

.loha-selector__volver {
	grid-area: volver;
	justify-self: start;
}

/* VOLVER está dos veces en el HTML, donde se ve, para que el tabulador
   siga el orden visual (partes/selector.php): detrás de las pestañas en
   TV y M y delante desde TA. Se pinta solo la del tramo. */
@media (max-width: 1023px) {
	.loha-selector__volver--ta {
		display: none;
	}
}

@media (min-width: 1024px) {
	.loha-selector__volver--tv {
		display: none;
	}
}

.loha-selector__barra .loha-selector__continuar {
	grid-area: continuar;
}

.loha-selector__pestana {
	display: flex;
	align-items: center;
	/* El píxel que monta sobre el filete lo recorta la fila (overflow-x:
	   auto): un píxel más para que el área de pulsación siga en 44. */
	min-height: calc(var(--control-minimo) + 1px);
	padding: 0 1em;
	/* La marca de la activa, sin mover el texto. */
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--c-texto-2);
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.loha-selector__pestanas > li:first-child > .loha-selector__pestana {
	padding-left: 0;
}

/* La pestaña del ámbito abierto. Con script, la que lleva
   aria-current="true". Sin script, por posición, porque las anclas se
   escriben en el campo. */
.loha-selector__pestana[aria-current="true"],
.loha-selector:not(.loha-selector--js):has(.loha-ambito:nth-of-type(1):target) .loha-selector__pestanas > li:nth-child(1) > a,
.loha-selector:not(.loha-selector--js):has(.loha-ambito:nth-of-type(2):target) .loha-selector__pestanas > li:nth-child(2) > a,
.loha-selector:not(.loha-selector--js):has(.loha-ambito:nth-of-type(3):target) .loha-selector__pestanas > li:nth-child(3) > a,
.loha-selector:not(.loha-selector--js):has(.loha-ambito:nth-of-type(4):target) .loha-selector__pestanas > li:nth-child(4) > a {
	border-bottom-color: var(--beige-500);
	color: var(--c-texto);
	font-weight: 600;
}

/* En la barra, VOLVER y CONTINUAR comparten línea: la flecha, más
   pequeña y más cerca del texto que en --bajar suelto. VOLVER puede
   partirse en dos líneas (en M no caben los dos enteros). */
.loha-selector__barra .loha-accion {
	gap: 0.8em;
}

.loha-selector__barra .loha-accion__flecha {
	width: 1.5em;
	height: 1.5em;
}

/* VOLVER: la flecha, delante y hacia la izquierda. */
.loha-selector__volver {
	white-space: normal;
}

@media (hover: hover) and (pointer: fine) {
	.loha-selector__volver:hover .loha-accion__flecha {
		transform: translateX(-6px);
	}
}

.loha-selector__volver:focus-visible .loha-accion__flecha {
	transform: translateX(-6px);
}

/* En TV y M el nombre del ámbito va también como rótulo sobre el
   titular: las pestañas se desplazan y la activa puede quedar fuera de
   la vista. */

/* ── Ámbito abierto · E y TA ──────────────────────────────── */
/* Texto a la izquierda y foto a la derecha, hasta el borde, fundida en
   el papel hacia la izquierda: el tratamiento de R1 --degradado, con sus
   mismas medidas. La foto cubre todo el módulo, barra incluida.

   Encaje en una pantalla, como en las previas: el módulo mide como
   mínimo lo que queda bajo la cabecera, que acompaña al bajar (con
   JavaScript; sin él, la ventana entera). Para que el reposo y los
   ámbitos quepan en ese hueco, arriba y abajo llevan el hueco corto del
   selector (20–36 px) y no --separacion: la cabecera ya da aire encima. */

@media (min-width: 1024px) {
	.loha-selector__pila {
		min-height: 100vh;
		min-height: 100svh;
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.loha-js .loha-selector__pila {
		min-height: calc(100vh - var(--cabecera));
		min-height: calc(100svh - var(--cabecera));
	}

	/* Bajo las tarjetas, separaciones cortas: CONTINUAR tiene su propia
	   área de 44 px. Con 0,625 y 0,75 rem, a 1536 × 864 el reposo pasaba
	   10 px de la pantalla. */
	.loha-selector__reposo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--hueco-selector) 0.5rem;
	}

	ul.loha-selector__tarjetas {
		margin-top: var(--hueco-selector);
	}

	.loha-selector__salida {
		margin-top: 0.25rem;
	}

	.loha-ambito {
		display: flex;
		align-items: center;
	}

	.loha-ambito__imagen {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: var(--degradado-imagen, max(38%, 32rem));
		aspect-ratio: auto;
	}

	/* Donde el texto entra en el fundido quedan detrás trozos oscuros de
	   la foto (barandillas, respaldos, plantas) y el texto y las
	   tipologías bajaban de 4,5. El papel del fundido (.loha-fundido,
	   escena.css), pleno hasta donde acaban las tipologías y
	   transparente antes de la parte que se ve entera. Intensidad: la
	   mínima que cumple el contraste medido contra los píxeles reales de
	   las cuatro fotos (componentes.md); si cambia una foto, hay que
	   volver a medir. */
	.loha-ambito__imagen {
		--papel-alfa: 0.53;
		--papel-pleno: 35%;
		--papel-fin: 55%;
	}

	.loha-ambito__foto,
	.loha-ambito__imagen > .loha-provisional {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.loha-ambito__texto {
		position: relative;
		width: 100%;
		padding: var(--hueco-selector) var(--degradado-texto, 48%) 0.75rem var(--margen);
	}

	/* El filete y las tipologías, con la separación del resto del
	   encabezado (1–1,75 rem) y no con la suya (1,25–2,25): así el ámbito
	   más largo, Otros espacios, cabe bajo la cabecera desde 1280 px. */
	.loha-ambito .loha-encabezado__filete,
	.loha-ambito .loha-lista--en-linea {
		margin-top: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	}

	.loha-ambito .loha-encabezado__rotulo {
		display: none;
	}

	.loha-ambito .loha-encabezado__entradilla {
		max-width: min(var(--lectura), 30em);
	}

	/* La barra, en una línea sobre la foto: VOLVER, las cuatro pestañas
	   repartidas y CONTINUAR, en una caja de papel. */
	.loha-selector__barra {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--medianil);
		margin: 0 var(--margen) var(--hueco-selector);
		padding: 0.25rem clamp(1rem, 0.5rem + 1vw, 1.75rem);
		background-color: color-mix(in srgb, var(--papel) 92%, transparent);
	}

	.loha-selector__pestanas {
		flex: 1;
		justify-content: space-around;
		overflow: visible;
		border-bottom: 0;
	}

	.loha-selector__pestanas > li:first-child > .loha-selector__pestana {
		padding-left: 1em;
	}
}