@import url("page.css");
@import url("slider_styles.css");
*, ::before, ::after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body{
	font-family: "Poppins", sans-serif;
}

:root{
	--color-primary: #82C06E;
	--color-secondary: #629150;
	--color-green1: #d5f2b1;
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-violet: #32177e;
	--color-purple: #8039d7;
	--color-grey-1: #EDEDED;
	--color-grey-2: #38353d;
	--color-grey-3: #25222d;
	--color-grey-4: #585360;
	--color-yellow1: #f9f69b;
}

h1{
	font-size: 3.7rem;
	line-height: 1em;
}

h2{
	font-size: 2.2rem;
	line-height: 1em;
}

h3{
	font-size: 1.5rem;
	font-weight: 300;
}

h4{
	font-size: 1.2rem;
	line-height: 1.4em;
}

p{
	font-size: 14px;
	line-height: 1.4em;
	font-weight: 300;
}

.container{
	width: 70%;
	margin: auto;
}

/*HERO*/

.hero{
	height: 100vh;
	background: url("../images/fondo_ini1.jpg")no-repeat bottom center;
	/*background-image: linear-gradient(to top, #cc208e 0%, #6713d2 100%);*/
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10vw;
	color:var(--color-white);
}

.principal{
	width: 80%;
}

.slogan{
	display: block;
	position: relative;
	font-size: 4.8rem;
	font-weight: 900;
	line-height: 1em;
	margin-bottom: 20px;
}

.bajada{
	font-size: 1.8rem;
	line-height: 1em;
	font-weight: 100;
	color:var(--color-primary);
	margin-bottom: 20px;
}

.boton-mas{
	padding: 10px;
	background-color: var(--color-primary);
	border-radius: 0;
	width: 150px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: .4s ease-out;
}

.boton-mas:hover{
	background-color: var(--color-purple);
}

/*HEADER*/

.main-header{
	position: fixed;
	/*display: flex;
	justify-content: space-between;*/
	align-items: center;
	height: 90px;
	width: 100vw;
	/*padding: 0 10vw;
	background: rgba(27,33,38,.2);*/
	z-index: 999;
	transition: .4s ease-out;
}

/*NAVEGACION*/

.menubar{
	/*position: absolute;*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 90px;
	width: 100vw;
	margin: auto;
	padding: 0 10vw;
	z-index: 1;
	transition: .4s ease-out;
}

.menu-logo{
	height: 55px;
}

.menu-logo img{
	height: 100%;
}

li ul{
	display: none;
}

/*Make dropdown links vertical*/
li ul li{
	display: block;
	float: none;
}

/*Prevent text wrapping on dropdown links*/
li ul li a{
	width: auto;
	/*min-width: 100px;
	/*padding: 0 20px;*/
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover{
	display: block;
}

.navbar-nav{
	display: flex;
	justify-content: space-between;
	/*position: fixed;*/
	list-style: none;
	font-weight: 300;
}

.nav-item{
	display: block;
	align-items: center;
	text-align: center;
	/*height: 90px;
	/*min-width: 80px;*/
	float: right;
}

.nav-item{
	transition: opacity .4s ease-in-out, transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item:nth-of-type(2){
	transition: opacity .4s ease-in-out, transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: .1s;
}

.nav-item:nth-of-type(3){
	transition: opacity .4s ease-in-out, transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: .2s;
}

.nav-item:nth-of-type(4){
	transition: opacity .4s ease-in-out, transform .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: .3s;
}

.nav-link{
	font-size: .9rem;
	/*height: 90px;*/
	margin: .2rem;
	padding: 1rem .5rem;
	text-decoration: none;
	color: var(--color-primary);
	text-transform: uppercase;
	transition: .2s ease-out;
}

.nav-link:hover{
	color:var(--color-white);
}

.nav-subitem{
	height: 30px;
	padding: 5px 0;
	/*background-color: var(--color-primary);*/
}

.nav-subitem a:hover{
	background-color: var(--color-primary);
}

.menu-icon{
	position: relative;
	padding: 26px 10px;
	cursor: pointer;
	z-index: 1;
	display: none;	
}

.menu-icon_line{
	display: block;
	position: relative;
	background: var(--color-primary);
	height: 2px;
	width: 20px;
	border-radius: 4px;
	transition: background 1s ease;
}

.menu-icon_line::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	background: var(--color-primary);
	transform: translateY(-5px);
	transition: background 1s ease;
}

.menu-icon_line::after{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	background: var(--color-primary);
	transform: translateY(5px);
}

.menu-btn{
	/*display: none;*/
	position: absolute;
	top: -100px;
}

.menu-btn:focus ~ .menu-icon .menu_icon_line::before {
	transform: translateY(-7px);
}

.menu-btn:focus ~ .menu-icon .menu_icon_line::after {
	transform: translateY(7px);
}

.main-header.scrolled{
	height: 90px;
	background: rgba(27,33,38,.9);
	color:var(--color-primary);
}

.main-header.scrolled .menu-icon_line, .main-header.scrolled .menu-icon_line::before, .main-header.scrolled .menu-icon_line::after {
	background: var(--color-primary);
}

/*ANIMACIONES*/

@keyframes pulse {
	from {
		box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.6);
		background: rgba(255, 255, 255, 0.6);
	}

	to {
		box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0);
		background: rgba(255, 255, 255, 0);
	}
}

