@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@200;600;800&display=swap");

/*-----------"reseteado"-----------*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-sizing: border-box;
}

/* 
----------------
reglas generales
y para celulares
----------------
*/

body {
  font-family: "Heebo", sans-serif;
}

img {
  /* para que las imágenes nunca sean mayores que la caja que las contienen */
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}

/*----------------EN COMÚN TODAS LAS PAGINAS----------------*/

/*
----------------
Encabezado
----------------*/
header {
  width: 100%;
}

header nav {
  width: 100%;
  height: auto;
  padding: 2em 0;
}

header nav ul {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}

header nav ul li {
  width: 25%;
  min-width: 70px;
  text-align: center;
}

header nav ul li a {
  display: flex;
  align-items: center;
  flex-direction: column;
  
}

header nav ul li img {
  height: 3.5em;
  width: 4em;
}

#logoUsuario {
  display: none;
}

/*--------------  
Footer 
----------------*/

footer {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 1em;
  background-color: rgba(241, 252, 250);
}

footer img {
  width: 9em;
}

footer h2 {
  font-size: 0.7em;
  font-weight: 500;
}

footer span {
  font-size: 0.6em;
  font-weight: 600;
}

.footer {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

#logoUsuarioMobile{width: 3.6em;
  position:fixed;
  bottom: 1em;
  right: 1em;}

#logoUsuarioMobile img{border: .2em solid rgba(245,191,203);
  border-radius:50%;
  filter: drop-shadow(0.1em 0.1em 0.6em rgba(245,191,203));}


/*--------------  
Para Escritorio
----------------*/

@media (min-width: 1200px) {

header nav {
  height: auto;
  padding: 1em 1em 0 1em;
}

header nav ul {
  display: flex;
  justify-content: flex-end;
  flex-flow: row wrap;
}

header nav ul li {
  width: auto;
  flex-wrap: wrap;
}

header li img {
  margin: 0 1em;
}

.contenedoraLogos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 1em 0 1em;
}

#logoUsuario {
  height: 3.5em;
  width: 3.5em;
  display: block;
}

#logoUsuario img {
  width: 100%;
  height: 100%;
  
  border-radius:20%;
  filter: drop-shadow(0.1em 0.1em 0.6em rgba(245,191,203));
}

/*Boton flotante desaparece en escritorio*/
#logoUsuarioMobile{display: none;}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------PAGINA PRINCIPAL---------------------------------------------------------------------*/
#fondoParaEscritorio{display:none;}
.contenedorIndexPrincipal{display: flex;
    flex-flow: column wrap;
}

.archipielago{max-width:500px; }
.archipielago figure{
width: 100%;
height:auto;
min-width: 375px;}

#islaUno,#islaDos,#islaTres{position: relative;}

/*Globo uno*/
#globoBiblioteca{position: absolute;
    top:5em;
    left: .8em;
} 
#globoBiblioteca img{width: 10em;}


/*Globo dos*/
#globoExplorar{position: absolute;
top:6em;
left: 15em;}
#globoExplorar img{width: 8.5em;
height: 5em;}

/*Globo tres*/
#globoLogros{position:absolute;
top:7em;}
#globoLogros img{width: 9em;}


/*--------------  
  Para Escritorio
  ----------------*/
@media (min-width: 1200px){
    #islaBienvenida{display:none;}
    .contenedorIndexPrincipal{display:none;}
    
    #fondoParaEscritorio{display: block;
    width: 100%;
        min-width: 1583px;
    height: 100%;
    position: relative;}
    
    #lineaUno{position: absolute;
    top:32em;
    left:20em;}
    #lineaUno img{width: 10em;
    }
    
      #lineaDos{position: absolute;
    top:32em;
    left: 55em;}
    #lineaDos img{width: 8em;}
    
      #lineaTres{position: absolute;
    top:32em;
    right:4em;}
    #lineaTres img{width: 8em;}
    
    #fondoParaEscritorio a figure:hover{filter:drop-shadow(0.3em 0.3em 1em rgba(101,226,214));}
   
    
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------MI BIBLIOTECA------------------------------------------------------------------------*/
/* *************
cuerpo principal
************* */

#mainBiblioteca {margin: 0 1em;
}

