/*selector{propiedad: valor;}*/
@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap');

*{margin: 0; box-sizing: border-box;}

body{padding-top: 15rem;}

header{background-color: rgb(255,255,255);}

.main-header{text-align: center;
position: fixed;
top: 0;
left:0;
width: 100%;}

.imagen{width: width: 30%;
		max-width: 400px; 
		padding-top: 3rem;
		display: flex;
		margin-left: auto;}

.imagen1{width: 170px;
		display: block;
		margin-left: auto;
		margin-right: auto;}


nav{background-color: rgb(255,255,255);
	padding: 0.5rem;
	margin-bottom: 1%;} 

nav ul{ text-align: center;}

nav ul li{display: inline-block;
			width: 20%;}

nav ul li a{color: rgb(21,84,114); 
			text-decoration: none; 
			padding: 1rem;
			padding-left: 3rem;
			padding-right: 3rem;
			border-radius: 10px; 
			font-family: 'Chivo'; 
			font-weight: 700;}

.link-activo{background-color: rgba(243,98,53,0.90);
			color: rgb(255,255,255);
			font-family: 'Chivo'; 
			font-weight: 700;}

.link-otros:hover{
            background-color: rgba(243, 98, 53, 0.18);
			color: rgb(0, 0, 0);
			font-family: 'Chivo'; 
			font-weight: 700;}

section{background-color: rgb(255,255,255);}

#mockup{display: flex;
		background-image: url(../img/vector_fondo.svg);}

h1{color: rgb(21,84,114); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700; 
	font-size: 5rem;
	padding-left: 7rem;
	padding-top: 2rem;
	line-height: 1;}

h2{color: rgb(243,98,53); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700; 
	font-size: 3rem;
	padding-left: 7rem;}

.parrafo{color: rgb(30,30,30); 
		font-size: 16px; 
		font-family: 'Chivo'; 
		font-weight: 400;
		padding-left: 7rem;}

.descarga{color: rgb(21,84,114); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700; 
	font-size: 2rem;
	padding-left: 17%;
	padding-top: 1rem;}

.stores{width: 500px;
		display: flex;
		margin-left: 7rem;
		margin-right: auto;
		padding-top: 2rem;}


.light{color: rgb(50,50,50);
	font-family: 'Roboto'; 
	font-weight: 700, sans-serif;}


.alineacion{display: flex;}
.margintop{margin-top: 5%;}
.marginbottom{margin-bottom: 5%;}

.materias{	background-color: rgb(255,255,255);
			border-radius: 15px;
			width: 50%;
			text-align: center;
			padding-top: 2%;}

.materias1{	background-color: rgb(21,84,114);
			
			width: 50%;}

h3{margin-top: 5%;
	font-family: 'Chivo';
	font-weight: 700;
	color: rgb(243,98,53);
	font-size: 1.3rem;}

.alfiler{ width: 15%;}
.bubble{ width: 25%; }
.happy{ width: 25%; }


.asignatura{font-family: 'Roboto'; 
			font-weight: 400, sans-serif;
			text-decoration: none;
			padding-top: 15px;
			font-size: 17px;}

.app{background-color: rgb(21,84,114);
	
	width: 50%;
	padding-bottom: 2%;
	display: block;}

.app1{background-color: rgb(255,255,255);
	border-radius: 15px;
	width: 50%;
	text-align: center;
	padding-top: 2%;
	padding-bottom: 2%;
	display: block;}

.texto{	color:rgb(255,255,255);
		font-family: 'Chivo'; 
		font-weight: 400, sans-serif;
		text-align: left;
		padding-left: 15%;
		padding-top: 15%;
		padding-right: 15%}


.espaciado{padding: 38px;}

.imagen2{width: 200px; 
		padding: 1rem;
		display: block;
		margin-left: auto;
		margin-right: auto;
		border-radius: 160px;}

