/* ==========================================================
   CEV WEBSITE

   complexo.css

   CSS EXCLUSIVO DA PÁGINA

   /complexo

   Estrutura:
   body.page-complexo

   Contém:
   - Header
   - Hero
   - Stats
   - Infraestrutura

========================================================== */



/* ==========================================================
   VARIÁVEIS DA PÁGINA
========================================================== */


body.page-complexo{


    --cev-green:#0D5C57;

    --cev-green-dark:#083F3C;

    --cev-red:#C63C35;

    --cev-red-dark:#A72F2A;

    --cev-text:#17322F;

    --cev-muted:#52605E;

    --cev-light:#F6F7F8;

    --cev-border:#E5E5E5;


    background:#ffffff;

    overflow-x:hidden;


}






/* ==========================================================
   CONTAINER PADRÃO
========================================================== */


body.page-complexo .container{


    width:min(92%,1200px);

    margin:auto;


}






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


body.page-complexo .header{


    position:relative;

    z-index:100;

    background:#ffffff;


}




body.page-complexo .header-container{


    min-height:78px;


}





body.page-complexo .logo img{


    width:130px;

    height:auto;


}





body.page-complexo .menu a{


    color:var(--cev-text);

    font-size:.82rem;

    font-weight:700;


}





body.page-complexo .header-actions .phone{


    color:var(--cev-green);

    font-weight:800;


}





body.page-complexo .header-actions .btn-primary{


    background:var(--cev-red);

    border-color:var(--cev-red);


}




body.page-complexo .header-actions .btn-primary:hover{


    background:var(--cev-red-dark);


}


/* ==========================================================
   HEADER COMPACTO - COMPLEXO
========================================================== */


body.page-complexo .header.compact{


    height:64px;


    box-shadow:


        0 10px 30px rgba(0,0,0,.08);


}



body.page-complexo .header.compact .logo{


    width:95px;


}


body.page-complexo .header.compact .menu a{


    font-size:.78rem;


}


body.page-complexo .header.compact .btn{


    min-height:42px;


}




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


body.page-complexo .page-hero{


    position:relative;

    min-height:560px;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;


}




body.page-complexo .page-hero-image{


    position:absolute;

    inset:0;


    width:100%;

    height:100%;


    object-fit:cover;


    z-index:-3;


}




body.page-complexo .page-hero-overlay{


    position:absolute;

    inset:0;


    background:


    linear-gradient(

        90deg,

        rgba(6,35,32,.90),

        rgba(6,35,32,.55) 45%,

        rgba(6,35,32,.20)

    );


    z-index:-2;


}






body.page-complexo .page-hero-container{


    width:min(92%,1200px);

    margin:auto;


}





body.page-complexo .page-hero-content{


    max-width:600px;

    padding:55px 0;


}







body.page-complexo .page-hero-tag{


    display:inline-flex;

    align-items:center;


    padding:7px 16px;


    border-radius:50px;


    background:var(--cev-red);


    color:#fff;


    font-size:.68rem;


    font-weight:900;


    letter-spacing:.15em;


    text-transform:uppercase;


    margin-bottom:22px;


}





body.page-complexo .page-hero h1{


    max-width:580px;


    color:#fff;


    font-size:

        clamp(2.8rem,5vw,4.3rem);


    font-weight:900;


    line-height:1;


    letter-spacing:-1.8px;


    margin-bottom:22px;


}





body.page-complexo .page-hero p{


    max-width:520px;


    color:

        rgba(255,255,255,.90);


    font-size:1rem;


    line-height:1.75;


    margin-bottom:30px;


}





body.page-complexo .page-hero-buttons{


    display:flex;

    flex-wrap:wrap;

    gap:15px;


}








/* ==========================================================
   STATS
========================================================== */


body.page-complexo .page-stats{


    position:relative;

    margin-top:-45px;

    z-index:20;

    padding-bottom:55px;


}






body.page-complexo .page-stats-grid{


    width:min(92%,1100px);


    margin:auto;


    display:grid;


    grid-template-columns:

        repeat(4,1fr);


    gap:18px;


}






body.page-complexo .page-stat{


    min-height:125px;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    border-radius:16px;


    box-shadow:

        0 18px 40px rgba(0,0,0,.14);


    text-align:center;


}





body.page-complexo .page-stat:nth-child(odd){


    background:

    linear-gradient(

        135deg,

        var(--cev-green),

        #08736B

    );


}





