/* Base comum da viagem: camadas, cidade e rodapé. Marca, cabeçalho e menu estão em marca.css; nomes e nuvens em nomes.css. */
.brand-logo{display:block;width:100%;height:auto;object-fit:contain}.opening-brand{width:min(490px,78vw);padding:0;margin:0 auto 32px;letter-spacing:normal}.opening-brand .brand-logo{aspect-ratio:3.4/1}.brand-fallback{display:none}.brand-failed .brand-logo{display:none}.brand-failed .brand-fallback{display:inline}
#distant-copy,#near-copy,#arrival-hint{background:none;border-radius:0;box-shadow:none;padding:0;color:#f5f8f8;text-shadow:none}
.inline-brand{display:inline-block;vertical-align:middle;width:clamp(130px,14vw,210px);margin-left:12px}.inline-brand .brand-logo{display:block}#distant-copy p{width:150px;margin-top:24px;letter-spacing:normal}#near-copy h2{display:flex;align-items:center;gap:10px}.company-content h2 .inline-brand{width:clamp(155px,15vw,220px);margin-left:8px;filter:brightness(.33) saturate(.8)}
#distant-copy{left:7%;bottom:17%;right:auto}.shade{background:linear-gradient(180deg,#0309108c,transparent 24%,transparent 49%,#030910ab)}
@media(max-width:600px){.opening-brand{width:78vw}.pin{width:min(88px,calc((100vw - 52px)/3));height:44px}.pin img{max-height:35px}.marker-float .marker-depth{transform:translate(1px,2px)}#near-copy,#distant-copy{left:26px;bottom:18%;right:24px}#near-copy h2{font-size:28px}.inline-brand{width:140px;margin-left:0}.company-content h2 .inline-brand{width:155px}#distant-copy h2{font-size:34px}#distant-copy p{width:125px}.opening-tagline{font-size:23px}}
.brand-art.brand-material-failed{background:none;mask-image:none}.brand-art.brand-material-failed .brand-logo{opacity:1}
.brand-art{background-color:#f2f4f1}
.arrival-shade{display:block;pointer-events:none}.credit.cloud-credit{color:#fff;text-shadow:0 1px 5px #071724;padding:0}
footer{z-index:8}

.brand-art{display:block;background-image:url("assets/onmnia-higgsfield-material-49285f116b.webp");background-size:100% 100%;mask-image:url("assets/onmnia-official-mask-cceec08107.webp");mask-size:100% 100%;mask-repeat:no-repeat}.brand-art .brand-logo{opacity:0}.brand-art.inline-brand{display:inline-block}.brand-art.brand-failed{mask-image:none;background:none}.brand-art.brand-failed .brand-fallback{display:inline}.brand-art.brand-failed .brand-logo{display:none}
/* T12 (pedido 5): sem contorno preto colado na letra. Os textos grandes ganham um véu suave por trás (ver o fim deste arquivo); as legendas pequenas, uma sombra larga e difusa. */
#distant-copy,#near-copy{text-shadow:none}
.credit,.credit.cloud-credit,.light-sky .credit{text-shadow:0 0 14px #030910c4}
#near-copy a svg{filter:drop-shadow(0 0 8px #030910b0)}
/* 02/10 acabamento: titulos com contorno mais fino (menos camadas de 1px), ainda legivel sobre mata e calcada. */
#distant-copy h2,#near-copy h2{text-shadow:none}
/* E4 04/10: link do cabecalho sobre a parede branca (1130-1330): placa clara sutil que entra com a fachada (--fachada-placa 0->1 de 1130 a 1230, fachada.js); margem negativa = texto no mesmo lugar. */
/* F2 fluidez: na zona 1130-1330 o canvas da viagem não tem pixel visível (nuvens já saíram): fora da composição. */
.fachada-zona #scene{visibility:hidden}
/* F2 fluidez: na zona 1130-1330 textos e sombras entram/saem só por opacidade numa camada composta (sem repintar a cada quadro); pins movidos por transform (fachada.js). */
.fachada-zona #distant-copy,.fachada-zona #near-copy,.fachada-zona #arrival-hint,.fachada-zona #arrival .arrival-shade:before,.fachada-zona #arrival .arrival-shade:after{will-change:opacity}
.fachada-zona .pin{will-change:transform}
/* Cidade e tela de entrada: posições por cidade.js; aqui só aparência. */
#landscape{object-fit:fill;transform-origin:0 0}#espelho{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:hidden}#espelho img{display:block;width:100%;transform:scaleY(-1)}
#distant-copy:before{content:none}
.sr-sep{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fachada-zona #distant-copy{top:15%;bottom:auto}.fachada-zona #near-copy{bottom:8%}
@media(max-width:600px){.fachada-zona #distant-copy{top:17%}}
/* Reduzido e modo leve: tela 3 (pilares + palavras) e, logo abaixo, tela 5 (fachada de frente + marcadores), paradas. */
.telas-paradas #viagem{height:200svh!important}.telas-paradas #palco{position:relative;height:200svh;min-height:840px}
.telas-paradas #arrival{opacity:1;visibility:visible}.telas-paradas #near-copy{bottom:5%}.telas-paradas #descent,.telas-paradas #veu{display:none}
/* Cidade do Grupo: três camadas e cinco marcadores posicionados por cidade.js (GEOMETRIA-CIDADE.json); aqui só aparência. Camada própria (will-change) só dentro da zona 760-1960 (.cidade-zona). */
#viagem{height:2460svh}
.camada{position:absolute;left:0;top:0;right:auto;bottom:auto;max-width:none;transform-origin:0 0;object-fit:fill;visibility:hidden;opacity:0;pointer-events:none;background:none}
.cidade-zona .camada,.cidade-perto .camada{will-change:transform,opacity}
.camada-telao{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;object-fit:cover;visibility:hidden;opacity:0;pointer-events:none}.cidade-zona .camada-telao,.cidade-perto .camada-telao{will-change:transform,opacity}

/* E (05/10): as mesmas camadas proprias passam a existir a partir de y=700 (.cidade-perto, 110 svh antes da LONGE aparecer), e nao no quadro de y=1130:
   na janela real a promocao em 1130 custava 36+21 ms de raster na GPU (quadro de 73 ms). */
.cidade-perto #distant-copy,.cidade-perto #near-copy,.cidade-perto #arrival-hint,.cidade-perto #arrival .arrival-shade:before,.cidade-perto #arrival .arrival-shade:after{will-change:opacity}
.camada-final{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;object-fit:fill;pointer-events:none}.camada-final[hidden]{display:none}
.cidade-zona #distant-copy{will-change:opacity}
.telas-paradas #distant-copy{top:auto;bottom:calc(50% + 16svh)}.telas-paradas #near-copy{bottom:3%}
.static #viagem{height:2460svh}
/* Cidade: sobre a cidade (fundo cheio de detalhe) a silhueta flutuante do R12 nao se le; cada logo ganha uma placa clara. */
.fachada-zona #distant-copy{top:auto;bottom:17%}

/* K (05/10/2026): a viagem para no ponto máximo da cidade (1500) e segue às empresas em 1640; sem aproximação até a sede.
   Reduzido/leve: uma tela parada no ponto máximo. */
/* T13 (P6): a viagem termina na vista final da cidade (cidade.js, Y.fim 1280; sem aproximação e sem passeio): altura = fim + 100. */
#viagem{height:1380svh}.static #viagem{height:1380svh}
.telas-paradas #viagem{height:100svh!important}.telas-paradas #palco{position:relative;height:100svh;min-height:420px}
.telas-paradas #distant-copy{top:auto;bottom:17%}
/* K: cidade em WebGL com mipmap (cena-cidade.js); as <img> ficam no DOM (1 px, transparentes: o texto alternativo continua na arvore de acessibilidade) e servem ao modo reduzido. */
#cidade-gl{position:absolute;left:0;top:0;pointer-events:none;visibility:hidden}.cidade-gl .camada{width:1px!important;height:1px!important;opacity:0!important;will-change:auto!important}.cidade-gl.cidade-perto #camada-longe2{visibility:visible!important}.cidade-gl .camada-telao{display:none}
.cidade-fotos{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;list-style:none}
/* K marco 3: alvo invisível de cada logo flutuante (a logo é desenhada no WebGL); posição e tamanho (≥ 44 px) por cena-cidade.js. */
#logos-cidade{position:absolute;inset:0;z-index:4;pointer-events:none;display:none}.cidade-zona #logos-cidade,.telas-paradas #logos-cidade{display:block}.logo-cidade,.porta-cidade{position:absolute;left:0;top:0;pointer-events:auto;border-radius:8px;cursor:pointer}.logo-cidade[hidden],.porta-cidade[hidden]{display:none}.logo-cidade:focus-visible,.porta-cidade:focus-visible{outline:2px solid #fff;outline-offset:4px;box-shadow:0 0 0 6px #15392d}

body #arrival #distant-copy,body.fachada-zona #arrival #distant-copy,body.telas-paradas #arrival #distant-copy{position:absolute;left:0;right:0;top:clamp(112px,16svh,164px);bottom:auto;padding:0;text-align:center;opacity:0;visibility:hidden;pointer-events:none}
body #arrival #distant-copy h2{font-size:clamp(34px,4.4vw,68px);text-wrap:balance}
@media(max-width:600px){body #arrival #distant-copy,body.fachada-zona #arrival #distant-copy,body.telas-paradas #arrival #distant-copy{top:clamp(250px,30svh,290px);left:20px;right:20px}body #arrival #distant-copy h2{font-size:clamp(32px,9.4vw,40px)}}
/* Rodapé e controles da zona da cidade. */
footer{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 12px}

/* ===== Rodapé e controles sobre a cena (base comum) ===== */
footer{padding-bottom:env(safe-area-inset-bottom)}
footer .ilustracao-ia{flex:0 0 100%;margin:0;text-align:right;font-size:13px;color:var(--texto-claro);opacity:0;visibility:hidden;transition:opacity var(--dur-media);text-shadow:0 0 14px #030910c4}
.fachada-zona .ilustracao-ia,.telas-paradas .ilustracao-ia{opacity:1;visibility:visible}
footer .credit,footer .credit.cloud-credit,.ctl.credit.cloud-credit{color:var(--texto-claro);text-shadow:none;padding:0 18px;background:rgb(27 30 34/.94)!important}
#pausa-movimento svg{width:16px;height:16px;flex:none;stroke-width:2;stroke-linecap:round}#pausa-movimento .i-retomar{fill:currentColor;stroke:none}
#pausa-movimento.pausado .i-pausa,#pausa-movimento:not(.pausado) .i-retomar{display:none}
footer .ver-empresas{display:none}
html.light-mode footer .ver-empresas,body.static footer .ver-empresas,.telas-paradas footer .ver-empresas{display:inline-flex}
html.light-mode #pausa-movimento,body.static #pausa-movimento,.telas-paradas #pausa-movimento{display:none}
/* Frase da sede: aparece quando a Terra dá lugar ao Brasil (journey.js escreve a opacidade). Contorno colado na letra, sem placa. */
.frase-bh{position:absolute;z-index:2;left:9%;bottom:20%;max-width:min(34em,80%);margin:0;font:300 clamp(24px,2.6vw,38px)/1.25 Zodiak,Georgia,serif;letter-spacing:-.02em;color:var(--texto-claro);opacity:0;pointer-events:none;text-wrap:balance;text-shadow:none}
html.light-mode .frase-bh,body.static .frase-bh{display:none}
@media(max-width:599px){.frase-bh{left:29px;right:26px;bottom:22%;font-size:26px}}
/* Texto da primeira tela sobre a Terra: contorno colado na letra (o reflexo do sol no mar passa atrás do texto). */
.intro h1,.intro p{text-shadow:none}
/* Logos da lista: alturas equilibradas pelo peso visual (a Renylab é a mais fina). */
#gt{--h:30px}#vida{--h:34px}#renylab{--h:28px}#quokka{--h:34px}#imaes{--h:34px}
/* Movimento pausado: o que é meu e se mexe sozinho para. */
[data-movimento="pausado"] .opening-horizon{animation-play-state:paused}
@media(max-width:599px){footer .credit,footer .ver-empresas{padding:0 14px}#pausa-movimento{width:var(--alvo);padding:0}#pausa-movimento .ctl__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* T12 (pedido 5): véu suave atrás dos textos grandes da viagem (primeira cena, frase da sede, "Cidade do Grupo"), no lugar do contorno preto colado na letra.
   Uma camada só, por opacidade, que acompanha o texto (a opacidade vem do próprio elemento). */
.intro:before,.frase-bh:before,#distant-copy:before,#near-copy:before{content:"";position:absolute;z-index:-1;inset:-1.1em -1.5em -1em -1.5em;background:radial-gradient(closest-side,rgb(3 9 16/.5),rgb(3 9 16/.3) 58%,transparent);pointer-events:none}

/* T12 correção 1 (CG-08): o título da primeira tela tem 2 linhas no computador e até 3 no celular, como na T11.
   A caixa fica mais larga e o título equilibra as linhas; no celular o corpo desce para caber em 3. */
.intro{max-width:min(86%,1240px)}.intro h1,.intro p{text-wrap:balance}
@media(max-width:599px){.intro{max-width:calc(100% - 58px)}.intro h1{font-size:clamp(28px,9vw,38px)}}

/* T12 correção 1 (computador-3): o cabeçalho cresceu com a marca grande e o lema; o título "Cidade do Grupo" desce na mesma medida.
   Topo = faixa do cabeçalho (margem + marca com o GRUPO) + um respiro de 36 a 56 px (na T11 eram cerca de 45 px). Só no computador e no tablet; no celular a regra própria acima segue valendo. */
@media(min-width:601px){body #arrival #distant-copy,body.fachada-zona #arrival #distant-copy,body.telas-paradas #arrival #distant-copy{top:calc(clamp(26px,5.5vh,58px) + env(safe-area-inset-top) + clamp(60px,5vw,80px)*1.115 + clamp(36px,5vh,56px))}}