@import url('https://fonts.googleapis.com/css2?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", sans-serif;
    font-optical-sizing: auto;
    overflow-x: hidden;
    accent-color: #FF6600;
}

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

.container {
    max-width: 1320px;
    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: #E95400;
}

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



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

nav li a {
    color: #fff;
    transition: all .2s;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    display: flex;
    gap: 10px;
}

nav li:hover a,
nav li a.ativo {
    color: #FF6300;
}


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

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

#logo-kabum {
    max-width: 160px;
}

#mobile-navbar img {
    margin-bottom: 30px;
}

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

#faq {
    padding: 50px 0;
    text-align: center;
    background: url(../img/pattern.webp), linear-gradient(180deg, rgba(0, 30, 167, 0.00) 45.02%, #001EA7 100%), radial-gradient(107.26% 107.26% at 50% 100.05%, #001EA7 0%, #008FF3 100%);
    background-blend-mode: soft-light, normal, normal;
    background-position: center top;
}

#faq h2 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    text-wrap: balance;
    margin-bottom: 30px;
}


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

#faq li li {
    padding: 0;
    border-radius: 0;
    background: none;
    list-style: disc inside;
}

#faq li h3 {
    color: #FF5F00;
    font-size: 1.2rem;
    font-weight: 700;
}

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

#faq li p a {
    color: #FF6300;
    text-decoration: underline;
}

#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: blue;
    background: url(../img/background-top.webp) center center no-repeat;
    background-size: cover;
}

#areatopo {
    padding: 50px 0;
    color: #ffffff;
    text-align: center;
}

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

h1 {
    font-size: 2rem;
    font-weight: 600;
    background: #00042A;
    padding: 11px 17px;
    display: inline-block;
    line-height: 30px;
    color: #ffffff;
}

#areatopo h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 50px;
    color: #ffffff;
}

#areatopo .destaque {
    font-size: 1.8rem;
}


.cta {
    max-width: fit-content;
    border-radius: 20px;
    font-size: 1.5rem;
    padding: 10px 40px;
    display: block;
    margin-top: 20px;
    color: #fff;
    transition: all 0.3s;
}

.cta.laranja {
    background-color: #FF6600;

}

.cta.azul {
    background-color: #0004ff;
}

.cta:hover {
    background-color: #fff;
    color: #0004ff;
}


#areatopo .imagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.titulo h3 {
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    line-height: 50px;
}

.titulo h4 {
    font-size: 0.9rem;
    color: #ffffff;
    text-align: center;
    max-width: 700px;
    line-height: 25px;
}

#dobra2 {
    background-color: #002fff;
    padding: 50px 0;
    color: #ffffff;
}

#dobra2 h2 {
    font-size: 4.5rem;
    line-height: 80px;
    font-weight: 800;
    color: #00FFF2;
}

#dobra2 .texto {
    max-width: 600px;
}

#dobra2 p a:hover {
    text-decoration: underline;
}

#dobra2 p a {
    color: #ffffff;
    font-weight: bold;
}

#dobra2 p {
    margin-top: 20px;
}

#dobra2 .imagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Dobra 3 */

#dobra3 {
    background-color: #ff8800;
    padding: 50px 0;
    color: #ffffff;
}

#dobra3 h2 {
    font-size: 4.5rem;
    line-height: 80px;
    font-weight: 800;
    color: #ffffff;
    text-wrap: balance;
}

#dobra3 .texto {
    max-width: 600px;
}

#dobra3 p {
    margin-top: 20px;
}

#dobra3 .imagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Fim da Dobra 3 */

/* Dobra 4 */
#dobra4 .flex {
    flex-direction: row-reverse;
}

#dobra4 {
    background-color: #002fff;
    padding: 50px 0;
    color: #ffffff;
}

#dobra4 h2 {
    font-size: 4.5rem;
    line-height: 80px;
    font-weight: 800;
    color: #00FFF2;
}

#dobra4 .texto {
    max-width: 600px;
}

