/*=========================================
 RESET E VARIÁVEIS
=========================================*/


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



:root{


    --orange:#f97316;

    --orange-dark:#ea580c;

    --white:#fff;

    --black:#111;

    --text:#444;

    --gray:#f5f5f5;

    --gray2:#ececec;

    --footer:#08101f;


    --shadow:

    0 12px 35px rgba(0,0,0,.08);



    --radius:18px;


}




body{


    font-family:Poppins,sans-serif;


    color:var(--text);


    background:#fff;


    padding-top:68px;


    overflow-x:hidden;



}



img{

    max-width:100%;

    display:block;

}



section{

    padding:90px 8%;

}



.container{


    width:min(1200px,100%);


    margin:auto;



}



/*=========================================
 NAVBAR
=========================================*/


nav{


    position:fixed;


    top:0;


    left:0;


    right:0;



    height:68px;



    background:#fff;



    display:grid;



    grid-template-columns:

    1fr auto 1fr;



    align-items:center;



    padding:0 5vw;



    border-bottom:

    1px solid var(--orange);



    z-index:1000;


}





.nav-logo img{


    width:160px;


}



.nav-links{


    display:flex;


    list-style:none;


    gap:55px;


    justify-self:center;


}



.nav-links a{


    color:#222;


    text-decoration:none;


    font-weight:600;


    transition:.3s;



}



.nav-links a:hover,








.nav-social{


    display:flex;


    justify-self:end;


    gap:18px;


}



.nav-social a{


    color:#222;


    font-size:20px;


    transition:.3s;


}



.nav-social a:hover{


    color:var(--orange);


    transform:translateY(-3px);


}



.nav-links .nav-chamados {
    background: black;
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 166, 0, 0.35);
    transition: .3s ease;
}

.nav-links .nav-chamados:hover {
    background: var(--accent2);
    color: #fff;
    transform: translateY(-2px);
}



/*=========================================
 HERO INFRAESTRUTURA
=========================================*/


.hero{


    height:520px;



    background:



    linear-gradient(

        rgba(0,0,0,.60),

        rgba(0,0,0,.60)

    ),



    url("img/network2.jpg");



    background-size:cover;



    background-position:center;



    display:flex;



    align-items:center;



    justify-content:center;



    text-align:center;



}




.hero-content{


    width:min(950px,90%);


    color:#fff;


    margin:auto;



}




.tag{


    display:inline-block;


    padding:8px 20px;


    border-radius:50px;


    background:

    rgba(249,115,22,.2);



    border:

    1px solid rgba(255,255,255,.3);



    font-size:14px;


    letter-spacing:1px;


    margin-bottom:30px;



}




.hero h1{


    font-size:56px;


    line-height:1.2;


    margin-bottom:25px;


}





.hero p{


    font-size:20px;


    line-height:1.8;


    margin-bottom:40px;


}





.hero-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}




.btn-primary{


    display:inline-block;


    padding:16px 35px;


    background:var(--orange);


    color:#fff;


    text-decoration:none;


    border-radius:10px;


    font-weight:600;


    transition:.3s;


}




.btn-primary:hover{


    background:var(--orange-dark);


    transform:translateY(-3px);


}




.btn-outline{


    display:inline-block;


    padding:16px 35px;


    border:2px solid #fff;


    color:#fff;


    text-decoration:none;


    border-radius:10px;


    font-weight:600;


    transition:.3s;


}




.btn-outline:hover{


    background:#fff;


    color:var(--orange);


}







/*=========================================
 INTRODUÇÃO
=========================================*/


.sobre{


    background:#fff;


}





.sobre .container{


    display:grid;


    grid-template-columns:


    1fr 1fr;


    gap:70px;


    align-items:center;


}





.section-tag{


    color:var(--orange);


    font-size:13px;


    font-weight:700;


    letter-spacing:2px;


}




.sobre h2{


    font-size:42px;


    color:#111;


    margin:20px 0;


}




