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

*{
    box-sizing: border-box;
}

html {
    background-color: #1C1C1C;
}

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

body h1,
body h2,
body h3,
body h4 {
    font-family: "Sora", serif;
    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: #3385FF;
    padding: 20px 0;
}



footer p {
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    text-transform: uppercase;
}



#footer-social .container {
    position: relative
}

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

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

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



header {
    background: rgba(24, 24, 24, 0.3);
    padding: 30px 0;
}

header p{
    font-size: 1rem;
}

header p strong{
    color:#FF4F03;
    font-weight: normal;
}







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

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


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

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

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

#faq li a{
    color: #FF7425;
}

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

#faq .cta{
    background: #FF6A00;
    margin: 30px auto 0;
    font-size: 1.2rem;
}

#faq .cta:hover{
    background: #0066FF;
}

main {
    background: url(../img/banner-topo.webp) center center no-repeat;
    background-size: cover;
    text-align: center;
}

main .topo{
    padding: 200px 0;
    text-align: left;
}

main .topo h1{
    color: #fff;
    font-size: 3.5rem;
}

main .topo h1 strong{
    color: #FF6A00;
    font-size: 12rem;
    display: block;    
}

main .topo p{
    font-size: 1.2rem;
    margin-bottom: 30px;
}

main .topo p strong{
    display: block;
}

.cta{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    width: fit-content;
    background: #0066FF;
    color: #fff;
    border-radius: 20px;
    font-size: 1.6rem;
    transition: all 0.3s;
}

.cta:hover{
    background: #FF6A00;
    color: #fff;
}

#vantagens{
    padding: 50px 0;
    background: #272f3a;
}

.vantagem{
    width: 180px;
    background: radial-gradient(ellipse at right bottom, rgba(97,160,255,1) 00%, rgba(19,22,29,1) 70%);
    padding: 30px;
    aspect-ratio: 1;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    
}

.vantagem::before{
    position: absolute;
    bottom: -40px;
    right: -40px;
    transition: all 0.3s;
}

.vantagem:hover::before{
    bottom: -30px;
    right: -30px;
}

.vantagem:nth-child(1):before{ content: url(../img/ico-box-01.webp); }
.vantagem:nth-child(2):before{ content: url(../img/ico-box-02.webp); }
.vantagem:nth-child(3):before{ content: url(../img/ico-box-03.webp); }
.vantagem:nth-child(4):before{ content: url(../img/ico-box-04.webp); }
.vantagem:nth-child(5):before{ content: url(../img/ico-box-05.webp); }

#assine{
    background: #02070F;
    padding: 50px 0;
}

#assine h3{
    font-size: 1.4rem;
    color: #FF6A00;
}

#assine h2 strong{
    display: block;
    font-size: 4.5rem;
    line-height: 0.5;
    color: #FF6A00;
}

#assine h2{
    text-transform: uppercase;
    font-size: 12rem;
    font-weight: 900;
    text-align: left;
    line-height: 1;
    color: #fff;
}

#assine h2 span{
    font-size: 8rem;
    line-height: 1.2;
    margin: 0;
    display: block;
}

#assine .infos{
    max-width: 450px;
    text-align: center;
}

#assine .box{
    background: #17181E;
    border-radius: 20px;
    padding: 20px;    
    margin-bottom: 50px;
}

#assine .box h3{
    font-size: 1.2rem;
    color: #FF6A00;
    margin-bottom: 10px;
}

#assine .box p{
    font-size: 0.8rem;
    margin-bottom: 10px;
}

#assine .box .cta{
    font-size: 1rem;
    margin: 0 auto;
}

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

#frete h2{
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

#frete h2 strong{
    font-size: 2.4rem;
    display: block;
}

#frete .infos{
    max-width: 450px;
}

#frete .infos img{
    margin-bottom: 20px;
}

.legal{
    font-size: 0.7rem;
    text-wrap: balance;
}

#passos{
    background: url(../img/bg-passos.webp) center center no-repeat;
    background-size: cover;
    padding: 50px;
}

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

#passos h2 strong{
    color: #FF6A00;
    display: block;
}


#passos .infos{
    max-width: 400px;
    text-wrap: balance;
}

.passo{
    max-width: 204px;
    border-radius: 20px;
    text-align: center;
    background: #191D27;
    overflow: hidden;
}

.passo p{
    font-size: 0.8rem;
    color: #fff;
    padding: 20px;
}

.passo a{
    color: #FF6A00;
}

.campanhaativa{
    display: none;
}

.primeoff{
    background: url(../img/2025-03-primeoff-bg.png) center top no-repeat;
    background-size: cover;
}

.primeweek{
    background: url(../img/20250407-primeweek-bg.png) center top no-repeat;
    background-size: cover;
}

.primelist{
    background: url(../img/primelist-bg.png) center top no-repeat;
    background-size: cover;
}

.semanafrete{
    background: url(../img/semana-frete-bg.png) center top no-repeat;
    background-size: cover;
}

.megamaio{
    background: url(../img/20250522-bg.png) center top no-repeat;
    background-size: cover;
}

