/* ============================================================
   LETHAL · O que so existe numa pagina
   Se uma regra daqui aparecer em duas paginas, ela sobe para
   componentes.css. Um dono por regra.
   ============================================================ */

/* ------------------------------------------------------------
   FAIXAS
   O site inteiro e preto. O que separa uma secao da outra e o DEGRAU
   DE PRETO, mais a regua de 2px. Sem cor, e a unica coisa que sobra
   para o olho achar a costura, e por isso os degraus sao poucos e
   sempre os mesmos.
   ------------------------------------------------------------ */
.faixa        { padding-block: var(--s8); background: var(--ink); }
.faixa--char  { background: var(--char); }
.faixa--preto { background: var(--preto); }
/* O UNICO bloco claro do site, e e assim no design system tambem: o
   manifesto. Ele existe justamente para ser o momento em que a pagina
   inverte e a pessoa para de rolar. Dois blocos claros matariam esse
   efeito, entao nao existe um segundo. */
.faixa--claro { background: var(--paper); color: var(--ink); }
.faixa--claro .corpo,
.faixa--claro .corpo-g { color: var(--ink-corpo); }
.faixa--claro .apoio,
.faixa--claro .rotulo  { color: var(--ink-apoio); }
.faixa--claro .regua   { background: var(--fio-claro-vivo); }
.faixa--claro .fio     { background: var(--fio-claro); }
.faixa--claro .rotulo--marcado::before { background: var(--ink); }
.faixa--claro .link-seta { color: var(--ink); border-bottom-color: var(--fio-claro-vivo); }
/* hover: movimento.css */
.faixa--claro :focus-visible { outline-color: var(--ink); }

/* Cabeca de secao: rotulo e titulo a esquerda, uma linha de apoio na ponta
   direita, e a regua de 2px fechando por baixo. E a assinatura do design
   system, e e ela que faz o grid aparecer sem desenhar caixa nenhuma. */
.secao__cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s6);
}
.secao__cabeca .display { margin-top: var(--s4); }
.secao__cabeca-apoio { max-width: 42ch; margin-bottom: var(--s1); }
.secao__cabeca + .regua { margin-top: var(--s6); }
.regua + .grade,
.regua + .secao__corpo { margin-top: var(--s6); }
@media (max-width: 760px) {
  .secao__cabeca { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .secao__cabeca-apoio { margin-bottom: 0; }
}

/* ============================================================
   HOME
   ============================================================ */

/* ---- Hero ----
   O design system pede foto full bleed com gradiente de legibilidade e o
   conteudo no canto inferior esquerdo, e desde 5 de agosto e isso que ele e.

   O hero SEM foto continua escrito e continua funcionando: e o campo preto
   com o "L" sangrando pela direita, e e o que aparece se a foto nao descer.
   O que a foto liga esta todo em .heroi--com-foto, uma classe so, para que
   tirar a foto seja tirar uma classe. */
.heroi {
  position: relative; overflow: hidden;
  min-height: clamp(520px, 76vh, 820px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--s9) var(--s8);
  background: var(--ink);
}
.heroi__mark {
  position: absolute; right: -4%; bottom: -8%;
  height: 96%; width: auto;
  opacity: .07;
  pointer-events: none; user-select: none;
}
/* ---- A FOTO DE CAPA (5 de agosto) ----
   Chegou a foto, e o slot que estava escrito aqui esperando por ela virou
   isto. O quadro preto continua embaixo: e o que se ve enquanto o arquivo
   desce, e e o que fica se ele nao descer.

   E uma <picture>, e nao um background-image, por um motivo medido: o
   background-image so e descoberto depois que o CSS baixa e casa a regra, e
   a foto do hero e a maior pintura da pagina. Como <img> o navegador acha
   ela na primeira leitura do HTML e ja comeca a baixar.

   `fetchpriority="high"` porque ela disputa fila com a fonte e com o
   catalogo, e aqui ela ganha: a fonte tem pilha de reserva, a foto nao. */
.heroi__foto {
  position: absolute; inset: 0; display: block;
  background: var(--quadro);
}
.heroi__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 42% e nao 50%: o corte 16:9 tem os rostos acima do meio, e centralizar
     jogava o queixo do primeiro homem para fora em janela baixa. */
  object-position: 50% 42%;
}
/* As duas camadas de escuro. Os valores moram no tokens.css porque o
   medidor de contraste le de la (docs/DESIGN.md 9). */
/* As TRES camadas de escuro. Os valores moram no tokens.css porque o
   medidor de contraste le de la (docs/DESIGN.md 9).
   ⚠️ A DO TOPO ENTROU EM 5/ago, com os icones do cabecalho, e o motivo esta
   escrito por extenso no token: o cabecalho e grudado e continua
   transparente enquanto o hero esta na tela, entao ao ROLAR ele passa por
   cima do canto mais claro da foto. Nenhuma medicao olhava para isso, porque
   com a pagina no alto o cabecalho termina onde a foto comeca. */
.heroi__foto::after {
  content: ""; position: absolute; inset: 0;
  background: var(--veu-capa-topo), var(--veu-capa-x), var(--veu-capa-y);
}
.heroi__conteudo { position: relative; }
/* 20ch, e o numero foi medido depois que o Archivo entrou, nao antes: com a
   fonte do sistema 16ch dava duas linhas, e com o Archivo, que e mais largo,
   dava tres, com a segunda linha sobrando um "UMA" solto no meio. 20ch quebra
   em duas nos DOIS idiomas ("UMA IRMANDADE, NAO / UMA MULTIDAO." e
   "A BROTHERHOOD, NOT / A CROWD."). Em tela estreita ele volta a tres, e
   tudo bem: ali a quebra e do tamanho da tela, nao de uma medida errada. */
