/*
 * base.css — Lista de Presentes / Cha de Panela
 *
 * Casca de layout: cabecalho, secao de categoria, grade de pecas.
 * Tokens em tokens.css, carregado antes deste arquivo.
 *
 * Peca de item SEM CONTAINER (DESIGN.md "Componentes" e "Elevacao",
 * SHAPE-VITRINE.md aprovado 2026-08-30): a foto vai direto sobre o papel,
 * sem fundo proprio, sem borda, sem caixa, sem sombra. So o ladrilho da
 * foto tem cantos de 10px. "Meu presente" e o unico elemento emoldurado
 * da pagina inteira.
 */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--tamanho-corpo);
  line-height: 1.5;
}

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

a {
  color: inherit;
}

/* Coluna medida: o desktop recebe a mesma coluna centralizada, sem layout
   alternativo (PRD RNF-06, DESIGN.md "Peca de item"). */
/* Respiro lateral revisado em EX-03b, a pedido do Ygor: 16px deixava o
   conteudo encostado na borda do celular. 24px ate 640px, 32px dali em
   diante. 🔴 Margem maior e exatamente o que cria rolagem lateral, e ja
   criou uma vez neste projeto: a grade de 2 colunas a 320px passa a ter
   (320-48-20)/2 = 126px por celula, e por isso `.grade` usa
   minmax(0, 1fr) e a etiqueta quebra linha. Remedido a 360, 320 e 180px. */
.coluna {
  width: 100%;
  max-width: 60rem; /* 960px: cabe a grade de 4 colunas no desktop */
  margin-inline: auto;
  padding-inline: var(--espaco-5); /* 24px */
}

@media (min-width: 640px) {
  .coluna {
    padding-inline: var(--espaco-6); /* 32px */
  }
}

/* ---------------------------------------------------------------------
   Cabecalho compacto — SHAPE-VITRINE.md secao 5: grade ja na 1a tela.
--------------------------------------------------------------------- */

/* Duas colunas: o texto a esquerda, o slot da foto do casal a direita.
   A instrucao ocupa a largura inteira, embaixo, porque e a linha mais longa
   e nao pode ser estrangulada pelo slot.

   A foto do casal ainda nao chegou (PLANO.md, pendencia 4). O slot ja esta
   no layout e ja consome a largura dele: quando a foto for colocada, nada
   se rearranja. Vazio, ele nao desenha nada — sem fundo, sem borda, sem
   moldura, sem buraco. */
/* 🔴 EX-05c: A SAUDACAO VOLTOU INTEIRA PARA CA.
   EX-05 tinha descido a linha 2 ("Escolha um presente da lista...") para o
   rodape, comprando 137px de primeira tela a 360x780. O Ygor reprovou em
   2026-08-31: saudacao se le no inicio. Os dois paragrafos voltaram a ser
   um so, `.cabecalho-instrucao`, como no texto aprovado.

   Os 137px voltaram a ser pagos, e com folga, pelo "Como escolher"
   recolhido: ver `.instrucao-caixa` mais abaixo. O `padding-top` de 24px
   (era 32) e o retrato de 48px (era 56) continuam como EX-05 os deixou —
   o retrato e a ultima coisa a ser sacrificada na ordem de precedencia do
   Ygor, e por isso ele encolheu em vez de sair. */
.cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--espaco-4);
  align-items: start;
  padding-top: var(--espaco-5); /* 24px */
  padding-bottom: var(--espaco-3);
}

.cabecalho-texto {
  grid-column: 1;
  grid-row: 1;
}

/* No celular o slot tem a altura do bloco de texto ao lado, entao ele nao
   acrescenta um pixel de altura ao cabecalho: vazio nao abre buraco, e a
   foto entrando depois nao empurra nada. */
/* 48px, era 56 (EX-05, decisao D1: "retrato e saudacao menores"). O retrato e
   a ULTIMA coisa a ser sacrificada na ordem de precedencia do Ygor, e por
   isso ele encolheu 8px e nao saiu. Ele nao acrescenta altura ao cabecalho:
   quem manda na altura e o bloco de texto ao lado. */
