@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');


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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Outfit", sans-serif;

    background-color: #f8f7ff;

    color: #202347;
}


/* =========================
   NAVEGACIÓN
========================= */

header {
    width: 100%;

    padding: 22px 7%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: white;

    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom: 1px solid #eeeef5;
}


.logo {
    font-size: 20px;

    font-weight: 900;

    letter-spacing: 2px;

    color: #292b55;
}


.logo span {
    color: #8d79d8;
}


nav {
    display: flex;

    gap: 30px;
}


nav a {
    text-decoration: none;

    color: #34365c;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;
}


nav a:hover {
    color: #8d79d8;
}



/* =========================
   INICIO
========================= */

.inicio {
    min-height: 90vh;

    padding: 80px 9%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    overflow: hidden;

    background:

    radial-gradient(
        circle at 85% 20%,
        #e2dbff 0,
        transparent 30%
    ),

    radial-gradient(
        circle at 10% 90%,
        #fff0a8 0,
        transparent 28%
    ),

    #f8f7ff;
}


.inicio-texto {
    width: 55%;
}


.etiqueta {
    color: #7663c7;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.inicio h1 {
    font-size: 105px;

    line-height: 0.9;

    font-weight: 900;

    letter-spacing: -5px;

    color: #292b55;

    margin-bottom: 25px;
}


.inicio h1 span {
    color: #ffbf00;
}


.inicio h2 {
    font-size: 42px;

    line-height: 1.1;

    font-weight: 800;

    color: #5f52a5;

    margin-bottom: 25px;
}


.descripcion {
    font-family: "Merriweather", serif;

    font-size: 16px;

    line-height: 1.8;

    color: #666984;

    max-width: 570px;

    margin-bottom: 30px;
}


.boton {
    display: inline-block;

    text-decoration: none;

    background-color: #ffbf00;

    color: #272944;

    padding: 16px 28px;

    border-radius: 50px;

    font-weight: 800;

    font-size: 14px;

    transition: 0.3s;
}


.boton:hover {
    transform: translateY(-5px);

    box-shadow:
        0 12px 25px rgba(255,191,0,0.3);
}



/* =========================
   ABEJA
========================= */

.abeja-container {
    width: 40%;

    height: 450px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}


.circulo {
    width: 350px;

    height: 350px;

    border-radius: 50%;

    background-color: #ffbf00;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow:
        15px 20px 0 #d8cffb;
}


.abeja {
    font-size: 145px;

    transform: rotate(-8deg);

    filter:
        drop-shadow(5px 8px 0 rgba(0,0,0,0.08));
}


.sticker {
    position: absolute;

    background-color: white;

    padding: 13px 20px;

    border-radius: 30px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(40,40,80,0.12);

    font-size: 13px;
}


.sticker1 {
    top: 60px;

    right: 20px;

    transform: rotate(8deg);

    color: #6653b2;
}


.sticker2 {
    bottom: 60px;

    left: 30px;

    transform: rotate(-7deg);

    color: #e6a900;
}



/* =========================
   PROBLEMA
========================= */

.problema {
    padding: 110px 9%;

    background-color: white;
}


.titulo-seccion {
    max-width: 750px;

    margin-bottom: 60px;
}


.titulo-seccion h2 {
    font-size: 48px;

    line-height: 1.1;

    color: #292b55;
}


.titulo-seccion h2 span {
    color: #806bd0;
}


.problema-contenido {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 80px;
}


.problema-texto {
    width: 55%;
}


.problema-texto p {
    font-family: "Merriweather", serif;

    line-height: 1.9;

    color: #666984;

    margin-bottom: 22px;
}


.problema-texto .frase {
    color: #292b55;

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

    font-size: 25px;
}


.problema-texto strong {
    color: #806bd0;
}


.estres-card {
    width: 350px;

    padding: 40px;

    background-color: #292b55;

    color: white;

    border-radius: 30px;

    transform: rotate(2deg);

    box-shadow:
        15px 15px 0 #e3dcff;
}


.cara {
    font-size: 55px;

    margin-bottom: 15px;
}


.estres-card h3 {
    font-size: 23px;

    margin-bottom: 25px;
}


.barra {
    height: 10px;

    background-color: #515475;

    border-radius: 20px;

    overflow: hidden;

    margin-bottom: 15px;
}


.progreso {
    width: 82%;

    height: 100%;

    background-color: #ffbf00;
}


