/* ══════════════════════════════════════════════════════════════════
   NAVEGAÇÃO GLOBAL + RODAPÉ MAPA

   Antes: cada página tinha um nav próprio, feito de âncoras da própria
   página, e 7 das 14 páginas não eram alcançáveis a partir de lugar
   nenhum do site. Abaixo de 960px o nav simplesmente sumia e não havia
   menu mobile nenhum.

   Agora: o mesmo nav em todas as páginas, com três dropdowns (Produto,
   Para quem, Recursos), um menu mobile de verdade, e um rodapé que
   repete o mapa inteiro para quem chega pelo fim da página.

   Os dropdowns abrem por :hover E :focus-within, o que cobre mouse,
   teclado (Tab entra no botão) e toque (tocar no botão foca) sem
   depender de JS. O JS só cuida do menu mobile e do Escape.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1 · DROPDOWNS DO NAV (desktop)
   ───────────────────────────────────────────── */

.nav-drop { position: relative; display: flex; }

.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .2s cubic-bezier(.7,0,.3,1), background-color .2s cubic-bezier(.7,0,.3,1);
}
.nav-drop-btn svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  /* #1342: a seta gira 180° quando o painel abre. Isto NÃO é o "lift no hover"
     que a issue remove — é o indicador de estado de um disclosure, e o próprio
     sistema de referência prescreve a rotação de 180° na abertura. */
  transition: transform .2s cubic-bezier(.7, 0, .3, 1);
}
.nav-drop:hover .nav-drop-btn,
.nav-drop:focus-within .nav-drop-btn {
  color: var(--text);
  background: var(--card2);
}
.nav-drop:hover .nav-drop-btn svg,
.nav-drop:focus-within .nav-drop-btn svg {
  transform: rotate(180deg);
}

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 310px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s cubic-bezier(.7,0,.3,1), visibility .2s;
  z-index: 320;
}
/* Ponte invisível entre o botão e o painel: sem ela o painel fecha
   quando o mouse atravessa o vão de 12px */
.nav-drop-panel::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* #1214 — Escape precisa fechar o painel SEM tirar o foco do botão (o
   mesmo padrão do burger.focus() do menu mobile). Como a abertura é só
   :focus-within, focar de volta o botão reabriria o painel — esta classe
   força o fechamento por cima enquanto o JS mantém o foco nele. */
.nav-drop.force-close .nav-drop-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(-6px) !important;
}

.nav-drop-item {
  display: block;
  padding: 10px 12px;
  border-radius: 11px;
  transition: background var(--dur-fast);
}
/* Precisa de DUAS classes para vencer `.nav-links a` do lp-prod.css, que
   é (0,1,1) e aplica white-space:nowrap. Um `.nav-drop-item` sozinho é
   (0,1,0) e perde, mesmo declarado depois. Sem isso a descrição não
   quebra: no painel de coluna única ele só estica, mas no de duas
   colunas o texto vaza por cima da coluna vizinha. */
.nav-drop-panel .nav-drop-item,
.nav-drop-panel .ndi-t,
.nav-drop-panel .ndi-d { white-space: normal; }
.nav-drop-item:hover { background: var(--card2); }
.ndi-t {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--ls-body);
  margin-bottom: 2px;
}
.ndi-d {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.nav-drop-item:hover .ndi-t { color: var(--accent-text, var(--accent-bright)); }

/* #1214 — pagina atual. Duas classes pelo mesmo motivo do bloco acima:
   precisa vencer `.nav-links a` de lp-prod.css. */
.nav-drop-panel .nav-drop-item[aria-current="page"] { background: var(--card2); }
.nav-drop-panel .nav-drop-item[aria-current="page"] .ndi-t {
  color: var(--accent-text, var(--accent-bright));
}
.nav-mobile .nm-item[aria-current="page"] {
  color: var(--accent-text, var(--accent-bright));
  font-weight: 600;
}
.nav-links .hl-link[aria-current="page"] {
  color: var(--accent-text, var(--accent-bright));
}

/* ─────────────────────────────────────────────
   2 · BOTÃO HAMBÚRGUER
   ───────────────────────────────────────────── */

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  /* #1214 — o burger e o .theme-btn ficam lado a lado no topo mobile, entao
     usam o mesmo tratamento: fundo transparente, raio 8px e hover no accent.
     Antes o burger vinha preenchido com --card e raio 10px, e o par lia como
     dois controles de sistemas diferentes. */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s cubic-bezier(.7,0,.3,1), background-color .2s cubic-bezier(.7,0,.3,1);
}
.nav-burger svg { width: 18px; height: 18px; }
.nav-burger .bx { display: none; }
.nav-burger[aria-expanded="true"] .bm { display: none; }
.nav-burger[aria-expanded="true"] .bx { display: block; }

