/* ═════════════════════════════════════════════════════════════════
   RIVIO — site.css · camada 2 de 5

   A MOLDURA que toda página tem: barra de rolagem própria, menu (com as
   variações `--limpa` e `--solta`), painel do menu no celular, cortina de
   carregamento e rodapé. Nada aqui sabe de que página se trata.
   ═════════════════════════════════════════════════════════════════ */

.tem-barra-propria {
  scrollbar-width: none;
}

.tem-barra-propria::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* O trilho é uma faixa invisível só para captar o ponteiro perto da
   borda; quem se vê é o polegar. */
.rolagem {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9998;
  width: 14px;
  height: 100svh;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out-soft);
}

.rolagem.is-viva {
  opacity: 1;
}

.rolagem i {
  position: absolute;
  top: 0;
  right: 4px;
  display: block;
  width: 4px;
  border-radius: var(--r-redondo);
  /* Um tom médio translúcido é o único que serve sobre as seções claras
     E as escuras sem trocar de valor no meio da página. O contorno de
     baixo contraste devolve a leitura quando o fundo é quase da cor
     dele. */
  background: rgba(122, 133, 153, 0.5);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18);
  cursor: grab;
}

/* Sobre faixa escura o polegar vira claro, e vice-versa. A classe vem do
   `barra.js`, que pergunta à MESMA sonda que a nav usa. Um tom só nunca
   serviria: esta página vai de Light-01 a preto. */
.rolagem.is-sobre-escuro i {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22);
}

.rolagem i:hover,
.rolagem i:active {
  background: rgba(122, 133, 153, 0.78);
}

.rolagem.is-sobre-escuro i:hover,
.rolagem.is-sobre-escuro i:active {
  background: rgba(255, 255, 255, 0.86);
}

.rolagem i:active {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .rolagem {
    transition-duration: 0.01s;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Navigation — fixed, theme-aware (light over hero, dark over the
   Intelligence stage)
   ───────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--light-80);
  background: transparent;
  transition: color 0.5s var(--ease-out-soft),
    background-color 0.5s var(--ease-out-soft);
}

/* O fundo da nav é SÓ DESFOQUE — sem véu nenhum, nos dois estados.

   Histórico, porque o valor já foi mexido três vezes e vale saber o que
   já foi recusado: era chapa branca a 62% ("não quero fundo sólido
   branco"), virou degradê ("esse blur com esse gradiente ficou feio"),
   virou véu uniforme a 0,60 sobre foto, e agora é transparente nos dois
   — pedido do cliente. O desfoque ficou; ele não é "fundo".

   **O preço está medido e é de contraste.** O véu de 0,60 era o que
   punha texto branco a 4,5 sobre a foto mais CLARA da § 3, que é o pior
   caso da página. Sem ele o piso cai. Os números da rodada estão no
   HISTORICO; se algum ponto ficar ilegível no monitor dele, é aqui que
   se mexe — e a saída não precisa ser véu de novo. */
/* Sobre seção clara o tratamento inverte: tipo escura e **fundo
   nenhum**.

   O véu claro só fazia falta onde passa foto — e ali a nav está no outro
   estado, com o véu escuro, porque as faixas fotográficas se declaram.
   Sobre seção clara ele era invisível contra o fundo e visível por cima
   de qualquer coisa que cruzasse a barra: era a tira branca atravessando
   a foto de cima da § 4 que o cliente apontou.

   Medido depois de tirar: nenhum ponto da página piorou. */
.nav.is-dark {
  color: rgba(49, 53, 61, 0.82);
  background: transparent;
}

/* ── A NAV LIMPA ─────────────────────────────────────────────────
   Uma VARIAÇÃO, para páginas em que a barra corre por cima de uma
   fotografia que precisa chegar inteira até o topo.

   O `background` da nav já era `transparent` — o que ainda desenhava uma
   faixa no alto era o `backdrop-filter`. Desfoque não é cor, mas é uma
   BORDA: onde a barra termina, a imagem volta ao foco, e essa emenda
   horizontal atravessa a foto como uma tira. Numa página cuja abertura é
   um retrato começando no pixel zero, é a única coisa que denuncia que
   há uma barra ali.

   O preço é de legibilidade, e ele é REAL: sem desfoque, os rótulos do
   menu ficam à mercê do que passar atrás. Por isso é variação e não
   padrão. Na /contato foi medido a 375, que é onde a barra corre por
   cima do retrato: logo 7,6:1, seletor de idioma 4,9:1, botão do menu
   12,7:1 — todos acima dos 4,5. Em qualquer outra página, MEÇA antes:
   é uma linha de CSS que troca uma emenda visível por um risco de
   contraste, e o segundo não avisa quando acontece. */
