/* Menu: barra de vidro canelado encaixada no topo; ao rolar, solta e recolhe numa pílula (logo + três tracinhos) */
header {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 18px;
  padding: 12px var(--gutter); border-radius: 0; overflow: hidden;
  border: solid rgba(255,255,255,.12); border-width: 0 0 1px;
  background: rgba(18,18,20,.34);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  transition: top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1), right .45s cubic-bezier(.2,.8,.2,1),
              border-radius .45s ease, padding .45s ease;
}
header::after { /* caneluras: borda clara, miolo, sombra — como cilindros de vidro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.07) 0, rgba(255,255,255,.02) 4px, rgba(255,255,255,0) 9px,
    rgba(0,0,0,.2) 15px, rgba(255,255,255,.07) 16px);
}
header > * { position: relative; z-index: 1; }
header .logo img { height: 34px; display: block; }

nav { display: flex; gap: clamp(20px, 3vw, 48px); margin-left: auto; white-space: nowrap; transition: opacity .3s ease; }
nav a { color: var(--branco); text-decoration: none; font-size: 15px; opacity: .85; transition: color .2s, opacity .2s; }
nav a:hover, nav a:focus-visible { color: var(--verde); opacity: 1; }

/* três tracinhos (vira X quando aberto) */
.menu-botao {
  display: none; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.menu-botao span { width: 20px; height: 1.6px; background: var(--branco); border-radius: 1px; transition: transform .3s ease, opacity .2s ease, background .2s; }
.menu-botao:hover span { background: var(--verde); }
.menu-botao:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 6px; }
header.aberto .menu-botao span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
header.aberto .menu-botao span:nth-child(2) { opacity: 0; }
header.aberto .menu-botao span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* recolhido: pílula solta no canto, só logo + tracinhos */
header.recolhido {
  top: 14px; left: var(--gutter); right: calc(100% - var(--gutter) - 116px); gap: 20px;
  padding: 9px 14px; border-radius: 14px; border-width: 1px;
}
header.recolhido .menu-botao { display: flex; }
header.recolhido nav { opacity: 0; pointer-events: none; }
/* aberto: a pílula se estica de novo e mostra o menu */
header.recolhido.aberto { right: var(--gutter); }
header.recolhido.aberto nav { opacity: 1; pointer-events: auto; transition-delay: .2s; }

@media (max-width: 720px) {
  header .menu-botao { display: flex; margin-left: auto; }
  nav { display: none; }
  header.aberto { flex-wrap: wrap; }
  header.aberto nav { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 14px 0 6px; opacity: 1; pointer-events: auto; }
  header.recolhido { right: calc(100% - var(--gutter) - 128px); }
  header.recolhido .menu-botao { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { header, nav, .menu-botao span { transition: none; } }