/* ═══ MENTORIA TURBO MASTER · master.turboacademy.com.br ═══════════════════
   Direção de arte herdada da página viva da Estratégia Turbo (index-v3),
   um grau mais sóbria: mesma paleta, mesmas fontes, mesmos raios e mesma
   cadência de revelação. O que mudou, e só isso:
     · saiu o marquee animado (ruído ambiente que um produto de R$ 50 mil
       não pede);
     · o acento saturado aparece em menos superfície, reservado a CTA,
       filete de rótulo e dois números;
     · mais peso de bloco escuro, que é onde a página argumenta;
     · escala do topo levemente contida (o H1 aqui é rótulo de produto,
       não manchete).
   Nenhum widget de escassez: sem contador, sem barra de vagas, sem número
   que se mexe sozinho. A escassez desta página é texto, por decisão de copy.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* neutros quentes */
  --paper:#F1ECE8;  --paper-2:#E8E1DA;
  --ink:#14110F;    --ink-2:#4A4442;   --ink-3:#6E6560;
  --dark:#2E2926;   --dark-2:#3A3431;
  --clay:#D6C9BE;   --clay-2:#C9BAAE;
  --taupe:#6E5F55;
  --white:#FFFFFF;
  /* acento: único matiz saturado da página */
  --accent:#C9350A;  --accent-rgb:201,53,10;
  --accent-tx:#B32E08;
  --accent-lt:#FF7A4D;
  /* sobre escuro */
  --on-dark:#F1ECE8; --on-dark-2:#CFC3B9; --on-dark-3:#A99C92;
  /* pendências visíveis */
  --todo-bg:#FBE9A0; --todo-ln:#8A6A00; --todo-tx:#14110F;

  --fd:"Figtree","Helvetica Neue",Helvetica,sans-serif;
  --fb:"Hanken Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --fm:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1392px;
  --gut:clamp(16px,4.2vw,24px);
  --sec-y:clamp(4.2rem,9vw,8.5rem);
  --head-gap:clamp(2.6rem,7vw,7rem);
  --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:17px;line-height:1.52;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:1}