.estres-card p {
    font-size: 13px;

    color: #c9c9df;
}



/* =========================
   BEESY
========================= */

.beesy {
    padding: 110px 9%;

    background-color: #eeeaff;
}


.beesy-header {
    text-align: center;

    max-width: 700px;

    margin: auto;

    margin-bottom: 60px;
}


.beesy-header h2 {
    font-size: 55px;

    color: #292b55;

    margin-bottom: 20px;
}


.beesy-header h2 span {
    color: #806bd0;
}


.beesy-header > p:last-child {
    color: #686b88;

    line-height: 1.7;
}


.beesy-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}


.beesy-card {
    min-height: 280px;

    padding: 40px;

    border-radius: 30px;

    position: relative;

    overflow: hidden;

    transition: 0.3s;
}


.beesy-card:hover {
    transform: translateY(-7px);
}


.beesy-card.grande {
    background-color: #292b55;

    color: white;
}


.beesy-card.amarillo {
    background-color: #ffbf00;

    color: #292b55;
}


.beesy-card.lila {
    background-color: white;

    color: #292b55;
}


.beesy-card.azul {
    background-color: #7766c5;

    color: white;
}


.numero {
    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2px;

    opacity: 0.6;

    margin-bottom: 45px;
}


.beesy-card h3 {
    font-size: 30px;

    margin-bottom: 15px;
}


.beesy-card p {
    max-width: 440px;

    line-height: 1.7;

    font-size: 15px;

    opacity: 0.8;
}


.decoracion,
.icono {
    position: absolute;

    right: 30px;

    bottom: 15px;

    font-size: 80px;

    opacity: 0.15;
}



/* =========================
   CÓMO FUNCIONA
========================= */

.como {
    padding: 110px 9%;

    background-color: white;
}


.centro {
    text-align: center;

    margin-left: auto;

    margin-right: auto;
}


.pasos {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;
}


.paso {
    width: 270px;

    text-align: center;
}


.paso-numero {
    width: 70px;

    height: 70px;

    margin: auto;

    margin-bottom: 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #ffbf00;

    color: #292b55;

    font-weight: 900;

    font-size: 18px;
}


.paso h3 {
    font-size: 25px;

    margin-bottom: 12px;

    color: #292b55;
}


.paso p {
    line-height: 1.7;

    color: #73758d;

    font-size: 14px;
}


.linea {
    width: 80px;

    height: 2px;

    background-color: #ddd6fa;
}



/* =========================
   BENEFICIOS
========================= */

.beneficios {
    padding: 110px 9%;

    display: flex;

    justify-content: space-between;

    gap: 80px;

    background-color: #292b55;

    color: white;
}


.beneficios-texto {
    width: 45%;
}


.beneficios-texto .etiqueta {
    color: #ffbf00;
}


.beneficios-texto h2 {
    font-size: 48px;

    line-height: 1.1;

    margin-bottom: 25px;
}


.beneficios-texto h2 span {
    color: #b7a9ff;
}


.beneficios-texto > p:last-child {
    color: #c8c9dd;

    line-height: 1.8;

    font-family: "Merriweather", serif;
}


.lista-beneficios {
    width: 45%;
}


.beneficio {
    display: flex;

    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid #4a4c70;
}


.beneficio span {
    width: 35px;

    height: 35px;

    border-radius: 50%;

    background-color: #ffbf00;

    color: #292b55;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;
}


.beneficio h3 {
    margin-bottom: 5px;

    font-size: 19px;
}


.beneficio p {
    color: #c4c5da;

    font-size: 14px;

    line-height: 1.5;
}



/* =========================
   NOSOTROS
========================= */

.nosotros {
    padding: 110px 9%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background-color: #f8f7ff;
}


.nosotros-contenido {
    width: 55%;
}


.nosotros h2 {
    font-size: 65px;

    line-height: 0.95;

    margin-bottom: 30px;

    color: #292b55;
}


.nosotros h2 span {
    color: #806bd0;
}


.nosotros-contenido > p:not(.etiqueta) {
    color: #686a84;

    line-height: 1.8;

    margin-bottom: 20px;

    max-width: 600px;
}


.logo-grande {
    font-size: 50px;

    font-weight: 900;

    letter-spacing: 4px;

    text-align: right;

    color: #ffbf00;
}


.logo-grande span {
    color: #806bd0;
}



/* =========================
   FINAL
========================= */

