/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  padding-block: var(--space-4) var(--space-3);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.breadcrumb a { color: var(--ink-secondary); }
.breadcrumb a:hover { color: var(--brand-teal-700); }
.breadcrumb .sep { color: var(--ink-muted); opacity: .6; }
.breadcrumb [aria-current="page"] { color: var(--brand-deep); font-weight: 600; }

/* ============================================================
   CATEGORY HERO
   ============================================================ */
.cat-hero {
  position: relative;
  background: linear-gradient(135deg, #11084d 0%, var(--brand-deep) 50%, var(--brand-violet) 100%);
  color: white;
  overflow: hidden;
  isolation: isolate;
}
.cat-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 30%, black 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, black 30%, black 70%, transparent 100%);
  z-index: -1; opacity: .4;
}
.cat-hero-inner { padding-block: var(--space-7); }
@media (min-width: 980px) { .cat-hero-inner { padding-block: var(--space-9) var(--space-7); } }

.cat-hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-teal-2);
  background: rgba(14,165,165,.12);
  border: 1px solid rgba(14,165,165,.35);
  padding: 6px 11px; border-radius: 999px;
  margin-bottom: var(--space-3);
}
.cat-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -.025em;
  line-height: 1.0;
  margin: 0 0 var(--space-3);
}
.cat-hero h1 .accent {
  background: linear-gradient(95deg, var(--brand-teal-2), var(--brand-teal-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cat-hero p.lead {
  max-width: 680px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-on-dark-muted);
  margin: 0 0 var(--space-5);
}
.cat-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 680px;
}
.cat-hero-meta .stat strong {
  display: block; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; color: white; line-height: 1;
}
.cat-hero-meta .stat span {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-on-dark-muted); margin-top: 5px; display: block;
}
@media (min-width: 720px) {
  .cat-hero-meta .stat strong { font-size: 1.7rem; }
  .cat-hero-meta .stat span { font-size: .62rem; }
}

/* ============================================================
   CATEGORY CONTENT — sidebar + grid produtos
   ============================================================ */
.cat-content {
  background: var(--surface-soft);
  border-block: 1px solid var(--border-subtle);
}
.cat-layout {
  padding-block: var(--space-7);
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 980px) {
  .cat-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-7);
    padding-block: var(--space-8);
  }
}

/* ===== Sidebar filtros ===== */
.cat-sidebar {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: max-content;
}
@media (min-width: 980px) {
  .cat-sidebar { position: sticky; top: 100px; }
}

.filter-group { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.filter-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.filter-group h3 {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 var(--space-3);
}
.filter-group ul { display: flex; flex-direction: column; gap: 2px; }
.filter-group ul li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; margin-inline: -10px;
  border-radius: var(--radius-sm);
  font-size: .92rem; color: var(--ink-secondary);
  transition: background .15s, color .15s;
}
.filter-group ul li a:hover { background: var(--surface-soft); color: var(--brand-deep); }
.filter-group ul li.active a { background: rgba(14,165,165,.08); color: var(--brand-deep); font-weight: 600; }
.filter-group ul .count { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-muted); }
.filter-group label {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 0;
  font-size: .92rem;
  color: var(--ink-secondary);
  cursor: pointer;
}
.filter-group label:hover { color: var(--brand-deep); }
.filter-group input[type="checkbox"], .filter-group input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--brand-teal-700);
  cursor: pointer;
}
.filter-group label .count { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-muted); }

.filter-clear {
  margin-top: var(--space-4);
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-secondary);
  background: white;
  cursor: pointer;
}
.filter-clear:hover { border-color: var(--brand-deep); color: var(--brand-deep); }

/* Toggle de filtros mobile */
.filter-mobile-toggle {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%;
  padding: 14px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--brand-deep); color: white;
  font-weight: 600;
  cursor: pointer;
}
@media (min-width: 980px) { .filter-mobile-toggle { display: none; } .cat-sidebar.collapsed-mobile { display: block; } }
@media (max-width: 979px) {
  .cat-sidebar { display: none; padding: 0; border: 0; background: transparent; }
  .cat-sidebar.open { display: block; }
}

/* ===== Toolbar e grid de produtos ===== */
.cat-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.cat-toolbar .results { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-secondary); }
.cat-toolbar .results strong { color: var(--brand-deep); }
.cat-toolbar select {
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: white;
  font-family: var(--font-body); font-size: .9rem;
  color: var(--ink-primary);
  cursor: pointer;
}