h4{margin:0;font-family:var(--fb);font-weight:600;letter-spacing:-.012em;line-height:1.22}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}
.sec.dk :focus-visible{outline-color:var(--accent-lt)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tn{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── seções e temas locais ─────────────────────────────── */
.sec{
  --bg:var(--paper); --fg:var(--ink); --fg2:var(--ink-2); --fg3:var(--ink-3);
  --ln:rgba(20,17,15,.16); --ln-2:rgba(20,17,15,.09);
  --surf:var(--clay); --surf-2:var(--paper-2); --acc:var(--accent-tx);
  background:var(--bg);color:var(--fg);padding-block:var(--sec-y);position:relative;
}
.sec.alt{--bg:var(--paper-2);--surf:var(--clay);--surf-2:#DED6CE;--fg3:#5F5651}
.sec.dk{
  --bg:var(--dark); --fg:var(--on-dark); --fg2:var(--on-dark-2); --fg3:var(--on-dark-3);
  --ln:rgba(241,236,232,.22); --ln-2:rgba(241,236,232,.11);
  --surf:var(--dark-2); --surf-2:var(--taupe); --acc:var(--accent-lt);
}
.sec.cl{--bg:var(--clay);--fg:var(--ink);--fg2:var(--ink-2);--fg3:var(--ink-2);
  --ln:rgba(20,17,15,.2);--ln-2:rgba(20,17,15,.11);--surf:#E3D9D0;--surf-2:var(--clay-2)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:1080px}
.tight{max-width:920px}

/* ── tipografia ────────────────────────────────────────── */
h1{font-size:clamp(30px,4.4vw,52px);font-weight:900;line-height:1}
h2{font-size:clamp(30px,5vw,58px);font-weight:800;line-height:1.02}
h3{font-size:clamp(22px,2.6vw,32px);font-weight:800;line-height:1.06}
h4{font-size:clamp(17px,1.5vw,19px)}
.lead{font-size:17px;line-height:1.38;color:var(--fg2);max-width:48ch}
.lead.big{font-size:clamp(18.5px,1.9vw,23px);line-height:1.32;font-weight:500;color:var(--fg)}
.prose{max-width:64ch;color:var(--fg2);line-height:1.56}
.prose.wide{max-width:74ch}
.prose b,.prose strong{color:var(--fg);font-weight:600}
.mono{font-family:var(--fm);font-size:12px;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg3);margin:0}
.mono.acc{color:var(--acc)}
.sq{display:inline-block;width:6px;height:6px;background:var(--accent);
  margin-right:.55em;vertical-align:.08em}
.sec.dk .sq{background:var(--accent-lt)}
strong,b{font-weight:600}
.num{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:.9}
h2 em,h3 em,.big em{font-style:normal;color:var(--acc);font-weight:inherit}

/* viúva de uma palavra em título display: o navegador equilibra as linhas.
   Os tetos em ch subiram junto, senão são eles que forçam a quebra e o balance
   não tem o que fazer. */
h1,h2,.hero-prom,.anc-vira,.fecho,.corte,.vagas-big,.fecho-pg,.dep-par,.rota-i .marco,
.inc-i h3,.passo h3,.faq summary{text-wrap:balance}

/* ── zera a margem em em nos parágrafos de tipo grande ─────
   O reset usa p{margin:0 0 1.05em}, que é ótimo pra corpo e desastroso pra
   display: num número de 104px isso vira 109px de vão fantasma embaixo do
   algarismo. Todo parágrafo que carrega tipografia grande ou que já controla
   o próprio espaçamento entra aqui. */
.hero-prom,.evol .ev,.evol .ep,.evol .lv,.evol .mesma,.pcard .pv .v,.pcard .pv .k,
.fecho,.corte,.fecho-pg,.trackrec,.anc-vira,.trilhas .leg,.janela .jn,.dep-par,
.vagas-big,.passo p,.rota-i p,.rota-i .marco,.inc-i p,.dia .e,.dia .d,.honra p,
.selo .u,.fin-meta,.disc,.btn-note,.gar-inline p,.ressalva p:last-child{margin-bottom:0}

/* ── cabeçalho de seção ────────────────────────────────── */
.shead{display:grid;gap:clamp(1.1rem,3vw,2.2rem);align-items:start}
.shead .kicker{margin-bottom:clamp(1.6rem,4vw,3rem)}
.shead-body{padding-top:.35rem}
@media(min-width:900px){
  .shead{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,5vw,5rem)}
  .shead-body{padding-top:calc(19px + clamp(1.6rem,4vw,3rem))}
}
.gap-lg{height:var(--head-gap)}
.gap-md{height:clamp(1.8rem,4.5vw,3.4rem)}
.gap-sm{height:clamp(1.1rem,2.6vw,1.8rem)}

/* ── pendências visíveis (nunca escondidas) ────────────── */
.todo{background:var(--todo-bg);color:var(--todo-tx);
  box-shadow:inset 0 0 0 1.5px var(--todo-ln);
  padding:.08em .4em;font-family:var(--fm);font-size:.86em;letter-spacing:.01em;
  border-radius:2px;font-weight:500}
.nota{display:block;margin:1.2rem 0 0;padding:1rem 1.15rem;font-size:14.5px;
  line-height:1.5;max-width:70ch;font-family:var(--fb);letter-spacing:0;
  box-shadow:inset 0 0 0 1.5px var(--todo-ln)}
.nota b{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:#6B5200;margin-bottom:.45rem;font-weight:500}

/* ── botões ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--fb);font-weight:600;font-size:17px;letter-spacing:-.005em;
  padding:1.15rem 1.9rem;min-height:58px;border-radius:var(--r-pill);border:0;
  cursor:pointer;transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:#A82A06;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .arw{width:19px;height:19px;flex:none;transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}
/* contorno em 3,1:1 (claro) e 3,3:1 (escuro). Com var(--ln) ficava em 1,92:1,
   abaixo do piso de 3:1 que a WCAG 1.4.11 pede para componente de interface. */
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px rgba(20,17,15,.38)}
.sec.dk .btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(241,236,232,.45)}
.btn.ghost:hover{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.btn-note{font-size:14.5px;line-height:1.45;color:var(--fg2);margin-top:1.05rem;max-width:54ch}

/* ── selo de garantia colado no CTA ────────────────────── */
.gar-inline{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.35rem;
  padding-top:1.1rem;border-top:1px solid var(--ln-2);max-width:54ch}
.gar-inline svg{width:19px;height:19px;flex:none;margin-top:.14em;color:var(--acc)}
.gar-inline p{font-size:14.5px;line-height:1.45;color:var(--fg2);margin:0}
.gar-inline b{color:var(--fg);font-weight:600}

/* ── nav flutuante ─────────────────────────────────────── */
/* Largura por conteúdo, não fixa: com 640px a pílula tinha 304px de vazio
   entre o wordmark e o botão em 1440, quase metade dela, e lia como componente
   com o miolo apagado. Com max-content ela abraça os dois elementos. O teto de
   calc(100% - 24px) mantém a margem lateral em telas estreitas. */
.nav{position:fixed;top:14px;left:50%;z-index:40;
  width:max-content;max-width:calc(100% - 24px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--paper);border-radius:var(--r-pill);padding:8px 8px 8px 22px;
  box-shadow:0 .6px 1.6px -1.5px rgba(20,17,15,.17),0 2.3px 6px -3px rgba(20,17,15,.14),
             0 8px 22px -8px rgba(20,17,15,.13);
  transform:translateX(-50%);transition:transform .3s var(--ease)}
.nav.hide{transform:translate(-50%,calc(-100% - 20px))}
.nav .wm{font-family:var(--fd);font-weight:800;font-size:15.5px;letter-spacing:-.03em;
  white-space:nowrap;text-decoration:none;color:var(--ink);
  /* alvo de toque: o wordmark é link e media 19px de altura em 320px, 23,5px em
     1440. Abaixo dos 44px de toque e abaixo dos 24px da WCAG 2.2 (2.5.8). A
     caixa cresce, a linha de base não se move.
     line-height, NÃO flex: com display:inline-flex o container vira caixa de
     flex e o navegador come o espaço entre o texto e o <em>, e o wordmark saía
     "Mentoria TurboMaster", colado. */
  display:inline-block;line-height:44px;min-height:44px}
.nav .wm em{font-style:normal;color:var(--accent-tx)}
.nav .btn{font-size:15px;padding:.72rem 1.25rem;min-height:44px;white-space:nowrap}
.nav .btn .arw{display:none}
@media(max-width:520px){.nav{padding-left:16px}.nav .wm{font-size:14px}
  .nav .btn{font-size:13.5px;padding:.7rem 1rem}}
/* Em 320px a nav quebrava o botão em duas linhas, crescia de altura e cobria o
   rótulo do hero. Aqui ela cabe numa linha só. */
@media(max-width:380px){.nav{padding-left:14px}.nav .wm{font-size:12.5px}
  .nav .btn{font-size:12.5px;padding:.7rem .85rem}}

/* ── hero ──────────────────────────────────────────────── */
.hero{padding-top:clamp(6.5rem,13vw,9.5rem);padding-bottom:clamp(2.6rem,6vw,4.5rem)}
.hero-grid{display:grid;gap:clamp(2.2rem,5vw,3.2rem)}
@media(min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
    gap:clamp(2.5rem,4.5vw,4.5rem);align-items:start}
}
.hero h1{color:var(--ink-2);font-size:clamp(19px,2vw,24px);font-weight:800;
  letter-spacing:-.03em;margin-bottom:.75rem}
.hero-prom{font-size:clamp(33px,5.6vw,66px);font-weight:900;line-height:1;
  letter-spacing:-.045em;max-width:17ch}
.hero .abertura{margin-top:clamp(1.5rem,3.4vw,2.2rem);max-width:52ch;
  font-size:clamp(17px,1.7vw,19px);line-height:1.48;color:var(--ink-2)}
.hero-cta{margin-top:clamp(1.8rem,4vw,2.6rem)}
.hero-rule{height:1px;background:var(--ln);margin:clamp(2.4rem,5vw,3.4rem) 0 clamp(1.2rem,2.6vw,1.7rem)}

/* faixa de fatos: uma linha, sem enfeite */
.fatos{display:flex;flex-wrap:wrap;gap:.45rem .9rem;font-size:14.5px;line-height:1.45;
  color:var(--ink-2);align-items:baseline}
.fatos li{display:flex;align-items:baseline;gap:.55rem}
.fatos li::before{content:"·";color:var(--ink-3);font-weight:700}
.fatos li:first-child::before{content:none}
/* no celular os itens quebram e o "·" deixa de ser separador para virar marcador.
   Como o primeiro não tem marcador, ele ficava outdentado 13px em relação aos
   outros três. Empilhado, ninguém tem marcador. */
@media(max-width:640px){
  .fatos{display:grid;gap:.5rem}
  .fatos li::before{content:none}
}
.fatos b{color:var(--ink);font-weight:600}

/* slot de retrato: placeholder assumido, nunca desenho falso */
.slot-foto{margin:0}
.slot-foto .frame{aspect-ratio:4/5;background:var(--clay);position:relative;
  display:grid;place-items:center;padding:1.5rem;text-align:center;
  box-shadow:inset 0 0 0 1.5px rgba(20,17,15,.14)}
.slot-foto .frame::before{content:"";position:absolute;inset:10px;
  border:1px dashed rgba(20,17,15,.22)}
.slot-foto .mark{position:relative;font-family:var(--fm);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);max-width:24ch;line-height:1.7}
/* Com a foto real dentro, o quadro deixa de ser placeholder: some o padding,
   some a moldura tracejada e o filete interno, e a imagem preenche o 4/5.
   object-fit:cover porque o arquivo já vem recortado em 4/5 (1092x1365), então
   não há corte cego acontecendo aqui. */
