/* ==========================================================================
   Renova - Blog (blog.css)

   Carregado so em artigos, listagens, arquivos e pesquisa (ver inc/blog.php).
   Mobile-first, apenas tokens do :root definidos em main.css, zero valores
   soltos de cor ou espacamento.

   Depende de main.css para os componentes partilhados (.rv-card, .rv-btn,
   .rv-badge, .rv-empty, .rv-pagination, .rv-breadcrumb, .rv-prose). Aqui so
   acrescentamos o que e' proprio do conteudo editorial e ajustamos o cartao
   de produto para servir tambem de cartao de artigo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barra de progresso de leitura
   Puramente decorativa: sem JavaScript --rv-progress fica indefinido, o
   scaleX(0) torna a barra invisivel e nada muda no layout. Fica por cima do
   cabecalho (z-index 101 contra os 100 do .rv-header) porque so tem 3px de
   altura e por baixo ficaria escondida.
   -------------------------------------------------------------------------- */
.rv-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:101;
  pointer-events:none;
  background:transparent;
}
.rv-progress__bar{
  display:block;
  width:100%;
  height:100%;
  transform-origin:0 50%;
  transform:scaleX(var(--rv-progress,0));
  background:linear-gradient(90deg,var(--rv-primary),var(--rv-accent));
}

/* --------------------------------------------------------------------------
   2. Chips (categorias, etiquetas, filtros)
   Um so componente para tres usos, com tamanhos diferentes: os filtros sao
   controlos e cumprem o alvo tactil do tema; os rotulos de categoria dentro
   da meta sao etiquetas de leitura e podem ser mais pequenos.
   -------------------------------------------------------------------------- */
.rv-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--rv-s2);
  padding:6px 14px;
  border:1px solid var(--rv-border);
  border-radius:999px;
  background:var(--rv-surface);
  color:var(--rv-muted);
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.rv-chip:hover{
  color:var(--rv-primary);
  border-color:var(--rv-primary);
  text-decoration:none;
}
.rv-chip.is-active{
  background:var(--rv-primary);
  border-color:var(--rv-primary);
  color:#fff;
}
.rv-chip--cat{
  padding:4px 10px;
  background:var(--rv-primary-tint);
  border-color:transparent;
  color:var(--rv-primary-ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.rv-chip--cat:hover{
  background:var(--rv-primary);
  border-color:var(--rv-primary);
  color:#fff;
}

.rv-blog-filters{margin:0 0 var(--rv-s8)}
.rv-blog-filters__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--rv-s2);
}
/* Filtros sao controlos de navegacao: cumprem o alvo tactil do tema. */
.rv-blog-filters .rv-chip{min-height:var(--rv-touch)}

/* --------------------------------------------------------------------------
   3. Meta do artigo (categoria, autor, data, tempo de leitura)
   -------------------------------------------------------------------------- */
.rv-post-meta{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--rv-s2) var(--rv-s4);
  font-size:13px;
  color:var(--rv-muted);
}
.rv-post-meta__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1.3;
}
.rv-post-meta__item .rv-icon{
  flex:0 0 auto;
  color:var(--rv-muted);
}
.rv-post-meta a{color:var(--rv-muted)}
.rv-post-meta a:hover{color:var(--rv-primary)}
/* A data de revisao e' um sinal de frescura: merece contraste, nao mais ruido. */
.rv-post-meta__item--upd{color:var(--rv-primary-ink);font-weight:600}
.rv-post-meta__item--upd .rv-icon{color:var(--rv-primary)}

/* --------------------------------------------------------------------------
   4. Cartao de artigo (.rv-card--post)
   Variante de .rv-card. O cartao de produto e' quadrado e com a imagem
   contida (produto sobre fundo branco); o de artigo e' 16:9 e com a imagem
   cortada, porque fotografia editorial em "contain" deixa faixas brancas.
   -------------------------------------------------------------------------- */
