/* Animaciones de entrada (29/10/2026).
   Un script en el <head> pone html.anima-on (solo si el usuario no pidió menos movimiento) y main.js agrega .anima-visto
   a cada bloque cuando entra en pantalla, con un retardo escalonado (--anima-d) entre hermanos.
   Las reglas que ocultan usan :where() (especificidad baja) para que .anima-visto siempre gane.
   Se animan contenedores sin transform propio (los botones 3D van dentro de su contenedor, así no se pisa su :active).
   Si main.js no llega a correr, el <head> quita anima-on a los 2,5 s y todo queda visible. */

:root{--anima-dur:.75s;--anima-curva:cubic-bezier(.22,.8,.24,1)}

/* Deslizar hacia arriba (lo general) */
html.anima-on :where(
  .hero-title,.hero-text,.hero .actions,.hero-plataformas,
  .como-funciona__titulo,.paso,
  .banda .wrap,
  .stats__frase,.opiniones .wrap,
  .rubros__titulo,.rubros__bajada,.rubro,
  .alquilar__titulo,.alquilar__bajada,.opcion,
  .america__titulo,.america__bajada,.america__banderas,
  .preguntas__titulo,.preguntas__bajada,.preguntas__wa,.pregunta,
  .footer__marca,.footer__lista
){opacity:0;transform:translateY(28px);transition:opacity var(--anima-dur) var(--anima-curva) var(--anima-d,0ms),transform var(--anima-dur) var(--anima-curva) var(--anima-d,0ms)}

/* Aparecer creciendo apenas (mapa, cápsula de logos, CTA final) */
html.anima-on :where(.america__mapa,.stats__capsula,.cierre__tarjeta){opacity:0;transform:scale(.94);transition:opacity .9s var(--anima-curva) var(--anima-d,0ms),transform .9s var(--anima-curva) var(--anima-d,0ms)}

/* Fundido simple (tira de logos de clientes) */
html.anima-on :where(.clientes){opacity:0;transition:opacity 1.1s ease var(--anima-d,0ms)}

/* Estado final */
html.anima-on .anima-visto{opacity:1;transform:none}

/* Logos de la cápsula y banderas: salen uno tras otro con un pequeño rebote */
html.anima-on :where(.stats__capsula li,.america__banderas li){opacity:0;transform:scale(.4)}
html.anima-on :is(.stats__capsula,.america__banderas).anima-visto li{animation:anima-pop .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--anima-d,0ms) + 250ms + var(--i,0) * 90ms)}
@keyframes anima-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* Medalla de la tarjeta «Alquilar una web»: entra girando cuando aparece la tarjeta */
html.anima-on :where(.opcion--alquilada .opcion__medalla){opacity:0}
html.anima-on .opcion--alquilada.anima-visto .opcion__medalla{animation:anima-medalla .8s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--anima-d,0ms) + 350ms)}
@keyframes anima-medalla{from{opacity:0;transform:scale(.2) rotate(-35deg)}to{opacity:1;transform:scale(1) rotate(10deg)}}

/* Íconos de «Cómo funciona»: un pequeño salto al aparecer cada tarjeta */
html.anima-on .paso.anima-visto .paso__ico img{animation:anima-pop .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--anima-d,0ms) + 150ms)}

@media (prefers-reduced-motion:reduce){
  html.anima-on *{transition:none!important;animation:none!important}
}