/* ==========================================================================
   Layout: cabecera, secciones, franjas cinematograficas y pie.

   El movimiento lo dirige assets/js/movimiento.js. Aqui solo se prepara el
   escenario y, sobre todo, se define el ESTADO FINAL: si GSAP no llega a
   ejecutarse, todo debe verse completo y legible. Nunca se oculta contenido
   indexable a la espera de una animacion.
   ========================================================================== */

/* ------------------------------------------------------------- Cabecera --- */

.avanza-cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	min-block-size: var(--wp--custom--cabecera--alto);
	background: transparent;
	transition:
		background-color var(--wp--custom--mov--normal) var(--wp--custom--mov--curva),
		box-shadow var(--wp--custom--mov--normal) var(--wp--custom--mov--curva),
		border-color var(--wp--custom--mov--normal) var(--wp--custom--mov--curva);
	border-block-end: 1px solid transparent;
}

/*
 * Sobre una franja oscura la cabecera flota en claro; al bajar gana fondo. Las
 * clases las pone cabecera.js con un IntersectionObserver, no escuchando
 * `scroll`.
 */
.avanza-cabecera.sobre-oscuro :is(a, .wp-block-site-title, .wp-block-navigation) {
	color: var(--wp--preset--color--crema);
}

.avanza-cabecera.esta-desplazada {
	background: rgb(251 246 236 / 0.92);
	backdrop-filter: blur(10px);
	border-block-end-color: var(--wp--preset--color--arena);
	box-shadow: var(--wp--preset--shadow--e1);
}

/*
 * Las dos condiciones se solapan de verdad: en cuanto se pasan 80 px la
 * cabecera esta "desplazada", y sigue sobre el hero un buen rato mas. Con el
 * fondo claro de arriba y el texto claro de la regla anterior, el resultado
 * seria claro sobre claro — la cabecera desapareceria.
 *
 * Con una sola franja oscura al principio casi no se notaba. Ahora que hay
 * tres, se nota en toda la pagina.
 */
.avanza-cabecera.esta-desplazada.sobre-oscuro {
	background: rgb(8 25 47 / 0.72);
	border-block-end-color: rgb(251 246 236 / 0.14);
	box-shadow: none;
}

.avanza-cabecera__logo img,
.avanza-cabecera__logo svg {
	block-size: 2.5rem;
	inline-size: auto;
}

@media (max-width: 781px) {
	/*
	 * Doble clase a proposito. WordPress genera para cada contenedor de botones
	 * una regla .wp-container-core-buttons-is-layout-xxxx con display:flex; tiene
	 * la misma especificidad que una clase suelta y va despues en el orden, asi
	 * que gana. Con .avanza-cabecera delante, no.
	 */
	.avanza-cabecera .avanza-cabecera__cta {
		display: none;
	}

	.avanza-cabecera .avanza-cabecera__logo {
		flex-wrap: nowrap;
		gap: 0.625rem;
	}

	.avanza-cabecera .wp-block-site-title {
		font-size: var(--wp--preset--font-size--base);
		line-height: 1.15;
	}

	.avanza-cabecera .avanza-cabecera__logo img,
	.avanza-cabecera .avanza-cabecera__logo svg {
		block-size: 2.125rem;
	}
}

/* --------------------------------------------------------------- Secciones */

.avanza-seccion {
	padding-block: var(--wp--preset--spacing--80);
}

.avanza-seccion--holgada {
	padding-block: var(--wp--preset--spacing--90);
}

/*
 * Dos secciones seguidas del mismo color suman sus dos paddings, y el hueco
 * resultante —medio millar de pixeles sin nada— no se lee como aire sino como
 * un fallo de maquetacion. Donde no hay cambio de color no hay frontera que
 * marcar, asi que el espacio lo pone solo la de arriba.
 *
 * La de ambar SI conserva el suyo: ahi el color cambia, y una franja de color
 * necesita su propio margen interior o el contenido parece pegado al borde.
 */
.avanza-seccion + .avanza-seccion:not(.avanza-seccion--ambar) {
	padding-block-start: 0;
}

.avanza-franja {
	position: relative;
	isolation: isolate;
}

