/*
 * article.css — estilos do ARTIGO do blog Elementar
 * Extraídos do mockup-blog-elementar.html e ESCOPADOS sob .blog-article
 * para não vazar no CRM. Suporta data-theme="light" e data-theme="dark"
 * via atributo no wrapper .blog-article.
 */

/* ─── Tokens do artigo (escopo local) ─── */
.blog-article {
  /* Paleta Solar: amarelo #fac202, azul #1a04ec, marinho #0b264b, verde #199b55 */
  --a-bg: #FFFFFF;
  --a-card: #FFFFFF;
  --a-side: #EBEBEB;
  --a-line: #E3E3E3;
  --a-line2: #D2D2D2;
  --a-text: #191919;
  --a-text-dim: #4A4A4A;
  --a-text-faint: #8A8A8A;
  --a-text-mute: #B7B7B7;
  --a-brand: #1A04EC;
  --a-brand-deep: #0B264B;
  --a-brand-soft: #EAEAFB;
  --a-brand-hot: #3B28F0;
  --a-terra: #0B264B;
  --a-terra-deep: #061733;
  --a-terra-soft: #E7EBF1;
  --a-verm: #FAC202;
  --a-verm-bright: #907207;
  --a-verm-soft: #FEF3D0;
  --a-verm-deep: #1A04EC;
  --a-ok: #199B55;
  --a-ok-soft: #E4F5EC;
  --a-warn: #A8761A;
  --a-warn-soft: #F4EAD0;
  --a-bad: #963C3C;
  --a-gold: #FAC202;
  --a-ouro: #907207;
  --a-r-card: 15px;
  --a-r-pill: 3.125rem;
  --a-r-sm: 6px;
  --a-shadow: 0 10px 30px -16px rgba(25,25,25,.18);
  --a-display: 'Montserrat', system-ui, sans-serif;
  --a-body: 'Montserrat', system-ui, sans-serif;
  --a-mono: 'Montserrat', ui-monospace, monospace;
  --a-maxw: 720px;

  font-family: var(--a-body);
  background: var(--a-bg);
  color: var(--a-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  border-radius: var(--a-r-card);
  overflow: hidden;
}

/* Dark mode */
.blog-article[data-theme="dark"] {
  --a-bg: #0E0F12;
  --a-card: #16181E;
  --a-side: #111317;
  --a-line: #24272F;
  --a-line2: #2F333D;
  --a-text: #F0EFEC;
  --a-text-dim: #B5B0A4;
  --a-text-faint: #7A7568;
  --a-text-mute: #4F4B42;
  --a-brand: #6F73A0;
  --a-brand-soft: #2A2D45;
  --a-brand-hot: #8A8FBE;
  --a-terra: #E07A4C;
  --a-terra-soft: #3A2418;
  --a-verm: #FF1F3F;
  --a-verm-bright: #FF4D5E;
  --a-verm-soft: #3A1A1F;
  --a-ok-soft: #1B2C24;
  --a-warn-soft: #2C2517;
  --a-bad-soft: #2F1818;
}

/* ─── Inner container ─── */
.blog-article .a-wrap {
  max-width: var(--a-maxw);
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* ─── Eyebrow ─── */
.blog-article .a-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.blog-article .a-eyebrow .a-cat {
  font-family: var(--a-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--a-terra);
  font-weight: 500;
}
.blog-article .a-eyebrow .a-tag {
  font-family: var(--a-mono);
  font-size: 11px;
  letter-spacing: .06em;
  background: var(--a-terra-soft);
  color: var(--a-terra-deep);
  padding: 3px 10px;
  border-radius: var(--a-r-pill);
  font-weight: 500;
}
.blog-article[data-theme="dark"] .a-eyebrow .a-tag { color: var(--a-terra); }

/* ─── Título ─── */
.blog-article h1.a-title {
  font-family: var(--a-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  color: var(--a-text);
}
.blog-article h1.a-title em {
  font-style: normal;
  color: var(--a-verm-deep);
}

/* ─── Meta (autor + datas) ─── */
.blog-article .a-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--a-line);
  font-size: 13.5px;
  color: var(--a-text-dim);
}
.blog-article .a-author {
  display: flex;
  align-items: center;
  gap: 11px;
}
.blog-article .a-author .a-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-family: var(--a-display);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--a-brand-hot), var(--a-brand));
  overflow: hidden;
}
.blog-article .a-author .a-av img { width: 100%; height: 100%; object-fit: cover; }
.blog-article .a-author b { display: block; color: var(--a-text); font-weight: 600; font-size: 14px; }
.blog-article .a-author small { color: var(--a-text-faint); font-size: 12px; }
.blog-article .a-mi { display: flex; align-items: center; gap: 7px; }
.blog-article .a-mi i { color: var(--a-terra); }
.blog-article .a-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--a-text-mute); }

