/* esteira.css — logos dos escritórios parceiros */

/* A faixa tem altura declarada, não medida: é o mesmo valor que o showcase desconta */
.esteira{
  height:var(--esteira-h);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(8px,1.4vh,16px);
  border-top:1px solid var(--line-soft);
  overflow:hidden;
}
.esteira__rotulo{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-2);
}

.esteira__janela{
  display:flex;gap:clamp(40px,4.4vw,62px);
  /* as pontas esmaecem: a marca entra e sai de cena em vez de ser cortada */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.esteira__trilha{
  display:flex;align-items:center;gap:clamp(40px,4.4vw,62px);flex:none;
  animation:esteira-corre 64s linear infinite;
}
.esteira:hover .esteira__trilha{animation-play-state:paused}
@keyframes esteira-corre{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ATENÇÃO ao caminho de --arte: url() dentro de variável CSS é resolvida a partir do */
.logo{
  flex:none;
  height:calc(var(--alt,clamp(40px,6.2vh,60px)) * var(--escala,1));
  width:calc(var(--alt,clamp(40px,6.2vh,60px)) * var(--escala,1) * var(--prop,3));
  background-color:var(--muted);
  -webkit-mask:var(--arte) center/contain no-repeat;
          mask:var(--arte) center/contain no-repeat;
  transition:background-color 300ms var(--ease);
}
.logo:hover{background-color:var(--fg)}

@media (prefers-reduced-motion:reduce){ .esteira__trilha{animation:none} }
/* No celular a página volta a rolar, e a faixa não precisa mais de altura fixa. */
@media (max-width:900px){
  .esteira{height:auto;padding-block:clamp(22px,2.6vw,32px);gap:clamp(16px,2vw,24px)}
}
@media (max-width:760px){ .logo{--alt:38px} }