.rv-post-grid{
  display:grid;
  gap:var(--rv-s4);
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .rv-post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rv-s6)}
}
@media (min-width:980px){
  .rv-post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.rv-card--post .rv-card__media{
  aspect-ratio:16/9;
  background:var(--rv-bg-sand);
}
.rv-card--post .rv-card__img{
  object-fit:cover;
  padding:0;
}
/* Substituto quando nao ha imagem destacada: mantem a grelha alinhada em vez
   de deixar cartoes de alturas diferentes lado a lado. */
.rv-card__ph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--rv-primary-tint),var(--rv-bg-sand));
  color:var(--rv-primary);
}
.rv-card--post .rv-card__body{gap:var(--rv-s3);padding:var(--rv-s4)}
.rv-card--post .rv-card__title{
  font-family:var(--rv-font-display);
  font-size:18px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
}
.rv-card--post .rv-card__excerpt{
  margin:0;
  color:var(--rv-muted);
  font-size:14px;
  line-height:1.6;
}
.rv-card--post .rv-card__more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  color:var(--rv-primary);
  font-size:14px;
  font-weight:700;
}
.rv-card--post .rv-card__more .rv-icon{transition:transform .2s var(--rv-ease)}
.rv-card--post:hover .rv-card__more .rv-icon{transform:translateX(3px)}

/* Link esticado: o cartao inteiro e' clicavel mas so ha um ponto de paragem
   no teclado. z-index 1 para ficar acima do corpo sem tapar nada visivel. */
.rv-card--post .rv-card__link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
/* Com :has() o anel de foco desenha-se a volta do cartao inteiro, que e' o
   alvo real do clique. Sem :has() fica o anel normal do link, que continua
   perfeitamente visivel: nunca ficamos sem indicador de foco. */
@supports selector(:has(*)){
  .rv-card--post:has(.rv-card__link:focus-visible){
    outline:3px solid var(--rv-primary);
    outline-offset:2px;
  }
  .rv-card--post .rv-card__link:focus-visible{outline:none}
}

/* Destaque: ocupa a linha toda e vira horizontal quando ha espaco. */
@media (min-width:640px){
  .rv-card--post-destaque{grid-column:1/-1}
}
@media (min-width:860px){
  .rv-card--post-destaque{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    align-items:stretch;
  }
  .rv-card--post-destaque .rv-card__media{height:100%;aspect-ratio:auto;min-height:320px}
  .rv-card--post-destaque .rv-card__body{padding:var(--rv-s8);justify-content:center}
  .rv-card--post-destaque .rv-card__title{font-size:clamp(24px,2.6vw,32px)}
  .rv-card--post-destaque .rv-card__excerpt{font-size:16px}
}

/* Compacto: usado em listas laterais, sem resumo. */
.rv-card--post-compacto .rv-card__title{font-size:16px}

/* --------------------------------------------------------------------------
   5. Listagem do blog e arquivos
   -------------------------------------------------------------------------- */
.rv-blog{padding:var(--rv-s4) 0 var(--rv-s16)}
.rv-blog__head{max-width:70ch;margin:var(--rv-s4) 0 var(--rv-s8)}
.rv-blog__title{margin:0 0 var(--rv-s3)}
.rv-blog__intro{
  margin:0;
  color:var(--rv-muted);
  font-size:clamp(16px,2vw,18px);
  line-height:1.6;
}
.rv-blog__count{
  margin:var(--rv-s3) 0 0;
  color:var(--rv-muted);
  font-size:14px;
  font-weight:600;
}
.rv-blog__foot{margin-top:var(--rv-s12)}

/* --------------------------------------------------------------------------
   6. Artigo: grelha
   Duas colunas em ecra largo. No HTML a coluna de apoio vem antes do corpo,
   o que em telemovel da a ordem certa (indice e partilha primeiro, texto a
   seguir). Em ecra largo colocamo-la explicitamente na coluna 2.

   As linhas sao explicitas em vez de automaticas porque a imagem destacada e'
   opcional: sem posicao fixa, um artigo sem imagem empurrava o corpo para
   baixo da coluna de apoio. Por isso o template marca .rv-article--com-media.
   -------------------------------------------------------------------------- */
.rv-article-page{padding:var(--rv-s4) 0 var(--rv-s16)}

.rv-article{
  /* Medida de leitura unica do artigo. Fica em rem e nao em ch de proposito:
     o lead e o corpo tem corpos de letra diferentes (20px contra 18px) e o ch
     resolve-se sempre no corpo de letra de quem o usa, por isso a mesma
     contagem de caracteres dava larguras diferentes em cada bloco. Era essa a
     origem do desalinhamento: 60ch do lead a 20px davam 672px e o corpo
     enchia os 710px da coluna, com o lead a terminar 38px mais cedo (em
     tablet, sem coluna de apoio, a diferenca chegava aos 60px). Em rem os
     dois medem exactamente o mesmo em qualquer largura de ecra. 44rem sao
     cerca de 70 caracteres a 18px, dentro da janela optima de 65 a 75, e
     mantem o desktop praticamente na largura que ja tinha. */
  --rv-medida-leitura:44rem;

  max-width:1040px;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--rv-s6);
}