.heroi__titulo { max-width: 20ch; margin-top: var(--s5); }
.heroi__apoio  { margin-top: var(--s5); max-width: 46ch; }
.heroi__acoes  { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ============================================================
   O QUE MUDA QUANDO EXISTE FOTO
   ------------------------------------------------------------
   1. A MARCA D'AGUA SAI. O "L" a 7% existia para dar ancora a um campo
      preto vazio. Com foto o campo nao esta vazio, e 7% sobre fotografia
      nao e uma marca d'agua discreta: e sujeira. Ele continua no HTML, e
      volta sozinho no dia em que a classe sair.

   2. OS TONS SEMITRANSPARENTES VIRAM SOLIDOS, e este e o ponto que quase
      passou batido. O apoio do hero e pintado com rgba(242,241,237,.72) e
      a borda do botao secundario com .45. Sobre o preto chapado isso da
      9,16:1 e 4,11:1, que e o que o tokens.css mediu. Sobre FOTO a conta
      muda de natureza: o fundo atravessa a propria letra, entao quando a
      foto clareia, a letra clareia junto, e a diferenca entre as duas nao
      sobe nunca. Medido no pior pixel da zona do rotulo, um alfa de .55
      caia para 2,10:1, contra um piso de 4,5:1.

      A cura nao e clarear a letra a esmo: e trocar cada alfa pela cor
      SOLIDA que ela ja produzia sobre --ink. rgba(242,241,237,.72) sobre
      #0a0a0a resulta em #b1b0ad, e e exatamente isso que os olhos ja viam.
      Ou seja: no preto chapado nada mudou de aparencia, nem um tom. O que
      mudou e que agora a letra tem cor propria e para de beber a foto.

      Como sao tokens, a troca acontece na camada de token e NENHUM
      componente foi tocado: .corpo-g e a borda do botao secundario
      continuam escritos como estavam (FUNDACAO.md 4.1). E como a classe
      so envolve o hero, o resto do site nao ve nada disto.

      So estes DOIS tokens estao aqui, e nao os quatro da familia, porque
      so estes dois tem consumidor dentro do hero. Conferido no navegador,
      varrendo os elementos: .corpo-g usa --paper-corpo e a borda do botao
      usa --fio-vivo. --paper-apoio e --paper-miudo nao sao pintados por
      elemento nenhum daqui, e trocar um token que ninguem le e deixar
      codigo morto parecendo decisao.
   ============================================================ */
.heroi--com-foto .heroi__mark { display: none; }
.heroi--com-foto {
  --paper-corpo: #b1b0ad;  /* era rgba(242,241,237,.72) · o paragrafo de apoio */

  /* A borda do botao secundario e o UNICO sinal de que aquilo e um botao,
     entao o piso dela e 3:1, e nao 4,5:1. O solido equivalente ao alfa .45
     media 3,02:1 sobre o pior pixel: passa, e passa por 0,02. Margem dessa
     largura nao e margem, e sorte — qualquer troca de foto derrubava. Subiu
     para o solido de .55, que mede 4,61:1 no mesmo pixel. Num fio de 1px a
     diferenca de brilho nao se nota; a diferenca de folga, sim. */
  --fio-vivo:    #8a8987;  /* era rgba(242,241,237,.45) · a borda do secundario */
}

/* 3. O ROTULO SOBE PARA O PAPEL INTEIRO, e so ele, e so aqui.
   O piso de .55 do tokens.css foi calibrado contra PRETO CHAPADO, e
   contra preto chapado ele esta certo: 5,66:1. Sobre fotografia a conta
   pede outra coisa. Medido: para o rotulo em #8a8987 alcancar 4,5:1, o
   fundo atras dele nao podia passar de sRGB 36 — ou seja, so passaria se
   a foto fosse preta naquele canto. Escurecer o canto ate 36 seria apagar
   a parede iluminada que e metade do enquadramento, para salvar seis
   palavras de 12px.

   Entao quem sobe e a letra. E nao custa hierarquia: o rotulo nunca foi
   discreto por ser apagado, e sim por ter 12px contra 86px do titulo, mais
   caixa-alta e tracking de .16em, que e o que o proprio design system diz
   segurar o carater dele. Agora ele tambem casa com o quadrado de 8px do
   .rotulo--marcado, que ja era --paper solido: os dois eram do mesmo
   rotulo e estavam em brilhos diferentes. */
.heroi--com-foto .rotulo { color: var(--paper); }

@media (max-width: 600px) { .heroi__mark { height: 60%; right: -14%; bottom: 12%; } }

/* No celular o texto ocupa a largura inteira, entao o veu lateral nao tem
   lado para escurecer e so tiraria contraste da foto. Ele sai, e o vertical
   assume sozinho, mais fundo.

   O recorte tambem e outro, e a troca acontece no <picture> do HTML: entra
   o retrato de 0,55, com o rosto na parte de cima, para que o texto caia
   sobre o tronco escuro. A fronteira e 700px nos DOIS lugares, e ela tem
   que continuar igual nos dois: se o `media` do <source> e este @media
   discordarem, existe uma faixa de largura que recebe o veu de um
   enquadramento com a foto do outro. */
@media (max-width: 700px) {
  /* O veu do TOPO fica nos dois recortes: o cabecalho grudado passa por
     cima da foto no celular igual, e la ele ate cobre uma fatia maior da
     imagem, porque a tela e mais baixa. Esquecer ele aqui seria consertar
     o contraste so no computador, que e onde ninguem compra. */
  .heroi__foto::after { background: var(--veu-capa-topo), var(--veu-capa-y-estreito); }
  /* O retrato quase encaixa no quadro do celular, entao sobra pouca folga
     vertical e este numero mal se move. Ele fica por causa das telas mais
     largas que 0,55, onde a folga existe. */
  .heroi__foto img    { object-position: 50% 30%; }
}

/* ---- 01 / A regra: o bloco claro do manifesto ----
   Grid do documento: coluna estreita para o rotulo, coluna larga para o
   texto, e muito espaco negativo. */
.regra { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 var(--s7); }
/* SO layout, nenhuma cor. A primeira versao pintava `.regra__texto p` com a
   cor do bloco claro, e a classe e usada tambem na secao 03, que e preta:
   o texto ficou preto sobre preto, quase invisivel. Quem diz a cor e a
   classe do texto (`.corpo`), que ja sabe inverter dentro de `.faixa--claro`.
   Regra de layout nao pinta. */
.regra__texto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s7); max-width: 920px; }
.regra__link { margin-top: var(--s6); }
@media (max-width: 900px) {
  .regra { grid-template-columns: 1fr; gap: var(--s5); }
  .regra__texto { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s5); }
}

/* ---- 04 / A ordem: os quatro principios ----
   Quatro colunas sob a regua de 2px, numeradas. O design system punha um
   icone de traco de 1px em cada uma; aqui e o NUMERO que abre a coluna, e
   nao um icone. Motivo: nao existe linguagem de icone desenhada para esta
   marca, e inventar quatro simbolos agora seria decorar, que e o que o
   documento proibe. O numero ja e o motivo grafico do sistema inteiro. */
.ordem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.ordem__num {
  display: block;
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-micro); letter-spacing: .12em; color: var(--paper-miudo);
}
.ordem__titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: var(--tk-rotulo); text-transform: uppercase;
  margin-top: var(--s4);
}
.ordem__texto { font-size: var(--fs-sm); color: var(--paper-apoio); margin-top: var(--s2); }
@media (max-width: 900px) { .ordem { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
@media (max-width: 520px) { .ordem { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---- 05 / O som: a porta da playlist ----
   O quadro e da MESMA especie do quadro 4:5 da peca: fundo de moldura,
   `overflow: hidden` e o conteudo crescendo dentro dele no hover. Isso e de
   proposito, e nao economia: se a playlist parecesse um componente novo, ela
   pareceria um widget colado num site editorial. Parecendo um quadro, ela
   pertence.

   A ALTURA E A DO TOCADOR DO SPOTIFY, e e a mesma da porta fechada. Quando a
   porta abre, o tocador ocupa exatamente o mesmo retangulo: nada na pagina
   muda de lugar (FUNDACAO.md 10, nada de layout pulando). Foi essa restricao
   que decidiu o desenho da porta, e nao o contrario. */
.som__porta {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; max-width: var(--som-largura);
  height: var(--som-altura);
  padding: var(--s5);
  background: var(--quadro);
  border: 1px solid var(--fio);
  overflow: hidden;
}
/* O mesmo "L" sangrando do hero, na mesma opacidade. E ele que faz o campo
   preto ler como superficie da marca, e nao como imagem que falhou. */
.som__mark {
  position: absolute; right: -6%; bottom: -12%;
  height: 96%; width: auto;
  opacity: .07;
  pointer-events: none; user-select: none;
}
/* O triangulo de tocar, desenhado com borda, como todas as setas do site.
   Nao e icone decorativo (que o design system proibe): e o unico simbolo
   que diz "isto toca", e ele carrega a funcao, nao o enfeite. */
.som__toque {
  width: 0; height: 0; flex: none;
  border-left: 15px solid var(--paper);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-bottom: var(--s4);
}
/* Mesma tipografia do nome da peca: a porta e um objeto da mesma familia. */
.som__rotulo {
  position: relative;
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-h3); letter-spacing: var(--tk-nome);
  text-transform: uppercase; line-height: 1.15;
}
.som__fonte {
  position: relative;
  margin-top: var(--s2);
  font-size: var(--fs-micro); font-weight: var(--peso-forte);
  letter-spacing: var(--tk-rotulo); text-transform: uppercase;
  color: var(--paper-miudo);
}
/* O tocador entra no lugar exato da porta: mesma largura, mesma altura, e por
   isso nada na pagina muda de lugar quando a porta abre.

   ELE NAO GANHA MOLDURA, E ISSO FOI MEDIDO. O tocador do Spotify nao preenche
   o quadro que recebe: com 640 de largura ele desenha um cartao de ~152px no
   alto e deixa o resto transparente. Com moldura, esses ~200px viram um buraco
   desenhado na tela. Sem moldura, eles sao o mesmo preto da secao e ninguem os
   ve: o cartao do Spotify fica pousado na faixa, que e o que ele e.

   E POR QUE A ALTURA CONTINUA 352 E NAO 152, que e o que ele desenha aqui:
   o tocador e responsivo. Em coluna estreita ele troca para um cartao VERTICAL,
   bem mais alto. Foi tentado apertar a janela para 152 e o resultado foi o
   cartao do celular decepado no meio. A altura tem que caber no pior caso, e o
   espaco que sobra no melhor caso nao custa nada porque e invisivel.

   O `border-radius` existe para desfazer os 12px que vem escritos no codigo
   que o Spotify entrega: raio zero e a regra inviolavel numero um do sistema. */
.som__quadro {
  display: block; border: 0; background: transparent;
  width: 100%; max-width: var(--som-largura);
  height: var(--som-altura);
  border-radius: var(--raio);
}
@media (max-width: 560px) {
  .som__porta { padding: var(--s4); }
}

/* ---- 06 / Como se compra: a lista de oficio ----
   O padrao "04 / Engineering" do documento: numero na coluna estreita,
   texto na larga, regua de 1px separando. Aqui ele carrega a unica
   informacao de servico que o site tem, e ela e verdadeira. */
.oficio__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--fio);
}
.oficio__item:last-child { border-bottom: 1px solid var(--fio); }
.oficio__num {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-micro); letter-spacing: .12em; color: var(--paper-miudo);
  padding-top: 3px;
}
.oficio__titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: var(--tk-rotulo); text-transform: uppercase;
}
.oficio__texto { font-size: var(--fs-sm); color: var(--paper-apoio); margin-top: var(--s2); max-width: 52ch; }
@media (max-width: 520px) { .oficio__item { grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--s3); } }

