
/* Layout: página clara, uma jornada em passos (Passo 1 a 5) com uma demonstração viva ao lado de cada passo; celular com o placar na abertura. */
:root{
  --bg:#FFFFFF; --soft:#F7F6FB; --surface:#FFFFFF; --sunk:#F1EFF8; --ink:#16122E; --text:#2A2545; --muted:#6B6785; --line:#E8E5F1;
  --violet:#6A3CF6; --violet-2:#8B67FF; --violet-soft:#F0EBFF; --gold:#F2B51B; --gold-ink:#7A5500; --rose:#E0457B; --ok:#16A06B;
  --f:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:16px; --rb:12px; --shadow:0 1px 2px rgba(22,18,46,.05),0 18px 40px -18px rgba(22,18,46,.22); --glow:0 10px 24px -8px rgba(106,60,246,.45);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E0B1F; --soft:#14102B; --surface:#1A1534; --sunk:#221B44; --ink:#F4F2FB; --text:#E4E1F2; --muted:#A6A1C4; --line:#2C2652;
  --violet:#9C82FF; --violet-2:#B7A3FF; --violet-soft:#261E55; --gold:#F5BF33; --gold-ink:#F5BF33; --rose:#F06C99; --ok:#3CC48D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.7); --glow:0 10px 24px -10px rgba(156,130,255,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E0B1F; --soft:#14102B; --surface:#1A1534; --sunk:#221B44; --ink:#F4F2FB; --text:#E4E1F2; --muted:#A6A1C4; --line:#2C2652;
  --violet:#9C82FF; --violet-2:#B7A3FF; --violet-soft:#261E55; --gold:#F5BF33; --gold-ink:#F5BF33; --rose:#F06C99; --ok:#3CC48D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.7); --glow:0 10px 24px -10px rgba(156,130,255,.5); color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.02rem/1.65 var(--f);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.025em}
h1{font-size:clamp(2.4rem,5.2vw,3.9rem);line-height:1.06;font-weight:800}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;font-weight:800}
h3{font-size:1.12rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.lead{font-size:1.15rem;color:var(--muted);max-width:58ch}
.centro{text-align:center;margin-inline:auto}
.passo-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--violet);background:var(--violet-soft);border-radius:999px;padding:6px 12px}
.grad{background:linear-gradient(90deg,var(--violet),var(--violet-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1rem/1 var(--f);text-decoration:none;border-radius:var(--rb);padding:15px 22px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--violet);color:#fff;box-shadow:var(--glow)}
.btn-s{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-sm{padding:11px 16px;font-size:.92rem}

/* topo */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.55rem/1 "Baloo 2","Trebuchet MS",system-ui,sans-serif;color:#1D1442;letter-spacing:-.01em}
.logo .mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#6C3BFF,#C23BFF);display:grid;place-items:center;flex:none;box-shadow:0 4px 12px rgba(108,59,255,.25)}.logo .mark svg{width:100%;height:100%;display:block}.logo b{color:#FF4F8B;font-weight:800}
.nav{display:flex;gap:24px;margin-left:auto;font-size:.95rem;color:var(--muted);font-weight:500}
.nav a{text-decoration:none}.nav a:hover{color:var(--ink)}
.top .acoes{display:flex;gap:12px;align-items:center}
.entrar{font-weight:700;text-decoration:none;color:var(--ink);font-size:.95rem}
@media(max-width:960px){.nav{display:none}.top .acoes{margin-left:auto}}
@media(max-width:420px){.entrar{display:none}}

/* abertura */
.hero{padding-block:64px 80px;background:radial-gradient(60% 60% at 80% 20%,color-mix(in srgb,var(--violet) 10%,transparent),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero .txt{display:flex;flex-direction:column;gap:22px;min-width:0}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.micro{font-size:.88rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:4px 0 0}
.chips li{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.chips svg{width:15px;height:15px;color:var(--violet)}
@media(max-width:960px){.hero .wrap{grid-template-columns:1fr}.hero{padding-block:44px 60px}}

/* celular */
.fone-area{display:flex;justify-content:center;position:relative;min-width:0}
.fone{width:300px;max-width:100%;border-radius:42px;background:#0E0B1F;padding:12px;box-shadow:0 30px 60px -20px rgba(22,18,46,.45),0 0 0 1px rgba(255,255,255,.06) inset}
.tela{border-radius:32px;background:var(--soft);overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.tela-top{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 8px;font-size:.75rem;font-weight:700;color:var(--ink)}
.app-cab{display:flex;align-items:center;gap:10px;padding:6px 16px 12px}
.app-cab .av{width:34px;height:34px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.78rem}
.app-cab b{display:block;color:var(--ink);font-size:.95rem;line-height:1.2}
.app-cab span{font-size:.75rem;color:var(--muted)}
.app-corpo{padding:0 12px 14px;display:flex;flex-direction:column;gap:10px}
.cartao{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 13px;display:flex;flex-direction:column;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpis div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 10px}
.kpis small{display:block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpis b{font-size:.95rem;color:var(--ink);white-space:nowrap}
.linha{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;color:var(--text)}
.linha b{color:var(--ink)}
.barra{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--violet-2));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.barra.ouro i{background:var(--gold)}
.dica{font-size:.74rem;color:var(--muted)}
.mini-rank{display:flex;flex-direction:column;gap:4px;font-size:.82rem}
.mini-rank div{display:grid;grid-template-columns:22px 1fr auto;gap:8px;padding:6px 8px;border-radius:10px}
.mini-rank div:first-child{background:color-mix(in srgb,var(--gold) 18%,transparent)}
.mini-rank span:first-child{color:var(--muted);font-weight:700}
.toast{position:absolute;right:-6px;bottom:70px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:11px 13px;display:flex;gap:10px;align-items:center;font-size:.84rem;max-width:240px}
.toast .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);flex:none}
.toast b{display:block;color:var(--ink)}.toast span{color:var(--muted)}
@media(max-width:620px){.toast{display:none}}

/* quatro viraram uma */
.sec{padding-block:96px}
.sec.soft{background:var(--soft);border-block:1px solid var(--line)}
.cab{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:44px}
.cab.centro{align-items:center;text-align:center}
.quatro{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s}
.card:hover{border-color:color-mix(in srgb,var(--violet) 45%,var(--line));transform:translateY(-2px)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet)}
.card .ic svg{width:22px;height:22px}
.card p{color:var(--muted);font-size:.95rem}
.card a{font-weight:700;color:var(--violet);text-decoration:none;font-size:.92rem;margin-top:auto}
@media(max-width:1000px){.quatro{grid-template-columns:1fr 1fr}}@media(max-width:560px){.quatro{grid-template-columns:1fr}}

/* jornada */
.etapa{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.etapa+.etapa{margin-top:110px}
.etapa.inv .e-txt{order:2}
.e-txt{display:flex;flex-direction:column;gap:18px;min-width:0}
.sub4{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.sub4 div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.sub4 h4{font-size:.95rem;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.sub4 p{font-size:.88rem;color:var(--muted);line-height:1.5}
@media(max-width:960px){.etapa{grid-template-columns:1fr;gap:34px}.etapa.inv .e-txt{order:0}.sec{padding-block:72px}.etapa+.etapa{margin-top:80px}}
@media(max-width:480px){.sub4{grid-template-columns:1fr}}

/* demonstrações */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.demo-cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.demo-cab b{color:var(--ink)}
.pill{font-size:.72rem;font-weight:700;border-radius:999px;padding:5px 10px;background:var(--violet-soft);color:var(--violet);white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.pill.pend{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold-ink)}
.pill.obr{background:color-mix(in srgb,var(--rose) 14%,transparent);color:var(--rose)}
.regra{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.regra b{display:block;color:var(--ink);font-size:.95rem}
.regra small{color:var(--muted);font-size:.82rem}
.faixas{display:flex;gap:6px;flex-wrap:wrap}
.faixas span{font-size:.76rem;font-weight:700;border:1px dashed var(--line);border-radius:8px;padding:5px 8px;color:var(--muted)}
.faixas span.on{border-style:solid;border-color:var(--violet);color:var(--violet);background:var(--violet-soft)}
.tabela{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tabela div{display:grid;grid-template-columns:1.3fr 1fr auto;gap:10px;align-items:center;padding:11px 14px;font-size:.88rem;border-top:1px solid var(--line)}
.tabela div:first-child{border-top:0;background:var(--soft);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tabela b{color:var(--ink)}
.acoes-mini{display:flex;gap:6px}
.acoes-mini span{font-size:.75rem;font-weight:700;border-radius:8px;padding:6px 9px}
.acoes-mini .sim{background:var(--ok);color:#fff}.acoes-mini .nao{border:1px solid var(--line);color:var(--muted)}
.aula{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:14px}
.thumb{width:58px;aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,var(--violet),var(--violet-2));display:grid;place-items:center;color:#fff}
.thumb svg{width:18px;height:18px}
.aula b{display:block;color:var(--ink);font-size:.92rem}.aula small{color:var(--muted);font-size:.78rem}
.post{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px}
.post-cab{display:flex;gap:10px;align-items:center}
.pav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 .76rem/1 var(--f);color:#fff;flex:none}
.post-cab b{display:block;color:var(--ink);font-size:.92rem}.post-cab span{font-size:.78rem;color:var(--muted)}
.foto{border-radius:12px;aspect-ratio:16/7;background:radial-gradient(circle at 20% 70%,color-mix(in srgb,var(--gold) 75%,transparent) 0 13%,transparent 14%),radial-gradient(circle at 74% 38%,color-mix(in srgb,var(--violet) 55%,transparent) 0 19%,transparent 20%),linear-gradient(135deg,var(--violet-soft),color-mix(in srgb,var(--gold) 20%,var(--surface)));display:grid;place-items:center;font-weight:800;color:var(--ink)}
.reacoes{display:flex;gap:6px;flex-wrap:wrap}
.reacoes span{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:4px 9px;color:var(--muted)}
.aviso{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:13px;background:color-mix(in srgb,var(--rose) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--rose) 30%,transparent)}
.aviso svg{width:20px;height:20px;color:var(--rose);flex:none}
.aviso b{display:block;color:var(--ink);font-size:.92rem}.aviso small{color:var(--muted);font-size:.8rem}
.lido{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted)}.lido .barra{flex:1}
.chat{display:flex;flex-direction:column;gap:8px}
.bolha{max-width:84%;padding:9px 12px;border-radius:14px;font-size:.88rem;background:var(--sunk);color:var(--text)}
.bolha.eu{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:4px}
.bolha.ele{border-bottom-left-radius:4px}
.bolha small{display:block;font-size:.7rem;opacity:.75;margin-top:3px}
.pag{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.pag b{color:var(--ink);display:block;font-size:.92rem}.pag small{color:var(--muted);font-size:.8rem}
.pag .v{font-weight:800;color:var(--ink)}
.total{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border-radius:14px;padding:12px 14px;font-weight:700;color:var(--ink)}

/* preços */
.ciclo{display:inline-flex;background:var(--sunk);border-radius:12px;padding:4px;gap:4px}
.ciclo button{border:0;background:transparent;font:700 .92rem/1 var(--f);color:var(--muted);padding:11px 18px;border-radius:9px;cursor:pointer}
.ciclo button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(22,18,46,.15)}
.ciclo .desc{font-size:.7rem;color:var(--ok);margin-left:6px}
.calc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;max-width:700px}
.calc label{font-weight:700;color:var(--ink)}
.calc input{width:110px;font:700 1rem/1 var(--f);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text)}
.calc span{color:var(--muted);font-size:.92rem;flex-basis:100%}.calc span b{color:var(--ink)}
.controles{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:36px}
.planos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plano{border:1px solid var(--line);border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;gap:16px;background:var(--surface);position:relative}
.plano.dest{border:2px solid var(--violet);box-shadow:var(--glow)}
.plano.rec{outline:3px solid var(--gold);outline-offset:3px}
.plano .pessoas{font-size:.8rem;font-weight:700;color:var(--violet)}
.plano .para{color:var(--muted);font-size:.92rem}
.valor{display:flex;flex-direction:column;gap:3px}
.valor b{font-size:2.3rem;line-height:1.05;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.valor b small{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0}
.valor span{font-size:.84rem;color:var(--muted)}
.valor .econ{font-weight:700;color:var(--ok)}
.marca{position:absolute;top:-13px;left:22px;background:var(--violet);color:#fff;font-size:.72rem;font-weight:800;border-radius:999px;padding:6px 11px}
.plano.rec .marca{background:var(--gold);color:#1A1438}
.plano ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.9rem}
.plano li{display:flex;gap:9px;color:var(--text)}
.plano li svg{width:17px;height:17px;color:var(--ok);flex:none;margin-top:3px}
.plano .btn{width:100%;margin-top:auto}
.plano .mini{font-size:.78rem;color:var(--muted);text-align:center;margin-top:-6px}
.plano.sob{background:var(--soft)}
.regras{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.regras div{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:14px}
.regras b{color:var(--ink)}.regras span{color:var(--muted);font-size:.93rem}
@media(max-width:1100px){.planos{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.planos{grid-template-columns:1fr}.regras{grid-template-columns:1fr}}

/* confiança */
.conf{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.conf .citacao{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.3;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.fatos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fato{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.fato b{display:block;color:var(--ink);margin-bottom:4px}.fato span{color:var(--muted);font-size:.9rem}
@media(max-width:960px){.conf{grid-template-columns:1fr}}@media(max-width:480px){.fatos{grid-template-columns:1fr}}

/* perguntas */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:var(--surface)}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--violet);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--muted)}

/* final */
.final{padding-block:30px 96px}
.final-box{border-radius:28px;padding:56px 32px;text-align:center;background:linear-gradient(135deg,var(--violet),#4B22D6);color:#fff;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;overflow:hidden}
.final-box h2{color:#fff;max-width:20ch}
.final-box p{color:rgba(255,255,255,.85)}
.final-box .btn{background:#fff;color:#2A1580;box-shadow:none}
.final-box small{color:rgba(255,255,255,.8);font-size:.88rem}
.rodape{border-top:1px solid var(--line);padding-block:44px 32px}
.rodape .grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.rodape p{color:var(--muted);font-size:.92rem;margin-top:12px;max-width:44ch}
.rodape h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.rodape nav{display:flex;flex-direction:column;gap:8px;font-size:.94rem}
.rodape nav a{text-decoration:none}.rodape nav a:hover{color:var(--violet)}
.rodape .baixo{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;font-size:.85rem;color:var(--muted)}
@media(max-width:760px){.rodape .grade{grid-template-columns:1fr}}

/* animações (só com JavaScript e sem pedido de menos movimento; a página já é completa sem elas) */
.js-anim .rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-anim .rev.vis{opacity:1;transform:none}
.faixas span{transition:all .35s ease}
.acoes-mini .sim,.acoes-mini .feito{transition:all .3s ease}
.acoes-mini .feito{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);font-size:.75rem;font-weight:700;border-radius:8px;padding:6px 9px}
.tabela div{transition:background .4s ease}
.tabela div.ok{background:color-mix(in srgb,var(--ok) 7%,transparent)}
.demo[data-anim="mural"] .chat{height:240px;overflow:hidden;justify-content:flex-end}
.digitando{align-self:flex-start;display:inline-flex;gap:4px;padding:11px 13px;border-radius:14px;background:var(--sunk)}
.digitando i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:pula 1s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pula{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.bolha.nova{animation:entra .45s cubic-bezier(.2,.8,.2,1)}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.reacoes span{transition:transform .25s}
.reacoes span.pop{transform:scale(1.18);border-color:var(--violet);color:var(--violet)}
.card .ic,.res-ic{transition:transform .3s}.card:hover .ic{transform:rotate(-6deg) scale(1.06)}
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.btn-p:hover::after{transform:translateX(120%);transition:transform .8s ease}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js-anim .rev{opacity:1;transform:none}}

/* ===== Recursos (menu e páginas) ===== */
.recm{position:relative}
.recm>button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:inherit;font:inherit}
.recm>button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);opacity:.6}
.recm>button:hover,.recm.aberto>button{color:var(--ink)}
.rec-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);width:min(560px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -20px rgba(22,18,46,.35);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:70}
.rec-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.recm:hover .rec-menu,.recm:focus-within .rec-menu,.recm.aberto .rec-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.rec-menu a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;text-decoration:none;color:var(--text)}
.rec-menu a:hover{background:var(--soft)}
.rec-menu .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);flex:none}
.rec-menu .ic svg{width:20px;height:20px}
.rec-menu b{display:block;color:var(--ink);font-size:.95rem}.rec-menu span span{display:block;font-size:.82rem;color:var(--muted);line-height:1.4}
.rec-menu a.wpp .ic{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.rec-mob{display:none}.rec-btn{font-weight:700;color:var(--ink);font-size:.95rem}
@media(max-width:560px){.top .acoes .btn-sm{display:none}.top .acoes .entrar{display:inline}}
@media(max-width:960px){.rec-mob{display:inline-flex}.rec-mob .rec-menu{position:fixed;top:70px;left:50%;grid-template-columns:1fr;width:calc(100vw - 24px)}}
.pg-hero{padding-block:64px 72px;background:radial-gradient(60% 70% at 85% 10%,color-mix(in srgb,var(--violet) 11%,transparent),transparent 70%)}
.pg-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.pg-hero .txt{display:flex;flex-direction:column;gap:20px;min-width:0}
.pg-hero.wpp{background:radial-gradient(60% 70% at 85% 10%,color-mix(in srgb,var(--ok) 13%,transparent),transparent 70%)}
.migalha{font-size:.85rem;color:var(--muted)}.migalha a{text-decoration:none}.migalha a:hover{color:var(--violet)}
@media(max-width:960px){.pg-hero .wrap{grid-template-columns:1fr}.pg-hero{padding-block:40px 56px}}
.grade3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grade2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:900px){.grade3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grade3,.grade2{grid-template-columns:1fr}}
.card ul{margin:4px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem;display:flex;flex-direction:column;gap:4px}
.bloco{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.bloco+.bloco{margin-top:88px}
.bloco.inv .b-txt{order:2}
.b-txt{display:flex;flex-direction:column;gap:16px;min-width:0}
.checks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks li svg{width:20px;height:20px;flex:none;color:var(--ok);margin-top:2px}
.checks li b{color:var(--ink)}
@media(max-width:900px){.bloco{grid-template-columns:1fr;gap:28px}.bloco.inv .b-txt{order:0}}
.tela-mock{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0;font-size:.88rem}
.tela-mock .t-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tela-mock .t-cab b{color:var(--ink)}
.linha-m{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.linha-m small{color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-size:.74rem;font-weight:700;background:var(--violet-soft);color:var(--violet);white-space:nowrap}
.tag.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.tag.ouro{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold-ink)}
.tag.rosa{background:color-mix(in srgb,var(--rose) 14%,transparent);color:var(--rose)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nums div{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--soft)}
.nums small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted)}
.nums b{font-size:1.2rem;color:var(--ink)}
.comp{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;font-size:.94rem}
.comp th,.comp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.comp tr:last-child td{border-bottom:0}
.comp th{background:var(--soft);color:var(--ink);font-size:.85rem}
.comp td:nth-child(2),.comp td:nth-child(3),.comp th:nth-child(2),.comp th:nth-child(3){text-align:center;width:150px}
.comp .s{color:var(--ok);font-weight:800}.comp .n{color:var(--muted)}
.comp-wrap{overflow-x:auto;border-radius:18px}
.form-dm{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;width:min(640px,100%)}
.form-dm label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:rgba(255,255,255,.9);font-weight:600}
.form-dm input,.form-dm select,.form-dm textarea{font:inherit;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;padding:12px 14px}
.form-dm input::placeholder,.form-dm textarea::placeholder{color:rgba(255,255,255,.65)}
.form-dm option{color:#16122E}
.form-dm .cheio{grid-column:1/-1}
.form-dm .isca{position:absolute;left:-9999px}
@media(max-width:620px){.form-dm{grid-template-columns:1fr}}
.wpp-fone .tela{background:#EFE7DD}
.wcab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#075E54;color:#fff}
.wcab .av{width:32px;height:32px;border-radius:50%;background:#fff;color:#075E54;display:grid;place-items:center;font-weight:800;font-size:.75rem}
.wcab b{display:block;font-size:.88rem}.wcab small{font-size:.7rem;opacity:.8}
.wmsgs{flex:1;display:flex;flex-direction:column;gap:7px;padding:12px 10px;overflow:hidden;justify-content:flex-end;min-height:440px}
.wm{max-width:82%;padding:7px 10px 5px;border-radius:10px;font-size:.8rem;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.08);color:#16122E}
.wm.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.wm.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}
.wm small{display:block;text-align:right;font-size:.62rem;color:#667;margin-top:2px}
.wbts{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wbts span{display:block;text-align:center;border-top:1px solid #e6e6e6;padding-top:5px;color:#027EB5;font-weight:700;font-size:.78rem}
.wdig{align-self:flex-start;background:#fff;border-radius:10px;padding:8px 10px;display:flex;gap:3px}
.wdig i{width:6px;height:6px;border-radius:50%;background:#9aa;animation:wd 1s infinite}.wdig i:nth-child(2){animation-delay:.15s}.wdig i:nth-child(3){animation-delay:.3s}
@keyframes wd{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* ===== Blog (1.234.0) ===== */
.blog-hero{padding-block:56px 40px;background:radial-gradient(60% 70% at 85% 10%,color-mix(in srgb,var(--violet) 11%,transparent),transparent 70%)}
.blog-hero .wrap{display:flex;flex-direction:column;gap:14px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.b-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s}
.b-card:hover{transform:translateY(-3px)}
.b-card img{display:block;width:100%;height:auto;aspect-ratio:1600/840;object-fit:cover;background:var(--soft)}
.b-card .c{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.b-card h2,.b-card h3{font-size:1.18rem;line-height:1.3;letter-spacing:-.01em}
.b-card p{color:var(--muted);font-size:.95rem}
.b-card .m{margin-top:auto;font-size:.82rem;color:var(--muted)}
.b-card.dest{grid-column:1/-1;flex-direction:row}
.b-card.dest img{width:56%;aspect-ratio:auto}.b-card.dest .c{padding:32px;justify-content:center}.b-card.dest h2{font-size:1.7rem}
.b-tag{align-self:flex-start;font-size:.76rem;font-weight:700;color:var(--violet);background:var(--violet-soft);border-radius:999px;padding:4px 10px}
.b-art{max-width:780px;margin:0 auto}
.b-art-cab{padding-block:40px 18px;display:flex;flex-direction:column;gap:16px}
.b-art-cab h1{font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.14}
.b-meta{font-size:.9rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.b-capa{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);margin:6px 0 10px}
.b-lead{font-size:1.2rem;line-height:1.6;color:var(--text)}
.b-sum{border:1px solid var(--line);background:var(--soft);border-radius:16px;padding:16px 20px;margin:26px 0}
.b-sum b{display:block;color:var(--ink);margin-bottom:6px}
.b-sum ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.b-sum a{text-decoration:none;color:var(--violet);font-weight:600}
.b-corpo{font-size:1.07rem;line-height:1.75}
.b-corpo>*+*{margin-top:18px}
.b-corpo h2{font-size:clamp(1.5rem,2.8vw,1.95rem);margin-top:46px;scroll-margin-top:90px}
.b-corpo h3{font-size:1.2rem;margin-top:28px}
.b-corpo ul,.b-corpo ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.b-corpo a{color:var(--violet);font-weight:600}
.b-corpo strong{color:var(--ink)}
.b-corpo blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid var(--violet);background:var(--violet-soft);border-radius:0 14px 14px 0;color:var(--ink);font-weight:500}
.b-fig{margin:30px 0}
.b-fig img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line)}
.b-fig figcaption{font-size:.88rem;color:var(--muted);margin-top:8px;text-align:center}
.b-cta{margin:34px 0;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 24px;border-radius:18px;background:linear-gradient(135deg,var(--violet),#4B22D6);color:#fff}
.b-cta b{display:block;font-size:1.1rem;color:#fff}.b-cta span{display:block;opacity:.9;font-size:.95rem;margin-top:4px}
.b-cta .btn{background:#fff;color:var(--violet);box-shadow:none;flex:none}
.b-faq{margin-top:46px}.b-faq h2{margin-bottom:16px}
.b-rel{padding-block:24px 10px}.b-rel h2{font-size:1.5rem;margin-bottom:16px}
.migalha-b{font-size:.85rem;color:var(--muted)}.migalha-b a{text-decoration:none}.migalha-b a:hover{color:var(--violet)}
@media(max-width:960px){.blog-grid{grid-template-columns:1fr 1fr}.b-card.dest{flex-direction:column}.b-card.dest img{width:100%;aspect-ratio:1600/840}.b-card.dest .c{padding:20px}}
@media(max-width:620px){.blog-grid{grid-template-columns:1fr}.b-cta{flex-direction:column;align-items:flex-start}.b-corpo{font-size:1.02rem}}
