/* EvoluxLab · estilos do site
   Cores, fontes e medidas ficam nos tokens de :root logo abaixo.
   Guia completo: 3-documentacao/GUIA-PROGRAMADORES.md */
/* Conceito "Quadro a quadro": eixo central simétrico; a grade 3x3 do símbolo organiza a página. Fundo escuro de marca, com uma faixa clara (Sobre). */
:root{
  --bg:#0F0E17;
  --bg-2:#16151F;
  --fg:#F4F2FF;
  --muted:#A3A0C2;
  --indigo:#7470CC;
  --neon-line:#8CC8FF;
  --neon-halo:#1F35E2;
  --hair:rgba(244,242,255,.14);
  --paper:#E6E4EF;
  --ink:#0F0E17;
  --ink-muted:#4A4867;
  --danger:#FF8A9B;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hdr:70px;
  --gw:min(calc(100vw - 48px),1200px); /* largura do nome apagado da marca (faixa abaixo do topo) */
  color-scheme:dark;
  scrollbar-color:var(--neon-halo) var(--bg);
}
html,body{background:var(--bg);color:var(--fg)}
body{margin:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--neon-halo);border-radius:10px;border:2px solid var(--bg)}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1200px;margin:0 auto}
section{scroll-margin-top:calc(var(--hdr) + 8px)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--neon-line);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
/* Link "Pular para o conteúdo": aparece só quando recebe o foco do teclado */
.skiplink{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(10px + env(safe-area-inset-top,0px));z-index:45;padding:12px 18px;border-radius:999px;background:var(--neon-halo);color:#F4F2FF;font:500 14px/1 var(--f-body);text-decoration:none;transform:translateY(-200%);transition:transform .2s var(--ease)}
.skiplink:focus{transform:none}

/* Cabeçalho */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;padding-block:12px;background:rgba(15,14,23,.97);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--hair)}
.top .inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{display:flex;align-items:center;min-height:44px;line-height:0;border-radius:6px;justify-self:start}
#hdrLogo{height:34px;width:calc(34px * 2.885);display:block}
.nav{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;color:var(--muted);text-decoration:none;border-radius:999px;transition:color .2s}
.nav a.on{color:var(--fg)}
.top .btn{justify-self:end}

/* Tipografia comum */
.eyebrow{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:9px 16px;margin:0;
  --c:var(--fg);--l:9px;--w:1.5px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) top left/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--w) var(--l) no-repeat}
