/* ============================================
   ANIMACIONES — Keyframes y reveal on scroll
============================================ */

@keyframes flotar {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-18px) translateX(10px); }
  }
  
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes rebote {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }
  
  .hero__content > * { animation: fadeInUp 0.8s ease both; }
  .hero__content > *:nth-child(2) { animation-delay: 0.15s; }
  .hero__content > *:nth-child(3) { animation-delay: 0.3s; }
  

/* DESPUÉS */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal--delay-1 { transition-delay: 0.12s; }
  .reveal--delay-2 { transition-delay: 0.24s; }
  .reveal--delay-3 { transition-delay: 0.36s; }
  
  .card__icon:hover, .eco-card__icon:hover { animation: rebote 0.6s ease; }
  
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; }
  }