.navbar{
  position:fixed;top:0;left:0;right:0;height:var(--nav-height);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;z-index:1000;
  transition:left var(--transition);
}
.sidebar-open .navbar{left:var(--sidebar-width)}
.navbar.scrolled{
  background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);
}

.nav-left{display:flex;align-items:center;gap:16px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{
  padding:8px 12px;border-radius:var(--radius-md);
  font-size:0.82rem;font-weight:500;color:var(--text-secondary);
  transition:var(--transition);white-space:nowrap;text-decoration:none;
}
.nav-link:hover{background:rgba(108,92,231,0.08);color:var(--text-primary)}
.nav-logo{
  width:52px;height:52px;border-radius:var(--radius-full);
  border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:800;letter-spacing:-1px;
  background:var(--bg-primary);
  color:var(--text-primary);
  animation:glow 3s ease-in-out infinite;
  cursor:pointer;transition:var(--transition);
  position:relative;overflow:hidden;
}
.nav-logo::before{
  content:'';position:absolute;inset:-2px;
  border-radius:var(--radius-full);
  background:conic-gradient(from var(--angle,0deg),var(--accent),var(--pink),var(--purple),var(--accent));
  z-index:-1;animation:spin 4s linear infinite;
}
.nav-logo:hover{transform:scale(1.05)}
@keyframes spin{to{transform:rotate(360deg)}}

.nav-center{display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--radius-full);background:var(--bg-glass);backdrop-filter:blur(20px);border:1px solid var(--border)}
.nav-badge{font-size:0.7rem;padding:3px 10px}

.nav-right{display:flex;align-items:center;gap:12px}

.btn-wa-nav{
  position:relative;width:48px;height:48px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--whatsapp);cursor:pointer;
  background:rgba(37,211,102,0.1);transition:var(--transition);
  overflow:visible;
}
.btn-wa-nav svg{width:22px;height:22px;fill:var(--whatsapp);position:relative;z-index:1}
.btn-wa-nav::before{
  content:'';position:absolute;inset:-4px;border-radius:var(--radius-full);
  border:2px solid transparent;
  background:conic-gradient(from var(--angle,0deg),var(--whatsapp),var(--green),var(--blue),var(--whatsapp)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 3s linear infinite;
}
.btn-wa-nav::after{
  content:'';position:absolute;width:100%;height:100%;border-radius:50%;
  border:2px solid var(--whatsapp);animation:wave 2s ease-out infinite;
  opacity:0;
}
.btn-wa-nav:hover{transform:scale(1.1);background:rgba(37,211,102,0.2)}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.hamburger{
  width:48px;height:48px;border-radius:var(--radius-md);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;cursor:pointer;background:var(--bg-glass);border:1px solid var(--border);
  transition:var(--transition);
}
.hamburger span{
  display:block;width:20px;height:2.5px;background:var(--text-primary);
  border-radius:2px;transition:var(--transition);
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-menu{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,0.85);backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  opacity:0;visibility:hidden;transition:opacity 0.4s ease,visibility 0.4s ease;
  display:flex;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{
  font-size:clamp(1.8rem,5vw,3.5rem);font-weight:700;
  color:var(--text-secondary);transition:var(--transition);
  letter-spacing:-0.03em;
}
.mobile-menu a:hover{color:var(--text-primary);transform:translateX(8px)}

.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:998;
  display:none;background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--border);
  padding:8px 0;padding-bottom:max(8px,env(safe-area-inset-bottom));
  transition:left var(--transition);
}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:center}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 12px;border-radius:var(--radius-md);
  color:var(--text-tertiary);font-size:0.65rem;font-weight:500;
  transition:var(--transition);cursor:pointer;
}
.bottom-nav-item svg{width:22px;height:22px;fill:var(--text-tertiary);transition:var(--transition)}
.bottom-nav-item.active{color:var(--accent)}
.bottom-nav-item.active svg{fill:var(--accent)}

@media(max-width:1024px){
  .nav-links{display:none}
}
@media(max-width:768px){
  .nav-center{display:none}
  .hamburger{display:flex}
  .bottom-nav{display:block}
  .navbar{padding:0 16px}
}