/* ==========================================================================
   INDICADOR DE SCROLL FIJO Y CENTRADO EN LA PANTALLA (RESPONSIVE)
   ========================================================================== */

/* Forzamos al contenedor padre a ser el punto de referencia relativo */
#home {
  position: relative;
}

.fixed-scroll-indicator {
  position: absolute;
  bottom: 30px;       /* Distancia fija desde la parte inferior de la pantalla */
  left: 50%;          /* Desplaza el inicio del contenedor al centro exacto */
  transform: translateX(-50%); /* Compensa su propio ancho para centrarse al 100% */
  z-index: 10;        /* Lo coloca por encima del video de fondo */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Permite que los clics pasen a través si es necesario */
}

/* El óvalo exterior del indicador */
.scroll-mouse {
  width: 26px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.5); /* Borde sutil semi-transparente */
  border-radius: 20px;
  position: relative;
  opacity: 0.8;
}

/* La rueda interna con animación fluida */
.scroll-wheel {
  width: 2px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 1px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-drop 2s infinite ease-in-out;
}

/* Animación de desplazamiento y desvanecimiento continuo */
@keyframes scroll-drop {
  0% {
    top: 8px;
    opacity: 0;
    height: 2px;
  }
  20% {
    opacity: 1;
    height: 8px;
  }
  60% {
    top: 24px;
    opacity: 0;
    height: 4px;
  }
  100% {
    top: 8px;
    opacity: 0;
    height: 2px;
  }
}

/* --- Ajustes Responsive para Pantallas Grandes / Monitores 4K y TV --- */
@media screen and (min-width: 1440px) {
  .fixed-scroll-indicator {
    bottom: 45px; /* Más separación del borde inferior en pantallas masivas */
  }
  .scroll-mouse {
    width: 28px;
    height: 48px; /* Crece ligeramente para equilibrar la proporción visual */
  }
}