.slot-foto .frame.has-img{padding:0;background:var(--dark);box-shadow:none}
.slot-foto .frame.has-img::before{display:none}
.slot-foto .frame.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.slot-foto .cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid var(--ln);padding-top:.85rem;margin-top:.85rem}
.slot-foto .cap .n{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;font-size:16px}
.slot-foto .cap .t{font-family:var(--fm);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);text-align:right}

/* ── 02 · âncora invertida ─────────────────────────────── */
.anc-num{font-family:var(--fd);font-weight:900;letter-spacing:-.05em;line-height:.88;
  font-size:clamp(56px,11vw,140px);color:var(--on-dark)}
.anc-vira{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-size:clamp(26px,4.2vw,46px);color:var(--on-dark);max-width:20ch;
  margin-block:clamp(2.4rem,6vw,4.4rem)}

/* ── 03 · semana de 7 dias ─────────────────────────────── */
.semana{display:grid;gap:0;border-top:1px solid var(--ln)}
@media(min-width:860px){.semana{grid-template-columns:repeat(7,1fr);
  column-gap:clamp(.7rem,1.5vw,1.2rem);border-top:0}}
.dia{padding:clamp(1rem,2.2vw,1.3rem) 0;border-bottom:1px solid var(--ln-2)}
@media(min-width:860px){.dia{border-top:1.5px solid var(--ln);border-bottom:0;
  padding-top:1.15rem;min-height:150px}}
.dia .d{font-family:var(--fm);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);margin-bottom:.7rem}
.dia .e{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(17px,1.8vw,20px);line-height:1.1;color:var(--fg);margin-bottom:.4rem}
.dia p{font-size:14px;line-height:1.4;color:var(--fg2);margin:0}
.dia.silencio{border-top-color:var(--ln-2)}
.dia.silencio .d{color:var(--fg3)}
.dia.silencio .e{color:var(--fg2)}
.dia.abre{border-top-color:var(--accent)}
@media(max-width:859px){.dia.abre{border-left:0}}

/* três turmas em paralelo sobre a mesma régua de semanas.
   O argumento é a coluna vertical: numa semana qualquer acontecem as três
   coisas ao mesmo tempo, em turmas diferentes. Por isso a coluna do meio
   ganha realce, e não as barras. */
.trilhas{margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.regua{display:grid;grid-template-columns:minmax(88px,.5fr) repeat(5,1fr);
  gap:6px;align-items:center}
.regua+.regua{margin-top:6px}
.regua .rot{font-family:var(--fm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg3);line-height:1.35}
.regua.cab .sem{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg3);text-align:center;padding-bottom:.45rem}
.regua.cab .sem.foco{color:var(--acc)}
.fase{background:var(--surf);color:var(--fg);font-size:12.5px;line-height:1.25;
  padding:.65rem .55rem;text-align:center;font-weight:500;min-height:44px;
  display:flex;align-items:center;justify-content:center}
