/* ════════════════════════════════════════════════════════════════
   menu.css  —  Via Traço
   MENU MOBILE: botão hambúrguer, drawer do menu mobile, page-hero-band das páginas internas
   (Fatiado do antigo style.css, carregado na MESMA ORDEM em todas as
   páginas: style → viewer → menu → components → typography → overrides
   → [css da página] → responsive. Concatenação idêntica ao original.)
   ════════════════════════════════════════════════════════════════ */

/* ══ HAMBURGER BUTTON — mobile only ══ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 600;
  position: relative;
}

.ham-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
    opacity   0.22s ease,
    width     0.28s ease;
}

/* ── Active state: lines rotate into × ── */
.nav-hamburger.is-open .ham-top {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open .ham-mid {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.is-open .ham-bot {
  transform: translateY(-7px) rotate(-45deg);
}

/* ══ MOBILE MENU DRAWER ══ */
.mobile-menu {
  display: none;
  position: fixed;
  top: 48px;
  right: 12px;         /* alinhado à direita */
  left: auto;          /* não ocupa largura total */
  width: 180px;        /* container pequeno */
  z-index: 1001;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);

  /* Animation state — closed */
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition:
    opacity   0.28s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.28s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0 6px;
}

.mobile-menu-link {
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  transition: color .16s, background .16s;
  display: block;
}
.mobile-menu-link:last-child { border-bottom: none; }
.mobile-menu-link:active,
.mobile-menu-link:hover { color: var(--green); background: rgba(0,0,0,.03); }

/* VIA TRAÇO logo text — always uppercase */
.nlogo-txt { text-transform: uppercase; letter-spacing: .12em; }

/* ── PAGE HERO BAND — top of section pages ── */
.page-hero-band {
  padding: 120px 44px 60px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.page-hero-band .sec-h {
  font-size: clamp(36px, 5vw, 68px);
  margin-top: 12px;
}


/* Manifesto do rebranding na faixa do topo do Sobre — acima da linha divisória */
.page-hero-band .hero-manifesto { max-width: 760px; margin-top: 34px; }
.page-hero-band .hero-manifesto p { margin: 0 0 14px; }
.page-hero-band .hero-manifesto .ac-lead { margin-top: 26px; margin-bottom: 10px; }
.page-hero-band .hero-manifesto p:first-child { margin-top: 0; }
@media (max-width: 700px) {
  .page-hero-band .hero-manifesto { margin-top: 26px; }
}