/*
	*Main CSS para implementacion directa de sitios.
	
	*La adaptacion del bolierplate y este codigo son esfuerzo del eqipo de ID.A libre
	*con agradecimientos especiales a Juan Palma encargado de la implementacion.
*/

/* ==========================================================================
	Parametros Globales
========================================================================== */
/* @import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); */
/* font-family: 'Sen', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;400;700;900&display=swap'); */
/* font-family: 'League Spartan', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,600;1,100;1,300;1,400;1,600&display=swap'); */
/* font-family: 'Barlow Condensed', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,700;1,300;1,700&display=swap'); */
/* font-family: 'Cormorant Garamond', serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;900&display=swap');
/* font-family: 'Montserrat', sans-serif; */

:root{
	--colorBackDark: #e0e0e0;
	--colorBackColor: #fff;
	--colorPrincipal: #00b2e3;
	--colorSecundario: #7642af;
	--colorTexto: #686868;
	--margenGlobal: 5vw;
	--anchoContainer: calc(100vw - (var(--margenGlobal) * 2));
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}
body, button, input, select, textarea, ::after, ::before{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: 0.05em;
	color: var(--colorTexto);
}
i::before{
	font-family: inherit;
	font-weight: inherit;
}
.container{
	width: var(--anchoContainer);
}
.anchoFull{
	width: 100vw;
	position: relative;
	margin-left: calc(var(--margenGlobal) * -1);
}
.anchoFullFlex{
	width: 100vw;
	position: relative;
}
	
@-ms-viewport {
	width: device-width;
	zoom: 1.0;
	max-zoom: 1.0;
}

@viewport {
	width: device-width;
	zoom: 1.0;
	max-zoom: 1.0;
}


/* ==========================================================================
	Estilos visiales para elementos GENERALES
========================================================================== */
.desaparece{
	display: none !important;
	visibility: hidden !important;
	width: 1px !important;
	height: 1px !important;
	position: absolute !important;
	overflow: hidden !important;
	opacity: 0 !important;
	clip: rect(1px 1px 1px 1px) !important;
	
}
.ocultar{
	display: none !important;
}
.opacidad0{
	opacity: 0 !important;
}
.opacidad1{
	opacity: 1 !important;
}
.animar{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.animar1-4{
	-webkit-transition: all 1.4s ease-in-out;
	-moz-transition: all 1.4s ease-in-out;
	-o-transition: all 1.4s ease-in-out;
	-ms-transition: all 1.4s ease-in-out;
	transition: all 1.4s ease-in-out;
}
.colorPrincipal{
	color: var(--colorPrincipal) !important;
}
.colorBackColor{
	color: var(--colorBackColor) !important;
}
p {
	margin-bottom: 1.4em;
}
p:last-of-type {
	margin-bottom: 0;
}







/* ==========================================================================
	Estilos visiales de la ventana pop de avisos
========================================================================== */
div#ventanaPOP {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(0 0 0 / 84%);
	z-index: 99999999;
	transition: all 200ms ease-in-out;
}
	#ventanaPOP .ventanaCerrar {
		width: 28px;
		height: 28px;
		position: absolute;
		top: 18px;
		left: auto;
		right: 18px;
		background: darkred;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		line-height: 0;
		border-radius: 4px;
		padding-bottom: 2px;
		cursor: pointer;
		font-weight: 900;
		transition: all 200ms ease-in-out;
	}
	#ventanaPOP .ventanaCerrar:hover{
		background-color: orangered;
	}
	#ventanaPOP .mensajeBox {
		max-width: 86%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 3em;
		background: #fff;
		border: 8px solid #555;
		border-radius: 30px;
		font-size: 120%;
		transition: all 200ms ease-in-out;
	}
		#ventanaPOP button {
			appearance: none;
			padding: 6px 24px;
			margin: 24px 0 0;
			border: 0;
			border-radius: 6px;
			background-color: #444;
			color: #fff;
			cursor: pointer;
			transition: all 200ms ease-in-out;
		}
		#ventanaPOP .mensajeBox button:hover{
			background-color: #000 !important;
		}
		div#ventanaPOP .mensajeBox i:before {
			font-size: 360%;
			margin-bottom: 30px;
			display: block;
		}



	div#ventanaPOP.ok .mensajeBox i:before{
		color: #1ba902;
	}
	div#ventanaPOP.ok .mensajeBox{
		border: 8px solid #1ba902;
	}
	div#ventanaPOP.ok .mensajeBox button{
		background-color: #1ba902;
	}

	div#ventanaPOP.alert .mensajeBox i:before{
		color: #ddaa01;
	}
	div#ventanaPOP.alert .mensajeBox{
		border: 8px solid #ddaa01;
	}
	div#ventanaPOP.alert .mensajeBox button{
		background-color: #ddaa01;
	}

	div#ventanaPOP.error .mensajeBox i:before{
		color: #b42b08;
	}
	div#ventanaPOP.error .mensajeBox{
		border: 8px solid #b42b08;
	}
	div#ventanaPOP.error .mensajeBox button{
		background-color: #b42b08;
	}
















