@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@font-face {
  font-family: "iconos25";
  src: url(../fuentes/iconos25.woff);
}

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

html{
  height: 100%;
  width: 100%;
}


body,
ul,
li {
  list-style: none;
}

img {

  border-radius: 0.5em;
}



/*variables*/
:root {
  --color-1: black;
  --color-2: tomato;
  --color-3: #020a29;
  --color-4: grey;
  --color-5: aqua;
  --color-fondos: hsl(0 0% 100%);
}

/* primero el celular */
/*body*/
body {
  font-family: sans-serif;
  color: var(--color-1);
  background-color: var (--color-fondos);
  min-height: 100vh;
  width: 100%;
  min-width: 25rem;
  margin-inline: auto;
}

/*imagenes*/
img {
  width: 100%;
}

/*textos*/
h1{
  margin: 1.5rem 0 1.5rem 0.1rem;
}

h2{
  margin: 1.5rem;
  font-size: 1.7em;
  color:var(--color-3);
  font-family: 'Poppins', sans-serif;

}

h3{
  margin:0.5rem 0.5rem 0rem 0.5rem;
  color: #020A29;
  font-family: 'Poppins', sans-serif;
  font-weight: medium;
}

/*vinculos*/
a {
  text-decoration: none;
  color: var(--color-1);
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  
}

/* header */
header {
  width: 100%;
  display: flex;
  background-color: aqua;
  padding: 2rem;
  text-align: center;
  box-sizing: border-box;
  justify-content: center;
  
}

/* el famoso header que se muestra en el footer */
nav{
  display: block;
}

#headerfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  background-color: aqua;
  text-align: center;
  box-sizing: border-box;
  justify-content: center;
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  min-width: 25rem;

}

#headerfooter ul {
display: flex;
flex-direction: row;
margin:0; 
align-items: center;
align-content: center;
justify-content: center;

}



#headerfooter .btnmenu li {

  margin: 0 6% 0 3%;
  font-size: 0.9rem;
}

#headerfooter .btnmenu li a{

color: rgb(5, 5, 31) ;
align-items: center;
align-content: center;
width: 0rem;
}

#headerfooter .btnmenu li a:hover{

  color: tomato ;
  }

#headerfooter .btnmenu li:nth-child(1) a::before {
    font-family: "iconos25";
    content: "x";
    margin: 0em;
    display: block;
}


#headerfooter .btnmenu li:nth-child(2) a::before {
  font-family: "iconos25";
  content: "T";
  margin: 0em;
  display: block;
}

#headerfooter .btnmenu li:nth-child(3) a::before {
  font-family: "iconos25";
  content: "F";
  margin: 0em;
  display: block;

}

#headerfooter .btnmenu li:nth-child(4) a::before {
  font-family: "iconos25";
  content: "P";
  margin:0em;
  display: block;
}




#logo {
    max-width: max-content;
    height: auto;
    width: 100%;
    max-width: 5rem;
  }

.logo h3{
   color: #020a29;
   }

.logo img {
    width: 100%;
  }
  
.menu {
  width: max-content;
}

/*boton reproducir*/
#btnreproducir img{
  width: 30%;
  margin:1rem;
  max-width: 5rem;
  }
  


/*seccion generos*/

.contenedora2{
margin: 1rem;
}

.generos ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .4em;
}

ul.busqueda {
  display: flex;
}

.generos ul li {
  margin: 0 0 .3em 0;
}

.generos ul li a {
  background-color: tomato;
  border-radius: .25em ;
  padding: .2em .5em;
  width: 8em;
  color:var(--color-fondos);
  font-family: 'Poppins', sans-serif;
 font-weight: normal;
}

.generos ul li a:hover{
  background-color: rgb(255, 167, 152);
}

/*grid*/

.contenedora3{
display:grid;
grid-template-rows: auto auto;
grid-template-columns: 50% 50%; 
grid-template-areas: "tendencia tendencia"
"ultimos ultimos"
"recomendados recomendados"; 
column-gap: 1rem;
margin: 0%;
width:100%;
}

/*Tendencia*/

.tendencia{
  background-color:rgba(252, 255, 78, 0.673);
  grid-area: tendencia;
  height:90%;
}

.tendencia h1{
font-size: 2rem;
color:var(--color-3);
font-family: 'Poppins', sans-serif;
}

 .tendencia h1::before {
  font-family: "iconos25";
  color: tomato;
  content:"T"

}