body.page-complexo .page-stat:nth-child(even){


    background:

    linear-gradient(

        135deg,

        var(--cev-red),

        var(--cev-red-dark)

    );


}







body.page-complexo .page-stat strong{


    color:#fff;


    font-size:2.4rem;


    font-weight:900;


    line-height:1;


}







body.page-complexo .page-stat span{


    margin-top:8px;


    color:

    rgba(255,255,255,.92);


    font-size:.78rem;


    font-weight:800;


}









/* ==========================================================
   SECTION HEADER / TAGS
========================================================== */



body.page-complexo .section-tag{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:6px 15px;


    margin-bottom:18px;


    border-radius:50px;


    background:#EAF5F4;


    color:var(--cev-green);


    font-size:.65rem;


    font-weight:900;


    letter-spacing:.16em;


    text-transform:uppercase;


}





body.page-complexo .section-header,
body.page-complexo .cms-section-header,
body.page-complexo .page-section-header{


    width:min(92%,850px);


    margin:

    0 auto 45px;


    text-align:center;


}





body.page-complexo .section-header h2,
body.page-complexo .cms-section-header h2,
body.page-complexo .page-section-header h2{


    color:var(--cev-text);


    font-size:

    clamp(2rem,4vw,3rem);


    line-height:1.15;


    letter-spacing:-.5px;


    margin-bottom:18px;


}






body.page-complexo .section-header p,
body.page-complexo .cms-section-header p,
body.page-complexo .page-section-header p{


    color:var(--cev-muted);


    font-size:1rem;


    line-height:1.75;


}








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


body.page-complexo .feature-grid-section{


    padding:80px 0;


    background:#ffffff;


}






body.page-complexo .feature-grid{


    width:min(92%,1100px);


    margin:auto;


    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:24px;


}






body.page-complexo .feature-card{


    min-height:220px;


    padding:30px;


    background:#fff;


    border-radius:18px;


    border:

        1px solid var(--cev-border);


    transition:.3s ease;


}





body.page-complexo .feature-card:hover{


    transform:translateY(-6px);


    box-shadow:

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


}







body.page-complexo .feature-icon{


    width:44px;


    height:44px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:12px;


    margin-bottom:18px;


}






/* Ícones alternados verde/vermelho */


body.page-complexo .feature-card:nth-child(odd)
.feature-icon{


    background:#EAF5F4;


}




body.page-complexo .feature-card:nth-child(even)
.feature-icon{


    background:#FCEAE8;


}






body.page-complexo .feature-icon img{


    width:23px;

    height:23px;


    object-fit:contain;


}





body.page-complexo .feature-card:nth-child(odd)
.feature-icon img{


    filter:

    invert(29%)

    sepia(50%)

    saturate(700%)

    hue-rotate(125deg);


}






body.page-complexo .feature-card:nth-child(even)
.feature-icon img{


    filter:

    invert(36%)

    sepia(85%)

    saturate(1600%)

    hue-rotate(325deg);


}







body.page-complexo .feature-card h3{


    color:var(--cev-text);


    font-size:1.05rem;


    margin-bottom:10px;


}







body.page-complexo .feature-card p{


    color:var(--cev-muted);


    font-size:.9rem;


    line-height:1.65;


}


/* ==========================================================
   LOCALIZAÇÃO
========================================================== */


body.page-complexo .page-location{


    padding:80px 0;


    background:#F6F7F8;


}






body.page-complexo .page-location-grid{


    width:min(92%,1100px);


    margin:auto;


    display:grid;


    grid-template-columns:

        1fr 1fr;


    gap:60px;


    align-items:center;


}






body.page-complexo .page-location-content{


    max-width:520px;


}





body.page-complexo .page-location-content h2{


    color:var(--cev-text);


    font-size:

    clamp(2rem,4vw,2.9rem);


    line-height:1.15;


    letter-spacing:-.5px;


    margin-bottom:18px;


}






body.page-complexo .page-location-content p{


    color:var(--cev-muted);


    font-size:.98rem;


    line-height:1.75;


    margin-bottom:20px;


}








/* ==========================================================
   LISTA LOCALIZAÇÃO
========================================================== */


body.page-complexo .location-list{


    list-style:none;


    padding:0;


    margin:

    20px 0 25px;


}






body.page-complexo .location-list li{


    position:relative;


    padding-left:25px;


    margin-bottom:12px;


    color:#455452;


    font-size:.92rem;


    line-height:1.5;


}