/* ==========================================================================
	Estilos visiales del sitio.
========================================================================== */
.full {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
	.wide {
		width: 100%;
		padding: var(--margenGlobal);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.inBack{
		position: absolute;
	}
	.box {
		width: 100%;
		max-width: 1024px;
		padding: var(--margenGlobal);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}


h2{
	color: black;
	margin-bottom: 30px;
	font-weight: 500;
	font-size: 140%;
}
h3 {
	margin-bottom: 30px;
	font-size: 140%;
	font-weight: 700;
	color: var(--colorSecundario);
}
hr{
	width: 100%;
}
a {
	background-color: transparent;
	text-decoration: none;
	color: inherit;
}
.fullFlexCol{
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}
.fullFlexRow{
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: row;
}
.col2{
	flex: 1 1 50%;
	min-width: 50%;
	max-width: 50%;
	position: relative;
}
.col1de3{
	flex: 1 1 33.33%;
	min-width: 33.33%;
	max-width: 33.33%;
	position: relative;
}
.col2de3{
	flex: 1 1 66.66%;
	min-width: 66.66%;
	max-width: 66.66%;
	position: relative;
}
.btn {
	width: auto;
	position: relative;
	display: inline-flex;
	margin: 24px 16px;
	font-size: 90%;
	background-color: var(--colorPrincipal);
	border-radius: 16px;
	padding: 6px 36px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.btn:hover{
	background-color:#000;

}
.colorPrincipal{
	color: var(--colorPrincipal);
}
.colorSecundario{
	color: var(--colorSecundario);
}
.colorBlanco{
	color: #fff;
}
.nowrap{
	white-space: nowrap;
}
.negritas{
	font-weight: 700;
}








/* Estilos para los sliders */
.boxSliders{
	width: 100%;
	position: relative;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	overflow: hidden;
}
	.slider{
		width: 100%;
		height: auto;
		position: relative;
		flex: 0 0 100%;
		min-width: 100%;
		overflow: hidden;
		transition: margin 1s ease-in-out;
	}
	.btnSliders {
		width: 100%;
		height: 100%;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 200;
		padding: 18px;
	}
		.backSlider, .nextSlider{
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
	.bulletSlider {
		width: 100%;
		height: auto;
		position: absolute;
		align-self: flex-end;
		border-bottom: 0px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 200;
		padding: 18px;
		grid-gap: 10px;
		
	}
		.putoSlider {
			width: 12px;
			height: 12px;
			position: relative;
			background-color: dimgrey;
			border: 2px solid dimgrey;
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
		.putoSlider.activo,
		.putoSlider:hover {
			border: 2px solid var(--colorSecundario);
			background-color: var(--colorPrincipal);
		}



#fondo_body{
	background : #fff;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
	#home_intro{
		background: #e0e0e0;
		background: linear-gradient(90deg, rgba(224,224,224,1) 0%, rgba(239,239,239,1) 100%);
	}
		#nav{
			position:fixed;
			top: 0px;
			overflow: visible;
			z-index: 8888;
		}
			#nav .box{
				padding-top: 0px;
				padding-bottom: 0px;
			}
				#menuBox {
					width: 100%;
					height: auto;
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					grid-gap: 28px;
					padding: 24px 32px;
					background-color: #fff;
				}
					#logo {
						flex: 0 0 clamp(86px, 12vw, 200px);
					}
						#logo img{
							width: 100%;
							height: auto;
						}
					#menu {
						position: relative;
						flex: 1 1 0;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						grid-gap: 20px;
						font-size: 110%;
						font-weight: 500;
						
					}
						#menu li{
							color: #686868;
							cursor: pointer;
							transition: all 0.2s ease-in-out;
						}
							#menu li a{
								text-decoration: none;
								font-size: 110%;
								font-weight: 500;
								color: #686868;
							}
						#menu li:hover a{
							color: var(--colorPrincipal);
						}
						#menu li.activo {
							font-weight: 700;
							color: black;
						}

		#home_intro .boxSliders{
			
		}
			#home_intro .slider{

			}
				#home_intro .slider .inBack{
					height: 100%;
				}
					.slider .full.inBack img,
					.slider .wide.inBack img {
						width: auto;
						height: 100%;
						/* object-fit: contain;
						object-position: center bottom; */
					}
				#home_intro .slider .box {
					padding-top: calc(var(--margenGlobal) * 2.4);
					padding-bottom: calc(var(--margenGlobal) * 2);
					justify-content: flex-start;
				}
				.backSlider, .nextSlider{
					filter: brightness(1);
					transition: all 0.2s ease-in-out;
				}
				.backSlider:hover, .nextSlider:hover{
					filter: brightness(0.7);
				}
				#home_intro_sld2 .infoCol,
				#home_intro_sld3 .infoCol{
					width: 48%;
					position: relative;
					left: 52%;
				}




