:root {
    --bg-body: #e7ebef;
    --bg-card: #f3f5f7;
    --bg-primary: #0B1E2D;
    --bg-text-light: #a1cce9;
    --bg-text-blue-gradient: linear-gradient(135deg, #01afff, #4fc3f7);
    --bg-text-blue: #0b4f7c;

    --bg-exit: linear-gradient(135deg, #f5f7fa, #e4e9ee, #ffffff);
}



.login-form {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg-body);

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;

    .login-card {
        width: 70%;
        height: 75vh !important;
        background: var(--bg-primary);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        display: flex;
        z-index: 4;
        margin-top: 2rem;
        /* animation: zoomIn 1s forwards; */

        .left {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 30px;
            overflow: hidden;

            .brand {
                text-align: center;
                position: relative;
                animation: introBrand 1.2s ease forwards;

                .company-logo {
                    position: relative;
                    z-index: 1;

                    img {
                        object-fit: contain;
                        /*  transform: scale(3.6) !important;
                        width: 160px !important; */
                        width: 80px;
                        filter:
                            drop-shadow(0 25px 60px rgba(0, 0, 0, 0.45));
                        animation: logoZoomIn 1.2s ease forwards;
                    }

                }

                .subtitle {
                    font-size: 1.5rem;
                    font-weight: 700;
                    letter-spacing: 3px;
                    margin-top: 3rem;
                    text-transform: uppercase;

                    background: var(--bg-text-blue-gradient);
                    background-clip: text;
                    -webkit-text-fill-color: transparent;

                    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
                    animation: titleIntro 1.4s ease forwards;
                    position: relative;
                }

                .subtitle::after {
                    content: "";
                    display: block;
                    width: 50%;
                    height: 4px;
                    margin: 0.8rem auto 0;
                    background: linear-gradient(90deg, #0b4f7c, #4fc3f7, #0b4f7c);
                    border-radius: 10px;
                    box-shadow: 0 0 15px rgba(79, 195, 247, 0.8);
                }


            }

            .field {
                margin-bottom: 18px;
            }

            .field label {
                display: block;
                font-size: 0.75rem;
                margin-bottom: 6px;
                letter-spacing: 1px;
                text-transform: uppercase;
                color: var(--bg-text-light);
            }

            .field input {
                width: 100%;
                padding: 14px 16px;
                border-radius: 14px;
                border: none;
                outline: none;
                background: rgba(73, 91, 104, 0.712);
                color: var(--bg-text-light);
                font-size: 0.9rem;
                transition: 0.3s;
            }

            .field input::placeholder {
                color: var(--bg-text-light);
            }

            .field input:focus {
                background: rgba(11, 79, 124, 0.12);
                box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.6);
            }

            .btn-submit button {
                width: 100%;
                padding: 16px;
                border-radius: 18px;
                border: none;
                background: linear-gradient(135deg, #0b4f7c, #4fc3f7);
                color: white;
                font-size: 1rem;
                font-weight: 700;
                letter-spacing: 2px;
                cursor: pointer;
                transition: 0.35s;
                box-shadow: 0 16px 40px rgba(11, 79, 124, 0.35);
            }

            .btn-submit button:hover {
                transform: translateY(-3px) scale(1.04);
                box-shadow: 0 22px 60px rgba(11, 79, 124, 0.55);
            }

            .footer-info {
                text-align: center;
                font-size: 0.75rem;
                color: #a1cce9;
            }
        }

        .right {
            width: 60%;
            height: 100%;
            border-radius: 0 20px 20px 0;
            display: flex;
            flex-direction: column;
            padding: 30px;
            background: var(--bg-card);

            .content {
                display: flex;
                flex-direction: column;
                height: 100% !important;

                .content-slide {
                    display: none;
                    text-align: left;
                    width: 100%;
                    flex: 1;
                }

                .content-slide.active {
                    display: flex;
                    animation: slideIn 1s cubic-bezier(.25, .8, .25, 1) forwards;
                }

                .slide-inner {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                }

                .slide-inner.reverse {
                    flex-direction: column-reverse;
                    justify-content: center;
                    align-items: center;

                }

                .slide-inner img {
                    width: 340px;
                    height: 340px;
                    object-fit: cover;
                    border-radius: 26px;
                    transform: perspective(900px) rotateY(-6deg);
                    /*     animation: imageFloat 6s ease-in-out infinite; */
                }

                .slide-inner.reverse img {
                    transform: perspective(900px) rotateY(6deg);
                }

                .slide-inner .stat {
                    flex: 1;
                    backdrop-filter: blur(14px);
                    padding: 30px 36px;
                    border-radius: 28px;
                }

                .slide-inner .stat strong {
                    font-size: 2.5rem;
                    font-weight: 900;
                    letter-spacing: 1px;
                    line-height: 1.2;
                    background: linear-gradient(180deg, #0b4f7c, #4fc3f7);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    display: inline-block;
                }

                .slide-inner .stat span {
                    display: block;
                    font-size: 0.9rem;
                    margin-top: 14px;
                    line-height: 1.6;
                    color: var(--bg-text-blue);
                    opacity: 0.95;
                }
            }


            .note {
                display: flex;
                justify-content: end;
                align-items: end;
                color: var(--bg-text-blue);
                padding-top: 5px;
                padding: 5px;

                strong {
                    background: var(--bg-text-blue-gradient);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: 600;
                }
            }
        }
    }
}

.insurers-carousel {
    background: linear-gradient(90deg, #0b4f7c, #189bd8, #0b4f7c);
    padding: 16px;
    border-radius: 18px;
    backdrop-filter: blur(10px);
    overflow: hidden;

    .content-img {
        display: flex;
        gap: 25px;
        animation: scrollCarousel 20s linear infinite;
        img {
            width: 80px;
            height: 50px;
            object-fit: contain;
            opacity: 0.85;
            transition: 0.3s;
        }
    }
}

.falling-logos {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;

    span {
        position: absolute;
        top: -150px;
        width: 90px;
        height: 90px;
        background-image: url("../../bas/bas_logo_light.png");
        background-size: contain;
        background-repeat: no-repeat;
        animation: fall linear infinite;
        filter: grayscale(20%);
    }
}


.exit {
    position: fixed;
    inset: 0;
    background: var(--bg-exit);

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;

    &.show {
        opacity: 1;
        pointer-events: all;
        animation: fadeOut 1s ease forwards;

        .logo {
            width: 200px;
            filter: blur(12px);
            transform: scale(0.5);
            animation: logoIn 1.2s ease forwards;
        }

        h1 {
            margin-top: 20px;
            font-size: 8rem;
            letter-spacing: 4px;
            color: white;
            animation: logoIn 1.2s ease forwards;
        }

        .outline-text {
            font-weight: 900;
            color: transparent !important;
            -webkit-text-stroke: 2px rgba(15, 40, 85, 0.75);
            text-align: center;
        }

    }

    .exit-logo {
        position: relative;
        text-align: center;
    }
}

.exit .logo,
.exit h1,
.exit .glow-line {
    opacity: 1;
}

@keyframes fall {
    0% {
        transform: translateY(-200px) rotate(0deg);
    }

    50% {
        transform: translateY(60vh) translateX(30px) rotate(180deg);
    }

    100% {
        transform: translateY(120vh) translateX(-30px) rotate(360deg);
    }
}




@keyframes scrollCarousel {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


@keyframes zoomIn {
    0% {
        transform: scale(0.5) rotate(-5deg);
        opacity: 0;
        filter: blur(12px);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}



@keyframes textIn {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}




@keyframes logoIn {
    0% {
        transform: scale(0.5) rotate(-5deg);
        opacity: 0;
        filter: blur(12px);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes glow {
    to {
        width: 60%;
    }
}




@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


@keyframes imageFloat {
    0% {
        transform: perspective(900px) rotateY(-6deg) translateY(0);
    }

    50% {
        transform: perspective(900px) rotateY(-6deg) translateY(-14px);
    }

    100% {
        transform: perspective(900px) rotateY(-6deg) translateY(0);
    }
}



@keyframes introBrand {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes logoZoomIn {
    from {
        opacity: 0;
        transform: scale(1) rotateX(40deg);
    }

    to {
        opacity: 1;
        transform: scale(3.6) rotateX(0deg);
    }
}


@keyframes lightSweep {
    0% {
        left: -120%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    50% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

/* DISEÑO RESPONSIVO */




/* XS */
@media (max-width: 575.98px) {

    .login-form {
        flex-direction: column !important;

        .login-card {
            width: 90% !important;
            height: 60vh !important;

            .left {
                width: 100% !important;
                height: 100% !important;
                padding: 10px !important;

                .brand {
                    .company-logo {
                        img {
                            width: 50px !important;
                        }
                    }

                    .subtitle {
                        margin-top: 1rem !important;
                        font-size: 1rem !important;
                    }
                }
            }
        }


    }

    .right {
        display: none !important;
    }

    .logos {
        display: block !important;
        z-index: 5 !important;

        .note {
            background-color: var(--bg-primary) !important;
            color: var(--bg-text-light) !important;
            font-size: 0.6rem !important;
            text-align: center;
        }
    }

    .falling-logos {
        span {
            width: 70px !important;
            height: 70px !important;
        }
    }

    .exit {
        &.show {
            h1 {
                margin-top: 5px !important;
                font-size: 3.5rem !important;
            }
        }
    }
}

/* SM */
@media (min-width: 576px) and (max-width: 767.98px) {

    .login-card {
        width: 92% !important;

        .left {
            padding: 15px !important;

            .company-logo {
                img {
                    width: 55px !important;
                }
            }

            .brand {

                .subtitle {
                    margin-top: 1.5rem !important;
                    font-size: 0.9rem !important;
                }
            }
        }

        .right {
            padding: 10px !important;

            & .content {
                overflow: hidden;

                .content-slide {
                    height: 100% !important;
                    align-items: center !important;
                    justify-content: center !important;
                }

                .slide-inner {
                    flex-direction: column;
                    text-align: center;


                    .img-1 {
                        width: 220px !important;
                        height: 220px !important;
                    }

                    .img-2 {
                        width: 220px !important;
                        height: 220px !important;
                    }

                    .img-3 {
                        width: 220px !important;
                        height: 220px !important;
                    }

                    .stat {
                        strong {
                            font-size: 1.6rem !important;
                        }

                        span {
                            font-size: 0.8rem !important;
                        }
                    }


                }
            }


            .note {
                font-size: 0.6rem !important;
                text-align: center;
            }

            .content-img {

                img {
                    width: 60px !important;
                    height: 30px !important;
                }
            }
        }



    }

    .exit {
        &.show {
            h1 {
                font-size: 4rem !important;
            }
        }
    }

}

/* MD */
@media (min-width: 768px) and (max-width: 991.98px) {

    .login-card {
        width: 95% !important;

        .left {
            padding: 15px !important;

            .brand {

                .company-logo {
                    img {
                        width: 70px !important;
                    }
                }

                .subtitle {
                    font-size: 1.2rem !important;
                }
            }

        }

        .right {
            padding: 20px !important;

            & .content {
                overflow: hidden;

                .content-slide {
                    height: 100% !important;
                    align-items: center !important;
                    justify-content: center !important;
                }

                .slide-inner {
                    flex-direction: column;
                    text-align: center;

                    .img-1 {
                        width: 230px !important;
                        height: 230px !important;
                    }

                    .img-2 {
                        width: 230px !important;
                        height: 230px !important;
                    }

                    .img-3 {
                        width: 230px !important;
                        height: 230px !important;
                    }

                    .stat {
                        strong {
                            font-size: 1.6rem !important;
                        }

                        span {
                            font-size: 0.8rem !important;
                        }
                    }


                }
            }





            .note {
                font-size: 0.6rem !important;
                text-align: center;
            }

            .content-img {

                img {
                    width: 60px !important;
                    height: 30px !important;
                }
            }
        }
    }



    .exit {

        &.show {
            h1 {
                font-size: 6rem !important;
            }
        }
    }

}


/* LG */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .login-card {
        width: 90% !important;

        .left {
            padding: 15px !important;

            .brand {

                .company-logo {
                    img {
                        width: 70px !important;
                    }
                }

                .subtitle {
                    font-size: 1.5rem !important;
                }
            }

        }

        .right {


            & .content {
                overflow: hidden;

                .content-slide {
                    height: 100% !important;
                    align-items: center !important;
                    justify-content: center !important;
                }

                .slide-inner {
                    flex-direction: column;
                    text-align: center;

                    .img-1 {
                        width: 240px !important;
                        height: 240px !important;
                    }

                    .img-2 {
                        width: 250px !important;
                        height: 250px !important;
                    }

                    .img-3 {
                        width: 200px !important;
                        height: 180px !important;
                    }

                    .stat strong {
                        font-size: 1.9rem !important;
                    }
                }
            }

            .note {
                font-size: 0.7rem !important;
                text-align: center;
            }

            .content-img {

                img {
                    width: 70px !important;
                    height: 40px !important;
                }
            }
        }
    }
}


/* XL */
@media (min-width: 1200px) and (max-width: 1919.98px) {

    .login-card {
        width: 85% !important;
        height: 80vh !important;

        .left {
            padding: 15px !important;

            .brand {

                .company-logo {
                    img {
                        width: 65px !important;
                    }
                }

                .subtitle {
                    font-size: 1.5rem !important;
                }
            }

        }

        .right {

            & .content {
                overflow: hidden;

                .content-slide {
                    height: 100% !important;
                    align-items: center !important;
                    justify-content: center !important;
                }

                .slide-inner {
                    flex-direction: column;
                    text-align: center;

                    .img-1 {
                        width: 240px !important;
                        height: 240px !important;
                    }

                    .img-2 {
                        width: 250px !important;
                        height: 250px !important;
                    }

                    .img-3 {
                        width: 200px !important;
                        height: 180px !important;
                    }

                    .stat strong {
                        font-size: 1.9rem !important;
                    }
                }

            }

            .note {
                font-size: 0.7rem !important;
                text-align: center;
            }

            .content-img {

                img {
                    width: 70px !important;
                    height: 40px !important;
                }
            }
        }
    }
}

/* FHD */
@media (min-width: 1920px) and (max-width: 2559.98px) {
    .login-card {
        width: 80% !important;

        .left {
            padding: 40px !important;

            .brand {
                .company-logo img {
                    width: 80px !important;
                }

                .subtitle {
                    font-size: 1.7rem !important;
                }
            }


            .field label {
                font-size: 0.9rem !important;
            }

            .field input {
                font-size: 1rem !important;
            }

            .btn-submit button {
                font-size: 1.1rem !important;
            }
        }


        .right {

            & .content {
                overflow: hidden;

                .content-slide {
                    height: 100% !important;
                    align-items: center !important;
                    justify-content: center !important;
                }

                .slide-inner {
                    flex-direction: row !important;
                }
            }
        }
    }



}

/* QHD */
@media (min-width: 2560px) and (max-width: 3839.98px) {

    .login-card {
        width: 85% !important;

        .left {
            padding: 40px !important;

            .brand {

                .company-logo img {
                    width: 90px !important;
                }

                .subtitle {
                    font-size: 2.5rem !important;
                }
            }

            .field {
                margin-bottom: 35px !important;
            }

            .field label {
                font-size: 1.2rem !important;
            }

            .field input {
                padding: 18px 20px !important;
                font-size: 1.2rem !important;
            }

            .btn-submit button {
                padding: 18px 20px !important;
                font-size: 1.2rem !important;
            }

            .footer-info {
                font-size: 1rem !important;
            }
        }

        .right {

            & .content {
                overflow: hidden;

                .content-slide {
                    height: 100% !important;
                    align-items: center !important;
                    justify-content: center !important;
                }

                .slide-inner {
                    flex-direction: row !important;

                    .img-1 {
                        width: 600px !important;
                        height: 600px !important;
                    }

                    .img-2 {
                        width: 450px !important;
                        height: 450px !important;
                    }

                    .img-3 {
                        width: 450px !important;
                        height: 450px !important;
                    }

                    .stat strong {
                        font-size: 5rem !important;
                    }

                    .stat span {
                        font-size: 1.6rem !important;
                    }
                }
            }


            .note {
                font-size: 0.9rem !important;
                text-align: center;
            }

            .content-img {

                img {
                    width: 100px !important;
                    height: 60px !important;
                }
            }
        }
    }
}