/* ==========================================================================
   NAVEGAÇÃO DO SITE — megamenu do topo e rodapé completo.

   POR QUE UM ARQUIVO SÓ, CARREGADO POR ÚLTIMO
   Cada página tem o próprio <style> inline (herança do site), e o topo/rodapé
   precisa ser IGUAL nas dezoito. Duplicar o megamenu em cada arquivo seria
   dezoito cópias para manter em sincronia. Aqui ele existe uma vez; a ordem
   de carregamento é `<style> inline → theme.css → layout.css → nav.css`, ou
   seja este arquivo é o último e vence os empates de especificidade sem
   precisar de `!important` (as exceções estão comentadas caso a caso).

   O que este arquivo NÃO faz: cor. Tudo sai dos tokens `--neutral-*` /
   `--primary-*`, então o megamenu já nasce com tema escuro pelo theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Estrutura da barra

   Posição, altura, logo e botão de tema. Estava no <style> de cada página; as
   páginas de documento não tinham nada disso e ficavam com o topo desmontado
   quando passaram a usar o megamenu.
   -------------------------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 203, e não o 3 que estava no <style> das páginas: o layout.css documenta a
     escala do topo (202 quadros de produto · 203 header · 204 réguas verticais
     · 300 header ao rolar) e declara `header { z-index: 203 }`. Como este
     arquivo carrega DEPOIS dele com a mesma especificidade, repetir o 3 aqui
     rebaixava o topo para trás das réguas e do conteúdo. */
  z-index: 203;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--neutral-30);
  transition: all 0.35s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  transition: height 0.35s ease;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img {
  height: 32px;
  width: auto;
}
/* Sufixo do produto ao lado da logo ("Flow", "Pulse"): a marca é uma só, o
   que muda é o módulo. Fica numa pílula para não competir com a logo. */
.logo-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-300);
  border: 1px solid var(--neutral-40);
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--neutral-30);
  background: transparent;
  border-radius: 999px;
  color: var(--neutral-300);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover {
  color: var(--neutral-900);
  border-color: var(--neutral-60);
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
}

/* --------------------------------------------------------------------------
   1. Barra do topo

   O `.header-inner` do site é `space-between` com três filhos (logo, nav,
   botão de tema). Aqui o nav cresce e passa a conter DOIS blocos: a lista de
   menus, que fica colada na logo, e as ações (Entrar / Agendar demo), que vão
   para a direita. É o `margin-left:auto` do `.nav-actions` que separa os dois.
   -------------------------------------------------------------------------- */
header .header-inner {
  gap: 16px;
  position: relative;
}

/* Fora do scroll o header vive em z-index 203 e as réguas verticais da página
   correm em 204 — ou seja, por cima. Uma linha atravessando a barra
   transparente é o desenho pretendido; atravessando o cartão do megamenu, não.
   Com um painel aberto o header sobe acima de tudo. */
header:has(.has-mega.open) {
  z-index: 320;
}

header .header-inner > nav.mainnav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  /* layout.css empurra o nav inteiro para a direita com `margin-left:auto`.
     Com megamenu isso é errado: a lista de menus pertence à logo e as ações
     é que vão para a ponta. Reposicionado item a item logo abaixo. */
  margin-left: 8px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Item de menu: <a> simples ou <button> que abre painel. Os dois desenham
   igual — o botão precisa apagar a aparência nativa. */
.nav-list > li > a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--neutral-200);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.nav-list > li > a:hover,
.nav-trigger:hover,
.nav-trigger[aria-expanded='true'] {
  background: color-mix(in srgb, var(--neutral-900) 6%, transparent);
  color: var(--neutral-900);
}

/* Página atual marcada no menu — quem chegou por link externo precisa saber
   onde está sem ler a URL. */
.nav-list > li > a[aria-current='page'] {
  color: var(--neutral-900);
  font-weight: 600;
}

.nav-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.nav-trigger[aria-expanded='true'] .nav-chev {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   2. Ações do topo: Entrar (texto) e Agendar demo (pílula escura)

   Dois pesos diferentes de propósito: "Entrar" é para quem já é cliente e
   sabe o que procura; "Agendar demo" é a conversão da página e por isso fica
   com a pílula sólida — a mesma do `.nav-cta` que o layout.css já desenha.
   -------------------------------------------------------------------------- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 16px;
  flex-shrink: 0;
}

.nav-login {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  transition: background 0.2s;
}
.nav-login:hover {
  background: color-mix(in srgb, var(--neutral-900) 6%, transparent);
}

/* O `.nav-cta` de layout.css já é a pílula escura com seta. Só o tamanho
   muda aqui, para caber junto do "Entrar" sem esticar a barra. */
