@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

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

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    }
main{
    margin: 1em
    }
h1, h2, h3, h4, h5, h6, p{
    margin-bottom: 1em;
    }
a{
    text-decoration: none;
    }
ul, li {
    list-style: none;
    padding: 0;
    }
img :not(.perfil-foro img) {
    max-width: 100%;
    height: auto;
    }
.menu{
    margin: 0 auto;
    padding: 1rem;
}
header, footer{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    text-align: center;
    }
p{
    padding: 1em;
}

/*MENÚ GENERAL*/
.menudesplegable{
    display: flex;
    justify-content: space-between;
    padding: 2em;
    }
#biblioacumar{
    width: 10em;
}

#btn-menu{display: none;}

#btn-menu img{
    width: 13%
}

header label{
    display: none; 
    width: 13%; 
    height: 3rem; 
    padding: 1rem; 
}
header label:hover{
    cursor: pointer; 
    background: rgba(255, 255, 255, 0.356);
}
.menu ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
}
.menu li{
    border-right: rgb(36, 37, 88);
}
.menu li:hover{
    background: rgba(255, 255, 255, 0.356);
    font-weight: bold;
}
    
.menu li a{
    display: block;
    padding: 1rem 2rem;
    color: rgb(36, 37, 88);
    text-decoration: none;
}
.menu img{
    display: none;
}
.menu p{
    display: none;
}

/*BARRA BUSQUEDA GENERAL*/
.buscar{
    display: flex;
    justify-content: center;
    }
.buscar input:enabled {
    border: solid 1.5px rgb(36, 37, 88);
    color: rgb(36, 37, 88);
    width: 320px;
    transition: width 0.4s ease-in-out;
    height: 3em;
    border-radius: 2em;
    padding-left: 2em;
    }
.buscar i{
    padding: 0.3em;
    color: rgb(36, 37, 88);
    font-size: 30px;
    }
.buscar i:hover{
    color: rgb(115, 190, 156);
    cursor: pointer;
    }
.enabled{
    display: flex;
    align-items: center;
}

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

/*INICIAR SESION*/
/*login--------------------------------*/

.inicio-sesion {
    font-family: 'Poppins', sans-serif;
    background-color:rgb(115, 190, 156);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#inicio-form{
    color:rgb(36, 37, 88);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: flex-start;
    padding-top: 4em;
}
#inicio-form h2{
    padding: 0 0 1em 0;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    
}
#inicio-form form{
    padding-bottom: 1em;
}
#inicio-form h3{
    font-size: 18px;

}
#inicio-form input{
    background-color: #CBE4DB;
    border-radius: 20em;
    padding: 0.6em;
}
#inicio-form p{
    font-size: 14px;
    padding-bottom: 1em;
    text-decoration: none;
}
#inicio-form a{
    text-decoration:solid;
    margin-bottom: 1em;
    text-decoration: none;
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(255, 255, 255);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
}
#inicio-form a:hover{
    background-color: rgba(255, 255, 255, 0.5);
    color: rgb(36, 37, 88);
    }
.registrate p{
    text-decoration: none;
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;

}

/*SECCIÓN INICIO*/

/*inicio--------------------------------*/
.titulos{
    color: rgb(36, 37, 88);
    margin: 1em;
    padding-bottom: 1em;
    text-align: center;
    }
.inicio p{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: center;
    }

/*destacados galeria--------------------------------*/
.galeria {
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    }
.slider{
    height: 50vh; 
    }
.slider__slide {
    display: none;
    }
.slider .slider__slide img {
    object-fit: cover;
    height: 50vh;
    }
.slider__dots {
    text-align: center;
    padding-top: 3em;
    }
.slider__dots--dot {
    cursor: pointer;
    height: 1em;
    width: 1em;
    margin: 2px;
    background-color: rgba(115, 190, 156, 0.5);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }
      
.active,
.slider__dots--dot:hover {
    background-color: rgb(115, 190, 156);
    }
      
