/* Viagem: cena, paisagem, etapas e fim da página (seção das empresas). Cores e movimento pelos tokens de style.css. */
#viagem{height:1430svh}.cloud-pending .status{display:flex}#palco{min-height:0}header{z-index:8}.intro{will-change:opacity}
#arrival{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;overflow:hidden;color:#fff}
#landscape,#descent{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%;will-change:transform}
#landscape{background:var(--night);will-change:auto}
#descent{z-index:2;pointer-events:none;will-change:opacity,transform;inset:-20%;width:140%;height:140%}
.arrival-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0309104d,transparent 25%,transparent 65%,#03091066)}
#arrival .arrival-shade{background:none}
#arrival .arrival-shade:before,#arrival .arrival-shade:after{content:"";position:absolute;inset:0;pointer-events:none}
#arrival .arrival-shade:before{background:linear-gradient(0deg,#030910b3,transparent 48%);opacity:var(--fachada-shade,1)}
#arrival .arrival-shade:after{background:radial-gradient(ellipse 46% 40% at 20% 76%,#030910a6,#0309105c 50%,transparent 100%);opacity:var(--fachada-scrim,0)}
@media(max-width:600px){#arrival .arrival-shade:after{background:linear-gradient(0deg,#030910b3,#0309108c 38%,transparent 62%)}}
#arrival-status{position:absolute;inset:0;z-index:7;background:var(--night);color:var(--texto-claro);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:24px;text-align:center}
#arrival-status[hidden]{display:none}
#arrival-retry{display:inline-flex;align-items:center;justify-content:center;min-height:var(--alvo);padding:0 18px;border:1px solid var(--controle-borda);border-radius:var(--raio-controle);background:rgb(27 30 34/.94);color:var(--texto-claro)}
#arrival-retry:hover{background:#2b3036}

/* A paisagem fica abaixo do mesmo canvas de nuvens durante toda a descida. */
#landscape-backplate{position:absolute;inset:0;visibility:hidden;z-index:0}#scene{z-index:1;pointer-events:none}.shade{z-index:2}#arrival{pointer-events:none}#arrival-status{pointer-events:auto}.cloud-bridge #descent{display:none}

/* Espera das nuvens (skill scroll-infinito): lugar único centro-baixo, com o contorno do texto; a barra conta os bytes das nuvens. Só existe com .cloud-pending. */
body.cloud-pending .status,.espera-cidade{left:50%;right:auto;bottom:calc(34px + env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:column;gap:8px;width:max-content;max-width:min(86vw,380px);text-align:center;color:#fff;text-shadow:0 0 14px #030910c4}
.espera-cidade{position:absolute;z-index:9;margin:0;font-size:13px}.espera-cidade[hidden]{display:none}
.espera{display:none;align-items:center;gap:10px}.cloud-wait .espera{display:flex}.espera-barra{display:block;width:120px;height:2px;background:#ffffff38;box-shadow:0 0 0 1px #06152166;overflow:hidden}.espera-barra i{display:block;height:100%;background:#fff;transform:scaleX(var(--espera,0));transform-origin:left}.espera-pct{font-size:12px;font-variant-numeric:tabular-nums;min-width:4ch;text-align:left}

/* T12 correção 1 (pedidos-do-dono-5): no celular a escala também vai para a borda direita, no meio da altura (antes ficava numa fileira sob o cabeçalho, no lugar da pílula que o dono mandou tirar). */
/* T12 (pedido 3 da D-C4V2-30): sem a pílula de bolinhas. As etapas viram uma escala fina, sem fundo e sem borda: um traço de 2 px por etapa,
   o da etapa atual com o dobro do comprimento. O nome aparece ao passar o mouse, no foco do teclado e por 2,4 s quando a etapa muda (journey.js, .et-recem).
   Computador e celular: borda direita, no meio da altura. Na história, no celular, ela dá a vez à
   constelação e volta quando recebe o foco do teclado. Alvo de 44 x 32 px (computador) e 40 x 44 px (celular), acima dos 24 px do WCAG 2.2 (2.5.8).
   O traço tem uma borda escura de 1 px para manter 3:1 sobre a Terra, as nuvens e a cidade (WCAG 1.4.11). */
#chapters{position:absolute;z-index:9;top:50%;left:auto;right:max(4px,env(safe-area-inset-right));transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transition:opacity var(--dur-curta)}
#chapters button,#chapters a{position:relative;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;width:40px;height:var(--alvo);padding:0 8px 0 0;border:0;border-radius:4px;background:none;color:var(--texto-claro);text-decoration:none}
#chapters button:hover,#chapters a:hover{background:none;text-decoration:none}
#chapters button:before,#chapters a:before{content:"";display:block;width:12px;height:2px;border:0;border-radius:1px;background:var(--texto-claro);opacity:.62;box-shadow:0 0 0 1px rgb(3 9 16/.55);transition:width var(--dur-curta),opacity var(--dur-curta)}
#chapters [aria-current="step"]:before{width:24px;opacity:1;background:var(--texto-claro);box-shadow:0 0 0 1px rgb(3 9 16/.55)}
#chapters button:hover:before,#chapters a:hover:before{opacity:1;background:var(--texto-claro)}
#chapters :focus-visible{outline:2px solid var(--controle-foco);outline-offset:-2px;box-shadow:0 0 0 4px var(--controle-foco-aro)}
.et-nome{position:absolute;left:auto;right:calc(100% + 2px);top:50%;transform:translateY(-50%);padding:7px 10px;border:0;border-radius:4px;background:rgb(3 9 16/.86);color:var(--texto-claro);font:400 13px/1 Synonym,system-ui,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-curta)}
#chapters button:hover .et-nome,#chapters a:hover .et-nome,#chapters :focus-visible .et-nome,#chapters .et-recem .et-nome{opacity:1}
@media(min-width:900px){#chapters{top:50%;left:auto;bottom:auto;right:max(12px,env(safe-area-inset-right));transform:translateY(-50%);flex-direction:column;align-items:flex-end}
 #chapters button,#chapters a{width:44px;height:32px;justify-content:flex-end;padding-right:8px;box-sizing:border-box}
 .et-nome{left:auto;right:calc(100% + 2px);top:50%;transform:translateY(-50%)}}
/* céu claro, nuvens e cidade (da parada 740 em diante): traço escuro com borda clara, sem placa (vale sobre o .ceu-zona do nomes.css) */
body.ceu-zona #chapters{background:none;box-shadow:none}
body.ceu-zona #chapters button:before,body.ceu-zona #chapters a:before,body.ceu-zona #chapters [aria-current="step"]:before{background:#10241f;box-shadow:0 0 0 1px rgb(255 255 255/.6)}
/* celular na história: a constelação ocupa esse lugar; a escala volta com o foco do teclado */
@media(max-width:899px){html.historia-ativa #chapters:not(:focus-within){opacity:0;pointer-events:none}}
.ceu-zona .progress{opacity:0}

#empresas{position:relative;min-height:100svh;background:var(--night);color:var(--ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.company-landscape{position:sticky;top:0;align-self:start;display:flex;align-items:center;min-height:100svh;padding:clamp(24px,4vw,56px) 0 clamp(24px,4vw,56px) clamp(24px,4vw,56px)}
.company-landscape__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--controle-borda);border-radius:var(--raio-conteiner);box-shadow:0 24px 60px #00000080}
.company-content{padding:clamp(40px,7vw,100px) clamp(28px,6vw,90px)}
.marca-grupo-fim{display:block;width:min(342px,70%);height:auto;margin:0 0 36px}
.company-content h2{font:300 clamp(36px,3.4vw,58px)/1.13 Zodiak,serif;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance}
.company-intro{margin:0 0 40px;max-width:38em;font-size:16px;line-height:1.55;color:var(--muted)}
.company-list{list-style:none;margin:0;padding:0}
.company-list li{border-top:1px solid #ffffff2e}.company-list li:last-child{border-bottom:1px solid #ffffff2e}
.company-list a{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:8px 28px;align-items:center;min-height:116px;padding:22px 0;text-decoration:none}
.empresa__logo{grid-row:1/3;display:flex;align-items:center;justify-content:flex-start;height:60px;padding:0}
.empresa__logo img{display:block;height:var(--h,30px);width:auto;max-width:100%;object-fit:contain;object-position:left center}
.empresa__texto{display:flex;flex-direction:column;gap:6px;min-width:0}
.empresa__papel{font:500 14px/1.2 Synonym,system-ui,sans-serif;letter-spacing:.04em;color:var(--grupo-verde)}
.empresa__fato{font-size:16px;line-height:1.45;color:var(--ink)}
.empresa__ir{grid-column:2;justify-self:start;display:inline-flex;align-items:center;font-size:15px;color:var(--ink)}.empresa__ir svg{margin-left:12px;flex:none}
.company-list a:hover .empresa__ir{text-decoration:underline;text-underline-offset:5px}.company-list a:hover svg{transform:translateX(4px)}
.company-list svg{transition:transform var(--dur-curta)}
.company-list a:focus-visible{outline:2px solid var(--controle-foco);outline-offset:4px;box-shadow:0 0 0 6px var(--controle-foco-aro)}
.company-links{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:36px}
.company-links a{font-size:15px}
.company-content .back{display:inline-flex;align-items:center;min-height:var(--alvo);margin-top:12px;font-size:15px;text-decoration:underline}
.company-content details{margin-top:28px;font-size:14px;line-height:1.6;color:var(--muted)}.company-content summary{cursor:pointer;min-height:var(--alvo);display:flex;align-items:center}.company-content details p{max-width:65ch;margin:0 0 12px}
.company-content details a{text-decoration:underline}
.company-content :focus-visible{outline:2px solid var(--controle-foco);outline-offset:4px;box-shadow:0 0 0 6px var(--controle-foco-aro)}
#empresas a{scroll-margin-top:30px}
.static #viagem{height:2880svh}.static .intro{display:none}
@media(max-width:900px){#empresas{display:block}.company-landscape{position:relative;min-height:0;padding:24px 20px 0}.company-landscape__img{border-radius:var(--raio-cartao)}.company-content{padding:32px 20px 48px}.company-content h2{font-size:35px}
 .company-list a{grid-template-columns:124px minmax(0,1fr);gap:8px 16px;padding:18px 0}.empresa__logo{width:124px;height:56px;padding:0}}
@media(max-width:480px){.company-list a{grid-template-columns:minmax(0,1fr);gap:10px}.empresa__logo{grid-row:auto;width:min(190px,100%);justify-content:flex-start;padding:0}.empresa__ir{grid-column:1}}

/* Movimento reduzido: tudo parado; as etapas e o convite saem, a cidade fica pronta. */
@media(prefers-reduced-motion:reduce){#viagem,.static #viagem{height:100svh}#descent,#chapters,.intro,.frase-bh{display:none}#arrival{opacity:1;visibility:visible}.company-list svg{transition:none}}

/* T12 correção 1: no celular o aviso de erro (e o "Tentar novamente") ficava embaixo dos botões do rodapé; sobe acima deles. */
@media(max-width:599px){body.cloud-pending .status{bottom:calc(max(7%,env(safe-area-inset-bottom)) + 64px)}}

/* T12 correção 1 (achado novo, dos quadros do clique real; já existia na T11): o botão "Tentar novamente" da chegada da cidade aparecia durante a carga normal,
   porque a regra por id (#arrival-retry, display:inline-flex) vence o atributo hidden. Ele só deve aparecer quando a cidade falha (journey.js tira o hidden). */
#arrival-retry[hidden]{display:none}

/* Acabamento T12 (computador-10): na cidade (y 1100 em diante, classe landscape-view) os traços das etapas caíam sobre a fachada da torre ONmnia,
   que fica colada na borda direita (x ~1410 a 1440 px). Sem voltar à pílula que o dono tirou: uma sombra difusa, sem borda e sem forma,
   escurece só o pedaço da cena atrás da escala, e os traços voltam a ser claros (como no céu escuro). O nome da etapa já tem placa própria. */
#chapters:before{content:"";position:absolute;z-index:-1;top:-28px;bottom:-28px;right:-14px;left:-26px;pointer-events:none;opacity:0;transition:opacity var(--dur-curta);
 background:radial-gradient(closest-side,rgb(3 9 16/.62),rgb(3 9 16/.46) 55%,rgb(3 9 16/0) 100%)}
body.landscape-view #chapters:before{opacity:1}
body.landscape-view #chapters button:before,body.landscape-view #chapters a:before,body.landscape-view #chapters [aria-current="step"]:before{background:var(--texto-claro);box-shadow:0 0 0 1px rgb(3 9 16/.55)}
@media(prefers-reduced-motion:reduce){#chapters:before{transition:none}}
/* T13 correção 1 (navegacao-volta, achado 2): no celular (até 899 px, a mesma faixa em que a escala tem alvos de 40 x 44 px), na cidade
   (body.fachada-zona: a cidade chegou e as logos e portas dos prédios entram), a área de toque das etapas cobria a ponta da logo da VIDA
   no telhado (de x 346 a 378 em 390 x 844). Ali a escala dá a vez aos links dos prédios: some e não recebe toque, em qualquer
   enquadramento da vista final; volta com o foco do teclado, como na história. Ao subir para as nuvens, ela volta a aparecer. */
@media(max-width:899px){body.fachada-zona #chapters:not(:focus-within){opacity:0;pointer-events:none}}