.sobre p{


    font-size:18px;


    line-height:1.9;


    margin-bottom:20px;


}





.imagem img{


    border-radius:18px;


    box-shadow:var(--shadow);


}

/*=========================================
 TÍTULOS
=========================================*/


.titulo{

    max-width:850px;

    margin:0 auto 60px;

    text-align:center;

}



.titulo span{


    color:var(--orange);


    font-size:13px;


    font-weight:700;


    letter-spacing:2px;



}




.titulo h2{


    color:#111;


    font-size:42px;


    margin:15px 0;



}




.titulo p{


    font-size:18px;


    line-height:1.8;



}



/*=========================================
 SOLUÇÕES DE INFRAESTRUTURA
=========================================*/


.equipamentos{


    background:var(--gray);



}




.cards{


    width:min(1200px,100%);


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(280px,1fr));


    gap:30px;



}




.equip-card{


    background:#fff;


    padding:35px 30px;


    border-radius:var(--radius);


    border:1px solid var(--gray2);


    box-shadow:var(--shadow);


    transition:.35s;


}



.equip-card:hover{


    transform:translateY(-10px);


    border-color:var(--orange);


    box-shadow:

    0 20px 45px rgba(0,0,0,.15);



}




.equip-card i{


    width:75px;


    height:75px;


    background:

    rgba(249,115,22,.12);



    color:var(--orange);


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:32px;


    margin-bottom:25px;



}




.equip-card h3{


    color:#111;


    font-size:22px;


    margin-bottom:18px;



}




.equip-card p{


    font-size:15px;


    line-height:1.8;


    margin-bottom:20px;



}


/*=========================================
ECOSSISTEMA
=========================================*/

.ecossistema{

    background:#fff;

}

.ecossistema-grid{

    width:min(1200px,100%);
    margin:auto;

    display:grid;
    gap:28px;

}

.eco-item{

    display:flex;
    gap:30px;

    padding:30px;

    background:#fff;

    border:1px solid var(--gray2);

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.eco-item:hover{

    transform:translateY(-6px);

    border-color:var(--orange);

}

.eco-icon{

    width:75px;
    height:75px;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(249,115,22,.12);

    display:flex;
    align-items:center;
    justify-content:center;

}

.eco-icon i{

    color:var(--orange);

    font-size:30px;

}

.eco-content h3{

    color:#111;

    font-size:24px;

    margin-bottom:6px;

}

.eco-subtitle{

    display:block;

    color:var(--orange);

    font-weight:600;

    margin-bottom:15px;

}

.eco-content p{

    line-height:1.8;

}

@media(max-width:768px){

    .eco-item{

        flex-direction:column;
        text-align:center;

        align-items:center;

    }

}


/*=========================================
 LISTA INTERNA DOS SERVIÇOS
=========================================*/


.card-list{


    list-style:none;


    margin-top:20px;



}





.card-list li{


    position:relative;


    padding-left:25px;


    margin-bottom:10px;


    font-size:14px;


    line-height:1.5;



}




.card-list li::before{


    content:"✓";


    position:absolute;


    left:0;


    color:var(--orange);


    font-weight:bold;



}






/*=========================================
 BENEFÍCIOS
=========================================*/


.beneficios{


    background:#fff;


}





.beneficios-grid{


    width:min(1200px,100%);


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(260px,1fr));


    gap:30px;



}




.beneficio{


    padding:35px;


    background:#fff;


    border-radius:var(--radius);


    border:1px solid var(--gray2);


    box-shadow:var(--shadow);


    transition:.35s;



}





.beneficio:hover{


    transform:translateY(-8px);


}




.beneficio i{


    width:65px;


    height:65px;


    background:var(--orange);


    color:#fff;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:14px;


    font-size:26px;


    margin-bottom:25px;



}





.beneficio h3{


    color:#111;


    font-size:21px;


    margin-bottom:15px;



}




.beneficio p{


    line-height:1.7;


}

/*=========================================
 DIFERENCIAIS
=========================================*/


