*{
    /*
    para que el ancho de los elementos html se calculen hasta los bordes y no solo por sus contenidos cambiando lo que viene predeterminado */
    box-sizing: border-box;
}
header{
    background-color: rgb(197, 249, 249);
    width: 100%;
    padding: 1em;
}
/* solo las imagenes que estan dentro de una etiqueta cuyo id es "logo" */
#logo img {
    /* es transparente se le puede asignar color de fondo*/
    background-color:none;
    /* el color de fondo se extiende mas alla de la imagen */
    padding: .125em;
    /* tiene borde, (tipo de borde -espesor - color)*/
    border: 1em rgb(0, 48, 60);
    /* bordes redondeados*/
    border-radius: 1.6em;
    /*relacion de aspecto 2 a 1*/
    aspect-ratio: auto;
    width: 10em;
    }

    #estrellas {
        /* es transparente se le puede asignar color de fondo*/
        background-color: none;
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
        border: 1em ghostwhite;
        /* bordes redondeados*/
        border-radius: .5em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        max-width: 40%;
        }
        #estrellas2 {
            /* es transparente se le puede asignar color de fondo*/
            background-color: none;
            /* el color de fondo se extiende mas alla de la imagen */
            padding: .5em;
            /* tiene borde, (tipo de borde -espesor - color)*/
            border: 1em ghostwhite;
            /* bordes redondeados*/
            border-radius: .5em;
            /*relacion de aspecto 2 a 1*/
            aspect-ratio: auto;
            max-width: 40%;
            }

    #acumar img {
        /* es transparente se le puede asignar color de fondo*/
        background-color: rgb(255, 255, 255);
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
        border: 1em rgb(255, 255, 255);
        /* bordes redondeados*/
        border-radius: 2em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        max-width: 30%;
        }

        #uba img {
            /* es transparente se le puede asignar color de fondo*/
            background-color: rgb(255, 255, 255);
            /* el color de fondo se extiende mas alla de la imagen */
            padding: .5em;
            /* tiene borde, (tipo de borde -espesor - color)*/
            border: 1em rgb(255, 255, 255);
            /* bordes redondeados*/
            border-radius: 2em;
            /*relacion de aspecto 2 a 1*/
            aspect-ratio: auto;
            max-width: 30%;
           
            }

            ul,
            ol {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 1px;
            margin-inline-end: 1px;
            /* retira el relleno izquierdo predeterminado*/
            padding-inline: 0;
            /* elimina bullets, numeros, etc.*/
            list-style-type: none;
        
            
            }

            body{
                /*familia tipografica general del proyecto (sus elementos contenidos la heredan) */
                /* la definida en la "paleta de diseño" */
                font-family: sans-serif;   
                /* se retiran los 8 pixeles que vienen predeterminados para que sus elementos contenidos lleguen hasta los bordes de la ventana del navegador */
                margin: 0;
               }
               
               /* selector multiple: los titulos */
               h1, h2, h3, h4{
                   /* tipografia diferente a los otros elementos html */
                   font-family:sans-serif;
               
               }
               /* todos los vinculos */
               a{
                   /* no estaran subrayados*/
                   text-decoration: none ;
                   color: white;
                   /* diferente familia tipoografica*/
                   font-family: Arial, Helvetica, sans-serif ;
                   /* negrita*/
                   font-weight: lighter;
               }

               .contenedora{
                /* ancho maximo */
                width: min (100% 40rem);
                /* centrado horizontal (si sobra espacio, lo distribuye a la izquierda y derecha) */
                margin-inline: auto;
                padding: .5rem;
                }
                
                /*componente superior y sus contenidos tanto header como footer */
                footer {
            
                color: rgb(0, 48, 60);
                padding-top: 1em;
                padding-bottom: 1em;
               
                }
                header .contenedora{
                      /* caja flexible */
    display: flex;
    
    /* elementos colocados en los extremos del eje principal */
    justify-content: center;
    
    /* elementos centrados en el eje secundario */
    align-items: center;
}
                
                
                h1{
                    color: white;
                    font-weight: bolder;
                }
                h2{
                font-weight: bold;
                }

                body{
    
                    color: white;
                    background-color: rgb(0, 48, 60);
                }
                



                /* TODAS las secciones */
                section {
                    /* relleno abajo: 2 líneas de texto */
                    padding-bottom: 2rem;
                  }
                
                  .ver_mas a{
                    color:ghostwhite;
                    background-color: rgb(0, 48, 60);
                    /* para darle propiedades de caja (margen) */
                    display: block;
                    /* ancho igual a su contenido*/
                    width: max-content;
                    /*separa los botones 1/8 del tamaño del texto */
                    margin: 0.5em;
                    /* relleno arriba y abajo 1/4 del tamaño del texto */
                    padding-inline: 0.7em;
                    /* border redondeado 1/4 del tamaño del texto */
                    border-radius: 0.8em;
                    padding-top: 0.3em;
                    padding-bottom: 0.3em;
                    }
                    /*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
                    .ver_mas a:hover{
                       
                        /* para darle propiedades de caja (margen) */
                        display: block;
                        /* ancho igual a su contenido*/
                        width: max-content;
                        /*separa los botones 1/8 del tamaño del texto */
                        margin: .5em;
                        /* relleno arriba y abajo 1/4 del tamaño del texto */
                        padding-inline: 0.7em;
                        /* border redondeado 1/4 del tamaño del texto */
                        border-radius: 0.8em;
                        color: rgb(0, 48, 60);
                        background-color:rgb(197, 249, 249)
                    }
            
                

                    #logo {
                        display: flex;
                        justify-content: center;
                       
                    }
              
                #bibliotecadestacada img {
                    max-width: 100%;
                   
                }

               

                .bibliotecadestacada {
                    /* color de fondo */
                    background-color: white;
                    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                    margin-block: .5em;
                    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                    padding: 1em;
                    /* borde redondeado 1/4 del tamaño del texto */
                    border-radius: 5em;
                    color:rgb(46, 91, 102);
                    max-width: 100%;
                    margin-left: 1.5em;
                    margin-right: 1em;
        
                    display: flex;
                    justify-content: center;
                   
            
                  }

                  #biblioteca2 img {
                    width: 60%;
                    border-radius: 1em;
                    aspect-ratio: 2/3;
                            object-fit: cover;
                   
                }

                #biblioteca2 {
                    /* color de fondo */
                    background-color: white;
                    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                   
                    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                    
                    /* borde redondeado 1/4 del tamaño del texto */
                    border-radius: 5em;
                    color:rgb(46, 91, 102);
                    max-width: 100%;
                   
                   
            
                  }

                  #biblioteca3 img {
                    max-width: 60%;
                   border-radius: 1em;
                   aspect-ratio: 2/3;
                            object-fit: cover;
                }

                

                  #biblioteca4 img {
                    max-width: 60%;
                    border-radius: 1em;
                    aspect-ratio: 2/3;
                            object-fit: cover;
                   
                }

              

                  #biblioteca5 img {
                    max-width: 60%;
                    border-radius: 1em;
                    aspect-ratio: 2/3;
                            object-fit: cover;
                   
                }

               

                  .bib1 {
                      max-width: 100%;
                  }

                  h2, h3 {
                      color: rgb(0, 48, 60);
                  }
                  
                

                    .bib2, .bib3, .bib4, .bib5 {
                        background-color: white;
                        margin-block: .5em;
                        /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                        padding: 1em;
                        /* borde redondeado 1/4 del tamaño del texto */
                        border-radius: 5em;
                        color:rgb(46, 91, 102);
                        width: 90%;
                        
                        
                    
                    }
                   .subtitulos2{
                        display: block;
                                /* ancho igual a su contenido*/
                                width: max-content;
                                /*separa los botones 1/8 del tamaño del texto */
                                margin: .5em;
                                /* relleno arriba y abajo 1/4 del tamaño del texto */
                                padding-inline: 1em;
                                /* border redondeado 1/4 del tamaño del texto */
                                border-radius: 0.8em;
                                color: rgb(0, 48, 60);
                                background-color:rgb(197, 249, 249);
                                padding-top: 0.5em;
                                padding-bottom: 0.5em;
                              
                    }
                    .titulolibro {
                        color: white;
                        text-align: center;
                    }
          

    

                
                    .titulo{
                        display: flex;
                        justify-content: center;
                    }

                    .subtitulo {
                        display: flex;
                        justify-content: center;
                    }

                    .textobibdestacada_direccion_horario {
                       display: flex;
                       justify-content: center;
                       align-items: center;
                       flex-direction: column;
                       padding-left: 1em;
                       text-align: center;
                       
                       
                    }

                    .textobibdestacada_opiniones {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                    }

                    .ver_mas {
                        display: flex;
                        justify-content: center;
                        text-transform: uppercase;
                    }

            
                    .bibliotecas_articles {
                      display: flex;
                      flex-wrap: wrap;
                      gap: 1em;
                      justify-content: center;
                      align-items: center;
                      text-align: center;
                      margin-left: 1em;
                      margin-right: 1em;

                    
                    }

          
                    .textobibliotecas {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;
                    }
                     
                    h2 {
                        display: flex;
                        justify-content: center;
                    }

                    #bibliotecadestacada img {
                        background-color: none;
                        /* el color de fondo se extiende mas alla de la imagen */
                        padding: .125em;
                        /* tiene borde, (tipo de borde -espesor - color)*/
                        border: none;
                        /* bordes redondeados*/
                        border-radius: 1.6em;
                        /*relacion de aspecto 2 a 1*/
                      
                    }

                    .footer {
                        
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        background-color: rgb(197, 249, 249);
                        padding-left: 1em;
                        
                    }

                   

                    .logos {
                        text-align: center;
                        padding-top: 2em;
                        
                    }
                

                    .titulo {
                        text-align: center;
                    }
    
                    .titulo2 {
                        padding-left: 1em;
                    }
    
                    .nombre_autor {
                        text-align: center;
                    }
    
                    .texto_sinopsis {
                        padding-inline: 1em;
                        display: flex;
                        justify-content: center;
                        text-align:justify;
                    }
                .viewcomments {
                    padding-inline: 1em;
                    color: rgb(197, 249, 249);
                }
    
                .comment {
                    background-color: white;
                    border-radius: 0.8em;
                    width: 95%;
                    color: rgb(0, 48, 60);
                    
                    display: grid;
                    margin-left: 1em;
                    margin-right: 1em;
                    
                padding-left: 0.5em;
                padding-top: 0.5em;
                padding-bottom: 0.5em;
                }
    
                .btn_publicar_comentario a {
                    color:rgb(0, 48, 60);
                background-color:rgb(197, 249, 249);
                /* para darle propiedades de caja (margen) */
                display: block;
                /* ancho igual a su contenido*/
                width: max-content;
                /*separa los botones 1/8 del tamaño del texto */
                margin: 0.5em;
                /* relleno arriba y abajo 1/4 del tamaño del texto */
                padding-inline: 0.7em;
                /* border redondeado 1/4 del tamaño del texto */
                border-radius: 0.8em;
                padding-top: 0.3em;
                padding-bottom: 0.3em;
                }
    
                .btn_publicar_comentario a:hover{
                    color:rgb(0, 48, 60);
                    background-color:rgb(255, 255, 255);
                    /* para darle propiedades de caja (margen) */
                    display: block;
                    /* ancho igual a su contenido*/
                    width: max-content;
                    /*separa los botones 1/8 del tamaño del texto */
                    margin: 0.5em;
                    /* relleno arriba y abajo 1/4 del tamaño del texto */
                    padding-inline: 0.7em;
                    /* border redondeado 1/4 del tamaño del texto */
                    border-radius: 0.8em;
                    padding-top: 0.3em;
                    padding-bottom: 0.3em;  
                }
    
                .btn_comentario {
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: auto;
                    justify-items: end;
                }
    
                .titulo3 {
                    display: flex;
                    justify-content: flex-start;
                    padding-left: 0.5em;
                    color: rgb(0, 48, 60);
                }

                .titulosinopsis {
                    text-align: center;
                    color: white;
                }
    
                .libros {
                    display: grid;
                           grid-template-columns:50% 50% ;
                        justify-items: center;
                        align-items: center;
                        padding-inline: 1em;
                        gap: 0.5em;
                        justify-content: center;
                }
    
                .footer {
                    padding-inline: 1em;
                    padding-top: 0.5em;
                    padding-bottom: 0.5em;
                    
                }
    
            
    
                .libros_section {
                    background-color:rgb(255, 255, 255);
                    border-radius: 0.8em;
                    padding-top: 0.5em;
                }

              

        

                      .ver_mas2 a{
                        color:rgb(0, 48, 60);
                        background-color:rgb(197, 249, 249);
                        /* para darle propiedades de caja (margen) */
                        display: block;
                        /* ancho igual a su contenido*/
                        width: max-content;
                        /*separa los botones 1/8 del tamaño del texto */
                        margin: 0.5em;
                        /* relleno arriba y abajo 1/4 del tamaño del texto */
                        padding-inline: 0.7em;
                        /* border redondeado 1/4 del tamaño del texto */
                        border-radius: 0.8em;
                        padding-top: 0.3em;
                        padding-bottom: 0.3em;
                    
                        }
                        /*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
                        .ver_mas2 a:hover{
                           
                            /* para darle propiedades de caja (margen) */
                            display: block;
                            /* ancho igual a su contenido*/
                            width: max-content;
                            /*separa los botones 1/8 del tamaño del texto */
                            margin: .5em;
                            /* relleno arriba y abajo 1/4 del tamaño del texto */
                            padding-inline: 0.7em;
                            /* border redondeado 1/4 del tamaño del texto */
                            border-radius: 0.8em;
                            color: rgb(0, 48, 60);
                            background-color:white;
                           
                        }

                        #portadalibro img{
                            /* color de fondo */
            
                            /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                            margin-block: .5em;
                            /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                            padding: 0.5em;
                            /* borde redondeado 1/4 del tamaño del texto */
                            border-radius: 2em;
                            max-width: 100%;
                            aspect-ratio: 2/3;
                            object-fit: cover;
                       
                        
                          }
                       
                          #portada img{
                            /* color de fondo */
            
                            /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                            margin-block: .5em;
                            /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                            padding: 0.5em;
                            /* borde redondeado 1/4 del tamaño del texto */
                            border-radius: 2em;
                            max-width: 100%;
                            aspect-ratio: 2/3;
                            object-fit: cover;

                       
                        
                          }

                       .contenedora_libros{
                           display: grid;
                           grid-template-columns:50% 50% ;
                        justify-items: center;
                        align-items: center;
                        padding-inline: 1em;
                        gap: 0.5em;
                        justify-content: center;
                        
                        

                       }

                       .ver_mas2{
                       display: flex;
                       align-items: flex-end;
                       text-transform: uppercase;
                       

                       }


                    .libroslista{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        align-content: center;
                        

                    }

                    .portadaimg img{
                        margin-block: .5em;
                            /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                            padding: 1em;
                            /* borde redondeado 1/4 del tamaño del texto */
                            border-radius: 2em;
                            max-width: 100%;
                       

                    }
                    .nombre_autor a{
                        color:rgb(0, 48, 60);
                        background-color:rgb(197, 249, 249);
                        /* para darle propiedades de caja (margen) */
                        display: block;
                        /* ancho igual a su contenido*/
                        width: max-content;
                        /*separa los botones 1/8 del tamaño del texto */
                        margin: 0.5em;
                        /* relleno arriba y abajo 1/4 del tamaño del texto */
                        padding-inline: 0.7em;
                        /* border redondeado 1/4 del tamaño del texto */
                        border-radius: 0.8em;
                        padding-top: 0.3em;
                        padding-bottom: 0.3em;
                    
                        }
                        /*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
                        .nombre_autor a:hover{
                           
                            /* para darle propiedades de caja (margen) */
                            display: block;
                            /* ancho igual a su contenido*/
                            width: max-content;
                            /*separa los botones 1/8 del tamaño del texto */
                            margin: .5em;
                            /* relleno arriba y abajo 1/4 del tamaño del texto */
                            padding-inline: 0.7em;
                            /* border redondeado 1/4 del tamaño del texto */
                            border-radius: 0.8em;
                            color: rgb(0, 48, 60);
                            background-color:white;
                           
                        }
                        .nombre_autor{
                            display: flex;
                            justify-content: center;
                        }

                        #menuhamburguesa {
                            display: flex;
                            flex-direction: row;
                            justify-content: flex-end;
                        }
                        #menuhamburguesa .hamburguesa {
                            padding: .7em;
                            font-size: 1.3em;
                            position: relative;
                            z-index: 9999;
                            color:rgb(0, 48, 60);
                        }
                        #menuhamburguesa #menu-btn {
                            margin: 1em;
                            display: none;
                            z-index: 9999;
                        }
                        .menu {
                            width: 50%;
                            height: 100%;
                            padding-top: 10em;
                            position: fixed;
                            right: -100%;
                            transition: 0.5s;
                            z-index: 8000;
                            top: 0%;
                            background-color:rgba(0, 48, 60, 0.838);
                            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                        }
                        .menu li {
                            padding: 1em;
                            display: block;
                            text-align: right;
                        }
                        #menu-btn:checked ~ .menu {
                            right: 0;
                        }
                        #menuhamburguesa .hamburguesa:hover {
                            padding: .5em;
                            cursor: pointer;
                            z-index: 9999;
                            position: relative;
                        }
                        header .contenedora {
    
                            /* caja flexible */
                            display: flex;
                            
                            /* elementos colocados en los extremos del eje principal */
                            justify-content: space-between;
                            
                            /* elementos centrados en el eje secundario */
                            align-items: center;
                        }
                        header nav a {
                            color: white;
                            padding: .5em 1em;
                            text-decoration: none;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        
                        header nav a:hover {
                            
                            background-color:rgb(197, 249, 249);
                            color:rgb(0, 48, 60);
                            border-radius: 0.7em;
                        }
                        
                        .masleido figure {
                            border-radius: 2em;
                        
  
                            aspect-ratio: 2/3; /* para que "figure" sea un cuadrado*/
                            
                            /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
                            position: relative;
                            /* para ocultar lo que "excede" sus límites */
                            overflow: hidden;
                        }

                        .masleido img {
                            /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
                            object-fit: cover;
                            object-position: left center;
                            width: 100%;
                            height: 100%;
                            /* display: block; /* para que "desaparezca" el espacio que queda debajo de la imagen */
                          }

                          .masleido figcaption {
                            background-color:rgba(197, 249, 249, 0.805);
                            /* mix-blend-mode: hard-light; */
                            color:rgb(0, 48, 60);
                            padding: .5em;
                            line-height: 1em;
                            text-transform: uppercase;
                            font-weight: 700;
                            text-align: center;
                            
                            /* para superponer el epígrafe sobre la foto */
                            position: absolute;
                            /* estirar para que ocupe todo figure */
                            inset: 0;
                            /* mover para que se vea apenas el "titulo" de la foto */
                            transform: translateY(calc(100% - 2em));
                            
                            transition: all .6s ease;
                          }

                          /* propiedades de figcaption SÓLO cuando
 el cursor se coloca encima de "figure" */
.masleido figure:hover figcaption {
    background-color:rgba(197, 249, 249, 0.805);
    transition: all .3s ease;
  
    /* emplazamiento, 0 del borde superior */
    transform: translateY(0);
    /* grid */
    display: grid;
    /* texto centrado */
    text-align: center;
    place-items: center;
    place-content: center;
    /* relleno en linea 2 renglones */
    padding-inline: 2em;
  }
  
  .masleido figcaption span {
    display: block;
    font-size: 0.75em;
    color:rgb(0, 48, 60);
    margin-block-start: .5em;
    text-transform: none;
  }
  
  .masleido figcaption a {
    display: inline-block;
    margin-block-start: .5em;
    background-color:rgb(0, 48, 60);
    color: white;
    padding: .25em 1em;
    border-radius: 2em;
  }

  .masleido figcaption a:hover {
    display: inline-block;
    margin-block-start: .5em;
    background-color: white;
    color:rgb(0, 48, 60);
    padding: .25em 1em;
    border-radius: 2em;
  }

  .tituloprincipal{
      text-align: center;
  }
  
  .librospopulares {
    display: grid;
                           grid-template-columns:50% 50% ;
                        justify-items: center;
                        align-items: center;
                        padding-inline: 1em;
                        gap: 0.5em;
                        justify-content: center;
  }

  .libros_destacados{
      background-color: rgb(197, 249, 249);
  }

  .titulo_librospop{
      text-align: center;
      padding-top: 1em;
  }
        
  .titulolibro2{
      color: rgb(0, 48, 60);
      text-align: center;
  }

  .ver_mas3{
    color: white;
    background-color:rgb(0, 48, 60);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.7em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 0.8em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    text-transform: uppercase;

  }

  .btn_vermas{
      display: flex;
      justify-content: center;
  }

  #taller img{
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
   
    /* borde redondeado 1/4 del tamaño del texto */
    border-radius: 2em;
    max-width: 100%;
    aspect-ratio:1/1;

  }

  .taller{
      margin-left: 2em;
      margin-right: 2em;
  }

  .tituloactividades, .titulo4, .textostaller{
      color: white;
      text-align: center;
  }

  .ver_mas4 a{
    color:rgb(0, 48, 60);
    background-color:rgb(197, 249, 249);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.7em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 0.8em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    text-transform: uppercase;
  }
  .ver_mas4 a:hover{
    color:rgb(0, 48, 60);
    background-color:white;
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.7em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 0.8em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    text-transform: uppercase;
  }

  .ver_mas4{
      display: flex;
      justify-content: center;
  }

  .librospopulares .h3 {
      display: flex;
      align-items: center;
  }

  .autor figure{
    border-radius: 2em;
                        
  
    aspect-ratio: 2/3; /* para que "figure" sea un cuadrado*/
    
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
  }

  .autor img {
    /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
    /* display: block; /* para que "desaparezca" el espacio que queda debajo de la imagen */
  }

  .autor figcaption {
    background-color:rgba(197, 249, 249, 0.805);
    /* mix-blend-mode: hard-light; */
    color:rgb(0, 48, 60);
    padding: .5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    
    /* para superponer el epígrafe sobre la foto */
    position:absolute;
    /* estirar para que ocupe todo figure */
    inset: 0;
    /* mover para que se vea apenas el "titulo" de la foto */
    transform: translateY(calc(100% - 2em));
    
    transition: all .6s ease;
  }

  /* propiedades de figcaption SÓLO cuando
el cursor se coloca encima de "figure" */
.autor figure:hover figcaption {
background-color:rgba(197, 249, 249, 0.805);
transition: all .3s ease;

/* emplazamiento, 0 del borde superior */
transform: translateY(0);
/* grid */
display: grid;
/* texto centrado */
text-align:justify;
place-items: center;
place-content: center;
/* relleno en linea 2 renglones */
padding-inline: 2em;
}

