:root{
  --nav-bg: rgba(6,9,18,0.88);
  --nav-border: rgba(120,160,255,0.14);
  --txt-main: #eaf0ff;
  --txt-muted: #a8b6d6;
  --accent: #38bdf8;
  --accent-2: #2563eb;
  --accent-ok: #2dd4bf;
}

/* TOPBAR */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1200;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nav-border);
}

.topbar .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--txt-main);
}

.brand .logo{
  width:44px;height:44px;
  object-fit:contain;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-text span{
  font-size: .72rem;
  color: var(--txt-muted);
}

/* MENU DESKTOP */
.menu{
  display:flex;
  gap:20px;
  align-items:center;
}

.menu a{
  text-decoration:none;
  color: var(--txt-main);
  font-size: .92rem;
  padding: 6px 4px;
  position:relative;
  transition: color .2s ease;
}

.menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-ok));
  transition: width .2s ease;
}

.menu a:hover{
  color: var(--accent);
}
.menu a:hover::after{
  width:100%;
}

/* ACTIONS */
.actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* BTN */
.btn{
  font-family: inherit;
  font-size: .86rem;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--txt-main);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.35);
}

.btn.hamb{
  display:none;
  font-size: 1.05rem;
  padding: 8px 12px;
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.30);
}

/* CTA */
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #061221;
  font-weight: 800;
}

.btn-primary:hover{
  filter: brightness(1.06);
}

/* MOBILE MENU */
#mobileMenu{
  display:none;
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,15,30,0.96);
}

#mobileMenu a{
  display:block;
  padding: 10px 8px;
  border-radius: 10px;
  text-decoration:none;
  color: var(--txt-main);
}

#mobileMenu a:hover{
  background: rgba(56,189,248,.10);
  color: var(--accent);
}

#mobileMenu .divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 8px 0;
}

#mobileMenu.active{display:block}

/* Responsive */
@media (max-width: 992px){
  .menu{display:none}
  .btn.hamb{display:inline-flex;align-items:center;justify-content:center}
  .btn-primary{display:none}
}


.menu a.active{
  color: var(--accent);
}
.menu a.active::after{
  width: 100%;
}
#mobileMenu a.active{
  background: rgba(56,189,248,.10);
  color: var(--accent);
}

/* =========================================================
   FIX CONTRASTE NAVBAR (texto más blanco)
   Pegalo AL FINAL del archivo _navbar.css
   ========================================================= */

/* Más blanco por defecto */
:root{
  --txt-main: rgba(255,255,255,.92);
  --txt-muted: rgba(255,255,255,.72);
}

/* Brand */
.brand,
.brand:visited{
  color: var(--txt-main);
}

.brand-text span{
  color: var(--txt-muted);
}

/* Links desktop: arrancan en blanco suave (no gris) */
.menu a,
.menu a:visited{
  color: rgba(255,255,255,.86);
}

/* Hover y activo con más contraste */
.menu a:hover{
  color: rgba(255,255,255,.98);
}

.menu a.active{
  color: rgba(255,255,255,.98);
}

/* Mobile menu: links bien blancos */
#mobileMenu a,
#mobileMenu a:visited{
  color: rgba(255,255,255,.90);
}

#mobileMenu a:hover{
  color: rgba(255,255,255,.98);
}

#mobileMenu a.active{
  color: rgba(255,255,255,.98);
}

/* Evitar grises/negros de Bootstrap dentro del navbar */
.topbar .text-muted,
.topbar .text-body-secondary,
.topbar .text-secondary,
.topbar small{
  color: var(--txt-muted) !important;
}

.topbar .text-dark,
.topbar .text-body{
  color: var(--txt-main) !important;
}