/*
 * R1 · Escena (componentes.md): contenedor de sección con su fondo. El
 * contenido no cambia; cambia el tratamiento del fondo. En la fase 3
 * entran --degradado y --solido, y los modificadores --pantalla (altura
 * mínima de la ventana) y --apertura (deja sitio a la cabecera). En la
 * 4b, --partido (cortina 3; retirado en la segunda revisión del cliente,
 * noviembre de 2026). En la 5a, --velo (apertura del 03), --panel
 * (cierre del 03) y --amplia (el doble de aire: 03.3).
 *
 *   .loha-escena__fondo        foto (o R9), con la de móvil si la hay
 *   .loha-escena__contenido    el contenido
 */

.loha-escena {
	position: relative;
	background-color: var(--c-fondo);
}

.loha-escena__contenido {
	position: relative;
	z-index: 1;
	padding: var(--separacion) var(--margen);
}

.loha-escena__fondo {
	position: relative;
}

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

/* ── --amplia ─────────────────────────────────────────────── */
/* El doble de aire arriba y abajo: 03.3, la ruptura azul entre el
   selector y el cierre, que en su previa es una pantalla propia. Mide lo
   que su contenido, como el resto de escenas: no es --pantalla. */

.loha-escena--amplia > .loha-escena__contenido {
	padding-block: calc(2 * var(--separacion));
}

/* Segunda revisión del cliente (noviembre de 2026), previa del 03.3: el
   titular, algo más abajo y a la izquierda como estaba; su rótulo se
   queda arriba, a la altura del principio de la lista. */
.loha-escena--amplia .loha-encabezado__rotulo {
	margin-bottom: var(--separacion);
}

/* ── --pantalla ───────────────────────────────────────────── */
/* Ocupa al menos la ventana, nunca una altura fija, para que el texto
   pueda crecer. Solo donde la previa muestra la escena a pantalla
   completa: aperturas del 02 y del 03.1, pantallas de la cortina. En
   --degradado rige desde 1024 px: en TV y M la escena es la banda de la
   foto más el texto. */

.loha-escena--pantalla {
	min-height: 100vh;
	min-height: 100svh;
}

@media (max-width: 1023px) {
	.loha-escena--degradado.loha-escena--pantalla {
		min-height: 0;
	}
}

/* ── --degradado ──────────────────────────────────────────── */
/* M y TV: la imagen entera como banda arriba y el texto debajo. Sin
   fundido. La banda tiene la proporción de la imagen, así que no se
   recorta y el encuadre no actúa. */

.loha-escena--degradado .loha-escena__fondo {
	aspect-ratio: var(--escena-proporcion, 16 / 9);
}

/* Con imagen para móvil (opción imagen_movil), la banda de M toma su
   proporción (--escena-proporcion-m, en el atributo style). El <picture>
   no cuenta como caja: la imagen se coloca igual que sin él. */
@media (max-width: 599px) {
	.loha-escena--degradado .loha-escena__fondo {
		aspect-ratio: var(--escena-proporcion-m, var(--escena-proporcion, 16 / 9));
	}
}

.loha-escena__fondo > picture {
	display: contents;
}

/* La apertura, primera escena de la página, empieza bajo la cabecera.
   Las aperturas a pantalla completa (02 y 03.1) usan entre bloques y al
   pie un hueco más corto que --separacion (20–36 px), para caber en una
   ventana. Medido en componentes.md. */
.loha-escena--apertura {
	--hueco-apertura: clamp(1.25rem, 0.5rem + 1.5vw, 2.25rem);
	padding-top: var(--cabecera);
}

/* E y TA: imagen a la derecha, hasta el borde, fundida en la banda hacia
   la izquierda; el texto a la izquierda sobre el fondo limpio. La escena
   mide lo que su contenido y la imagen cubre esa altura; con --pantalla,
   la de la ventana.
     --degradado-texto    hasta dónde llega el texto (padding derecho)
     --degradado-imagen   desde dónde empieza la imagen
     --degradado-fundido  ancho del fundido de la izquierda */