.cabecalho-retrato {
  grid-column: 2;
  grid-row: 1;
  width: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.cabecalho-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Da largura de tablet em diante sobra espaco lateral: o slot cresce e passa
   a ocupar as duas linhas da coluna da direita, ao lado do texto inteiro.
   A altura continua vindo do texto, nao dele. */
@media (min-width: 640px) {
  .cabecalho-retrato {
    grid-row: 1 / 3;
    align-self: start;
    width: 96px; /* era 112 (EX-05, D1) */
  }

  .cabecalho-instrucao {
    grid-column: 1;
  }
}

/* Sobretitulo — EX-05d, 2026-08-31, pedido do Ygor.

   "Cha dos noivos", acima do nome do casal. Quem abre o link no WhatsApp
   precisa saber de que se trata sem ler o titulo da aba.

   E um <p>, e nao um titulo: o <h1> continua sendo um so por pagina.
   Consequencia: ele NAO herda nada de titulo, e a distincao visual em
   relacao a saudacao e feita por tres coisas que nao sao tamanho —

     cor      --tinta-suave sobre --papel, 5,59:1, AA com folga (o piso de
              texto normal e 4,5:1). NAO e --clay (3,78:1) nem --ouro
              (2,04:1), que estao proibidos em texto pelo hardgate 4.
     peso     600, o mesmo da etiqueta de estado.
     letras   0.02em de espacamento, o suficiente para a linha ler como
              rotulo sem virar caixa alta, que e o que atrasa a leitura de
              quem tem presbiopia.

   🔴 O TAMANHO E 1rem E NAO DESCE DAI. 16px e o piso absoluto do projeto
      (hardgate 3, DESIGN.md "Tipografia"). Sobretitulo em 14px seria o
      caminho obvio e esta proibido.

   O espaco e curto de proposito: 4px ate a saudacao. A grade nao pode sair
   da primeira tela, e cada pixel gasto aqui e pixel tirado do primeiro
   ladrilho. Medido a 360x780 e a 320x780 em EX-05d. */
.cabecalho-sobretitulo {
  margin: 0 0 var(--espaco-1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
}

.cabecalho-saudacao {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--tamanho-saudacao);
  line-height: 1.15;
  color: var(--tinta);
}

/* Data e local: pequenos de proposito, para dizer quanto tempo a pessoa tem
   sem virar contagem regressiva, que e proibida. 16px e o piso absoluto. */
.cabecalho-evento {
  margin: var(--espaco-1) 0 0;
  font-size: 1rem;
  color: var(--tinta-suave);
}

/* EX-10: esta classe carregava "instrucao + lembrete" na v1. Desde
   CONTEUDO-V2.md secao 1, o texto e o convite de duas frases
   ("Queremos muito voce..."). O seletor nao mudou de nome para nao
   duplicar a regra por uma troca de texto; o que importa e a classe
   continuar por baixo do retrato, com o mesmo tom (--tinta-suave). */
.cabecalho-instrucao {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: var(--espaco-2) 0 0;
  font-size: var(--tamanho-corpo);
  color: var(--tinta-suave);
  max-width: 46ch;
}

/* O atalho "Ver a lista de presentes" — SHAPE-V2-CONVITE-PRESENCA.md
   secao 2-A. Fica na terceira linha do grid do cabecalho, ocupando a
   largura toda como a instrucao acima dele. */
.cabecalho-atalho {
  grid-column: 1 / -1;
  margin: var(--espaco-4) 0 0;
}

.atalho-lista {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-minimo); /* 48px, hardgate 1 */
  padding-inline: var(--espaco-4);
  border: 2px solid var(--clay); /* contorno, 3,78:1 — nunca texto */
  border-radius: 999px;
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 1rem; /* 16px, piso absoluto */
  font-weight: 600;
  text-decoration: none;
}

