/* ------------------------- cta-banner -- */
.cta-banner{
    background: linear-gradient(to bottom, #1f2937 0%, #312d65 100%);
    padding:20px 0;
}

.cta-banner-container{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
}

/* ------------------------- card -- */
.cta-banner-grid{
    display:grid;
    grid-template-columns:300px 1fr 180px;
    align-items:stretch;
    background:rgba(255,255,255,.05);
    border-left:6px solid #00ff99;
    border-radius:10px;
    overflow:hidden;
}

/* ------------------------- imagem -- */
.cta-banner-imagem{
    position:relative;
    overflow:hidden;
}

.cta-banner-imagem img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.cta-banner-imagem::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:36px;
    height:100%;
    pointer-events:none;

    background:linear-gradient(
        to right,
        transparent 0%,
        rgba(0,255,153,.06) 30%,
        rgba(49,45,101,.15) 70%,
        rgba(49,45,101,.30) 100%
    );
}

/* ------------------------- texto -- */
.cta-banner-texto{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:25px 30px 25px 45px;
}

.cta-banner-destaque{
    margin:0;
    color:#ffffff;
    font-size:1.9rem;
    font-weight:bold;
}

.cta-banner-destaque span{
    color:#00ff99;
}


.cta-banner-subtexto{
    margin:12px 0 0;
    color:rgba(255,255,255,.75);
    font-size:.95rem;
}

/* ------------------------- botão mobile original -- */
.cta-banner-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 20px;
    background:#00ff99;
    color:#111827;
    text-decoration:none;
    text-align:center;
    font-size:1.05rem;
    font-weight:700;

}

/* escondido no desktop */
.cta-banner-btn-mobile{
    display:none;
}

/* ------------------------- botão desktop -- */
.cta-banner-btn-desktop{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:20px;
    padding:14px 30px;
    background:#00ff99;
    color:#111827;
    text-decoration:none;
    text-align:center;
    border-radius:6px;
    font-size:1rem;
    font-weight:700;

}

/* ------------------------- mobile -- */
@media (max-width:768px){

    .cta-banner{
        padding:20px 16px;

    }

    .cta-banner-container{
        width:100%;
        padding:0 10px;

    }

    .cta-banner-grid{
        position:relative;
        grid-template-columns:1fr;
        min-height:340px;
        border-left:none;
        border-top:6px solid #00ff99;
        overflow:hidden;
    }

    /* imagem vira fundo */
    .cta-banner-imagem{
        position:absolute;
        inset:0;
        z-index:0;
    }

    .cta-banner-imagem img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center 8%;
    }

/* overlay */
.cta-banner-grid::before{
    display:none;
}

.cta-banner-imagem::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:linear-gradient(
        to bottom,
        transparent 0%,
        rgba(49,45,101,.08) 45%,
        rgba(49,45,101,.20) 52%,
        rgba(49,45,101,.45) 65%,
        rgba(49,45,101,.72) 78%,
        rgba(49,45,101,.90) 90%,
        rgba(49,45,101,1) 100%
    );
}

/* texto mobile ajustado para baixo */
.cta-banner-texto{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    min-height:240px;
    padding:60px 20px 20px;
    text-align:center;
}

.cta-banner-destaque{
    font-size:1rem;
    line-height:1.5;
}

/* esconde botão desktop no mobile */
.cta-banner-btn-desktop{
    display:none;
}

/* botão mobile */
.cta-banner-btn-mobile{
    display:flex;
    position:relative;
    z-index:2;
    padding:16px 20px;
    font-size:.9rem;
}

.cta-banner-subtexto{
    display:none;
}
.cta-banner-texto{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    min-height:270px;
    padding:20px 20px 30px;
    text-align:center;
}

.cta-banner-grid{
    position:relative;
    grid-template-columns:1fr;
    min-height:340px;
    border-left:none;
    border-top:6px solid #00ff99;
    overflow:hidden;
}

}