/* =========================================================================
   Fabio Silva — «A Pergunta Antes da Venda»
   Sistema visual. Todo valor vem de contract.json (fecho aberto) e scale.json.
   REDESTILACAO DA CAMADA 2 — 2026-09-10 (card C, «Numeracao de obra»).
   A INSTRUMENT SANS SAIU DO SITE: nao existe mais nesta identidade (o arquivo,
   o preload, o @font-face e as nove regras que a chamavam morreram nesta volta).
   Fontes: Stardos Stencil 700 (display da hero em CAIXA ALTA + a numeracao
                                01-08; piso DURO de 32px, abaixo dele o corte
                                de estencil desaparece e a familia e proibida)
           Literata (opsz 12-72, wght 400-700) — titulos de secao em 700/opsz36
                                CAIXA MISTA, lead, corpo, etiqueta e portas
           Literata Italic (instancia estatica opsz 36 / wght 500) — o destaque:
                                UMA locucao por titulo, e so ela
   ========================================================================= */

@font-face{
  font-family:"Stardos Stencil";
  src:url("fonts/StardosStencil-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+2000-206F,U+20A0-20BF,U+2122;
}
@font-face{
  font-family:"Literata";
  src:url("fonts/Literata-var.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+2000-206F,U+20A0-20BF,U+2122;
}
/* a ITALICA e uma INSTANCIA ESTATICA (opsz 36 / wght 500): a variavel pesa
   158.092 B contra 33.800 B da instancia, e o sistema usa UMA so. Por isso
   `font-weight:500` liso, sem faixa, e nenhum font-variation-settings em quem a
   usa. NAO entra em preload (contract.json camada 2, `nao_preload`): ela vive
   dentro do H1 e tem metrica vertical IDENTICA a romana — swap nela troca tres
   palavras sem mover a linha. */
@font-face{
  font-family:"Literata Italic";
  src:url("fonts/LiterataItalic-36-500.woff2") format("woff2");
  font-weight:500; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-017F,U+0180-024F,U+2000-206F,U+20A0-20BF,U+2122;
}
/* fallbacks com override de métrica (contract.json camada 2) — CLS zero na troca.
   O do display mudou de Arial para Arial BOLD porque a face web e 700, e os
   descritores vem de `fallback_com_override_de_metrica.display` da redestilacao.
   RESSALVA HONESTA do proprio contrato: o override casa a METRICA, nao a FORMA —
   enquanto a Stardos nao carrega, a hero mostra uma grotesca cheia, sem corte de
   estencil. O layout nao se move (CLS zero); a identidade e que chega no segundo
   quadro. E por isso que o display e PRELOAD, e nao `optional`.
   DUAS CORRECOES DE FECHO (2026-09-10, retomada). (1) A familia do @font-face
   de fallback chamava-se «Stardos Fallback» e passou a «Stardos Stencil
   Fallback»: o conformance aceita um fallback cujo nome CONTENHA a familia do
   contrato (e assim que «Literata Fallback» sempre passou), e «Stardos
   Fallback» nao contem «Stardos Stencil». Era artefato de NOME, nao divergencia
   de desenho. (2) «Arial Black» SAIU das duas pilhas: o contrato declara, em
   `fallback_com_override_de_metrica.display.local`, «Arial Bold» — e e Arial
   Bold que o `src:local()` acima ja resolve, com os descritores de metrica.
   «Arial Black» era um valor que o contrato nunca declarou, e uma face de peso
   900 que a metrica de 700 nao descreve. A pilha agora termina em Arial, que e
   generico permitido. Nenhuma das duas muda um pixel do render com a fonte
   carregada; as duas tiram o CSS de fora do fecho. */
@font-face{
  font-family:"Stardos Stencil Fallback"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");
  font-weight:700;
  size-adjust:94.63%; ascent-override:102.89%; descent-override:42.88%; line-gap-override:0%;
}
@font-face{
  font-family:"Literata Fallback"; src:local("Georgia");
  size-adjust:105.32%; ascent-override:111.76%; descent-override:29.24%; line-gap-override:0%;
}

:root,
:root[data-theme="claro"]{
  /* ======================= CAMADA 1 — «TITANIO E BRASA» ====================
     Paleta escolhida pelo usuario em 2026-09-14 (passo 5, tentativa 5; proposta
     06 do estudo de oito). SUBSTITUI «Cal e Barro» INTEIRA — nenhum hex daquela
     paleta sobrevive neste arquivo, nem em regra nem em comentario, porque cor
     morta que fica escrita e cor que a conformance deixa passar.
     A camada tem DUAS COLUNAS, e os hex sao os da spec §4, literais: o tema
     PADRAO continua o CLARO (`:root`), e o escuro entra por `data-theme`.
     Desde 2026-09-14 ha um TOGGLE VISIVEL na barra (`.tema-b`), por ordem do
     usuario. O mecanismo continua sendo o atributo: o botao so escreve
     `data-theme` na raiz e grava a escolha em `fs.tema`. Nenhum token muda.
     Decisoes e ajustes em OKLCH, NUNCA em HSL (REGRA_DURA_dois_temas).
     O acento NAO e o mesmo nos dois temas, e isso e construcao, nao descuido:
     a brasa luminosa vive sobre o cinza escuro, a brasa profunda sobre o campo
     claro. Clarear a segunda para «parecer mais laranja» derruba o contraste. */
  --campo:#F3F5F7;
  --superficie:#FAFBFC;
  --texto:#161718;
  --texto-mutado:#3F4B52;
  --estrutura:#393E41;
  --acento:#793805;
  --borda:#D2D4D6;
  --cal-6:#ECEFF0;
  --cal-7:#E7EAEB;
  --barro-escuro:#3F4B52;
  --barro-hover:#834819;
  --barro-press:#864C1E;
  --on-acento:#FAFCFD;
  --s03-campo:#D9DDDF;
  --foco:#161718;
  /* ---- aliases legados: os NOMES sao compatibilidade de codigo; a COR e a
     nova. `--barro-escuro` tambem muda de funcao cromatica — o nome nao
     conserva o marrom antigo. ---- */
  --destaque:#793805;
  --mutado:#3F4B52;
  --barro:#793805;
  --cal-mutado-barro:#FAFCFD;
  --cheio:#793805;
  --anel:#393E41;
  --tinta:#161718;
  --tinta-mutada:#3F4B52;
  --junta:#D2D4D6;
  /* ---- TINTAS TRANSLUCIDAS (regra `rgba_de_contrato`: rgba de cor do fecho,
     em qualquer alpha). Tres familias, e a diferenca entre elas e o que impede
     a troca de tema de inverter o que nao pode inverter:
       · --tinta-*  ... a TINTA do tema. Vira com o tema (escura no claro,
                        clara no escuro). E a fibra de papel e o plano da folha.
       · --luz-* / --sombra-* ... FISICA, nao tinta: luz e sempre clara e
                        sombra e sempre escura, nos dois temas. Sao o vinco e a
                        profundidade das chapas de arte.
       · --sobre-acento-* ... a tinta que le SOBRE a brasa (--on-acento). ---- */
  --tinta-00:rgba(22,23,24,0);
  --tinta-26:rgba(22,23,24,0.026);
  --tinta-30:rgba(22,23,24,0.030);
  --tinta-60:rgba(22,23,24,0.06);
  --mutado-32:rgba(63,75,82,0.32);
  --mutado-45:rgba(63,75,82,0.45);
  --sobre-acento-00:rgba(250,252,253,0);
  --sobre-acento-32:rgba(250,252,253,0.32);
  --sobre-acento-36:rgba(250,252,253,0.036);
  --sobre-acento-40:rgba(250,252,253,0.4);
  --sobre-acento-72:rgba(250,252,253,0.72);
  --junta-placa:rgba(250,251,252,0.22);
  --luz-00:rgba(250,252,253,0);
  --luz-22:rgba(250,252,253,0.022);
  --luz-50:rgba(250,252,253,0.05);
  --sombra-00:rgba(22,23,24,0);
  --sombra-45:rgba(22,23,24,0.045);
  --sombra-340:rgba(22,23,24,0.34);
  color-scheme:light;
}
:root[data-theme="escuro"]{
  --campo:#272A2C;
  --superficie:#373A3C;
  --texto:#F0F6F9;
  --texto-mutado:#C2CED5;
  --estrutura:#B8BFC2;
  --acento:#FDA671;
  --borda:#535759;
  --cal-6:#36393B;
  --cal-7:#2E3234;
  --barro-escuro:#C2CED5;
  --barro-hover:#EA9A69;
  --barro-press:#E59767;
  --on-acento:#0B0E0F;
  --s03-campo:#393E41;
  --foco:#F0F6F9;
  --destaque:#FDA671;
  --mutado:#C2CED5;
  --barro:#FDA671;
  --cal-mutado-barro:#0B0E0F;
  --cheio:#FDA671;
  --anel:#B8BFC2;
  --tinta:#F0F6F9;
  --tinta-mutada:#C2CED5;
  --junta:#535759;
  --tinta-00:rgba(240,246,249,0);
  --tinta-26:rgba(240,246,249,0.026);
  --tinta-30:rgba(240,246,249,0.030);
  --tinta-60:rgba(240,246,249,0.06);
  --mutado-32:rgba(194,206,213,0.32);
  --mutado-45:rgba(194,206,213,0.45);
  --sobre-acento-00:rgba(11,14,15,0);
  --sobre-acento-32:rgba(11,14,15,0.32);
  --sobre-acento-36:rgba(11,14,15,0.036);
  --sobre-acento-40:rgba(11,14,15,0.4);
  --sobre-acento-72:rgba(11,14,15,0.72);
  --junta-placa:rgba(55,58,60,0.22);
  --luz-00:rgba(240,246,249,0);
  --luz-22:rgba(240,246,249,0.022);
  --luz-50:rgba(240,246,249,0.05);
  --sombra-00:rgba(11,14,15,0);
  --sombra-45:rgba(11,14,15,0.045);
  --sombra-340:rgba(11,14,15,0.34);
  color-scheme:dark;
}

:root{

  /* ---- escala (scale.json, clamp derivado 390→1440) ---- */
  /* REDESTILACAO 2026-09-10 — o teto do display caiu de 76px para 68px porque
     `instancias_decididas.display_hero` diz «escala 44px -> 68px» e isso e
     CONTRATO, nao gosto. A conta do clamp: 44px a 390 e 68px a 1440 dao
     inclinacao 24/1050 = 2,2857vw e intercepto 35,086px = 2,1929rem. */
  --fs-display:clamp(2.75rem, 2.1929rem + 2.2857vw, 4.25rem);
  --fs-manchete:clamp(1.875rem, 1.5871rem + 1.181vw, 2.65rem);
  --fs-titulo:clamp(1.5312rem, 1.3571rem + 0.7143vw, 2rem);
  --fs-subtitulo:clamp(1.2812rem, 1.2rem + 0.3333vw, 1.5rem);
  --fs-corpo:clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);
  --fs-apoio:0.875rem;
  --fs-rotulo:0.8125rem;
  --fs-micro:0.75rem;

  /* ---- espaçamento ---- */
  --sy:clamp(3.5rem, 2.2rem + 5.3333vw, 7rem);
  --bloco:clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem);
  --item:clamp(1rem, 0.8143rem + 0.7619vw, 1.5rem);
  --txt:clamp(1rem, 0.9071rem + 0.381vw, 1.25rem);
  --gutter:clamp(16px, -0.3429px + 4.1905vw, 60px);
  --wrap:82.5rem;
  --prosa:35.5rem;

  --raio:3px;         /* contract.json camada 3 forma.raio_externo */
  --fio:1px;
  /* color-scheme mora nos DOIS blocos de tema, nunca aqui: `light dark` sem
     tokens coordenados faria controle nativo e campo do site pertencerem a
     temas diferentes. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition-duration:.01ms !important}}
body{
  margin:0; background:var(--campo); color:var(--texto);
  font-family:"Literata","Literata Fallback",Georgia,serif;
  font-variation-settings:"opsz" 12,"wght" 400;
  font-size:var(--fs-corpo); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
a{color:inherit}

/* ---------- tipografia: papéis (scale.json roles) ----------
   REDESTILACAO DA CAMADA 2 (2026-09-10). O que mudou aqui, e cada linha e
   contrato, nao gosto:
   1. `.t-display` deixa de ser a familia inteira dos titulos e passa a ser UM
      papel so: A PERGUNTA DA HERO. Stardos Stencil 700, CAIXA ALTA, tracking
      +0,02em, entrelinha 1,20, escala 44->68px.
   2. `.t-manchete`, `.t-titulo` e `.t-bloco` — os titulos de secao e seus dois
      sub-niveis — voltam para a LITERATA 700 / opsz 36, em CAIXA MISTA. Antes
      eram a sans condensada.
   3. TRACKING: os valores negativos de antes (-0,02 / -0,015 / -0,01 / -0,008em)
      foram calibrados para uma SANS CONDENSADA, onde o negativo compensa um
      espacejamento desenhado para texto pequeno. A Literata em 700 e uma serifa
      de LIVRO: as serifas ja preenchem o vao entre as hastes, e o mesmo negativo
      cola as serifas umas nas outras — em «Montgomery» a perna do «g» encostava
      na barriga do «o» a 42px. Medido no render e decidido pelo olho:
        manchete  -0,015em -> -0,006em
        titulo    -0,008em -> -0,004em
        bloco     -0,010em ->  0
      A regra por tras do numero: o negativo cai com o tamanho (a serifa e a
      mesma, o vao encolhe) e nunca passa de -0,006em, que a 42px vale 0,25px.
   4. ENTRELINHA dos titulos: 1,29 -> 1,20 na manchete (o numero do card C, que
      e o desenho escolhido) e 1,26 nos dois sub-niveis, que sao menores e
      pedem mais ar. O piso de COLISAO da Literata em caixa mista: o acento do
      «a» sobe 0,75em e o «g» desce 0,24em, o que deixa 0,21em de vao a 1,20 —
      existe e e medido. O piso de 1,485 do contrato e o da caixa de CONTEUDO
      (asc+desc), nao o de colisao, e vale para TEXTO CORRIDO, onde ele ja e
      obedecido (lead 1,52 · corpo 1,6).
   5. `.t-marca` (a marca na barra, 16-18px) SAI da familia de display por
      forca do piso: 16px em Stardos da corte de 0,52px, e abaixo de 32px a
      familia e PROIBIDA. Vai para Literata 700 / opsz 12 — a mesma instancia
      que a classe `.enfase` deste arquivo ja usava. */
/* QUEBRA DO H1 (2026-09-10) — O TRACKING CAI A ZERO, e a ordem e do usuario:
   «use o degrau BAIXO da escala e o tracking (+0,02em pode cair a 0) antes de
   qualquer outra coisa». Ele e o instrumento mais barato que existe aqui: o
   avanco total do H1 em caixa alta cai 3,3% (pt 48,38em -> 46,80em; es 49,53 ->
   47,87), medido no proprio binario, e nenhum outro numero da pagina muda.
   A COLUNA MINIMA PARA TRES LINHAS cai junto — de 16,91em para 16,33em no
   espanhol, que e o idioma mais largo. A 44px sao 745px contra 719px: 26px de
   coluna comprados sem tocar em tamanho nenhum.
   O QUE SE PERDE: nada que se veja neste corte. O estencil ja tem vao proprio
   entre os cortes de cada haste, e a 44px o corte mede 1,44px (tabela do
   contrato) — o tracking positivo existia para o caso de a familia colar, e ela
   nao cola. Verificado no render a 1440, 1024, 390 e 360.
   O +0,02em do contrato CONTINUA onde ele e estrutural: na numeracao `.secn`
   (38px fixo, dois algarismos que precisam respirar) e no `.t-micro`.
   DESVIO DECLARADO de `instancias_decididas.display_hero`, autorizado
   literalmente no despacho. */
.t-display{
  font-family:"Stardos Stencil","Stardos Stencil Fallback",Arial,sans-serif;
  font-weight:700;
  font-size:var(--fs-display); line-height:1.20;
  text-transform:uppercase; letter-spacing:0;
}
.t-manchete,.t-titulo,.t-bloco,.t-marca{
  font-family:"Literata","Literata Fallback",Georgia,serif;
  font-weight:700;
}
.t-manchete,.t-titulo,.t-bloco{font-variation-settings:"opsz" 36,"wght" 700}
.t-manchete{font-size:var(--fs-manchete);line-height:1.20;letter-spacing:-0.006em}
.t-titulo{font-size:var(--fs-titulo);line-height:1.26;letter-spacing:-0.004em}
.t-bloco{ /* desvio declarado: passo `subtitulo` no peso dos títulos */
  font-size:var(--fs-subtitulo); line-height:1.26; letter-spacing:0;
}
.t-lead{font-size:var(--fs-subtitulo);line-height:1.52;letter-spacing:-0.005em;
  font-variation-settings:"opsz" 24,"wght" 400}
.t-corpo{font-size:var(--fs-corpo);line-height:1.6}
.t-apoio{font-size:var(--fs-apoio);line-height:1.55;letter-spacing:0.005em}
.t-rotulo{font-size:var(--fs-rotulo);line-height:1.485;letter-spacing:0.08em;
  font-feature-settings:"smcp" 1,"lnum" 1; text-transform:lowercase}
.t-micro{font-size:var(--fs-micro);line-height:1.485;letter-spacing:0.02em}
.prosa{max-width:var(--prosa)}
.enfase{font-variation-settings:"opsz" 12,"wght" 700}

/* ---------- camada 2: O DESTAQUE — uma locução por título, e só ela --------
   `REGRA_DURA_destaque`: itálico da Literata em 500, NUNCA caixa alta, NUNCA
   sublinhado, NUNCA caixa de cor atrás. Dentro do H1 da hero, que e caixa alta
   e tem tracking +0,02em, ele VOLTA a caixa mista e a tracking 0 — e
   literalmente o que `.t6cit` do card C faz (`text-transform:none`,
   `letter-spacing:0`), e e o que faz a locucao ler como VOZ e nao como parte da
   placa. A metrica vertical da italica e IDENTICA a da romana (asc 1,177 /
   desc -0,308 nas duas): trocar romana<->italica dentro de uma linha nao muda a
   altura da linha nem move nada. O destaque e gratuito em layout.
   A TINTA vem de `--destaque`, que cada campo redefine — nunca um hex aqui. */
.dest{
  font-family:"Literata Italic","Literata Fallback",Georgia,serif;
  font-style:italic; font-weight:500; font-variation-settings:normal;
  color:var(--destaque);
  text-transform:none; letter-spacing:0;
}

/* ---------- camada 2: A NUMERAÇÃO 01–08 ------------------------------------
   Stardos Stencil 700 a 38px FIXO (`tamanho_fixo_da_numeracao: 38`), tracking
   +0,02em, entrelinha 1 — os quatro numeros do `.t6cn` do card C, sem desvio.
   POR QUE `max(38px, 2.375rem)` e nao `38px` seco: 2,375rem SAO 38px na raiz de
   16px, e e a forma que cresce quando o usuario sobe a fonte (WCAG 1.4.4); os
   38px de piso existem porque a raiz TAMBEM pode descer — a 12px de raiz um
   `2.375rem` puro daria 28,5px, ou seja, abaixo do piso de 32px, e a familia
   perderia a unica coisa que a distingue. O piso e FISICO: e o do corte de
   estencil, nao o da leitura. A 38px o corte mede 1,25px, 19% acima do ponto em
   que o antialiasing o preenche.
   `lnum` porque o «01» tem de ser DOIS ALGARISMOS DA MESMA ALTURA — a Stardos
   nao tem numeral antigo, mas a declaracao trava o comportamento se o binario
   trocar. `flex:none` porque ele vive dentro de flex-box em todas as oito.
   A TINTA e `--tinta-mutada`, a tinta corrente de cada campo. Ver o bloco
   «a numeracao 01-08» mais abaixo para o porque e para os contrastes medidos. */
.secn{
  font-family:"Stardos Stencil","Stardos Stencil Fallback",Arial,sans-serif;
  font-weight:700;
  font-size:max(38px, 2.375rem); line-height:1; letter-spacing:0.02em;
  font-feature-settings:"lnum" 1;
  color:var(--tinta-mutada); flex:none; font-style:normal;
}

/* ---------- estrutura ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.s{position:relative;padding-block:var(--sy);background:var(--campo);
  scroll-margin-top:4.5rem;overflow:hidden}
.s > .wrap{position:relative;z-index:2}

/* ---------- camada 5: a marca de resposta ---------- */
.disco{display:inline-block;border-radius:50%;flex:none;vertical-align:middle}
.disco--cheio{background:var(--cheio)}
.disco--vazado{background:transparent;box-shadow:inset 0 0 0 1.5px var(--anel)}
.d7{width:7px;height:7px}
.d11{width:11px;height:11px}
.d22{width:22px;height:22px}
.d26{width:26px;height:26px}

/* ======================= A NUMERAÇÃO 01–08: onde ela vive ==================
   O PROBLEMA, com os dois lados: o contrato manda que os numeros 01-08 existam
   em Stardos 700 a 38px, e que leiam como SISTEMA nas oito secoes. Mas duas das
   oito — a 01-hero e a 05-o-projeto — perderam o `.marcador` (disco de 22px +
   fio ate a borda da coluna) por PEDIDO LITERAL do usuario, em duas voltas
   diferentes («remova essa linha com o circulo ao lado acima do titulo», 09-09,
   e «remove the line with a circle in the left», 09-10). Reintroduzir disco+fio
   nelas para pendurar um numero seria desobedecer duas vezes.
   A DECISAO: o SISTEMA passa a ser o NUMERO, e o disco+fio deixa de ser o
   sistema para virar o que sempre foi — decoracao herdada de seis secoes.
   Em TODAS AS OITO o numero ocupa o MESMO lugar: a PRIMEIRA LINHA da coluna,
   antes de qualquer texto, encostado na borda a que a secao esta ancorada
   (esquerda nas impares, direita nas pares — a mesma alternancia que o
   marcador ja tinha). Nas SEIS que tem marcador ele entra NO LUGAR DO DISCO e o
   fio continua correndo dele ate a borda: `01 ————————` deixa de ser um disco
   com um risco e vira uma NUMERACAO DE OBRA, que e o nome do card que o usuario
   escolheu. Nas DUAS que nao tem, o numero fica sozinho na mesma linha — sem
   disco, sem fio, sem regua: nada do que o usuario removeu volta.
   POR QUE NAO ao lado do titulo (a outra opcao, e a que o card C desenha): o
   card C poe `02  As portas` na mesma linha de base porque o titulo dele tem
   NOVE letras. Os titulos reais medem 45 a 76 caracteres e ocupam duas a tres
   linhas em toda largura — um numero de 38px na primeira linha delas vira
   entrada de indice com indentacao pendente, e no telefone rouba 62px dos 358px
   de coluna justamente da linha mais importante da pagina. Testado no render e
   descartado (ver relatorio).
   A TINTA: `--tinta-mutada`, a tinta corrente do campo — que em «Titanio e
   brasa» e `--texto-mutado` na raiz e vira `--on-acento` translucido dentro da
   07, a unica secao cujo campo E a brasa. NUNCA um degrau fixo da rampa: cada
   uma das oito le no seu proprio campo, com UMA regra, e os oito contrastes
   medidos NOS DOIS TEMAS estao no dossie do Gate A.
   POR QUE MUTADA e nao a tinta cheia: o numero e um marco de posicao, nao um
   titulo. Em tinta cheia, 38px de estencil em 700 pesam MAIS que o titulo de
   seção em Literata (o estencil tem 13,6% de densidade de tinta contra 11,4% da
   Literata, medido no contrato) e a secao passaria a ser apresentada pelo seu
   indice. Mutada ele marca sem anunciar. */
/* marcador de seção: a NUMERAÇÃO + o fio que corre até a borda da coluna.
   `align-items:center` alinha o fio ao centro da CAIXA do numero (19px de 38);
   o centro optico dos algarismos esta a 16,6px, porque com `line-height:1` a
   meia-entrelinha da Stardos e NEGATIVA (a caixa de conteudo dela e 1,3794em) e
   a caixa cai 2,4px abaixo dos algarismos. Os -2px do fio pagam exatamente essa
   diferenca: sem eles o fio sai do pe do «1» em vez do meio dele, e a 1440 isso
   se ve. Numero medido, nao chutado. */
.marcador{display:flex;align-items:center;gap:.875rem;margin-bottom:var(--item)}
.marcador .fio{flex:1;height:1px;background:var(--junta);margin-top:-2px}
.marcador--dir{flex-direction:row-reverse}
/* A NUMERAÇÃO SOZINHA — as duas seções que perderam o marcador por pedido do
   usuário (01-hero e 05-o-projeto). Mesmo lugar (primeira linha da coluna),
   mesma tinta, mesmo tamanho; sem disco e sem fio, que é exatamente o que o
   usuário removeu. `.num-solo` é a linha inteira; `.marca-obra` é a variante da
   hero, onde o número divide a linha com o eyebrow porque a hero JÁ tem uma
   primeira linha de texto e um número sozinho acima dela custaria 46px de
   altura numa seção que tem de fechar em 100svh. */
.num-solo{margin-bottom:var(--item);line-height:0}
.num-solo--dir{text-align:right}

/* ---------- camada 4: a folha de cima (borda diagonal — ativo ownable) ----- */
.folha{position:absolute;inset-block:0;right:0;width:50%;z-index:0;
  background:var(--acento);
  clip-path:polygon(21% 0, 100% 0, 100% 100%, 0 100%);pointer-events:none}
.folha .face{position:absolute;inset:0;background:var(--cal-6);
  clip-path:polygon(calc(21% + 3px) 0, 100% 0, 100% 100%, 3px 100%)}
/* RECOMPOSE 2026-09-10: a 05 NAO usa mais a folha (era «this diagonal line
   effect» do pedido do usuario) e o override que ela tinha aqui saiu junto.
   A regra global fica: a 03 usa `folha--veu`. */
/* abaixo de 64rem a página é UMA coluna: não há onde a folha ser folha, e a
   diagonal passaria por dentro do texto. Some — é decoração, Lei 1. */
@media (max-width:63.99rem){.folha{display:none}}
.folha--veu{background:transparent}
/* a SEGUNDA FOLHA da 03 leva fibra propria, em angulo LEVEMENTE diferente do
   campo (93deg contra os 97,5deg da base): e o que faz duas folhas lerem como
   duas folhas e nao como um veu chapado. A fibra vem em cima do veu de 6% —
   duas camadas de background, nenhuma cor nova. */
/* spec §5: a folha sobreposta le a TINTA DO TEMA a 3% nas linhas e a 6% no
   plano. Recorte, dimensoes, diagonal e direcao da fibra: preservados. */
.folha--veu .face{background:
  repeating-linear-gradient(93deg, var(--tinta-30) 0 1px,
                            var(--tinta-00) 1px 7px),
  var(--tinta-60)}

/* ---------- camada 4 «O papel do processo»: A FIBRA DO CAMPO ----------------
   DECISAO DO USUARIO, 2026-09-11: «textura de papel em TODAS as secoes, menos a
   hero». O contrato ja mandava — camada 4, `onde_mora`: «o campo inteiro vira
   papel». Ate hoje so a 05 tinha a fibra; agora as SETE tem, e a 01-hero NAO
   (arte aprovada, barra transparente: nenhum byte de `.s01`/`.hero`/`.topo`
   mudou nesta volta, e o md5 do bloco esta no Gate).

   UMA REGRA, PARAMETRIZADA POR SECAO — nao sete copias. A geometria mora aqui;
   cada `.s0N` declara so os quatro tokens (`--fibra`, `--fibra-0`, `--fibra-ang`,
   `--fibra-passo`) e, quando a secao tem plano proprio, a mascara.

   HARMONIA DE COR (Lei 2): a fibra NUNCA e cor nova — e sempre uma tinta do
   fecho em rgba sobre o campo da propria secao.
   «TITANIO E BRASA» SIMPLIFICOU ESTA REGRA, e a simplificacao e da spec §5: a
   fibra passa a ser A TINTA DO TEMA (`--tinta-*`, que e `--texto` em rgba) em
   SEIS das sete secoes de campo — no tema claro ela e escura sobre campo claro,
   no tema escuro ela e clara sobre campo escuro, e a inversao acontece sozinha
   quando o tema troca. Antes a regra virava POR SECAO (campo claro recebia
   espresso, campo escuro recebia cal) porque a paleta tinha uma coluna so.
   A EXCECAO E A 07, e ela nao e arbitraria: o campo dela e a BRASA, que e clara
   no tema escuro e escura no claro — exatamente ao contrario do campo geral.
   La a fibra le `--sobre-acento-*`, que e `--on-acento` em rgba, pela mesma
   razao de sempre: a fibra tem de ser a tinta que LE naquele campo.

   EMPILHAMENTO: `z-index:0` no ::before, `pointer-events:none`, e `.s > .wrap`
   ja esta em `z-index:2` desde o inicio do projeto — entao a fibra fica ABAIXO
   de todo conteudo e de todo componente. A fibra e do CAMPO: porta, ficha, faixa
   de FAQ, caixa do CTA e chapa-retrato tem fundo OPACO e continuam lisos por
   cima dela. As camadas de arte que ja existem (`.folha` z-0, `.campo-arte` z-0,
   `.corte` z-1) pintam DEPOIS do ::before por ordem de DOM — nenhuma delas foi
   reempilhada.

   Lei 1: a fibra e CSS puro, zero raster. Apagados todos os assets, ela e o que
   sobra — que e exatamente o estado em que o Gate A e medido. */
.s02,.s03,.s04,.s05,.sterr,.s06,.s07,.s07b,.s08,.pc-cab{
  --fibra-ang:93deg;--fibra-passo:7px;--fibra-mascara:none}
.s02::before,.s03::before,.s04::before,.s05::before,.sterr::before,
.s06::before,.s07::before,.s07b::before,.s08::before,.pc-cab::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(var(--fibra-ang),
    var(--fibra) 0 1px, var(--fibra-0) 1px var(--fibra-passo));
  -webkit-mask-image:var(--fibra-mascara);mask-image:var(--fibra-mascara)}

