/* Animaciones personalizadas con Tailwind */
@layer utilities {
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }

  .animate-on-scroll {
    animation: slideUp 0.6s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  .animate-on-scroll-left {
    animation: slideInLeft 0.8s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  .animate-on-scroll-right {
    animation: slideInRight 0.8s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  .review-card.animate-on-scroll {
    animation-name: scaleIn;
  }

  /* Smooth scroll behavior */
  html {
    scroll-behavior: smooth;
  }

  /* Focus styles for accessibility */
  button:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
  }

  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
  }
}

/* Smooth transitions */
* {
  scroll-behavior: smooth;
}