.visao{position:relative;background:#070A10;color:#D5D9DF;font-family:Geist,system-ui,sans-serif}
.visao a{color:#F4F5F7}.visao a:hover{color:#FF6A3D}
.vs-palco{position:relative;padding:clamp(80px,11vw,160px) max(24px,7vw)}
.vs-gl{display:none}
.vs-pular{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:5;padding:10px 14px;background:#F4F5F7;color:#10141A!important;font:500 12px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;transform:translate(-50%,200%);opacity:0}
.vs-pular:focus{transform:translate(-50%,0);opacity:1}
/* leitura comum: movimento reduzido, sem WebGL, sem JavaScript */
.vs-trilha{display:grid;gap:1.5em;max-width:52ch;margin:0 auto;font-size:clamp(17px,1.35vw,20px);line-height:1.62}
.vs-p{margin:0;text-wrap:pretty}
.vs-cab{margin-bottom:.6em}
.vs-etq{font:500 11px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#7E8794;margin:0 0 22px}
.vs-cab :is(h1,h2){margin:0;font-weight:700;font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.03em;color:#FFFFFF;text-wrap:balance}
.vs-cab :is(h1,h2) .g{display:block;color:#7E8794}
.vs-a{display:block;font-weight:600;font-size:clamp(23px,2.15vw,34px);line-height:1.18;letter-spacing:-.012em;color:#FFFFFF;max-width:26ch;margin:.62em 0 .52em;text-wrap:balance}
.vs-p>.vs-a:last-child{margin-bottom:0}
.vs-fim{display:grid;justify-items:start;max-width:52ch;margin:72px auto 0}
.vs-logo{display:inline-flex;align-items:center;gap:.5em;font:700 22px/1 Geist,system-ui,sans-serif;letter-spacing:-.025em;color:#F4F5F7}
.vs-mk{display:block;width:1.77em;height:1.77em;flex:none;overflow:visible}
.vs-ass{margin:0;font:inherit;text-transform:uppercase;white-space:nowrap}
/* travessia: tudo no eixo do túnel */
.visao.vs-on{height:calc((var(--telas,12) + 1) * 100svh)}
.vs-on .vs-palco{position:sticky;top:0;height:100svh;overflow:hidden;padding:0}
.vs-on .vs-gl{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.vs-on .vs-gl.pronto{opacity:1}
.vs-on .vs-trilha{position:absolute;inset:0;display:block;max-width:none;margin:0}
.vs-on .vs-p{margin:0}
.vs-imgs{display:none}
.vs-on .vs-imgs{display:block;position:absolute;inset:0;pointer-events:none}
.vs-img{margin:0}
.vs-on .vs-img{position:absolute;left:50%;top:50%;width:clamp(200px,34vw,520px);aspect-ratio:1;visibility:hidden;opacity:0;z-index:1000;will-change:transform,opacity}
.vs-on .vs-img img{display:block;width:100%;height:100%;filter:drop-shadow(0 0 60px rgba(150,180,255,.12)) brightness(.92) contrast(1.06)}
.vs-on .vs-img-t{width:clamp(170px,28vw,430px)}
.vs-on .vs-img-t img{filter:drop-shadow(0 0 70px rgba(90,150,255,.22)) brightness(.9) saturate(.9)}
.vs-on .vs-f{position:absolute;left:50%;top:50%;display:block;box-sizing:border-box;width:max-content;min-width:0;max-width:min(26em,88vw);margin:0;padding:0;text-align:left;font-size:clamp(24px,1.78vw,27px);line-height:1.46;font-weight:400;letter-spacing:-.008em;color:#F2F4F7;font-feature-settings:"kern","liga","calt";text-shadow:0 0 7px rgba(4,6,10,.95),0 1px 2px rgba(4,6,10,.92),0 2px 34px rgba(4,6,10,.8);opacity:0;transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden}
/* O vidro, a borda e o raio de 22px saíram daqui: catorze dos dezoito painéis liam como
   caixa empilhada, e 30 palavras a 37px numa coluna de 14,5em davam onze linhas. A
   legibilidade sobre o túnel passa a vir do véu radial abaixo, que já era o método das
   frases-âncora, e não de um fundo opaco. */
.vs-on .vs-f:not(.vs-a):not(.vs-cab)::after{content:"";position:absolute;inset:-38% -22%;z-index:-1;background:radial-gradient(farthest-side ellipse at 50% 50%,rgba(6,9,15,.93) 0%,rgba(6,9,15,.84) 48%,rgba(6,9,15,.5) 74%,rgba(6,9,15,0) 100%);pointer-events:none}
.vs-on .vs-f:not(.vs-a):not(.vs-cab){position:absolute;isolation:isolate;min-width:min(20em,84vw)}
.vs-meta{display:flex;align-items:center;gap:.9em;margin:0 0 1.15em;font:500 11px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.16em;color:#8C95A5;font-variant-numeric:tabular-nums}
.vs-meta b{font-weight:600;color:#FF6A3D}
.vs-meta i{display:block;width:28px;height:1px;background:rgba(200,215,245,.28)}
.vs-tx{display:block;text-wrap:balance;hanging-punctuation:first}
.vs-tx .w{color:#566071;transition:color .6s cubic-bezier(.2,.7,.2,1)}
.vs-tx .w.on{color:#FFFFFF}
.vs-on .vs-f.vs-a{max-width:min(13em,88vw);font-size:clamp(32px,3.8vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.035em;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 2px 30px rgba(4,6,10,.8)}
.vs-on .vs-f.vs-a .vs-meta{margin-bottom:.9em}
.vs-on .vs-f.vs-a::after{content:"";position:absolute;inset:-28% -22%;z-index:-1;background:radial-gradient(closest-side,rgba(6,9,15,.82),rgba(6,9,15,.55) 60%,rgba(6,9,15,0));pointer-events:none}
.vs-on .vs-f.vs-a .vs-meta i{width:44px;height:2px;background:#FF6A3D}
.vs-on .vs-f.vs-a .w{color:#4A5363}
.vs-on .vs-f.vs-a .w.on{color:#FFFFFF}
.vs-on .vs-f.vs-cab{width:min(11em,90vw);max-width:none;min-width:0;font-size:clamp(40px,6vw,96px);padding:0;text-align:left;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.vs-on .vs-cab :is(h1,h2){font-size:1em}
.vs-on .vs-cab .vs-etq{font-size:11px;margin-bottom:28px}
.vs-on .vs-fim{position:absolute;inset:0;margin:0;max-width:none;display:block;pointer-events:none}
.vs-on .vs-logo{position:absolute;left:0;top:0;font-size:clamp(26px,3.3vw,50px);opacity:0;visibility:hidden;will-change:transform,opacity}
.vs-on .vs-ass{opacity:0}
.vs-lj{display:none}
.vs-on .vs-lj{display:block;position:absolute;left:0;top:0;background:#FF6A3D;cursor:pointer;visibility:hidden;transform-origin:50% 50%;will-change:transform;z-index:3}
.vs-volta{position:fixed;inset:0;z-index:9999;background:#FF6A3D;opacity:0;pointer-events:none;transition:opacity .6s ease}
.vs-volta.on{opacity:1;transition:none}

/* ─── Chamada da chegada ─────────────────────────────────────────────
   O briefing pedia que a travessia terminasse na frase de fecho e no
   botão. O pacote entregue voltava ao topo sem oferecer nenhum dos dois. */

/* ─── Contraste das âncoras sobre o núcleo do túnel ──────────────────
   As âncoras tiram o cartão de propósito e ficam só com sombra de texto.
   Sobre o ponto mais claro do túnel isso mede 1,2:1, contra o mínimo de
   4,5:1. O véu abaixo é macio e sem borda, então não devolve o cartão:
   escurece só o que está atrás das linhas de texto. */
.js .vs-a{position:relative;isolation:isolate}
.js .vs-a::before{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;top:-26%;bottom:-26%;
  background:radial-gradient(60% 52% at 50% 50%,rgba(4,6,10,.92) 0%,rgba(4,6,10,.80) 46%,rgba(4,6,10,.42) 72%,rgba(4,6,10,0) 100%);
  filter:blur(6px);pointer-events:none}
.js .vs-a{text-shadow:0 1px 2px rgba(4,6,10,.9),0 2px 30px rgba(4,6,10,.85)}


/* ─── Contraste dos cartões sobre o núcleo do túnel ──────────────────
   O cartão tinha desfoque e um gradiente translúcido, mas nenhum
   preenchimento escuro: onde o núcleo do túnel passa por trás, o texto
   branco medido contra o fundo caía a 2:1, contra o mínimo de 4,5:1.
   A camada abaixo escurece por dentro do cartão, sem mexer na borda,
   no raio nem na sombra que definem o desenho dele. */
/* A capa é só texto grande sobre o túnel, e precisa do mesmo véu das âncoras. */
.js .vs-cab{position:relative;isolation:isolate}
.js .vs-cab::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:-22%;bottom:-22%;
  background:radial-gradient(62% 54% at 50% 50%,rgba(4,6,10,.90) 0%,rgba(4,6,10,.76) 48%,rgba(4,6,10,.38) 74%,rgba(4,6,10,0) 100%);
  filter:blur(7px);pointer-events:none}

/* A chamada sobre a cortina laranja do fim. */


/* ─── Saída visível, e conteúdo que não some da árvore ───────────────
   O link de pular só aparecia com foco de teclado, então no celular não
   existia saída nenhuma da travessia. Agora ele é discreto e visível, e
   fica sólido ao receber foco ou o ponteiro. */
.vs-pular{transform:translate(-50%,0);opacity:.42;transition:opacity .25s,background .25s}
.vs-pular:hover,.vs-pular:focus{opacity:1}
.vs-pular:focus-visible{outline:2px solid #FF6A3D;outline-offset:3px}
/* Os painéis fora de cena ficam invisíveis por opacidade e não recebem
   clique, mas continuam no documento: `visibility:hidden` tirava 17 dos 18
   da árvore de acessibilidade, e quem usa leitor de tela alcançava um só. */
.vs-on .vs-f{visibility:visible}
.vs-on .vs-f[style*="opacity: 0"]{pointer-events:none}

.vs-logo{text-decoration:none}
.vs-logo:hover{color:#F4F5F7}
.vs-logo:focus-visible{outline:2px solid #FF6A3D;outline-offset:6px;border-radius:6px}

/* As frases-âncora ficam no centro como todo o resto: a regra `.js .vs-a{position:relative}`
   empatava em especificidade com `.vs-on .vs-f` e, por vir depois, ganhava. */
.vs-on .vs-f.vs-a{position:absolute;margin:0}
.vs-on .vs-f.vs-cab{position:absolute;margin:0}
.vs-fim .vs-logo{pointer-events:auto}