/* ══════════════════════════════════════════════════════════════════════
   NAV.CSS — fonte única do menu principal do site (Prædictor)
   Criado em 21/09/2026, a pedido dele: "quando você mexer numa [página],
   você mexe em todas?" — resposta na época era não (44 cópias do mesmo
   CSS, uma por página). Isto resolve isso.

   ⚠️ USADO POR 44 PÁGINAS (22 PT + 22 EN, as que têm o menu completo com
   botão sanduíche). NÃO é usado por: mentoria.html, contato.html,
   diagnostico.html (nav reduzido, próprio) nem janela-critica.html /
   ebook-operacional.html (sem nav — landing de venda).

   🔴 VALORES LITERAIS DE PROPÓSITO, não var(--x). As páginas do site não
   têm todas o mesmo conjunto de variáveis CSS definidas (--navy2, --gold2
   e --ease faltam em várias) — var() indefinida é descartada em silêncio,
   e é exatamente essa classe de bug que este projeto já levou várias
   vezes (ver feedback_mdc-html-nav-divergente). Um arquivo compartilhado
   não pode depender do que a página que o inclui definiu ou não.

   ⚠️ Ao editar: isto vale pras 44 páginas ao mesmo tempo. Testar em pelo
   menos uma PT e uma EN, com e sem `.lang-switch` (mdc.html não tem PT|EN
   na versão PT), antes de considerar pronto.
   ═══════════════════════════════════════════════════════════════════════ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 3rem;
  background: rgba(27,42,74,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,168,76,.2);
  transition: padding .3s cubic-bezier(.4,0,.2,1);
}
nav.scrolled { padding: .9rem 3rem; }

.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: #FFFFFF; letter-spacing: .04em; display: flex; align-items: center; }
.nav-logo span { color: #C9A84C; }
.nav-logo img { height: 58px; width: auto; display: block; }

/* Ícone de casa + logo dentro de um wrapper próprio (.nav-brand): sem
   isso, o justify-content:space-between do nav distribui o espaço livre
   entre TODOS os itens adjacentes, e a distância ícone↔logo mudava de
   página pra página conforme o menu daquela página fosse mais largo ou
   mais estreito. */
