@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap');
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/***** GENERALES *****/

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

h1 {
    font-size: 3em;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
}

p {
    font-size: 0.7em;
    font-family: 'mitr', sans-serif;
    font-size: 300;
}

.contenedor {
    width: 95%;
    margin: 0 auto;
}

h1,
h2,
h3,
h4 {
    font-family: 'mitr', sans-serif;
}

.boton {
    border-radius: .60em;
    padding: .5em 2em;
    margin-top: 1.2em;
    font-size: 1em;
    font-family: 'mitr', sans-serif;
    font-weight: 500;
}

.boton-crema {
    background-color: #ffeacf;
}

.boton-ser {
    border: solid #7e7e7eb9 1px;
    margin-bottom: 3em;
}

.icon {
    color: gray;
    font-size: 1.4em;
}

.icon-ch {
    color: rgb(100, 175, 245);
    font-size: 1em;
}

.icon-ingreso {
    font-size: 3em;
}

.icon-reg {
    font-size: 1.7em;
}

.face {
    color: #4267B2;
}

.goog {
    color: #EA4335;
}

.auris {
    color: #f8b966cc;
}

.micro {
    color: rgb(98, 194, 178);
}


/*** Cabeza ***/

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

.barra-sup {
    padding-top: 1rem;
}

.barra-sup a img {
    width: 6em;
}

#navegacion-sup {
    display: flex;
}

#navegacion-sup ul li:not(:last-of-type) {
    margin-right: 1em;
}

.emergente {
    display: flex;
    flex-direction: column;
    position: absolute;
    min-width: 8em;
    background-color: #b9b5b59a;
    padding: .5em;
    right: 2em;
}

.emergente a {
    color: black;
    font-family: 'mitr', sans-serif;
}

#navegacion-inf {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    border-top: rgba(133, 132, 132, 0.39) solid .1px;
    display: flex;
    justify-content: space-around;
    background-color: rgb(255, 255, 255);
    padding: 0.5em 0;
    z-index: 9999;
}

#btn-menu {
    display: none;
}

.menu li {
    /*border-right: 1px solid rgb(8, 8, 8);*/
    padding: 1em;
    color: #ffffff;
    font-family: 'mitr', sans-serif;
    font-size: 1em;
    font-weight: 400;
}

.menu {
    position: absolute;
    background: #7a7979c5;
    top: 3rem;
    right: 3em;
    width: 9em;
    height: 5em;
    margin-top: -60%;
    transition: all .3s;
    z-index: 999;
}

.i-camp {
    font-size: 2em;
    margin-bottom: .5em;
}

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

.confi {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 0;
    top: 0;
    height: 100vh;
    width: 50%;
    z-index: 9990;
    padding-top: 5em;
    transition: all .5s ease;
}

.confi li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #ffffff;
    font-family: 'mitr', sans-serif;
    margin: 1em 0 0 1em;
}

.confi li a h3 {
    font-weight: 300;
    margin-left: .7em;
}


/* Uso de virgulilla como un "entonces" seleccionará al elemento .menu por estar precedido del primero y por compartir el padre */

#btn-menu:checked~.menu {
    margin: 0;
}


/* Estilos que se reemplazarán al hacer clic */

.on {
    background-color: rgba(255, 49, 66, 0.815);
    border-radius: 100%;
    width: .5rem;
    height: .5rem;
}

.off {
    background-color: rgba(255, 255, 255, 0);
}

.llamada_campana {
    position: absolute;
    right: 4.3em;
    top: 2em;
    z-index: 9999;
}

.campana {
    position: relative;
    margin-right: .7em;
}


/******--- CUERPO ----*****/


/****PERFILES****/

.logo-cabeza {
    display: block;
    max-width: 30%;
    margin: 4em auto 2em;
}

.perfiles>h1 {
    font-size: 2.5em;
    margin-bottom: 1.5em;
}

.perfiles ul li {
    text-align: center;
    padding: 2em;
    margin: 1em 1.5em 0 1.5em;
    font-size: 1.3em;
}

.pie-perfiles {
    margin: 7em auto 1em;
    color: darkgray;
}


/** Formularios **/

.titulo-form {
    text-align: center;
    margin-bottom: 2em;
}

