/* ============================================================================
   /blog/<artigo>/ - pagina de artigo no ambiente claro (rascunho).
   Kit: tc-tokens, tc-base, tc-publico. Escopo .pg-artigo em tudo.
   O HTML do corpo e o mesmo do artigo no ar (texto identico, SEO preservado):
   o que muda e so a roupa. Datasheet escuro cheio de molduras -> superficies
   claras com raio e sombra, e uma COLUNA DE LEITURA de ~65-75 caracteres.
   ========================================================================== */

/* ---------- cabecalho do artigo ----------
   O cabecalho usa a MESMA grade do corpo (mesma fonte, logo o mesmo ch): assim a trilha,
   o H1, o subtitulo e as pilulas nascem exatamente na coluna onde o texto vai continuar. */
.pg-artigo .cabeca{padding-bottom:28px}
.pg-artigo .cabeca .wrap{display:grid;gap:0;font-size:var(--fs-md);
  grid-template-columns:[largo-start] minmax(0,1fr) [texto-start] min(54ch,100%) [texto-end] minmax(0,1fr) [largo-end]}
.pg-artigo .cabeca .wrap>*{grid-column:texto;min-width:0}
.pg-artigo .voltar{margin-bottom:var(--sp-4h);justify-self:start}
.pg-artigo .cabeca .trilha{margin-bottom:var(--sp-4)}
.pg-artigo .cabeca .trilha .cur{color:var(--txt-2)}
.pg-artigo .art-selo{margin-bottom:var(--sp-4h)}
/* o selo da data pode ser longo ("Guia de precos · atualizado em 23/08/2026"):
   o .selo da base e nowrap e estourava a tela em 320 px */
.pg-artigo .art-selo .selo{min-height:30px;padding:6px 14px;font-size:var(--fs-sm);
  white-space:normal;line-height:1.35;text-align:left}
.pg-artigo .art-selo .selo i{font-size:.9em}
.pg-artigo .cabeca h1{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.pg-artigo .cabeca h1 span{color:var(--acc-ink)}
.pg-artigo .cabeca .subtitle{max-width:62ch;font-size:1.12rem;color:var(--txt-2)}
.pg-artigo .byline{margin-top:var(--sp-4);color:var(--txt-3);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.pg-artigo .byline strong{color:var(--txt);font-weight:700}
.pg-artigo .byline .rt::before{content:"·";margin:0 8px;color:var(--txt-4)}

/* compartilhar: pilulas iguais aos botoes da casa, cor da rede so no hover.
   As classes sao sp-wa/sp-li/sp-tw (nao wa/li/tw) porque .wa e o botao FIXO do WhatsApp. */
.pg-artigo .share-pills{display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;
  margin-top:22px;padding-top:var(--sp-5);border-top:1px solid var(--divisor)}
.pg-artigo .share-pills .sp-label{font-family:var(--disp);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.1em;color:var(--txt-3)}
/* a pilula em si e o .chip do kit (tc-base); aqui so a cor da rede no hover */
.pg-artigo .share-pills a:active,.pg-artigo .share-pills button:active{transform:scale(.97)}
.pg-artigo .share-pills a.sp-wa:hover{background:var(--wa);color:var(--sobre-wa)}
.pg-artigo .share-pills a.sp-li:hover{background:var(--marca-linkedin);color:var(--sobre-cor)}
.pg-artigo .share-pills a.sp-tw:hover{background:var(--sup-inv);color:var(--sobre-inv)}
.pg-artigo .share-pills button:hover{background:var(--acc-soft);color:var(--acc-ink)}
.pg-artigo .share-pills .copied{background:var(--ok-soft);color:var(--ok-ink)}

/* ---------- barra de leitura e voltar ao topo ---------- */
.pg-artigo .readbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--acc);
  z-index:calc(var(--z-nav) + 20);transition:width .08s linear}
.pg-artigo .backtop{position:fixed;left:24px;bottom:26px;z-index:var(--z-fab);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--dur-2),transform var(--dur-2),box-shadow var(--dur-2)}
.pg-artigo .backtop.show{opacity:1;visibility:visible;transform:none}

/* ============================================================================
   COLUNA DE LEITURA
   grade de conteudo: tudo cai na faixa "texto" (~65-75 caracteres);
   tabela, figura, faixa de numeros, fontes e "continue lendo" escapam para "largo".
   ========================================================================== */
