@font-face{font-family:"Magistral";src:url(/fonts/Magistral-Book.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Magistral";src:url(/fonts/Magistral-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Magistral";src:url(/fonts/Magistral-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

/* ═══════════ tokens ═══════════ */
:root{
  --preto:#000;
  --cartao:#1c1c1c;
  --linha:#2a2f34;
  --cinza:#6a7681;
  --cinza-texto:#8d98a2;
  --cinza-fundo:#55606a;
  --off:#efefeb;
  --branco:#fff;
  --laranja:#ff6a00;
  --laranja-hover:#ff8c1a;
  --erro:#ff8f70;
  --sans:"Magistral","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,3.34vw,48px);
  --max:1440px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{background:var(--preto);color:var(--branco);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.2;background:var(--preto);-webkit-font-smoothing:antialiased}
/* linhas giradas em perspectiva antes de entrar não podem abrir rolagem lateral; clip não quebra o sticky */
main,footer{overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
.container{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,.enunciado,.slide{word-break:keep-all;overflow-wrap:normal;hyphens:none;text-wrap:balance}
p{text-wrap:pretty}

/* texto que rola no hover (botões) */
.w{display:inline-block;overflow:hidden;vertical-align:top;height:1.15em;line-height:1.15}
.w>span{display:block;transition:transform .32s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * 22ms)}
.w>span::after{content:attr(data-t);display:block}
.rola:hover .w>span,.rola:focus-visible .w>span{transform:translateY(-50%)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* revelação por linha: some até o SplitText assumir */
.movimento [data-revela]:not(.pronto),.movimento [data-embaralha]:not(.pronto){visibility:hidden}

/* ═══════════ navegação ═══════════ */
.nav{position:fixed;z-index:50;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  width:min(740px,calc(100% - 2 * var(--gutter)));display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:6px 6px 6px 14px;background:var(--cartao);border-radius:6px}
.marca{display:inline-flex;align-items:center;gap:10px;color:var(--branco);text-decoration:none;font-size:1.3rem;letter-spacing:-.03em;white-space:nowrap}
.marca-icone{width:26px;height:16px;flex:none}
.marca-endosso{align-self:flex-end;margin:0 0 2px -2px;font-size:.8125rem;letter-spacing:-.01em;color:var(--cinza-texto)}
.rodape .marca-endosso{color:rgba(0,0,0,.72)}
@media (max-width:480px){.nav .marca-endosso{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.85rem 1.25rem;border:0;border-radius:4px;
  background:var(--laranja);color:#000;font:500 1rem/1.15 var(--sans);letter-spacing:-.02em;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .2s}
.btn:hover{background:var(--laranja-hover)}
.btn--grande{min-height:56px;padding-inline:1.5rem;font-size:1.0625rem}

/* ═══════════ hero ═══════════ */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--preto)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-conteudo{position:absolute;left:0;right:0;bottom:clamp(48px,9vh,104px);padding-inline:var(--gutter);text-align:center}
.hero-conteudo::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:min(1300px,120%);height:170%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.86),rgba(0,0,0,.55) 55%,rgba(0,0,0,0));pointer-events:none}
.hero h1{position:relative;z-index:1;max-width:1180px;margin:0 auto;font-weight:500;font-size:clamp(2.25rem,.75rem + 4.25vw,4.9rem);line-height:1;letter-spacing:-.025em}
.hero h1>span{display:block}

/* ═══════════ intro (frase grande + apoio) ═══════════ */
.intro{padding-block:clamp(96px,13vw,190px) clamp(72px,9vw,140px)}
.intro .container{display:grid;grid-template-columns:1fr;gap:48px}
.intro-arte{width:min(220px,55%)}
.enunciado{font-size:clamp(1.55rem,1rem + 1.55vw,2.65rem);line-height:1.12;letter-spacing:-.03em;color:var(--branco)}
.apoio{margin-top:2rem;max-width:50ch;font-size:1.125rem;line-height:1.45;letter-spacing:-.01em;color:var(--cinza-texto)}
.apoio strong{font-weight:500;color:var(--branco)}
.intro .btn{margin-top:2.25rem}
@media (min-width:900px){.intro .container{grid-template-columns:1fr 1fr;gap:var(--gutter)}.intro-arte{width:min(260px,60%)}}

/* ═══════════ divisória com cubos ═══════════ */
.divisor{position:relative;height:10px}
.divisor::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--linha)}
.cubo{position:absolute;top:0;width:10px;height:10px;background:var(--laranja)}
.cubo--a{left:var(--gutter)}
.cubo--b{right:var(--gutter)}

/* ═══════════ análise (cartões + formulário) ═══════════ */
.analise{padding-block:clamp(72px,9vw,140px)}
.analise .container{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.analise .container{grid-template-columns:1fr 1fr}}
.cartao{display:flex;flex-direction:column;background:var(--cartao);border-radius:4px;padding:12px}
.cartao-info{padding:28px 28px 24px}
.cartao-titulo{max-width:13ch;font-weight:500;font-size:clamp(2rem,1.2rem + 1.75vw,3rem);line-height:1.08;letter-spacing:-.03em}
.cartao-intro{margin-top:1rem;max-width:40ch;font-size:1.0625rem;line-height:1.45;letter-spacing:-.01em;color:var(--cinza-texto)}
.cartao-arte{margin-top:auto;padding-top:32px;display:flex;justify-content:flex-end}
.cartao-arte svg{width:min(100%,400px);height:auto;overflow:visible}

.contador{display:flex;align-items:baseline;gap:.18em;padding:14px 14px 0;font-weight:500;font-size:clamp(4.5rem,2.8rem + 4vw,7.5rem);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.contador-total{font-size:.3em;letter-spacing:-.02em;color:var(--cinza-texto)}
.cartao-form form,.cartao-form .sucesso{margin-top:auto;padding-top:40px}
.linha{display:flex;align-items:center;gap:16px;min-height:76px;padding:18px 22px;background:var(--preto);border:1px solid var(--linha);border-radius:2px;
  font-size:1.1875rem;line-height:1.25;letter-spacing:-.02em}
.bullet{width:12px;height:12px;flex:none;background:var(--laranja)}
.passo>*+*{margin-top:6px}
.passo+.passo{margin-top:6px}
.linha-campo{padding:0 22px;transition:border-color .2s}
.linha-campo:focus-within{border-color:var(--laranja)}
.campo{width:100%;height:76px;padding:0;border:0;border-radius:0;background:transparent;color:var(--branco);caret-color:var(--laranja);
  font:500 1.375rem/1 var(--sans);letter-spacing:-.02em;appearance:none}
.campo:focus,.campo:focus-visible{outline:none}
.campo::placeholder{color:var(--cinza-fundo);opacity:1}
.opcoes{display:grid;gap:6px;margin-top:6px}
.opcao{position:relative;cursor:pointer;transition:border-color .2s}
.opcao input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opcao .bullet{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cinza-fundo);transition:background-color .2s,box-shadow .2s}
.opcao:hover{border-color:rgba(255,106,0,.55)}
.opcao:has(input:checked){border-color:var(--laranja)}
.opcao:has(input:checked) .bullet{background:var(--laranja);box-shadow:none}
.opcao:has(input:focus-visible){outline:2px solid var(--laranja);outline-offset:2px}
.tecla{margin-left:auto;color:var(--cinza-fundo);font-size:.875rem}
.erro{min-height:1.5em;padding:8px 4px 0;font-size:.9375rem;line-height:1.3;color:var(--erro)}
.erro:empty{padding-top:0;min-height:0}
.acoes{display:flex;gap:6px;margin-top:6px}
.btn-duplo{flex:1;display:flex;gap:2px;min-height:64px;padding:0;border:0;background:transparent;color:#000;cursor:pointer;
  font:500 1.1875rem/1.15 var(--sans);letter-spacing:-.02em}
.btn-duplo-rotulo{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 20px;background:var(--laranja);border-radius:4px;transition:background-color .2s}
.btn-duplo-seta{width:64px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--laranja);border-radius:4px;transition:background-color .2s}
.btn-duplo:hover .btn-duplo-rotulo,.btn-duplo:hover .btn-duplo-seta{background:var(--laranja-hover)}
.btn-duplo[disabled]{opacity:.6;cursor:progress}
.seta{width:18px;height:18px}
.btn-voltar{width:64px;min-height:64px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--linha);border-radius:4px;background:var(--preto);color:var(--branco);cursor:pointer;transition:border-color .2s}
.btn-voltar:hover{border-color:var(--cinza)}
.btn-voltar .seta{transform:scaleX(-1)}
.lgpd,.nota{padding:16px 6px 0;font-size:.875rem;line-height:1.45;letter-spacing:-.005em;color:var(--cinza-texto)}
.nota{padding-top:6px}
.isca{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.sucesso>*+*{margin-top:6px}
.js .passo{display:none}
.js .passo.ativo{display:block}
.sem-js{display:none}
.js .sem-js{display:flex}

/* pontos de progresso */
.pontos{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:2px;background:rgba(255,255,255,.08)}
.ponto{position:relative;width:5px;height:5px;overflow:hidden;background:rgba(255,255,255,.28)}
.ponto i{position:absolute;inset:0;background:var(--branco);transform:scaleX(0);transform-origin:left center}
.ponto.feito{background:var(--branco)}
.pontos--form{align-self:flex-start;margin-top:24px}
.pontos--form .ponto{transition:width .4s cubic-bezier(.65,0,.35,1)}
.pontos--form .ponto.atual{width:2.9em}
.pontos--form .ponto.atual i{transform:scaleX(1);transition:transform .5s cubic-bezier(.65,0,.35,1) .15s}

/* ═══════════ pilha (seção presa no scroll) ═══════════ */
.pilha{padding-block:clamp(40px,6vw,80px)}
.pilha-paineis{display:grid;grid-template-columns:1fr}
.painel-laranja{position:relative;padding:72px 28px 64px;background:var(--laranja);color:#000}
.mais{position:absolute;width:13px;height:13px}
.mais::before,.mais::after{content:"";position:absolute;background:#000}
.mais::before{left:6px;top:0;width:1.5px;height:13px}
.mais::after{top:6px;left:0;width:13px;height:1.5px}
.mais--a{top:20px;left:20px}.mais--b{top:20px;right:20px}.mais--c{bottom:20px;left:20px}.mais--d{bottom:20px;right:20px}
.slides{display:grid;gap:40px;max-width:600px;margin:0 auto;text-align:center}
.slide{font-weight:500;letter-spacing:-.025em}
.slide--titulo{font-size:clamp(1.75rem,1rem + 1.75vw,2.55rem);line-height:1.08;letter-spacing:-.03em}
.slide--texto{font-size:clamp(1.2rem,.85rem + .85vw,1.65rem);line-height:1.22}
.slide--afirmacao{font-weight:700;font-size:clamp(1.4rem,.95rem + 1.1vw,2.05rem);line-height:1.14}
.pilha .pontos{display:none;position:absolute;left:50%;bottom:34px;transform:translateX(-50%);background:rgba(0,0,0,.1)}
.pilha .ponto{background:rgba(0,0,0,.32)}
.pilha .ponto i{background:#000}
.painel-escuro{position:relative;aspect-ratio:1/1;background-color:var(--preto);border:1px solid var(--linha);
  background-image:radial-gradient(circle,#3b4148 1.2px,transparent 1.6px);background-size:95px 82px;background-position:center}
.tela{position:absolute;inset:14%;display:flex;align-items:center;justify-content:center;background:var(--branco)}
.tela svg{width:80%;height:auto;overflow:visible}
@media (min-width:900px){.pilha-paineis{grid-template-columns:1fr 1fr}.painel-escuro{aspect-ratio:auto;min-height:560px}}
.pilha--presa{height:calc(var(--n) * 100svh);padding-block:0}
.pilha--presa .pilha-fixa{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.pilha--presa .pilha-paineis{width:100%;height:min(76svh,680px)}
.pilha--presa .painel-laranja{display:flex;align-items:center;justify-content:center;padding:72px 56px 96px}
.pilha--presa .painel-escuro{min-height:0}
.pilha--presa .slides{display:block;position:relative;width:100%}
.pilha--presa .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden}
.pilha--presa .pontos{display:flex}

/* ═══════════ seção clara ═══════════ */
.claro{padding-block:clamp(96px,12vw,180px);background:var(--branco);color:#000}
.claro .container{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.claro h2{max-width:15ch;font-weight:500;font-size:clamp(2.2rem,1rem + 3.1vw,4.4rem);line-height:.98;letter-spacing:-.03em}
.claro .texto{margin-top:2rem;max-width:54ch;font-size:1.125rem;line-height:1.5;letter-spacing:-.01em;color:#56616b}
.claro .texto p+p{margin-top:1.1rem}
.claro-arte svg{width:min(100%,560px);height:auto;margin-inline:auto;overflow:visible}
@media (min-width:900px){.claro .container{grid-template-columns:1.05fr .95fr;gap:var(--gutter)}}
.ch{display:inline-block;text-align:center}

/* ═══════════ fecho ═══════════ */
.fecho{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-block:clamp(120px,14vw,180px);background:var(--preto);text-align:center}
.fecho canvas{position:absolute;inset:0;width:100%;height:100%}
.fecho-conteudo{position:relative;z-index:1;max-width:720px;padding-inline:var(--gutter)}
.fecho-conteudo::before{content:"";position:absolute;z-index:-1;inset:-18% -14%;background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.7) 60%,rgba(0,0,0,0));pointer-events:none}
.fecho h2{font-weight:500;font-size:clamp(2.2rem,1rem + 3.1vw,4.4rem);line-height:1;letter-spacing:-.03em}
.fecho .texto{margin:1.9rem auto 0;max-width:56ch;font-size:1.125rem;line-height:1.45;letter-spacing:-.01em;color:var(--cinza-texto)}
.fecho .texto p+p{margin-top:1rem}
.fecho .btn{margin-top:2.25rem}
.aviso{margin:1.25rem auto 0;max-width:60ch;font-size:.875rem;line-height:1.45;color:#76828c}

/* ═══════════ rodapé ═══════════ */
.rodape{overflow:hidden;background:var(--laranja);color:#000}
.rodape-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:44px clamp(64px,10vw,140px);font-size:1.25rem;letter-spacing:-.02em}
.rodape-topo a{color:#000;text-decoration:none}
.rodape .marca-icone path{fill:#000}
.rodape-marca{padding-inline:var(--gutter);line-height:.76;margin-bottom:-.06em}
.rodape-marca span{display:inline-block;font-weight:500;letter-spacing:-.045em;white-space:nowrap;font-size:14.5vw}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}