/*
 * 04 · Casos seleccionados (componentes.md, U12 a U14).
 *
 *   U13 · .loha-casos            índice: encabezado y tarjetas
 *   U12 · .loha-tarjeta-caso     tarjeta de un caso, 6:7, toda enlace
 *   U14 · .loha-caso-pantalla    pantallas de un caso, por bloques:
 *           --ancha     texto y foto ancha
 *           --apiladas  foto grande y dos apiladas, con su caja
 *           --franja    texto, foto principal y franja (o serie)
 *           --matriz    texto y matriz de etapas
 *           --dos-filas texto y fotos en dos filas
 *           --red       texto y mapa en red
 *           --mosaico   texto, mosaico y fila de iconos
 *           --pasos     fotos, texto y pasos
 *           --voces     texto, voces y foto lateral (sobre azul)
 *           --cierre    cierre con pregunta
 *         .loha-caso-apertura  apertura con foto de fondo, arriba o abajo,
 *                              con el velo de las aperturas
 *
 * Fotos sin filtros; las únicas capas sobre una foto son el degradado
 * azul de las tarjetas y el velo de papel de las aperturas, hechos aquí
 * y no dentro del archivo.
 *
 * DECISIÓN ABIERTA (CPA, decisiones-abiertas.md): el acento del sistema
 * (beige) en lugar del naranja de las previas; solo el contador en cada
 * capítulo, sin rótulo; y en móvil, el texto primero y después las fotos,
 * como en los otros casos.
 */

/* ── Nota con línea (índice y casos) ──────────────────────── */
/* Frase corta en Manrope a tamaño de lectura, con una línea vertical
   beige a la izquierda, como el cierre de la pantalla 2 del 05. El tramo
   destacado: color y seminegrita (convenciones). */
