.flex-contenedor-contacto{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

}


form .error, .error {
            color: red;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

.container-formulario{
    width: 45%;
    padding: 40px 30px;
    background-color: var(--ColorWhite);
    border-radius: 10px;
}

.container-datos-img{
    width: 45%;
}


.flex-inputs{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;

}

.text-area-form{
    display: flex;
    flex-direction: column;

}

.flex-inputs .input-form{
    width: 50%;
    padding: 10px 0px;

}

.input-form{
    display: flex;
    flex-direction: column;
    padding: 10px 0px;

}

.input-form span{
    color: #F0080F;
}

input, textarea{

    padding: 12px ;
    border: none;
    border-radius: 8px;
    border: 1px solid var(--borde-form);
    outline: none;

}

.input-form .textarea-fija {
  width: 100%;
  height: 120px;      /* tamaño fijo */
  resize: none;       /* no se puede manipular */
  overflow-y: auto;   /* scroll vertical automático */
  overflow-x: hidden;
  padding: 10px;
  font-family: inherit;
}

.input-form  label{
    padding-bottom: 10px;
}

.flex-checkbox{
    display: flex;
    align-items: center;
    gap: 10px;

}

.actions-container .btn-correo{
    background-color: var(--color-celeste);
    color: var(--ColorWhite);
    margin-top: 15px;
}


.container-datos-img{
    display: flex;
    flex-direction: column;

}


.container-flex-datos{
    background-color: var(--ColorWhite);
    padding: 40px 20px;
}

.flex-datos-contact{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 20px;
}
.flex-datos-contact .datos{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.container-img-form{
    width: 100%;
}

.container-img-form img{
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    display: block;
}

.title-contac{
    color: var(--color-celeste);

}
.container-formulario p{
    padding: 20px 0px;
    color: var(--gris-opaco);
}
.input-form label{
    color: var(--text-form);
}

.datos h4{
    color: var(--Gris-carbón);
    font-size: 20px;
}

.datos a{
    color: var(--Gris-carbón);
}

@media (max-width: 880px) {
 .flex-contenedor-contacto{
    flex-direction: column;
    gap: 30px;
 }
 .container-formulario{
    width: 100%;
    padding: 30px 20px;
 }

 .container-datos-img{
    width: 100%;
 }
}

@media (max-width: 600px) {
 .flex-inputs{
    flex-direction: column;

 }
 .flex-inputs .input-form{
    width: 100%;
 }
}