@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
    user-select: none;
}


body {
    font-size: 16px;
    color: #fff;
    font-family: "Poppins", serif;
    font-optical-sizing: auto;
    overflow-x: hidden;
    accent-color: #FFBF00;
}

body h1,
body h2,
body h3,
body h4 {
    font-family: "Montserrat", sans-serif;
    line-height: 1;
    font-weight: 600;
}

body h1.round,
body h2.round,
body h3.round,
body h4.round {
    font-family: "Nunito", sans-serif;
    font-weight: 900;
    line-height: 1;
}



.container {
    max-width: 1200px;
    margin: 0 auto
}

.flex {
    clear: both;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly
}

.center {
    justify-content: center
}

.between {
    justify-content: space-between
}

.gap {
    gap: 30px;
}

.wrap {
    flex-wrap: wrap;
}

footer {
    background-color: #ff6000;
}

#footer-social {
    background: #ff6000;
}

#footer-social .container {
    position: relative
}

#footer-social ul {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 20px 0
}

#footer-social li span {
    padding: 8px;
    background-color: #fff;
    border-radius: 50%;
    color: #ff6000;
    transition: all .3s
}

#footer-social li span:hover {
    background-color: #1ea8ff;
    color: #fff
}


footer p {
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 0;
}



nav ul {
    display: flex;
    gap: 5px
}

nav li a {
    color: #511d00;
    transition: all .2s;
    font-family: "Poppins", serif;
    font-size: 1rem;
    font-weight: 600;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    background: #e8e83a;
}

nav li:hover a,
nav li a.ativo {
    background: #511d00;
    color: #e8e83a;
}

.uk-navbar-nav>li>a {
    color: #fff;
    padding: 0;
}

.uk-navbar-nav>li>a:hover {
    color: #fff;
    background: none;
}



#mobile-navbar img {
    margin-bottom: 40px
}

.uk-nav-default {
    font-size: 20px;
}

header {
    background: #ff7e00;
    padding: 30px 0;
}





#faq {
    background: #1ea8ff;
    padding: 50px 0;
    text-align: center;
}

#faq h2 {
    font-size: 1.4rem;
    color: #fff;
    text-wrap: balance;
    margin-bottom: 20px;
    font-weight: 600;
}


#faq li {
    background: #fff;
    padding: 20px 20px;
    border-radius: 10px;
    text-align: left;
}

#faq li h3 {
    color: #22395e;
    font-size: 1rem;
    font-weight: 600;
}

#faq li p {
    color: #22395e;
    font-size: 1rem;
    margin-bottom: 10px;
}

#faq li a {
    color: #ff6000;
}

#faq li .uk-accordion-title::before {
    background: url(../img/seta-faq.webp) center center no-repeat;
    background-size: contain;
    rotate: 180deg;
    transition: all .3s
}

#faq .uk-open .uk-accordion-title::before {
    rotate: 0deg
}

main {
    background: url(../img/bg-topo.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
    text-align: center;
}

main h1 {
    color: #fff;
    font-size: 2.4rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

main .familia {
    max-width: 600px;
}


main .titulo p {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

main .infos {
    text-align: left;
}

main .infos .titulo {
    max-width: 400px;
}

main .infos .titulo h2 {
    font-size: 2rem;
    color: #fff;
}

main .infos .texto {
    max-width: 600px;
}

.cta {
    background: #CC6801;
    background: linear-gradient(90deg, rgba(204, 104, 1, 1) 0%, rgba(240, 141, 38, 1) 73%, rgba(204, 104, 1, 1) 100%);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: 600;
    margin-top: 20px;
    border: solid 1px #ed8a24;
    transition: all 0.3s;
}

.cta:hover {
    background: linear-gradient(270deg, rgba(204, 104, 1, 1) 0%, rgba(240, 141, 38, 1) 73%, rgba(204, 104, 1, 1) 100%);
    color: #fff;
}

#faixa {
    background: url(../img/bg-faixa.webp) repeat-x;
    text-align: center;
    height: 50px;
    animation: faixa 1s linear infinite;
}

@keyframes faixa {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -84px 0;
    }
}

#faixa h2 {
    background: #FF7E00;
    background: linear-gradient(90deg, rgba(255, 126, 0, 1) 0%, rgba(255, 156, 0, 1) 27%, rgba(255, 126, 0, 1) 100%);
    display: inline-block;
    padding: 18px 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 0.8rem;
    scale: 1.3;
    text-transform: uppercase;
}

#perfil {
    background: #e21f88 url(../img/bg-rosa.webp) center bottom repeat-x;
    padding: 50px 0;
    text-align: center;
}

#perfil h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 50px;
}

#perfil h2 strong {
    color: #e8e83a;
}

#perfil .texto h3 {
    font-size: 2rem;
    color: #e8e83a;
    margin-bottom: 20px;
}

.perfil {
    margin-bottom: 50px;
}

.perfil:nth-child(odd) {
    flex-direction: row-reverse;
}

.perfil .texto {
    max-width: 400px;
    text-align: left;
}


#top3 {
    background: #ff7e00 url(../img/bg-laranja.webp) center top repeat-x;
    padding: 50px 0;
    text-align: center;
}

