/* ============================================================
   FAVNA 3D — Catálogo
   ------------------------------------------------------------
   Paleta e tipografia vêm do Manual de Identidade Visual v2 e
   têm prioridade sobre qualquer gosto de design (REQ-73).

   A ideia que organiza a página: ela é uma PROVA DE FATIAMENTO.
   Capa escura (o chiaroscuro que as próprias fotos fazem),
   corpo em off-white cerâmico, bandeja de cores escura, rodapé
   fechando escuro de novo. O grafismo é sempre o mesmo — as
   linhas de camada da extrusão — e o dado técnico aparece em
   mono, como leitura de fatiador (REQ-28).
   ============================================================ */

:root {
  /* ---- paleta do Manual ---- */
  --terracota:  #C87D55;
  --carvao:     #2C2A29;
  --offwhite:   #FAF8F5;
  --bege:       #D6C5B3;
  --oliva:      #5E6850;
  --titanio:    #7A8288;

  /* ---- derivadas, para superfície ---- */
  --breu:       #221F1E;   /* carvão mais fundo: capa, faixa de cores, rodapé */
  --linha:      #E6DFD6;   /* off-white escurecido: divisores no claro */
  --papel:      #F3EFE9;   /* fundo das molduras de foto */
  --linha-breu: rgb(250 248 245 / 0.13);
  --texto-breu: #A8A099;   /* texto secundário sobre o escuro */
  --terracota-claro: #D9926B;

  --titulo: 'Syne', 'Montserrat', system-ui, sans-serif;
  --corpo:  'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --mono:   'JetBrains Mono', 'Courier New', monospace;

  --largura: 1240px;
  --respiro: clamp(1rem, 4vw, 2rem);
  --gap: clamp(0.75rem, 2.2vw, 1.75rem);
  --barra-altura: 3.5rem;

  --curva: cubic-bezier(0.22, 0.7, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-altura) + 1rem);
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--carvao);
  font: 300 1rem/1.65 var(--corpo);
  letter-spacing: 0.005em;
  /* `clip` e não `hidden`: hidden criaria um contexto de rolagem e o
     position:sticky da barra passaria a se medir por ele (REQ-51). */
  overflow-x: clip;
}

body.travado { overflow: hidden; }

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

.conteudo {
  width: min(100% - (var(--respiro) * 2), var(--largura));
  margin-inline: auto;
}

.oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: -999px;
  background: var(--terracota); color: var(--offwhite);
  padding: 0.75rem 1rem; z-index: 200;
  font: 500 0.85rem var(--corpo);
}
.pular:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
}

/* ---------- grão de superfície ----------
   O acabamento da primeira camada é fosco e granulado (Manual v2). A página
   inteira recebe esse mesmo grão: é o que separa "off-white de tela" de
   "off-white cerâmico". Não intercepta clique nem entra na árvore de
   acessibilidade. */

.grao {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.085;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CAPA
   ============================================================ */

.capa {
  position: relative;
  isolation: isolate;
  background: var(--breu);
  color: var(--offwhite);
  overflow: hidden;
}

/* ---------- paralaxe ----------
   Vários planos andando em velocidades diferentes dão à capa a mesma
   profundidade que as fotos das peças têm: objeto à frente, luz atrás.
   O JS só escreve a variável --py (em px); quem desenha é o CSS. Sob
   `prefers-reduced-motion` o JS nunca escreve, e tudo fica em repouso. */

.capa-fundo,
.capa-luz,
.capa-interna,
.rodape-camadas {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.faixa-cores::before { transform: translate3d(0, var(--py, 0px), 0); }

/* Sobra de 15% em cima e embaixo para o plano poder deslizar sem descolar
   das bordas da capa. */
.capa-fundo { position: absolute; inset: -35% 0; z-index: -1; }

/* As camadas da extrusão: o grafismo da marca em escala de fundo.
   Elas "sobem" na chegada, como o objeto crescendo na mesa. */
.capa-camadas {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--linha-breu) 0 1px,
    transparent 1px 7px
  );
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  animation: sobe-camadas 1.6s var(--curva) both;
}

