/* ==========================================================================
   Componentes — tarjeta de reto, chips, pasos, prompt, migas, avisos.
   ========================================================================== */

/* --------------------------------------------------------- Tarjeta de reto -
   La sombra grafica NO es decoracion: una tarjeta blanca sobre fondo papel
   tiene 1.08 de contraste, o sea es practicamente invisible sin ella.
   -------------------------------------------------------------------------- */

.avanza-tarjeta-reto {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--custom--comp--tarjeta--pad);
	background: var(--wp--custom--comp--tarjeta--fondo);
	border: var(--wp--custom--comp--tarjeta--borde);
	border-radius: var(--wp--custom--comp--tarjeta--radio);
	box-shadow: var(--wp--custom--comp--tarjeta--sombra);
	block-size: 100%;
	transition:
		transform var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva),
		box-shadow var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva);
}

.avanza-tarjeta-reto:hover,
.avanza-tarjeta-reto:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--comp--tarjeta--sombra-hover);
}







.avanza-tarjeta-reto__imagen img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	inline-size: 100%;
	border-radius: var(--wp--custom--radio--m);
}

.avanza-tarjeta-reto__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.avanza-tarjeta-reto__titulo a {
	color: inherit;
	text-decoration: none;
}

.avanza-tarjeta-reto__titulo a:hover {
	text-decoration: underline;
}

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

/*
 * El interior reacciona al ancho de la TARJETA, no del viewport: asi la misma
 * tarjeta funciona en una rejilla de 4, en una franja de 3 y en una barra
 * lateral sin saber nada del breakpoint.
 */
@container (min-width: 22rem) {
	.avanza-tarjeta-reto {
		gap: var(--wp--preset--spacing--30);
	}

	.avanza-tarjeta-reto__titulo {
		font-size: var(--wp--preset--font-size--2xl);
	}
}

/* --------------------------------------------------------------- Ficha ---- */

.avanza-ficha {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--comp--chip--gap);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.avanza-ficha__dato {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: var(--wp--preset--color--crema-hondo);
	border-radius: var(--wp--custom--radio--pill);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--marino);
	max-inline-size: none;
}

.avanza-nivel--inicial {
	background: var(--wp--custom--comp--nivel--inicial);
}

.avanza-nivel--intermedio {
	background: var(--wp--custom--comp--nivel--intermedio);
}

.avanza-nivel--avanzado {
	background: var(--wp--custom--comp--nivel--avanzado);
}

/* -------------------------------------------------------------- Selector -- */

.avanza-selector__titulo {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* El <fieldset> es semanticamente correcto (agrupa los filtros y les da una
   leyenda para el lector de pantalla), pero su borde y su padding por defecto
   no pintan nada aqui. */
.avanza-selector__form fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}

.avanza-selector__limpiar {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--marino-suave);
}

/* ----------------------------------------------------------------- Chips -- */

.avanza-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--comp--chip--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.avanza-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: var(--wp--custom--comp--chip--alto);
	padding: 0 1rem;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--marino);
	border: 1px solid var(--wp--custom--color--marino--200);
	border-radius: var(--wp--custom--radio--pill);
	/* Inter, no la serif de display: a 14 px en una pildora, Fraunces se
	   lee decorativa en vez de accionable. */
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 120ms var(--wp--custom--mov--curva);
}

.avanza-chip:active {
	transform: scale(0.97);
}

/* El estado seleccionado se pinta desde aria-pressed: una sola fuente de
   verdad para lo visual y para el lector de pantalla. */
.avanza-chip[aria-pressed="true"] {
	background: var(--wp--custom--comp--chip--sel-fondo);
	color: var(--wp--custom--comp--chip--sel-texto);
	border-color: var(--wp--custom--comp--chip--sel-fondo);
}

.avanza-chip__icono {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	flex: none;
}

/* ----------------------------------------------------------------- Pasos -- */

