@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=KoHo:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Krub:ital@0;1&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');



/**RAICES**/


* {
    Box-sizing: border-box;
}

:root {
    --color-textos: rgb(8, 98, 100);
    --color-fondos: rgb(242, 242, 242);

    --color-1: rgb(242, 242, 242);
    --color-2: rgb(239, 121, 34);
    --color-3: rgb(8, 98, 100);
    --color-4: rgb(117, 160, 158);
    --color-5: rgb(185, 222, 216);
    --color-6: rgb(205, 231, 228);



    --tipo-titulos: 'bree serif', serif;
    --tipo-subtitulos: 'koho', sans-serif;
    --tipo-botones: 'roboto', sans-serif;
    --tipo-textos: 'krub', sans-serif;
}



/**GENERALES**/

html {
    height: -webkit-fill-available;
}


Img {
    max-width: 100%;
}


a {
    text-decoration: none;
}


ul {
    list-style: none;
    padding: 0;
}


h1 {
    font-family: var(--tipo-titulos);
    color: var(--color-3);
    margin-block-start: 1.5em;
    margin-block-end: 1.2em;
    text-align: center;
    font-size: xx-large;
    margin-inline: 2.5em;
}

h2 {
    font-family: var(--tipo-subtitulos);
    color: var(--color-2);
    font-size: 20px;
    margin-block-start: 2em;
}

h3 {
    font-family: var(--tipo-botones);
    color: var(--color-1);
    margin-block-start: .5em;
    margin-block-end: .5em;
}

h5 {
    margin-block-start: 1em;
    margin-block-end: 1em;
}


/**BODY**/

body {
    font-family: var(--tipo-textos);
    color: var(--color-3);
    margin: 0rem;
    background-color: var(--color-1);
    min-height: 100vh;
    min-height: -webkit-fill-available;
}


/**HEADER**/
header {
    margin: 0rem;
    background-color: var(--color-2);
    padding-inline: 2em;
    padding-block: 1em;
}



.contenedor {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

/**logo**/
#logo {
    width: 120px;
    color: var(--color-1);
}


.hamburger {
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 45px;
    padding: 5px 15px 0px 15px;
    color: var(--color-1);
    border: 0;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 10000000000000;
}

.cross {
    background: none;
    position: absolute;
    top: 0px;
    right: 0;
    padding: 7px 15px 0px 15px;
    color: var(--color-1);
    border: 0;
    font-size: 3em;
    line-height: 65px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    z-index: 10000000000000;
}

.menu {
    z-index: 1000000;
    font-weight: bold;
    font-size: 0.8em;
    width: 50%;
    background: var(--color-2);
    position: absolute;
    text-align: center;
    font-size: 12px;
    margin-left: 42%;
    margin-top: 57%;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

.menu li {
    display: block;
    padding: 15px 0 15px 0;
    border-bottom: #dddddd 1px solid;
}

.menu li:hover {
    display: block;
    background: #ffffff;
    padding: 15px 0 15px 0;
    border-bottom: #dddddd 1px solid;
}

.menu ul li a {
    text-decoration: none;
    margin: 0px;
    color: #666;
}

.menu ul li a:hover {
    color: #666;
    text-decoration: none;
}

.menu a {
    text-decoration: none;
    color: var(--color-1);
}

.menu a:hover {
    text-decoration: none;
    color: var(--color-2);
}

.glyphicon-home {
    color: white;
    font-size: 1.5em;
    margin-top: 5px;
    margin: 0 auto;
}

/**MAIN**/
main {
    padding: 1em;
}

/**buscador**/

.buscador_barra form input {
    background-color: var(--color-5);
    border-radius: .5em;
    padding-block: 1em;
    padding-inline: 2em;
}

.buscador_barra a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .125em;
}

.buscador_barra h4 {
    background-color: var(--color-2);
    color: var(--color-1);
    padding: .8em;
    border-radius: .5em;
}

.buscador_barra img {
    width: 20px;
}

.resultado_busqueda {
    display: none;
}

/**BOTONES 1**/

.botones_inicio ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5em;
}

.boton1 a {
    color: var(--color-1);
    background-color: var(--color-3);
    border: solid 2px var(--color-3);
    display: block;
    width: auto;
    border-radius: 0.5em;
    text-align: center;
    padding: .8em;

}



.botones_objetivos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
}

.boton1a a {
    color: var(--color-3);
    background-color: var(--color-1);
    border: solid 2px var(--color-3);
    display: block;
    width: auto;
    border-radius: 0.5em;
    text-align: center;
    padding: .8em;

}


.datos_registro .boton1 {
    margin-top: 3em;
}

/**BOTONES 1 HOVER**/

.boton1 a:hover {
    color: var(--color-3);
    background-color: var(--color-1);
    border: solid 2px var(--color-3);
    display: block;
    width: auto;
    border-radius: 0.5em;
    text-align: center;
    padding: .8em;
}

