.contactanos {
    max-width: 1500px;
    height: 530px;
    background-color: #f9f6f6;

    margin: auto;
    /*Imagen en div*/
    /*background-image: Url(imgContactanos1.jpg);*/

      /*Para que la imagen se adapte al div*/
    background-size: cover;
    
    background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
    url("imgContactanos1.jpg");

}

.contenedor_contactanos {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 500px;
}

/*.contenedor_detalle {
    background-color: aqua;
}*/

.contenedor_form {
    background-color:#124f88 ;/*var(--primary-color);*/
    color: var(--text-color-inverse);
    margin: 30px;
    margin-top: 40px;

    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    border-radius: 14px;
    text-align: center;
    width: 450px;
    height: 420px;
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 5px;
    width: 350px;
    padding: 20px 0px 50px 30px;

}

label {
    /*Tamaño*/
    font-size: 15px;
    /*Negrita*/
    font-weight: 550;
    margin-bottom: -3px;
    margin-top: 4px;
}

input,
textarea {
    /*Redondear bordes*/
    border-radius: 5px;
    /*Elimina el color negro del borde
    border: none;*/
    
    /*Altura*/
    height: 20px;
    /*superior, inferior / Derecha izquierda*/
    width: 320px;
    /*Espaciado dentro de caja de texto*/
    padding: 15px 10px;
    /*Quitart el borde al seleccionar la caja de texto
    outline: none;*/
}

input::placeholder,
textarea::placeholder {
    color: rgb(125, 126, 127);
}

.contact-form textarea {
    /*Para mantener lo indicado en el html de 6 lineas*/
    height: auto;
    /*permite al text area moverse de manera vertical*/
    resize: vertical;
}

.contact-form-submit {
    width: 100%;
    height: 50px;

    background-color: var(--text-color);
    border-radius: 17px;

    color: var(--text-color-inverse);
    border: 1px solid var(--theme-color);

    cursor: pointer;

}

/*EFECTO EN EL BOTON*/
.contact-form-submit:hover {
    box-shadow: 0 0 14px var(--secondary-color);
}

/*REDES SOCIALES*/
.social-list {
    /*Elimina los puntos que estan delante de la imagen*/
    list-style: none;
    /*Ordena en horizontal*/
    display: flex;
    /*espaciado*/
    gap: 25px;
    justify-content: center;
}

/*REDES SOCIALES*/
.social-list img {
    height: 40px;
}

.social-list img:hover {
    /*El sombreado esta alrededor del icono osea se ve cuadrado "feo"
    box-shadow: 0 0 14px var(--secondary-color);*/

    /*el sombreado resaltante se visualiza desde el centro del icono*/
    filter: drop-shadow(0 0 5px var(--secondary-color));
}



/*=================================================================*/
@media(max-width:550px) {

    .contenedor_contactanos {
        display: grid;
        grid-template-columns: 0% 100%;
        grid-template-rows: 500px;

    }

    .contactanos {
        max-width: 380px;
        height: 440px;
        background-color: #F3F3F3;
        margin: 0;

    }

    .contenedor_form {
        background-color: var(--primary-color);
        color: var(--text-color-inverse);
        margin: 10px;
        /*Sombra*/
        box-shadow: 0 0 20px rgba(0, 0, 0, 1);
        border-radius: 14px;
        text-align: center;
        width: 360px;
        height: 420px;
    }

    input,
    textarea {
        /*Redondear bordes*/
        border-radius: 5px;
        /*Elimina el color negro del borde*/
        border: none;
        /*Altura*/
        height: 20px;
        /*superior, inferior / Derecha izquierda*/
        width: 300px;
        /*Espaciado dentro de caja de texto*/
        padding: 15px 10px;
        /*Quitart el borde al seleccionar la caja de texto*/
        outline: none;
    }

    .contact-form-submit {
        width: 300px;
        height: 50px;

        background-color: var(--text-color);
        border-radius: 17px;

        color: var(--text-color-inverse);
        border: 1px solid var(--theme-color);

        cursor: pointer;

    }

}