/* Scroll animation utilities */
.scroll-animate {
  --scroll-x: 0;
  --scroll-y: 1.25rem;
  --scroll-scale: 1;
  --scroll-delay: 0ms;
  opacity: 0;
  transform: translate3d(var(--scroll-x), var(--scroll-y), 0) scale(var(--scroll-scale));
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.22, 1, .36, 1),
    filter 700ms ease;
  transition-delay: var(--scroll-delay);
  will-change: opacity, transform;
}

.scroll-animate.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.scroll-animate.is-exiting {
  transition-duration: 420ms;
}

.hero.scroll-animate,
.svc-hero.scroll-animate,
.hero-art.scroll-animate,
.problemas-art.scroll-animate {
  --scroll-x: 0;
  --scroll-y: 0;
  --scroll-scale: 1;
}

.hero.scroll-animate {
  transition-duration: 900ms;
}

.hero-art.scroll-animate,
.problemas-art.scroll-animate {
  transition-duration: 850ms;
}

.scroll-fade {
  --scroll-y: 0;
}

.scroll-up {
  --scroll-y: 1.5rem;
}

.scroll-left {
  --scroll-x: -1.5rem;
  --scroll-y: 0;
}

.scroll-right {
  --scroll-x: 1.5rem;
  --scroll-y: 0;
}

.scroll-zoom {
  --scroll-y: .75rem;
  --scroll-scale: .96;
}

@keyframes banner-image-float {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0.375rem, -0.625rem, 0) scale(1.015); }
  100% { transform: translate3d(-0.25rem, 0.375rem, 0) scale(1.005); }
}

@keyframes banner-image-float-centered {
  0% { transform: translate3d(0, -50%, 0) scale(1); }
  50% { transform: translate3d(0.375rem, calc(-50% - 0.625rem), 0) scale(1.012); }
  100% { transform: translate3d(-0.25rem, calc(-50% + 0.375rem), 0) scale(1.004); }
}

@keyframes banner-bg-float {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0.5rem, -0.5rem, 0) scale(1.012); }
  100% { transform: translate3d(-0.25rem, 0.375rem, 0) scale(1.006); }
}

.hero#soluciones .hero-art.scroll-animate img,
.problemas-art.scroll-animate img {
  animation-play-state: paused;
}

.hero#soluciones .hero-art.scroll-animate.is-visible img,
.problemas-art.scroll-animate.is-visible img {
  animation-play-state: running;
}

.hero.scroll-animate.is-visible::before {
  animation: banner-bg-float 8s ease-in-out infinite alternate;
  will-change: transform;
}

.hero#soluciones .hero-art.scroll-animate.is-visible img {
  animation-name: banner-image-float-centered;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.problemas-art.scroll-animate.is-visible img {
  animation-name: banner-image-float;
  animation-duration: 7.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@media (max-width: 720px) {
  .hero#soluciones .hero-art.scroll-animate.is-visible img {
    animation-name: banner-image-float-centered;
    animation-duration: 7s;
  }
}

.scroll-animate.card,
.scroll-animate.stat-card,
.scroll-animate.benefit,
.scroll-animate.incluye-item,
.scroll-animate.info-card,
.scroll-animate.trust-card,
.scroll-animate.panel {
  transition-property: opacity, transform, filter, border-color, box-shadow, background;
}

.btn,
.card,
.stat-card,
.benefit,
.incluye-item,
.info-card,
.trust-card,
.cta-card,
.footer-cta,
.wa-fab {
  backface-visibility: hidden;
}

.btn:hover,
.footer-cta:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 14px 30px -14px rgba(37,99,235,0.85);
}

.card:hover,
.stat-card:hover,
.benefit:hover,
.incluye-item:hover,
.info-card:hover,
.trust-card:hover,
.cta-card:hover {
  will-change: transform;
}

.scroll-animate.is-visible.card:hover,
.scroll-animate.is-visible.stat-card:hover,
.scroll-animate.is-visible.benefit:hover,
.scroll-animate.is-visible.incluye-item:hover,
.scroll-animate.is-visible.info-card:hover,
.scroll-animate.is-visible.trust-card:hover,
.scroll-animate.is-visible.cta-card:hover {
  transform: translate3d(0, -3px, 0) scale(1);
}

@media (max-width: 640px) {
  .scroll-animate {
    --scroll-x: 0;
    --scroll-y: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-animate,
  .scroll-animate.is-visible,
  .scroll-animate.is-exiting {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }


  .hero.scroll-animate.is-visible::before,
  .hero#soluciones .hero-art.scroll-animate.is-visible img,
  .problemas-art.scroll-animate.is-visible img {
    animation: none;
  }


  .btn,
  .card,
  .stat-card,
  .benefit,
  .incluye-item,
  .info-card,
  .trust-card,
  .cta-card,
  .footer-cta,
  .wa-fab {
    transition: none;
  }
}