.prod-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .prod-grid { grid-template-columns: repeat(4, 1fr); } }
/* Variante "rich" — cards maiores quando categoria tem poucos produtos */
.prod-grid--rich { gap: var(--space-5); }
@media (min-width: 720px) { .prod-grid--rich { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .prod-grid--rich { grid-template-columns: repeat(2, 1fr); } }
.prod-grid--rich .prod-card .img { height: 180px; }
.prod-grid--rich .prod-card h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: var(--space-2); }
.prod-grid--rich .prod-card .desc {
  font-size: .94rem;
  color: var(--ink-secondary);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

.prod-card {
  background: white;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .25s, border-color .2s;
  position: relative;
  text-decoration: none;       /* card é <a> agora — clique no card todo */
  color: inherit;
}
.prod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--brand-teal); }
.prod-card .img {
  height: 140px;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 30% 30%, rgba(14,165,165,.12), transparent 60%), var(--surface-soft);
  display: grid; place-items: center;
  margin-bottom: var(--space-3);
  color: var(--brand-deep);
}
.prod-card .code {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .14em; color: var(--ink-muted);
  text-transform: uppercase; margin-bottom: 4px;
}
.prod-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: .96rem; margin: 0 0 var(--space-3);
  line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink-primary);
}
.prod-card .specs {
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--ink-muted); line-height: 1.4;
  margin-bottom: var(--space-4);
}
.prod-card .mode-tag {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  align-self: flex-start; margin-bottom: var(--space-3);
}
.prod-card .mode-tag.quote { background: rgba(26,17,112,.08); color: var(--brand-deep); }
.prod-card .mode-tag.sale  { background: rgba(15,110,86,.12); color: var(--brand-teal-700); }
.prod-card .cta {
  margin-top: auto; padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--brand-deep); font-weight: 600;
  font-size: .85rem;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, color .15s;
}
.prod-card:hover .cta { background: var(--brand-deep); color: white; }

/* ===== Paginação ===== */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: white;
  border: 1px solid var(--border-subtle);
  color: var(--ink-secondary);
  font-family: var(--font-mono); font-size: .85rem;
  font-weight: 500;
  transition: border-color .15s, color .15s, background .15s;
}
.pagination a:hover { border-color: var(--brand-teal); color: var(--brand-deep); }
.pagination .current { background: var(--brand-deep); color: white; border-color: var(--brand-deep); }
.pagination .gap { border: 0; background: transparent; }

/* ============================================================
   RICH CONTENT (TOC + article)
   ============================================================ */
.cat-rich {
  background: white;
  padding-block: var(--space-8);
}
@media (min-width: 980px) { .cat-rich { padding-block: var(--space-9); } }

.rich-layout {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 980px) {
  .rich-layout {
    grid-template-columns: 1fr 240px;
    gap: var(--space-8);
    /* PROPOSITAL: align-items default (stretch). O .toc estica até a altura
       do .rich-content e o .toc-stuck (sticky filho) desliza DENTRO dele.
       Sem stretch, .toc colapsa pro tamanho do conteúdo e sticky fica preso. */
  }
}