.fade {
    animation-name: fade;
    animation-duration: 1s;
    }
      
@keyframes fade {
    from {
    opacity: 0.4;
    }
      
    to {
    opacity: 1;
    }
    }
.frase p{
    color: rgb(36, 37, 88);
    text-align: center;
}

/*libros destacados--------------------------------*/
.destacados{
    color: rgb(36, 37, 88);
    margin: 2em;
    padding: 2em;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    padding-bottom: 1em;
    }
.subtitulos h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: center;
    }

/*otra sección--------------------------------*/
.otros{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding: 0.5em;
    text-align: center;
    }
.otros p{
    font-size: 12px;
}
.otros h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: center;
    }
.subtitulos p{
    color: rgb(36, 37, 88);
    padding: 0.5em;
    text-align: center;
    }
.otros a{
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
    }
.otros ul li a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.otros ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.otros ul{
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-bottom: 1em;
    padding: 1.5em;
    }
.otros a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.otros ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.otros img{
    height: 200px;
    width: 157px;
    object-fit:contain;
    }

/*SECCION MI PERFIL*/
/*perfil--------------------------------*/
.titulos{
    color: rgb(36, 37, 88);
    margin: 2em;
    padding-bottom: 1em;
    text-align: center;
    }
.titulo{
    color: rgb(36, 37, 88);
    margin: 1em;
    text-align: center;
    }
.subtitulos{
    color: rgb(36, 37, 88);
    margin: 1em;
    text-align: center;
    }
.usuario img{
    object-fit: cover;
    display: block;
    margin: auto;
    width: 100px;
    height: 100px;
    }
.usuario h5{
    color: rgb(36, 37, 88);
    margin: 1em;
    padding-bottom: 1em;
    text-align: center;
    font-weight: normal;
    }
.usuario p{
    color: rgb(36, 37, 88);
    text-align: center;
    font-size: 12px;
}
.salir{
    color: rgb(36, 37, 88);
    text-align: center;
    margin: 2em;
    }
.salir ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.salir ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.salir a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
    }

/*nivel--------------------------------*/
.nivelector{
    border: solid 2px rgb(115, 190, 156);
    border-radius: 2em;
    color:rgb(36, 37, 88);
    text-align: center;
    margin: 2em;
}
.completo h5{
    color: rgb(36, 37, 88);
    text-align: center;
}
#barraprogreso{
    background-color:rgb(255, 255, 255);
    border-radius: 13px;
    border: 2px solid rgb(115, 190, 156);
    margin: 2em;
  }
#barraprogreso > div {
    background-color: rgb(115, 190, 156);
    width: 80%;
    height: 20px;
    border-radius: 10px;
  }

/*nivel completo--------------------------------*/
.titulos h2{
    color: rgb(36, 37, 88);
    text-align: center;
    padding: 2em;
}
.niveles{
    color: rgb(36, 37, 88);
    margin-top: 1em;
    padding: 0.5em;
    text-align: center;
    font-size: 15px;
    }
.niveles ul li{
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-bottom: 3em;
    }
.niveles ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.niveles a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.activo {
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    font-weight: bold;
    }
.desactivado{
    border: solid 2px rgba(115, 190, 156, 0.5);
    color: rgba(36, 37, 88, 0.5);
}

/*nivel beta--------------------------------*/
#puntuar{
    width: 10%;
    margin: 0 2em;
}
#comparti{
    width: 10%;
    margin: 0 2em;
}
#lee{
    width: 10%;
    margin: 0 2em;
}
#check{
    width: 10%;
    margin: 0 2em;
}

.nivelbeta{
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    width: 100%;
    padding: 1em 0.5em;
    align-items: center;
}
.puntuar{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}
.comparti{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}
.lee{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
}

