@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*,*::after,*::before{
	margin: 0;
	border: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: 'Roboto', sans-serif;
	word-wrap: break-word;
	font-size: 20px;
	background-color: #06070a;
	color: #fff;
}
html{scroll-behavior: smooth;}
img{max-width: 100%;}
section{padding-top: 30px;}

.start{
	position: fixed;
	width: 2px;
	height: 2px;
	background-color: #fff;
}
#inicial{
	background-color: #06070a;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100vh;
}
#inicial .card-one{
	width: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#inicial .card-one .photo{
	padding-bottom: 16px;
	text-align: center;
	color: #fff;
}
#inicial .card-one .btns{
	margin-top: 36px;
}
#inicial .card-one .btns a{
	text-decoration: none;
	margin-right: 16px;
	padding: 16px;
	border-radius: 4px;
	cursor: pointer;
	color: #fff;
}
#inicial{
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
#inicial img{  
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
#halcon{
	right: 0;
}
#resize{
	left: 0;
}
.txt{
	background: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
	background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: tomato;
}
.txt h1{
	font-size: 2.5em;
	font-weight: 900;
}
.txt h3{
	font-size: 2em;
	font-weight: 800;
}


#cv{background-color: #ea8711;}
#contac{background-color: #52ca79;}
/*
	*Card-generica
*/
.dual{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.card-dos{
	max-width: 700px;
	text-align: justify;
}
.card-dos h2,.formulario h2{
	padding: 16px 0px;
	font-size: 1.7em;
	font-weight: 800;
	width: 100%;
	border-bottom: 3px solid #f23276;
	color: #6edece;
}
.card-dos p, .contenido > h3,.card-dos > ul > li,label{
	font-size: 1em;
	padding: 16px 0;
	background: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
	background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: tomato;
}
/* 
	*Tecnologias
*/
#tec > .dual > .card-dos{
	width: 700px;
}
.card-dos > ul{
	list-style: none;
	padding: 16px 0px;
	text-align: center;
}
.card-dos > ul > li{
	padding: 6px 0;
}
/* 
	*Linea del tiempo
*/
.tiempolinea::before{
	content: '';
	position: absolute;
	left: 50%;
	width: 2px;
	height: 100%;
	background: #c5c5c5;
}
.tiempolinea{
	position: relative;
}
.tiempolinea ul li{
	list-style: none;
	line-height: normal;
	position: relative;
	width: 50%;
	padding: 20px 40px;
}
.tiempolinea ul li:nth-child(odd){
	float: left;
	text-align: right;
	clear: both;
}
.tiempolinea ul li:nth-child(even){
	float: right;
	text-align: left;
	clear: both;
}
.contenido{
	padding-bottom: 20px;
}
.tiempolinea ul li:nth-child(odd)::before{
	content: '';
	position: absolute;
	top: 24px;
	right: -6px;
	width: 10px;
	height: 10px;
	background: #f23276;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(233,33,99,.2);
}
.tiempolinea ul li:nth-child(even)::before{
	content: '';
	position: absolute;
	top: 24px;
	left: -4px;
	width: 10px;
	height: 10px;
	background: #f23276;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(233,33,99,.2);
}
.tiempolinea ul li h3{
	color: #f23276;
}
.tiempolinea ul li:nth-child(odd) .tiempo{
	position: absolute;
	top: 12px;
	right: -100px;
	padding: 8px 16px;
	background: #f23276;
	color: #fff;
	border-radius: 18px;
	font-size: 14px;
	box-shadow: 0 0 0 3px rgba(233,33,99,.3);
}
.tiempolinea ul li:nth-child(even) .tiempo{
	position: absolute;
	top: 12px;
	left: -100px;
	padding: 8px 16px;
	background: #f23276;
	color: #fff;
	border-radius: 18px;
	font-size: 14px;
	box-shadow: 0 0 0 3px rgba(233,33,99,.3);
}
#lider a{
	color:#f23276;
}
/* 
	#* Formulario
*/
#contacto{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.formulario{
	width: 700px;
}

.formulario .card-for{
	padding: 16px 0;
}
.formulario input, .formulario textarea{
	width: 100%;
	border: 1px solid black;
	font-size: 1em;
	padding: 10px;
}
.btn-for{
	background-color: #52ca79;
	color: #fff;
	padding: 64px 8px;
	border-radius: 3px;
	cursor: pointer;
}
.redes{
	display: flex;
	width: 700px;
	justify-content: space-between;
	padding: 16px 0;
}
.icon{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	color: #6edece;
}
.icon img{
	width: 50px;
	padding: 0px 10px;
}

.whatsapp{
	font-size: 2.7em;
	padding: 16px 0;
}
.whatsapp span{
	color:#f23276 !important;
}
.whatsapp > .icon{
	justify-content: space-between;
	width: 700px;
}
.whatsapp > .icon > img{
	width: 200px;
}
.wm-body{
	position: fixed;
	z-index: 3;
	bottom: 0;
	right: 0;
	background-color: #9085fb;
	width: 350px;
	border-radius: 3px;
	animation: tadaa .5s linear;
}
.wm-close{
	text-align: right;
	font-size:1.5em ;
	padding: 3px 16px;
	cursor: pointer;
}
.wm-msn{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
.wm-msn img{
	width: 70px;
	text-align: center;
}
.wm-msn h1{
	font-size: 1.4em;
}
@keyframes tadaa {
	0%{
		opacity: 0;
		bottom: -200px;
	}
	100%{
		opacity: 1;
		bottom: 0px;
	}
}
@media (max-width:1000px){
	.tiempolinea{
		width: 100%;
	}
}
@media (max-width:767px){
	.dual{
		max-width: 100%;
	}
	.dual .card-dos h2{
		text-align: center;
	}
	.dual .card-dos p{
		padding: 20px;
	}
	.tiempolinea{
		width: 100%;
	}
	.tiempolinea::before{
		left: 20px;
	}
	.tiempolinea ul li:nth-child(2n) .tiempo{
		left: 0;
		top: 0;
		width: 70px;
		text-align: center;
	}
	.tiempolinea li:nth-child(odd),
	.tiempolinea li:nth-child(even){
		width: 100%;
		text-align: left;
		padding-left: 50px;
		padding-bottom: 50px;
	}
	.tiempolinea li:nth-last-child(odd)::before,
	.tiempolinea li:nth-last-child(even)::before{
		top: -18px !important;
		left:16px !important;
	}
	.tiempolinea ul li:nth-child(2n+1) .tiempo{
		left:0;
		top: 0;
		width: 70px;
		text-align: center;
	}
	.tiempolinea ul li:nth-child(2n+1) {
		text-align: left !important;
	  }
	  .contenido{
		  padding: 30px 0px !important;
	  }
	.formulario{
		max-width: 100%;
		padding: 20px;
	}
	.whatsapp .icon{
		max-width: 100%;
		width: 100% !important;
	}
	.whatsapp .icon img{
		width: 50px;
	}
	.whatsapp .icon span{
		font-size: .5em;
	}
	.redes{
		flex-direction: column;
		justify-content: center;
		max-width: 100%;
	}
	.icon{
		padding: 16px 0px;
		justify-content: center;
		flex-direction: column;
	}
	#tec > .dual > .card-dos {
		max-width: 100%;
	  }
	.dual .card-dos{
		padding: 20px;
	}
}
@media (max-width:514px){
	.btns{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	#inicial{
		padding: 20px !important;
	}
	.card-one{
		z-index: 2;
	}
	.wm-body{
		max-width: 100%;
	}
}