@keyframes sobe-camadas {
  from { transform: translateY(2.5rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Luz quente vinda de cima à direita — a mesma direção de luz das fotos. */
.capa-luz {
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(52% 58% at 72% 18%, rgb(200 125 85 / 0.30), transparent 68%),
    radial-gradient(70% 52% at 18% 92%, rgb(214 197 179 / 0.10), transparent 72%);
}

/* Grão próprio da capa: no escuro, o grão precisa clarear, não escurecer. */
.capa-fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A capa é apresentação, não destino: ela cabe em pouco mais de um terço da
   tela para o catálogo começar quase na primeira rolagem. */
.capa-interna {
  padding: clamp(2rem, 5vh, 3rem) 0 clamp(2rem, 5vh, 3rem);
}

/* Cada bloco da capa entra com um atraso próprio: uma chegada orquestrada
   vale mais que cinco micro-animações espalhadas. */
.capa-marca,
.capa-titulo,
.capa-subtitulo,
.leitura { animation: entra 0.9s var(--curva) both; }

.capa-marca     { animation-delay: 0.10s; }
.capa-titulo    { animation-delay: 0.18s; }
.capa-subtitulo { animation-delay: 0.34s; }
.leitura        { animation-delay: 0.46s; }

@keyframes entra {
  from { opacity: 0; transform: translateY(1.1rem); }
  to   { opacity: 1; transform: none; }
}

.capa-marca {
  margin: 0 0 clamp(0.9rem, 2.5vh, 1.25rem);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--terracota-claro);
}
/* O fio curto antes da marca é o "corte" do Sliced V, reduzido a um traço. */
.capa-marca::before {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  margin-right: 0.9rem;
  vertical-align: 0.3em;
  background: var(--terracota);
}

.capa-titulo {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 800;
  /* Syne Extrabold é largo: a uma palavra de 9 letras, 12vw já estourava a
     tela de 390px. A tagline vem da config e pode crescer, então além do
     tamanho contido há quebra de palavra como rede de segurança. */
  font-size: clamp(1.9rem, 7vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* O "&" (ou qualquer conectivo de uma letra) vira o acento da composição:
   terracota, em itálico de um peso mais leve. */
.capa-titulo .elo {
  color: var(--terracota);
  font-weight: 600;
  font-style: italic;
}

.capa-subtitulo {
  margin: clamp(0.7rem, 2vh, 1rem) 0 0;
  max-width: 30rem;
  color: var(--texto-breu);
  font-size: clamp(0.9rem, 2.4vw, 1rem);
  line-height: 1.6;
}

/* ---- leitura de fatiador ---- */

.leitura {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.75rem, 6vw, 4rem);
  margin: clamp(1.25rem, 3.5vh, 1.75rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linha-breu);
  max-width: 34rem;
}

.leitura-item { min-width: 5.5rem; }

.leitura dt {
  font: 400 0.63rem var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--titanio);
}

.leitura dd {
  margin: 0.4rem 0 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  letter-spacing: -0.01em;
  color: var(--offwhite);
}
.leitura dd .unidade {
  font: 400 0.68rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-breu);
  margin-left: 0.3rem;
}

/* ============================================================
   BARRA (filtros + busca), grudada no topo
   ============================================================ */

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(250 248 245 / 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow 0.3s;
}
.barra.encostada { box-shadow: 0 10px 30px -22px rgb(44 42 41 / 0.55); }

/* Fio de progresso: a página se constrói camada por camada enquanto rola. */
.progresso {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: transparent;
  overflow: hidden;
}
.progresso span {
  display: block;
  height: 100%;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left center;
}

.barra-interna {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  min-height: var(--barra-altura);
}

.barra-marca {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--carvao);
  display: none;
}

/* ---- filtros ---- */

.filtros {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.6rem 1.5rem 0.6rem 0;
  /* O corte à direita avisa que a fileira continua, sem precisar de seta. */
  mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}
.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--titanio);
  font: 400 0.72rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.filtro:hover { color: var(--carvao); border-color: var(--bege); }
.filtro[aria-current="page"] {
  color: var(--offwhite);
  background: var(--carvao);
  border-color: var(--carvao);
}

/* ---- busca ---- */