/*imagen principito*/

.tendencia img{
width: 80%;
margin:0 1.7rem 1.7rem 1.7rem;
border-radius: 10%;
}

.tendencia li{
  align-items: center;
  align-content: center;
}

/*info principito*/
.infoprincipito{
  color: black;
  font-size: 1.5rem;
  display: block;
  width:100%;
  margin-left: 2em;
  
  
}




.infoprincipito #btnreproducir img{
  position: relative;
  width: 100%;
  top:-6em;
  bottom: 25%;
  left:60%;
  z-index: 5;
  
  }

.tendencia div a{
  color:black;
  font-size: 1.5em;
}

.infoprincipito div.masinfo{
  margin-top:0.3em;
}

.infoprincipito div.masinfo a{
  font-size: 0.6em;
  background-color: tomato;
  color: white;
  font-weight: 400;
  padding: 0.3em;
  border-radius: 0.5em;


}

.infoprincipito div.masinfo a:hover{
  background-color: rgb(255, 167, 152); 
}






/*ultimos*/
.ultimos {
grid-area: ultimos;
background-color:rgba(246, 255, 123, 0.356);
margin-top: 3%;
margin-bottom: 3%;
}
.ultimos ul{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}

.ultimos h2{
  background-color:rgba(252, 255, 78, 0.673);;
  margin: 0;
  padding:1rem ;
  font-family: 'Poppins', sans-serif;

}

.ultimos ul li img{
width: 9rem;
}
.lista1{
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap:0.6em;
margin: 2rem;
}

/*recomendados*/
.recomendados{
  grid-area: recomendados;
  background-color:rgba(246, 255, 123, 0.356);
  margin-top: 3%;
}
.lista2 {
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap:0.6em;
  margin: 2rem;
  flex-wrap: wrap;
  
  }
  
  .recomendados ul li img{
  width: 9rem;
  }

  .recomendados h2{
   background-color:rgba(252, 255, 78, 0.673);;
    margin: 0;
    padding:1rem ;
  font-family: 'Poppins', sans-serif;

  }


.explorar h1 {
  color:var(--color-3);
  font-size: 2rem;
  font-family: 'Poppins', sans-serif;

}

.explorar h1::before {
  font-family: "iconos25";
  color: tomato;
  content: "R";
  margin: 0em 0.7em 1em 0.4em;
}

/* lista  */

ul.busqueda {
  display: flex;
  flex-direction: column;
}

/*REGISTRARSE */


/*registrarse */

.boton1 {
  margin-block-start: 2em;
  text-align: center;
}

.boton2{
  margin-block-start: 1em;
  margin-block-end: 5em;
  text-align: center;
}
.boton-miembro {
  
  

  color: #020A29;
  text-decoration: none;
  
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
  text-align: center;
 
}




