/* Blog (MOM-88, Design MOM-86 aprovado pelo Tiago): lista, temas e artigo. Só nas páginas do blog (depois do style.css).
   Celular primeiro; computador a partir de 1024 px. Largura do conteúdo no computador: 1120 px (80 px de margem). */
main.blog { max-width: none; padding: 0; }
main.blog h2::after { display: none; }
.b-label { display: block; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.nav-desk a.nav-on { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--terra); text-decoration-thickness: 2px; }
.menu-panel a.nav-on { background: var(--creme); font-weight: 600; }
.b-top h1 em, .b-feat h2 em, .b-head h1 em, .b-body h2 em, .b-also h2 em { color: var(--terra); font-style: italic; }
.b-nopic { display: block; width: 100%; height: 100%; min-height: 112px; background: var(--verde-claro) url(/img/grafismo/malha.svg) center / 120px; border-radius: inherit; }

/* Selo das prévias (SITE_BLOG_DATE): post agendado. Nunca aparece no site publicado. */
.b-preview { display: inline-block; align-self: flex-start; margin: 0 0 8px; padding: 3px 8px; border-radius: 6px; background: var(--texto); color: var(--creme); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.b-card .b-preview { margin: 10px 0 0; }

/* ---------- Lista ---------- */
.b-top { padding: 12px 16px 0; }
.b-top h1 { margin: 0; font: 600 54px/.95 'Cormorant Garamond', Georgia, serif; color: var(--floresta); }
.b-sub { margin: 10px 0 0; font-size: 16px; color: var(--hero-texto); max-width: 640px; }
.b-chips-wrap { position: relative; }
/* Esmaecimento à direita no celular: mostra que a fileira de temas rola para o lado. */
.b-chips-wrap::after { content: ''; position: absolute; top: 18px; right: -16px; bottom: 2px; width: 24px; background: linear-gradient(to left, var(--creme), rgba(245, 239, 230, 0)); pointer-events: none; }
.b-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 18px 16px 2px; scrollbar-width: none; }
.b-chips::-webkit-scrollbar { display: none; }
.b-chips a { flex: none; height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--areia); background: var(--card); color: var(--texto); text-decoration: none; font-size: 14px; font-weight: 500; }
.b-chips a:hover { border-color: var(--floresta); }
.b-chips a[aria-current] { background: var(--floresta); border-color: var(--floresta); color: var(--creme); font-weight: 600; }
.b-feat { display: block; margin: 24px 16px 0; text-decoration: none; color: var(--texto); }
.b-feat-pic { position: relative; display: block; height: 280px; border-radius: 22px; }
.b-sun { display: none; }
.b-feat-pic img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.b-feat-text { display: block; margin-top: 14px; }
.b-feat h2 { margin: 6px 0 0; font: 600 36px/1.02 'Cormorant Garamond', Georgia, serif; color: var(--floresta); transition: color .2s; }
.b-feat-sum, .b-readlink { display: none; }
.b-author { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.b-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--verde-claro); color: var(--floresta); font: 600 18px/1 'Cormorant Garamond', Georgia, serif; }
.b-rule { height: 1px; margin: 32px 16px 0; background: var(--areia); }
.b-list { list-style: none; margin: 0; padding: 8px 16px 0; }
.b-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--texto); }
.b-pic { display: block; height: 112px; border-radius: 16px; }
.b-pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.b-card-text { display: flex; flex-direction: column; min-width: 0; }
.b-card-title { margin: 4px 0 0; font: 600 22px/1.1 'Cormorant Garamond', Georgia, serif; color: var(--floresta); letter-spacing: 0; transition: color .2s; }
.b-sum { display: none; }
.b-meta { margin-top: 6px; font-size: 12px; color: var(--suave); }
.b-card:hover .b-card-title, .b-feat:hover h2 { color: var(--terra); }
.b-card:focus-visible, .b-feat:focus-visible { outline: 3px solid var(--floresta); outline-offset: 4px; border-radius: 18px; }
.b-more { padding: 24px 16px 0; }
.b-more .h-btn { width: 100%; height: 52px; font-size: 16px; }
.b-band { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; margin: 40px 16px 0; padding: 40px 20px 22px; border-radius: 22px; background: var(--floresta); color: var(--creme); }
.b-band-stripe { position: absolute; left: 0; right: 0; top: 0; margin: 0 !important; }
.b-band-title { margin: 0; font: 600 34px/1.02 'Cormorant Garamond', Georgia, serif; color: var(--creme); }
.b-band-title em { color: var(--sol); font-style: italic; }
.b-band p:not(.b-band-title) { margin: 8px 0 0; font-size: 15px; color: var(--sobre-floresta); }
.b-band .h-btn { width: 100%; height: 52px; }

