/* =========================================================================
   SITE.CSS — Direcao C · Estrutural
   home (Task 2) + /sistema, /alessandro, /privacidade, /404 (Task 3), 29/07/2026

   A pagina e uma PRANCHA: grid honesto, cotas na margem, quase nenhuma cor.
   Portado de scratchpad/direcoes/c-estrutural.html; o PORQUE de cada decisao
   esta em c-estrutural-notas.md. Tokens de cor/fonte vem de tokens.css
   (Task 1) — aqui so entram medidas de layout e o realce derivado da rampa.

   AS CINCO PAGINAS USAM UM SISTEMA SO. Nao existe (nem pode voltar a existir)
   um bloco de "registro antigo" no fim deste arquivo: a Task 3 portou as
   quatro paginas internas e apagou a cerca inteira. Classe nova aqui tem que
   pertencer a esta familia — posicionar no mesmo grid de 12 colunas, usar os
   mesmos tokens, e obedecer as quatro regras abaixo.

   AS QUATRO REGRAS DE RACIONAMENTO DAS REGUAS (a tese inteira da direcao —
   e o que separa "grid visivel" de "papel milimetrado"):

     1. UMA VERTICAL POR FAIXA, e so o limite que aquela faixa realmente usa.
        Nenhuma regua cruza texto: cada uma e literalmente a borda esquerda do
        que esta ao lado dela.
          hero        -> col 3 (onde o h1 comeca) + fechamento da col 11
          quem        -> col 7 (onde o bloco de texto comeca; a foto ocupa a
                         margem esquerda, por isso a col 3 nao aparece ali)
          sistema     -> col 3
          diferenciais-> col 3
          convite     -> col 3
     2. HORIZONTAIS SO EM FRONTEIRA DE SECAO. Na HOME sao sete (o numero e um
        fato de uma pagina de 5 faixas, nao uma cota magica — /sistema tem 9
        porque tem 8 faixas, e as 9 sao fronteira de secao de verdade):
          1) borda de baixo do titulo da prancha (.sheet-head)
          2) escala de cotas que fecha o hero (.ticks)
          3) borda de cima da faixa do sistema (.band--field)
          4) escala de cotas que gradua o quadro de pecas (.ticks)
          5) borda de baixo da faixa do sistema (.band--field)
          6) borda de cima da faixa do convite (.band--rule)
          7) borda de cima do rodape (.footer)
        Se voce for acrescentar um filete horizontal, esta lista tem que
        crescer de proposito — e o defeito mais facil de introduzir aqui e um
        divisor interno "so pra organizar" (foi por isso que o .footer__legal
        perdeu o border-top que tinha no registro antigo).
     3. A ESCALA DE COTAS APARECE DUAS VEZES: fecha o hero (declara o modulo
        de 12) e gradua o quadro de pecas (a linha da escala E o filete de
        topo do quadro). Traco de 7px, nao linha continua — e regua, nao malha.
     4. UMA LEI TIPOGRAFICA SO: texto encosta na regua vertical, SEMPRE. Sem
        recuo optico em lugar nenhum. E esse encosto que deixa o alinhamento
        verificavel a olho nu; duas leis matam a prova.

   FECHAMENTO: toda vertical NASCE E MORRE numa horizontal. Nenhuma regua
   termina solta no padding — foi o defeito que o primeiro render do mockup
   teve e que o designer corrigiu. Na pratica: o padding de baixo do hero e
   ZERO (a escala de cotas e o terminal), e a col 7 da faixa seguinte desce
   da mesma linha.

   BODONI SO NO H1 DO HERO DA HOME (seletor `.hero h1`). Um segundo lugar de
   serifa mata o efeito — por isso o `h1` generico e Archivo, e as outras
   quatro paginas (que abrem com `.abre h1`) nao herdam o serifado. A enfase
   de "sem supervisao" e ITALICO DO MESMO BODONI (`.hero h1 em`), nunca uma
   familia injetada numa palavra.

   CAVEAT SO NA ANOTACAO DE /sistema (`.anotacao`, dentro de #agentes-de-ia).
   E a unica marca feita a mao numa folha inteira de marcas desenhadas; um
   segundo lugar teria o mesmo efeito que um segundo lugar de serifa.

   LIMAO ZERO NA INTERFACE. Ele vive dentro do PNG do logo e mais nada.
   ========================================================================= */

