@media screen and (max-width: 1366px) {
  header {
    padding: 1em 2em;
  }

  .nav-language{
    gap: 30px;
  }
  .navegation ul{
    gap: 15px;
  }
  .block-galeria {
    width: 90%;
  }
  .image-download img {
    width: 500px;
  }
  .personajes {
    background-size: cover;
    background-position: center center;
  }

  /* video section */
  .video-section {
    padding: 3em;
  }

  /* PERSONAJES */
  .block-personajes {
    gap: 50px;
    flex-wrap: wrap;
  }

  /* MUNDOS */
  .mundo-hanan,
  .mundo-kay,
  .mundo-uku {
    /*     width: auto;
    height: auto; */
    padding: 30px 40px;
  }
}

@media screen and (max-width: 1240px) {
  .mundos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 10%));
    justify-items: center;
    gap: 50px;
  }
  .qr img{
    width: 175px;
    display: block;
    margin: 0 auto;
}
.content-downloader .qr p{
  margin: 0;
}
}
@media screen and (max-width: 1150px) {
  .logo p {
    display: none;
  }
}

@media screen and (max-width: 1100px) {
  .content-comentarios{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 50px;
}
}
@media screen and (max-width: 1024px) {

  .language-button p{
    display: none;
  }
  .options{
    width: 92px;
  }
  .current-language {
    width: 92px;
 }
  .language-option{
    justify-content: center;
    gap: 0;
  }

  .gallery {
    background-size: cover;
  }


  /* home section */

  .content-home {
    grid-template-columns: 350px 380px;
  }
  h1 {
    background-size: 100% 100%;
  }
  .image-home {
    width: 350px;
  }
  .image-home img {
    width: 100%;
  }
  .shops {
    gap: 10px;
    justify-content: center;
  }
  .shops img {
    width: 160px;
  }

   /* DOWNLOAD SECTION */

   .download {
    background-size: cover;
    background-position: center;
}

   .content-downloader {
    flex-direction: column;
    gap: 50px;
  }

  .opciones-descarga{
    display: none;
  }

  .opciones-descarga2{
    width: 60%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-top: 0;
  }

  .title-download,
  .content-downloader p:nth-of-type(1) {
    width: 90%;
    margin: 0 auto;
  }

  .content-downloader p:nth-of-type(1) {
    margin-top: 30px;
  }
  .content-downloader .qr p{
    margin-top: 0;
  }

 /*  .stores {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .stores img {
    width: 200px;
  } */

  .image-download img {
    width: 90%;
    display: block;
    margin: 0 auto;
  }

  /* VIDEO SECTION */

  

  .video-section {
    background: url(/images/fondo-video.png);
    background-size: cover;
  }
  .video-section .video {
    width: 90%;
  }

  /* FOOTER */
  .content-footer {
    padding: 2em 0;
  }

  .contenido-footer {
    width: 70%;
  }

  .options{
    bottom: -311px;
  }

  .options.open{
    bottom: -311px;
  }

}

