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

   regiao.css

   Página:
   /regiao

   Compatível com os componentes CMS reais:

   Hero
   page-hero

   Stats
   regiao-stats

   Feature Grid
   regiao-benefits

   Split
   regiao-panorama

   Location
   regiao-location

   Sustainability
   sustainability-section

   Gallery
   regiao-gallery

   CTA
   page-cta

   Observação:
   Este arquivo NÃO depende de pages.css.

   A página /regiao utiliza:

   style.css
   regiao.css

   PRINCÍPIO DE ISOLAMENTO:
   Todas as regras visuais específicas da página são
   limitadas ao conteúdo de <main>, evitando interferência
   no Header e Footer globais.
   ========================================================== */


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

body.page-regiao {

    --regiao-green: #0D5C57;
    --regiao-green-dark: #083F3C;
    --regiao-green-deep: #062F2C;

    --regiao-red: #C63C35;
    --regiao-red-dark: #A72F2A;

    --regiao-title: #17322F;
    --regiao-text: #4C4C4C;
    --regiao-muted: #66737A;

    --regiao-light: #F6F7F8;
    --regiao-light-green: #EAF5F4;

    --regiao-border: #E5EAEA;

    --regiao-white: #FFFFFF;

    --regiao-radius: 22px;
    --regiao-radius-lg: 28px;

    --regiao-shadow:
        0 20px 60px rgba(0, 0, 0, .10);

    --regiao-shadow-soft:
        0 12px 35px rgba(0, 0, 0, .07);

    --regiao-transition:
        .30s ease;

    --regiao-container:
        1200px;
}


/* ==========================================================
   BASE DA PÁGINA
   ========================================================== */

body.page-regiao {

    color:
        var(--regiao-text);

    background:
        #fff;

    overflow-x:
        hidden;
}


/*
 * IMPORTANTE:
 * A partir daqui, regras genéricas são limitadas ao <main>.
 * Isso impede que o CSS da Região altere logo, imagens,
 * botões, textos ou containers do Header/Footer.
 */

body.page-regiao main img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;
}


body.page-regiao main .container {

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

    margin-inline:
        auto;
}


body.page-regiao main h1,
body.page-regiao main h2,
body.page-regiao main h3 {

    color:
        var(--regiao-title);

    font-weight:
        700;

    line-height:
        1.15;
}


body.page-regiao main p {

    color:
        var(--regiao-text);

    line-height:
        1.8;
}


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

body.page-regiao main .page-hero {

    position:
        relative;

    min-height:
        720px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    /*
     * Removido o padding-top de 84px.
     *
     * O Header já possui sua própria altura.
     * Esse padding estava reduzindo desnecessariamente
     * a área útil do Hero.
     */
    padding:
        0;

    color:
        #fff;
}


/* ==========================================================
   FUNDO DO HERO
   ========================================================== */

body.page-regiao main .page-hero-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;
}


body.page-regiao main .page-hero-background img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;
}


/* ==========================================================
   OVERLAY DO HERO
   ========================================================== */

body.page-regiao main .page-hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(6, 35, 32, .92) 0%,
            rgba(6, 35, 32, .70) 45%,
            rgba(6, 35, 32, .30) 100%
        );

    pointer-events:
        none;
}


/* ==========================================================
   CONTAINER DO HERO
   ========================================================== */

body.page-regiao main .page-hero-container {

    position:
        relative;

    z-index:
        2;

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

    margin-inline:
        auto;
}


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

body.page-regiao main .page-hero-content {

    width:
        100%;

    max-width:
        620px;

    /*
     * Antes:
     *
     * padding: 80px 0;
     *
     * O conteúdo já está centralizado pelo flex do Hero.
     * Esse padding adicionava 160px artificiais à altura
     * do conteúdo.
     */
    padding:
        0;
}


/* ==========================================================
   TAG DO HERO
   ========================================================== */

