/* <!-- anti-slop-visual-bypass: o unico `border-left: 1px solid` desta folha e o FIO DIVISOR
   entre as duas metades da caixa do Free (`.free-box .free-side`), ja existia antes da repintura
   como o composto do legado, e so passou a casar com a regex porque esse composto foi expandido
   (armadilha 3 do _DE-PARA: `--borda` e SO a cor, `1px solid` tem que ser escrito). Nao e a
   listra lateral colorida do catalogo AI-slop: e 1px no token neutro de borda, some no claro
   junto com o resto, e no mobile vira `border-top`. · 2026-08-16 --> */
/* ═══════════════════════════════════════════════════════════════════════
   BOOOT · PRICING / OFERTA PATTERNS · v2.0.0 · sistema OURO
   Componentes de página de OFERTA (escada de planos, comparação, garantias,
   passos, pílula) do PORTAL. Consome os SEMÂNTICOS de tokens.css e carrega
   junto com landing.css, de quem herda `.lp .accent` (o ouro de texto).
   ZERO cor nova, ZERO token novo. Promovido do inline de pagina-vendas.html:
   nenhuma página de oferta reinventa grid/tabela de novo.

   REPINTURA 16/ago/2026 · D-OURO-VALE-PRO-PORTAL-16AGO · mapa único
   _MARCA/tokens/_DE-PARA-REPINTURA.md. Esta folha tinha 11 pontos de laranja e
   TODOS eram hierarquia disfarçada de cor: círculo do passo, rótulo do funil,
   tag do Free, selo do plano, borda do plano em destaque, borda da coluna BOOOT
   e o número grande do comparativo. Nenhum é "número de resultado" nem
   "assinatura", que são as casas do ouro no Portal — então todos passaram a se
   distinguir por ELEVAÇÃO (um degrau de superfície), BORDA FORTE, PESO e CAIXA
   ALTA. O único ouro de uma página de oferta é o `.accent` que a copy marca (o
   preço, o bordão), e ele mora em landing.css, numa regra só.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO · nota-link secundária (leva ao Free · não é CTA fantasma) ── */
.proof-note--link{cursor:pointer;transition:color .2s ease;border-bottom:1px solid var(--borda-forte);padding-bottom:1px}
.proof-note--link:hover{color:var(--texto);border-color:var(--texto-3)}

/* ── PÍLULA (faixa de 1 frase entre seções) ──
   a frase inteira é manchete curta, então vai na letra de título. O trecho
   marcado com `.accent` recebe o ouro pela regra única do landing.css. */
.pill-bar{text-align:center;padding-block:var(--space-6)}
.pill-bar b{font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:var(--fw-bold);font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:var(--letra-titulo)}

/* ── PASSOS (como funciona) ────────────────────────────────────────────────
   O círculo numerado era um anel LARANJA com o número em laranja. Virou disco
   elevado com o número no degrau mais claro: a ordem dos passos já é dada pelo
   próprio número e pela posição, e nunca precisou de hue pra existir. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.step .n{width:40px;height:40px;border-radius:var(--raio-pill);background:var(--superficie-2);border:1px solid var(--borda-forte);color:var(--texto);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3)}
.step b{display:block;font-size:1rem;margin-bottom:.25rem}
.step p{font-size:.9rem;color:var(--texto-2)}

/* ── ESCADA DE PLANOS (grid + card + featured) ─────────────────────────────
   O plano em DESTAQUE (.is-hero) não tem mais borda laranja: sobe um degrau de
   superfície e ganha a borda forte, exatamente como o `.card--ignicao` do
   landing.css. Um jeito só, na página inteira, de dizer "este aqui". */
/* ── ESCADA DE PLANOS · colunas GENUINAMENTE iguais ──────────────────────────────────────
   CLASSE: grid que deveria ter colunas iguais e sai desigual porque `1fr` e, por definicao,
   `minmax(auto,1fr)`: o `auto` deixa o MIN-CONTENT de cada coluna empurrar a largura. Numa
   escada de precos isso e visivel e caro: a coluna com o rotulo de botao mais longo fica a
   MAIOR da tela, e o olho le "maior" como "mais importante", contra a hierarquia desenhada.
   MEDIDO em 20/ago, no navegador, com os 3 planos no ar: 312 / 290 / 335 px, com o HEROI
   sendo a MENOR das tres. Com minmax(0,1fr): 277 / 277 / 277, sem cortar conteudo e sem
   rolagem lateral (experimento rodado na tela, nao deduzido).
   DIVIDA DECLARADA, nao curada de carona: a casa tem outros 16 grids com `repeat(N,1fr)` sem
   minmax (landing.css, deck.css, painel.css, panorama.css, tutoriais/painel.css). Nenhum
   deles esta na frente do dono agora, e alargar o pedido pra refatorar CSS alheio e o que a
   lei de cura por classe proibe. Quem for medir: `git grep -n "repeat([0-9],1fr)" -- '*.css'`. */