.nav--limpa {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── A NAV SOLTA ─────────────────────────────────────────────────
   Outra VARIAÇÃO: a barra fica no topo do DOCUMENTO em vez de na tela,
   e vai embora com a rolagem.

   `absolute` e não `static`: o `<body>` não é posicionado, então o
   bloco de contenção passa a ser o inicial — a barra assenta no topo do
   documento com a largura da tela, exatamente onde a `fixed` estava. E
   continua FORA DO FLUXO, que é o que importa: as páginas que a usam já
   reservam o espaço dela no `padding-top` das próprias seções, e passar
   para `static` empurraria todo o conteúdo para baixo dessa reserva.

   Onde usar: páginas de destino curtas, em que a barra é a saída e não
   a ferramenta. Numa página de leitura longa ela é o contrário de um
   favor — o leitor perde o caminho de volta assim que desce. */
.nav--solta {
  position: absolute;
}

.nav__logo {
  display: block;
  width: 80px;
  height: 24px;
}

.nav__logo svg {
  width: 100%;
  height: 100%;
}

.nav__menu {
  /* No CENTRO EXATO da barra (pedido de 2026-09-23, depois de algumas
     horas agrupados junto do logo, como na Wonderful). Quem centraliza é
     a GRADE da barra (`1fr auto 1fr`, no `@media` de tela larga abaixo):
     logo (81) e idioma (46) têm larguras diferentes, e o `space-between`
     deixaria o grupo 17 px fora do meio.

     NÃO centralize com `position: absolute` + `transform`: os dois fazem
     do menu o bloco de contenção dos painéis (`.mega` é absoluto), e a
     folha encolhe para a largura dos rótulos — aconteceu, medido: painel
     de 366 px. */
  display: flex;
  align-items: center;
  gap: 40px;
}

@media not all and (max-width: 860px) {
  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav__logo { justify-self: start; }
  .nav__lang { justify-self: end; }
}

/* Rótulo em CAIXA NORMAL, na Funnel Display: era a Bai Jamjuree em caixa
   alta com setinha (a `--font-label`, que é sempre maiúscula). A troca é
   de família, não de regra: a `--font-label` continua maiúscula onde
   estiver. */
.nav__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: currentColor;
  opacity: 1;
  transition: opacity 0.3s var(--ease-out-soft);
}

.nav__link:hover { opacity: 0.62; }

/* ── O MEGA MENU ─────────────────────────────────────────────────
   Desde 2026-09-23 no estilo da Wonderful: UMA folha (branca até
   2026-09-28, vidro escuro desde então — ver `.mega-folha`) (a
   `.mega-folha`) que abre colada na barra e FICA aberta enquanto o
   ponteiro passa de um item para o outro — só o conteúdo troca, em
   fade, e a altura da folha desliza até a do painel novo (`--mega-h`,
   medido pelo `site.js`). Antes cada item tinha a sua folha: trocar de
   item fechava uma e abria outra, e a piscada aparecia.

   Os painéis (`.mega`) são só CONTEÚDO, transparentes, por cima da folha.
   Com JS, quem abre é a classe `is-aberto` no item (e `is-mega` na
   barra), com intenção de hover; sem JS, `:hover`/`:focus-within`
   abrem o painel e ele leva o próprio fundo. */
.nav__item {
  /* `static` de propósito: o painel se posiciona pela BARRA (`fixed`),
     e é ela que dá a largura total. */
  position: static;
}

button.nav__link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(102, 148, 255, 0.42);
  border-radius: 4px;
}

/* A FOLHA EM VIDRO ESCURO (2026-09-28, "o menu desktop também deveria
   ser assim… o fundo dele", como o painel do celular): preto a 80% com
   desfoque de 24. Ela cobre a BARRA e o painel — começa no topo (0) e
   mede a barra mais o `--mega-h` —, atrás do conteúdo da barra
   (`z-index: -1`, dentro do contexto dela). Por quê cobrir a barra: um
   `backdrop-filter` dentro de outro só enxerga o que está no pai, e a
   barra tem o próprio desfoque; enquanto o menu está aberto a barra
   larga o dela (`.nav.is-mega`) e a folha desfoca a PÁGINA. */
