/* ==========================================
   NEWSLETTER
========================================== */
.newsletter{
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;

    margin: 20px 0;
   
}

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

.imagem-newsletter{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80px;
    right: 80px;
    
    width: auto;
    height: 100%;
}


.imagem-newsletter img{
    border-radius: 25px;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}


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

.conteudo-newsletter{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}


/* ==========================================
   TÍTULOS
========================================== */

.conteudo-newsletter h1{

 
    color:var(--corBranca);

    font-size:1rem;

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

    text-transform:uppercase;

}


.conteudo-newsletter h2{

    margin-bottom:8px;

    color:var(--corBranca);

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

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

}


/* ==========================================
   CAMPO DO EMAIL
========================================== */

.formulario-newsletter{

    position:relative;

    width:500px;

    height:40px;
    

}


.formulario-newsletter input{

    width:100%;

    height:100%;

    padding:0 150px 0 20px;

    border:none;

    outline:none;

    border-radius:30px;

    background:var(--corBranca);

    color:var(--azulEscuro);

    font-family:var(--fonte-principal);

    font-size:.95rem;
   font-weight: 300;

}


.formulario-newsletter input::placeholder{

    color:var(--corPrincipal);

    opacity:1;

}


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

.botao-newsletter{

    position:absolute;

    top:3px;

    right:3px;

    height:35px;

    padding:0 28px;

    border:none;

    border-radius:30px;

    background:var(--corPrincipal);

    color:var(--corBranca);

    font-family:var(--fonte-principal);

    font-size:.9rem;

    font-weight:300;

    cursor:pointer;

    transition:.3s;

}


.botao-newsletter:hover{

    background:var(--laranjaForte);

}
.newsletter-mensagem {
    margin-top: 10px;
    color: #fff;
    font-size: .85rem;
    line-height: 1.45;
}

.newsletter-mensagem[hidden] {
    display: none;
}

.newsletter-mensagem.sucesso {
    color: #d9f8e5;
}

.newsletter-mensagem.erro {
    color: #ffe2e2;
}

.newsletter-mensagem.informacao {
    color: #fff3c4;
}

.formulario-newsletter button:disabled {
    cursor: wait;
    opacity: .7;
}

.campo-armadilha-newsletter {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}