/* ─────────────────────────────────────────────
   3 · PAINEL MOBILE
   ───────────────────────────────────────────── */

/* position:absolute, não fixed. O #nav tem backdrop-filter, o que o torna
   o bloco contentor de qualquer descendente position:fixed; com fixed o
   painel resolvia top/bottom contra a caixa de 60px do nav e colapsava
   para altura zero. Absolute contra o mesmo nav, com altura explícita,
   dá o painel de tela cheia que se esperava. */
.nav-mobile {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 40px;
  z-index: 310;
  animation: navMobileIn .22s var(--ease-out);
}
.nav-mobile[hidden] { display: none; }

@keyframes navMobileIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nm-group + .nm-group { margin-top: 22px; }
.nm-group-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.nm-group-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.nm-item {
  display: block;
  padding: 11px 12px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  transition: background var(--dur-fast);
}
.nm-item:hover, .nm-item:active { background: var(--card); }
.nm-item span {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}

.nm-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nm-foot .btn-cta { width: 100%; text-align: center; }
.nm-login {
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--dim);
  padding: 11px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  transition: border-color .2s cubic-bezier(.7,0,.3,1), color .2s cubic-bezier(.7,0,.3,1);
}
.nm-login:hover { color: var(--text); border-color: var(--border3); }

/* Trava o scroll do body enquanto o menu está aberto */
body.nav-open { overflow: hidden; }

@media (max-width: 960px) {
  .nav-burger { display: inline-flex; }
  /* Mesma altura do burger, senao os dois botoes do topo desalinham (36 vs 32) */
  #nav .theme-btn { min-height: 36px; min-width: 36px; border-radius: 8px; }
}
@media (min-width: 961px) {
  .nav-mobile { display: none !important; }
}
@media (max-width: 560px) {
  /* No aperto, "Entrar" sai do topo: já está dentro do menu mobile */
  #nav .nav-login { display: none; }
}

/* ─────────────────────────────────────────────
   4 · RODAPÉ MAPA
   ───────────────────────────────────────────── */

footer .foot-in {
  display: block;
  max-width: 1200px;
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) repeat(5, minmax(0, 1fr));
  gap: 40px 22px;
  padding-bottom: 40px;
}

.foot-brand-col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.foot-brand-col .foot-tagline {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 260px;
}
.foot-brand-col .foot-partners { justify-content: flex-start; margin: 0; }
.foot-brand-col .foot-social { justify-content: flex-start; }

.foot-col h3 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing:var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.foot-col a {
  display: block;
  font-size: 13.5px;
  color: var(--dim);
  padding: 5px 0;
  transition: color var(--dur-fast);
}
.foot-col a:hover { color: var(--accent-text, var(--accent-bright)); }

.foot-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.foot-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-legal a, .foot-legal span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  transition: color var(--dur-fast);
}
.foot-legal a { padding-block: 4px; margin-block: -4px; }
.foot-legal a:hover { color: var(--accent-text, var(--accent-bright)); }

@media (max-width: 1000px) {
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .foot-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  footer { padding: 40px 0 80px; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ─────────────────────────────────────────────
   5 · DROPDOWN EM DUAS COLUNAS
   ─────────────────────────────────────────────
   Dropdown "Para quem" em duas colunas ──
   Com função E segmento no mesmo menu, uma coluna só ficaria com 9
   itens numa lista longa. Duas colunas rotuladas é o padrão que os
   dois concorrentes usam para o mesmo problema. */
.nav-drop-panel.wide {
  width: 660px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  padding: 12px;
  align-items: start;
}
.nav-drop-panel.wide .nav-drop-col { min-width: 0; }
.nav-drop-col-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing:var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.nav-drop-col { display: flex; flex-direction: column; }

@media (max-width: 1100px) {
  .nav-drop-panel.wide { min-width: 520px; }
}