@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Amaranth&family=Montserrat:wght@400;500;700;900&display=swap');

/* ------generales------- */
*{
    padding: 0;
    border: 0;
    box-sizing: 0;
    margin: 0;
}
body {
    margin: auto;
    font-family: 'Montserrat', sans-serif;
}
html{
    height: -webkit-fill-available;
}
img {
    max-width: 100%;
    height: auto;
}

/*llenar todo el espacio de la pantalla*/
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    min-height: -webkit-fill-available;
}
main{
    flex-grow: 1;
}

/* ENCABEZADO */

/*botones del encabezado*/
.secciones img,
#inicio img{
    width: 1.1em;
    padding: .3em;
}
.menu{
    width: 2em;
    padding: .6em;
    position: relative;
    z-index: 9999;
}
#navegacion ul li{
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 1em 1em 1em 2.5em;
}
header{
    background-color: #81b551;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: .5em;
    width: 100%;
}
header{ 
    position: sticky;
    top: 0;
    z-index: 9000;
    padding-top: 1em;
}
header nav ul{
    background-color: #81b551;
    position:fixed;
    top: 6.8%;
    left: 100%;
    bottom: 0;
    width: 50%;
    padding-top: 1.5em;
    z-index: 9000;
    transition: all .5s ease;
}
.menuvisible{
    left: 50%;
    transition: all .3s ease;
}
h1{
    font-family: 'Amaranth', sans-serif;
    padding-top: .4em;
    font-size: 1em;
    text-align: center;
    margin-bottom: .5em;
}
#navegacion ul li a {
    font-size: .8em;
    font-weight: 500;
    padding-left: .5em;
}
#navegacion ul .secciones a:hover {
    font-weight: 700;
}
#navegacion{
    display: flex;
    align-items: center;
    justify-content: center;
}
a{
    text-decoration: none;
    color: black;
    list-style: none;
}
#inicio a{
    color: white;
}
#cuenta{
    text-align: center;
    margin-left: 1em;
    margin-bottom: 1em;
}
#cuenta img{
    width: 5em;
    margin-bottom: .5em;
}
#cuenta figcaption{
    font-size: 1em;
    font-weight: 700;
}

/* CUERPO */
#primera,
#registro{
    margin-top: 1em;
}
body{
    font-family: 'Montserrat', sans-serif;
}

/*categorías*/
#categorias{
    margin-left: 1em;
}
#categorias h4{
    width: 100%;
    margin: 1em;
}
#categorias ul{
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: scroll;
    width: calc(100% - 1em);
}
#categorias ul li{
    margin: 1.5em 2em 1em 0em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#categorias ul li img{
    width: 1.8em;
    margin-bottom: .5em;
    background-color: #ff8f4e;
    border-radius: 100%;
    padding: .7em;
}
#categorias ul li a{
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#categorias ul li figcaption{
    font-weight: 500;
    font-size: .8em;
    color: #FF7322;
    text-align: center;
}

/*RECICLAJE pantalla de categoría*/
#reciclaje div:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10em;
}
#reciclaje h2 {
    color:#FF7322;
    font-weight: 700;
    font-size: 1em;
    margin-left: 1em;
}
#reciclaje figure img{
    width: 1.8em;
    background-color: #ff8f4e;
    border-radius: 100%;
    padding: .7em;
    margin-right: 1em;
}
#reciclaje div:last-of-type{
    width: 10em;
}
#reciclaje ul{
    border: solid .2em #FDDFCE;
    border-top: none;
    padding: .5em 0em .5em 1em ;
}
#reciclaje ul li{
    list-style: none;
    padding-bottom: .7em;
    font-weight: 500;
    font-size: .75em;
}
#reciclaje h5{
    margin-left: 1.5em;
    margin-bottom: .5em;
}
#reciclaje{
    display: flex;
    width: 21em;
    align-items: flex-start;
    justify-content: space-between;
    margin: auto;
}

/*ubicacion*/
.ubicacion{
    display: none;
}

/*actividades*/
h2{
    font-weight: 700;
    font-size: .85em;
    width: 100%;
}
.objetivo p:first-of-type{
    font-weight: 700;
    font-size: .7em;
    margin-top: .5em;
}
.objetivo p:last-of-type{
    font-weight: 400;
    font-size: .7em;
    margin: 1.5em 0em 2em 0em;
}
h4{
    font-size: .85em;
    font-weight: 700;
}
#actividades{
     margin: auto;
     width: 22em;
     padding-top: 2.3em;
     padding-bottom: 1em;
}
.objetivo{
    width: 11em;
    margin:auto;
    padding-left: .5em;
    padding-right: .5em;

}
#actividades figure,
#talleres  section:last-of-type figure{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.taller figure > div{
    background-color: rgba(253, 223, 206, 0.75);
    padding-top: 1em;
    position: absolute;
    line-height: 1em;
    width: 100%;
    height: 100%;
    top: 100%;
    transition: all .4s ease;
}
.taller figure:hover > div {
    top: 0;
    transition: all .8s ease;
    display: flex;
    flex-direction: column;
}
.taller figure .informacion img{
    width: 1.3em;
    background-color: #ff8f4e;
    padding: .3em;
    border-radius: 100%;
    margin-top: 2em;
    margin-bottom: .5em;
}
.informacion h5{
    font-size: .6em;
    margin-bottom: .5em;
}
.informacion figcaption{
    font-size: .6em;
    font-weight: 400;
    margin-left: .5em;
}
.informacion p{
    font-size: .6em;
    font-weight: 700;
    margin-top: 1em;
}
.taller .informacion:first-of-type{
    display: flex;
    justify-content: start;
    flex-direction: column;
}
.taller figure .informacion{
    align-items: center;
}
.taller .informacion img{
    width: 5em;
}
.objetivo .informacion{
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
    justify-content: start;
}
.taller{
    background-color: #FBBF9C;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19em;
    padding: 1em;
    margin: 1em 1em 1em 0em;
}
.objetivo{
    margin-left: .8em;
}
.taller figure img,
#libros div img{
    width: 7.5em;
    display: block;
}
.leermas{
    background-color: white;
    text-align: center;
    padding: .3em;
    border-radius: 1em;
    width: 5em;
}
.leermas a{
    color: #FF7322;
    font-weight: 700;
    font-size: .8em;
}
.leermas a:hover{
    color: #FF7322;
    font-weight: 900;
}
#libros .leermas,
#destacadas .leermas{
    margin: auto;
}

