@import"https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap";

*{
    box-sizing: border-box;
}

html {
    background-color: #0037ae;
    accent-color: #39A6FF
}

body {
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    overflow-x: hidden
}

body h1,
body h2,
body h3,
body h4 {
    font-family: "Sora", sans-serif
}

.container {
    max-width: 1440px;
    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: #084DCE;
}

#footer-social {
    padding: 15px 0;
    background: url(../img/bg-footer.webp) center top no-repeat;
    background-size: cover;
}

#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 img {
    max-width: 140px
}

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

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

footer p {
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

header {
    text-align: center;
    font-weight: 600px;
    padding-top: 50px;
}

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

nav li a {
    background: none;
    color: #FFF;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 20px;
    transition: all 0.3s;
}

nav li:hover a,
nav li a.ativo {
    background: #FF7425;
    color: #fff;
}

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

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

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

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

main {
    background: rgb(252, 125, 15);
    background: linear-gradient(90deg, rgba(252, 125, 15, 1) 0%, rgba(255, 173, 60, 1) 100%);
    text-align: center;
    position: relative;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

main #diasfaltantes{
    font-size: 1.4rem;
    font-weight: 900;
}

main #loading{
    font-size: 1.5rem;
}


main header{
    position: relative;
    z-index: 3;
}

header .uk-offcanvas-bar{
    background: #FF7425;
}

header .uk-nav li>a{
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #fff;
    border-bottom: solid 1px #fff;
}

main .container {
    position: relative;
    z-index: 2;
}

main #principal {
    padding: 80px 0 50px;
    justify-content: center;
    align-items: center;
    gap: 30px;
}






#mouse{
    margin-top: 30px;
    animation: mouse 1s ease infinite;
    margin-bottom: 50px;
}

.badge{
    position: absolute;
}

@keyframes badge {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.05;
    }

    100%{
        scale: 1;
    }
}

@keyframes mouse {
    0% {
        translate: 0 0 ;
    }
    70% {
        translate: 0 10px ;
    }

    100%{
        translate: 0 0 ;
    }
}

#badge01{
    left: 100px;
    top: 20%;
    animation: badge 4s linear infinite;
    width: 150px;
}

#badge02{
    right: 10%;
    bottom: 10%;
    animation: badge 2s linear infinite;
    width: 120px;
}



#sobre{
    background: linear-gradient(180deg, rgba(187,72,0,1) 0%, rgba(87,17,0,1) 30%, rgba(0,55,174,1) 100%);
    padding: 50px 0;
    text-align: center;
    position: relative;
}

h1{
    color: #fff;
    font-size: 3rem;
}

h1.obrigado{
    font-size: 1.6rem;
}

h1 strong{
    color: #FF7425;
}

h1{
    max-width: 800px;
    text-wrap: balance;
    margin: 0 auto;
}

.passos{
    margin: 50px auto;
    align-items: flex-start;
}

.passo{
    max-width: 300px;
    position: relative;
}

.passo img{
    position: absolute;
    width: 90px;
    left: -45px;
    z-index: 2;
    top: 0px;
}

.passo p{
    padding: 40px 20px;
    background: #00143F;
    filter: drop-shadow(0px 0px 5px #0FA3FF);
    border: solid 1px #0FA3FF;
    border-top: none;
    position: relative;
}

.passo p::after{
    width: 20px;
    height: 20px;
    background: #FF7425;
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    bottom: 5px;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    
}

.passo h3{
    background: #FF7425;
    color: #6B2700;
    text-transform: uppercase;
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 99%, 0 15px);
    padding: 15px;
    font-size: 1.4rem;
    font-weight: 900;
    position: relative;
    z-index: 1;

}


hr{
    width: 150px;
    height: 1px;
    background: #FF7425;
    margin: 10px auto;
    border: none;
}

.cta{
    background: #FF7425;
    color: #840800;
    text-transform: uppercase;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 20px;
    transition: all 0.3s;
    display: inline-block;
}

.cta:hover{
    filter: drop-shadow(0px 0px 5px #fff);
    color: #840800;
}


iframe{
    aspect-ratio: 1280 / 680;
    border-radius: 30px;
    border: solid 3px #FFBC79;
    width: 100%;
    max-width: 600px;
    background: #FFBC79;
}

#ofertas{
    background: linear-gradient(90deg, #3C1FE3 0%, #001E79 100%);
    padding: 50px 0 0;
    text-align: center;
}



#ofertas h2{
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

#ofertas p{
    margin-bottom: 20px;
}

