/* Grupo Dls/ - header e mega-menu */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: 88px;
  display: flex;
  align-items: center;
  /* No topo da página o header é o que sempre foi: degradê preto de cima
     para baixo, que segura o contraste do logotipo contra o vídeo do
     hero. E sem borda inferior, nem transparente - sobre o hero qualquer
     régua ali embaixo vira uma costura horizontal atravessando o vídeo. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-black) 88%, transparent) 0%,
    color-mix(in srgb, var(--c-black) 55%, transparent) 45%,
    transparent 100%
  );
  transition:
    height var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out),
    opacity var(--dur-base) linear;
}

/* ---------- a inversão, só a partir da rolagem ----------
   Rolando, o fundo sai de cena por inteiro e o header passa a ser
   composto em `difference` contra o que estiver atrás dele: cada item
   resolve o próprio contraste sozinho, inclusive uma palavra que cai
   metade sobre uma faixa clara e metade sobre uma escura, que é o caso
   da referência. Branco sobre preto continua branco (255-0); branco
   sobre o off-white da convergência vira #0e0e0e (255-241).

   E só a partir daqui, não no topo: sobre o vídeo do hero a subtração
   fica à mercê do quadro que estiver passando, e o logotipo perderia
   contraste em qualquer clareira da imagem. Na primeira tela quem
   protege a leitura é o degradê; da rolagem em diante, a operação.

   O fundo tem que sair junto: qualquer cor pintada aqui entraria na
   conta da subtração. */
.header.is-compact {
  height: 64px;
  background: none;
  mix-blend-mode: difference;
}

/* No rodapé o header sai de cena. A assinatura em escala é o ponto final
   da página, e um menu flutuando por cima dela transforma o ponto final
   em vírgula. */
.header.is-hidden {
  translate: 0 -100%;
  opacity: 0;
  pointer-events: none;
}

/* Tudo branco, sempre - no topo porque o degradê é escuro, e da rolagem
   em diante porque quem decide o que aparece preto é a subtração contra
   o fundo, não uma classe de tema. A cascata item a item deixou de
   existir junto com o `data-theme`: não há mais troca a ser coreografada,
   a inversão é resultado de composição e acontece no mesmo quadro em que
   o fundo muda.

   O painel do mega-menu não precisa de exceção nos dois estados: ele é
   preto opaco e cobre os 88px atrás do header - no topo o degradê preto
   some dentro dele, e rolado a subtração devolve branco. */
.header {
  --fg: var(--c-white);
  color: var(--fg);
}

/* Só o hover continua sendo transição de verdade - é o único estado do
   header que muda por vontade de alguém, e não por causa da rolagem. */
.logo,
.nav__item,
.header .btn,
.header__burger {
  transition-property: color, background-color, border-color;
  transition-duration: var(--dur-micro);
  transition-timing-function: var(--ease-out);
}

/* Três zonas em grade, e as duas das pontas com a mesma largura: é isso
   que põe a navegação no eixo da página, e não no meio do que sobrou.
   Em flex, a nav ficaria centralizada entre um logotipo de 96px e um
   botão de 190px, ou seja, deslocada quase 50px para a esquerda. */
.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--margin);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
}

.header__cta {
  justify-self: end;
}

/* ---------- logotipo ----------
   Inline para que o ponto amarelo seja endereçável: é nele que o
   squircle do loader encaixa no fim da abertura. */
.logo {
  flex: none;
  display: block;
  width: 96px;
  color: var(--fg);
}

.logo svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* O ponto é a única cor que sobra no header, e ele fica - é nele que o
   squircle amarelo do loader encaixa, e trocá-lo por branco quebraria a
   chegada da abertura.

   Sobre fundo preto a subtração devolve o amarelo intacto (|0-255|,
   |0-221|, |0-0|). Sobre o off-white da convergência ela devolveria azul
   (|241-255|, |241-221|, |241-0| = 14, 20, 241), e aí sim o ponto vira
   outra marca. É a única exceção que a cena precisa avisar - e é para
   isso que `definirSuperficie` continua existindo. */
.logo #logo-dot {
  fill: var(--c-yellow);
  transition: fill var(--dur-micro) var(--ease-out);
}

