@charset "utf-8" ;

/*TIPOGRAFIAS*/

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans&family=Jockey+One&family=Lato&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Jockey+One&family=Lato&display=swap');

/*JS*/


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

nav {
    position: relative; /* para origen de coordenadas de sus elementos hijos */
  }

/* botón "hamburguesa" */
.menu-btn,
.menu-fondo {
  border-radius: 50%;
  padding: .75rem;
  width: 3rem;
  height: 3rem;

  position: fixed; /* fijo, no "scrolea", no genera scroll */
  top: 1rem; /* emplazamiento */
  right: 1rem; /* emplazamiento */
  z-index: 9000; /* en capa superior */
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */
}

/* fondo del botón "hamburguesa" */
.menu-fondo {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: -5px 5px 5px rgba(0, 20, 20, 0.2);
  z-index: 8000; /* capa superior, pero abajo del menu ppte dicho */
  
}

/* cuando "nav" tiene la clase "menuVisible" */
.menuVisible .menu-fondo {
  background: rgba(0, 92, 179, 0.95);
  /* transform: scale(2000%); */
  width: 200vw;
  height: 200vw;
  right: -100vw;
  top: -100vw;
}

/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: black;
  transition: all 0.3s ease-out;
  position: relative; /* capa superior, pero no parece */
  z-index: 9000; /* capa superior */
}

/* cada barra, transformacion para formar la "X" */
.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);
  ;
}
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* menú propiamente dicho */
nav ul {
  position: absolute; /* sale del fondo */
  right: 1rem; /* emplazamiento */
  top: 1.4rem; /* emplazamiento */
  opacity: 0; /* transparente */
  visibility: hidden; /* no se ve */
  z-index: 9999; /* capa superior, arriba de todo */
  transition: all .5s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
  list-style-type: none;
}

.menuVisible ul {
  visibility: visible; /* se ve */
  opacity: 100%; /* opaco */
  transition: all .5s .2s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
}

/* cada vínculo del menu */
nav ul li a {
  border-bottom: solid 4px transparent;
  color: white;
  display: block;
  font-size: 1.5rem;
  margin-bottom: .5rem;
 /* width: min(40vw, 15rem); /* el valor menor entre el 40% del ancho de la ventana del navegador y 240px */
  text-align: center;
  padding: .5rem;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: solid 4px rgba(255, 255, 255, 0.5);
  transition: all .3s;
}




/* MOBILE FIRST*/

body{
    background-color: #ffffff;
    font-family: 'Lato', sans-serif;
}



/*header*/

header{
    max-width: 100%;
    height:auto;
    background-color: #0b0bd8;


}

li{
    list-style-type: none;
}

#logo {
  text-align: right;
  width: 3em;
}

header nav{
    background-color: #0b0bd8;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	
}

header nav ul li a:hover{
    color:black;
    
}

.menu-btn{
    border-radius: 50%;
    padding: .75rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: white;

}


/*main*/

.titulo{
    font-weight: 600;
    font-size: 25px;
}

.inicio h2{
        color: white;
        background-color: #0b0bd8;
        padding: 1em;
        font-size: 22px;
}

h1, h2 {
    color:black;
    font-weight: 500;
    text-align: center;
    font-family: 'Lato', sans-serif;
}

H3 {
    font-family: 'Lato', sans-serif;
}

P{
    font-family: 'Lato', sans-serif;
}

.librosdestacados figcaption{
    color:black;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
}

a{
    background-color:#0b0bd8;
    color: white;
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    border-radius: 1.2em;
    padding: 1em;
    margin: 1em;
    font-size: 19px;
    display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}



.librosdestacados img{
    background-color:#6159ef;
    padding: 1em;
    height: auto;
    border-radius: .40em;
    max-width: 90%;
    margin-top: 1EM;
}


.encuentrosinicio{
        background-color: #6159ef;
        border-radius: .40em;
        padding: 1em;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        max-width: 100%;
}

.encuentrosinicio a{
    color: black;
    background-color: white;
}



.encuentros img{
    width: 20%;
}

.encuentros a{
    background-color: white;
    color: black;
}

.datos {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
    
}

.datos img{
    width: 3em;
 
}

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

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

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

.datos p{
    color: white;
    font-size: 25px;
    font-weight: 500;
}



/*footer*/

