.clients-marquee {
  overflow: hidden;
  width: 100%;
  /* Fade nas bordas — dá acabamento profissional, evita corte abrupto dos logos */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.clients-track {
  display: flex;
  width: max-content;
  animation: scrollClients 45s linear infinite;
}

.clients-group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px; /* mesmo valor do gap, para o espaçamento ficar uniforme na emenda */
}

.clients-group img {
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.clients-group img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes scrollClients {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pausa ao passar o mouse — comum em carrosséis de clientes */
.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

/* Respeita quem prefere menos movimento na tela */
@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
  }
}