body.page-complexo .location-list li::before{


    content:"✓";


    position:absolute;


    left:0;


    top:0;


    color:var(--cev-red);


    font-weight:900;


}








/* ==========================================================
   ENDEREÇO
========================================================== */


body.page-complexo .page-location-address{


    margin-top:22px;


    padding:20px;


    background:#fff;


    border-radius:16px;


    border:

        1px solid var(--cev-border);


}






body.page-complexo .page-location-address strong{


    display:block;


    color:var(--cev-text);


    font-size:.85rem;


    margin-bottom:8px;


}






body.page-complexo .page-location-address p{


    margin:0;


    font-size:.9rem;


}







/* ==========================================================
   BOTÕES MAPA
========================================================== */


body.page-complexo .location-actions{


    display:flex;


    flex-wrap:wrap;


    gap:12px;


    margin-top:25px;


}





body.page-complexo .location-actions .btn{


    padding:

    11px 20px;


    font-size:.82rem;


}







/* ==========================================================
   MAPA
========================================================== */


body.page-complexo .location-map{


    width:100%;


    height:380px;


    overflow:hidden;


    border-radius:22px;


    background:#e8eeee;


    box-shadow:

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


}







body.page-complexo .location-map iframe{


    width:100%;


    height:380px;


    border:0;


    display:block;


}



/* ==========================================================
   SUSTENTABILIDADE
========================================================== */


body.page-complexo .sustainability-section{


    padding:90px 0;


    background:#ffffff;


}






body.page-complexo .sustainability-grid{


    width:min(92%,1100px);


    margin:auto;


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:70px;


    align-items:center;


}








/* ==========================================================
   IMAGEM / CAROUSEL
========================================================== */


body.page-complexo .sustainability-image{


    position:relative;


    width:100%;


    height:360px;


    overflow:hidden;


    border-radius:22px;


    background:#edf2f2;


}







body.page-complexo .sustainability-carousel{


    position:relative;


    width:100%;


    height:100%;


}







body.page-complexo .sustainability-slide{


    position:absolute;


    inset:0;


    opacity:0;


    transition:

    opacity .8s ease;


}







body.page-complexo .sustainability-slide.active{


    opacity:1;


}







body.page-complexo .sustainability-slide img{


    width:100%;


    height:100%;


    object-fit:cover;


    object-position:center;


}








/* ==========================================================
   CONTEÚDO
========================================================== */


body.page-complexo .sustainability-content{


    max-width:520px;


}







body.page-complexo .sustainability-content .section-tag{


    margin-bottom:18px;


}







body.page-complexo .sustainability-content h2{


    color:#17322F;


    font-size:


    clamp(2rem,3.8vw,2.8rem);


    font-weight:800;


    line-height:1.15;


    letter-spacing:-.5px;


    margin-bottom:18px;


}







body.page-complexo .sustainability-content p{


    color:#52605e;


    font-size:.95rem;


    line-height:1.75;


    margin-bottom:28px;


}








/* ==========================================================
   ITENS DE SUSTENTABILIDADE
========================================================== */


body.page-complexo .sustainability-items{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:12px;


}







body.page-complexo .sustainability-item{


    display:flex;


    align-items:center;


    gap:12px;


    min-height:55px;


    padding:14px;


    background:#F6F7F8;


    border-radius:14px;


    border:

    1px solid #e5e5e5;


}







body.page-complexo .sustainability-icon{


    flex-shrink:0;


    width:30px;


    height:30px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#EAF5F4;


    color:#0D5C57;


    font-size:.85rem;


    font-weight:900;


}







body.page-complexo .sustainability-item p{


    margin:0;


    color:#17322F;


    font-size:.82rem;


    line-height:1.45;


}








/* ==========================================================
   CONTROLE CAROUSEL FUTURO
========================================================== */


body.page-complexo .sustainability-dots{


    position:absolute;


    bottom:18px;


    left:50%;


    transform:translateX(-50%);


    display:flex;


    gap:8px;


    z-index:5;


}







body.page-complexo .sustainability-dot{


    width:8px;


    height:8px;


    border-radius:50%;


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


}







body.page-complexo .sustainability-dot.active{


    background:#C63C35;


}



/* ==========================================================
   GALERIA
========================================================== */


body.page-complexo .gallery-section{


    padding:90px 0;


    background:#F6F7F8;


}







