/* ==========================================================
   CEV WEBSITE
   style.css

   CSS GLOBAL + HOME
   Componentes CMS em:
   assets/css/components/pages.css
========================================================== */


/* ==========================================================
   RESET
========================================================== */


*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}



body{

    font-family:
        Arial,
        Helvetica,
        sans-serif;


    font-size:16px;


    line-height:1.6;


    color:var(--color-text);


    background:var(--color-white);


    overflow-x:hidden;

}



img{

    display:block;

    max-width:100%;

    height:auto;

}



svg{

    display:block;

}



a{

    color:inherit;

    text-decoration:none;

}



ul,
ol{

    list-style:none;

}



button,
input,
textarea,
select{

    font:inherit;

    border:none;

    background:none;

    outline:none;

}



button{

    cursor:pointer;

}



textarea{

    resize:vertical;

}



:focus-visible{

    outline:

        3px solid var(--color-red);


    outline-offset:3px;

}





/* ==========================================================
   VARIÁVEIS
========================================================== */


:root{


    --color-green:

        #0D5C57;


    --color-green-dark:

        #083F3C;



    --color-red:

        #C63C35;



    --color-red-dark:

        #A72F2A;



    --color-title:

        #17322F;



    --color-text:

        #454545;



    --color-light:

        #F6F7F8;



    --color-border:

        #E5E5E5;



    --color-white:

        #FFFFFF;



    --color-black:

        #000000;



    --container:

        1200px;



    --radius-sm:

        8px;



    --radius:

        18px;



    --radius-lg:

        28px;



    --shadow:

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



    --transition:

        .3s ease;


}





/* ==========================================================
   BASE
========================================================== */


main{

    overflow:hidden;

}



section{

    position:relative;

    padding:90px 0;

}



.container{

    width:min(92%,var(--container));


    margin-inline:auto;

}



.bg-white{

    background:#fff;

}



.bg-light{

    background:var(--color-light);

}



.bg-green{

    background:var(--color-green);

}





/* ==========================================================
   TIPOGRAFIA
========================================================== */


h1,
h2,
h3,
h4,
h5{

    font-weight:700;


    line-height:1.15;


    color:var(--color-title);

}



p{

    line-height:1.8;

}



strong{

    font-weight:800;

}





/* ==========================================================
   ELEMENTOS GERAIS
========================================================== */


.section-tag{

    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:

        8px 18px;



    border-radius:999px;



    background:#EAF5F4;



    color:var(--color-green);



    font-size:.75rem;



    font-weight:800;



    letter-spacing:.15em;



    text-transform:uppercase;



    margin-bottom:22px;

}



.section-header{

    max-width:760px;


    margin:

        0 auto 70px;


    text-align:center;

}



.section-header h2{

    font-size:

        clamp(2rem,5vw,3.5rem);



    margin-bottom:20px;

}



.section-header p{

    color:var(--color-text);

}





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


.btn{

    display:inline-flex;


    align-items:center;


    justify-content:center;



    min-height:54px;



    padding:

        0 32px;



    border-radius:999px;



    font-weight:700;



    transition:var(--transition);



    white-space:nowrap;

}



.btn:hover{

    transform:translateY(-2px);

}



.btn-primary{

    background:var(--color-red);


    color:#fff;

}



.btn-primary:hover{

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

}



.btn-secondary{

    background:var(--color-green);


    color:#fff;

}



.btn-secondary:hover{

    background:var(--color-green-dark);

}



.btn-light{

    background:#fff;


    color:var(--color-green);

}



.btn-outline{

    border:

        2px solid var(--color-green);



    color:var(--color-green);

}



.btn-outline:hover{

    background:var(--color-green);


    color:#fff;

}



.btn-full{

    width:100%;

}


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


.header{

    position:fixed;


    inset:

        0 0 auto 0;


    z-index:1000;


    height:84px;


    background:

        rgba(255,255,255,.96);


    backdrop-filter:

        blur(14px);


    border-bottom:

        1px solid rgba(0,0,0,.05);



    transition:

        var(--transition);

}



.header.scrolled{

    height:64px;


    box-shadow:

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

}