/* ---------- componentes: camada 3 «A Inversão de Matéria» ---------- */
.painel{background:var(--superficie);border:var(--fio) solid var(--estrutura);
  border-radius:var(--raio);padding:clamp(1.25rem,0.9rem + 1.2vw,2rem)}
.painel--faixa{padding:0;overflow:hidden}
.faixa-t{background:var(--estrutura);color:var(--superficie);
  padding:.75rem clamp(1.25rem,0.9rem + 1.2vw,2rem);display:flex;align-items:center;gap:.625rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:52px;padding:.75rem 1.75rem;border-radius:var(--raio);
  border:var(--fio) solid transparent;text-decoration:none;
  font-family:"Literata","Literata Fallback",Georgia,serif;
  font-size:var(--fs-corpo);line-height:1.485;letter-spacing:0.01em;
  transition:background-color .16s ease-out,color .16s ease-out}
/* O ROTULO SOBRE A BRASA E `--on-acento`, NUNCA `--superficie` (REGRA_DURA do
   contrato). `--superficie` e uma superficie, nao a cor universal do texto de
   botao: no tema escuro, texto claro sobre a brasa e ERRO. */
.btn--barro{background:var(--acento);color:var(--on-acento);border-color:var(--acento)}
.btn--barro:hover{background:var(--barro-hover)}
.btn--barro:active{background:var(--barro-press)}
/* O CTA CLARO DENTRO DA 07 — spec §5: «superficie neutra com tinta propria».
   O hover/press deixam de ser `--cal-mutado-barro`/`--borda` e passam aos dois
   campos intermediarios NEUTROS da paleta. Os dois antigos eram heranca de Cal
   e Barro e, na paleta nova, um deles nao se ve (no tema claro
   `--cal-mutado-barro` e quase a propria superficie) e o outro reprova: a brasa
   sobre `--borda` do tema escuro da 3,5:1, abaixo do piso de 4,5 do rotulo.
   Com --cal-6/--cal-7 a brasa mede 7,8 e 7,3 no claro e 7,1 e 6,7 no escuro. */
.btn--cal{background:var(--superficie);color:var(--acento);border-color:var(--superficie)}
.btn--cal:hover{background:var(--cal-6)}
.btn--cal:active{background:var(--cal-7)}
/* FOCO DE DOIS ANEIS (spec §5). Um anel so nao serve a uma paleta que troca de
   polaridade por tema e por secao: o par --foco/--on-acento garante que, seja
   qual for o fundo adjacente, UM dos dois aneis tem 3:1 contra ele. O anel
   externo (outline, no offset) encosta no FUNDO; o interno (box-shadow, colado
   ao elemento) encosta no ELEMENTO. */
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;
  box-shadow:0 0 0 3px var(--on-acento);border-radius:var(--raio)}

/* ---------- topo: A PLACA E O AR (estudo F — 2026-09-15) ------------------
   TESE, em uma frase: a barra deixa de ser uma FAIXA com dois cantos ocupados e
   passa a ser DUAS PECAS de naturezas opostas ancoradas no mesmo lado — A PLACA
   (materia macica, sangrando pelo canto superior esquerdo da tela, com a marca
   impressa em NEGATIVO) e O AR (os controles, tinta pura sobre o campo, sem
   container) — e os dois tercos da direita ficam VAZIOS de proposito, porque e
   la que o homem esta.

   POR QUE ISTO NAO E MAIS UM «logo a esquerda + cluster a direita»: o esqueleto
   generico e simetrico (dois cantos ocupados, meio vazio). Aqui os dois grupos
   moram do MESMO lado, encostados, e o que separa os dois nao e distancia — e
   MATERIA: um e bloco solido que sangra pela borda, o outro nao tem corpo
   nenhum. O vazio deixa de ser sobra e vira a maior forma da composicao.

   A ORDEM DO USUARIO (Gate A #23) E O QUE ESTE DESENHO RESPONDE:
   1. «a linha na diagonal ficou muito feia» — NAO EXISTE UMA DIAGONAL NESTE
      BLOCO. Todo contorno e horizontal ou vertical. O ativo ownable da camada 4
      («a borda diagonal da folha de cima») nao some da identidade: ele e
      REESCRITO na barra como uma borda HORIZONTAL E CURTA — o pe de brasa de 3px
      da placa, que corre da borda da tela ate o fim da placa e para ali. A
      camada 4 continua presente pela FIBRA (o mesmo 93deg / passo de 7px das
      sete secoes), que e textura, nao traco.
   2. «a header colide com a pessoa da foto» — a placa e os controles sao
      ANCORADOS A ESQUERDA e terminam, na pior largura medida, a 187px do inicio
      da caixa do rosto. Nenhuma peca pintada da barra alcanca o rosto em
      NENHUMA das nove larguras. Os numeros estao em `_rosto-mapa.json`.

   AS CAMADAS, e onde cada uma entra:
   · camada 3 «A Inversao de Materia» — UMA vez, e em ESCALA ARQUITETONICA: a
     placa e o container que virou materia macica com o rotulo virado campo. Era
     isto que estava gasto nas quatro pilulas de idioma (o juiz as cegas leu
     aquilo como «widget de traducao»); agora o gesto acontece uma vez so, na
     peca que carrega a marca. Raio externo 3 no unico canto livre da placa
     (inferior direito); os outros tres cantos nao existem — sangram pela tela.
   · camada 4 «O papel do processo» — a fibra do campo, na chapa, com a mesma
     regra das sete secoes (tinta do tema em rgba, 93deg, passo 7px).
   · camada 5 «A Marca de Resposta» — UMA vez por barra, no unico controle que e
     resposta binaria: o TEMA. Cheio = escuro ligado, vazado = desligado, 11px
     (a escala da «porta»).
   · camada 2 — Literata em smcp real. A Stardos Stencil NAO entra: o piso do
     contrato e 32px e «Fabio Silva» em estencil a 32px estoura a barra a 390.
     Desvio DECLARADO no RELATORIO, com o numero.

   O IDIOMA ATIVO PERDEU A PILULA MACICA, e isso e decisao, nao esquecimento:
   com a placa carregando a inversao de materia, repetir a inversao num botao de
   28px devolvia exatamente o ornamento que o Gate A #19 reprovou. O ativo passa
   a ser marcado por FORMA (um fio curto de brasa sob o rotulo) + PESO (700
   contra 500) + `aria-pressed` — nunca so por matiz, como manda 1.4.1.

   A ALTURA NAO MUDA: o envelope continua em 61px exatos, a MESMA expressao que
   a hero le em `--barra` (`max(56px,3.5rem, max(44px,2.75rem)+1rem) + 1px`).
   Nenhum item da barra passa de 44px, e o alvo de toque continua em 44 inteiros
   nos dois eixos. O 100svh da hero nao foi tocado. */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:30;
  /* A SANGRIA DA PLACA. A placa tem de comecar na BORDA DA TELA, mas o rotulo
     dela tem de alinhar com a coluna do site (o mesmo x do H1 da hero). A conta
     e margem negativa + padding igual: o fundo anda para a esquerda, o texto
     fica onde estava, e o layout nao muda um pixel. 100rem cobre a maior
     sobra possivel (a 2560 a coluna comeca a 620px da borda). Estouro para a
     ESQUERDA nao gera barra de rolagem em LTR — medido nas nove larguras. */
  --sangria:100rem;
  /* O AR DENTRO DA PLACA e O AR ENTRE AS DUAS PECAS. Os dois crescem com a
     largura, e o segundo cresce MAIS RAPIDO que o primeiro de proposito: quanto
     mais tela existe, mais as duas pecas precisam ler como DUAS, e nao como um
     cluster unico. A 1440 sao 36,8px dentro da placa contra 51,0px entre ela e
     os controles.
     EM PX, NAO EM REM, e isto e decisao medida: os dois sao AR ORNAMENTAL, nao
     tipo de leitura — a regra do zoom 200% (`rem`, nunca `vw` puro) vale para o
     texto, e o texto desta barra e todo em rem. Quando o visitante aumenta a
     fonte do sistema, o alvo de toque cresce com ela (como deve) e o grupo de
     controles avanca para a direita; se o ar crescesse junto, ele avancaria mais
     ainda contra a folga do rosto. Nos 16px de raiz padrao os dois valores sao
     IDENTICOS aos antigos (0,25rem = 4px, 0,4rem = 6,4px), entao o caso comum
     nao muda um pixel; o ganho aparece so quando a raiz cresce.
     A RESSALVA HONESTA, e ela esta no RELATORIO com o numero: com raiz de 32px
     (fonte do sistema no dobro) a 1024 o grupo AINDA alcanca a faixa x do rosto.
     Nenhum ajuste de ar resolve aquilo — quem cresce la e o alvo de toque, e o
     alvo de toque nao cede. */
  --placa-ar:clamp(14px, 4px + 1.8vw, 36px);
  --ar:clamp(16px, 6.4px + 2.5vw, 56px);
  /* os dois lados da INVERSAO DE MATERIA, em tokens locais: a `.topo` e `fixed`,
     nao e filha de secao nenhuma e por isso declara os seus. */
  --macico:var(--texto);
  --sobre-macico:var(--campo);
  /* A BRASA DA PLACA. A placa e uma ILHA de polaridade invertida: no tema claro
     ela e materia quase preta, no tema escuro (e sobre a arte) ela e materia
     quase branca. Entao o pe de brasa NAO pode ler `--acento` da raiz — tem de
     ler a brasa que enxerga NO CAMPO DA PROPRIA PLACA. E a mesma logica que a
     `.s01` ja aplica por ser ilha escura nos dois temas, e e o que a paleta de
     duas colunas do contrato existe para resolver.
     Medido, e a versao 3 foi DESCARTADA por causa disto: com `--acento` da raiz,
     no tema CLARO com chapa o pe ficava em ember escuro sobre placa quase preta
     e praticamente sumia. A versao 4 inverteu o pe por tema (ember escuro sobre
     placa clara); ficou pior — entre a placa branca e a fotografia escura o
     ember escuro le como SOMBRA, nao como brasa, e a peca perdeu a assinatura
     justamente no estado mais visto.
     A regra que ficou e a mais simples e a que o proprio `.s01` ja usa por ser
     ilha escura nos dois temas: a brasa da placa e UMA SO, a mesma em todo
     estado e em todo tema. Em cada estado ela tem um dos dois lados da junta
     com contraste de sobra. */
  --brasa-placa:#FDA671;
  --junta-barra:var(--borda);
  --anel:var(--estrutura);
  --cheio:var(--acento);
  background:var(--campo);color:var(--texto);
  /* O CONTORNO E HORIZONTAL. O fio existe sempre — transparente sobre a arte —
     para que o envelope da barra meça 61px identicos nos dois estados. */
  border-bottom:var(--fio) solid var(--borda);
  /* a `.topo` inteira nao captura ponteiro: so a placa e os controles capturam.
     Assim o campo vazio dos dois tercos da direita devolve o clique a hero. */
  pointer-events:none}
