/*
 * animaciones.css — velo de carga, entradas y flotado al pasar el mouse.
 *
 * Las clases de estado las pone `animaciones.js`, nunca el marcado: si el script
 * no corre, no hay nada que oculte contenido y la página se ve como siempre. Por
 * eso acá no hay ningún `opacity: 0` que aplique por su cuenta, salvo dentro del
 * velo, que existe justamente para tapar mientras se prepara todo.
 *
 * Las distancias y los tiempos están calibrados contra wearepalta.com, que es la
 * referencia que pidió el cliente: ahí las piezas viajan 250px al entrar con el
 * scroll y 130-140px al cargar, en algo más de un segundo. Lo que había antes
 * (28px en 0.7s) se leía como un parpadeo.
 *
 * Todo el movimiento está envuelto en `prefers-reduced-motion: no-preference`.
 * Quien pidió menos movimiento ve el sitio quieto, con el contenido en su lugar
 * y los números en su valor final. El velo se levanta igual: no es decoración.
 */

:root {
	/* Frena de golpe al final, como el resorte sin rebote de la referencia. */
	--z26-salida: cubic-bezier(0.16, 1, 0.3, 1);
	/* Para el velo, que arranca y termina parejo. */
	--z26-velo: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ── Velo de carga ─────────────────────────────────────────────── */

.z26-cargador {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--c-verde-oscuro);
	transition: transform 0.9s var(--z26-velo);
}

/* Se va hacia arriba y descubre la página, en vez de solo apagarse. */
.z26-cargador--fuera {
	transform: translateY(-100%);
}

.z26-cargador__centro {
	display: grid;
	gap: 26px;
	justify-items: center;
	transition:
		opacity 0.35s ease-out,
		transform 0.5s var(--z26-velo);
}

.z26-cargador--fuera .z26-cargador__centro {
	opacity: 0;
	transform: translateY(-16px);
}

.z26-cargador__marca {
	width: 183px;
	height: auto;
}

.z26-cargador__barra {
	display: block;
	overflow: hidden;
	width: 148px;
	height: 2px;
	border-radius: 2px;
	background: rgba(195, 249, 80, 0.2);
}

/*
 * Barra indeterminada: no hay progreso real que mostrar —lo que se espera son
 * las fuentes y las imágenes— así que barre en loop hasta que se levanta.
 */
.z26-cargador__avance {
	display: block;
	width: 45%;
	height: 100%;
	background: var(--c-verde-fluor);
	border-radius: inherit;
	animation: z26-barrido 1.15s ease-in-out infinite;
}

@keyframes z26-barrido {
	0%   { transform: translateX(-120%); }
	100% { transform: translateX(340%); }
}

