/* ==========================================================================
   CIAES — folha de estilo principal
   Centro Acadêmico de Inteligência Artificial e Engenharia de Software
   UFPR — Campus Jandaia do Sul

   Sumário
   01. Tokens
   02. Reset e base
   03. Tipografia
   04. Utilitários e estrutura
   05. Cabeçalho e navegação
   06. Rodapé
   07. Folha de rosto (hero da homepage)
   08. Faixas de conteúdo e rubrica de margem
   09. Componentes: fichas, listas, notas, tabelas
   10. Diagrama de fluxo (projetos)
   11. Estado vazio e pendências
   12. Formulário sem backend
   13. Impressão
   ========================================================================== */

/* 01. Tokens ------------------------------------------------------------- */
:root {
  /* Superfícies: branco de papel e um marfim para blocos secundários. */
  --papel: #ffffff;
  --papel-2: #f6f4ef;
  --papel-3: #efece4;

  /* Tinta */
  --tinta: #16150f;
  --tinta-2: #4a473d;
  --tinta-3: #6f6b5f;

  /* Linhas */
  --linha: #d9d4c7;
  --linha-forte: #16150f;

  /* Acento único: vermelho de rubrica, usado para marcar estrutura. */
  --rubrica: #a81f14;
  --rubrica-escura: #7d1710;
  --rubrica-tenue: #f6e7e4;

  /* Estados */
  --foco: #16150f;

  /* Tipografia */
  --fonte-editorial: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fonte-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Ritmo vertical e medidas */
  --medida: 68ch;
  --shell: 1180px;
  --margem-rubrica: 9.5rem;

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4.5rem;
  --e9: 6.5rem;
}

/* 02. Reset e base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Sem rolagem suave global: em documentos longos, como o Estatuto, ela
     atrasa e às vezes perde o salto para a âncora do artigo. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

::selection { background: var(--rubrica); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 03. Tipografia --------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--fonte-editorial);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem); }
h4 { font-size: 1.0625rem; font-family: var(--fonte-texto); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--e4); max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rubrica); }

strong, b { font-weight: 600; }

small { font-size: 0.8125rem; }

/* Etiqueta em monoespaçada: usada para rótulos, dados e marcadores. */
.etiqueta {
  font-family: var(--fonte-dado);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0;
}

.destaque-ia { color: var(--rubrica); }

.texto-guia {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 60ch;
}

.nota-fonte {
  font-family: var(--fonte-dado);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--tinta-3);
  max-width: 72ch;
}
.nota-fonte a { color: var(--tinta-2); }

/* 04. Utilitários e estrutura -------------------------------------------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--e4);
  top: 0;
  transform: translateY(-120%);
  z-index: 200;
  background: var(--tinta);
  color: var(--papel);
  padding: 0.7rem 1.1rem;
  font-family: var(--fonte-dado);
  font-size: 0.8rem;
  text-decoration: none;
  transition: transform 120ms ease-out;
}
.pular-para-conteudo:focus { transform: translateY(0); color: var(--papel); }

.apenas-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Botões e chamadas */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fonte-dado);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.72rem 1.15rem;
  border: 1.5px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn--primario { background: var(--tinta); color: var(--papel); }
.btn--primario:hover { background: var(--rubrica); border-color: var(--rubrica); color: var(--papel); }
.btn--discreto { border-color: var(--linha); color: var(--tinta-2); }
.btn--discreto:hover { border-color: var(--tinta); background: transparent; color: var(--tinta); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: dashed;
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: transparent; color: var(--tinta); }

.grupo-btn { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* 05. Cabeçalho e navegação ---------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 4.25rem;
}

.marca {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--tinta);
  line-height: 1;
}
.marca:hover { color: var(--tinta); }
.marca__sigla {
  font-family: var(--fonte-editorial);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.marca:hover .marca__sigla { text-decoration: underline; text-underline-offset: 0.2em; }
.marca__extenso {
  font-family: var(--fonte-dado);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-top: 0.28rem;
}

.nav__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}
.nav__lista a {
  display: block;
  padding: 0.5rem 0.62rem;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--tinta-2);
  border-bottom: 2px solid transparent;
}
.nav__lista a:hover { color: var(--tinta); border-bottom-color: var(--linha); }
.nav__lista a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--rubrica);
  font-weight: 500;
}

.nav__alternar {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid var(--tinta);
  color: var(--tinta);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}
.nav__barras { display: block; width: 1rem; height: 1px; background: currentColor; position: relative; }
.nav__barras::before, .nav__barras::after {
  content: ""; position: absolute; left: 0; width: 1rem; height: 1px; background: currentColor;
}
.nav__barras::before { top: -5px; }
.nav__barras::after { top: 5px; }

