/* ═══════════════════════════════════════════════════════════════════
   Funil low ticket · Protocolo WhatsApp Blindado · TASK-607 · build v2
   CSS compartilhado das 3 páginas (index / raio-x / obrigado).

   Tokens herdados da identidade aprovada do site institucional:
   breu petróleo + âmbar de sinalização + giz, Bricolage Grotesque
   (display) + IBM Plex Sans (corpo) + IBM Plex Mono (rótulos).
   CTA verde mantido. Elemento-assinatura: a caixa "marcado" no R$ 27.

   v2 (feedback CEO 2026-08-09): LP mobile-first (nasce no 390px),
   zero eyebrow, narrativa centrada em punchlines com imagem por dobra.
   As seções pós-compra (raio-x / obrigado) seguem intactas no fim.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* paleta do site */
  --breu:#071A1C;
  --breu-2:#0C2427;
  --breu-linha:#1A3538;
  --giz:#F5F8F7;
  --papel:#FFFFFF;
  --cal:#DCE5E3;
  --grafite:#0D1E1D;
  --cinza:#5C716F;
  --claro-no-breu:#DCE8E6;
  --cinza-no-breu:#88A3A1;
  --sinal:#E8A13A;
  --sinal-claro:#F5CE8E;
  --sinal-lavado:#FBF0DC;
  --menta-lavado:#E3EFEC;
  --verde:#2E7D5B;
  --tijolo:#B4483A;

  /* o verde de ação do funil (CTA verde de alto contraste) */
  --cta:#2FC26F;
  --cta-claro:#5AD68F;
  --cta-tinta:#062514;

  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --corpo:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --env:1120px;
  --leitura:640px;
  --gutter:clamp(18px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--grafite);
  font:400 17px/1.55 var(--corpo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.026em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--sinal);outline-offset:3px;border-radius:2px}

.env{max-width:var(--env);margin-inline:auto;padding-inline:var(--gutter)}
.leitura{max-width:var(--leitura)}
section[id]{scroll-margin-top:24px}

/* ── rótulo monoespaçado (usado nas páginas pós-compra; a LP v2 não usa
     eyebrow nenhum por decisão do CEO) ── */
.rotulo{
  font:600 11px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza);display:inline-flex;align-items:center;gap:9px;
}
.rotulo::before{content:"";width:16px;height:1px;background:var(--sinal);flex:none}
.rotulo--breu{color:var(--cinza-no-breu)}

