@charset "utf-8"

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


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

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

body {
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-size: 28px;
    margin: 0;
}

h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 1em;
}

h3 {
    font-size: 20px;
    margin: 0px 0 15px;
    font-weight: 600;
}

h5 {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
}


ul,
li {
    list-style: none;
    padding: 0;

}



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

a {
    text-decoration: none;
}

button {
    box-shadow: none;
}


/* ------ 
texto form
------ */

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #c3c3c3;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #c3c3c3;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #c3c3c3;
}

/*------ BOTONES ------ */


.inscribite,
.comentar,
.no-cambia,
.reservar,
.descargar {
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    background-color: #E1BEE7;
    color: black;
    font-weight: 600;
    letter-spacing: 0.1em;
    border: solid .2em #E1BEE7;
    border-radius: .5em;
    width: auto;
    height: auto;
    padding: .4em .7em;
    margin-top: 1em;

}

.boton :hover {
    background-color: rgb(61, 9, 88);
    border: solid .2em rgb(61, 9, 88);
    border-radius: .5rem;
    color: white;
    font-weight: 600;
    width: auto;
    height: auto
}


/* ------ MENU ------ */

header {
    background-color: #601C84;
    padding: 1em;
    position: sticky;
    top: 0;
    z-index: 8000;
}

.contenedor {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

}

#logo {
    display: block;
    width: 25px;
    height: auto;
}

#usuario,
#llamamenu {
    color: white;
    background: none;
    cursor: pointer;
    width: 35px;
    height: 35px;
    padding: 0;
    border: solid .2em #601C84;
    border-radius: .3em;
}

#usuario i,
#llamamenu i {
    margin: auto;
    padding: 0;
}

#usuario :hover,
#llamamenu :hover {
    background: rgba(68, 21, 93, 0.48);
    border: solid .2em rgba(68, 21, 93, 0.48);
    border-radius: .3em;
}

header nav a {
    color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

header nav .visible a {
    justify-content: flex-start;
    padding: .8em 0 .8em 2em;
}


header nav a:hover {
    background-color: rgba(68, 21, 93, 0.48);
    font-weight: 500;
}

#llamamenu {
    display: flex;
    position: relative;
    z-index: 9999;
}


header nav ul {
    background: rgba(96, 28, 132, 0.81);
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 60%;
    padding-top: 5em;
    height: 100vh;
    z-index: 9980;
    transition: all .5s ease;

}



.visible {
    left: 40%;
    transition: all .25s ease;
}


/* ------ INICIO ------*/

#busca-libro {
    margin: 50px 0;
}

#inicio {
    display: flex;
    margin: auto;
    align-items: flex-start;
    justify-content: center;
    margin: 40px 0;
}

#inicio div {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 1em 0;
}


#logobm {
    max-height: 150px;
    display: block;
    margin: 0 10px;

}

#busca-libro form {
    display: flex;
    justify-content: center;
    align-content: center;
}

input[type="search"] {
    width: 270px;
    height: 35px;
    padding-left: 1em;
    border: solid .15em #601C84;
    border-radius: .4em;
    margin-right: .5em;
    font-family: 'Poppins', sans-serif;

}

#busca-libro form button {
    width: 40px;
    height: 35px;
    border: solid .14em #601C84;
    border-radius: .4em;
    color: #601C84;
    background: transparent;
}



/* ------ libro del mes/novedades ------ */



#libro-mes {
    background-color: #601C84;
    padding: 2em;
    color: white;
    width: auto;

}



#lasmalas {
    width: 180px;
    height: auto;
    margin: 1em 0em 0em 0em;

}

#lasmalas img {
    max-width: 100%;
}

#info-mes p {
    margin-top: 1em;
}

/*------ slider libros ------ */

.nov {

    padding: 1em;

}

.book-slider {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    margin-bottom: 2em;
    padding-left: 2em;

}

.book-slider article {
    margin-left: 1em;
    display: flex;
    flex-direction: column;

}