.pg-artigo .artigo{display:grid;gap:0;font-size:var(--fs-md);line-height:1.72;
  grid-template-columns:[largo-start] minmax(0,1fr) [texto-start] min(54ch,100%) [texto-end] minmax(0,1fr) [largo-end];
  padding-bottom:var(--sp-6)}
.pg-artigo .artigo>*{grid-column:texto;min-width:0}
.pg-artigo .artigo>.table-wrap,
.pg-artigo .artigo>figure.fig,
.pg-artigo .artigo>.stat-strip,
.pg-artigo .artigo>.sources,
.pg-artigo .artigo>.related{grid-column:largo;justify-self:center;width:min(100%,1000px)}
.pg-artigo main [id]{scroll-margin-top:122px}

/* ============================================================================
   COMPUTADOR (>= 1025 px, corte oficial do kit): texto na borda esquerda do container (a mesma da barra do topo),
   coluna de leitura de 68ch e, a direita, o quadro "Neste artigo" FIXO ao rolar (.lado).
   O quadro vem pronto no HTML (scripts/blog-lado.js): nada e montado por JS, entao nao ha CLS.
   Ate 1024 px o quadro fica escondido e vale a coluna central de antes.
   ========================================================================== */
@media (min-width:1025px){
  .pg-artigo .cabeca .wrap{grid-template-columns:[largo-start texto-start] minmax(0,1fr) [texto-end largo-end]}
  .pg-artigo .cabeca .wrap>*{max-width:72ch}
  .pg-artigo .artigo{column-gap:48px;
    grid-template-columns:[largo-start texto-start] minmax(0,68ch) [texto-end] minmax(0,1fr) [lado-start] 300px [lado-end largo-end]}
  .pg-artigo .artigo>.table-wrap,
  .pg-artigo .artigo>figure.fig,
  .pg-artigo .artigo>.stat-strip,
  .pg-artigo .artigo>.sources,
  .pg-artigo .artigo>.related{grid-column:texto;width:100%;justify-self:stretch}
  .pg-artigo .artigo>.lado{grid-column:lado;grid-row:1 / span 999;align-self:start;position:sticky;top:118px;
    max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--sup-2);border-radius:var(--r-lg);padding:22px 22px 18px;font-size:var(--fs-sm);line-height:1.45}
  .pg-artigo .lado .lado-t{margin:0 0 var(--sp-2h);color:var(--txt);font-family:var(--disp);
    font-size:var(--fs-sm);font-weight:800}
  .pg-artigo .artigo>.lado ol:not([class]){list-style:none;margin:0 0 var(--sp-4h);padding:0;display:grid;gap:var(--sp-2h)}
  .pg-artigo .artigo>.lado ol:not([class]) li{margin:0}
  .pg-artigo .lado ol a{color:var(--txt-2);text-decoration:none}
  .pg-artigo .lado ol a:hover{color:var(--acc-ink)}
  .pg-artigo .lado .lado-bt{display:flex;width:100%;justify-content:center}
}
@media (max-width:1024px){
  .pg-artigo .artigo>.lado{display:none}
}

/* ---------- texto ---------- */
.pg-artigo .artigo p{color:var(--txt-2);margin-bottom:var(--sp-4h)}
.pg-artigo .artigo strong{color:var(--txt);font-weight:700}
.pg-artigo .artigo em{color:var(--txt-2)}
/* O H2 virou a UNICA marca de secao (as "SEC 01" sairam na rodada 3): ele herda o respiro e a
   regua fina que separavam as secoes, senao o artigo vira um bloco so. O primeiro nao leva regua. */
.pg-artigo .artigo h2{font-size:clamp(1.4rem,2.8vw,1.95rem);font-weight:800;color:var(--txt);
  line-height:1.18;margin:52px 0 16px;padding-top:var(--sp-6);border-top:1px solid var(--divisor)}
.pg-artigo .artigo h2:first-of-type{margin-top:var(--sp-2);padding-top:0;border-top:0}
.pg-artigo .artigo h3{font-size:1.2rem;font-weight:800;color:var(--txt);margin:28px 0 10px}
.pg-artigo .artigo h4{font-size:1.05rem;font-weight:700;color:var(--txt)}
.pg-artigo .artigo a.inline{color:var(--acc-ink);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px;text-decoration-thickness:1px}
.pg-artigo .artigo a.inline:hover{text-decoration-thickness:2px}
.pg-artigo .artigo ul:not([class]),.pg-artigo .artigo ol:not([class]){margin:0 0 18px 1.15rem;color:var(--txt-2)}
.pg-artigo .artigo ul:not([class]) li,.pg-artigo .artigo ol:not([class]) li{margin-bottom:var(--sp-2)}