/* ---------- Artigo ---------- */
/* Barra fixa do celular: altura 72 px (10 + 52 + 10) + área segura; o rodapé não fica coberto. */
body.blog-post { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
html:not(.js) body.blog-post { padding-bottom: 0; }
.b-head { padding: 8px 16px 0; }
.b-crumbs { margin: 0; font-size: 13px; color: var(--suave); }
.b-crumbs a { color: var(--suave); text-decoration: none; }
.b-crumbs a:hover { text-decoration: underline; }
.b-crumbs .sep { margin: 0 6px; }
.b-eyebrow { margin-top: 14px; }
.b-head h1 { margin: 6px 0 0; font: 600 44px/1 'Cormorant Garamond', Georgia, serif; color: var(--floresta); letter-spacing: 0; }
.b-lead { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--hero-texto); }
.b-head .b-author b { color: var(--texto); font-weight: 600; }
.b-src-note { display: none; }
.b-cover { margin: 20px 16px 0; }
.b-cover img { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: 22px; }
.b-cover figcaption { margin-top: 8px; font: italic 500 17px/1.35 'Cormorant Garamond', Georgia, serif; color: var(--folha); }
.b-credit { font: 400 12px/1.4 'Inter', system-ui, sans-serif; color: var(--suave); }
.b-credit a { color: var(--suave); }
.b-cover-none { height: 120px; border-radius: 22px; background: var(--verde-claro) url(/img/grafismo/malha.svg) center / 160px; }
.b-toc-m { margin: 20px 16px 0; padding: 4px 18px; background: var(--card); border: 1px solid var(--borda); border-radius: 16px; }
.b-toc-m summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--floresta); }
.b-toc-m ol { margin: 0 0 14px; padding-left: 20px; font-size: 15px; line-height: 1.9; }
.b-toc-m a, .b-toc a { color: var(--floresta); text-decoration: none; }
.b-toc-m a:hover, .b-toc a:hover { color: var(--terra); }
.b-grid { padding: 0 16px; }
.b-body { font-size: 17px; line-height: 1.7; }
.b-body p, .b-body li { font-size: inherit; }
.b-body > p:first-child { margin-top: 24px; }
.b-body p { margin: 0 0 16px; }
.b-body a { color: var(--floresta); text-underline-offset: 3px; text-decoration-color: var(--folha); }
.b-body a:hover { color: var(--terra); }
.b-body [id] { scroll-margin-top: 88px; }
.b-body h2 { margin: 32px 0 8px; font: 600 32px/1.05 'Cormorant Garamond', Georgia, serif; color: var(--floresta); }
.b-body h3 { margin: 24px 0 6px; font: 600 19px/1.3 'Inter', system-ui, sans-serif; color: var(--floresta); }
.b-body ul, .b-body ol { margin: 0 0 16px; padding-left: 22px; }
.b-body li { margin: 4px 0; }
.b-body li > ul, .b-body li > ol { margin: 4px 0 0; }
.b-body table { font-size: 15px; line-height: 1.5; }
.b-body blockquote { margin: 24px 0; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--borda); }
.b-body blockquote p { margin: 0; }
.b-body hr { border: 0; height: 1px; background: var(--areia); margin: 32px 0; }
/* Passo: número grande em Sol ao lado do título; no celular o texto ocupa a largura toda. */
.b-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; margin-top: 32px; }
.b-step-n { font: italic 600 56px/.9 'Cormorant Garamond', Georgia, serif; font-variant-numeric: lining-nums; color: var(--sol); }
.b-step-c { display: contents; }
.b-step h2 { margin: 6px 0 0; font-size: 30px; align-self: center; }
.b-step-c > :not(h2) { grid-column: 1 / -1; }
.b-step-c > h2 + * { margin-top: 8px; }
.b-fig { margin: 14px 0 16px; }
.b-fig img { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: 18px; }
/* Dica de quem cultiva (Sálvia clara) e Atenção com pets (Terra clara) */
.b-tip, .b-pets { margin: 28px 0; border-radius: 20px; }
.b-tip { padding: 20px; background: var(--verde-claro); }
.b-tip .b-label { color: var(--floresta); }
.b-arch { display: none; }
.b-tip .b-box-title, .b-pets .b-box-title { margin: 4px 0 0; font: 600 26px/1.1 'Cormorant Garamond', Georgia, serif; color: var(--floresta); }
.b-tip p, .b-tip li, .b-pets p, .b-pets li { font-size: 15px; }
.b-tip .b-label + p, .b-tip .b-box-title + p, .b-pets .b-label + p, .b-pets .b-box-title + p { margin-top: 6px; }
.b-tip p:last-child, .b-pets p:last-child, .b-tip ul:last-child, .b-pets ul:last-child { margin-bottom: 0; }
.b-pets { padding: 18px 20px; background: var(--terra-clara); }
.b-pets .b-label { color: var(--perigo); }
.b-divider { margin-top: 40px; }
.b-sources { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--suave); }
.b-sources .b-label { color: var(--folha); }
.b-sources p, .b-sources li { font-size: 13px; color: var(--suave); }
.b-sources .b-label + p, .b-sources .b-label + ul { margin-top: 6px; }
.b-sources ul { padding-left: 18px; }
/* Planta do guia */
.b-plant { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--borda); border-radius: 18px; text-decoration: none; color: var(--texto); }
.b-plant img { width: 56px; height: 68px; object-fit: cover; border-radius: 999px 999px 10px 10px; }
.b-plant .b-label { color: var(--folha); font-size: 11px; }
.b-plant-name { display: block; font: 600 22px/1.1 'Cormorant Garamond', Georgia, serif; color: var(--floresta); }
.b-plant-see { display: block; font-size: 13px; color: var(--suave); }
.b-plant:hover .b-plant-name { color: var(--terra); }
.b-plant-m { margin-top: 28px; }
.b-side { display: none; }
/* Leia também */
.b-also { padding: 48px 16px 0; }
.b-also h2 { margin: 0; font: 600 34px/1 'Cormorant Garamond', Georgia, serif; color: var(--floresta); }
.b-also .b-list { padding: 8px 0 0; }
/* Barra fixa do celular */
.b-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--borda); box-shadow: 0 -10px 24px -16px rgba(46, 74, 54, .4); }
.b-bar .btn-cta { height: 52px; font-size: 19px; }
/* Com JavaScript (js/blog.js): escondida ao abrir; aparece depois do primeiro título e some no fim do artigo.
   Sem JavaScript: vira um botão comum no fim do artigo. */