.mega-folha {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: calc(100% + var(--mega-h, 0px));
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  /* a sombra é o único limite da folha: nada de fio */
  box-shadow: 0 32px 56px -28px rgba(24, 27, 31, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    height 0.46s var(--ease-out-expo),
    opacity 0.22s var(--ease-out-soft),
    visibility 0s linear 0.22s;
}

.nav.is-mega .mega-folha {
  opacity: 1;
  visibility: visible;
  transition:
    height 0.46s var(--ease-out-expo),
    opacity 0.18s var(--ease-out-soft),
    visibility 0s linear 0s;
}

/* Abrindo do zero a folha nasce na altura certa — deslizar de 0 leria
   como cortina. Só as TROCAS deslizam. */
.nav.is-mega-abrindo .mega-folha { transition: opacity 0.18s var(--ease-out-soft), visibility 0s; }

.mega {
  position: absolute;
  inset: 100% 0 auto 0;
  z-index: 1;
  color: var(--light-80);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s var(--ease-out-soft), visibility 0s linear 0.16s;
}

/* O painel que entra espera o que sai apagar (0,1 s) e sobe 6 px. */
.nav__item.is-aberto > .mega {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.34s var(--ease-out-soft) 0.1s, visibility 0s linear 0s;
}

.mega__inner {
  transform: translateY(6px);
  transition: transform 0.5s var(--ease-out-expo);
}

.nav__item.is-aberto > .mega .mega__inner { transform: none; }

/* SEM JS: o painel abre pelo CSS e leva o próprio fundo. */
html:not(.js) .nav__item:hover > .mega,
html:not(.js) .nav__item:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 32px 56px -28px rgba(24, 27, 31, 0.2);
}

/* A barra entra no vidro enquanto o menu está aberto — tipo CLARA sobre
   o preto, qualquer que seja a faixa de baixo; o fundo é a folha, e o
   desfoque dela (a barra larga o seu). Vence o `.nav.is-dark` por
   especificidade. Sem JS não há folha: a barra leva o preto. */
.nav.is-mega {
  color: var(--light-80);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: color 0.2s var(--ease-out-soft), background-color 0.2s var(--ease-out-soft);
}

html:not(.js) .nav:has(.nav__item:hover, .nav__item:focus-within) {
  color: var(--light-80);
  background: rgba(0, 0, 0, 0.8);
}

/* o seletor de idioma no vidro: o do painel do celular — trilho claro
   translúcido e o ativo numa pílula clara com texto escuro */
/* (`.is-dark` junto: sobre página clara a barra tem a classe, e a regra
   dela vem depois neste arquivo com a mesma especificidade — o ativo
   voltava ao cinza-escuro e sumia no vidro) */
.nav.is-mega .nav__lang,
.nav.is-mega.is-dark .nav__lang,
html:not(.js) .nav:has(.nav__item:hover, .nav__item:focus-within) .nav__lang { background: var(--light-16); }
.nav.is-mega .nav__lang :is(button, a, span):is([aria-pressed='true'], [aria-current]),
.nav.is-mega.is-dark .nav__lang :is(button, a, span):is([aria-pressed='true'], [aria-current]),
html:not(.js) .nav:has(.nav__item:hover, .nav__item:focus-within) .nav__lang :is(button, a, span):is([aria-pressed='true'], [aria-current]) { background: var(--light-01); color: var(--dark-01); }

/* Com o menu aberto, os rótulos vizinhos recuam e o aberto fica
   inteiro — é o que diz "você está aqui" sem sublinhado nem seta. */
.nav.is-mega .nav__link { opacity: 0.5; }
.nav.is-mega .nav__item.is-aberto > .nav__link { opacity: 1; }

/* A grade do painel é a COLUNA DO SITE (1216): o texto dos itens a prumo
   com a margem do conteúdo das páginas (a placa de hover sobra 12 para
   fora, pelo `margin-left` negativo), e o card na margem direita dela.
   Com os rótulos no centro da barra não há rótulo para alinhar — e
   alinhar as colunas ao primeiro deles as jogaria em cima do card. */
.mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr) clamp(260px, 25.5vw, 368px);
  column-gap: 48px;
  width: min(1216px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  /* Respiro (2026-09-23, "tá tudo muito próximo … com mais respiro fica
     mais elegante"): era 36 / 44. */
  padding: 56px 0 64px;
}

