/* ═══════════════════════════════════════════════════════════════════════════
   POKER LOBBYS — sistema visual
   Identidade: manual de marca 2026 (Montserrat, #F0EEEA #BBD9F0 #255E8A
   #49484C #060609). Estrutura: Varredura.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --preto:#060609;
  --preto-2:#0b0d12;
  --azul:#255E8A;
  --azul-fundo:#1d4f76;
  --azul-claro:#BBD9F0;
  --creme:#F0EEEA;
  --grafite:#49484C;

  --ink:#F0EEEA;
  --ink-2:#94a7b8;
  --ink-3:#7a8b9b;
  --fio:rgba(187,217,240,.16);
  --fio-forte:rgba(187,217,240,.32);

  --foco:var(--azul-claro);
  --ink-esc:#0e1319;
  --ink-esc-2:#455360;
  --fio-esc:rgba(37,94,138,.22);
  --demo-chao:#0b111a;

  --gut:clamp(20px,5vw,64px);
  --max:min(1840px,calc(100vw - var(--gut) * 2));

  --rapido:.18s;
  --medio:.42s;
  --lento:.9s;
  --saida:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
section[id],main[id]{scroll-margin-top:76px}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--preto);
  color:var(--ink);
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.55;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* superfícies do navegador */
/* o chão da página é preto: sem isto o navegador desenha os seus próprios
   controles e barras em tema claro por cima de um site escuro */
:root{color-scheme:dark}
::selection{background:var(--azul-claro);color:var(--preto)}
:root{caret-color:var(--azul-claro);scrollbar-color:var(--azul) var(--preto);scrollbar-width:thin;accent-color:var(--azul)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--preto)}
::-webkit-scrollbar-thumb{background:#2d4a5e;border-radius:99px;border:2px solid var(--preto)}
::-webkit-scrollbar-thumb:hover{background:var(--azul)}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:2px}
.ganhos,.planos{--foco:var(--azul)}

/* anúncio só para leitor de tela — o preço muda sem aviso visual redundante */
.so-leitor{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.pular{
  position:fixed;top:-100px;left:var(--gut);z-index:80;
  background:var(--azul-claro);color:var(--preto);
  padding:12px 18px;font-weight:700;font-size:.875rem;
  transition:top var(--rapido) ease;
}
.pular:focus{top:12px}

/* ── tipografia base ───────────────────────────────────────────── */
.rotulo{
  font-size:.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);margin:0;
}
.h2{
  font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem);
  font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;
}
.nota{color:var(--ink-2);font-size:.875rem;line-height:1.5;max-width:52ch}
.nota--fina{font-size:.8125rem;color:var(--ink-3)}
.pendente{
  color:var(--azul-claro);border-bottom:1px dashed currentColor;
  padding-bottom:1px;font-weight:700;
}

/* ── botões e links ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:12px 26px;line-height:1.2;text-align:center;text-wrap:balance;
  font-size:.9375rem;font-weight:700;letter-spacing:.01em;
  background:transparent;border:1px solid transparent;border-radius:3px;cursor:pointer;
  transition:background var(--rapido) ease,color var(--rapido) ease,
             border-color var(--rapido) ease,transform var(--rapido) var(--saida);
}
.btn--primario{background:var(--azul-claro);color:var(--preto)}
.btn--primario:hover{background:#d5e8f8}
.btn--primario:active{transform:translateY(1px)}
.btn--linha{border-color:var(--fio-forte);color:var(--ink)}
.btn--linha:hover{border-color:var(--azul-claro);background:rgba(187,217,240,.07)}
.btn--fino{min-height:40px;padding:0 18px;font-size:.8125rem}
.btn .zap__icone{width:17px;height:17px;margin-right:.5em;flex:none}
.btn--fino .zap__icone{width:15px;height:15px}
.rail__login{border-color:var(--fio-forte);color:var(--ink)}
.rail__login:hover{border-color:var(--azul-claro);background:rgba(187,217,240,.09)}
.rail__conta{background:var(--azul-claro);color:var(--preto);border-color:transparent}
.rail__conta:hover{background:#d5e8f8}

/* WhatsApp: verde da própria marca com tinta escura por cima.
   Branco sobre #25D366 dá 1,7:1 e reprovaria em qualquer leitura. */
:root{--zap:#25D366;--vivo:#4ED37E}
.zap__icone{width:1.2em;height:1.2em;flex:none;display:block}
/* Auditoria de 23/set/2026: o botão verde competia com o objetivo de cadastro.
   O suporte vira link de texto ao lado da ação primária; só o ícone fica verde. */
.link-suporte{
  display:inline-flex;align-items:center;gap:.55em;
  min-height:48px;padding:0 2px;
  color:var(--ink-2);font-size:.9375rem;font-weight:600;line-height:1.35;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  text-decoration-color:rgba(148,167,184,.5);
  transition:color var(--rapido) ease,text-decoration-color var(--rapido) ease;
}
.link-suporte:hover{color:var(--ink);text-decoration-color:currentColor}
.link-suporte .zap__icone{width:1.15em;height:1.15em;color:var(--zap)}
.planos__pe .link-suporte{color:var(--ink-esc-2);text-decoration-color:rgba(69,83,96,.5)}
.planos__pe .link-suporte:hover{color:var(--ink-esc)}

/* ── rail (header) ─────────────────────────────────────────────── */
.rail{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gut);
  background:rgba(6,6,9,0);
  transition:background var(--medio) ease,border-color var(--medio) ease;
  border-bottom:1px solid transparent;
}
.rail.is-preso{background:rgba(6,6,9,.86);backdrop-filter:blur(14px);border-bottom-color:var(--fio)}
.marca{display:flex;align-items:center;min-height:44px;white-space:nowrap;flex:none;font-weight:800;letter-spacing:.02em;font-size:clamp(.9rem,2.6vw,1.05rem)}
.marca__ini,.marca__resto{line-height:1}
.marca__ficha{width:1.02em;height:1.02em;color:var(--azul-claro);margin:0 .02em;flex:none}
.rail__nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.rail__link{font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2);transition:color var(--rapido) ease}
.rail__link:hover{color:var(--ink)}
/* área de toque de 44px sem inchar a régua do topo */
.marca,.rail__link{position:relative}
.marca::after,.rail__link:not(.rail__link--zap)::after{
  content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%);
}
.rail__link--zap{
  display:none;align-items:center;gap:.45em;
  min-height:42px;padding:0 13px;border-radius:3px;
  background:transparent;border:1px solid var(--fio-forte);color:var(--ink);
  font-weight:700;letter-spacing:.01em;
}
.rail__link--zap .zap__icone{color:var(--zap)}
.rail__link--zap:hover{border-color:var(--azul-claro);background:rgba(187,217,240,.09);color:var(--ink)}
.rail__link--zap .zap__icone{width:15px;height:15px}
/* Login e idioma: links de texto no desktop; no celular ficam visíveis ao lado do WhatsApp */
.idioma{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding-left:14px;border-left:1px solid var(--fio-forte)}