/* ── marcado: a assinatura visual (caixa âmbar de contorno grosso) ── */
.marcado{
  display:inline-block;background:var(--sinal);color:#221403;
  border:2.5px solid var(--breu);border-radius:8px;
  padding:0 .18em .06em;margin:0 .04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.faixa--breu .marcado{border-color:#030D0E}

/* ── botões ── */
.acao{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;cursor:pointer;text-align:center;
  font:600 16.5px/1.25 var(--corpo);padding:17px 30px;min-height:56px;
  border-radius:3px;border:1.5px solid transparent;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.acao--cta{background:var(--cta);color:var(--cta-tinta);border-color:var(--breu)}
.acao--cta:hover{background:var(--cta-claro);transform:translateY(-1px)}
.acao--contorno{border-color:var(--breu);color:var(--grafite);background:transparent}
.acao--contorno:hover{background:var(--breu);color:var(--giz);transform:translateY(-1px)}
.acao--compacta{padding:11px 18px;min-height:44px;font-size:14px}
.acao--dobra{width:100%;max-width:420px}
.acao .seta{font:500 15px/1 var(--mono)}
.cta-linha{margin-top:22px;display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){
  .acao{transition:none}
  .acao:hover{transform:none}
}

/* microcopy sob o botão */
.micro{margin-top:12px;font:400 13.5px/1.5 var(--corpo);color:var(--cinza)}
.faixa--breu .micro,.faixa--breu2 .micro{color:var(--cinza-no-breu)}
.faixa--menta .micro{color:#4C615A}

/* ── faixas (a LP inteira é centrada; blocos de lista voltam pra esquerda) ── */
.faixa{padding:clamp(52px,13vw,96px) 0;text-align:center}
.faixa--breu{background:var(--breu);color:var(--claro-no-breu)}
.faixa--breu2{background:var(--breu-2);color:var(--claro-no-breu)}
.faixa--giz{background:var(--giz);border-top:1px solid var(--cal);border-bottom:1px solid var(--cal)}
.faixa--sinal{background:var(--sinal-lavado);border-top:1px solid #EFDCBB;border-bottom:1px solid #EFDCBB}
.faixa--menta{background:var(--menta-lavado);border-top:1px solid #CDDEDA;border-bottom:1px solid #CDDEDA}
.faixa--breu h2,.faixa--breu2 h2{color:var(--giz)}

.faixa h1{
  font-size:clamp(31px,8.2vw,56px);font-weight:800;letter-spacing:-.034em;
  color:var(--giz);margin:0 auto;max-width:19ch;text-wrap:balance;
}
.faixa h2{
  font-size:clamp(26px,6.8vw,42px);font-weight:800;letter-spacing:-.03em;
  margin:0 auto;max-width:22ch;text-wrap:balance;
}

/* ── punchline: a unidade de texto da página (2-3 linhas no 390px) ── */
.punch{
  margin:18px auto 0;font-size:clamp(17px,4.5vw,20px);line-height:1.5;
  max-width:34ch;text-wrap:pretty;color:var(--grafite);
}
.faixa--breu .punch,.faixa--breu2 .punch{color:var(--claro-no-breu)}
.punch--sub{margin-top:20px}
.punch--apoio{color:var(--cinza);font-size:clamp(16px,4vw,18px)}
.punch--nota{font-size:15px;line-height:1.55;color:var(--cinza)}
.faixa--breu .punch--nota{color:var(--cinza-no-breu)}
.punch--gancho{color:var(--sinal-claro);margin-top:26px}

/* frase-soco (display, com o traço âmbar) */
.soco{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,5.4vw,26px);line-height:1.3;color:var(--grafite);
  margin-top:28px;
}
.faixa--breu .soco,.faixa--breu2 .soco{color:var(--giz)}
.soco::before{
  content:"";display:block;width:44px;height:3px;background:var(--sinal);
  border-radius:2px;margin-bottom:14px;
}
.soco--centro{margin-inline:auto;max-width:26ch;text-wrap:balance}
.soco--centro::before{margin-inline:auto}

/* corpo de leitura (páginas pós-compra) */
.prosa p{margin-top:18px}
.prosa p:first-child{margin-top:0}
.abertura{max-width:680px;margin-bottom:clamp(28px,4.5vw,48px)}
.abertura h2{font-size:clamp(27px,4vw,42px);margin:16px 0 0;text-wrap:balance}
.abertura p{margin-top:16px;color:var(--cinza);font-size:18px}

/* ═══ bloco 0 · pré-headline qualificadora (barra fina de página) ═══ */
.prehead{
  background:var(--sinal);color:#221403;text-align:center;
  font:600 13px/1.45 var(--corpo);padding:9px var(--gutter);
}

/* marca pequena centrada (logo, não eyebrow) */
.marca-mini{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font:700 15.5px/1 var(--display);letter-spacing:-.03em;color:var(--giz);
  margin-bottom:26px;
}
.marca-mini i{width:8px;height:8px;background:var(--sinal);border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(232,161,58,.18)}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--giz)}
.logo b{font:700 17.5px/1 var(--display);letter-spacing:-.035em}
.logo i{width:9px;height:9px;background:var(--sinal);border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(232,161,58,.18)}

/* ═══ a cena: a imagem da dobra ═══ */
.cena{
  margin:28px auto 0;max-width:760px;
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(7,26,28,.16);
  box-shadow:0 26px 56px -30px rgba(7,26,28,.55);
}
.faixa--breu .cena,.faixa--breu2 .cena{border-color:rgba(245,248,247,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.cena img{display:block;width:100%;height:auto}
.cena--recorte img{aspect-ratio:4/3;object-fit:cover;object-position:50% 82%}
.cena + h2{margin-top:28px}

/* fio de prova sob a imagem do lead */
.fio-prova{
  margin:18px auto 0;font:600 11.5px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sinal-claro);max-width:34ch;
}

/* entrada suave do lead */
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lead .marca-mini,.lead h1,.lead .punch,.lead .cena,.lead .fio-prova,.lead .cta-linha,.lead .micro{animation:sobe .5s ease-out both}
.lead h1{animation-delay:.05s}
.lead .punch{animation-delay:.1s}
.lead .cena{animation-delay:.16s}
.lead .fio-prova{animation-delay:.22s}
.lead .cta-linha{animation-delay:.26s}
.lead .micro{animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .lead .marca-mini,.lead h1,.lead .punch,.lead .cena,.lead .fio-prova,.lead .cta-linha,.lead .micro{animation-duration:.01ms;animation-delay:0s}
}

/* ═══ bloco 2 · clareza: mockup + checks ═══ */
.clareza{margin-top:30px;display:grid;gap:30px;justify-items:center}
.checks{max-width:420px;width:100%;text-align:left}
.checks li{
  position:relative;padding:12px 0 12px 36px;
  border-bottom:1px solid rgba(245,248,247,.09);
  font:500 16px/1.5 var(--corpo);color:var(--claro-no-breu);
}
.checks li:first-child{border-top:1px solid rgba(245,248,247,.09)}
.checks li::before{
  content:"";position:absolute;left:6px;top:19px;width:13px;height:7px;
  border-left:2.5px solid var(--cta-claro);border-bottom:2.5px solid var(--cta-claro);
  transform:rotate(-45deg);
}
@media (min-width:820px){
  .clareza{grid-template-columns:auto 1fr;align-items:center;max-width:760px;margin-inline:auto;gap:48px}
  .checks{max-width:none}
}

/* o celular com a capa do material, desenhado em CSS */
.fone{
  width:min(250px,66vw);
  background:#030D0E;border:2px solid var(--breu-linha);border-radius:34px;
  padding:12px 11px 16px;box-shadow:0 30px 60px -34px rgba(0,0,0,.85);
}
.fone__alto{display:flex;justify-content:center;margin-bottom:9px}
.fone__alto i{width:64px;height:5px;border-radius:999px;background:var(--breu-linha);display:block}
.fone__tela{
  background:var(--breu-2);border:1px solid var(--breu-linha);border-radius:20px;
  padding:20px 16px 18px;min-height:330px;display:flex;flex-direction:column;
}
.capa-ebook{border:1.5px solid var(--sinal);border-radius:10px;padding:18px 14px;flex:1;display:flex;flex-direction:column;text-align:left}
.capa-ebook .selo-marca{font:600 9px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cinza-no-breu);display:flex;align-items:center;gap:7px}
.capa-ebook .selo-marca::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sinal)}
.capa-ebook h3{
  font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.12;
  color:var(--giz);margin-top:16px;text-transform:uppercase;
}
.capa-ebook h3 span{color:var(--sinal)}
.capa-ebook ul{margin-top:auto;padding-top:20px;display:grid;gap:8px}
.capa-ebook li{display:flex;align-items:baseline;gap:10px;font:500 12px/1.45 var(--corpo);color:var(--claro-no-breu)}
.capa-ebook li b{font:600 10px/1 var(--mono);color:var(--sinal);flex:none}
.capa-ebook .base{margin-top:16px;padding-top:11px;border-top:1px dashed var(--breu-linha);font:500 9.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza-no-breu)}