.planos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6);align-items:stretch}
.planos--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:880px;margin-inline:auto}   /* 3 planos pagos (Free saiu pra caixa) */
.planos--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-inline:auto}   /* home · 2 planos lado a lado (Plus + Pro · _OFERTA §7) */
.planos--solo{grid-template-columns:1fr;max-width:560px;margin-inline:auto}          /* lançamento · 1 produto só ("o BOOOT") */
.planos--solo .plano .anchor{font-size:var(--fs-body);margin-bottom:var(--space-3)}
.planos--solo .plano ul{margin:.4rem 0 var(--space-4)}
.planos--solo .plano li{font-size:.9rem}
/* nota sob o CTA do produto único (Setup + garantia · sem virar CTA fantasma) */
.plano .plano-note{display:block;text-align:center;margin-top:var(--space-3);font-size:.78rem;color:var(--texto-2);line-height:1.4;min-height:2.6em}
.plano{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio-flutuante);padding:var(--space-5);display:flex;flex-direction:column;position:relative;box-shadow:var(--sombra-cartao)}
/* ⚠️ O CONTORNO DE OURO DO PLANO EM DESTAQUE · ordem do dono, 16/ago, olhando o site NO AR:
   "acredito que vale um outline leve em algumas caixas, exemplo: no plano PLUS (talvez so ele)"
   e "Senti falta de alguns detalhes. Pontos minimos em amarelo".
   POR QUE ELE ESTAVA FALTANDO, e a causa e minha: a instrucao que eu dei aos operadores foi que
   ~9 em cada 10 pontos de cor virassem hierarquia (peso, tamanho, espaco). Eles cumpriram, e a
   pagina foi longe demais: sem NENHUMA pontuacao, "este aqui" passou a se dizer so por elevacao
   de superficie, que no escuro mede 1,08:1 contra a pagina. Elevacao sozinha nao marca escolha.
   POR QUE OURO AQUI E LEGAL: e BORDA, nunca preenchimento, e a lei do dono proibe o preenchimento
   ("em paginas brancas ou claras o certo e nao ter botao ouro"), nao a linha. E o papel casa com
   o que o tokens.css reserva pro ouro: marcar O ESCOLHIDO. No tema claro o `--acento` ja remapeia
   sozinho pro couro 800, entao a mesma regra serve os dois sem excecao.
   DOSAGEM: 1px, e SO no destaque. Se um dia dois cartoes levarem esta borda, ela deixa de dizer
   "este aqui" e vira enfeite, que e exatamente o mundo antigo por outra cor. */
.plano.is-hero{border-color:var(--acento);background:var(--superficie-2)}
/* ⛔ NÃO pinte o selo (`.badge`) de ouro junto. Eu tentei em 16/ago e estava errado por dois
   motivos, e os dois já estavam escritos: seria PREENCHIMENTO de acento, e a folha só pode ter
   um por tela (o gate `brand-dosagem` reprova, e reprovou); e o bloco logo abaixo já decidiu que
   o selo é CARIMBO e não botão, pra não abrir um 2º ponto de atenção máxima ao lado do CTA que
   mora dentro do próprio card. A borda e o carimbo dizem a mesma coisa por meios diferentes. */
/* o selo é CARIMBO, não botão: mesmo tratamento do .contrato-badge (fundo no
   degrau mais claro, texto na cor da página), pra não abrir um 2º ponto de
   atenção máxima ao lado do CTA que já vive dentro do card. */
