.brands{
  max-width: 1200px;
  margin: 0px auto 0;
  padding: 18px 0 10px;
  overflow: hidden;
  position: relative;

  /* fade nas laterais */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.brands-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: brands-marquee 18s linear infinite;
}

.brands-row{
  display: flex;
  align-items: center;
  gap: clamp(26px, 5vw, 72px);
  padding-right: clamp(26px, 5vw, 72px);
}

.brands-row span{
  font-size: clamp(24px, 4vw, 66px);
  font-weight: 300;
  letter-spacing: .10em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}

/* O pulo perfeito: move exatamente metade do conteúdo (pq duplicamos a lista) */
@keyframes brands-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* pausa ao passar mouse (desktop) */
@media (hover:hover){
  .brands:hover .brands-track{ animation-play-state: paused; }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .brands-track{ animation: none; }
}