@import "./variables.css";

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
/* barra de rolagem escondida: quem marca a posição é a régua do cabeçalho */
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{
  background:var(--fundo);color:rgb(var(--tinta-2));
  font-family:var(--f);font-weight:400;
  font-size:clamp(15px,.4vw + 14.2px,17px);line-height:var(--lh-corpo);
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
body.trava{overflow:hidden}
::selection{background:rgb(var(--acento));color:var(--fundo)}
img{max-width:100%;display:block}
a{color:inherit}

/* ============ atmosfera: névoa + grão. É o que tira a cara de chapado ==== */
/* a deriva é LIMITADA de propósito: antes eu movia por -y*0.06, o que em
   11.000px de rolagem virava -660px — muito além do inset, e o brilho subia
   e ficava cortado. Agora anda ±48px sobre a fração de rolagem, e a folga
   do inset cobre isso com sobra. */
.aura{
  position:fixed;inset:-38vh -22vw;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 24% 26%, rgba(37,99,235,.17), transparent 68%),
    radial-gradient(34% 28% at 78% 60%, rgba(96,165,250,.11), transparent 70%),
    radial-gradient(46% 34% at 52% 88%, rgba(37,99,235,.09), transparent 72%);
  will-change:transform;
}
/* ============ VÉU — fundo WebGL (shader Velaris portado) ============
   Ruído simplex animado em 3 oitavas, mistura de 4 cores, vinheta e grão,
   tudo em GLSL. A .aura de gradiente continua embaixo como fallback e
   aparece sozinha se o WebGL não subir. */
#veu{position:fixed;inset:0;z-index:0;pointer-events:none;display:block;width:100%;height:100%}
/* rastro de pixels do cursor — acima de tudo, nunca clicável */
#rastro{position:fixed;inset:0;z-index:95;pointer-events:none;display:none;width:100%;height:100%}
html.ponteiro-fino #rastro{display:block}

/* ============ VIDRO LÍQUIDO ============
   Os três planos do componente original (distorção, tinta, borda interna)
   condensados em dois pseudo-elementos, pra não custar markup por botão.
   A distorção por SVG só entra onde há poucos elementos — em superfície
   que se repete ela derruba o frame. */
.vidro{position:relative;isolation:isolate;overflow:hidden;background:transparent}
.vidro::before{
  content:'';position:absolute;inset:0;z-index:-2;border-radius:inherit;
  backdrop-filter:blur(7px) saturate(155%);-webkit-backdrop-filter:blur(7px) saturate(155%);
}
/* border-radius:inherit e obrigatorio nos dois: inset box-shadow segue o raio
   do PROPRIO elemento, e sem raio o brilho branco e um quadrado que o
   overflow do card corta justamente nas quinas — era o detalhe que faltava. */
.vidro::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(255,255,255,.055);
  box-shadow:inset 1.5px 1.5px 1px 0 rgba(255,255,255,.24),
             inset -1px -1px 1px 1px rgba(255,255,255,.10);
}
.vidro-liquido::before{filter:url(#vidro-distorcao)}
/* Fundo opaco mata o backdrop-filter: ele passa a filtrar o próprio fundo
   do elemento e o vidro some. Quem tem .vidro cede o background pro tint. */
.vidro,.card.vidro{background:transparent}
.vidro.forte::before{backdrop-filter:blur(10px) saturate(170%);-webkit-backdrop-filter:blur(10px) saturate(170%)}
.vidro.forte::after{
  background:linear-gradient(158deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 55%,rgba(255,255,255,.06));
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.34),
             inset -1px -1px 1px 1px rgba(255,255,255,.15),
             0 24px 50px -28px rgba(0,0,0,.85);
}

.vinheta{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 50% 50%, transparent 0%, rgba(10,15,30,.55) 72%, var(--fundo) 100%);
}
/* o grão agora vem do shader (u_grain); a camada CSS era custo repetido */
html:not(.js) body::after,body.sem-veu::after{
  content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ palco: rolagem com inércia ============ */
#palco{position:relative;z-index:2}
html.suave #palco{position:fixed;top:0;left:0;width:100%;will-change:transform}

/* ============ grade ============ */
.wrap{width:100%;max-width:1600px;margin:0 auto;padding:0 var(--gutter) 0 calc(var(--gutter) + var(--rail))}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
/* abaixo de 900 a grade de 12 vira pilha — inclusive onde o grid-column
   veio em style inline, daí o !important */
@media(max-width:900px){.g>*{grid-column:1/-1!important}}

/* seção = tela cheia, com folga pra crescer quando o conteúdo pede */
.sec{
  position:relative;min-height:100svh;
  display:grid;align-content:center;
  padding:calc(var(--topo) + clamp(5rem,10vh,9rem)) 0 clamp(5.5rem,11vh,10rem);
  scroll-margin-top:var(--topo);
}
.sec.centro{justify-items:center;text-align:center}
/* centralização real: os blocos internos também se alinham ao eixo */
.centro .cab{justify-content:center}
.centro .g{justify-items:center}
.centro .cards .card,.centro .etapa{text-align:center;align-items:center}
.centro .card p,.centro .etapa p{margin-left:auto;margin-right:auto}
.centro .jura li{grid-template-columns:1fr;justify-items:center;gap:.45rem;text-align:center}
.centro .jura li span{max-width:52ch}
.centro .preco{justify-content:center}
.centro .topo-2{grid-template-columns:1fr;justify-items:center;text-align:center}
.centro .topo-2 p{justify-self:center;max-width:46ch}
.centro .h2,.centro .h3{margin-left:auto;margin-right:auto}

/* ============ tipografia ============ */
.mx{font-size:var(--t-8);line-height:var(--lh-max);font-weight:600;letter-spacing:-.035em;color:rgb(var(--tinta));padding-bottom:var(--folga-desc);text-wrap:balance}
.h2{font-size:var(--t-7);line-height:var(--lh-tit);font-weight:600;letter-spacing:-.032em;color:rgb(var(--tinta));padding-bottom:var(--folga-desc);text-wrap:balance}
.h3{font-size:var(--t-4);line-height:1.04;font-weight:600;letter-spacing:-.028em;color:rgb(var(--tinta));padding-bottom:var(--folga-desc)}
.h4{font-size:var(--t-3);line-height:1.14;font-weight:600;letter-spacing:-.022em;color:rgb(var(--tinta))}
.ln{display:block}

/* rótulo: mesma família, tracking aberto (método OASIS — sem segunda fonte) */
.rot{
  font-size:var(--t-rot);font-weight:500;line-height:1.6;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgb(var(--tinta-3));display:inline-block;
}
.rot .idx{color:rgb(var(--acento));margin-right:1.25em;letter-spacing:.18em}
.rot.larga{letter-spacing:.42em}
.rot.ac{color:rgb(var(--acento))}

p{max-width:58ch}
.centro p{margin-left:auto;margin-right:auto}
p+p{margin-top:1.05em}
strong{font-weight:600;color:rgb(var(--tinta))}
.claro{color:rgb(var(--tinta))}
.h2.dim,.h3.dim,.mx.dim{color:rgb(var(--tinta-2))}
.p2{font-size:var(--t-p2);line-height:1.5;color:rgb(var(--tinta-2));max-width:46ch}

/* ============ ANIMAÇÃO 1 · palavras que sobem por máscara ============ */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:var(--folga-desc);margin-bottom:calc(var(--folga-desc) * -1)}
.pal>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .95s var(--curva)}
.js .in .pal>i,.js .pal.in>i{transform:none}

