/*------------------- GENERALES --------------------*/

* { padding:0;margin:0;border:0;text-decoration:none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; list-style: none;}

:root{
	--fuente-primaria:'Nunito';
	--fuente-secundaria:'Open Sans';
	--color-principal:#f79b1e;
	--whatsapp:#25D366;
	--whatsapp-o:#075E54;
	--blanco:#fff;
	--negro:#000;
	--gris-mas-c:#ebebeb;
	--gris-c:#bbbbb9;
	--gris:#4D4C47;
	--gris-o:#2b2b2b;
	--gris-mas-o:#202020;
}
html{font-size: 18px; font-family: var(--fuente-secundaria), sans-serif;}

h1, h2, h3{font-family:var(--fuente-primaria), sans-serif;}
p, a, li,
h4, h5, h6{font-family:var(--fuente-secundaria), sans-serif;}

h1{
	font-size: 4em;
	text-transform: uppercase;
	font-weight: 700;
}
h2{
	font-size: 2.8em;
	font-weight: 300;
	border-bottom: 1px solid #ddd;
	margin-bottom: 20px;
}
h3{
	font-size: 1.7em;
	font-weight: 300;
}
h4{
	font-size: 1.5em;
}
h5{
	font-size: 1.3em;
	font-weight: 300;
}
h6{
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: 10px;
	padding-bottom: 5px; 
}

h1,h3{color:var(--blanco);}
h2{color: var(--color-principal);}
h6{color:var(--gris-o);}

.clear{clear: both; width: 100%; height: 0; float: left;}

/*----------------- COLORES --------------------*/

.principal{color:var(--color-principal);}
.mag{color:#b20b39;}
.blanco{color:#fff;}
.azul{color:#355894;}
.gris{color:#888;}
.negro{color:#000;}

/*----------------- ICONOS --------------------*/

h2 > span {margin-right: 12px; font-size: 0.6em;}


/*----------------- COLUMNAS --------------------*/

.doscol div{width: 47%; float:left; margin-right: 6%;}
.doscol div img{width: 100%; height: auto;}
.trescol div{width: 31%; float:left; margin-right: 3.5%;}
.doscol div:last-of-type, .trescol div:last-of-type {margin-right: 0;}


/*----------------- TOP --------------------*/

header{
	position: fixed;
	width: 100%;
	z-index: 150;
}
	header #redes {
		width: 100%;
		height: 30px;
		background: var(--gris-o);
		padding: 7px 5% 0 5%;
		display: block;
	}
		header #redes span{
			font-size: 0.8em;
			color: var(--blanco);
			padding: 5px;
			background: var(--color-principal);
			border-radius: 50%;
			margin-right: 5px;
			transition: all .5s ease;
			text-shadow: 0 0 2px rgba(0,0,0,.15);
		}
	#izq p,
	#der p{
		float:left;
		color:var(--blanco);
		font-size:0.6em;
		margin-left:10px;
	}
	#der p{
		float:right;
		color:var(--blanco);
		font-size:0.6em;
		margin-left:10px;
	}
		#izq a,
		#der a{
			color:var(--blanco);
			transition: all .2s ease;
		}
			#izq a:hover,
			#der a:hover{
				color:var(--color-principal)
			}
	div#izq{float:left;}
			#izq p:first-of-type{margin-left: 0px;}
	
	div#der{float:right;}
			#der a{color:#fff; padding-right: 2px; transition: all .3s ease;}
			#der span{cursor: pointer; color: #fff;}
			#der span:hover {background: #888; border-radius: 25%;}
			#der a:hover{background: #666; font-weight: 400;}

			#der a:last-of-type{padding-right: 0;}

			
/*----LOGO----*/

.top{
	width: 100%;
	height: 70px;
	padding: 10px 5%;
	background: #fff;
	box-shadow: 0 0 10px 0 #000;
	overflow: hidden;
	transition: all 0.5s ease;
}
	.topsticky{
		float:left;
		width: 100%;
		height: 50px;
		padding: 5px 5%;
		background: #fff;
		box-shadow: 0 0 10px 0 #000;
		overflow: hidden;
	}
	.topsticky a img{
		width: 145px;
		height: 47px;
		margin-top: -3px;
	}
	