:root {
  /* --- medidas do sistema (uma so, usada em tudo) --- */
  --max:    1280px;
  --pad:    40px;
  --gutter: 24px;
  --band:   clamp(4.5rem, 7.5vw, 8rem);
  /* o mockup tinha tambem --col e --pitch (largura e passo de uma coluna),
     porque a escala de cotas era pintada com uma funcao de imagem no passo
     da coluna. Aqui os tracos sao itens do proprio grid (ver .ticks), entao
     as duas variaveis nao tinham mais nenhum consumidor e sairam: token que
     so existe no CSS e armadilha pro proximo a mexer. */

  /* --- realce de linha do quadro de pecas (hover) ------------------------
     O mockup usava preto puro a 3,5% no claro e branco puro a 4,5% no escuro
     (os literais nao estao escritos aqui de proposito: o verify escaneia texto
     bruto, comentario incluido, e a propria mencao reprovaria o build).
     Preto e branco puros NAO estao na rampa — e a trava do lib/checks.mjs
     existe justamente pra fechar essa porta, entao NAO se pede excecao pra ela.
     Solucao: o realce e o proprio --ink de cada modo em alfa baixo, escrito
     como tripla RGB literal porque rgba() nao aceita var() no canal de cor
     sem um token de tripla (que tokens.css, da Task 1, nao expoe).
       claro: 35,34,32    = #232220 = --ink claro
       escuro: 238,236,230 = #EEECE6 = --ink escuro
     As duas triplas estao na whitelist TOKEN_RGB, entao a trava VALIDA o
     valor em vez de ser contornada. Alfa calibrado pra igualar a densidade
     do mockup sobre --paper-field (medido: 232.8 vs 232.6 no claro,
     45.2 vs 44.9 no escuro — diferenca de menos de 1/255). */
  --tint: rgba(35,34,32,.04);

  /* o navegador precisa saber o esquema pra pintar barra de rolagem e
     controles no registro certo — sem isso o dark mode fica com calha branca */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root { --tint: rgba(238,236,230,.05); }
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* SEM `overflow-x: hidden` — o mockup tinha, este site NAO pode ter.
     Ele torna o criterio de aceite infalsificavel: com ele, toda medicao de
     scrollWidth == clientWidth da verdadeira POR CONSTRUCAO. Se aparecer
     overflow, conserte a CAUSA (quase sempre a sangria negativa da
     .peca--chave em telas estreitas ou um max-width faltando); nao
     recoloque esta linha. */
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

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

/* -------------------------------------------------------------------------
   CONTEINER E GRID
   Um unico grid de 12 colunas. Tudo na pagina se posiciona por span de
   coluna — por isso as linhas visiveis significam alguma coisa: sao limites
   que o conteudo realmente usa.
   ------------------------------------------------------------------------- */

.wrap {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* MOBILE-FIRST DE PROPOSITO, e isso NAO e preferencia de estilo: as 12
   colunas e TODO `grid-column` vivem num unico bloco `@media (min-width:
   861px)` (o "MAPA DE COLUNAS", mais abaixo). O mockup fazia o contrario —
   declarava as colunas sempre e zerava tudo com `grid-column: auto` na media
   query estreita — e ali isso funcionava porque todo seletor de posicao era
   de uma classe so. Aqui nao da: `.hero .hero__sub` (0,2,0) e um
   `.cta > h2` (0,1,1) VENCEM um `.grid > *` (0,1,0) e sobrevivem ao
   colapso; o grid entao cria colunas implicitas pra atender a col 3-11 que
   sobrou e esmaga o conteudo. Medido antes de consertar, em 375px:
   scrollWidth 418 contra clientWidth 375, h1 em 12 linhas, subtexto em 18.
   E o MESMO defeito que o primeiro render do mockup teve. Com o mapa numa
   media query de largura minima, a regra simplesmente nao existe embaixo de
   861px e nao ha disputa de especificidade pra perder. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0; /* espacamento vertical e sempre explicito, nunca herdado */
}

/* Linhas estruturais: overlay que compartilha o MESMO grid do conteudo.
   Cada secao revela so o limite que ela de fato usa (regra 1). O overlay e
   absoluto dentro do .wrap, entao nasce no topo e morre na base da faixa —
   que e sempre uma horizontal. */
.rules {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pad); right: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  pointer-events: none;
}
.rules i { display: block; height: 100%; }
.r-open-3   { grid-column: 3;  border-left:  1px solid var(--rule); }
.r-close-11 { grid-column: 11; border-right: 1px solid var(--rule); }
.r-open-7   { grid-column: 7;  border-left:  1px solid var(--rule); }

/* Escala de cotas: tracos curtos no passo exato da coluna (regra 3).
   Aparece DUAS vezes na pagina inteira — declara o modulo (fecha o hero) e
   gradua o quadro de pecas. Traco de 7px, nao linha continua: e regua, nao
   malha. NAO e papel milimetrado.

   DESVIO DE IMPLEMENTACAO (mesmo desenho, outra tecnica): o mockup pintava os
   tracos com uma funcao de degrade de duas paradas da MESMA cor, repetida no
   passo da coluna. Aqui isso reprova o build: a regra `gradiente` do
   lib/checks.mjs casa o nome daquela funcao como texto bruto, sem olhar se e
   degrade de verdade (e por isso ele nao aparece nem neste comentario).
   Entao os tracos sao os PROPRIOS itens do grid: um `<i>` por divisao, cada um
   com border-left, no mesmo mecanismo (e no mesmo passo de coluna) das
   .rules. Resultado identico em pixel, sem funcao de imagem. */
.ticks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  height: 7px;
  border-top: 1px solid var(--rule-strong);
}
.ticks i {
  display: block;
  height: 100%;
  border-left: 1px solid var(--rule-strong);
}
/* o ultimo traco fecha a escala pela direita, como a cota de uma prancha */
.ticks i:last-child { border-right: 1px solid var(--rule-strong); }

/* -------------------------------------------------------------------------
   TIPOGRAFIA
   ------------------------------------------------------------------------- */

/* Cota: mono pequeno, sentence case, sem capsula e sem cor. Nao e eyebrow —
   e anotacao de margem.

   `.label` era o nome antigo da mesma coisa. A Task 3 trocou a classe nas 5
   pecas que podia editar (as 4 paginas + cta.html) e deixou so os dois usos
   de src/partials/footer.html ("Onde estamos" / "Falar comigo") por fronteira
   de escopo. A Task 4 fechou os dois: o footer agora usa `.cota` como todo
   mundo, e o apelido `.label` saiu daqui e de `.footer__grid .label`
   (renomeado pra `.footer__grid .cota` logo abaixo, pra nao perder o
   espacamento). */
.cota {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: .05em;
  color: var(--ink-2);
  margin: 0;
}

/* h1 generico: Archivo. O serifado e privilegio do hero da home (ver abaixo). */
h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
}

h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.65rem, 2.9vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0;
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.22;
  letter-spacing: -.012em;
  margin: 0;
}

p { margin: 0; }

.corpo { color: var(--ink-2); max-width: 68ch; }
.corpo + .corpo { margin-top: 1.05em; }