@media (max-width: 70rem) {
  .cabecalho__interno { min-height: 3.9rem; }
  .nav__alternar { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
  }
  /* Com JavaScript o menu começa fechado e abre pelo botão. */
  .com-js .nav { display: none; }
  .com-js .nav[data-aberto="sim"] { display: block; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; padding: var(--e2) 1.25rem var(--e5); }
  .nav__lista a { padding: 0.85rem 0; border-bottom: 1px solid var(--linha); font-size: 1rem; }
  .nav__lista a[aria-current="page"] { border-bottom-color: var(--rubrica); }
  /* Sem JavaScript o menu permanece aberto e utilizável. */
  .sem-js .nav { position: static; border-bottom: 0; }
  .sem-js .nav__alternar { display: none; }
  .sem-js .cabecalho__interno { flex-wrap: wrap; padding-bottom: var(--e2); }
}

/* 06. Rodapé ------------------------------------------------------------- */
.rodape {
  margin-top: var(--e9);
  border-top: 1.5px solid var(--linha-forte);
  background: var(--papel-2);
  padding: var(--e7) 0 var(--e6);
}
.rodape__grade {
  display: grid;
  gap: var(--e6);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.rodape h2 { font-size: 1.05rem; font-family: var(--fonte-texto); font-weight: 600; letter-spacing: 0; margin-bottom: var(--e3); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 0.35rem; }
.rodape a { color: var(--tinta-2); font-size: 0.9375rem; }
.rodape a:hover { color: var(--rubrica); }
.rodape__aviso {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  font-size: 0.875rem;
  color: var(--tinta-2);
  max-width: 74ch;
}
.rodape__meta {
  margin-top: var(--e4);
  font-family: var(--fonte-dado);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
}

/* 07. Folha de rosto (hero) ---------------------------------------------- */
.folha-rosto {
  border-bottom: 1.5px solid var(--linha-forte);
  padding: clamp(2.5rem, 1rem + 6vw, 5.5rem) 0 var(--e7);
}
.folha-rosto__topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--linha);
}
.folha-rosto__logotipo {
  font-family: var(--fonte-editorial);
  font-weight: 600;
  font-size: clamp(4rem, 1rem + 16vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
}
.folha-rosto__logotipo .destaque-ia { font-style: italic; }
.folha-rosto__extenso {
  font-family: var(--fonte-editorial);
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--tinta);
  max-width: 30ch;
  margin: var(--e5) 0 0;
}
.folha-rosto__vinculo {
  margin: var(--e5) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  display: grid;
  gap: var(--e5);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 52rem) { .folha-rosto__vinculo { grid-template-columns: 1fr; } }

.ficha-dados { margin: 0; }
.ficha-dados__linha {
  display: grid;
  gap: 0.15rem var(--e4);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linha);
  align-items: baseline;
}
@media (min-width: 34rem) {
  .ficha-dados__linha { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.ficha-dados__linha:first-child { border-top: 1px solid var(--linha); }
.ficha-dados dt {
  font-family: var(--fonte-dado);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.ficha-dados dd { margin: 0; font-size: 0.95rem; }

.folha-rosto__rodape {
  margin-top: var(--e6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
}

/* Cabeçalho das páginas internas */
.cabecalho-pagina {
  padding: clamp(2.25rem, 1rem + 4vw, 4rem) 0 var(--e6);
  border-bottom: 1.5px solid var(--linha-forte);
}
.cabecalho-pagina__trilha {
  font-family: var(--fonte-dado);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rubrica);
  margin: 0 0 var(--e4);
}
.cabecalho-pagina p.texto-guia { margin-top: var(--e4); }

/* 08. Faixas e rubrica de margem ----------------------------------------- */
.faixa { padding: var(--e8) 0; border-bottom: 1px solid var(--linha); }
.faixa:last-of-type { border-bottom: 0; }
.faixa--marfim { background: var(--papel-2); }
.faixa--fechamento { border-bottom: 0; }

.faixa__grade { display: grid; gap: var(--e5); }
@media (min-width: 62rem) {
  .faixa__grade {
    grid-template-columns: var(--margem-rubrica) minmax(0, 1fr);
    gap: var(--e6);
  }
}

/* Rubrica: rótulo de margem em monoespaçada, herdado da marginália de
   documentos normativos. Marca a estrutura, não decora. */
.rubrica {
  font-family: var(--fonte-dado);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rubrica);
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1.5px solid var(--rubrica);
  align-self: start;
}
@media (min-width: 62rem) { .rubrica { position: sticky; top: 6rem; } }

.faixa__corpo > h2 { margin-top: -0.35rem; }
.faixa__corpo > .texto-guia { margin-bottom: var(--e6); }

/* 09. Componentes -------------------------------------------------------- */

/* Grade de fichas */
/* As linhas divisórias vêm do box-shadow de cada ficha, não do fundo da grade:
   assim uma última linha incompleta não deixa um retângulo cinza vazio. */
.fichas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}
.ficha {
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--linha);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.faixa--marfim .ficha { background: var(--papel-2); }
.ficha__titulo {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  text-wrap: pretty;
}
.ficha__texto { font-size: 0.9375rem; color: var(--tinta-2); margin: 0; max-width: none; }
.ficha__marca {
  font-family: var(--fonte-dado);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--rubrica);
  text-transform: uppercase;
}

