:root {
    --purple: #C11AAA;
    --yellow: #E6F700;
    --orange: #FF8B00;
    --green: #00A78B;
    --blue: #43348A;
    --laroja: #E3032C;
    --betis: #008835;
}

@font-face {
    font-family: futura;
    src: url(/fonts/FuturaLT.woff);
}

@font-face {
    font-family: futuraB;
    src: url(/fonts/FuturaLT-Bold.woff);
}

@font-face {
    font-family: melvens;
    src: url(/fonts/Melvens.otf);
}

@font-face {
    font-family: antonioB;
    src: url(/fonts/Antonio-Bold.ttf);
}

@font-face {
    font-family: antonio;
    src: url(/fonts/Antonio-Regular.ttf);
}

.flex {
    display: flex;
}

.column {
    display: flex;
    flex-direction: column;
}

.melvens {
    font-family: melvens;
    text-transform: lowercase !important;
}

.orange {
    color: var(--orange);
}

.purple {
    color: var(--purple);
}

.yellow {
    color: var(--yellow);
}

.white {
    color: #fff;
}

.green {
    color: var(--green);
}

.blue {
    color: var(--blue);
}

body {
    margin: 0;
    font-family: futura;
    overflow-x: hidden;
}



header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100;
}

.antonio {
    font-family: antonio;
    text-transform: uppercase;
    letter-spacing: -0.75px;
    font-size: 1.5rem;

}

.adv {
    margin: 0.5rem 2rem;
    justify-content: center;
    background: var(--purple);
    border-radius: 0.5rem;
}

.adv p {
    color: #fff;
    margin: 0;
}

.header {
    justify-content: space-between;
    margin: 0.5rem 2rem;
    padding: 1rem;
    align-items: center;

}


.intro {
    position: relative;
    margin-left: 2rem;
    padding-top: 15vh;
    overflow: hidden;
}

.snack h1,
h3 {font-weight:400;
    margin: 0;
    text-transform: uppercase;
    font-size: 13rem;
    line-height: 90%;
    letter-spacing: -11px;
}

h3 {
    font-size: 11rem;
}

h3 .melvens {
    font-size: 18rem;
    font-weight: 500;
}

.snack .melvens {
    font-weight: 500;
    font-size: 22rem;
}

.intro .dados {
    position: absolute;

    width: 100vw;
}

.up {
    top: -50vh;
    right: -70vw;
}

.down {
    top: 35vh;
    right: -80vw;
}



article.manzana,
article.naranja,
article.arandano {
    background: var(--yellow);
    margin: 1rem;
    border-radius: 1rem;
    position: relative;
    align-items: center;
}

article.naranja {
    background: var(--orange);
}

article.arandano {
    background: var(--purple);
}

.sabores .name {
    text-transform: uppercase;
    font-size: 13rem;
    font-weight: 600;
    padding: 0rem 2rem;
    margin: 0;
}

.sabores .melvens {
    font-size: 21rem;
    font-weight: 400;
}

.paquete {
    width: 100%;
    height: 55vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paquete img {
    position: absolute;
    width: 25%;
}

img.packg {
    width: 55%;

}

.naranja img.packg {
    width: 70%;

}




.claims {

    justify-content: center;

}

.claims h2 {
    color: var(--green);
    font-size: 10vw;
    margin: 0;
    padding: 1.5rem;
    line-height: 96%;

}

.claims .flex {
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.claims a {
    background: var(--yellow);
    height: min-content;
    color: var(--blue);
    text-decoration: none;
    font-size: 5rem;
    width: 100%;
    padding: 0.5rem 3rem !important;
    border-radius: 100px;
    cursor: pointer;
}

.claims a:hover {
    background: var(--blue);
    color: #fff;
}

.claims a:hover path {

    stroke: #fff;
}

#stickers {
    position: absolute;
    right: 1rem;
}

@media screen and (orientation: portrait) {
    .flex {
        flex-direction: column;
    }

    header {
        width: 100vw;
        left: 0;
        top: 0;
        right: 0;
        z-index: 100;
    }

    .snack {
        bottom: 1rem;
    }

    .snack h1,
    h3 {
        margin: 0;
        text-transform: uppercase;
        font-size: 4rem;
        line-height: 90%;
        letter-spacing: -2px;
    }



    .snack .melvens {
        font-weight: 500;
        font-size: 6rem;
    }

    .intro {
        /* width: 100%; */
        /* height: 100vh; */
        padding: 1rem;
        padding-top: 40vh;
        overflow: hidden;
        /* padding: 1rem; */
        margin: 0;
    }


    .intro .dados {
        position: absolute;
        width: 150%;
    }

    .down {
        top: -10%;
        right: 0;
    }

    .up {
        top: -10%;
        left: 50%;
    }

    .sabores {
        max-width: 98vw;
        overflow: hidden;
    }


    article.manzana,
    article.naranja,
    article.arandano {
        background: var(--yellow);
        margin: 1rem;
        border-radius: 1rem;
        position: relative;
        align-items: center;
    }

    article.naranja {
        background: var(--orange);
    }

    article.arandano {
        background: var(--purple);
    }

    .sabores .name {
        text-transform: uppercase;
        font-size: 5rem;
        font-weight: 400;
        padding: 0rem 2rem;
        margin: 0;
        max-height: 98vw;
    }

    .sabores .melvens {
        font-size: 8rem;
        font-weight: 400;
    }

    .paquete {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .paquete img {
        position: static;
        width: 40%;
    }

    img.packg {
        width: 100%;

    }

    .naranja {
        flex-direction: column-reverse;
    }

    .naranja img.packg {
        width: 90%;

    }

    .claims {
        justify-content: center;
        max-width: 98%;
    }

    .claims h2 {
        color: var(--green);
        font-size: 4rem;
        margin: 0;
        /* padding: 1.5rem; */
        line-height: 96%;

    }

    .claims .flex {
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .button {
        max-width: 98vw;
        overflow: hidden;
        padding: 1rem 0 !important;
        align-items: flex-start;
        width: 100%;
        gap: 1rem;
        flex-direction: column-reverse;
    }

    .claims a {
        height: min-content;
        font-size: 2rem;
        text-align: left;
        max-width: max-content;
        flex-direction: row;
        align-items: flex-start;
        min-width: 70%!important;
    }

    .callto {
        align-items: flex-start;
        padding: 1rem;
        position: relative;
        max-width: 98vw;
    }

    h3 {
        font-size: 3.5rem;
    }

    h3 .melvens {
        font-size: 5.5rem;
        font-weight: 500;
    }

    .callto svg {
        width: 40px;
    }

    #stickers {
        position: absolute;
        right: 1rem;
        top: -50%;
        width: 150px;
    }
}