/* ===================================================== Sistema Visual Jarvis - CSS Global Dinámico -------------------------------------------------- Este archivo define la lógica cromática global según el atributo generado dinámicamente desde WordPress. ===================================================== */ /* =========================== VARIABLES BASE GLOBALES =========================== */ :root { --color-black: #252626; --color-white: #FFFFFF; --color-gray: #F9F9F9; --transition: all 0.3s ease --color-alineamiento: #E3F4D7; --color-esencia: #E6F7FF; --color-trascendencia: #D9DCF9; --color-evolucion: #F7F2C9; --color-alineamiento-sa: #7DCC66; --color-esencia-sa: #63BDE5; --color-trascendencia-sa: #7075D6; --color-evolucion-sa: #F7E8A9; } /* ================================ ÁREAS ENERGÉTICAS PRINCIPALES - variables para elementos con el data-area ================================ */ /* Verde: Potenziando */ [data-area="potenziando"] { --color-area: var(--color-alineamiento); } /* Azul: Aportando */ [data-area="aportando"] { --color-area: var(--color-esencia); } /* Púrpura: Transformando */ [data-area="transformando"] { --color-area: var(--color-trascendencia); } /* Amarillo: Evolución */ [data-area="evolucion"] { --color-area: var(--color-evolucion); } /* =============================== COLORES MEDIANTE CLASES =============================== */ .color-alineamiento { --color-area: var(--color-alineamiento); --color-area-sa: var(--color-alineamiento-sa); } .color-esencia { --color-area: var(--color-esencia); --color-area-sa: var(--color-esencia-sa); } .color-trascendencia { --color-area: var(--color-trascendencia); --color-area-sa: var(--color-trascendencia-sa); } .color-evolucion { --color-area: var(--color-evolucion); --color-area-sa: var(--color-evolucion-sa); } /* =============================== ELEMENTOS DINÁMICOS GENERALES =============================== */ /* =============================== MENÚ PRINCIPAL ANIMADO JARVIS =================================*/ /* Cada

se ajusta al contenido */ #ekit-megamenu-primary .elementskit-navbar-nav > li { width: auto !important; } /* Enlace principal */ #ekit-megamenu-primary .ekit-menu-nav-link { position: relative; /* importante para posicionar alias */ display: inline-flex; /* ancho dinámico */ align-items: center; justify-content: center; white-space: nowrap; /* evita saltos de línea */ padding: 0.5em 0.8em; transition: color 0.3s ease; } /* Contenedor de los textos (original + alias) */ #ekit-megamenu-primary .ekit-menu-nav-link .jarvis-text-wrapper { position: relative; display: inline-block; overflow: hidden; /* ocultar texto que se desliza */ line-height: 1.2em; text-align: center; } /* Texto original */ #ekit-megamenu-primary .ekit-menu-nav-link .jarvis-text { display: inline-block; white-space: nowrap; transition: transform 0.4s ease, opacity 0.4s ease; will-change: transform, opacity; } /* Alias */ #ekit-megamenu-primary .ekit-menu-nav-link .jarvis-text.alias { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 100%); /* empieza abajo y centrado horizontal */ opacity: 0; color: var(--hover-color, inherit); text-align: center; white-space: nowrap; } /* Animación hover */ #ekit-megamenu-primary .ekit-menu-nav-link:hover .jarvis-text.original { transform: translateY(-100%); opacity: 0; } #ekit-megamenu-primary .ekit-menu-nav-link:hover .jarvis-text.alias { transform: translate(-50%, -50%); /* centrado total */ opacity: 1; } /* icono de megamenú del item*/ .elementskit-navbar-nav > li > a .elementskit-submenu-indicator { display: none !important; }