/* ============ ANIMAÇÃO 2 · tinta que sangra ============ */
.bl{
  display:inline-block;--ink:var(--tinta);
  background-image:linear-gradient(96deg,rgb(var(--ink)) 0 42%,rgba(var(--ink),.32) 49%,rgba(var(--ink),.04) 58% 100%);
  background-size:270% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.js .bl{background-position:100% 0;transition:background-position 1.3s var(--curva)}
.js .in .bl,.js .bl.in{background-position:0 0}
.bl.dim{--ink:var(--tinta-2)}
.bl.ac{--ink:var(--acento)}

/* ============ ANIMAÇÃO 3 · digitação ============ */
/* Cada caractere nasce no lugar DEFINITIVO e só acende. A versao anterior
   redesenhava uma copia centrada que crescia, e a linha inteira escorregava
   pra esquerda a cada letra — era o que ficava estranho. */
.tp{position:relative;display:block;white-space:pre-wrap}
.tp i{font-style:inherit;opacity:0}
.tp i.on{opacity:1}
.tp .cur{
  position:absolute;top:.2em;width:.38em;height:.66em;display:none;
  background:rgb(var(--acento));pointer-events:none;
  animation:cursor .92s steps(1) infinite;
}
.tp.ativa .cur{display:block}
@keyframes cursor{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ============ ANIMAÇÃO 4 · revelação estrutural ============ */
.js .rv{clip-path:inset(0 0 100% 0);transform:translateY(1.4rem);
        transition:clip-path 1.15s var(--curva),transform 1.15s var(--curva)}
.js .in .rv,.js .rv.in{clip-path:inset(0 0 0 0);transform:none}
/* clip-path corta o box-shadow no limite da caixa mesmo valendo inset(0). A
   caixa do .acoes tem a altura EXATA do botao, entao o brilho dele saia
   serrado reto embaixo. Terminada a revelacao o clip nao serve mais: sai.
   (inset com valor negativo resolveria sem JS, mas e invalido — o Chrome
   descarta a declaracao inteira.) */
.js .livre .rv,.js .rv.livre{clip-path:none}
.js .d1{transition-delay:.09s}.js .d2{transition-delay:.18s}
.js .d3{transition-delay:.27s}.js .d4{transition-delay:.36s}
.js .d5{transition-delay:.45s}.js .d6{transition-delay:.54s}

/* traço que se desenha */
.tr{height:1px;background:var(--linha);width:100%}
.js .tr{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.25s var(--curva)}
.js .in .tr,.js .tr.in{transform:scaleX(1)}
.trv{width:1px;background:var(--linha)}
.js .trv{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.25s var(--curva)}
.js .in .trv{transform:scaleY(1)}

/* paralaxe */
.px{will-change:transform}

/* ============ abertura ============
   O nome se monta em pixels: o texto é rasterizado num canvas fora de tela,
   e cada bloco da grade entra de um ponto aleatório até o lugar certo. No
   fim os blocos se dispersam e a cortina sobe. Mesma linguagem do cursor. */
/* A saida deixou de ser cortina e virou fade: o arco de luz se dissolve e a
   hero aparece por baixo, ja animando. Fundo quase preto porque a abertura
   comeca no escuro — a cor azul quem traz e o proprio arco. */
/* pointer-events:auto e obrigatorio: com `none` o clique atravessava a tela
   de carregamento e chegava no site atras — recarregar na ultima secao
   deixava o botao do formulario clicavel sem estar visivel. */
#pre{position:fixed;inset:0;z-index:130;background:#04070e;pointer-events:auto;
     opacity:1;transition:opacity .7s var(--curva),visibility .7s}
/* cinto e suspensorio: o JS ainda marca esses blocos como inert */
body.carregando #palco,body.carregando header,body.carregando .dock{pointer-events:none}
#pre.off{opacity:0;visibility:hidden}
/* o contorno do botao e a barra de progresso agora */
#pre .barra{display:none}




/* A marca sai do canvas e vira DOM: cada letra chega DESFOCADA e resolve.
   "Clarus" quer dizer claro — a animacao e a palavra entrando em foco. */
/* mesmo desenho do rotulo do cabecalho: caixa alta e tracking aberto. Com
   .26em de tracking em seis letras a palavra fica bem mais larga, por isso o
   corpo cai — o vw manda pra caber em qualquer tela. */
#pre .marca-pre{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:#fff;white-space:nowrap;line-height:1;
  font-size:clamp(2.2rem,9.9vw,7rem);padding-left:.26em;
}
#pre .marca-pre i{
  display:inline-block;font-style:normal;opacity:0;
  filter:blur(26px);transform:scale(1.16) translateY(.1em);
  text-shadow:0 0 .5em rgba(120,180,255,.55);
  transition:opacity 1.15s var(--curva),filter 1.15s var(--curva),transform 1.15s var(--curva);
}
#pre .marca-pre.foco i{opacity:1;filter:blur(0);transform:none}
#pre canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#pre .barra{
  position:absolute;left:50%;bottom:clamp(2.5rem,9vh,5rem);transform:translateX(-50%);
  width:min(30vw,260px);height:1px;background:rgba(var(--tinta),.12);overflow:hidden;
}
#pre .barra i{display:block;height:100%;width:0;background:rgb(var(--acento))}
#pre.off .barra{opacity:0;transition:opacity .25s}
#pre.pronto .barra{opacity:0;transition:opacity .5s}
/* abertura estilo Disney+: a marca fica montada e uma luz pulsa atrás do
   botão. O pulso não tem período fixo — a FREQUÊNCIA cai, então ele começa
   rápido e vai lentificando. Quem calcula isso é o JS; CSS keyframe não faz. */
/* O botao esta SEMPRE no lugar, so invisivel: e o canvas que desenha o
   contorno dele, e a geometria tem que casar em pixel. --nasce faz a borda
   e o rotulo aparecerem quando o traco fecha a volta. */
#pre .comecar{
  /* svh, não vh: no celular o vh muda quando a barra do navegador some, e
     o botão saía do lugar onde o traço já tinha desenhado o contorno */
  position:absolute;left:50%;bottom:clamp(4rem,14svh,7.5rem);
  transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.35em 3.4em;border:0;border-radius:9999px;background:none;
  color:rgb(var(--tinta));
  font-family:var(--f);font-size:.82rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  pointer-events:none;
}
#pre.pronto .comecar{pointer-events:auto}
/* a placa contrai no hover — o gesto do botao Entrar do OASIS */
#pre .comecar .placa{
  position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  border:1px solid rgba(255,255,255,calc(.26 * var(--nasce,0)));
  background:rgba(255,255,255,calc(.055 * var(--nasce,0)));
  backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);
  opacity:var(--nasce,0);
  transition:transform .5s var(--curva),border-color .5s var(--curva);
}
#pre .comecar:hover .placa{transform:scale(.9);border-color:rgba(var(--acento),.75)}
#pre .comecar .luz{
  position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(var(--pulso-esc,1));pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(96,165,250,.45),rgba(96,165,250,.1) 38%,transparent 68%);
  opacity:calc(var(--pulso,0) * var(--nasce,0));
}
#pre .comecar .txt{position:relative;z-index:2;opacity:var(--nasce,0);display:inline-flex}
/* no clique a luz de tras estoura e lava a tela — e ela que faz a passagem
   pra hero, no lugar de um fade seco */
