/* Asegúrate de que html y body no permitan scroll lateral */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Evita el espacio blanco/negro a la derecha */
  width: 100%;
}

/* Contenedor del fondo */
#bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Cambiado de 100vw a 100% para evitar bugs de scrollbar */
  height: 100%;
  overflow: hidden;
  pointer-events: none; /* Esto permite que puedas hacer clic en los botones aunque haya ondas encima */
  z-index: -1;          /* Cambiado a -1 para que esté DETRÁS de todo el contenido */
}

/* Ajuste del SVG */
#bg-container svg {
  width: 200%;         /* Mantiene el ancho para la animación */
  height: 100%;
  display: block;
  opacity: 1;
  /* En móviles, suavizamos la carga */
  will-change: transform; 
}

/* Animación */
.g {
  animation: slide 12s linear infinite;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- SECCIÓN RESPONSIVA --- */

@media (max-width: 768px) {
    #bg-container svg {
        /* En celulares, a veces el SVG se estira feo. 
           Esto asegura que cubra el fondo sin deformar tanto las ondas */
        min-width: 300%; 
        object-fit: cover;
    }

    .g {
        /* En móviles, una animación demasiado rápida consume mucha batería. 
           La bajamos un poco (opcional) */
        animation-duration: 20s; 
    }
}