body.page-regiao main .page-hero-tag {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        8px 20px;

    margin-bottom:
        18px;

    border-radius:
        999px;

    background:
        var(--regiao-red);

    color:
        #fff;

    font-size:
        .72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


/* ==========================================================
   TÍTULO DO HERO
   ========================================================== */

body.page-regiao main .page-hero h1 {

    max-width:
        600px;

    margin:
        0 0 22px;

    color:
        #fff;

    /*
     * Redução controlada:
     *
     * Antes: 3rem / 5vw / 4.8rem
     *
     * Agora o título continua grande e forte,
     * mas libera espaço vertical para descrição e botão.
     */
    font-size:
        clamp(
            3rem,
            4.5vw,
            4.25rem
        );

    line-height:
        .98;

    font-weight:
        900;

    letter-spacing:
        -1.8px;
}


/* ==========================================================
   TEXTO DO HERO
   ========================================================== */

body.page-regiao main .page-hero p {

    max-width:
        550px;

    margin:
        0 0 26px;

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

    font-size:
        1rem;

    line-height:
        1.6;
}


/* ==========================================================
   AÇÕES DO HERO
   ========================================================== */

body.page-regiao main .page-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        16px;
}


/* ==========================================================
   BOTÕES DA REGIÃO
   ========================================================== */

/*
 * IMPORTANTE:
 * Antes era:
 *
 * body.page-regiao .btn
 *
 * Isso atingia também o botão do Header.
 *
 * Agora:
 *
 * body.page-regiao main .btn
 *
 * Portanto, o Header continua sendo controlado
 * exclusivamente pelo style.css.
 */

body.page-regiao main .btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        54px;

    padding:
        0 34px;

    border-radius:
        999px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        transform var(--regiao-transition),
        background-color var(--regiao-transition),
        color var(--regiao-transition),
        border-color var(--regiao-transition),
        box-shadow var(--regiao-transition);
}


body.page-regiao main .btn-primary {

    background:
        var(--regiao-red);

    color:
        #fff;
}


body.page-regiao main .btn-primary:hover {

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

    color:
        #fff;

    transform:
        translateY(-2px);
}


body.page-regiao main .btn-secondary {

    background:
        var(--regiao-green);

    color:
        #fff;
}


body.page-regiao main .btn-secondary:hover {

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

    color:
        #fff;

    transform:
        translateY(-2px);
}


/* ==========================================================
   TAG CLARA DOS COMPONENTES
   ========================================================== */

body.page-regiao main .regiao-tag-light {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        8px 18px;

    margin-bottom:
        20px;

    border-radius:
        999px;

    background:
        var(--regiao-light-green);

    color:
        var(--regiao-green);

    font-size:
        .72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


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

body.page-regiao main .regiao-stats {

    padding:
        95px 0;

    background:
        var(--regiao-light);
}


body.page-regiao main .regiao-stats-header {

    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


body.page-regiao main .regiao-stats-header h2 {

    margin:
        0 0 18px;

    color:
        var(--regiao-title);

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

    line-height:
        1.12;

    font-weight:
        800;
}


body.page-regiao main .regiao-stats-header p {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        var(--regiao-muted);

    font-size:
        1rem;

    line-height:
        1.75;
}


body.page-regiao main .regiao-stats-grid {

    display:
        grid;

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

    gap:
        24px;
}


body.page-regiao main .regiao-stat {

    position:
        relative;

    min-width:
        0;

    min-height:
        165px;

    overflow:
        hidden;

    padding:
        32px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border-radius:
        var(--regiao-radius);

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--regiao-green),
            #08736B
        );

    box-shadow:
        var(--regiao-shadow);

    transition:
        transform var(--regiao-transition),
        box-shadow var(--regiao-transition);
}


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

    background:
        linear-gradient(
            135deg,
            var(--regiao-red),
            #D9534B
        );
}


body.page-regiao main .regiao-stat::before {

    content:
        "";

    position:
        absolute;

    top:
        -55px;

    right:
        -55px;

    width:
        130px;

    height:
        130px;

    border-radius:
        50%;

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

    pointer-events:
        none;
}