/* Link sobrio: sem cor, sem borda de caixa. Sublinhado que engrossa. */
.link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color .18s ease, color .18s ease;
}
.link:hover { border-bottom-color: var(--ink); }

/* Filete embaixo de uma palavra dentro do texto (/privacidade e /404 marcam
   uma palavra do h1 assim). Na paleta antiga isto era um plano de limao;
   limao saiu da interface e a folha ja tem UMA marca pra "olhe aqui" — o
   filete, o mesmo peso e o mesmo token do sublinhado dos links. Nao se
   inventa uma segunda marca so porque a primeira sumiu de cor. */
.marca-texto { box-shadow: inset 0 -.1em 0 var(--rule-strong); }

/* Sublinhado de link dentro de texto corrido (nao e o `.link` de cota mono:
   este e o `<a>` que aparece no meio de um paragrafo). Sem cor, so filete. */
.link-texto {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color .18s ease;
}
.link-texto:hover { border-bottom-color: var(--ink); }

/* Bloco de tinta cheia. Cantos retos, sem cor viva. */
.btn {
  display: inline-block;
  padding: 20px 38px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--ink);
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn:active { transform: translateY(1px); }

/* -------------------------------------------------------------------------
   TITULO DA PRANCHA (cabecalho)
   O mockup tinha so o logo. Aqui a navegacao das outras 3 paginas fica —
   tirar link de nav de um site de 4 paginas seria regressao de IA, nao
   fidelidade ao mockup. Os rotulos sao os mesmos de antes.
   ------------------------------------------------------------------------- */

.sheet-head { border-bottom: 1px solid var(--rule); }   /* horizontal 1 de 7 */
.sheet-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 76px;
  padding-block: 14px;
}
.sheet-head__logo { display: block; }

/* TAMANHO DO LOGO — 172px -> 232px (pedido do dono, 29/07/2026: "maior").
   O alvo que veio do screenshot era ~245px. Parei em 232, e o motivo e uma
   medida, nao gosto:

   OS DOIS PNGs NAO TEM A MESMA PROPORCAO. Medido no IHDR dos arquivos:
     logo-horizontal.png (claro)  2410x460 -> 5.239
     logo-reverso.png    (escuro) 2252x460 -> 4.896
   O reverso e 6,5% MAIS ALTO na mesma largura em CSS. Como o <picture> troca
   um pelo outro conforme o esquema, quem manda na altura do cabecalho e
   sempre o reverso.

   O cabecalho tem min-height 76px e 14px de padding em cima e embaixo, entao
   sobram 48px de altura util. O teto e 48 x 4.896 = 235px. A 245px o reverso
   mede 50px de altura e estoura: medido, o cabecalho ia pra 79px no ESCURO e
   ficava em 77px no CLARO. Isso poe a horizontal numero 1 da folha — a linha
   em que a primeira vertical de TODA pagina nasce — dependendo do esquema de
   cor. Uma prancha nao muda de geometria quando alguem acende a luz.

   232px deixa 0,6px de folga sob o teto (o proprio 235 cai em cima da conta e
   escorrega no sub-pixel). Resultado medido: cabecalho em 77px nos DOIS
   esquemas, nas cinco paginas. O custo e 5% de largura contra o alvo do
   screenshot — invisivel a olho, e barato pelo que compra.

   Nitidez nao entra na conta: o arquivo tem 2410px de largura pra 232px em
   CSS, ou seja ~10x de material. Nao ha risco de amaciar em tela nenhuma. */
.logo { width: 232px; }

.sheet-head__nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sheet-head__nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.sheet-head__nav a:hover { border-bottom-color: var(--ink); }

/* -------------------------------------------------------------------------
   FAIXAS
   ------------------------------------------------------------------------- */

.band { position: relative; }
.band > .wrap { padding-block: var(--band); }
.band--rule > .wrap { border-top: 1px solid var(--rule); }   /* horizontal 6 */

.band--field {
  background: var(--paper-field);
  border-top: 1px solid var(--rule-strong);      /* horizontal 3 */
  border-bottom: 1px solid var(--rule-strong);   /* horizontal 5 */
}

/* --- 1 · HERO / bloco de titulo ---------------------------------------- */

/* a escala de cotas FECHA o hero: as duas verticais terminam nela, em vez de
   sobrarem soltas dentro do padding da faixa. Por isso o padding de baixo e 0. */
.hero > .wrap { padding-block: clamp(3.5rem, 6vw, 6rem) 0; }

.hero h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  padding-bottom: .12em;  /* reserva pro descendente do italico ("supervisao") */
}
.hero h1 em { font-style: italic; font-weight: 600; }

.hero__cota  { padding-top: .35rem; }
.hero__h1    { margin-top: -.16em; }
.hero__cta   { margin-top: 2.1rem; }
.hero__scale { margin-top: clamp(2.75rem, 4.5vw, 4rem); }   /* horizontal 2 */

.hero .hero__sub {
  margin-top: 2rem;
  font-size: 1.0625rem;
  color: var(--ink-2);
}

/* --- 2 · QUEM CONSTROI -------------------------------------------------- */

/* o retrato entra MEDIDO: encostado na margem esquerda da folha (col 1 a 5),
   com o topo na mesma linha em que o bloco de texto comeca. Nao flutua. */
.quem__retrato img { width: 100%; }
.quem__cota    { margin-bottom: 1.1rem; }
.quem__texto h2 { margin-bottom: 1.4rem; }
.quem__texto .link { display: inline-block; margin-top: 1.9rem; }

/* --- 3 · O SISTEMA / quadro de pecas ----------------------------------- */

