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

body{

    background:#F7F4EC;

    font-family:"Nunito",sans-serif;

    color:#222;

}

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

}

header img{

    width:80px;

}

.cerrar{

    text-decoration:none;

    color:#444;

    font-size:28px;

}

.contenedor{

    width:90%;

    max-width:430px;

    margin:auto;

    text-align:center;

    position:relative;

    min-height:75vh;

}

.cerebro{

    width:220px;

    margin-top:40px;

    margin-bottom:30px;

}

h1{

    font-family:"Fredoka",sans-serif;

    font-size:2rem;

    margin-bottom:18px;

}

.descripcion{

    color:#666;

    line-height:1.6;

    margin-bottom:45px;

}

.boton{

    display:inline-block;

    background:#EFC14C;

    color:#222;

    text-decoration:none;

    padding:15px 70px;

    border-radius:40px;

    font-weight:bold;

    transition:.25s;

}

.boton:hover{

    transform:translateY(-2px);

}

.aclaracion{

    margin-top:40px;

    font-size:.9rem;

    color:#666;

}

footer{

    text-align:center;

    padding:25px;

}

footer img{

    width:90px;

    margin-bottom:10px;

}

footer p{

    font-size:.75rem;

    color:#666;

}

/* MANCHAS */

.mancha{

    position:absolute;

    border-radius:50px;

    opacity:.8;

    z-index:-1;

}

.mancha1{

    width:90px;
    height:180px;

    background:#CFC2E6;

    left:-60px;

    top:70px;

    transform:rotate(30deg);

}

.mancha2{

    width:80px;
    height:170px;

    background:#F5C96C;

    right:-50px;

    top:150px;

    transform:rotate(-35deg);

}

.mancha3{

    width:110px;
    height:90px;

    background:#B9D39B;

    left:-40px;

    bottom:70px;

    transform:rotate(-25deg);

}

.mancha4{

    width:90px;
    height:90px;

    background:#F5B4C8;

    right:-30px;

    bottom:40px;

    transform:rotate(25deg);

}

@media(min-width:900px){

.contenedor{

    max-width:700px;

}

.cerebro{

    width:260px;

}

h1{

    font-size:2.5rem;

}

.descripcion{

    width:70%;

    margin:auto;

    margin-bottom:50px;

}

}
/* -------- PREGUNTAS -------- */

.volver{

    font-size:30px;

    text-decoration:none;

    color:#333;

}

.progreso{

    display:flex;

    justify-content:center;

    gap:10px;

    margin:20px 0 45px;

}

.progreso span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d6d6d6;

}

.progreso .activo{

    background:#efb6c7;

}

.emociones{

    display:flex;

    justify-content:space-between;

    margin:50px 0 15px;

}

.emoji{

    width:58px;

    height:58px;

    border-radius:50%;

    border:none;

    font-size:28px;

    cursor:pointer;

    transition:.25s;

    background:#fff;

    box-shadow:0 3px 8px rgba(0,0,0,.12);

}

.emoji:hover{

    transform:scale(1.15);

}

.etiquetas{

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:.85rem;

    margin-bottom:50px;

}

.botones{

    display:flex;

    justify-content:space-between;

    gap:20px;

}

.boton-secundario{

    flex:1;

    background:#222;

    color:white;

    text-decoration:none;

    padding:14px;

    border-radius:40px;

    text-align:center;

    font-weight:bold;

}

.botones .boton{

    flex:1;

    text-align:center;

}
.emociones{

    display:flex;
    justify-content:space-between;
    margin:50px 0 20px;

}

.cara{

    width:70px;
    height:70px;

    border:none;

    border-radius:50%;

    position:relative;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 2px 6px rgba(0,0,0,.08);

}

.cara:hover{

    transform:translateY(-5px) scale(1.08);

}

.cara:focus{

    outline:4px solid white;

    box-shadow:0 0 0 5px #517fe1;

}

.verde{
    background:#B8D9A8;
}

.lima{
    background:#D6E6B0;
}

.amarillo{
    background:#F6E7AE;
}

.rosa{
    background:#E8BCCB;
}

.violeta{
    background:#CDBBEA;
}

.ojo{

    width:7px;
    height:7px;

    background:#4B3D39;

    border-radius:50%;

    position:absolute;

    top:24px;

}

.izq{

    left:20px;

}

.der{

    right:20px;

}

.boca{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

}

/* 😄 */

.sonrisa{

    width:24px;
    height:12px;

    border-bottom:4px solid #4B3D39;

    border-radius:0 0 30px 30px;

    top:40px;

}

/* 🙂 */

.sonrisa-suave{

    width:20px;
    height:8px;

    border-bottom:3px solid #4B3D39;

    border-radius:0 0 20px 20px;

    top:42px;

}

/* 😐 */

.neutra{

    width:20px;
    height:3px;

    background:#4B3D39;

    top:44px;

}

/* 🙁 */

.triste{

    width:20px;
    height:10px;

    border-top:3px solid #4B3D39;

    border-radius:20px 20px 0 0;

    top:42px;

}

/* 😣 */

.muy-triste{

    width:24px;
    height:12px;

    border-top:4px solid #4B3D39;

    border-radius:30px 30px 0 0;

    top:40px;

}
/* ---------- RESULTADO ---------- */

.titulo-recursos{

    margin-top:50px;
    margin-bottom:25px;

    text-align:left;

    color:#517fe1;

    font-family:"Fredoka",sans-serif;

}

.recomendaciones{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:35px;

}

.recurso{

    display:flex;

    align-items:center;

    gap:18px;

    background:white;

    padding:15px;

    border-radius:20px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.recurso img{

    width:80px;

    height:80px;

    border-radius:16px;

    object-fit:cover;

}

.recurso h3{

    margin-bottom:8px;

    color:#517fe1;

    font-size:1.1rem;

    text-align:left;

}

.recurso p{

    font-size:.95rem;

    margin:0;

}