/* ── BLOCO 1 · HERO ────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(50px + 1.4vh) var(--gut) 0;
  overflow:hidden;
}
.hero__grade{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(0px,2.2vh,44px);
}
/* o radar fica legível no celular sem passar por cima da leitura */
.hero__grade::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(var(--gut) * -1);right:-12%;top:-6%;bottom:-6%;
  background:linear-gradient(100deg,var(--preto) 44%,rgba(6,6,9,.9) 62%,rgba(6,6,9,.34) 82%,transparent 100%);
}
.hero__h1{
  font-size:clamp(2rem,.55rem + 7vw,4.5rem);
  font-weight:800;line-height:.96;letter-spacing:-.035em;
  max-width:19ch;text-wrap:balance;
}
.hero__h1 em{font-style:normal;color:var(--azul-claro)}
.hero__subs{display:flex;flex-direction:column;gap:10px;margin-top:clamp(16px,2.6vh,26px);max-width:46ch}
.hero__sub{margin:0;color:var(--ink-2);font-size:clamp(.9375rem,.88rem + .3vw,1.125rem);line-height:1.5}
.hero__sub strong{color:var(--ink);font-weight:600}
.hero__oferta{margin:clamp(12px,2vh,18px) 0 0;font-weight:700;font-size:.9375rem;color:var(--ink);max-width:44ch;line-height:1.45}
.hero__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:clamp(18px,3vh,32px)}
.tira{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin-top:clamp(10px,2vh,22px);
  font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--ink-3);
}
/* o li carrega uma frase com <span> dentro: flex aqui viraria cada trecho de
   texto num item, com vão de 8px no meio da frase. Bloco, e o ponto entra inline. */
.tira li{display:block}
.tira li+li::before{
  content:"";display:inline-block;vertical-align:middle;
  width:3px;height:3px;border-radius:50%;background:currentColor;margin-right:8px;
}
@media (max-width:560px){.tira{gap:6px 12px}}

/* radar */
.hero__radar{
  position:absolute;z-index:-1;pointer-events:none;
  right:-40%;top:56%;transform:translateY(-50%);
  width:min(124vw,760px);opacity:.52;
}
.radar{
  position:relative;width:100%;aspect-ratio:1;
  -webkit-mask-image:radial-gradient(72% 72% at 62% 50%,#000 34%,rgba(0,0,0,.4) 68%,transparent 100%);
          mask-image:radial-gradient(72% 72% at 62% 50%,#000 34%,rgba(0,0,0,.4) 68%,transparent 100%);
}
.radar__ficha{width:100%;height:100%;color:var(--azul);display:block}
.radar__campo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:59.4%;height:59.4%;border-radius:50%;overflow:hidden;
}
.radar__varredura{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(187,217,240,.42) 0deg,
    rgba(187,217,240,.10) 26deg,
    rgba(187,217,240,0) 62deg,
    rgba(187,217,240,0) 360deg);
  will-change:transform;
}
.radar__varredura::after{
  content:"";position:absolute;left:50%;top:0;width:1px;height:50%;
  background:linear-gradient(180deg,rgba(187,217,240,0),rgba(187,217,240,.85));
}

/* radar e blips */
.radar__tela{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Com o fósforo desenhando, o gradiente cônico e os blips de DOM saem de cena.
   Sem canvas — contexto negado, JS morto — eles continuam sendo o radar. */
.radar--vivo .radar__varredura,
.radar--vivo .radar__blips{display:none}
.radar__blips{position:absolute;inset:0}
.blip{
  position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--azul-claro);opacity:0;
  transition:opacity 3.2s ease-out,box-shadow 3.2s ease-out;
}
.blip.is-aceso{opacity:1;box-shadow:0 0 0 5px rgba(187,217,240,.22);transition:opacity .08s linear,box-shadow .08s linear}

/* telas curtas: o hero continua cabendo numa tela só, que é o pedido do briefing */
@media (max-width:430px) and (max-height:720px){
  .hero__sub{margin-top:12px;font-size:.9rem;line-height:1.45}
  .hero__acoes{margin-top:14px;gap:4px 22px}
  .hero .btn{min-height:48px}
  .link-suporte{min-height:44px}
  .apps{padding:9px 0}
  .apps__fila img{height:19px}
}