/* ═══ bloco 4 · os 3 erros ═══ */
.erros{
  max-width:560px;margin:26px auto 0;text-align:left;
  border-top:1px solid var(--cal);
}
.erros li{
  display:flex;align-items:baseline;gap:16px;padding:15px 4px;
  border-bottom:1px solid var(--cal);
  font:600 17px/1.45 var(--corpo);color:var(--grafite);
}
.erros li b{font:600 12px/1 var(--mono);color:var(--sinal);letter-spacing:.06em;flex:none}

/* ═══ bloco 5 · a pilha das 3 camadas (diagrama CSS) ═══ */
.pilha{max-width:620px;margin:30px auto 0}
.placa{
  display:flex;gap:18px;align-items:flex-start;text-align:left;
  background:var(--giz);border:1.5px solid var(--cal);
  padding:22px 22px 24px;
}
.placa:first-child{border-radius:14px 14px 0 0}
.placa:last-child{border-radius:0 0 14px 14px}
.placa + .placa{margin-top:-1.5px}
.placa--peso{background:var(--sinal-lavado);border-color:#EBD3A6;position:relative;z-index:1}
.placa .num{font:800 40px/1 var(--display);letter-spacing:-.04em;color:#BFCDCA;flex:none;width:34px}
.placa--peso .num{color:var(--sinal)}
.placa h3{font-size:19.5px}
.placa p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--cinza)}
.placa--peso p{color:#6B5A38}

/* ═══ bloco 6 · números da prova ═══ */
.numeros-linha{
  display:flex;justify-content:center;align-items:baseline;gap:clamp(24px,7vw,48px);
  margin-top:26px;
}
.numeros-linha .n{font:800 clamp(42px,11vw,68px)/1 var(--display);letter-spacing:-.04em;color:var(--giz)}
.numeros-linha .n small{
  display:block;font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-no-breu);margin-top:8px;
}

