/* nav-moderno.css — menú de navegación moderno (Bootstrap 5, sin FontAwesome).
   Autónomo: usa id/clase propios (#nav-em / .nav-em) para no heredar el CSS viejo. */

.nav-em{
  position:absolute; top:0; left:0; width:100%; z-index:20000;
  padding:1.1rem 0;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:transparent;
  transition:background-color .35s ease, box-shadow .35s ease, padding .3s ease;
}
/* Al hacer scroll se fija y se vuelve sólido */
.nav-em.scrolled{
  position:fixed;
  background:#3b3d68;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  padding:.5rem 0;
}

/* Modo "menú sólido" para páginas SIN hero oscuro (gracias, privacidad, cookies, 404):
   el menú deja de ser transparente y ocupa su sitio, para que los enlaces se lean. */
body.nav-solida .nav-em{
  position:sticky !important; top:0;
  background:#3b3d68 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  padding:.7rem 0;
}

.nav-em .navbar-brand img{ width:180px; height:auto; transition:width .3s ease; }
.nav-em.scrolled .navbar-brand img{ width:150px; }

/* Enlaces */
.nav-em .navbar-nav .nav-link{
  position:relative;
  color:#fff; font-weight:400; font-size:1.02rem;
  padding:.5rem 1rem; margin:0 .1rem;
}
.nav-em .navbar-nav .nav-link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.3rem;
  height:2px; background:#e23b2e; border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-em .navbar-nav .nav-link:hover::after,
.nav-em .navbar-nav .nav-link.active::after,
.nav-em .navbar-nav .show > .nav-link::after{ transform:scaleX(1); }
.nav-em .navbar-nav .nav-link:hover,
.nav-em .navbar-nav .nav-link.active{ color:#fff; }

/* Caret de los desplegables (re-activado; el CSS viejo lo ocultaba) */
.nav-em .dropdown-toggle::after{ display:inline-block !important; margin-left:.4em; vertical-align:.15em; }

/* Menú desplegable moderno (override de reglas !important antiguas) */
.nav-em .dropdown-menu{
  background:#3b3d68 !important; color:#e7eef7 !important;
  border:1px solid rgba(255,255,255,.10) !important; border-radius:14px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.35) !important; padding:.4rem !important; margin-top:.6rem !important;
  opacity:1 !important;
}
.nav-em .dropdown-item{
  color:#dbe4f0 !important; font-size:1rem; font-weight:400;
  border-radius:9px; padding:.55rem .9rem; transition:background-color .2s ease, color .2s ease;
}
.nav-em .dropdown-item:hover, .nav-em .dropdown-item:focus{
  background:rgba(255,255,255,.10) !important; color:#fff !important;
}

/* Botón CTA "Contacto" */
.nav-em .nav-cta{
  display:inline-block; background:#e23b2e; color:#fff !important;
  border-radius:100px; padding:.55rem 1.5rem; font-weight:600; font-size:1rem;
  border:0; text-decoration:none !important; transition:background-color .2s ease, transform .2s ease;
}
.nav-em .nav-cta::after{ display:none; }
.nav-em .nav-cta:hover{ background:#c62f24; color:#fff !important; text-decoration:none !important; transform:translateY(-1px); }

/* Hamburguesa */
.nav-em .navbar-toggler{ border:0; padding:.25rem; box-shadow:none; }
.nav-em .navbar-toggler:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.nav-em .navbar-toggler .ico-hamburguesa{ width:34px; height:34px; color:#fff; display:block; }

/* Panel deslizante (offcanvas) en móvil */
.nav-em-panel{ background:#3b3d68; color:#fff; }
@media (max-width:991.98px){
  .nav-em-panel{ width:min(84vw,340px); }
  .nav-em-panel .navbar-nav .nav-link{ font-size:1.15rem; padding:.7rem .2rem; }
  .nav-em-panel .navbar-nav .nav-link::after{ display:none; }
  .nav-em-panel .nav-cta{ margin-top:1rem; }
  .nav-em-panel .dropdown-menu{ box-shadow:none !important; border:0 !important; margin-top:0 !important; padding-left:1rem !important; }
}

@media (prefers-reduced-motion:reduce){
  .nav-em, .nav-em .navbar-brand img, .nav-em .navbar-nav .nav-link::after, .nav-em .nav-cta{ transition:none; }
}