/* `data-surface` e não `data-theme`: o seletor solto `[data-theme=light]`
   de tokens.css trocaria `--fg` para preto dentro do header, e aí a
   subtração devolveria branco - inversão em cima de inversão, que é o
   avesso do avesso. O header não tem tema; ele tem notícia de onde está
   pisando. */
.header[data-surface="light"] .logo #logo-dot {
  fill: currentColor;
}

/* Sobre o campo lime da /performance a subtração devolveria #2C00CA. Aqui o
   header sai do `difference` e vira preto sólido - que sobre lime não é um
   conserto, é a pílula preta do sistema de identidade flutuando no campo
   verde. Preto sobre #d3ff35 mede ~16:1.

   `isolation: isolate` junto com o `mix-blend-mode: normal`: sem isolar, o
   header continua participando do grupo de mesclagem do pai e um resto da
   composição anterior vaza na troca.

   `#header` e não `.header` no seletor: `.frente-page .header` (frente.css,
   "nada a coreografar") tem a mesma especificidade de duas classes que
   `.header[data-surface="campo"]` teria, e carrega depois de header.css no
   documento - empate de especificidade, e a ordem de carga decide, contra
   esta regra. Medido: com o seletor de classe, o atributo mudava a cor do
   texto mas `mix-blend-mode` continuava `difference`. O id já existe no
   mesmo elemento (`<header class="header" id="header">`), então subir para
   ele é o mínimo que resolve o empate sem tocar em frente.css.

   `campo` E NÃO `lime`, e o valor foi generalizado quando o mantra da
   /comunicacao virou amarelo. A pergunta que estas regras respondem nunca
   foi "o chão é lime?", foi "o chão é um campo saturado e claro, onde
   `difference` quebra?" - e a resposta é a mesma para os dois. Sobre
   #d3ff35 o branco subtraído devolve #2C00CA; sobre #ffdd00 devolve
   #0022FF. Dois azuis-violeta, o mesmo defeito, a mesma correção. Um
   segundo valor de atributo seria a segunda cópia da mesma regra, e a
   próxima unidade a ganhar campo próprio faria a terceira. */
#header[data-surface="campo"] {
  mix-blend-mode: normal;
  isolation: isolate;
  /* `--fg` E NÃO `color`. O header não pinta os filhos por herança: cada
     peça repete `var(--fg)` por conta própria - `.logo`, `.nav__item`,
     `.header__burger`. Declarando só `color` aqui, o elemento header
     virava preto e os filhos continuavam brancos: medido, branco sobre
     #d3ff35 dá 1,16:1 e sobre #ffdd00 dá 1,35:1 - some nos dois. Trocando
     a variável, a folha inteira do header segue junto numa linha. Preto
     mede 18,1:1 sobre o lime e 15,6:1 sobre o amarelo. */
  --fg: var(--c-black);
}

/* `.header .btn` (mais abaixo) não lê `--fg`: ele grava `--btn-bg` e
   `--btn-fg` literais nele mesmo, contando com o `difference` sempre
   ligado do resto do site para virar pílula escura sobre chão claro.
   Aqui o `difference` está desligado, e literal branco sobre campo mede
   1,16:1 no lime e 1,35:1 no amarelo - o limite da pílula some.

   Isto TEM que mirar `.btn` direto, e não só `#header[data-surface="campo"]`
   como a regra do `--fg` acima: `.header .btn` já grava `--btn-bg` no
   próprio elemento, e uma custom property declarada no elemento nunca
   herda do ancestral, não importa a especificidade de quem declarou lá
   em cima. Medido: com a variável só no `#header`, `.header__cta`
   continuava branco. Precisa de `.btn` no seletor para vencer no mesmo
   elemento. Mesma lógica do `--fg`: campo claro, pílula escura. */
#header[data-surface="campo"] .btn {
  --btn-bg: var(--c-black);
  --btn-fg: var(--c-white);
}

/* O `:hover` de `.header .btn` (mais abaixo) grava `--btn-bg: var(--c-yellow)`
   literal, e sem o `difference` para disfarçar isso quebra nos dois campos
   por motivos diferentes. Sobre o lime é amarelo puro a 1,16:1, e ainda por
   cima é a cor da unidade Comunicação aparecendo na página da Metrik. Sobre
   o campo amarelo é a cor CERTA de unidade - e some do mesmo jeito, porque
   amarelo sobre amarelo é 1:1. Precisa de valor fixo neste escopo, senão a
   declaração acima só cobre o repouso e o hover cai de volta na regra
   geral. Mesma pílula escura do repouso. */