/* ─── TL;DR ─── */
.blog-article .a-tldr {
  margin: 24px 0 4px;
  border: 1px solid var(--a-line);
  border-left: 4px solid var(--a-terra);
  border-radius: var(--a-r-card);
  background: var(--a-card);
  padding: 18px 22px;
}
.blog-article .a-tldr .a-tldr-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--a-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a-terra);
  margin-bottom: 10px;
}
.blog-article .a-tldr ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  padding: 0;
}
@media (max-width: 560px) { .blog-article .a-tldr ul { grid-template-columns: 1fr; } }
.blog-article .a-tldr li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14.5px;
  color: var(--a-text-dim);
  line-height: 1.4;
}
.blog-article .a-tldr li i { color: var(--a-ok); font-size: 12px; margin-top: 5px; flex: 0 0 auto; }
.blog-article .a-tldr li b { color: var(--a-text); font-weight: 600; }

/* ─── Hero ─── */
.blog-article .a-hero {
  margin: 26px 0 4px;
  border-radius: var(--a-r-card);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--a-line);
}
.blog-article .a-hero img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.blog-article .a-hero figcaption {
  position: absolute;
  bottom: 0; right: 0;
  background: rgba(20,18,15,.78);
  backdrop-filter: blur(4px);
  font-family: var(--a-mono);
  font-size: 10.5px;
  color: #e8e6e0;
  padding: 6px 12px;
  border-top-left-radius: 8px;
}

/* ─── Stats ─── */
.blog-article .a-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 28px 0 6px;
  border-top: 1px solid var(--a-line);
  border-bottom: 1px solid var(--a-line);
  padding: 22px 0;
}
.blog-article .a-stats .a-s { text-align: center; border-right: 1px solid var(--a-line); }
.blog-article .a-stats .a-s:last-child { border-right: none; }
.blog-article .a-stats .a-s i { color: var(--a-verm); font-size: 13px; margin-bottom: 8px; display: block; }
.blog-article .a-stats .a-s .a-v {
  font-weight: 800;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1;
  color: var(--a-text);
  letter-spacing: -.02em;
}
.blog-article .a-stats .a-s .a-l { font-size: 12px; color: var(--a-text-faint); letter-spacing: .01em; margin-top: 6px; }

/* ─── Corpo editorial ─── */
.blog-article .a-content { font-size: 17px; color: var(--a-text); line-height: 1.72; margin: 28px 0; }
.blog-article .a-content .a-lead {
  font-size: 20px; line-height: 1.6; color: var(--a-text); margin: 28px 0; font-weight: 500;
}
.blog-article .a-content h2 {
  font-family: var(--a-display);
  font-weight: 800; font-size: 28px; letter-spacing: -.02em; margin: 46px 0 14px;
  color: var(--a-text);
}
.blog-article .a-content h3 {
  font-family: var(--a-display);
  font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 28px 0 10px;
  color: var(--a-text);
}
.blog-article .a-content p { margin: 15px 0; }
.blog-article .a-content strong { color: var(--a-text); font-weight: 700; }
.blog-article .a-content a { color: var(--a-verm); text-decoration: none; border-bottom: 1px solid var(--a-verm-soft); transition: .18s; }
.blog-article .a-content a:hover { border-bottom-color: var(--a-verm); }
.blog-article .a-content ul,
.blog-article .a-content ol { margin: 15px 0 15px 2px; padding-left: 24px; }
.blog-article .a-content li { margin: 9px 0; padding-left: 4px; }
.blog-article .a-content ul li::marker { color: var(--a-terra); }
.blog-article .a-content ol li::marker { color: var(--a-brand); font-weight: 700; }