/*actividades destacadas, más valoradas*/
#destacadas,
#principal section:last-of-type{
    background-color: #FDDFCE;
    margin: auto;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    margin-top: 2em;
    margin-bottom: 3em;
    text-align: center;
}
#principal section:last-of-type{
    margin: auto;
    margin-top: 3em;
    margin-bottom: 3em;
}
#principal section:last-of-type > div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
}
#destacadas article{
    background-color: #FBBF9C;
    width: 19em;
    padding: 2em 0em 2em 0em;
    margin: auto;
    margin-bottom: 1em;
    text-align: center;
}
#destacadas h2,
#destacadas p,
#principal section:last-of-type p,
#principal section:last-of-type h2{
   padding-bottom: .5em;
}
#destacadas p,
#principal section:last-of-type p{
    margin-bottom: 1em;
    font-size: .8em;
}
#destacadas article > figure{
    padding-bottom: .5em;
}
#destacadas .informacion figure,
#principal section:last-of-type .informacion figure{
   display: flex;
   align-items: center;
   justify-content: center;
}
#principal .masleidos h4{
    padding-bottom: .5em;
}
#destacadas article p{
    font-size: .75em;
    padding: .5em;
}
#destacadas .leermas{
    width: 7em;
    margin-top: 1em
}
#principal section:last-of-type{
    background-color: #FDDFCE;
}
#principal section:last-of-type article{
    width: 13em;
    height: 24em;
    background-color: #FBBF9C;
    margin: .7em;
    padding: 1em;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#principal section:last-of-type article > figure{
    width: 9em;
    margin-bottom: .6em;
    margin-top: .5em;
}
#principal section:last-of-type .leermas{
    margin-top: 1em;
}
#principal section:last-of-type h4{
    width: 12em;
    margin-bottom: .5em;
}

/*libros */
#libros{
    margin: auto;
    width: 22em;
}
#libros h2{
    margin-top: 1em;
    margin-bottom: .5em;
}
#libros ul li img{
    margin: auto;
    padding: 1em .5em 1em .5em;
    width: 7em;
}
#libros ul li{
    width: 10em;
    height: 19em;
    background-color: #FBBF9C;
    margin: .5em .5em .5em 0em;
    padding: 1em;
    text-align: center;
    list-style: none;
    display: block;
}
#libros h4{
    width: 10em;
    height: 2.5em;
    margin: auto;
    padding-top: .5em;
}
#libros p{
    font-size: .7em;
    margin: auto;
    padding-top: .7em;
}
#libros ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: scroll;
    width: calc(100% - .8em);
    margin: auto;
}

/*-----FOOTER------*/
footer{
    background-color: #81b551;
    margin-top: 2em;
    width: 100%;
}
#acumar{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    flex-wrap: wrap;
}
#acumar ul{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1em;
}
#acumar ul li{
    list-style: none;
    text-decoration: none;
}
#acumar ul li img{
    width: 2em;
    margin: .5em;
}
#acumar ul li:first-child{
    border-left: solid .2em white;
}
#acumar div img{
    width: 8em;
    padding-right: 1em;
    padding-left: 1em;
}
footer .revive{
    margin: auto;
    padding-top: 1em;
}
footer p{
    font-weight: 400;
    font-size: .7em;
    padding: 1em;
}

/*-----FORMULARIOS-----*/

/*pantalla de entrada y registro*/
#email label img,
#clave label img,
#nombre label img{
    width: 1em;
    padding-right: .8em;
}
#email label figcaption,
#clave label figcaption,
#nombre label figcaption{
    font-weight: 500;
    font-size: .8em;
}
#email label,
#clave label,
#nombre label{
    display: flex;
    justify-content: start;
    padding-left: .5em;
    padding-bottom: .3em;
}
#email input,
#clave input,
#nombre input{
    background-color: #FDDFCE;
    width: 20em;
    height: 1em;
    padding: 1em;
    margin-top: .5em;
    margin-bottom: 1em;
}
#clave,
#nombre{
    padding-top: 1em;
    padding-bottom: 1em;
}
form{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*barra de busqueda - pantalla principal*/
#buscador img{
    width: .9em;
    padding-right: .8em;
    padding-left: .8em;
}
#buscador input{
    background-color: #FDDFCE;
    width: 20em;
    height: 1em;
    padding: .8em;
    margin-top: .5em;
    margin-bottom: .5em;
}
#buscador{
    background-color: #FDDFCE;
    width: 21em;
    height: max-content;
    margin: auto;
    margin-bottom: 1em;
    margin-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*sección de comentario - actividad y libro*/