/* "Continue lendo" (unico rotulo de bloco que sobrou depois que as marcas "SEC 01" sairam) */
.pg-artigo .artigo .rel-label{display:block;margin:48px 0 14px;padding-top:var(--sp-3h);
  border-top:1px solid var(--divisor);color:var(--txt-3);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em}
.pg-artigo .artigo .data-label{margin:22px 0 10px;color:var(--txt-3);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em}

/* ---------- resposta rapida (TL;DR) ---------- */
.pg-artigo .quick-answer{background:var(--acc-soft);border-radius:var(--r-lg);padding:24px 26px;margin:28px 0 26px}
.pg-artigo .quick-answer .qa-label{font-family:var(--disp);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.1em;color:var(--acc-ink);margin-bottom:var(--sp-2h)}
.pg-artigo .quick-answer p{margin:0;color:var(--txt);font-size:var(--fs-md)}
.pg-artigo .quick-answer a.inline{color:var(--acc-ink)}

/* ---------- indice ---------- */
.pg-artigo .toc{background:var(--sup-2);border-radius:var(--r-lg);padding:22px 26px 18px;margin:0 0 30px}
.pg-artigo .toc strong{display:block;font-family:var(--disp);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.1em;color:var(--txt-3);margin-bottom:var(--sp-2h)}
.pg-artigo .toc ul{list-style:none;counter-reset:toc;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px}
.pg-artigo .toc li{counter-increment:toc;border-top:1px solid var(--divisor)}
.pg-artigo .toc li a{display:flex;align-items:baseline;gap:var(--sp-3);min-height:44px;padding:11px 0;
  color:var(--txt-2);font-size:var(--fs-base);font-weight:500}
.pg-artigo .toc li a::before{content:counter(toc,decimal-leading-zero);flex:none;
  font-family:var(--disp);font-size:var(--fs-sm);font-weight:800;color:var(--acc-ink);font-variant-numeric:tabular-nums}
.pg-artigo .toc li a:hover{color:var(--acc-ink)}

/* ---------- observacao / listas especiais ---------- */
.pg-artigo .note{margin:20px 0;padding:4px 0 4px 18px;border-left:3px solid var(--sup-4);
  color:var(--txt-3);font-size:var(--fs-base);font-style:italic}
.pg-artigo .note strong{color:var(--txt-2)}

.pg-artigo .criteria,.pg-artigo .checklist{list-style:none;margin:6px 0 20px}
.pg-artigo .criteria li,.pg-artigo .checklist li{position:relative;padding:12px 0 12px 28px;
  color:var(--txt-2);border-bottom:1px solid var(--divisor)}
.pg-artigo .criteria li:first-child,.pg-artigo .checklist li:first-child{border-top:1px solid var(--divisor)}
.pg-artigo .criteria li::before{content:"";position:absolute;left:2px;top:21px;
  width:9px;height:9px;border-radius:3px;background:var(--acc)}
.pg-artigo .checklist li::before{content:"";position:absolute;left:0;top:17px;
  width:16px;height:16px;border-radius:5px;background:var(--acc-soft)}

.pg-artigo .steps{list-style:none;counter-reset:step;margin:8px 0 20px}
.pg-artigo .steps li{counter-increment:step;position:relative;padding:14px 0 14px 54px;
  color:var(--txt-2);border-top:1px solid var(--divisor)}
.pg-artigo .steps li:last-child{border-bottom:1px solid var(--divisor)}
.pg-artigo .steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:14px;
  font-family:var(--disp);font-size:1.05rem;font-weight:800;color:var(--acc-ink);font-variant-numeric:tabular-nums}
.pg-artigo .steps li strong{color:var(--txt)}

.pg-artigo .price-block{background:var(--sup-2);border-radius:var(--r-lg);padding:6px 24px;margin:12px 0 22px}
.pg-artigo .price-block ul{list-style:none;margin:0}
.pg-artigo .price-block ul li{position:relative;padding:13px 0 13px 24px;color:var(--txt-2);
  border-top:1px solid var(--divisor)}
