/* =====================================================================
   HIGHCLIN · landing — fundo claro, registro premium.
   Tipografia e neutros herdados da VALTE. Acento: Roxo 600 / Roxo 200.
   Todo número em DM Mono com tabular figures (regra do brand book §11).
   ===================================================================== */
:root{
  /* --ok e cor de SINAL; --ok-text e a mesma ideia medida para carregar
     letra. #16A34A da 3,3:1 sobre branco e reprova em texto pequeno. */
  --ok-text:#15803D;
  --v900:#2E0F8F; --v700:#4C2EFF; --v600:#5F3DFF; --v400:#8B72FF;
  --v200:#C4B8FF; --v100:#E7E1FF; --v050:#F3F0FF;
  --ink:#0B0B0F; --graf:#2B2D31; --g700:#4A4E57; --g500:#6B7280;
  --g400:#9AA1AC; --g300:#D7DCE3; --g200:#E8EBF0; --g100:#F0F2F5;
  --mist:#F7F8FA; --white:#fff;
  --ok:#16A34A; --warn:#F59E0B;
  --display:'Manrope',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --shell:1180px; --pad:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
svg{display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}

/* números sempre tabulares */
.preco,.mono,b,.li b,.ld-slots span,.imp-preco span{font-variant-numeric:tabular-nums}

/* ---------- símbolo ---------- */
.hc-pilar{fill:var(--v600)}
.hc-barra{fill:var(--v200)}
.mk{width:26px;height:29px}
.marca{display:flex;align-items:center;gap:11px}
.wm{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:.14em}

/* ---------- tipografia ---------- */
.h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.05;letter-spacing:-.03em}
.h1 em{font-style:normal;color:var(--v600)}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.8vw,2.9rem);line-height:1.14;letter-spacing:-.025em}
.etq,.etq-alt{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--v600)}
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--v600)}
.lead{font-size:clamp(1.05rem,1.7vw,1.26rem);line-height:1.62;color:var(--g700);max-width:52ch;margin-top:1.5rem}
.sub{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--g700);max-width:60ch;margin-top:1rem;line-height:1.62}
.micro{font-family:var(--mono);font-size:.82rem;color:var(--g500);margin-top:1.1rem}
.sec .h2{margin-top:.9rem}

/* ---------- botões ---------- */
.btn{
  /* min-height garante o alvo de toque de 44px: so com padding o botao do
     cabecalho ficava em 42px no celular, e ele e o CTA principal do topo. */
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--v600);color:#fff;font-weight:500;border-radius:12px;
  padding:.85em 1.5em;font-size:1rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s;
  box-shadow:0 10px 30px -12px rgba(95,61,255,.7);
}
.btn:hover{background:var(--v700);transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(95,61,255,.85)}
.btn-lg{padding:1.05em 1.9em;font-size:1.06rem}
.btn-sm{padding:.6em 1.1em;font-size:.92rem;border-radius:10px;box-shadow:none}
.btn-out{background:transparent;color:var(--v600);border:1.5px solid var(--g300);box-shadow:none}
.btn-out:hover{background:var(--v050);border-color:var(--v400);color:var(--v700)}
/* Zera o que o .btn põe: sem isto, escrever "btn btn-ghost" junto dá texto
   cinza sobre fundo roxo (1,43:1, ilegível) e o botão sem respiro nas laterais,
   porque o padding daqui é quase zero. Aconteceu no botão do WhatsApp. */
.btn-ghost{display:inline-flex;align-items:center;color:var(--g700);font-weight:500;padding:.85em .2em;position:relative;background:transparent;box-shadow:none;min-height:0}
.btn-ghost::after{content:"";position:absolute;left:.2em;right:.2em;bottom:.62em;height:1px;background:var(--g300);transition:background .25s}
.btn-ghost:hover{color:var(--ink)}
.btn-ghost:hover::after{background:var(--v600)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem;margin-top:2rem}
.cta-row.center{justify-content:center}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:1.05rem var(--pad);
  transition:background .35s,backdrop-filter .35s,border-color .35s,padding .35s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom-color:var(--g200);padding-block:.7rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(8.5rem,16vh,11.5rem) 0 clamp(3.5rem,7vh,5.5rem);overflow:hidden}
