/* =========================================================
   3BF Agência — blog.css
   Componentes dos artigos longos (capa, sumário, tabelas,
   destaques, FAQ, autor). Carregado só nas páginas de artigo.
   ========================================================= */

.article--long { max-width: 76ch; }

.article__kicker {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 1rem;
}
.article__lede {
  margin-top: 1.4rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
}

.article__cover { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.article__cover img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.article__cover figcaption,
.article__body figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.article__body figure { margin: 0.6rem 0; }
.article__body figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); }
.article__body h3 {
  margin-top: 0.6rem;
  font-size: var(--step-1);
  font-weight: 600;
  font-variation-settings: "wdth" 92;
}
.article__body ol { list-style: decimal; display: grid; gap: 0.7rem; padding-left: 1.3rem; color: var(--ink-2); line-height: 1.65; }
.article__body ol li { display: list-item; padding-left: 0.2rem; }
.article__body ol li::before { content: none; }
.article__body a:not(.btn) { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }
.article__body strong, .article__body b { color: var(--ink); }

/* Sumário */
.atoc {
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
}
.atoc b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.atoc ol { gap: 0.35rem; font-size: 0.9375rem; }
.atoc a { color: var(--ink-2) !important; text-decoration: none !important; }
.atoc a:hover { color: var(--orange-600) !important; }

/* Destaques */
.callout {
  border-left: 3px solid var(--orange-500);
  background: #fff7f1;
  padding: 1.1rem 1.35rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: grid;
  gap: 0.6rem;
}
.callout--blue { border-color: var(--blue-600); background: #f1f6ff; }
.callout--navy { border-color: var(--orange-500); background: var(--navy-900); }
.callout--navy p, .callout--navy li { color: rgba(255,255,255,.86) !important; }
.callout--navy b, .callout--navy strong { color: #fff !important; }
.callout > b:first-child {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
}
.callout--blue > b:first-child { color: var(--blue-600); }
.callout--navy > b:first-child { color: var(--orange-400) !important; }

.apull {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
  font-variation-settings: "wdth" 90;
}

/* Tabelas */
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
.tbl th, .tbl td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); line-height: 1.5; }
.tbl th {
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; color: var(--ink); }

/* Faixas de preço */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.tier { background: #fff; padding: 1.25rem 1.2rem; display: grid; gap: 0.55rem; align-content: start; }
.tier--hl { background: var(--navy-900); grid-column: 1 / -1; }
.tier--hl * { color: #fff !important; }
.tier small {
  font-family: var(--font-display);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
  font-weight: 600;
}
.tier--hl small { color: var(--orange-400) !important; }
.tier strong { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.03em; font-weight: 600; line-height: 1; }
.tier strong span { font-size: 0.85rem; font-weight: 500; letter-spacing: 0; }
.tier p { font-size: 0.875rem !important; line-height: 1.55 !important; color: var(--muted) !important; }
.tier--hl p { color: rgba(255,255,255,.75) !important; }

/* CTA dentro do artigo */
.acta {
  background: var(--navy-900);
  color: #fff;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}
.acta b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; color: #fff !important; }
.acta p { color: rgba(255,255,255,.78) !important; margin: 0; }

/* FAQ */
.afaq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.afaq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.afaq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.afaq summary::-webkit-details-marker { display: none; }
.afaq summary::after { content: "+"; color: var(--orange-500); font-size: 1.2rem; line-height: 1; }
.afaq details[open] summary::after { content: "–"; }
.afaq details p { margin-top: 0.7rem; }

/* Autor */
.author {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; }
.author b { display: block; color: var(--ink); }
.author p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; margin-top: 0.2rem; }

/* Leia também */
.related { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; }
.related > b {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.related__grid a { display: grid; gap: 0.6rem; color: var(--ink); }
.related__grid img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); }
.related__grid span { font-weight: 600; line-height: 1.3; font-size: 0.9375rem; }

/* Miniatura nos cards do índice */
.post__thumb { display: block; margin: -0.2rem 0 0.2rem; }
.post__thumb img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }

/* Lista com destaque em negrito: texto corrido, marcador posicionado */
.article__body ul li { display: block; position: relative; padding-left: 1.2rem; }
.article__body ul li::before { position: absolute; left: 0; top: 0; }

@media (max-width: 640px) { .tiers { grid-template-columns: repeat(2, 1fr); } }