.inicio-contenedora h6 {
  font-size: 2em;
  text-align: center;
  line-height: 20px;
  color: #FD4739;
  margin-block-start: 2em;
  margin-block-end: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

.inicio-contenedora img {
  max-width: 100%;
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}



.boton-registrate {
  text-align: center;
  padding-left: 3em;
  padding-right: 3em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: #FD4739;
  color: white;
  border-radius: 0.5em;
  min-width: 5em;
  margin-block-end: 10em;
  font-weight: normal;
 
  
  
  
}

.boton3 {
    margin-block-end: 2em;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    

    
}


.volver {

width: 1.5em;
margin: 2em;

    
}




/* index */


.fondo {
  background-color: #020A29;
  padding: 1em;

  

}


.volumen {

    max-width: 20%;
    display: flex;
    flex-direction: column;
    margin-block-end: 3em;
}

.chat {

    max-width: 20%;
    display: flex;
    flex-direction: column;
    margin-block-end: 3em;
    margin-top: 1em;
    
    

}

.libroindex {

    max-width: 20%;
    display: flex;
    flex-direction: column;
    margin-block-end: 3em;
    margin-top: 1em;
    
} 

.fondoiconos{
justify-content: center;
display: flex;
align-items: center;
}

.iconos {
  
  justify-content: space-between;
  text-align: center;
  padding-top: 2em;
  display: flex;
  flex-direction: row;
  max-width: 20em;
  
}

.iconos .iconosindex {

  max-width: 60%;
  text-align: center;
}

  



.iniciarsesion {
  text-align: center;
}

.registrarse1 {
  text-align: center;
  margin-block: 3em;
  background-color: #020A29;
  
}

.registrarse2 {

  text-align: center;
  margin-block: 1.5em;
  background-color: #020A29;
}

.registrate {

  padding-left: 3em;
  padding-right: 3em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: #FD4739;
  
  color: white;
  border-radius: 0.5em;
  text-align: center;
  min-width: 5em;
  margin-block-end: 5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  margin-bottom: 0.5em;

}

.registrarse {
    padding-left: 3em;
    padding-right: 3em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    background-color: white;
    
    color: white;
    border-radius: 0.5em;
    text-align: center;
    min-width: 5em;
    margin-block-end: 5em;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    margin-bottom: 0.5em;
  
}

.iniciar {
  padding-left: 2.5em;
  padding-right: 2.5em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: aqua;
  color: white;
  border-radius: 0.5em;
  text-align: center;
  min-width: 5em;
  margin-block-end: 2em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  margin-bottom: 0.5em;

}

.headervideo .logovideo a video {
  max-width: 25em;
  width:70%;
  border: 5px solid tomato;
}


/* Iniciar sesion */




.iniciarsesion {
  text-align: center;
  width: 650px;
  height: auto;
  background: #fff;
 
}

.correoelectronico {

  
 
  background-color: #dbdbdb;
  border-radius: 1em;
  height: 3em;
  width: 80%;
  padding: 1em;
  margin: 3em;
  max-width: 100%;
  border: none;
  font-family: 'Poppins', sans-serif;
  
  
}

.contra {

  background-color: #dbdbdb;
  border-radius: 1em;
  height: 3em;
  width: 100%;
  padding: 1em;
  margin-block-end: 3em;
  max-width: 80%;
  border: none;
  font-family: 'Poppins', sans-serif;
}

.repetir {
    background-color: #dbdbdb;
    border-radius: 1em;
    height: 3em;
    width: 80%;
    padding: 1em;
    margin-block-end: 3em;
    max-width: 100%;
    border: none;
    font-family: 'Poppins', sans-serif;


}

.inicio-contenedor h6 {
  font-size: 2em;
  text-align: center;
  line-height: 20px;
  color: #FD4739;
  margin-block-start: 1em;
  margin-block-end: 0.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;

}
.form {

    display: block;
    text-align: center;
}
.form-check {
  color: #FD4739;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  padding-left: 0em;
  
}


.form .correoelectronico {
  align-content: center;
  max-width: 60%;

}

.form .contra {
  max-width: 60%;



}

.form .repetir {

  max-width: 60%;

}
.boton-iniciarsesion {

  text-align: center;
  margin-block-start: 1em;
  
  padding-left: 3em;
  padding-right: 3em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: #020A29;
  color: #dbdbdb;
  border-radius: 0.5em;

  min-width: 5em;
  margin-block-end: 5em;

}

/*footer*/

footer {
  display: block;
  background-color: var(--color-3);
  color:var(--color-fondos);
  padding: 1em;
  text-align: center;
  margin: 0.3rem 0.3rem 3rem;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  position: relative;
  

}

footer p{
  font-size: 0.7rem;
}

footer img{
  width: 50%;
  padding: 1rem;
  max-width: 10rem;
  text-align: center;
}

/*TENDENCIAS*/
.contenedoratendencias ul li img{
  width: 11rem;
  margin: 1rem;
  justify-content: center;

}

.contenedoratendencias ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#puntuacion {
display: block;
width: 12rem;
}

#puntuacion p{
  color: rgb(254, 66, 33);
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
}

#puntuacion img{
  width: 5em;
  margin: 0;
}

.contenedoratendencias ul li .info a{
  font-size: 1.3rem;
  color: midnightblue; 
}

.contenedoratendencias ul li .info h3{
  font-size: 1rem;
  color: #020A29;
  margin-top: 1rem;
  margin-left: 0;
}

.contenedoratendencias ul li .info p{
  font-size: 1rem;
  color: black;



}

.contenedoratendencias ul li .info h1{
  background-color: tomato;
  color: whitesmoke;
  width: fit-content;
  padding: 0.5rem;
  border-radius: 0.9rem;
}

.contenedoratendencias ul #btnreproducir{
  margin: 0;
}

.contenedoratendencias .info{
  justify-content:flex-start;
  margin: 0;
  display: block;
  width: 12em;
}