.boton1a a:hover {
    color: var(--color-1);
    background-color: var(--color-3);
    border: solid 2px var(--color-3);
    display: block;
    width: auto;
    border-radius: 0.5em;
    text-align: center;
    padding: .8em;

}

/**BOTONES 2**/

.boton2 a {
    color: var(--color-3);
    border-bottom: solid 3px var(--color-3);

}

/**BOTONES 3**/

.boton3 {
    color: var(--color-1);
    background-color: var(--color-2);
    border: solid 0.5px var(--color-2);
    display: block;
    width: auto;
    border-radius: 0.5em;
    text-align: center;
    padding: .8em;
}


.pantalla_inicio figure {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


.inicio_buscador {
    position: absolute;
    z-index: 9000;
    top: 15em;
}

.inicio_buscador h1 {
    margin-top: 0px;
}

.nati {
    text-align: center;
}

/**PANTALLA OBJETIVOS**/

.meta nav {
    border-top: solid 2px var(--color-3);
    padding-top: 1em;
}

/**PANTALLA COMUNIDAD**/
.portada_libros figure {
    display: none;
}

/**INICIO**/
.iniciar_sesion h3 a {
    color: var(--color-2);
    border-bottom: solid 1px var(--color-2);
    margin-inline-start: 13em;
}

.registrarse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.main_inicio {
    padding: 0;
}

.botones_index .boton1 a {
    border-radius: 0;
}

.presentacion .boton2 {
    margin-block-start: 2em;
}

.presentacion .boton2 a {
    margin-inline-start: 18em;
}

#lechuza img {
    width: 50px;
    margin-inline: 11em;
    margin-block-start: 4.5em;
}

.textos_index h1 {
    margin-inline: .5em;
}

.presentacion p {
    text-align: center;
    margin-block-end: 5.4em;
    margin-inline: 2em;
}

.registrarse h2 {
    margin-block-start: 0;
    margin-block-end: 0;
    background-color: var(--color-3);
    padding: .5em;
    border-radius: .5em;
}

.registrarse h2 a {
    color: var(--color-1);
}

.pantalla_inicio {
    padding: 0;
}

/**SESION INICIADA**/
.mensaje {
    background-color: var(--color-1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-block: 1em;
    padding-inline: 2em;
    gap: 4em
}


/**REGISTRARSE**/
.datos_registro form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.datos_registro h1 {
    margin-block-end: 0.5em;
}

.datos_registro form input {
    background-color: var(--color-5);
    color: var(--color-3);
    border-radius: .5em;
    padding: 1em;
}

.enviar {
    background-color: var(--color-3);
    border-radius: .5em;
    text-align: center;
    padding: .125em;
    margin-block-start: 1em;
    margin-inline: 8em;
}

.sesion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .125em;
    padding-block-start: 1.5em;

}

.sesion a {
    color: var(--color-3);
}



/**PORTADA LIBRO**/
.portada {
    padding: 0;
}

.texto_portada_libro {
    text-align: center;
    border-radius: 0;
    position: absolute;
    z-index: 10000;
    padding-inline: 8.2em;
    background-color: var(--color-3);
    opacity: 100%;
}

