/* ---------- Menu ----------
   Desktop: links na linha do cabeçalho. Até 1024 px: botão de três linhas que vira X e abre
   o menu logo abaixo do cabeçalho, com os links entrando em sequência. */

.menu-btn, .nav__cta, .nav__fone { display: none; }

@media (max-width: 1024px) {
  .menu-btn {
    display: grid; place-content: center; gap: 6px; flex: none; width: 48px; height: 48px; margin-left: 4px;
    background: transparent; border: 1px solid var(--line-d); cursor: pointer; transition: border-color .25s;
  }
  .menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: var(--gold); }
  .menu-btn span { display: block; width: 22px; height: 2px; background: var(--gold); transition: transform .35s var(--ease), opacity .2s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 49;
    display: flex; flex-direction: column; gap: 0; margin: 0;
    max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 28px; background: var(--ink); border-bottom: 1px solid var(--gold);
    box-shadow: 0 30px 60px var(--shadow);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .45s var(--ease), visibility 0s linear .45s;
  }
  .header.menu-aberto .nav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .45s var(--ease), visibility 0s; }

  .nav a:not(.btn) {
    display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 4px;
    font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; text-transform: none;
    color: var(--white); border-bottom: 1px solid var(--line-w);
  }
  .nav a:not(.btn)::after { content: '→'; font-family: var(--f-mono); color: var(--gold); transition: transform .25s var(--ease); }
  .nav a:not(.btn):hover::after { transform: translateX(4px); }
  .nav a.nav__cta { display: flex; margin: 20px 0 0; padding: 18px 20px 16px; font-size: .82rem; letter-spacing: .14em; color: var(--ink); }
  .nav a.nav__cta:hover { color: var(--gold); }
  .nav a.nav__fone { justify-content: center; min-height: 48px; border-bottom: 0; font-family: var(--f-mono); font-weight: 500; font-size: .85rem; color: var(--gold); }
  .nav a.nav__fone::after { content: none; }

  /* links entram um a um quando o menu abre */
  .nav > * { opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s var(--ease); }
  .header.menu-aberto .nav > * { opacity: 1; transform: none; }
  .header.menu-aberto .nav > :nth-child(1) { transition-delay: .08s; }
  .header.menu-aberto .nav > :nth-child(2) { transition-delay: .12s; }
  .header.menu-aberto .nav > :nth-child(3) { transition-delay: .16s; }
  .header.menu-aberto .nav > :nth-child(4) { transition-delay: .2s; }
  .header.menu-aberto .nav > :nth-child(5) { transition-delay: .24s; }
  .header.menu-aberto .nav > :nth-child(6) { transition-delay: .3s; }
  .header.menu-aberto .nav > :nth-child(7) { transition-delay: .34s; }

  .sem-rolagem, .sem-rolagem body { overflow: hidden; }
}

@media (max-width: 700px) {
  .menu-btn { margin-left: auto; }
  .nav { max-height: calc(100vh - 64px); }
}