/* ===========================================================================
   rk-blocos — a folha do PLUGIN, e ela e fina de proposito
   ---------------------------------------------------------------------------
   O DESENHO NAO MORA AQUI. Ele mora no bloco gerado pelo rk-core, que veste
   este markup por TAG dentro da propria moldura escopada por #rk-s-<id>.

   Entao para que esta folha existe?

   1. Para o caso em que o shortcode e usado FORA de um bloco nosso — num post
      antigo, num template que ninguem migrou. Sem nenhuma regra, o cartao de
      relacionados sairia como uma lista de links crua.

   2. Para o estado vazio dos relacionados, que o bloco nao tem como prever.

   3. Para as duas ou tres coisas estruturais que, se faltarem, quebram o
      desenho do bloco em vez de so ficarem sem enfeite.

   O QUE ELA NAO FAZ, e a diferenca importa:
     - nenhum !important. O snippet que ela substitui tinha 51. Contra
       !important nao existe especificidade, e era por isso que o post de um
       cliente saia com a cor de outro dentro.
     - nenhuma cor cravada sem reserva. Toda cor sai de var(--rk-*), e a
       reserva depois da virgula so entra se o tema do cliente nao definir o
       token — nunca deixa texto invisivel.
     - nenhuma fonte importada. A tipografia vem da marca.
     - especificidade baixa: uma classe. Assim o bloco ganha de nos sem
       esforco, que e exatamente o que a gente quer.
   =========================================================================== */

.rk-rel,
.rk-ab {
	font-family: var(--rk-font-body, inherit);
	color: var(--rk-color-text, currentColor);
	box-sizing: border-box;
}

.rk-rel *,
.rk-ab * {
	box-sizing: inherit;
}

/*    ALCANCE-DE-PAGINA: esta folha vale para o Single Post inteiro, e nao para
   uma secao. E o proposito dela — entregar a marca do cliente ao documento,
   de onde as secoes e os widgets nativos leem. Escopar por secao seria
   escrever esta folha errada.

   GERADO por compile/tokens-para-plugin.js a partir de tokens/rn.css
   DECLARA-TOKENS: esta folha e a ORIGEM das cores da marca, nao uma
   consumidora. Por isso ela tem hex cravado, e por isso a dispensa e
   declarada em vez de presumida.

   Escopado a .elementor-location-single, que e o wrapper do Theme Builder:
   o gabarito recebe a marca e o resto do site nao muda. Ver o gerador para
   a pergunta de arquitetura que isto abre. */

/* =====================================================================
   RN — ROSA & NASCIMENTO ADVOGADOS ASSOCIADOS
   ---------------------------------------------------------------------
   Fonte: "BRAND GUIDELINE 2026 — RN | Rosa & Nascimento, Guia de uso da
   LOGO, V.1.00", por Sara Sontag Design. Recebido em 20/08/2026.

   O que veio ESCRITO no manual (nao invente, nao arredonde):
     Verde Institucional  #30573f
     Dourado Fosco        #b29559
     Tipografia primaria    South Korea Serif
     Tipografia secundaria  Glacial Indifference

   O que foi LIDO do PDF (o manual nao da o codigo, so aplica a cor):
     Creme de fundo       #f0ebe1   — fundo de quase toda pagina do manual
     Tinta                #1d1d1b   — o quase-preto dos textos do manual

   O que foi CALCULADO, e so isso (PLANO 2.3: calculo completa valor que
   falta, nunca decide identidade):
     verde escuro, ouro legivel, creme escuro, sombras.
     Cada um esta marcado com "calculado" na linha.

   ---------------------------------------------------------------------
   O ACHADO QUE MANDA NO DESENHO — medido em 20/08/2026

   O Dourado Fosco #b29559 REPROVA em contraste em toda aplicacao como
   texto:

        ouro sobre creme    2,41:1        ouro sobre verde    2,86:1
        ouro sobre branco   2,86:1        branco sobre ouro   2,86:1

   O minimo para ler e 4,5:1. So existe UMA combinacao que passa:

        quase-preto sobre ouro   5,90:1

   Logo, a regra da marca no site:
     - o dourado e ORNAMENTO (filete, o N da logo, moldura) e FUNDO DE
       BOTAO com texto escuro em cima;
     - o dourado NAO e cor de texto. Nunca.
     - onde texto dourado for mesmo necessario, existe um tom derivado, e
       ele MUDA conforme a superficie: #735f35 no claro, #d1bf9b no escuro.

   A cor da marca nao foi alterada. Ela esta aprovada pelo cliente. O que
   se define aqui e ONDE ela pode aparecer.

   ---------------------------------------------------------------------
   AS TRES SUPERFICIES

   Bloco nenhum le --rk-marca-* nem escolhe cor. Bloco le --rk-sup-*.
   Quem aponta --rk-sup-* e este arquivo, respondendo ao atributo
   data-rk-sup do wrapper, que o compilador escreve a partir do campo
   "superficie" do JSON de entrada.

        base    creme  — o padrao, e o que o manual mais usa
        clara   branco — para dar respiro entre duas secoes creme
        escura  verde  — a aplicacao institucional da pagina 10 do manual

   Trocar a superficie de uma secao e trocar UMA palavra no JSON. O CSS do
   bloco nao muda.

   ---------------------------------------------------------------------
   NADA DE rem AQUI. O tema pode fazer .elementor-location-single{font-size:62.5%} e todo rem
   encolhe junto. Espaco em px, tamanho de fonte em em.

   As fontes sao carregadas pelo TEMA. Aqui so a familia e a pilha de
   reserva. Nenhum @import, nenhum @font-face.
   ===================================================================== */

