.redimension-mode{
    /*Estilos FAQs*/
    --fs-sm: 1.4rem;
    --fs-md: 1.2rem;
    --fs-lg: 1.6rem;
}

/****************************************main****************************************/
.contactUs{/*Es el section y ocupara todo el main*/
    max-width: 1200px;
    margin: 0 auto;
    width: 95%;
}
.contactUs .title{
    font-family: 'Gideon Roman', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-titulo-contenido);
    text-align: center;
    margin: 2rem 0;
}
/*Es el bloque que contiene todos los elementos grid*/
.box{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 5fr 4fr;
    grid-template-areas: "form info" "form map";
    grid-gap: 20px;
}
/*Asignamos a cada elemento form info y map una area especifica dentro de la cuadricula*/
.contactUs .form{
    grid-area: form;
    background-color: var(--color-fondo-form);
    height: 100%;
    width: 100%;
}
.contactUs .info{
    grid-area: info;
}
.contactUs .map{
    grid-area: map;
}
/*clase en comun para todas las areas form, info y map*/
.contact{
    padding: 40px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);/*sombra*/
    border-radius: 20px;
}

.subtitulo_form{
    margin-bottom: 10px;
}
.form h3{/*color del subtitulo de form*/
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--color-titulo-form);
}
#form_contacto{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#form_contacto .row50{
    display: flex;/*contenido horizontal*/
    gap: 20px;/*separacion entre inpults*/
}
.inputBox{/*representa a un input, nombre del input y el input*/
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    width: 50%;
}
#form_contacto .row100 .inputBox{
    width: 100%;
}
.inputBox label{
    font-family: 'Open+Sans', sans-serif;
    color: var(--color-titulo-form);
    position: relative;
    margin-top: 0.5rem;
    left: 15px;
    font-weight: 400;
}
.inputBox input{/*son las entradas de texto tipo input*/
    padding: 10px;/*tendra un padding de 10px respecto a las letras*/
    font-size: 1.1rem;
    border-radius: 25px;
    outline: none;
    background-color: rgb(242,242,242);
}
.inputBox textarea{
    padding: 10px;
    font-size: 1.1rem;
    outline: none;
    resize: none;
    min-height: 220px;
    margin-bottom: 10px;
    border-radius: 25px;
    background-color: rgb(242,242,242);
}
.inputBox button{/*aplica el estilo para el input con tipo de entrada submit*/
    background-color: rgb(64,149,232);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    max-width: 120px;
    font-weight: 500;
    cursor: pointer;
    padding: 14px 15px;
    border-radius: 25px;
    margin-bottom: 2rem;
}
.inputBox ::placeholder{/*es el color de texto del texto que indica que va en los input y textarea*/
    color: #999;
}
.contactUs .info{
    background-color: #0e3959;/*es el color de fondo del bloque info*/
}
.contactUs .info h3{
    color: #fff;
    margin-bottom: 2rem;
}
.contactUs .info .infoBox div{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.contactUs .info .infoBox div span{/*estilo del icono*/
    width: 40px;
    height: 40px;
    color: #fff;/*color del icono*/
    background-color: rgb(64,149,232);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;/*tamaño del icono*/
    border-radius: 50%;
    margin-right: 15px;/*distancia del icono con el texto*/
}
.contactUs .info .infoBox div p{
    font-family: 'Open+Sans', sans-serif;
    color: #fff;/*color del texto*/
    font-size: 1rem;/*tamaño del texto*/
}
.contactUs .info .infoBox div a{
    font-family: 'Open+Sans', sans-serif;
    color: #fff;
    text-decoration: none;
    overflow-wrap: break-word; /* Permite que el texto se rompa en palabras largas */
    word-break: break-all;
}
.sci{/*aqui van los iconos de las redes sociales, es la lista desordenada*/
    margin-top: 40px;
    display: flex;
}
.sci li{/*es el elemento que contiene el icono de una red social*/
    list-style: none;
    margin-right: 15px;
}
.sci li a{
    font-size: 1.5rem;
    color: #ccc;/*color del icono de la red social*/
}
.sci li a:hover{
    color: #fff;
}
.map{
    padding: 0;/*para que el mapa no tenga bordes*/
}
.map iframe{
    width: 100%;
    height: 100%;
    border-radius: 20px;/*redondeo del mapa*/
}

@media screen and (min-width: 701px) and (max-width: 1200px) {
    .box{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: "form form" "info map";
    }
    #form_contacto .row50{
        display: flex;
        gap: 0;
        flex-direction: column;
    }
    .inputBox{
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        width: 100%;
    }
    .map{
        min-height: 300px;
    }
}
@media screen and (max-width: 700px){/*solo se aplicará cuando la pantalla del dispositivo tenga un ancho máximo de 900 píxeles*/
    .box{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: "form" "info" "map";
    }
    #form_contacto .row50{
        display: flex;
        gap: 0;
        flex-direction: column;
    }
    .inputBox{
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        width: 100%;
    }
    .map{
        min-height: 300px;
    }
}