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


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


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

body h1,
body h2,
body h3,
body h4 {
    font-family: "Sora", 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: #161820;
}

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


#solucao{
    background: #F4F4F4 url(../img/husky-pattern.webp) center center no-repeat;
    padding: 100px 0;
}

#solucao .container{
    align-items: stretch;
    gap: 50px;
}

#solucao .texto{
    max-width: 400px;
}

#solucao .texto h2{
    font-family: "Anton", sans-serif;
    font-size: 4rem;
    text-transform: uppercase;
    text-align: right;
    color: #000000;
}

#solucao .texto h2 strong{
    color: #FE4811;
    font-weight: normal;
}

#solucao .texto p{
    color: #000000;
    font-size: 1rem;
    text-align: right;
}

#solucao .card{
    background: #fff;
    padding: 30px;
    border-radius: 30px;
    position: relative;
    max-width: 300px;
}

.tag{
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 8px;
    background: #DCDCDC;
    color: #000000;
    font-weight: 400;
    width: fit-content;
    margin-bottom: 20px;
}

#solucao .card h2{
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
    text-wrap: balance;
}

#solucao .card p{
    color: #000000;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

#solucao .card p:last-child{
    margin: 0;
}

#solucao .card.solucao{
    background: #FE4811;
    max-width: 400px;
}

#solucao .card.solucao .tag{
    background: #fff;
    color: #000;
}

#solucao .card.solucao h2, #solucao .card.solucao p{
    color: #fff;
}

#solucao .card a{
    background: #fff;
    color: #000;
    padding: 5px 30px;
    border-radius: 30px;
    font-size: 0.9rem;
    display: block;
    text-align: center;
    margin-top: 15px;
    transition: all 0.3s;
}

#solucao .card a:hover{
background: #000;
    color: #fff;
}

hr {
  width: 20%;
  border-radius: 10px;
  border-bottom: 5px solid #FE4811;
  margin: 20px 0 20px auto;
  display: block;
}

#solucao .card::after{
    content: url(../img/icone-interrogacao.webp);
    position: absolute;
    top: -30px;
    right: -50px;
}

#solucao .card.card.solucao::after{
    content: url(../img/icone-check.webp);
}


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

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


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

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

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

#faq li strong {
    font-weight: 600;
}

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

header{
    text-align: center;
    padding: 20px 0;
}

main{
    background: url(../img/banner-topo.webp) center center no-repeat;
    background-size: cover;
    padding: 0 0 50px;
    min-height: 800px;

}

#arealogo{
    max-width: 550px;
    padding-top: 50px;
}

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

h1 strong{
    display: block;
    font-size: 5rem;
    color: #FE4811;
    font-weight: 900;
    text-wrap: balance;
    margin: 10px 0;
}

#arealogo h2{
    margin-bottom: 20px;
}

#arealogo h2 span{
    background: #FE4811;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 8px;
    display: block;
    width: fit-content;
    padding: 0 5px;
}

#arealogo p{
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 300;
}

.cta{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: fit-content;
    background: #FE4811;
    color: #fff;
    font-size: 1rem;
    padding: 5px 30px;
    border-radius: 15px;
    transition: all 0.3s;    
}

.cta::after{
    content: url(../img/seta-cta.webp);
}

.cta:hover{
    color: #fff;
    gap: 15px;
}

#jogos{
    background: #FE4811 url(../img/husky-pattern-2.webp) center center no-repeat;   
    padding: 100px 0;
    text-align: center;
}

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

#jogos h2::after{
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #fff;
    margin: 20px auto 0;
    border-radius: 5px;
}

#jogos p{
    font-weight: 300;
    text-wrap: balance;
}

#jogos .flex{
    margin: 30px 0;
    align-items: stretch;
}

.jogo{
    max-width: 420px;
}

