/* ==========================================================================
   INAEC · PÁGINAS INTERNAS
   Cabeçalho de página, corpo de texto longo, sumário lateral e erro 404.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Alvo: Theme Builder → Single Page (modelo único reutilizado por todas as
   páginas internas), com o conteúdo vindo do widget Post Content.
     Container "page-hero"    (fundo Cinza do Portal · padding 140/64)
     Container "pagina"       (flex row · gap 64)
       ├── "pagina__sumario"  (sticky · 26%)  → widget Table of Contents (Pro)
       └── "pagina__corpo"    (74%)           → widget Post Content
   ========================================================================== */

/* --- Cabeçalho da página ------------------------------------------------ */
/*
 * Páginas sem cabeçalho de página — perfil do especialista, artigo, erro 404 —
 * entregam o próprio conteúdo direto no `<main>`.
 *
 * O cabeçalho do site é `position: fixed`: ele não ocupa espaço no fluxo. As
 * páginas normais compensam isso no `.page-hero`; estas não têm um, e o
 * conteúdo começava atrás da barra — o título aparecia colado nela ou cortado
 * por ela. A folga aqui é a mesma que o `.page-hero` aplica, para que as duas
 * famílias de página comecem na mesma altura.
 */
.section--pos-cabecalho {
  padding-block-start: calc(var(--header-height) + var(--space-lg));
}

.page-hero {
  position: relative;
  background-color: var(--color-bg);
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-lg);
  border-block-end: 1px solid var(--color-border);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-inline-size: 62ch;
}

.page-hero__titulo { margin: 0; color: var(--inaec-grafite); }

/* Data de atualização — obrigatória em documento legal */
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
}
.page-hero__meta strong { color: var(--color-text); font-weight: var(--fw-semibold); }

/* --- Trilha de navegação ------------------------------------------------ */
.breadcrumb { margin-block-end: var(--space-2xs); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--inaec-verde); text-decoration: none; }
@media (hover: hover) {
  .breadcrumb a:hover { text-decoration: underline; }
}
.breadcrumb li + li::before { content: "/"; margin-inline-end: 0.375rem; opacity: 0.45; }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* --- Layout de duas colunas --------------------------------------------- */
.pagina__layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}