/* ═══ bloco 7 · pra quem é ═══ */
.listas{max-width:640px;margin:28px auto 0;display:grid;gap:14px}
.lista{background:var(--papel);border:1.5px solid var(--cal);border-radius:12px;padding:22px 22px;text-align:left}
.lista h3{font-size:19px;display:flex;align-items:center;gap:11px}
.lista h3::before{content:"";width:18px;height:3px;border-radius:2px;flex:none}
.lista--sim h3::before{background:var(--verde)}
.lista--nao h3::before{background:var(--tijolo)}
.lista ul{margin-top:12px}
.lista li{padding:11px 0;border-top:1px dashed var(--cal);font-size:15.5px;line-height:1.55;color:var(--cinza)}

/* ═══ blocos 8-9 · stack de entregáveis + total ═══ */
.stack{max-width:640px;margin:30px auto 0;display:grid;gap:12px}
.item{
  background:var(--papel);border:1.5px solid #EFDCBB;border-radius:12px;
  padding:18px 20px 19px;text-align:left;
}
.item--bonus{background:#FFFDF6;border-color:#E3CD9E}
.item__cabo{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.item h3{font-size:17.5px;line-height:1.3;text-wrap:balance}
.item .valor{
  font:600 13.5px/1.4 var(--mono);color:var(--cinza);white-space:nowrap;flex:none;
  text-decoration:line-through;text-decoration-color:var(--tijolo);text-decoration-thickness:1.5px;
}
.item p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--cinza)}
.item .semaforo{margin-left:6px}

.totalzao{margin-top:28px;display:grid;justify-items:center;gap:2px}
.totalzao .de{
  font:500 16px/1.4 var(--mono);color:var(--cinza);
  text-decoration:line-through;text-decoration-color:var(--tijolo);text-decoration-thickness:2px;
}
.totalzao .por{font:800 clamp(54px,15vw,80px)/1 var(--display);letter-spacing:-.03em;color:var(--grafite)}

/* ═══ bloco 10 · garantia ═══ */
.selo{
  width:120px;height:120px;border-radius:50%;
  border:1.5px solid var(--grafite);display:grid;place-items:center;
  background:var(--papel);position:relative;margin:0 auto 22px;
}
.selo::after{content:"";position:absolute;inset:7px;border:1px dashed var(--cinza);border-radius:50%}
.selo div{text-align:center}
.selo .n7{font:800 38px/1 var(--display);letter-spacing:-.03em;color:var(--grafite);display:block}
.selo small{font:600 8.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cinza);display:block;margin-top:3px}