.loha-nota-linea {
	padding-left: clamp(1rem, 0.7rem + 1vw, 1.75rem);
	border-left: 2px solid var(--beige-500);
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

.loha-nota-linea .loha-acento {
	color: var(--c-rotulo);
	font-style: normal;
	font-weight: 600;
}

/* ── U13 · Índice ─────────────────────────────────────────── */

.loha-casos {
	padding: var(--area-segura) var(--margen) var(--separacion);
}

.loha-casos__cabeza {
	display: grid;
	gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}

/* El titular (h1) abre la página: al escalón H1, como las aperturas del
   resto del sitio, aunque ocupe tres líneas. Los saltos de la previa no
   se persiguen cambiando el tamaño (componentes.md, convenciones). */

.loha-casos__texto {
	max-width: 32em;
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

/* Tres tarjetas, en el orden de los casos en todos los tamaños: una
   columna en M, dos en TV, tres desde TA. Separadas lo justo, como una
   banda de fotos, como en la previa. */
/* A sangre, de borde a borde de la ventana, como en la previa. Con ul
   delante: ul[class] de base.css pone el margen a 0 y pesa más que una
   clase sola. */
ul.loha-casos__tarjetas {
	--tarjetas-hueco: 0.375rem;
	display: grid;
	gap: var(--tarjetas-hueco);
	margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) calc(-1 * var(--margen)) 0;
	padding: 0;
	list-style: none;
}

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

/* TV: la última tarjeta, si queda sola en su fila (la tercera de tres;
   --ancho lo pone caso-tarjeta.php), ocupa las dos columnas, sin hueco
   al lado, y a la altura de las de arriba: media banda menos el hueco,
   por 7/6. La banda es el contenedor de esa medida. Su foto, 6:7, se
   recorta a lo ancho y se ve la mitad de su alto: la que elija el
   encuadre vertical del campo (componentes.md, U12). El texto, con las
   medidas de una tarjeta de arriba (--tarjeta-ancho). */
@media (min-width: 600px) and (max-width: 1023px) {
	.loha-casos__tarjetas {
		container-type: inline-size;
	}

	.loha-casos__elemento--ancho {
		grid-column: 1 / -1;
	}

	/* 12:7, lo que mide sin el hueco, solo para un navegador sin
	   unidades de contenedor: con ancho y alto fijados, no actúa. */
	.loha-casos__elemento--ancho .loha-tarjeta-caso {
		aspect-ratio: 12 / 7;
		width: 100%;
		height: calc((100cqw - var(--tarjetas-hueco)) * 7 / 12);
	}

	.loha-casos__elemento--ancho .loha-tarjeta-caso__texto {
		--tarjeta-ancho: calc((100cqw - var(--tarjetas-hueco)) / 2);
	}
}

/* La columna del titular se ajusta a sus líneas (fit-content), hasta el
   55 %: el H1 conserva los saltos del campo sin cambiar de tamaño y el
   resto se reparte lo que queda. */
@media (min-width: 1024px) {
	/* TA: no caben tres columnas junto a un H1. El titular a la
	   izquierda; el texto y la nota, uno sobre otro, a la derecha. */
	.loha-casos__cabeza {
		grid-template-columns: fit-content(55%) minmax(0, 1fr);
		align-items: center;
		column-gap: calc(2 * var(--medianil));
	}

	.loha-casos__cabeza > .loha-encabezado {
		grid-row: span 2;
	}

	.loha-casos__tarjetas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	/* E: titular a la izquierda, el texto en el centro y la nota a la
	   derecha, centrados en el alto, como en la previa. */
	.loha-casos__cabeza {
		grid-template-columns: fit-content(55%) minmax(0, 4fr) minmax(0, 2.6fr);
	}

	.loha-casos__cabeza > .loha-encabezado {
		grid-row: auto;
	}
}

/* ── U13 · Franja «Otras experiencias» ────────────────────── */
/* Debajo de las tarjetas, sin hueco, sobre beige liso y sin fotos: R6
   con separador. A la izquierda, el rótulo y el titular; a la derecha,
   tras la línea vertical, el texto, las referencias y el botón a Otras
   experiencias (U17). Lo que en la previa ocupaba un tercer tercio (los
   servicios con iconos) no está. */
.loha-casos:has(+ .loha-franja-otras) {
	padding-bottom: 0;
}

.loha-franja-otras {
	padding: var(--separacion) var(--margen);
}

.loha-franja-otras__texto {
	max-width: var(--lectura);
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

/* Las referencias, un centro por línea del campo, en una lista. Segunda
   revisión del cliente (noviembre de 2026): el listado algo más abajo
   (20–32 px del texto, antes 14–22), con más aire entre las líneas
   (cada centro, a 1,75 del cuerpo del siguiente; si uno parte en M, sus
   líneas, a 1,45) y antes del botón (28–44 px, antes 20–32). Con la
   clase de la franja delante: ul[class] de base.css quita el margen. */
.loha-franja-otras .loha-franja-otras__referencias {
	margin-top: clamp(1.25rem, 0.9rem + 1vw, 2rem);
	color: var(--c-texto-2);
	font-size: var(--fs-interfaz);
	line-height: 1.45;
}

/* En M cada centro parte en dos: repartido, sin «Huelva» sola. */
.loha-franja-otras__referencias li {
	text-wrap: balance;
}

.loha-franja-otras__referencias li + li {
	margin-top: 0.3em;
}

.loha-franja-otras__accion {
	margin-top: clamp(1.75rem, 1.25rem + 1.4vw, 2.75rem);
}

/* ── U12 · Tarjeta de caso ────────────────────────────────── */

.loha-tarjeta-caso {
	position: relative;
	display: block;
	aspect-ratio: 6 / 7;
	overflow: hidden;
	container-type: inline-size;
	color: var(--blanco);
	text-decoration: none;
}

/* Con la tarjeta delante: la foto es también .loha-caso__foto, que en
   M y TV tiene la proporción 16:9 de las fotos de los casos. */
.loha-tarjeta-caso .loha-tarjeta-caso__foto,
.loha-tarjeta-caso__foto > .loha-provisional {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* DECISIÓN ABIERTA: el degradado de las tarjetas, del 80 al 92 % del
   azul (decisiones-abiertas.md).

   El texto, abajo y agrupado, como en la previa: etiqueta, titular y
   «Ver caso» juntos, y el bloque, a la medida de su texto. El degradado
   del azul corporativo va con el bloque, no fijo en la tarjeta:
   transparente un poco por encima de la etiqueta (--tarjeta-rampa), al
   80 % donde empieza la etiqueta y al 92 % en el pie. Medido en proporción a la propia tarjeta
   (unidades de contenedor, --tarjeta-ancho), no a la ventana. Si un texto crece, el
   bloque sube con su degradado: el texto nunca queda sobre la foto sin
   azul. Lo importante de la foto (las caras del CPA, del 32 al 42 % del
   alto) queda por encima. Intensidades, las mínimas que cumplen el
   contraste medido (componentes.md, U12). */
.loha-tarjeta-caso__texto {
	--tarjeta-ancho: 100cqw;
	--tarjeta-rampa: calc(var(--tarjeta-ancho) * 0.15);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--tarjeta-rampa) calc(var(--tarjeta-ancho) * 0.055) calc(var(--tarjeta-ancho) * 0.055);
	background: linear-gradient(
		to bottom,
		transparent 0,
		color-mix(in srgb, var(--azul) 80%, transparent) var(--tarjeta-rampa),
		color-mix(in srgb, var(--azul) 92%, transparent) 100%
	);
}

.loha-tarjeta-caso__etiqueta {
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-tarjeta-caso__titular {
	color: var(--c-texto);
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	text-wrap: balance;
}

.loha-tarjeta-caso__titular .loha-acento {
	color: var(--c-acento);
}

/* Cada línea del campo, un bloque, y balance reparte la que no cabe:
   «para quienes sirven / lejos de casa», no «… lejos de / casa». */
.loha-tarjeta-caso__titular .loha-linea {
	display: block;
}

/* Donde el texto no cabe en la mitad inferior con el titular a H3 (tres
   columnas estrechas, el iPad en horizontal), el titular baja un
   escalón, al del texto introductorio, sin dejar la DM Serif; la
   etiqueta ya está en su suelo. Medido: con los textos actuales, H3 cabe
   desde 1160 px; el tramo llega a 1199 para dejar margen a titulares más
   largos (el inglés). Si aun así un texto no cabe, el bloque crece hacia
   arriba con su degradado (componentes.md, U12). */
@media (min-width: 1024px) {
	.loha-tarjeta-caso__titular {
		font-size: var(--fs-intro);
	}
}

@media (min-width: 1200px) {
	.loha-tarjeta-caso__titular {
		font-size: var(--fs-h3);
	}
}

/* «Ver caso →», como las demás acciones de texto con flecha: al pasar o
   enfocar, de --beige-100 a blanco y la flecha avanza 6 px. */
.loha-tarjeta-caso__accion {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	padding-top: 0.6rem;
	color: var(--c-texto-2);
	font-size: var(--fs-interfaz);
	font-weight: 500;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
	transition: color var(--t-hover) ease;
}

.loha-tarjeta-caso__flecha {
	transition: transform var(--t-hover) var(--curva-suave);
}

@media (hover: hover) and (pointer: fine) {
	.loha-tarjeta-caso:hover .loha-tarjeta-caso__accion {
		color: var(--c-texto);
	}

	.loha-tarjeta-caso:hover .loha-tarjeta-caso__flecha {
		transform: translateX(6px);
	}
}

/* La foto se amplía un 2 % al pasar, en 0,3 s, dentro de su marco: la
   tarjeta recorta lo que sobra (overflow: hidden) y no cambia de tamaño
   ni de sitio. Desde el centro: se pierde un 1 % por cada lado (5 px a
   1440), lejos de lo importante de las tres fotos (componentes.md, U12).
   Con el puntero fino y, como su equivalente, con el foco del teclado;
   con movimiento reducido, sin ampliación. */
.loha-tarjeta-caso .loha-caso__imagen {
	transition: transform var(--t-zoom) var(--curva-suave);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.loha-tarjeta-caso:hover .loha-caso__imagen {
		transform: scale(1.02);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.loha-tarjeta-caso:focus-visible .loha-caso__imagen {
		transform: scale(1.02);
	}
}

.loha-tarjeta-caso:focus-visible .loha-tarjeta-caso__accion {
	color: var(--c-texto);
}

.loha-tarjeta-caso:focus-visible .loha-tarjeta-caso__flecha {
	transform: translateX(6px);
}

/* El contorno de foco, hacia dentro: las tarjetas van casi juntas. */
.loha-tarjeta-caso:focus-visible {
	outline-offset: -4px;
}

/* ── U14 · Pantallas de caso: lo común ────────────────────── */
/* Las fotos van a sangre, como en las previas: llegan a los bordes de la
   ventana (margen negativo) y cada pantalla acaba en sus fotos, sin
   relleno abajo. */

.loha-caso-pantalla {
	--pantalla-hueco: var(--separacion);
	display: grid;
	gap: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
	padding: var(--pantalla-hueco) var(--margen) 0;
}

.loha-caso__foto--ancha,
.loha-caso__fotos,
ul.loha-caso__franja,
.loha-caso__foto--principal {
	margin-inline: calc(-1 * var(--margen));
}

/* La primera, bajo la cabecera, que se superpone. */
.loha-pagina--caso > .loha-caso-pantalla:first-child {
	padding-top: var(--area-segura);
}

.loha-caso__contador {
	margin-bottom: 0.9rem;
	color: var(--c-rotulo);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
}

/* La procedencia de los proyectos (Espacios de uso colectivo): una línea
   discreta bajo el contador, al tamaño del contador y en el texto
   secundario, sin mayúsculas. No es un titular: el nombre del caso ya está
   en la cabecera. */
.loha-caso__contador:has(+ .loha-caso__procedencia) {
	margin-bottom: 0.35rem;
}

.loha-caso__procedencia {
	margin-bottom: 0.9rem;
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
	line-height: var(--lh-interfaz);
}

/* DECISIÓN ABIERTA: titulares de las pantallas de caso al escalón H2
   (decisiones-abiertas.md).

   Titulares de las pantallas al escalón H2, el mismo en todas (h1 la
   primera, h2 las demás), también en la apertura con foto de fondo, que
   es una escena (R1). A H1 no caben: en su columna, junto a los
   textos, se partían en cinco o seis líneas y la pantalla 3 pasaba de la
   altura de la ventana (componentes.md, U14). */
.loha-caso-pantalla .loha-encabezado__titular,
.loha-caso-apertura .loha-encabezado__titular {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.loha-caso__textos .loha-parrafos {
	max-width: 32em;
}

/* --franja agrupa su texto en una columna: la misma separación que el
   hueco de la rejilla en los otros bloques. */
.loha-caso__columna > * + * {
	margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

/* Las fotos: la imagen llena su caja con su encuadre; en M y TV la caja
   tiene la proporción de la foto (16:9) y no se recorta casi nada. */
.loha-caso__foto {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.loha-caso__imagen,
.loha-caso__foto > .loha-provisional {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: var(--encuadre-x, 50%) var(--encuadre-y, 50%);
}

/* La caja de cada foto con nombre: etiqueta y descripción sobre papel
   opaco, siempre legibles, con la línea beige de las notas. En M, debajo
   de la foto; desde TV, sobre su esquina inferior izquierda. */
.loha-caso__pie,
.loha-caso__franja-pie {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.55rem 0.9rem 0.6rem;
	border-left: 2px solid var(--beige-500);
	background-color: var(--papel);
	color: var(--c-texto-2);
	font-size: var(--fs-interfaz);
	line-height: var(--lh-interfaz);
}

.loha-caso__pie-etiqueta {
	color: var(--c-texto);
	font-weight: 600;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-caso__fotos,
.loha-caso__franja {
	display: grid;
	gap: 0.375rem;
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.loha-caso__figura {
	margin: 0;
}

@media (min-width: 600px) {
	.loha-caso__figura {
		position: relative;
	}

	.loha-caso__figura .loha-caso__pie {
		position: absolute;
		bottom: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
		left: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
		max-width: calc(100% - 2 * clamp(0.5rem, 0.3rem + 0.6vw, 1rem));
	}

	/* La grande arriba, a todo el ancho; las dos de apoyo, debajo, en
	   dos columnas. La franja, en dos o tres columnas. */
	.loha-caso__fotos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.loha-caso__figura--1 {
		grid-column: 1 / -1;
	}

	.loha-caso__franja {
		grid-template-columns: repeat(min(var(--franja, 2), 3), minmax(0, 1fr));
	}
}

/* ── E y TA: cada pantalla, casi una pantalla ─────────────── */
/* Altura mínima de lo que queda bajo la cabecera, nunca fija: si el
   contenido necesita más, la pantalla crece. Las fotos llenan lo que
   queda (fila 1fr) sin bajar de su mínimo. */
@media (min-width: 1024px) {
	.loha-caso-pantalla {
		--pantalla-hueco: clamp(1.25rem, 0.5rem + 1.5vw, 2.25rem);
		min-height: calc(100vh - var(--cabecera));
		min-height: calc(100svh - var(--cabecera));
	}

	.loha-pagina--caso > .loha-caso-pantalla:first-child {
		min-height: 100vh;
		min-height: 100svh;
		padding-top: calc(var(--cabecera) + var(--pantalla-hueco));
	}

	.loha-caso__foto {
		aspect-ratio: auto;
	}

	/* --ancha: titular, textos y nota en una fila; la foto debajo. */
	.loha-caso-pantalla--ancha {
		grid-template-columns: minmax(0, 5fr) minmax(0, 3.6fr) minmax(0, 2.6fr);
		grid-template-rows: auto minmax(16rem, 1fr);
		align-items: center;
		column-gap: calc(2 * var(--medianil));
	}

	.loha-caso-pantalla--ancha .loha-caso__foto--ancha {
		grid-column: 1 / -1;
		align-self: stretch;
	}

	/* --apiladas: titular y textos arriba, con una regla fina entre los
	   dos; la grande a la izquierda y dos apiladas a la derecha. */
	.loha-caso-pantalla--apiladas {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: auto minmax(22rem, 1fr);
		align-items: center;
		column-gap: calc(2 * var(--medianil));
	}

	.loha-caso-pantalla--apiladas .loha-caso__textos {
		padding-left: calc(2 * var(--medianil));
		border-left: 1px solid var(--c-filete);
	}

	.loha-caso-pantalla--apiladas .loha-caso__fotos {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		align-self: stretch;
	}

	.loha-caso__figura--1 {
		grid-column: auto;
		grid-row: 1 / -1;
	}

	.loha-caso__fotos .loha-caso__figura,
	.loha-caso__fotos .loha-caso__foto {
		height: 100%;
	}

	/* --franja: el texto a la izquierda y la foto principal a la
	   derecha; la franja, a todo el ancho debajo. El texto a 5 / 7, como
	   en la previa (la foto empieza en el 39 % del ancho): sus párrafos
	   bajan unas dos líneas y la pantalla cabe con la franja a 3,2:1. */
	.loha-caso-pantalla--franja {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: minmax(22rem, 1fr) auto;
		column-gap: calc(2 * var(--medianil));
		row-gap: 0.375rem; /* la franja, casi pegada a la foto principal, como en la previa */
	}

	/* El titular puede ocupar la mitad del hueco hacia la foto: queda
	   siempre un medianil de aire. Con las palabras de una letra unidas
	   (tipografia.md), una línea del campo que no cabe entera se parte
	   dejando una palabra sola: «adaptada / a cada centro» (CPA 04), que
	   en su columna de E no cabía por 1 a 6 px de 1280 a 1332. En TA,
	   con la columna a partes iguales (abajo), le da margen. */
	.loha-caso-pantalla--franja .loha-encabezado__titular {
		margin-right: calc(-1 * var(--medianil));
	}

	.loha-caso__columna {
		align-self: center;
	}

	/* La foto principal, a sangre por la derecha. Arriba, con el hueco
	   entre pantallas, como el texto: pegada al borde de la pantalla, se
	   tocaba con los pies de la anterior (Navy Lodge 03 y 04, CPA 04 y
	   05). Ocupa el alto que queda: la pantalla no crece. */
	.loha-caso-pantalla--franja .loha-caso__foto--principal {
		align-self: stretch;
		margin-left: 0;
	}

	/* Tras una pantalla que acaba en fotos a sangre (Espacios de uso
	   colectivo 02), la principal sí empieza pegada arriba, justo bajo la
	   cabecera, como en su previa: foto con foto, sin pies que se toquen. */
	.loha-caso-pantalla--ancha + .loha-caso-pantalla--franja .loha-caso__foto--principal,
	.loha-caso-pantalla--apiladas + .loha-caso-pantalla--franja .loha-caso__foto--principal {
		margin-top: calc(-1 * var(--pantalla-hueco));
	}

	.loha-caso-pantalla--franja .loha-caso__franja {
		grid-column: 1 / -1;
		grid-template-columns: repeat(var(--franja, 2), minmax(0, 1fr));
	}

	/* La franja sin pies, a la proporción de la previa (830 × 255 a
	   1672, unos 3,2:1): con una altura fija quedaban de 4,35:1 a 1440. */
	.loha-caso__franja .loha-caso__foto {
		aspect-ratio: 3.2 / 1;
	}
}

/* TA: en --franja, texto y foto a partes iguales. A 5 / 7 la columna de
   texto se queda en 363–456 px y a «adaptada a cada centro» (CPA 04) le
   faltaban hasta 68 px, más que el medio hueco que puede tomar el
   titular. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.loha-caso-pantalla--franja {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Series numeradas (.loha-serie) ───────────────────────── */
/* El pie de una foto numerada: las etapas de la matriz, la franja con
   etiquetas y las fotos de apoyo. El número de su posición en un círculo
   fino, en DM Serif, calculado; la etiqueta en mayúsculas y la
   descripción, como las cajas de las fotos pero sin caja: van sobre
   papel, debajo de la foto. Con flecha, una línea que acaba en flecha
   tras la etiqueta (las etapas: una secuencia). */
.loha-serie {
	display: flex;
	align-items: flex-start;
	gap: clamp(0.6rem, 0.4rem + 0.5vw, 0.9rem);
	margin-top: clamp(0.6rem, 0.45rem + 0.4vw, 0.9rem);
}

.loha-serie__numero {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.15em;
	aspect-ratio: 1;
	border: 1px solid var(--c-texto);
	border-radius: 50%;
	color: var(--c-texto);
	font-family: var(--serif);
	font-size: var(--fs-intro);
	line-height: 1;
}

.loha-serie__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	margin: 0;
	padding-top: 0.15em;
	color: var(--c-texto-2);
	font-size: var(--fs-interfaz);
	line-height: 1.4;
}

.loha-serie__etiqueta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--c-texto);
	font-weight: 600;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-serie__flecha {
	position: relative;
	flex: 1;
	height: 1px;
	background-color: currentColor;
}

/* Sin número (las galerías descriptivas): el texto ocupa todo el ancho
   de la foto. Con línea, una corta tostada encima del rótulo, la misma
   en todas las fotos de la serie: la de las fases de Comprender del 01
   (2 px, --beige-500, --filete-corto). */
.loha-serie--linea .loha-serie__texto,
.loha-serie--rotulo .loha-serie__texto {
	padding-top: 0;
}

.loha-serie--linea .loha-serie__texto::before {
	content: "";
	display: block;
	width: var(--filete-corto);
	margin-bottom: clamp(0.5rem, 0.35rem + 0.4vw, 0.75rem);
	border-top: 2px solid var(--beige-500);
}

.loha-serie__flecha::after {
	content: "";
	position: absolute;
	top: -3px;
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

/* M: la descripción de las leyendas de foto, que es una frase (las
   series y las cajas de las fotos), al tamaño de lectura; la etiqueta en
   mayúsculas sigue al de interfaz, como los demás rótulos (ronda 5: a
   13 px, frases de hasta 95 caracteres costaban de leer). Cortes
   naturales, sin una palabra sola en la última línea («… forma de /
   uso» a 368 px), como el resto de las listas del 02. */
@media (max-width: 599px) {
	:is(.loha-serie__descripcion, .loha-caso__pie-texto) {
		font-size: var(--fs-lectura);
		line-height: var(--lh-lectura);
		text-wrap: pretty;
	}
}

/* ── Apertura con foto de fondo (Navy Lodge 01) ───────────── */
/* R1 --degradado --sangre a pantalla completa: la foto a sangre, sin
   oscurecer y sin el fundido lateral (papel a 0). En E y TA el texto va
   arriba a la izquierda sobre un velo de papel atado al propio bloque
   (::before de su contenido), del que solo cambia la forma:

     E (desde 1280)        una columna, como en la previa; el velo de la
                           previa: pleno sobre el bloque y fundido gradual
                           a la derecha y abajo (más abajo, --velo-*).
     TA (1024–1279)        dos columnas, para que el bloque acabe hacia el
                           40 % del alto; elipse desde la esquina, ancha y
                           de fundido corto (--esquina-*): la franja alta
                           de la foto, sin personas.
     TA en vertical        una columna; la misma elipse, más alta.

   La elipse tiene su centro en la esquina de la pantalla y radios
   --esquina-x y --esquina-y veces el ancho y el alto del bloque; plena
   hasta --esquina-pleno y transparente en su borde. Intensidades, las
   mínimas que cumplen el contraste medido contra la foto real
   (componentes.md, U14). Si cambia la foto, se vuelve a medir. */
/* El velo sale del bloque a propósito (en TA, una elipse de 2,6 veces su
   ancho; en E, por la izquierda, --velo-sangre), pero no de la
   pantalla: sin recorte, en TA el documento medía 2,5–3 veces la ventana
   y Safari en iOS podía encoger la página al cargar. */
.loha-caso-apertura {
	overflow: clip;
	--papel-imagen: var(--beige-50);
	--papel-alfa: 0;
	--esquina-alfa: 0.93;
	--esquina-pleno: 90%;
	--esquina-x: 2.6;
	--esquina-y: 1.2;
}

.loha-caso-apertura .loha-encabezado__entradilla {
	max-width: 24em;
}

.loha-datos {
	display: flex;
	flex-wrap: wrap;
	row-gap: 1rem;
	margin: clamp(1.25rem, 0.8rem + 1.2vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.loha-datos__dato {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding-inline: clamp(0.9rem, 0.4rem + 1.4vw, 1.75rem);
	border-left: 1px solid var(--c-filete);
	color: var(--c-texto);
	font-size: var(--fs-interfaz);
	line-height: 1.35;
}

.loha-datos__dato:first-child {
	padding-left: 0;
	border-left: 0;
}

.loha-datos__icono {
	width: 1.75rem;
	height: 1.75rem;
	stroke-width: 1.5;
}

.loha-caso-apertura__remate {
	margin-top: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
}

.loha-caso-apertura__remate .loha-encabezado__remate {
	margin-top: clamp(0.9rem, 0.6rem + 0.8vw, 1.25rem);
	font-size: var(--fs-intro);
	line-height: 1.3;
}

/* La frase final, al escalón del texto introductorio, como en la previa
   (más o menos del tamaño de la entradilla), en DM Serif cursiva. Por
   debajo de 24 px el acento necesita 4,5: --beige-700 (--c-rotulo, 5,42
   sobre papel), como fija sistema-color.md. */
.loha-caso-apertura__remate .loha-acento {
	color: var(--c-rotulo);
}

/* La frase final va fuera de R2: sus líneas, cada una un bloque, como en
   los titulares (text-wrap: balance las reparte); en M, en línea. */
.loha-caso-apertura__remate .loha-linea {
	display: block;
}

@media (max-width: 599px) {
	.loha-caso-apertura__remate .loha-linea {
		display: inline;
	}
}

/* TV y M: el orden de lectura de los casos, el texto y después la foto,
   entera, como banda. Sin texto sobre la foto ni degradado. */
@media (max-width: 1023px) {
	.loha-caso-apertura {
		display: flex;
		flex-direction: column;
	}

	.loha-caso-apertura .loha-escena__fondo {
		order: 1;
	}

	.loha-caso-apertura .loha-escena__contenido {
		padding-top: var(--area-segura);
	}

	/* Los datos, separados de la entradilla como estaba previsto: ul[class]
	   (base.css) pesa más que .loha-datos y dejaba el margen en 0, con los
	   iconos pegados al párrafo. Era un fallo, no un cambio de diseño:
	   corregido en TV y M (noviembre de 2026). En E y TA el margen lo pone
	   .loha-caso-apertura__lado. */
	.loha-caso-apertura ul.loha-datos {
		margin-top: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
	}
}

/* M (ajustes del cliente para móvil, noviembre de 2026). El bloque empieza
   donde en el resto de páginas, a --area-segura del borde superior, como
   el contador de Espacios de uso colectivo: la escena dejaba además el
   alto de la cabecera (.loha-escena--apertura) y «01 / 05» quedaba 72 px
   más abajo, con un hueco vacío encima. Lo mismo en todos los casos que
   abren con foto de fondo (Navy Lodge y CPA). En TV no cambia. */
@media (max-width: 599px) {
	.loha-caso-apertura.loha-escena--apertura {
		padding-top: 0;
	}

	/* Los datos: el icono, algo más separado de su texto (13 px en lugar
	   de 9). Las columnas, siempre en una fila, alineadas: tantas como
	   datos, cada una a su medida; si no caben, la que más ocupa (la del
	   reloj) parte su texto, a 320 px en cuatro líneas, como en la previa
	   del cliente. Antes, de 320 a 375 px, la tercera bajaba a otra fila.
	   Entre columnas, 0,75rem a cada lado de la línea. */
	.loha-caso-apertura ul.loha-datos {
		display: grid;
		grid-auto-columns: auto;
		grid-auto-flow: column;
		justify-content: start;
	}

	.loha-caso-apertura .loha-datos__dato {
		gap: 0.8rem;
		padding-inline: 0.75rem;
	}

	.loha-caso-apertura .loha-datos__dato:first-child {
		padding-left: 0;
	}

	.loha-caso-apertura .loha-datos__dato:last-child {
		padding-right: 0;
	}
}

@media (min-width: 1024px) {
	/* La foto empieza bajo la cabecera, como en las aperturas del 01 y el
	   05: detrás, la cabecera quedaba sobre las vigas oscuras de la foto y
	   no se leía. */
	.loha-caso-apertura.loha-escena--apertura .loha-escena__fondo {
		top: var(--cabecera);
	}

	/* El bloque, arriba a la izquierda, a la medida de su contenido: la
	   esquina del degradado es la de la pantalla. */
	.loha-caso-apertura--arriba {
		align-items: start;
	}

	/* El hueco bajo la cabecera, el de las demás pantallas de caso. */
	.loha-caso-apertura {
		--pantalla-hueco: clamp(1.25rem, 0.5rem + 1.5vw, 2.25rem);
	}

	/* Dos columnas, la composición por defecto: titular y entradilla a
	   la izquierda; datos y frase final a la derecha, desde la altura del
	   titular. El bloque queda bajo, hacia el 40 % del alto, y lo aclarado
	   de la foto, sobre el techo y la pared, sin personas. */
	.loha-caso-apertura--arriba .loha-escena__contenido {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: calc(2 * var(--medianil));
		align-items: start;
		justify-self: start;
		width: calc(var(--margen) + min(100vw - 2 * var(--margen), 72rem));
		max-width: 100%;
		padding: calc(var(--cabecera) + var(--pantalla-hueco)) 0 0 var(--margen);
	}

	.loha-caso-apertura__lado {
		padding-top: calc(var(--fs-micro) * 1.2 + 0.5rem);
	}

	.loha-caso-apertura__lado > .loha-datos {
		margin-top: 0;
	}

	/* Compacto, como en la previa, para que quepa en la esquina: los
	   escalones de siempre con separaciones cortas, la columna lo bastante
	   ancha para la entradilla en tres líneas y los datos en una fila. */
	.loha-caso-apertura .loha-caso__contador {
		margin-bottom: 0.5rem;
	}

	.loha-caso-apertura--arriba .loha-encabezado__entradilla {
		max-width: none;
		margin-top: 0.75rem;
	}

	.loha-caso-apertura .loha-datos {
		margin-top: 1rem;
	}

	.loha-caso-apertura .loha-datos__dato {
		gap: 0.4rem;
	}

	.loha-caso-apertura .loha-datos__icono {
		width: 1.5rem;
		height: 1.5rem;
	}

	.loha-caso-apertura__remate {
		margin-top: 1rem;
	}

	.loha-caso-apertura__remate .loha-encabezado__remate {
		margin-top: 0.75rem;
	}

	/* El velo de las aperturas, atado al bloque: su forma, según la
	   composición y el ancho (más abajo). */
	.loha-caso-apertura .loha-escena__contenido::before {
		content: "";
		position: absolute;
		z-index: -1;
		pointer-events: none;
	}

	.loha-caso-apertura--arriba .loha-escena__contenido::before {
		top: 0;
		left: 0;
		width: calc(100% * var(--esquina-x));
		height: calc(100% * var(--esquina-y));
		background: radial-gradient(
			ellipse 100% 100% at 0 0,
			color-mix(in srgb, var(--papel-imagen) calc(var(--esquina-alfa) * 100%), transparent) 0,
			color-mix(in srgb, var(--papel-imagen) calc(var(--esquina-alfa) * 100%), transparent) var(--esquina-pleno),
			transparent 100%
		);
	}
}

/* Una columna, la composición de la previa: en escritorio (desde
   1280) y en tabletas en vertical de 1024 o más. */
@media (min-width: 1280px), (min-width: 1024px) and (orientation: portrait) {
	.loha-caso-apertura--arriba .loha-escena__contenido {
		grid-template-columns: minmax(0, 1fr);
		width: calc(var(--margen) + 34rem);
	}

	.loha-caso-apertura__lado {
		padding-top: 0;
	}

	.loha-caso-apertura__lado > .loha-datos {
		margin-top: 1rem;
	}
}

/* Tabletas en vertical (1024–1279): el degradado de esquina en elipse,
   que ahí deja fuera a todos los marines (fundido del 20 %). */
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: portrait) {
	.loha-caso-apertura {
		--esquina-pleno: 80%;
		--esquina-x: 2.3;
		--esquina-y: 1.4;
	}
}

/* Escritorio: el velo de la previa, que abraza el bloque de texto: un
   contorno redondeado, sin rectas, algo más ancho donde el texto es más
   ancho y que se recoge al final, con un margen pequeño alrededor del
   texto y un fundido gradual. Medido en la previa a 1672 × 941: pleno
   hasta unos 30 px del texto, al 50 % a unos 90 px y transparente a unos
   200 px a la derecha y 60–80 px por debajo (componentes.md, U14).

   Cómo: quince elipses de papel, de borde duro, con centro en el borde
   izquierdo a distintas alturas del bloque, cada una a la medida de su
   franja, medidas en proporción al bloque sobre el borde derecho de
   cada línea de texto en diecisiete ventanas de escritorio. Su unión es
   el contorno; el fundido, un desenfoque de todo el velo (unos 9 puntos
   del ancho de la foto de lleno a nada), comprimido en vertical al 40 %
   (--velo-compresion) para que hacia abajo sea más corto, como en la
   previa. Pleno hasta 1 rem del texto más 2σ del desenfoque: el texto
   queda sobre papel pleno, no sobre el fundido. La intensidad, la
   opacidad del conjunto (uniforme también donde se solapan las
   elipses): la mínima que cumple el contraste medido contra la foto
   real. Medidas sobre estos textos: si cambian mucho, se vuelve a
   medir. */
@media (min-width: 1280px) {
	/* La columna, a la proporción de la previa: el texto llega al 29 % del
	   ancho (sin bajar de 25 rem, lo que piden los tres datos en una
	   fila), y la entradilla al escalón de lectura, como en la previa. */
	.loha-caso-apertura--arriba .loha-escena__contenido {
		width: calc(var(--margen) + max(29vw - var(--margen), 25rem));
	}

	.loha-caso-apertura--arriba .loha-encabezado__entradilla {
		font-size: var(--fs-lectura);
		line-height: var(--lh-lectura);
	}

	.loha-caso-apertura .loha-datos__dato {
		padding-inline: 0.9rem;
	}

	/* La frase final, en dos líneas, como en la previa: su primera línea
	   sobresale un poco de la columna. */
	.loha-caso-apertura__remate {
		margin-inline-end: -1.5rem;
	}

	.loha-caso-apertura {
		--velo-alfa: 0.93;
		--velo-papel: var(--papel-imagen);
		--velo-desenfoque: 2.25vw;
		--velo-compresion: 0.4;
		--velo-sangre: calc(3 * var(--velo-desenfoque));
	}

	/* La caja del velo: 1,5 × 1,4 veces el bloque (tras comprimirla). Se
	   dibuja más alta y se comprime (× 0,4): el desenfoque vertical queda
	   en el 40 %. Las elipses, en porcentaje de la caja, una por franja
	   del bloque, de arriba abajo, con centro en el borde de la pantalla.

	   Pleno desde el borde izquierdo, como en la previa: la caja empieza
	   fuera de la pantalla, tres radios de desenfoque a la izquierda
	   (--velo-sangre), y una franja plena une las elipses con ese borde
	   (la última capa). El desenfoque se pierde fuera de la pantalla y en
	   el borde el velo llega con toda su intensidad; solo se funde hacia
	   la derecha y hacia abajo. */
	.loha-caso-apertura--arriba .loha-escena__contenido::before {
		left: calc(-1 * var(--velo-sangre));
		width: calc(100% * 1.5 + var(--velo-sangre));
		height: calc(100% * 1.4 / var(--velo-compresion));
		background:
			radial-gradient(ellipse 76.8% 6.4% at 0 14.3%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 74.6% 6.4% at 0 18.7%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 79.1% 6.4% at 0 23.2%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 79.7% 6.4% at 0 27.7%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 80.3% 6.4% at 0 32.1%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 82.6% 6.4% at 0 36.6%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 82.1% 6.4% at 0 41.1%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 83.5% 6.4% at 0 45.5%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 77.9% 6.4% at 0 50.0%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 82.6% 6.4% at 0 54.4%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 85.4% 6.4% at 0 58.9%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 84.5% 6.4% at 0 63.4%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 84.2% 6.4% at 0 67.8%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 85.0% 6.4% at 0 72.3%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			radial-gradient(ellipse 60.8% 6.4% at 0 76.8%, var(--velo-papel) 99%, transparent 100%) var(--velo-sangre) 0 / calc(100% - var(--velo-sangre)) 100% no-repeat,
			linear-gradient(transparent 7.9%, var(--velo-papel) 7.9%, var(--velo-papel) 83.2%, transparent 83.2%) 0 0 / calc(var(--velo-sangre) + 1px) 100% no-repeat;
		opacity: var(--velo-alfa);
		filter: blur(var(--velo-desenfoque));
		transform: scaleY(var(--velo-compresion));
		transform-origin: 0 0;
	}
}

/* ── Texto y matriz de etapas (Navy Lodge 02) ─────────────── */
/* M: texto y las seis etapas, una debajo de otra; TV: en dos columnas.
   Cada etapa, su foto (4:3) o sus dos escenas, verticales, una junto a
   otra; debajo, número, verbo con flecha y una línea. */
ol.loha-etapas {
	display: grid;
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) var(--medianil);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loha-etapa__fotos {
	display: grid;
	gap: 0.375rem;
}

.loha-etapa--doble .loha-etapa__fotos {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loha-etapa .loha-caso__foto {
	aspect-ratio: 4 / 3;
}

.loha-etapa--doble .loha-caso__foto {
	aspect-ratio: 4 / 5;
}

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

/* E: la matriz de la previa, entera en una pantalla. Una sola
   rejilla para el texto y las seis etapas (la lista se disuelve en ella,
   display: contents, sin perder su papel de lista): cinco columnas que
   reproducen los anchos de la previa (en px, a 1672: texto 443, definir
   363, seleccionar 305, coordinar 415; implantar 578, supervisar 556,
   ajustar 415; coordinar y ajustar, en la misma columna). La del texto,
   nunca por debajo de 25 rem: más estrecha, el titular se partía en tres
   líneas y la pantalla no cabía. Las fotos de cada fila, al mismo alto,
   el que deja la pantalla; en la primera, si el texto es más alto, las
   fotos crecen con él y la fila no queda dentada. */
/* TA: el texto arriba y las seis etapas debajo, en tres columnas, dos
   filas, como la matriz de la previa sin el texto en la primera. En
   cinco columnas junto al texto, a 1024 los verbos y sus líneas se
   apretaban: el brief prefiere menos columnas a comprimir. */
@media (min-width: 1024px) {
	ol.loha-etapas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.loha-caso-pantalla--matriz {
		--etapa-alto: clamp(10rem, (100svh - var(--cabecera)) / 2 - 8.75rem, 22rem);
		grid-template-columns:
			minmax(25rem, 443fr) minmax(0, 135fr) minmax(0, 228fr)
			minmax(0, 316fr) minmax(0, 415fr);
		grid-template-rows: auto auto;
		gap: clamp(1rem, 0.4rem + 1vw, 1.75rem) clamp(0.75rem, 0.4rem + 0.6vw, 1.25rem);
		align-content: center;
	}

	.loha-caso-pantalla--matriz .loha-caso__columna {
		grid-row: 1;
		grid-column: 1;
		align-self: start;
	}

	ol.loha-etapas {
		display: contents;
	}

	.loha-etapa {
		display: flex;
		flex-direction: column;
	}

	.loha-etapa__fotos {
		flex: 1;
	}

	.loha-etapa .loha-caso__foto {
		height: 100%;
		min-height: var(--etapa-alto);
		aspect-ratio: auto;
	}

	.loha-etapa--1 { grid-area: 1 / 2 / 2 / 4; }
	.loha-etapa--2 { grid-area: 1 / 4 / 2 / 5; }
	.loha-etapa--3 { grid-area: 1 / 5 / 2 / 6; }
	.loha-etapa--4 { grid-area: 2 / 1 / 3 / 3; }
	.loha-etapa--5 { grid-area: 2 / 3 / 3 / 5; }
	.loha-etapa--6 { grid-area: 2 / 5 / 3 / 6; }
}

/* ── Franja como serie numerada (Navy Lodge 03 y 04) ───────── */
/* Cuando las fotos llevan etiqueta: dentro de los márgenes, separadas
   como columnas, todas a la proporción de la primera, y el pie numerado
   debajo. M: una columna; TV: dos (antes que comprimir fotos y textos);
   TA: tres; E: todas en una fila. */
ul.loha-caso__franja--serie {
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) var(--medianil);
	margin-inline: 0;
}

.loha-caso__franja--serie .loha-caso__foto {
	aspect-ratio: var(--franja-proporcion, 4 / 3);
}

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

@media (min-width: 1024px) {
	/* Con la serie debajo, la fila de la foto puede bajar más. */
	.loha-caso-pantalla--franja:has(.loha-caso__franja--serie) {
		grid-template-rows: minmax(16rem, 1fr) auto;
		row-gap: clamp(1rem, 0.5rem + 0.8vw, 1.5rem);
	}

	/* TA, tres columnas; E, todas en una fila. */
	.loha-caso-pantalla--franja .loha-caso__franja--serie {
		grid-template-columns: repeat(min(var(--franja, 2), 3), minmax(0, 1fr));
		column-gap: clamp(0.75rem, 0.4rem + 0.6vw, 1.25rem);
	}

	.loha-caso__franja--serie .loha-caso__foto {
		height: auto;
	}
}

@media (min-width: 1280px) {
	.loha-caso-pantalla--franja .loha-caso__franja--serie {
		grid-template-columns: repeat(var(--franja, 2), minmax(0, 1fr));
	}
}

/* Con solo el nombre debajo, todas en una fila ya desde TA: el pie es
   corto y cabe. */
@media (min-width: 1024px) {
	.loha-caso-pantalla--franja .loha-caso__franja--nombres {
		grid-template-columns: repeat(var(--franja, 2), minmax(0, 1fr));
	}
}

/* ── Texto y fotos en dos filas (Navy Lodge 05) ────────────── */
/* Las principales, a su proporción: nunca se recortan. Las de apoyo, 16:9,
   con su encuadre: del 4:3 de las fotos se quita lo justo para que nadie
   quede cortado (componentes.md, U14). */
.loha-caso__filas {
	display: grid;
	gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
}

.loha-caso__principales {
	display: grid;
	gap: 0.375rem;
}

.loha-caso__principal .loha-caso__foto--entera {
	aspect-ratio: var(--proporcion, 4 / 3);
}

.loha-caso__foto--entera .loha-caso__imagen {
	object-fit: contain;
}

ul.loha-caso__apoyo {
	display: grid;
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) var(--medianil);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loha-caso__apoyo .loha-caso__foto {
	aspect-ratio: 16 / 9;
}

/* Desde TV, las principales comparten fila y cada una ocupa el ancho que
   le da su proporción (flex-grow): las dos, al mismo alto, como en la
   previa. En M, una debajo de otra. */
@media (min-width: 600px) {
	ul.loha-caso__apoyo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.loha-caso__principales {
		display: flex;
	}

	.loha-caso__principal {
		flex: calc(var(--proporcion, 4 / 3)) 1 0;
		min-width: 0;
	}
}

@media (min-width: 1024px) {
	/* Las columnas del bloque con franja: el texto a la misma medida en
	   las pantallas del caso. Con la de fotos más ancha, las principales,
	   que crecen con su ancho, no cabían en la pantalla. */
	.loha-caso-pantalla--dos-filas {
		grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
		column-gap: calc(2 * var(--medianil));
		align-items: center;
	}

	.loha-caso__principal .loha-caso__foto--entera {
		height: auto;
	}

	.loha-caso__apoyo .loha-caso__foto {
		aspect-ratio: 16 / 9;
	}

	ul.loha-caso__apoyo {
		column-gap: clamp(0.75rem, 0.4rem + 0.6vw, 1.25rem);
	}
}

/* ── Apertura con foto de fondo · abajo (CPA 01) ───────────── */
/* El bloque abajo a la izquierda, en dos columnas: contador y titular;
   la entradilla, junto a una línea vertical, alineada con el final del
   titular; debajo, el pie con una línea larga, como en la previa. */
.loha-caso-apertura__pie {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: clamp(1.25rem, 0.8rem + 1.2vw, 2rem) 0 0;
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas-grande);
}

.loha-caso-apertura__pie::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--c-filete);
}

@media (min-width: 1024px) {
	.loha-caso-apertura--abajo {
		align-items: end;
	}

	.loha-caso-apertura--abajo .loha-escena__contenido {
		width: 100%;
		padding: 0 var(--margen) clamp(1.25rem, 0.6rem + 1.4vw, 2.5rem);
	}

	.loha-caso-apertura--abajo .loha-caso__contador {
		margin-bottom: 0.6rem;
	}

	.loha-caso-apertura--abajo .loha-encabezado {
		display: grid;
		grid-template-columns: fit-content(48%) minmax(0, 36rem);
		column-gap: calc(2 * var(--medianil));
		align-items: end;
	}

	.loha-caso-apertura--abajo .loha-encabezado__entradilla {
		max-width: none;
		margin: 0;
		padding: 0.2em 0 0.2em calc(2 * var(--medianil));
		border-left: 1px solid var(--c-filete);
	}

	.loha-caso-apertura--abajo .loha-caso-apertura__pie {
		margin-top: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
	}

	/* El velo de las aperturas, con el bloque abajo: como en la previa,
	   una franja de papel a todo el ancho que sube desde el borde
	   inferior, plena bajo el texto (hasta 1 rem por encima del contador)
	   y fundida hacia arriba en --velo-fundido, con una curva suave. El
	   fundido crece con el alto de la ventana (de 3 a 9 rem): en las bajas
	   hay menos sitio entre el texto y las caras del mostrador, y acaba
	   antes de ellas (componentes.md, U14). */
	.loha-caso-apertura--abajo {
		--velo-alfa: 0.93;
		--velo-fundido: clamp(3rem, 13vh - 2.5rem, 9rem);
	}

	.loha-caso-apertura--abajo .loha-escena__contenido::before {
		right: 0;
		bottom: 0;
		left: 0;
		height: calc(100% + 1rem + var(--velo-fundido));
		background: linear-gradient(
			to bottom,
			transparent 0,
			color-mix(in srgb, var(--papel-imagen) calc(var(--velo-alfa) * 0.12 * 100%), transparent) calc(var(--velo-fundido) * 0.25),
			color-mix(in srgb, var(--papel-imagen) calc(var(--velo-alfa) * 0.5 * 100%), transparent) calc(var(--velo-fundido) * 0.5),
			color-mix(in srgb, var(--papel-imagen) calc(var(--velo-alfa) * 0.88 * 100%), transparent) calc(var(--velo-fundido) * 0.75),
			color-mix(in srgb, var(--papel-imagen) calc(var(--velo-alfa) * 100%), transparent) var(--velo-fundido)
		);
	}
}

/* ── Lista con iconos (verbos, beneficios, pasos) ──────────── */
/* loha_lista_iconos(): icono de Lucide, etiqueta en mayúsculas y una
   línea. Tres composiciones: columnas (el icono en un círculo, encima),
   fila (el icono en un círculo, a la izquierda) y caja (el icono a la
   izquierda, sobre una caja beige, una debajo de otra). */
ul.loha-iconos {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* En una columna de texto, con el hueco de la columna (ul[class] de
   base.css lo dejaría a 0). */
.loha-caso__columna > ul.loha-iconos {
	margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

.loha-iconos__elemento {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);
	min-width: 0;
}

.loha-iconos__icono {
	display: grid;
	flex: none;
	place-items: center;
	color: var(--c-texto);
}

.loha-iconos__icono .loha-icono {
	width: 1.75rem;
	height: 1.75rem;
	stroke-width: 1.5;
}

.loha-iconos__texto {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	margin: 0;
	color: var(--c-texto-2);
	font-size: var(--fs-interfaz);
	line-height: 1.4;
}

.loha-iconos__etiqueta {
	color: var(--c-texto);
	font-weight: 600;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

/* El icono en un círculo fino (columnas y fila). */
.loha-iconos--columnas .loha-iconos__icono,
.loha-iconos--fila .loha-iconos__icono {
	width: clamp(3.25rem, 2.6rem + 1.4vw, 4.25rem);
	aspect-ratio: 1;
	border: 1px solid var(--c-texto);
	border-radius: 50%;
}

/* Columnas: los tres verbos, centrados, separados por reglas finas. */
.loha-iconos--columnas {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.loha-iconos--columnas .loha-iconos__elemento {
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-inline: clamp(0.4rem, 0.2rem + 0.6vw, 1rem);
	border-left: 1px solid var(--beige-500);
	text-align: center;
}

.loha-iconos--columnas .loha-iconos__elemento:first-child {
	border-left: 0;
}

/* Fila: los beneficios. M, uno debajo de otro; TV, dos columnas; desde
   TA, en fila, separados por reglas finas. */
.loha-iconos--fila {
	gap: 1.25rem var(--medianil);
}

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

@media (min-width: 1024px) {
	.loha-iconos--fila {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 0;
	}

	.loha-iconos--fila .loha-iconos__elemento {
		padding-inline: clamp(1rem, 0.4rem + 1.2vw, 2rem);
		border-left: 1px solid var(--beige-500);
	}

	.loha-iconos--fila .loha-iconos__elemento:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* Caja: los pasos, sobre --beige-100, separados por reglas. */
ul.loha-iconos--caja {
	padding: 0.4rem clamp(1rem, 0.6rem + 1vw, 1.75rem);
	background-color: var(--beige-100);
}

.loha-iconos--caja .loha-iconos__elemento {
	padding-block: clamp(0.55rem, 0.4rem + 0.3vw, 0.8rem);
}

.loha-iconos--caja .loha-iconos__elemento + .loha-iconos__elemento {
	border-top: 1px solid var(--beige-500);
}

.loha-iconos--caja .loha-iconos__icono .loha-icono {
	width: 2rem;
	height: 2rem;
}

/* ── Texto y mapa en red (CPA 02) ──────────────────────────── */
/* M: el texto, el mapa y cada centro en una fila: el nombre, el plano a
   todo el ancho y las dos fotos debajo, a la mitad (nunca como sellos).
   TV y TA: el mapa arriba y los centros en dos columnas. E: el mapa en el
   centro de una rejilla de 3 × 3 y los centros alrededor, con líneas. */
.loha-red {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 1rem + 2vw, 3rem);
}

.loha-red__mapa {
	width: min(100%, 28rem);
	margin-inline: auto;
}

.loha-red__circulo {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	text-align: center;
}

.loha-mapa__provincia {
	fill: var(--beige-100);
	stroke: var(--beige-50);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.loha-mapa__centro {
	fill: var(--beige-700);
}

.loha-red__rotulo {
	margin: 0;
	color: var(--c-texto);
	font-size: var(--fs-lectura);
	font-weight: 600;
	line-height: 1.25;
}

.loha-red__rotulo::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin: 0.6rem auto 0;
	background-color: var(--beige-500);
}

.loha-red__lineas {
	display: none;
}

ul.loha-red__centros {
	display: grid;
	gap: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem) var(--medianil);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loha-red__centro {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	min-width: 0;
}

.loha-red__nombre {
	margin: 0;
	padding-left: 0.75rem;
	border-left: 3px solid var(--beige-500);
	color: var(--c-texto);
	font-family: var(--sans);
	font-size: var(--fs-intro);
	font-weight: 600;
	line-height: 1.2;
}

.loha-red__piezas {
	display: grid;
	gap: 0.375rem;
}

/* El plano entero, con su fondo blanco fundido con el de la página. */
.loha-red__plano {
	position: relative;
	aspect-ratio: 4 / 3;
}

.loha-red__imagen-plano,
.loha-red__plano > .loha-provisional {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.loha-red__fotos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.375rem;
}

.loha-red__fotos .loha-caso__foto {
	aspect-ratio: 4 / 3;
}

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

@media (min-width: 1024px) and (max-width: 1279px) {
	/* TA: el texto y el mapa, uno junto a otro; los centros, debajo, en
	   dos columnas. */
	.loha-caso-pantalla--red {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		column-gap: calc(2 * var(--medianil));
		align-items: center;
	}

	.loha-red {
		display: contents;
	}

	.loha-red__centros {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1280px) {
	/* E: el texto a la izquierda; la red a la derecha, de la altura de la
	   pantalla, en 3 × 3 (la fila del mapa, algo más alta). Los centros,
	   por su orden en el campo, en las ocho casillas de alrededor. Las
	   líneas van de debajo del mapa a la esquina interior de cada casilla
	   (o al centro de su lado). */
	.loha-caso-pantalla--red {
		grid-template-columns: minmax(23rem, 0.5fr) minmax(0, 1fr);
		column-gap: calc(2 * var(--medianil));
		align-items: center;
	}

	.loha-red {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
		gap: clamp(0.75rem, 0.3rem + 0.8vw, 1.5rem) clamp(1rem, 0.4rem + 1vw, 2rem);
		height: calc(100svh - var(--cabecera) - 2 * var(--pantalla-hueco));
		min-height: 40rem;
		max-height: 62rem;
	}

	ul.loha-red__centros {
		display: contents;
	}

	/* La casilla del centro es un contenedor: el círculo mide el menor
	   entre su alto y su ancho (menos el anillo exterior), y nunca se
	   mete bajo las columnas de los lados en ventanas proporcionalmente
	   altas. */
	.loha-red__mapa {
		z-index: 1;
		display: grid;
		grid-area: 2 / 2;
		place-items: center;
		width: auto;
		min-width: 0;
		min-height: 0;
		margin: 0;
		container-type: size;
	}

	.loha-red__circulo {
		--circulo: calc(min(100cqw, 100cqh) - 1.4rem);
		align-content: center;
		gap: 0.4rem;
		width: var(--circulo);
		height: var(--circulo);
		padding: 13%;
		border: 1px solid var(--beige-500);
		border-radius: 50%;
		background-color: var(--c-fondo);
		box-shadow: 0 0 0 0.6rem var(--c-fondo), 0 0 0 calc(0.6rem + 1px) color-mix(in srgb, var(--beige-500) 35%, transparent);
	}

	/* El rótulo, en proporción al círculo. */
	.loha-red__rotulo {
		font-size: clamp(0.75rem, calc(var(--circulo) * 0.055), var(--fs-interfaz));
	}

	.loha-red__rotulo::after {
		margin-top: 0.4rem;
	}

	.loha-red__lineas {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
	}

	.loha-red__lineas line {
		stroke: var(--beige-500);
		stroke-width: 1;
		vector-effect: non-scaling-stroke;
	}

	.loha-red__centro {
		position: relative;
		z-index: 1;
		grid-template-rows: auto minmax(0, 1fr);
		gap: 0.5rem;
		min-height: 0;
		background-color: var(--c-fondo);
	}

	.loha-red__centro--1 { grid-area: 1 / 1; }
	.loha-red__centro--2 { grid-area: 1 / 2; }
	.loha-red__centro--3 { grid-area: 1 / 3; }
	.loha-red__centro--4 { grid-area: 2 / 1; }
	.loha-red__centro--5 { grid-area: 2 / 3; }
	.loha-red__centro--6 { grid-area: 3 / 1; }
	.loha-red__centro--7 { grid-area: 3 / 2; }
	.loha-red__centro--8 { grid-area: 3 / 3; }

	.loha-red__nombre {
		font-size: var(--fs-lectura);
	}

	/* El plano, más ancho, y las dos fotos apiladas a su lado; en la
	   columna de la izquierda, las fotos por fuera, como en la previa. */
	.loha-red__piezas {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		min-height: 0;
	}

	.loha-red__centro--1 .loha-red__piezas,
	.loha-red__centro--4 .loha-red__piezas,
	.loha-red__centro--6 .loha-red__piezas {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	}

	.loha-red__centro--1 .loha-red__fotos,
	.loha-red__centro--4 .loha-red__fotos,
	.loha-red__centro--6 .loha-red__fotos {
		order: -1;
	}

	.loha-red__plano {
		aspect-ratio: auto;
		min-height: 0;
	}

	.loha-red__fotos {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		min-height: 0;
	}

	.loha-red__fotos .loha-caso__foto {
		height: 100%;
		aspect-ratio: auto;
	}
}

/* ── Texto, mosaico y fila de iconos (CPA 03) ─────────────── */
/* M y TV: el texto, la caja destacada, la principal a todo el ancho y las
   otras tres debajo (la segunda, alta, a la izquierda; la tercera y la
   cuarta apiladas a su lado), y los beneficios. E y TA: el titular a la
   izquierda y los textos a la derecha, junto a una línea; el mosaico a
   sangre; los beneficios debajo, en fila. */
.loha-caso__lado {
	display: grid;
	gap: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
}

.loha-caso__lado .loha-parrafos {
	max-width: 36em;
}

/* La caja destacada (U5): papel beige, en seminegrita, a la medida de
   su texto. */
.loha-caso__destacado {
	justify-self: start;
	margin: 0;
	padding: clamp(0.7rem, 0.5rem + 0.5vw, 1rem) clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
	border-radius: 0;
	font-size: var(--fs-intro);
	font-weight: 600;
	line-height: 1.3;
}

.loha-caso__destacado .loha-linea {
	display: block;
}

.loha-mosaico {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto repeat(2, auto);
	gap: 0.375rem;
	margin-inline: calc(-1 * var(--margen));
}

.loha-mosaico .loha-caso__foto {
	aspect-ratio: 4 / 3;
}

.loha-mosaico__foto--1 {
	grid-column: 1 / -1;
}

.loha-mosaico__foto--2 {
	grid-row: 2 / 4;
	height: 100%;
}

.loha-mosaico.loha-mosaico--4 .loha-mosaico__foto--2 {
	aspect-ratio: auto;
}

.loha-caso__iconos {
	display: grid;
	gap: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
}

/* El rótulo de los beneficios, tras una línea corta. */
.loha-caso__rotulo-iconos {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	color: var(--c-texto);
	font-size: var(--fs-lectura);
	line-height: 1.3;
}

.loha-caso__rotulo-iconos::before {
	content: "";
	flex: none;
	width: clamp(2.5rem, 1.8rem + 2vw, 4.5rem);
	height: 1px;
	background-color: var(--beige-500);
}

@media (min-width: 1024px) {
	.loha-caso-pantalla--mosaico {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		grid-template-rows: auto minmax(15rem, 1fr) auto;
		column-gap: calc(2 * var(--medianil));
		row-gap: clamp(1rem, 0.4rem + 1vw, 1.75rem);
	}

	.loha-caso-pantalla--mosaico > .loha-caso__cabeza {
		align-self: center;
	}

	.loha-caso-pantalla--mosaico .loha-caso__lado {
		align-self: center;
		padding-left: calc(2 * var(--medianil));
		border-left: 1px solid var(--c-filete);
	}

	/* La principal, la más ancha; la segunda, alta; la tercera y la
	   cuarta, apiladas: los anchos de la previa (790, 425 y 430 px a
	   1672). Llenan lo que queda de la pantalla. */
	.loha-mosaico {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 790fr) minmax(0, 425fr) minmax(0, 430fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.loha-mosaico .loha-caso__foto {
		height: 100%;
		aspect-ratio: auto;
	}

	.loha-mosaico__foto--1 {
		grid-area: 1 / 1 / 3 / 2;
	}

	.loha-mosaico__foto--2 {
		grid-area: 1 / 2 / 3 / 3;
	}

	.loha-mosaico__foto--3 {
		grid-area: 1 / 3;
	}

	.loha-mosaico__foto--4 {
		grid-area: 2 / 3;
	}

	.loha-caso-pantalla--mosaico .loha-caso__iconos {
		grid-column: 1 / -1;
		padding-bottom: var(--pantalla-hueco);
	}
}

/* ── Franja con nombres (CPA 04) ───────────────────────────── */
/* La serie sin número: debajo de cada foto, solo su nombre. La foto
   principal, con el suyo sobre la esquina inferior derecha, en una caja
   de papel, siempre legible. */
.loha-caso__nombre {
	margin: clamp(0.5rem, 0.35rem + 0.4vw, 0.8rem) 0 0;
	color: var(--c-texto);
	font-size: var(--fs-lectura);
	line-height: 1.3;
}

.loha-caso__rotulo-foto {
	position: absolute;
	right: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
	bottom: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
	margin: 0;
	padding: 0.4rem 0.75rem;
	background-color: var(--papel);
	color: var(--c-texto);
	font-size: var(--fs-interfaz);
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas-grande);
}

/* ── Fotos, texto y pasos (CPA 05) ─────────────────────────── */
/* M y TV: el texto con los pasos; después la principal, a todo el ancho,
   y las dos secundarias, una junto a otra. E y TA: las fotos a la
   izquierda, a sangre por arriba y por la izquierda; el texto a la
   derecha. */
.loha-pasos__fotos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.375rem;
	margin-inline: calc(-1 * var(--margen));
}

.loha-pasos__foto--1 {
	grid-column: 1 / -1;
}

.loha-caso-pantalla--pasos .loha-caso__columna > * + * {
	margin-top: 1rem;
}

.loha-caso-pantalla--pasos .loha-encabezado__entradilla {
	margin-top: 0.9rem;
}

.loha-caso-pantalla--pasos .loha-iconos--caja .loha-iconos__elemento {
	padding-block: clamp(0.5rem, 0.45rem + 0.1vw, 0.6rem);
}

.loha-caso-pantalla--pasos .loha-caso__columna > ul.loha-iconos {
	margin-top: 1rem;
}

@media (min-width: 1024px) {
	.loha-caso-pantalla--pasos {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		column-gap: calc(2 * var(--medianil));
		align-items: center;
	}

	.loha-caso-pantalla--pasos .loha-caso__columna {
		grid-area: 1 / 2;
	}

	/* Las fotos, a sangre por la izquierda; arriba y abajo, con el hueco
	   entre pantallas: ni tocan la anterior ni el azul de Voces. */
	.loha-pasos__fotos {
		grid-area: 1 / 1;
		grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
		align-self: stretch;
		margin: 0 0 0 calc(-1 * var(--margen));
	}

	.loha-caso-pantalla--pasos {
		padding-bottom: var(--pantalla-hueco);
	}

	/* Compacta, para que quepa con el hueco de abajo. */
	.loha-caso-pantalla--pasos .loha-caso__contador {
		margin-bottom: 0.5rem;
	}

	.loha-caso-pantalla--pasos .loha-encabezado__entradilla {
		margin-top: 0.6rem;
	}

	.loha-caso-pantalla--pasos .loha-caso__columna > * + *,
	.loha-caso-pantalla--pasos .loha-caso__columna > ul.loha-iconos {
		margin-top: 0.8rem;
	}

	.loha-caso-pantalla--pasos .loha-iconos--caja .loha-iconos__elemento {
		padding-block: 0.4rem;
	}

	.loha-pasos__fotos .loha-caso__foto {
		height: 100%;
		aspect-ratio: auto;
	}
}

/* ── Texto, voces y foto lateral (CPA, voces) ─────────────── */
/* Sobre el azul corporativo (data-fondo="oscuro"): blanco y --beige-100.
   M: una columna; TV y TA: 2 × 2; E: las cuatro en fila, separadas por
   reglas finas. La foto, a sangre: en E y TA a la derecha, de arriba
   abajo; en TV y M, una banda al final. */
.loha-caso-pantalla--voces .loha-encabezado__entradilla {
	max-width: none;
	margin-top: 0.9rem;
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
	line-height: 1.5;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-voces__cuerpo {
	display: grid;
	gap: clamp(1.75rem, 1rem + 2vw, 3rem);
	padding-bottom: var(--separacion);
}

ol.loha-voces {
	display: grid;
	gap: 2.25rem var(--medianil);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loha-voces__voz {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	min-width: 0;
}

.loha-voces__numero {
	color: var(--c-acento);
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: 1;
}

.loha-voces__quien {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	font-size: var(--fs-micro);
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-voces__nombre {
	color: var(--c-texto);
	font-weight: 600;
}

.loha-voces__lugar {
	color: var(--c-texto-2);
}

.loha-voces__segun {
	margin: 0;
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: var(--lh-interfaz);
}

/* Sin comilla: los textos son paráfrasis, no citas (revisión del cliente,
   octubre de 2026). El texto, alineado con el nombre. */
blockquote.loha-voces__texto {
	margin: 0;
}

.loha-voces__texto,
.loha-voces__texto p {
	margin: 0;
	color: var(--c-texto);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

.loha-voces__cargo {
	margin: auto 0 0;
	padding-top: 1rem;
	color: var(--c-texto-2);
	font-size: var(--fs-interfaz);
	line-height: 1.45;
}

.loha-voces__cargo::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1rem;
	background-color: var(--beige-500);
}

/* «Fuente ↗»: con área táctil de 44 px. */
.loha-voces__fuente {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.45em;
	min-height: 44px;
	color: var(--c-texto);
	font-size: var(--fs-interfaz);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	transition: color var(--t-hover) ease;
}

.loha-voces__flecha {
	width: 1em;
	height: 1em;
	transition: transform var(--t-hover) var(--curva-suave);
}

@media (hover: hover) and (pointer: fine) {
	.loha-voces__fuente:hover {
		color: var(--c-texto-2);
	}

	.loha-voces__fuente:hover .loha-voces__flecha {
		transform: translate(2px, -2px);
	}
}

.loha-voces__fuente:focus-visible {
	color: var(--c-texto-2);
}

.loha-voces__fuente:focus-visible .loha-voces__flecha {
	transform: translate(2px, -2px);
}

.loha-voces__foto {
	aspect-ratio: 16 / 9;
	margin-inline: calc(-1 * var(--margen));
}

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

@media (min-width: 1024px) {
	.loha-caso-pantalla--voces {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.38fr);
		column-gap: calc(2 * var(--medianil));
		align-items: center;
		padding-top: 0;
	}

	.loha-voces__cuerpo {
		padding-block: clamp(1.5rem, 0.5rem + 2vw, 3.5rem);
	}

	.loha-voces__foto {
		align-self: stretch;
		height: 100%;
		margin: 0 calc(-1 * var(--margen)) 0 0;
		aspect-ratio: auto;
	}
}

@media (min-width: 1280px) {
	.loha-caso-pantalla--voces {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.39fr);
	}

	ol.loha-voces {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
	}

	.loha-voces__voz {
		padding-inline: clamp(1rem, 0.4rem + 1vw, 1.75rem);
		border-left: 1px solid color-mix(in srgb, var(--beige-100) 25%, transparent);
	}

	.loha-voces__voz:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.loha-voces__cuerpo {
		padding-block: clamp(1.25rem, 0.25rem + 1.5vw, 2.5rem);
	}
}

/* ── Cierre con pregunta (CPA) ─────────────────────────────── */
/* La pregunta, la frase y HABLEMOS, centrados, sobre papel. No ocupa una
   pantalla: es el final del caso, antes del pie. */
.loha-caso-pantalla--cierre {
	justify-items: center;
	padding-block: calc(1.5 * var(--separacion));
	text-align: center;
}

.loha-caso__cierre {
	display: grid;
	justify-items: center;
	gap: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
	max-width: 46rem;
}

.loha-caso__cierre .loha-encabezado__entradilla {
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.loha-caso-pantalla--cierre {
		min-height: 0;
	}
}

/* ── U17 · Otras experiencias ─────────────────────────────── */
/* Una página del 04 (plantilla propia). Arriba, el titular y la
   introducción: en E y TA, uno junto a otro, como en la previa; en TV y
   M, uno debajo de otro. Debajo, un proyecto por columna (en M, uno
   debajo de otro): foto, rótulo y título, texto. */
.loha-otras {
	padding: var(--area-segura) var(--margen) var(--separacion);
}

.loha-otras__cabeza {
	display: grid;
	gap: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

/* El titular, con más interlineado que el de los H1 (1,02): las tildes y
   los rasgos altos de una línea no rozan los descendentes de la de
   encima (medido, componentes.md, U17). */
.loha-otras__encabezado .loha-encabezado__titular {
	line-height: var(--lh-otras, 1.14);
}

ul.loha-otras__proyectos {
	display: grid;
	gap: clamp(2.5rem, 1.75rem + 2.5vw, 4rem) calc(2 * var(--medianil));
	margin: var(--separacion) 0 0;
	padding: 0;
	list-style: none;
}

/* Las dos fotos a 16:9, a la misma altura: las de la visita son 4:3 y se
   recortan solo arriba y abajo, con su encuadre. La proporción de la
   previa (3,2:1) cortaba los cascos de La Orden. */
.loha-otras .loha-otras__foto {
	aspect-ratio: 16 / 9;
}

.loha-otras__titulo {
	margin-top: clamp(1.25rem, 0.9rem + 1vw, 2rem);
}

.loha-otras__titulo .loha-encabezado__titular {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.loha-otras__texto {
	max-width: var(--lectura);
	margin-top: clamp(0.75rem, 0.55rem + 0.6vw, 1.25rem);
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

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

/* E: el titular a la izquierda, con el ancho de sus líneas (hasta el
   60 %), y la introducción a su derecha, arriba, como en la previa. En TA
   van uno debajo de otro: junto a la introducción, «También acompañamos»
   no cabía entero y el titular se partía en cuatro líneas. */
@media (min-width: 1280px) {
	.loha-otras__cabeza {
		grid-template-columns: fit-content(60%) minmax(0, 1fr);
		align-items: start;
		column-gap: calc(2 * var(--medianil));
	}

	.loha-otras__cabeza > .loha-parrafos {
		padding-top: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loha-tarjeta-caso__accion,
	.loha-tarjeta-caso__flecha,
	.loha-voces__fuente,
	.loha-voces__flecha {
		transition: none;
	}
}