.elementor-350 .elementor-element.elementor-element-4814547{--display:flex;--min-height:100vh;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.26;--padding-top:64px;--padding-bottom:64px;--padding-left:0px;--padding-right:0px;}.elementor-350 .elementor-element.elementor-element-4814547:not(.elementor-motion-effects-element-type-background), .elementor-350 .elementor-element.elementor-element-4814547 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F1F1;}.elementor-350 .elementor-element.elementor-element-4814547::before, .elementor-350 .elementor-element.elementor-element-4814547 > .elementor-background-video-container::before, .elementor-350 .elementor-element.elementor-element-4814547 > .e-con-inner > .elementor-background-video-container::before, .elementor-350 .elementor-element.elementor-element-4814547 > .elementor-background-slideshow::before, .elementor-350 .elementor-element.elementor-element-4814547 > .e-con-inner > .elementor-background-slideshow::before, .elementor-350 .elementor-element.elementor-element-4814547 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-350 .elementor-element.elementor-element-21045c2{width:var( --container-widget-width, 35% );max-width:35%;background-color:#FFFFFF;padding:20px 20px 20px 20px;--container-widget-width:35%;--container-widget-flex-grow:0;border-radius:12px 12px 12px 12px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-4814547 *//* Preparación del fondo */
.fondo-login-animado {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 100vh;
}

/* Contenido por encima de las partículas */
.fondo-login-animado > * {
    position: relative;
    z-index: 3;
}

/* Partículas pequeñas y luminosas */
.fondo-login-animado::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -15%;
    pointer-events: none;

    background-image:
        radial-gradient(circle at center, rgba(255,255,255,.90) 0 1px, transparent 2px),
        radial-gradient(circle at center, rgba(183,157,221,.75) 0 2px, transparent 3px),
        radial-gradient(circle at center, rgba(255,255,255,.55) 0 1.5px, transparent 2.5px);

    background-size:
        93px 137px,
        173px 211px,
        127px 181px;

    background-position:
        17px 34px,
        79px 113px,
        43px 76px;

    opacity: 0.55;
    filter: blur(0.2px);
    animation: particulas-suaves 24s linear infinite;
}

/* Partículas grandes y desenfocadas */
.fondo-login-animado::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -20%;
    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(164,133,205,.28) 0,
            rgba(164,133,205,.10) 4px,
            transparent 10px
        ),
        radial-gradient(
            circle,
            rgba(255,255,255,.50) 0,
            rgba(255,255,255,.15) 5px,
            transparent 12px
        );

    background-size:
        310px 270px,
        390px 340px;

    background-position:
        38px 91px,
        170px 45px;

    opacity: 0.65;
    filter: blur(2px);
    animation: particulas-profundidad 34s ease-in-out infinite alternate;
}

/* Movimiento ascendente con una pequeña desviación lateral */
@keyframes particulas-suaves {
    0% {
        transform: translate3d(0, 10%, 0);
    }

    50% {
        transform: translate3d(2%, -2%, 0);
    }

    100% {
        transform: translate3d(-1%, -14%, 0);
    }
}

/* Movimiento lento para la capa desenfocada */
@keyframes particulas-profundidad {
    0% {
        transform: translate3d(-2%, 5%, 0) scale(1);
    }

    50% {
        transform: translate3d(2%, -2%, 0) scale(1.04);
    }

    100% {
        transform: translate3d(-1%, -8%, 0) scale(1.01);
    }
}

/* Optimización para teléfonos */
@media (max-width: 767px) {
    .fondo-login-animado::before {
        opacity: 0.42;
        background-size:
            110px 155px,
            205px 240px,
            150px 210px;
    }

    .fondo-login-animado::after {
        opacity: 0.40;
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .fondo-login-animado::before,
    .fondo-login-animado::after {
        animation: none;
    }
}/* End custom CSS */