/* ==========================================================================
   Hero de portada: fotografia a pantalla completa con parallax.

   Las capas se mueven a velocidades distintas (lo hace movimiento.js). El
   CSS solo prepara el escenario: sobredimensiona el fondo para que al
   desplazarse no asome el borde, y fija el texto, que NUNCA se mueve.
   ========================================================================== */

.hero-avanza {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	align-items: end;
	/* dvh y no vh: en movil, vh incluye la barra del navegador y la seccion
	   queda cortada justo cuando esa barra aparece. */
	min-block-size: min(100dvh, 56rem);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--crema);
}

/* ------------------------------------------------------------ Capa fondo -- */

.hero-avanza__fondo {
	position: absolute;
	/* Sobresale por arriba y por abajo: el parallax desplaza la capa hasta un
	   7 % y sin este margen se veria el fondo de la pagina asomando. */
	inset: -12% 0;
	z-index: -2;
}

.hero-avanza__fondo picture,
.hero-avanza__fondo img {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.hero-avanza__fondo img {
	object-fit: cover;
	object-position: center 60%;
	border-radius: 0;
}

/* ------------------------------------------------------------- Capa velo -- */

/*
 * El velo no es decorativo: es lo que garantiza que el titular se lea. Sin el,
 * el contraste del texto depende de que zona de la fotografia le toque, y eso
 * cambia con cada recorte y cada breakpoint.
 */
.hero-avanza__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to top,
			rgb(8 25 47 / 0.92) 0%,
			rgb(8 25 47 / 0.72) 32%,
			rgb(8 25 47 / 0.28) 62%,
			rgb(8 25 47 / 0.12) 100%
		);
	opacity: 0.94;
}

/* -------------------------------------------------------------- Contenido - */

.hero-avanza__contenido {
	position: relative;
	z-index: 1;
	inline-size: min(100% - 3rem, 80rem);
	margin-inline: auto;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
}

.hero-avanza__antetitulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tipo--track--etiqueta);
	text-transform: uppercase;
	color: var(--wp--custom--color--ambar--300);
	max-inline-size: none;
}

.hero-avanza__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xxxxxl);
	line-height: var(--wp--custom--tipo--alto--display);
	letter-spacing: var(--wp--custom--tipo--track--display);
	color: var(--wp--preset--color--crema);
	max-inline-size: 16ch;
	text-wrap: balance;
}

/* SplitText envuelve cada linea; el overflow oculto deja que las palabras
   entren desde debajo de su propia linea en vez de flotar sobre la foto. */
.hero-avanza__linea {
	overflow: hidden;
}

.hero-avanza__texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--wp--custom--tipo--alto--normal);
	color: rgb(251 246 236 / 0.86);
	max-inline-size: 46ch;
}

/* -------------------------------------------------------------- Acciones -- */

.hero-avanza__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--20);
}

.hero-avanza__cta,
.hero-avanza__cta2 {
	display: inline-flex;
	align-items: center;
	min-block-size: 3.25rem;
	padding: var(--wp--custom--comp--boton--pad-y) var(--wp--custom--comp--boton--pad-x);
	border-radius: var(--wp--custom--radio--pill);
	font-weight: 600;
	text-decoration: none;
	transition:
		transform var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva),
		background-color var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva);
}

/*
 * Texto OSCURO sobre el ambar, nunca blanco: blanco sobre #D97706 da 3.19:1 y
 * falla AA. Con la tinta da 5.49:1. Verificado en tools/verificar-contraste.py.
 */
.hero-avanza__cta {
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
}

.hero-avanza__cta:hover,
.hero-avanza__cta:focus-visible {
	background: var(--wp--custom--color--ambar--300);
	transform: translateY(-2px);
}

.hero-avanza__cta2 {
	color: var(--wp--preset--color--crema);
	border: 1px solid rgb(251 246 236 / 0.45);
}

.hero-avanza__cta2:hover,
.hero-avanza__cta2:focus-visible {
	border-color: var(--wp--preset--color--crema);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------ Indicador --- */

.hero-avanza__indicador {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--30);
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: 1;
	inline-size: 1px;
	block-size: 3rem;
	overflow: hidden;
	opacity: 0.5;
}

.hero-avanza__indicador-linea {
	display: block;
	inline-size: 1px;
	block-size: 100%;
	background: var(--wp--preset--color--crema);
	animation: avanza-bajar 2.4s var(--wp--custom--mov--curva) infinite;
}

@keyframes avanza-bajar {
	0% { transform: translateY(-100%); }
	60%, 100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-avanza__indicador-linea {
		animation: none;
	}
}

/* ------------------------------------------------------------ Escritorio -- */

@media (min-width: 782px) {
	.hero-avanza {
		padding-block-end: var(--wp--preset--spacing--80);
	}

	.hero-avanza__contenido {
		inline-size: min(100% - 5rem, 80rem);
		gap: var(--wp--preset--spacing--40);
	}

	.hero-avanza__titulo {
		max-inline-size: 14ch;
	}
}

@media (min-width: 1280px) {
	.hero-avanza__velo {
		/* En pantallas anchas el texto ocupa solo la mitad izquierda, asi que
		   el velo puede aclararse a la derecha y dejar ver mas fotografia. */
		background:
			linear-gradient(
				to right,
				rgb(8 25 47 / 0.88) 0%,
				rgb(8 25 47 / 0.66) 42%,
				rgb(8 25 47 / 0.22) 78%,
				rgb(8 25 47 / 0.10) 100%
			);
	}
}

/* ==========================================================================
   Fondo de escena: video con respaldo de imagen

   Lo usan el hero y la banda cinematografica a traves de
   `avanza_fondo_escena()`. La estructura es siempre la misma:

     .avanza-fondo            > <picture> (poster responsive)  +  <video>

   El <picture> NO es un placeholder que se tira: es lo que ven los moviles,
   quien tiene reduced-motion activo y quien bloquea la reproduccion
   automatica. El video se superpone y se funde encima solo cuando de verdad
   esta reproduciendo, y eso lo decide movimiento.js — nunca el CSS, porque el
   CSS no puede saber si el navegador dejo arrancar el video.
   ========================================================================== */

.avanza-fondo {
	position: relative;
	inline-size: 100%;
	block-size: 100%;
}

.avanza-fondo__video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 60%;
	/* Arranca invisible: si el autoplay falla, lo que queda a la vista es el
	   poster, no un rectangulo negro. */
	opacity: 0;
	transition: opacity 900ms ease;
	/* El video es decoracion: no debe recibir ni clic ni foco. */
	pointer-events: none;
}

/* La clase la pone movimiento.js cuando `play()` se ha resuelto de verdad. */
.avanza-fondo.esta-reproduciendo .avanza-fondo__video {
	opacity: 1;
}

/*
 * Sin movimiento no hay video, y punto. Ocultarlo por CSS ademas de no
 * reproducirlo por JS es cinturon y tirantes: si alguna vez el video llegara a
 * reproducirse por otra via, aqui sigue sin verse.
 */
@media (prefers-reduced-motion: reduce) {
	.avanza-fondo__video {
		display: none;
	}
}