/* A FIBRA DA CHAPA — camada 4. Some junto com a chapa sobre a arte. */
.topo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(93deg,
    var(--tinta-30) 0 1px, var(--tinta-00) 1px 7px)}
.topo > .wrap{pointer-events:none}
.topo .t-marca,.topo .controles{pointer-events:auto}

/* A TRANSICAO ENTRE OS DOIS ESTADOS: 0,14s, a mesma duracao e a mesma curva de
   sempre — MENOS NA PLACA, e a excecao esta medida. A placa inverte polaridade
   entre os estados no tema claro (materia quase branca sobre a foto, materia
   quase preta sobre o papel); crossfade de fundo E rotulo ao mesmo tempo cruza
   o cinza medio nos dois ao mesmo tempo e o contraste transiente cai a ~1:1 por
   ~70ms. A placa por isso NAO atravessa: ela troca de estado em 0s e nunca
   existe num quadro intermediario. O resto (chapa, fibra, fio, controles)
   atravessa normalmente, porque nenhum deles inverte polaridade. */
.topo,.topo .idioma-b,.topo .tema-b,.topo .disco,.topo > .wrap{
  transition:background-color .14s ease-out,border-color .14s ease-out,
             color .14s ease-out,box-shadow .14s ease-out,max-width .14s ease-out}
.topo::before{transition:opacity .14s ease-out}

/* A LINHA, E A LARGURA DE VIRADA — 64rem (1024px), E ELA NAO E ARBITRARIA.
   A partir de 64rem os dois grupos se ENCOSTAM a esquerda e os dois tercos da
   direita ficam vazios; abaixo de 64rem eles abrem para as duas pontas.
   POR QUE EXATAMENTE AQUI: 64rem e o ponto em que a hero troca de peca
   (`hero-mobile` -> `hero-desktop`) e, com a troca, o ROSTO do Fabio sobe para o
   alto do quadro. Medido: abaixo de 64rem a caixa do rosto fica em y 556..849
   (a 768) e y 626..774 (a 390) — o homem esta no PE da tela, nao ha ninguem ao
   lado da barra e nao ha o que contornar. A partir de 64rem a linha do cabelo
   passa a y 49,5 e a 60% da largura: e exatamente ai que o ar do lado direito
   ganha uma razao de existir, e e exatamente ai que ele abre.
   Ou seja: a virada nao e um conserto de caber — e a barra respondendo a
   chegada do homem no quadro. A PROVA: forcando `flex-start` no telefone, o
   agrupamento a esquerda so NAO cabe a 360 (pede 372,7px em es, divida de
   12,7px); a 390 ja sobram 17,3px e a 768 sobram 297,2px. O limite fisico esta
   em ~23rem. A virada esta em 64rem porque e la que ela significa alguma coisa.
   `align-items:stretch` existe para a placa: ela precisa da altura INTEIRA da
   barra (ela sangra pelo topo da tela), enquanto os controles se centram. */
.topo > .wrap{position:relative;z-index:1;
  display:flex;align-items:stretch;justify-content:space-between;
  gap:var(--ar);min-height:max(56px,3.5rem);padding-block:.5rem}
@media (min-width:64rem){.topo > .wrap{justify-content:flex-start}}

/* A PLACA — camada 3 em escala arquitetonica.
   ⚠ ESCOPO: `.t-marca` NAO e so da barra — o rodape (secao 08) usa a mesma
   classe. A regra global abaixo e byte a byte a que esta no ar; tudo que e da
   placa mora em `.topo .t-marca`, que so alcanca a barra. */
.t-marca{font-size:var(--fs-corpo);letter-spacing:-0.01em;display:flex;align-items:center;gap:.5rem}
.topo .t-marca{
  position:relative;z-index:0;margin:0;padding:0 var(--placa-ar) 0 0;
  color:var(--sobre-macico);
  display:flex;align-items:center;
  font-family:"Literata","Literata Fallback",Georgia,serif;
  font-size:var(--fs-corpo);line-height:1.2;letter-spacing:0.12em;
  font-variation-settings:"opsz" 12,"wght" 700;
  font-feature-settings:"smcp" 1,"lnum" 1;text-transform:lowercase;
  gap:0;white-space:nowrap;
  transition:none}
/* O CORPO DA PLACA mora num pseudo-elemento, e a razao e de LAYOUT, nao de
   estilo: a sangria feita com `padding-left:100rem` + `margin-left:-100rem`
   funciona para pintar, mas envenena a conta do flex — a largura minima do item
   passa a ser 1600px + texto, o `flex-shrink` nao consegue encolher nada e a
   linha inteira estoura no telefone (medido: a 360 os controles terminavam a
   372,2px, 12,2px FORA da tela). Com o pseudo-elemento o item mede so o texto,
   o flex volta a fechar a conta, e o fundo continua sangrando pela borda.
   Estouro para a ESQUERDA nao gera rolagem em LTR — medido nas nove larguras. */
.topo .t-marca::before{content:"";position:absolute;z-index:-1;
  top:-.5rem;bottom:-.5rem;right:0;left:calc(-1 * var(--sangria));
  background:var(--macico);
  /* O PE DE BRASA: o ativo ownable da camada 4, agora HORIZONTAL e CURTO. 3px,
     a mesma espessura da borda de folha que a 03 usa. Ele nao desliga entre os
     estados — e ele que faz a placa existir como PECA sobre a fotografia. */
  border-bottom:3px solid var(--brasa-placa);
  /* o unico canto que existe: os outros tres sangram pela tela */
  border-bottom-right-radius:var(--raio)}

/* O AR — os controles nao tem corpo: sao tinta direto no campo (sobre a arte) ou
   no papel (com chapa). Nenhum container, nenhuma moldura, nenhuma sombra. */
.controles{display:flex;align-items:center;gap:var(--placa-ar)}
.idioma{display:flex;align-items:center;gap:0}
.idioma-b,.tema-b{display:inline-flex;align-items:center;justify-content:center;
  min-height:max(44px,2.75rem);cursor:pointer;background:transparent;
  color:var(--texto);border:0;border-radius:0;
  font-family:"Literata","Literata Fallback",Georgia,serif;
  font-size:var(--fs-apoio);letter-spacing:0.08em;
  font-variation-settings:"opsz" 12,"wght" 500;
  font-feature-settings:"smcp" 1,"lnum" 1;text-transform:lowercase}
.idioma-b{position:relative;min-width:max(44px,2.75rem);padding:0 .5rem;
  border-left:var(--fio) solid var(--junta-barra)}
.idioma-b:first-child{border-left:0}
.idioma-b:hover,.tema-b:hover{background:var(--tinta-60)}
/* O ATIVO: FORMA (fio curto de brasa) + PESO (700), nunca matiz sozinho. */
.idioma-b[aria-pressed="true"]{font-variation-settings:"opsz" 12,"wght" 700}
.idioma-b[aria-pressed="true"]::after{content:"";position:absolute;
  left:.5rem;right:.5rem;bottom:9px;height:3px;background:var(--acento)}
.idioma-b[aria-pressed="true"]:hover{background:var(--tinta-60)}

/* O TEMA — a camada 5, uma vez. Cheio = escuro ligado; vazado = desligado.
   O rotulo textual continua dizendo a mesma coisa (1.4.1: o disco nunca e
   portador unico). Escala 11px, a da «porta». */
.tema-b{gap:.5rem;padding:0 .5rem;border-radius:var(--raio)}
.topo .disco--cheio{background:var(--cheio)}
.topo .disco--vazado{box-shadow:inset 0 0 0 1.5px var(--anel)}

/* --- estado SOBRE A ARTE: a chapa e a fibra somem; a placa inverte -----------
   Quem liga: o script, quando o pe da 01-hero ainda passa sob a barra.
   POR QUE TOKENS LOCAIS: a `.topo` e `fixed`, nao e filha de `.s01` e nao herda
   o contexto escuro da ilha. Os tokens abaixo declaram a leitura clara que este
   estado sempre quis e valem nos DOIS temas, como a hero.
   A GEOMETRIA NAO MUDA UM PIXEL entre os estados: mesma altura, mesma placa,
   mesmas caixas. O que muda e cor. */
.topo.is-sobre-arte{--texto:#F0F6F9;--acento:#FDA671;--on-acento:#0B0E0F;
  --foco:#F0F6F9;--macico:#F0F6F9;--sobre-macico:#0B0E0F;
  --anel:#F0F6F9;--cheio:#FDA671;--junta-barra:rgba(240,246,249,0.45);
  --tinta-60:rgba(240,246,249,0.10);
  background:transparent;border-bottom-color:transparent}
.topo.is-sobre-arte::before{opacity:0}
/* ACHADO DO JULGAMENTO DE DCL AS CEGAS de uma volta anterior, e continua valendo:
   a partir de 120rem a coluna da hero abre para 108rem e a barra ficava presa em
   82,5rem — a 1920 a marca comecava 204px a direita do «S» do titulo que ela
   apresenta. Sobre a hero a barra abre junto; com chapa ela volta aos 82,5rem
   das outras sete. Entra na MESMA transicao de 0,14s. */
@media (min-width:120rem){.topo.is-sobre-arte > .wrap{max-width:108rem}}

/* A CONTA DA BARRA NO TELEFONE. Com os dois grupos encostados a esquerda, a
   largura pedida passa a ser a SOMA (placa + ar + controles) e nao mais o par
   com o vao no meio. Medida a 360 nos tres idiomas: sobra folga e a marca
   continua em UMA linha — o que a ordem manda nao regredir.
   O que cede abaixo de 26rem: o ar entre os grupos e dentro deles. O que NAO
   cede: o alvo de toque (44px inteiros nos dois eixos) e o rotulo textual dos
   quatro controles, nos tres idiomas. */
@media (max-width:26.99rem){
  .topo{--placa-ar:8px;--ar:8px}
  .controles{gap:.5rem}
  .idioma-b{padding:0 .25rem}
  .idioma-b[aria-pressed="true"]::after{left:.25rem;right:.25rem}
  .tema-b{padding:0 .25rem;gap:.375rem}
  .topo .t-marca{letter-spacing:0.04em}
}

/* =========================== 01 — hero =========================== */
/* RECOMPOSE 2026-09-04 (2ª volta). O usuário pediu: a arte com a foto do Fabio
   preenchendo TODO o fundo do hero — toda a largura e toda a altura.
   O que isso mata: a LÂMINA. Ela era um painel espresso opaco de 58 a 75vw
   por cima da arte; com ela a foto só aparecia num terço da tela. Saiu.
   O que entra no lugar: um VÉU em gradiente sobre a arte INTEIRA — escuro onde o
   texto mora (esquerda no desktop, faixa superior no mobile), transparente onde
   o retrato mora. A arte não é mais o campo de um lado: é o campo do hero todo.
   Campo da ILHA ESCURA (--campo local, #272A2C) sob o slot vazio.
   Ancoragem: `edge-anchored` — a arte sangra às QUATRO bordas da tela.
   No Gate A o slot está VAZIO (Lei 1): sobra campo + fibra CSS + véu. */
/* A HERO E ILHA ESCURA NOS DOIS TEMAS (contrato, `hero_contexto_local_escuro`).
   Os tokens abaixo sao um CONTEXTO LOCAL: valem dentro de `.s01` mesmo quando a
   raiz esta no tema claro, e por isso os ALIASES tem de ser redeclarados um a
   um — sem isso eles herdariam os valores claros JA RESOLVIDOS na raiz e a
   ilha ficaria com tinta de campo claro sobre campo escuro.
   A ARTE NAO E TOCADA: mesmos arquivos, mesma geometria, mesma copy. O que
   muda aqui e cor e so cor. */
.s01{
  --campo:#272A2C;
  --superficie:#373A3C;
  --texto:#F0F6F9;
  --texto-mutado:#C2CED5;
  --estrutura:#B8BFC2;
  --acento:#FDA671;
  --on-acento:#0B0E0F;
  --borda:#535759;
  --barro-hover:#EA9A69;
  --barro-press:#E59767;
  --foco:#F0F6F9;
  --barro:var(--acento);
  --tinta:var(--texto);
  --tinta-mutada:var(--texto-mutado);
  --destaque:var(--acento);
  --cheio:var(--acento);
  --anel:var(--texto);
  --junta:var(--borda);
  background:var(--campo);color:var(--texto);color-scheme:dark;
  /* RECOMPOSE 2026-09-09 (4a volta) — REGRA NOVA DO USUARIO, nao-negociavel:
     «a hero NUNCA pode ultrapassar a altura da tela em nenhum dispositivo — a
     secao inteira, do topo da barra sticky ao pe, tem de caber em 100svh».
     --barra = 3.8125rem = os 61px MEDIDOS da .topo sticky. Em rem de proposito:
     a barra cresce com a fonte do usuario, e a conta acompanha.
     --tela e o contrato de altura desta secao; tudo aqui dentro e dimensionado
     para caber nela, e min-height a torna EXATA (medido: sobra 0,0 nas 10
     larguras x 3 idiomas). svh, nao vh: no iOS a barra do navegador entra na
     conta de vh e a hero estouraria a tela justamente no aparelho de maior
     trafego. */
  /* a mesma expressao da .topo .wrap + o fio da borda. Nao e um numero copiado:
     e a conta. A 16px de raiz da os 61px MEDIDOS; a 20px e a 12px acompanha. */
  --barra:calc(max(56px, 3.5rem, max(44px,2.75rem) + 1rem) + 1px);
  /* 5a VOLTA (barra transparente) — A CONTA MUDOU DE LADO.
     Com a barra em `fixed` ela nao ocupa mais fluxo: a secao comeca em y=0,
     ATRAS dela, e o contrato de altura passa a ser a tela INTEIRA. Os 61px que
     a faixa de cal comia viram ARTE — nao viram texto: o texto continua abaixo
     da barra, porque a barra ocupa a faixa mesmo sem fundo (marca a esquerda,
     botoes a direita). Por isso o ganho vai todo para o retrato, e a conta do
     texto nao afrouxa nem aperta: --tela subiu 61px e o padding de cima subiu
     os mesmos 61px.
     O que o retrato ganha, medido: a caixa da arte no desktop passa de
     1920x1019 (1,88:1) para 1920x1080 (1,78:1), e a peca e 1600x904 (1,77:1) —
     ou seja, a janela de recorte encostou na proporcao da propria peca e o
     `cover` quase parou de cortar. No telefone, com a peca ancorada em
     `50% 100%`, os 61px aparecem POR CIMA: o retrato do pe nao se move um pixel
     e a peca mostra 61px a mais de si mesma. */
  --tela:100svh;
  /* 6a VOLTA (hierarquia dos subtextos) — O CORPO DA HERO EM UMA VARIAVEL.
     A hero passa a ter TRES tamanhos de texto e nao mais quatro nem cinco:
       1. display  ...... o H1 (--fs-display com os tetos de largura e altura)
       2. corpo    ...... --hero-corpo: o LEAD e o ROTULO DO BOTAO
       3. apoio    ...... --fs-apoio (14px fixo): o EYEBROW e o MICRO
     O botao entra na conta de proposito: rotulo de botao E texto da hero, e
     ele estava em --fs-corpo (16px no telefone) enquanto o lead ia a 17 — dois
     tamanhos a um pixel de distancia, que e o pior lugar para estar. Agora os
     dois leem o MESMO token.
     18px e o topo do degrau `corpo` da scale.json (16->18); 17px e um ponto
     DENTRO da mesma rampa (ela cruza 17px por volta de 940px de viewport). Ou
     seja: nenhum tamanho novo foi inventado — o degrau e o mesmo, congelado em
     dois valores para que a hierarquia nao escorregue com a largura. */
  --hero-corpo:1.125rem;
  min-height:var(--tela);
  display:flex;align-items:center;
  padding-top:calc(var(--barra) + clamp(0.875rem,2.4svh,2.25rem));
  padding-bottom:clamp(0.875rem,2.4svh,2.25rem)}
/* O 82vh de desktop MORREU aqui: a altura da hero deixou de ser um alvo de
   composicao e virou uma restricao dura (--tela). O gates.py herdado cobra a
   janela [0,70 · 0,92] do arquetipo `hero` sobre a base 900 — com --tela a
   secao passa a valer 1,00 da tela util em toda largura. DESVIO DECLARADO: a
   regra do usuario vence a janela do arquetipo, e o scale.json ja diz que
   vhTarget e desviavel dentro do arquetipo. */
.s01 > .wrap{width:100%}
/* no mobile a folga vai TODA para o pe: e la que o retrato da peca mora. */
@media (max-width:63.99rem){.s01{align-items:flex-start}}

/* --- a camada de arte: slot VAZIO no Gate A (Lei 1) --------------------- */
.hero-arte{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-arte .arte{position:absolute;inset:0;display:block}
/* o campo do slot: com asset, a imagem cobre isto; sem asset, É o campo */
.hero-arte .arte{background:var(--superficie)}
/* camada 4 «O papel do processo» em CSS PURO, sem um byte de asset: a fibra
   direcional e o vinco suave. É a resposta ao campo vazio do Gate A — matéria,
   não lavagem de gradiente. Some junto com a decoração; nenhum fato mora aqui. */
.hero-arte .arte::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(101deg, var(--luz-00) 46%, var(--luz-50) 50%,
                    var(--sombra-340) 54%, var(--luz-00) 60%),
    repeating-linear-gradient(96deg, var(--tinta-30) 0 1px,
                    var(--tinta-00) 1px 4px)}
.hero-arte .arte img{width:100%;height:100%;object-fit:cover;display:block}
/* ETAPA 4 — o ENQUADRAMENTO da peça dentro do próprio slot. Achado MEDIDO na
   geração: com `object-position` no centro (o default), o recorte de `cover`
   tira o sujeito da safe area nas duas pontas — em 1024px o rosto ia a 93,2%
   da largura (97,9% em espanhol, onde a seção é mais alta) contra o teto de
   92%, e em 2560px a cabeça saía pelo TOPO (y = −2,2%), porque a seção ali é
   2,60:1 e a tabela da direção de arte previa no máximo 2,17:1. Não é defeito
   da peça: a mesma conta cortaria qualquer 16:9. O conserto é o enquadramento,
   não a imagem — por isso NENHUMA geração foi gasta nisto.
   65% no eixo X puxa a janela de recorte para a direita, o que traz o rosto
   para dentro do campo limpo nas larguras em que sobra largura; 0% no eixo Y
   ancora o topo, o que preserva a cabeça nas larguras em que sobra altura.
   Só vale de 64rem para cima: a peça mobile mede bem centrada e não é tocada.
   Nenhum valor de cor, família, peso ou raio entra aqui — Lei 2 intocada. */