#textarea{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 1.5em;
}
textarea{
    background-color: #FDDFCE;
    height: 5em;
    padding: .5em;
    margin-top: 1em;
    margin-bottom: 1.5em;
}
#textarea label{
    font-size: .9em;
    font-weight: 500;
}
#textarea a{
    background-color: #ff8f4e;
    text-align: center;
    padding: .5em;
    border-radius: .8em;
    font-weight: 700;
    font-size: .9em;
    width: 7em;
}

/* PANTALLA DE ENTRADA - index*/
#entrada h1{
    font-size: 2em;
    width: 10em;
    margin: auto;
}
#primera p{
    font-size: .7em;
}
#entrada .revive{
    margin: auto;
    padding: 1em;
}
#entrada .hojas{
    width: 10em;
    margin: auto;
    padding: 1.5em;
}
#entrada p{
    width: 24em;
    text-align: center;
    padding: .5em;
    margin: auto;
}
.revive{
    width: 5em;
}
#primera form > div:last-of-type,
#registro > div:last-of-type{
    display: flex;
    align-items: center;
    flex-direction: column;
}
#primera form > div:last-of-type > a,
#registro > div:last-of-type > a {
    background-color: #ff8f4e;
    text-align: center;
    padding: .5em;
    border-radius: .8em;
    font-weight: 700;
    font-size: .9em;
}
#primera > a:hover,
#registro > a:hover{
    font-weight: 900;
}
.registrarse a{
    color: #FF7322;
    font-weight: 700;
    font-size: .7em;
}
#registro > div:last-of-type a:hover{
    font-weight: 900;
}
.registrarse p{
    font-weight: 700;
    padding-right: 1em;
    font-size: .7em;
}
.registrarse{
    display: flex;
    justify-content: center;
    margin: 1.5em;
}
#primera form > div:last-of-type  a:hover{
    font-weight: 900;
}

/*PANTALLA DE REGISTRO*/
#registro h3{
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    margin-top: 1.5em;
}
#registro h5{
    text-align: center;
    margin-top: 1em;
    margin-bottom: .5em;
    font-weight: 500;
}
.usuario{
    width: 6em;
    margin: auto;
    padding: 1em;
}
#registro .hojas{
    width: 10em;
    margin: auto;
    padding-top: 1.5em;
}
#imagenperfil a img{
    width: 1.2em;
    background-color: #ff8f4e;
    border-radius: 100%;
    padding: .3em;
    position: absolute;
    bottom: 0;
    right: 0;
}
#imagenperfil a img:hover{
    width: 1.4em;
}
#imagenperfil{
    position: relative;
    margin: auto;
    width: 7.5em;
    height: 7em;
}

/*PANTALLA DE TODAS LAS ACTIVIDADES*/
#talleres section:last-of-type nav ul{
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: scroll;
}
#talleres section:last-of-type nav ul li a{
    background-color: #ff8f4e;
    border-radius: .7em;
    padding: .5em;
    font-weight: 700;
    font-size: .9em;
    text-align: center;
}
#talleres section:last-of-type nav ul li a:hover{
    color: white;
}
#talleres section:last-of-type nav ul li{
    margin: 1.5em 1em 1.5em 0em;
    list-style: none;
}
#talleres section:last-of-type nav ul #seleccionada a{
   background-color: #FDDFCE;
   color: #FF7322;

}
#talleres section:last-of-type > div {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#talleres section:last-of-type{
    width: 22em;
    margin: auto;
    padding-top: 1em;
}

/*act destacada*/
#destacado .valoracion img{
    width: 5em;
}
#destacado .valoracion figcaption{
    font-size: .6em;
    margin-left: 1em;
}
#destacado .valoracion h5{
    margin-bottom: .5em;
    font-size: .6em;
}
#destacado .valoracion figure{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 1em;
}
#destacado .informacion figure{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
#destacado .taller > div:first-of-type img{
    width: 15em;
    margin-bottom: .5em;
    margin-left: 2em;
}
#destacado .taller{
    width: 19em;
    background-color: #FDDFCE;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: left;
}
#destacado .objetivo{
    margin-left: 2em;
}
#destacado .informacion img{
    width: 1.3em;
    background-color: #ff8f4e;
    padding: .3em;
    border-radius: 100%;
}
#destacado{
    margin: auto;
    width: 22em;
    border-bottom: solid .2em #FDDFCE;
    padding-top: 1em;
}

/*------ACTIVIDAD 1------*/
/*titulo, subtitulo*/
#actividad h2{
    font-weight: 700;
    font-size: 1.3em;
    text-align: center;
    margin: auto;
    padding-bottom: .5em;
    padding-top: .5em;
}
#actividad h3{
    font-weight: 500;
    font-size: .9em;
    text-align: center;
    margin: auto;
    padding-bottom: 1em;
}