.mega__itens {
  grid-column: 1;
  margin-left: -16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  align-content: start;
}

.mega__coluna {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item: título e descrição, leves. O hover é uma PLACA — a superfície
   do site, raio 8 — e não troca a cor do título. */
.mega__item,
.mega__mini {
  border-radius: var(--r-caixa);
  font-family: var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 0.25s var(--ease-out-soft);
}

.mega__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

/* no vidro escuro a placa é branca a 8% */
.mega__item:hover,
.mega__mini:hover,
.mega__item:focus-visible,
.mega__mini:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
}

/* As camadas EM CONSTRUÇÃO no painel de Soluções: parágrafo e não link,
   sem placa no hover, "Building" no lugar da descrição (2026-09-25; uma
   etiqueta em cada item foi tentada e recusada). */
.mega__item.mega__item--building { margin: 0; cursor: default; }
.mega__item--building:hover { background: none; }

.mega__item b {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--light-01);
}

.mega__item span {
  /* Duas linhas, no máximo: a copy é recortada para caber (ver o molde),
     e o corte aqui é só a rede de segurança. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-64);
}

/* O rótulo da lista curta assenta na linha do primeiro título ao lado:
   a placa tem 16 de folga em cima, e o eyebrow ocupa a mesma altura. */
.mega__rotulo {
  margin: 0;
  padding: 20px 16px 4px;
}

.mega__mini {
  display: block;
  padding: 10px 16px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  color: var(--light-01);
}

/* O card: capa 16:9 na caixa do site, a manchete e uma AÇÃO sublinhada
   ("Ler o artigo", "Agende uma demo") — o card da Wonderful. */
.mega__card {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  font-family: var(--font-display);
  letter-spacing: 0;
  text-transform: none;
}

.mega__card-capa {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 2px;
  border-radius: var(--r-caixa);
  overflow: clip;
  background: rgba(255, 255, 255, 0.08);
}

.mega__card-capa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-soft);
}

.mega__card:hover .mega__card-capa img { transform: scale(1.03); }

.mega__card b {
  /* 4 e não 3: a 1024 o card tem 261 e a manchete de Soluções (a mais
     longa, 123 caracteres) cortava com reticência na terceira linha. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--light-01);
}

.mega__card-acao {
  align-self: flex-start;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--light-01);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s var(--ease-out-soft);
}

.mega__card:hover .mega__card-acao { text-decoration-color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .mega,
  .mega__inner,
  .mega-folha,
  .mega__card-capa img { transition: none !important; }
  .mega__inner { transform: none; }
}

.nav__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-redondo);
  background: var(--light-32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.5s var(--ease-out-soft);
}

.nav.is-dark .nav__lang {
  background: rgba(49, 53, 61, 0.08);
}

/* `a` e `span` desde 2026-10-01: nas páginas em inglês o idioma atual é
   um `span[aria-current]` e o outro, um link (`idiomas.mjs`). O `:is()`
   tem o peso do `button` que ele substitui — a cascata não muda. */
.nav__lang :is(button, a, span) {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--r-redondo);
  background: transparent;
  color: currentColor;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out-soft),
    color 0.3s var(--ease-out-soft);
}

.nav__lang :is(button, a, span):is([aria-pressed='true'], [aria-current]) {
  background: var(--light-48);
  color: var(--light-01);
}

/* o idioma em que se está não é clicável: sem a mãozinha */
.nav__lang span[aria-current] { cursor: default; }

.nav.is-dark .nav__lang :is(button, a, span):is([aria-pressed='true'], [aria-current]) {
  background: rgba(49, 53, 61, 0.88);
  color: var(--light-01);
}

/* ─────────────────────────────────────────────────────────────────
   Section 2 + 3 — Healthcare AI Services Co / Intelligence Layers
   One continuous scroll-driven stage.
   ───────────────────────────────────────────────────────────────── */


/* Ground: flat Light-01 in section 2, soft gradient once the stage opens */

/* ── Menu do celular ────────────────────────────────────────────── */
/* O painel fica ABAIXO da barra no empilhamento (z 90 contra 100). É o
   que mantém o logo, o seletor de idioma e o próprio X por cima dele e
   clicáveis — sem isso o painel cobriria o botão que o fecha. */

