/*
 * HERO de la HOME (hero.md). Porta _docs/prototipos/hero.html con tres
 * cambios de partida:
 *   - nombres de clase del tema (.loha-hero__…) y variables globales
 *     (color, tipografía, --cabecera, --margen, tiempos --t- en
 *     variables.css);
 *   - la cabecera es la del tema: aquí solo se le añade el paso de azul a
 *     blanco con el velo;
 *   - sin indicación de continuar (.loha__cue, --t-cue), sin la sección
 *     de demostración y sin scroll-behavior.
 * Y la secuencia acumulativa de la revisión del cliente (23/10/2026):
 * cada pregunta entra y se queda, en lugar de salir al llegar la
 * siguiente.
 *
 * La secuencia es CSS puro con animation-delay: arranca al cargar, no
 * depende del scroll, no se repite, no bloquea nada y funciona sin
 * JavaScript.
 *
 *    0,8 s   entra la pregunta 1 (superior izquierda)
 *    3,3 s   entra la 2 (superior derecha); la 1 se queda
 *    5,8 s   entra la 3 (inferior izquierda)
 *    8,3 s   entra la 4 (inferior derecha): las cuatro, 3 s juntas
 *   11,3 s   salen las cuatro a la vez (0,6 s), la foto se oscurece
 *            (0,8 s) y la cabecera pasa a blanco
 *   11,5 s   entra la frase de cierre (0,6 s), que queda como estado
 *            final; empieza mientras salen las preguntas
 *
 * Con movimiento reducido, sin secuencia larga (abajo).
 */

/* ============ ESTRUCTURA ==================================== */