.plano .badge{position:absolute;top:-12px;left:var(--space-5);background:var(--texto);color:var(--pagina);font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:.04em;padding:.25rem .75rem;border-radius:var(--raio-pill)}
.plano .pname{font-size:1.3rem;font-weight:var(--fw-bold);font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:var(--letra-titulo)}
.plano .pdesc{font-size:.78rem;color:var(--texto-2);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
/* o preço passa de 28px: é manchete, então vai na largura display (62%) do Archivo */
.plano .price{font-size:1.8rem;font-weight:var(--fw-bold);color:var(--texto);margin:.85rem 0 .1rem;font-family:var(--fonte-titulo);font-stretch:var(--largura-display);letter-spacing:var(--letra-display)}
.plano .price small{font-size:.8rem;color:var(--texto-2);font-weight:var(--fw-medium)}
.plano .fn{font-size:.8rem;font-weight:var(--fw-semibold);margin-bottom:.75rem;color:var(--texto-2)}     /* função: Atende/Atrai/Assume */
.plano .fn--strike{margin-bottom:.15rem} /* a âncora "De R$X por" COLA no preço que ela ancora (estava solta a ~55px do preço · 21/ago) */
.plano .anchor{font-size:.78rem;color:var(--texto-2);margin-bottom:.6rem;line-height:1.4}             /* âncora por plano */
.plano ul{list-style:none;margin:.4rem 0 1.1rem;display:flex;flex-direction:column;gap:.5rem}
.plano li{font-size:.84rem;padding-left:1.1rem;position:relative;color:var(--texto);text-wrap:pretty}
.plano li::before{content:"";position:absolute;left:0;top:.5rem;width:7px;height:7px;border-radius:2px;background:var(--texto-3)}
/* bonus GRÁTIS como sub-linha do pilar (separa o que e pago do que e incentivo · resolve "parece que o pilar e gratis") */
.plano li .incl{display:block;margin-top:.45rem;font-size:.92em;color:var(--texto-2);text-wrap:pretty}
.plano li .incl + .incl{margin-top:.2rem} /* bonus consecutivo (ex: Atender = IA + API) fica colado como par */
.plano .foot{margin-top:auto}
.plano .foot .cta,.plano .foot .cta--ghost{width:100%;justify-content:center;min-height:58px;box-sizing:border-box}

/* ── TABELA DE COMPARAÇÃO (custo de montar separado) ── */
table.cmp{width:100%;border-collapse:collapse;margin-top:var(--space-5);font-size:.92rem}
table.cmp td{padding:.7rem .4rem;border-bottom:1px solid var(--borda)}
table.cmp td:last-child{text-align:right;color:var(--texto-2);white-space:nowrap}
.cmp-total{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:var(--fw-bold);text-align:center;margin-top:var(--space-6);font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:var(--letra-titulo)}
.cmp-total .accent{font-weight:var(--fw-extra)}

/* ── SETUP / BÔNUS (faixa de escassez real) ── */
.setup-note{text-align:center;max-width:54ch;margin-inline:auto;color:var(--texto-lead)}
.setup-note strong{color:var(--texto)}

/* ── GARANTIA (card ÚNICO · reusa o .pcard do landing.css) ────────────────────
   D-GARANTIA-UNICA-30-DIAS (dono 21/ago): o par virou UM card e o grid de 2
   sobreviveu à decisão, deixando o card órfão em meia largura contra a cabeça
   centrada da seção (visto na home em 21/ago). Um card = coluna única centrada,
   na largura de leitura. Se um dia voltar a ser par, a classe volta a abrir colunas. */
.guars{display:grid;grid-template-columns:1fr;max-width:540px;gap:var(--space-4);margin:var(--space-5) auto 0}

/* ── FREE · CAIXA HORIZONTAL (porta de funil · FORA da coluna dos 3 planos) ──
   O Free não é plano: é a entrada (Painel BOOOT). Caixa larga, degraus de texto.
   A tag "GRÁTIS" era laranja e virou rótulo em caixa alta com tracking: o que
   chama a atenção ali é a PALAVRA, não a tinta. */
.free-box{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-5);align-items:center;border:1px solid var(--borda-forte);border-radius:var(--raio-flutuante);background:var(--superficie);padding:var(--space-5);margin-top:var(--space-6)}
.free-box .free-main{display:flex;flex-direction:column;gap:var(--space-3)}
.free-box .free-tag{font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
.free-box .free-title{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-heading);font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:var(--letra-titulo)}
.free-box .free-desc{font-size:var(--fs-body);color:var(--texto-lead);line-height:var(--lh-body);max-width:46ch}
.free-box .free-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.free-box .free-side{border-left:1px solid var(--borda);padding-left:var(--space-5)}
.free-box .free-side ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.free-box .free-side li{font-size:.84rem;padding-left:1.1rem;position:relative;color:var(--texto)}
.free-box .free-side li::before{content:"";position:absolute;left:0;top:.5rem;width:7px;height:7px;border-radius:2px;background:var(--texto-3)}