.atalho-lista:focus-visible {
  outline: 3px solid var(--clay-forte);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Bloco B · "Voce vem?" — CONTEUDO-V2.md secao 2. EX-10, RECOLHIDO em
   EX-10b (decisao do Ygor: a confirmacao sozinha custava 593px dos
   1029px entre o topo e o primeiro presente a 360x780, o maior bloco
   isolado da pagina).

   O fundo continua alternando para --papel-2 UMA vez na pagina inteira
   aqui (SHAPE-V2-CONVITE-PRESENCA.md secao 2, decisao 3): e o unico
   lugar onde o convidado FAZ alguma coisa.

   `.campo`, `.campo-rotulo`, `.botao`, `.botao--contorno` e
   `.detalhe-acoes` vem de folha.css, carregado em toda pagina — nao
   duplicados aqui.

   🔴 `.presenca-resumo`/`.presenca-seta`/`.presenca-titulo` REPLICAM o
      mecanismo de `.instrucao-resumo`/`.instrucao-seta`/`.instrucao-titulo`
      (mesmas quatro neutralizacoes de marcador nativo que EX-07 escreveu),
      em classes proprias — nao as MESMAS classes, para nao virar uma
      segunda `.instrucao-seta` na pagina e quebrar a contagem "exatamente
      1" que testes/frente.test.mjs ja prova desde EX-07. Se um dia as
      quatro neutralizacoes mudarem num lugar, tem que mudar no outro
      tambem: sao a mesma ideia, duplicada de proposito.
--------------------------------------------------------------------- */

.presenca {
  background: var(--papel-2);
  border-block: 1px solid var(--clay); /* borda/superficie, nunca texto */
}

.presenca-interno {
  padding-block: var(--espaco-3) var(--espaco-5);
}

/* O <summary> e o alvo de toque, 48px no minimo (hardgate 1). Mesmas
   quatro neutralizacoes de marcador de `.instrucao-resumo`. */
.presenca-resumo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: var(--alvo-minimo); /* 48px */
  padding-block: var(--espaco-2);
  list-style: none;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  cursor: pointer;
}

.presenca-resumo::-webkit-details-marker {
  display: none;
}

.presenca-resumo::marker {
  content: '';
}

.presenca-caixa > summary {
  list-style: none;
}

.presenca-caixa > summary::-webkit-details-marker {
  display: none;
}

.presenca-caixa > summary::marker {
  content: '';
}

.presenca-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.375rem; /* 22px */
  color: var(--tinta);
}

/* A seta: mesmo desenho de `.instrucao-seta` (circulo + chevron de 3px de
   traco), classe propria. Hardgate 5: aberto/fechado se distinguem pela
   ROTACAO do chevron, nunca so por cor. */
.presenca-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--clay);
  border-radius: 50%;
}

.presenca-seta::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 3px solid var(--tinta);
  border-bottom: 3px solid var(--tinta);
  transform: rotate(45deg);
}

.presenca-caixa[open] .presenca-seta::before {
  margin-top: 5px;
  transform: rotate(-135deg);
}

.presenca-resumo:focus-visible {
  outline: 3px solid var(--clay-forte);
  outline-offset: 2px;
  border-radius: 8px;
}

.presenca-corpo {
  padding-top: var(--espaco-2);
}

.presenca-texto {
  margin: 0 0 var(--espaco-5);
  max-width: 60ch;
  font-size: var(--tamanho-corpo);
  color: var(--tinta);
}

.presenca-campo {
  margin-bottom: var(--espaco-4);
}

/* :empty esconde sem depender do atributo `hidden` — mesmo raciocinio de
   `.detalhe-desfecho:empty` (folha.css). assets/js/presenca.js so escreve
   texto aqui quando ha algo a dizer (erro de validacao, 429, queda de
   rede); em qualquer outro momento o elemento fica vazio e some. */
.presenca-aviso:empty {
  display: none;
}

.presenca-aviso {
  margin: 0 0 var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--papel);
  border-left: 4px solid var(--clay); /* borda/superficie, nunca texto */
  border-radius: 8px;
  font-size: var(--tamanho-corpo);
  color: var(--tinta);
}

/* 🔴 `#presenca-estado` e IRMAO de `#presenca-caixa` (o <details>), nunca
   filho dele — quem ja respondeu nao pode ver a confirmacao escondida
   dentro de um acordeao fechado. Fica `hidden` ate assets/js/presenca.js
   decidir que este navegador ja respondeu, e nenhuma regra aqui declara
   `display`, para o atributo `hidden` mandar sozinho (ver o aviso sobre a
   cascata do `[hidden]` no CLAUDE.md do projeto). */
.presenca-estado {
  padding-block: var(--espaco-2);
}

.presenca-estado-texto {
  margin: 0 0 var(--espaco-2);
  font-size: var(--tamanho-corpo);
  color: var(--tinta);
}