.book-slider figure {
    width: 8em;
    margin-left: 0;
    margin-right: 0;
}

.book-slider img {
    width: 100%;
    height: 180px;
    margin-left: 0;
}

.book-slider article p {
    display: block;
    margin: 0;
    font-size: 1em;

}

.book-slider article p:first-of-type {
    font-weight: 550;
    line-height: 1.2em;

}


/*------ TALLERES ------ */


#taller-mes {
    background-color: #601C84;
    color: white;
    width: auto;
    padding: 2em;
}


#taller-mes figure {
    width: 300px;
    height: auto;
    margin: 0;

}

#taller-mes img {
    max-width: 100%;
    height: auto;
    margin: 0;

}



.taller-info {
    margin-top: 1em;
}


.taller-info p {
    margin-top: 1em;
}


#mas-talleres {
    padding: 1em 2em;
    margin-top: 1em;
}

#mas-talleres h3 {
    margin-top: 1em;

}

.contenedora-taller {
    border: solid .15em #601C84;
    border-radius: .5em;
    margin-bottom: 2em;
    padding: 1em;
}

.contenedora-taller figure {
    width: 100%;
    height: auto;
    margin: 0;

}

.contenedora-taller img {
    max-width: 100%;
    height: auto;
    margin: 0;

}

.mas-taller-info p {
    margin-top: 1em;
}



/*------ ACTIVIDADES------ */


#actividades {
    padding: 1em 2em;

}

.contenedor-actividades {
    border: solid .15em #601C84;
    border-radius: .5em;
    margin-top: 40px;
    padding: 1em;
    display: flex;
    flex-direction: row;
    height: auto;
    width: 100%;
}

.fechasactividades {
    text-align: center;
    padding-left: 0;
    width: 250px;
}

.fecha {
    font-size: 30px;
    margin-bottom: 0.2em; 
    font-weight: 700;
    line-height: 1em;
}

.infoactividades {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 0 1.5em;


    

}

.tituloact {
    font-size: 20px;
    font-weight: 700;
}







/*------ NEWSLETTER------ */

#newsletter {
    background-color: #601C84;
    border: solid .2em #601C84;
    border-radius: .5em;
    color: white;
    padding: 1em;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin: 2em 0 1em 0;
}

#newsletter h2 {
    border-bottom: none;
}


#newsletter form {
    display: flex;
    justify-content: center;
    align-content: center;
}



#newsletter input[type="email"] {
    background: none;
    width: 200px;
    height: 35px;
    padding-left: 1em;
    border: solid .15em white;
    border-radius: .4em;
    margin-right: .5em;
    font-family: 'Poppins', sans-serif;
}



#newsletter form button {
    border: solid .15em white;
    border-radius: .4em;
    background: transparent;
    height: 35px;
    width: 40px;
}

#newsletter form button .material-icons {
    margin: auto;
    padding: 0;
    color: white
}



/* ------ NOTICIAS ------*/

#noticias {
    padding: 1em 2em;
}

#galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 1em;
}


#noticias figure {
    width: 40vmin;
    margin: .125em;
    position: relative;
    overflow: hidden;

}

#noticias img {
    width: 40vmin;
    height: 40vmin;
    display: block;

}


#noticias figcaption {
    font-size: 13px;
    background-color: rgba(96, 28, 132, 0.66);
    color: white;
    line-height: 1.5em;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: calc(100% - 2em);
    padding: 10px;
    transition: all .6s ease-out;

}


#noticias figcaption span {
    font-weight: 600;
    line-height: 1.2em;
    padding-right: 12px
}

#noticias figure a {
    color: white;
    text-decoration: underline;
}


#noticias figure:hover figcaption {
    background-color: rgba(96, 28, 132, 0.66);
    top: 0;
    transition: all .3s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


/* ------ QUIENES------ */


#quienes {
    padding: 1em 2em;

}

#quienes p {
    margin: 25px 0;

}

#quienes h3 {
    margin-top: 1em;
}