#dobra4 p {
    margin-top: 20px;
}

#dobra4 .imagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Fim da Dobra 4 */

/* Dobra 5 */
#dobra5 {
    background-color: #ff8800;
    padding: 50px 0;
    color: #ffffff;
}

#dobra5 h2 {
    font-size: 4.5rem;
    line-height: 80px;
    font-weight: 800;
    color: #ffffff;
}

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

#dobra5 p a:hover {
    text-decoration: underline;
}

#dobra5 p a {
    color: #ffffff;
    font-weight: bold;
}

#dobra5 p {
    margin-top: 20px;
}

#dobra5 .imagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Dobra 6 */

#dobra6 .flex {
    flex-direction: row-reverse;
}


#dobra6 {
    background-color: #002fff;
    padding: 50px 0;
    color: #ffffff;
}

#dobra6 h2 {
    font-size: 4.5rem;
    line-height: 80px;
    font-weight: 800;
    color: #00FFF2;
}

#dobra6 .texto {
    max-width: 600px;
}

#dobra6 p {
    margin-top: 20px;
}

#dobra6 .imagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lista-limpa {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* monte o seu */

#monteoseu {
    background-image: url(../img/hud-monte-pc.webp), url(../img/monte-background.webp);
    background-size: auto, cover;
    background-position: center top, center;
    background-repeat: no-repeat;
    padding: 100px 0 50px;
    }

#monteoseu .texto {
    max-width: 600px;
    font-size: 1.2rem;
    flex-wrap: wrap;
}

#monteoseu h2{
    font-family: poppins, sans-serif;
    text-transform: uppercase;
    font-size: 3.7rem;
    line-height: 80px;
    font-weight: 800;
    color: #FF6A00;
}

#monteoseu .imagem{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#monteoseu p{
    font-weight: 400;
}

#monteoseu span{
    font-style: italic;
    font-weight: 200;
}

#monteoseu .blocolista{
    align-items: flex-start;
    gap: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

#monteoseu .lista{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 5px;
    margin-top: 30px;
}

#monteoseu h3{
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 700;
    width: 200px;
}

#monteoseu .resultado{
    font-size: 1rem;
    color: #ffffff;
    text-align: center;
    justify-content: center;
}

#monteoseu .cta{
    max-width: fit-content;
    border-radius: 20px;
    font-size: 1.5rem;
    padding: 10px 40px;
    display: inline-block;
    margin-top: 20px;
    color: #fff;
    transition: all 0.3s;
    background-color: #FF6600;
}

#monteoseu .cta:hover {
    background-color: #fff;
    color: #0004ff;
}

/* fim monte o seu */

/* nuvem */

#nuvem {
    background: #000861;
    padding: 50px 0 50px;
    text-align: center;
}

#nuvem .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

#nuvem a {
    background: #004DDD;
    display: inline-block;
    padding: 5px 7px;
    color: #ffffff;
    font-size: .7rem;
    transition: all .3s;
    border-radius: 4px;
    text-transform: uppercase;

}

#nuvem a:hover {
    background: #ffffff;
    color: #004DDD
}

#ofertas {
    padding: 50px 0;
    text-align: center;
    background: url(../img/pattern.webp), #FF5F00;
    background-blend-mode: soft-light, normal;
    text-wrap: balance;
}

#portah2 {
    margin-bottom: 30px;
}

#ofertas h2 {
    color: #fff;
    font-size: 2.6rem;
    text-wrap: balance;
    line-height: 1.2;
}

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

#ofertas .cta {
    border-radius: 25px;
    background: #0044D9;
    box-shadow: 0 9px 0 4px #000, 0 0 0 4px #000;
    margin: 15px auto;
    transition: all 0.3s;
    font-size: 1.4rem;
}

#ofertas .cta:hover {
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 9px 0 4px #000, 0 0 0 4px #000;
    color: #0044D9;
}

#listaDinamica {
    margin-top: 30px;
}

