@view-transition{ navigation: auto; }
:root{
  --bg:#060913; --bg2:#0A0F1F; --surface:#0C1122; --surface2:#101733;
  --line:#1B2340; --line2:#2A3560;
  --text:#F4F6FB; --muted:#A9B1C8; --dim:#8D95B0;
  --accent:#1868DB; --accent-hi:#2A7BF0; --accent-text:#8DBBFF;
  --r:22px; --r-lg:36px;
  --f-d:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-b:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,80px);
  --wrap:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-b);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:96px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
/* ---------- tipografia ---------- */
.eyebrow{font-size:0.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-text)}
h2{font-family:var(--f-d);font-weight:800;font-size:clamp(2rem,4.6vw,3.625rem);line-height:1.05;letter-spacing:var(--track-d2)}
h3{font-family:var(--f-d);font-weight:800;letter-spacing:-.02em}
.lead{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.6;color:var(--muted)}
.sec{padding-block:clamp(64px,8vw,112px)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:780px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head.row{max-width:none;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px}
.rule{height:1px;background:linear-gradient(90deg,var(--line2),transparent);transform-origin:left;margin-bottom:clamp(28px,4vw,48px)}
/* ---------- selo ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:0.875rem;color:var(--muted)}
.pulse{width:8px;height:8px;border-radius:999px;background:var(--accent-text);box-shadow:0 0 0 0 rgba(141,187,255,.6);animation:pulse 2.4s infinite}
/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 30px;border-radius:999px;font-weight:700;font-size:1.0625rem;line-height:1;transition:transform .3s var(--spring),background .25s,border-color .25s,color .25s;white-space:nowrap;border:0;background:transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid var(--line2);color:var(--text);background:transparent}
.btn-sm{padding:12px 22px;font-size:0.9375rem}
.link-arrow{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--accent-text);transition:gap .3s var(--spring)}
/* ---------- navegação ---------- */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:18px var(--pad) 0;pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:28px;padding:9px 10px 9px 24px;border-radius:999px;background:rgba(12,17,34,.72);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s,border-color .3s,box-shadow .3s}
.nav.scrolled{background:rgba(12,17,34,.92);border-color:var(--line2);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.brand img{height:30px;width:auto}
.links{display:flex;gap:26px;font-size:0.9375rem;font-weight:500}
.links a{color:var(--muted);transition:color .2s;padding:6px 0}
.links a[aria-current]{color:var(--text)}
.burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line2);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:transform .3s var(--spring),opacity .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{top:0;transform:rotate(45deg)}
.nav.open .burger span::after{top:0;transform:rotate(-45deg)}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:150}
/* ---------- números ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,56px) 12px}
.stat{padding:0 clamp(16px,2.6vw,36px);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.stat:first-child{border-left:0}
.stat .num{font-family:var(--f-d);font-weight:800;font-size:clamp(1.875rem,3.6vw,3.25rem);white-space:nowrap;line-height:1;letter-spacing:var(--track-d1);color:var(--accent-text);font-variant-numeric:tabular-nums}
.stat p{color:var(--muted);font-size:0.9375rem;line-height:1.4}
/* ---------- etiquetas e chips ---------- */
.tag,.case .tag,.post .tag{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-text);line-height:1.4}
.chip{padding:6px 13px;border:1px solid var(--line2);border-radius:999px;font-size:0.8125rem;color:#C7CEE3;font-weight:500}
/* ---------- cta final ---------- */
.final{background:var(--accent);border-radius:var(--r-lg);padding:clamp(40px,7vw,96px) clamp(24px,6vw,80px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.final h2{font-size:clamp(2.25rem,6vw,5rem);letter-spacing:var(--track-d1);max-width:900px}
.final p{font-size:clamp(1.0625rem,1.6vw,1.3125rem);max-width:640px;line-height:1.55}
.final .btn-white{background:#fff;color:#0A1B3D}
.final .btn-line{border:1px solid rgba(255,255,255,.55);color:#fff}
.contact-info{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;font-size:0.9375rem}
/* ---------- rodapé ---------- */
footer{border-top:1px solid var(--line);margin-top:clamp(64px,9vw,120px);padding-block:56px 40px}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot img{height:32px;width:auto;margin-bottom:16px}
.foot p{color:var(--dim);font-size:0.875rem;max-width:320px}
.foot h4{font-size:0.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.foot li{margin-bottom:10px;font-size:0.9375rem;color:var(--muted)}
.copy{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:0.875rem;color:var(--dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* ---------- whatsapp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:999px;background:#25D366;display:flex;align-items:center;justify-content:center;z-index:120;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .3s var(--spring)}
.wa-float svg{width:32px;height:32px;fill:#fff}
.wa-bubble{position:fixed;right:94px;bottom:30px;z-index:120;max-width:250px;background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:14px 38px 14px 16px;font-size:0.875rem;line-height:1.4;box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-bubble strong{color:#5BE38C}
.wa-bubble button{position:absolute;top:6px;right:8px;width:26px;height:26px;border:0;background:transparent;color:var(--dim);font-size:1.125rem;cursor:pointer;line-height:1}
/* ---------- animações de entrada ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .rs>*{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rs>*.in{opacity:1;transform:none}
.js .rule{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.js .rule.in{transform:none}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes marquee{to{transform:translateX(-100%)}}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(141,187,255,0)}100%{box-shadow:0 0 0 0 rgba(141,187,255,0)}}
/* ---------- responsivo (compartilhado) ---------- */
@media (max-width:1080px){
  .links{display:none}
  .burger{display:inline-flex}
  .nav{gap:14px;padding-left:20px}
  .nav .btn-sm{display:none}
  .nav.open .btn-sm{display:inline-flex;order:4;width:100%;margin:6px 0 8px}
  .nav.open{border-radius:26px;flex-wrap:wrap;width:min(100%,560px);justify-content:space-between}
  .nav.open .links{display:flex;flex-direction:column;gap:4px;width:100%;order:3;padding:12px 0 8px}
  .nav.open .links a{font-size:1.125rem;padding:12px 4px;display:block}
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .stat:nth-child(3){border-left:0}
  .stat .num{font-size:clamp(2.125rem,6.4vw,3.375rem)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:1rem}
  .numbers{grid-template-columns:1fr;row-gap:0;padding:8px 12px}
  .stat,.stat:nth-child(3){border-left:0;border-top:1px solid var(--line);padding:22px 8px}
  .stat:first-child{border-top:0}
  .stat .num{font-size:2.75rem}
  .sec-head.row{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .cta{width:100%}
  .final .cta{width:100%}
  .wa-bubble{display:none}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  /* movimento reduzido: sem deslocamento, só um cross-fade curto */
  .js .reveal,.js .rs>*,.js .rule{transform:none!important;transition:opacity .25s linear!important}
  .btn,.fchip,.card,.case,.post,.ccard,.pl-card,.tile,.link-arrow,.rail-btn{transition-property:background-color,border-color,color,opacity!important}
  .nav-wrap::before{transition:none}
}

/* ---------- hover só em dispositivos com mouse ---------- */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--accent-hi);transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--accent-text);color:var(--accent-text);transform:translateY(-2px)}
  .link-arrow:hover{gap:14px}
  .links a:hover{color:var(--text)}
  .final .btn-white:hover{transform:translateY(-2px);background:#EAF2FF}
  .final .btn-line:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
  .contact-info a:hover{text-decoration:underline}
  .foot li a:hover{color:var(--text)}
  .wa-float:hover{transform:scale(1.08)}
  .js .rs>.case:hover,.js .rs>.card:hover,.js .rs>.post:hover,.js .rs>.tile:hover{transition-delay:0s;transition-duration:.4s}
}

/* ---------- base para celular (toque, safe areas, feedback de pressão) ---------- */
:root{color-scheme:dark}
html{-webkit-tap-highlight-color:transparent}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
button,a,[role="button"],summary,input,select{touch-action:manipulation}
button,.btn,.fchip,.burger,summary{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* feedback imediato ao tocar: escala sutil, curta e com ease-out */
.btn:active,.fchip:active,.tabs button:active,.toggle button:active,.rail-btn:active,.burger:active,.side-cta a:active{transform:scale(.97);transition-duration:.12s}
.faq summary:active,.faq2 summary:active{opacity:.7}
/* barras fixas respeitam o entalhe e a barra inferior do iPhone (precisa de viewport-fit=cover) */
.nav-wrap{padding-top:calc(18px + env(safe-area-inset-top,0px))}
.wa-float{right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.wa-bubble{right:calc(94px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
/* alvos de toque com pelo menos 44px */
@media (pointer:coarse){
  .fchip,.tabs button,.toggle button{min-height:44px}
  .foot li a{display:inline-block;padding:6px 0}
  .wa-bubble button{width:36px;height:36px;top:2px;right:4px}
}
@media (max-width:720px){.nav{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}

/* ---------- rodada Apple (materiais, mola, tipografia, acessibilidade) ---------- */
:root{
  --spring:cubic-bezier(.23,1,.32,1);
  --track-d1:-.045em;--track-d2:-.035em;
  --mat-bg:rgba(12,17,34,.62);--mat-edge:rgba(255,255,255,.09)
}
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0, 0.184, 0.336, 0.462, 0.566, 0.65, 0.719, 0.775, 0.82, 0.856, 0.885, 0.909, 0.928, 0.942, 0.954, 0.964, 0.971, 0.977, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.996, 0.997, 0.997, 0.998, 1)}}
@media (max-width:720px){:root{--track-d1:-.03em;--track-d2:-.025em;--lh-h1:1.1}}
body{font-optical-sizing:auto}

/* material do menu: mais espesso ao rolar (superfície maior = blur e sombra maiores) */
.nav{background:var(--mat-bg);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 var(--mat-edge)}
.nav.scrolled{background:rgba(12,17,34,.84);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 48px rgba(0,0,0,.45)}
@media (max-width:720px){.nav,.nav.scrolled{-webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%)}}
/* texto sobre material translúcido: mais contraste e um pouco mais de peso (vibrancy) */
.links a{font-weight:600;letter-spacing:.005em;color:#C6CDE2}
/* em vez de linha divisória, o conteúdo esmaece onde passa por baixo do menu flutuante */
.nav-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(96px + env(safe-area-inset-top,0px));background:linear-gradient(var(--bg),rgba(6,9,19,0));opacity:0;transition:opacity .3s linear;pointer-events:none;z-index:-1}
.nav-wrap:has(.nav.scrolled)::before{opacity:1}
/* profundidade: superfícies grandes leem mais espessas que as pequenas */
.numbers,.final,.compbox{box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.card,.case,.ccard,.post,.pl-card,.tile,.side-card,.ai-card,.ccol{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
/* o painel do menu no celular se "materializa": opacidade, escala e um desfoque curto */
@media (max-width:1080px){
  .nav.open .links{transition:opacity .22s var(--spring),transform .22s var(--spring),filter .22s var(--spring);transform-origin:top right}
}
@starting-style{.nav.open .links{opacity:0;transform:translateY(-6px) scale(.98);filter:blur(4px)}}

@media (prefers-reduced-transparency:reduce){
  .nav,.nav.scrolled{background:#0C1122;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--line:#3A467A;--line2:#5A6BA8;--muted:#D3D9EA;--dim:#B8C0DA}
  .nav,.nav.scrolled{background:#0C1122;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line2)}
}

/* ---------- microinterações: FAQ, planos e filtros ---------- */
@keyframes ans-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes price-swap{from{opacity:.35;transform:translateY(4px);filter:blur(2px)}}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}}
/* FAQ: a resposta entra com fade curto; onde o navegador permite, a altura também anima */
details[open]>.ans{animation:ans-in .2s var(--spring) backwards}
@supports selector(details::details-content){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content,.faq2 details::details-content{block-size:0;overflow:hidden;transition:block-size .22s var(--spring),content-visibility .22s allow-discrete}
  .faq details[open]::details-content,.faq2 details[open]::details-content{block-size:auto}
}
/* planos: troca de preço, itens do anual e troca de aba (só depois do primeiro clique) */
.price-main.swap{animation:price-swap .18s var(--spring) backwards}
.is-anual .anual-only{animation:price-swap .18s var(--spring) backwards}
#planos.tabs-ready .tabpanel:not([hidden]) .pl-head{animation:panel-in .2s var(--spring) backwards}
#planos.tabs-ready .tabpanel:not([hidden]) .pl-card{animation:card-in .22s var(--spring) backwards}
#planos.tabs-ready .tabpanel:not([hidden]) .pl-card:nth-child(2){animation-delay:40ms}
#planos.tabs-ready .tabpanel:not([hidden]) .pl-card:nth-child(3){animation-delay:80ms}
/* filtros: cards que passam a aparecer entram com fade curto (não vale para a digitação na busca) */
.ccard.enter,.post.enter{animation:card-in .18s var(--spring) backwards}