/* Scroll suave */
html {
  scroll-behavior: smooth;
}

/* Navbar scroll */
#navbar.scrolled {
  @apply bg-white/95 dark:bg-grayjk/95 shadow-sm backdrop-blur-lg;
}

/* SLIDER */
#hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.slide img,
.slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Puntos de navegación */
.dot {
  @apply w-2 h-2 bg-white/50 rounded-full cursor-pointer transition-all duration-300;
}

.dot.active {
  @apply bg-jk w-8;
}

/* Progress bar */
#progress-bar {
  transform-origin: left;
}

/* Animaciones de entrada */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.animation-delay-300 { animation: slideUp 0.8s ease-out forwards; animation-delay: 0.3s; }
.animation-delay-600 { animation: fadeIn 0.8s ease-out forwards; animation-delay: 0.6s; }
.animation-delay-900 { animation: fadeIn 0.8s ease-out forwards; animation-delay: 0.9s; }

/* Parallax sutil */
@media (min-width: 768px) {
  #inicio::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none z-10;
  }
}