/* =========================================================
   MENÚ PRINCIPAL MÓVIL · DARK PREMIUM COMPACTO
   Sólo afecta el menú hamburguesa de Flatsome (#main-menu).
   ========================================================= */
@media (max-width: 849px) {
  body #main-menu.mobile-sidebar,
  body #main-menu.sidebar-menu,
  body .mfp-content #main-menu,
  body .off-canvas #main-menu {
    width: min(88vw, 380px) !important;
    max-width: min(88vw, 380px) !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 74px 18px 24px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(47,255,116,.10), transparent 30%),
      radial-gradient(circle at 100% 18%, rgba(111,43,97,.12), transparent 36%),
      linear-gradient(180deg, #07110f 0%, #0a1215 48%, #0c1016 100%) !important;
    border-right: 1px solid rgba(80,255,123,.16) !important;
    box-shadow: 24px 0 70px rgba(0,0,0,.70) !important;
    color: #f4f7f6 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body #main-menu .sidebar-inner,
  body #main-menu .nav-sidebar {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Buscador oscuro y compacto */
  body #main-menu .searchform,
  body #main-menu form.searchform {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 48px !important;
    gap: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.20) !important;
  }

  body #main-menu .searchform input[type="search"],
  body #main-menu .searchform input[type="text"] {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f5f7f6 !important;
    font-size: 15px !important;
    box-shadow: none !important;
  }

  body #main-menu .searchform input::placeholder {
    color: rgba(236,242,239,.50) !important;
  }

  body #main-menu .searchform button,
  body #main-menu .searchform .button,
  body #main-menu .searchform input[type="submit"] {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(79,255,116,.16) !important;
    border-radius: 0 !important;
    background: linear-gradient(145deg, #126b37, #0b4e2a) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* Elementos principales más finos y elegantes */
  body #main-menu .nav-sidebar > li {
    margin: 0 0 7px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body #main-menu .nav-sidebar > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
    color: #eef3f1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease !important;
  }

  body #main-menu .nav-sidebar > li > a:hover,
  body #main-menu .nav-sidebar > li.current-menu-item > a,
  body #main-menu .nav-sidebar > li.current_page_item > a,
  body #main-menu .nav-sidebar > li.current-menu-ancestor > a {
    color: #69ff7d !important;
    border-color: rgba(74,255,107,.34) !important;
    background: linear-gradient(135deg, rgba(24,112,54,.28), rgba(19,28,33,.96)) !important;
    transform: translateX(2px) !important;
    box-shadow: inset 3px 0 0 #45f568, 0 10px 26px rgba(0,0,0,.24) !important;
  }

  body #main-menu .nav-sidebar ul.sub-menu {
    margin: 5px 0 9px 10px !important;
    padding: 4px 0 2px 10px !important;
    border-left: 1px solid rgba(76,255,105,.18) !important;
    background: transparent !important;
  }

  body #main-menu .nav-sidebar ul.sub-menu a {
    min-height: 40px !important;
    padding: 9px 10px !important;
    color: rgba(235,242,239,.78) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: transparent !important;
  }

  /* Newsletter y redes integrados, sin bloques gigantes */
  body #main-menu .header-newsletter-item > a,
  body #main-menu .newsletter-link {
    min-height: 48px !important;
  }

  body #main-menu .social-icons,
  body #main-menu .header-social-icons {
    display: flex !important;
    gap: 9px !important;
    margin: 16px 0 0 !important;
    padding: 16px 4px 0 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
  }

  body #main-menu .social-icons a,
  body #main-menu .header-social-icons a {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 11px !important;
    color: #e9efec !important;
    background: rgba(255,255,255,.035) !important;
    transition: .2s ease !important;
  }

  body #main-menu .social-icons a:hover,
  body #main-menu .header-social-icons a:hover {
    color: #6cff80 !important;
    border-color: rgba(76,255,105,.30) !important;
    background: rgba(30,117,58,.20) !important;
    transform: translateY(-2px) !important;
  }

  /* Botón cerrar visible y sobrio */
  body .mfp-wrap:has(#main-menu) .mfp-close,
  body #main-menu .mfp-close,
  body #main-menu button.mfp-close {
    display: grid !important;
    place-items: center !important;
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(76,255,105,.24) !important;
    border-radius: 12px !important;
    background: rgba(8,18,16,.94) !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.38) !important;
    z-index: 999999 !important;
  }

  body .mfp-wrap:has(#main-menu) .mfp-bg,
  body .mfp-bg:has(+ .mfp-wrap #main-menu) {
    background: rgba(0,0,0,.78) !important;
    backdrop-filter: blur(6px) !important;
    opacity: 1 !important;
  }
}