/* esteira dos apps: os sete logos passando em loop contínuo */
.apps{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;
  padding:clamp(11px,1.7vh,22px) 0;
  border-top:1px solid var(--fio);
}
.apps__janela{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.apps__trilho{display:flex;width:max-content}
.apps__trilho.is-rodando{
  animation:desfila var(--dur,44s) linear infinite;
  will-change:transform;
}
/* WCAG 2.2.2: o movimento para quando o visitante encosta ou tabula */
.apps:hover .apps__trilho{animation-play-state:paused}
@keyframes desfila{to{transform:translateX(calc(var(--fila,0px) * -1))}}
.apps__fila{
  display:flex;align-items:center;flex:none;
  gap:clamp(30px,6vw,104px);padding-right:clamp(30px,6vw,104px);
}
.apps__fila img{
  height:clamp(21px,2.6vw,31px);width:auto;display:block;flex:none;
  opacity:.9;
}

/* ── seções ────────────────────────────────────────────────────── */
.secao__topo{max-width:var(--max);margin:0 auto clamp(28px,4vw,44px)}
.secao__apoio{margin-top:12px;color:var(--ink-2);font-size:.9375rem;max-width:62ch}

/* ── SEÇÃO 2 · DEMONSTRAÇÃO ─────────────────────────────────────── */
.demo{
  position:relative;
  padding:clamp(64px,9vw,120px) var(--gut) clamp(64px,9vw,110px);
  background:
    radial-gradient(120% 70% at 50% 62%,rgba(20,44,68,.55),transparent 70%),
    radial-gradient(120% 90% at 78% -10%,rgba(37,94,138,.18),transparent 62%),
    var(--preto);
  border-top:1px solid var(--fio);
}
/* ── BLOCO 3 · CAMPOS (azul) ───────────────────────────────────── */
/* Tratado como spread: os fios cortam a tela inteira, o texto fica na régua,
   e a ficha entra em escala arquitetônica para o azul deixar de ser chapado. */
.campos{
  position:relative;overflow:hidden;
  padding:clamp(84px,11vw,150px) 0;
  color:var(--creme);
  background:
    radial-gradient(88% 62% at 18% 2%,rgba(74,140,192,.17),transparent 68%),
    radial-gradient(70% 70% at 92% 98%,rgba(9,32,54,.44),transparent 70%),
    linear-gradient(168deg,var(--azul-fundo) 0%,#1b4a6e 62%,#173f61 100%);
}
/* o instrumento no centro do bloco: a composição é construída em volta dele */
.campos__radar{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(106vw,880px);aspect-ratio:1;pointer-events:none;z-index:0;
}
.radar--fundo{
  -webkit-mask-image:radial-gradient(closest-side,#000 42%,rgba(0,0,0,.5) 74%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 42%,rgba(0,0,0,.5) 74%,transparent 100%);
}
.radar--fundo .radar__ficha{color:rgba(240,238,234,.06)}
.radar--fundo .radar__varredura{
  background:conic-gradient(from 0deg,
    rgba(240,238,234,.10) 0deg,rgba(240,238,234,.035) 30deg,rgba(240,238,234,0) 70deg);
}
.radar--fundo .radar__varredura::after{
  background:linear-gradient(180deg,rgba(240,238,234,0),rgba(240,238,234,.22));
}

/* a régua interna: fio de ponta a ponta, conteúdo centrado no --max */

/* o feixe passa e a linha acende: entra em .12s, sai em 1,6s — a mesma
   assimetria de todo movimento de dado da página */



/* ── BLOCO 5 · PLANOS (creme) ──────────────────────────────────── */
.planos{
  background:var(--creme);color:var(--ink-esc);
  padding:clamp(20px,3vw,40px) var(--gut) clamp(72px,10vw,120px);
}
.planos .secao__topo{margin-bottom:clamp(20px,2.6vw,28px)}
.planos .secao__apoio{color:var(--ink-esc-2)}
/* O quadro: eixo e cards são um objeto só. O eixo é a linha de cabeçalho —
   as mesmas três colunas, os mesmos fios — e a coluna do Pro corre em azul do
   intervalo até o botão. Sem isso o card azul flutuava entre duas colunas de
   texto sem borda, que era o que estava esquisito. */
.ciclo{
  position:relative;display:inline-flex;gap:1px;margin:clamp(18px,2.4vw,26px) 0 0;
  background:var(--fio-esc);border:1px solid var(--fio-esc);border-radius:3px;
}
/* O azul não salta de um botão para o outro: é um indicador só, que desliza.
   A posição e a largura vêm do botão ativo (o JS mede e escreve nas vars); a
   transição só liga depois da primeira medida, para não entrar deslizando. */
.ciclo::before{
  content:"";position:absolute;top:0;bottom:0;left:0;
  width:var(--ind-w,0px);transform:translateX(var(--ind-x,0px));
  background:var(--azul);border-radius:2px;
}
.ciclo[data-pronto]::before{transition:transform .28s var(--saida),width .28s var(--saida)}
.ciclo__op{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 clamp(15px,1.8vw,22px);border:0;cursor:pointer;
  position:relative;z-index:1;
  background:var(--creme);color:var(--ink-esc-2);
  font:inherit;font-size:.875rem;font-weight:700;letter-spacing:.01em;
  transition:background var(--rapido) ease,color var(--rapido) ease;
}
.ciclo__op:first-child{border-radius:2px 0 0 2px}
.ciclo__op:last-child{border-radius:0 2px 2px 0}
.ciclo__op:hover{color:var(--ink-esc)}
.ciclo__op.is-ativo{background:transparent;color:var(--creme)}
.ciclo__selo{
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul);white-space:nowrap;
}
.ciclo__op.is-ativo .ciclo__selo{color:var(--azul-claro)}
@media (max-width:420px){
  .ciclo{width:100%}
  .ciclo__op{flex:1;justify-content:center;padding:0 10px}
  .ciclo__op{padding:0 8px;gap:6px}
}

.planos__quadro{
  max-width:var(--max);margin:0 auto;
  border:1px solid var(--fio-esc);background:var(--fio-esc);
  display:flex;flex-direction:column;gap:1px;
}
.eixo{
  margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--fio-esc);border:1px solid var(--fio-esc);
}
/* Auditoria: benefício antes do intervalo. Os cards vêm primeiro; a velocidade
   de leitura passa a ser a faixa de apoio logo abaixo deles. */
.planos__eixo{max-width:var(--max);margin:clamp(26px,3.4vw,44px) auto 0}
.planos__eixo-rotulo{color:var(--ink-esc-2);margin-bottom:12px}
.eixo__grau{
  background:var(--creme);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:clamp(22px,3vw,36px) clamp(10px,1.6vw,22px);
}
.eixo .pulso{width:clamp(52px,7vw,96px)}
.eixo .pulso__ficha{color:rgba(37,94,138,.5)}
.eixo .pulso__varredura{
  background:conic-gradient(from 0deg,rgba(37,94,138,.55) 0deg,rgba(37,94,138,.14) 26deg,rgba(37,94,138,0) 62deg);
}
.eixo .pulso__varredura::after{background:linear-gradient(180deg,rgba(37,94,138,0),rgba(37,94,138,.85))}
.eixo__leitura{display:flex;flex-direction:column;align-items:center;gap:4px}
.eixo__leitura b{
  font-weight:800;font-size:clamp(2.75rem,1.6rem + 5vw,5.5rem);
  letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums;
}
.eixo__leitura span{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-esc-2);max-width:16ch;line-height:1.35;
}
.eixo__plano{
  font-size:clamp(1rem,.94rem + .3vw,1.1875rem);font-weight:800;letter-spacing:-.02em;
  color:var(--azul);
}
.eixo__grau--pro{background:var(--azul);color:var(--creme)}
.eixo__grau--pro .pulso__ficha{color:rgba(240,238,234,.3)}
.eixo__grau--pro .pulso__varredura{
  background:conic-gradient(from 0deg,rgba(240,238,234,.6) 0deg,rgba(240,238,234,.16) 26deg,rgba(240,238,234,0) 62deg);
}
.eixo__grau--pro .pulso__varredura::after{background:linear-gradient(180deg,rgba(240,238,234,0),rgba(240,238,234,.92))}
.eixo__grau--pro .eixo__leitura span{color:rgba(240,238,234,.87)}
.eixo__grau--pro .eixo__plano{color:var(--azul-claro)}

