/* ============================================================
   LETHAL · Base
   Reset curto, tipografia e o que vale em TODA pagina.
   Nada de componente aqui (isso e componentes.css).
   ============================================================ */

/* ------------------------------------------------------------
   A FONTE: ARCHIVO, SERVIDA DO PROPRIO DOMINIO
   ------------------------------------------------------------
   O design system pede Archivo. O Archivo mora no Google Fonts, e o
   FUNDACAO.md 4.3 proibe fonte de terceiro: cada dominio externo e um
   lugar a mais de onde pode vir codigo, e um pedido a mais antes de a
   pagina aparecer. O PDV ja tirou o Google Fonts em 1/ago pelo mesmo
   tipo de motivo, e o conferir-cache.sh dele hoje RECUSA o deploy se a
   politica voltar a liberar fonts.googleapis.com.

   Entao o arquivo mora aqui dentro, em assets/fontes/, e a CSP
   (`font-src 'self'`) continua fechada. Licenca SIL Open Font, copia
   integral em assets/fontes/LICENCA-ARCHIVO.txt, como a licenca exige.

   TRES DECISOES QUE VALEM ESTAR ESCRITAS:

   1. E FONTE VARIAVEL, um arquivo so de 100 a 900. O Google entrega o
      MESMO woff2 para os pesos 400, 600 e 800: sao instancias de um
      arquivo, nao tres arquivos. Declarar `font-weight: 100 900` num
      @font-face por subconjunto baixa 35 KB em vez de 105 KB.

   2. DOIS SUBCONJUNTOS, e o `unicode-range` decide qual baixa.
      Portugues e ingles cabem inteiros no `latin` (as vogais com til e
      o cedilha vivem em U+0000-00FF), entao no uso normal so os 35 KB
      do latin descem. O `latin-ext` fica de reserva e so e pedido se
      aparecer um caractere que exija. O subconjunto vietnamita que o
      Google serve junto foi descartado: 13 KB que este site nao usa.

   3. CAMINHO ABSOLUTO no url(), e nao relativo. Detalhe que ja custou
      tempo no PDV (FUNDACAO.md 4.7): url() dentro de variavel CSS
      resolve contra o arquivo que CONSOME a variavel, e la isso deu 404
      em todos os icones. Absoluto nunca depende de quem chamou.

   `font-display: swap` faz o texto aparecer na hora, na fonte do
   sistema, e trocar quando o arquivo chega. Num site que e quase so
   tipografia, texto invisivel esperando fonte e pior que troca visivel.
   O <link rel="preload"> nos seis HTML encurta essa troca.

   ⚠️ O `?v=` DAQUI E O DO PRELOAD TEM QUE SER O MESMO, BYTE A BYTE. Sao
   dois enderecos diferentes para o navegador, e enderecos diferentes sao
   arquivos diferentes: a fonte desce DUAS VEZES e o preload nao serve para
   nada. O defeito ja tinha acontecido uma vez (docs/DESIGN.md 3.4), voltou
   sozinho na rodada de 5/ago (o preload subiu para `20260805a` e este
   `url()` ficou em `20260804f`) e foi pego pelo aviso do console: "preloaded
   but not used". Quem bumpar o carimbo bumpa os dois.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fontes/archivo-latin.woff2?v=20260809r") 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;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fontes/archivo-latin-ext.woff2?v=20260809r") 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;
}

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

/* ⚠️ `hidden` PRECISA GANHAR DE QUALQUER `display`, E ISSO FOI UM DEFEITO
   VISTO NA TELA. O atributo `hidden` esconde pela folha de estilo do
   NAVEGADOR, que tem a menor prioridade que existe: qualquer classe nossa
   com `display: flex` passa por cima e o elemento aparece mesmo escondido.
   Aconteceu com a mensagem de erro do campo: ela nasce `hidden` e vazia, e
   o quadradinho de 8px do `::before` dela apareceu sozinho embaixo de todo
   campo do checkout, sem texto nenhum ao lado.
   Vale para todo o site: a barra do celular, os campos de endereço antes
   do CEP e o filtro da lista de peças usam o mesmo atributo. */