.elcampito {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.elcampito figcaption {
    padding-block: 1em;
    padding-inline: 2em;
}


/**PORTADA ACTIVIDAD**/
.resultados_portada {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.texto_portada_actividades {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: center;
    column-gap: 2em;
    border-radius: 0;
    position: absolute;
    z-index: 10000;
    padding-inline: 3em;
    padding-inline: 2.8em;
    background-color: var(--color-3);
    opacity: 100%;
}

.resultados_portada figcaption h2 {
    font-size: 30px;
}


.tallerdedibujo figcaption {
    padding-block: 1em;
    padding-inline: 2em;
}

.tallerdedibujo h2 {
    font-size: 40px;
    margin-block-start: .125em;
    margin-block-end: .125em;
}

.tallerdedibujo h3 {
    margin-block: 0;
}


.botones_desplegables {
    margin: 2em;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.btn_desplegable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-5);
    padding: .5em;
}

.btn_desplegable h2 {
    margin-block-start: 0;
    margin-block-end: 0;
    color: var(--color-3);
}


/**IMAGENES pantalla libro**/
.libros_scroll {
    margin-inline: .5em;
}

.libros_recomendados {
    margin-block-end: 3em;
}

.portadas {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-block-start: 0.7em;

}

.portadas figure {
    position: relative;
    display: flex;
    align-items: flex-end;

}

.portadas figure figcaption {
    position: absolute;
    z-index: 9000;
    display: flex;
}


.libro_texto {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline;
}

.resultados_hover {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.botones_inicio_libros {
    margin-block-start: 0em;
    margin-block-end: 3em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    margin-inline: 5em;
}

figcaption {
    background-color: rgba(242, 242, 242, 0.886);
    color: var(--color-3);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

figcaption h4 {
    margin-block-end: .3em;
}

figcaption h5 {
    font-family: var(--tipo-subtitulos);
    margin-block-start: 0em;
    margin-block-end: .125em;
    font-size: 11px;
}

figcaption p {
    font-family: var(--tipo-textos);
    font-size: 9px;
    margin-block-start: .125em;
    margin-block-end: .5em;

}


/**IMAGENES pantalla mapa**/

.buscador h1 {
    margin-inline: 2em;
}

.buscador_mapa iframe {
    max-width: 100%;
    padding-inline: 0;
}


/**INICIO**/
.inicio_sesion {
    background-color: var(--color-1);
}

#logo_inicio {
    width: 120px;
    margin-inline-start: 2em;
    margin-block-start: 2em;
}


/**RESULTADOS LIBROS**/

.tus_resultados h2 {
    font-size: 30px;
    margin-block-end: .125em;
}

.tus_resultados h4 {
    font-size: 12px;
    margin-block-start: .5em;
    margin-inline-start: .3em;
}

.resultados {
    margin-inline: 1.5em;
    margin-block-end: 1em;
    padding: 1em;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-items: center;
    gap: 1.5em;

}

.resultado_libro {
    margin-inline: 1.5em;
    margin-block-end: 1em;
    padding: 1em;
    display: grid;
    grid-template-columns: auto auto;
    justify-items: center;
    align-items: center;
    gap: 1.5em;
}

.resultados figure a img {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.resultados figure figcaption a {
    position: absolute;
    z-index: 9000;
    display: flex;
}

.tus_resultados_actividades figure {
    position: relative;
    display: flex;
    align-items: flex-end;

}

.tus_resultados_actividades figcaption {
    position: absolute;
    z-index: 9000;
    top: 4.5em;
}

.tus_resultados_libros figcaption {
    position: absolute;
    z-index: 9000;
    top: 7.1em;
}

.tus_resultados_actividades figcaption h4 {
    margin-block-start: 0%;
}

.quieroleer figure,
.yavalorados figure,
.resultados figure,
.resultado_libro figure {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.quieroleer figcaption {
    position: absolute;
    z-index: 9000;
    display: flex;
    padding-inline: 1em;
}

.yavalorados figcaption {
    position: absolute;
    z-index: 9000;
    display: flex;
    padding-inline: 1em;
}

.resultados figcaption {
    position: absolute;
    z-index: 9000;
    display: flex;
    padding-inline: 1em;
    padding-block-end: 1.4em;
    padding-block-start: 0.5em
}

.resultados_hover figcaption {
    position: absolute;
    z-index: 9000;
    display: flex;
    padding-inline: 1.8em;
}

.resultado_libro figcaption {
    position: absolute;
    z-index: 9000;
    display: flex;
    padding-inline: 2.3em;
    padding-block-end: 1.5em;
}


.breadcrumb_actividades a {
    color: var(--color-3);
    font-size: 12px;
}

.breadcrumb_libros a {
    color: var(--color-3);
    font-size: 12px;
}



/**COMUNIDAD**/
.perfiles nav a {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 1em;
}

.perfiles figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}


.usuario img {
    border-radius: .5em;
}

.comunidad_libros {
    display: none;
}

.usuarios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    padding-top: 1rem;
}

.usuarios img {
    width: 8em;
    max-width: 100px;
}

.usuarios h1,
h2 {
    margin-top: 10px;
    margin-bottom: 0px;
}

.usuario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5em;
}

.usuario figcaption {
    text-align: center;
    opacity: 100%;
}

.usuario figcaption h5 {
    font-size: 13px;
}

.usuario figcaption p {
    font-size: 11px;
}

.todos_usuarios .boton2 {
    margin-block-start: 2em;
    margin-right: 1em;
}

/**NIVELES**/
.lectores_caract {
    font-size: 30px;
}

.descripcion_niveles h3 {
    color: var(--color-3);
}

.descripcion_niveles {
    display: flex;
    flex-direction: column;
    gap: .3em;
    margin-block-start: 0.8em;
}

.descripcion_niveles .boton4 {
    margin-block-start: 2em;
}

.descripcion_niveles .boton4 a {
    color: var(--color-2);
    font-family: var(--tipo-subtitulos);
    font-size: 20px;
    font-weight: bold;
}

.maestro ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}

.maestro ul li {
    border: solid 2px var(--color-3);
    background-color: var(--color-1);
    padding-inline: 5em;
    padding-block: .5em;
    border-radius: .5em;
    text-align: center;
}