/* --- Sumário ------------------------------------------------------------ */
.pagina__sumario {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-xs));
  flex: 0 0 clamp(200px, 24%, 260px);
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pagina__sumario h2 {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pagina__sumario ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pagina__sumario a {
  display: block;
  font-size: var(--fs-legend);
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  padding-inline-start: 0.625rem;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
@media (hover: hover) {
  .pagina__sumario a:hover {
  color: var(--inaec-verde);
  border-inline-start-color: var(--inaec-verde);
}
}

/* --- Corpo de texto longo -----------------------------------------------
   Medida de leitura conforme o MIV: 55 a 75 caracteres por linha. */
/*
 * A prosa é uma GRADE de três trilhas, não uma caixa estreita.
 *
 * A trilha do meio tem a medida de leitura; as laterais absorvem o resto da
 * largura. Todo filho cai no meio por padrão, e quem precisa de espaço —
 * grade de cartões, tabela larga, lista de papers — pede a linha inteira com
 * `.largo`, sem sair do fluxo nem depender de margem negativa.
 *
 * Antes era `max-inline-size: 72ch` na caixa toda: o texto ficava certo e
 * TUDO o mais ficava espremido junto com ele, inclusive listas de cartões que
 * não têm nada a ver com medida de leitura.
 */
.prosa {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: grid;
  /*
   * Coluna de leitura à ESQUERDA, não centralizada.
   *
   * Centralizá-la deixava o parágrafo começando a um terço da tela enquanto
   * os cartões começavam na margem — dois eixos de alinhamento diferentes na
   * mesma página, que é exatamente a sensação de "desalinhado". Alinhada à
   * esquerda, a prosa nasce na mesma vertical do título, da trilha de
   * navegação e das grades.
   */
  grid-template-columns: min(72ch, 100%) minmax(0, 1fr);
}
.prosa > * { grid-column: 1; }

/*
 * Blocos que ganham a largura inteira da página.
 *
 * Vale para o CONTÊINER que o JavaScript preenche, e não só para a grade
 * interna: em /especialistas o filho direto da prosa é `[data-pessoas]`, e
 * limitá-lo à medida de leitura espremia os cartões em duas colunas com meia
 * tela vazia ao lado.
 */
.prosa > :is(.largo, [data-pessoas], [data-fonte], .papers-lista, .livros-lista,
             .indice-artigos, .pessoas-grade, .pessoas-secao, .tabela-wrap,
             .grade-icones, .destaques, .comparativo, .erres, .numeros, .etapas,
             .especificacoes, .filtros, .destaque-artigo, .linha-tempo,
             /*
                `.contato-layout` é a grade de duas colunas da página de
                contato — formulário à esquerda, dados do Instituto à direita.
                Presa na medida de leitura, ela espremia as DUAS colunas em
                741px de 1264 disponíveis, e o formulário inteiro ficava
                acanhado num canto com meia tela vazia ao lado.

                A regra para decidir: se o bloco DIAGRAMA a página, ele entra
                aqui; se ele CARREGA texto para ler — citação, abertura,
                destaque numérico — fica na coluna estreita, porque a medida
                de leitura vale para ele como vale para o parágrafo.
             */
             .contato-layout) {
  grid-column: 1 / -1;
}

.prosa > * + * { margin-block-start: var(--space-xs); }

/* Ritmo vertical em dois níveis. 16px é a distância entre parágrafos; blocos
   compostos — grades, painéis, citação, linha do tempo — precisam de mais ar,
   senão encostam no que vem antes e depois. A citação escura era o caso mais
   visível: colava na última entrada da linha do tempo. */
.prosa > :is(.grade-icones, .linha-tempo, .citacao, .especificacoes,
             .etapas, .destaques, .conselho, .conselho-secao,
             .comparativo, .numeros, .erres, .destaque-numero) {
  margin-block-start: var(--space-md);
}
.prosa > :is(.grade-icones, .linha-tempo, .citacao, .especificacoes,
             .etapas, .destaques, .conselho, .conselho-secao,
             .comparativo, .numeros, .erres, .destaque-numero) + * {
  margin-block-start: var(--space-md);
}
/* A citação é o bloco de maior peso visual: recebe folga em ambos os lados. */
.prosa > .citacao { margin-block: var(--space-lg); }
.prosa > .citacao + * { margin-block-start: var(--space-lg); }

/* Só os h2 que são FILHOS DIRETOS da prosa marcam seção. Títulos aninhados
   em cards (nomes do conselho, rótulos de bloco) têm tratamento próprio.
   A versão anterior usava `:not(.conselheiro__nome)` — uma lista negra que
   quebrou silenciosamente quando a classe virou `.pessoa__nome`, enchendo
   cada card com uma régua e 72px de espaço indevido. O seletor por
   parentesco não depende de nome de classe e não quebra em renomeação. */
.prosa > h2 {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}
.prosa :is(h2,h3) { scroll-margin-block-start: calc(var(--header-height) + var(--space-sm)); }
.prosa > h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.prosa h3 { margin-block-start: var(--space-md); }

/* Escopo por parentesco, não por descendência. `.prosa p, .prosa li` pintava
   de Grafite QUALQUER parágrafo ou item aninhado — inclusive os que vivem
   dentro de cards escuros, onde o resultado era 1.57:1. É a mesma armadilha
   da régua de seção: regra genérica que vaza para dentro de componentes. */
.prosa > p,
.prosa > ul > li,
.prosa > ol > li { color: var(--color-text); }
/*
   Cor de link da prosa — botões ficam de fora.

   `.prosa a` tem especificidade (0,1,1) e vencia `.btn--secondary` (0,1,0):
   o botão verde recebia TEXTO VERDE e o rótulo sumia dentro do próprio
   fundo. Todo `.btn` colocado dentro de um texto sofria disso; no
   "Enviar meu artigo" das Diretrizes o contraste era de 1:1.

   A exclusão é a mesma que `03-animacoes.css` já fazia para o sublinhado
   animado — lá os botões foram lembrados, aqui não. Um botão não é um link
   de leitura: ele traz a própria cor.
*/
.prosa a:not(.btn):not(.link-arrow) { color: var(--inaec-verde); text-underline-offset: 0.2em; }

.prosa ul, .prosa ol { padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.prosa > :is(ul, ol) > li::marker { color: var(--inaec-verde); }

/* Destaque de apoio — avisos e observações, sem peso de alerta */
.prosa .nota {
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--inaec-amarelo);
  border-radius: var(--radius-md);
  font-size: var(--fs-legend);
  color: var(--color-text-muted);
}
.prosa .nota strong { color: var(--color-text); }

/* Campo a preencher antes da publicação — visível de propósito */
.pendente {
  padding: 0.08em 0.28em;
  background-color: color-mix(in srgb, var(--inaec-amarelo) 45%, transparent);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  color: var(--inaec-grafite);
}

/* --- Tabela ------------------------------------------------------------- */
.prosa .tabela-wrap { overflow-x: auto; min-inline-size: 0; max-inline-size: 100%; }
.prosa table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-legend);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.prosa th, .prosa td {
  padding: 0.75rem var(--space-xs);
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid var(--color-border);
}
.prosa th {
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  background-color: var(--color-bg);
  white-space: nowrap;
}
.prosa tbody tr:last-child td { border-block-end: 0; }

/* --- Página 404 --------------------------------------------------------- */
.pagina-404 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  min-block-size: 58svh;
  justify-content: center;
  max-inline-size: 62ch;
}
.pagina-404__codigo {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 3rem + 2.4vw, 5rem);
  font-weight: var(--fw-heading);
  /* A Plus Jakarta Sans exige no mínimo 1.163 neste corpo — medido: com
     80px a caixa precisava de 93px. Abaixo disso o desenho vaza. */
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--inaec-verde);
}
.pagina-404__codigo span { color: var(--inaec-amarelo); }
.pagina-404__acoes { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.pagina-404__atalhos {
  inline-size: 100%;
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}
.pagina-404__atalhos ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  .pagina__layout { flex-direction: column; }
  .pagina__sumario {
    position: static;
    flex: 1 1 auto;
    inline-size: 100%;
  }
  /* inline-size definido, e não apenas max-inline-size: sem largura
     definida, a largura mínima intrínseca da tabela esticava esta coluna
     para além do contêiner e o overflow-x do .tabela-wrap não rolava nada. */
  .prosa {
    inline-size: 100%;
    max-inline-size: none;
  }
}