@media (min-width:64rem){.hero-arte .arte img{object-position:65% 0%}}
/* MOBILE, 4a volta: com a secao presa em --tela a faixa de retrato que vivia no
   padding-bottom (21rem) deixou de caber — ela sozinha valia 336px dos 739px
   uteis de um 360x800. A peca continua a mesma (3:10, retrato nos 25% de
   BAIXO): o que muda e a ancora. `50% 100%` prega o PE da peca no pe da secao,
   que e onde o retrato esta. Consequencia medida e declarada: nas larguras
   pequenas o texto passa a cobrir parte do retrato — ver a pendencia do recorte
   novo no pipeline-state.json. NENHUM byte de img/ foi tocado. */
@media (max-width:63.99rem){.hero-arte .arte img{object-position:50% 100%}}

/* ================ 01 — hero — mobile em cima do texto ================= */
/* RECOMPOSE 2026-09-15 · pedido direto do usuario (referencia visual
   anexada): no telefone o retrato passa a ficar ACIMA do texto, como uma
   placa, em vez de fundo por tras dele. `.hero-arte` ja era o PRIMEIRO filho
   de `.s01` no DOM (antes do `.wrap` com o texto) — so a posicao muda, de
   `absolute` (cobrindo a secao inteira, atras de tudo) para um bloco normal
   com proporcao propria (a mesma 4:3 do recorte). O texto segue em fluxo
   normal, LOGO ABAIXO, sobre o campo solido `--campo` da ilha escura — nao
   precisa mais de veu nem de contraste sobre a foto, porque o texto nao
   esta mais em cima dela.
   A FRANJA (`.hero-arte::after`) e a transicao pedida como «contraste»: o pe
   da peca esmaece no MESMO `--campo` que vem logo em seguida — nao e um veu
   sobre o rosto do Fabio (ele fica inteiro, sem escurecimento), e a costura
   entre a placa e o campo.
   CONSERTO (mesmo dia): a 1a volta encostou a peca em y=0, por baixo da
   barra transparente — «como ja acontecia» no fundo absoluto antigo, onde
   quem ficava sob a barra era o VAZIO reservado para o texto, nunca o
   Fabio. Agora o retrato inteiro esta no topo, centralizado, e a barra
   fixa passava por cima da cabeca dele — a ordem do usuario, verbatim:
   «o header esta entrando em conflito com a foto do Fabio no mobile». A
   peca ganha `padding-top:var(--barra)` em `.s01`: a foto comeca DEPOIS da
   barra, nunca por baixo dela. A barra mantem a logica de sempre (transparente
   ate a secao terminar); so que agora, sobre a hero, ela flutua sobre o
   CAMPO solido acima da foto, nunca sobre o retrato.
   DESVIO DECLARADO: a secao deixa de caber em 100svh no telefone. A regra
   «a hero nunca ultrapassa a tela» foi escrita para a composicao ANTERIOR
   (foto de fundo + texto por cima); nesta composicao --tela (100svh) vale
   como ALTURA MINIMA, nao maxima — a pagina rola, e e o preco desta
   composicao, pedida de proposito pelo usuario. Nenhum byte do desktop
   (>=64rem) foi tocado: la a arte continua o fundo absoluto de sempre. */
@media (max-width:63.99rem){
  .s01{display:block;padding-top:var(--barra);padding-bottom:0}
  .hero-arte{position:relative;inset:auto;aspect-ratio:1400/1045;overflow:hidden}
  .hero-arte::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;
    background:linear-gradient(180deg, transparent, var(--campo));pointer-events:none}
  .s01 > .wrap{padding-top:clamp(1rem,2.6svh,1.5rem);
    padding-bottom:clamp(0.875rem,2.4svh,2.25rem)}
}

/* --- o véu: o ÚNICO instrumento de contraste, e AGORA o único, ponto -----
   RECOMPOSE 2026-09-09 (3ª volta). Decisão do usuário, verbatim: «tem um corte
   feito na hero, do lado da foto do Fábio. Eu não pedi isso. Eu pedi que a foto
   gerada pelo Higgsfield preenchesse toda a hero, todo o background».
   O «corte» era a ARESTA: fio de barro + face em degradê, um painel de 66 a
   78vw sobre a arte, com uma BORDA DURA no meio da seção. Ela saiu inteira —
   markup e CSS. Ficou só o véu, que é contínuo por construção: nenhum ponto da
   hero tem uma linha onde a arte comece ou termine. A arte cobre 100% da
   largura e 100% da altura em TODAS as larguras.
   Nota de rota: o julgamento de DCL às cegas da 2ª volta pediu a aresta de
   volta como «ativo ownable de forma». O usuário reprovou a forma duas vezes
   seguidas (lâmina, depois aresta). Lei 3: quem julga o gosto é o usuário no
   render.
   CORREÇÃO de uma frase FALSA que esta mesma sessão escreveu e o julgamento de
   DCL às cegas pegou: eu havia escrito que «o ativo de forma continua no chanfro
   do CTA». Não continua — não existe chanfro nenhum neste contrato. A camada 3
   aqui é «A Inversão de Matéria» e a forma dela é `raio_externo: 3px`; o chanfro
   de 45° é de OUTRA marca. O fato honesto é este: depois desta volta, o hero não
   carrega nenhum ativo ownable de FORMA (a aresta era o único, e o disco saiu com
   o marcador). Ele carrega a identidade pela INVERSÃO TIPOGRÁFICA da camada 2
   (display estreito pergunta, serifa de livro responde), pela paleta e pela
   matéria do botão. É consequência direta de uma decisão do usuário, e fica
   declarada em vez de maquiada. */
/* RECOMPOSE 2026-09-14 · o veu-base do mobile SAIU com o `span.veu` (ordem
   literal do usuario). Nada entrou no lugar. */
/* 4a VOLTA — a faixa de retrato no padding-bottom MORREU. Ela valia 336px num
   360x800 cuja tela util inteira e 739px, e a copy da hero (790 caracteres em
   cinco blocos) ocupa 655px deles. Faixa e regra dos 100svh nao cabem juntas na
   mesma tela: a regra vence, a faixa sai, e o retrato passa a viver ATRAS do
   pe do texto (CTA/micro/quem), nunca atras do titulo. */
/* (os degraus menores do mobile moram depois das regras-base — ordem de
   cascata: mesma especificidade, quem vem depois vence) */
@media (min-width:64rem){
  /* desktop: QUATRO camadas de véu, todas rgba de cor do contrato, todas
     contínuas — nenhuma tem borda.
     1. a RAMPA da esquerda para a direita: é ela que segura a coluna de texto e
        entrega o retrato quase limpo. É a função que a face da aresta roubou na
        2ª volta e que volta para onde sempre devia estar. Os três pontos de
        virada são variáveis (--v1/--v2/--v3) porque a coluna de texto ocupa uma
        FRAÇÃO diferente da tela a cada largura: em 1024 ela vai até 58% da
        janela, em 2560 até 53%. Rampa fixa em % ou sobraria véu no rosto, ou
        faltaria véu sob a última linha. Medidos, não supostos.
     2. o pé, que assenta a composição contra a junta com a 02;
     3. o topo, curto, que separa a barra sticky do campo;
     4. o radial de barro em cima e à direita: a luz de fim de tarde de onde o
        retrato vem — a mesma direção que a direção de arte cobra da imagem. */
  /* RECOMPOSE 2026-09-14 · as quatro camadas de veu do desktop sairam com o
     `span.veu`. As variaveis --v1/--v2/--v3 sairam junto: elas so existiam para
     posicionar as paradas da rampa deste gradiente e nao sao lidas por mais
     ninguem no arquivo (verificado por grep). O comentario longo acima descreve
     um veu que nao existe mais e fica como HISTORIA da composicao, nao como
     descricao do estado atual. */
}

/* --- a grade do hero: UMA coluna, em toda largura ----------------------- */
/* a segunda coluna existia para a placa da oferta. Sem placa ela seria um
   buraco ao lado do texto — e o buraco é justamente onde o retrato entra. */
/* `container-type:inline-size` — a COLUNA passa a ser a regua do H1.
   Lição 100, a metade que esta sessao usa: «a base do tipo e o CONTEINER». O
   teto de tamanho do display deixa de ser um numero adivinhado por largura de
   TELA e passa a ser a propria largura da COLUNA dividida pela coluna minima em
   `em` que cada contagem de linhas exige — medida no binario da Stardos com a
   copy real. Isto e o que faz a contagem de linhas ficar ESTAVEL: se a coluna
   encolhe (gutter, wrap, vw), o tipo encolhe junto na mesma proporcao, e a
   quebra nao muda.
   Por que `cqi` e nao `vw`: `vw` conta a barra de rolagem e a caixa nao — 1% de
   descasamento vira uma linha a mais no H1 (o defeito exato da Lição 100). E o
   `.hero` ja tem a largura certa, com wrap, gutter, margem e teto de vw todos
   resolvidos. */
.hero{display:grid;gap:0;max-width:37rem;container-type:inline-size}
/* Sem a diagonal, a coluna não tem mais nada para desviar: a medida volta a ser
   TIPOGRÁFICA (44rem, dentro da janela de medida do contrato) com um teto em vw
   que a mantém na metade esquerda da tela em toda largura. */
/* QUEBRA DO H1 (2026-09-10) — `min(44rem, 54vw)` VIRA `59%`, um numero so.
   O QUE ESTAVA ERRADO com os dois anteriores:
     44rem = 704px .. teto TIPOGRAFICO, e ele era a causa direta das cinco
       linhas. TRES LINHAS pedem 16,33em de coluna no espanhol (o idioma mais
       largo) com tracking zero — simulado no binario da Stardos com a copy
       verbatim do `h.oferta`, palavra por palavra, com a locucao de destaque na
       Literata Italica que ela de fato usa. A 44px, que e o DEGRAU BAIXO da
       escala do contrato (44 -> 68px), sao 724px. Faltavam 20px.
     54vw ........... teto de ARTE medido contra a TELA — e a coluna nao mora na
       tela, mora no `.wrap`, que e centrado e trava em 82,5rem.
   O TETO VIRA FRACAO DO QUADRO — e este e o conserto que a Licao 100 ja tinha
   escrito («posicao de bloco virou FRACAO»). Consequencia do erro antigo: a
   mesma fracao de TELA dava colunas com borda direita em 55,4% (1920) e 58,2%
   (1024) — e como o titulo em cinco linhas nunca enchia a coluna, ninguem via.
   Com TRES linhas o
   titulo enche a coluna por construcao (o tamanho e resolvido para isso), entao
   a borda da coluna passa a ser a borda do TEXTO, e ela tinha de virar constante.
   `59%` do quadro poe a borda direita da coluna em 57,0% a 58,3% da tela de 1024
   a 2560 — uma faixa de 1,3 ponto contra os 5,1 pontos do `vw`.
   E ONDE COMECA O FABIO, medido no pixel (`_borda_limpa.py`: esconde o texto,
   fotografa a peca e acha a coluna em que a luminancia sai do campo escuro, na
   faixa vertical em que o H1 vive):
     1024 53,7% · 1280 55,4% · 1366 55,0% · 1440 53,9% · 1536 54,9% · 1920 54,6%
   Ou seja: o sujeito comeca por volta de 54,5% em TODA largura — a peca e a
   mesma e o recorte de `cover` a mantem no lugar. A coluna vai a 58%, e por isso
   a ultima linha do H1 encosta na FIMBRIA do sujeito (o facho de luz e o cabelo),
   nunca no rosto, que so comeca depois de 59,5%. Testei 57vw e o render mostrou
   o ponto final de «TEXAS.» dentro do cabelo dele a 1024 e a 1280: descartado.
   O QUE A COLUNA ENTREGA DE TIPO (100cqi / 16,45), por largura:
     1024 33,7px · 1280 42,1px · 1366 43,3px · 1440 43,0px
     1536 43,0px · 1920 57,7px (aqui o quadro abre para 108rem e sobra frente)
   E A RAMPA? Fui mexer nela e descobri que NAO HA rampa: os `--v1/--v2/--v3`
   sao CODIGO MORTO desde a decisao da «variante B» (a linha de `.hero-arte .veu`
   com `!important`, no fim deste arquivo). `!important` vence a media-query
   independentemente da ordem, entao o veu de desktop e, em toda largura,
   0,78 -> 0,72 (40%) -> 0,30 (52%) -> 0 (60%) — e nao a rampa de quatro degraus
   que o bloco acima descreve. Deixo o achado escrito em vez de fingir que
   ajustei uma rampa que ninguem pinta; apagar as variaveis seria mexer em CSS
   que nao e desta volta.
   O que essa descoberta obriga: a borda da coluna a 58% cai onde o veu ja vale
   so 0,07, ou seja, a ultima linha do H1 le contra a PECA CRUA. Medido, nao
   suposto — `_hero_contraste.py`, celula de 16px, 120 medidas nos 10 viewports
   x 3 idiomas: pior celula de TODO o hero 5,47:1 contra o piso de 4,5, e o H1
   nunca aparece na lista dos que ficam abaixo de 6:1. Passa. */
@media (min-width:64rem){
  .hero{max-width:59%}
}
/* o H1 fecha em 4,25rem: a linha é o gesto da seção, mas a seção também
   precisa caber numa tela. Acima de 120rem o teto sobe para 5rem e a coluna
   abre junto (48rem): com 4,25rem congelado de 1024 a 2560 o display virava
   legenda numa tela de 2560 — achado do julgamento de DCL às cegas. A COLUNA
   não abre junto: testei 48rem e a medida do lead foi para ~90 caracteres, longa
   demais para leitura. Cresce o gesto, não a linha de texto. Medido depois de
   mudar: overflow segue 0 em 39 combinações. */
/* 4a VOLTA — o terceiro teto do display: a ALTURA DA TELA.
   Ate aqui o display so olhava a largura, e por isso a mesma hero que cabia num
   1920x1080 estourava 378px num 1280x720: mesma largura de familia, metade da
   altura util. `7.4svh` e o degrau que faz o display encolher quando a tela e
   BAIXA, nao quando e estreita — medido: 76px a 1080, 53px a 720.
   O `max(...rem, ...)` na frente e o piso de zoom: em svh puro, dar 200% de
   zoom ENCOLHE o tipo (a viewport em px de CSS cai pela metade), que e
   exatamente o contrario do que a WCAG 1.4.4 exige. Com o piso em rem o zoom
   volta a aumentar o texto; a hero e que deixa de caber numa tela, e isso a
   1.4.10 permite (o que ela proibe e scroll nos DOIS eixos, e nao ha). */
/* REDESTILACAO 2026-09-10 — O PISO PASSA A SER FISICO, e ele manda.
   Os `max(1.75rem, ...)` de todos estes blocos eram um piso de ZOOM: existiam
   so para o svh nao encolher o tipo quando o usuario da 200%. Com a Stardos eles
   viram DUAS coisas na mesma expressao, e a mais forte e o piso de ESTENCIL:
   `max(32px, 2rem, ...)`. Os 32px em PIXEL sao o piso do corte (abaixo dele o
   vao interno do traco cai sob 1px, o antialiasing o preenche e a fonte deixa de
   ser estencil: vira uma slab suja — `REGRA_DURA_piso_do_estencil`); os 2rem em
   REM sao o piso de zoom, que cresce com a raiz do usuario. Os dois no mesmo
   `max` fazem o que cada um faz melhor, e nenhum dos dois pode ser desviado.
   O TETO caiu de 4,75rem/5,25rem para 4,25rem em TODA largura: a escala do
   display agora e 44->68px por contrato, e 4,25rem SAO os 68px. As duas
   media-queries que subiam o teto acima disso (90rem e 120rem) morreram — o
   gesto de 76px e de 84px que elas entregavam num 1920 e num 2560 nao existe
   mais nesta identidade. A COLUNA de 108rem a 120rem FICA: ela e composicao, nao
   escala, e continua matando o campo morto a esquerda do H1 num 2560. */
/* MEDIDO NESTA VOLTA, e o numero e brutal: a CAIXA ALTA em estencil pediu DUAS
   LINHAS a mais que a caixa mista condensada na mesma coluna. Com os degraus da
   4a volta intactos, a hero estourava a tela em 9 das 30 combinacoes: 1366x768
   (-44px), 1280x720 (-62px), 1024x768 (-80px) e 360x800 em espanhol (-6px).
   O degrau de altura de tela deixa de ser UM e passa a ser DOIS, e o segundo
   existe por causa da LARGURA DA COLUNA, nao da altura:
     · 64-80rem  -> 6,8svh. Aqui a coluna e `54vw` (553px a 1024), e e ELA que
       manda: a 7,4svh o titulo em portugues fechava em SEIS linhas de 57px e
       estourava 80px. Com 6,8svh ele fecha em cinco.
     · >=80rem   -> 7,2svh. Deste ponto para cima a coluna encosta nos 44rem e
       para de crescer, entao a altura volta a ser o unico limite.
   O 8,6svh DAS TELAS BAIXAS E LARGAS MORREU. Ele foi calibrado na 4a volta para
   uma manchete de caixa mista condensada que fechava em TRES linhas, e existia
   para atender o achado do DCL as cegas («o instrumento que encolhe e o errado —
   encolheu-se a VOZ para caber a MASSA»). O achado continua certo como
   principio, e continua atendido onde a conta fecha: de 1280x800 para cima o
   display trabalha no teto de contrato (68px) e nao no degrau de tela. Mas na
   faixa BAIXA ele nao fecha mais em largura nenhuma: a 1280x720 o 8,6svh
   entregava 61,9px de tipo e 62px de estouro. Devolver voz onde ela nao cabe
   nao e voz, e barra de rolagem — e a regra dos 100svh e do usuario, nao do
   arquetipo. RUPTURA DE CONSELHO DECLARADA, com o numero. */
/* QUEBRA DO H1 (2026-09-10) — OS DOIS DEGRAUS DE TELA (6,8svh e 7,2svh) VIRAM
   UM SO, e o regulador passa a ser a COLUNA.
   Por que os dois existiam: a 4a e a 6a volta calibraram o display contra a
   ALTURA da tela porque a contagem de linhas era imprevisivel — a coluna mudava
   com a largura e o tamanho nao sabia disso, entao a mesma regra dava 4 linhas a
   1366 e 5 a 1280. Agora o tamanho LE a coluna: `100cqi / 16,45` e literalmente
   «o maior tipo em que este titulo cabe em TRES linhas nesta coluna», nos tres
   idiomas. A contagem de linhas deixa de ser consequencia e vira a regra.
   DE ONDE VEM 16,45: coluna minima para 3 linhas, tracking zero, medida no
   binario (Stardos caixa alta + a locucao de destaque em Literata Italica):
     pt 15,49em · es 16,33em · en 14,36em -> o teto e o espanhol, +0,7% de folga.
   O `7,2svh` FICA, e agora e so guarda: numa tela de 1440x600 ele segura o
   display em 43,2px. De 720px de altura para cima ele nunca morde — o teto de
   coluna e sempre menor.
   O PISO NAO FOI TOCADO: `max(32px, 2rem, ...)` — 32px e o piso FISICO do corte
   de estencil (`REGRA_DURA_piso_do_estencil`) e 2rem e o piso de zoom da WCAG
   1.4.4. Nem um nem outro e desviavel, e nesta volta nenhum dos dois morde no
   desktop: o menor display de desktop e 35,5px, a 1024. */
