/* Animaciones y transiciones */

/* Fade In */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Slide In */
@keyframes slideIn {
  from { 
    transform: translateX(-30px); 
    opacity: 0; 
  }
  to { 
    transform: translateX(0); 
    opacity: 1; 
  }
}

/* Carrusel de testimonios */
@keyframes testimonialSlide {
  0%, 25% { 
    transform: translateX(0); 
  }
  33%, 58% { 
    transform: translateX(-33.333%); 
  }
  66%, 91% { 
    transform: translateX(-66.666%); 
  }
  100% { 
    transform: translateX(0); 
  }
}

/* Pulse para botones */
@keyframes pulse {
  0% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
  100% { 
    transform: scale(1); 
  }
}

/* Aplicación de animaciones */
.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.slide-in {
  animation: slideIn 0.6s ease-out forwards;
}

/* Retraso en secuencia para elementos múltiples */
.service-card:nth-child(1) {
  animation-delay: 0.1s;
}

.service-card:nth-child(2) {
  animation-delay: 0.3s;
}

.service-card:nth-child(3) {
  animation-delay: 0.5s;
}

.feature-item:nth-child(1) {
  animation-delay: 0.1s;
}

.feature-item:nth-child(2) {
  animation-delay: 0.2s;
}

.feature-item:nth-child(3) {
  animation-delay: 0.3s;
}

.feature-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Animación del slider de testimonios */
.testimonial-slider {
  animation: testimonialSlide 15s infinite ease-in-out;
}

/* Pausar animación al pasar el ratón */
.testimonial-container:hover .testimonial-slider {
  animation-play-state: paused;
}

/* Efecto hover en cards de servicios */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Efecto hover en botón CTA */
.cta-button:hover {
  animation: pulse 1s infinite;
}

/* Transiciones suaves generales */
a, button, input, select {
  transition: all 0.3s ease;
}

/* Animación para elementos al entrar en viewport */
@media (prefers-reduced-motion: no-preference) {
  .hero, .about, .services, .audit-details,
  .why-us, .testimonials, .order-form, .faq, .contact {
    opacity: 0;
  }
  
  .hero.fade-in, .about.slide-in, .services.fade-in,
  .audit-details.slide-in, .why-us.fade-in, 
  .testimonials.slide-in, .order-form.fade-in,
  .faq.slide-in, .contact.fade-in {
    opacity: 1;
  }
}

/* Preferencia de usuario para reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}