/* m2i — layout do site.
   Consome tokens.css e type.css. Nao define nenhuma cor nem nenhum tamanho
   tipografico proprio: build_site.py reprova se isso mudar.
   Espacamento e raio sao layout, nao existem no design system — sao daqui. */

:root {
  --e1: 8px;   --e2: 16px;  --e3: 24px;
  --e4: 40px;  --e5: 64px;  --e6: 104px;
  --r: 3px;
  --fio: 1px;
  /* d = 6% da largura do logotipo. O respiro minimo da marca e 2d. */
  --logo: 148px;
  /* A regua grossa marca estrutura de secao e leva o laranja da marca.
     Medido: laranja-600 da 4,11:1 sobre branco, acima do piso de 3:1 de
     elemento de interface. Fio fino e agrupamento interno seguem neutros. */
  --regua: var(--m2i-laranja-600);
  --respiro: calc(var(--logo) * 0.12);
  --faixa: 1180px;
}

:root[data-theme="dark"] { --regua: var(--m2i-laranja-500); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--m2i-superficie);
  color: var(--m2i-texto);
  font: var(--m2i-comunicacao-corpo);
  letter-spacing: var(--m2i-comunicacao-corpo-ls);
}

/* O sistema usa 600 para enfase; 700 e reservado a capa de impacto. */
strong { font-weight: 600; }

h1, h2, h3, p, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }

a { color: var(--m2i-acao); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--m2i-acao-hover); }

:focus-visible {
  outline: 2px solid var(--m2i-foco);
  outline-offset: 2px;
  border-radius: 1px;
}

.pular {
  position: absolute; left: var(--e2); top: calc(var(--e2) * -4);
  background: var(--m2i-superficie); color: var(--m2i-texto);
  padding: var(--e2); border-radius: var(--r); z-index: 10;
  transition: top .12s;
}
.pular:focus { top: var(--e2); }

.faixa {
  max-width: var(--faixa);
  margin-inline: auto;
  padding-inline: var(--e3);
}

/* ------------------------------------------------------------ cabecalho */

.topo {
  position: sticky; top: 0; z-index: 5;
  background: var(--m2i-superficie);
  border-bottom: var(--fio) solid var(--m2i-borda);
}
.topo .faixa {
  display: flex; align-items: center; gap: var(--e4);
  padding-block: var(--respiro);
}
.marca { display: block; margin-right: auto; padding: 0; }
.marca img { width: var(--logo); }
.marca-escuro { display: none; }
:root[data-theme="dark"] .marca-claro { display: none; }
:root[data-theme="dark"] .marca-escuro { display: block; }

.menu { display: flex; gap: var(--e3); }
.menu a {
  color: var(--m2i-texto-suave); text-decoration: none;
  padding-block: var(--e1);
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--m2i-texto); }
.menu a[aria-current="page"] {
  color: var(--m2i-texto);
  border-bottom-color: var(--m2i-acao);
}

/* ---------------------------------------------------------------- botao */

.botao {
  display: inline-block; text-decoration: none;
  padding: var(--e1) var(--e3);
  border-radius: var(--r);
  border: var(--fio) solid transparent;
  white-space: nowrap;
}
.botao-principal {
  background: var(--m2i-acao); color: var(--m2i-acao-texto);
}
.botao-principal:hover { background: var(--m2i-acao-hover); color: var(--m2i-acao-texto); }
.botao-vazado {
  color: var(--m2i-neutro-100);
  border-color: var(--m2i-navy-600);
}
.botao-vazado:hover {
  color: var(--m2i-superficie);
  border-color: var(--m2i-neutro-100);
  background: color-mix(in oklab, var(--m2i-neutro-100) 14%, transparent);
}

/* ---------------------------------------------------------------- heroi */

.heroi {
  position: relative; overflow: hidden;
  background: var(--m2i-navy-950);
  color: var(--m2i-neutro-100);
  padding-block: var(--e6);
}
:root[data-theme="dark"] .heroi { background: var(--m2i-superficie-afundada); }

/* O swash do "2": unico elemento proprietario da marca. 7% de opacidade,
   sangrando para fora do quadro, longe do texto. Regra do brandbook. */