.misCarpetas {
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
}
.misCarpetas h1 {
  font-size: 2.5em;
  padding-left: 0.8em;
  margin-bottom: 0.6em;
  font-weight: 600;
}
.misCarpetas h2 {
  font-size: 1.3em;
  padding-left: 1.7em;
  font-weight: 400;
}
.contenedorCarpetas {
  display: flex;
  justify-content: center;
  margin: 1.5em;
  flex-flow: column wrap;
}

#carpetaUno {
  width: 21em;
  height: 3em;
  padding: 1em;
  margin-bottom: 1.4em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 0.1em solid black;
  border-radius: 1em;
}

#carpetaUno img {
  height: 1.5em;
  width: 1.5em;
  margin: 0 1em 0 0;
}

#carpetaUno h4 {
  font-size: 0.9em;
  padding: 1em 0 0 0;
  font-weight: 500;
}

#carpetaDos {
  background-image: url(../imagenes/estante.png);
  background-size: cover;
  border: 0.1em solid black;
  border-radius: 1em;
  width: 21em;
  height: 3em;
  display: flex;
  align-items: flex-end;
}

#carpetaUno:hover,#carpetaDos:hover{
  border: .1em solid rgba(245,191,203);
  filter: drop-shadow(0.1em 0.1em 0.8em rgba(245,191,203));}

#carpetaDos h4 {
  margin-left: 1.5em;
  font-weight: 500;
}

/* 
----------------
    Seccion 2
----------------
*/

.sectionDos h2 {
  font-size: 1.3em;
  font-weight: 500;
  margin:2em 0 0 1.5em;
}
.misLibros h3 {
  font-size: 0.9em;
}

.misLibros {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: .5em;
}

.misLibrosBloques {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 2em;
  background-image: url(../imagenes/fondoFlores.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  min-width:354px;
}

.misLibros p,
.misLibros a {
  font-size: 0.7em;
  padding-top: 0.5em;
}

.botones {
  display: flex;
  flex-flow: row wrap;
}
.botones span {
  font-size: 1em;
}
.botones a {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.agregarCarpeta {
  display: flex;
  align-items: center;
  justify-content: center;
}
.agregarCarpeta img {
  width: 3.5em;
}

.premios {
  width: 18em;
  height: 8em;
}
.premios .botones {
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5em;
}

#leer {
  text-align: center;
  margin-left: 0.5em;
  height: 2em;
  width: 3.8em;
  border: 0.1em solid black;
  border-radius: .6em;
  background-color: rgba(254, 236, 224);
}

#leer:hover{
  border: .1em solid rgba(245,191,203);
  filter: drop-shadow(0.1em 0.1em 0.8em rgba(245,191,203));}

.continuar {border: 0.1em solid black;
  border-radius: 0.6em;
  height: 2em;
  width: 5.2em;
  background-color: rgba(189, 252, 242);
}

.continuar:hover{border: .1em solid lightblue;
  filter: drop-shadow(0.1em 0.1em 0.8em rgba(211,249,242));}

.misLibros figure{
  padding: 0.4em;
  width: 9.5em;
  padding: 1em;
}