/* ---- Campanha: a assinatura fechando a pagina ---- */
.campanha__apoio { margin-top: var(--s5); max-width: 40ch; }
.campanha__link  { margin-top: var(--s5); }

/* ============================================================
   PAGINA DA MARCA
   ============================================================ */
.marca-abertura { max-width: 46ch; margin-top: var(--s5); }

/* O manifesto e um poema, e quebra de linha e parte dele. Ele vive numa
   chave so do dicionario, com \n dentro, e quem respeita as quebras e o
   pre-line: partir em dez chaves faria a traducao perder o ritmo, que e
   justamente o que o texto tem de valor. */
.manifesto {
  white-space: pre-line;
  font-size: var(--fs-corpo-g);
  line-height: 1.75;
  color: var(--ink-corpo);
  max-width: 44ch;
  margin-top: var(--s6);
}
.manifesto__assinatura {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-h2); letter-spacing: var(--tk-display); text-transform: uppercase;
  margin-left: var(--optico); margin-top: var(--s6);
}

/* O que defendemos e o que combatemos. E uma TABELA de verdade, e nao duas
   colunas de <div>: sao dois cabecalhos governando cinco pares, e e isso que
   uma tabela diz para quem navega por leitor de tela. O <th> tambem resolve
   o celular sem gambiarra: a coluna continua anunciada, e nao precisa de
   rotulo repetido em ::before com attr(), que seria texto de interface
   escrito no HTML e fora do dicionario.

   Ela nao PARECE tabela: sem fundo, sem borda vertical, so as reguas do
   sistema. E o mesmo desenho da lista de oficio, com duas colunas. */
.valores { width: 100%; border-collapse: collapse; text-align: left; }
.valores th {
  padding: 0 var(--s5) var(--s3) 0;
  border-bottom: 2px solid var(--regua);
  font-family: var(--fonte); font-weight: var(--peso-forte);
  font-size: var(--fs-micro); letter-spacing: var(--tk-rotulo);
  text-transform: uppercase; color: var(--paper-miudo);
  width: 50%;
}
.valores td {
  padding: var(--s4) var(--s5) var(--s4) 0;
  border-bottom: 1px solid var(--fio);
  vertical-align: top;
  color: var(--paper-corpo);
}
.valores td:last-child, .valores th:last-child { padding-right: 0; }
/* O lado que a marca combate fica em tom mais baixo. Sem cor de erro: num
   sistema preto e branco, quem diz "este e o lado errado" e o VALOR de
   cinza, nao o vermelho. */
.valores__contra { color: var(--paper-miudo); }
@media (max-width: 700px) {
  .valores td, .valores th { padding-right: var(--s3); font-size: var(--fs-sm); }
}

.marca-bloco { max-width: var(--largura-texto); }
.marca-bloco p + p { margin-top: var(--s4); }

/* ============================================================
   LISTA DE PECAS
   ============================================================ */