/*botones de descipción de la actividad*/
#actividad nav ul{
    display: flex;
    justify-content: center;
    margin: auto;
}
#actividad nav{
    margin-bottom: 1em;
    margin-top: .6em;
}
#obj{
    font-weight: 700;
    font-size: .9em;
    background-color: #FDDFCE;
    padding: .5em;
    border-radius: .8em;
    list-style: none;
    margin: .5em;
}
#obj a{
    color: #FF7322;
}
#cron{
    font-weight: 700;
    font-size: .9em;
    padding: .5em;
    border-radius: .8em;
    list-style: none;
    margin: .5em;
    background-color: #ff8f4e;
}
#cron a:hover{
    font-weight: 900;
}
.descripcion h4{
    font-weight: 700;
    font-size: .8em;
    width: 100%;
    padding-bottom: .5em;
}
.descripcion h5{
    font-weight: 500;
    font-size: .7em;
    color: #61A226;
    width: 100%;
    padding-bottom: .5em;
}
.descripcion article div p{
    font-weight: 400;
    font-size: .8em;  
}
.descripcion article div:first-of-type{
    width: 22em;
    margin: auto;
    padding-top: 2;
    padding-bottom: 1.5em;
}
#video{
    position: relative;
    margin: auto;
    height: 12em;
    padding-bottom: auto;
    width: 20em;
}
#video iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0px;
    left: 0px;
}

/*boton de inscribirse*/
#boton > a{
    text-align: center;
    font-weight: 700;
    font-size: .95em;
    background-color: #ff8f4e;
    border-radius: 1em;
    padding: .7em;
    width: max-content;
}
#boton {
    text-align: center;
    margin-top: 3em;
    margin-bottom: 1em;
}
#boton > a:hover{
    font-weight: 900;
}
#boton div p{
    font-weight: 500;
    font-size: .75em;
    margin-bottom: .5em;
}
#boton div{
    padding: 1em;
    margin-top: 1.3em;
}
#boton div a img{
    margin-top: .2em;

}

/*sección de comentarios*/
.comentarios {
    padding: 1.5em;
}
.comentarios h4{
    margin-bottom: .5em;
}
.comentario{
    margin-top: 1em;
    padding-bottom: 1em;
    border-bottom: solid .15em #FBBF9C;
}
.comentario figure{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.comentario figcaption{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 700;
    margin-left: 1em;
}
.comentario figcaption span{
    font-weight: 400;
    font-size: .8em;
    margin-top: .5em;
}
.comentario figure img{
    width: 5em;
}
.comentario div a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.comentario div a figcaption{
    font-weight: 400;
    font-size: .7em;
}
.comentario div a img{
    width: 2em;
}
.comentario div p{
    font-weight: 400;
    font-size: .8em;
    padding-top: 1em;
    padding-bottom: 1em;
}
.comentario div a img:hover{
    width: 2.3em;
}
#textarea a:hover{
    font-weight: 900;
}

/*actividades relacionadas*/
#actividad #actividades h2{
    font-size: .9em;
    text-align: left;
    margin-top: 1em;
}
#actividad #actividades{
    width: 22em;
}

/*CRONOGRAMA  de actividad*/
#cronograma{
    width: 22em;
    margin: auto;
}
#cronograma article{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    margin-top: 1em;
    border-bottom: solid .2em #FDDFCE;
    padding-bottom: 1em;
}
#cronograma article img{
    width: 1.3em;
    margin-right: 1em;
}
#cronograma article ul{
    width: 100%;
    margin-top: .5em;
}
#cronograma article ul li{
    list-style-type: circle;
    padding-bottom: .5em;
    margin-left: 4.3em;
    font-size: .8em;
    font-weight: 400;
}

/*CONFORMACIÓN DE INSCRIPCIÓN A ACTIVIDAD*/
#inscribirse ul li,
#inscribirse h3{
    margin: auto;
    text-align: center;
}
#inscribirse h3{
    padding-top: 1em;
}
#inscribirse .comenzar{
    margin-bottom: 2em;
    margin-top: .5em;
    border-bottom: solid .2em #FBBF9C;
    padding-bottom: 2em;
    padding-top: 1em;
    width: max-content;
    list-style: none;
}
#inscribirse .comenzar a{
    background-color: #ff8f4e;
    border-radius: .7em;
    font-weight: 700;
    font-size: .9em;
    padding: .5em;
    margin: .5em;
}
#inscribirse ul li a:hover{
    font-weight: 900;
}
#inscribirse .comenzar p{
    margin: 1em;
    font-weight: 500;
    font-size: .9em;
    padding-bottom: .5em;
}
#inscribirse ul li:first-of-type,
#inscribirse ul li:last-of-type{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
}
#inscribirse ul li:first-of-type p,
#inscribirse ul li:last-of-type p{
    font-size: .75em;
}
#inscribirse ul li:first-of-type a,
#inscribirse ul li:last-of-type a{
    color: #FF7322;
    font-weight: 700;
    font-size: .75em;
    margin-left: 1em;
}
#inscribirse ul li:first-of-type a:hover,
#inscribirse ul li:last-of-type a:hover{
    font-weight: 900;
}