.autor figcaption span {
display: block;
font-size: 0.75em;
color:rgb(0, 48, 60);
margin-block-start: .5em;
text-transform: none;
}

.tituloobras, .subtitulo3{
    color:rgb(0, 48, 60);
    text-align: center;
}



.obras_libros{
    background-color:rgb(197, 249, 249);
    color: rgb(0, 48, 60);
    border-radius: 2em;
    padding: 1em;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
    gap: .25em;
}

.libros_lista {

    list-style-type:disc;
    padding-left: 1.5em;
    display: grid;
    justify-content: center;

}

.subtitulo_autor{
    color: rgb(0, 48, 60);
    text-align: center;
}

.textoinicio_contenedor{
    color: white;
    display: grid;
   
    grid-template-rows: 80% 20%;
    justify-content: center;

}

.titulomasleido{
    color: white;
    text-align: center;
}
.textoinicio{
    color: white;
}

.textoinicio3{
    color:rgb(0, 48, 60);
    display: grid;
    grid-template-columns: 85%;
    justify-content: center;
    padding-top: 0.5em;

}

.mapa {
    background-color:white;
  
}

.bibliotecas_menu a{
    color:rgb(0, 48, 60);
    background-color:rgb(197, 249, 249);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.7em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 0.8em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
   
  
  }
  .bibliotecas_menu a:hover{
    color: white;
    background-color:rgb(0, 48, 60);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.7em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 0.8em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    
  }

  .bibliotecas_btns{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
     
  }

  .menu_visible{
      display:none;
  }