.filtros { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filtro {
  min-height: var(--alvo); padding: 0 var(--s4);
  display: inline-flex; align-items: center;
  border: 1px solid var(--fio-vivo); border-radius: var(--raio);
  background: transparent; cursor: pointer;
  font-size: var(--fs-micro); font-weight: var(--peso-forte);
  letter-spacing: var(--tk-rotulo); text-transform: uppercase;
  color: var(--paper-miudo);
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
/* Marcado = invertido, igual ao seletor de tamanho. Um sistema, um jeito de
   dizer "este esta escolhido". */
.filtro[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* No hover o filtro nao marcado PREENCHE ate este mesmo desenho, que e a
   previa exata do que o clique faz. Varredura no movimento.css. */

/* ============================================================
   PAGINA DA PECA
   Registro OFICIO do comeco ao fim: nenhuma frase de manifesto aqui.
   Quem chegou no botao de comprar ja foi convencido, e continuar
   convencendo derruba a venda (MARCA.md 9.3).
   ============================================================ */
.voltar {
  display: inline-flex; align-items: center; gap: var(--s2);
  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);
}
.voltar::before { content: ""; width: 7px; height: 7px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: rotate(45deg); }
/* hover: movimento.css */

/* Sem padding embaixo: a .faixa que envolve esta pagina ja da o respiro. */
.peca {
  padding-block: var(--s5) 0;
  display: grid; gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .peca { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: var(--s8); }
  .peca__foto { position: sticky; top: calc(var(--altura-topo) + var(--s4)); }
}
/* `position: relative` e `overflow: hidden` sao estrutura, e as duas existem
   para o hover: uma da a moldura onde o veu do movimento.css se prende, a
   outra corta a imagem que cresce dentro dela. Sem as duas, a imagem cresceria
   por cima do texto ao lado e o veu escaparia para a pagina. */
.peca__foto { position: relative; aspect-ratio: 4 / 5; background: var(--quadro); overflow: hidden; }
.peca__foto img { width: 100%; height: 100%; object-fit: cover; }

.peca__tipo  { color: var(--paper-miudo); }
.peca__nome  { margin-top: var(--s3); }
.peca__preco { margin-top: var(--s4); font-size: 1.5rem; font-weight: var(--peso-forte); letter-spacing: var(--tk-nome); }
.peca__texto { margin-top: var(--s4); color: var(--paper-corpo); max-width: 46ch; }

/* O `.campo` (rotulo + dica + controle) SUBIU PARA O `componentes.css` em
   5/ago, quando o checkout virou o segundo lugar a usa-lo. E a regra escrita
   no topo deste arquivo: regra que aparece em duas paginas tem um dono so.
   O que fica aqui e o unico pedaco que e MESMO desta pagina: o vao acima do
   seletor de tamanho. No checkout os campos vem empilhados e um vao de 48px
   entre eles abriria o formulario no meio. */
.peca .campo { margin-top: var(--s6); }

.peca__acao { margin-top: var(--s6); }
/* A frase de apoio fica SEMPRE no fluxo, mesmo vazia, senao o botao pula de
   lugar quando ela aparece. */
.peca__acao-apoio {
  min-height: 20px; margin-top: var(--s3);
  font-size: var(--fs-sm); color: var(--paper-miudo);
}

/* A ficha usa o mesmo padrao de lista do "como se compra": regua de 1px por
   linha. Numero, nao adjetivo (MARCA.md 16.3). */
.ficha { margin-top: var(--s7); }
.ficha__titulo { margin-bottom: var(--s3); }
.ficha li {
  padding-block: var(--s3);
  border-top: 1px solid var(--fio);
  font-size: var(--fs-sm); color: var(--paper-corpo);
}
.ficha li:last-child { border-bottom: 1px solid var(--fio); }

/* ============================================================
   FINALIZAR
   ------------------------------------------------------------
   Uma pagina, tres blocos, um aberto por vez, e o resumo que nunca sai da
   tela. A estrutura veio do estudo das oito telas reais (docs/FLUXO.md 1):
   a Adidas resolve o checkout em UMA pagina com titulos empilhados, e e a
   melhor coisa dos oito prints. O que NAO veio: barra de passos (ela
   existe para justificar telas demais) e tela so para perguntar se a
   pessoa quer criar conta (nao coleta nada).

   ⚠️ AS TELAS DA NIKE E DA ADIDAS SAO BRANCAS. Daqui se copiou a HIERARQUIA
   e nada da aparencia: se esta tela parecer com a delas, ela esta errada.
   ============================================================ */
.finalizar { display: grid; grid-template-columns: 1fr; gap: var(--s6); align-items: start; }
@media (min-width: 900px) {
  .finalizar { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: var(--s8); }
  /* A coluna acompanha a rolagem: o resumo com a foto da peca fica visivel
     o tempo todo, e a pessoa continua vendo o que esta comprando enquanto
     digita (docs/FLUXO.md 1.3). */
  .finalizar__resumo { position: sticky; top: calc(var(--altura-topo) + var(--s4)); }
}
/* No celular a coluna sai e quem carrega o total e a barra fixa de baixo.
   Duas copias do resumo na mesma tela seria a mesma informacao duas vezes,
   que e o erro que a Nike comete com a quantidade (docs/FLUXO.md 1.2). */
@media (max-width: 899px) { .finalizar__resumo { display: none; } }

.resumo-caixa { border: 1px solid var(--fio); padding: var(--s5); }
.resumo-caixa__titulo { margin-bottom: var(--s4); }
/* A peca dentro do resumo: foto pequena, nome, tamanho e preco. A foto e o
   que mantem o desejo vivo enquanto se preenche formulario. */
.resumo-caixa__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); padding-bottom: var(--s4); }
.resumo-caixa__foto { aspect-ratio: 4 / 5; background: var(--quadro); overflow: hidden; }
.resumo-caixa__foto img { width: 100%; height: 100%; object-fit: cover; }
.resumo-caixa__nome {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: var(--tk-nome); text-transform: uppercase; line-height: 1.2;
}
.resumo-caixa__linha { margin-top: var(--s1); font-size: var(--fs-sm); color: var(--paper-apoio); }

/* ---- O acordeao ----
   Os tres titulos ficam SEMPRE visiveis, e e isso que responde "quantas
   telas faltam?" sem barra de passos: a pessoa ve o caminho inteiro de uma
   vez, e ele tem tres degraus. */
.bloco { border-top: 1px solid var(--fio); }
.bloco:last-of-type { border-bottom: 1px solid var(--fio); }
.bloco__cabeca { margin: 0; }
/* O cabecalho inteiro e o alvo: o numero, o titulo, o resumo e o "Editar"
   abrem o mesmo bloco. Alvo pequeno ao lado de alvo grande e onde o dedo
   erra. */
.bloco__botao {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--s3);
  width: 100%; min-height: var(--alvo);
  padding-block: var(--s4);
  background: transparent; border: 0; cursor: pointer;
  text-align: left; color: inherit;
}
.bloco__num {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-micro); letter-spacing: .12em; color: var(--paper-miudo);
}
.bloco__titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: var(--tk-rotulo); text-transform: uppercase;
}
/* O bloco concluido nao fecha em silencio: ele vira uma linha que diz o que
   ficou guardado ali dentro, e um "Editar" que devolve tudo (regra 8 do
   docs/FLUXO.md 2: voltar e sempre um clique e nunca perde o que foi
   digitado). */
.bloco__resumo {
  grid-column: 2; grid-row: 2;
  font-size: var(--fs-sm); color: var(--paper-apoio);
  margin-top: var(--s1);
  overflow-wrap: anywhere;
}
.bloco__editar {
  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);
}
.bloco[data-estado="aberto"] .bloco__titulo { color: var(--paper); }
/* ⚠️ "EDITAR" SO EXISTE ONDE HA O QUE EDITAR, e a regra aqui era outra: ela
   escondia o rotulo no bloco ABERTO, o que deixava os dois blocos ainda
   FECHADOS anunciando "Editar" antes de a pessoa ter digitado uma letra
   neles. Um "Editar" num bloco vazio promete que ha alguma coisa guardada
   ali dentro, e nao ha. A condicao certa e a mesma do resumo da linha de
   baixo: so no bloco PRONTO.
   Continua sendo `visibility` e nao `display` de proposito: a coluna do
   grid segue reservada, e o titulo nao anda para o lado quando o bloco
   muda de estado (docs/DESIGN.md: nada de layout pulando). */
.bloco:not([data-estado="pronto"]) .bloco__editar { visibility: hidden; }
.bloco:not([data-estado="pronto"]) .bloco__resumo { display: none; }
.bloco__corpo { padding-bottom: var(--s6); }
.bloco[data-estado="aberto"] .bloco__corpo { display: block; }
.bloco:not([data-estado="aberto"]) .bloco__corpo { display: none; }
/* A FOLGA ENTRE UM CAMPO E O PROXIMO.
   ------------------------------------------------------------
   O `>` e obrigatorio, e nao gosto: dentro de um `.campo-par` existem DOIS
   `.campo` irmaos, e eles vivem lado a lado numa linha de grid. Escrito como
   descendente, o seletor daria `margin-top` ao segundo deles (o UF, o
   complemento) e desalinharia a dupla que existe justamente para andar
   junta. Filho direto e o que separa "campos empilhados" de "campos na
   mesma linha".

   ⚠️ A CONSEQUENCIA DISSO, e ela custou um defeito: quem agrupa campos
   PRECISA carregar `bloco__campos`, senao os campos dentro do agrupador
   viram netos e nao casam com regra nenhuma. Foi o que aconteceu com o
   quadro de endereco do CEP (`#enderecoCampos`): quatro campos empilhados
   com folga ZERO, cada rotulo colado na caixa de cima. O agrupador ganhou a
   classe, e o remedio para o proximo e o mesmo.

   `.campo-par + .campo-par` fechou o quarto par da lista: era o unico que
   faltava, e ele e exatamente o que acontece duas vezes no endereco
   (cidade/UF em cima de numero/complemento). */