#header[data-surface="campo"] .btn:hover {
  --btn-bg: var(--c-black);
  --btn-fg: var(--c-white);
}

/* Menu aberto sobre o lime: o painel é preto opaco e COBRE o header
   (`top: 0`, z-index 40 contra 50), então o chão sob os itens deixa de ser
   lime e passa a ser preto - com `--fg` preto seria preto sobre preto.
   Medido antes desta regra: `.nav__item` voltava `rgb(0,0,0)` com o painel
   aberto.

   `body.menu-aberto` é como o resto do sistema já expressa este estado
   fora do painel (`base.css`, a trava de rolagem): `.mega.is-open` está num
   IRMÃO do header, não num ancestral, e daí não alcança. Escopo intacto -
   a regra só existe junto de `[data-surface="campo"]`, que só existe
   enquanto o header pisa no mantra da /performance ou no da /comunicacao. */
body.menu-aberto #header[data-surface="campo"] {
  --fg: var(--c-white);
}

/* Mesmo raciocínio da pílula acima, invertido, e pelo mesmo motivo mirando
   `.btn` direto (`.header .btn` grava `--btn-bg` no próprio elemento, não
   herda do ancestral): com o painel aberto o chão sob o header vira preto
   (ver comentário do painel abaixo), e chão escuro pede pílula clara - o
   par que `.header .btn` já usa como padrão do resto do site. */
body.menu-aberto #header[data-surface="campo"] .btn {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
}

/* Mesmo motivo do hover de escopo lime acima: sem valor fixo aqui, o
   hover cai na regra geral (`--btn-bg: var(--c-yellow)`). Com o painel
   aberto o chão é preto, e amarelo sobre preto até fecha 3:1 - mas seria
   a cor errada de unidade aparecendo de novo. Mesma pílula clara do
   repouso. */
body.menu-aberto #header[data-surface="campo"] .btn:hover {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
}

.header[data-surface="campo"] .logo #logo-dot {
  fill: currentColor;
}

/* Estado de abertura: as letras entram por baixo, o ponto chega do loader. */
.js .logo.is-sealed .logo__letter {
  opacity: 0;
  transform: translateY(35%);
}

.js .logo.is-sealed #logo-dot {
  opacity: 0;
}

/* ---------- navegação ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-small);
}

.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 0;
  padding: var(--sp-2) 0;
  cursor: pointer;
  color: var(--fg);
  white-space: nowrap;
}

/* ---------- indicador de dropdown ----------
   O squircle da marca, em miniatura. Fechado é contorno; aberto enche
   com a cor da unidade e cresce um passo. Nenhuma seta, nenhum chevron:
   a página inteira já é feita deste objeto, e ele é o único sinal que
   não vem emprestado de outro sistema. */
.nav__mark {
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 20.8%;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    scale var(--dur-base) var(--ease-expand);
}

.nav__item:hover .nav__mark {
  background: currentColor;
}

.nav__item[aria-expanded="true"] .nav__mark {
  background: var(--unit, var(--c-yellow));
  border-color: var(--unit, var(--c-yellow));
  scale: 1.5;
}

.nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__item:hover::after,
.nav__item[aria-expanded="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Branco de fundo, preto de texto - e é só. A troca de lado sobre seção
   clara não precisa ser escrita: a subtração já entrega #0e0e0e de fundo
   com #f1f1f1 de texto, que é exatamente o botão invertido. Declarar
   também aqui seria inverter duas vezes. */
.header .btn {
  padding: 0.72em 1.3em;
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
}

.header .btn:hover {
  --btn-bg: var(--c-yellow);
  --btn-fg: var(--c-black);
}

/* ---------- painel do mega-menu ----------
   Desce como uma folha só. Cada painel puxa a cor da sua unidade
   como acento, nunca como fundo. */
/* O painel é preto, e não o fundo do tema. Ele lia `--bg`, e `--bg` é o
   chão da PÁGINA: na home, preto; numa página de case, que roda em
   `data-theme="light"`, off-white. O mesmo menu abria escuro num lugar e
   claro no outro - e o comentário logo acima jurava que ele era preto
   opaco.

   Preto chapado, e a paleta escura declarada aqui dentro junto: o painel
   não herda mais o tema da página, ele impõe o próprio. Sem isso, numa
   página clara o texto continuaria preto sobre preto.

   O opaco também tem função estrutural - ele cobre os 88px do header por
   trás, e é o que faz a subtração do `difference` devolver branco nos
   itens do menu enquanto o painel está aberto, em qualquer página. */
.mega {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-menu);
  padding-top: 88px;
  background: var(--c-black);
  /* O PAINEL TROCA O TEMA INTEIRO, e `--bg` faz parte dele. Ele faltava:
     o painel e' preto em toda pagina, mas em `/comunicacao`, `/cases` e
     nas outras de tema claro o `--bg` continuava sendo o #f1f1f1 da
     pagina. Quem le so' `--fg` nao percebia; quem le o par percebia
     feio. Foi o que apareceu ao pôr um `.btn` aqui dentro: `.btn` monta
     `--btn-bg: var(--fg)` e `--btn-fg: var(--bg)`, e o botao saiu branco
     com texto #f1f1f1 - invisivel. `.mega__cta` escapava por declarar os
     dois tokens na mao.
     Com `--bg` declarado, qualquer objeto do sistema funciona aqui sem
     saber que esta dentro do menu. */
  --bg: var(--c-black);
  --fg: var(--c-white);
  --fg-muted: var(--c-gray-on-dark);
  --line: var(--c-line-dark);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path var(--dur-base) var(--ease-expand);
}

.mega.is-open {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.mega__panel {
  display: none;
  padding-block: var(--sp-7) var(--sp-8);
}

.mega__panel.is-active {
  display: block;
}

.mega__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.mega__services {
  columns: 2;
  column-gap: var(--sp-7);
  font-size: var(--fs-body);
}

.mega__services a {
  display: block;
  padding: 0.42em 0;
  color: var(--fg-muted);
  break-inside: avoid;
  transition: color var(--dur-micro) var(--ease-out);
}

.mega__services a:hover {
  color: var(--fg);
}

/* Lista de duas ou três linhas (o painel do Grupo). Em duas colunas ela
   viraria dois itens soltos nas pontas do painel, com um vão de 56px no
   meio e nada dentro dele. Coluna única mantém a lista lendo como lista. */
.mega__services--curta {
  columns: 1;
}

.mega__services a::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  margin-right: 0;
  vertical-align: middle;
  background: var(--accent, var(--c-yellow));
  transition:
    width var(--dur-base) var(--ease-out),
    margin-right var(--dur-base) var(--ease-out);
}

.mega__services a:hover::before {
  width: 18px;
  margin-right: 10px;
}

/* ---------- saída do painel ----------
   A lista de serviços é uma lista de âncoras: ela leva a um trecho da
   página da frente, nunca à frente inteira. Sem um destino cheio, quem
   abre o menu sem saber o que procurar não tem para onde ir.

   Secundário na forma - contorno, e não preenchimento, para não
   competir com o "Fale com a gente" do header - e primário no peso:
   ocupa a coluna inteira e usa a cor da unidade no contorno. */
.mega__aside {
  display: grid;
  align-content: end;
  gap: var(--sp-4);
  height: 100%;
}

.mega__cta {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  justify-content: space-between;
  width: 100%;
  padding: 1.15em 1.5em;
  border-color: var(--accent, var(--c-yellow));
  font-size: var(--fs-body);
  white-space: normal;
  text-align: left;
}

.mega__cta:hover {
  --btn-bg: var(--accent, var(--c-yellow));
  --btn-fg: var(--c-black);
  border-color: var(--accent, var(--c-yellow));
}

/* ---------- entrada do painel ----------
   Os serviços sobem em cascata quando o painel abre. É a mesma cascata
   da inversão do header, no mesmo sentido de leitura: o menu não é uma
   folha que aparece, é uma lista que se escreve. */