#pre .comecar .clarao{
  position:absolute;left:50%;top:50%;width:170vmax;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(.05);opacity:0;pointer-events:none;z-index:5;
  background:radial-gradient(circle,
    rgba(234,244,255,.98),rgba(96,165,250,.6) 20%,rgba(37,99,235,.2) 42%,transparent 68%);
  transition:opacity .4s var(--curva),transform .85s var(--curva);
}
#pre.clarear .comecar .clarao{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* O radial sozinho brilha forte mas nao preenche: as pontas ficam
   transparentes. A lavagem e uma camada de tela cheia que satura em branco
   por cima dele — e ela que ofusca antes da hero aparecer. */
#pre .lavagem{
  position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% var(--foco-y,86%),
    #ffffff 0%,#f0f7ff 14%,#bfdbfe 34%,#60a5fa 62%,#2563eb 88%,#1e40af 100%);
  filter:brightness(1) saturate(1);
  transition:opacity .44s var(--curva),filter .32s linear;
}
#pre.lavar .lavagem{opacity:1}
/* o pico e o que ofusca: a lavagem sobe de brilho e perde cor, virando
   quase branco puro, antes de se dissolver na hero */
#pre.pico .lavagem{filter:brightness(2.3) saturate(.22)}
/* rolagem por letra: duas copias em overflow:hidden, a de cima desce pra
   ocupar o lugar da de baixo. A de baixo sai mais rapido do que a de cima
   entra — foi assim que o OASIS mediu. */
#pre .comecar .ch{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
#pre .comecar .ch i,#pre .comecar .ch b{
  display:block;font-style:normal;font-weight:inherit;
  transition:transform .42s var(--curva);
  transition-delay:calc(var(--i,0) * 26ms);
}
#pre .comecar .ch b{position:absolute;left:0;top:0;transform:translateY(-100%);
  transition-duration:.6s;color:rgb(var(--acento))}
#pre .comecar:hover .ch i{transform:translateY(100%)}
#pre .comecar:hover .ch b{transform:translateY(0)}
@media(max-width:760px){#pre .comecar{padding:1.2em 2.5em;font-size:.74rem;letter-spacing:.16em}}
@media(prefers-reduced-motion:reduce){#pre .marca-pre i{filter:none;opacity:1;transform:none}}

/* ============ header ============ */
/* Metodo OASIS: rotulo preso ao canto da viewport, sem faixa e sem borda. O
   topo se funde na cor da pagina por gradiente — e isso que mantem a marca
   legivel sobre qualquer secao sem desenhar uma aba. */
header{position:fixed;top:0;left:0;right:0;z-index:60;pointer-events:none}
header::before{
  content:'';position:absolute;left:0;right:0;top:0;
  height:calc(var(--topo) + 4.5rem);pointer-events:none;
  background:linear-gradient(180deg,var(--fundo) 0%,rgba(10,15,30,.6) 36%,transparent 100%);
}
header .barra{position:relative;isolation:isolate;pointer-events:none}
header .barra>*{pointer-events:auto}
header .barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--topo)}
header .wrap{padding-right:var(--gutter)}

/* celular: a aba vira pilula flutuante de vidro */
@media(max-width:760px){
  header{padding:.7rem .7rem 0}
  header::before{display:none}
  header .wrap{padding:0;max-width:none}
  header .barra{
    height:auto;padding:.5rem .5rem .5rem 1.05rem;border-radius:9999px;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(20px) saturate(190%);-webkit-backdrop-filter:blur(20px) saturate(190%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 12px 36px -16px rgba(0,0,0,.9),
               inset 0 1px 0 0 rgba(255,255,255,.26),
               inset 0 -1px 0 0 rgba(255,255,255,.05);
  }
  .marca img{width:23px;height:23px}
  .marca .nome{font-size:.78rem;letter-spacing:.2em}
  .abrir{padding:.4rem .7rem}
}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:rgb(var(--tinta))}
.marca img{width:27px;height:27px;object-fit:contain;transform-style:preserve-3d;
           will-change:transform}
.marca .nome{font-weight:600;font-size:.92rem;letter-spacing:.26em;line-height:1;text-transform:uppercase}
.marca sup{font-size:.5em;vertical-align:super;color:rgb(var(--tinta-3));letter-spacing:0}

/* ============ LETRAS DANCANTES (Dancing Letters, do 21st.dev) ============ */
/* As oito animacoes fisicas do componente React, portadas pra @keyframes.
   Os deslocamentos do original estao em px pensados pra text-8xl; aqui viram
   `em`, senao a letra salta 40px numa palavra de 13px e sai do cabecalho. */
/* perspectiva e preserve-3d: sem eles o rotateX de 240deg da dl4 so
   achata a letra em vez de virar. O componente original poe os dois. */
.marca,.marca .nome,#pre .marca-pre{perspective:600px}
.marca .nome i,#pre .marca-pre i{display:inline-block;font-style:normal;
               will-change:transform;transform-style:preserve-3d}
.danca .dl{animation-fill-mode:both}
.danca .dl1{animation:dl-elastico .8s ease-in-out}
.danca .dl2{animation:dl-dobradica 1.2s cubic-bezier(.175,.885,.32,1.275);transform-origin:bottom left}
.danca .dl3{animation:dl-pulo .6s ease-out;transform-origin:bottom center}
.danca .dl4{animation:dl-tomba 2s ease-out;transform-origin:50% 80%}
.danca .dl5{animation:dl-desliza .8s ease-in-out}
.danca .dl6{animation:dl-tremor .5s linear}
.danca .dl7{animation:dl-estala .5s ease-in-out}
.danca .dl8{animation:dl-flutua 1.2s ease-in-out}
@keyframes dl-elastico{
  0%{transform:scale(1,1)}    16%{transform:scale(1.25,.75)}
  33%{transform:scale(.75,1.25)} 50%{transform:scale(1.15,.85)}
  66%{transform:scale(.95,1.05)} 83%{transform:scale(1.05,.95)}
  100%{transform:scale(1,1)}
}
@keyframes dl-dobradica{
  0%{transform:rotate(0) translateY(0)}    20%{transform:rotate(80deg) translateY(.1em)}
  40%{transform:rotate(60deg) translateY(-.05em)} 60%{transform:rotate(80deg) translateY(.05em)}
  80%{transform:rotate(60deg) translateY(-.02em)} 100%{transform:rotate(0) translateY(0)}
}
@keyframes dl-pulo{
  0%{transform:scaleY(1) translateY(0)}   33%{transform:scaleY(.6) translateY(.2em)}
  66%{transform:scaleY(1.2) translateY(-.42em)} 100%{transform:scaleY(1) translateY(0)}
}
@keyframes dl-tomba{
  0%{transform:rotateX(0) scale(1)}      12%{transform:rotateX(240deg) scale(1.1)}
  24%{transform:rotateX(150deg) scale(1.05)} 36%{transform:rotateX(200deg) scale(1)}
  48%{transform:rotateX(175deg) scale(1)}    60%{transform:rotateX(180deg) scale(1)}
  85%{transform:rotateX(180deg) scale(1)}    100%{transform:rotateX(0) scale(1)}
}
@keyframes dl-desliza{
  0%{transform:translateX(0)}   20%{transform:translateX(-.21em)}
  40%{transform:translateX(.16em)} 60%{transform:translateX(-.1em)}
  80%{transform:translateX(.05em)} 100%{transform:translateX(0)}
}
@keyframes dl-tremor{
  0%{transform:translate(0,0) rotate(0)}          14%{transform:translate(-.05em,-.02em) rotate(-1deg)}
  28%{transform:translate(.05em,.02em) rotate(1deg)} 42%{transform:translate(-.05em,-.01em) rotate(-.5deg)}
  56%{transform:translate(.05em,.01em) rotate(.5deg)} 72%{transform:translate(-.02em,0) rotate(0)}
  86%{transform:translate(.02em,0) rotate(0)}     100%{transform:translate(0,0) rotate(0)}
}
@keyframes dl-estala{
  0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)}
}
@keyframes dl-flutua{
  0%{transform:translateY(0) scale(1);text-shadow:0 0 0 rgba(0,0,0,0)}
  50%{transform:translateY(-.31em) scale(1.1);text-shadow:0 .2em .2em rgba(0,0,0,.35)}
  100%{transform:translateY(0) scale(1);text-shadow:0 0 0 rgba(0,0,0,0)}
}
/* a linha de carregamento sai do cabecalho e vai pro topo real da pagina */
.progresso{position:fixed;top:0;left:0;right:0;height:2px;z-index:61;
  background:rgb(var(--acento));transform:scaleX(0);transform-origin:0 50%}