.heroi::after {
  content: ""; position: absolute; pointer-events: none;
  right: -11%; top: -8%; width: 36%; aspect-ratio: 1;
  background: url("marca/m2i-simbolo.svg") no-repeat center / contain;
  opacity: .06;
}
.heroi .faixa { position: relative; z-index: 1; }

.heroi h1 {
  font: var(--m2i-comunicacao-display);
  letter-spacing: var(--m2i-comunicacao-display-ls);
  max-width: var(--m2i-medida-curta);
}
.heroi-sub {
  font: var(--m2i-comunicacao-destaque);
  letter-spacing: var(--m2i-comunicacao-destaque-ls);
  color: var(--m2i-neutro-300);
  max-width: var(--m2i-medida);
  margin-top: var(--e3);
}
.heroi-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }

/* Referencia normativa e ID: mono, no site inteiro. type.css define
   --m2i-produto-dado como "valor, ID, data, referencia normativa". */
.norma {
  font-family: var(--m2i-mono);
  font-size: calc(1em * var(--m2i-mono-escala));
  white-space: nowrap;
}

/* prova: fio unico, sem grid de cartoes */
.prova {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  margin-top: var(--e5); padding-top: var(--e3);
  border-top: var(--fio) solid var(--m2i-navy-700);
}
.prova div { flex: 0 0 auto; }
.prova dt {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
}
.prova dd { margin: 0; color: var(--m2i-neutro-400); }

/* -------------------------------------------------------------- secoes */

.secao { padding-block: var(--e6); }
.secao-calma { background: var(--m2i-superficie-elevada); }
.secao h2 {
  font: var(--m2i-comunicacao-h2);
  letter-spacing: var(--m2i-comunicacao-h2-ls);
  max-width: var(--m2i-medida-curta);
}
.secao-intro {
  max-width: var(--m2i-medida);
  margin-top: var(--e2);
  color: var(--m2i-texto-suave);
}

/* --------------------------------------------- registro dos sistemas */

.registro { margin-top: var(--e5); }
.registro-familia {
  font: var(--m2i-comunicacao-corpo);
  letter-spacing: var(--m2i-comunicacao-corpo-ls);
  color: var(--m2i-texto-suave);
  padding-bottom: var(--e1);
  border-bottom: 2px solid var(--regua);
}
.registro-familia + ul { border-top: 0; }
.registro ul { margin: 0 0 var(--e5); }
.registro ul:last-child { margin-bottom: 0; }
.registro li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 21rem) minmax(0, 1fr);
  gap: var(--e2) var(--e4);
  align-items: baseline;
  padding-block: var(--e4);
  border-bottom: var(--fio) solid var(--m2i-borda);
}
.registro-nome + .registro-oque { margin-top: var(--e1); }
.registro-capacidades {
  border-left: 2px solid var(--m2i-borda);
  padding-left: var(--e2);
}
.registro-capacidades li {
  display: block; padding: 0 0 var(--e1); border: 0;
  color: var(--m2i-texto-suave);
}
.registro-capacidades li:last-child { padding-bottom: 0; }
.registro-sigla {
  font: var(--m2i-produto-dado);
  letter-spacing: var(--m2i-produto-dado-ls);
  color: var(--m2i-acao);
  text-decoration: none;
}
.registro-nome {
  display: block;
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
}
.registro-oque { display: block; color: var(--m2i-texto-suave); }

/* ---------------------------------------------------------- capacidades */

.capacidades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4) var(--e4);
  margin-top: var(--e5);
}
.capacidades li {
  padding-top: var(--e2);
  border-top: 2px solid var(--regua);
}
.capacidades h3 {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
  margin-bottom: var(--e1);
}
.capacidades p { color: var(--m2i-texto-suave); }

/* ------------------------------------------------------ linhas e prova */

.linhas {
  margin-top: var(--e5);
  border-top: 2px solid var(--regua);
}
.linhas li:first-child { border-top: 0; }
.linhas li:last-child { border-bottom: var(--fio) solid var(--m2i-borda); }
.linhas li {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--e2) var(--e4);
  padding-block: var(--e3);
  border-top: var(--fio) solid var(--m2i-borda);
}
.linhas h3 {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
}
.linhas p { color: var(--m2i-texto-suave); max-width: var(--m2i-medida); }