/* El gancho es la clase que genera register_block_style sobre core/list,
   no una clase propia: asi Samanta lo activa desde la barra lateral del
   editor como cualquier otro estilo de bloque. */
.is-style-pasos {
	counter-reset: avanza-paso;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.is-style-pasos > li {
	counter-increment: avanza-paso;
	position: relative;
	padding-inline-start: 3.25rem;
	max-inline-size: var(--wp--custom--tipo--medida);
}

.is-style-pasos > li::before {
	content: counter(avanza-paso);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: -0.125rem;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--celeste-suave);
	color: var(--wp--preset--color--celeste);
	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--base);
}

/* Progreso inyectado por pasos-progreso.js. Sin JS la lista sigue siendo
   una lista ordenada perfectamente valida. */
.avanza-pasos__progreso {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--marino-suave);
}

.avanza-pasos__barra {
	flex: 1;
	block-size: 4px;
	background: var(--wp--custom--color--marino--200);
	border-radius: var(--wp--custom--radio--pill);
	overflow: hidden;
}

.avanza-pasos__barra span {
	display: block;
	block-size: 100%;
	background: var(--wp--preset--color--celeste);
	border-radius: inherit;
	transition: inline-size var(--wp--custom--mov--normal) var(--wp--custom--mov--curva);
}

/* La casilla la inyecta pasos-progreso.js; sin JS no existe y la lista
   sigue siendo una lista ordenada normal. */
.avanza-paso__marca {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: -0.125rem;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 1;
}

.avanza-paso__marca input {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	accent-color: var(--wp--preset--color--celeste);
	cursor: pointer;
	margin: 0;
	opacity: 0;
	transition: opacity var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva);
}

/* La casilla aparece al pasar por encima o al enfocar, para no competir con
   el numero del paso cuando no hace falta. */
.is-style-pasos > li:hover .avanza-paso__marca input,
.avanza-paso__marca input:focus-visible,
.avanza-paso__marca input:checked {
	opacity: 1;
}

.is-style-pasos > li:hover::before,
.avanza-paso--hecho::before {
	opacity: 0;
}

.is-style-pasos > li::before {
	transition: opacity var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva);
}

.avanza-paso__texto {
	display: block;
}

.avanza-paso--hecho > .avanza-paso__texto {
	color: var(--wp--preset--color--marino-suave);
}

/* ---------------------------------------------------------------- Prompt -- */

.avanza-prompt {
	border: 1px solid var(--wp--custom--color--marino--200);
	border-radius: var(--wp--custom--radio--l);
	background: var(--wp--preset--color--blanco);
	overflow: hidden;
}

.avanza-prompt__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--custom--color--marino--200);
}

.avanza-prompt__etiqueta {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tipo--track--etiqueta);
	text-transform: uppercase;
	color: var(--wp--preset--color--marino-suave);
}

.avanza-prompt__texto {
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--tipo--alto--normal);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	max-inline-size: none;
}

.avanza-prompt__copiar {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	background: var(--wp--preset--color--celeste);
	color: var(--wp--preset--color--blanco);
	border: 0;
	border-radius: var(--wp--custom--radio--pill);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	cursor: pointer;
}

.avanza-prompt__copiar:hover,
.avanza-prompt__copiar:focus-visible {
	background: var(--wp--custom--color--ambar--700);
}

/* En movil el boton va a ancho completo debajo del cuadro. */
@media (max-width: 599px) {
	.avanza-prompt__cabecera {
		flex-direction: column;
		align-items: stretch;
	}

	.avanza-prompt__copiar {
		justify-content: center;
		min-block-size: 3rem;
	}
}

/* ---------------------------------------------------------------- Avisos -- */

.avanza-aviso {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--l);
	border-inline-start: 4px solid transparent;
}

.avanza-aviso--evidencia {
	background: var(--wp--preset--color--celeste-suave);
	border-inline-start-color: var(--wp--preset--color--celeste);
}