.pg-artigo .price-block ul li:first-child{border-top:0}
.pg-artigo .price-block ul li::before{content:"";position:absolute;left:0;top:23px;width:11px;height:2px;
  border-radius:2px;background:var(--acc)}

/* ---------- tabelas ---------- */
.pg-artigo .table-wrap{overflow-x:auto;overflow-y:hidden;margin:14px 0 10px;border-radius:var(--r-lg);
  background:var(--sup-1);box-shadow:var(--sombra-1);scrollbar-width:thin}
.pg-artigo table.compare{width:100%;border-collapse:collapse;min-width:620px;
  font-size:var(--fs-base);font-variant-numeric:tabular-nums}
.pg-artigo table.compare th,.pg-artigo table.compare td{text-align:left;padding:13px 18px}
.pg-artigo table.compare thead th{background:var(--sup-2);color:var(--txt-3);
  font-family:var(--disp);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.pg-artigo table.compare tbody td{color:var(--txt-2);border-top:1px solid var(--divisor)}
.pg-artigo table.compare tbody td:first-child{color:var(--txt);font-weight:700}
.pg-artigo table.compare tbody tr{transition:background var(--dur-1)}
.pg-artigo table.compare tbody tr:hover{background:var(--sup-2)}
.pg-artigo table.compare td.nota,.pg-artigo table.compare td.dt{color:var(--acc-ink);font-weight:700;white-space:nowrap}
.pg-artigo table.compare tr.us td{background:var(--acc-soft)}
.pg-artigo table.compare tr.us:hover td{background:var(--acc-soft)}
.pg-artigo table.compare tr.subhead td{background:var(--sup-2);color:var(--txt-3);
  font-family:var(--disp);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em}
.pg-artigo .tbl-caption{margin:12px 0 26px;color:var(--txt-3);font-size:var(--fs-sm);line-height:1.55}
.pg-artigo .bar-cell{width:150px;min-width:140px}
/* barra de nota = .progresso do kit (tc-base); aqui so a largura */
.pg-artigo .meter{width:120px}
.pg-artigo .meter .p100{width:100%}.pg-artigo .meter .p98{width:98%}
.pg-artigo .meter .p96{width:96%}.pg-artigo .meter .p94{width:94%}

/* ficha tecnica dos cases */
.pg-artigo table.spec{width:100%;border-collapse:collapse;font-size:var(--fs-base);
  background:var(--sup-2);border-radius:var(--r-lg);overflow:hidden;margin:14px 0 24px}
.pg-artigo table.spec td{text-align:left;padding:13px 18px;border-top:1px solid var(--divisor)}
.pg-artigo table.spec tr:first-child td{border-top:0}
.pg-artigo table.spec td:first-child{width:220px;color:var(--txt-3);
  font-family:var(--disp);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em}
.pg-artigo table.spec td:last-child{color:var(--txt)}
@media (max-width:600px){.pg-artigo table.spec td:first-child{width:auto}
  .pg-artigo table.spec,.pg-artigo table.spec tbody,.pg-artigo table.spec tr,.pg-artigo table.spec td{display:block}
  .pg-artigo table.spec td{padding:10px 16px}
  .pg-artigo table.spec td:first-child{padding-bottom:0;border-top:1px solid var(--divisor)}
  .pg-artigo table.spec td:last-child{border-top:0;padding-top:var(--sp-0)}}

/* ---------- figuras ---------- */
.pg-artigo figure.fig{background:var(--sup-2);border-radius:var(--r-lg);padding:var(--sp-2h);margin:26px 0}
.pg-artigo figure.fig img,.pg-artigo figure.fig video{width:100%;height:auto;border-radius:var(--r-md);background:var(--sup-3)}
.pg-artigo figure.fig figcaption{padding:12px 8px 4px;color:var(--txt-3);font-size:var(--fs-sm);line-height:1.55}
.pg-artigo figure.fig.portrait{max-width:460px;margin-inline:auto}

/* ---------- fontes ---------- */
.pg-artigo .source-line{margin:8px 0 6px;color:var(--txt-3);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.pg-artigo .source-line .sl-tag{color:var(--acc-ink);font-weight:800}
.pg-artigo .source-line a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
.pg-artigo .source-line a:hover{color:var(--acc-ink)}
.pg-artigo .sources{background:var(--sup-1);border-radius:var(--r-lg);box-shadow:var(--sombra-1);
  overflow:hidden;margin:14px 0 10px}
.pg-artigo .sources .src-label{padding:13px 24px;background:var(--sup-2);color:var(--acc-ink);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em}
.pg-artigo .sources ol{list-style:none;counter-reset:src;margin:0;padding:6px 24px 14px}
.pg-artigo .sources li{counter-increment:src;position:relative;padding:12px 0 12px 32px;
  color:var(--txt-2);font-size:var(--fs-base);border-bottom:1px solid var(--divisor)}
.pg-artigo .sources li:last-child{border-bottom:0}
.pg-artigo .sources li::before{content:counter(src,decimal-leading-zero);position:absolute;left:0;top:13px;
  font-family:var(--disp);font-size:var(--fs-sm);font-weight:800;color:var(--acc-ink);font-variant-numeric:tabular-nums}
.pg-artigo .sources li a{color:var(--acc-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;word-break:break-word}
.pg-artigo .sources li .src-src{color:var(--txt-3)}

/* ---------- faixa de numeros / fichas de empresa ---------- */
.pg-artigo .stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--divisor);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra-1);margin:16px 0 26px}
.pg-artigo .stat-strip .stat{background:var(--sup-1);padding:20px 22px}
.pg-artigo .stat-strip .num{font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,4.2vw,2.3rem);line-height:1.1;color:var(--txt);letter-spacing:-.02em}
.pg-artigo .stat-strip .stat:first-child .num{color:var(--acc-ink)}
.pg-artigo .stat-strip .lbl{margin-top:var(--sp-2);color:var(--txt-3);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em}
@media (max-width:600px){.pg-artigo .stat-strip{grid-template-columns:1fr}}