/*----------------- MENU --------------------*/


	nav{
		float:right;
		display: grid;
		align-items: center;
		font-size: 0.9em;
		align-self: center;
		background: var(--blanco);
	}
		nav ul{
			list-style: none;
			font-family: var(--fuente-primaria), var(--fuente-secundaria);
		}
			nav ul li{
				display: inline;
				margin: 10px;
			}
				nav ul li a{
					color:var(--negro);
					transition: all .3s ease;
					position: relative;
					border-bottom: 1px solid transparent;
				}
					nav ul li a:hover{
						color:var(--color-principal);
						padding: 7px 0;
						border-bottom: 1px solid var(--gris);
					}

					/*menu celu*/
						nav ul li span{
							display: none;
							float: left;
							margin-right: 7px;
						}

	.margenmenu{margin-top: 1%;}
	.margenmenusticky{
		margin-top: 0.6%;
	}

	.activo{color:#f79b1e; font-weight: 500;}
	.menu-fixed {height:90px;}

/*----MENU CELULAR----*/

		div.menu_bar {display: none; float:right; z-index: 1000; margin-right: 10px;}
		a.celmenu{border-left:1px solid #ddd; font-size: 2em; padding: 0 1%;color:#f79b1e; font-weight: 200; transition: all .3s ease;}
		a.celmenu:hover{color: #333;}
		
		a.menu:hover{border-radius:50%; background-color:rgba(0,153,147,1); border-left:0px;}

		#cruz{display: none; margin-top: -40px; font-size: 1.8rem; padding: 0 1%;color:#f79b1e; font-weight: 200; transition: all .3s ease; margin-left: 20px}
		#cruz:hover{color: #333;}
		#burger{display: block; margin-top: -45px; margin-left: 20px;}

/*----------------- SLIDER --------------------*/

#slider{
	float: left;
	width: 100%;
	height: 700px;
	background: var(--negro);
	position: relative;
	overflow: hidden;
	padding-top: 50px;
}
	#slider h1{
		width: 90%;
		margin-left: 5%;
	}

	/* 18s es mejor */
	#slider ul{
		list-style-type: none;
		display: flex;
		width: 300%;
		animation:cambio 18s infinite ease;
	}

		@keyframes cambio {
			0%{margin-left: 0;}
			33.3%{margin-left: 0;}
			
			33.34%{margin-left: -100%;}
			66.6%{margin-left: -100%;}
			
			66.61%{margin-left: -200%;}
			100%{margin-left: -200%;}
		}
		
	#slider ul li {
		width: 100%;
		height: 700px;
		display: block;
		display: grid;
		align-items: center;
		align-content: center;
	}
		.uno, .dos, .tres, .cuatro, .cinco{
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: center;
			animation: fondos 5s infinite ease;
		}
			@keyframes fondos {
				0%{
					background-size: 105%;	
				}
				20%{
					background-size: 100%;
				}
				100%{
					background-size: 100%;
				}
			}
		.uno{background-image: url(../img/slider/portada-1-1920.webp);}
		.dos{background-image: url(../img/slider/portada-2-1920.webp);}
		.tres{background-image: url(../img/slider/portada-3-1920.webp);}

		#slider h1{
			position: relative;
			animation: ingreso 5s infinite ease;
			text-shadow: 1px 2px 12px rgba(0,0,0,.75);
			text-align: center;
			z-index: 100;
			opacity: 0;
			font-weight: 700;
		}
		@keyframes ingreso {
			0%{
				left: -5%;
				opacity: 0;
			}
			25%{
				left: 0;
				opacity: .75;
			}
			100%{
				left: 0;
				opacity: 1;
			}
		}

	/*--BOTON--*/
		#slider ul li a{
			color: #fff;
			font-weight: 400;
			display: block;
			font-size: 0.9em;
			text-align: center;
			padding: 3vh 40px;
			cursor: pointer;
			box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
			text-transform: uppercase;
			transition: all .4s ease;background: #f79b1e;
			text-shadow: 1px 1px 1px rgba(0,0,0,.5);
			margin: 0 40%;
		}
			#slider ul li a:hover{font-weight: 700; background:#666; border-radius: 5px;}

	/*icono flecha*/

	span.flecha {
		position: absolute;
		top:650px;
		left: 50%;
		font-size: 2.3em;
		padding: 15px;
		border-radius: 50%;
		background-color: rgba(247,155,30,1);
		color: #fff;
		transition: all .5s ease;
	}
		span.flecha:hover {
			font-size: 2em;
			background-color: rgba(247,155,30,1);
			left: 50.2%;
			transform: scale(1.15);
		}


