/* =========================================================
   NEWSLETTER
========================================================= */

.newslwtter {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 6%;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;

    gap: 60px;
}


/* =========================================================
   ÁREA DA IMAGEM
========================================================= */

.newslwtter .img {
    position: relative;

    width: 100%;
    height: 100%;

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


/* =========================================================
   BACKGROUND ATRÁS DA IMAGEM
========================================================= */

.newslwtter .img::before {

    content: "";

    position: absolute;

    top: 30px;
    right: 30px;

    width: 400px;
    height: 280px;

    background: var(--corPrincipal);



    z-index: 0;
}


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

.newslwtter .img img {

    position: relative;

    z-index: 1;

    display: block;

    width: 400px;
    height: auto;

    margin-top: -40px;
    margin-left: 0;
    margin-right: -80px;

    object-fit: contain;

}


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

.newslwtter .conteudo {

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
     /* SOMBRA DO CARD */
   background-color: rgba(219, 174, 118, 0.10);
        padding: 28px;
        border-radius: 25px;
}


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

.newslwtter .conteudo h2 {

    margin: 0 0 6px;

    max-width: 650px;

    font-size: var(--esp-4);
    line-height: 1.2;

    font-weight: var(--peso-4);

    color: var(--corBranca);
    width: 67%;
}

.newslwtter .conteudo h2 span{
       font-size:var(--esp-4);
        line-height: 1.2;

    font-weight: var(--peso-2);
    font-style: italic;

}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.newslwtter .conteudo p {

    margin: 0 0 5px;

    max-width: 650px;

    font-size: var(--esp-6);
    line-height: 1.2;

    font-weight: var(--peso-4);

    color: var(--corBranca);
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.newslwtter form {

    width: 100%;
    max-width: 550px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


/* =========================================================
   INPUT
========================================================= */

.newslwtter form input {

    width: 80%;

    height: 34px;

    padding: 0 10px;

    border: none;
    outline: none;

    border-radius: 25px;

    background: var(--corBranca);

    color: var(--corPreta);

    font-size: var(--esp-7);
    font-weight: 200;
}


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

.newslwtter form button {

    align-self: flex-start;

    padding: 8px 18px;

    border: none;
    border-radius: 20px;

    background: var(--corSegundaria);

    color: var(--corBranca);

    font-size: var(--esp-6);
    font-weight: var(--peso-4);

    cursor: pointer;

    transition: 0.3s ease;
}


/* =========================================================
   HOVER
========================================================= */

.newslwtter form button:hover {

    transform: translateY(-2px);

}



/* =========================================================
   NEWSLETTER — MOBILE
========================================================= */

@media (max-width: 1200px) {

    /* =====================================================
       NEWSLETTER
    ===================================================== */

    .newslwtter {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0;

        padding: 50px 20px 60px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 25px;

        overflow: hidden;
    }


    /* =====================================================
       ÁREA DA IMAGEM
    ===================================================== */

    .newslwtter .img {
        position: relative;

        width: 100%;

        height: auto;

        display: flex;

        align-items: center;

        justify-content: center;

    }


    /* =====================================================
       BACKGROUND ATRÁS DA IMAGEM
    ===================================================== */

    .newslwtter .img::before {
        content: "";

        position: absolute;

        top: 30px;
        right: -80%;

       

        transform: translateX(50%);

        width: 75%;
        height: 190px;

        background: var(--corPrincipal);

        z-index: 0;
    }


    /* =====================================================
       FAIXA INFERIOR
    ===================================================== */
.newslwtter .img::before {
    content: "";
    position: absolute;
    top: 40px;
    right: 220px;
  
    width: 360px;
    height: 205px;
    background: var(--corPrincipal);
    z-index: 0;

}

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

    .newslwtter .img img {
        position: relative;

        z-index: 1;

        display: block;

        width: 90%;

        max-width: 320px;

        height: auto;

        margin: 0;

        object-fit: contain;
    }


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

    .newslwtter .conteudo {
        position: relative;

        z-index: 2;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        padding: 25px 20px;

        background-color: rgba(219, 174, 118, 0.10);

        border-radius: 20px;
    }


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

    .newslwtter .conteudo h2 {
        width: 100%;

        max-width: 100%;

        margin: 0 0 8px;

        font-size: 1.15rem;

        line-height: 1.2;

        font-weight: var(--peso-4);

        color: var(--corBranca);
    }


    /* =====================================================
       DESTAQUE DO TÍTULO
    ===================================================== */

    .newslwtter .conteudo h2 span {
        font-size: 1.15rem;

        line-height: 1.2;

        font-weight: var(--peso-2);

        font-style: italic;
    }


    /* =====================================================
       DESCRIÇÃO
    ===================================================== */

    .newslwtter .conteudo p {
        width: 100%;

        max-width: 100%;

        margin: 0 0 15px;

        font-size: var(--esp-6);

        line-height: 1.3;

        font-weight: var(--peso-4);

        color: var(--corBranca);
    }


    /* =====================================================
       FORMULÁRIO
    ===================================================== */

    .newslwtter form {
        width: 100%;

        max-width: 100%;

        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    /* =====================================================
       INPUT
    ===================================================== */

    .newslwtter form input {
        width: 100%;

        height: 36px;

        padding: 0 12px;

        border: none;

        outline: none;

        border-radius: 25px;

        background: var(--corBranca);

        color: var(--corPreta);

        font-size: var(--esp-7);

        font-weight: 200;
    }


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

    .newslwtter form button {
        align-self: flex-start;

        padding: 8px 18px;

        border: none;

        border-radius: 20px;

        background: var(--corSegundaria);

        color: var(--corBranca);

        font-size: var(--esp-6);

        font-weight: var(--peso-4);

        cursor: pointer;

        transition: 0.3s ease;
    }


    /* =====================================================
       HOVER
    ===================================================== */

    .newslwtter form button:hover {
        transform: translateY(-2px);
    }

}




/* =========================================================
   NEWSLETTER — TABLET
========================================================= */

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

    /* =====================================================
       NEWSLETTER
    ===================================================== */

    .newslwtter {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0;

        padding: 50px 20px 60px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 25px;

        overflow: hidden;
    }


    /* =====================================================
       ÁREA DA IMAGEM
    ===================================================== */

    .newslwtter .img {
        position: relative;

        width: 100%;

        height: auto;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* =====================================================
       FUNDO ATRÁS DA IMAGEM
    ===================================================== */

    .newslwtter .img::before {
        content: "";

        position: absolute;

        top: 40px;
        right: 490px;

        width: 490px;
        height: 415px;

        background: var(--corPrincipal);

        z-index: 0;
    }


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

    .newslwtter .img img {
        position: relative;

        z-index: 1;

        display: block;

        width: 100%;
        max-width:550px;

        height: auto;

        margin: 0;

        object-fit: contain;
    }


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

    .newslwtter .conteudo {
        position: relative;

        z-index: 2;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        padding: 25px 20px;

        border-radius: 20px;

        margin-top: 10px;
    }


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

    .newslwtter .conteudo h2 {
        width: 100%;

        max-width: 100%;

        margin: 0 0 8px;

        font-size: 1.25rem;

        line-height: 1.2;

        font-weight: var(--peso-4);

        color: var(--corBranca);
    }


    /* =====================================================
       DESTAQUE DO TÍTULO
    ===================================================== */

    .newslwtter .conteudo h2 span {
        font-size: 1.25rem;

        line-height: 1.2;

        font-weight: var(--peso-2);

        font-style: italic;
    }


    /* =====================================================
       DESCRIÇÃO
    ===================================================== */

    .newslwtter .conteudo p {
        width: 100%;

        max-width: 100%;

        margin: 0 0 15px;

        font-size: var(--esp-4);

        line-height: 1.3;

        font-weight: var(--peso-4);

        color: var(--corBranca);
    }


    /* =====================================================
       FORMULÁRIO
    ===================================================== */

    .newslwtter form {
        width: 100%;

        max-width: 100%;

        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    /* =====================================================
       INPUT
    ===================================================== */

    .newslwtter form input {
        width: 100%;

        height: 36px;

        padding: 0 12px;

        border: none;

        outline: none;

        border-radius: 25px;

        background: var(--corBranca);

        color: var(--corPreta);

        font-size: var(--esp-7);

        font-weight: 200;
    }


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

    .newslwtter form button {
        align-self: flex-start;

        padding: 8px 18px;

        border: none;

        border-radius: 20px;

        background: var(--corSegundaria);

        color: var(--corBranca);

        font-size: var(--esp-6);

        font-weight: var(--peso-4);

        cursor: pointer;

        transition: 0.3s ease;
    }


    /* =====================================================
       HOVER
    ===================================================== */

    .newslwtter form button:hover {
        transform: translateY(-2px);
    }

}