/*INFO*/
/*INFO*/
div.volver{
  color: tomato;
}
div.volver p::before{
  font-family:"iconos25";
  content: "V";
  color: tomato;
  margin:0.5rem
}

.contenedorainfo ul li div.sinopsis{
  width: 15rem;
  font-size: 0.8rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.contenedorainfo img{
  width: 50%;
  margin: 1rem;
  justify-content: center;
  max-width: 20em;

}

.contenedorainfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}


.contenedorainfo ul li .info a{
  font-size: 1.3rem;
  color: midnightblue; 
}

.contenedorainfo ul li .info h3{
  font-size: 1rem;
  color: #020A29;
  margin-top: 1rem;
  margin-left: 0;
}

.contenedorainfo ul li .info p{
  font-size: 1rem;
  color: black;

}


.contenedorainfo .info{
  justify-content:flex-start;
  margin: 0;
  display: block;
  width: 15em;

}
.contenedorainfo #btnreproducirinfo img{
  position: relative;
  width: 15%;
  top: -4em;
  left: 13em;
  right: 0;
  bottom:0;
}

.contenedorainfo #btnreproducirinfo {
  margin: 0;
}

/*btn escuchar sinopsis*/
.contenedorainfo ul li a.btn-escuchar{
background-color: tomato;
color: white;
padding: 0.4em;
border-radius: 2rem;
}

/*btn audioforo*/


.contenedorainfo ul li a.btn-audioforo{
  background-color: var(--color-3);
  color: white;
  padding: 0.5em;
  padding-right: 1em;
  border-radius: 2rem; 
  font-size: 1rem;
  display: block;
  margin-top: 1rem;
  width: fit-content;


}

.contenedorainfo ul li a.btn-audioforo::before{
  font-family:"iconos25";
  content: "F";
  color: white;
  margin: 1rem;
}

.clasificacion{
margin-left: 20%;
margin-top: 2rem;
display: block;
width: 15rem;
margin-bottom: 5rem;
}

.clasificacion h3{
color: tomato;
font-size: 1rem;
margin: 0;
}

.clasificacion p{
  font-size: 0.8rem;
}

.lista3{
  display:flex;
  flex-direction: row;
  margin: 2rem;
  justify-content: center;

  }

  .lista3 li{
    margin: 0;
    display: block;
    width: 30%;
  }

.lista3 img{
  width: 80%;
  margin: 0;
  max-width:10em;
}

@media ( min-width:40em  ) {
  .generos ul {
    flex-direction: row;
    justify-content: center;
    gap: .3em;
    margin: 1rem;
  }

  .generos ul li a {
    padding: .5em 1em;
  }



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

  .explorar .contenedora2 h2{
    justify-content: center;
    align-items: center;
    margin: 0%;
    margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: bolder;

  }

  .tendencia{
    display: flex;
    flex-direction: column;
  }

  .tendencia img{
    justify-content: center;
    align-items: center;
  }

  #headerfooter{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    z-index: 9000;
  }

  #headerfooter{
    align-items: center;
    align-content: center;  
  }

  #headerfooter ul li a{
    margin: 0;
    align-items: center;
    align-content: center;
  }
  #headerfooter .btnmenu li {

    margin: 0 8% 0 8%;
    font-size: 1.2rem;
  }

  
  .generos ul {
    gap: 2em;
  }

  .lista2 {
    gap:1.5em;
    margin: 2rem;

  }

 .lista1{
  gap:1.5em;
  margin: 2rem;}

  .contenedoratendencias .info{
    grid-area: info;
  
    }
    .contenedoratendencias ul li img{
      grid-area: img;
    }
    .contenedoratendencias #puntuacion{
      grid-area: pun;
    }
     #btnreproducir{
      grid-area: btn;
      width: 30em;
    }
    .contenedoratendencias ul li{
      display: grid;
      grid-template-rows: auto auto;
    grid-template-columns: auto auto auto auto; 
    grid-template-areas: "img info info info"
    "img pun pun btn";
   justify-content: center;
    }
}







@media ( min-width:60em ) {

  #headerfooter .btnmenu li {

    margin: 0 15% 0 15%;
    font-size: 1.4rem;
  }

  .generos ul {
    gap: 3em;
  }

  .lista2 {
    gap:4em;
    margin: 4rem;
  }

  .lista1{
   gap:4em;
   margin: 4rem;
  }

 .recomendados ul li img{
  width: 14rem;
  }

 .ultimos ul li img{
    width: 14rem;
   }

   .infoprincipito #btnreproducir img{
    position: relative;
    width: 100%;
    top:-6em;
    bottom: 25%;
    left:100%;
    z-index: 5;
    
    }

}

