/* ========================================================================== Nasus Menu Pro – v1.3 NUCLEAR Usa 'html body' como prefijo para máxima especificidad. Se inyecta inline en vía wp_head prio 9999 para ganar al tema. ========================================================================== */ :root { --nmp-bg: #121518; --nmp-bg-2: #1B242E; --nmp-bg-3: #0a0a0a; --nmp-accent: #45f882; --nmp-accent-2: #ffb300; --nmp-text: #ffffff; --nmp-text-mute: #cccccc; --nmp-border: rgba(69, 248, 130, 0.25); --nmp-shadow: 0 0 20px rgba(69, 248, 130, 0.35); --nmp-radius: 10px; --nmp-ease-out: cubic-bezier(.16, 1, .3, 1); --nmp-ease-back: cubic-bezier(.34, 1.56, .64, 1); --nmp-fast: 180ms; --nmp-med: 280ms; } /* ============================================================ KILLER: quitar cualquier text-decoration, outline, y estilos heredados del tema que manchan nuestro menú ============================================================ */ html body .tgmenu__navbar-wrap ul.navigation li a, html body .tgmenu__navbar-wrap ul.navigation li a:hover, html body .tgmenu__navbar-wrap ul.navigation li a:focus, html body .tgmenu__navbar-wrap ul.navigation li.current-menu-item a, html body ul#menu-inicio li a, html body ul#menu-inicio li a:hover, html body ul#menu-inicio li a:focus { text-decoration: none !important; outline: none !important; box-shadow: none !important; } /* Eliminar pseudo-elementos problemáticos del tema (el puntito naranja que aparece sobre los items activos) */ html body .tgmenu__navbar-wrap ul.navigation > li > a::before, html body ul#menu-inicio > li > a::before { display: none !important; } /* Re-crear nuestro pseudo-elemento después */ html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item > a.nav-links::after, html body ul#menu-inicio > li.nmp-menu-item > a.nav-links::after { display: none !important; } /* ============================================================ 1. Contenedor del menú ============================================================ */ html body .tgmenu__navbar-wrap .tgmenu__main-menu, html body .tgmenu__navbar-wrap ul.navigation, html body ul#menu-inicio.navigation { display: flex !important; align-items: center !important; gap: 2px !important; flex-wrap: nowrap !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } /* ============================================================ 2. Items del menú principal ============================================================ */ html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item, html body ul#menu-inicio > li.nmp-menu-item { position: relative !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item > a.nav-links, html body ul#menu-inicio > li.nmp-menu-item > a.nav-links { position: relative !important; padding: 10px 14px !important; font-weight: 600 !important; letter-spacing: .3px !important; text-transform: uppercase !important; font-size: 13.5px !important; color: #ffffff !important; border-radius: 10px !important; overflow: visible !important; display: inline-flex !important; align-items: center !important; gap: 0 !important; text-decoration: none !important; background: transparent !important; line-height: 1.2 !important; transition: color var(--nmp-med) var(--nmp-ease-out), text-shadow var(--nmp-med) var(--nmp-ease-out), background-color var(--nmp-med) var(--nmp-ease-out) !important; } /* Scan-line animado (único elemento visual debajo del item) */ html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item > a.nav-links::before, html body ul#menu-inicio > li.nmp-menu-item > a.nav-links::before { content: '' !important; display: block !important; position: absolute !important; bottom: 2px !important; left: 50% !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, #45f882, transparent) !important; transition: width .35s var(--nmp-ease-out) !important; pointer-events: none !important; top: auto !important; right: auto !important; } html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item:hover > a.nav-links::before, html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item.current-menu-item > a.nav-links::before, html body ul#menu-inicio > li.nmp-menu-item:hover > a.nav-links::before, html body ul#menu-inicio > li.nmp-menu-item.current-menu-item > a.nav-links::before { width: 80% !important; } html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item:hover > a.nav-links, html body ul#menu-inicio > li.nmp-menu-item:hover > a.nav-links { color: #45f882 !important; text-shadow: 0 0 10px rgba(69, 248, 130, 0.6) !important; text-decoration: none !important; } html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item.current-menu-item > a.nav-links, html body ul#menu-inicio > li.nmp-menu-item.current-menu-item > a.nav-links { color: #45f882 !important; text-decoration: none !important; } /* ============================================================ 3. Badges (HOT, NUEVO, OFERTA, TOP) ============================================================ */ html body .tgmenu__navbar-wrap li.nmp-has-badge > a, html body ul#menu-inicio li.nmp-has-badge > a { padding-right: 44px !important; position: relative !important; } html body .tgmenu__navbar-wrap li.nmp-has-badge > a > span.nmp-badge-label, html body ul#menu-inicio li.nmp-has-badge > a > span.nmp-badge-label { position: absolute !important; top: 4px !important; right: 4px !important; padding: 2px 6px !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .5px !important; text-transform: uppercase !important; border-radius: 4px !important; color: #0a0a0a !important; animation: nmp-pulse 1.8s infinite !important; line-height: 1 !important; display: inline-block !important; } html body .tgmenu__navbar-wrap li.nmp-badge-hot > a > span.nmp-badge-label, html body ul#menu-inicio li.nmp-badge-hot > a > span.nmp-badge-label { background: #ff3b30 !important; color: #fff !important; box-shadow: 0 0 8px rgba(255,59,48,.6) !important; } html body .tgmenu__navbar-wrap li.nmp-badge-nuevo > a > span.nmp-badge-label, html body ul#menu-inicio li.nmp-badge-nuevo > a > span.nmp-badge-label { background: #45f882 !important; box-shadow: 0 0 8px rgba(69,248,130,.6) !important; } html body .tgmenu__navbar-wrap li.nmp-badge-oferta > a > span.nmp-badge-label, html body ul#menu-inicio li.nmp-badge-oferta > a > span.nmp-badge-label { background: #ffb300 !important; box-shadow: 0 0 8px rgba(255,179,0,.6) !important; } html body .tgmenu__navbar-wrap li.nmp-badge-top > a > span.nmp-badge-label, html body ul#menu-inicio li.nmp-badge-top > a > span.nmp-badge-label { background: #5865F2 !important; color: #fff !important; box-shadow: 0 0 8px rgba(88,101,242,.6) !important; } @keyframes nmp-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .85; } } /* ============================================================ 4. Dropdowns / Mega-menú ============================================================ */ html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown, html body ul#menu-inicio li.has-dropdown { position: relative !important; } /* Puente invisible entre item y dropdown */ html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown::after, html body ul#menu-inicio li.has-dropdown::after { content: '' !important; position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; height: 20px !important; background: transparent !important; pointer-events: none !important; z-index: 49 !important; display: block !important; } html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown.nmp-force-open::after, html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown.nmp-force-open::after, html body ul#menu-inicio li.has-dropdown.nmp-force-open::after, html body ul#menu-inicio li.has-dropdown.nmp-force-open::after { pointer-events: auto !important; } /* Sub-menú (dropdown) */ html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown > ul.sub-menu, html body ul#menu-inicio li.has-dropdown > ul.sub-menu { background: linear-gradient(145deg, #1B242E 0%, #121518 100%) !important; border: 1px solid rgba(69, 248, 130, 0.25) !important; border-radius: 10px !important; box-shadow: 0 0 20px rgba(69, 248, 130, 0.35), 0 10px 40px rgba(0,0,0,.5) !important; padding: 12px !important; min-width: 240px !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(8px) !important; pointer-events: none !important; z-index: 999 !important; position: absolute !important; top: 100% !important; left: 0 !important; margin-top: 8px !important; list-style: none !important; will-change: opacity, transform !important; /* CIERRE: rápido para que el cambio de categoría sea inmediato */ transition: opacity 120ms ease-out, transform 140ms ease-out, visibility 0s linear 140ms !important; } html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown.nmp-force-open > ul.sub-menu, html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; /* APERTURA: fluida pero no lenta */ transition: opacity 180ms cubic-bezier(.16, 1, .3, 1), transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s !important; } /* Línea neón superior del dropdown */ html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown > ul.sub-menu::before, html body ul#menu-inicio li.has-dropdown > ul.sub-menu::before { content: '' !important; position: absolute !important; top: 0 !important; left: 10% !important; width: 80% !important; height: 2px !important; background: linear-gradient(90deg, transparent, #45f882, transparent) !important; border-radius: 2px !important; box-shadow: 0 0 12px #45f882 !important; display: block !important; } /* Items del dropdown */ html body .tgmenu__navbar-wrap ul.navigation ul.sub-menu li, html body ul#menu-inicio ul.sub-menu li { opacity: 0; transform: translateX(-8px); /* Al cerrar: reset RÁPIDO (sin delay) para que no se arrastre al cambiar de categoría */ transition: opacity 80ms ease-out, transform 80ms ease-out !important; transition-delay: 0s !important; list-style: none !important; margin: 0 !important; padding: 0 !important; will-change: opacity, transform; } html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown.nmp-force-open > ul.sub-menu > li, html body .tgmenu__navbar-wrap ul.navigation li.has-dropdown.nmp-force-open > ul.sub-menu > li, html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li, html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li { opacity: 1; transform: translateX(0); /* Al abrir: stagger más rápido */ transition: opacity 200ms cubic-bezier(.16, 1, .3, 1), transform 220ms cubic-bezier(.16, 1, .3, 1) !important; } html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(1), html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(1), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(1), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(1) { transition-delay: 30ms !important; } html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(2), html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(2), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(2), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(2) { transition-delay: 55ms !important; } html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(3), html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(3), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(3), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(3) { transition-delay: 75ms !important; } html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(4), html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(4), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(4), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(4) { transition-delay: 95ms !important; } html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(5), html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(5), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(5), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(5) { transition-delay: 110ms !important; } html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(6), html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(6), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(6), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(6) { transition-delay: 125ms !important; } html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(n+7), html body .tgmenu__navbar-wrap li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(n+7), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(n+7), html body ul#menu-inicio li.has-dropdown.nmp-force-open > ul.sub-menu > li:nth-child(n+7) { transition-delay: 140ms !important; } /* Enlaces de items de dropdown */ html body .tgmenu__navbar-wrap ul.sub-menu li a.dropdown-items, html body ul#menu-inicio ul.sub-menu li a.dropdown-items { position: relative !important; display: block !important; padding: 10px 14px !important; font-size: 13px !important; color: #cccccc !important; border-radius: 6px !important; overflow: hidden !important; text-transform: none !important; font-weight: 500 !important; text-decoration: none !important; background: transparent !important; line-height: 1.3 !important; transition: background-color 180ms var(--nmp-ease-out), color 180ms var(--nmp-ease-out), padding 220ms var(--nmp-ease-out), transform 220ms var(--nmp-ease-out) !important; } /* Quitar pseudo-elementos heredados del tema en dropdown-items */ html body .tgmenu__navbar-wrap ul.sub-menu li a.dropdown-items::after, html body ul#menu-inicio ul.sub-menu li a.dropdown-items::after { display: none !important; } html body .tgmenu__navbar-wrap ul.sub-menu li a.dropdown-items::before, html body ul#menu-inicio ul.sub-menu li a.dropdown-items::before { content: '▸' !important; position: absolute !important; left: -10px !important; top: 50% !important; transform: translateY(-50%) !important; color: #45f882 !important; font-size: 14px !important; opacity: 0 !important; transition: all .22s var(--nmp-ease-out) !important; display: block !important; background: none !important; width: auto !important; height: auto !important; border: none !important; box-shadow: none !important; } html body .tgmenu__navbar-wrap ul.sub-menu li:hover > a.dropdown-items, html body ul#menu-inicio ul.sub-menu li:hover > a.dropdown-items { background: rgba(69, 248, 130, 0.08) !important; color: #45f882 !important; padding-left: 24px !important; transform: translateX(4px) !important; } html body .tgmenu__navbar-wrap ul.sub-menu li:hover > a.dropdown-items::before, html body ul#menu-inicio ul.sub-menu li:hover > a.dropdown-items::before { opacity: 1 !important; left: 8px !important; } /* Item activo en dropdown */ html body .tgmenu__navbar-wrap ul.sub-menu li.current-menu-item > a.dropdown-items, html body ul#menu-inicio ul.sub-menu li.current-menu-item > a.dropdown-items { color: #45f882 !important; background: rgba(69, 248, 130, 0.1) !important; } /* ============================================================ 5. Iconos automáticos ============================================================ */ html body .tgmenu__navbar-wrap .nmp-auto-icon, html body ul#menu-inicio .nmp-auto-icon, html body .tgmobile__menu .nmp-auto-icon { display: inline-block !important; margin-right: 7px !important; font-size: 13px !important; color: #45f882 !important; opacity: .85 !important; width: 16px !important; text-align: center !important; transition: transform var(--nmp-fast) var(--nmp-ease-back), opacity var(--nmp-fast) var(--nmp-ease-out), filter var(--nmp-fast) var(--nmp-ease-out) !important; will-change: transform; vertical-align: middle !important; line-height: 1 !important; background: none !important; border: none !important; } html body .tgmenu__navbar-wrap ul.navigation > li.nmp-menu-item:hover > a.nav-links .nmp-auto-icon, html body ul#menu-inicio > li.nmp-menu-item:hover > a.nav-links .nmp-auto-icon, html body .tgmenu__navbar-wrap ul.sub-menu li:hover > a.dropdown-items .nmp-auto-icon, html body ul#menu-inicio ul.sub-menu li:hover > a.dropdown-items .nmp-auto-icon { transform: scale(1.25) rotate(-6deg) !important; opacity: 1 !important; filter: drop-shadow(0 0 6px rgba(69, 248, 130, .7)) !important; } /* ============================================================ 6. FiboSearch dentro del menú ============================================================ */ html body .tgmenu__navbar-wrap li.nmp-fibo-wrap, html body ul#menu-inicio li.nmp-fibo-wrap { margin: 0 8px !important; min-width: 260px !important; display: flex !important; align-items: center !important; list-style: none !important; padding: 0 !important; } html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .nmp-fibo-inner, html body ul#menu-inicio li.nmp-fibo-wrap .nmp-fibo-inner { position: relative !important; width: 100% !important; } html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .dgwt-wcas-search-input, html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .nmp-fibo-input { width: 100% !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(69, 248, 130, 0.25) !important; border-radius: 999px !important; color: #ffffff !important; height: 42px !important; padding: 0 46px 0 18px !important; font-size: 13px !important; font-family: inherit !important; outline: none !important; box-shadow: none !important; transition: border-color var(--nmp-med) var(--nmp-ease-out), box-shadow var(--nmp-med) var(--nmp-ease-out), background-color var(--nmp-med) var(--nmp-ease-out) !important; } html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .dgwt-wcas-search-input:focus, html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .nmp-fibo-input:focus { border-color: #45f882 !important; box-shadow: 0 0 0 3px rgba(69, 248, 130, 0.2), 0 0 20px rgba(69, 248, 130, .25) !important; background: rgba(255,255,255,0.07) !important; } html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .dgwt-wcas-search-input::placeholder, html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .nmp-fibo-input::placeholder { color: rgba(255,255,255,0.55) !important; opacity: 1 !important; } html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .dgwt-wcas-search-submit, html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .nmp-fibo-btn { position: absolute !important; right: 4px !important; top: 50% !important; transform: translateY(-50%) !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; border: none !important; background: #45f882 !important; color: #0a0a0a !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all var(--nmp-fast) var(--nmp-ease-out) !important; } html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .dgwt-wcas-search-submit:hover, html body .tgmenu__navbar-wrap li.nmp-fibo-wrap .nmp-fibo-btn:hover { background: #5cffa0 !important; box-shadow: 0 0 15px rgba(69, 248, 130, 0.55) !important; transform: translateY(-50%) scale(1.08) !important; } /* ============================================================ 7. CTA "Comprar Ahora" ============================================================ */ html body .tgmenu__navbar-wrap li.nmp-cta-wrap, html body ul#menu-inicio li.nmp-cta-wrap { margin-left: 10px !important; list-style: none !important; display: flex !important; align-items: center !important; padding: 0 !important; } html body .tgmenu__navbar-wrap li.nmp-cta-wrap a.nmp-cta-btn, html body ul#menu-inicio li.nmp-cta-wrap a.nmp-cta-btn, html body a.nmp-cta-btn { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 20px !important; font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: #0a0a0a !important; background: linear-gradient(135deg, #45f882 0%, #2dd96b 100%) !important; border-radius: 999px !important; overflow: hidden !important; border: none !important; box-shadow: 0 4px 15px rgba(69, 248, 130, 0.4), inset 0 1px 0 rgba(255,255,255,.3) !important; text-decoration: none !important; line-height: 1.2 !important; transition: transform 260ms var(--nmp-ease-back), box-shadow 260ms var(--nmp-ease-out) !important; animation: nmp-cta-glow 2.5s ease-in-out infinite !important; } html body .tgmenu__navbar-wrap li.nmp-cta-wrap a.nmp-cta-btn:hover, html body a.nmp-cta-btn:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 8px 25px rgba(69, 248, 130, 0.6), inset 0 1px 0 rgba(255,255,255,.4) !important; color: #0a0a0a !important; animation-play-state: paused !important; text-decoration: none !important; } html body a.nmp-cta-btn .nmp-cta-icon { font-size: 14px !important; color: #0a0a0a !important; margin: 0 !important; width: auto !important; opacity: 1 !important; filter: none !important; transition: transform var(--nmp-fast) var(--nmp-ease-back) !important; } html body a.nmp-cta-btn:hover .nmp-cta-icon { transform: scale(1.25) rotate(-15deg) !important; } html body a.nmp-cta-btn .nmp-cta-shine { position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.6), transparent ) !important; animation: nmp-shine 3s infinite !important; pointer-events: none !important; } @keyframes nmp-shine { 0% { left: -100%; } 60% { left: 100%; } 100% { left: 100%; } } @keyframes nmp-cta-glow { 0%,100% { box-shadow: 0 4px 15px rgba(69, 248, 130, 0.4), inset 0 1px 0 rgba(255,255,255,.3); } 50% { box-shadow: 0 4px 25px rgba(69, 248, 130, 0.7), inset 0 1px 0 rgba(255,255,255,.3); } } /* ============================================================ 8. MOBILE MENU — fix completo para tgmobile__menu drawer ============================================================ */ @media (max-width: 1199px) { /* En tablets/mobile, ocultar los extras del menú desktop */ html body .tgmenu__navbar-wrap ul.navigation li.nmp-fibo-wrap, html body .tgmenu__navbar-wrap ul.navigation li.nmp-cta-wrap, html body ul#menu-inicio li.nmp-fibo-wrap, html body ul#menu-inicio li.nmp-cta-wrap { display: none !important; } /* Ocultar el .tgmenu__navbar-wrap completo en mobile (solo mostrar el toggle) */ html body .tgmenu__navbar-wrap.d-xl-flex { display: none !important; } } /* ======== Drawer del mobile menu (tgmobile__menu) ======== IMPORTANTE: NO controlamos la visibility/opacity del drawer. Dejamos que el JS del tema MyKD haga el toggle por su cuenta. Solo damos look & feel (colores, ancho, layout). */ /* Backdrop oscuro: cuando el tema lo muestra, que tenga blur */ html body .tgmobile__menu-backdrop { background: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } /* Box principal del drawer - ancho fijo, look gaming dark */ html body .tgmobile__menu .tgmobile__menu-box { width: 85vw !important; max-width: 340px !important; min-width: 280px !important; background: linear-gradient(165deg, #1B242E 0%, #121518 100%) !important; border-left: 2px solid rgba(69, 248, 130, 0.2) !important; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(69, 248, 130, 0.1) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; display: flex !important; flex-direction: column !important; -webkit-overflow-scrolling: touch !important; will-change: transform !important; /* Transición fluida de entrada/salida del drawer */ transition: transform 440ms cubic-bezier(.22, 1, .36, 1) !important; } /* Fluidez de entrada del drawer completo (el tema MyKD lo oculta/muestra) */ html body .tgmobile__menu { will-change: opacity, visibility !important; transition: opacity 320ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 320ms !important; } html body .tgmobile__menu.active, html body .tgmobile__menu.show, html body .tgmobile__menu.visible, html body.mobile-menu-visible .tgmobile__menu { transition: opacity 320ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s !important; } /* Backdrop con fade fluido */ html body .tgmobile__menu-backdrop { will-change: opacity !important; transition: opacity 360ms cubic-bezier(.16, 1, .3, 1) !important; } /* Scrollbar personalizada */ html body .tgmobile__menu .tgmobile__menu-box::-webkit-scrollbar { width: 4px !important; } html body .tgmobile__menu .tgmobile__menu-box::-webkit-scrollbar-thumb { background: rgba(69, 248, 130, 0.3) !important; border-radius: 2px !important; } /* Botón cerrar (X) del drawer */ html body .tgmobile__menu .close-btn { position: absolute !important; top: 15px !important; right: 15px !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: 20px !important; cursor: pointer !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 50% !important; border: 1px solid rgba(69, 248, 130, 0.2) !important; z-index: 10 !important; transition: all .2s var(--nmp-ease-out) !important; } html body .tgmobile__menu .close-btn:hover, html body .tgmobile__menu .close-btn:active { background: rgba(69, 248, 130, 0.1) !important; color: #45f882 !important; } /* Logo en el drawer */ html body .tgmobile__menu .nav-logo { padding: 25px 20px 15px !important; text-align: center !important; border-bottom: 1px solid rgba(69, 248, 130, 0.1) !important; display: block !important; width: 100% !important; } html body .tgmobile__menu .nav-logo a.main-logo { display: inline-block !important; } html body .tgmobile__menu .nav-logo img { max-height: 70px !important; width: auto !important; } /* Contenedor del menú clonado */ html body .tgmobile__menu .tgmobile__menu-outer { width: 100% !important; padding: 10px 0 !important; flex: 1 1 auto !important; overflow: visible !important; display: block !important; } /* UL navigation dentro del drawer */ html body .tgmobile__menu .tgmobile__menu-outer .navigation, html body .tgmobile__menu ul.navigation { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; flex-direction: column !important; flex-wrap: wrap !important; gap: 0 !important; } /* Items del menú mobile */ html body .tgmobile__menu .navigation > li, html body .tgmobile__menu ul.navigation > li { display: block !important; width: 100% !important; position: relative !important; border-bottom: 1px solid rgba(69, 248, 130, 0.08) !important; list-style: none !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; transform: none !important; } /* El primer li (el que tiene FiboSearch) en mobile */ html body .tgmobile__menu .navigation > li.nmp-fibo-wrap { padding: 15px !important; display: block !important; width: 100% !important; min-width: 0 !important; } html body .tgmobile__menu .navigation > li.nmp-fibo-wrap .dgwt-wcas-search-wrapp, html body .tgmobile__menu .navigation > li.nmp-fibo-wrap .dgwt-wcas-search-form { width: 100% !important; margin: 0 !important; } html body .tgmobile__menu .navigation > li.nmp-fibo-wrap .dgwt-wcas-search-input { width: 100% !important; height: 42px !important; padding: 0 50px 0 18px !important; } html body .tgmobile__menu .navigation > li.nmp-fibo-wrap .dgwt-wcas-search-submit { right: 4px !important; width: 34px !important; height: 34px !important; } /* Links del menú mobile */ html body .tgmobile__menu .navigation > li > a { display: flex !important; align-items: center !important; width: 100% !important; padding: 15px 50px 15px 20px !important; color: #ffffff !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .3px !important; background: transparent !important; line-height: 1.3 !important; border: none !important; text-shadow: none !important; position: relative !important; will-change: transform, background-color, padding-left, color; transition: color 220ms cubic-bezier(.16, 1, .3, 1), background-color 220ms cubic-bezier(.16, 1, .3, 1), padding-left 260ms cubic-bezier(.16, 1, .3, 1), text-shadow 220ms ease-out !important; -webkit-tap-highlight-color: transparent !important; } html body .tgmobile__menu .navigation > li > a:active, html body .tgmobile__menu .navigation > li > a:hover, html body .tgmobile__menu .navigation > li.active > a, html body .tgmobile__menu .navigation > li.current-menu-item > a { color: #45f882 !important; background: rgba(69, 248, 130, 0.06) !important; padding-left: 28px !important; text-shadow: 0 0 8px rgba(69, 248, 130, 0.4) !important; } /* Feedback de tap: pequeño flash al tocar */ html body .tgmobile__menu .navigation > li > a:active { background: rgba(69, 248, 130, 0.12) !important; transition-duration: 80ms !important; } /* Quitar las líneas/scan-lines/pseudo del desktop en mobile */ html body .tgmobile__menu .navigation > li > a::before, html body .tgmobile__menu .navigation > li > a::after { display: none !important; content: none !important; } /* ============================================================ Sub-menú mobile: animación FLUIDA que empuja items de abajo Técnica: envolvemos el