/*-------GENERAL-------*/
* {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    margin-top: 6px;
}

main {
    position: relative;
    width: 390px;
    height: 772px;
}


main.recuperarcontra1{
    height: 488px;
}

main.acertastefondo{
    height: 678px;
}

main.felicitacionesfondo{
    height: 630px;
}

body {
    max-width: 24.374rem;
    margin: auto;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 25px;
    margin-right: 25px;
}

/*MENUUUUUUUU*/ 

header li,ul {
    text-decoration: none;
    list-style: none;
}

a {
    text-decoration: none;
}


.menu-mapa {
    position: absolute;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: 20px;
    /*background-color: #F1EDE3;*/
    background-color: #FBE70C;
    padding: 0px;
    height: 0px;
    overflow: hidden;
    transition: all 0.5s ease 0s;
    z-index: 9000;
    margin-left: 0px;
 }

.sonidoymusica_contenedora {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 15px;
}

.sonidoymusica1 {
   width: 100%;
   object-fit: contain;
   padding-top: 30px;

}

 .preguntayweb{
    display: flex;
    flex-direction: row;
    justify-content: center;
 }

 .li-menu {
    padding: 5px;
    margin: 8px;
    /*background-color: #FBE70C;*/
    background-color: #F1EDE3;
    border-radius: 20px;
 }


li.li-menu:hover,
 .focus-visible {
     background-color: hsl(0, 0%, 51%);
     color: hsl(0, 0%, 0%);
     outline: none;
 }



 .li-menu2 {
    padding: 0px;
    padding-left: 14px;
    padding-right: 14px;
    margin: 8px;
    /*background-color: #FBE70C;*/
    background-color: #F1EDE3;
    border-radius: 20px;
 }

 li.li-menu2:hover,
 .focus-visible {
     background-color: hsl(0, 0%, 51%);
     color: hsl(0, 0%, 0%);
     outline: none;
 }



 .pregunta {
    width: 15px;
    height: auto;
    align-items: center;
    padding-top: 10px;
    place-items: center;
 }

 .web {
    width: 35px;
    height: auto;
    align-items: center;
    padding-top: 4px;
    place-items: center;
 }


 .icono_menu_desplegable {
    position: relative;
    margin-left: 298px;
    margin-top: 15px;
    width: 49px;
    height: 49px;
    padding: 12px 8px;
    cursor: pointer;
 }

 .desplegable_linea {
    position: absolute;
    width: 34px;
    height: 3.5px;
    background-color :#F1EDE3;
    border-radius: 20px;
 }

.desplegable_linea1 {
    top: 15px;
 }

.desplegable_linea2 {
    top: 23px;
 }

.desplegable_linea3 {
    top: 32px;
 }


.rotar_linea1 {
    transform: translateY(8px) rotateZ(45deg);
    height: 5px;
}


.eliminar_linea2 { 
    width: 0px;
}


.rotar_linea3 {
    transform: translateY(-8px) rotateZ(-45deg);
        height: 5px;
}



.desplegar_menu {
    padding: 30px;
    padding-bottom: 340px;
    height: 10em;
    width: 320px;
    margin-left: 10px;
    margin-top: 220px;
 }




/*titulos y texto*/
h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 600;
}

