/* ==========================================================================
   INAEC · BLOCOS DE DADOS E DIAGRAMAS
   Componentes para páginas de conteúdo: comparativo de modelos, painel de
   números e a régua dos 7 Rs.

   Os diagramas do portal anterior eram PNGs de 2000px desenhados na
   identidade antiga. Aqui são HTML e CSS: acompanham a marca INAEC, são
   responsivos, têm texto real (legível por busca e leitor de tela) e podem
   ser editados no builder sem voltar ao Illustrator.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Cada bloco vira um Container com widgets de Texto e Ícone. O comparativo
   é um Container flex row com dois filhos; a régua dos Rs, um Grid.
   ========================================================================== */

/* --- Comparativo de modelos ---------------------------------------------- */
.comparativo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.modelo {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.modelo--linear   { background-color: var(--color-surface); }
.modelo--circular {
  background-color: var(--inaec-verde-profundo);
  border-color: transparent;
}

.modelo__rotulo {
  display: inline-flex;
  align-self: start;
  padding: 0.2rem 0.6rem;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.6;
  border-radius: var(--radius-pill);
}
.modelo--linear .modelo__rotulo {
  color: var(--color-text-muted);
  background-color: color-mix(in srgb, var(--inaec-grafite) 8%, transparent);
}
.modelo--circular .modelo__rotulo {
  color: var(--color-on-accent);
  background-color: var(--color-accent);
}

.modelo__titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}
.modelo--linear   .modelo__titulo { color: var(--color-heading); }
.modelo--circular .modelo__titulo { color: var(--inaec-branco); }

.modelo__texto { margin: 0; font-size: var(--fs-legend); line-height: var(--lh-body); }
.modelo--linear   .modelo__texto { color: var(--color-text-muted); }
.modelo--circular .modelo__texto { color: color-mix(in srgb, var(--inaec-branco) 78%, transparent); }

/* Fluxo de etapas. O linear termina em beco; o circular fecha o laço — a
   diferença entre os dois modelos aparece na própria forma da lista. */
/* Sem `gap`: os itens se encostam e o traço conector fica contínuo. O
   respiro vem do padding interno de cada item. */
.fluxo { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fluxo > li {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.625rem;
  align-items: center;
  padding-block: 0.28rem;
  font-size: var(--fs-legend);
  line-height: 1.4;
}
.fluxo > li::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  margin-inline-start: 6px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
/* Traço ligando os pontos. A altura para na borda inferior do próprio item:
   a versão anterior somava 1.15em ao topo e 100% à altura, e o traço vazava
   0.6em para fora da caixa. */
.fluxo > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: calc(50% + 7px);
  inset-block-end: 0;
  inline-size: 2px;
  background-color: currentColor;
  opacity: 0.35;
}

.modelo--linear   .fluxo { color: var(--color-text); }
.modelo--linear   .fluxo > li:last-child { color: var(--inaec-cinza-tecnico); font-weight: var(--fw-semibold); }
.modelo--circular .fluxo { color: color-mix(in srgb, var(--inaec-branco) 88%, transparent); }

/* O último passo do circular volta ao primeiro: a seta indica o retorno */
.fluxo--fechado > li:last-child::before {
  border-color: var(--inaec-amarelo);
  background-color: var(--inaec-amarelo);
}
.fluxo__retorno {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.25rem;
  padding-inline-start: 32px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--inaec-amarelo);
}
.fluxo__retorno svg {
  inline-size: 16px; block-size: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Painel de números --------------------------------------------------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2xs);
}
.numero {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: var(--space-sm);
  margin: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.numero__valor {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-heading);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--inaec-verde);
}
.numero__rotulo {
  font-size: var(--fs-legend);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}