[hidden] { display: none !important; }

/* `color-scheme: dark` avisa o NAVEGADOR de que esta pagina e escura, e isso
   muda o que ele desenha por conta propria: barra de rolagem, cursor de
   texto, o marcador do checkbox e o fundo que ele pinta num campo
   autopreenchido.

   Ele entrou em 5/ago, com o primeiro formulario. Antes disso nao fazia
   falta: um site sem campo e sem camada rolavel quase nao tem pintura do
   navegador para corrigir. Com a gaveta, a barra de rolagem dela nascia
   CLARA por dentro de um painel preto, que e o tipo de detalhe que denuncia
   um sistema visual que nao foi ate o fim.
   Isto nao e cor escrita fora do tokens.css: e uma palavra que diz ao
   navegador qual dos temas dele usar. */
html { -webkit-text-size-adjust: 100%; background: var(--ink); color-scheme: dark; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--fonte);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--paper); color: var(--ink); }

/* O foco do teclado tem que ser VISIVEL. Tirar o anel de foco e o jeito mais
   rapido de deixar o site inutilizavel para quem navega por Tab.
   Raio zero aqui tambem: um anel arredondado em cima de um sistema de canto
   reto e o tipo de detalhe que denuncia que o sistema nao foi seguido. */
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* Pular para o conteudo: primeiro Tab da pagina, invisivel ate receber foco. */
.pular {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-micro); font-weight: var(--peso-forte);
  letter-spacing: var(--tk-rotulo); text-transform: uppercase;
}
.pular:focus { left: var(--s3); top: var(--s3); z-index: 100; }

/* Some da tela, continua no leitor de tela. */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Calha ----
   O design system trabalha com margem lateral de 60px fixos num artboard de
   1440. Fixo quebra no celular, entao a margem e fluida e o teto e o valor
   do documento. */
.calha {
  width: 100%;
  max-width: calc(var(--largura-max) + var(--margem) * 2);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* ============================================================
   TIPOGRAFIA
   Duas familias de titulo, e elas nao se misturam:
   .display  caixa-alta, peso 800, tracking negativo, alinhamento optico
   .leitura  caixa de frase, para o que se le de verdade
   ============================================================ */
.display {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tk-display);
  text-transform: uppercase;
  margin-left: var(--optico);
}
.display--hero      { font-size: var(--fs-hero); }
.display--campanha  { font-size: var(--fs-campanha); letter-spacing: -.04em; }
.display--secao     { font-size: var(--fs-h2); line-height: var(--lh-titulo); }
.display--pagina    { font-size: var(--fs-h1); line-height: var(--lh-titulo); }

/* O manifesto e o unico titulo em caixa de frase do site. E de proposito:
   ele e a voz da marca falando, e caixa-alta ali soaria como grito. */
.manifesto-titulo {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--fs-manifesto);
  line-height: var(--lh-titulo);
  letter-spacing: -.028em;
  margin-left: var(--optico);
}

/* Micro rotulo: 12px, caixa-alta, tracking largo. O tracking e o que devolve
   a legibilidade que o tamanho tirou. */
.rotulo {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tk-rotulo);
  text-transform: uppercase;
  color: var(--paper-miudo);
}
/* O quadrado de 8px que abre o rotulo. No design system ele era vermelho;
   sem cor terciaria ele vira claro, que e o modo "none" do proprio arquivo. */
.rotulo--marcado { display: inline-flex; align-items: center; gap: var(--s3); }
.rotulo--marcado::before {
  content: ""; width: 8px; height: 8px; flex: none;
  background: var(--paper);
}

.corpo   { color: var(--paper-corpo); max-width: var(--largura-texto); }
.corpo-g { color: var(--paper-corpo); font-size: var(--fs-corpo-g); max-width: var(--largura-texto); }
.apoio   { color: var(--paper-apoio); }
.miudo   { font-size: var(--fs-sm); color: var(--paper-apoio); }