.bloco__campos > .campo + .campo,
.bloco__campos > .campo + .campo-par,
.bloco__campos > .campo-par + .campo,
.bloco__campos > .campo-par + .campo-par { margin-top: var(--s4); }

/* ⚠️ E O AGRUPADOR TAMBEM PRECISA DA FOLGA, e o paragrafo acima so contou
   metade da historia. Dar `bloco__campos` ao `#enderecoCampos` consertou os
   campos DENTRO dele; o quadro inteiro continuou nascendo colado no que vem
   em cima, porque um `<div>` nao e `.campo` nem `.campo-par` e nao casava com
   nenhuma das quatro linhas da lista.

   No Brasil o defeito ficou escondido atras da frase "nao sei o CEP": ela
   mora entre os dois e a margem dela empurrava o quadro 16px para baixo, o
   que parece folga e nao e. Com o pais fora do Brasil essa frase e escondida
   (ela fala dos Correios), a ultima almofada sai e MEDIDO na tela alema o vao
   era ZERO: o rotulo ENDERECO nascia encostado na caixa do codigo postal.

   Por isso a regra e de FILHO, e nao de irmao adjacente: o que decide a folga
   e "isto e um grupo de campos empilhado", e nao quem por acaso sobrou
   visivel acima dele. No Brasil as duas margens se encontram e colapsam no
   maior dos dois valores, entao la o vao vai de 16px para os mesmos 24px de
   qualquer campo, e os dois paises passam a ler igual. */
.bloco__campos > .bloco__campos { margin-top: var(--s4); }
.bloco__acao { margin-top: var(--s5); }
@media (min-width: 600px) { .bloco__acao .btn { width: auto; } }

/* ---- Os dois meios de pagamento ----
   Dois blocos grandes lado a lado, NENHUM pre-marcado (FUNDACAO.md 10).
   Mesma inversao do chip de tamanho e do filtro: marcado e claro. Um
   sistema, um jeito de dizer "este esta escolhido". */