/* PANTALLA COMIENZO DE ACTIVIDAD 1 */
#comienzo section h5{
    margin-left: 1em;
    font-weight: 700;
    font-size: .6em;
    padding-top: .5em;
}
#comienzo  h3{
    margin: .5em 0em 0em .8em;
    font-size: .85em;
}
#comienzo  p{
    font-weight: 400;
    font-size: .7em;
    padding: 1em;
}
#comienzo section > div p{
   width: 30em;
}
#comienzo section > div{
    width: 100%;
}
#comienzo section{
    display: flex;
    flex-wrap: wrap;
    width: 22em;
    margin: auto;
}
#comienzo section article{
    background-color: #FDDFCE;
    width: 17em;
    margin: 1em;
    padding: .5em;
}
#comienzo section article:first-of-type{
    background-color: #FBBF9C;
    width: 17em;
    margin: 1em;
    padding: .5em;
}
#comienzo section article:first-of-type {
    padding-bottom: 1em;
}
#comienzo section article h3{
    font-size: .85em;
    border-bottom: solid #FBBF9C .2em;
    padding-bottom: .5em;
    width: 10em;
}
#comienzo section article:first-of-type h3{
    border-bottom: solid #FF7322 .2em;
}
#comienzo section article a{
    background-color: white;
    border-radius: .7em;
    padding: .5em;
    color: #FF7322;
    font-weight: 700;
    font-size: .9em;
    margin-left: 1em;
    text-align: center;
    width: min-content;
    align-items: center;
}
#comienzo section article a:hover{
    font-weight: 900;
}
#comienzo section article ul li{
    list-style: circle;
    margin: .6em 0em .5em 2em;
    font-size: .7em;
}
#comienzo section article ul{
    margin-top: .5em;
    margin-bottom: .5em;
}
#comienzo section article{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 13em;
}
#encabezado{
    background-image: url("../imagenes/actividad1_fondo.jpg");
    background-size: cover;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    padding-top: 1em;
}
#comienzo .titulo p{
    font-weight: 500;
    font-size: .7em;
    padding-top: .6em;
}
#comienzo .titulo h5{
    font-weight: 700;
    font-size: .8em;
}
#comienzo .titulo div{
    margin: 1em;
}
#comienzo .titulo{
    background-color: rgba(253, 223, 206, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18em;
    margin:auto;
}
#comienzo .titulo figure img{
    width: 1.8em;
    margin: .5em;
    background-color: #ff8f4e;
    border-radius: 100%;
    padding: .7em;
}

/*SECCIÓN PANTALLA MI CUENTA*/
#micuenta > div img{
    width: 1.8em;
    background-color: #ff8f4e;
    border-radius: 100%;
    padding: .7em;
    margin-left: 1em;
}
#micuenta figure{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 1em;
}
#micuenta figure h3{
    font-size: 1.3em;
    padding: .5em 0em .3em 0em;
}
#micuenta figure p{
    font-size: .8em;
    padding-bottom: 1em;
}
#micuenta section{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 21em;
    margin: auto;
}
#micuenta section:first-of-type article{
    padding-top: 1em;
    padding-bottom: 1em;
    display: flex;
    align-items: left;
    flex-direction: column;
    width: 21em;
}
#micuenta section > div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5em;
    width: 100%;
    padding: .5em;
    background-color: #FDDFCE;
}
#micuenta section > div h3{
    font-size: 1em;
}
#micuenta section > div img{
    width: 1.2em;
    padding-right: .5em;
}
#micuenta section:first-of-type article:first-of-type{
    border-bottom: solid #FBBF9C .15em;
}
#micuenta section article h5{
    font-size: .9em;
    margin-top: .5em;
    margin-bottom: .5em; 
}
#micuenta section article a{
    background-color: #ff8f4e;
    border-radius: .8em;
    font-weight: 700;
    font-size: .9em;
    padding: .7em;
    width: 5em;
    text-align: center;
}
#micuenta section article a:hover{
    font-weight: 900;
}
#micuenta section article p{
    font-size: .8em;
}
#micuenta section article div{
    margin-top: .1em;
    margin-bottom: .5em;
}
#micuenta section article div h5{
    color: #61A226;
    font-size: .8em;
    padding-top: .5em;
}
#micuenta section:first-of-type article figcaption{
    font-size: .6em;
}
#micuenta .librosguardados article img{
    width: 7em;
}
#micuenta .librosguardados article div{
    width: 13em;
}
#micuenta .librosguardados article h4{
    padding-bottom: .5em;
}
#micuenta .librosguardados .progreso{
    margin-bottom: 2em;
}
#micuenta .librosguardados .progreso figcaption{
    font-size: .6em;
}
#micuenta .librosguardados article{
    width: 22em;
    padding-top: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.progreso div{
    display: flex;
    justify-content: start;
    align-items: center;
}
.progreso img{
    width: 8em;
    margin-right: .8em;
}
.progreso figcaption{
    font-size: .85em;
    font-weight: 500;
}
.progresoclase ul li p{
    padding-bottom: .5em;
    font-weight: 400;
    font-size: .3em;
}
.progresoclase ul li{
    list-style: none;
    text-align: center;
    padding: 0em 1em .5em 0em;
}
.progresoclase ul li img{
    width: 2.5em;
}
.progresoclase ul{
    display: flex;
    align-items: center;
}
#micuenta section:last-of-type div:first-of-type{
    margin-top: 2.5em;
}
#micuenta section:last-of-type div:last-of-type{
    background-color: transparent;
}
#micuenta section:last-of-type a{
    padding: .7em;
    border-radius: .8em;
    background-color: #ff8f4e;
    font-size: .9em;
    font-weight: 700;
    margin: auto;
    text-align: center;
}
#micuenta section:last-of-type a:hover{
    font-weight: 900;
}

