@font-face{font-family:"Synonym GM";src:url(assets/synonym-500.woff2) format('woff2');font-style:normal;font-weight:500;font-display:swap}
/* T12 (D-C4V2-30, pedidos 1 e 2): a marca do cabecalho e "GRUPO" + a logo ONmnia original com o lema. --gm-logo = altura da logo (sem o GRUPO). */
.gm,.topo-avulso{--gm-logo:clamp(60px,5vw,80px)}
.gm{--gm-pilula:rgb(35 37 40/.96);--gm-pilula-cheia:rgb(35 37 40/.985);--gm-tinta:#f2f6f6;--gm-noite:#030910;--gm-anel:#0f2f2a;
 --gm-lado:max(5.5vw,calc(env(safe-area-inset-left) + 16px));--gm-lado-d:max(5.5vw,calc(env(safe-area-inset-right) + 16px));
 font:400 14px/1 Synonym,system-ui,sans-serif;color:var(--gm-tinta)}
.gm-barra{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}

/* GRUPO: mesma voz do lema da logo (caixa alta espacada, branco). Maiuscula = 11,5% da altura da logo (o lema tem 9,1%);
   alinhado a esquerda do O; a linha de base fica 12,5% acima do topo do "ON" (o espaco vazio da propria logo sobre o ON).
   Synonym 500 tem maiuscula de 0,70em e, com line-height 1, a maiuscula comeca 0,175em abaixo do topo da caixa: daí os numeros. */
.gm-marca{position:relative;display:inline-flex;flex-direction:column;justify-content:flex-end;flex:none;min-height:44px;margin-right:auto;padding-top:calc(var(--gm-logo)*.115);border-radius:6px;color:#fff;text-decoration:none}
.gm-marca img{display:block;width:auto;height:var(--gm-logo)}
.gm-grupo{--gm-f:calc(var(--gm-logo)*.16429);position:absolute;top:calc(var(--gm-f)*-.175);left:calc(var(--gm-f)*-.065);font-family:"Synonym GM",Synonym,system-ui,sans-serif;font-weight:500;font-size:var(--gm-f);line-height:1;letter-spacing:.36em;text-transform:uppercase;white-space:nowrap;color:#fff;-webkit-text-stroke:calc(var(--gm-f)*.035) #fff;pointer-events:none;user-select:none}

/* menu */
.gm-nav{position:relative;display:flex;align-items:center}
.gm-abrir,.gm-abrir[hidden]{display:none}
.gm-painel{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--gm-pilula);box-shadow:0 1px 10px rgb(6 21 33/.22)}
.gm-empresas,.gm-links{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.gm-links{margin-left:2px;padding-left:6px;border-left:1px solid rgb(242 246 246/.24)}
.gm-empresas a,.gm-links a,.gm-voltar{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;color:var(--gm-tinta);text-decoration:none;white-space:nowrap;letter-spacing:.03em;transition:background-color .2s}
.gm-empresas img{display:block;width:auto;height:24px}
.gm-e-gt img{height:26px}.gm-e-vida img{height:25px}.gm-e-renylab img{height:28px}.gm-e-quokka img{height:26px}.gm-e-imaes img{height:26px}
.gm-empresas a:hover,.gm-links a:hover,.gm-voltar:hover{background:rgb(255 255 255/.13);text-decoration:none}
.gm-empresas a[aria-current]{background:rgb(255 255 255/.15);box-shadow:inset 0 0 0 2px var(--gm-tinta)}
.gm-empresas a[aria-current]:before{content:"";flex:none;position:absolute;left:50%;bottom:3px;width:6px;height:6px;margin:0;border-radius:50%;background:var(--gm-tinta);transform:translateX(-50%)}
.gm-links a[aria-current]{background:rgb(255 255 255/.15)}
/* GT (acabamento T12, achado 1 e nota do Victor de 13/10 06:20, "só pedi a logo original azul"): sem placa, sem campo, sem raio. O menu usa a aplicação 03 do manual para fundo escuro, sem o retângulo azul-marinho (gt-escuro.svg: símbolo #54C0E8 e nome branco), com a altura das outras logos (26 px). A pílula, o foco e a página atual são os mesmos das outras empresas. */
.gm-voltar{background:var(--gm-pilula);padding:0 16px 0 13px}
.gm-voltar svg,.gm-abrir svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* foco visivel de dois tons: anel branco e anel escuro por fora (le na pilula, na nuvem branca e no gramado) */
.gm a:focus-visible,.gm button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--gm-anel)}
.gm-marca:focus-visible{outline-offset:4px;box-shadow:0 0 0 7px var(--gm-anel)}

.gm--viagem{position:absolute;z-index:10;top:calc(clamp(26px,5.5vh,58px) + env(safe-area-inset-top));left:var(--gm-lado);right:var(--gm-lado-d);display:block}
.gm--viagem.aberto{z-index:12}
/* leitura da marca sobre nuvem e ceu claros: degrade de ponta a ponta no alto da tela, sem halo em volta da marca (CG-27) e sem contorno colado na letra (pedido 5) */
.gm--viagem:before{content:"";position:absolute;z-index:-1;pointer-events:none;--gm-topo:calc(clamp(26px,5.5vh,58px) + env(safe-area-inset-top));top:calc(var(--gm-topo)*-1);left:calc(var(--gm-lado)*-1);right:calc(var(--gm-lado-d)*-1);height:calc(var(--gm-topo) + var(--gm-logo)*1.115 + 40px);background:linear-gradient(180deg,rgb(3 9 16/.5),rgb(3 9 16/.45) 40%,rgb(3 9 16/.3) 68%,rgb(3 9 16/.1) 88%,rgb(3 9 16/0))}
.static .gm--viagem{position:absolute}