/* A regua de 2px. O design system chama de "costura entre secoes maiores", e
   a regra inviolavel e: NAO troque regua por espaco vazio. Ela e o que faz o
   grid aparecer. */
.regua { height: 2px; background: var(--regua); border: 0; }
.fio   { height: 1px; background: var(--fio);   border: 0; }

/* Link editorial: sublinhado que e uma linha de verdade, com a seta ao lado.
   Sem caixa, sem pilula, sem fundo. */
.link-seta {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--alvo);
  font-size: var(--fs-micro); font-weight: var(--peso-display);
  letter-spacing: var(--tk-botao); text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid var(--fio-vivo);
  transition: border-color var(--transicao), color var(--transicao);
}
.link-seta::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
/* O hover mora no movimento.css, que e o dono unico do :hover do site. */

/* ============================================================
   CABECALHO
   ------------------------------------------------------------
   Tres zonas do design system, adaptadas ao que este site tem. A adaptacao
   mudou duas vezes, e as duas vezes pelo mesmo teste: o icone LEVA a algum
   lugar?

     4/ago  nao havia busca, conta nem sacola: as tres zonas viraram marca,
            menu e idioma, e nenhum icone entrou.
     5/ago  a sacola passou a abrir a gaveta e a conta passou a abrir
            `/entrar`. As duas viraram ICONE (componentes.css). A busca e os
            favoritos continuam FORA, e a busca pelo mesmo teste: num
            catalogo de cinco pecas, ela e um campo que devolve a mesma
            lista. Favorito e outra coisa e e um NAO, nao um "depois": e
            dado que precisa de dono, e o MARCA.md 4 proibe mecanica de
            colecao.

   PECAS, A MARCA, PT e EN CONTINUAM PALAVRA, e isso nao e inercia. Icone
   sem rotulo so funciona quando o desenho ja e convencao mundial. Sacola e
   pessoa sao; "as pecas desta marca" e "a historia desta marca" nao sao de
   ninguem, e o globo do idioma diz "idioma" sem dizer QUAL, enquanto duas
   siglas de dois caracteres dizem o de agora e o outro.
   ============================================================ */
.aviso-topo {
  background: var(--preto);
  min-height: 32px;
  display: flex; align-items: center;
}
.aviso-topo__linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s2);
}
.aviso-topo .rotulo { color: var(--paper-miudo); }
/* No celular a assinatura da direita sai: duas frases de 12px lado a lado a
   360px viram uma linha ilegivel, e a da esquerda e a que informa. */
@media (max-width: 700px) { .aviso-topo__dir { display: none; } }

.topo {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink);
  border-bottom: 1px solid var(--fio);
  transition: background var(--transicao), border-color var(--transicao);
}
/* Na home o cabecalho comeca transparente sobre o hero e vira solido no
   rolar (design system, 08 - microinteracoes). Quem liga e desliga a classe
   e a ui.js, com IntersectionObserver: ouvinte de scroll a cada pixel e o
   jeito caro de fazer a mesma coisa. Sem JavaScript ele fica solido, que e
   o estado legivel: o padrao nunca depende do script rodar. */
/* ⚠️ ELE NAO E MAIS `transparent`, e a troca saiu de uma MEDICAO, nao de gosto.
   Transparente, o menu de 12px media 2,81:1 sobre a viga clara do teto, contra
   um piso de 4,5. Quem mede e o `window.__medirTopo()`, que varre a rolagem;
   com a pagina no alto essa falha e invisivel, porque ali o cabecalho termina
   onde a foto comeca. O porque de o veu morar na BARRA e nao na foto esta
   escrito por extenso no `--veu-topo-barra` (tokens.css).
   A borda continua transparente: o que tira a linha do cabecalho sobre o hero
   e o desenho, e ela volta junto com o fundo solido quando o hero sai. */