.formulario {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.formulario i {
    font-size: 100px;
    color: #ffeacf;
    margin: .2em auto;
    text-align: left;
}

.formulario form a {
    text-align: center;
    margin: 3em;
    color: #504f4f;
}

.formulario form label {
    margin-top: 1.5em;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    text-align: left;
    padding-left: 6em;
    margin-bottom: 0.5em;
    margin-top: 0;
    font-size: 0.7em;
    font-family: 'mitr', sans-serif;
}

form input[type=text],
form input[type=email],
form input[type=password] {
    margin: 0 auto;
    border-radius: 1.5em;
    background-color: #e2e2e2c7;
    border-color: #e2e2e2c7;
    padding: 0.5em 1.5em;
    width: 60%;
}

.iniciar {
    display: flex;
    justify-content: center;
    margin-bottom: 1.2em;
}

.iniciar p {
    margin-right: 1em;
}

.ocon {
    text-align: center;
    margin-bottom: 2em;
}

.ocon p {
    margin-bottom: .8em;
}


/*** Cuerpo home ***/

.escuchando-u {
    background-image: url(../img/seguir-escuchando.jpg);
    background-position: center center;
    background-size: cover;
    height: 20vh;
    min-height: 8rem;
    text-align: center;
    margin: 1em 0 2em 0;
    padding-top: 2em;
    width: auto;
}

.escuchando-c {
    background-image: url(../img/Todos-los-fuegos-el-fuego.jpg);
    background-position: center center;
    background-size: cover;
    height: 20vh;
    min-height: 8rem;
    text-align: center;
    margin: 1em 0 2em 0;
    padding-top: 2em;
    width: auto;
}

.escuchando-i {
    background-image: url(../img/el-campito.jpg);
    background-position: center center;
    background-size: cover;
    height: 20vh;
    min-height: 8rem;
    text-align: center;
    margin: 1em 0 2em 0;
    padding-top: 2em;
    width: auto;
}

.escuchando>h2 {
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 400;
}

.escuchando>h4 {
    color: #ffffff;
    font-size: .8em;
    font-weight: 300;
}

.reproducir {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .5em;
}

.reproducir>.icon-ch {
    margin-left: 1em;
    color: #ffffff;
}

.reproducir>h3 {
    color: #ffffff;
    font-weight: 400;
    font-size: 1em;
}


/**---- MI LISTA ----**/

.contenedor-lista {
    width: 95%;
    margin: 0 auto;
}

.g-scrolling-carousel {
    margin-top: 1.5em;
}

.g-scrolling-carousel .items {
    padding: 1em 1em;
}

.g-scrolling-carousel .items img {
    display: inline-block;
    /* notice the comments between inline-block items */
    margin-right: 10px;
    width: 110px;
    height: 110px;
    line-height: 150px;
    box-shadow: 0 0 5px #000;
    text-align: center;
}

.items img {
    border-radius: 1em;
}


/*.items a {
    position: relative;
    ;
}

.items a p {
    /*position: absolute;
    top: 1.5em;
    left: .5em;
    color: #000;
    text-align: center;
}

.items a p span {
    font-weight: 500;
}*/

h1 {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    color: #515151;
}

.lista {
    display: flex;
    justify-content: space-between;
    margin: 2.5em auto .7em auto;
    align-items: center;
}

.lista h2 {
    font-weight: 500;
}

.lista a {
    color: rgb(67, 141, 201);
}

.lib-lista {
    display: flex;
}

.lib-lista article:not(:last-of-type) {
    margin-right: 1em;
}

.lib-lista figure a img {
    border-radius: 1em;
    max-width: 7em;
}

.btn-libro {
    border-radius: 1em;
    max-width: 7em;
}

figcaption {
    /*position: absolute;
    top: 5em;
    left: 1.5em;*/
    font-size: .6em;
    font-family: 'mitr', sans-serif;
    font-weight: 300;
    text-align: center;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
    .multi-item-carousel .carousel-inner>.item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        -webkit-transform: none!important;
        transform: none!important;
    }
}

.multi-item-carousel .carouse-control.left,
.multi-item-carousel .carouse-control.right {
    background-image: none;
}


/**---- RECOMENDADOS ----**/