.menufooter_btns{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
   

   
}


.menu_footer{
    background-color:rgba(197, 249, 249, 0.832);
    /* mix-blend-mode: hard-light; */
    color:rgb(0, 48, 60);
    padding: .5em;
    line-height: 1em;
    
    font-weight: 700;
    text-align: center;
    
    /* para superponer el epígrafe sobre la foto */
    position:fixed;
    /* estirar para que ocupe todo figure */
    inset: 0;
    /* mover para que se vea apenas el "titulo" de la foto */
    transform: translateY(calc(100% - 6em));
    
    
}

  .menufooter_btns a{
    color:rgb(0, 48, 60);
    background-color:none;
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.7em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 0.8em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    font-size: 10px;
   
  
  }
  .menufooter_btns a:hover{
    color: white;
    background-color:rgb(0, 48, 60);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.7em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 0.8em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    font-size: 10px;
    
  }
  .menu_btns{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

  }

  .buscador img{
      display: none;
  }

  .buscador_visible img{
    display: block;
    width: 90%;
}

.buscador_visible{
    display: flex;
    justify-content: center;
}

#imagen_de_perfil img{
    /* color de fondo */

    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
    padding: 0.5em;
    /* borde redondeado 1/4 del tamaño del texto */
    border-radius: 3.5em;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background-color: white;


  }

  #imagen_de_perfil2 img{
    /* color de fondo */

    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
    padding: 0.5em;
    /* borde redondeado 1/4 del tamaño del texto */
    border-radius: 3.5em;
    width: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    background-color: white;
    


  }

  .notificaciones_individuales{
      display: grid;
      grid-template-columns: 20% 60% 20%;
      grid-template-rows: auto;
      gap: 1em;
      justify-items: start;
      align-items: center;
     
      
      
  }


  .notificaciones_contenedora{
      display: flex;
      flex-direction: column;
      padding: 0.5em;
      margin-inline: 0.5em;
      justify-content:  center;
     
      

  }

  .btnssiono{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding-right: 0.5em;
  }
  
  .aceptarbtn a{
    color:rgb(0, 48, 60);
    background-color:rgb(197, 249, 249);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.1em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 2em;
 
   
    font-size: 4px;
   
  
  }
  .aceptarbtn a:hover{
    color:rgb(0, 48, 60);
    background-color: white;
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.1em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 2em;
  
    font-size: 4px;
    
  }

  #fotoperfil img{
    /* color de fondo */

    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
    padding: 0.5em;
    /* borde redondeado 1/4 del tamaño del texto */
    border-radius: 6em;
    max-width: 50%;
    aspect-ratio: 1;
    object-fit: cover;
    background-color: white;

  }

  .fotoperfil{
      display: flex;
      justify-content: center;
      padding-top: 2em;
  }

  .titulo_nombre{
      color: white;
      text-align: center;
      font-size: 20px;
  }

  .texto_perfil{
      color: white;
      display: flex;
      flex-direction: row;
      gap: 2em;
      justify-content: center;
      padding-bottom: 1em;


  }

  .datos_contenedora{
      background-color: white;
      display: flex;
      flex-direction: column;
      padding-left: 1.5em;
      border-radius: 3em;
      margin-left: 2em;
      margin-right: 2em;
      padding-bottom: 1em;
      

  }

  .datos{
      color: rgb(0, 48, 60);
      padding-top: 1em;
  }

  .btns_perfil{
      color: white;
      display: flex;
      flex-direction: column;
      gap: 1em;
      padding-top: 1em;
     
      

  }
  

  .btn_perfil a{
    color:rgb(0, 48, 60);
    background-color:rgb(197, 249, 249);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.8em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  
  }

  .btn_perfil a:hover{
    color:rgb(0, 48, 60);
    background-color: white;
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.8em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;

    
  }



  .titulomensajes{
      padding-left: 1.5em;
  }

  .mensaje_individual{
      display: grid;
      grid-template-columns: 20% 60% 20%;
      column-gap: 1em;
      width: 90%;
      grid-template-rows:auto;
      background-color: rgb(46, 91, 102);
      padding-left: 1em;
      padding-right: 1em;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      border-radius: 2em;
      align-items: center;

  }

  .mensajes_contenedora{
      
      display: flex;
      flex-direction: column;
      place-items: center;
      row-gap: 1em;
      
     
  }

  .texto_mensaje{
      font-size: 20px;
  }

  .unread_btn a{
   color:rgb(0, 48, 60);
    background-color:rgb(197, 249, 249);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.6em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1.5em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
   
  }
  .unread_btn a:hover{
    color: white;
     background-color:rgb(0, 48, 60);
     /* para darle propiedades de caja (margen) */
     display: block;
     /* ancho igual a su contenido*/
     width: max-content;
     /*separa los botones 1/8 del tamaño del texto */
     margin: 0.5em;
     /* relleno arriba y abajo 1/4 del tamaño del texto */
     padding-inline: 0.6em;
     /* border redondeado 1/4 del tamaño del texto */
     border-radius: 1.5em;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
    
   }

  .nombre_persona_contenedor{
      display: flex;
      gap: 1em;
      align-items: center;
      justify-content: center;
      background-color: rgb(46, 91, 102);
      border-radius: 3em;
      margin-top: 1em;
      margin-right: 3em;
      margin-left: 3em;
     }

  .fotoperfilchat{
      width:20%;
  }

  .hoy{
      text-align: center;
      font-weight: 300;
      color: rgb(197, 249, 249);
      
  }

  .burbuja_individual1{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-wrap: wrap;
     }
     .burbuja_individual2{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
       }
  

  .textoburbuja1{
    color:rgb(0, 48, 60);
    background-color:rgb(197, 249, 249);
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.4em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1.5em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 1em;
    padding-right: 1em;
 }

 .textoburbuja2{
    color:rgb(0, 48, 60);
    background-color: white;
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: 0.5em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 0.4em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1.5em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 1em;
    padding-right: 1em;
 }


  .mensajeschat_contenedora{
      margin-right: 1em;
      margin-left: 1em;
  }

  .texto_hora{
      color: rgb(197, 249, 249);
      font-weight: 300;
      font-size: 12px;
  }

  .enviarmensaje_contenedora{
      background-color: white;
      border-radius: 3em;
      display: grid;
      grid-template-columns: 80% 20%;
      margin-left: 1em;
      margin-right: 1em;
      align-items: center;
  
     
    
      
  }

  .escribe_un_mensaje{
      color:rgba(16, 108, 131, 0.733);
      padding-left: 1.5em;
  }

  .btnsend a{
    color:white;
     background-color:rgb(0, 48, 60);
     /* para darle propiedades de caja (margen) */
     display: block;
     /* ancho igual a su contenido*/
     width: max-content;
     /*separa los botones 1/8 del tamaño del texto */
     margin: none;
     /* relleno arriba y abajo 1/4 del tamaño del texto */
     padding-inline: 0.6em;
     /* border redondeado 1/4 del tamaño del texto */
     border-radius: 1.5em;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
    
   }

   .btnsend a:hover{
    color:rgb(0, 48, 60);
     background-color:rgb(197, 249, 249);
     /* para darle propiedades de caja (margen) */
     display: block;
     /* ancho igual a su contenido*/
     width: max-content;
     /*separa los botones 1/8 del tamaño del texto */
     margin: none;
     /* relleno arriba y abajo 1/4 del tamaño del texto */
     padding-inline: 0.6em;
     /* border redondeado 1/4 del tamaño del texto */
     border-radius: 1.5em;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
    
   }

   .btn_enviarmensaje{
    display: flex;
    justify-self: center;
}

