/* ========================================================== MEGA MENU FOOTER (Turismo / Glassmorphism con líneas) ========================================================== */ /* 1. Contenedor Principal */ ul.footer-nav { display: flex !important; flex-direction: row !important; justify-content: space-between !important; list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } /* 2. Cada columna */ ul.footer-nav > li.menu-item { flex: 1 !important; padding: 40px 32px !important; margin: 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.05) !important; transition: background 0.4s ease; } /* ul.footer-nav > li:hover { background: rgba(255, 255, 255, 0.02); } */ ul.footer-nav > li.menu-item:last-child { border-right: none !important; } /* ── 1. El título padre (contenedor del glass) ── */ ul.footer-nav > li.menu-item > a { display: block !important; font-size: var(--index-font-sm); font-weight: 600 !important; font-family: var(--index-title-font); letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #ffffff !important; text-decoration: none !important; pointer-events: none; position: relative !important; padding: 14px 18px !important; margin-bottom: 24px !important; overflow: hidden !important; border-radius: 3px !important; background: linear-gradient( 135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.06) 100% ) !important; backdrop-filter: blur(6px) !important; border: 1px solid rgba(255,255,255,0.13) !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.18), inset 0 -1px 0 0 rgba(255,255,255,0.04), 0 2px 12px rgba(0,0,0,0.08) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important; transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.45s cubic-bezier(0.165,0.84,0.44,1) !important; } /* Reflejo de luz superior */ ul.footer-nav > li.menu-item > a::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.25) 75%, transparent 100% ) !important; pointer-events: none !important; z-index: 3 !important; } /* Texto encima de las estrellas */ ul.footer-nav > li.menu-item > a > .nav-label { position: relative !important; z-index: 2 !important; display: block !important; } /* ── 2. Las estrellitas (clase ÚNICA: .stars-title) ── */ .stars-title { position: absolute !important; border-radius: 50% !important; background-color: white !important; box-shadow: 0 0 1px 1px rgba(255,255,255,0.35) !important; z-index: 1 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; } /* Variante: estrellas grandes */ .stars-title.is-big { box-shadow: 0 0 1px 1px rgba(255,255,255,0.45) !important; } /* Parpadeo (nombre único, no choca con tu @keyframes) */ @keyframes stars-title-twinkle { 0%, 100% { opacity: var(--st-base, 0.1); } 50% { opacity: var(--st-peak, 0.8); } } /* ── 3. Hover: enciende todas las .stars-title del título ── */ ul.footer-nav > li.menu-item:hover > a .stars-title { animation: none !important; opacity: var(--st-peak, 0.85) !important; transition: opacity 0.35s ease !important; } ul.footer-nav > li.menu-item:hover > a .stars-title.is-big { box-shadow: 0 0 4px 2px rgba(255,255,255,0.22), 0 0 1px 1px rgba(255,255,255,0.65) !important; } ul.footer-nav > li.menu-item:hover > a { border-color: rgba(255,255,255,0.26) !important; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.28), inset 0 -1px 0 0 rgba(255,255,255,0.06), 0 0 20px rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.14) !important; transform: translateY(-2px) !important; } /* ========================================================== 4. SUB-MENÚ (HIJOS) — Completamente transparente ========================================================== */ ul.footer-nav .sub-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; background: transparent !important; } /* 5. Enlaces hijos — Sin fondo, limpios */ ul.footer-nav .sub-menu > li.menu-item > a { display: flex !important; font-family: var(--index-body-font); align-items: center !important; font-size: 15px !important; color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; background: transparent !important; border: none !important; box-shadow: none !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } ul.footer-nav .sub-menu > li.menu-item > a:hover { color: #ffffff !important; transform: translateX(6px) !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important; } ul.footer-nav .sub-menu > li.menu-item > a:hover::before { opacity: 1; transform: scale(1.1); } /* 6. Icono flecha en hijos */ ul.footer-nav .sub-menu > li.menu-item > a::before { content: "" !important; display: inline-block !important; width: 12px !important; height: 12px !important; margin-right: 10px !important; color: #ffffff !important; background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0; transition: all 0.3s ease; } /* ========================================================== MODO RESPONSIVO — ACORDEÓN ========================================================== */ /* Para pantallas móviles (hasta 768px) */ @media (max-width: 768px) { /* 1. Ocultar los submenús por defecto */ ul.footer-nav li.menu-item-has-children > ul { display: none; /* Si usas transiciones, usa max-height: 0 y overflow: hidden en lugar de display: none */ } /* 2. Mostrar el submenú solo cuando el JS agregue la clase 'is-open' */ ul.footer-nav li.menu-item-has-children.is-open > ul { display: block; } } @media (max-width: 768px) { ul.footer-nav { flex-direction: column !important; backdrop-filter: blur(16px) !important; } ul.footer-nav > li.menu-item { padding: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } ul.footer-nav > li.menu-item:last-child { border-bottom: none !important; } /* Título padre en móvil — glass se adapta */ ul.footer-nav > li.menu-item > a { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 0 !important; margin: 12px !important; pointer-events: auto !important; cursor: pointer; } /* Icono (+) */ ul.footer-nav > li.menu-item.menu-item-has-children > a::after { content: ""; display: block; width: 16px; height: 16px; flex-shrink: 0; background-color: #ffffff; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 16px !important; height: 16px !important; background: none !important; background-color: #ffffff !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") !important; transition: transform 0.4s ease-in-out; } /* Ocultar sub-menús */ ul.footer-nav .sub-menu { display: none !important; padding: 0 24px 24px 24px !important; } /* Activo: gira (+) a (×) */ ul.footer-nav > li.menu-item.is-open > a::after { transform: rotate(45deg); } ul.footer-nav > li.menu-item.is-open .sub-menu { display: flex !important; } } /* ========================================================== FONDO DE ESTRELLAS — Optimizado con CSS animations puras /* ========================================================== /* Contenedor — ajusta width/height según donde lo uses */ /* El PADRE del #stars necesita position: relative */ [data-elementor-type="footer"]{ position: relative; overflow: hidden; } /* El contenedor de estrellas */ #stars { /* position: absolute; inset: 0; z-index: 0; */ /* pointer-events: none; */ } /* Cada estrella (figure inyectado por JS) */ #stars > .star { position: absolute; border-radius: 50%; background-color: white; box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.35); pointer-events: none; margin: 0; padding: 0; will-change: opacity; } /* 15% son más grandes y brillan un poco más */ #stars > .star.is-big { box-shadow: 0 0 2px 1.5px rgba(255, 255, 255, 0.55); } /* Parpadeo — nombre único, no choca con stars-title-twinkle */ @keyframes stars-bg-twinkle { 0%, 100% { opacity: var(--sb-min, 0.1); } 50% { opacity: var(--sb-max, 0.9); } } /* Accesibilidad: respeta a usuarios con preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { #stars > .star { animation: none !important; opacity: 0.5 !important; } } /* ========================================================== OPTIMIZACIÓN EXTREMA PARA MÓVILES (Max 768px) ========================================================== */ @media (max-width: 768px) { #stars > .star, #stars > .star.is-big { /* Apagamos el resplandor en móviles para salvar la GPU */ box-shadow: none !important; /* Opcional: si sientes que pierden volumen, puedes suavizar los bordes con un filtro, que suele ser más rápido que un box-shadow, o simplemente dejarlas planas */ } }