.puntuar{
    border: solid 2px rgb(115, 190, 156);
    border-radius: 2em;
    color:rgb(36, 37, 88);
    text-align: center;
    margin: 0.5em;
    padding: 0.25em 1em;
    align-content: center;
}
.comparti{
    border: solid 2px rgb(115, 190, 156);
    border-radius: 2em;
    color:rgb(36, 37, 88);
    text-align: center;
    margin: 0.5em;
    padding: 0.25em 1em;
    align-content: center;
}
.lee{
    border: solid 2px rgba(115, 190, 156, 0.50);
    border-radius: 2em;
    color:rgb(36, 37, 88, 0.50);
    text-align: center;
    margin: 0.5em;
    padding: 0.25em 1em;
    align-content: center;
}
.lee p{
    color: rgb(36, 37, 88, 0.50);
}

/*--------------------------------*/
@media screen and (min-width: 800px){

#puntuar{
    width: 7%;
    margin: 0 2em;
}
#comparti{
    width: 7%;
    margin: 0 2em;
}
#lee{
    width: 7%;
    margin: 0 2em;
}
#check{
    width: 7%;
    margin: 0 2em;
}

.completa ul{
    display: inline-block;
    justify-content:space-around;
    text-align: center;
    flex-direction: row;
}
}

/*SECCIÓN FAVORITOS*/
/*agregados recientes--------------------------------*/
.recientes{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding: 0.5em;
    text-align: center;
    margin: 2em;
    align-items: baseline;
    }
.subtitulos h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: center;
    }
.subtitulos p{
    color: rgb(36, 37, 88);
    padding: 0.5em;
    text-align: center;
    }
.recientes a{
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
    }
.recientes p{
    font-size: 12px;
    }
.recientes ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.recientes ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.recientes ul{
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-bottom: 3em;
    padding: 1.5em;
    }
.recientes a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.recientes ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.recientes img{
    height: 180px;
    object-fit:contain;
}

/*tu lista de favoritos--------------------------------*/
.tu-lista{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding-bottom: 3em;
    text-align: center;
    }
.subtitulos h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: center;
    }
.subtitulos p{
    color: rgb(36, 37, 88);
    padding: 0.5em;
    text-align: center;
    }
.tu-lista a{
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
}
.tu-lista p{
    font-size: 12px;
}
.tu-lista ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.tu-lista ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.tu-lista ul{
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-bottom: 3em;
    padding: 1.5em;
    }
.tu-lista a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.tu-lista ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.tu-lista img{
    height: 180px;
    object-fit:contain;
    }  

/*SECCIÓN BIBLIOTECA*/
/*opción géneros--------------------------------*/
.menugeneros{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding: 0.5em;
    text-align: center;
    }
.titulos h2{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    }
.titulos2{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    } 
.subtitulos h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    }
.menugeneros{
    border-radius: 3em;
    padding-bottom: 3em;
    }
.menugeneros ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.menugeneros ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.menugeneros ul li{
    display: inline-block;
    justify-content:space-evenly;
    align-items: center;
    text-align: center;
    padding: 2em;
    }
.menugeneros a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.menugeneros ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.menugeneros img{
    height: 150px;
    width: 150px;
    object-fit:contain;
    }

/*SECCIÓN COMUNIDAD*/
/*últimos que participaste--------------------------------*/
.participa{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding: 0.5em;
    text-align: center;
    margin-left: 1em;
    }
.subtitulos h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    }
.subtitulos h3{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    }
.participa a{
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
    }
.participa ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.participa ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.participa ul li{
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-bottom: 3em;
    }
.participa ul{
    margin-left: -2em;
    }
.participa a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.participa ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.participa img{
    height: 150px;
    width: 150px;
    margin-left: 1em;
}

/*comunidad--------------------------------*/
.reseñas{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    text-align: center;
    }
.subtitulos h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: left;
    }
.subtitulos h3{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: left;
    }
.reseñas a{
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
    }
.reseñas ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.reseñas ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.reseñas ul li{
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-bottom: 3em;
    }