.pendente {
  margin-top: var(--e4);
  padding: var(--e4);
  border: 2px dashed var(--m2i-borda-forte);
  border-radius: var(--r);
  max-width: var(--m2i-medida);
  color: var(--m2i-texto-suave);
}
.pendente h3 {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
  color: var(--m2i-texto);
  margin-bottom: var(--e2);
}

/* ------------------------------------------------------------ cta e rodape */

.fechamento {
  background: var(--m2i-navy-950);
  color: var(--m2i-neutro-100);
  padding-block: var(--e6);
}
:root[data-theme="dark"] .fechamento { background: var(--m2i-superficie-afundada); }
.fechamento h2 {
  font: var(--m2i-comunicacao-h1);
  letter-spacing: var(--m2i-comunicacao-h1-ls);
  max-width: var(--m2i-medida-curta);
}
.fechamento p { color: var(--m2i-neutro-300); max-width: var(--m2i-medida); margin-top: var(--e2); }
.fechamento .heroi-acoes { margin-top: var(--e4); }

.rodape {
  background: var(--m2i-navy-950);
  color: var(--m2i-neutro-300);
  border-top: var(--fio) solid var(--m2i-navy-700);
}
:root[data-theme="dark"] .rodape { background: var(--m2i-superficie-afundada); }
.rodape a { color: var(--m2i-neutro-100); }
.rodape a:hover { color: var(--m2i-superficie); }
.rodape-grade {
  display: grid; gap: var(--e4);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  padding-block: var(--e5);
}
.rodape-marca { width: 148px; }
.rodape-linha { margin-top: var(--e3); max-width: var(--m2i-medida-curta); }
.rodape-titulo {
  font: var(--m2i-comunicacao-corpo);
  letter-spacing: var(--m2i-comunicacao-corpo-ls);
  color: var(--m2i-neutro-100);
  margin-bottom: var(--e2);
}
.rodape-lista li { padding-block: 3px; }
.rodape-lista a {
  font: var(--m2i-produto-dado);
  letter-spacing: var(--m2i-produto-dado-ls);
  text-decoration: none;
}
.rodape-lista a:hover { text-decoration: underline; }
.rodape-fim {
  border-top: var(--fio) solid var(--m2i-navy-700);
  padding-block: var(--e3);
  font: var(--m2i-comunicacao-corpo);
  letter-spacing: var(--m2i-comunicacao-corpo-ls);
  color: var(--m2i-neutro-400);
}

/* ---------------------------------------------------------- responsivo */

