/* Cabeçalho único Eagle Pharma — estilo do contrato de navegação (nav-contrato.mjs).
   Publicado com impressão de conteúdo como /assets/nav.<hash>.css e carregado por todas as
   superfícies públicas (Área de Conhecimento, acervo, Eagle AI).

   Regras que governam esta folha:
   · classes, nunca estilo em linha — a CSP é 'self' e o responsivo precisa de media queries;
   · nenhum destino escondido atrás de hover: dropdown e gaveta abrem por clique/toque (nav.js)
     e o estado é aria-expanded;
   · alvo mínimo de 44px nos controlos de toque; sem transbordamento horizontal em largura
     nenhuma — quando o menu em português deixa de caber, os destinos passam para a gaveta. */

/* Salto para o conteúdo — faz parte do topo do contrato e por isso a regra vive aqui: nem toda
   a superfície que recebe o cabeçalho carrega a folha da Área (o Eagle AI não a carrega). */
.saltar {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--ep-acento); color: #fff; padding: 12px 18px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ── barra utilitária (fundo escuro, bandeiras ES·PT·EN) ─────────────────────────────────── */
/* A barra é ESCURA, e os papéis do sistema resolvem por omissão para superfície clara. Sem
   redeclarar aqui, `--ep-tinta-mudo` entrava com o cinzento de fundo claro (#6a717f) e o
   «Rastrear pedido» desativado dava 3,67:1 sobre o carvão — em SEIS páginas. Marca-se o
   contexto, que é o que evita andar a adivinhar valores elemento a elemento. */
/* 03/09/2026 · o dono, com a captura da Área ao lado da loja: «há divergência de cor entre a faixa
   da área de conhecimento e da página principal; gostei mais da faixa escura totalmente». Medido:
   a barra da loja é #101316 (a mais escura), a faixa da inauguração #111417 e esta barra herdava
   `--ep-carvao` = #14171a na Área. Passa ao tom mais escuro, o mesmo da loja, e a faixa da
   inauguração (`assets/contagem-faixa.css`) acompanha, para as duas lerem como uma faixa só. */