h2 {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

ul.barrio{
    padding-left: 25px;
}

ul.barrioayuda{
    padding-left: 25px;
}

h3{
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    margin-top: 30px;
}

a {
    color: #000000;
    font-weight: 600;
}


/*-----------Descripcion/explicacon del juego-----------*/

.explicacion{
    padding: 30px;
    margin: 20px;
    text-align: center;
    position: absolute;
    top: 400px;
    font-size: 14px;
}





/*contenedor de estrellas, titulo, subtitulo de pregunta*/


.titulos {
    max-width: 24.374rem;
}

.imagenestrellas {
    display: block;
    margin: auto;
    margin-bottom: 10px;
}

.preguntabarrio {
    display: flex;
    flex-direction: column;
}
 
.consigna {
    max-width: 24.374rem;
    margin-left: 25px;
    margin-right: 25px;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 50px;
}

.barrio li {
    cursor: pointer;
    list-style: none; 
    margin-left: 0px;
    margin-right: 25px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
}

.ayudaincorrectas1 {
    cursor: default;
    list-style: none; 
    margin-left: 0px;
    margin-right: 35px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: beige;
    border-radius: 20px;
    text-align: center;
}


.barrio li:hover,
.focus-visible {
    background-color: hsl(0, 0%, 51%);
    color: hsl(0, 0%, 0%);
    outline: none;
}


/*BOTONES DE AYUDA Y SIGUIENTE*/
.botones {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 50px;
    justify-content: space-around;
    margin-left: 7px;
    margin-right: 7px;
}

/*AYUDA*/
.ayuda {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    place-items: center;
    margin: auto;
    margin-left: 19px;
    padding: 2px 20px;
    background-color: #FBE705;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    color: rgb(0, 0, 0);
    border-radius: 20px;
}

.ayuda:hover,
.focus-visible {
    background-color: rgb(162, 157, 147);
    color: hsl(0, 1%, 57%);
    outline: none;
    
}

.artistaayuda .ayuda{
    background-color: rgb(162, 157, 147);
    color: hsl(0, 1%, 57%);
    text-decoration: none;
    color: #000;

 


}

/*texto del ayuda*/
.ayuda1 {
    text-decoration: none;
    color: #000;
    margin-left: 10px;
    padding-bottom: 5px;
}

/*icono*/
.imagenluz {
    max-width: 100%;
    padding-bottom: 5px;
}

/*SIGUIENTE*/
.siguiente {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    place-items: center;
    margin: auto;
    margin-right: 19px;
    padding: 2px 20px;
    background-color: #FBE705;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    color: rgb(0, 0, 0);
    border-radius: 20px;
}

.siguiente:hover,
.focus-visible {
    background-color: hsl(0, 1%, 25%);
    color: hsl(0, 1%, 57%);
    outline: none;
}

/*texto del siguiente*/
.siguiente1 {
    text-decoration: none;
    color: #000;
    margin-left: 10px;
    padding-bottom: 5px;
}

/*icono*/
.imagenflechasig {
    max-width: 100%;
    padding-bottom: 5px;
}




/*-------INICIO-------*/
.fondoinicio {
    background-image: url(../imagenes/fondo.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
    margin-bottom: 30px;
}

/*logo grande*/
.logo {
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 36px;
    top: 202px;
}

/*boton de ingresar*/
.ingresa {
    position: absolute;
    width: 60px;
    height: 18px;
    left: 165px;
    top: 689 px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    text-decoration: none;
    /* identical to box height */
    text-align: center;
    color: #000000;
    position: absolute;
    width: 150px;
    height: 44px;
    padding-top: 13px;
    left: 120px;
    top: 676px;
    background: #FBE705;
    border-radius: 30px;
}

/*box usuario*/
.form_input1 {
    position: absolute;
    width: 300px;
    height: 44px;
    left: 45px;
    top: 553px;
    background: #F0EBE0;
    border-radius: 30px;
    text-align: center;
}

/*box contra*/
.form_input2 {
    position: absolute;
    width: 300px;
    height: 44px;
    left: 45px;
    top: 616px;
    background: #F0EBE0;
    border-radius: 30px;
    text-align: center;
}

/*usuario*/
.form_label1 {
    position: absolute;
    width: 155px;
    height: 18px;
    left: 118px;
    top: 569px;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    /* identical to box height */
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}

/*contra*/
.form_label2 {
    position: absolute;
    width: 72px;
    height: 18px;
    left: 159px;
    top: 629px;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    /* identical to box height */
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}



/*registrate*/
.form_link1 {
    position: absolute;
    width: 228px;
    height: 15px;
    left: 81px;
    top: 739px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;
    /* identical to box height */
    text-align: center;
    color: #000000;
}

/*olvide mi contra*/
.form_link2 {
    position: absolute;
    width: 227px;
    height: 15px;
    left: 81px;
    top: 758px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;
    /* identical to box height */
    text-align: center;
    color: #000000;
}




/*-------REGISTRATE-------*/
.fondoregistro {
    background-image: url(../imagenes/registratenueva.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}


.form-registrate {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 240px;
}

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

.input {
    width: 300px;
    height: 30px;
    background: #F0EBE0;
    border-radius: 30px;
    text-align: center;
}

.label {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    /* identical to box height */
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}

/*boton de registro*/
.registrate {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    text-decoration: none;
    /* identical to box height */
    text-align: center;
    margin-top: 30px;
    color: #000000;
    width: 150px;
    height: 44px;
    padding-top: 13px;
    background: #FBE705;
    border-radius: 30px;
}


/*-------RECUPERAR CONTRASENIA 1 -------*/
.fondorecuperarcontra{
background-image: url(../imagenes/recuperarcontrasenia1.png);
background-repeat: no-repeat;
background-image: fixed;
background-position: top;}


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

.form-registro2 {
    display: flex;
    flex-direction: column;
    margin-top: 300px;
}

/*-------RECUPERAR CONTRASENIA 2 -------*/

.fondorecuperarcontra{
    background-image: url(../imagenes/recuperarcontrasenia1.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;}
    
    
    .form-registrate3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .form-registro3 {
        display: flex;
        flex-direction: column;
        margin-top: 300px;
    }


/*-------RECUPERAR CONTRASENIA 3 -------*/

.fondorecuperarcontra{
    background-image: url(../imagenes/recuperarcontrasenia1.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;}
    
    
    .form-registrate3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 300px;

    }
    
    .form-registro3 {
        display: flex;
        flex-direction: column;
        margin: 0px;
        
    }




/*-------MAPA-------*/

.fondomapa {
    background-image: url(../imagenes/mapanuevo.png);
    background-repeat: no-repeat;
        /*!!!!!!!!!!*/
    background-image: fixed;
    background-position: top;
}


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

.nivel1 {
    padding-left: 11rem;
    margin-bottom: 50px;
    margin-top: 30px;
}

.uno {
    position: absolute;
    left: 150px;
    top: 120px;
}



.nivel2 {
    padding: 2rem;
    margin-bottom: 50px;
}

.dos {
    position: absolute;
    left: 160px;
    top: 326px;
}

.nivel3 {
    padding-left: 9rem;
}

.tres {
    position: absolute;
    left: 300px;
    top: 594px;
}

.botones-barrio {
    /*boton*/
    position: absolute;
    top: 125px;
    left: 150px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    text-decoration: none;
    /* identical to box height */
    text-align: center;
    margin-top: 30px;
    color: #000000;
    width: 150px;
    height: 44px;
    padding-top: 13px;
    background: #FBE705;
    border-radius: 30px;
}

.botones-barrio:hover,
.focus-visible {
    background-color: #A29D93;
    color: hsl(0, 0%, 0%);
    outline: none;
}



.botones-artista {
    /*boton*/
    position: absolute;
    top: 355px;
    left: 100px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    text-decoration: none;
    /* identical to box height */
    text-align: center;
    margin-top: 28px;
    color: #000000;
    width: 150px;
    height: 44px;
    padding-top: 13px;
    background: #FBE705;
    border-radius: 30px;
}

.botones-artista:hover,
.focus-visible {
    background-color: #A29D93;
    color: hsl(0, 0%, 0%);
    outline: none;
}

.botones-museo {
    /*boton*/
    position: absolute;
    top: 625px;
    left: 220px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    text-decoration: none;
    /* identical to box height */
    text-align: center;
    margin-top: 26px;
    color: #000000;
    width: 150px;
    height: 44px;
    padding-top: 13px;
    background: #FBE705;
    border-radius: 30px;
}


.botones-museo:hover,
.focus-visible {
    background-color: #A29D93;
    color: hsl(0, 0%, 0%);
    outline: none;
}

/*-------COMO JUEGO-------*/

.fondocomojuego {
    background-image: url(../imagenes/comojuego.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}

/*-------EL BARRIO-------*/

.fondobarrio {
    background-image: url(../imagenes/fondoelbarrio.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}

.logobarrio{
    position: relative;
    padding: 10px;
    margin-left: -334px;
    margin-right: 800px;

}

/*-------AYUDA BARRIO1-------*/

.ayudabarrio { 
    background-image: url(../imagenes/ayudabarrio1.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}

 /*las incorrectas que no se pueden tocar!!!!*/

.ayudaincorrectas {
    background-color: darkgray;
    cursor: default;
}

.barrioayuda li {
    cursor: default;
    list-style: none; 
    margin-left: 0px;
    margin-right: 25px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    text-align: center;
}



.barrioayuda li:hover,
.focus-visible {
    background-color: #A29D93;
    color: hsl(0, 0%, 0%);
    outline: none;
}


/*
li.barrioayuda  :hover
.focus-visible {
    background-color: #dfcc00;
    color: #A29D93;
    outline: none;
}
*/


li.ayudaincorrectas1 {
    background-color: #A29D93;
    cursor: default;
}




.botonlink {
    text-decoration: none;
    font-weight: 400;
}


/*-------CORRECTA-------*/

 /*boton de siguiente pregunta cuando apretar correcto*/

 .fondocorrecto {
    background-image: url(../imagenes/MODALCORRECTO.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
    
 }

.todolocorrecto {
    margin-top: 110px;
}

 .mases {
    margin-left: 80px;
 }

 .acertaste {
    color: #F1EEE5;
    font-size: 50px;
 }

 .siguientepregunta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: 110px;
    margin-right: 110px;
    margin-top: 10px;
    padding-top: 5px;
    background-color: #FBE705;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    color: rgb(0, 0, 0);
    border-radius: 20px;
}

.siguientepregunta:hover,
.focus-visible {
    background-color: #dfcc00;
    color: #A29D93;
    outline: none;
}


.siguiente:hover,
.focus-visible {
    background-color: #A29D93;
    color: #A29D93;
    outline: none;
}



.textocorrecto {
    margin: 40px;
    text-align: center;
    color: #F1EEE5;
}

/*-----BARRIO INCORRECTA------*/

.fondoincorrecto{
    background-image: url(../imagenes/MODALINCORRECTO.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;

}

.incorrecto{
    color: #F1EEE5;
    font-size: 46px;
    
}


.textoincorrecto{
    margin: 40px;
    text-align: center;
    color: #F1EEE5;
}


/*-------BARRIO INCORRECTA1-------*/

/*
.muymal {
    position: absolute;
    top: 300px;
    margin-left: 35px;
}

.respuestaincorrecta {
    background-color: #EF5135;
    cursor: default;
}

.respuestaincorrecta:hover {
    background-color: #EF5135;
    cursor: default;
}
*/

/*-------EL ARTISTA-------*/

.fondoartista {
    background-image: url(../imagenes/fondoartista.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}


/*-------EL MUSEO-------*/

.fondomuseo {
    background-image: url(../imagenes/fondomuseo.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}


/*-------ULTIMO MODAL-------*/
.fondomodal {
    background-image: url(../imagenes/ultimomodal.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}

.felicitaciones {
    color: #F1EEE5;
    margin-top: 25px;
}

.ultimomodal {
    margin-top: 150px;
}