.busca-abre {
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: transparent;
  color: var(--carvao);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.busca-abre svg { width: 1.05rem; height: 1.05rem; }
.busca-abre:hover { border-color: var(--bege); color: var(--terracota); }
.busca-abre[aria-expanded="true"] {
  background: var(--carvao);
  border-color: var(--carvao);
  color: var(--offwhite);
}

.busca-linha { border-top: 1px solid var(--linha); }
.busca-linha[hidden] { display: none; }

.busca-linha input {
  width: 100%;
  padding: 0.95rem 0;
  border: 0;
  background: transparent;
  font: 300 1.05rem var(--corpo);
  color: var(--carvao);
}
.busca-linha input::placeholder { color: var(--titanio); }
.busca-linha input:focus { outline: none; }
.busca-linha input::-webkit-search-cancel-button { filter: grayscale(1); }

/* ============================================================
   AVISOS E ESTADOS
   ============================================================ */

.aviso-topo {
  margin: 1.75rem 0 0;
  padding: 0.85rem 1.1rem;
  border-left: 2px solid var(--titanio);
  background: var(--papel);
  font-size: 0.85rem;
  color: var(--carvao);
}
.aviso-topo.erro    { border-left-color: var(--terracota); }
.aviso-topo.atencao { border-left-color: var(--bege); }

.estado {
  padding: clamp(3rem, 12vh, 6rem) 0;
  text-align: center;
  color: var(--titanio);
  font: 400 0.8rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Enquanto carrega, as camadas se empilham: a espera fala a língua da casa. */
.estado-camadas {
  display: block;
  width: 3.5rem;
  height: 1.75rem;
  margin: 0 auto 1.25rem;
  background: repeating-linear-gradient(
    to bottom, var(--bege) 0 2px, transparent 2px 6px);
  animation: empilha 1.5s var(--curva) infinite;
}

@keyframes empilha {
  0%   { clip-path: inset(100% 0 0 0); opacity: 0.2; }
  60%  { clip-path: inset(0 0 0 0);   opacity: 1; }
  100% { clip-path: inset(0 0 0 0);   opacity: 0.2; }
}

/* A busca sem resultado é uma frase, não uma etiqueta de máquina. */
#vazio {
  font: 300 0.95rem/1.6 var(--corpo);
  letter-spacing: 0;
  text-transform: none;
  max-width: 34rem;
  margin-inline: auto;
}

/* ============================================================
   FAIXA DE CORES (REQ-17 a REQ-20)
   ============================================================ */

.faixa-cores {
  position: relative;
  margin: clamp(1.75rem, 5vw, 3rem) 0 0;
  padding: clamp(1.5rem, 4vw, 2.25rem) 0 clamp(1.25rem, 3vw, 1.75rem);
  background: var(--breu);
  color: var(--offwhite);
  overflow: hidden;
}
.faixa-cores[hidden] { display: none; }

.faixa-cores::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom, var(--linha-breu) 0 1px, transparent 1px 7px);
  mask-image: linear-gradient(to bottom, #000, transparent 45%);
  pointer-events: none;
}

.cores-cabeca {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.4rem);
}

.cores-rotulo {
  margin: 0;
  font: 500 0.72rem var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracota-claro);
}

.cores-nota {
  margin: 0;
  max-width: min(26rem, 100%);
  font-size: 0.78rem;
  color: var(--texto-breu);
}

/* ---- carrossel (REQ-19) ----
   Fileira que desliza com o dedo. O ponto fraco do formato é esconder o que
   está fora da tela, então três coisas compensam: a próxima cor sempre
   aparece cortada na borda, há barra de posição, e no desktop (sem gesto de
   arrastar) aparecem setas. */

.carrossel { position: relative; }

/* O trilho é a fileira que desliza — vale para a faixa de cores e para as
   prateleiras de peças. O respiro à esquerda realinha o primeiro item com o
   texto da página; à direita sobra o corte que mostra que a fileira continua. */
.trilho {
  list-style: none;
  margin: 0;
  padding: 0 clamp(3rem, 10vw, 6rem) 0 max(var(--respiro), calc(50vw - var(--largura) / 2));
  scroll-padding-inline: max(var(--respiro), calc(50vw - var(--largura) / 2)) 3rem;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { flex: 0 0 auto; scroll-snap-align: start; }

.paleta { gap: clamp(1.1rem, 3vw, 2rem); }
.paleta > .amostra { width: clamp(4.25rem, 17vw, 5.5rem); }

.amostra {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Herda tudo de .cor-disco — as camadas, o silk, o xadrez do translúcido —
   e só cresce. Uma definição de amostra, dois tamanhos. O seletor duplo
   vence o empate de especificidade com .cor-disco, declarado mais abaixo. */
.amostra-disco.cor-disco {
  width: clamp(2.5rem, 8.5vw, 3.25rem);
  height: clamp(2.5rem, 8.5vw, 3.25rem);
  margin: 0 auto 0.6rem;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 10px 20px -12px rgb(0 0 0 / 0.8);
  transition: transform 0.3s var(--curva);
}
.amostra:hover .amostra-disco.cor-disco { transform: translateY(-3px); }

.amostra-nome {
  margin: 0;
  /* O nome mais comprido do catálogo ("Ouro Envelhecido Silk") ocupa três
     linhas na largura atual da amostra. Reservar as três mantém o acabamento
     na mesma linha em toda a fileira — sem isso, uma amostra desalinha todas
     as outras. Cadastrar um nome mais longo que esse pede revisar este valor. */
  min-height: 3.9em;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--offwhite);
}

.amostra-acabamento {
  margin: 0.15rem 0 0;
  font: 400 0.6rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--titanio);
}

/* Setas: só onde existe ponteiro fino (mouse). No celular o gesto basta, e
   seta em tela pequena só rouba espaço da cor. */
