/**
 * Infinite logo marquee — CSS-only.
 * UNLAYERED.
 */

body.scc-fase0 .sc-logo-wall {
  background: var(--color-cream, #F8F7F2);
  padding: 6rem 0;
  position: relative;
}
body.scc-fase0 .sc-logo-wall__head {
  text-align: center;
  max-width: 1280px;
  margin: 0 auto 3rem;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
body.scc-fase0 .sc-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
body.scc-fase0 .sc-marquee__track {
  display: flex;
  gap: 4rem;
  width: max-content;
  /* Duration scales with the track: ~4s per logo keeps the scroll speed
   * steady as brands are added (39 logos -> 156s). */
  animation: sc-marquee-scroll 156s linear infinite;
  align-items: center;
}
body.scc-fase0 .sc-marquee:hover .sc-marquee__track {
  animation-play-state: paused;
}
body.scc-fase0 .sc-marquee__item {
  flex-shrink: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.scc-fase0 .sc-marquee__item img {
  max-height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s, transform 0.3s;
  /* override GP `img { height: auto }` */
  height: auto;
}
body.scc-fase0 .sc-marquee__item:hover img {
  opacity: 1;
  transform: scale(1.04);
}
@keyframes sc-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Reduced motion: the animation stops, so the wall must stay browsable.
 * Swap the clipped marquee for a native horizontal scroller — otherwise
 * only the first logos are visible with no way to reach the rest. */
@media (prefers-reduced-motion: reduce) {
  body.scc-fase0 .sc-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    -webkit-mask-image: none;
  }
  body.scc-fase0 .sc-marquee__track {
    animation: none;
    padding: 0 1.5rem 1rem;
  }
  /* The second logo set only exists for the seamless loop — drop it
   * when the track is a manual scroller. */
  body.scc-fase0 .sc-marquee__item[aria-hidden="true"] {
    display: none;
  }
}

/* Mobile optical scale: smaller wall + tighter track so more logos fit
   without shrinking each one below a legible size. */
@media (max-width: 640px) {
  body.scc-fase0 .sc-logo-wall { padding: 4rem 0; }
  body.scc-fase0 .sc-marquee__track { gap: 2.5rem; }
  body.scc-fase0 .sc-marquee__item { height: 44px; }
  body.scc-fase0 .sc-marquee__item img { max-width: 140px; }
}