.elementor-553 .elementor-element.elementor-element-6533745e:not(.elementor-motion-effects-element-type-background), .elementor-553 .elementor-element.elementor-element-6533745e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0E0202;}.elementor-553 .elementor-element.elementor-element-6533745e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-553 .elementor-element.elementor-element-6533745e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-553 .elementor-element.elementor-element-425827a1{width:var( --container-widget-width, 108.434% );max-width:108.434%;--container-widget-width:108.434%;--container-widget-flex-grow:0;}.elementor-bc-flex-widget .elementor-553 .elementor-element.elementor-element-20b8e8b7.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-553 .elementor-element.elementor-element-20b8e8b7.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-553 .elementor-element.elementor-element-20b8e8b7 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-553 .elementor-element.elementor-element-40cb3141 .elementor-nav-menu .elementor-item{font-family:"Aclonica", Sans-serif;font-weight:600;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-553 .elementor-element.elementor-element-40cb3141 .elementor-nav-menu .elementor-item{font-size:18px;}}@media(min-width:768px){.elementor-553 .elementor-element.elementor-element-35f33266{width:30.877%;}.elementor-553 .elementor-element.elementor-element-20b8e8b7{width:68.948%;}}/* Start custom CSS for nav-menu, class: .elementor-element-40cb3141 *//* ========================= Estilo esotérico con fuego Pegar en CSS global (Elementor Site Settings / Custom CSS) ========================= */ /* 1) Fuente esotérica (Google Fonts) */ @import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Cinzel+Decorative:wght@400;700&display=swap'); /* Selector objetivo: ajusta si tu menú usa otra clase. Incluye los .elementor-553 .elementor-element.elementor-element-40cb3141es más comunes de Elementor y temas. */ .esoteric-menu-target, .elementor-nav-menu a, .elementor-nav-menu .elementor-item, .elementor-menu a, .main-navigation a, nav a { /* tipografía y espaciado */ font-family: "Uncial Antiqua", "Cinzel Decorative", Georgia, serif; font-weight: 400; letter-spacing: 0.6px; font-size: 16px; /* ajustar según diseño */ text-transform: none; line-height: 1; display: inline-block; /* color base transparente (vamos a usar background-clip para el fuego) */ color: transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; /* gradiente base que será el "fuego" */ background-image: linear-gradient(90deg, #fffae6 0%, #ffd200 10%, #ff6b00 35%, #ff2b00 55%, #7f0000 100%); transition: transform .18s ease, text-shadow .18s ease; position: relative; padding: 2px 6px; cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2NCA2NCc+PHBhdGggZD0nTTMyIDIgTDM2IDE0IEw1MCAyOCBMNDQgMzQgTDMwIDIwIEwxNiAzNCBMMTAgMjggTDI0IDE0IEwyOCAyIFonIGZpbGw9J2JsYWNrJy8+PC9zdmc+"), auto; /* el fallback cursor "auto" se usará si el navegador no acepta data URI */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 0 0 3px rgba(255,180,60,0.9), 0 0 8px rgba(255,90,0,0.7), 0 6px 18px rgba(80,0,0,0.45); white-space: nowrap; } /* 2) Efecto de "llama" en pseudo-elemento para movimiento y brillo */ .elementor-nav-menu a::after, .elementor-menu a::after, nav a::after, .esoteric-menu-target::after { content: ""; pointer-events: none; position: absolute; left: 0; right: 0; bottom: -6px; height: 18px; z-index: -1; filter: blur(6px) saturate(120%); background: radial-gradient(ellipse at 30% 0%, rgba(255,200,80,0.85) 0%, rgba(255,120,20,0.65) 30%, rgba(200,40,10,0.45) 60%, rgba(80,0,0,0.0) 100%); transform-origin: 50% 100%; opacity: 0.95; animation: flame-sway 2.2s ease-in-out infinite; mix-blend-mode: screen; } /* 3) Hover / foco: intensifica las llamas y levanta el texto */ .elementor-nav-menu a:hover, .elementor-nav-menu .elementor-item:hover, .elementor-menu a:hover, nav a:hover, .esoteric-menu-target:hover { transform: translateY(-2px) scale(1.02); text-shadow: 0 0 6px rgba(255,220,110,0.95), 0 0 12px rgba(255,130,30,0.85), 0 10px 30px rgba(100,15,0,0.55); transition: transform .12s ease, text-shadow .12s ease; } /* 4) Pulsación / parpadeo sutil del texto para dar vida al fuego */ @keyframes flame-sway { 0% { transform: translateX(-4px) scaleX(1.00) translateY(0); opacity:0.95; } 25% { transform: translateX(2px) scaleX(1.05) translateY(-1px); opacity:1; } 50% { transform: translateX(4px) scaleX(0.98) translateY(0); opacity:0.92; } 75% { transform: translateX(-2px) scaleX(1.03) translateY(-2px); opacity:0.99; } 100% { transform: translateX(-4px) scaleX(1.00) translateY(0); opacity:0.95; } } /* 5) Efecto flicker/ruido en el propio texto (very subtle) */ @keyframes text-flicker { 0% { filter: brightness(1) saturate(1); } 20% { filter: brightness(1.05) saturate(1.2); } 40% { filter: brightness(0.98) saturate(0.95); } 60% { filter: brightness(1.06) saturate(1.12); } 80% { filter: brightness(0.99) saturate(1); } 100% { filter: brightness(1) saturate(1); } } .elementor-nav-menu a, .elementor-menu a, nav a, .esoteric-menu-target { animation: text-flicker 3.8s linear infinite; } /* 6) Accesibilidad: foco visible (outline) */ .elementor-nav-menu a:focus, .elementor-menu a:focus, nav a:focus, .esoteric-menu-target:focus { outline: 2px solid rgba(255,200,80,0.25); outline-offset: 4px; box-shadow: 0 0 18px rgba(255,120,20,0.12); } /* 7) Responsive: reduce tamaño en pantallas pequeñas */ @media (max-width: 767px) { .elementor-nav-menu a, .elementor-menu a, nav a, .esoteric-menu-target { font-size: 14px; } } /* ------------------------- Nota sobre el cursor-espada: El cursor usa un SVG embebido (data URI base64). Si deseas otra forma (espada más detallada o color diferente) puedo generarte otra versión. El hotspot se fijó en 16 16; si ves que está desplazado, cambia el hotspot al final del valor cursor: url(... ) X Y, auto; ------------------------- *//* End custom CSS */