/*----------------- NOSOTROS --------------------*/
#nosotros{
	padding: 5%;
	border-bottom: 1px;
	background-color: #eee;
	font-size: .9em;
	overflow: hidden;
	display: grid;
	grid-gap: 30px;
}
	#nosotros > h2{
		width: 100%;
		max-width: 1360px;
		margin: 0 auto;
	}
	.nosotros-intro{
		width: 100%;
		max-width: 1360px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(300px, 1fr) minmax(auto, 700px);
		grid-gap: 40px;
		font-weight: auto;
	}
		.nosotros-intro p{
			line-height: 1.6em;
			font-size: 22px;
			align-self: center;
		}
			.nosotros-intro p b{
				font-size: 1.2em;
			}
		.nosotros-intro img{
			width: 100%;
			max-width: 700px;
			height: auto;
		}
	#nosotros .atributos{
		width: 100%;
		max-width: 1360px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 50px;
	}
		#nosotros .atributos section{
			display: grid;
			justify-items: center;
			text-align: center;
			transition: all .2s ease;
			position: relative;
		}
			#nosotros .atributos div{
				cursor: pointer;
				background: var(--blanco);
				padding: 40px 25px;
				border-radius: 15px;
				display: grid;
				grid-template-rows: 100px 40px auto;
				grid-gap: 5px;
				text-align: center;
				justify-items: center;
				position: relative;
				transition: all .2s ease;
			}
				#nosotros .atributos > div:hover{
					border-radius: 50px;
					box-shadow: 4px 5px 12px rgba(0,0,0,.15);
				}
				#nosotros .atributos div > p{
					font-weight: 400;
					opacity: 0;
					height: 0;
				}
					#nosotros .atributos div:hover > p{
						opacity: 1;
					}
					#nosotros .atributos div:hover > img,
					#nosotros .atributos div:hover > h6{
						opacity: 0;
						height: 0;
						position: absolute;
					}
						#nosotros .atributos div:nth-of-type(1) > p{
							position: relative;
							top: 12%;
						}
						#nosotros .atributos div:nth-of-type(2) > p{
							position: relative;
							top: 33%;
						}
						#nosotros .atributos div:nth-of-type(3) > p{
							position: relative;
							top: 60%;
						}

	/*LOGOS CLIENTES*/
	.contenedor-clientes{
		width: 100%;
	}
	#clientes {
		width: 100%;
		max-width: 1360px;
		margin: 0 auto;
		overflow: hidden;
		padding: 30px 40px;
		/* border: solid 1px #ccc; */
		background: #fff;
		margin-bottom: 50px;
	}
		#clientes h2{
			color: var(--color-principal);
			font-size: 1.25em;
			font-weight: 400;
		}
	.sliderclientes {
		float: left;
		max-width: 1280px;
		width: 100%;overflow: hidden;
		margin-top: 2vh;
	}
	.sliderclientes ul{
		list-style: none;
		width: 4500px;
		animation:cambioclientes 36s infinite linear;
		overflow: hidden;
	}
	.sliderclientes ul img{
		filter: grayscale(.5);
		transition: all .3s ease;
	}
		.sliderclientes ul img:hover{
			filter: grayscale(0);
		}


		/*transicion js*/
	#clientes.entra {opacity: 1;}

	@keyframes cambioclientes {
		0%{margin-left: 0;}
		7%{margin-left: 0;}
		93%{margin-left: -3300px;}
		100%{margin-left: -3300px;}
	}