#ofertas h2 strong{
    color: #FC7D0F;
}

.wrapper{
    padding: 3px;
    background: red;
    margin: 0 20px 20px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.wrapper:before {
    background-size: 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    background-image: radial-gradient(49% 81% at 45% 47%, #ffe20345 0, #073aff00 100%), conic-gradient(from 358deg at 48% 52%, #e4c000 0, #d67504 25%, #ff6500 50%, #d67504 75%, #e4c000 99%), radial-gradient(142% 91% at 83% 7%, #ffdb00 1%, #ff000000 99%), radial-gradient(142% 91% at -6% 74%, #ff0049 1%, #ff000000 99%), radial-gradient(142% 91% at 111% 84%, #ff7000 0, red 100%);
    position: absolute;
    top: -50%;
    left: -66.666667%;
    right: -66.666667%;
    bottom: -50%;
    z-index: -1;
    animation: spin 2s linear infinite;
    border-radius: 20px;
    content: "";  
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.wrapper:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 200px;
    background: linear-gradient(0deg, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
    content: "";
}

.box-produto{
    background: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 20px;
    filter: none;
    position: relative;
}

.box-produto.lendario::before{
    content: "Preço Lendário";
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    background: #FD6601;
    font-size: 0.6rem;
    border-radius: 10px;
    padding: 5px 10px;
}

.wrapper:hover{
    box-shadow: 0 -3px 15px 2px #ff4d0040,3px 5px 18px -2px #ffa80059
}

.box-produto img{
    margin-bottom: 10px;
}

.box-produto h3{
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1;
}

.box-produto .preco{
    color: #FD6601;
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 0;
    line-height: 1;
}

.box-produto .pix{
    color: #848484;
    margin-bottom: 5px;
}

.box-produto .cta{
    background: #1064FF;
    border-radius: 20px;
    box-sizing: border-box;
    color: #fff;
    padding: 5px 10px;
    transition: all 0.3s;
}

.box-produto:hover .cta{
    background: #FD6601;
}

#ofertas .uk-dotnav>*{
    padding-left: 0px;
}

#ofertas .uk-dotnav>*>*{
    border: solid 1px #fff;
    
}

#ofertas .uk-dotnav>.uk-active>*{
    background: #fff;
}

#ofertas .uk-slider-nav{
    gap: 3px;
    justify-content: center;

}

#app{
    background: url(../img/bg-app.webp) center top no-repeat;
    background-size: cover;
    text-align: center;
}

.ninjaapp{
    scale: 1.05;
    transform-origin: right bottom;
    max-width: 450px;
}

.infosapp{
    max-width: 700px;
}

#app h2{
    font-size: 2.4rem;
    color: #2544B5;
}

#app p{
    color: #000000;
}

.boxesapp{
    margin: 30px auto;
}

.boxapp{ 
    padding: 40px 20px;
    background: #00143F;
    position: relative;
    box-sizing: border-box;
    margin: 0 10px;
    height: 100%;
    border-radius: 20px;
    border-top-left-radius: 0;
    border: solid 2px #0FA3FF;
}

.boxapp p::after{
    width: 20px;
    height: 20px;
    background: #FF7425;
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    top: 5px;
    clip-path: polygon(0 0, 0% 100%, 100% 0);    
}

.boxapp h3{
    color: #FF5C00;
    font-weight: 600;
    margin-bottom: 10px;
}

#app .boxapp p{
    color: #fff;
}

#app .uk-dotnav>*{
    padding-left: 0px;
}

#app .uk-dotnav>*>*{
    background: #fff;
    width: 20px;
    height: 5px;
    border-radius: 5px;
    
}

#app .uk-dotnav>.uk-active>*{
    background: #FF5C00;
}

#app .uk-slider-nav{
    gap: 3px;
    justify-content: center;
    margin-right: 10px;

}

#faq {
    background: #FF7425;
    padding: 50px 20px;
    text-align: center
}

#faq p{
    margin-bottom: 10px;
}

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

#faq li p{
    margin-bottom: 10px;
    color: #fff;
}

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

#faq li h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #FF7425;
    margin-bottom: 0px
}



#faq li a {
    color: #FF7425;
    font-weight: 600
}

#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
}


#inscricao.formulario {
    background: rgb(1,56,175);
    background: linear-gradient(180deg, rgba(1,56,175,1) 0%, rgba(0,23,73,1) 100%);
    padding: 100px 0;
}

.formulario .containerform.encerrado .imgcontainer{
    max-width: 500px;
}

.formulario .containerform.encerrado .form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}