@media (max-width: 900px) {
  :root { --e6: 64px; --e5: 40px; }
  .topo-cta { display: none; }
  .menu { gap: var(--e2); }
  .heroi h1 { font: var(--m2i-comunicacao-h1); letter-spacing: var(--m2i-comunicacao-h1-ls); }
  .fechamento h2 { font: var(--m2i-comunicacao-h2); letter-spacing: var(--m2i-comunicacao-h2-ls); }
  .registro li { grid-template-columns: 5rem minmax(0, 1fr); }
  .registro-capacidades { grid-column: 2; }
  .capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linhas li { grid-template-columns: minmax(0, 1fr); }
  .rodape-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 620px) {
  :root { --logo: 130px; --e6: 48px; }
  .topo .faixa { flex-wrap: wrap; gap: var(--e2); }
  .heroi h1 { font: var(--m2i-comunicacao-h2); letter-spacing: var(--m2i-comunicacao-h2-ls); }
  .heroi-sub { font: var(--m2i-comunicacao-corpo); letter-spacing: var(--m2i-comunicacao-corpo-ls); }
  .secao h2 { font: var(--m2i-comunicacao-h3); letter-spacing: var(--m2i-comunicacao-h3-ls); }
  .prova { gap: var(--e3); }
  .registro li { grid-template-columns: minmax(0, 1fr); }
  .registro-capacidades { grid-column: 1; }
  .capacidades { grid-template-columns: minmax(0, 1fr); }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ------------------------------------------------------- pagina produtos */

/* Altura do cabecalho fixo. So serve para o scroll-margin das ancoras:
   sem isto o link #sgro para a ficha embaixo do proprio cabecalho. */
:root { --topo: 122px; }

/* Nota do heroi: o decodificador do nome. Mesmo fio da tira de prova,
   um degrau abaixo do subtitulo. */
.heroi-nota {
  color: var(--m2i-neutro-400);
  max-width: var(--m2i-medida);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: var(--fio) solid var(--m2i-navy-700);
}

/* Indice: reaproveita a grade de .capacidades; so desliga o fio e o
   respiro que aquela regra poe em toda li, inclusive nas internas. */
.indice li li { border-top: 0; padding-top: 0; padding-block: 2px; }
.indice a { text-decoration: none; }
.indice a:hover { text-decoration: underline; }

/* Ficha de sistema: identidade a esquerda, campos a direita, fio entre
   linhas. Nao e cartao — nao tem fundo, nem sombra, nem caixa. */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: var(--e3) var(--e5);
  padding-block: var(--e5);
  border-top: 2px solid var(--regua);
  scroll-margin-top: calc(var(--topo) + var(--e2));
}
/* O fio da primeira ficha nao pode encostar no texto de abertura da secao. */
.secao-intro + .ficha { margin-top: var(--e5); }
.ficha:last-of-type { padding-bottom: 0; }
.ficha-titulo {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
}
.ficha-sigla {
  display: block;
  font: var(--m2i-produto-dado);
  letter-spacing: var(--m2i-produto-dado-ls);
  color: var(--m2i-texto-suave);
  margin-bottom: var(--e1);
}
.ficha-problema { color: var(--m2i-texto-suave); margin-top: var(--e2); }
.ficha-campos div + div { margin-top: var(--e3); }
.ficha-campos dt {
  font-weight: 600;
  padding-bottom: var(--e1);
  border-bottom: var(--fio) solid var(--m2i-borda);
}
.ficha-campos dd { margin: var(--e2) 0 0; color: var(--m2i-texto-suave); }
.ficha-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--e4);
}
.ficha-lista li {
  padding-block: var(--e1);
  border-top: var(--fio) solid var(--m2i-borda);
}

@media (max-width: 900px) {
  .ficha { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
}

@media (max-width: 620px) {
  :root { --topo: 164px; }
  .ficha-lista { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------- pagina consultoria */

/* Os nove servicos, tres por tema. A grade externa e a de .capacidades: o
   fio grosso marca o tema. O item interno tira esse fio e ganha respiro
   proprio — mesmo recurso do .indice na pagina de produtos. */
.servicos li ul { margin-top: var(--e2); }
.servicos li li { border-top: 0; padding: 0; }
.servicos li li + li { margin-top: var(--e3); }
.servicos strong { color: var(--m2i-texto); }


/* -------------------------------------------------------- pagina contato */

/* A unica pagina que nao vende. Sem heroi: o titulo abre e o formulario
   comeca na primeira dobra. A metrica aqui e quantos campos o visitante
   preenche antes de desistir. */
.contato { padding-top: var(--e5); }
.contato h1 {
  font: var(--m2i-comunicacao-h1);
  letter-spacing: var(--m2i-comunicacao-h1-ls);
  max-width: var(--m2i-medida-curta);
}
.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e5) var(--e6);
  align-items: start;
  margin-top: var(--e5);
}

/* Os dois grupos do formulario. O legend leva o mesmo fio do dt da ficha:
   e a mesma ideia — rotulo de campo com regua embaixo. */
.contato-form fieldset { margin: 0; padding: 0; border: 0; }
.contato-form fieldset + fieldset { margin-top: var(--e4); }
.contato-form legend {
  width: 100%;
  padding: 0 0 var(--e1);
  font-weight: 600;
  border-bottom: var(--fio) solid var(--m2i-borda);
}
.contato-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin-top: var(--e3);
}
.contato-campo-largo { grid-column: 1 / -1; }
.contato-campo label { display: block; margin-bottom: var(--e1); }
/* Obrigatorio e opcional ditos por escrito, nao so por cor ou asterisco.
   Entram no nome acessivel do campo: "Nome obrigatorio". */
