/* ============================================================
   HEADER — cabeçalho fixo, logo, menu no desktop, ícones de
   contato e o menu de tela cheia que abre no celular.
   ============================================================ */

header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pearl-deep);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
.logo{display:flex; align-items:center; gap:0;}
.logo-img{width:140px; height:auto; object-fit:contain; display:block;}
@media (max-width: 900px) {
  .logo-img{width:120px;}
}
@media (max-width: 600px) {
  .logo-img{width:100px;}
}

nav.main-nav{display:flex; align-items:center; gap:30px;}
nav.main-nav a{font-weight:600; font-size:14.5px; color:var(--graphite); position:relative; padding:4px 0;}
nav.main-nav a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--blue); transition:width .2s ease;}
nav.main-nav a:hover::after{width:100%;}

.header-actions{display:flex; align-items:center; gap:14px;}
.icon-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--blue-ice); color:var(--blue-deep); transition:background .18s ease;
}
.icon-btn:hover{background:var(--pearl-deep);}
.icon-btn svg{width:19px; height:19px;}

.menu-toggle{display:none; width:40px; height:40px; align-items:center; justify-content:center;}
.menu-toggle svg{width:24px; height:24px; color:var(--blue-deep);}

/* Menu mobile (tela cheia), controlado por js/menu.js */
.mobile-menu{
  position:fixed; inset:0; background:var(--white); z-index:300; padding:24px;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-top{display:flex; justify-content:space-between; align-items:center;}
.mobile-menu nav{display:flex; flex-direction:column; gap:6px; margin-top:40px;}
.mobile-menu nav a{font-family:'Fredoka',sans-serif; font-size:24px; font-weight:600; padding:14px 4px; color:var(--blue-deep); border-bottom:1px solid var(--pearl);}
.mobile-menu .btn{margin-top:30px;}