@media (min-width: 1024px) {
	.loha-escena--degradado {
		display: grid;
		align-items: center;
	}

	.loha-escena--apertura {
		padding-top: 0;
	}

	.loha-escena--degradado .loha-escena__fondo {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		/* En TA el texto ocupa más proporción: la foto empieza más tarde
		   para que la entradilla no la pise. */
		left: var(--degradado-imagen, max(38%, 32rem));
		aspect-ratio: auto;
	}

	.loha-escena--apertura .loha-escena__fondo {
		top: var(--cabecera);
	}

	.loha-escena--degradado .loha-escena__imagen,
	.loha-escena--degradado .loha-escena__fondo > .loha-provisional {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.loha-escena--degradado .loha-escena__contenido {
		padding-right: var(--degradado-texto, 48%);
	}

	/* El titular de la apertura puede entrar en la zona fundida, sobre la
	   parte de dibujo de la foto; la entradilla se queda antes. En el 01,
	   todo el texto va sobre el dibujo (abajo, «Apertura del 01»). */
	.loha-escena--apertura .loha-escena__contenido {
		padding-top: var(--area-segura);
		padding-bottom: var(--separacion);
	}

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

/* ── Fundido (.loha-fundido) ──────────────────────────────── */
/* La única técnica de foto fundida del sitio: R1 --degradado (01, 02 y
   05) y los ámbitos abiertos del 03 (U6). Va en
   la caja de la foto, que empieza en --degradado-imagen, y todo se mide
   en proporción a esa caja, nunca en coordenadas de la página: así el
   fundido existe en cualquier ancho (componentes.md, «Fundido»).
     --degradado-fundido   dónde acaba la máscara: la foto, entera
     --papel-alfa          intensidad del papel sobre la foto (0: sin él)
     --papel-pleno         hasta dónde es pleno
     --papel-fin           dónde ya es transparente
     --papel-imagen        su color (el papel del sitio por defecto)
   El papel solo se pone donde el contraste lo pide, con la intensidad
   mínima medida contra los píxeles reales: si cambia la foto, se vuelve
   a medir. */
@media (min-width: 1024px) {
	.loha-fundido {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--degradado-fundido, 40%));
		mask-image: linear-gradient(to right, transparent 0, #000 var(--degradado-fundido, 40%));
	}

	.loha-fundido::before {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
		background: linear-gradient(
			to right,
			color-mix(in srgb, var(--papel-imagen, var(--beige-50)) calc(var(--papel-alfa, 0) * 100%), transparent) 0,
			color-mix(in srgb, var(--papel-imagen, var(--beige-50)) calc(var(--papel-alfa, 0) * 100%), transparent) var(--papel-pleno, 0%),
			transparent var(--papel-fin, 0%)
		);
		pointer-events: none;
	}
}

/* ── Apertura del 01 ──────────────────────────────────────── */
/* La foto pasa de dibujo a fotografía (guía cromática del 01). En E y TA,
   a pantalla completa y con el texto encima de su zona de dibujo: la caja
   de la foto empieza casi en el borde izquierdo y el dibujo queda detrás
   del texto, desvanecido por el fundido del sitio (.loha-fundido), con el
   papel encima donde el contraste lo pide (componentes.md).
   M: la foto recortada y ampliada sobre el salón, en una banda de
   786:940, y el texto debajo (abajo, en M). Con imagen para móvil, la
   suya, con la banda a su proporción. TV, como cualquier --degradado: la
   foto entera como banda. */
@media (min-width: 1024px) {
	/* La caja de la foto empieza en el 12 % y la máscara la deja entera en
	   el 45 % de la caja; el texto llega al 42 % de la página (el 34 % de
	   la caja; en TA, el 36 %). El papel, pleno hasta el 38 % de la caja y
	   transparente en el 55 %: al 62 %, la intensidad mínima con la que
	   los párrafos pasan de 4,5 sobre los trazos del dibujo en todos los
	   anchos (componentes.md, contraste de la apertura del 01). Si cambia
	   la foto, hay que volver a medir. */
	.loha-pagina--01 .loha-escena--apertura {
		--degradado-imagen: 12%;
		--degradado-fundido: 45%;
		--degradado-texto: 58%;
		--papel-alfa: 0.62;
		--papel-pleno: 38%;
		--papel-fin: 55%;
	}

	/* El titular, en tres líneas como en la previa, en los dos idiomas y
	   sin saltos escritos: una medida de 8,5 em no deja repartirlo en dos.
	   Los párrafos, a la medida de la entradilla de --degradado. */
	.loha-pagina--01 .loha-escena--apertura .loha-encabezado__titular {
		max-width: 8.5em;
	}

	.loha-pagina--01 .loha-escena--apertura .loha-parrafos {
		max-width: min(var(--lectura), 30em);
	}
}

/* TA: la columna de texto, algo más ancha, para que «construye antes»
   quepa en una línea (390 px a 1024). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.loha-pagina--01 .loha-escena--apertura {
		--degradado-texto: 56%;
	}
}

@media (max-width: 599px) {
	/* La banda, a 786:940, más baja que la referencia del cliente
	   (786:1000): con aquella, en un iPhone 14 Pro la última frase de la
	   apertura quedaba cortada en la primera pantalla (revisión de Juan,
	   noviembre de 2026). A 375 × 667 el titular cabe entero en la primera
	   pantalla (acaba en 664); con 786:960, no (674). Con imagen para móvil manda la proporción de la
	   imagen, en el atributo style: por eso su campo pide 786:940. */
	.loha-pagina--01 .loha-escena--apertura {
		--escena-proporcion-m: 786 / 940;
	}

	/* Menos techo y la mirada en el sofá, la mesa y la alfombra (ajustes
	   del cliente para móvil, noviembre de 2026). En la banda la foto ya
	   entra entera de alto y moverla en vertical no recorta nada: se amplía
	   un 20 % anclada abajo, así que sale una sexta parte de arriba, techo,
	   y se ve el 39 % del ancho de la foto. En horizontal, el encuadre por
	   defecto va al 68,5 %, con la ampliación anclada en el 80 %: se ve del
	   42,5 al 81,8 % de la foto, la mesa entera (acaba en el 81,4 %) y el
	   sillón azul fuera (empieza en el 82,3 %). Con el 61 % del recorte de
	   la referencia, el extremo derecho de la mesa quedaba fuera. El sofá y
	   la alfombra no caben enteros con ningún encuadre: miden la mitad de
	   la foto o más; del sofá se ve el arranque curvo de la izquierda. Por
	   la izquierda sale sobre todo el boceto. Afinado para 786:940: si cambia
	   la proporción, hay que volver a colocarlo. Con imagen para móvil,
	   ampliada igual: no se ven la sexta parte de arriba, el 13 % de la
	   izquierda ni el 3 % de la derecha. El sizes de plantilla-01.php
	   cuenta la ampliación. */
	.loha-pagina--01 .loha-escena--apertura .loha-escena__fondo {
		overflow: clip;
	}

	.loha-pagina--01 .loha-escena--apertura .loha-escena__imagen {
		object-position: var(--encuadre-x, 68.5%) var(--encuadre-y, 50%);
		scale: 1.2;
		transform-origin: 80% 100%;
	}
}

