@import url();

:root {
  --color-fondo1:#c4a178;
  --color-fondo: #fff4b6;
  --color-fondo2: #fcfaef;
  --color-1: #336633;
  --color-2: #cc6699;
  --color-2a:#ca86a8;
  --color-3: #333399; 
  --color-4: #ff9900;
  --color-4a: #fcc36f;
  --color-5: #6eb3dc; 
  --color-5a:#95cfd3;  
  --color-6: #8fd2f867;
  --color-transparente: #666666a7;
  --tipo-titulos: 'Nunito';
  --tipo-textos: sans-serif
}

/*PRINCIPAL*/
  * {
    box-sizing: border-box;
  
    margin: 0;
    padding: 0; 
  }

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

a{
  text-decoration: none;
  color:black;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
}

body{
  background-color: var(--color-fondo);
}

.contenedora{
  margin-inline: auto;
  padding: 1em;
  width: min(55rem, 100%)
}


/*HEADER*/
header .contenedora{
  background-color: var(--color-6);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: 1px 1px 5px var(--color-transparente);
  height: 60px;
  gap: .5em;
  width: auto;
}


.nav-menu{
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  background-color: #abe4e4d7;
  border-radius: 1.5em 0em 0em 1.5em;
  position: fixed;
  text-align: center;
  top: 60px;
  left: 100%;
  width: 40%;
  padding: 20px;


  height: 20em;
  overflow-y: auto;

  right: 100%;
  transition: all 0.2s;
}

.nav-link{
  font-weight: bold;
  color: #333399;
  width: max-content;
  line-height: 70px;
  
}

.nav-link:hover,
.nav-link_active{
  color: var(--color-4);
  border-radius: .5em;
  padding: .2em;
  border-width: 1.5px;
  border-radius: 0.25em;

}

.toggle{
  background: none;
  border: none;
  margin-top: .5em;
  padding: 20px 10px;
  display: block;
  cursor: pointer;
}

.notif{
  background: none;
  border: none;
  margin-top: .5em;
  padding: 20px 10px;
  display: block;
  cursor: pointer;
}

.notif img{
  width: 80%;
}


.nav-menu_visible{
  left: 60%;
  transition: all .5s ease;
}

.nav-menu img{
  width: 100%;
}


#logo{
  padding-left: 2em;
}

#logo img{
  width: 60%;
}

#logo a{
  display: flex;
  justify-content: center;
}

/*H/SECTIONS*/

h1{
  color: #336633;
  font-family: var(--tipo-titulos);
}

h2{
  font-family: var(--tipo-titulos);
}

h3,
h4,
p{
  font-family: var(--tipo-textos);
}


section{
  margin-left: .5em;
  margin-right: .5em;
  border-radius: .3em;
}

section h2{
  padding-top: 3em;
}

/*PANTALLA PRINCIPAL*/

.grid{
  display: grid;
  row-gap: 1em;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px 150px 200px 100px;
}

.texto_inicio{
grid-column: 1/3;
grid-row: 1/2;
}

.alumnos{
  background-color: #ca86a8; 
  text-align: center;
  grid-column: 1/3;
}

.alumnos:hover{
  background-color: #8a4668;
}

.alumnos a:hover{
  color: var(--color-fondo);
}

.colegio_textos,
.info_alumnos,
.textos_alumnos{
  display: none;
}

.biblioteca{
  background-color: #336633;
  text-align: center;
  grid-column: 1/2;
}

.biblioteca:hover{
  background-color: #1e3b1e;
}

.biblioteca a:hover{
  color: var(--color-fondo);
}


.libros{
  display: none;
}


.docentes{
  grid-column: 1/3;
  grid-row: 4/5;
  background-color: var(--color-5);
  text-align: center;
  margin-bottom: 1em;
}

.docentes h2{
  position: relative;
  bottom: 2em;
}

.docentes a:hover{
  color: var(--color-fondo);
}

.historias{
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: var(--color-4);
  text-align: center;
}



/*PERFIL*/

.img_perfil{
  text-align: center;
  color: var(--color-3);
}

.img_perfil img{
  width: 50%;
}