.presenca-estado-nota {
  margin: 0 0 var(--espaco-4);
  font-size: 1rem; /* 16px, piso absoluto */
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------
   A ponte para os presentes — CONTEUDO-V2.md secao 3. EX-10.
   Fica entre a confirmacao (Bloco B) e "Como escolher" (Bloco C). Sem
   fundo proprio: a alternancia de cor e so no bloco de confirmacao
   (decisao 3 da SHAPE), aqui a pagina volta ao papel.
--------------------------------------------------------------------- */

.ponte {
  padding-top: var(--espaco-7);
}

.ponte-texto {
  margin: 0 0 var(--espaco-4);
  max-width: 62ch;
  font-size: var(--tamanho-corpo);
  color: var(--tinta);
}

/* ---------------------------------------------------------------------
   Rodape — EX-05c, 2026-08-31.

   Sobrou o versiculo, e so ele. A recuperacao por codigo foi
   descontinuada da interface (decisao do Ygor) e a linha 2 da saudacao
   voltou ao cabecalho (reprovacao do Ygor). O codigo continua existindo
   no localStorage, porque e ele que vai no DELETE quando alguem desiste;
   o que saiu foi a tela, nao o dado.

   ⚠ O rodape inteiro e UM `.coluna`, e os filhos nunca usam o atalho
     `margin`. `.coluna` centraliza com `margin-inline: auto`, e `margin: 0`
     num filho zeraria esse auto e jogaria o bloco 32px a esquerda de todo
     o resto. Foi assim que o versiculo se deslocou em EX-03b, e a
     conferencia e medir `left` contra o dos vizinhos, nunca olhar.
--------------------------------------------------------------------- */

.rodape {
  background: var(--papel-2);
  border-top: 1px solid var(--clay); /* borda/superficie, nunca texto */
}

.rodape-interno {
  padding-block: var(--espaco-6) var(--espaco-7);
}

/* ---------------------------------------------------------------------
   Versiculo — CONTEUDO-ITENS.md secao 5-A, aprovado em 2026-08-30.
   Provérbios 24:3-4, Almeida Revista e Atualizada.

   🔴 Desde EX-05 (decisao D1) ele mora no RODAPE, e nao mais entre a
      saudacao e o "Como escolher". O texto nao mudou; mudou o lugar.

   Sem aspas decorativas gigantes e sem ornamento: a pagina e contida
   (PRODUCT.md). A referencia e TEXTO DE PAGINA, nao legenda, e por isso
   nao desce de 16px (hardgate 3).
--------------------------------------------------------------------- */

/* `margin-block`, nunca `margin`: ver o aviso do rodape acima.
   Sem `border-top` desde EX-05c: com a recuperacao por codigo fora, ele e
   o unico bloco do rodape, e uma regua sua desenharia uma segunda linha a
   24px da borda do proprio <footer>. */
.versiculo {
  margin-block: 0;
  margin-inline: 0;
}

.versiculo-texto {
  margin: 0;
  max-width: 54ch;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--tinta);
}