.misLibros figure img {
  width: 100%;
  display: block;
  height: 9em;
  border-radius: 1.5em;
  filter: drop-shadow(0.4em 0.6em 0.7em #b7b6b6);
}

/*--------------  
Para Escritorio
----------------*/
@media (min-width: 1200px) {

.misCarpetas h2 {
  font-size: 1.8em;
  margin-left: -0.6em;
  font-weight: 400;
}

.misCarpetas {
  width: 100%;
}

.contenedorCarpetas {
  width: 60em;
  justify-content: flex-start;
  flex-flow: row wrap;
}

#carpetaUno,
#carpetaDos {
  width: 24em;
  height: 3.8em;
  margin-right: 2em;
}

.misLibros {
  flex-direction: row;
  margin-top: 2em;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.misLibrosBloques {
  margin-right: 2em;
}

.misLibros figure {
  width: 12em;
}
.misLibros figure img {
  height: 13em;
  width: 100%;
}

.sectionDos h2 {
  font-size: 1.8em;
  margin-left: 1.1em;
  font-weight: 400;
}

}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------EXPLORAR-----------------------------------------------------------------------------*/
/*--------------  Main ----------------*/
#explorar{margin-left:.5em;}

#brazoExplorarEscritorio{display: none;}

.imagenExplorar{display: flex;
justify-content: flex-end;}

.imagenExplorar figure {
  width: 100%;
  min-width: 300px;
  max-width: 450px;
  height: 6em;
}

.imagenExplorar figure img {
  width: 100%;
  height: 100%;
}

/*--------------  Seccion 1 ----------------*/

.contenedorLibro {
  width: 100%;
  min-width: 359px;
  max-width: 572px;
  height: 20em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#libroDos{display:none;}

.libroAna {
  width: 40%;
}

.libroAna figure {
  width: 9.5em;
  height: 16em;
}
.libroAna figure img {
  border-radius: 2em;
  filter: drop-shadow(0.2em 0.2em 0.6em #898989);
}

.infoLibroAna {
  display: flex;
  flex-direction: column;
  width: 60%;
  margin-left: 1.2em;
}

.infoLibroAna h3 {
  margin-bottom: 0.8em;
  font-size: 0.7em;
}

.infoLibroAna h1 {
  font-size: 1.5em;
}

.infoLibroAna p {
  font-size: 0.8em;
  width: 15em;
  margin-top: 1em;
}

.datosLibroAna {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.imagenBoton {
  display: flex;
  justify-content:flex-start;
  align-items: center;
  width: 90%;
  margin-top: .5em;
}

#moneda {
  display: flex;
  flex-flow: row wrap;
  width: 70%
}
#moneda a {
  display: flex;
  align-items: center;
}
#moneda img {
  width: 2.5em;
}
#moneda a span {
  font-size: 0.8em;
}

/*--------------  Seccion 2 ----------------*/

.sectorDeLibros h2 {
  margin: 2em 0 1em 1.5em;
  font-size: 1.2em;
}

.contenedorDeLibros {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  padding: 1em;
  min-width: 359px;
}

.librito {
  width: 33%;
  height: 10em;
  margin-bottom: 3.8em;
}

.librito figure {
  width: 100%;
  height: 9em;
}

.librito figure figcaption {
  font-size: 0.8em;
  width: 8.5em;
  text-align: center;
  font-family: bold;
}