.gm-faixa{background:var(--gm-noite);border-bottom:1px solid rgb(242 246 246/.1);padding-top:env(safe-area-inset-top)}
.gm-faixa{--gm-logo:60px}
.gm-faixa .gm-marca img{filter:none}
.gm-faixa .gm-grupo{text-shadow:none}
.gm-faixa .gm-barra{min-height:92px;padding-block:12px}
.gm--empresa{position:fixed;inset:0 0 auto;z-index:40}
.gm--empresa .gm-faixa{background:#030910}
.gm--empresa .gm-barra{padding-inline:max(clamp(20px,6vw,96px),calc(env(safe-area-inset-left) + 16px)) max(clamp(20px,6vw,96px),calc(env(safe-area-inset-right) + 16px))}
html:has(.gm--empresa){scroll-padding-top:112px}
.gm--pagina .gm-barra,.gm--creditos .gm-barra{width:min(100% - 2*clamp(1rem,4vw,2.5rem),72rem);margin-inline:auto} /* Fechamento da T13, correção (achado 6): 72rem, a largura da coluna do conteúdo (antes 74rem) */
.gm--pagina .gm-faixa .gm-painel,.gm--creditos .gm-faixa .gm-painel{box-shadow:none}
/* creditos: a faixa vai de ponta a ponta e encosta no alto. T12 acabamento: a margem de -10vh (de quando o corpo tinha margem de 10vh) escondia a faixa acima da tela; o corpo hoje tem margem 0 */
.gm--creditos{margin:0;font-size:14px;line-height:1}
.gm--creditos .gm-faixa a{color:var(--gm-tinta)}

@media(max-width:1179px){
 .gm-abrir{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 18px;border:0;border-radius:999px;background:var(--gm-pilula);color:var(--gm-tinta);font:inherit;letter-spacing:.03em;cursor:pointer}
 .gm-abrir[hidden]{display:none}
 .gm-abrir svg{transition:transform .2s}
 .gm.aberto .gm-abrir svg{transform:rotate(180deg)}
 .gm-painel{flex-wrap:wrap;border-radius:18px}
 .gm-js .gm-painel{position:absolute;right:0;top:calc(100% + 8px);display:none;flex-direction:column;align-items:stretch;gap:2px;width:max-content;min-width:min(272px,calc(100vw - 32px));padding:8px;border-radius:16px;background:var(--gm-pilula-cheia);box-shadow:0 12px 32px rgb(3 9 16/.5)}
 .gm-js .gm.aberto .gm-painel{display:flex}
 .gm-js .gm-empresas,.gm-js .gm-links{flex-direction:column;align-items:stretch}
 .gm-js .gm-empresas a,.gm-js .gm-links a{justify-content:flex-start;min-height:52px;padding:0 16px;border-radius:10px}
 .gm-js .gm-links{margin:6px 0 0;padding:6px 0 0;border-left:0;border-top:1px solid rgb(242 246 246/.2)}
 .gm-js .gm-empresas a[aria-current]:before{position:static;transform:none;order:2;margin-left:auto}
 .gm-voltar span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .gm-voltar{padding:0;width:44px}
}
@media(min-width:1180px) and (max-width:1359px){.gm-voltar span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.gm-voltar{padding:0;width:44px}}
@media(max-width:599px){
 .gm--viagem{--gm-lado:max(22px,calc(env(safe-area-inset-left) + 16px));--gm-lado-d:max(22px,calc(env(safe-area-inset-right) + 16px));top:calc(28px + env(safe-area-inset-top))}
 .gm--viagem:before{--gm-topo:calc(28px + env(safe-area-inset-top))}
 .gm,.topo-avulso{--gm-logo:58px}
 .gm-faixa{--gm-logo:56px}
 .gm-faixa .gm-barra{min-height:84px}
}
@media(max-width:374px){.gm,.topo-avulso{--gm-logo:52px}.gm-faixa{--gm-logo:50px}}
/* 320 a 359 px (reflow WCAG 1.4.10): a marca e o botao Empresas cabem na mesma linha */
@media(max-width:359px){.gm,.topo-avulso{--gm-logo:46px}.gm-faixa{--gm-logo:44px}.gm--viagem{--gm-lado:16px;--gm-lado-d:16px}.gm-abrir{padding:0 10px 0 14px}.gm--empresa .gm-barra,.gm--pagina .gm-barra,.gm--creditos .gm-barra{gap:8px}}
@media(prefers-reduced-motion:reduce){.gm *{transition:none!important}}
@media(forced-colors:active){.gm-painel,.gm-abrir,.gm-voltar{border:1px solid ButtonText}.gm-marca img{filter:none}.gm-grupo{-webkit-text-stroke:0;text-shadow:none}.gm--viagem:before{display:none}.gm-e-gt img{forced-color-adjust:none}}
@media print{.gm{display:none}}

/* páginas do Grupo: no celular e no tablet o cabeçalho é um só; os links da página e o tema ficam dentro do menu "Empresas" */
.gm-links--pagina{display:none}
.gm-links button{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--gm-tinta);font:inherit;letter-spacing:.03em;cursor:pointer}
.gm-links button:hover{background:rgb(255 255 255/.13)}
.gm-links button:focus-visible{outline:2px solid var(--gm-tinta);outline-offset:2px}
.gm-links button[aria-pressed="true"]::after{content:"";width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--gm-tinta)}
@media(max-width:1179px){.gm-js .gm-links--pagina{display:flex}.gm-js .gm--pagina .topo__barra{display:none}.gm-js .gm-links button{justify-content:flex-start;min-height:52px;padding:0 16px;border-radius:10px}}

/* 404: cabecalho avulso com o mesmo conjunto GRUPO + logo (a creditos.css fixava a logo em 30 px) */
.topo-avulso{--gm-logo:56px}
.topo-avulso .gm-marca img{height:var(--gm-logo);filter:none}
.topo-avulso .gm-grupo{text-shadow:none}
.topo-avulso .barra{min-height:88px}
@media(max-width:599px){.topo-avulso{--gm-logo:52px}}@media(max-width:369px){.topo-avulso{--gm-logo:44px}}

/* T12 (integração): com a marca grande e o lema, o botão "Voltar à viagem" não cabe na faixa das páginas institucionais e das empresas em celular estreito (estourava 5 px a 390 e 16 px a 360 nas institucionais; nas empresas ficava cortado para fora da tela).
   A própria marca já leva à viagem (aria-label "Grupo ONmnia: voltar ao início"), então o atalho em ícone sai nessas larguras. */
@media(max-width:479px){.gm--pagina .gm-voltar,.gm--empresa .gm-voltar{display:none}}
@media(max-width:369px){.topo-avulso .barra{flex-wrap:wrap;row-gap:4px}}