.recomendados h2 {
    font-weight: 500;
    margin: 2em 0 1em 0;
}

.btn-recomendados {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border: solid 1px grey;
    padding: .4em;
    margin-top: 1em;
}

.btn-recomendados a img {
    max-width: 7em;
    border-radius: .3em;
}

.txt-recomendados {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 1em;
    padding: .1em .1em .5em .1em;
}

.txt-recomendados h3 {
    color: #000000;
    font-weight: 500;
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: 0.5em;
}

.txt-recomendados p {
    color: #000000;
    font-family: 'mitr', sans-serif;
    font-weight: 300;
    font-size: .7em;
    line-height: 1.3;
}

.btn-escuchar {
    padding: .2em 1em;
    font-size: .8em;
    color: grey;
    align-self: flex-end;
}

.btn-escuchar:hover {
    color: rgb(255, 255, 255);
}


/*.btn-escuchar {
    padding: .2em 1em;
    font-size: .8em;
    color: grey;
    position: relative;
    top: .7em;
    left: 13em;
}*/


/** inicio registro**/

.registro {
    background-image: url(../img/fondo.jpg);
    background-position: center center;
    background-size: cover;
    height: 96vh;
    min-height: 30rem;
}

.inicio img {
    width: 12em;
}

.inicio {
    display: block;
    text-align: center;
    margin: 3em auto;
    padding: 2.7em;
}

.inicio ul {
    margin-top: 2.5em;
}

.inicio p {
    margin: 2em 0;
    text-align: center;
}

main ul li a {
    color: rgb(65, 65, 65);
}

.boton-crema a:hover {
    color: rgb(255, 255, 255);
}

.boton-crema:hover {
    background-color: rgb(185, 185, 185);
}


/******---USUARIO y COLABORADOR---******/

.cabeza-perfil {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(143, 211, 186);
    padding: 6em 1.2em 3em 1.2em;
}

.cabeza-perfil img {
    border-radius: 100em;
    max-width: 8em;
}

.info-usuario {
    margin-left: 1em;
}

.cabeza-perfil h1 {
    font-size: 1.2em;
    text-align: left;
}

.lista-perfil {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-top: 2.5em;
}

.lista-opciones {
    display: flex;
    text-align: left;
    align-items: center;
    margin: .5em 4em;
}

.lista-opciones>.icon-ch {
    color: gray;
    font-size: 1.2em;
}

.lista-opciones>h3 {
    text-align: left;
    color: gray;
    font-weight: 500;
    font-size: 1em;
    margin-left: 2em;
}

.btn-perfil .lista-perfil>li {
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.btn-perfil .lista-perfil>li:first-of-type {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    padding-top: 1em;
    margin-top: 1em;
}

.menu>li ul li {
    margin-left: 12em;
    border-bottom: none;
}

.sub-menu>li {
    margin: 1em 0 0 8em;
    font-family: 'mitr', sans-serif;
    font-weight: 300;
    font-size: 1em;
}


/*****----TITULOS---*****/

.lib-port-cel {
    width: 100%;
    margin-top: 1em;
}

.lib-port-moni {
    display: none;
}

.descripcion-libro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    margin-top: 3em;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    padding-bottom: 2em;
    margin-bottom: 2em;
}

.tituli-autor>h2 {
    font-weight: 600;
}

.tituli-autor>img {
    width: 6em;
    margin-top: 0;
}

.tituli-autor span {
    color: gray;
}

.agregar-favorito {
    display: flex;
    align-items: center;
}

.acciones-libro a:last-of-type {
    margin-top: .7em;
}

.agregar-favorito p {
    margin-left: .5em;
    color: gray;
}

.sinopsis {
    margin-bottom: 1.5em;
}

