@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; color: white;}
body { height:100%; background: linear-gradient(to bottom left,#FF8462, #0059FE ); background-repeat: no-repeat; }

header {display: flex; flex-direction: column-reverse; align-items: center; margin:2rem 0 0.5rem 0; align-items: center; text-align: center; }
header nav a{text-decoration: none; font-weight: 500; border-radius: 1rem; padding: 0.3rem; font-size: 1.1rem; letter-spacing: 0.01rem; margin: 1rem 0.2rem 1rem 0.2rem;}
header nav a:hover {background: #ffffff3a;}
h1{font-size: 3rem; margin:2rem 0 0 0;}
.logo {max-width: 40%; height: auto; margin: 0.5rem 0 0 0;}

.bench{display: flex; justify-content: space-around; align-items: center; margin: 1rem 0 1rem 0;}
.jpg1 {max-width: 30%; height: auto;}
.jpg2 {max-width: 30%; height: auto;}
.jpg3 {max-width: 30%; height: auto;}

.nav.entrevistas {display: flex; align-items: center; padding: 2rem;}
.entrevistas {text-decoration: none; background:#ffffff3a; border-radius: 1rem; padding: 0.9rem;padding-left:3rem; padding-right:3rem; font-size: 1rem; margin-left: 25vw;}
.entrevistas:hover {font-size: 1.1rem;}


.figma p {align-self: flex-start; padding-left: 2rem; font-size: 1.2rem; margin: 2rem 0 1rem 0;}
.figma iframe {margin: 1.5rem 1rem 1.5rem 1rem; max-width: 90vw; height: 45vh;}


footer p{ text-align: center; font-size: 0.6rem; padding-left: 3rem; padding-right: 3rem; padding-top: 5rem; padding-bottom: 2rem;}

/*INDEX*/

.columnas {display: flex; margin: 2rem 0.5rem 2rem 0.5rem; justify-content: space-around; flex-direction: column;}   
.columnas article a {text-decoration: none; padding: 0.1rem; font-size: 0.9rem;}
.columnas article nav {margin: 1rem 1rem 1rem 1rem;}
.t1, .t2, .t3, .t4 {padding-left: 2.5rem; font-size: 1.2rem; margin: 1rem 0 1rem 0;}
.nombre{margin: 1rem 1rem 1rem 1rem;  font-weight: 500; font-size: 1rem;}
    .colgapp{letter-spacing: 0.1; font-size: 1.1;}
.infoacademica {margin: 1rem 1rem 1rem 1rem;font-size: 0.9rem;}
.infocursada {margin: 1rem 1rem 1rem 1rem;font-size: 0.9rem;}

/*Versión desktop*/
@media (min-width:576px) {

    header {padding: 2rem; display: flex; justify-content: space-between; align-items: center; flex-direction: row;}
    header nav a{text-decoration: none; font-weight: 500; border-radius: 1rem;font-size: 1.1rem; letter-spacing: 0.1rem;  padding: 0.9rem; padding-left:2.5rem; padding-right:2.5rem;}
    header nav a:hover {background: #ffffff3a; font-size: 1.2rem;} 
    .logo {max-width: 100vw; height: auto; margin: 0 0 0 0;}
    h1{font-size: 3rem; margin:0 0 0 0;}

    .figma { display: flex; flex-direction:column; align-items: center;}
    .figma iframe {margin: 1rem 0 1rem 0; max-width: 100vw; height: 60vh;}
    .figma p {align-self: flex-start; padding-left: 5rem; font-size: 1.3rem; margin: 0 0 1.5rem 0;}

    .bench{display: flex; justify-content: space-around; align-items: center; margin: 1rem 0 1rem 0;}
        .jpg1 {max-width: 30%; height: auto;}
        .jpg2 {max-width: 30%; height: auto;}
        .jpg3 {max-width: 30%; height: auto;}

    .entrevistas{margin-right: auto; margin-left: auto;}

    .rectangulo1, .rectangulo2 {
        position: relative;
        width: 30rem; 
        height: 2rem; 
        background: #ffffff3a;
        border-radius: 3rem;
        right: 38rem;
        bottom: -1.8rem;
   }

   .divlogo { display: flex; align-self: flex-end;}
   .logo {max-width: 60%; height: auto;}

   footer p{ text-align: center; font-size: 0.7rem; padding-left: 10rem; padding-right: 10rem; padding-top: 5rem; padding-bottom: 2rem;}


/*INDEX*/

.columnas {display: flex; margin: 2rem 0.5rem 2rem 0.5rem; justify-content: space-around; flex-direction: column;}   
.columnas article a {text-decoration: none; padding: 0.9rem; padding-left:2.5rem; padding-right:2.5rem; font-size: 1rem;}
.columnas article nav {margin: 1rem 2rem 2rem 8rem;}
.t1, .t2, .t3, .t4 {padding-left: 5rem; font-size: 1.3rem; margin: 0 0 2rem 0;}
.nombre{margin: 1rem 2rem 2rem 8rem;  font-weight: 500; font-size: 1.2rem;}
    .colgapp{letter-spacing: 0.2; font-size: 1.3;}
.infoacademica {margin: 1rem 2rem 2rem 8rem;}
.infocursada {margin: 1rem 2rem 2rem 8rem;}


.rectanguloa{
    position:relative;
    width: 30rem;
    height: 2rem;
    background:#ffffff3a ;
    border-radius: 3rem;
    right: 8rem;
    top:1.8rem;
}
.rectangulob{
    position:relative;
    width: 30rem;
    height: 2rem;
    background:#ffffff3a ;
    border-radius: 3rem;
    right: 8rem;
    top:1.8rem;
}
.rectanguloc{
    position:relative;
    width: 30rem;
    height: 2rem;
    background:#ffffff3a ;
    border-radius: 3rem;
    right: 8rem;
    top:1.8rem;
}
.rectangulod{
    position:relative;
    width: 30rem;
    height: 2rem;
    background:#ffffff3a ;
    border-radius: 3rem;
    right: 8rem;
    top:1.8rem;
}
}