.ultimosdias{
    background: url(../img/20252205-ultimosdias-bg.png) center top no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
}

.ultimosdias::before{
    content: url(../img/20252205-ultimosdias-faixa.png);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.os100itens{
    background:#000 url(../img/100itens-bg.jpg) center bottom no-repeat;
    position: relative;
    z-index: 0;
    min-height: 628px;
    box-sizing: border-box;
}

.os100itens .chamadas{
padding: 150px 0 0;
max-width: 1300px;
}

.os100itens .textolegal{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.megaday{
    background: url(../img/202507-megaday-bg.png) center top no-repeat;
    background-size: cover;
    padding: 50px 0 0;
    position: relative;
}

.payday{
    background: url(../img/payday-bg.png) center top no-repeat;
    background-size: cover;
    padding: 50px 0 0;
    position: relative;
}

.novedonove{
    background: url(../img/bg-9do9.webp) center top no-repeat;
    background-size: cover;
    padding: 50px 0 0;
    position: relative;
}

.hardware{
    background: url(../img/20250915-prime-week-bg.png) center top no-repeat;
    background-size: cover;
    padding: 0 0;
    position: relative;
}

.megaday .textolegal{
    position: static;
}

.megaday .chamadas{
    margin-bottom: 50px;
}

.bugsout{
    background: url(../img/bugs-out-bg.png) center top no-repeat;
    background-size: cover;
    padding: 50px 0 0;
    position: relative;
}

.bugsout .textolegal{
    position: static;
}

.nuuvem{
    background-image:linear-gradient(90deg,rgba(250, 99, 0, 0) 50%, rgba(250, 99, 0, 1) 50%, rgba(250, 99, 0, 1) 100%), url(../img/20250929-ninja-bg-quarto.png);
    background-size: cover;
    background-blend-mode:soft-light, normal;
    overflow: hidden;
}

.black{
    background: url(../img/2025-black-bg.jpg) center center no-repeat;
    background-size: cover;
}

.natal{
    background: url(../img/2025-12-bgnatal.jpg) center center no-repeat;
    background-size: cover;
}

#ninjanuuvem{
    scale: 1.05;
}


.textolegal{
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    position: relative;
    z-index: 3;
}

.textolegal p{
    font-size: 0.7rem;
}

.textolegal p a{
    color: #FF6A00;
}

@media screen and (max-width: 1310px) {
    #passos{
        text-align: center;
    }

    #passos .infos{
        max-width: none;
    }

    #passos h2 strong{
        display: inline;
    }
}


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

    .os100itens .chamadas{
        justify-content: center;
        padding: 50px 0 580px;
        gap: 50px
    }
}

@media screen and (max-width: 950px) {
    .passos{
        flex-direction: column;
    }

    .seta-passo{
        rotate: 90deg;
    }
}

@media screen and (max-width: 880px) {
    main .topo h1 strong{
        font-size: 6rem;
    }

    .nuuvem{
    background-image:linear-gradient(180deg,rgba(250, 99, 0, 0) 20%, rgba(250, 99, 0, 1) 20%, rgba(250, 99, 0, 1) 100%), url(../img/20250929-ninja-bg-quarto.png);
    background-size: cover;
    background-blend-mode:soft-light, normal;
}

    .nuuvem .container{
        flex-direction: column;
        padding: 50px 0 0;
        gap: 80px;
    }

    #ninjanuuvem{
        order: 3;
        scale: 1;
    }
}

@media screen and (max-width: 580px) {
    main{
        background: url(../img/bg-passos.webp) center center no-repeat;
        background-size: cover;
    }

    main .topo{
        padding: 50px 0;
        text-align: center;
    }

    main .cta{
        margin: 0 auto;
    }

    header p{
        display: none;
    }

    header .between{
        justify-content: center;
    }

    #assine{
        text-align: center;
    }

    #assine h3{
        margin-bottom: 10px;
    }

    #assine h2, #assine h2 strong, #assine h2 span{
        font-size: 2rem;
        display: inline;
    }

    #faq .cta{
        font-size: 1rem;
    }

    .primeoff{
        padding: 50px 0 0;
    }

    .primeweek{
        padding: 50px 0 0;
    }

    .primelist{
        padding: 50px 0 0;
    }

    .campanhaativa.megamaio{
        padding: 50px 0 0;
        background-position: center center;
    }

    .campanhaativa.ultimosdias{
        padding: 50px 0 0;
        background-position: center center;
    }

      .campanhaativa.megamaio #ninjadobra{
        order: 3;
    }

      .campanhaativa.hardware .container div:first-child{
        order: 1;
        padding-bottom: 50px;
    }

    .semanafrete{
        padding: 50px 0 0;
    }

    .black{
        padding: 50px 0 0;
    }

    .campanhaativa{
    background-position: left top;
    }

    .campanhaativa.os100itens{
    background-position: center bottom;
    }
        
    .campanhaativa .flex{
        flex-direction: column;
    }

    .textolegal{
        text-align: center;
    }

    .campanhaativa.novedonove .container{
        flex-direction: column-reverse;
    }
}