/* ─── Blockquote ─── */
.blog-article .a-content blockquote {
  margin: 32px 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--a-verm);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--a-text);
  letter-spacing: -.01em;
}
.blog-article .a-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--a-text-dim);
}

/* ─── Imagem inline ─── */
.blog-article .a-content .a-figure {
  margin: 30px 0;
  border-radius: var(--a-r-card);
  overflow: hidden;
  border: 1px solid var(--a-line);
}
.blog-article .a-content .a-figure img { width: 100%; display: block; }
.blog-article .a-content .a-figure figcaption {
  font-family: var(--a-mono);
  font-size: 11px;
  color: var(--a-text-faint);
  padding: 10px 14px;
  background: var(--a-side);
  text-align: center;
}

/* ─── Tabela ─── */
.blog-article .a-tbl {
  --a-tbl-fs: 14.5px;
  margin: 32px 0;
  overflow-x: auto;
  border-radius: var(--a-r-card);
  border: 1px solid var(--a-line);
  box-shadow: var(--a-shadow);
  -webkit-overflow-scrolling: touch;
}
/* Escalas de fonte (controle do editor) */
.blog-article .a-tbl--fs-sm { --a-tbl-fs: 13px; }
.blog-article .a-tbl--fs-md { --a-tbl-fs: 14.5px; }
.blog-article .a-tbl--fs-lg { --a-tbl-fs: 16.5px; }
.blog-article .a-tbl--fs-xl { --a-tbl-fs: 18.5px; }

.blog-article .a-tbl table {
  width: 100%; border-collapse: collapse;
  font-size: var(--a-tbl-fs); min-width: 360px;
}
.blog-article .a-tbl thead th {
  background: var(--a-brand-soft);
  font-family: var(--a-display);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 18px;
  color: var(--a-brand-deep);
  border-bottom: 2px solid var(--a-line2);
  white-space: nowrap;
}
.blog-article[data-theme="dark"] .a-tbl thead th { color: var(--a-text); }
.blog-article .a-tbl td {
  padding: 11px 18px;
  border-top: 1px solid var(--a-line);
  color: var(--a-text-dim);
  line-height: 1.5;
  vertical-align: top;
}
.blog-article .a-tbl tbody tr { transition: background .14s ease; }
.blog-article .a-tbl tbody tr:hover { background: var(--a-side); }
.blog-article .a-tbl td:first-child { color: var(--a-text); font-weight: 600; }

/* Coluna de numeração (# global à esquerda) */
.blog-article .a-tbl .a-tbl-num {
  width: 44px; text-align: center; font-family: var(--a-mono); font-size: 0.8em;
  font-weight: 500; color: var(--a-text-faint);
  background: var(--a-side); border-right: 1px solid var(--a-line);
}
.blog-article .a-tbl thead th.a-tbl-num { color: var(--a-text-faint); background: var(--a-brand-soft); }

/* Prefixo de numeração por coluna (ex: "17.") — acento terra */
.blog-article .a-tbl .a-tbl-cnum {
  font-family: var(--a-mono); font-weight: 600; color: var(--a-terra);
  margin-right: 8px; font-variant-numeric: tabular-nums; font-size: 0.86em;
}

/* Variante: listrada */
.blog-article .a-tbl--striped tbody tr:nth-child(even) { background: var(--a-side); }
.blog-article .a-tbl--striped tbody tr:hover { background: var(--a-brand-soft); }

