/* LionStack — main.css
   Sistema: body{font-size:.8vw} e TUDO em em (STACK_SPEC §8/§9). Nada em px,
   exceto alvos de toque (44px) e raios de filtro, que são constantes ergonômicas. */
@font-face{font-family:Inter;src:url(../fonts/inter-var-latin.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-it-sub.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* fallback com métricas ajustadas à Inter: o texto não "pula" quando a fonte chega (CLS ~0) */
@font-face{font-family:'Inter Fallback';src:local('Arial');ascent-override:96%;descent-override:24%;line-gap-override:0%;size-adjust:107%}

:root{
  --fundo-1:#08080C;--fundo-2:#12121A;--fundo-3:#1C1C26;
  --clara-1:#F5F5F7;--clara-2:#FFFFFF;
  --texto-1:#EDEDF0;--texto-2:rgba(237,237,240,.65);--linha:rgba(237,237,240,.12);
  --acento:#E5A93C;--acento-escuro:#8A6117;
  --luz-1:#FF6B00;--luz-2:#FFA800;--luz-3:#FFD000;--luz-4:#E59819;
  --fonte-texto:Inter,'Inter Fallback',system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-acento:Newsreader,Georgia,"Times New Roman",serif;
  --raio-cartao:3em;--raio-mestre:6em;--raio-pilula:1000em;--sticky:7em; /* nav fica no rodapé (como na referência): 7em de folga no topo */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fundo-1);scrollbar-width:none;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar{display:none}
body{font-size:.8vw;background:var(--fundo-1);color:var(--texto-1);font-family:var(--fonte-texto);font-weight:500;line-height:1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(max-width:991px){body{font-size:1.3vw}} /* spec: 1.2vw; +0.1 para tablet em retrato não cair abaixo de 12px de corpo */
@media(max-width:767px){body{font-size:1.7vw}} /* degrau extra ao spec: 1.2vw dava 7px de base a 480px */
@media(max-width:479px){body{font-size:2.6vw}}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.container{width:100%;max-width:115em;margin-inline:auto}
@media(max-width:991px){.container{max-width:72em}}
@media(max-width:767px){.container{max-width:56em}}
@media(max-width:479px){.container{max-width:36em}}
html.travado{overflow:hidden}
[hidden]{display:none!important}
/* <dialog> nativo: zera o estilo do navegador; cada diálogo define o seu. Nunca dar display a um dialog
   fechado — display do autor vence o "fechado = escondido" do navegador (por isso .menu[open]). */
dialog{margin:0;padding:0;border:0;width:auto;height:auto;max-width:none;max-height:none;background:none;color:inherit}
dialog::backdrop{background:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- tipografia (escala fixa §12) ---- */
h1,h2,h3{font-weight:700;line-height:1}
.t-8{font-size:8em;letter-spacing:-.04em;line-height:.9}
.t-6{font-size:6em;letter-spacing:-.04em;line-height:.92}
.t-35{font-size:3.5em;letter-spacing:-.03em;line-height:1.02}
.t-3{font-size:3em;letter-spacing:-.03em;line-height:1.05}
.t-25{font-size:2.5em;letter-spacing:-.03em;line-height:1.1}
.t-2{font-size:2em;letter-spacing:-.02em;line-height:1.15}
.t-15{font-size:1.5em;letter-spacing:-.02em;line-height:1.3}
.t-125{font-size:1.25em;line-height:1.45}
.t-12{font-size:1.2em;line-height:1.45}
.apoio{color:var(--texto-2)}
.kicker{font-size:1.2em;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acento)}
.orn{font-family:var(--fonte-acento);font-style:italic;font-weight:400;font-size:1.04em;letter-spacing:-.01em}
@media(max-width:479px){.t-8{font-size:5em}.t-6{font-size:4em}}

/* ---- camada de assinatura: luz fixa em screen (§4, Rota A) ---- */
.lens{position:fixed;inset:0;z-index:9;pointer-events:none;mix-blend-mode:screen;contain:strict;overflow:hidden}
/* Rota B (js/luz.js) injeta um <canvas> aqui. Abaixo, a Rota A: fallback CSS com a mesma composição — horizonte circular + feixe */
.lens canvas{position:absolute;inset:0;width:100%;height:100%}
.lens.gl>div{display:none}
.lens__arc{position:absolute;inset:0;opacity:.6;transform:translateZ(0);
  background:radial-gradient(120% 95% at 50% 156%,transparent 58%,rgba(255,168,0,.9) 60.4%,rgba(255,107,0,.3) 62.5%,transparent 72%);
  filter:blur(5px)}
.lens__flare{position:absolute;inset:0;opacity:.55;
  background:radial-gradient(60% 40% at 50% 118%,rgba(255,208,0,.4),transparent 70%),radial-gradient(48em 48em at 4% 82%,rgba(229,152,25,.4),transparent 62%);
  filter:blur(28px)}

/* ---- header / pílula ---- */
.header{position:fixed;bottom:calc(2em + env(safe-area-inset-bottom));left:0;right:0;z-index:20;display:flex;justify-content:center;pointer-events:none;padding:0 1.5em;animation:subir .9s .5s cubic-bezier(.2,.7,.2,1) both}
/* pílula de vidro escuro, como na referência; o botão claro carrega o contraste */
.nav{pointer-events:auto;position:relative;isolation:isolate;display:flex;align-items:center;gap:1.5em;padding:.5em .5em .5em 1.4em;
  border-radius:var(--raio-pilula);background:rgba(22,22,32,.66);color:var(--texto-1);border:1px solid rgba(237,237,240,.14);
  box-shadow:0 1.5em 4em rgba(0,0,0,.45);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%,rgba(229,169,60,.14))}
@media(min-width:992px){.nav::before{filter:url(#glass)}}
.marca{display:flex;align-items:center;gap:.8em;min-height:44px}
.emblema{width:3.4em;height:3.4em;border-radius:50%;flex:none;object-fit:cover}
.marca__nome{font-weight:700;letter-spacing:-.03em;font-size:1.6em;line-height:1}
.marca__nome b{color:var(--acento)}
.marca__tag{display:block;font-size:.85em;color:var(--texto-2);margin-top:.35em;letter-spacing:.02em}
.nav__links{display:flex}
.nav__links a{display:flex;align-items:center;min-height:44px;padding:0 1em;font-size:1.2em;transition:color .2s}
.nav__cta{display:flex;align-items:center;min-height:44px;padding:0 1.6em;border-radius:var(--raio-pilula);background:var(--clara-1);color:var(--fundo-1);font-size:1.2em;font-weight:700;transition:background .2s,color .2s}
.nav__menu{display:none;width:44px;height:44px;border-radius:50%;background:var(--clara-1);color:var(--fundo-1);align-items:center;justify-content:center}
.nav__menu svg{width:1.6em;height:1.6em}
@media(hover:hover){.nav__links a:hover{color:var(--acento)}.nav__cta:hover{background:var(--acento);color:var(--fundo-1)}}
/* grão fino por cima de tudo: textura de filme, só em aparelho completo */
.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-nivel=leve] .grain,[data-nivel=estatico] .grain{display:none}
/* sem GPU utilizável (main.js descobre ao tentar o WebGL): a CPU recompõe a tela inteira a cada quadro,
   então nada contínuo. Medido sem GPU: 2 fps → 60 fps. Com GPU nada disto se aplica. */
[data-gpu=nao] .grain{display:none}
[data-gpu=nao] :is(.carta,.faisca,.marquee__faixa){animation:none}
@media(max-width:767px){.nav .marca__nome{display:none}.nav__links{display:none}.nav__menu{display:flex}}
@media(max-width:479px){.nav{width:100%;justify-content:space-between;padding:.6em .6em .6em 1.4em}}

/* ---- botões ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:44px;padding:1em 2em;
  border-radius:var(--raio-pilula);border:1px solid rgba(237,237,240,.28);font-size:1.25em;font-weight:700;overflow:hidden;isolation:isolate;
  transition:color .2s,border-color .2s}
.btn span{position:relative;z-index:1}
.btn__bg{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:var(--clara-1);transform:translate(-50%,-50%);transition:width .2s ease-in-out,height .2s ease-in-out}
.btn--ouro{background:var(--acento);color:var(--fundo-1);border-color:var(--acento)}
@media(hover:hover){
  .btn:hover{color:var(--fundo-1);border-color:var(--clara-1);filter:url(#btn-glow)}
  .btn:hover .btn__bg{width:110%;height:6em}
}
.fechar{width:44px;height:44px;border-radius:50%;background:var(--fundo-3);border:1px solid rgba(237,237,240,.22);color:var(--texto-1);font-size:1.6em;display:grid;place-items:center;line-height:1}

/* ---- cases: capturas reais; no hover a imagem troca para o rolo da página inteira e rola por dentro ---- */
.item__tela img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block;transition:object-position 1.4s ease}
.item.rolando .item__tela img{object-position:0 100%;transition:object-position 12s linear}
.overlay__demo{position:relative;display:grid;grid-template-columns:1fr 19em;gap:2em;width:100%;margin-top:1em;align-items:start}
.rolo{position:relative;aspect-ratio:16/10;overflow:auto;border-radius:var(--raio-cartao);background:#111;border:1px solid var(--linha);scrollbar-width:thin;overscroll-behavior:contain}
/* fica fora do .rolo (filho absoluto rolaria junto) e centraliza só sobre a coluna dele */
.rolo__dica{position:absolute;left:0;right:21em;bottom:1.2em;margin-inline:auto;width:max-content;z-index:2;pointer-events:none;
  font-size:1.05em;font-weight:700;padding:.6em 1.2em;border-radius:var(--raio-pilula);
  background:rgba(8,8,12,.82);color:var(--texto-1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s}
.rolo.usado+.rolo__dica{opacity:0}
@media(max-width:767px){.rolo__dica{right:0;bottom:auto;top:calc(100vw - 4em)}}
.rolo img{width:100%;height:auto;display:block}
.fone{aspect-ratio:390/844;border-radius:2.6em;border:.5em solid #1A1A24;background:#000;overflow:hidden;box-shadow:0 2em 5em rgba(0,0,0,.5)}
.fone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.overlay__acoes{display:flex;gap:1em;flex-wrap:wrap}
@media(max-width:767px){.overlay__demo{grid-template-columns:1fr}.rolo{aspect-ratio:4/5}.fone{width:60%;margin-inline:auto}}
/* case sem versão de celular (planner): o rolo ocupa a largura toda */
.overlay__demo:has(.fone[hidden]){grid-template-columns:1fr}
.overlay__demo:has(.fone[hidden]) .rolo__dica{right:0}
/* card largo: a captura já é panorâmica, então ocupa a linha inteira no fim da grade */
.item--largo{grid-column:1/-1}
.item--largo .item__tela{aspect-ratio:1352/594;height:auto}

/* ---- 1 · abertura + oferta (25,5%) ---- */
.abertura__palco{position:relative;padding-top:8em;perspective:1800px} /* o deck inteiro inclina em 3D com o ponteiro */
.abertura__titulo{position:sticky;top:var(--sticky);z-index:0;text-align:center;padding-bottom:2em}
.abertura__titulo .kicker{margin-bottom:2em}
.abertura__titulo h1{filter:url(#txt-glow);color:rgba(237,237,240,.72)} /* cinza de fundo, como na referência: os cards passam por cima */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .1em;margin:0 -.04em -.1em}
/* palavras do título sobem de dentro da máscara já no 1º quadro: CSS puro, sem esperar o JS (antes o título
   aparecia, sumia quando o GSAP chegava e voltava deslizando — um piscar no maior elemento da tela) */
.pal>span{display:inline-block;animation:palavra 1.1s cubic-bezier(.165,.84,.44,1) calc(.15s + var(--i,0) * .09s) both}
@keyframes palavra{from{transform:translateY(110%)}}
/* intro: código de barras e kicker sobem na carga (CSS puro) */
.abertura__titulo>:not(h1){animation:subir .9s cubic-bezier(.2,.7,.2,1) both}
.abertura__titulo>:nth-child(2){animation-delay:.12s}
@keyframes subir{from{opacity:0;transform:translateY(1.2em)}}
.codigo{display:inline-flex;flex-direction:column;align-items:center;gap:.6em;margin-bottom:2.4em;opacity:.75}
.codigo__barras{width:12em;height:2.6em;background:repeating-linear-gradient(90deg,var(--texto-1) 0 .15em,transparent .15em .35em,var(--texto-1) .35em .6em,transparent .6em .75em,var(--texto-1) .75em .85em,transparent .85em 1.15em)}
.codigo__txt{font-size:.9em;letter-spacing:.3em;text-transform:uppercase;color:var(--texto-2)}
.faiscas{position:absolute;inset:0;pointer-events:none;z-index:1} /* camada própria: a paralaxe move o grupo, o cintilar anima cada faísca */
.faisca{position:absolute;width:1.6em;height:1.6em;pointer-events:none;color:var(--luz-3);animation:cintilar 3.4s ease-in-out infinite}
.faisca::before,.faisca::after{content:"";position:absolute;inset:0;background:currentColor;clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
.faisca::after{transform:scale(.5) rotate(45deg);opacity:.6}
@keyframes cintilar{0%,100%{transform:scale(.55);opacity:.3}50%{transform:scale(1.1);opacity:.95}}
@media(max-width:991px){.abertura__titulo h1{filter:none}}
.deck{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0;margin-top:6em;padding-bottom:16em;perspective:2000px;transform-style:preserve-3d}
/* cartas espalhadas como na referência: lado, sobreposição e leve giro por carta
   (rotate é propriedade separada do transform, então não briga com o GSAP) */
.carta:nth-child(1){align-self:flex-start;margin-left:6%;rotate:-3deg}
.carta:nth-child(2){align-self:flex-end;margin-right:8%;margin-top:-13em;rotate:2.5deg;width:25em;height:30em}
.carta:nth-child(3){margin-left:-20%;margin-top:-7em;rotate:-1.5deg}
.carta:nth-child(4){align-self:flex-end;margin-right:16%;margin-top:-11em;rotate:3deg;width:25em;height:30em}
.carta:nth-child(5){align-self:flex-start;margin-left:14%;margin-top:-9em;rotate:-2deg}
/* levitação: a propriedade translate é separada do transform (GSAP) e do rotate (CSS) */
.carta{animation:levitar 6.5s ease-in-out infinite;animation-delay:calc(var(--n,0) * -1.3s)}
.carta:nth-child(2){--n:1}.carta:nth-child(3){--n:2}.carta:nth-child(4){--n:3}.carta:nth-child(5){--n:4}
@keyframes levitar{0%,100%{translate:0 0}50%{translate:0 -1.1em}}
@media(max-width:767px){
  .carta:nth-child(n){width:27em;height:32em;margin:4em 0 0} /* espaço entre cartas = mais rolagem por carta no celular */
  .carta:nth-child(odd){align-self:flex-start;rotate:-2deg}.carta:nth-child(even){align-self:flex-end;rotate:2deg}
  .carta:nth-child(1){margin-top:2em}
}
/* cartões do deck: imagem real de um projeto entregue (2 claros, 3 escuros), revelada ao entrar (.ativa) */
.carta{position:relative;isolation:isolate;width:27em;height:32em;flex:none;border-radius:var(--raio-cartao);overflow:hidden;
  background:linear-gradient(160deg,#181826,var(--fundo-2) 55%);border:1px solid rgba(237,237,240,.1);
  padding:2.2em;display:flex;flex-direction:column;gap:1em;box-shadow:0 3em 6em rgba(0,0,0,.5)}
.carta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 45% at var(--gx,50%) -8%,rgba(229,169,60,.22),transparent 70%)}
.carta--clara{background:linear-gradient(160deg,#fff,var(--clara-1) 60%);color:var(--fundo-1);border-color:rgba(8,8,12,.06)}
.carta--clara::after{background:radial-gradient(70% 45% at var(--gx,50%) -8%,rgba(229,169,60,.3),transparent 70%)}
.carta__cab{display:flex;justify-content:space-between;align-items:center}
.carta .kicker{font-size:1em;color:var(--texto-2)}
.carta--clara .kicker{color:rgba(8,8,12,.55)}
.chip{font-size:1em;font-weight:700;padding:.5em .9em;border-radius:var(--raio-pilula);background:rgba(229,169,60,.16);color:var(--acento)}
.carta--clara .chip{background:rgba(8,8,12,.06);color:var(--fundo-1)}
.carta h2{font-size:1.5em;letter-spacing:-.02em;line-height:1.15}
.carta>p{font-size:1.1em;line-height:1.4;color:var(--texto-2)}
.carta--clara>p{color:rgba(8,8,12,.62)}
.widget{position:relative;flex:1;min-height:0;margin:0;border-radius:1.6em;background:rgba(237,237,240,.05);border:1px solid rgba(237,237,240,.08);overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.carta:hover .widget{transform:translateY(-.35em)}}
.carta--clara .widget{background:rgba(8,8,12,.04);border-color:rgba(8,8,12,.07)}
.widget img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;transition:opacity .8s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.widget figcaption{position:absolute;left:.8em;bottom:.8em;font-size:.95em;font-weight:700;padding:.45em .85em;border-radius:var(--raio-pilula);background:rgba(8,8,12,.8);color:var(--clara-1)}
.w__fone{position:absolute;inset:1.1em 0 0;margin:0 auto;width:62%;border:.35em solid rgba(237,237,240,.14);border-bottom:0;border-radius:2em 2em 0 0;overflow:hidden;background:var(--fundo-1)}
/* estado inicial só com JS (sem JS o cartão nasce pronto) */
html.js .carta:not(.ativa) .widget img{opacity:0;transform:scale(1.08)}
.oferta{position:relative;z-index:2;padding:6em 0 14em;text-align:center}
.oferta h2{max-width:22em;margin:1.2em auto 0}
.oferta>p.t-15{max-width:44em;margin:2em auto 0}
.oferta__acoes{display:flex;gap:1em;justify-content:center;flex-wrap:wrap;margin-top:3em}
.solucoes{display:grid;grid-template-columns:repeat(3,1fr);gap:3em;margin-top:9em;text-align:left}
.solucoes article{padding-top:1.6em;border-top:1px solid var(--linha)}
.solucoes h3{font-size:1.5em;letter-spacing:-.02em;line-height:1.15;margin:.9em 0 .7em}
@media(max-width:767px){.solucoes{grid-template-columns:1fr}}
.marquee{overflow:hidden;margin-top:8em;padding:1.6em 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__faixa{display:flex;width:max-content;animation:rolar 32s linear infinite}
.marquee span{font-size:1.5em;font-weight:700;letter-spacing:-.02em;white-space:nowrap;color:var(--texto-2);padding-right:2.2em}
.marquee span::before{content:"◆";color:var(--acento);font-size:.55em;vertical-align:.25em;margin-right:2.2em}
@keyframes rolar{to{transform:translateX(-50%)}}

/* ---- 2 · respiro (1%) ---- */
.respiro{height:10em}

/* ---- 3 · voz / portal (16,1%) ---- */
.voz{position:relative;min-height:300vh;min-height:300svh}
.voz__sticky{position:sticky;top:1em;height:calc(100vh - 1em);height:calc(100svh - 1em);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4em;text-align:center}
.portal__caixa{width:36em;width:min(44svh,36em);aspect-ratio:1;flex:none;display:grid;place-items:center}
.portal{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#1B2740;box-shadow:0 2em 6em rgba(0,0,0,.55),0 0 0 .4em rgba(229,169,60,.12)}
.portal img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.voz__texto{max-width:26em;font-size:2.5em;font-weight:700;letter-spacing:-.03em;line-height:1.12}
.voz__texto .w{white-space:nowrap;display:inline-block}
.voz__texto .c{display:inline-block}
@media(max-width:479px){.voz__texto{font-size:2em}.voz__sticky{gap:3em}}

/* ---- 4 · acervo (17,2%) ---- */
.acervo{padding:8em 0 12em}
.secao__topo{display:flex;justify-content:space-between;align-items:end;gap:3em;margin-bottom:5em;flex-wrap:wrap}
.secao__topo h2{max-width:12em;margin-top:.6em}
.secao__topo>p{max-width:30em}
.acervo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4em}
.item{position:relative;display:flex;flex-direction:column;gap:1.2em}
.item__tela{position:relative;aspect-ratio:4/3;border-radius:var(--raio-cartao);overflow:hidden;background:var(--fundo-2);border:1px solid rgba(237,237,240,.08);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.item h3{font-size:1.5em;letter-spacing:-.02em;line-height:1.15}
.item h3 button{text-align:left;transition:color .2s}
.item h3 button::after{content:"";position:absolute;inset:0;border-radius:var(--raio-cartao)}
.item__meta{font-size:1.15em;color:var(--texto-2);line-height:1.4}
@media(hover:hover){.item:hover .item__tela{transform:translateY(-.6em);box-shadow:0 2em 5em rgba(0,0,0,.5),0 0 0 1px rgba(229,169,60,.4)}.item:hover h3 button{color:var(--acento)}}
.item__tela{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
@media(max-width:991px){.acervo__grid{grid-template-columns:repeat(2,1fr)}.item__tela{aspect-ratio:auto;height:23em}}
@media(max-width:479px){.acervo__grid{grid-template-columns:1fr;gap:3em}}

/* ---- 5 · conversão intermediária (3,7%) ---- */
.conversao{padding:4em 0 10em}
.cta{position:relative;overflow:hidden;border-radius:var(--raio-cartao);background:var(--fundo-2);padding:6em;min-height:30em;display:flex;flex-direction:column;justify-content:space-between;gap:4em}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70em 36em at 85% 115%,rgba(229,169,60,.34),transparent 60%),radial-gradient(40em 20em at 10% -10%,rgba(255,168,0,.12),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%)}
.cta>*{position:relative}
.cta h2{max-width:16em;margin-top:1em}
.cta__pe{display:flex;justify-content:space-between;align-items:end;gap:2em;flex-wrap:wrap}
.cta__pe p{max-width:36em}
@media(max-width:767px){.cta{padding:3em}}

/* ---- 6 · método (27,3%) ---- */
.metodo{position:relative;min-height:270em}
.metodo__palco{position:sticky;top:var(--sticky);height:calc(100vh - 14em);height:calc(100svh - 14em);display:flex;flex-direction:column;overflow:hidden}
.metodo__cab{position:relative;z-index:3;text-align:center}
.metodo__cab h2{margin-top:.6em}
.metodo__linhas{position:relative;height:2.4em;margin-top:1.2em;font-size:1.5em;color:var(--texto-2);line-height:1.3}
.metodo__linhas span{position:absolute;left:0;right:0}
.metodo__cena{position:relative;flex:1;min-height:40em}
.mcard{position:absolute;left:50%;top:50%;width:19em;height:15em;margin:-8.5em 0 0 -9.5em;z-index:2;border-radius:var(--raio-cartao);background:var(--fundo-2);border:1px solid rgba(237,237,240,.1);
  padding:1.8em;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2em 5em rgba(0,0,0,.5)}
.mcard h3{font-size:1.35em;letter-spacing:-.02em;line-height:1.15;margin-bottom:.5em}
.mcard p{font-size:1.1em;line-height:1.35;color:var(--texto-2)}
.mestre{position:absolute;left:50%;top:50%;width:54em;height:32em;margin:-15em 0 0 -27em;z-index:1;border-radius:var(--raio-mestre);background:var(--fundo-3);border:1px solid rgba(229,169,60,.25);
  padding:4em;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 3em 8em rgba(0,0,0,.6);overflow:hidden}
.mestre::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40em 22em at 90% 110%,rgba(229,169,60,.3),transparent 65%)}
.mestre>*{position:relative}
.mestre h3{font-size:3em;letter-spacing:-.03em;max-width:12em;margin-top:.5em}
.mestre p.t-15{max-width:30em}
.mcols{position:absolute;left:0;right:0;top:50%;translate:0 -50%;width:100%;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:3em;z-index:0;opacity:0}
.mcols article{padding-top:1.5em;border-top:1px solid var(--linha)}
.mcols ul{margin-top:1.2em;display:grid;gap:.7em;font-size:1.25em;line-height:1.4;color:var(--texto-2)}
.mcols li::before{content:"— ";color:var(--acento)}
.linha-b{opacity:0}
@media(max-width:991px),(prefers-reduced-motion:reduce){
  .metodo{min-height:0;padding:6em 0}
  .metodo__palco{position:static;height:auto}
  .metodo__cena{display:grid;gap:2em;min-height:0;margin-top:4em}
  .mcard,.mestre{position:static;width:auto;height:auto;margin:0;min-height:14em;transform:none}
  .mestre{min-height:24em}
  .mcols{position:static;translate:none;opacity:1;margin-top:2em}
}
@media(max-width:767px){.mcols{grid-template-columns:1fr}}

/* ---- 7 · fecho / contato (4,1%) ---- */
.fecho{position:relative;z-index:1;padding:8em 0 10em}
@media(min-width:992px){.fecho{min-height:100vh;min-height:100svh}}
.fecho__grid{position:sticky;top:var(--sticky);display:grid;grid-template-columns:1fr 1fr;gap:.5em 3em;align-items:start}
.fecho__grid h2{margin:.6em 0 .8em}
.fecho__grid>div>p.t-15{max-width:26em}
.contatos{display:flex;flex-direction:column}
.contato-link{display:flex;justify-content:space-between;align-items:center;gap:1em;width:100%;padding:1.4em 0;border-top:1px solid var(--linha);font-size:2em;letter-spacing:-.02em;font-weight:700;text-align:left;transition:color .2s}
.contato-link:last-child{border-bottom:1px solid var(--linha)}
.contato-link small{font-size:.55em;font-weight:500;color:var(--texto-2);letter-spacing:0;text-align:right}
@media(hover:hover){.contato-link:hover{color:var(--acento)}}
.rodape{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:2em;flex-wrap:wrap;padding:5em 0 3em;font-size:1.15em;color:var(--texto-2)}
@media(max-width:767px){.fecho__grid{grid-template-columns:1fr;position:static}}
@media(max-width:479px){.fecho{padding-bottom:10em}.contato-link{font-size:1.6em}}

/* ---- 8 · duplicata da abertura (loop; criada por JS só em ≥992 + ponteiro fino) ---- */
.loop{position:relative;z-index:2;background:var(--fundo-1);height:100vh;height:100svh;overflow:hidden}

/* ---- pop-up de contato ---- */
.popup{position:fixed;inset:auto 2em calc(8.5em + env(safe-area-inset-bottom)) auto;width:36em;max-width:calc(100% - 4em);max-height:calc(100vh - 12em);overflow:auto;background:var(--fundo-3);border:1px solid rgba(237,237,240,.1);
  border-radius:var(--raio-cartao);padding:2.6em;transform-origin:50% 100%;box-shadow:0 3em 8em rgba(0,0,0,.6)}
.popup::backdrop{background:rgba(8,8,12,.45)}
.popup__cab{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-bottom:1.6em}
.popup form{display:grid;gap:1em}
.popup label{display:grid;gap:.5em;font-size:1.1em;color:var(--texto-2)}
.popup :is(input,select,textarea){width:100%;background:var(--clara-2);color:var(--fundo-1);border:2px solid transparent;border-radius:1em;padding:.9em 1.1em;font:inherit;font-size:1.1em;min-height:44px}
.popup :is(input,select,textarea):focus{border-color:var(--acento);outline:none}
.popup textarea{resize:vertical}
.popup .btn{margin-top:.6em}
.popup__nota{font-size:1em;color:var(--texto-2);line-height:1.4}
.popup__nota a{color:var(--texto-1);text-decoration:underline;text-underline-offset:.2em}
@media(max-width:479px){.popup{right:1.5em;left:1.5em;width:auto;max-width:none;bottom:calc(9em + env(safe-area-inset-bottom));padding:2em}}

/* ---- overlay de projeto ---- */
/* sem backdrop-filter: atrás de 92% de opacidade o blur mostrava 8% da página e custava a tela inteira por
   quadro (sem GPU o overlay aberto caía a 2 fps). O desfoque progressivo (.pblur, 8 camadas) fica só em
   desktop com GPU, onde se vê o conteúdo borrando ao passar pela borda de cima. */
.overlay{position:fixed;inset:0;overflow:auto;background:rgba(8,8,12,.96)}
html:not([data-nivel=completo]) .pblur,[data-gpu=nao] .pblur{display:none}
.pblur{position:fixed;left:0;right:0;top:0;height:12em;z-index:2;pointer-events:none}
.pblur>div{position:absolute;inset:0;pointer-events:none}
.overlay__box{position:relative;padding:12em 0 8em;transform-origin:50% 100%;display:grid;gap:1.6em;justify-items:start}
.overlay__fechar{position:absolute;right:0;top:4em;z-index:3}
.overlay__box h2{max-width:14em}
.overlay__box>p.t-15{max-width:40em}
.tags{display:flex;flex-wrap:wrap;gap:.6em}
.tags li{font-size:1.1em;padding:.6em 1.1em;border-radius:var(--raio-pilula);border:1px solid var(--linha);color:var(--texto-2)}
@media(max-width:479px){.overlay__box{padding-top:9em}.overlay__fechar{top:2em}}

/* ---- menu (≤479) ---- */
.menu{position:fixed;inset:0;background:var(--fundo-1);padding:3em 2em calc(11em + env(safe-area-inset-bottom));flex-direction:column;justify-content:space-between}
.menu[open]{display:flex}
.menu .fechar{align-self:flex-end}
.menu__links{display:grid;gap:.4em}
.menu__links a{font-size:3.5em;font-weight:700;letter-spacing:-.03em;padding:.25em 0}

/* ---- reveals (JS liga; sem JS ou em nível estático tudo fica visível) ---- */
html.js[data-nivel=completo] [data-rv]>*,html.js[data-nivel=leve] [data-rv]>*{opacity:0}
@media(prefers-reduced-motion:reduce){[data-rv]>*{opacity:1!important}.lens__arc,.lens__flare{transform:none!important}.carta *,.abertura__titulo>*,.pal>span,.header{animation-duration:.01s!important;animation-delay:0s!important}.faisca,.marquee__faixa,.carta{animation:none!important}.widget img{transform:none!important}}
/* aviso de cookies (LGPD): acima da nav do rodapé, como o pop-up */
.cookies{position:fixed;z-index:60;left:2em;bottom:calc(8.5em + env(safe-area-inset-bottom));width:34em;max-width:calc(100% - 4em);padding:1.6em;border-radius:2em;background:var(--fundo-3);border:1px solid rgba(237,237,240,.1);box-shadow:0 2em 4em rgba(0,0,0,.5);font-size:1.1em;line-height:1.45}
.cookies[hidden]{display:none}
.cookies a,.rodape a,.rodape__cookies{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.cookies__acoes{display:flex;gap:.8em;margin-top:1.2em;flex-wrap:wrap}
.rodape__cookies{margin-left:.6em;font:inherit}
@media(max-width:479px){.cookies{left:16px;right:16px;width:auto;max-width:none;font-size:1.3em}}