.sistema__cab  { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.sistema__nota { margin-top: 1rem; color: var(--ink-2); max-width: 56ch; }

/* As seis pecas NAO sao cards: sao um QUADRO DE PECAS de prancha. Numero na
   margem como cota, coluna de estagio, nome, funcao — cada um numa coluna com
   semantica propria, do jeito que uma prancha lista esquadrias ou acabamentos.
   Sem caixa, sem badge, sem capsula, sem carrossel. */
.tabela { list-style: none; margin: 0; padding: 0; }

.peca {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
  transition: background-color .18s ease;
}
/* a primeira linha nao repete filete: o topo dela E a escala de cotas
   (horizontal 4), que a precede no markup */
.peca:first-child { border-top: 0; }
.peca:hover { background: var(--tint); }

/* padding nas CELULAS (nao na linha) pra a regua vertical da col 3 correr
   sem emenda de cima a baixo do quadro */
.peca > * { padding-block: 26px; }

/* o numero vive no campo de margem (col 1-2), a esquerda da col 3 — a mesma
   coluna em que o h2 da faixa comeca. A regua vertical da col 3 e, portanto,
   o limite entre margem de folha e registro: nao cruza texto nenhum.
   E COTA, nao badge: mono pequeno, sem capsula, sem cor. */
.peca__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.peca__estagio {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .035em;
  color: var(--ink-2);
}
.peca__nome .link { display: inline-block; margin-top: 1rem; }
.peca__desc { color: var(--ink-2); font-size: .95rem; }

/* A peca-chave: linha invertida. E como uma prancha destaca o item chaveado —
   nao com cor, com inversao de campo. */
.peca--chave {
  /* #57534A e o valor de --rule-strong no modo escuro; escrito literal (esta
     na whitelist) porque a divisoria interna precisa do MESMO peso nos dois
     esquemas, e o token global inverteria junto com a pagina. */
  --rule: #57534A;
  background: var(--ink);
  color: var(--on-ink);
  /* plano CHEIO de tinta: mascara a regua por baixo, como o poche de uma
     prancha mascara linha de construcao. Sem o z-index a vertical da col 3
     atravessaria o plano escuro com um peso e a divisoria interna com outro —
     duas verticais na mesma superficie em intensidades diferentes le como
     descuido. */
  position: relative;
  z-index: 1;
}
.peca--chave:hover { background: var(--ink); }
.peca--chave .peca__num,
.peca--chave .peca__estagio,
.peca--chave .peca__desc { color: var(--on-ink-2); }
.peca--chave .link { color: var(--on-ink); border-bottom-color: var(--on-ink-2); }
.peca--chave .link:hover { border-bottom-color: var(--on-ink); }

/* "01 a 06" sobrevive como cota de TOTAL do modulo, alinhada a direita no
   fechamento do quadro. (A instrucao "arraste para o lado" saiu: nao existe
   carrossel nesta direcao. Unica omissao de copy autorizada.) */
.tabela__fecho { display: flex; justify-content: flex-end; margin-top: 14px; }

/* --- 4 · DIFERENCIAIS / legenda de duas entradas ----------------------- */

.dif__cab { margin-bottom: clamp(2.25rem, 3.5vw, 3.25rem); }

/* legenda de duas entradas: o termo PENDURA no campo de margem, a definicao
   alinha na col 3 — a mesma da h2 da faixa. Convencao de caderno de
   especificacao, e a quinta familia de layout distinta da pagina. */
.dif { border-top: 1px solid var(--rule); padding-top: 2rem; align-items: start; }
.dif + .dif { margin-top: 2.75rem; }
.dif__nome  { font-size: 1.12rem; line-height: 1.28; }
.dif__corpo { color: var(--ink-2); }
.dif__corpo em { font-style: italic; }

/* --- 5 · CONVITE (partial compartilhado src/partials/cta.html) ----------
   Ele mora dentro de um envelope `section.band.band--rule > .wrap > .rules`
   em TODAS as paginas que o incluem — a faixa, a horizontal de topo e a
   vertical da col 3 vem de la, nao daqui. Ate a Task 2 o partial nao podia
   receber `class="grid"` e o CSS emulava a classe com um seletor
   (`.secao--cta`) mais um neutralizador pra quando ele estivesse dentro de um
   .wrap. Os dois sairam: o partial agora carrega `class="grid cta"` e o
   envelope e o mesmo nas tres paginas.

   Registro de CONVITE, nao de CTA: cota, titulo, uma frase, o bloco de tinta
   de canto reto (sem cor, sem capsula, sem sombra, sem verbo de urgencia) e
   uma nota em mono. Nada aqui grita. */
.cta__corpo { margin-top: 1.5rem; color: var(--ink-2); }
.cta > .btn { justify-self: start; margin-top: 2.6rem; }
.cta__nota {
  margin-top: 1.9rem;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--ink-2);
}
.cta__nota a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color .18s ease;
}
.cta__nota a:hover { border-bottom-color: var(--ink); }

/* -------------------------------------------------------------------------
   RODAPE
   Papel, nao faixa invertida: um caderno de projeto nao inverte uma prancha,
   e isso mantem o Theme Lock limpo (a unica inversao da pagina e a linha 04
   do quadro). O border-top e a setima e ultima horizontal — o divisor interno
   que o registro antigo tinha em .footer__legal SAIU de proposito (regra 2).
   ------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); }   /* horizontal 7 de 7 */
.footer .wrap { padding-block: 40px 56px; }
/* 122px -> 200px, o alvo do dono na integra. Aqui NAO ha o teto que segurou o
   cabecalho em 232: o rodape nao tem min-height, e a diferenca de altura entre
   os dois PNGs (38,2px no claro contra 40,8px no escuro) so empurra o texto
   que vem DEPOIS do logo dentro da mesma coluna. Nao ha vertical nenhuma nesta
   faixa (regra 1: o conteudo do rodape comeca na propria margem da folha), e a
   unica horizontal daqui e o border-top, que fica ACIMA do logo — entao nada
   estrutural se mexe. O limite real e a coluna: ele mora na col 1-5, que mede
   379px em 1280; 200px ocupa 53% dela. */