/*BIBLIOTECA*/
#biblioteca #libros{
    margin-bottom: 2em;
}
#biblioteca h2{
    margin-bottom: .5em;
}
#biblioteca p,
.lectura ul li{
    font-size: .7em;
    margin: auto;
    padding-top: .7em;
}
.lectura figure img,
.masleidos figure img{
    margin: auto;
    padding: 1em .5em 1em .5em;
    width: 8em;
}
#librodescrip .leermas{
    margin: auto;
}
/*nav de categorias de los libros*/
#libro{
    border-top: solid .2em #FDDFCE;
    padding-top: 1.5em;
    margin: auto;
    width: 22em;
    margin-top: 3em;
}
#libro > div{
    margin: auto;
}
#libro nav ul{
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: scroll;
}
#libro nav ul li a{
    background-color: #ff8f4e;
    border-radius: .7em;
    padding: .5em;
    font-weight: 700;
    font-size: .9em;
    text-align: center;
}
#libro nav ul li a:hover{
    color: white;
}
#libro nav ul li{
    margin: 1.5em 1em 1.5em 0em;
    list-style: none;
}
#libro nav ul #seleccionada a{
   background-color: #FDDFCE;
   color: #FF7322;
}
.lectura{
    background-color: #FBBF9C;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20em;
    height: 12em;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 1em;
}
.lectura > div{
    width: 10.5em;
}
.lectura ul {
    list-style: none;
    margin-bottom: 1.5em;
    margin-top: 1em;
}
.lectura h5{
    margin-top: .5em;
    font-weight: 500;
    font-size: .75em;
}
.lectura h4{
    font-size: .9em;
}
/*seccion de libros más leídos*/
#leidos{
    background-color: #FDDFCE;
    margin: 1em;
    padding: 1em;
    width: 20em;
    height: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
}
#leidos h2{
    width: 100%;
    margin-top: 1em;
    text-align: center;
    font-size: 1em;
}
.masleidos{
    width: 13em;
    height: 22em;
    background-color: #FBBF9C;
    margin: .7em;
    padding: 1em;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.masleidos h4{
    width: 10em;
}
.masleidos p{
    font-weight: 500;
    font-size: .9em;
}
#leidos .masleidos .informacion{
    margin-top: .5em;
    margin-bottom: .5em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.masleidos .informacion figcaption{
    font-weight: 400;
    font-size: .6em;
    margin-left: .5em;
}
.masleidos .leermas{
    width: 5em;
}

/*Calendario*/
#noviembre{
    text-align: center;
    margin: auto;
    padding-top: 1em;
    font-size: 1.3em;
    padding-bottom: .5em;
}
#diasresaltados {
    width: 20em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
    padding-top: .5em;
    padding-bottom: 2em;
}
#diasresaltados div{
    width: 2.3em;
    height: 2.3em;
    padding: .2em;
    background-color: #FDDFCE;
    border: solid .08em white;
}
#diasresaltados div p{
    font-size: .6em;
    font-weight: 500;
    padding: 1.3em;
    text-align: center;
}
#diasresaltados .fecha{
    background-color: #FBBF9C;
}
.diaultimo{
    margin-right: 14.25em;
}
#diasresaltados .dia p{
    text-align: center;
    padding-left: .2em;
    padding-right: .2em;
}
#calendario section{
    width: 22em;
    margin: auto;
}
#calendario section h2{
    margin-bottom: 1em;
}
#calendario section article{
    background-color: #FBBF9C;
    width: 20em;
    height: 13em;
    padding: 1em;
    margin-bottom: 1em;
}
#calendario section img{
    width: 1.3em;
    background-color: #ff8f4e;
    padding: .3em;
    border-radius: 100%;
    margin-bottom: .5em;
}
#calendario section:first-of-type article div:first-of-type{
    margin-top: 1em;
    margin-bottom: 2em;
    height: 4em;
}
#calendario .leermas{
    width: 5em;
}
#calendario section article h3{
    font-size: .85em;
    font-weight: 700;
    padding-bottom: .5em;
}
#calendario section article h5{
    font-size: .7em;
    font-weight: 700;  
}
#calendario section article p{
    font-weight: 400;
    font-size: .7em;
}
#calendario section article ul{
    margin-left: 1em;
    padding-top: .6em;
    margin-bottom: 1em;
}
#calendario section article ul li{
    list-style-type: circle;
    font-weight: 400;
    font-size: .7em;
    padding-bottom: .3em;
}
#calendario section:last-of-type article{
    height: 15em;
}
#calendario section:last-of-type article div:first-of-type{
    margin-top: 1em;
    height: 8em;
}
#calendario section:last-of-type{
    margin-top: 3em;
}

