/* ============================================
   HERO – hero.css
   ============================================ */

#hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#hero .z-10 {
  z-index: 10;
}

#hero .z-20 {
  z-index: 20;
}

/* Flecha de scroll */
.animate-bounce {
  animation: bounce 2s infinite;
}

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