/* =========================
   FUNDO GERAL
========================= */

.sobre-page {
    position: relative;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.40),
            rgba(255, 255, 255, 0.40)
        ),
        url("../assets/img/sobre-bg.png");

    background-size:
        cover;

    background-position:
        center top;

    background-repeat:
        no-repeat;

    background-attachment:
        fixed;

    background-color:
        #F5FAFA;
}


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

.sobre-hero {
    position: relative;

    min-height: 640px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.86) 35%,
            rgba(255, 255, 255, 0.50) 60%,
            rgba(255, 255, 255, 0.12) 100%
        )
        !important;
}


.sobre-hero .page-hero-content {
    position: relative;

    z-index: 2;

    max-width: 820px;
}


.sobre-hero h1 {
    max-width: 790px;
}


.sobre-hero p {
    max-width: 650px;
}


/* =========================
   PROPOSTA
========================= */

.sobre-proposta {
    position: relative;

    background:
        transparent !important;

    background-color:
        transparent !important;
}


.sobre-text {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


.sobre-text p {
    font-size: 16px;

    line-height: 1.85;
}


/* =========================
   PILARES
========================= */

.sobre-pilares {
    position: relative;

    background:
        transparent !important;

    background-color:
        transparent !important;
}


.pilares-grid {
    display: grid;

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

    gap: 20px;
}


.pilar-card {
    position: relative;

    min-height: 250px;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid
        rgba(11, 93, 104, 0.14);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.90);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 34px
        rgba(11, 93, 104, 0.08);

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


.pilar-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-primary-light)
        );
}


.pilar-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(11, 93, 104, 0.26);

    box-shadow:
        0 20px 46px
        rgba(11, 93, 104, 0.13);
}


.pilar-card > span {
    display: inline-flex;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    margin-bottom:
        30px;

    border-radius:
        50%;

    background-color:
        var(--color-mint);

    color:
        var(--color-primary);

    font-size:
        11px;

    font-weight:
        700;
}


.pilar-card h3 {
    margin-bottom:
        11px;

    font-size:
        18px;
}


.pilar-card p {
    font-size:
        14px;

    line-height:
        1.7;
}


/* =========================
   STATUS
========================= */

.project-status-section {
    position: relative;

    background:
        transparent !important;

    background-color:
        transparent !important;
}


.project-status {
    max-width:
        1050px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        26px;

    margin:
        0 auto;

    padding:
        46px;

    border:
        1px solid
        rgba(11, 93, 104, 0.14);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, 0.88);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 22px 55px
        rgba(11, 93, 104, 0.12);
}


.project-status h2 {
    margin-bottom:
        14px;
}


.project-status p {
    max-width:
        720px;

    font-size:
        15px;

    line-height:
        1.8;
}


/* =========================
   VISÃO
========================= */

.vision-section {
    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            rgba(7, 59, 66, 0.94),
            rgba(11, 93, 104, 0.90)
        )
        !important;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    box-shadow:
        0 -25px 70px
        rgba(7, 59, 66, 0.12),
        0 25px 70px
        rgba(7, 59, 66, 0.15);
}


/* FUNDO DECORATIVO */

.vision-section::before {
    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        -230px;

    bottom:
        -270px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.035);

    pointer-events:
        none;
}


.vision-section::after {
    content:
        "";

    position:
        absolute;

    width:
        480px;

    height:
        480px;

    right:
        -180px;

    top:
        -200px;

    border-radius:
        50%;

    border:
        80px solid
        rgba(255, 255, 255, 0.035);

    pointer-events:
        none;
}


.vision-content {
    position:
        relative;

    z-index:
        2;

    max-width:
        900px;
}


.vision-content h2 {
    max-width:
        850px;

    margin-bottom:
        22px;

    color:
        white;
}


.vision-content > p {
    max-width:
        700px;

    margin-bottom:
        32px;

    color:
        #C9DFE1;

    font-size:
        16px;

    line-height:
        1.85;
}


.vision-actions {
    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;
}


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

.sobre-cta {
    position:
        relative;

    background:
        transparent !important;

    background-color:
        transparent !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    border-top:
        1px solid
        rgba(11, 93, 104, 0.10);
}


.sobre-cta h2 {
    max-width:
        680px;
}


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

@media (max-width: 1024px) {

    .pilares-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .sobre-hero {
        min-height:
            560px;
    }

}


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

@media (max-width: 768px) {

    .sobre-page {
        background-attachment:
            scroll;

        background-size:
            auto 100%;

        background-position:
            center top;
    }


    .sobre-hero {
        min-height:
            auto;

        background:
            rgba(
                255,
                255,
                255,
                0.86
            )
            !important;
    }


    .pilares-grid {
        grid-template-columns:
            1fr;
    }


    .project-status {
        flex-direction:
            column;

        padding:
            30px;
    }


    .vision-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .vision-actions .btn {
        width:
            100%;
    }

}


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

@media (max-width: 480px) {

    .pilar-card {
        padding:
            23px;
    }


    .project-status {
        padding:
            24px;
    }

}