/* trilho: a célula vazia guia o olho na linha curta em vez de sumir */
.fase.vazia{background:rgba(20,17,15,.045)}
.sec.dk .fase.vazia{background:rgba(241,236,232,.06)}
.fase.carrinho{background:var(--accent);color:#fff;font-weight:600}
.fase.foco{box-shadow:inset 0 0 0 1.5px var(--fg)}
.trilhas .leg{margin-top:1rem;font-size:14px;line-height:1.5;color:var(--fg2);max-width:66ch}
@media(max-width:720px){
  .regua{grid-template-columns:1fr;gap:6px}
  .regua.cab{display:none}
  .regua .rot{margin-top:.9rem}
  .fase.vazia{display:none}
  /* empilhado não existe coluna, então a Semana 3 vira rima de cor: os três
     rótulos em acento formam a sequência que o olho acha sem instrução. */
  .fase.foco{box-shadow:inset 0 0 0 2px var(--fg)}
  .fase.foco::before{color:var(--acc);opacity:1;font-weight:600}
  .fase.carrinho.foco{box-shadow:inset 0 0 0 2px #fff}
  .fase.carrinho.foco::before{color:#fff}
  .fase{justify-content:flex-start;text-align:left;padding-inline:.85rem}
  .fase::before{content:attr(data-sem) " · ";font-family:var(--fm);font-size:10.5px;
    letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-right:.15em}
}

/* janelas auditadas: quatro campos, sempre na mesma ordem, investimento
   nunca depois do ROAS */
.janelas{display:grid;gap:clamp(1.2rem,2.6vw,1.8rem)}
@media(min-width:820px){.janelas{grid-template-columns:repeat(2,1fr)}}
.janela{background:var(--surf);padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column}
.janela .jh{font-family:var(--fm);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg3);line-height:1.6;padding-bottom:.9rem;margin-bottom:.3rem;
  border-bottom:1px solid var(--ln)}
.janela .jh span{display:block}
.janela dl{margin:0}
.janela .jr{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.78rem 0;border-bottom:1px solid var(--ln-2)}
.janela .jr:last-of-type{border-bottom:0}
.janela dt{font-size:14px;color:var(--fg2)}
.janela dd{margin:0;font-family:var(--fd);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(17px,1.9vw,21px);color:var(--fg);white-space:nowrap}
.janela .jr.roas dd{color:var(--acc);font-size:clamp(19px,2.2vw,25px)}
.janela .jn{margin-top:auto;padding-top:.95rem;font-size:13.5px;line-height:1.45;color:var(--fg2)}

/* a evolução: o que vai grande na seção */
.evol{background:var(--surf-2);padding:clamp(1.6rem,3.6vw,2.6rem);
  margin-top:clamp(1.2rem,2.6vw,1.8rem)}
.evol .eh{font-family:var(--fm);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:clamp(1.1rem,2.4vw,1.6rem)}
.evol-par{display:grid;grid-template-columns:1fr 40px 1fr;align-items:start;
  gap:clamp(.8rem,2.6vw,2rem)}
.evol .e{min-width:0}
.evol .ev{font-family:var(--fd);font-weight:900;letter-spacing:-.05em;line-height:.88;
  font-size:clamp(46px,9vw,104px);color:var(--fg)}
.evol .e.depois .ev{color:var(--acc)}
.evol .ek{font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:.5rem}
.evol .ep{font-size:13.5px;line-height:1.4;color:var(--fg2);margin-top:.55rem}
.evol .ea{font-family:var(--fd);font-weight:700;font-size:clamp(22px,3.4vw,40px);
  color:var(--fg3);align-self:center;line-height:1;width:40px;text-align:center}
.evol .lucro{margin-top:clamp(1.1rem,2.4vw,1.6rem);padding-top:clamp(.9rem,2vw,1.2rem);
  border-top:1px solid var(--ln);display:grid;grid-template-columns:1fr 40px 1fr;
  gap:clamp(.8rem,2.6vw,2rem);align-items:baseline}
.evol .lucro .lv{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(19px,2.6vw,30px);color:var(--fg)}
.evol .lucro .l.depois .lv{color:var(--acc)}
.evol .lucro .lk{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg3);margin-bottom:.35rem}
.evol .lucro .ea{font-size:clamp(15px,2vw,20px)}
.evol .mesma{margin-top:clamp(1.1rem,2.4vw,1.5rem);font-size:15.5px;line-height:1.45;
  color:var(--fg);max-width:56ch}
@media(max-width:600px){
  .evol-par,.evol .lucro{grid-template-columns:1fr;gap:1.2rem}
  .evol .ea{display:none}
}

/* escala: fica isolada das janelas de propósito, porque não vem com gasto */
.escala{margin-top:clamp(2.4rem,5.5vw,4rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1.5px solid var(--ln)}
.escala .prose p{font-size:clamp(17px,1.8vw,19px)}
.trackrec{margin-top:clamp(1.6rem,3.5vw,2.4rem);font-size:16px;line-height:1.5;
  color:var(--fg2);max-width:70ch}
.trackrec b{color:var(--fg);font-weight:600}
/* bloco numérico da seção 03: texto corrido, feito pra ser trocado inteiro
   quando os números do Fire chegarem (ver comentário no index.html) */
.mecanismo-numeros{max-width:78ch}
.mecanismo-numeros .kicker{margin-bottom:clamp(1rem,2.4vw,1.5rem)}
.mecanismo-numeros .prose p{font-size:clamp(17px,1.75vw,19px);line-height:1.5}
code{font-family:var(--fm);font-size:.88em;background:rgba(20,17,15,.07);
  padding:.1em .35em;border-radius:2px}

.honesta{background:var(--surf-2);padding:clamp(1.3rem,3vw,1.9rem);
  margin-top:clamp(1.4rem,3vw,2rem);max-width:76ch}
.honesta .mono{margin-bottom:.7rem}
.honesta p{font-size:16px;line-height:1.5;color:var(--fg);margin:0;max-width:66ch}

/* ── 03 · os três sistemas em volta do motor ───────────
   Texto corrido separado por filete, NUNCA card com ícone: três cards iguais
   fazem a página parecer catálogo de módulos, e o que está sendo vendido é
   acompanhamento na implementação, não três cursos a mais. O nome de cada um
   é display bold dentro do próprio parágrafo. */
.sistemas{display:grid;gap:clamp(1.4rem,2.8vw,2rem);max-width:72ch}
.sistemas>p{margin:0;border-top:1px solid var(--ln);
  padding-top:clamp(.85rem,1.8vw,1.15rem);
  font-size:16.5px;line-height:1.56;color:var(--fg2)}
.sistemas>p b{display:block;margin-bottom:.3rem;font-family:var(--fd);font-weight:800;
  letter-spacing:-.028em;font-size:clamp(18px,1.9vw,21px);color:var(--fg)}
/* "Os quatro juntos" é a única linha da seção que diz, com todas as letras, o
   que a página vende. Respiro grande em volta, por isso. */
.quatro{font-family:var(--fd);font-weight:800;letter-spacing:-.035em;line-height:1.14;
  font-size:clamp(21px,2.9vw,32px);color:var(--fg);max-width:28ch;
  margin-block:clamp(2.2rem,5vw,3.6rem)}
/* Vem colada na definição de lucro bruto, sem separador forte: os dois formam
   um argumento só. Frase isolada, uma linha, sem número ao lado. */
.bolso{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:1.1;
  font-size:clamp(23px,3.5vw,40px);color:var(--fg);max-width:20ch;
  margin:clamp(1.5rem,3.2vw,2.3rem) 0 clamp(1.2rem,2.6vw,1.8rem)}

/* ── 04 · prova ────────────────────────────────────────── */
.deps{display:grid;gap:clamp(1.8rem,3.6vw,2.8rem);align-items:start}
@media(min-width:880px){.deps{grid-template-columns:repeat(2,1fr);
  column-gap:clamp(1.5rem,3vw,2.4rem)}}
/* sem height:100%: em grid o percentual resolve contra a altura da LINHA, e como
   os prints têm proporções muito diferentes (2,71 contra 5,88) a diferença virava
   buraco de 159px dentro do card, com o rodapé pregado lá embaixo. */
.dep-i{display:flex;flex-direction:column}
.shot{margin:0;background:var(--dark);overflow:hidden;line-height:0;
  display:flex;justify-content:center}
/* o print aberto em tamanho real é o que transforma miniatura em prova
   conferível. Sem lightbox, sem dependência: é o próprio arquivo.
   O link é FLEX com width:100% e a trava de não-ampliar mora no próprio <a>
   (max-width:min(NATIVOpx,100%) inline). Era o contrário: a trava estava na
   <img> e o <a> tinha width:auto, então enquanto o loading=lazy não baixava o
   arquivo o link media 0x0. Quem tabulava do topo pegava oito paradas de foco
   invisíveis, uma por print. Com width:100% no link, o par width/height do HTML
   resolve a aspect-ratio e a caixa já nasce reservada.
   min-height de 44px porque o print do Caso 3 tem proporção 9,4:1 e caía para
   30,6px de altura em 320px, abaixo do piso de toque. */
.shot a,.shot-duo a{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-width:0;min-height:44px;cursor:zoom-in;line-height:0}
.shot a:focus-visible,.shot-duo a:focus-visible{outline-offset:-3px}
.shot img{width:100%;height:auto}
/* <picture> entra entre o <a> flex e a <img>: sem display:block/width:100% o
   elemento é inline, encolhe no eixo do flex e o width:100% da <img> passa a
   ser 100% de nada. O <source> do celular carrega width/height próprios, que é
   o que reserva a aspect-ratio do RECORTE (proporção diferente do original) e
   preserva o conserto do achado 4: caixa reservada antes do lazy baixar. */
.shot picture,.shot-duo picture{display:block;width:100%;min-width:0;line-height:0}
/* Sinal de que o print abre. No desktop o cursor:zoom-in já dizia; no celular
   não havia sinal nenhum, e é justamente no celular que os prints renderizam
   entre 21% e 66% do tamanho nativo, ou seja, onde abrir o arquivo importa
   mais. Ícone, nunca rótulo escrito: a peça não ganha texto novo. */
/* alfa .7 e traço branco, medido nos dois piores fundos: o chip fica em 7,05:1
   sobre print claro e o traço em 18,2:1 sobre print escuro, os dois acima do
   piso de 3:1 da WCAG 1.4.11. Com .6 e traço em --on-dark-2 o desenho ficava
   em 2,85:1 dentro do chip sobre print branco, ou seja, reprovava. */
.lupa{position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:999px;
  background:rgba(20,17,15,.7);display:grid;place-items:center;line-height:0;
  transition:background .18s ease}
.lupa svg{width:16px;height:16px;color:#fff}
@media(hover:hover){
  .shot a:hover,.shot-duo a:hover{box-shadow:inset 0 0 0 2px var(--accent-lt)}
  .shot a:hover .lupa,.shot-duo a:hover .lupa{background:var(--accent)}
}
/* Dois prints, SEMPRE empilhados, nunca lado a lado.
   Dividir em duas colunas parece economizar altura e na prática destrói a prova:
   a largura da célula não depende da viewport, depende da coluna do card. Em
   1440px o card tem 653px, a célula cairia para 325px e um print de 608px
   renderizaria a 53%; em 880px, o pior ponto, a célula ia para 201px, ou seja
   33%, e o texto do WhatsApp vira mancha cinza. Empilhado, cada print recebe a
   coluna inteira e é servido no tamanho nativo. */
.shot-duo{display:grid;gap:10px;margin:0}
.shot-duo figure{margin:0;background:var(--dark);overflow:hidden;line-height:0;
  display:flex;justify-content:center}
.shot-duo img{width:100%;height:auto}
.shot-duo figcaption{font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg3);line-height:1.5;padding-top:.5rem;background:none}
.dep-txt{padding-top:clamp(.95rem,2vw,1.2rem)}
.dep-txt .mono{margin-bottom:.6rem}
.dep-par{font-family:var(--fd);font-weight:800;letter-spacing:-.032em;line-height:1.16;
  font-size:clamp(18px,1.95vw,22px);color:var(--fg);margin:0 0 .7rem}
/* ── comprimento de linha ────────────────────────────────
   Medido contando caractere por caractere na linha renderizada (Range por
   índice), não estimado: em Hanken Grotesk 1ch vale cerca de 1,5 caractere
   real, porque ch é a largura do algarismo "0" e o "0" é bem mais largo que a
   minúscula média. Ou seja, max-width:64ch entrega 98 caracteres na linha, não
   64. Os blocos abaixo estavam SEM teto nenhum e batiam 102 a 106 caracteres
   em 768px, onde a coluna vira a largura inteira. Teto posto para pousar em
   torno de 80. Os que já tinham teto ficaram como estão: mexer neles é mexer
   na proporção da página, que é decisão do dono, não conserto. */
.dep-dado{font-size:15.5px;line-height:1.5;color:var(--fg2);margin:0;max-width:64ch}
.dep-dado b{color:var(--fg);font-weight:600}
.dep-i .cap{margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--ln);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.dep-i .cap .n{font-family:var(--fm);font-size:12px;letter-spacing:.09em;color:var(--fg3)}
.dep-i .cap .t{font-size:13px;color:var(--fg3);text-align:right;line-height:1.35}
/* mesma régua do rodapé legal: é o aviso de resultado individual, texto que
   quem vai gastar R$ 50 mil lê com atenção. 78ch dava 94 caracteres na linha. */
.disc{margin-top:clamp(2.2rem,5vw,3.4rem);padding-top:clamp(1.2rem,2.6vw,1.7rem);
  border-top:1px solid var(--ln);font-size:14.5px;line-height:1.55;color:var(--fg2);max-width:64ch}

/* ── 05 / 06 · perfis ──────────────────────────────────── */
.perfis{border-top:1px solid var(--ln)}
.perfis li{display:flex;gap:1.05rem;align-items:flex-start;
  padding:clamp(1.3rem,2.8vw,1.9rem) 0;border-bottom:1px solid var(--ln-2)}
.perfis li svg{width:20px;height:20px;flex:none;margin-top:.3em;color:var(--acc)}
.perfis.no li svg{color:var(--fg3)}
.perfis p{font-size:clamp(16.5px,1.7vw,18px);line-height:1.48;color:var(--fg2);margin:0;max-width:62ch}
.perfis p b{color:var(--fg);font-weight:600}
.perfis .faixa{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;color:var(--fg);
  font-size:1.1em}
.fecho{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:1.08;
  font-size:clamp(24px,3.8vw,42px);color:var(--fg);max-width:22ch;
  margin-top:clamp(2.2rem,5vw,3.6rem)}

/* ── 07 · o que está incluído ──────────────────────────── */
.inclui{border-top:1px solid var(--ln)}
.inc-i{display:grid;gap:.7rem 1.4rem;padding:clamp(1.5rem,3.2vw,2.2rem) 0;
  border-bottom:1px solid var(--ln-2)}
@media(min-width:820px){.inc-i{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  column-gap:clamp(1.6rem,4vw,3.5rem)}}
.inc-i .n{font-family:var(--fm);font-size:12px;letter-spacing:.09em;color:var(--fg3);
  margin-bottom:.55rem}
.inc-i h3{font-size:clamp(20px,2.2vw,26px)}
.inc-i p{font-size:16px;line-height:1.5;color:var(--fg2);margin:0;max-width:64ch}
/* mesmo tratamento que .prose b: negrito dentro de corpo sobe pra cor de texto
   principal. É o que faz os nomes dos três sistemas lerem como nome próprio
   dentro do parágrafo, sem precisar virar card. */
.inc-i p b{color:var(--fg);font-weight:600}
/* o item 03 é o único da lista com mais de um parágrafo, e é assim de propósito */
.inc-i p+p{margin-top:.9rem}
.inc-i.chave{background:var(--surf);padding-inline:var(--gut);
  margin-inline:calc(-1 * var(--gut));border-bottom:0}
.inc-i.chave h3{font-size:clamp(22px,2.6vw,31px)}
.inc-i.chave p{color:var(--fg)}
.ressalva{margin-top:clamp(1.8rem,4vw,2.6rem);font-size:14.5px;line-height:1.55;
  color:var(--fg2);max-width:68ch}
.ressalva .mono{margin-bottom:.55rem}

/* ── 08 · rotina (linha do tempo vertical) ─────────────── */
.rota{border-top:1px solid var(--ln)}
.rota-i{display:grid;gap:.5rem 1.4rem;padding:clamp(1.3rem,2.8vw,1.8rem) 0;
  border-bottom:1px solid var(--ln-2)}
@media(min-width:780px){.rota-i{grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  column-gap:clamp(1.6rem,4vw,3.2rem)}}
.rota-i .q{font-family:var(--fm);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);line-height:1.5}
.rota-i p{font-size:16px;line-height:1.5;color:var(--fg2);margin:0;max-width:62ch}
.rota-i .marco{font-family:var(--fd);font-weight:800;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(21px,2.5vw,30px);color:var(--fg);margin-bottom:.6rem}
.rota-i.forte .q{color:var(--acc)}

/* ── 09 · comparação (tabela neutra) ───────────────────── */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{min-width:520px;font-size:15.5px}
.cmp th,.cmp td{text-align:left;padding:clamp(.9rem,2vw,1.15rem) 1.1rem;
  border-bottom:1px solid var(--ln-2);vertical-align:top;line-height:1.42}
.cmp thead th{border-bottom:1.5px solid var(--ln);font-family:var(--fd);font-weight:800;
  letter-spacing:-.03em;font-size:clamp(17px,1.9vw,21px);color:var(--fg)}
.cmp thead th:first-child{font-family:var(--fm);font-weight:400;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);padding-left:0}
.cmp tbody th{font-weight:500;color:var(--fg3);font-family:var(--fm);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-left:0}
.cmp td{color:var(--fg2)}
.cmp td b{color:var(--fg);font-weight:600}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* No celular a tabela EMPILHA em vez de rolar pro lado.
   Motivo, achado no QA: com rolagem horizontal o visitante de celular via só
   as duas primeiras colunas e a coluna "Mentoria Turbo Master", que é o
   produto da página, ficava fora da tela sem nenhum sinal de que dava pra
   arrastar. Empilhado, cada linha vira um bloco com o critério em cima e os
   dois produtos um embaixo do outro, sempre visíveis. */
