@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Patrick+Hand&family=Patrick+Hand+SC&display=swap');


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

img{
    max-width: 100%;
}

body{
    font-family: sans-serif;
    margin: 0;
    color: white;
    background: url("../imagenes/fondo_mobile.webp") center center no-repeat fixed;
    background-size: cover;
}

.loader{
    display: flex;
    margin-top: 7em;
    padding: 2em;
    justify-content: center;
    filter: invert(100%);
}

.lectores{
    font-family: 'Nerko One', cursive;
    margin-block-start: -0.5em;
    margin-inline: 0em;
    margin-block-end: 0em;
    display: flex;
    justify-content: center;
    text-align: center;
}

.acufooter{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;   
}

.acumar_h4{
    display: block;
    font-family: 'Barlow', sans-serif;
    text-align: center;
    justify-content: center;
    filter: opacity(50%);
    font-size: 15px;
}

/* todo esto es la barra de progreso circular de la página principal */
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 9999;
}

.box{
    position: relative;
    width: 45%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #562da365;
    border-radius: 1em;
    border: 2px solid #562da3;
    margin-block: 1em;
    margin-inline: 1em;
}

.box .percent{
    position: relative;
    width: 100px;
    height: 100px;
}

.box .percent svg{
    position: relative;
    width: 100px;
    height: 100px;
}

.box .percent svg circle{
    width: 70px;
    height: 70px;
    fill: none;
    stroke-width: 10;
    stroke: black;
    transform: translate(5px,5px);
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    stroke-linecap: round;
}

.box .percent svg circle:nth-child(2){
    stroke-dashoffset: calc(260 - (260 * 70) / 100);
    stroke: rgb(7, 212, 0);
}

.box .percent svg circle:nth-child(1){
    stroke-dashoffset: 0;
    stroke: #1a1a1a;
}