.contenedorDeLibros img {
  width: 6em;
  min-width: 96px;
  height: 9em;
  border-radius: 20%;
  filter: drop-shadow(0.4em 0.4em 0.6em #898989);
}

/*--------------  
  Para Escritorio
  ----------------*/
@media (min-width: 1200px) {

#explorar{margin:0;}
.imagenExplorar {
  width: 100%;
  height: auto;
  justify-content:flex-start;
}

.imagenExplorar figure {
  width: 25em;
  height: 100%;
  max-width: 500px;
}
.imagenExplorar figure img {
  width: 100%;
}

#brazoExplorarMobile{display: none;}

#brazoExplorarEscritorio{display: block;}

  /*Seccion de Ana*/

main h3 {
  font-size: 1em;
}

.contenedorLibros{display: flex;
  justify-content: space-around;
  margin-top: 2em;}

.contenedorLibro {
  display: flex;
  justify-content: flex-start;
  padding: 1em;
  height: 30em;
}

#libroDos{display:flex;}   


.libroAna {
  width: 20em;
  height: 20em;
}

.libroAna figure {
  width: 15em;
}

.infoLibroAna {
  width: 30%;
  margin-left: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.infoLibroAna h3 {
  margin-bottom: 0.8em;
}

.infoLibroAna img {
  width: 7em;
}

.imagenBoton{width: 100%;}

.imagenBoton span{width: 10em;}

.imagenBoton button {
  text-align: center;
  margin-left: 0.5em;
  height: 4em;
  width: 6em;
  border-radius: 20%;
  background-color: rgba(254, 236, 222);
}

  /*Segunda seccion*/
.sectorDeLibros h2 {
  margin: 2em 0 2em 1em;
}

.contenedorDeLibros {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row;
  margin-bottom: 2em;
}

.contenedorDeLibros figure {
  width: 8em;
  text-align: center;
}

.contenedorDeLibros figure img{width: 100%;
  height: 10em;}

.contenedorDeLibros figure figcaption{font-size: 1em;
}



.contenedorLibro {
  display: flex;
  align-items: center;
}

}

/*para tablet*/
@media (min-width: 500px){
#libroDos{display: flex;}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------FAVORITOS----------------------------------------------------------------------------*/

.favoritos{margin-left: .5em;}

.favoritos h1{font-weight: 600;}

#editar{text-align: center;
  margin-top: 1em;
  height: 2em;
  width: 5em;
  border: 0.1em solid black;
  border-radius: 0.6em;
  background-color:white;}

/*Seleccion*/
.contenedorFavoritos{display: flex;
  width: 100%;
  flex-flow: row wrap;
  margin-bottom: 2em;} /*Contenedor de articulos*/

.articleFavoritos { /*Caracteristicas en Comun de cada article*/
  margin-top: 2em;
  display: flex;
  margin-left: .9em;
  justify-content: center;
  flex-flow: column wrap;
  width: 7em;
  max-width: 152px;
  align-items: center;
}

.articleFavoritos button{margin:1em; 0}

.monedasFavs{display: flex;
  align-items: center;
  width: 7em;}

.monedasFavs img{width: 2em;}

.monedasFavs span{font-size: .8em;}

.articleFavoritos figure img {
  border-radius: 2em;
  width: 20em;
  height: 10em;
  filter: drop-shadow(0.4em 0.6em 0.7em #b7b6b6);
}

.articleFavoritos p {
  font-size: .8em;
}

#botonFormulario:hover{border: .1em solid rgba(245,191,203);
  filter: drop-shadow(0.1em 0.1em 0.8em rgba(245,191,203));}

/*--------------  
  Para Escritorio
  ----------------*/
@media (min-width: 1200px){

.favoritos{margin-top: 2em;}

#editar{margin-top: 2em;}

.contenedorFavoritos{
  flex-flow: row wrap;
}

.articleFavoritos { /*Caracteristicas en Comun de cada article*/
  justify-content: center;
  flex-flow: column wrap;
  margin-left: .7em;
  width: 15em;
  min-width: 14em;
  align-items: center;}

.articleFavoritos button{margin-top:1.8em;}

.articleFavoritos figure{width: 9em;
  height: 13em;}

.articleFavoritos figure img {
  width: 100%;
  height: 100%;}

.articleFavoritos p {
  font-size: .8em;}

.monedasFavs{width: 8em;}

.monedasFavs img{width: 3em;}

.monedasFavs span{font-size: .9em;}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------MIS LOGROS---------------------------------------------------------------------------*/

#mainLogros{margin: 0 1.2em;}

#mainLogros h1{font-size: 3em;
  font-weight: 400;}

.monedaLogros{}

.monedaLogros figure{display: flex;
  flex-flow: row wrap;
  align-items: center;}

.monedaLogros figure img{width: 4em;}

.monedaLogros figcaption{font-size: 1em;}

.monstruoMonedasEscritorio{display: none;}

.monstruoMonedasMobile{display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  align-items: center;}

/*Primer parte del dibujo*/
#figureLogrosUno{position: relative;
  min-width: 350px;
  max-width: 350px;
  width: 25em;
  height: 20em;}

#figureLogrosUno img{width:100%;
  height: 100%;}

#figureLogrosUno figcaption{font-size: .8em;
  width: 10em;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left:2.3em;
}

/*Contenedor de los articulos*/
.contenedorNiveles{}

/*Articulos*/
.niveles{display: flex;
  margin-bottom: 2em;}

.imagenesNiveles{width: 6em;
  min-width: 96px;
  height: 7em;
  margin-right: .5em;}

.imagenesNiveles img{width: 9em;
  height: 7em;
  object-fit:contain;
  border:.1em solid black;
  border-radius: 1em;
}

.niveles figure{width: 15em;
  display: flex;
  flex-flow: column-reverse wrap;
  text-align: center;}

#barraDistinta{width: 14.4em;
  margin-left: .5em; }



/*--------------  
  Para Escritorio
  ----------------*/
@media (min-width: 1200px){
#mainLogros{margin: 0 1em 0 3em;
  display: flex;
  flex-flow: column wrap;}

/*Cambio de dibujo mobile a escritorio*/
.monstruoMonedasMobile{display: none;}

.monstruoMonedasEscritorio{display: block;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  width: 100%;
  justify-content: flex-end;}

/*Primer parte del dibujo*/
#figureLogrosUno{position: relative;
  width: 55%;
  height: auto;
  min-width: 414px;
  max-width: 414px;}

#figureLogrosUno img{width:100%;
  height: 100%;}

