@charset "utf-8" ;


@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*font-family: 'Roboto', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
/*font-family: 'Fugaz One', cursive;*/


/* "reseteo" selector universal */
*{
    /* para que el ancho de las cajas
       se calcule hasta los bordes y NO
       sólo por sus contenidos */
    box-sizing: border-box;
  
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

/* Colores
violeta #be8bdc
amarillo #F5D488
celeste #boc9es
naranja #f5b488
rosa #dc8ba3
*/

body{
    background-color: #dc8ba3;
}

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

/* TODOS los vínculos */
a {
    /* elimina los subrayados */
    text-decoration: none;
}

a:hover{
    color: #f5b488;
}

h1{
    color: black;
    font-size: 2em;
    font-family: 'Fugaz One', cursive;
}

h2{
    color: black;
    font-family: 'Fugaz One', cursive;

    margin-top: 1em;
    margin-bottom: 1em;
}

h3{
    color: black;
    font-family: 'Fugaz One', cursive;
}

img{
    width: 100%;
    height: auto;
}

p{
    box-sizing: border-box;
  
}

.contenedora {
    max-width: 50rem; /* limita el ancho a 800px */
    margin: 0 auto; /* centra "la caja" horizontalmente */
}

header{
    background-color: #be8bdc;
    font-family: 'Fugaz One', cursive;
    padding: 2em;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}   

#logo{
    max-width: 50%;
}

/* ----
   menu
   ---- */

nav {
    position: relative; /* para ser origen de coordenadas de sus descendientes */
}

/* botón "hamburguesa" */
.menu-btn{
  
  padding: .75rem;
  width: 3rem;
  height: 3rem;

  position: absolute; /* fijo, no "scrolea", no genera scroll */
  bottom: 1.5em; /* emplazamiento */
  right: 0em; /* emplazamiento */
  z-index: 9000; /* en capa superior */
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "click" */
}

.menu-fondo {
    padding: .75rem;
    width: 3rem;
    height: 3rem;
  
    position: absolute; /* fijo, no "scrolea", no genera scroll */
    top: 0em; /* emplazamiento */
    right: 0em; /* emplazamiento */
    z-index: 9000; /* en capa superior */
    cursor: pointer;
    transition: all 0.3s ease-out; /* anima el "click" */
}

/* fondo del botón "hamburguesa" */
.menu-fondo {
  background: #88d3f5;
  /*box-shadow: -5px 5px 5px rgba(0, 20, 20, 0.2);*/
  z-index: 8000; /* capa superior, pero debajo del menu ppte dicho */
  
}

/* cuando "nav" tiene la clase "menuVisible" */
.menuVisible .menu-fondo {
  background: #88d3f5;
  /* se agranda y se mueve */
  width: 200vw;
  height: 240vw;
  right: -100vw;
  top: -100vw;
}

/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: black;
  transition: all 0.3s ease-out;
  position: relative; /* capa superior, pero no parece */
  z-index: 9000; /* capa superior */
}

/* cada barra, transformacion para formar la "X" */
.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);
  ;
}
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* menú propiamente dicho */
nav ul {
  position: absolute; /* sale del fondo */
  right: 1rem; /* emplazamiento */
  top: 1rem; /* emplazamiento */
  opacity: 0; /* transparente */
  visibility: hidden; /* no se ve */
  z-index: 9999; /* capa superior, arriba de todo */
  transition: all .5s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}

.menuVisible ul {
  visibility: visible; /* se ve */
  opacity: 100%; /* opaco */
  transition: all .5s .2s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
}

/* cada vínculo del menu */
nav ul li a {
  /*border-bottom: solid 4px transparent;*/
  color: black;
  display: block;
  font-size: 1.5rem;
  margin-bottom: .2rem;
  width: min(40vw, 15rem); /* el valor menor entre el 40% del ancho de la ventana del navegador y 240px */
  text-align: right;
  padding: .3rem;
  text-decoration: none;
}
/* subrayado del menu
nav ul li a:hover {
  border-bottom: solid 4px #88d3f5;
  transition: all .3s;
}*/

/*------------------ fin nav ---------------------*/
/*nav{
    display: inline-flex;
    justify-content: center;
}*/

/*separa horizontalmente las cajas del nav
nav ul li{
    
    margin: 0 0 0.3em 0; 
}

nav ul li a{
    background-color: #88d3f5;
    text-decoration: none;
    display: block;
    width: 10em;
    margin: auto;
    text-align: center;
    color: black;
    font-family: 'Fugaz One', cursive;
    padding: .2em;
}

nav ul li a:hover{
    color: #f5b488;
}
*/
main{ 
    font-family: 'Roboto', sans-serif;

    margin: 2em;
}

#alumna{
    padding-bottom: 2em;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

#alumna img{
    max-width: 80%;
    margin-bottom: 2em;
    border: solid .5em #f5b488;

    display: flex;
    justify-content: center;
}