.avanza-aviso--completado {
	background: var(--wp--preset--color--amarillo-suave);
	border-inline-start-color: var(--wp--preset--color--amarillo);
}

/* ------------------------------------------------------------ Migas de pan */

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

.avanza-migas a {
	color: inherit;
}

.avanza-migas [aria-current="page"] {
	color: var(--wp--preset--color--marino);
	font-weight: 600;
}

/* --------------------------------------------------- Boton de accion (CTA) -
   Amarillo = la unica accion de la pantalla. Como maximo uno por vista.
   -------------------------------------------------------------------------- */

.wp-block-button.is-style-accion .wp-block-button__link {
	background: var(--wp--custom--comp--boton--accion-fondo);
	color: var(--wp--custom--comp--boton--accion-texto);
	transition:
		transform var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva),
		filter var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva);
}

.wp-block-button.is-style-accion .wp-block-button__link:hover,
.wp-block-button.is-style-accion .wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.04);
	background: var(--wp--custom--comp--boton--accion-fondo);
}

/* ------------------------------------------- Acento de categoria en tarjeta
   Filete superior de 3 px con el color del termino. Sustituye a las sombras
   de color del sistema anterior: la escala de elevacion nueva no admite
   desplazamientos coloreados sin ensuciar la rejilla.
   -------------------------------------------------------------------------- */

.avanza-tarjeta-reto {
	position: relative;
	overflow: hidden;
}

.avanza-tarjeta-reto::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: var(--avanza-acento, var(--wp--preset--color--celeste));
	z-index: 1;
}

.avanza-tarjeta-reto--amarillo { --avanza-acento: var(--wp--preset--color--amarillo); }
.avanza-tarjeta-reto--rosa  { --avanza-acento: var(--wp--preset--color--rosa); }
.avanza-tarjeta-reto--celeste    { --avanza-acento: var(--wp--preset--color--celeste-hondo); }
.avanza-tarjeta-reto--marino  { --avanza-acento: var(--wp--preset--color--marino); }

/* -------------------------------------------------------- Botones sobrios --
   `sobrio` estaba registrado en el editor pero no tenia ni una regla de CSS:
   elegirlo no hacia absolutamente nada. Se le da aqui la forma que su nombre
   promete, y se anade `claro`, su equivalente para las secciones con video,
   donde un contorno oscuro seria invisible.
   -------------------------------------------------------------------------- */

.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);
}

.wp-block-button.is-style-claro .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--crema);
	border: 1px solid rgb(251 246 236 / 0.55);
}

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

/* ------------------------------------------------ Imagen de cada paso ------
   "Como funciona" es la unica seccion sin video, y por eso cada paso lleva su
   propia imagen: es donde hay que VER lo que pasa en cada momento, no leerlo.
   Son fotogramas de los mismos clips que usa el resto de la pagina, asi que el
   mundo visual es el mismo.
   -------------------------------------------------------------------------- */

.avanza-como__imagen {
	margin-block-end: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radio--m);
	overflow: clip;
	/* El fondo cubre el hueco mientras la imagen carga, para que la fila no
	   parpadee en blanco. */
	background: var(--wp--preset--color--crema-hondo);
	box-shadow: var(--wp--preset--shadow--e1);
}

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

/*
 * El riel del progreso estaba a la altura de los numeros, porque el numero era
 * lo primero de cada paso. Ahora lo primero es la imagen, asi que ahi el riel
 * cruzaria las cuatro fotografias por la mitad.
 *
 * Sube por encima de la fila y pasa a leerse como lo que siempre fue: una
 * barra de avance de la secuencia entera, no una linea que une los numeros.
 */
@media (min-width: 782px) {
	.avanza-como__pista {
		padding-block-start: 2.5rem;
	}

	.avanza-como__pista .avanza-como__riel {
		inset-block-start: 0;
		inset-inline: 0;
	}
}