.pg-artigo .profile-card{padding:22px 0;border-top:1px solid var(--divisor)}
.pg-artigo .profile-card h3{margin:0 0 6px}
.pg-artigo .profile-card p{margin-bottom:0;font-size:var(--fs-base)}
.pg-artigo .profile-card .rate-tag{margin-left:auto;color:var(--txt-3);font-size:var(--fs-sm);
  font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-artigo .profile-card.featured{background:var(--sup-2);border-top:0;border-radius:var(--r-lg);
  padding:26px 28px;margin:10px 0 26px}
.pg-artigo .profile-card .best-for{display:inline-block;margin-bottom:var(--sp-3h);color:var(--acc-ink);
  font-weight:700;font-size:var(--fs-sm)}
.pg-artigo .profile-card ul{list-style:none;margin:14px 0 0}
.pg-artigo .profile-card ul li{position:relative;padding:10px 0 10px 26px;color:var(--txt-2);
  font-size:var(--fs-base);border-top:1px solid var(--divisor)}
.pg-artigo .profile-card ul li::before{content:"";position:absolute;left:4px;top:19px;
  width:8px;height:8px;border-radius:3px;background:var(--acc)}
.pg-artigo .op-badge{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:30px;padding:5px 14px;
  border-radius:var(--r-pill);background:var(--acc-soft);color:var(--acc-ink);
  font-family:var(--disp);font-size:var(--fs-sm);font-weight:700}
.pg-artigo .st{font-family:var(--disp);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.pg-artigo .st-conf{color:var(--ok-ink)}
.pg-artigo .st-est{color:var(--warn-ink)}

/* ---------- FAQ: a lista de perguntas (details.faq-item) e o acordeao do kit (tc-publico.css), igual ao do /faq/; aqui so o respiro entre os itens ---------- */
.pg-artigo details.faq-item{margin-bottom:var(--sp-2)}

/* ---------- aviso do artigo ---------- */
.pg-artigo .disclaimer-box{background:var(--sup-2);border-radius:var(--r-lg);overflow:hidden;margin:30px 0 24px}
.pg-artigo .disclaimer-box .db-label{padding:12px 24px;background:var(--sup-3);color:var(--acc-ink);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em}
.pg-artigo .disclaimer-box .db-title{padding:16px 24px 0;color:var(--txt);font-family:var(--disp);font-weight:800}
.pg-artigo .disclaimer-box p{margin:0;padding:16px 24px 20px;color:var(--txt-3);font-size:var(--fs-sm);line-height:1.6}
.pg-artigo .disclaimer-box a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
.pg-artigo .disclaimer-box a:hover{color:var(--acc-ink)}

/* ---------- continue lendo ---------- */
.pg-artigo .related{margin:44px 0 10px}
/* a grade e o .grade-2 do kit (2 colunas; 1 coluna ate 600 px) */
.pg-artigo .rel-card{display:block;background:var(--sup-1);border-radius:var(--r-lg);box-shadow:var(--sombra-1);
  padding:22px 24px;transition:box-shadow var(--dur-2) var(--ease-padrao),transform var(--dur-2) var(--ease-padrao)}
.pg-artigo .rel-card:hover{box-shadow:var(--sombra-2);transform:translateY(-2px)}
.pg-artigo .rel-card .rc-tag{display:inline-block;color:var(--acc-ink);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em}
.pg-artigo .rel-card :is(h3,h4){margin:10px 0 6px;font-weight:700;font-size:1.06rem;line-height:1.3;color:var(--txt);
  transition:color var(--dur-1)}
.pg-artigo .rel-card:hover :is(h3,h4){color:var(--acc-ink)}
.pg-artigo .rel-card p{margin:0;color:var(--txt-2);font-size:var(--fs-sm)}
.pg-artigo .rel-card .rc-go{display:inline-flex;align-items:center;gap:var(--sp-1h);margin-top:var(--sp-3);color:var(--acc-ink);
  font-family:var(--disp);font-size:var(--fs-sm);font-weight:700}

/* ---------- caixa do autor ---------- */
.pg-artigo .author-box{background:var(--sup-2);border-radius:var(--r-lg);padding:22px 26px;margin:34px 0 8px}
.pg-artigo .author-box .ab-label{margin-bottom:var(--sp-2);color:var(--txt-3);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em}
.pg-artigo .author-box h3{margin:0 0 6px;font-size:1.1rem;color:var(--txt)}
.pg-artigo .author-box p{margin:0;color:var(--txt-2);font-size:var(--fs-base)}

/* ---------- chamada final: o desenho e o .chamada do kit (tc-publico.css, cartao claro); aqui so largura e margem ---------- */
.pg-artigo .chamada{width:min(100%,1000px);margin:var(--sp-8) auto var(--sp-6)}

/* aviso editorial do pe: .nota-editorial do kit (tc-publico.css) */

/* ============================ CELULAR ============================ */
@media (max-width:820px){
  .pg-artigo main{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .pg-artigo main [id]{scroll-margin-top:96px}
  .pg-artigo .backtop{display:none}      /* as pilulas de baixo ja ocupam a faixa inferior */
  .pg-artigo .artigo{font-size:var(--fs-base)}
  .pg-artigo .cabeca .subtitle{font-size:1.05rem}
  .pg-artigo .byline,.pg-artigo .tbl-caption,.pg-artigo .source-line,
  .pg-artigo figure.fig figcaption,.pg-artigo .rel-card p,.pg-artigo .rel-card .rc-go,
  .pg-artigo .disclaimer-box p,.pg-artigo .profile-card .rate-tag{font-size:var(--fs-denso)}
  .pg-artigo .quick-answer,.pg-artigo .toc{padding:20px 20px 16px}
  .pg-artigo .profile-card.featured,.pg-artigo .author-box{padding:20px 20px}
  .pg-artigo .sources ol,.pg-artigo .sources .src-label{padding-inline:var(--sp-5)}
  .pg-artigo .disclaimer-box .db-label,.pg-artigo .disclaimer-box p,
  .pg-artigo .disclaimer-box .db-title{padding-inline:var(--sp-5)}
  .pg-artigo table.compare th,.pg-artigo table.compare td{padding:12px 14px}
  /* cabeca de tabela e selos ficam no minimo de 15 px no celular */
  .pg-artigo table.compare thead th,.pg-artigo table.compare tr.subhead td,
  .pg-artigo table.spec td:first-child,.pg-artigo .op-badge,
  .pg-artigo .profile-card .best-for,.pg-artigo .art-selo .selo{font-size:var(--fs-denso)}
}
/* titulo do artigo na trilha: some no celular pequeno (igual ao /blog/ no ar) */
@media (max-width:480px){
  .pg-artigo .cabeca .trilha .cur,.pg-artigo .cabeca .trilha .ult{display:none}
}
@media (max-width:360px){
  .pg-artigo .quick-answer,.pg-artigo .toc,.pg-artigo .profile-card.featured,
  .pg-artigo .author-box{padding:18px 16px}
}