.jogo img{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.jogo .bg{
    background: #fff;
    border-radius: 30px;
    margin-top: -30px;
    position: relative;
    padding: 30px;
    text-align: left;
    transition: all 0.3s;
}

.jogo:hover .bg{
   translate: 0 -5px;
}

.jogo h3{
    color: #FE4811;
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-wrap: balance;
}

.jogo h3 strong{
    display: block;
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 6px;
    background: #DCDCDC;
    color: #595959;
    font-weight: 400;
    width: fit-content;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.jogo p{
    color: #000;
    font-weight: 300;
    font-size: 0.8rem;
    margin-bottom: 10px;    
}

.jogo ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.jogo li{
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 3px;
    background: #000;
    color: #fff;
    font-weight: 400;
    width: fit-content;
}

#evolucao{
    background: url(../img/ofertas-background.webp) center center no-repeat;
    background-size: cover;
    padding: 100px 0;
}

#evolucao .texto{
    max-width: 500px;
}

#evolucao .texto h2{
    text-transform: uppercase;
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 20px;
}

#evolucao .texto p{
    font-weight: 300;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

#evolucao .texto p a{
    color: #FE4811;
}

#evolucao .texto p a:hover{
    color: #FE4811;
    text-decoration: underline;
}

#comparativo{
    background: #FE4811 url(../img/husky-pattern-3.webp) center center repeat;   
    padding: 100px 0;
    text-align: center;
}

#comparativo h2{
    text-transform: uppercase;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-wrap: balance;
}

#comparativo h2::after{
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #fff;
    margin: 20px auto 0;
    border-radius: 5px;
}

#comparativo p{
    font-weight: 300;
    text-wrap: balance;
}

.comparativopc{
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    text-align: left;
    padding-bottom: 20px;
}

.comparativopc .titulo{
    aspect-ratio: 400 / 238;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    margin-bottom: 20px;
}

.comparativopc .titulo .tag{ 
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 300;
}

.itemcarrossel:nth-child(1) .titulo{
        background: url(../img/husky-inciante.webp) center center no-repeat;
        background-size: cover;
}

.itemcarrossel:nth-child(2) .titulo{
        background: url(../img/husky-casual.webp) center center no-repeat;
        background-size: cover;
}

.itemcarrossel:nth-child(3) .titulo{
        background: url(../img/husky-intermediario.webp) center center no-repeat;
        background-size: cover;
}

.itemcarrossel:nth-child(4) .titulo{
        background: url(../img/husky-avancado.webp) center center no-repeat;
        background-size: cover;
}

.itemcarrossel:nth-child(5) .titulo{
        background: url(../img/husky-exigente.webp) center center no-repeat;
        background-size: cover;
}

.comparativopc h3{
    color: #fff;
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 600;
}

.infopc{
    padding: 0 20px;
    margin-bottom: 20px;
}

.infopc .categoria{
    color: #6A7282;
    text-transform: uppercase;
    font-size: 0.7rem;
}

#comparativo .infopc .valor{
    color: #000;
    font-weight: normal;
}

.comparativopc hr{
    width: auto;
    background: #E5E7EB;
    margin: 0 20px;
    border: none;
    border-radius: 0;
    height: 1px;
    margin-bottom: 20px;

}

.comparativopc h4{
    color: #6A7282;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 0 20px;
    margin-bottom: 5px;
}

#comparativo .diferencial{
    color: #FE4811;
    font-size: 0.9rem;
    padding: 0 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.comparativopc h4::before{
    content: "• ";
    color: #FE4811;
}

#comparativo .comparativopc ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#comparativo .comparativopc li {
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 3px;
    background: #000;
    color: #fff;
    font-weight: 400;
    width: fit-content;
}

#comparativo .cta{
    display: block;
    width: auto;
    margin: 20px 20px 0;
    text-align: center;
}

#comparativo .cta:hover{
    background: #000;
}

#comparativo .cta::after{
    display: none;
}

.itemcarrossel{
    padding: 0 10px;
}



.listacomparativo{
    margin-top: 30px;
}

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

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

.uk-dotnav>* {
    padding-left: 8px;
}