/* Lista com marcadores de regra */
.lista-regua { list-style: none; margin: 0; padding: 0; }
.lista-regua > li,
.lista-regua > div {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linha);
  display: grid;
  gap: 0.15rem var(--e4);
}
.lista-regua > li:first-child,
.lista-regua > div:first-child { border-top: 1px solid var(--linha); }
@media (min-width: 46rem) {
  .lista-regua > li,
  .lista-regua > div { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
}
.lista-regua dt, .lista-regua .rotulo {
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  text-transform: uppercase;
}
.lista-regua dd { margin: 0; }

/* Sequência numerada — usada só quando a ordem é informação real */
.sequencia { list-style: none; counter-reset: passo; margin: 0; padding: 0; }
.sequencia > li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 var(--e5) 3.25rem;
  border-left: 1px solid var(--linha);
  margin-left: 0.75rem;
}
.sequencia > li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.1rem;
  transform: translateX(-50%);
  background: var(--papel);
  color: var(--rubrica);
  font-family: var(--fonte-dado);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.35rem;
}
.faixa--marfim .sequencia > li::before { background: var(--papel-2); }
.sequencia > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.sequencia h3 { margin-bottom: var(--e2); }
.sequencia p { font-size: 0.9375rem; color: var(--tinta-2); }

/* Nota, aviso e limite */
.nota {
  border-left: 2px solid var(--rubrica);
  background: var(--rubrica-tenue);
  padding: var(--e4) var(--e5);
  font-size: 0.9375rem;
  color: var(--tinta-2);
  max-width: 74ch;
}
.nota p { max-width: none; }
.nota__rotulo {
  display: block;
  font-family: var(--fonte-dado);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rubrica-escura);
  margin-bottom: 0.35rem;
}

.aviso {
  border: 1px solid var(--linha);
  border-left: 2px solid var(--tinta);
  background: var(--papel-2);
  padding: var(--e4) var(--e5);
  font-size: 0.9375rem;
  color: var(--tinta-2);
  max-width: 74ch;
}
.faixa--marfim .aviso { background: var(--papel); }
.aviso p { max-width: none; }

/* Tabela de dados */
.tabela-envolvente { overflow-x: auto; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 32rem;
}
.tabela caption {
  text-align: left;
  font-family: var(--fonte-dado);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding-bottom: var(--e3);
}
.tabela th, .tabela td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.tabela thead th {
  font-family: var(--fonte-dado);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 500;
  border-bottom: 1.5px solid var(--linha-forte);
}
.tabela tbody th { font-weight: 500; }
.tabela th.nao-quebrar { white-space: nowrap; }

/* Situação */
.situacao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--fonte-dado);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--linha);
  color: var(--tinta-2);
  white-space: nowrap;
}
.situacao--ativa { border-color: var(--rubrica); color: var(--rubrica-escura); }
.situacao--pendente { border-style: dashed; color: var(--tinta-3); }