.sinopsis>h2 {
    font-weight: 500;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.sinopsis>p {
    color: gray;
}

.btn-titulos {
    display: flex;
    justify-content: space-around;
}

.btn-titulos ul .boton {
    position: relative;
}

.tt-opciones {
    display: flex;
    text-align: center;
    align-items: center;
}

.tt-opciones>h3 {
    font-weight: 500;
    margin-right: .3em;
    font-size: 1em;
}

.sub-menu-tt li a {
    font-weight: 400;
    font-size: .9em;
}

.sub-menu-tt {
    margin-left: 1.5em;
}

.sub-menu-tt li {
    margin-top: .6em;
}

.sub-menu-tt li:last-of-type {
    margin-bottom: 3em;
}


/*****----REPRODUCTOR---*****/

.repro>h1 {
    font-size: 2em;
    margin: 0 auto 1.5em auto;
}

.reproductor {
    text-align: center;
}

.reproductor img {
    box-shadow: 0 0 .5em .3em silver;
    border-radius: .2em;
    width: 15em;
    margin-bottom: 1.5em;
}

.reproductor .txt-repro h4 {
    font-size: 1.5em;
    font-weight: 600;
}

.reproductor .txt-repro p {
    color: grey;
    font-weight: 500;
}

.reproductor .txt-repro p span {
    color: rgb(99, 98, 98);
}

.controlador-repro {
    background-color: #ffeacf;
    display: block;
    text-align: center;
    margin-top: 3em;
    padding-bottom: 1em;
}

.progreso-img img {
    justify-content: left;
    position: relative;
    top: -.5em;
}

.tiempo-repro {
    display: flex;
    justify-content: space-between;
    margin: 0 4em;
}

.progreso-numer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
}

.botonera {
    display: flex;
    align-items: center;
}

.botonera .btn-rpro {
    margin: 0 .3em;
}

.btn-rpro-pg {
    display: none;
}

.botonera .btn-rec {
    font-size: 1em;
    margin: 0 .3em;
    color: red;
}

.pasar-capitulos {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 14em;
    text-align: center;
    margin: 2.5em auto 1em auto;
    padding: 0.7em 1em;
}

.pasar-capitulos>h3 {
    font-size: 1.1em;
    font-weight: 500;
    color: rgb(100, 99, 99);
    margin: 0 1.5em;
}


/*****----BUSCADOR---*****/

.buscar>h1 {
    font-size: 2em;
    margin-top: 1em;
    color: rgb(70, 69, 69);
}

.buscador {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    background-color: rgba(238, 234, 234, 0.815);
    border-radius: .50em;
    color: gray;
    margin-top: 2em;
}

.buscador>h4 {
    font-weight: 400;
    font-size: 1em;
}

div.busca {
    height: 22px;
    margin-top: 1.5em;
}

input.busco {
    border: 0px;
    width: 240px;
    background: transparent;
    outline: none;
    bottom: 4px;
    padding: 2px;
}

.busco::placeholder {
    background-image: url(../img/icon/search.png);
    background-size: 1.8em;
    background-repeat: no-repeat;
    background-position: right center;
}

input.image_buscar {
    width: 20px;
    border: 0px;
    position: relative;
    top: -2.1em;
    left: 21em;
}

.genero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.genero>h3 {
    font-size: 1.6em;
    font-weight: 600;
    color: gray;
    margin: 2em 0 .5em 0;
    width: 100%;
}

.genero article {
    /*background-color: rgba(57, 55, 58, 0.1);*/
    margin: .5em 0;
    padding: 2em 1em;
    border-radius: .25em;
    text-align: center;
    width: calc(50% - .5em);
}

.genero article a {
    color: rgb(53, 52, 52);
}

.reciclaje {
    background-color: rgba(38, 168, 38, 0.74);
}

.c-ficcion {
    background-color: greenyellow;
}

.aventura {
    background-color: rgba(160, 122, 97, 0.781);
}

.terror {
    background-color: rgb(233, 68, 39);
}

.infantiles {
    background-color: rgb(159, 209, 218);
}

.misterio {
    background-color: rgba(30, 120, 255, 0.842);
}

.realista {
    background-color: rgb(238, 206, 137);
}

.hadas {
    background-color: rgb(174, 101, 211);
}

.policiales {
    background-color: rgb(216, 202, 3);
}

.maravillosos {
    background-color: rgb(228, 96, 158);
}

.fantasticos {
    background-color: rgb(248, 86, 86);
}

.otros {
    background-color: rgb(201, 201, 201);
}


/** Ayuda **/

.ayuda {
    background-color: rgb(36, 36, 36);
}

.ayuda-heder {
    display: flex;
    color: #ffffff;
    align-items: center;
    margin: 1em 0 3em 1em;
}