/* ── --degradado a sangre (apertura del 02) ───────────────── */
/* La foto va a sangre en E y TA, como en la previa del 02: todo el
   ancho, sin máscara, y también detrás de la cabecera. El texto va sobre
   el papel del fundido, a la izquierda. En TV y M, banda como cualquier
   --degradado. También la usan las aperturas de los casos (casos.css). */

/* Sin máscara: la foto, entera y a todo el ancho. */
.loha-escena--sangre {
	--degradado-imagen: 0px;
	--degradado-fundido: 0px;
}

/* El papel de la apertura del 02 (solo existe en E y TA: .loha-fundido).
   La foto de la revisión de octubre de 2026 no trae fundido propio (la
   anterior ya pasaba de boceto a fotografía y bastaba un papel del 68 %
   hasta el 52 %): ahora el papel hace todo el fundido. Valores de Juan,
   probados sobre la foto nueva: pleno al 85 % hasta el 40 % del ancho y
   transparente en el 70 %. El color, el del papel de la imagen anterior,
   algo más claro que --beige-50. Solo aquí: las aperturas de los casos
   usan --sangre con su propio papel. Si cambia la imagen, hay que volver
   a medir (componentes.md). */
@media (min-width: 1024px) {
	.loha-pagina--02 .loha-escena--sangre {
		--papel-imagen: #F9F6EE;
		--papel-alfa: 0.85;
		--papel-pleno: 40%;
		--papel-fin: 70%;
	}
}

/* Hasta 1535 px, el papel pleno llega al 46 %. En TA la columna de texto
   ocupa más proporción y, hasta unos 1180 px, el resto de los problemas y
   la firma pasaban del 40 % (a 1024, 40,8 y 43,9 %): con el 46 %, enteros
   sobre el papel pleno, con 1,5rem de margen a 1024. De 1280 a 1535 la
   entradilla llega al 47–51 % del ancho, sobre una zona oscura de la
   foto, y con el 40 % su peor píxel bajaba a 3,45: con el 46 %, 4,88 como
   mínimo. Desde 1536 el 40 % ya cumple (componentes.md). */
@media (min-width: 1024px) and (max-width: 1535px) {
	.loha-pagina--02 .loha-escena--sangre {
		--papel-pleno: 46%;
	}
}

/* La cabecera, transparente sobre la foto del 02 (E y TA): MENÚ, el
   idioma y HABLEMOS van en azul sobre la esquina superior derecha, con
   ventanales y montantes oscuros. Un fundido claro, del color del papel,
   desde arriba y solo en la zona derecha. Nunca oscuro: la foto es
   luminosa y el texto, azul.
   - De arriba abajo: pleno hasta debajo de las acciones (mitad de la
     cabecera + 1,5rem, como el velo de arriba del 03) y transparente a
     la altura de la cabecera + 3rem.
   - De izquierda a derecha: entra entre el 55 y el 68 % del ancho. Las
     acciones empiezan en el 70,7 % a 1024 y en el 85 % a 2560; la
     columna de texto acaba en el 52 %.
   - Intensidad (--cabecera-claro): 62 %, la mínima con la foto nueva.
     Sus montantes son casi negros y, según el ancho, caen detrás de MENÚ
     o de HABLEMOS: el peor píxel es el de un fondo negro (4,66 con 62 %;
     con 61 %, 4,53, sin margen; con 60 %, 4,37). Medido en
     componentes.md. Si cambia la foto, hay que volver a medir. */
