/*fuentes a utilizar*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200&family=Quicksand:wght@600&display=swap');

/* diseño general */
*{
   background-color: #81ebe7;
   font-size: 1vmax;
   font-family: 'Quicksand', sans-serif;
}

.titulo{

    font-family: 'Mukta';
    font-size: 10vmin;
    color: black;
    background-color: inherit;

}


/*formato de cabecera*/
.cabecera{

    width: 100vw;
    height: 10vh;
    background-color: #81ebe7;
    color: rgb(0, 0, 0);
    position: fixed;
    top: 0vh;
    z-index: 100;

}

/*propiedadesde pie de página*/
.pie{

    width: 100vw;
    height: 10vh;
    background-color: #81ebe7;
    color: black;
    position: fixed;
    bottom: 0vh;
}
.redes{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

/* .contactos{

    width: max-content;
    padding: 2%;
   
} */

/*contenedor principal*/
.subtitulo{

background-color: inherit;

}

.contenido{

    width: 80vw;
    margin: auto;
    padding-top: 10vh;
    /*display flex*/
    display: flex;
    flex-direction: column;

}

/*clase genèrica*/
.seccion{

    width: 100%;
    min-height: 80vh;
    padding: 0;

}

/*cada una de las secciones*/
.presentacion{

    background-color: #3da19e;

    /*centrado del tìtulo*/
    display: flex;
    align-items: center;
    justify-content: center;

}

.illia{

    background-color: #318f8c;
    font-family: Arsenal;


}

.preguntas{

    background-color:#52ceca;

}

.cuestionario{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color:#52ceca;



}
.cuestionario img{
    width: 28%;
    height: auto;
    padding: 2%;
    background-color:#52ceca;

}


.preferencias{

    background-color: #12c0ba;
    /* para que aparezcan una a lado de la otra */
    display: flex;
    justify-content: baseline;

}
.izquierda{
    width: 30%;
    background-color: transparent;
    padding: 5%;
}

.derecha{
    width: 30%;
    background-color: transparent;
    padding: 5%;
}

.megusta{
    width: 100%;
}
.megusta img{
    width: 100%;
}
.nomegusta{
    width: 100%;
}
.nomegusta img{
    width: 100%;
}


.futuro{

    background-color: #1a9692;
    
}

.collage_h , .collage_v { /*clase de futuro*/

    display: none;
    width: 90%;
    margin: auto;

}

.collage_v img{

    width: 100%;
}

.collage_h img{

    width: 100%;

}

@media (orientation: landscape){

.collage_h{
    display: block;
    }

}

@media (orientation:portrait){

    .colllage_v{
        display: block;
    }
}