/* ═══════════════════════════════════════════════════════════════════════
   EAGLE-NAV.CSS — O CABEÇALHO ÚNICO DO SITE
   Criado em 13/08/2026.

   POR QUE EXISTE
   Cada uma das 12 páginas públicas tinha o próprio cabeçalho: a home com
   10 links, /produtos com 4, /copilot com 2, /servico-farm com nenhum. E
   NENHUMA delas tinha o Copilot Empresários (R$127/mês, no ar, vendendo)
   — o produto simplesmente não existia na navegação do site.

   O DEFEITO QUE ISTO CONSERTA (medido em 13/08, 390px)
   A home escondia os links no celular com `.nlink{display:none}` na linha
   1041 — e na linha 1400 a regra de alvo de toque de 44px
   (`nav a, .navIn a{display:inline-flex}`) RESSUSCITAVA todos eles, porque
   vinha depois e tinha especificidade igual. Resultado: dez links de nav
   empilhados por cima da marca dentro de 390px. Era isso que o dono via.
   Aqui a regra de toque NUNCA mexe em `display` — mexe em `min-height` e
   `padding`, que é o que o alvo de 44px realmente pede. Esconder é
   trabalho do `[hidden]` e da media query, e mais nada.

   A LEI: nenhuma página escreve o próprio cabeçalho. Cabeçalho novo, link
   novo ou produto novo entra em bin/aplicar_cabecalho.js e sai em todas.
   ═══════════════════════════════════════════════════════════════════════ */

.eNav{
  /* tokens locais: as páginas antigas chamam o mesmo azul de --green,
     --gold, --ouro ou --verde (MAPA §4). O cabeçalho não depende de
     nenhum deles — carrega os próprios e sobrevive em qualquer página. */
  --n-brand:#0866FF;
  --n-brand-dim:#0653CC;
  --n-ink:#0A0C12;
  --n-muted:#454B57;
  --n-line:#E4E7EC;
  --n-surface:#FFFFFF;
  --n-wash:#EDF3FF;
  --n-alt:44px;                 /* alvo de toque mínimo */
  --n-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  position:sticky;top:0;z-index:120;
  background:rgba(251,251,252,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
  font-family:inherit;
}
.eNav.desceu{
  background:rgba(251,251,252,.95);
  border-bottom-color:var(--n-line);
  box-shadow:0 12px 34px -16px rgba(10,12,18,.22);
}
.eNav *{box-sizing:border-box}
.eNavIn{
  max-width:1280px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:10px;
}

/* ── marca ───────────────────────────────────────────────────────── */
.eNavLogo{
  display:flex;align-items:center;gap:10px;flex:none;
  text-decoration:none;color:var(--n-ink);min-width:0;
}
.eNavLogo svg{flex:none;width:32px;height:32px;transition:width .25s,height .25s}
.eNav.desceu .eNavLogo svg{width:28px;height:28px}
.eNavMarca{line-height:1.1;min-width:0}
.eNavMarca b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.eNavMarca i{
  display:block;font-style:normal;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--n-muted);white-space:nowrap;
}
.eNavSp{flex:1 1 auto;min-width:0}

/* ── links do desktop ────────────────────────────────────────────── */
.eNavLinks{display:flex;align-items:center;gap:2px}
.eNavLink{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--n-muted);
  text-decoration:none;white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.eNavLink:hover{color:var(--n-ink);background:rgba(8,102,255,.06)}
.eNavLink[aria-current="page"]{color:var(--n-brand-dim);background:var(--n-wash)}

/* ── menu suspenso de produtos ───────────────────────────────────── */
.eNavMenu{position:relative}
.eNavMenu>button{
  font:inherit;cursor:pointer;border:0;background:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--n-muted);
  transition:color .18s ease,background .18s ease;
}
.eNavMenu>button:hover,.eNavMenu.aberto>button{color:var(--n-ink);background:rgba(8,102,255,.06)}
.eNavMenu>button svg{width:10px;height:10px;transition:transform .2s ease}
.eNavMenu.aberto>button svg{transform:rotate(180deg)}
.eNavPainel{
  position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(560px,92vw);padding:10px;
  background:var(--n-surface);border:1px solid var(--n-line);border-radius:16px;
  box-shadow:0 30px 70px -24px rgba(10,12,18,.32);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.eNavMenu.aberto .eNavPainel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* ── o item do menu: nome + preço na mesma linha, gatilho embaixo ──
   13/08: o item tinha UMA linha de texto, e ela descrevia o produto.
   Menu não é ficha técnica. Agora são três faixas com trabalhos
   diferentes: quem é (nome + preço), o que você manda acontecer
   (`.acao`, em negrito, é o que o olho pega) e a prova (`.sub`). */
.eNavItem{
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;
  padding:12px 11px;border-radius:12px;text-decoration:none;color:inherit;
  transition:background .16s ease;
}
.eNavItem:hover{background:rgba(8,102,255,.055)}
.eNavItem .ic{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--n-wash);line-height:0;
}
.eNavItem .ic svg{display:block}
.eNavItem .txt{display:block;min-width:0}
.eNavItem .topo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.eNavItem b{font-size:13.5px;font-weight:750;color:var(--n-ink);letter-spacing:-.01em}
.eNavItem em{
  font-style:normal;font-family:var(--n-mono);font-size:10.5px;font-weight:700;
  color:var(--n-brand-dim);background:var(--n-wash);
  padding:2px 7px;border-radius:999px;white-space:nowrap;
}
.eNavItem .acao{
  display:block;margin-top:4px;font-size:12.5px;font-weight:700;
  color:var(--n-ink);line-height:1.35;letter-spacing:-.005em;
}
.eNavItem .sub{display:block;margin-top:3px;font-size:11.5px;color:var(--n-muted);line-height:1.45}
.eNavPainel .todos{
  grid-column:1/-1;margin-top:2px;padding:10px 11px;border-top:1px solid var(--n-line);
  font-size:12.5px;font-weight:700;color:var(--n-brand-dim);text-decoration:none;
  display:flex;align-items:center;justify-content:space-between;
}
.eNavPainel .todos:hover{color:var(--n-brand)}