.nav__burguer {
  display: none;
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav__burguer span {
  position: absolute;
  left: 2px;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition:
    transform 0.42s var(--ease-out-expo),
    opacity 0.2s linear;
}

.nav__burguer span:nth-child(1) {
  top: 8px;
}

.nav__burguer span:nth-child(2) {
  top: 16px;
}

/* as duas barras viram X: cada uma vai para o meio e gira */
.nav__burguer[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.nav__burguer[aria-expanded='true'] span:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.nav__painel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  /* três grupos e o contato não cabem centrados numa tela de 812: o
     painel começa abaixo da barra e ROLA */
  align-content: start;
  padding: 96px var(--gutter) 48px;
  overflow-y: auto;
  /* Preto a 80% com desfoque gaussiano da página por trás (2026-09-28,
     pedido do cliente); era Dark-01 chapado. 24 de desfoque (a barra usa
     16), para a página atrás virar só luz. Sobre página branca o fundo
     lê #333 e o texto Light-01 fica acima de 12:1. */
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s var(--ease-out-soft),
    visibility 0s linear 0.4s;
}

/* quem pede menos transparência no sistema recebe o painel opaco */
@media (prefers-reduced-transparency: reduce) {
  .nav__painel {
    background: var(--dark-01);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* `[hidden]` perde para `display` de autor — § 6 das diretrizes */
.nav__painel[hidden] {
  display: none;
}

.nav__painel.is-aberto {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s var(--ease-out-soft),
    visibility 0s linear 0s;
}

/* O PAINEL COMO LISTA (2026-09-28: "está muito simples… faz falta ter
   algumas linhas divisórias… uma forma uniforme de tratar cada link…
   contato está maior que os outros. Por quê?… falta capricho"). Cada
   grupo é o rótulo na voz das etiquetas do site (o quadradinho e o
   corpo de etiqueta) e, abaixo, os links em linhas IGUAIS de 20px com a
   seta de "ir para" à direita. O Contato é mais um grupo, sem rótulo —
   não é mais o de 26 à parte. A página atual fica no azul da marca.

   O FIO separa os GRUPOS, não os links ("a linha divisória só faz
   sentido se a gente estiver dividindo os grupos") — 24 de cada lado. */
.nav__painel-menu {
  display: flex;
  flex-direction: column;
}

.nav__painel-grupo + .nav__painel-grupo {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Cada GRUPO é o que entra em fila (era cada link, quando eram quatro);
   o atraso só existe na ABERTURA, senão o fechamento fica arrastado. */
.nav__painel-grupo {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}

.nav__painel.is-aberto .nav__painel-grupo {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.06s + var(--i) * 0.06s);
}

.nav__painel-rotulo {
  display: flex;
  align-items: center;
  gap: var(--tag-gap);
  margin: 0 0 12px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-64);
}

.nav__painel-rotulo::before {
  content: '';
  flex: none;
  width: var(--tag-quad);
  height: var(--tag-quad);
  background: var(--light-48);
}

.nav__painel-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--light-01);
  transition: color 0.28s var(--ease-out-soft);
}

/* A SETA DE "IR PARA": a diagonal para o canto de cima à direita, a
   mesma dos cards de case (`.case-card__ir`) — "seta completa… é mais
   indicativo"; o chevron que estava aqui lia como acordeão que abre. É o
   `assets/icons/seta-diagonal.svg` (o desenho dos cards num arquivo),
   como máscara: pega a cor do link. */
.nav__painel-menu a::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  opacity: 0.48;
  -webkit-mask: url('../assets/icons/seta-diagonal.svg') center / contain no-repeat;
  mask: url('../assets/icons/seta-diagonal.svg') center / contain no-repeat;
}

.nav__painel-menu a[aria-current='page'] { color: var(--blue); }
.nav__painel-menu a[aria-current='page']::after { opacity: 1; }
.nav__painel-menu a:active { color: var(--light-64); }

