.elementor-3 .elementor-element.elementor-element-24306963{--display:flex;--min-height:100vh;--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;--margin-top:-109px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:150px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3 .elementor-element.elementor-element-127f8543{--spacer-size:50px;}.elementor-3 .elementor-element.elementor-element-7e7a1cd9{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-3 .elementor-element.elementor-element-7d641ba7 .elementor-heading-title{font-family:"Satoshi", Sans-serif;font-size:40px;font-weight:600;color:var( --e-global-color-495d27d );}.elementor-3 .elementor-element.elementor-element-1ea223c4{text-align:justify;font-family:"Satoshi", Sans-serif;font-size:18px;color:var( --e-global-color-a567df4 );}.elementor-3 .elementor-element.elementor-element-1775ddf9{text-align:justify;font-family:"Satoshi", Sans-serif;font-size:18px;color:var( --e-global-color-a567df4 );}.elementor-3 .elementor-element.elementor-element-5f9ebf64{text-align:justify;font-family:"Satoshi", Sans-serif;font-size:18px;color:var( --e-global-color-a567df4 );}.elementor-3 .elementor-element.elementor-element-26f391f{--spacer-size:100px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-3 .elementor-element.elementor-element-24306963{--content-width:1600px;}}@media(max-width:1366px) and (min-width:768px){.elementor-3 .elementor-element.elementor-element-24306963{--content-width:1600px;}.elementor-3 .elementor-element.elementor-element-7e7a1cd9{--width:950px;}}@media(max-width:1024px) and (min-width:768px){.elementor-3 .elementor-element.elementor-element-7e7a1cd9{--width:950px;}}@media(max-width:1366px){.elementor-3 .elementor-element.elementor-element-24306963{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:150px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}}@media(max-width:1024px){.elementor-3 .elementor-element.elementor-element-24306963{--padding-top:150px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}}@media(max-width:767px){.elementor-3 .elementor-element.elementor-element-24306963{--margin-top:-65px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-3 .elementor-element.elementor-element-7e7a1cd9{--width:100%;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-3 .elementor-element.elementor-element-7d641ba7 .elementor-heading-title{font-size:20px;}.elementor-3 .elementor-element.elementor-element-1ea223c4{font-size:14px;}.elementor-3 .elementor-element.elementor-element-1775ddf9{font-size:14px;}.elementor-3 .elementor-element.elementor-element-5f9ebf64{font-size:14px;}}/* Start custom CSS for container, class: .elementor-element-7e7a1cd9 *//* --- Variables de Color (puedes personalizarlas) --- */
:root {
    --luz-dinamica: rgba(0, 27, 255, 0.35);
    --fondo-cristal: rgba(10, 15, 40, 0.4);
    --borde-cristal: rgba(0, 27, 255, 0.4);
    --sombra-cristal: rgba(0, 0, 0, 0.2);
    --brillo-interno: rgba(0, 27, 255, 0.15);
}

/* --- Estilos para el efecto de Cristal --- */
.glass-effect-elementor {
    /* Posicionamiento y contención */
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;

    /* El efecto Glassmorphism */
    background: var(--fondo-cristal);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%); /* Para Safari */
    
    /* Estilos visuales */
    border: 1px solid var(--borde-cristal);
    box-shadow: 0 8px 32px 0 var(--sombra-cristal);
    
    /* Asegúrate de que el border-radius de Elementor se respete */
    /* Si no funciona, puedes forzarlo aquí con: border-radius: 24px !important; */
}

/* --- Pseudo-elementos para los detalles realistas --- */
.glass-effect-elementor::before,
.glass-effect-elementor::after {
    content: '';
    position: absolute;
    border-radius: inherit; /* Hereda el border-radius del contenedor */
    z-index: -1;
}

/* Efecto de luz dinámico que sigue al ratón */
.glass-effect-elementor::before {
    left: var(--mouse-x);
    top: var(--mouse-y);
    width: 250px;
    height: 250px;
    background-image: radial-gradient(circle, var(--luz-dinamica) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-out;
    opacity: 0;
}

/* Brillo interno y textura de ruido */
.glass-effect-elementor::after {
    inset: 0;
    box-shadow: inset 0 2px 10px 0 var(--brillo-interno);
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%" height="100%" filter="url(%23noise)"/%3E%3C/svg%3E');
    background-size: 100px;
    opacity: 0.03;
    z-index: -2;
}

/* Muestra la luz cuando el ratón está sobre el elemento */
.glass-effect-elementor:hover::before {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-24306963 *//* Animated Gradient Background Properties */
@property --g1-1-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 20%;
}
@property --g1-1-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 80%;
}
@property --g1-2-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 80%;
}
@property --g1-2-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 20%;
}

/* Animated Gradient Background Keyframes */
@keyframes g-1 {
    25% {
        --g1-1-x-position: 15%;
        --g1-1-y-position: 15%;
        --g1-2-x-position: 85%;
        --g1-2-y-position: 80%;
    }
    50% {
        --g1-1-x-position: 80%;
        --g1-1-y-position: 15%;
        --g1-2-x-position: 15%;
        --g1-2-y-position: 85%;
    }
    75% {
        --g1-1-x-position: 85%;
        --g1-1-y-position: 80%;
        --g1-2-x-position: 15%;
        --g1-2-y-position: 15%;
    }
    100% {
        --g1-1-x-position: 20%;
        --g1-1-y-position: 80%;
        --g1-2-x-position: 80%;
        --g1-2-y-position: 20%;
    }
}

/* The Class for the Elementor Container */
.animated-background {
    /* Set initial variables for the animation */
    --g1-1-x-position: 20%;
    --g1-1-y-position: 80%;
    --g1-2-x-position: 80%;
    --g1-2-y-position: 20%;
    
    /* The background itself */
    background: 
        radial-gradient(circle at var(--g1-1-x-position) var(--g1-1-y-position), #001bff 0%, transparent 25%),
        radial-gradient(circle at var(--g1-2-x-position) var(--g1-2-y-position), #001bff 0%, transparent 25%),
        #000000;
    
    /* Animation properties */
    animation-name: g-1;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Satoshi';
	font-display: auto;
	src: url('https://kodex.global/wp-content/uploads/2025/07/Satoshi-Variable1.ttf') format('truetype');
}
/* End Custom Fonts CSS */