#acumaplogo2 img{
    /* color de fondo */

    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
   
    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
   
    /* borde redondeado 1/4 del tamaño del texto */
    
    max-width: 60%;
    aspect-ratio: auto;
    object-fit: cover;
   

  }

  .acumaplogo2{
      display: flex;
      justify-content: center;
      
  }

  .titulo7{
      text-align: center;
      margin-block: 0;
      margin-top: 1em;

  }

  .registrar_contenedora{
      background-color: white;
      margin-left: 4em;
      margin-right: 4em;
      border-radius: 3em;
      height:20em;
      display: flex;
      flex-direction: column;
      row-gap: 1em;


       }

       .btnregistrar{
          display: flex;
          align-self: center;
       }
           
       .textosregistrate{
        display: flex;
        flex-direction: column;
        row-gap: 1.5em;
        padding-left: 1.5em;
        padding-top: 1.5em;
      
       }

  .datos_textos3{
      color:rgba(46, 91, 102, 0.626);

  }

  .btn_registrate a{
    color:white;
     background-color:rgb(0, 48, 60);
     /* para darle propiedades de caja (margen) */
     display: block;
     /* ancho igual a su contenido*/
     width: max-content;
     /*separa los botones 1/8 del tamaño del texto */
     margin: none;
     /* relleno arriba y abajo 1/4 del tamaño del texto */
     padding-inline: 0.6em;
     /* border redondeado 1/4 del tamaño del texto */
     border-radius: 1.5em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     padding-left: 3em;
     padding-right: 3em;
     text-transform: uppercase;
     font-weight: bold;
    
   }

   .btn_registrate a:hover{
    color:rgb(0, 48, 60);
     background-color:rgb(197, 249, 249);
     /* para darle propiedades de caja (margen) */
     display: block;
     /* ancho igual a su contenido*/
     width: max-content;
     /*separa los botones 1/8 del tamaño del texto */
     margin: none;
     /* relleno arriba y abajo 1/4 del tamaño del texto */
     padding-inline: 0.6em;
     /* border redondeado 1/4 del tamaño del texto */
     border-radius: 1.5em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     padding-left: 3em;
     padding-right: 3em;
     text-transform: uppercase;
     font-weight: bold;
    
   }

   .actividad_destacada figure{
    border-radius: 2em;
                        
  
    aspect-ratio: 2/3; /* para que "figure" sea un cuadrado*/
    
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
  }

  .actividad_destacada img {
    /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
    /* display: block; /* para que "desaparezca" el espacio que queda debajo de la imagen */
  }

  .actividad_destacada figcaption {
    background-color:rgba(197, 249, 249, 0.805);
    /* mix-blend-mode: hard-light; */
    color:rgb(0, 48, 60);
    padding: .5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    
    /* para superponer el epígrafe sobre la foto */
    position:absolute;
    /* estirar para que ocupe todo figure */
    inset: 0;
    /* mover para que se vea apenas el "titulo" de la foto */
    transform: translateY(calc(100% - 2em));
    
    transition: all .6s ease;
  }

  /* propiedades de figcaption SÓLO cuando
el cursor se coloca encima de "figure" */
.actividad_destacada figure:hover figcaption {
background-color:rgba(197, 249, 249, 0.805);
transition: all .3s ease;

/* emplazamiento, 0 del borde superior */
transform: translateY(0);
/* grid */
display: grid;
/* texto centrado */
text-align:center;
place-items: center;
place-content: center;
/* relleno en linea 2 renglones */
padding-inline: 2em;
}