.planos__grade{
  margin:0;display:grid;gap:1px;background:var(--fio-esc);
  grid-template-columns:minmax(0,1fr);
}
.plano{
  background:var(--creme);padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;gap:16px;
}
.plano__cabeca{display:flex;flex-direction:column;gap:6px}
/* a ficha varrendo, em escala pequena — a geometria vem do manual, igual à do hero */
.pulso{position:relative;aspect-ratio:1;flex:none}
.pulso__ficha{width:100%;height:100%;display:block}
.pulso__campo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:59.4%;height:59.4%;border-radius:50%;overflow:hidden;
}
.pulso__varredura{position:absolute;inset:0;border-radius:50%;will-change:transform}
.pulso__varredura::after{
  content:"";position:absolute;left:50%;top:0;width:1px;height:50%;
}
.pulso--jogador{--volta:20s}
.pulso--pro{--volta:10s}
.pulso--high{--volta:6s}
.plano--destaque{background:var(--azul);color:var(--creme)}
.plano--destaque .plano__selo{color:var(--azul-claro)}
.plano--destaque .plano__cifra,
.plano--destaque .plano__ciclo,
.plano--destaque .plano__quem{color:rgba(240,238,234,.88)}
.plano--destaque .plano__itens{border-top-color:rgba(240,238,234,.28)}
.plano--destaque .plano__itens li::before{background:var(--azul-claro)}
.plano.plano--destaque .btn--primario{background:var(--creme);color:var(--azul)}
.plano.plano--destaque .btn--primario:hover{background:var(--creme);filter:brightness(1.06)}
.plano__selo{
  font-size:.6875rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--azul);
  line-height:1.55;
}
/* reserva a linha do selo nos outros dois planos, pra nome e preço alinharem entre as colunas */
.plano:not(.plano--destaque)::before{content:"";display:block;height:1.06rem}
@media (max-width:900px){.plano:not(.plano--destaque)::before{display:none}}
.plano__nome{font-size:clamp(1.5rem,1.2rem + .9vw,2rem);font-weight:800;letter-spacing:-.028em;line-height:1.05}
.plano__preco{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;margin-top:6px;padding-top:16px;border-top:1px solid var(--fio-esc)}
.plano--destaque .plano__preco{border-top-color:rgba(240,238,234,.28)}
.plano__cifra{font-size:1.0625rem;font-weight:700;color:var(--ink-esc-2)}
.plano__valor{font-size:clamp(2.5rem,1.8rem + 2.2vw,3.5rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.plano__ciclo{font-size:.8125rem;font-weight:600;color:var(--ink-esc-2);margin-left:3px}
.plano__ciclo em{display:block;font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.plano__quem{color:var(--ink-esc-2);font-size:.9375rem}
.plano__total{margin:-8px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-esc-2);font-variant-numeric:tabular-nums}
.plano__total:empty{display:none}
.plano--destaque .plano__total{color:rgba(240,238,234,.82)}
/* "Tudo do Jogador, mais:" — a trilha é cumulativa, então o recurso partilhado
   não se repete card a card nem some no plano mais caro. */
.plano:not(:has(.plano__herda)) .plano__itens{margin-top:calc(1.4em + 4px)}
.plano__herda{
  margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  color:var(--ink-esc-2);
}
.plano--destaque .plano__herda{color:rgba(240,238,234,.82)}

.plano__itens{
  display:flex;flex-direction:column;gap:10px;font-size:.9375rem;line-height:1.4;flex:1;
}
.plano__itens li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start}
.plano__itens li::before{
  content:"";width:14px;height:1px;background:var(--azul);margin-top:.72em;
}
.plano .btn{margin-top:8px}
.plano .btn--linha{border-color:var(--fio-esc);color:var(--ink-esc)}
.plano .btn--linha:hover{border-color:var(--azul);background:rgba(37,94,138,.06)}
.plano .btn--primario{background:var(--azul);color:var(--creme)}
.plano .btn--primario:hover{background:#2b6d9e}
.planos .nota--fina{max-width:min(var(--max),74ch);margin:14px auto 0;color:var(--ink-esc-2)}

/* ── BLOCO 6 · DÚVIDAS ─────────────────────────────────────────── */
/* Sem acordeão: as duas respostas que decidem confiança não podem
   custar um toque. Fio, pergunta em peso, resposta em medida curta. */
.faq{
  background:var(--preto-2);color:var(--ink);
  padding:clamp(64px,9vw,112px) var(--gut) clamp(72px,10vw,120px);
}
.faq .h2{max-width:var(--max);margin:0 auto clamp(24px,3.4vw,40px)}
.qas{max-width:var(--max);margin-inline:auto;border-top:1px solid var(--fio-forte)}
.qa{
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px;
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--fio);
}
.qa dt{
  text-wrap:balance;
  font-size:clamp(1.0625rem,.95rem + .55vw,1.375rem);font-weight:700;letter-spacing:-.02em;
  line-height:1.2;
}
.qa dd{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:72ch}

@media (min-width:901px){
  .qas{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(40px,5vw,96px);border-top:0;
  }
  .qa{
    grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;
    border-top:1px solid var(--fio);border-bottom:0;
  }
  .qa dt{max-width:34ch}
  .qa dd{max-width:none}
}

/* ── BLOCO 7 · FECHAMENTO ──────────────────────────────────────── */
.fechamento{
  position:relative;overflow:hidden;border-top:1px solid var(--fio);
  padding:clamp(84px,13vw,168px) var(--gut);
  background:
    radial-gradient(80% 120% at 50% 120%,rgba(37,94,138,.34),transparent 62%),
    var(--preto);
}
.fechamento__grade{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.6vw,28px);
}
.fechamento__radar{
  position:absolute;z-index:1;pointer-events:none;
  right:-12%;top:50%;transform:translateY(-50%);
  width:min(86vw,620px);opacity:.4;
}
@media (max-width:900px){
  /* No desktop os planos são uma tabela: uma moldura, fios de 1px, e a coluna
     azul do Pro amarrando eixo e card. Empilhados no celular isso vira uma
     lista contínua de 1.400px — o botão de um plano encosta no selo do outro.
     Aqui eles voltam a ser três objetos: moldura própria e espaço de verdade. */
  .planos__quadro{border:0;background:none;gap:clamp(28px,7vw,40px)}
  .eixo{border:1px solid var(--fio-esc)}
  .planos__grade{background:none;gap:clamp(18px,4.6vw,24px)}
  /* o fio de tabela a 22% some quando vira contorno de card solto */
  .plano{border:1px solid rgba(37,94,138,.34)}
  .plano--destaque{border-color:var(--azul)}

  .fechamento__radar{right:-38%;width:min(120vw,560px);opacity:.34}
  .fechamento__grade::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    left:calc(var(--gut) * -1);right:-14%;top:-8%;bottom:-8%;
    background:linear-gradient(100deg,var(--preto) 42%,rgba(6,6,9,.9) 62%,rgba(6,6,9,.32) 84%,transparent 100%);
  }
}
.fechamento__h2{
  font-size:clamp(2.5rem,1.2rem + 7vw,5.5rem);font-weight:800;line-height:.94;letter-spacing:-.04em;
}
.fechamento__h2 em{font-style:normal;color:var(--azul-claro)}
.fechamento__corpo{color:var(--ink-2);font-size:clamp(1rem,.94rem + .3vw,1.1875rem);max-width:44ch}