/*
 * Etiqueta de seccion: la linea corta que precede al titular.
 *
 * `display: flex` y NO `inline-flex`, y sin `max-inline-size: none`. Los dos
 * detalles son lo que la mantiene alineada con su titular.
 *
 * El layout "constrained" de WordPress alinea a sus hijos dandoles el ancho de
 * la columna y margenes automaticos. Eso solo funciona en cajas de bloque: una
 * `inline-flex` ignora los margenes automaticos, y con el ancho maximo anulado
 * se estiraba hasta el borde del contenedor. El resultado medido eran 56 px de
 * desfase entre la etiqueta y su titular en todas las secciones montadas con
 * bloques — no en las de HTML propio, que tienen su envoltorio y por eso se
 * veian bien.
 */
.avanza-etiqueta {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 var(--wp--preset--spacing--20);
	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--preset--color--celeste-hondo);
}

.avanza-etiqueta::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.75rem;
	block-size: 1px;
	background: currentColor;
}

/* ------------------------------------------------------------ Frase ancla --
   Dos frases sobre negro, y nada mas.

   Tenia video de fondo y no ayudaba: competia con lo unico que hay aqui, que
   son dos frases. Sin el, este momento es una pausa oscura entre el hero y el
   selector, y la tipografia se lleva toda la atencion.

   El movimiento HACE lo que el texto dice. No tacha nada —tachar obliga a
   atenuar la frase, y atenuarla la deja por debajo del contraste minimo— sino
   que las dos se INTERCAMBIAN LA JERARQUIA: la que se descarta empieza grande y
   se encoge; la que se propone empieza pequena y acaba dominando la pantalla,
   subrayada en ambar. Las dos quedan legibles todo el rato.
   -------------------------------------------------------------------------- */

/*
 * Ni sticky ni alta.
 *
 * Estuvo en 220vh y luego en 150vh, fijada, y en las dos se sentia un peaje:
 * mucho rato con una frase quieta y nada mas que mirar. Y al acortarla, el
 * intercambio se quedaba sin recorrido — con 125vh se completaba en 225 px de
 * scroll, un pestaneo.
 *
 * La salida no era buscar el punto medio sino soltar el scroll: la animacion se
 * dispara al entrar y corre A SU RITMO. Asi la seccion puede medir lo que tiene
 * que medir —menos de una pantalla— y el efecto dura lo que se diseno que dure,
 * en vez de depender de lo rapido que alguien gire la rueda.
 */
.avanza-ancla {
	display: grid;
	place-content: center;
	min-block-size: 78vh;
	padding-block: var(--wp--preset--spacing--80);
	/*
	 * El margen lateral vive en la SECCION, no en cada hijo.
	 *
	 * La seccion no tenia ninguno y cada elemento se defendia solo: la frase
	 * con `min(100% - 3rem, ...)` y el parrafo de apoyo con una medida en `ch`.
	 * Esa medida son casi 590 px, mas que un movil entero, asi que el apoyo se
	 * pegaba a los dos bordes mientras la frase de al lado respiraba. Con el
	 * hueco aqui, ningun hijo tiene que saber nada del ancho de pantalla.
	 */
	padding-inline: 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--marino);
	/* Clara, no oscura.
	   Sobre negro este momento pesaba demasiado: entre el hero y el selector,
	   que ya son oscuros, encadenaba tres pantallas sin respiro. En crema
	   hondo se lee como lo que es —una pausa— y ademas deja que el amarillo
	   del subrayado sea lo mas brillante de la pantalla. */
	background: var(--wp--preset--color--crema-hondo);
}

.avanza-ancla__interior {
	display: grid;
	justify-items: center;
}

.avanza-ancla__frase {
	display: grid;
	/* Hueco generoso entre las dos: al escalarse no reflujan, asi que si no se
	   les deja aire la que crece se monta sobre la otra. */
	gap: 0.6em;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	line-height: var(--wp--custom--tipo--alto--display);
	letter-spacing: var(--wp--custom--tipo--track--display);
	max-inline-size: min(100% - 3rem, 54rem);
}

/*
 * La que se descarta. Su tamano base es el PEQUENO: movimiento.js la arranca
 * ampliada y la deja aqui. Asi, sin JavaScript, la jerarquia final ya es la
 * correcta — que es el estado que importa que nunca falle.
 */
.avanza-ancla__negacion {
	display: block;
	font-size: clamp(1rem, 2.4vw, 1.75rem);
	font-weight: 600;
	color: var(--wp--preset--color--marino-suave);
	text-wrap: balance;
}

