.ribbons {
  position: relative;
  width: 100vw;
  height: 250px;
  overflow: visible !important;
  background: black;
  z-index: 1;
}

/* Cintas base */
.ribbon {
  position: absolute;
  width: 300vw;
  height: 100px;
  display: flex;
  align-items: center;
  transform: rotate(-7deg);
  left: -100vw;
  overflow: hidden;
  pointer-events: none;
}

.ribbon-track {
  display: flex;
  align-items: center;
  min-height: 60px;
  gap: 40px;
  animation: scroll-ribbon 15s linear infinite;
  min-width: 70%;
  max-width: 70%;
}

.ribbon-track img {
  height: 50px;
  width: auto;
  position: relative;
  z-index: 10;
  flex-shrink: 0; /* Impide que se encojan */
}

/* Cinta oscura (abajo) */
.ribbon.bottom {
  top: 120px;
  background-color: rgba(138, 43, 226, 0.2);
  z-index: 1;
}

/* Cinta clara (arriba) */
.ribbon.top {
  top: 60px;
  background-color: #8a2be2;
  z-index: 2;
  transform: rotate(2deg);
}

selector {
  overflow: visible !important;
  z-index: auto !important;
}

@keyframes scroll-ribbon {
  0% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media only screen and (max-width: 1366px) {
  .ribbon {
    height: 80px;
     transform: rotate(-6deg);
  }
  
 .ribbon.top {
     transform: rotate(4deg);
  }
}

/* ------------------ */
/* ✅ MOBILE VERSION  */
/* ------------------ */
@media (max-width: 768px) {
	@keyframes scroll-ribbon {
  0% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(100%);
  }
}
	
	.ribbon-track {
  animation: scroll-ribbon 25s linear infinite;
}
}