/* ── rodapé ────────────────────────────────────────────────────── */
.rodape{
  padding:clamp(36px,5vw,56px) var(--gut) calc(clamp(36px,5vw,56px) + env(safe-area-inset-bottom));
  border-top:1px solid var(--fio);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px clamp(24px,4vw,56px);
  max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;
}
.rodape__marca{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}
.rodape__ficha{width:22px;height:22px;color:var(--azul);flex:none}
.rodape__idade{font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.rodape__legal{color:var(--ink-3);font-size:.8125rem;line-height:1.5;max-width:58ch;flex:1 1 320px}

/* ── aviso de cookies ──────────────────────────────────────────────
   Fica acima da barra fixa (z-index 75 contra 70) e a esconde enquanto
   estiver aberto, para os dois não disputarem o rodapé no celular. */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));
  background:rgba(6,6,9,.95);backdrop-filter:blur(14px);
  border-top:1px solid var(--fio-forte);
  transform:translateY(110%);transition:transform var(--medio) var(--saida);
}
.cookies.is-visivel{transform:none}
.cookies__texto{
  margin:0;max-width:62ch;color:var(--ink-2);
  font-size:.875rem;line-height:1.5;
}
.cookies__texto strong{color:var(--ink);font-weight:700}
.cookies__acoes{display:flex;gap:10px;flex:none}
.cookies__nao{border-color:var(--fio-forte);color:var(--ink)}
.cookies__nao:hover{border-color:var(--azul-claro);background:rgba(187,217,240,.09)}
.cookies__sim{background:var(--azul-claro);color:var(--preto);border-color:transparent}
.cookies__sim:hover{background:#d5e8f8}
/* enquanto o visitante não decidiu, a barra de conversão espera */
body:has(.cookies.is-visivel) .barra{transform:translateY(110%)}
@media (max-width:600px){
  .cookies{gap:12px}
  .cookies__acoes{width:100%}
  .cookies__acoes .btn{flex:1}
}

/* ── páginas legais: superfície de leitura, mesma gramática do site ────── */
.legal{background:var(--preto);color:var(--ink)}
.legal__folha{
  max-width:min(78ch, var(--max));margin:0 auto;
  padding:clamp(104px,12vw,160px) var(--gut) clamp(72px,10vw,120px);
}
.legal__h1{margin:10px 0 0}
.legal__intro{margin:clamp(18px,2.4vw,26px) 0 0;font-size:clamp(1rem,.95rem + .35vw,1.1875rem);line-height:1.6;color:var(--ink-2)}
.legal__intro strong{color:var(--ink);font-weight:700}
.legal__aviso{
  margin:clamp(20px,2.6vw,28px) 0 0;padding:14px 16px;
  border:1px solid var(--fio-forte);border-radius:3px;
  font-size:.875rem;font-weight:600;color:var(--ink-2);
}
.legal__folha h2{
  margin:clamp(40px,5vw,64px) 0 12px;padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--fio);
  font-size:clamp(1.125rem,1rem + .6vw,1.4375rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);
}
.legal__folha p{margin:0 0 12px;font-size:1rem;line-height:1.65;color:var(--ink-2);max-width:68ch}
.legal__folha a,.legal__lista a{color:var(--azul-claro);text-decoration:underline;text-underline-offset:3px}
.legal__folha a:hover,.legal__lista a:hover{color:var(--ink)}
.legal__folha code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--ink)}
.legal__lista{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;max-width:68ch}
.legal__lista li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start;font-size:1rem;line-height:1.6;color:var(--ink-2)}
.legal__lista li::before{content:"";width:14px;height:1px;background:var(--azul-claro);margin-top:.8em}
.legal__lista strong{color:var(--ink);font-weight:700}
.legal__rolo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal__tabela{width:100%;min-width:640px;border-collapse:collapse;font-size:.9375rem;line-height:1.55}
.legal__tabela th,.legal__tabela td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--fio)}
.legal__tabela thead th{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  border-bottom-color:var(--fio-forte);padding-bottom:10px;
}
.legal__tabela tbody th{color:var(--ink);font-weight:700;width:22%}
.legal__tabela td{color:var(--ink-2)}
.legal .rodape{border-top:1px solid var(--fio)}
/* o caminho de volta nunca some: aqui o menu não tem âncoras para esconder */
.legal .rail__nav .rail__link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){
  /* a tabela vira blocos empilhados: nada de rolar de lado dentro da página */
  .legal__rolo{overflow:visible}
  .legal__tabela{min-width:0;display:block}
  .legal__tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .legal__tabela tbody,.legal__tabela tr,.legal__tabela th,.legal__tabela td{display:block;width:auto}
  .legal__tabela tr{padding:18px 0;border-bottom:1px solid var(--fio)}
  .legal__tabela tbody th{width:auto;padding:0 0 10px;border:0;font-size:1.0625rem}
  .legal__tabela td{padding:0 0 12px;border:0}
  .legal__tabela td:last-child{padding-bottom:0}
  .legal__tabela td::before{
    content:attr(data-rotulo);display:block;margin-bottom:3px;
    font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  }
}
/* link para a política, no rodapé do site */
.rodape__politica{color:var(--ink-2);font-size:.8125rem;text-decoration:underline;text-underline-offset:3px}
.rodape__politica:hover{color:var(--ink)}
.cookies__politica{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── barra fixa (celular) ──────────────────────────────────────── */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,6,9,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--fio);
  transform:translateY(110%);transition:transform var(--medio) var(--saida);
}
.barra.is-visivel{transform:none}
.barra__texto{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.barra .btn{min-height:46px;padding:0 20px;font-size:.875rem;white-space:nowrap;text-wrap:nowrap;flex:none}

/* Dedo não tem ponteiro: onde a entrada é por toque, nenhum controle fica
   abaixo de 44px. A régua é o tipo de ponteiro, não a largura da tela — um
   tablet largo com tela sensível precisa disso tanto quanto um celular. */
@media (pointer:coarse){
  .btn--fino,.rail__link--zap{min-height:44px}
}

/* ── entradas ──────────────────────────────────────────────────── */
.js-revela .revela{opacity:0;transform:translateY(14px)}
.revela.is-dentro{opacity:1;transform:none;transition:opacity .7s var(--saida),transform .7s var(--saida)}


/* ── SEÇÃO 2 · demonstração: o print real do painel, e o que ele mostra ── */
.demo .h2 em{font-style:normal;color:var(--azul-claro)}
.demo__quadro{
  max-width:var(--max);margin:clamp(28px,3.6vw,44px) auto 0;
  border:1px solid var(--fio-forte);border-radius:14px;overflow:hidden;background:var(--demo-chao);
}
.demo__rolo{overflow:hidden}
.demo__print{display:block;width:100%;height:auto;background:var(--demo-chao)}
.demo__rolo.is-rolavel{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
}

/* No celular o print de 900px não se lê; entra a lista real dos nove clubes,
   com a mesma anatomia de linha do produto. No desktop ela não existe. */
.demo__legenda{
  padding:11px 16px;font-size:.8125rem;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--fio);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;
}
/* a auditoria pediu ampliação acessível: no celular o print inteiro não se lê */
.demo__ampliar{
  color:var(--ink-2);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center;
}
.demo__ampliar:hover{color:var(--ink)}
.demo__grade{
  max-width:var(--max);margin:clamp(32px,4.4vw,56px) auto 0;
  display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr);
}
.stats__lista{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(22px,3.2vw,48px)}
.stats__lista li{display:flex;flex-direction:column;gap:5px}
.stats__lista b{
  font-weight:800;font-size:clamp(2.125rem,1.4rem + 2.6vw,3.75rem);
  letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums;color:var(--ink);
}
.stats__lista li > span{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stats__nota{margin:16px 0 0;color:var(--ink-2);font-size:.9375rem;max-width:56ch}
.stats__nota strong{color:var(--ink);font-weight:600}
/* os seis aplicativos em texto: quem procura "mesas PPPoker" precisa achar a
   página, e nome de produto dentro de alt="" não compete por nada */
.stats__apps{margin:10px 0 0;color:var(--ink-3);font-size:.875rem;line-height:1.55}
.stats__apps strong{color:var(--ink-2);font-weight:600}
.chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.5}
.chips li{display:flex;align-items:center}
.chips li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-3);margin:0 11px;flex:none}
.demo__pe{
  max-width:var(--max);margin:clamp(36px,5vw,64px) auto 0;padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--fio);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
}
.demo__pergunta{margin:0 0 6px;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);font-weight:800;letter-spacing:-.02em}
.demo__pe .nota{max-width:52ch}
.demo__acao{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* o selo de tempo real: o mesmo ponto que o painel mostra ao lado de LIVE.
   Pulsa devagar; no modo de movimento reduzido fica aceso, parado. */
.vivo{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
.vivo__ponto{width:8px;height:8px;border-radius:50%;background:var(--vivo);flex:none;animation:vivo 2.4s ease-out infinite}
@keyframes vivo{0%{box-shadow:0 0 0 0 rgba(78,211,126,.5)}70%{box-shadow:0 0 0 8px rgba(78,211,126,0)}100%{box-shadow:0 0 0 0 rgba(78,211,126,0)}}

/* ── SEÇÃO 3 · problema → solução, sobre o campo azul ───────────────────── */
.fluxo__grade{
  position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding-inline:var(--gut);
  display:grid;gap:clamp(44px,6vw,96px);grid-template-columns:minmax(0,1fr);
}
.fluxo__h2{margin:0 0 clamp(22px,3vw,34px);color:var(--creme)}
.fluxo__velho{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;
  font-size:clamp(1.0625rem,1rem + .45vw,1.4375rem);font-weight:600;line-height:1.3;
  color:rgba(240,238,234,.7);
}
.fluxo__velho li:nth-child(4){color:var(--creme);font-weight:800;margin-top:10px}
.fluxo__perda{
  margin:clamp(24px,3vw,36px) 0 0;padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(240,238,234,.18);
  font-size:clamp(1.125rem,1rem + .65vw,1.5625rem);font-weight:700;line-height:1.3;
  color:var(--creme);max-width:30ch;text-wrap:balance;
}
.fluxo__rotulo{color:var(--azul-claro);margin:0 0 clamp(16px,2.2vw,24px)}
.passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.passo{
  --y:calc(clamp(14px,1.8vw,20px) + .5em);
  position:relative;padding:clamp(14px,1.8vw,20px) 0 clamp(14px,1.8vw,20px) clamp(30px,3vw,42px);
  display:flex;flex-direction:column;gap:5px;
  text-align:left;
}
/* o trilho que liga os passos, e o ponto que a varredura acende */
.passo::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(240,238,234,.22)}
.passo:first-child::before{top:var(--y)}
.passo:last-child::before{bottom:auto;height:var(--y)}
.passo::after{
  content:"";position:absolute;left:2px;top:var(--y);width:9px;height:9px;margin-top:-4px;border-radius:50%;
  background:rgba(240,238,234,.36);
  transition:background 1.6s ease-out,box-shadow 1.6s ease-out;
}
.passo b{
  font-weight:800;font-size:clamp(1.375rem,1.1rem + 1.2vw,2.125rem);letter-spacing:-.03em;line-height:1;
  color:var(--creme);transition:color 1.6s ease-out;
}
.passo > span{color:rgba(240,238,234,.78);font-size:clamp(.9375rem,.9rem + .26vw,1.125rem);line-height:1.5;max-width:40ch}
.passo--fim b{font-size:clamp(2.375rem,1.5rem + 3.2vw,4.25rem);color:var(--azul-claro)}
.passo--fim > span{color:var(--creme)}
.passo.is-acesa b{color:var(--azul-claro);transition:color .22s ease-out}
.passo.is-acesa::after{background:var(--azul-claro);box-shadow:0 0 0 5px rgba(187,217,240,.22);transition:background .1s linear,box-shadow .1s linear}

/* ── SEÇÃO 4 · o que você ganha (creme) ─────────────────────────────────── */
.ganhos{background:var(--creme);color:var(--ink-esc);padding:clamp(72px,10vw,130px) var(--gut)}
.ganhos__topo{max-width:var(--max);margin:0 auto clamp(36px,5vw,64px)}
.ganhos__topo--dois{
  margin-top:clamp(44px,6vw,86px);padding-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--fio-esc);margin-bottom:clamp(20px,2.6vw,32px);
}
.ganhos .nota--fina{color:var(--ink-esc-2);margin-top:clamp(16px,2vw,22px)}
.ganhos__topo .h2{max-width:24ch}
.ganhos__intro{margin:clamp(18px,2.4vw,28px) 0 0;color:var(--ink-esc-2);font-size:clamp(1rem,.94rem + .3vw,1.1875rem);max-width:46ch}
.ganhos__pergunta + .ganhos__intro{margin-top:16px}
.ganhos__pergunta{
  margin:clamp(14px,2vw,22px) 0 0;
  font-size:clamp(1.75rem,1.2rem + 2.6vw,3.25rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;
  color:var(--azul);text-wrap:balance;max-width:20ch;
}
.ganhos__lista{
  max-width:var(--max);margin:0 auto;
  display:grid;column-gap:clamp(24px,3vw,48px);grid-template-columns:minmax(0,1fr);
}
.ganho{padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--fio-esc);display:flex;flex-direction:column;gap:10px}
.ganho dt{font-weight:800;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);letter-spacing:-.02em;line-height:1.2}
.ganho dd{margin:0;color:var(--ink-esc-2);font-size:.9375rem;line-height:1.55}
.ganho__mini{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-weight:700;color:var(--ink-esc)}