.img_perfil h3{
  font-family: var(--tipo-titulos);
  font-size: larger;
}

.datos{
  text-align: center;
}

.cerrars {
  background-color: var(--color-3);
  padding: .5em;
  border-radius: .5em;
  color: var(--color-fondo);
}

.cerrars:hover{
  color: var(--color-5);
  box-shadow: 0 .5em .5em var(--color-transparente);
}

.info li{
  font-family: var(--tipo-titulos);
  font-size: larger;
  color: var(--color-3);
}

.info h4{
  color: var(--color-fondo);
  background-color: #333399;
  border-radius: .5em;
}

.niv3info h4{
  background: linear-gradient(to right, var(--color-3) 80%, var(--color-5) 10%, var(--color-5));
}

.leidos h3{
  color: var(--color-3);
}

.leidos p{
  background-color: var(--color-4a);
  border-radius: .5em;
  color: var(--color-fondo);
  font-weight: 600;
  border: .1em solid;
  border-color: var(--color-5);
}


.leidos img{
  cursor: pointer;
}


.info a:hover{
color: var(--color-4);
}

.colegio{
background-color: var(--color-fondo2);
border-radius: .5em;
text-align: center;
}








  /*---------
  BIBLIOETCA
  ----------*/
  /* Inicio de los sliders de las portadas */
  .biblio h1{
    text-align: center;
  }

.categorias img {
  border-radius: 2%;
  box-shadow: black;
  justify-content: center;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  
}

.categorias ol li {
  margin: .5em 0;
  border-radius: .25em;
  text-align: center;
  margin-bottom: 1em;
}

.categorias ol li > *:not(p) {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.categorias{
  display: flex;    
  justify-content: center;
  text-align: center;
  background-color: var(--color-4);
  color: white;
  width: 100%;
  border-radius: .9em;
  flex-direction: column;
  margin-bottom: 1em;
}

.categorias h2{
  width: 100%;

}

.categorias h2 {
  margin-top: .0em;
  margin-bottom: .0em;
  color: var(--color-fondo);
  text-align: center;
}

/* */

.poster-slide {
--slice-n: 6;
display: flex;
justify-content: space-between;
overflow-x: scroll;
}

.poster-slide img {
object-fit: cover;
box-shadow: black;
border-radius: 2em;
width: 200px;
height: 100%;
transition: width 1s;
}

.poster-slide.hovered img {
width: calc( calc(100% - 35%) / calc(var(--slice-n) - 1) );
}

.poster-slide img:hover {
width: calc(35%)
}

/* Fin de los sliders de las portadas */

.profile {
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-between;
}

.profile-container{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
padding-top: 10px;
gap: 20px;
}

.profile-stats{
display: flex;
flex-direction: column;
padding: 25px;
width: 100%;	
}


.profile-stats h2{
font-size: 45px;
padding: 0px;	
}

.profile-info{
display: flex;
text-align: center;
gap: 20px;
}

.profile-info *{
display: flex;
align-items: center;
justify-content: center;
height: 60px;
padding: 5px;


border-radius: 5px 5px 5px 5px;
}

.segundoboton img{
width: 50px;
}

.segundoboton h3{
margin: 0;

}

.segundoboton{
padding: 14px;
}

.profile-image{
display: flex;
justify-content: flex-end;
padding: 2%;
  border-radius: 50%;
  height: 150px;
}

.profile-substats{
display: flex;
flex-direction: column;
border-radius: 30px 30px 0px 0px;
padding-left: 1.5em;
  padding-right: 1.5em;
}

.profile-wardrobe{
display: flex;
align-content: center;
justify-content: space-evenly;
border-radius: 30px 30px 30px 30px;
margin-top: 20px;
margin-bottom: 20px;
}

.profile-wardrobe img{
margin-top: 20px;
margin-bottom: 20px;
}


/*FOOTER*/

footer{
  width: 100%;
  background-color: var(--color-6);
  box-shadow: 1px 1px 5px var(--color-transparente);
}

.acumar a{
  display: flex;
  justify-content: center;
}
.acumar img{
  width: 20%;
}

.todo_pie{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.redes{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.redes ul img{
  width: 4em;
  padding: 1em;
  display: inline-block;
}

@media (min-width: 30em){

  #cuenta{
    display: none;
  }

  .nav-link{
  padding: .5em;
  }

  .nav-link:hover{
    border-radius: .5em;
    border: 1px solid;
    transition: all 0.2s ease;
  }

  #logo{
    padding-left: 0%;
    margin-right: 5em;
  }

  #logo img{
    width: 100%;
  }


}