.seta {
  display: none;
  position: absolute;
  /* Cada contexto diz a que altura a seta fica: na faixa de cores, na linha
     dos discos; na prateleira, na altura da foto. */
  top: var(--seta-topo, 30%);
  z-index: 2;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: rgb(250 248 245 / 0.92);
  backdrop-filter: blur(6px);
  color: var(--carvao);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.seta svg { width: 1rem; height: 1rem; }
.seta:hover { color: var(--terracota); border-color: var(--terracota); }

/* Dentro da bandeja escura, a seta e a barra se invertem. */
.faixa-cores { --seta-topo: clamp(1rem, 4vw, 1.5rem); }
.faixa-cores .seta {
  border-color: var(--linha-breu);
  background: rgb(34 31 30 / 0.85);
  color: var(--offwhite);
}
.faixa-cores .seta:hover { color: var(--terracota-claro); border-color: var(--terracota); }
.faixa-cores .barra-posicao { background: var(--linha-breu); }
.seta-antes  { left: clamp(0.5rem, 2vw, 1.25rem); }
.seta-depois { right: clamp(0.5rem, 2vw, 1.25rem); }

@media (hover: hover) and (pointer: fine) {
  .seta:not([hidden]) { display: grid; place-items: center; }
}

/* Barra de posição: diz onde você está na fileira sem precisar de 11
   bolinhas. Funciona para qualquer quantidade de cores. */
.barra-posicao {
  margin: clamp(0.85rem, 2vw, 1.25rem) max(var(--respiro), calc(50vw - var(--largura) / 2)) 0;
  height: 1px;
  background: var(--linha);
  overflow: hidden;
}
.barra-posicao[hidden] { display: none; }
.barra-posicao-tento {
  display: block;
  height: 100%;
  width: 28%;
  background: var(--terracota);
  transform: translateX(0);
  transition: transform 0.2s ease-out;
}

/* ============================================================
   GRADE DE PEÇAS
   ============================================================ */

.grade-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin: clamp(2.75rem, 8vw, 5rem) 0 clamp(1.5rem, 4vw, 2.25rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linha);
}

.secao-titulo {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  letter-spacing: -0.02em;
}

.secao-conta {
  margin: 0;
  font: 400 0.68rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--titanio);
  white-space: nowrap;
}

/* ---------- prateleiras por categoria (REQ-36) ----------
   A casa mostra uma fileira por categoria, com rubrica numerada. A fileira
   desliza com o dedo e usa a mesma mecânica da faixa de cores: cabendo tudo
   na tela, setas e barra de posição não aparecem e ela vira uma fileira
   comum — que é o que acontece hoje, com 1 a 4 peças por categoria. */

.prateleira {
  --seta-topo: 28%;
  margin-bottom: clamp(2.25rem, 6vw, 3.5rem);
}

.prateleira-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(0.9rem, 2.5vw, 1.35rem);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linha);
}

.prateleira-titulo {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  letter-spacing: -0.015em;
}
.prateleira-titulo a { color: inherit; text-decoration: none; }
.prateleira-titulo a:hover { color: var(--terracota); }

.prateleira-indice {
  flex: 0 0 auto;
  font: 500 0.66rem var(--mono);
  letter-spacing: 0.14em;
  color: var(--terracota);
}

.prateleira-tudo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--linha);
  font: 400 0.66rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--titanio);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.prateleira-tudo:hover { color: var(--terracota); border-bottom-color: var(--terracota); }
.prateleira-tudo .seta-pedido { transition: transform 0.3s var(--curva); }
.prateleira-tudo:hover .seta-pedido { transform: translateX(0.3rem); }

/* A seção de destaques abre a casa: rubrica em terracota, grade em vez de
   fileira, e um fio mais forte que o das categorias para ela ler como
   abertura e não como mais uma prateleira. */
.destaques .prateleira-cabeca { border-bottom-color: var(--terracota); }
.destaques .prateleira-titulo { color: var(--terracota); }
.destaques .grade { padding-bottom: 0; }

.prateleira-conta {
  flex: 0 0 auto;
  margin: 0;
  font: 400 0.66rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--titanio);
}

.vitrine { gap: var(--gap); }

.vitrine-item { width: clamp(12rem, 60vw, 16.5rem); }
.vitrine-item .peca { width: 100%; }

/* Na fileira, a peça só desbota para aparecer — deslizar para cima dentro de
   um contêiner que rola na horizontal renderia uma barra vertical de 20px. */
.vitrine-item .peca { transform: none; }

/* ---------- cabeçalho do miolo ---------- */

.grade-cabeca-texto { min-width: 0; }

.volta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font: 400 0.66rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--titanio);
  text-decoration: none;
  transition: color 0.2s;
}
.volta::before { content: '←'; }
.volta:hover { color: var(--terracota); }
.volta[hidden] { display: none; }

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;     /* a peça em destaque abre buraco; isto fecha */
  gap: var(--gap) var(--gap);
  padding-bottom: clamp(3rem, 10vw, 6rem);
}

.peca {
  position: relative;
  opacity: 0;
  transform: translateY(1.25rem);
}
.peca.vista {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
  transition-delay: var(--atraso, 0s);
}