.elementor-location-single {
  /* =================================================================
     1. AS CORES DA MARCA, CRUAS
     Ninguem consome estas direto num bloco. Elas alimentam as
     superficies logo abaixo.
     ================================================================= */
  --rk-marca-verde: #30573f;         /* Verde Institucional — do manual */
  --rk-marca-verde-fundo: #22402f;   /* calculado: um degrau abaixo, para faixa alternada no escuro */
  --rk-marca-ouro: #b29559;          /* Dourado Fosco — do manual. ORNAMENTO E FUNDO DE BOTAO. */
  --rk-marca-creme: #f0ebe1;         /* lido do manual */
  --rk-marca-creme-fundo: #e4ddcd;   /* calculado: faixa alternada no claro */
  --rk-marca-branco: #ffffff;
  --rk-marca-tinta: #1d1d1b;         /* lido do manual */

  /* o dourado em versao legivel. Dois valores porque o fundo muda. */
  --rk-marca-ouro-no-claro: #735f35;  /* calculado: 5,17:1 no creme e 4,54:1 no creme-alt.
                                         Passa nos DOIS fundos claros: o valor anterior
                                         (#7d673a) dava 4,01:1 no alt e reprovava no rodape. */
  --rk-marca-ouro-no-escuro: #d1bf9b; /* calculado: 4,54:1 sobre verde */

  /* =================================================================
     2. SUPERFICIE BASE — creme. O padrao.
     ================================================================= */
  --rk-sup-fundo: var(--rk-marca-creme);
  --rk-sup-fundo-alt: var(--rk-marca-creme-fundo);
  --rk-sup-titulo: var(--rk-marca-verde);
  --rk-sup-texto: var(--rk-marca-tinta);
  --rk-sup-suave: var(--rk-marca-verde);
  --rk-sup-ornamento: var(--rk-marca-ouro);
  --rk-sup-acento-texto: var(--rk-marca-ouro-no-claro);
  --rk-sup-borda: var(--rk-marca-ouro);
  --rk-sup-botao-fundo: var(--rk-marca-verde);
  --rk-sup-botao-texto: var(--rk-marca-branco);
  --rk-sup-botao-fundo-hover: var(--rk-marca-verde-fundo);
  --rk-sup-foco: var(--rk-marca-verde);

  /* =================================================================
     4. O QUE NAO MUDA COM A SUPERFICIE
     ================================================================= */

  /* ---------- tipografia ----------
     CONFERIDO NA FONTE em 20/08/2026, e mudou uma das duas.

     South Korea Serif (titulos, do manual): NAO PODE ir para o servidor. A
     pagina de licencas da Graphicfresh lista, na licenca Desktop, o que ela
     nao cobre — e la esta "Web App and Website Usage", escrito assim. Web e
     compra separada, e o logotipo e uma terceira. Detalhe em
     identidade/rn/FONTES.md.
     No lugar entra a PRATA: didone de alto contraste, SIL OFL 1.1, sem
     Reserved Font Name.

     Glacial Indifference (texto, do manual): PODE. E SIL OFL 1.1, e a FAQ
     oficial da SIL responde o caso ao pe da letra — hospedar no proprio
     servidor e permitido e recomendado. Fica como esta no manual.

     Se o escritorio comprar a licenca de web da South Korea Serif, a volta e
     UMA linha aqui. Nenhum bloco muda. */
  --rk-font-heading: "Prata", Georgia, "Times New Roman", serif;
  --rk-font-body: "Glacial Indifference", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Peso e propriedade da MARCA, nao do bloco. Esta marca serve o peso
     400 no titulo e 700 no corpo forte — pedir outro faz o navegador
     engrossar o desenho a forca (negrito sintetico), e numa serifada de
     traco fino isso apodrece justo no corpo grande. */
  --rk-font-heading-weight: 400;
  --rk-font-body-weight-forte: 700;

  --rk-font-size-eyebrow: 0.8125em;
  --rk-font-size-lead: clamp(1em, 0.94em + 0.3vw, 1.1875em);
  --rk-font-size-cta: 1em;
  --rk-line-body: 1.7;
  --rk-tracking-eyebrow: 0.16em;   /* o manual espaceja "ADVOGADOS ASSOCIADOS" */

  /* ---------- a escala do ARTIGO ----------
     Os BLOCOS nao precisam disto: eles medem em `em`, relativos ao proprio
     contexto. O CORPO DO POST precisa, e por um motivo diferente — e texto
     corrido e longo, escrito pelo cliente, dentro de um widget nativo do
     Elementor que nos nao controlamos. Quem le estes valores e o
     `node compile/vestimenta.js rn`.

     De onde saem os numeros: medindo os dois clientes que ja rodam.
       corpo      Rockham 20px      FSA 17px
       largura    Rockham 720px     FSA (nao declara)
       h2         Rockham 32px      FSA 32px      <- os dois no mesmo valor
       h3         Rockham 25px      FSA 20px
       imagem     Rockham 16/9      FSA 16/7

     19px numa largura de 720px da por volta de 68 caracteres por linha, que
     e a medida classica de leitura confortavel. E o ponto de partida, e e
     este o botao a girar se o Felipe achar o texto pequeno ou grande. */
  --rk-artigo-largura: 720px;
  --rk-artigo-corpo: 19px;
  --rk-artigo-h1: clamp(32px, 5vw, 52px);
  --rk-artigo-h2: 32px;
  --rk-artigo-h3: 22px;
  --rk-artigo-imagem-proporcao: 16 / 9;

  /* ---------- espacamento ---------- */
  --rk-space-2: 12px;
  --rk-space-3: 20px;
  --rk-space-4: 32px;
  --rk-space-5: 44px;
  --rk-space-gutter: clamp(20px, 4vw, 48px);
  --rk-space-section-y: clamp(56px, 7.5vw, 104px);
  --rk-space-col-gap: clamp(32px, 5vw, 72px);

  /* ---------- navegacao ---------- */
  --rk-header-offset: 84px;

  /* ---------- forma ----------
     A marca e de filete reto e canto vivo: o manual nao tem um canto
     arredondado sequer. O raio fica baixo de proposito. */
  --rk-container-max: 1200px;
  --rk-radius-lg: 2px;
  --rk-radius-pill: 999px;
  --rk-hairline: 1px;

  /* ---------- movimento ---------- */
  --rk-motion-duration: 620ms;
  --rk-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- sombras: calculadas a partir do verde, nunca cinza puro ---------- */
  --rk-shadow-cta: 0 10px 22px rgba(48, 87, 63, 0.20);
  --rk-shadow-media: 0 24px 56px rgba(48, 87, 63, 0.22);

  /* =================================================================
     5. PONTE PARA OS BLOCOS QUE JA EXISTEM
     Os blocos escritos antes das superficies leem --rk-color-*. Apontar
     esses nomes para --rk-sup-* faz TODOS eles virarem sensiveis a
     superficie sem tocar numa linha de CSS de bloco.
     ================================================================= */
  --rk-color-surface: var(--rk-sup-fundo);
  --rk-color-surface-alt: var(--rk-sup-fundo-alt);
  --rk-color-heading: var(--rk-sup-titulo);
  --rk-color-text: var(--rk-sup-texto);
  --rk-color-muted: var(--rk-sup-suave);
  --rk-color-accent: var(--rk-sup-acento-texto);
  --rk-color-accent-strong: var(--rk-sup-botao-fundo-hover);
  --rk-color-accent-soft: var(--rk-sup-ornamento);
  --rk-color-on-accent: var(--rk-sup-botao-texto);
  --rk-color-focus: var(--rk-sup-foco);

  /* BOTAO E UM PAPEL PROPRIO, e nao o mesmo que "cor de acento".
     --rk-color-accent e a cor do CHAPEU: no claro ela e o dourado escurecido
     ate ficar legivel (#735f35). Usar esse mesmo valor como fundo de botao
     deixava o botao oliva, e nao dourado — parecia defeito, e era mistura de
     papel. Achado olhando a foto em 20/08/2026.
     A marca ja dizia o certo em --rk-sup-botao-*: verde com branco no claro,
     ouro com quase-preto no escuro. Faltava a ponte. */
  --rk-color-botao: var(--rk-sup-botao-fundo);
  --rk-color-botao-texto: var(--rk-sup-botao-texto);
  --rk-color-botao-hover: var(--rk-sup-botao-fundo-hover);
}

/* =====================================================================
   3. AS OUTRAS DUAS SUPERFICIES

   ".elementor-location-single[data-rk-sup=...]" vira "#rk-s-<id>[data-rk-sup=...]" depois do
   escopo — ou seja, cai no PROPRIO wrapper da secao. So redeclara o que
   muda; o resto continua herdado do bloco de cima.
   ===================================================================== */

.elementor-location-single[data-rk-sup="clara"] {
  --rk-sup-fundo: var(--rk-marca-branco);
  --rk-sup-fundo-alt: var(--rk-marca-creme);
}

.elementor-location-single[data-rk-sup="escura"] {
  --rk-sup-fundo: var(--rk-marca-verde);
  --rk-sup-fundo-alt: var(--rk-marca-verde-fundo);
  --rk-sup-titulo: var(--rk-marca-branco);
  --rk-sup-texto: var(--rk-marca-creme);
  --rk-sup-suave: var(--rk-marca-creme);
  --rk-sup-acento-texto: var(--rk-marca-ouro-no-escuro);
  /* o unico lugar em que o Dourado Fosco passa em contraste: fundo de
     botao com texto escuro em cima. 5,90:1. */
  --rk-sup-botao-fundo: var(--rk-marca-ouro);
  --rk-sup-botao-texto: var(--rk-marca-tinta);
  /* No escuro o hover CLAREIA. Escurecer aqui era bug: #735f35 sobre o verde
     da 1,51:1 — o botao praticamente sumia ao passar o mouse, e o texto dentro
     dele caia de 5,90:1 para 3,11:1. Achado em 20/08/2026, por medicao. */
  --rk-sup-botao-fundo-hover: var(--rk-marca-ouro-no-escuro);
  --rk-sup-foco: var(--rk-marca-ouro);
  --rk-shadow-cta: 0 10px 22px rgba(0, 0, 0, 0.30);
  --rk-shadow-media: 0 24px 56px rgba(0, 0, 0, 0.34);
}


/* ---------------------------------------------------------------------
   AS MESMAS SUPERFICIES, para quem esta DENTRO.
   Espaco em vez de nada entre o wrapper e o atributo: descendente, e nao
   composto. Uma secao passa a poder dizer em que superficie ela vive, que
   e o que o HTML aprovado faz e o que faltava aqui.

   E cada bloco repete os tokens derivados. Ver o gerador: sem isso a
   superficie muda e a cor nao acompanha.
   --------------------------------------------------------------------- */

.elementor-location-single [data-rk-sup="clara"] {
  --rk-sup-fundo: var(--rk-marca-branco);
  --rk-sup-fundo-alt: var(--rk-marca-creme);

  /* e tudo o que deriva delas, para a conta refazer AQUI */
  --rk-color-surface: var(--rk-sup-fundo);
  --rk-color-surface-alt: var(--rk-sup-fundo-alt);
  --rk-color-heading: var(--rk-sup-titulo);
  --rk-color-text: var(--rk-sup-texto);
  --rk-color-muted: var(--rk-sup-suave);
  --rk-color-accent: var(--rk-sup-acento-texto);
  --rk-color-accent-strong: var(--rk-sup-botao-fundo-hover);
  --rk-color-accent-soft: var(--rk-sup-ornamento);
  --rk-color-on-accent: var(--rk-sup-botao-texto);
  --rk-color-focus: var(--rk-sup-foco);
  --rk-color-botao: var(--rk-sup-botao-fundo);
  --rk-color-botao-texto: var(--rk-sup-botao-texto);
  --rk-color-botao-hover: var(--rk-sup-botao-fundo-hover);
}

.elementor-location-single [data-rk-sup="escura"] {
  --rk-sup-fundo: var(--rk-marca-verde);
  --rk-sup-fundo-alt: var(--rk-marca-verde-fundo);
  --rk-sup-titulo: var(--rk-marca-branco);
  --rk-sup-texto: var(--rk-marca-creme);
  --rk-sup-suave: var(--rk-marca-creme);
  --rk-sup-acento-texto: var(--rk-marca-ouro-no-escuro);
  /* o unico lugar em que o Dourado Fosco passa em contraste: fundo de
     botao com texto escuro em cima. 5,90:1. */
  --rk-sup-botao-fundo: var(--rk-marca-ouro);
  --rk-sup-botao-texto: var(--rk-marca-tinta);
  /* No escuro o hover CLAREIA. Escurecer aqui era bug: #735f35 sobre o verde
     da 1,51:1 — o botao praticamente sumia ao passar o mouse, e o texto dentro
     dele caia de 5,90:1 para 3,11:1. Achado em 20/08/2026, por medicao. */
  --rk-sup-botao-fundo-hover: var(--rk-marca-ouro-no-escuro);
  --rk-sup-foco: var(--rk-marca-ouro);
  --rk-shadow-cta: 0 10px 22px rgba(0, 0, 0, 0.30);
  --rk-shadow-media: 0 24px 56px rgba(0, 0, 0, 0.34);

  /* e tudo o que deriva delas, para a conta refazer AQUI */
  --rk-color-surface: var(--rk-sup-fundo);
  --rk-color-surface-alt: var(--rk-sup-fundo-alt);
  --rk-color-heading: var(--rk-sup-titulo);
  --rk-color-text: var(--rk-sup-texto);
  --rk-color-muted: var(--rk-sup-suave);
  --rk-color-accent: var(--rk-sup-acento-texto);
  --rk-color-accent-strong: var(--rk-sup-botao-fundo-hover);
  --rk-color-accent-soft: var(--rk-sup-ornamento);
  --rk-color-on-accent: var(--rk-sup-botao-texto);
  --rk-color-focus: var(--rk-sup-foco);
  --rk-color-botao: var(--rk-sup-botao-fundo);
  --rk-color-botao-texto: var(--rk-sup-botao-texto);
  --rk-color-botao-hover: var(--rk-sup-botao-fundo-hover);
}

/* =====================================================================
   [rk_artigos_da_area] — a parte 5 da pagina de area
   ---------------------------------------------------------------------
   POR QUE ESTA FOLHA EXISTE ANTES DE UMA PROPOSTA SER ESCOLHIDA

   As cinco propostas de pagina de area (versoes/area/) desenham esta parte
   IGUAL — de proposito, e o LEIA.md delas diz por que: se os artigos
   dominarem a composicao, a pagina de area virou archive, que e o que o
   Felipe recusou em 10/09. Entao o desenho da parte 5 nao esta em disputa, e
   pode existir agora.

   O que muda com a escolha e a moldura AO REDOR: qual faixa, qual superficie,
   qual titulo. Isso e do bloco, nao daqui.

   TUDO LE TOKEN. Nenhuma cor escrita — quem veste e tokens/<cliente>.css.
   ===================================================================== */

.rk-aart__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rk-aart__item {
	min-width: 0;
}

/* O CARTAO INTEIRO E O LINK, e nao so o titulo: alvo grande no dedo, e um
   link so por cartao para quem navega por teclado ou leitor de tela. Mesma
   decisao do [rk_arquivo]. */
.rk-aart__cartao {
	display: block;
	padding-top: 16px;
	border-top: 2px solid var(--rk-color-accent-soft, currentColor);
	color: inherit;
	text-decoration: none;
}

.rk-aart__titulo {
	margin: 0 0 8px;
	font-family: var(--rk-font-heading, inherit);
	font-weight: var(--rk-font-heading-weight, 400);
	font-size: 1.25em;
	line-height: 1.25;
	color: var(--rk-color-heading, inherit);
}

.rk-aart__cartao:hover .rk-aart__titulo,
.rk-aart__cartao:focus-visible .rk-aart__titulo {
	color: var(--rk-color-accent, inherit);
}

.rk-aart__meta {
	margin: 0;
	font-family: var(--rk-font-body, inherit);
	font-size: 0.8125em;
	line-height: 1.5;
	color: var(--rk-color-muted, inherit);
}

.rk-aart__ponto {
	margin: 0 6px;
}

/* A NOTA DE VAZIO so aparece com vazio="nota". O padrao e a secao sumir
   inteira: area recem-criada ainda nao tem artigo, e titulo com nada embaixo
   le como defeito. */
.rk-aart__nota {
	margin: 0;
	font-family: var(--rk-font-body, inherit);
	font-size: 0.9375em;
	color: var(--rk-color-muted, inherit);
}

@media (max-width: 860px) {
	.rk-aart__lista {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* GERADO por compile/hero-post.js a partir de blocks/blog-topo/block.css.
   Nao editar aqui: edite o BLOCO, que e a fonte de verdade visual, e rode
   de novo. Tres seletores sao adaptados na travessia, e so tres — os que
   exigem filho direto e que os wrappers do Elementor quebrariam.
   Ver o cabecalho do gerador para o motivo de cada um.

   DEPENDE-DO-TEMA: os tokens --rk-* vem de tokens/<marca>.css, servido pelo
   tema RK Core. Esta folha usa var() sem reserva porque o BLOCO de origem tem
   um validador que exige que cada token usado exista — a reserva nunca
   entraria, e escreve-la a mao quebraria a regra de que o bloco e a fonte de
   verdade visual e o transporte COPIA, nao reescreve. */

/* =====================================================================
   BLOG — TOPO DO ARTIGO
   ---------------------------------------------------------------------
   A primeira coisa que se ve ao abrir um post: trilha, categoria, titulo,
   assinatura. Nenhum texto e digitado aqui — os quatro sao shortcode, e por
   isso o mesmo bloco serve todos os artigos sem repetir uma palavra.

   A MOLDURA E NOSSA, O MIOLO E DO WORDPRESS.
   O que desenhamos: o filete sob a trilha, o trilho vertical dourado que
   segura categoria + titulo + assinatura, o versalete espacejado, o respiro
   entre os quatro degraus e a medida do titulo.

   O que NAO desenhamos, e nao da para desenhar daqui: o [rk_title], o
   [bread_estilo], o [rk_categorias] e o [rk_author_time] que estao no ar hoje
   imprimem um <style> proprio junto do markup, com cor cravada e !important
   em quase tudo (medido em coleta/rockham/componentes-reais/). Contra
   !important nao existe especificidade que valha, e !important e proibido
   aqui — com razao. Entao este arquivo faz duas coisas, nesta ordem:

     1. desenha o bloco INTEIRO como se o shortcode nao trouxesse CSS nenhum
        — que e o estado para onde o fork da RN tem de ir (o proprio acervo ja
        registra que "o HTML e o bloco, o CSS e a marca");
     2. no fim, uma camada curta de ACOMODACAO, que so mexe no que o
        shortcode deixou solto: alinhamento, respiro e os ornamentos.

   O que fica preso ate o fork: a tipografia e a cor do titulo (Inter 800
   #0c2530), a cor dos links da trilha e das categorias, e o par
   "tempo de leitura" + "copiar link" da linha de autor. Estao anotados no
   meta.json como pendencia, nao como opiniao.

   Sem imagem de proposito: a imagem destacada e widget nativo do Elementor e
   entra DEPOIS desta secao.
   ===================================================================== */
#rk-s-post-hero.rk-btopo {
  background: var(--rk-color-surface);
  padding: var(--rk-space-section-y) var(--rk-space-gutter) var(--rk-space-5);
}
#rk-s-post-hero .rk-btopo__caixa {
  max-width: var(--rk-container-max);
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   1. TRILHA — o degrau mais baixo da escala, e o unico elemento de largura
   inteira. O filete embaixo separa a navegacao do site do artigo em si:
   dali para baixo, tudo pertence a este post.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__trilha {
  padding-bottom: var(--rk-space-3);
  border-bottom: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  font-family: var(--rk-font-body);
  font-size: var(--rk-font-size-eyebrow);
  line-height: 1.6;
  color: var(--rk-color-muted);
  overflow-wrap: break-word;
}
#rk-s-post-hero .rk-btopo__trilha a {
  color: var(--rk-color-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rk-color-accent-soft);
  transition: color 200ms var(--rk-motion-ease),
              text-decoration-color 200ms var(--rk-motion-ease);
}
#rk-s-post-hero .rk-btopo__trilha a:hover {
  color: var(--rk-color-heading);
  text-decoration-color: var(--rk-color-heading);
}

/* ---------------------------------------------------------------------
   2. A MOLDURA — trilho vertical dourado a esquerda, conteudo recuado.
   E o que tira a secao do "tudo empilhado no centro": a coluna do artigo
   comeca deslocada, e o filete diz onde ela comeca.
   O trilho DESMAIA no fim de proposito — logo abaixo entra a imagem
   destacada, e uma linha que bate nela seca faria borda de tabela.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__moldura {
  position: relative;
  margin-top: var(--rk-space-5);
  padding-left: clamp(20px, 3vw, 40px);
}
#rk-s-post-hero .rk-btopo__moldura::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 10px;
  width: var(--rk-hairline, 1px);
  background-image: linear-gradient(
    to bottom,
    var(--rk-color-accent-soft) 0%,
    var(--rk-color-accent-soft) 64%,
    transparent 100%
  );
}

/* ---------------------------------------------------------------------
   3. CATEGORIA — versalete espacejado. O manual espaceja "ADVOGADOS
   ASSOCIADOS" na assinatura da marca; aqui o mesmo gesto marca a editoria.
   Cor de acento, nunca o Dourado Fosco puro: como texto ele da 2,41:1.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__categoria {
  margin-bottom: var(--rk-space-3);
  font-family: var(--rk-font-body);
  font-size: var(--rk-font-size-eyebrow);
  font-weight: var(--rk-font-body-weight-forte);
  letter-spacing: var(--rk-tracking-eyebrow, 0.16em);
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--rk-color-accent);
}
#rk-s-post-hero .rk-btopo__categoria a {
  color: var(--rk-color-accent);
  transition: color 200ms var(--rk-motion-ease);
}
#rk-s-post-hero .rk-btopo__categoria a:hover {
  color: var(--rk-color-heading);
}

/* ---------------------------------------------------------------------
   4. TITULO — a ancora da tela. Serifada, peso 400 (a marca serve so esse
   peso), medida curta para o titulo quebrar em 2 ou 3 linhas cheias em vez
   de uma faixa larga e rasa.
   NAO existe <h1> neste bloco: o [rk_title] ja traz o dele, e a pagina so
   pode ter um.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__titulo {
  max-width: 21ch;
  font-family: var(--rk-font-heading);
  font-weight: var(--rk-font-heading-weight);
  font-size: clamp(2.125em, 1.45em + 2.9vw, 3.375em);
  line-height: 1.08;
  color: var(--rk-color-heading);
  text-wrap: balance;
}

/* o [rk_title] marca a palavra em destaque do titulo com <em> */
#rk-s-post-hero .rk-btopo__titulo em {
  font-style: italic;
  color: var(--rk-color-accent);
}

/* ---------------------------------------------------------------------
   5. ASSINATURA — autor, data e, quando o shortcode existir, a linha de
   ultima atualizacao. Fica agrupada com o titulo pelo respiro curto: a
   distancia ate a trilha e o dobro da distancia daqui ate o titulo.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__assinatura {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rk-space-2) var(--rk-space-3);
  margin-top: var(--rk-space-3);
  font-family: var(--rk-font-body);
  font-size: 0.9375em;
  line-height: 1.4;
  color: var(--rk-color-text);
}
#rk-s-post-hero .rk-btopo__autor {
  flex: 1 1 auto;
  min-width: 0;
}
#rk-s-post-hero .rk-btopo__atualizacao {
  flex: 0 1 auto;
  padding-left: var(--rk-space-3);
  border-left: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  font-size: 0.875em;
  color: var(--rk-color-muted);
}

/* Foco visivel em tudo que responde, inclusive no que veio do shortcode — e
   <button> conta: o "Copiar link" do [rk_author_time] e botao, nao link, e
   ate aqui esta regra so falava de <a>. Uma politica so, num lugar so. */
