/* ==========================================================
   ECOSSISTEMA ALTA PIATÃ
========================================================== */

#ecossistema{

    padding:8rem 0;

    background:#0D2C3A;

    color:#FFFFFF;

}



/* ==========================================================
   CONTAINER
========================================================== */

#ecossistema .container{

    width:min(1100px,92%);

    margin:0 auto;

}



/* ==========================================================
   CABEÇALHO
========================================================== */

.ecosistema-header{

    max-width:850px;

    margin:0 auto 4.5rem;

    text-align:center;

}



.ecosistema-header img{

    width:100px;

    height:100px;

    object-fit:contain;

    margin-bottom:2rem;

}



.ecosistema-header .section-kicker{

    display:block;

    margin-bottom:1.2rem;

    color:#D6A84F;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.25rem;

    text-transform:uppercase;

}



.ecosistema-header h2{

    margin-bottom:1.5rem;

    color:#FFFFFF;

    font-size:clamp(2.4rem,5vw,4rem);

    line-height:1.15;

}



.ecosistema-header p{

    margin:0 auto;

    max-width:760px;

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

    font-size:1.15rem;

    line-height:1.9;

}



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

.ecosistema-grid{

    display:grid;

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

    gap:1.8rem;

}



/* ==========================================================
   CARDS
========================================================== */

.ecosistema-card{

    padding:2.3rem;

    border-radius:22px;

    background:

        rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(8px);

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease;

}



.ecosistema-card:hover{

    transform:translateY(-6px);

    background:

        rgba(255,255,255,.10);

    border-color:

        rgba(214,168,79,.5);

}



.ecosistema-card h3{

    margin-bottom:1rem;

    color:#FFFFFF;

    font-size:1.35rem;

}



.ecosistema-card p{

    margin:0;

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

    line-height:1.8;

}



/* ==========================================================
   BOTÃO
========================================================== */

.ecosistema-button{

    display:flex;

    width:max-content;

    margin:4rem auto 0;

    padding:1rem 2.2rem;

    border-radius:999px;

    background:#FFFFFF;

    color:#1F4D3A;

    text-decoration:none;

    font-weight:700;

    transition:

        transform .3s ease,

        background .3s ease;

}



.ecosistema-button:hover{

    transform:translateY(-4px);

    background:#F5F2EB;

}



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

@media(max-width:768px){


    #ecossistema{

        padding:5rem 0;

    }


    .ecosistema-grid{

        grid-template-columns:1fr;

    }


    .ecosistema-header h2{

        font-size:2.4rem;

    }


    .ecosistema-card{

        padding:2rem;

    }

}