.ayuda-heder .icon-ayuda {
    font-size: 1.5em;
    margin-right: 1em;
    color: #ffffff;
}

.ayuda-heder>h4 {
    font-size: 2em;
    font-weight: 500;
    margin-left: .5em;
}

.opciones-ayuda {
    color: #ffffff;
    margin-left: 2em;
}

.opciones-ayuda p {
    font-size: 1em;
    margin: 1.5em 0;
}


/** Footer inicio **/

footer {
    display: block;
}

footer img {
    display: block;
    max-width: 35%;
    text-align: center;
    margin: 7em auto 0 auto;
}

footer p {
    background-color: rgb(136, 135, 135);
    text-align: center;
    margin: 2em auto;
    padding: 1em;
    color: #ffffff;
    font-weight: 300;
    font-size: .5em;
}


/* ----- favoritos ----- */
.catalogo-favoritos{
    width: 90%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    padding-top: 3em;
    padding-bottom: 5em;
}

.btn-favoritos{
    display: inline-block;
    align-items: center;
    text-align: center;
    margin-bottom: 3em;
    padding: 1em;
    
}

.favoritos p{
    font-size: 12px;
    color: #000000;
    text-align: center;
}

.favoritos h4{
    color: #000000;
    text-align: center;
    font-weight: 400;
}

.favoritos img{
    height: 200px;
}


/*

-----------------
    RESPONSIVE
-----------------

*/


/*
cuando la ventana del navegador mida
como mínimo 600px de ancho
*/

@media (min-width: 40em) {
    .llamada_campana {
        right: 5em;
    }
    .recomendados {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        width: 96%;
        margin: 0 auto;
    }
    .recomendados .btn-recomendados {
        width: calc(50% - 1em)
    }
    .genero article {
        padding: 3em 1em;
    }
    .genero article a h3 {
        font-size: 1.3em;
    }
}


/*
cuando la ventana del navegador mida
como mínimo 800px de ancho
*/