/* ═══ bloco 11 · quem preparou ═══ */
#quem-fez .avatar-cc{margin:0 auto 20px}

/* ═══ bloco 12 · FAQ ═══ */
.faq{max-width:680px;margin:26px auto 0;border-top:1px solid var(--cal);text-align:left}
.faq details{border-bottom:1px solid var(--cal)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:16px;
  padding:18px 4px;font:600 16.5px/1.45 var(--corpo);color:var(--grafite);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mais{
  flex:none;font:500 17px/1 var(--mono);color:var(--sinal);width:18px;
  transition:transform .18s ease;transform-origin:center;position:relative;top:1px;
}
.faq details[open] summary .mais{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.faq summary .mais{transition:none}}
.faq .resposta{padding:0 4px 20px 34px;font-size:15.5px;line-height:1.55;color:var(--cinza)}
.faq .resposta p{margin-top:12px}
.faq .resposta p:first-child{margin-top:0}

/* ═══ bloco 14 · botão WhatsApp de dúvidas ═══ */
.zap{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:54px;height:54px;border-radius:50%;
  background:var(--cta);color:var(--cta-tinta);
  display:grid;place-items:center;
  border:1.5px solid var(--breu);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.55);
  animation:sobe .35s ease-out both;
}
.zap[hidden]{display:none}
.zap svg{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){.zap{animation:none}}

/* rodapé mínimo */
.rodape{background:#04100F;color:#7E9694;padding:34px 0 40px;font:400 12.5px/1.7 var(--corpo)}
.rodape .env{display:grid;gap:10px;justify-items:start;text-align:left}
.rodape a{color:#9FB6B4;text-decoration:none}
.rodape a:hover{color:var(--sinal)}
.rodape .linhas-legais{max-width:640px}
.rodape nav{display:flex;gap:18px;flex-wrap:wrap}

/* ═══════════════ componentes novos do build v3 ═══════════════ */

/* dobra 4 · a conta do prejuízo (multiplicação em números grandes) */
.calc{
  margin:30px auto 0;max-width:720px;
  display:grid;gap:10px;justify-items:center;align-items:center;
}
.calc__parte{display:grid;gap:4px;justify-items:center}
.calc__valor{
  font:800 clamp(26px,7vw,40px)/1.05 var(--display);letter-spacing:-.03em;
  color:var(--grafite);
}
.calc__parte--soma .calc__valor{
  background:var(--sinal);border:2.5px solid var(--breu);border-radius:10px;
  padding:.06em .3em .12em;color:#221403;
}
.calc__rot{
  font:600 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza);
}
.calc__op{font:800 clamp(22px,6vw,32px)/1 var(--display);color:var(--sinal);opacity:.9}
@media (min-width:760px){
  .calc{grid-template-columns:1fr auto 1fr auto 1.15fr;gap:22px}
}

/* dobra 5 · linha do tempo do bloqueio (4 atos com fio conector) */
.atos{
  max-width:560px;margin:30px auto 0;text-align:left;
  position:relative;display:grid;gap:0;
}
.atos li{
  position:relative;display:flex;gap:18px;align-items:flex-start;
  padding:13px 0 13px 2px;
}
.atos li b{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--breu);color:var(--sinal-claro);
  font:700 14px/1 var(--mono);display:grid;place-items:center;
  position:relative;z-index:1;
}
.atos li:last-child b{background:var(--tijolo);color:#FFF3EF}
.atos li::before{
  content:"";position:absolute;left:17px;top:0;bottom:0;width:1.5px;
  background:var(--cal);
}
.atos li:first-child::before{top:13px}
.atos li:last-child::before{bottom:auto;height:13px}
.atos li span{font:500 16px/1.5 var(--corpo);color:var(--grafite);padding-top:6px}

/* dobra 6 · fatos oficiais (cartões sobre o breu) */
.fatos{max-width:640px;margin:28px auto 0;display:grid;gap:12px;text-align:left}
.fato{
  background:var(--breu-2);border:1px solid var(--breu-linha);border-radius:12px;
  padding:18px 20px;
}
.fato b{
  font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--sinal-claro);display:block;
}
.fato p{margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--claro-no-breu)}