/* gap:0 e margem por filho: com gap, o CTA escondido de largura 0 ainda
   cobrava duas folgas e o botao de audio flutuava no meio da barra */
.acoes-hdr{display:flex;align-items:center;gap:0}
.acoes-hdr>.abrir{margin-left:clamp(1rem,2.4vw,1.9rem)}
/* som ligado por padrao, mas o navegador so libera depois de um gesto — o
   clique em Comecar e esse gesto. O botao existe pra quem nao quer. */
.som{
  display:inline-grid;place-items:center;width:34px;height:34px;flex:none;
  background:none;border:0;cursor:pointer;color:rgb(var(--tinta-2));padding:0;
  border-radius:9999px;transition:color .4s var(--curva),background .4s var(--curva);
}
.som:hover{color:rgb(var(--tinta));background:rgba(255,255,255,.07)}
.som svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
         stroke-linecap:round;stroke-linejoin:round}
.som .cone{fill:currentColor;stroke:none;transition:transform .45s var(--curva);
            transform-origin:8px 12px}
.som .onda{transition:opacity .3s var(--curva),transform .45s var(--curva);
           transform-origin:9px 12px}
/* a barra e desenhada por stroke-dashoffset, nao ligada/desligada — e o que
   faz o desligar parecer um gesto e nao um pisca */
.som .corte{stroke-dasharray:20;stroke-dashoffset:20;opacity:0;
            transition:stroke-dashoffset .5s var(--curva),opacity .18s linear}
.som[aria-pressed="false"] .onda{opacity:0;transform:scale(.35)}
.som[aria-pressed="false"] .cone{transform:scale(.88)}
.som[aria-pressed="false"] .corte{opacity:1;stroke-dashoffset:0}
.som.bate svg{animation:som-bate .52s var(--curva)}
@keyframes som-bate{0%{transform:scale(1)}32%{transform:scale(.76)}100%{transform:scale(1)}}
@media(max-width:760px){.som{width:30px;height:30px}.som svg{width:17px;height:17px}}
header .hdr-cta{display:none}
/* o ::before e o preenchimento do hover: sem o mesmo raio ele vaza quadrado */
header .hdr-cta::before{border-radius:9999px}
@media(min-width:761px){
  /* max-width abre o ESPACO (e o que empurra o botao de audio pra esquerda,
     porque o grupo cresce a partir da borda direita); o clip-path abre a
     REVELACAO, agora da direita pra esquerda. */
  /* .btn.hdr-cta (duas classes + elemento) e o minimo pra vencer .btn.sm,
     que e duas classes — senao o padding de 1.4em sobrevive e o botao
     escondido continua cobrando 34px de largura. */
  header .btn.hdr-cta{
    display:inline-flex;white-space:nowrap;border-radius:9999px;
    /* min-width:0 e obrigatorio: item de flex tem min-width:auto por padrao,
       que vence o max-width:0 e deixava o CTA reservando 34px escondido —
       era isso que jogava o botao de audio pro meio da barra. */
    min-width:0;overflow:hidden;
    max-width:0;padding-left:0;padding-right:0;margin-left:0;
    clip-path:inset(0 0 0 100%);pointer-events:none;
    transition:max-width .8s var(--curva),padding .8s var(--curva),
               margin-left .8s var(--curva),clip-path .8s var(--curva);
  }
  header.cta-on .btn.hdr-cta{
    max-width:24rem;padding-left:1.4em;padding-right:1.4em;
    margin-left:clamp(1rem,2.4vw,1.9rem);
    clip-path:inset(0 0 0 0);pointer-events:auto;
  }
}

.abrir{
  display:inline-flex;align-items:center;gap:.8rem;background:none;border:0;cursor:pointer;
  color:rgb(var(--tinta));font-family:var(--f);font-size:var(--t-rot);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;padding:.5rem 0;
}
.abrir .tracos{display:grid;gap:5px;width:24px}
.abrir .tracos i{display:block;height:1px;background:currentColor;transform-origin:100% 50%;transition:transform .6s var(--curva)}
.abrir .tracos i:last-child{transform:scaleX(.6)}
.abrir:hover .tracos i:first-child{transform:scaleX(.6)}
.abrir:hover .tracos i:last-child{transform:scaleX(1)}

/* ============ MENU FULLSCREEN ============ */
#menu{
  position:fixed;inset:0;z-index:120;visibility:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path .62s var(--curva-dura),visibility .62s;
}
#menu.aberto{visibility:visible;clip-path:inset(0 0 0 0)}
#menu .colunas{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
#menu .colunas i{
  /* sem border-right: a costura entre as colunas ficava visivel depois da
     animacao, e o efeito e a descida, nao a divisao */
  display:block;background:var(--fundo-2);
  transform:translateY(-100%);transition:transform .6s var(--curva-dura);
}
#menu.aberto .colunas i{transform:none}
#menu.aberto .colunas i:nth-child(2){transition-delay:.04s}
#menu.aberto .colunas i:nth-child(3){transition-delay:.08s}
#menu.aberto .colunas i:nth-child(4){transition-delay:.12s}
#menu .nevoa{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 45% at 30% 30%, rgba(37,99,235,.18), transparent 70%);
}
#menu .conteudo{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto 1fr auto}
#menu .topo{display:flex;align-items:center;justify-content:space-between;height:var(--topo)}
.fechar{
  display:inline-flex;align-items:center;gap:.8rem;background:none;border:0;cursor:pointer;
  color:rgb(var(--tinta));font-family:var(--f);font-size:var(--t-rot);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;padding:.5rem 0;
}
.fechar .x{position:relative;width:20px;height:20px}
.fechar .x i{position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor;transition:transform .6s var(--curva)}
.fechar .x i:first-child{transform:rotate(45deg)}
.fechar .x i:last-child{transform:rotate(-45deg)}
.fechar:hover .x i:first-child{transform:rotate(135deg)}
.fechar:hover .x i:last-child{transform:rotate(45deg)}

#menu nav{align-self:center;padding:1.5rem 0;display:grid;gap:.5rem;justify-items:start;
         max-width:36rem;margin:0 auto;width:100%}
#menu .item{display:block;padding:.1em 0}
/* A ordem dos tres e o que resolve o corte na abertura:
     .item  — nao corta nada
     .mag   — recebe o campo magnetico (JS, por quadro)
     .masc  — overflow:hidden, mascara a subida do <a>
     a      — sobe de translateY(105%)
   A mascara e DESCENDENTE do que aumenta, entao ela escala junto e nunca
   corta a letra. Com o overflow no .item, o campo — que agora liga no
   primeiro quadro — cortava as letras ate a mascara ser liberada. */