.contato-marca { color: var(--m2i-texto-suave); }

/* input, select e textarea NAO herdam fonte: tem de ser declarada.
   A borda usa texto-suave, nao borda-forte: elemento de interface pede
   3:1 e o cinza claro nao entrega isso sobre branco. */
.contato-form input,
.contato-form select,
.contato-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--e1) var(--e2);
  font: var(--m2i-comunicacao-corpo);
  letter-spacing: var(--m2i-comunicacao-corpo-ls);
  color: var(--m2i-texto);
  background: var(--m2i-superficie);
  border: var(--fio) solid var(--m2i-texto-suave);
  border-radius: var(--r);
}
.contato-form textarea { resize: vertical; }
.contato-form input:hover,
.contato-form select:hover,
.contato-form textarea:hover { border-color: var(--m2i-texto); }
/* O foco global ja poe o anel de --m2i-foco; a borda escurece junto para
   o campo nao depender so do anel. */
.contato-form input:focus-visible,
.contato-form select:focus-visible,
.contato-form textarea:focus-visible { border-color: var(--m2i-acao); }

/* No escuro o campo afunda: superficie e a mesma cor da pagina, e campo da
   cor do fundo so se ve pela borda. color-scheme escurece o menu nativo
   do select, que o navegador desenha fora do nosso CSS. */
:root[data-theme="dark"] .contato-form input,
:root[data-theme="dark"] .contato-form select,
:root[data-theme="dark"] .contato-form textarea {
  background: var(--m2i-superficie-afundada);
  color-scheme: dark;
}

.contato-enviar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e2) var(--e3);
  margin-top: var(--e4);
}
.contato-form .botao {
  font: var(--m2i-comunicacao-corpo);
  letter-spacing: var(--m2i-comunicacao-corpo-ls);
  cursor: pointer;
}
.contato-enviar p { color: var(--m2i-texto-suave); }

/* Canais: fio grosso em cima, como .capacidades. Nao e cartao. */
.contato-canais {
  padding-top: var(--e2);
  border-top: 2px solid var(--regua);
}
.contato-canais h2 {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
}
.contato-canal {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: var(--fio) solid var(--m2i-borda);
}
.contato-canal h3 { font-weight: 600; }
.contato-canal p + p { margin-top: var(--e1); color: var(--m2i-texto-suave); }
/* O telefone e o unico dado de contato verificado que existe. Tamanho de
   subtitulo, e mono por dentro via .norma: e um identificador. */
.contato-tel {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
  margin-top: var(--e1);
}
.contato-tel a { text-decoration: none; }
.contato-tel a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .contato-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
}

@media (max-width: 620px) {
  .contato h1 { font: var(--m2i-comunicacao-h2); letter-spacing: var(--m2i-comunicacao-h2-ls); }
  .contato-campos { grid-template-columns: minmax(0, 1fr); }
  .contato-enviar .botao { width: 100%; text-align: center; }
}

/* --------------------------------------------------------- pagina sobre */

/* O proposito da empresa, reescrito em caixa normal. E uma frase so, e ela
   precisa pesar mais que o corpo sem virar titulo. Nenhuma classe existente
   poe texto na escala destaque sobre superficie clara: .heroi-sub so serve
   no fundo escuro. O fio de 2px a esquerda e o mesmo de .capacidades li. */
.declaracao {
  font: var(--m2i-comunicacao-destaque);
  letter-spacing: var(--m2i-comunicacao-destaque-ls);
  max-width: var(--m2i-medida);
  margin-top: var(--e3);
  padding-left: var(--e3);
  border-left: 2px solid var(--regua);
}

@media (max-width: 620px) {
  .declaracao {
    font: var(--m2i-comunicacao-corpo);
    letter-spacing: var(--m2i-comunicacao-corpo-ls);
    padding-left: var(--e2);
  }
}