/* dobra 6 · o medidor real (3 notas) */
.notas{
  max-width:640px;margin:26px auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.nota{
  background:var(--breu-2);border:1px solid var(--breu-linha);border-radius:12px;
  padding:16px 8px 14px;display:grid;gap:6px;justify-items:center;
}
.nota i{width:16px;height:16px;border-radius:50%;display:block}
.nota--vd i{background:#2E9E63;box-shadow:0 0 0 5px rgba(46,158,99,.16)}
.nota--am i{background:var(--sinal);box-shadow:0 0 0 5px rgba(232,161,58,.16)}
.nota--vm i{background:#D4574A;box-shadow:0 0 0 5px rgba(212,87,74,.16)}
.nota b{font:700 15px/1.2 var(--display);letter-spacing:-.01em;color:var(--giz)}
.nota span{
  font:600 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza-no-breu);text-align:center;
}

/* dobra 8 · antes e depois (duas colunas) */
.duplo{max-width:720px;margin:28px auto 0;display:grid;gap:14px}
@media (min-width:720px){.duplo{grid-template-columns:1fr 1fr;align-items:stretch}}
.lado{border-radius:14px;padding:22px 22px 24px;text-align:left;border:1.5px solid}
.lado--ruim{background:#FBF1EF;border-color:#E8C6BF}
.lado--bom{background:#EAF4EF;border-color:#C4DFD1}
.lado h3{font-size:18.5px;display:flex;align-items:center;gap:11px}
.lado h3::before{content:"";width:18px;height:3px;border-radius:2px;flex:none}
.lado--ruim h3::before{background:var(--tijolo)}
.lado--bom h3::before{background:var(--verde)}
.lado ul{margin-top:12px}
.lado li{padding:10px 0;border-top:1px dashed rgba(13,30,29,.14);font-size:15px;line-height:1.5;color:#41504E}

/* dobras 10 e 13 · peças de material / bônus (cartões neutros) */
.pecas{max-width:640px;margin:28px auto 0;display:grid;gap:12px}
.peca{
  background:var(--papel);border:1.5px solid var(--cal);border-radius:12px;
  padding:20px 22px;text-align:left;
}
.faixa--breu2 .peca{background:var(--breu);border-color:var(--breu-linha)}
.peca h3{font-size:18px;line-height:1.3}
.faixa--breu2 .peca h3{color:var(--giz)}
.peca p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--cinza)}
.faixa--breu2 .peca p{color:var(--cinza-no-breu)}

/* dobra 11 · a trilha dos 7 dias */
.trilha{max-width:560px;margin:28px auto 0;text-align:left;display:grid;gap:0}
.trilha li{position:relative;display:flex;gap:16px;align-items:baseline;padding:12px 0 12px 2px}
.trilha li b{
  flex:none;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:#221403;background:var(--sinal);border-radius:999px;padding:6px 10px;
  position:relative;z-index:1;
}
.trilha li:last-child b{background:var(--verde);color:#F0FAF5}
.trilha li::before{
  content:"";position:absolute;left:24px;top:0;bottom:0;width:1.5px;background:var(--cal);
}
.trilha li:first-child::before{top:14px}
.trilha li:last-child::before{bottom:auto;height:14px}
.trilha li span{font:500 15.5px/1.5 var(--corpo);color:var(--grafite)}

/* ═══════════════ páginas pós-compra (raio-x / obrigado) ═══════════════ */

/* faixa fina de confirmação */
.confirma{background:#E4F1EA;border-bottom:1px solid #C7E2D5;color:#1F5C43}
.confirma .env{display:flex;align-items:center;gap:11px;padding-block:11px;font:500 13.5px/1.5 var(--corpo)}
.confirma .ponto{width:22px;height:22px;border-radius:50%;background:var(--verde);flex:none;display:grid;place-items:center}
.confirma .ponto svg{width:12px;height:12px}

/* player placeholder (a VSL ainda vai ser renderizada) */
.player{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 0%,#10393D 0%,var(--breu-2) 48%,#04100F 100%);
  border:1.5px solid var(--breu);box-shadow:0 26px 56px -30px rgba(7,26,28,.6);
  display:grid;place-items:center;
}
.player::before{
  content:"";position:absolute;inset:auto;width:560px;height:560px;border-radius:50%;
  border:1px dashed rgba(232,161,58,.28);
}
.player::after{
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  border:1px dashed rgba(232,161,58,.18);
}
.player .play{
  position:relative;z-index:2;width:88px;height:88px;border-radius:50%;
  background:var(--sinal);border:2.5px solid #030D0E;display:grid;place-items:center;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
}
.player .play i{
  display:block;width:0;height:0;margin-left:6px;
  border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent #221403;
}
.player .rot{
  position:absolute;bottom:16px;left:0;right:0;z-index:2;text-align:center;
  font:600 10px/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cinza-no-breu);
}

/* agenda cal.com (mecânica copiada de apps/diagnostico/public/agendar.html) */
.calwrap{max-width:1000px;margin-inline:auto}
.calwrap iframe{
  width:100%;min-height:645px;border:0;border-radius:14px;
  /* o MESMO cinza do fundo do cal.com, senão aparece moldura branca que denuncia o iframe */
  background:#F8FAFC;box-shadow:0 10px 30px rgba(15,23,42,.07);
}
@media (max-width:640px){.calwrap iframe{min-height:720px}}
.cal-fallback{display:none;margin-top:14px;font-size:14.5px;color:var(--cinza)}
.cal-fallback a{color:var(--grafite);font-weight:600}
.cal-fallback.visivel{display:block}

/* passos numerados editoriais (upsell dobra 5 / obrigado dobra 2) */
.passos{display:grid;gap:0;border-top:1px solid var(--cal);max-width:720px}
.passos li{display:flex;align-items:baseline;gap:18px;padding:19px 4px;border-bottom:1px solid var(--cal)}
.passos li b{font:600 12px/1 var(--mono);color:var(--sinal);letter-spacing:.06em;flex:none}
.passos li div{font-size:16px;line-height:1.6;color:var(--cinza)}
.passos li div strong{color:var(--grafite);font-weight:600}

/* avatar tipográfico do Charles (decisão CEO: iniciais, sem foto) */
.quem{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,40px);align-items:start;max-width:780px}
@media (max-width:640px){.quem{grid-template-columns:1fr}}
.avatar-cc{
  width:96px;height:96px;border-radius:50%;flex:none;
  background:var(--breu);color:var(--giz);display:grid;place-items:center;
  font:700 30px/1 var(--display);letter-spacing:-.02em;
  box-shadow:0 0 0 3px var(--papel),0 0 0 4.5px var(--sinal);
}

/* bloco de objeção (upsell dobra 7) */
.objecao{
  background:var(--giz);border:1.5px solid var(--cal);border-radius:14px;
  padding:clamp(26px,4vw,44px);max-width:780px;
}
.objecao h2{font-size:clamp(23px,3vw,30px)}
.objecao .volta{margin-top:22px;font-size:15.5px}
.objecao .volta a{color:var(--grafite);font-weight:600;text-decoration-color:var(--sinal);text-underline-offset:3px}

/* semáforo (bônus A na LP + obrigado): 3 pontos de cor discretos */
.semaforo{display:inline-flex;gap:7px;margin-left:10px;position:relative;top:1px}
.semaforo i{width:11px;height:11px;border-radius:50%;display:block}
.semaforo .vd{background:#2E9E63}
.semaforo .am{background:var(--sinal)}
.semaforo .vm{background:var(--tijolo)}
