/* ============================================================
   MARQUEE (marcas + clientes)
   ============================================================ */
.marquee { 
  overflow: hidden; 
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); 
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); 
}

.marquee__track { 
  display: flex; 
  gap: clamp(2rem, 5vw, 4.5rem); 
  width: max-content; 
  flex-wrap: nowrap;
  animation: marquee 34s linear infinite; 
}

/* Animação que translada exatamente metade da largura total da track */
@keyframes marquee { 
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

/* Opcional: Pausa a animação quando o usuário passa o mouse por cima */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.logo-chip {
  font-family: var(--font-body); 
  font-weight: 700; 
  font-size: 1.3rem;
  color: var(--slate-400); 
  letter-spacing: -.01em; 
  white-space: nowrap;
  filter: grayscale(1); 
  opacity: .75; 
  transition: opacity .3s, filter .3s;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: .5rem;
  height: 40px; 
  width: 140px; 
  flex-shrink: 0; /* Impede que as logos encolham */
}

.logo-chip:hover { 
  color: var(--blue-700); 
  opacity: 1; 
}

.logo-chip img { 
  max-height: 100%; 
  max-width: 100%; 
  width: auto; 
  height: auto; 
  object-fit: contain; 
  filter: brightness(0); 
  transition: filter .3s; 
}

.logo-chip:hover img { 
  filter: brightness(0) invert(15%) sepia(80%) saturate(1500%) hue-rotate(210deg); 
}