/**NIEVLES OBJETIVOS**/
.pantalla_objetivos {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.botoneraminivel ul {
    display: flex;
    justify-content: space-between;
    gap: 2em;
    padding-inline: 2em;
    margin-block: 1em;
}

.botoneraminivel ul li {
    background-color: var(--color-3);
    color: var(--color-1);
    padding: .5em;
    border-radius: .5em;
}

.pantalla_objetivos h2 {
    font-size: x-large;
}

.porcentaje {
    background-color: var(--color-6);
    border-radius: .5em;
    margin-block: 3em;
    padding: 1em;
}

.porcentaje h4 {
    margin-inline-start: 1em;
}

.porcentaje p {
    margin-inline-start: 1em;
    margin-block-start: .4em;
}

.objetivos h4 {
    text-align: center;
}

.objetivos form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.objetivos form label {
    padding-inline: 3.2em;
    padding-block: 1em;
    background-color: var(--color-5);
    color: var(--color-3);
    border-radius: .5em;
}

.objetivos_cumplidos h4 {
    text-align: center;
}

.objetivos_cumplidos ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
}

.objetivos_cumplidos ul li {
    padding-inline: 4.5em;
    padding-block: 1em;
    background-color: var(--color-3);
    color: var(--color-1);
    border-radius: .5em;
}

.meta .boton4 {
    margin-block-start: 2em;
}

.meta .boton4 a {
    color: var(--color-2);
    font-family: var(--tipo-subtitulos);
    font-size: 20px;
    font-weight: bold;
}

/**PERFIL ERUDITO**/

.perfil-erudito {
    padding: 0;
    padding-inline: 1.5em;
    padding-block-end: 2em;
}



.perfil_datos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9100;
    position: sticky;
    top: -375px;
    background-color: var(--color-1);
}

.seguir {
    color: var(--color-2);
}

.perfil_datos h1 {
    margin-block-start: 1.5em;
    margin-block-end: 0;
}

.perfil_datos svg {
    margin-left: 1em;
    fill: var(--color-2);
}



.conoce h2 {
    border-bottom: solid 2px var(--color-2);
}

.conoce b {
    color: var(--color-2);
}


.perfil_datos img {
    border-radius: 15em;
    margin-block-start: 4em;
    width: 10em;
}

.seguir img {
    width: 30px;
    margin-inline-start: 10em;
    border-radius: 0;
    margin-block-start: 0em;
    margin-block-end: 3em;
}

.perfil_datos h4 {
    background-color: var(--color-2);
    color: var(--color-1);
    padding: .4em;
    border-radius: .5em;
    font-size: small;
    margin-inline: 10em;
    text-align: center;
}

.perfil_datos ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.perfil_datos li a {
    color: var(--color-1);
    font-family: var(--tipo-botones);
}

.usuario_recomendaciones h2 {
    margin-block-end: .5em;
    margin-block-start: 1em;
}

.usuario_recomendaciones .boton2 {
    margin-inline: 9em;
    margin-block: .5em;
}

.recomendaciones .ver-mas {
    margin-block: 2em;
}

.recomendaciones .ver-mas a {
    color: var(--color-3);
    border-bottom: solid 2px var(--color-3);
    margin-inline-start: 9em;
    margin-block: 2em;
}

.valoraciones .ver-mas {
    margin-block: 2em;
}

.valoraciones .ver-mas a {
    color: var(--color-3);
    border-bottom: solid 2px var(--color-3);
    margin-inline-start: 9em;
    margin-block: 2em;
}

.leer .ver-mas {
    margin-block: 2em;
}

.leer .ver-mas a {
    color: var(--color-3);
    border-bottom: solid 2px var(--color-3);
    margin-inline-start: 9em;
    margin-block: 2em;
}

/**PERFIL VER MAS**/
.valoracion_perfil {
    padding-inline: 2;
}

.valoracion_perfil h2 {
    margin-block-end: .5em;
}


.valoracion_perfil .boton4 {
    margin-block-start: 2em;
}

.valoracion_perfil .boton4 a {
    color: var(--color-2);
    font-family: var(--tipo-subtitulos);
    font-size: 20px;
    font-weight: bold;
}

.libro_valoracion {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2em;
    padding: 1em;
    background-color: var(--color-5);

    margin-inline: 2em;
}

.libro_valoracion img {
    width: 30%;
}

.libro_valoracion h4 {
    font-size: large;
    color: var(--color-2);
    margin-block: 0;
}

.libro_valoracion p {
    margin-block-end: 0em;
    margin-block-start: .4em;
    font-size: small;
}

.libro_valoracion h6 {
    margin-block-start: .9em;
    margin-block-end: 0;

}

.comentario .ver h6 {
    background-color: var(--color-2);
    color: var(--color-1);
    margin-block: 0;
    padding: 1em;

    text-align: center;
}

.ver {
    display: flex;
    flex-direction: column;
    margin-block-end: 2em;
    margin-inline: 2em;
}