#inscricao.formulario .imgcontainer {
    display: block;
    padding: 50px 30px;
    text-align: left;
    flex-grow: 1;
    width: 100%;
    min-width: 320px
}

#inscricao.formulario .imgcontainer img {
    margin-bottom: 30px
}

#inscricao.formulario .imgcontainer h3 {
    color: #00e4ff;
    font-weight: 600;
}

#inscricao.formulario .imgcontainer p {
    margin-bottom: 10px
}

#inscricao.formulario .imgcontainer .cta{
    background: #0f32fe;
    display: block;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.3));
    transition: all .3s
}

#inscricao.formulario .imgcontainer .cta:hover{
    background: #fda111;
    color: #0a0c25
}


#inscricao.formulario .imgcontainer.vip {
    background: url(../img/bg-lateral.webp) center top no-repeat;
    background-size: cover;
    max-width: 300px;
}



#inscricao.formulario .regrasidade {
    padding: 20px;
    border: solid 1px #000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin: 10px 0
}

.formulario {
    background: #030b22;
    padding: 50px 0;
    text-align: center
}

.formulario h2 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    color: #fda111;
    margin-bottom: 20px
}

.formulario .containerform {
    background: #fff;
    border-radius: 60px;
    overflow: hidden;
    justify-content: space-between;
    align-items: stretch
}


.formulario .containerform .form {
    flex-grow: 1;
    text-align: left;
    padding: 30px;
    box-sizing: border-box
}

.formulario .containerform .form h3 {
    font-size: 1.6rem;
    color: #0A0C25;
    margin-bottom: 10px;
    font-weight: 900;
    line-height: 1
}

.formulario .containerform .form hr {
    background: #FF5900;
    width: 80px;
    height: 5px;
    border: none;
    margin: 0 0 10px;
    transform: skew(-30deg, 0)
}

.formulario .containerform .form label,
.formulario .containerform .form h4 {
    color: #0a0c25;
    font-size: .8rem;
    font-weight: 600;
    display: block
}

.formulario .containerform .form p {
    color: #0a0c25;
    font-size: .8rem;
    font-weight: 400;
    display: block;
    margin-bottom: 20px
}

.formulario .containerform .form label.checkbox {
    display: inline-block
}

.formulario .containerform .form input {
    border: solid 1px #c7cbe1;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    font-size: .8rem
}

.formulario .containerform .form input[type=checkbox] {
    width: auto;
    margin: 0
}

.formulario .containerform .form input[type=submit] {
    background: #FF5900;
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.3));
    color: #fff;
    font-size: 1rem;
    padding: 10px;
    margin-top: 20px;
    cursor: pointer;
    transition: all .3s
}

.formulario .containerform .form input[type=submit]:hover {
    background: #0013cc;
    color: #fff
}

.formulario .containerform .form .boxcheckbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 1px #c7cbe1;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 10px
}

.formulario .containerform .form select {
    border: solid 1px #c7cbe1;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    flex-grow: 1;
    box-sizing: border-box;
    font-size: .8rem
}

.formulario .containerform .form #aniversario {
    display: none
}

.formulario .containerform .form .flex {
    justify-content: flex-start;
    gap: 20px
}

.formulario .containerform .form .flex div {
    flex-grow: 1
}

.formulario .containerform .form .flex.datas {
    gap: 5px
}



#inscricao.formulario .containerform.vip{
    background: #101757;
}

#inscricao.formulario .containerform.vip .form{
    background: #fff;
}

#inscricao.formulario .imgcontainer.vip h3{
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #000;
} 

#inscricao.formulario .form h4{
    margin-bottom: 5px;

} 


#inscricao.formulario .imgcontainer.vip p{
    margin-bottom: 30px;
    color: #000;
} 

#inscricao.formulario .form .flex.vip {
    flex-wrap: wrap;   
    gap: 10px; 
    margin-bottom: 20px;
} 

#inscricao.formulario .form .flex.vip .boxcheckbox {
    width: 49%;
    margin-bottom: 0;
    flex-grow: 0;
}

#inscricao .legal{
    font-size: 0.6rem;
}

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

#blackfriday h2{ 
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 600;
}

#blackfriday h2 strong{
    color: #FF5900;
}

#blackfriday p a{
    color: #FF5900;
}

#blackfriday .flex{
    margin-top: 30px;
    align-items: stretch;
}

#blackfriday .conteudo{
    max-width: 600px;
    border: solid 1px #FF5900;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-direction: column;
}

#blackfriday .conteudo p strong{
    display: block;
    
}