.meios { display: flex; flex-wrap: wrap; gap: var(--s3); }
.opcao { position: relative; flex: 1 1 140px; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao__caixa {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--s7);
  padding: var(--s3);
  border: 1px solid var(--fio-vivo); border-radius: var(--raio);
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: var(--tk-botao); text-transform: uppercase;
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.opcao input:checked + .opcao__caixa { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.opcao input:focus-visible + .opcao__caixa { outline: 2px solid var(--paper); outline-offset: 3px; }
/* hover: movimento.css */

/* ---- A barra fixa do celular ----
   O total nunca sai da tela (docs/FLUXO.md 2, regra 7). Ela some no
   computador, onde quem carrega o total e a coluna. */
.barra-total {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--preto);
  border-top: 1px solid var(--fio);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .barra-total { display: none; } }
.barra-total__abrir {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: var(--barra-altura);
  padding-inline: var(--margem);
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font-size: var(--fs-micro); font-weight: var(--peso-forte);
  letter-spacing: var(--tk-rotulo); text-transform: uppercase;
  color: var(--paper-miudo);
}
.barra-total__valor {
  margin-left: auto;
  font-size: var(--fs-body); font-weight: var(--peso-forte);
  letter-spacing: var(--tk-nome); color: var(--paper);
}
/* A seta aponta para cima quando fechada (o painel sobe) e vira para baixo
   quando aberta. E a mesma seta desenhada com borda do resto do site. */
.barra-total__seta {
  width: 8px; height: 8px; flex: none;
  border-top: 1.5px solid var(--paper-miudo); border-right: 1.5px solid var(--paper-miudo);
  transform: rotate(-45deg);
  transition: transform var(--transicao);
}
.barra-total__abrir[aria-expanded="true"] .barra-total__seta { transform: rotate(135deg); }
.barra-total__painel { padding: var(--s4) var(--margem); border-bottom: 1px solid var(--fio); }
/* O respiro embaixo da pagina tem a altura da barra: sem ele o ultimo
   campo nasce debaixo dela e ninguem consegue tocar. */
@media (max-width: 899px) { .pagina-com-barra { padding-bottom: var(--barra-altura); } }

/* ============================================================
   PEDIDO
   A tela que TODO MUNDO ve, tenha o pagamento dado certo ou nao
   (docs/FLUXO.md 4.7). Ela le o servidor, e nunca a volta do provedor.
   ============================================================ */
.pedido { max-width: 720px; }
.pedido__numero {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-h3); letter-spacing: .12em;
  margin-top: var(--s4);
}
.pedido__passos { margin-top: var(--s7); }
.pedido__passo {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--fio);
}
.pedido__passo:last-child { border-bottom: 1px solid var(--fio); }
.pedido__passo-num {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-micro); letter-spacing: .12em; color: var(--paper-miudo);
  padding-top: 3px;
}
.pedido__passo-titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: var(--tk-rotulo); text-transform: uppercase;
}
.pedido__passo-texto { font-size: var(--fs-sm); color: var(--paper-apoio); margin-top: var(--s2); max-width: 52ch; }
.pedido__resumo { margin-top: var(--s7); max-width: 420px; }
.pedido__acoes { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* ============================================================
   A PORTA DA CONTA  ·  /entrar
   ------------------------------------------------------------
   Um documento so, dois passos. Nenhum componente novo alem do que ja
   existe: o campo e o do `js/formulario.js`, o botao e o `.btn`, o aviso e
   o `.aviso` do checkout, e a linha do e-mail com "Trocar" e o mesmo
   desenho do `.bloco__resumo` mais `.bloco__editar` de la.

   ⚠️ A COLUNA E ESTREITA DE PROPOSITO. Campo de digitar largo demais e o
   defeito classico de formulario em tela grande: a pessoa perde a linha
   entre o rotulo, a caixa e o botao. `--largura-texto` e a mesma medida de
   leitura que o resto do site usa.
   ============================================================ */
.entrar { max-width: var(--largura-texto); }

/* ⚠️ A REGUA DESTA PAGINA ESTAVA COLADA NO FORMULARIO, e o Bruno pegou
   olhando em 8/ago: 48px em cima dela e 8px embaixo. Um divisor com espaco de
   um lado so para de dividir e vira sublinhado do paragrafo de cima — e do
   outro lado ele encosta em "NOME", que e o primeiro rotulo do formulario.

   OS 8px NAO ERAM UMA ESCOLHA: sao a margem de fabrica do `<hr>` (0.5em), que
   nao esta na escala do `tokens.css` e ninguem escreveu. Em cima ela some,
   porque a margem de 48px do `esp-6` e maior e as duas colapsam; embaixo ela
   ficava sozinha, e era tudo o que havia.

   A CORRECAO E O IDIOMA DA CASA, e nao uma classe nova. As classes `.esp-*`
   sao margem DE CIMA e so, porque neste sistema quem declara o espaco e o que
   vem DEPOIS. Quando o que vem depois nao pode carregar a classe (aqui o
   `#entrar` e escrito pelo `js/entrar.js`), o site ja resolve com o irmao
   adjacente — ver `.regua + .grade` e `.regua + .secao__corpo` la em cima,
   que sao esta mesma regra para a /produtos e para a home. O `/finalizar`
   nao precisa de linha aqui porque la o `esp-6` esta no HTML, no proprio
   `.finalizar`. Esta pagina era a unica das tres que tinha ficado de fora.

   48 em cima e 48 embaixo: a regua volta a ficar no meio do vao que ela
   separa, que e a unica posicao em que um divisor divide. */
.regua + .entrar { margin-top: var(--s6); }

/* ============================================================
   A CENA DIVIDIDA DA /entrar  (6 de agosto)
   ------------------------------------------------------------
   O DEFEITO QUE ISTO CONSERTA, e ele foi MEDIDO antes de virar CSS: numa
   janela de 1440 a `<hr class="regua">` desta pagina tinha 1305px e tudo
   que vinha embaixo dela tinha 495px. Oitocentos e dez pixels de regua
   apontando para nada. A regua e a gramatica de secao do site inteiro
   (docs/DESIGN.md 4.1: "nao troque regua por espaco vazio"), e aqui ela
   estava anunciando uma largura que o conteudo nunca usava.
   E a /entrar era a UNICA pagina do caminho de compra em uma coluna so:
   `.peca` e 1.1fr/0.9fr, `.finalizar` e 1.15fr/0.85fr, `.regra` e
   200px/1fr. Ela nao parecia simples, parecia inacabada, e a diferenca
   entre as duas coisas e exatamente esta.

   ⚠️ NADA DISTO EXISTE ABAIXO DE 1100px, e nao e economia. Medido: no
   celular esta tela JA preenche a janela e a regua ja bate com a largura
   do conteudo. La nao ha coluna vazia para a foto ocupar, e por a foto
   assim mesmo empurraria o campo para baixo da dobra. O enquadramento
   serve a tela; quando a tela nao pede, nao ha enquadramento.

   O CORTE E 1100 E NAO 900: com 900 a coluna de leitura (54ch, cerca de
   495px) mais a margem terminava a 4px da foto. Quatro pixels nao sao
   folga, sao sorte.
   ============================================================ */
.entrar-cena { position: relative; overflow: hidden; }

/* ⚠️ A UNICA PAGINA DO SITE QUE NAO USA O RESPIRO DE FAIXA CHEIO, e a excecao
   e a decisao (7 de agosto).

   `.faixa` da `padding-block: var(--s8)`, 96px em cima e 96px embaixo. Esse e
   o respiro de uma SECAO DE LEITURA, e ele esta certo em toda faixa que existe
   para ser lida. Esta faixa existe para uma TAREFA, e a tarefa tem um fim
   visivel: o botao. Cento e noventa e dois pixels de nada, numa janela de
   laptop de 760px, e um quarto da tela gasto para empurrar o botao para fora
   dela.

   MEDIDO, no passo do codigo, janela de 1440x760: com 96px fixos o botao
   terminava em 767. Com este clamp o respiro vira 61px, o botao termina em
   683, e sobram 77px de folga.

   O CLAMP, E POR QUE ELE E EM `vh` E NAO EM PASSO DE ESCALA: o que aperta
   aqui e a ALTURA da janela, e nenhum token de espaco sabe disso. Numa janela
   alta (1200px ou mais) `8vh` passa de 96 e o `clamp` devolve `--s8`, entao a
   pagina volta a ser exatamente a de ontem. Quem encolhe e so quem nao tinha
   espaco.

   ⚠️ `--s5` E O PISO, E ELE NAO E ARBITRARIO: e o mesmo passo que separa o
   titulo do corpo dentro da coluna. Abaixo dele a faixa deixaria de ter
   respiro e passaria a ter aperto, e o campo encostaria no cabecalho. */
.entrar-cena { padding-block: clamp(var(--s5), 8vh, var(--s8)); }

/* A coluna de leitura e a MESMA `--largura-texto` que o `.corpo` e o
   `.entrar` ja usavam. O que ela acrescenta e a regua: sem isto ela
   continuaria indo ate a beirada da calha, que era o defeito. */
.entrar-cena__coluna { max-width: var(--largura-texto); }

/* A foto so aparece a partir de 1100px, entao o slot inteiro nasce
   escondido: em telas pequenas ele nem entra na conta do layout, e o
   <picture> com `media` nao chega a pedir arquivo nenhum. */
.entrar-cena__foto { display: none; }

@media (min-width: 1100px) {
  /* A altura vem daqui e nao do conteudo: sem ela a cena teria a altura do
     formulario, que sao uns 640px, e a foto ficaria uma tira. E a mesma
     familia de medida do hero (`clamp(520px, 76vh, 820px)`).

     ⚠️ ESTE NUMERO E METADE DO ENQUADRAMENTO DA FOTO. Ele decide a altura da
     coluna, a coluna decide a razao da caixa, e a razao da caixa e o que o
     corte do `tratar-foto-entrar.sh` persegue. Mexer aqui sem recortar a foto
     de novo poe o `cover` para comer o cume da montanha, que foi exatamente o
     que aconteceu na primeira montagem. Os dois numeros andam juntos. */
  .entrar-cena {
    min-height: clamp(600px, 82vh, 900px);
    display: flex; flex-direction: column; justify-content: center;
  }

  /* A calha sobe de camada. Sem isto a foto, que vem antes no HTML, ainda
     ficaria atras por ordem de pintura, mas qualquer mudanca futura de
     ordem quebraria isso em silencio. */
  .entrar-cena__calha { position: relative; z-index: 1; }

  .entrar-cena__foto {
    display: block;
    position: absolute; top: 0; right: 0; bottom: 0;
    width: clamp(320px, 42vw, 860px);
    /* O mesmo fundo do `.heroi__foto`: e o que se ve enquanto o arquivo
       desce, e e o que fica se ele nao descer. */
    background: var(--quadro);
  }
  .entrar-cena__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* ⚠️ ANCORADO EMBAIXO, E ESTE NUMERO PROTEGE O "L" DA MANGA.
       Com o corte em 0,78 dentro de uma caixa de 0,82 a 0,90, quem sobra e
       ALTURA, e o `cover` tira das duas pontas na proporcao deste numero.
       O "L" vive nos 10% de baixo do quadro, e ele e o motivo de a imagem
       existir: em 50% ele encostava na beirada de baixo numa janela de 1920.
       Em 88% quase toda a sobra sai do TOPO, que aqui e ceu.
       O `tratar-foto-entrar.sh` ja tinha aparado 223px por cima pelo mesmo
       motivo. Os dois numeros trabalham juntos, e mexer em um pede conferir
       o outro na tela. */
    object-position: 50% 88%;
    display: block;
  }

  /* ⚠️ A DIVISORIA E UM CORTE LIMPO, E NAO UM ESFUMADO. Decisao do Bruno,
     6 de agosto.

     A primeira montagem tinha aqui um `::after` com gradiente de --ink ate
     nada em 140px na beirada esquerda. A intencao era costurar a foto na
     pagina onde ela e clara. Na tela ele lia como borrao, e nao como
     desenho: o site inteiro tem raio zero, sombra nenhuma e regua de 1px e
     2px (docs/DESIGN.md 4.1), e uma unica borda esfumada no meio disso
     denuncia a si mesma. Corte reto e o que o resto do sistema faz.

     ⚠️ ENTAO QUEM COSTURA A FOTO AGORA E SO O TRATAMENTO DO ARQUIVO. O
     `tratar-foto-entrar.sh` ancora o preto da foto em --ink, que e o preto
     desta pagina, e e por isso que aquele passo nao pode sair junto com o
     `hue=s=0` no dia em que alguem for mexer nele de novo. Sem ancora e sem
     gradiente, a foto vira um retangulo colado.

     ⚠️ NAO EXISTE TEXTO SOBRE ESTA FOTO, e por isso nada aqui entra na
     conta do `publicar/medir-contraste.js`. O formulario mora na coluna da
     esquerda, sobre --ink chapado, onde todo token ja foi medido. No dia em
     que alguem escrever qualquer coisa em cima da foto, medir volta a ser
     obrigatorio. */
}