.peca-abre {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.peca-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--papel);
  overflow: hidden;
}

/* A foto é 14% mais alta que a moldura: essa sobra é o curso da paralaxe.
   O `scale` do hover entra pela variável --escala para não brigar com o
   translate que o paralaxe escreve em --py. */
.peca-foto img {
  position: absolute;
  top: -7%; left: 0; right: 0;
  width: 100%; height: 114%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--escala, 1));
  transition: transform 0.9s var(--curva), opacity 0.6s var(--curva);
}

/* A segunda foto por baixo: no hover, a peça se vira. Quem não tem segunda
   foto simplesmente não ganha o elemento — nada quebra. */
.peca-foto .virada { opacity: 0; }
.peca-abre:hover .peca-foto .capa-img,
.peca-abre:focus-visible .peca-foto .capa-img { opacity: 0; }
.peca-abre:hover .peca-foto .virada,
.peca-abre:focus-visible .peca-foto .virada { opacity: 1; }
.peca-abre:hover .peca-foto img,
.peca-abre:focus-visible .peca-foto img { --escala: 1.05; }

/* Véu inferior: só o suficiente para a ficha em mono se sustentar sobre
   qualquer foto, clara ou escura. */
.peca-foto::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgb(34 31 30 / 0.55), transparent);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.peca-foto.com-ficha::after { opacity: 1; }

/* placeholder neutro quando não há foto ou ela quebrou (REQ-27) */
.peca-foto.sem-foto::before,
.galeria.sem-foto::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom, var(--linha) 0 1px, var(--papel) 1px 7px);
  opacity: 0.8;
}
.peca-foto.sem-foto img { display: none; }

/* Índice da peça: a página é uma lista de trabalho, e cada peça tem número. */
.peca-indice {
  position: absolute;
  top: 0.6rem; left: 0.7rem;
  z-index: 2;
  font: 500 0.62rem var(--mono);
  letter-spacing: 0.14em;
  color: var(--offwhite);
  mix-blend-mode: difference;
}

/* O ELEMENTO MARCANTE (REQ-28): ficha de fatiamento sobre a foto, em mono.
   Desliza para dentro no hover em telas com ponteiro; no celular fica
   sempre visível, porque lá não existe hover. */
.ficha {
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.6rem;
  z-index: 2;
  margin: 0;
  font: 400 0.6rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: rgb(250 248 245 / 0.92);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.peca-info {
  display: grid;
  /* Empilhado sempre: "Preço sob consulta" ao lado do nome quebrava o nome em
     duas linhas em qualquer coluna estreita — e coluna estreita é a regra,
     tanto no celular quanto dentro da prateleira. */
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linha);
  margin-top: 0.85rem;
  position: relative;
}

/* O fio terracota que corre sob o nome no hover: o "corte" acontecendo. */
.peca-info::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  height: 1px;
  width: 100%;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--curva);
}
.peca-abre:hover .peca-info::before,
.peca-abre:focus-visible .peca-info::before { transform: scaleX(1); }

.peca-info h3 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(0.92rem, 2.6vw, 1.05rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.peca-info .preco {
  margin: 0.35rem 0 0;
  font: 400 0.82rem var(--mono);
  color: var(--carvao);
}

.peca-info .situacao { grid-column: 1 / -1; }

.situacao {
  margin: 0.3rem 0 0;
  font: 400 0.66rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--titanio);
}
.situacao.pronta { color: var(--oliva); }
.situacao.pronta::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.1em;
}

/* ============================================================
   DETALHE DA PEÇA
   ============================================================ */

/* display:grid venceria o [hidden] do navegador — por isso o reforço. */
.detalhe[hidden] { display: none; }

.detalhe {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  place-items: end center;
  background: rgb(34 31 30 / 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: escurece 0.3s ease both;
}

@keyframes escurece { from { opacity: 0; } to { opacity: 1; } }

.detalhe-caixa {
  position: relative;
  width: min(100%, 1180px);
  max-height: 94vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--offwhite);
  animation: sobe-lamina 0.45s var(--curva) both;
}