@keyframes openTop{
	0%{transform: translateY(-5px) rotate(0deg);}
	50%{transform: translateY(0px) rotate(0deg);}
	100%{transform: translateY(0px) rotate(90deg);}
}

@keyframes openMid{
	50%{transform: rotate(0deg);}
	100%{transform: rotate(45deg);}
}

@keyframes openBtm{
	0%{transform: translateY(5px) rotate(0deg);}
	50%{transform: translateY(0px) rotate(0deg);}
	100%{transform: translateY(0px) rotate(90deg);}
}

@keyframes closeTop{
	0%{transform: translateY(-5px) rotate(0deg);}
	50%{transform: translateY(0px) rotate(0deg);}
	100%{transform: translateY(0px) rotate(90deg);}
}

@keyframes closeMid{
	50%{transform: rotate(0deg);}
	100%{transform: rotate(45deg);}
}

@keyframes closeBtm{
	0%{transform: translateY(5px) rotate(0deg);}
	50%{transform: translateY(0px) rotate(0deg);}
	100%{transform: translateY(0px) rotate(90deg);}
}


.capitulo{
	background-color: var(--color-grey-3);
	color: var(--color-white);
	padding: 40px;
	width: 100%;
	background-image: url("../images/fondo-capitulo.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
	position: relative;
	overflow: hidden;
}

/*SECCION*/

.titulo{
	color: var(--color-primary);
	margin-bottom: 20px;
	text-align: center;
}

.descripcion{
	text-align: center;
	margin-bottom: 20px;
}

.container h2{
	font-weight: 900;
}

.container h4{
	font-weight: 100;
}

/*FICHA*/

.ficha-servicios{
	background-color: var(--color-grey-1);
}

.ficha-content{
	display: flex;
	width: 100%;
}

.ficha{
	width: 50%;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

.ficha img{
	width: 100%;
}

.ficha-alt{
	
}

.ficha-alt img{
	display: none;
	width: 100%;
}

.ficha-textos{
	width: 65%;
	margin: auto;
	padding: 0;
}

.ficha-textos h2{
	color: var(--color-grey-4);
}

.ficha-titulo{
	margin-bottom: 20px;
}

.ficha-descripcion{
	margin-bottom: 20px;
}

.ficha-btn{
	padding: 10px;
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: 0;
	width: 150px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: .3s ease-out;
}

.ficha-btn:hover{
	background-color: var(--color-secondary);
}

/*EQUIPO DE TRABAJO*/
.nuestro-equipo{
	background-color: var(--color-grey-1);
	padding: 20px 0;
}

.tarjetas{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.card{
	position: relative;
	display: block;
	padding-bottom: 25px;
	width: 32%;
	background-color:var(--color-white);
	border-radius: 0;
}

.card-foto{
	width: 100%;
}

.card-foto img{
	width: 100%;
}

.card-content{
	padding: 25px;
	margin-bottom: 10px;
}

.card-titulo{
	text-align: center;
	padding: 20px;
	color: var(--color-purple);
	text-transform: uppercase;
}

.card-cargo{
	font-weight: 300;
	color: var(--color-primary);
	margin-bottom: 5px;
}

.card-nombre{
	font-weight: 700;
	color: var(--color-grey-4);
	margin-bottom: 10px;
	text-transform: uppercase;
}

.card-titulos{
	margin-bottom: 10px;
	color: var(--color-grey-2);
}

.card-listado{
	display: flex;
	font-size: 1rem;
	line-height: 1.1em;
	text-decoration: none;
	list-style: none;
}

.card-listado i{
	color: var(--color-primary);
}

/*CONTACTO*/

.contacto{
	background-color: var(--color-primary);
}

.contacto-cols{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.contacto-frase{
	display: flex;
  	justify-content: center;
  	align-items: center;
	color: var(--color-grey-3);
	width: 25%;
	padding: 20px 0;
}

.contacto-block{
	width: 70%;
	padding-top: 20px;
}

.contacto-titulo{
	text-align: center;
	padding: 20px;
	color: var(--color-purple);
	text-transform: uppercase;
	margin-bottom: 10px;
}

.formulario{
	display:block;
	width: 100%;
	margin-bottom: 20px;
}

.bajada-contacto{
	font-size: 1.1rem;
	line-height: 1.2rem;
	font-weight: 300;
	text-align: center;
	padding: 10px;
	background-color: var(--color-secondary);
	color: var(--color-white);
	border-radius: 0;
	margin-bottom: 20px;
}
.bajada-contacto h2{
	color: var(--color-white);
	margin-bottom: 15px;
}

.input{
	background: var(--color-white);
	color: var(--color-grey-3);
	outline: none;
	border: 1px solid var(--color-grey-1);
	border-radius: 0;
	padding: 20px 10px;
}

input[type="text"],
input[type="email"]{
	display: inline-block;
	font-family: 'Prompt', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	width: 100%;
	margin-bottom: 5px;
}

.form textarea{
	font-family: 'Prompt', sans-serif;
	font-size: .9rem;
	font-weight: 300;
	width: 100%;
	margin-bottom: 10px;
}

input[type="submit"]{
	padding: 10px;
	background-color: var(--color-primary);
	font-family: 'Prompt', sans-serif;
	font-size: .9rem;
	color: var(--color-white);
	border-radius: 0;
	width: 150px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: .4s ease-out;
}

input[type="submit"]:hover{
	cursor: pointer;
	color: var(--color-white);
	background-color: var(--color-secondary);
}

.g-recaptcha{
	width: 50%;
	margin-bottom: 10px;
}

/*BOTON UP*/
.button-up{
	width: 40px;
	height: 40px;
	background-color: var(--color-secondary);
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-white);
	border-radius: 50%;
	font-size: 24px;
	position: fixed;
	z-index: 10;
	bottom: 30px;
	right: 30px;
	cursor: pointer;
	transition: all 300ms ease;
	transform: scale(0);
}

.button-up:hover{
	transform: scale(1.1);
}


/*FOOTER*/
.footer{
	width: 100%;
	border-bottom: 8px solid var(--color-primary);
}

.footer h4{
	font-weight: 700;
	color: var(--color-primary);
	padding: 5px;
}

.logo-footer{
	height: 90px;
}

.logo-footer img{
	height: 100%;
}

.contactos-footer{
	background-color: var(--color-grey-3);
	padding: 30px;
}

.contactos{
	display: flex;
	justify-content: space-between;
	width: 70%;
	margin: auto;
}

.menu-footer{
	list-style: none;
	text-decoration: none;
}

.menu-footer i{
	color: var(--color-white);
}

.redes-sociales{
	background-color: var(--color-grey-2);
}

.redes-sociales h4{
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
	padding-top: 20px;
}

.redes{
	display: flex;
	justify-content: space-between; 
	width: 20%;
	margin: auto;
	padding: 20px;
}

.rrss{
	font-size: 1.4rem;
	color: var(--color-primary);
	transition: .4s ease-out;
}

.rrss:hover{
	color: var(--color-white);
}

.copyright{
	font-size: .7rem;
	text-align: center;
	background-color: var(--color-grey-2);
	color: var(--color-secondary);
	padding: 15px;
}

/*RESPONSIVE*/

@media screen and (max-width: 768px){
	h1{
	font-size: 3rem;
}

.container{
	width: 90%;
}	

.principal{
	width: 90%;
}	
	
.slogan{
	position: relative;
	font-size: 2.4rem;
	font-weight: 900;
	line-height: 1em;
}
	
.bajada{
	font-size: 1.2rem;
	line-height: inherit;
}	
	
	.menu-icon{
		display: block;
	}
	
	.menu-icon_line{
		animation: closeMid .8s backwards;
		animation-direction: reverse;
	}
	
	.menu-icon_line::before{
		animation: closeTop .8s backwards;
		animation-direction: reverse;
	}
	
	.menu-icon_line::after{
		animation: closeBtm .8s backwards;
		animation-direction: reverse;
	}
	
	.navbar-nav{
		position: absolute;
		top:0;
		left: 0;
		opacity: 0;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		padding: 10rem 0;
		width: 100vw;
		height: 100vh;
		font-size: 1.5rem;
		color: var(--color-white);
		background: var(--color-grey-2);
		transition: opacity .8s .5s, clip-path 1s .5s;
		clip-path: circle(200px at top right);
	}
	
	.nav-item{
		opacity:0;
		transform: translateX(50%);
		width: 100%;
		text-align: center;
	}
	
	.nav-link{
		display: block;
		padding: 2rem 0;
	}
	
	.menu-btn:checked ~ .navbar-nav{
		opacity: 1;
		clip-path: circle(100% at center);
	}
	.menu-btn:checked ~ .navbar-nav .nav-item{
		opacity: 1;
		transform: translateX(0);
		transition: opacity .4s ease-in-out, transform .6s cubic-bezier(0.175,0.885,0.32, 1.275);
	}
	
	.menu-btn:checked ~ .navbar-nav .nav-item:nth-of-type(1) {
	transition-delay: .7s;
	}
	
	.menu-btn:checked ~ .navbar-nav .nav-item:nth-of-type(2) {
	transition-delay: .8s;
	}
	
	.menu-btn:checked ~ .navbar-nav .nav-item:nth-of-type(3) {
	transition-delay: .9s;
	}
	
	.menu-btn:checked ~ .navbar-nav .nav-item:nth-of-type(4) {
	transition-delay: 1s;
	}
	
	.menu-btn:checked ~ .menu-icon{
		border-radius:50%;
		animation: pulse 1s;
	}
	
	.menu-btn:checked ~ .menu-icon .menu-icon_line{
		background: var(--color-white);
		animation: openMid .8s forwards;
	}
	.menu-btn:checked ~ .menu-icon .menu-icon_line::before{
		background: var(--color-white);
		animation: openTop .8s forwards;
	}
	.menu-btn:checked ~ .menu-icon .menu-icon_line::after{
		background: var(--color-white);
		animation: openBtm .8s forwards;
	}
	
capitulo{
	padding: 0;
}	
	
/*FICHA*/

.ficha-content{
	display: block;
}

.ficha{
	width: 100%;
	display: block;
  	justify-content: center;
  	align-items: center;
}

.ficha img{
	display: none;	
}	

.ficha-alt img{
	display: block;
	width: 100%;
}	

.ficha-textos{
	width: 85%;
	margin: auto;
	padding: 15px 0;
}	
	
/*TARJETAS*/

.tarjetas{
	display: block;
}

.card{
	width: 100%;
	margin-bottom: 15px;
}
	
/*CONTACTO*/

.contacto-cols{
	display: block;
	width: 100%;
}

.contacto-frase{
	display: block;
	width: 100%;
}

.contacto-block{
	width: 100%;
	padding-top: 10px;
}
	
.formulario{
	margin-bottom: 0;
	padding-bottom: 10px;
}	
	
/*FOOTER*/

.logo-footer{
	display: none;
	height: 80px;
	margin-bottom: 10px;
}

.logo-footer img{
	height: 100%;
}

.contactos-footer{
	padding: 15px;
}

.contactos{
	display: block;
	justify-content: center;
	align-items: center;
	width: 60%;
	margin: auto;
}	
	
.footer-item{
	display: flex;
}
	
.nav-link{
	margin: 0;
	padding: 0;
}	
	
.redes{
	width: 60%;
	padding: 20px;
}	
	
}