h1,h2,h3{text-wrap:balance}
h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,min(5.4vw,8.5svh),4.4rem);line-height:1.08;letter-spacing:-.025em;margin:0;max-width:16ch}
h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.65rem,3.4vw,2.75rem);line-height:1.12;letter-spacing:-.02em;margin:0;max-width:22ch}
h3{font-family:var(--f-body);font-weight:500;font-size:1.2rem;line-height:1.3;margin:0}
h1 em,h2 em{font-style:normal;color:var(--neon-line)}
.lede{color:var(--muted);font-size:clamp(1rem,1.6vw,1.15rem);max-width:52ch;margin:0;text-wrap:pretty}
.tech{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);margin:0}
.tech::before{content:"// ";color:var(--neon-line)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:500 15px/1 var(--f-body);text-decoration:none;color:var(--fg);cursor:pointer;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn-solid{background:var(--neon-halo);border:1.5px solid var(--neon-halo);color:#F4F2FF}
.btn-line{background:transparent;border:1px solid var(--hair)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn .cellico{width:14px;height:14px;border-radius:3px;border:1.5px solid currentColor;transition:background .25s var(--ease),transform .35s var(--ease)}
.btn:focus-visible,.brand:focus-visible,.textbtn:focus-visible,#skip:focus-visible,.nav a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--neon-line);outline-offset:3px}
.textbtn{background:none;border:0;color:var(--neon-line);font:inherit;min-height:44px;padding:0 4px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.cv{color:var(--fg);text-decoration:none;overflow-wrap:anywhere;min-height:24px}
a.cv{display:inline-flex;align-items:center;min-height:44px}

/* Topo */
/* O topo ocupa a primeira tela menos uma ponta (--peek, ~40% da faixa do nome), que aparece já na abertura */
.hero{--peek:calc(var(--gw) / 6.5 * .3);position:relative;overflow:hidden;overflow:clip;box-sizing:border-box;min-height:calc(100vh - var(--hdr) - var(--peek));min-height:calc(100svh - var(--hdr) - var(--peek));display:flex;align-items:center;padding-block:clamp(24px,5svh,48px) clamp(16px,3svh,32px)}
.hero .inner{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,3svh,28px);position:relative;z-index:1}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
.cue{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:clamp(0px,2svh,28px);text-decoration:none;min-height:44px}
.cue i{display:block;width:1px;height:36px;background:linear-gradient(var(--neon-line),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Faixa com o nome apagado da marca, logo abaixo do topo. Mostra só 3/4 da altura das letras (corte leve).
   Ao rolar (ui.js), a faixa sobe mais devagar que a página (--by) e a seção seguinte, por cima dela, vai cobrindo. */
.ghost-band{position:relative;z-index:0;translate:0 var(--by,0px);height:calc(var(--gw) / 6.5 * .75);overflow:hidden;overflow:clip;pointer-events:none}
.ghost{position:absolute;left:50%;top:0;width:var(--gw);height:auto;max-width:none;fill:var(--fg);opacity:.035;translate:-50% 0}
.ghost-band + *{position:relative;z-index:1;background:var(--bg)}

/* Seções */
.sec{padding-block:clamp(80px,11vw,150px)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:clamp(40px,6vw,72px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:var(--bg-2);border:1px solid var(--hair);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card p{margin:0;color:var(--muted)}
.card > .media{margin-top:auto}
.pico{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--hair);display:grid;place-items:center;color:var(--fg)}
.pico svg{width:22px;height:22px}
.prob .card{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.prob.pre .card{opacity:.35}
.prob.pre .card:nth-child(1){transform:translate(-18px,26px) rotate(-5deg)}
.prob.pre .card:nth-child(2){transform:translate(0,-22px) rotate(3deg)}
.prob.pre .card:nth-child(3){transform:translate(20px,18px) rotate(-3deg)}
.prob .card:nth-child(2){transition-delay:.08s}.prob .card:nth-child(3){transition-delay:.16s}

.media{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:12px;background:var(--bg);border:1px solid var(--hair);overflow:hidden}
.media > *{position:absolute;inset:0;width:100%;height:100%;display:block}
.media img,.media video{object-fit:cover}
.media::before,.media::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--fg);opacity:.5;pointer-events:none}
.media::before{top:10px;left:10px;border-right:0;border-bottom:0}
.media::after{bottom:10px;right:10px;border-left:0;border-top:0}
.scene .ln{stroke:var(--fg);stroke-opacity:.28;stroke-width:1.5;fill:none}
.scene .cell{fill:var(--bg);stroke:var(--fg);stroke-opacity:.6;stroke-width:1.5}
.scene .fillc{fill:var(--fg);fill-opacity:.85}
.scene .neon{fill:none;stroke:var(--neon-line);stroke-width:1.5}
.scene .neonf{fill:var(--neon-halo)}
.scene .bub{fill:var(--bg-2);stroke:var(--fg);stroke-opacity:.45;stroke-width:1.2}
.scene .bar{fill:var(--fg);fill-opacity:.4}
.scene .dot{fill:var(--neon-line)}
.scene .ind{fill:var(--indigo)}
.scene .indl{fill:none;stroke:var(--indigo);stroke-width:1.5}
.scene text{font-family:var(--f-mono);font-size:11px;fill:var(--muted)}
.scene text.hi{fill:var(--fg)}
.scene text.nt{fill:var(--neon-line)}

.case{gap:18px}
.case .ba{display:grid;gap:10px;margin:0}
.case .ba div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:baseline}
.case dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case dd{margin:0;color:var(--fg)}
.case.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:28px}
.case.wide > .media{margin-top:0}
.case.wide .txt{display:flex;flex-direction:column;gap:18px;min-width:0}
.note{display:block;text-align:center;margin-top:20px}

/* Como trabalhamos */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.how-aside{position:sticky;top:calc(var(--hdr) + 40px);display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:12px}
.hm{width:min(320px,80%);height:auto;display:block}
.hm .crop{fill:none;stroke:var(--fg);stroke-width:5;stroke-linecap:square;opacity:.25;transition:opacity .6s}
.hm.go .crop{opacity:1}
.hm .c{fill:transparent;stroke:var(--fg);stroke-opacity:.3;stroke-width:2.25;transition:fill .55s var(--ease),stroke-opacity .55s,stroke .55s}
.hm .c.e{stroke:var(--indigo);stroke-opacity:1}
.hm .c.on{fill:var(--fg);stroke-opacity:0}
.hm .c.a.on{fill:var(--indigo);stroke:var(--neon-line);stroke-opacity:1;filter:drop-shadow(0 0 6px var(--neon-halo))}
.how-cap{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;min-height:2.6em}
.how-cap b{color:var(--fg);font-weight:500}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Folga depois da última etapa: o aside fica fixo por mais ~3 giros da roda antes da seção descer */
.how .steps{padding-bottom:300px}
.step{min-height:34vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:28px;border-top:1px solid var(--hair)}
.step:last-child{border-bottom:1px solid var(--hair)}
.step .num{font-family:var(--f-mono);font-size:13px;color:var(--neon-line)}
.step h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.01em}
.step p{margin:0;color:var(--muted);max-width:44ch}
.js-how .step h3{color:var(--muted);transition:color .4s}
.js-how .step.act h3{color:var(--fg)}
.js-how .step .num{opacity:.45;transition:opacity .4s}
.js-how .step.act .num{opacity:1}

/* Sobre (faixa clara) */
.light{background:var(--paper);color:var(--ink);--fg:var(--ink);--muted:var(--ink-muted);--indigo:#2D2B55;--hair:rgba(15,14,23,.14);--bg-2:#EFEEF5;color-scheme:light}
.light .card{box-shadow:none}
.cap{flex-direction:row;align-items:flex-start;gap:16px;padding:22px}
.cap .sq{flex:none;width:18px;height:18px;border-radius:4px;border:2px solid var(--indigo);margin-top:3px;transition:background .3s var(--ease)}
.cap h3{font-size:1.05rem}
.cap p{font-size:.95rem}
.cap p.tech{font-size:12px;margin-top:6px}
.exp{margin-top:16px}
.exp .card{background:transparent}
.exp .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.light .tech::before{color:var(--indigo)}

/* Contato */
.contact .card{padding:32px;gap:18px}
.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.clist li{display:flex;justify-content:space-between;align-items:center;gap:0 12px;border-top:1px solid var(--hair);min-height:52px;flex-wrap:wrap}
.clist span:first-child{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;color:var(--muted)}
input,textarea,select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--hair);border-radius:12px;padding:12px 14px;min-height:48px;width:100%;box-sizing:border-box;transition:border-color .2s}
textarea{min-height:110px;resize:vertical}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}
/* Caixa de opções no mesmo visual dos campos, com a seta desenhada (a nativa varia em cada navegador) */
select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:42px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23A3A0C2' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px}
select:invalid,select:has(option[value=""]:checked){color:var(--muted)}
select option{color:var(--fg);background:var(--bg-2)}
.err{font-size:13px;color:var(--danger);min-height:0;margin:0}
.err:empty{display:none}
.formmsg{font-size:14px;color:var(--neon-line);margin:0}
.formmsg:empty{display:none}
.formmsg.bad{color:var(--danger)}
.fnote{font-size:13px;color:var(--muted);margin:0}
.fnote a{color:var(--fg);text-underline-offset:3px}
.fhint,.fcount{font-size:13px;color:var(--muted);margin:0}
.fhint[hidden],.fcount[hidden]{display:none}
.fcount{text-align:right;font-family:var(--f-mono);font-size:12px}
.fhint .textbtn{font-size:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Desafio do Cloudflare Turnstile: invisível na maioria das vezes, só ocupa espaço quando pede interação */
.fturnstile:empty{display:none}
.fturnstile iframe{max-width:100%}
button[disabled]{opacity:.6;cursor:progress}

/* Rodapé */
.foot{border-top:1px solid var(--hair);padding-block:48px 28px}
.foot .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.foot .cols.cols-4{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.foot .cols > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.foot .k{margin-bottom:6px}
.foot svg{height:30px;width:calc(30px * 2.885)}
.foot a{text-decoration:none;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;align-self:flex-start;max-width:100%;overflow-wrap:anywhere}
.foot .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:36px;padding-top:16px;border-top:1px solid var(--hair);font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* Revelar ao rolar (só para o que começa fora da tela) */
.rv{transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv.pre{opacity:0;transform:translateY(26px)}

/* Abertura */
.reveal{transition:opacity .8s var(--ease) calc(var(--d,0) * 1ms),transform .9s var(--ease) calc(var(--d,0) * 1ms)}
.intro-running:not(.revealed) .reveal{opacity:0;transform:translateY(22px)}
.intro-running #hdrLogo{opacity:0}
.skip-fade #hdrLogo{transition:opacity .35s var(--ease)}
.no-trans .reveal,.no-trans #hdrLogo{transition:none!important}
#intro{position:fixed;inset:0;z-index:40;pointer-events:none;transition:opacity .35s var(--ease)}
#intro.out{opacity:0}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
#skip{position:absolute;pointer-events:auto;top:calc(18px + env(safe-area-inset-top,0px));right:calc(max(16px,env(safe-area-inset-right,0px)) + 4px);
  min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--hair);background:rgba(15,14,23,.6);color:var(--fg);font:500 13px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.no-intro #intro{display:none}

/* Efeitos de passar o mouse só em aparelhos com mouse (no toque eles "grudam") */
@media (hover:hover){
  .nav a:hover{color:var(--fg)}
  .btn:hover{border-color:var(--neon-line);box-shadow:0 0 0 1px var(--neon-line),0 0 22px rgba(31,53,226,.75)}
  .btn:hover .cellico{background:var(--neon-line);border-color:var(--neon-line);transform:rotate(90deg)}
  a.cv:hover,.foot a:hover{color:var(--neon-line)}
  .cap:hover .sq{background:var(--indigo)}
  input:hover,textarea:hover,select:hover{border-color:rgba(244,242,255,.3)}
  #skip:hover{border-color:var(--neon-line)}
}

@media (max-width:900px){
  .top .inner{grid-template-columns:1fr auto}
  .grid-3{grid-template-columns:minmax(0,1fr)}
  .case.wide{grid-template-columns:minmax(0,1fr)}
  .foot .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot .cols > div:first-child{grid-column:1/-1}
  .foot .cols.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .how{grid-template-columns:minmax(0,1fr);gap:0}
  .how-aside{top:calc(var(--hdr) + env(safe-area-inset-top,0px));z-index:5;flex-direction:row;justify-content:center;gap:14px;background:var(--bg);padding-block:10px;border-bottom:1px solid var(--hair);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
  .hm{width:58px}
  .how-cap{text-align:left;min-height:0}
  .step{min-height:0;padding-block:36px}
  .how .steps{padding-bottom:35vh}
}
@media (max-width:640px){
  :root{--hdr:62px}
  #hdrLogo{height:28px;width:calc(28px * 2.885)}
  .top{padding-block:8px}
  .hero{padding-block:24px 24px}
  .hero .inner{gap:22px}
  .ctas{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .card{padding:22px}
  .contact .card{padding:22px}
  .case .ba div{grid-template-columns:1fr;gap:2px}
  .foot .cols{grid-template-columns:minmax(0,1fr)}
  .foot .cols.cols-4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot .cols.cols-4 > div:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cue i{animation:none}
  .rv.pre,.prob.pre .card{opacity:1;transform:none}
}

/* Navegação dentro da página: um véu cobre o conteúdo durante o salto, para a rolagem não passar por todas as animações */
#veil{position:fixed;inset:0;z-index:13;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .26s var(--ease)}
#veil.on{opacity:1}

/* Menu no celular (abaixo de 900px o menu do cabeçalho vira um painel que abre pelo botão) */
.burger{display:none}
@media (max-width:900px){
  .top .inner{grid-template-columns:1fr auto auto;gap:10px}
  .burger{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--fg);cursor:pointer;transition:border-color .25s var(--ease)}
  .burger span{display:grid;gap:5px}
  .burger i{display:block;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease)}
  .menu-open .burger{border-color:var(--neon-line)}
  .menu-open .burger i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
  .menu-open .burger i:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
  .burger:focus-visible{outline:2px solid var(--neon-line);outline-offset:3px}
  .nav{display:flex;flex-direction:column;gap:0;position:fixed;left:0;right:0;bottom:0;top:calc(var(--hdr) + env(safe-area-inset-top,0px));z-index:14;
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:var(--bg);border-top:1px solid var(--hair);overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .menu-open .nav{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
  .nav a{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--hair);
    font-family:var(--f-display);font-weight:500;font-size:clamp(1.35rem,5.6vw,1.85rem);letter-spacing:-.01em;color:var(--fg);
    opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease),color .2s}
  .nav a::after{content:"";width:12px;height:12px;flex:none;border-radius:3px;border:1.5px solid var(--indigo);transition:background .25s var(--ease)}
  .nav a.on::after,.nav a[aria-current]::after{background:var(--indigo);border-color:var(--neon-line);box-shadow:0 0 8px var(--neon-halo)}
  .nav a.out::after{display:none}
  .nav a .ext{width:16px!important;height:16px!important;opacity:.8}
  .menu-open .nav a{opacity:1;transform:none}
  .menu-open .nav a:nth-child(2){transition-delay:.04s}.menu-open .nav a:nth-child(3){transition-delay:.08s}
  .menu-open .nav a:nth-child(4){transition-delay:.12s}.menu-open .nav a:nth-child(5){transition-delay:.16s}.menu-open .nav a:nth-child(6){transition-delay:.2s}
}
@media (prefers-reduced-motion:reduce){
  #veil,.nav,.nav a,.burger i{transition:none!important}
}

/* Contato: dois cards da mesma altura; o botão de cada um fica na mesma linha de base */
#contato .card{gap:14px}
#contato .card > .k{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--neon-line)}
#contato .card h3{font-family:var(--f-display);font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.01em;line-height:1.25}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.ticks li{display:flex;gap:14px;align-items:flex-start;padding-block:14px;border-top:1px solid var(--hair);color:var(--fg)}
.ticks li:last-child{border-bottom:1px solid var(--hair)}
.ticks .sq{flex:none;width:8px;height:8px;border-radius:2px;margin-top:.62em;background:var(--neon-line);box-shadow:0 0 6px var(--neon-halo)}
.ct-act{margin-top:auto;padding-top:10px}
.ct-form form{gap:16px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ct-form textarea{min-height:96px}
.fsend{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:2px}
.fsend .fnote{max-width:30ch}
.opt{color:var(--muted);opacity:.75;font-size:13px}
@media (max-width:640px){.frow{grid-template-columns:minmax(0,1fr)}}

/* Cookies: banner no rodapé da tela (primeiro nível) que abre as preferências por categoria (segundo nível) */
.ck[hidden],.ck [hidden]{display:none!important}
.ck{position:fixed;left:0;right:0;bottom:0;z-index:20;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
.ck-card{pointer-events:auto;position:relative;max-height:calc(100svh - 32px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 32px;padding:20px 24px;border:1px solid var(--hair);border-radius:16px;background:rgba(22,21,31,.97);box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0;transform:translateY(18px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.ck.in .ck-card{opacity:1;transform:none}
.ck-card::before{content:"";position:absolute;top:10px;left:10px;width:10px;height:10px;border:1.5px solid var(--fg);border-right:0;border-bottom:0;opacity:.5}
.ck-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.ck-k{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--neon-line)}
.ck-text{margin:0;color:var(--muted);font-size:14px;line-height:1.55;max-width:72ch}
.ck-text a{color:var(--fg);text-underline-offset:3px}
.ck-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ck-actions .textbtn{font-size:14px}
.ck-open .ck-card{grid-template-columns:minmax(0,1fr)}
.ck-prefs{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.ck-cat{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:14px;border-bottom:1px solid var(--hair)}
.ck-cat > div{min-width:0}
.ck-cat-t{margin:0;font-weight:500;color:var(--fg)}
.ck-cat-d{margin:2px 0 0;font-size:13.5px;color:var(--muted);max-width:70ch}
.ck-always{flex:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ck-sw{flex:none;position:relative;width:46px;height:26px}
.ck-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1;min-height:0}
.ck-sw i{position:absolute;inset:0;border-radius:999px;border:1px solid var(--hair);background:var(--bg);transition:background .25s var(--ease),border-color .25s var(--ease)}
.ck-sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:5px;background:var(--muted);transition:transform .3s var(--ease),background .25s}
.ck-sw input:checked + i{background:var(--neon-halo);border-color:var(--neon-line)}
.ck-sw input:checked + i::after{transform:translateX(20px);background:#F4F2FF}
.ck-sw input:focus-visible + i{outline:2px solid var(--neon-line);outline-offset:3px}
html.cookie-open .wa-fab{opacity:0;pointer-events:none}
html.shot-open .ck,.lb:not([hidden]) ~ .ck{visibility:hidden}
@media (max-width:760px){
  .ck-card{grid-template-columns:minmax(0,1fr);padding:18px 18px 16px}
  .ck-actions .btn{flex:1 1 0}
  .ck-actions .textbtn{flex-basis:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.ck-card,.ck-sw i,.ck-sw i::after{transition:none}}

/* Rodapé: links de privacidade e cookies */
.foot .base-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.foot .base-links a,.foot .base-links .textbtn{min-height:44px;font-size:12px;font-family:var(--f-mono)}
.foot .base-links .textbtn{color:var(--muted);text-decoration:none;padding:0}
@media (hover:hover){.foot .base-links .textbtn:hover{color:var(--neon-line)}}

/* Página de texto (política de privacidade) */
.doc-sec{padding-block:clamp(48px,7vw,96px)}
.doc{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);grid-template-areas:"head head" "toc body";gap:clamp(28px,4vw,56px) clamp(28px,5vw,72px);align-items:start}
.doc > *{min-width:0}
.doc-head{grid-area:head;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:clamp(24px,4vw,40px);border-bottom:1px solid var(--hair)}
.doc-head h1{max-width:20ch}
.doc-toc{grid-area:toc;position:sticky;top:calc(var(--hdr) + 32px)}
.doc-toc .k{margin:0 0 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--neon-line)}
.doc-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.doc-toc a{display:flex;align-items:center;min-height:40px;font-size:14px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair)}
.doc-body{grid-area:body;display:flex;flex-direction:column;gap:clamp(36px,5vw,56px);min-width:0;max-width:78ch}
.doc-body section{min-width:0;display:flex;flex-direction:column;gap:14px;scroll-margin-top:calc(var(--hdr) + 24px)}
.doc-body h2{font-size:clamp(1.3rem,2.4vw,1.75rem);max-width:none;display:flex;align-items:baseline;gap:14px}
.doc-body h2 .num{font-family:var(--f-mono);font-size:13px;letter-spacing:0;color:var(--neon-line);font-weight:400}
.doc-body p{margin:0;color:var(--muted)}
.doc-body a{color:var(--fg);text-underline-offset:3px}
.doc-body b{color:var(--fg);font-weight:500}
.doc-body code{font-family:var(--f-mono);font-size:13px;color:var(--fg);background:var(--bg-2);border:1px solid var(--hair);border-radius:6px;padding:1px 6px;white-space:nowrap}
.doc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.doc-list li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--hair);color:var(--muted)}
.doc-list li::before{content:"";position:absolute;left:2px;top:1.15em;width:8px;height:8px;border-radius:2px;background:var(--indigo)}
.doc-list.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.doc-table{max-width:100%;min-width:0;overflow-x:auto;border:1px solid var(--hair);border-radius:12px;background:var(--bg-2)}
.doc-table:focus-visible{outline:2px solid var(--neon-line);outline-offset:3px}
.doc-table table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.doc-table th{text-align:left;font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--hair)}
.doc-table td{vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--hair);color:var(--muted);line-height:1.5}
.doc-table tr:last-child td{border-bottom:0}
.doc-table td:first-child{color:var(--fg)}
.textbtn.inline{min-height:0;padding:0;font-size:inherit;vertical-align:baseline}
.doc-contact{padding:clamp(20px,3vw,32px);border:1px solid var(--hair);border-radius:16px;background:var(--bg-2)}
.doc-mail{font-family:var(--f-display);font-size:clamp(1.05rem,2.4vw,1.4rem)}
.doc-mail a{color:var(--neon-line);text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.doc-toc a:hover{color:var(--fg)}}
@media (max-width:900px){
  .doc{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "toc" "body"}
  .doc-toc{position:static}
  .doc-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
@media (max-width:640px){
  .doc-toc ol,.doc-list.cols{grid-template-columns:minmax(0,1fr)}
  .doc-table{overflow:visible;border:0;background:transparent;border-radius:0}
  .doc-table table{min-width:0;display:block}
  .doc-table thead{display:none}
  .doc-table tbody{display:flex;flex-direction:column;gap:10px}
  .doc-table tr{display:block;border:1px solid var(--hair);border-radius:12px;background:var(--bg-2);padding:6px 14px}
  .doc-table td,.doc-table tr:last-child td{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0;border-bottom:1px solid var(--hair)}
  .doc-table tr td:last-child{border-bottom:0}
  .doc-table td::before{content:attr(data-label);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
}

/* Página de links (link da bio do Instagram): logo centralizado e uma coluna estreita com um cartão por assunto */
.pg-links .top .inner{grid-template-columns:minmax(0,1fr)}
.pg-links .brand{justify-self:center}
.links-sec{padding-block:clamp(28px,6vw,64px)}
.links{max-width:560px;display:flex;flex-direction:column;gap:16px}
.links-title{font-size:clamp(1.6rem,6vw,2.3rem);max-width:18ch;margin:0 auto 12px;text-align:center}
.links-card{align-items:flex-start;gap:16px}
.links-card h2{font-size:clamp(1.2rem,4.4vw,1.5rem);max-width:none}
.links-act{align-self:stretch;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.links-act .btn{box-sizing:border-box;padding-block:12px;line-height:1.3;text-align:center}
.pg-links .foot{padding-block:8px 24px;border-top:0}
.pg-links .foot .base{justify-content:center;text-align:center;margin-top:0}
