@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,900&display=swap');

*{
	font-family: Montserrat;

}
body{
	
	padding: 0; 
	
	margin: 0; 
}

ul{
	padding: 0;

}

li{
	list-style: none;
}

a{
	text-decoration: none;
}

header{

	height: 40vh;
	

	position: relative;

}

header h1{
	
	font-weight: 700;
    
    font-size: 2.5em;
}

header nav{

	/*padding: 20px;*/
}

header nav ul{

	margin: 0;

	display: flex;

	justify-content: space-around;

	align-items: center;

/*	background: #ffffff7a;

	padding: 20px;*/

}

header nav ul li a{

	
	color: #22d4a0;
    
    font-weight: 500;
    
    text-decoration: none;
    
    text-transform: uppercase;


}

header nav ul li a:hover{

	color: yellow;

	transition: all 500ms ease-in-out;
}


header .center-box{

	text-align: center;

	position: absolute;

	padding: 20px;
	
    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;
	
}

main, footer{
	
	padding: 20px ;
	

}

main h2{
	font-size: 1.3em;
}

main .box{
	
	margin: auto;

	display: grid;
    
    grid-template-columns: 1fr 1fr;
    
    grid-gap: 40px;

/*	
	border-top: 1px solid #efefef;

	border-bottom: 1px solid #efefef;
*/

	padding: 40px 0;
}

main .box > div {
	
	max-width: 450px;

	justify-self: center;

	text-align: center;
}

main .box .box-title{

	color:  #25cfa0;
}


main .box .box-title h4{

	font-weight: 600;

	margin: 0;
}

main .box div p{

	line-height: 25px;

	font-size: 0.9em; 
}
.btn-miro{

	background: #22d4a0;
    
    padding: 10px;
    
    margin: 40px auto;
    
    width: 200px;
    
    display: block;
    
    border-radius: 5%;
    
    font-weight: bold;
    
    color: #ffffff;
}

.button{

	background: #4011d1;
    
    color: white;
    
    width: 100%;

    font-weight: 600;
    
    text-align: center;
    
    border-radius: 5px;
    
    padding: 5px;

    font-size: 0.9em;

	transition: all 600ms ease-in-out;
}

.button:hover{

	background: #22d4a0 ;

}
.list-integrantes{

	display: flex;

	justify-content: space-around;

	/*max-width: 600px;*/

	margin: auto;


}

.list-integrantes .box-integrante{
	
	padding: 20px;

	width: 200px;
	
	display: flex;
    
    flex-direction: column;
    
    align-items: center;

    justify-content: space-between;

}

.list-integrantes div img{

	border-radius: 50%;

	width: 100px;

	filter: grayscale(1);
}

.list-integrantes div h4{
	
	color: black;
	
	margin-bottom: 10px;

	font-weight: 500;
}

.section{
	text-align: center;
}

.section img{
	max-width: 100%;
}

.section h2{
	font-size: 3rem;
}

.active{
	color: yellow;
}

footer{

	color: #25cfa0;

	font-size: 0.9em;

	text-align: center;

	background: #4011d1; 

}

.datos-obligatorios{
	background: #4011d1;

	color: #22d4a0;

	padding: 10px 0;

}
.datos-obligatorios ul{
	display: flex;

	font-size: 0.9em;

	justify-content: space-around;

	align-items: center;

	flex-wrap: wrap;

	padding: 20px; 
}


.datos-obligatorios li{
	text-align: center;
	color: #fff;
}