.footer .logo { width: 200px; opacity: .78; }
.footer p { color: var(--ink-2); }
.footer a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color .18s ease;
}
.footer a:hover { border-bottom-color: var(--ink); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
}

/* qualificado com .footer pra vencer `.footer p` (0,1,1) na especificidade —
   sem isso a tese saia em --ink-2 junto com o resto do rodape, e ela e a
   assinatura: fica em tinta cheia */
.footer .footer__tese {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.1rem;
}
.footer__grid .cota { margin-bottom: .6rem; }

.footer__legal {
  margin-top: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .03em;
}
.footer .footer__lgpd {
  margin-top: 1.5rem;
  max-width: 74ch;
  font-size: .875rem;
  line-height: 1.6;
}

/* =========================================================================
   AS QUATRO PAGINAS INTERNAS — /sistema · /alessandro · /privacidade · /404
   (Task 3, 29/07/2026)

   NENHUM SISTEMA PARALELO. Elas usam as mesmas .band / .wrap / .grid /
   .rules / .ticks / .cota / .corpo / .link / .btn da home e obedecem as
   MESMAS quatro regras de racionamento declaradas no topo deste arquivo. O
   que muda de pagina pra pagina e QUAL limite cada faixa mostra — nunca a
   gramatica. As classes daqui pra baixo sao todas da mesma familia: cada uma
   posiciona conteudo no mesmo grid de 12 colunas e nenhuma inventa cor,
   capsula, sombra ou segunda medida.

   A ABERTURA E IGUAL NAS QUATRO (`.abre`). E o mesmo bloco de titulo de
   prancha do hero da home: cota pendurada no campo de margem (col 1-2), h1
   comecando na col 3, a medida do titulo fechada na col 11, e a escala de
   cotas como TERMINAL das duas verticais (por isso o padding de baixo e
   ZERO). A faixa seguinte desce dessa mesma linha. Uma pagina interna sempre
   se abre declarando o modulo, exatamente como a home.

   ⚠️ BODONI NAO ENTRA AQUI. O h1 destas paginas e o `h1` generico, que e
   Archivo. A serifa e privilegio do seletor `.hero h1` (home). Um segundo
   lugar de serifa mata o efeito — se voce esta tentado a escrever
   `.abre h1 { font-family: var(--serif) }`, e exatamente isso que a direcao
   proibe.

   HORIZONTAIS: a regra 2 diz "so em fronteira de secao", nao "sete". Sete e
   um FATO da home (5 faixas), nao um numero magico. /sistema tem 9 porque
   tem 8 faixas — e todas as 9 sao fronteira de secao de verdade. Filete
   interno de componente (as linhas do quadro de saidas da /404) continua nao
   entrando na conta, mesmo criterio do quadro de pecas da home.
   ========================================================================= */

/* --- abertura, comum as quatro ----------------------------------------- */

.abre > .wrap { padding-block: clamp(3.5rem, 6vw, 6rem) 0; }
.abre__cota   { padding-top: .3rem; }   /* desce a cota pra base do mono bater com a cap-height do h1 */
.abre__sub    { margin-top: 1.9rem; font-size: 1.0625rem; color: var(--ink-2); max-width: 68ch; }
.abre__data   { margin-top: 1.9rem; }
.abre__scale  { margin-top: clamp(2.75rem, 4.5vw, 4rem); }

/* -------------------------------------------------------------------------
   /SISTEMA — as seis pecas em escala de detalhe

   O quadro da home LISTA as pecas; esta pagina desenha cada linha daquele
   quadro em detalhe. Por isso cada peca e uma FAIXA propria, com sua vertical
   (a col 3) nascendo na horizontal de cima e morrendo na de baixo. Lidas em
   sequencia, as seis verticais formam a linha de margem continua da folha,
   interrompida a cada filete de secao — que e como um caderno de detalhes se
   parece de verdade.

   A PECA 04 E A CHAVEADA. No quadro da home ela e plano cheio de tinta
   (poche, que so faz sentido em escala pequena). Aqui, em escala de detalhe,
   ela e uma ZONA do documento: campo --paper-field entre dois filetes
   --rule-strong, ou seja, a MESMA .band--field que a home usa na faixa do
   sistema. Inverter uma faixa inteira de texto longo pesaria demais e ainda
   roubaria a leitura do artefato que mora dentro dela.
   ------------------------------------------------------------------------- */

/* `.peca-longa` (na <section>) e o nome do BLOCO: nao carrega declaracao
   nenhuma, so batiza os elementos abaixo e diz, pra quem le o HTML, que
   aquela faixa e uma peca. Quem faz a faixa e o `.band` ao lado dela. */
.peca-longa__cota { padding-top: .3rem; }
.peca-longa__dl   { margin-top: clamp(2.1rem, 3.4vw, 2.9rem); }

/* Legenda de quatro entradas — MESMA gramatica dos diferenciais da home: o
   termo pendura no campo de margem (col 1-2), a definicao alinha na col 3.

   SEM FILETE POR ENTRADA, de proposito: sao 4 entradas x 6 pecas = 24
   horizontais internas, e a folha viraria papel milimetrado. O que separa e
   espaco, mais o contraste de familia e tamanho entre termo (mono 11.5) e
   definicao (Archivo 17). E o que uma legenda de prancha faz. */
.peca-longa__dl { display: grid; row-gap: 1.7rem; padding: 0; }
.peca-longa__dl dt {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: .05em;
  color: var(--ink-2);
  padding-top: 6px;   /* poe a base do mono na mesma linha da 1a linha do corpo */
}
.peca-longa__dl dd { margin: 0; color: var(--ink-2); max-width: 68ch; }