/* La que se propone. Su tamano base es el GRANDE, por lo mismo. */
.avanza-ancla__afirmacion {
	position: relative;
	display: block;
	justify-self: center;
	font-size: var(--wp--preset--font-size--xxxxxl);
	/* Marino, no amarillo: el amarillo es color de RELLENO y sobre crema se
	   queda en 1.51:1. Quien pone el color aqui es el subrayado. */
	color: var(--wp--preset--color--marino);
}

/*
 * El subrayado ambar: el gesto contrario al tachado que habia antes. Donde
 * aquel cancelaba una frase, este afirma la otra. Se dibuja de izquierda a
 * derecha con el scroll.
 *
 * GSAP no alcanza los pseudoelementos, asi que anima la variable en el span y
 * el pseudoelemento la lee.
 */
.avanza-ancla__afirmacion::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	block-size: 0.14em;
	border-radius: 1em;
	background: var(--wp--preset--color--amarillo);
	transform: scaleX(var(--subrayado, 1));
	transform-origin: left center;
}

/* Sin JavaScript el subrayado esta puesto del todo: el estado final, otra vez,
   es el que se sirve por defecto. */
.avanza-ancla.tiene-movimiento .avanza-ancla__afirmacion::after {
	transform: scaleX(var(--subrayado, 0));
}

.avanza-ancla__apoyo {
	margin: var(--wp--preset--spacing--40) auto 0;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--marino-suave);
	/* `min()` y no `52ch` a secas: en un movil esa medida es mas ancha que la
	   pantalla, y el tope en `ch` dejaba de limitar nada. */
	max-inline-size: min(100%, 52ch);
}

/* ---------------------------------------------------------------- Rejillas */

.avanza-rejilla {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* -------------------------------------------------- Franja cinematografica -
   Fotografia a sangre con texto claro encima. El unico sitio del sitio donde
   el fondo es oscuro.
   -------------------------------------------------------------------------- */

.avanza-banda-cine {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	place-items: center;
	min-block-size: min(88dvh, 44rem);
	padding-block: var(--wp--preset--spacing--90);
	color: var(--wp--preset--color--crema);
	background: var(--wp--preset--color--marino-hondo);
}

.avanza-banda-cine__foto {
	position: absolute;
	/* Sobresale arriba y abajo por la misma razon que el fondo del hero: la
	   capa deriva hasta un 6 % con el scroll y sin este margen asomaria el
	   carbon del fondo por el borde. */
	inset: -10% 0;
	z-index: -2;
}

.avanza-banda-cine__foto picture,
.avanza-banda-cine__foto img {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.avanza-banda-cine__foto img {
	object-fit: cover;
	border-radius: 0;
}

.avanza-banda-cine::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse at center, rgb(8 25 47 / 0.35) 0%, rgb(8 25 47 / 0.82) 72%);
}

.avanza-banda-cine__contenido {
	position: relative;
	inline-size: min(100% - 3rem, 46rem);
	text-align: center;
}

.avanza-banda-cine__frase {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xxxxl);
	line-height: var(--wp--custom--tipo--alto--display);
	letter-spacing: var(--wp--custom--tipo--track--display);
	color: var(--wp--preset--color--crema);
	text-wrap: balance;
}

.avanza-banda-cine__apoyo {
	margin: var(--wp--preset--spacing--30) auto 0;
	font-size: var(--wp--preset--font-size--lg);
	color: rgb(251 246 236 / 0.84);
	max-inline-size: 48ch;
}

/* --------------------------------------------------------- Como funciona --
   En escritorio la seccion se fija y los pasos avanzan con el scroll (lo hace
   movimiento.js). El estado que define este CSS es el FINAL: todo visible.
   GSAP los atenua al arrancar, no al reves.
   -------------------------------------------------------------------------- */

.avanza-como {
	position: relative;
	display: grid;
	align-content: center;
	padding-block: var(--wp--preset--spacing--80);
}

.avanza-como__interior {
	inline-size: min(100% - 3rem, 80rem);
	margin-inline: auto;
}

.avanza-como__pista {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}

.avanza-como__paso {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
}

.avanza-como__numero {
	inline-size: 3rem;
	block-size: 3rem;
	display: grid;
	place-items: center;
	margin: 0;
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
	border-radius: var(--wp--custom--radio--pill);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--lg);
	max-inline-size: none;
}

.avanza-como__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
}