.reseñas a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.reseñas ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.reseñas img{
    height: 100px;
    width: 100px;
    margin-left: 1em;
}

/*foros--------------------------------*/
.foros{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding: 0.5em;
    text-align: center;
    }
.subtitulo h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: left;
    }
.subtitulo h3{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: left;
    }
.foros a{
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
    }
.foros ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.foros ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.foros ul li{
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-bottom: 3em;
    }
.foros a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.foros ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.foros img{
    height: 100px;
    width: 100px;
    margin-left: 1em;
}
.foros{
    padding-bottom: 2em;
}
.circulo-mas{
    background-color: rgb(115, 190, 156);
    border: 4px solid rgba(0,0,0,.25);
    border-radius: 50%;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    cursor: pointer;
    display: flex;
    width: 4rem;
    height: 4rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9950;
}
.circulo-mas > i {
    margin: auto;
    padding: 0;
    font-size: 3.5rem;
    color:rgb(255, 255, 255)
}

/*SECCIÓN DONÁ LIBROS*/
/*inicio--------------------------------*/
.titulos{
    color: rgb(36, 37, 88);
    margin: 1em;
    text-align: center;
    }

.titulos p{
    color: rgb(36, 37, 88);
    margin: 1em;
    text-align: center;
    justify-content: center;
    }

 .recuadro{   
    border: solid 2px rgb(115, 190, 156);
    border-radius: 2em;
    color:rgb(36, 37, 88);
    margin: 1.5em;
    }
.intro p{
    color: rgb(36, 37, 88);
}
    
.sedes p{    
    font-size: 14pt;
    color:white;
    text-align: center;
    background: rgb(115, 190, 156);
    height: 50px;
    padding:0.5em;
    margin: 1.5em;
    border:2px solid rgb(115, 190, 156);
    border-radius: 90px;
    }
    
.subtitulo{
    color: rgb(36, 37, 88);
    justify-content: left;
    margin-bottom: 1em;
    margin-left: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }

.subtitulo h3{
    color: rgb(36, 37, 88);
    text-transform: uppercase;
    margin: 1em;
    text-align: center;
}
#iconogoogle_maps{
    justify-content: left;
    margin: 1em;
    margin-bottom: 1em;
    }
.sucursales{
    columns: 3;
    display:block;
    justify-content: space-between;
}
#central p{
    color: rgb(36, 37, 88);
    margin: 0.5em;
}
#media p{
    color: rgb(36, 37, 88);
    margin: 0.5em;
}
#alta p{
    color: rgb(36, 37, 88);
    margin: 0.5em;
}

.aclaracion p{
    text-align: center;
    color: rgb(36, 37, 88)
}

/*--------------------------------*/
@media (max-width:1024px){
header label{
    display: block;
    }
.menu img{
    object-fit: cover;
    display: block;
    margin: auto;
    width: 75px;
    height: 75px;
    }    
.menu p{
    display: block;
    color: rgb(36, 37, 88);
    font-size: 15px;
    font-weight: bold;
    }    
.menu{
    position: absolute !important;
    background: rgb(115, 190, 156);
    width: 60%;
    margin-left: -70%;
    transition: all .3s;
    }
.menu ul{
    flex-direction: column;
    }
.menu li{
    border-top: 1px rgb(36, 37, 88);
    }
  
}
@media (max-width:935px){
.sucursales{
    columns: 1;
    display:block;
    flex-direction: column;
    justify-content: space-between;
}
#iconogoogle_maps{
    zoom: 200%;
    display: inline-block;
}

@media screen and (min-width: 800px){
.redeslinks ul li img{
    width: 20%;
    margin: 0 2em;
    }
.logos a img {
    justify-content: center;
    width: 50%;
    margin-left: 10em;
    padding: 0.5em;
    }
}
}

/*SECCION CONTACTO*/
/*slider acumar-------------------------------*/
.galeria {
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    }
.slider{
    height: 50vh; 
    }