@keyframes sobe-lamina {
  from { transform: translateY(2.5rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.detalhe-fecha {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  z-index: 5;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(250 248 245 / 0.92);
  backdrop-filter: blur(6px);
  color: var(--carvao);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.detalhe-fecha svg { width: 1.05rem; height: 1.05rem; }
.detalhe-fecha:hover { background: var(--bege); transform: rotate(90deg); }

.detalhe-corpo { display: grid; grid-template-columns: 1fr; }

/* ---- galeria ---- */

.galeria-bloco { background: var(--papel); }
.galeria-quadro { position: relative; }

.galeria {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 240px;
}
.galeria::-webkit-scrollbar { display: none; }

.galeria img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  scroll-snap-align: start;
}

/* Contador da galeria, em mono: "02 / 03". */
.galeria-conta {
  position: absolute;
  left: 0.9rem; bottom: 0.9rem;
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.6rem;
  background: rgb(34 31 30 / 0.72);
  color: var(--offwhite);
  font: 400 0.63rem var(--mono);
  letter-spacing: 0.14em;
}

.galeria-miniaturas {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--papel);
  overflow-x: auto;
  scrollbar-width: none;
}
.galeria-miniaturas::-webkit-scrollbar { display: none; }

.miniatura {
  flex: 0 0 auto;
  width: 3.25rem; height: 3.25rem;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s, border-color 0.25s;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { opacity: 0.85; }
.miniatura[aria-current="true"] { opacity: 1; border-color: var(--terracota); }

/* ---- texto do detalhe ---- */

.detalhe-texto {
  --pad: clamp(1.5rem, 5vw, 3rem);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
}

.categoria {
  margin: 0;
  font: 500 0.66rem var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracota);
}

.detalhe-texto h2 {
  margin: 0.75rem 0 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.75rem, 5.5vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.preco-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linha);
}

.preco.grande {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  letter-spacing: -0.015em;
}

.preco-linha .situacao { margin: 0; }

.descricao {
  margin: 1.5rem 0 0;
  max-width: 44ch;
  color: var(--carvao);
  line-height: 1.75;
}

.ficha-detalhe {
  position: static;
  display: block;
  margin: 1.5rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--papel);
  border-left: 2px solid var(--bege);
  color: var(--titanio);
  text-shadow: none;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.cores { margin-top: 1.75rem; }

.rotulo-cor {
  margin: 0 0 0.7rem;
  font: 400 0.66rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--titanio);
}

.cores-linha { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.cor {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--titanio);
  font: 400 0.82rem var(--corpo);
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.cor:hover { border-color: var(--bege); color: var(--carvao); }
.cor[aria-pressed="true"] {
  border-color: var(--carvao);
  color: var(--carvao);
}
/* Sem amostra cadastrada o botão volta a ser só rótulo (REQ-16). */
.cor:not(:has(.cor-disco)) { padding-left: 0.85rem; }

.personalizavel {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  font-size: 0.88rem;
  color: var(--oliva);
}
.personalizavel::before {
  content: '';
  flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.2rem;
  background: repeating-linear-gradient(
    to bottom, currentColor 0 1px, transparent 1px 4px);
  opacity: 0.6;
}

/* A ação fica colada no fim da lâmina: no celular, o botão nunca sai da
   tela por causa de uma descrição longa. */
.acao {
  position: sticky;
  bottom: 0;
  margin: auto calc(var(--pad) * -1) calc(var(--pad) * -1);
  padding-top: 1.1rem;
  padding-inline: var(--pad);
  padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
  background: rgb(250 248 245 / 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
}

.botao-pedido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.5rem;
  background: var(--carvao);
  color: var(--offwhite);
  font: 500 0.88rem var(--corpo);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.25s, transform 0.25s;
}
.botao-pedido .seta-pedido {
  font: 400 0.75rem var(--mono);
  letter-spacing: 0.1em;
  opacity: 0.8;
  transition: transform 0.3s var(--curva);
}
.botao-pedido:hover { background: var(--terracota); }
.botao-pedido:hover .seta-pedido { transform: translateX(0.35rem); }

.aviso {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--papel);
  border-left: 2px solid var(--terracota);
  font-size: 0.82rem;
  color: var(--titanio);
}

/* ============================================================
   AMOSTRA DE FILAMENTO (REQ-15)
   A cor vem do catálogo js/cores.js pela variável --cor. O disco é
   desenhado, não é imagem: zero requisição, e nenhuma foto do fornecedor
   publicada. As linhas horizontais são as camadas da impressão — o mesmo
   motivo do grafismo da marca.
   ============================================================ */

.cor-disco {
  /* display explícito: como <span>, ele é inline por padrão e ignoraria
     largura e altura. */
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background-color: var(--cor, var(--bege));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  overflow: hidden;
}

/* Camadas da impressão. Duas linhas, uma clara e uma escura: sozinha, a
   escura desaparece no Preto Matte e a clara desaparece no Bege. Juntas, o
   relevo aparece em qualquer cor do catálogo. */
.cor-disco::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.16) 0 1px,
    rgb(255 255 255 / 0.14) 1px 2px,
    transparent 2px 3px
  );
}

/* silk: reflexo acetinado na diagonal */
.cor-disco.silk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgb(255 255 255 / 0.62) 8%, transparent 42%,
    rgb(0 0 0 / 0.22) 78%);
}

/* marmorizado: mescla suave, sem virar textura suja */
.cor-disco.marmorizado::after {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(45% 38% at 30% 28%, rgb(255 255 255 / 0.75), transparent 70%),
    radial-gradient(38% 30% at 72% 70%, rgb(90 90 110 / 0.45), transparent 72%);
}