.rich-content { max-width: 760px; }
.rich-content header { margin-bottom: var(--space-6); }
.rich-content > header h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  letter-spacing: -.025em;
  margin-bottom: var(--space-3);
}
.rich-content > header h2 em { font-style: normal; color: var(--brand-teal-700); }
.rich-content > header > p {
  font-size: 1.1rem; line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 680px;
}
.rich-content h2 {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
  margin: var(--space-7) 0 var(--space-3);
  color: var(--ink-primary);
  scroll-margin-top: 160px;
}
.rich-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.2;
  margin: var(--space-7) 0 var(--space-3);
  color: var(--ink-primary);
  scroll-margin-top: 160px;  /* match com top do .toc-stuck para clicks no TOC nao caírem embaixo do header */
}
.rich-content p {
  font-size: 1rem; line-height: 1.7;
  color: var(--ink-secondary);
  margin-bottom: var(--space-4);
}
.rich-content p a { color: var(--brand-teal-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.rich-content p a:hover { color: var(--brand-deep); }
.rich-content ul:not(.bare), .rich-content ol {
  margin: var(--space-3) 0 var(--space-5);
  padding-left: 1.5em;
  list-style: disc;
  color: var(--ink-secondary);
}
.rich-content ul li, .rich-content ol li { margin-bottom: var(--space-2); line-height: 1.6; }

.rich-content .video-embed {
  position: relative;
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-soft);
  aspect-ratio: 16/9;
  display: grid; place-items: center;
}
.rich-content .video-embed::before {
  content: "▶  Vídeo embed (placeholder — receberá iframe do YouTube/Vimeo)";
  font-family: var(--font-mono); font-size: .82rem;
  color: var(--ink-secondary);
  letter-spacing: .03em;
}
.rich-content .video-caption {
  font-family: var(--font-mono); font-size: .76rem;
  color: var(--ink-muted);
  margin-top: var(--space-2);
  font-style: italic;
}

.rich-cta {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-violet));
  color: white;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin: var(--space-7) 0;
  display: grid; gap: var(--space-3);
}
@media (min-width: 720px) {
  .rich-cta { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-7); }
}
.rich-cta h4 {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  margin: 0 0 var(--space-2);
}
.rich-cta p { color: var(--ink-on-dark-muted); margin: 0; font-size: .94rem; }
.rich-cta .btn { background: var(--brand-teal); color: white; font-size: .92rem; padding: 14px 24px; }
.rich-cta .btn:hover { background: var(--brand-teal-2); }

/* ===== TOC desktop sticky =====
   Estratégia "nested sticky":
   - .toc (filho do grid): ESTICA na vertical (align-items default = stretch)
     -> ganha altura = altura do .rich-content adjacente
   - .toc-stuck (filho do .toc): faz o sticky DENTRO do .toc esticado
     -> tem espaço real pra deslizar enquanto o usuário rola */
.toc { display: none; }
@media (min-width: 980px) {
  .toc {
    display: block;
    /* sem align-self: start - precisa esticar pra dar scroll room ao sticky filho */
    padding: var(--space-5);
    border-left: 2px solid var(--border-subtle);
  }
  .toc-stuck {
    position: -webkit-sticky;
    position: sticky;
    /* top = altura do header sticky (.site-header = 141px) + 20px de respiro.
       Sem isso, o primeiro item do TOC fica embaixo do header e some. */
    top: 160px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
.toc h4, .toc-title {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-deep); margin-bottom: var(--space-4);
  font-weight: 600; transition: opacity .25s ease, max-height .25s ease, margin-bottom .25s ease;
  overflow: hidden;
}
.scrolled .toc-title { opacity: 0; max-height: 0; margin-bottom: 0; }
.toc ul li { margin-bottom: var(--space-2); }
.toc ul li a {
  display: block; padding: 6px 0; font-size: .88rem;
  color: var(--ink-secondary); border-left: 2px solid transparent;
  padding-left: var(--space-3); margin-left: -2px;
  transition: color .15s, border-color .15s;
}
.toc ul li a:hover { color: var(--brand-deep); }
.toc ul li a.active { color: var(--brand-teal-700); border-left-color: var(--brand-teal-700); font-weight: 600; }

/* ===== TOC share buttons ===== */
.toc-share { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--border-subtle); }
.toc-share-label {
  display: block; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--space-3);
}
.toc-share-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.toc-share-btn {
  position: relative; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-soft);
  color: var(--ink-secondary); border: 0; cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.toc-share-btn:hover { background: var(--brand-teal-700); color: white; transform: translateY(-2px); }
.toc-share-btn .copied-msg {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--brand-deep); color: white;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toc-share-btn.copied .copied-msg { opacity: 1; }

/* ===== TOC mobile floating button + drawer ===== */
.toc-mobile-trigger {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 80; background: var(--brand-deep); color: white;
  padding: var(--space-3) var(--space-2); border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
  writing-mode: vertical-rl; text-orientation: mixed;
  box-shadow: -2px 0 12px rgba(0,0,0,.18); display: flex; align-items: center; gap: var(--space-2);
  transition: right .25s ease;
}
.toc-mobile-trigger svg { transform: rotate(90deg); }
.toc-mobile-trigger:hover { background: var(--brand-violet); }
@media (min-width: 980px) { .toc-mobile-trigger { display: none; } }