.avanza-como__texto {
	margin: 0;
	color: var(--wp--preset--color--marino-suave);
}

@media (min-width: 782px) {
	.avanza-como {
		min-block-size: 100dvh;
	}

	.avanza-como__pista {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--wp--preset--spacing--40);
		padding-block-start: var(--wp--preset--spacing--50);
	}

	/* Riel y relleno del progreso. */
	.avanza-como__riel {
		position: absolute;
		inset-block-start: 1.5rem;
		inset-inline: 1.5rem;
		block-size: 2px;
		background: var(--wp--preset--color--arena);
		border-radius: 2px;
	}

	.avanza-como__relleno {
		position: absolute;
		inset: 0;
		background: var(--wp--preset--color--amarillo);
		border-radius: inherit;
		transform-origin: left center;
	}
}

/* --------------------------------------------------------------- Precios --
   Escalera ascendente: de gratis a premium. El escalon del medio es el
   objetivo comercial y es el unico que se realza.
   -------------------------------------------------------------------------- */

.avanza-precios {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--60);
	align-items: stretch;
}

@media (min-width: 900px) {
	.avanza-precios {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--wp--preset--spacing--20);
	}
}

.avanza-precio {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--arena);
	border-radius: var(--wp--custom--radio--xl);
	box-shadow: var(--wp--preset--shadow--e1);
}

/* El nivel destacado: mas alto, mas contraste y una etiqueta. No se agranda
   con transform, que lo sacaria de la rejilla en movil. */
.avanza-precio--destacado {
	background: var(--wp--preset--color--marino-hondo);
	border-color: var(--wp--preset--color--marino-hondo);
	color: var(--wp--preset--color--crema);
	box-shadow: var(--wp--preset--shadow--e4);
}

.avanza-precio--destacado .avanza-precio__oferta,
.avanza-precio--destacado .avanza-precio__cifra {
	color: var(--wp--preset--color--crema);
}

.avanza-precio--destacado .avanza-precio__detalle {
	color: rgb(251 246 236 / 0.78);
}

.avanza-precio__insignia {
	align-self: start;
	padding: 0.25rem 0.625rem;
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
	border-radius: var(--wp--custom--radio--pill);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tipo--track--etiqueta);
	text-transform: uppercase;
	max-inline-size: none;
}

.avanza-precio__nivel {
	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--preset--color--celeste-hondo);
	max-inline-size: none;
}

.avanza-precio__oferta {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: var(--wp--custom--tipo--alto--titulo);
	color: var(--wp--preset--color--marino);
}

.avanza-precio__cifra {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tipo--track--titulo);
	color: var(--wp--preset--color--marino);
	max-inline-size: none;
}

.avanza-precio__detalle {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--marino-suave);
}

.avanza-precio__accion {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

.avanza-precio__accion a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: inherit;
}

.avanza-precios__nota {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--marino-suave);
	text-align: center;
}

/* ------------------------------------------------------------------- Pie -- */

.avanza-pie {
	background: var(--wp--preset--color--marino-hondo);
	color: rgb(251 246 236 / 0.72);
	padding-block: var(--wp--preset--spacing--80);
}

.avanza-pie a {
	color: rgb(251 246 236 / 0.86);
}

.avanza-pie a:hover {
	color: var(--wp--preset--color--amarillo);
}

.avanza-pie :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--crema);
}

/* Llamada final: misma franja cinematografica, con boton. */
.avanza-banda-cine--cta {
	min-block-size: min(72dvh, 36rem);
}

.avanza-banda-cine__acciones {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-inline-size: none;
}

.avanza-banda-cine__cta {
	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);
	background: var(--wp--preset--color--amarillo);
	/* Texto OSCURO sobre el ambar: blanco daria 3.19:1 y fallaria AA. */
	color: var(--wp--preset--color--marino);
	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);
}

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

/* Encabezado de "Como funciona". */
.avanza-como__encabezado {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxxxl);
	line-height: var(--wp--custom--tipo--alto--display);
	letter-spacing: var(--wp--custom--tipo--track--display);
	max-inline-size: 18ch;
	text-wrap: balance;
}

/* Boton sobrio: contorno en vez de relleno. Para acciones secundarias, donde
   un segundo boton ambar competiria con el principal. */
.wp-block-button.is-style-sobrio .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--marino);
	border: 1px solid var(--wp--preset--color--marino);
}