#menu .item .mag{
  display:block;transform-origin:0% 50%;will-change:transform;
  color:color-mix(in oklab, rgb(var(--tinta)), rgb(var(--acento)) calc(var(--mag,0) * 66%));
}
#menu .item .masc{display:block;overflow:hidden}
#menu .item:hover .mag{color:rgb(var(--acento))}
#menu .item a{
  display:flex;align-items:baseline;gap:1.25rem;text-decoration:none;
  font-weight:600;font-size:clamp(1.6rem,3.1vw,2.85rem);line-height:1.22;letter-spacing:-.028em;
  color:inherit;
  transform:translateY(105%);transition:transform .66s var(--curva);
}
#menu.aberto .item a{transform:none}
#menu.aberto .item:nth-child(1) a{transition-delay:.08s}
#menu.aberto .item:nth-child(2) a{transition-delay:.12s}
#menu.aberto .item:nth-child(3) a{transition-delay:.16s}
#menu.aberto .item:nth-child(4) a{transition-delay:.20s}
#menu.aberto .item:nth-child(5) a{transition-delay:.24s}
#menu.aberto .item:nth-child(6) a{transition-delay:.28s}
#menu.aberto .item:nth-child(7) a{transition-delay:.32s}
#menu.aberto .item:nth-child(8) a{transition-delay:.36s}
/* tela baixa nao cabe oito itens grandes */
@media(max-height:760px){#menu .item a{font-size:clamp(1.15rem,2.2vw,1.75rem)}}
#menu .item a .num{
  font-size:.6rem;font-weight:500;letter-spacing:.2em;color:rgb(var(--tinta-3));
  flex:none;width:3em;transition:color .5s var(--curva);
}
#menu .item a:hover{color:rgb(var(--acento))}
#menu .item a:hover .num{color:rgb(var(--acento))}
#menu .rodape{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:1.5rem 0 var(--gutter);
  transform:translateY(1.5rem);clip-path:inset(0 0 100% 0);
  transition:transform .9s var(--curva) .55s,clip-path .9s var(--curva) .55s;
}
#menu.aberto .rodape{transform:none;clip-path:inset(0 0 0 0)}
#menu .zap{color:rgb(var(--acento));text-decoration:none;display:inline-flex;align-items:center;gap:.7em}
#menu .zap .seta{transition:transform .5s var(--curva)}
#menu .zap:hover .seta{transform:translateX(.45em)}

/* ============ botão ============ */
.btn{
  display:inline-flex;align-items:center;gap:.85em;
  font-family:var(--f);font-size:var(--t-rot);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:1.15em 1.9em;background:var(--acento-forte);color:#fff;
  position:relative;overflow:hidden;isolation:isolate;border-radius:2px;
  transition:color .5s var(--curva);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:rgb(var(--acento));
  transform:translateY(101%);transition:transform .65s var(--curva);
}
.btn:hover::before{transform:none}
.btn:hover{color:var(--fundo)}
.btn .seta{transition:transform .6s var(--curva)}
.btn:hover .seta{transform:translateX(.45em)}
.btn.fantasma{background:none;color:rgb(var(--tinta))}
.btn.fantasma:hover{color:var(--fundo)}
.btn.sm{padding:.9em 1.4em}
/* CTA final: pílula, sozinha na linha, com o secundário virando link
   abaixo — é o que deixa ela de fato centralizada */
.btn.grande{
  font-size:.84rem;padding:1.6em 3.2em;border-radius:9999px;letter-spacing:.13em;
  box-shadow:0 18px 44px -20px rgba(37,99,235,.75);
}
.btn.grande::before{border-radius:9999px}
/* No celular o padding em `em` sobre a fonte cheia dava um botão de 347px de
   largura — quase a tela inteira, e o rótulo quebrava em duas linhas. Tem que
   vir DEPOIS de .btn.grande: mesma especificidade, quem vem por último manda. */
@media(max-width:760px){
  .btn{padding:1em 1.5em;letter-spacing:.1em}
  .btn.grande{font-size:.68rem;padding:1.15em 2.2em;letter-spacing:.1em;
              white-space:nowrap;box-shadow:0 12px 30px -16px rgba(37,99,235,.7)}
  .dock a{padding:.95em 1rem;white-space:nowrap}
}
.acoes.pilha{flex-direction:column;align-items:center;gap:1.35rem}
.link-sec{
  font-size:var(--t-rot);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgb(var(--tinta-3));text-decoration:none;display:inline-flex;align-items:center;gap:.6em;
  transition:color .5s var(--curva);
}
.link-sec:hover{color:rgb(var(--tinta))}
.link-sec .seta{transition:transform .5s var(--curva)}
.link-sec:hover .seta{transform:translateX(.4em)}
.acoes{display:flex;gap:.8rem;flex-wrap:wrap}
.centro .acoes{justify-content:center}

/* ============ cabeçalho de seção ============ */
.cab{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;width:100%}
.cab+.tr{margin:.85rem 0 clamp(3rem,6vh,5.5rem)}
.centro .cab{justify-content:center}
/* no celular o rótulo secundário quebra linha e come uma tela inteira de
   altura por seção — some com ele em vez de apertar o resto */
@media(max-width:640px){.cab .rot+.rot{display:none}}

/* ============ HERO ============ */
/* A hero ganha escala separando montagem de virada: a primeira frase entra
   em corpo médio, a segunda — que é o soco — vai em display cheio. */
#hero{align-content:center;padding-top:var(--topo)}
#hero .selo{margin-bottom:clamp(1.5rem,3.4vh,2.5rem)}
#hero .lead{font-size:var(--t-4);line-height:1.06;font-weight:500;letter-spacing:-.028em;
            color:rgb(var(--tinta-2));margin-bottom:clamp(.5rem,1.2vh,1rem)}
#hero .mx{font-size:clamp(3rem,9vw,9.5rem);max-width:13ch;margin-inline:auto}
#hero .sub{margin-top:clamp(1.75rem,3.6vh,2.75rem);max-width:48ch}
#hero .acoes{margin-top:clamp(2rem,4.2vh,3.25rem)}
/* sobrou só a guia de rolagem, centralizada */
.cantos{
  position:absolute;left:0;right:0;bottom:clamp(1.35rem,3.2vh,2.5rem);
  display:flex;align-items:flex-end;justify-content:center;
}
.cantos .fio{display:block;width:1px;height:2.25rem;
  background:linear-gradient(rgb(var(--acento)),transparent);
  animation:desce 2.6s var(--curva) infinite}
/* Antes isso trocava transform-origin de 50% 0 pra 50% 100% em 1% da
   animacao, com o scaleY interpolando por cima — a linha dava um salto na
   virada. clip-path desce sem trocar de eixo: cresce de cima e recolhe por
   baixo, e o quadro 100% coincide com o 0% (ambos sem altura). */
@keyframes desce{
  0%{clip-path:inset(0 0 100% 0)}
  45%{clip-path:inset(0 0 0 0)}
  58%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(100% 0 0 0)}
}
@media(max-width:640px){.cantos .meio{display:none}}

/* Campos flutuantes — mecânica do OASIS: eles não fazem paralaxe, eles
   ESCALAM. Longe do centro da tela ficam em .52, no centro chegam a 1.07.
   É a escala que dá vida; o deslocamento só acrescenta profundidade. */