.nav-utilitaria { background: #101316; color: var(--ep-tinta-suave-esc, #c7cdd2); font-size: 12.5px; letter-spacing: .02em;
  --ep-tinta-mudo: var(--ep-cinza-esc, #78808e); --ep-tinta-tenue: var(--ep-prata, #8a939b); }
.nav-utilitaria-linha {
  max-width: 1280px; margin: 0 auto; padding: 7px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.nav-utilitaria-marca { color: var(--ep-prata, #8a939b); }  /* sobre escuro: 5,76:1 */
/* G167 (fase de design, 02/09) · a marca aparecia duas vezes no topo: em texto na barra utilitária
   e no logotipo do cabeçalho logo abaixo. A barra fica só com as ações; o nome vive no logotipo.
   Reversível numa linha. */
.nav-utilitaria-marca { display: none; }
/* 03/09/2026 · relato do dono, com captura: «a linha das bandeiras está duplicada em local errado
   somente quando aparece a linha superior da inauguração». Medido no vivo, a 1440px: com a marca
   escondida (G167, acima), a linha usa `space-between` e as ações — Rastrear pedido, WhatsApp,
   bandeiras — passaram a ser o único filho: caíram para a ESQUERDA (x=326), debaixo da faixa da
   inauguração, e liam-se como uma segunda barra fora do lugar. Na loja a mesma linha fica à
   direita. `margin-left: auto` devolve as ações à direita com ou sem a marca; a decisão do G167
   fica de pé. Guarda: `tests/a-barra-utilitaria-fica-a-direita-e-escura.mjs`. */
.nav-utilitaria-accoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.nav-utilitaria-accoes > a {
  color: #aeb6bd; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; min-height: 30px;
}
.nav-utilitaria-accoes > a:hover { color: #fff; }

/* Em ecrã de toque a barra utilitária cresce para o alvo mínimo. Ela é fina de propósito no
   desktop, onde o rato não precisa de 44px — por isso a regra vive atrás de `pointer: coarse`
   e não altera nada em quem usa rato. */
@media (pointer: coarse) {
  .nav-utilitaria-accoes > a { min-height: 44px; }
}
.nav-utilitaria-accoes > a.nav-desativado { color: var(--ep-tinta-mudo); cursor: not-allowed; }
.nav-utilitaria-accoes > a.nav-desativado:hover { color: var(--ep-tinta-mudo); }
/* `margin-left: auto` pela mesma razão que o das ações (G167/03-09): com o código ao lado, o
   grupo dos idiomas deixa de caber na primeira linha abaixo de ~420 px e passa para a linha
   seguinte. Sem isto ele encostaria à ESQUERDA e leria-se como uma segunda barra fora do lugar —
   que foi exactamente a queixa do dono a 03/09. Assim desce, mas desce alinhado à direita.
   Medido a 320, 360, 390, 412, 500, 768 e 1440 px. */
.nav-idiomas { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.bandeira-idioma {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2px solid transparent; border-radius: 4px; padding: 0 4px 0 0;
  line-height: 0; opacity: .62; background: none;
  transition: opacity .15s, border-color .15s;
}
.bandeira-idioma:hover, .bandeira-idioma:focus-visible { opacity: 1; }
/* 06/09/2026 · comitê de design, bloco 2 (UI/UX) · o seletor de bandeira/idioma da navegação
   institucional caía no outline nativo do navegador (o `border` que ele já tinha é para o
   estado ATIVO, não para o foco pelo teclado). A barra utilitária é ESCURA (#101316) em toda
   superfície que carrega este contrato — Área, acervo, Eagle AI e as páginas institucionais —,
   e é fixa: não muda com o tema da página. `--ep-ciano` (#159bd8, já do design system) mede
   ~5,95:1 sobre esse fundo. Também tira cor/sublinhado de link padrão do navegador, que a
   ligação nunca redeclarava. */
.bandeira-idioma { text-decoration: none; color: inherit; }
.bandeira-idioma:focus-visible { outline: 2px solid var(--ep-ciano, #159bd8); outline-offset: 2px; }

/* ── G026 · o código do idioma, ao lado da bandeira ──────────────────────────────────────── */
/* A bandeira sozinha não identifica a língua: a do Paraguai não diz «espanhol» a quem nunca a
   viu, e a dos EUA nomeia um país, não um idioma. Decisão do dono (02/09/2026): «Bandeira +
   código ao lado: PT · EN · ES». O texto é curto de propósito — o grupo inteiro passa de 104 px
   para ~180 px, e a 360 px continua a caber na mesma linha da barra.
   `line-height: 1` porque o link tem `line-height: 0` para encostar a arte; sem isto o código
   herdaria altura zero e ficaria cortado. */
.bandeira-cod {
  font-family: var(--ep-fonte-texto, inherit);
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .04em;
  color: var(--ep-tinta-suave-esc, #c7cdd2);
}
/* O estado ativo já se lê na moldura vermelha e na opacidade cheia; o código acompanha em branco
   para o par (bandeira + código) dizer a mesma coisa a quem não distingue a cor da moldura. */
.bandeira-idioma.activa .bandeira-cod,
.bandeira-idioma[aria-current="true"] .bandeira-cod { color: #fff; }

/* Alvo de toque: a bandeira mede 30x22 e a WCAG pede 44x44. Cresce a ÁREA TOCÁVEL sem mexer no
   desenho — a bandeira continua do mesmo tamanho, o que aumenta é o que o dedo acerta. O `gap` do
   grupo encolhe na mesma medida para o conjunto não ficar mais largo do que era. */
@media (pointer: coarse) {
  .bandeira-idioma { padding: 11px 7px; }
  .nav-idiomas { gap: 0; }
}
.bandeira-idioma.activa, .bandeira-idioma[aria-current="true"] { opacity: 1; border-color: var(--ep-acento); }

/* ── cabeçalho principal ─────────────────────────────────────────────────────────────────── */
/* O cabeçalho é fixo no topo. Sem compensação, âncoras, `scrollIntoView` e o salto do teclado
   param debaixo dele. O offset global reserva o cabeçalho e 12 px de respiro; superfícies que
   também precisam reservar a faixa superior acrescentam essa parte somente nos seus alvos. */
:root { --ep-nav-fixa: 75px; --ep-faixa-fixa: 34px; }
@media (max-width: 640px) { :root { --ep-nav-fixa: 65px; } }
@media (max-width: 560px) { :root { --ep-faixa-fixa: 32px; } }
@media (pointer: coarse) { :root { --ep-faixa-fixa: 44px; } }
/* G079 · somar a faixa aqui deslocava também as âncoras institucionais que já têm margem própria.
   A busca da Biblioteca compensa a faixa no seu alvo; o contrato global continua sendo apenas o
   cabeçalho mais o respiro. */
html { scroll-padding-top: calc(var(--ep-nav-fixa) + 12px); }

.nav-cabecalho {
  position: sticky; top: 0; z-index: 50;
  box-sizing: border-box;
  background: var(--ep-fundo);
  color: var(--ep-tinta);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ep-borda);
}
.nav-cabecalho *, .nav-cabecalho *::before, .nav-cabecalho *::after { box-sizing: border-box; }
/* Com a faixa do cronómetro presente (sticky, 34px), o cabeçalho gruda LOGO ABAIXO dela — dois
   sticky em top:0 sobrepor-se-iam. `:has` é progressivo: sem suporte, o cabeçalho desliza sob a
   faixa e nada mais se perde. */
body:has(.faixa-inauguracao) .nav-cabecalho { top: var(--ep-faixa-fixa); }
.nav-linha {
  max-width: 1280px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 74px; flex-wrap: nowrap;
}
.nav-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none;
  min-height: 44px; }  /* media 201x40 no ecrã estreito — faltavam 4px para o alvo mínimo */
.nav-logo img { height: 48px; width: auto; display: block; flex-shrink: 0; }
.nav-logo-texto { display: flex; flex-direction: column; line-height: .86; }
.nav-logo-nome {
  font-family: "Saira Condensed", "Saira Condensed Recurso", "Arial Narrow", sans-serif; font-weight: 800;
  font-size: 27px; letter-spacing: .01em; color: var(--ep-tinta);
}
.nav-logo-nome b { color: var(--ep-acento-tinta); font-weight: 800; }
.nav-logo-tag {
  font-size: 9.5px; letter-spacing: .3em; color: var(--ep-tinta-tenue); font-weight: 600;  /* era #8a939b = 3,12:1 sobre claro */
  text-transform: uppercase; margin-top: 3px;
}

/* agrupamento navegação + busca + conta */
.nav-area { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.nav-principal { display: flex; align-items: center; gap: 18px; flex-shrink: 0; flex-wrap: wrap; }
.nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--ep-tinta-suave);
  min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; line-height: 1.2;
}
.nav-item:hover { color: var(--ep-tinta); }
.nav-item[aria-current="page"] { color: var(--ep-acento-tinta); }
.nav-item.nav-desativado { color: var(--ep-tinta-tenue); cursor: not-allowed; }  /* era #aeb6bd = 2,05:1 */
.nav-item.nav-desativado:hover { color: var(--ep-tinta-tenue); }
.nav-embreve {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ep-tinta-tenue); border: 1px solid var(--ep-borda); border-radius: 5px; padding: 1px 5px;  /* «em breve»: era 3,12:1 */
}

/* dropdown Calculadoras */
.nav-drop { position: relative; }
.nav-chevron { display: inline-flex; transition: transform .15s; }
.nav-drop-botao[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-drop-lista {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 290px; background: var(--ep-painel); border: 1px solid var(--ep-borda); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(20, 23, 26, .12); padding: 8px;
}
.nav-drop-botao[aria-expanded="true"] + .nav-drop-lista { display: block; }
/* Sem JavaScript (o cabeçalho não recebeu .nav-js) o clique no botão não muda aria-expanded;
   o foco no grupo abre a lista — os dois destinos nunca ficam inalcançáveis. */
.nav-cabecalho:not(.nav-js) .nav-drop:focus-within .nav-drop-lista { display: block; }
.nav-drop-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px;
  text-decoration: none; color: var(--ep-tinta); min-height: 44px;
}
.nav-drop-item:hover, .nav-drop-item:focus-visible { background: var(--ep-fundo-suave, #f5f6f8); }
.nav-drop-icone { width: 20px; height: 20px; flex-shrink: 0; color: var(--ep-acento-tinta);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-drop-texto { display: flex; flex-direction: column; gap: 2px; }
.nav-drop-texto strong { font-size: 14px; font-weight: 700; }
.nav-drop-texto small { font-size: 12px; color: var(--ep-tinta-mudo); }

/* busca de compostos */
/* 06/09/2026 · o campo era `input type="search"`, e o navegador desenha esse tipo em Arial por
   padrão — a folha nunca declarava família própria. Nas páginas da Área o defeito não aparecia
   porque `assets/conhecimento.css` cobre por acidente; nas institucionais e no cadastro, que não
   carregam essa folha, o campo saía em Arial enquanto o resto do cabeçalho lia Barlow. Mesmo
   token e mecanismo de `minha-conta.html:84`. */
.nav-busca { position: relative; flex: 1 1 150px; max-width: 260px; min-width: 130px; }
.nav-busca-lupa {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ep-tinta-tenue); line-height: 0;
}
.nav-busca input {
  width: 100%; height: 42px; border: 1px solid var(--ep-borda); border-radius: 9px;
  background: var(--ep-painel); padding: 0 14px 0 38px; font-size: 14px; color: var(--ep-tinta); outline: none;
  font-family: var(--ep-fonte-texto, inherit);
}
/* Medido no navegador depois de escurecer a moldura: `--ep-tinta-mudo` dava 3,73:1 sobre o
   fundo escuro do cabeçalho — abaixo do mínimo de 4,5:1 para texto normal. O token que o
   design system reserva para texto sobre escuro é `--ep-tinta-tenue`, que no bloco escuro é
   `--ep-prata` e vale 5,76:1. O agente calculou os papéis do texto e não este: o placeholder
   tem cor própria e não entra na conta dos outros. */
.nav-busca input::placeholder { color: var(--ep-tinta-tenue); opacity: 1; }
.nav-busca input:focus { border-color: var(--ep-acento-tinta); box-shadow: 0 0 0 3px var(--ep-acento-fundo); }

/* conta e carrinho */
.nav-conta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-icone-botao {
  width: 44px; height: 44px; border-radius: 9px; color: var(--ep-tinta);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.nav-icone-botao:hover { background: var(--ep-fundo-suave, #f5f6f8); }
.nav-icone-botao.nav-desativado { color: var(--ep-tinta-mudo); cursor: not-allowed; }
.nav-icone-botao.nav-desativado:hover { background: none; }

/* botão do menu (hambúrguer) — só aparece em ecrã estreito */
.nav-menu-botao {
  display: none; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 6px 12px;
  background: none; border: 1px solid var(--ep-borda); border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ep-tinta);
}

/* ── largura intermédia: encolher antes de colapsar ────────────────────────────────────────
   O limite é definido pelo português, o idioma prioritário e mais largo: até 1280px de
   viewport ele já não preserva logo + cinco destinos + busca + conta em uma linha. Inglês e
   espanhol usam o mesmo limite para que trocar o idioma nunca mude a altura do cabeçalho. */
@media (max-width: 1440px) {
  .nav-logo-tag { display: none; }
  .nav-area { gap: 10px; }
  .nav-principal { gap: 12px; }
  .nav-item { font-size: 13.5px; }
  .nav-embreve { display: none; }
  /* G41 (fase de design, 02/09) · a 190px o campo tinha 136px úteis para uma instrução de 240px:
     cortava nos três idiomas. 250px + a instrução mais curta cabem sem quebrar a linha do menu. */
  .nav-busca { max-width: 250px; }
}
/* ── gaveta: todos os destinos continuam alcançáveis sem criar uma segunda fila ─────────── */
@media (max-width: 1440px) {
  .nav-menu-botao { display: inline-flex; }
  .nav-linha { position: relative; gap: 10px; }

  .nav-area {
    position: absolute; top: 100%; left: 20px; right: 20px; width: auto;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px 12px 12px; border: 1px solid var(--ep-borda); border-top: 0;
    border-radius: 0 0 12px 12px; background: var(--ep-fundo);
    box-shadow: var(--ep-sombra);
    /* ── 31/08/2026 · A GAVETA NÃO PODE PASSAR DO FIM DA TELA ────────────────────────────
       Ela é `position:absolute` e cresce com o número de destinos. No telemóvel a lista
       inteira — busca, quatro grupos, calculadoras, rastrear, carrinho — ultrapassa a
       altura do aparelho, e o que fica por baixo do fim da tela NÃO É ALCANÇÁVEL: um
       elemento absoluto não empurra a página, então não há o que rolar. A pessoa abre o
       menu, vê metade dos destinos e não tem gesto nenhum que revele o resto.
       Altura máxima e rolagem própria resolvem sem mexer no desenho. `overscroll-behavior`
       impede que o gesto, ao chegar ao fim da lista, continue a rolar a página por trás e
       feche a gaveta debaixo do dedo. Os dois valores já existem na folha: a altura do
       cabeçalho fixo e os 44px de alvo mínimo. */
    max-height: calc(100vh - var(--ep-nav-fixa) - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Com JavaScript, a gaveta nasce fechada e o botão comanda-a. Sem JavaScript não há quem a
     abra: fica sempre visível — navegação primeiro, comportamento como melhoria. */
  .nav-js .nav-area { display: none; }
  .nav-js.nav-aberto .nav-area { display: flex; }

  .nav-principal { flex-direction: column; align-items: stretch; gap: 0; order: 0; width: auto; }
  .nav-item { min-height: 48px; font-size: 15px; padding: 0 4px; }
  .nav-embreve { display: inline-block; }

  .nav-drop { position: static; }
  .nav-drop-botao { width: 100%; justify-content: flex-start; }
  .nav-drop-botao .nav-chevron { margin-left: auto; }
  .nav-drop-lista {
    position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 4px 26px;
  }

  .nav-busca { order: 1; flex: 0 0 auto; width: 100%; max-width: none; min-width: 0; margin: 6px 0 0; }
  .nav-busca input { width: 100%; }
  .nav-conta { order: 2; margin-top: 6px; }
}

@media (max-width: 768px) {
  .nav-linha { min-height: 64px; padding: 8px 14px; }
  .nav-logo img { height: 40px; }
  .nav-logo-nome { font-size: 22px; }
  .nav-area { left: 14px; right: 14px; }
}

@media (max-width: 430px) {
  .nav-utilitaria-linha { padding: 7px 14px; gap: 8px; }
  .nav-utilitaria-accoes { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-chevron, .bandeira-idioma { transition: none; }
}

/* ── F-09 · 06/09/2026 · decisão do dono: «Corrigir os dois tokens» ────────────────────────────
   Achado F-09 (docs/fase-final-layout-design.md, descoberto 28/08 na fase 2 — cadastro),
   confirmado sem mudança pelo comitê de design em
   ~/.cache/eagle-tmp/design-comite/tipo-a11y-responsivo.md, "[Média] F-09 — dois papéis do tema
   escuro ainda reprovam sobre o cartão": os tokens não mudaram desde a descoberta.

   Os DOIS PAPÉIS e os valores medidos contra `--ep-painel` (#23282e, `--ep-grafite`), a
   superfície MAIS CLARA do tema escuro — o cartão — que o validador original só passou a medir
   depois de a falha aparecer no `concluir-cadastro.html`:

       --ep-tinta-mudo    #78808e   4,52:1 sobre a página (#14171a)  ·  3,73:1 sobre o cartão  REPROVA
       --ep-acento-tinta  #ef3352   4,51:1 sobre a página (#14171a)  ·  3,72:1 sobre o cartão  REPROVA

   A RAZÃO medida (comitê + achado original): o comentário do próprio `assets/eagle-ds.css`
   (linhas 239 e 243) só cita o contraste contra o FUNDO da página, nunca contra o cartão — o
   mesmo "buraco de medição" nasce de lá. Confirmado hoje no Chromium (`emulateMedia
   colorScheme:dark`, 390 e 1366px, cartão real via `.ep-cartao`): 3,73:1 e 3,72:1 nos três, sem
   variação por página nem por largura — o defeito é do TOKEN, não do layout.

   POR QUE A CORREÇÃO ENTRA AQUI E NÃO NO TOKEN. `assets/eagle-ds.css` tem o hash do conteúdo no
   nome, vem de um pipeline FORA deste repositório e não se edita (D14) — editar a cópia sem hash
   não muda nada para o cliente. A regra repete-se aqui, na folha que o cliente realmente recebe,
   como já se fez com o piso de 16px no pacote da loja, e com o mesmo padrão que
   `concluir-cadastro.html` e `confirmar-email.html` já usam ad-hoc para o mesmo problema.

   A CORREÇÃO é a opção "clarear os dois tons" que o próprio achado já apresentava, reaproveitando
   os dois papéis do sistema que JÁ passam em qualquer superfície escura (mesma escolha das duas
   páginas acima): `--ep-tinta-tenue` (resolve a `--ep-prata`, #8a939b — 4,76:1 sobre o cartão) e
   `--ep-vermelho-claro` (#ff7a88 — 5,93:1 sobre o cartão). O CUSTO, que o achado já registrava e
   o dono aceitou ao escolher esta opção: `--ep-tinta-mudo` passa a valer o MESMO que
   `--ep-tinta-tenue` no tema escuro — perde-se um degrau de hierarquia de texto entre "mudo" e
   "tenue"; e o acento fica mais rosado. Só a COR muda; tamanho, peso e layout ficam como estão. */
[data-ep-tema="escuro"], .ep-escuro {
  --ep-tinta-mudo: var(--ep-tinta-tenue);
  --ep-acento-tinta: var(--ep-vermelho-claro);
}

/* 18/09 — mesmo cabeçalho compacto da loja em todas as áreas públicas. */
:root { --ep-nav-fixa:65px; }
.nav-cabecalho.nav-cabecalho {
  --ep-fundo:#fff; --ep-painel:#f5f6f8; --ep-tinta:#14171a;
  --ep-tinta-suave:#41474d; --ep-tinta-tenue:var(--ep-cinza-claro); --ep-tinta-mudo:var(--ep-cinza-claro);
  --ep-borda:#d8dce0; --ep-acento-tinta:#c8102e; --ep-acento-fundo:#fce9ed;
  background:#fff; color:#14171a;
}
.nav-linha { min-height:64px; padding-block:8px; max-width:1440px; }
.nav-logo img { height:40px; }
.nav-busca input { height:44px; font-size:16px; }
.nav-utilitaria-linha { padding-block:0; min-height:44px; }
.bandeira-idioma { box-sizing:border-box; min-width:44px; min-height:44px; justify-content:center; padding:0 2px; }
.bandeira-idioma svg { width:20px; }
.nav-idiomas { gap:2px; }

@media (min-width:769px) and (max-width:1440px) {
  .nav-cabecalho .nav-area { display:contents; }
  .nav-principal { position:absolute; top:100%; right:20px; width:320px; max-height:70dvh; overflow-y:auto; background:#fff; padding:8px 12px; border:1px solid var(--ep-borda); border-radius:10px; box-shadow:0 8px 24px #0002; }
  .nav-js .nav-principal { display:none; }
  .nav-js.nav-aberto .nav-principal { display:flex; }
  .nav-busca { flex:1; max-width:360px; margin:0 0 0 auto; order:1; }
  .nav-conta { margin:0; order:2; }
  .nav-menu-botao { order:3; }
  .nav-linha > .ep-language-switcher { order:4; }
}

@media (max-width:768px) {
  :root { --ep-nav-fixa:111px; }
  .nav-utilitaria-linha { padding:0 12px; }
  .nav-utilitaria-accoes { width:100%; flex-wrap:nowrap; gap:6px; justify-content:space-between; }
  .nav-utilitaria-accoes > a { font-size:12px; gap:4px; min-height:44px; }
  .nav-idiomas { margin-left:0; gap:0; }
  .bandeira-cod { font-size:10px; letter-spacing:0; }
  .bandeira-idioma { gap:2px; }
  .nav-linha { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding:8px 12px; }
  .nav-logo { grid-column:1; grid-row:1; gap:6px; min-width:0; }
  .nav-logo img { height:34px; }
  .nav-logo-nome { font-size:22px; }
  .nav-logo-tag { display:block; font-size:8px; letter-spacing:.15em; }
  .nav-menu-botao { grid-column:2; grid-row:2; justify-self:end; min-width:64px; justify-content:center; }
  .nav-menu-botao > svg { display:none; }
  .nav-cabecalho .nav-area { display:contents; }
  .nav-conta { grid-column:2; grid-row:1; margin:0; gap:0; }
  .nav-busca { grid-column:1; grid-row:2; margin:0; }
  .nav-principal {
    position:absolute; top:100%; right:12px; left:auto;
    width:min(320px,calc(100vw - 24px)); max-height:65dvh; overflow-y:auto;
    overscroll-behavior:contain; background:#fff; padding:8px 12px;
    border:1px solid var(--ep-borda); border-radius:10px; box-shadow:0 8px 24px #0002;
  }
  .nav-js .nav-principal { display:none; }
  .nav-js.nav-aberto .nav-principal { display:flex; }
  .nav-cabecalho:not(.nav-js) .nav-principal { position:static; grid-column:1/-1; width:100%; }
}

/* Celular estreito: o lema «Performance · Perfumaria · Skincare» (maiúsculas, ~153px a 8px) não cabe
   numa linha ao lado da marca e da conta, e quebrava em duas: a linha da marca crescia de 44 para
   60px e o cabeçalho de 111 para 127px, enquanto a altura reservada abaixo dele (`--ep-nav-fixa`,
   111px) seguia fixa — o cabeçalho sticky passava a cobrir o aviso da página (Eagle AI a 320px).
   O conserto devolve ao lema a linha única, sem escondê-lo nem encolher a fonte: espaçamento do
   lema zerado até 360px e, até 340px, logo e margens um pouco menores para a coluna caber. */
@media (max-width:360px) {
  .nav-logo-tag { letter-spacing:0; white-space:nowrap; }
}
@media (max-width:340px) {
  .nav-linha { padding-inline:8px; column-gap:6px; }
  .nav-logo { gap:5px; }
  .nav-logo img { height:28px; }
}

/* A gaveta móvel é o próprio `.nav-area`. A regra acima, herdada do cabeçalho compacto,
   transformava `.nav-principal` numa segunda gaveta absoluta: os itens saíam do retângulo
   rolável e ficavam por baixo do conteúdo. Mantém-se uma única superfície rolável, que é o
   que a pessoa consegue tocar.

   ── EAI-32 · 23/09/2026 · A REGRA ACIMA (commit d7a497e41b, 20/09) ABRIA A GAVETA SEMPRE ──
   `.nav-cabecalho .nav-area { display:flex; }` tem a MESMA especificidade de
   `.nav-js .nav-area { display:none; }` (:283, duas classes cada) e vinha depois no arquivo —
   vencia sempre, JavaScript presente ou não, `.nav-aberto` ou não. No celular a gaveta ficava
   permanentemente aberta, cobrindo até 1/3 da tela e escondendo o que estava logo abaixo do
   cabeçalho — inclusive, na página do Eagle AI, a mensagem de erro e o «Tentar de novo» depois
   de uma falha (medido: os três pontos do aviso caíam em `DIV.nav-area` por `elementFromPoint`
   a 390px, e o foco por teclado ficava num botão coberto). Não é código do Eagle AI (D18): é
   esta regra, e vale para toda página que carrega este cabeçalho.

   A CORREÇÃO restringe o `display:flex` às duas situações em que a gaveta REALMENTE deve
   ocupar espaço — sem JavaScript (onde não há quem a abra, e ela precisa ficar sempre visível,
   como o comentário original de `.nav-js .nav-area` já previa) e com JavaScript E aberta
   (`.nav-aberto`) — devolvendo ao caso "com JavaScript e fechada" a regra de `:283`
   (`.nav-js .nav-area { display:none; }`), que esta sobrescrevia. O desenho do computador (≥769px)
   não é afetado: esta regra só existe dentro de `@media (max-width:768px)`.

   BAIXO (refutação pós-entrega, 23/09/2026) · SEM JavaScript, `.nav-area` continuava com o
   `position:absolute` herdado de `:261` (o mesmo mecanismo do cabeçalho compacto 769–1440px) —
   sempre visível, como já era antes de hoje, mas flutuando SOBRE o conteúdo em vez de empurrá-lo,
   porque não há hambúrguer para fechar e nunca houve. Devolve-se ao fluxo normal (o comportamento
   de 18/09, antes do cabeçalho compacto existir): sem JavaScript a gaveta some da lista de
   `elementFromPoint` porque deixa de sobrepor — passa a estar ACIMA do que vem a seguir, como
   qualquer navegação em bloco. Com JavaScript (`.nav-js.nav-aberto`), a sobreposição continua —
   é o comportamento esperado de um menu que se fecha ao tocar fora, e nenhuma decisão pediu para
   mudar isso.

   BAIXO Nº2 (refutação pós-entrega, 23/09/2026) · Tirar a gaveta do `position:absolute` fez o
   PRÓPRIO `.nav-cabecalho` crescer de 111px para 442px sem JavaScript (a gaveta inteira agora
   entra na sua altura). Como o cabeçalho continua `position:sticky; top:0` (:126), ele gruda no
   topo assim que a pessoa rola — e por ser sticky, esses 442px ficam por cima do conteúdo em
   qualquer ponto da rolagem, não só no topo da página (medido: a 390×844 sem JavaScript,
   rolando até 798px, `elementFromPoint` nos mesmos dois pontos do aviso do Eagle AI ainda cai em
   `.nav-cabecalho`). Sticky só faz sentido quando o cabeçalho é pequeno o bastante para caber
   sobre o conteúdo sem cobri-lo — o que só é verdade COM JavaScript (gaveta fechada, ~111px).
   Sem JavaScript não existe hambúrguer para fechar a gaveta, então ela não tem como voltar a
   ficar pequena: a solução é o cabeçalho deixar de grudar nesse caso e voltar ao fluxo normal
   (`position:static`), exatamente como qualquer navegação em bloco fixa no topo só da PRIMEIRA
   tela. O desenho do computador não muda: esta regra só existe dentro de
   `@media (max-width:768px)`, e só se aplica quando falta `.nav-js`.

   ALTO (refutação pós-entrega nº2, 23/09/2026) · `:not(.nav-js)` NÃO SIGNIFICA «sem JavaScript» —
   significa «o nav.js ainda não terminou de rodar», e as duas coisas são diferentes na maioria
   das visitas. `nav.js` carrega com `defer` (`nav-contrato.mjs:462`) e só marca `.nav-js` dentro
   de `inicia()`, que espera `DOMContentLoaded`. Entre a primeira pintura (a folha já chegou, o
   HTML já pintou) e esse `DOMContentLoaded`, TODO visitante — inclusive quem tem JavaScript
   ligado e vai continuar tendo — passa por este estado "ainda sem `.nav-js`". Botar
   `position:static` no cabeçalho e na gaveta nesse intervalo fazia o cabeçalho pintar a 442px
   e, ao `.nav-js` chegar, encolher para 111px e o CONTEÚDO SUBIR ~330px debaixo do polegar —
   medido por `PerformanceObserver('layout-shift')`: CLS de 0,278–0,63 em `/pt-br/eagle-ai/`,
   `/pagamento.html` e `/cadastro.html` a 390px (o limite "ruim" do Google é 0,25), contra
   0,043–0,158 na versão anterior a hoje. Antes desta correção, a gaveta sem `.nav-js` ficava em
   `position:absolute` (herdado de `:261`) — fora do fluxo, então não empurrava nada e não gerava
   CLS nenhum durante essa janela, ao custo de sobrepor o conteúdo (o defeito que a nota BAIXO
   acima resolveu, mas só para quem de fato não tem JavaScript).

   A CURA não pode reintroduzir nem um defeito nem o outro: separa-se «JavaScript nunca vai
   rodar» de «JavaScript ainda não rodou» pelo recurso de mídia `scripting`, que só é `none`
   quando o motor do NAVEGADOR tem JavaScript desligado — nunca por causa de `defer`, de rede
   lenta ou de o script ainda não ter chegado a `DOMContentLoaded` (provado neste worktree com o
   Chromium do Playwright: um `newContext()` comum nunca casa `(scripting:none)`; só
   `newContext({ javaScriptEnabled:false })` casa). `display:flex` da gaveta continua fora do
   recurso de mídia — sozinho ele não desloca nada, porque a gaveta segue `position:absolute` até
   o `scripting:none` dizer o contrário — e é ele quem mantém corrigido o EAI-32 original (gaveta
   sempre visível enquanto não há quem a feche). Só as duas declarações de `position:static`
   (cabeçalho e gaveta) — as que de fato tiram elementos do fluxo e empurram o que vem depois —
   migram para dentro de `@media (max-width:768px) and (scripting:none)`. Para quem tem
   JavaScript (a esmagadora maioria), nada muda entre a pintura e o `DOMContentLoaded`: o
   cabeçalho nasce e permanece a ~111px, exatamente como antes de hoje. Para quem de fato não tem
   JavaScript, o cabeçalho continua saindo do `position:sticky` e a gaveta continua empurrando o
   `<main>`, exatamente como a nota BAIXO acima decidiu. O desenho do computador não muda: as duas
   regras só existem dentro de `@media (max-width:768px)`.

   BAIXO (refutação pós-entrega nº3, 23/09/2026) · O `display:flex` de `:not(.nav-js)`, por ficar
   FORA do `@media (scripting:none)` acima, também valia durante o intervalo "documento pronto,
   `nav.js` ainda não" — ou seja, para quase todo visitante, em toda carga. Como a gaveta aí
   continua `position:absolute` (herdado de `:261`), isso não cria CLS (não é o defeito do ALTO
   acima), mas é OUTRO defeito: a gaveta nasce aberta e flutua sobre o `<main>` até `nav.js`
   terminar — um lampejo do EAI-32 original, mais curto, mas presente em toda visita com
   JavaScript, e mais longo em rede lenta.

   A CURA fecha a gaveta por padrão nesse intervalo (`display:none` para `:not(.nav-js)`, dentro
   de `@media (max-width:768px)` simples) e só a reabre pelo recurso de mídia `scripting:none` —
   que é avaliado pelo motor do navegador na primeira pintura, sem esperar por `nav.js` e sem
   depender de rede. Quem tem JavaScript nunca vê a gaveta aberta sem ter clicado (fechada da
   pintura ao `.nav-js`, e dele em diante por `:283`); quem não tem JavaScript continua a vê-la
   sempre aberta, como a nota BAIXO acima decidiu — sem intervalo nenhum, porque não há `nav.js`
   para esperar. A regra de `scripting:none` repete o seletor `:not(.nav-js)` só para igualar a
   especificidade à regra que fecha por padrão (ambas com 3 classes) — sem isso, `display:none`
   venceria também para quem não tem JavaScript, por especificidade, não por ordem. */
@media (max-width:768px) {
  .nav-cabecalho:not(.nav-js) .nav-area { display:none; }
  .nav-js.nav-aberto .nav-area { display:flex; }
  .nav-cabecalho .nav-principal {
    position:static; width:auto; max-height:none; overflow:visible;
  }
}
@media (max-width:768px) and (scripting:none) {
  .nav-cabecalho { position:static; }
  .nav-cabecalho:not(.nav-js) .nav-area {
    display:flex;
    position:static; left:auto; right:auto; width:auto;
    max-height:none; overflow-y:visible; overscroll-behavior:auto;
  }
}