/* Variante: com bordas */
.blog-article .a-tbl--bordered table { border: 1px solid var(--a-line); }
.blog-article .a-tbl--bordered th, .blog-article .a-tbl--bordered td { border: 1px solid var(--a-line); }

/* Variante: minimalista */
.blog-article .a-tbl--minimal { border: none; border-radius: 0; box-shadow: none; }
.blog-article .a-tbl--minimal thead th {
  background: transparent; color: var(--a-text-faint);
  border-bottom: 2px solid var(--a-line2); font-size: 0.74em;
}
.blog-article .a-tbl--minimal td { border-top: 1px solid var(--a-line); }
.blog-article .a-tbl--minimal tbody tr:hover { background: transparent; }
.blog-article .a-tbl--minimal td:first-child { color: var(--a-text-dim); font-weight: 500; }
.blog-article .a-tbl--minimal .a-tbl-num { background: transparent; border-right: none; }

/* ─── Banner CTA inline ─── */
.blog-article .a-cta-banner {
  margin: 38px 0;
  border-radius: var(--a-r-card);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--a-line);
  min-height: 148px;
  display: flex;
  align-items: center;
  background: linear-gradient(110deg, var(--a-brand) 0%, var(--a-brand-deep) 100%);
}
.blog-article .a-cta-banner .a-cta-t { padding: 24px 28px; z-index: 2; max-width: 70%; }
.blog-article .a-cta-banner h4 {
  font-family: var(--a-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  margin-bottom: 8px;
  color: #fff;
}
.blog-article .a-cta-banner p { color: rgba(255,255,255,.75); font-size: 14px; margin-bottom: 14px; }
.blog-article .a-cta-banner a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--a-display);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  border: none;
  background: var(--a-verm);
  padding: 10px 20px;
  border-radius: var(--a-r-sm);
  transition: .15s;
}
.blog-article .a-cta-banner a:hover { background: var(--a-verm-bright); }
.blog-article .a-cta-banner > img {
  position: absolute; right: 0; top: 0; bottom: 0; width: 44%;
  object-fit: cover; opacity: .85;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
/* Com imagem: imagem ocupa o banner inteiro, sem sólido, sem sombra/scrim — só o CTA por cima */
.blog-article .a-cta-banner.has-image { background: none; border: none; }
.blog-article .a-cta-banner.has-image .a-cta-t { max-width: 100%; }
.blog-article .a-cta-banner.has-image > img {
  inset: 0; right: 0; width: 100%; opacity: 1;
  mask-image: none; -webkit-mask-image: none; z-index: 0;
}
/* Tamanhos do botão CTA */
.blog-article .a-cta-banner a.cta-sm { padding: 7px 15px; font-size: 13px; }
.blog-article .a-cta-banner a.cta-md { padding: 10px 20px; font-size: 14px; }
.blog-article .a-cta-banner a.cta-lg { padding: 14px 30px; font-size: 16px; }
/* Botão sem URL (preview) herda os mesmos tamanhos */
.blog-article .a-cta-banner .a-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--a-display); font-weight: 600; color: #fff;
  text-decoration: none; border: none; background: var(--a-verm);
  border-radius: var(--a-r-sm); transition: .15s;
}
.blog-article .a-cta-banner span.a-cta-btn.cta-sm { padding: 7px 15px; font-size: 13px; }
.blog-article .a-cta-banner span.a-cta-btn.cta-md { padding: 10px 20px; font-size: 14px; }
.blog-article .a-cta-banner span.a-cta-btn.cta-lg { padding: 14px 30px; font-size: 16px; }