.wp-block-button.is-style-sobrio .wp-block-button__link:hover,
.wp-block-button.is-style-sobrio .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--crema);
}

/* -------------------------------------------- El hero pasa bajo la cabecera
   Cuando una pagina abre con una escena a sangre, la cabecera flota SOBRE ella
   en vez de ocupar una banda propia encima. Sin esto se pierden los primeros
   72 px de la escena y deja de leerse como una entrada a pantalla.

   La cabecera es sticky, o sea que ocupa sitio en el flujo: se recupera con un
   margen negativo del mismo alto, y la escena compensa con padding para que su
   contenido no quede debajo del menu.

   La condicion es ESTRUCTURAL y no `.home`: vale para la portada y para
   cualquier otra plantilla que empiece con una escena — el archivo de retos y
   cada ficha, hoy. Atarlo a la portada obligaba a duplicar la regla cada vez
   que una seccion nueva quisiera el mismo gesto, y era justo lo que hacia que
   en retos la cabecera saliera sobre una franja crema.
   -------------------------------------------------------------------------- */

/*
 * Son dos selectores porque son dos estructuras distintas, y conviene dejarlo
 * escrito: en la portada el hero va DENTRO de `.entry-content` —es contenido de
 * la pagina— mientras que la cabecera de seccion es hija directa de `main`,
 * porque la pone la plantilla. Con un solo selector una de las dos se queda
 * fuera, y el sintoma es una franja crema entre el menu y la escena.
 */
/*
 * El tiron es un poco MAYOR que el alto declarado, y a proposito.
 *
 * `--cabecera--alto` es un minimo, no una medida: con el boton de accion dentro
 * la cabecera acaba en 79 px, no en los 72 que dice el token. Tirando
 * exactamente del token quedaban siete pixeles sin cubrir, y eso se veia como
 * una linea clara cruzando lo alto de cada pagina que abre con video.
 *
 * Pasarse es inofensivo —lo que queda por encima del borde es fondo de la
 * escena, que esta sobredimensionado— mientras que quedarse corto se ve
 * siempre. El medio rem extra cubre la diferencia con margen.
 */
.wp-site-blocks > main:has(> .avanza-cabecera-escena:first-child),
.wp-site-blocks > main:has(> .entry-content:first-child > .hero-avanza:first-child) {
	margin-block-start: calc(-1 * (var(--wp--custom--cabecera--alto) + 0.75rem));
}

.home .hero-avanza {
	padding-block-start: calc(var(--wp--custom--cabecera--alto) + var(--wp--preset--spacing--60));
}

/* Enlaces de taxonomia dentro de tarjetas y fichas: son etiquetas, no prosa.
   El subrayado global de enlace los convierte en ruido visual. */
.avanza-tarjeta-reto .wp-block-post-terms a,
.avanza-ficha a,
.avanza-precio__accion a {
	text-decoration: none;
}

.avanza-tarjeta-reto .wp-block-post-terms a:hover,
.avanza-ficha a:hover,
.avanza-precio__accion a:hover {
	text-decoration: underline;
}

/* --------------------------------------------- Seccion ambar (los precios) --
   El unico momento en que el color inunda la pantalla entera, y toca al unico
   contenido que le pide una decision al usuario. Se usa UNA sola vez: un
   acento que se repite deja de ser acento.

   Sobre ambar el texto va OSCURO, no claro. Es la trampa clasica de las
   paletas ambar y ya se verifico por script: #D97706 sobre papel da 2.94:1 y
   falla; con tinta encima da 5.49:1 y pasa. El ambar es color de RELLENO, no
   de texto.
   -------------------------------------------------------------------------- */

.avanza-seccion--ambar {
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
}

.avanza-seccion--ambar .avanza-etiqueta {
	color: var(--wp--preset--color--marino);
	opacity: 0.72;
}

.avanza-seccion--ambar .avanza-etiqueta::before {
	background: var(--wp--preset--color--marino);
	opacity: 0.4;
}

/* Las tarjetas blancas ya destacan solas sobre el ambar: la sombra de color
   sobraria y las emborronaria. */
.avanza-seccion--ambar .avanza-precio {
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--e2);
}

.avanza-seccion--ambar .avanza-precios__nota {
	color: var(--wp--preset--color--marino);
	opacity: 0.74;
}