@media screen and (max-width: 950px) {

  /* GALERIA */
  .content-galeria {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    row-gap: 30px;
  }
  .block-galeria {
    width: 95%;
  }
  .content-galeria a img {
    width: 180px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* PERSONAJES */
  .title-personaje {
    width: 80%;
  }


}
@media screen and (max-width: 920px) {
  .base_mundos {
    width: 90%;
  }



 
}
@media screen and (max-width: 820px) {

  /* HEADER */

  .navegation li a {
    font-size: 1.1em;
  }

  /* PERSONAJES */
  .personajes {
    background: url(/images/fondo-personajes-vertical.jpg);
    background-size: cover;
    background-position: center;
    padding: 1em;
    position: relative;
  }

  .block-personajes {
    flex-direction: column;
    gap: 50px;
    margin: 2em 0;
  }
  .personaje span {
    width: 300px;
    font-size: 17px;
  }

  .select-color {
    position: absolute;
    right: 10px;
    top: 50%;
    width: auto;
  }

  .select-color h4 {
    display: none;
  }

  .selectores {
    flex-direction: column;
    gap: 20px;
  }

  .personajes h2 {
    padding: 10px 8px 10px 2em;
    font-size: 1.8em;
  }
}
@media screen and (max-width: 768px) {
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
  }
  .overlay.show {
    visibility: visible;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
  }
  .logo p {
    display: none;
  }
  header {
    background-size: cover;
    position: relative;
  }
  .menu-bar {
    display: block;
    cursor: url(/images/mano.png), auto;
  }
  .close-menu {
    display: none;
    cursor: url(/images/mano.png), auto;
  }


  .language-option{
    justify-content: center;
    gap: 0;
  }

  .navegation.open .close-menu {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .navegation {
    overflow: hidden;
    width: 0;
    transition: 300ms ease all;
    background: linear-gradient(180deg, #45e7f1 13.3%, #0d8bd1 100%);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    min-height: 100vh;
  }
  .navegation.open {
    width: 300px;
    transition: 300ms ease all;
    background: linear-gradient(180deg, #45e7f1 13.3%, #0d8bd1 100%);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    min-height: 100vh;
  }
  .navegation ul {
    flex-direction: column;
    justify-content: center;
    gap: 65px;
    align-items: flex-start;
    height: 100%;
  }

  .enlace.selected{
    border-bottom: none;
    background: rgba(256,256,256,0.7);
  }


  .navegation ul li {
    width: 100%;
  }
  .navegation ul li a {
    display: block;
    padding: 10px 30px;
    font-size: 26px;
  }
  header {
    padding: 1em;
  }

  /* HOME SECTION */
  .content-home {
    grid-template-columns: 85%;
    justify-items: center;
  }
  .shops img{
    width: 180px;
  }
  .caption-home {
    grid-row: 1/2;
  }
  .image-home {
    display: none;
  }
  .home-section {
    background-size: cover;
    padding: 1em 0;
  }

  /* video section */

  .video-section {
    padding: 3em 1em;
  }

  /* MUNDOS SECTION */

  .mundos {
    flex-direction: column;
    align-items: center;
    margin-top: 4em;
  }
  .close {
    position: absolute;
    right: 6px;
    top: -50px;
  }

  .mundo p {
    font-size: 1.8em;
  }


    /* Comentarios */


  .content-comentarios{
    display: grid;
    grid-template-columns: 90%;
    gap: 50px;
  }

  /* DONWLOAD SECTION */
  .download {
    background-size: cover;
    background-position: center;
  }

  .content-downloader {
    margin: 2em 0;
  }

.opciones-descarga2 {
    width: 100%;
    justify-content: space-around;
 }
  /* FOOTER */

  .content-footer {
    padding: 2em;
    background-size: cover;
    background-position: right;
  }

  .contenido-footer {
    width: 100%;
  }
}

@media screen and (max-width: 650px) {
  .contenido-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 30px;
  }
  .redes {
    grid-column: 1/2;
    grid-row: 2/3;
    width: 100%;
  }
  .logo-netdreams img {
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 500px) {
  .select-color img {
    display: block;
    width: 100%;
  }
  .mundo-hanan,
  .mundo-kay,
  .mundo-uku {
    width: 90%;
    height: auto;
  }

  /* PERSONAJES */


  .select-color {
    position: relative;
    width: 100%;
    margin: 50px auto;
    right: auto;
  }

  .select-color h4 {
    display: block;
    margin-left: -136px;
    font-size: 1.3em;
    top: -15px;
  }


  .selectores {
    flex-direction: row;
    gap: 0;
  }
}
@media screen and (max-width: 450px) {
  header {
    padding: 10px;
  }
  .navegation.open {
    width: 250px;
  }
  .logo img {
    width: 80px;
  }
  .navegation.open .close-menu {
    top: 10px;
    right: 10px;
  }

  .nav-language{
    gap: 15px;
  }
  .current-language {
    width: 82px;
    gap: 5px;
  }
  .options.open{
    width: 82px;
  }
  .menu-bar img{
    display: block;
    margin-top: 5px;
  }

  /* HOME SECTION */

  h1 {
    font-size: 2em;
  }
  .content-home {
    grid-template-columns: 95%;
  }
  .home-section {
    background-size: cover;
    padding-bottom: 2em;
  }
  .donwload-caption {
    margin: 0;
  }
  .shops {
    flex-direction: column;
    align-items: center;
  }
  .shops img {
    width: 210px;
  }

  /* VIDEO SECTION */
  .video-section h2 {
    font-size: 1.8em;
  }
  .line {
    width: 250px;
  }
  .video-section .video {
    width: 95%;
  }

  /* MUNDOS */
  /*   .mundo-hanan,
  .mundo-kay,
  .mundo-uku{
    grid-template-rows: 150px 260px;
    padding: 40px 10px;
} */
  .mundos-inka h2 {
    width: auto;
  }
  .mundos-inka h2,
  .mundos-inka .line {
    margin-left: 10px;
    font-size: 1.8em;
  }

  .mundos-inka .line {
    width: 90%;
  }


  .mundo-hanan,
  .mundo-kay,
  .mundo-uku {
    width: 350px;
    height: auto;
    padding: 25px 35px;
    padding-top: 35px;
  }
  .mundo-hanan p,
  .mundo-kay p,
  .mundo-uku p {
    margin-bottom: 20px;
  }

  /* PERSONAJES */

  .title-personaje{
    width: 100%;
  }

  .personajes h2 {
    padding: 8px;
    font-size: 1.5em;
    text-align: center;
  }

  /* GALLERY */
  .gallery h2 {
    width: 90%;
    font-size: 2em;
  }



  /* DOWNLOAD */
.opciones-descarga2{
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.stores{
  gap: 15px;
}


.qr img{
  width: 230px;
}
  /* FOOTER */

  .content-footer {
    padding: 1em;
  }
}

@media screen and (max-width: 375px) {
  /* HOME */
  .home-section {
    padding: 0 0 3em 0;
  }

  /* Personajes */
  .select-color{
    padding: 20px 10px 10px;
  }
  
  .mundo-hanan,
  .mundo-kay,
  .mundo-uku {
    width: 300px;
    padding: 35px 30px 25px 30px;
  }
}