/* RESET */
body {
  margin: 0;
  font-family: system-ui;
}

/* CONTENEDOR DEL FONDO */
body:not(.bg-enabled) #bg-carousel {
  display: none;
}


/* OSCURECER PARA LEGIBILIDAD */
#bg-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
 background: rgba(0,0,0,0.8); /* antes 0.75 */
}

/* PISTA QUE SE MUEVE */
.bg-track {
  position: absolute;
  inset: 0;
  background-image: url("/img/streaming-bg.jpg");
  background-repeat: repeat;
  background-size: auto 50%;   /* 🔥 controla tamaño */
  animation: subir 60s linear infinite;
}

/* ANIMACIÓN VERTICAL */
@keyframes subir {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: 0 0;
  }
}

/* CONTENIDO */
#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 40px;
  color: white;
}
#bg-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0.9)
  );
  z-index: 1;
}
@media (max-width: 768px) {

  /* Fondo un poco más oscuro */
  #bg-carousel::after {
    background: rgba(0,0,0,0.85);
  }

  /* Logos más grandes pero menos visibles */
  .bg-track {
    background-size: auto 65%;
    animation: subir 80s linear infinite;
  }

  /* Menos padding al contenido */
  #app {
    padding: 20px;
  }
}
body.login #bg-carousel::after {
  background: rgba(0,0,0,0.9);
}

body.login .bg-track {
  animation: subir 100s linear infinite;
  background-size: auto 70%;
}
/* TODO EL CONTENIDO SIEMPRE ENCIMA DEL FONDO */
.hero,
.distributor-section,
.how-it-works,
.services-available {
  position: relative;
  z-index: 1;
}