/* =========================================================================
   Jonbet — visual das seções da home (porte 1:1 do index.html aprovado)
   Classes mantidas idênticas ao design-fonte. Carregado no front e no editor.
   NÃO editar à mão para gerar conflito: este é o source of truth do visual.
   ========================================================================= */

/* base / tokens ---------------------------------------------------------- */
:root {
  --jb-green:#2BE36F; --jb-dark:#0A0E18; --jb-dark2:#0E131E;
  --jb-card:#141A26; --jb-border:#222A39; --jb-muted:#9E9E9E;
}
body.home, body.page-template-default, .jb-root {
  background:#0A0E18; color:#FFFFFF;
}
.jb-root * { box-sizing:border-box; }
.jb-root ::selection { background:#2BE36F; color:#0A0E18; }
.jb-root a { color:inherit; text-decoration:none; }
.jb-root img { max-width:100%; }
.jb-root .display { font-family:'Anton','Inter',sans-serif; font-weight:400; }

/* inline line-icon helper (Lucide/Tabler, MIT) */
.ico-line { display:block; color:#2BE36F; }
.ico-line svg { display:block; width:100%; height:100%; }

/* layout helpers --------------------------------------------------------- */
.jb-root .wrap { max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }
.jb-root .eyebrow {
  display:inline-block; background:rgba(43,227,111,.1); color:#2BE36F;
  font-weight:800; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; border:1px solid rgba(43,227,111,.28); margin-bottom:18px;
}
.jb-root h1.display, .jb-root h2.display { letter-spacing:.005em; overflow-wrap:break-word; word-break:normal; hyphens:auto; }
.jb-root h2.display { font-size:clamp(1.7rem,6vw,3.2rem); line-height:1.04; color:#fff; margin-bottom:22px; }

/* buttons ---------------------------------------------------------------- */
/* PRIMÁRIO — pílula verde sólida, texto escuro. Sem "botão dentro de botão":
   quando o markup é wp:button, o wrapper .wp-block-button vira só layout e o
   <a> interno (.wp-element-button) é a pílula verde de fato. Quando é um <a>
   solto com .btn-primary, ele próprio é a pílula. */
.jb-root a.btn-primary,
.jb-root span.btn-primary,
.jb-root .btn-primary > .wp-block-button__link,
.jb-root .btn-primary.wp-block-button > .wp-element-button {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#2BE36F; color:#0A0E18; border:none; border-radius:999px;
  padding:15px 32px; font-weight:800; font-size:1.02rem; line-height:1.1; letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(43,227,111,.26); text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s; cursor:pointer;
}
.jb-root a.btn-primary:hover,
.jb-root .btn-primary > .wp-block-button__link:hover,
.jb-root .btn-primary.wp-block-button > .wp-element-button:hover {
  background:#33ED78; color:#0A0E18; transform:translateY(-2px); box-shadow:0 12px 32px rgba(43,227,111,.4);
}
/* wrapper do bloco WP vira apenas contêiner: zera fundo/borda/padding herdados */
.jb-root .btn-primary.wp-block-button,
.jb-root .btn-ghost.wp-block-button { background:transparent; border:none; box-shadow:none; padding:0; border-radius:0; }

/* SECUNDÁRIO — escuro com borda fina, consistente com o primário */
.jb-root a.btn-ghost,
.jb-root span.btn-ghost,
.jb-root .btn-ghost > .wp-block-button__link,
.jb-root .btn-ghost.wp-block-button > .wp-element-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#101622; color:#EDF1F6; border:1.5px solid #2A3242; border-radius:999px;
  padding:15px 30px; font-weight:700; font-size:1.02rem; line-height:1.1; text-decoration:none;
  transition:border-color .15s, background .15s, color .15s; cursor:pointer;
}
.jb-root a.btn-ghost:hover,
.jb-root .btn-ghost > .wp-block-button__link:hover,
.jb-root .btn-ghost.wp-block-button > .wp-element-button:hover {
  border-color:#2BE36F; color:#fff; background:#141C2A;
}

/* hero ------------------------------------------------------------------- */
.jb-root.hero, .jb-root .hero { position:relative; overflow:hidden; padding:clamp(24px,3.4vw,44px) 0 clamp(22px,3vw,38px); }
.jb-root .hero-glow {
  position:absolute; top:-14%; right:-6%; width:min(70vw,640px); height:130%;
  background:radial-gradient(58% 58% at 64% 40%, rgba(43,227,111,.16), rgba(43,227,111,0) 72%); z-index:0;
}
.jb-root .hero-inner { position:relative; z-index:1; }
.jb-root .hero-grid { display:flex; flex-wrap:wrap; gap:clamp(22px,3.5vw,44px); align-items:stretch; }
.jb-root .hero-text { flex:1.4 1 420px; min-width:280px; display:flex; flex-direction:column; align-items:flex-start; }
.jb-root .hero-text .eyebrow { margin-bottom:16px; }
.jb-root h1.display {
  font-size:clamp(1.7rem,5vw,3.5rem); line-height:1.07; color:#fff;
  margin-bottom:clamp(16px,2vw,22px); max-width:640px; text-wrap:balance;
}
.jb-root h1.display .acc { color:#2BE36F; }
.jb-root .hero-text p.lede { font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.6; color:#B9C0CE; max-width:560px; margin-bottom:22px; }
.jb-root .hero-text p.lede strong { color:#EDF1F6; font-weight:700; }
.jb-root .hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
.jb-root .microcopy { font-size:.84rem; color:#7C8597; letter-spacing:.01em; }
.jb-root .microcopy strong { color:#2BE36F; font-weight:800; }

.jb-root .offer-card-wrap { flex:1 1 320px; min-width:280px; max-width:420px; position:relative; }
/* Card de cashback maior no desktop (≥1024px); compacto no mobile */
@media (min-width:1024px) {
  .jb-root .offer-card-wrap { flex:1.05 1 460px; max-width:560px; }
  .jb-root .offer-card { padding:38px 40px; border-radius:24px; }
  .jb-root .offer-card .gem { top:20px; right:20px; width:44px; height:44px; }
  .jb-root .offer-tag { font-size:.76rem; padding:7px 15px; margin-bottom:22px; }
  .jb-root .offer-big { gap:14px; margin-bottom:12px; }
  .jb-root .offer-big .num { font-size:5.6rem; }
  .jb-root .offer-big .word { font-size:1.55rem; }
  .jb-root .offer-card p { font-size:1.1rem; line-height:1.55; margin-bottom:20px; }
  .jb-root .offer-note { padding-top:18px; }
  .jb-root .offer-note p { font-size:.92rem; }
}
.jb-root .offer-card {
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(160deg,#141A26,#0C111B); border:1px solid rgba(43,227,111,.45);
  border-radius:20px; padding:clamp(20px,2.4vw,28px); box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.jb-root .offer-card .gem { position:absolute; top:14px; right:14px; width:36px; height:36px; opacity:.9; }
.jb-root .offer-tag {
  display:inline-block; align-self:flex-start; font-weight:800; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:#0A0E18; background:#2BE36F; padding:6px 12px; border-radius:999px; margin-bottom:16px;
}
.jb-root .offer-big { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.jb-root .offer-big .num { font-size:clamp(2.8rem,6vw,4rem); line-height:.85; letter-spacing:-.01em; color:#2BE36F; }
.jb-root .offer-big .word { font-weight:800; font-size:1.3rem; color:#fff; text-transform:uppercase; }
.jb-root .offer-card p { font-size:1rem; line-height:1.5; color:#C7CDD9; margin-bottom:16px; }
.jb-root .offer-card p strong { color:#fff; }
.jb-root .offer-note { border-top:1px solid #222A39; padding-top:14px; margin-top:18px; width:100%; }
.jb-root .offer-note p { font-size:.86rem; line-height:1.5; color:#8A93A6; margin-bottom:0; }
.jb-root .offer-trust { display:flex; flex-wrap:wrap; gap:8px; width:100%; margin-top:16px; }
.jb-root .offer-trust span { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:#C7CDD9; background:rgba(43,227,111,.06); border:1px solid rgba(43,227,111,.28); border-radius:999px; padding:6px 11px; }
.jb-root .offer-trust span svg { flex:0 0 auto; width:13px; height:13px; color:#2BE36F; }

/* marquee ---------------------------------------------------------------- */
.jb-root.marquee, .jb-root .marquee { background:#0B0F19; border-top:1px solid #1C2230; border-bottom:1px solid #1C2230; overflow:hidden; max-width:100%; }
/* loop infinito sem emenda: 2 grupos idênticos lado a lado, translate -50% */
.jb-root .marquee-track { display:flex; flex-wrap:nowrap; width:max-content; will-change:transform; animation:jb-marquee 32s linear infinite; }
.jb-root .marquee:hover .marquee-track { animation-play-state:paused; }
.jb-root .marquee-group { display:flex; flex:0 0 auto; align-items:center; }
.jb-root .marquee-item { font-weight:700; font-size:.98rem; color:#9BA3B2; text-transform:uppercase; letter-spacing:.02em; padding:11px 24px; transition:color .15s; }
.jb-root a.marquee-item:hover { color:#2BE36F; }
.jb-root .marquee-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#2BE36F; }
@keyframes jb-marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .jb-root .marquee-track { animation:none; } }

/* trust strip ------------------------------------------------------------ */
.jb-root.trust, .jb-root .trust { padding:clamp(20px,3.2vw,34px) 0; }
.jb-root .trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.jb-root .trust-card {
  background:#141A26; border:1px solid #222A39; border-radius:14px; padding:18px 20px;
  display:flex; align-items:center; gap:14px;
}
.jb-root .trust-card .n { font-weight:900; font-size:1.4rem; color:#2BE36F; line-height:1; }
.jb-root .trust-card .t { font-weight:700; font-size:.94rem; color:#EDEDED; line-height:1.25; }

/* categorias icon-strip -------------------------------------------------- */
.jb-root .cat-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.jb-root a.cat-card { cursor:pointer; }
.jb-root .cat-card {
  background:#141A26; border:1px solid #222A39; border-radius:16px;
  padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center;
  transition:transform .15s, border-color .15s, box-shadow .15s, background .15s;
}
.jb-root .cat-card:hover { transform:translateY(-3px); border-color:rgba(43,227,111,.5); box-shadow:0 12px 28px rgba(0,0,0,.4); background:#161D2B; }
.jb-root .cat-ico {
  width:48px; height:48px; flex:0 0 auto; border-radius:14px; color:#2BE36F;
  background:rgba(43,227,111,.1); border:1px solid rgba(43,227,111,.38);
  display:flex; align-items:center; justify-content:center;
}
.jb-root .cat-ico svg { display:block; width:24px; height:24px; }
.jb-root .cat-card .cl { font-weight:700; font-size:.86rem; color:#EDF1F6; letter-spacing:.01em; line-height:1.2; }
@media (max-width:760px) {
  .jb-root .cat-strip {
    display:flex; gap:11px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; padding-bottom:6px;
    scrollbar-width:none; margin:0 calc(-1 * clamp(20px,5vw,56px)); padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px);
  }
  .jb-root .cat-strip::-webkit-scrollbar { display:none; }
  .jb-root .cat-card { flex:0 0 118px; scroll-snap-align:start; }
}

/* sections generic ------------------------------------------------------- */
/* .jb-root e .band ficam no MESMO elemento <section> — por isso os seletores
   precisam casar no mesmo nó (.jb-root.band), não só como descendente. Sem
   isso o padding nunca aplicava e as pílulas (eyebrow) encostavam na seção
   anterior. */
.jb-root.band, .jb-root section.band, .jb-root .band { padding:clamp(22px,3vw,40px) 0; }
.jb-root.band--dark, .jb-root .band--dark { background:#0E131E; border-top:1px solid #161C28; border-bottom:1px solid #161C28; }
.jb-root.band--line, .jb-root .band--line { border-top:1px solid #161C28; }
/* a primeira pílula/heading de cada seção nunca encosta no topo da seção */
.jb-root.band > .wrap > .eyebrow:first-child,
.jb-root.band > .faq-wrap > .eyebrow:first-child { margin-top:0; }

/* verdict ---------------------------------------------------------------- */
/* Seção "Nossa nota" mais compacta: menos altura, sem plaqueta verde atrás do
   título (o heading segue o padrão das outras seções — branco no escuro). */
.jb-root #veredito { padding:clamp(20px,2.6vw,34px) 0; }
.jb-root #veredito h2.display { background:none; color:#fff; padding:0; border-radius:0; margin-bottom:20px; }
.jb-root .verdict-grid { display:flex; flex-wrap:wrap; gap:clamp(18px,2.4vw,30px); align-items:stretch; }
.jb-root .verdict-card {
  flex:1 1 240px; min-width:230px; background:linear-gradient(160deg,#141A26,#0C111B);
  border:1px solid rgba(43,227,111,.4); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.45);
  padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column; justify-content:center;
}
.jb-root .verdict-card .lbl { font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8C8C8C; margin-bottom:6px; }
.jb-root .verdict-score { display:flex; align-items:baseline; gap:4px; margin-bottom:10px; }
.jb-root .verdict-score .big { font-size:clamp(2.7rem,8vw,4.3rem); line-height:.82; letter-spacing:-.02em; color:#2BE36F; }
.jb-root .verdict-score .of { font-weight:800; font-size:clamp(1.4rem,3.4vw,2rem); color:#5C5C5C; font-family:'Inter',sans-serif; }
.jb-root .verdict-card p { font-size:.92rem; line-height:1.5; color:#C4C4C4; }
.jb-root .verdict-pros { list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid #222A39; display:flex; flex-direction:column; gap:10px; }
.jb-root .verdict-pros li { display:flex; align-items:center; gap:9px; font-size:.9rem; color:#DCDCDC; }
.jb-root .verdict-pros li svg { flex:0 0 auto; width:16px; height:16px; color:#2BE36F; }
.jb-root .bars { flex:2 1 440px; min-width:250px; display:flex; flex-direction:column; gap:13px; justify-content:center; }
.jb-root .bar-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:5px; }
.jb-root .bar-head .name { font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; color:#EDEDED; }
.jb-root .bar-head .val { font-weight:800; font-size:1.2rem; color:#2BE36F; }
.jb-root .bar-head .val small { font-size:.76rem; color:#666; }
.jb-root .bar-track { height:10px; background:#1A2130; border-radius:999px; overflow:hidden; }
.jb-root .bar-fill { height:100%; background:#2BE36F; border-radius:999px; }
.jb-root .bar-note { font-size:.82rem; color:#8E8E8E; margin-top:4px; }

/* USP / generic cards ---------------------------------------------------- */
.jb-root .cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:18px; }
.jb-root .usp-card {
  background:#141A26; border:1px solid #222A39; border-radius:18px; padding:26px;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.jb-root .usp-card:hover { transform:translateY(-3px); border-color:rgba(43,227,111,.5); box-shadow:0 12px 30px rgba(0,0,0,.4); }
.jb-root .usp-ico {
  width:54px; height:54px; background:rgba(43,227,111,.1); border:1px solid rgba(43,227,111,.4);
  border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.jb-root .usp-card h3 { font-weight:800; font-size:1.32rem; letter-spacing:-.01em; color:#fff; margin-bottom:9px; line-height:1.18; }
.jb-root .usp-card p { font-size:.92rem; line-height:1.55; color:#9E9E9E; }
/* título à DIREITA do mini-ícone (ícone + h3 na mesma linha; texto abaixo).
   align-items:start = ícones alinhados no TOPO entre cards (mesma altura mesmo
   com títulos de 1 ou 2 linhas); h3 centralizado vertical em relação ao ícone. */
.jb-root .usp-card { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start; }
.jb-root .usp-card .usp-ico { margin-bottom:0; align-self:center; }
.jb-root .usp-card h3 { margin-bottom:0; align-self:center; min-height:2.36em; display:flex; align-items:center; }
.jb-root .usp-card p { grid-column:1 / -1; margin-top:12px; }

/* bonus / vip ------------------------------------------------------------ */
.jb-root .lede-block { font-size:1.02rem; line-height:1.6; color:#A8A8A8; max-width:none; margin-bottom:22px; }
.jb-root .lede-block strong { color:#EDEDED; }
.jb-root .two-col { display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,32px); align-items:stretch; }
.jb-root .vip-card { flex:1 1 300px; min-width:250px; background:#141A26; border:1px solid #222A39; border-radius:20px; padding:clamp(24px,3vw,32px); }
.jb-root .card-ico {
  display:flex; align-items:center; justify-content:center; width:50px; height:50px; margin-bottom:16px;
  border-radius:13px; color:#2BE36F; background:rgba(43,227,111,.1); border:1px solid rgba(43,227,111,.38);
}
.jb-root .card-ico svg { display:block; width:26px; height:26px; }
.jb-root a.vip-card { transition:transform .15s, border-color .15s, box-shadow .15s; cursor:pointer; }
.jb-root a.vip-card:hover { transform:translateY(-3px); border-color:rgba(43,227,111,.5); box-shadow:0 12px 30px rgba(0,0,0,.4); }
.jb-root .vip-card h3 { font-weight:800; font-size:1.25rem; letter-spacing:-.01em; color:#2BE36F; margin-bottom:18px; }
.jb-root .vip-list { list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:26px; padding:0; }
.jb-root .vip-list li { display:flex; gap:12px; align-items:flex-start; }
.jb-root .check {
  flex:0 0 auto; width:24px; height:24px; border-radius:8px; background:#2BE36F;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.jb-root .vip-list li span.txt { font-size:.98rem; line-height:1.45; color:#DCDCDC; }
.jb-root .vip-list li span.txt strong { color:#fff; }
.jb-root .chart-card {
  flex:1.3 1 360px; min-width:250px; background:#141A26; border:1px solid #222A39; border-radius:20px;
  padding:clamp(24px,3vw,32px); display:flex; flex-direction:column;
}
.jb-root .chart-card h3 { font-weight:800; font-size:1.25rem; letter-spacing:-.01em; color:#fff; margin-bottom:6px; }
.jb-root .chart-card .sub { font-size:.86rem; color:#8C8C8C; margin-bottom:22px; }
.jb-root .chart { flex:1 1 0; display:flex; align-items:flex-end; gap:clamp(6px,1.3vw,12px); }
.jb-root .chart .col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:9px; }
.jb-root .chart .bar {
  width:100%; background:#161C28; border-top:4px solid #2BE36F; border-right:1px solid #222A39;
  border-bottom:1px solid #222A39; border-left:1px solid #222A39; border-radius:10px 10px 6px 6px;
  display:flex; align-items:flex-start; justify-content:center; padding-top:8px;
}
.jb-root .chart .bar span { font-weight:800; font-size:clamp(.9rem,2.3vw,1.2rem); color:#2BE36F; }
.jb-root .chart .lbl { font-weight:700; font-size:clamp(.58rem,1.5vw,.74rem); text-transform:uppercase; letter-spacing:.02em; color:#C4C4C4; text-align:center; min-height:2.6em; }
.jb-root .chart .col--top .bar { background:linear-gradient(#56EE8C,#2BE36F); border:none; border-radius:12px 12px 6px 6px; box-shadow:0 10px 26px rgba(43,227,111,.28); }
.jb-root .chart .col--top .bar span { font-weight:900; font-size:clamp(1rem,2.6vw,1.5rem); color:#0A0E18; }
.jb-root .chart .col--top .lbl { color:#2BE36F; line-height:1.2; }
.jb-root .chart .col--top .lbl small { color:#8C8C8C; font-weight:600; }

/* games ------------------------------------------------------------------ */
.jb-root .games-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.jb-root .game-card {
  background:#141A26; border:1px solid #222A39; border-radius:18px; overflow:hidden; display:block;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.jb-root .game-card:hover { transform:translateY(-3px); border-color:rgba(43,227,111,.5); box-shadow:0 12px 30px rgba(0,0,0,.4); }
.jb-root .game-thumb {
  aspect-ratio:3/4;
  background:radial-gradient(120% 90% at 50% 18%, rgba(43,227,111,.14), rgba(43,227,111,0) 60%), linear-gradient(160deg,#161D2B,#0E131E);
  display:flex; align-items:center; justify-content:center; padding:12px; position:relative;
}
.jb-root .game-thumb .tag {
  position:absolute; top:10px; left:10px; font-family:'Courier New',monospace; font-size:.64rem;
  color:#6E6E6E; letter-spacing:.03em; background:#0A0E18; border:1px solid #28303F; border-radius:6px; padding:2px 7px;
}
.jb-root .game-thumb .g-ico {
  width:clamp(48px,30%,72px); height:clamp(48px,30%,72px); color:#2BE36F;
  filter:drop-shadow(0 8px 20px rgba(43,227,111,.28)); transition:transform .18s;
}
.jb-root .game-thumb .g-ico svg { display:block; width:100%; height:100%; }
.jb-root .game-card:hover .game-thumb .g-ico { transform:translateY(-3px) scale(1.04); }
/* hover no card de jogo: escurece a capa + botão ENTRE (só com mouse) */
.jb-root .game-play {
  position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-42%) scale(.9);
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px;
  background:#2BE36F; color:#0A0E18; font-weight:800; font-size:.92rem; letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 10px 26px rgba(43,227,111,.45); opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
}
.jb-root .game-play svg { width:16px; height:16px; }
@media (hover:hover) {
  .jb-root .game-thumb::after { content:""; position:absolute; inset:0; z-index:2; background:rgba(8,12,20,.55); opacity:0; transition:opacity .22s; }
  .jb-root .game-card:hover .game-thumb::after { opacity:1; }
  .jb-root .game-card:hover .game-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.jb-root .game-meta { padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #222A39; }
.jb-root .game-meta .nm { font-weight:700; font-size:1rem; color:#fff; }
.jb-root .game-meta .badge { font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:#0A0E18; background:#2BE36F; padding:3px 9px; border-radius:999px; }

/* pros / cons ------------------------------------------------------------ */
.jb-root .pc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.jb-root .pc-card { background:#141A26; border:1px solid #222A39; border-radius:20px; padding:clamp(24px,3vw,32px); position:relative; overflow:hidden; }
.jb-root .pc-card .top { position:absolute; top:0; left:0; right:0; height:4px; background:#2BE36F; }
.jb-root .pc-card.con .top { background:#555; }
.jb-root .pc-card h3 { font-weight:800; font-size:1.4rem; letter-spacing:-.01em; color:#2BE36F; margin-bottom:20px; }
.jb-root .pc-card.con h3 { color:#BDBDBD; }
.jb-root .pc-list { list-style:none; display:flex; flex-direction:column; gap:15px; padding:0; margin:0; }
.jb-root .pc-list li { display:flex; gap:13px; align-items:flex-start; }
.jb-root .pc-list li span.txt { font-size:.98rem; line-height:1.5; color:#DCDCDC; }
.jb-root .pc-card.con .pc-list li span.txt { color:#B4B4B4; }
.jb-root .con-mark { flex:0 0 auto; width:24px; height:24px; border-radius:8px; border:1.5px solid #6A6A6A; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.jb-root .con-mark span { width:11px; height:2.5px; border-radius:2px; background:#9A9A9A; }
.jb-root .pc-foot { font-size:.86rem; line-height:1.5; color:#7A7A7A; margin-top:22px; padding-top:18px; border-top:1px solid #222A39; }

/* steps ------------------------------------------------------------------ */
.jb-root .steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px; margin-bottom:24px; }
.jb-root .step-card { background:#141A26; border:1px solid #222A39; border-radius:18px; padding:28px; transition:transform .15s, border-color .15s; }
.jb-root .step-card:hover { transform:translateY(-3px); border-color:rgba(43,227,111,.45); }
.jb-root .step-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.jb-root .step-card .num { font-weight:900; font-size:clamp(3rem,8vw,4.4rem); line-height:.8; letter-spacing:-.02em; color:#2BE36F; display:block; }
.jb-root .step-ico {
  flex:0 0 auto; width:48px; height:48px; border-radius:13px; color:#2BE36F;
  background:rgba(43,227,111,.1); border:1px solid rgba(43,227,111,.38);
  display:flex; align-items:center; justify-content:center;
}
.jb-root .step-ico svg { display:block; width:24px; height:24px; }
.jb-root .step-card h3 { font-weight:800; font-size:1.2rem; letter-spacing:-.01em; color:#fff; margin-bottom:9px; }
.jb-root .step-card p { font-size:.95rem; line-height:1.55; color:#9E9E9E; }

/* mini-fact cards (confiável / pagamentos) ------------------------------- */
.jb-root .fact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:24px; }
.jb-root .fact-card { background:#141A26; border:1px solid #222A39; border-radius:16px; padding:22px; transition:border-color .15s; }
.jb-root .fact-card:hover { border-color:rgba(43,227,111,.4); }
.jb-root .fact-card .h { font-weight:800; font-size:1.06rem; color:#fff; margin-bottom:10px; line-height:1.25; display:flex; align-items:center; gap:11px; }
.jb-root .fact-card .ic {
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; color:#2BE36F;
  background:rgba(43,227,111,.1); border:1px solid rgba(43,227,111,.35);
  display:flex; align-items:center; justify-content:center;
}
.jb-root .fact-card .ic svg { display:block; width:20px; height:20px; }
.jb-root .fact-card .ic.age { font-weight:900; font-size:.78rem; letter-spacing:.01em; }
.jb-root .fact-card p { font-size:.9rem; line-height:1.5; color:#9E9E9E; }
.jb-root .cta-row { display:flex; flex-wrap:wrap; gap:14px; }
.jb-root .cta-row .btn-ghost, .jb-root .cta-row .btn-primary { padding:13px 26px; font-size:.96rem; }

/* faq -------------------------------------------------------------------- */
.jb-root .faq-wrap { max-width:880px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }
.jb-root .faq-list { display:flex; flex-direction:column; gap:12px; }
.jb-root .faq-item { background:#141A26; border:1px solid #222A39; border-radius:14px; overflow:hidden; }
.jb-root .faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:transparent; border:none; cursor:pointer; padding:20px 22px; text-align:left;
}
.jb-root .faq-q .q { font-weight:700; font-size:clamp(1rem,1.6vw,1.12rem); color:#fff; }
.jb-root .faq-q .sign {
  flex:0 0 auto; font-weight:800; font-size:1.4rem; line-height:1; color:#0A0E18; background:#2BE36F;
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.jb-root .faq-a { padding:0 22px; max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; }
.jb-root .faq-item.open .faq-a { padding:0 22px 22px; max-height:600px; }
.jb-root .faq-a p { font-size:.98rem; line-height:1.6; color:#B4B4B4; }

/* compliance footer block (mb-core) -------------------------------------- */
.jb-compliance { border-top:1px solid #161C28; padding:22px 0 32px; }
.jb-compliance .disc { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; margin-bottom:18px; }
.jb-compliance .badge { flex:0 0 auto; font-weight:800; font-size:.78rem; color:#0A0E18; background:#2BE36F; padding:5px 10px; border-radius:6px; }
.jb-compliance p { font-size:.82rem; line-height:1.6; color:#7E7E7E; margin:0 0 10px; }
.jb-compliance p strong { color:#A8A8A8; }
.jb-compliance a { color:#2BE36F; }

/* =========================================================================
   CABEÇALHO CUSTOMIZADO (substitui o header default da GeneratePress)
   Esconde os elementos default da GP e renderiza o header escuro do design.
   ========================================================================= */

/* Esconde header/footer/title default da GeneratePress no front. */
.site-header#masthead,
.gen-sidebar-nav,
.site-footer .inside-site-info,
.site-footer .copyright-bar,
footer.site-info,
.generate-back-to-top { display:none !important; }
/* Título "Home" duplicado da página (hero já traz o H1). */
.home .entry-header .entry-title,
.page .entry-header { display:none !important; }
/* Remove padding/contêiner branco herdado da GP no conteúdo da home. */
.home .site-content,
.home #content,
.home .container.grid-container { padding:0 !important; max-width:none !important; }
.home .site-main .wp-block-group__inner-container { padding:0 !important; }

/* header escuro sticky --------------------------------------------------- */
.jb-header {
  position:sticky; top:0; z-index:60; background:rgba(10,14,24,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid #1C2230;
}
.jb-header .header-inner {
  max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,40px); height:70px;
  display:flex; align-items:center; gap:18px;
}
.jb-header .logo-link { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.jb-header .logo-link img { height:24px; width:auto; display:block; }
.jb-header .logo-tag {
  font-weight:800; font-size:.54rem; line-height:1; letter-spacing:.18em; color:#0A0E18;
  background:#2BE36F; padding:3px 6px; border-radius:4px; text-transform:uppercase;
}
.jb-header nav.desktop { margin-left:auto; display:flex; align-items:center; gap:26px; }
.jb-header nav.desktop a {
  font-weight:600; font-size:.92rem; color:#C7CDD9; transition:color .15s; white-space:nowrap;
}
.jb-header nav.desktop a:hover { color:#2BE36F; }
.jb-header .header-actions { display:flex; align-items:center; gap:12px; }
.jb-header .age-badge {
  font-weight:800; font-size:.72rem; color:#2BE36F; border:1.5px solid #2BE36F;
  border-radius:999px; padding:3px 9px;
}
.jb-header .header-cta {
  display:inline-flex; align-items:center; background:#2BE36F; color:#0A0E18;
  font-weight:800; font-size:.9rem; border-radius:999px; padding:10px 20px; white-space:nowrap;
}
.jb-header .hamburger {
  display:none; width:46px; height:46px; background:#2BE36F; border:none; border-radius:12px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.jb-header .hamburger span { display:block; width:21px; height:2.5px; border-radius:2px; background:#0A0E18; }

/* menu mobile (painel) — irmão do <header>, não filho (backdrop-filter conteria) */
.jb-root.mobile-menu, .mobile-menu.jb-root {
  display:none; position:fixed; inset:70px 0 0 0; z-index:55; background:rgba(10,14,24,.98);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:24px clamp(20px,5vw,40px);
  flex-direction:column; gap:6px; overflow-y:auto;
}
.jb-root.mobile-menu.open { display:flex; }
.jb-root.mobile-menu a {
  font-weight:700; font-size:1.15rem; color:#EDF1F6; padding:16px 4px; border-bottom:1px solid #1C2230;
}
.jb-root.mobile-menu a:hover { color:#2BE36F; }
.jb-root.mobile-menu .btn-primary { margin-top:18px; justify-content:center; }

@media (max-width:880px) {
  .jb-header nav.desktop, .jb-header .header-cta { display:none; }
  .jb-header .hamburger { display:flex; }
}
@media (min-width:881px) {
  .jb-root.mobile-menu { display:none !important; }
}

/* =========================================================================
   RODAPÉ CUSTOMIZADO (4 colunas + compliance)
   ========================================================================= */
.jb-footer { background:#080B14; border-top:1px solid #1C2230; padding:clamp(44px,6vw,72px) 0 0; }
.jb-footer .footer-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; padding-bottom:40px; }
.jb-footer .footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.jb-footer .footer-brand img.gem { width:26px; height:26px; display:block; }
.jb-footer .footer-brand img.word { height:21px; width:auto; display:block; }
.jb-footer .footer-brand .tag { font-weight:800; font-size:.5rem; letter-spacing:.18em; color:#0A0E18; background:#2BE36F; padding:2px 5px; border-radius:3px; text-transform:uppercase; }
.jb-footer .footer-about { font-size:.88rem; line-height:1.6; color:#8A8A8A; max-width:280px; }
.jb-footer h4 { font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#2BE36F; margin-bottom:16px; }
.jb-footer ul { list-style:none; display:flex; flex-direction:column; gap:11px; margin:0; padding:0; }
.jb-footer ul a { font-size:.9rem; color:#B4B4B4; transition:color .15s; }
.jb-footer ul a:hover { color:#2BE36F; }
.jb-footer .footer-disc { border-top:1px solid #161C28; padding:26px 0; display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.jb-footer .footer-disc .badge { flex:0 0 auto; font-weight:800; font-size:.78rem; color:#0A0E18; background:#2BE36F; padding:5px 10px; border-radius:6px; }
.jb-footer .footer-disc p { flex:1 1 280px; font-size:.82rem; line-height:1.6; color:#7E7E7E; margin:0; }
.jb-footer .footer-disc p strong { color:#A8A8A8; }
.jb-footer .footer-rg { border-top:1px solid #161C28; padding:22px 0 32px; }
.jb-footer .footer-rg p { font-size:.82rem; line-height:1.6; color:#7E7E7E; margin-bottom:10px; }
.jb-footer .footer-rg p strong { color:#A8A8A8; }
.jb-footer .footer-rg a { color:#2BE36F; }
.jb-footer .footer-rg .copy { font-size:.8rem; color:#5E5E5E; }

/* floating mobile bar ---------------------------------------------------- */
.float-spacer { height:104px; }
.float-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:70; background:rgba(11,15,25,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid #222A39;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -10px 30px rgba(0,0,0,.55);
}
.float-bar a {
  display:flex; align-items:center; justify-content:center; gap:8px; background:#2BE36F; color:#0A0E18;
  border-radius:999px; padding:15px; font-weight:800; font-size:1rem; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(43,227,111,.3);
}
.float-bar p { text-align:center; font-size:.7rem; color:#7A7A7A; margin-top:7px; }
@media (min-width:881px) { .float-spacer, .float-bar { display:none; } }

/* global overflow guard (igual ao fonte) --------------------------------- */
html, body { overflow-x:hidden; max-width:100%; }

/* =========================================================================
   Editor parity: o editor de blocos não tem .jb-root no wrapper, então
   espelhamos os seletores principais dentro de .editor-styles-wrapper para
   o autor ver o desenho real. (subset suficiente p/ layout/cores)
   ========================================================================= */
.editor-styles-wrapper { background:#0A0E18; color:#fff; }
.editor-styles-wrapper .wrap,
.editor-styles-wrapper .faq-wrap { max-width:1180px; }
.editor-styles-wrapper .eyebrow {
  display:inline-block; background:rgba(43,227,111,.1); color:#2BE36F; font-weight:800;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px;
  border-radius:999px; border:1px solid rgba(43,227,111,.28);
}
.editor-styles-wrapper .display { font-family:'Anton','Inter',sans-serif; font-weight:400; }
.editor-styles-wrapper h2.display { font-size:clamp(1.7rem,6vw,3.2rem); line-height:1.04; color:#fff; }
.editor-styles-wrapper .btn-primary.wp-block-button > .wp-element-button,
.editor-styles-wrapper a.btn-primary { background:#2BE36F; color:#0A0E18; border:none; border-radius:999px; padding:15px 32px; font-weight:800; box-shadow:0 8px 24px rgba(43,227,111,.26); }
.editor-styles-wrapper .btn-ghost.wp-block-button > .wp-element-button,
.editor-styles-wrapper a.btn-ghost { background:#101622; border:1.5px solid #2A3242; color:#EDF1F6; border-radius:999px; padding:15px 30px; font-weight:700; }
.editor-styles-wrapper .btn-primary.wp-block-button,
.editor-styles-wrapper .btn-ghost.wp-block-button { background:transparent; border:none; box-shadow:none; padding:0; }
.editor-styles-wrapper .offer-card,
.editor-styles-wrapper .verdict-card,
.editor-styles-wrapper .usp-card,
.editor-styles-wrapper .vip-card,
.editor-styles-wrapper .chart-card,
.editor-styles-wrapper .step-card,
.editor-styles-wrapper .fact-card,
.editor-styles-wrapper .trust-card,
.editor-styles-wrapper .cat-card,
.editor-styles-wrapper .game-card,
.editor-styles-wrapper .pc-card,
.editor-styles-wrapper .faq-item {
  background:#141A26; border:1px solid #222A39; border-radius:16px;
}

/* #8 — заголовки секций в одну строку на десктопе */
@media (min-width:1100px){
  h2.wp-block-heading.display[style*="760px"],
  h2.wp-block-heading.display[style*="820px"]{
    max-width:none !important;
    white-space:nowrap;
    font-size:clamp(1.5rem,3.6vw,3rem);
  }
}

/* =======================================================================
   MOBILE FIXES (feedback do proprietário): compacto, sem vazios, sem overlap
   ======================================================================= */

/* setas do carrossel de jogos — base: scroller relativo, setas ocultas no desktop */
.jb-root .games-scroller{ position:relative; }
.jb-root .games-nav{ display:none; }

/* VIP checklist — galochki à esquerda (remove o recuo padrão do <ul>) */
.jb-root .vip-card ul.vip-list{ padding-left:0 !important; margin-left:0 !important; }

/* capas reais dos jogos preenchem o thumb (3/4); scale leve esconde qualquer borda residual */
.jb-root .game-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03); }

/* fix 1 — +18 + hambúrguer no canto direito quando o menu desktop some */
@media (max-width:880px){
  .jb-header .header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
}

/* fix 5 — categorias em grade 3 col (2×3, sem scroll); sobrescreve o scroll anterior */
@media (max-width:768px){
  .jb-root .cat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; overflow:visible; margin:0; padding:0; scroll-snap-type:none; }
  .jb-root .cat-card{ flex:none; }
}

/* Правки телефонов — до 768px (включая большие телефоны 641–710) */
@media (max-width:768px){
  /* fix 2 — H1 sem sobreposição, um pouco maior */
  .jb-root h1.display{ line-height:1.14; font-size:clamp(2rem,8.5vw,2.6rem); }

  /* fix 3 — CTAs do hero LADO A LADO e menores (cabem numa linha) */
  .jb-root .hero-ctas{ width:100%; flex-wrap:nowrap; gap:10px; }
  .jb-root .hero-ctas .wp-block-button{ flex:1 1 0; min-width:0; }
  .jb-root .hero-ctas .wp-block-button__link{ width:100%; justify-content:center; text-align:center; padding:12px 8px; font-size:.86rem; line-height:1.2; }

  /* fix 4 — card de cashback em largura total (mais baixo) */
  .jb-root .offer-card-wrap{ max-width:none; width:100%; flex-basis:100%; min-width:0; }

  /* fix 7 — card VIP com menos padding (checklist mais à esquerda) */
  .jb-root .vip-card{ padding:18px; }

  /* fix 8 — jogos em scroll horizontal + setas */
  .jb-root .games-grid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
  .jb-root .games-grid::-webkit-scrollbar{ display:none; }
  .jb-root .games-grid .game-card{ flex:0 0 44%; scroll-snap-align:start; }
  .jb-root .games-nav{ display:flex; align-items:center; justify-content:center; position:absolute; top:42%; transform:translateY(-50%); width:40px; height:40px; padding:0; border:none; border-radius:999px; background:#2BE36F; color:#0A0E18; font-size:1.6rem; font-weight:800; line-height:1; cursor:pointer; z-index:6; box-shadow:0 6px 16px rgba(0,0,0,.55); }
  .jb-root .games-nav.prev{ left:-4px; }
  .jb-root .games-nav.next{ right:-4px; }

  /* fix 9 — confiável: Licenciada full-width, demais 2 iguais abaixo */
  #confiavel .fact-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  #confiavel .fact-card:first-child{ grid-column:1 / -1; }
}

/* fix 6 — verdict: nota + texto lado a lado enquanto o card é full-width (≤710px) */
@media (max-width:710px){
  .jb-root .verdict-body{ display:flex; gap:16px; align-items:center; }
  .jb-root .verdict-body .verdict-score{ flex:0 0 auto; margin-bottom:0; }
  .jb-root .verdict-body p{ flex:1 1 auto; margin:0; }
}

/* 3 passos no mobile: passo 01 full-width, 02 e 03 numa linha abaixo */
@media (max-width:768px){
  .jb-root .steps-grid{ grid-template-columns:1fr 1fr; }
  .jb-root .steps-grid .step-card:first-child{ grid-column:1 / -1; }
  .jb-root .step-card{ padding:20px; }
}
/* telas bem pequenas: empilha os 3 passos */
@media (max-width:460px){
  .jb-root .steps-grid{ grid-template-columns:1fr; }
  .jb-root .steps-grid .step-card:first-child{ grid-column:auto; }
}
/* CTA da seção escondido no mobile (já existe a barra fixa "Cadastrar agora") */
@media (max-width:880px){
  .jb-root#cadastro .btn-primary,
  #cadastro .btn-primary{ display:none; }
}

/* DESKTOP: fontes maiores nos cards de cashback (hero) e Nota geral (veredito) */
@media (min-width:1024px){
  .jb-root .offer-tag { font-size:.84rem; padding:8px 16px; }
  .jb-root .offer-big .num { font-size:6.4rem; }
  .jb-root .offer-big .word { font-size:1.85rem; }
  .jb-root .offer-card p { font-size:1.36rem; line-height:1.5; }
  .jb-root .offer-note p { font-size:1.1rem; }
  .jb-root .offer-trust span { font-size:.98rem; padding:10px 16px; }
  .jb-root .offer-trust span svg { width:16px; height:16px; }
  .jb-root .verdict-card .lbl { font-size:.94rem; }
  .jb-root .verdict-score .big { font-size:5.2rem; }
  .jb-root .verdict-score .of { font-size:2.3rem; }
  .jb-root .verdict-card p { font-size:1.24rem; line-height:1.5; }
  .jb-root .verdict-pros li { font-size:1.2rem; }
  .jb-root .verdict-pros li svg { width:21px; height:21px; }
}