#presumir{

}
	#presumir .box{
		grid-gap: 32px;
	}
		#presumir img {
			width: 90%;
			height: auto;
		}






#clientes{
	background-color: #773db0;
	color: #fff;
}
	#clientes .box{
		grid-gap: 32px;
		padding: calc(var(--margenGlobal) / 2) var(--margenGlobal);
		padding: 0 var(--margenGlobal);
	}
	#clientes .col1de3{
		text-align: right;
		padding-right: 44px;
		border-right: 2px solid #fff;
		font-size: 120%;
	}
		#clientes .col1de3 h3{
			color: #fff;
		}
	#clientes .slider {
		width: 50%;
		min-width: 50%;
		flex: 0 0 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0px 3%;
	}
		#clientes .slider img {
			width: 100%;
			height: auto;
			object-fit: scale-down;
			object-position: center;
		}



#homeServicios{
	justify-content: flex-start;
}
	#homeServicios > .full{
		justify-content: flex-start;
		align-items: flex-start;
	}
		.sliderMasbox {
			width: 52%;
			position: relative;
			left: 46%;
			margin-top: var(--margenGlobal);
		}
			#fondoSliderMas {
				width: 100%;
				height: 98px;
				position: absolute;
				background-color: var(--colorPrincipal);
				background: linear-gradient(90deg, var(--colorPrincipal) 0%, var(--colorSecundario) 100%);
			}
				#homeServicios .slider {
					width: 25%;
					flex: 1 1 25%;
					min-width: 25%;
					max-width: 25%;
					padding: 40px 24px;
				}
					#homeServicios .estilo {
						width: 100%;
						height: 100%;
						position: relative;
						text-align: center;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						grid-gap: 20px;
						background-color: #fff;
						padding: 18px;
						box-shadow: 0 16px 17px #3335;
					}
						#homeServicios .estilo .serviceIcon {
							width: 60px;
							height: 60px;
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #c9c9c9;
							border-radius: 30px;
							text-align: center;
							font-weight: 700;
							font-size: 130%;
							color: var(--colorSecundario);
						}
						#homeServicios .estilo h4{
							font-size: 86%;
							font-weight: 500;
						}
	#homeServicios h2{
		color: var(--colorSecundario);
		margin-top: 42px;
	}
	
	



#construir{

}
	#construir .box{
		padding-top: 0px;
		grid-gap: 32px;
	}
		#construir h2{
			color: var(--colorPrincipal);
		}
		#construir img {
			width: 90%;
			height: auto;
		}
		#construir ul {
			margin-top: 20px;
			list-style-image: none;
			list-style-position: inside;
		}
			#construir ul li{
				background-image: url(../img/bullet.svg);
				background-repeat: no-repeat;
				background-position: left center;
				background-size: 21px;
				padding: 6px 0px 6px 36px;
				margin: 15px 0px;
			}



