/*==============================
        CALM QUEST
        ESTILO PRINCIPAL
================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Nunito',sans-serif;
}

body{
    background:linear-gradient(135deg,#FFF8FC,#F4F0FF,#EAF8FF);
    color:#5E5673;
}

/*==============================
            HEADER
================================*/

header{
    width:100%;
    min-height:90px;
    background:#FFFFFFEE;
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 60px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:100;
}

.logo{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo img{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #B89DFF;
    background:#fff;
    padding:4px;
    box-shadow:0 6px 15px rgba(0,0,0,.12);
}

.logo div{
    display:flex;
    flex-direction:column;
}
nav{
    display:flex;
    gap:28px;
}

nav a{
    text-decoration:none;
    color:#7A7196;
    font-weight:700;
    transition:.3s;
}

nav a:hover{
    color:#B189FF;
}

/*==============================
            BANNER
================================*/

.banner{
    text-align:center;
    padding:70px 20px;
}

.banner h1{
    font-size:58px;
    color:#6E5FA6;
    margin-bottom:15px;
}

.banner p{
    font-size:21px;
    color:#80789B;
    max-width:700px;
    margin:auto;
    line-height:35px;
}

/*==============================
        SECCIÓN EMOCIONES
================================*/

.emociones{
    width:92%;
    margin:auto;
    background:white;
    border-radius:35px;
    padding:50px;
    box-shadow:0 15px 40px rgba(165,150,220,.18);
}

.emociones h2{
    text-align:center;
    margin-bottom:45px;
    color:#6E5FA6;
    font-size:34px;
}

/*==============================
            TARJETAS
================================*/

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

.card{
    border-radius:30px;
    padding:35px;
    text-align:center;
    transition:.35s;
    cursor:pointer;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
}

.card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 20px 35px rgba(0,0,0,.12);
}

.card span{
    font-size:78px;
    transition:.3s;
}

.card:hover span{
    transform:scale(1.18) rotate(-5deg);
}

.card h3{
    margin-top:18px;
    font-size:31px;
    color:#675A96;
}

.card p{
    margin-top:12px;
    font-size:17px;
    line-height:28px;
    color:#7E7896;
}

/*========== COLORES ==========*/

.ansiedad{
    background:#E9F3FF;
}

.culpa{
    background:#F5EDFF;
}

.enojo{
    background:#FFE8E5;
}

.envidia{
    background:#FFF4D9;
}

.estres{
    background:#FFF2E8;
}

.frustracion{
    background:#F0EBFF;
}

.miedo{
    background:#E8FAF4;
}

.tristeza{
    background:#EAF0FF;
}

.verguenza{
    background:#FFEAF5;
}
/*==============================
        COMENTARIO
================================*/

.comentario{
    width:92%;
    margin:45px auto;
    background:#FFFFFF;
    border-radius:35px;
    padding:45px;
    box-shadow:0 15px 40px rgba(165,150,220,.18);
}

.comentario h2{
    text-align:center;
    color:#6E5FA6;
    font-size:34px;
    margin-bottom:15px;
}

.mensaje{
    text-align:center;
    color:#8D87A6;
    font-size:18px;
    margin-bottom:30px;
    line-height:30px;
}

textarea{
    width:100%;
    height:190px;
    border:none;
    border-radius:25px;
    padding:25px;
    background:#FAF8FF;
    color:#6E5FA6;
    font-size:17px;
    resize:none;
    outline:none;
    box-shadow:0 0 0 2px #E9E1FF;
    transition:.3s;
}

textarea:focus{
    box-shadow:0 0 0 3px #B89CFF;
    background:white;
}

textarea::placeholder{
    color:#AAA2C2;
}

button{
    display:block;
    margin:35px auto 0;
    padding:16px 45px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#C4A7FF,#E7B7FF);
    color:white;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(196,167,255,.40);
}

/*==============================
            FOOTER
================================*/

footer{
    margin-top:60px;
    padding:35px;
    text-align:center;
    background:#F6F0FF;
}

footer h3{
    color:#8B72D8;
    font-size:28px;
    margin-bottom:10px;
}

footer p{
    color:#8E88A5;
    font-size:16px;
    max-width:700px;
    margin:auto;
    line-height:28px;
}

/*==============================
        ANIMACIONES
================================*/

.card,
button,
nav a{
    transition:all .3s ease;
}

.banner h1{
    animation:aparecer 1s ease;
}

@keyframes aparecer{

    from{
        opacity:0;
        transform:translateY(-25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*==============================
        RESPONSIVE
================================*/

@media(max-width:900px){

header{
    flex-direction:column;
    text-align:center;
    padding:25px;
}

nav{
    margin-top:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.banner{
    padding:50px 20px;
}

.banner h1{
    font-size:40px;
}

.banner p{
    font-size:18px;
    line-height:30px;
}

.emociones,
.comentario{
    width:95%;
    padding:25px;
}

.emociones h2,
.comentario h2{
    font-size:28px;
}

.cards{
    grid-template-columns:1fr;
}

.card{
    min-height:220px;
}

.card span{
    font-size:70px;
}

.card h3{
    font-size:28px;
}

button{
    width:100%;
}

}