/* --- o artefato de conversa (mora dentro de #agentes-de-ia) -------------
   Unico lugar do site inteiro com Caveat: a anotacao de lapis sobre a folha.

   COMO AS DUAS VOZES SE DISTINGUEM SEM COR — e a decisao de desenho desta
   task. Um caderno tecnico so tem tres eixos, e a conversa usa os tres:
     LADO   — a deles ancora na esquerda, a nossa na direita
     PESO   — a deles em filete --rule, a nossa em --rule-strong
     FUNDO  — a deles no papel da folha, a nossa no meio-tom --paper-field
   NAO e inversao de campo (que era a sustentacao herdada da Task 2). Dois
   motivos: a inversao ja significa "peca chaveada" no quadro da home, e dar
   dois sentidos a mesma marca desmancha as duas; e ela faria da NOSSA
   resposta o elemento mais pesado da pagina, quando a copy diz que essa
   resposta chegou tarde e perdeu a venda. O que a folha destaca e o VAO. */

.furo__artefato { margin: clamp(2.25rem, 3.5vw, 3rem) 0 0; }

.thread {
  border: 1px solid var(--rule-strong);   /* limite do artefato: peso de folha */
  background: var(--paper);
  padding: 1.25rem;
  font-size: .95rem;
}
.thread__cab {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .75rem;
  margin: 0 0 1.1rem;
}

.bolha {
  max-width: 82%;
  padding: .7rem .9rem;
  margin-bottom: .55rem;
  line-height: 1.4;
  color: var(--ink);
  border: 1px solid var(--rule);
}
/* As duas vozes sao declaradas SIMETRICAS de proposito, cada uma dizendo os
   seus tres eixos por extenso. Deixar "a deles" implicita (so a ausencia da
   outra classe) economizaria tres linhas e esconderia a regra de desenho de
   quem abrir o arquivo depois. */
.bolha--deles {
  margin-right: auto;                   /* lado  */
  border-color: var(--rule);            /* peso  */
  background: var(--paper);             /* fundo */
}
.bolha--nossa {
  margin-left: auto;                    /* lado  */
  border-color: var(--rule-strong);     /* peso  */
  background: var(--paper-field);       /* fundo */
}
.bolha time {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-2);
  margin-top: .35rem;
}

/* O VAO e o elemento mais forte do artefato, e e a unica coisa aqui em tinta
   cheia. Desenhado como COTA DE DISTANCIA: duas linhas de chamada em
   --rule-strong com a medida entre elas. A peca 04 existe pra fechar essa
   distancia — entao e ela que a folha dimensiona, nao a nossa resposta. */
.vao {
  position: relative;
  text-align: center;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--ink);
  padding: 1.4rem 0;
  margin: .4rem 0;
}
.vao::before, .vao::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--rule-strong);
}
.vao::before { top: .45rem; }
.vao::after  { bottom: .45rem; }

/* a anotacao a mao — a unica marca nao desenhada da folha */
.anotacao {
  font-family: var(--caveat);
  font-weight: 600;             /* unico peso self-hosted (caveat-600.woff2) */
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--ink);
  transform: rotate(-3deg);
  display: inline-block;
}
.furo__nota {
  display: block;
  width: fit-content;
  max-width: 24ch;
  margin: 1.3rem auto 1.5rem;
  text-align: center;
}
.furo__legenda {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-2);
  margin-top: 1rem;
}

/* -------------------------------------------------------------------------
   /ALESSANDRO
   O retrato entra MEDIDO: encostado na margem esquerda da folha (col 1 a 5),
   topo na mesma linha em que o bloco de texto comeca. Nao flutua, nao tem
   moldura, nao e recorte. E a mesma faixa "quem constroi" da home — esta
   pagina e a versao longa dela, entao repetir a medida e coerencia, nao
   preguica. A vertical desta faixa e a col 7 (onde o texto comeca), porque a
   foto ocupa o campo de margem.
   ------------------------------------------------------------------------- */

.retrato img { width: 100%; }
.bio h2      { margin-bottom: 1.4rem; }
.bio__corpo strong { color: var(--ink); font-weight: 600; }

/* a segunda faixa nao tem foto: volta pra col 3, como o resto do site */
.bio-larga__h2 { margin-bottom: 1.6rem; }

/* -------------------------------------------------------------------------
   /PRIVACIDADE — legibilidade acima de estetica
   Uma medida so (68ch), uma vertical so (col 3), e NENHUM filete entre os dez
   blocos: horizontal interna em pagina de texto corrido quebra a leitura e a
   regra 2 no mesmo gesto. O que separa e espaco.
   ------------------------------------------------------------------------- */

.legal__grid > .legal__h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-top: clamp(2.75rem, 4vw, 3.5rem);
}
.legal__grid > .legal__h2:first-child { margin-top: 0; }
.legal__grid > .corpo        { margin-top: 1.15rem; }
.legal__grid > .legal__lista { margin-top: 1.15rem; }
.legal strong { color: var(--ink); font-weight: 600; }

/* Marcador de item = LINHA DE CHAMADA, nao bolinha. Caderno tecnico nao tem
   disco; tem traco. Mesmo peso e mesmo token da escala de cotas — nenhum
   glifo novo entra na pagina por causa de uma lista. */
.legal__lista { list-style: none; margin: 0; padding: 0; color: var(--ink-2); max-width: 68ch; }
.legal__lista li { position: relative; padding-left: 30px; }
.legal__lista li + li { margin-top: .85rem; }
.legal__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 16px;
  border-top: 1px solid var(--rule-strong);
}

