.elementor-645 .elementor-element.elementor-element-de6da52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-645 .elementor-element.elementor-element-b621992{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-645 .elementor-element.elementor-element-9446043{text-align:center;}.elementor-645 .elementor-element.elementor-element-9446043 .elementor-heading-title{font-family:"ADLaM Display", Sans-serif;font-size:100px;}.elementor-645 .elementor-element.elementor-element-f4d28be{font-size:28px;}.elementor-645 .elementor-element.elementor-element-f4d28be a{transition-duration:1s;}.elementor-645 .elementor-element.elementor-element-4615665{--display:flex;border-style:none;--border-style:none;}.elementor-645 .elementor-element.elementor-element-dc0d094{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-645 .elementor-element.elementor-element-bbdd881{text-align:center;}.elementor-645 .elementor-element.elementor-element-bbdd881 .elementor-heading-title{font-family:"ADLaM Display", Sans-serif;font-size:100px;}.elementor-645 .elementor-element.elementor-element-3faa3c5{--display:flex;}.elementor-645 .elementor-element.elementor-element-3faa3c5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-645 .elementor-element.elementor-element-fe9187e .elementor-progress-bar{font-size:25px;}.elementor-645 .elementor-element.elementor-element-ddff517 .elementor-progress-bar{font-size:25px;}.elementor-645 .elementor-element.elementor-element-1d4dd17 .elementor-progress-bar{font-size:25px;}.elementor-645 .elementor-element.elementor-element-6662191{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-645 .elementor-element.elementor-element-2052482{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-645 .elementor-element.elementor-element-f511a70{text-align:center;}.elementor-645 .elementor-element.elementor-element-f511a70 .elementor-heading-title{font-family:"ADLaM Display", Sans-serif;font-size:100px;}.elementor-645 .elementor-element.elementor-element-3707d6f{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-645 .elementor-element.elementor-element-bf09e4d.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-645 .elementor-element.elementor-element-bf09e4d.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-645 .elementor-element.elementor-element-bf09e4d.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-bf09e4d .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-645 .elementor-element.elementor-element-bf09e4d .elementor-image-box-img img{transition-duration:0.3s;}.elementor-645 .elementor-element.elementor-element-b23cefd.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-645 .elementor-element.elementor-element-b23cefd.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-645 .elementor-element.elementor-element-b23cefd.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-b23cefd .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-645 .elementor-element.elementor-element-b23cefd .elementor-image-box-img img{transition-duration:0.3s;}.elementor-645 .elementor-element.elementor-element-7a264e5.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-645 .elementor-element.elementor-element-7a264e5.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-645 .elementor-element.elementor-element-7a264e5.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-7a264e5 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-645 .elementor-element.elementor-element-7a264e5 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-645 .elementor-element.elementor-element-ea8cb83.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-645 .elementor-element.elementor-element-ea8cb83.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-645 .elementor-element.elementor-element-ea8cb83.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-ea8cb83 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-645 .elementor-element.elementor-element-ea8cb83 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-645 .elementor-element.elementor-element-dcbc7d9.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-645 .elementor-element.elementor-element-dcbc7d9.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-645 .elementor-element.elementor-element-dcbc7d9.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-dcbc7d9 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-645 .elementor-element.elementor-element-dcbc7d9 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-645 .elementor-element.elementor-element-462a3a0.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-645 .elementor-element.elementor-element-462a3a0.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-645 .elementor-element.elementor-element-462a3a0.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-462a3a0 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-645 .elementor-element.elementor-element-462a3a0 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-645 .elementor-element.elementor-element-3a7b6c9{--display:flex;}@media(max-width:1024px){.elementor-645 .elementor-element.elementor-element-3707d6f{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-645 .elementor-element.elementor-element-3707d6f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-645 .elementor-element.elementor-element-bf09e4d .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-b23cefd .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-7a264e5 .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-ea8cb83 .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-dcbc7d9 .elementor-image-box-img{margin-bottom:15px;}.elementor-645 .elementor-element.elementor-element-462a3a0 .elementor-image-box-img{margin-bottom:15px;}}/* Start custom CSS for heading, class: .elementor-element-9446043 *//* Estilos generales para la demostración */ body { background-color: #0a0a14; /* Un fondo oscuro para que el neón resalte */ font-family: 'Orbitron', sans-serif; /* Eliminamos flex para simular el entorno de Elementor */ min-height: 100vh; margin: 0; color: #fff; text-align: center; overflow-x: hidden; /* Previene el scroll horizontal */ } .container { padding: 2rem; /* Simulamos un contenedor de ancho limitado como en Elementor */ max-width: 900px; margin: 40px auto; border: 1px dashed #444; } .instructions { font-family: sans-serif; max-width: 600px; margin-top: 40px; color: #999; font-size: 14px; line-height: 1.6; display: inline-block; } .instructions code { background-color: #222; padding: 2px 5px; border-radius: 4px; color: #ff00ff; } /* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Encabezado en Elementor. * 2. En la pestaña "Avanzado", busca la sección "CSS Personalizado". * 3. Pega todo el código que está debajo de esta línea. * 4. En la misma pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-heading-wrapper * (¡OJO! Hemos cambiado el nombre de la clase para aplicarla al contenedor). * * NOTA: La fuente 'Orbitron' se importa en este HTML. Para usarla en tu sitio, * puedes agregarla usando un plugin como "Custom Fonts" o en las opciones de tu tema. */ /* --- INICIA EL CAMBIO PARA FORZAR ANCHO COMPLETO SIN ROMPER EL LAYOUT --- */ /* Apuntamos al contenedor del widget para anular el max-width de Elementor */ .cyber-heading-wrapper .elementor-widget-container { max-width: none !important; } /* --- FIN DEL CAMBIO --- */ .cyber-heading { /* Usamos la fuente importada */ font-family: 'Orbitron', sans-serif; font-weight: 700; /* Un grosor de fuente audaz */ font-size: 5rem; /* Tamaño de fuente - ajústalo a tu gusto */ color: #fff; position: relative; /* Necesario para la animación */ text-align: center; /* Asegura que el texto permanezca centrado */ width: 100%; /* Ocupa el 100% del contenedor ahora expandido */ /* El efecto NEÓN se crea con múltiples capas de text-shadow */ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, /* Color principal del neón (magenta) */ 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 55px #ff00ff, 0 0 75px #ff00ff; /* Aplicamos la animación principal */ animation: flicker 3s infinite alternate; } /* Creamos las líneas de "glitch" con pseudo-elementos */ .cyber-heading::before, .cyber-heading::after { content: attr(data-text); /* Copiamos el texto del encabezado */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a14; /* Debe ser el mismo color de fondo de tu sección */ overflow: hidden; } /* Animación para la primera capa de glitch */ .cyber-heading::before { left: 2px; text-shadow: -2px 0 #00ffff; /* Color secundario del glitch (cyan) */ animation: glitch-1 4s infinite linear alternate-reverse; } /* Animación para la segunda capa de glitch */ .cyber-heading::after { left: -2px; text-shadow: -2px 0 #ff00ff, 2px 2px #00ffff; /* Mezcla de colores */ animation: glitch-2 3s infinite linear alternate-reverse; } /* --- KEYFRAMES (La magia de la animación) --- */ /* Animación de parpadeo (flicker) para el texto principal */ @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #ff00ff, 0 0 80px #ff00ff, 0 0 90px #ff00ff, 0 0 100px #ff00ff, 0 0 150px #ff00ff; } 20%, 24%, 55% { text-shadow: none; } } /* Animación para el movimiento de la capa de glitch 1 */ @keyframes glitch-1 { 0% { clip-path: inset(45% 0 56% 0); } 5% { clip-path: inset(55% 0 15% 0); } 10% { clip-path: inset(30% 0 50% 0); } 15% { clip-path: inset(50% 0 40% 0); } 20% { clip-path: inset(20% 0 70% 0); } 25% { clip-path: inset(60% 0 30% 0); } 30% { clip-path: inset(80% 0 10% 0); } 35% { clip-path: inset(40% 0 45% 0); } 40% { clip-path: inset(25% 0 65% 0); } 45% { clip-path: inset(70% 0 20% 0); } 50% { clip-path: inset(40% 0 30% 0); } 55% { clip-path: inset(10% 0 80% 0); } 60% { clip-path: inset(65% 0 25% 0); } 65% { clip-path: inset(35% 0 55% 0); } 70% { clip-path: inset(20% 0 70% 0); } 75% { clip-path: inset(55% 0 35% 0); } 80% { clip-path: inset(90% 0 5% 0); } 85% { clip-path: inset(30% 0 60% 0); } 90% { clip-path: inset(60% 0 30% 0); } 95% { clip-path: inset(40% 0 50% 0); } 100% { clip-path: inset(15% 0 75% 0); } } /* Animación para el movimiento de la capa de glitch 2 */ @keyframes glitch-2 { 0% { clip-path: inset(80% 0 10% 0); } 5% { clip-path: inset(40% 0 45% 0); } 10% { clip-path: inset(25% 0 65% 0); } 15% { clip-path: inset(70% 0 20% 0); } 20% { clip-path: inset(40% 0 30% 0); } 25% { clip-path: inset(10% 0 80% 0); } 30% { clip-path: inset(65% 0 25% 0); } 35% { clip-path: inset(35% 0 55% 0); } 40% { clip-path: inset(20% 0 70% 0); } 45% { clip-path: inset(55% 0 35% 0); } 50% { clip-path: inset(90% 0 5% 0); } 55% { clip-path: inset(30% 0 60% 0); } 60% { clip-path: inset(60% 0 30% 0); } 65% { clip-path: inset(40% 0 50% 0); } 70% { clip-path: inset(15% 0 75% 0); } 75% { clip-path: inset(45% 0 56% 0); } 80% { clip-path: inset(55% 0 15% 0); } 85% { clip-path: inset(30% 0 50% 0); } 90% { clip-path: inset(50% 0 40% 0); } 95% { clip-path: inset(20% 0 70% 0); } 100% { clip-path: inset(60% 0 30% 0); } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-f4d28be *//* --- INICIA EL CÓDIGO MEJORADO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Editor de Texto (o similar) en Elementor. * 2. En la pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-paragraph-enhanced * 3. En la sección de CSS Personalizado de la página o del sitio, pega el siguiente código. */ .cyber-paragraph-enhanced { font-size: 1.5rem; /* Tamaño de fuente, ajústalo a tu gusto */ line-height: 1.7; text-align: center; position: relative; /* Necesario para posicionar las burbujas (pseudo-elementos) */ /* --- ESTILOS DE NEÓN MEJORADOS --- */ color: #fff; /* Texto en blanco brillante */ /* Animación para el parpadeo del neón */ animation: neon-flicker 2s infinite alternate; /* Animación para el movimiento líquido */ animation: liquid-move 10s infinite ease-in-out, neon-flicker 2s infinite alternate; } /* Keyframes para el parpadeo del neón */ @keyframes neon-flicker { 0%, 100% { text-shadow: 0 0 3px #fff, 0 0 8px #00ffff, 0 0 15px #00ffff; } 50% { text-shadow: 0 0 4px #fff, 0 0 10px #00d9d9, 0 0 20px #00d9d9; } } /* Keyframes para el movimiento "líquido" del texto */ @keyframes liquid-move { 0%, 100% { transform: skew(0deg, 0deg); } 25% { transform: skew(1.5deg, 1deg); } 50% { transform: skew(-1.5deg, -1deg); } 75% { transform: skew(1deg, -1.5deg); } } /* --- EFECTO DE BURBUJAS --- */ .cyber-paragraph-enhanced::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100px; /* Ancho inicial de la burbuja */ height: 100px; /* Alto inicial de la burbuja */ opacity: 0; /* Usamos box-shadow para crear múltiples "burbujas" con un solo pseudo-elemento */ box-shadow: /* Burbuja 1 (cian) */ -120px 100px 30px 0px #00ffff, /* Burbuja 2 (magenta) */ 120px 150px 25px 0px #ff00ff, /* Burbuja 3 (cian pequeña) */ 0px 200px 20px 0px #00ffff; border-radius: 50%; /* Para que sean círculos */ /* Animación para que las burbujas suban y se desvanezcan */ animation: bubbles-rise 12s infinite linear; z-index: -1; /* Las ponemos detrás del texto */ } /* Keyframes para la animación de las burbujas */ @keyframes bubbles-rise { 0% { transform: translateY(100px) scale(0.8); opacity: 0; } 10%, 90% { opacity: 0.1; /* Hacemos que la burbuja sea visible durante la mayor parte de la animación */ } 100% { transform: translateY(-200px) scale(1.2); opacity: 0; } } /* --- FIN DEL CÓDIGO PARA ELEMENTOR --- *//* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-bbdd881 *//* Estilos generales para la demostración */ body { background-color: #0a0a14; /* Un fondo oscuro para que el neón resalte */ font-family: 'Orbitron', sans-serif; /* Eliminamos flex para simular el entorno de Elementor */ min-height: 100vh; margin: 0; color: #fff; text-align: center; overflow-x: hidden; /* Previene el scroll horizontal */ } .container { padding: 2rem; /* Simulamos un contenedor de ancho limitado como en Elementor */ max-width: 900px; margin: 40px auto; border: 1px dashed #444; } .instructions { font-family: sans-serif; max-width: 600px; margin-top: 40px; color: #999; font-size: 14px; line-height: 1.6; display: inline-block; } .instructions code { background-color: #222; padding: 2px 5px; border-radius: 4px; color: #ff00ff; } /* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Encabezado en Elementor. * 2. En la pestaña "Avanzado", busca la sección "CSS Personalizado". * 3. Pega todo el código que está debajo de esta línea. * 4. En la misma pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-heading-wrapper * (¡OJO! Hemos cambiado el nombre de la clase para aplicarla al contenedor). * * NOTA: La fuente 'Orbitron' se importa en este HTML. Para usarla en tu sitio, * puedes agregarla usando un plugin como "Custom Fonts" o en las opciones de tu tema. */ /* --- INICIA EL CAMBIO PARA FORZAR ANCHO COMPLETO SIN ROMPER EL LAYOUT --- */ /* Apuntamos al contenedor del widget para anular el max-width de Elementor */ .cyber-heading-wrapper .elementor-widget-container { max-width: none !important; } /* --- FIN DEL CAMBIO --- */ .cyber-heading { /* Usamos la fuente importada */ font-family: 'Orbitron', sans-serif; font-weight: 700; /* Un grosor de fuente audaz */ font-size: 5rem; /* Tamaño de fuente - ajústalo a tu gusto */ color: #fff; position: relative; /* Necesario para la animación */ text-align: center; /* Asegura que el texto permanezca centrado */ width: 100%; /* Ocupa el 100% del contenedor ahora expandido */ /* El efecto NEÓN se crea con múltiples capas de text-shadow */ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, /* Color principal del neón (magenta) */ 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 55px #ff00ff, 0 0 75px #ff00ff; /* Aplicamos la animación principal */ animation: flicker 3s infinite alternate; } /* Creamos las líneas de "glitch" con pseudo-elementos */ .cyber-heading::before, .cyber-heading::after { content: attr(data-text); /* Copiamos el texto del encabezado */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a14; /* Debe ser el mismo color de fondo de tu sección */ overflow: hidden; } /* Animación para la primera capa de glitch */ .cyber-heading::before { left: 2px; text-shadow: -2px 0 #00ffff; /* Color secundario del glitch (cyan) */ animation: glitch-1 4s infinite linear alternate-reverse; } /* Animación para la segunda capa de glitch */ .cyber-heading::after { left: -2px; text-shadow: -2px 0 #ff00ff, 2px 2px #00ffff; /* Mezcla de colores */ animation: glitch-2 3s infinite linear alternate-reverse; } /* --- KEYFRAMES (La magia de la animación) --- */ /* Animación de parpadeo (flicker) para el texto principal */ @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #ff00ff, 0 0 80px #ff00ff, 0 0 90px #ff00ff, 0 0 100px #ff00ff, 0 0 150px #ff00ff; } 20%, 24%, 55% { text-shadow: none; } } /* Animación para el movimiento de la capa de glitch 1 */ @keyframes glitch-1 { 0% { clip-path: inset(45% 0 56% 0); } 5% { clip-path: inset(55% 0 15% 0); } 10% { clip-path: inset(30% 0 50% 0); } 15% { clip-path: inset(50% 0 40% 0); } 20% { clip-path: inset(20% 0 70% 0); } 25% { clip-path: inset(60% 0 30% 0); } 30% { clip-path: inset(80% 0 10% 0); } 35% { clip-path: inset(40% 0 45% 0); } 40% { clip-path: inset(25% 0 65% 0); } 45% { clip-path: inset(70% 0 20% 0); } 50% { clip-path: inset(40% 0 30% 0); } 55% { clip-path: inset(10% 0 80% 0); } 60% { clip-path: inset(65% 0 25% 0); } 65% { clip-path: inset(35% 0 55% 0); } 70% { clip-path: inset(20% 0 70% 0); } 75% { clip-path: inset(55% 0 35% 0); } 80% { clip-path: inset(90% 0 5% 0); } 85% { clip-path: inset(30% 0 60% 0); } 90% { clip-path: inset(60% 0 30% 0); } 95% { clip-path: inset(40% 0 50% 0); } 100% { clip-path: inset(15% 0 75% 0); } } /* Animación para el movimiento de la capa de glitch 2 */ @keyframes glitch-2 { 0% { clip-path: inset(80% 0 10% 0); } 5% { clip-path: inset(40% 0 45% 0); } 10% { clip-path: inset(25% 0 65% 0); } 15% { clip-path: inset(70% 0 20% 0); } 20% { clip-path: inset(40% 0 30% 0); } 25% { clip-path: inset(10% 0 80% 0); } 30% { clip-path: inset(65% 0 25% 0); } 35% { clip-path: inset(35% 0 55% 0); } 40% { clip-path: inset(20% 0 70% 0); } 45% { clip-path: inset(55% 0 35% 0); } 50% { clip-path: inset(90% 0 5% 0); } 55% { clip-path: inset(30% 0 60% 0); } 60% { clip-path: inset(60% 0 30% 0); } 65% { clip-path: inset(40% 0 50% 0); } 70% { clip-path: inset(15% 0 75% 0); } 75% { clip-path: inset(45% 0 56% 0); } 80% { clip-path: inset(55% 0 15% 0); } 85% { clip-path: inset(30% 0 50% 0); } 90% { clip-path: inset(50% 0 40% 0); } 95% { clip-path: inset(20% 0 70% 0); } 100% { clip-path: inset(60% 0 30% 0); } }/* End custom CSS */ /* Start custom CSS for progress, class: .elementor-element-1d4dd17 *//* * CSS Personalizado para Barras de Progreso de Elementor * Estilo: Glassmorphism Neón con Líquido Burbujeante y Texto Flotante * Creado por: Gemini */ /* --- CONTENEDOR PRINCIPAL (EL CRISTAL) --- */ .elementor-widget-progress .elementor-progress-wrapper { height: 45px; /* Un poco más de altura para el efecto */ border-radius: 50px; /* Mantiene la forma de cápsula */ overflow: hidden; /* Esencial para que el blur no se salga */ position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Para compatibilidad con Safari */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); } /* --- BARRA INTERIOR (EL LÍQUIDO) --- */ .elementor-widget-progress .elementor-progress-bar { border-radius: 0; height: 100%; position: relative; overflow: hidden; transition: width 2.5s cubic-bezier(0.65, 0, 0.35, 1) !important; /* --- EFECTO DE BURBUJAS --- */ background-image: radial-gradient(circle at 15% 50%, rgba(255,255,255,0.3) 3%, transparent 3.5%), radial-gradient(circle at 80% 90%, rgba(255,255,255,0.3) 2%, transparent 2.5%), radial-gradient(circle at 35% 20%, rgba(255,255,255,0.3) 4%, transparent 4.5%), radial-gradient(circle at 60% 40%, rgba(255,255,255,0.3) 2.5%, transparent 3%), radial-gradient(circle at 20% 85%, rgba(255,255,255,0.3) 3%, transparent 3.5%), radial-gradient(circle at 90% 10%, rgba(255,255,255,0.3) 4%, transparent 4.5%); background-size: 100% 200%; animation: bubbles-animation 8s linear infinite; } /* --- ANIMACIÓN DE LAS BURBUJAS --- */ @keyframes bubbles-animation { 0% { background-position: 0 0; } 100% { background-position: 0 -200%; } } /* --- EFECTO DE ONDAS LÍQUIDAS (LA SUPERFICIE) --- */ .elementor-widget-progress .elementor-progress-bar::before, .elementor-widget-progress .elementor-progress-bar::after { content: ""; position: absolute; width: 200%; height: 120px; top: -80px; left: -50%; border-radius: 45%; animation: wave-animation 5s linear infinite; z-index: 2; } .elementor-widget-progress .elementor-progress-bar::before { background: rgba(255, 255, 255, 0.25); animation-duration: 6s; } .elementor-widget-progress .elementor-progress-bar::after { background: rgba(255, 255, 255, 0.15); animation-duration: 8s; } /* --- ANIMACIÓN DE LAS ONDAS --- */ @keyframes wave-animation { 0% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(25%) rotate(0deg); } } /* --- TEXTO DEL PORCENTAJE (FLOTANDO EN EL LÍQUIDO) --- */ .elementor-widget-progress .elementor-progress-percentage { color: #fff; font-weight: bold; font-size: 16px; position: absolute; right: 15px; top: 50%; animation: float-text-animation 4s ease-in-out infinite; z-index: 10; transition: transform 0.3s ease, text-shadow 0.3s ease; /* Transición suave para el hover */ } /* --- ANIMACIÓN FLOTANTE PARA EL TEXTO --- */ @keyframes float-text-animation { 0% { transform: translateY(-50%); } 50% { transform: translateY(-40%); } 100% { transform: translateY(-50%); } } /* --- TÍTULO DE LA HABILIDAD --- */ .elementor-widget-progress .elementor-title { color: #f0f0f0; text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 10; transition: transform 0.3s ease, text-shadow 0.3s ease; /* Transición suave para el hover */ } /* * =================================================================== * --- EFECTO HOVER PARA LEGIBILIDAD --- * Aumenta el brillo y el tamaño del texto al pasar el mouse * sobre CUALQUIER parte de la barra de progreso. * =================================================================== */ .elementor-widget-progress:hover .elementor-title, .elementor-widget-progress:hover .elementor-progress-percentage { transform: translateY(-50%) scale(1.1); /* Agrandamos el texto */ text-shadow: 0 0 8px rgba(0, 0, 0, 0.9); /* Sombra oscura más fuerte para contraste */ } /* Pausamos la animación flotante en hover para que no interfiera con el zoom */ .elementor-widget-progress:hover .elementor-progress-percentage { animation-play-state: paused; } /* * =================================================================== * --- CONFIGURACIÓN DE COLORES NEÓN --- * Instrucciones: En Elementor, selecciona tu widget de Barra de Progreso, * ve a la pestaña "Avanzado" y en el campo "Clases CSS" agrega UNA * de las siguientes clases (sin el punto): * .neon-azul * .neon-dorado * .neon-rojo * =================================================================== */ /* --- COLOR NEÓN AZUL --- */ .neon-azul .elementor-progress-bar { background-color: #00aaff; box-shadow: 0 0 5px #00aaff, 0 0 10px #00aaff, 0 0 15px #00aaff, 0 0 20px #00aaff; } .neon-azul .elementor-progress-percentage { text-shadow: 0 0 3px #fff, 0 0 5px #00aaff; } /* --- COLOR NEÓN DORADO --- */ .neon-dorado .elementor-progress-bar { background-color: #FFD700; box-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700, 0 0 15px #FFD700, 0 0 20px #FFD700; } .neon-dorado .elementor-progress-percentage { text-shadow: 0 0 3px #fff, 0 0 5px #FFD700; } /* --- COLOR NEÓN ROJO --- */ .neon-rojo .elementor-progress-bar { background-color: #ff1f1f; box-shadow: 0 0 5px #ff1f1f, 0 0 10px #ff1f1f, 0 0 15px #ff1f1f, 0 0 20px #ff1f1f; } .neon-rojo .elementor-progress-percentage { text-shadow: 0 0 3px #fff, 0 0 5px #ff1f1f; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-f511a70 *//* Estilos generales para la demostración */ body { background-color: #0a0a14; /* Un fondo oscuro para que el neón resalte */ font-family: 'Orbitron', sans-serif; /* Eliminamos flex para simular el entorno de Elementor */ min-height: 100vh; margin: 0; color: #fff; text-align: center; overflow-x: hidden; /* Previene el scroll horizontal */ } .container { padding: 2rem; /* Simulamos un contenedor de ancho limitado como en Elementor */ max-width: 900px; margin: 40px auto; border: 1px dashed #444; } .instructions { font-family: sans-serif; max-width: 600px; margin-top: 40px; color: #999; font-size: 14px; line-height: 1.6; display: inline-block; } .instructions code { background-color: #222; padding: 2px 5px; border-radius: 4px; color: #ff00ff; } /* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Encabezado en Elementor. * 2. En la pestaña "Avanzado", busca la sección "CSS Personalizado". * 3. Pega todo el código que está debajo de esta línea. * 4. En la misma pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-heading-wrapper * (¡OJO! Hemos cambiado el nombre de la clase para aplicarla al contenedor). * * NOTA: La fuente 'Orbitron' se importa en este HTML. Para usarla en tu sitio, * puedes agregarla usando un plugin como "Custom Fonts" o en las opciones de tu tema. */ /* --- INICIA EL CAMBIO PARA FORZAR ANCHO COMPLETO SIN ROMPER EL LAYOUT --- */ /* Apuntamos al contenedor del widget para anular el max-width de Elementor */ .cyber-heading-wrapper .elementor-widget-container { max-width: none !important; } /* --- FIN DEL CAMBIO --- */ .cyber-heading { /* Usamos la fuente importada */ font-family: 'Orbitron', sans-serif; font-weight: 700; /* Un grosor de fuente audaz */ font-size: 5rem; /* Tamaño de fuente - ajústalo a tu gusto */ color: #fff; position: relative; /* Necesario para la animación */ text-align: center; /* Asegura que el texto permanezca centrado */ width: 100%; /* Ocupa el 100% del contenedor ahora expandido */ /* El efecto NEÓN se crea con múltiples capas de text-shadow */ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00ff, /* Color principal del neón (magenta) */ 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 55px #ff00ff, 0 0 75px #ff00ff; /* Aplicamos la animación principal */ animation: flicker 3s infinite alternate; } /* Creamos las líneas de "glitch" con pseudo-elementos */ .cyber-heading::before, .cyber-heading::after { content: attr(data-text); /* Copiamos el texto del encabezado */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a14; /* Debe ser el mismo color de fondo de tu sección */ overflow: hidden; } /* Animación para la primera capa de glitch */ .cyber-heading::before { left: 2px; text-shadow: -2px 0 #00ffff; /* Color secundario del glitch (cyan) */ animation: glitch-1 4s infinite linear alternate-reverse; } /* Animación para la segunda capa de glitch */ .cyber-heading::after { left: -2px; text-shadow: -2px 0 #ff00ff, 2px 2px #00ffff; /* Mezcla de colores */ animation: glitch-2 3s infinite linear alternate-reverse; } /* --- KEYFRAMES (La magia de la animación) --- */ /* Animación de parpadeo (flicker) para el texto principal */ @keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #ff00ff, 0 0 80px #ff00ff, 0 0 90px #ff00ff, 0 0 100px #ff00ff, 0 0 150px #ff00ff; } 20%, 24%, 55% { text-shadow: none; } } /* Animación para el movimiento de la capa de glitch 1 */ @keyframes glitch-1 { 0% { clip-path: inset(45% 0 56% 0); } 5% { clip-path: inset(55% 0 15% 0); } 10% { clip-path: inset(30% 0 50% 0); } 15% { clip-path: inset(50% 0 40% 0); } 20% { clip-path: inset(20% 0 70% 0); } 25% { clip-path: inset(60% 0 30% 0); } 30% { clip-path: inset(80% 0 10% 0); } 35% { clip-path: inset(40% 0 45% 0); } 40% { clip-path: inset(25% 0 65% 0); } 45% { clip-path: inset(70% 0 20% 0); } 50% { clip-path: inset(40% 0 30% 0); } 55% { clip-path: inset(10% 0 80% 0); } 60% { clip-path: inset(65% 0 25% 0); } 65% { clip-path: inset(35% 0 55% 0); } 70% { clip-path: inset(20% 0 70% 0); } 75% { clip-path: inset(55% 0 35% 0); } 80% { clip-path: inset(90% 0 5% 0); } 85% { clip-path: inset(30% 0 60% 0); } 90% { clip-path: inset(60% 0 30% 0); } 95% { clip-path: inset(40% 0 50% 0); } 100% { clip-path: inset(15% 0 75% 0); } } /* Animación para el movimiento de la capa de glitch 2 */ @keyframes glitch-2 { 0% { clip-path: inset(80% 0 10% 0); } 5% { clip-path: inset(40% 0 45% 0); } 10% { clip-path: inset(25% 0 65% 0); } 15% { clip-path: inset(70% 0 20% 0); } 20% { clip-path: inset(40% 0 30% 0); } 25% { clip-path: inset(10% 0 80% 0); } 30% { clip-path: inset(65% 0 25% 0); } 35% { clip-path: inset(35% 0 55% 0); } 40% { clip-path: inset(20% 0 70% 0); } 45% { clip-path: inset(55% 0 35% 0); } 50% { clip-path: inset(90% 0 5% 0); } 55% { clip-path: inset(30% 0 60% 0); } 60% { clip-path: inset(60% 0 30% 0); } 65% { clip-path: inset(40% 0 50% 0); } 70% { clip-path: inset(15% 0 75% 0); } 75% { clip-path: inset(45% 0 56% 0); } 80% { clip-path: inset(55% 0 15% 0); } 85% { clip-path: inset(30% 0 50% 0); } 90% { clip-path: inset(50% 0 40% 0); } 95% { clip-path: inset(20% 0 70% 0); } 100% { clip-path: inset(60% 0 30% 0); } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-bf09e4d *//* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Editor de Texto (o párrafo) en Elementor. * 2. En la pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-paragraph * 3. En la sección de CSS Personalizado de la página o del sitio, pega el siguiente código. */ .cyber-paragraph { font-size: 1.2rem; /* Tamaño de fuente, ajústalo a tu gusto */ line-height: 1.7; /* Se eliminó max-width para que Elementor controle el ancho */ text-align: center; /* Centramos el texto para que coincida con la imagen */ /* --- ESTILOS DE NEÓN APLICADOS PERMANENTEMENTE --- */ color: #fff; /* Texto en blanco brillante */ /* Efecto de neón azulado/cyan */ text-shadow: 0 0 3px #fff, 0 0 8px #00ffff, 0 0 15px #00ffff; /* Se eliminó 'transform: scale(1.02)' para evitar problemas de layout */ } /* --- FIN DEL CÓDIGO PARA ELEMENTOR --- *//* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-b23cefd *//* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Editor de Texto (o párrafo) en Elementor. * 2. En la pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-paragraph * 3. En la sección de CSS Personalizado de la página o del sitio, pega el siguiente código. */ .cyber-paragraph { font-size: 1.2rem; /* Tamaño de fuente, ajústalo a tu gusto */ line-height: 1.7; /* Se eliminó max-width para que Elementor controle el ancho */ text-align: center; /* Centramos el texto para que coincida con la imagen */ /* --- ESTILOS DE NEÓN APLICADOS PERMANENTEMENTE --- */ color: #fff; /* Texto en blanco brillante */ /* Efecto de neón azulado/cyan */ text-shadow: 0 0 3px #fff, 0 0 8px #00ffff, 0 0 15px #00ffff; /* Se eliminó 'transform: scale(1.02)' para evitar problemas de layout */ } /* --- FIN DEL CÓDIGO PARA ELEMENTOR --- *//* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-7a264e5 *//* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Editor de Texto (o párrafo) en Elementor. * 2. En la pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-paragraph * 3. En la sección de CSS Personalizado de la página o del sitio, pega el siguiente código. */ .cyber-paragraph { font-size: 1.2rem; /* Tamaño de fuente, ajústalo a tu gusto */ line-height: 1.7; /* Se eliminó max-width para que Elementor controle el ancho */ text-align: center; /* Centramos el texto para que coincida con la imagen */ /* --- ESTILOS DE NEÓN APLICADOS PERMANENTEMENTE --- */ color: #fff; /* Texto en blanco brillante */ /* Efecto de neón azulado/cyan */ text-shadow: 0 0 3px #fff, 0 0 8px #00ffff, 0 0 15px #00ffff; /* Se eliminó 'transform: scale(1.02)' para evitar problemas de layout */ } /* --- FIN DEL CÓDIGO PARA ELEMENTOR --- *//* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-ea8cb83 *//* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Editor de Texto (o párrafo) en Elementor. * 2. En la pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-paragraph * 3. En la sección de CSS Personalizado de la página o del sitio, pega el siguiente código. */ .cyber-paragraph { font-size: 1.2rem; /* Tamaño de fuente, ajústalo a tu gusto */ line-height: 1.7; /* Se eliminó max-width para que Elementor controle el ancho */ text-align: center; /* Centramos el texto para que coincida con la imagen */ /* --- ESTILOS DE NEÓN APLICADOS PERMANENTEMENTE --- */ color: #fff; /* Texto en blanco brillante */ /* Efecto de neón azulado/cyan */ text-shadow: 0 0 3px #fff, 0 0 8px #00ffff, 0 0 15px #00ffff; /* Se eliminó 'transform: scale(1.02)' para evitar problemas de layout */ } /* --- FIN DEL CÓDIGO PARA ELEMENTOR --- *//* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-dcbc7d9 *//* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Editor de Texto (o párrafo) en Elementor. * 2. En la pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-paragraph * 3. En la sección de CSS Personalizado de la página o del sitio, pega el siguiente código. */ .cyber-paragraph { font-size: 1.2rem; /* Tamaño de fuente, ajústalo a tu gusto */ line-height: 1.7; /* Se eliminó max-width para que Elementor controle el ancho */ text-align: center; /* Centramos el texto para que coincida con la imagen */ /* --- ESTILOS DE NEÓN APLICADOS PERMANENTEMENTE --- */ color: #fff; /* Texto en blanco brillante */ /* Efecto de neón azulado/cyan */ text-shadow: 0 0 3px #fff, 0 0 8px #00ffff, 0 0 15px #00ffff; /* Se eliminó 'transform: scale(1.02)' para evitar problemas de layout */ } /* --- FIN DEL CÓDIGO PARA ELEMENTOR --- *//* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-462a3a0 *//* --- INICIA EL CÓDIGO PARA ELEMENTOR --- */ /* * INSTRUCCIONES: * 1. Ve al widget de Editor de Texto (o párrafo) en Elementor. * 2. En la pestaña "Avanzado", en el campo "Clases CSS", escribe: cyber-paragraph * 3. En la sección de CSS Personalizado de la página o del sitio, pega el siguiente código. */ .cyber-paragraph { font-size: 1.2rem; /* Tamaño de fuente, ajústalo a tu gusto */ line-height: 1.7; /* Se eliminó max-width para que Elementor controle el ancho */ text-align: center; /* Centramos el texto para que coincida con la imagen */ /* --- ESTILOS DE NEÓN APLICADOS PERMANENTEMENTE --- */ color: #fff; /* Texto en blanco brillante */ /* Efecto de neón azulado/cyan */ text-shadow: 0 0 3px #fff, 0 0 8px #00ffff, 0 0 15px #00ffff; /* Se eliminó 'transform: scale(1.02)' para evitar problemas de layout */ } /* --- FIN DEL CÓDIGO PARA ELEMENTOR --- *//* End custom CSS */