/* ==================================================== Tarjetas de necesidad ==
   La eleccion principal de la portada: "Quiero conseguir mas clientes".

   Antes eran pildoras. En una franja del alto de la pantalla, cuatro pildoras
   pequenas en el centro no se leen como una decision — el titular prometia
   elegir y lo de abajo parecia un pie de foto. Con tarjetas, el icono y la
   frase completa ocupan lo que el momento merece.

   El fondo es translucido y desenfoca lo que hay detras: asi el video se sigue
   viendo a traves de la rejilla en vez de quedar tapado por cuatro rectangulos
   opacos, que es justo lo que se pedia arreglar.
   ============================================================================ */

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

.avanza-necesidad {
	--avanza-acento: var(--wp--preset--color--amarillo);

	display: flex;
	align-items: center;
	gap: 0.875rem;
	block-size: 100%;
	padding: var(--wp--preset--spacing--30);
	background: rgb(8 25 47 / 0.46);
	backdrop-filter: blur(8px);
	border: 1px solid rgb(251 246 236 / 0.16);
	border-radius: var(--wp--custom--radio--l);
	color: var(--wp--preset--color--crema);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva),
		border-color var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva);
}

.avanza-necesidad:hover,
.avanza-necesidad:focus-visible {
	background: rgb(8 25 47 / 0.72);
	border-color: var(--avanza-acento);
}

.avanza-necesidad__icono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--wp--custom--radio--m);
	background: rgb(251 246 236 / 0.12);
	color: var(--wp--preset--color--amarillo-suave);
}

.avanza-necesidad__icono svg {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

.avanza-necesidad__texto {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

.avanza-necesidad__flecha {
	flex: 0 0 auto;
	color: var(--wp--preset--color--amarillo-suave);
	opacity: 0.7;
	transition: transform var(--wp--custom--mov--rapido) var(--wp--custom--mov--curva);
}

.avanza-necesidad:hover .avanza-necesidad__flecha {
	transform: translateX(3px);
	opacity: 1;
}

.avanza-necesidad--amarillo { --avanza-acento: var(--wp--preset--color--amarillo); }
.avanza-necesidad--rosa  { --avanza-acento: var(--wp--preset--color--rosa); }
.avanza-necesidad--celeste    { --avanza-acento: var(--wp--preset--color--celeste-hondo); }
.avanza-necesidad--marino  { --avanza-acento: var(--wp--preset--color--crema); }

/* ------------------------------------------- Barrido de luz sobre imagen ---
   Una franja diagonal de luz que cruza la imagen cuando entra. Es el gesto que
   mejor encaja con unas ilustraciones que SON interfaces holograficas: se lee
   como el momento en que el panel se enciende.

   La posicion la manda `--barrido`, que anima movimiento.js. En reposo vale 1,
   o sea fuera del encuadre por la derecha: sin JavaScript no se ve nada raro,
   solo la imagen.
   -------------------------------------------------------------------------- */

.avanza-logro__imagen,
.avanza-tarjeta-reto__imagen {
	position: relative;
	isolation: isolate;
}

.avanza-logro__imagen::after,
.avanza-tarjeta-reto__imagen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		104deg,
		transparent 40%,
		rgb(214 236 249 / 0.55) 50%,
		transparent 60%
	);
	transform: translateX(calc(var(--barrido, 1) * 135%));
}

@media (prefers-reduced-motion: reduce) {
	.avanza-logro__imagen::after,
	.avanza-tarjeta-reto__imagen::after {
		display: none;
	}
}

/* --------------------------------------------- Rejilla de retos en 3D ------
   La perspectiva vive en el CONTENEDOR, no en cada tarjeta: asi las tres
   comparten un mismo punto de fuga y la fila entra como un bloque en vez de
   como tres piezas girando cada una por su cuenta.
   -------------------------------------------------------------------------- */

@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	.avanza-rejilla {
		perspective: 1400px;
		perspective-origin: 50% 0%;
	}
}