/* T12 correção 1 (computador-5): no céu claro (nuvens cheias, classe light-sky) o degradê escuro do alto some. A marca continua branca: o próprio alto da cena de nuvens é cinza
   (luminância 78 de 255 a 1440 px de largura em y 740, medida no gate), onde o branco dá mais de 7:1; a versão escura da marca daria 1,6:1 ali e foi descartada. */
/* Acabamento T12 (decisão b): o degradê escuro do alto sai junto com a fusão da marca (--gm-claro, de nomes.js) e não de uma vez em y 739,5, quando a classe light-sky liga; assim não resta faixa cinza em y 700 a 720. */
.gm--viagem:before{opacity:var(--gm-sombra,1)} /* correção final: --gm-sombra (nomes.js) apaga o degradê em y 678 a 686, antes da troca da marca; antes ele seguia --gm-claro e o alto ficava mais escuro que o meio em y 690 a 700 */
.light-sky .gm--viagem:before{opacity:0}

/* T12 correção 1 (celular-2): nas páginas das empresas, até 479 px o atalho em ícone sai da faixa; "Voltar à cidade" passa a ficar dentro do menu "Empresas" */
.gm-links .gm-links__cidade{display:none}
@media(max-width:479px){.gm--empresa .gm-links .gm-links__cidade{display:list-item}.gm-links__cidade a{gap:10px}.gm-links__cidade svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}}

/* T12 correção 1 (celular-4): o lema SAÚDE | INOVAÇÃO | CONEXÃO tem 9,1% da altura da logo; a 360 e 390 px a logo tinha 50 e 56 px (lema de 4,6 e 5,1 px).
   Aqui a logo ocupa tudo o que sobra ao lado do botão "Empresas" (que ficou mais compacto): 63 px a 390, 56 a 360, no máximo 72. Mais que isso o botão não cabe na mesma linha. */
@media(max-width:599px){
 .gm-abrir{padding:0 10px 0 14px;gap:6px}
 .gm--viagem{--gm-logo:clamp(46px,calc((100vw - var(--gm-lado) - var(--gm-lado-d) - 126px)/3.419),72px)}
 .gm-faixa{--gm-logo:clamp(44px,calc((100vw - 2*max(clamp(20px,6vw,96px),calc(env(safe-area-inset-left) + 16px)) - 126px)/3.419),72px)}
}

/* T12 correção 1: com a marca maior o cabeçalho ficou mais alto que o botão "Empresas"; o painel do menu abria por cima do lema da logo.
   Agora ele abre logo abaixo da faixa (a distância da base do botão até a base da faixa, mais 6 px). */
@media(max-width:1179px){
 .gm-js .gm-faixa .gm-painel{top:calc(100% + (var(--gm-logo)*1.115 + 24px)/2 - 16px)}
 .gm-js .gm--viagem .gm-painel{top:calc(100% + var(--gm-logo)*.5575 - 16px)}
}

/* T12 correção 1: no computador a página atual leva o anel; o ponto embaixo caía sobre o lema da logo da Quokka e sai. Fora do computador (menu aberto) o ponto fica à direita da linha. */
@media(min-width:1180px){.gm-empresas a[aria-current]:before{display:none}}

/* T12 correção 2 (computador-5): nas nuvens claras (y 706 a 958) o véu escuro do alto saía como uma barra cinza suja. Agora o cabeçalho se adapta ao fundo: a marca troca, em fusão guiada pela rolagem
   (variável --gm-claro, de 0 a 1, escrita por nomes.js), para a versão em #323149 (a cor da própria marca nas aplicações sobre fundo claro; a ONmnia original tem "mnia" e o lema nessa cor) e o véu some.
   Só a viagem (index.html) tem a segunda imagem. Sem JavaScript ou com a rolagem parada fora da faixa, --gm-claro é 0 e nada muda. */
