/* Abertura (T12, pedido 8). A coluna da marca fica à esquerda, na margem do título da primeira cena (9%; 29 px no celular), sobre o
   lado escuro da Terra; o limbo embaixo fica onde a Terra da primeira cena vai aparecer e é a barra de progresso (CG-02: só o horizonte é simétrico).
   Com a animação (abertura-campo.js), o canvas .opening-campo pinta o fundo, a Terra escura, as amostras e a marca; o #opening fica transparente para a lente revelar a cena. */
#opening{display:none;position:fixed;inset:0;z-index:100;background:var(--grupo-noite);color:var(--texto-claro);overflow:hidden;font-family:Synonym,Arial,sans-serif;transition:opacity .65s ease;--limbo-y:15.9vh;--limbo-r:222vh}
.opening-active{overflow:hidden}.opening-active #opening{display:block}#opening.leaving{opacity:0;pointer-events:none}
/* Terra escura sem animação: a mesma geometria que o canvas desenha (o canvas a cobre quando começa a pintar) */
.opening-horizon{position:absolute;left:50%;top:var(--limbo-y);width:calc(var(--limbo-r)*2);height:calc(var(--limbo-r)*2);margin-left:calc(var(--limbo-r)*-1);border-radius:50%;
 background:radial-gradient(circle closest-side,#040b13 90%,#06111c 98.6%,#0b1a28 100%);box-shadow:0 -1px 0 #96d2e866,0 -6px 18px -8px #96d2e833;pointer-events:none}
#opening.com-erro .opening-horizon{box-shadow:0 -1px 0 #e8b48a99}
.opening-campo{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
#opening.campo-vivo{background:transparent}#opening.campo-vivo .opening-horizon{display:none}
/* o número do progresso fica em cima do limbo, no meio */
.opening-pct{position:absolute;z-index:1;left:50%;top:calc(var(--limbo-y) + 14px);transform:translateX(-50%);margin:0;font:300 22px/1 Zodiak,Georgia,serif;color:var(--texto-claro);font-variant-numeric:tabular-nums;letter-spacing:.01em;transition:opacity .3s ease}
.opening-pct small{font:400 12px/1 Synonym,Arial,sans-serif;color:#b9cedb;margin-left:3px;vertical-align:.45em}
.opening-content{position:absolute;z-index:1;left:9%;top:36%;width:min(580px,82vw);padding:0;text-align:left}
#opening .opening-brand{margin:0 0 26px;width:clamp(280px,29vw,420px);padding:0;line-height:0}.opening-brand .marca-grupo{display:block;width:100%;height:auto;transition:opacity .3s ease}
.campo-previsto .opening-brand img{opacity:0}
#opening .opening-tagline{font:300 clamp(19px,1.65vw,24px)/1.4 Zodiak,Georgia,serif;margin:0 0 28px;max-width:20em;text-wrap:balance;transition:opacity .3s ease}
.opening-status{font-size:14px;color:#b9cedb;margin:0 0 2px;max-width:30em;line-height:1.5;min-height:21px}
.opening-actions{display:flex;justify-content:flex-start;align-items:center;gap:4px 18px;flex-wrap:wrap}
#opening button,#opening a{font:400 14px/1.5 Synonym,Arial,sans-serif;color:#cbdce5;background:transparent;border:0;border-bottom:1px solid #7f9dad;padding:10px 3px;cursor:pointer;text-decoration:none}
#opening a.destaque{color:#fff;border-bottom-color:#fff}
#opening [hidden]{display:none}#opening :focus-visible{outline:2px solid #fff;outline-offset:4px}
.opening-content>*{transition:opacity .3s ease}
/* saída pela lente: o texto e o número saem primeiro; o canvas acende o "O", clica e abre o furo */
#opening.campo-vivo.leaving{opacity:1}
#opening.lente-aberta{display:block;pointer-events:none}
#opening.leaving .opening-pct,#opening.leaving .opening-content>:not(.opening-brand){opacity:0}
/* durante o voo, a marca do cabeçalho espera a da abertura chegar ao mesmo pixel (a do canvas a substitui) */
html.ab-voo .gm-marca img[src*="onmnia"]{opacity:0}
@media(max-width:599px){
 .opening-content{left:29px;right:29px;width:auto;top:31%}
 #opening .opening-brand{width:min(300px,100%);margin-bottom:22px}
 #opening .opening-tagline{font-size:19px;margin-bottom:22px}
}
@media(max-height:560px) and (min-width:600px){.opening-content{top:24%}#opening .opening-brand{width:clamp(240px,24vw,340px);margin-bottom:16px}#opening .opening-tagline{margin-bottom:14px}}
.light-mode #viagem,.light-mode.static #viagem{height:100svh}.light-mode #descent,.light-mode #chapters,.light-mode .intro,.light-mode #instruction{display:none}.light-mode #landscape{transition:none}
@media(prefers-reduced-motion:reduce){#opening,.opening-brand img,.opening-tagline,.opening-pct,.opening-content>*{transition:none}}
#opening:focus,#inicio[tabindex="-1"]:focus,.quadro-fixo:focus{outline:none}#opening button,#opening a{min-height:var(--alvo);box-sizing:border-box;display:inline-flex;align-items:center}.light-mode .status{display:none}
@media(prefers-reduced-motion:reduce){.static .status{display:none}}
@media(forced-colors:active){.opening-horizon{box-shadow:none;border-top:1px solid CanvasText}}

/* Quadro fixo de abertura: a mesma frase e a mesma Terra da primeira tela, sem movimento. Só aparece na versão leve, no movimento reduzido, na falha da cena e sem JavaScript. */
.quadro-fixo{display:none;position:relative;min-height:100svh;overflow:hidden;background:var(--night)}
.quadro-fixo__fundo,.quadro-fixo__fundo img{position:absolute;inset:0;width:100%;height:100%}.quadro-fixo__fundo img{object-fit:cover}
.quadro-fixo:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#030910b3,#03091033 40%,#030910cc)}
.quadro-fixo__texto{position:absolute;left:9%;right:9%;bottom:14%;max-width:46em}
.quadro-fixo__texto h1{margin:0}.quadro-fixo__texto p{margin:20px 0 0;font-size:16px;line-height:1.5;color:var(--texto-claro)}.quadro-fixo__texto .quadro-fixo__sede{color:var(--muted)}
.aviso-leve{margin:0 0 20px!important;padding:10px 16px;border:1px solid var(--controle-borda);border-radius:var(--raio-cartao);background:rgb(27 30 34/.94);font-size:14px!important;max-width:34em}
html.light-mode .quadro-fixo,body.static .quadro-fixo{display:block}
@media(prefers-reduced-motion:reduce){.quadro-fixo{display:block}}
@media(scripting:none){.quadro-fixo{display:block}.intro{display:none}}
@media(max-width:599px){.quadro-fixo__texto{left:26px;right:26px;bottom:12%}.quadro-fixo__texto h1{font-size:40px}}
/* T13 (P12): "Voltar à cidade" vai direto à cidade. Com html.volta-cidade (index.html?parada=cidade, ou a volta de uma empresa pelo histórico)
   a abertura é só a tela escura da noite: sem a Terra (limbo), sem o número do progresso, sem a marca, sem a frase e sem a animação.
   Ela sai num esmaecer curto (350 ms, opening.js) quando a cidade fica pronta. Se a carga demora, aparece só uma linha de estado, discreta;
   na falha, o aviso e os botões de sempre. */
html.volta-cidade #opening{transition-duration:.35s}
html.volta-cidade .opening-horizon,html.volta-cidade .opening-pct,html.volta-cidade #opening .opening-brand,html.volta-cidade #opening .opening-tagline,html.volta-cidade .opening-actions{display:none}
html.volta-cidade .opening-content{left:0;right:0;top:auto;bottom:max(14%,calc(env(safe-area-inset-bottom) + 56px));width:auto;text-align:center}
html.volta-cidade .opening-status{margin:0 auto;opacity:0;animation:volta-estado .4s ease 1.2s forwards}
html.volta-cidade #opening.com-erro .opening-status,html.volta-cidade #opening.rede-lenta .opening-status{animation:none;opacity:1}
html.volta-cidade #opening.com-erro .opening-actions,html.volta-cidade #opening.rede-lenta .opening-actions{display:flex;justify-content:center}
@keyframes volta-estado{to{opacity:1}}
/* na volta a cidade pode ficar pronta antes da Terra: o aviso "Carregando a viagem" do rodapé (que some com a Terra pronta, .ready) não aparece sobre a cidade;
   o preparo e a falha das nuvens (.cloud-pending) e a falha da cena (.static) continuam usando o mesmo lugar */
html.volta-cidade body:not(.ready):not(.cloud-pending):not(.static) .status{display:none}
/* T13 correção 1 (navegacao-volta, achado 7): na volta à cidade, no lugar da tela preta, a capa mostra a VISTA FINAL PARADA: a mesma imagem
   da cidade (a LONGE2), no mesmo enquadramento que a cena vai ter, desde o primeiro quadro; a cena viva assume por cima no esmaecer da abertura.
   Camadas, de baixo para cima: um degradê com as cores médias da imagem (8 faixas, ia/t13/correcao1/navegacao-volta/MINIATURA.json), que pinta
   antes de qualquer imagem; ::before = a miniatura da imagem (86 x 48 px, 888 bytes, aqui mesmo) centrada ou, com números (vv-pos), no lugar
   exato; ::after = a imagem nítida (--vv-img) com a miniatura por baixo, no enquadramento exato (vv-exata). Os números vêm do script do <head>
   (guardados na aba por volta.js, por tamanho de janela e empresa) ou de volta.js quando a cidade mede a vista (página aberta direto).
   Onde a barra de rolagem ocupa espaço (Windows, por exemplo), a faixa dela fica reservada desde o começo (vv-calha, scrollbar-gutter): a
   largura da cena é a mesma na capa, na cena viva e depois que a abertura sai (sem isso a cidade andava ~8 px quando a barra aparecia). */
html.volta-cidade.vv-calha{scrollbar-gutter:stable}
html.volta-cidade #opening{background:linear-gradient(180deg,#2d81d4 6%,#7bade8 19%,#707d99 31%,#778284 44%,#767b6f 56%,#898066 69%,#a49464 81%,#908938 94%)}
html.volta-cidade #opening:before,html.volta-cidade #opening:after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat}
html.volta-cidade #opening:before{background-image:url("data:image/webp;base64,UklGRnADAABXRUJQVlA4IGQDAACwEACdASpWADAAPr1KnUqnJCKhsBquMOAXiWoAqDeOglUk7Or1TFLAjue9Zt3kWOIAVuVxW84U3mF8u2NdTOZWjcEpGUsg8a5nW0dFUiX87qC1txWAJbpd9VufxrAEmvZAOYOPHhyVhZA+oEj4uZQFo5Nqf0Y0lHYfxi9+4a2JPHbq9SAbhDIUoCRW335wAP7NS5vEGlZCgyHbhOxlFFF0Xu1qPbA2jBXYGBbAYWmHpf4rDY4Lf/nGs/hG1yXjd+/+Yh/6Oq/DshzL89CDu2vQsKsq9XE3Ne0jjiI9fIj9zf0bwO1F51gpkBvciIJhCVh4Fj4cZ04dY9f+H5BaXIZ1r6ltutb5GWImTagDWbeovCdPZfyzEkZnIq6M8eM1GaUrp1BuHUNHZR9hXeNijDdiziNbJmTKOzmrpbanRIJPpQ7wIP/GaeAo26gRPOOqrK8nNkxZRYcrR2+yb355DxI0YQ1JciNZrG2HAbS0zh/CLZE617Ww9ODcoDwMQpxLjX0wcDbnyA492Q2Lh4lIjWt8JlAhkAN5WX5KhoRfIO/LLFncYWn/QlulfVQuOzDtT9aQ5dsiTjM6njMhx06rIymeXRkbRb/V32rPmzn9ehh2jICdH8XE1sG+Kz6B3btNDkhEk55hNY0iNyBATs/JLT/L1FVAiLg/C757bFeHAWOB8YwKKoVb2puKvCVJExev7eWuufqMeAusLzHte4HbFpv4NdS+Ioh2fXV1IPtzGbEHPTo0J3ivPQkKFdrEPSCvwpQLp4WtM78blri/uWBLWsx3Asl187OVpPeUPrMyQr4lR7s/ytGKt30LV/aVVt3UFpGzzO9kawrngit+K1WFHjZHARw6qxeOhNJg/sOHFXW/Oz1wglQHSSZ6dMhwGoSZBcJ7+Y8kA0Vrk7RAYwC3dgH5ALNgIO+D+QWXmObMyoNZlMK7Iwdma1GsPUuIqiksr9vMk0co1yIMAlLrzW1bvYjb9Y1qjUuYedTE7cuTrzaEIRBLyPNcpssPWmrrSu1l4MWXn19xtP3kzKhULTZ88+vQIL9PUEQkD7Ey2KuDgQMErdjP7Z5DkLi4q+YgSPoOVZ4x7WTkHpsG0A2Eb88y9eOtvVgfBhPmO77scNqOZE8WjctmZKeigsqN7JRJ3txUf5hoAAAA");background-size:cover;background-position:50% 50%}
html.volta-cidade.vv-pos #opening:before{background-size:var(--vv-w) var(--vv-h);background-position:var(--vv-x) var(--vv-y)}
html.volta-cidade #opening:after{opacity:0;transition:opacity .2s ease}
html.volta-cidade.vv-exata #opening:after{opacity:1;background-image:var(--vv-img),url("data:image/webp;base64,UklGRnADAABXRUJQVlA4IGQDAACwEACdASpWADAAPr1KnUqnJCKhsBquMOAXiWoAqDeOglUk7Or1TFLAjue9Zt3kWOIAVuVxW84U3mF8u2NdTOZWjcEpGUsg8a5nW0dFUiX87qC1txWAJbpd9VufxrAEmvZAOYOPHhyVhZA+oEj4uZQFo5Nqf0Y0lHYfxi9+4a2JPHbq9SAbhDIUoCRW335wAP7NS5vEGlZCgyHbhOxlFFF0Xu1qPbA2jBXYGBbAYWmHpf4rDY4Lf/nGs/hG1yXjd+/+Yh/6Oq/DshzL89CDu2vQsKsq9XE3Ne0jjiI9fIj9zf0bwO1F51gpkBvciIJhCVh4Fj4cZ04dY9f+H5BaXIZ1r6ltutb5GWImTagDWbeovCdPZfyzEkZnIq6M8eM1GaUrp1BuHUNHZR9hXeNijDdiziNbJmTKOzmrpbanRIJPpQ7wIP/GaeAo26gRPOOqrK8nNkxZRYcrR2+yb355DxI0YQ1JciNZrG2HAbS0zh/CLZE617Ww9ODcoDwMQpxLjX0wcDbnyA492Q2Lh4lIjWt8JlAhkAN5WX5KhoRfIO/LLFncYWn/QlulfVQuOzDtT9aQ5dsiTjM6njMhx06rIymeXRkbRb/V32rPmzn9ehh2jICdH8XE1sG+Kz6B3btNDkhEk55hNY0iNyBATs/JLT/L1FVAiLg/C757bFeHAWOB8YwKKoVb2puKvCVJExev7eWuufqMeAusLzHte4HbFpv4NdS+Ioh2fXV1IPtzGbEHPTo0J3ivPQkKFdrEPSCvwpQLp4WtM78blri/uWBLWsx3Asl187OVpPeUPrMyQr4lR7s/ytGKt30LV/aVVt3UFpGzzO9kawrngit+K1WFHjZHARw6qxeOhNJg/sOHFXW/Oz1wglQHSSZ6dMhwGoSZBcJ7+Y8kA0Vrk7RAYwC3dgH5ALNgIO+D+QWXmObMyoNZlMK7Iwdma1GsPUuIqiksr9vMk0co1yIMAlLrzW1bvYjb9Y1qjUuYedTE7cuTrzaEIRBLyPNcpssPWmrrSu1l4MWXn19xtP3kzKhULTZ88+vQIL9PUEQkD7Ey2KuDgQMErdjP7Z5DkLi4q+YgSPoOVZ4x7WTkHpsG0A2Eb88y9eOtvVgfBhPmO77scNqOZE8WjctmZKeigsqN7JRJ3txUf5hoAAAA");background-size:var(--vv-w) var(--vv-h);background-position:var(--vv-x) var(--vv-y)}
html.volta-cidade.vv-cedo #opening:after{transition:none}
/* vv-capa: a vista final parada já desenhada do tamanho da tela (volta.js, JPEG na aba) por cima, nítida desde o 1º quadro */
html.volta-cidade.vv-capa #opening:after{background-image:var(--vv-capa),url("data:image/webp;base64,UklGRnADAABXRUJQVlA4IGQDAACwEACdASpWADAAPr1KnUqnJCKhsBquMOAXiWoAqDeOglUk7Or1TFLAjue9Zt3kWOIAVuVxW84U3mF8u2NdTOZWjcEpGUsg8a5nW0dFUiX87qC1txWAJbpd9VufxrAEmvZAOYOPHhyVhZA+oEj4uZQFo5Nqf0Y0lHYfxi9+4a2JPHbq9SAbhDIUoCRW335wAP7NS5vEGlZCgyHbhOxlFFF0Xu1qPbA2jBXYGBbAYWmHpf4rDY4Lf/nGs/hG1yXjd+/+Yh/6Oq/DshzL89CDu2vQsKsq9XE3Ne0jjiI9fIj9zf0bwO1F51gpkBvciIJhCVh4Fj4cZ04dY9f+H5BaXIZ1r6ltutb5GWImTagDWbeovCdPZfyzEkZnIq6M8eM1GaUrp1BuHUNHZR9hXeNijDdiziNbJmTKOzmrpbanRIJPpQ7wIP/GaeAo26gRPOOqrK8nNkxZRYcrR2+yb355DxI0YQ1JciNZrG2HAbS0zh/CLZE617Ww9ODcoDwMQpxLjX0wcDbnyA492Q2Lh4lIjWt8JlAhkAN5WX5KhoRfIO/LLFncYWn/QlulfVQuOzDtT9aQ5dsiTjM6njMhx06rIymeXRkbRb/V32rPmzn9ehh2jICdH8XE1sG+Kz6B3btNDkhEk55hNY0iNyBATs/JLT/L1FVAiLg/C757bFeHAWOB8YwKKoVb2puKvCVJExev7eWuufqMeAusLzHte4HbFpv4NdS+Ioh2fXV1IPtzGbEHPTo0J3ivPQkKFdrEPSCvwpQLp4WtM78blri/uWBLWsx3Asl187OVpPeUPrMyQr4lR7s/ytGKt30LV/aVVt3UFpGzzO9kawrngit+K1WFHjZHARw6qxeOhNJg/sOHFXW/Oz1wglQHSSZ6dMhwGoSZBcJ7+Y8kA0Vrk7RAYwC3dgH5ALNgIO+D+QWXmObMyoNZlMK7Iwdma1GsPUuIqiksr9vMk0co1yIMAlLrzW1bvYjb9Y1qjUuYedTE7cuTrzaEIRBLyPNcpssPWmrrSu1l4MWXn19xtP3kzKhULTZ88+vQIL9PUEQkD7Ey2KuDgQMErdjP7Z5DkLi4q+YgSPoOVZ4x7WTkHpsG0A2Eb88y9eOtvVgfBhPmO77scNqOZE8WjctmZKeigsqN7JRJ3txUf5hoAAAA");background-size:100% 100%,var(--vv-w) var(--vv-h);background-position:0 0,var(--vv-x) var(--vv-y)}
/* página guardada pelo navegador (bfcache): na cidade, volta.js deixa pronta e invisível a vista final parada no enquadramento da volta, com
   as imagens já carregadas; ao sair ela só acende (.ligada), sem pedido novo (um pedido em aberto tira a página do bfcache). A página
   guardada volta mostrando a imagem como a capa até a recarga que scene-atmosfera.js faz (sem a tinta escura nem a cena viva aparecendo
   e sumindo antes da capa). Se a recarga não vier em 0,6 s, volta.js apaga a camada. */
.vv-restaura{position:fixed;inset:0;z-index:310;pointer-events:none;opacity:0;background-repeat:no-repeat;background-image:var(--vr-capa,none),var(--vr-img,none),
 linear-gradient(180deg,#2d81d4 6%,#7bade8 19%,#707d99 31%,#778284 44%,#767b6f 56%,#898066 69%,#a49464 81%,#908938 94%);
 background-size:100% 100%,var(--vr-w,100%) var(--vr-h,100%),100% 100%;background-position:0 0,var(--vr-x,0) var(--vr-y,0),0 0}
.vv-restaura.ligada{opacity:1}
html.vv-guardada #experience,html.vv-guardada #passagem{visibility:hidden}
/* na volta a página pousa na cidade enquanto as nuvens ainda se preparam atrás (scene-atmosfera.js): o aviso delas, com a barra e o
   número ("Carregando as nuvens" e 0% a 100%), aparecia por cima da cidade (medido: "100%" no meio do esmaecer da capa, 390 x 844).
   Na cidade (vv-na-cidade, volta.js: y da viagem a partir de 1150, acima da parede das nuvens em 1130) ele não aparece; quem sobe
   até a parede volta a ver o aviso. */
html.volta-cidade.vv-na-cidade body.cloud-pending .status{display:none}
/* o estado da carga (só depois de 1,2 s) e o aviso de falha ficam legíveis sobre a imagem clara */
html.volta-cidade .opening-status{color:#fff;text-shadow:0 0 14px #030910c4,0 0 2px #030910}
html.volta-cidade #opening.com-erro .opening-content,html.volta-cidade #opening.rede-lenta .opening-content{left:50%;right:auto;width:min(560px,calc(100% - 32px));transform:translateX(-50%);padding:16px 20px;border-radius:12px;background:rgb(3 9 16/.86)}
@media(prefers-reduced-motion:reduce){html.volta-cidade #opening:after{transition:none}}