.numero__fonte {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* --- Destaque numérico único --------------------------------------------- */
.destaque-numero {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.destaque-numero::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background-image: var(--inaec-grad-ciclo);
}
.destaque-numero__valor {
  margin: 0;
  font-family: var(--font-display);
  /* Teto igual ao do h1: um dado em destaque pode ser o maior elemento do
     bloco, mas não da página — acima do título ele inverte a hierarquia e a
     leitura começa pelo número, não pelo assunto. */
  font-size: clamp(2rem, 1.7rem + 1.3vw, 2.375rem);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--inaec-verde);
}
.destaque-numero p { margin: 0; max-inline-size: 52ch; }
.destaque-numero cite {
  font-size: var(--fs-legend);
  font-style: normal;
  color: var(--color-text-muted);
}

/* --- Os 7 Rs ------------------------------------------------------------- */
.erres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2xs);
  counter-reset: erre;
}
.erre {
  counter-increment: erre;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.erre__marca {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-sm);
  background-color: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  color: var(--inaec-verde);
}
.erre__marca svg {
  inline-size: 18px; block-size: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.erre__nome {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-heading);
}
.erre__texto {
  font-size: var(--fs-legend);
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .comparativo { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .erres { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .numeros, .erres { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DIRETÓRIO DE PESSOAS
   Diferente dos cards da Governança de propósito: lá são sete perfis com
   biografia completa; aqui são treze, e o que importa é varrer a lista e
   entrar no perfil certo. Card compacto, clicável inteiro.
   ========================================================================== */
.diretorio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-sm);
}

.perfil-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 260ms var(--anim-curva, ease),
              box-shadow 260ms var(--anim-curva, ease),
              border-color 260ms var(--anim-curva, ease);
}
.perfil-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}

@media (hover: hover) {
  .perfil-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}
}
.perfil-card:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.perfil-card__nome {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-heading);
}
.perfil-card__nome a { color: inherit; text-decoration: none; }
/* O link cobre o card inteiro — o `position: relative` do card o ancora. */
.perfil-card__nome a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.perfil-card__nome a:focus-visible { outline: none; }

.perfil-card__cargo {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.perfil-card__resumo {
  margin: 0;
  font-size: var(--fs-legend);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.perfil-card__artigos {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inaec-verde);
}

/* ==========================================================================
   LIVROS
   ========================================================================== */
/*
 * A coluna da capa só existe quando há capa.
 *
 * A grade era `220px 1fr` fixa. Sem capa cadastrada — o caso dos dois livros
 * do acervo, que não tinham imagem no portal anterior — o navegador reservava
 * os 220px do mesmo jeito e o texto era espremido numa coluna estreita, com
 * a ficha técnica quebrando linha a cada duas palavras.
 *
 * `:has()` resolve no CSS o que seria uma classe condicional no HTML.
 */
.livro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.livro__capa {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--inaec-nevoa);
  align-self: start;
}
.livro__capa img { inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

.livro:has(.livro__capa) { grid-template-columns: 220px 1fr; }

@media (max-width: 640px) {
  .livro:has(.livro__capa) { grid-template-columns: 1fr; }
  .livro__capa { max-inline-size: 11rem; }
}

.livro__corpo { display: grid; align-content: start; gap: var(--space-xs); }
.livro__titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.livro__texto { margin: 0; font-size: var(--fs-legend); line-height: var(--lh-body); color: var(--color-text-muted); }

/* Ficha técnica: pares rótulo/valor legíveis de relance */
.livro__ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem var(--space-sm);
  margin: 0;
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-legend);
}
.livro__ficha dt { color: var(--color-text-muted); }
.livro__ficha dd { margin: 0; color: var(--color-text); }

.livro__compra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.livro__preco {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-heading);
  line-height: 1.2;
  color: var(--inaec-verde);
}
.livro__parcela { font-size: var(--fs-legend); color: var(--color-text-muted); }
.livro__aviso { margin: 0; font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--color-text-muted); }

/* ==========================================================================
   PAPERS — lista densa, sem capa: o que importa é o título e o acesso
   ========================================================================== */