@media (min-width:64rem){
  .hero .q{font-size:max(32px,2rem,min(var(--fs-display),4.25rem,
                                       calc(100cqi / 16.45),7.2svh))}
}
@media (min-width:120rem){
  /* e SÓ aqui o quadro do hero abre: em 2560 o wrap de 82,5rem deixava 680px de
     arte escura e sem informação à esquerda do H1 — o polo frio da Lição 200
     (a de «muito frias»; o número vai escrito sem cerquilha de propósito —
     com ela o conformance lê a nota como um hex de 3 dígitos e reprova o
     próprio comentário. Achado desta sessão, não teoria).
     108rem encosta a coluna mais na borda sem colar nela e sem tocar o
     alinhamento das outras seções, que só existem abaixo desta largura. */
  .s01 > .wrap{max-width:108rem}
}
/* RECOMPOSE 2026-09-09: o marcador (disco + fio) SAIU do hero por pedido
   literal — «remova essa linha com o círculo ao lado acima do título». As
   regras que o dimensionavam aqui saíram junto; ele segue nas outras seções. */
.q{color:var(--texto);text-wrap:balance}
/* 4a VOLTA — DESVIO DECLARADO da scale.json, autorizado pelo usuario nesta
   volta: o lead da hero deixa o degrau `subtitulo` (20,5→24px) e passa para o
   degrau `corpo` (16→18px), com o mesmo teto de altura de tela dos outros
   blocos. Motivo medido: o lead e 409-416 caracteres — a maior massa da secao
   (292px de 1090 num 1920x1080) — e nenhum outro corte cabia sem mexer na copy,
   que o usuario congelou. 18px continua DENTRO da janela de corpo do contrato
   (16-19px a 1440); a medida fica em 63 CPL reais com a coluna de 34rem, dentro
   da faixa 45-80. Entrelinha 1,5, acima do PISO DE HALACAO da Literata (1,485).
   Os espacos verticais entre os cinco blocos passam todos a ter um termo svh:
   sao eles que absorvem a diferenca entre um 1080 e um 720 sem quebrar linha. */
/* 6a VOLTA — o lead sai do teto de ALTURA DE TELA e vira um tamanho FIXO.
   Por que o teto em svh podia morrer: ele existia para caber 409-416 caracteres
   de lead numa tela de 720px de altura. A copy v3 tem 219 (pt) — metade. Com
   metade da massa o teto so fazia mal: era ele que punha o lead a 16,9px num
   1280x720 e a 16px no telefone, ou seja, abria e fechava a distancia entre
   lead e micro conforme a tela, que e exatamente a hierarquia escorregando.
   A COR e a outra metade da regra (Refactoring UI: hierarquia por cor e peso,
   nao por tamanho pequeno): o lead fica na TINTA CHEIA da ilha (`--texto`). A
   cor rebaixada (`--texto-mutado`) e so do eyebrow e do micro — nunca do lead. */
.hero .lead{color:var(--texto);max-width:34rem;
  font-size:var(--hero-corpo);line-height:1.5;
  margin-top:clamp(1rem,2.4svh,1.75rem)}
/* RESPIRO — para onde foi o ganho da copy curta (pedido literal do usuario:
   «redistribua o ganho em respiro entre titulo/lead/CTA, nao em vazio no pe»).
   As tres juntas do miolo crescem, e so elas; o pe da secao nao ganha nada,
   porque no telefone o pe e onde o retrato mora e no desktop o flex ja
   centraliza. Medido a 1920x1080: titulo->lead 15,1 -> 25,9px · lead->CTA
   19,4 -> 32,4px. Cada junta guardou o termo svh, que e o que faz a hero
   continuar cabendo em 100svh numa tela de 720. */
.hero .acao{margin-top:clamp(1.25rem,3svh,2.25rem);display:flex;flex-wrap:wrap;align-items:center;gap:var(--item)}
/* o rotulo do botao le o MESMO token do lead: e o segundo dos tres tamanhos. */
.hero .acao .btn{font-size:var(--hero-corpo)}
/* A KEYLINE MUDOU DE PAPEL com «Titanio e brasa», e o motivo esta medido: ela
   existia porque o barro antigo contra o espresso dava 2,24:1 e a fronteira do
   controle precisa de 3:1 (1.4.11). A brasa sobre o campo da ilha da 7,48:1 —
   o proprio preenchimento ja E a fronteira. A keyline fica, agora em
   `--on-acento`, como a spec §5 escreve: e acabamento, nao mais muleta. */
.btn--sobre-escuro{border-color:var(--on-acento)}
/* 6a VOLTA — O PISO DE 14px, e ele vale em QUALQUER tela.
   O que havia antes: `max(0.75rem,min(0.875rem,1.6svh))`. O svh no meio fazia o
   micro e o «quem» descerem a 12,0px num 1280x720, 12,29px num 1366x768 e
   12,0px em TODO telefone — abaixo dos 11pt (~14,7px) que a Apple HIG poe como
   piso e abaixo dos 15px de corpo de Butterick. Nao ha teto de altura aqui
   agora: 14px fixo, do 360 ao 2560.
   A largura do micro sobe de 30rem para 34rem — a MESMA COLUNA do lead, para
   que os dois blocos de texto do miolo sangrem na mesma vertical. Desvio
   DECLARADO do `maxWidthRem: 30` do papel `apoio` da scale.json: a 34rem cada
   linha do micro mede 41 cpl (medido), bem dentro dos 70,3 que o proprio papel
   declara.
   MEDIDO, e nao e o que a direcao supunha: a copy v3 do micro tem 82 caracteres
   em pt e 79 em es, e SO o ingles (72) fecha numa linha nesta coluna. Em pt e
   es sao DUAS linhas em toda largura. Por-lo em uma linha exigiria 620px de
   medida — mais largo que a maior linha do lead (544px), o que faria a nota de
   rodape ser o elemento mais largo da hero. Alinhamento ganha; a contagem de
   linhas vai escrita no Gate A. */
/* `balance` porque a quebra natural deixava «decidir.» sozinho na segunda
   linha — uma viuva de uma palavra debaixo do CTA, que e o pior lugar da secao
   para um resto. Com ela as duas linhas ficam parelhas. Achado do OLHO, no
   render de 1440x900 pt; nenhuma medida numerica o teria pego. */
.hero .micro{margin-top:clamp(0.875rem,1.8svh,1.375rem);color:var(--tinta-mutada);max-width:34rem;
  font-size:var(--fs-apoio);line-height:1.485;text-wrap:balance}
/* --- o EYEBROW (6a volta): quem conduz, ACIMA do titulo -------------------
   Era a assinatura do pe, embaixo do micro, separada por uma regua horizontal.
   Virou kicker. Tres consequencias, e as tres estao nesta regra:
   1. A REGUA SAIU. `border-top` + `padding-top` foram embora. Um kicker nao
      precisa de fio para ser lido como kicker — a posicao (acima do display) e
      o versalete ja o dizem — e aquele era o unico traco horizontal solto da
      secao, num campo cuja identidade e a JUNTA, nao o fio.
   2. `margin-top` virou `margin-bottom`: o bloco agora empurra o H1, nao e
      empurrado por ele. E o unico espaco do miolo que NAO cresceu: o kicker
      tem de ficar preso ao titulo, ou vira um terceiro paragrafo solto.
   3. O tamanho e 14px — o mesmo do micro, o terceiro e ultimo tamanho da hero.
      O versalete vem da classe `t-rotulo` (smcp real da Literata, verificado no
      arquivo da fonte: o GSUB tem smcp e c2sc); o degrau `rotulo` da
      scale.json, porem, e 13px, e 13 nao passa o piso de 14 que o usuario
      fixou. DESVIO DECLARADO: papel `rotulo` no tamanho do papel `apoio`.
   4. A MEDIDA e o ENTRELETRA, que sao a conta da «uma linha so».
      O `max-width:34rem` saiu: o kicker usa a coluna INTEIRA da hero, porque
      ele nao e materia de leitura — e uma etiqueta, e etiqueta que dobra deixa
      de parecer etiqueta. E o entreletra desce de 0,08em para 0,04em. MEDIDO,
      a 14px, o texto em UMA linha: pt 566px e es 568px a 0,08em, contra 529 e
      530 a 0,04em; a coluna da hero mede 553px num 1024 e 592px num 768. Ou
      seja: 0,08em quebrava a etiqueta em duas justamente no 1024, e 0,04em faz
      pt, es e en fecharem numa linha de 768 para cima. O 0,08em do papel
      `rotulo` foi calibrado para etiqueta de categoria de ate 40 caracteres
      (`measureCh: 40` na scale.json); esta tem 66, e entreletra afrouxa com o
      tamanho E com o comprimento.
      ABAIXO DE 768 A ETIQUETA DOBRA, e nao ha CSS que resolva: 66 caracteres
      em 328px de coluna pedem tipo de 8,5px, contra o piso de 14px que o
      usuario fixou. As duas regras dele colidem no telefone e o PISO vence,
      porque e o piso que a Apple HIG sustenta. `text-wrap:balance` para que as
      duas linhas fiquem parelhas em vez de uma cheia e um resto. Os pontos de
      quebra medidos nos 3 idiomas vao escritos no Gate A. */
.hero .quem{margin:0;color:var(--tinta-mutada);
  font-size:var(--fs-apoio);line-height:1.485;letter-spacing:0.04em;text-wrap:balance}
/* A PLACA DA HERO — a numeração «01» e o eyebrow na MESMA linha de base.
   Por que na mesma linha e não uma acima da outra: um número de 38px sozinho
   acima do eyebrow custa 38px + junta ≈ 46px de altura, e a 360x800 em espanhol
   a hero fecha com 65px de sobra depois de virar caixa alta. Compartilhando a
   linha o custo cai para 17px (a linha passa de 21px para 38px) e o desenho
   ganha: número grande + letra miúda na mesma base é uma PLACA, que é o nome do
   sistema («Numeração de obra»). `align-items:baseline` é o que faz a placa: o
   pé do «01» e o pé do versalete no mesmo eixo, como um número gravado à
   esquerda de uma linha de crédito.
   O EYEBROW PASSA A DOBRAR ENTRE 768 E 1100px, e isso é uma regressão medida da
   calibragem da 6ª volta (o entreletra de 0,04em fazia pt/es/en fecharem numa
   linha de 768 para cima). O número come 62px + 14px de junta da mesma linha: a
   533px de etiqueta em pt sobram 477px de coluna a 1024. Aceito, e o motivo é de
   desenho: com o número ao lado, o bloco deixa de ser «etiqueta solta que
   dobrou» e passa a ser um selo de duas linhas ao lado de um algarismo — que é
   como uma placa de obra é de fato composta. Abaixo de 768 ele já dobrava. */
.marca-obra{display:flex;align-items:baseline;gap:.875rem;
  margin:0 0 clamp(0.75rem,1.6svh,1.25rem)}
.marca-obra .quem{flex:1;min-width:0}

@media (max-width:63.99rem){
  /* DEGRAUS MENORES DA scale.json (autorizados pelo usuario nesta volta), com o
     numero que cada um libera medido a 360x800 pt:
       display 44px -> 36px  ......... −86px (de 5 para 4 linhas)
       lead    20,5px -> 16px ........ −86px (de 13 para 11 linhas, corpo=16px,
                                       o piso do contrato; nao desce mais)
       micro/quem 14px -> 12px ....... −48px (degrau `micro` da scale.json)
     A entrelinha do display fica em 1,14 (desvio ja declarado na 3a volta; a
     4a NAO o aprofunda). O lead sobe para 1,485 — o PISO DE HALACAO da
     Literata, que e fisica da fonte e nao pode ser desviado. */
/* 6a VOLTA — o que sobreviveu deste bloco e o que morreu.
   MORREU: os tres font-size do lead, do micro e do «quem». O lead descia a
   16px e micro/quem a 12px; agora o lead le --hero-corpo (17px aqui embaixo) e
   os dois pequenos leem --fs-apoio (14px), que e o piso, e nao ha telefone em
   que isso mude. Com a copy v3 a conta fecha assim mesmo — ver a tabela de
   sobra no Gate A.
   FICOU: o degrau do display (36px) e a entrelinha 1,14, que sao da 4a volta e
   esta volta nao aprofunda; e as juntas, que aqui encolhem um degrau em relacao
   ao desktop porque a tela e mais curta. */
  /* REDESTILACAO 2026-09-10 — o telefone e onde as duas leis do contrato se
     encontram e onde uma delas TEM de ganhar.
     O piso de 32px e DURO: era 26px (1,625rem) de piso e 36px (2,25rem) de teto,
     e os dois estavam abaixo do piso do estencil. Agora o piso e 32px e o teto
     e 44px (2,75rem), que e a BASE da escala do contrato — ou seja, no telefone
     o display trabalha na faixa 32-44px e nao mais 26-36px.
     A ENTRELINHA 1,14 MORREU. Ela era um desvio declarado da 3a volta, feito
     para caber massa; com o display em CAIXA ALTA ela e proibida duas vezes:
     1,14 esta ABAIXO do piso de colisao de 1,166 medido no binario (yMax do «Á»
     menos yMin do «Ç»), e o titulo agora tem «Ó» e «Ç» em caixa alta em
     portugues. O 1,20 do `.t-display` vale em toda largura, e a folga sobre o
     piso e de 0,034em — 1,1px a 32px. Existe, e medida, e e pequena.
     O que paga a conta dos 100svh no lugar da entrelinha e do tamanho: o
     TRACKING. Ver o bloco do tracking logo abaixo. */
  /* QUEBRA DO H1 (2026-09-10) — O CELULAR, e aqui as duas leis do contrato se
     encontram de novo. A ordem do usuario pede «no maximo 4 linhas no celular».
     ELA NAO CABE, e o numero e este: quatro linhas pedem 13,35em de coluna em
     espanhol e 12,19em em portugues; a 390 a coluna util e 358px, o que daria
     26,8px de tipo em es e 29,4px em pt — os dois ABAIXO do piso de 32px do
     corte de estencil, que e regra dura do contrato e foi reafirmado na mesma
     frase da direcao. Nao ha CSS que resolva: 4 linhas no celular so existe
     furando o piso, e o piso nao se fura.
     O QUE CABE sao CINCO — e cinco e uma linha a menos do que o render de hoje
     entrega (6 a 390 pt e 6 a 360 pt). Cinco linhas pedem 9,73em em portugues
     (o pior dos tres aqui; o espanhol pede 9,57em porque quebra melhor), e
     `100cqi / 9,95` da 2,3% de folga sobre isso:
       430 -> 39,7px (col 394,6) · 390 -> 36,0px (col 358) · 360 -> 33,0px (col 328)
     Os tres ficam ACIMA do piso de 32px: 1,0px de folga no pior caso, a 360.
     Abaixo de 360 o piso assume e a sexta linha volta — declarado, nao escondido.
     O TETO de 2,75rem (44px) e a BASE da escala do contrato e continua sendo o
     teto desta faixa. Ele nunca morde num telefone de verdade — o cqi chega
     antes em toda largura de 320 a 430. Quem o usa e o TABLET, que tem bloco
     proprio logo abaixo (46rem a 64rem) e volta ao divisor de tres linhas.
     O TRACKING de 0,01em que morava aqui SAIU: agora e zero em toda largura,
     no `.t-display`. Uma regra, um valor, nenhum degrau escondido. */
  .hero .q{font-size:max(32px,2rem,min(2.75rem,calc(100cqi / 9.95),4.6svh))}
  .hero .lead{line-height:1.485;
    margin-top:clamp(0.875rem,2svh,1.25rem)}
  .hero .acao{margin-top:clamp(1rem,2.4svh,1.5rem)}
  .hero .micro{margin-top:clamp(0.75rem,1.5svh,1rem)}
  .hero .marca-obra{margin-bottom:clamp(0.625rem,1.4svh,1rem)}
}
/* 17px no telefone e no tablet — o mesmo degrau `corpo`, um ponto abaixo do
   desktop. Butterick poe o corpo web entre 15 e 25px; 17 esta no meio da faixa
   e mantem a distancia de tres pontos para os 14 do apoio, que e o que faz a
   hierarquia ser vista sem ser lida. */
@media (max-width:63.99rem){ .s01{--hero-corpo:1.0625rem} }
/* QUEBRA DO H1 (2026-09-10) — O TABLET ENTRA NA REGRA DE TRES LINHAS.
   Ele estava entre duas cadeiras: usava o divisor de CINCO linhas do telefone
   (que no tablet nao morde — o teto de 44px chega antes) e a coluna de 37rem do
   celular (592px), o que dava QUATRO linhas a 768. E as quatro linhas do tablet
   sao as piores da pagina: a locucao de destaque termina no MEIO da terceira
   («…dirección de verdad: TIERRA») e a quarta abre com um «Y» orfao. Vi no
   render, nao na tabela.
   Duas mudancas, e as duas sao a mesma decisao:
     · a coluna passa de 37rem para `min(46rem, 100%)` — no tablet a arte e o
       recorte MOBILE, ancorado no PE (`object-position:50% 100%`), entao nao ha
       lado limpo para proteger e a coluna pode ocupar o quadro. O teto de 46rem
       existe para o topo da faixa (1023px), onde 100% jogaria a ultima linha a
       96% da tela;
     · o divisor vira 16,45 (tres linhas) em vez de 9,95 (cinco).
   Resultado medido a 768x1024: 42,8px em tres linhas contra 44px em quatro — 1,2px
   de tipo trocados por uma linha inteira e por uma quebra que nao parte a voz.
   O H1 encolhe 57,1px de altura (4 x 44 x 1,20 = 211,2 contra 3 x 42,8 x 1,20 =
   154,1) e o PE DO TEXTO sobe os mesmos 57px. E esse o ganho que se ve: antes o
   botao caia em cima da testa do Fabio; agora o bloco inteiro termina acima da
   cabeca dele. A folga da barra continua 38,6px — nesta faixa a secao e
   `align-items:flex-start`, entao ela vem do padding e nao do conteudo; e a
   secao continua fechando em 100svh com sobra 0,0, como nas outras 29.
   O bloco de tela BAIXA (max-height:44rem) vem depois deste
   e continua vencendo num tablet curto — la o divisor de cinco linhas volta,
   porque altura manda. */
@media (min-width:46rem) and (max-width:63.99rem){
  .hero{max-width:min(46rem,100%)}
  .hero .q{font-size:max(32px,2rem,min(2.75rem,calc(100cqi / 16.45),4.6svh))}
}
/* O TABLET (46-64rem) sobe UM degrau, e so um. A tentacao era subir mais: a
   768x1024 sobra tela depois da ultima linha e o display de telefone parece
   pequeno para o quadro. MEDIDO o que custava: com display de 44px e lead de
   18px o texto acaba a 349px do pe, e a faixa do retrato da peca mede 635px ali
   — ou seja, o texto passava a cobrir 286px do retrato, que e a testa e os
   OLHOS. Com o degrau menor o texto acaba a 504px do pe e cobre 131px, que e o
   alto do cabelo. Entre um H1 maior e o rosto do Fabio, o rosto ganha: o eixo-
   mestre do contrato e «pessoal, nao personalista», e o que torna esta hero
   pessoal e a cara dele. O que sobe aqui e so o corpo pequeno, que nao muda a
   altura do bloco de forma perceptivel. */
/* 6a VOLTA — este bloco FICOU VAZIO e por isso saiu. Ele existia para devolver
   ao micro e ao «quem» os 14px que o telefone lhes tirava; agora os 14px sao a
   regra em toda largura e nao ha nada para devolver. O achado que o motivava (a
   758x1024 o tipo maior cobria os olhos do Fabio) continua valendo e continua
   atendido pelo degrau do display, que nao mudou. */
/* O TELEFONE ESTREITO (360px e abaixo) — e o unico ponto do site em que a
   ordem do despacho «prefira menos tracking a fonte menor» tem de ser exercida
   ate o fim. Medido: com o degrau de 4,6svh e tracking de 0,01em, o 360x800 em
   ESPANHOL — sempre o idioma mais alto, e aqui com SETE linhas de lead contra
   seis do portugues — estourava a tela em 5,7px. Era a ultima das 30
   combinacoes a nao fechar.
   Duas alavancas, nesta ordem: primeiro o TRACKING vai a ZERO (o estencil ja
   tem vao proprio entre os cortes; a 32-36px o zero nao cola nada, e verificado
   no render), depois o degrau de tela desce de 4,6svh para 4,3svh — 36,8 para
   34,4px, que continua 2,4px ACIMA do piso de 32px do corte de estencil. O
   piso nao foi tocado em largura nenhuma, e nao poderia ser: e fisica da fonte.
   `23.5rem` = 376px: pega o 360 e nao pega o 390, que fecha com 34px de folga e
   nao precisa de nada. */