#figureLogrosUno figcaption{font-size: .9em;
  font-weight: 600;
  position: absolute;
  width: 10em;
  height: 5em;
  top: 46%;
  left:2.5em;
}


/*Segunda parte del dibujo*/
#figureLogrosDos{width: 10em;}

#figureLogrosDos img{width: 100%;
  height: 11em;}

.contenedorNiveles{display: flex;
  width: 60em;
  margin-top: 4em;
  flex-flow: row wrap;
  justify-content:space-between;}

/*Articulos*/
.niveles{display: flex;
  margin-bottom: 2em;}

.imagenesNiveles{width: 6em;
  height: 7em;
  margin-right: .5em;}

.imagenesNiveles img{width: 9em;
  height: 7em;
  object-fit:contain;
  border:.1em solid black;
  border-radius: 1em;
}

.niveles figure{width: 15em;
  display: flex;
  flex-flow: column-reverse wrap;
  text-align: center;}

.niveles figcaption{}

#barraDistinta{width: 14.4em;
  margin-left: .5em;}

.contenedorMonstruito{display: flex;
  justify-content: flex-end;}  

}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------PERFIL-------------------------------------------------------------------------------*/

.perfilUsuario{display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 8em 0;}
/*Contenedor general*/

  /*Contenedor de ambos div*/
.infoUsuario{display: flex;
  flex-flow: column wrap;
  margin-top: 2em;
} 

.infoUsuario a{font-weight: 600;
text-decoration:underline;}

.infoUsuario h1{font-size: 4em;
  font-weight: 500;}

.infoUsuario h2{font-weight: 400;}

.infoUsuario h3{font-size: .7em;
  font-weight: 600;
  margin-top: 1em;}

#interesesPerfil{display: flex;
flex-direction: row;
justify-content: space-around;
margin-top:1em; }

.intereses img{width: 2.2em;
  border: .1em solid black;
  border-radius: .5em;}

.avatarUsuario img{width: 11em;
  height: 17em;
  margin-left: 1.5em;}

/*----------------------
    para escritorio
-----------------------*/
@media (min-width: 1200px){

.perfilUsuario{justify-content: flex-start;
  margin-left: 5em;}

.infoUsuario a{font-size: 1.4em;}

.infoUsuario h1{font-size: 6em;
  margin-top: -.2em;}

.infoUsuario h2{font-size: 2em;
  margin-top: -1em;}

.infoUsuario h3{font-size: 1.3em;
  font-weight: 100;}

.intereses img{width: 3em;
  border: .1em solid black;
  border-radius: .5em;}


.avatarUsuario img{width: 13em;
    height: 20em;}

} 


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------EDITAR PERFIL------------------------------------------------------------------------------*/

#mainFormulario{margin: 0 1em;
}
#mainFormulario h1{font-size: 3em;
  font-weight: 500;
}

.monstruosCaminando{display:none;}

/*Seccion contenedor*/
.formulario{
  display: flex;
  flex-flow: column wrap;
  margin-bottom: 3em;}

/*Datos del formulario*/
.datosFormulario h4{font-weight: 500;}

.datosFormulario form{margin-top: 1.5em;
}
.datosFormulario input{height: 2.8em;
  margin: 1.7em 0;
  border: .1em solid black;
  border-radius: .5em;
  text-align: center;
}

#nombreUsuarioForm{width: 25em;}

#edadUsuarioForm{width: 5em;}

.avatarFormulario{width: 100%;
  display: flex;
  flex-flow: column wrap;
}

.avatarFormulario h4{
  font-weight: 100;
  margin:2.5em 0 .5em 0}

.contenedorDeAvatars{display: flex;
  flex-flow: row wrap;
  margin-top: 2em;
  justify-content: center;}

.avatars{width: 5em;
  height: 7em;
  margin: 0 1em;}

.avatars img{width: 100%;
  border: .1em solid black;
  border-radius: 1em;}

.avatars img:hover{border: .1em solid rgba(245,191,203);
  filter: drop-shadow(0.1em 0.1em 0.8em rgba(245,191,203));}

.intereses{display: flex;
flex-direction: column;
text-align: center;}
.intereses span{font-size: .8em;
margin-top:.5em;}

.interesesFormulario{display: flex;
  flex-direction: column;
  width:100%;}