#home_contacto{
	background: var(--colorPrincipal);
	background: linear-gradient(90deg, var(--colorPrincipal) 0%, var(--colorSecundario) 84%);
	color: #fff;
}
	
	#home_contacto .full{
		height: 100%;
	}
		#home_contacto .full img{
			width: auto;
			height: 100%;
		}
	#home_contacto .box{
		flex-direction: column;
		grid-gap: 32px;
	}
		#home_contacto h2{
			font-size: 184%;
			margin-left: -164px;
			font-weight: 600;
			font-style: italic;
			color: #fff;
		}
		#home_contacto .fullFlexRow{
			grid-gap: 60px;
		}
			#home_contacto .col2{
				min-width:inherit;
				max-width: inherit;
				text-align: center;
			}
				#home_contacto .col2 h3 {
					font-weight: 400;
					font-size: 112%;
					text-align: center;
					color:#fff;
				}
				#home_contacto .btn:before {
					content: "▶";
					position: absolute;
					left: 14px;
					line-height: 1.8;
					color: #fff;
					font-size: 68%;
					transition: all 0.2s ease-in-out;
				}
				#home_contacto .btn:hover:before{
					left: 18px;
				}
				#home_contacto .fullFlexRow .btn {
					background-color: var(--colorSecundario);
				}
				#home_contacto .fullFlexRow .col2:last-of-type .btn {
					background-color: #fff;
					color: #000;
				}
				#home_contacto .fullFlexRow .col2:last-of-type .btn:before {
					color: #000;
				}
		
		



footer{

}
	#redes {
		padding: calc(var(--margenGlobal) / 2) var(--margenGlobal);
		justify-content: flex-end;
		grid-gap: 34px;
	}
		#redes a {
			text-decoration: none;
			color: var(--colorTexto);
			transition: all 0.2s ease-in-out;
		}
		#redes a:hover {
			color: var(--colorPrincipal);
		}
			#redes a img {
				margin-right: 8px;
			}









/* Estilos para la seccion de Unite */
#unete_intro{
	background-color: var(--colorSecundario);
	overflow: visible;
	padding-top: calc(var(--margenGlobal) * 1.4);
}
	#unete_intro .box {
		justify-content: space-between;
	}
		#unete_intro .col2:first-child {
			max-width: 67%;
			flex: 1 1 67%;
			min-width: 67%;
		}
			#unete_intro .col2:first-child h2 {
				margin: 0;
				font-size: clamp(120%, 3vw, 2.2vw);
			}
		#unete_intro .col2:last-child {
			align-self: flex-end;
			text-align: center;
			display: flex;
			justify-content: flex-end;
			align-content: flex-end;
			margin-bottom: calc((var(--margenGlobal) * -1) - 54px);
			position: absolute;
			right: var(--margenGlobal);
			min-width: 58%;
			max-width: 58%;
			width: 58%;
			flex: 1 1 58%;
			height: 100%;
		}
			#unete_intro .col2:last-child img{
				width: 100%;
				height: auto;
				max-height: inherit;
				object-fit: contain;
				object-position: bottom;
			}




#motivarte .col2 img {
	display: block;
	margin: 0 auto;
}
#motivarte .box {
	align-items: flex-end;
}
	#motivarte .col2 {
		padding: 0px 26px;
	}
		#motivarte h2 {
			font-weight: 700;
			color: var(--colorPrincipal);
		}
#motivarte .box2 {
	width: 100%;
	max-width: 1024px;
	padding: 0px var(--margenGlobal);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
	#motivarte .box2 .col2:last-child p {
		display: flex;
		grid-gap: 25px;
	}
		#motivarte .box2 .col2:last-child p img {
			width: 56px;
			flex: 1 1 56px;
			min-width: 56px;
		}



#clave {
	background-color: var(--colorSecundario);
	color: #fff;
	text-align: center;
}
	#clave h3{
		color:#fff;
	}
	#clave .inBack {
		position: absolute;
		width: 80%;
		max-width: 800px;
	}