/* Nada de scroll mientras el velo tapa: no hay nada que ver debajo. */
.z26-cargando,
.z26-cargando body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.z26-cargador__avance {
		animation: none;
		width: 100%;
	}

	/* Se apaga en vez de correrse hacia arriba, pero se va igual. */
	.z26-cargador {
		transition: opacity 0.3s linear;
	}

	.z26-cargador--fuera {
		opacity: 0;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	/* ── Entrada con el scroll ─────────────────────────────────── */

	.z26-anima {
		opacity: 0;
		transform: translateY(90px);
		transition:
			opacity 0.9s var(--z26-salida),
			transform 1.2s var(--z26-salida);
		will-change: opacity, transform;
	}

	/* Las bandas de Servicios entran alternando de lado. */
	.z26-anima--izq {
		transform: translateX(-150px);
	}

	.z26-anima--der {
		transform: translateX(150px);
	}

	/*
	 * Dentro de las tiras horizontales solo se enciende: la pista las recorta a
	 * su alto exacto y cualquier desplazamiento las dejaría fuera del recorte.
	 */
	.z26-anima--desvanece {
		transform: none;
	}

	/* El filete entre las dos columnas se dibuja de arriba hacia abajo. */
	.z26-anima--linea {
		transform: scaleY(0);
		transform-origin: top center;
	}

	/*
	 * En pantalla angosta las columnas se apilan y ocupan el ancho entero: ahí
	 * un viaje lateral no tiene de dónde venir, así que suben como todo lo demás.
	 * Va después de los modificadores porque pesan lo mismo y gana el último.
	 */
	@media (max-width: 1024px) {
		.z26-anima--izq,
		.z26-anima--der {
			transform: translateY(90px);
		}
	}

	.z26-anima.z26-anima--dentro {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	/*
	 * El desplazamiento lateral se recorta en la sección: si no, esos 150px de
	 * más asoman por el costado y aparece una barra de scroll horizontal
	 * mientras dura la animación. `clip` en vez de `hidden` para no crear un
	 * contenedor de scroll y no romper ningún `sticky`.
	 */
	.z26-servicio,
	.z26-bloque,
	.z26-qh,
	.z26-cta {
		overflow-x: clip;
	}

	/* ── Texto palabra por palabra ─────────────────────────────── */
	/*
	 * Cada palabra sube y aparece con un retraso propio, en cascada. El span va
	 * `inline-block` sin recorte a propósito: un `overflow: hidden` mueve la
	 * línea base de la caja y correría el texto unos píxeles, que es justo lo
	 * que no se puede tocar en un calco.
	 */
	.z26-pal {
		display: inline-block;
		opacity: 0;
		transform: translateY(0.9em);
		transition:
			opacity 0.7s var(--z26-salida),
			transform 0.85s var(--z26-salida);
	}

	/*
	 * El texto que abre por la izquierda —el título del header— entra además
	 * desde el costado, con más recorrido y más lento. Con la cascada vertical
	 * sola el movimiento se perdía: el velo tarda 900ms en irse y para cuando
	 * descubría el título, la entrada ya había terminado.
	 */
	.z26-pal--izq {
		transform: translate(-70px, 0.35em);
		transition:
			opacity 0.95s var(--z26-salida),
			transform 1.2s var(--z26-salida);
	}

	.z26-palabras.z26-anima--dentro .z26-pal {
		opacity: 1;
		transform: none;
	}

	/* ── Entrada al cargar ─────────────────────────────────────── */
	/*
	 * Los heros no esperan al scroll: arrancan cuando el velo se levanta, con
	 * el título antes que el texto y las imágenes llegando desde su costado.
	 */

	.z26-anima-hero {
		opacity: 0;
		transition:
			opacity 1s var(--z26-salida),
			transform 1.3s var(--z26-salida);
	}

	.z26-anima-hero--izq  { transform: translateX(-150px); }
	.z26-anima-hero--der  { transform: translateX(150px); }
	.z26-anima-hero--sube { transform: translateY(70px); }

	.z26-anima-hero.z26-anima--dentro {
		opacity: 1;
		transform: none;
	}

	/* Lo mismo que en las bandas: el viaje lateral se recorta en la sección. */
	.z26-hero,
	.z26-hhero,
	.z26-dhero,
	.z26-thero,
	.z26-qhero,
	.z26-contacto {
		overflow-x: clip;
	}

	/* La barra de arriba baja apenas, para que la carga se sienta completa. */
	.z26-anima-barra {
		opacity: 0;
		transform: translateY(-28px);
		transition:
			opacity 0.7s var(--z26-salida),
			transform 0.9s var(--z26-salida);
	}

	.z26-anima-barra.z26-anima--dentro {
		opacity: 1;
		transform: none;
	}
}

/* ── Flotado al pasar el mouse ─────────────────────────────────── */
/*
 * Va fuera del bloque de movimiento reducido porque el cambio de sombra sigue
 * marcando el foco aunque el desplazamiento no ocurra; lo que se anula es el
 * viaje hacia arriba.
 *
 * El `:not(.z26-anima)` no es adorno. Las tarjetas del equipo son a la vez lo
 * que entra con el scroll y lo que flota al pasar el mouse, y las dos cosas se
 * hacen con `transform`: sin esto ganaba la del hover por estar escrita después
 * —pesan lo mismo— y la grilla del equipo entraba en 0.35s y sin desvanecido,
 * mientras el resto del sitio entra en 1.2s. Se veía cortada. Mientras dura la
 * entrada manda `.z26-anima`; el script la saca al terminar y vuelve esta.
 */

.z26-programa .z26-card,
.z26-persona:not(.z26-anima) {
	transition:
		transform 0.35s var(--z26-salida),
		box-shadow 0.35s var(--z26-salida);
}

.z26-programa:hover .z26-card,
.z26-programa:focus-within .z26-card,
.z26-persona:hover,
.z26-persona:focus-within {
	box-shadow: 0 18px 38px rgba(33, 40, 14, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
	.z26-programa:hover .z26-card,
	.z26-programa:focus-within .z26-card,
	.z26-persona:hover,
	.z26-persona:focus-within {
		transform: translateY(-14px);
	}
}

/* Los números crecen con dígitos de ancho fijo para que no bailen al contar. */
.z26-cifra__numero,
.z26-metrica__numero {
	font-variant-numeric: tabular-nums;
}