/* QUEBRA DO H1 (2026-09-10) — ESTE BLOCO MORREU, e morreu ABSORVIDO.
   Ele fazia duas coisas no 360: punha o tracking em zero e descia o degrau de
   tela de 4,6svh para 4,3svh (36,8 -> 34,4px). As duas continuam acontecendo,
   so que por regra e nao por excecao: o tracking e zero em toda largura no
   `.t-display`, e o teto de coluna (`100cqi / 9,95`) entrega 33,0px a 360 —
   1,4px ABAIXO do que o 4,3svh entregava, e com a contagem de linhas garantida
   em vez de torcida. Uma media-query a menos e um numero magico a menos. */
/* O TELEFONE BAIXO (iPhone SE, Android 640) — 44rem = 704px de altura de tela.
   Medido: sem este degrau o espanhol estourava 17px num 360x640, e o espanhol
   e sempre o idioma mais alto (a copy dele e 2% mais longa e o «quem» ganha uma
   linha). Aqui so encolhem as JUNTAS e o display; o lead nao desce de 15px, que
   ja e o piso de zoom, e a copy segue intacta. */
@media (max-width:63.99rem) and (max-height:44rem){
  /* 2026-09-15: o padding-top/bottom de `.s01` que morava aqui SAIU — desde
     que a peca virou bloco normal (acima), quem regula o respiro do texto e
     `.s01 > .wrap`, nao mais a secao inteira; repor os dois padding aqui
     empurraria a peca para baixo da barra de novo, mesmo defeito que a volta
     de hoje corrigiu. */
  /* o teto de COLUNA entra aqui tambem, ou este bloco desfaria a quebra: sem o
     `100cqi` o display voltaria a ser regulado so pela altura e a quinta linha
     viraria sexta num 360x640. O 4,3svh continua sendo o degrau desta faixa. */
  .hero .q{font-size:max(32px,2rem,min(2.75rem,calc(100cqi / 9.95),4.3svh))}
  .hero .acao{margin-top:clamp(0.75rem,1.8svh,1.125rem)}
  .hero .micro{margin-top:clamp(0.5rem,1.2svh,0.75rem)}
  .hero .marca-obra{margin-bottom:clamp(0.5rem,1.2svh,0.75rem)}
}

/* =========================== 02 — as portas =========================== */
/* padding-bottom curto: a faixa de portas FECHA a seção — o --sy inteiro embaixo
   deixava 114px de campo morto (v1: vazio 13,5% contra teto 13). */
/* spec §5: campo `--cal-7`; tinta normal `--texto`; secundaria `--texto-mutado`;
   fios funcionais `--estrutura`. Os DOIS tokens locais de Cal e Barro que
   moravam aqui (`--tinta-mutada` e `--junta`, os dois no marrom profundo) SAIRAM
   — a secao herda os papeis da raiz e vira com o tema sozinha. */
.s02{background:var(--cal-7);
  /* fibra: a TINTA DO TEMA a 3%, o valor da spec §5 para 02/03. */
  --fibra:var(--tinta-30);--fibra-0:var(--tinta-00);
  padding-block:clamp(3rem,2rem + 4vw,5rem) var(--bloco)}
.s02 .marcador .fio{background:var(--estrutura);opacity:.35}
.cabeca{display:grid;gap:var(--item);align-items:end;margin-bottom:var(--bloco)}
@media (min-width:64rem){.cabeca{grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);gap:clamp(2rem,4vw,4rem)}}
.cabeca .lead{color:var(--texto)}
/* RECOMPOSE 2026-09-09 (4a volta) — decisao do usuario: a faixa deixou de sangrar
   os 100vw e voltou para a margem do site. Ela vive DENTRO do .wrap, como todas as
   outras sete secoes: mesma coluna, mesmo gutter, mesma borda esquerda da manchete.
   A faixa deixou de ser estrato de tela e virou CHAPA contida — por isso a regua
   fecha nos quatro lados (era `border-block`), senao as bordas laterais das portas
   encostariam no campo sem fio nenhum e a chapa leria como acidente. Mesmo --fio,
   mesma --estrutura: a junta interna e a moldura sao o mesmo tracado. */
.portas-faixa{position:relative;z-index:2}
.portas{display:grid;grid-template-columns:1fr;
  border:var(--fio) solid var(--estrutura);background:var(--estrutura);gap:var(--fio)}
@media (min-width:46rem){.portas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.portas{grid-template-columns:repeat(4,1fr)}}
.porta{display:flex;flex-direction:column;gap:.875rem;text-decoration:none;
  background:var(--superficie);color:var(--texto);
  padding:clamp(1.25rem,1rem + 1.1vw,1.75rem);min-height:52px;
  transition:background-color .16s ease-out,color .16s ease-out}
@media (min-width:46rem){.porta{min-height:22.5rem}}
.porta-topo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:1.5rem}
.porta-estado{color:var(--acento);font-size:var(--fs-rotulo);letter-spacing:0.08em;
  font-feature-settings:"smcp" 1;text-transform:lowercase;display:none}
/* o nome da porta e o papel `titulo` — troca de familia junto com ele. */
.porta-nome{font-family:"Literata","Literata Fallback",Georgia,serif;
  font-weight:700;font-variation-settings:"opsz" 36,"wght" 700;
  font-size:var(--fs-titulo);line-height:1.26;letter-spacing:-0.004em}
.porta-txt{font-size:var(--fs-corpo);line-height:1.6;flex:1}
.porta-acao{margin-top:auto;display:flex;align-items:center;gap:.5rem;min-height:52px;
  padding-top:.75rem;border-top:var(--fio) solid var(--borda);color:var(--acento);
  font-size:var(--fs-apoio);letter-spacing:0.01em}
.porta-acao::after{content:"";width:.5rem;height:.5rem;border-right:1.5px solid currentColor;
  border-top:1.5px solid currentColor;transform:rotate(45deg);flex:none}
/* a INVERSÃO DE MATÉRIA — no máximo UMA porta em brasa maciça por vez.
   TODO o conteudo da porta preenchida vira `--on-acento`: rotulo de acao,
   estado e disco. A logica REAL de navegacao/selecao do site nao muda; a
   terceira porta selecionada da folha de estudo era demonstracao. */
.porta:hover,.porta:focus-visible,.porta.is-escolhida{background:var(--acento);color:var(--on-acento)}
.porta:hover .porta-acao,.porta:focus-visible .porta-acao,.porta.is-escolhida .porta-acao{
  color:var(--on-acento);border-top-color:var(--barro-press)}
.porta:hover .disco,.porta:focus-visible .disco,.porta.is-escolhida .disco{
  background:var(--on-acento);box-shadow:none}
.porta.is-escolhida .porta-estado{display:inline;color:var(--on-acento)}
/* a nota é LEGENDA da faixa: colada na régua inferior da chapa e alinhada à
   borda esquerda dela — não um parágrafo solto lá embaixo. Sem a classe `wrap`
   (a faixa já está no wrap; a classe daria gutter duplo e desalinharia a nota
   da manchete em toda largura). */
.portas-nota{padding-top:.875rem}
.s02 .micro{margin-top:0;color:var(--texto-mutado)}

/* =========================== 03 — o medo =========================== */
/* O CAMPO DA 03 E `--s03-campo`, NAO `--estrutura` — a armadilha que o contrato
   nomeia. `--estrutura` e fio e marcador; o campo tem token proprio, um degrau
   fora do campo geral, e e ele que da o degrau de materia entre a 02 e a 04.
   OS SEIS TOKENS LOCAIS DE CAL E BARRO SAIRAM (`--tinta`, `--tinta-mutada`,
   `--cheio`, `--anel`, `--junta`, `--destaque`): eles existiam para INVERTER a
   polaridade numa paleta de coluna unica, em que campo escuro tinha de pedir
   tinta clara a mao. Com duas colunas a polaridade vem do tema, e a 03 herda a
   raiz — que e exatamente o que faz a secao funcionar nos dois. */
.s03{background:var(--s03-campo);color:var(--texto);
  /* NAO ha destaque no titulo da 03 — ele e uma CITACAO entre guilhemes, e
     italico dentro de fala citada le como enfase de quem cita, nao de quem
     fala. Por isso o token local morreu junto com os outros cinco: nao havia
     uso, e o que herda da raiz ja e o certo. */
  /* FIBRA QUE ACOMPANHA A DIAGONAL (decisao do usuario, 2026-09-11). A 03 e a
     unica secao com plano proprio: a `.folha--veu`, a segunda folha da camada 4,
     cortada pela aresta diagonal (o ativo ownable). Se a fibra corresse no
     angulo-padrao ela leria como adesivo por cima da folha; correndo NA DIRECAO
     da aresta, ela e o plano.
     O ANGULO E MEDIDO, nao chutado (`_diag03.py`): a aresta vai de (21% da
     largura da folha, 0) a (0, 100%). A 1440 isso da 187,46deg, e as LINHAS da
     fibra sao paralelas a ela quando a rampa corre a 97,5deg. De 1024 a 2560 o
     angulo da aresta varia com a altura da secao (185,61 a 192,71deg), entao o
     paralelismo e EXATO a 1440 e diverge no maximo 5,21deg nas pontas.
     A OPACIDADE VARIA JUNTO: a mascara (so ela, abaixo) corre no MESMO 97,5deg
     e enfraquece a fibra da base onde a segunda folha entra — porque ali a base
     esta DEBAIXO de outra folha. A mascara so vale de 64rem para cima, onde a
     folha existe; abaixo disso ela some (`.folha{display:none}`) e a fibra volta
     a ser uniforme, como num campo de folha unica.
     A OPACIDADE E 0,030, o PISO da faixa que o usuario deu para campo escuro
     (3-4%), e nao 0,034: medido, 0,034 dava dL* 3,02 contra os 2,00 do resto
     da pagina — a oliva e escura (Y 0,050) e ali o L* e ingreme, entao a mesma
     porcentagem pesa mais que sobre o barro. Com 0,030 a base fica em 2,7 na
     esquerda e ~1,2 embaixo da folha, media 2,0: o mesmo tato das outras.
     O PASSO FICA EM 7px, como nas outras seis — o que distingue a segunda
     folha e o ANGULO (93 contra 97,5), nao o passo. */
  --fibra:var(--tinta-30);--fibra-0:var(--tinta-00);
  --fibra-ang:97.5deg}
@media (min-width:64rem){
  /* a MASCARA nao pinta: `mask-image` consome so o canal alfa, e por isso ela
     e a UNICA rampa deste arquivo que nao precisa virar com o tema. Fica numa
     tinta so do fecho nos dois temas — trocar a cor aqui nao mudaria um pixel. */
  .s03{--fibra-mascara:linear-gradient(97.5deg,
    rgba(22,23,24,1) 0%, rgba(22,23,24,1) 38%,
    rgba(22,23,24,0.45) 62%, rgba(22,23,24,0.35) 100%)}}
.s03 .marcador .fio{background:var(--mutado-45)}
/* A 03 e a unica secao cujo titulo trabalha no TAMANHO do display (44-68px) em
   vez do da manchete: ela e o pico emocional da pagina e o titulo e o medo em
   pessoa, entre guilhemes. O que mudou na redestilacao: a FAMILIA. Era a sans
   condensada de display; agora e Literata 700 / opsz 36, como todos os outros
   titulos de secao — o estencil vive so na hero e nos numeros. O tamanho fica,
   porque tamanho e decisao de escala e a escala nao mudou de dono. */
/* RECOMPOSE 2026-09-14 (modo 5). Decisao do usuario, verbatim: «I want this
   section to be more objective and clear for who is seeing it. Its too much
   text. Create a prettier ui and organize it better to be more clear and easy
   to read. I want a nice design.»
   O QUE SAIU: (a) a pilha vertical — titulo de largura inteira, depois duas
   colunas de prosa, depois tres FAIXAS horizontais de nome-a-esquerda e
   paragrafo-a-direita. Cada faixa era uma linha de 1320px de largura com um
   paragrafo de 40+ palavras: a medida de leitura estourava e a seccao virava
   uma escada de texto que so se le de cima a baixo, nunca se ESCANEIA.
   (b) as duas colunas irmas de prosa (lead e corpo com o mesmo peso e a mesma
   tinta), que criavam DOIS centros no alto da seccao.
   O QUE ENTRA: duas massas so.
   1. O CABECALHO EM CONTRAPESO (`.medo-topo`) — o medo entre guilhemes a
      esquerda, no tamanho de display, com a linha de base ALINHADA AO PE do
      bloco de prosa da direita (`align-items:end`). O titulo deixa de ser uma
      faixa e passa a ser uma massa: o olho entra nele, cai na direita e ja
      chegou ao fim do argumento. O lead perde a irmandade com o corpo — ele
      fica na tinta cheia e o corpo desce para `--texto-mutado`, que e a mesma
      hierarquia de tinta que a 02 usa na nota da faixa. Um centro, nao dois.
   2. A REGUA DE TRES (`.linhas`) — as tres unidades deitadas LADO A LADO,
      cada uma com a medida curta que um titulo de quatro palavras e um
      paragrafo de vinte pede.
   DCL, declarado: isto E a «grade de 3 cards iguais» do catalogo, e a
   identidade a reescreve por dentro pelo unico meio que ela tem, que e a
   MATERIA: nao ha caixa, nao ha chapa, nao ha sombra, nao ha raio. As tres
   colunas sao o MESMO campo da seccao, e o que as separa e a JUNTA — um fio de
   `--mutado-45` que corre de cima a baixo, o mesmo fio do marcador. Le como
   uma folha unica riscada a regua (o livro-razao da 04), nao como tres cartoes
   pousados. E a terceira coluna — a lacuna declarada — recebe EXATAMENTE o
   mesmo tratamento das duas primeiras: mesma largura, mesma tinta, mesmo peso
   de titulo, mesmo respiro. So o disco muda (vazado contra cheio), que e a
   marca de resposta da camada 5 e ja distinguia as tres antes desta volta.
   A 03 e a unica secao cujo titulo trabalha no TAMANHO do display (44-68px) em
   vez do da manchete: ela e o pico emocional da pagina e o titulo e o medo em
   pessoa, entre guilhemes. A FAMILIA e Literata 700 / opsz 36, como todos os
   outros titulos de secao — o estencil vive so na hero e nos numeros.
   A MEDIDA caiu de 19ch para 15ch porque o titulo agora divide a linha com a
   prosa: em 19ch ele invadia a coluna da direita a 1024. */
/* O TETO EM `vw` E UM FREIO DE ZOOM, nao a escala: a escala continua sendo a
   rampa em `rem` do contrato, e o `min()` so a alcanca quando a largura util
   cai abaixo de ~340px — que na pratica e uma coisa so, o zoom de 200% num
   telefone (390px de tela viram 195px de viewport util). MEDIDO antes de
   escrever: a 200% em 390, a palavra mais longa do titulo transbordava 60px em
   pt/es e o `overflow:hidden` da seccao CORTAVA o glifo — e isso ja acontecia
   antes desta volta. Com o teto, a palavra cabe e nada e cortado. Acima de
   340px de viewport o termo em `vw` NUNCA vence, entao nenhum pixel muda nas
   larguras do gate: e freio, nao motor. */
.medo-q{color:var(--texto);max-width:15ch;text-wrap:balance;
  font-size:min(var(--fs-display),13vw);margin:0;min-width:0}
.medo-topo{display:grid;gap:var(--bloco)}
.medo-topo > *{min-width:0}
@media (min-width:64rem){.medo-topo{
  grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:end}}
.medo-duo{display:grid;gap:var(--item)}
.medo-duo .lead{color:var(--texto);max-width:38ch}
/* o corpo desce um degrau de tinta — e o rodape do argumento, nao um segundo
   lead. `--texto-mutado` sobre `--s03-campo` da 6,5:1 no claro e 6,7:1 no
   escuro, medido no pixel; folga larga sobre o piso de corpo. */
.medo-duo .corpo{color:var(--texto-mutado);max-width:46ch}
.linhas{margin-top:var(--bloco);border-top:var(--fio) solid var(--mutado-45)}
.linha{display:grid;gap:.5rem;padding-block:var(--item);
  border-bottom:var(--fio) solid var(--mutado-45)}
@media (min-width:64rem){
  /* SUBGRADE, e ela e o que faz a regua parecer regua: sem ela, a coluna cujo
     titulo cabe em UMA linha comeca o paragrafo mais acima que as de duas
     linhas, e as tres tintas de corpo deixam de dividir a mesma pauta. Com
     `grid-template-rows:subgrid` as tres colunas herdam as MESMAS duas faixas
     (titulo, corpo) do pai, e o corpo das tres arranca na mesma altura em
     qualquer idioma — que e onde a copy mais varia. Onde a subgrade nao
     existir, a regra e ignorada e a coluna volta ao empilhamento simples: a
     leitura nao quebra, so perde o alinhamento. */
  .linhas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto auto;row-gap:.875rem;
    border-bottom:var(--fio) solid var(--mutado-45)}
  .linha{gap:.875rem;border-bottom:0;
    grid-row:span 2;grid-template-rows:subgrid;
    padding-block:clamp(1.75rem,2.6vw,2.75rem);
    padding-inline:clamp(1.25rem,2.6vw,2.5rem)}
  .linha:first-child{padding-inline-start:0}
  .linha:last-child{padding-inline-end:0}
  .linha + .linha{border-left:var(--fio) solid var(--mutado-45)}}
/* o disco sobe para a propria linha, acima do nome: vira o carimbo da coluna
   em vez de um marcador espremido no flanco de um titulo de duas linhas. */
/* `overflow-wrap:anywhere`, e nao `break-word`: os dois quebram a palavra que
   nao cabe, mas so o `anywhere` entra na conta de LARGURA MINIMA do elemento —
   e aqui o titulo e um item de grade com `justify-items:start`, cuja largura
   vem justamente dessa conta. Medido: com `break-word` a coluna continuava
   estourando. A 200% de zoom numa tela de 360px, «estadounidense» (o rotulo 2
   em espanhol) empurrava a coluna 15px para fora e era cortada pelo
   `overflow:hidden` da seccao; com `anywhere`, zero. Em largura normal nada
   quebra: a regra so age quando UMA palavra nao cabe sozinha na linha. */
.linha-nome{display:grid;gap:.5rem;justify-items:start;align-content:start;
  color:var(--texto);text-wrap:balance;overflow-wrap:anywhere;margin:0}
.linha-nome .disco{margin-top:0}
.linha-txt{color:var(--texto);max-width:42ch}

/* =========================== 04 — quem conduz ===========================
   RECOMPOSE 2026-09-09 (modo 5). Decisão do usuário, verbatim: «Esta sessão deve
   ter uma foto do Fábio também, uma arte trabalhada … mudasse a estrutura de
   design desta seção atual para que se encaixasse com a direção de assets».
   O que saiu: os DOIS cartões de cal (`.painel cita` e `.painel fatos`). Eles
   davam à seção uma única matéria e nenhum lugar para um retrato — pôr foto ali
   seria «depoimento em card com avatar», o lugar-comum literal do catálogo.
   O que entra: três massas de matérias diferentes — a CHAPA-RETRATO (barro
   escuro, o slot), a LAJE DA CITAÇÃO (barro maciço, a inversão de matéria) e o
   LIVRO-RAZÃO (campo nu, só fios). A hierarquia passa a ser de MATÉRIA, que é
   literalmente a estratégia declarada na camada 1.
   `padding-bottom:0` é o coração da composição: a base da chapa É a borda de
   baixo da seção, então o retrato sai CORTADO pela borda — o ativo ownable da
   camada 5. O respiro do pé volta como padding do próprio livro-razão, para a
   coluna de texto não encostar na junta entre as seções. */
