.contacto {
	background-color: var(--primary-color);
	color: var(--text-color-inverse);
	font-size: 18px;
	border-radius: 14px;
	padding: 25px;
	display: grid;
	gap: 25px;
}

.contacto p,
.contacto h2,
.contacto ul {
	margin: 0;
	padding: 0;
}

.contacto-titulo {
	font-size: 30px;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
}

.contacto-detalles,
.contacto-formulario {
	display: grid;
	gap: 20px;
}

.contacto-detalles-grupo,
.contacto-formulario-grupo {
	display: grid;
	gap: 3px;
}

.contacto-etiqueta {
	text-transform: uppercase;
	font-weight: 500;
}

.contacto-formulario-grupo {
	display: grid;
	gap: 3px;
}

.contacto-formulario input, 
.contacto-formulario textarea {
	border-radius: 7px;
	border: none;
	height: 30px;
	padding: 5px 10px;
}

.contacto-formulario textarea {
	height: auto;
	resize: vertical;
}

.contacto-boton {
	width: 100%;
	height: 50px;
	background-color: var(--text-color);
	border-radius: 7px;
	color: var(--text-color-inverse);
	border: 1 px solid var(--theme-color);
	cursor: pointer;
}

.contacto-boton:hover {
	box-shadow: 0 0 14px var(--secundary-color);
}

.social-lista {
	list-style: none;
	display: flex;
	gap: 25px;
	justify-content: center;
}

.social-lista img {
	height: 25px;
}

.social-lista img:hover {

	filter: drop-shadow(0 0 14px var(--secundary-color))
}

.pie {
	height: 150px;
	background-color: grey;
}

.pie-grupo {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 20px;	
}

.pie-info,
.pie-servicios,
.pie-ubicacion {
	font-size: 20px;
	color: var(--text-color-inverse);
	font-weight: bold;
}