.js .b-bar { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.js .b-bar.show { transform: none; visibility: visible; }
html:not(.js) .b-bar { position: static; margin-top: 40px; box-shadow: none; border: 0; background: none; }

@media (min-width: 1024px) {
  /* Lista */
  .b-top { max-width: 1280px; margin: 0 auto; padding: 24px 80px 0; }
  .b-top h1 { font-size: 92px; }
  .b-sub { margin-top: 14px; font-size: 20px; }
  .b-chips-wrap::after { display: none; }
  .b-chips { flex-wrap: wrap; gap: 10px; overflow: visible; margin: 0; padding: 28px 0 0; }
  .b-chips a { padding: 0 18px; font-size: 15px; }
  .b-feat { display: grid; grid-template-columns: minmax(0, 600px) minmax(320px, 1fr); gap: 56px; align-items: center; margin: 40px max(80px, calc(50% - 560px)) 0; }
  .b-feat-pic { height: 460px; }
  .b-sun { display: block; position: absolute; right: -24px; top: -20px; width: 160px; height: 160px; border-radius: 50%; background: var(--sol); }
  .b-feat-pic img { border-radius: 28px; }
  .b-feat-text { margin: 0; }
  .b-feat .b-label { font-size: 12px; }
  .b-feat h2 { margin-top: 10px; font-size: 58px; line-height: 1; }
  .b-feat-sum { display: block; margin-top: 16px; font-size: 17px; color: var(--hero-texto); }
  .b-feat .b-author { margin-top: 20px; font-size: 14px; }
  .b-readlink { display: inline-block; margin-top: 22px; font-weight: 600; color: var(--floresta); text-decoration: underline; text-underline-offset: 4px; }
  .b-rule { margin: 72px max(80px, calc(50% - 560px)) 0; }
  .b-listpage .b-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin: 0 max(80px, calc(50% - 560px)); padding: 40px 0 0; }
  .b-card { display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; }
  .b-pic { height: 260px; border-radius: 22px; }
  .b-card .b-label { margin-top: 16px; font-size: 12px; }
  .b-card-title { margin-top: 6px; font-size: 30px; line-height: 1.08; }
  .b-sum { display: block; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--hero-texto); }
  .b-meta { margin-top: 10px; font-size: 13px; }
  .b-more { padding: 48px 0 0; text-align: center; }
  .b-more .h-btn { width: auto; padding: 0 28px; }
  .b-band { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; margin: 80px max(80px, calc(50% - 560px)) 0; padding: 58px 48px 44px; border-radius: 24px; }
  .b-band-title { font-size: 46px; line-height: 1; }
  .b-band p:not(.b-band-title) { margin-top: 10px; font-size: 17px; }
  .b-band .h-btn { flex: none; width: auto; height: 56px; padding: 0 28px; font-size: 18px; }

  /* Artigo */
  body.blog-post { padding-bottom: 0; }
  .b-bar, .b-toc-m, .b-plant-m { display: none; }
  .b-head { max-width: 900px; margin: 0 max(80px, calc(50% - 560px)); padding: 16px 0 0; }
  .b-crumbs { font-size: 14px; }
  .b-eyebrow { margin-top: 18px; font-size: 12px; }
  .b-head h1 { margin-top: 8px; font-size: 76px; line-height: .98; }
  .b-lead { margin-top: 18px; font-size: 21px; }
  .b-head .b-author { margin-top: 20px; font-size: 14px; gap: 12px; }
  .b-head .b-avatar { width: 40px; height: 40px; font-size: 22px; }
  .b-src-note { display: inline; }
  .b-cover { margin: 36px max(80px, calc(50% - 560px)) 0; }
  .b-cover img { height: 560px; border-radius: 28px; }
  .b-cover figcaption { margin-top: 10px; font-size: 19px; }
  .b-grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(260px, 320px); justify-content: space-between; gap: clamp(40px, 6vw, 80px); align-items: start; margin: 0 max(80px, calc(50% - 560px)); padding: 48px 0 0; }
  .b-body { font-size: 18px; }
  .b-body > p:first-child { margin-top: 0; }
  .b-body h2 { margin: 44px 0 12px; font-size: 42px; }
  .b-step { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; margin-top: 48px; }
  .b-step-c { display: block; }
  .b-step-n { font-size: 72px; }
  .b-step h2 { margin: 0 0 10px; font-size: 38px; }
  .b-fig { margin: 18px 0; }
  .b-fig img { height: 360px; border-radius: 22px; }
  .b-tip, .b-pets { margin: 40px 0; border-radius: 22px; }
  .b-tip { padding: 26px 28px; }
  .b-tip-img { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
  .b-arch { display: block; width: 200px; height: 240px; object-fit: cover; border-radius: 999px 999px 16px 16px; }
  .b-tip .b-box-title, .b-pets .b-box-title { font-size: 30px; }
  .b-tip p, .b-tip li { font-size: 16px; }
  .b-pets { padding: 22px 28px; }
  .b-pets p, .b-pets li { font-size: 17px; }
  .b-divider { margin-top: 48px; }
  .b-sources { margin-top: 28px; }
  .b-sources, .b-sources p, .b-sources li { font-size: 14px; }
  .b-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 104px; }
  .b-toc { padding: 20px 22px; background: var(--card); border: 1px solid var(--borda); border-radius: 20px; }
  .b-toc .b-label { color: var(--folha); font-size: 12px; }
  .b-toc ol { margin: 10px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
  .b-toc li { margin: 6px 0; }
  .b-toc a.on { color: var(--terra); font-weight: 700; }
  .b-plant-d { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 20px; }
  .b-plant-d img { width: 64px; height: 78px; }
  .b-plant-d .b-plant-name { font-size: 24px; }
  .b-app { position: relative; overflow: hidden; padding: 22px; border-radius: 20px; background: var(--floresta); color: var(--creme); }
  .b-app-sun { position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: var(--sol); }
  .b-app-title { position: relative; margin: 0; padding-right: 64px; font: 600 28px/1.1 'Cormorant Garamond', Georgia, serif; color: var(--creme); }
  .b-app-title em { color: var(--sol); font-style: italic; }
  .b-app p:not(.b-app-title) { position: relative; margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--sobre-floresta); }
  .b-app-btn { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 14px; border-radius: 12px; background: var(--creme); color: var(--floresta); text-decoration: none; font-size: 16px; font-weight: 700; }
  .b-app-btn:hover { background: #fff; color: var(--floresta); }
  .b-share { display: flex; gap: 8px; }
  .b-share button { flex: 1; height: 44px; border-radius: 12px; border: 1px solid var(--areia); background: transparent; font: 600 14px 'Inter', system-ui, sans-serif; color: var(--texto); cursor: pointer; }
  .b-share button:hover { border-color: var(--floresta); }
  .b-also { max-width: none; margin: 0 max(80px, calc(50% - 560px)); padding: 96px 0 0; }
  .b-also h2 { font-size: 48px; }
  .b-also .b-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 28px 0 0; }
  .b-also .b-pic { height: 220px; }
  .b-also .b-label { margin-top: 14px; }
  .b-also .b-card-title { margin-top: 4px; font-size: 27px; }
  .b-also .b-sum { display: none; }
}
/* Sem JavaScript, copiar e compartilhar não funcionam: somem. */
html:not(.js) .b-share { display: none; }
@media (prefers-reduced-motion: reduce) { .b-card-title, .b-feat h2, .js .b-bar { transition: none; } }