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

.final-cta {
    width: 100%;
    padding: 90px 24px;
    background: #ffffff;
}

.final-cta .container {
    width: 100%;
    max-width: none;
    padding: 0;
	margin-top: -80px;
}


/* =========================================================
   BOX
========================================================= */

.final-cta-box {
    position: relative;

    width: 100%;
    min-height: 360px;

    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;

    align-items: center;

    gap: 55px;

    padding: 55px 70px;

    background: #111111;

    border-radius: 42px;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   DETALHE VERDE
========================================================= */

.final-cta-box::after {
    content: "";

    position: absolute;

    top: 45px;
    right: 45px;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #587565;
}


/* =========================================================
   IMAGEM
========================================================= */

.final-cta-image {
    width: 100%;
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.final-cta-image img {
    display: block;

    width: 100%;
    max-width: 230px;
    max-height: 250px;

    object-fit: contain;
}


/* =========================================================
   CONTEÚDO CENTRAL
========================================================= */

.final-cta-title {
    width: 100%;

    text-align: center;
}


/* =========================================================
   TÍTULO
========================================================= */

.final-cta-title h2 {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;

    font-family: var(--font-secondary);

    font-size: clamp(44px, 4vw, 66px);
    font-weight: 500;

    line-height: 1.02;
    letter-spacing: -0.04em;

    color: #ffffff;
}

.final-cta-title h2 em {
    color: #6f8b7c;

    font-style: italic;
    font-weight: inherit;
}


/* =========================================================
   FRASE
========================================================= */

.final-cta-text {
    grid-column: 2;

    width: 100%;

    margin-top: -28px;

    text-align: center;
}

.final-cta-text p {
    width: 100%;
    max-width: 620px;

    margin: 0 auto;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.68);
}


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

.final-cta-action {
    grid-column: 3;
    grid-row: 1 / span 2;

    display: flex;
    align-items: center;
    justify-content: center;
}

.final-cta-action a {
    width: 100%;
    max-width: 290px;

    min-height: 74px;

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

    gap: 14px;

    padding: 0 26px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-decoration: none;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.final-cta-action a i {
    font-size: 21px;
}

.final-cta-action a span {
    margin-left: auto;

    color: #6f8b7c;

    font-size: 23px;

    transition: transform .3s ease;
}

.final-cta-action a:hover {
    background: #ffffff;
    border-color: #ffffff;

    color: #111111;

    transform: translateY(-2px);
}

.final-cta-action a:hover span {
    transform: translateX(5px);
}

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

@media (max-width: 767px) {

    .final-cta {
        width: 100%;

        margin: 0;

        padding: 0 0 90px;
    }


    /* REMOVE A LIMITAÇÃO DO CONTAINER */

    .final-cta > .container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* BLOCO PRETO EM LARGURA TOTAL */

    .final-cta-box {
        width: 100%;
        max-width: none;

        margin: 0;

        display: flex;
        flex-direction: column;

        min-height: auto;

        gap: 28px;

        padding: 45px 25px;

        border-radius: 0;

        text-align: center;
    }


    /* =====================================================
       IMAGEM
    ===================================================== */

    .final-cta-image {
        height: auto;
    }

    .final-cta-image img {
        max-width: 170px;
        max-height: 190px;
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .final-cta-title h2 {
        max-width: 100%;

        font-size: 42px;

        line-height: 1;
    }


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

    .final-cta-text {
        margin-top: -8px;
    }

    .final-cta-text p {
        max-width: 420px;

        margin-left: auto;
        margin-right: auto;

        font-size: 15px;
    }


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

    .final-cta-action {
        width: 100%;
    }

    .final-cta-action a {
        max-width: 300px;

        margin: 0 auto;
    }

}

/* =========================================================
   CTA FINAL - TABLET
   768PX ATÉ 1024PX
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

	.final-cta {
		padding-left: 0;
		padding-right: 0;
		margin-top: -90px;
	}

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

    .final-cta .container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

    /* =====================================================
       BOX
    ===================================================== */

    .final-cta-box {
        width: 100%;

        min-height: auto;

        display: grid;

        grid-template-columns:
            minmax(220px, 0.85fr)
            minmax(0, 1.15fr);

        grid-template-areas:
            "image title"
            "image text"
            "image action";

        align-items: center;

        column-gap: 42px;
        row-gap: 20px;

        padding: 52px 44px;

        border-radius: 0;
    }


    /* =====================================================
       DETALHE VERDE
    ===================================================== */

    .final-cta-box::after {
        top: 34px;
        right: 34px;

        width: 11px;
        height: 11px;
    }


    /* =====================================================
       IMAGEM
    ===================================================== */

    .final-cta-image {
        grid-area: image;

        width: 100%;
        height: auto;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .final-cta-image img {
        width: 100%;

        max-width: 260px;
        max-height: none;

        height: auto;

        object-fit: contain;
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .final-cta-title {
        grid-area: title;

        width: 100%;

        text-align: left;
    }

    .final-cta-title h2 {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: clamp(48px, 6vw, 62px);

        line-height: .96;

        text-align: left;
    }


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

    .final-cta-text {
        grid-area: text;

        width: 100%;

        margin: 0;

        text-align: left;
    }

    .final-cta-text p {
        width: 100%;
        max-width: 420px;

        margin: 0;

        font-size: 15px;
        line-height: 1.65;

        text-align: left;
    }


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

    .final-cta-action {
        grid-area: action;

        width: 100%;

        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .final-cta-action a {
        width: 100%;
        max-width: 330px;

        min-height: 66px;

        margin: 0;

        padding: 0 24px;
    }
}

/* =========================================================
   CTA FINAL - 1025PX ATÉ 1336PX
   LARGURA TOTAL
========================================================= */

@media (min-width:1025px) and (max-width:1336px){

    .final-cta{
        width:100% !important;

        margin:0 !important;
        padding:70px 0 80px !important;
    }


    .final-cta .container{
        width:100% !important;
        max-width:none !important;
		margin-top: -90px !important;
        padding:0 !important;
    }


    .final-cta-box{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;

        min-height:420px;

        display:grid;

        grid-template-columns:
            minmax(280px, .9fr)
            minmax(0, 1.1fr);

        grid-template-areas:
            "image title"
            "image text"
            "image action";

        align-items:center;

        column-gap:70px;
        row-gap:22px;

        padding:60px 70px;

        border-radius:0 !important;
    }


    .final-cta-image{
        grid-area:image;

        width:100%;
        height:auto;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    .final-cta-image img{
        width:100%;
        max-width:320px;
        height:auto;

        object-fit:contain;
    }


    .final-cta-title{
        grid-area:title;

        width:100%;

        text-align:left;
    }

    .final-cta-title h2{
        width:100%;
        max-width:560px;

        margin:0;

        font-size:58px;
        line-height:.96;

        text-align:left;
    }


    .final-cta-text{
        grid-area:text;

        width:100%;

        margin:0;

        text-align:left;
    }

    .final-cta-text p{
        width:100%;
        max-width:520px;

        margin:0;

        font-size:15px;
        line-height:1.65;

        text-align:left;
    }


    .final-cta-action{
        grid-area:action;

        width:100%;

        display:flex;
        justify-content:flex-start;
        align-items:center;
    }

    .final-cta-action a{
        width:100%;
        max-width:300px;

        min-height:68px;

        margin:0;

        padding:0 24px;
    }

}