/*
   NEWSLETTER NO FIM DO ARTIGO

   A faixa usa azul próprio (#153c68), um tom mais fechado que o fundo das
   seções anteriores, para ela não se misturar visualmente com os conteúdos
   relacionados. O dourado vem da variável global --cor-destaque (#C9A227).

   O formulário em si pertence à Brevo e está dentro de um iframe. Assim,
   estilos internos (campos, botão e reCAPTCHA) são editados na Brevo; estas
   regras controlam somente o espaço, a largura e a posição dele no site.
*/
.blog-newsletter { padding: 48px 0 30px; border-top: 2px solid var(--cor-destaque); border-bottom: 2px solid var(--cor-destaque); background: #153c68; }
/*
   A área interna tem um limite menor para que formulário e chamada formem um
   conjunto mais compacto no centro da faixa, sem ocupar toda a largura.
*/
.blog-newsletter-grade { display:grid; grid-template-columns:590px minmax(300px,390px); gap:30px; align-items:center; justify-content:center; width:min(calc(100% - 48px),1040px); }
/*
   A moldura externa foi removida de propósito: fica visível apenas o cartão
   original configurado na Brevo. Para ampliar ou reduzir o formulário no
   computador, altere os dois valores de 590px desta área ao mesmo tempo.
*/
.blog-newsletter-formulario { width:min(100%,590px); justify-self:center; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; }
/*
   Altura mínima do iframe no computador. Se novos campos forem adicionados na
   Brevo e o botão ficar escondido, aumente este valor. Se sobrar área vazia
   abaixo do botão, reduza-o em pequenos passos. A altura atual reserva espaço
   necessário após a remoção da lista de assuntos no formulário da Brevo.
*/
/* 700px deixa uma margem curta abaixo do botão da Brevo, sem voltar ao espaço excessivo anterior. */
.blog-newsletter-formulario iframe { display:block; width:100%; min-height:700px; border:0; }
/* A chamada fica centralizada visualmente em relação ao cartão da Brevo. */
.blog-newsletter-chamada { text-align:center; }
.blog-newsletter-chamada > span { color:var(--cor-destaque); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.blog-newsletter-chamada > span i { margin-right:8px; }
.blog-newsletter-chamada h2 { margin:12px 0 16px; color:#fff; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(44px,4.6vw,58px); font-weight:600; line-height:1.02; }
.blog-newsletter-chamada h2 em { color:var(--cor-destaque); font-style:normal; }
.blog-newsletter-chamada p { max-width:390px; margin:0 auto; color:#d7e4ef; font-size:16px; line-height:1.75; }
/* A lista preserva a leitura alinhada à esquerda, mas o conjunto fica centralizado. */
.blog-newsletter-chamada ul { display:inline-grid; gap:12px; margin:24px auto 0; padding:0; list-style:none; color:#f2f6fa; font-size:15px; text-align:left; }
.blog-newsletter-chamada li { display:flex; gap:10px; align-items:flex-start; }
.blog-newsletter-chamada li i { margin-top:3px; color:var(--cor-destaque); }
/* Em telas intermediárias, mantém formulário e chamada lado a lado, com menos espaço. */
/* Apenas a Home recebe esta pequena separação antes da faixa. */
.home-newsletter-offset { margin-top:42px; }

@media (max-width:900px) { .blog-newsletter-grade { grid-template-columns:minmax(390px,590px) minmax(240px,1fr); gap:38px; } }

/*
   No celular a chamada vem antes e o formulário abaixo. A altura acompanha o
   formulário atual da Brevo, incluindo reCAPTCHA e botão, sem reservar uma
   grande área azul vazia antes do rodapé. Revise-a se os campos forem alterados.
*/
@media (max-width:700px) { .home-newsletter-offset { margin-top:28px; } .blog-newsletter { padding:40px 0 28px; } .blog-newsletter-grade { grid-template-columns:1fr; gap:32px; width:calc(100% - 40px); } .blog-newsletter-formulario { order:2; } .blog-newsletter-chamada { order:1; text-align:center; } .blog-newsletter-chamada p { margin:0 auto; } .blog-newsletter-chamada ul { display:inline-grid; margin:24px auto 0; } .blog-newsletter-chamada h2 { font-size:40px; } .blog-newsletter-formulario iframe { min-height:710px; } }