@media (min-width: 1024px) {
	.loha-pagina--02 .loha-escena--sangre {
		--cabecera-claro: 0.62;
	}

	.loha-pagina--02 .loha-escena--sangre .loha-escena__fondo::after {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0 0 auto;
		height: calc(var(--cabecera) + 3rem);
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--papel-imagen) calc(var(--cabecera-claro) * 100%), transparent) 0,
			color-mix(in srgb, var(--papel-imagen) calc(var(--cabecera-claro) * 100%), transparent) calc(var(--cabecera) / 2 + 1.5rem),
			transparent 100%
		);
		-webkit-mask-image: linear-gradient(to right, transparent 55%, #000 68%);
		mask-image: linear-gradient(to right, transparent 55%, #000 68%);
		pointer-events: none;
	}
}

@media (min-width: 1024px) {
	.loha-escena--apertura.loha-escena--sangre .loha-escena__fondo {
		top: 0;
	}

	/* Todo en una pantalla, como en la previa: titular, subtítulo, los
	   cinco problemas y la firma, separados por --hueco-apertura. */
	.loha-escena--sangre .loha-escena__contenido {
		padding-bottom: var(--hueco-apertura);
	}

	.loha-escena--sangre ul.loha-lista--filete,
	.loha-escena--sangre .loha-firma {
		margin-top: var(--hueco-apertura);
	}
}

/* La apertura y el pie, en una pantalla, en E y TA: el 02 (segunda
   revisión del cliente, noviembre de 2026) y, con el mismo criterio, el
   01 desde que su método va en la cortina (cambio del cliente, noviembre
   de 2026). El documento es una columna de al menos la ventana y la
   apertura ocupa lo que deja el pie, mida lo que mida (una fila en E; en
   TA los enlaces legales pueden partir en dos). Con el bloque centrado en
   ese sitio, titular y subtítulo suben. Solo con JavaScript: sin él, las
   pantallas de la cortina van en el flujo, debajo de la apertura, y el
   pie queda al final. Si el contenido no cabe, la apertura crece, como
   cualquier --pantalla. */
@media (min-width: 1024px) {
	.loha-js body:has(> main:is(.loha-pagina--01, .loha-pagina--02)) {
		display: flex;
		flex-direction: column;
		min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	}

	.loha-js main:is(.loha-pagina--01, .loha-pagina--02) {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
	}

	.loha-js :is(.loha-pagina--01, .loha-pagina--02) > .loha-escena--apertura {
		flex: 1 0 auto;
		min-height: 0;
	}

	/* El 01: al pie de los párrafos, el hueco corto de las aperturas a
	   pantalla completa (20–36 px) en lugar de --separacion: el pie viene
	   justo detrás. */
	.loha-js .loha-pagina--01 > .loha-escena--apertura .loha-escena__contenido {
		padding-bottom: var(--hueco-apertura);
	}

	/* Debajo de la firma, medio hueco: el pie viene justo detrás, con el
	   fundido de la foto y su propio relleno. Así cabe también a
	   1536 × 864 y 1280 × 800. */
	.loha-js .loha-pagina--02 .loha-escena--sangre .loha-escena__contenido {
		padding-bottom: calc(var(--hueco-apertura) / 2);
	}

	/* El pie, sin el corte recto de la foto (segunda revisión del
	   cliente): la foto, con su papel y el fundido de la cabecera, se
	   desvanece en su último tramo y deja ver el fondo de la escena, el
	   mismo --beige-50 del pie. La máscara sustituye a la del fundido,
	   que con --sangre no recorta nada. Solo en el 02, y con JavaScript:
	   sin él, debajo de la apertura no va el pie sino la cortina. */
	.loha-js .loha-pagina--02 .loha-escena--sangre .loha-escena__fondo {
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--pie-fundido)), transparent);
		mask-image: linear-gradient(to bottom, #000 calc(100% - var(--pie-fundido)), transparent);
	}

	.loha-pagina--02 .loha-escena--sangre {
		--pie-fundido: clamp(3rem, 6vh, 5rem);
	}
}

/* El 01, en ventanas bajas (E y TA, hasta 800 px de alto), con el
   criterio del 02 (abajo): solo los huecos, con la altura de la ventana;
   la letra no cambia. Sin apretar, a 1280 × 800 faltaban 15 px, a
   1024 × 768 (TA, con el pie en dos filas), 30, y a 1280 × 720, 95. Así
   caben 1280 × 800 y 1024 × 768; a 1280 × 720 aún faltan 39, y quitarlos
   dejaría el texto apelotonado. Medido en componentes.md. */
