/* === Corrección menú móvil: capas, scroll y visualización === */

/*
 * En móvil NUNCA usar backdrop-filter en la nav: crea un contenedor de posicionamiento
 * y el menú (position:fixed) queda recortado a la altura de la barra. Sin filtro,
 * el menú se ancla al viewport y se ve bien desde el primer frame.
 */
@media (max-width: 1023px) {
  .nav.nav--scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav {
    overflow: visible !important;
    contain: none !important;
  }

  /* Logo y botón cerrar por encima del panel del menú (que en móvil es ancho completo) */
  body.nav-menu-open .nav__logo,
  body.nav-menu-open .nav__toggle {
    position: relative;
    z-index: 1040;
  }

  /* Logo siempre blanco con el menú abierto para que se vea sobre el overlay oscuro */
  body.nav-menu-open .nav__logo-img {
    filter: brightness(0) invert(1) !important;
  }

  /* X de cerrar siempre blanca cuando el menú está abierto (fondo oscuro) */
  body.nav-menu-open .nav__toggle-line {
    background-color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  /* Overlay: al abrir aparece al instante (no fade-in) para no ver la página detrás;
     al cerrar sí hace fade-out elegante */
  .nav-overlay {
    z-index: 1015;
    background-color: rgba(0, 0, 0, 0.75) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease-out, pointer-events 0s linear 0.35s;
  }
  .nav-overlay.active {
    opacity: 1;
    pointer-events: all;
    transition-duration: 0s;
  }
  .nav-overlay:not(.active) {
    transition-duration: 0.35s;
  }

  .nav {
    z-index: 1025;
  }

  /* Menú: al abrir aparece al instante (sin slide-in) para no ver capas desencajadas;
     al cerrar sí hace slide-out elegante */
  .nav__menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 400px !important;
    z-index: 1030;
    background: #1a1a1a !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    margin: 0 !important;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
  }

  .nav__menu.active {
    transform: translateX(0);
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.5);
    transition-duration: 0s;
  }

  .nav__menu:not(.active) {
    transition-duration: 0.35s;
  }

  /* En móvil el menú tiene siempre fondo oscuro: texto blanco */
  .nav__menu .nav__link {
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  .nav__menu .nav__link:hover,
  .nav__menu .nav__link.active {
    color: #e8e2d5 !important;
  }
  .nav__menu .nav__link::after {
    background-color: #c4b896;
  }

  /* Botón "Acceder a la plataforma" visible en menú móvil */
  .nav__menu .nav__link--cta {
    background-color: #8C8557 !important;
    border-color: #8C8557 !important;
    color: #fff !important;
  }
  .nav__menu .nav__link--cta:hover {
    background-color: #6b6d4a !important;
    border-color: #6b6d4a !important;
    color: #fff !important;
  }
}