.topo--sobre-heroi { background: var(--veu-topo-barra); border-bottom-color: transparent; }

.topo__linha {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--altura-topo); gap: var(--s4);
}

/* A marca: o "L" blackletter mais a palavra. O mark e o ativo mais forte que
   a marca tem (MARCA.md 12), entao ele vem primeiro e a palavra o acompanha.
   Os dois num link so, com um alvo de 44px. */
.marca {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: var(--alvo);
  /* ⚠️ `flex: none` E O QUE IMPEDE A MARCA DE SUMIR, e ela sumiu de verdade.
     Com a SACOLA nova no cabecalho (5/ago), o grupo da direita passou a nao
     caber a 360px. O algoritmo do flex nao encolhe quem nao pode encolher,
     entao ele encolheu quem podia: este link, ate largura ZERO. A 360px o
     cabecalho ficava sem o "L", que e o ativo mais forte que a marca tem
     (MARCA.md 12), e ninguem percebe porque o defeito e a AUSENCIA de uma
     coisa. Quem cede espaco a partir daqui e o grupo da direita, quebrando
     linha (ver `.topo__direita`), e nunca a marca.
     ⚠️ A regra CONTINUA NECESSARIA mesmo agora que o grupo da direita cabe em
     uma linha a 360px (o menu de texto saiu em 5/ago): sem ela, quem encolhe
     na proxima vez que faltar espaco volta a ser este link, ate zero. */
  flex: none;
}
.marca__mark { width: auto; height: 26px; flex: none; }
.marca__nome {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: 1.125rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  padding-left: .34em;   /* o tracking sobra a direita; isto recentraliza */
}

/* O grupo da direita QUEBRA LINHA quando nao cabe, e so quando nao cabe.

   ⚠️ HOJE ELE NAO QUEBRA MAIS, E A REDE DE SEGURANCA FICA. Quando a sacola
   voltou, eram quatro coisas disputando a linha (menu, sacola, idioma, mais a
   marca do outro lado) e a 360px elas somavam 346px num vao de 300: o grupo
   vazava 30px para fora da calha, o "EN" colava na borda e a pagina rolava de
   lado. Tirar o MENU DE TEXTO em 5/ago devolveu essa largura de uma vez:
   medido a 360px depois da mudanca, o cabecalho cabe em UMA linha e voltou de
   88px para 72px de altura, mesmo tendo ganhado a lupa no caminho.

   POR QUE A REGRA NAO SAI JUNTO: ela nao custa nada enquanto nao ha quebra, e
   o dia em que entrar mais um item ou uma lingua de sigla mais longa, o
   cabecalho cede altura em vez de vazar. Tirar `flex-wrap` seria trocar uma
   linha de CSS por um defeito que so aparece no aparelho de outra pessoa.

   POR QUE QUEBRAR LINHA, E NAO ESCONDER ALGUMA COISA: cada item tem dono. A
   sacola e o caminho de compra inteiro, a conta e a porta, a busca e como se
   acha uma peca pelo nome, e o idioma e metade do publico. Some qualquer um e
   o celular vira um site menor que o computador.

   `row-gap: 0` porque cada item ja carrega os 44px de alvo: a folga entre
   as duas linhas ja existe dentro deles, e somar `--s4` faria um cabecalho
   de 112px de altura no aparelho que tem menos tela. */
.topo__direita {
  display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap; justify-content: flex-end; row-gap: 0;
}