.versiculo-fonte {
  display: block;
  margin-top: var(--espaco-2);
  font-family: var(--fonte-corpo);
  font-style: normal;
  font-size: 1rem; /* 16px, piso absoluto */
  font-weight: 500;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------
   "Como escolher" — CONTEUDO-ITENS.md secao 5-A. Fica entre o cabecalho e
   a faixa de atalhos.

   🔴 RECOLHIVEL E FECHADO POR PADRAO desde EX-05c (decisao do Ygor,
      2026-08-31). Aberto, o bloco media 311px a 360px de largura e era o
      que empurrava o primeiro ladrilho da grade para fora da primeira
      tela. Fechado, ele custa uma linha e continua a um toque de quem
      precisa dele.

   🔴 A LEGENDA FICA FORA DO <details>, sempre visivel: ela explica as
      etiquetas das 60 pecas da grade, nao os tres passos. Escondida junto
      com eles, o hardgate 5 perderia a linha que faz a associacao entre
      glifo e palavra.

   Sem JavaScript nenhum: <details> nativo. E sem transicao de altura —
      abrir e fechar seco e mais previsivel do que uma caixa que desliza,
      e `height` animada e justamente o que o DESIGN.md proibe animar.
--------------------------------------------------------------------- */

.instrucao {
  padding-bottom: var(--espaco-3);
}

/* O <summary> e o alvo de toque, e ele tem 48px de altura no minimo
   (DESIGN.md, "Espaco e ritmo"). O triangulo padrao do navegador tem 8px
   e nao existe para o convidado idoso: some aqui e volta desenhado em
   `.instrucao-seta`, com 32px e traco de 3px.

   🔴 QUATRO NEUTRALIZACOES, UMA POR MOTOR, E NENHUMA E REDUNDANCIA POR
      MEDO. Ate EX-06 este bloco so tinha sido aberto no Chromium, e o
      risco real era a pagina do convidado idoso desenhar DUAS setas em
      outro motor, a nativa mais a nossa, que e exatamente o tipo de coisa
      que ninguem descobre porque ninguem tem o outro navegador na mesa.
      Nao ha outro motor nesta maquina, entao a defesa e cobrir os quatro
      mecanismos conhecidos de uma vez:

      1. `display: flex` tira o `display: list-item` que a folha de estilo
         do navegador poe no <summary>. Sem list-item nao ha caixa de
         marcador para desenhar, e e por isso que esta linha vem PRIMEIRO:
         ela e a que resolve, as outras tres sao rede.
      2. `list-style` no atalho E nos tres campos separados. O atalho
         sozinho ja bastaria num motor que o implemente inteiro; escrever
         `list-style-type` a parte custa uma linha e cobre o motor que
         ignora o atalho em <summary> por ser caso especial.
      3. `::-webkit-details-marker`, que e o unico caminho no WebKit
         antigo (Safari anterior ao 17), onde `::marker` em <summary> nao
         era suportado.
      4. `::marker` com conteudo vazio, que e o caminho padrao e o que o
         Firefox honra.

      Conferido no Chromium por estilo computado, que e o que esta maquina
      consegue provar: `display` do summary = flex (nao list-item),
      `::marker` com content vazio, `::-webkit-details-marker` com
      display none, e exatamente 1 `.instrucao-seta` na pagina. O que isto
      NAO prova e o desenho do Firefox e do Safari — prova que os quatro
      mecanismos estao escritos e que nenhum deles foi anulado pela
      cascata. */
.instrucao-resumo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: 48px;
  padding-block: var(--espaco-2);
  list-style: none;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  cursor: pointer;
}

/* WebKit antigo: o unico caminho la. */
.instrucao-resumo::-webkit-details-marker {
  display: none;
}

/* Padrao, honrado pelo Firefox e pelo WebKit novo. `content` e uma das
   poucas propriedades que ::marker aceita, e a que apaga o glifo. */
.instrucao-resumo::marker {
  content: '';
}

/* A mesma defesa escrita pelo elemento, e nao pela classe, para o caso de
   um motor aplicar o pseudo so quando o seletor casa `details > summary`. */
.instrucao-caixa > summary {
  list-style: none;
}

.instrucao-caixa > summary::-webkit-details-marker {
  display: none;
}

.instrucao-caixa > summary::marker {
  content: '';
}

.instrucao-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.375rem; /* 22px */
  color: var(--tinta);
}

/* A afordancia de "isto abre". Um circulo com contorno em `--clay`, que e
   token de borda e nunca de texto (DESIGN.md: 3,78:1 passa como contorno,
   reprova como texto). Ele nao emoldura CONTEUDO nenhum: emoldura o proprio
   glifo, e por isso nao disputa com a peca "Meu presente", que continua
   sendo o unico bloco emoldurado da pagina. */
.instrucao-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--clay);
  border-radius: 50%;
}

/* O chevron: dois lados de uma caixa girados 45 graus. 3px de traco, para
   sobreviver a um olho de 70 anos a um braço de distancia. */
.instrucao-seta::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 3px solid var(--tinta);
  border-bottom: 3px solid var(--tinta);
  transform: rotate(45deg);
}

/* Aberto, o chevron aponta para cima. Sem `transition`: ver o cabecalho
   deste bloco. */
.instrucao-caixa[open] .instrucao-seta::before {
  margin-top: 5px;
  transform: rotate(-135deg);
}

/* O foco do teclado desenha em volta da linha inteira, nao so do texto:
   o alvo e a linha. */
