.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:64px;height:64px;border-radius:var(--radius-full);
  border:3px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:900;letter-spacing:-1px;line-height:1;
  background:var(--bg-primary);
  color:var(--text-primary);
  animation:glow 3s ease-in-out infinite;
  cursor:pointer;transition:var(--transition);
  position:relative;overflow:hidden;
  box-shadow:0 0 30px var(--accent-glow);
  padding-bottom:2px;
}
.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-brand{font-size:1.1rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.5px}

.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-brand-mobile{display:none;font-weight:700;font-size:1rem;color:var(--text-primary)}


.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}








.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:flex-start;align-items:center;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 8px}
.bottom-nav-inner::-webkit-scrollbar{display:none}
.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{flex-shrink:0}
.bottom-nav-item.active svg{fill:var(--accent)}

@media(max-width:1024px){
  .nav-links{display:none}
  .bottom-nav{display:block}
}
@media(max-width:768px){
  .nav-center{display:flex;justify-content:center;gap:4px}
  .nav-center .nav-badge{display:none}
  .nav-center .nav-brand-mobile{display:block}
  .bottom-nav{display:block}
  .navbar{padding:0 16px}
}