/*
 * Marquesina de logos aliados.
 *
 * Webflow la animaba con una interacción IX2 que desplazaba UN solo bloque de
 * logos: al correrse dejaba un hueco a la derecha. Aquí el contenido va
 * duplicado y la animación es continua, así que nunca falta contenido — la
 * misma idea que el `autoFill` de react-fast-marquee que usamos en mentorías.
 */
.bb-marquee {
  --bb-marquee-gap: 60px;
  --bb-marquee-duracion: 45s;
  width: 100%;
  overflow: hidden;
  /* deja que los logos se desvanezcan en los bordes en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/*
 * Webflow escondía .slider-logos hasta que arrancaba su motor de interacciones
 * (html.w-mod-ix3). Ya no depende de él, así que se muestra siempre.
 */
.bb-marquee .slider-logos {
  visibility: visible !important;
  width: max-content;
  margin-left: 0;
  margin-right: 0;
  animation: bb-marquee-scroll var(--bb-marquee-duracion) linear infinite;
  will-change: transform;
}

.bb-marquee:hover .slider-logos {
  animation-play-state: paused;
}

/*
 * Con el contenido duplicado, un ciclo son los items de una copia más el hueco
 * que la separa de la siguiente: la mitad del ancho más medio gap.
 */
@keyframes bb-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--bb-marquee-gap) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-marquee .slider-logos { animation: none; }
}