.painel{
  position:absolute;border:1px solid var(--linha-fraca);border-radius:12px;
  /* malha de planta baixa em vez de dois borroes: o assunto da pagina e
     estrutura, e a grade le como projeto — nao como enfeite de gradiente */
  background:
    repeating-linear-gradient(0deg,  rgba(96,165,250,.11) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(96,165,250,.11) 0 1px, transparent 1px 20px),
    linear-gradient(122deg, rgba(255,255,255,.07) 0%, transparent 38%),
    radial-gradient(74% 58% at 26% 20%, rgba(37,99,235,.24), transparent 74%),
    linear-gradient(158deg, rgba(16,27,53,.96), rgba(13,21,39,.55));
  pointer-events:none;overflow:hidden;will-change:transform;
  transform:scale(.52);
}
@media(max-width:900px){.painel{display:none}}

/* ============ SEÇÃO PRESA (scrub) ============ */
/* position:relative é obrigatório: sem ele o .pin absoluto ancora no #palco
   e a seção inteira desenha por cima da hero. */
#saidas{position:relative;min-height:0;padding:0;display:block;height:380vh}
@media(max-width:760px){#saidas{height:230vh}}
#saidas .pin{
  position:absolute;top:0;left:0;width:100%;height:100svh;will-change:transform;
  padding:calc(var(--topo) + clamp(2rem,5vh,3.5rem)) 0 clamp(2.5rem,6vh,4.5rem);
}
#saidas .pin>.wrap{height:100%;display:grid;grid-template-rows:auto 1fr auto;align-content:stretch;gap:0}
.topo-2{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:.9rem;
        align-items:end;margin:clamp(1.5rem,3.5vh,2.75rem) 0 clamp(1.5rem,3.5vh,2.5rem)}
.topo-2 p{max-width:48ch;justify-self:center}
@media(max-width:820px){.topo-2{grid-template-columns:1fr;gap:.9rem}.topo-2 p{justify-self:start}}
@media(max-width:640px){.topo-2 p{display:none}}
/* ============ COVERFLOW (bloco 2) ============
   Os quatro cards ficam num palco com perspectiva e giram em Y conforme a
   posição contínua do scrub. Sem backdrop-filter aqui de propósito: em
   elemento transformado a cada quadro ele custa metade do frame — medido.
   A profundidade vem de gradiente, borda e um véu que escurece com a
   distância, que é iluminação, não fade de entrada. */
.passos{position:relative;perspective:1500px;perspective-origin:50% 50%;align-self:center}
.passo{
  position:absolute;top:0;left:50%;
  width:min(30rem,78vw);height:100%;margin-left:calc(min(30rem,78vw) / -2);
  padding:clamp(1.5rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  border:1px solid var(--linha);border-radius:18px;
  background:linear-gradient(158deg,rgba(24,40,76,.94),rgba(11,18,36,.96));
  box-shadow:inset 1.5px 1.5px 1px 0 rgba(255,255,255,.13),
             inset -1px -1px 1px 1px rgba(255,255,255,.05),
             0 34px 64px -32px rgba(0,0,0,.9);
  transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;
}
.passo::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:rgba(5,9,18,var(--veu,0));
}
.passo.on{border-color:rgba(var(--acento),.42)}
.passo .h3{margin:0;position:relative;z-index:1}
.passo p{position:relative;z-index:1;max-width:none}
@media(max-width:760px){
  .passo{border-radius:14px;gap:.6rem;width:min(30rem,84vw);margin-left:calc(min(30rem,84vw) / -2);
         padding:1.15rem 1.25rem}
  .passo .h3{font-size:clamp(1.25rem,4.8vw,1.7rem)}
  .passo p{font-size:.92rem;line-height:1.5}
  .topo-2{margin:1.1rem 0 1.1rem}
  .escada{margin-top:1.1rem}
}

.escada{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.4vw,1.1rem);
        margin-top:clamp(1.25rem,3vh,2.25rem);width:100%}
.degrau{display:grid;gap:.5rem}
.degrau .rot{font-size:.68rem;transition:color .6s var(--curva)}
.degrau .barra{height:1px;background:var(--linha);position:relative;overflow:hidden}
.degrau .barra i{position:absolute;inset:0;background:rgb(var(--acento));transform:scaleX(0);transform-origin:0 50%}
.degrau.feito .barra i{transform:scaleX(1);transition:transform .5s var(--curva)}
.degrau.ativo .rot{color:rgb(var(--tinta))}

/* ============ bloco 2 no celular: vertical ============ */
/* O scrub lateral pede que o dedo desça e os cards andem pro lado — no
   celular isso lê como travamento, não como recurso. Sem pin e sem
   perspectiva, os quatro viram uma pilha que rola igual ao resto. */
html:not(.suave) #saidas{height:auto;min-height:0}
html:not(.suave) #saidas .pin{position:static;height:auto;will-change:auto;transform:none!important}
html:not(.suave) #saidas .pin>.wrap{height:auto;display:block}
html:not(.suave) .passos{perspective:none;display:grid;gap:.9rem;height:auto!important;align-self:auto}
html:not(.suave) .passo{
  position:static;width:auto;height:auto;margin-left:0;
  transform:none!important;--veu:0;z-index:auto!important;
  transform-style:flat;will-change:auto;
}
html:not(.suave) .escada{display:none}

/* cabecalho de secao centralizado: era um par esquerda/direita em grade de
   12, que deixava titulo e subtitulo em cantos opostos */
.cabeca{display:grid;justify-items:center;text-align:center;gap:clamp(.85rem,2vh,1.4rem);width:100%}
.cabeca .h2{max-width:24ch;margin:0 auto}
.cabeca p{max-width:54ch;margin:0 auto}

/* ============ cards ============ */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);width:100%}
.cards.tres{grid-template-columns:repeat(3,1fr)}
.card{
  background:linear-gradient(165deg,var(--fundo-3),var(--fundo-2));
  border:1px solid var(--linha-fraca);border-radius:26px;
  padding:clamp(1.75rem,3vw,3rem);display:flex;flex-direction:column;gap:1.15rem;
  transition:border-color .7s var(--curva),transform .7s var(--curva);
}
.card:hover{border-color:var(--linha);transform:translateY(-4px)}
.card .desejo{margin-top:auto;padding-top:1.35rem;border-top:1px solid var(--linha)}
/* border-trail (motion-primitives): um quadrado percorre o motion path do card
   e uma MÁSCARA DE ANEL deixa visível só o pedaço que cai sobre a borda.
   Sem a máscara o quadrado vira um borrão girando dentro do card — era o que
   a versão anterior fazia. O anel é o efeito.
   .halo corre em fase com .trilha, fora da máscara: sozinho o anel de 2px
   some na tela, e a referência ganha o brilho por CSS de blur no demo. */
