:root{
    --color-prinpxcipal:#FFFFFF;
    --color-secondary:#04B4E0;
    --color-background:#F2F7F9;
    --color-transparent: transparent;
    --color-icon: #B5B6B7;
    --color-tittle: #222;
    --color-subtittle: #888;
    --color-text: #555;
    --color-icon2: #0B267F;
}

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


/*ESTILOS GENERALES*/
body{
    background-color: white;

}
.contenedor{
    max-width: 100%;
    
    
    
   
    
 }

 header{
    width: 100%;
    height: 200px;
    
    
 }

 .top-header{
    display: flex;
    width: 100%;
    height: 15%;
    align-content: rigth;
    
   
    background: #E5E5E5;

 }
 .link-ebiblio{
    width: 50%;
    align-items: center;
    
    padding-left: 20%;

 }

 .nav-login{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: right;
    padding-right: 20%;
    gap: 2%;
    
   
 }

.ebiblio{
    color: var(--color-text);
    font-family: "Source Sans Pro", sans-serif;
    font-size: small;
}


 .crear-cuenta{
 color: var(--color-text);
 font-family: "Source Sans Pro", sans-serif;
 font-size: small;
 }

 .cuenta-btn{
    color: white;
    border-radius: 0.3rem;
    width: 77px;
    height: 22px;
    cursor: pointer;
    font-family: "Source Sans Pro", sans-serif;
    font-size: small;
    border:none;
    background:#AD1519 ;
 }

 .cuenta-btn:hover{
    background: #9B1316;
 }
 .middle-header{
    display:flex;
    width: 100%;
    height: 60%;
    background: #FFFFFF;
 }

 .contenedor-logo{
    display: flex;
    width: 32%;
    height: 90%;
    padding-left: 20%;
    align-items: center;
    justify-content: center;
    gap: 35%;
 }

 .logo{
    width: 100%;
    height: 100%;
 }
 .logo-cultura{
    width: 100%;
    height: 80%;

 }

 .contenedor-logo2{
    display: flex;
    width: 50%;
    justify-content: right;
    padding-right: 20%;

 }
 .bottom-header{
    display:flex;
    width: 100%;
    height: 30%;
    background: #AD1519;

 }

 .nav{
    display: flex;
    width: 50%;
    text-align: center;
    padding-left: 20%;
   
 }
 .nav-btn1{
    width: 15%;
    font-family: "Source Sans Pro", sans-serif;
    font-size: medium;
    color: #FFFFFF;
    padding-top: 2.5%;
    border:none;
    border-left: 0.2px solid #9b1315ea;
    border-right: 0.2px solid #9b1315ea;
    background:#AD1519 ;
 }

 .nav-btn1:hover{
    background:#9B1316 ;

 }

 
 .nav-btn2{
    width: 20%;
    font-family: "Source Sans Pro", sans-serif;
    font-size: medium;
    color: #FFFFFF;
    padding-top: 2.5%;
   
   
    border:none;
    border-left: 0.2px solid #9b1315ea;
    border-right: 0.2px solid #9b1315ea;
    background:#AD1519 ;

    
 }
 .nav-btn2:hover{
    background:#9B1316 ;

 }


.form-buscador{
    display: flex;
    width: 80%;
    
}

 .buscador{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: right;
    padding-right: 20%;
    
 }
 .campo-buscador{
    width: 100%;
 }

 main{
    width: 100%;
    height: 680px;
    margin-top: 0.5rem;
    

 }
 /*ESTILOS INDEX Y CATALOGO*/
 .recomendado{
    display: flex;
    width: 100%;
    height: 35%;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 20%;
    padding-right: 20%;
    border-bottom: 0.5px solid rgb(214, 213, 213);
    
   

 }

 .recomendado-left{
    display: flex;
    width: 50%;
    height: 50%;
    flex-direction: column;
    
    
   
    
 }
 .recomendado-left-top{
    display: flex;
    width: 100%;
    height: 30%;
    text-align: center;
    align-items: center;
    justify-items: center;
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    gap: 11%;
 
    
   

 }
 .recomendado-img{
    width: 300px;
    height: 50px;
    
    
}

.form-catalogo{
   text-align: center;
}
.btn-form-catalogo{
   background:none;
   border:none;
   padding:0;
   font:inherit;
   cursor:pointer; 
   text-align: center;

}


h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
}
.recomendado-left-bottom{
    display: flex;
    width: 100%;
    height: 70%;
    text-align: justify;
    color: var(--color-text);
    
 }

 .img-libro-mes{
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    box-shadow: 4px 4px 3px 1px #6E7074;
 }
 .sinopsis-libro-mes{
    font: 1em sans-serif;
    
    padding-left: 1rem;
    padding-right: 1rem;
 }
 .recomendado-rigth{
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: right;
    padding-top: 2rem;
}


 .recomendado-rigth-multimedia{
    width: 92%;
    height: 100%;
    box-shadow: 4px 4px 3px 1px #6E7074;
    
 }
 .multimedia-iframe{
    width: 560px;
    height:295px;
   
 }

.middle-main{
    margin-top: 2rem;
    padding-left: 20%;
    padding-right: 20%;
    padding-right: 20%;

    border-bottom: 0.5px solid rgb(214, 213, 213);
}

 .destacados{
    display: flex;
    width: 100%;
    height: 20%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    
    
 }
 .chincheta{
    width: 30px;
    height: 30px;
    
 }
 .bloque-destacados{
    display: flex;
    margin-bottom: 2rem;
    
    gap: 5%;
 }
 .libro-destacado{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: var(--color-subtittle);
  
    
 }

 footer{
   width: 100%;
   height: 60px;
 }

 .pie{
   display: flex;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
   gap: 3%;
   background: #AD1519;
 }
 
 .logo-footer{
   width: 100px;
   height: 38px;
 }

 /*ESTILOS FICHA LIBRO*/
 .top-main{
   width: 100%;
   height: 100%;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   padding-left: 30%;
   

 }

 .top-main-ficha{

   display: flex;
   width: 100%;
   height: 100%;
   text-align: center;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   padding-left: 20%;
   padding-right: 20%;
   border-bottom: 0.5px solid rgb(214, 213, 213);
 }

 .top-main-ficha-left{
    display: flex;
    width: 30%;
    height: 100%;
    flex-direction: column;
    text-align: left;
   

 }


 .img-libro-ficha{
    width: 258px;
    height: 391px;
    border-radius: 0.5rem;
    box-shadow: 4px 4px 3px 1px #6E7074;
 }
 .top-main-ficha-center{
   display: flex;
   width: 50%;
   height: 100%;
   flex-direction: column;
   text-align: left;
   padding-bottom: 2rem;
   border-bottom: 0.5px solid rgb(214, 213, 213);
  

 }


 .ficha-sinopsis{
   font-family:sans-serif;
   font-size: medium;
    color: var(--color-subtittle);

 }
 .ficha-redes{
   display: flex;
   gap: 5px;
 }
 .ficha-icons{
   width: 20px;
   height: 20px;
   
 }
 .icon-libro{
   display: flex;
   margin-top: 1rem;
   gap: 5px;
 }

 .top-main-ficha-rigth{
   display: flex;
    width: 20%;
    height: 100%;
    padding-top: 2rem;
    /*border-left: 0.5px solid rgb(214, 213, 213);*/
    border: 1px solid yellow;
 }
 .top-main-ficha-rigth-info{
   display: flex;
   flex-direction: column;
   width: 92%;
   height: 50%;
   align-items: center;
   border:1px solid green;
   

 }