.nav-actions .nav-cta {
  padding: 9px 18px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Painel do megamenu

   Ancorado no `.header-inner` (e não no <li>), largura do container: os painéis de
   Produtos têm três colunas e não caberiam sob um item de 90px. O painel
   abre por hover no desktop e por clique em qualquer entrada — o JS é quem
   alterna `[aria-expanded]`, e o CSS só reage a ele. Assim teclado e mouse
   passam pelo mesmo caminho.

   O <li> NÃO pode ser `position: relative`: se for, o painel se ancora nele e
   fica com a largura do item (medido: 107px de largura por 1434px de altura,
   uma coluna de texto vertical). A âncora é o `.header-inner`, que já é
   relativo, e é o que dá ao painel a largura da barra.
   -------------------------------------------------------------------------- */
.mega {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1180px;
  z-index: 320;

  background: var(--neutral-0);
  border: 1px solid var(--neutral-30);
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(14, 17, 22, 0.14),
    0 2px 8px rgba(14, 17, 22, 0.06);
  padding: 26px;

  /* Fechado é `visibility:hidden` + opacidade 0, não `display:none`: assim a
     transição existe e o painel continua fora da ordem de foco quando
     escondido (visibility resolve as duas coisas). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.has-mega.open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ponte invisível entre o item e o painel: sem ela, os 6px de folga entre a
   barra e o cartão faziam o hover cair no meio do caminho e o menu fechar
   enquanto o ponteiro descia. */
.mega::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.mega-inner {
  display: grid;
  gap: 8px 20px;
}
.mega--3 .mega-inner {
  grid-template-columns: repeat(3, 1fr);
}
.mega--2 .mega-inner {
  grid-template-columns: repeat(2, 1fr);
}

.mega-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-100);
  margin: 4px 0 10px 12px;
}

/* Linha do menu: ícone quadrado + título + descrição de uma frase. */
.mega-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background 0.18s;
}
.mega-item:hover {
  background: var(--neutral-20);
}

.mega-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  color: var(--primary-500);
  flex-shrink: 0;
}
.mega-ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.mega-item:hover .mega-ico {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary, #131313);
}

.mega-txt {
  min-width: 0;
}
.mega-txt strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--neutral-900);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.mega-txt small {
  display: block;
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--neutral-200);
}

/* Rodapé do painel: atalho para a página que reúne o assunto todo. */
.mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px 4px;
  border-top: 1px solid var(--neutral-30);
  font-size: 0.83rem;
  color: var(--neutral-200);
}
.mega-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--neutral-900);
}
.mega-foot a::after {
  content: '→';
  transition: transform 0.2s;
}
.mega-foot a:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. Mobile — o megamenu vira sanfona dentro de um painel rolável

   Abaixo de 1080px a barra não comporta três menus mais duas ações, então o
   nav inteiro sai do fluxo e vira uma folha que desce do topo. Os painéis
   deixam de ser cartões flutuantes e passam a ser seções empilhadas: com o
   dedo, sobrepor camadas é pior do que rolar.
   -------------------------------------------------------------------------- */
.mobile-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  border-radius: 999px;
  order: 3;
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--neutral-900);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
/* Aberto o menu, o hambúrguer vira X — sem isso não há sinal de que o mesmo
   botão fecha. */