@media(max-width:760px){
  .cmp-wrap{overflow-x:visible}
  .cmp{min-width:0;display:block}
  .cmp caption{display:block}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}
  .cmp tr{border-top:1.5px solid var(--ln);padding-block:clamp(1rem,3vw,1.3rem)}
  .cmp tr:first-child{border-top:0;padding-top:0}
  .cmp tbody th{padding:0 0 .75rem;border-bottom:0;white-space:normal;
    color:var(--fg);font-size:12.5px;letter-spacing:.11em}
  .cmp td{padding:.5rem 0;border-bottom:0}
  .cmp td+td{padding-top:.85rem}
  /* o rótulo da coluna identifica o produto. Sem filete lateral colorido:
     esse é justamente o card com borda-esquerda que a casa proíbe. */
  .cmp td::before{content:attr(data-col);display:block;
    font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--fg3);margin-bottom:.3rem}
  .cmp td[data-col="Mentoria Turbo Master"]::before{color:var(--acc)}
  .cmp td[data-col="Mentoria Turbo Master"]{color:var(--fg)}
}

/* ── 10 · preço ────────────────────────────────────────── */
.oferta{display:grid;gap:clamp(1.8rem,4vw,2.8rem)}
@media(min-width:960px){.oferta{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,3.4rem);align-items:start}}
.pcard{background:var(--paper);color:var(--ink);padding:clamp(1.7rem,4vw,2.6rem);
  --fg:var(--ink);--fg2:var(--ink-2);--fg3:var(--ink-3);
  --ln:rgba(20,17,15,.16);--ln-2:rgba(20,17,15,.09)}
