@font-face{font-family:"Anton";src:url("../fontes/anton-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";src:url("../fontes/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Caveat Brush";src:url("../fontes/caveat-brush-latin-400-normal.woff2") format("woff2");font-display:swap}

:root{
  --bg:#06060a; --tx:#f3f1ee; --mu:#a5a3ad; --cor:#7b61ff; --cor2:#2de2e6;
  --raio:22px; --borda:rgba(255,255,255,.12);
  --seguro-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--tx);-webkit-text-size-adjust:100%}
body{font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.45;overflow-x:hidden;background:var(--bg)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cor2);outline-offset:3px;border-radius:8px}

/* camadas fixas */
#fundo{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
   radial-gradient(70% 55% at var(--fx,70%) var(--fy,30%), color-mix(in oklab,var(--cor) 55%,transparent), transparent 70%),
   radial-gradient(60% 50% at 15% 85%, color-mix(in oklab,var(--cor2) 35%,transparent), transparent 70%),
   radial-gradient(120% 90% at 50% 120%, #1a0f2e 0%, transparent 60%),
   var(--bg);
  transition:background .9s ease}
#fundo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.75) 100%)}
.grao{position:absolute;inset:-50%;opacity:.07;background-size:180px 180px;animation:grao 1.2s steps(6) infinite;pointer-events:none}
@keyframes grao{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

#titulao{position:fixed;left:0;right:0;top:20vh;z-index:1;text-align:center;pointer-events:none;line-height:.82}
#titulao .t{display:block;font-family:"Anton",Impact,sans-serif;font-size:clamp(84px,27vw,340px);letter-spacing:-.01em;text-transform:uppercase;
  color:rgba(255,255,255,.05);-webkit-text-stroke:1.5px rgba(255,255,255,.22);white-space:nowrap}
#titulao .t .l{display:inline-block}
#titulao .p{display:block;font-family:"Caveat Brush",cursive;font-size:clamp(30px,8vw,72px);color:var(--cor);transform:rotate(-5deg) translateY(-.35em);text-shadow:0 0 30px color-mix(in oklab,var(--cor) 60%,transparent)}

#cena,#rede{position:fixed;inset:0;width:100%;height:100%;z-index:2;display:block;touch-action:pan-y}
#rede{z-index:6;opacity:0;pointer-events:none;touch-action:none}
body.mapa #rede{pointer-events:auto}
body.mapa #cena{filter:blur(6px) brightness(.45)}
body.mapa #trilha,body.mapa #filtros,body.mapa #titulao,body.mapa #progresso{opacity:0;pointer-events:none}
#cena{transition:filter .6s ease}

/* topo */
#topo{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;pointer-events:none}
#topo>*{pointer-events:auto}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:650;letter-spacing:.01em}
.marca svg{width:28px;height:28px;color:var(--cor)}
.idiomas{display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid var(--borda);border-radius:99px;padding:3px;backdrop-filter:blur(8px)}
.idiomas a{font-size:12px;font-weight:700;text-decoration:none;padding:6px 9px;border-radius:99px;color:var(--mu)}
.idiomas a[aria-current]{background:var(--tx);color:#000}

#filtros{position:fixed;top:58px;left:0;right:0;z-index:5;display:flex;gap:6px;justify-content:center;padding:0 12px;overflow-x:auto;scrollbar-width:none}
#filtros::-webkit-scrollbar{display:none}
#filtros button{flex:none;font-size:13px;font-weight:600;padding:7px 13px;border-radius:99px;border:1px solid var(--borda);background:rgba(10,10,16,.45);backdrop-filter:blur(8px);color:var(--mu);min-height:36px}
#filtros button[aria-pressed="true"]{color:#000;background:var(--tx);border-color:var(--tx)}

/* trilha (rolagem real) */
#trilha{position:relative;z-index:3;pointer-events:none}
#trilha a,#trilha button{pointer-events:auto}
.abertura{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px calc(90px + var(--seguro-b))}
.abertura .ola{font-family:"Caveat Brush",cursive;font-size:28px;color:var(--cor2)}
.abertura h1{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(40px,min(12vw,9.5vh),104px);line-height:.95;text-transform:uppercase;max-width:14ch}
.abertura .dica{margin-top:18px;color:var(--mu);font-size:14px;display:flex;align-items:center;gap:10px}
.dedo{width:18px;height:28px;border:2px solid var(--mu);border-radius:12px;position:relative}
.dedo::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:6px;margin-left:-2px;border-radius:2px;background:var(--mu);animation:dedo 1.6s ease-in-out infinite}
@keyframes dedo{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}