/* A linha do passo 2: o e-mail que ficou guardado, e o caminho de volta.
   Voltar e sempre um clique, e nunca perde o que foi digitado (regra 8 do
   docs/FLUXO.md 2): o "Trocar" devolve o passo 1 com o e-mail no campo. */
/* ⚠️ SO O FIO DE BAIXO. Ela nasce logo depois da `<hr class="regua">` da
   pagina, e com borda em cima o desenho ficava com duas linhas paralelas a
   dois pixels uma da outra, que e o tipo de detalhe que nao se ve escrevendo e
   grita na tela. */
.entrar__quem {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--fio);
}
.entrar__email {
  font-size: var(--fs-sm); color: var(--paper-corpo);
  overflow-wrap: anywhere;
}
.entrar__acoes {
  margin-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
  /* ⚠️ ISTO NAO E MARGEM, E ELE NAO OCUPA ESPACO NENHUM NO DESENHO. E o
     respiro que o `scrollIntoView` do `js/entrar.js` deve deixar embaixo do
     botao quando precisar rolar para mostra-lo.

     Sem ele, medido numa janela de 1440x640: a rede de seguranca funcionava,
     mas parava com o botao ENCOSTADO na beirada de baixo, com zero pixel de
     folga. Botao colado na borda continua parecendo botao cortado, que era
     justamente o defeito. `block: 'nearest'` para exatamente onde este numero
     mandar, entao a folga se declara aqui e nao em conta dentro do JS. */
  scroll-margin-block-end: var(--s5);
}

/* ============================================================
   DENTRO DA CONTA  ·  /conta  e as tres secoes dela
   ------------------------------------------------------------
   NADA de nivel, ponto, selo ou ranking: o MARCA.md 4 proibe com essas
   palavras "comparacao entre membros, ranking, quem e mais", e uma tela de
   conta e onde isso costuma entrar de brinde.

   ⚠️ TODA A SECAO ABAIXO NAO INVENTA UM COMPONENTE. A porta do painel, a
   linha de pedido e o cartao de endereco sao a MESMA gramatica: fio em cima,
   sem cartao, sem fundo, sem sombra. Cartao com sombra e o que o design
   system chama de "template de e-commerce", e tres desenhos diferentes para
   tres listas dentro da mesma conta seria o site falando tres linguas.
   ============================================================ */
.conta-tela { max-width: 720px; }
.conta-tela__acoes {
  margin-top: var(--s7);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
}

/* ------------------------------------------------------------
   O CAMINHO DE VOLTA  (7 de agosto)
   ------------------------------------------------------------
   Ele fica ACIMA do titulo, e nao ao lado: ao lado, ele disputa a linha com o
   display de 42px e o titulo perde a primeira posicao da leitura.

   ⚠️ E ELE E UM LINK PARA /conta, NUNCA um `history.back()`. Quem chegou aqui
   por link compartilhado, marcador ou endereco digitado nao tem para onde
   voltar, e o botao nao faria nada. O porque esta no js/conta.js.
   ------------------------------------------------------------ */
.conta-voltar {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: var(--alvo);
  font-size: var(--fs-sm); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-apoio);
  transition: color var(--transicao);
}
/* A mesma seta desenhada com borda do resto do site, virada para a esquerda.
   `content` vazio nao e lido por leitor de tela, e "←" seria: quem diz o que o
   link faz e a palavra ao lado dela. */
.conta-voltar__seta {
  width: 8px; height: 8px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* ------------------------------------------------------------
   AS PORTAS DO PAINEL  (7 de agosto)
   ------------------------------------------------------------
   Tres portas, e o `Sair` NAO e uma delas: ele fica fora da lista, depois de
   uma regua, sem seta. A referencia que pediu esta tela (a Renner) o poe como
   ultima linha do mesmo menu, e numa lista de linhas iguais o dedo que mira a
   terceira erra na quarta. Sair e a unica coisa desta tela que nao se desfaz
   com um clique.
   ------------------------------------------------------------ */
/* ⚠️ O ESPACO DE CIMA E DECLARADO AQUI, E NAO POR UMA `esp-N` NO HTML, e a
   razao foi medida em 8/ago. Quando a regua de 2px saiu daqui (ela e o fio da
   primeira porta liam como defeito, a 8px uma da outra), o `esp-6` que era
   dela passou para a `<ul>` — e nao apareceu. Vao medido: **0px**. O
   `margin: 0` desta mesma regra apagava o utilitario, porque os dois tem a
   mesma especificidade e o `paginas.css` carrega DEPOIS do `base.css`.

   E o projeto ja tinha pago por isso: em 7/ago o `.conta-genero { margin: 0 }`
   matou um `esp-5` na mesma tela, pelo mesmo caminho. **Zerar por atalho apaga
   lados que ninguem queria apagar.** Entao aqui se zera o que o navegador poe
   e que atrapalha (o de baixo e o recuo), e o de cima passa a ser uma decisao
   escrita, que nenhuma utilitaria precisa vir corrigir depois. */
.conta-portas { list-style: none; padding: 0; margin: var(--s6) 0 0; }
.conta-porta { border-top: 1px solid var(--fio); }
.conta-porta:last-child { border-bottom: 1px solid var(--fio); }

/* O link ocupa a LINHA INTEIRA, e nao so a palavra: alvo pequeno ao lado de
   espaco vazio clicavel e onde o dedo erra. */
.conta-porta__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 8px;
  align-items: center; gap: 0 var(--s4);
  min-height: var(--alvo);
  padding-block: var(--s4);
  color: var(--paper);
}
.conta-porta__nome {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: .12em;
}
/* A contagem e apoio, e apoio nao disputa peso com o que identifica a porta.
   Ela so nasce quando existe: "Meus pedidos · 0" e a tela dizendo a uma pessoa
   que ela nunca comprou, toda vez que ela abre a conta (js/conta.js). */
.conta-porta__apoio { font-size: var(--fs-sm); color: var(--paper-apoio); }

/* ------------------------------------------------------------
   MEU CADASTRO  (7 de agosto)
   ------------------------------------------------------------
   ⚠️ NENHUM COMPONENTE NOVO AQUI, e isso e a coesao inteira. O campo e o
   `.campo` do `js/formulario.js`, a grade de dois e o `.campo-par` do
   checkout, o genero e o `.tamanhos` do seletor de tamanho da peca, e o
   aceite e o `.aceite` do checkout. A referencia que pediu esta tela (a
   Renner) usa borda so embaixo, icone dentro do campo e radio redondo; os
   tres sao desenhos de OUTRO sistema, e trazer qualquer um criaria uma
   segunda gramatica de formulario dentro do mesmo site.
   ------------------------------------------------------------ */

/* O `fieldset` do navegador vem com borda, margem e padding proprios, e
   nenhum deles combina com nada aqui. Zerar e a unica forma de usar a
   semantica sem herdar o desenho de 1996.

   ⚠️ MAS `margin: 0` MATAVA O ESPACAMENTO DA TELA, e este e o defeito que o
   Bruno viu: o bloco do genero nascia GRUDADO no campo de nascimento. O
   `.esp-5` do HTML e `margin-top`, e ele tem a mesma especificidade que esta
   regra; como o `paginas.css` carrega DEPOIS do `componentes.css`, o `margin: 0`
   daqui ganhava e o respiro sumia. Medido antes do conserto: 0px de vao,
   contra 32px entre todos os outros pares da mesma tela.

   Por isso zera-se so o que o navegador poe de fato (`margin-inline: 2px` no
   fieldset), e o topo fica livre para quem espaca. ⚠️ Regra que sobrou, e ela
   vale para o site inteiro: ZERAR ATALHO (`margin: 0`) APAGA LADOS QUE
   NINGUEM QUERIA APAGAR. Se um espaco declarado nao aparecer, procure quem o
   zerou antes de aumentar o numero. */