/* Detalhamento em breve: o sistema existe e e vendido; o que falta e a lista
   de recursos. Nao pode parecer defeito nem promessa de produto futuro. */
.em-breve {
  color: var(--m2i-texto-suave);
  border-left: 2px solid var(--m2i-borda-forte);
  padding-left: var(--e2);
  max-width: var(--m2i-medida);
}
.registro-conta {
  margin-top: var(--e1);
  padding-top: var(--e1);
  border-top: var(--fio) solid var(--m2i-borda);
  color: var(--m2i-texto-suave);
}
.ficha-grupo + .ficha-grupo { margin-top: var(--e3); }
.ficha-grupo h4 {
  font: var(--m2i-comunicacao-corpo);
  letter-spacing: var(--m2i-comunicacao-corpo-ls);
  color: var(--m2i-texto);
  margin-bottom: var(--e1);
}

/* --- cor: tratamento A, escolhido em 2026-09-04 --------------------------
   Medido: laranja-400 da 2,13:1 sobre branco (reprova) mas 7,18:1 sobre o
   navy-950 (passa como texto corrido). laranja-700 da 6,02:1 sobre branco.
   A restricao que eu tinha aplicado ao site inteiro valia para um tom sobre
   um fundo. A regua usa --regua; aqui ficam identidade e referencia.
   Acao, link e estado ativo continuam navy: isso e sobre interacao. */
.registro-sigla, .ficha-sigla { color: var(--m2i-laranja-700); }
.heroi .norma, .fechamento .norma { color: var(--m2i-laranja-400); }
.ficha-lista li::marker { color: var(--m2i-laranja-600); }

:root[data-theme="dark"] .registro-sigla,
:root[data-theme="dark"] .ficha-sigla { color: var(--m2i-laranja-400); }


/* ------------------------------------------------------ pagina estrutura */

/* Nota fechando uma secao: um degrau abaixo do corpo, sem virar legenda de
   produto. Mesma funcao do .secao-intro, do outro lado do bloco. */
.secao-nota {
  margin-top: var(--e3);
  max-width: var(--m2i-medida);
  color: var(--m2i-texto-suave);
}

/* O laco. Vertical, nao em seis colunas: cada passo tem uma frase inteira e
   uma lista de siglas, e isso nao cabe em coluna de 180px. A grade e a mesma
   ideia do .registro — codigo a esquerda, nome, descricao, e o elo a direita. */
.ciclo {
  margin-top: var(--e5);
  border-top: 2px solid var(--regua);
}
.ciclo li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 11rem) minmax(0, 1fr) minmax(0, 11rem);
  gap: var(--e1) var(--e4);
  align-items: baseline;
  padding-block: var(--e3);
  border-bottom: var(--fio) solid var(--m2i-borda);
}
.ciclo-n {
  color: var(--m2i-texto-suave);
  font-variant-numeric: tabular-nums;
}
.ciclo-passo {
  font: var(--m2i-comunicacao-h3);
  letter-spacing: var(--m2i-comunicacao-h3-ls);
}
.ciclo-oque { color: var(--m2i-texto-suave); }
/* As siglas que atuam no passo. Quebram em linha propria quando nao cabem. */
.ciclo-onde { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); }
.ciclo-volta {
  margin-top: var(--e3);
  max-width: var(--m2i-medida);
  color: var(--m2i-texto-suave);
}

/* Taxonomia. Tabela de verdade: sao dados, com cabecalho de coluna e
   cabecalho de linha. A primeira coluna e th porque a exigencia e que
   identifica a linha, nao o sistema. */
.taxonomia-rolagem { overflow-x: auto; margin-top: var(--e5); }
.taxonomia {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
  text-align: left;
}
.taxonomia thead th {
  padding: 0 var(--e3) var(--e1) 0;
  border-bottom: 2px solid var(--regua);
  color: var(--m2i-texto-suave);
  font-weight: 400;
}
.taxonomia tbody th,
.taxonomia td {
  padding: var(--e3) var(--e3) var(--e3) 0;
  border-bottom: var(--fio) solid var(--m2i-borda);
  vertical-align: baseline;
}
.taxonomia tbody th { font-weight: 600; }
.taxonomia td { color: var(--m2i-texto-suave); }
.taxonomia-linha { white-space: nowrap; }
/* Cobertura que a m2i nao tem. Dito por escrito, nao por celula vazia:
   celula vazia numa tabela normativa parece esquecimento. */
