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

.contacto{

    position:relative;

    padding:120px 8%;

    background:linear-gradient(
    180deg,
    #F8FAFC,
    #FFFFFF);

    overflow:hidden;

}

/*==================================
        NUMERO DE FONDO
==================================*/

.contacto::before{

    content:"08";

    position:absolute;

    left:5%;

    top:20px;

    font-size:260px;

    font-weight:900;

    color:rgba(47,69,155,.05);

}

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

.contacto-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:50px;

}

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

.formulario{

    background:white;

    padding:45px;

    border-radius:25px;

    box-shadow:var(--shadow2);

}

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

.formulario input,

.formulario textarea,

.formulario select{

    width:100%;

    padding:16px 20px;

    margin-bottom:20px;

    border-radius:12px;

    border:2px solid #E4E8F0;

    outline:none;

    font-size:15px;

    transition:.35s;

}

/*==================================
        FOCUS
==================================*/

.formulario input:focus,

.formulario textarea:focus,

.formulario select:focus{

    border-color:var(--azul);

    box-shadow:0 0 15px rgba(47,69,155,.15);

}

/*==================================
        TEXTAREA
==================================*/

.formulario textarea{

    resize:none;

    min-height:180px;

}

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

.formulario button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    background:var(--amarillo);

    color:var(--azul);

    font-size:17px;

    font-weight:bold;

    transition:.35s;

    cursor:pointer;

}

.formulario button:hover{

    background:var(--azul);

    color:white;

}

/*==================================
        INFORMACION
==================================*/

.info-contacto{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*==================================
        TARJETAS
==================================*/

.info-box{

    display:flex;

    align-items:center;

    gap:20px;

    background:white;

    padding:25px;

    border-radius:18px;

    box-shadow:var(--shadow1);

    transition:.35s;

}

.info-box:hover{

    transform:translateX(10px);

}

/*==================================
        ICONO
==================================*/

.info-box i{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--azul);

    color:white;

    font-size:24px;

}

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

.info-box h3{

    color:var(--titulo);

    margin-bottom:5px;

}

.info-box p{

    color:var(--texto);

}

/*==================================
        MAPA
==================================*/

.mapa{

    margin-top:20px;

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow1);

}

.mapa iframe{

    width:100%;

    height:320px;

    border:none;

}

/*===============================
      CELULARES
===============================*/

@media (max-width:576px){

}


.propuesta-cierre-fromulario{
    position:relative;
    z-index:2;
    max-width:900px;
    margin:55px auto 0;
    padding:22px 28px;
    border-left:4px solid #ffd21c;
    background:rgba(255,255,255,.05);
    color:#22377F;
    line-height:1.7;
    text-align: justify;
}