#rk-s-post-hero .rk-btopo a:focus-visible,
#rk-s-post-hero .rk-btopo button:focus-visible {
  outline: 2px solid var(--rk-color-focus);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   6. O MIOLO — VESTIDO POR TAG

   Daqui para baixo os seletores alcancam o markup que o WordPress imprime
   DENTRO dos slots. A versao anterior desta secao vestia as CLASSES do
   snippet 13544 — .rk-bread, .rk-cats, .rk-cats-dash, .rk-at, .rk-at-avatar,
   .rk-at-bullet, .rk-updated. O plugin rk-blocos substituiu o snippet e
   emite outras. Nenhuma das 109 linhas casava com nada, e o resultado estava
   na captura que o Felipe mandou: a trilha empilhada, um degrau por linha, e
   a assinatura saindo

       "Nome de quem escreveu12 mar 20268 min de leitura Copiar link"

   grudada, sem vao, sem separador e sem hierarquia. Ver DIVIDA.md.

   AGORA VESTE POR TAG, que e o contrato de spec/ETAPA-6.md §3(d): este bloco
   nao controla as classes do plugin, e ja foi mordido uma vez por depender
   delas. <nav>, <ol>, <li>, <a>, <img>, <span>, <time>, <button> e o que o
   plugin promete. Onde a tag nao chega, o gancho e o ATRIBUTO que carrega a
   semantica (aria-current, aria-hidden, :empty) — nunca o nome da classe.

   E ESTE CSS E O UNICO QUE CHEGA AQUI. Medido no HTML compilado:

       #rk-s-rn-blog-topo span, time    (1,0,1)   o reset deste bloco
       .rk-at-name, .rk-at-date         (0,1,0)   a folha do plugin

   O ID ganha, sempre. Dentro de uma secao gerada a folha do plugin e inerte
   para tudo que o reset declara — e o preview nem carrega essa folha. Nao ha
   rede: o que nao estiver escrito aqui nao existe na tela. Por isso NADA
   nesta secao e "acomodacao". Isto e a vestimenta.

   ONDE O PLUGIN AINDA ALCANCA, E COMO ESTA SECAO CONVIVE. O reset nao declara
   `display`, `border`, `padding` nem `border-radius`: a pilula do tempo de
   leitura, o relogio de ::before e os pontinhos separadores SOBREVIVEM em
   producao e nao existem no preview. Duas telas diferentes para o mesmo bloco
   e defeito, nao variacao. Entao a moldura decide uma vez — e, onde o plugin
   ja desenha um ornamento, ela decide NO MESMO PSEUDO-ELEMENTO que ele usa,
   para nunca sair separador em dobro.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   6a. TRILHA — <nav><ol role="list"><li><a>, e o ultimo <li> traz
   <span aria-current="page"> no lugar do link.

   O reset entrega o <ol> sem marcador e sem recuo, mas tambem SEM `display`:
   os quatro degraus saiam empilhados, um por linha. A linha se arma aqui.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--rk-space-2);
}
#rk-s-post-hero .rk-btopo__trilha li {
  display: inline-flex;
  align-items: center;
  gap: var(--rk-space-2);
}

/* O separador e do CSS, nunca um elemento no HTML — e e FORMA, nao caractere:
   no Chrome e no Safari um <span>›</span> e um `content: "›"` sao lidos
   igual, e "Inicio maior-que Blog maior-que" nao e informacao. Com
   `content: ""` nao ha nada para o leitor de tela alcancar.
   No MESMO ::after que a folha do plugin usa
   (.rk-trilha__item:not(:last-child)::after), de proposito: mesmo
   pseudo-elemento, um separador so, o nosso — que ganha por (1,2,2). */
#rk-s-post-hero .rk-btopo__trilha li:not(:last-child)::after {
  content: "";
  flex: 0 0 auto;
  width: 0.32em;
  height: 0.32em;
  border-top: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  border-right: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  transform: rotate(45deg);
}

/* O degrau atual nao e link, entao ja nasce sem sublinhado; a cor vem do
   atributo que carrega a semantica, nao de uma classe do plugin. */
#rk-s-post-hero .rk-btopo__trilha [aria-current] {
  color: var(--rk-color-heading);
}

/* ---------------------------------------------------------------------
   6b. CATEGORIA — <ul role="list"><li><a>.

   Ela corre como TEXTO: o chapeu ja e versalete espacejado, e a lista nao
   pode criar caixa propria nem reconquistar o alinhamento da moldura.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__categoria li {
  display: inline;
}

/* O tracinho dos dois lados: eram dois <span> vazios no snippet velho, e a
   secao 6 antiga os pintava por .rk-cats-dash — "era um traco escuro
   translucido, vira ornamento da marca". A DECISAO SOBREVIVE; o gancho muda.
   Agora e ::before/::after do proprio <ul>: sem no vazio no markup, nada para
   o leitor de tela alcancar, e o filete dourado aparece igual no preview e no
   ar. Em `em`, para acompanhar o corpo do chapeu em vez de ser um numero. */
#rk-s-post-hero .rk-btopo__categoria ul::before,
#rk-s-post-hero .rk-btopo__categoria ul::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: var(--rk-hairline, 1px);
  vertical-align: middle;
  background: var(--rk-color-accent-soft);
}
#rk-s-post-hero .rk-btopo__categoria ul::before {
  margin-right: 0.6em;
}
#rk-s-post-hero .rk-btopo__categoria ul::after {
  margin-left: 0.6em;
}

/* Entre duas categorias, o separador quadrado da marca — o mesmo gesto da
   linha de autor: canto vivo, cor de ornamento, e nenhuma palavra para ler. */
#rk-s-post-hero .rk-btopo__categoria li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.55em;
  vertical-align: middle;
  background: var(--rk-color-accent-soft);
}

/* O plugin poe o separador dele no ::before do item SEGUINTE, por
   `attr(data-sep)`. Sao dois pseudo-elementos diferentes, entao nao ha
   disputa: sairiam os DOIS, em dobro. Dentro da moldura quem decide e a
   moldura, e ela decide num lugar so. Fora daqui o atributo `separador=` do
   shortcode continua valendo inteiro. */
#rk-s-post-hero .rk-btopo__categoria li + li::before {
  content: none;
}

/* ---------------------------------------------------------------------
   6c. LINHA DE AUTOR — foto, nome, data, tempo de leitura e copiar link.

   Era ELA a captura do Felipe. O shortcode embrulha os pedacos num <div>
   (<div class="rk-at">, tanto no plugin quanto no espelho do preview), e o
   reset nao da `display` a <div> nenhuma: cinco filhos em linha, sem vao,
   sem separador, sem hierarquia. O vao nasce aqui.

   AS DUAS CAIXAS VIRAM FLEX — a nossa e a do shortcode. Assim a linha se arma
   quer os pedacos venham embrulhados (e hoje vem), quer venham soltos no dia
   em que o embrulho sair. Nenhuma das duas depende de saber o nome dele.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__autor,
#rk-s-post-hero .rk-btopo__autor .rk-at {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rk-space-2);
}

/* A FOTO E O DISCO. No espelho a <img> vem solta; no plugin ela vem dentro de
   um <span aria-hidden="true"> que faz o disco — e que mostra as INICIAIS
   quando nao ha foto. As duas formas recebem a mesma caixa e o mesmo anel
   dourado: e a decisao que estava presa a .rk-at-avatar, agora presa a tag e
   ao atributo. `object-fit` so a <img> usa; `color` e `font-size` so as
   iniciais — e o texto alternativo, no dia em que a foto nao carregar.
   O `:not(:empty)` separa o disco dos PONTINHOS logo abaixo: os dois sao
   <span aria-hidden="true">, e so o disco tem algo dentro (a foto ou as
   iniciais). Sem ele, o pontinho tambem virava um circulo de 36px. */
#rk-s-post-hero .rk-btopo__autor img,
#rk-s-post-hero .rk-btopo__autor span[aria-hidden="true"]:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  border-radius: 50%;
  background: var(--rk-color-surface-alt);
  color: var(--rk-color-heading);
  font-size: 0.75em;
  line-height: 1;
  object-fit: cover;
}

/* Quando o disco existe, e ELE que recorta e que leva o anel; a foto so
   preenche. Sem isto o anel da <img> cairia exatamente sobre a borda de
   recorte do pai e sumiria no antialiasing — anel que so aparece as vezes. */
#rk-s-post-hero .rk-btopo__autor span[aria-hidden="true"] img {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Os pontinhos que o plugin ainda imprime entre nome, data e tempo sao
   <span aria-hidden="true"> VAZIOS. Aqui quem separa e o CSS: sem esta linha
   sairiam dois separadores, o dele e o nosso. O disco nao e alcancado — ele
   tem foto ou iniciais dentro, e :empty so casa com quem nao tem filho. */
#rk-s-post-hero .rk-btopo__autor span[aria-hidden="true"]:empty {
  display: none;
}

/* O NOME e o primeiro texto da linha: vem logo depois da foto solta, ou logo
   depois do disco, ou sozinho quando nao ha foto nenhuma — as tres formas que
   o markup pode ter. E o unico pedaco com peso e cor de titulo, e e ele que
   da hierarquia a linha. */
#rk-s-post-hero .rk-btopo__autor .rk-at > span:first-child,
#rk-s-post-hero .rk-btopo__autor .rk-at > span:first-child,
#rk-s-post-hero .rk-btopo__autor img + span,
#rk-s-post-hero .rk-btopo__autor span[aria-hidden="true"] + span {
  font-weight: var(--rk-font-body-weight-forte);
  color: var(--rk-color-heading);
}

/* Os <span> desta linha sao TEXTO, nao caixinha. A folha do plugin desenha o
   tempo de leitura como pilula com um relogio de ::before: desenho para
   quando a peca e usada FORA de uma secao nossa — e que o preview nem carrega.
   Dentro da moldura a assinatura e uma linha de texto, e as duas telas
   passam a mostrar a mesma coisa. O disco nao cede: (1,2,1) ganha de (1,1,1). */
#rk-s-post-hero .rk-btopo__autor span {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow-wrap: break-word;
}
#rk-s-post-hero .rk-btopo__autor span::before {
  content: none;
}

/* O SEPARADOR entre nome, data e tempo. Quadrado, canto vivo, cor de
   ornamento — o mesmo gesto que .rk-at-bullet recebia na secao 6 antiga,
   agora preso ao <time>, que e a unica tag do meio desta linha que o contrato
   garante. Vazio de conteudo, ele nao entra na arvore de acessibilidade: nao
   ha "ponto" anunciado entre o nome e a data.
   As duas guardas sao para quando faltar um pedaco: sem nome, nao sai
   separador antes da data; sem nada depois, nao sai separador no fim. */
#rk-s-post-hero .rk-btopo__autor time {
  white-space: nowrap;
}
#rk-s-post-hero .rk-btopo__autor time:not(:first-child)::before,
#rk-s-post-hero .rk-btopo__autor time:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  vertical-align: middle;
  background: var(--rk-color-accent-soft);
}
#rk-s-post-hero .rk-btopo__autor time:not(:first-child)::before {
  margin-right: var(--rk-space-2);
}
#rk-s-post-hero .rk-btopo__autor time:not(:last-child)::after {
  margin-left: var(--rk-space-2);
}

/* COPIAR LINK — <button>, nunca <a href="#">. O reset da casa so devolve
   `color`, `font`, `letter-spacing` e `margin` a botao: fundo, borda, respiro
   e cursor NAO existem ate serem escritos aqui, e no preview nao ha folha
   nenhuma atras. Sem estas linhas o botao sai com a cara do sistema
   operacional no meio da assinatura da marca.
   O anel de foco vem da politica unica da secao 5, que agora cobre <a> e
   <button>: quem navega por teclado nao tem outra pista de onde esta. */
#rk-s-post-hero .rk-btopo__autor button {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  border-radius: var(--rk-radius-lg);
  background: none;
  color: var(--rk-color-heading);
  font-size: 0.8125em;
  line-height: 1.25;
  cursor: pointer;
  transition: color 200ms var(--rk-motion-ease),
              border-color 200ms var(--rk-motion-ease),
              background-color 200ms var(--rk-motion-ease);
}
#rk-s-post-hero .rk-btopo__autor button:hover {
  border-color: var(--rk-color-heading);
  background-color: var(--rk-color-surface-alt);
}

/* ---------------------------------------------------------------------
   6d. ULTIMA ATUALIZACAO — <p> com um <time> dentro.

   O reset ja tira do <p> a margem, o respiro e a tipografia propria. O que
   falta e a cor de acento na data, que era o que .rk-updated-icon e
   .rk-updated time recebiam na secao antiga.
   --------------------------------------------------------------------- */
#rk-s-post-hero .rk-btopo__atualizacao time {
  color: var(--rk-color-accent);
}

/* ---------------------------------------------------------------------
   7. TELAS ESTREITAS
   --------------------------------------------------------------------- */

@media (max-width: 640px) {
#rk-s-post-hero .rk-btopo__moldura {
    margin-top: var(--rk-space-4);
    padding-left: var(--rk-space-3);
  }
#rk-s-post-hero .rk-btopo__titulo {
    max-width: none;
  }
#rk-s-post-hero .rk-btopo__atualizacao {
    padding-left: 0;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
#rk-s-post-hero .rk-btopo__trilha a,
#rk-s-post-hero .rk-btopo__categoria a,
#rk-s-post-hero .rk-btopo__autor button {
    transition: none;
  }
}


/* =====================================================================
   O <h1> DO WIDGET NATIVO HERDA DO CONTAINER
   ---------------------------------------------------------------------
   No HTML aprovado, .rk-btopo__titulo E o elemento que contem o texto: as
   sete declaracoes dele valem direto. No Elementor ele virou o CONTAINER do
   widget, e dentro ha um <h1> que o Global Kit do Elementor ja pintou —
   medido, o container ficava verde com Prata e o <h1> saia azul com Roboto.
   Cor e fonte nao se herdam quando o filho tem as suas.

   A primeira tentativa foi repetir as declaracoes no <h1>. Deu errado, e o
   numero denuncia: o tamanho e clamp(2.125em, ...), e "em" e relativo ao PAI.
   Aplicado nos dois, ele COMPOS — 3.375em do container, e outra vez no h1.
   O titulo saiu com 120px.

   A resposta certa e mais simples e nao reinterpreta nada: o <h1> herda tudo.
   O desenho continua declarado num lugar so, que e o container, exatamente
   como no HTML aprovado. */
#rk-s-post-hero .rk-btopo__titulo :is(h1, h2, h3, .elementor-heading-title) {
  font: inherit;
  color: inherit;
  margin: 0;
  text-wrap: inherit;
}

/* =====================================================================
   A ASSINATURA E FLEX NUM NIVEL QUE NAO E O NOSSO
   ---------------------------------------------------------------------
   No HTML aprovado, .rk-btopo__assinatura E a linha: display:flex nela, e o
   autor e a data de atualizacao ficam lado a lado, separados pelo filete
   vertical.

   No Elementor ela virou um CONTAINER, e container "boxed" nao e a caixa flex:
   ele cria um .e-con-inner dentro, e e ESSE que empilha os filhos. O padrao do
   Elementor para container e COLUNA. Entao o nosso display:flex caiu num
   elemento de um filho so, e nao houve o que alinhar.

   Medido em 09/09/2026, no post B em 1440, ao por o [rk_updated] ao lado do
   autor:

     .rk-btopo__assinatura   y=447..502  (55h)   <- duas linhas
     .rk-btopo__autor        y=447..483  1100w
     .rk-btopo__atualizacao  y=483..502  1100w   <- caiu para baixo

   Os 1100px sao a outra metade: o Elementor da width:100% a todo widget dentro
   de container. Dois filhos de 100% nao cabem numa linha, entao nem o
   flex-wrap ajudaria — eles empilham por largura, nao por direcao.

   As duas linhas abaixo devolvem o que o HTML aprovado ja dizia, e nao
   redesenham nada: a linha volta a ser linha, e cada peca volta a ter a
   largura do proprio conteudo. O filete vertical do carimbo ja funcionava —
   medido: border-left 1px solid rgb(178,149,89), padding-left 20px. */
#rk-s-post-hero .rk-btopo__assinatura > .e-con-inner {
  display: flex;
  /* flex-direction NAO e opcional aqui, e faltou na primeira tentativa.
     Sem ela o resultado ficou pior de ler do que antes: as duas pecas
     continuaram empilhadas E centradas, porque align-items:center num flex
     COLUNA alinha no eixo horizontal. Medido: autor x=457..1023 num pai de
     190..1290. Largura ja estava certa (566w e 229w, somando 815 de 1100
     disponiveis) — faltava so dizer que a linha e linha. */
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rk-space-2) var(--rk-space-3);
  width: 100%;
}