.mobile-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.mobile-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1079px) {
  .mobile-toggle {
    display: block;
  }
  header .header-inner > .theme-toggle {
    order: 2;
    margin-left: auto;
  }

  /* `.header-inner` deixa de ser o bloco de contenção no mobile: aqui o painel
     se ancora no HEADER, que ocupa a largura inteira da tela. Preso ao
     container, ele herdaria os 32px de recuo lateral e abriria com faixas
     brancas nas bordas. */
  header .header-inner {
    position: static;
  }
  /* `absolute` ancorado no header, e NÃO `fixed`.

     Este era o motivo de o menu não abrir depois de rolar a página. Ao rolar,
     o header ganha `backdrop-filter: blur(18px)` — e `backdrop-filter` cria
     BLOCO DE CONTENÇÃO para descendentes `position: fixed`. O painel, que
     pedia `top: 72px; bottom: 0` da janela, passava a se medir contra o
     header de 72px de altura: abria com 49px e ficava invisível. No topo da
     página, onde o layout.css tira o desfoque, o mesmo painel funcionava — daí
     o sintoma de "só abre no topo".

     Ancorado no header (que é `fixed`), o desfoque deixa de importar: o
     painel é filho dele por construção. */
  header .header-inner > nav.mainnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    margin: 0;
    padding: 8px 20px 40px;
    /* `dvh` acompanha a barra do navegador do celular, que entra e sai
       durante a rolagem; com `vh` o fim da lista ficava embaixo dela. */
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--neutral-0);
    border-top: 1px solid var(--neutral-30);
    box-shadow: 0 24px 48px rgba(14, 17, 22, 0.16);
    z-index: 310;
    /* Fechado sai do fluxo de vez: um painel invisível ainda captura toque.
       A declaração `display` acima é o estado ABERTO; aqui ela é sobrescrita
       e só volta com `.open`. */
    display: none;
  }
  header .header-inner > nav.mainnav.open {
    display: block;
  }

  .nav-list {
    /* `position: static` desfaz uma regra herdada.

       Seis das páginas antigas ainda trazem, no <style> inline delas, o menu
       mobile de antes do megamenu:

           @media (max-width: 768px) { nav ul { position: absolute; top: 64px } }

       `nav ul` alcança o `.nav-list` de hoje. Absoluto, ele saía do fluxo do
       painel — que ficava com o `.nav-actions` como único filho em fluxo e
       colapsava para ~50px de altura. O menu abria e parecia não abrir, e só
       nessas seis páginas.

       Zerar aqui é melhor do que caçar a regra em cada arquivo: o dia em que
       outra página antiga entrar no megamenu, ela já vem coberta. */
    position: static;
    top: auto;
    left: auto;
    right: auto;
    background: none;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list > li {
    border-bottom: 1px solid var(--neutral-30);
  }
  .nav-list > li > a,
  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    border-radius: 0;
    padding: 16px 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-900);
  }
  .nav-list > li > a:hover,
  .nav-trigger:hover,
  .nav-trigger[aria-expanded='true'] {
    background: transparent;
  }

  .mega {
    position: static;
    max-width: none;
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    transform: none;
    /* Na sanfona a altura é que anima; opacidade sozinha deixaria o buraco
       do painel aberto no meio da lista. */
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .mega::before {
    display: none;
  }
  .has-mega.open .mega {
    display: block;
  }
  .mega--3 .mega-inner,
  .mega--2 .mega-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mega-title {
    margin: 12px 0 4px 12px;
  }
  .mega-foot {
    margin-top: 10px;
    padding-top: 12px;
  }

  .nav-actions {
    margin: 24px 0 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav-login,
  .nav-actions .nav-cta {
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.95rem;
  }
  .nav-login {
    border: 1.5px solid var(--neutral-40);
  }
}

/* Rolagem travada com o menu aberto: sem isto a página corre por baixo da
   folha e o visitante volta ao fechar num ponto que não é o dele. */
body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4b. Rodapé — base

   Moldura preta arredondada, marca, redes e colunas. Vinha do <style> de cada
   página; aqui vale para todas, inclusive as de documento.
   -------------------------------------------------------------------------- */
footer {
  padding: 64px 24px 32px;
  background: var(--neutral-0);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  /* `--surface-inverse` e NÃO `--neutral-900`.

     O `--neutral-900` faz dois papéis na rampa: é a cor do TEXTO e é o fundo
     dos painéis pretos. O theme.css inverte a rampa no tema escuro, então lá
     ele vale #f7f7f7 — e é por isso que existe `--surface-inverse`, o token
     "superfície escura nos dois temas", com a regra `.footer-inner { background:
     var(--surface-inverse) }` escrita lá.

     Este arquivo carrega DEPOIS do theme.css e com a mesma especificidade.
     Herdar o `--neutral-900` do <style> antigo aqui reescrevia aquela regra e
     devolvia o rodapé BRANCO no tema escuro. O fallback cobre a página que
     porventura não carregue o theme.css. */
  background: var(--surface-inverse, var(--neutral-900));
  border-radius: 24px;
  padding: 60px 52px;
  position: relative;
  z-index: 6;
}
.footer-grid {
  display: grid;
  gap: 36px 28px;
  margin-bottom: 36px;
}
.footer-brand .logo {
  margin-bottom: 22px;
}
.footer-brand .logo img {
  height: 28px;
}
.footer-brand .logo-text {
  color: var(--neutral-60);
  border-color: rgba(255, 255, 255, 0.18);
}
.footer-brand p {
  font-size: 0.88rem;
  color: var(--neutral-100);
  line-height: 1.65;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.footer-social a:hover {
  background: var(--primary-500);
}
.footer-social svg {
  width: 15px;
  height: 15px;
  fill: var(--neutral-50);
}
/* `h2`, e não `h5`, na marcação: o rodapé vem depois de seções em h2/h3, e um
   h5 ali seria salto de nível no documento. Voltar para h2 é válido — o que
   quebra a sequência é DESCER mais de um nível de uma vez. O tamanho continua
   sendo o de um rótulo, que é o papel dele. */
.footer-col h2 {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-60);
  margin-bottom: 13px;
}
.footer-col a {
  display: block;
  font-size: 0.85rem;
  color: var(--neutral-100);
  padding: 4px 0;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--primary);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--neutral-200);
}