.instrucao-resumo:focus-visible {
  outline: 3px solid var(--clay-forte);
  outline-offset: 2px;
  border-radius: 8px;
}
.instrucao-passos {
  margin: var(--espaco-2) 0 0;
  padding-left: 1.4em;
  max-width: 52ch;
  font-size: 1.125rem; /* 18px */
  color: var(--tinta);
}

.instrucao-passos li + li {
  margin-top: var(--espaco-2);
}

/* Legenda das etiquetas. Os pares nao se partem no meio: cada um e um
   inline-block com o glifo colado na frase que ele explica. */
.instrucao-legenda {
  margin: var(--espaco-2) 0 0;
  max-width: 52ch;
  font-size: 1rem; /* 16px */
  color: var(--tinta);
}

.legenda-par {
  display: inline-block;
  margin-right: var(--espaco-3);
}

/* O glifo repete o da etiqueta e nada mais: sem fundo, sem pilula, para a
   legenda nao virar um terceiro componente de estado na tela. */
.legenda-glifo {
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Faixa de atalhos — SHAPE-VITRINE.md secao 5. Ancoras de rolagem, NAO
   filtro: nada some ao tocar. Funcionam sem JavaScript.
--------------------------------------------------------------------- */

.atalhos {
  background: var(--papel-2);
}

.atalhos-interno {
  padding-block: var(--espaco-2);
}

.atalhos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3); /* 12px de separacao entre alvos de toque */
}

/* O contorno fino aqui e deliberado: a peca de item nao tem container, entao
   a faixa e o unico lugar da vitrine que precisa dizer "isto e tocavel". */
/* 🔴 EX-12b: 'Eletroportáteis' (15 letras, EX-12) estourava a caixa em
   180px de viewport (zoom 200% a 360px) — scrollWidth 182 contra
   clientWidth 180, medido com document.createRange() sobre o no de texto.
   Mesmo remedio da .peca-etiqueta (ver comentario acima dela): sem ponto de
   quebra natural em palavra unica e longa, overflow-wrap: anywhere encolhe
   o min-content, break-word nao. */