#rk-s-post-hero .rk-btopo__assinatura > .e-con-inner > * {
  width: auto;
  max-width: 100%;
}

/*    ALCANCE-DE-PAGINA: esta folha desenha a GRADE da pagina, e grade e coisa
   de pagina. E a unica dependencia estrutural que atravessa a fronteira de
   um bloco (.rk-artigo__lado > *), medida e declarada em 24/08.

   GERADO por compile/leiaute-post.js — nao editar aqui.
   A mesma camada vai para a previa, e por isso ela nasce num lugar so. */

/* ---------------------------------------------------------------------
   A CASCA DO POST — as duas colunas e a largura de leitura.
   O desenho de cada peca e do bloco; o do corpo do post e da vestimenta.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   A FAIXA E O CONTEUDO SAO DUAS COISAS, e a distincao e o que consertou a
   geometria em 26/08.

     faixa   pode ocupar 100% da viewport
     miolo   usa a largura MEDIDA no HTML aprovado, e fica centralizado

   No HTML aprovado quem faz o papel de faixa e o proprio <body>, e quem limita
   e centraliza e o .rk-artigo. No Elementor a faixa precisa de um elemento
   proprio — nao por estilo, mas porque a regra de largura do Elementor so
   alcanca filho DIRETO de [data-elementor-id]. Com a faixa no meio, o
   .rk-artigo fica um nivel abaixo e a nossa regra volta a valer.

   A faixa nao pede nada da folha: 100% e o que o Elementor ja da a ela. Ela
   esta declarada aqui para o DOM ficar legivel e para ninguem, um dia, achar
   que e sobra e apagar.
   --------------------------------------------------------------------- */
.rk-faixa-artigo {
  width: 100%;

  /* O FUNDO DA AREA DE LEITURA, e a cor foi EXTRAIDA e nao escolhida.

     Medido no HTML aprovado, em 26/08: o .rk-artigo la e TRANSPARENTE. Quem
     pinta e o <body>, com rgb(240,235,225), do topo ao pe da pagina — a area
     de leitura nao tem fundo proprio, ela herda o da pagina.

       body                  rgb(240,235,225)   x=0..1440   y=0..10448
       .rk-artigo            transparente
       --rk-color-surface    #f0ebe1            (= --rk-marca-creme, "lido do
                                                 manual", tokens/rn.css:77)

     No Elementor o <body> e branco e nao e nosso para pintar — mexer nele
     alcancaria o site inteiro do cliente. Entao quem recebe a cor e a FAIXA,
     que e o elemento que existe justamente para ser o fundo desta area.

     E ela sozinha: nem o .rk-artigo nem as duas colunas ganham fundo. Pintar
     corpo e lado separadamente daria a mesma tela e seria outra coisa — dois
     retangulos fingindo uma faixa, que se descolam no primeiro dia em que o
     gap mudar. Eles continuam transparentes e herdam, como no aprovado.

     A reserva e o hex medido, e nao um parecido: se o tema do cliente nao
     definir o token, o que assume e exatamente a cor do manual. */
  background-color: var(--rk-color-surface, #f0ebe1);
}

.rk-artigo {
  display: grid;
  gap: 40px;
  max-width: var(--rk-container-max, 1200px);
  margin: 0 auto;
  padding: 48px 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  /* 320px FIXOS na coluna. Nao e proporcao: e a largura em que o indice e a
     regua foram desenhados e medidos. Trocar por fracao esmaga a coluna, que
     e exatamente o que aconteceu no primeiro gabarito. */
  .rk-artigo { grid-template-columns: minmax(0, 1fr) 320px; }
}

.rk-artigo__corpo {
  max-width: var(--rk-artigo-largura, 720px);
  min-width: 0;   /* sem isto, um bloco largo estica a coluna e quebra a grade */
}

/* A capa vive DENTRO da coluna do artigo, e nao no topo da pagina. A largura
   dela e a da COLUNA — foi por estar no hero que ela saiu larga demais. */
.rk-artigo__capa {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 32px;
  aspect-ratio: var(--rk-artigo-imagem-proporcao, 16 / 9);
  object-fit: cover;
}

.rk-artigo__lado {
  min-width: 0;
  align-self: stretch;   /* estica ate o fim da linha do grid */
}

/* >>> A UNICA DEPENDENCIA ESTRUTURAL DESTA FOLHA <<<
   "> *" exige FILHO DIRETO. A secao do bloco precisa ser filha imediata do
   .rk-artigo__lado — se o Elementor puser um wrapper no meio, a regra deixa de
   pegar, a coluna perde a altura, o sticky perde o curso, e nada reprova.
   Esta declarado em manifesto/leiaute-single-post.js como "lado_filho_direto". */
.rk-artigo__lado > * { height: 100%; }

/* ---------------------------------------------------------------------
   A CORRENTE DE ALTURA DENTRO DO ELEMENTOR — e ela so existe la.

   No HTML aprovado a secao do bloco e filha direta de .rk-artigo__lado, e
   "> * { height: 100% }" alcanca. No Elementor ha DOIS niveis no meio:

     .rk-artigo__lado
       .elementor-widget          <- pega o height do "> *"
         .elementor-widget-container   <- NAO pega, e a corrente para AQUI
           .rk-s > .rk-lat        <- pede 100% de um pai sem altura

   Ja aconteceu uma vez, em 24/08, e do mesmo jeito: a corrente parava num
   nivel intermediario, o sticky ficava com curso ZERO, e a coluna saia da tela
   junto com a rolagem. Nao aparece em validador nenhum — o CSS esta certo dos
   dois lados. So aparece rolando.

   Estas duas linhas sao a UNICA regra desta folha que fala de Elementor, e
   estao aqui em vez de no bloco porque o bloco nao sabe onde foi posto. */
.rk-artigo__lado > * > .elementor-widget-container { height: 100%; }

/* ---------------------------------------------------------------------
   A SECAO DO RESUMO SOME QUANDO O POST NAO TEM RESUMO.

   O shortcode [rk_resumo] devolve string vazia, mas isso nao basta: o
   container do Elementor e o PAI, e um pai com respiro proprio continua
   ocupando altura mesmo com o filho vazio. Sobraria um buraco entre o fim do
   artigo e o CTA — e leitor le buraco como defeito.

   Quem marca e o PHP (inc/atendentes/resumo.php poe .rk-sem-resumo no <body>),
   porque so o servidor sabe se o campo esta vazio antes de a pagina desenhar.
   Esconder por JavaScript faria a secao aparecer e sumir na frente do leitor.
   --------------------------------------------------------------------- */
body.rk-sem-resumo .rk-fecho-resumo { display: none; }

/* =====================================================================
   A CAMADA DE TRANSICAO ENTRE ZONAS

   Uma secao nao e definida so pelo que tem dentro: ela tem uma relacao de
   ENTRADA e SAIDA com as vizinhas. Ate 26/08 essa relacao nao existia — as
   sete fronteiras do post se encostavam com vao ZERO, sem filete, sem
   sobreposicao, e o respiro vinha todo do padding interno de cada uma.

   Medido nos dois lados: isso foi transportado FIELMENTE do HTML aprovado
   (Hero para Sumario da 194px la e 195 aqui). Nao e defeito de porte; e o
   original que corta seco. O Felipe pediu melhoria NESTE ponto, e so nele —
   componente, medida e estrutura continuam com o aprovado mandando.

   O VOCABULARIO E O QUE A PAGINA JA TEM: filete dourado, canto vivo, troca de
   superficie. Nada de gradiente, onda, curva ou sombra.

   As estrategias tem NOME porque outro modelo vai querer outras: seamless,
   spacing, divider, overlap, surface-bridge. O motor conhece os nomes e onde
   aplica-los; COMO cada um se desenha e CSS de layout, e e isto aqui.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO para SUMARIO: divider, e SO divider.

   A primeira versao juntava divider + overlap + ponte de superficie. O filete
   resolveu; o overlap ESTRAGOU — ele deslocou o card do sumario para cima e,
   com ele, a geometria que ja estava correta. O Felipe cortou, e a decisao
   virou regra:

     TRANSICAO DE SECAO NAO ALTERA A GEOMETRIA INTERNA DOS VIZINHOS.

   Uma transicao mora numa camada propria. O overlap so se usa quando o layout
   aprovado realmente exigir que uma peca atravesse a fronteira fisicamente —
   e aqui nao exigia. Depois do teste visual, o filete sozinho bastou.

   POR ISSO O FILETE E PSEUDO-ELEMENTO, e nao borda: borda entra no fluxo e
   empurraria tudo 1px. Position absolute nao ocupa altura, entao o sumario
   fica exatamente onde estava — mesma x, mesma largura, mesmo padding, mesma
   caixa. Nada de transform, translate ou margem negativa: nenhum deles pode
   tocar em quem ja foi aprovado.

     HERO
       espacamento   (os 44px de saida do proprio Hero)
     DIVISOR         (aqui, na fronteira, sem custar altura)
       espacamento   (os 104px de entrada do proprio sumario)
     SUMARIO         na geometria original
   --------------------------------------------------------------------- */
.rk-t--hero-sumario {
  position: relative;
}

.rk-t--hero-sumario::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);   /* so centraliza o FILETE; nao move secao nenhuma */
  width: min(940px, calc(100% - 2 * var(--rk-space-gutter, 32px)));
  height: 1px;
  background-color: var(--rk-color-accent-soft, #b29559);
  pointer-events: none;
}


@media (max-width: 1023px) {
  .rk-artigo__lado { order: -1; align-self: start; }
  .rk-artigo__lado > * { height: auto; }
}

/* ---------------------------------------------------------------------------
   ASSINATURA DO ARTIGO  [rk_author]

   O DESENHO E DO BLOCO. Isto aqui e o que sobra quando o shortcode e usado
   FORA de uma secao nossa — num post antigo, num modelo que ninguem montou. E
   mesmo assim e o minimo: quanto menos esta parte disser, menos o bloco
   precisa desdizer (a licao esta escrita por extenso em rk_trilha.css).

   POR QUE A CLASSE E `rk-assina` E NAO `rk-autor`

   `rk-autor` ja tem dono: e a classe do <aside> que o bloco `blog-autor`
   imprime (blocks/blog-autor/block.html:1, e o mesmo em out/rn-blog-autor.html).
   A folha do plugin NAO e escopada — ela vale para a pagina inteira. Uma regra
   `.rk-autor { ... }` daqui pintaria a secao inteira daquele bloco, e nas
   propriedades que o bloco nao declara ela venceria sem disputa nenhuma, por
   ser a unica. O nome curto obvio era uma armadilha silenciosa.

   O QUE ESTA PARTE DE PROPOSITO NAO DIZ

   1. font-size, em lugar nenhum. A moldura ja escolhe o corpo do nome, do
      cargo e da bio, e tamanho em `em` dentro de tamanho em `em` se
      MULTIPLICA: dois 0.8125em dao 0,66em, e o cargo sairia menor que o
      combinado sem ninguem ter errado uma linha. O <small> ja e miudo por
      conta do navegador; nao preciso ajudar.

   2. moldura: nem borda, nem fundo, nem raio, nem sombra. O original era um
      cartao creme com filete e sombra — o cartao da agencia. Cartao e desenho,
      e desenho e do bloco.

   3. seta no link. Ver o comentario em inc/atendentes/autor.php.
   --------------------------------------------------------------------------- */

.rk-assina {
	font-family: var(--rk-font-body, inherit);
	color: var(--rk-color-text, currentColor);
	box-sizing: border-box;
}

.rk-assina * {
	box-sizing: inherit;
}

/* 56px, e a imagem vem pedida em 160: o dobro e o que uma tela de densidade
   2x precisa para nao borrar. `object-fit` porque retrato de perfil chega em
   qualquer proporcao, e esticar o rosto de um advogado e pior que cortar. */
.rk-assina__foto {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	margin-bottom: var(--rk-space-2, 12px);
}

.rk-assina__nome {
	margin: 0;
	font-family: var(--rk-font-heading, inherit);
	font-weight: var(--rk-font-heading-weight, 600);
	line-height: 1.25;
	color: var(--rk-color-heading, currentColor);
}

.rk-assina__cargo {
	display: block;
	margin-top: 4px;
	color: var(--rk-color-muted, currentColor);
}

.rk-assina__bio {
	margin: var(--rk-space-2, 12px) 0 0;
	line-height: var(--rk-line-body, 1.6);
}

/* Lista de um item so — a forma esta explicada em autor.php. `list-style:none`
   aqui, `role="list"` no HTML: sem o segundo, o Safari tira a semantica de
   lista justamente por causa do primeiro. */
.rk-assina__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rk-space-2, 12px);
	margin: var(--rk-space-2, 12px) 0 0;
	padding: 0;
	list-style: none;
}

/* Sublinhado, e nao cor sozinha: o link fica dentro de um bloco de texto, e
   cor sem forma nao distingue link para quem nao separa as duas. A reserva de
   toda cor daqui e `currentColor` — se o tema do cliente nao definir o token,
   o link herda a cor do texto em volta. Fica sem destaque, nunca invisivel. */
.rk-assina__link {
	color: var(--rk-color-accent-strong, currentColor);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 200ms ease;
}

.rk-assina__link:hover {
	color: var(--rk-color-accent, currentColor);
}