@keyframes mega-item {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.mega__panel.is-active .mega__services a,
.mega__panel.is-active .mega__cta {
  animation: mega-item 520ms var(--ease-out) backwards;
  animation-delay: calc(90ms + var(--i, 0) * 34ms);
}

.mega__panel.is-active .mega__cta {
  animation-delay: 320ms;
}

/* ---------- mobile ---------- */
.header__burger {
  display: none;
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg);
}

.header__burger span {
  display: block;
  width: 22px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

.header__burger[aria-expanded="true"] span:first-child {
  transform: translateY(6px) rotate(45deg);
}
.header__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header__burger[aria-expanded="true"] span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .header {
    height: 68px;
  }
  .header.is-compact {
    height: 60px;
  }
  .nav,
  .header__nav,
  .header__cta {
    display: none;
  }
  /* Sem as três zonas, o header volta a ser logotipo de um lado e
     burger do outro. */
  .header__inner {
    grid-template-columns: 1fr auto;
  }
  .header__burger {
    display: block;
  }
  .mega {
    padding-top: 68px;
    height: 100dvh;
    overflow-y: auto;
  }
  .mega__panel {
    display: block;
    padding-block: var(--sp-5);
    border-top: 1px solid var(--line);
  }
  .mega__panel.is-active .mega__grid {
    display: grid;
  }
  .mega__grid {
    display: none;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding-bottom: var(--sp-5);
  }
  .mega__accordion {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    background: none;
    border: 0;
    color: var(--fg);
    font-size: var(--fs-title);
    font-weight: 300;
    letter-spacing: var(--tr-display);
    text-align: left;
    cursor: pointer;
  }
  .mega__services {
    columns: 1;
  }
  .mega__aside {
    align-content: start;
  }
  .mega__secondary {
    display: grid;
    justify-items: start;
    gap: var(--sp-3);
    padding-block: var(--sp-6);
    border-top: 1px solid var(--line);
    font-size: var(--fs-title);
    font-weight: 300;
  }

  /* ---------- a acao, e nao o terceiro destino ----------
     Cases e Conteudo sao lugares para onde ir; "Fale com a gente" e' o
     que a pagina quer que aconteca. Em forma de link, os tres pesavam
     igual - e como o `.header__cta` sai do cabecalho abaixo de 1024px,
     a acao principal do site nao tinha forma de acao em tela nenhuma de
     celular.

     Cheio e na largura do texto, como o botao do cabecalho que ele
     substitui aqui - e nao contornado e 100% como os `.mega__cta` dos
     paineis, que sao convites para conhecer uma unidade. Cheio contra
     contornado e' o que separa a acao do destino.

     O `--i:3` continua valendo: ele entra na mesma cascata das duas
     linhas acima, por ultimo. O `font-size`/`font-weight` vem do proprio
     `.btn`, que ganha da heranca de `.mega__secondary`. */
  .mega__contato {
    margin-top: var(--sp-3);
  }

  /* ---------- abertura no celular ----------
     No desktop o painel é uma folha que desce e já está inteira na tela.
     No celular ele é a tela toda, e uma folha inteira aparecendo de uma
     vez não tem direção nenhuma: as linhas entram em cascata, de cima
     para baixo, na ordem em que serão lidas.

     Transição e não animação: o mesmo par de regras faz a saída ao
     fechar, sem precisar de uma segunda keyframe nem de classe extra. */
  .mega__panel,
  .mega__secondary a {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 480ms var(--ease-out),
      transform 620ms var(--ease-out);
  }

  .mega.is-open .mega__panel,
  .mega.is-open .mega__secondary a {
    opacity: 1;
    transform: none;
    transition-delay: calc(140ms + var(--i, 0) * 70ms);
  }

  /* O acordeão aberto vira o item vivo do menu: o "+" gira até virar
     um "×" e o rótulo assume o peso da lista que ele abriu. */
  .mega__accordion span {
    display: inline-block;
    font-size: 1.4em;
    line-height: 1;
    transition: transform var(--dur-base) var(--ease-expand);
  }

  .mega__accordion[aria-expanded="true"] span {
    transform: rotate(135deg);
  }
}

@media (min-width: 1024px) {
  .mega__accordion {
    display: none;
  }
  .mega__secondary {
    display: none;
  }
}