.atalho {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo); /* 48px */
  padding-inline: var(--espaco-4);
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.atalho:focus-visible {
  outline: 3px solid var(--clay-forte);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Interruptor de filtro — o unico filtro de verdade da pagina, desligado
   por padrao. Criado por assets/js/vitrine.js; sem JavaScript o slot fica
   vazio e nao sobra controle morto na tela.
--------------------------------------------------------------------- */

.filtro-slot:empty {
  display: none;
}

.filtro {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: var(--alvo-minimo);
  margin-top: var(--espaco-2);
  padding-right: var(--espaco-2);
  font-size: var(--tamanho-corpo);
  color: var(--tinta);
  cursor: pointer;
}

/* Escondido da vista, nao do teclado nem do leitor de tela. */
.filtro-campo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.filtro-marca {
  flex: 0 0 auto;
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  background: var(--papel);
  line-height: 24px;
  text-align: center;
  font-size: 1rem;
  color: var(--papel);
}

/* Ligado nao depende so de cor: o visto aparece dentro da caixa. */
.filtro-campo:checked + .filtro-marca {
  background: var(--clay-forte);
  border-color: var(--clay-forte);
}

.filtro-campo:checked + .filtro-marca::after {
  content: "\2713";
}

.filtro-campo:focus-visible + .filtro-marca {
  outline: 3px solid var(--clay-forte);
  outline-offset: 3px;
}

body.esconder-reservados .peca--reservado {
  display: none;
}

/* ---------------------------------------------------------------------
   Secao de categoria — DESIGN.md / SHAPE-VITRINE.md: 72px acima, 16px
   abaixo, titulo em Petrona alinhado a esquerda.
--------------------------------------------------------------------- */

.secao {
  padding-top: var(--espaco-8);
}

/* A primeira secao vem logo abaixo da faixa de atalhos, que ja e uma pausa
   visual. 72px ali empurrariam a grade para fora da primeira tela em 360x640.
   O ritmo de 72px vale entre as secoes seguintes, que e onde ele serve. */
main > .secao:first-child,
main > .escolha[hidden] + .secao {
  /* 🔴 Zero, e nao 24px (EX-05, decisao D1). A faixa de atalhos logo acima ja
     e uma pausa visual com fundo proprio, e cada pixel gasto entre ela e o
     primeiro ladrilho e pixel que empurra a grade para fora da primeira tela.
     Medido: com 24px aqui o primeiro ladrilho ficava em 785px a 360x780, ou
     seja fora da dobra por 5px. */
  padding-top: 0;
}

/* O titulo da primeira secao tambem anda mais colado na grade, e so ele: o
   ritmo de 72px/16px entre as secoes seguintes continua valendo, porque e la
   que ele serve. */
main > .secao:first-child > .secao-titulo,
main > .escolha[hidden] + .secao > .secao-titulo {
  margin-bottom: var(--espaco-3);
}

/* Faixa "Voce escolheu": aparece so para quem ja reservou. Fica no HTML com
   `hidden`, pronta para EX-05 preencher. */
.escolha {
  padding-top: var(--espaco-6);
}

.grade--escolha {
  padding-bottom: 0;
}

.secao-titulo {
  /* alvo das ancoras da faixa de atalhos: nao encostar no topo da tela */
  scroll-margin-top: var(--espaco-4);
  margin: 0 0 var(--espaco-4);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: var(--tamanho-titulo-modal);
  text-align: left;
  color: var(--tinta);
  /* 🔴 EX-12b: mesmo motivo e mesmo remedio do comentario acima de
     .atalho — 'Eletroportáteis' estourava 180px de viewport. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Grade — DESIGN.md "Componentes": 2 colunas a partir de 360px, 3 no
   tablet, 4 no maximo no desktop, dentro da coluna medida.
--------------------------------------------------------------------- */

/* minmax(0, 1fr), e nao 1fr: com 1fr a coluna nao encolhe abaixo do
   min-content do nome do item, e a pagina ganha rolagem lateral em zoom
   alto (medido: 253px de conteudo em viewport de 165px). */
.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; /* EX-03b: era 12px, o minimo entre alvos de toque. 20 da ar */
  padding-bottom: var(--espaco-8);
}

@media (min-width: 640px) {
  .grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------
   Peca de item — sem container. A peca inteira e o alvo de toque.
--------------------------------------------------------------------- */

.peca {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  text-decoration: none;
  min-height: var(--alvo-minimo);
  border-radius: 10px; /* alvo de foco segue o arredondamento do ladrilho */
  transition: opacity var(--duracao-rapida) var(--easing-padrao);
}

.peca:focus-visible {
  outline: 3px solid var(--clay-forte);
  outline-offset: 4px;
}

.peca-ladrilho {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  /* Sem fundo proprio: o token diz que --papel-2 nao e fundo de peca de item
     (DESIGN.md "Cor"). Quem cobre a caixa enquanto a foto nao chega e o LQIP,
     posto como background-image no atributo style de cada peca. */
  background-color: transparent;
  background-size: cover;
  background-position: center;
}

.peca-ladrilho img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* ---------------------------------------------------------------------
   Placeholder — "Foto em breve" (V2-GUIA-DE-IMAGEM.md §8, EX-12).
   Honesto, nunca disfarçado de produto: mesma moldura do ladrilho comum,
   fundo --papel-2, texto em --tinta-suave (5,18:1 sobre --papel-2, AA).
   Nada de silhueta, ícone de câmera quebrada ou imagem cinza genérica.
--------------------------------------------------------------------- */
.peca-ladrilho--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--papel-2);
  text-align: center;
  padding: var(--espaco-2);
}

.peca-placeholder-texto {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 1rem; /* 16px, o piso do projeto (hardgate 3) */
  color: var(--tinta-suave);
}

/* Reservado: foto atenuada, nunca removida (PRD RF-01, PRODUCT.md principio 2). */
.peca--reservado .peca-ladrilho img {
  filter: grayscale(0.55) opacity(0.7);
}

/* `flex-wrap` e `overflow-wrap` nao sao enfeite. Com o glifo dentro do
   proprio <span aria-hidden> (EX-03), a pilula virou um flex de dois itens
   e deixou de ter ponto de quebra: em zoom de 200% a 360px, ou seja
   viewport CSS de 180px, "● Disponível" media 110px fixos numa coluna de
   68px e a pagina ganhava rolagem lateral. Medido: 206px de conteudo em
   180px de viewport. `overflow-wrap: anywhere` tambem encolhe o
   min-content do item anonimo, que e o que `break-word` nao faz. */