.diferenciais{

    background:var(--gray);

}



.diferenciais .beneficio{

    background:#fff;

    border-top:

    4px solid var(--orange);

}



.diferenciais .beneficio:hover{

    transform:translateY(-12px);

}






/*=========================================
 CTA
=========================================*/


.cta{


    background:



    linear-gradient(

        rgba(234,88,12,.95),

        rgba(234,88,12,.95)

    ),



    url("img/rede.jpg");



    background-size:cover;



    background-position:center;



    color:#fff;



    text-align:center;


}




.cta-container{


    max-width:900px;


    margin:auto;



}




.cta span{


    font-size:13px;


    letter-spacing:2px;


    font-weight:700;



}




.cta h2{


    font-size:44px;


    margin:20px 0;



}




.cta p{


    font-size:18px;


    line-height:1.8;


    margin-bottom:35px;



}





.cta .btn-primary{


    background:#fff;


    color:var(--orange-dark);



}




.cta .btn-primary:hover{


    background:#111;


    color:#fff;



}







/*=========================================
 FOOTER
=========================================*/


footer{


    background:var(--footer);


    color:#aaa;


    padding:60px 8% 30px;



}




.footer-grid{


    display:grid;


    grid-template-columns:


    1fr 1fr 1fr;



    gap:50px;


    margin-bottom:40px;



}





.nav-logo-text{


    color:#fff;


    font-size:22px;


    font-weight:700;


    margin-bottom:25px;



}





.footer-brand p{


    font-size:14px;


    line-height:1.6;


    margin-bottom:3px;



}





.footer-brand strong{


    color:#fff;


}





.footer-col h4{


    color:#fff;


    margin-bottom:20px;



}





.footer-col ul{


    list-style:none;



}





.footer-col li{


    margin-bottom:12px;



}





.footer-col a{


    color:#aaa;


    text-decoration:none;


    transition:.3s;



}





.footer-col a:hover{


    color:var(--orange);



}





.footer-contact-list{


    display:flex;


    flex-direction:column;


    gap:12px;



}





.footer-divider{


    border:0;


    border-top:

    1px solid rgba(255,255,255,.1);


    margin-bottom:25px;



}





.footer-bottom{


    display:flex;


    justify-content:space-between;


    flex-wrap:wrap;


    gap:20px;


    font-size:13px;



}





.footer-bottom a{


    color:#aaa;


    text-decoration:none;


    margin-left:15px;



}





.footer-bottom a:hover{


    color:var(--orange);



}







/*=========================================
 ANIMAÇÕES
=========================================*/


.hero-content,

.sobre .texto,

.sobre .imagem,

.equip-card,

.beneficio{


    animation:

    fadeUp .8s ease forwards;



}




@keyframes fadeUp{


    from{


        opacity:0;


        transform:

        translateY(30px);



    }



    to{


        opacity:1;


        transform:

        translateY(0);



    }


}








/*=========================================
 RESPONSIVIDADE
=========================================*/


@media(max-width:1000px){



    .nav-links{


        gap:25px;



    }




    .hero h1{


        font-size:45px;



    }





    .sobre .container{


        grid-template-columns:1fr;



    }




    .sobre .imagem{


        order:-1;



    }



}







@media(max-width:768px){



    nav{


        grid-template-columns:1fr;


        justify-items:center;



    }





    .nav-links,

    .nav-social{


        display:none;



    }





    section{


        padding:60px 5%;



    }





    .hero{


        height:430px;



    }





    .hero h1{


        font-size:34px;



    }





    .hero p{


        font-size:16px;



    }





    .hero-buttons{


        flex-direction:column;


        align-items:center;



    }





    .btn-primary,

    .btn-outline{


        width:100%;


        max-width:280px;



    }





    .titulo h2,

    .sobre h2,

    .cta h2{


        font-size:32px;



    }





    .footer-grid{


        grid-template-columns:1fr;



    }





    .footer-bottom{


        flex-direction:column;



    }



}