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

.contact-hero{

    padding:150px 20px 90px;

    background:#081A38;

    color:white;

    text-align:center;

}


.contact-hero-content{

    max-width:800px;

    margin:auto;

}


.contact-label,
.contact-section-label{

    color:#F68B1F;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.contact-hero h1{

    color:white !important;

    font-size:48px;

    font-weight:800;

    margin:15px 0;

}


.contact-hero p{

    color:#D7E2ED;

    font-size:16px;

    line-height:1.7;

}


/* =========================================
   SECCIÓN
========================================= */

.contact-section{

    padding:100px 0;

    background:#F5F7FA;

}


.contact-info{

    padding-top:20px;

}


.contact-info h2{

    color:#081A38;

    font-size:36px;

    font-weight:800;

    margin:12px 0 18px;

}


.contact-info > p{

    color:#667085;

    line-height:1.8;

    max-width:480px;

    margin-bottom:35px;

}


/* =========================================
   DATOS
========================================= */

.contact-info-item{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    margin-bottom:20px;

}


.contact-info-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF1E3;

    color:#F68B1F;

    border-radius:12px;

    font-size:18px;

}


.contact-info-item span{

    display:block;

    color:#8A93A0;

    font-size:10px;

    margin-bottom:3px;

}


.contact-info-item strong{

    display:block;

    color:#081A38;

    font-size:13px;

}


/* =========================================
   FORMULARIO
========================================= */

.contact-form-card{

    background:white;

    padding:35px;

    border-radius:20px;

    border:1px solid #E1E6EC;

    box-shadow:
        0 15px 40px rgba(8,26,56,.06);

}


.contact-form-header{

    margin-bottom:25px;

}


.contact-form-header h3{

    color:#081A38;

    font-size:23px;

    font-weight:800;

    margin-bottom:7px;

}


.contact-form-header p{

    color:#667085;

    font-size:12px;

}


.form-label{

    color:#081A38;

    font-size:11px;

    font-weight:700;

    margin-bottom:7px;

}


.form-control,
.form-select{

    min-height:48px;

    border:1px solid #DDE3EA;

    border-radius:10px;

    font-size:12px;

    padding:12px 14px;

}


.form-control:focus,
.form-select:focus{

    border-color:#F68B1F;

    box-shadow:
        0 0 0 3px rgba(246,139,31,.12);

}


textarea.form-control{

    min-height:140px;

    resize:vertical;

}


/* =========================================
   BOTÓN
========================================= */

.btn-contact-submit{

    width:100%;

    min-height:50px;

    border:0;

    border-radius:10px;

    background:#F68B1F;

    color:white;

    font-family:inherit;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}


.btn-contact-submit:hover{

    background:#FF9C32;

    transform:translateY(-2px);

}


.btn-contact-submit i{

    margin-left:8px;

}


/* =========================================
   WHATSAPP
========================================= */

.contact-whatsapp{

    padding:70px 0;

    background:#081A38;

}


.contact-whatsapp-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:35px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:20px;

    background:#12385F;

}


.contact-whatsapp-box span{

    color:#F68B1F;

    font-size:11px;

    font-weight:700;

}


.contact-whatsapp-box h3{

    color:white;

    font-size:24px;

    font-weight:800;

    margin-top:5px;

}


.btn-whatsapp{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:13px 20px;

    background:#25D366;

    color:white;

    border-radius:10px;

    text-decoration:none;

    font-size:11px;

    font-weight:700;

}


.btn-whatsapp:hover{

    color:white;

    transform:translateY(-2px);

}


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

@media(max-width:767px){

    .contact-hero{

        padding:130px 20px 70px;

    }


    .contact-hero h1{

        font-size:34px;

    }


    .contact-section{

        padding:70px 0;

    }


    .contact-info{

        padding-top:0;

    }


    .contact-form-card{

        padding:25px 20px;

    }


    .contact-whatsapp-box{

        flex-direction:column;

        align-items:flex-start;

    }

}