/* =====================================================================
   BLOG: página inicial (hub de posts)
   Usa as variáveis, o cabeçalho, o rodapé e o fade-in lento do blog.css
   ===================================================================== */
#heroBgBlog { opacity: 0.30; inset: -32% -4%; background-position: 58% 18%; }
.bh-hero-sub { font-size: clamp(18px, 2vw, 23px); line-height: 1.55; max-width: 540px; }
.bh-hero-sub strong { font-weight: 800; }

.bh-tools-section { padding-top: 84px; }
.bh-lede { max-width: 1160px; margin: 0 auto 44px; font-size: clamp(20px, 2.3vw, 29px); }

/* busca + filtros */
.bh-tools {
  max-width: 1160px;
  margin: 0 auto 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
}
.bh-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-filter {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(102,38,63,.35);
  background: transparent;
  color: var(--bordo);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.bh-filter:hover { border-color: var(--bordo); transform: translateY(-1px); }
.bh-filter.is-active { background: var(--bordo); border-color: var(--bordo); color: var(--white); }
.bh-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 280px;
  max-width: 100%;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(102,38,63,.10);
  color: var(--bordo);
}
.bh-search svg { width: 20px; height: 20px; flex-shrink: 0; }
.bh-search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}
.bh-search input::placeholder { color: rgba(102,38,63,.55); }
.bh-search:focus-within { box-shadow: 0 0 0 2px var(--bordo), 0 8px 22px rgba(102,38,63,.12); }

/* destaque */
.bh-feature-wrap { max-width: 1160px; margin: 0 auto 36px; }
.bh-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(102,38,63,.14);
  transition: transform .5s ease, box-shadow .5s ease;
}
.bh-feature:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(102,38,63,.2); }
.bh-feature-photo {
  min-height: 380px;
  background-size: cover;
  background-position: center;
}
.bh-feature-body { padding: 44px 46px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.bh-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bordo-soft); margin-bottom: 14px;
}
.bh-chip-cat {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255,253,246,.92);
  color: var(--bordo);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
}
.bh-chip-inline { background: var(--tarja-yellow); margin-bottom: 18px; }
.bh-feature h2 {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 33px);
  line-height: 1.25;
  color: var(--bordo);
  text-wrap: balance;
}
.bh-feature p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.bh-feature-meta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 14px; color: var(--bordo-soft); }
.bh-feature-meta i, .bh-more i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.bh-feature-meta .bp-ic { width: 16px; height: 16px; }
.bh-feature-btn { display: inline-flex; align-items: center; gap: 10px; }
.bh-feature-btn .bp-ic { width: 18px; height: 18px; }
.bh-feature:hover .bh-feature-btn { background: var(--bordo); color: var(--white); }

/* grade de cards */
.bh-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.bh-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(102,38,63,.10);
}
.bh-card:not(.is-soon) { transition: transform .5s ease, box-shadow .5s ease; }
.bh-card:not(.is-soon):hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(102,38,63,.18); }
.bh-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.bh-photo .bh-chip-cat { position: absolute; left: 16px; top: 16px; box-shadow: 0 4px 14px rgba(102,38,63,.18); }
.bh-soon {
  position: absolute; right: 16px; top: 16px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--bordo); color: var(--white);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
}
.bh-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.bh-body h3 { margin: 0 0 12px; font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--bordo); text-wrap: balance; }
.bh-body p { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--ink); }
.bh-more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--bordo);
}
.bh-more .bp-ic { width: 16px; height: 16px; }
.bh-card.is-soon .bh-more { color: var(--bordo-soft); font-weight: 500; font-style: italic; }

/* filtros */
.bh-card.is-hidden, .bh-feature.is-hidden, .bh-feature-wrap.is-hidden { display: none; }
.bh-empty { text-align: center; margin: 48px auto 0; font-size: 17px; color: var(--bordo); }
.bh-empty[hidden] { display: none; }
.bh-empty button {
  margin-left: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--bordo); text-decoration: underline;
}

/* diagnóstico gratuito */
.bh-diag-section { padding: 96px 0; }
.bh-diag { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; max-width: 1100px; }
.bh-diag-tag {
  display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,222,89,.22); color: #FFE98A;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.bh-diag h2 { margin: 0 0 16px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.25; color: var(--white); text-wrap: balance; }
.bh-diag p { margin: 0 0 28px; font-size: 17.5px; line-height: 1.7; color: rgba(255,255,255,.92); }
.bh-diag strong { color: var(--white); font-weight: 700; }
.bh-diag-btn { background: var(--white); color: var(--bordo); border-color: var(--white); }
.bh-diag-btn:hover { background: var(--yellow-light); color: var(--bordo); }
.bh-diag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bh-diag-list li {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-size: 14.5px; line-height: 1.5;
}
.bh-diag-list .bp-ic { width: 30px; height: 30px; color: #FFE98A; }
.bh-diag-list strong { display: block; margin-bottom: 2px; font-size: 16px; }

@media (max-width: 960px) {
  .bh-grid { grid-template-columns: 1fr 1fr; }
  .bh-feature { grid-template-columns: 1fr; }
  .bh-feature-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .bh-diag { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .bh-tools-section { padding-top: 56px; }
  .bh-lede { margin-bottom: 30px; }
  .bh-tools { margin-bottom: 34px; }
  .bh-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -32px; padding: 4px 32px 10px; width: calc(100% + 64px); scrollbar-width: none; }
  .bh-filters::-webkit-scrollbar { display: none; }
  .bh-filter { flex-shrink: 0; }
  .bh-search { width: 100%; }
  .bh-grid { grid-template-columns: 1fr; gap: 24px; }
  .bh-feature { border-radius: 22px; }
  .bh-feature-body { padding: 28px 24px 30px; }
  .bh-diag-section { padding: 64px 0; }
  .bh-diag-btn { width: 100%; }
}

/* link do feed RSS, discreto, no fim da lista */
.bh-rss { margin: 36px 0 0; text-align: center; }
.bh-rss a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--bordo); opacity: .7; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: opacity .25s ease, border-color .25s ease; }
.bh-rss a:hover, .bh-rss a:focus-visible { opacity: 1; border-bottom-color: currentColor; }
.bh-rss svg { width: 16px; height: 16px; }