.pcard .pt{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:1.2rem;border-bottom:1px solid rgba(20,17,15,.16)}
.pcard .pt .nm{font-family:var(--fd);font-weight:800;font-size:19px;letter-spacing:-.035em}
.pcard .pt .ac{font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.pcard .pv{margin:clamp(1.4rem,3vw,2rem) 0 .5rem}
.pcard .pv .k{font-size:14px;color:var(--ink-3);margin-bottom:.3rem}
.pcard .pv .v{font-family:var(--fd);font-weight:900;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(44px,8vw,88px)}
.pcard .pv .v small{font-size:max(.34em,18px);font-weight:800;letter-spacing:-.03em}
.pcard .prow{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;
  border-bottom:1px solid rgba(20,17,15,.09);font-size:15px;color:var(--ink-2);line-height:1.4}
.pcard .prow b{font-weight:600;color:var(--ink);white-space:nowrap}
.pcard .prow:last-of-type{border-bottom:0}
.pcard .pfoot{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid rgba(20,17,15,.16);
  font-size:14px;line-height:1.5;color:var(--ink-2)}
.pnota{background:var(--surf);padding:clamp(1.3rem,3vw,1.9rem);margin-top:clamp(1.5rem,3.4vw,2.2rem)}
.pnota .mono{margin-bottom:.7rem}
.pnota p{font-size:16px;line-height:1.5;color:var(--fg);margin:0;max-width:64ch}
.pdesc{border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);
  padding-block:clamp(1.1rem,2.4vw,1.5rem);margin-top:clamp(1.5rem,3.4vw,2.2rem)}