@media (min-width: 1024px) and (max-height: 800px) {
	.loha-js .loha-pagina--01 > .loha-escena--apertura {
		--hueco-apertura: 2.25svh;
	}

	.loha-js .loha-pagina--01 > .loha-escena--apertura .loha-escena__contenido {
		padding-top: calc(var(--cabecera) + 1.25svh);
	}

	.loha-js .loha-pagina--01 > .loha-escena--apertura .loha-encabezado__filete,
	.loha-js .loha-pagina--01 > .loha-escena--apertura .loha-parrafos {
		margin-top: 2.25svh;
	}
}

/* Ventanas bajas, de menos de 800 px de alto (E y TA): para que la
   apertura y el pie quepan también a 1366 × 768 y 1280 × 720, se
   aprietan solo los huecos, con la altura de la ventana; la letra no
   cambia (segunda revisión de Juan, noviembre de 2026). A 1280 × 720
   sobran 12 px; a 1366 × 768, 40, que el centrado reparte arriba y
   abajo. A 1024 × 768 aún faltan 44 (en TA el pie va en dos filas): se
   acepta. Medido en componentes.md. */
@media (min-width: 1024px) and (max-height: 799px) {
	.loha-js .loha-pagina--02 .loha-escena--sangre {
		--hueco-apertura: 2.25svh;
	}

	.loha-js .loha-pagina--02 .loha-escena--sangre .loha-escena__contenido {
		padding-top: calc(var(--cabecera) + 1.25svh);
	}

	.loha-js .loha-pagina--02 .loha-escena--sangre .loha-encabezado__entradilla {
		margin-top: 2svh;
	}

	.loha-js .loha-pagina--02 .loha-escena--sangre .loha-encabezado__filete {
		margin-top: 2.25svh;
	}

	.loha-js .loha-pagina--02 .loha-escena--sangre ul.loha-lista--filete {
		gap: 1.4svh;
	}
}

/* En esas ventanas bajas, hasta 1535 px, el papel pleno llega al 50 % en
   lugar del 46 %. Con los huecos más juntos la escena es más baja y la
   foto se recorta de otra manera: de 1220 a 1320 px, el final de la
   entradilla («problema», hacia el 50 % del ancho) caía junto al cuadro
   oscuro de la pared (4,07 en el peor píxel). Con el 50 %, 5,84 como
   mínimo, de 1024 a 1535 y de 600 a 799 de alto. No se nota. */
@media (min-width: 1024px) and (max-width: 1535px) and (max-height: 799px) {
	.loha-js .loha-pagina--02 .loha-escena--sangre {
		--papel-pleno: 50%;
	}
}

/* ── --velo (apertura del 03) ─────────────────────────────── */
/* La foto a sangre, en toda la escena y detrás de la cabecera, luminosa:
   no se oscurece. El texto va en blanco sobre la zona oscura de la foto
   (en la del 03.1, la mampara azul de la izquierda). La foto cubre la
   escena anclada a la izquierda, así que esa zona se queda detrás del
   texto en todos los anchos, y la columna de texto no pasa de ella.
     --velo-zona   ancho de la zona oscura, en fracción del ancho de la
                   foto. Medido en 03_01_APERTURA: la mampara llega al
                   30,6 % a la altura del remate (abajo, donde se retira
                   y asoman la base iluminada y la planta) y al 33,2 % a
                   la del titular (--velo-zona-titular, su canto curvo).
                   Si cambia la foto, hay que volver a medir.
   El velo es solo el degradado de las convenciones donde el contraste no
   llega: oscuro, desde el lado del texto que lo necesita y con la
   intensidad mínima medida. Nunca sobre toda la foto. Con la del 03.1
   hacen falta dos (abajo). */

.loha-escena--velo {
	--velo-zona: 0.306;
	--velo-zona-titular: 0.332;
	/* Intensidad de los dos degradados: la mínima que cumple el contraste
	   medido en los anchos de revisión (componentes.md). */
	--velo-lado: 0.31;
	--velo-arriba: 0.52;
	display: flex;
	flex-direction: column;
}

/* M: el degradado de la izquierda, al 40 %, medido con la foto como en la
   web real, con el encuadre horizontal en «Centro» (noviembre de 2026):
   detrás del texto queda el vestíbulo, no la mampara. Es el mínimo con el
   que la flecha, en su sitio nuevo (abajo), pasa de 3,0 en todos los
   teléfonos (con el 39 %, 2,94 a 320 × 568). El titular y la frase no
   llegan a 3,0: sus peores píxeles, casi siempre en la mitad derecha de
   las líneas, quedan fuera del alcance del degradado (componentes.md y
   decisiones-abiertas.md). Si el campo se deja vacío, con la foto anclada
   a la izquierda, vuelve al 42 %: lo piden las hojas de la planta. */