#razones .box {
	flex-direction: column;
}
	#razones .boxCols {
		width: 100%;
		max-width: 680px;
		padding-top: var(--margenGlobal);
		position: relative;
		display: flex;
		justify-content: space-between;
		align-content: stretch;
		grid-gap: 24px;
	}
		#razones .boxCols .col3 {
			flex: 1 1 calc((100% - 48px) / 3);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			padding: 48px 24px;
			background-color: var(--colorSecundario);
			border-radius: 16px;
			color: white;
		}
			#razones .boxCols .col3 h4 {
				margin-bottom: 25px;
			}



#unete_contacto {
	background-color: var(--colorPrincipal);
	overflow: visible;
}
	#unete_contacto .full.inBack {
		height: 100%;
	}
		#unete_contacto .full.inBack img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	#unete_contacto .box{
		justify-content: flex-start;
		color: #fff;
		max-width: calc(680px + (var(--margenGlobal) * 2));
	}
	#unete_contacto .box h2{
		color: #fff;
	}
		#unete_contacto .box .col2:last-child {
			position: absolute;
			height: 100%;
			right: 0px;
			top: -5.2%;
		}
			#unete_contacto .box .col2:last-child img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		span.teles {
			font-weight: 600;
		}
		










/* Estilos para la seccion de Nosotros */
#nosotros_intro {
	background-color: var(--colorSecundario);
	padding-top: calc(var(--margenGlobal) * 1.4);
}
	#nosotros_intro .full.inBack {
		height: 100%;
		top: 0px;
	}
		#nosotros_intro .full.inBack img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: 50% 60%;
		}
	#nosotros_intro > .box {
		padding: calc(var(--margenGlobal) * 2.6);
	}
		#nosotros_intro > .box h2 {
			font-weight: 700;
			font-size: 178%;
			color: #fff;
		}


#tarjetas > .box:first-child {
	justify-content: flex-start;
	padding-bottom: 0px;
}
	#tarjetas > .box:first-child h3 {
		color: black;
	}
	#tarjetasBox {
		width: 100%;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		grid-column-gap: 48px;
		grid-row-gap: 48px;
	}
		#tarjetasBox .tarjeta {
			flex: 1 1 calc(50% - 24px);
			cursor: pointer;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: stretch;
		}
			#tarjetasBox .tarjeta .giro{
				flex: 1 1 100%;
				display: flex;
				transform-style: preserve-3d;
  				transition: transform 0.8s cubic-bezier(0.26, 0.16, 0.26, 1.08) 0s;
			}
			#tarjetasBox .tarjeta.activo .giro {
				transform: rotateY(180deg);
			}
				#tarjetasBox .tarjeta .frente {
					width: 100%;
					padding: 50px;
					background-color: var(--colorPrincipal);
					border-radius: 20px;
					color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: stretch;
					align-items: center;
					text-align: center;
					position: relative;
					border-radius: 20px;
					overflow: hidden;
					backface-visibility: hidden;
					transform: rotateY( 180deg);
				}
					#tarjetasBox .tarjeta .frente img {
						margin-bottom: 40px;
					}
				#tarjetasBox .tarjeta .vuelta {
					width: 100%;
					height: 100%;
					background-color: rebeccapurple;
					position: absolute;
					border-radius: 20px;
					overflow: hidden;
					backface-visibility: hidden;
				}
					#tarjetasBox .tarjeta .vuelta img {
						width: 102%;
						height: 102%;
						position: absolute;
						object-fit: cover;
						left:-1%;
						top: -1%;
					}

				#tarjetasBox .tarjeta:last-child .frente{
					padding: 0px;
				}
					#tarjetasBox .tarjeta:last-child .frente img{
						width: 102%;
						height: 102%;
						position: absolute;
						object-fit: cover;
						left:-1%;
						top: -1%;
					}


#fundamentos .box {
	flex-direction: column;
}
	#fundamentos .box h2 {
		font-weight: 700;
		color: var(--colorPrincipal);
		margin-bottom: 50px;
	}

	#boxFundamentos {
		position: relative;
		display: flex;
		flex-direction: column;
		grid-gap: 38px;
		max-width: 90%;
	}
		.funtamento {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			grid-gap: 26px;
			background-color: var(--colorPrincipal);
			padding: 44px;
			border-radius: 20px;
			color: #fff;
		}
		.funtamento:last-child {
			background-color: var(--colorSecundario);
		}