@media (max-width: 767px) {
  .pagina-404__acoes { flex-direction: column; align-items: stretch; inline-size: 100%; }
  .pagina-404__acoes .btn { inline-size: 100%; }
}

/* ==========================================================================
   COMPONENTES DAS PÁGINAS INSTITUCIONAIS
   ========================================================================== */

/* --- Missão e Visão lado a lado ------------------------------------------
   >>> ELEMENTOR: Container flex row · 2 filhos a 50% · gap 24 */
.destaques {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.destaque {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--inaec-verde);
  border-radius: var(--radius-md);
}
.destaque h3 { margin: 0; color: var(--color-heading); }
.destaque p  { margin: 0; font-size: var(--fs-legend); color: var(--color-text-muted); }

/* --- Lista numerada de valores e iniciativas -----------------------------
   O número vem do contador, não do texto: assim a ordem sobrevive a
   qualquer reordenação feita depois no builder. */
.numerada {
  list-style: none;
  padding: 0;
  counter-reset: numerada;
  display: grid;
  gap: var(--space-xs);
}
.numerada > li {
  counter-increment: numerada;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: baseline;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.numerada > li::before {
  content: counter(numerada, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-legend);
  font-weight: var(--fw-heading);
  letter-spacing: var(--tracking-label);
  color: var(--inaec-verde);
}
.numerada strong { color: var(--color-heading); }

/* --- Linha do tempo ------------------------------------------------------ */
.linha-tempo { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.linha-tempo > li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-sm);
  padding-inline-start: var(--space-sm);
  border-inline-start: 2px solid var(--color-border);
  position: relative;
}
.linha-tempo > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 0.55em;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background-image: var(--inaec-grad-ciclo);
}
.linha-tempo time {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-heading);
  line-height: 1.3;
  color: var(--inaec-verde);
}
.linha-tempo p { margin: 0; }

