@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

*{padding: 0%; margin: 0%; box-sizing: border-box;}
body {background:rgb(12, 12, 12);}

/* header */
header {text-align: center; margin-top: 2rem; 
}

header a {
    text-decoration: none;
    color: #FF6633 ;
    font-family: 'Roboto', sans-serif; font-size: 1.5rem; 
}


h1 {color: #FF6633; font-family: 'Playfair Display', serif; font-size: 2rem; margin-top: 1rem ;margin-bottom: 1.5rem; }
h2 {color: #cacaca; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 300 ; margin-top: 1rem; margin-bottom: 1rem;}

.fotoheader {border-radius: 50%; width: 50%; margin-top: 2rem; border-width: 0.3rem; border-style: solid; border-color: #FF6633;}

.link { margin-bottom: 1.5rem;}
.link:hover {font-weight: 600;}

nav {
    background: #FF6633; 
    padding: 2%; 
    font-family: 'Roboto', sans-serif; 
    display: flex; 
    justify-content: space-around;

}

nav a{
    text-decoration: none;
    color: black;
    font-size: 0.9rem;    

    
}

.inicio:hover {font-weight: 500 ;}
.plan:hover {font-weight: 500 ;}
.mapa:hover {font-weight: 500 ;}
.app:hover {font-weight: 500 ;}
.catedra:hover {font-weight: 500 ;}

/* seccion 1 MATERIAS */

h3 {color: #FF6633; 
    font-family: 'Playfair Display', serif; 
    font-size: 2rem; 
    font-weight: 400;
    margin: 3rem;
    text-align: center;
}

ul{list-style-type: none; padding: 0%;}

.materias h4 {
    color: rgb(201, 201, 201) ;
    font-family: 'Roboto', sans-serif; 
    font-weight: 500; 
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.numero {font-size: 2.4rem;}

.materias {
    background: rgb(0, 0, 0);
    color: rgb(201, 201, 201) ; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
    font-size: 1rem; 
    padding: 1.5rem;
    border-width: 0.1rem;
    border-style: solid;
    border-color: white;
}

.materias-1 h4 {
    color: #FF6633 ;
    font-family: 'Roboto', sans-serif; 
    font-weight: 500; 
    font-size: 1.2rem;
    margin-bottom: 0.9rem;
}

.barra {font-size: 2rem;}


.materias-1 {
    background: rgb(0, 0, 0);
    color: rgb(201, 201, 201) ; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
    font-size: 0.9rem; 
    padding: 1.5rem;
    border-width: 0.1rem;
    border-style: solid;
    border-color: #FF6633;
   
}


/* seccion 2 INTEGRANTES */

.equipo {
    margin: 0.5rem;
    margin-top: 7rem;
    color: #FF6633;
    font-family: 'Playfair Display', serif; 
    font-weight: 400;
    
}

.integrantes a {
    text-decoration: none;
    color: white;
}

.integrantes {
    margin: 2.5rem;
    font-size: 1.4rem;
    padding: 1rem;
    border-width: 0.2rem;
    border-style: solid;
    border-color: #FF6633;
    margin-bottom: 5rem;
    
}

.maria:hover {font-weight: 500 ; color:#FF6633 ;}
.augusto:hover {font-weight: 500 ;  color:#FF6633 ;}


/* seccion 3 DATOS OBLIGATORIOS */

.datos-obligatorios {
    background: rgb(255, 255, 255) ; 
    padding-top: 2rem; padding-bottom: 1rem; 
    font-family: 'Roboto', sans-serif;
    width: 100%;
    padding-left: 4rem; padding-right: 4rem; padding-bottom: 3rem; padding-top: 3rem;
    
}

.datos {
    font-size: 0.9rem;
    margin-bottom: 0.7rem; margin-top: 0.6rem;
}

.datos-obligatorios p {font-weight: 300; font-size: 0.9rem;}

.universidad { margin-bottom: 3rem;}

.logocatedra {width: 105%; margin-bottom: 1.5rem; }




/* footer */

footer {background: black; }
footer p {color: rgb(255, 255, 255); font-size: 0.9rem ;  text-align: center; padding: 2rem;}




/* VERSIÓN DESKTOP */

@media (min-width:576px) {

h1 { font-size: 2.7rem; }

h2 {font-size: 1.5rem;}

.fotoheader {width: 15%; }

nav a { font-size: 1.3rem;
    padding-right: 4rem;
    padding-left: 4rem;
}

nav {
    background: #FF6633; 
    padding: 2%; 
    font-family: 'Roboto', sans-serif; 
}


    
section { 
    display: flex; 
    justify-content: space-around;
    width: 80%;
    margin: auto;
}

.primero { 
    padding-right: 1.2rem; padding-left: 1.2rem;
}

.segundo {
    padding-right: 0.4rem; padding-left: 0.4rem;
}

.tercero {
    padding-right: 0.3rem; padding-left: 0.3rem;
}

.a1 {
    padding-right: 3rem; padding-left: 3rem;
}

.a3 {
    padding-right: 2rem; padding-left: 2rem;
}

.datos-obligatorios {
    background: rgb(255, 255, 255) ; 
    padding-top: 2rem; padding-bottom: 1rem; 
    font-family: 'Roboto', sans-serif;
    width: 100%;
    padding-left: 8rem; padding-right: 8rem; padding-bottom: 3rem; padding-top: 3rem;
    
}


}