/* ═══════════════════════════════════════
   NOSSOS CLIENTES — Marquee scroll infinito
   Isaac Amaral / Grupo Insight
═══════════════════════════════════════ */

.clientes {
  padding: clamp(48px, 6vw, 80px) 0;
  text-align: center;
  overflow: hidden;
}

.clientes-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

.clientes-sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.2vw, 15px);
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Faixa de marquee — full-width, com fade nas bordas */
.clientes-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  mask-image: linear-gradient(90deg, transparent 0%, white 8%, white 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, white 8%, white 92%, transparent 100%);
}

.clientes-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
}

.clientes-track:hover {
  animation-play-state: paused;
}

/* Logos — padrão "Trusted by": altura fixa, width auto, monocromático.
   Hover volta pra cor original, indicando interatividade. */
.clientes-track img {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1) opacity(0.55);
  transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}

.clientes-track img:hover {
  filter: none;
  transform: scale(1.06);
}

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

/* Tablet */
@media (max-width: 900px) {
  .clientes-track img {
    height: 38px;
    max-width: 150px;
  }
  .clientes-track { gap: 44px; }
}

/* Mobile */
@media (max-width: 600px) {
  .clientes-track img {
    height: 32px;
    max-width: 120px;
  }
  .clientes-track { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .clientes-track { animation: none; }
}