/* --- Conselho ------------------------------------------------------------
   O portal antigo listava as pessoas como linhas de tabela: retrato pequeno
   à esquerda, parágrafo comprido à direita, sete vezes igual. Aqui há
   hierarquia — o CEO em destaque, o conselho em grade de duas colunas — e o
   retrato ganha corte quadrado, que é como as fotos foram produzidas.

   >>> ELEMENTOR: em produção, trocar por um CPT "Conselheiro" exibido em
   Loop Grid, com o CEO filtrado num Loop separado acima. */

/* Páginas de pessoas usam a largura inteira: a medida de leitura de 72ch
   vale para documento corrido, não para uma grade de cards. */
.pagina-equipe .prosa { max-inline-size: none; }

.conselho-secao {
  margin-block-start: var(--space-lg);
}
.conselho-secao__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);
}

/* --- Retrato ------------------------------------------------------------
   Fundo tonal atrás do recorte: as fotos são recortes sobre cinza claro,
   então a moldura assume esse tom em vez de brigar com ele. */
.retrato {
  margin: 0;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--inaec-nevoa);
}
.retrato img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  /* MIV pede saturação reduzida nas imagens; um toque só, para unificar
     retratos vindos de sessões diferentes. */
  filter: saturate(0.92);
}

/* --- Identificação ------------------------------------------------------ */
.pessoa__nome {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.pessoa__cargo {
  display: inline-flex;
  align-items: center;
  margin-block-start: 0.5rem;
  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;
  color: var(--inaec-verde);
  background-color: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  border-radius: var(--radius-pill);
}
.pessoa__bio { display: grid; gap: 0.75rem; }
.pessoa__bio p {
  margin: 0;
  font-size: var(--fs-legend);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* --- CEO em destaque ---------------------------------------------------- */
.conselho-destaque {
  display: grid;
  grid-template-columns: 240px 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);
}
.conselho-destaque .pessoa__nome { font-size: 1.5rem; }
.conselho-destaque__texto { display: grid; align-content: start; gap: var(--space-sm); }

/* Régua institucional assinando o card do CEO */
.conselho-destaque { position: relative; overflow: hidden; }
.conselho-destaque::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background-image: var(--inaec-grad-ciclo);
}

/* --- Grade do conselho --------------------------------------------------- */
.conselho {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.conselheiro {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  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: box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
@media (hover: hover) {
  .conselheiro:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}
}

/* Retrato e nome na mesma linha; a biografia ocupa a largura toda do card,
   o que devolve a medida de leitura que o layout antigo tinha perdido. */
.conselheiro__topo {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--space-sm);
  align-items: center;
}
.conselheiro__bio {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
}

@media (max-width: 1024px) {
  .conselho { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .destaques { grid-template-columns: 1fr; }
  .linha-tempo > li { grid-template-columns: 1fr; gap: 0.25rem; }

  .conselho-destaque { grid-template-columns: 1fr; }
  .conselho-destaque .retrato { max-inline-size: 200px; }

  .conselheiro__topo { grid-template-columns: 104px 1fr; gap: var(--space-xs); }
}

/* ==========================================================================
   BLOCOS EDITORIAIS
   Componentes que substituem o texto corrido herdado do portal antigo.
   ========================================================================== */

/* --- Abertura ------------------------------------------------------------
   Primeira afirmação da página, em corpo de subtítulo. Estabelece a tese
   antes do texto de apoio, em vez de começar por parágrafo comum. */
.abertura {
  display: grid;
  gap: var(--space-sm);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-border);
}
.abertura + h2 {
  margin-block-start: var(--space-md);
  padding-block-start: 0;
  border-block-start: 0;
}

/*
 * A frase que abre a página.
 *
 * Ela tinha o tamanho e o peso de um h2 (28px/600) num bloco de 30 caracteres
 * de largura: uma coluna curta e gorda de texto ao lado da prosa normal, com a
 * mesma voz visual dos títulos. Era o elemento que mais produzia a impressão de
 * "texto gigante desalinhado" — competia com o título da página logo acima e
 * não se distinguia dos subtítulos logo abaixo.
 *
 * Agora é o que sempre foi: uma linha de apoio. Um degrau acima do corpo, um
 * degrau abaixo do h3, em peso intermediário, e com largura suficiente para
 * formar linhas de leitura em vez de um bloco.
 */
