.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, rgb(85, 255, 0) 50%, rgb(255, 174, 0) 50%);
  bottom:0;
  left:-50%;
  opacity:1; /* sin transparencia en el gradiente; solo imágenes la controlan */
  position:fixed;
  right:-50%;
  top:0;
  z-index:-2; /* fondo degradado debajo de la foto */
}

/* Capa de foto de fondo (según dispositivo), fija y con opacidad variable */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; /* sobre el gradiente, bajo el contenido */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* que se vea bien en todas las pantallas */
  opacity: var(--fondo-opacity, 0.2); /* controla solo la transparencia de las imágenes */
}
/* Opacidad de imágenes de fondo (única variable) */
body { --fondo-opacity: 0.2; } /* 20% (bajar más la opacidad) */

/* Desktop por defecto (≥ 901px): usa escritorio.png */
@media (min-width: 901px) {
  body::after {
    background-image: url('/imgs/images/escritorio.png');
  }
}

/* Responsive (≤ 900px): usa responsive.png */
@media (max-width: 900px) {
  body::after {
    background-image: url('/imgs/images/responsive.png');
  }
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}
@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}