.elementor-22222 .elementor-element.elementor-element-a1102de{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-22222 .elementor-element.elementor-element-a1102de:not(.elementor-motion-effects-element-type-background), .elementor-22222 .elementor-element.elementor-element-a1102de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-22222 .elementor-element.elementor-element-a1102de > .elementor-shape-top .elementor-shape-fill, .elementor-22222 .elementor-element.elementor-element-a1102de > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#153056;}.elementor-22222 .elementor-element.elementor-element-a1102de > .elementor-shape-top svg, .elementor-22222 .elementor-element.elementor-element-a1102de > .e-con-inner > .elementor-shape-top svg{width:calc(300% + 1.3px);height:500px;}.elementor-22222 .elementor-element.elementor-element-a1102de > .elementor-shape-bottom svg, .elementor-22222 .elementor-element.elementor-element-a1102de > .e-con-inner > .elementor-shape-bottom svg{width:calc(300% + 1.3px);height:34px;}.elementor-22222 .elementor-element.elementor-element-a6f894f{--display:flex;--justify-content:center;}.elementor-22222 .elementor-element.elementor-element-ac1a41b .elementor-heading-title{font-size:30px;font-weight:200;color:var( --e-global-color-40bc3eb );}.elementor-22222 .elementor-element.elementor-element-662fa0c .elementor-heading-title{color:#FFFFFF;}.elementor-22222 .elementor-element.elementor-element-b178fee .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-22222 .elementor-element.elementor-element-7fdb107{color:var( --e-global-color-40bc3eb );}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:767px){.elementor-22222 .elementor-element.elementor-element-662fa0c .elementor-heading-title{font-size:40px;}.elementor-22222 .elementor-element.elementor-element-7fdb107{font-size:12px;}}@media(min-width:768px){.elementor-22222 .elementor-element.elementor-element-a6f894f{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-a1102de *//* Configuración del contenedor principal */
.elementor-22222 .elementor-element.elementor-element-a1102de {
    position: relative; /* Necesario para contener las pelotitas */
    overflow: hidden;   /* Para que no se salgan de la sección */
    z-index: 1;         /* Mantiene el contenido legible */
}

/* PELOTITA 1 (::before) */
.elementor-22222 .elementor-element.elementor-element-a1102de::before {
    content: '';
    position: absolute;
    width: 20px;       /* Tamaño */
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15); /* Blanco transparente */
    top: 20%;
    left: 10%;
    z-index: -1;       /* Para que quede detrás del texto */
    pointer-events: none; /* Para que no moleste al clic */
    /* Animación: Nombre | Duración | Infinita | Ida y vuelta */
    animation: float1 18s infinite alternate ease-in-out;
}

/* PELOTITA 2 y 3 (::after con truco de sombra) */
.elementor-22222 .elementor-element.elementor-element-a1102de::after {
    content: '';
    position: absolute;
    width: 35px;       /* Tamaño diferente */
    height: 35px;
    border-radius: 50%;
    background-color: rgba(220, 220, 220, 0.15); /* Gris clarito */
    bottom: 15%;
    right: 15%;
    z-index: -1;
    pointer-events: none;
    
    /* TRUCO: Creamos una "tercera" bola usando box-shadow para no usar más HTML */
    box-shadow: -150px -300px 0 rgba(255, 255, 255, 0.1); 
    
    animation: float2 25s infinite alternate ease-in-out;
}

/* DEFINICIÓN DEL MOVIMIENTO 1 */
@keyframes float1 {
    0% { transform: translate(0, 0); }
    33% { transform: translate(60vw, 20vh); }
    66% { transform: translate(20vw, 60vh); }
    100% { transform: translate(80vw, 10vh); }
}

/* DEFINICIÓN DEL MOVIMIENTO 2 */
@keyframes float2 {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-50vw, -40vh); }
    100% { transform: translate(-80vw, 20vh); }
}/* End custom CSS */