/*Mi perfil*/

#miperfil {
  min-height: 100vh;
}






#perfil {
  display: flex;
  flex-direction: column;
  flex-direction: row;
  margin-left: 1.2em;
  max-width: 100%;
  
  
  margin-inline: auto;
}

.cambiar {
  color: #FD4739;
  font-family: 'Poppins',sans-serif;
  font-weight: normal;
  justify-content: flex-start;
  display: block;
}



#perfil img {
  max-width: 100%;
  margin-top: 2em;
  border-radius: 50%;
}

#datos h2 {
  text-align: left;
  width: 2em;
  font-size: 45px;
  margin-left: 0em;
  margin-block-end: 0em;
  
}

.mail {

  
  color: #020A29;
  margin-top: 1em;
  margin-right: 0em;
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 26px;
  padding: 0em;
  
}

#datos {
  margin-left: 2.2em;
}

.ubicacionn {
  
  color: #FD4739;
  padding: 0.5em;
  margin-top: -1.2em;
 
}

.location {
  color: #FD4739;

  

}



.contenedor-libro {

  max-width: 50%;
  height: 100%;
  border-radius: 2em;
  border-bottom-right-radius: 0;
  transform: translateX(20px);
  transition: all .7s ease;
}



.contenedor-libro img {

  
    height: 100%;
    
    
    border-radius: 2em;
    border-bottom-right-radius: 0;
    
    transform: translateX(20px);
    transition: all .7s ease;
}



.contenedor-libro h4 {
  color: #020A29;
  font-family: 'Poppins', sans-serif;
  font-size: 1.5em;
  margin-left: 1em;
}

.barra {
  
  max-width: 250px;

  

}

.escuchado {
  margin-left: 1em;
  color: #FD4739;
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
  font-size: 20px
  
}

.favorito {
  color: #020A29;
  font-family: 'Poppins', sans-serif;
  font-size: 4em;
  margin-left: 1em;
}

.contenedor-favoritos{

  margin-right: 1em;
}
.contenedor-favoritos nav ul {

  display: flex;
  justify-content: flex-start;

}

.contenedor-favoritos nav ul li img {

  padding-left: 1em;
  
  
}

.contenedor-favoritos nav ul li a {

padding-left: 1em;
}

input {

  font-family: 'Poppins', sans-serif;
  background-color: #FD4739;
  color: #020A29;
  border: none;
  border-radius: 1em;
  padding: 0.2em;
  margin-top: 1em;
}

.contenedor-favoritos nav ul li p {
text-align: center;
}

.sacar {

  display: inline-flex;
 color: #FD4739;
 max-width: 100%;
 margin-left: 1em;
  
}

/*Reproductor*/

.volver {

  color: #FD4739;
  background: none;
  border: none;
  font-size: 1.5em;
  display: inline-flex;
  margin-left: 0em;
  margin-top: 0.5em;

  
}

.atras {

  font-weight: normal;
  color: #FD4739;
  margin-left: 0.5em;
 

}

.titulo-reproductor {

  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-weight: 900;
  color: #FD4739;
  margin-top: 2em;
}

.contenedor-reproductor img {

  box-shadow: 0 0 0.5em 0.3em rgb(236, 236, 236);
  border-radius: 0.2em;
  width: 15em;
    margin-bottom: 1.5em;
  align-content: center;
  margin-top: 2em;





}

.contenedor-reproductor {

  text-align: center;
}

.textoreproductor h4 {

  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 130%;
}

.textoreproductor p {
  font-family: 'Poppins', sans-serif;
  font-size: 80%;

}
.progreso {

  text-align: center;
}
.progreso img {

  max-width: 80%;
  margin: 2em;
  
}

.numeros-progreso {

  
  margin-bottom: 2em;
  margin-top: 1em;
  display: inline-flex;
  text-align: center;
  
  

  
}

.botones1-progreso {

  color: #020A29;
  padding-right: 1em;
  margin-left: 2.5em;
  font-size: 170%;
  
}

.botones2-progreso {
  color: #020A29;
  padding-right: 1em;
  margin-left: 1em;
  font-size: 170%;
  

}