body.page-regiao main .regiao-stat:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 30px 60px rgba(
            0,
            0,
            0,
            .16
        );
}


body.page-regiao main .regiao-stat strong {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    color:
        #fff;

    font-size:
        clamp(
            2.4rem,
            3vw,
            3.1rem
        );

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -1.5px;
}


body.page-regiao main .regiao-stat span {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    max-width:
        180px;

    margin-top:
        12px;

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

    font-size:
        .9rem;

    line-height:
        1.45;

    font-weight:
        700;
}


/* ==========================================================
   FEATURE GRID / BENEFÍCIOS
   ========================================================== */

body.page-regiao main .regiao-benefits {

    padding:
        110px 0;

    background:
        #fff;
}


body.page-regiao main .regiao-section-header {

    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto 65px;

    text-align:
        center;
}


body.page-regiao main .regiao-section-header h2 {

    margin:
        0 0 20px;

    color:
        var(--regiao-title);

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

    line-height:
        1.15;

    font-weight:
        800;
}


body.page-regiao main .regiao-section-header p {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        var(--regiao-muted);

    font-size:
        1.05rem;

    line-height:
        1.8;
}


body.page-regiao main .regiao-benefits-grid {

    display:
        grid;

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

    gap:
        30px;
}


body.page-regiao main .regiao-benefit-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    height:
        100%;

    min-height:
        250px;

    padding:
        38px;

    overflow:
        hidden;

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

    border-radius:
        var(--regiao-radius);

    background:
        #fff;

    box-shadow:
        var(--regiao-shadow-soft);

    transition:
        transform var(--regiao-transition),
        box-shadow var(--regiao-transition),
        border-color var(--regiao-transition);
}


body.page-regiao main .regiao-benefit-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        5px;

    height:
        0;

    background:
        var(--regiao-green);

    transition:
        height var(--regiao-transition);
}


body.page-regiao main .regiao-benefit-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--regiao-green);

    box-shadow:
        0 24px 55px rgba(
            13,
            92,
            87,
            .14
        );
}


body.page-regiao main .regiao-benefit-card:hover::before {

    height:
        100%;
}


body.page-regiao main .regiao-benefit-icon {

    width:
        68px;

    height:
        68px;

    flex:
        0 0 68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border-radius:
        50%;

    background:
        var(--regiao-green);

    color:
        #fff;

    box-shadow:
        0 10px 25px rgba(
            13,
            92,
            87,
            .16
        );

    transition:
        transform var(--regiao-transition),
        background-color var(--regiao-transition);
}


body.page-regiao main .regiao-benefit-card:hover .regiao-benefit-icon {

    transform:
        rotate(-6deg);
}


body.page-regiao main .regiao-benefit-icon img {

    display:
        block;

    width:
        34px;

    height:
        34px;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        brightness(0) invert(1);
}


body.page-regiao main .regiao-benefit-icon .feature-icon-check {

    color:
        #fff;

    font-size:
        1.7rem;

    line-height:
        1;

    font-weight:
        900;
}


body.page-regiao main .regiao-benefit-card h3 {

    margin:
        0 0 14px;

    color:
        var(--regiao-title);

    font-size:
        1.25rem;

    line-height:
        1.3;

    font-weight:
        800;
}


body.page-regiao main .regiao-benefit-card p {

    margin:
        auto 0 0;

    color:
        var(--regiao-text);

    font-size:
        .95rem;

    line-height:
        1.75;
}


/* ==========================================================
   PANORAMA / SPLIT
   ========================================================== */

body.page-regiao main .regiao-panorama {

    padding:
        110px 0;

    background:
        #fff;
}


body.page-regiao main .regiao-panorama:nth-of-type(even) {

    background:
        var(--regiao-light);
}


body.page-regiao main .regiao-panorama-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        70px;

    align-items:
        center;
}


body.page-regiao main .regiao-panorama-grid.reverse {

    direction:
        rtl;
}


body.page-regiao main .regiao-panorama-grid.reverse > * {

    direction:
        ltr;
}