/* ⚠️ O MENU DE TEXTO DO TOPO NAO EXISTE MAIS, e a regra `.nav` saiu junto com
   ele em 5/ago, a pedido do Bruno. A barra ficou com tres icones e as duas
   siglas de idioma, e mais nada.

   O QUE SEGURA A NAVEGACAO NO LUGAR DELE, e sao tres caminhos, nao um:
   o rodape, que tem `Pecas` e `A marca` em toda pagina e agora e quem recebe
   o `aria-current` de "voce esta aqui" (js/ui.js); o CTA do hero na home; e a
   camada de busca, que leva ao catalogo inteiro pelo link do estado de
   convite. Sem esse terceiro caminho a lupa so serviria a quem ja sabe o nome
   do que quer, e foi por isso que ele entrou na mesma hora.

   ⚠️ Nao reponha `.nav` aqui sem repor tambem o `<nav>` nas OITO paginas: o
   cabecalho e copiado, e meia reposicao e um menu que aparece em uma pagina
   so. As chaves `nav.pecas` e `nav.marca` continuam vivas no dicionario
   porque o rodape as usa. */

/* ---- Fileira de idiomas (a versao SEM JavaScript) ----
   ⚠️ ATE 6/ago ESTE ERA O TROCADOR DA BARRA. Hoje ele e a rede: com quatro
   idiomas a fileira nao cabe na calha, entao o `js/idioma-painel.js` a
   esconde e revela a porta com bandeira no lugar. Sem JavaScript ela fica,
   e continua funcionando. As regras abaixo continuam valendo, e sao elas
   que desenham a fileira nesse caso.

   ⚠️ O QUE ESTAVA ESCRITO AQUI E NAO ESTA MAIS: "sem bandeirinha de
   proposito, bandeira e pais e nao idioma". O argumento continua CERTO e por
   isso nao foi apagado, so mudou de lugar: ele vale para bandeira SOZINHA,
   que e o que estaria na barra. No painel, cada linha tem o nome da lingua
   escrito por extenso, e a bandeira e o marcador que o olho acha antes de
   ler (DESIGN.md 11.2, regra 9). O porque inteiro esta no cabecalho do
   `js/idioma-painel.js`, e o desenho vive no `componentes.css`.

   LINKS, e nao botoes que trocam por JavaScript: o endereco muda junto, o
   clique do meio abre em outra aba, e o buscador enxerga os quatro caminhos.
   O nome inteiro do idioma fica no aria-label.

   O QUE MUDOU NO REDESENHO: era uma pilula cinza com sombra, que e o
   componente mais generico que existe. Agora e so tipo e um traco.

   POR QUE NAO E UM RETANGULO CLARO NO IDIOMA DE AGORA, que foi a primeira
   tentativa: num site preto, superficie clara e o sinal mais forte que
   existe, e ela e do CTA primario. Vista na tela, a caixa branca do "PT"
   puxava o olho antes do botao "Ver as pecas", ou seja, o segundo elemento
   mais brilhante da home era um trocador de idioma. Regra do FUNDACAO.md 10:
   um CTA primario por momento. O idioma se resolve com contraste de texto
   mais um traco embaixo, que e o mesmo vocabulario dos links editoriais. */
.idioma { display: inline-flex; align-items: center; }
.idioma__op {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--alvo); min-height: var(--alvo); padding: 0 var(--s2);
  font-size: var(--fs-micro); font-weight: var(--peso-forte);
  letter-spacing: .08em;
  color: var(--paper-miudo);
  border-bottom: 1px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.idioma__op[aria-current="true"] { color: var(--paper); border-bottom-color: var(--paper); }
/* hover: movimento.css */

/* A marca cede tamanho e o grupo da direita cede folga.
   ⚠️ A LINHA DO `.marca__nome` SAIU EM 6/ago, e nao foi esquecimento: a
   palavra passou a sumir abaixo de 580px (regra logo abaixo), entao uma
   regra que a encolhe abaixo de 480 nunca mais pintou nada. Regra morta
   que fica e a que faz a proxima pessoa procurar defeito no lugar errado. */
@media (max-width: 480px) {
  .marca__mark { height: 22px; }
  /* `gap` e atalho, e atalho reescreve as duas direcoes: sem repetir o
     `row-gap: 0` daqui, os 16px voltam ENTRE as linhas quando o grupo
     quebra, e o cabecalho do celular passa de 88px para 104px. */
  .topo__direita { gap: var(--s3); row-gap: 0; }
}