.header-container{

    height:100%;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:20px;

}





.logo{

    width:110px;


    flex-shrink:0;

}



.logo img{

    width:100%;

}





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


.menu{

    margin-left:auto;

}



.menu ul{

    display:flex;


    align-items:center;


    gap:22px;

}



.menu a{

    position:relative;


    font-size:.82rem;


    font-weight:600;


    color:var(--color-title);


    transition:

        var(--transition);

}



.menu a::after{

    content:"";


    position:absolute;


    left:0;


    bottom:-8px;


    width:0;


    height:2px;


    background:var(--color-red);


    transition:

        var(--transition);

}



.menu a:hover,
.menu a.active{

    color:var(--color-red);

}



.menu a:hover::after,
.menu a.active::after{

    width:100%;

}





.header-actions{

    display:flex;


    align-items:center;


    gap:18px;

}





.phone{

    display:flex;


    align-items:center;


    gap:8px;



    font-weight:700;


    color:var(--color-green);

}





/* ==========================================================
   MENU MOBILE
========================================================== */


.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    position:relative;

    z-index:1100;

}



.menu-toggle span{

    width:28px;

    height:3px;

    background:var(--color-green);

    border-radius:20px;

    transition:

        var(--transition);

}




/* ==========================================================
   MENU MOBILE ABERTO
========================================================== */


@media(max-width:900px){


    .menu{

        position:fixed;

        top:84px;

        left:0;

        width:100%;

        height:

            calc(100vh - 84px);


        background:#ffffff;


        display:flex;


        align-items:flex-start;


        justify-content:center;


        padding:40px 25px;


        transform:

            translateX(100%);


        opacity:0;


        visibility:hidden;


        transition:

            var(--transition);


        z-index:1050;


        overflow-y:auto;


    }



    .menu.active{

        transform:

            translateX(0);


        opacity:1;


        visibility:visible;


    }



    .menu ul{

        width:100%;


        display:flex;


        flex-direction:column;


        align-items:center;


        gap:28px;


    }



    .menu a{

        font-size:1.1rem;


        font-weight:700;

    }



    .menu-toggle{

        display:flex;

    }




    /* botão hamburger -> X */


    .menu-toggle.active span:nth-child(1){

        transform:

            translateY(9px)

            rotate(45deg);

    }



    .menu-toggle.active span:nth-child(2){

        opacity:0;

    }



    .menu-toggle.active span:nth-child(3){

        transform:

            translateY(-9px)

            rotate(-45deg);

    }



    body.menu-open{

        overflow:hidden;

    }


}




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


.hero{

    position:relative;


    min-height:720px;


    display:flex;


    align-items:center;


    overflow:hidden;


    isolation:isolate;


    padding-top:84px;

}





.hero-image{

    position:absolute;


    inset:0;


    width:100%;


    height:100%;


    object-fit:cover;


    z-index:-3;

}





.hero-overlay{

    position:absolute;


    inset:0;


    z-index:-2;


    background:

        linear-gradient(

            90deg,

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

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

            rgba(6,35,32,.18)

        );

}





.hero-container{

    display:flex;


    align-items:center;

}





.hero-content{

    max-width:560px;


    padding:70px 0;

}





.hero-tag{

    display:inline-flex;


    padding:

        8px 20px;



    margin-bottom:25px;



    border-radius:999px;



    background:

        var(--color-red);



    color:#fff;



    font-size:.72rem;



    font-weight:800;



    letter-spacing:.15em;



    text-transform:uppercase;

}





.hero h1{

    color:#fff;



    font-size:

        clamp(3rem,5vw,4.8rem);



    font-weight:900;



    line-height:.95;



    letter-spacing:-2px;



    margin-bottom:28px;

}





.hero p{

    max-width:480px;


    color:

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



    font-size:1.05rem;



    margin-bottom:42px;

}





.hero-buttons{

    display:flex;


    flex-wrap:wrap;


    gap:18px;

}





.hero-buttons .btn{

    min-width:210px;

}





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


.hero-stats{

    display:grid;


    grid-template-columns:

        repeat(4,1fr);



    gap:18px;



    max-width:760px;



    margin-top:40px;

}