.video {
    position: relative;
    margin: 0;
    height: 16:9;
    padding-bottom: 56.25%;

}

.video iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    border: solid .15em #601C84;
    border-radius: .5em;

}

#mapa {
    width: 100%;
    height: 44vh;
    margin: auto;
    border: solid .15em #601C84;
    border-radius: .5em;
}

/*------ OTROS_ARCHIVOS ------ */

#iniciosesion {
    padding: 2em;
}

.iniciarsesion input[type="text"],
.iniciarsesion input[type="number"],
.iniciarsesion input[type="email"],
.iniciarsesion input[type="password"] {
    margin-top: 1.2em;
    width: 90%;
    height: 2em;
    border: solid .15em #601C84;
    border-radius: .4em;
    max-width: 25em;

}

.sincuenta {
    margin-top: 3em;
}

.sincuenta h2 {
    border-top: .14em solid #601C84;
    border-bottom: none;
    padding-top: .5em;

}

.sincuenta p {
    max-width: 100%;
}


/* ------MI CUENTA------*/

#micuenta {
    padding: 2em;
}


.mislibros ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;


}

.mislibros ul li img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 150px;

}

#recordatorio {
    background: #601C84;
    color: white;
    border: solid .15em #601C84;
    border-radius: .4em;
    height: auto;
    margin: auto;
    margin-bottom: 1.5em;
    padding: 1em;
    display: flex;
    flex-direction: row;
    justify-content: center;

}

#recordatorio i {
    align-self: center;
    border: 2px solid white;
    border-radius: 1em;

}

#recordatorio p {
    margin: 0;
    margin-left: 1em;

}



/* ---MISLIBROS_LATIACOSIMA_FICCIONES_ELALEPH_--*/

#todosmislibros {
    padding: 2em;
}

.libro figure {
    max-width: 250px;
    margin: 0;
}

.libro figure img {
    max-width: 100%;
    height: auto;
    border: .2em solid #601C84;
}


.comentario h3 {
    margin: 1em 0em 0.3em 0em;
}

.estrellasvacias {
    margin: 0em 0em 1em 0em;
}

.estrellasvacias i {
    color: #FFD150;

}

.comentario textarea {
    margin: border: solid .15em #601C84;
    border-radius: .4em;
    width: 85%;
    height: 10em;
    border: solid .20em #601C84;

}



/* -------LIBROS,lista------*/

#libros {
    padding: 2em;

}

#libros h2 {
    border: none;

}

#libros h3 {
    border: none;

}

.sinflex {
    padding: 0em 0em 0em 2em;
}

.listalibros {
    margin: 0em 0em 1.5em 0em;
}

.listalibros figure {
    width: 170px;
    margin: 0;
    height: auto;
}

.listalibros figure img {
    max-width: 100%;
    height: auto;
    border: .2em solid #601C84;
}

.texto ul {
    margin-top: 1em;
}

.texto p {
    margin-top: 1em;
}

.estrellas {
    display: flex;
    color: #FFD150;

}


/*------EL HACEDOR/EL ALEPH/FICCIONES/LAMUERTE/LASMALAS/ROSAURA-----*/

#elhacedor {
    padding: 2em;

}

.reservar-libro h3,
.descargar-libro h3,
.otroscomentarios h4 {
    margin: 1em 0 0.5em 0;

}



.otroscomentarios h3 {
    border-top: .15em solid #601C84;
    width: 16em;
    margin-top: 2em;
}



.otroscomentarios p {
    margin: .6em 0em .3em 0em;
    max-width: 20em;
}

#elhacedor button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

#elhacedor button i {
    align-self: center;
    margin-right: .3em;

}


/* ------ FOOTER ------ */

footer {
    color: white;
    background: #601C84;
    height: auto;
    padding: 2em;
}


.mayuscula {
    text-transform: uppercase;
}

#contacto ul {
    margin-top: 1em;
}

#logoacumar {
    width: 180px;
    height: auto;
    margin-top: 1.5em;
}


