/* ==== MOONVIVAL · LUNAR GRAY UI (limpio) ==== */ :root { --moon-gray-900: #0f1116; --moon-gray-800: #161a22; --moon-gray-700: #1e2430; --moon-sheen: #cfd6e6; --mv-green: #00d09c; --mv-green-dark: #00b386; } /* ====== FONDO GLOBAL ====== */ html, body { background: #000 !important; /* negro al cargar */ } body.is-loaded { background: #0b121a !important; transition: background .35s ease; } /* ====== PRELOADER ====== */ #mv-preloader, .preloader, .mv-loader, .loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9999 !important; background: transparent !important; /* el negro ya lo pone */ } /* ========================================================= HEADER ========================================================= */ .header-with-searchbar { background: rgba(22, 26, 34, .82) !important; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); position: relative; } /* Menú principal (Home / Contact) */ #header .navbar-nav li a { font-family: 'Orbitron', sans-serif; font-weight: 600; letter-spacing: 2px; color: #fff !important; text-transform: uppercase; font-size: 14px; transition: all .3s ease-in-out; position: relative; border-bottom: none !important; box-shadow: none !important; } #header .navbar-nav li a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: linear-gradient(90deg, #7f8aa3, #cfd6e6); transition: width .3s ease-in-out; box-shadow: 0 0 8px rgba(207, 214, 230, .45); } #header .navbar-nav li a:hover { color: #e7ecf7 !important; text-shadow: 0 0 10px rgba(207, 214, 230, .55); } #header .navbar-nav li a:hover::after { width: 100%; } /* anulamos pseudo-líneas del tema */ #header .navbar-nav li::before, #header .navbar-nav li::after, #header .navbar-nav li a::before { display: none !important; content: none !important; border: 0 !important; background: none !important; } /* ====== ORDEN: MENÚ → (redes) → BOTÓN ====== */ .header-with-searchbar .menu-top-menu-container, .header-with-searchbar nav .navbar-collapse, .header-with-searchbar .navbar-nav-wrap { display: flex !important; align-items: center !important; justify-content: center !important; gap: 28px !important; flex-wrap: nowrap !important; } /* ====== MENÚ CENTRADO (versión buena) ====== */ header.header-with-searchbar .navbar { position: relative; } header.header-with-searchbar #top-menu { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; display: flex !important; gap: 42px; margin: 0; padding: 0; list-style: none; z-index: 20; } /* EMPUJÓN A LA DERECHA para compensar logo */ #header.header-with-searchbar #top-menu { left: calc(50% + 100px) !important; /* ajusta 90 / 110 si quieres */ } /* ====== redes (si las vuelves a poner) ====== */ .header-with-searchbar .mv-social-icons { order: 2 !important; display: flex !important; align-items: center !important; gap: 18px; margin-left: auto !important; margin-right: 24px !important; position: relative; } .header-with-searchbar .mv-social-icons::before, .header-with-searchbar .mv-social-icons::after { content: ""; display: block; width: 1px; height: 24px; background: rgba(255, 255, 255, .35); border-radius: 1px; pointer-events: none; } .header-with-searchbar .mv-social-icons::before { margin-right: 18px; } .header-with-searchbar .mv-social-icons::after { margin-left: 18px; } .header-with-searchbar .mv-social-icons li { list-style: none !important; } .header-with-searchbar .mv-social-icons a { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #ff2d55; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; transition: transform .25s ease, color .25s ease, filter .25s ease; } .header-with-searchbar .mv-social-icons svg, .header-with-searchbar .mv-social-icons img { width: 22px; height: 22px; display: block; } .mv-social-icons a[aria-label="Instagram"] svg { fill: #E1306C !important; } .mv-social-icons a[aria-label="TikTok"] svg { fill: #fff !important; } .mv-social-icons a[aria-label="X"] svg { fill: #fff !important; } .header-with-searchbar .mv-social-icons a:hover { opacity: .9; transform: translateY(-1px); filter: drop-shadow(0 0 4px rgba(255, 80, 80, .7)); } /* ====== BOTÓN VERDE ====== */ .header-with-searchbar .login, .header-with-searchbar .login li, .header-with-searchbar .login li.active { display: flex; justify-content: flex-end; flex-wrap: nowrap; background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; } .header-with-searchbar .login .login-btn { font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: 1.6px; background: linear-gradient(90deg, var(--mv-green), var(--mv-green-dark)) !important; border: 1px solid var(--mv-green-dark) !important; border-radius: 28px; padding: 10px 22px; color: #fff !important; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; transition: all .3s ease; } .header-with-searchbar .login .login-btn:hover { filter: brightness(1.05); transform: translateY(-1px); } .header-with-searchbar .login .login-btn:active { transform: translateY(0); } /* ====== HEADER RESPONSIVE ====== */ /* ====== HEADER RESPONSIVE (corregido) ====== */ @media (max-width: 992px) { header.header-with-searchbar { position: relative; z-index: 9999; } .navbar-toggler { border: none; outline: none; background: transparent; } .navbar-toggler-icon { background-image: none !important; width: 26px; height: 2px; background-color: #fff; position: relative; } .navbar-toggler-icon::before, .navbar-toggler-icon::after { content: ""; position: absolute; left: 0; width: 26px; height: 2px; background-color: #fff; transition: all 0.3s ease; } .navbar-toggler-icon::before { top: -7px; } .navbar-toggler-icon::after { top: 7px; } .navbar-collapse { background: rgba(15, 17, 22, 0.96); border-radius: 8px; padding: 12px 18px; position: absolute; top: 100%; left: 0; width: 100%; z-index: 999; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } .header-with-searchbar #top-menu { position: static !important; transform: none !important; flex-direction: column; align-items: flex-start; background: transparent !important; padding: 0; margin: 0; gap: 0; width: 100%; } .header-with-searchbar #top-menu li { width: 100%; } .header-with-searchbar #top-menu li a { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: left; font-size: 16px; } .header-with-searchbar #top-menu li:last-child a { border-bottom: none; } .header-with-searchbar .mv-social-icons { margin-top: 12px !important; gap: 14px !important; justify-content: flex-start; } .header-with-searchbar .mv-social-icons::before, .header-with-searchbar .mv-social-icons::after { display: none; } } /* ========================================================= SECCIONES / FONDOS ========================================================= */ /* no borres todos los fondos del tema: solo los vacíos */ section:not([class*="bg-"]):not(.crew):not(.mv-social) { background-color: transparent !important; } /* ====== BG-EARTH ====== */ .bg-earth { background: #0b0f16 url("../images/space/earth.jpg") center/cover no-repeat !important; min-height: 560px; } .bg-earth .space_bg { background: transparent !important; } .bg-earth .title-white, .bg-earth .title-white .title, .bg-earth .title-white .sub-title { color: #e7ecf7 !important; } /* ========================================================= SOCIAL FAN CAROUSEL (fondo negro) ========================================================= */ #mv-social { position: relative !important; background: #000 !important; background-image: none !important; isolation: isolate; z-index: 10; padding-top: 50px !important; padding-bottom: 50px !important; } #mv-social::before { content: ""; position: absolute; inset: 0; background: #000; z-index: -1; } #mv-social .mv-wrap, #mv-social .mv-fan, #mv-social .mv-cards, #mv-social .mv-head { background: #000 !important; } #mv-social .mv-title { color: #fff !important; text-shadow: 0 0 6px rgba(255,255,255,.2); } #mv-social .mv-card { background: #111 !important; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 18px rgba(0,0,0,.6); } #mv-social .mv-content, #mv-social .mv-user, #mv-social .mv-bio, #mv-social .mv-metrics { color: #fff !important; } #mv-social .mv-btn { background: linear-gradient(90deg, #00d09c, #00b386); color: #fff !important; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 600; transition: filter .2s ease; } #mv-social .mv-btn:hover { filter: brightness(1.1); } /* ========================================================= CREW (Bella, Max, Jack, Mia...) también en negro ========================================================= */ .crew { background: #000 !important; position: relative; z-index: 5; padding-top: 60px; padding-bottom: 60px; } .crew .wrap, .crew .grid, .crew > * { background: transparent !important; } .crew .mv-title, .crew h2, .crew h3 { color: #fff !important; text-shadow: none !important; } .crew::before { content: ""; position: absolute; inset: 0; background: #000; z-index: -1; } /* ========================================================= FOOTER ========================================================= */ footer.footer1 { background: rgba(22, 26, 34, .92) !important; backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, .06); color: var(--moon-sheen); } footer.footer1 .pt-3.pb-3, footer.footer1 .pt-3, footer.footer1 .pb-3 { background: transparent !important; } footer.footer1 .copyright { color: var(--moon-sheen) !important; } footer.footer1 a { color: #e7ecf7 !important; } footer.footer1 a:hover { color: #fff !important; text-decoration: underline; } /* ========================================================= CONTACT MODAL ========================================================= */ .mv-contact { border: 0; padding: 0; background: transparent; width: 100%; } .mv-contact::backdrop { background: rgba(0,0,0,.72); } .mv-contact__panel { font: inherit; color: #fff; width: min(920px, 92vw); margin: 4vh auto; background: rgba(20, 22, 28, .9); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.6); padding: clamp(16px, 3vw, 28px); backdrop-filter: blur(6px); display: flex; flex-direction: column; } .mv-contact__close { align-self: flex-end; border: 0; background: transparent; color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; } .mv-contact__panel .mv-title { text-align: center; margin-bottom: .5rem; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; } .mv-contact__lead { margin: 0 0 1rem; opacity: .9; text-align: center; } .mv-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mv-field--full { grid-column: 1 / -1; } .mv-field input, .mv-field textarea { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 10px 12px; color: #fff; outline: none; } .mv-field input::placeholder, .mv-field textarea::placeholder { color: rgba(255,255,255,.7); } .mv-field input:focus, .mv-field textarea:focus { border-color: rgba(255,255,255,.35); box-shadow: 0 0 0 3px rgba(255,255,255,.08) inset; } .mv-contact__actions { margin-top: 14px; display: flex; justify-content: center; } .mv-contact__actions .login-btn { cursor: pointer; } @media (max-width: 700px) { .mv-contact__grid { grid-template-columns: 1fr; } } /* ===== Moonvival logo dentro del slider – versión responsive ===== */ /* Base: que nunca se salga del ancho de pantalla */ #rev_slider_1_1 img[src*="moonvival-logo"], #rev_slider_1_1_wrapper img[src*="moonvival-logo"] { max-width: min(90vw, 520px); /* en desktop puede llegar a 520px, en móvil 90% del viewport */ height: auto; display: block; margin: 0 auto; } /* Pantallas medianas (tablets) */ @media (max-width: 992px) { #rev_slider_1_1 img[src*="moonvival-logo"], #rev_slider_1_1_wrapper img[src*="moonvival-logo"] { max-width: min(78vw, 420px); } } /* Móviles */ @media (max-width: 600px) { #rev_slider_1_1 img[src*="moonvival-logo"], #rev_slider_1_1_wrapper img[src*="moonvival-logo"] { max-width: 72vw; /* que respire a los lados */ } /* A veces el layer del slider queda demasiado arriba/bajo en móvil. Esto baja un poco el logo para que quede centrado. */ #rev_slider_1_1 .rs-layer.rs-pxl-3, #rev_slider_1_1 .rs-layer[id*="layer-0"] { transform: translateY(6vh) !important; } } /* LOGO MOONVIVAL dentro del slider: que sea responsive en móvil */ #rev_slider_1_1 .rs-layer#slider-1-slide-1-layer-0 img { width: auto; max-width: 90vw; /* no más ancho que la pantalla */ height: auto; display: block; margin: 0 auto; } /* En pantallas MUY pequeñas lo bajamos un poco */ @media (max-width: 575px) { /* bajamos todo el layer para que no se pegue al header */ #rev_slider_1_1 .rs-layer#slider-1-slide-1-layer-0 { top: 45% !important; /* un poco más abajo */ transform: translate(-50%, -50%); } #rev_slider_1_1 .rs-layer#slider-1-slide-1-layer-0 img { max-width: 78vw; /* un pelín más pequeño */ } } /* ========================================== MOONVIVAL LOGO — responsive y centrado ========================================== */ /* Imagen del logo: nunca más ancha que la pantalla */ #rev_slider_1_1 img[src*="moonvival-logo"] { display: block; height: auto !important; width: auto !important; max-width: min(85vw, 520px) !important; /* desktop máx 520px, móvil máx 85% */ margin: 0 auto !important; } /* Ajuste del layer del logo para centrado vertical */ #rev_slider_1_1 #slider-1-slide-1-layer-0 { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* Tablets */ @media (max-width: 992px) { #rev_slider_1_1 img[src*="moonvival-logo"] { max-width: min(80vw, 420px) !important; } } /* Móviles */ @media (max-width: 600px) { #rev_slider_1_1 img[src*="moonvival-logo"] { max-width: 72vw !important; /* respira mejor en móvil */ } #rev_slider_1_1 #slider-1-slide-1-layer-0 { top: 48% !important; /* baja un poco el logo */ } } /* Muy pequeños (<480px) */ @media (max-width: 480px) { #rev_slider_1_1 img[src*="moonvival-logo"] { max-width: 68vw !important; } #rev_slider_1_1 #slider-1-slide-1-layer-0 { top: 46% !important; } } /* ===== FIX MENÚ MÓVIL MOONVIVAL ===== */ @media (max-width: 992px) { /* 1. El header se queda arriba y por encima */ header.header-with-searchbar, #header.header-with-searchbar { position: relative !important; z-index: 9999 !important; } /* 2. Quitamos el centrado absoluto del menú en móvil */ header.header-with-searchbar #top-menu, #header.header-with-searchbar #top-menu { position: static !important; left: auto !important; top: auto !important; transform: none !important; gap: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* 3. Forzamos el contenedor que se despliega de Bootstrap */ .navbar-collapse { background: #0f1116 !important; /* negro lunar */ border-radius: 0 0 10px 10px; padding: 10px 16px 14px; width: 100%; box-shadow: 0 12px 24px rgba(0,0,0,.35); } /* 4. Cada item ocupa el ancho entero y se ve bien */ #top-menu li { width: 100%; list-style: none; } #top-menu li a { display: block !important; width: 100% !important; padding: 12px 0 !important; font-size: 16px !important; text-align: left !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; background: transparent !important; box-shadow: none !important; } /* quitamos la barrita verde que ves en la captura */ #top-menu li a::after { display: none !important; } #top-menu li:last-child a { border-bottom: none !important; } /* 5. Botón hamburguesa visible en fondo oscuro */ .navbar-toggler { border: 0 !important; outline: none !important; } .navbar-light .navbar-toggler-icon, .navbar-toggler-icon { background-image: none !important; width: 26px; height: 2px; background: #fff; position: relative; } .navbar-toggler-icon::before, .navbar-toggler-icon::after { content: ""; position: absolute; left: 0; width: 26px; height: 2px; background: #fff; } .navbar-toggler-icon::before { top: -7px; } .navbar-toggler-icon::after { top: 7px; } /* 6. El botón verde abajo del menú en móvil */ .header-with-searchbar .login { margin-top: 8px !important; justify-content: flex-start !important; } } /* ===== CORRECCIÓN FINAL MENÚ MÓVIL: cerrado por defecto ===== */ @media (max-width: 992px) { /* Oculto por defecto */ .navbar-collapse.collapse { display: none !important; } /* Cuando Bootstrap lo abre (al pulsar el botón) */ .navbar-collapse.collapse.show { display: block !important; } /* Aseguramos ancho y fondo al abrir */ .navbar-collapse.collapse.show { background: #0f1116 !important; width: 100% !important; } } /* ===== MOONVIVAL · MENÚ MÓVIL FORZADO ===== */ @media (max-width: 991.98px) { /* 1) por defecto CERRADO */ .navbar-expand-lg .navbar-collapse { display: none !important; } /* 2) cuando Bootstrap lo abre (al pulsar el botón) */ .navbar-expand-lg .navbar-collapse.show { display: block !important; } /* 3) estilo del desplegable */ .navbar-expand-lg .navbar-collapse.show { background: #0f1116 !important; width: 100% !important; border-radius: 0 0 12px 12px; padding: 12px 16px 14px; box-shadow: 0 10px 24px rgba(0,0,0,.4); } /* 4) quitamos el centrado raro del ul */ #header.header-with-searchbar #top-menu { position: static !important; transform: none !important; left: auto !important; } /* 5) items bonitos */ #header.header-with-searchbar #top-menu li a { display: block !important; width: 100% !important; padding: 12px 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } #header.header-with-searchbar #top-menu li:last-child a { border-bottom: none !important; } /* 6) sin la rayita verde de hover */ #header.header-with-searchbar #top-menu li a::after { display: none !important; } } /* ===== CIERRE REAL DEL MENÚ MÓVIL ===== */ @media (max-width: 992px) { /* oculto SI NO está abierto */ .navbar-collapse:not(.show) { display: none !important; } /* cuando está abierto, que ocupe todo y se vea bien */ .navbar-collapse.show { display: block !important; background: #0f1116 !important; position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999; } } /* ========================================================= 🔒 BLOQUEO DEFINITIVO MENÚ MÓVIL (PORTADO) ========================================================= */ @media (max-width: 992px) { /* por defecto, CERRADO */ header.header-with-searchbar .navbar.navbar-expand-lg .navbar-collapse.collapse, #header.header-with-searchbar .navbar.navbar-expand-lg .navbar-collapse.collapse { display: none !important; } /* cuando Bootstrap le pone .show → ABIERTO */ header.header-with-searchbar .navbar.navbar-expand-lg .navbar-collapse.collapse.show, #header.header-with-searchbar .navbar.navbar-expand-lg .navbar-collapse.collapse.show { display: block !important; } }