.papers { display: grid; gap: var(--space-2xs); }
/*
 * O cartão do paper era `1fr auto`, feito para título e nada mais.
 *
 * Com autoria completa, periódico, ano e resumo — que é o que um acervo
 * acadêmico precisa mostrar para ser consultável —, a segunda coluna não tinha
 * função e o resumo caía fora do fluxo. Uma coluna só, com os três níveis
 * empilhados, é o que a informação pede.
 */
.paper {
  position: relative;
  display: grid;
  gap: 0.5rem;
  align-items: start;
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.paper:focus-within { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }

@media (hover: hover) {
  .paper:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
}
.paper:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* h2 por hierarquia de documento, tamanho de cartão por desenho:
   promover a marcação não pode aumentar a letra na página. */
.paper__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-heading);
}
.paper__titulo a { color: inherit; text-decoration: none; }
.paper__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.paper__titulo a:focus-visible { outline: none; }
.paper__meta {
  font-size: var(--fs-legend);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* --- Ficha do paper ------------------------------------------------------
   Autoria, veículo e ano em linhas rotuladas. Concatenados por pontos numa
   linha só, eles viravam quinze palavras cinzentas em que nada se distingue
   — e são justamente os campos que permitem citar e localizar a obra. */
.paper__topo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.paper__formato {
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--inaec-verde);
  background-color: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}