.hero-stat{

    min-height:110px;



    padding:20px;



    display:flex;



    flex-direction:column;



    align-items:center;



    justify-content:center;



    text-align:center;



    border-radius:16px;



    background:

        rgba(255,255,255,.18);



    border:

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



    backdrop-filter:

        blur(12px);

}





.hero-stat strong{

    color:#fff;



    font-size:2.2rem;



    line-height:1;

}





.hero-stat span{

    color:

        rgba(255,255,255,.9);



    font-size:.8rem;



    margin-top:8px;

}


/* ==========================================================
   HOME HIGHLIGHTS
========================================================== */


.highlights{

    margin-top:-40px;


    position:relative;


    z-index:20;


}



.highlights-grid{

    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:28px;


}





.highlight-card{

    min-height:220px;


    padding:35px;


    border-radius:18px;


    color:#fff;


    box-shadow:

        var(--shadow);


    transition:

        var(--transition);

}



.highlight-card:hover{

    transform:translateY(-8px);

}



.highlight-primary{

    background:

        linear-gradient(

            135deg,

            #0D5C57,

            #08736B

        );

}



.highlight-secondary{

    background:

        linear-gradient(

            135deg,

            #C63C35,

            #D9534B

        );

}



.highlight-dark{

    background:

        linear-gradient(

            135deg,

            #203337,

            #30474B

        );

}





.highlight-icon{

    width:55px;


    height:55px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

        rgba(255,255,255,.18);


    margin-bottom:20px;

}





.highlight-icon img{

    width:26px;


    height:26px;


    filter:

        brightness(0) invert(1);

}





.highlight-card h2{

    color:#fff;


    font-size:1.35rem;


    margin-bottom:12px;

}





.highlight-card p{

    color:

        rgba(255,255,255,.9);


    font-size:.95rem;

}





/* ==========================================================
   HOME BENEFITS
========================================================== */


.why-section{

    background:

        var(--color-light);

}





.benefits-grid{

    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:30px;

}





.benefit-card{

    background:#fff;


    padding:38px;


    border-radius:22px;


    box-shadow:

        var(--shadow);


    transition:

        var(--transition);

}





.benefit-card:hover{

    transform:translateY(-8px);

}





.benefit-number{

    width:54px;


    height:54px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

        var(--color-green);


    color:#fff;


    font-weight:700;


    margin-bottom:22px;

}





.benefit-card h3{

    font-size:1.3rem;


    margin-bottom:15px;

}





.benefit-card p{

    color:

        var(--color-text);

}





/* ==========================================================
   ÁREAS DISPONÍVEIS
========================================================== */


.featured-areas{

    background:#fff;

}





.areas-grid{

    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:30px;

}





.area-card{

    overflow:hidden;


    background:#fff;


    border-radius:22px;


    box-shadow:

        var(--shadow);


    transition:

        var(--transition);

}





.area-card:hover{

    transform:translateY(-8px);

}





.area-carousel{

    height:270px;


    overflow:hidden;


    position:relative;

}





.area-carousel img{

    width:100%;


    height:100%;


    object-fit:cover;

}





.area-body{

    padding:30px;

}





.area-category{

    display:inline-block;


    padding:

        6px 14px;



    border-radius:999px;



    background:#EAF5F4;



    color:

        var(--color-green);



    font-size:.75rem;



    font-weight:700;



    margin-bottom:15px;

}





.area-body h3{

    font-size:1.35rem;


    margin-bottom:12px;

}





.area-body p{

    margin-bottom:25px;

}





/* ==========================================================
   EMPRESAS
========================================================== */


.companies{

    background:

        var(--color-light);


    overflow:hidden;

}





.companies-carousel{

    overflow:hidden;

}





.companies-track{

    display:flex;


    gap:25px;


    width:max-content;

}





.company-logo{

    width:220px;


    min-height:100px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#fff;


    border-radius:18px;


    padding:20px;


    box-shadow:

        var(--shadow);

}





.company-logo img{

    max-width:170px;


    max-height:70px;


    object-fit:contain;


    filter:

        grayscale(100%);


    opacity:.75;

}