/*galería del calendario*/
#calendario > div:first-of-type{
    margin: auto;
    padding: 1em;
    text-align: center;
}
#galeria > img{
    width: 20em;
    height: auto;
    margin-top: .5em;
    background-color: #FDDFCE;
    padding: .5em;
    border-radius: .5em;
}
#galeria div img:hover{
    width: 1.6em;
}
#galeria div img{
    width: 1.5em;
    padding: .5em;
    margin: auto;
}
#galeria{
    text-align: center;
    padding-top: .5em;
}
#calendario > div:first-of-type figure img{
    width: 15em;
    padding-top: 1em;
    padding-bottom: .5em;
    margin: auto;
}
#calendario > div:first-of-type p{
    font-weight: 400;
    font-size: .8em;
    padding-top: .5em;
}

/*Pantalla selección de libro*/
#librodescrip section:first-of-type h2{
    text-align: center;
    font-weight: 700;
    font-size: 1.3em; 
    padding-bottom: .3em;
}
#librodescrip section:first-of-type h4{
    font-size: .9em;
    font-weight: 500;
    text-align: center;
}
#librodescrip section:first-of-type h5{
    font-size: .8em;
    font-weight: 700;
}
#librodescrip section:first-of-type{
    width: 22em;
    margin:auto;
    padding-top: 1em;
}
#librodescrip section:first-of-type > figure{
    text-align: center;
    padding-bottom: 1em;
}
#librodescrip section:first-of-type article{
    margin-top: 1em;
    margin-bottom: 1.5em;
    width: 23em;
}
#librodescrip section:first-of-type article > h5{
    margin-top: 1em;
    padding-bottom: .5em;
}
#librodescrip section:first-of-type article > p{
    font-weight: 400;
    font-size: .8em;
}
#librodescrip section:first-of-type .informacion{
    margin-top: 1.5em;
    margin-bottom: 1em;
}
#librodescrip section:first-of-type .informacion h5{
    font-size: .7em;
}
#librodescrip section:first-of-type .informacion figure{
    display: flex;
    align-items: center;
}
#librodescrip section:first-of-type ul{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 1em;
    width: 22em;
    margin: auto;
}
#librodescrip section:first-of-type ul li{
    list-style: none;
    width: 6.3em;
    padding: .5em 1em .5em 0em;
    margin-bottom: .5em;
}
#librodescrip section:first-of-type ul li h5{
    margin-bottom: .3em;
    font-size: .75em;
    font-weight: 700;
}
#librodescrip section:first-of-type ul li p{
    font-size: .75em;
    font-weight: 400;
}
#librodescrip .comenzarlibro a{
    font-weight: 700;
    font-size: .8em;
}
#librodescrip .comenzarlibro{
    background-color: #ff8f4e;
    text-align: center;
    padding: .5em;
    border-radius: 1em;
    margin: auto;
    width: 6em;
}
#librodescrip > div ul{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20em;
    margin: auto;
}
#librodescrip > div ul li{
    list-style: none;
}
#librodescrip .comenzarlibro a:hover{
    font-weight: 900;
}
#librodescrip > div:last-of-type{
    text-align: center;
    margin: auto;
    padding: 1.5em;
}
#librodescrip > div:last-of-type h5{
    padding-bottom: .5em;
    font-weight: 500;
    font-size: .75em;
}
#librocategoria{
    margin: auto;
    width: 22em;
    padding-top: 2em;
    padding-bottom: 2em; 
}
#librocategoria ul{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
#librocategoria ul li img{
    margin: auto;
    padding: 1em .5em 1em .5em;
    width: 8em;
}
#librocategoria ul li{
    width: 10em;
    height: 19.5em;
    background-color: #FBBF9C;
    margin: .7em .7em .7em 0em;
    padding: 1em;
    text-align: center;
    list-style: none;
    display: block;
}
#librocategoria h4{
    width: 10em;
    margin: auto;
    padding-top: .5em;
}
#librocategoria p{
    font-size: .7em;
    margin: auto;
    padding-top: .7em;
}
#librodescrip .comentarios .leermas{
    background-color: #ff8f4e;
    width: 9em;
    margin-top: 1.5em;
    margin-bottom: 2em;
}
#librodescrip .comentarios .leermas a{
    color:black;
}


/*Pantalla mediana*/
@media(min-width: 640px){

#categorias{
    width: 37.5em;
    margin: auto;
}
#reciclaje{
    width: 35em;
}
#actividades > article{
    margin-left: auto;
    margin-right: auto;
}
.comentarios{
    width: 28em;
    margin: auto;
}
#biblioteca section:first-child{
    width: 27em;
}
#actividad #actividades{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 28em;
    margin: auto;
}
#actividad #actividades h2{
    width: 100%;
}
#actividad #actividades .taller{
    margin: 1em 1em 1em 0em;
}

/*Libros*/
#libros {
    width: 38.2em;
}
#libro{
    width: 37.5em;
}
#libro > div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#leidos{
    width: 23.5em;
    margin: auto;
}
#librodescrip #botones{
    width: 31em;
    margin:auto;
}

/*primera pantalla del desarrollo de la actividad*/
#comienzo section{
    width: 20em;
    margin: auto;
}