#ofertas h2 span {
    display: block;
    background: #0044D9;
    box-shadow: -10px 10px 0 0 #020A2D;
    width: fit-content;
    margin: 0 auto;
    padding: 0 15px;
}

#ofertas h2 strong {
    font-weight: normal;
    font-style: italic;
}

.box-produto {
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto 10px;
    transition: all .3s;
    border-radius: 20px;
    text-align: left;
    width: 220px
}

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

#ofertas .box-produto .preco {
    color: #FF5C00;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1
}

#ofertas .box-produto p {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1;
    color: #878787
}

.box-produto h3 {
    color: #000;
    font-weight: 400;
    margin-bottom: 6px;
    line-height: 1;
    font-size: .9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    box-orient: vertical
}

#ofertas .box-produto p.tag {
    background: #FF5C00;
    color: #0F2946;
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 3px;
    font-weight: normal
}

#ofertas .box-produto p span.porcentagem {
    background: #FF5C00;
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
    display: inline-block;
    font-weight: normal;
    margin-bottom: 3px
}

#ofertas .box-produto p span.precode {
    text-decoration: line-through;
    color: #bfbfbf
}

#ofertas .uk-dotnav,
#esquenta .uk-dotnav {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto
}

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

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

#notebooks-tablets {
    background: url(../img/pattern2.webp), #F6F6F6;
    background-blend-mode: exclusion, normal;
    color: #515151;
    padding: 50px 0;
}

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

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

#notebooks-tablets h2 {
    color: #FF5C00;
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    margin-top: 80px;
}

#notebooks-tablets h2:nth-of-type(1){
    margin-top: 0;
}

#notebooks-tablets p {
    margin-bottom: 20px;
}

#notebooks-tablets h3 {
    color: #272727;
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

#notebooks-tablets li {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

#notebooks-tablets h4 {
    font-weight: 600;
}

#notebooks-tablets .uk-accordion-content {
    border-top: solid 1px #eee;
    padding-top: 20px;
}

.card {
    border: solid 1px #eee;
    padding: 20px;
    border-radius: 15px;
    max-width: 400px;
}

.card p strong, #notebooks-tablets li p a {
    color: #FF5C00;
}



#notebooks-tablets .cta {
    background: #2167FF;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 20px;
}

#notebooks-tablets .cta:hover {
    background: #FF5C00;
}

.cards-notebooks {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
}

.card-notebook {
    max-width: 400px;
    padding: 15px;
}

.card-notebook.branco {
    background: #fff;

    border-radius: 15px;
}

.card-notebook.branco img {
    margin: 0 auto 20px;
    display: block;
}

.tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

#notebooks-tablets .card-notebook p.tag {
    background: #EAF7FD;
    border-radius: 5px;
    border: solid 1px #E5F1FF;
    padding: 5px;
    margin: 0;
    font-size: 0.8rem;
}

#notebooks-tablets .card-notebook .cta{
    font-size: 1rem;
}

.blocos-tablets {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    flex-wrap: wrap;
}

.bloco-tablet {
    max-width: 300px;
    padding: 15px;
    background: #F5F5F7;
    border-radius: 20px;
}

.bloco-tablet img {
    display: block;
    margin: 0 auto;
}

#notebooks-tablets h5 {
    color: #272727;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
}






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

    .cards-notebooks{
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 720px) {
    #monteoseu h2{
        line-height: 1.2;
        font-size: 2rem;
        margin-bottom: 10px;
        text-wrap: balance;
    }

    h1{
        font-size: 1.6rem;
    }

    #ofertas h2{
        font-size: 1.6rem;
    }

    #dobra2 h2, #dobra3 h2, #dobra4 h2, #dobra5 h2, #dobra6 h2{
        font-size: 2rem;
        margin-bottom: 20px;
        line-height: 1;
    }

    .cta{
        font-size: 1rem;
    }

    #notebooks-tablets h2{
        font-size: 1.8rem;
    }
}