.onda{min-height:130svh;display:flex;align-items:flex-end;padding:0 16px calc(84px + var(--seguro-b))}
.onda.oculta{display:none}
.cartao{width:100%;max-width:440px;padding:18px 18px 16px;border-radius:var(--raio);background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid var(--borda);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:auto;
  opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.onda.ativa .cartao{opacity:1;transform:none}
.cartao .topo-c{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mu);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cartao .num{font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.04em;color:var(--c,var(--cor))}
.selo{padding:3px 8px;border-radius:99px;border:1px solid currentColor;font-size:10.5px}
.cartao h2{font-size:26px;line-height:1.08;font-weight:750;margin:8px 0 4px;letter-spacing:-.01em}
.cartao p{color:#d8d6de;font-size:15px}
.cartao .linha-b{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.preco{font-size:13px;color:var(--mu)}
.preco b{display:block;color:var(--tx);font-size:18px}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:99px;border:1px solid var(--borda);background:rgba(255,255,255,.06);font-weight:700;text-decoration:none;font-size:15px}
.botao.primario{background:var(--c,var(--cor));color:#07070b;border-color:transparent;box-shadow:0 10px 30px -10px var(--c,var(--cor))}
.dica-3d{margin-top:10px;font-size:12px;color:var(--mu)}

.final{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 22px 80px;text-align:center;align-items:center}
.final h2{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(42px,11vw,96px);line-height:.95;text-transform:uppercase}
.final p{color:var(--mu);margin:14px 0 22px;max-width:36ch}
.final-botoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;pointer-events:auto}
.rodape{margin-top:40px!important;font-size:12px}

#progresso{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:7px}
#progresso i{display:block;width:4px;height:4px;border-radius:9px;background:rgba(255,255,255,.3);transition:all .3s}
#progresso i.on{height:18px;background:var(--cor)}

#botao-mapa{position:fixed;left:50%;bottom:calc(16px + var(--seguro-b));transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;border:1px solid var(--borda);background:rgba(10,10,16,.6);backdrop-filter:blur(10px);font-size:13px;font-weight:650;min-height:44px}
#botao-mapa svg{width:20px;height:20px;fill:var(--cor2);stroke:var(--cor2);stroke-width:1.4}
body.mapa #botao-mapa,body.painel #botao-mapa{opacity:0;pointer-events:none}
#mapa-ui{position:fixed;left:0;right:0;bottom:calc(18px + var(--seguro-b));z-index:7;text-align:center;color:var(--mu);font-size:13px;display:flex;flex-direction:column;gap:10px;align-items:center}
#mapa-ui[hidden]{display:none}

/* painel encenado */
#painel{position:fixed;inset:0;z-index:8;pointer-events:none;visibility:hidden}
#painel.aberto{pointer-events:auto;visibility:visible}
.painel-fundo{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(6,6,10,.55) 35%,rgba(6,6,10,.92) 60%);opacity:0}
.painel-caixa{position:absolute;left:0;right:0;bottom:0;top:34svh;border-radius:28px 28px 0 0;background:linear-gradient(180deg,rgba(22,20,32,.94),rgba(8,8,12,.98));border-top:1px solid var(--borda);overflow:auto;overscroll-behavior:contain;
  clip-path:inset(100% 0 0 0 round 28px 28px 0 0);padding:22px 18px calc(40px + var(--seguro-b))}
.painel-caixa .fechar{position:sticky;top:0;float:right;width:44px;height:44px;border-radius:99px;background:rgba(255,255,255,.08);font-size:16px;z-index:2}
.painel-conteudo h2{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:44px;line-height:.95;color:var(--c);margin-top:4px}
.painel-conteudo .sub{font-family:"Caveat Brush",cursive;font-size:26px;color:var(--tx);margin:4px 0 10px}
.painel-conteudo p{color:#d8d6de}
.painel-conteudo h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin:22px 0 10px}
.lista{list-style:none;display:grid;gap:8px}
.lista li{padding-left:22px;position:relative}
.lista li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:3px;background:var(--c);transform:rotate(45deg)}
.lista.nao li::before{background:transparent;border:1.5px solid var(--mu)}
.planos{display:grid;gap:12px;grid-template-columns:1fr}
.plano{border:1px solid var(--borda);border-radius:18px;padding:16px;background:rgba(255,255,255,.03);position:relative}
.plano.destaque{border-color:var(--c);background:color-mix(in oklab,var(--c) 10%,transparent)}
.plano .tag{position:absolute;top:-10px;right:14px;background:var(--c);color:#000;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;text-transform:uppercase}
.plano h4{font-size:17px}
.plano .valor{font-size:28px;font-weight:800;margin:6px 0 2px}
.plano .valor small{font-size:13px;color:var(--mu);font-weight:600}
.plano ul{list-style:none;margin:10px 0 14px;display:grid;gap:5px;font-size:14px;color:#d8d6de}
.plano ul li::before{content:"✓ ";color:var(--c);font-weight:800}
.plano .botao{width:100%}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.plano .det{font-size:12.5px;color:var(--mu);margin:-6px 0 12px}
.valor .mens{display:block;font-size:13px;margin-top:2px}
.form .nav.col{flex-direction:column}
.sub-p{color:var(--mu);margin:4px 0 14px}
.meta.fim{margin-top:26px}
.meta span{font-size:12px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--borda)}

/* formulário em conversa */
.form{margin-top:8px}
.form .passo{display:none}
.form .passo.on{display:block;animation:entra .35s ease}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.form .perg{font-size:20px;font-weight:700;margin-bottom:12px}
.form .ops{display:flex;flex-wrap:wrap;gap:8px}
.form .ops button{padding:10px 14px;border-radius:14px;border:1px solid var(--borda);background:rgba(255,255,255,.05);min-height:44px;font-size:15px}
.form .ops button[aria-pressed="true"]{background:var(--c);color:#000;border-color:transparent}
.form textarea,.form input{width:100%;min-height:48px;padding:12px 14px;border-radius:14px;border:1px solid var(--borda);background:rgba(255,255,255,.05);color:var(--tx);font:inherit}
.form textarea{min-height:96px;resize:vertical}
.form .nav{display:flex;justify-content:space-between;margin-top:16px;gap:10px}
.form .barra{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-bottom:16px;overflow:hidden}
.form .barra i{display:block;height:100%;background:var(--c);transition:width .3s}

body.painel #filtros,body.painel #progresso,body.painel #titulao{opacity:0}
#filtros,#progresso,#titulao{transition:opacity .4s}
body.carregando #trilha{opacity:0}
#trilha{transition:opacity .8s}

.sem-3d #cena{display:none}
.sem-3d .onda{min-height:auto;padding-top:40px}
.sem-3d .cartao{opacity:1;transform:none}

@media (min-width:860px){
  .onda{align-items:center;padding:0 6vw}
  .onda:nth-of-type(even){justify-content:flex-start}
  .onda:nth-of-type(odd){justify-content:flex-start}
  .cartao{max-width:400px}
  .abertura{padding-left:6vw;padding-bottom:12vh}
  #titulao{top:16vh;transition:left .8s ease,opacity .4s}
  body.na-abertura #titulao{left:42%}
  .abertura h1{max-width:13ch}
  .painel-caixa{left:auto;top:0;width:min(520px,44vw);border-radius:28px 0 0 28px;clip-path:inset(0 0 0 100% round 28px 0 0 28px)}
  .planos{grid-template-columns:1fr}
  .painel-fundo{background:linear-gradient(90deg,transparent 0%,transparent 45%,rgba(6,6,10,.7) 70%)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cartao{opacity:1;transform:none}
}