.actividad_destacada figcaption span {
display: block;
font-size: 0.75em;
color:rgb(0, 48, 60);
margin-block-start: .5em;
text-transform: none;
}

.actividades figure{
    border-radius: 2em;
                        
  
    aspect-ratio: 2/3; /* para que "figure" sea un cuadrado*/
    
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
    position: relative;
    /* para ocultar lo que "excede" sus límites */
    overflow: hidden;
  }

  .actividades img {
    /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 100%;
    /* display: block; /* para que "desaparezca" el espacio que queda debajo de la imagen */
  }

  .actividades figcaption {
    background-color:rgba(197, 249, 249, 0.805);
    /* mix-blend-mode: hard-light; */
    color:rgb(0, 48, 60);
    padding: .5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    
    /* para superponer el epígrafe sobre la foto */
    position:absolute;
    /* estirar para que ocupe todo figure */
    inset: 0;
    /* mover para que se vea apenas el "titulo" de la foto */
    transform: translateY(calc(100% - 2em));
    
    transition: all .6s ease;
  }

  /* propiedades de figcaption SÓLO cuando
el cursor se coloca encima de "figure" */
.actividades figure:hover figcaption {
background-color:rgba(197, 249, 249, 0.805);
transition: all .3s ease;

/* emplazamiento, 0 del borde superior */
transform: translateY(0);
/* grid */
display: grid;
/* texto centrado */
text-align:center;
place-items: center;
place-content: center;
/* relleno en linea 2 renglones */
padding-inline: 2em;
}

.actividades figcaption span {
display: block;
font-size: 0.75em;
color:rgb(0, 48, 60);
margin-block-start: .5em;
text-transform: none;
}

.subtitulohoy{
    color: white;
    text-align: center;
    margin-block: 0;
}

.subtitulosemana{
    color: white;
    text-align: center;
    
}

.mensaje_inicio{
    background-color: white;
    margin-left: 2em;
    margin-right: 2em;
    border-radius: 2em;
    margin-top: 7em;
    margin-bottom: 5em;
    
}

.tituloinicio{
    color: rgb(0, 48, 60);
    text-align: center;
    padding-top: 1em;
}

.textoinicio{
    color: rgb(0, 48, 60);
    text-align: start;
    padding-bottom: 2em;
    padding-right: 1.5em;
    padding-left: 1.5em;
    display: flex;
    justify-content: center;

}