.bloco-ofertas{
    background: linear-gradient(90deg, #3C1FE3 0%, #001E79 100%);
    padding: 50px 0;
}

.bloco-ofertas:nth-child(even) {
    background: rgb(252, 125, 15);
    background: linear-gradient(90deg, rgba(252, 125, 15, 1) 0%, rgba(255, 173, 60, 1) 100%);
}

.bloco-ofertas:nth-child(even) .container{
    flex-direction: row-reverse;
}

.bloco-ofertas:nth-child(even) p{
    color: #000;
}

.bloco-ofertas .texto{
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
}

.bloco-ofertas h2{
    font-size: 3rem;
    color: #fff;
    line-height: 1;
}

.bloco-ofertas:nth-child(even) h2{
    color: #0A0C25;
}

.bloco-ofertas h2 strong{
    color: #FF5900;
}

.bloco-ofertas:nth-child(even) h2 strong{
    color: #0F32FE;
}

.bloco-ofertas:nth-child(even) .cta{
    background: #0F32FE;
    color: #fff;
}


.bloco-ofertas{
    min-width: 350px;
}

#monteoseu{
    background: #080C24;
    padding: 120px 0;
    text-align: center;
    color: #fff;
}

#monteoseu h2{
    color: #fff;
    line-height: 1;
    font-size: 2.4rem;
    margin-bottom: 20px;
}

#monteoseu h3{
    font-size: 1.4rem;
    color: #8FB2FF;
    margin-bottom: 20px;
}

#monteoseu h2 strong{
    color: #FF5900;
    display: block;
}

#monteoseu p{
    color: #fff;
    max-width: 900px;
    text-wrap: balance;
    margin: 0 auto 20px;
}

#monteoseu{
    position: relative;
}

#monteoseu .container::before{
    content: url(../img/pc-monte-02.webp);
    position: absolute;
    left: 20px;
    top: 50%;
    translate: 0 -50%;
}

#monteoseu .container::after{
    content: url(../img/pc-monte-01.webp);
    position: absolute;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
}

@media screen and (max-width: 1510px) {
    #monteoseu .container::before, #monteoseu .container::after {
        display: none;
    }

    #monteoseu{
        padding: 50px 0;
    }

    #monteoseu h2 strong{
        display: inline;
    }

    #monteoseu p{
        max-width: none;
    }
}

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

    #badge01{
        left: 50px;
        top: 50px;
        width: 150px;
    }

    #badge02{
        right: 50px;
        top: 80px;
        max-width: 150px;
    }
    
}

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

    #app .container.flex{
        flex-direction: column-reverse;
        gap: 30px;
    }

    #app{
        padding-top: 50px;
    }

    .ninjaapp{
        scale: 1;
        max-width: 300px;
    }

    .infosapp{
        max-width: 100%;
    }

    #inscricao.formulario .form .flex.vip .boxcheckbox {
        width: 100%;

    }

}

@media screen and (max-width: 960px) {
    .formulario .containerform .imgcontainer {
        display: none
    }
}

@media screen and (max-width: 800px) {
    #inscricao.formulario .containerform {
        flex-direction: column
    }

    #inscricao.formulario .imgcontainer {
        display: none;
    }

}


    
@media screen and (max-width: 710px) {
    .badge{
        display: none;
    }

    main #principal img {
        max-width: 100%;
    }

    h1{
        font-size: 2rem;
    }
}

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

    progress{
        width: 95%;
    }

    #progresso::before{
        right: 0;
    }

    .formulario .containerform .form .flex {
        flex-direction: column;
        gap: 10px
    }

    .formulario .containerform .form .flex div {
        width: 100%
    }

    .formulario .containerform .form .flex.datas {
        flex-direction: row
    }
}

@media screen and (max-width: 430px) {
    footer p{
        flex-direction: column;
        gap: 5px;
    }

    h1{
        font-size: 1.4rem;
        text-transform: uppercase;
        font-weight: 600;
    }

    .passo img{
        display: block;
        position: static;
        margin: 0 auto 10px;
    }

    .passo h3{
        font-size: 1rem;
    }

    .passo p{
        padding: 20px;
        filter: none;
    }

    #ofertas h2{
        font-size: 1.4rem;
        text-transform: uppercase;
    }

    #ofertas strong{
        display: block;
    }

    #app h2{
        font-size: 1.4rem;
        text-transform: uppercase;
    }

    #faq h2{
        font-size: 1.4rem;
    }

    #faq li h3{
        font-size: 1rem;
    }

    .formulario h2{
        font-size: 1.4rem;
    }

}