/* ==========================================================================
   MARQUEE — esteira infinita de logos
   Prefixo: marquee-
   Tokens usados: --bg --fg-muted --sec-gap
   Sem JavaScript. O loop é CSS puro: o trilho anda -50%, que é a largura
   exata de um dos dois tracks idênticos.
   ========================================================================== */

.marquee-strip{
  background:var(--bg);
  overflow:hidden;
  /* 16px a menos embaixo: os logos já têm respiro óptico próprio e a
     seção seguinte encosta bem assim. */
  padding:var(--sec-gap) 0 calc(var(--sec-gap) - 16px);

  --marquee-dur:40s;        /* 7 logos ≈ 40s. Mais logos, mais tempo. */
  --marquee-gap:64px;
  --marquee-h:26px;         /* altura padrão de wordmark */
}

.marquee-label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-muted);text-align:center;
  margin-bottom:clamp(32px,5vh,48px);
}

.marquee{overflow:hidden}

.marquee-rail{
  display:flex;
  width:max-content;
  animation:marqueeRun var(--marquee-dur) linear infinite;
}

.marquee-track{
  display:flex;align-items:center;
  gap:var(--marquee-gap);
  padding-right:var(--marquee-gap);   /* mantém o gap na emenda entre as cópias */
}

.marquee-logo{
  height:var(--marquee-h);
  width:auto;max-width:140px;
  object-fit:contain;
  opacity:.5;transition:opacity .3s;
}
.marquee-logo:hover{opacity:1}

/* Selo quadrado, não wordmark: a 26px de altura ficaria minúsculo ao lado
   dos logos largos. Precisa de mais altura para pesar o mesmo na fileira.
   Marque na classe, nunca por seletor de alt — o alt é conteúdo, não gancho. */
.marquee-logo--tall{height:calc(var(--marquee-h) * 1.55)}

/* Pausa no hover: quem quer ler um nome consegue parar a esteira. */
.marquee-strip:hover .marquee-rail{animation-play-state:paused}

@keyframes marqueeRun{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media(prefers-reduced-motion:reduce){
  .marquee-rail{animation:none}
  .marquee-logo{opacity:.72}
}

@media(max-width:640px){
  .marquee-strip{--marquee-gap:40px;--marquee-h:22px}
}