/* ==========================================================================
   PARCEIROS — Provedores de jogos e Sistema de pagamento
   Carregar depois de site.css e tema.css.

   A regra de ouro destas páginas: o logotipo do parceiro e a descrição
   NUNCA dividem o mesmo plano. Cada cartão tem duas faixas separadas por
   uma linha — em cima a placa do logo, embaixo a descrição. Sem isso os
   logos, que têm pesos e cores muito diferentes entre si, se misturam
   com o texto e a grade vira ruído.
   ========================================================================== */

/* ── Menu suspenso "Parceiros" ───────────────────────────────────────────
   Vive no cabeçalho de TODAS as páginas, então fica aqui e este arquivo
   é carregado no site inteiro. */
.nav-drop{position:relative;}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;padding:4px 0;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;
  color:rgba(245,245,247,.78);transition:color .3s;
}
.nav-drop-btn svg{width:11px;height:11px;transition:transform .35s var(--ease);}
.nav-drop-btn:hover{color:#fff;}
.nav-drop:hover .nav-drop-btn svg,
.nav-drop.aberto .nav-drop-btn svg{transform:rotate(180deg);}

.nav-drop-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  margin-top:14px;min-width:232px;padding:8px;
  display:flex;flex-direction:column;gap:2px;
  border-radius:16px;
  background:rgba(23,24,29,.94);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(245,245,247,.1);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:5;
}
/* Ponte invisível entre o botão e o painel: sem ela o menu fecha quando
   o mouse atravessa os 14px de respiro. */
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.aberto .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.nav-drop-menu a{
  display:block;padding:11px 14px;border-radius:10px;
  font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:500;
  color:rgba(245,245,247,.78);white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav-drop-menu a:hover{background:rgba(245,245,247,.08);color:#fff;}
.nav-drop-menu a[aria-current="page"]{color:#fff;background:rgba(125,148,255,.14);}

/* O menu suspenso é sempre escuro, igual à pílula do cabeçalho. */
@media(max-width:980px){
  .nav-drop{display:none;}
}

.parc-page{background:var(--black);color:var(--ink);}

/* ── Reset herdado da home ───────────────────────────────────────────────
   Na home o rodapé é FIXO e ocupa a tela inteira (position:fixed,
   min-height:100vh, z-index:0): o conteúdo desliza por cima dele dentro
   de .content-shell, e é isso que faz o rodapé "aparecer" no fim da
   rolagem. Páginas internas não têm esse invólucro — sem desfazer o
   rodapé fixo, ele cobre a página e só ele aparece.
   As páginas de solução resolvem com .sol-page; aqui vale o mesmo. */
.parc-page footer{position:static;min-height:0;}
.parc-page .slogan-band{flex:0 0 auto;padding:80px 24px;}

/* Cada seção precisa de fundo próprio e z-index, senão sobra fresta. */
.parc-page > section{position:relative;z-index:1;background:var(--black);}

/* Sem hero de tela cheia, a pílula do menu já nasce com fundo — senão o
   conteúdo passa por baixo da barra e o texto some. */
.parc-page .nav-inner{
  max-width:1000px;padding:7px 18px 7px 22px;
  background:rgba(23,24,29,.82);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-color:rgba(245,245,247,.1);box-shadow:0 24px 50px -24px rgba(0,0,0,.65);
}
.parc-page .nav-logo-word{height:44px;}

/* ── Cabeçalho da página ─────────────────────────────────────────────── */
.parc-hero{position:relative;padding:190px 0 70px;overflow:hidden;background:var(--black);}
.parc-crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--muted);margin-bottom:26px;
}
.parc-crumb a{color:var(--muted);transition:color .3s;}
.parc-crumb a:hover{color:var(--ink);}
.parc-hero h1{
  font-family:'new-science',sans-serif;font-weight:500;
  font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.02em;
  margin:0;max-width:18ch;color:var(--ink);text-wrap:balance;
}
.parc-lead{
  font-size:17px;line-height:1.8;color:var(--muted);
  margin:22px 0 0;max-width:62ch;text-wrap:pretty;
}

/* ── Bloco de texto intermediário ────────────────────────────────────── */
.parc-bloco{padding:10px 0 70px;}
.parc-bloco-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;
}
.parc-bloco-grid h2{
  font-size:clamp(24px,3vw,38px);line-height:1.15;margin:0;color:var(--ink);text-wrap:balance;
}
.parc-bloco-grid p{
  font-size:16.5px;line-height:1.85;color:var(--muted);margin:0;text-wrap:pretty;
}
@media(max-width:860px){
  .parc-bloco-grid{grid-template-columns:1fr;gap:20px;}
  .parc-bloco{padding:0 0 46px;}
}

