/**
 * Camada editorial do site público.
 *
 * NÃO é um segundo design system. Cada regra aqui usa exclusivamente tokens
 * `--one-*` de `tokens.css` — nenhuma cor literal, nenhum tamanho mágico. O que
 * este arquivo acrescenta são padrões de PÁGINA (faixa, medida de leitura,
 * escala tipográfica editorial) que o produto interno não precisa e que o site
 * não conseguiria compor só com primitivos de aplicação.
 *
 * A regra que mantém isso honesto: se um valor daqui precisar existir em duas
 * páginas com significados diferentes, ele vira token; se aparecer literal,
 * está errado.
 *
 * ## Sem JavaScript, e isso decide o CSS
 *
 * Não há menu que abre, acordeão, carrossel ou revelação ao rolar. Onde um site
 * comum usaria interação, aqui a informação está aberta. É consequência da CSP
 * `script-src 'none'` (ADR-PUBLIC-WEB-APP-ARCHITECTURE) e, na prática, é melhor
 * para leitura executiva: ninguém clica para descobrir o que já podia estar
 * escrito.
 */

/* ── Faixa ──────────────────────────────────────────────────────────────
 *
 * A unidade de composição da página. Uma faixa é uma ideia; trocar de faixa é
 * trocar de assunto. */

.one-band {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  padding-inline: var(--one-space-6);
}

.one-band--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.one-band--inverse {
  background: var(--one-surface-inverse);
  color: var(--one-text-on-inverse);
}

.one-band--soft {
  background: var(--one-surface-sunken);
}

.one-band + .one-band {
  border-top: 1px solid var(--one-border-subtle);
}

.one-band--inverse + .one-band,
.one-band + .one-band--inverse {
  border-top: 0;
}

/* ── Medida ─────────────────────────────────────────────────────────────
 *
 * `max-inline-size` em `ch` e não em `px`: a medida de leitura é função do
 * tamanho da fonte, e quem muda o corpo do texto no navegador espera que a
 * linha acompanhe. */

.one-measure {
  max-inline-size: 62ch;
}

.one-measure--wide {
  max-inline-size: 78ch;
}

.one-page {
  margin-inline: auto;
  max-inline-size: 72rem;
}

/* ── Tipografia editorial ───────────────────────────────────────────── */

.one-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--one-text-secondary);
  margin-block-end: 0.75rem;
}

.one-band--inverse .one-eyebrow {
  color: rgb(255 255 255 / 72%);
}

/* `clamp` em vez de media query: a escala é contínua, e não tem degrau onde
 * um layout quebra por meio pixel. */
.one-display {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

.one-h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

.one-h3 {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
}

.one-lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
  color: var(--one-text-secondary);
  margin-block-start: 1.25rem;
}

.one-band--inverse .one-lede {
  color: rgb(255 255 255 / 78%);
}

.one-prose p {
  margin-block: 0 1rem;
  line-height: 1.65;
}

.one-prose p:last-child {
  margin-block-end: 0;
}

/* ── Grades ─────────────────────────────────────────────────────────────
 *
 * `auto-fit` + `minmax` faz a responsividade sem media query: as colunas se
 * dissolvem quando não cabem, em qualquer largura, inclusive nas que ninguém
 * testou. */

.one-cols {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.one-cols--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.one-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

/* ── Item numerado — as fases e as etapas ───────────────────────────── */

.one-step {
  border-top: 2px solid var(--one-brand-interactive);
  padding-block-start: 1rem;
}

.one-step__n {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--one-text-secondary);
  margin-block-end: 0.5rem;
}

.one-band--inverse .one-step {
  border-top-color: var(--one-text-on-inverse);
}

.one-band--inverse .one-step__n {
  color: rgb(255 255 255 / 72%);
}

/* ── Definição — usada nos níveis de evidência e nas decisões do gate ── */

.one-deflist {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

.one-deflist dt {
  font-weight: 600;
}

.one-deflist dd {
  margin: 0.25rem 0 0;
  color: var(--one-text-secondary);
  line-height: 1.6;
}

.one-band--inverse .one-deflist dd {
  color: rgb(255 255 255 / 78%);
}

/* ── Cabeçalho e rodapé ─────────────────────────────────────────────── */

.one-siteheader {
  border-block-end: 1px solid var(--one-border-subtle);
  padding-block: 1rem;
  padding-inline: var(--one-space-6);
}

.one-siteheader__inner,
.one-sitefooter__inner {
  margin-inline: auto;
  max-inline-size: 72rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.one-wordmark {
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}

.one-wordmark span {
  color: var(--one-text-secondary);
  font-weight: 400;
}

.one-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
}

.one-nav a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  padding-block: 0.25rem;
}

.one-nav a:hover,
.one-nav a:focus-visible {
  border-block-end-color: currentColor;
}

.one-nav a[aria-current="page"] {
  border-block-end-color: var(--one-brand-interactive);
}

.one-sitefooter {
  background: var(--one-surface-inverse);
  color: var(--one-text-on-inverse);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--one-space-6);
}

.one-sitefooter__inner {
  align-items: start;
}

.one-sitefooter a {
  color: inherit;
}

.one-sitefooter__legal {
  margin-inline: auto;
  max-inline-size: 72rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgb(255 255 255 / 18%);
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 72%);
}

/* ── Ações ──────────────────────────────────────────────────────────────
 *
 * Elemento `<a>`, e não `<div>` com handler: sem JavaScript não existe a
 * alternativa errada. Foco visível é obrigatório (§29) e não é removido em
 * lugar nenhum deste arquivo. */

.one-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-block-start: 2rem;
}

.one-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--one-radius-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid currentColor;
  color: inherit;
}

.one-cta--primary {
  background: var(--one-surface-inverse);
  color: var(--one-text-on-inverse);
  border-color: var(--one-surface-inverse);
}

.one-band--inverse .one-cta--primary {
  background: var(--one-text-on-inverse);
  color: var(--one-surface-inverse);
  border-color: var(--one-text-on-inverse);
}

.one-cta:hover {
  opacity: 0.88;
}

:where(a, .one-cta):focus-visible {
  outline: 3px solid var(--one-brand-interactive);
  outline-offset: 3px;
}

/* Salto para o conteúdo: some da tela, volta ao foco pelo teclado. */
.one-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--one-surface-inverse);
  color: var(--one-text-on-inverse);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.one-skip:focus {
  inset-inline-start: 0;
}

/* ── Tabela editorial ───────────────────────────────────────────────── */

.one-table-wrap {
  overflow-x: auto;
  margin-block-start: 1.5rem;
}

.one-table {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 34rem;
  text-align: start;
}

.one-table th,
.one-table td {
  padding: 0.875rem 1rem;
  border-block-end: 1px solid var(--one-border-subtle);
  vertical-align: top;
  line-height: 1.55;
}

.one-table th {
  font-weight: 600;
  white-space: nowrap;
}

.one-table td:last-child {
  color: var(--one-text-secondary);
}

/* ── Nota — o lugar onde o site diz o que NÃO afirma ─────────────────── */

.one-note {
  border-inline-start: 3px solid var(--one-border-strong);
  padding-inline-start: 1rem;
  color: var(--one-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-block-start: 1.5rem;
}

.one-band--inverse .one-note {
  color: rgb(255 255 255 / 78%);
  border-inline-start-color: rgb(255 255 255 / 40%);
}

/* ── Movimento ──────────────────────────────────────────────────────────
 *
 * Não há animação nesta folha. A regra existe assim mesmo, porque uma
 * transição acrescentada depois herda a preferência sem ninguém lembrar. */

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