.ver h5 {
    margin-block: 0;
}

/**FOOTER**/
footer {
    font-family: var(--tipo-textos);
    color: var(--color-1);
    font-size: small;
    margin: 0rem;
    margin-block: 0;
    background-color: black;
    padding: 1em;
    text-align: center;
}

footer .logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline: 1em;
    padding-block: 1em;
    border-top: 2px solid var(--color-1);
    padding-block-end: .125em;
}

footer .acumar {
    width: 200px;
}

footer .dgpc {
    width: 115px;
}

.redes ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2em;
    margin-inline: 7em;
    padding-block-start: 1em;
}

footer .institucional ul {
    color: var(--color-1);
    display: flex;
    justify-content: center;
    gap: 2em;
    padding-block: 1em;
    margin: auto;
}

footer .institucional a {
    color: var(--color-1);
}

/**FIGCAPTION MODIFICADO POR LU**/

figcaption span,
.elcampito h3 {
    display: block;
    font-size: .75em;
    color: var(--color-3);
    margin-block-start: 0.8em;
    text-transform: none;
}

figcaption h5 {
    font-family: var(--tipo-subtitulos);
    margin-block-start: 0em;
    margin-block-end: .125em;
    font-size: 11px;
}

figcaption p {
    font-family: var(--tipo-textos);
    font-size: 9px;
    margin-block-start: .125em;
    margin-block-end: .5em;

}


/*MODIFICADO POR LU*/



