/* ==========================================================
   CEV CMS COMPONENTS
   pages.css

   Componentes institucionais carregados pelo CMS
========================================================== */


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


.page-hero{

    position:relative;

    min-height:760px;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#fff;

}



.page-hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:1;

}



.page-hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(4,42,39,.88),
            rgba(4,42,39,.45),
            rgba(4,42,39,.15)
        );

    z-index:2;

}



.page-hero-container{

    position:relative;

    z-index:3;

}



.page-hero-content{

    max-width:650px;

}



.page-hero-tag{

    display:inline-flex;

    padding:8px 18px;

    border-radius:50px;

    background:#C63C35;

    color:#fff;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:28px;

}



.page-hero h1{

    color:#fff;

    font-size:clamp(3rem,5vw,4.8rem);

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:25px;

}



.page-hero p{

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

    max-width:540px;

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:35px;

}



.page-hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



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


.page-stats{

    position:relative;

    margin-top:-70px;

    z-index:10;

}



.page-stats-container{

    display:grid;

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

    gap:20px;

}



.page-stat-card{

    background:#fff;

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

}



.page-stat-card strong{

    display:block;

    color:#0D5C57;

    font-size:2.6rem;

    line-height:1;

    margin-bottom:12px;

}



.page-stat-card span{

    color:#555;

    font-size:.95rem;

}



/* ==========================================================
   FEATURE GRID
========================================================== */


.page-feature-grid{

    padding:110px 0;

}



.page-feature-header{

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

}



.page-feature-header h2{

    font-size:clamp(2.2rem,4vw,3.4rem);

    margin-bottom:18px;

}



.page-feature-header p{

    color:#666;

}



.page-feature-items{

    display:grid;

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

    gap:30px;

}



.page-feature-card{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:20px;

    padding:35px;

    transition:.3s ease;

}



.page-feature-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.10);

}



.page-feature-icon{

    width:55px;

    height:55px;

    margin-bottom:25px;

}



.page-feature-card h3{

    margin-bottom:15px;

    font-size:1.35rem;

}



.page-feature-card p{

    color:#666;

}



/* ==========================================================
   SPLIT SECTION
========================================================== */


.page-split{

    padding:100px 0;

    background:#f6f7f8;

}



.page-split-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.page-split-image img{

    width:100%;

    border-radius:25px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.15);

}



.page-split h2{

    font-size:clamp(2rem,4vw,3.2rem);

    margin-bottom:25px;

}



.page-split p{

    margin-bottom:25px;

}



.page-split-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:35px;

}



.page-split-list li{

    position:relative;

    padding-left:28px;

}



.page-split-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#C63C35;

    font-weight:bold;

}



/* ==========================================================
   GALLERY
========================================================== */


.page-gallery{

    padding:110px 0;

}



.page-gallery-header{

    text-align:center;

    margin-bottom:55px;

}



.page-gallery-grid{

    display:grid;

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

    gap:25px;

}



.page-gallery-item{

    overflow:hidden;

    border-radius:20px;

}



.page-gallery-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.4s ease;

}



.page-gallery-item:hover img{

    transform:scale(1.05);

}



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


.page-cta{

    padding:90px 0;

    background:
        linear-gradient(
            135deg,
            #C63C35,
            #A72F2A
        );

    color:#fff;

}



.page-cta-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}



.page-cta h2{

    color:#fff;

    font-size:clamp(2rem,4vw,3.5rem);

    margin-bottom:20px;

}



.page-cta p{

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

    max-width:650px;

}



.page-cta-actions{

    flex-shrink:0;

}



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


@media(max-width:992px){


    .page-stats-container{

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

    }


    .page-feature-items{

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

    }


    .page-split-container{

        grid-template-columns:1fr;

    }


    .page-gallery-grid{

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

    }


    .page-cta-container{

        flex-direction:column;

        text-align:center;

    }


}



@media(max-width:600px){


    .page-hero{

        min-height:650px;

    }


    .page-hero h1{

        font-size:2.8rem;

    }


    .page-stats-container,

    .page-feature-items,

    .page-gallery-grid{

        grid-template-columns:1fr;

    }


}