.login-body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;

    background:

    radial-gradient(
        circle at top right,
        rgba(93,169,255,0.10),
        transparent 24%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(147,197,253,0.16),
        transparent 30%
    ),

    linear-gradient(
        180deg,
        #edf4fb 0%,
        #dfeffc 100%
    );

    overflow:hidden;

}

/* CONTAINER */

.login-container{

    width:100%;
    max-width:1280px;

    min-height:720px;

    display:grid;

    grid-template-columns:
    1.1fr 0.9fr;

    border-radius:36px;

    overflow:hidden;

    background:
rgba(255,255,255,0.64);

    backdrop-filter:blur(24px);

    border:
    1px solid rgba(255,255,255,0.7);

    box-shadow:
    0 20px 60px rgba(93,169,255,0.10);

}

/* LEFT */

.login-left{

    position:relative;

    padding:90px;

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.login-left::before{

    content:'';

    position:absolute;

    width:520px;
    height:520px;

    background:
    rgba(93,169,255,0.10);

    border-radius:50%;

    filter:blur(120px);

    top:-120px;
    left:-120px;

}

.brand{

    position:relative;
    z-index:2;

    margin-bottom:50px;

}

.brand img{

    width:180px;

    object-fit:contain;

    filter:
    drop-shadow(
        0 6px 14px rgba(0,0,0,0.08)
    );

}

/* TITULO */

.login-left h2{

    position:relative;
    z-index:2;

    font-size:62px;

    line-height:1.08;

    font-weight:700;

    letter-spacing:-2px;

    color:#0f172a;

    margin-bottom:28px;

    max-width:620px;

}

/* TEXTO */

.login-left p{

    position:relative;
    z-index:2;

    font-size:20px;

    line-height:1.9;

    color:#64748b;

    max-width:540px;

}

/* RIGHT */

.login-right{

    display:flex;
    justify-content:center;
    align-items:center;

    padding:80px;

    background:
    rgba(255,255,255,0.34);

    border-left:
    1px solid rgba(255,255,255,0.55);

}

/* FORM */

.login-form{

    width:100%;
    max-width:430px;

}

.login-form h2{

    font-size:52px;

    color:#0f172a;

    margin-bottom:10px;

}

.login-form p{

    color:#64748b;

    font-size:16px;

    margin-bottom:40px;

}

/* INPUTS */

.input-group{

    margin-bottom:24px;

}

.input-group label{

    display:block;

    margin-bottom:12px;

    color:#334155;

    font-size:14px;

    font-weight:500;

}

.input-box{

    height:64px;

    border-radius:18px;

    display:flex;
    align-items:center;

    gap:14px;

    padding:0 20px;

    background:
    rgba(255,255,255,0.92);

    border:
    1px solid rgba(148,163,184,0.16);

    box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.4);

    transition:0.3s;

}

.input-box:focus-within{

    border-color:#5da9ff;

    background:white;

    box-shadow:
    0 0 0 5px rgba(93,169,255,0.12);

}

.input-box i{

    font-size:22px;

    color:#5da9ff;

}

.input-box input{

    flex:1;

    height:100%;

    border:none;
    outline:none;

    background:transparent;

    color:#0f172a;

    font-size:15px;

    font-family:'Poppins',sans-serif;

}

.input-box input::placeholder{

    color:#94a3b8;

}

/* OPTIONS */

.login-options{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:8px;
    margin-bottom:34px;

    font-size:14px;

}

.login-options label{

    display:flex;
    align-items:center;

    gap:8px;

    color:#64748b;

}

.login-options a{

    color:#3b82f6;

    font-weight:500;

}

/* BUTTON */

.login-form button{

    width:100%;
    height:64px;

    border:none;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #5da9ff,
        #3b82f6
    );

    color:white;

    font-size:17px;
    font-weight:600;

    cursor:pointer;

    transition:0.3s;

    box-shadow:
    0 12px 30px rgba(59,130,246,0.20);

}

.login-form button:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 18px 40px rgba(59,130,246,0.28);

}

/* RESPONSIVO */

@media(max-width:1100px){

    .login-container{

        grid-template-columns:1fr;

    }

    .login-left{

        display:none;

    }

}

@media(max-width:700px){

    .login-body{

        padding:20px;

    }

    .login-right{

        padding:40px 30px;

    }

    .login-form h2{

        font-size:42px;

    }

}

.login-right{

    position:relative;

}

.login-right::before{

    content:'';

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:1px;
    height:70%;

    background:
    linear-gradient(
        transparent,
        rgba(148,163,184,0.2),
        transparent
    );

}