@media (min-width: 50em) {
    /*
    ------------------------
        -----CABEZA-----
    ------------------------

    */
    /* ----- MENUS SUP ----- */
    .barra-sup a img {
        width: 8em;
        margin-left: 3em;
    }
    .llamada_campana {
        right: 6.5em;
    }
    .icon {
        font-size: 1.8em;
    }
    .i-camp {
        font-size: 2.6em;
    }
    .confi {
        height: 34vh;
        width: 23%;
        padding-top: 4em;
    }
    .confi li a {
        margin: 1em 0 0 2.5em;
    }
    /*

    ------------------------
        -----CUERPO-----
    ------------------------

    */
    /* ----- INICIO ----- */
    .inicio>img {
        display: block;
        text-align: left;
    }
    .inicio>p {
        text-align: left;
        margin: 3em 40% 0 0;
        font-size: 1em;
    }
    .inicio>ul {
        display: flex;
    }
    .inicio>ul li {
        margin-right: .5em;
        margin-top: 2em;
    }
    /* ----- SOY ----- */
    .perfiles>ul {
        display: flex;
        justify-content: center;
    }
    .perfiles ul li a {
        display: flex;
        flex-direction: column;
        padding: 1em;
        margin: 1em;
    }
    .perfiles ul li a h4 {
        margin-top: 1em;
    }
    #usuario-soy {
        padding: 0 2.5em;
    }
    .contenido-princiapal {
        display: flex;
        flex-direction: row-reverse;
    }
    /* ----- HOME ----- */
    .escuchando {
        height: 45vh;
        width: 25vh;
        margin: 17em auto 2em 2em;
        padding: 7em 1em;
        border-radius: .3em;
    }
    .escuchando img {
        width: 10em;
    }
    .contenido-listas {
        max-width: 75%;
        margin-left: auto;
    }
    /*.recomendados {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 96%;
        margin: 0 auto;
    }*/
    .recomendados .contenedor-lista {
        margin: 0;
    }
    .recomendados .btn-recomendados {
        width: calc(50% - 1em)
    }
    .btn-recomendados {
        align-items: center;
        flex-direction: column;
    }
    .txt-recomendados {
        text-align: center;
        margin-left: 0;
        margin-top: 1em;
    }
    .btn-escuchar {
        padding: .5em 2em;
        align-self: center;
    }
    /* ----- TITULOS ----- */
    .titulos {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        border-bottom: solid 1px rgba(0, 0, 0, 0.2);
        margin: 2em auto 4em auto;
        padding-bottom: 3em;
    }
    .lib-port-cel {
        display: none;
    }
    .lib-port-moni {
        display: block;
        width: 40%;
    }
    .descripcion-libro {
        flex-direction: column;
        align-items: baseline;
        justify-content: flex-start;
        align-content: space-between;
        border-bottom: none;
        margin: 0;
        padding: 0;
    }
    .tituli-autor {
        margin: 2em 0 5em 0;
    }
    .sinopsis {
        width: 76%;
        margin-bottom: 5em;
    }
    .sinopsis h2 {
        font-size: 1.8em;
    }
    .sinopsis p {
        font-size: 1em;
        font-weight: 300;
    }
    .btn-titulos {
        justify-content: space-evenly;
    }
    /* ----- PERFILES ----- */
    .cabeza-perfil {
        justify-content: space-evenly;
        align-items: center;
        padding: 3em 1.2em 3em 1.2em;
        width: 70%;
        margin: 6em auto;
    }
    .info-usuario {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 50%;
    }
    .cabeza-perfil img {
        max-width: 50%;
    }
    .cabeza-perfil h1 {
        font-size: 1.8em;
        margin: 0;
        padding: 0;
    }
    .info-usuario p {
        font-size: 1em;
        font-weight: 400;
    }
    .lista-perfil {
        flex-direction: row;
        justify-content: center;
    }
    .btn-perfil .lista-perfil>li:first-of-type {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
    .btn-perfil .lista-perfil>li {
        border-bottom: none;
        padding-bottom: 4em;
        margin-bottom: 4em;
    }
    /* ----- BUSCADOR ----- */
    .genero article {
        padding: 3em 1em;
        width: calc(33.3% - .5em);
    }
    .genero article a h3 {
        font-size: 1.5em;
    }
    form input[type="text"],
    form input[type="email"],
    form input[type="password"] {
        width: 50%;
    }
    /* ----- REPRODUCTOR ----- */
    .progreso-img img {
        display: flex;
        margin-left: 4em;
        width: 25em;
    }
    .tiempo-repro {
        justify-content: left;
        margin: 0 3em;
    }
    .tiempo-repro p {
        margin-right: 32em;
    }
    .progreso-numer {
        flex-direction: row;
        justify-content: left;
        align-items: center;
        margin: 2em 0 2em 5em;
    }
    .botonera {
        margin-right: 6em;
    }
    .pasar-capitulos {
        margin: 0;
    }
    .btn-rpro-pg {
        display: flex;
    }
    .botonera .btn-rpro {
        margin: 0 .8em;
    }
    .icon-volumen {
        margin-left: 3em;
    }
    /*

    ---------------------
       ----- PIE -----
    ---------------------
    */
    footer img {
        max-width: 15%;
        margin: 12em auto 0 auto;
    }
}


/*
cuando la ventana del navegador mida
como mínimo 1200px de ancho
*/

@media (min-width: 75em) {
    /* ----- MENUS SUP ----- */
    #navegacion-inf {
        top: 0;
        left: 0;
        bottom: 0;
        right: 100%;
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 1.2em;
        padding-right: 3.2em;
        border-top: none;
    }
    #navegacion-inf a {
        margin-top: 3em;
    }
    .llamada_campana {
        right: 8em;
    }
    /*

    ------------------------
        -----CUERPO-----
    ------------------------

    */
    /* ----- HOME ----- */
    .escuchando {
        margin: 8em 3em 2em 2em;
        padding: 7em 1em;
    }
    .recomendados .btn-recomendados {
        width: calc(33.3% - 1em)
    }
    .cabeza-perfil {
        width: 50%;
    }
    .genero article {
        width: calc(25% - 1em);
    }
    .genero {
        width: 90%;
        margin: 0 auto;
    }
    form input[type="text"],
    form input[type="email"],
    form input[type="password"] {
        width: 50%;
    }
    .controlador-repro {
        width: 95%;
        margin-left: auto;
    }
    /*.titu {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .titu section {
        width: calc(33.3% - .5em);
    }*/
}