.buscador_mapa {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.puntero {
    position: absolute;
    z-index: 9000;
    width: 40px;
}

.buscadoractividades h1 {
    margin-inline: 1.5em;
}

.buscadoractividades figure {
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}



/**MI PERFIL**/

.mi_perfil {
    padding: 2em;
}

.mi_perfil h2 {
    margin-block-end: .5em;
    margin-block-start: 1em;
}

.nombre h1 {
    margin-inline: 0;
}

.botonera ul {
    display: flex;
    justify-content: space-between;
    gap: 2em;
    padding-inline: 2em;
    margin-block: 1em;
}

.botonera ul li {
    background-color: var(--color-3);
    color: var(--color-1);
    padding: .5em;
    border-radius: .5em;
}


.activos {
    display: flex;
    justify-content: center;
    gap: 1em;
    align-items: flex-start;
    background-color: var(--color-6);
    padding: 1em;
}

.activos img {
    max-width: 100px;
}

.activos h3 {
    color: var(--color-3);
    margin-block: 0;
}

.activos h4 {
    margin-block: 0;
    margin-block-start: .5em;
    margin-block-end: 5em;
    font-size: 11px;
}

.libro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.quieroleer,
.yavalorados {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-block-end: 1em;
}

.quieroleer figure,
.yavalorados figure {
    justify-content: center;
}


figcaption p {
    font-family: var(--tipo-textos);
    font-size: 9px;
    margin-block-start: 0.125em;
    margin-block-end: 0.5em;
}

figcaption h5 {
    font-family: var(--tipo-subtitulos);
    margin-block-start: 0em;
    margin-block-end: 0.125em;
    font-size: 11px;
}

.valorados .comentario .libro_valoracion {
    margin-inline: 0;
}

.valorados .comentario .ver {
    margin-inline: 0;
}

.valorados .comentario .ver form textarea {
    background-color: var(--color-5);
    color: var(--color-3);
    padding-inline: 6.8em;
    padding-block-start: 1em;
    text-align: center;
}

/**CONTENEDOR**/

.contenedor_video {
    position: absolute;
    top: 9%;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.contenedor_video video {
    position: relative;
    top: 47%;
    left: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    opacity: 40%;
}


/**TABLET**/
@media (min-width: 768px) {

    header {
        padding-block: .8em;
        padding-inline: 4em;
    }


    /**MENU**/

    .menu {
        margin-left: 41.7%;
        margin-top: 30.6%;
    }

    .hamburger {
        line-height: 55px;
    }


    /**Presentacion**/

    .presentacion .boton2 a {
        margin-inline-start: 37em;
    }

    #lechuza img {
        margin-inline: 21em;
        width: 100px;
        margin-block-start: 7em;
    }



    .textos_index h1 {
        margin-inline: 2em;
    }

    .presentacion p {
        margin-inline: 10em;
        margin-block-end: 2em;
    }


    .inicio_buscador {
        top: 19em;
        right: 9.5em;
    }

    /**REGISTRARSE**/
    .datos_registro {
        margin-inline: 10em;
    }

    .datos_registro h1 {
        margin-block-start: 2em;
    }

    .enviar {
        margin-block-start: 2em;
    }

    /**INICIO**/
    .mensaje {
        display: flex;
        justify-content: right;
        align-items: center;
    }

    .mensaje p {
        margin-inline-start: 24em;
    }


    /**INICIO LIBROS**/

    .inicio_libros {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 0;
        gap: 2em;
        align-items: flex-start;
    }

    /**MAPA**/
    .puntero {
        width: 55px;
    }

    /**PANTALLA INICIO LIBROS / COMUNIDAD**/

    .buscador {
        position: relative;
        display: flex;
        justify-content: left;
        align-items: center;
    }

    .comunidad_libros figure picture {
        opacity: 50%;
    }

    .buscador .contenido {
        position: absolute;
        z-index: 9000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .buscador h1 {
        margin: 0;
    }

    .portada_libros figure {
        display: inline;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .portada_libros figure picture img {
        width: 400px;
    }

    .recomendame {
        margin-inline: 5em;
    }



    /**TUS RESULTADOS LIBROS**/
    .resultados {
        margin-inline: 0em;
        padding: 0;
        grid-template-columns: auto auto auto auto;
        gap: 2em;
    }

    .resultado_libro {
        margin-inline: 0em;
        padding: 0;
        grid-template-columns: auto auto auto auto auto;
        gap: 2em;
    }

    .tus_resultados {
        margin: 3em;
    }

    .tus_resultados h2 {
        font-size: 40px;
        margin-block-start: 0em;
    }

    .tus_resultados h4 {
        font-size: 16px;
        margin-block-end: 2em;
    }

    .breadcrumb_actividades {
        margin-block-end: 1em;
    }

    .breadcrumb_libros {
        margin-block-end: 1em;
    }

    .tus_resultados_actividades {
        margin-inline: 4em;
    }

    .tus_resultados_libros {
        margin-inline: 4em;
    }

    .tus_resultados_actividades figcaption {
        top: 4em;
    }

    .tus_resultados_libros figcaption {
        position: absolute;
        z-index: 9000;
        top: 4.3em;
    }

    .resultados_hover figcaption {
        padding-inline: 2em;
    }

    .libros_scroll .resultados_hover figcaption {
        padding-inline: 1.5em;
    }

    .quieroleer figcaption {
        padding-inline: 1em;
    }

    .yavalorados figcaption {
        padding-inline: 1em;
    }

    .resultados figcaption {
        padding-inline: 1em;
        padding-block-end: 1.4em;
    }


    .resultado_libro figcaption {
        padding-inline: 1.2em;
        padding-block-end: 1.3em;
    }



    /**PORTADA LIBRO**/
    .portada {
        display: grid;
        grid-template-columns: 400px auto;
        align-items: flex-start;

    }



    /**COMUNIDAD**/
    .comunidad_libros {
        display: block;
    }

    .comunidad_libros figure img {
        width: 375px;
    }

    .comunidad_libros figure {
        display: inline;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .comunidad {
        display: grid;
        grid-template-columns: auto auto;
        padding: 0;
        gap: 1em;

    }


    .usuarios {
        margin-inline-end: 1em;
    }


    /**NIVELES**/

    .descripcion_niveles {
        margin-inline: 8em;
    }

    .lectores_caract {
        margin-inline: 8em;
        margin-block-end: .5em;
    }

    .maestro ul {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1em;
    }

    .maestro ul li {
        padding-inline: 1em;
        align-content: center;
    }

    /**PERFIL ERUUDITO**/

    .perfil-erudito {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1em;
    }

    .perfil_datos {
        justify-content: flex-start;
        top: 80px;
    }

    .seguir img {
        margin-inline-start: 9em;
    }


    /**VER MAS**/
    .valoracion_perfil {
        margin-inline: 10em;
    }

    .valoracion_perfil h2 {
        text-align: center;
    }

    .valoracion_perfil .boton4 {
        text-align: center;
    }



    /**MI PERFIL**/

    .mi_perfil {
        display: grid;
        grid-template-columns: auto auto;
        gap: 2em;
        align-items: flex-start;
    }

    .valorados .comentario .ver form textarea {
        padding-inline: 7.8em;
    }


    /**OBJETIVOS**/
    .pantalla_objetivos {
        display: grid;
        grid-template-columns: auto auto;
        align-items: flex-start;
        gap: 2em;
    }

    .pantalla_objetivos h2 {
        margin-inline: 6.5em;
    }

    .porcentaje {
        padding: 1em;
    }



    /**FOOTER**/

    footer {
        padding-inline: 4em;
    }


    .footer p {
        grid-area: texto;
    }

    .footer .logos {
        grid-area: logos;
    }

    .redes {
        grid-area: redes;
    }

    .institucional {
        grid-area: institucional;
    }

    footer p {
        border-bottom: 2px solid var(--color-1);
        padding-block-end: 1em;
    }

    footer .logos {
        justify-content: left;
        gap: 2em;
        border-top: 0px;

    }

    .redes ul {
        gap: 2em;
        margin-inline: 0em;
        padding-block-start: 1em;
    }

    .links {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "logos redes"
            ". institucional";
    }

    footer .institucional ul {
        justify-content: space-between;
    }

}







/**DESKTOP**/
@media (min-width: 1200px) {
    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 25px;
    }

    h3 {
        font-size: 20;
    }

    h5 {
        font-size: 15px;
    }

    figcaption h5 {
        font-size: 15px;
    }

    figcaption p {
        font-size: 12px;
    }

    header {
        padding-block: .8em;
        padding-inline: 8em;
    }

    #logo {
        width: 160px;
    }

    /**botones**/

    .boton1 a {
        font-size: 20px;
    }

    .menu {
        margin-left: 39.3%;
        margin-top: 21%;
        font-size: 15px;
    }

    /**REGISTRARSE**/
    .datos_registro {
        margin-inline: 25em;
    }


    .datos_registro h1 {
        margin-block-start: 2.5em;
        margin-inline-start: 1em;
    }

    .sesion p,
    .sesion .boton2 {
        font-size: 20px;
    }

    /**Presentación**/

    .contenedor_video video {
        top: 40%;
    }
    .botones_index .boton1 a {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        bottom: 9%;
    }

    .presentacion .boton2 a {
        margin-inline-start: 55em;
    }

    .presentacion .boton2 a b {
        font-size: 25px;
    }

    #lechuza img {
        width: 140px;
        margin-inline: 34em;
        margin-block-start: 2em;
    }

    .presentacion p {
        font-size: 25px;
        margin-block-end: 2em;
    }

    .inicio_buscador {
        top: 17em;
        right: 13em;
    }

    .nati {
        font-size: 20px;
    }


    /**INICIO LIBROS**/
    .inicio_libros {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    /**PANTALLA INICIO LIBROS / COMUNIDAD**/

    .buscador {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
    }

    .buscador .contenido {
        position: absolute;
        z-index: 9000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .portada_libros figure picture img {
        width: 1200px;
        opacity: 50%;
    }

    .recomendame {
        margin-inline: 29em;
    }


    .libros_scroll a {
        display: grid;
        grid-template-columns: auto auto;
        margin-inline: 10em;
        margin-block-end: 3em;
        gap: 3em;
    }

    /**MAPA**/
    .puntero {
        width: 85px;
    }

    /**TUS RESULTADOS LIBROS**/
    .resultados {
        gap: 3em;
    }

    .tus_resultados {
        margin: 0em;
        margin-inline: 8em;
        margin-block: 4em;
    }


    .tus_resultados_actividades h2,
    .tus_resultados_libros h2 {
        font-size: 30px;
    }

    .breadcrumb_actividades a,
    .breadcrumb_libros a {
        font-size: 15px;
    }

    .resultados_hover {
        position: relative;
        overflow: hidden;
    }

    .resultados_hover figcaption span {
        color: var(--color-1);
    }

    .resultados_hover figcaption {
        background-color: var(--color-3);
        color: var(--color-1);
        opacity: 100%;
        padding: 0.5em;
        flex-direction: column;
        justify-content: center;
        padding-inline: .5em;
        position: absolute;
        top: calc(100% - 2em);
        /** 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;
        inset: 0;
        visibility: hidden;
    }

    .resultados_hover:hover figcaption {
        background-color: rgba(8, 98, 100, 0.662);
        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;
        visibility: visible;
    }

    /**PORTADA LIBRO**/
    .portada {
        display: flex;
        flex-direction: column;
    }

    .portada figure picture img {
        width: 1200px;
    }

    .texto_portada_actividades {
        padding-inline: 23.5em;
    }

    .texto_portada_libro {
        padding-inline: 30.2em;
    }

    .botones_desplegables {
        margin: 0em;
        margin-block: 3em;
        margin-inline: 20em;
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .resultados_portada figcaption h2 {
        font-size: 50px;
    }


    /**COMUNIDAD**/
    .comunidad_libros {
        display: block;
    }

    .comunidad_libros figure img {
        width: 1200px;
    }


    .comunidad {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 1em;

    }

    .todos_usuarios {
        margin-inline-end: 0em;
        margin-inline: 20em;
    }

    .usuario img {
        width: 500px;
    }

    .usuario figcaption h5 {
        font-size: 18px;
    }

    .usuario figcaption p {
        font-size: 15px;
    }

    .todos_usuarios .boton2 {
        margin-inline: 11em;
        margin-block-end: 3em;
        margin-block-start: 4.5em;
    }


    /**NIVELES**/

    .descripcion_niveles {
        margin-inline: 15em;
    }

    .lectores_caract {
        margin-block-start: 2em;
        margin-block-end: 1em;
    }

    .descripcion_niveles .boton4 a {
        font-size: 22px;
    }


    /**PERFIL ERUDITO**/
    .perfil-erudito {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }



    .perfil_datos img {
        grid-area: fotoperfil;
    }

    .perfil_datos .nombre {
        grid-area: nombre;
    }

    .perfil_datos nav {
        grid-area: botones;
    }

    .perfil_datos .señalador {
        grid-area: señalador;
    }

    .perfil_datos {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "señalador señalador señalador"
            "fotoperfil nombre nombre"
            "fotoperfil botones botones";
        justify-content: center;
        padding-inline: 2em;
        padding-block-end: .125em;
        padding-block-start: 4em;
        top: -115px;

    }

    .perfil_datos img {
        margin: 4em;
    }

    .seguir img {
        width: 50px;
        margin: 0;
        margin-inline-start: 0em;
    }

    .usuario_recomendaciones h2 {
        margin-block-end: 1em;
        margin-block-start: 1.8em;
        font-size: 30px;
    }

    .usuario_recomendaciones .boton2 {
        margin-inline: 18em;
        margin-block: 1em;
    }

    .usuario_recomendaciones .boton2 a {
        font-size: 22px;
    }

    .nombre {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 3em;
        border-bottom: solid 2px var(--color-2);
    }

    .nombre h1 {
        margin-inline: -0.5em;
    }

    .nombre h4 {
        margin-inline: 0;
    }

    .usuario_recomendaciones {
        margin-inline: 15em;
        margin-block-end: 4em;
    }

    .valoraciones .ver-mas a {
        margin-inline-start: 20em;
    }


    .conoce {
        margin-inline: 15em;
    }


    /**VER MAS**/
    .valoracion_perfil {
        margin-inline: 10em;
    }

    .comentario_usuario {
        display: grid;
        grid-template-columns: auto auto;
    }

    .valoracion_perfil h2 {
        text-align: left;
        margin-block-end: 1em;
        margin-block-start: 2em;
        margin-inline-start: 1em;
    }

    .valoracion_perfil .boton4 {
        text-align: left;
        margin-inline-start: 2em;
        margin-block-start: .5em;
        margin-block-end: 1em;
    }

    .valoracion_perfil .boton4 a {
        font-size: 22px;
    }


    /**MI PERFIL**/

    .mi_perfil {
        display: flex;
        flex-direction: column;
        gap: 1em;
        justify-content: center;
        align-items: center;
        padding-inline: 15em;
    }

    .mi_perfil h2 {
        margin-block-end: 1em;
        margin-block-start: 1.8em;
        font-size: 30px;
    }

    .activos {
        gap: 3em;
    }

    .activos img {
        max-width: 230px;
    }

    .activos h3 {
        font-size: 25px;
    }

    .activos h4 {
        font-size: 20px;
    }

    .quieroleer {
        margin-block-end: 3em;
    }

    .valorados .comentario .libro_valoracion {
        align-items: flex-start;
        justify-content: center;
        padding: 0;
        padding-inline: 5em;
        padding-block: 2em;
    }

    .valorados .comentario .libro_valoracion h4 {
        font-size: 30px;
    }

    .valorados .comentario .libro_valoracion p {
        font-size: 25px;
    }

    .valorados .comentario .libro_valoracion h6 {
        font-size: 20px;
    }

    .valorados .comentario .libro_valoracion img {
        width: 45%;
    }

    .valorados .comentario .ver h6 {
        font-size: 18px;
    }

    .valorados .comentario .ver form textarea {
        padding-inline: 14.2em;
        font-size: 18px;
    }

    /**OBJETIVOS**/
    .pantalla_objetivos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2em;
    }

    .meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .meta .boton4 {
        margin-inline: 15em;
    }

    .meta .boton4 a {
        font-size: 25px;
    }

    .meta nav {
        margin-inline: 15em;
    }

    .porcentaje {
        margin-inline: 15em;
    }

    .pantalla_objetivos h2 {
        margin-inline: 6.5em;
    }

    .todos_objetivos {
        display: flex;
        justify-content: center;
        gap: 3em;
    }

    /**FOOTER**/

    footer {
        padding-inline: 10em;
        display: grid;
        grid-template-columns: auto auto;
    }


    .footer p {
        grid-area: texto;
    }

    .footer .logos {
        grid-area: logos;
    }

    .redes {
        grid-area: redes;
    }

    .institucional {
        grid-area: institucional;
    }

    footer p {
        border-right: 2px solid var(--color-1);
        border-bottom: 0;
        padding-inline-end: 1em;
        text-align: left;
        font-size: medium;
    }

    footer .logos {
        justify-content: space-between;
        gap: 3em;
        margin-inline: 0;

    }

    .redes ul {
        gap: 2em;
        margin-inline: 0em;
        padding-block-start: 1em;
    }

    .links {
        margin-inline-start: 3em;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "logos"
            "redes"
            "institucional";
    }

    footer .institucional ul {
        justify-content: space-between;
    }

}