@media (min-width: 40em) {
    /*HEADER*/
    .toggle{
      display: none;
    }
  
   .nav-menu{
      display: flex;
      flex-direction: row;
      background-color: transparent;
      position: inherit;
      width: auto;
      padding: .5em;
      height: auto;
    }

  /*P PRINCIPAL*/
  .grid{
    display: grid;
    row-gap: .5em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 90px 200px 100px;
  }

  .texto_inicio{
    grid-column: 1/4;
  }

  .alumnos{
    grid-column: 1/3;
    grid-row: 2/3;
    margin: .5em;
  }

  .biblioteca{
    grid-column: 3/4;
    grid-row: 2/5;
    margin: 1em;
  }

  .historias{
    grid-column: 1/3;
    margin-bottom: 1em;
  }

  .docentes{
    grid-column: 3/4;
    grid-row: 3/4;
    background-color: var(--color-5);
  }

  
   /*BIBLIOTECA*/
   .sliderLogros{
    overflow: hidden;
    overflow: scroll;
}

/*libro*/

.portadalibro{
    border: solid/ 3px #fbf1d8;
    border-radius: 1em;
    flex-direction: column;
    background-color: #e84a5f;
}

.textolibro{
    display: flex;
    align-content: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

}

@media (min-width: 60em){

  /*HEADER*/
  header .contenedora{
    display: flex;
    justify-content: center;
    align-items: center
  }

  .nav-menu{
  display: none;
  }

  /*PANTALLA PRINCIPAL*/
  
  .grid{
    display: grid;
    row-gap: .5em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 90px 200px 200px;
  }

  .perfil{
    display: flex;
    background-color: var(--color-1);
    grid-column: 1/1;
    margin-bottom: .7em;
    padding: 0%;
  }

  .perfil h2{
    text-align: center;
    padding-left: 5em;
    padding-top: 2.5em;
  }

  .perfil:hover{
    background-color: #1e3b1e;
  }
  
  .perfil a:hover{
    color: var(--color-fondo);
  }

  .docentes{
    display: flex;
    background-color: #ca86a8;
    grid-column: 3/4;
    margin-bottom: .7em;
    text-align: center;
  }

  .docentes h2{
    padding-left: 4em;
    padding-top: 2.5em;
  }

  .docentes:hover{
    background-color: #8a4668;
  }
  
  .docentes a:hover{
    color: var(--color-fondo);
  }

  .notificaciones{
    grid-column: 2/2;
    text-align: center;
    padding-top: 2.5em;
  }

  .biblioteca{
    margin-top: 1em;
    margin-bottom: 0%;
    grid-row: 1/3;
  }

  
  .texto_inicio{
    grid-column: 1/3;
  }

      /*BIBLIOTECA*/
      .accesorios, .primera{
        margin: 0 5em 0 5em;
    }
  
    .sliderLogros{
        display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }
  
    /*Libro responsive*/
  
    .textolibro{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        margin-left: 1.5em;
        font-size: 1.5em;
  
    }
  
    .portadalibro img{
        width: 200px;
        margin-bottom: 0.5em;
  
    }
  
    .portadalibro{
        background-color: var(--color-4);
        border-radius: 1em;
        width: 50em;
        margin-left: 15em;
        border: solid 3px #fbf1d8;
        border-radius: 1em;
        
    }
  

  /*FOOTER*/

  footer{
    width: 100%;
  }
  
  .acumar a{
    display: flex;
    justify-content: center;
  }
  .acumar img{
    width: 20%;
  }

  .todo_pie{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .redes{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .redes ul img{
    width: 4em;
    padding: 1em;
    display: inline-block;
  }

}