/* ==================================================
   Registro Ebook - Diseño Profesional
================================================== */


/* RESET */

* {

    box-sizing:border-box;

}



body {

    margin:0;

    font-family:"Inter", Arial, sans-serif;

    background:
    linear-gradient(
        135deg,
        #f8fbff,
        #e8f1ff
    );

}





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


.register-page {


    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;


}





.register-container {


    width:100%;

    max-width:1200px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;


}







/* ==================================================
   TARJETA FORMULARIO IZQUIERDA
================================================== */


.register-card {


    width:100%;

    max-width:480px;

    background:#ffffff;

    padding:35px;

    border-radius:25px;


    box-shadow:

    0 25px 60px rgba(0,0,0,.12);


}






/* ==================================================
   LOGO
================================================== */


.register-logo {


    width:75px;

    height:75px;

    margin:0 auto 15px;


    display:flex;

    justify-content:center;

    align-items:center;


}



.register-logo img {


    width:100%;

    height:100%;

    object-fit:contain;


}







/* ==================================================
   TITULOS
================================================== */


h2 {


    text-align:center;

    font-size:30px;

    font-weight:800;

    color:#111827;

    margin-bottom:8px;


}



.subtitle {


    text-align:center;

    color:#6b7280;

    margin-bottom:25px;


}







/* ==================================================
   LABELS
================================================== */


.form-label {


    font-weight:600;

    color:#374151;

    margin-bottom:6px;


}







/* ==================================================
   INPUTS
================================================== */


.input-group {


    margin-bottom:14px;


}



.input-group-text {


    background:#f8fafc;

    border-color:#e5e7eb;

}



.form-control {


    padding:12px;

    border-color:#e5e7eb;


}



.form-control:focus {


    border-color:#0d6efd;


    box-shadow:

    0 0 0 3px rgba(13,110,253,.15);


}








/* ==================================================
   BOTONES
================================================== */


.btn-primary {


    background:#0d6efd;

    border:none;

    padding:14px;

    border-radius:12px;

    font-weight:700;

}



.btn-primary:hover {


    background:#0b5ed7;


}








/* ==================================================
   PASSWORD STRENGTH
================================================== */


.password-strength {


    height:8px;

    background:#e5e7eb;

    border-radius:20px;

    overflow:hidden;


}



#strengthBar {


    height:100%;

    width:0%;

    transition:.3s;


}







.password-rules {


    list-style:none;

    padding:0;

    margin:10px 0 20px;

    font-size:14px;


}



.password-rules li {


    margin-bottom:5px;


}







/* ==================================================
   MENSAJES
================================================== */


.alert {


    border-radius:12px;

    padding:12px;

}









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


.login-link {


    text-align:center;

    margin-top:25px;

    color:#6b7280;


}



.login-link a {


    color:#0d6efd;

    font-weight:700;

    text-decoration:none;


}



.login-link a:hover {


    text-decoration:underline;


}








/* ==================================================
   IMAGEN DERECHA
================================================== */


.register-image {


    flex:1;

    max-width:450px;

    text-align:center;


}




.register-image img {


    width:100%;

    max-width:420px;


    animation:

    floatImage 4s ease-in-out infinite;


}





.register-image h3 {


    margin-top:25px;

    font-size:34px;

    font-weight:800;

    color:#111827;


}





.register-image p {


    color:#6b7280;

    font-size:18px;

    line-height:1.6;


}






/* BENEFICIOS SI LOS USAS */


.benefits {


    margin-top:25px;

    text-align:left;


}



.benefits div {


    margin-bottom:12px;

    font-weight:600;

    color:#374151;


}



.benefits i {


    color:#0d6efd;

    margin-right:8px;


}









/* ==================================================
   IMAGEN DERECHA
================================================== */


.register-image img {

    width:100%;

    max-width:420px;

    border-radius:40px 40px 40px 10px;

    box-shadow:
    0 25px 60px rgba(13,110,253,.20);

    object-fit:cover;

    transition:.3s;

}



.register-image img:hover {

    transform:translateY(-8px);

}




/* ==================================================
   ANIMACION IMAGEN
================================================== */


@keyframes floatImage {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }


    100% {

        transform:translateY(0);

    }


}







/* ==================================================
   TABLET
================================================== */


@media(max-width:950px){


.register-container {

    flex-direction:column;

}



.register-image img {

    max-width:280px;

}



.register-image h3 {

    font-size:26px;

}


}







/* ==================================================
   MOVIL
================================================== */


@media(max-width:500px){



.register-page {

    padding:20px;

}



.register-card {

    padding:25px 20px;

}



h2 {

    font-size:25px;

}


}