/* -------------------------------------------------------------------------
   /404 — a unica pagina que ninguem procura. Breve: abertura e um quadro de
   tres saidas na MESMA gramatica do quadro de pecas da home (nome no
   registro, funcao a direita encostada no filete, uma linha por saida, sem
   caixa, sem badge, sem numero inventado).
   ------------------------------------------------------------------------- */

.saidas { list-style: none; margin: 0; padding: 0; }
.saida {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);   /* filete interno do componente */
}
.saida > * { padding-block: 26px; }
.saida__nome a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color .18s ease;
}
.saida__nome a:hover { border-bottom-color: var(--ink); }
.saida__desc { color: var(--ink-2); font-size: .95rem; }

/* =========================================================================
   MAPA DE COLUNAS — as 12 colunas e TODO `grid-column` da pagina, num lugar
   so. Este bloco e o inventario que a regra 1 do racionamento exige: da pra
   conferir, sem caçar por 400 linhas, qual limite cada faixa usa e por que a
   regua vertical daquela faixa esta onde esta.

   Ele e uma media query de LARGURA MINIMA (nao um override de colapso) pelo
   motivo explicado la em cima, no comentario de `.grid`: embaixo de 861px as
   12 colunas simplesmente NAO EXISTEM, entao nao ha `grid-column` sobrevivente
   pra criar coluna implicita e esmagar o conteudo.
   ========================================================================= */

@media (min-width: 861px) {
  .grid,
  .peca,
  .saida,
  .peca-longa__dl,
  .footer__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
  }

  /* hero — reguas visiveis: col 3 (inicio do h1) e fechamento da col 11 */
  .hero__cota      { grid-column: 1 / 3; }
  .hero__h1        { grid-column: 3 / 12; }
  .hero .hero__sub { grid-column: 3 / 11; }
  .hero__cta       { grid-column: 3 / 11; }

  /* quem constroi — regua visivel: col 7 (inicio do bloco de texto).
     O retrato ocupa o campo de margem, col 1 a 5. */
  .quem__retrato { grid-column: 1 / 6; }
  .quem__texto   { grid-column: 7 / -1; }

  /* o sistema — regua visivel: col 3 */
  .sistema__cota { grid-column: 1 / 3; }
  .sistema__h2   { grid-column: 3 / 10; }
  .sistema__nota { grid-column: 3 / 10; }

  /* quadro de pecas: a cota na margem (1-2), o registro a partir da col 3 */
  .peca__num     { grid-column: 1 / 3; }
  .peca__estagio { grid-column: 3 / 5; }
  .peca__nome    { grid-column: 5 / 8; }
  /* regra 4 — uma lei so: o texto ENCOSTA na regua vertical. Sem recuo optico. */
  .peca__desc    { grid-column: 8 / -1; border-left: 1px solid var(--rule); }

  /* diferenciais — regua visivel: col 3. O termo pendura na margem. */
  .dif__cota  { grid-column: 1 / 3; }
  .dif__h2    { grid-column: 3 / 12; }
  .dif__nome  { grid-column: 1 / 3; }
  .dif__corpo { grid-column: 3 / 10; }

  /* convite — regua visivel: col 3 (o partial cta.html, nas 3 paginas) */
  .cta__cota  { grid-column: 1 / 3; }
  .cta__h2    { grid-column: 3 / 12; }
  .cta__corpo { grid-column: 3 / 10; }
  .cta > .btn { grid-column: 3 / 10; }
  .cta__nota  { grid-column: 3 / 10; }

  /* ---- as quatro paginas internas (Task 3) ---------------------------- */

  /* abertura das quatro — reguas: col 3 (inicio do h1) e fechamento da col 11 */
  .abre__cota { grid-column: 1 / 3; }
  .abre__h1   { grid-column: 3 / 12; }
  .abre__sub  { grid-column: 3 / 11; }
  .abre__data { grid-column: 3 / 11; }

  /* /sistema — cada peca e uma faixa, regua visivel: col 3.
     O dl atravessa as 12 colunas e reparte nelas mesmas (mesmo passo, mesma
     calha), entao o termo cai no campo de margem e a definicao encosta na
     regua — a mesma legenda de duas entradas dos diferenciais da home. */
  .peca-longa__cota  { grid-column: 1 / 3; }
  .peca-longa__h2    { grid-column: 3 / 12; }
  .peca-longa__dl    { grid-column: 1 / -1; }
  .peca-longa__dl dt { grid-column: 1 / 3; }
  .peca-longa__dl dd { grid-column: 3 / 10; }
  .furo__artefato    { grid-column: 3 / 9; }

  /* /alessandro — regua da faixa do retrato: col 7 (a foto ocupa a margem).
     Na faixa seguinte nao ha foto e a regua volta pra col 3. */
  .retrato       { grid-column: 1 / 6; }
  .bio           { grid-column: 7 / -1; }
  .bio-larga__h2 { grid-column: 3 / 12; }
  .bio-larga__corpo { grid-column: 3 / 10; }

  /* /privacidade — regua: col 3. Uma medida so pro corpo inteiro. */
  .legal__grid > .legal__h2    { grid-column: 3 / 12; }
  .legal__grid > .corpo        { grid-column: 3 / 10; }
  .legal__grid > .legal__lista { grid-column: 3 / 10; }

  /* /404 — regua: col 3. Quadro de saidas na gramatica do quadro de pecas:
     regra 4 vale igual, o texto da direita ENCOSTA no filete. */
  .saida__nome { grid-column: 3 / 8; }
  .saida__desc { grid-column: 8 / -1; border-left: 1px solid var(--rule); }

  /* rodape — sem regua vertical: o conteudo comeca na propria margem da
     folha, entao nao ha limite interno pra mostrar (regra 1) */
  .footer__grid { row-gap: 2.5rem; }
  .footer__grid > :nth-child(1) { grid-column: 1 / 5; }
  .footer__grid > :nth-child(2) { grid-column: 5 / 9; }
  .footer__grid > :nth-child(3) { grid-column: 9 / 12; }
}