.btn_ingresar a{
    color:white;
     background-color:rgb(0, 48, 60);
     /* para darle propiedades de caja (margen) */
     display: block;
     /* ancho igual a su contenido*/
     width: max-content;
     /*separa los botones 1/8 del tamaño del texto */
     margin: none;
     /* relleno arriba y abajo 1/4 del tamaño del texto */
     padding-inline: 0.6em;
     /* border redondeado 1/4 del tamaño del texto */
     border-radius: 1.5em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     padding-left: 3em;
     padding-right: 3em;
     text-transform: uppercase;
     font-weight: bold;
    
   }

   .btn_ingresar a:hover{
    color:rgb(0, 48, 60);
     background-color:rgb(197, 249, 249);
     /* para darle propiedades de caja (margen) */
     display: block;
     /* ancho igual a su contenido*/
     width: max-content;
     /*separa los botones 1/8 del tamaño del texto */
     margin: none;
     /* relleno arriba y abajo 1/4 del tamaño del texto */
     padding-inline: 0.6em;
     /* border redondeado 1/4 del tamaño del texto */
     border-radius: 1.5em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     padding-left: 3em;
     padding-right: 3em;
     text-transform: uppercase;
     font-weight: bold;
    
   }

   .btningresar{
       display: flex;
       justify-content: center;
       padding-bottom: 1em;

   }

  section .video{
       height: 20vh;
       display: grid;
       grid-template-areas: 'videofondo';
       justify-items: center;
       grid-template-columns: 100%;
       grid-template-rows: 100%;

   }

   video{
       grid-area: videofondo;
       align-self: center;
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center center;
       aspect-ratio:16/9 ;
     

   }

   .subtitulo5{
       color: white;
       text-align: center;
   }

   .caption{
       display: flex;
       justify-content: center;
       padding-left: 2em;
       padding-right: 2em;
       color:rgb(0, 48, 60);
       background-color: rgb(197, 249, 249);
       font-family:Arial, Helvetica, sans-serif;
   }

   .contenedora_libros_visible{
    display: none;
}

 





 





 
  




 




 



                   

                

                    

                    

                   
                
                
                    

                    @media screen and (min-width:500px) {
                    
                      
                        .bibliotecas_articles article{
                            display: flex;
                         flex-direction: column;
                         justify-content: center;
                         align-items: center;
                         width: 90%;
      
                          
                          }


                          .logos {
                            display: grid;
                            grid-template-columns: 50% 50%;
                            align-items: center;
                        }

                        .libros {
                            display: grid;
                            grid-template-columns:33.3% 33.3% 33.3%;
                        justify-items: center;
                        align-items: center;
                        padding-inline: 1em;
                        gap: 0.5em;
                        justify-content: center;
                        }
                        .contenedora_libros {
                            display: grid;
                            grid-template-columns:33.3% 33.3% 33.3%;
                        justify-items: center;
                        align-items: center;
                        padding-inline: 1em;
                        gap: 0.5em;
                        justify-content: center;
                        }

                        header .contenedora{
                            display: flex;
                            justify-content: space-between;
                        }

                       .contenedora_actividades{
                        display: grid;
                        grid-template-columns:50% 50% ;
                     justify-items: center;
                     align-items: center;
                     padding-inline: 1em;
                     gap: 0.5em;
                     justify-content: center;
                     align-items: flex-start;
                       }
                       .masleido figure {
                        border-radius: 2em;
                    

                        aspect-ratio: 2/3; /* para que "figure" sea un cuadrado*/
                        
                        /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
                        position: relative;
                        /* para ocultar lo que "excede" sus límites */
                        overflow: hidden;
                        width: 60%;
                        
                        
                    }

                    .libromasleido{
                        display: flex;
                        justify-content: center;
                    }

                    .autor figure{
                        border-radius: 2em;
                                            
                      
                        aspect-ratio: 2/3; /* para que "figure" sea un cuadrado*/
                        
                        /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
                        position: relative;
                        /* para ocultar lo que "excede" sus límites */
                        overflow: hidden;
                        width:60%;
                      }

                      .contenedora_autor{
                        display: flex;
                        justify-content: center;
                    }

                    .menu_visible{
                        display: contents;
                        
                    }

                    .menu_btns a{
                        color:rgb(0, 48, 60);
                        background-color:rgb(197, 249, 249);
                        /* para darle propiedades de caja (margen) */
                        display: block;
                        /* ancho igual a su contenido*/
                        width: max-content;
                        /*separa los botones 1/8 del tamaño del texto */
                        margin: 0.5em;
                        /* relleno arriba y abajo 1/4 del tamaño del texto */
                        padding-inline: 0.7em;
                        /* border redondeado 1/4 del tamaño del texto */
                        border-radius: 0.8em;
                        padding-top: 0.3em;
                        padding-bottom: 0.3em;
                       
                      
                      }
                      .menu_btns a:hover{
                        color: white;
                        background-color:rgb(0, 48, 60);
                        /* para darle propiedades de caja (margen) */
                        display: block;
                        /* ancho igual a su contenido*/
                        width: max-content;
                        /*separa los botones 1/8 del tamaño del texto */
                        margin: 0.5em;
                        /* relleno arriba y abajo 1/4 del tamaño del texto */
                        padding-inline: 0.7em;
                        /* border redondeado 1/4 del tamaño del texto */
                        border-radius: 0.8em;
                        padding-top: 0.3em;
                        padding-bottom: 0.3em;
                        
                      }
                      .menu_btns{
                          display: flex;
                          flex-wrap: wrap;
                          justify-content:center;

                      }
                       #menuhamburguesa {
                           display: none;
                       }

                       .menu_footer{
                        display: none;
                        
                        
                    }
                    
                   
                    
                        #logo img {
                            /* es transparente se le puede asignar color de fondo*/
                            background-color:none;
                            /* el color de fondo se extiende mas alla de la imagen */
                            padding: .125em;
                            /* tiene borde, (tipo de borde -espesor - color)*/
                            border: 1em rgb(0, 48, 60);
                            /* bordes redondeados*/
                            border-radius: 1.6em;
                            /*relacion de aspecto 2 a 1*/
                            aspect-ratio: auto;
                            width: 12em;
                            }
                            .buscador img{
                                display: block;
                                width: 100%;
                            }
                            .buscador_visible img{
                                display: none;
                            }
                    
            
                          
                        
                          
                            .btnssiono{
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                padding-right: 0.5em;
                            }

                            .textonotificacion{
                                font-size: 25px;
                            }

                            
                            .aceptarbtn a{
                              color:rgb(0, 48, 60);
                              background-color:rgb(197, 249, 249);
                              /* para darle propiedades de caja (margen) */
                              display: block;
                              /* ancho igual a su contenido*/
                              width: max-content;
                              /*separa los botones 1/8 del tamaño del texto */
                              margin: 0.5em;
                              /* relleno arriba y abajo 1/4 del tamaño del texto */
                              padding-top: 0.5em;
                              padding-bottom: .5em;
                              padding-inline: .5em;
                              /* border redondeado 1/4 del tamaño del texto */
                              border-radius: 1em;
                           
                             
                              font-size: 15px;
                             
                            
                            }
                            .aceptarbtn a:hover{
                              color:rgb(0, 48, 60);
                              background-color: white;
                              /* para darle propiedades de caja (margen) */
                              display: block;
                              /* ancho igual a su contenido*/
                              width: max-content;
                              /*separa los botones 1/8 del tamaño del texto */
                              margin: 0.5em;
                              /* relleno arriba y abajo 1/4 del tamaño del texto */
                              padding-top: 0.5em;
                              padding-bottom: .5em;
                              padding-inline: .5em;
                              /* border redondeado 1/4 del tamaño del texto */
                              border-radius: 1em;
                           
                             
                              font-size: 15px;
                             
                              
                            }
                            
                            #imagen_de_perfil img{
                                /* color de fondo */
                            
                                /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                                margin-block: .5em;
                                /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                                padding: 0.5em;
                                /* borde redondeado 1/4 del tamaño del texto */
                                border-radius: 8em;
                                max-width: 70%;
                                aspect-ratio: 1;
                                object-fit: cover;
                                background-color: white;
                                
                            
                              }
                    

                            
                              #imagen_de_perfil2 img{
                                /* color de fondo */
                            
                                /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                                margin-block: .5em;
                                /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                                padding: 0.5em;
                                /* borde redondeado 1/4 del tamaño del texto */
                                border-radius: 8em;
                                width: 70%;
                                aspect-ratio: auto;
                                object-fit: cover;
                                background-color: white;
                                
                            
                            
                              }

                              .enviarmensaje_contenedora{
                                background-color: white;
                                border-radius: 3em;
                                display: grid;
                                grid-template-columns: 90% 10%;
                                margin-left: 1em;
                                margin-right: 1em;
                                align-items: center;
                                
                            }
                            .nombre_persona_contenedor{
                                display: flex;
                                gap: 1em;
                                align-items: center;
                                justify-content: center;
                                background-color: rgb(46, 91, 102);
                                border-radius: 5em;
                                margin-top: 1em;
                                margin-right: 8em;
                                margin-left: 8em;
                                width: 50%;
                               }

                               .persona_contenedor{
                                  display: flex;
                                  justify-content: center;
                               }

                               .btn_enviarmensaje{
                                display: flex;
                                justify-self: center;
                            }
                            
                            .mensajeschat_contenedora{
                                margin-right: 3em;
                                margin-left: 3em;
                            }
                            
                            
                            .enviarmensaje_contenedora{
                                background-color: white;
                                border-radius: 3em;
                                display: grid;
                                grid-template-columns: 90% 10%;
                                margin-left: 3em;
                                margin-right: 3em;
                                align-items: center;
                                
                            }
                          
                            .titulomensajes{
                                display: flex;
                                justify-content: center;


                            }
                          
                            .mensaje_individual{
                                display: grid;
                                grid-template-columns: 20% 60% 20%;
                                column-gap: 1em;
                                width: 80%;
                                margin-left: 5em;
                                margin-right: 5em;
                                grid-template-rows:auto;
                                background-color: rgb(46, 91, 102);
                                padding-left: 1em;
                                padding-right: 1em;
                                padding-top: 0.5em;
                                padding-bottom: 0.5em;
                                border-radius: 2em;
                                align-items: center;
                          
                            }
                          
                            .mensajes_contenedora{
                                
                                display: grid;
                                grid-template-columns: 100%;
                                row-gap: 1em;
                                
                               
                            }

                            .datos_contenedora{
                                background-color: white;
                                display: flex;
                                flex-direction: column;
                                padding-left: 2em;
                                border-radius: 4em;
                                margin-left: 4em;
                                margin-right: 3em;
                                padding-bottom: 1em;
                                
                          
                            }

                            .texto_mensaje{
                                font-size: 20px;
                            }

                            .registrar_contenedora{
                                background-color: white;
                                margin-left: 12em;
                                margin-right: 12em;
                                border-radius: 3em;
                                height:30em;
                                display: flex;
                                flex-direction: column;
                                row-gap: 4.5em;
                          
                          
                                 }
                          
                                 .btnregistrar{
                                    display: flex;
                                    align-self: center;
                                 }
                                     
                                 .textosregistrate{
                                  display: flex;
                                  flex-direction: column;
                                  row-gap: 2em;
                                  padding-left: 2em;
                                  padding-top: 1.5em;
                                  font-size: 20px;
                                
                                 }

                                 .actividades{
                                 display: grid;
                                 grid-template-columns:50% 50%;

                                 }

                                 .actividades figcaption {
                                    background-color:rgba(197, 249, 249, 0.805);
                                    /* mix-blend-mode: hard-light; */
                                    color:rgb(0, 48, 60);
                                    padding: .5em;
                                    line-height: 1em;
                                    text-transform: uppercase;
                                    font-weight: 700;
                                    text-align: center;
                                    font-size: 8px;
                                    
                                    /* para superponer el epígrafe sobre la foto */
                                    position:absolute;
                                    /* estirar para que ocupe todo figure */
                                    inset: 0;
                                    /* mover para que se vea apenas el "titulo" de la foto */
                                    transform: translateY(calc(100% - 2em));
                                    
                                    transition: all .6s ease;
                                  }
                            
                                  .mensaje_inicio{
                                    background-color: white;
                                    margin-left: 11em;
                                    margin-right: 11em;
                                    border-radius: 2em;
                                    margin-top: 15em;
                                    margin-bottom: 10em;
                                    padding-top: 1em;
                                    padding-bottom: 1em;
                                    padding-right: 2em;
                                    padding-left: 2em;
                                    
                                }
                                
                                .tituloinicio{
                                    color: rgb(0, 48, 60);
                                    text-align: center;
                                    padding-top: 1em;
                                    font-size: 30px;
                                    padding-left: 1em;
                                    padding-right: 1em;

                                }
                                
                                .textoinicio{
                                    color: rgb(0, 48, 60);
                                    text-align: start;
                                    padding-bottom: 1em;
                                    display: flex;
                                    justify-content: center;
                                    font-size: 20px;
                                
                                }

                                .contenedora_libros{
                                    display:none;
                                }

                                .contenedora_libros_visible{
                                    display: contents;
                                }
                                
                              .librodestacado_visible{
                                  display:flex;
                                  flex-direction: column;
                                  align-items: center;



                              }
                                .libroslista2{
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                    align-content: center;
                                    width: 70%;
                                    padding-bottom: 1em;
                                    
            
                                }

                                .tituloresena{
                                    color: white;
                                    text-align: center;
                                }

                                video{
                                    width: 100%;
                                    height: auto;
                                
                                }

                                iframe{
                                    width: 60vw;
                                    height:40vw;
                                    aspect-ratio: 16/9;
                                }

                                .contenedoralibros_visible2{
                                    display: grid;
                                    grid-template-columns: 50% 50%;
                                }


  #fotoperfil img{
    /* color de fondo */

    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
    padding: 0.5em;
    /* borde redondeado 1/4 del tamaño del texto */
    border-radius: 10em;
    max-width: 30%;
    aspect-ratio: 1;
    object-fit: cover;
    background-color: white;


  }

  .fotoperfil{
      display: flex;
      justify-content: center;
      padding-top: 2em;
  }

  .btns_perfil{
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-top: 2em;
   
    

}
                                
                       
                        }

                   
        
                       
                        
                      

                   
                    
                    
                    @media screen and (min-width:1024px){
                        header .contenedora{
                            display: flex;
                            justify-content:center;
                            flex-direction: row;
                            flex-wrap: wrap;
                            
                        }

                        .librospopulares {
                            display: grid;
                                                   grid-template-columns:25% 25% 25% 25% ;
                                                justify-items: center;
                                                align-items: center;
                                                padding-inline: 1em;
                                                gap: 0.5em;
                                                justify-content: center;
                          }
                        
                       
                        .bibliotecas_articles article{
                            display: flex;
                         flex-direction: column;
                         justify-content: center;
                         align-items: center;
                         width: calc(50% - .5em);
      
                          
                          }

                          .datos_contenedora{
                            background-color: white;
                            display: flex;
                            flex-direction: column;
                            padding-left: 2em;
                            border-radius: 4em;
                            margin-left: 12em;
                            margin-right: 12em;
                            padding-bottom: 1em;
                            
                      
                        }


                        .fotoperfil img{
                            width: 20%;
                        }
                          .logos {
                            display: grid;
                            grid-template-columns: 50% 50%;
                            align-items: center;
                        }

                        .contenedora_libros {
                            display: grid;
                            grid-template-columns:20% 20% 20% 20% 20%;
                        justify-items: center;
                        align-items: center;
                        padding-inline: 1em;
                        gap: 0.5em;
                        justify-content: center;
                        }

                        .contenedora_autoryobras{
                            display: grid;
                            grid-template-columns: 60% 40% ;
                         justify-items: center;
                         align-items: center;
                         padding-inline: 1em;
                         gap: 0.5em;
                         justify-content: center;
                         align-items: center;

                          }

                          .textoinicio_contenedor{
                            color: white;
                            display: grid;
                            grid-template-columns: 95%;
                            justify-content: center;
                        
                        }

                        .textoinicio3{
                            text-align: center;
                        }
                      
                        .bibliotecas_btns{
                            justify-content: space-evenly;
                        }

                        .masleido figure {
                            border-radius: 2em;
                        
  
                            aspect-ratio: 2/3; /* para que "figure" sea un cuadrado*/
                            
                            /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
                            position: relative;
                            /* para ocultar lo que "excede" sus límites */
                            overflow: hidden;
                            width: 40%;
                            
                            
                        }

                        .libromasleido{
                            display: flex;
                            justify-content: center;
                        }

                         .menu li {
                            padding: 1em;
                            display: block;
                            text-align: right;
                        }

                        .menu_btns{
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-evenly;
  
                        }

                        #menuhamburguesa{
                            display: none;
                        }
                        
                       .menu_footer{
                           display: none;
                       }

                          #logo img {
                            /* es transparente se le puede asignar color de fondo*/
                            background-color:none;
                            /* el color de fondo se extiende mas alla de la imagen */
                            padding: .125em;
                            /* tiene borde, (tipo de borde -espesor - color)*/
                            border: 1em rgb(0, 48, 60);
                            /* bordes redondeados*/
                            border-radius: 1.6em;
                            /*relacion de aspecto 2 a 1*/
                            aspect-ratio: auto;
                            width: 18em;
                            }

                            .buscador{
                                display: block;
                                width: 70%;
                            }

                            .buscador_visible img{
                                display: none;
                            }


                            .btnssiono{
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                padding-right: 0.5em;
                            }
                            
                            .aceptarbtn a{
                              color:rgb(0, 48, 60);
                              background-color:rgb(197, 249, 249);
                              /* para darle propiedades de caja (margen) */
                              display: block;
                              /* ancho igual a su contenido*/
                              width: max-content;
                              /*separa los botones 1/8 del tamaño del texto */
                              margin: 0.7em;
                              /* relleno arriba y abajo 1/4 del tamaño del texto */
                              padding-inline: 0.5em;
                              /* border redondeado 1/4 del tamaño del texto */
                              border-radius: 2em;
                           
                             
                              font-size: 4px;
                             
                            
                            }
                            .aceptarbtn a:hover{
                              color:rgb(0, 48, 60);
                              background-color: white;
                              /* para darle propiedades de caja (margen) */
                              display: block;
                              /* ancho igual a su contenido*/
                              width: max-content;
                              /*separa los botones 1/8 del tamaño del texto */
                              margin: 0.7em;
                              /* relleno arriba y abajo 1/4 del tamaño del texto */
                              padding-inline: 0.5em;
                              /* border redondeado 1/4 del tamaño del texto */
                              border-radius: 2em;
                            
                              font-size: 4px;
                              
                            }
                            .notificaciones_individuales{
                                display: grid;
                                grid-template-columns: 20% 60% 20%;
                                grid-template-rows: auto;
                                gap: 1em;
                               
                                align-items: center;
                                margin-inline: 2em;
                                
                                justify-self: center;

                            
                            }

                            .textonotificacion{
                                font-size: 30px;
                            }
                          
                          
                            .notificaciones_contenedora{
                                display: flex;
                                flex-direction: column;
                                padding: 0.5em;
                                margin-inline: 0.5em;
                                justify-content:  center;
                                align-content: center;
                                
                               
                                
                          
                            }
                          
                            .btnssiono{
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                padding-right: 0.5em;
                            }
                            
                            .aceptarbtn a{
                              color:rgb(0, 48, 60);
                              background-color:rgb(197, 249, 249);
                              /* para darle propiedades de caja (margen) */
                              display: block;
                              /* ancho igual a su contenido*/
                              width: max-content;
                              /*separa los botones 1/8 del tamaño del texto */
                              margin: 0.5em;
                              /* relleno arriba y abajo 1/4 del tamaño del texto */
                              padding-top: 0.8em;
                              padding-bottom: .8em;
                              padding-inline: .8em;
                              /* border redondeado 1/4 del tamaño del texto */
                              border-radius: 1.5em;
                           
                             
                              font-size: 15px;
                             
                            
                            }
                            .aceptarbtn a:hover{
                              color:rgb(0, 48, 60);
                              background-color: white;
                              /* para darle propiedades de caja (margen) */
                              display: block;
                              /* ancho igual a su contenido*/
                              width: max-content;
                              /*separa los botones 1/8 del tamaño del texto */
                              margin: 0.5em;
                              /* relleno arriba y abajo 1/4 del tamaño del texto */
                              padding-top: 0.8em;
                              padding-bottom: .8em;
                              padding-inline: .8em;
                              /* border redondeado 1/4 del tamaño del texto */
                              border-radius: 1.5em;
                           
                             
                              font-size: 15px;
                             
                              
                            }
                            
                            #imagen_de_perfil img{
                                /* color de fondo */
                            
                                /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                                margin-block: .5em;
                                /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                                padding: 0.5em;
                                /* borde redondeado 1/4 del tamaño del texto */
                                border-radius: 8em;
                                max-width: 70%;
                                aspect-ratio: 1;
                                object-fit: cover;
                                background-color: white;
                                
                            
                              }
                    

                            
                              #imagen_de_perfil2 img{
                                /* color de fondo */
                            
                                /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
                                margin-block: .5em;
                                /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
                                padding: 0.5em;
                                /* borde redondeado 1/4 del tamaño del texto */
                                border-radius: 8em;
                                width: 70%;
                                aspect-ratio: auto;
                                object-fit: cover;
                                background-color: white;
                                
                            
                            
                              }

                              .enviarmensaje_contenedora{
                                background-color: white;
                                border-radius: 3em;
                                display: grid;
                                grid-template-columns: 90% 10%;
                                margin-left: 1em;
                                margin-right: 1em;
                                align-items: center;
                                
                            }
                            .nombre_persona_contenedor{
                                display: flex;
                                gap: 1em;
                                align-items: center;
                                justify-content: center;
                                background-color: rgb(46, 91, 102);
                                border-radius: 5em;
                                margin-top: 1em;
                                margin-right: 8em;
                                margin-left: 8em;
                                width: 50%;
                               }

                               .persona_contenedor{
                                  display: flex;
                                  justify-content: center;
                               }

  .mensajeschat_contenedora{
    margin-right: 5em;
    margin-left: 5em;
}