.s04{background:var(--campo);padding-bottom:0;
  /* fibra: espresso sobre campo (claro). A chapa-retrato tem fibra PROPRIA a
     96deg, dentro dela — e outra materia (barro escuro), nao o campo. */
  --fibra:var(--tinta-26);--fibra-0:var(--tinta-00)}
.conduz{display:grid;gap:var(--bloco);margin-top:var(--bloco);align-items:stretch}
/* a coluna da arte abre um pouco entre 1024 e 1280: ali a seção é curta e a
   coluna de texto é alta, e com 0,66fr a chapa ia a 0,42 de proporção — recorte
   demais para qualquer peça vertical que a Etapa 4 gere. Medido, não suposto. */
@media (min-width:64rem){.conduz{grid-template-columns:minmax(0,1fr) minmax(0,0.78fr);
  gap:clamp(2rem,4vw,4rem)}}
@media (min-width:80rem){.conduz{grid-template-columns:minmax(0,1fr) minmax(0,0.66fr)}}
/* a laje e o livro-razão são UMA peça de duas matérias, sem junta de campo entre
   elas: em cima o barro maciço (o que ele DIZ), embaixo a cal (o que se pode
   CONFERIR). É a inversão de matéria da camada 3 lida de cima para baixo. */
.conduz-dito{display:flex;flex-direction:column;gap:0}
/* o respiro do pé só existe quando as colunas correm LADO A LADO: aí a coluna de
   texto precisa de fundo antes da junta com a 05. Empilhado, quem fecha a seção
   é a chapa, e o padding só abriria um buraco entre o livro-razão e ela. */
@media (min-width:64rem){.conduz-dito{padding-bottom:var(--sy)}}

/* --- a laje da citação: camada 3 «A Inversão de Matéria» -----------------
   repouso é superfície com contorno; ESCOLHIDO é o container inteiro em barro
   maciço com rótulo de cal. A fala do próprio Fabio é o que a seção escolhe.
   Par cal/barro = 5,93:1, o mesmo número que a camada 3 mediu. */
.laje-cita{background:var(--acento);color:var(--on-acento);
  border:var(--fio) solid var(--acento);border-radius:var(--raio) var(--raio) 0 0;
  padding:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);
  display:flex;flex-direction:column;gap:var(--item);
  --cheio:var(--on-acento);--anel:var(--on-acento)}
.laje-cita blockquote{margin:0;color:var(--on-acento);text-wrap:pretty}
.laje-cita .assina{display:flex;align-items:center;gap:.75rem;padding-top:var(--txt);
  border-top:var(--fio) solid var(--sobre-acento-32)}
/* a assinatura da laje mede 16-18px: em Stardos o corte cairia a 0,52px e a
   familia e PROIBIDA abaixo de 32px. Vai para Literata 700 / opsz 12 — a mesma
   instancia da `.enfase`, que e o papel de enfase dentro de texto. */
.laje-cita .assina .nome{font-family:"Literata","Literata Fallback",Georgia,serif;
  font-weight:700;font-variation-settings:"opsz" 12,"wght" 700;font-size:var(--fs-corpo);
  letter-spacing:0;color:var(--on-acento)}

/* --- o livro-razão: sem cartão, só fio. O par cheio/vazado volta a ler como
   SINAL (camada 5) porque não há mais moldura competindo com ele. --------- */
.fatos{background:var(--superficie);border:var(--fio) solid var(--borda);border-top:0;
  border-radius:0 0 var(--raio) var(--raio);
  padding:0 clamp(1.25rem,0.9rem + 1.2vw,2rem)}
.fatos li{display:flex;align-items:flex-start;gap:.875rem;min-height:48px;
  padding:clamp(.875rem,.7rem + .5vw,1.15rem) 0;
  border-bottom:var(--fio) solid var(--borda)}
.fatos li:last-child{border-bottom:0}
.fatos li .disco{margin-top:.5em}

/* --- a chapa-retrato: o slot 04-retrato-fabio, VAZIO no Gate A (Lei 1) ----
   Geometria: a base é a borda inferior da seção (corte da camada 5) e o topo é
   a aresta diagonal da folha (ativo ownable da camada 4), subindo da esquerda
   para a direita — o lado alto é onde o retrato mora, o lado baixo é onde a
   peça só tem terra e névoa. O fio de barro de 3px corre por cima da diagonal:
   é a mesma aresta do hero, mas aqui ela corta a MOLDURA da arte, nunca a
   coluna de leitura.
   Sem asset a chapa é campo de barro escuro com a fibra de papel em CSS puro —
   matéria, não lavagem de gradiente. Nenhum fato mora aqui: a camada inteira é
   aria-hidden e o Lei-1 passa por construção, porque NENHUM texto a atravessa. */
/* empilhado a chapa tem PROPORÇÃO (4:5, retrato) — uma peça vertical cortada em
   paisagem perderia o homem. Lado a lado ela ESTICA com a linha da grade, e a
   proporção sai de cena: quem manda na altura é a coluna de texto. */
.conduz-arte{position:relative;aspect-ratio:4/5;--corte:15%;width:100%}
@media (min-width:64rem){.conduz-arte{aspect-ratio:auto;
  min-height:clamp(26rem,18rem + 20vw,38rem);--corte:11%}}
.conduz-arte .chapa-fio,.conduz-arte .chapa{position:absolute;inset:0;display:block;
  clip-path:polygon(0 var(--corte),100% 0,100% 100%,0 100%)}
/* A CHAPA VAZIA — o slot `04-retrato-fabio` sem peca. O campo dela era o marrom
   profundo de Cal e Barro; migrado POR PAPEL, nao por nome: o papel e «campo um
   degrau fora do campo geral, atras de uma fotografia», e o unico token da
   paleta nova que e isso NOS DOIS TEMAS e `--s03-campo` (#D9DDDF no claro,
   #393E41 no escuro). `--barro-escuro`, apesar do nome, virou tinta secundaria e
   e CLARO no tema escuro — uma chapa de retrato nele seria um bloco de luz. */
.conduz-arte .chapa-fio{background:var(--acento)}
.conduz-arte .chapa{top:3px;background:var(--s03-campo);overflow:hidden}
.conduz-arte .chapa::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(168deg, var(--luz-50) 0%, var(--luz-00) 34%,
                    var(--sombra-340) 100%),
    linear-gradient(101deg, var(--luz-00) 30%, var(--luz-22) 47%,
                    var(--sombra-45) 56%, var(--sombra-00) 74%),
    repeating-linear-gradient(96deg, var(--luz-22) 0 1px,
                    var(--luz-00) 1px 5px)}
/* quando a peça da Etapa 4 entrar, a fibra sai: o usuário já decidiu, no hero,
   que a arte gerada fica com 100% de opacidade e sem véu por cima. */
.conduz-arte .chapa:has(picture)::after{display:none}
.conduz-arte .chapa img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 0%}

/* =========================== 05 — o projeto ===========================
   RECOMPOSE 2026-09-10 (modo 5). Decisao do usuario, verbatim: «This diagonal
   line effect on background its not good because the card on the right is not
   fully inserted on this red background … re-make this whole design … more
   pretty and visually cleaner … remove the line with a circle in the left.»
   O DEFEITO, nomeado: a folha da camada 4 pintava a METADE DIREITA da secao com
   o campo claro e deixava a esquerda em cal profunda, com um risco de barro de
   3px cortando a composicao na diagonal. A ficha, que era um painel de cal
   flutuando, caia EM CIMA dessa fronteira — meio no rosa, meio fora. Era isso, e
   nao o campo, que estava errado: caixa clara flutuando sobre uma fronteira
   diagonal nao encaixa em lugar nenhum.
   A COMPOSICAO NOVA, «A PLACA»: nada flutua. Uma peca EDGE-ANCHORED de duas
   materias empilhadas atravessa a secao de ponta a ponta da TELA — faixa de
   materia (o slot novo, vazio no Gate A) por cima, laje macica de estrutura com
   o livro da ficha por baixo. Uma peca que toca as DUAS bordas nao pode cair
   meio dentro e meio fora: ela nao tem lado de fora.
   O CAMPO NAO MUDOU: continua --cal-6, como o bg-rhythm exige em prosa («A 05 e
   E4CDC5 e ponto»), porque as vizinhas 04 e 06 sao as duas --campo e os dois
   degraus de 20,35 sao os mais fragil da pagina. A placa se encaixa no rosa.
   ANCORAGEM: edge-anchored (a placa usa a borda do quadro como borda da tela);
   as duas colunas de leitura ficam frame-contained no .wrap. */
/* spec §5 sobre a 05: «hoje possui [o marrom profundo de Cal e Barro] e fibra
   espresso locais; migrar» — o hex sai ate do comentario, porque cor morta
   escrita e cor que a conformance le como viva. Os dois
   tokens locais no marrom profundo sairam — a secao herda `--texto-mutado` e
   `--borda` da raiz — e a fibra passa a ser a TINTA DO TEMA. A geometria da
   fibra nao muda um digito: 0,026 · 93deg · passo 7px, os mesmos de 2026-09-10. */
.s05{background:var(--cal-6);
  --fibra:var(--tinta-26);--fibra-0:var(--tinta-00)}
/* 2026-09-11 · decisao do usuario pelo remoto: a soleira saiu; o padding-bottom:0 que
   a encostava no pe da secao sai junto, e a 05 volta ao padding-block padrao de .s —
   o mesmo respiro em cima (acima de «Montgomery, Texas…») e embaixo. */
/* camada 4 «O papel do processo» sem um byte de raster e sem diagonal: fibra
   direcional finissima no campo inteiro. E o que tira a secao do chapado sem
   pedir imagem — a recusa nº1 deste projeto foi frieza, e campo liso e frio.
   2026-09-11: a declaracao mudou de lugar (a regra unica da camada 4, la em
   cima) e os valores NAO mudaram — espresso 0,026 · 93deg · passo 7px. */
.s05 > *{position:relative;z-index:2}
/* RECOMPOSE 2026-09-14 · ORDEM DO USUARIO, verbatim: «remove the section 05
   textures». O slot `05-campo-luz` (`.campo-arte`) SAIU: markup, regras de CSS e
   binarios. Com ele saiu tambem `.s05:has(.campo-arte picture)::before{display:none}`,
   a regra que APAGAVA a fibra quando havia peca — sem ela, a fibra de papel da
   camada 4 volta a pintar o campo da 05 nos DOIS temas, que e exatamente o que a
   ordem pede («a FIBRA FICA, ela nao e textura da 05, e do contrato»).
   Este e o estado em que o Gate A de 2026-09-10 mediu e olhou a secao (Lei 1:
   apagado o asset, a secao continua inteira). */

/* 2026-09-14 · o desvio «a arte da 05 e travada no tema claro» ACABOU, e acabou
   pela raiz: nao ha mais arte na 05. As tres linhas que escondiam as pecas no
   tema escuro (e devolviam a fibra no lugar delas) sairam junto — o tema escuro
   da 05 deixa de ser um caso especial e passa a ser o mesmo desenho do claro,
   com a tinta virada pelo tema. A pendencia «regerar campo05 e placa05 na paleta
   nova» morre sem resposta necessaria: o usuario escolheu a outra saida. */

/* --- a cabeca: manchete e lead lado a lado, presas ao pe da linha de base --- */
.proj-cabeca{display:grid;gap:var(--item);align-items:end}
@media (min-width:64rem){.proj-cabeca{grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);
  gap:clamp(2rem,4vw,4rem)}}
.proj-t{text-wrap:balance}
.proj-lead{color:var(--texto);text-wrap:pretty}

/* --- A PLACA: os dois estratos que sangram ate a borda da tela ------------
   filha DIRETA de <section>, fora do .wrap — por isso ela mede a largura do
   documento sem um so termo em vw (vw conta a barra de rolagem e o .s nao;
   1% de descasamento e overflow horizontal). O fio de barro de 3px no topo e a
   BORDA DA FOLHA da camada 4 — o ativo ownable — endireitada: o usuario recusou
   a versao diagonal dela duas vezes (hero em 2026-09-09, aqui agora), entao ela
   volta ORTOGONAL e de ponta a ponta, onde nenhum texto a atravessa. */
.placa{margin-block:var(--bloco);border-top:3px solid var(--acento)}

/* o LIVRO DA FICHA: a inversao de materia da camada 3 lida no maior componente
   da secao — o repouso e superficie com contorno, o ESCOLHIDO e o container
   inteiro virado materia macica com rotulo de cal. A ficha e o que esta secao
   escolhe: e o unico lugar do site que fala de um imovel concreto. */
/* `position:relative;overflow:hidden` entraram com o slot `05-sombra-placa`:
   sem eles a camada absoluta da arte escapa da placa e vai ancorar na secao. */
/* A LAJE INVERTE SOZINHA, e e o achado mais economico desta migracao: o par
   `--estrutura`/`--superficie` troca de polaridade junto com o tema (slate
   escuro + tinta clara no tema claro; cinza claro + tinta escura no escuro) e
   mede 10,45:1 num e 6,15:1 no outro. Nenhum token local de cor precisou ser
   inventado para a laje — so o mutado, abaixo.
   RESSALVA DECLARADA: `--cal-6` como tinta secundaria da um mute VISIVEL no
   tema claro (#ECEFF0 contra #FAFBFC) e quase nenhum no escuro (#36393B contra
   #373A3C). Foi a unica escolha do fecho que passa 4,5:1 NOS DOIS TEMAS —
   `--borda`, que seria o mute natural, cai a 3,9:1 sobre a laje do tema escuro
   e reprovaria o rotulo das celulas. Hierarquia mantida pelo versalete. */
.placa-ficha{background:var(--estrutura);color:var(--superficie);
  --cheio:var(--superficie);--anel:var(--superficie);--tinta:var(--superficie);
  --tinta-mutada:var(--cal-6);
  position:relative;overflow:hidden;
  padding-block:clamp(1.5rem,1rem + 2vw,2.75rem)}
/* RECOMPOSE 2026-09-14 · o slot `05-sombra-placa` (`.placa-arte`) SAIU pela mesma
   ordem. Foi junto `.placa-ficha > .wrap{position:relative;z-index:1}`, que so
   existia para levantar o conteudo acima daquela camada — sem camada, ela e
   inerte, e o layout nao muda um pixel (nada mais dentro da laje e posicionado).
   A laje volta a ser a chapa lisa de `--estrutura` com a fibra do contrato. */
/* 1 celula de titulo + 7 fatos = OITO, que fecham 4x2 no desktop e 2x4 no
   tablet sem sobrar cova. As celulas nao flutuam: encostam, separadas so pela
   junta de 1px — o mesmo gesto do livro-razao da 04 e das seis fichas da 06. */
/* `minmax(0,1fr)` na coluna base NAO e enfeite: sem ela a coluna implicita e
   `auto` e a celula cresce ate o max-content. Medido: em 390 com o tipo do
   usuario a 200% (root 32px) a celula ia a 543px num viewport de 390 e a
   pagina rolava de lado — WCAG 1.4.4 reprovado. */
/* `transparent` e NAO uma cor nova (Lei 2 intacta: e palavra-chave, nao valor
   de cor). O fundo do livro passa a ser desenhado pelo anel de cada celula —
   mesmas juntas de 1px, e a arte da placa aparece ATRAS das celulas em vez de
   so na moldura: 16,4% -> 90,7% de superficie de arte a 390px, que e o maior
   ganho por byte da secao.
   O FIO DA JUNTA MIGROU POR PAPEL: ele era um verde-oliva claro sobre a laje
   escura, ou seja, um LEVANTE de luz sobre a materia da laje. Como a laje
   inverte com o tema, o levante tem de inverter junto — por isso ele agora e
   `--junta-placa`, que e a propria tinta da laje (`--superficie`) a 22%: clareia
   no tema claro, escurece no escuro, e nos dois casos e o mesmo gesto.
   EFEITO COLATERAL DECLARADO (de 2026-09-11, nao desta volta): ha um fio de 1px
   na volta do livro, onde antes nao havia nada — o anel das celulas de borda nao
   tem vizinha com que se sobrepor. */