.interesesFormulario h4{font-weight: 100;
  margin: 1em 0 1em .3em;}

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

.intereses img{width: 2.8em;
  height: 3em;}

.intereses img:hover{border: .1em solid rgba(245,191,203);
  filter: drop-shadow(0.1em 0.1em 0.8em rgba(245,191,203));}


.contieneBoton{width: 100%;
  margin-top: 4em;
}

#botonFormulario{width: 6em;
  height: 2.2em;
  border: .1em solid black;
  border-radius: .8em;
  background-color: white;}



/*----------------------
    para escritorio
-----------------------*/
@media (min-width: 1200px){

/*Lo que tiene que aparecer en escritorio pero no está en mobile*/
.monstruosCaminando{display: block;
  width: 40em;}

/*Separar pagina en dos*/

#mainFormulario{display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 4em 0;}

/*Formularios*/
#nombreUsuarioForm{width: 15em;}

#edadUsuarioForm{width: 5em;}

}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------ADENTRO DEL LIBRO--------------------------------------------------------------------*/

.mainInteriorLibro{margin: 0 1em;}

.contenedorAdentro{display: flex;
  flex-flow: column wrap;
  align-items: center;}

.imagenDelLibro{width: 20em;
  margin-top: 2em;}

.imagenDelLibro img{border-radius: 2em;
  filter: drop-shadow(0.1em 0.1em 0.8em #898989);}

.monedas{display: flex;
  flex-flow: row wrap;
  width: 8.5em;
  margin: .5em 0;}

.monedas a{display: flex;
  align-items: center;}

.monedas img{width: 4em;}

.monedas span{font-size: 0.8em;}

.johnny{display: flex;
  flex-flow: column wrap;
  align-items: center;}

.johnny h1{font-size: 2em;
  font-weight: 600;
  margin-top: .8em;}

.johnny p{font-size: .8em;
  margin: 0 2em;
  text-align: center;}

.botonesInterior{display: flex;
  width: 100%;
  justify-content:space-around;}

.botonesInterior button{
  width: 10em;
  height: 2em;
  margin:2em 0;
  border:.1em solid black;
  border-radius: .8em;
  background-color: rgba(252,236,225);}

.botonesInterior button:hover{border: .1em solid rgba(245,191,203);
  filter: drop-shadow(0.1em 0.1em 0.8em rgba(245,191,203));}


/*----------------------
    para escritorio
-----------------------*/
@media (min-width: 1200px){

.mainInteriorLibro{margin: 4em 8em;}

.contenedorAdentro{flex-flow: row wrap;
  justify-content:space-around;}

.johnny{width:40em;
  padding: 0em 6em;}

.johnny h1{font-size: 3em;}

.johnny p{font-size: 1em;
  margin: 2.5em 2em;}

.monedas{margin: 2em 0 0 0;}

.imagenDelLibro{width: 22em;
  margin-top: 2em;}

.botonesInterior button{width: 12em;
  height: 3em;}

}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------LEER LIBRO------------------------------------------------------------------------------*/

#libroEscritorio{display: none;}

#flechaDerecha{filter: drop-shadow(0.1em 0.1em 0.2em rgba(245,191,203));
border-radius: 50%;}

#libroMobile{max-width: 900px;}




/*----------------------
    para escritorio
-----------------------*/
@media (min-width: 1200px){
    #libroEscritorio{display: block;}
    #libroCelular{display: none;}
}


/*----------------------
    para tablet
-----------------------*/

@media (min-width: 900px){
    #libroEscritorio{display: block;}
    #libroCelular{display: none;}
}



/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------ACTIVIDAD PREGUNTA-------------------------------------------------------------------*/
/*Revisar si pongo color de fondo, se ve el blanco de las imagenes*/
#bodyActividad{background-color:white;}

#mainActividad{margin: 0 1.5em;}

#mainActividad h1{font-weight: 600;
  margin: 2em 0;}

#mainActividad h1 span{font-weight: 100;}

.contenedorPregunta{display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;}

.pregunta figure{
  width: 18em;
  position: relative;
  margin-bottom: 2em;}

.pregunta figcaption{padding:0 1em;
  position: absolute;
  width: 100%;
  top: 33%;
}

.opciones{display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;}

