/* ===== HEADER / NAV ===== */
.hdr{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding-top: var(--safe-top);
}

/* barra principal */
.nav{
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* marca */
.brand{ font-weight: 800; letter-spacing: .2px; white-space: nowrap; }

/* links desktop */
.nav-links{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.nav-links a,
.menu-trigger{
display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    line-height: 1;
    color: #0B1220;
    border-radius: 10px;
    font-size: 16px;
    font-family: system-ui;
    font-weight: 500;
}
.nav-links a:hover,
.menu-trigger:hover{ background: #F8FAFC; }

/* CTA topo */
.cta-top{
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 800;
  background: var(--brand);
  color: #fff!important;
  border: 2px solid var(--brand);
  box-shadow: 0 6px 16px rgba(30,75,216,.18);
}
.cta-top:hover{ background: var(--brand-600); border-color: var(--brand-600); 
  color: #666!important;}

/* toggle mobile */
.nav-toggle{
  display: none;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  align-items: center;
  justify-content: center;
}
.nav-toggle span{
  display: block;
  width: 20px; height: 2px;
  background: #0B1220; position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0;
  width: 20px; height: 2px; background:#0B1220;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top: 6px; }

/* painel mobile */
.nav-panel{
  display: none;
  position: fixed; left: 12px; right: 12px; top: calc(56px + var(--safe-top));
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; z-index:200;
  box-shadow: 0 16px 40px rgba(2,6,23,.18); max-height:72vh; overflow:auto;
}
.nav-panel.open{ display:block; }
.nav-panel a, .nav-panel button{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:10px; font-weight:600; color:#0B1220;
}
.nav-panel a:hover, .nav-panel button:hover{ background:#F8FAFC; }
.nav-panel .cta-top{ width:100%; justify-content:center; margin-top:6px; }

/* mega menu desktop */
.menu-item{ position:relative; }
.menu-trigger{ background:transparent; border:0; cursor:pointer; }

.menu-item--services .mega{
  display:none;
  position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + 10px);
  width: clamp(720px, 94vw, 1100px);
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 48px rgba(2,6,23,.14); z-index:160;
}
.menu-item--services.open .mega{ display:block; }

.mega-inner{
  display:grid;  padding:18px;
}
@media (max-width:1200px){ .mega-inner{ grid-template-columns: 1fr; } }

.mega-grid{
  display:grid; grid-template-columns:repeat(2, minmax(220px,1fr)); gap:12px 14px;
}
@media (max-width:768px){ .mega-grid{ grid-template-columns: 1fr; } }

.mega-item{
  display:flex; gap:12px; align-items:flex-start; padding:12px;
  border-radius:12px; border:1px solid transparent; min-height:72px;
}
.mega-item:hover{ background:#F8FAFC; border-color:#E5E7EB; }

.ico.sq{ width:40px; height:40px; border-radius:10px; background:var(--brand); display:grid; place-items:center; flex:0 0 auto; }
.mega-item .txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mega-item .txt strong{ font-size:15px; line-height:1.25; }
.mega-item .txt small{ display:block; color:#64748B; line-height:1.35; font-size:12.5px; }

.mega-aside{ display:grid; gap:12px; align-content:start; }
.promo{ display:block; border-radius:14px; background:var(--brand); color:#fff; padding:14px 16px; box-shadow:0 8px 20px rgba(30,75,216,.2); }
.promo-badge{ display:inline-block; background:#fff; color:#1E40AF; font-weight:800; font-size:11px; padding:4px 8px; border-radius:999px; margin-bottom:8px; }

/* serviços no painel mobile */
.mobile-services{
  display:none; flex-direction:column; gap:6px; background:#F8FAFC; border:1px solid var(--line); border-radius:12px; padding:8px; margin-top:6px;
}
.mobile-services a{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:10px; }
.mobile-services a:hover{ background:#fff; }
.mobile-services .ico.sq{ width:34px; height:34px; border-radius:8px; }

/* responsividade */
@media (max-width:960px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .menu-item--services .mega{ display:none !important; }
}

/* acessibilidade */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-contrast: more){ :focus-visible{ outline-width:3px; } }

/* hotfix de respiro lateral quando o header usa .wrap */
.hdr .wrap{
  padding-left: max(var(--mx), 16px, env(safe-area-inset-left));
  padding-right: max(var(--mx), 16px, env(safe-area-inset-right));
}