.conta-genero { border: 0; padding: 0; margin-inline: 0; margin-bottom: 0; min-width: 0; }
/* `legend` nao aceita `display: flex` de forma confiavel entre navegadores,
   entao o `.campo__rotulo` perde o flex aqui e a dica vira uma palavra depois
   do rotulo. O respiro e o MESMO `--s3` do `gap` do flex la do componente, de
   proposito: a distancia entre rotulo e "opcional" tem que ser uma so no site
   inteiro, tenha ela vindo de `gap` ou de `margin`. */
.conta-genero .campo__rotulo { display: block; }
.conta-genero .campo__dica { margin-left: var(--s3); }

/* O botao e a confirmacao na mesma linha: a frase nasce vazia e so aparece
   depois de o servidor responder, entao ela nao pode empurrar o botao quando
   chegar. `align-items: center` alinha as duas alturas diferentes. */
.conta-tela__salvar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
}

/* A lista de pedidos usa a mesma gramatica da ficha e dos passos do pedido:
   linhas separadas por fio, sem cartao e sem fundo. Cartao com sombra e o
   que o design system chama de "template de e-commerce". */
.conta-pedidos { list-style: none; padding: 0; margin: 0; }
.conta-pedido { border-top: 1px solid var(--fio); }
.conta-pedido:last-child { border-bottom: 1px solid var(--fio); }

/* O link ocupa a LINHA INTEIRA, e nao so o numero: alvo pequeno ao lado de
   espaco vazio clicavel e onde o dedo erra. */
.conta-pedido__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 8px;
  align-items: baseline; gap: 0 var(--s4);
  min-height: var(--alvo);
  padding-block: var(--s4);
  color: var(--paper);
}
.conta-pedido__numero {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: .12em;
}
/* A data e o estado ficam embaixo do numero, na mesma coluna dele: sao
   informacao de apoio, e apoio nao disputa a linha com o que identifica. */
.conta-pedido__meta {
  grid-column: 1; grid-row: 2;
  margin-top: var(--s1);
  font-size: var(--fs-sm); color: var(--paper-apoio);
}
.conta-pedido__total {
  grid-column: 2; grid-row: 1;
  font-size: var(--fs-sm); font-weight: var(--peso-forte);
  letter-spacing: var(--tk-nome);
}
/* A mesma seta desenhada com borda do resto do site, e nao o caractere:
   `content` vazio nao e lido por leitor de tela, e "→" seria. Quem diz o que
   o link faz e o <span class="sr"> ao lado dela.

   ⚠️ UMA GEOMETRIA, DOIS NOMES. A porta do painel usa a MESMA seta, e ela esta
   escrita aqui junto em vez de repetida trinta linhas acima: duas copias da
   mesma seta divergem no dia em que alguem mexer na espessura de uma delas. */
.conta-pedido__seta,
.conta-porta__seta {
  grid-column: 3; grid-row: 1;
  align-self: center;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--paper-miudo);
  border-right: 1.5px solid var(--paper-miudo);
  transform: rotate(45deg);
  transition: border-color var(--transicao);
}
/* hover: movimento.css */

/* ============================================================
   MEUS ENDERECOS  ·  /conta/enderecos   (7 de agosto)
   ------------------------------------------------------------
   ⚠️ APAGAR AQUI NAO ENCOSTA EM PEDIDO NENHUM (docs/DADOS.md 4). Esta lista e
   a copia VIVA; o que o pedido de marco diz e a copia CONGELADA, e ela nunca
   muda. E por isso que a confirmacao de apagar nao avisa sobre o historico: o
   historico nao e afetado.
   ============================================================ */
.conta-enderecos { list-style: none; padding: 0; margin: 0; }
.conta-endereco {
  border-top: 1px solid var(--fio);
  padding-block: var(--s5);
}
.conta-endereco:last-child { border-bottom: 1px solid var(--fio); }
/* Ele recebe foco por codigo depois de salvar, e nunca pelo Tab: `tabindex`
   negativo. Sem isto, quem salva de teclado e devolvido ao comeco do documento
   e precisa reencontrar sozinho onde estava. E sem `outline` proprio ele
   receberia o foco em silencio, que e pior que nao receber. */
.conta-endereco:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* O nome e o selo na mesma linha, com o selo empurrado para longe do nome e
   nao para a borda: colado na direita ele viraria um cabecalho de tabela. */
.conta-endereco__cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4);
}
.conta-endereco__nome {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-sm); letter-spacing: .12em;
  color: var(--paper);
}
.conta-endereco__linha {
  margin-top: var(--s2);
  font-size: var(--fs-sm); color: var(--paper-apoio);
}
/* As tres acoes sao terciarias: nenhuma delas e a acao primaria desta tela. A
   primaria e "acrescentar endereco", e o FUNDACAO.md 10 permite UM primario por
   momento. Tres botoes de contorno por cartao, com quatro cartoes na tela,
   seriam doze molduras disputando a mesma atencao. */
.conta-endereco__acoes {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s4);
  /* ⚠️ AQUI NAO ENTRA MARGEM NEGATIVA, e a nota fica porque eu escrevi uma e
     ela estava errada. O raciocinio era "o `.btn--terciario` tem respiro
     lateral proprio para o alvo chegar aos 44px, entao a caixa nasce recuada
     em relacao ao nome". Medido na tela: o padding lateral dele e ZERO — a
     altura de 48px vem do `padding-block`, e nao do lateral. Com a margem, os
     tres botoes saiam 24px A ESQUERDA da coluna de leitura, encostados na
     borda da tela. Alinhamento optico se MEDE; deduzido, ele inventa o
     problema que vai consertar. */
}

/* O CEP nao ocupa a coluna inteira: campo de 8 digitos com 495px de largura
   diz a quem le que cabe muito mais coisa ali dentro. O teto e o mesmo do
   checkout. */
.conta-cep { max-width: 220px; }

/* ============================================================
   O CUPOM NO CHECKOUT  (7 de agosto)
   ------------------------------------------------------------
   ⚠️ ELE NASCE FECHADO, e o porque e de dinheiro e nao de arrumacao
   (docs/FLUXO.md 4.6): campo de cupom aberto e vazio no meio do caminho e um
   convite para a pessoa abrir outra aba e ir procurar um cupom na internet.
   Muita gente nao volta.

   ⚠️ E ELE E TERCIARIO, o mais baixo dos tres pesos de botao. Quem tem cupom
   procura e acha; quem nao tem nao pode ser lembrado, a cada compra, de que
   existe um desconto que ele nao ganhou. O FUNDACAO.md 10 so permite UM
   primario por momento, e nesta tela ele e o FINALIZAR PEDIDO.
   ============================================================ */
.cupom__porta {
  /* Alinhado com a coluna, e nao recuado: o `.btn--terciario` nao tem respiro
     lateral proprio (medido em 7/ago, quando eu supus que tinha e errei). */
  padding-inline: 0;
}
.cupom__corpo { margin-top: var(--s4); }
/* O campo e a acao lado a lado, e o campo nao ocupa a coluna inteira: codigo
   de cupom tem 12 caracteres, e uma caixa de 495px diz que cabe um paragrafo. */
.cupom__corpo .campo { max-width: 260px; }
.cupom__acao { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s4); }
/* A resposta do servidor. Ela nasce vazia e so ocupa espaco quando existe:
   `:empty` sem margem impede um vao fantasma embaixo do bloco fechado. */
.cupom__aviso { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--paper-corpo); }
.cupom__aviso:empty { margin-top: 0; }