/*======================================
            HERO CONTACTO
======================================*/

.contacto-hero{
    padding: 90px 0;
    background: #f7f9fc;
    overflow: hidden;
}

.contacto-hero .container{
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.contacto-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
}

/*=========================
        TEXTO
=========================*/

.contacto-info .subtitulo{
    display:inline-block;
    font-size:15px;
    font-weight:700;
    color:#2F7DFF;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.contacto-info h1{
    font-size:58px;
    font-weight:800;
    line-height:1.1;
    color:#0f2348;
    margin-bottom:25px;
}

.contacto-info h1 span{
    color:#2F7DFF;
}

.contacto-info p{
    font-size:19px;
    line-height:1.8;
    color:#5b6575;
    max-width:560px;
    margin-bottom:40px;
}

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

.contacto-botones{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.btn-principal,
.btn-secundario{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:16px 32px;

    border-radius:12px;

    font-weight:700;
    text-decoration:none;

    transition:.30s;
}

.btn-principal{

    background:#2F7DFF;
    color:#fff;

    box-shadow:0 12px 30px rgba(47,125,255,.30);

}

.btn-principal:hover{

    background:#195fd6;
    transform:translateY(-3px);

}

.btn-secundario{

    border:2px solid #2F7DFF;
    color:#2F7DFF;
    background:#fff;

}

.btn-secundario:hover{

    background:#2F7DFF;
    color:#fff;

}

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

.contacto-imagen{

    text-align:right;

}

.contacto-imagen img{

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

    border-radius:22px;

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

}

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

@media(max-width:991px){

.contacto-hero{

    padding:70px 0;

}

.contacto-hero-grid{

    grid-template-columns:1fr;
    gap:45px;

}

.contacto-info{

    text-align:center;

}

.contacto-info p{

    margin:auto;
    margin-bottom:35px;

}

.contacto-botones{

    justify-content:center;

}

.contacto-imagen{

    text-align:center;

}

.contacto-info h1{

    font-size:44px;

}

}

@media(max-width:576px){

.contacto-info h1{

    font-size:36px;

}

.contacto-info p{

    font-size:17px;

}

.btn-principal,
.btn-secundario{

    width:100%;

}

}
/*======================================
        FORMULARIO CONTACTO
======================================*/

.contacto-formulario{
    padding:90px 0;
    background:#f7f9fc;
}

.form-card{

    max-width:1200px;
    margin:auto;

    background:#fff;

    border-radius:22px;

    padding:60px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.form-header{

    text-align:center;
    margin-bottom:45px;

}

.form-header h2{

    font-size:42px;
    font-weight:800;
    color:#16366b;
    margin-bottom:15px;

}

.form-header p{

    color:#6b7280;
    font-size:18px;
    line-height:1.7;

}

/*=========================
        GRID
=========================*/

.form-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;

}

.form-group{

    margin-bottom:25px;

}

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

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:18px 22px;

    border:2px solid #e5e7eb;

    border-radius:14px;

    font-size:16px;

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

    transition:.30s;

    background:#fff;

}

.form-group textarea{

    resize:vertical;
    min-height:180px;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    outline:none;

    border-color:#2F7DFF;

    box-shadow:0 0 20px rgba(47,125,255,.15);

}

/*=========================
        CAPTCHA
=========================*/

.captcha-box{

    background:#f9fbff;

    border:2px solid #d9e6ff;

    border-radius:18px;

    padding:30px;

    margin:40px 0;

}

.captcha-box h4{

    color:#16366b;

    font-size:24px;

    margin-bottom:10px;

}

.captcha-box p{

    color:#6b7280;

    margin-bottom:20px;

}

.captcha-operacion{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

#captchaPregunta{

    font-size:32px;

    font-weight:800;

    color:#2F7DFF;

    min-width:120px;

}

#captchaRespuesta{

    width:170px;

    padding:16px;

    border:2px solid #d7dce5;

    border-radius:12px;

    font-size:22px;

    text-align:center;

    transition:.30s;

}

#captchaRespuesta:focus{

    outline:none;

    border-color:#2F7DFF;

    box-shadow:0 0 15px rgba(47,125,255,.18);

}

/*=========================
        BOTON
=========================*/

.btn-enviar{

    width:100%;

    padding:22px;

    border:none;

    border-radius:14px;

    background:#2F7DFF;

    color:#fff;

    font-size:19px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.btn-enviar:hover{

    background:#195fd6;

    transform:translateY(-2px);

    box-shadow:0 18px 40px rgba(47,125,255,.30);

}

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

@media(max-width:991px){

.form-card{

    padding:40px 30px;

}

.form-grid{

    grid-template-columns:1fr;

}

.form-header h2{

    font-size:34px;

}

}

@media(max-width:576px){

.contacto-formulario{

    padding:60px 0;

}

.form-card{

    padding:25px;

}

.form-header h2{

    font-size:30px;

}

.captcha-operacion{

    flex-direction:column;

    align-items:flex-start;

}

#captchaRespuesta{

    width:100%;

}

}