.loha-hero {
	/* Márgenes de las esquinas: el lateral es el del sitio (--margen),
	   para que las preguntas se alineen con el logo y con HABLEMOS. El
	   superior separa la pregunta de la derecha de HABLEMOS y del
	   selector de idioma. */
	--hero-margen-sup: clamp(2.5rem, 7vh, 5.5rem);
	--hero-margen-inf: 6.5vh;

	/* Tratamiento de la imagen: aclarado de cada esquina, el mismo en las
	   cuatro, y oscurecido al llegar la conclusión. */
	--halo:     0.62;
	--velo:     #0A1520;
	--velo-max: 0.58;

	/* Halo de cada pregunta en tablet vertical y móvil: blanco al 85 % en
	   una meseta que cubre el texto (hero.md). */
	--halo-centro: 0.85;

	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

/* Con sesión iniciada, la barra de administración baja el documento: el
   hero mide lo que queda para que la página siga sin recorrido. */
.admin-bar .loha-hero {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

.loha-hero__escena {
	position: absolute;
	inset: 0;
	background: var(--beige-50); /* respaldo si la imagen no carga */
}

/* Encuadre: el de los campos, si se ha elegido; si no, el del
   prototipo, 58 % 50 % (64 % por debajo de 1024 px). */
.loha-hero__imagen {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--encuadre-x, 58%) var(--encuadre-y, 50%);
}

/* R9 a pantalla completa mientras el campo de imagen está vacío. */
.loha-hero__escena > .loha-provisional {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

/* ============ CABECERA ====================================== */
/* Empieza en --azul sobre la foto clara y pasa a --blanco cuando entra
   el velo, con su mismo retardo (cabecera.md). El logo, los textos, las
   líneas y el contorno de HABLEMOS van con currentColor. */

.loha-cabecera--sobre-hero {
	animation: loha-hero-cabecera var(--dur-cierre) ease var(--t-cierre) forwards;
}

@keyframes loha-hero-cabecera {
	to { color: var(--blanco); }
}

/* La variante de HABLEMOS con fondo se invierte sobre oscuro, como en
   .loha-cabecera--sobre-oscuro (accion.css), a la vez que el resto. */
.loha-cabecera--sobre-hero .loha-accion--relleno {
	animation: loha-hero-relleno var(--dur-cierre) ease var(--t-cierre) forwards;
}

@keyframes loha-hero-relleno {
	to {
		border-color: var(--beige-100);
		background-color: var(--beige-100);
		color: var(--azul);
	}
}

/* ============ HALOS ========================================= */
/* Aclaran la esquina de cada pregunta para que el azul y el acento
   destaquen, sin oscurecer la fotografía. Entran con su pregunta, se
   quedan con ella y salen las cuatro a la vez. El mismo tratamiento en
   las cuatro: una meseta corta en la esquina y un fundido largo. */

.loha-hero__halos {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.loha-hero__halo {
	position: absolute;
	opacity: 0;
	animation:
		loha-hero-halo-entra var(--dur-q) ease var(--d) both,
		loha-hero-halo-sale  var(--dur-cruce) ease var(--t-cierre) forwards;
}

@keyframes loha-hero-halo-entra { to { opacity: var(--halo); } }
@keyframes loha-hero-halo-sale  { to { opacity: 0; } }

.loha-hero__halo--si {
	--d: var(--t-q1);
	top: 0;
	left: 0;
	width: 58%;
	height: 50%;
	background: radial-gradient(125% 135% at 0% 0%, var(--blanco) 0%, var(--blanco) 12%, transparent 78%);
}

.loha-hero__halo--sd {
	--d: var(--t-q2);
	top: 0;
	right: 0;
	width: 58%;
	height: 50%;
	background: radial-gradient(125% 135% at 100% 0%, var(--blanco) 0%, var(--blanco) 12%, transparent 78%);
}

.loha-hero__halo--ii {
	--d: var(--t-q3);
	bottom: 0;
	left: 0;
	width: 54%;
	height: 46%;
	background: radial-gradient(125% 135% at 0% 100%, var(--blanco) 0%, var(--blanco) 12%, transparent 78%);
}

.loha-hero__halo--id {
	--d: var(--t-q4);
	bottom: 0;
	right: 0;
	width: 54%;
	height: 46%;
	background: radial-gradient(125% 135% at 100% 100%, var(--blanco) 0%, var(--blanco) 12%, transparent 78%);
}

/* ============ VELO FINAL ==================================== */

.loha-hero__velo {
	position: absolute;
	inset: 0;
	background: var(--velo);
	opacity: 0;
	pointer-events: none;
	animation: loha-hero-velo var(--dur-cierre) ease var(--t-cierre) both;
}

@keyframes loha-hero-velo { to { opacity: var(--velo-max); } }

/* ============ PREGUNTAS ===================================== */

/* Colores invertidos desde la segunda revisión del cliente (noviembre
   de 2026): la pregunta en --beige-600 y el acento en --azul. */
.loha-hero__pregunta {
	position: absolute;
	z-index: 2;
	max-width: 44%;
	margin: 0;
	color: var(--beige-600);
	font-family: var(--serif);
	font-size: var(--fs-hero-pregunta);
	line-height: 1.18;
	/* Entra y se queda; al cierre salen las cuatro a la vez. La segunda
	   animación usa forwards en vez de both para no pisar a la primera
	   durante su retardo. */
	animation:
		loha-hero-pregunta-entra var(--dur-q) ease var(--d) both,
		loha-hero-pregunta-sale  var(--dur-cruce) ease var(--t-cierre) forwards;
}

@keyframes loha-hero-pregunta-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes loha-hero-pregunta-sale { to { opacity: 0; } }

/* El acento del hero es solo color, sin cursiva (tipografia.md). */
.loha-hero__pregunta .loha-acento {
	color: var(--azul);
	font-style: normal;
}

.loha-hero__pregunta--si {
	--d: var(--t-q1);
	top: calc(var(--cabecera) + var(--hero-margen-sup));
	left: var(--margen);
}

.loha-hero__pregunta--sd {
	--d: var(--t-q2);
	top: calc(var(--cabecera) + var(--hero-margen-sup));
	right: var(--margen);
	text-align: right;
}

.loha-hero__pregunta--ii {
	--d: var(--t-q3);
	bottom: var(--hero-margen-inf);
	left: var(--margen);
}

.loha-hero__pregunta--id {
	--d: var(--t-q4);
	bottom: var(--hero-margen-inf);
	right: var(--margen);
	text-align: right;
}

/* ============ FRASE DE CIERRE =============================== */
/* Sin acento en --blanco; el acento en --beige-100, solo color. */

.loha-hero__final {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: min(86%, 1220px);
	margin: 0;
	color: var(--blanco);
	font-family: var(--serif);
	font-size: var(--fs-hero-final);
	font-weight: 400;
	line-height: 1.22;
	text-align: center;
	text-wrap: balance;
	opacity: 0;
	animation: loha-hero-final var(--dur-cruce) ease var(--t-final) both;
}

@keyframes loha-hero-final {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.975); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.loha-hero__final .loha-acento {
	color: var(--beige-100);
	font-style: normal;
}

/* ============ TABLET VERTICAL Y MÓVIL ======================= */
/* Las esquinas no caben: las cuatro preguntas van una debajo de otra,
   en columna, y se acumulan igual que en escritorio. La columna va en
   el flujo: la página mide al menos la ventana y, si las cuatro no
   caben (letra ampliada, zoom), crece y se desplaza en lugar de
   cortarlas. Nada se solapa. */

@media (max-width: 1023px) {
	/* La frase final ocupa el sitio de la columna: entra 0,3 s después de
	   que empiecen a salir las preguntas, que ya van por la mitad, para
	   que no se crucen dos textos. La pantalla nunca queda vacía. */
	:root {
		--t-final: 11.6s;
	}

	.loha-hero,
	.admin-bar .loha-hero {
		height: auto;
	}

	.loha-hero,
	.loha-hero__escena,
	.loha-hero__preguntas {
		min-height: 100vh;
		min-height: 100svh;
	}

	.admin-bar .loha-hero,
	.admin-bar .loha-hero__escena,
	.admin-bar .loha-hero__preguntas {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
		min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
	}

	.loha-hero__escena {
		position: relative;
	}

	.loha-hero__imagen {
		object-position: var(--encuadre-x, 64%) var(--encuadre-y, 50%);
	}

	/* Base clara permanente: a este tamaño la fotografía es demasiado
	   recargada para sostener texto sin ayuda. Entra con la primera
	   pregunta y sale con todas. Va en un pseudoelemento para que su
	   opacidad no multiplique la de los halos. */
	.loha-hero__halos::before {
		content: "";
		position: absolute;
		inset: 0;
		opacity: 0;
		background: linear-gradient(180deg, color-mix(in srgb, var(--blanco) 72%, transparent) 0%, color-mix(in srgb, var(--blanco) 50%, transparent) 50%, color-mix(in srgb, var(--blanco) 72%, transparent) 100%);
		animation:
			loha-hero-halo-entra var(--dur-q) ease var(--t-q1) both,
			loha-hero-halo-sale  var(--dur-cierre) ease var(--t-cierre) forwards;
	}

	/* Los halos de las esquinas no se usan: cada pregunta lleva el suyo. */
	.loha-hero__halo {
		display: none;
	}

	/* ul.: el reinicio de las listas (base.css) quita el relleno. */
	ul.loha-hero__preguntas {
		--hueco-preguntas: clamp(1.25rem, 3.5vh, 2.5rem);
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--hueco-preguntas);
		margin: 0;
		padding: calc(var(--cabecera) + 3vh) var(--margen) 7vh;
	}

	.loha-hero__pregunta {
		position: relative;
		inset: auto;
		max-width: 32rem;
		text-align: left;
		/* El halo, detrás del texto y dentro de la pregunta. */
		isolation: isolate;
	}

	.loha-hero__pregunta--sd,
	.loha-hero__pregunta--id {
		text-align: left;
	}

	/* El halo de cada pregunta va con ella: entra y se queda con su
	   pregunta y sale con todas. Es una banda blanca, plena bajo todas
	   las líneas y fundida hacia la derecha y, a lo alto de un hueco,
	   hacia arriba y abajo: los fundidos de dos preguntas seguidas se
	   cruzan en el hueco y, con las cuatro, las bandas forman un solo
	   aclarado detrás de la columna, sin franjas ni recuadros. No depende
	   de la foto: detrás de una pregunta puede haber una zona oscura (en la
	   actual, las lamas de madera). */
	.loha-hero__pregunta::before {
		content: "";
		position: absolute;
		inset: calc(-1 * var(--hueco-preguntas)) calc(-1 * var(--margen));
		z-index: -1;
		opacity: var(--halo-centro);
		background: linear-gradient(90deg, var(--blanco) 0%, var(--blanco) 85%, transparent 100%);
		-webkit-mask: linear-gradient(180deg, transparent 0, #000 var(--hueco-preguntas), #000 calc(100% - var(--hueco-preguntas)), transparent 100%);
		mask: linear-gradient(180deg, transparent 0, #000 var(--hueco-preguntas), #000 calc(100% - var(--hueco-preguntas)), transparent 100%);
		pointer-events: none;
	}

	.loha-hero__final {
		width: 88%;
	}
}

/* Pantallas bajas y apaisadas (un móvil en horizontal): en una columna
   no caben las cuatro. Van en dos columnas, como dos filas de esquinas.
   Un móvil pequeño en vertical sigue en una columna. */
@media (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
	ul.loha-hero__preguntas {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: center;
		align-items: start;
		gap: clamp(1rem, 4vh, 1.75rem) var(--medianil);
		padding-top: calc(var(--cabecera) + 2vh);
		padding-bottom: 5vh;
	}
}

/* ============ MOVIMIENTO REDUCIDO =========================== */
/* Sin secuencia larga: las cuatro preguntas, con sus halos, están desde
   el principio, y a los 4 s un solo fundido lleva a la frase final. Todo
   se resuelve en menos de 5 s, solo con opacidad: las preguntas no
   suben y la frase no hace el ligero zoom. Las variables se cambian en
   :root porque la cabecera, que cambia de color con el velo, está fuera
   del hero; esta hoja solo se carga en la portada. */

@keyframes loha-hero-pregunta-entra-quieta {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes loha-hero-final-quieta {
	from { opacity: 0; transform: translate(-50%, -50%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-q1:      0s;
		--t-q2:      0s;
		--t-q3:      0s;
		--t-q4:      0s;
		--dur-q:     0s;
		--t-cierre:  4s;
		--t-final:   4.2s;
	}

	.loha-hero__pregunta {
		animation-name: loha-hero-pregunta-entra-quieta, loha-hero-pregunta-sale;
	}

	.loha-hero__final {
		animation-name: loha-hero-final-quieta;
	}
}