.abertura__frase {
  margin: 0;
  max-inline-size: 46ch;
  /* Teto abaixo do h3: a frase de abertura apoia a leitura, não abre seção.
     Passando do subtítulo ela voltaria a disputar o nível dos títulos. */
  font-size: clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  letter-spacing: var(--tracking-tight);
  color: var(--inaec-grafite);
  text-wrap: pretty;
}
.abertura__frase em { font-style: normal; color: var(--inaec-verde); }

/* Texto de apoio em duas colunas: encurta a linha sem encurtar o conteúdo */
.colunas-2 {
  columns: 2;
  column-gap: var(--space-lg);
  orphans: 3;
  widows: 3;
}
.colunas-2 > p { margin: 0 0 var(--space-xs); break-inside: avoid; }
.colunas-2 > p:last-child { margin-block-end: 0; }

/* --- Grade de itens com ícone --------------------------------------------
   >>> ELEMENTOR: Container em Grid + widgets Icon Box. */
.grade-icones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.item-icone {
  display: grid;
  gap: 0.625rem;
  align-content: start;
  padding: var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.item-icone__marca {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  color: var(--inaec-verde);
}
.item-icone__marca svg {
  inline-size: 20px; block-size: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.item-icone h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-heading);
}
.item-icone p {
  margin: 0;
  font-size: var(--fs-legend);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* --- Citação de destaque -------------------------------------------------
   Para o princípio editorial que a página inteira orbita. */
.citacao {
  position: relative;
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background-color: var(--inaec-grafite);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.citacao::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background-image: var(--inaec-grad-ciclo);
}
.citacao p {
  margin: 0;
  max-inline-size: 34ch;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--inaec-branco);
  text-wrap: pretty;
}
.citacao footer {
  margin-block-start: var(--space-xs);
  font-size: var(--fs-legend);
  color: color-mix(in srgb, var(--inaec-branco) 66%, transparent);
}

/* --- Painel de especificações --------------------------------------------
   Os requisitos objetivos de uma submissão, legíveis de relance — em vez de
   dispersos em parágrafos. */
.especificacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2xs);
}
.especificacao {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: var(--space-sm);
  margin: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.especificacao dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.especificacao dd {
  margin: 0;
  min-inline-size: 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-heading);
  /* Valores longos (um e-mail, por exemplo) precisam quebrar: o painel tem
     overflow oculto para arredondar os cantos e cortaria o texto. */
  overflow-wrap: anywhere;
}
/* Um e-mail em 17px semibold não cabe na coluna e quebrava deixando um
   caractere órfão na linha seguinte. Em 15px ele entra inteiro. */
.especificacao dd a {
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}

.especificacao dd small {
  display: block;
  margin-block-start: 0.2rem;
  font-size: var(--fs-legend);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* --- Etapas numeradas ---------------------------------------------------- */
.etapas { display: grid; gap: var(--space-sm); counter-reset: etapa; list-style: none; padding: 0; }
.etapa {
  counter-increment: etapa;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.etapa::before {
  content: counter(etapa, decimal-leading-zero);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  font-family: var(--font-display);
  font-size: var(--fs-legend);
  font-weight: var(--fw-heading);
  color: var(--inaec-verde);
}
.etapa h3 { margin: 0 0 0.35rem; font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--color-heading); }
.etapa p  { margin: 0; font-size: var(--fs-legend); line-height: var(--lh-body); color: var(--color-text-muted); }

@media (max-width: 1024px) {
  /* 2×2 fecha o painel; 3+1 deixava um card órfão na última linha. */
  .especificacoes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .colunas-2 { columns: 1; }
  .especificacoes { grid-template-columns: 1fr; }
  .citacao { padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); }
  .etapa { grid-template-columns: 36px 1fr; gap: var(--space-xs); }
  .etapa::before { inline-size: 36px; block-size: 36px; }
}

/* Retrato ausente: iniciais em vez de moldura vazia. Usado quando a pessoa
   vem do banco sem foto enviada. */
.retrato--vazio {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background-color: var(--inaec-nevoa);
}
.retrato--vazio span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: var(--fw-heading);
  color: var(--inaec-verde);
  letter-spacing: 0.02em;
}