.descripcion{font-family: 'Chivo'; 
			font-weight: 400, sans-serif;
	 		font-size: 18px;
			padding-bottom: 2rem;}

.userflow{
    justify-content: center;
    margin-left: 3%;
    margin-right: 3%;
    background: rgb(21,84,114);
    border-radius: 20px;
    margin-bottom: 2%;
    box-shadow: 0px 4px 17px rgb(0 0 0 / 64%);
    width: 94%;
    height: 600px;
}


.datos{padding-top: 20px;}

h4 a{color: rgb(255,69,0);}

footer p{color: rgb(50,50,50); 
		font-size: 12px; 
		font-family: 'Roboto'; 
		font-weight: 400, sans-serif; 
		background-color: rgb(255,255,255);
		text-align: center;
		margin: auto;
		padding: 1rem;}

.información{color: rgb(50,50,50); 
		font-size: 12px; 
		font-family: 'Roboto'; 
		font-weight: 400, sans-serif;
		text-align: center;
		margin: auto;
		padding: 1rem;}


header nav a img{display:none;}

@media screen and (min-width: 481px) and (max-width: 768px/*o 48rem*/){

    .descarga{
    color: rgb(21,84,114); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700; 
	font-size: 1.5rem;
	padding-left: 17%;
	padding-top: 1rem;
    }
    
    .imagen1 {
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        margin-top: 3%;
    }

    
    .imagen2 {
        width: 160px;
        padding: 1.3rem;
		display: flex;
		border-radius: 160px;
    }
    
    .investigacion{
        margin-left: 10%;
        width: 80%;
        height: 400px;
    }
    

    .información{
        font-size: 11px;
    }
    
    .userflow{
        width: 60%;
        height: 800px;
        margin-left: 20%;
        margin-bottom: 5%;
    }
    
    .userflow2{
        width: 90%;
        height: 240px;
        margin-left: 6%;
        margin-top: 2%;
        margin-bottom: 2%;
    }
}


@media screen and (max-width: 480px/*o 30rem*/){

    .descarga{
    color: rgb(21,84,114); 
	font-family: 'Roboto Condensed'; 
	font-style: italic;
	font-weight: 700; 
	font-size: 1.5rem;
	padding-left: 17%;
	padding-top: 1rem;
    margin-top: 6%;
    }
    
    
    .imagen1 {
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        margin-top: 3%;
    }
    
    .información{
        font-size: 10px;
    }
    
    footer p{
        font-size: 10px;
    }
    
    .userflow{
        width: 90%;
        height: 800px;
        margin-left: 5%;
        margin-bottom: 5%;
    }
    
    .userflow2{
        width: 90%;
        height: 240px;
        margin-left: 6%;
        margin-top: 2%;
        margin-bottom: 2%;
    }
    
    /*boton hamburguesa*/
  .main-header{ display: flex;
  				justify-content: space-between;
  				text-align: left;}

  .main-header nav a img{width: 70px;
  					line-height: 4rem;
  					font-size: 1.5rem;
  					display: block;
  					margin-top: 70%;
  				    background-color: rgb(21,84,114);}

  .main-header .boton-menu{display: flex;
  							justify-content: center;
  							align-items: center;
  							line-height: 4rem;}

  .main-header nav{position: relative;}

  .main-header nav ul{ display: none;
  						list-style: none;
  						text-align: center;
  						padding: 0;
  						padding-bottom: 10%;
  						padding-top: 15%;
  						padding-bottom:15%;
  						margin: 0;}
  
  .main-header nav:hover ul{display: flex;
 						 	flex-direction: column;
  							position: absolute;
  							top: 100%;
  							right: 0;
  							background-color: rgb(21,84,114);
  							min-width: 10rem;}  

.main-header nav:hover ul li{line-height: 200%;
							}

  .main-header nav:hover ul li a{color: white;}
  .link-activo{background-color: transparent;}

  body{padding-top: 10rem;}
}