/*Pantalla selección de libro*/
#librocategoria ul{
    display: flex;
    justify-content: start;
    align-items: flex-start;
    flex-wrap: wrap;
}
#librocategoria{
    width: 28em;
}

}

/*Pantalla - Tablet*/
@media(min-width: 768px){

/*-------HEADER--------*/ 
header nav ul{
    display: unset;
} 
.menu{
    display: none;
}
header{
    flex-direction: column;
    top: 0;
    left: 0;
    right: 0;
    padding-bottom: 1em;
} 
header nav ul{
    list-style: none;
    height: 2.5em;
    display: flex;
    flex-wrap: wrap;
    background-color: none;
    position: relative;
    padding-top: 0;
    width: 100%;
    left: auto;
    top: auto;
}  
header nav ul.menuvisible{
    left: auto;
}
header nav ul li{
    display: flex;
    justify-content: center;
    align-items: center;
} 
header h1{
    margin-bottom: 0;
    padding-top: 0;
}
header nav ul #cuenta{
    display: none;
}

/*------MAIN-------*/
/* categorias */
#categorias{
    margin: auto;
    width: 43em;
}
#reciclaje{
    width: 44.3em;
}

/*ubicacion*/
#encabezado .ubicacion a{
    color: white;
}
.ubicacion{
    margin-left: 1.3em;
    display: unset;
}
.ubicacion a{
    color: #61A226;
    font-weight: 400;
    font-size: .7em;
}

/*talleres - libros*/
#talleres section:last-of-type{
    width: 44.3em;
}
#actividades{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: auto;
    width: 44.3em;
}
#actividades h2{
    width: 100%;
    padding-left: .5em;
}
#destacadas > div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 46em;
}
#libros{
    margin: auto;
    width: 44.3em;
}
#libros ul{
    width: 45em;
}
#biblioteca section:first-child{
    width: 44em;
    margin-top: 1em;
}
#libro{
    width: 44em;
}
#leidos{
    width: 42em;
}
.lectura{
    margin-right: 1em;
}

/*actividad*/
#actividad #actividades{
    margin: auto;
}

/*primera pantalla del desarrollo de la actividad*/
#comienzo section{
    width: 40em;
    margin: auto;
}
#video{
    margin: auto;
    height: 20em;
    padding-bottom: auto;
    width: 30em;
}

/*sección MI CUENTA*/
#micuenta section:first-of-type{
    width: 40em;
}
#micuenta .librosguardados{
    width: 40em;
}
#micuenta section:last-of-type{
    width: 40em;
}
#micuenta section:last-of-type div:last-of-type{
    width: 20em;
}

/*calendario*/
#calendario section{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 46em;
    margin: auto;
}
#calendario h2{
    width: 100%;
    padding-left: .5em;
}
#calendario section article{
    margin-left: .5em;
    margin-right: .5em;
}
#galeria > img{
    width: 30em;
}

}

/*Pantalla - Desktop*/
@media(min-width: 1200px) {

/*------MAIN-------*/
#categorias{
    width: 44.2em;
}
#reciclaje{
    width: 66em;
}
footer p{
    width: calc(80% - 2em);
    margin: auto;
}

/*-----ACTIVIDAD-----*/
#talleres section:last-of-type{
    width: 66em;
}
#actividades{
    width: 66em;
}
.volver,
.principal{
    display: none;
}
.descripcion article{
    justify-content: center;
}

/*actividad*/
#actividad .comentarios{
    width: 43.5em;
}
.comentarios{
    width: 39em;
    margin: auto;
}
#actividad #actividades {
    width: 44em;
}

/*Libros*/
#libros{
    width: 66em;
}
#libros ul{
    width: 100%;
}
#libro{
    width: 69em;
    justify-content: start;
}
#biblioteca section:first-child{
    width: 53.6em;
}
#leidos{
    width: 50.5em;
}

/* PANTALLA DE ENTRADA*/
#primera{
    display: flex;
    justify-content: center;
    align-items: center;
}
#entrada{
    margin: 4em;
}

/*primera pantalla del desarrollo de la actividad*/
#comienzo section{
    width: 60em;
    margin: auto;
}

/*sección MI CUENTA*/
#micuenta section:first-of-type{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 55em;
    margin-bottom: 1em;
    flex-wrap: wrap;
}
#micuenta section:first-of-type article:first-of-type{
    border-bottom: none;
    border-right: solid #FBBF9C .15em;
}
#micuenta section:first-of-type article{
    padding-left: 1.5em;
    padding-right: 1.5em;
    height: 13em;
    margin-top: .9em;
}
#micuenta .librosguardados{
    width: 55em;
    margin-top: 4em;
}
#micuenta section:last-of-type{
    width: 55em;
}
#micuenta section:first-of-type div{
    width: 100%;
}

/*calendario*/
#calendario section{
    width: 70em;
    margin: auto;
}

/*Pantalla selección de libro*/
#librodescrip section:first-of-type{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50em;
    margin: auto;
}
#librodescrip section:first-of-type > figure{
    margin-right: 2em;
}
#librodescrip section:first-of-type  h2,
#librodescrip section:first-of-type  h4{
    text-align: left;
}
#librocategoria{
    width: 39em;
}
#leidos{
    width: 52em;
}

}