:root{
    --bg:#050608;
    --blue:#2563EB;
    --cyan:#38BDF8;
    --mist:#E5E7EB;
    --white:#FFFFFF;
    --ink-faint:rgba(229,231,235,.45);
    --ink-soft:rgba(229,231,235,.74);
    --edge:clamp(22px,5.2vw,84px);   /* margem-padrao esquerda: logo + titulos + rodape */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--mist);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  body{overflow-x:hidden}
  a{color:inherit}

  /* ---------- Loader ---------- */
  #loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .8s ease,visibility .8s}
  #loader.done{opacity:0;visibility:hidden}
  #loader .mark{display:block;width:clamp(260px,38vw,400px);height:auto;
    filter:drop-shadow(0 4px 22px rgba(0,0,0,.5));animation:markPulse 2.4s ease-in-out infinite}
  @keyframes markPulse{0%,100%{opacity:.82}50%{opacity:1}}
  #loader .bar{margin:22px auto 0;width:180px;height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
  #loader .bar i{display:block;height:100%;width:6%;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .3s ease}

  /* ---------- Logo ---------- */
  /* desktop: logo desce um pouco, pra ficar mais perto da legenda inicial.
     (o mobile tem seu próprio top no @media abaixo) */
  .logo{position:fixed;top:clamp(18px,5vh,80px);left:var(--edge);z-index:40;user-select:none;text-decoration:none}
  .logo::before{content:"";position:absolute;inset:-22px -40px -22px -30px;z-index:-1;
    background:radial-gradient(ellipse at 28% 45%,rgba(6,12,20,.55),rgba(6,12,20,0) 72%)}
  /* altura (não largura) dirigida por vh: em telas curtas o logo encolhe
     junto com o espaço até a legenda (que também é vh-based), sem colidir */
  .logo img{display:block;height:clamp(100px,15vh,160px);width:auto;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
  @media (max-width:720px){
    .logo{top:clamp(16px,3vh,28px)}   /* mais respiro do topo no mobile */
    .logo img{width:210px;height:auto}
  }

  /* ---------- Floating WhatsApp CTA ---------- */
  .wa{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:40;display:inline-flex;align-items:center;gap:9px;
    padding:12px 18px;border-radius:999px;background:linear-gradient(100deg,var(--blue),var(--cyan));color:var(--white);
    font-family:Sora;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 10px 34px -8px rgba(37,99,235,.7);
    opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;
    overflow:hidden;isolation:isolate}
  .wa.show{opacity:1;transform:none}
  .wa svg{width:17px;height:17px;fill:currentColor}
  .wa svg,.wa .wa-label{position:relative;z-index:1}
  .wa.inline-wa{position:relative;inset:auto;display:flex;width:max-content;margin-top:20px;opacity:1;transform:none;pointer-events:auto}
  .wa .wa-label{display:inline-block;white-space:nowrap}
  /* brilho passando sobre o botão a cada 3s (só CSS, sem JS, sem imagem) */
  .wa::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:2;pointer-events:none;
    background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.5) 50%,transparent 100%);
    transform:translateX(-160%) skewX(-18deg);
    animation:waShine 3s ease-out infinite}
  @keyframes waShine{
    0%{transform:translateX(-160%) skewX(-18deg)}
    28%{transform:translateX(330%) skewX(-18deg)}
    100%{transform:translateX(330%) skewX(-18deg)}
  }
  /* ---------- Saída final (bloco "fecho") ---------- */
  /* camada preta que fecha o brilho do anel depois que o logo aparece */
  #outroFade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:8}
  #outroLogo{position:absolute;left:50%;top:50%;width:clamp(230px,28vw,340px);height:auto;
    opacity:0;pointer-events:none;z-index:22;transform:translate(-50%,-50%) scale(1);
    filter:drop-shadow(0 6px 34px rgba(0,0,0,.6))}
  /* texto de CTA — mesma pegada dos títulos do site (Sora 700), mais robusto */
  #outroCta{position:absolute;left:50%;top:50%;z-index:22;pointer-events:none;
    width:max-content;max-width:min(90vw,760px);text-align:center;
    font-family:Sora,system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;
    font-size:clamp(24px,3.4vw,42px);line-height:1.1;color:var(--white);
    opacity:0;transform:translate(-50%,0);
    text-shadow:0 2px 3px rgba(0,0,0,.6),0 6px 34px rgba(0,0,0,.7)}
  /* botão viajando: passa POR BAIXO dos títulos (z abaixo do .hud), acima do fade preto */
  .wa.outro{position:absolute;left:0;top:0;right:auto;bottom:auto;margin-top:0;z-index:10;
    transform:translate(-50%,-50%);pointer-events:auto;
    transition:padding .45s cubic-bezier(.22,1,.36,1),font-size .45s cubic-bezier(.22,1,.36,1)}
  .wa.outro.expanded{padding:15px 26px;font-size:15px}

  /* ---------- Scene / scroll length ---------- */
  /* #scene = só um espaçador que cria a distância de rolagem. O #stage é FIXO
     (não sticky) → nada "sobe" no primeiro scroll, fica travado desde o início. */
  #scene{position:relative;height:1800vh}          /* 6 blocos · ~21vh por peso */
  /* fixo durante a experiência; no fim o JS troca pra position:absolute (top = fim
     do #scene - 100vh) → a última tela "estaciona" e a rolagem segue normal,
     revelando a .seo-outro ABAIXO (sem cobrir o logo/CTA/botão do fecho). */
  #stage{position:fixed;top:0;left:0;right:0;height:100vh;overflow:hidden;background:var(--bg);z-index:1}
  #stage.parked{position:absolute}
  #cine{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent}
  #grain{position:absolute;inset:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(135% 105% at 62% 45%,transparent 44%,rgba(0,0,0,.6) 100%)}
  /* disfarça a borda esquerda do video: faixa de --bg solida + degrade */
  .edge-fade{position:absolute;inset:0 auto 0 0;width:52%;pointer-events:none;z-index:3;
    background:linear-gradient(to right,var(--bg) 0,var(--bg) 44%,rgba(5,6,8,.55) 74%,rgba(5,6,8,0) 100%)}

  /* ---------- HUD (textos das cenas) ---------- */
  /* z-index alto: no fecho, o botão do WhatsApp viaja POR BAIXO do título/subtítulo */
  .hud{position:absolute;inset:0;pointer-events:none;z-index:20}
  .cap{position:absolute;left:var(--edge);top:50%;max-width:min(680px,56vw);
    opacity:0;transform:translateY(calc(-50% + 22px));
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
  .cap.active{opacity:1;transform:translateY(-50%)}
  .cap .kicker{font-family:Sora;font-weight:600;font-size:12px;letter-spacing:.34em;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;
    text-shadow:0 1px 10px rgba(0,0,0,.7)}
  .cap h2{font-family:Sora;font-weight:700;font-size:clamp(26px,4.3vw,50px);line-height:1.06;letter-spacing:-.01em;color:var(--white);
    margin:0;
    white-space:nowrap;   /* respeita só os <br> — sem quebra extra (títulos sempre em 2 linhas) */
    text-shadow:0 2px 3px rgba(0,0,0,.6),0 6px 34px rgba(0,0,0,.7)}
  /* h1 real da página, sem impacto visual (só pra leitores de tela e crawlers) */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .cap p{margin-top:16px;font-family:Sora,system-ui,sans-serif;font-size:clamp(18px,2.05vw,25px);line-height:1.48;color:#fff;font-weight:200;max-width:40ch;
    text-shadow:0 1px 4px rgba(0,0,0,.8),0 2px 18px rgba(0,0,0,.65)}
  #sub0,#sub1,#sub2,#sub3{transition:none;will-change:opacity}

  .hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:6;font-family:Sora;font-size:11px;letter-spacing:.28em;
    text-transform:uppercase;color:var(--ink-faint);transition:opacity .4s;text-shadow:0 1px 8px rgba(0,0,0,.85);white-space:nowrap;pointer-events:none}
  .hint::after{content:"";display:block;width:1px;height:26px;margin:10px auto 0;background:linear-gradient(var(--cyan),transparent);animation:drop 1.8s ease-in-out infinite}
  @keyframes drop{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}

  /* ---------- Rodapé — surge DENTRO do bloco final, abaixo do botão (não rola pra ele) ---------- */
  #outroFooter{position:absolute;left:50%;top:50%;z-index:22;pointer-events:none;
    width:max-content;max-width:min(90vw,640px);text-align:center;
    font-size:13px;color:var(--ink-soft);line-height:1.7;
    padding-top:22px;border-top:1px solid rgba(255,255,255,.12);   /* a divisória bloco↔rodapé */
    opacity:0;transform:translate(-50%,0)}
  #outroFooter.on{pointer-events:auto}
  #outroFooter a{color:var(--cyan);text-decoration:none}
  #outroFooter .tag{letter-spacing:.2em;font-size:10px;color:var(--ink-faint);text-transform:uppercase;margin-bottom:9px}
  #outroFooter .addr{margin-top:4px;font-size:11px;color:var(--ink-faint);letter-spacing:.02em}
  #outroFooter .rights{margin-top:12px;font-size:11px;color:var(--ink-faint);letter-spacing:.04em}

  /* ---------- Seção SEO — rola normal DEPOIS da experiência (não cobre o fecho) ----------
     Conteúdo real e visível (não escondido): navegação + FAQ (sanfona) + sobre
     + serviços + contato. É o que o Google e as IAs efetivamente leem. */
  /* o BLOCO fica centralizado no desktop (coluna de 680px com margin:auto),
     mas os TEXTOS alinham à esquerda. No mobile a coluna ocupa a largura toda. */
  .seo-outro{position:relative;background:var(--bg);color:var(--ink-soft);
    border-top:1px solid rgba(255,255,255,.09);
    padding:clamp(52px,10vh,120px) var(--edge) clamp(40px,7vh,84px);
    font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.7;
    text-align:left}
  .seo-outro>*{max-width:680px;margin-inline:auto}
  .seo-outro h2{font-family:Sora;font-weight:600;font-size:clamp(17px,2.2vw,22px);
    color:var(--white);letter-spacing:-.01em;line-height:1.28;margin:0 auto 24px}
  /* navegação interna */
  .seo-outro .seo-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-bottom:36px}
  .seo-outro .seo-nav a{font-family:Sora;font-weight:600;font-size:13px;color:var(--ink-soft);
    text-decoration:none;padding:10px 22px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
    transition:color .2s,border-color .2s,background .2s}
  /* "apagado" por padrão; ACENDE (gradiente) só no hover */
  .seo-outro .seo-nav a:hover{color:#fff;border-color:transparent;
    background:linear-gradient(100deg,var(--blue),var(--cyan))}
  /* sub-título da FAQ */
  .seo-outro .faq-title{font-family:Sora;font-weight:600;font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-faint);margin:0 auto 12px}
  /* FAQ sanfona (o conteúdo fica no HTML → Google indexa igual) */
  .seo-outro details{border-bottom:1px solid rgba(255,255,255,.1)}
  .seo-outro details:first-child{border-top:1px solid rgba(255,255,255,.1)}
  .seo-outro summary{font-family:Sora;font-weight:600;font-size:14px;color:var(--white);
    padding:15px 32px 15px 0;cursor:pointer;list-style:none;position:relative;line-height:1.45}
  .seo-outro summary::-webkit-details-marker{display:none}
  .seo-outro summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:17px;
    color:var(--cyan);font-weight:400}
  .seo-outro details[open] summary::after{content:"\2013"}
  .seo-outro details p{margin:-2px 0 18px;color:var(--ink-soft)}
  .seo-outro .about{margin-top:44px}
  .seo-outro .about p{margin:0;color:var(--ink-soft)}
  .seo-outro .about strong{color:var(--mist);font-weight:600}
  .seo-outro .services{margin-top:32px;padding:0;list-style:none;display:grid;gap:10px 32px;justify-items:start}
  @media(min-width:640px){.seo-outro .services{grid-template-columns:1fr 1fr}}
  @media(min-width:960px){.seo-outro .services{grid-template-columns:1fr 1fr 1fr}}
  .seo-outro .services li{color:var(--ink-soft)}
  .seo-outro .services a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
  .seo-outro .services a:hover{color:var(--white);border-color:var(--cyan)}
  .seo-outro .nap{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);
    font-size:13px;color:var(--ink-faint);line-height:1.8}
  .seo-outro .nap a{color:var(--cyan);text-decoration:none}
  .seo-outro .nap strong{color:var(--ink-soft);font-weight:600}
  .seo-outro .rights{margin-top:18px;font-size:11px;color:var(--ink-faint);letter-spacing:.03em}
  @media(max-width:720px){
    .seo-outro{font-size:13.5px}
  }

  /* ---------- Fallback estatico (reduced-motion) ---------- */
  body.static #scene{height:auto}
  body.static #stage{position:static;height:auto;overflow:visible}
  body.static #cine,body.static .hint,body.static #grain,body.static .vignette,
  body.static #outroFade,body.static #outroLogo,body.static #outroCta{display:none}
  body.static #outroFooter{display:none}   /* a .seo-outro (sempre visível) já cobre tagline + contato */
  body.static .hud{position:static}
  body.static .cap{position:static;opacity:1;transform:none;max-width:none;padding:14vh var(--edge);border-bottom:1px solid rgba(255,255,255,.06)}
  body.static .cap[data-i="0"]{transform:none;left:auto;top:auto;text-align:left}

  /* ---------- MOBILE (opção B): vídeo 9:16 na tela toda · texto no topo · botão fixo no rodapé ---------- */
  @media (max-width:720px){
    :root{--edge:20px}
    /* legenda na faixa escura de cima, com folga do logo. Textos NÃO quebram:
       encolhem com a largura da tela (vw) e nunca passam pra outra linha. */
    .cap{left:20px;right:20px;max-width:none;
      top:178px;text-align:left;transform:translateY(14px)}
    .cap.active{transform:translateY(0)}
    .cap .kicker{letter-spacing:.09em;margin-bottom:12px;
      font-size:clamp(9px,2.95vw,12px);white-space:nowrap}
    .cap h2{font-size:clamp(21px,6.6vw,34px);line-height:1.14;white-space:nowrap}
    .cap p{font-size:clamp(11px,3.55vw,15px);margin-top:10px;max-width:none;white-space:nowrap}
    /* botão: FIXO no rodapé, centralizado, a apresentação toda */
    .wa.inline-wa{position:fixed;left:50%;right:auto;top:auto;
      bottom:calc(18px + env(safe-area-inset-bottom));
      transform:translateX(-50%);margin-top:0;width:max-content;
      font-size:13px;padding:12px 18px}
    /* degradê leve só pra legibilidade do texto (a máscara preta que disfarça o
       "flash" é desenhada no canvas, colada nas bordas do vídeo) */
    .edge-fade{inset:0 0 auto 0;width:auto;height:32%;
      background:linear-gradient(to bottom,rgba(5,6,8,.8) 0,rgba(5,6,8,.4) 55%,rgba(5,6,8,0) 100%)}
    /* "role para explorar" fica no mobile também — acima do botão, abaixo do vídeo,
       visível a apresentação toda (some no eclipse, via JS — dirigido pelo scroll) */
    .hint{display:block;bottom:calc(78px + env(safe-area-inset-bottom));
      font-size:9.5px;letter-spacing:.22em;transition:none}
    .hint::after{height:18px;margin-top:7px}
    .wa{font-size:13px;padding:11px 15px}
    /* fecho no mobile: CTA e rodapé um pouco menores */
    #outroCta{font-size:clamp(19px,5.2vw,26px);white-space:normal}
    #outroFooter{font-size:12px;max-width:90vw}
  }
  @media (prefers-reduced-motion:reduce){
    .cap,.wa,#loader{transition:none}
    .wa::after{animation:none;opacity:0}
  }