/*=====================================
RESET
=====================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    margin:0;

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

    background:#EEF3F8;

}

/*=====================================
PÁGINA
=====================================*/

.login-page{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    background:
    radial-gradient(circle at top left,#F7FBFF,#EEF3F8);

}

/*=====================================
CONTENEDOR
=====================================*/

.login-wrapper{

    width:100%;

    max-width:1350px;

    min-height:760px;

    background:#FFF;

    border-radius:30px;

    overflow:hidden;

    display:flex;

    box-shadow:
    0 30px 70px rgba(0,0,0,.12);

}

/*=====================================
PANEL IZQUIERDO
=====================================*/

.login-left{

    flex:1.2;

    position:relative;

    overflow:hidden;

    background-size:cover;

    background-position:center;

}

.login-left::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        130deg,
        rgba(0,117,169,.15),
        rgba(61,174,43,.08),
        rgba(223,89,41,.10)
    );

}

.login-left-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    padding:80px;

}

.login-left-content{

    max-width:480px;

    color:#FFF;

}

.login-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    font-size:14px;

    margin-bottom:30px;

}

.login-left h1{

    font-size:60px;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:700;

}

.login-left p{

    font-size:21px;

    line-height:1.7;

    opacity:.95;

    margin-bottom:45px;

}

.login-beneficios{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.login-beneficio{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:19px;

}

.login-beneficio span{

    width:38px;

    height:38px;

    border-radius:50%;

    background:rgba(255,255,255,.20);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

}

/*=====================================
PANEL DERECHO
=====================================*/

.login-right{

    width:520px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF;

    padding:60px;

}

.login-card{

    width:100%;

}

.login-logo{

    display:block;

    width:220px;

    margin:auto;

    margin-bottom:45px;

}

/*=====================================
TITULO
=====================================*/

.login-titulo{

    text-align:center;

    font-size:48px;

    color:#17375E;

    margin-bottom:15px;

    font-weight:700;

}

/*=====================================
SUBTITULO
=====================================*/

.login-subtitulo{

    text-align:center;

    color:#687588;

    line-height:1.8;

    font-size:17px;

    margin-bottom:40px;

}

/*=====================================
FORM
=====================================*/

.login-campo{

    margin-bottom:28px;

}

.login-campo label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:#17375E;

}

.login-campo input{

    width:100%;

    height:60px;

    border-radius:16px;

    border:1px solid #D8E2EC;

    padding:0 22px;

    font-size:16px;

    transition:.3s;

}

.login-campo input:focus{

    outline:none;

    border-color:#0075A9;

    box-shadow:

    0 0 0 5px rgba(0,117,169,.12);

}

/*=====================================
BOTÓN
=====================================*/

.login-boton{

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:white;

    background:

    linear-gradient(
        135deg,
        #0075A9,
        #005C86
    );

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(0,117,169,.30);

}

.login-boton:hover{

    transform:

    translateY(-4px);

    box-shadow:

    0 22px 45px rgba(0,117,169,.40);

}

/*=====================================
FOOTER
=====================================*/

.login-footer{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

    color:#7A8798;

    font-size:14px;

}

/*=====================================
ERROR
=====================================*/

.login-error{

    margin-top:12px;

    color:#D32F2F;

    font-weight:600;

    display:none;

}

/*=====================================
ANIMACIÓN
=====================================*/

.login-wrapper{

    animation:entrada .8s ease;

}

@keyframes entrada{

from{

opacity:0;

transform:

translateY(30px)
scale(.97);

}

to{

opacity:1;

transform:none;

}

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:1100px){

.login-wrapper{

flex-direction:column;

}

.login-left{

display:none;

}

.login-right{

width:100%;

padding:40px;

}

.login-left-overlay{

padding:40px;

}

.login-left h1{

font-size:44px;

}

.login-left p{

font-size:18px;

}

}

@media(max-width:700px){

.login-page{

	min-height:100dvh;
    height:100dvh;
    padding:15px;
    overflow:hidden;

}

.login-wrapper{

	width:100%;
    height:calc(100dvh - 30px);
    min-height:0;
    border-radius:20px;

}

.login-left{

height:300px;

}

.login-left-overlay{

padding:25px;

}

.login-left h1{

font-size:34px;

}

.login-left p{

font-size:16px;

}

.login-right{

	width:100%;
    height:100%;
    padding:25px;
    overflow:hidden;

}

.login-logo{

width:170px;

}

.login-titulo{

font-size:34px;

}

.login-footer{

flex-direction:column;

gap:10px;

}

}

/*=====================================
ANIMACIÓN KEN BURNS
=====================================*/

.login-left{

    overflow:hidden;

}

.login-left::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--login-bg);

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    animation:loginKenBurns 18s ease-in-out infinite alternate;

    z-index:0;

}

/* Todo el contenido queda sobre la imagen */

.login-left > *{

    position:relative;

    z-index:2;

}

@keyframes loginKenBurns{

    from{

        transform:
            scale(1)
            translate(0,0);

    }

    to{

        transform:
            scale(1.12)
            translate(-30px,-15px);

    }

}