body.page-regiao main .regiao-panorama-content {

    min-width:
        0;
}


body.page-regiao main .regiao-panorama-content h2 {

    margin:
        0 0 24px;

    color:
        var(--regiao-title);

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

    line-height:
        1.15;

    font-weight:
        800;
}


body.page-regiao main .regiao-panorama-content > p {

    margin:
        0 0 24px;

    color:
        var(--regiao-text);

    line-height:
        1.8;
}


body.page-regiao main .regiao-panorama-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;

    margin:
        30px 0;

    padding:
        0;

    list-style:
        none;
}


body.page-regiao main .regiao-panorama-list li {

    position:
        relative;

    padding-left:
        30px;

    color:
        var(--regiao-title);

    font-weight:
        600;

    line-height:
        1.6;
}


body.page-regiao main .regiao-panorama-list li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    top:
        0;

    color:
        var(--regiao-green);

    font-weight:
        900;
}


body.page-regiao main .regiao-panorama-actions {

    margin-top:
        30px;
}


body.page-regiao main .regiao-panorama-image {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        stretch;

    border-radius:
        var(--regiao-radius-lg);

    background:
        #ECECEC;

    box-shadow:
        var(--regiao-shadow);
}


body.page-regiao main .regiao-panorama-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


body.page-regiao main .regiao-panorama-image .split-placeholder {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #ECECEC;

    color:
        #777;

    font-size:
        .9rem;

    font-weight:
        700;
}


body.page-regiao main .regiao-panorama-image.image-error {

    background:
        #ECECEC;
}


/* ==========================================================
   LOCATION
   ========================================================== */

body.page-regiao main .regiao-location {

    padding:
        100px 0;

    background:
        var(--regiao-light);
}


body.page-regiao main .regiao-location-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        70px;

    align-items:
        center;
}


body.page-regiao main .regiao-location-content {

    min-width:
        0;
}


body.page-regiao main .regiao-location-content h2 {

    margin:
        0 0 22px;

    color:
        var(--regiao-title);

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

    line-height:
        1.15;

    font-weight:
        800;
}


body.page-regiao main .regiao-location-content > p {

    margin:
        0;

    color:
        var(--regiao-text);

    line-height:
        1.8;
}


body.page-regiao main .regiao-access-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    margin-top:
        30px;
}


body.page-regiao main .regiao-access-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    min-width:
        0;
}


body.page-regiao main .regiao-access-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--regiao-green);

    color:
        #fff;

    font-size:
        .95rem;

    line-height:
        1;

    font-weight:
        900;
}


body.page-regiao main .regiao-access-content {

    min-width:
        0;
}


body.page-regiao main .regiao-access-content h3 {

    margin:
        0 0 5px;

    color:
        var(--regiao-title);

    font-size:
        1rem;

    line-height:
        1.35;

    font-weight:
        800;
}


body.page-regiao main .regiao-access-content p {

    margin:
        0;

    color:
        var(--regiao-muted);

    font-size:
        .92rem;

    line-height:
        1.6;
}


body.page-regiao main .regiao-location-image {

    width:
        100%;

    min-width:
        0;

    min-height:
        520px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        var(--regiao-radius-lg);

    background:
        #fff;

    box-shadow:
        var(--regiao-shadow);

    transition:
        transform var(--regiao-transition),
        box-shadow var(--regiao-transition);
}


body.page-regiao main .regiao-location-image:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 28px 60px rgba(
            0,
            0,
            0,
            .13
        );
}


body.page-regiao main .regiao-location-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        520px;

    object-fit:
        contain;

    padding:
        28px;
}


body.page-regiao main .regiao-location-image iframe {

    display:
        block;

    width:
        100%;

    height:
        520px;

    min-height:
        520px;

    border:
        0;
}


body.page-regiao main .regiao-location-image .image-placeholder {

    width:
        100%;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #ECECEC;

    color:
        #777;

    font-size:
        .9rem;

    font-weight:
        700;
}


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