/* transparente: o xadrez aparece por baixo, como em editor de imagem */
.cor-disco.transparente {
  background-color: transparent;
  background-image:
    linear-gradient(45deg, var(--linha) 25%, transparent 25% 75%, var(--linha) 75%),
    linear-gradient(45deg, var(--linha) 25%, transparent 25% 75%, var(--linha) 75%);
  background-size: 0.5rem 0.5rem;
  background-position: 0 0, 0.25rem 0.25rem;
}
.cor-disco.transparente::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cor, #E2E2E2);
  opacity: 0.45;
}

/* ============================================================
   ATALHOS FLUTUANTES
   ------------------------------------------------------------
   Mesmo gesto do botão flutuante do CataPromos — redondo, embaixo à
   direita, com dica no hover e um pulso chamando o olho. A pele é que muda:
   o verde #25D366 com halo pulsando brigaria com a página inteira, então o
   botão nasce em Carvão e só assume a cor no hover — e a cor é a da casa
   (Oliva Queimado para o WhatsApp, Terracota para o Instagram), não a da
   rede. O pulso é o mesmo anel de camada que o resto da página usa.
   ============================================================ */

.flutuantes {
  position: fixed;
  right: clamp(0.85rem, 3vw, 1.75rem);
  bottom: max(clamp(0.85rem, 3vw, 1.75rem), env(safe-area-inset-bottom));
  z-index: 45;            /* acima da barra (40), abaixo do detalhe (100) */
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  /* Só entram depois que a capa sai da tela: na chegada, dois botões
     redondos brigariam com a composição do título. */
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.4s var(--curva), transform 0.4s var(--curva);
}
.flutuantes[hidden] { display: none; }
.flutuantes.mostra { opacity: 1; transform: none; pointer-events: auto; }

/* Com o detalhe aberto eles sumiriam atrás do véu como um borrão. */
body.travado .flutuantes { opacity: 0; pointer-events: none; }

.flutuante {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--breu);
  color: var(--offwhite);
  box-shadow:
    0 16px 34px -14px rgb(34 31 30 / 0.7),
    inset 0 0 0 1px rgb(250 248 245 / 0.14);
  transition: transform 0.3s var(--curva), background 0.3s, box-shadow 0.3s;
}
.flutuante[hidden] { display: none; }
.flutuante svg { position: relative; z-index: 2; width: 1.5rem; height: 1.5rem; }

/* As camadas da extrusão também aqui: o botão é uma peça impressa. */
.flutuante::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    to bottom, rgb(250 248 245 / 0.10) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.flutuante:hover { transform: translateY(-2px) scale(1.06); }
.flutuante-whatsapp:hover  { background: var(--oliva); }
.flutuante-instagram:hover { background: var(--terracota); }

/* Pulso: um anel de camada abrindo, não o halo verde da rede. */
.flutuante-pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--terracota);
  animation: pulso 3.2s var(--curva) infinite;
}

@keyframes pulso {
  0%        { transform: scale(1);   opacity: 0.5; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

.flutuante-dica {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  z-index: 3;
  padding: 0.45rem 0.7rem;
  background: var(--carvao);
  color: var(--offwhite);
  font: 400 0.6rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(0.4rem);
  transition: opacity 0.25s, transform 0.25s var(--curva);
}
.flutuante:hover .flutuante-dica,
.flutuante:focus-visible .flutuante-dica {
  opacity: 1;
  transform: translateY(-50%);
}

/* Onde não existe hover, a dica nunca apareceria — e ocupa espaço à toa. */
@media (hover: none) {
  .flutuante-dica { display: none; }
}

@media (min-width: 760px) {
  .flutuante { width: 3.25rem; height: 3.25rem; }
  .flutuante svg { width: 1.6rem; height: 1.6rem; }
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  position: relative;
  margin-top: auto;
  background: var(--breu);
  color: var(--offwhite);
  overflow: hidden;
}

.rodape-interno {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 10vw, 6rem) 0 clamp(3rem, 8vw, 5rem);
  text-align: center;
}

/* O rodapé termina literalmente em camadas — a peça acabando de imprimir. */
.rodape-camadas {
  position: absolute;
  inset: auto 0 0;
  height: 6rem;
  background: repeating-linear-gradient(
    to bottom, var(--linha-breu) 0 1px, transparent 1px 7px);
  mask-image: linear-gradient(to top, #000, transparent);
}

.assinatura {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  letter-spacing: 0.16em;
  color: var(--offwhite);
}

.assinatura-sub {
  margin: 0.5rem 0 0;
  font: 400 0.68rem var(--mono);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--terracota-claro);
}

.miudo {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-breu);
}
.miudo + .miudo { margin-top: 0.5rem; }

