/* ============================================================
   MUNDO | Navegação — a barra é o índice, o painel é o mapa
   ------------------------------------------------------------
   Um arquivo só, usado por toda página que tiver navegação.
   Mudou o menu, muda aqui.

   Os tokens (--folha, --tinta…) vêm do styles.css da página.
   O valor depois da vírgula é a reserva, para páginas novas
   que ainda não carreguem o sistema inteiro.
   ============================================================ */

.nav-wrapper{
  --nv-folha:var(--folha,#FBF7EE);
  --nv-folha-2:var(--folha-2,#F3ECDD);
  --nv-mesa:var(--mesa,#E5D3C0);
  --nv-tinta:var(--tinta,#13241B);
  --nv-tinta-45:var(--tinta-45,#6B756E);
  --nv-tinta-25:var(--tinta-25,#9AA29C);
  --nv-terra:var(--terra,#B5551F);
  --nv-verde:var(--verde,#1B3A2D);
  --nv-fio:var(--fio,rgba(19,36,27,.15));
  --nv-fio-forte:var(--fio-forte,#13241B);
  --nv-fio-medio:var(--fio-medio,rgba(19,36,27,.32));
  --nv-fd:var(--fd,'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif);
  --nv-fm:var(--fm,'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace);
  --nv-ease:var(--ease,cubic-bezier(.2,.7,.3,1));
  --nv-papel:var(--papel-3,0 1px 0 rgba(19,36,27,.10), 0 5px 12px -8px rgba(19,36,27,.35));
  --nv-papel-alto:var(--papel-2,0 1px 0 rgba(19,36,27,.15), 0 22px 46px -26px rgba(19,36,27,.48));
}

/* ── Pular para o conteúdo ──────────────────────────────────
   Invisível até alguém apertar Tab. É o primeiro alvo do
   teclado na página e salta a navegação inteira.           */
.pular{
  position:fixed;top:-100px;left:12px;z-index:400;
  font-family:var(--fm,monospace);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--verde,#1B3A2D);color:#F7F2E6;
  padding:13px 18px;border-radius:2px;
  box-shadow:0 1px 0 rgba(19,36,27,.15), 0 22px 46px -26px rgba(19,36,27,.48);
  transition:top .18s cubic-bezier(.2,.7,.3,1);
}
.pular:focus{top:12px}

/* ============================================================
   A BARRA
   ============================================================ */
.nav-wrapper{
  position:fixed;top:12px;left:0;right:0;z-index:200;
  display:flex;justify-content:center;
  padding:0 var(--gutter,clamp(1rem,3.4vw,2.5rem));
  pointer-events:none;
}
/* A caixa segura barra e painel juntos, para o painel abrir
   exatamente na largura da barra. */
.nav-caixa{
  position:relative;pointer-events:auto;
  width:100%;max-width:var(--container,1180px);
}

.navbar{
  display:flex;align-items:center;gap:clamp(.7rem,2vw,1.6rem);
  padding:9px 9px 9px 20px;
  background:var(--nv-folha);
  border:1px solid var(--nv-fio-forte);border-radius:2px;
  box-shadow:var(--nv-papel);
  transition:box-shadow .25s var(--nv-ease);
}
.navbar.scrolled{box-shadow:var(--nv-papel-alto)}

.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo svg{height:24px;width:auto;display:block}
.nav-logo svg path{fill:var(--nv-tinta)}
.nav-logo svg circle{fill:var(--verde-vivo,#2D5E3F)}

/* ── Os nomes dos grupos, sempre à vista ── */
.nav-grupos{
  display:flex;align-items:center;gap:clamp(.5rem,1.7vw,1.5rem);
  margin-left:auto;list-style:none;
}
.nav-grupo{
  display:block;
  font-family:var(--nv-fd);font-size:.925rem;font-weight:600;
  letter-spacing:-.014em;font-variation-settings:'wdth' 96;
  color:var(--tinta-70,#3D4A42);
  padding:6px 0;border:0;border-bottom:1.5px solid transparent;
  background:none;cursor:pointer;white-space:nowrap;
  transition:color .2s,border-color .2s;
}
.nav-grupo:hover,
.nav-grupo[data-atual]{color:var(--nv-tinta);border-bottom-color:var(--nv-terra)}

/* ── O botão ── */
.nav-cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--nv-fd);font-size:.885rem;font-weight:700;
  letter-spacing:-.012em;font-variation-settings:'wdth' 96;
  background:var(--nv-verde);color:#F7F2E6;
  border:1px solid var(--nv-verde);border-radius:2px;
  padding:10px 16px;box-shadow:var(--nv-papel);
  transition:transform .18s var(--nv-ease);
}
.nav-cta:hover{transform:translateY(-2px)}
.nav-cta svg{flex:none}

/* ── O ☰ do celular: só o ícone, sem a palavra ── */
.nav-ham{
  display:none;flex-direction:column;gap:5px;flex:none;
  margin-left:auto;padding:11px;
  border:1px solid var(--nv-fio-forte);border-radius:2px;
  background:var(--nv-folha);cursor:pointer;
}
.nav-ham span{
  display:block;width:18px;height:2px;background:var(--nv-tinta);
  transition:transform .25s var(--nv-ease),opacity .18s;
}
.nav-ham[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   O PAINEL — a folha que desce sobre a mesa
   ============================================================ */
.nav-painel{
  position:absolute;top:calc(100% + 9px);left:0;right:0;
  background:var(--nv-folha);
  border:1px solid var(--nv-fio-forte);border-radius:2px;
  box-shadow:var(--nv-papel-alto);
  padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,34px) clamp(16px,2vw,22px);
}
.nav-painel[hidden]{display:none}

/* O vão de 9px entre a barra e o painel é um buraco: ao
   atravessá-lo o mouse sai do conjunto e o painel fecharia no
   meio do caminho. Esta ponte invisível cobre o vão, e é ela
   que permite fechar rápido sem fechar na cara de quem está
   indo da barra até o painel. */
@media(min-width:901px){
  .nav-painel::before{content:'';position:absolute;left:0;right:0;top:-11px;height:11px}
}

/* Entrada curta. Quem pediu menos movimento não recebe nenhum. */
@media(prefers-reduced-motion:no-preference){
  .nav-painel{animation:nav-desce .17s var(--nv-ease) both}
  @keyframes nav-desce{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

.nav-fechar{
  position:absolute;top:clamp(16px,2vw,22px);right:clamp(18px,2.4vw,26px);
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--nv-fd);font-size:.86rem;font-weight:500;
  color:var(--nv-tinta-45);background:none;border:0;cursor:pointer;
  padding:4px 2px;transition:color .2s;
}
.nav-fechar:hover{color:var(--nv-tinta)}
.nav-fechar svg{flex:none}

/* ── As colunas ────────────────────────────────────────────
   O painel é uma folha de fichário: furos na esquerda, a linha
   da margem em terracota e as colunas numeradas como campos.
   Cada item é uma linha do formulário, com o fio tracejado
   embaixo e a seta que aparece quando o mouse chega.        */
.nav-colunas{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.6vw,34px);
  list-style:none;counter-reset:nav-col;
}
.nav-col{counter-increment:nav-col}
.nav-col-tit{
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--nv-fm);font-size:.615rem;font-weight:600;
  letter-spacing:.145em;text-transform:uppercase;
  font-variation-settings:'wdth' 87;line-height:1.6;
  color:var(--nv-terra);margin-bottom:clamp(6px,1vw,10px);
  padding-bottom:9px;border-bottom:1.5px solid var(--nv-fio-forte);
}
.nav-col-tit::before{
  content:counter(nav-col,decimal-leading-zero);
  font-family:var(--nv-fd);font-weight:800;font-size:1.05rem;letter-spacing:-.04em;
  font-variation-settings:'wdth' 80;color:var(--nv-tinta);line-height:1;
}
.nav-col ul{list-style:none;display:flex;flex-direction:column}

.nav-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:11px 0;min-height:44px;
  font-family:var(--nv-fd);font-size:.985rem;font-weight:500;
  letter-spacing:-.014em;font-variation-settings:'wdth' 96;
  line-height:1.32;color:var(--nv-tinta);
  border-bottom:1px dashed var(--nv-fio-medio);
  transition:color .18s,padding-left .18s var(--nv-ease);
}
.nav-col li:last-child .nav-item{border-bottom:0}
.nav-item > span:first-child{flex:1 1 auto;min-width:0}
/* a seta: fica escondida à direita e entra com o mouse */
.nav-item::after{
  content:'';flex:none;width:12px;height:12px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s var(--nv-ease);
}
.nav-item:hover{color:var(--nv-terra);padding-left:5px}
.nav-item:hover::after{opacity:1;transform:none}
/* quem sai do site já tem o próprio sinal: a seta não repete */
.nav-item:has(.nav-saida)::after{display:none}

/* A marca de saída: esta leva você para fora do site. */
.nav-saida{
  flex:none;font-family:var(--nv-fm);font-size:.66rem;font-weight:600;
  color:var(--nv-tinta-45);transition:color .18s;
}
.nav-item:hover .nav-saida{color:var(--nv-terra)}

/* Lugar guardado para o que ainda não existe. Não é link. */
.nav-item--breve{
  color:var(--nv-tinta-25);cursor:default;
  border-bottom-color:transparent;
}
.nav-item--breve::after{display:none}
.nav-breve-etq{
  flex:none;font-family:var(--nv-fm);font-size:.55rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nv-tinta-25);
}

/* O grupo que a pessoa está apontando na barra ganha peso:
   o número vira terracota e a linha de baixo engrossa. */
.nav-col[data-ativo="sim"] .nav-col-tit{border-bottom-width:2.5px;border-bottom-color:var(--nv-terra)}
.nav-col[data-ativo="sim"] .nav-col-tit::before{color:var(--nv-terra)}

/* ── O pé do painel: a chamada num papel à parte ──────────────
   A frase de um lado e o botão do outro, sobre folha-2, como o
   pé de cada aba da Ficha 04 na home.                         */
.nav-pe{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  margin:clamp(20px,2.6vw,30px) calc(-1 * clamp(22px,2.8vw,34px)) calc(-1 * clamp(16px,2vw,22px)) calc(-1 * clamp(22px,2.8vw,34px));
  padding:clamp(14px,1.8vw,18px) clamp(22px,2.8vw,34px);
  border-top:1.5px solid var(--nv-fio-forte);
  background:var(--nv-folha-2);border-radius:0 0 2px 2px;
}
.nav-pe::before{
  content:'Não sabe por onde começar? Sete perguntas dizem o que resolver primeiro.';
  flex:1 1 260px;min-width:0;
  font-family:var(--nv-fd);font-weight:600;font-size:.98rem;letter-spacing:-.018em;line-height:1.3;
  color:var(--nv-tinta);font-variation-settings:'wdth' 94;
}
.nav-pe-cta{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--nv-fm);font-size:.62rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  background:var(--nv-verde);color:#F7F2E6;
  border:1px solid var(--nv-verde);border-radius:2px;
  padding:13px 18px;box-shadow:var(--nv-papel);
  transition:transform .18s var(--nv-ease);
}
.nav-pe-cta:hover{transform:translateY(-2px)}
.nav-pe-cta svg{flex:none}

/* ── A folha: os furos e a linha da margem, só no computador ── */
@media(min-width:901px){
  .nav-painel{padding-left:clamp(78px,7vw,104px)}
  /* os furos, desenhados com gradiente, sem um span a mais no HTML */
  .nav-painel::after{
    content:'';position:absolute;left:22px;top:0;bottom:0;width:14px;pointer-events:none;
    background:
      radial-gradient(circle at 7px 50%, var(--nv-mesa) 5.2px, var(--nv-fio-medio) 5.8px, transparent 6.8px);
    background-size:14px 46px;background-repeat:repeat-y;background-position:0 center;
  }
  /* a linha da margem, em terracota */
  .nav-corpo::before{
    content:'';position:absolute;left:clamp(56px,5vw,72px);top:0;bottom:0;width:1.5px;
    background:var(--nv-terra);opacity:.5;pointer-events:none;
  }
  .nav-painel{overflow:hidden}
}

/* ============================================================
   CELULAR — a barra encolhe, o painel vira janela de tela cheia
   ============================================================ */
@media(max-width:900px){
  .nav-grupos,
  .navbar .nav-cta{display:none}
  .nav-ham{display:flex}

  .nav-painel{
    position:fixed;inset:0;top:0;
    /* dvh acompanha a barra de endereço do Safari quando ela
       encolhe. Com vh, o rodapé da janela fica cortado. */
    height:100dvh;max-height:100dvh;
    border:0;border-radius:0;box-shadow:none;
    padding:0;overflow:hidden;
    display:flex;flex-direction:column;
    overscroll-behavior:contain;
  }
  @supports not (height:100dvh){
    .nav-painel{height:100vh;max-height:100vh}
  }
  @media(prefers-reduced-motion:no-preference){
    .nav-painel{animation:nav-sobe .2s var(--nv-ease) both}
    @keyframes nav-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  }

  .nav-sheet-topo{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px;flex:none;
    padding:14px 18px;border-bottom:1px solid var(--nv-fio-forte);
    background:var(--nv-folha);
  }
  .nav-sheet-topo .nav-logo svg{height:22px}
  .nav-fechar{position:static;font-size:.94rem}

  .nav-corpo{
    flex:1 1 auto;min-height:0;overflow-y:auto;
    display:flex;flex-direction:column;
    padding:18px 18px 22px;
    -webkit-overflow-scrolling:touch;
  }
  /* Centra os grupos na altura livre. Com "margin:auto" em vez
     de "justify-content:center" o topo não some quando o
     conteúdo é mais alto que a tela — que é o caso do iPhone SE. */
  .nav-colunas{margin:auto 0}

  /* Nenhum grupo escondido: sem sanfona, os quatro vêm abertos —
     e em duas colunas, para os quatro caberem na tela de uma vez.
     Com uma coluna só, o quarto grupo cairia abaixo da dobra e
     quem não rolasse nunca saberia que ele existe. */
  .nav-colunas{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,4.5vh,34px) 14px}
  .nav-col-tit{margin-bottom:clamp(8px,1.2vh,13px)}
  .nav-col ul{gap:2px}
  .nav-item{
    gap:8px;font-size:.955rem;padding:clamp(10px,1.4vh,15px) 0;min-height:46px;
    border-bottom:1px dashed var(--nv-fio);
  }
  .nav-item::after{display:none}
  .nav-item:hover{padding-left:0}
  .nav-col-tit{border-bottom:0;padding-bottom:0}
  .nav-breve-etq{font-size:.5rem;letter-spacing:.12em}
  .nav-item:hover{border-bottom-color:var(--nv-fio)}
  .nav-col:last-child .nav-item:last-child{border-bottom:0}

  /* A ação fica ancorada embaixo, no alcance do polegar, e as
     saídas ficam abaixo dela, do outro lado de uma linha grossa. */
  .nav-pe::before{display:none}
  .nav-pe{
    flex:none;margin:0;border-radius:0;
    padding:15px 18px calc(15px + env(safe-area-inset-bottom,0px));
    border-top:1.5px solid var(--nv-fio-forte);
    background:var(--nv-folha-2);
    flex-direction:column;align-items:stretch;gap:12px;
  }
  .nav-pe-cta{
    justify-content:center;
    font-family:var(--nv-fm);font-size:.7rem;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;
    background:var(--nv-verde);color:#F7F2E6;
    border:1px solid var(--nv-verde);border-radius:2px;
    padding:16px 18px;box-shadow:var(--nv-papel);
  }
  .nav-pe-cta:hover{border-bottom-color:var(--nv-verde)}
  }

@media(min-width:901px){
  .nav-sheet-topo{display:none}
}

/* Cada janela tem um "fechar": o do topo no celular, o do canto
   no computador. Só um aparece de cada vez. */
@media(max-width:900px){.nav-fechar--desk{display:none}}

/* Telas muito estreitas: volta para uma coluna, porque duas
   ficariam apertadas demais para ler e para acertar com o dedo. */
@media(max-width:359px){
  .nav-colunas{grid-template-columns:1fr;gap:14px}
  .nav-item{font-size:.95rem}
}

/* ============================================================
   RODAPÉ — o mesmo mapa, para quem nunca abre o menu
   ------------------------------------------------------------
   A marca fica numa coluna à esquerda e as quatro colunas de
   links ocupam o resto da linha. Antes a marca ficava sozinha
   numa faixa cheia e o mapa caía embaixo dela: sobrava um vazio
   grande à direita e o rodapé parecia dois blocos soltos.
   ============================================================ */
.rodape-topo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.75fr);
  gap:clamp(26px,5vw,66px);align-items:start;
}
@media(max-width:900px){
  .rodape-topo{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
}

.rodape-mapa{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);
  list-style:none;
}
@media(max-width:640px){.rodape-mapa{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}}

.rodape-mapa h5{
  font-family:var(--fm,monospace);font-size:.58rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--terra,#B5551F);
  padding-bottom:9px;border-bottom:1.5px solid var(--fio-forte,#13241B);
}
.rodape-mapa ul{list-style:none}
.rodape-mapa li{border-bottom:1px dashed var(--fio-medio,rgba(19,36,27,.32))}
.rodape-mapa li:last-child{border-bottom:0}
.rodape-mapa li > a,
.rodape-mapa li > span{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;font-size:.9rem;color:var(--tinta-70,#3D4A42);
  transition:color .2s,padding-left .2s var(--ease,ease);
}
.rodape-mapa li > a:hover{color:var(--tinta,#13241B);padding-left:5px}
.rodape-mapa li > span{color:var(--tinta-25,#9AA29C)}
.rodape-saida{
  flex:none;font-family:var(--fm,monospace);font-size:.62rem;font-weight:600;
  color:var(--tinta-25,#9AA29C);
}
.rodape-mapa li > a:hover .rodape-saida{color:var(--terra,#B5551F)}

/* ============================================================
   ÂNCORAS — folga para a barra fixa não cobrir o destino
   ============================================================ */
section[id],
[id^="tab-"]{scroll-margin-top:clamp(88px,11vh,116px)}