/* ═══════════════════════════════════════════════════════════════════════
   BOOOT · PRICING / OFERTA PATTERNS · v1.0.0
   Componentes de página de OFERTA (escada de planos, comparação, garantias,
   passos, pílula). Dark (bg carvão · texto creme · ignição laranja). Consome
   tokens.css + ladder --fg-on-dark-*. Carregue junto com landing.css.
   Promovido do inline de pagina-vendas.html: nenhuma página de oferta reinventa
   grid/tabela de novo. ZERO cor nova, ZERO token novo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 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 hsl(var(--booot-creme-hsl)/.18);padding-bottom:1px}
.proof-note--link:hover{color:var(--fg-on-dark-body);border-color:hsl(var(--booot-creme-hsl)/.4)}

/* ── PÍLULA (faixa de 1 frase entre seções) ── */
.pill-bar{border-top:var(--hairline-dark);border-bottom:var(--hairline-dark);background:var(--surface-dark-lift);text-align:center;padding-block:var(--space-5)}
.pill-bar b{font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:var(--fw-bold)}
.pill-bar .accent{color:var(--booot-laranja)}

/* ── PASSOS (como funciona · círculo numerado laranja) ── */
.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(--radius-pill);border:2px solid var(--booot-laranja);color:var(--booot-laranja);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(--fg-on-dark-muted)}

/* ── ESCADA DE PLANOS (grid + card + featured) ── */
.planos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-6);align-items:stretch}
.planos--3{grid-template-columns:repeat(3,1fr);max-width:880px;margin-inline:auto}   /* 3 planos pagos (Free saiu pra caixa) */
.planos--2{grid-template-columns:repeat(2,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(--fg-on-dark-muted);line-height:1.4}
.plano{background:var(--surface-dark-lift);border:var(--hairline-dark);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;position:relative}
.plano.is-hero{border-color:var(--booot-laranja);box-shadow:var(--glow-accent-soft)}        /* Plus destacado */
.plano .badge{position:absolute;top:-12px;left:var(--space-5);background:var(--booot-laranja);color:var(--booot-creme);font-size:.7rem;font-weight:var(--fw-bold);letter-spacing:.04em;padding:.25rem .75rem;border-radius:var(--radius-pill)}
.plano .pname{font-size:1.3rem;font-weight:var(--fw-bold)}
.plano .pdesc{font-size:.78rem;color:var(--fg-on-dark-muted);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.plano .price{font-size:1.8rem;font-weight:var(--fw-bold);color:var(--booot-laranja);margin:.85rem 0 .1rem;letter-spacing:var(--tracking-tight)}
.plano .price small{font-size:.8rem;color:var(--fg-on-dark-muted);font-weight:var(--fw-medium)}
.plano .fn{font-size:.8rem;font-weight:var(--fw-semibold);margin-bottom:.75rem;color:var(--booot-laranja)}     /* função: Atende/Atrai/Assume */
.plano .anchor{font-size:.78rem;color:var(--fg-on-dark-muted);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(--fg-on-dark-strong)}
.plano li::before{content:"";position:absolute;left:0;top:.5rem;width:7px;height:7px;border-radius:2px;background:var(--booot-laranja)}
.plano .foot{margin-top:auto}
.plano .foot .cta,.plano .foot .cta--ghost{width:100%;justify-content:center}

/* ── 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:var(--hairline-dark)}
table.cmp td:last-child{text-align:right;color:var(--fg-on-dark-muted);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)}
.cmp-total .accent{color:var(--booot-laranja);font-weight:var(--fw-black)}

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

/* ── GARANTIAS (grid de 2 · reusa o .pcard do landing.css) ── */
.guars{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-5)}

/* ── FREE · CAIXA HORIZONTAL (porta de funil · FORA da coluna dos 3 planos) ──
   O Free não é plano: é a entrada (Painel BOOOT). Caixa larga, ladder de texto. */
.free-box{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-5);align-items:center;border:1.5px solid hsl(var(--booot-creme-hsl)/.18);border-radius:var(--radius-lg);background:var(--surface-dark-lift);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(--tracking-caps);text-transform:uppercase;color:var(--booot-laranja)}
.free-box .free-title{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-heading)}
.free-box .free-desc{font-size:var(--fs-body);color:var(--fg-on-dark-body);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:var(--hairline-dark);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(--fg-on-dark-strong)}
.free-box .free-side li::before{content:"";position:absolute;left:0;top:.5rem;width:7px;height:7px;border-radius:2px;background:var(--booot-laranja)}

/* ── 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:var(--hairline-dark);border-radius:var(--radius-md);background:var(--surface-dark-lift);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(--tracking-caps);text-transform:uppercase;color:var(--booot-laranja)}
.funnel-step .ft{font-size:1rem;font-weight:var(--fw-bold);color:var(--booot-creme)}
.funnel-step .fd{font-size:.82rem;color:var(--fg-on-dark-muted);line-height:1.4}
.funnel-arrow{display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:var(--fw-bold);color:hsl(var(--booot-creme-hsl)/.32);flex-shrink:0}

/* ── COMPARATIVO com / sem BOOOT (2 colunas · âncora) ── */
.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-5);align-items:stretch}
.cmp-col{border:var(--hairline-dark);border-radius:var(--radius-lg);background:var(--surface-dark-lift);padding:var(--space-5);display:flex;flex-direction:column}
.cmp-col--booot{border-color:var(--booot-laranja);box-shadow:var(--glow-accent-soft)}
.cmp-col .cmp-head{font-size:.72rem;font-weight:var(--fw-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-on-dark-faint);margin-bottom:var(--space-4);text-align:center}
.cmp-col--booot .cmp-head{color:var(--booot-laranja)}
.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(--fg-on-dark-body);padding-bottom:.5rem;border-bottom:var(--hairline-dark)}
.cmp-col .cmp-rows li span:last-child{color:var(--fg-on-dark-muted);white-space:nowrap;font-weight:var(--fw-semibold)}
.cmp-col--booot .cmp-rows li span:last-child{color:var(--booot-creme)}
.cmp-col .cmp-foot{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid hsl(var(--booot-laranja-hsl)/.40);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-black);color:var(--booot-laranja);letter-spacing:var(--tracking-tight)}
.cmp-col .cmp-foot .cmp-foot-sub{display:block;margin-top:.3rem;font-size:.84rem;color:var(--fg-on-dark-muted)}

@media(max-width:860px){
  .steps,.planos,.guars{grid-template-columns:1fr}
  .free-box{grid-template-columns:1fr}
  .free-box .free-side{border-left:none;border-top:var(--hairline-dark);padding-left:0;padding-top:var(--space-4)}
  .funnel-arrow{transform:rotate(90deg)}
  .cmp-cols{grid-template-columns:1fr}
}