#top3 h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#top3 h2 strong {
    color: #e8e83a;
    font-size: 2.4rem;
}

#top3 h3 {
    font-size: 1.2rem;
    color: #b7005b;
    margin-bottom: 20px;
}

.desejos {
    align-items: stretch;
}

.desejo {
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.desejo .produto {
    height: 150px;
    position: relative;
    z-index: 2;
}

.desejo .box {
    flex-grow: 1;
    background: #fff;
    padding: 80px 20px 20px;
    border-radius: 20px;
    translate: 0 -60px;
    position: relative;
}

.desejo::before {
    position: absolute;
    left: -30px;
    top: 30px;
    z-index: 5;
    display: block;
}

.desejo01::before {
    content: url(../img/medalha-ouro.webp);
}

.desejo02::before {
    content: url(../img/medalha-prata.webp);
}

.desejo03::before {
    content: url(../img/medalha-bronze.webp);
}

.desejo p {
    color: #222222;
}

.desejo .cta {
    background: #0094f1;
    border: none
}

.desejo .cta:hover {
    background: #b7005b;
    border: none
}

#sugestoes {
    background: #1ea8ff;
    padding: 50px 0;
    text-align: center;
}

#sugestoes h2 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 2rem;
}

#sugestoes .box {
    align-items: stretch;
    margin-bottom: 30px;
}

.sugestao {
    background: #e21f88;
    color: #ffff00;
    padding: 20px;
    border: solid 5px #ffff00;
    border-radius: 30px;
    width: 45%;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sugestao a {
    font-weight: 600;
    color: #ffff00;
}

.sugestao a:hover {
    color: #fff;
}

#sugestoes .texto p {
    font-weight: 600;
    color: #fff;
}

#sugestoes .texto a {
    color: #ffff00;
    font-weight: 600;
}

#sugestoes .imagem {
    min-width: 350px;
}

#cupons {
    background: #ff6000;
    text-align: center;
    padding: 20px 0 0;
}

#cupons h2 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 2rem;
}

#cupons h2 strong {
    font-size: 2.2rem;
    display: block;
}

hr {
    border: none;
    background: url(../img/hr-presentes.webp) center center no-repeat;
    background-size: contain;
    height: 54px;
    margin-bottom: 15px;
}

#cupons .texto {
    max-width: 700px;
}

#cupons .cta {
    background: linear-gradient(90deg, #03aeff 0%, #00d1ff 73%, #03aeff 100%);
    border: none;
}

#cupons .cta:hover {
    background: linear-gradient(90deg, #00d1ff 0%, #03aeff 73%, #00d1ff 100%);
    color: #fff;
}


#giftcard {
    background: url(../img/bg-quadrados.webp) center no-repeat;
    background-size: cover;
    padding: 50px 0 0;
    text-align: center;
}

#giftcard .box {
    background: linear-gradient(0deg, #64d4ff 0%, #1fa4f8 100%);
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 50px 80px;
    border-radius: 20px;
}

#giftcard h2 {
    color: #fff;
    font-weight: 900;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 2rem;
}

.cartoes {
    translate: 0 -50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cartoes .boxbranco {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    position: relative;
    width: 300px;
    text-align: left;
}

.cartoes .boxbranco::before {
    background: #fff;
    width: 20px;
    height: 30px;
    display: block;
    position: absolute;
    left: -20px;
    top: calc(50% - 15px);
    content: "";
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.cartoes .boxbranco p {
    font-weight: 600;
    color: #0094f1;
    font-size: 1.4rem;
    line-height: 1;
}

#giftcard .cta {
    background: linear-gradient(90deg, #03aeff 0%, #00d1ff 73%, #03aeff 100%);
    border: none;
}

#giftcard .cta:hover {
    background: linear-gradient(90deg, #00d1ff 0%, #03aeff 73%, #00d1ff 100%);
    color: #fff;
}






@media screen and (max-width: 1240px) {
    .container {
        margin: 0 30px
    }
}

@media screen and (max-width: 1090px) {

    #sugestoes .flex {
        flex-wrap: wrap;
    }

    #cupons .flex {
        flex-direction: column;
    }

    #cupons .imagem img {
        max-height: 400px;
    }
}


@media screen and (max-width: 880px) {
    #perfil .perfil {
        flex-direction: column;
    }

    #perfil .texto {
        text-align: center;
        max-width: none;
    }

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

    .cartoes .boxbranco {
        text-align: center;
    }

    .cartoes .boxbranco::before {
        rotate: 270deg;
        bottom: -20px;
        top: auto;
        left: calc(50% - 15px);
    }
}

@media screen and (max-width: 600px) {
    main .infos {
        text-align: center;
    }

    .desejos {
        gap: 0;
    }
}

@media screen and (max-width: 400px) {
    #giftcard h2,
    #cupons h2,
    #cupons h2 strong,
    #sugestoes h2,
    #top3 h2,
    #top3 h2 strong,
    #perfil .texto h3,
    #perfil h2,
    main .infos .titulo h2,
    main .titulo p,
    main h1{
        font-size: 1.4rem;
    }

    #sugestoes .imagem {
        min-width: auto;
    }

    .gap{
        gap: 10px;
    }
}