.rv-article__head{margin:var(--rv-s4) 0 0}
.rv-article__cat{margin:0 0 var(--rv-s4)}
.rv-article__title{
  margin:0 0 var(--rv-s4);
  font-size:clamp(28px,5vw,44px);
  line-height:1.12;
}
/* O lead vive no cabecalho, que ocupa as duas colunas da grelha, enquanto o
   corpo vive so na primeira. Sem esta medida partilhada o leitor ve a linha de
   introducao a terminar num sitio e os paragrafos seguintes noutro. */
.rv-article__lead{
  margin:0 0 var(--rv-s4);
  max-width:var(--rv-medida-leitura);
  color:var(--rv-muted);
  font-size:clamp(17px,2.2vw,20px);
  line-height:1.6;
}

.rv-article__media{margin:0}
.rv-article__img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--rv-radius-lg);
  background:var(--rv-bg-sand);
}
.rv-article__caption{
  margin:var(--rv-s2) 0 0;
  color:var(--rv-muted);
  font-size:13px;
  text-align:center;
}

@media (min-width:1024px){
  .rv-article{
    grid-template-columns:minmax(0,1fr) 250px;
    column-gap:var(--rv-s12);
    align-items:start;
  }
  .rv-article__head,
  .rv-article__media{grid-column:1/-1}
  .rv-article__body{grid-column:1}
  .rv-article__aside{grid-column:2}

  .rv-article--com-media .rv-article__body,
  .rv-article--com-media .rv-article__aside{grid-row:3}
  .rv-article:not(.rv-article--com-media) .rv-article__body,
  .rv-article:not(.rv-article--com-media) .rv-article__aside{grid-row:2}

  /* A coluna de apoio acompanha a leitura. O top iguala o do resto do tema
     (cabecalho fixo + folga) e o max-height evita que um indice longo fique
     com o fim cortado fora do ecra. */
  .rv-article__aside{
    position:sticky;
    top:88px;
    max-height:calc(100vh - 112px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* --------------------------------------------------------------------------
   7. Artigo: corpo (prosa)
   Substituimos o limite de 72ch herdado de .rv-prose (main.css) pela medida
   partilhada do artigo, para que a introducao e o corpo terminem na mesma
   linha vertical. O ficheiro carrega depois de main.css, logo a mesma
   especificidade basta para ganhar. Aqui tratamos ainda do ritmo vertical e
   dos elementos que a descricao de produto nunca teve (citacoes, tabelas,
   codigo).
   -------------------------------------------------------------------------- */
.rv-article__prose{
  max-width:var(--rv-medida-leitura);
  font-size:17px;
  line-height:1.75;
  color:var(--rv-ink);
}
@media (min-width:768px){
  .rv-article__prose{font-size:18px}
}

.rv-article__prose h2{
  margin-top:var(--rv-s12);
  margin-bottom:var(--rv-s3);
  font-size:clamp(23px,3vw,29px);
  line-height:1.2;
}
.rv-article__prose h3{
  margin-top:var(--rv-s8);
  margin-bottom:var(--rv-s2);
  font-size:clamp(19px,2.4vw,22px);
  line-height:1.25;
}
.rv-article__prose h4{
  margin-top:var(--rv-s6);
  margin-bottom:var(--rv-s2);
  font-size:17px;
}
/* O primeiro titulo nao precisa do afastamento grande: nao ha texto acima. */
.rv-article__prose>h2:first-child,
.rv-article__prose>h3:first-child{margin-top:0}

/* Ancoras do indice nao podem ficar debaixo do cabecalho fixo. A regra geral
   do tema (#main [id]) usa 80/88px e ganha por especificidade ao seletor de
   classe, por isso repetimos aqui com o #main a frente. Mais folga que a
   regra geral: um titulo colado ao cabecalho parece um erro de renderizacao. */
#main .rv-article__prose h2,
#main .rv-article__prose h3,
#main .rv-article__prose h4{scroll-margin-top:88px}
@media (min-width:768px){
  #main .rv-article__prose h2,
  #main .rv-article__prose h3,
  #main .rv-article__prose h4{scroll-margin-top:104px}
}

.rv-article__prose a{
  color:var(--rv-primary-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  text-decoration-color:var(--rv-primary-tint-2);
}
.rv-article__prose a:hover{text-decoration-color:var(--rv-primary)}

.rv-article__prose li+li{margin-top:var(--rv-s2)}
.rv-article__prose li::marker{color:var(--rv-primary)}

.rv-article__prose blockquote{
  margin:var(--rv-s8) 0;
  padding:var(--rv-s4) var(--rv-s6);
  border-left:4px solid var(--rv-accent);
  border-radius:0 var(--rv-radius) var(--rv-radius) 0;
  background:var(--rv-bg-sand);
  font-size:1.03em;
}
.rv-article__prose blockquote p:last-child{margin-bottom:0}
.rv-article__prose blockquote cite{
  display:block;
  margin-top:var(--rv-s2);
  color:var(--rv-muted);
  font-size:14px;
  font-style:normal;
}

.rv-article__prose figure{margin:var(--rv-s8) 0}
.rv-article__prose img{
  border-radius:var(--rv-radius);
  box-shadow:var(--rv-shadow);
}
.rv-article__prose figcaption{
  margin-top:var(--rv-s2);
  color:var(--rv-muted);
  font-size:13px;
  text-align:center;
}

.rv-article__prose hr{
  margin:var(--rv-s12) 0;
  border:0;
  border-top:1px solid var(--rv-border);
}

.rv-article__prose code{
  padding:2px 6px;
  border:1px solid var(--rv-border);
  border-radius:6px;
  background:var(--rv-bg);
  font-size:.9em;
}
.rv-article__prose pre{
  margin:var(--rv-s6) 0;
  padding:var(--rv-s4);
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);
  background:var(--rv-bg);
  overflow-x:auto;
}
.rv-article__prose pre code{border:0;padding:0;background:none}

/* Tabelas largas rolam dentro do proprio bloco em vez de rebentarem a pagina.
   Sao tres origens de markup e todas precisam da mesma caixa: .wp-block-table
   (editor de blocos), .rv-table-scroll (markup manual) e .rv-tabela, que e' o
   que o conversor de Markdown gera nos artigos automaticos. Faltava a ultima,
   e sem caixa a tabela transbordava para fora da coluna de leitura; como o
   body do tema tem overflow-x:hidden, o que sobrava nao rolava, era cortado,
   e as colunas da direita ficavam simplesmente inalcancaveis no telemovel. */
.rv-article__prose .wp-block-table,
.rv-article__prose .rv-table-scroll,
.rv-article__prose .rv-tabela{
  max-width:100%;
  overflow-x:auto;
  /* Sem isto, chegar ao fim do deslize horizontal propaga o gesto a pagina e,
     em iOS e Android, dispara o "voltar atras" do navegador. */
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

/* A moldura fica na caixa e nao na tabela: assim o canto arredondado acompanha
   a area visivel mesmo quando o conteudo esta deslizado a meio. */
.rv-article__prose .rv-tabela{
  margin:var(--rv-s6) 0;
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);
  background:var(--rv-surface);
}

.rv-article__prose table{
  width:100%;
  font-size:15px;
  /* A Hanken Grotesk ja desenha os digitos todos com a mesma largura, mas o
     texto destas tabelas e' quase so numeros a comparar (8 GB contra 16 GB,
     324,90 contra 1449,00) e a comparacao so funciona se as casas alinharem
     na vertical. Deixamos a garantia escrita para o dia em que a letra de
     corpo mudar ou em que a leitura caia na letra de recurso. */
  font-variant-numeric:tabular-nums;
}
.rv-article__prose th,
.rv-article__prose td{
  padding:var(--rv-s3) var(--rv-s4);
  border-bottom:1px solid var(--rv-border);
  text-align:left;
  vertical-align:top;
  /* O minimo vive na celula e nao na tabela de proposito: assim a largura
     minima cresce sozinha com o numero de colunas. Um quadro de tres colunas
     cabe no telemovel, um de seis passa a deslizar em vez de espremer cada
     coluna ate o texto cair uma letra por linha, que era o que acontecia com
     o antigo min-width:min(100%,420px) (em telemovel 100% ganhava sempre e o
     piso de 420px nunca chegava a valer). 7rem no desktop nunca entra em
     accao: seis colunas somam 672px e a coluna de leitura tem mais. */
  min-width:7rem;
  /* break-word e nao break-all: so parte a palavra quando ela sozinha nao cabe
     na celula (referencias tipo i7-11800H ou enderecos), em vez de cortar
     texto corrido a meio de qualquer silaba. */
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}
.rv-article__prose thead th{
  background:var(--rv-bg-sand);
  color:var(--rv-ink);
  font-weight:700;
  /* Linha mais marcada entre cabecalho e dados: e' o que separa o que se le
     uma vez do que se le linha a linha. */
  border-bottom:2px solid var(--rv-border-strong);
  /* O nowrap anterior obrigava a tabela a ser tao larga como a soma dos
     cabecalhos numa linha so; com seis colunas isso forcava deslize ate no
     desktop. Os cabecalhos podem quebrar como qualquer outra celula, e um
     cabecalho hifenizado le-se pior que um cabecalho em duas linhas. */
  white-space:normal;
  hyphens:none;
}
/* Sem linha solta no fundo a duplicar a moldura da caixa. */
.rv-article__prose tbody tr:last-child th,
.rv-article__prose tbody tr:last-child td{border-bottom:0}

/* Zebra em cima do branco da caixa: risca o olho ao longo da linha quando a
   tabela e' larga e obriga a deslizar. Fica no tom de fundo do tema para nao
   competir com a areia do cabecalho. */
.rv-article__prose tbody tr:nth-child(even){background:var(--rv-bg)}

/* A primeira coluna e' quase sempre o rotulo da linha (o conversor escreve-a
   em negrito) e e' por ela que o leitor se orienta enquanto desliza. Um pouco
   mais de folga que as restantes, sem chegar a forcar deslize no desktop. */
.rv-article__prose tbody th:first-child,
.rv-article__prose tbody td:first-child,
.rv-article__prose thead th:first-child{min-width:8rem}

.rv-article__pages{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--rv-s2);
  margin-top:var(--rv-s8);
  font-size:14px;
  color:var(--rv-muted);
}

/* Etiquetas no fim do corpo. */
.rv-article__tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--rv-s3);
  margin-top:var(--rv-s8);
  padding-top:var(--rv-s6);
  border-top:1px solid var(--rv-border);
}
.rv-article__tags-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--rv-muted);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.rv-article__tags ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--rv-s2);
}