/* ─── Depoimento de aprovado ─── */
.blog-article .a-aprovado {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0;
  padding: 18px 22px;
  border-radius: var(--a-r-card);
  background: var(--a-ok-soft);
  border: 1px solid var(--a-line);
}
.blog-article .a-aprovado .a-aprov-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid var(--a-ok);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--a-ok);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}
.blog-article .a-aprovado .a-aprov-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-article .a-aprovado .a-qt { font-style: italic; font-size: 16px; color: var(--a-text); line-height: 1.45; }
.blog-article .a-aprovado .a-nm {
  font-family: var(--a-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--a-ok);
  margin-top: 6px;
  font-weight: 500;
}
.blog-article .a-aprovado .a-nm b { color: var(--a-text); }

/* ─── Arsenal (carrossel de planos) ─── */
.blog-article .a-arsenal { margin: 50px 0; }
.blog-article .a-arsenal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.blog-article .a-arsenal-head .a-ars-st { display: flex; align-items: center; gap: 12px; }
.blog-article .a-arsenal-head .a-ars-bar { width: 4px; height: 30px; border-radius: 4px; background: var(--a-verm); }
.blog-article .a-arsenal-head h3 { font-family: var(--a-display); font-weight: 700; font-size: 22px; }
.blog-article .a-arsenal-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.blog-article .a-arsenal-track::-webkit-scrollbar { display: none; }
.blog-article .a-prod {
  scroll-snap-align: start;
  flex: 0 0 280px;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-card);
  background: var(--a-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: .22s;
}
.blog-article .a-prod:hover { transform: translateY(-3px); border-color: var(--a-line2); box-shadow: var(--a-shadow); }
.blog-article .a-prod .a-prod-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.blog-article .a-prod h4 { font-family: var(--a-display); font-weight: 600; font-size: 17px; line-height: 1.2; margin-bottom: 6px; }
.blog-article .a-prod .a-prod-desc { font-size: 13px; color: var(--a-text-dim); margin-bottom: 14px; flex: 1; line-height: 1.5; }
.blog-article .a-prod .a-prod-price { display: flex; align-items: baseline; gap: 6px; }
.blog-article .a-prod .a-prod-price small { font-family: var(--a-mono); font-size: 12px; color: var(--a-text-faint); }
.blog-article .a-prod .a-prod-price b { font-size: 28px; color: var(--a-verm); font-weight: 800; }
.blog-article .a-prod .a-prod-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--a-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--a-brand);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--a-line2);
  padding: 10px;
  border-radius: var(--a-r-sm);
  margin-top: 14px;
  transition: .15s;
  cursor: pointer;
}
.blog-article .a-prod .a-prod-buy:hover {
  background: var(--a-brand);
  border-color: var(--a-brand);
  color: #fff;
}

/* ─── Newsletter ─── */
.blog-article .a-nl {
  margin: 52px 0;
  border-radius: var(--a-r-card);
  border: 1px solid var(--a-line);
  padding: 38px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--a-side);
}
.blog-article .a-nl .a-nl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--a-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a-terra);
  background: var(--a-terra-soft);
  padding: 5px 12px;
  border-radius: var(--a-r-pill);
  margin-bottom: 12px;
}
.blog-article .a-nl .a-nl-ic {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--a-brand-hot), var(--a-brand));
}
.blog-article .a-nl h3 { font-family: var(--a-display); font-weight: 700; font-size: 24px; margin-bottom: 6px; }
.blog-article .a-nl p { color: var(--a-text-dim); font-size: 14px; max-width: 420px; margin: 0 auto 20px; }
.blog-article .a-nl .a-nl-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; flex-wrap: wrap; }
.blog-article .a-nl .a-nl-form input {
  flex: 1;
  min-width: 140px;
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm);
  padding: 11px 14px;
  color: var(--a-text);
  font-size: 14px;
  outline: none;
  transition: .18s;
}
.blog-article .a-nl .a-nl-form input:focus { border-color: var(--a-verm); }
.blog-article .a-nl .a-nl-form button {
  font-family: var(--a-display);
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  background: var(--a-verm);
  border: none;
  padding: 11px 22px;
  border-radius: var(--a-r-sm);
  cursor: pointer;
  transition: .15s;
}
.blog-article .a-nl .a-nl-form button:hover { background: var(--a-verm-bright); }
.blog-article .a-nl .a-nl-consent {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  max-width: 440px; margin: 14px auto 0; text-align: left;
  font-size: 12px; color: var(--a-text-faint);
}
.blog-article .a-nl .a-nl-consent input { margin-top: 2px; width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--a-verm); }
.blog-article .a-nl .a-nl-consent a { color: var(--a-verm); text-decoration: none; }