.paper__ano {
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.paper__subtitulo {
  margin: 0;
  font-size: var(--fs-legend);
  line-height: 1.45;
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}
.paper__ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem var(--space-sm);
  margin: 0.2rem 0 0;
  padding-block-start: 0.65rem;
  border-block-start: 1px solid var(--color-border);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.paper__ficha dt {
  color: var(--color-text-muted);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-block-start: 0.15rem;
}
.paper__ficha dd { margin: 0; color: var(--color-text); }

/* Pista visual, não segundo link: o título já cobre o cartão com `::after`. */
.paper__acao {
  position: relative;
  z-index: 1;
  text-decoration: none;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.2rem;
  font-size: var(--fs-legend);
  font-weight: var(--fw-medium);
  color: var(--inaec-verde);
}
.paper__acao::after { content: "→"; transition: transform 260ms var(--anim-curva); }
@media (hover: hover) {
  .paper:hover .paper__acao::after { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .paper__acao::after { transition: none; }
  @media (hover: hover) {
  .paper:hover .paper__acao::after { transform: none; }
}
}

@media (max-width: 560px) {
  .paper__ficha { grid-template-columns: 1fr; gap: 0.1rem; }
  .paper__ficha dd { margin-block-end: 0.4rem; }
}

.paper__resumo {
  margin: 0;
  font-size: var(--fs-legend);
  line-height: var(--lh-body);
  color: var(--color-text);
  max-inline-size: 78ch;
}

@media (hover: hover) {
  .paper__titulo a:hover { color: var(--inaec-verde); }
}

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
.formulario { display: grid; gap: var(--space-sm); }
.formulario__linha { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.campo { display: grid; gap: 0.35rem; min-inline-size: 0; }
.campo > label {
  font-size: var(--fs-legend);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.campo > label .obrigatorio { color: var(--inaec-verde); }
.campo input,
.campo select,
.campo textarea {
  inline-size: 100%;
  padding: 0.75rem 1rem;
  min-block-size: 48px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.campo textarea { min-block-size: 120px; resize: vertical; }
@media (hover: hover) {
  .campo input:hover,
  .campo select:hover,
  .campo textarea:hover { border-color: var(--color-border-strong); }
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  border-color: var(--inaec-verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inaec-verde) 16%, transparent);
  outline: none;
}
.campo__dica { font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--color-text-muted); }

.campo--aceite {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  padding: var(--space-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.campo--aceite input { inline-size: 20px; block-size: 20px; min-block-size: 0; margin-block-start: 2px; }
.campo--aceite label { font-weight: var(--fw-regular); font-size: var(--fs-legend); line-height: var(--lh-body); color: var(--color-text-muted); }

/* Canais diretos, ao lado do formulário */
.canais { display: grid; gap: var(--space-xs); align-content: start; }
.canal {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.canal dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.canal dd { margin: 0; font-size: var(--fs-legend); line-height: 1.5; color: var(--color-text); }
.canal a { color: var(--inaec-verde); }

.contato__layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); align-items: start; }

@media (max-width: 900px) {
  .livro { grid-template-columns: 150px 1fr; gap: var(--space-sm); }
  .contato__layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .livro { grid-template-columns: 1fr; }
  .livro__capa { max-inline-size: 180px; }
  .formulario__linha { grid-template-columns: 1fr; }
  .paper { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ==========================================================================
   ÍNDICE DE ARTIGOS — Ideias Circulares
   Sem capas: as imagens do acervo antigo foram descartadas e as novas ainda
   não existem. Em vez de preencher com placeholder, o índice se sustenta na
   tipografia — data, categoria, título e resumo. É o formato de revista, e
   funciona melhor que uma grade de cards vazios.
   ========================================================================== */

/* Filtros por categoria */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-border);
}
.filtro {
  padding: 0.4rem 0.9rem;
  font-family: inherit;
  font-size: var(--fs-legend);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
@media (hover: hover) {
  .filtro:hover { color: var(--inaec-verde); border-color: var(--color-border-strong); }
}
.filtro[aria-pressed="true"] {
  color: var(--color-on-accent);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: var(--fw-semibold);
}
.filtro__conta { opacity: 0.6; margin-inline-start: 0.35rem; font-variant-numeric: tabular-nums; }

/* Artigo em destaque — o mais recente ganha peso editorial */
.destaque-artigo {
  position: relative;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.destaque-artigo::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background-image: var(--inaec-grad-ciclo);
}
.destaque-artigo__titulo {
  margin: 0;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.destaque-artigo__titulo a { color: inherit; text-decoration: none; }
.destaque-artigo__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.destaque-artigo__titulo a:focus-visible { outline: none; }
.destaque-artigo:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.destaque-artigo p { margin: 0; font-size: var(--fs-body); color: var(--color-text-muted); max-inline-size: 68ch; }

/* Lista
   -------------------------------------------------------------------------
   O item era uma linha: data, título, subtítulo. Faltava o que faz alguém
   decidir abrir um texto — a imagem, quem assina e um convite claro. Virou
   ficha: capa à esquerda, assinatura com retrato e chamada ao pé.

   Continua sendo LISTA, e não grade de cartões grandes: são 24 artigos, e a
   grade transformaria o índice numa rolagem sem fim. A capa entra pequena, no
   tamanho de referência visual, não de ilustração. */
.indice-artigos { display: grid; gap: 0; }
.artigo-item {
  position: relative;
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-sm) var(--space-md);
  align-items: start;
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--color-border);
  transition: background-color 220ms ease;
}

.artigo-item__capa {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--inaec-nevoa);
  aspect-ratio: 16 / 9;
}
.artigo-item__capa img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform 620ms var(--anim-curva);
}
@media (hover: hover) {
  .artigo-item:hover .artigo-item__capa img { transform: scale(1.04); }
}
/* Sem capa o espaço permanece: uma fileira em que só um item perde a coluna
   desalinha a lista inteira. */
.artigo-item__capa--vazia { background-image: var(--inaec-grad-ciclo); opacity: 0.18; }

/* Assinatura e chamada */
.artigo-item__pe {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  margin-block-start: 0.25rem;
}
.artigo-item__assinatura { display: flex; flex-direction: column; line-height: 1.3; }
.artigo-item__autor { font-size: var(--fs-legend); font-weight: var(--fw-medium); color: var(--color-text); }
.artigo-item__pe .artigo-item__data { font-size: 0.8125rem; }

/* Chamada para a leitura.
   `<span>`, não link: o título já cobre o cartão inteiro com `::after`, e um
   segundo alvo por baixo dele seria alcançável pelo teclado e inalcançável
   pelo mouse. Aqui ele é pista visual, e quem clica acerta o cartão todo. */
/* `position: relative` + `z-index` põem a chamada ACIMA do `::after` do
   título, que cobre o cartão inteiro. Sem isso o clique seria sempre do
   título e este elemento nunca receberia hover, foco ou botão do meio. */
.artigo-item__acao {
  position: relative;
  z-index: 1;
  text-decoration: none;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-legend);
  font-weight: var(--fw-medium);
  color: var(--inaec-verde);
  white-space: nowrap;
}
.artigo-item__acao::after {
  content: "→";
  transition: transform 260ms var(--anim-curva);
}
@media (hover: hover) {
  .artigo-item:hover .artigo-item__acao::after { transform: translateX(3px); }
}
@media (hover: hover) {
  .artigo-item__acao:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (hover: hover) {
  .paper__acao:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (hover: hover) {
  .artigo-item:hover { background-color: color-mix(in srgb, var(--inaec-verde) 4%, transparent); }
}
.artigo-item:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.artigo-item[hidden] { display: none; }

.artigo-item__data {
  font-size: var(--fs-legend);
  line-height: 1.5;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.artigo-item__corpo { display: grid; gap: 0.4rem; min-inline-size: 0; }
.artigo-item__titulo {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-heading);
}
.artigo-item__titulo a { color: inherit; text-decoration: none; }
.artigo-item__titulo a::after { content: ""; position: absolute; inset: 0; }
.artigo-item__titulo a:focus-visible { outline: none; }
.artigo-item__resumo { margin: 0; font-size: var(--fs-legend); line-height: var(--lh-body); color: var(--color-text-muted); }
.artigo-item__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.artigo-item__tags .tag { font-size: 0.625rem; padding: 0.15rem 0.5rem; }

.indice-vazio { padding: var(--space-lg) 0; color: var(--color-text-muted); }
.indice-vazio[hidden] { display: none; }

.indice-resumo {
  margin-block: var(--space-sm) 0;
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .artigo-item { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .artigo-item__capa { max-inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .artigo-item__capa img,
  .artigo-item__acao::after { transition: none; }
  @media (hover: hover) {
  .artigo-item:hover .artigo-item__capa img { transform: none; }
}
  @media (hover: hover) {
  .artigo-item:hover .artigo-item__acao::after { transform: none; }
}
}

/* ==========================================================================
   MODELO DE ARTIGO — página padrão do blog
   Usado por todo artigo publicado em Ideias Circulares. A listagem e esta
   página formam o par que define o modelo: mudou aqui, muda em todo artigo.
   ========================================================================== */

/* --- Cabeçalho ----------------------------------------------------------- */
.artigo-cabecalho { display: grid; gap: var(--space-sm); max-inline-size: 68ch; }
/*
   `justify-self`, e não `align-self`.

   O cabeçalho é uma grade de uma coluna, e um filho de grade ESTICA no eixo
   inline por padrão. `align-self: start` prende no eixo de bloco — não tinha
   efeito nenhum aqui —, então a pílula da etiqueta abria os 700px inteiros
   da coluna com o texto encolhido à esquerda: a caixa parecia estourada
   porque estava mesmo, só que para os lados.
*/
.artigo-cabecalho .tag { justify-self: start; align-self: start; }

.artigo-cabecalho__titulo {
  margin: 0;
  font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1.22;
  letter-spacing: var(--tracking-display);
  color: var(--inaec-grafite);
  text-wrap: pretty;
}
.artigo-cabecalho__linha {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: 1.45;
  color: var(--color-text-muted);
  max-inline-size: 60ch;
}

/* Assinatura: autor, data e tempo de leitura numa linha só */
.artigo-assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}
.artigo-assinatura__pessoa { display: grid; grid-template-columns: 40px 1fr; gap: 0.7rem; align-items: center; }
.artigo-assinatura__pessoa img { inline-size: 40px; block-size: 40px; border-radius: 50%; object-fit: cover; }
.artigo-assinatura__nome { font-size: var(--fs-legend); font-weight: var(--fw-semibold); color: var(--color-text); line-height: 1.3; }
.artigo-assinatura__nome a { color: inherit; }
.artigo-assinatura__papel { font-size: 0.75rem; color: var(--color-text-muted); }
.artigo-assinatura__dado { font-size: var(--fs-legend); color: var(--color-text-muted); }
.artigo-assinatura__sep { color: var(--color-border-strong); }

/* --- Corpo --------------------------------------------------------------- */
.artigo-corpo { max-inline-size: 68ch; }
.artigo-corpo > * + * { margin-block-start: var(--space-xs); }
.artigo-corpo p { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text); }

.artigo-corpo h2 {
  margin-block-start: var(--space-lg);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  scroll-margin-block-start: calc(var(--header-height) + var(--space-sm));
}
.artigo-corpo h3 { margin-block-start: var(--space-md); }

.artigo-corpo ul, .artigo-corpo ol { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; }
.artigo-corpo li { font-size: 1.0625rem; line-height: 1.65; color: var(--color-text); }
.artigo-corpo li::marker { color: var(--inaec-verde); }

/* Primeiro parágrafo com peso de abertura */
.artigo-corpo > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--inaec-grafite);
}

/* Figura com legenda */
.artigo-corpo figure { margin: var(--space-md) 0; }
.artigo-corpo figure img { inline-size: 100%; border-radius: var(--radius-md); }
.artigo-corpo figcaption {
  margin-block-start: 0.5rem;
  font-size: var(--fs-legend);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Citação dentro do texto — mais leve que a .citacao de página */
.artigo-corpo blockquote {
  margin: var(--space-md) 0;
  padding-inline-start: var(--space-sm);
  border-inline-start: 3px solid var(--inaec-amarelo);
}
.artigo-corpo blockquote p {
  font-size: 1.1875rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--inaec-grafite);
}
.artigo-corpo blockquote cite {
  display: block;
  margin-block-start: 0.5rem;
  font-size: var(--fs-legend);
  font-style: normal;
  color: var(--color-text-muted);
}

/* Nota de rodapé do artigo (crédito do autor, fontes) */
.artigo-nota {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-legend);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* --- Caixa do autor ------------------------------------------------------ */
/* A caixa respira: o retrato é maior e redondo, e o miolo ganha entrelinha.
   Antes eram 88px quadrados com 0.45rem entre tudo — rótulo, nome, biografia
   e link empilhados na mesma distância, sem hierarquia e sem folga. */
.autor-caixa {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: var(--space-md) var(--space-lg);
  align-items: start;
  margin-block-start: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.autor-caixa__foto {
  margin: 0;
  align-self: start;
  inline-size: 116px;
  block-size: 116px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--inaec-nevoa);
  /* Um anel claro separa o retrato do fundo do cartão sem pesar. */
  box-shadow: 0 0 0 4px var(--color-bg);
}
/*
   Redondo exige as DUAS declarações.

   `border-radius` sozinho recorta um retângulo em elipse: a foto de origem é
   quadrada, mas sem `object-fit: cover` o navegador estica a imagem para
   preencher a caixa e o rosto sai deformado. O par é o que produz círculo de
   verdade.
*/
.autor-caixa__foto img {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
}
.autor-caixa__iniciais {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--inaec-verde) 12%, transparent);
  color: var(--inaec-verde);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-semibold);
}
.autor-caixa__corpo { display: grid; gap: 0.6rem; align-content: start; }
/* Cargo e produção na mesma linha, separados por um ponto. */
.autor-caixa__linha {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  font-size: var(--fs-legend);
  color: var(--inaec-verde);
  font-weight: var(--fw-medium);
}
.autor-caixa__contagem {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}
.autor-caixa__contagem::before { content: "· "; }
.autor-caixa__rotulo {
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.autor-caixa__nome { margin: 0; font-size: 1.125rem; font-weight: var(--fw-semibold); color: var(--color-heading); }
.autor-caixa__bio { margin: 0; font-size: var(--fs-legend); line-height: var(--lh-body); color: var(--color-text-muted); }

/* --- Miolo do artigo em duas colunas -------------------------------------
   O texto tem medida de leitura (700px) dentro de um contêiner de 1264: sem
   segunda coluna sobravam 564px de branco ao longo de todo o artigo.

   A coluna só existe a partir de 1100px. Abaixo disso ela vira um bloco
   comum no fim do texto — empilhar 320px ao lado de 400px produziria duas
   colunas estreitas, que é pior do que uma. */
.artigo-miolo { display: block; }
.artigo-texto { min-inline-size: 0; }

.artigo-lado { display: grid; gap: var(--space-sm); align-content: start; }
.artigo-lado__caixa {
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.artigo-lado__titulo {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.artigo-lado__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.artigo-lado__item { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-2xs); align-items: start; }
.artigo-lado__capa {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--inaec-nevoa);
}
.artigo-lado__capa img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.artigo-lado__texto { display: grid; gap: 0.2rem; min-inline-size: 0; }
.artigo-lado__texto a {
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--color-heading);
  text-decoration: none;
  /* Três linhas: o título completo empurraria o próximo item para fora da tela. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
@media (hover: hover) {
  .artigo-lado__texto a:hover { color: var(--inaec-verde); }
}
.artigo-lado__texto time { font-size: 0.6875rem; color: var(--color-text-muted); }
.artigo-lado__rodape { margin: var(--space-sm) 0 0; padding-block-start: var(--space-xs); border-block-start: 1px solid var(--color-border); }
.artigo-lado__rodape .link-arrow { font-size: 0.8125rem; }

/* Cartão de quem escreve, no topo da coluna. */
.artigo-lado__autor { display: grid; gap: var(--space-xs); }
.artigo-lado__rotulo {
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.artigo-lado__pessoa { display: flex; align-items: center; gap: var(--space-2xs); }
/* O selo é o mesmo do resto do site, só maior aqui. */
.artigo-lado__pessoa .post__avatar { inline-size: 48px; block-size: 48px; font-size: 0.8125rem; }
.artigo-lado__id { display: grid; gap: 0.1rem; min-inline-size: 0; }
.artigo-lado__nome {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--color-heading);
  text-decoration: none;
}
@media (hover: hover) {
  .artigo-lado__nome:hover { color: var(--inaec-verde); }
}
.artigo-lado__cargo { font-size: 0.75rem; line-height: 1.35; color: var(--color-text-muted); }
.artigo-lado__producao { margin: 0; font-size: 0.75rem; color: var(--inaec-verde); font-weight: var(--fw-medium); }
/* Na coluna estreita as redes viram uma fileira de ícones com rótulo curto. */
.pessoa-redes--compacta { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.pessoa-redes--compacta .pessoa-rede { font-size: 0.75rem; }

/* Assuntos ao pé do texto ------------------------------------------------- */
.artigo-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}
.artigo-tags__rotulo {
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-inline-end: 0.15rem;
}
.artigo-tags .tag { text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) {
  .artigo-tags .tag:hover { background-color: var(--inaec-verde); color: var(--inaec-branco); }
}

@media (min-width: 1100px) {
  .artigo-miolo {
    display: grid;
    /* A coluna de texto vale a MEDIDA DE LEITURA, não a fração restante:
       com `1fr` ela crescia para 880px enquanto o corpo parava em 700, e a
       sobra virava um vão morto no meio. Fixando a medida e distribuindo o
       resto, o texto fica à esquerda, a coluna à direita, e o branco vira
       respiro entre as duas. */
    grid-template-columns: minmax(0, 700px) 320px;
    justify-content: space-between;
    column-gap: var(--space-xl);
    align-items: start;
  }
  /*
     `position: sticky` precisa de um pai que NÃO recorte o conteúdo e de um
     deslocamento que desvie do cabeçalho fixo — sem `top`, o elemento gruda
     no zero e some atrás dele.
  */
  .artigo-lado {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-sm));
  }
}