/* ── FUNIL simples (MQL → SQL · degraus do Painel) ── */
.funnel{display:flex;align-items:stretch;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.funnel-step{flex:1;min-width:140px;border:1px solid var(--borda);border-radius:var(--raio-cartao);background:var(--superficie);padding:var(--space-4);display:flex;flex-direction:column;gap:.4rem;position:relative}
.funnel-step .fk{font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2)}
.funnel-step .ft{font-size:1rem;font-weight:var(--fw-bold);color:var(--texto)}
.funnel-step .fd{font-size:.82rem;color:var(--texto-2);line-height:1.4}
.funnel-arrow{display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:var(--fw-bold);color:var(--texto-3);flex-shrink:0}

/* ── COMPARATIVO com / sem BOOOT (2 colunas · âncora) ──────────────────────
   A coluna BOOOT ganhava borda laranja e o número dela era laranja peso 900.
   Agora ela é a única com ELEVAÇÃO (um degrau acima da coluna do "sem") e o
   número fica no degrau de texto mais claro, peso 800, letra de título. Quem lê
   as duas colunas vê qual é a boa pelo relevo e pelo brilho, na mesma ordem de
   leitura de antes, sem gastar o acento da página. */
.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-5);align-items:stretch}
.cmp-col{border:1px solid var(--borda);border-radius:var(--raio-flutuante);background:var(--superficie);padding:var(--space-5);display:flex;flex-direction:column}
/* A COLUNA QUE GANHA leva o MESMO contorno de ouro do plano em destaque, pela mesma razao e com a
   mesma dosagem: e ela que responde "este aqui". Antes ela se distinguia so por elevacao, que no
   escuro mede 1,08:1 contra a pagina, e o dono viu isso no ar em 16/ago ("vale um outline leve em
   algumas caixas"). Borda, nunca preenchimento. */
.cmp-col--booot{border-color:var(--acento);background:var(--superficie-2)}
/* o rotulo da coluna que ganha e o 2o ponto de ouro da tela, e ele e TEXTO: a lei da casa da o ouro
   pra assinatura e pro numero, e "COM O BOOOT" e a assinatura desta comparacao. No tema claro o
   `--acento-texto` remapeia sozinho pro couro 800 (5,70), entao a regra serve os dois. */
.cmp-col--booot .cmp-head{color:var(--acento-texto)}
.cmp-col .cmp-head{font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:var(--letra-caps);text-transform:uppercase;color:var(--texto-2);margin-bottom:var(--space-4);text-align:center}
.cmp-col .cmp-rows{list-style:none;display:flex;flex-direction:column;gap:.6rem;flex:1}
.cmp-col .cmp-rows li{display:flex;justify-content:space-between;gap:var(--space-3);font-size:.88rem;color:var(--texto-lead);padding-bottom:.5rem;border-bottom:1px solid var(--borda)}
.cmp-col .cmp-rows li span:last-child{color:var(--texto-2);white-space:nowrap;font-weight:var(--fw-semibold)}
.cmp-col--booot .cmp-rows li span:last-child{color:var(--texto)}
.cmp-col .cmp-foot{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--borda-forte);text-align:center;font-size:var(--fs-body)}
.cmp-col .cmp-foot strong{display:block;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:var(--fw-extra);color:var(--texto);font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:var(--letra-titulo)}
.cmp-col .cmp-foot .cmp-foot-sub{display:block;margin-top:.3rem;font-size:.84rem;color:var(--texto-2)}

@media(max-width:860px){
  .steps,.planos,.guars{grid-template-columns:1fr}
  /* ── O HEROI SOBE NO CELULAR ────────────────────────────────────────────────────────
     No desktop a hierarquia da escada e POSICIONAL: o heroi ocupa o meio, e o olho pousa
     nele antes de comparar os lados. O empilhamento destroi essa posicao, e o "mais
     escolhido" vira o segundo item de uma lista. MEDIDO em 20/ago a 375px: o heroi nascia
     671px abaixo do primeiro card, quase uma tela inteira de rolagem depois da porta de
     entrada, no aparelho em que o dono de academia de fato le a pagina.
     A cura mexe SO na ordem VISUAL: o DOM continua na ordem da escada (Play > Plus > Pro),
     que e o que o leitor de tela le e o que a regua do espelho 5b assere. E o padrao de
     mercado pra pricing empilhada (Stripe, Linear, Vercel sobem o plano em destaque). */
  .planos--3 .plano{order:2}
  .planos--3 .plano.is-hero{order:1}
  .free-box{grid-template-columns:1fr}
  .free-box .free-side{border-left:none;border-top:1px solid var(--borda);padding-left:0;padding-top:var(--space-4)}
  .funnel-arrow{transform:rotate(90deg)}
  .cmp-cols{grid-template-columns:1fr}
}