:root{--mundo:#030910;--mundo-tinta:#f0f5f5;--menu-h:64px}
/* cor do mundo de cada empresa no <html>: pinta antes do empresa.css (nunca tela branca) */
.mundo-gt{--mundo:#06101f}.mundo-vida{--mundo:#120e0d}.mundo-renylab{--mundo:#0b0d10}.mundo-quokka{--mundo:#04130f}.mundo-imaes{--mundo:#031416}
html.mundo{background:var(--mundo);scroll-padding-top:0}
html.mundo body{background:var(--mundo)}

/* ── menu fixo (d2) ── */
.menu{position:fixed;inset:0 0 auto;z-index:40;height:var(--menu-h);display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:0 clamp(16px,4vw,48px);background:linear-gradient(#0a0612e6,#0a061200);font:400 14px/1 Synonym,system-ui,sans-serif}
.menu a{color:var(--mundo-tinta);text-decoration:none}
.menu__marca{font:300 18px/1 Zodiak,Georgia,serif;letter-spacing:0;display:inline-flex;align-items:center;min-height:44px}
.menu__lista{display:flex;gap:clamp(4px,1vw,12px);margin:0 auto 0 clamp(8px,3vw,40px);padding:0;list-style:none}
.menu__lista a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;color:#d6dde4;letter-spacing:.04em;transition:color .2s,background-color .2s}
.menu__lista a:hover{color:#fff;background:#ffffff14}
.menu__lista a[aria-current]{color:#fff;background:#ffffff1f}
.menu__lista a[aria-current]::after{content:"";display:block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--marca-texto)}
.menu__voltar{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid #f0f5f566;border-radius:999px;margin-left:auto}
.menu__lista + .menu__voltar{margin-left:0}
.menu__voltar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.menu__voltar:hover{background:var(--mundo-tinta);color:var(--mundo)}
.menu__abrir{display:none;min-height:44px;padding:0 18px;border:1px solid #f0f5f566;border-radius:999px;background:transparent;color:var(--mundo-tinta);font:inherit;cursor:pointer}
.menu a:focus-visible,.menu button:focus-visible{outline:2px solid var(--focus,#c2e9ff);outline-offset:4px}
@media (max-width:860px){
 .menu__abrir{display:inline-flex;align-items:center;margin-left:auto}
 .menu__voltar span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .menu__voltar{padding:0 12px;min-width:44px;justify-content:center}
 .menu__lista{display:none;position:absolute;top:var(--menu-h);left:12px;right:12px;flex-direction:column;margin:0;padding:8px;background:#0d0716f2;border:1px solid #ffffff22;border-radius:16px}
 .menu.aberto .menu__lista{display:flex}
 .menu__lista a{width:100%}
}
.sem-js .menu__abrir{display:none}

/* ── ENTRADA (T13, P10): sem a chegada em fluido, a pagina abre direto no topo da empresa (cena, logo e titulo; o texto entra pelo
   empresa.css). A cena aparece num esmaecer curto, com uma escala de 1,04 para 1 (so compositor), quando a imagem do fundo esta pronta
   (html.cena-pronta, mundo.js; teto de 2,5 s), a partir do ponto em que a tinta da pagina anterior cobriu a tela (--origem, do carimbo).
   Sem JS ou com movimento reduzido: a cena ja esta la, parada. ── */
.js.anima .hero__cena{opacity:0;transform:scale(1.04);transform-origin:var(--origem,50% 50%);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1)}
.js.anima.cena-pronta .hero__cena{opacity:1;transform:none}
/* rede de seguranca: se o mundo.js nao rodar (erro, bloqueio), a cena aparece sozinha aos 3 s */
.js.anima:not(.cena-pronta) .hero__cena{animation:m-cena-teto 0s linear 3s forwards}
@keyframes m-cena-teto{to{opacity:1;transform:none}}

/* ── PASSAGEM de saida (T12): a cor do proximo mundo invade a tela como tinta, do ponto do clique (canvas 2D desenhado pelo mundo.js
   em 450 ms; frente com dedos e um fio fino na cor da marca do destino). Sem nuvem e sem disco chapado. A pagina seguinte nasce
   na cor do mundo dela e a cena aparece a partir do ponto do clique (ENTRADA, acima). ── */
.passagem{display:none}
.js .passagem{display:block;position:fixed;inset:0;z-index:60;pointer-events:none;visibility:hidden;background:var(--destino,transparent)}
.passagem__tinta{position:absolute;inset:0;width:100%;height:100%;display:block}
.js.saindo .passagem{visibility:visible;pointer-events:auto;cursor:progress}

/* ── carregador (d6): so aparece se a cena do topo passar de 800 ms para ficar pronta ── */
.carregando{position:fixed;z-index:70;left:0;top:0;width:100%;height:2px;background:var(--marca-texto);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.demorando:not(.cena-pronta) .carregando{opacity:1;animation:m-carregando 6s cubic-bezier(.1,.6,.2,1) forwards}
@keyframes m-carregando{to{transform:scaleX(.92)}}

/* o pular-para-conteudo fica acima do menu */
.pular{z-index:80}

@media (prefers-reduced-motion:reduce){
 .js .passagem{transition:none!important}
}
/* prova de quadros (?quadros=1): sem transicao de CSS, para o quadro mostrar o estado exato do instante */
.prova-quadros *,.prova-quadros *::before,.prova-quadros *::after{transition:none!important;animation:none!important}