/* ── SEÇÃO 5 · prova: teste com o que você já joga (escuro) ─────────────── */
.prova{background:var(--preto);color:var(--ink);padding:clamp(72px,10vw,130px) var(--gut)}
.prova__grade,.prova__oferta{max-width:var(--max);margin:0 auto}
.prova__lead{margin:0 0 12px;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);font-weight:600;color:var(--ink-2)}
.prova__h2 em{font-style:normal;color:var(--azul-claro)}
.prova__passos{
  list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;gap:10px;
  font-size:clamp(1rem,.94rem + .4vw,1.25rem);font-weight:600;max-width:52ch;
}
.prova__passos li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start}
.prova__passos li::before{content:"";width:14px;height:1px;background:var(--azul-claro);margin-top:.72em}
.prova__conclusao{
  margin:clamp(24px,3vw,36px) 0 0;
  font-size:clamp(1.125rem,1rem + .7vw,1.625rem);font-weight:700;letter-spacing:-.02em;line-height:1.3;max-width:34ch;
}
.prova__oferta{
  margin-top:clamp(44px,6vw,80px);padding-top:clamp(28px,3.6vw,44px);border-top:1px solid var(--fio);
  display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:minmax(0,1fr);
}
.prova__display{
  margin:8px 0 0;font-weight:800;font-size:clamp(3rem,2rem + 5vw,6rem);
  letter-spacing:-.04em;line-height:.9;color:var(--azul-claro);
}
.prova__termos{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.prova__sem{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:700;font-size:clamp(1rem,.94rem + .3vw,1.1875rem)}
.prova__use{margin:0;color:var(--ink-2)}

/* ── planos: eixo com "atualização a cada", rodapé com a garantia ───────── */
.eixo__pre{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-esc-2);line-height:1.35;
}
.eixo__grau--pro .eixo__pre{color:rgba(240,238,234,.87)}
.planos .secao__apoio strong{color:var(--ink-esc);font-weight:700}
.planos__pe{
  max-width:var(--max);margin:clamp(26px,3vw,36px) auto 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  color:var(--ink-esc-2);font-size:.9375rem;line-height:1.5;
}
.planos__pe strong{color:var(--ink-esc)}
.planos__pe .link-suporte{min-height:44px;font-size:.875rem}