/* ===================================================== Seccion con escena ===
   Fondo de video a sangre, velo y texto claro. Es el tratamiento que comparten
   casi todas las secciones de la portada.

   El velo NO es decoracion: es lo unico que garantiza que el texto se lea sobre
   una imagen en movimiento que cambia cada fotograma. Por eso se define aqui
   una vez y no seccion por seccion, y por eso es cerrado: estas tomas tienen
   zonas muy claras —hologramas, pan dorado, espejos iluminados— y un velo suave
   dejaria el texto flotando sobre parches brillantes justo en los fotogramas
   mas bonitos.

   Sin JavaScript queda el poster, que es un fotograma real del propio clip: la
   seccion se ve igual, simplemente quieta.
   ========================================================================== */

.avanza-seccion--escena {
	position: relative;
	isolation: isolate;
	overflow: clip;
	color: var(--wp--preset--color--crema);
	background: var(--wp--preset--color--marino-hondo);
}

/*
 * El `max-inline-size: none` no es cosmetico: sin el, el fondo no llega a los
 * bordes.
 *
 * El layout "constrained" de WordPress le pone un ancho maximo a TODO hijo
 * directo del grupo, y estas dos capas lo son. El resultado medido era un video
 * de 1280 px centrado en una ventana de 1440: dos franjas de color plano a los
 * lados que parecian un error de maquetacion. Como estan posicionadas en
 * absoluto, el fallo no rompe nada — solo recorta en silencio.
 */
.avanza-seccion__fondo,
.avanza-seccion__velo {
	max-inline-size: none;
}

.avanza-seccion__fondo {
	position: absolute;
	/* Sobresale por arriba y por abajo: la capa deriva con el scroll y sin este
	   margen asomaria el carbon por el borde. */
	inset: -8% 0;
	z-index: -2;
}

.avanza-seccion__fondo .avanza-fondo,
.avanza-seccion__fondo picture,
.avanza-seccion__fondo img {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.avanza-seccion__fondo img {
	object-fit: cover;
	border-radius: 0;
}

/*
 * El velo: ligero, no opaco.
 *
 * La primera version lo puso a 0.86 para garantizar contraste de un golpe, y el
 * efecto fue el contrario del buscado: con el 14 % del video visible, el video
 * no se veia. Se pagaba el peso de un clip a 1080p para mostrar un rectangulo
 * gris.
 *
 * Ahora el contraste se resuelve DONDE ESTA EL TEXTO y no apagando la escena
 * entera: velo suave, un refuerzo arriba —que es donde caen etiqueta y
 * titular— y una sombra propia en el texto. Asi el video se ve de verdad en la
 * mitad inferior, que es justo donde no hay nada escrito encima.
 */
.avanza-seccion__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to bottom,
			rgb(8 25 47 / 0.78) 0%,
			rgb(8 25 47 / 0.52) 28%,
			rgb(8 25 47 / 0.40) 55%,
			rgb(8 25 47 / 0.62) 100%
		);
}

/*
 * La sombra no es decorativa: es la que sostiene el contraste ahora que el velo
 * dejo de taparlo todo. Es corta y muy opaca a proposito — una sombra difusa
 * ensucia el texto sin oscurecer lo suficiente el pixel de al lado, que es lo
 * que de verdad decide si una letra se lee.
 */
.avanza-seccion--escena :is(h1, h2, h3, p, li) {
	text-shadow:
		0 1px 2px rgb(4 12 24 / 0.85),
		0 2px 14px rgb(4 12 24 / 0.65);
}

/* Dentro de una tarjeta opaca la sombra sobra: ahi el fondo ya es solido y lo
   unico que hace es emborronar el texto. */
.avanza-seccion--escena :is(.avanza-tarjeta-reto, .avanza-precio, .avanza-chip, .avanza-necesidad) :is(h1, h2, h3, p, li, span) {
	text-shadow: none;
}

/* --- Texto sobre la escena ------------------------------------------------
   Los colores de WordPress se aplican con clases en el propio elemento
   (`has-tinta-suave-color`), asi que hay que ganarles desde el contenedor: la
   tinta suave es un gris oscuro y sobre video desapareceria.                 */

.avanza-seccion--escena :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--crema);
}

.avanza-seccion--escena p,
.avanza-seccion--escena .has-tinta-suave-color {
	color: rgb(251 246 236 / 0.86);
}