/* ── botões ──────────────────────────────────────────────────────── */
.eNavBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;border-radius:11px;flex:none;
  font-size:13px;font-weight:750;letter-spacing:-.01em;white-space:nowrap;
  text-decoration:none;border:1px solid transparent;
  background:linear-gradient(180deg,#1F76FF,#0866FF);color:#fff;
  box-shadow:0 10px 24px -12px rgba(8,102,255,.7);
  transition:transform .18s ease,box-shadow .18s ease;
}
.eNavBtn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(8,102,255,.8);color:#fff}
.eNavBtn.fantasma{
  background:var(--n-surface);color:var(--n-ink);border-color:var(--n-line);box-shadow:none;
}
.eNavBtn.fantasma:hover{border-color:var(--n-brand);color:var(--n-brand-dim)}

/* ── hambúrguer ──────────────────────────────────────────────────── */
.eNavHam{
  display:none;flex:none;width:var(--n-alt);height:var(--n-alt);
  align-items:center;justify-content:center;
  background:var(--n-surface);border:1px solid var(--n-line);border-radius:11px;
  cursor:pointer;color:var(--n-ink);
}
.eNavHam span{position:relative;display:block;width:17px;height:1.8px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.eNavHam span::before,.eNavHam span::after{
  content:"";position:absolute;left:0;width:17px;height:1.8px;background:currentColor;border-radius:2px;
  transition:transform .25s ease;
}
.eNavHam span::before{top:-5.5px}
.eNavHam span::after{top:5.5px}
.eNavHam[aria-expanded="true"] span{background:transparent}
.eNavHam[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.eNavHam[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

/* ── gaveta do celular ───────────────────────────────────────────── */
.eNavGaveta{
  position:fixed;inset:0;z-index:119;display:none;
  background:rgba(8,10,16,.42);backdrop-filter:blur(3px);
}
.eNavGaveta.on{display:block}
.eNavGavetaIn{
  position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);
  background:var(--n-surface,#fff);border-left:1px solid var(--n-line,#E4E7EC);
  padding:18px 16px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.75,.2,1);
  display:flex;flex-direction:column;gap:4px;
}
.eNavGaveta.on .eNavGavetaIn{transform:none}
.eNavGrupo{
  font-family:var(--n-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#5C6370;margin:16px 8px 6px;
}
/* grade, não flex: com flex o <small> de duas linhas empurrava o nome do
   produto para cima do ícone e a lista saía embaralhada (medido 13/08).
   Coluna fixa para o ícone, coluna livre para o texto, topo alinhado. */
/* `flex:none` é obrigatório aqui, não é enfeite: a gaveta é uma coluna
   flex com rolagem, e o conteúdo dela é MAIS ALTO que a tela. Sem
   travar o encolhimento, o navegador espreme cada item abaixo da
   própria altura de texto e as linhas de um item invadem o de baixo —
   foi exatamente o embaralhado que apareceu em 13/08 depois que cada
   item ganhou três linhas em vez de uma. */
.eNavGaveta a{
  display:grid;grid-template-columns:32px 1fr;gap:11px;align-items:start;
  flex:none;
  min-height:48px;padding:11px;
  border-radius:12px;text-decoration:none;color:#0A0C12;font-size:15px;font-weight:650;
  line-height:1.3;
}
.eNavGrupo,.eNavGavetaTopo{flex:none}
.eNavGaveta a>span:last-child{min-width:0}
.eNavGaveta a:hover,.eNavGaveta a:focus-visible{background:rgba(8,102,255,.07)}
.eNavGaveta a .txt{display:block;min-width:0}
.eNavGaveta a .topo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:750}
.eNavGaveta a .topo em{
  font-style:normal;font-family:var(--n-mono,ui-monospace,monospace);font-size:10.5px;font-weight:700;
  color:#0653CC;background:#EDF3FF;padding:2px 7px;border-radius:999px;white-space:nowrap;
}
/* o gatilho é a linha que o dedo procura: ele vem em cor de texto e em
   negrito, não em cinza de legenda */
.eNavGaveta a small.acao{color:#0A0C12;font-weight:700;font-size:12.5px;margin-top:5px}
.eNavGaveta a small{display:block;font-size:11.5px;font-weight:500;color:#5C6370;line-height:1.4;margin-top:3px}
.eNavGaveta a .ic{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:#EDF3FF;line-height:0;
}
.eNavGaveta a .ic svg{display:block}
.eNavGaveta a{grid-template-columns:34px 1fr}
.eNavGaveta .eNavBtn{display:flex;grid-template-columns:none;width:100%;min-height:50px;font-size:14.5px;margin-top:6px;font-weight:750}
.eNavGavetaTopo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.eNavGavetaTopo b{font-size:13px;font-weight:800;letter-spacing:-.01em}
.eNavFecha{
  width:var(--n-alt,44px);height:var(--n-alt,44px);flex:none;display:grid;place-items:center;
  background:none;border:1px solid #E4E7EC;border-radius:11px;cursor:pointer;
  font-size:19px;line-height:1;color:#0A0C12;
}

/* ── o corte ─────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .eNavLinks,.eNavMenu,.eNavBtn.someCedo{display:none}
  .eNavHam{display:inline-flex}
}
@media(max-width:520px){
  .eNavIn{padding:10px 14px;gap:8px}
  .eNavMarca i{display:none}
  .eNavBtn{padding:10px 13px;font-size:12.5px}
}
/* 360px é o menor aparelho que aparece no analytics: aqui sobra só marca,
   um botão e o hambúrguer — nada encavalado, que era o defeito de 13/08. */
@media(max-width:380px){
  .eNavBtn:not(.fantasma){display:none}
}

@media(prefers-reduced-motion:reduce){
  .eNav,.eNavGavetaIn,.eNavPainel,.eNavBtn,.eNavHam span,.eNavHam span::before,.eNavHam span::after{transition:none}
}
/* ── SEM MODO ESCURO, DE PROPÓSITO (medido em 13/08) ──────────────────
   Esta folha nasceu com um bloco `prefers-color-scheme:dark` que deixava
   o cabeçalho e a gaveta escuros. Só que o RESTO DO SITE não tem modo
   escuro: `body` fica `#FBFBFC` em qualquer preferência (o site é
   CLARO + AZUL desde 08/08, MAPA §4).

   O resultado medido em 390px com o sistema no escuro era uma barra
   preta e uma gaveta preta em cima de uma página branca — pior do que
   não ter modo escuro nenhum, porque parece defeito, não escolha.

   A regra: o modo escuro do cabeçalho só volta no dia em que o site
   inteiro ganhar modo escuro. Componente não decide sozinho o tema da
   página; ou o site todo troca, ou ninguém troca. */

/* quando a gaveta está aberta a página atrás não rola */
body.eNavTravado{overflow:hidden}

/* ═══ ÂNCORA QUE PARA NO LUGAR CERTO (13/08) ═══════════════════════════
   O DEFEITO relatado pelo dono: "clico e vai pro meio da página, num
   herói errado". Causa: o cabeçalho é `position:sticky`, então o
   navegador rola a âncora até o TOPO DA JANELA — e o cabeçalho, que
   flutua por cima, come os primeiros ~72px do destino. O visitante cai
   no meio do parágrafo de uma seção, sem ver o título dela, e acha que
   o link está quebrado.
   `scroll-margin-top` diz ao navegador para parar essa distância ANTES.
   Vale para qualquer elemento com id — é assim que toda âncora do site
   passa a chegar mostrando o próprio cabeçalho. */
:root{--eNavAltura:76px}
[id]{scroll-margin-top:calc(var(--eNavAltura) + 18px)}
@media(max-width:520px){:root{--eNavAltura:68px}}
/* alvo dentro de aba/carrossel não precisa da folga — ele não é destino
   de rolagem, e a folga empurraria o conteúdo dentro do próprio quadro */
.showTela[id],.eNavPainel [id],.dobra [id]{scroll-margin-top:0}

/* ═══ CASCATA DE ENTRADA (13/08) ═══════════════════════════════════════
   Mora aqui, e não na home, porque TODA página linka esta folha — e a
   vitrine de produtos existe na home e em /produtos. Comportamento em
   eagle-vivo.js. A classe é aplicada PELO script, nunca escrita no HTML:
   assim, sem JS o cartão nasce visível em vez de nascer invisível para
   sempre — que é o defeito clássico de animação de entrada. */
.entra{
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1) var(--atraso,0ms),
             transform .55s cubic-bezier(.2,.7,.2,1) var(--atraso,0ms);
}
.entra.entrou{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .entra{opacity:1;transform:none;transition:none}
}