/* Blog do Método Chuva — mesma paleta e mesmas fontes da landing.
   Arquivo único, compartilhado pelo índice e por todos os artigos: mexer aqui
   muda o blog inteiro, e não um artigo de cada vez. */

:root{
  --cream:#FBF4E9; --cream-2:#F5E9D6; --ink:#2B211A; --ink-soft:#5A4C3F;
  --terra:#C85A32; --terra-deep:#A8451F; --sage:#6B7A56; --amber:#E8A33D;
  --sky:#8CA9B4; --line:rgba(43,33,26,.14); --card:#FFFDF8;
  --radius:20px; --shadow:0 18px 40px -22px rgba(43,33,26,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  background:var(--cream);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Cabeçalho ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,244,233,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0}
.logo{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.12rem;
  display:inline-flex;align-items:center;gap:.5em;color:var(--ink);text-decoration:none}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--terra);flex:0 0 auto}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links .ln{color:var(--ink-soft);text-decoration:none;font-size:.93rem}
.nav-links .ln:hover{color:var(--terra-deep)}
@media(max-width:820px){.nav-links .ln{display:none}}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:600;font-size:.96rem;padding:11px 24px;border-radius:100px;
  background:var(--terra);color:#fff;text-decoration:none;border:1px solid var(--terra-deep);
  box-shadow:0 10px 24px -12px rgba(200,90,50,.7);transition:.2s;white-space:nowrap;
}
.btn:hover{background:var(--terra-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--cream-2);border-color:var(--ink-soft)}

/* ---------- Índice do blog ---------- */
.blog-hero{padding:64px 0 10px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.76rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--terra-deep)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--terra)}
.blog-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(2.2rem,4.6vw,3.3rem);line-height:1.1;margin:18px 0 0}
.blog-hero p{color:var(--ink-soft);max-width:56ch;margin:18px auto 0;font-size:1.08rem}

.lista{display:grid;gap:20px;margin:54px 0 80px}
.post{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;text-decoration:none;color:inherit;transition:.2s}
.post:hover{border-color:var(--terra);transform:translateY(-2px);box-shadow:var(--shadow)}
@media(max-width:700px){.post{grid-template-columns:1fr;gap:12px}}
.post .meta{font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.post .meta .tema{display:block;font-weight:700;color:var(--terra-deep);
  text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;margin-bottom:5px}
.post h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.42rem;
  line-height:1.25;letter-spacing:-.01em;margin-bottom:8px}
.post p{color:var(--ink-soft);font-size:.97rem}
.post .ler{display:inline-block;margin-top:12px;color:var(--terra-deep);font-weight:600;font-size:.92rem}

/* ---------- Artigo ---------- */
.artigo{max-width:720px;margin:0 auto;padding:44px 24px 90px}
.trilha{font-size:.85rem;color:var(--ink-soft);margin-bottom:26px}
.trilha a{color:var(--terra-deep);text-decoration:none}
.trilha a:hover{text-decoration:underline}
.artigo h1{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.13;margin-bottom:18px}
.artigo .sub{font-size:1.16rem;color:var(--ink-soft);margin-bottom:26px}
.artigo .assinatura{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-size:.86rem;color:var(--ink-soft);padding-bottom:26px;border-bottom:1px solid var(--line)}
.artigo .corpo{margin-top:34px;font-size:1.09rem}
.artigo .corpo p{margin:0 0 22px}
.artigo .corpo h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.6rem;
  line-height:1.25;letter-spacing:-.01em;margin:44px 0 16px}
.artigo .corpo h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.22rem;
  margin:32px 0 12px}
.artigo .corpo ul,.artigo .corpo ol{margin:0 0 22px 22px}
.artigo .corpo li{margin:9px 0}
.artigo .corpo a{color:var(--terra-deep);font-weight:500}
.artigo .corpo strong{color:var(--ink)}
.artigo .corpo em{font-style:italic}
/* Citação da norma: o leitor precisa distinguir na hora o que é texto legal
   do que é opinião de quem escreveu. */
.norma{border-left:3px solid var(--sage);background:var(--cream-2);border-radius:0 14px 14px 0;
  padding:18px 22px;margin:0 0 24px;font-size:.98rem;color:var(--ink-soft)}
.norma .fonte{display:block;margin-top:10px;font-size:.82rem;font-weight:600;color:var(--sage);
  text-transform:uppercase;letter-spacing:.06em}
.destaque{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px;margin:0 0 24px}
.destaque p:last-child{margin-bottom:0}

/* Encerramento do artigo: o convite ao produto vem depois do conteúdo, e
   claramente separado dele. Texto que vende disfarçado de texto que ensina
   queima a confiança que o artigo acabou de construir. */
.fim{margin-top:56px;padding:30px 32px;border:1px dashed var(--line);
  border-radius:var(--radius);background:var(--cream-2)}
.fim h3{font-family:'Fraunces',Georgia,serif;font-size:1.2rem;margin-bottom:10px}
.fim p{color:var(--ink-soft);font-size:.98rem;margin-bottom:18px}

.proximos{margin-top:56px;border-top:1px solid var(--line);padding-top:32px}
.proximos h3{font-family:'Fraunces',Georgia,serif;font-size:1.1rem;margin-bottom:16px}
.proximos a{display:block;color:var(--ink);text-decoration:none;padding:12px 0;
  border-bottom:1px solid var(--line);font-weight:500}
.proximos a:last-child{border-bottom:none}
.proximos a:hover{color:var(--terra-deep)}
.proximos span{display:block;font-size:.83rem;color:var(--ink-soft);font-weight:400;margin-top:3px}

/* ---------- Rodapé ---------- */
footer{background:var(--ink);color:var(--cream);padding:48px 0 30px;margin-top:40px}
footer .logo{color:var(--cream)}
footer .cols{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between}
footer a{color:rgba(251,244,233,.82);text-decoration:none;font-size:.92rem}
footer a:hover{color:var(--amber)}
footer .col{display:flex;flex-direction:column;gap:9px}
footer h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-bottom:3px}
footer .miudo{margin-top:34px;padding-top:20px;border-top:1px solid rgba(251,244,233,.16);
  font-size:.8rem;color:rgba(251,244,233,.6);line-height:1.6}