/* ==========================================================================
   HOME — duas seções novas
   1. Carrossel de provedores (mesmos logos das páginas de Parceiros)
   2. Painel de vantagens (bento)

   Carregar depois de site.css, tema.css, parceiros.css e parceiros-logos.css
   — o carrossel reaproveita as classes .pl[data-logo] daquele arquivo, então
   os logos não são baixados nem armazenados duas vezes.
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────────────
   1. PROVEDORES — colunas verticais em sentidos opostos
   Como na z-gaming: várias colunas lado a lado, cada uma correndo na
   vertical, alternando para cima e para baixo. Cada coluna tem o mesmo
   conteúdo duas vezes e desliza exatamente -50%: quando a animação
   reinicia, a segunda cópia está onde a primeira estava e o laço não
   tem emenda.
   ───────────────────────────────────────────────────────────────────────── */
.provcol{padding:110px 0;background:var(--black);overflow:hidden;}

.provcol-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;align-items:center;
}

.provcol-texto h2{font-size:clamp(26px,3.4vw,42px);line-height:1.14;margin:0;color:var(--ink);}
.provcol-texto p{font-size:16.5px;line-height:1.85;color:var(--muted);margin:20px 0 0;max-width:46ch;}
.provcol-texto .btn{margin-top:30px;}

/* A janela das colunas. As pontas de cima e de baixo somem num degradê,
   senão os logos aparecem cortados na borda. */
.provcol-janela{
  position:relative;
  height:520px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
}

.provcol-coluna{position:relative;overflow:hidden;}

.provcol-fita{
  display:flex;flex-direction:column;gap:16px;
  will-change:transform;
}
/* Ímpares sobem, pares descem — é a alternância de sentido. A duração
   varia um pouco de coluna para coluna para as fileiras não andarem
   em bloco, o que deixaria o movimento mecânico. */
.provcol-coluna:nth-child(odd)  .provcol-fita{animation:provcol-sobe 42s linear infinite;}
.provcol-coluna:nth-child(even) .provcol-fita{animation:provcol-desce 42s linear infinite;}
.provcol-coluna:nth-child(2) .provcol-fita{animation-duration:50s;}
.provcol-coluna:nth-child(3) .provcol-fita{animation-duration:38s;}
.provcol-coluna:nth-child(4) .provcol-fita{animation-duration:54s;}
.provcol-coluna:nth-child(5) .provcol-fita{animation-duration:46s;}

@keyframes provcol-sobe{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(0,-50%,0);}
}
/* Descer é a mesma fita começando deslocada: sem isso a coluna aparece
   vazia no primeiro segundo, enquanto o conteúdo entra por cima. */
@keyframes provcol-desce{
  from{transform:translate3d(0,-50%,0);}
  to{transform:translate3d(0,0,0);}
}

.provcol-card{
  flex:0 0 auto;
  height:96px;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#16161b;
}
.provcol-card .pl{
  display:block;width:100%;height:100%;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.82;
}

@media(prefers-reduced-motion:reduce){
  .provcol-fita{animation:none;}
}
@media(max-width:980px){
  .provcol-grid{grid-template-columns:1fr;gap:40px;}
  .provcol-texto p{max-width:none;}
}
@media(max-width:620px){
  .provcol{padding:70px 0;}
  .provcol-janela{height:400px;grid-template-columns:repeat(3,1fr);gap:11px;}
  .provcol-fita{gap:11px;}
  .provcol-card{height:74px;padding:13px;border-radius:13px;}
  /* Só três colunas cabem: as duas últimas saem, senão quebram para uma
     segunda fileira dentro de uma janela de altura fixa. */
  .provcol-coluna:nth-child(n+4){display:none;}
}


/* ─────────────────────────────────────────────────────────────────────────
   2. PAINEL DE VANTAGENS (bento)
   Mesmo conteúdo do painel da z-gaming, desenho mais limpo: uma família
   de caixas com o mesmo raio, a mesma borda e o mesmo respiro. Sem
   capturas de tela, sem molduras de celular — só ícone, número e rótulo.
   ───────────────────────────────────────────────────────────────────────── */
.vantagens{padding:110px 0;background:var(--black);}

.vantagens-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.v-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  min-height:168px;padding:26px 28px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--black-2),var(--black-3));
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.v-card:hover{border-color:rgba(125,148,255,.4);transform:translateY(-3px);}

.v-card .ico{width:30px;height:30px;color:#7d94ff;flex-shrink:0;}
.v-card .ico svg{width:100%;height:100%;display:block;}

.v-rotulo{
  font-family:'Space Grotesk',sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.v-numero{
  font-family:'new-science',sans-serif;font-weight:500;
  font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 6px;
}

/* O bloco-título, que no original é a palavra ADVANTAGES no meio da grade. */
.v-card.v-titulo{
  justify-content:center;align-items:flex-start;
  background:var(--purple-grad);border-color:transparent;
}
.v-card.v-titulo:hover{transform:none;border-color:transparent;}
.v-card.v-titulo h2{
  font-family:'new-science',sans-serif;font-weight:500;
  font-size:clamp(26px,3vw,38px);line-height:1.05;letter-spacing:-.02em;
  color:#fff;margin:0;
}
.v-card.v-titulo p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.8);margin:10px 0 0;}

/* Larguras: o painel da z-gaming é irregular de propósito. Aqui a
   irregularidade é controlada — só três tamanhos, sempre múltiplos da
   mesma coluna. */
.v-card.larga{grid-column:span 2;}
.v-card.alta{grid-row:span 2;}

/* Fileira de marcas dentro de um cartão (pagamentos, certificações). */
.v-marcas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.v-marcas .pl{
  width:52px;height:24px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:grayscale(1);opacity:.75;transition:.3s var(--ease);
}
.v-card:hover .v-marcas .pl{filter:grayscale(0);opacity:1;}

/* Pastilhas para listas curtas (temas, idiomas). */
.v-pills{display:flex;flex-wrap:wrap;gap:6px;}
.v-pill{
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:500;
  padding:5px 11px;border-radius:100px;
  color:var(--muted);border:1px solid var(--line);white-space:nowrap;
}

@media(max-width:980px){
  .vantagens-grid{grid-template-columns:repeat(2,1fr);}
  .v-card.larga{grid-column:span 2;}
  .v-card.alta{grid-row:auto;}
}
@media(max-width:560px){
  .vantagens{padding:70px 0;}
  .vantagens-grid{grid-template-columns:1fr;gap:10px;}
  .v-card,.v-card.larga{grid-column:auto;min-height:0;padding:22px 22px;}
}