/* ==========================================================
   HEADER DA GALERIA
========================================================== */


body.page-complexo .gallery-section .page-section-header{


    width:min(92%,850px);


    margin:

    0 auto 50px;


    text-align:center;


}







body.page-complexo .gallery-section .page-section-header .section-tag{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    margin-bottom:18px;


    padding:

    6px 14px;


    border-radius:50px;


    background:#EAF5F4;


    color:#0D5C57;


    font-size:.65rem;


    font-weight:800;


    letter-spacing:.18em;


    text-transform:uppercase;


}







body.page-complexo .gallery-section .page-section-header h2{


    color:#17322F;


    font-size:


    clamp(2rem,4vw,3rem);


    font-weight:800;


    line-height:1.15;


    letter-spacing:-.5px;


    margin-bottom:18px;


}







body.page-complexo .gallery-section .page-section-header p{


    max-width:700px;


    margin:auto;


    color:#52605e;


    font-size:.98rem;


    line-height:1.75;


}









/* ==========================================================
   GRID GALERIA
========================================================== */


body.page-complexo .page-gallery{


    width:min(92%,1100px);


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:24px;


}








/* ==========================================================
   CARD IMAGEM
========================================================== */


body.page-complexo .page-gallery-item{


    position:relative;


    height:290px;


    overflow:hidden;


    border-radius:20px;


    background:#e9eeee;


    box-shadow:


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


}







body.page-complexo .page-gallery-item img{


    width:100%;


    height:290px;


    object-fit:cover;


    transition:


    transform .5s ease;


}







body.page-complexo .page-gallery-item:hover img{


    transform:scale(1.06);


}








/* ==========================================================
   LEGENDA SOBRE IMAGEM
========================================================== */


body.page-complexo .page-gallery-overlay{


    position:absolute;


    inset:auto 0 0;


    padding:22px 18px 18px;


    background:


    linear-gradient(

        transparent,

        rgba(0,0,0,.70)

    );


}







body.page-complexo .page-gallery-overlay span{


    color:#ffffff;


    font-size:.85rem;


    font-weight:700;


    line-height:1.3;


}








/* ==========================================================
   AJUSTE DE ALINHAMENTO
========================================================== */


body.page-complexo .gallery-section .container{


    display:block;


}



body.page-complexo .gallery-section + .page-cta{


    margin-top:0;


}


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


body.page-complexo .page-cta{


    padding:70px 0;


    background:


    linear-gradient(

        135deg,

        var(--cev-green),

        var(--cev-green-dark)

    );


}






body.page-complexo .page-cta-container{


    width:min(92%,1200px);


    margin:auto;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:40px;


}






body.page-complexo .page-cta h2{


    max-width:720px;


    color:#ffffff;


    font-size:


    clamp(2rem,4vw,3rem);


    font-weight:800;


    line-height:1.15;


    margin-bottom:15px;


}






body.page-complexo .page-cta p{


    max-width:620px;


    color:


    rgba(255,255,255,.88);


    font-size:.95rem;


    line-height:1.7;


}






body.page-complexo .page-cta .btn{


    flex-shrink:0;


    background:var(--cev-red);


    border-color:var(--cev-red);


    color:#ffffff;


    padding:


    12px 26px;


}






body.page-complexo .page-cta .btn:hover{


    background:var(--cev-red-dark);


}



/* ==========================================================
   HEADER
   Correção exclusiva página complexo

   Mantém comportamento igual ao home
========================================================== */


body.page-complexo .header{


    position:fixed;


    top:0;


    left:0;


    width:100%;


    z-index:9999;


    transition:


        height .3s ease,

        background .3s ease,

        box-shadow .3s ease;



}




body.page-complexo .header.scrolled{


    background:#ffffff;


    box-shadow:


        0 8px 25px rgba(0,0,0,.08);



}





body.page-complexo .header.compact{


    height:70px;


}




body.page-complexo .header.compact .logo img{


    max-height:38px;



}





body.page-complexo .header.compact .header-container{


    padding-top:8px;

    padding-bottom:8px;



}





/*
   Remove qualquer tentativa
   de esconder o menu
*/


body.page-complexo .menu,


body.page-complexo .header-actions{


    opacity:1;


    visibility:visible;


    transform:none;



}




body.page-complexo .menu a{


    display:flex;


}







/*
   Espaço do conteúdo por causa
   do header fixed
*/


