/* ---- SECCION CONTACTO ---- */
.contacto {
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	display: grid;
	grid-row-gap: 0;
	grid-column-gap: 5em;
	grid-template-rows: auto;
	grid-template-columns: 40% 60%;
	grid-template-areas:
		"titulo ubicacion"
		"formulario mapa"
		"formulario mapa";
	margin-top: 80px;
	margin-bottom: 70px;
	width: 80%;
}
.titulo {
	grid-area: titulo;
}
.mapa {
	grid-area: mapa;
	height: 100%;
	iframe {
		height: 100%;
		width: 100%;
	}
}

.formulario {
	grid-area: formulario;
}

/* ---- CSS INPUT ANIMADO ----*/

/* ---- reposo ---- */
div.div_frm {
	margin-bottom: 15px;
	padding-top: 0px;
}

input:focus {
	border: none;
	outline: none;
}

span,
input {
	/* font: 24px/24px Verdana; */
	font-size: 1.5em;
	padding: 0;
}

label.lbl_frm {
	display: block;
	width: 100%;
	border: 1px solid var(--color-productos-fondo-lista);
	padding: 10px 10px;
	position: relative;
	box-sizing: border-box;
	border-radius: 4px;
	transition: 0.25s;
}

label input {
	display: block;
	width: 100%;
	border: none;
	background-color: transparent;
	outline: none;
	padding: 5px 0 5px 0;
}

label span {
	color: silver;
	position: absolute;
	top: 8px;
	left: 10px;
	transition: 0.25s;
}

textarea {
	resize: none;
	width: 100%;
	border: none;
	background-color: transparent;
	outline: none;
	font: 24px/24px Verdana;
}

/* ---- focus ---- */
label.focus {
	/* border-color: #b7905a; */
	border-color: var(--color-separador);
}

label span.focus {
	/* color: #b7905a; */
	color: var(--color-separador);
}

/* ---- top ---- */
label span.top {
	left: 2px;
	top: -15px;
	font-size: 20px;
	background-color: var(--color-fondo-body);
	padding: 0 5px;
}

/* ----- BTN ENVIAR ------- */
.div_frm {
	text-align: center;
}
.btn_enviar {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--color-fondo-hover);
	color: var(--color-letra-hover);
	font-size: 1.7em;
	border-radius: 16px;
	padding: 10px 20px 10px 20px; /* top - right- abajo- left */
	letter-spacing: 5px;
	display: block;
	width: 100%;
	font-weight: bolder;
	text-transform: uppercase;
}

/* ----- BTN ENVIAR ------- */

/* --------------------- MEDIA QUERYS ------------------- */
/* dispositivos medianos - pantallas menores a 768 */
@media screen and (max-width: 768px) {
	.contacto {
		grid-column-gap: 5em;
		grid-template-rows: auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			"titulo"
			"formulario"
			"ubicacion"
			"mapa";
		margin-top: 90px;
		margin-bottom: 25px;
		width: 80%;
	}
}