/* ============================================================
   Clientes component: infinite auto-scrolling logo marquee.
   ============================================================ */

.clientes {
  background: var(--black);
  color: var(--white);
  padding: 6.5rem 0 8.125rem;
  overflow: hidden;
}
.clientes__eyebrow {
  text-align: center;
  color: var(--green);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 3rem;
}
.clientes__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.clientes__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clientesScroll 70s linear infinite;
}
.clientes__track img {
  flex: 0 0 auto;
  height: 1.875rem;
  width: auto;
  margin: 0 2.625rem;
}
.clientes__marquee:hover .clientes__track {
  animation-play-state: paused;
}
@keyframes clientesScroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clientes__track {
    animation-play-state: paused;
  }
}

@media (max-width: 640px) {
  .clientes__eyebrow {
    margin-bottom: 2.25rem;
  }
  .clientes__track img {
    height: 1.5rem;
    margin: 0 1.75rem;
  }
}