@media (max-width: 860px) {
  .nav__burguer {
    display: block;
  }

  /* Os dois controles ficam JUNTOS na direita, com o hambúrguer à
     esquerda do seletor — e nada no centro. Antes o seletor caía no meio
     da barra, porque o `space-between` distribuía três itens em três
     posições. O logo empurra o resto com `margin-right: auto`, e o
     `order` põe o hambúrguer antes do idioma sem mexer no markup. */
  .nav {
    justify-content: flex-start;
    gap: 14px;
  }

  .nav__logo {
    margin-right: auto;
  }

  .nav__burguer {
    order: 2;
  }

  .nav__lang {
    order: 3;
  }
  /* com o painel aberto a barra fica sobre fundo escuro: o tipo tem de
     ser claro, qualquer que fosse o estado dela antes */
  .nav.is-menu-aberto,
  .nav.is-menu-aberto.is-dark {
    color: var(--light-80);
  }
  /* …e o SELETOR DE IDIOMA também (2026-09-28: "praticamente apagado…
     não pode aparecer o fundo da mesma cor do fundo"). Sobre uma página
     clara ele guardava as cores dela — trilho a 8% e ativo a 88% de
     cinza-escuro — e sumia no Dark-01 do painel. Com o painel aberto: o
     trilho claro translúcido e o idioma ativo numa pílula CLARA com o
     texto escuro, o maior contraste da barra. */
  .nav.is-menu-aberto .nav__lang,
  .nav.is-menu-aberto.is-dark .nav__lang { background: var(--light-16); }
  .nav.is-menu-aberto .nav__lang :is(button, a, span):is([aria-pressed='true'], [aria-current]),
  .nav.is-menu-aberto.is-dark .nav__lang :is(button, a, span):is([aria-pressed='true'], [aria-current]) {
    background: var(--light-01);
    color: var(--dark-01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__painel,
  .nav__painel-grupo,
  .nav__burguer span {
    transition: none;
  }
  .nav__painel.is-aberto .nav__painel-grupo {
    transition-delay: 0s;
  }
}

/* ── Pré-carregamento ────────────────────────────────────────────
   Cobre a primeira tela enquanto fonte e imagens assentam. A queixa que
   ele resolve: "alguns efeitos quebram quando vão aparecer pela
   primeira vez, mas se eu voltar o scroll funcionam" — a primeira
   passagem media com a fonte de sistema e com imagens sem tamanho.

   SEM JS ele não existe: a regra abaixo só o mostra sob `html.js`, e o
   `<div>` fica invisível para quem não tem script. Nunca deixe um
   preloader capaz de esconder a página se o JS falhar. */
.pre {
  display: none;
}

.js .pre {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;

  /* Fundo em três camadas, de cima para baixo:

     1 · GRÃO — um azulejo de 140px de `feTurbulence`, rasterizado uma vez
         e repetido. Turbulência em tela cheia seria cara; num azulejo
         pequeno custa uma rasterização só.
     2 · VÉU escuro, que é o que dá o fundo escuro pedido.
     3 · O HERÓI, mas em LQIP: a foto reduzida a 32px (1,2KB, embutida em
         base64, zero requisição) e esticada para cobrir. O borrão vem da
         AMPLIAÇÃO, não de `filter: blur()` — filtro em tela cheia é
         justamente o custo que não se pode pagar enquanto a página
         carrega. E como é a mesma imagem que o herói vai mostrar, a
         saída da cortina cai em cima do que já estava ali. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    linear-gradient(rgba(14, 16, 20, 0.78), rgba(14, 16, 20, 0.86)),
    url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAEgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAEgAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICAwICAwUDAwMFBgUFBQUGCAYGBgYGCAoICAgICAgKCgoKCgoKCgwMDAwMDA4ODg4ODw8PDw8PDw8PD//bAEMBAgICBAQEBwQEBxALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/dAAQAAv/aAAwDAQACEQMRAD8A9c/Zc+F/hnVNb1v4i6lJDcNqNtJp7O0YkuVfBJaJmBWNNkhXC4IwODzX0Z8FtI+H/gHRbnwD4Zin0+LTZnwJn86SVXOd5YkHv/dAr4T/AGRfgvo3hvxLqHjS8vbzXX0WJHtoIbqZ9hwFc+UrAPuckhT8oBwQ3WvsXTtL8SaeL/W4rWVf7RuT5a3CuHVBzgx5GPY14VTn5Pdlr006HrwS5veVvmee/Fj4fw/EPxDrVraXywwm4iIn2eYQUjAKlVOc5znnjHNcT4d/Z1tjJFG3iKOeOBwJBFEQ/PG0ZYgMegyPwr1CztbzWNdv7jTrf7Q9rzcxyFoXSUH70eFbv0xzkE1d8c+NJvBfhq81nU5FXUHWNbNCVLNIQw3cKC2zqxPsO9ckMvVR883p/XU65YpwXJBH/9Dziyv76KUGO5kXOM4cjP616r4f1LUSq5upT/wNv8a8ftf9atep+HvurXyZ9Mj1vwrcXCaN44lSVldZLJgwYggmKbkH14rxD413VzceM5Ip5XkSGK3VFZiQimNThQegyc4Fe1eF/wDkBeOf9+y/9FTV4d8Zv+R2uP8Act//AEUtelS/gr+upxy/is//2Q==');
  background-size: 140px 140px, cover, cover;
  background-position: center, center, center;
  background-repeat: repeat, no-repeat, no-repeat;
  background-color: #0e1014;
  transition: opacity 0.5s var(--ease-out-soft),
    visibility 0s linear 0.5s;
}

.js .pre[data-pronto] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pre__miolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* A esfera de pontos. `width`/`height` do atributo são o buffer em
   pixels de dispositivo (2×); aqui fica a medida em CSS. */
.pre__orbe {
  width: 140px;
  height: 140px;
  color: var(--light-01);
}

.pre__trilho {
  width: 148px;
  height: 2px;
  overflow: clip;
  border-radius: var(--r-redondo);
  background: rgba(255, 255, 255, 0.16);
}

/* Cresce por `transform`, não por `width`: é a única propriedade que a
   barra pode animar sem forçar layout a cada passo — e ela atualiza
   dezenas de vezes durante o carregamento, justo quando a linha
   principal está mais ocupada. */
.pre__barra {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--light-01);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out-soft);
}

@media (prefers-reduced-motion: reduce) {
  .js .pre,
  .pre__barra {
    transition-duration: 0.01s;
  }
}

/* ── 9 · Rodapé ─────────────────────────────────────────────────── */

/* Reveal do rodapé: o CTA prende no topo e o rodapé sobe por cima dele.
   Sem JS — é o `sticky` fazendo o trabalho.

   A direção importa: prender o **rodapé** no fundo (`sticky; bottom: 0`)
   só funciona se ele couber na viewport, e o nosso tem 864 contra 816 —
   os primeiros 48px, onde mora o logo, ficariam cortados para sempre.
   Prendendo o CTA, o reveal funciona com rodapé de qualquer altura. */
.site-foot {
  position: relative;
  z-index: 1;
  overflow: clip;
  isolation: isolate;

  /* A ALTURA É A DO CONTEÚDO — padrão do site desde 2026-09-17, a
     pedido ("acho que faz sentido adotar esse padrão aqui da página de
     carreiras em todas as páginas"). Antes era `min-height: 100svh`,
     pedido da home para o reveal por cima do palco do CTA ter o que
     cobrir; em tela alta a sobra caía entre os links e a marca (143px
     contra os 64 do ritmo, medido a 1920 × 1080) e cada página parecia
     ter um rodapé diferente. O reveal continua: o conteúdo mede 868 a
     1440 × 816 e 1001 a 1920 × 1080, mais que a tela ou perto dela. */

  /* `backdrop-filter` NÃO funciona aqui e a causa está provada: o palco
     do CTA é `position: fixed`, e elemento fixo não entra no fundo
     amostrado por um irmão que não é fixo (com o palco em `absolute` o
     desfoque aparece; fixo, zero). Tentado e revertido — o rodapé volta
     ao preenchimento opaco que sempre teve. */
  background: var(--dark-01);
  color: rgba(255, 255, 255, 0.64);
}

/* mesmo tratamento da Prova social: o Figma pede backdrop-blur(100px)
   sobre a foto; blurrar a imagem custa uma rasterização em vez de um
   filtro recalculado a cada frame */
.site-foot__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: clip;

}