.pdesc p{font-size:16px;line-height:1.5;color:var(--fg);margin:0;max-width:64ch}
.pdesc b{font-weight:600}

/* ── 12 · garantia ─────────────────────────────────────── */
.gar{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media(min-width:900px){.gar{grid-template-columns:auto minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:start}}
.selo{padding:clamp(1.5rem,3vw,2.1rem);text-align:center;min-width:200px;
  width:max-content;justify-self:start;
  background:var(--surf);box-shadow:inset 0 0 0 1.5px var(--ln)}
.selo .n{font-family:var(--fd);font-weight:900;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(62px,9.5vw,108px);display:block;color:var(--fg)}
.selo .u{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg2);margin-top:.6rem;display:block;line-height:1.6}

/* ── 13 · vagas ────────────────────────────────────────── */
.vagas-big{font-family:var(--fd);font-weight:900;letter-spacing:-.045em;line-height:1;
  font-size:clamp(30px,5.4vw,64px);color:var(--fg);max-width:19ch}
.honra{background:var(--surf);padding:clamp(1.4rem,3.2vw,2.1rem);
  margin-top:clamp(2rem,4.5vw,3.2rem);max-width:64ch}
.honra .mono{margin-bottom:.7rem}
.honra p{font-size:clamp(17px,1.8vw,20px);line-height:1.42;color:var(--fg);margin:0;max-width:52ch}

/* ── 14 · passos ───────────────────────────────────────── */
.passos{display:grid;gap:0;border-top:1px solid var(--ln)}
@media(min-width:900px){.passos{grid-template-columns:repeat(3,1fr);
  column-gap:clamp(1.4rem,3vw,2.6rem);border-top:0}}
.passo{padding:clamp(1.3rem,2.8vw,1.8rem) 0;border-bottom:1px solid var(--ln-2)}
@media(min-width:900px){.passo{border-top:1.5px solid var(--ln);border-bottom:0;padding-top:1.3rem}}
.passo .n{font-family:var(--fm);font-size:12px;letter-spacing:.09em;color:var(--acc);
  margin-bottom:.8rem}
.passo h3{font-size:clamp(19px,2vw,24px);margin-bottom:.6rem}
.passo p{font-size:15.5px;line-height:1.48;color:var(--fg2);margin:0;max-width:64ch}
.corte{font-family:var(--fd);font-weight:800;letter-spacing:-.035em;line-height:1.12;
  font-size:clamp(20px,2.8vw,30px);color:var(--fg);max-width:26ch;margin-bottom:1.5rem}

/* ── 15 · FAQ ──────────────────────────────────────────── */
.faq{border-top:1px solid var(--ln);max-width:88ch}
.faq details{border-bottom:1px solid var(--ln-2)}
.faq summary{list-style:none;cursor:pointer;
  padding:clamp(1.1rem,2.4vw,1.4rem) 2.6rem clamp(1.1rem,2.4vw,1.4rem) 0;
  position:relative;font-family:var(--fd);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(17px,1.9vw,21px);line-height:1.22;display:flex;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary b{font-family:var(--fm);font-weight:400;font-size:11.5px;letter-spacing:.09em;
  color:var(--fg3);flex:none;min-width:22px;position:relative;top:-.1em}
.faq summary::after{content:"";position:absolute;right:.3rem;top:calc(50% - 5px);
  width:9px;height:9px;border-right:1.6px solid var(--fg3);border-bottom:1.6px solid var(--fg3);
  transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
/* 14 linhas com cursor:pointer e zero devolutiva no hover: o acordeão parecia
   morto até o clique. Só no ponteiro fino, para não travar em :hover no toque. */
@media(hover:hover){
  .faq summary:hover,.faq summary:hover b{color:var(--acc)}
  .faq summary:hover::after{border-color:var(--acc)}
}
.faq .ans{padding:0 0 1.6rem 2.9rem;max-width:70ch;font-size:16px;line-height:1.56;color:var(--fg2)}
.faq .ans b{color:var(--fg);font-weight:600}
@media(max-width:600px){.faq .ans{padding-left:2.2rem}}
@media(max-width:400px){.faq .ans{padding-left:0}}

/* ── 16 · final ────────────────────────────────────────── */
.fin{display:grid;gap:clamp(2.2rem,5vw,3.2rem)}
@media(min-width:900px){.fin{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}}
.fin-col{border-top:1.5px solid var(--ln);padding-top:clamp(1.3rem,3vw,1.9rem)}
.fin-col.sec2{border-top-color:var(--ln-2)}
.fin-col h3{margin-bottom:1rem;font-size:clamp(22px,2.6vw,30px)}
.fin-col.sec2 h3{font-size:clamp(19px,2.1vw,24px);color:var(--fg2)}
.fin-col p{font-size:15.5px;line-height:1.5;color:var(--fg2);margin:0 0 1.3rem;max-width:64ch}
.fin-col.sec2 p{font-size:14.5px}
/* NÃO é letra miúda: fecha o buraco do CDC art. 30 entre o desconto anunciado e
   a porta de compra direta. Por isso vem em corpo de texto, na cor do texto
   principal e com filete de acento, não no cinza do .fin-meta. */
.fin-col.sec2 p.fin-aviso{font-size:15px;line-height:1.5;color:var(--fg);
  border-top:1.5px solid var(--acc);padding-top:.85rem;margin-bottom:0}
.fin-meta{margin-top:1.15rem;font-size:13.5px;line-height:1.55;color:var(--fg3);max-width:70ch}
.fecho-pg{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:1.1;
  font-size:clamp(23px,3.4vw,40px);color:var(--fg);max-width:26ch;margin-inline:auto;
  text-align:center}

/* ── rodapé ────────────────────────────────────────────── */
.foot{background:var(--dark);color:var(--on-dark-3);
  padding-block:clamp(3rem,6vw,4.5rem) clamp(4.5rem,9vw,7rem);font-size:13.5px;line-height:1.58}
/* A barra fixa do celular mede 71px sem safe-area e 105px num iPhone com
   indicador de gesto (34px). O rodapé reservava 72px, então com safe-area a
   barra cobria os últimos 19px da linha de copyright. Medido em 390px com a
   página no fim absoluto, não estimado pelo CSS. */
@media(max-width:899px){
  .foot{padding-bottom:calc(7rem + env(safe-area-inset-bottom))}
}
.foot .wm{font-family:var(--fd);font-weight:800;font-size:clamp(26px,4.6vw,46px);
  letter-spacing:-.045em;color:var(--on-dark);margin-bottom:1.8rem;line-height:1}
/* 80ch entregava 105 caracteres por linha em texto de 13,5px, e é justamente
   aqui que mora o aviso de resultado e a linha de preço, o trecho que quem vai
   gastar R$ 50 mil lê com lupa. 62ch pousa em 82. */
.foot p{max-width:62ch;margin-bottom:.9rem}
.foot hr{border:0;border-top:1px solid rgba(241,236,232,.15);margin:1.7rem 0}
.foot .foot-grid{display:grid;gap:clamp(1.7rem,3.6vw,2.3rem);margin:clamp(2.2rem,5vw,3.2rem) 0 0}
@media(min-width:640px){.foot .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,4vw,2.6rem)}}
@media(min-width:1040px){.foot .foot-grid{grid-template-columns:1.5fr 1.1fr 1fr 1.05fr}}
.foot-col{border-top:1px solid rgba(241,236,232,.22);padding-top:.95rem}
.foot-col>.mono{margin:0 0 .95rem;color:var(--on-dark-3)}
.foot-col>.mono .sq{background:var(--accent-lt)}
.foot-id{margin:0;max-width:32ch;color:var(--on-dark-2);font-size:13.5px;line-height:1.62}
.foot-id b{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.03em;
  color:var(--on-dark)}