footer{
    background-color: #2f2ff0;
    border-radius: .40em;
    margin: 1em 0 0 0;
    padding: 1em;
    color: white;
}

.logos{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

.logosredes {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
    text-align: center;

}

.logosredes img{
   width: 8em;

}

.logoscontenedora{
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
}

/*MOBILE PARA MIS ENCUENTROS*/

.descripcion {
    text-align: center;
}

.libroe{
    text-align: center;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.libroe img{
    max-width: 100%;
    display: flex;
}

.tutorial{
    text-align: center;
    font-weight: 600;
    margin-top: 2em;
}

.tutorial p{
    font-size: 2em;
}


.librodebate img{
    background-color:#6159ef;
    padding: 1em;
    margin: 1em 0 0 0;
    border-radius: .40em;
    max-width: 100%;

}

.librodebate{
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
}

.encuentros {
    background-color: #6159ef;
    border-radius: .40em;
    padding: 1em;
    font-size: 21px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
    max-width: 100%;
}

.encuentrotitulo h2{
    color: white;
}


/*MOBILE LIBROS ROMANTICAS*/

.besaraungel{
    background-color:#6159ef;
}

.libros div{
    background-color: #6159ef;
    border-radius: .40em;
    padding: 0.03em;
    font-size: 15px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
    text-align: left;
	
}

.mislecturas p{
    text-align: center;
}

.generos a{
    background-color:#6159ef;
    color: white;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    padding: 1em;
    font-size: 19px;
    display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.Adquirirlibro a{
    background-color:#6159ef;
    color: white;
    font-weight: 300;
    text-decoration: none;
    text-align: center;
    border-radius: 1.2em;
    padding: 1em;
    margin: 1em;
    font-size: 19px;
    display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;

}


.generos h3{
    font-size: 1em;
    margin-top: 3em;
    text-align: center;
}

.libros img{
    background-color:#6159ef;
    padding: 1em;
    margin: 1em 0 0 0;
    border-radius: .40em;
     max-width: 100%;
}


/*MOBILE PARA MI SESION*/

.jesicaescobar{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
    text-align: center;
    background-color:#6159ef;
    padding: 1em;
    margin: 1em 0 0 0;
    border-radius: .40em;
}

.jesicaescobar h3, ul{
    color: white;
    font-weight: 70;
}

.jesicaescobar h2{
    color: white;
}

.jesicaescobar a{
    padding: 0.4em;
    background-color:white;
    color: black;
}

 .datossesion img{
     border-radius: 50%;
     max-width: 100%;
     height: auto;
     border: solid .4em #6159ef;
     
   
 }

/*MOBILE PARA MIS LECTURAS*/

.mislibros{
    background-color: #ffffff;
    border-radius: .40em;
    padding: 1em;
    font-size: 17px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.mislibros figure{
    max-width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
} 

.mislibros img{
    max-width: 100%;
    display: flex;
    background-color:#6159ef;
    padding: 1em;
    margin: 1em 0 0 0;
    border-radius: .40em;
     max-width: 100%;
}

.calificacion p{
    text-align: center;
    font-size: 35px;
    margin-top: .1em;
}

.mislibros figcaption {
    font-size: 18px;
    font-weight: 600;
}

/*MOBILE PARA DEBATE*/

.debate p{
    text-align: center;
}

.camara h2{
    font-size: 2.5em;
    color: white;
    background-color: black;
    padding: 1.5em;
    border-radius: .40em;
    margin-block-end: 0em;
}

.chat h4{
        background-color: white;
        border-radius: .40em;
        border: solid .2em black;
        padding: 1em;
    
    
}


.botones img{
    width: 15em;
}

.camaraybotones {
 
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
    margin-top: 0em;
}

.botones{
    text-align: center;
}

.chat p{
    text-align: center;
}

.chat h3 {
    font-size: 1.3em;
    color: white;
    padding: 3em;
    background-color: white;
    border-radius: .40em;
    border: solid .2em black;
}

/*MOBILE PARA TUTORIAL*/

.video{
    max-width: 80%;
    display: flex;
    margin: 1em;
    justify-content: center;
}

/*MOBILE PARA BIENVENIDOS*/

.bienvenidos {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
}

.logo figure {
    max-width: 100%;
    text-align: center;
    
}

/*MOBILE PARA REGISTRATE*/

.registrate div {
    background-color: white;
    border-radius: .40em;
    border: solid .2em black;
    padding: 0;
    margin-bottom: 1em;
}

.registrate h1 {
    font-size: 17px;
}

.bibliotecasmovilesregistrate h3 , p {
   text-align: center;
 
}

.bibliotecasmovilesregistrate h3 {
font-size: 20px;

}

/*MOBILE PARA INICIO DE SESION*/

.datosiniciosesion div{
    background-color: white;
    border-radius: .40em;
    border: solid .2em black;
    padding: 0;
    margin-bottom: 1em;
}

.datosiniciosesion div p{
    font-size: 17px;
}

 

/*MOBILE PARA TUTORIAL*/

main {
    text-align: center;
}
video {
    width: 60vw;
    height: auto;

}







/*****************/


/* ESCRITORIO PANTALLA INICIO */

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

    .menu-btn{
        display: none;
    }
    
    header nav ul{
        display: flex;
        list-style-type: none;
    }

    .menu{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
    visibility: visible;
    opacity: 100%;
    position: inherit;   
    }
 
    header {
        background-color: #0b0bd8;
    }

    header nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    header ul li {
        display: inline-block;
        padding: 0.5em;
    }

    header ul li a {
        background-color:white;
        color: black;
        box-shadow: 1px 1px 1px 1px;
        font-weight: 400;
        margin: 0;
        padding: -3.1em;    
        cursor: pointer;
        text-align: center;
       }
     
 
.encuentros a{
    padding: 0.8em;
    margin: 0;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}

.encuentrosinicio ul a{
    color: black;
    background-color: white;
    font-size: 18px;
    
}


.datos p {
    font-size: 18px;
     text-align: center;
}

.datos img{
    width: 2em;
 
}


#logo{
    width: 5em;
    padding: 0.1em;
    text-align: right;
}

.destacadoyencuentro{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}


.inicio h2{
    color: white;
    background-color: #0b0bd8;
    padding: 0.8em;
    margin: 1em 0 0 0;
    text-align: center;
    font-size: 30px;
}


.librosdestacados{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.librosdestacados img {
    width: 100%;
}


/*ESCRITORIO PARA LIBROS*/

.libros{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
    padding: 1em;
    text-align: center;
}

.libros img{
background-color:#6159ef;
padding: 1em;
margin: 1em 0 0 0;
border-radius: .40em;
display: flex;
max-width: 100%;
}

.libros div{
    text-align: center;
    background-color: #fff9e1;
}


.mislibros {

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 1em;
        text-align: center;


}

.mislibrosyvermas {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}




/*ESCRITORIO PARA ENCUENTROS*/

.libroe{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: CENTER;
	align-items: center;
    
}

.libroe img{
    background-color:#6159ef;
    padding: 1em;
    margin: 1em 0 0 0;
    border-radius: .40em;
     max-width: 40em;
}

.libroe div{
    text-align: center;
}


.encuentroylibro{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}


.descripcion{
    margin: 2em,0,0,0;
    text-align: center;
}

.descripcion h1{
    text-align: center;
    margin: 0,0,1em,0;
}

.encuentros{
    height: 600px;
    margin-top: 170px;
}


/*ESCRITORIO PARA MI SESION*/

.datossesion{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}


.jesicaescobar h3,ul {
    font-size: 22px;
    font-weight: 100;
    color: white;
    display: block;
    margin-block-start: 0.9em;
    margin-block-end: 0px;
    margin-inline-start: 1px;
    margin-inline-end: 9px;
  
}

.jesicaescobar h2{
    font-size: 29px;
    color:white;
}

.datossesion img{
    max-width: 100%;
   
   
}



/*ESCRITORIO PARA MIS LECTURAS*/

.mislibros{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
    padding: 1em;
    text-align: center;
}

.mislibros img{
background-color:#6159ef;
padding: 1em;
margin: 1em 0 0 0;
border-radius: .40em;
display: flex;
max-width: 100%;
}




/*ESCRITORIO DEBATE*/

.camaraychat{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.debate{
    margin-block-end: 2em;
}


/* ESCRITORIO PARA BIENVENIDOS*/

#logobienvenidos {
    max-width: 25%;
    
}

/*ESCRITORIO INICIO DE SESION*/

.bibliotecasmovilesregistrate h3 {
    font-size: 35px;
    
}

/*ESCRITORIO TUTORIAL*/

video {
    width: 20vw;
    height: auto;
    
}
main {
    text-align: center;
}
}