.site-foot__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(56px);
  transform: scale(1.2);
}

.site-foot__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

/* O rodapé tem uma tela inteira, então o miolo precisa OCUPAR essa
   altura — senão o conteúdo fica agrupado no topo e sobra um vazio
   embaixo. Coluna com `space-between`: o bloco de cima fica no topo, a
   linha legal encosta na borda de baixo, e o que sobra vira o vão entre
   os dois. */
.site-foot__inner {
  /* UM número para os QUATRO vãos do bloco final: acima da linha de
     cima, dela até a marca, da marca até a linha de baixo, e dela até a
     linha legal. Eles são a mesma ideia — o respiro que emoldura a
     marca — e escritos à mão eles divergem, que foi exatamente o que
     aconteceu aqui. */
  --foot-ritmo: 64px;

  display: flex;
  flex-direction: column;
  padding: 32px;
}

/* Empurra o bloco final (marca + linha legal) para a borda de baixo.

   DUAS classes de propósito: `.site-foot__mark` sozinho já tem
   `margin-top` declarado em mais de um lugar, e uma regra de mesma
   especificidade perderia para a última do arquivo — foi o que
   aconteceu na primeira tentativa, que computou 64px em vez de `auto`.

   **`margin-top: auto` NÃO garante respiro nenhum.** Ele distribui a
   folga que sobra e computa ZERO quando não sobra nada — e no celular
   nunca sobra: o conteúdo mede 895,6 contra os 812 de `100svh`. O
   resultado era a linha de cima COLADA no "Fale conosco", com 0px, e a
   marca a 45px do outro lado da mesma linha. (Uma versão anterior deste
   comentário afirmava o contrário; estava errada.)

   Por isso o respiro de cima mora no VIZINHO, como `margin-bottom` do
   `.site-foot__top`: ali ele é conteúdo, entra na conta antes do
   `auto`, e o `auto` só distribui o que sobrar DEPOIS dele. Os dois
   convivem — quando há folga a marca desce, e quando não há o respiro
   continua de pé. */
