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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#eef3f3;
}

/* CONTENEDOR */

.contenedor{
    width:1100px;
    min-height:620px;
    background:white;
    margin:50px auto;
    border-radius:25px;
    overflow:hidden;
    display:flex;
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* IZQUIERDA */

.izquierda{
    width:45%;
    background:#024959;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
    overflow:hidden;
}

/* CONTENIDO */

.brand-content{
    width:100%;
    max-width:420px;
    overflow:hidden;
}

/* LOGO */

.brand-logo{
    width:120px !important;
    height:120px !important;
    object-fit:contain;
    display:block;
    margin:0 auto 25px auto;
}

/* TITULOS */

.brand-content h1{
    font-size:36px;
    margin-bottom:12px;
    line-height:1.2;
}

.brand-content h2{
    font-size:24px;
    font-weight:normal;
    margin-bottom:20px;
    line-height:1.3;
}

.linea{
    width:80px;
    height:4px;
    background:#13c0c4;
    margin:0 auto 20px auto;
    border-radius:20px;
}

.brand-content p{
    font-size:20px;
}

/* DERECHA */

.derecha{
    width:55%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px;
}

/* FORMULARIO */

.formulario{
    width:100%;
    max-width:420px;
}

/* CIRCULO */

.circulo{
    width:90px;
    height:90px;
    background:#e7f2f2;
    border-radius:50%;
    margin:0 auto 25px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
}

/* TITULO */

.formulario h3{
    text-align:center;
    color:#024959;
    font-size:36px;
    margin-bottom:10px;
}

.linea2{
    width:70px;
    height:4px;
    background:#13c0c4;
    margin:0 auto 40px;
    border-radius:20px;
}

/* LABEL */

.formulario label{
    display:block;
    margin-bottom:8px;
    color:#024959;
    font-weight:bold;
}

/* INPUTS */

.formulario input[type="text"],
.formulario input[type="password"]{
    width:100%;
    height:58px;
    border:1px solid #ccd7db;
    border-radius:12px;
    padding:0 18px;
    margin-bottom:22px;
    font-size:16px;
}

.formulario input:focus{
    outline:none;
    border-color:#07989b;
}

/* MOSTRAR PASSWORD */

.mostrar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:30px;
    color:#024959;
}

/* BOTON */

button{
    width:100%;
    height:58px;
    border:none;
    border-radius:12px;
    background:#024959;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    background:#046a70;
}

/* RESPONSIVE */

@media(max-width:900px){

    .contenedor{
        width:95%;
        flex-direction:column;
    }

    .izquierda,
    .derecha{
        width:100%;
    }

}

@media(max-width:576px){

    .brand-logo{
        width:90px !important;
        height:90px !important;
    }

    .brand-content h1{
        font-size:28px;
    }

    .brand-content h2{
        font-size:20px;
    }

}