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

body{
    background:#eef2f7;
    font-family:'Poppins',sans-serif;
}

.register-container{

    min-height:100vh;

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

    padding:10px;
}


.register-wrapper{

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

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    box-shadow:
    0 15px 50px rgba(0,0,0,.12);
}

/* IZQUIERDA */

.register-left{
    position:relative;

    min-height:500px;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;
}

.register-logo{

    width:220px;

    margin:30px;
}

.register-overlay{

    position:absolute;

    left:50px;
    right:50px;
    bottom:60px;

    color:#fff;
}

.register-overlay h2{

    font-size:2.5rem;

    font-weight:700;

    margin-bottom:20px;
}

.register-overlay p{

    font-size:1.1rem;

    line-height:1.8;
}

/* DERECHA */

.register-right{

    padding:35px;
}

.register-title{

    font-size:1.8rem;

    font-weight:700;

    margin-bottom:15px;

    color:#111827;
}

.course-summary{

    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #082c5c
    );

    color:#fff;

    padding:18px;

    border-radius:18px;

    margin-bottom:20px;
}

.course-summary h3{

    margin-bottom:10px;
}

.course-price{

    margin-top:15px;

    font-size:1.8rem;

    font-weight:700;
}

/* FORM */

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;
}

.form-group{

    display:flex;

    flex-direction:column;
}

.form-group label{

    font-weight:600;

    margin-bottom:8px;

    color:#374151;
}

.form-group input{

    height:46px;

    border:1px solid #dbe2ea;

    border-radius:12px;

    padding:0 15px;

    font-size:15px;
}

.form-group input:focus{

    outline:none;

    border-color:#0d6efd;
}

.error-message{
    color:#dc3545;
    font-size:14px;
    margin-top:5px;
}
.phone-wrapper{

    display:flex;

    height:52px;
}

.phone-prefix{

    display:flex;

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

    min-width:85px;

    padding:0 15px;

    background:#f8fafc;

    border:1px solid #dbe2ea;

    border-right:none;

    border-radius:12px 0 0 12px;

    font-weight:600;

    font-size:14px;

    white-space:nowrap;

    color:#374151;
}

.phone-wrapper input{

    display:flex;

    align-items:center;

    height:52px;

    width:100%;

    font-size:15px;
}

.phone-wrapper input:focus{

    outline:none;

    border-color:#0d6efd;
}
.password-wrapper{

    position:relative;

    width:100%;
}

.password-wrapper input{

    width:100%;

    padding-right:50px;
}

.toggle-password{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    font-size:18px;

    color:#6b7280;
}

.toggle-password:hover{

    color:#0d6efd;
}
.form-group1 {
    display: flex;
    flex-direction: row; /* ahora estarán uno al lado del otro */
    gap: 12px; /* espacio entre los botones */
    margin-top: 20px;
}

.btn-register,
.btn-back {
    flex: 1; /* cada botón ocupa la mitad del espacio disponible */
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Botón azul (Continuar al Pago) */
.btn-register {
    background-color: #1d4ed8;
    color: white;
}

.btn-register:hover {
    background-color: #2563eb;
}

/* Botón gris (Volver) */
.btn-back {
    background-color: #6b7280;
    color: white;
}

.btn-back:hover {
    background-color: #4b5563;
}
.terms-container{

    grid-column:1 / -1;

    margin-top:10px;

    margin-bottom:10px;
}

.terms-check{

    display:flex;

    align-items:flex-start;

    gap:10px;

    line-height:1.6;

    font-size:.95rem;
}

.terms-check a{

    color:#0d6efd;

    font-weight:600;

    text-decoration:none;
}

.terms-check a:hover{

    text-decoration:underline;
}

.modal-body{

    line-height:1.8;
}

.modal-body ol{

    padding-left:20px;
}

.modal-body li{

    margin-bottom:10px;
}
/* RESPONSIVE */

@media(max-width:991px){

    .register-container{

        padding:10px;
    }

    .register-wrapper{

        grid-template-columns:1fr;

        border-radius:20px;
    }

    /* BANNER */

    .register-left{

        min-height:220px;
    }

    .register-overlay{

        left:20px;
        right:20px;
        bottom:20px;
    }

    .register-overlay h2{

        font-size:1.5rem;

        margin-bottom:10px;
    }

    .register-overlay p{

        font-size:.9rem;

        line-height:1.5;
    }

    /* FORMULARIO */

    .register-right{

        padding:20px;
    }

    .register-title{

        font-size:1.6rem;

        text-align:center;

        margin-bottom:15px;
    }

    .course-summary{

        padding:15px;

        margin-bottom:20px;
    }

    .course-summary h3{

        font-size:1.1rem;
    }

    .course-price{

        font-size:1.5rem;
    }

    .form-grid{

        grid-template-columns:1fr;

        gap:12px;
    }

    .form-group input{

        height:48px;
    }

    .btn-register{

        height:50px;

        margin-top:20px;
    }

}
@media(max-width:756px){

    .register-container{
        padding:10px;
    }

    .register-wrapper{
        grid-template-columns:1fr;
        border-radius:20px;
    }

    /* Lado izquierdo */
    .register-left{
        min-height:200px;
    }

    .register-overlay{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .register-overlay h2{
        font-size:1.4rem;
        margin-bottom:10px;
    }

    .register-overlay p{
        font-size:.95rem;
        line-height:1.4;
    }

    /* Lado derecho */
    .register-right{
        padding:20px;
    }

    .register-title{
        font-size:1.5rem;
        text-align:center;
        margin-bottom:15px;
    }

    .course-summary{
        padding:18px;
        margin-bottom:20px;
        text-align:center;
    }

    .course-summary h3{
        font-size:1.1rem;
    }

    .course-price{
        font-size:1.4rem;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .form-group input{
        height:48px;
    }

    .btn-register{
        height:50px;
        margin-top:20px;
    }
}