/* ⚠️ O APERTO DO CELULAR, MEDIDO EM 6/ago QUANDO A PORTA DE IDIOMA ENTROU.
   A porta (bandeira + sigla + chevron) mede 72px, contra os 44px de um
   icone. Com ela, o grupo da direita passou a somar 312px:

       4 icones x 44  +  porta 72  +  4 gaps de 16  =  312

   O vao e de 281px a 360px e de 311px a 390px. Ou seja: quebrava linha nas
   DUAS larguras, e o cabecalho voltava de 72px para 88px, desfazendo
   exatamente o que a saida do menu de texto tinha conquistado em 5/ago.

   O QUE FOI CEDIDO, e por que nesta ordem: primeiro o espaco ENTRE os
   itens, que e folga; depois o padding direito da porta, que e o ultimo
   item e ja tem a calha do cabecalho como respiro. Nada foi escondido e
   nenhum alvo de toque encolheu: os 44px de altura continuam inteiros nos
   cinco, e a porta continua com 64x44. A regra do `.topo__direita` acima
   diz por que esconder um item nao e opcao: cada um tem dono.

   A conta depois de ceder:  176 + 64 + 4 gaps de 8  =  272,  que cabe nos
   281px de 360, com 9px de folga, e sobra nos 311px de 390.

   A rede de quebrar linha continua onde estava. Ela e que segura o dia em
   que entrar um sexto item, e ai o cabecalho cede altura em vez de vazar.

   ⚠️ A metade que fala da PORTA nao mora aqui, e sim no `componentes.css`,
   junto do resto do componente. Motivo medido: o `componentes.css` carrega
   DEPOIS deste arquivo, e as duas regras tem a mesma especificidade, entao
   um `padding-right: 0` escrito aqui perde para o `padding: 0 var(--s2)` de
   la e nao faz nada. Foi o que aconteceu na primeira tentativa. */
@media (max-width: 480px) {
  .topo__direita { gap: var(--s2); row-gap: 0; }
}
/* ⚠️ ESTE NUMERO ERA 380px E VIROU 580px EM 6/ago, EM DOIS PASSOS, E O
   PRIMEIRO DELES E CONSERTO DE UM DEFEITO QUE JA ESTAVA NO AR, medido
   antes de qualquer coisa nova entrar no cabecalho.

   A medicao do 5/ago que celebrou "cabe em uma linha, de 88px para 72px"
   foi feita a 360px, e so a 360px. A 390px, que e a largura do iPhone 14,
   15 e 16 e provavelmente a mais comum do site, a palavra LETHAL VOLTA
   (era o que este `max-width` dizia) e come 122,5px dos 350 disponiveis.
   Medido no navegador, com os TRES icones de ontem e nada mais: o grupo
   da direita nao cabia, quebrava linha, e o cabecalho ficava com 89px.
   Ou seja, o defeito que a remocao do menu de texto tinha corrigido
   continuava inteiro no aparelho mais comum, e ninguem tinha visto
   porque a regua foi encostada num aparelho so.

   O SEGUNDO PASSO, de 460 para 680, e a QUARTA PORTA (os guardados). Ela
   fica sempre na barra, e nao so quando a lista tem alguma coisa: o
   porque esta escrito no js/guardados-gaveta.js, em `ligarPorta`. Abaixo
   de 680px sobra o mark, que ja e a marca (MARCA.md 12).

   ⚠️ 680 SAIU DE MEDICAO E DO PIOR CASO, e nao de arredondamento. A conta
   e esta, com tudo medido na tela e nao estimado:

     grupo da direita, com a sacola E os guardados mostrando contagem
     (que e o pior caso, e o unico que interessa) ............... 408,0px
     a palavra LETHAL em tamanho cheio .......................... 151,8px
     o vao entre a marca e o grupo ................................ 24,0px
                                                                 --------
     largura util minima para caber em uma linha ................ 583,8px

   A calha come 4,6vw de cada lado, entao a largura util e 0,908 da tela:
   583,8 / 0,908 da 643px. ⚠️ PARAR EM 640 SERIA SORTE, E NAO MARGEM: em
   641px a conta falha por 1,8px. Em 650px ela passa por 6,4px, o que
   tambem e pouco demais para depender de como cada aparelho desenha a
   fonte. 680 deixa 34px de folga, e foi conferido na tela com os dois
   quadrados de contagem acesos.

   ⚠️ A PALAVRA CEDE PRIMEIRO PORQUE ELA E A UNICA COISA AQUI COM
   SUBSTITUTO. O mark blackletter continua na tela e ja e a marca; um
   icone que sumisse levaria junto um caminho inteiro do site.

   E ABAIXO DE 436px NAO CABE DE JEITO NENHUM: os quatro alvos mais as
   duas siglas somam 328px (ou 376 com as contagens), e a 390px sobram
   310,6px. Nao ha como fazer caber sem quebrar o alvo de 44px
   (FUNDACAO.md 10) ou a margem da calha. Ali o grupo usa DUAS LINHAS e o
   cabecalho vai a 89px, que e o que o `flex-wrap` do `.topo__direita` ja
   tinha declarado por escrito para o dia em que entrasse mais um item:
   "cede altura em vez de vazar", e ninguem some. */