.gm--viagem .gm-marca .marca-escura{position:absolute;left:0;bottom:0;opacity:var(--gm-claro,0);filter:none;pointer-events:none}
.gm--viagem .gm-marca .marca-grupo{opacity:calc(1 - var(--gm-claro,0))}
.gm--viagem .gm-grupo{color:color-mix(in srgb,#323149 calc(var(--gm-claro,0)*100%),#fff);-webkit-text-stroke-color:color-mix(in srgb,#323149 calc(var(--gm-claro,0)*100%),#fff)}
@media(forced-colors:active){.gm--viagem .gm-marca .marca-escura{display:none}.gm--viagem .gm-marca .marca-grupo{opacity:1}}

/* T12 correção 2 (celular-4): o lema SAÚDE | INOVAÇÃO | CONEXÃO (pedido do dono) tem 9,1% da altura da logo e ficava com 5,1 a 5,8 px de maiúscula no celular.
   Até 479 px o botão "Empresas" vira só o ícone de menu (o texto continua no nome acessível: font-size 0 não tira o texto da árvore de acessibilidade) e a logo ocupa o que sobra da linha:
   até 88 px de altura (lema de 7,6 px a 390 px de largura, 6,8 px a 360 px). Mais que isso exigiria a logo numa linha própria (cabeçalho com duas linhas), que não foi feito: ver DECISOES-T12.md, item 15. */
@media(max-width:479px){
 .gm-abrir{position:relative;justify-content:center;gap:0;width:48px;min-width:48px;padding:0;font-size:0}
 .gm-abrir svg{display:none}
 .gm-abrir:before{content:"";display:block;width:20px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:transform .2s,box-shadow .2s}
 .gm-abrir:after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;margin:-1px 0 0 -10px;border-radius:2px;background:currentColor;opacity:0;transform:rotate(-45deg);transition:opacity .2s}
 .gm.aberto .gm-abrir:before{box-shadow:none;transform:rotate(45deg)}
 .gm.aberto .gm-abrir:after{opacity:1}
 .gm--viagem{--gm-logo:clamp(46px,calc((100vw - var(--gm-lado) - var(--gm-lado-d) - 60px)/3.419),88px)}
 .gm-faixa{--gm-logo:clamp(44px,calc((100vw - 2*max(clamp(20px,6vw,96px),calc(env(safe-area-inset-left) + 16px)) - 60px)/3.419),88px)}
}
@media(max-width:479px) and (prefers-reduced-motion:reduce){.gm-abrir:before,.gm-abrir:after{transition:none}}

/* T12 acabamento (decisão a, D-C4V2-29): no celular o lema SAÚDE | INOVAÇÃO | CONEXÃO tem de LER: maiúscula de 8 px ou mais.
   A maiúscula do lema mede 9,05% da altura da logo (medida no vetor onmnia-branca.svg), então a logo precisa de 88,4 px ou mais.
   De 390 a 479 px cabe numa linha só: margem de 16 px, botão do menu só com ícone (44 px) e a logo com o resto (89,5 px a 390; até 96 px).
   Até 389 px o cabeçalho ganha uma linha: o botão do menu fica no alto, à direita, na altura do GRUPO, e a logo ocupa a largura embaixo (até 92 px).
   Abaixo de 347 px (320 a 346) a logo não cabe com 88 px na largura e o lema fica entre 7,6 e 8 px.
   --gm-alto = altura do conteúdo do cabeçalho (o degradê da viagem e o painel do menu usam). */
.gm,.gm-faixa{--gm-alto:calc(var(--gm-logo)*1.115)}
@media(max-width:479px){
 .gm--viagem{--gm-lado:calc(env(safe-area-inset-left) + 16px);--gm-lado-d:calc(env(safe-area-inset-right) + 16px);top:calc(16px + env(safe-area-inset-top));--gm-logo:clamp(46px,calc((100vw - var(--gm-lado) - var(--gm-lado-d) - 52px)/3.419),96px)}
 .gm--viagem:before{--gm-topo:calc(16px + env(safe-area-inset-top));height:calc(var(--gm-topo) + var(--gm-alto) + 40px)}
 .gm--empresa .gm-barra{padding-inline:calc(env(safe-area-inset-left) + 16px) calc(env(safe-area-inset-right) + 16px)}
 .gm--pagina .gm-barra,.gm--creditos .gm-barra{width:min(100% - 2*clamp(1rem,4vw,2.5rem),72rem)} /* Fechamento da T13, correção (achado 6): a mesma margem do conteúdo (antes 16 px fixos; de 400 a 479 px ficava até 3,2 px fora) */
 .gm-faixa{--gm-logo:clamp(44px,calc((100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right) - 52px)/3.419),96px)}
 .gm-barra{gap:8px}
 .gm-abrir{width:44px;min-width:44px;min-height:44px}
 .gm-js .gm-faixa .gm-painel{top:calc(100% + (var(--gm-alto) - 44px)/2 + 12px + 6px)}
 .gm-js .gm--viagem .gm-painel{top:calc(100% + (var(--gm-alto) - 44px)/2 + 6px)}
}
/* T13 (P8): com a logo 28% menor (bloco T13 no fim), até 389 px a marca e o botão do menu voltam a caber na mesma linha (a T12 tinha aberto
   uma segunda linha para a logo de 92 px). Fica aqui só a base da logo nessa faixa (a mesma da T12; o bloco T13 multiplica por .72). */
@media(max-width:389px){
 .gm--viagem{--gm-logo:clamp(46px,calc((100vw - var(--gm-lado) - var(--gm-lado-d))/3.419),92px)}
 .gm-faixa{--gm-logo:clamp(44px,calc((100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))/3.419),92px)}
 .gm .gm-voltar{display:none}
}
/* 404 (cabeçalho avulso): mesma regra; os links "O grupo" e "Contato" descem para a linha de baixo quando a logo ocupa a largura */
@media(max-width:479px){
 .topo-avulso{--gm-logo:clamp(44px,calc((100vw - 32px)/3.419),92px)}
 .topo-avulso .barra{width:calc(100% - 32px);flex-wrap:wrap;row-gap:4px;padding-block:10px}
}
/* Base do cabeçalho da viagem no celular, para quem posiciona coisas abaixo dele (história: "Pular a história" aqui; a coluna da história usa --h-topo, que é da área da história). */
@media(max-width:479px){:root{--gm-base-viagem:calc(16px + env(safe-area-inset-top) + clamp(46px,calc((100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right) - 52px)/3.419),96px)*.72*1.115)}}
@media(max-width:389px){:root{--gm-base-viagem:calc(16px + env(safe-area-inset-top) + clamp(46px,calc((100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))/3.419),92px)*.72*1.115)}}

/* T12 acabamento (computador-8): "Pular a história" entra no sistema de pílulas dos controles (--raio-controle) e, no celular, fica 16 px abaixo do cabeçalho novo.
   Seletores com #historia para valer sobre historia.css, que carrega depois. */