.peca-etiqueta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-1);
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--tamanho-etiqueta);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* As tres etiquetas existem em dois contextos: dentro de uma peca da grade,
   onde o estado vem do modificador da peca, e solta dentro da folha de
   detalhe ou da pagina /item/{slug}.html, onde nao ha peca em volta. Os
   dois seletores compartilham a mesma declaracao para nao existirem duas
   verdades sobre a cor de "Reservado". */

/* Disponivel: verde claro com contorno. 6,43:1 do texto sobre o fundo.
   🔴 A borda de 1px e obrigatoria: o fundo esta a 1,09:1 do papel e sozinho
      nao desenha pilula nenhuma (DESIGN.md, revisao de 2026-08-30). */
.peca--disponivel .peca-etiqueta,
.peca-etiqueta--disponivel {
  border: 1px solid var(--disponivel-borda);
  background: var(--disponivel-fundo);
  color: var(--disponivel-tinta);
}

/* Reservado: ambar quente com contorno. 6,51:1. Ambar, nunca vermelho:
   "outra pessoa ja vai dar este" e boa noticia (hardgate 6).
   🔴 Mesma regra da borda: o fundo esta a 1,06:1 do papel. */
.peca--reservado .peca-etiqueta,
.peca-etiqueta--reservado {
  border: 1px solid var(--reservado-borda);
  background: var(--reservado-fundo);
  color: var(--reservado-tinta);
}

/* Meu presente: fundo clay-forte, texto papel (7,13:1 — o unico par
   clay que recebe texto, ver DESIGN.md "Contraste, verificado"). NAO mudou
   na revisao de 2026-08-30. A borda transparente existe so para as tres
   pilulas terem exatamente a mesma altura, agora que as outras duas ganharam
   contorno; sem ela "Meu presente" ficaria 2px mais baixa que as vizinhas. */
.peca--meu-presente .peca-etiqueta,
.peca-etiqueta--meu-presente {
  border: 1px solid transparent;
  background: var(--clay-forte);
  color: var(--papel);
}

/* 🔴 `.peca--meu` NAO e `.peca--meu-presente`, e a diferenca e de projeto.
   "Meu presente" e o UNICO elemento emoldurado da pagina inteira (DESIGN.md,
   "Componentes" e "Elevacao"), e ele vive na faixa "Voce escolheu", em 2x1.
   A peca do MESMO item dentro da grade continua sendo uma peca comum, com a
   etiqueta trocada e nada mais: se ela recebesse a moldura, a pagina passaria
   a ter dois elementos emoldurados e a grade ganharia um buraco de 2 colunas
   no meio de uma secao. Quem pinta as duas e assets/js/folha.js. */
.peca--meu .peca-nome {
  color: var(--tinta);
}

.peca-nome {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: var(--tamanho-nome-item); /* 20px fixo */
  color: var(--tinta);
}

.peca--reservado .peca-nome {
  color: var(--tinta-suave);
}

/* "Meu presente": 2x1 na grade, unico elemento emoldurado da pagina
   inteira. Contorno 3px clay (borda/contorno — nunca texto, ver
   tokens.css) + sombra suave, a unica sombra do sistema. */
.peca--meu-presente {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  padding: var(--espaco-3);
  border: 3px solid var(--clay);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(44, 38, 32, 0.1);
}

.peca--meu-presente .peca-ladrilho {
  flex: 0 0 auto;
  width: 40%;
  max-width: 220px;
}

.peca--meu-presente .peca-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding-left: var(--espaco-4);
}

.peca {
  scroll-margin-top: var(--espaco-5);
}

/* `hidden` precisa vencer qualquer display de layout (a faixa "Voce
   escolheu" e as secoes que o filtro esvazia). */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Aviso da pagina _estados.html, que e verificacao interna e nao vai a
   publico. Nenhuma outra pagina usa esta regra.
--------------------------------------------------------------------- */

.aviso-verificacao {
  margin: 0;
  padding: var(--espaco-4);
  background: var(--papel-2);
  border-bottom: 3px solid var(--clay);
  color: var(--tinta);
  font-size: var(--tamanho-corpo);
}

@media (prefers-reduced-motion: reduce) {
  .peca {
    transition: none;
  }
}