/* Estilos para la seccion de Contacto */
#contacto_intro {
	background-color: var(--colorSecundario);
	background-image: url(../img/contacto_intro_fondo.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-top: calc(var(--margenGlobal) * 1.4);
}
	#contacto_intro > .box {
		padding: calc(var(--margenGlobal) * 2.6);
	}
		#contacto_intro > .box h2 {
			font-weight: 700;
			font-size: 178%;
			color: #fff;
			text-align: center;
		}
		span.mail {
			white-space: nowrap;
		}


#mapaBox .box {
	grid-gap: 40px;
	align-items: flex-end;
}
	#mapaBox .box > div {
		flex: 1 1 auto;
	}
		#mapa iframe {
			max-width: 100%;
		}
		#dir {
			border-bottom: 1px solid;
			border-top: 1px solid;
			padding: 20px 0;
		}

#datos .box{
	grid-gap: 40px;
	align-items: stretch;
}
	#datos .col2{
		min-width:inherit;
		max-width:inherit;
		background-color: var(--colorPrincipal);
		padding: 36px 60px;
		color: #fff;
		border-radius: 16px;
		overflow: hidden;
	}
	#datos .col2:last-child {
		background-color: var(--colorSecundario);
	}
		#datos .col2 h4 {
			text-align: center;
			margin-bottom: 32px;
			color: #fff;
			position: relative;
		}
		#datos .col2 p {
			position: relative;
		}
		#datos .col2 img {
			width: 104%;
			height: 104%;
			display: block;
			position: absolute;
			left: -2%;
			top: -2%;
			object-fit: cover;
		}








#abanico .box{
	flex-direction: column;
	align-items: flex-start;
}
	#abanico h2 {
		font-weight: 700;
		color: var(--colorPrincipal);
	}
#servicios .box {
	flex-direction: column;
	padding-top: 0px;
}
	.acordeon {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		border: 1px solid #ddd;
		border-bottom: 0px none;
	}
	.acordeon:last-child{
		border-bottom: 1px solid #ddd;
	}
		.acordeon .titulo {
			width: 100%;
			padding: 12px 44px 12px 24px;
			background-color: #fff;
			transition: all 0.2s ease-in-out;
			cursor: pointer;
		}
		.acordeon .titulo:hover{
			background-color: #f6f6f6;
		}
		.acordeon.activo .titulo{
			background-color: var(--colorSecundario);
			color: #fff;
		}
			.acordeon .titulo:after {
				content: "+";
				position: absolute;
				right: 24px;
				font-size: 126%;
				line-height: 1;
				font-weight: 600;
				transition: all 0.2s ease-in-out;
			}
			.acordeon.activo .titulo:after{
				content: "-";
				color: #fff;
			}
		.acordeon .contenido {
			width: 100%;
			max-height: 0px;
			transition: all 0.2s ease-in-out;
			overflow: hidden;
		}
		.acordeon.activo .contenido{
			max-height:727px;
		}
			.acordeon .contenido .interno{
				padding: 16px 24px 40px;
			}
				.acordeon .contenido .interno h3 {
					font-weight: 600;
				}
				.acordeon .contenido .interno p {
					font-size: 92%;
					color: #000;
				}
				.acordeon ul {
					list-style: unset;
					padding: 18px 0px;
					padding-left: 18px;
				}
				.acordeon .cols {
					width: 100%;
					position: relative;
					display: flex;
					grid-gap: 50px;
				}
					.acordeon .cols > * {
						width: 50%;
						flex: 1 1 50%;
					}
					.acordeon .cols .paquete {
						margin: 29px 0px;
						text-align: center;
						position: relative;
						display: flex;
						flex-direction: column;
						grid-gap: 9px;
						border: 1px solid;
						padding: 20px;
						border-radius: 10px;
						background-color: var(--colorPrincipal);
						color: #fff;
					}
					.acordeon .cols .paquete .nombre {
						font-size: 175%;
					}
					.acordeon .cols .paquete .precio {
						font-size: 148%;
						font-weight: 700;
						color: var(--colorSecundario);
					}
					.acordeon .cols .paquete p {
						color: #fff;
					}