#historia .h-pular{border-radius:var(--raio-controle,999px)}
@media(max-width:479px){#historia:not(.parada) .h-pular{top:calc(var(--gm-base-viagem) + 16px)}}

/* T12 acabamento (pedidos-do-dono-7): "in vitro" em itálico no site inteiro. As páginas e os créditos usam font-synthesis:none e não há arquivo itálico das fontes,
   então o <i lang="la"> saía reto; aqui o navegador pode inclinar só essa expressão. marca.css carrega em todas as páginas. */
i[lang="la"]{font-style:italic;font-synthesis-style:auto}

/* T12 correção final (achado 7): o piso de leitura do lema (maiúscula de 8 px ou mais) vale também a partir de 600 px. A maiúscula do lema mede 9,05% da altura da logo,
   então a logo vai a 89 px (lema de 8,06 px); antes eram 60 a 80 px (lema de 5,4 a 7,2 px). A faixa das páginas e das empresas acompanha. */
@media(min-width:600px){
 .gm,.gm-faixa{--gm-logo:89px}
 .topo-avulso{--gm-logo:89px}
}

/* ===================== T13 (13/10/2026): logo menor, faixa das empresas, controles discretos e logo em movimento ===================== */

/* P8: a logo do cabeçalho fica 28% menor em todas as larguras (dentro dos 25% a 30% pedidos). Só a marca muda de tamanho: as proporções do
   arquivo não mudam. --gm-img = altura da logo desenhada (a --gm-logo de antes vezes .72; cada faixa de largura segue com a sua --gm-logo).
   Quem usa a altura do cabeçalho acompanha (--gm-alto: degradê do alto da viagem e painel do menu). Custo, medido e registrado na entrega:
   a maiúscula do lema SAÚDE | INOVAÇÃO | CONEXÃO fica com cerca de 72% do que tinha (a T12 a tinha levado a 8 px). */
.gm,.gm-faixa,.topo-avulso{--gm-img:calc(var(--gm-logo)*.72)}
.gm-marca{padding-top:calc(var(--gm-img)*.115)}
.gm-marca img,.topo-avulso .gm-marca img{height:var(--gm-img)}
.gm-grupo{--gm-f:calc(var(--gm-img)*.16429)}
.gm,.gm-faixa{--gm-alto:calc(var(--gm-img)*1.115)}
.gm--viagem:before{height:calc(var(--gm-topo) + var(--gm-alto) + 40px)}
@media(max-width:1179px){
 .gm-js .gm-faixa .gm-painel{top:calc(100% + (var(--gm-alto) + 24px)/2 - 16px)}
 .gm-js .gm--viagem .gm-painel{top:calc(100% + var(--gm-alto)*.5 - 16px)}
}
@media(max-width:479px){
 .gm-js .gm-faixa .gm-painel{top:calc(100% + (var(--gm-alto) - 44px)/2 + 12px + 6px)}
 .gm-js .gm--viagem .gm-painel{top:calc(100% + (var(--gm-alto) - 44px)/2 + 6px)}
}

/* P2: a faixa das empresas fica transparente em repouso (sem fundo e sem borda; logos um pouco esmaecidas) e ganha vida ao passar o mouse
   ou no foco do teclado: o vidro aparece suave, as logos vão a 100% e a logo sob o cursor cresce um pouco (sem halo e sem placa).
   Na viagem, sobre as nuvens claras (--gm-claro, de nomes.js, a mesma fusão que troca a logo ONmnia), as logos trocam para as versões
   coloridas originais (as de fundo claro), o texto vai para #323149 e o vidro fica claro. As logos são os arquivos originais. */
.gm{--gm-esmaece:.8;--gm-texto:var(--gm-tinta);--gm-vidro:rgb(12 18 26/.34);--gm-vidro-borda:rgb(255 255 255/.16)}
.gm--viagem{--gm-texto:color-mix(in srgb,#323149 calc(var(--gm-claro,0)*100%),var(--gm-tinta));
 --gm-vidro:color-mix(in srgb,rgb(255 255 255/.52) calc(var(--gm-claro,0)*100%),rgb(12 18 26/.34));
 --gm-vidro-borda:color-mix(in srgb,rgb(50 49 73/.16) calc(var(--gm-claro,0)*100%),rgb(255 255 255/.16))}
.gm-empresas .gm-e-claro{display:none}
@media(min-width:1180px){
 .gm-painel{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease}
 .gm-painel:focus-within{--gm-esmaece:1;background:var(--gm-vidro);box-shadow:inset 0 0 0 1px var(--gm-vidro-borda);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
 .gm-empresas img{opacity:var(--gm-esmaece);transition:opacity .3s ease,transform .25s ease}
 .gm-empresas a:hover,.gm-links a:hover{background:none}
 .gm-empresas a:focus-visible img{transform:scale(1.08)}
 .gm-empresas a[aria-current]{background:none}
 .gm-empresas a[aria-current] img{opacity:1}
 .gm-links{border-left-color:color-mix(in srgb,var(--gm-texto) 26%,transparent)}
 .gm-links a{color:var(--gm-texto);transition:color .3s ease}
 /* viagem: as duas versões de cada logo ficam uma sobre a outra e trocam pela mesma fusão da logo ONmnia */
 .gm--viagem .gm-empresas a{display:inline-grid;place-items:center}
 .gm--viagem .gm-empresas img{grid-area:1/1}
 .gm--viagem .gm-empresas img:not(.gm-e-claro){opacity:calc((1 - var(--gm-claro,0))*var(--gm-esmaece))}
 .gm--viagem .gm-empresas .gm-e-claro{display:block;opacity:calc(var(--gm-claro,0)*var(--gm-esmaece))}
}
/* :hover só onde há mouse de verdade (hover:hover): em tela de toque o :hover fica preso depois do toque e a faixa não voltaria ao repouso */
@media(min-width:1180px) and (hover:hover){
 .gm-painel:hover{--gm-esmaece:1;background:var(--gm-vidro);box-shadow:inset 0 0 0 1px var(--gm-vidro-borda);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
 .gm-empresas a:hover img{transform:scale(1.08)}
 .gm-links a:hover{text-decoration:underline;text-underline-offset:.3em}
}
/* celular e tablet: o botão "Empresas" fica transparente em repouso e ganha o vidro no mouse, no foco e com o painel aberto;
   o painel aberto segue opaco (é a "faixa viva" dessas larguras), com as versões das logos para fundo escuro */
@media(max-width:1179px){
 /* .gm-abrir:hover também: a regra global button:hover{background:#244052} (style.css) pintava um disco azul-escuro preso depois do toque, e sobre as nuvens o ícone escuro sumia nele */
 .gm-abrir,.gm-abrir:hover{background:transparent;color:var(--gm-texto);transition:background-color .3s ease,color .3s ease}
 .gm-abrir:focus-visible,.gm.aberto .gm-abrir{background:var(--gm-vidro);box-shadow:inset 0 0 0 1px var(--gm-vidro-borda);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
}
@media(max-width:1179px) and (hover:hover){.gm-abrir:hover{background:var(--gm-vidro);box-shadow:inset 0 0 0 1px var(--gm-vidro-borda);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}}
@media(prefers-reduced-motion:reduce){.gm-painel,.gm-empresas img,.gm-links a,.gm-abrir{transition:none}}
@media(forced-colors:active){.gm--viagem .gm-empresas .gm-e-claro{display:none}.gm--viagem .gm-empresas img:not(.gm-e-claro),.gm-empresas img{opacity:1}}

/* P4: "Pausar animação" e "Fontes e créditos" viram ícones pequenos (32 px) no canto de baixo à direita: disco escuro translúcido,
   opacidade .66 em repouso e 1 no mouse ou no foco. O rótulo aparece acima do ícone só no mouse ou no foco; o nome acessível é sempre
   o texto do rótulo (o span continua na árvore de acessibilidade com opacidade 0). Em tela de toque a área de toque vai a 44 x 44 px. */
.ctl-icone{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:32px;height:32px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid rgb(242 246 246/.22);border-radius:50%;background:rgb(3 9 16/.78);color:#f2f6f6;font:400 13px/1 Synonym,system-ui,sans-serif;text-decoration:none;text-shadow:none;opacity:.66;cursor:pointer;transition:opacity .2s ease,background-color .2s ease}
.ctl-icone:hover{background:rgb(3 9 16/.78)} /* anula button:hover{background:#244052} (style.css) em tela de toque, onde o :hover fica preso */
.ctl-icone:focus-visible{opacity:1;background:rgb(3 9 16/.9);text-decoration:none}
.ctl-icone:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #0f2f2a}
.ctl-icone svg{display:block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ctl-icone .i-retomar{display:none;fill:currentColor;stroke:none}
.ctl-icone.pausado .i-pausa{display:none}
.ctl-icone.pausado .i-retomar{display:inline}
.ctl-icone .ctl__txt{position:absolute;right:0;bottom:calc(100% + 8px);width:auto;height:auto;overflow:visible;clip-path:none;padding:7px 10px;border-radius:4px;background:rgb(3 9 16/.86);color:#f2f6f6;font:400 13px/1 Synonym,system-ui,sans-serif;letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .2s ease,transform .2s ease}
.ctl-icone:focus-visible .ctl__txt{opacity:1;transform:none}
@media(hover:hover){.ctl-icone:hover{opacity:1;background:rgb(3 9 16/.9);text-decoration:none}.ctl-icone:hover .ctl__txt{opacity:1;transform:none}}
@media(pointer:coarse){.ctl-icone:after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){.ctl-icone,.ctl-icone .ctl__txt{transition:none}}
@media(forced-colors:active){.ctl-icone{opacity:1;border-color:ButtonText}}
/* viagem (index.html): o rodapé encosta no canto; as regras das pílulas antigas (refinement.css) usam id e !important */
/* row-gap de 44 px: o aviso "Ilustração feita com inteligência artificial" fica acima dos ícones com folga para o rótulo (27 px + 8 px), que assim nunca o cobre */
#palco>footer{right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));gap:44px 8px;padding-bottom:0}
footer .credit.ctl-icone{padding:0;background:rgb(3 9 16/.78)!important}
footer .credit.ctl-icone:focus-visible{background:rgb(3 9 16/.9)!important}
@media(hover:hover){footer .credit.ctl-icone:hover{background:rgb(3 9 16/.9)!important}}
#pausa-movimento.ctl-icone{width:32px;padding:0}
#pausa-movimento.ctl-icone svg{width:16px;height:16px;stroke-width:2.4}
#pausa-movimento.ctl-icone .ctl__txt{position:absolute;width:auto;height:auto;overflow:visible;clip-path:none}
/* páginas das empresas: o botão de pausa da cena vira o mesmo ícone, no canto de baixo à direita do palco (também no celular) */
.pausa.ctl-icone{position:absolute;right:var(--gut);left:auto;bottom:clamp(16px,3vh,32px);min-height:0;padding:0;border:1px solid rgb(242 246 246/.22);border-radius:50%;background:rgb(3 9 16/.78);font-size:13px}
.pausa.ctl-icone:hover{border-color:rgb(242 246 246/.22)}
.pausa.ctl-icone[aria-pressed=true]::before{content:none}
.hero--simples .pausa.ctl-icone{position:static}

/* P8 e P9: peça temporária do movimento da logo (marca-movimento.js). Existe só enquanto a logo se move: posição fixa, no lugar exato do
   <img> do cabeçalho; o FLIP escala a partir do canto de cima à esquerda. Nenhum fundo, borda, sombra ou filtro. */
.mm-peca{position:fixed;z-index:45;margin:0;padding:0;pointer-events:none;transform-origin:0 0;contain:layout style}
/* stroke:none: a regra global svg{stroke:currentColor;stroke-width:1.2} do site (style.css) engordava as letras da cópia, sobretudo o lema */
.mm-peca .mm-svg{position:absolute;left:0;top:0;display:block;overflow:visible;stroke:none;stroke-width:0}
.mm-peca .mm-grupo{position:absolute;white-space:nowrap;user-select:none}
.mm-svg .mm-p,.mm-svg .mm-l{transform-box:fill-box;transform-origin:50% 50%}
.mm-svg .mm-p-saude .mm-l,.mm-svg .mm-p-inovacao .mm-l,.mm-svg .mm-p-conexao .mm-l{transform-origin:50% 100%}
.mm-svg .mm-luz{pointer-events:none}
/* páginas internas: a logo fica escondida da primeira pintura até a entrada começar (no máximo 3,5 s; marca-movimento.js) */
.mm-espera .gm-marca{opacity:0}
@media(prefers-reduced-motion:reduce){.mm-espera .gm-marca{opacity:1}}
@media(forced-colors:active){.mm-peca{display:none}.mm-espera .gm-marca{opacity:1}}
/* ===================== Correção 1 da T13 (13/10/2026), frente faixa-cabecalho: achados 5, 9 e 12 da auditora ===================== */

/* Achado 9 (decisão do IVO): o lema SAÚDE | INOVAÇÃO | CONEXÃO fica com maiúscula de 8 px ou mais, no computador e no celular.
   A maiúscula do lema mede 9,05% da altura da logo (medida no vetor onmnia-branca.svg; ia/t13/correcao1/faixa-cabecalho/LEMA-FRACAO.json):
   a logo precisa de 88,4 px ou mais. Com a logo 28% menor (P8) ela ficava com 64 a 66 px e o lema com 5,8 a 6,0 px; então a logo só diminui o
   que o piso deixa: 88,4 px de altura (a T12 tinha 89 px no computador, 89,5 px a 390 e 92 px a 360). A estrutura e as proporções da logo
   não mudam: é o mesmo arquivo, só a altura. */
/* Correção 2 da T13 (D-C4V2-32, ordem do Victor de 13/10 ~23:10: "A logo da onmnia deve ser menor quando ela estiver no topo a esquerda,
   diminua ela em 30%"). A logo do canto fica 30% menor que na Correção 1, em todas as larguras e páginas; o voo da chegada (P9) termina
   neste <img>, então pousa no tamanho novo. A ordem vale sobre o piso de 8 px do lema (achado 9): o lema diminui junto (maiúscula de
   88,4 x 0,7 x 0,090622 = 5,6 px), medido e registrado, sem compensação. Mesmo arquivo e mesmas proporções: só a altura muda.
   --gm-img = 0,7 x a altura da Correção 1 (88,4 px; abaixo de 335 px de largura, a largura útil da tela dividida por 3,419). */
.gm,.gm-faixa,.topo-avulso{--gm-img:calc(min(88.4px,(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))/3.419)*.7)}
/* Correção 2: com a logo de 61,9 px (212 px de largura), a marca e o botão do menu voltam a caber na mesma linha até 320 px. Sai a segunda
   linha que a Correção 1 tinha aberto até 389 px; vale de novo a linha única da T13 (P8), com --gm-alto = altura da logo x 1,115. */
/* base do cabeçalho da viagem (quem posiciona coisas abaixo dele: "Pular a história") */
@media(max-width:699px){:root{--gm-base-viagem:calc(clamp(26px,5.5vh,58px) + env(safe-area-inset-top) + 61.88px*1.115)}#historia:not(.parada) .h-pular{top:calc(var(--gm-base-viagem) + 16px)}}
@media(max-width:599px){:root{--gm-base-viagem:calc(28px + env(safe-area-inset-top) + 61.88px*1.115)}}
@media(max-width:479px){:root{--gm-base-viagem:calc(16px + env(safe-area-inset-top) + 61.88px*1.115)}}
@media(max-width:334px){:root{--gm-base-viagem:calc(16px + env(safe-area-inset-top) + (100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))/3.419*.7*1.115)}}
/* páginas das empresas: a faixa fixa volta a ter cerca de 93 px de altura (logo de 61,9 px x 1,115 + 24 px); a folga da rolagem volta aos 112 px da T12 */
html:has(.gm--empresa){scroll-padding-top:112px}

/* Achado 5 (decisão do IVO): a faixa das empresas fica transparente em repouso (sem fundo e sem borda) e viva no mouse em TODAS as páginas:
   viagem, empresas, institucionais e créditos. Ganhar vida = o mesmo vidro do painel da viagem, as logos a 100% e a logo sob o cursor 8% maior.
   Onde o fundo é claro (páginas institucionais no tema claro) entram as versões das logos para fundo claro (as mesmas da viagem sobre as
   nuvens: arquivos originais, sem placa, halo, contorno, sombra ou textura) e o texto vai para #323149 (--gm-claro = 1).
   Páginas das empresas: a faixa é fixa. Enquanto a cena do topo está parada atrás dela, fica transparente. Quando a cena começa a subir
   (o texto da página vai passar por baixo da faixa; classe gm--sobre-conteudo, de menu.js), a faixa ganha um vidro na cor do mundo da
   empresa, para nenhuma logo ou link ficar sobre texto. */
.gm-faixa,.gm--empresa .gm-faixa{background:transparent;border-bottom:0;transition:background-color .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease}
.gm--empresa.gm--sobre-conteudo .gm-faixa{background:color-mix(in srgb,var(--mundo,#030910) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
/* a cena do topo da VIDA, da Imaes e da Renylab tem partes claras atrás da faixa (a máquina, a luz, as placas): o alto da cena ganha o mesmo
   degradê escuro de ponta a ponta da viagem (.gm--viagem:before), sem placa e sem halo nas logos; com o vidro (página rolada) ele sai. */
.gm--empresa .gm-faixa{position:relative}
.gm--empresa .gm-faixa:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(100% + 40px);pointer-events:none;background:linear-gradient(180deg,rgb(3 9 16/.5),rgb(3 9 16/.45) 40%,rgb(3 9 16/.3) 68%,rgb(3 9 16/.1) 88%,rgb(3 9 16/0));transition:opacity .35s ease}
.gm--empresa.gm--sobre-conteudo .gm-faixa:before{opacity:0}
@media(forced-colors:active){.gm--empresa .gm-faixa:before{display:none}}
/* VIDA: a máquina clara do topo fica atrás da metade direita da faixa (logos, "O grupo", "Contato", "Voltar"); com o degradê de .5 o fundo
   ali ficou com luminância 0,17 a 0,23 e "O grupo", a Quokka e a Imaes não chegavam a 50% da área com 3:1 (CONTRASTE.md). Na VIDA o mesmo
   degradê de ponta a ponta fica mais forte no alto, sem placa e sem halo nas logos.
   Correção 2 da T13 (achado novo da reauditoria, CG-64 e WCAG 1.4.3): na Imaes, a luz clara do alto da foto fica atrás de "O grupo",
   "Contato" e "Voltar à cidade" (texto #f2f6f6 de 14 px): com o degradê de .5 eles mediam 3,5 a 3,7:1, com 0% da área em 4,5:1 a 1440
   (gate-c1/faixa/paginas/ANALISE.json). A Imaes passa a usar o mesmo degradê forte da VIDA, de ponta a ponta, sem placa nas logos. */
.tema-vida .gm--empresa .gm-faixa:before,.tema-imaes .gm--empresa .gm-faixa:before{background:linear-gradient(180deg,rgb(3 9 16/.76),rgb(3 9 16/.72) 40%,rgb(3 9 16/.48) 68%,rgb(3 9 16/.16) 88%,rgb(3 9 16/0))}
/* 404: o cabeçalho avulso cresce junto com a logo (a barra tinha 88 px e cortava o GRUPO em cima) e fica sem a linha de baixo, como as
   outras faixas (sem fundo e sem borda em repouso; a linha vinha de creditos.css, que a 404 carrega antes deste arquivo) */
.topo-avulso .barra{min-height:calc(var(--gm-img)*1.115 + 24px)}
.topo-avulso{border-bottom:0}
/* viagem de 1180 a 1229 px: a Correção 1 deixava as cinco logos das empresas 15% menores nessa faixa de largura, porque com a logo do canto de
   88,4 px a faixa passava 43,5 px da margem direita a 1180. Correção 2: com a logo do canto de 61,9 px (90 px mais estreita) a faixa cabe e as
   cinco logos voltam ao tamanho de sempre (medido em gate-c2/cabecalho-layout, 1180 e 1229 px). */
.gm-voltar{background:transparent;color:var(--gm-texto);transition:background-color .3s ease,color .3s ease}
.gm-voltar:focus-visible{background:var(--gm-vidro)}
@media(hover:hover){.gm-voltar:hover{background:var(--gm-vidro);box-shadow:inset 0 0 0 1px var(--gm-vidro-borda);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);text-decoration:none}}
/* páginas institucionais: tema claro = fundo #f4f4f7 (--gm-claro 1); tema escuro = #030910 (--gm-claro 0). A mesma regra de tema de paginas.css. */
.gm--pagina{--gm-claro:1}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .gm--pagina{--gm-claro:0}}
:root[data-theme="dark"] .gm--pagina{--gm-claro:0}
.gm--pagina{--gm-texto:color-mix(in srgb,#323149 calc(var(--gm-claro,0)*100%),var(--gm-tinta));
 --gm-vidro:color-mix(in srgb,rgb(255 255 255/.52) calc(var(--gm-claro,0)*100%),rgb(12 18 26/.34));
 --gm-vidro-borda:color-mix(in srgb,rgb(50 49 73/.16) calc(var(--gm-claro,0)*100%),rgb(255 255 255/.16))}
.gm--pagina .gm-marca .marca-escura{position:absolute;left:0;bottom:0;opacity:var(--gm-claro,0);filter:none;pointer-events:none}
.gm--pagina .gm-marca .marca-grupo{opacity:calc(1 - var(--gm-claro,0))}
.gm--pagina .gm-grupo{color:color-mix(in srgb,#323149 calc(var(--gm-claro,0)*100%),#fff);-webkit-text-stroke-color:color-mix(in srgb,#323149 calc(var(--gm-claro,0)*100%),#fff)}
@media(min-width:1180px){
 .gm--pagina .gm-empresas a{display:inline-grid;place-items:center}
 .gm--pagina .gm-empresas img{grid-area:1/1}
 .gm--pagina .gm-empresas img:not(.gm-e-claro){opacity:calc((1 - var(--gm-claro,0))*var(--gm-esmaece))}
 .gm--pagina .gm-empresas .gm-e-claro{display:block;opacity:calc(var(--gm-claro,0)*var(--gm-esmaece))}
}
/* Fechamento da T13, correção (achado 3 da auditora, o mesmo mecanismo no cabeçalho das páginas institucionais): no alto contraste do Windows
   (forced-colors) o fundo dessas páginas é a cor do sistema (Canvas) e não segue o botão de tema da página. A versão da logo ONmnia e das
   cinco logos das empresas segue o esquema do sistema (prefers-color-scheme): fundo escuro = as versões para fundo escuro, como antes, a 100%;
   fundo claro = as versões para fundo claro (antes ficavam as brancas, e "mnia", o lema e as cinco logos sumiam no branco). Arquivos
   originais, sem placa, halo, contorno ou sombra. O !important vence a fusão por --gm-claro, o botão de tema e a entrada animada da logo.
   No fundo claro, a versão para fundo escuro de cada empresa sai só da vista (fora do fluxo, recortada e transparente) e não com display:none:
   é ela que tem o texto alternativo ("GT Group" etc.), e o link continua com o nome para o leitor de tela. */
@media(forced-colors:active){.gm--pagina .gm-marca .marca-escura{display:block!important;opacity:1!important}.gm--pagina .gm-marca .marca-grupo{opacity:0!important}.gm--pagina .gm-empresas .gm-e-claro{display:block!important;opacity:1!important}.gm--pagina .gm-empresas img:not(.gm-e-claro){position:absolute!important;opacity:0!important;clip-path:inset(50%)!important;pointer-events:none}}
@media(forced-colors:active) and (prefers-color-scheme:dark){.gm--pagina .gm-marca .marca-escura{display:none!important}.gm--pagina .gm-marca .marca-grupo{opacity:1!important}.gm--pagina .gm-empresas .gm-e-claro{display:none!important}.gm--pagina .gm-empresas img:not(.gm-e-claro){display:block!important;position:static!important;opacity:1!important;clip-path:none!important}}
/* Achado 12 (decisão do IVO): na passagem pelas nuvens nenhum trecho da faixa fica ilegível. Com a faixa transparente, as versões das logos
   para fundo claro só leem bem com a nuvem cheia atrás; fora dela, a versão para fundo escuro com os dois véus escuros do alto (o véu do céu
   e o degradê do cabeçalho, os mesmos da cidade) lê em todos os pontos medidos. nomes.js vira a versão e os véus juntos, nas duas pontas da
   nuvem cheia (sem meia-transparência); aqui a troca dos véus fica suave no tempo (.3 s), como a das logos. Números: CONTRASTE.md e TROCA.json. */
#ceu-veu,.gm--viagem:before{transition:opacity .3s ease}
/* o degradê do cabeçalho segue só a --gm-sombra de nomes.js (a regra da T12 o apagava de y 739,5 a 1100 em qualquer caso, e de 958 a 1100 a
   faixa ficava sobre o céu da cidade sem ele) */
.light-sky .gm--viagem:before{opacity:var(--gm-sombra,1)}
@media(prefers-reduced-motion:reduce){#ceu-veu,.gm--viagem:before{transition:none}}
/* Medido depois a 1920 e a 360 (depois/viagem-extra): (1) dentro da janela, a 80% (o esmaecido de repouso) as versões para fundo claro do GT e da
   VIDA caíam a 4% e 32% da área com 3:1 sobre os vãos azuis da nuvem cheia a 1920; nas nuvens elas ficam a 100% em repouso (as escuras seguem
   esmaecidas); (2) até 389 px o cabeçalho tem duas linhas e o lema fica no pé do degradê do alto, onde ele quase não escurece: o lema caía a
   0% em y 900 a 360; nessa largura o degradê é mais alto e mais forte, para cobrir a linha do lema (sem placa nem halo na logo).
   Correção 2: o cabeçalho voltou a ter uma linha só (logo de 61,9 px); o degradê mais alto e mais forte fica nessa largura, cobrindo a logo
   inteira com folga (medido de novo em gate-c2/faixa). */
@media(min-width:1180px){.gm--viagem .gm-empresas .gm-e-claro{opacity:var(--gm-claro,0)}}
@media(max-width:389px){.gm--viagem:before{height:calc(var(--gm-topo) + var(--gm-alto) + 72px);background:linear-gradient(180deg,rgb(3 9 16/.62),rgb(3 9 16/.6) 55%,rgb(3 9 16/.5) 75%,rgb(3 9 16/.2) 90%,rgb(3 9 16/0))}}