.company-logo:hover img{

    filter:none;


    opacity:1;

}





.companies-action{

    display:flex;


    justify-content:center;


    margin-top:45px;

}





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


.contact-section{

    background:#fff;

}





.contact-wrapper{

    display:grid;


    grid-template-columns:

        1fr 1fr;


    gap:70px;


    align-items:start;

}





.contact-info h2{

    font-size:

        clamp(2.2rem,4vw,3.5rem);


    margin-bottom:20px;

}





.contact-info p{

    margin-bottom:35px;

}





.contact-form{

    background:#fff;


    padding:45px;


    border-radius:28px;


    box-shadow:

        var(--shadow);

}





.contact-form form{

    display:flex;


    flex-direction:column;


    gap:20px;

}





.form-group{

    display:flex;


    flex-direction:column;

}





.form-group label{

    font-weight:700;


    margin-bottom:8px;

}





.form-group input,
.form-group textarea{

    padding:15px;


    border:

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


    border-radius:12px;

}





.form-group textarea{

    min-height:170px;

}





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


.cta-section{

    background:

        linear-gradient(

            135deg,

            var(--color-red),

            var(--color-red-dark)

        );

}





.cta-box{

    text-align:center;


    max-width:850px;


    margin:auto;

}





.cta-box h2{

    color:#fff;


    font-size:

        clamp(2.2rem,5vw,3.8rem);


    margin-bottom:20px;

}





.cta-box p{

    color:

        rgba(255,255,255,.9);


    margin-bottom:35px;

}


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


.footer{

    background:#172125;


    color:#ddd;


    padding:

        90px 0 35px;

}





.footer-grid{

    display:grid;


    grid-template-columns:

        1.5fr 1fr 1.2fr;


    gap:80px;


    align-items:start;

}





.footer-logo{

    display:block;


    width:220px;


    max-width:100%;


    margin-bottom:28px;

}





.footer-logo img{

    width:100%;


    height:auto;


    object-fit:contain;

}





.footer-brand p{

    color:#bbb;


    max-width:320px;


    line-height:1.8;


    font-size:.95rem;

}





.footer h3{

    color:#fff;


    margin-bottom:22px;


    font-size:1.15rem;


    font-weight:700;

}





.footer ul{

    display:flex;


    flex-direction:column;


    gap:14px;

}





.footer a{

    color:#ccc;


    transition:

        var(--transition);

}





.footer a:hover{

    color:#fff;

}





.footer-contact strong{

    display:block;


    color:#fff;


    margin-bottom:5px;

}





.footer-contact span{

    color:#ccc;


    line-height:1.7;

}





.footer-bottom{

    margin-top:60px;


    padding-top:30px;


    border-top:

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


    text-align:center;

}





.footer-bottom p{

    color:#999;


    font-size:.85rem;

}





/* ==========================================================
   RESPONSIVO HOME
========================================================== */


@media(max-width:1100px){


    .hero-stats{

        grid-template-columns:

            repeat(2,1fr);

    }



    .highlights-grid,
    .benefits-grid,
    .areas-grid{

        grid-template-columns:

            repeat(2,1fr);

    }


}





@media(max-width:900px){


    .header-actions .phone{

        display:none;

    }


    .menu-toggle{

        display:flex;

    }


    .contact-wrapper{

        grid-template-columns:

            1fr;

    }


    .footer-grid{

        grid-template-columns:

            1fr;

    }


}


    .contact-wrapper{

        grid-template-columns:

            1fr;

    }



    .footer-grid{

        grid-template-columns:

            1fr;

    }


}





@media(max-width:700px){


    section{

        padding:

            70px 0;

    }



    .hero{

        min-height:

            650px;

    }



    .hero h1{

        font-size:

            2.8rem;

    }



    .hero-stats,
    .highlights-grid,
    .benefits-grid,
    .areas-grid{

        grid-template-columns:

            1fr;

    }



    .contact-form{

        padding:

            30px;

    }


}





@media(max-width:600px){


    .footer{

        padding:

            70px 0 30px;

    }



    .footer-logo{

        width:

            200px;

    }


}