*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

:root{
    --bg:#eef3f7;
    --bg-soft:#f8fafc;
    --dark:#172033;
    --dark2:#24324a;
    --primary:#2f6f73;
    --primary2:#6fb7aa;
    --accent:#d8b56d;
    --text:#1d2939;
    --muted:#667085;
    --card:#ffffff;
    --line:#dbe5ec;
    --shadow:0 18px 45px rgba(23,32,51,.10);
}


body{
    background:linear-gradient(135deg,#eef3f7,#f8fafc);
    color:var(--text);
}


a{
    text-decoration:none;
    cursor:pointer;
}


/* =========================
   HEADER
========================= */


header{

    position:sticky;
    top:0;
    z-index:100;

    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);

    border-bottom:1px solid var(--line);

    padding:16px 38px;

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

    gap:22px;
}


/* LOGO */

.logo{
    cursor:pointer;
}


.logo h1{

    font-size:28px;
    letter-spacing:3px;
    color:var(--dark);

}



/* MENU PRINCIPAL */


nav{

    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;

}


nav a,
.menu-dropdown span{

    color:var(--dark2);
    font-weight:700;
    font-size:14px;

    position:relative;

}


/* linha inferior */


nav a::after,
.menu-dropdown span::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:0;
    height:2px;

    background:var(--primary);

    transition:.2s ease;

}


nav a:hover::after,
.menu-dropdown span:hover::after{

    width:100%;

}


nav a:hover,
.menu-dropdown span:hover{

    color:var(--primary);

}



/* separadores */



/* =========================
   DROPDOWN MENU
========================= */


.menu-dropdown{

    position:relative;

    padding-bottom:15px;

}


/*
    cria uma área invisível
    para o mouse não perder
    o menu
*/

.menu-dropdown::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:0;

    height:20px;

}



.dropdown{


    position:absolute;

    top:100%;
    left:0;


    min-width:245px;


    background:#fff;


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

    border-radius:18px;


    box-shadow:var(--shadow);


    opacity:0;

    pointer-events:none;


    transform:translateY(8px);


    transition:all .18s ease;


    overflow:hidden;

}



.menu-dropdown:hover .dropdown{


    opacity:1;

    pointer-events:auto;

    transform:translateY(0);

}



.dropdown a{


    display:block;

    padding:15px 18px;

    font-size:14px;

    color:var(--dark2);

}



.dropdown a:hover{


    background:#f0f6f6;

    color:var(--primary);

    padding-left:24px;

}



.dropdown .disabled{

    opacity:.40;

    cursor:not-allowed;

}



/* =========================
   HEADER ACTIONS
========================= */


.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

}



.busca-container input{


    width:210px;


    padding:10px 15px;


    border-radius:999px;


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


    background:#fff;


    outline:none;


    color:var(--text);

}



.login-icon{


    width:42px;

    height:42px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:#f4f7f8;


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


    border-radius:50%;


    font-size:18px;


    color:var(--dark);


    box-shadow:0 6px 18px rgba(23,32,51,.08);

}



.login-icon:hover{

    background:var(--primary);

    color:#fff;

}



/* =========================
   HERO HOME
========================= */


.hero{


    min-height:620px;


    background:

    linear-gradient(
        120deg,
        rgba(23,32,51,.88),
        rgba(47,111,115,.62)
    ),

    url('/static/imagens/bannervitrine.png')
    center/cover no-repeat;


    color:#fff;


    display:flex;


    align-items:center;


    padding:80px 60px;


}



.hero-overlay{


    max-width:820px;

}



.badge{


    display:inline-flex;


    background:rgba(255,255,255,.13);


    border:1px solid rgba(255,255,255,.25);


    color:#fff;


    padding:9px 15px;


    border-radius:999px;


    font-size:13px;


    margin-bottom:22px;


}



.hero h1{


    font-size:58px;


    line-height:1.04;


    margin-bottom:22px;


    letter-spacing:-1px;


}



.hero p{


    font-size:19px;


    color:#eef6f6;


    line-height:1.65;


    max-width:760px;


    margin-bottom:30px;


}



.hero-buttons{


    display:flex;

    gap:14px;

    flex-wrap:wrap;

}



.btn-primary,
.btn-secondary{


    padding:15px 24px;


    border-radius:12px;


    font-weight:800;


    transition:.2s;


    display:inline-block;


}



.btn-primary{


    background:var(--accent);

    color:#1c1b16;

}



.btn-primary:hover{


    transform:translateY(-2px);

}



.btn-secondary{


    border:1px solid rgba(255,255,255,.45);

    color:#fff;

}



.btn-secondary:hover{


    background:rgba(255,255,255,.10);

    transform:translateY(-2px);

}

 /* =========================
   SEÇÕES INTERNAS
========================= */


.setor{

    display:none;

    padding:74px 40px;

}



.section-title{

    max-width:1200px;

    margin:0 auto 34px;

}



.section-title h2{


    font-size:38px;


    border-left:5px solid var(--primary);


    padding-left:16px;


    margin-bottom:12px;


    color:var(--dark);


}



.section-title p{


    color:var(--muted);


    max-width:900px;


    line-height:1.7;


    font-size:16px;


}



/* =========================
   CARDS PRINCIPAIS
========================= */


.servicos,
.solucoes,
.gestao-grid,
.engenharia-grid{


    max-width:1200px;


    margin:auto;


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:26px;


}



.servico,
.solucao,
.gestao-card,
.engenharia-card{


    background:#fff;


    border-radius:24px;


    box-shadow:var(--shadow);


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


    overflow:hidden;


    display:flex;


    flex-direction:column;


    transition:.2s;


}