.rk-assina__link:focus-visible {
	outline: 2px solid var(--rk-color-focus, currentColor);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rk-assina__link {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   BOX DE AUTOR
   --------------------------------------------------------------------------- */

.rk-ab {
	display: block;
	padding: 24px;
	border: 1px solid var(--rk-hairline, rgba(0, 0, 0, 0.12));
	background: var(--rk-color-surface, transparent);
}

.rk-ab__rotulo {
	display: block;
	margin-bottom: 12px;
	font-size: var(--rk-font-size-eyebrow, 0.75em);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rk-color-muted, currentColor);
}

.rk-ab__foto {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 14px;
}

.rk-ab__nome {
	margin: 0 0 4px;
	font-family: var(--rk-font-heading, inherit);
	font-weight: var(--rk-font-heading-weight, 600);
	color: var(--rk-color-heading, currentColor);
	line-height: 1.25;
}

.rk-ab__cargo {
	display: block;
	margin-bottom: 12px;
	color: var(--rk-color-muted, currentColor);
}

.rk-ab__bio {
	margin: 0 0 14px;
	line-height: var(--rk-line-body, 1.6);
}

.rk-ab__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rk-ab__redes a {
	color: var(--rk-color-accent-strong, currentColor);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 180ms ease;
}

.rk-ab__redes a:hover {
	color: var(--rk-color-accent, currentColor);
}

.rk-ab__redes a:focus-visible {
	outline: 2px solid var(--rk-color-focus, currentColor);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rk-rel__cartao,
	.rk-ab__redes a {
		transition: none;
	}
	.rk-rel__cartao:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   LINHA DE ASSINATURA — [rk_author_time]

   Foto, nome, data, tempo de leitura e o botao de copiar link, em uma linha.

   O DESENHO NAO MORA AQUI. Ele mora no bloco `blog-topo`, que veste esta
   linha de dentro da propria moldura escopada por #rk-s-<id>. O que esta
   folha faz sao tres coisas, e nenhuma delas e enfeite:

     1. dar forma a peca quando ela e usada FORA de um bloco nosso — num post
        antigo, num modelo que ninguem migrou. Sem nada aqui, a linha sai como
        um amontoado de palavras e um botao de sistema.
     2. devolver o ANEL DE FOCO do botao de copiar, que o original apagava com
        `outline: none !important`. Este e o unico lugar de onde ele pode vir:
        blocks/blog-topo/block.css so devolve anel para `a`
        (`.rk-btopo a:focus-visible`), e o botao e `button`.
     3. desenhar o relogio do tempo de leitura, que era EMOJI no HTML.

   ---------------------------------------------------------------------------
   ESPECIFICIDADE — A EXPLICACAO ANTIGA ESTAVA ERRADA, E ELA E QUE DECIDE O
   QUE ESTA FOLHA PODE FAZER

   Estava escrito aqui: "uma classe, sempre, para o bloco ganhar sem esforco",
   e que a unica disputa com o bloco eram tres classes vestidas pelo nome. A
   INTENCAO estava certa — o bloco tem de mandar. A MECANICA, nao. Medido no
   HTML compilado (out/rn-blog-topo.html, o <style> do bloco):

     #rk-s-rn-blog-topo img                 (1,0,1)   height:auto; width:auto
     #rk-s-rn-blog-topo button              (1,0,1)   color:inherit; font:inherit
     #rk-s-rn-blog-topo span, time          (1,0,1)   background:none; color:inherit
     .rk-at__copiar / .rk-at__data / .rk-at-…   (0,1,0)   esta folha

   O ID vence. E o reset do bloco nao alcanca esta peca pelas tres classes
   vestidas pelo nome — ele a alcanca por TAG (img, button, span, time), que
   sao exatamente as tags que o contrato manda usar. Ou seja: DENTRO de um
   bloco gerado, esta folha e praticamente INERTE, e isso e o desenho certo.

   Onde ela manda e FORA de bloco nosso: ali o adversario e o `img`, o
   `button` e o `h1` do tema, que sao (0,0,1), e uma classe ganha sem esforco.

   O QUE ISSO DEIXA NA MAO DE QUEM ESCREVE AQUI: dentro do bloco, esta folha
   so consegue uma coisa — escolher propriedades que o reset NAO declara.
   Onde deu, foi feito (min/max na foto, fundo no eco do "copiado"). Onde nao
   deu, esta escrito na propria regra que ela cede e qual e a linha que o
   block.css precisa ganhar. Nada disso vira !important: contra !important nao
   existe especificidade, e ai quem perderia seria o bloco do cliente.

   As tres classes vestidas pelo nome (`.rk-at`, `.rk-at__foto`,
   `.rk-at__ponto`, em blocks/blog-topo/block.css §6) continuam sendo o motivo
   de os NOMES do original ficarem: renomear para `rk-at__foto` nao reprovaria
   nada e nao quebraria nada visivel — so faria o filete dourado da RN sumir
   da foto e os pontinhos voltarem a ser disco translucido, em silencio.

   O original tinha 60 !important nesta peca so. Aqui nao ha nenhum, e toda
   reserva de token e `currentColor` ou `transparent`: a que falta nunca pode
   apagar um texto.
   --------------------------------------------------------------------------- */

.rk-at {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--rk-font-body, inherit);
	color: var(--rk-color-text, currentColor);
	box-sizing: border-box;
}

.rk-at * {
	box-sizing: inherit;
}

/* O `padding: 6px 0` do original NAO veio junto: o bloco ja o anula
   (`.rk-btopo__autor .rk-at { padding: 0 }`), o que e a prova de que o
   respiro em volta da linha e assunto de quem a hospeda, nao dela. */

/* ---------------------------------------------------------------------------
   A FOTO
   Disco com a foto dentro, ou as iniciais quando nao ha foto. O bloco troca a
   borda e o fundo por conta dele; daqui vem so a forma e o recorte.

   `background` e `letter-spacing` daqui CEDEM dentro do bloco (o reset de
   `span` traz `background:none` e `letter-spacing:inherit`). O fundo o bloco
   devolve (`.rk-btopo__autor .rk-at__foto`); o `letter-spacing` das iniciais
   nao — e uma perda de 0.02em num texto de duas letras, aceita de proposito.
   --------------------------------------------------------------------------- */

.rk-at__foto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--rk-color-surface-alt, transparent);
	color: var(--rk-color-heading, currentColor);
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* A FOTO DENTRO DO DISCO — e por que sao seis declaracoes para uma coisa so.
   `width/height: 100%` resolvem o caso de fora do bloco. DENTRO do bloco elas
   perdem para `#rk-s-<id> img { height:auto; width:auto }`, e com os dois em
   `auto` o `object-fit: cover` fica INERTE: a caixa passa a ter a proporcao da
   propria imagem, o img vira item flex com base na largura natural e encolhe
   ate o disco, resolvendo a altura pela proporcao. Foto 400x300 saia 34x25,5
   centrada no disco — duas faixas de fundo dentro do circulo. So ficava certo
   por acidente quando a foto era quadrada (o Gravatar e; a imagem do SABOX
   muitas vezes nao e).
   `min-*` e `max-*` o reset NAO declara, entao elas passam. Com min e max
   iguais a 100% dos dois lados, a tabela de clamp do CSS 2.1 §10.4 devolve
   exatamente a caixa do disco em qualquer orientacao, e ai `object-fit: cover`
   volta a ter o que recortar.
   REGRA PARA QUEM VESTIR: para mudar o tamanho da foto, mude a CAIXA
   (`.rk-at__foto`) — a imagem segue a caixa. E o que o `blog-topo` ja faz. */
.rk-at__foto img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	max-width: 100%;
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   NOME E DATA
   Sem cor propria no nome de proposito: quem decide a cor do texto e a
   moldura (ou o tema, fora dela). O peso ja separa o nome do resto, e peso
   nao briga com paleta nenhuma.
   --------------------------------------------------------------------------- */

.rk-at__nome {
	min-width: 0;
	font-weight: var(--rk-font-body-weight-forte, 700);
	line-height: 1.25;
	overflow-wrap: break-word;
}

/* O `color` daqui CEDE dentro do bloco: `<time>` esta no reset de tags
   (`#rk-s-<id> … time { color: inherit }`), e a data sai na cor cheia do
   texto em vez da apagada. Nao ha como devolver daqui sem !important. A linha
   que resolve e uma so, e do lado do bloco — o proprio `blog-topo` ja a
   escreveu para a peca irma (`.rk-btopo__atualizacao .rk-updated time`):
       .rk-btopo__autor .rk-at__data { color: var(--rk-color-muted) } */
.rk-at__data {
	line-height: 1.25;
	white-space: nowrap;
	color: var(--rk-color-muted, currentColor);
}

/* O `background` daqui tambem cede para o reset de `span`. Dentro do
   `blog-topo` o bloco o devolve (`.rk-btopo__autor .rk-at__ponto`, e ainda
   troca o disco por quadrado, que e o ornamento da marca). Num bloco futuro
   que NAO vista `.rk-at__ponto`, o pontinho fica invisivel — e ornamento,
   `aria-hidden`, nao leva informacao embora. Desenhar o ponto com `border`
   (que o reset nao toca) sobreviveria, mas passaria por cima do fundo que o
   bloco escolher: seria a folha ganhando do bloco, que e o contrario da
   regra. */
.rk-at__ponto {
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--rk-color-accent-soft, currentColor);
}

/* ---------------------------------------------------------------------------
   TEMPO DE LEITURA — e o relogio que era emoji

   O original imprimia '⏱️' (ou '🔥') dentro do HTML. Emoji e desenho de outra
   marca dentro do site do cliente: quem escolhe a forma, a cor e o peso dele e
   o sistema operacional de quem le. Aqui o relogio e CSS — um anel com dois
   ponteiros de gradiente, na cor do proprio texto. Sendo ::before, ele nao
   entra na arvore de acessibilidade, e apagar estas dez linhas nao muda uma
   palavra do que esta escrito.

   O `color` daqui cede para o reset de `span` (color:inherit) e isso nao tem
   consequencia: o valor herdado e o mesmo texto da linha. O `font-size` NAO
   cede — `span` nao esta na regra de `font` do reset, so `button` esta. E dai
   que nasce a diferenca de tamanho anotada no botao, ali embaixo.
   --------------------------------------------------------------------------- */

.rk-at__tempo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 5px 11px;
	border: 1px solid var(--rk-color-accent-soft, currentColor);
	border-radius: var(--rk-radius-pill, 999px);
	font-size: 0.8125em;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--rk-color-text, currentColor);
}