/*----------------- SERVICIOS --------------------*/
#servicios {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
	width: 100%;
	max-width: 1360px;
	margin: auto;
	background: var(--blanco);
	padding: 5% 0;
}
	#servicios h2{
		grid-column: 1/-1;
	}
	#servicios article{
		height: 350px;
		display: grid;
		align-content: center;
		justify-items: center;
		grid-gap: 10px;
		background: var(--gris-mas-c);
		/* border: solid 2px var(--color-principal); */
		border-radius: 10px;
	}
		#servicios article h3{
			font-weight: 700;
			color: var(--gris-o);
		}
		#servicios article a{
			padding: 10px 25px;
			font-family: var(--fuente-secundaria);
			background-color: var(--color-principal);
			border-radius: 10px;
			transition: all .3s ease;
			font-weight: 600;
			color:#fff;
			text-shadow: 0 1px 2px rgba(0,0,0,.4);
			font-size: 16px;
		}
			#servicios article a:hover{
				background: var(--gris-o);
				border-radius: 25px;
			}
/*----------------- CONTACTO --------------------*/

#contacto {
	width: 100%;
	background-color: var(--gris-o);
	padding: 5%;
}
.contenedor-contacto{
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px 60px;
}
	#contacto h2{
		grid-column: 1/-1;
	}
	/*formulario*/
	form input[type="text"],
	form input[type="email"]{
		float: left;height: 40px;
		font-family: var(--fuente-secundaria), sanserif;
		padding:7px;
		font-size: 0.8em;
		margin-bottom: 10px;
		margin-right: 10px;
		width: 100%;
		background-color: #fff;
		border-radius: 5px;
		border: 1px solid rgba(153,204,51,0.5);
	}
		form input:last-of-type{
			margin-right: 0px;
		}
	form textarea{
		float:left;
		height: 120px;
		width:100%;
		font-family: var(--fuente-secundaria), sanserif;
		font-size: 0.8em;
		margin-bottom: 10px;
		padding: 7px;
		background-color: #fff;
		border: 1px solid rgba(153,204,51,0.5);
		border-radius: 5px;
	}
		form textarea:hover,
		form input:hover{
			border: 1px solid rgba(61,143,232,0.6);
		}
			form input::-webkit-input-placeholder,
			textarea::-webkit-input-placeholder{
				color:var(--gris);
			}
			form input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder{
				color:var(--negro);
			}
		.g-recaptcha{
			float:left;
			padding-right: 2%;
			width: 48%;
		}
		form input[type="submit"]{
			float: right;
			height: 75px;
			width: 50%;
			background: var(--color-principal);
			transition: all .3s ease;
			font-family: var(--fuente-secundaria);
			color:#fff;
			font-weight: 600;
			text-shadow: 0 1px 2px rgba(0,0,0,.15);
			font-size: 1em;
			border-radius: 2px;
			cursor: pointer;
			margin-bottom: 5%;
			border-radius: 10px;
		}
			form input[type="submit"]:hover{
				background: var(--gris-mas-o);
				border-radius: 50px;
				border: 0;
			}
	/*datos contacto*/
	.datoscontacto {
		float: left;
		width: 100%;
		grid-column: 1/-1;
		padding: 5%;
		background: var(--blanco);
	}
	.contenedor-datos-contacto {
		width: 100%;
		max-width: 1360px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(auto, 900px) minmax(400px, 1fr);
		grid-gap: 50px;
	}
		.contenedor-datos-contacto > img{
			width: 100%;
			height: auto;
		}
		.contenedor-datos-contacto article{
			align-self: center;
		}
			.contenedor-datos-contacto div{
				margin-top: 20px;
			}
			.contenedor-datos-contacto h4{
				font-family: var(--fuente-primaria);
				color: var(--gris-o);
				border-bottom: solid 1px var(--gris-mas-c);
				font-weight: 300;
				margin-bottom: 10px;
				font-size: 1.5em;
				padding-bottom: 5px;
			}
				.contenedor-datos-contacto ul li {
					line-height: 1.5em;
					color: var(--gris);
					font-size: .9em;
				}
					.contenedor-datos-contacto ul li span{
						font-size: .8em;
						color: var(--color-principal);
						margin-right: 7px;
					}
					.contenedor-datos-contacto ul li a{
						color: var(--gris-o);
					}
						.contenedor-datos-contacto ul li a:hover{
							color: var(--color-principal);
							text-decoration: underline;
						}

