/* =========================================================
   OPTIMIZED: Mobile Menu Styles - Sin !important
   Scope: solo landing (marketing)
   ========================================================= */

/* Scope exclusivo a marketing */
body[data-context="marketing"] .navbar {
  position: relative;
  z-index: 10; /* evitar que el hero lo tape en algunos viewports */
}

body[data-context="marketing"] .navbar .container {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  /* — Navbar: eje vertical centrado y altura cómoda en mobile — */
  body[data-context="marketing"] .navbar,
  body[data-context="marketing"] .site-header {
    min-height: 56px;
  }
  
  body[data-context="marketing"] .navbar .container {
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | centro | hamburguesa */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    position: relative;
  }

  /* Marca/logo a la izquierda (col 1) */
  body[data-context="marketing"] .navbar .brand,
  body[data-context="marketing"] .navbar .logo {
    grid-column: 1;
    justify-self: start;
    z-index: 1;
  }

  /* Contenedor del Acceso PERFECTAMENTE CENTRADO */
  body[data-context="marketing"] .navbar .login-button {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 36px !important;
    z-index: 100 !important;
    align-items: center !important;
  }
  
  body[data-context="marketing"] .navbar .login-button .login-btn,
  body[data-context="marketing"] .navbar .btn-access {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 101 !important;
  }

  /* Hamburguesa a la derecha (col 3) */
  body[data-context="marketing"] .navbar .menu-toggle,
  body[data-context="marketing"] .navbar .hamburger,
  body[data-context="marketing"] .navbar .mobile-menu-toggle {
    grid-column: 3;
    justify-self: end;
    align-items: center;
    z-index: 1;
  }

  /* Ocultar "Iniciar Proyecto" en móvil para dar espacio al botón Acceso */
  body[data-context="marketing"] .navbar .cta-button {
    display: none !important;
  }
}

/* ====== 31D: Accesibilidad avanzada ====== */

/* Screen reader only - texto oculto visualmente pero accesible para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible mejorado para enlaces del menú */
body[data-context="marketing"] .mobile-menu a:focus {
  outline: 2px solid var(--nx-accent, #19e6ff);
  outline-offset: 2px;
  background: rgba(25, 230, 255, 0.1);
}

/* Indicador visual de foco para el botón hamburguesa */
body[data-context="marketing"] .mobile-menu-toggle:focus {
  outline: 2px solid var(--nx-accent, #19e6ff);
  outline-offset: 2px;
}

/* ===== Menú mobile: cerrado por defecto, se despliega hacia abajo ===== */
body[data-context="marketing"] .mobile-menu {
  position: fixed;
  top: 60px; /* altura aproximada del header */
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 11, 14, 0.95); /* mismo color base que header pero más opaco */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 24px 20px;
  /* oculto por defecto para TODAS las resoluciones */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition:
    transform 200ms ease,
    opacity 200ms ease,
    visibility 200ms ease;
}

/* Overlay para pista visual */
body[data-context="marketing"] .mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* más sutil como referencia */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

/* Estado abierto */
body[data-context="marketing"] .mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body[data-context="marketing"] .mobile-menu-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Evitar scroll del body con el menú abierto */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Reglas responsive: el panel solo aplica en mobile */
@media (min-width: 769px) {
  body[data-context="marketing"] .mobile-menu,
  body[data-context="marketing"] .mobile-menu-overlay {
    display: none; /* nunca en desktop */
  }
}

/* ====== 31A.4a: política de visibilidad en móvil ====== */

/* 1) En mobile, escondemos los links del header (para evitar la lista pegada a la izquierda) */
@media (max-width: 768px) {
  body[data-context="marketing"] .navbar .nav-links {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}

/* 2) En mobile, mostramos los links SOLO dentro del panel */
@media (max-width: 768px) {
  body[data-context="marketing"] .mobile-menu .nav-links,
  body[data-context="marketing"] .mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  body[data-context="marketing"] .mobile-menu .nav-links a,
  body[data-context="marketing"] .mobile-menu ul a {
    display: block;
    text-align: center;
    padding: 16px 20px;
    color: var(--nx-ink, #e8eff7);
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: all 200ms ease;
    position: relative;
  }
  body[data-context="marketing"] .mobile-menu .nav-links a:hover,
  body[data-context="marketing"] .mobile-menu ul a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
  }
  /* Separadores sutiles entre enlaces */
  body[data-context="marketing"] .mobile-menu .nav-links li:not(:last-child),
  body[data-context="marketing"] .mobile-menu ul li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
    margin-bottom: 0;
  }
}

/* 3) Defensa extra: en desktop el panel y overlay no existen visualmente */
@media (min-width: 769px) {
  body[data-context="marketing"] .mobile-menu,
  body[data-context="marketing"] .mobile-menu-overlay {
    display: none;
  }
}

/* 4) Asegurar z-index correcto del botón y del panel */
body[data-context="marketing"] .mobile-menu-toggle { z-index: 1001; }
body[data-context="marketing"] .mobile-menu        { z-index: 1000; }
body[data-context="marketing"] .mobile-menu-overlay{ z-index:  999;  }