/* General */ 

h2 {
	font-size: 28px;
}

/* Formulario */
.form {
	position:relative;
	width: 65%;
	gap:20px;
	padding:0 80px 0 20px;
}

.form:after {
	content:'';
	position: absolute;
	top:0; right:0;
	width:1px; height:100%;
	background: linear-gradient(to bottom,  rgba(229,229,229,0) 0%,rgba(229,229,229,1) 16%,rgba(229,229,229,1) 85%,rgba(229,229,229,0) 100%);

}

.form-row {
	width:100%;
	display: flex;
	gap:20px
}

.txt-box {
	position:relative;
	width:100%;
	border-bottom:1px solid rgba(0,0,0,.2);
	margin-bottom:30px;
}

.txt-box input, .txt-box textarea { 
	width:100%;
	padding:15px;
	transition: var(--trs);
	font-family: var(--font);
	font-size: 15px !important;
	color: var(--text);
	border-radius:5px 5px 0 0;
}

input:focus, textarea:focus, input:not(:placeholder-shown), textarea:not(:placeholder-shown) {
	background:#f8f8fa;
}

textarea:focus, textarea:not(:placeholder-shown) {
	height:200px !important;
}

input:focus + label, textarea:focus + label, input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label {
	top:-4px; left:5px;
	font-size: 12px;
	opacity:1;
} 

.txt-box label {
	position:absolute;
	top:10px; left:10px;
	font-size: 14px;
	transition: var(--trs);
	pointer-events: none;
	transform-origin: left;
	opacity:.8;
}

button {
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	padding: 15px 40px;
	border-radius: 30px;
	color: var(--white);
	/*background: linear-gradient(135deg, #007aff 0%, #0057b2 100%);*/

	background: var(--color-primary);
	transition: var(--trs);
}




/* Información de contacto */

.info-cto {
	position:relative;
	width: 35%;
	gap:30px;
	padding:0 20px 0 80px;
	background-image: linear-gradient(90deg, #3159770D 0%, #FFFFFF00 73%);

	font-size: 15px;
	line-height: 1.4em;
}

.info-cto * {
	position:relative;
	z-index: 2;;
}

.info-cto:before {
	content:'';
	position:absolute; z-index: 1;
	top:0; left:0;
	width:100%; height:100%;
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,1) 100%);
}

.info-cto ul {
	position:relative; z-index: 2;
	padding:0; margin: 0;
}

.info-cto li {
	display: flex;
	align-items: top;
}

.info-cto span {
	padding-right:15px;
	transform:translateY(5px);
}

.info-cto .phone {
	font-size: 18px;
}

.info-cto .mail {
	margin:30px 0;
}

/* Google Maps */

.maps {
	gap:40px;
	padding-bottom: 100px;
}

.maps h3 {
	margin-bottom:20px;
	font-size: 18px;
	font-weight: 400;;
}

.maps iframe {
	border-radius:20px;
	box-shadow: var(--shadow);
}





@media only screen and (max-width: 768px) {
	.contact .container.flex {flex-direction: column; gap:80px}
	.contact .form, .contact .info-cto {width:100%}
	.contact .form {padding:0}
	.contact .form:after {display: none;}

	.info-cto {padding:0 20px 0 20px; background-image: none;}
}

@media only screen and (max-width: 620px) {
	.maps {flex-direction: column; text-align:center}
	.maps iframe {height:300px;}
}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

@media only screen and (max-width: px) {

}