#materiasCursadas{
    padding-bottom: 2em;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.materias{
    background-color: #f5b488;
    margin: .5em 0;
    padding: 1em;
    border-radius: .50em;
}

#equipo{
    margin-bottom: 4em;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#equipo h2{
    width: 100%;
} 

.integrante{
    margin: 1em;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;  
}

.integrante img{
    max-width: 100%;
    
    border: solid .5em #f5b488;
    border-radius: 50%;
}

.integrante figure{
   margin-top: 4em;
   
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;

}

.integrante figcaption{
    padding: 0.3em;
}

.integrante a{
    font-family: 'Fugaz One', cursive;
    color: #f5b488;
    text-decoration: underline;
}

.integrante a:hover{
    font-family: 'Fugaz One', cursive;
    color: #88d3f5;
}

#datosAcademicos{
    margin-bottom: 3em;
}

.datoacademico{
    margin-bottom: 1.5em;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.datoacademico img{
    max-width: 60%;
    margin: 0.8em;
}

.datoacademico li{
    box-sizing: border-box;

}

footer{
    background-color: #be8bdc;
    color: black;
    font-family: 'Roboto', sans-serif;
    padding: 3em;
}

/* mediaqueries */

/* a partir de 600px 
especifico todo lo que cambia a partir de esa medida*/
@media(min-width: 37rem) {
    /* el menú deja de ser fijo */
    header nav {
        position: relative;
    }
      
    /* botón "hamburguesa" oculto */
    .menu-btn {
        display: none;
    }

    /* menu visible */
  header nav ul {
    display: flex; /* caja flexible para menu horizontal*/
    position: relative;
    opacity: 1;
    visibility: visible;
  }
    
  /* items de lista  que contienen los vínculos del menu */
  header nav ul li {
    min-width: 4em; /* que no midan menos de: */
    margin: .25em 0 .25em .25em; /* separación */
  }

  /* vínculos del menu principal */
  header nav ul li a {
    background-color: #009cde;
    border-radius: .25em ;
    color: black;
    font-size: 1rem;
    width: auto;
    padding: .25em .5em;
    text-align: center;
    display: block; /* para que sean "cajas" */
  }

  /* cuando el cursor se posiciona sobre los vínculos */
  header nav ul li a:hover {
    background-color: #f5b488;
    color: black;
  }

    /* menu visible */
    /*header nav ul {
        caja flexible para menu horizontal
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }*/

    main{
        margin-top: 3em;
    }
    h1{
        text-align: center;
        width: 100%;
    }

    #alumna{
        text-align: center;
        padding-bottom: 2em;
    
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

    }
    
    #alumna img{
        max-width: 50%;
        margin-bottom: 2em;
        border: solid .5em #f5b488;
    
        display: flex;
        justify-content: center;
    }
    
    #materiasCursadas{
        padding-bottom: 2em;
    
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .materias{
        background-color: #f5b488;
        margin: .5em 2em;
        padding: 1em;
        border-radius: .50em;
    }

    #equipo{
        margin-bottom: 4em;
    
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    #equipo h2{
        width: 100%;
    } 
    
    .integrante{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: flex-start;  
    }
    
    .integrante img{
        max-width: 100%;
        
        border: solid .7em #f5b488;
        border-radius: 50%;
    }
    
    #datosAcademicos ul{ 
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .datoacademico{
        margin-bottom: 3em;
        padding: 1em;
    
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;  
    }
    
    .datoacademico img{
        width: 20%;

    }

    .datoacademico p{
        display: flex;
        flex-direction: column;
    } 
    
}

/* cambios a partir de los 800px */
@media(min-width: 50em) {
    /* el menú deja de ser fijo */
    header nav {
        position: relative;
    }
      
    /* botón "hamburguesa" oculto */
    .menu-btn {
        display: none;
    }

    /* menu visible */
  header nav ul {
    display: flex; /* caja flexible para menu horizontal*/
    position: relative;
    opacity: 1;
    visibility: visible;
  }
    
  /* items de lista  que contienen los vínculos del menu */
  header nav ul li {
    min-width: 4em; /* que no midan menos de: */
    margin: .25em 0 .25em .25em; /* separación */
  }

  /* vínculos del menu principal */
  header nav ul li a {
    background-color: #009cde;
    border-radius: .25em ;
    color: black;
    font-size: 1rem;
    width: auto;
    padding: .25em .5em;
    text-align: center;
    display: block; /* para que sean "cajas" */
  }

  /* cuando el cursor se posiciona sobre los vínculos */
  header nav ul li a:hover {
    background-color: #f5b488;
    color: black;
  }

    /* menu visible */
    /*header nav ul {
        caja flexible para menu horizontal
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }*/
    


    #alumna h2{
        text-align: center;
    }
    
    .datoacademico{
        padding: 1em;
    }
    .datoacademico img{
        width: 10%;

    }
}

/* cambios a partir de los 1200px */
@media(min-width: 75em){
    #alumna h2{
        text-align: center;
    }

}