.elo-cores {
  color: var(--texto-breu);
  text-decoration-color: rgb(250 248 245 / 0.25);
  text-underline-offset: 0.25em;
  transition: color 0.2s;
}
.elo-cores:hover { color: var(--terracota-claro); }

/* ============================================================
   TELAS MAIORES
   ============================================================ */

@media (min-width: 620px) {
  /* A peça em destaque quebra a grade: ocupa duas colunas e vira uma lâmina
     partida — foto inteira de um lado, painel de texto do outro. Recortar a
     mesma foto 4:5 em paisagem decapitava o objeto; aqui ela entra no
     enquadramento em que foi fotografada. */
  .peca.destaque { grid-column: span 2; }

  .peca.destaque .peca-abre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--papel);
  }

  .peca.destaque .peca-info {
    align-content: center;
    grid-template-columns: 1fr;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    margin-top: 0;
    border-top: 0;
  }

  /* No cartão normal o fio do hover corre em cima; aqui ele desce pela
     dobra entre a foto e o texto. */
  .peca.destaque .peca-info::before {
    top: 0; left: 0;
    width: 1px; height: 100%;
    transform: scaleY(0);
    transform-origin: top;
  }
  .peca.destaque .peca-abre:hover .peca-info::before,
  .peca.destaque .peca-abre:focus-visible .peca-info::before { transform: scaleY(1); }

  .peca.destaque .peca-info h3 { font-size: clamp(1.25rem, 2.6vw, 1.8rem); }
  .peca.destaque .peca-info .preco { justify-self: start; margin-top: 0.75rem; }
  .peca.destaque .peca-resumo { display: block; }
}

/* O resumo só existe na peça em destaque e só onde ela é partida em duas. */
.peca-resumo {
  display: none;
  margin: 0.9rem 0 0;
  max-width: 34ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--titanio);
}

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

  /* Título e subtítulo de um lado, leitura do outro, alinhada pela base: a
     capa fica mais baixa ainda sem espremer nada. A colocação é explícita —
     deixada no automático, o subtítulo subia para a coluna da leitura. */
  .capa-interna {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 6vw, 4rem);
    row-gap: 0.4rem;
  }
  .capa-marca     { grid-area: 1 / 1 / 2 / -1; }
  .capa-titulo    { grid-area: 2 / 1 / 3 / 2; }
  .capa-subtitulo { grid-area: 3 / 1 / 4 / 2; }
  .leitura {
    grid-area: 2 / 2 / 4 / 3;
    align-self: end;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    justify-content: flex-end;
    text-align: right;
    max-width: none;
  }
  .leitura-item { min-width: 0; }

  .cores-cabeca {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
  }
  .peca-foto .ficha {
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity 0.4s, transform 0.4s var(--curva);
  }
  .peca-abre:hover .peca-foto .ficha,
  .peca-abre:focus-visible .peca-foto .ficha { opacity: 1; transform: none; }
  .peca-foto.com-ficha::after { opacity: 0; }
  .peca-abre:hover .peca-foto.com-ficha::after,
  .peca-abre:focus-visible .peca-foto.com-ficha::after { opacity: 1; }
}

@media (min-width: 880px) {
  /* A busca deixa de ser gaveta e vira campo permanente, alinhado à direita
     da barra. Fica posicionada em vez de participar do flex para que a
     fileira de filtros use toda a largura disponível e role por baixo dela. */
  .busca-abre { display: none; }
  .busca-linha,
  .busca-linha[hidden] {
    display: block;
    position: absolute;
    right: max(var(--respiro), calc(50vw - var(--largura) / 2));
    top: 50%;
    transform: translateY(-50%);
    width: 11.5rem;
    border-top: 0;
    border-bottom: 1px solid var(--linha);
  }
  .busca-linha .conteudo { width: 100%; }
  .busca-linha input { padding: 0.45rem 0; font-size: 0.9rem; }

  .barra-interna .filtros {
    padding-right: 13rem;
    mask-image: linear-gradient(to right, #000 calc(100% - 14rem), transparent calc(100% - 12.5rem));
  }

  .detalhe { place-items: center; padding: clamp(1rem, 4vh, 2.5rem) var(--respiro); }
  .detalhe-caixa { max-height: min(92vh, 900px); }
  /* stretch para a coluna de texto acompanhar a altura da foto: é o que
     leva o botão de pedido a fechar a lâmina na mesma linha da galeria. */
  .detalhe-corpo { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .galeria-bloco { position: sticky; top: 0; align-self: start; }
  .galeria img { aspect-ratio: 4 / 5; max-height: 75vh; }
}

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

/* ============================================================
   RESPEITA QUEM PEDIU MENOS MOVIMENTO (REQ-54)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .peca { opacity: 1; transform: none; }
  .peca-abre:hover .peca-foto img { --escala: 1; }
}