/* =========================================================================
   Paulista Cred — nav.css  (barra clara, arredondada; sem tema escuro)
   ========================================================================= */

#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px clamp(16px, 4vw, 40px);
  transition: padding .25s var(--ease);
}
.nav-inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 10px 12px 10px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), background .25s;
}
#navbar.is-scrolled .nav-inner { box-shadow: var(--shadow); background: rgba(255,255,255,.96); }

.nav-brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 42px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-family: var(--font-display); font-weight: 600; font-size: .93rem; color: var(--ink-soft);
  padding: 9px 14px; border-radius: var(--pill); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--cream); }
.nav-links a.is-active { color: var(--blue); }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-sim {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--blue);
  padding: 9px 14px; border-radius: var(--pill); border: 1.5px solid var(--blue-50);
  transition: background .2s, border-color .2s;
}
.nav-sim:hover { background: var(--blue-50); border-color: var(--blue); }
.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  background: var(--red); color: #fff; padding: 11px 18px; border-radius: var(--pill);
  box-shadow: 0 12px 22px -12px rgba(197,107,74,.7); transition: transform .18s var(--ease), box-shadow .2s;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(197,107,74,.85); }
.btn-wa svg { width: 18px; height: 18px; }

/* hambúrguer */
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 14px; cursor: pointer; position: relative; flex: none;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2.2px;
  background: var(--ink); border-radius: 2px; transform: translate(-50%,-50%); transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle span::before { transform: translate(-50%,-8px); }
.nav-toggle span::after { transform: translate(-50%,6px); }
.menu-open .nav-toggle span { background: transparent; }
.menu-open .nav-toggle span::before { transform: translate(-50%,-50%) rotate(45deg); }
.menu-open .nav-toggle span::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* overlay mobile */
.nav-overlay {
  position: fixed; inset: 0; z-index: 990;
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 88px clamp(24px, 8vw, 60px) 40px;
  transform: translateY(-100%); transition: transform .4s var(--ease); visibility: hidden;
}
.menu-open .nav-overlay { transform: translateY(0); visibility: visible; }
.nav-overlay a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink);
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.nav-overlay .ov-sim { color: var(--blue); border-bottom: 0; }
.nav-overlay .btn-wa {
  justify-content: center; font-size: 1.05rem; padding: 16px; margin-top: 18px; border-bottom: 0; color: #fff;
}

@media (max-width: 900px) {
  .nav-links, .nav-sim { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 460px) {
  .btn-wa span { display: none; }
  .btn-wa { padding: 12px; }
}