@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

/* Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }

html {
  scroll-behavior: smooth;
}

/* Tailwind ya maneja esto si usas bg-black/50 y backdrop-blur-sm, pero por si usas CSS puro */
.opacity-100 { opacity: 1; }

.opacity-100 {
  opacity: 1;
}
.translate-y-0 {
  transform: translateY(0);
}
.translate-y-6 {
  transform: translateY(1.5rem); /* 6 * 0.25rem */
}

@keyframes infinite-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.carousel-track {
  display: flex;
  gap: 4rem;
  animation: infinite-scroll 15s linear infinite;
}

.carousel-wrapper {
  overflow: hidden;
  white-space: nowrap;
}



@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-fadeIn     { animation: fadeIn 0.8s ease-out forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.8s ease-out forwards; }
.animate-fadeInUp   { animation: fadeInUp 0.8s ease-out forwards; }
.animate-float      { animation: float 3s ease-in-out infinite; }

.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-700 { animation-delay: 0.7s; }