.rk-at__tempo::before {
	content: "";
	flex: 0 0 auto;
	width: 0.9em;
	height: 0.9em;
	border: 1px solid currentColor;
	border-radius: 50%;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 1px 0.26em, 0.2em 1px;
	background-position: 50% 18%, 66% 50%;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   COPIAR LINK

   E <button>, nao <a href="#">: nao navega para lugar nenhum e nao empurra
   "#" para o historico. Fora de uma secao nossa, o navegador vestiria o botao
   com a cara do sistema operacional — dai `font: inherit` e o fundo
   transparente.

   O ANEL DE FOCO E O MOTIVO DE ESTA PARTE EXISTIR. O original tinha
   `outline: none !important` aqui, e contra !important nao ha especificidade
   que devolva: quem navega por teclado perdia a unica pista de onde estava.
   O anel nasce aqui e nao e apagado por ninguem: `outline` nao esta no reset
   do bloco.

   O QUE CEDE, E E VISIVEL: `font-size`. O reset do bloco traz
   `#rk-s-<id> button { font: inherit }` — `font` e ATALHO, declara
   `font-size: inherit` junto, e vence por ID. Resultado dentro do bloco: o
   rotulo do botao renderiza no 0.9375em da assinatura enquanto a pilula ao
   lado (que e `span`, e `span` nao esta na regra de `font`) fica nos 0.8125em
   — dois tamanhos de texto na mesma linha. Padding, borda, raio, fundo,
   `cursor` e o anel de foco sobrevivem; so o tamanho cai. A linha que resolve
   e do lado do bloco:
       .rk-btopo__autor .rk-at__copiar { font-size: .8125em }
   --------------------------------------------------------------------------- */

.rk-at__copiar {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	position: relative;
	padding: 6px 13px;
	border: 1px solid var(--rk-color-accent-soft, currentColor);
	border-radius: var(--rk-radius-pill, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8125em;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

/* O `gap: 7px` que estava aqui saiu: ele espacava o <svg> do rotulo no
   original, e o SVG nao veio. Com um unico no de texto dentro do botao, ele
   nao separava nada — e quem lesse depois ia supor que existe um icone
   previsto. O `gap: 6px` da pilula, esse sim, espaca o relogio ::before.

   `position: relative` nao e enfeite: e a ancora do rotulo escondido
   (`.rk-at__sr`), para ele nao se posicionar contra um ancestral distante. */

/* O original empurrava o botao para a ponta direita com `margin-left: auto`.
   Nao veio: dentro do `blog-topo` a linha divide o espaco com o slot de
   ultima atualizacao, e um botao jogado na outra ponta da tela parece peca
   solta, nao parte da assinatura. Agrupado, ele pertence ao que esta ao lado. */

/* O eco em COR (`color`) cede dentro do bloco, pelo mesmo `button
   { color: inherit }` do ID. Por isso o eco agora tem tres canais e nao um:
   `border-color` e `background-color` nao estao no reset e passam inteiros.
   Quem viu o clique acontecer ve a resposta mesmo onde a cor do texto nao
   muda. */
.rk-at__copiar:hover {
	border-color: var(--rk-color-focus, currentColor);
	background-color: var(--rk-color-surface-alt, transparent);
	color: var(--rk-color-heading, currentColor);
}

.rk-at__copiar:focus-visible {
	outline: 2px solid var(--rk-color-focus, currentColor);
	outline-offset: 2px;
}

/* O estado de "copiado" e escrito no aviso ao lado; aqui ele so ecoa. */
.rk-at__copiar--feito {
	border-color: var(--rk-color-focus, currentColor);
	background-color: var(--rk-color-surface-alt, transparent);
	color: var(--rk-color-heading, currentColor);
}

/* ---------------------------------------------------------------------------
   O ROTULO QUE SO O LEITOR DE TELA LE

   O botao diz "Copiar link" na tela. Numa pagina com um artigo so isso basta;
   num cartao de listagem, N botoes com o mesmo nome nao dizem de qual artigo
   e o link. O PHP acrescenta " do artigo <titulo>" DENTRO do botao, escondido
   — nao em `aria-label`, que SUBSTITUIRIA o rotulo visivel e quebraria o
   "Label in Name" de quem comanda por voz. O nome acessivel comeca pelo texto
   que esta na tela e continua com o titulo.

   Escondido assim, e nao com `display: none` nem `visibility: hidden`: esses
   dois tiram o texto da arvore de acessibilidade junto, que e o contrario do
   que se quer. Nenhuma destas propriedades esta no reset do bloco, entao o
   truque funciona dentro e fora dele.
   --------------------------------------------------------------------------- */

.rk-at__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   O AVISO

   Regiao viva (`role="status"`), irma do botao. Ela nasce VAZIA e fica no
   DOM: regiao viva criada e preenchida no mesmo instante costuma nao ser
   anunciada — ela precisa ja existir quando o texto entra.

   Por isso tambem nao ha `.rk-at__aviso:empty { display: none }`: escondido, o
   elemento sai da arvore de acessibilidade e cai no mesmo caso. Vazio ele nao
   ocupa nada — sobra o vao do flex, invisivel numa linha sem fundo nem borda.

   O `color` daqui cede dentro do bloco (reset de `span`), como o da data: o
   aviso sai na cor cheia do texto. E texto de resposta, curto e temporario;
   fica legivel, so nao fica apagado.
   --------------------------------------------------------------------------- */

.rk-at__aviso {
	flex: 0 1 auto;
	font-size: 0.8125em;
	line-height: 1.25;
	color: var(--rk-color-muted, currentColor);
}

/* ---------------------------------------------------------------------------
   TELAS ESTREITAS

   O original tinha tres faixas de media query e, dentro delas, 22
   !important — inclusive um que escondia o texto do botao e o transformava
   num circulo de 22px. Isso nao voltou: rotulo escondido deixa o botao sem
   nome visivel e a area de toque abaixo do minimo confortavel.

   Aqui a linha simplesmente QUEBRA — ela ja e `flex-wrap: wrap` — e o que
   muda no estreito e so o que precisa mesmo: a foto encolhe e o vao aperta.
   A foto acompanha sozinha: as medidas dela sao 100% da caixa, nao pixels.
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.rk-at {
		gap: 8px;
	}

	.rk-at__foto {
		width: 28px;
		height: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rk-at__copiar {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   CATEGORIAS DO POST — [rk_categorias]

   O DESENHO E DA MOLDURA. blocks/blog-topo/block.css veste esta linha pelo
   PAI (.rk-btopo__categoria: versalete, espacejamento, caixa alta e a cor de
   chapeu da marca) e o miolo HERDA. Esta parte existe para quando o shortcode
   e usado FORA de um bloco nosso — num post antigo, num modelo que ninguem
   migrou — e, mesmo ai, ela diz o minimo. Quanto menos disser, menos o bloco
   precisa desdizer.

   O QUE ELA DE PROPOSITO NAO DIZ, e nao e economia, e mecanica:

       font-family  font-size  font-weight  letter-spacing
       text-transform  line-height  text-align  e a cor do texto

   Sao as oito coisas que o <style> do original cravava — Inter 12px 700,
   0.14em, caixa alta, centralizado e #0c2530 — e sao exatamente as oito que
   descem por heranca de quem hospeda. Duas leituras, mesma conclusao:

     - DENTRO de uma secao, compile/reset.css entra escopado pelo id da secao
       e declara, por TAG, `font: inherit`, `color: inherit`, `text-align:
       inherit`, `text-transform: inherit`, `letter-spacing: inherit` em ul,
       li e a. Id ganha de classe: o que esta folha dissesse sobre tipografia
       seria ignorado ali dentro de qualquer forma.

     - FORA de uma secao nao ha reset nenhum — e ai uma classe minha CORTA a
       heranca do tema do cliente. Era isso que o `text-transform: uppercase`
       do original fazia: a categoria saia em caixa alta ate no site de quem
       nunca pediu caixa alta.

   O silencio da o resultado certo nos dois casos.

   E O ALINHAMENTO TAMBEM NAO. O original punha `justify-content: center` e
   `width: 100%`; block.css:211 precisou de uma regra so para desdizer, com o
   comentario "no lugar errado, numa coluna alinhada a esquerda". Trocar por
   flex sem `justify-content` repetiria o defeito espelhado: numa moldura que
   centraliza por `text-align`, a linha ficaria a esquerda e ninguem seria
   avisado. Por isso a lista corre INLINE. Alinhamento e uma propriedade que
   HERDA, e o reset da casa manda respeita-la (`text-align: inherit`).

   O PRECO DISSO, escrito para quem for medir: `.rk-btopo__categoria .rk-cats`
   pede tambem `justify-content: flex-start` e `gap: 10px`, e as duas so valem
   em flex — viram letra morta. O vao entre as categorias passa a ser um
   ESPACO DE PALAVRA, que acompanha a fonte e o espacejamento que a moldura
   escolheu, em vez de 10px fixos. block.css §6 ja previa este dia: "se o fork
   da RN limpar o CSS dos shortcodes, estas regras viram redundancia
   inofensiva e o desenho de cima assume sozinho".
   --------------------------------------------------------------------------- */

.rk-cats {
	margin: 0;
	padding: 0;
	list-style: none;

	/* Contencao, nao enfeite: "Direito Administrativo e Constitucional" numa
	   coluna estreita, ou um nome de categoria colado sem espaco, estoura a
	   secao para o lado e leva a barra de rolagem horizontal junto. */
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   OS ITENS

   `display: inline` e o que faz as categorias correrem como texto: elas
   quebram entre linhas como palavras, obedecem ao `text-align` do pai e nao
   criam um contexto de formatacao que a moldura tenha de reconquistar.
   --------------------------------------------------------------------------- */

.rk-cats__item {
	display: inline;
}

/* ---------------------------------------------------------------------------
   O SEPARADOR — o caractere que o shortcode pediu, sem <span> no meio

   A trilha resolveu o separador dela virando FORMA (duas bordas giradas),
   porque conteudo gerado ENTRA na arvore de acessibilidade do Chrome e do
   Safari: um <span>›</span> e um `content: "›"` sao lidos igual. Aqui nao da
   para fazer o mesmo — o caractere e parametro do shortcode, e quem escolhe e
   quem monta o site.

   Entao ele vem por `attr(data-sep)`, e a segunda declaracao poe TEXTO
   ALTERNATIVO VAZIO (`/ ""`), que e a forma que o CSS tem de dizer "isto e
   desenho, nao leia". A primeira declaracao existe para o navegador que ainda
   nao entende a barra: ele descarta a segunda linha inteira e fica com a
   primeira. Ou seja, o pior caso e o comportamento de hoje — o ponto e lido —,
   nunca um separador que some.

   O espaco de cada lado vai DENTRO do `content` de proposito. Assim o vao e
   simetrico venha ou nao a quebra de linha do HTML junto (o WP Rocket minifica
   HTML e pode leva-la embora), e ele acompanha a fonte da moldura em vez de
   ser um numero daqui.
   --------------------------------------------------------------------------- */

.rk-cats__item + .rk-cats__item::before {
	content: " " attr(data-sep) " ";
	content: " " attr(data-sep) " " / "";
}

/* ---------------------------------------------------------------------------
   O TRACINHO DOS DOIS LADOS — ornamento, e so entra quando e chamado

   Eram dois <span> vazios no HTML do original. Aqui sao ::before e ::after do
   proprio elemento de fora: nao ha nada para o leitor de tela alcancar, nao ha
   no vazio para quem le o markup, e apagar estas dez linhas nao muda uma
   palavra do que esta escrito na tela.

   A classe LIGA o ornamento (`tracinho="nao"` simplesmente nao a imprime), em
   vez de uma segunda regra desliga-lo: regras de mesma especificidade se
   decidem por ordem de carga, e ordem de carga muda sozinha.

   A COR: `--rk-color-accent-soft` e o token de ornamento da marca — o mesmo
   que a trilha usa na setinha e o [rk_author_time] nos pontinhos. Sem token
   nenhum, a reserva e `currentColor`: o traco fica da cor do proprio texto,
   que nunca pode ser invisivel sobre o fundo em que aquele texto ja se le.
   O original resolvia isso com #0c2530 a 40% de opacidade — escuro fixo, que
   na superficie escura da marca desaparece.

   `2em` e nao 24px: o traco cresce com o corpo do texto ao lado, entao ele
   continua proporcional no chapeu pequeno da moldura e num tema que serve
   corpo maior.
   --------------------------------------------------------------------------- */

.rk-cats--traco::before,
.rk-cats--traco::after {
	content: "";
	display: inline-block;
	width: 2em;
	height: var(--rk-hairline, 1px);
	vertical-align: middle;
	background: var(--rk-color-accent-soft, currentColor);
}

/* So o lado de dentro leva respiro. Do lado de fora o traco encosta na borda
   da coluna, para a linha comecar onde o titulo comeca — e nas duas direcoes
   de escrita, por isso as propriedades logicas. */
.rk-cats--traco::before {
	margin-inline-end: 0.35em;
}

.rk-cats--traco::after {
	margin-inline-start: 0.35em;
}

/* ---------------------------------------------------------------------------
   OS LINKS

   SEM COR AQUI, e isso e escolha, nao esquecimento. Dentro de uma secao, o
   reset declara `color: inherit` em `a` e o link ja sai na cor de chapeu que a
   moldura escolheu. Fora dela, quem pinta link e o tema do cliente — que e a
   cor certa para um link no site dele. Uma cor minha so teria como piorar as
   duas situacoes.

   O sublinhado sai no estado parado (chapeu espacejado com sublinhado fica
   pesado, e o reset da casa ja diz o mesmo) e VOLTA no hover. Volta como
   sublinhado, e nao como troca de cor, por dois motivos: funciona em tema que
   nao define token nenhum, e nao disputa com o `:hover` da moldura, que mexe
   na cor. Propriedades diferentes se somam em vez de brigar.
   --------------------------------------------------------------------------- */

.rk-cats a {
	text-decoration: none;
}

.rk-cats a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* O anel de foco: dentro do bloco quem o da e a moldura (`.rk-btopo
   a:focus-visible`), e ela ganha. Fora dela, este e o unico que existe — e
   tema que apaga outline com `a:focus { outline: none }` e comum. */
.rk-cats a:focus-visible {
	outline: 2px solid var(--rk-color-focus, currentColor);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   METADADOS DO POST — [rk_post_meta]

   ESTA PARTE DIZ QUASE NADA, E O QUASE E O ASSUNTO INTEIRO.

   ONDE ELA VALE, MEDIDO: dentro de secao nossa o reset entra escopado pelo id,
   `#rk-s-<id> li` e (1,0,1) contra (0,1,0) de `.rk-meta__item` — o id ganha e
   esta folha e INERTE ali, de proposito, porque quem manda no bloco e o bloco.
   Fora de secao nossa (post antigo, modelo nao migrado) nao ha reset, o
   adversario e o `li` ou o `a` do tema, que e (0,0,1), e ai a classe ganha. As
   poucas regras abaixo existem para esse segundo caso.

   Por isso NAO ha aqui: font-family, font-size, font-weight, color,
   letter-spacing, text-transform, line-height, text-align, margin, gap — a
   tipografia da AGENCIA no site do cliente e o defeito que este plugin existe
   para desfazer (spec/ETAPA-6.md §1). Sobrou o que, faltando, QUEBRA.

   O QUE O RESET COBRE (compile/reset.css, conferido na rodada 2): em `ul` e
   `li` (86-115) sao cinco heranças — font, color, text-align, text-transform,
   letter-spacing. Em `a` (118-127) sao quatro: font, color, text-decoration,
   text-transform. `text-align` e `letter-spacing` NAO estao no `a`, entao tema
   com `a { letter-spacing: .1em }` continua valendo dentro da secao. Conserto
   e no reset, nao aqui.
   --------------------------------------------------------------------------- */

/* A LINHA. Sem `list-style` e sem `padding` isto sairia com bolinha e recuo de
   lista de compras. O `role="list"` do HTML devolve a semantica que o Safari
   tira quando os marcadores somem; o `role="listitem"` de cada item devolve a
   que o `display: inline` daqui tira. `overflow-wrap` e contencao: categoria
   longa em coluna estreita estoura a secao e traz rolagem horizontal junto. */
.rk-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-wrap: break-word;
}

/* OS ITENS CORREM COMO TEXTO — a escolha do [rk_categorias], pelo mesmo motivo
   medido: quebram como palavras e HERDAM o `text-align` do pai. Flex nao, porque
   `justify-content` viraria decisao minha sobre alinhamento — foi o que o
   <style> original fazia, e blocks/blog-topo/block.css:211 gastou uma regra so
   para desdizer. A moldura empilha no celular trocando o display por `block`; e
   o role do HTML que faz o item sobreviver as duas trocas. */
.rk-meta__item {
	display: inline;
}

/* O MARCADOR DO TEMA, ANTES DO SEPARADOR. `list-style: none` mata o marcador
   nativo, mas nao alcanca tema que desenha bolinha com `li::before { content:
   '▸' }` — receita comum. Fora de secao nossa isso marcaria o PRIMEIRO item, a
   mesma promessa quebrada do orfao por outra porta. (0,1,0) ganha do tema e
   perde, de proposito, para o separador logo abaixo, que e (0,2,0). */
.rk-meta__item::before {
	content: none;
}

/* O SEPARADOR, E POR QUE ELE NAO FICA ORFAO

   Nasce em `li + li`: sem segundo item nao ha `+`, e a linha nunca COMECA por
   um ponto solto — campo sem dado nao vira <li> no PHP.

   O nbsp da esquerda impede que o "·" abra a linha de baixo. ISSO SO FUNCIONA
   PORQUE O PHP EMITE `</li><li>` COLADO: com itens `inline`, branco entre as
   tags colapsa num espaco comum, que e oportunidade de quebra ANTES do nbsp —
   o defeito que a rodada 2 reproduziu. Reindentar o PHP com HTML solto devolve
   o orfao; o contrato esta escrito nos dois arquivos.

   O espaco da direita vai dentro do `content` para o vao nao depender de branco
   no HTML e para acompanhar a fonte da moldura. `white-space: normal` porque o
   <li> de tempo e o de comentarios sao `nowrap` e o pseudo herdaria: o vao
   deixaria de ser oportunidade de quebra e "· 5 min de leitura" viraria corrida
   indivisivel, que em coluna estreita estoura em vez de quebrar.

   O texto alternativo vazio (`/ ""`) diz "isto e desenho, nao leia": conteudo
   gerado ENTRA na arvore de acessibilidade, e "Ana Ribeiro ponto medio 3 jun
   2026" e pior que a linha sem separador. Navegador sem suporte descarta so a
   segunda declaracao. */
.rk-meta__item + .rk-meta__item::before {
	content: "\00a0" attr(data-sep) " ";
	content: "\00a0" attr(data-sep) " " / "";
	white-space: normal;
}

/* O QUE NAO PODE QUEBRAR NO MEIO: "5 min de leitura" com o 5 numa linha e o
   "min" na outra parece erro de sistema, e "3 jun 2026" partido nao se le como
   data. O nome do autor e a categoria PODEM quebrar, e devem — sao os longos. */
.rk-meta time,
.rk-meta__item--tempo,
.rk-meta__item--comentarios {
	white-space: nowrap;
}

/* OS LINKS — sem cor, e sem `text-decoration: none`. A cor de link e do tema do
   cliente. O sublinhado saiu da folha na rodada 2: dentro da secao a regra era
   redundante (o reset ja tira, por id) e fora dela era subtracao — a peca se
   recusava a pintar o link "porque quem pinta e o tema" e no mesmo folego
   apagava o unico sinal que sobra, em tema acessivel, de que aquilo e clicavel.
   Hover nao cobre isso: hover nao existe para teclado nem para toque.

   O hover ACRESCENTA, e em espessura e distancia, nao em cor — assim nao
   disputa com o `:hover` da moldura, que mexe na cor. */
.rk-meta a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* O anel de foco: dentro do bloco quem o da e a moldura. Fora dela este e o
   unico que existe — tema que apaga outline com `a:focus { outline: none }` e
   comum. A reserva e `currentColor` porque o anel nunca pode ser invisivel: se
   o texto do link se le sobre aquele fundo, o anel tambem. */
.rk-meta a:focus-visible {
	outline: 2px solid var(--rk-color-focus, currentColor);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   TEMPO DE LEITURA — [rk_reading_time]

   Uma regra. E ela e curta porque a peca e um PEDACO DE FRASE, nao um
   componente: "8 min de leitura", dentro da linha de outro bloco. Nao tem
   caixa, nao tem borda, nao tem fundo, nao tem estado. Nao ha o que desenhar.

   O QUE ESTA FOLHA DELIBERADAMENTE NAO DECLARA — e este e o conteudo do
   arquivo, mais do que a regra abaixo:

     cor        os dois lugares que hospedam esta peca ja pintam a linha:
                blocks/blog-indice/block.css:97-105  (.rk-bidx__tempo, muted)
                blocks/blog-progresso/block.css:453-459 (.rk-prog__tempo, muted)
                A cor chega aqui por HERANCA — e declaracao no filho vence
                heranca do pai mesmo sem !important. Foi assim que o
                [rk_title] ficou irrecuperavel (spec/ETAPA-6.md §1: "nao ha
                disputa de especificidade; filho vence heranca"). Uma linha de
                `color` aqui tiraria o tempo de leitura da mao da moldura em
                silencio, exatamente como la.

                E, dentro de uma secao nossa, ela nem venceria: o reset do
                bloco poe `#rk-s-<id> span { color: inherit }`, que e 1,0,1
                contra os 0,1,0 de uma classe. Ou seja, a unica coisa que uma
                cor aqui conseguiria e mandar no lugar onde a gente sabe menos
                — fora dos nossos blocos, no tema de alguem. Sem cor, o texto
                herda a do vizinho e nunca fica invisivel, que e a regra da
                reserva levada a serio.

     tamanho    mesma historia: as duas molduras declaram `font-size` no pai
                (0.875em). Um tamanho aqui se multiplicaria pelo de la.

     caixa      nada de padding, margem, borda ou fundo. O respiro em volta
                (o filete dourado e o espaco acima) e da moldura, e ela ja o
                desenha.

   O ESPACO INSEPARAVEL ENTRE "8" E "min" NAO ESTA AQUI, esta no PHP (U+00A0).
   Poderia ser `white-space: nowrap` nesta classe, mas isso travaria a frase
   INTEIRA numa linha so — e ela cai numa coluna estreita, onde travar a frase
   toda e transbordar. O que nao pode quebrar e valor e unidade; "de leitura"
   pode descer para a linha de baixo sem prejuizo nenhum.

   Sem @media de movimento reduzido: nao ha transicao nesta peca.
   --------------------------------------------------------------------------- */

.rk-rt {
	font-family: var(--rk-font-body, inherit);
}

/* ---------------------------------------------------------------------------
   RELACIONADOS

   O wrapper existe SEMPRE — e o marco de parada dos blocos de blog. Quando
   nao ha post para mostrar ele fica sem altura e sem borda: invisivel na
   tela, presente no DOM.

   `display: block` com altura zero, e nao `display: none`: um elemento com
   display none nao tem getBoundingClientRect util, e a barra de leitura
   mediria errado.
   --------------------------------------------------------------------------- */

.rk-rel {
	display: block;
}

.rk-rel--vazio {
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}

.rk-rel__lista {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.rk-rel__lista { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
	.rk-rel__lista { grid-template-columns: 1fr 1fr 1fr; }
}

.rk-rel__item {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.rk-rel__cartao {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--rk-color-surface, transparent);
	border: 1px solid var(--rk-hairline, rgba(0, 0, 0, 0.12));
	overflow: hidden;
	transition: transform 180ms ease, border-color 180ms ease;
}

.rk-rel__cartao:hover {
	transform: translateY(-2px);
	border-color: var(--rk-color-accent, currentColor);
}

.rk-rel__cartao:focus-visible {
	outline: 2px solid var(--rk-color-focus, currentColor);
	outline-offset: 2px;
}

/* A capa reserva o lugar mesmo sem imagem — sem isso o cartao sem foto sobe
   e a grade fica desalinhada. */
.rk-rel__capa {
	aspect-ratio: 16 / 9;
	background: var(--rk-color-surface-alt, rgba(0, 0, 0, 0.05));
	overflow: hidden;
}

.rk-rel__capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rk-rel__texto {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
	flex: 1;
}

.rk-rel__chapeu {
	font-size: var(--rk-font-size-eyebrow, 0.75em);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rk-color-muted, currentColor);
}

.rk-rel__titulo {
	margin: 0;
	font-family: var(--rk-font-heading, inherit);
	font-weight: var(--rk-font-heading-weight, 600);
	color: var(--rk-color-heading, currentColor);
	line-height: 1.3;
}

.rk-rel__resumo {
	margin: 0;
	line-height: var(--rk-line-body, 1.6);
	color: var(--rk-color-text, currentColor);
}

.rk-rel__pe {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--rk-hairline, rgba(0, 0, 0, 0.12));
	color: var(--rk-color-muted, currentColor);
	font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   TITULO DO POST — a peca cujo CSS foi embora

   Esta e a parte mais curta da folha, e e curta de proposito. O <style> que
   ela substitui tinha 12 !important em cinco propriedades de tipografia mais
   cor, margem e padding, e fazia o titulo do artigo de todo cliente sair com
   a fonte e a cor de um so.

   O QUE NAO ESTA AQUI, E POR QUE NAO PODE ESTAR:

     font-family, font-size, font-weight, line-height, letter-spacing, color

   ---------------------------------------------------------------------------
   O MOTIVO, MEDIDO — e nao e o que estava escrito aqui na rodada 1

   Estava escrito que uma classe "ganha do reset e do pai". Dentro de uma
   secao gerada isso e FALSO. O reset nao entra como seletor de elemento: o
   compilador o escopa no wrapper da secao. Medido em out/rn-blog-topo.html:

       #rk-s-rn-blog-topo h1 { … font:inherit; color:inherit … }   (1,0,1)
       .rk-title                                                   (0,1,0)

   O ID ganha. Dentro do bloco esta folha e praticamente INERTE sobre o <h1>,
   e isso e o desenho certo: quem manda no titulo e o bloco, que declara a
   tipografia da marca na div do slot (`.rk-btopo__titulo`) e deixa o <h1>
   descer por heranca. Uma font-family escrita aqui nao cortaria heranca
   nenhuma la dentro — ela simplesmente nao valeria.

   A PROIBICAO CONTINUA, e o motivo verdadeiro e FORA do bloco: post antigo,
   template que ninguem migrou, pagina de arquivo. Ali nao ha reset e nao ha
   div de slot; o adversario e o `h1` do tema do cliente, que e (0,0,1), e a
   classe (0,1,0) ganha com folga. Foi assim que o original prendeu o titulo
   de todo mundo na tipografia de um so — e ali nem !important era preciso.
   Uma linha de tipografia nesta parte da folha nao estraga o bloco: estraga
   o site do cliente.

   E as duas regras que sobraram valem nos DOIS lugares justamente por serem
   as duas unicas propriedades que aquele reset nao lista. Ele lista
   background, border, clear, color, float, font, letter-spacing, list-style,
   margin, max-width, min-width, padding, text-align, text-decoration,
   text-shadow, text-transform e width. Nao lista overflow-wrap nem
   text-wrap. Nao e sorte: e o criterio para saber o que ainda cabe aqui.
   ---------------------------------------------------------------------------

   Nem `var(--rk-artigo-h1)`, que existe em tokens/rn.css. Aquele token e da
   vestimenta do widget nativo Post Title do Elementor, nao deste <h1> — e
   fora do bloco ele derrubaria o corpo que o tema do cliente calcula.

   E nada para `.rk-title em`: o bloco veste `em` por TAG. Uma regra minha ali
   empataria em especificidade com a dele (0,1,1 contra 0,1,1), e o empate se
   decide por ordem de carga — desenho que muda sozinho, sem nada reprovar.

   Sobra o que nao e tipografia e nao e desenho: conter o texto.
   --------------------------------------------------------------------------- */

.rk-title {
	/* Titulo de artigo juridico tem palavra longa de verdade
	   ("inconstitucionalidade", numero de processo, URL colada). Em corpo
	   grande e coluna estreita ela estoura a secao para o lado e leva a barra
	   de rolagem horizontal junto. Isto e contencao, nao enfeite: sem a
	   regra, o que quebra e a pagina, nao o titulo. */
	overflow-wrap: break-word;

	/* Vinha do original, e era a unica declaracao dele sem !important. Numa
	   coluna curta evita a ultima linha com uma palavra so. O bloco ja pede o
	   mesmo no pai; repetido aqui, serve o uso fora do bloco. */
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   TRILHA DE NAVEGACAO

   O DESENHO E DO BLOCO. blocks/blog-topo/block.css veste `a` dentro de
   .rk-btopo__trilha e poe o filete embaixo. O que esta aqui e o que sobra
   quando o shortcode e usado FORA de um bloco nosso — e, mesmo assim, o
   minimo: quanto menos esta parte disser, menos o bloco precisa desdizer.

   AS TRES COISAS QUE ELA DE PROPOSITO NAO DIZ, e cada uma tem cicatriz:

   1. font-size. O snippet velho cravava 13px, e block.css:203 precisou de uma
      regra so para desfazer isso. Se esta parte pedisse o mesmo
      var(--rk-font-size-eyebrow) que a moldura ja pede, os dois se
      MULTIPLICARIAM: 0.8125em dentro de 0.8125em da 0,66em, e a trilha sairia
      menor que o combinado sem ninguem ter errado uma linha.

   2. margem embaixo. O snippet punha 14px, e block.css:203 tambem teve de
      zerar. Quem manda no respiro ali e o filete da moldura; margem daqui se
      somaria ao padding dela.

   3. line-height. Mesma historia: a moldura ja escolheu 1.6.

   E o aviso que vale para quem mexer: aquelas regras de acomodacao do
   block.css miram `.rk-bread`, que era a classe do markup velho. Esta peca
   nao a carrega — de proposito, porque ela nao tem os defeitos que aquelas
   regras existiam para consertar.

   ---------------------------------------------------------------------------
   "AQUI NAO HA REDE" ESTAVA ERRADO, E O ERRO ERA DE MECANICA

   A frase que estava neste lugar dizia: "aqui nao ha rede — o que esta parte
   pedir a mais, ninguem do outro lado vai tirar". Ela vinha da explicacao que
   a casa repetia (00-base.css:26-27 ainda a repete): "especificidade baixa,
   uma classe, assim o bloco ganha de nos sem esforco".

   A INTENCAO estava certa; a mecanica, nao. Medido no <style> compilado de
   out/rn-blog-topo.html, o bloco nao "ganha com esforco" — ele ja ganhou:

       #rk-s-rn-blog-topo span { color: inherit }        (1,0,1)
       #rk-s-rn-blog-topo a    { text-decoration: none } (1,0,1)
       .rk-trilha__atual       { color: ... }            (0,1,0)
       .rk-trilha a            { text-decoration: ... }  (0,1,0)

   O compilador prefixa TODA tag crua do reset com #rk-s-<id>, e o ID ganha de
   qualquer classe. Entao DENTRO de um bloco gerado esta parte e quase inteira
   inerte, e isso e o desenho certo: o bloco manda mesmo. Nao ha rede no
   sentido inverso do que a frase dizia — o outro lado tira DEMAIS, e sem
   avisar. Ver o comentario de .rk-trilha__atual la embaixo, que e o caso
   concreto.

   ONDE ESTA PARTE VALE DE VERDADE e fora de bloco nosso: post antigo,
   template que ninguem migrou. Ali o adversario e o `a`/`span` do tema, que e
   (0,0,1), e ai sim a classe ganha. E por isso que a folha existe.
   --------------------------------------------------------------------------- */

.rk-trilha {
	margin: 0;
	font-family: var(--rk-font-body, inherit);
	color: var(--rk-color-muted, currentColor);
	box-sizing: border-box;
}

/* O `*` casa ELEMENTOS; pseudo-elemento nao e elemento e nao entra nele. Sem
   ::before/::after escritos, o separador (que e um ::after com borda) caia no
   content-box do navegador FORA de bloco nosso e media 0.32em + 1px por eixo,
   enquanto DENTRO do bloco o reset compilado
   `#rk-s-<id> :after { box-sizing: border-box }` o alcanca e ele media 0.32em
   cravados. Duas setas de tamanhos diferentes conforme o contexto, no unico
   ornamento da peca. */
.rk-trilha *,
.rk-trilha *::before,
.rk-trilha *::after {
	box-sizing: inherit;
}

.rk-trilha__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rk-space-2, 10px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rk-trilha__item {
	display: flex;
	align-items: center;
	gap: var(--rk-space-2, 10px);
	min-width: 0;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   O SEPARADOR — desenho, nunca caractere

   Ele saiu do HTML porque <span>›</span> e conteudo: o leitor de tela le o
   sinal entre um degrau e outro, e uma trilha de quatro itens vira "Inicio,
   sinal de maior, Blog, sinal de maior...".

   Mas trocar o <span> por content:"›" no CSS resolve pela metade. Conteudo
   gerado ENTRA na arvore de acessibilidade do Chrome e do Safari — o sinal
   continua sendo anunciado, so que agora ninguem ve isso no HTML para
   desconfiar. Por isso aqui ele e FORMA: duas bordas de um quadrado vazio,
   giradas 45 graus. Nao ha texto para ler, em navegador nenhum.

   :not(:last-child) e nao :last-child em cima de tudo: com
   mostrar_atual="nao" o ultimo degrau e um link, e a trilha nao pode terminar
   com uma seta apontando para o nada.
   --------------------------------------------------------------------------- */

.rk-trilha__item:not(:last-child)::after {
	content: "";
	flex: none;
	width: 0.32em;
	height: 0.32em;
	border-top: 1px solid var(--rk-color-accent-soft, currentColor);
	border-right: 1px solid var(--rk-color-accent-soft, currentColor);
	transform: rotate(45deg);
}

.rk-trilha a {
	color: var(--rk-color-muted, currentColor);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--rk-color-accent-soft, currentColor);
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.rk-trilha a:hover {
	color: var(--rk-color-heading, currentColor);
	text-decoration-color: currentColor;
}

.rk-trilha a:focus-visible {
	outline: 2px solid var(--rk-color-focus, currentColor);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   O DEGRAU ATUAL — e o que dele chega na tela em cada um dos dois mundos

   NAO por peso: o tema da marca so tem 400 e 700 no corpo, e 700 numa linha de
   navegacao chama mais atencao que o titulo do artigo logo abaixo.

   O comentario anterior dizia "se distingue por COR e por nao ter sublinhado",
   e isso so e verdade em UM dos dois mundos. Medido no <style> de
   out/rn-blog-topo.html:

     FORA de bloco nosso: a linha abaixo vale. Cor + ausencia de sublinhado.
     DENTRO de bloco nosso: `#rk-s-<id> span { color: inherit }` e (1,0,1) e
     ganha desta classe, que e (0,1,0). O degrau atual herda a cor do pai —
     --rk-color-muted, a mesma dos links — e sobra so a ausencia do sublinhado.

   NAO DA PARA CONSERTAR DAQUI, e nem se deve. Para vencer (1,0,1) seria
   preciso um ID (que esta parte nao tem) ou !important (proibido pela casa e
   pelo montar-folha.js). E o reset cobre span, a, b, em, i, small, strong,
   time — nao ha tag de fuga. Quem pode devolver a cor e o bloco, numa linha de
   blocks/blog-topo/block.css; esta anotado como divida em
   inc/atendentes/trilha.php, em "RODADA 2".

   E o que sobra AINDA distingue, nos dois mundos: a ausencia do sublinhado e
   visual, e o aria-current="page" do markup e semantico e nao depende de CSS
   nenhum. A peca nao fica ambigua — fica com uma pista visual em vez de duas.
   --------------------------------------------------------------------------- */
.rk-trilha__atual {
	color: var(--rk-color-text, currentColor);
}

@media (prefers-reduced-motion: reduce) {
	.rk-trilha a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   LINHA DE ULTIMA ATUALIZACAO — [rk_updated]

   O simbolo, o rotulo e a data, numa linha so.

   O DESENHO NAO MORA AQUI. Ele mora nos dois blocos que hospedam esta peca —
   `blog-topo` (blocks/blog-topo/block.css:254-273) e `blog-resumo`
   (blocks/blog-resumo/block.css:199-215) —, que a vestem de dentro da propria
   moldura escopada por #rk-s-<id>. Os dois tiram fundo, filete, raio e fonte,
   e pintam `.rk-updated-icon` e `.rk-updated time` com o acento da marca.

   Entao esta folha faz duas coisas, e nenhuma e enfeite:

     1. dar forma a peca quando ela e usada FORA de um bloco nosso — num post
        antigo, num modelo que ninguem migrou. Sem nada aqui a linha sai como
        tres pedacos de texto colados, e o rotulo, que e <small>, sai menor
        que a data por conta do navegador.

     2. desenhar o simbolo de revisao, que no original era o caractere ↻
        escrito dentro do HTML. Aqui ele e FORMA — um anel com uma falha e uma
        ponta de seta —, na cor do proprio texto. Sendo forma, e nao
        `content:"↻"`, ele nao entra na arvore de acessibilidade de navegador
        nenhum: conteudo gerado por CSS entra, e o Chrome e o Safari anunciam.
        A licao e a mesma do separador do [rk_trilha].

   ESPECIFICIDADE: uma classe, e nunca mais que uma classe + uma tag. Os dois
   blocos alcancam esta peca com duas classes (`.rk-btopo__atualizacao
   .rk-updated`), entao onde os dois falam, o bloco vence — que e como tem
   de ser.

   O QUE ESTA FOLHA NAO DECLARA, E E DE PROPOSITO:

     `color` em `.rk-updated`. Os dois blocos poem a cor no elemento do SLOT e
     contam com a heranca. Filho vence heranca mesmo sem `!important` e mesmo
     empatando em especificidade — foi assim que o snippet velho prendia o
     titulo do artigo (ver assets/partes/rk_title.css). Uma cor aqui na raiz
     nao mudaria nada hoje, porque o valor seria o mesmo token; mudaria no dia
     em que o bloco trocasse a cor do slot e nada acontecesse na tela. Fora de
     um bloco, herdar a cor do tema do cliente nunca deixa texto invisivel, que
     e mais do que qualquer token com reserva pode prometer.

     `.rk-updated-nota`. E um ramo condicional do shortcode original que o PHP
     desta peca nao emite, porque o texto dele nao foi recuperado. Os dois
     blocos ja o vestem por precaucao; repetir aqui seria vestir um elemento
     que nao existe.

   Sem transicao e sem animacao, entao sem `prefers-reduced-motion`: nao ha
   movimento nenhum a respeitar.
   --------------------------------------------------------------------------- */

.rk-updated {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	font-family: var(--rk-font-body, inherit);
	line-height: 1.4;
	box-sizing: border-box;
}

.rk-updated * {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------------------
   O ROTULO

   E `<small>` porque a moldura veste `<small>` fora de `<p>` como linha de
   apoio, e "Última atualização:" e apoio, nao valor.

   O navegador da a `<small>` um `font-size: smaller` por conta propria, e o
   slot do blog-topo ja esta em 0.875em: sem esta linha o rotulo desceria para
   perto de 0.72em, abaixo do piso do que se le com conforto.

   O seletor e `.rk-updated small` (uma classe + uma tag) e nao
   `.rk-updated-label` (uma classe) de proposito: assim qualquer bloco que
   queira vestir `small` dentro do proprio slot ganha desta regra sem esforco,
   em vez de empatar com ela.
   --------------------------------------------------------------------------- */

.rk-updated small {
	font-size: inherit;
}

/* ---------------------------------------------------------------------------
   A DATA

   Recebe cor porque ela e o VALOR da linha: sem nenhum contraste com o
   rotulo, os dois viram um bloco unico de texto cinza e a data deixa de saltar.

   A reserva e `currentColor`, e a escolha e deliberada: se o tema do cliente
   nao definir o token, a data fica exatamente da cor do texto em volta —
   perde o destaque e nao perde a legibilidade. Nenhuma reserva desta folha
   pode apagar um texto.

   Os dois blocos declaram esta mesma propriedade com duas classes, com o
   mesmo token. Onde eles falam, eles vencem; onde nao ha bloco, esta regra
   responde.
   --------------------------------------------------------------------------- */

.rk-updated time {
	color: var(--rk-color-accent, currentColor);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   O SIMBOLO DE REVISAO — desenho, nunca caractere

   Um anel com uma falha no alto e uma ponta de seta na falha: a seta circular
   que o original escrevia como ↻ dentro do markup.

   Ele e o `<span class="rk-updated-icon">` VAZIO que o PHP imprime. Vazio
   porque, sem esta folha, um span vazio nao aparece na tela nem no leitor de
   tela — enquanto um ↻ solto no HTML aparece nos dois, com a forma, o peso e
   a cor que o sistema operacional de quem le decidir.

   `currentColor` em tudo: os dois blocos pintam este span com o acento da
   marca, e o desenho vem junto sem precisar saber disso.
   --------------------------------------------------------------------------- */

.rk-updated-icon {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 0.72em;
	height: 0.72em;
	border: 1px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0.85;
}

.rk-updated-icon::after {
	content: "";
	position: absolute;
	top: -0.02em;
	right: -0.04em;
	width: 0.24em;
	height: 0.24em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(30deg);
}

/* GERADO por compile/takeaways.js a partir de blocks/blog-resumo/.
   Nao editar aqui: edite o BLOCO, que e a fonte de verdade visual.

   DEPENDE-DO-TEMA: os tokens --rk-* vem de tokens/<marca>.css.

   ESTE CSS E GLOBAL, e e a metade "design" da regra do Felipe. O conteudo
   de cada artigo e individual; o desenho e um so. Se cada post trouxesse a
   propria folha, o site carregaria a mesma coisa N vezes e mudar o desenho
   exigiria reeditar todo post ja publicado. */

/* =====================================================================
   BLOG — RESUMO DO FIM DO POST
   ---------------------------------------------------------------------
   A FICHA REGRADA. Cada ponto e uma linha de tabela: numeral em ouro numa
   coluna estreita, filete VERTICAL continuo separando numeral de texto,
   filete HORIZONTAL fechando cada linha. Os dois se cruzam, e o cruzamento
   e a ancora visual da secao — nao ha cartao, sombra, fundo proprio nem
   imagem. So filete reto e canto vivo, que e o unico ornamento que o
   manual da marca usa.

   POR QUE O FILETE VERTICAL NAO E BORDA DO <li>
   Se a linha inteira tivesse padding vertical, o filete do numeral pararia
   antes do filete horizontal e a ficha ficaria com quatro cantos abertos.
   Entao o padding vertical mora nas DUAS celulas, nunca no <li>: a celula
   do numeral se estica de filete a filete (comportamento normal de item de
   grade) e o cruzamento fecha.

   A COLUNA DO NUMERAL RESPONDE AO CONTAINER, NAO A JANELA
   clamp(38px, 9%, 66px): a porcentagem e da largura da ficha. Esta secao
   tanto cai na largura inteira quanto dentro da coluna estreita do artigo,
   e nos dois casos a janela e a mesma — media query mediria a coisa errada.
   O mesmo par de medidas serve a margem do rodape, para o carimbo de
   atualizacao alinhar com a COLUNA DE TEXTO e deixar a do numeral limpa.

   A COR DO NUMERAL
   Filete e ornamento e usa o Dourado Fosco cru (--rk-color-accent-soft). O
   numeral e TEXTO, e o ouro cru reprova como texto (2,41:1 no creme): ele
   usa --rk-color-accent, o dourado derivado que muda com a superficie
   (#735f35 no claro, #d1bf9b no escuro) e passa nas tres.

   DUAS ALTURAS POR PONTO
   Rotulo em serifada, para quem varre; frase em texto corrido com medida de
   62ch, para quem para. Um tamanho so deixaria a lista chapada.

   O MOVIMENTO E MELHORIA, NUNCA CONDICAO
   Sem JavaScript a ficha ja nasce inteira e visivel. Quem esconde as linhas
   e a classe .rk-bres--armado, que so existe se o script rodou — e ele nao
   arma nada para quem pediu menos movimento.
   ===================================================================== */
.rk-bres.rk-bres {
  /* a coluna do numeral e a calha ate o texto, num lugar so: a grade das
     linhas e a margem do rodape leem daqui e nunca saem de registro */
  --rk-bres-col: clamp(38px, 9%, 66px);
  --rk-bres-calha: clamp(16px, 3.5%, 32px);
  background: var(--rk-color-surface);
  padding: var(--rk-space-section-y) var(--rk-space-gutter);
}

/* 760px e a medida da coluna do artigo: o resumo fecha o texto, entao
   nasce da mesma largura que ele, e nao da largura da home */
.rk-bres.rk-bres .rk-bres__caixa {
  max-width: 760px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   O CABECALHO — rotulo a esquerda, filete correndo ate a margem direita.
   O filete faz o titulo comecar de um lugar, em vez de flutuar no meio.
   --------------------------------------------------------------------- */
.rk-bres.rk-bres .rk-bres__cab {
  display: flex;
  align-items: center;
  gap: var(--rk-space-3);
  margin: 0 0 var(--rk-space-3);
}
.rk-bres.rk-bres .rk-bres__chapeu {
  flex: 0 0 auto;
  font-family: var(--rk-font-body);
  font-size: var(--rk-font-size-eyebrow);
  font-weight: var(--rk-font-body-weight-forte);
  letter-spacing: var(--rk-tracking-eyebrow, 0.16em);
  text-transform: uppercase;
  color: var(--rk-color-accent);
}
.rk-bres.rk-bres .rk-bres__risco {
  flex: 1 1 auto;
  height: var(--rk-hairline, 1px);
  background: var(--rk-color-accent-soft);
}
.rk-bres.rk-bres .rk-bres__titulo {
  margin: 0;
  font-family: var(--rk-font-heading);
  font-weight: var(--rk-font-heading-weight);
  font-size: clamp(1.625em, 1.25em + 1.4vw, 2.25em);
  line-height: 1.12;
  color: var(--rk-color-heading);
}
.rk-bres.rk-bres .rk-bres__apoio {
  margin: var(--rk-space-3) 0 0;
  max-width: 54ch;
  font-family: var(--rk-font-body);
  font-size: var(--rk-font-size-lead);
  line-height: var(--rk-line-body);
  color: var(--rk-color-muted);
}

/* ---------------------------------------------------------------------
   A FICHA
   --------------------------------------------------------------------- */
.rk-bres.rk-bres .rk-bres__lista {
  margin: var(--rk-space-5) 0 0;
  padding: 0;
  list-style: none;
  /* 2px so na aresta de cima: e ela que abre a ficha e faz a ancora. Os
     filetes de dentro ficam em 1px, senao a lista vira uma gaiola */
  border-top: 2px solid var(--rk-color-accent-soft);
}
.rk-bres.rk-bres .rk-bres__item {
  display: grid;
  grid-template-columns: var(--rk-bres-col) 1fr;
  border-bottom: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  transition:
    opacity 420ms var(--rk-motion-ease),
    transform 420ms var(--rk-motion-ease),
    background-color 200ms var(--rk-motion-ease);
}

/* A linha responde ao mouse mesmo sem ser clicavel, e de proposito: numa
   ficha de linhas longas e o que mantem o olho na linha certa ao ir do
   numeral ao texto. E o mesmo servico do fundo alternado de uma tabela. */
.rk-bres.rk-bres .rk-bres__item:hover { background-color: var(--rk-color-surface-alt); }
.rk-bres.rk-bres .rk-bres__num {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(var(--rk-space-4) + 3px) clamp(10px, 2%, 18px) var(--rk-space-4) 0;
  border-right: var(--rk-hairline, 1px) solid var(--rk-color-accent-soft);
  font-family: var(--rk-font-heading);
  font-weight: var(--rk-font-heading-weight);
  font-size: 1.75em;
  /* line-height 1 e os 3px a mais no topo alinham a ALTURA DE CAIXA ALTA
     do numeral com a do rotulo: os dois tem corpo e entrelinha diferentes,
     entao padding igual nos dois deixaria o numeral flutuando acima */
  line-height: 1;
  color: var(--rk-color-accent);
}
.rk-bres.rk-bres .rk-bres__texto {
  padding: var(--rk-space-4) 0 var(--rk-space-4) var(--rk-bres-calha);
  min-width: 0;
}
.rk-bres.rk-bres .rk-bres__rotulo {
  margin: 0 0 6px;
  font-family: var(--rk-font-heading);
  font-weight: var(--rk-font-heading-weight);
  font-size: 1.25em;
  line-height: 1.25;
  color: var(--rk-color-heading);
}
.rk-bres.rk-bres .rk-bres__linha {
  margin: 0;
  /* MEDIDO na foto, nao chutado: 62ch dava linha de 83 caracteres, porque
     "ch" e a largura do ZERO e o zero e mais largo que a letra media. 52ch
     cai entre 55 e 70 caracteres, que e onde o olho volta sozinho para o
     comeco da linha. Sobra de filete a direita do texto e de proposito: e
     ficha, e ficha tem margem. */
  max-width: 52ch;
  font-family: var(--rk-font-body);
  font-size: 1.0625em;
  line-height: var(--rk-line-body);
  color: var(--rk-color-text);
}

/* O CARIMBO DE "ULTIMA ATUALIZACAO" NAO MORA MAIS AQUI — 09/09/2026.

   Ate hoje a ficha terminava com um rodape que hospedava [rk_updated]. Medido
   no post B, em 1440: o carimbo saia em y=1988, colado sob o ultimo filete
   horizontal e alinhado com a coluna de texto. Duas leituras erradas ao mesmo
   tempo, e o Felipe apontou as duas de uma vez ("se tiver ultima atualizacao
   nesse lugar vai quebrar"):

     1. dentro da moldura da ficha, o carimbo le como SEXTA LINHA da lista —
        a grade tem filete embaixo de cada item, e ele vem logo abaixo de um.
     2. e le como legenda DO RESUMO, quando a data e do ARTIGO. "Resumo
        atualizado em 27 ago" e uma frase que ninguem quis escrever.

   O lugar certo ja existia e estava vazio: .rk-btopo__assinatura, no topo, ao
   lado do autor e da data de publicacao — que e onde quem procura "isto ainda
   vale?" procura. O bloco blog-topo ja tinha o slot desenhado, com filete
   vertical separando, e o CSS ja estava no plugin sob #rk-s-post-hero. Faltava
   so o widget.

   Entao as regras de .rk-bres__rodape sairam inteiras, e nao ficaram
   escondidas com display:none. Slot que "existe mas nao se usa" e armadilha
   para o proximo cliente. Uma informacao, uma casa. */

/* ---------------------------------------------------------------------
   O MOVIMENTO
   A ficha se escreve linha a linha quando entra na tela. O atraso e por
   nth-child, e nao por variavel escrita pelo script: sao cinco linhas no
   maximo, e cinco regras de CSS custam menos que um laco em JavaScript.
   --------------------------------------------------------------------- */
.rk-bres.rk-bres--armado .rk-bres__item {
  opacity: 0;
  transform: translateY(10px);
}
.rk-bres.rk-bres--armado .rk-bres__item.rk-aceso {
  opacity: 1;
  transform: none;
}

/* o atraso e da entrada, e SO dela: a terceira medida da lista zera o
   atraso do fundo, senao passar o mouse na quinta linha esperaria 280ms
   para a linha responder */
.rk-bres.rk-bres--armado .rk-bres__item:nth-child(2) { transition-delay: 70ms, 70ms, 0s; }
.rk-bres.rk-bres--armado .rk-bres__item:nth-child(3) { transition-delay: 140ms, 140ms, 0s; }
.rk-bres.rk-bres--armado .rk-bres__item:nth-child(4) { transition-delay: 210ms, 210ms, 0s; }
.rk-bres.rk-bres--armado .rk-bres__item:nth-child(5) { transition-delay: 280ms, 280ms, 0s; }

@media (max-width: 640px) {
  /* os 2px repetem, em corpo menor, o mesmo acerto optico do numeral grande */
.rk-bres.rk-bres .rk-bres__num { padding-top: calc(var(--rk-space-3) + 2px); padding-bottom: var(--rk-space-3); font-size: 1.375em; }
.rk-bres.rk-bres .rk-bres__texto { padding-top: var(--rk-space-3); padding-bottom: var(--rk-space-3); }
.rk-bres.rk-bres .rk-bres__apoio { font-size: 1em; }
}

@media (prefers-reduced-motion: reduce) {
.rk-bres.rk-bres .rk-bres__item { transition: none; }
}

/* No papel nao ha rolagem, entao o observador nunca acende linha nenhuma —
   e um resumo que sai em branco na impressao e o pior fim possivel para a
   pagina de um escritorio. Aqui a ficha volta inteira, sempre. */
@media print {
.rk-bres.rk-bres--armado .rk-bres__item { opacity: 1; transform: none; }
}