.servico:hover,
.solucao:hover,
.gestao-card:hover,
.engenharia-card:hover{


    transform:translateY(-5px);


}



/* =========================
   CONTEÚDO DOS CARDS
========================= */


.card-info{


    padding:23px;


    display:flex;


    flex-direction:column;


    gap:10px;


    flex:1;


}



.card-info h3{


    font-size:20px;


    color:var(--dark);


}



.card-info p{


    font-size:14px;


    color:var(--muted);


    line-height:1.5;


}



.card-info a{


    margin-top:auto;


    align-self:flex-start;


    padding:11px 17px;


    background:var(--dark);


    color:#fff;


    border-radius:10px;


    font-weight:700;


    font-size:14px;


}



.card-info a:hover{


    background:var(--primary);


}



/* =========================
   DESTAQUE
========================= */


.feature-hero{


    max-width:1200px;


    margin:0 auto 30px;


    background:linear-gradient(
        135deg,
        var(--dark),
        var(--primary)
    );


    border-radius:32px;


    color:#fff;


    padding:46px;


    box-shadow:var(--shadow);


}



.feature-hero h3{


    font-size:34px;


    margin-bottom:14px;


    max-width:900px;


}



.feature-hero p{


    color:#edf7f6;


    line-height:1.75;


    max-width:960px;


    font-size:17px;


}



/* =========================
   BLOCOS EXPLICATIVOS
========================= */


.bloco{


    max-width:1200px;


    margin:30px auto;


    background:#fff;


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


    border-radius:28px;


    padding:36px;


    box-shadow:var(--shadow);


}



.bloco h3{


    font-size:28px;


    margin-bottom:14px;


    color:var(--dark);


}



.bloco p{


    color:var(--muted);


    line-height:1.75;


    margin-bottom:14px;


}



.lista-2{


    display:grid;


    grid-template-columns:repeat(2,1fr);


    gap:16px;


    margin-top:20px;


}



.item{


    background:var(--bg-soft);


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


    border-radius:18px;


    padding:20px;


}



.item strong{


    display:block;


    color:var(--dark);


    margin-bottom:8px;


}



.item p{


    font-size:14px;


    margin:0;


}



/* =========================
   PROCESSOS
========================= */


.processos{


    max-width:1200px;


    margin:30px auto;


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:20px;


}



.processo{


    background:#fff;


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


    border-radius:22px;


    padding:24px;


    box-shadow:var(--shadow);


}



.processo span{


    display:inline-flex;


    width:42px;


    height:42px;


    border-radius:50%;


    align-items:center;


    justify-content:center;


    background:#e5f4f3;


    color:var(--primary);


    font-weight:900;


    margin-bottom:14px;


}



.processo h4{


    font-size:18px;


    margin-bottom:8px;


    color:var(--dark);


}



.processo p{


    font-size:14px;


    color:var(--muted);


    line-height:1.55;


}



/* =========================
   CONTATO
========================= */


.contato-box{


    max-width:1000px;


    margin:auto;


    display:grid;


    grid-template-columns:1.2fr .8fr;


    gap:26px;


}



.contato-card{


    background:#fff;


    border-radius:24px;


    padding:32px;


    box-shadow:var(--shadow);


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


}



.contato-card h3{


    font-size:26px;


    margin-bottom:12px;


    color:var(--dark);


}



.contato-card p{


    color:var(--muted);


    line-height:1.7;


    margin-bottom:10px;


}

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


.footer{


    background:var(--dark);


    color:#cbd5e1;


    padding:60px 40px 24px;


}



.footer-container{


    max-width:1200px;


    margin:auto;


    display:grid;


    grid-template-columns:1.1fr .9fr .9fr 1.5fr;


    gap:36px;


}



.footer-col h3{


    color:#fff;


    font-size:24px;


    margin-bottom:12px;


}



.footer-col h4{


    color:#fff;


    margin-bottom:14px;


}



.footer-col p,
.footer-col a{


    display:block;


    color:#cbd5e1;


    font-size:14px;


    margin-bottom:9px;


    line-height:1.45;


}



.footer-col a:hover{


    color:#fff;


}



.footer-bottom{


    max-width:1200px;


    margin:36px auto 0;


    padding-top:22px;


    border-top:1px solid rgba(255,255,255,.10);


    text-align:center;


    color:#aab6c5;


    font-size:13px;


}




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


@media(max-width:1050px){



    .hero h1{

        font-size:44px;

    }



    .servicos,
    .solucoes,
    .gestao-grid,
    .engenharia-grid,
    .processos{


        grid-template-columns:repeat(2,1fr);


    }



    .home-stats{


        grid-template-columns:repeat(2,1fr);


    }



    .footer-container{


        grid-template-columns:repeat(2,1fr);


    }



}




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


@media(max-width:650px){



header{


    padding:16px;


    display:block;


}



nav{


    margin-top:16px;


    gap:14px;


}



.header-actions{


    margin-top:16px;


}



.busca-container input{


    width:100%;


}



.hero{


    padding:70px 24px;


    min-height:560px;


}



.hero h1{


    font-size:36px;


}



.home-stats,
.servicos,
.solucoes,
.gestao-grid,
.engenharia-grid,
.processos,
.contato-box,
.footer-container,
.lista-2{


    grid-template-columns:1fr;


}



.setor{


    padding:50px 20px;


}



.feature-hero,
.bloco{


    padding:26px;


}



.footer{


    padding:40px 20px 20px;


}



}