/* --- Capa do artigo ------------------------------------------------------
   A imagem não tinha regra NENHUMA: renderizava na proporção natural, 16:9,
   ocupando a largura inteira do contêiner. Em 1440px isso dava 1264x737 —
   82% da altura da janela — e o primeiro parágrafo só começava a 1197px do
   topo. O leitor abria o texto e via uma tela cheia de foto.

   A correção não é encolher a largura, que deixaria a capa acanhada no meio
   da página: é LIMITAR A ALTURA e deixar o recorte acontecer. A capa vira uma
   faixa larga — a proporção que uma abertura de matéria pede — e o texto
   sobe para dentro da primeira tela.

   `aspect-ratio` define a forma; `max-block-size` põe o teto; `object-fit:
   cover` faz o recorte pelo centro em vez de espremer a imagem. Os três
   juntos, ou a foto deforma.
   -------------------------------------------------------------------------- */
.artigo-capa {
  margin: var(--space-md) 0 var(--space-lg);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--inaec-nevoa);
}
.artigo-capa img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  /* Teto em vh para acompanhar a janela, com piso e limite absolutos: em tela
     baixa a capa não toma o texto, em tela alta não vira um cartaz. */
  max-block-size: clamp(200px, 38vh, 420px);
  object-fit: cover;
  object-position: 50% 50%;
}