.texto_hora{
    color: rgb(197, 249, 249);
    font-weight: 300;
    font-size: 12px;
}
.enviarmensaje_contenedora{
    background-color: white;
    border-radius: 3em;
    display: grid;
    grid-template-columns: 90% 10%;
    margin-left: 5em;
    margin-right: 5em;
    align-items: center;
    
}

.btn_enviarmensaje{
    display: flex;
    justify-self: center;
}

.titulomensajes{
    display: flex;
    justify-content: flex-start;
}

.mensaje_individual{
    display: grid;
    grid-template-columns: 20% 60% 20%;
    column-gap: 1em;
    width: 90%;
    margin-left: 5em;
    margin-right: 5em;
    grid-template-rows:auto;
    background-color: rgb(46, 91, 102);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 2em;
    align-items: center;

}

.mensajes_contenedora{
    
    display: grid;
    grid-template-columns: 50% 50%;
    row-gap: 2em;
    align-items: center;
    
   
}

.texto_mensaje{
    font-size: 25px;
}

.registrar_contenedora{
    background-color: white;
    margin-left: 16em;
    margin-right: 16em;
    border-radius: 3em;
    height:30em;
    display: flex;
    flex-direction: column;
    row-gap: 4.5em;


     }

     .btnregistrar{
        display: flex;
        align-self: center;
     }
         
     .textosregistrate{
      display: flex;
      flex-direction: column;
      row-gap: 2em;
      padding-left: 2em;
      padding-top: 1.5em;
      font-size: 20px;
    
     }
     .actividades{
        display: grid;
        grid-template-columns:33.3% 33.3% 33.3%;

        }

        .actividades figcaption {
           background-color:rgba(197, 249, 249, 0.805);
           /* mix-blend-mode: hard-light; */
           color:rgb(0, 48, 60);
           padding: .5em;
           line-height: 1em;
           text-transform: uppercase;
           font-weight: 700;
           text-align: center;
           font-size: 10px;
           
           /* para superponer el epígrafe sobre la foto */
           position:absolute;
           /* estirar para que ocupe todo figure */
           inset: 0;
           /* mover para que se vea apenas el "titulo" de la foto */
           transform: translateY(calc(100% - 2em));
           
           transition: all .6s ease;
         }

         .actividad_destacada figure{
            border-radius: 2em;
                                
          
            aspect-ratio: 1; /* para que "figure" sea un cuadrado*/
            
            /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
            position: relative;
            /* para ocultar lo que "excede" sus límites */
            overflow: hidden;
          }
        
          .actividad_destacada img {
            /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
            object-fit: cover;
            object-position: left center;
            width: 100%;
            height: 100%;
            /* display: block; /* para que "desaparezca" el espacio que queda debajo de la imagen */
          }
        
          .actividad_destacada figcaption {
            background-color:rgba(197, 249, 249, 0.805);
            /* mix-blend-mode: hard-light; */
            color:rgb(0, 48, 60);
            padding: .5em;
            line-height: 1em;
            text-transform: uppercase;
            font-weight: 700;
            text-align: center;
            
            /* para superponer el epígrafe sobre la foto */
            position:absolute;
            /* estirar para que ocupe todo figure */
            inset: 0;
            /* mover para que se vea apenas el "titulo" de la foto */
            transform: translateY(calc(100% - 2em));
            
            transition: all .6s ease;
            font-size: 20px;
          }
        
          /* propiedades de figcaption SÓLO cuando
        el cursor se coloca encima de "figure" */
        .actividad_destacada figure:hover figcaption {
        background-color:rgba(197, 249, 249, 0.805);
        transition: all .3s ease;
        
        /* emplazamiento, 0 del borde superior */
        transform: translateY(0);
        /* grid */
        display: grid;
        /* texto centrado */
        text-align:center;
        place-items: center;
        place-content: center;
        /* relleno en linea 2 renglones */
        padding-inline: 2em;
        }
        
        .actividad_destacada figcaption span {
        display: block;
        font-size: 0.75em;
        color:rgb(0, 48, 60);
        margin-block-start: .5em;
        text-transform: none;
        }

        .mensaje_inicio{
            background-color: white;
            margin-left: 16em;
            margin-right: 16em;
            border-radius: 2em;
            margin-top: 6em;
            margin-bottom: 5em;
            padding-top: 1em;
            padding-bottom: 1em;
            padding-right: 2em;
            padding-left: 2em;
            
        }
        
        .tituloinicio{
            color: rgb(0, 48, 60);
            text-align: center;
            padding-top: 1em;
            font-size: 35px;
            padding-left: 1em;
            padding-right: 1em;

        }
        
        .textoinicio{
            color: rgb(0, 48, 60);
            text-align: start;
            padding-bottom: 1em;
            display: flex;
            justify-content: center;
            font-size: 25px;
        
        }

        .contenedora_libros{
            display:none;
        }

        .contenedora_libros_visible{
            display: contents;
        }
        
      .librodestacado_visible{
          display:flex;
          flex-direction: row;
          align-items: flex-start;
          



      }
        .libroslista2{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            align-content: center;
            width: 80%;
            padding-bottom: 1em;
            

        }

        .tituloresena{
            color: white;
            text-align: center;
        }

        video{
            width: 100%;
            height: auto;
        
        }

        iframe{
            width: 60vw;
            height:40vw;
            aspect-ratio: 16/9;
        }

        .contenedoralibros_visible2{
            display: grid;
            grid-template-columns: 25% 25% 25% 25% ;
        }
        

                          
                               

 

  

                    }