body.page-regiao main .sustainability-section {

    padding:
        100px 0;

    background:
        #fff;
}


body.page-regiao main .sustainability-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:
        70px;

    align-items:
        center;
}


body.page-regiao main .sustainability-image {

    min-width:
        0;

    overflow:
        hidden;

    border-radius:
        var(--regiao-radius-lg);

    background:
        #ECECEC;

    box-shadow:
        var(--regiao-shadow);
}


body.page-regiao main .sustainability-carousel {

    position:
        relative;

    width:
        100%;

    min-height:
        520px;

    overflow:
        hidden;
}


body.page-regiao main .sustainability-slide {

    display:
        none;

    width:
        100%;

    height:
        100%;
}


body.page-regiao main .sustainability-slide.active {

    display:
        block;
}


body.page-regiao main .sustainability-slide img {

    display:
        block;

    width:
        100%;

    height:
        520px;

    object-fit:
        cover;

    object-position:
        center;
}


body.page-regiao main .sustainability-content {

    min-width:
        0;
}


body.page-regiao main .sustainability-content .section-tag {

    margin-bottom:
        18px;
}


body.page-regiao main .sustainability-content h2 {

    margin:
        0 0 24px;

    color:
        var(--regiao-title);

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

    line-height:
        1.15;

    font-weight:
        800;
}


body.page-regiao main .sustainability-content > p {

    margin:
        0;

    color:
        var(--regiao-text);

    line-height:
        1.8;
}


body.page-regiao main .sustainability-items {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    margin-top:
        32px;
}


body.page-regiao main .sustainability-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;
}


body.page-regiao main .sustainability-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--regiao-green);

    color:
        #fff;

    font-weight:
        900;
}


body.page-regiao main .sustainability-item p {

    margin:
        0;

    color:
        var(--regiao-text);

    line-height:
        1.65;
}


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

body.page-regiao main .regiao-gallery {

    padding:
        100px 0;

    background:
        #fff;
}


body.page-regiao main .regiao-gallery-header {

    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;
}


body.page-regiao main .regiao-gallery-header h2 {

    margin:
        0 0 18px;

    color:
        var(--regiao-title);

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

    line-height:
        1.15;

    font-weight:
        800;
}


body.page-regiao main .regiao-gallery-header p {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        var(--regiao-muted);

    line-height:
        1.7;
}


body.page-regiao main .regiao-gallery-grid {

    display:
        grid;

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

    gap:
        24px;
}


body.page-regiao main .regiao-gallery-item {

    position:
        relative;

    min-width:
        0;

    height:
        320px;

    overflow:
        hidden;

    margin:
        0;

    border-radius:
        var(--regiao-radius);

    background:
        #E9EEEE;
}


body.page-regiao main .regiao-gallery-item img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .45s ease;
}


body.page-regiao main .regiao-gallery-item:hover img {

    transform:
        scale(1.08);
}


body.page-regiao main .regiao-gallery-overlay {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    padding:
        42px 22px 20px;

    background:
        linear-gradient(
            transparent,
            rgba(
                0,
                0,
                0,
                .78
            )
        );

    pointer-events:
        none;
}


body.page-regiao main .regiao-gallery-overlay span {

    color:
        #fff;

    font-size:
        .95rem;

    line-height:
        1.4;

    font-weight:
        700;
}


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

body.page-regiao main .page-cta {

    padding:
        100px 0;

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

    color:
        #fff;
}


