/* ════════════════════════════════════════════════════════════════════════════════════════════
   Guillermo Cismondi 09/10/2026 - revelado al hacer scroll. Compartido por las cuatro landings
   (index, conecta, plus, area). Se carga junto con js/reveal.js.

   UN SOLO ARCHIVO a proposito: el efecto nacio en plus.css y se iba a copiar a las otras tres.
   En este cotizador ya pasó varias veces que una regla vive en cuatro lugares y el bug termina
   siendo la copia que quedó atrás, asi que esto vive una sola vez y las landings lo linkean.

   CÓMO SE USA
     .reveal         un bloque suelto (un titulo, un parrafo, una seccion entera)
     .reveal-grupo   un contenedor cuyos hijos entran escalonados, de a 90ms

   EL ESTADO DE REPOSO ES VISIBLE
   Lo que esconde los bloques es `.js-anim`, que pone el propio script. Sin JS, sin
   IntersectionObserver o con "reducir movimiento" activado, la clase no se pone nunca y la pagina
   se ve entera: los precios, los botones y los telefonos no dependen de que un observador se
   dispare. Eso ademas cuida el SEO y el primer frame que mide el LCP.

   EL HERO NO SE ANIMA. Es lo primero que se ve; retrasarlo empeora el LCP sin ganar nada.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

.reveal {
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1), transform .62s cubic-bezier(.22, .61, .36, 1);
}
.js-anim .reveal:not(.is-visible) { opacity: 0; transform: translateY(26px); }

/* Grilla escalonada: los hijos entran uno detras del otro. */
.js-anim .reveal-grupo > * {
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.js-anim .reveal-grupo:not(.is-visible) > * { opacity: 0; transform: translateY(20px); }
.reveal-grupo.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-grupo.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-grupo.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-grupo.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-grupo.is-visible > *:nth-child(n+5) { transition-delay: 320ms; }

/* En DESKTOP todo es mas rapido y recorre menos.
   En una pantalla alta se ve media pagina de una, asi que un bloque puede estar bien adentro del
   campo visual y recien estar terminando de aparecer: se lee como que la pagina va lenta. En
   mobile, en cambio, el bloque ocupa casi toda la pantalla y el recorrido largo se nota bien.
   El JS acompaña: ahi el observador tambien dispara antes (ver reveal.js). */
@media (min-width: 900px) {
  .reveal { transition-duration: .42s; }
  .js-anim .reveal:not(.is-visible) { transform: translateY(18px); }
  .js-anim .reveal-grupo > * { transition-duration: .38s; }
  .js-anim .reveal-grupo:not(.is-visible) > * { transform: translateY(14px); }
  .reveal-grupo.is-visible > *:nth-child(2) { transition-delay: 55ms; }
  .reveal-grupo.is-visible > *:nth-child(3) { transition-delay: 110ms; }
  .reveal-grupo.is-visible > *:nth-child(4) { transition-delay: 165ms; }
  .reveal-grupo.is-visible > *:nth-child(n+5) { transition-delay: 200ms; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-grupo > * { transition: none !important; }
  .js-anim .reveal:not(.is-visible),
  .js-anim .reveal-grupo:not(.is-visible) > * { opacity: 1 !important; transform: none !important; }
}