.slider__slide {
    display: none;
    }
.slider .slider__slide img {
    object-fit: cover;
    height: 50vh;
    }
.slider__dots {
    text-align: center;
    padding-top: 3em;
    }
.slider__dots--dot {
    cursor: pointer;
    height: 1em;
    width: 1em;
    margin: 2px;
    background-color: rgba(115, 190, 156, 0.5);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }
      
.active,
.slider__dots--dot:hover {
    background-color: rgb(115, 190, 156);
    }
      
.fade {
    animation-name: fade;
    animation-duration: 1s;
    }
      
@keyframes fade {
    from {
    opacity: 0.4;
    }
      
    to {
    opacity: 1;
    }
    }
.acumar{
    color: rgb(36, 37, 88);
    margin: 2em;
    padding: 2em;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    padding-bottom: 1em;
    }

/*contactanos-------------------------------*/
.titulos{
    color: rgb(36, 37, 88);
    margin: 1em;
    text-align: center;
    }
.titulos p{
    color: rgb(36, 37, 88);
    margin: 1em;
    text-align: center;
    justify-content: center;
    }
.intro p{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding: 1.5em;
}

/*sedes acumar-------------------------------*/
.contenedora_1 {
    display: block;
    columns: 2;
    justify-content: space-between;
}
.contenedora_1 ul{
    justify-content: space-between;
    padding: 1em;
}
.contenedora_1 ul li{
    text-align-last: left;
    justify-content: left;
    margin: 1em;
    margin-bottom: 1em;
}
.contenedora_1 h3{
    color: rgb(36, 37, 88);
}
#sedes h3{
    text-justify: left;
    color: rgb(36, 37, 88);
    margin: 1em;
}
#redes h3 ul li{
    margin-bottom: 0em;
}
#redes h3{
    color:rgb(36, 37, 88)
}
#redes h3 ul li a{
    text-justify: left;
    color: rgb(36, 37, 88);
    margin: 1em;
}

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

@media (max-width:935px){
.sucursales{
    columns: 1;
    display:block;
    flex-direction: column;
    justify-content: space-between;
}
#iconogoogle_maps{
    zoom: 200%;
    display: inline-block;
}
.contenedora_1 {
    columns: 1;
    justify-content: space-between;
    text-align-last: center;
    justify-content: center;
    margin: 1em;
    margin-bottom: 1em;
}
}

@media (max-width:1024px){
.contenedora_1 ul li{
    text-align-last: left;
    justify-content: left;
    margin: 1em;
    margin-bottom: 1em;
}
}

/*DETALLE LIBRO PERFIL*/

/*inicio--------------------------------*/
.titulos{
    color: rgb(36, 37, 88);
    padding-top: 1em;
    }

/*detalle libro--------------------------------*/
.tapa_florentina img {
    width: 250px;
}
.tapa_florentina {
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 1em;
}
.detalle_libro{
    padding-top: 3em;
    display: flex;
    justify-content: space-evenly;
}
section figure {
    display: flex;
    justify-content: center;
}

/*ficha tecnica libro--------------------------------*/
.información{
    display: flex;
    flex-direction: column;
    color: rgb(36, 37, 88);
    padding: 0em 1em 2em 2em;
    text-align: left;
}
.titulosperfil{
    color: rgb(36, 37, 88);
    text-align: left;
    margin-top: 1em;
}
.subtituloperfil{
    color: rgb(36, 37, 88);
    text-align: left;
    margin-left: -0em;
}
.información p{
    color: rgb(36, 37, 88);
    padding: 0em;
    text-align: left;
}
.estrella{
    display: flex;
    justify-content:center;
    color: rgb(115, 190, 156);
    font-size: 14px;
    margin-left: -1em;
    }