/*dobra computadores*/
#computadores{
    background: #e0e0e0 url(../img/husky-pattern-2.webp) center center no-repeat;   
    padding: 100px 0;
    text-align: center;
}

#computadores p{
    font-weight: 300;
    text-wrap: balance;
}

#computadores h2{
    text-transform: uppercase;
    color: #000000;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 20px;
}

.texto-pc p{
    font-size: .9rem;
    margin: 20px auto;
    max-width: 900px;
    color: #000;
}

.texto-pc strong{
    font-weight: 700;
}

.pcs{
    align-items: stretch;
    margin-top: 50px;
}

.pc{
    max-width: 320px;
    display: flex;
    flex-direction: column;

}

.pc h3{
    color: #000000;
    font-weight: 900;
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.pc p{
    font-size: .8rem;
    color: #000;
    font-weight: 300;
    margin-bottom: 10px;
}

.pc p strong{
    color: #FE4811;
    font-weight: 600;
}

.pc .cta{
    font-size: 0.8rem;
    margin: 0 auto;
    width: auto;
    text-align: center;
    justify-content: center;
    margin-top: auto;
}

.pc .cta:hover{
    background: #000;
    color: #fff;
}

.pc .cta:after{
    display: none;
}

.pc img{
    position: relative;
    z-index: 2;
    max-width: min-content;
    margin: auto;
}

.pc .bg{
    background: #fff;
    border-radius: 30px;
    margin-top: -50px;
    position: relative;
    padding: 80px 30px 30px; 
    max-width: 330px;  
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/*fim dobra computadores*/

/*blog*/
#blog{
    background: #0C0C0C;
    padding: 100px 0;;
}

.texto-blog{
    max-width: 450px;
}

#carrossel{
    margin-top: 40px;
 }

 #carrossel .uk-dotnav>*>* {
    border: solid 1px #FF6A00;
}

#carrossel .uk-dotnav>.uk-active>* {
    background: #FF6A00;
}

.uk-dotnav>* {
    padding-left: 8px;
}



#carrossel .card{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

#carrossel img{
    transition: all 0.3s;
    width: 100%;
}

#carrossel a:hover img{
    transform: scale(1.1);
}

#carrossel p{
    color: #fff;
    z-index: 2;
    max-width: 300px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    transition: all 0.3s;
}

#carrossel a:hover p{
    color: #FF6300;
    bottom: 25px;
}



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

@media screen and (max-width: 1035px) {
    main{
        background:#111111 url(../img/banner-topo-mobile.webp) center top fixed no-repeat;
        background-size: 100%;
        padding-bottom: 0;
    }

    main .container{
        margin: 0;
    }

    #arealogo{
        text-align: center;
        background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 20%);
        width: 100%;
        max-width: none;
        text-align: center;
        padding: 100px 50px 50px ;
        margin-top: 30vh;
    }

    h1{
        font-size: 1.8rem;
    }

    h1 strong{
        font-size: 3rem;
    }

    #arealogo h2 span{
        margin: 0 auto;
        background: none;
         font-size: 1rem;
    }

    #arealogo h2{
        background: #FE4811;
        padding: 10px;
        border-radius: 20px;
       
    }

    .cta{
        margin: 0 auto;
    }

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

@media screen and (max-width: 825px) {
    #solucao .texto{
        max-width: none;
        text-align: center;
        text-wrap: balance;
    }

    #solucao .texto h2{
        text-align: center;
    }

    #solucao hr{
        margin: 20px auto;
    }

    #solucao .texto p{
        text-align: center;
    }

    #solucao .card, #solucao .card,  #solucao .card.solucao {
        max-width: none;
    }

    
}

@media screen and (max-width: 600px) {
    #solucao .card::after{
        display: none;
    }

    #computadores h2{
        font-size: 2rem;
    }

    .pc .bg, .pc{
        max-width: none;
    }

    .pc{
        margin: 0 30px;
    }

    .texto-blog{
        text-align: center;
    }
}