/* --------------------------------------------------------------------------
   8. Indice (TOC)
   -------------------------------------------------------------------------- */
.rv-toc{
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);
  background:var(--rv-surface);
  box-shadow:var(--rv-shadow);
}
.rv-toc__head{
  display:flex;
  align-items:center;
  gap:var(--rv-s2);
  min-height:var(--rv-touch);
  padding:var(--rv-s2) var(--rv-s4);
  font-family:var(--rv-font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--rv-ink);
  cursor:pointer;
  list-style:none; /* remove o triangulo em Firefox */
}
.rv-toc__head::-webkit-details-marker{display:none} /* e em WebKit */
.rv-toc__head:focus-visible{outline-offset:-3px}
.rv-toc__head .rv-icon--list{color:var(--rv-primary)}
.rv-toc__head .rv-icon--chevron{
  margin-left:auto;
  color:var(--rv-muted);
  transition:transform .2s var(--rv-ease);
}
.rv-toc[open] .rv-toc__head .rv-icon--chevron{transform:rotate(180deg)}

.rv-toc__list{
  list-style:none;
  margin:0;
  padding:0 var(--rv-s3) var(--rv-s3);
  display:flex;
  flex-direction:column;
}
.rv-toc__item a{
  display:block;
  padding:8px 10px;
  border-left:2px solid var(--rv-border);
  border-radius:0 6px 6px 0;
  color:var(--rv-muted);
  font-size:14px;
  line-height:1.4;
  text-decoration:none;
}
.rv-toc__item a:hover{
  background:var(--rv-bg);
  border-left-color:var(--rv-primary);
  color:var(--rv-primary);
  text-decoration:none;
}
.rv-toc__item--n3 a{padding-left:22px;font-size:13px}
.rv-toc__item a.is-current{
  background:var(--rv-primary-tint);
  border-left-color:var(--rv-primary);
  color:var(--rv-primary-ink);
  font-weight:700;
}