.corazon{
    display: flex;
    color: rgb(115, 190, 156);
    font-size: 14px;
    margin-left: -1em;
}
.favoritos{
    display: flex;
    color: rgb(115, 190, 156);
    font-size: 14px;
    margin-left: -1em;
}
.material-icons{
    display: flex;
    padding: 0.3em;
    color: rgb(115, 190, 156);
    font-size: 30px;
    }
.estrella p{
    color: rgb(36, 37, 88, 0.50);
    padding: 0.5em;
    font-size: 12px;
}
.corazon p{
    color: rgb(36, 37, 88, 0.50);
    padding: 0.5em;
    font-size: 12px;
}
.favoritos p{
    color: rgba(36, 37, 88, 0.50);
    padding: 0.5em;
    font-size: 12px;
}
.corazon span:hover{
    color: rgba(115, 190, 156, 0.5);
    cursor: pointer;
}
.favoritos span:hover{
    color: rgba(115, 190, 156, 0.5);
    cursor: pointer;
}
.botoneslibro{
   display: inline-block;
   flex-direction: column;
   text-align: center;
   margin-left: -4em;
}
.botonleer{
    margin-top: 2em;
}
.botondescargar{
    margin-top: 2em;
    padding-bottom: 2em;
}
.botonleer a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    font-size: 0.8em;
    border-radius: 3em;
}
.botondescargar a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    font-size: 0.8em;
    border-radius: 3em;
}
.botonleer a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    cursor: pointer; 
    }
.botondescargar a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    cursor: pointer; 
    }
.parrafodetallelibro {
    color: rgb(36, 37, 88);
}
/*sinopsis--------------------------------*/
.subtitulos{
    text-align: center;
    color: rgb(36, 37, 88);
    padding: 0.5em;
}
.puntoslibro{
    display: flex;
    align-items: center;
    margin-left: 1em;
}
.puntuacion{
    display: flex;
    justify-content:center;
    color: rgb(115, 190, 156);
    font-size: 14px;
}
.puntuacion p{
    color: rgb(115, 190, 156);
    padding: 0.5em;
    font-weight: bolder;
}
.sinopsis p{
    text-align: left;
}
.leermas{
    display: flex;
    justify-content:center;
}
.botonleermas a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    font-size: 0.8em;
    border-radius: 3em;
}
.botonleermas a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    cursor: pointer; 
    }

/*reseñas--------------------------------*/
.titulos h3{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
}
.subtitulo2{
    text-align: center;
    color: rgb(36, 37, 88);
    margin-top: 2em;
}
.reseñas-usuarios{
    color: rgb(36, 37, 88);
    text-align: left;
}
.usuario{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}
.usuarios img{
    height: 50px;
    width: 50px;
 }
.usuario p{
    font-size: 12px;
    font-weight: bolder;
}
.comentariosusuarios li p{
    text-align: left;
    font-size: 12px;
    }
.comentariosusuarios li {
    border-radius: 40px;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 2em;
    margin-top: 2em;
    margin-left: 1.5em;
    margin-right: 1.5em;
    padding-top: 1.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    }
#botonreseña{
    display: flex;
    flex-direction: column;
}
.carita{
    display: flex;
    flex-direction: row;
    color: rgb(115, 190, 156);
    justify-content: center;
}
.carita :not(.carita p):hover{
    color: rgba(115, 190, 156, 0.50);
    cursor: pointer;
}
.carita p{
    color: rgb(115, 190, 156);
    font-weight: bolder;
    font-size: 12px;
}
.formularioreseña textarea {
    margin-top: 1em;
    margin-left: 1.9em;
    width: 403px;
    height: 138px;
    margin-bottom: 0.5em;
    padding: 2em;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    color: rgba(36, 37, 88, 0.50);
    border: solid 2px rgb(115, 190, 156);
    border-radius: 1em;
}
input[type=submit] {
    border: solid 2px rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    font-size: 12px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 1em 1em 0.5em 2em;
    border-radius: 1em;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    justify-content: center;
}
input[type=submit]:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    cursor: pointer;
}


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