@media (max-width: 599px) {
	.loha-escena--velo {
		--velo-lado: 0.4;
	}
}

/* A diferencia de --degradado, la foto empieza arriba del todo, también
   en TV y M: la cabecera va encima, en blanco. */
.loha-escena--velo.loha-escena--apertura {
	padding-top: 0;
}

.loha-escena--velo .loha-escena__fondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.loha-escena--velo .loha-escena__imagen,
.loha-escena--velo .loha-escena__fondo > .loha-provisional {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

/* Anclada a la izquierda aunque no se elija encuadre horizontal: el
   texto va a la izquierda, sobre la zona oscura. */
.loha-escena--velo .loha-escena__imagen {
	object-position: var(--encuadre-x, 0%) var(--encuadre-y, 50%);
}

/* Los dos degradados oscuros, pegados al texto que los necesita y
   fundidos enseguida:
     - desde la izquierda, bajo el arranque de las líneas: las hojas de la
       planta que asoma por el borde tienen brillos que no llegan a 3,0;
     - desde arriba, detrás de la cabecera: MENÚ, HABLEMOS y el final del
       contexto caen sobre el techo y la pared claros según el ancho. */
.loha-escena--velo .loha-escena__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			rgb(0 0 0 / var(--velo-arriba)) 0,
			rgb(0 0 0 / var(--velo-arriba)) calc(var(--cabecera) / 2 + 1.5rem),
			rgb(0 0 0 / 0) calc(var(--cabecera) + 3rem)
		),
		linear-gradient(
			to right,
			rgb(0 0 0 / var(--velo-lado)) 0,
			rgb(0 0 0 / var(--velo-lado)) calc(var(--margen) + 6rem),
			rgb(0 0 0 / 0) calc(var(--margen) + 14rem)
		);
	pointer-events: none;
}

.loha-escena--velo .loha-escena__contenido {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: var(--area-segura);
	padding-bottom: var(--hueco-apertura, var(--separacion));
}

/* La columna de texto no pasa de la zona oscura. La foto cubre la escena:
   su ancho es el mayor entre el de la ventana y el alto por 16/9. La caja
   del titular llega justo hasta el canto de la mampara a su altura
   (--velo-tolerancia a 0; Juan, segunda revisión, noviembre de 2026: así
   1440 × 900 va en cinco líneas y ninguna letra pasa del canto); la línea
   que no cabe se parte en dos dentro de la caja. Hasta entonces la caja
   acababa 1rem antes del canto (revisión del cliente, 03-02). Con 16 px de
   tolerancia, la «s» final de «otros espacios» caía sobre el mármol claro
   sin llegar a 3:1. Por ventana, en tipografia.md («La apertura del 03»).
   El remate, más abajo, se queda a 1,5rem del borde de la suya. Con poca
   altura (móvil apaisado) la escena crece con el texto y la foto con ella:
   el suelo de 17rem evita una columna de dos palabras. */
.loha-escena--velo .loha-encabezado {
	--velo-tolerancia: 0px;
	max-width: max(17rem, calc(var(--velo-zona-titular) * max(100vw, 100svh * 16 / 9) - var(--margen) + var(--velo-tolerancia)));
	margin-bottom: var(--hueco-apertura, var(--separacion));
}

.loha-escena--velo .loha-encabezado__remate {
	max-width: max(17rem, calc(var(--velo-zona) * max(100vw, 100svh * 16 / 9) - var(--margen) - 1.5rem));
}

/* «El uso cambia las reglas» (03.1) y «La fotografía enseña un
   instante…» (03.3), algo más separadas de su titular (segunda revisión
   del cliente, noviembre de 2026): 24–52 px en lugar de 16–28. */
.loha-escena--velo .loha-encabezado__remate,
.loha-escena--amplia .loha-encabezado__remate {
	margin-top: clamp(1.5rem, 0.75rem + 2.25vw, 3.25rem);
}

/* La flecha, al pie de la pantalla. */
.loha-escena--velo .loha-accion--sola {
	align-self: flex-start;
	margin-top: auto;
}

/* M: el hueco entre el titular y la flecha, repartido (ajustes del
   cliente para móvil, noviembre de 2026). El titular baja un 3 % del alto
   de la pantalla y la flecha sube un 7 %, con más relleno arriba y abajo.
   La flecha sigue en el flujo, debajo de la frase, así que no tapa nada:
   si el texto no cabe (con la letra ampliada, por ejemplo), la escena
   crece y la flecha queda tras la frase. A 390 × 844, el titular empieza
   a 45 px de la cabecera (antes, 20) y la flecha acaba a 80 px del borde
   (antes, 21). */
@media (max-width: 599px) {
	.loha-escena--velo.loha-escena--apertura .loha-escena__contenido {
		padding-top: calc(var(--area-segura) + 3svh);
		padding-bottom: calc(var(--hueco-apertura, var(--separacion)) + 7svh);
	}
}