.trilha,.halo{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
/* overflow:visible nos dois: o halo corre SOBRE a borda, entao metade dele
   cai fora do card. Com o card cortando, sobrava meio blob com aresta reta —
   era o brilho "cortado". Os ::before/::after do vidro sao inset:0 com
   border-radius:inherit, entao nao precisavam do corte pra nada. */
.card.vidro{overflow:visible}
/* Com o card sem corte, o blob de 300px do halo passou a empurrar a largura
   do documento (125px de rolagem lateral no celular). overflow-x:clip corta
   na seção SEM criar contêiner de rolagem — diferente de hidden, que criaria
   e quebraria o position:sticky do empilhamento. */
/* overflow-clip-margin empurra a linha de corte pra fora da borda da seção
   sem criar overflow rolável (clip nunca cria). Com a cauda nova o corte já
   seria invisível; a margem garante que ele nem encoste no halo. */
#palco>main>section{overflow-x:clip;overflow-clip-margin:180px}
/* Sem mix-blend-mode, e a razao e o corte que sobrava na borda.
   O .card tem isolation:isolate (precisa: os pseudos do vidro moram em
   z-index -1/-2). Isso torna o card um grupo isolado, e o screen do halo
   passa a compor SO contra o que existe dentro do grupo — o tint e o
   backdrop-filter, ambos inset:0. Resultado: a metade do halo que cai sobre
   o card clareia, a metade que cai fora nao, e a emenda das duas acontece
   exatamente na borda, que e onde o halo corre. Era a "aresta" do brilho.
   Composto normal, o disco atravessa a borda com a mesma densidade dos dois
   lados. O alfa subiu um pouco pra compensar o clareamento perdido. */
.halo{z-index:1;overflow:visible}
.trilha{
  z-index:3;border:2px solid transparent;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.trilha i,.halo i{
  position:absolute;
  /* offset-rotate:auto (padrão) gira a peça com a direção do trajeto, então
     tanto o gradiente 90deg quanto a elipse correm sempre AO LONGO da borda */
  offset-path:rect(0 auto auto 0 round 25px);offset-distance:0%;
  animation:corre var(--dur,5s) linear infinite;animation-delay:var(--atraso,0s);
}
.trilha i{
  width:150px;height:150px;
  background:linear-gradient(90deg,
    rgba(var(--acento),0) 0%,rgba(var(--acento),.65) 24%,
    rgba(var(--acento),1) 42%,#fff 50%,rgba(var(--acento),1) 58%,
    rgba(var(--acento),.65) 76%,rgba(var(--acento),0) 100%);
}
/* Disco, nao elipse, e offset-rotate:0deg. A peca anterior era 300x120 com
   offset-rotate:auto herdado: ela GIRAVA junto com o trajeto, e a virada de
   90 graus em cada quina ficava visivel — era o brilho "mudando de direcao".
   Um disco e igual em qualquer angulo: nao ha direcao pra ver. Travar a
   rotacao tambem evita re-rasterizar o blur a cada quadro.
   A cauda mudou junto: antes o alfa ia de .30 a zero em 80% do raio, densa
   o suficiente pra qualquer corte de contêiner aparecer como aresta. Agora
   cai devagar e chega perto de zero muito antes do fim — onde um corte
   acontece, ja nao ha tinta pra cortar. */
.halo i{
  width:250px;height:250px;border-radius:50%;offset-rotate:0deg;
  background:radial-gradient(closest-side,
    rgba(var(--acento),.30) 0%,
    rgba(var(--acento),.20) 14%,
    rgba(var(--acento),.115) 28%,
    rgba(var(--acento),.055) 44%,
    rgba(var(--acento),.020) 62%,
    rgba(var(--acento),.005) 80%,
    rgba(var(--acento),0) 100%);
  filter:blur(20px);
}
.cards .card:nth-child(2){--dur:6.4s;--atraso:-2.2s}
@keyframes corre{to{offset-distance:100%}}
/* sem motion path o quadrado pararia num canto; sem máscara ele apareceria
   inteiro. Nos dois casos é melhor não mostrar nada. */
@supports not (offset-path: rect(0 auto auto 0 round 25px)){.trilha,.halo{display:none}}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){.trilha,.halo{display:none}}

/* ============ empilhamento entre seções ============ */
/* No celular quem prende é o position:sticky, não o JS. O pin por transform
   disputa com a rolagem nativa (a rolagem anda no compositor, o JS chega um
   quadro atrás) e o resultado é a seção tremendo — foi o travamento relatado.
   Com sticky bottom:0 a seção segura sozinha, no compositor, e a próxima
   passa por cima como uma carta. O JS só cuida do apagar e do recuo. */
/* bottom:0 faria o oposto do que se quer — ele impede a seção de PASSAR da
   base e a puxa pra cima. O que segura a seção com a base rente ao rodapé da
   tela é top negativo, e ele depende da altura de cada uma: quem escreve é o
   medir(), uma vez por resize, nunca por quadro. */
html:not(.suave) #palco>main>section{position:sticky}
/* Carta precisa de gume E de opacidade. Só apagar a de baixo não basta: com
   as duas transparentes os textos se sobrepõem no meio da passagem. O fundo
   próprio carrega o brilho que o shader dava, então nada se perde — e a hero
   fica de fora, transparente, com o shader inteiro. */
html:not(.suave) #palco>main>section+section{
  /* a folga é o descanso: sem ela a seção prende e a próxima já começa a
     cobrir no mesmo pixel, porque cada uma mede exatamente uma tela. O vão
     nunca é visto — a seção presa está cobrindo a tela enquanto ele rola. */
  margin-top:28svh;
  /* Sem borda, sem raio e sem sombra — era isso que virava a linha dura.
     O fundo, porem, tem que ser opaco: na vertical a tela e curta e o
     conteudo da secao que sobe cai POR CIMA do da que sai (o titulo em cima
     do botao da hero). No desktop isso nao acontece porque o JS segura a que
     entra na borda de baixo; no celular quem prende e o sticky, que anda na
     velocidade do dedo.
     Os 2.5% de esfumado no topo existem so pra nao haver linha de 1px entre
     o fundo da secao e o brilho do shader atras dela. */
  background:linear-gradient(180deg, rgba(10,15,30,0) 0, var(--fundo) 2.5%, var(--fundo) 100%);
}
/* Borda nova, no lugar da linha reta de antes: uma costura de luz que acende
   no meio e apaga nas duas pontas. Sem canto, sem retangulo — o mesmo
   vocabulario de luz do resto do site. */
html:not(.suave) #palco>main>section+section::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%, rgba(96,165,250,.28) 18%, rgba(150,196,255,.72) 42%,
    rgba(214,232,255,.9) 50%, rgba(150,196,255,.72) 58%,
    rgba(96,165,250,.28) 82%, transparent 100%);
}
/* um halo baixinho por baixo da costura, pra ela nao parecer colada */
html:not(.suave) #palco>main>section+section::after{
  content:'';position:absolute;left:10%;right:10%;top:0;height:46px;z-index:3;
  pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,
    rgba(96,165,250,.16), rgba(96,165,250,0) 72%);
}
/* Cada bloco prende na última tela do próprio trecho e recua enquanto o
   seguinte sobe por cima — o sticky-scroll do uilayout, refeito à mão.
   Quem apaga a seção que sai é o opacity dela, não um véu por cima: seção
   não tem fundo próprio, então escurecer com uma camada preta taparia o
   shader junto. Com opacity o conteúdo some e a atmosfera continua lá. */
@media(max-width:820px){.cards,.cards.tres{grid-template-columns:1fr}}

/* ============ método: 3 etapas ============ */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);width:100%;position:relative}
.etapa{padding-top:2.25rem;position:relative;display:flex;flex-direction:column}
.etapa::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--linha);
               transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--curva)}
.js .in .etapa::before{transform:scaleX(1)}
.js .in .etapa:nth-child(2)::before{transition-delay:.16s}
.js .in .etapa:nth-child(3)::before{transition-delay:.32s}
.etapa .num{font-size:clamp(2.25rem,4.5vw,4rem);font-weight:700;line-height:1;letter-spacing:-.05em;color:rgba(var(--acento),.22);margin-bottom:.75rem}
.etapa .h4{margin-bottom:.65rem}
.etapa .q{display:block;margin-top:auto;padding-top:1.35rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--tinta-3))}
@media(max-width:820px){.etapas{grid-template-columns:1fr;gap:2rem}}

