.clientes {
  background: var(--color-bg-base);
  overflow: hidden;
}

.clientes__heading {
  max-width: 760px;
  margin-bottom: var(--space-8);
}

.clientes__heading .lead {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.clientes__marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.clientes__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.clientes__marquee:hover .clientes__track {
  animation-play-state: paused;
}

.clientes__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 16vw, 200px);
  height: 140px;
  margin-inline: var(--space-6);
}

.clientes__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1) opacity(0.55);
  transition: filter var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.clientes__logo:hover img {
  filter: grayscale(0) brightness(1) invert(0) opacity(1);
  transform: scale(1.06);
}

/* Fidhem e Fazenda CBM são selos com preenchimento sólido (sem áreas
   transparentes entre as cores) — com brightness(0)/invert(1) viram um borrão
   sem contorno, então usam apenas dessaturação (+ brilho no caso da Fazenda
   CBM, cujo verde é escuro demais para o fundo quase preto da seção). */
.clientes__logo img[src*="fidhem"] {
  filter: grayscale(1) opacity(0.75) brightness(1.5) invert(0);
}

.clientes__logo:hover img[src*="fidhem"] {
  filter: grayscale(0) opacity(1);
}

.clientes__logo img[src*="fazenda-cbm"] {
  filter: grayscale(1) brightness(2.2) opacity(0.85);
}

.clientes__logo:hover img[src*="fazenda-cbm"] {
  filter: grayscale(0) brightness(1) opacity(1);
}

@media (prefers-reduced-motion: reduce) {
  .clientes__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .clientes__marquee {
    width: 100%;
    margin-left: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 700px) {
  .clientes__logo {
    width: 130px;
    height: 90px;
    margin-inline: var(--space-5);
  }
}