/*Contacto*/
.contacto{
    width: 98vw;
    padding: 90px 0 40px;
    min-height: 70vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.targetContacto{
    width: 75%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    box-shadow: 0 0 20px 3px var(--color--targets);
    border: var(--border--targets);
    border-radius: 6px;
    margin: 1vw auto;
}
.informacionContacto{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    justify-items: center;
    text-align: center;
    gap: 2em;
    padding: 2em;
    border-right: var(--border--targets);
}
.textocontacto{
    color: var(--color--texto);
}
.imgContacto{
    width: 80%;
}
.contactoIcons{
    width: 12em;
    display: flex;
    justify-content: space-evenly;
    /* color: blue; */
}
.contactoIcon{
    font-size: 2em;
    padding: .3em;
    color: var(--color--targets);
}
.contactoIcon:hover{
    background-color: var(--color-azul);
    color: var(--color-blanco);
    border-radius: 50%;
}
.formularioContacto{
	display: grid;
	justify-content: center;
	grid-template-columns: 1fr 1fr;
	padding: 2em 0;
    gap: 1.5em;
    box-sizing: border-box;
}
.formularioLabel {
	display: block;
	height: 1.5vw;
	width: 75%;
	margin: 15px auto;
	color: var(--color--texto);
}
.formularioInput {
	display: block;
	margin: auto;
	width: 75%;
	height: 1.7vw;
    background: none;
	border: none;
	outline: none;
	border-bottom: var(--border--targets);
	color: var(--color--texto);
    font-size: clamp(18px, .8vw, 35px);
}
.formularioBoton,
textarea.formularioInput{
    grid-column: 1 / 3;
    height: 50px;
    resize: none;
    width: 80%;
    margin: auto;
}
.botonValidar,
.formularioBoton{
   background: none;
   color: var(--color--targets);
   border: var(--border--targets) ;
   border-radius: 6px;
   font-size: 1.2em;
   font-weight: bold;
}
.botonValidar{
    /* width: 80%; */
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.botonValidar:hover,
.formularioBoton:hover{
    background-color: var(--color--targets);
    color: var(--color-blanco);
}
.formularioInput::placeholder{
    color: var(--color-azul);
}
.formularioInput:focus::placeholder{
    color: var(--color-blanco);
}
.formularioInput.error::placeholder{
    color: var(--color--targets);
}
.mensajeError{
    grid-column: 1 / 3;
    color: var(--color-rojo);
    text-align: center;
}