body.page-regiao main .page-cta-container {

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

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


body.page-regiao main .page-cta-content {

    max-width:
        700px;
}


body.page-regiao main .page-cta-content h2 {

    margin:
        0 0 22px;

    color:
        #fff;

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

    line-height:
        1.1;

    font-weight:
        800;
}


body.page-regiao main .page-cta-content p {

    max-width:
        650px;

    margin:
        0;

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

    line-height:
        1.8;
}


body.page-regiao main .page-cta-actions {

    flex:
        0 0 auto;
}


body.page-regiao main .page-cta-actions .btn {

    min-height:
        58px;

    padding:
        0 40px;

    background:
        #fff;

    color:
        var(--regiao-green);

    box-shadow:
        0 10px 25px rgba(
            0,
            0,
            0,
            .10
        );
}


body.page-regiao main .page-cta-actions .btn:hover {

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

    color:
        #fff;

    transform:
        translateY(-2px);
}


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

@media (max-width: 1100px) {

    body.page-regiao main .regiao-stats-grid {

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


    body.page-regiao main .regiao-benefits-grid {

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


    body.page-regiao main .regiao-panorama-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    body.page-regiao main .regiao-panorama-grid.reverse {

        direction:
            ltr;
    }


    body.page-regiao main .regiao-panorama-image {

        min-height:
            420px;
    }


    body.page-regiao main .regiao-location-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    body.page-regiao main .regiao-gallery-grid {

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


    body.page-regiao main .sustainability-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    body.page-regiao main .page-cta-container {

        gap:
            30px;
    }
}


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

@media (max-width: 900px) {

    body.page-regiao main .page-hero {

        min-height:
            620px;
    }


    body.page-regiao main .page-hero-content {

        max-width:
            100%;

        text-align:
            center;

        margin-inline:
            auto;

        padding:
            0;
    }


    body.page-regiao main .page-hero h1 {

        max-width:
            700px;

        margin-inline:
            auto;

        font-size:
            clamp(
                2.8rem,
                6vw,
                4rem
            );
    }


    body.page-regiao main .page-hero p {

        max-width:
            650px;

        margin-left:
            auto;

        margin-right:
            auto;
    }


    body.page-regiao main .page-hero-actions {

        justify-content:
            center;
    }


    body.page-regiao main .page-cta-container {

        flex-direction:
            column;

        text-align:
            center;
    }


    body.page-regiao main .page-cta-content {

        max-width:
            760px;
    }


    body.page-regiao main .page-cta-actions {

        width:
            100%;

        display:
            flex;

        justify-content:
            center;
    }
}


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

@media (max-width: 700px) {

    body.page-regiao main .container,
    body.page-regiao main .page-hero-container,
    body.page-regiao main .page-cta-container {

        width:
            calc(100% - 30px);
    }


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

    body.page-regiao main .page-hero {

        min-height:
            560px;

        padding:
            0;
    }


    body.page-regiao main .page-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(6, 35, 32, .94) 0%,
                rgba(6, 35, 32, .80) 65%,
                rgba(6, 35, 32, .55) 100%
            );
    }


    body.page-regiao main .page-hero-content {

        padding:
            0;

        text-align:
            center;
    }


    body.page-regiao main .page-hero-tag {

        margin-bottom:
            16px;
    }


    body.page-regiao main .page-hero h1 {

        max-width:
            100%;

        margin-bottom:
            20px;

        font-size:
            2.8rem;

        line-height:
            .98;

        letter-spacing:
            -1.3px;
    }


    body.page-regiao main .page-hero p {

        max-width:
            100%;

        margin-bottom:
            24px;

        font-size:
            .98rem;

        line-height:
            1.55;
    }


    body.page-regiao main .page-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;

        gap:
            12px;
    }


    body.page-regiao main .page-hero-actions .btn {

        width:
            100%;
    }


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

    body.page-regiao main .regiao-stats {

        padding:
            70px 0;
    }


    body.page-regiao main .regiao-stats-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    body.page-regiao main .regiao-stat {

        min-height:
            125px;

        padding:
            26px 20px;
    }


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

    body.page-regiao main .regiao-benefits {

        padding:
            75px 0;
    }


    body.page-regiao main .regiao-section-header {

        margin-bottom:
            40px;
    }


    body.page-regiao main .regiao-section-header h2 {

        font-size:
            2rem;
    }


    body.page-regiao main .regiao-section-header p {

        font-size:
            .95rem;
    }


    body.page-regiao main .regiao-benefits-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    body.page-regiao main .regiao-benefit-card {

        min-height:
            0;

        padding:
            30px;
    }


    /* ======================================================
       PANORAMA
       ====================================================== */

    body.page-regiao main .regiao-panorama {

        padding:
            75px 0;
    }


    body.page-regiao main .regiao-panorama-grid {

        gap:
            35px;
    }


    body.page-regiao main .regiao-panorama-content h2 {

        font-size:
            2rem;
    }


    body.page-regiao main .regiao-panorama-image {

        min-height:
            300px;

        aspect-ratio:
            4 / 3;
    }


    /* ======================================================
       LOCATION
       ====================================================== */

    body.page-regiao main .regiao-location {

        padding:
            75px 0;
    }


    body.page-regiao main .regiao-location-content h2 {

        font-size:
            2rem;
    }


    body.page-regiao main .regiao-location-image {

        min-height:
            300px;
    }


    body.page-regiao main .regiao-location-image img {

        min-height:
            300px;

        padding:
            18px;
    }


    body.page-regiao main .regiao-location-image iframe {

        min-height:
            300px;

        height:
            300px;
    }


    body.page-regiao main .regiao-location-image .image-placeholder {

        min-height:
            300px;
    }


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

    body.page-regiao main .sustainability-section {

        padding:
            75px 0;
    }


    body.page-regiao main .sustainability-carousel {

        min-height:
            300px;
    }


    body.page-regiao main .sustainability-slide img {

        height:
            300px;
    }


    body.page-regiao main .sustainability-content h2 {

        font-size:
            2rem;
    }


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

    body.page-regiao main .regiao-gallery {

        padding:
            75px 0;
    }


    body.page-regiao main .regiao-gallery-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    body.page-regiao main .regiao-gallery-item {

        height:
            250px;
    }


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

    body.page-regiao main .page-cta {

        padding:
            70px 0;
    }


    body.page-regiao main .page-cta-content h2 {

        font-size:
            2rem;
    }


    body.page-regiao main .page-cta-actions .btn {

        width:
            100%;
    }
}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 480px) {

    body.page-regiao main .page-hero {

        min-height:
            540px;
    }


    body.page-regiao main .page-hero h1 {

        font-size:
            2.35rem;

        line-height:
            .99;

        letter-spacing:
            -1px;
    }


    body.page-regiao main .page-hero p {

        font-size:
            .94rem;

        line-height:
            1.5;

        margin-bottom:
            22px;
    }


    body.page-regiao main .page-hero-tag {

        font-size:
            .65rem;

        padding:
            8px 15px;
    }


    body.page-regiao main .regiao-stat strong {

        font-size:
            2.1rem;
    }


    body.page-regiao main .regiao-benefit-card {

        padding:
            25px;
    }


    body.page-regiao main .regiao-panorama-content h2,
    body.page-regiao main .regiao-location-content h2,
    body.page-regiao main .sustainability-content h2 {

        font-size:
            1.9rem;
    }


    body.page-regiao main .regiao-panorama-image {

        min-height:
            260px;
    }


    body.page-regiao main .regiao-location-image {

        min-height:
            260px;
    }


    body.page-regiao main .regiao-location-image img {

        min-height:
            260px;
    }


    body.page-regiao main .regiao-location-image iframe {

        height:
            260px;

        min-height:
            260px;
    }


    body.page-regiao main .regiao-location-image .image-placeholder {

        min-height:
            260px;
    }


    body.page-regiao main .sustainability-carousel {

        min-height:
            260px;
    }


    body.page-regiao main .sustainability-slide img {

        height:
            260px;
    }


    body.page-regiao main .regiao-gallery-item {

        height:
            230px;
    }
}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

body.page-regiao main a:focus-visible,
body.page-regiao main button:focus-visible {

    outline:
        3px solid var(--regiao-red);

    outline-offset:
        3px;
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body.page-regiao main *,
    body.page-regiao main *::before,
    body.page-regiao main *::after {

        scroll-behavior:
            auto;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* ==========================================================
   FIM
   ========================================================== */