.opciones button{width: 20em;
  height: 4.5em;
  margin-bottom: 2em;
  border-radius: 1.5em;
  background-color: white;
  border:.5em solid rgba(252,237,222);}

.opciones button:hover{
  filter:drop-shadow(0.1em 0.1em 1.5em rgba(245,191,203));
  border: .4em solid #ffd8de}

.desplazamiento{display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 1em 0;}

.desplazamiento div img{width: 2em;}

.desplazamiento p{font-size: .8em;
  font-weight: 500;}

/*----------------------
    para escritorio
-----------------------*/
@media (min-width: 1200px){

#mainActividad h1{font-size: 1.8em;
  margin: 2em 0;} 


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

.pregunta figure{width: 50em;}

.pregunta img{width: 100%;
  height: 20em;}

.pregunta figcaption{padding:0 2.5em;
  text-align: center;
  width: 100%;
  top: 35%;
  font-size: 2em;
}

.opciones{flex-flow: row wrap;}

.opciones button{margin:0 2em;
  height: 6em;
  width: 22em;
  border-radius: 2em;}

.desplazamiento{justify-content: center;}

.desplazamiento div img{width: 5em;
  margin: 0 4em;}

.desplazamiento p{font-size: 1.2em;
  font-weight: 500;}
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------FELICITACIONES---------------------------------------------------------------------*/
.felicitaciones{
  display: flex;
  align-items: center;
  flex-flow: column wrap;
margin-bottom: 2.5em;}

.felicitaciones button{
  width: 15em;
  height: 3em;
  margin-bottom: 2em;
  border-radius: 1em;
  background-color: white;
  border:.3em solid rgba(252,237,222);}

.felicitaciones button:hover{filter:drop-shadow(0.1em 0.1em 1.5em rgba(245,191,203));
  border: .4em solid #ffd8de;}

.contenedorFelicidades{
  display: flex;
  justify-content: center;
  margin: 6em 0 4em 0;}

.contenedorFelicidades figure{
  position: relative;}

.contenedorFelicidades figure figcaption{position:absolute;
  top: 3em;
  left:3em;
  width:11em;
  font-size: .9em;}

#monstruoFeliz{
  min-width: 10em;
  max-width: 271px;}

#globoDialogo{
  width: 15em;
  min-width: 225px;
  max-width: 225px;}


/*----------------------
    para escritorio
-----------------------*/
@media (min-width: 1200px){

.felicitaciones{flex-direction: row;
  justify-content: space-around;}

.felicitaciones button{width: 24em;
    height: 5em;
}
    
    .felicitaciones button span{font-size: 1.4em;}

.contenedorFelicidades{width: 50%;
  margin-bottom: 8em;}

#monstruoFeliz{width: 25em;}

#globoDialogo{min-width: 25em;
}

.contenedorFelicidades figure figcaption{position:absolute;
  top: 3.4em;
  left:3.5em;
  width:11em;
  font-size: 1.5em;}


}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------SOBRE NOSOSOTROS---------------------------------------------------------------------*/

.sobreNosotros{margin: 0 1.5em;}

.sobreNosotros img{margin-bottom: 2em;}

.sobreNosotros h1,.sobreNosotros h2{font-weight: 500;
  margin-bottom: 1.5em;}

.logoEscritorio{display: none;}

.logoMobile{display: block;}

.sobreNosotros p{font-size: .8em;
  margin-bottom: 3em;}

#monstruoGrande{width: 12em;}

.footerNosotros{text-align: center;
  margin: 0 2.4em;
}
.footerNosotros h2{font-weight: 600;
  margin-bottom: 1em;}

.footerNosotros p{font-size:.8em;}


/*--------------  
  Para Escritorio
  ----------------*/
@media (min-width: 1200px){
.logoEscritorio{
  display: block;
  margin: 2em 0 0 4em;}

.logoMobile{display: none;}

.sobreNosotros{display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

.sobreNosotros h1,.sobreNosotros h2{font-weight: 500;
  margin-bottom: 1.5em;
  font-size: 2.3em;}

.sobreNosotros p{font-size: 1.2em;}

.nosotrosBloque{width: 70%;}

.nosotrosBloque div{width: 50em;
  height: 10em;
  margin:0 3em;
  margin-bottom: 4em;}

#monstruoGrande{width: 25em;}

.footerNosotros{width: 100%;
  text-align: start;
}

}





/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/