/* ── Barra de filtros ────────────────────────────────────────────────── */
.parc-filtros{
  display:flex;flex-wrap:wrap;gap:9px;
  padding:0 0 46px;
}
.parc-filtro{
  padding:9px 18px;border-radius:100px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;
  color:var(--muted);background:transparent;
  border:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.parc-filtro:hover{color:var(--ink);border-color:rgba(125,148,255,.5);}
.parc-filtro[aria-pressed="true"]{
  color:#fff;border-color:transparent;background:var(--purple-grad);
}

/* ── Grade ───────────────────────────────────────────────────────────── */
.parc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:18px;padding-bottom:120px;
}
/* Variante de seis colunas: os meios de pagamento são poucos e cabem
   numa linha só. Sem o auto-fill, senão o número por linha muda com a
   largura da tela e os seis se quebram em duas fileiras desiguais. */
.parc-grid-6{grid-template-columns:repeat(6,1fr);}
@media(max-width:1000px){ .parc-grid-6{grid-template-columns:repeat(3,1fr);} }
@media(max-width:560px){  .parc-grid-6{grid-template-columns:repeat(2,1fr);} }

/* Com a coluna mais estreita, a placa encolhe junto para o cartão não
   virar um retângulo alto e vazio. */
.parc-grid-6 .parc-logo{height:92px;padding:18px 16px;}

.parc-card{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:18px;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);
}
.parc-card:hover{border-color:rgba(125,148,255,.45);transform:translateY(-3px);}
.parc-card[hidden]{display:none;}

/* Faixa 1 — a placa do logo. Fundo próprio e altura fixa: é o que
   garante que todos os logos ocupem o mesmo palco, independente da
   proporção de cada arquivo. */
.parc-logo{
  display:flex;align-items:center;justify-content:center;
  height:118px;padding:22px 24px;
  /* Cor chapada, igual nos dois temas: é ela que está compositada dentro
     de cada WebP em parceiros-logos.css. Mudar aqui exige regravar os
     logos, senão aparece um retângulo de cor errada em volta de cada um. */
  background:#16161b;
  border-bottom:1px solid var(--line);
}
/* O logo é fundo de um bloco, não <img>: assim o arquivo vive embutido no
   CSS e a página não depende de 36 requisições nem de arquivos soltos. */
.parc-logo .pl{
  display:block;width:100%;height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.94;transition:opacity .4s var(--ease);
}
.parc-card:hover .parc-logo .pl{opacity:1;}

/* Faixa 2 — a descrição. Nunca encosta no logo. */
.parc-desc{padding:16px 18px 18px;}
.parc-tags{display:flex;flex-wrap:wrap;gap:6px;}
.parc-tag{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;
  color:rgba(125,148,255,.9);background:rgba(125,148,255,.1);
  white-space:nowrap;
}
.parc-tag[data-cat="cassino-ao-vivo"]{color:rgba(161,78,221,.95);background:rgba(161,78,221,.12);}
.parc-tag[data-cat="esportes"]{color:rgba(100,196,150,.95);background:rgba(100,196,150,.12);}
.parc-tag[data-cat="pesca"]{color:rgba(221,170,78,.95);background:rgba(221,170,78,.12);}

/* Estado vazio do filtro. */
.parc-vazio{
  grid-column:1/-1;padding:60px 0;text-align:center;
  color:var(--muted);font-size:15px;
}

/* ── Bloco de fechamento ─────────────────────────────────────────────── */
.parc-nota{
  padding:0 0 110px;
}
.parc-nota-caixa{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--black-2),var(--black-3));
  padding:38px 40px;
}
.parc-nota-caixa h2{font-size:clamp(22px,2.6vw,30px);line-height:1.2;margin:0 0 12px;color:var(--ink);}
.parc-nota-caixa p{font-size:15.5px;line-height:1.8;color:var(--muted);margin:0 0 22px;max-width:70ch;}

/* ── Tema claro ──────────────────────────────────────────────────────── */
/* A placa do logo continua escura no tema claro — é o que garante que os
   logos brancos (Evolution, Playtech, NetEnt…) continuem legíveis. */
html.tema-claro .parc-logo{background:#16161b;}
html.tema-claro .parc-logo .pl{opacity:1;}
html.tema-claro .parc-tag{color:#4a5fd0;background:rgba(74,95,208,.1);}
html.tema-claro .parc-tag[data-cat="cassino-ao-vivo"]{color:#8a3ec2;background:rgba(138,62,194,.1);}
html.tema-claro .parc-tag[data-cat="esportes"]{color:#2f8a5e;background:rgba(47,138,94,.1);}
html.tema-claro .parc-tag[data-cat="pesca"]{color:#a8781f;background:rgba(168,120,31,.12);}

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media(max-width:760px){
  .parc-hero{padding:140px 0 50px;}
  .parc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding-bottom:80px;}
  .parc-logo{height:92px;padding:18px 18px;}
  .parc-desc{padding:13px 14px 15px;}
  .parc-nota-caixa{padding:28px 24px;}
}