/* ==========================================================================
   FAIXA DE PROVEDORES — remontada com os PNGs individuais
   Antes era uma imagem composta só (provedores-img.css), que borrava ao
   ampliar e não deixava trocar um logo isolado. Agora cada marca é um
   arquivo em assets/provedores/, então a faixa fica nítida em qualquer
   tamanho e dá pra mexer numa marca sem mexer nas outras.

   Comportamento mantido igual ao de antes: cinza, correndo sem parar, sem
   hover e sem desacelerar.

   Os PNGs não são padronizados — uns vêm brancos, outros dourados, alguns
   com partes escuras (eBet, Play'n GO, Joker, Spinix). O filtro abaixo é o
   que uniformiza tudo em cinza claro. Se quiser ajustar o tom, mexa só em
   --faixa-filtro.
   ========================================================================== */

.faixa{
  --faixa-altura:67px;          /* era 48px; +40% como o Marco pediu */
  --faixa-gap:64px;
  --faixa-filtro:grayscale(1) brightness(1.45) contrast(.62) opacity(.72);
  position:relative;
  overflow:hidden;
  padding:34px 0;
  background:var(--black,#08080a);
}

/* fade nas pontas, pra marca não aparecer/sumir cortada */
.faixa-janela{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  overflow:hidden;
}

.faixa-pista{
  display:flex;
  width:max-content;
  animation:faixa-corre 60s linear infinite;
  will-change:transform;
}

.faixa-grupo{
  display:flex;
  align-items:center;
  gap:var(--faixa-gap);
  padding-right:var(--faixa-gap);
  flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   DIMENSIONAMENTO POR PESO DE TINTA — não por altura igual.

   Altura igual pra todo mundo é o erro clássico: um logo que preenche a
   arte inteira fica gigante ao lado de um que tem muita margem em volta.
   O olho não lê altura, lê mancha — quanta tinta a marca ocupa.

   Então cada marca tem um fator --k, multiplicado sobre a altura base.
   Marca leve e com muito ar sobe; marca pesada e cheia desce.
   O max-width impede que um logo muito comprido domine a faixa mesmo
   estando com a mancha certa.
   -------------------------------------------------------------------------- */
.faixa-grupo img{
  display:block;
  height:calc(var(--faixa-altura) * var(--k,1));
  width:auto;
  max-width:calc(var(--faixa-altura) * 4.4);
  object-fit:contain;
  flex:0 0 auto;
  filter:var(--faixa-filtro);
}

/* ATENÇÃO ao seletor: ancore no src, não em data-marca.
   A primeira versão disto usava img[data-marca="X"], atributo que os <img>
   da faixa nunca tiveram — as regras não batiam em nada e os ajustes de
   tamanho não surtiam efeito nenhum. [src$="X.png"] pega o arquivo direto e
   vale para o grupo original e para a cópia duplicada. */

/* -- as três que estavam grandes demais ---------------------------------- */
.faixa-grupo img[src$="WorldMatch.png"]{--k:.60;}
.faixa-grupo img[src$="Spribe.png"]{--k:.62;}
.faixa-grupo img[src$="Jili.png"]{--k:.52;}

/* As outras 23 ficam na altura base. Se alguma pedir ajuste, acrescente uma
   linha aqui no mesmo formato — uma marca por linha, fácil de achar. */

/* o laço fecha sem emenda porque a pista tem dois grupos idênticos
   e anda exatamente metade de si mesma */
@keyframes faixa-corre{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}
}

@media (max-width:900px){
  .faixa{--faixa-altura:52px;--faixa-gap:44px;padding:26px 0;}
  .faixa-pista{animation-duration:48s;}
}
@media (max-width:560px){
  .faixa{--faixa-altura:42px;--faixa-gap:34px;padding:20px 0;}
}

@media (prefers-reduced-motion:reduce){
  .faixa-pista{animation:none;}
}