@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;600&display=swap');

*{padding: 0;margin: 0; box-sizing: border-box; transition: 1s all;}

/*mobile*/

body{font-family: arial; color: #020000; background-color:#edc8ad;}

/* HEADER */
header{color:white; background-color: #CD6155; padding: 30px 0px;}
header h1{text-align: center;}
header h1 a{text-decoration:none; color: #fff; font-size: 50px; letter-spacing: 2px; font-family: 'Work Sans', sans-serif; font-weight: 600;}

/* NAV PRICIPAL */
nav ul li a:hover{color: #CB4335;} 
.principal{margin-bottom: 40px; padding: 8px 0; text-align: center; background-color: #F2F3F4;}
.principal ul{list-style: none; margin: 0 auto; letter-spacing: 2px;}
.principal ul li{display: inline-block; color: #CD6155; padding-left: 1rem;}
.principal ul li a{text-decoration: none; color: #F1948A; font-size: 20px; font-family: 'Work Sans', sans-serif; font-weight: 300; font-size: 1rem;}

/* NAV SECUNDARIO */
.nombres{background: #fff; margin: 1rem; padding: 5px; display: flex; justify-content: center;}
.nombres a{text-decoration: none; color: #909497; font-family: 'Work Sans', sans-serif; font-weight: 400; width: 80%;  display: inline-block; text-align: center; font-size: 0.9rem;}
.nombres a:hover{color: #CB4335;}

/* MAIN ARTICLE 1 */
.nosotros{padding: 1rem; color:white;}
.nosotros h3{text-align: center; padding: 10px 0; margin-bottom: 40px; letter-spacing: 2px; border-top: 1px solid #FFF;  border-bottom: 1px solid #FFF; font-size: 1rem; font-family: 'Work Sans', sans-serif; font-weight: 400; color: #c71f0d;}

.fotos{padding-bottom: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: center;}
.fotos img{width: 19%; height: 19%; border-radius: 100%;}

/* MAIN ARTICLE 2 */
.academico{padding: 1rem; color:white;}
.academico h3{text-align: center; padding: 10px 0; margin-bottom: 40px; letter-spacing: 2px; border-top: 1px solid #FFF;  border-bottom: 1px solid #FFF; font-size: 1rem; font-family: 'Work Sans', sans-serif; font-weight: 400; color: #c71f0d;}

.academico h4{color: #CB4335; line-height: 3rem; font-family: 'Work Sans', sans-serif; font-weight: 400;}
.academico p{font-size: 1rem; line-height: 1.3rem; font-family: 'Work Sans', sans-serif; font-weight: 300; color: #a03227;}

/* ASIDE */
.datos{color: #a03227; padding: 1rem;}
.datos h4{color: #CB4335; line-height: 3rem; font-family: 'Work Sans', sans-serif; font-weight: 400;}
.datos h5{line-height: 1rem; color: #CB4335; font-size: 1rem; margin-bottom: 1.3rem; font-family: 'Work Sans', sans-serif; font-weight: 300;}
.datos p{line-height: 1.5rem; font-family: 'Work Sans', sans-serif; font-weight: 300;}


/* FOOTER */
footer{background:#CD6155; color: #fddfc8; font-size: 0.6rem; padding: 1rem; text-align: center; font-family: 'Work Sans', sans-serif; font-weight: 400;}



/*MAPA*/
.arbol{width: 100%; height: 100%; display: flex;}

/*PLAN*/
body{background-color: #edc8ad; text-align: center;}
.plan{padding: 1rem;}
.logo-app{border-radius: 20px; height: 30%; width: 30%;}
h1{color: #CB4335; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size:2rem;}
h2{color: #fff; font-family: 'Work Sans', sans-serif; font-weight: 400; border-bottom: 2px solid #CB4335; border-top: 2px solid #CB4335;margin-top: 2rem; margin-bottom: 2rem; line-height: 2.5rem;}

.objetivo{color: #fff;}
.plan p{color: #fff; font-family: 'Work Sans', sans-serif; font-weight: 300;} 
    
/*UI KIT*/
.uikit h1{color: #CB4335; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 2rem; background-color: #fff; margin-top: 2rem; padding: 1rem;}
.uikit img{align-items: center; width: 100%;}

/*VIDEO*/
.video{display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; margin-bottom: 1rem;}
.video-container{width: 90%; height: 0; padding-bottom: 56.25%; position: relative;}
.video-container iframe{display: block; position: absolute; width: 100%; height: 100%;}
.incrustar{margin-bottom: 1rem;}



/*WIREFRAMES*/
.diseño h1{color:#CB4335; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 1.5rem; margin-bottom: 1.3rem;}
.wireframes{width: 100%;}



/*solo para cuando es una pantalla grande*/ /*responsive*/

@media screen and (min-width: 48rem){
    
    body{font-family: arial; color: #020000;}

/* HEADER */
    header{background-color: #020000;}
header h1 a{font-size: 70px; letter-spacing: 2px; font-family: 'Work Sans', sans-serif; font-weight: 600;}
    

/* NAV PRICIPAL */
.principal{padding: 10px 0;}
.principal ul{padding: 10px 100px; letter-spacing: 2px;}
.principal ul li{padding: 0px 60px;}
.principal ul li a{color: #FF7170; font-size: 20px; font-family: 'Work Sans', sans-serif; font-weight: 300; font-size: 1.3rem;}
    

/* NAV SECUNDARIO */
.nombres{padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: center;}
.nombres a{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: center;}


/* ASIDE */
.datos{color: #fff; padding: 1rem;}


/* FOOTER */
footer{background:#f8e2d2; color: #e39f6d; font-size: 0.8rem; padding: 1.5rem; text-align: center; font-family: 'Work Sans', sans-serif; font-weight: 400;}


/*MAPA*/
.arbol{display: flex; justify-content: space-around;}
    
/*PLAN*/
.logo-app{border-radius: 50px; height: 20%; width: 20%;}

.objetivo{margin-left: 10rem; margin-right: 10rem;}
.plan p{color: #fff; font-family: 'Work Sans', sans-serif; font-weight: 300;} 

.video{margin-top: 2rem; margin-bottom: 2rem;}
    .incrustar{margin-bottom: 1rem;}
    

/*WIREFRAMES*/
.diseño h1{color:#CB4335; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 2rem; margin-bottom: 2rem;} 
.wireframes{width: 80%;}
    

}