/* ============================================================
   Blog — cabeçalho com jornal antigo de fundo (bem apagado)
   ============================================================ */
.blog-hero-bg{
  position:relative; overflow:hidden;
  padding:72px 0 96px;
  background-color:var(--paper);
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 78%, var(--paper-deep) 100%),
    linear-gradient(90deg, var(--paper) 0%, var(--paper) 30%, rgba(246,240,230,.94) 42%, rgba(246,240,230,.78) 58%, rgba(246,240,230,.62) 74%, rgba(246,240,230,.55) 100%),
    url('../img/ilustracao-blog-jornal.jpg');
  background-size: cover;
  background-position: right 30%;
  background-repeat: no-repeat;
}
@media (max-width:900px){
  .blog-hero-bg{
    padding:32px 0 220px;
    background-image:
      linear-gradient(180deg, transparent 0%, transparent 70%, var(--paper-deep) 100%),
      linear-gradient(180deg, var(--paper) 0%, var(--paper) 28%, rgba(246,240,230,.82) 46%, rgba(246,240,230,.65) 68%, rgba(246,240,230,.58) 100%),
      url('../img/ilustracao-blog-jornal.jpg');
    background-position: center top;
    background-size: cover;
  }
}
@media (max-width:520px){
  .blog-hero-bg{ padding-bottom:180px; }
}

/* ---------- transição para o grid de artigos — textura de papel amassado, tingida para combinar com o jornal ---------- */
.blog-cards-bg{
  position:relative;
  padding-top:64px; padding-bottom:24px;
  background-color:var(--paper-deep);
  background-image:
    linear-gradient(180deg, var(--paper-deep) 0%, rgba(238,226,208,.6) 20%, rgba(238,226,208,.35) 42%, var(--paper) 68%, var(--paper) 100%),
    url('../img/textura-papel-blog.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (max-width:700px){
  .blog-cards-bg{ padding-top:40px; }
}

/* ============================================================
   Blog — cartão de newsletter
   ============================================================ */

.newsletter-section{ padding:88px 0; }

.newsletter-card{
  background:var(--ink);
  border-radius:20px;
  padding:3rem;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2.5rem;
  align-items:center;
}
.newsletter-copy h2{ color:var(--cream); margin-bottom:.5em; }
.newsletter-copy p{ color:var(--sand); margin:0; max-width:32em; }

.newsletter-form{ display:flex; flex-direction:column; gap:.6rem; }
.newsletter-form label{
  font-family:var(--f-display); font-weight:600; font-size:.82rem;
  color:var(--sand-pale); letter-spacing:.02em;
}
.newsletter-form input{
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--cream); border:none; border-radius:10px;
  padding:.9em 1.1em;
}
.newsletter-form input::placeholder{ color:var(--ink-soft); opacity:.7; }
.newsletter-form input:focus-visible{ outline:2px solid var(--terracotta); outline-offset:2px; }
.newsletter-form .btn{ margin-top:.3rem; width:100%; justify-content:center; }
.newsletter-disclaimer{ font-size:.78rem; color:var(--sand); opacity:.75; margin:.2rem 0 0; }
.newsletter-thanks{
  font-family:var(--f-display); font-weight:600; font-size:1.05rem;
  color:var(--cream); margin:0;
}

.newsletter-alt{
  text-align:center; margin:1.6rem 0 0; color:var(--ink-soft); font-size:.92rem;
}
.newsletter-alt a{ color:var(--terracotta); font-weight:600; }
.newsletter-alt a:hover{ text-decoration:underline; }

@media (max-width:700px){
  .newsletter-card{ grid-template-columns:1fr; padding:2.2rem 1.6rem; border-radius:16px; }
}