/*----------------- FOOTER --------------------*/

footer{
	width: 100%;
	background: var(--gris);
	display: grid;
	padding: 5%;
}
	.contenedor-footer{
		width: 100%;
		max-width: 1360px;
		margin: 0 auto;
	}
	.contenedor-footer > section{
		float:left;
		width: 45%;
		margin-right: 10%;
	}
		.contenedor-footer > section:last-of-type{
			margin-right: 0%;
		}
	
	.contenedor-footer h4{
		font-size: 1.2em;
		color: var(--color-principal);
		text-transform: uppercase;
		font-weight: 400;
	}

	.contenedor-footer section ul{
		list-style: none;
	}
		.contenedor-footer section ul a{
			color: var(--blanco);
			font-family: var(--fuente-secundaria), sanserif;
			text-transform: uppercase;
			font-size: 0.8em;
			transition: all .3s ease;
			padding: 7px 0;
			display: inline-block;
		}
			.contenedor-footer section ul a:hover{
				color: var(--color-principal);
				transform: scale(1.25);
				text-shadow: 0 1px 2px rgba(0,0,0,.4);
			}
	.contenedor-footer section hr{
		border: 1px solid rgba(255,255,255,0.5);
	}

/*----------------- COPY --------------------*/

	#copyright{
		width: 100%;
		float: left;
		background: var(--gris-o);
		text-align: center;
	}
		#copyright p{
			color: #fff;
			font-size: 0.6em;
			padding: 10px 5%;
		}
		#copyright a {
			color: #fff;
		}
		#copyright a:hover {
			color: #bbb;
		}
		#copyright a:visited {
			color: #fff;
		}

/*----------------- PORTADA --------------------*/
section#portada {
	float: left;
	width: 100%;
	height: 400px;
	background: #333;
	background-image: url(img/servicios.jpg);
	background-position: right bottom;
	padding: 5%;
	position: relative;
	top:100px;
	margin-bottom: 100px;
	-webkit-background-size: cover;
	background-size: cover;
}

	section#portada > div{
		display: block;
		float: left;
	}
		section#portada > div.titulo{
			margin: 0 50% 2% 0;
			text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
		}
			section#portada > div.titulo b{
				color: #f79b1e;
				font-family: var(--fuente-primaria);
			}
		section#portada > div.descripcion{
			background: rgba(0,0,0,0.8);
			max-width: 700px;
			padding: 2%;
		}
			section#portada > div.descripcion p{
				color:#fff;
				font-size: 1.2em;
				position:relative;
			}


/*-----------------BOTÓN IR ARRIBA------------------------*/

.irarriba {
	padding:10px;
	background:#f79b1e;
	font-size:16px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
	display: none;
	transition: all 0.3s ease;
	border-radius: 50%;
}

	.irarriba:hover{
		border-radius:5px;
		background:#333;
	}

		h1 span{
			color:red;
			margin-right: 20px;
			font-size: 40px;
		}

/**/
header #redes span.icon-whatsapp{
	background-color: var(--whatsapp);
}
	header #redes span.icon-whatsapp:hover{
		background-color: var(--whatsapp-o);
	}
.contenedor-datos-contacto ul li span.icon-whatsapp{
	color: var(--whatsapp);
}
	.contenedor-datos-contacto ul li span.icon-whatsapp:hover{
		color: var(--whatsapp-o);
	}