/* --------------------------------------------------------------------------
   5. Rodapé de seis blocos

   O rodapé antigo tinha marca + quatro listas (`1.35fr repeat(4,1fr)`). Com
   Produtos, Add-ons, Soluções, A empresa e Legal são CINCO listas, e nessa
   grade elas ficariam com ~150px — "Como tratamos os dados" quebraria em três
   linhas. A marca passa a ocupar a primeira linha inteira e as listas ganham
   uma faixa própria abaixo dela.
   -------------------------------------------------------------------------- */
.footer-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 36px 28px;
}
.footer-grid .footer-brand {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding-bottom: 34px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand .footer-brand-text {
  max-width: 420px;
}
.footer-brand p {
  max-width: 420px;
}
.footer-social {
  justify-content: flex-end;
}

.footer-col h2 {
  color: var(--neutral-60);
}
.footer-col a {
  line-height: 1.45;
}

/* Linha final: direitos + CNPJ + selo. Vira coluna no celular para o CNPJ
   não empurrar o resto para fora. */
.footer-bottom {
  flex-wrap: wrap;
  gap: 10px 24px;
}
.footer-legal-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.footer-legal-inline a {
  color: var(--neutral-200);
  transition: color 0.2s;
}
.footer-legal-inline a:hover {
  color: var(--primary);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 24px;
  }
  .footer-grid .footer-brand {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .footer-social {
    justify-content: flex-start;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --------------------------------------------------------------------------
   6. Trilha de navegação (breadcrumb)

   Fica no `nav.css` — e não no `site.css` — porque as páginas antigas não
   carregam o site.css e precisam da mesma trilha.

   A trilha visível existe pelo mesmo motivo do `BreadcrumbList` no JSON-LD, e
   os dois saem da MESMA lista no gerador: o Google só troca a URL do
   resultado pela trilha quando a marcação corresponde ao que a página mostra.
   -------------------------------------------------------------------------- */
/* A trilha FLUTUA sobre o topo da página, não empurra o conteúdo.

   Na primeira versão ela era um bloco no fluxo, com fundo próprio e 104px de
   respiro. Isso quebrava o herói de todas as páginas internas: o fundo do
   herói — a malha de pontos e os orbes coloridos — começava DEPOIS da trilha,
   e o topo da página virava uma faixa branca chapada de 142px. O desfoque do
   topo, que existe para o conteúdo passar por trás dele, não tinha mais nada
   colorido para desfocar ali.

   Fora do fluxo, o herói volta a começar em y=0 e a sangrar por baixo da
   barra, como na home; a trilha fica por cima, no espaço que a barra fixa já
   reservava. */
.crumbs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Abaixo da barra de 72px, com respiro. */
  padding: 92px 0 0;
  background: transparent;
  /* Acima das réguas verticais (1) e do fundo do herói, abaixo do header
     (203) — ao rolar, a barra passa por cima dela. */
  z-index: 2;
  pointer-events: none;
}
/* Só os links voltam a ser clicáveis: a faixa inteira é transparente e não
   deve interceptar clique no herói que está atrás dela. */
.crumbs a,
.crumbs [aria-current='page'] {
  pointer-events: auto;
}
/* A trilha é `absolute`, e o corpo é o bloco que a contém. Nem toda página
   antiga declarava `position: relative` no body. */
body {
  position: relative;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-100);
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* O separador é decoração: sai da árvore de acessibilidade para o leitor de
   tela não anunciar "barra" entre cada item. */
.crumbs li + li::before {
  content: '/';
  color: var(--neutral-50);
}
.crumbs a {
  color: var(--neutral-200);
  transition: color 0.2s;
}
.crumbs a:hover {
  color: var(--neutral-900);
}
.crumbs [aria-current='page'] {
  color: var(--neutral-900);
}
/* No celular a trilha CONTINUA sobreposta, pelo mesmo motivo do desktop: se
   voltasse ao fluxo, o fundo do herói recomeçaria abaixo dela e o topo da tela
   viraria a mesma faixa branca chapada. O que muda é só a folga, menor porque
   a barra fixa também é. */
@media (max-width: 900px) {
  .crumbs {
    padding-top: 86px;
  }
  .crumbs ol {
    font-size: 0.63rem;
    letter-spacing: 0.06em;
  }
}

/* Abaixo de 480px não cabem logo, rótulo do produto, botão de tema e
   hambúrguer na mesma linha — o rótulo era o que encavalava no botão. Ele é
   redundante ali: o nome do produto é o próprio H1 logo abaixo. */
@media (max-width: 479px) {
  header .logo-text {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Pular para o conteúdo

   Primeiro item tabulável da página, invisível até receber foco. Sem ele,
   quem navega por teclado atravessa o megamenu inteiro — três gatilhos e
   vinte e quatro links — antes de chegar ao texto, em TODA página.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  background: var(--neutral-900);
  color: var(--neutral-0);
  font-size: 0.9rem;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}