/* Cartões de navegação interna */
.atalhos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.atalho { background: var(--papel); box-shadow: 0 0 0 1px var(--linha); }
.faixa--marfim .atalho { background: var(--papel-2); }
.atalho a {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5);
  height: 100%;
  text-decoration: none;
  transition: background-color 140ms ease;
}
.atalho a:hover { background: var(--rubrica-tenue); color: var(--tinta); }
.atalho a:hover .atalho__seta { transform: translateX(0.25rem); }
.atalho__nome { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.atalho__seta { color: var(--rubrica); transition: transform 140ms ease; display: inline-block; }
.atalho__texto { font-size: 0.9125rem; color: var(--tinta-2); margin: 0; }

/* 10. Diagrama de fluxo -------------------------------------------------- */
.fluxo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
  counter-reset: etapa;
}
@media (min-width: 60rem) {
  .fluxo { grid-template-columns: repeat(5, 1fr); gap: var(--e2); }
}
.fluxo__etapa {
  counter-increment: etapa;
  position: relative;
  border: 1px solid var(--linha);
  border-top: 2px solid var(--rubrica);
  background: var(--papel);
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.faixa--marfim .fluxo__etapa { background: var(--papel-2); }
.fluxo__ordem {
  font-family: var(--fonte-dado);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: var(--rubrica);
}
.fluxo__nome { font-weight: 600; font-size: 0.9375rem; }
.fluxo__desc { font-size: 0.85rem; color: var(--tinta-2); margin: 0; max-width: none; }
.fluxo__etapa::after {
  content: "→";
  position: absolute;
  right: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rubrica);
  font-size: 0.9rem;
  background: var(--papel);
  padding: 0 0.15rem;
  z-index: 1;
}
.faixa--marfim .fluxo__etapa::after { background: var(--papel-2); }
.fluxo__etapa:last-child::after { content: none; }
@media (max-width: 59.99rem) {
  .fluxo__etapa::after {
    content: "↓";
    right: auto;
    left: var(--e4);
    top: auto;
    bottom: calc(var(--e4) * -1 - 0.35rem);
    transform: none;
  }
}

/* 11. Estado vazio e pendências ------------------------------------------ */
.estado-vazio {
  border: 1px dashed var(--linha);
  background: var(--papel-2);
  padding: var(--e6);
  max-width: 74ch;
}
.faixa--marfim .estado-vazio { background: var(--papel); }
.estado-vazio h3 { margin-bottom: var(--e3); }
.estado-vazio p { font-size: 0.9375rem; color: var(--tinta-2); }
.estado-vazio__rotulo {
  font-family: var(--fonte-dado);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rubrica);
  display: block;
  margin-bottom: var(--e3);
}

.pendente {
  font-family: var(--fonte-dado);
  font-size: 0.78rem;
  color: var(--tinta-3);
  border-bottom: 1px dashed var(--tinta-3);
}

/* 12. Formulário sem backend --------------------------------------------- */
.formulario { max-width: 44rem; }
.campo { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--e4); }
.campo label { font-size: 0.9375rem; font-weight: 500; }
.campo__ajuda { font-size: 0.8125rem; color: var(--tinta-3); }
.campo input, .campo textarea, .campo select {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 0;
  padding: 0.6rem 0.7rem;
  width: 100%;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--tinta);
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}
.campo textarea { min-height: 8rem; resize: vertical; }

.saida-formulario {
  margin-top: var(--e5);
  border: 1px solid var(--linha);
  border-left: 2px solid var(--rubrica);
  background: var(--papel-2);
  padding: var(--e5);
}
.saida-formulario[hidden] { display: none; }
.saida-formulario pre {
  font-family: var(--fonte-dado);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--papel);
  border: 1px solid var(--linha);
  padding: var(--e4);
  margin: var(--e4) 0;
  max-height: 22rem;
  overflow: auto;
}

/* 13. Impressão ---------------------------------------------------------- */
@media print {
  .cabecalho, .rodape__grade, .pular-para-conteudo, .nav__alternar,
  .grupo-btn, .btn, .atalhos { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .shell { width: 100%; }
  a { text-decoration: none; color: #000; }
  .faixa { padding: 1rem 0; border: 0; }
}

/* Perguntas frequentes -------------------------------------------------------
   Lista de pergunta e resposta, sem acordeão: todo o texto fica no HTML, legível
   sem JavaScript e extraível por leitores de tela e por motores de busca e de IA. */
.perguntas { margin-top: var(--e6); border-top: 1px solid var(--linha); }
.perguntas__item {
  border-bottom: 1px solid var(--linha);
  padding: var(--e5) 0;
}
.perguntas__pergunta {
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  margin-bottom: var(--e3);
  display: flex;
  gap: var(--e3);
}
.perguntas__pergunta::before {
  content: "?";
  font-family: var(--fonte-dado);
  font-size: 0.8em;
  color: var(--rubrica);
  flex: none;
  line-height: 1.6;
}
.perguntas__resposta { margin-bottom: 0; }
.perguntas__resposta + .perguntas__resposta { margin-top: var(--e3); }

/* Citação normativa ----------------------------------------------------------
   Trecho literal do Estatuto ou de fonte oficial, com atribuição visível. O
   <cite> nomeia a fonte para quem lê e para sistemas que extraem a passagem. */
.citacao {
  margin: var(--e6) 0;
  padding-left: var(--e5);
  border-left: 3px solid var(--rubrica);
}
.citacao p {
  font-family: var(--fonte-editorial);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  margin-bottom: var(--e3);
}
.citacao footer {
  font-size: 0.85rem;
  color: var(--tinta-3);
  font-family: var(--fonte-dado);
}
.citacao cite { font-style: normal; }