/* --- Relacionados -------------------------------------------------------- */
.relacionados { margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-border); }
.relacionados__titulo {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.relacionados__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.relacionado {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  align-content: start;
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 220ms ease, transform 220ms ease;
}
.relacionado__capa { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--inaec-nevoa); }
.relacionado__capa img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.relacionado__corpo {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: var(--space-sm);
}
.relacionado__corpo .tag { justify-self: start; font-size: 0.625rem; padding: 0.15rem 0.5rem; }
.relacionado__resumo {
  margin: 0;
  font-size: 0.8125rem;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
/* Assinatura ao pé, empurrada para baixo para alinhar entre os três cartões. */
.relacionado__pe {
  margin: 0.15rem 0 0;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  align-self: end;
}
.relacionado__autor { font-size: 0.75rem; font-weight: var(--fw-medium); color: var(--color-text); }
@media (hover: hover) {
  .relacionado:hover { border-color: var(--color-border-strong); transform: translateY(-3px); }
}
.relacionado:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.relacionado__titulo { margin: 0; font-size: 0.9375rem; font-weight: var(--fw-semibold); line-height: 1.4; color: var(--color-heading); }
.relacionado__titulo a { color: inherit; text-decoration: none; }
.relacionado__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.relacionado__titulo a:focus-visible { outline: none; }
.relacionado__data { font-size: 0.75rem; color: var(--color-text-muted); }

.artigo-voltar { margin-block-start: var(--space-md); }

@media (max-width: 767px) {
  .relacionados__lista { grid-template-columns: 1fr; }
  .autor-caixa { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-md); }
  .autor-caixa__foto { inline-size: 88px; block-size: 88px; }
}

/* --------------------------------------------------------------------------
   LISTAS DE PUBLICAÇÕES
   Os contêineres que o painel preenche em Ideias Circulares. Sem espaçamento
   próprio, os cartões encostavam uns nos outros.
   -------------------------------------------------------------------------- */

.papers-lista,
.livros-lista {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

/* Dois livros lado a lado onde couber: a ficha técnica é estreita e uma
   coluna única deixaria metade da linha vazia em tela larga. */
@media (min-width: 900px) {
  .livros-lista { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
}