.halo{
  position:absolute;top:-28%;right:-10%;width:60vw;height:60vw;max-width:820px;max-height:820px;
  background:radial-gradient(circle,rgba(95,61,255,.16),transparent 66%);
  filter:blur(30px);pointer-events:none;
}
.hero-in{position:relative;z-index:1}
.h1{margin-top:1.1rem}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.h1 .ln>span{display:block;transform:translateY(110%);opacity:0;animation:up 1s var(--ease) forwards}
.h1 .ln:nth-child(1)>span{animation-delay:.08s}
.h1 .ln:nth-child(2)>span{animation-delay:.18s}
.h1 .ln:nth-child(3)>span{animation-delay:.28s}
@keyframes up{to{transform:translateY(0);opacity:1}}

/* painel de conciliação */
.painel{
  margin-top:clamp(3rem,6vw,4.5rem);max-width:620px;
  border:1px solid var(--g200);border-radius:18px;background:#fff;
  box-shadow:0 40px 80px -50px rgba(11,11,15,.4);overflow:hidden;
}
.painel-top{display:flex;justify-content:space-between;align-items:center;padding:.95rem 1.5rem;border-bottom:1px solid var(--g200);background:var(--mist);font-size:.82rem;font-weight:500;letter-spacing:.01em;color:var(--g700)}
.painel-top .ok{color:var(--ok-text);display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.painel-top .ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.linhas{padding:.5rem 1.4rem}
.li{display:flex;justify-content:space-between;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--g100);font-size:1rem;color:var(--g700)}
.li:last-child{border-bottom:0}
.li b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.li.alerta b{color:var(--warn)}
.painel-pe{padding:1.05rem 1.5rem;background:#fff;font-size:.92rem;line-height:1.5;color:var(--g700);border-top:1px solid var(--g200)}

/* ---------- seções ---------- */
.sec{padding:clamp(4.5rem,10vw,7.5rem) 0}
.sec-mist{background:var(--mist)}
.sec-ink{background:var(--ink);color:#fff}
.sec-ink .etq{color:var(--v400)}
.sec-ink .sub{color:#B3B7C2}
.pull{margin-top:clamp(2.5rem,5vw,3.5rem);font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,3vw,2rem);line-height:1.28;letter-spacing:-.02em;max-width:26ch}

/* as quatro versões */
.versoes{display:grid;gap:1.1rem;margin-top:clamp(2.4rem,5vw,3.4rem)}
@media(min-width:760px){.versoes{grid-template-columns:repeat(4,1fr)}}
.versoes>div{padding:1.5rem 1.3rem;border:1px solid var(--g200);border-radius:16px;background:#fff;transition:transform .4s var(--ease),border-color .4s}
.versoes>div:hover{transform:translateY(-4px);border-color:var(--v200)}
.versoes .n{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;color:var(--v600)}
.versoes h3{font-family:var(--display);font-weight:700;font-size:1.2rem;margin:.4rem 0 .45rem}
.versoes p{color:var(--g700);font-size:.96rem;line-height:1.55}

/* fluxo */
.fluxo{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:clamp(2.4rem,5vw,3.4rem)}
.fx{border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:.85rem 1.3rem;font-family:var(--mono);font-size:.9rem;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.05)}
.fs{flex:1;min-width:24px;height:2px;background:linear-gradient(90deg,var(--v400),rgba(139,114,255,.25))}
.rule{margin-top:clamp(2.4rem,4vw,3.2rem);padding:1.1rem 1.4rem;border-left:3px solid var(--v400);background:rgba(255,255,255,.05);border-radius:0 12px 12px 0;color:#fff;max-width:62ch}
.sec:not(.sec-ink) .rule{border-left-color:var(--v600);background:#fff;color:var(--ink);border:1px solid var(--g200);border-left:3px solid var(--v600)}

/* benefícios */
.benef{display:grid;gap:1.1rem;margin-top:clamp(2.4rem,5vw,3.4rem)}
@media(min-width:800px){.benef{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
.benef article{padding:1.7rem 1.6rem;border-radius:18px;background:var(--mist);border:1px solid var(--g200)}
.benef h3{font-family:var(--display);font-weight:700;font-size:1.24rem;letter-spacing:-.015em;margin-bottom:.5rem}
.benef p{color:var(--g700);font-size:1rem;line-height:1.6}

/* agendamento */
.agenda-grid{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:center}
@media(min-width:900px){.agenda-grid{grid-template-columns:1fr .85fr}}
.link-demo{border:1px solid var(--g200);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 30px 70px -50px rgba(11,11,15,.4)}
.ld-top{padding:.9rem 1.3rem;border-bottom:1px solid var(--g200);font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g500)}
.ld-url{padding:1.2rem 1.3rem .4rem;font-family:var(--mono);font-size:.98rem;color:var(--g500);word-break:break-all}
.ld-url b{color:var(--v600);font-weight:500}
.ld-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:1rem 1.3rem 1.3rem}
.ld-slots span{border:1px solid var(--g300);border-radius:10px;padding:.6rem 0;text-align:center;font-family:var(--mono);font-size:.92rem;color:var(--g700)}
.ld-slots .on{background:var(--v600);border-color:var(--v600);color:#fff}
.ld-pe{padding:1rem 1.3rem;background:var(--mist);border-top:1px solid var(--g200);font-size:.9rem;color:var(--g500)}

/* módulos */
.mods{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(2.2rem,4vw,3rem)}
.mods li{border:1px solid var(--g300);border-radius:100px;padding:.6rem 1.2rem;font-size:.98rem;color:var(--g700);transition:border-color .3s,color .3s,background .3s}
.mods li:hover{border-color:var(--v400);color:var(--v700);background:var(--v050)}

/* ---------- planos ---------- */
.planos{display:grid;gap:1.2rem;margin-top:clamp(2.6rem,5vw,3.6rem);align-items:start}
@media(min-width:900px){.planos{grid-template-columns:repeat(3,1fr)}}
.plano{position:relative;background:#fff;border:1px solid var(--g200);border-radius:20px;padding:2rem 1.7rem;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plano:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(11,11,15,.35)}
.plano.destaque{border:2px solid var(--v600);box-shadow:0 30px 70px -40px rgba(95,61,255,.55)}
.badge{position:absolute;top:-13px;left:1.7rem;background:var(--v600);color:#fff;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.4em .9em;border-radius:100px}
.nivel{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--v600)}
.plano h3{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.02em;margin:.35rem 0 .5rem}
.transf{color:var(--g700);font-size:1rem;line-height:1.5;min-height:3em}
.preco{font-family:var(--mono);font-weight:500;font-size:2.9rem;color:var(--ink);margin:1.2rem 0 1.4rem;letter-spacing:-.03em;line-height:1}
.preco .cif{font-size:1.2rem;margin-right:.22rem;color:var(--g500)}
.preco .mes{font-size:.95rem;color:var(--g500);letter-spacing:0;margin-left:.2rem}
.plano .btn,.plano .btn-out{width:100%}
.recursos{list-style:none;display:grid;gap:.7rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--g200)}
.recursos li{position:relative;padding-left:1.7rem;font-size:.97rem;color:var(--g700);line-height:1.45}
.recursos li::before{content:"";position:absolute;left:.1rem;top:.35em;width:6px;height:11px;border-right:2px solid var(--v600);border-bottom:2px solid var(--v600);transform:rotate(42deg)}

/* moldura do Mapeamento */
.moldura{margin-top:clamp(2rem,4vw,2.8rem);border:1.5px dashed var(--v400);border-radius:18px;padding:1.8rem 1.7rem;background:var(--v050)}
.moldura h3{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;margin:.5rem 0 .6rem}
.moldura p{color:var(--g700);max-width:70ch;line-height:1.6}
.etq-alt{color:var(--v600)}

/* implantação */
.implantacao{margin-top:1.2rem;background:var(--ink);color:#fff;border-radius:18px;padding:1.8rem 1.7rem;display:grid;gap:1.4rem;align-items:center}
@media(min-width:760px){.implantacao{grid-template-columns:1fr auto}}
.implantacao .etq-alt{color:var(--v400)}
.imp-txt{margin-top:.5rem;color:#D7DCE3;max-width:52ch;line-height:1.55}
.imp-txt strong{color:#fff}
.imp-preco{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.imp-preco .de{font-family:var(--mono);font-size:1.2rem;color:var(--g400);text-decoration:line-through}
.imp-preco .por{font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--v400);letter-spacing:-.02em}
.imp-preco .cond{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);width:100%}
.nota{margin-top:1rem;font-size:.86rem;color:var(--g500);line-height:1.55;max-width:78ch}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--g200)}
.faq details{border-bottom:1px solid var(--g200)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 2.6rem 1.35rem 0;position:relative;font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.9vw,1.18rem);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--v600)}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;border-right:2px solid var(--v600);border-bottom:2px solid var(--v600);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 2.6rem 1.5rem 0;color:var(--g700);line-height:1.68;max-width:72ch}

/* ---------- fechamento ---------- */
.fim{background:var(--mist);padding:clamp(5rem,11vw,8rem) 0;text-align:center;border-top:1px solid var(--g200)}
.fim-in{display:flex;flex-direction:column;align-items:center}
.mk-big{width:64px;height:72px;margin-bottom:1.8rem}
.fim .sub{margin-inline:auto;text-align:center}

/* ---------- rodapé ---------- */
.ft{border-top:1px solid var(--g200);padding:2.4rem 0}
.ft-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}
.ft-marca{display:flex;align-items:center;gap:11px}
.ft-by{font-size:.92rem;color:var(--g500)}
.ft-by strong{color:var(--ink);font-family:var(--display);font-weight:800;letter-spacing:.06em}
.ft-legal{font-family:var(--mono);font-size:.76rem;color:var(--g500)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
.mods li.reveal{transition-delay:calc(var(--i,0) * .04s)}

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

/* ---------- ajustes da v2 (dados reais do site no ar) ---------- */
.eyebrow .by{color:var(--g500);font-weight:400}
.h2 .dim{color:var(--g500);font-weight:500}
.sec-ink .h2 .dim{color:var(--g400)}

/* KPIs do painel */
/* ---------- painel do herói ----------
   Hierarquia em vez de grade: um número manda, os outros apoiam. A meta vira
   barra porque meta pede barra, e a receita ganha sete barrinhas para deixar
   de ser um número solto no branco. Tudo em CSS, sem imagem e sem biblioteca. */
.painel-corpo{padding:1.5rem}
.painel-corpo .rot{display:block;font-size:.76rem;letter-spacing:.01em;color:var(--g500);margin-bottom:.4rem}
/* ESCOPADO ao painel de propósito. Solto, este seletor pegava também o
   cartão do Flow, que é "plano destaque": como o cartão é um flex COLUNA,
   o align-items:flex-end jogava nível, título, promessa e preço para a
   direita, e o justify-content:space-between espalhava tudo na vertical —
   deixando o Flow como o único dos três planos fora de alinhamento. */
.painel-corpo .destaque{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.numerao{display:block;font-family:var(--mono);font-weight:500;font-size:2.1rem;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.delta{display:inline-block;margin-top:.45rem;font-size:.76rem;color:var(--ok-text)}

/* As barrinhas: sete dias, a de hoje em roxo cheio. `align-items:flex-end`
   faz elas crescerem de baixo para cima, que é como se lê um gráfico. */
.spark{display:flex;align-items:flex-end;gap:5px;height:56px;flex:0 0 auto}
.spark i{width:9px;height:var(--h);border-radius:3px;background:var(--v100)}
.spark i.hoje{background:var(--v600)}

.meta{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--g100)}
.meta-topo{display:flex;align-items:baseline;justify-content:space-between}
.meta-topo .rot{margin-bottom:0}
.meta-topo b{font-family:var(--mono);font-weight:500;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.barra{height:8px;border-radius:99px;background:var(--g100);overflow:hidden;margin-top:.6rem}
.barra i{display:block;height:100%;width:var(--p);border-radius:99px;
  background:linear-gradient(90deg,var(--v400),var(--v600))}
.meta-pe{display:block;margin-top:.55rem;font-size:.76rem;color:var(--g500)}

.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--g100)}
.mini b{font-family:var(--mono);font-weight:500;font-size:1.22rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.mini .alerta b{color:var(--warn)}


.painel-pe strong{color:var(--ink)}

/* auditoria contínua + as três frases */
.auditoria{margin-top:1.2rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--v400)}
.tres{display:grid;gap:1rem;margin-top:clamp(2.4rem,4vw,3.2rem)}
@media(min-width:820px){.tres{grid-template-columns:repeat(3,1fr);gap:1.6rem}}
.tres p{position:relative;padding-left:1.4rem;color:#D7DCE3;line-height:1.55}
.tres p::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--v400)}

/* comparativo */
.vs{margin-top:clamp(2.2rem,4vw,3rem);border:1px solid var(--g200);border-radius:18px;overflow:hidden;background:#fff}
.vs-head{display:none}
@media(min-width:820px){
  .vs-head{display:grid;grid-template-columns:1fr 1.1fr;background:var(--g100);border-bottom:1px solid var(--g200)}
  .vs-head span{padding:1rem 1.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
  .vs-head .vs-a{color:var(--g700)}
  .vs-head .vs-b{color:var(--v600);background:var(--v050);border-left:1px solid var(--g200)}
}
.vs-row{display:grid;border-bottom:1px solid var(--g200)}
.vs-row:last-child{border-bottom:0}
@media(min-width:820px){.vs-row{grid-template-columns:1fr 1.1fr}}
.vs-a,.vs-b{padding:1.1rem 1.5rem;font-size:1rem;line-height:1.5}
.vs-a{color:var(--g500)}
.vs-b{color:var(--ink);font-weight:500;background:var(--v050);border-left:1px solid var(--g200)}
@media(max-width:819px){.vs-b{border-left:0}.vs-a{padding-bottom:.5rem}.vs-b{padding-top:.5rem}}

/* módulos como cartões */
.mods{display:grid;gap:1rem;margin-top:clamp(2.4rem,5vw,3.4rem)}
@media(min-width:700px){.mods{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.mods{grid-template-columns:repeat(3,1fr)}}
.mods article{background:#fff;border:1px solid var(--g200);border-radius:16px;padding:1.5rem 1.4rem;transition:transform .4s var(--ease),border-color .4s}
.mods article:hover{transform:translateY(-4px);border-color:var(--v200)}
.mods h3{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;margin-bottom:.45rem}
.mods p{color:var(--g700);font-size:.95rem;line-height:1.55}

/* etapas da adoção */
.etapas{list-style:none;display:grid;gap:1.1rem;margin-top:clamp(2.4rem,5vw,3.4rem);counter-reset:e}
@media(min-width:820px){.etapas{grid-template-columns:repeat(3,1fr)}}
.etapas li{position:relative;padding:1.7rem 1.5rem;border:1px solid var(--g200);border-radius:18px;background:#fff}
@media(min-width:820px){.etapas li:not(:last-child)::after{content:"";position:absolute;right:-.72rem;top:50%;width:11px;height:11px;z-index:2;border-right:2px solid var(--v400);border-top:2px solid var(--v400);transform:translateY(-50%) rotate(45deg)}}
.e-n{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--v600)}
.etapas h3{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;margin:.4rem 0 .5rem}
.etapas p{color:var(--g700);font-size:.97rem;line-height:1.58}

/* alternador mensal/anual */
.ciclo{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:clamp(1.8rem,3vw,2.4rem)}
.cic{min-height:44px;font-family:var(--sans);font-size:.95rem;font-weight:500;padding:.6em 1.3em;border-radius:100px;border:1.5px solid var(--g300);background:#fff;color:var(--g700);cursor:pointer;transition:all .25s}
.cic.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cic-nota{font-size:.9rem;color:var(--g500);margin-left:.6rem}
.preco .val{transition:opacity .2s}

/* A frase de posicionamento fica separada da promessa: uma vende o momento da
   clínica, a outra explica o que ela recebe. Juntas num parágrafo só, a
   segunda apagava a primeira. */
.explica{color:var(--g500);font-size:.93rem;line-height:1.5;margin-top:.45rem;min-height:3em}

/* bloco de oferta abaixo do preço (escrito pelo app.js) */
.oferta{margin-top:-.7rem;margin-bottom:1.3rem;display:grid;gap:.3rem}
.of-nota{font-size:.88rem;color:var(--g500)}
.of-forte{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink)}
.of-ok{font-family:var(--mono);font-size:.85rem;color:var(--ok-text)}
.of-bonus{font-size:.85rem;line-height:1.4;color:var(--v600);background:var(--v050);border-radius:10px;padding:.5rem .65rem}

/* Quando a tabela de preços não chega, a página continua vendendo o produto,
   só sem número. Ver o .catch do app.js. */
#planos.sem-preco .ciclo,
#planos.sem-preco .preco,
#planos.sem-preco .oferta,
#planos.sem-preco .imp-preco{display:none}
/* encontre o plano certo — substituiu a tabela de comparação.
   Trinta linhas de ✓ e - transformavam a landing em documentação: a pessoa
   parava para ler em vez de decidir. Três frases respondem à pergunta real
   ("qual sou eu?") e mandam a comparação detalhada para dentro do sistema. */
.escolha{margin-top:clamp(2.4rem,5vw,3.2rem);background:#fff;border:1px solid var(--g200);border-radius:20px;padding:clamp(1.4rem,3.4vw,2.2rem)}
.escolha h3{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.6rem);letter-spacing:-.02em;margin-bottom:clamp(1.2rem,2.6vw,1.6rem)}
/* Três colunas no desktop, empilhadas no celular. Sem rolagem lateral: é a
   diferença de peso entre esta seção e a tabela que ela substituiu. */
.escolha-lista{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);grid-template-columns:1fr;list-style:none;counter-reset:none}
@media(min-width:820px){.escolha-lista{grid-template-columns:repeat(3,1fr)}}
/* O traço no topo separa os três blocos sem precisar de caixa dentro de caixa. */
.escolha-lista li{border-top:2px solid var(--v600);padding-top:.9rem}
.escolha-eixo{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--v600)}
.escolha-plano{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;margin:.15rem 0 .45rem}
.escolha-txt{color:var(--g700);font-size:.95rem;line-height:1.55}
.escolha-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;margin-top:clamp(1.5rem,3vw,2rem);padding-top:clamp(1.3rem,2.6vw,1.7rem);border-top:1px solid var(--g100)}
.escolha-nota{color:var(--g500);font-size:.9rem}

/* moldura com lista */
.moldura ul{list-style:none;display:grid;gap:.6rem;margin-top:1rem}
.moldura li{position:relative;padding-left:1.6rem;color:var(--g700);font-size:.97rem}
.moldura li::before{content:"";position:absolute;left:.1rem;top:.4em;width:6px;height:11px;border-right:2px solid var(--v600);border-bottom:2px solid var(--v600);transform:rotate(42deg)}

/* contatos no fechamento */
.contatos{display:grid;gap:.8rem;margin-top:clamp(2.4rem,5vw,3.2rem);width:100%;max-width:820px}
@media(min-width:700px){.contatos{grid-template-columns:repeat(3,1fr)}}
.contatos a{border:1px solid var(--g200);border-radius:14px;padding:1.05rem;display:flex;flex-direction:column;gap:.25rem;background:#fff;transition:border-color .3s,transform .3s var(--ease)}
.contatos a:hover{border-color:var(--v400);transform:translateY(-3px)}
.contatos span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g500)}
.contatos b{font-weight:500;font-size:.95rem;word-break:break-word}

/* ---------- formulário de lead ----------
   Ele volta porque o WhatsApp sozinho não alimenta o funil: quem chama lá vira
   conversa, não vira lead com etapa, dono e alerta de parado. Este envio cria o
   lead no CRM, igual ao que chega pelo Instagram.

   Fica na seção final, com o WhatsApp logo abaixo em botão fantasma. A ordem é
   deliberada: quem prefere ser chamado deixa o contato; quem quer falar agora
   continua com um clique de distância. */
/* .lead-form, e não .lead: o parágrafo do herói já usava esse nome, e como
   esta regra vem depois no arquivo ela vencia e centralizava o parágrafo,
   abrindo um vão em branco à esquerda dele. Duas coisas diferentes não podem
   dividir o mesmo nome de classe. */
.lead-form{
  width:100%;max-width:560px;margin:clamp(2rem,4vw,2.8rem) auto 0;
  text-align:left;
}
.lead-campos{display:grid;gap:.9rem}
@media(min-width:620px){.lead-campos{grid-template-columns:1fr 1fr}}
.campo{display:block}
.campo span{
  display:block;margin-bottom:.4rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g500);
}
.campo input{
  width:100%;min-height:48px;padding:0 .95rem;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--g300);border-radius:12px;
  transition:border-color .2s var(--ease);
}
.campo input::placeholder{color:var(--g400)}
.campo input:hover{border-color:var(--g400)}
.campo input:focus{outline:2px solid var(--v400);outline-offset:2px;border-color:var(--v600)}

.lead-form .btn-block{width:100%;margin-top:1.2rem}
.lead-msg{margin-top:.85rem;text-align:center}
.lead-msg.is-erro{color:#B42318}

/* Fora da tela, e não display:none: alguns robôs pulam o que está escondido
   por display e escapariam da armadilha. */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lead-ok{
  width:100%;max-width:560px;margin:clamp(2rem,4vw,2.8rem) auto 0;
  padding:1.6rem;border-radius:16px;
  background:var(--v050);border:1.5px solid var(--v200);text-align:center;
}
.lead-ok-t{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--v900)}
.lead-ok p + p{margin-top:.5rem;color:var(--g700)}

/* Link para a empresa no rodapé. Sublinhado discreto: é informação
   institucional, não chamada para ação. */
.ft-valte{color:var(--g700);text-decoration:none;border-bottom:1px solid var(--g300)}
.ft-valte:hover,.ft-valte:focus-visible{color:var(--v700);border-bottom-color:var(--v700)}