@media (max-width: 680px) {
  .marca__nome { display: none; }
}

/* ============================================================
   RODAPE
   O wordmark gigante justificado na largura do container e um elemento
   grafico, nao um titulo: ele fecha a pagina como a capa fecha um livro.
   Vive dentro de aria-hidden porque a palavra LETHAL ja foi dita no
   cabecalho, e um leitor de tela lendo "L E T H A L" letra por letra e
   ruido, nao informacao.
   ============================================================ */
/* Sem margem no topo: TODA pagina termina numa .faixa, e a faixa ja traz o
   respiro de 96px. Margem aqui somaria a dela e abriria um buraco. */
.rodape { background: var(--preto); padding-block: 0 var(--s5); }
.rodape__topo {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  justify-content: space-between; align-items: flex-start;
  padding-top: var(--s6);
}
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--s5); }
.rodape__links a {
  display: inline-flex; align-items: center; min-height: var(--alvo);
  font-size: var(--fs-micro); font-weight: var(--peso-forte);
  letter-spacing: var(--tk-rotulo); text-transform: uppercase;
  color: var(--paper-miudo);
  transition: color var(--transicao);
}
/* "VOCE ESTA AQUI", e ele mudou de lugar em 5/ago junto com a navegacao: era
   `.nav a[aria-current]` no topo, e o topo deixou de ter texto. Sem esta linha
   o `aria-current` que o js/ui.js escreve seria correto para o leitor de tela
   e invisivel para quem enxerga, que e meia entrega. */
.rodape__links a[aria-current="page"] { color: var(--paper); }
/* hover: movimento.css */

.rodape__marca { display: flex; align-items: center; gap: var(--s3); }
.rodape__marca img { height: 34px; width: auto; }

.rodape__wordmark {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: clamp(2.75rem, 15.4vw, 12.875rem);
  line-height: .8; letter-spacing: -.02em;
  color: var(--paper);
  margin-block: var(--s8) 0;
  user-select: none;
}
.rodape__legal {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  justify-content: space-between;
  padding-top: var(--s4); margin-top: var(--s6);
  border-top: 1px solid var(--fio);
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-miudo);
}

main { display: block; }

/* Utilitarios de espaco. Existem para o HTML nao precisar de style="" no
   elemento: estilo embutido e a folga que a politica de seguranca cobra
   (FUNDACAO.md 5) e que some quando o site cresce. */
.esp-2 { margin-top: var(--s2); }
.esp-3 { margin-top: var(--s3); }
.esp-4 { margin-top: var(--s4); }
.esp-5 { margin-top: var(--s5); }
.esp-6 { margin-top: var(--s6); }