.botones3-progreso {

  color: #FD4739;
  padding-right: 1em;
  padding-left: 1em;
  font-size: 170%;
 
  
  
}

.botones4-progreso {
  color: #020A29;
  padding-right: 1em;
  margin-left: 1em;
  font-size: 170%;
  
  
}

.botones5-progreso {
  color: #020A29;
  padding-right: 1em;
  margin-left: 1em;
  font-size: 170%;
  


}

.barra-reproductora {

  text-align: center;
 }

/*Audioforo 1 */

#audioforo {

  background-color: #FD4739;
}

#audioforo1 h1 {

  color: #fff;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}

#audioforo1 h3 {

  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 120%;
  padding: 1em;
  
}

#audioforo1 i {

  color: aqua;
  
  
  font-size: 120%;
  padding-left: 0em;
  padding-right: 0.5em;
  
}

.contenedor-escuchados {

  width: 95%;
  
}

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

}

.g-scrolling-carousel .items {

  display: inline-flex;
 
 
}




.g-scrolling-carousel .items img {

 
 margin-right: 1.5em;
 width: 10em;
 margin-left: 1em;
 line-height: 150px;
    
 
}

.g-scrolling-carousel .items h5 {

  color: #020A29;
  background-color: #fff;
  border-radius: 1em;
  max-width: 55%;
  padding: 0.5em;
  margin-left: 1em;
  margin-top: 0.5em;
  
  
}

.items2 img {

  margin-right: 1.5em;
 width: 10em;
 margin-left: 1em;
 line-height: 150px;
 

}

.items2 h5 {
  color: #020A29;
  background-color: #fff;
  border-radius: 1em;
  max-width: 55%;
  padding: 0.5em;
  margin-left: 1em;
  margin-top: 0.5em;

}

.items2 {

  display: inline-flex;
}

/*Audioforo2*/
.contenedor-audio h1 {

  font-family: 'Poppins', sans-serif;
  color: #fff;
  margin-left: 1em;
  font-size: 200%;
}

.contenedor-audio i {

  color: aqua;
  margin-right: 0.3em;
}

.contenedor-datoslibro {

  display: flex;
  flex-direction: row;
  margin-left: 1em;
}

.imagenprincipito {

  max-width: 40%;
}

.datosprincipito {

  padding-left: 1em;
  padding-top: 1.5em;
}

.datosprincipito h3 {

  font-family: 'Poppins', sans-serif;
  font-weight: bolder;
  color: aqua;
  font-size: 170%;
}

.datosprincipito h6 {

  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: normal;
  padding: 0.9em;
  font-size: 80%;
}

.datosprincipito h5 {
  
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: bolder;
  padding-top: 1em;
  padding-left: 0.9em;

}

.datosprincipito img {

  max-width: 60%;
  padding-left: 0.9em;
  padding-top: 0.5em;
 
}

.nombre {

  display: flex;
  flex-direction: column;
  
}

.nombre img {

  max-width: 70%;
  padding-left: 5em;
  padding-top: 1em;
  
  
}

.imagenperfil img {

  max-width: 80%;
  padding-left: 1em;
  padding-top: 0%;
}

.imagenperfil2 img {

  max-width: 80%;
  padding-left: 1em;
  padding-top: 0%;
  

}

.imagenperfil2 {

  text-align: right;
  padding-right: 1em;
 
}

.romina img {

  max-width: 70%;
  padding-left: 5em;
  padding-top: 1em;
  
}

.romina {

  text-align: right;
  padding-right: 1em;
  
}

.grabaraudio h3 {
  color: #FD4739;
  font-size: 80%;
  background-color: #fff;
  border-radius: 1em;
  text-align: center;
  padding-left: 0.5em;
  padding-left: 0%;
}

.grabaraudio i {
  color: #020A29;
  font-size: 1em;
  padding-right: 0.5em;
}

.puntuacion h4 {

  color: #fff;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  padding-top: 1em;
}

.puntuacion img {

  max-width: 40%;
  padding-top: 0.5em;
  
}

.puntuacion {
  text-align: center;
  display: block;
  align-items: center;
}

.volverr {
  color: #fff;
  background: none;
  border: none;
  font-size: 1em;
  display: inline-flex;
  margin-left: 0em;
  margin-top: 0.5em;

}


.atrass {
  
  font-weight: normal;
  color: #fff;
  margin-left: 0.5em;
}

.contenedoraforo{
  max-width: 40em;
  margin: 3em;
}