.foot-list{display:flex;flex-direction:column;gap:.72rem;margin:0}
.foot-list li{display:flex;flex-direction:column;gap:.28rem}
.foot-list a{align-self:flex-start;max-width:100%;color:var(--on-dark-2);text-decoration:none;
  font-size:14.5px;line-height:1.35;word-break:break-word;
  border-bottom:1px solid rgba(241,236,232,.26);padding-bottom:.16rem;
  /* 23,1px de altura no desktop, um décimo abaixo dos 24px que a WCAG 2.2 pede
     em 2.5.8. O padding-top cresce a caixa sem descolar o filete do texto. */
  padding-top:.22rem;
  transition:color .18s ease,border-color .18s ease}
.foot-list a:hover{color:var(--accent-lt);border-bottom-color:var(--accent-lt)}
.foot-soc{gap:.75rem}
/* alvo de toque: com border-bottom o link do rodapé ficava em 21px de altura no
   celular. Sublinhado de texto libera padding sem descolar o filete. */
@media(max-width:900px){
  .foot-list{gap:.3rem}
  /* .62rem dava 39,4px de altura, medido, abaixo do piso de 44. .79rem leva a
     44,5px sem mexer no tamanho do texto nem no sublinhado. */
  .foot-list a{border-bottom:0;text-decoration:underline;
    text-decoration-color:rgba(241,236,232,.4);text-underline-offset:.22em;
    padding-block:.79rem}
}
.foot-net{display:inline-flex;align-items:center;gap:.5rem;border-bottom:0}
.foot-net span{border-bottom:1px solid rgba(241,236,232,.26);padding-bottom:.16rem}
.foot-net:hover span{border-bottom-color:var(--accent-lt)}
.foot-net svg{width:16px;height:16px;flex:none;color:var(--on-dark-3)}
.foot-net:hover svg{color:var(--accent-lt)}
.foot-sub{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-3)}
.foot-cr{color:var(--on-dark);font-family:var(--fd);font-weight:600;font-size:14px;
  letter-spacing:-.02em}
.foot-legal{color:var(--on-dark-2)}

/* ── sticky mobile ─────────────────────────────────────── */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--dark);
  color:var(--on-dark);display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(241,236,232,.16);
  opacity:0;visibility:hidden;transform:translateY(100%);
  transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.sticky.show{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.sticky b{display:block;font-family:var(--fd);font-weight:800;font-size:15.5px;letter-spacing:-.03em}
.sticky small{display:block;font-size:11px;color:var(--on-dark-3);margin-top:.1rem;line-height:1.3}
.sticky .btn{min-height:48px;padding:.65rem 1.2rem;font-size:14.5px;white-space:nowrap}
.sticky .btn .arw{display:none}
@media(min-width:900px){.sticky{display:none}}

/* ── revelação por scroll ──────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[style*="--i"]{transition-delay:calc(var(--i) * 60ms)}

/* AA sobre superfícies claras: o cinza de rótulo (--fg3) escurece quando cai
   sobre argila ou papel-2. Medido, não estimado: --ink-3 sobre --clay dá 3,51
   e sobre --paper-2 dá 4,39, os dois reprovam AA em texto pequeno, que é
   justamente o tamanho desses rótulos (11 a 12px em mono). Trocado por
   --ink-2, que dá 5,90 sobre argila e 7,38 sobre papel-2. */
.sec:not(.dk) .comp,.sec:not(.dk) .honesta,.sec:not(.dk) .selo,.sec:not(.dk) .honra,
.sec:not(.dk) .pnota,.sec:not(.dk) .inc-i.chave,.sec:not(.dk) .slot-foto .frame,
.sec:not(.dk) .janela,.sec:not(.dk) .evol,.sec:not(.dk) .fase{--fg3:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}