/*
 * La etiqueta va en ambar CLARO, no en el ambar de accion.
 *
 * Medido sobre el velo real, `accion` (#D97706) se queda en 4.41:1 — por debajo
 * del 4.5 que pide un texto de este tamano. Es el mismo error de siempre con
 * las paletas ambar: el ambar es color de relleno, y como texto solo funciona
 * sobre claro. Sobre oscuro hay que subir a la version pastel.
 */
.avanza-seccion--escena .avanza-etiqueta {
	color: var(--wp--preset--color--amarillo-suave);
}

/* --- La escena ambar de los precios ---------------------------------------
   El unico momento en que el color inunda la pantalla sigue siendo este, pero
   ahora con video debajo: el ambar pasa de fondo solido a velo. El texto se
   invierte a claro, porque sobre un velo ambar oscurecido el texto oscuro que
   usaba antes ya no tendria contraste suficiente.                            */

.avanza-seccion--ambar.avanza-seccion--escena {
	background: var(--wp--preset--color--rosa);
}

.avanza-seccion--ambar.avanza-seccion--escena .avanza-seccion__velo {
	background:
		linear-gradient(
			to bottom,
			rgb(16 42 76 / 0.86) 0%,
			rgb(23 105 159 / 0.58) 30%,
			rgb(23 105 159 / 0.46) 58%,
			rgb(16 42 76 / 0.72) 100%
		);
}

.avanza-seccion--ambar.avanza-seccion--escena .avanza-etiqueta {
	color: var(--wp--preset--color--amarillo-suave);
	opacity: 1;
}

.avanza-seccion--ambar.avanza-seccion--escena .avanza-etiqueta::before {
	background: currentColor;
	opacity: 0.6;
}

/*
 * El acento de la frase ancla.
 *
 * Sobre papel va en brasa, que es un rojo profundo y funciona. Sobre la escena
 * en video ese mismo rojo es oscuro sobre oscuro: se lee a duras penas justo en
 * la palabra que da nombre a todo el planteamiento. Sobre oscuro sube a ambar.
 */
.avanza-seccion--escena .avanza-ancla__frase em {
	color: var(--wp--preset--color--amarillo);
}

/* ======================================================= Lo que vas a lograr ==
   Tres promesas, cada una con su imagen.

   Antes eran tres columnas de texto sobre un video: la escena se movia detras y
   el texto encima parecia un pie de foto, no un logro. Sin video y con una
   imagen propia cada una, la promesa se VE antes de leerse — que es lo que se
   le pide a esta franja, porque es la que responde "y esto a mi que me da".

   El impacto lo pone la entrada, no el fondo.
   ============================================================================ */

.avanza-logros {
	padding-block: var(--wp--preset--spacing--80);
}

.avanza-logros__interior {
	inline-size: min(100% - 3rem, 80rem);
	margin-inline: auto;
}

.avanza-logros__encabezado {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--xxxl);
	max-inline-size: 20ch;
	text-wrap: balance;
}

.avanza-logros__lista {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.avanza-logro {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
}

.avanza-logro__imagen {
	margin-block-end: var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radio--l);
	overflow: clip;
	/* Cubre el hueco mientras la imagen carga: sin esto la fila parpadea en
	   blanco justo al entrar, que es cuando mas se mira. */
	background: var(--wp--preset--color--crema-hondo);
	box-shadow: var(--wp--preset--shadow--e2);
}

.avanza-logro__imagen picture,
.avanza-logro__imagen img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 0;
}

.avanza-logro__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
}

.avanza-logro__texto {
	margin: 0;
	color: var(--wp--preset--color--marino-suave);
	max-inline-size: 38ch;
}

/* ------------------------------------------------ Costura entre secciones --
   WordPress separa los bloques con `--wp--style--block-gap`, y eso incluye las
   secciones a sangre. Entre dos franjas de color seguidas, ese hueco deja ver
   el crema del body: una raya clara de 24 px cruzando la pagina de lado a
   lado, que se lee como un fallo de maquetacion.

   Hay que anularlo en DOS niveles, porque el separador aparecia en los dos y
   arreglar uno no arregla el otro:

   1. Entre secciones del contenido (`.entry-content`), que es donde caen las
      franjas de la portada.
   2. Entre los bloques raiz de la pagina (`.wp-site-blocks`), que es donde
      viven las partes de plantilla — la llamada final y el pie. Esa costura
      salia JUSTO antes del cierre, entre el ambar de precios y la franja
      oscura, y la regla del punto 1 no la alcanzaba: el CTA no esta dentro del
      contenido, es hermano suyo.

   Todas estas secciones traen su propio espacio interior; el de fuera sobra.
   -------------------------------------------------------------------------- */

