.header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: .9rem 0; transition: padding .3s; }
.header.is-scrolled { border-bottom: 1px solid var(--spa-border); padding: .55rem 0; }
/* fundo com blur num pseudo-elemento: backdrop-filter no próprio header viraria
   containing block do menu mobile (position: fixed) e o prenderia na altura do header */
.header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .3s; }
.header.is-scrolled::before { opacity: 1; }
.header-in { display: flex; align-items: center; gap: 2rem; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav a { font-weight: 500; font-size: .98rem; color: var(--spa-ink); padding: .6rem 0; position: relative; }   /* .6rem: alvo de 44px de altura */
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--spa-cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--spa-ease); }
.nav a:hover::after { transform: scaleX(1); }
.header-cta { padding: .65rem 1.2rem; min-height: 44px; font-size: .95rem; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 10px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-left: auto; }
.menu-btn span { width: 22px; height: 2px; background: var(--spa-ink); transition: transform .3s, opacity .3s; }

@media (max-width: 991px) {
  .nav { position: fixed; inset: 0; background: var(--spa-offwhite); flex-direction: column; justify-content: center; align-items: center; gap: 2rem; margin: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .4s var(--spa-ease), opacity .3s; z-index: 40; }
  .nav a { font-size: 1.6rem; font-family: var(--ff-display); font-weight: 600; }
  .header.is-open .nav { transform: none; opacity: 1; pointer-events: auto; }
  .header-cta { display: none; }
  .menu-btn { display: flex; position: relative; z-index: 45; }
  .header.is-open .menu-btn span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .header.is-open .menu-btn span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
}