/* como-ler.css — página explicativa em linguagem leiga */

.como-ler-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
  max-width: var(--container-max-wide);
  margin: 0 auto;
  padding: var(--space-6);
}
@media (max-width: 900px) {
  .como-ler-layout { grid-template-columns: 1fr; }
}

/* Sumário lateral */
.sumario {
  position: sticky;
  top: var(--space-4);
  align-self: start;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  padding: var(--space-4) 0;
  border-right: 1px solid var(--surface-shade);
  padding-right: var(--space-4);
}
.sumario__titulo {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}
.sumario ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sumario;
}
.sumario li {
  counter-increment: sumario;
  margin-bottom: var(--space-1);
}
.sumario a {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  transition: background var(--transition), color var(--transition);
  line-height: 1.35;
}
.sumario a::before {
  content: counter(sumario, decimal-leading-zero);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.85em;
  min-width: 24px;
}
.sumario a:hover {
  background: var(--surface-shade);
  color: var(--ink-primary);
}
.sumario a.ativo {
  background: var(--surface-shade);
  color: var(--ink-primary);
  border-left: 2px solid var(--accent-bordo);
  padding-left: calc(var(--space-3) - 2px);
}

/* Conteúdo */
.como-ler-conteudo {
  max-width: 74ch;
  padding-bottom: var(--space-9);
}

.como-ler-conteudo h1 {
  font-size: var(--fs-hero);
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.como-ler-conteudo > .subtitulo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-secondary);
  margin-bottom: var(--space-7);
  max-width: 60ch;
  line-height: 1.5;
}

.como-ler-secao {
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--surface-shade);
  scroll-margin-top: var(--space-6);
}
.como-ler-secao:last-of-type { border-bottom: none; }
.como-ler-secao h2 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-3);
}
.como-ler-secao > .rotulo-secao {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent-bordo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}
.como-ler-secao h3 {
  font-size: var(--fs-h3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--ink-primary);
}
.como-ler-secao p, .como-ler-secao li {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-primary);
}
.como-ler-secao ul, .como-ler-secao ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}
.como-ler-secao li { margin-bottom: var(--space-2); }
.como-ler-secao code {
  background: var(--surface-shade);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.exemplo-caixa {
  background: var(--surface-page);
  border: 1px solid var(--surface-shade);
  border-left: 3px solid var(--accent-tinta);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-block: var(--space-4);
}
.exemplo-caixa__rotulo {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent-tinta);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

/* Tabelas de-para */
.depara {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-4);
  font-size: 0.95rem;
}
.depara th, .depara td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--surface-shade);
}
.depara th {
  background: var(--surface-shade);
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}
.depara td:first-child {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-secondary);
  white-space: nowrap;
}

/* Marca de âncora quando linkado */
.como-ler-secao:target > h2::after,
.como-ler-secao :target::after {
  content: "";
}
.como-ler-secao :target {
  background: rgba(184, 135, 58, 0.08);
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  transition: background 400ms ease-out;
}

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4);
}
.categoria-card {
  padding: var(--space-4);
  background: var(--surface-page);
  border: 1px solid var(--surface-shade);
  border-radius: var(--radius-md);
}
.categoria-card__nome {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--accent-bordo);
  margin-bottom: var(--space-1);
}
.categoria-card__funcao {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: var(--space-2);
}
.categoria-card__subitens {
  font-size: 0.9rem;
  color: var(--ink-secondary);
}