.site-foot .site-foot__mark {
  margin-top: auto;
}

/* O respiro acima da linha de cima. Ver acima: ele não pode morar no
   `.site-foot__mark`, senão o `auto` o substitui. */
.site-foot__top {
  margin-bottom: var(--foot-ritmo);
}

.site-foot__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.site-foot__logo {
  display: block;
  width: 88px;
  height: 24px;
  color: var(--light-01);
}

.site-foot__logo svg {
  width: 100%;
  height: 100%;
}

.site-foot__tag {
  margin-top: 14px;
  font-weight: 300;
  font-size: 14px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.64);
}

.site-foot__cols {
  display: flex;
  gap: 56px;
}

.site-foot__col {
  width: 160px;
}

/* o Figma reserva 38px para o cabeçalho da coluna, com a marca a 6px do
   topo — não é margem, é a altura do bloco */
.site-foot__col h3 {
  display: flex;
  align-items: flex-start;
  gap: var(--tag-gap);
  height: 38px;
  padding-top: 6px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 0.7;
  /* não tinha tracking nenhum */
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.site-foot__col h3::before {
  content: '';
  width: var(--tag-quad);
  height: var(--tag-quad);
  background: currentColor;
}

.site-foot__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-foot__col a {
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.64);
  transition: color 0.3s var(--ease-out-soft);
}

.site-foot__col a:hover {
  color: var(--light-01);
}

.site-foot__mark {
  padding: var(--foot-ritmo) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-foot__mark {
  position: relative;
}

.site-foot__mark img {
  width: 100%;
  height: auto;
}

/* A partir do momento em que as partículas assumem, a imagem sai — mas
   ela é quem segurou o espaço até aqui, e continua sendo a marca inteira
   sem JS, com movimento reduzido ou em aparelho de toque. */
.site-foot__mark[data-mark='vivo'] img {
  display: none;
}

.site-foot__dots {
  display: block;
  width: 100%;
}

.site-foot__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: var(--foot-ritmo);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
}

.site-foot__legal nav {
  display: flex;
  gap: 24px;
}

.site-foot__legal a {
  transition: color 0.3s var(--ease-out-soft);
}

.site-foot__legal a:hover {
  color: var(--light-01);
}

/* ─────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .nav__menu {
    gap: 28px;
  }
}

/* ── Visão · CTA · Rodapé · responsivo ──────────────────────────── */

@media (max-width: 1100px) {
  .site-foot__top {
    flex-direction: column;
    gap: 48px;
  }
  .site-foot__cols {
    flex-wrap: wrap;
    gap: 32px 48px;
  }
}

@media (max-width: 860px) {
  .site-foot__inner {
    /* O ritmo do rodapé encolhe junto com a tela — e como os quatro vãos
       leem daqui, basta este número. Antes eram três `44px` escritos à
       mão e um quarto vão que não existia. */
    --foot-ritmo: 44px;

    padding: 32px var(--gutter);
  }
  .site-foot__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .nav__menu {
    display: none;
  }
  .foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .nav {
    transition: color 0.5s var(--ease-out-soft),
      background-color 0.5s var(--ease-out-soft),
      opacity 0.4s var(--ease-out-soft),
      transform 0.4s var(--ease-out-soft);
  }
}