@media screen and (min-width: 800px){
.detalle_libro{
    display: flex;
    justify-content: space-evenly;
    margin-left: 3em;
    padding-top: 3em;
    }
.tapa_florentina {
    margin-bottom: 1.5em;
    }
.información{
    padding: 2em 3em 2em 3em;
    }
.titulosperfil{
    text-align: left;
    margin-left: 2em;
    }
.botoneslibro{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    margin-left: -22em;
    padding-top: 2em;
    }
.puntuacion{
    justify-content: left;
    margin-left: 2em;
    }
.estrella {
    display: flex;
    justify-content: left;
    margin-left: 2.5em;
    }
.corazon {
    display: flex;
    justify-content: left;
    margin-left: 2.5em;
    }
.favoritos {
    display: flex;
    justify-content: left;
    margin-left: 2.5em;
    }
.sinopsis p {
    text-align: left;
    margin-left: 1em;
    }
.subtituloperfil{
    text-align: left;
    margin-left: 3.5em;
    }
.subtitulos{
    margin-left: 1.5em;
    }
.información p{
    text-align: left;
    margin-left: 3em;
    }
.formularioreseña textarea{
    width: 750px;
    height: 138px;
    }
.leermas {
    justify-content: left;
    margin-left: 1.5em;
    }
    }

@media screen and (min-width: 1200px){
.detalle_libro{
    display: flex;
    justify-content: space-evenly;
    margin-left: 3em;
    padding-top: 3em;
    }
.tapa_florentina {
    margin-bottom: 1.5em;
    margin-left: -1em;
    }
.información{
    padding: 2em 3em 2em 3em;
    }
.botoneslibro{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    margin-left: -30em;
    padding-top: 2em;
    }
.titulosinopsis{
    margin-left: 1em;
}
.titulosperfil{
    text-align: left;
    margin-left: 1.9em;
    }
.puntoslibro{
    display: flex;
    align-items: center;
    margin-left: 0em;
    }
.puntuacion{
    justify-content: left;
    margin-left: 2em;
    }
.sinopsis p {
    text-align: left;
    margin-left: 1em;
    }
.leermas {
    justify-content: left;
    margin-left: 1.5em;
    }
.comentariosusuarios{
    display: flex;
    justify-content: space-evenly;
    }
.comentariosusuarios li{
    margin-left: 1.7em;
    margin-right: 1.7em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 1.7em;
    padding-left: 1.7em;
    padding-right: 1.7em;
    width: 340px;
    }
.formularioreseña textarea {
    width: 1170px;
    margin-bottom: 1em;
    font-size: 15px;
    }
    }
    
/*SECCIÓN NARRATIVA BIBLIOTECA*/

/*libros narrativa --------------------------------*/
.narrativa{
    color: rgb(36, 37, 88);
    margin-top: 2em;
    padding: 0.5em;
    text-align: center;
    margin: 2em;
    padding-bottom: 2em;
    }
.narrativa p{
    font-size: 12px;
}
.subtitulos h4{
    color: rgb(36, 37, 88);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: center;
    }
.subtitulos p{
    color: rgb(36, 37, 88);
    padding: 0.5em;
    text-align: center;
    }
.narrativa a{
    font-size: 0.8em;
    border-radius: 3em;
    padding-bottom: 1em;
    }
.narrativa ul li a{
    color: rgb(36, 37, 88);
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.narrativa ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.narrativa ul{
    display: inline-block;
    align-items: center;
    text-align: center;
    margin-bottom: 3em;
    padding: 1em
    }
.narrativa a{
    color: rgb(36, 37, 88);
    align-items: center;
    text-align: center;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 3em;
    margin: 0.5em;
    padding: 0.25em 1em;
    }
.narrativa ul li a:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    }
.narrativa img{
    height: 200px;
    width: 157px;
    object-fit:contain;
}

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

