/* ════════════════════════════════════════════════════════════════════════
   Mega menu FOOZ — Soluções, Segmentos e Sobre a FOOZ
   ────────────────────────────────────────────────────────────────────────
   O dropdown do topo deixa de ser uma lista e passa a ser uma pequena área
   de navegação: categorias, ícone, título, descrição curta e uma faixa de
   destaque embaixo. A ideia é reduzir a SENSAÇÃO de excesso sem esconder
   solução nenhuma — hierarquia e respiro no lugar de corte.

   Compatibilidade: o painel continua sendo um .nav-dropdown, então o CSS de
   abrir/fechar e o JS de teclado que já existem em todas as páginas seguem
   valendo. O que muda vem pelos modificadores .is-mega e .is-grupos.

   As páginas têm conjuntos de variáveis diferentes (a landing usa
   --fooz-rich/--navy-900 #000F5A, as páginas de solução usam outro set),
   por isso todo var() aqui tem fallback fixo: o menu fica idêntico em
   qualquer página do site.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Painel largo, ancorado à faixa de conteúdo do header ─────────── */

/* o item que abre um mega menu deixa de ser a referência de posição:
   quem posiciona é a .nav-inner, para o painel nascer alinhado à grade */
.nav-inner { position: relative; }
.nav-item.tem-mega { position: static; }

.nav-dropdown.is-mega {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  min-width: 0;
  transform: none;
  margin-top: 12px;
  padding: 26px 30px 22px;
  border-radius: 20px;
}
.nav-item:hover .nav-dropdown.is-mega,
.nav-item.is-open .nav-dropdown.is-mega,
.nav-item:focus-within .nav-dropdown.is-mega { transform: none; }

/* em telas baixas o painel rola por dentro em vez de sair da janela */
.nav-dropdown.is-mega,
.nav-dropdown.is-grupos { max-height: calc(100vh - 104px); overflow-y: auto; }

/* a setinha do dropdown comum não faz sentido num painel largo */
.nav-dropdown.is-mega::before { display: none; }
.nav-dropdown.is-mega::after { top: -12px; height: 12px; }

/* PONTE DE HOVER — sem isto o painel fecha no caminho até ele.
   No dropdown comum o .nav-item é relative e o painel nasce colado ao link,
   então os 12px de respiro eram todo o vão. No mega o .nav-item é static
   (quem posiciona é a .nav-inner), então o top:100% passa a ser a base do
   header: sobram ~40px entre o fim do link e o topo do painel, onde o
   :hover se perdia. A faixa invisível abaixo do gatilho cobre esse vão.
   Ela é estreita de propósito — larga demais encostaria nos botões do
   topo e nos itens vizinhos, abrindo dois painéis ao mesmo tempo.
   Vai no ::before porque o ::after do link já é o sublinhado animado
   do menu — sobrescrevê-lo apagaria o sublinhado.
   A ponte precisa nascer no GATILHO, não no painel: os painéis usam
   overflow-y:auto (trava de altura em telas baixas) e isso recorta
   qualquer pseudo-elemento posicionado fora da caixa deles. */
.nav-links .nav-item > a { position: relative; }
.nav-links .nav-item > a::before {
  content: "";
  position: absolute;
  left: -14px; right: -14px;
  top: 100%;
  height: 22px;           /* vão do dropdown comum (~15px) + folga */
  /* inerte enquanto o menu está fechado — senão seria uma faixa invisível
     capturando cliques sobre o conteúdo da página. Só passa a receber o
     mouse depois que o próprio gatilho já está em hover/aberto. */
  pointer-events: none;
}
.nav-links .nav-item.tem-mega > a::before { height: 48px; }   /* vão do mega: ~40px */
.nav-links .nav-item:hover > a::before,
.nav-links .nav-item.is-open > a::before,
.nav-links .nav-item:focus-within > a::before { pointer-events: auto; }

/* ─── 2. Colunas e categorias ────────────────────────────────────────── */

.mega-cols {
  display: grid;
  gap: 4px 26px;
  grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
}
.mega-col { min-width: 0; }

.mega-cat {
  margin: 0 0 2px;
  padding: 0 12px 10px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fooz-rich, #0D0EFF);
  border-bottom: 1px solid rgba(0, 29, 130, .10);
}

/* ─── 3. Item: ícone + título + descrição curta ──────────────────────── */

.nav-dropdown.is-mega .mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.nav-dropdown.is-mega .mega-item:hover {
  background: linear-gradient(135deg, rgba(0,176,251,.10) 0%, rgba(13,14,255,.06) 100%);
}
.mega-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--grad-cta, linear-gradient(135deg, #5BB6FB 0%, #00B0FB 18%, #3B86F5 42%, #0D0EFF 72%, #001D82 100%));
  background-size: 180% 180%;
  background-position: 0% 0%;
  box-shadow: 0 6px 14px -6px rgba(13, 14, 255, .45);
  transition: background-position .35s ease, transform .25s ease;
}
.mega-item:hover .mega-ico { background-position: 100% 100%; transform: scale(1.06); }

