/* ============================================================================
   BORDADOS SMANIOTTO — DESIGN SYSTEM v1 · TOKENS
   Ibitinga/SP · Grupo Smaniotto · Smaniotto · Sofisticata · Palácio dos Tapetes

   Os arquivos de fonte e todas as variáveis do sistema. É a primeira folha a
   ser carregada, sempre: tudo o que vem depois lê daqui.

   Esta folha é lida pelo site (public/) E pelo design system (assets/ds1.html).
   Mudou um token aqui, mudou nos dois — que é exatamente o ponto.
   ONDE MORA CADA COISA (a folha inteira era um <style> dentro do ds1.html)
   tokens.css        00 fontes · 01 tokens
   base.css          02 base (inclui a regra geral de movimento reduzido)
   componentes.css   03 ambiente · 04 movimento · 05 layout · 06 componentes
   padroes.css       07 padrões de negócio · 09 responsivo · 10 movimento reduzido
                     dos componentes desta folha
   painel.css        só o painel administrativo — o site não a carrega
   documentacao.css  só a página de documentação — não entra no site

   REGRA: nenhum valor de cor, tamanho ou espaço fora dos tokens de tokens.css.
   ========================================================================== */

/* ── 00 FONTES ───────────────────────────────────────────────────────────────
   Os arquivos woff2 são servidos do próprio repositório (public/fontes/), não
   do Google. Duas razões: o design system abre em qualquer computador, mesmo
   sem internet, e nenhum IP de visitante sai para um terceiro antes de haver
   qualquer consentimento.

   Os caminhos abaixo são relativos a ESTA folha, não ao documento que a
   carrega. É por isso que o mesmo arquivo serve o site (public/) e o design
   system (assets/ds1.html) sem duas versões: os dois chegam em public/fontes/.

   São as fontes VARIÁVEIS completas — Fraunces com os eixos opsz, wght, SOFT e
   WONK; Archivo com wght e wdth —, porque o sistema usa esses eixos de verdade
   em font-variation-settings. Um arquivo estático deixaria os títulos parecidos
   e errados.

   Os unicode-range vieram do CSS do próprio Google e ficam como estão: eles
   separam latin de latin-ext para o navegador só baixar o segundo arquivo
   quando a página realmente usar um caractere dele.

   Licença das duas famílias (SIL Open Font License 1.1): public/fontes/OFL.txt
   ────────────────────────────────────────────────────────────────────────── */