#home_contacto.servi .box{
	text-align: center;
	color: #fff;
	justify-content: center;
}
	#home_contacto.servi h2{
		margin-left: inherit;
	}
	#home_contacto.servi .box .fullFlexRow{
		text-align: center;
		color: #fff;
		justify-content: center;
	}
		#home_contacto.servi .box .fullFlexRow h3{
			color: #fff;
		}








/* div#construccion {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
	#construccion .wide {
		flex-direction: column;
	}
		#construccion .wide img {
			width: 80%;
			height: auto;
		} */
		















/* ==========================================================================
	Estilos para un espect ratio de 2:1
========================================================================== */
@media (min-aspect-ratio: 2/1) {
	
}

/* ==========================================================================
	Estilos para un espect ratio de 8:5
========================================================================== */
@media (min-aspect-ratio: 8/5) {
	
}






/* ==========================================================================
	Estilos para un especto de pie
========================================================================== */
@media screen and (orientation:portrait){
	:root{
		--margenGlobal: 8vw;
	}
	.onlyLanscape{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}


	
}
/* ==========================================================================
	Estilos para un especto de pie pero en dispositivos pequeños
========================================================================== */
@media screen and (orientation:portrait) and (max-width: 680px){
	
}







/* ==========================================================================
	Estilos para un especto de acostado
========================================================================== */
@media screen and (orientation:landscape){
	.onlyPortrait{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}	
}
/* ==========================================================================
	Estilos para un especto acostado pero en dispositivos medianos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 980px){

}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 860px){

}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 720px){
	
}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos muy chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-height: 460px){

}
















/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (min-width: 1600px) {
	:root{
		--margenGlobal: 3vw;
	}
	#unete_intro .col2:last-child {
		right: -10%;
	}
}
@media only screen and (max-width: 1600px) {
	#unete_intro .col2:first-child {
		padding: calc(var(--margenGlobal) * 1.4) 0;
	}
}









/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1280px) {

}







/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1024px) {

}






/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (min-width: 860px) {
	
}








/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 846px) {
	:root{
		--margenGlobal: 8vw;
	}

	#menuBox {
		padding: 18px 28px;
	}
		#menu {
			height: 105px;
			position: absolute;
			top: 100%;
			left: 0%;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			grid-gap: initial;
			grid-row-gap: 22px;
			background-color: #fff;
			border-top: 1px solid #ccc;
			overflow: hidden;
			transition: all 0.2s ease-in-out;
		}
		#menu.hide{
			height: 0px;
			padding: 0px;
			border-top: 0px solid #ccc;
		}
			#menu li {
				flex: 1 1 50%;
				width: 50%;
				max-width: 50%;
				min-width: 50%;
				text-align: center;
			}
		#btnMenuMobile{

		}
			#btnMenuMobile .btnMenuIcon{
				width:20px;
				height:20px;
				background:transparent url(../img/btnMenuIcon.svg) no-repeat;
				background-position: left center;
				background-size: auto 100%;
				opacity: 0.7;
				cursor: pointer;
				transition: all 0.2s ease-in-out;
			}
			#btnMenuMobile .btnMenuIcon:hover{
				opacity: 1;
			}
			#btnMenuMobile .btnMenuIcon.close {
				background-position: right center;
			}


	.box {
		flex-wrap: wrap;
	}

	
	#home_intro .slider {
		color: #fff;
	}
	#home_intro .full .box {
		justify-content: flex-start;
	}
		#home_intro .full .box .infoCol {
			width: 80%;
		}
		#home_intro #home_intro_sld2 .box .infoCol, #home_intro #home_intro_sld3 .box .infoCol{
			text-align: right;
		}
			/* #home_intro .slider .full.inBack img, .slider .wide.inBack img {
				opacity: 1;
				object-fit: cover;
				height: 50%;
				top: 50%;
				position: absolute;
			}
			#home_intro div#home_intro_sld2.slider .full img, #home_intro div#home_intro_sld3.slider .full img {
				position: absolute; 
				left: 50%;
				transform: translateX(-20%);
			}  */
				#home_intro .slider .full.inBack:after {
					content: "";
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0px;
					top: 0px;
					background-color: #0002;
				}
				.btnSliders {
					align-items: flex-start;
					padding-top: calc(var(--margenGlobal) * 3);
				}	
					.backSlider img, .nextSlider img {
						width: 22px;
						height: auto;
					}
		
	#home_intro .slider .box {
		justify-content: center;
		padding-top: calc(var(--margenGlobal) * 3.6);
		padding-bottom: calc(var(--margenGlobal) * 1.4);
	}
		#home_intro_sld2 .infoCol, #home_intro_sld3 .infoCol {
			width: 96%;
			left: 2%;
		}
			#home_intro h1, #home_intro h2 {
				font-size: clamp(14px, 8vw, 2em);
			}

	#presumir .box {
		flex-direction: column;
	}
		.col2 {
			width: 96%;
			flex: 1 1 96%;
			min-width: 96%;
			max-width: 96%;
		}

	#clientes .box {
		flex-direction: column;
		grid-gap: 10px;
		padding-top: var(--margenGlobal);
	}
		.col1de3 {
			flex: 1 1 96%;
			min-width: 96%;
			max-width: 96%;
			text-align: initial;
		}
		#clientes .col1de3{
			border: 0px none transparent;
		}
		.col2de3 {
			flex: 1 1 96%;
			min-width: 96%;
			max-width: 96%;
		}


	#homeServicios {
		flex-direction: column-reverse;
	}
		#homeServicios > .full {
			position: relative;
		}	
			#homeServicios .col2de3 {
				display: none;
			}
				.sliderMasbox {
					width: 100%;
					left: 0px;
				}
					#homeServicios .slider {
						width: 50%;
						flex: 1 1 50%;
						min-width: 50%;
						max-width: 50%;
						padding: 40px 16px;
					}


	#construir .box {
		flex-direction: column;
	}
		#construir img {
			margin-left: 5%;
		}


	#home_contacto h2 {
		margin: 0px;
		line-height: 1;
	}
	#home_contacto .fullFlexRow {
		flex-direction: column;
		grid-gap: 20px;
	}


	#footer .box {
		flex-wrap: wrap;
	}
		#footer .box .col2:last-child {
			display: none;
		}
			#redes {
				grid-gap: 24px;
				font-size: 76%;
				justify-content: center;
			}
				#redes a img {
					width: 22px;
				}



	#unete_intro {
		padding-top: calc(var(--margenGlobal) * 1.4);
	}
		#unete_intro .col2:last-child {
			right: calc(var(--margenGlobal) / 10);
		}

	#motivarte {
		padding: 50px 0 0;
	}
		#motivarte .box2 {
			flex-direction: column-reverse;
		}
		#motivarte .col2 {
			padding: 0;
		}


	#clave .inBack {
		width: 90%;
		font-size: 90%;
	}


	#razones {
		padding-bottom: 36px;
	}
		#razones .boxCols {
			flex-direction: column;
			width: 80%;
		}
			#razones .boxCols .col3 {
				padding: 38px 16px;
			}


	#unete_contacto .box .col2:last-child {
		height: 61%;
		min-width: auto;
		width: auto;
		top: -3%;
	}



	div#clave.nosotros {
		font-size: 73%;
		padding: 20px;
	}
		.funtamento {
			flex-direction: column;
		}




	#abanico h2 {
		margin-top: 58px;
	}
		.acordeon.activo .contenido {
			max-height: 1120px;
		}
			.acordeon .contenido .interno h3 {
				font-size: 93%;
				line-height: 1.2;
			}
			.acordeon .contenido .interno p {
				font-size: 78%;
			}
			.acordeon .cols {
				flex-direction: column;
				grid-gap: 0px;
			}
				.acordeon .cols > * {
					width: 100%;
					flex: 1 1 100%;
				}
				.acordeon .cols .paquete .nombre {
					font-size: 118%;
				}


	#datos .col2 {
		padding: 33px 24px;
	}
	span.mail {
		font-size: 86%;
	}
	
}






@media only screen and (max-width: 760px){
	.onlyDesktop{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}
}
@media only screen and (min-width: 760px){
	.onlyMobile{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}
}







/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 680px) {
	#home_intro div#home_intro_sld1.slider .full img {
		height: 66%;
		top: 20%;
		position: relative;
		margin-left: -52%;
	}
}






/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 590px) {
	
}





/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 480px) {
	
}










/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 370px) {
	
}