/* --------------------------------------------------------------------------
   9. Partilha
   -------------------------------------------------------------------------- */
.rv-share{margin-top:var(--rv-s6)}
.rv-share__label{
  display:flex;
  align-items:center;
  gap:var(--rv-s2);
  margin:0 0 var(--rv-s3);
  color:var(--rv-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.rv-share__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--rv-s2);
}
.rv-share__list>li{flex:1 1 auto}
.rv-share__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--rv-s2);
  width:100%;
  min-height:44px;
  padding:8px 14px;
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius-sm);
  background:var(--rv-surface);
  color:var(--rv-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.rv-share__btn:hover{
  border-color:var(--rv-primary);
  color:var(--rv-primary);
  background:var(--rv-bg);
  text-decoration:none;
}
.rv-share__status{
  margin:var(--rv-s2) 0 0;
  min-height:1.2em;
  color:var(--rv-primary-ink);
  font-size:13px;
}
@media (min-width:1024px){
  /* Na coluna estreita empilham, para nao ficarem rotulos partidos a meio. */
  .rv-share__list{flex-direction:column}
  .rv-share__list>li{flex:0 0 auto}
}

/* --------------------------------------------------------------------------
   10. Caixa de autor
   -------------------------------------------------------------------------- */
.rv-author{
  display:flex;
  flex-wrap:wrap;
  gap:var(--rv-s4);
  margin-top:var(--rv-s8);
  padding:var(--rv-s6);
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);
  background:var(--rv-bg-sand);
}
.rv-author__media{flex:0 0 auto}
.rv-author__avatar{
  width:64px;
  height:64px;
  border-radius:999px;
  border:2px solid var(--rv-surface);
  box-shadow:var(--rv-shadow);
}
.rv-author__body{flex:1 1 220px;min-width:0}
.rv-author__eyebrow{
  margin:0 0 2px;
  color:var(--rv-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.rv-author__name{
  margin:0 0 var(--rv-s2);
  font-family:var(--rv-font-display);
  font-size:18px;
  font-weight:700;
}
.rv-author__bio{
  margin:0 0 var(--rv-s3);
  color:var(--rv-muted);
  font-size:15px;
  line-height:1.6;
}
.rv-author__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--rv-primary);
  font-size:14px;
  font-weight:700;
}

