/* ==========================================================
   EXPERIÊNCIAS
========================================================== */

#experiencias{

    padding:8rem 0;

    background:#F7F4EE;

}



/* ==========================================================
   CABEÇALHO DA SEÇÃO
========================================================== */

#experiencias .section-header{

    max-width:800px;

    margin:0 auto 4rem;

    text-align:center;

}



#experiencias .section-kicker{

    display:inline-block;

    margin-bottom:1rem;

    color:#1F4D3A;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.22rem;

    text-transform:uppercase;

}



#experiencias .section-header h2{

    margin-bottom:1.5rem;

    color:#0D2C3A;

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

    line-height:1.15;

}



#experiencias .section-header p{

    color:#55636A;

    font-size:1.15rem;

    line-height:1.9;

}



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

.experiencias-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:2rem;

}



/* ==========================================================
   CARD
========================================================== */

.experiencia-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    min-height:340px;

    padding:2.5rem;

    background:#FFFFFF;

    border-radius:26px;

    border:1px solid rgba(13,44,58,.08);

    text-decoration:none;

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}



/* detalhe visual superior */

.experiencia-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#1F4D3A;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}



.experiencia-card:hover::before{

    transform:scaleX(1);

}



.experiencia-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 25px 50px rgba(0,0,0,.10);

    border-color:rgba(31,77,58,.2);

}



/* ==========================================================
   ÍCONES
========================================================== */

.experiencia-card img{

    width:82px;

    height:82px;

    object-fit:contain;

    margin-bottom:1.8rem;

}



/* ==========================================================
   TEXTO
========================================================== */

.experiencia-card h3{

    margin-bottom:.9rem;

    color:#0D2C3A;

    font-size:1.45rem;

    line-height:1.3;

}



.experiencia-card p{

    margin:0;

    color:#59676D;

    font-size:1rem;

    line-height:1.8;

}



/* ==========================================================
   INDICADOR DE NAVEGAÇÃO
========================================================== */

.experiencia-card::after{

    content:"→";

    position:absolute;

    right:2rem;

    bottom:2rem;

    color:#1F4D3A;

    font-size:1.4rem;

    opacity:0;

    transform:translateX(-10px);

    transition:

        opacity .3s ease,

        transform .3s ease;

}



.experiencia-card:hover::after{

    opacity:1;

    transform:translateX(0);

}



/* ==========================================================
   BLOCO ECOSSISTEMA
========================================================== */

.ecosystem-call{

    display:flex;

    align-items:center;

    gap:2rem;

    margin-top:5rem;

    padding:2.5rem;

    background:#FFFFFF;

    border-radius:24px;

    border:1px solid rgba(13,44,58,.08);

}



.ecosystem-call img{

    width:90px;

    height:90px;

    object-fit:contain;

}



.ecosystem-call strong{

    display:block;

    margin-bottom:.8rem;

    color:#0D2C3A;

    font-size:1.25rem;

}



.ecosystem-call p{

    margin:0;

    color:#59676D;

    line-height:1.8;

}



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

@media(max-width:1024px){

    .experiencias-grid{

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

    }

}



@media(max-width:768px){

    #experiencias{

        padding:5rem 0;

    }


    .experiencias-grid{

        grid-template-columns:1fr;

    }


    .experiencia-card{

        min-height:auto;

        padding:2rem;

    }


    .ecosystem-call{

        flex-direction:column;

        text-align:center;

    }

}