/* ── --panel (cierre del 03) ──────────────────────────────── */
/* E y TA: la foto a sangre en toda la escena y el texto en una caja de
   papel a la izquierda, sobre el espacio vacío de la imagen (brief 03:
   «respetar el espacio negativo»). Sin fundidos ni velos. TV y M: la foto
   entera como banda, con su propia proporción, y el texto debajo sobre el
   fondo de la página. */

.loha-escena--panel .loha-escena__imagen {
	height: auto;
}

/* «Ahí es donde intervenimos» cierra el bloque: algo más separada de la
   frase anterior que el resto del panel (revisión del cliente, 03-11:
   36–72 px en lugar de 28–56). */
.loha-escena--panel .loha-cierre {
	margin-top: clamp(2.25rem, 1.25rem + 2.75vw, 4.5rem);
}

@media (min-width: 1024px) {
	.loha-escena--panel {
		/* Relleno de la caja: el texto queda en el margen de la página y la
		   caja sobresale por la izquierda. */
		--panel-relleno: clamp(2rem, 0.75rem + 2.5vw, 3.5rem);
		padding-block: calc(2 * var(--separacion));
	}

	.loha-escena--panel .loha-escena__fondo {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.loha-escena--panel .loha-escena__imagen,
	.loha-escena--panel .loha-escena__fondo > .loha-provisional {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	/* Sin foto, el rótulo del marcador (R9) va en la mitad que no tapa la
	   caja. */
	.loha-escena--panel .loha-escena__fondo > .loha-provisional {
		padding-left: 50%;
	}

	.loha-escena--panel .loha-escena__contenido {
		width: 46%;
		margin-left: calc(var(--margen) - var(--panel-relleno));
		padding: var(--panel-relleno);
		background-color: var(--papel);
	}
}

/* ── --editorial (05) ─────────────────────────────────────── */
/* Las dos pantallas del 05: --degradado --pantalla con un bloque
   editorial (titular, cuerpo en párrafos y, en la 1, SEGUIR; en la 2,
   la frase destacada). Su altura es mínima, nunca fija: si el texto no
   cabe en la ventana, la pantalla crece y la letra no se reduce
   (guía del 05). Medido en componentes.md.
   - Entre el titular y el cuerpo, y antes de la frase destacada, el
     paso de 20–36 px del sistema (el de un encabezado con filete y su
     entradilla): 31–36 px en E, dentro de los 28–40 de la guía. Entre
     párrafos, 1,25 em (21–24 px): con los textos de la segunda revisión
     del cliente (noviembre de 2026), cuatro párrafos en cada pantalla,
     1 em los juntaba demasiado (antes, como en las páginas legales).
   - Antes de SEGUIR y al pie, el hueco corto de las aperturas a
     pantalla completa (--hueco-apertura, 20–36 px), y también arriba en
     la pantalla 2, que ya tiene la cabecera encima.
   - El cuerpo, a 29 em de lectura: de una a cuatro líneas por párrafo,
     como en la previa. En TV y M, al ancho de lectura. */

.loha-escena--editorial {
	--hueco-apertura: clamp(1.25rem, 0.5rem + 1.5vw, 2.25rem);
	--hueco-cuerpo: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

/* El titular, en cuatro líneas y al escalón H1 en las dos pantallas
   (h1 y h2 en el HTML), como el de las aperturas del 01, el 02 y el
   03.1. */
.loha-escena--editorial .loha-encabezado__titular {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
}

.loha-escena--editorial .loha-parrafos {
	margin-top: var(--hueco-cuerpo);
}

.loha-escena--editorial .loha-parrafos p + p {
	margin-top: 1.25em;
}

.loha-escena--editorial .loha-parrafos > .loha-parrafos__cierre--linea {
	margin-top: var(--hueco-cuerpo);
}

.loha-escena--editorial .loha-escena__seguir {
	margin-top: var(--hueco-apertura);
}

/* E y TA: el fundido del sitio (.loha-fundido), con sus valores por
   defecto: la foto empieza en el 38 % y la máscara acaba en el 40 % de
   su caja. El tramo más corto de la previa (21 %: la foto entera hacia
   el 51 % de la página a 1672) dejaba el acento del titular de la
   pantalla 1 sobre la camisa oscura entre 1280 y 1440 px, y ni con el
   papel a 0,7 llegaba a 3,0. Donde el texto entra en el fundido, el
   papel sobre la foto: pleno hasta el 12 % de su caja (pasado el final
   del titular) y transparente en el 30 %, con la intensidad mínima que
   cumple en cada pantalla (abajo; componentes.md, «Contraste medido ·
   05»). */
@media (min-width: 1024px) {
	.loha-escena--editorial {
		--editorial-medida: 29em;
		--papel-pleno: 12%;
		--papel-fin: 30%;
	}

	.loha-escena--editorial .loha-escena__contenido {
		padding-bottom: var(--hueco-apertura);
	}

	.loha-escena--editorial:not(.loha-escena--apertura) > .loha-escena__contenido {
		padding-top: var(--hueco-apertura);
	}

	/* La pantalla 2 acaba en la frase destacada y debajo empieza el azul
	   del epílogo: con el texto nuevo la pantalla no cabe en la ventana
	   hasta 1536 px y la frase quedaba a 23–31 px del azul. Al pie, la
	   separación del sistema (28–72 px). La 1 conserva el hueco corto,
	   para que SEGUIR siga a la vista a 1440 × 900. */
	.loha-escena--editorial:not(.loha-escena--apertura) > .loha-escena__contenido {
		padding-bottom: var(--separacion);
	}

	.loha-escena--editorial .loha-parrafos {
		max-width: var(--editorial-medida);
	}
}

/* Intensidad del papel, la mínima medida para cada foto. Si cambia una
   foto, hay que volver a medir. */
#pantalla-1.loha-escena--editorial {
	--papel-alfa: 0.6;
}

#pantalla-2.loha-escena--editorial {
	--papel-alfa: 0.25;
}

/* Ventanas bajas, hasta 990 px de alto (E y TA): la pantalla 1 entera,
   con SEGUIR, en la primera ventana (ajuste del cliente, noviembre de
   2026: en 1920 × 1080 con la escala de Windows al 125 %, unos
   1536 × 730 útiles, se cortaba antes de SEGUIR). Con el criterio de las
   aperturas del 01 y el 02: por la altura. Sin el ajuste, la pantalla 1
   mide 991 px desde 1920 de ancho (menos en las más estrechas): desde
   991 de alto cabe en cualquier ancho y el 05 sigue como estaba. Hasta
   990 entran las ventanas de navegador de un monitor de 1080 (unas 950
   o 970 de alto).
   - La columna acaba donde el papel deja de cubrir la foto por entero
     (--papel-pleno, el 12 % de su caja): el texto, más ancho, no pisa la
     foto ni el fundido. Hasta ahí llegaba ya, sin que la columna lo
     dijera.
   - El cuerpo, a la medida más ancha de tipografia.md: 32 em, hasta 68
     caracteres. Hasta unos 1440 px de ancho manda la columna.
   - Los dos titulares, entre H2 y H1 con la altura de la ventana
     (7svh), iguales en las dos pantallas.
   - En la pantalla 1, el titular, una línea por color donde cabe: cada
     línea escrita en el campo es un elemento flexible, y las de un
     mismo tramo van seguidas, separadas por un espacio (0,22 em en DM
     Serif), si caben; si no, con el salto escrito. La 2 conserva sus
     saltos: en las ventanas muy anchas (unos 2400 px) sus dos tramos
     cabrían en una línea, y el final del acento llegaría sobre la foto,
     donde su papel (0,25) ya no basta (2,85 a 2560 × 990).
   - Solo la pantalla 1 aprieta sus huecos: arriba la cabecera más
     1,25svh, como el 01; 3svh bajo el titular, 0,5 em entre párrafos y
     2,25svh antes de SEGUIR y al pie. La 2 conserva los suyos, también
     el interlineado.
   Medido en componentes.md. */
@media (min-width: 1024px) and (max-height: 990px) {
	.loha-escena--editorial {
		--editorial-medida: 32em;
		/* 100 % menos el inicio de la foto y el 12 % de su caja. */
		--degradado-texto: calc(88% - 0.88 * var(--degradado-imagen, max(38%, 32rem)));
	}

	.loha-escena--editorial .loha-encabezado__titular {
		font-size: max(var(--fs-h2), min(var(--fs-h1), 7svh));
	}

	.loha-escena--editorial.loha-escena--apertura .loha-tramo {
		display: flex;
		flex-wrap: wrap;
		column-gap: 0.22em;
	}

	.loha-escena--editorial.loha-escena--apertura {
		--hueco-cuerpo: 3svh;
		--hueco-apertura: 2.25svh;
	}

	.loha-escena--editorial.loha-escena--apertura > .loha-escena__contenido {
		padding-top: calc(var(--cabecera) + 1.25svh);
	}

	.loha-escena--editorial.loha-escena--apertura .loha-parrafos p + p {
		margin-top: 0.5em;
	}
}

/* Una pantalla que no es la primera de la página queda bajo la cabecera
   que acompaña (con JavaScript): mide como mínimo lo que queda debajo
   de ella, para caber en una pantalla. Las de la cortina van en su capa,
   sin la cabecera del sitio. */
.loha-js .loha-pagina > .loha-escena--pantalla:not(.loha-escena--apertura) {
	min-height: calc(100vh - var(--cabecera));
	min-height: calc(100svh - var(--cabecera));
}