/* ─── Divisor ─── */
.blog-article .a-divider {
  border: none;
  border-top: 1px solid var(--a-line);
  margin: 36px 0;
}

/* ─── Tags ─── */
.blog-article .a-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 36px 0 24px;
}
.blog-article .a-tags .a-tags-l {
  font-family: var(--a-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a-text-faint);
}
.blog-article .a-tags .a-tag-pill {
  font-family: var(--a-mono);
  font-size: 12.5px;
  color: var(--a-text-dim);
  background: var(--a-card);
  border: 1px solid var(--a-line);
  padding: 5px 13px;
  border-radius: var(--a-r-pill);
}

/* ─── Bio do autor ─── */
.blog-article .a-bio {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 26px;
  border-radius: var(--a-r-card);
  background: var(--a-card);
  border: 1px solid var(--a-line);
  margin-bottom: 36px;
}
.blog-article .a-bio .a-bio-av {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-family: var(--a-display);
  font-weight: 600;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--a-brand-hot), var(--a-brand));
  overflow: hidden;
}
.blog-article .a-bio .a-bio-av img { width: 100%; height: 100%; object-fit: cover; }
.blog-article .a-bio h4 { font-family: var(--a-display); font-weight: 700; font-size: 19px; margin-bottom: 2px; }
.blog-article .a-bio .a-bio-role {
  font-family: var(--a-mono);
  font-size: 11px;
  color: var(--a-terra);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.blog-article .a-bio p { font-size: 14px; color: var(--a-text-dim); line-height: 1.6; }

/* Letra capitular (drop cap) — inicial editorial com gradiente recortado */
.blog-article .a-dropcap::first-letter{
  float:left;
  font-family:var(--a-display,Georgia,serif);
  font-weight:800;
  font-size:4em;
  line-height:.62;
  padding:8px 13px 0 0;
  margin:6px 2px 0 0;
  letter-spacing:-0.02em;
  background:linear-gradient(145deg,var(--a-verm,#D90429),var(--a-terra,#C9663F));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Botao CTA simples */
.blog-article .a-cta-wrap{ margin:26px 0; }
.blog-article .a-cta-btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:700;font-size:15px;color:#fff;background:var(--vermelho,#D90429);
  padding:13px 26px;border-radius:8px;box-shadow:0 4px 14px -4px rgba(217,4,41,.5);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.blog-article .a-cta-btn:hover{ transform:translateY(-1px);background:var(--vermelho-bright,#FF1F3F); }
.blog-article .a-cta-btn.outline{
  background:transparent;color:var(--vermelho,#D90429);
  box-shadow:inset 0 0 0 2px var(--vermelho,#D90429);
}
.blog-article .a-cta-btn.outline:hover{ background:var(--vermelho,#D90429);color:#fff; }

/* CTA premium (grupo de botoes lado a lado) */
.blog-article .a-cta-row{ display:flex;flex-wrap:wrap;gap:12px;margin:32px 0; }
.blog-article .a-cta-btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;font-family:var(--display,inherit);font-weight:700;font-size:15px;
  letter-spacing:.01em;color:#fff;padding:14px 30px;border-radius:12px;
  background:linear-gradient(135deg,var(--vermelho-bright,#FF1F3F),var(--vermelho,#D90429) 55%,var(--vermelho-deep,#A8031F));
  box-shadow:0 8px 22px -8px rgba(217,4,41,.6),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;
}
.blog-article .a-cta-btn span{ position:relative;z-index:1; }
.blog-article .a-cta-btn i{ position:relative;z-index:1;font-size:12px;transition:transform .2s; }
.blog-article .a-cta-btn::before{
  content:'';position:absolute;inset:0;z-index:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .55s ease;
}
.blog-article .a-cta-btn:hover{ transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(217,4,41,.7),inset 0 1px 0 rgba(255,255,255,.22); }
.blog-article .a-cta-btn:hover::before{ transform:translateX(120%); }
.blog-article .a-cta-btn:hover i{ transform:translateX(4px); }
.blog-article .a-cta-btn.outline{
  background:transparent;color:var(--vermelho,#D90429);
  box-shadow:inset 0 0 0 2px var(--vermelho,#D90429);
}
.blog-article .a-cta-btn.outline:hover{
  color:#fff;box-shadow:0 14px 30px -10px rgba(217,4,41,.55);
}
.blog-article .a-cta-btn.outline::before{
  background:linear-gradient(135deg,var(--vermelho,#D90429),var(--vermelho-deep,#A8031F));
  transform:translateX(0);opacity:0;transition:opacity .2s;
}
.blog-article .a-cta-btn.outline:hover::before{ opacity:1; }

/* CTA — forca cor do texto (vence regra de link generica) */
.blog-article .a-cta-btn:not(.outline), .blog-article .a-cta-btn:not(.outline) span,
.blog-article .a-cta-btn:not(.outline) i{ color:#fff !important; }
.blog-article .a-cta-btn:not(.outline) span{ text-shadow:0 1px 2px rgba(0,0,0,.18); }
.blog-article .a-cta-btn.outline, .blog-article .a-cta-btn.outline span,
.blog-article .a-cta-btn.outline i{ color:var(--vermelho,#D90429) !important; }
.blog-article .a-cta-btn.outline:hover, .blog-article .a-cta-btn.outline:hover span,
.blog-article .a-cta-btn.outline:hover i{ color:#fff !important; }

/* Placeholder de paragrafo vazio (so no preview) */
.blog-article .a-skeleton{ position:relative; display:flex; flex-direction:column; gap:9px; margin:16px 0; padding:4px 0; }
.blog-article .a-skl-line{ height:13px; border-radius:6px; background:linear-gradient(90deg,rgba(128,128,128,.12),rgba(128,128,128,.24),rgba(128,128,128,.12)); background-size:200% 100%; animation:aSklShimmer 1.5s ease-in-out infinite; }
.blog-article .a-skl-line.short{ width:52%; }
.blog-article .a-skl-tag{ position:absolute; right:0; top:-4px; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute,#BEB8A6); font-style:italic; opacity:.85; }
@keyframes aSklShimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Embed YouTube */
.blog-article .a-yt-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; }
.blog-article .a-yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.blog-article .a-yt-empty{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:10px; background:var(--side,#F7F6F2); color:var(--text-faint,#9C9684); font-size:14px; }
.blog-article .a-yt-empty i{ font-size:30px; color:#FF0000; opacity:.6; }

/* FAQ (perguntas frequentes) */
.blog-article .a-faq{ margin:34px 0; }
.blog-article .a-faq-title{ font-family:var(--a-display); font-weight:800; font-size:clamp(20px,3vw,26px); letter-spacing:-.01em; margin:0 0 14px; color:var(--a-text); }
.blog-article .a-faq-item{ border-bottom:1px solid var(--a-line); }
.blog-article .a-faq-item > summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 2px; font-weight:600; font-size:16.5px; color:var(--a-text); }
.blog-article .a-faq-item > summary::-webkit-details-marker{ display:none; }
.blog-article .a-faq-item > summary::after{ content:"\002B"; font-family:var(--a-mono); font-size:20px; color:var(--a-terra); flex-shrink:0; }
.blog-article .a-faq-item[open] > summary::after{ content:"\2212"; }
.blog-article .a-faq-a{ padding:0 2px 18px; color:var(--a-text-dim); line-height:1.65; font-size:15.5px; }