.mega-txt { display: flex; flex-direction: column; gap: 3px; padding-top: 1px; min-width: 0; }
.mega-ttl {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy-900, #000F5A);
}
.mega-sub {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gray-500, #64748b);
}
.mega-item:hover .mega-ttl { color: var(--fooz-catalina, #001D82); }

/* estrela do item diferenciado e etiqueta de "em breve" */
.mega-star { color: #F3B41C; margin-left: 5px; font-size: 11px; }
.mega-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  font-family: "Sora", "Inter", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500, #64748b);
  vertical-align: 2px;
}

/* ─── 4. Faixa de destaque no rodapé do painel ───────────────────────── */

.nav-dropdown.is-mega .mega-rodape {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 20px;
  padding: 14px 18px 14px 14px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(0,176,251,.10) 0%, rgba(13,14,255,.07) 58%, rgba(0,29,130,.06) 100%);
  border: 1px solid rgba(0, 29, 130, .08);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav-dropdown.is-mega .mega-rodape:hover {
  background: linear-gradient(120deg, rgba(0,176,251,.14) 0%, rgba(13,14,255,.10) 58%, rgba(0,29,130,.08) 100%);
  border-color: rgba(13, 14, 255, .26);
  box-shadow: 0 18px 36px -22px rgba(0, 15, 90, .40);
}
.nav-dropdown.is-mega .mega-rodape-arte {
  flex: 0 0 auto;
  width: clamp(120px, 14vw, 168px);
  border-radius: 11px;
  overflow: hidden;
  background: rgba(255, 255, 255, .6);
}
.mega-rodape-arte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 34%;   /* mostra o corpo do mapa, não a barra de filtros */
}
.nav-dropdown.is-mega .mega-rodape-txt { flex: 1 1 auto; min-width: 0; }
.mega-rodape-etq {
  display: block;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fooz-rich, #0D0EFF);
}
.mega-rodape-txt b {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-900, #000F5A);
}
.mega-rodape-txt span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gray-500, #64748b);
}
.nav-dropdown.is-mega .mega-rodape-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--grad-cta, linear-gradient(135deg, #5BB6FB 0%, #00B0FB 18%, #3B86F5 42%, #0D0EFF 72%, #001D82 100%));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(13, 14, 255, .55);
  transition: transform .2s ease;
}
.mega-rodape:hover .mega-rodape-cta { transform: translateY(-1px); }
.mega-rodape-cta svg { transition: transform .22s ease; }
.mega-rodape:hover .mega-rodape-cta svg { transform: translateX(3px); }

/* linha final com o link para a visão geral */
.nav-dropdown.is-mega .mega-pe {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 29, 130, .08);
}
.nav-dropdown.is-mega .mega-pe-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fooz-rich, #0D0EFF);
  text-decoration: none;
}
.nav-dropdown.is-mega .mega-pe-link:hover { background: rgba(13, 14, 255, .06); }

/* ─── 5. Dropdown comum organizado em grupos (Sobre a FOOZ) ──────────── */

.nav-dropdown.is-grupos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
  width: max-content;
  max-width: min(620px, 94vw);
  padding: 16px;
}
.nav-dropdown.is-grupos .nd-grupo { min-width: 0; }
.nav-dropdown.is-grupos .mega-cat { padding: 0 10px 8px; margin-bottom: 4px; }
/* a partir da segunda fileira de grupos, um respiro antes do título */
.nav-dropdown.is-grupos .nd-grupo:nth-child(n+3) .mega-cat { margin-top: 14px; }
.nav-dropdown.is-grupos .nd-sub { white-space: normal; }

/* ─── 6. Responsivo ──────────────────────────────────────────────────── */

/* em telas menores o painel encolhe antes de o menu virar hambúrguer */
@media (max-width: 1200px) {
  .nav-dropdown.is-mega { padding: 22px 22px 18px; }
  .mega-cols { gap: 4px 16px; }
  .mega-rodape-arte { width: 120px; }
}
/* entre 1025 e 1120px o menu desktop ainda aparece: as colunas continuam
   as mesmas (quebrar em duas deixaria o painel alto demais), só o respiro
   diminui. Abaixo de 1025px quem assume é o menu do celular. */
@media (max-width: 1120px) {
  .nav-dropdown.is-mega { padding: 18px 18px 16px; }
  .mega-cols { gap: 2px 12px; }
  .nav-dropdown.is-mega .mega-item { padding: 9px 10px; gap: 10px; }
  .mega-sub { font-size: 11px; }
  .nav-dropdown.is-mega .mega-rodape { flex-wrap: wrap; gap: 14px; }
  .nav-dropdown.is-mega .mega-rodape-txt { flex: 1 1 260px; }
}

/* ─── 7. Menu do celular: grupos em acordeão, não o mega reduzido ────── */

/* CORREÇÃO DE BASE — o header usa backdrop-filter, e isso faz de .nav um
   bloco de contenção para descendentes position:fixed. O painel do celular
   está declarado com `inset: 64px 0 0`, então em vez de ocupar a tela ele
   herdava a altura do header: 52px, com todo o conteúdo cortado pelo
   overflow. Amarrando a altura à viewport o painel volta a abrir inteiro.
   (Problema anterior a este menu; sem isso não existe versão mobile.) */
.nav-mobile {
  top: 64px; left: 0; right: 0; bottom: auto;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}


.nm-grupo-tit {
  display: block;
  margin: 14px 0 2px;
  padding: 0 2px;
  font-family: "Sora", "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fooz-rich, #0D0EFF);
}
.nm-grupo-tit:first-child { margin-top: 4px; }
.nm-acc-corpo .nm-sub {
  display: block;
  margin-top: -4px;
  padding-bottom: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--gray-500, #64748b);
}
.nm-acc-corpo .nm-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  font-family: "Sora", "Inter", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500, #64748b);
  vertical-align: 2px;
}
.nm-todos {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fooz-rich, #0D0EFF);
}

/* ─── Outros segmentos ─────────────────────────────────────────────────
   Nove segmentos atendidos que não têm página comercial própria. Ficam
   como texto corrido, pequeno, SEM link: não há para onde levar, e um
   link que não leva a lugar nenhum é pior que nenhum link. */
.mega-outros {
  margin: 0;
  padding: 0 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--gray-500, #64748b);
}
.nm-acc-corpo .nm-outros {
  display: block;
  padding: 8px 2px 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-500, #64748b);
}
.nm-acc-corpo .nm-outros b {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-500, #64748b);
}