/* ============================================================================
   BLOG.CSS · índice, páginas de assunto e artigo do blog de Valdemiro Ferreira
   Receita R3 "Conteúdo escura" do manual UMIND Sales v4 (§11.2): F2 → F3 → F5.
   Vermelho só no bloco de chamada e nos botões. Tokens e classes-base vêm do
   assets/site.css (API do CONTRATO_DARK_V4 §1.1); aqui só o que é do blog.
   Classes: blog-* (índice e assuntos), art-* (artigo). Blocos: assets/blocos.css.
   ============================================================================ */

/* ---------- fonte de reserva com as medidas da Inter ----------
   Medido em 15/09 (Lighthouse celular): o título longo quebrava em outra quantidade de
   linhas enquanto a Inter não chegava e empurrava a capa (CLS 0,089, causa "Web font
   loaded"). A reserva abaixo é a Arial ajustada às medidas da Inter (os mesmos números
   que o next/font usa), então o texto ocupa o mesmo espaço antes e depois. */
@font-face{ font-family:"Inter Reserva"; src:local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust:107.12%; ascent-override:90.44%; descent-override:22.52%; line-gap-override:0%; }
.pg-blog{
  --font-display: Inter, "Inter Reserva", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text: Inter, "Inter Reserva", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- utilidades do blog ---------- */
.bl-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pg-blog main:focus{ outline:none; }
.art-link{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--u-text); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--u-border-emphasis); text-underline-offset:.2em;
}
.art-link:hover{ text-decoration-color:currentColor; }
.art-acao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px; border:0; border-radius:var(--r-pill);
  background:var(--u-surface); color:var(--u-text);
  font:600 .9375rem/1.2 var(--font-text); letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.art-acao:hover{ background:var(--u-surface-hover); }
.art-acao:active{ transform:scale(.98); }
.art-acao:focus-visible{ outline:2px solid var(--u-focus); outline-offset:3px; }

/* ---------- T1 prateado (manual §09.8, l.1205-1216) ----------
   O recorte do degradê corta o rabo do "p" e do "ç" quando a entrelinha é apertada:
   a folga abaixo devolve o espaço sem mexer no ritmo vertical. */
.blog-topo__titulo, .blog-tag__titulo, .art-titulo{ padding-bottom:.08em; margin-bottom:-.08em; }

/* ---------- ÍNDICE (R3: F2 → F3 → F5) ----------
   Respiro da corrida = --respiro do site.css (128 px / 64 px no celular, manual §11.2):
   o blog não sobrescreve mais o padding-top da primeira dobra. */
.blog-topo__grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
/* A quebra do título é manual (<br> no build), nunca por max-width em ch (manual §09.8).
   O <br> vale em todas as larguras: escondê-lo gruda as palavras vizinhas
   ("30 milsem", medido em 375 px em 16/09/2026). */
.blog-topo__sub{ margin-top:24px; max-width:46ch; font-size:1.1875rem; line-height:1.5; color:var(--u-text-2); }
.blog-topo__contagem{ margin-top:24px; font-size:.875rem; color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.blog-destaque__link{ display:grid; gap:24px; color:inherit; text-decoration:none; border-radius:var(--r-lg); }
.blog-destaque__img img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); background:var(--u-surface); transition:transform var(--t-slow) var(--ease); }
.blog-destaque__texto{ display:grid; gap:8px; }
.blog-destaque__rotulo{ font-size:.6875rem; line-height:1.3; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:var(--u-text-3); }
.blog-destaque__titulo{ font-size:clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height:1.2; letter-spacing:-.025em; font-weight:700; color:var(--u-text); text-wrap:balance; }
.blog-destaque__desc{ font-size:1rem; line-height:1.55; color:var(--u-text-2); }
.blog-destaque__meta{ font-size:.875rem; color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.blog-destaque__link:hover .blog-destaque__titulo{ text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--u-border-emphasis); text-underline-offset:.15em; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .blog-destaque__link:hover .blog-destaque__img img{ transform:scale(1.015); } }
.blog-destaque__img{ display:block; overflow:hidden; border-radius:var(--r-lg); }
@media (min-width:1024px){
  .blog-topo__grade{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:64px; align-items:center; }
}
@media (max-width:767px){ .blog-topo__sub{ font-size:1.0625rem; } }