.taxonomia-sem { color: var(--m2i-texto-suave); }

/* A matriz 5x5. Nao e tela de produto: e o instrumento da disciplina, do
   mesmo jeito que uma pauta e o instrumento da musica. As 25 celulas saem de
   build_site.py a partir dos tetos em sistemas.py. */
.matriz-rolagem { margin-top: var(--e5); }
.matriz { border-collapse: separate; border-spacing: 2px; width: 100%; max-width: 44rem; }
.matriz caption {
  text-align: left;
  padding-bottom: var(--e2);
  color: var(--m2i-texto-suave);
}
.matriz th { width: 2.5rem; color: var(--m2i-texto-suave); font-weight: 400; }
.matriz td {
  width: 19%;
  padding: var(--e2) var(--e1);
  text-align: center;
  border-radius: 2px;
}
/* A nota fica visivel mas nao compete com a sigla: a sigla e o que se le. */
.matriz-nota { display: block; opacity: .7; }

.matriz-legenda {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  margin-top: var(--e3);
}
.matriz-legenda li { padding: 2px var(--e2); border-radius: 2px; }

/* Rampa de risco: fill de fundo, ink de texto. Os dois vem em par de
   tokens.css, e as matizes ficam a 20 graus ou mais do laranja da marca —
   cor de dado nunca se confunde com cor de marca. */
.matriz-muito-baixo {
  background: var(--m2i-risco-muito-baixo-fill);
  color: var(--m2i-risco-muito-baixo-ink);
}
.matriz-baixo {
  background: var(--m2i-risco-baixo-fill);
  color: var(--m2i-risco-baixo-ink);
}
.matriz-medio {
  background: var(--m2i-risco-medio-fill);
  color: var(--m2i-risco-medio-ink);
}
.matriz-alto {
  background: var(--m2i-risco-alto-fill);
  color: var(--m2i-risco-alto-ink);
}
.matriz-critico {
  background: var(--m2i-risco-critico-fill);
  color: var(--m2i-risco-critico-ink);
}

@media (max-width: 900px) {
  .ciclo li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .ciclo-oque, .ciclo-onde { grid-column: 2; }
}

@media (max-width: 620px) {
  .matriz td { padding: var(--e1) 2px; }
  .matriz th { width: 1.5rem; }
}


/* --------------------------------------------------- alternador de tema */

/* Tres estados, os mesmos que tokens.css sempre previu: claro, escuro e o
   padrao do sistema. "Sistema" nao e um terceiro tema — e a ausencia de
   data-theme, que devolve a decisao para a consulta de midia de tema.css.
   O controle so aparece com JS: sem ele o site continua certo pelo sistema,
   e botao morto e pior que botao ausente. */
.tema { display: none; }
.js .tema {
  display: flex;
  border: var(--fio) solid var(--m2i-borda);
  border-radius: var(--r);
  overflow: hidden;
}
.topo-acoes { display: flex; align-items: center; gap: var(--e2); }

/* O nome fica no acessivel, nao na tela: e o rotulo que o leitor de tela
   anuncia. Nao usa aria-label porque texto de verdade e traduzido e lido por
   mais coisa do que atributo. */
.tema-nome {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.tema-op {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  padding: 0; margin: 0;
  background: none;
  border: 0;
  color: var(--m2i-texto-suave);
  cursor: pointer;
}
.tema-op + .tema-op { border-left: var(--fio) solid var(--m2i-borda); }
.tema-op:hover { color: var(--m2i-texto); background: var(--m2i-superficie-elevada); }
/* O estado ligado usa a cor de acao — navy. E interface, nao dado: a regra de
   que acao e navy vale aqui como vale no botao. */
.tema-op[aria-pressed="true"] {
  color: var(--m2i-acao-texto);
  background: var(--m2i-acao);
}
.tema-op svg { display: block; width: 16px; height: 16px; }