/* =========================================================================
   375px — o grid nao desaparece: ele ESTREITA ATE A ESPINHA.
   Uma prancha em escala menor perde as divisoes de coluna e mantem a linha
   de margem. As cotas passam a pendurar nela.
   ========================================================================= */

@media (max-width: 860px) {
  :root { --pad: 20px; --gutter: 16px; }

  body { font-size: 16px; }

  /* a espinha: uma vertical so, na margem do texto, correndo a faixa inteira.
     As cotas passam a pendurar nela e o conteudo recua 18px a partir dela. */
  .rules { display: block; left: var(--pad); right: auto; width: 0; }
  .rules i { display: none; }
  .rules i:first-child {
    display: block;
    border-left: 1px solid var(--rule);
    border-right: 0;
  }
  /* conteudo indenta a partir da espinha (regra 4 continua valendo) */
  .band > .wrap > .grid > * { padding-left: 18px; }
  /* o botao e o unico filho que ja tem padding proprio: aqui o indent tem
     que ser MARGEM, senao ele come o padding interno do botao e o plano de
     tinta encosta na espinha (o resto do texto fica 18px a direita dela) */
  .band > .wrap > .grid > .btn { padding-left: 38px; margin-left: 18px; }

  /* a escala engrossa junto: 4 divisoes, nao 12 — a regua acompanha a escala
     do desenho. O fechamento pela direita muda de traco junto. */
  .ticks { grid-template-columns: repeat(4, 1fr); }
  .ticks i:nth-child(n + 5) { display: none; }
  .ticks i:nth-child(4) { border-right: 1px solid var(--rule-strong); }

  /* mesma proporcao do desktop: 148/172 = 0,86 -> 232 x 0,86 = 200 */
  .logo { width: 200px; }

  .sheet-head .wrap { flex-wrap: wrap; gap: .85rem 1.5rem; }
  .sheet-head__nav ul { gap: 1.25rem; }

  .hero__cota { padding-top: 0; }
  .hero__h1 { margin-top: .5rem; }
  .hero .hero__sub { margin-top: 1.25rem; }
  .hero__cta { margin-top: 1.9rem; }

  .quem__retrato { margin-bottom: 2.25rem; }
  .quem__retrato img { max-width: 420px; }

  /* quadro de pecas: cada linha vira um REGISTRO empilhado */
  .peca { padding-block: 24px; }
  .peca > * { padding-block: 0; padding-left: 18px; }
  .peca__num { display: inline-block; padding-right: 14px; }
  .peca__estagio { display: inline-block; padding-left: 0; }
  .peca__nome { margin-top: 10px; }
  .peca__nome .link { margin-top: .8rem; }
  .peca__desc { margin-top: 12px; padding-left: 18px; }
  /* a peca 04 sangra ate a borda do viewport e le como plano */
  .peca--chave { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }

  .dif { padding-top: 1.6rem; }
  .dif__corpo { margin-top: .9rem; }

  .cta > .btn { justify-self: stretch; }
  .btn { display: block; text-align: center; white-space: normal; }

  /* quebra de medida do titulo largo do convite: existe pra desenhar duas
     linhas no desktop, e em tela estreita so criaria uma linha orfa */
  .br-desk { display: none; }

  /* mesma proporcao do desktop: 108/122 = 0,885 -> 200 x 0,885 = 177 */
  .footer .logo { width: 177px; }

  /* ---- as quatro paginas internas em tela estreita -------------------- */

  .abre__cota  { padding-top: 0; }
  .abre__h1    { margin-top: .5rem; }
  .abre__sub   { margin-top: 1.25rem; }
  .abre__data  { margin-top: 1.5rem; }

  /* /sistema: cota volta pra cima do h2 (a margem virou espinha, nao ha mais
     campo a esquerda pra pendurar nada), e a legenda empilha termo/definicao */
  .peca-longa__cota  { padding-top: 0; }
  .peca-longa__h2    { margin-top: .55rem; }
  .peca-longa__dl    { row-gap: 1.4rem; }
  .peca-longa__dl dt { padding-top: 0; }
  .peca-longa__dl dd { margin-top: .35rem; }
  .furo__artefato    { margin-top: 2rem; }
  .thread            { padding: 1rem; }
  .bolha             { max-width: 92%; }
  .anotacao          { font-size: 1.45rem; }

  /* /alessandro: o retrato vem antes do texto e nao passa de 420px */
  .retrato { margin-bottom: 2.25rem; }
  .retrato img { max-width: 420px; }

  /* /404: quadro de saidas vira registro empilhado, como o quadro da home */
  .saida { padding-block: 22px; }
  .saida > * { padding-block: 0; padding-left: 18px; }
  .saida__desc { margin-top: 10px; }
}

/* Embaixo de 420px o par "numero + estagio" nao cabe mais numa linha so e
   cada um vira seu proprio registro. */
@media (max-width: 420px) {
  /* o `padding-left: 18px` volta junto com o `display: block`: enquanto o
     estagio era inline ele herdava o recuo do .peca__num que vinha antes
     dele na mesma linha; virando bloco, sem isto ele encostaria na espinha
     (x=20) enquanto TODO o resto da pagina fica em x=38. Medido no DOM antes
     de consertar. Defeito herdado do mockup, que so aparece abaixo de 420px —
     e regra 4: uma lei so, texto encosta na regua, sempre. */
  .peca__estagio { display: block; padding-top: 4px; padding-left: 18px; }
  .peca__num { display: block; padding-right: 0; }
}

/* =========================================================================
   MOTION_INTENSITY 3 — so hover / focus / active. Ainda assim, respeitado.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}