.blog-corpo__titulo{ max-width:720px; }
.blog-assuntos{ margin-top:24px; }
.blog-assuntos ul{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.blog-assunto{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:var(--r-pill); background:var(--u-surface); color:var(--u-text-2);
  font-size:.9375rem; font-weight:500; text-decoration:none;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.blog-assunto:hover{ background:var(--u-surface-hover); color:var(--u-text); }
.blog-assunto[aria-current="page"]{ background:#F0F0F0; color:#0A0A0C; font-weight:600; }
.blog-assunto__n{ font-size:.8125rem; color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.blog-assunto[aria-current="page"] .blog-assunto__n{ color:#3F3F46; }
.blog-assuntos__mais{ margin-top:8px; }
.blog-assunto--mais{ cursor:pointer; list-style:none; color:var(--u-text); }
.blog-assunto--mais::-webkit-details-marker{ display:none; }
.blog-assunto--mais::after{
  content:""; width:12px; height:12px;
  background:linear-gradient(currentColor, currentColor) center/100% 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
}
.blog-assuntos__mais[open] > .blog-assunto--mais::after{ background:linear-gradient(currentColor, currentColor) center/100% 2px no-repeat; }
.blog-assunto--mais:focus-visible{ outline:2px solid var(--u-focus); outline-offset:3px; }
.blog-assuntos__mais > ul{ margin-top:8px; }

/* lista de artigos em linhas (sem grade de cartões iguais) */
.blog-lista{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; margin-top:48px; }
.blog-item__link{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; color:inherit; text-decoration:none; border-radius:var(--r-md); }
.blog-item__img{ display:block; overflow:hidden; border-radius:var(--r-md); }
.blog-item__img img{ width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--u-surface); transition:transform var(--t-slow) var(--ease); }
.blog-item__texto{ display:grid; gap:8px; align-content:start; }
.blog-item__meta{ display:flex; flex-wrap:wrap; column-gap:16px; row-gap:4px; font-size:.8125rem; color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.blog-item__titulo{ font-size:1.25rem; line-height:1.25; letter-spacing:-.022em; font-weight:600; color:var(--u-text); text-wrap:balance; }
.blog-item__desc{ font-size:.9375rem; line-height:1.55; color:var(--u-text-2); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.blog-item__link:hover .blog-item__titulo{ text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--u-border-emphasis); text-underline-offset:.15em; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .blog-item__link:hover .blog-item__img img{ transform:scale(1.02); } }
@media (min-width:768px){
  .blog-item__link{ grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:center; }
  .blog-item__titulo{ font-size:1.375rem; }
}

/* bloco de chamada do blog (BC1, 1 por página) */
.blog-chamada{ margin-top:96px; }
.blog-chamada__frase{ margin-inline:auto; max-width:22ch; font-family:var(--font-display); font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height:1.15; letter-spacing:-.03em; font-weight:700; color:#FFFFFF; text-wrap:balance; }
@media (max-width:767px){ .blog-chamada{ margin-top:64px; } }

/* página de assunto (R6: F2 → F5, uma corrida e o rodapé RD2) */
.blog-tag__titulo{ margin-top:8px; }
.blog-tag__sub{ margin-top:16px; font-size:1.0625rem; color:var(--u-text-2); }
/* Hierarquia: primeiro os artigos do assunto, depois a lista de assuntos (UX, 16/09). */
.blog-tag__outros{ margin-top:96px; font-size:1.25rem; line-height:1.3; letter-spacing:-.02em; }
.blog-tag .blog-assuntos{ margin-top:16px; }
@media (max-width:767px){ .blog-tag__outros{ margin-top:64px; } }

/* ---------- ARTIGO (PG-7, receita R3) ----------
   Respiro da corrida = --respiro do site.css (128/64). Sem padding-top próprio. */
.art-topo, .art-conteudo{ width:100%; max-width:720px; margin-inline:auto; }
.art-rascunho{
  margin-bottom:24px; padding:16px; border-radius:var(--r-md);
  background:var(--u-surface); color:var(--u-text-2); font-size:.9375rem; line-height:1.5;
  box-shadow:inset 3px 0 0 var(--u-warning);
}
.art-rascunho strong{ color:var(--u-text); }
.art-caminho ol{ display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; list-style:none; margin:0; padding:0; font-size:.875rem; color:var(--u-text-3); }
.art-caminho li{ display:flex; align-items:center; gap:8px; }
.art-caminho li + li::before{ content:"/"; color:var(--u-border-emphasis); }
.art-caminho a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding-inline:8px; margin-inline:-8px; color:var(--u-text-2); text-decoration:none; } /* alvo >= 44px de largura sem mexer no desenho (Q-G 15/09) */
.art-caminho a:hover{ color:var(--u-text); text-decoration:underline; text-decoration-color:var(--u-border-emphasis); }
.art-caminho a[aria-current="page"]{ color:var(--u-text); }
.art-titulo{ margin-top:8px; font-size:clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); line-height:1.08; letter-spacing:-.032em; }
.art-sub{ margin-top:16px; font-size:1.1875rem; line-height:1.5; color:var(--u-text-2); text-wrap:pretty; }
.art-meta{ display:flex; align-items:center; gap:16px; margin-top:24px; }
.art-meta__foto{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 40%; background:var(--u-surface); }
.art-meta__texto{ display:grid; gap:4px; font-size:.875rem; line-height:1.4; color:var(--u-text-3); }
.art-meta__autor{ color:var(--u-text-2); }
.art-meta__autor a{ display:inline-block; padding-block:14px; margin-block:-14px; color:var(--u-text); font-weight:600; text-decoration:none; } /* alvo de 44px de altura sem mudar a linha (Q-G 15/09) */
.art-meta__autor a:hover{ text-decoration:underline; text-decoration-color:var(--u-border-emphasis); }
.art-meta__datas{ display:flex; flex-wrap:wrap; column-gap:16px; row-gap:0; font-variant-numeric:tabular-nums; }
.art-compartilhar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.art-compartilhar__nativo{ display:none; }
@media (pointer:coarse){ .art-compartilhar__rede{ display:none; } .art-compartilhar__nativo{ display:inline-flex; } }
.art-grade{ margin-top:64px; }
.art-lateral{ display:none; }
@media (max-width:767px){
  .art-sub{ font-size:1.0625rem; }
  .art-grade{ margin-top:48px; }
}

/* texto do artigo */
.art-conteudo{ font-size:1.0625rem; line-height:1.65; color:var(--u-text-2); font-variant-numeric:tabular-nums; }
.art-conteudo p, .art-conteudo ul, .art-conteudo ol, .art-conteudo blockquote, .art-conteudo pre, .art-conteudo table{ margin-top:24px; }
.art-abertura > p:first-child{ margin-top:0; font-size:1.1875rem; line-height:1.55; color:var(--u-text); }
.art-capitulo{ margin-top:64px; }
.art-abertura + .art-capitulo{ margin-top:64px; }
.art-conteudo > .art-capitulo:first-child{ margin-top:0; }
/* PG-7: número do capítulo em Display à esquerda, título ao lado, âncora à direita.
   O número é o marcador da corrida de conteúdo (manual: "o número é o elemento gráfico
   mais forte"); sem cartão, sem moldura, só tipografia. */
.art-h2{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; column-gap:16px; }
.art-h2__num{
  font-family:var(--font-display); font-size:2.75rem; line-height:1; font-weight:700;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--u-text-3);
  margin-top:-.08em;
}
.art-h2 h2{ font-size:clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height:1.15; letter-spacing:-.03em; }
@media (max-width:519px){
  .art-h2{ grid-template-columns:minmax(0,1fr) auto; }
  .art-h2__num{ grid-column:1 / -1; font-size:2.25rem; margin-bottom:8px; }
}
.art-ancora{
  flex:0 0 44px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-6px -10px 0 0;
  border-radius:var(--r-sm); color:var(--u-text-3); font-size:1.25rem; font-weight:600; text-decoration:none;
  transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.art-ancora:hover{ color:var(--u-text); background:var(--u-surface); }
.art-ancora:focus-visible{ outline:2px solid var(--u-focus); outline-offset:2px; }
.art-h2 + p, .art-h2 + ul, .art-h2 + ol{ margin-top:24px; }
.art-conteudo h3{ margin-top:48px; font-size:1.25rem; line-height:1.3; letter-spacing:-.02em; }
.art-conteudo h3 + p{ margin-top:16px; }
.art-conteudo h4{ margin-top:32px; font-size:1.0625rem; }
.art-conteudo ul:not([class]), .art-conteudo ol:not([class]){ padding-left:24px; }
.art-conteudo li:not([class]) + li:not([class]){ margin-top:8px; }
.art-conteudo li::marker{ color:var(--u-text-3); }
/* Link dentro do texto corrido: alvo de 44 px de altura sem mexer na entrelinha
   (o mesmo truque ja usado no credito da capa e na assinatura do autor). */
.art-conteudo a:not([class]){ display:inline-block; padding-block:14px; margin-block:-14px; color:var(--u-text); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--u-border-emphasis); text-underline-offset:.2em; }
.art-conteudo a:not([class]):hover{ text-decoration-color:currentColor; }
.art-conteudo strong{ color:var(--u-text); font-weight:600; }
.art-conteudo blockquote{ padding-left:24px; box-shadow:inset 2px 0 0 var(--u-border-emphasis); color:var(--u-text); }
.art-conteudo code{ font-family:var(--font-mono); font-size:.9em; padding:2px 8px; border-radius:var(--r-sm); background:var(--u-surface); color:var(--u-text); }
.art-conteudo pre{ overflow-x:auto; padding:16px; border-radius:var(--r-md); background:var(--u-well); }
.art-conteudo pre code{ padding:0; background:none; }
.art-conteudo table{ display:block; overflow-x:auto; border-collapse:collapse; font-size:.9375rem; }
.art-conteudo th, .art-conteudo td{ padding:8px 16px 8px 0; text-align:left; vertical-align:top; }
.art-conteudo hr{ height:0; border:0; margin:48px 0 0; }
.art-img-inline{ display:inline-block; max-width:100%; border-radius:var(--r-sm); vertical-align:middle; }

/* bio do autor e compartilhar no fim */
.art-bio{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:24px; margin-top:96px; padding:32px; border-radius:var(--r-lg); background:var(--u-surface); }
.art-bio__foto{ width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:50% 40%; background:var(--u-surface-hi); }
.art-bio__texto{ display:grid; gap:8px; }
.art-bio__nome{ font-family:var(--font-display); font-size:1.25rem; line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--u-text); }
.art-bio__papel{ font-size:.875rem; color:var(--u-text-3); }
.art-bio__resumo{ font-size:1rem; line-height:1.55; color:var(--u-text-2); }
.art-compartilhar--fim{ margin-top:32px; }
@media (max-width:767px){ .art-bio{ grid-template-columns:minmax(0,1fr); gap:16px; padding:24px; margin-top:64px; } .art-bio__foto{ width:56px; height:56px; } }

/* sumário (lateral no desktop, gaveta no celular) */
.art-sumario{ font-size:.9375rem; line-height:1.35; }
.art-sumario__titulo{ font-size:.6875rem; line-height:1.3; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:var(--u-text-3); }
.art-sumario__progresso{ margin-top:8px; font-size:.8125rem; color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.art-trilho{ position:relative; display:block; height:2px; margin-top:8px; overflow:hidden; border-radius:var(--r-pill); background:var(--u-border-subtle); }
.art-trilho__barra{ position:absolute; inset:0; background:#F0F0F0; transform-origin:left center; transform:scaleX(0); transition:transform var(--t-base) var(--ease); }
.art-sumario__lista{ display:grid; gap:0; margin-top:16px; }
.art-sumario__link{
  position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; align-items:start;
  min-height:44px; padding:10px 12px 10px 8px; border-radius:var(--r-sm);
  color:var(--u-text-2); text-decoration:none;
  transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.art-sumario__link:hover{ color:var(--u-text); background:var(--u-surface); }
.art-sumario__link[aria-current="location"]{ color:var(--u-text); font-weight:600; background:var(--u-surface); }
.art-sumario__link[aria-current="location"]::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:var(--r-pill); background:#F0F0F0; }
.art-sumario__num{ color:var(--u-text-3); font-variant-numeric:tabular-nums; font-weight:500; }
.art-sumario__subtitulo{ margin-top:24px; font-size:.6875rem; line-height:1.3; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:var(--u-text-3); }
.art-sumario__atalhos{ display:grid; margin-top:8px; }
.art-sumario__atalho{ display:flex; align-items:center; min-height:44px; padding:0 8px; border-radius:var(--r-sm); color:var(--u-text-2); text-decoration:none; }
.art-sumario__atalho:hover{ color:var(--u-text); background:var(--u-surface); }

/* barra de progresso do celular (abre a gaveta) */
.art-progresso{
  position:fixed; z-index:30; left:max(16px, env(safe-area-inset-left)); right:max(16px, env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateY(calc(100% + 32px)); transition:transform var(--t-base) var(--ease); pointer-events:none;
}
.art-progresso.is-visivel{ transform:none; pointer-events:auto; }
.art-progresso__botao{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  min-height:52px; padding:0 16px; border:0; border-radius:var(--r-md);
  background:#27272A; color:var(--u-text); font:500 .875rem/1.3 var(--font-text); text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 12px 32px -12px rgba(0,0,0,.7);
}
.art-progresso__texto{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--u-text-2); font-variant-numeric:tabular-nums; }
.art-progresso__acao{ flex:0 0 auto; font-weight:600; }
.art-progresso__botao:focus-visible{ outline:2px solid var(--u-focus); outline-offset:3px; }
.art-trilho--chip{ position:absolute; z-index:1; left:12px; right:12px; top:0; margin:0; height:2px; border-radius:0 0 var(--r-pill) var(--r-pill); }

.art-gaveta{
  position:fixed; inset:auto 0 0 0; width:100%; max-width:100%; max-height:min(82dvh, 680px); margin:0;
  padding:16px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border:0; border-radius:var(--r-xl) var(--r-xl) 0 0; background:#1F1F23; color:var(--u-text-2);
  overflow-y:auto; overscroll-behavior:contain;
}
.art-gaveta::backdrop{ background:rgba(0,0,0,.6); }
.art-gaveta[open]{ animation:art-sobe var(--t-base) var(--ease); }
@keyframes art-sobe{ from{ transform:translateY(24px); opacity:0; } }
.art-gaveta__topo{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.art-gaveta__titulo{ font-size:1.1875rem; }
.art-gaveta__fechar{ min-height:44px; padding:0 16px; border:0; border-radius:var(--r-pill); background:var(--u-surface-hi); color:var(--u-text); font-weight:600; }
.art-gaveta__fechar:focus-visible{ outline:2px solid var(--u-focus); outline-offset:3px; }
.art-gaveta .art-sumario{ margin-top:8px; }
.art-gaveta .art-sumario__link:hover, .art-gaveta .art-sumario__link[aria-current="location"]{ background:#27272A; }

/* o foco nunca fica escondido atrás da barra de progresso do celular */
@media (max-width:1199px){ html:has(body.pg-artigo){ scroll-padding-bottom:88px; } }

/* aviso curto (copiar, compartilhar) */
.art-aviso{
  position:fixed; z-index:50; left:50%; bottom:calc(88px + env(safe-area-inset-bottom));
  max-width:calc(100vw - 32px); padding:12px 16px; border-radius:var(--r-md);
  background:#F0F0F0; color:#0A0A0C; font-size:.9375rem; font-weight:600; line-height:1.35;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.7);
  opacity:0; transform:translate(-50%, 8px); pointer-events:none;
  transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.art-aviso:empty{ display:none; }
.art-aviso.is-visivel{ opacity:1; transform:translate(-50%, 0); }

.art-fim__grade{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:96px; }
.art-fim__grade > *{ min-width:0; }

/* desktop largo: sumário fixo à esquerda, texto na coluna de 720 px */
@media (min-width:1200px){
  .art-leitura > .wrap{ display:grid; grid-template-columns:220px minmax(0,720px) minmax(0,1fr); column-gap:64px; }
  .art-topo{ grid-column:2 / 4; max-width:880px; margin-inline:0; }
  .art-grade{ display:contents; }
  .art-grade--sem-sumario .art-conteudo{ grid-column:2; }
  .art-lateral{
    display:block; grid-column:1; grid-row:3; align-self:start; position:sticky; top:calc(var(--cab-h) + 32px);
    max-height:calc(100dvh - var(--cab-h) - 48px); overflow-y:auto; overscroll-behavior:contain; margin-top:64px;
    scrollbar-width:thin; scrollbar-color:var(--u-border-default) transparent;
  }
  .art-conteudo{ grid-column:2; grid-row:3; margin-inline:0; margin-top:64px; }
  .art-progresso{ display:none; }
  .art-aviso{ bottom:32px; }
  .art-fim__grade{ display:grid; grid-template-columns:220px minmax(0,720px) minmax(0,1fr); column-gap:64px; }
  .art-fim__grade > *{ grid-column:2 / 4; }
  .art-fim__grade > .art-resumo, .art-fim__grade > .art-convite{ grid-column:2; }
}

/* scroll ligado à leitura: a barra acompanha o artigo inteiro onde o navegador sabe fazer */
.pg-artigo{ timeline-scope:--leitura; }
.art-conteudo{ view-timeline:--leitura block; }
@supports (animation-timeline:view()){
  .art-trilho__barra{ transition:none; animation:art-ler linear both; animation-timeline:--leitura; animation-range:contain 0% contain 100%; }
  @keyframes art-ler{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}

/* fim do artigo (F3): resumo, continue lendo, chamada */
.art-resumo{ max-width:720px; }
.art-resumo__titulo{ font-size:clamp(1.75rem, 1.45rem + 1vw, 2rem); }
.art-resumo__intro{ margin-top:16px; font-size:1.0625rem; color:var(--u-text-2); }
.art-resumo__vazio{ margin-top:24px; padding:16px 24px; border-radius:var(--r-md); background:var(--u-surface); color:var(--u-text-2); font-size:.9375rem; }
.art-resumo__lista{ display:grid; gap:8px; margin-top:24px; }
.art-resumo__item{ display:grid; gap:4px; padding:16px 24px; border-radius:var(--r-md); background:var(--u-surface); }
.art-resumo__rotulo{ font-size:.8125rem; line-height:1.4; color:var(--u-text-3); }
.art-resumo__valor{ font-size:1.0625rem; line-height:1.45; font-weight:600; color:var(--u-text); }
.art-resumo__rever{ justify-self:start; display:inline-flex; align-items:center; min-height:44px; color:var(--u-text-2); font-size:.875rem; text-decoration:underline; text-decoration-color:var(--u-border-emphasis); text-underline-offset:.2em; }
.art-resumo__rever:hover{ color:var(--u-text); }
.art-resumo__subtitulo{ margin-top:48px; font-size:1.25rem; }
.art-resumo__passos{ display:grid; gap:8px; margin-top:16px; counter-reset:passo; }
.art-resumo__passos li{ counter-increment:passo; }
.art-resumo__passo{
  display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:8px;
  min-height:56px; padding:12px 16px; border-radius:var(--r-md); background:var(--u-surface);
  color:var(--u-text); font-weight:600; text-decoration:none;
  transition:background-color var(--t-fast) var(--ease);
}
.art-resumo__passo::before{ content:counter(passo); color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.art-resumo__passo::after{
  content:""; width:18px; height:18px; background:var(--u-text-3);
  -webkit-mask:var(--u-arrow) center/contain no-repeat; mask:var(--u-arrow) center/contain no-repeat;
  transition:transform var(--t-base) var(--ease);
}
.art-resumo__passo:hover{ background:var(--u-surface-hover); }
@media (hover:hover){ .art-resumo__passo:hover::after{ transform:translateX(3px); background:var(--u-text); } }
.art-resumo__acoes{ display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; }
.art-resumo__receber{ margin-top:32px; }
.art-resumo__receber .art-resumo__subtitulo{ margin-top:0; }
.art-resumo__form{ display:grid; gap:16px; margin-top:24px; }
/* o link da politica dentro do rotulo de autorizacao tambem precisa de 44 px de alvo */
.art-resumo__form .escolha a{ display:inline-block; padding-block:3px; margin-block:-3px; }
.art-resumo__form .campo + .campo{ margin-top:0; }
.art-resumo__status{ margin:0; }
.art-resumo__sucesso{ margin-top:16px; padding:24px; border-radius:var(--r-md); background:var(--u-well); color:var(--u-text-2); box-shadow:inset 3px 0 0 var(--u-success); }
.art-resumo__sucesso:focus{ outline:none; }
.art-resumo__sucesso-titulo{ margin-bottom:8px; font-weight:700; color:var(--u-success); }
/* artigo sem bloco interativo: convite para o Diagnóstico no lugar do resumo */
.art-convite{ max-width:720px; }
.art-convite__titulo{ font-size:clamp(1.75rem, 1.45rem + 1vw, 2rem); }
.art-convite__intro{ margin-top:16px; font-size:1.0625rem; color:var(--u-text-2); }
.art-convite .bl-banner{ margin-top:32px; }
.art-relacionados__titulo{ font-size:clamp(1.75rem, 1.45rem + 1vw, 2rem); }
.art-relacionados .blog-lista{ margin-top:32px; }
.art-relacionados > .art-link{ margin-top:32px; }
.art-fim .blog-chamada{ margin-top:0; }
@media (max-width:767px){
  .art-fim__grade{ row-gap:64px; }
  .art-resumo__item, .art-resumo__vazio{ padding:16px; }
  .art-resumo__acoes .btn{ width:100%; }
}

/* ---------- IMPRESSÃO / SALVAR EM PDF ---------- */
@media print{
  @page{ margin:16mm 14mm; }
  .art-lateral, .art-progresso, .art-gaveta, .art-compartilhar, .art-ancora, .art-aviso, .art-relacionados, .blog-chamada, .art-convite,
  .art-resumo__form, .art-resumo__acoes, .art-resumo__receber, .art-rascunho, .art-caminho, .art-resumo__rever{ display:none !important; }
  .art-leitura > .wrap, .art-fim__grade{ display:block !important; }
  .art-topo, .art-conteudo, .art-resumo{ max-width:none !important; margin:0 !important; }
  .art-conteudo, .art-conteudo p, .art-sub, .art-meta__texto, .art-resumo__intro{ color:#18181B !important; }
  .art-conteudo a:not([class]){ color:#18181B !important; }
  .art-conteudo a[href^="http"]:not([class])::after{ content:" (" attr(href) ")"; font-size:.8em; word-break:break-all; }
  .art-capitulo{ margin-top:24px; }
  .art-h2, .art-conteudo h3{ break-after:avoid; }
  img{ break-inside:avoid; }
  .art-bio, .art-resumo__item, .art-resumo__passo, .art-resumo__vazio{ background:#FFFFFF !important; box-shadow:inset 0 0 0 1px #D8D8DC !important; color:#18181B !important; }
  .art-resumo__valor, .art-bio__nome{ color:#18181B !important; }
  .art-fim{ padding-block:24px !important; }
  html[data-imprimir="resumo"] .art-leitura, html[data-imprimir="resumo"] .art-fim__grade > :not(.art-resumo){ display:none !important; }
}