/* --------------------------------------------------------------------------
   11. Blocos abaixo do artigo
   -------------------------------------------------------------------------- */
.rv-article-blocks{
  display:flex;
  flex-direction:column;
  gap:var(--rv-s12);
  margin-top:var(--rv-s12);
}

/* Ponte para a loja. Fica claro que e' catalogo e nao mais artigo. */
.rv-post-shop{
  padding-top:var(--rv-s8);
  border-top:1px solid var(--rv-border);
}
.rv-post-shop__head{max-width:60ch;margin:0 0 var(--rv-s6)}
.rv-post-shop__title{margin:0 0 var(--rv-s2);font-size:clamp(21px,3vw,28px)}
.rv-post-shop__text{margin:0;color:var(--rv-muted)}

/* Fecho comercial: o unico bloco com fundo cheio da pagina, para nao competir
   com o proprio artigo mas ser impossivel de falhar no fim da leitura. */
.rv-post-cta{
  border-radius:var(--rv-radius-lg);
  color:#fff;
  /* Mesma tecnica do hero: o grao entra como camada com blend-mode em vez de
     ser pintado por cima. Aqui e' soft-light e nao multiply porque o fundo ja
     e' escuro, e multiply sobre verde profundo transformava a textura em cinza. */
  background-color:var(--rv-primary);
  background-image:
    var(--rv-noise),
    linear-gradient(145deg, var(--rv-primary) 0%, var(--rv-primary-ink) 100%);
  background-size:170px, auto;
  background-repeat:repeat, no-repeat;
  background-blend-mode:soft-light, normal;
}
.rv-post-cta__inner{
  max-width:56ch;
  margin:0 auto;
  padding:var(--rv-s12) var(--rv-s6);
  text-align:center;
}
.rv-post-cta__eyebrow{
  margin:0 0 var(--rv-s2);
  color:var(--rv-primary-tint);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rv-post-cta__title{margin:0 0 var(--rv-s3);color:#fff;font-size:clamp(23px,3.4vw,32px)}
.rv-post-cta__text{margin:0 0 var(--rv-s6);color:var(--rv-primary-tint);font-size:16px;line-height:1.6}
.rv-post-cta__btn{min-width:min(100%,280px)}
.rv-post-cta .rv-trust-bar{
  margin-top:var(--rv-s8);
  padding-top:var(--rv-s6);
  border-top:1px solid rgba(255,255,255,.18);
  grid-template-columns:1fr;
  justify-items:center;
}
.rv-post-cta .rv-trust-item{color:#fff;font-size:14px}
.rv-post-cta .rv-trust-item .rv-icon{color:var(--rv-accent)}
@media (min-width:640px){
  .rv-post-cta .rv-trust-bar{grid-template-columns:repeat(3,1fr)}
}

/* Navegacao anterior/seguinte. */
.rv-post-nav{
  display:grid;
  gap:var(--rv-s3);
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .rv-post-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Com so um vizinho, o cartao alinha ao lado certo em vez de esticar. */
  .rv-post-nav__item--next:only-child{grid-column:2}
}
.rv-post-nav__item{
  display:flex;
  flex-direction:column;
  gap:var(--rv-s2);
  padding:var(--rv-s4) var(--rv-s6);
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);
  background:var(--rv-surface);
  text-decoration:none;
  transition:border-color .15s,box-shadow .15s;
}
.rv-post-nav__item:hover{
  border-color:var(--rv-primary);
  box-shadow:var(--rv-shadow);
  text-decoration:none;
}
.rv-post-nav__item--next{text-align:right}
.rv-post-nav__dir{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--rv-muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.rv-post-nav__item--next .rv-post-nav__dir{justify-content:flex-end}
.rv-post-nav__title{
  font-family:var(--rv-font-display);
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  color:var(--rv-ink);
}

.rv-related-posts__title{margin:0 0 var(--rv-s6);font-size:clamp(21px,3vw,28px)}

/* --------------------------------------------------------------------------
   12. Subscricao
   -------------------------------------------------------------------------- */
.rv-subscribe{
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius-lg);
  background:var(--rv-bg-sand);
}
.rv-subscribe__inner{
  max-width:60ch;
  margin:0 auto;
  padding:var(--rv-s8) var(--rv-s6);
}
.rv-subscribe__title{margin:0 0 var(--rv-s2);font-size:clamp(20px,2.8vw,26px)}
.rv-subscribe__text{margin:0 0 var(--rv-s6);color:var(--rv-muted);font-size:15px;line-height:1.6}
.rv-subscribe__form{margin:0}
.rv-subscribe__row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--rv-s2);
  margin-bottom:var(--rv-s3);
}
.rv-subscribe__input{
  flex:1 1 220px;
  min-height:var(--rv-touch);
  padding:0 14px;
  border:1px solid var(--rv-border-strong);
  border-radius:var(--rv-radius-sm);
  background:var(--rv-surface);
  color:var(--rv-ink);
  font-family:inherit;
  font-size:16px; /* 16px evita o zoom automatico do Safari em iOS */
}
.rv-subscribe__input:focus{
  border-color:var(--rv-primary);
  outline:none;
  box-shadow:0 0 0 3px var(--rv-primary-tint);
}
.rv-subscribe__row .rv-btn{flex:0 0 auto}
.rv-subscribe__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--rv-muted);
  font-size:13px;
  line-height:1.5;
  cursor:pointer;
}
.rv-subscribe__consent input{
  width:20px;
  height:20px;
  margin-top:1px;
  flex:0 0 auto;
  accent-color:var(--rv-primary);
}
.rv-subscribe__alert{
  display:flex;
  align-items:center;
  gap:var(--rv-s2);
  margin:0 0 var(--rv-s4);
  padding:10px 14px;
  border-radius:var(--rv-radius-sm);
  font-size:14px;
  font-weight:600;
}
.rv-subscribe__alert--ok{background:var(--rv-primary-tint);color:var(--rv-primary-ink)}
.rv-subscribe__alert--erro{background:var(--rv-accent-tint);color:var(--rv-accent-ink)}
/* Honeypot: fora do ecra, nunca display:none (ha robots que o detectam). */
.rv-subscribe__hp{
  position:absolute !important;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   13. Pesquisa
   -------------------------------------------------------------------------- */
.rv-search-page__termo{color:var(--rv-primary)}
.rv-search-page__form{
  display:flex;
  flex-wrap:wrap;
  gap:var(--rv-s2);
  margin-top:var(--rv-s6);
  max-width:560px;
}
.rv-search-page__form input[type="search"]{
  flex:1 1 220px;
  min-height:var(--rv-touch);
  padding:0 14px;
  border:1px solid var(--rv-border-strong);
  border-radius:var(--rv-radius-sm);
  background:var(--rv-surface);
  color:var(--rv-ink);
  font-family:inherit;
  font-size:16px;
}
.rv-search-page__form input[type="search"]:focus{
  border-color:var(--rv-primary);
  outline:none;
  box-shadow:0 0 0 3px var(--rv-primary-tint);
}

.rv-results{margin-bottom:var(--rv-s12)}
.rv-results__title{
  display:flex;
  align-items:center;
  gap:var(--rv-s2);
  margin:0 0 var(--rv-s6);
  padding-bottom:var(--rv-s3);
  border-bottom:1px solid var(--rv-border);
  font-size:clamp(19px,2.6vw,24px);
}
.rv-results__title .rv-icon{color:var(--rv-primary)}
.rv-results__rows{display:flex;flex-direction:column;gap:var(--rv-s4)}

.rv-result{
  padding:var(--rv-s4);
  border:1px solid var(--rv-border);
  border-radius:var(--rv-radius);
  background:var(--rv-surface);
}
.rv-result__title{margin:0 0 var(--rv-s2);font-size:17px}
.rv-result__text{margin:0 0 var(--rv-s2);color:var(--rv-muted);font-size:14px;line-height:1.6}
.rv-result__url{margin:0;color:var(--rv-primary);font-size:13px;word-break:break-all}

/* --------------------------------------------------------------------------
   14. Pagina estatica (paginas legais e informativas)
   -------------------------------------------------------------------------- */
.rv-page{padding:var(--rv-s4) 0 var(--rv-s16)}
.rv-page__article{max-width:78ch;margin:0 auto}
.rv-page__head{margin:var(--rv-s4) 0 var(--rv-s8)}
.rv-page__title{margin:0 0 var(--rv-s3)}
.rv-page__lead{
  margin:0;
  color:var(--rv-muted);
  font-size:clamp(16px,2vw,19px);
  line-height:1.6;
}
.rv-page__media{margin:0 0 var(--rv-s8)}
.rv-page__img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--rv-radius-lg);
}
.rv-page__prose{font-size:17px;line-height:1.7}
.rv-page__prose h2{margin-top:var(--rv-s12);font-size:clamp(21px,2.8vw,26px)}
.rv-page__prose h3{margin-top:var(--rv-s8);font-size:19px}
.rv-page__prose a{
  color:var(--rv-primary-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.rv-page__prose li+li{margin-top:var(--rv-s2)}
#main .rv-page__prose h2,
#main .rv-page__prose h3{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   15. Impressao
   Quem imprime um guia quer o texto, nao a interface. Poupa tinta e evita
   paginas com barras e botoes que nao fazem nada em papel.
   -------------------------------------------------------------------------- */
@media print{
  .rv-progress,
  .rv-toc,
  .rv-share,
  .rv-post-cta,
  .rv-subscribe,
  .rv-post-nav,
  .rv-post-shop,
  .rv-related-posts,
  .rv-blog-filters{display:none !important}
  .rv-article{display:block;max-width:none;padding:0}
  .rv-article__prose{max-width:none;font-size:12pt}
  .rv-article__prose a::after{content:" (" attr(href) ")";font-size:10pt;word-break:break-all}

  /* Em papel nao ha deslize: a caixa das tabelas tem de largar o conteudo,
     senao o que estava fora do ecra sai cortado da folha. Sem piso de largura
     nas celulas, que so existe para dar leitura em telemovel. */
  .rv-article__prose .wp-block-table,
  .rv-article__prose .rv-table-scroll,
  .rv-article__prose .rv-tabela{overflow:visible;border:0}
  .rv-article__prose th,
  .rv-article__prose td{min-width:0}
  .rv-article__prose tr{break-inside:avoid}
  .rv-article__prose thead{display:table-header-group}
}

/* Foco visivel na caixa da tabela.
   A caixa passou a ser focavel por teclado (ver rv_tabelas_focaveis em
   inc/auto-link.php). Um elemento focavel sem indicacao visual de foco e' pior
   do que nao ser focavel: quem navega por teclado deixa de saber onde esta.
   :focus-visible e nao :focus, para o anel nao aparecer a quem clica com o rato. */
.rv-tabela:focus-visible{
  outline:2px solid var(--rv-primary);
  outline-offset:2px;
}
.rv-tabela:focus:not(:focus-visible){ outline:none }