.box .percent .number{
    position: absolute;
    top: 2px;
    right: 6px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.box .percent .number h4{
    font-size: 1.5em;
    font-family: 'Nerko One', cursive;
    font-weight: 400;
}

.box .percent .number h4 span{
    font-size: 1em;
    font-family: 'Nerko One', cursive;
    font-weight: 400;
}

.box h5{
    padding: 1em 0 0;
    color: rgb(255, 253, 133);
    font-family: 'Nerko One', cursive;
    font-weight: 400;
    font-size: 1em;
}

.box h6{
    padding: 1em 0 1.5em;
    color: rgb(255, 255, 255);
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
}

.box img{
    width: 4em;
    height: 4em;
    padding-top: 1em;
    align-self: flex-end;
}

/* todo esto es del cuento */
.bodypag1,
.bodypag2,
.bodypag3{
    background: url("../imagenes/fondo_mobile_pag1.webp") no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

.bodypag4,
.bodypag6{
    background: url("../imagenes/fondo_habitacion.webp") no-repeat center center fixed;
    background-size: cover;
}

.bodypag5{
    background: url("../imagenes/fondo_habitacion2.webp") no-repeat center center fixed;
    background-size: cover;
}

.caperucita{
    padding-block: 2em;
    padding-inline: 1em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 10em;
    position: fixed;
    z-index: 9999;
    background: #562da3; 
    background: -webkit-linear-gradient(to bottom, #562da3c2, #47238ad3, #8360c300);  
    background: linear-gradient(to bottom, #562da3c2, #47238ad3, #8360c300); 
}

.caperucita h1{
    color: hsl(0, 0%, 100%);
    font-size: 2.75em;
    font-weight: 400;
    margin-top: .5em;
    position: fixed;
    top: .7em; 
}

.x {
    background-color: #562da3;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: .25em;
    font-family: 'Nerko One', cursive;
    font-size: 2.5em;
    font-weight: 400;
    color: white;
    position: fixed;
    top: .3em;
    right: .3em;
}

p{
    font-family: 'Barlow', sans-serif;
    font-size: 1.25em;
    color: black;
    margin-block: .75em;
}

.dialogo{
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    padding-inline: .75em;
    padding-block: .75em;
    border-radius: .5em;
    background-color: white;
    margin-bottom: .75em;
}

.dialogo_caperucita{
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    padding-inline: .75em;
    padding-block: .75em;
    border-radius: .5em;
    background-color: lightgreen;
    margin-bottom: .75em;
}

.sig{
    font-family: 'Barlow', sans-serif;
    font-size: 1em;
    font-weight: bold;
    font-weight: 400;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #562da3;
    border-radius: 3em;
    position:fixed ;
    bottom: 0;
    right: 0;
    margin: 1em;
    padding-top: .25em;
    padding-bottom: .5em;
    padding-inline: 1.5em;
}

.ant{
    font-family: 'Barlow', sans-serif;
    font-size: 1em;
    font-weight: bold;
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #562da3;
    border-radius: 3em;
    position:fixed ;
    bottom: 0;
    left: 0;
    margin: 1em;
    padding-top: .25em;
    padding-bottom: .5em;
    padding-inline: 1.5em;
}

.mainpag6{
    position: relative;
    margin-bottom: 2em;
}

.mainpag6 > img{
    position: absolute;
    bottom: 0;
    right: 0;
    top: 95%;
    left: 3em;
    width: 250px;
    height: 250px;
}

.mainpag4{
    margin-bottom: 2em;
    margin-top: .5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainpag4 div p{
    margin: 0;
}

.mainpag4 > img{
    width: 245px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
}

.mainpag5{
    margin-bottom: 1.5em;
}

.mainpag1,
.mainpag2,
.mainpag3,
.mainpag4,
.mainpag5,
.mainpag6{
    margin-top: 9em;
}

 
/* todo esto es para el menú principal - navegacion por el sitio */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #562da3; 
background: -webkit-linear-gradient(to top, #562da3c2, #8360c300);  
background: linear-gradient(to top, #562da3c2, #47238ac2, #8360c300); 
padding-block: 2.5em 2.5em;
padding-inline: 2em;
}

nav ul{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1em;
}

nav ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav ul li a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


nav ul li a img{
    filter: invert(1);
   width: 2.5em;
   height: 2.5em;
}

.menu{
    font-family: 'Barlow', sans-serif;
    font-size: .85em;
    color: white;
    padding-top: .75em;
}

.catalejo{
    color: #00fff2;
}

.acumar{
    width: 4em;
    height: 4em;
    filter: invert(0);
}

.navfooter{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
/* hasta acá */

a{
    text-decoration: none;
    color: white;
}

li{
    list-style-type: none;
}


main{
    margin-top: 1.5em;
    margin-inline: 1.5em;
    margin-bottom: 2.5em;
    height: auto;
}

/* todo esto es para los planetas - pagina principal */
.p1{grid-area: p1;}
.p2{grid-area: p2;}
.p3{grid-area: p3;}
.p4{grid-area: p4;}
.p5{grid-area: p5;}
.p6{grid-area: p6;}
.p7{grid-area: p7;}
.p8{grid-area: p8;}
.p9{grid-area: p9;}


.niveles{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "p9 ."
                          ". p8"
                          "p7 ."
                          ". p6"
                          "p5 ."
                          ". p4"
                          "p3 ."
                          ". p2"
                          "p1 ."; 
}

.niveles li{
    padding-block: 1em;
}

.niveles li a{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.niveles li a div{
    display: flex;
    flex-direction: column;
}

.p2 a div,
.p4 a div,
.p6 a div,
.p8 a div{
    order: -1;
    text-align: right;
    padding-right: 1em;
}

.p1 a div,
.p3 a div,
.p5 a div,
.p7 a div,
.p9 a div{
    padding-left: 1em;
}

.niveles li a h6{
    font-family: 'Barlow', sans-serif;
    font-size: .85em;
    color: white;
}

.niveles_texto{
    font-family: 'Nerko One', cursive;
    font-weight: 400;
    font-size: 1em;
}

.p1 .niveles_texto,
.p2 .niveles_texto,
.p1  a div h6,
.p2  a div h6{
    color: rgb(255, 253, 133);
}

.niveles li a img{
    max-width: 4em;
    max-height: 4em;
}

.main_principal{
    margin-bottom: 9em;
}

/* botones volver, comenzar, etc */
.botonverde{
    background-color: #8a14ad;
    margin-top: .5em;
    margin-bottom: 1em;
    padding-block: .25em;
}

.botonrojo{
    border: 2px solid #8a14ad;
    padding-block: .2em;
}

.botonrojo,
.botonverde{
    border-radius: 2em;
    padding-inline: 1.5em;
    place-self: center;
    font-family: 'Nerko One', cursive;
    font-size: 1.25em;
    font-weight: 400;
}

.planeta2{
    margin-top: 2.5em;
    margin-bottom: .5em;
    width: 85%;
}

.main_planeta2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-block: 0;
}

.main_planeta2 a .botonrojo{
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_planeta2 a .botonverde{
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.contenedora_planeta2 h3{
    font-size: 1.5em;
    text-align: center;
}

h1,
h2,
h3{
    place-self: center;
}

h1,
h2{
    font-family: 'Nerko One', cursive;
    font-weight: 400;
}

h3{
    font-family: 'Patrick Hand', cursive;
    font-size: 2em;
    font-weight: 400;
    margin-block: 0.7em;
}

h1{
    padding-top: .25em;
    font-size: 3em;
}

.puntos{
    display: flex;
    justify-content:center;
    gap: .5em;
    align-items: center;
    margin-block: 1em;
}

.puntos > div{
    display: flex;
}

.puntos div img{
    filter: invert(1);
    width: 3em;
    height: 3em;
}

.completado{
    margin: 0%;
}

.puntos_obtenidos{
    background-color: transparent;
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    color: rgb(255, 253, 133);
    font-size: 1.5em;
}

.a1{grid-area: a1;}
.a2{grid-area: a2;}
.a3{grid-area: a3;}
.a4{grid-area: a4;}
.a5{grid-area: a5;}
.a6{grid-area: a6;}
.a7{grid-area: a7;}
.a8{grid-area: a8;}

.nav1{grid-area: nav1;}
.nav2{grid-area: nav2;}

.avatar{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a1 a2 a3 a4"
                        "a5 a6 a7 a8";
                        background-color: #5264e587;
                        padding: 0.7em;
                        border-radius: 0.8em;
                        width: 100%;
    gap: .5em;
}

.nave{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "nav1 nav2";
}

.fon1{grid-area: fon1;}
.fon2{grid-area: fon2;}
.fon3{grid-area: fon3;}

.nave{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "nav1 nav2";
    background-color: #5264e587;
    border-radius: 0.8em;
    padding: 0.7em;
    gap: 0.5em;
    width: 100%;
}

.nave li{
    justify-content: center;
    align-items: center;
}

.nave li img{
    width: 130px;
    height: 130px;
}

.fondo{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "fon1"
                        "fon2"
                        "fon3";
    background-color: #5264e587;
    padding: 0.7em;
    border-radius: 0.8em;
    gap: 0.5em;
    width: 100%;

}

.htienda{
    padding-block-start: 1.5em;
    padding-inline: 1.5em;
    display: block;
    position: relative;
}

.contenedora_tienda{
    display: flex;
    gap: 1.5em;
}

.tienda{
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: flex-start;
}

.htienda img{
    display:flex;
    max-width: 20%;
    filter: invert(1);
}

.tienda h3{
    font-size: 1.5em;
    margin: 0;
}

.textos{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
}

.textos h6{
    font-size: 1.25em;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
}

.textos h2{
    font-size: 1.75em;
    font-weight: 400;
}

.main_tienda{
    height: auto;
    margin-bottom: 7em;
}

.avatar1{ 
    background-color: #cce7f5;
    border-radius: 100%;
}

.nave1{
    background-color: #cce7f513;
    border-radius: 100%;
    place-self: center;
}

.main_avatar_tienda,
.main_naves_tienda{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main_avatar_tienda h1{
    font-size: 2.5em;
    margin-block: .5em;
}

/* Perfil */
.bloque1{
    display: flex;
    flex-direction: column;
    margin-block: 1em;
}

.bloque1 label{
    padding-bottom: .25em;
    font-family: 'Barlow', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}

.bloque1 input{
    border-radius: 1em;
    height: 1.5rem;
}

.avatar_perfil{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
}

.avatar_perfil img{
    width: 7em;
    height: 7em;
}

.avatar_perfil .botonverde{
    font-size: 1.25em;
    width: auto;
}

form h3{
    padding-bottom: .25em;
    font-family: 'Barlow', sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}

#enviar{
    border-radius: 2em;
    padding-inline: 1.5em;
    place-self: center;
    font-family: 'Nerko One', cursive;
    font-size: 1.85em;
    font-weight: 400;
    background-color: #8a14ad;
    color: white;
    display: flex;
}

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

/* Desafíos */
.titulos_desafios{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titulos_desafios h4{
    color: lightgreen;
}

.pl_desafio{
    display: flex;
    align-items: center;
    gap: .5em;
}

.pl_desafio img{
    width: 1.5em;
    height: 1.5em;
}

.pl_desafio h5{
    color: black;
    font-family: 'Patrick Hand', cursive;
}

.progress {
    height: 85px;
    width: 100%;
    border-radius: .5em;
    background: white; 
    margin-bottom: 15px;
    margin-top: 1.5em;
    margin-right: 1.5em;
    padding-inline: .5em;
    padding-block: .5em;
}
 
.progress-bar {
    height: 10%;
    background: lightgreen;
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: .5em;
    margin-bottom: .5em;
}

.progress-bar-grey{
    height: 10%;
    background: rgb(182, 182, 182);
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: .5em;
    margin-bottom: .5em;
}
 
.progress-bar-text {
    margin-left: 10px;
    font-weight: bold;
    font-family: 'Barlow', sans-serif;
    color: lightgreen;
}

.progress h3{
    font-size: 1.25em;
    color: black;
    margin: 0;
    padding-bottom: .25em;
}

.plyprogreso{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plyprogreso h5{
    color: black;
    font-family: 'Patrick Hand', cursive;
}

.diarios{
    margin-bottom: 2.75em;
}

/* Cuestionario */
.titulocuestionario{
    font-family: 'Nerko One', cursive;
    font-size: .75em;
    margin-block-start: 2em;
    margin-inline: 1.5em;
    margin-block-end: 1em;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
}

.pregunta{
    font-family: 'Patrick Hand', cursive;
    display: block;
    justify-content: center;
    text-align: center;
    margin-inline: 0.1em;
}

.r1{grid-area: r1;}
.r2{grid-area: r2;}
.r3{grid-area: r3;}
.r4{grid-area: r4;}

.elementos{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "r1"
                         "r2"
                         "r3"
                         "r4";
    gap: 0.5em;
}

.btn-index{
    background-color: #ffffff21;
    border-radius: 0.5em;
    padding: 0.5em;
    margin: 1em;
    
}

.descripcion{
    font-family: 'Barlow', sans-serif;
    font-size: 1em;
    font-weight: bold;
    justify-content: center;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.contenedora{
    margin: 1.5em;
}

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

.desafio_completo{
    font-size: 2.5em;
}

video{
    width: 100%;
    height: auto;
    margin-bottom: 1.5em;
}

.body_video{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: auto;
}

.body_video div p{
    margin-inline: 1em;
}

.titulo_video{
    text-align: center;
    padding-block: 1.5em;
}

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

.contenedora_video div p{
    background-color: rgba(255, 255, 255, 0.493);
    font-family: 'Patrick Hand', cursive;
    text-align: center;
    padding: 1em;
    border-radius: .5em;
}

.hvideo{
    display: flex;
    padding-inline: 2em;
}

.hvideo img{
    max-width: 30%;
    filter: invert(1);
}

@media (min-width: 30em){
    body{
        background: url("../imagenes/fondo_tablet.webp") center center no-repeat fixed;
        background-size: cover;
    }
    .contenedora_principal{
        width: min( 100%, 600px );
        margin-inline: auto;
    }

    .navfooter{
        padding-block: 3em;
    }

    nav ul li a img{
       width: 4em;
       height: 4em;
    }

    .acumar{
        width: 6.5em;
        height: 6.5em;
    }

    nav ul{
        gap: 2em;
    }

    .menu{
        font-size: 1.5em;
    }

    .main_principal{
        margin-bottom: 15em;
    }

    .box{
        margin-block: 2em;
        margin-inline: 2em;
    }
    
    .box .percent{
        width: 220px;
        height: 220px;
    }
    
    .box .percent svg{
        width: 220px;
        height: 220px;
    }
    
    .box .percent svg circle{
        width: 200px;
        height: 200px;
        fill: none;
        stroke-width: 15;
        stroke: black;
        transform: translate(67px,67px);
        stroke-dasharray: 630;
        stroke-dashoffset: 630;
        stroke-linecap: round;
    }

    .box .percent svg circle:nth-child(4){
        stroke-dashoffset: calc(630 - (630 * 70) / 100);
        stroke: rgb(7, 212, 0);
    }

    .box .percent svg circle:nth-child(3){
        stroke-dashoffset: 0;
        stroke: #1a1a1a;
    }
    
    .box .percent .number h4{
        font-size: 2.75em;
        font-family: 'Nerko One', cursive;
        font-weight: 400;
    }
    
    .box h5{
        padding: 1em 0 0;
        color: rgb(255, 253, 133);
        font-family: 'Nerko One', cursive;
        font-weight: 400;
        font-size: 2.25em;
    }
    
    .box h6{
        font-family: 'Barlow', sans-serif;
        font-size: 1.5em;
        font-weight: 400;
    }

    .box img{
        width: 6em;
        height: 6em;
    }

    .circulo80{
        display: none;
    }

    .niveles li{
        padding-block: 2em;
    }

    .niveles li a img{
        max-width: 8.25em;
        max-height: 8.25em;
    }

    .niveles li a h6{
        font-family: 'Barlow', sans-serif;
        font-size: 1.5em;
        font-weight: 400;
        color: white;
    }
    
    .niveles_texto{
        font-family: 'Nerko One', cursive;
        font-weight: 400;
        font-size: 1.89em;
    }

    main{
        margin-bottom: 12em;
        margin-top: 2.5em;
    }

    .planeta2{
        margin-top: 2.5em;
        margin-bottom: .5em;
        width: 65%;
    }

    .titulo_video{
        text-align: left;
        padding-block: .75em;
    }

    .hvideo img{
        max-width: 20%;
        filter: invert(1);
    }

    .hvideo{
        display: flex;
        gap: 2em;
        margin-inline: 4em;
    }

    .contenedora_video div p{
        font-size: 2em;
        margin-inline: 4em;
    }

    h1{
        padding-top: .25em;
        font-size: 5em;
    }

    h3{
        font-family: 'Patrick Hand', cursive;
        font-size: 3.5em;
        font-weight: 400;
        margin-top: 0.7em;
        margin-bottom: 1.5em;
    }

    .botonrojo,
    .botonverde{
       border-radius: 2em;
       padding-inline: 1.5em;
       place-self: center;
       font-family: 'Nerko One', cursive;
       font-size: 2.5em;
       font-weight: 400;
    }

    .botonverde{
        background-color: #8a14ad;
        margin-block: 0;
        width: 260px;
        padding-block: .25em;
    }
    
    .botonrojo{
        border: 2px solid #8a14ad;
        width: 258px;
        padding-block: .2em;
    }

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

    .bodypag1,
    .bodypag2,
    .bodypag3{
    background: url("../imagenes/fondo_tablet_pag1.webp") no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    }

    .bodypag4,
    .bodypag6{
    background: url("../imagenes/fondo_habitacion_tablet.webp") no-repeat center center fixed;
    background-size: cover;
    }

    .bodypag5{
    background: url("../imagenes/fondo_habitacion2_tablet.webp") no-repeat center center fixed;
    background-size: cover;
    }

   .caperucita{
    padding-block-start: 2em;
    padding-inline: 1em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 15em;
    position: fixed;
    z-index: 9999;
    }

    .caperucita h1{
    font-size: 5.25em;
    font-weight: 400;
    top: .5em; 
    padding: 0;
    margin-bottom: .5em;
    }

    .x {
    background-color: #562da3;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: .25em;
    font-family: 'Nerko One', cursive;
    font-size: 4em;
    font-weight: 400;
    color: white;
    position: fixed;
    top: .75em;
    right: .75em;
    }

    p{
        font-family: 'Barlow', sans-serif;
        font-size: 2em;
        color: black;
        margin-block: .75em;
    }
    
    .dialogo{
        font-family: 'Patrick Hand', cursive;
        font-weight: 400;
        padding-inline: .75em;
        padding-block: .75em;
        border-radius: .5em;
        background-color: white;
        margin-bottom: .75em;
    }
    
    .dialogo_caperucita{
        font-family: 'Patrick Hand', cursive;
        font-weight: 400;
        padding-inline: .75em;
        padding-block: .75em;
        border-radius: .5em;
        background-color: lightgreen;
        margin-bottom: .75em;
    }

    .sig{
    font-family: 'Barlow', sans-serif;
    font-size: 1.75em;
    font-weight: bold;
    font-weight: 400;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #562da3;
    border-radius: 3em;
    position:fixed ;
    bottom: 0;
    right: 0;
    margin: 1.5em;
    padding-top: .25em;
    padding-bottom: .5em;
    padding-inline: 1.5em;
    }

    .ant{
    font-family: 'Barlow', sans-serif;
    font-size: 1.75em;
    font-weight: bold;
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #562da3;
    border-radius: 3em;
    position:fixed ;
    bottom: 0;
    left: 0;
    margin: 1.5em;
    padding-top: .25em;
    padding-bottom: .5em;
    padding-inline: 1.5em;
    }

    .mainpag1{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    margin-bottom: 2em;
    margin-top: 2em;
    }

    .mainpag1 > img{
    width: 450px;
    height: 450px;
    }

    .mainpag2 > img{
    width: 500px;
    height: 500px;
    } 

    .mainpag2{
    height: auto;
    margin-top: 2em;
    margin-bottom: 8em;
    }

    .mainpag3{
    height: auto;
    }

    .mainpag6{
    position: relative;
    margin-bottom: .75em;
    }

    .mainpag6 > img{
    position: absolute;
    bottom: 0;
    right: 0;
    top: 88%;
    left: 3em;
    width: 500px;
    height: 500px;
    }

    .mainpag4{
    margin-bottom: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    }

   .mainpag4 > img{
    width: 500px;
    height: 500px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    }

    .mainpag1,
    .mainpag2,
    .mainpag3,
    .mainpag4,
    .mainpag5,
    .mainpag6{
    margin-top: 15em;
    }

    .mainpag5{
    margin-bottom: 1.5em;
    height: auto;
     }

    .puntos{
    display: flex;
    justify-content:center;
    gap: .5em;
    align-items: center;
    margin-block: 2.5em;
    }

   .puntos div img{
    filter: invert(1);
    width: 6em;
    height: 6em;
    }

   .puntos_obtenidos{
    background-color: transparent;
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    color: rgb(255, 253, 133);
    font-size: 3em;
    }

    .main_cuestionario{
    height: auto;
    margin-top: 1.5em;
    margin-bottom: 2.5em;
    }

   .elementos{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "r1 r2"
                         "r3 r4";
    gap: 0.5em;
   }

  .cuestionario{
    height: 100vh;
  }

  .titulocuestionario{
    margin: 0;
    padding-block: 2em;
  }

  .titulocuestionario h1{
    font-size: 6em;
  }

  .main_cuestionario h2{
    font-size: 2.5em;
  }

  .descripcion{
    font-size: 2em;
    font-weight: 400;
  }

  .tienda h3{
    font-size: 2.5em;
  }

  .textos h2{
    font-size: 3.25em;
  }

  .textos h6{
    font-size: 2em;
  }

  .nave li img{
    width: 100%;
    height: 100%;
    place-self: center;
  }

  .nave{
    gap: 1.5em;
    padding: 1.5em;
  }

  .fondo{
    gap: 1.5em;
    padding: 1.5em;
  }

  .fondo li img{
    width: 100%;
    height: 100%;
  }

  .main_tienda{
    margin-bottom: 15em;
  }

  .avatar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a1 a2"
                         "a3 a4"
                         "a5 a6"
                         "a7 a8";
                        background-color: #5264e587;
                        padding: 1.5em;
                        border-radius: 0.8em;
                        width: 100%;
                        gap: 1.5em;
   }

   .bloque1 label{
    padding-bottom: .25em;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 2em;
   }

   .bloque1 input{
    border-radius: 2em;
    height: 3rem;
  }

  .avatar_perfil{
    margin-bottom: 3em;
  }

  .avatar_perfil img{
    width: 15em;
    height: 15em;
  }

  .avatar_perfil .botonverde{
    font-size: 1.25em;
    width: auto;
  }

  form h3{
    padding-bottom: 1em;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 2em;
    margin: 0;
  }

  .avatar_perfil .botonverde{
    font-size: 2em;
    width: auto;
  }

  #enviar{
    border-radius: 2em;
    padding-inline: 1.5em;
    place-self: center;
    font-family: 'Nerko One', cursive;
    font-size: 3em;
    font-weight: 400;
    background-color: #8a14ad;
    color: white;
    display: flex;
  }

  .main_perfil{
    margin-bottom: 15em;
  }

  .htienda{
    padding-top: 2.5em;
  }

  .titulos_desafios h2{
    font-size: 3em;
    font-weight: 400;
  }

  .titulos_desafios h4{
    font-size: 1.75em;
  }


 .progress {
    height: 160px;
    width: 100%;
    border-radius: .5em;
    background: white; 
    margin-bottom: 15px;
    margin-top: 1.5em;
    margin-right: 1.5em;
    padding-inline: 1.5em;
    padding-block: .5em;
 }

 .progress-bar {
    height: 10%;
    background: lightgreen;
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: .5em;
    margin-bottom: .5em;
 }

  .progress-bar-grey{
    height: 10%;
    background: rgb(182, 182, 182);
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: .5em;
    margin-bottom: .5em;
  }
 
  .progress-bar-text {
    margin-left: 10px;
    font-weight: bold;
    font-family: 'Barlow', sans-serif;
    color: lightgreen;
  }

  .progress h3{
    font-size: 2.25em;
    color: black;
    margin: 0;
    padding-bottom: .25em;
  }

  .plyprogreso h5{
    font-size: 2em;
  }

  .progress-bar-text{
    font-size: 2em;
  }

  .pl_desafio img{
    width: 4em;
    height: 4em;
  }

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

@media (min-width: 60em){
    body{
        background: url("../imagenes/fondo_desktop.webp") center center no-repeat fixed;
        background-size: cover;
    }
    .contenedora_principal{
        width: min( 100%, 950px );
        margin-inline: auto;
    }

    nav ul li a img{
       width: 3em;
       height: 3em;
    }

    .acumar{
        width: 5em;
        height: 5em;
    }

    nav ul{
        gap: 2.5em;
    }

    .menu{
        font-size: 1.2em;
        font-weight: 400;
    }

    .box{
        position: relative;
        width: 20%;
        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #562da365;
        border-radius: 1em;
        border: 2px solid #562da3;
        margin-block: 1em;
        margin-inline: 1.5em;
    }
    
    .box .percent{
        position: relative;
        width: 100px;
        height: 100px;
        padding-top: 1.5em;
    }
    
    .box .percent svg{
        position: relative;
        width: 100px;
        height: 100px;
    }
    
    .box .percent svg circle{
        width: 70px;
        height: 70px;
        fill: none;
        stroke-width: 10;
        stroke: black;
        transform: translate(5px,5px);
        stroke-dasharray: 260;
        stroke-dashoffset: 260;
        stroke-linecap: round;
    }
    
    .box .percent svg circle:nth-child(2){
        stroke-dashoffset: calc(260 - (260 * 70) / 100);
        stroke: rgb(7, 212, 0);
    }
    
    .box .percent svg circle:nth-child(1){
        stroke-dashoffset: 0;
        stroke: #1a1a1a;
    }
    
    .box .percent .number{
        position: absolute;
        top: 20px;
        right: 6px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }
    
    .box .percent .number h4{
        font-size: 1.5em;
        font-family: 'Nerko One', cursive;
        font-weight: 400;
    }
    
    .box .percent .number h4 span{
        font-size: 1em;
        font-family: 'Nerko One', cursive;
        font-weight: 400;
    }
    
    .box h5{
        padding: 2em 0 0;
        color: rgb(255, 253, 133);
        font-family: 'Nerko One', cursive;
        font-weight: 400;
        font-size: 1.5em;
    }
    
    .box h6{
        padding: 1em 0 1.5em;
        color: rgb(255, 255, 255);
        font-family: 'Barlow', sans-serif;
        font-weight: 400;
        font-size: 1em;
    }

    .circulo200{
        display: none;
    }

    .circulo80{
        display: block;
    }

    .niveles{
        margin-inline: auto;
    }

    .niveles li a{
        gap: 1em;
        justify-content:center;
    }
    

    
    .niveles li a img{
        max-width: 8em;
        max-height: 8em;
    }

    .niveles li a h6{
        font-family: 'Barlow', sans-serif;
        font-size: 1em;
        font-weight: 400;
        color: white;
    }
    
    .niveles_texto{
        font-family: 'Nerko One', cursive;
        font-weight: 400;
        font-size: 1.5em;
    }

    .planeta2{
        margin-top: 2.5em;
        margin-bottom: .5em;
        width: 30%;
    }

    .main_planeta2{
        flex-direction: row;
        gap: 4em;
    }

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

    h1{
        padding-top: .25em;
        font-size: 3em;
    }

    h3{
        font-family: 'Patrick Hand', cursive;
        font-size: 2.5em;
        font-weight: 400;
        margin-top: 0.7em;
        margin-bottom: 1.5em;
    }

    .botonrojo,
    .botonverde{
       border-radius: 2em;
       padding-inline: 1.5em;
       place-self: center;
       font-family: 'Nerko One', cursive;
       font-size: 1.5em;
       font-weight: 400;
    }

    .botonverde{
        background-color: #8a14ad;
        margin-block: 0;
        width: 200px;
        padding-block: .25em;
    }
    
    .botonrojo{
        border: 2px solid #8a14ad;
        width: 198px;
        padding-block: .2em;
    }

  .bodypag1,
  .bodypag2,
  .bodypag3{
    background: url("../imagenes/fondo_desktop_pag1.webp") no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }

  .bodypag4,
  .bodypag6{
    background: url("../imagenes/fondo_habitacion_desk.webp") no-repeat center center fixed;
    background-size: cover;
  }

 .bodypag5{
    background: url("../imagenes/fondo_habitacion2_desk.webp") no-repeat center center fixed;
    background-size: cover;
 }

 .caperucita{
    padding-block-start: 1em;
    padding-inline: 1em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 15em;
 }

  .caperucita h1{
    font-size: 3.5em;
    font-weight: 400;
 }

 .x {
    background-color: #562da3;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: .25em;
    font-family: 'Nerko One', cursive;
    font-size: 3em;
    font-weight: 400;
    color: white;
    position: fixed;
    top: 1em;
    right: 1.5em;
 }

 .dialogo{
    background-color: white;
    margin-bottom: .75em;
    margin-right: 4em;
 }

 .dialogo_caperucita{
    background-color: lightgreen;
    margin-bottom: .75em;
    margin-left: 4em;
 }

 .sig{
    font-family: 'Barlow', sans-serif;
    font-size: 1em;
    font-weight: bold;
    font-weight: 400;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #562da3;
    border-radius: 3em;
    position:fixed ;
    bottom: 0;
    right: 0;
    margin: 4em;
    padding-top: .25em;
    padding-bottom: .5em;
    padding-inline: 1.5em;
 }

 .ant{
    font-family: 'Barlow', sans-serif;
    font-size: 1em;
    font-weight: bold;
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #562da3;
    border-radius: 3em;
    position:fixed ;
    bottom: 0;
    left: 0;
    margin: 4em;
    padding-top: .25em;
    padding-bottom: .5em;
    padding-inline: 1.5em;
 }

 .mainpag1,
 .mainpag2,
 .mainpag3,
 .mainpag4,
 .mainpag5,
 .mainpag6{
 margin-top: 25em;
 }

 .mainpag1{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: fit-content;
    margin-bottom: 2em;
 }

 .mainpag1 > img{
    width: 415px;
    height: 415px;
 }

 .mainpag2 > img{
    width: 400px;
    height: 400px;
 }

  .mainpag2{
    display: flex;
    align-items: flex-end;
    height: auto;
 }

 .mainpag2 div p{
    font-size: 1.15em;

 }

 .mainpag3{
    height: auto;
    display: flex;
    align-items: flex-end;
    margin-top: 20em;
    margin-bottom: 0;
 }

 .mainpag3 div p{
    font-size: 1.15em;
 }

 .mainpag3 > img{
    width: 400px;
    height: 400px;
 }

 .mainpag6{
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
 }

 .mainpag6 div p{
    font-size: 1.5em;
 }

 .mainpag6 > img{
    width: 400px;
    height: 400px;
 }

 .mainpag4{
    margin-bottom: 4em;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    margin-bottom: 0;
 }

 .mainpag4 > img{
    width: 450px;
    height: 450px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
 }

 .mainpag4 div p{
    font-size: 1.5em;
 }

 .mainpag5{
    margin-bottom: 1.5em;
    height: auto;
    display: flex;
    align-items: flex-end;
 }

 .mainpag5 > img{
    width: 450px;
    height: 450px;
 }

 .mainpag5 div p{
    font-size: 1em;
 }

 .puntos{
    display: flex;
    justify-content:center;
    gap: .5em;
    align-items: center;
    margin-block: 2.5em;
 }

 .puntos div img{
    filter: invert(1);
    width: 4em;
    height: 4em;
 }

 .puntos_obtenidos{
    background-color: transparent;
    font-family: 'Patrick Hand', cursive;
    font-weight: 400;
    color: rgb(255, 253, 133);
    font-size: 2em;
 }

 .main_cuestionario{
    margin-top: 1.5em;
    margin-bottom: 2.5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
 }

 .elementos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "r1 r2 r3 r4";
    gap: 0.5em;
 }

 .cuestionario{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    margin-block: auto;
 }

 .titulocuestionario{
    margin: 0;
    padding-block: 2em;
  }

 .titulocuestionario h1{
    font-size: 4em;
 }

 .main_cuestionario h2{
    font-size: 2.5em;
 }

 .descripcion{
    font-size: 1.5em;
    font-weight: 400;
 }

 .boton_regresar .botonverde{
    width: 170px;
    margin-block: 1.5em;
 }

 .tienda h3{
    font-size: 2.5em;
 }

 .textos h2{
    font-size: 3.25em;
  }

 .textos h6{
    font-size: 2em;
 }

 .nave li img{
    width: 100%;
    height: 100%;
    place-self: center;
 }

 .nave{
    gap: 1.5em;
    padding: 1.5em;
 }

 .fondo{
    gap: 1.5em;
    padding: 1.5em;
 }

 .fondo li img{
    width: 100%;
    height: 100%;
 }

 .main_tienda{
    margin-bottom: 15em;
 }

 .contenedora_tienda img{
    width: 6em;
    height: 6em;
 }

 .avatar{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "a1 a2 a3 a4 a5 a6 a7 a8";
                        background-color: #5264e587;
                        padding: 1.5em;
                        border-radius: 0.8em;
                        width: 100%;
                        gap: 1.5em;
 }

 .nave{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "nav1 nav2 nav4 nav4";
}

 .bloque1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
 }

 .bloque1 label{
    padding-bottom: .25em;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 1.25em;
 }

 .bloque1 input{
    border-radius: 2em;
    height: 2rem;
    width: 60%;
 }

 .avatar_perfil{
    margin-bottom: 3em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75em;
 }

 .avatar_perfil img{
    width: 10em;
    height: 10em;
 }

 .avatar_perfil .botonverde{
    font-size: .5em;
    width: 100px;
 }

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

 form h3{
    padding-bottom: 1em;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 2em;
    margin: 0;
 }

 .avatar_perfil .botonverde{
    font-size: 2em;
    width: auto;
 }

 #enviar{
    border-radius: 2em;
    padding-inline: 1.5em;
    place-self: center;
    font-family: 'Nerko One', cursive;
    font-size: 3em;
    font-weight: 400;
    background-color: #8a14ad;
    color: white;
    display: flex;
 }

 .main_perfil{
    margin-bottom: 8em;
 }

 .htienda{
    padding-top: 2.5em;
 }

 video{
    width: 100%;
    height: auto;
    margin-bottom: 1.5em;
    place-self: center;
 }

 .body_video{
    height: 100vh;
    margin-block: auto;
    margin-inline: 3em;
    flex-direction: row;
    justify-content: center;
 }

 .body_video div p{
    margin-inline: 2.75em;
    font-size: 1.5em;
 }

 .body_video div a h4{
    font-size: 1.5em;
 }

 .body_video div .botonverde{
    width: 160px;
 }

 .titulo_video{
    text-align: center;
    padding-block: .5em;
    font-size: 4em;
 }

 .hvideo img{
    max-width: 10%;
    filter: invert(1);
}

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

 .loader{
    display: flex;
    margin-top: 4em;
    padding: 2em;
    justify-content: center;
    align-items: center;
    filter: invert(100%);
  } 

}