.livro{display:grid;gap:var(--fio);background:transparent;grid-template-columns:minmax(0,1fr)}
.livro dl{display:contents;margin:0}
@media (min-width:46rem){.livro{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* as 4 colunas so entram a 76rem, nao a 64: medido em 1024 no espanhol, com 4
   colunas a celula tem 180px de texto e «Lake Conroe · cerca de 1 h de Houston»
   quebrava em «1 / h de Houston». Entre 64 e 76rem a ficha e 2x4. */
@media (min-width:76rem){.livro{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cel{background:transparent;box-shadow:0 0 0 var(--fio) var(--junta-placa);
  position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:center;gap:.3rem;min-height:5rem;min-width:0;
  padding:clamp(.875rem,.7rem + .5vw,1.15rem) clamp(1rem,.75rem + .8vw,1.5rem)}
/* abaixo de 46rem a celula vira LINHA: rotulo a esquerda, valor a direita. Oito
   celulas empilhadas em duas linhas cada mediam 698px de livro num telefone de
   390 — 40% da secao so de ficha. Em linha caem para 452px e a leitura de ficha
   tecnica (par rotulo/valor no mesmo eixo) fica MAIS proxima do que uma ficha e. */
@media (max-width:45.99rem){
  .cel{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;
    min-height:3.25rem}
  /* `flex:1 1 10rem` e o que faz o par voltar a empilhar quando o usuario sobe o
     tipo: abaixo de 10rem de sobra o valor cai para a linha de baixo em vez de
     empurrar a celula para fora da tela. */
  .cel dt{flex:none;width:7.5rem;max-width:100%}
  .cel dd{flex:1 1 10rem;min-width:0}
}
.cel dt{color:var(--tinta-mutada)}
.cel dd{margin:0;min-width:0;color:var(--tinta);text-wrap:pretty}
/* a UNICA celula em barro macico: a inversao de materia da camada 3 dentro do
   proprio livro. Cal sobre barro mede 5,93 — o numero que a camada 3 mediu. */
.cel--titulo{flex-direction:row;align-items:center;justify-content:flex-start;
  gap:.75rem;background:var(--acento)}
.cel--titulo h3{color:var(--on-acento);text-wrap:balance}

/* --- os dois criterios: sem cartao, direto no campo, separados so pela junta
   VERTICAL (aresta vertical atras de texto le como troca de plano; a horizontal
   fatiaria a linha — a regra da licao 204). O disco diz o que o texto ja diz:
   CHEIO no criterio que fecha uma afirmacao, VAZADO no que termina em lacuna
   declarada («os numeros … eu mostro na conversa, com as fontes»). */
.criterios{display:grid;gap:var(--bloco)}
@media (min-width:64rem){.criterios{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .criterio:first-child{padding-right:clamp(2rem,3.5vw,3.5rem)}
  .criterio + .criterio{padding-left:clamp(2rem,3.5vw,3.5rem);
    border-left:var(--fio) solid var(--mutado-32)}}
@media (max-width:63.99rem){.criterios{gap:0}
  .criterio + .criterio{margin-top:var(--bloco);padding-top:var(--bloco);
    border-top:var(--fio) solid var(--mutado-32)}}
/* A BRASA COMO TEXTO GRANDE — e aqui a paleta nova paga uma divida antiga: o
   barro media 4,17:1 sobre o campo desta secao, ou seja, passava so como «large
   text» e por um fio. A brasa sobre `--cal-6` mede 7,8:1 no tema claro e 7,1:1
   no escuro: passa o piso de CORPO com folga nos dois. O corpo continua em
   tinta cheia. */
.criterio-t{display:flex;align-items:flex-start;gap:.75rem;color:var(--acento);
  margin-bottom:.5rem;text-wrap:balance}
.criterio-t .disco{margin-top:.42em}
/* max-width em ch, nao em px: empilhado a 768 a linha do criterio media 91
   caracteres — fora da faixa 45-90 do Butterick. Lado a lado a grade ja segura. */
.criterio p{color:var(--texto);text-wrap:pretty;max-width:62ch}

/* --- A SOLEIRA: o slot `05-terra-e-agua`, EDGE-ANCHORED nas tres bordas.
   A base dela E a borda inferior da secao (`.s05{padding-bottom:0}`), entao a
   faixa sai CORTADA pelo fim da secao — o mesmo gesto do disco de 26px cortado
   pela borda no rodape e da chapa-retrato da 04. Papel: a secao termina PISANDO
   no lugar de que ela fala. Nenhum texto encosta nela em largura nenhuma, entao
   nao ha zona de repouso de contraste a negociar (a mesma vantagem estrutural
   do slot 04-retrato-fabio). VAZIA no Gate A (Lei 1): sobra uma soleira de barro
   escuro com a fibra e o vinco do papel em CSS — materia, nao buraco. */
/* .soleira: removida em 2026-09-11 (decisao do usuario). Regras no backup _backups/soleira-*. */

/* =========================== 06 — terrenos =========================== */
/* «A PLACA» — variacao C do estudo _estudos/terrenos (decisao do usuario,
   2026-09-16: «Aplique a C para as 2 (pagina e secao)»). A secao INTEIRA e a
   laje de estrutura da 05, de borda a borda: uma placa de obra com tres
   celulas e junta de 1px. A MATERIA e o mapa de parcela (a evidencia crua, com
   o lote marcado), nao a foto bonita. O numero do lote e a numeracao de obra
   (Stardos 700 a 38px) estendida ao lote — desvio DECLARADO da camada 2, que
   reserva a Stardos aos 01-09 das secoes. A brasa entra so como MATERIA (a
   celula inteira inverte no hover, como a `cel--titulo` da 05) e nunca como
   tinta de texto: sobre a laje ela mede 1,23:1 no claro e 1,04:1 no escuro.
   CLASSE PROPRIA (`.sterr`), nao `.s06`: as classes .s06/.s07/.s08 carregam a
   cor das secoes que foram renumeradas (07/08/09) e nao mudaram de nome.
   A laje inverte sozinha com o tema pelo par --estrutura/--superficie
   (10,45:1 claro, 6,15:1 escuro); o mutado e --cal-6 (9,37 / 6,24), a mesma
   escolha medida da placa-ficha da 05. A fibra aqui e --luz-* (a tinta clara
   sobre a laje), como na 03. */
.sterr{background:var(--estrutura);color:var(--superficie);
  --cheio:var(--superficie);--anel:var(--superficie);--tinta:var(--superficie);--tinta-mutada:var(--cal-6);
  --texto:var(--superficie);--texto-mutado:var(--cal-6);--destaque:var(--superficie);
  --fibra:var(--luz-22);--fibra-0:var(--luz-00)}
.sterr .marcador .fio{background:var(--junta-placa)}
.sterr .cabeca .lead{color:var(--superficie)}
.placa-lotes{display:grid;gap:var(--fio);grid-template-columns:minmax(0,1fr);
  box-shadow:0 0 0 var(--fio) var(--junta-placa);border-top:3px solid var(--acento)}
@media (min-width:64rem){.placa-lotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pl{display:flex;flex-direction:column;text-decoration:none;color:var(--superficie);
  box-shadow:0 0 0 var(--fio) var(--junta-placa);min-height:52px;
  transition:background-color .16s ease-out,color .16s ease-out}
.pl-mapa{display:block;aspect-ratio:16/10;background:var(--campo);overflow:hidden}
.pl-mapa img{width:100%;height:100%;object-fit:cover}
.pl-corpo{display:flex;flex-direction:column;gap:.625rem;padding:clamp(1.25rem,1rem + 1.1vw,1.75rem);flex:1}
.pl-num{display:flex;align-items:center;gap:.875rem}
.pl-num .secn{color:var(--superficie)}
.pl-num .t-rotulo{color:var(--cal-6)}
.pl-end{font-family:"Literata","Literata Fallback",Georgia,serif;font-weight:700;font-variation-settings:"opsz" 36,"wght" 700;
  font-size:var(--fs-subtitulo);line-height:1.26;text-wrap:balance}
.pl-fatos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .875rem;align-items:baseline;margin:0;
  padding-top:.75rem;border-top:var(--fio) solid var(--junta-placa)}
.pl-fatos dt{color:var(--cal-6)}
.pl-fatos dd{margin:0}
.pl-fatos .preco{font-family:"Literata","Literata Fallback",Georgia,serif;font-weight:700;font-variation-settings:"opsz" 36,"wght" 700;
  font-size:var(--fs-titulo);line-height:1.26;font-feature-settings:"tnum" 1,"lnum" 1}
.pl-acao{margin-top:auto;display:flex;align-items:center;gap:.5rem;min-height:52px;padding-top:.75rem;
  border-top:var(--fio) solid var(--junta-placa);font-size:var(--fs-apoio);letter-spacing:0.01em}
.pl-acao::after{content:"";width:.5rem;height:.5rem;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);flex:none}
.pl:hover,.pl:focus-visible{background:var(--acento);color:var(--on-acento);
  --superficie:var(--on-acento);--cal-6:var(--on-acento);--junta-placa:var(--barro-press)}
.pl:hover .secn,.pl:focus-visible .secn{color:var(--on-acento)}
.placa-pe{display:grid;gap:var(--item);margin-top:var(--bloco);align-items:end}
@media (min-width:64rem){.placa-pe{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}}
.cond{display:flex;flex-direction:column;gap:.5rem}
.cond h3{color:var(--cal-6);margin-bottom:.25rem}
.cond p{display:flex;align-items:flex-start;gap:.75rem}
.cond p .disco{margin-top:.5em}
.sterr .micro{color:var(--cal-6);max-width:36rem}

/* --- a PAGINA do terreno (site/terrenos/lot-N.html) — variacao C ------------
   Sem hero: a barra fixa cobriria a primeira linha, por isso o <main> das
   paginas leva o padding-top igual a altura da barra (mesma expressao da
   `--barra` da hero). O cabecalho e a placa, com o numero do lote em Stardos
   no tamanho de display e o LIVRO DE CELULAS da 05 (`.livro`/`.cel`
   reaproveitados) DENTRO da laje. A galeria e edge-anchored: filha direta da
   secao, fora do .wrap, 5 chapas 3:4 tocando as duas bordas; abaixo de 64rem
   vira tira com scroll horizontal e snap (o documento NAO rola de lado — so a
   tira). Depois, condicoes + caixa de conversa (a `.caixa` da 08, em
   superficie com contorno de estrutura). */
.pagina-terreno main{padding-top:max(56px,3.5rem,calc(max(44px,2.75rem) + 1rem))}
.pc-cab{background:var(--estrutura);color:var(--superficie);
  --cheio:var(--superficie);--anel:var(--superficie);--texto:var(--superficie);--texto-mutado:var(--cal-6);
  --tinta:var(--superficie);--tinta-mutada:var(--cal-6);--foco:var(--superficie);
  --fibra:var(--luz-22);--fibra-0:var(--luz-00);
  padding-block:clamp(2rem,1.5rem + 2vw,3.5rem) 0}
.pc-cab > *{position:relative;z-index:2}
.voltar{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;text-decoration:none;
  color:var(--cal-6);font-size:var(--fs-apoio);letter-spacing:0.01em}
.voltar::before{content:"";width:.5rem;height:.5rem;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);flex:none}
.voltar:hover{color:var(--superficie)}
.pc-num{display:flex;align-items:baseline;gap:1rem;margin-top:var(--item)}
.pc-num .t-display{font-size:var(--fs-display);color:var(--superficie);line-height:1}
.pc-num .t-rotulo{color:var(--cal-6)}
.pc-cab h1{margin-top:.5rem;text-wrap:balance;max-width:24ch}
.pc-livro{margin-top:var(--bloco);border-top:3px solid var(--acento);padding-block:clamp(1.5rem,1rem + 2vw,2.75rem) clamp(1.5rem,1rem + 2vw,2.75rem)}
.pc-livro .cel .preco{font-family:"Literata","Literata Fallback",Georgia,serif;font-weight:700;font-variation-settings:"opsz" 36,"wght" 700;
  font-size:var(--fs-titulo);line-height:1.26;color:var(--tinta);font-feature-settings:"tnum" 1,"lnum" 1}
.pc-livro .cel dd{color:var(--tinta)}
.pc-livro .cel dt{color:var(--cal-6)}
.pc-livro .cel--titulo h2{color:var(--on-acento);display:flex;align-items:center;gap:.75rem;text-wrap:balance}
@media (min-width:76rem){.pc-livro .cel--titulo{grid-column:span 2}}
.pc-galeria{background:var(--campo);padding-block:0}
.tira{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--fio);background:var(--borda)}
/* lotes com 3 fotos (Lot 2, e o Lot 3 enquanto usa as do 2): tres chapas, sem cova vazia */
.tira--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tira > span{display:block;aspect-ratio:3/4;background:var(--s03-campo);overflow:hidden}
.tira img{width:100%;height:100%;object-fit:cover}
@media (max-width:63.99rem){
  .tira{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:var(--fio);scrollbar-width:none}
  .tira::-webkit-scrollbar{display:none}
  .tira > span{flex:0 0 72vw;scroll-snap-align:start}
}
.pc-legenda{padding-block:.875rem 0;color:var(--texto-mutado);display:flex;align-items:center;gap:.5rem}
.pc-corpo{padding-block:var(--bloco) var(--sy)}
.pc-grid{display:grid;gap:var(--bloco);align-items:start}
@media (min-width:64rem){.pc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}}
.pc-cond{display:flex;flex-direction:column;gap:.5rem}
.pc-cond h2{color:var(--texto-mutado);margin-bottom:.25rem}
.pc-cond p{display:flex;align-items:flex-start;gap:.75rem;max-width:34rem}
.pc-cond p .disco{margin-top:.5em}
.pc-cond .t-lead{margin-bottom:var(--item);max-width:30ch;text-wrap:balance}
.caixa-c{background:var(--superficie);border:var(--fio) solid var(--estrutura);border-radius:var(--raio);
  padding:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);display:flex;flex-direction:column;gap:var(--item);
  --cheio:var(--acento);--anel:var(--estrutura)}
.caixa-c .btn{align-self:flex-start}
.caixa-c .numero{font-family:"Literata","Literata Fallback",Georgia,serif;font-weight:700;font-variation-settings:"opsz" 36,"wght" 700;
  font-size:var(--fs-titulo);line-height:1.26;letter-spacing:-0.004em;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--acento)}
.caixa-c .micro{color:var(--texto-mutado)}

/* =========================== 07 — perguntas (id 07-perguntas desde 2026-09-16; classe .s06 mantida) =========================== */
/* A JUNTA: as seis fichas não flutuam — encostam, separadas só pelo fio.
   v1 tinha seis caixas soltas (ocupação 58,1% contra piso 62 e margem abaixo
   da rota structure); a laje resolve o número E a leitura. */
.s06{background:var(--campo);padding-block:clamp(3rem,2rem + 4vw,5rem);
  /* fibra: a tinta do tema sobre o campo. A laje de FAQ e opaca e fica lisa. */
  --fibra:var(--tinta-26);--fibra-0:var(--tinta-00)}
.faq{display:grid;gap:var(--fio);margin-top:var(--bloco);
  background:var(--borda);border:var(--fio) solid var(--borda);border-radius:var(--raio)}
@media (min-width:64rem){.faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq .painel{display:flex;flex-direction:column;gap:.75rem;border:0;border-radius:0}
.faq h3{display:flex;align-items:flex-start;gap:.75rem}
.faq h3 .disco{margin-top:.45em}

/* =========================== 07 — a conversa =========================== */
/* A 07 E A UNICA SECAO CUJO CAMPO E A BRASA — e por isso a unica em que TODO
   token de conteudo tem de ser remapeado para a relacao `--on-acento`, e nao
   para a tinta do tema. `--on-acento` inverte com o tema junto com a brasa (a
   brasa e clara no tema escuro e escura no claro), entao a relacao fundo/tinta
   desta secao e a mesma nos dois: 8,57:1 no claro e 10,03:1 no escuro.
   O MUTE E TRANSLUCIDO, nao um hex proprio: `--on-acento` a 72%, que compoe
   6,4:1 no claro e 5,4:1 no escuro — acima do piso de corpo nos dois, com o
   rebaixamento que a numeracao 01-08 e as juntas pedem.
   A DIVIDA ANTIGA SALDADA: nesta secao NENHUMA tinta da paleta antiga passava
   como destaque (2,86:1) e o italico da camada 2 estava proibido aqui. Com
   `--on-acento` o destaque passa — mas o titulo da 07 continua sem destaque
   porque essa e decisao de COPY, congelada, e nao de cor. */
.s07{background:var(--acento);color:var(--on-acento);
  --cheio:var(--on-acento);--anel:var(--on-acento);--tinta:var(--on-acento);
  --tinta-mutada:var(--sobre-acento-72);--junta:var(--sobre-acento-40);
  --destaque:var(--on-acento);
  /* fibra: `--on-acento` a 3,6% — a tinta que LE neste campo, em vez da tinta do
     tema, que aqui correria na polaridade errada. A caixa do CTA e superficie
     maciça e fica lisa por cima. */
  --fibra:var(--sobre-acento-36);--fibra-0:var(--sobre-acento-00);
  padding-block:var(--bloco)}
.s07 .marcador .fio{background:var(--sobre-acento-40)}
.conversa{display:grid;gap:var(--bloco);align-items:stretch}
@media (min-width:64rem){.conversa{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,4.5rem)}}
.conversa .lead{color:var(--on-acento);margin-top:var(--txt);max-width:37rem}
.conversa > div:first-child{display:flex;flex-direction:column;justify-content:center}
/* A INVERSÃO DE MATÉRIA na única próxima ação do site: laje de cal MACIÇA sobre
   o campo de barro, com o botão em barro dentro. O véu de 8% do v1 sumia no
   campo (ocupação 37,5% contra piso 50) e enfraquecia justo o CTA. */
.caixa{background:var(--superficie);border:var(--fio) solid var(--superficie);
  border-radius:var(--raio);padding:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);
  display:flex;flex-direction:column;gap:var(--item);
  --cheio:var(--acento);--anel:var(--estrutura)}
.caixa .corpo{color:var(--texto)}
/* o telefone e papel `titulo` e leva TABULARES — a Literata tem `tnum` real
   (verificado no binario: 26 features, tnum entre elas), a Stardos nao tem
   nenhuma. Este e o unico numero do site que NAO e da numeracao 01-08, e por
   isso ele fica na serifa: um telefone em estencil leria como placa de obra. */
.caixa .numero{font-family:"Literata","Literata Fallback",Georgia,serif;
  font-weight:700;font-variation-settings:"opsz" 36,"wght" 700;font-size:var(--fs-titulo);
  line-height:1.26;letter-spacing:-0.004em;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--acento)}
.caixa .micro{color:var(--mutado)}
.caixa .btn{align-self:flex-start}

/* ======================= 08b — agendar reunião (id 08b-agenda; classe .s07b mantida) ======================= */
/* Fora das 8 camadas do contrato: adicionada a pedido direto do usuário,
   como via alternativa à 07 (WhatsApp) para quem prefere marcar direto na
   agenda. Campo neutro como 06/08 (não é a brasa da 07 — não é O CTA, é UM
   CTA a mais) e o embed do Calendly mora dentro de um `.painel painel--faixa`
   já existente, para não inventar materialidade nova para um widget de
   terceiros. */
.s07b{background:var(--campo);padding-block:clamp(3rem,2rem + 4vw,5rem);
  --fibra:var(--tinta-26);--fibra-0:var(--tinta-00)}
.agenda{display:flex;flex-direction:column;align-items:center;gap:var(--item);
  max-width:44rem;margin-inline:auto;text-align:center}
.agenda .lead{max-width:37rem}
.agenda-caixa{width:100%;margin-top:var(--item)}
.agenda .micro{color:var(--mutado);margin-top:calc(-1 * var(--item) + .5rem)}

/* =========================== 09 — rodapé (id 09-rodape; classe .s08 mantida) =========================== */
.s08{background:var(--campo);padding-block:clamp(3rem,2rem + 4vw,5rem);
  /* fibra: a tinta do tema sobre o campo. */
  --fibra:var(--tinta-26);--fibra-0:var(--tinta-00)}
.rodape-topo{display:grid;gap:var(--bloco)}
@media (min-width:46rem){.rodape-topo{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--item)}}
.rodape-col h3{margin-bottom:.75rem;color:var(--mutado)}
.rodape-col a{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px}
.rodape-col a:hover{color:var(--acento)}
.rodape-col li{display:flex}
.rodape-marca{display:flex;align-items:center;gap:.625rem;margin-bottom:.5rem}
.disclaimer{margin-top:var(--bloco);padding-top:var(--item);
  border-top:var(--fio) solid var(--borda);color:var(--texto);max-width:74rem}
.corte{position:absolute;right:0;top:clamp(2rem,4vw,3.5rem);
  transform:translateX(50%);z-index:1;pointer-events:none}

/* ---------- utilitário ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== 2026-09-09 · decisão do usuário pelo remoto: «a imagem com 100% de
   opacidade». O véu e a textura de papel saem de cima da arte. Toda medição de
   contraste sob texto passa a depender só da própria peça. ===== */
/* variante B (decisão do usuário pelo remoto): o Fabio fica 100% limpo; o véu
   existe SÓ atrás da coluna de texto e chega a zero antes do retrato. Todas as
   paradas são rgba do espresso do contrato. */
.hero-arte .arte::after{display:none !important}
/* RECOMPOSE 2026-09-14 · ORDEM DO USUARIO, verbatim: «Remove the span with class
   "veu" from the hero». O veu da spec §5 (0,96 ate 58%, zero em 64%) saiu com o
   elemento. NADA foi reposto: o texto da hero le DIRETO sobre a peca de titanio.
   O que ficou abaixo de 4,5:1 esta medido e declarado no Gate A desta volta. */
/* ===== RECOMPOSE 2026-09-14 (3a sessao do dia) · ORDEM DO USUARIO, verbatim:
   «i want the background image clear in mobile as in desktop».
   O VEU DO MOBILE SAIU INTEIRO. Era o `.hero::before` da 4a volta (100svh): um
   gradiente de rgba(39,42,44,.96) preso ao BLOCO DE TEXTO, de 100vw de largura,
   que comecava acima da primeira linha e morria 2,75rem abaixo da ultima. Ele
   era o ultimo escurecimento sobre a peca no telefone — o `span.veu` ja tinha
   saido na sessao anterior, e a linha que o zerava no mobile saiu com ele.
   SAIU TAMBEM o `.hero{position:relative;z-index:0}` que estava no mesmo bloco:
   ele existia UNICAMENTE para ancorar o `::before` (z-index:-1) atras do texto.
   O texto continua acima da arte pelo `.s > .wrap{position:relative;z-index:2}`
   da base, que nao foi tocado — verificado no render, nao suposto.
   NADA FOI REPOSTO: nem gradiente, nem sombra de texto, nem chapa, nem
   opacidade na peca. A ordem proibe repor por conta propria. O texto da hero le
   DIRETO sobre a peca de titanio no telefone, como ja lia no desktop.
   O PRECO ESTA MEDIDO E DECLARADO no Gate A desta volta (360/390/414/768 x 3
   idiomas x 2 temas, celula 16x16, pior caso): o que ficou abaixo de 4,5:1 esta
   listado como desvio, com o numero. Se a peca precisar de uma zona de repouso
   mais escura sob a copy, isso e geracao dirigida do modo assets (ha 2 creditos
   na reserva do teto «assets hero titanio») — decisao do usuario, olhando. ===== */