/* ==========================================================================
   ESTEIRA — carrossel infinito de logos (home, a-emcomjunto, varejo).
   Aqui só a estrutura/comportamento; cor do .slot-logo muda por página
   porque cada uma usa a esteira sobre um fundo diferente (claro/escuro) —
   ver css/pages/*.css.
   ========================================================================== */
.esteira{margin-top:clamp(40px,5vw,64px);position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.esteira-fita{display:flex;width:max-content;gap:clamp(28px,3.4vw,52px);
  animation:desliza 42s linear infinite;will-change:transform}
.esteira:hover .esteira-fita{animation-play-state:paused}
@keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.slot-logo{width:clamp(104px,9vw,132px);aspect-ratio:1;border-radius:50%;flex:none;
  display:grid;place-items:center;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.slot-logo:hover{transform:translateY(-4px)}
.slot-logo span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .esteira-fita{animation:none}
}