/* ============ 06 fricção ============ */
.duas{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.5rem,4vw,4.5rem);width:100%;align-items:start}
.duas .trv{align-self:stretch}
.lado .h4{margin-bottom:.85rem}
.card .parte{margin-top:.4rem;padding-top:1.5rem;border-top:1px solid var(--linha-fraca)}
.lado>div+div{margin-top:2.25rem;padding-top:2.25rem;border-top:1px solid var(--linha-fraca)}
@media(max-width:860px){.duas{grid-template-columns:1fr}.duas .trv{display:none}.lado+.lado{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--linha)}}

/* ============ 07 compromisso ============ */
.jura{list-style:none;counter-reset:j;width:100%;display:grid;margin-top:clamp(1.5rem,3vh,2.5rem)}
.jura li{
  padding:clamp(1.15rem,2.4vh,1.75rem) 0;border-top:1px solid var(--linha-fraca);
  display:grid;grid-template-columns:3rem 1fr;gap:.75rem;align-items:baseline;
}
.jura li::before{content:'0'counter(j);counter-increment:j;font-size:.72rem;letter-spacing:.18em;color:rgb(var(--acento))}
.jura li span{max-width:56ch}
/* frase unica: rotulo, valor, rotulo. Antes eram dois blocos que quebravam
   em linhas separadas e o valor aparecia ANTES do 'a partir de'. */
.preco{margin-top:clamp(2rem,4vh,3rem);padding-top:1.75rem;border-top:1px solid var(--linha);
       display:flex;align-items:baseline;justify-content:center;gap:.75rem;
       flex-wrap:wrap;width:100%}
.preco .rot{line-height:1}   /* line-height 1.6 fazia o rotulo cair abaixo do numero */
.preco .v{font-size:var(--t-5);font-weight:600;line-height:1;letter-spacing:-.045em;color:rgb(var(--tinta));font-variant-numeric:tabular-nums}
.preco .v .cifra{font-size:.36em;vertical-align:super;color:rgb(var(--tinta-3));margin-right:.2em;font-weight:500}

/* ============ footer ============ */
/* o rodapé sai do fluxo: em fluxo ele empurrava a última seção pra cima e o
   fim da rolagem parava com a seção 08 cortada e o rodapé sobrando. Fora do
   fluxo, o fim da página é exatamente a última seção cheia. */
#palco>footer{position:absolute;left:0;bottom:0;width:100%;z-index:3;
  padding:0 0 clamp(1.1rem,2.6vh,1.9rem);border-top:none}
/* sonda: 100svh de verdade. window.innerHeight muda quando a barra do
   navegador some no celular, e é ele que define a janela do empilhamento. */
#tela{position:fixed;top:0;left:0;width:1px;height:100svh;visibility:hidden;pointer-events:none}
footer .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ============ dock (mobile) ============ */
/* o pin não rola por dentro: no celular ele tem que caber na tela, senão
   o texto vaza por cima da seção seguinte */
@media(max-width:760px){
  .sec{padding-bottom:calc(clamp(3rem,6vh,5rem) + 3.75rem)}
  #saidas .pin{padding:calc(var(--topo) + 1.25rem) 0 5.25rem}
  #saidas .pin .topo-2 .h3{font-size:clamp(1.4rem,5.4vw,1.9rem)}
  #saidas .pin{padding-bottom:4.5rem}
}

.dock{position:fixed;z-index:55;display:none}
@media(max-width:760px){
  .dock{
    display:block;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom,0);
    /* com clip-path:inset(0 0 100% 0) o arredondamento deixava um fio de 1px
       do azul aceso na base da tela o tempo todo. translateY tira do caminho.
       E visibility e obrigatorio junto: fora da tela o dock continuava sendo
       PINTADO, e o navegador tinge a barra dele amostrando a cor da borda da
       pagina — o azul ficava lá depois do dock ja ter saido. */
    transform:translateY(101%);visibility:hidden;
    transition:transform .8s var(--curva),visibility .8s;pointer-events:none;
    /* fundo escuro atras do botao: sem ele a faixa da area segura fica azul e
       o navegador tinge a barra por ela */
    background:var(--fundo);
  }
  .dock.on{transform:none;visibility:visible;pointer-events:auto}
  .dock a{width:100%;justify-content:center;padding:1.2em 1rem;border-radius:0;box-shadow:0 -1px 0 0 var(--linha)}
}

/* ==========================================================================
   FORMATO VERTICAL — a maioria entra por aqui, entao ele manda
   ==========================================================================
   Duas correcoes de escala. Os clamps foram desenhados olhando o desktop, e
   no celular quase todos caem no valor MINIMO: o titulo ia pra 2.15rem e o
   corpo ficava do mesmo tamanho dele. Aqui o titulo cresce por vw (que numa
   tela estreita e a medida que importa) e o texto de apoio encolhe, pra a
   hierarquia aparecer numa coluna de 390px. */
@media(max-width:760px){
  :root{
    --t-8:clamp(3rem,12.4vw,4.6rem);        /* titulo da hero */
    --t-7:clamp(2.5rem,10.2vw,3.7rem);      /* titulo de secao */
    --t-5:clamp(2rem,8.6vw,3rem);           /* preco */
    --t-4:clamp(1.4rem,5.6vw,2rem);         /* h3 / lead da hero */
    --t-3:clamp(1.06rem,4.3vw,1.35rem);     /* h4 dentro dos cards */
    --t-p2:1.02rem;                          /* subtitulo */
    --t-rot:.66rem;                          /* rotulos */
    --lh-max:.94;
    --lh-tit:1;
    --lh-corpo:1.58;
  }
  body{font-size:14.6px}
  .rot{letter-spacing:.2em}
  #hero .sub{font-size:.97rem;max-width:34ch}
  .p2{max-width:36ch}
  p{max-width:40ch}
  .etapa .q{font-size:.64rem}

  /* respiro vertical: com a folga de 46svh entre secoes, o padding interno
     pode ceder — o que sobra vira tamanho de titulo */
  .sec{padding:calc(var(--topo) + clamp(2.5rem,7vh,4.5rem)) 0
               calc(clamp(2.5rem,7vh,4.5rem) + 3.75rem)}
  .card{padding:1.5rem 1.35rem;border-radius:22px}
  .cards{gap:1rem}
  .etapas{gap:1.75rem}
  .card .parte{padding-top:1.15rem}
  .cabeca{gap:.7rem}
  .preco{gap:.5rem;padding-top:1.35rem}
}
/* tela bem estreita: o titulo nao pode empurrar a coluna */
@media(max-width:380px){
  :root{--t-8:clamp(2.6rem,11.6vw,3.4rem);--t-7:clamp(2.15rem,9.4vw,2.9rem)}
  .sec{padding-left:0;padding-right:0}
}

/* ============ acessibilidade ============ */
a:focus-visible,button:focus-visible{outline:2px solid rgb(var(--acento));outline-offset:4px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--gutter);top:1rem;z-index:140;background:var(--acento-forte);color:#fff;padding:.75rem 1rem}
html:not(.js) #pre{display:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js .rv{clip-path:none!important;transform:none!important}
  .passo{position:static!important;width:auto!important;margin:0 0 1.25rem!important;height:auto!important;transform:none!important}
  .js .pal>i{transform:none!important}
  .js .bl{background-position:0 0!important}
  .js .tr{transform:scaleX(1)!important}
  .js .trv{transform:scaleY(1)!important}
  #saidas{height:auto!important}
  #saidas .pin{position:static!important;height:auto!important;transform:none!important}
  .passo{position:static!important;margin-bottom:2rem}
  .passos{min-height:0!important}
}