/* Fraunces — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fontes/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fontes/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 112%;
  font-display: swap;
  src: url('../fontes/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 112%;
  font-display: swap;
  src: url('../fontes/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 01 TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* Cor — núcleo (6). Cada uma existe também em RGB para variantes de opacidade. */
  --tinta:      #1B2430;  --tinta-rgb:      27 36 48;
  --bruma:      #E6E9E4;  --bruma-rgb:     230 233 228;
  --algodao:    #FCFBF9;  --algodao-rgb:   252 251 249;
  --carmim:     #9E2B3B;  --carmim-rgb:    158 43 59;
  --rose:       #E8B4B8;  --rose-rgb:      232 180 184;
  --castanho:   #6E5D4E;  --castanho-rgb:  110 93 78;

  /* Cor — derivadas de estado (escurecidas/clareadas dentro da mesma matiz) */
  --carmim-forte:  #7E1F2D;
  --carmim-fraco:  #C4646F;

  /* A TINTA DO LOGOTIPO, e por que ela não é o carmim.
     O arquivo que a fábrica mandou em 6/8/2026 é desenhado neste marrom
     avermelhado, e é ele que está impresso nos catálogos e nas etiquetas. O
     carmim é a cor da INTERFACE — botão, foco, acento — e nasceu antes de o
     logotipo chegar. As duas convivem na mesma tela: o marrom nomeia a marca,
     o carmim chama para a ação. Está aqui como token, e não solto dentro do
     SVG, porque o dia em que a fábrica alinhar as duas muda um valor só. */
  --marca-tinta:   #824F47;
  --tinta-alta:    #101822;

  /* Cor — semântica de feedback */
  --sucesso:  #16794C;  --sucesso-rgb:  22 121 76;
  --atencao:  #8F6008;  --atencao-rgb: 143 96 8;
  --erro:     #B3261E;  --erro-rgb:    179 38 30;
  --info:     #2E5A8A;  --info-rgb:     46 90 138;

  /* Cor — canal de ação (WhatsApp é o meio de fechamento do orçamento) */
  --zap:        #0F7A46;  --zap-rgb:      15 122 70;
  --zap-forte:  #0A5C34;

  /* Cor — papéis de superfície e texto (o que se usa no dia a dia) */
  --fundo:            var(--bruma);
  --superficie:       var(--algodao);
  --superficie-alta:  #FFFFFF;
  --texto:            var(--tinta);
  --texto-brando:     var(--castanho);
  --texto-inverso:    var(--bruma);
  --borda:            rgb(var(--tinta-rgb) / .14);
  --borda-forte:      rgb(var(--tinta-rgb) / .28);
  --borda-inversa:    rgb(var(--bruma-rgb) / .18);
  /* Poço: mais escuro do que a própria seção tinta, para o bloco de código
     afundar em vez de flutuar. Era um rgb(0 0 0 / .32) solto na folha. */
  --poco:             rgb(0 0 0 / .32);
  /* --sob = a cor do que está atrás do componente; usada para abrir folga
     entre um elemento e o seu halo de seleção.
     --anel-selecao = a cor desse halo no contexto atual. */
  --sob:              var(--superficie-alta);
  --anel-selecao:     var(--carmim);

  /* Gradientes documentados (4, sempre com papel definido) */
  --grad-fio: linear-gradient(90deg, transparent, rgb(var(--carmim-rgb) / .55), transparent);
  --grad-veu: linear-gradient(to top, rgb(var(--tinta-rgb) / .88), rgb(var(--tinta-rgb) / .30) 46%, rgb(var(--tinta-rgb) / 0));
  /* O véu da hero é mais pesado que o do card, e vem de dois lados. Motivo: as
     peças desta fábrica são brancas e palha, então a foto é clara quase toda —
     texto claro sobre ela fica ilegível, e o véu de baixo sozinho não resolve
     porque o título fica na altura da cama, não do rodapé. O segundo gradiente
     escurece a esquerda, onde o texto mora, e deixa a peça respirar à direita. */
  --grad-veu-hero: linear-gradient(to top, rgb(var(--tinta-rgb) / .90), rgb(var(--tinta-rgb) / .56) 50%, rgb(var(--tinta-rgb) / .26)),
                   linear-gradient(to right, rgb(var(--tinta-rgb) / .78), rgb(var(--tinta-rgb) / .40) 46%, rgb(var(--tinta-rgb) / 0) 76%);
  /* O MESMO VÉU, PARA FOTO QUASE TODA CLARA. O de cima foi calibrado na foto da
     home, que tem uma cama cinza e um quarto em penumbra. A hero da revenda
     mostra pilhas de toalhas brancas e palha num ambiente claro, e ali o título
     em algodão atravessa uma toalha branca no meio da frase — o véu padrão
     deixa o miolo do título ilegível.

     Não é caso de trocar a foto: a foto está certa, é ela que mostra a
     variedade que a revendedora vai vender. Também não é caso de escurecer a
     imagem inteira, porque o bordado é o produto. Este véu aumenta onde o texto
     mora — o canto de baixo e a esquerda — e continua abrindo à direita, onde a
     peça respira. Junto com --sombra-texto-sobre-foto, que age no texto e não
     na imagem, é o que segura a leitura.

     ⚠️ ESTES NÚMEROS ESTÃO CERTOS E FICARAM UM MÊS SEM CHEGAR À TELA. Quem os
     aplicava era um seletor que empatava em especificidade com a regra geral da
     hero de foto e perdia por vir antes na folha — a hero da revenda usou o véu
     da HOME esse tempo todo, e com ele o título media 2,09:1 e o selo 4,06:1.
     Corrigido o seletor (ver `.hero--foto.hero--revenda::after` no padroes.css),
     os mesmos valores abaixo dão 3,88:1 no título e 6,35:1 no selo — medidos no
     pixel da tela, em 12/8/2026. Não houve o que recalibrar: o que faltava era
     o véu chegar. */
  --grad-veu-hero-forte: linear-gradient(to top, rgb(var(--tinta-rgb) / .94), rgb(var(--tinta-rgb) / .72) 50%, rgb(var(--tinta-rgb) / .46)),
                         linear-gradient(to right, rgb(var(--tinta-rgb) / .88), rgb(var(--tinta-rgb) / .58) 52%, rgb(var(--tinta-rgb) / .12) 82%);
  /* O MESMO VÉU FORTE, RECALIBRADO PARA O CELULAR. Medido em 12/8/2026, a 375px.
     O de cima é um véu de DUAS camadas, e a segunda — a que escurece a esquerda
     e abre à direita — só faz sentido em tela larga, onde o texto ocupa o terço
     esquerdo e a peça respira ao lado. No telefone o texto ocupa a largura
     inteira: aquele "abrir à direita" nunca acontece, as duas camadas se somam
     e na altura do título a foto ficava 84% coberta em média e 94% no pior
     ponto. A toalha bordada sumia, a pilha verde virava quase preta, as flores
     desapareciam. Numa página que existe para convencer alguém a REVENDER
     enxoval, esconder o enxoval é o defeito mais caro que há.

     Por isso aqui a camada horizontal não existe: uma só, vertical, igual de
     ponta a ponta da largura. O perfil tem três trechos, e cada um é a
     necessidade medida de quem escreve por cima dele:

       base (0–17%)    .88 → .82  os três números e o rótulo rose de 11px
       meio (37–87%)   .60        título, arabesco, parágrafo e botão
       topo (93–97%)   .88 → .98  só o selo rose de 11px, que é o mais exigente

     O meio é onde a foto volta a aparecer, e é onde está a toalha bordada. O
     topo continua escuro porque o selo rose pede 4,5:1 — texto pequeno — e sobre
     a janela clara daquela foto isso exige véu de .77 para cima; abaixo disso
     ele não passa na norma. É a única parte da foto que não abriu, e é decisão
     tomada com número: entre mostrar a flor e o selo passar, o contraste ganha.

     A leitura que o véu deixou de dar volta pela sombra, não pela imagem — ver
     --sombra-texto-sobre-foto-movel logo abaixo. */
  --grad-veu-hero-forte-movel: linear-gradient(to top,
                                 rgb(var(--tinta-rgb) / .88),
                                 rgb(var(--tinta-rgb) / .82) 17%,
                                 rgb(var(--tinta-rgb) / .60) 37%,
                                 rgb(var(--tinta-rgb) / .60) 87%,
                                 rgb(var(--tinta-rgb) / .88) 93%,
                                 rgb(var(--tinta-rgb) / .98) 97%);
  /* A sombra que torna texto claro legível sobre foto clara SEM escurecer a
     foto. Existe porque as peças desta fábrica são brancas: um véu forte o
     bastante para o título apaga o matelassê, e o matelassê é o produto. A
     sombra resolve no texto o que o véu resolveria na imagem inteira. */
  --sombra-texto-sobre-foto: 0 1px 2px rgb(var(--tinta-rgb) / .55), 0 2px 12px rgb(var(--tinta-rgb) / .45);
  /* A MESMA SOMBRA, MAIS FUNDA, PARA ONDE O VÉU ALIVIOU. Ela é o outro lado da
     calibragem do celular: o véu do meio da hero caiu de ~.84 para .60 para a
     foto voltar a aparecer, e a carga que ele deixou de carregar vem para cá —
     que é exatamente o que este token existe para fazer, agir no texto e não na
     imagem. Duas camadas viraram três: as duas curtas dão o corte da letra, e a
     terceira, larga e sem deslocamento, é um halo que escurece só o punhado de
     pixels que encosta no glifo. Sobre foto clara é o que mantém o branco
     recortado sem devolver o véu que acabou de sair.

     Quem quiser usar em outro lugar redeclara o token no escopo do seu
     componente — `.hero--minha-hero { --sombra-texto-sobre-foto: var(...) }` —,
     que é o mesmo idioma de --largura-titulo-hero. */
  --sombra-texto-sobre-foto-movel: 0 1px 2px rgb(var(--tinta-rgb) / .72),
                                   0 2px 10px rgb(var(--tinta-rgb) / .58),
                                   0 0 22px rgb(var(--tinta-rgb) / .42);
  /* Escurecimento LOCAL, atrás de texto escrito em cima de foto.
     Por que não bastava o --grad-veu: ele escurece a foto inteira e no ponto
     onde fica o rótulo pequeno chega a menos de meia opacidade. Sobre foto de
     produto clara — cortina branca, lençol cru, almofada de cetim, que é a
     maior parte deste acervo — isso dá contraste na casa de 2,8:1 para um texto
     de 11px, abaixo do mínimo legível. Este segundo gradiente é curto e forte,
     mora atrás do bloco de texto e não da foto, e é o que garante o contraste
     independentemente de a foto ser clara ou escura. */
  --grad-rotulo: linear-gradient(to top, rgb(var(--tinta-rgb) / .92), rgb(var(--tinta-rgb) / .72) 55%, rgb(var(--tinta-rgb) / 0));
  --grad-bastidor: radial-gradient(120% 90% at 12% 0%, rgb(var(--rose-rgb) / .30), transparent 58%),
                   radial-gradient(90% 80% at 92% 12%, rgb(var(--carmim-rgb) / .10), transparent 60%);

  /* Tipografia — famílias e papéis */
  --fonte-titulo:   'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --fonte-corpo:    'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-dado:     ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Tipografia — escala fluida (mín. 375px → máx. 1440px) */
  --t-h1: clamp(2.75rem, 1.55rem + 5.1vw, 6rem);
  --t-h2: clamp(2rem, 1.42rem + 2.48vw, 3.5rem);
  --t-h3: clamp(1.5rem, 1.28rem + .94vw, 2.125rem);
  --t-h4: clamp(1.25rem, 1.16rem + .38vw, 1.5rem);
  --t-h5: 1.125rem;
  --t-h6: 1rem;
  --t-corpo-lg: 1.125rem;
  --t-corpo:    1rem;
  --t-corpo-sm: .875rem;
  --t-legenda:  .8125rem;
  --t-rotulo:   .6875rem;
  --t-auxiliar: .75rem;
  /* Abaixo do auxiliar: números de contador, selos e etiquetas de mídia. Eram
     valores soltos espalhados pela folha antes da extração — promovidos aqui
     para caber na regra de zero valor fora dos tokens. */
  --t-micro:    .625rem;
  --t-nano:     .5625rem;
  /* A assinatura da marca no cabeçalho e no rodapé tem tamanho próprio: ela
     não pertence à escala de títulos, é um logotipo escrito. */
  --t-marca:    1.06rem;

  /* Tipografia — pesos, entrelinhas, tracking */
  --peso-leve: 300; --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --peso-bold: 700;
  --lh-apertada: 1.02; --lh-titulo: 1.12; --lh-media: 1.35; --lh-corpo: 1.62;
  --tr-titulo: -.02em; --tr-normal: 0; --tr-rotulo: .18em; --tr-marca: .3em;
  /* Trackings de papel específico, também promovidos de valores soltos. */
  --tr-dado: .01em;        /* números tabulares */
  --tr-selo: .08em;        /* selo de contraste da documentação */
  --tr-chip: .1em;         /* chip de cor e selo de origem do vídeo */
  --tr-ficha: .12em;       /* chave da ficha técnica */
  --tr-assinatura: .14em;  /* o nome Smaniotto escrito por extenso */

  /* Espaço — base 4px */
  --esp-1: .25rem;  --esp-2: .5rem;   --esp-3: .75rem;  --esp-4: 1rem;
  --esp-5: 1.5rem;  --esp-6: 2rem;    --esp-7: 3rem;    --esp-8: 4rem;
  --esp-9: 6rem;    --esp-10: 8rem;

  /* Layout */
  --largura-max: 1240px;
  --largura-texto: 62ch;
  /* Coluna estreita: um parágrafo curto ao lado de outros, como o "sobre" do
     rodapé. Menor que --largura-texto de propósito — ali o texto divide a
     largura com mais duas colunas. Era um 26rem solto no HTML do rodapé. */
  --largura-coluna: 26rem;
  /* ATÉ ONDE O TÍTULO DA HERO DE FOTO PODE IR, e por que é um token.
     Era um `18ch` solto no padroes.css. Virou token porque a medida certa não é
     uma só: ela depende de quanto a foto daquela hero escurece à direita, e
     isso muda de foto para foto. Em `ch` e não em px de propósito — a escala do
     h1 é fluida, e `ch` acompanha o tamanho da fonte nos três tamanhos de tela
     sem nenhuma medida escrita duas vezes.
     Quem precisar de outro valor redeclara o token no escopo da sua hero —
     `.hero--minha-hero { --largura-titulo-hero: 15ch; }`. HOJE NINGUÉM FAZ
     ISSO: as duas heros de foto do site usam os 18ch. (O comentário original
     mandava conferir `.hero--revenda`, que nunca redeclarou nada; corrigido na
     verificação da fase 15, em 12/8/2026, porque comentário que aponta para
     código inexistente é pior do que comentário nenhum.) */
  --largura-titulo-hero: 18ch;
  --goteira: clamp(1.25rem, .6rem + 2.7vw, 3rem);

  /* ── O MENU DO PAINEL ─────────────────────────────────────────────────────
     Três medidas que só o painel usa, e que estão aqui e não no painel.css
     porque a regra do sistema é que medida se declara num lugar só.

     --largura-menu       a coluna do menu no computador.

                          ⚠️ ELA FOI DE 13 PARA 14 rem EM 21/8/2026, e o
                          motivo é o ícone que a fase N1B pôs em cada item:
                          16 px de desenho mais 8 px de vão são 24 px que
                          saíram da coluna do nome. Medido antes de mexer:
                          "Catálogos em PDF", "Senha e quem entra" e "As
                          palavras deste painel" passaram a sair em DUAS
                          linhas, o menu foi de 767 para 828 px de altura e os
                          três últimos itens caíram abaixo da dobra numa janela
                          de 727 px — que é exatamente o que a fase N1 tinha
                          brigado para evitar.

                          Os 24 px voltaram por dois caminhos, e não por um:
                          16 px aqui (13 → 14 rem) e 8 px no recuo lateral do
                          próprio item (--esp-3 → --esp-2, no painel.css). A
                          conta fecha, e a tela de edição paga METADE do que
                          pagaria se tudo viesse daqui.

                          ⚠️ E NÃO 15 rem, que era a saída óbvia. A fase N1
                          mediu o preço: 15 rem custam 32 px de largura em TODA
                          tela de edição, e ali se corrige parágrafo.

     --largura-gaveta-menu  a mesma coisa quando ela vira gaveta, no celular.
                          É maior porque ali ela não divide a tela com nada — e
                          é limitada por `min()` com a largura da janela, para
                          nunca passar da borda num telefone estreito.

     --largura-painel     até onde a MOLDURA DE DENTRO do painel se estica, e
                          ela é mais larga que a do site de propósito: é
                          exatamente --largura-max (1240px) + --largura-menu
                          (13rem = 208px) + --esp-6 (2rem = 32px), ou seja, o
                          menu foi ACRESCENTADO ao lado do conteúdo em vez de
                          descontado dele. Sem isso, pôr o menu na tela custaria
                          224 px de largura em todas as telas de edição — e a
                          tela de uma seção já divide o espaço entre o índice de
                          26 rem e a coluna dos campos.
                          Escrito como valor e não como `calc()` das três
                          medidas de propósito: o painel redeclara --largura-max
                          no próprio escopo, e um calc() que lesse --largura-max
                          para definir --largura-max seria uma referência
                          circular — que em CSS não vira erro visível, vira
                          declaração descartada em silêncio.
                          ⚠️ Ela subiu de 1480 para 1496 px junto com o menu, em
                          21/8/2026, para a fórmula continuar sendo verdade:
                          1240 + 224 + 32. Na prática isso só muda alguma coisa
                          acima de 1496 px de janela — abaixo disso quem manda é
                          a largura da tela. */
  --largura-menu:        14rem;
  --largura-gaveta-menu: 17rem;
  --largura-painel:      1496px;

  /* A COLUNA DO ÍNDICE DA TELA DE SEÇÃO, e por que ela deixou de ser fixa.
     Era `--largura-coluna` (26 rem) escrito direto na grade. Com o menu ao
     lado, 26 rem fixos deixavam a caixa de texto que se está EDITANDO com
     378 px numa janela de 1216 px — medido em 20/8/2026 —, e ali se corrige
     parágrafo. O índice é o atalho; o campo é o trabalho.
     Elástica, ela encolhe onde aperta e para de crescer onde já basta: 292 px
     em 1216, 346 px em 1440, e o teto de 26 rem a partir de ~1730 px. O piso de
     14 rem é onde o nome de um campo ainda cabe em duas linhas.
     Medida na régua certa — a largura da CAIXA DE TEXTO —, em 20/8/2026: 502 px
     em 1216 e 555 px em 1440. Antes do menu existir eram ~515 px e ~537 px nas
     mesmas janelas, ou seja, a tela de seção não perdeu largura de edição para
     o menu: em 1440 ela ganhou 18 px. */
  --largura-sumario: clamp(14rem, 24vw, var(--largura-coluna));

  /* A BUSCA DA MOLDURA DO PAINEL — rótulo e campo juntos, numa linha só.
     Ela é de propósito MAIS CURTA que a busca de dentro de uma tela, que usa a
     --largura-coluna: as duas nasciam com 423 px de campo no mesmo x, e duas
     caixas iguais na mesma tela ensinam que existem duas coisas iguais. Com
     26 rem, o campo desta fica com 264 px contra os 423 da outra — diferença
     que se lê sem ninguém precisar comparar. Vale só acima de 48 rem; abaixo
     disso o rótulo volta para cima do campo e esta medida não é usada. */
  --largura-busca-painel: 26rem;

  /* O CARTÃO DE UMA PÁGINA, no átrio de "Outras páginas" (fase N2).
     É o piso de uma coluna da grade, e não a largura dela: a grade é
     `auto-fill` com `minmax()`, então o cartão cresce até dividir a linha em
     partes iguais e só quebra para menos colunas quando o piso não cabe mais.
     Medido na tela em 21/8/2026: 3 colunas em 1440, 2 em 768 e 1 em 375 — que é
     o ritmo que os dez cartões pedem para caberem em quatro linhas no computador
     sem virarem uma tira estreita.
     ⚠️ E O MENU NÃO CONTA A MESMA HISTÓRIA NAS TRÊS. Em 1440 ele é a coluna
     fixa ao lado e tira 304 px da largura; em 768 e em 375 ele é a gaveta do
     hambúrguer e não tira nada. A grade não sabe disso nem precisa saber — quem
     mede é o `minmax()` sobre a largura que sobrou —, mas quem for reconferir
     estes números na tela precisa saber, senão procura a coluna do menu em 768
     e conclui que a medida está errada.
     ⚠️ 20 rem e não 18: em 18 rem a grade dá QUATRO colunas em 1440, e a frase
     de dentro do cartão passa a quebrar em quatro e cinco linhas — o cartão
     deixa de se ler de relance, que é a única razão de ele existir em vez de
     uma lista. */
  --largura-modulo: 20rem;

  /* ⚠️ O PISO DA FAIXA DE NÚMEROS DA TELA INICIAL — `.painel-numeros` (fase N4).
     Ele é bem menor que o do módulo, e o motivo é o conteúdo: um cartão de
     número carrega três linhas curtas ("140", "peças no ar", "9 fora do ar"),
     enquanto o módulo carrega uma frase inteira. Vinte rem ali existem para a
     frase não quebrar em quatro linhas; aqui não há frase.

     O número não é escolhido, é medido, e o que ele decide é quantas colunas a
     faixa tem em cada largura. Com `auto-fit` e `minmax()`, medido em 22/8/2026:

       1440 px → 1088 px de área útil (o menu tira 304)  →  3 colunas
        768 px → a gaveta não tira nada                  →  3 colunas
        375 px →                                          →  1 coluna

     ⚠️ TRÊS COLUNAS EM 768 É O PONTO. Com o piso do módulo (20 rem) a faixa
     cairia para 2 + 1 no tablet, e o terceiro cartão atravessaria a tela
     sozinho, do dobro da largura dos dois de cima — uma faixa de comparação em
     que um dos números é maior que os outros por acaso do layout. */
  --largura-numero: 12rem;

  /* ⚠️ A LARGURA COMUM DOS BOTÕES QUE ANDAM JUNTOS — `.btn--par` (fase N1C).
     Botão isolado tem a largura do rótulo dele, e assim deve ser. Mas quando
     dois aparecem lado a lado na mesma pergunta, ou empilhados na mesma coluna
     de uma lista de 149 linhas, cada um com a sua largura, a borda esquerda
     dança de linha para linha. Foi o que o Felipe viu em 21/8/2026 no painel no
     ar, e o que abriu esta fase.

     O número NÃO é escolhido: é medido. Com o recuo simétrico do `.btn` já
     corrigido, os quatro rótulos desta família medem, em 1440 px:

       "Deixar no ar" ......... 125,13 px   ← o maior, e é ele que manda
       "Tirar do ar" .......... 113,41 px
       "Pôr no ar" ............ 106,39 px
       "Desfazer" ............. (fora: ele não divide coluna com ninguém)

     8 rem = 128 px é o primeiro degrau da régua de base 4 que cobre os 125,13 —
     2,87 px de folga no pior caso, que não aparecem porque o `.btn` centra o
     conteúdo. Sete rem (112 px) cortaria o maior rótulo.

     ⚠️ OS RÓTULOS VÊM DO BANCO e a Karittas pode reescrevê-los. Rótulo maior
     que 128 px faz o botão crescer — o texto nunca é cortado —, e só então a
     largura comum se perde naquela tela. Quem mexer nesses textos remede aqui. */
  --largura-botao-acao: 8rem;

  /* Altura mínima de qualquer coisa que se aperta com o dedo: botão, campo,
     botão de ícone. Era 2.75rem repetido em cinco lugares. */
  /* A ALTURA DO CABEÇALHO, num lugar só. Ele é grudento no topo, e tudo o que
     também gruda — hoje a barra de filtros da listagem — precisa parar ABAIXO
     dele, senão desliza por trás e some pela metade. Escrito à mão nos dois
     lugares, o dia em que o cabeçalho mudasse de altura deixaria o outro
     desalinhado em silêncio. */
  --alt-cabecalho: 4.5rem;

  --alt-controle: 2.75rem;
  /* A altura do botão da chamada principal — só a hero usa. Não é "o botão
     maior": é o tamanho de um alvo que precisa ser óbvio na primeira dobra,
     inclusive com o polegar no celular. */
  --alt-controle-grande: 3.25rem;

  /* Raio — o sistema é reto; o arredondado é exceção (pílulas e avatares) */
  --rad-0: 0; --rad-1: 2px; --rad-2: 4px; --rad-3: 10px; --rad-total: 999px;

  /* O AR ENTRE O SUBLINHADO E A LINHA DE BASE. O padrão do navegador encosta o
     traço na perna do "p" e do "g", e numa serifada como a Fraunces isso vira
     borrão. Em `em` e não em px porque o sublinhado acompanha o tamanho da
     letra: o mesmo valor serve no auxiliar de 11px e no corpo de 16px.
     Nasceu solto na `.migalha a:hover`; virou token na fase 15, quando o
     sublinhado passou a ser OBRIGATÓRIO em link dentro de texto corrido — ver
     `.caixa__texto a` no padroes.css e a régua 1.4.1 no ds1.html. */
  --desloca-sublinhado: .2em;

  /* Elevação */
  --elev-1: 0 1px 2px rgb(var(--tinta-rgb) / .05), 0 4px 10px rgb(var(--tinta-rgb) / .05);
  --elev-2: 0 2px 4px rgb(var(--tinta-rgb) / .05), 0 10px 24px rgb(var(--tinta-rgb) / .08);
  --elev-3: 0 4px 8px rgb(var(--tinta-rgb) / .06), 0 20px 48px rgb(var(--tinta-rgb) / .14);
  --elev-foco: 0 0 0 3px rgb(var(--carmim-rgb) / .28);

  /* Movimento */
  --dur-1: 160ms;  /* estado imediato: cor, borda */
  --dur-2: 320ms;  /* transformação curta: elevar, abrir */
  --dur-3: 620ms;  /* surgimento de conteúdo */
  --dur-4: 1200ms; /* a costura correndo */
  --saida:   cubic-bezier(.16, 1, .3, 1);
  --entrada: cubic-bezier(.7, 0, .84, 0);
  --suave:   cubic-bezier(.25, .46, .45, .94);

  /* Escada de atraso do surgimento. Quatro degraus, e não um número livre por
     elemento: é o que faz uma fileira de cards entrar em cascata sempre no
     mesmo ritmo, em qualquer página. Eram valores soltos em style="--atraso:…"
     dentro do HTML do ds1.html — promovidos aqui para caber na regra de zero
     valor fora dos tokens, já que style="" no HTML não obedece a token nenhum. */
  --atraso-1: 80ms;  --atraso-2: 160ms;  --atraso-3: 240ms;  --atraso-4: 320ms;

  /* Costura (assinatura) — comprimento do ponto e da lacuna */
  --ponto: 7px;
  --lacuna: 6px;
  --fio-espessura: 1.4px;
}

/* Progresso da costura: registrado para poder ser animado por transição. */
@property --avanco { syntax: '<number>'; inherits: true; initial-value: 1; }