/* ── fechamento: a pergunta, os quatro passos, o clímax ─────────────────── */
.fechamento__pergunta{
  margin:0;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.12;text-wrap:balance;max-width:22ch;
}
.fechamento__passos{
  list-style:none;margin:clamp(14px,2vw,20px) 0 0;padding:0;display:flex;flex-direction:column;gap:5px;
  color:var(--ink-2);font-weight:600;font-size:clamp(.9375rem,.9rem + .3vw,1.125rem);
}
.fechamento .fechamento__h2{margin-top:clamp(28px,3.6vw,48px)}
.fechamento__oferta{margin:14px 0 0;font-weight:700;color:var(--ink)}
.fechamento__idade{display:inline-block;color:var(--ink-2);font-weight:600}

@media (min-width:701px){
  .ganhos__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:901px){
  .demo__grade{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .fluxo__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .prova__oferta{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);align-items:end}
}
@media (min-width:1200px){
  /* quatro etapas de operação: uma fileira só, sem item órfão numa terceira coluna */
  .ganhos__lista{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:360px){
  .ciclo__selo{display:none}
  .rail__zap-txt{display:none}
  .rail__nav .rail__link--zap{padding:0 12px}
  .rail__nav{gap:6px}
  .rail__nav .rail__login{padding:0 10px}
  .idioma{padding-left:6px}
  .rail{padding-inline:14px}
}
/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:900px){
  /* No celular o radar corre atrás da coluna de texto inteira e o scrim não
     alcança (o gradiente de 100° é quase vertical numa caixa estreita). Quem
     devolve o contraste é a opacidade. No desktop ele tem coluna própria,
     nunca fica atrás de texto, e continua em .52. */
  .hero__radar{opacity:.22;top:82%;right:-48%}
  /* a tira é o menor texto do hero e cai sobre o radar: sobe um degrau de ramp */
  .tira{color:var(--ink-2)}
  .eixo__grau{padding:16px 8px;gap:7px}
  .eixo__leitura span{font-size:.6875rem;letter-spacing:.08em;max-width:11ch}
  .rail__nav .rail__link{display:none}
  /* o chip deixou de ser verde sólido: a tinta escura aqui ficaria ilegível */
  .rail__nav .rail__link--zap{display:inline-flex;color:var(--ink)}
  .rail__nav .rail__login{display:inline-flex;min-height:40px;padding:0 14px}
  .rail__nav .idioma{display:inline-flex;min-height:44px;align-items:center}
  .rail__nav{gap:8px}
  .idioma{padding-left:8px}
  .rail__conta{display:none}
  .barra{display:flex}

  .demo__pe .btn{width:100%}
  .rodape{padding-bottom:calc(clamp(28px,6vw,40px) + 72px)}
  .demo__acao{width:100%;align-items:stretch}
  .vivo{justify-content:center}
}

