/* Header mobile estilo Starlink: overlay transparente sobre o hero + reaproveita a .m7-floatbar (já sticky) como navbar compacta pós-scroll. Escopado a max-width:760px; não afeta desktop. */
.nav-toggle,.mobile-menu,.mobile-menu-backdrop{display:none}
@media(max-width:760px){
  header{position:absolute;top:0;left:0;right:0;z-index:120;height:84px;background:transparent;border-bottom:0}
  .library-mobile-link,.contact-link{display:none}
  .hero-content{padding-top:112px}

  .nav-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;background:transparent;flex-shrink:0}
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .25s ease}
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before{position:absolute;top:-7px;left:0}
  .nav-toggle-bars::after{position:absolute;top:7px;left:0}
  .nav-toggle.is-open .nav-toggle-bars{background:transparent}
  .nav-toggle.is-open .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

  .m7-floatbar{z-index:120;gap:10px}
  .m7-floatbar .nav-toggle-bars,.m7-floatbar .nav-toggle-bars::before,.m7-floatbar .nav-toggle-bars::after{background:var(--black)}

  .mobile-menu-backdrop{display:block;position:fixed;inset:0;z-index:95;background:rgba(10,10,10,.55);opacity:0;pointer-events:none;transition:opacity .25s ease}
  .mobile-menu-backdrop.is-open{opacity:1;pointer-events:auto}

  .mobile-menu{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;z-index:100;background:#111214;color:#fff;padding:96px 24px 26px;transform:translateY(-100%);transition:transform .3s ease;box-shadow:0 20px 40px rgba(0,0,0,.35)}
  .mobile-menu.is-open{transform:translateY(0)}
  .mobile-menu-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
  .mobile-menu-nav a{padding:14px 4px;font-size:16px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
  .mobile-menu-nav a:hover,.mobile-menu-nav a:active{color:var(--red)}
  .mobile-menu-cta{width:100%;justify-content:center}
}
@media(max-width:380px){
  .mobile-menu{padding:88px 18px 22px}
  .mobile-menu-nav a{font-size:15px;padding:12px 4px}
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after,.mobile-menu,.mobile-menu-backdrop{transition:none}
}