.nav-brand { display: flex; align-items: center; }
.nav-home { display: inline-flex; flex-direction: column; align-items: center;
            justify-content: center; gap: .15rem; margin-right: .85rem;
            color: #C9A84C; transition: color .2s; }
.nav-home:hover { color: #E8C97A; }
.nav-home svg { display: block; width: 40px; height: 40px; }
.nav-home-label { font-size: .58rem; font-weight: 700; letter-spacing: .1em; }

.nav-links { display: flex; gap: 2.5rem; }
.nav-links a { font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.75); letter-spacing: .06em; text-transform: uppercase; transition: color .2s; position: relative; }
/* Destaca o link da página atual. Nem toda página marca um link com
   class="active" (algumas usam só o ícone HOME) — a regra é inerte até a
   marcação da página usar a classe. */
.nav-links a.active { color: #C9A84C; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:#C9A84C; transition:width .3s; }
.nav-links a:hover { color: #FFFFFF; }
.nav-links a:hover::after { width: 100%; }

.nav-cta { background: #C9A84C; color: #0D1A2E; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .65rem 1.5rem; border-radius: 2px; transition: background .2s, transform .2s; }
.nav-cta:hover { background: #E8C97A; transform: translateY(-1px); }
/* CTA curto em toda largura (decisão de 07/08/2026): o texto longo
   "Quero Entender Onde Estou" empurrava os links por cima do logo. */
.nav-cta .cta-longo { display: none; }
.nav-cta .cta-curto { display: inline; }
/* 'Início' só existe no painel mobile — no desktop o ícone HOME já cumpre esse papel. */
.nav-inicio { display: none; }

/* ── "SOBRE" + SUB-LINHA ("Nossa Filosofia · Ebooks · Artigos") ──────────
   .grupo-sobre NÃO pode ter position:relative — senão o link ancora nela
   em vez de no <nav>. E precisa ser `display:inline` (não inline-flex):
   com inline-flex, o .nav-links esticava o item pra altura do
   .lang-switch e recentrava "Sobre" pra baixo em relação aos vizinhos. */
.grupo-sobre { display: inline; }
.sub-sep { color: rgba(201,168,76,.5); font-style: normal; font-size: .78rem; }
.nav-links a.sub-filosofia {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: #C9A84C; border-bottom: 1px solid rgba(201,168,76,.55);
}
.nav-links a.sub-filosofia:hover { color: #E8C97A; border-bottom-color: rgba(201,168,76,.7); }
/* 🔴 A POSIÇÃO horizontal da .sub-linha (left/transform) NÃO está aqui —
   fica em cada página, porque o offset certo varia conforme o menu tem
   ou não .lang-switch (PT|EN). Ver o comentário no <style> de cada
   página. Isto aqui é só a aparência (cor, espaçamento, texto), que é
   igual em todas. */
.sub-linha {
  bottom: 5px; z-index: 120;
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
}

/* ── SELETOR DE IDIOMA "PT | EN" ──────────────────────────────────────
   Cápsula com moldura dourada e fundo #2E3F63 (o mesmo azul-claro já em
   uso em .cartao--claro). margin-left:5.5rem separa do menu de texto —
   valor calibrado ao vivo com ele em 21/09/2026, não reduzir sem medir
   de novo (ele já pediu mais separação duas vezes). */
.lang-switch { display: flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border: 1px solid rgba(201,168,76,.5); border-radius: 3px; margin-left: 5.5rem; background: #2E3F63; }
.lang-switch a { font-size: .78rem; font-weight: 700; letter-spacing: .05em; padding: .4rem .3rem; display: inline-flex; align-items: center; transition: opacity .2s, color .2s; }
.lang-switch a::after { content: none; }
.lang-switch a.lang-ativo { color: #FFFFFF; opacity: 1; }
.lang-switch a.lang-inativo { color: rgba(255,255,255,.75); opacity: .45; }
.lang-switch a.lang-inativo:hover { opacity: .75; }
.lang-switch .lang-sep { color: rgba(255,255,255,.3); font-size: .78rem; }
/* 🔴 Breakpoint PRÓPRIO (900px), diferente do hamburger (1180px) — não
   juntar os dois. Achei essa diferença testando antes de propagar. */
@media (max-width: 900px) {
  .lang-switch { order: -1; width: 100%; justify-content: center; margin: 0 0 .5rem 0; border-color: rgba(201,168,76,.35); }
  .lang-switch a { min-height: 44px; }
}

/* ── MENU MOBILE ─────────────────────────────────────────────────────── */
.nav-toggle {
  display: none; background: none; padding: 0; cursor: pointer;
  border: 1px solid rgba(201,168,76,.45); border-radius: 3px;
  width: 44px; height: 44px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: #C9A84C; transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#menu-principal > a { white-space: nowrap; }
/* Faixa apertada: entre o breakpoint do sanduíche (1180) e ~1200 o menu
   cabia com folga zero. Gap menor só nessa faixa, sem tocar no
   espaçamento de 40px das telas largas. */
@media (max-width: 1200px) { #menu-principal { gap: 24px; } }
@media (max-width: 1120px) { #menu-principal { gap: 16px; } }

/* ── O GRUPO MDC NO MENU (08/08/2026) ──────────────────────────────────
   Quadro com moldura dourada agrupando os degraus do MDC. O rótulo vai NA
   BORDA, como legenda de fieldset. 🔴 CONFIRMADO 21/09/2026: presente e
   IDÊNTICO nas 12 páginas PT de menu completo checadas — não é exclusivo
   da home, é padrão do site. (Corrige a suposição registrada antes, em
   `[[feedback_mdc-html-nav-divergente]]`, de que seria só da index.html.) */
.grupo-mdc { position: relative; display: inline-flex; align-items: center;
             gap: inherit; padding: .45rem .95rem; margin: -.45rem 0;
             border: 1px solid rgba(201,168,76,.42); border-radius: 4px; }
.nav-links a.grupo-mdc-nome { position: absolute; top: -.72rem; left: .8rem;
                  background: #0D1A2E; padding: 0 .45rem;
                  font-size: .74rem; font-weight: 700;
                  letter-spacing: .13em; text-transform: uppercase;
                  color: #C9A84C; white-space: nowrap; }
.nav-links a.grupo-mdc-nome:hover { color: #E8C97A; }

@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  nav { flex-wrap: wrap; gap: .6rem; }
  .nav-logo img { height: 46px; }
  .nav-cta { font-size: .7rem; padding: .6rem .95rem; letter-spacing: .06em; white-space: nowrap; }
  .nav-cta .cta-longo { display: none; }
  .nav-cta .cta-curto { display: inline; }
  nav .nav-links {
    display: none; flex-direction: column; align-items: stretch;
    width: 100%; gap: 0; order: 3; margin: .4rem 0 0; padding: .25rem 0 0;
    border-top: 1px solid rgba(201,168,76,.25);
  }
  nav .nav-links.aberto { display: flex; }
  nav .nav-links .nav-inicio { display: block; }
  /* O painel herda o fundo do nav: sem isto o conteudo da pagina
     aparece POR TRAS dos itens do menu. */
  nav .nav-links.aberto { background-color: inherit; }
  nav .nav-links > * { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  nav .nav-links a { display: block; width: 100%; padding: .95rem .2rem; font-size: 1rem; }

  /* No painel do celular o quadro do MDC atrapalha: os itens viram lista
     vertical, e o rótulo passa a ser um item normal. */
  .grupo-mdc { display: contents; border: none; padding: 0; margin: 0; }
  /* O `padding: 0` daqui deixava o alvo de toque com 20px, contra 50px dos
     vizinhos — achado testando no celular em 08/08/2026. Zera só o
     horizontal, o vertical vem de `.nav-links a`. */
  .nav-links a.grupo-mdc-nome { position: static; background: none;
                      padding: .8rem 0;
                      font-size: inherit; }

  /* No painel mobile, "Sobre" e a sub-linha viram itens normais da lista. */
  .grupo-sobre { display: contents; }
  .sub-linha { display: contents; }
  .sub-sep { display: none; }
  .nav-links a.sub-filosofia { position: static; transform: none; margin: 0;
    background: none; border: none; box-shadow: none; padding: .95rem .2rem;
    font-size: 1rem; letter-spacing: normal; text-transform: none;
    font-weight: 500;
    color: rgba(255,255,255,.75); opacity: 1; pointer-events: auto; }
  .nav-links a.sub-filosofia::before { content: none; }
}

/* Telas estreitas (iPhone SE = 320, compactos = 360). */
@media (max-width: 430px) {
  nav { padding: .75rem 1rem; gap: .4rem; }
  .nav-logo img { height: 36px !important; }
  .nav-logo > span { font-size: .72rem; padding-left: 8px !important; margin-left: 8px !important; }
  .nav-cta { font-size: .62rem; padding: .5rem .7rem; letter-spacing: .04em; }
  .nav-toggle { width: 40px; height: 40px; }
}