/* -------------------
----FORMATO TABLET-----
-----------------------*/

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


        h1 {
            font-size: 30px;
        }

        h2 {
            font-size: 24px;
            margin-bottom: .5em;
        }

        h3 {
            font-size: 22px;
        }
    

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

    .contenedor {
        width: 600px;
        margin: auto;
    }

    header nav li a {
        padding: .2em;
        font-size: 16px;
    }

    /* ------ inicio ------ */

    input[type="search"] {
        width: 400px;
        height: 35px;
        padding-left: 1em;
        border: solid .15em #601C84;
        border-radius: .4em;
        margin-right: .5em;
        font-family: 'Poppins', sans-serif;

    }

    /*-----libro del mes----*/


    #libro-mes {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;

    }

    #libro-mes h2 {
        width: 100vmax;
        text-align: center;
    }


    #info-mes {
        max-width: 480px;
        margin: 1em 0em 0em 1em;
    }


    /*-------taller del mes------*/


    #taller-mes {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;

    }

    #taller-mes h2 {
        width: 100vmax;
        text-align: center;
    }

    .taller-info {
        width: 420px;
        margin: 1em 0em 0em 1em;
    }


    #taller-mes figure {
        width: 260px;
        height: auto;
        margin-top: 1em;

    }

    #mas-talleres {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #mas-talleres h2 {
        width: 100%;
    }

    .contenedora-taller {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 330px;
        margin-right: 1em;
    }


    .mas-taller-info {
        width: 300px;

    }



    /* -------- actividades ---------*/
    #actividades {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start; 
    
    }

    #actividades h2 {
        width: 100%;
    }

    .contenedor-actividades {
        width: 330px;
        margin-right: 1em;
        margin-top: 1em;
    
    }
    
    
    

    /* -------- newsletter ---------*/
    #newsletter {
        padding: 2em;
        margin: 50px auto;
        width: 100%;
    }

    #newsletter input[type="email"] {
        width: 400px;
    }


    /* ------ noticias ------*/
    #galeria {
        flex-wrap: wrap;
    }

    #noticias figure {
        width: 45vmin;
        height: 30vmin;

    }

    #noticias img {
        width: 45vmin;
        height: 45vmin;
    }

    /* ------ quienes------ */



    iframe {
        width: 90%;
        height: 60vh;
        margin: auto;
    }


    /*----OTROS_ARCHIVOS/CREAR_CUENTA----*/
    #iniciosesion {
        width: 100vmin;

    }

    .iniciarsesion form ul li input {
        margin-top: 1.2em;
        width: 50%;
        height: 2.5em;
        max-width: 25em;
    }


    /*----MI CUENTA----*/

    .mislibros ul li img {
        max-width: auto;
        max-height: auto;

    }

    #recordatorio {
        width: 40em;
    }




    /*-----MISLIBROS_LATIACOSIMA----*/


    .libro {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;

    }

    #todosmislibros .texto {
        width: 430px;
        margin-left: 1em;
    }

    #todosmislibros .texto p {
        max-width: auto;
    }


    /*-----LIBROS, lista----*/



    .listalibros {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .listalibros figure {
        max-width: 270px;

    }



    #libros .texto {
        width: 20em;
        margin-left: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-around; 
    }

    .texto ul {
        margin-top: 0;
    }




    /*------EL HACEDOR/EL ALEPH/FICCIONES/LAMUERTE/LASMALAS/ROSAURA-----*/

    .libro ul {
        max-width: 300px;
        margin: 0;
    }

    .libro p {
        width: 430px;

    }

    #elhacedor .texto {
        margin-left: 1em;
    }



    /*------ OTROS_ARCHIVOS ------ */


    #iniciosesion {
        padding: 2em;
    }




    /* ------------------------------
----------FORMATO DESKTOP--------
-------------------------------*/


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


        h1 {
            font-size: 37px;
        }

        h2 {
            font-size: 32px;
            margin-bottom: .5em;
        }

        h3 {
            font-size: 24px;
        }

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


        .contenedor {
            width: 100%;
            margin: auto;
            justify-content: space-between;
            padding: 0 2em;
        }

        #llamamenu {
            display: none;
        }



        header nav ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            position: unset;
            height: auto;
            padding-top: 0;
            width: 100%;
        }

        header nav li {
            margin: 0 5em 0 0;

        }

        header nav li a {
            padding: 0;
            font-size: 18px;
        }


        header nav li :hover {
            background: none;
            border-bottom: solid .15em white
        }

        /* -------- inicio ---------*/



        #logobm {
            max-height: 200px;
            min-height: 180px;
            margin: 0 20px 0 0;
        }


        input[type="search"] {
            width: 800px;
        }



        /*------libros-------*/
        /*-----libro del mes----*/



        #libro-mes {
            justify-content: center;
            padding: 4em;

        }

        #libro-mes h2 {
            text-align: center;
        }

        #lasmalas {
            width: 200px;
            height: auto;
        }

        #info-mes {
            max-width: 500px;
        }

        /* -------- talleres ---------*/

        #taller-mes {
            justify-content: center;
            padding: 4em;

        }

        #taller-mes h2 {
            text-align: center;
        }

        .taller-info {
            width: 600px;
            margin-top: 1em;
            margin-left: 1.5em;
        }


        #taller-mes figure {
            width: 400px;
            height: auto;
            margin-top: 1em;
        }

        #taller-mes img {
            width: 400px;
            height: auto;
        }


        .contenedora-taller {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-between;
            ;
            min-width: 500px;
            max-width: 650px;
        }

        #mas-talleres {
            padding: 2em 4em 0;

        }

        .mas-taller-info {
            min-width: 470px;
            max-width: 620px;

        }




        /* -------- actividades ---------*/

        #actividades {
            padding: 2em 4em;
        }


        .contenedor-actividades {
            width: 350x;
            height: auto;
        }
        
        





        /* -------- newsletter ---------*/
        #newsletter {
            padding: 3em;
            margin: auto;
            margin-top: 70px;

        }

        #newsletter input[type="email"] {
            width: 600px;
        }

        /* -------- noticias ---------*/

        #noticias {
            padding: 2em 4em;
        }

        #noticias figure {
            width: 38vmin;
        }

        #noticias img {
            width: 38vmin;
            height: 38vmin;
        }

        #noticias figcaption {
            padding: 1em;
            top: calc(100% - 2.7em);

        }

        /* ------ quienes------ */


        #quienes {
            padding: 2em 4em 4em;
        }


        .video iframe {
            height: 100%;
            width: 100%;
        }


        #mapa {
            width: 100%;
            height: 80vh;

        }

        /*------ OTROS_ARCHIVOS ------ */

        #iniciosesion {
            padding: 2em 4em;
        }

        /* ------MI CUENTA------*/
        /* ---CREAR_CUENTA---*/

        #micuenta {
            padding: 2em 4em;

        }


        /* -------LIBROS,lista------*/

        #libros {
            padding: 0em 4em 4em 4em;
            width: 100%;
            margin: auto;
        }

        #libros {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;

        }
        


        .listalibros {
            padding: 2em 1em 0em 0em;

        }


        /* ---MISLIBROS_LATIACOSIMA_FICCIONES_ELALEPH_--*/

        #todosmislibros {
            padding: 4em;
            width: 100%;
        }



        /*------EL HACEDOR/EL ALEPH/FICCIONES/LAMUERTE/LASMALAS/ROSAURA-----*/

        #elhacedor {
            padding: 4em;
            width: 100%;

        }
          .libro p {
        width: 630px;

    }

        #elhacedor .libro ul {
            width: 20em;

        }

        .otroscomentarios h3 {
            width: 15em;

        }



        /* ------ contacto------ */

        footer {
            padding: 2em 4em;
        }

        #contacto {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }

        #contacto h2 {
            width: 100%;
        }


    }