.final {
    padding: 100px 20px;

    text-align: center;

    background-color: #ffbf00;

    color: #292b55;
}


.abeja-final {
    font-size: 60px;

    margin-bottom: 20px;
}


.final h2 {
    font-size: 50px;

    font-weight: 900;

    margin-bottom: 15px;
}


.final p {
    letter-spacing: 4px;

    font-weight: 800;

    font-size: 13px;
}



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

footer {
    padding: 25px 9%;

    display: flex;

    justify-content: space-between;

    background-color: #17182f;

    color: white;

    font-size: 13px;
}

   

/* =========================
   CELULAR
========================= */
     /* =======================
           TIPS BEESY
        ======================= */

        .tips {

            padding: 105px 9%;

            background: #f8f7ff;
        }


        .tips-heading {

            max-width: 700px;

            margin: 0 auto 55px;

            text-align: center;
        }


        .tips-heading h2 {

            font-size: 50px;

            line-height: 1.1;

            color: #25264b;

            margin-bottom: 18px;
        }


        .tips-heading h2 span {

            color: #8066d4;
        }


        .tips-heading p:last-child {

            color: #686a86;

            line-height: 1.8;

            font-family: "Merriweather", serif;

            font-size: 14px;
        }


        .tips-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 25px;

            max-width: 1100px;

            margin: auto;
        }


        .tip-box {

            padding: 35px;

            min-height: 330px;

            border-radius: 30px;

            position: relative;

            overflow: hidden;

            transition: 0.3s;
        }


        .tip-box:hover {

            transform: translateY(-8px);

            box-shadow:
                0 18px 35px rgba(40,40,80,0.12);
        }


        .tip-box.anxiety {

            background: #292b55;

            color: white;
        }


        .tip-box.study {

            background: #ffbf00;

            color: #292b55;
        }


        .tip-box.organization {

            background: #8066d4;

            color: white;
        }


        .tip-box.rest {

            background: white;

            color: #292b55;

            border: 2px solid #eeeaff;
        }


        .tip-icon {

            font-size: 42px;

            margin-bottom: 18px;
        }


        .tip-number {

            font-size: 11px;

            font-weight: 900;

            letter-spacing: 2px;

            opacity: 0.65;

            margin-bottom: 12px;
        }


        .tip-box h3 {

            font-size: 26px;

            line-height: 1.15;

            margin-bottom: 15px;
        }


        .tip-box > p {

            font-size: 14px;

            line-height: 1.7;

            opacity: 0.82;

            max-width: 470px;
        }


        .tip-mini {

            margin-top: 25px;

            padding: 18px;

            border-radius: 18px;

            background: rgba(255,255,255,0.16);
        }


        .study .tip-mini {

            background: rgba(255,255,255,0.5);
        }


        .rest .tip-mini {

            background: #f1edff;
        }


        .tip-mini strong {

            display: block;

            margin-bottom: 7px;

            font-size: 14px;
        }


        .tip-mini p {

            font-size: 12px;

            line-height: 1.6;

            opacity: 0.78;
        }
@media (max-width: 850px) {

    header {
        flex-direction: column;

        gap: 20px;
    }


    nav {
        gap: 15px;

        flex-wrap: wrap;

        justify-content: center;
    }


    .inicio {
        flex-direction: column;

        text-align: center;

        padding-top: 70px;
    }


    .inicio-texto {
        width: 100%;
    }


    .inicio h1 {
        font-size: 75px;
    }


    .inicio h2 {
        font-size: 32px;
    }


    .descripcion {
        margin-left: auto;

        margin-right: auto;
    }


    .abeja-container {
        width: 100%;
    }


    .problema-contenido {
        flex-direction: column;
    }


    .problema-texto {
        width: 100%;
    }


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


    .pasos {
        flex-direction: column;
    }


    .linea {
        width: 2px;

        height: 40px;
    }


    .beneficios {
        flex-direction: column;
    }


    .beneficios-texto,
    .lista-beneficios {
        width: 100%;
    }


    .nosotros {
        flex-direction: column;

        align-items: flex-start;

        gap: 50px;
    }


    .nosotros-contenido {
        width: 100%;
    }


    .logo-grande {
        text-align: left;
    }


    footer {
        flex-direction: column;

        gap: 10px;

        text-align: center;
    }
            .tips-grid {

                grid-template-columns: 1fr;

            }


            .tips-heading h2 {

                font-size: 38px;

            }


            .tip-box {

                min-height: auto;

            }
}