.toc-mobile-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 85vw);
  background: white; z-index: 90; padding: var(--space-6);
  box-shadow: -8px 0 32px rgba(0,0,0,.12); transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1); overflow-y: auto;
}
.toc-mobile-panel.open { transform: translateX(0); }
.toc-mobile-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle);
}
.toc-mobile-panel-head h3 { font-size: 1.1rem; }
.toc-mobile-panel-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-soft); display: grid; place-items: center;
}
.toc-mobile-panel ul li { margin-bottom: 4px; }
.toc-mobile-panel ul li a {
  display: block; padding: 12px var(--space-3); font-size: .96rem;
  color: var(--ink-secondary); border-radius: var(--radius-sm); border-left: 2px solid transparent;
}
.toc-mobile-panel ul li a:hover, .toc-mobile-panel ul li a.active {
  background: rgba(14,165,165,.08); color: var(--brand-teal-700);
  border-left-color: var(--brand-teal-700); font-weight: 600;
}
.toc-mobile-overlay {
  position: fixed; inset: 0; background: rgba(15,18,53,.55);
  backdrop-filter: blur(2px); z-index: 85; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.toc-mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--surface-soft); padding-block: var(--space-8); border-block: 1px solid var(--border-subtle); }
.faq-inner { max-width: 820px; margin-inline: auto; }
.faq h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); letter-spacing: -.025em; text-align: center; margin-bottom: var(--space-3); }
.faq h2 em { font-style: normal; color: var(--brand-teal-700); }
.faq > p { text-align: center; color: var(--ink-secondary); margin-bottom: var(--space-7); }
.faq-item { background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; cursor: pointer; list-style: none; color: var(--ink-primary); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { transition: transform .2s ease; flex-shrink: 0; color: var(--brand-teal-700); }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--brand-deep); border-bottom: 1px solid var(--border-subtle); }
.faq-item .answer { padding: var(--space-4) var(--space-5); font-size: .98rem; line-height: 1.65; color: var(--ink-secondary); }
.faq-item .answer p { margin-bottom: var(--space-3); }
.faq-item .answer p:last-child { margin-bottom: 0; }

/* ============================================================
   RELATED BLOG
   ============================================================ */
.related-blog { padding-block: var(--space-8); }
.related-blog h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); letter-spacing: -.025em; margin-bottom: var(--space-2); }
.related-blog h2 em { font-style: normal; color: var(--brand-teal-700); }
.related-blog .lead { color: var(--ink-secondary); margin-bottom: var(--space-7); max-width: 580px; }
.blog-grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { text-decoration: none; color: inherit; background: white; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .25s, border-color .2s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--brand-teal); }
.blog-card .thumb { height: 180px; background: linear-gradient(135deg, var(--brand-deep), var(--brand-violet)); position: relative; overflow: hidden; }
.blog-card .thumb::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 18px 18px; opacity: .35; }
.blog-card .thumb .tag { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; background: rgba(255,255,255,.92); color: var(--brand-deep); font-weight: 600; }
.blog-card .body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.blog-card .meta { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.blog-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--space-3); color: var(--ink-primary); }
.blog-card p { font-size: .92rem; color: var(--ink-secondary); line-height: 1.55; flex: 1; }
.blog-card .read-more { margin-top: var(--space-4); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-teal-700); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   HERO COM IMAGEM (og_image_media_id setado)
   ============================================================ */
.cat-hero--with-image .cat-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cat-hero--with-image .cat-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17,8,77,.85) 0%, rgba(26,17,112,.78) 50%, rgba(61,26,143,.72) 100%);
  z-index: 1;
}
.cat-hero--with-image .cat-hero-bg picture,
.cat-hero--with-image .cat-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-hero--with-image .cat-hero-inner {
  position: relative;
  z-index: 2;
}
.cat-hero--with-image::after {
  display: none; /* desabilita o pattern de dots quando tem foto */
}

/* ============================================================
   RELATED BLOG CARD (estilo simples — sem capa real ainda)
   ============================================================ */
.blog-card-cover {
  height: 120px;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-violet));
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.45);
}

/* ============================================================
   PRODUCT CARD — imagem real (quando houver) preenche o slot
   ============================================================ */
.prod-card .img picture,
.prod-card .img picture img,
.prod-card .img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}
.prod-card .img:has(picture),
.prod-card .img:has(> img) {
  overflow: hidden;
  background: var(--surface-soft);
}