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

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


html,
body{
    min-height:100%;
}


body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f7f8fa;

    color:#202b3c;

}


a{
    text-decoration:none;
    color:inherit;
}


/* =====================================================
   PAGE
===================================================== */

.register-page{

    min-height:100vh;

    display:grid;

    grid-template-columns:40% 60%;

}


/* =====================================================
   SIDE
===================================================== */

.register-side{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:40px 8%;

    background:#202b3c;

    color:#ffffff;

}


.register-brand{

    display:flex;

    align-items:center;

    gap:11px;

}


.brand-mark{

    width:38px;
    height:38px;

    display:flex;

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

    border-radius:8px;

    background:#ffffff;

    color:#202b3c;

    font-size:10px;

    font-weight:700;

}


.register-brand strong{

    font-size:15px;

}


.side-content{

    max-width:450px;

    margin:auto 0;

}


.side-content > span{

    display:block;

    margin-bottom:17px;

    color:#98a2b3;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.3px;

}


.side-content h1{

    margin-bottom:20px;

    font-size:43px;

    line-height:1.08;

    letter-spacing:-1.5px;

}


.side-content p{

    max-width:410px;

    color:#b8c0ca;

    font-size:11px;

    line-height:1.8;

}


.side-note{

    display:flex;

    flex-direction:column;

    gap:9px;

}


.side-note span{

    color:#d0d5dd;

    font-size:8px;

}


/* =====================================================
   AREA
===================================================== */

.register-area{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:45px 7%;

}


.register-box{

    width:min(650px,100%);

    margin:auto;

}


.register-heading{

    margin-bottom:28px;

}


.register-heading > span{

    display:block;

    margin-bottom:10px;

    color:#1473e6;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.2px;

}


.register-heading h2{

    margin-bottom:9px;

    color:#202b3c;

    font-size:29px;

    line-height:1.15;

    letter-spacing:-.7px;

}


.register-heading p{

    max-width:500px;

    color:#667085;

    font-size:10px;

    line-height:1.7;

}


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

.register-form{

    display:flex;

    flex-direction:column;

    gap:16px;

}


.form-section-title{

    margin-top:2px;

    padding-bottom:9px;

    border-bottom:1px solid #eaecf0;

    color:#344054;

    font-size:9px;

    font-weight:700;

}


.account-title{

    margin-top:8px;

}


.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}


.form-field{

    display:flex;

    flex-direction:column;

}


.form-field label{

    margin-bottom:6px;

    color:#344054;

    font-size:8px;

    font-weight:600;

}


.form-field input,
.form-field select{

    width:100%;

    height:42px;

    padding:0 11px;

    border:1px solid #d0d5dd;

    border-radius:6px;

    outline:none;

    background:#ffffff;

    color:#344054;

    font-family:inherit;

    font-size:9px;

    transition:.2s;

}


.form-field select{

    cursor:pointer;

}


.form-field input:focus,
.form-field select:focus{

    border-color:#1473e6;

    box-shadow:0 0 0 3px rgba(20,115,230,.08);

}


.form-field input::placeholder{

    color:#b0b8c4;

}


/* =====================================================
   TERMS
===================================================== */

.terms{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:2px;

    cursor:pointer;

}


.terms input{

    width:13px;
    height:13px;

    accent-color:#1473e6;

}


.terms span{

    color:#667085;

    font-size:8px;

}


/* =====================================================
   BUTTON
===================================================== */

.register-form button{

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:3px;

    border:0;

    border-radius:6px;

    background:#1473e6;

    color:#ffffff;

    font-family:inherit;

    font-size:9px;

    font-weight:600;

    cursor:pointer;

}


.register-form button span{

    font-size:12px;

}


/* =====================================================
   LOGIN
===================================================== */

.register-login{

    display:flex;

    justify-content:center;

    gap:5px;

    margin-top:23px;

    padding-top:20px;

    border-top:1px solid #eaecf0;

}


.register-login span{

    color:#98a2b3;

    font-size:8px;

}


.register-login a{

    color:#1473e6;

    font-size:8px;

    font-weight:600;

}


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

.register-footer{
    width:min(650px,100%);
    margin:28px auto 0;
    padding-top:18px;
    border-top:1px solid #eaecf0;
}

.register-help{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-bottom:14px;
    font-size:8px;
}

.register-help span{
    color:#98a2b3;
}

.register-help a{
    color:#1473e6;
    font-weight:600;
}

.register-footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.register-footer-bottom span,
.register-footer-bottom a{
    color:#98a2b3;
    font-size:7px;
}

.register-footer-bottom a:hover,
.register-help a:hover{
    color:#1473e6;
}


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

@media(max-width:900px){

    .register-page{

        grid-template-columns:1fr;

    }


    .register-side{

        min-height:330px;

        padding:30px 7%;

    }


    .side-content{

        margin:55px 0 0;

    }


    .side-content h1{

        font-size:36px;

    }


    .side-note{

        display:none;

    }


    .register-area{

        padding:45px 7%;

    }

}


@media(max-width:600px){

    .register-side{

        min-height:285px;

        padding:25px 20px;

    }


    .side-content{

        margin:40px 0 0;

    }


    .side-content h1{

        font-size:30px;

    }


    .side-content p{

        font-size:10px;

    }


    .register-area{

        padding:38px 20px;

    }


    .register-heading h2{

        font-size:26px;

    }


    .form-row{

        grid-template-columns:1fr;

    }


    .register-login{

        flex-direction:column;

        align-items:center;

    }


    .register-footer-bottom{
        flex-direction:column;
        align-items:center;
        gap:8px;
    }

}
.terms a{color:#1473e6;text-decoration:underline;font-weight:600}

/* El asistente de ayuda pertenece al panel interno; no se muestra en acceso público. */
.mt-help-fab,
.mt-help-panel{display:none !important;}