/* PARA REDES GENERAL*/
.redeslinks h5{
    padding: .5em;
    text-align: center;
    background-color: rgb(36, 37, 88);
    color: rgb(255, 255, 255);
    border-bottom: solid 2px rgb(255, 255, 255);
    }
.redeslinks ul{
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background-color: rgb(115, 190, 156);
    }
.redeslinks ul li img{
    width: 45%;
    margin: 0 2em;
    }
.logos ul{
    display: flex;
    justify-content: space-between;
    }
.logos a img {
    width: 55%;
    padding: 0.5em;
}
footer p{
    font-size: 0.8em;
    padding: 2em;
}

/*FORO*/
/*inicio del foro--------------------------------*/
.titulo-foro{
    color: rgb(36, 37, 88);
    margin: 2em 1em 1em 2em;
    padding-bottom: 1em;
}
#foro ul{
    display: flex;
    flex-direction: column;
    margin: 2em;
    border: solid 2px rgb(115, 190, 156);
    border-radius: 2em;
    padding: 2em;
}
.perfil-foro img{
    height: 65px;
    padding: 1em;
}
.comentarios-foro{
    display: flex;
    margin-top: 1.5em;
    
}
.nombre-mensaje{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.2em;
}
.mensaje p{
    font-size: 0.85em;
    color: rgb(36, 37, 88);
}
.mensaje h6{
    color: rgba(36, 37, 88, 0.5);
    font-weight: normal;
}
.nombre-mensaje .uno{
    color: rgb(36, 37, 88);
    font-weight: bold;
}
.nombre-mensaje .dos {
    color: rgb(115, 190, 156);
    font-weight: bold;
}

/*para responder--------------------------------*/
.formulario-respuesta textarea{
    margin-top: 1em;
    margin: 2em;
    width: 450px;
    height: 138px;
    margin-bottom: 0.5em;
    padding: 2em;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    color: rgba(36, 37, 88, 0.50);
    border: solid 2px rgb(115, 190, 156);
    border-radius: 1em;
}
input[type=submit]{
    border: solid 2px rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    font-size: 12px;
    padding: 0.2em 1em 0.2em 1em;
    margin: 1em 1em 0.5em 2em;
    border-radius: 1em;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    justify-content: center;
}
input[type=submit]:hover{
    background-color: rgb(115, 190, 156);
    color: rgb(36, 37, 88);
    cursor: pointer;
}

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

@media screen and (min-width: 800px){

.formulario-respuesta textarea{
    width: 710px;
    height: 138px;
}
.perfil-foro img{
    height: 80px;
    padding: 1em;
}
}

@media screen and (min-width: 1200px){

.formulario-respuesta textarea{
    width: 1310px;
    margin-bottom: 1em;
    font-size: 15px;
}
.perfil-foro img{
    height: 80px;
    padding: 1em;
}
}

/*FIN SECCIONES DE LA WEBAPP*/
/*--------------------------------*/
/*--------------------------------*/

/*PARA MENÚ DESPLEGABLE GENERAL*/
@media (max-width:768px){
header label{
    display: block;
}
.menu img{
    object-fit: cover;
    display: block;
    margin: auto;
    width: 75px;
    height: 75px;
}    
.menu p{
    display: block;
    color: rgb(36, 37, 88);
    font-size: 15px;
    font-weight: bold;
}    
.menu > {
    position: absolute;
    background: rgb(115, 190, 156);
    width: 60%;
    margin-left: -70%;
    transition: all .5s;
}
.menu ul{
    flex-direction: column;
}
.menu li{
    border-top: 1px rgb(36, 37, 88);
}
#btn-menu:checked ~ .menu{
    margin: -2em;
    margin-top: 3em; 
}
}

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

/*PARA REDES SOCIALES GENERAL*/
@media screen and (min-width: 800px){
.redeslinks ul li img{
    width: 20%;
    margin: 0 2em;
    }
.logos a img {
    justify-content: center;
    width: 50%;
    margin-left: 10em;
    padding: 0.5em;
    }
    }