.entry-content > .alignfull + .alignfull,
.wp-site-blocks > * + .wp-block-template-part {
	margin-block-start: 0;
}

/* ====================================================== Cabecera de seccion ==
   La entrada a cada seccion del sitio: el archivo de retos, cada ficha, y las
   paginas que la usen.

   Es el hero de la portada en version corta, y eso es deliberado: al entrar en
   una seccion hay que reconocer el mismo sitio. Mismo fondo de video, mismo
   velo, mismo gesto — pero a media pantalla, porque aqui el contenido empieza
   enseguida y una portada entera seria un peaje.

   Reutiliza `.avanza-seccion__fondo` y `.avanza-seccion__velo`, que ya montan
   el video con su poster: una sola implementacion para toda la pagina.
   ============================================================================ */

.avanza-cabecera-escena {
	position: relative;
	isolation: isolate;
	overflow: clip;
	/* Sin `display: grid`: el contenido lo coloca el layout "constrained" de
	   WordPress, igual que en las secciones de la portada. Poner una rejilla
	   aqui pelearia con el, y ya se vio lo que pasa cuando esos dos discrepan:
	   los hijos dejan de alinearse con su columna. */
	min-block-size: min(52vh, 30rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* El hueco de arriba deja sitio a la cabecera fija, que aqui flota encima. */
	padding-block: calc(var(--wp--custom--cabecera--alto) + var(--wp--preset--spacing--50))
	               var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--crema);
	background: var(--wp--preset--color--marino-hondo);
}


/* --- Texto sobre la escena ------------------------------------------------
   Los colores de WordPress se aplican con clases en el propio elemento, asi
   que hay que ganarles desde el contenedor. */

.avanza-cabecera-escena :is(h1, h2, h3) {
	color: var(--wp--preset--color--crema);
}

.avanza-cabecera-escena p,
.avanza-cabecera-escena .has-marino-suave-color {
	color: rgb(251 246 236 / 0.86);
}

.avanza-cabecera-escena :is(h1, h2, h3, p, li, a) {
	text-shadow:
		0 1px 2px rgb(4 12 24 / 0.85),
		0 2px 14px rgb(4 12 24 / 0.65);
}

/* La categoria del reto y las migas, en el ambar claro de las etiquetas. */
.avanza-cabecera-escena .avanza-reto__categoria,
.avanza-cabecera-escena .avanza-reto__categoria a {
	color: var(--wp--preset--color--amarillo-suave);
	text-decoration: none;
}

.avanza-cabecera-escena .avanza-migas {
	margin-block-end: var(--wp--preset--spacing--30);
}

.avanza-cabecera-escena .avanza-migas :is(a, span, li) {
	color: rgb(251 246 236 / 0.78);
}

.avanza-cabecera-escena .avanza-migas a:hover {
	color: var(--wp--preset--color--crema);
}

/*
 * El enlace de la herramienta va dentro de una pildora, y ahi heredaba el rosa
 * de enlace del sitio. Ese rosa esta pensado para texto sobre crema (4.81:1);
 * sobre el cristal oscuro de la pildora se queda muy por debajo del minimo.
 */
.avanza-cabecera-escena .avanza-ficha__dato a {
	color: var(--wp--preset--color--amarillo-suave);
}

/* Los datos de la ficha (duracion, nivel) son pildoras claras: sobre la escena
   necesitan su propio fondo o se pierden contra el video. */
.avanza-cabecera-escena .avanza-ficha__dato {
	/*
	 * Fondo OSCURO y bastante opaco, no un cristal claro.
	 *
	 * Con un velo claro translucido, el contraste de la pildora dependia de lo
	 * que hubiera detras en ese instante: sobre las zonas brillantes del video
	 * —que este clip tiene muchas— el texto crema caia a 4.09:1. Un fondo
	 * oscuro fijo deja el contraste en manos de la pildora y no del fotograma.
	 */
	background: rgb(8 25 47 / 0.72);
	border: 1px solid rgb(251 246 236 / 0.28);
	color: var(--wp--preset--color--crema);
	backdrop-filter: blur(8px);
	text-shadow: none;
}