body.page-complexo main{


    padding-top:0;



}





/* ==========================================================
   FOOTER EXCLUSIVO COMPLEXO
========================================================== */


/*
| O footer é global no layout público.
|
| Aqui ele recebe apenas ajustes
| quando a página ativa é /complexo.
*/


body.page-complexo footer.footer{


    background:var(--cev-green) !important;


    color:#ffffff;


    padding:


    45px 0 22px;


}






body.page-complexo footer.footer .container{


    width:min(92%,1200px);


    margin:auto;


}






body.page-complexo footer.footer .footer-grid{


    display:grid;


    grid-template-columns:


    1.5fr .9fr 1fr;


    gap:45px;


    align-items:start;


    padding-bottom:30px;


}






body.page-complexo footer.footer .footer-brand{


    max-width:380px;


}






body.page-complexo footer.footer .footer-logo img{


    width:135px;


    height:auto;


    margin-bottom:18px;


}






body.page-complexo footer.footer p{


    color:


    rgba(255,255,255,.85);


    font-size:.86rem;


    line-height:1.65;


}






body.page-complexo footer.footer h3{


    color:#ffffff;


    font-size:1rem;


    font-weight:800;


    margin-bottom:16px;


}






body.page-complexo footer.footer ul{


    padding:0;


    margin:0;


    list-style:none;


}






body.page-complexo footer.footer li{


    margin-bottom:9px;


    color:


    rgba(255,255,255,.85);


    font-size:.86rem;


    line-height:1.5;


}






body.page-complexo footer.footer a{


    color:


    rgba(255,255,255,.90);


    text-decoration:none;


    transition:.3s ease;


}






body.page-complexo footer.footer a:hover{


    color:#ffffff;


}






body.page-complexo footer.footer strong{


    color:#ffffff;


}






body.page-complexo footer.footer .footer-bottom{


    padding-top:18px;


    border-top:


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


    text-align:center;


}






body.page-complexo footer.footer .footer-bottom p{


    margin:0;


    color:


    rgba(255,255,255,.65);


    font-size:.78rem;


}









/* ==========================================================
   AJUSTES GERAIS DE ESPAÇAMENTO
========================================================== */


body.page-complexo main > section{


    position:relative;


}






body.page-complexo .feature-grid-section + .page-location{


    padding-top:70px;


}






body.page-complexo .page-location + .sustainability-section{


    padding-top:75px;


}






body.page-complexo .sustainability-section + .gallery-section{


    padding-top:75px;


}









/* ==========================================================
   RESPONSIVO TABLET
========================================================== */


@media(max-width:1100px){



    body.page-complexo .page-stats-grid{


        grid-template-columns:

        repeat(2,1fr);


    }





    body.page-complexo .feature-grid{


        grid-template-columns:

        repeat(2,1fr);


    }





    body.page-complexo footer.footer .footer-grid{


        grid-template-columns:


        1fr 1fr;


        gap:35px;


    }



}









/* ==========================================================
   RESPONSIVO MOBILE
========================================================== */


@media(max-width:900px){



    body.page-complexo .page-location-grid,
    body.page-complexo .sustainability-grid{


        grid-template-columns:1fr;


        gap:35px;


    }






    body.page-complexo .location-map,
    body.page-complexo .location-map iframe{


        height:300px;


    }






    body.page-complexo .page-gallery{


        grid-template-columns:1fr;


    }






    body.page-complexo .page-gallery-item,
    body.page-complexo .page-gallery-item img{


        height:240px;


    }






    body.page-complexo .page-cta-container{


        flex-direction:column;


        text-align:center;


        gap:25px;


    }






    body.page-complexo .page-cta .btn{


        width:100%;


    }






    body.page-complexo footer.footer .footer-grid{


        grid-template-columns:1fr;


        gap:30px;


    }



}









/* ==========================================================
   MOBILE PEQUENO
========================================================== */


@media(max-width:600px){



    body.page-complexo .container{


        width:90%;


    }






    body.page-complexo .page-stats-grid{


        grid-template-columns:1fr;


    }






    body.page-complexo .feature-grid{


        grid-template-columns:1fr;


    }






    body.page-complexo .gallery-section,
    body.page-complexo .sustainability-section,
    body.page-complexo .feature-grid-section{


        padding:60px 0;


    }






    body.page-complexo footer.footer{


        padding:


        35px 0 18px;


    }



}