.logos { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: -1px; }
.logos::before { content: ""; position: absolute; top: 0; bottom: -60px; left: var(--frame); border-left: 1px solid var(--line); z-index: 1; }

/* Carrossel infinito: a trilha tem os logos duplicados e anda -50% em loop */
.logos__row {
  position: relative; display: block; height: 64px; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos__track {
  display: flex; align-items: center; gap: var(--logos-gap, 88px); width: max-content; height: 100%;
  padding-left: var(--logos-gap, 88px);
  animation: logos-marquee 40s linear infinite;
}
.logos__item { flex: none; font-size: 17px; color: var(--ink); white-space: nowrap; transition: filter .3s, opacity .3s; }

/* Hover: pausa, desfoca e mostra o CTA */
.logos__cta {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%) scale(.96);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 4px;
  background: var(--brand); color: #fff; font-weight: 500; font-size: 15px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.logos__row:hover .logos__track { animation-play-state: paused; }
.logos__row:hover .logos__item { filter: blur(4px); opacity: .45; }
.logos__row:hover .logos__cta { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@keyframes logos-marquee { to { transform: translateX(-50%); } }

@media (min-width: 1280px) {
  .logos__row { height: 84px; }
  .logos__item { font-size: 21px; }
  .logos { --logos-gap: 112px; }
}
@media (max-width: 760px) {
  .logos::before { display: none; }
  .logos { --logos-gap: 44px; }
  .logos__track { animation-duration: 24s; }
  .logos__cta { display: none; }
  .logos__row:hover .logos__item { filter: none; opacity: 1; }
}