/* ===== Mobile Nav v2 (aislado) ===== */
@media (max-width: 1199.98px){
  /* Asegura visibilidad del ícono */
  .mobile-nav-toggle{
    position: relative;
    z-index: 10001;
    color: #ffffff !important;            /* siempre visible */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(0,0,0,0.28);         /* círculo sutil */
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  }
  .mobile-nav-toggle:hover{ background: rgba(0,0,0,0.36); }

  /* El header no debe taparlo */
  #header .container-xl{ position: relative; z-index: 10000; }

  /* Cuando está abierto, fija el icono arriba a la derecha */
  .mobile-nav-active .mobile-nav-toggle{
    position: fixed;
    top: 14px;
    right: 14px;
  }
}