@import url('https://fonts.googleapis.com/css2?family=Smooch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Smooch&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Playfair+Display:ital@1&family=Smooch&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
/* 'Playfair Display', serif;
 font-family: 'Smooch', cursive; */

*{
    /* background-color: rgb(255, 245, 245); */ /* blanco */
 

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

.subtitulo{
    font-family: 'Dancing Script', cursive;
    font-size: 5vmin;
    color: rgb(254, 240, 255);
    margin-top: 0%;
    background-color: rgb(160, 60, 155);
    
}

body{
    background-color: rgb(250, 226, 236);
    margin: 0;
    scroll-behavior: smooth;
}

/* formato cabecera */

.cabecera{ 
    width: 100vw;
    min-height: 13vh;
    background-color:rgb(160, 60, 155);
    color: rgb(252, 221, 252);
    position: fixed;
    text-align: center;
    font-size: 3vmin;
    top: 0vh;
    font-family: 'Dancing Script', cursive;
    margin: 0;
    margin-left: 0%;
    z-index: 1;
    flex-direction: column;
    display: flex;
}

/* barra de navegacion */

.botonera{
    display: flex;
    justify-content: space-around;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    flex-wrap: wrap;
    padding: 5px;
    padding-right: 40px;
    padding-left: 20px;
    font-size: medium; 
  
    
}

/* formato pie de pag */

.pie{
    width: 100vw;
    height: 5vh;
    background-color: rgb(160, 60, 155);
    color: blanchedalmond;
    position: fixed;
    bottom: 0vh;
    text-align: center;
    font-size: 3vmin;
    font-family: 'Dancing Script', cursive;
    margin: 0;
}

/* contenido principal */

.contenido{

    width: 90vw;
    margin: auto;
    padding-top: 15vh;
    display: flex;
    flex-direction: column;
}

/* formato generico secciones */

.seccion{
    width: 100%;
    height: 200vh;
    padding: 0;
}

/* secciones individuales */

.presentacion{
    background-color: rgba(116, 0, 116, 0.418);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75vh;
}


.preguntas{
margin-top: 3%;
font-size: 2,5vmin;
line-height: 4,5vmin;
height: 206vh;
background-color: rgb(245, 185, 235);
padding-top: 13vh;
width: 100%;
height: 65%; 
}

.respuestas{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;

}
.cuadro{

    border-style:solid;
    border-color: rgb(248, 172, 235);
    background-color:rgba(255, 255, 255, 0.795);
    width: 19%;
    height: 70vh;
    font-size: 2vmin;
    text-align: center ;
    margin-bottom: 2vh;
}  

.cuadro img{
    width:100%;
}   

.cuadro:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.illia{
    background-color: rgb(245, 185, 235);
    border-top: 4vh solid rgb(250, 226, 236);;
    padding-top: 13vh; 
    color: rgb(253, 236, 236);
    height: auto;
    
}

.subtitulos {
  font-family: 'Dancing Script', cursive;
  font-size: 5vmin;
  color: rgb(254, 240, 255);
  margin-top: 0%;
  background-color: rgb(160, 60, 155);
}
.preferencias{
background-color: rgb(245, 185, 235);
border-top: 4vh solid rgb(250, 226, 236);;
padding-top: 13vh;
width: 100%;
height: 65%;

}


.futuro{
    background-color: rgb(245, 185, 235);
    border-top: 4vh solid rgb(250, 226, 236);;
    padding-top: 13vh; 
    padding-bottom: 8vh;
}

.respuesta{
background-color: transparent;
font-size: 3vmin;
text-align: center;
font-family: 'Dancing Script', cursive;
color: rgb(78, 23, 85);
}

*{ scroll-behavior: smooth;
}

/* Mostramos el collage */
.futuro{
    background-color:rgb(245, 185, 235);
    height: auto;
}

/* Ocultar o mostrar capas según el viewport */

.collage_v, .collage_h{ /* ambas clases */
    /* ocultamos ambas para después mostrar la que corresponda */
    display: none;

    width: 90%;
    margin: auto;
}

/*  Las imágenes dentro de las capas */
.collage_v img{
    width:100%;
}
.collage_h img{
    width: 100%;
}

/* Específicamente, mostrar la capa que corresponda */

/* Si el dispositivo es horizontal */
@media (orientation:landscape){
    /* en caso de ser, hace visible la capa */
    .collage_h{
        display: block;
    }
}

/* Si el dispositivo es vertical */
@media (orientation:portrait){
    /* en caso de ser, hace visible la capa */
    .collage_v{
        display: block;
    }
}


.pie{
    width: 100%;
    height: 6vh;
    position: fixed;
    bottom: 0vh;
    }

    
    .logos{
        display: flex;
        margin-left: 23%;
        margin-top: 0.4%;
        justify-content: space-around;
        width: 50%;
    }
    
    .logos img{
        width: 2vw;
        height: 2vw;
        
    }