@media (min-width:901px){
  .hero{padding-top:0}
  .hero__grade{
    display:grid;align-content:center;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-areas:
      "h1     radar"
      "sub    radar"
      "acao   radar"
      "oferta radar"
      "tira   radar";
    column-gap:clamp(32px,5vw,88px);
  }
  .hero__h1{font-size:clamp(2.625rem,4.3vw,4rem);max-width:17ch}
  .hero__h1{grid-area:h1}
  .hero__subs{grid-area:sub}
  .hero__oferta{grid-area:oferta}
  .hero__acoes{grid-area:acao}
  .tira{grid-area:tira}
  .hero__radar{
    grid-area:radar;position:relative;right:auto;top:auto;transform:none;
    z-index:1;width:100%;max-width:none;opacity:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .radar{width:min(100%,clamp(440px,33vw,760px),62svh)}
  .radar__ficha{color:#1c4a70}

  .planos__grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plano--destaque{z-index:2}
}

/* preferências */
.apps__trilho:not(.is-rodando){width:100%}
.apps__trilho:not(.is-rodando) .apps__fila{flex-wrap:wrap;justify-content:space-between;row-gap:14px;padding-right:0}

@media (prefers-reduced-motion:reduce){
  /* Menos movimento, não nenhum. Some tudo que se move sozinho — loop, giro,
     entrada, deslocamento — e fica o feedback que confirma uma ação do
     visitante, porque tirar isso deixa o controle mudo. */
  *,*::before,*::after{animation:none !important;scroll-behavior:auto !important}
  .revela,
  .hero__grade.is-ligando .hero__subs,.hero__grade.is-ligando .hero__oferta,.hero__grade.is-ligando .hero__sub,
  .hero__grade.is-ligando .hero__acoes,.hero__grade.is-ligando .tira{opacity:1;transform:none}
  .barra,.passo b,.passo::after,.blip,.rail{transition:none}
  .radar__varredura{opacity:.55}
  /* o feedback de interação segue vivo, curto e sem deslocamento */
  .btn,.link-suporte,.rail__link,.ciclo__op{transition:background .12s ease,color .12s ease,border-color .12s ease}
  .ciclo[data-pronto]::before{transition:none}
  .btn:active{transform:none}
}

@media print{
  .rail,.barra,.hero__radar,.pular{display:none}
  body{background:#fff;color:#000}
}