:root {
  /* Mesmo creme do fundo da logo (#f2ede9). A logo é JPEG, sem transparência:
     se o fundo do site não bater exato, ela aparece como um retângulo colado. */
  --fundo: #f2ede9;
  --superficie: #ffffff;
  --texto: #2a2520;
  --texto-suave: #857d73;
  --ouro: #a8874f;
  --borda: #e8e2d9;
  --ouro-escuro: #8d6f3c;

  /* Verde puxado para o cinza: é o único sinal do site que não é da paleta
     da marca, e precisa ler como "ok" sem parecer aviso de sistema. */
  --verde: #6a8264;

  /* Sombras quentes, na cor do texto e não em cinza neutro: sobre creme,
     cinza puro suja e faz o card parecer descolado da página. */
  --sombra: 0 1px 2px rgba(42, 37, 32, .04), 0 8px 24px rgba(42, 37, 32, .06);
  --sombra-alta: 0 2px 4px rgba(42, 37, 32, .05), 0 18px 40px rgba(42, 37, 32, .11);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topo ---------- */

/* No celular o cabeçalho inteiro comia quase metade da primeira dobra, e
   a peça só aparecia depois de rolar. Marca menor e menos respiro aqui;
   no desktop, onde sobra altura, ele volta ao tamanho cheio. */
.topo {
  padding: 1.5rem 1.25rem 1.75rem;
  text-align: center;
}

@media (min-width: 640px) {
  .topo { padding: 2.5rem 1.25rem 2.75rem; }
}

/* O h1 continua sendo o h1, só que o texto dele é a imagem da marca.
   Os estilos de fonte ficam como fallback se a imagem não carregar. */
.marca {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.1rem, 8vw, 3rem);
  font-weight: 600;
  letter-spacing: .01em;
}

.marca img {
  display: block;
  width: min(215px, 58vw);
  height: auto;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .marca img { width: 290px; }
}

.subtitulo {
  margin: .35rem 0 0;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}

.marca a { display: block; }

/* Eco do sunburst da logo. Fecha o cabeçalho e separa as seções sem
   precisar de mais uma linha de texto. */
.divisor {
  display: block;
  width: 110px;
  height: auto;
  margin: 1.15rem auto 0;
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .55;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 1rem;
}

.menu a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-suave);
}

.menu a:hover,
.menu a:focus-visible { color: var(--texto); }

.menu .atual {
  border-bottom-color: var(--ouro);
  color: var(--texto);
}

/* ---------- Página de conteúdo ---------- */

.pagina {
  max-width: 620px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.foto-sobre {
  margin-bottom: 2rem;
  border-radius: 4px;
  overflow: hidden;
}

.foto-sobre[hidden] { display: none; }

.foto-sobre img {
  display: block;
  width: 100%;
  height: auto;
}

.secao { margin-bottom: 2.25rem; }

.secao[hidden] { display: none; }

.secao h2 {
  margin: 0 0 .6rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.secao p {
  margin: 0 0 .85rem;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--texto);
}

.secao p:last-child { margin-bottom: 0; }

/* ---------- Vitrine ---------- */

/* auto-fit com teto de largura, mais justify-content: center.

   Com auto-fill e 1fr, uma peça sozinha era esticada na primeira de cinco
   colunas e ficava encostada na esquerda, com a tela toda vazia do lado.
   Aqui as colunas têm largura máxima e o que sobra vai para as bordas, então
   duas peças ficam centradas e vinte preenchem a linha. */
.vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  gap: 1.1rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

@media (min-width: 640px) {
  .vitrine {
    grid-template-columns: repeat(auto-fit, minmax(220px, 270px));
    gap: 2.75rem 2rem;
  }
}

.aviso {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  font-size: .9rem;
  color: var(--texto-suave);
}

/* Flex column, e não block: o card é botão e item de grid, então é esticado
   até a altura da linha. Como block, o botão centraliza o próprio conteúdo
   nessa sobra, e a foto de quem tem nome de uma linha descia uns 13px em
   relação à vizinha de nome longo. */
.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}

.card.vendido { opacity: .45; }

/* 4 por 5, e não quadrado: é a proporção que sai do celular em foto de
   pescoço, mão e orelha. No quadrado a peça era cortada em cima e embaixo,
   justo onde ela aparece. */
.moldura {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  background: linear-gradient(150deg, #f4efe8, #e7ded1);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: box-shadow .35s ease, transform .35s ease;
}

.moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

/* A foto cresce dentro da moldura, que fica parada. O corte é o que dá
   sensação de aproximar da peça sem empurrar o resto do layout. */
.card:hover .moldura,
.card:focus-visible .moldura {
  box-shadow: var(--sombra-alta);
  transform: translateY(-4px);
}

.card:hover .moldura img,
.card:focus-visible .moldura img { transform: scale(1.05); }

.card:focus-visible { outline: none; }

.card:focus-visible .moldura { outline: 1px solid var(--ouro); outline-offset: 3px; }

/* Placeholder enquanto as fotos reais não existem */
.moldura.sem-foto::after {
  content: attr(data-inicial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3rem;
  color: var(--ouro);
  opacity: .4;
}

.selo {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .25rem .55rem;
  border-radius: 2px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .94);
  color: var(--texto);
}

.selo.vendido,
.selo.esgotado { background: rgba(42, 37, 32, .82); color: #fff; }
.selo.reservado { background: var(--ouro); color: #fff; }

/* Última peça fica no branco, só com a tinta dourada: é convite, não alerta.
   Se ganhasse fundo cheio como o reservado, competiria com a foto. */
.selo.ultima { color: var(--ouro-escuro); }

/* Sem caixa branca em volta do texto: o nome e o preço respiram no creme,
   como legenda de catálogo, e a foto fica sendo o único bloco sólido. */
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .85rem .1rem 0;
  text-align: center;
}

/* Duas linhas de nome sempre reservadas (2 × line-height 1.25). Sem isso o
   preço acompanha a quebra do título: na mesma fileira, um preço ficava
   13px abaixo do outro, e a altura da fileira mudava conforme o nome mais
   comprido dela. */
.info h3 {
  margin: 0 0 .3rem;
  min-height: 2.5em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
}

/* Preço na base do card. A min-height do h3 já resolve dois nomes; isto é a
   rede para o terceiro, que acontece na coluna estreita do celular: sem
   isso o preço do vizinho de nome curto subia uma linha inteira. */
.preco {
  margin: auto 0 0;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ouro-escuro);
}

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(42, 37, 32, .6);
  backdrop-filter: blur(3px);
}

.modal[hidden] { display: none; }

.modal-caixa {
  position: relative;
  width: min(440px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--fundo);
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(42, 37, 32, .35);
}


.fechar {
  position: absolute;
  top: .4rem;
  right: .55rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--texto);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #f4efe8, #e7ded1);
  overflow: hidden;
}

.modal-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Só o scale entra na transição. O transform-origin fica de fora de
     propósito: ele é o enquadramento, e precisa acompanhar o dedo e o mouse
     na hora, sem arrastar atrás. */
  transition: transform .25s ease;
}

/* Peça sem foto não tem o que ampliar, e não deve prometer que tem. */
.modal-foto:not(.sem-foto) { cursor: zoom-in; }

.modal-foto.ampliada {
  cursor: zoom-out;
  touch-action: none; /* o arraste é o pan, não a rolagem do modal */
}

.modal-foto.ampliada img { transform: scale(2.6); }

/* Ninguém descobre um zoom que não se anuncia. Some assim que a foto
   amplia, quando o rótulo já cumpriu o papel e viraria sujeira em cima
   da peça. */
.modal-foto:not(.sem-foto)::after {
  content: "Ampliar";
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .25rem .55rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto);
  pointer-events: none;
  transition: opacity .2s ease;
}

.modal-foto.ampliada::after { opacity: 0; }

.modal-texto { padding: 1.5rem 1.5rem 1.75rem; }

.modal-texto h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.15;
}

.modal-preco {
  margin: .5rem 0 .6rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ouro-escuro);
}

/* A linha da disponibilidade fecha o bloco do preço, então é ela que leva o
   separador que antes ficava no preço. */
.estoque {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--borda);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--texto-suave);
}

.estoque::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
}

.estoque.disponivel { color: var(--verde); }
.estoque.ultima,
.estoque.reservado { color: var(--ouro-escuro); }

.modal-descricao {
  margin: 0 0 1.5rem;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--texto-suave);
}

/* No desktop a foto vai ao lado do texto: a peça fica grande e visível
   enquanto a pessoa lê o preço e decide, em vez de sumir com o scroll.

   Precisa vir depois de .modal-foto: media query não muda especificidade,
   e o aspect-ratio 4/5 da regra base venceria. Com ele travado mais
   height 100%, a foto calculava a largura sozinha e vazava por cima da
   coluna de texto. */
@media (min-width: 780px) {
  .modal-caixa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(880px, 100%);
    overflow: hidden;
  }

  .modal-foto {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .modal-texto {
    align-self: center;
    max-height: 92vh;
    overflow-y: auto;
    padding: 2.25rem 2.25rem;
  }
}

.botao-pedido {
  display: block;
  padding: 1rem;
  border-radius: 2px;
  background: var(--texto);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background .25s ease;
}

.botao-pedido:hover,
.botao-pedido:focus-visible { background: var(--ouro-escuro); }

.botao-pedido.indisponivel {
  background: var(--borda);
  color: var(--texto-suave);
  pointer-events: none;
}

.dica-pedido {
  margin: .6rem 0 0;
  font-size: .75rem;
  text-align: center;
  color: var(--texto-suave);
}

.dica-pedido[hidden] { display: none; }

.aviso-pix {
  margin: 0;
  font-size: .72rem;
  text-align: center;
  color: var(--texto-suave);
}

.aviso-pix[hidden],
.botao-pix-peca[hidden] { display: none; }

/* ---------- Rodapé ---------- */

.rodape {
  padding: 2.25rem 1.25rem 3rem;
  border-top: 1px solid var(--borda);
  text-align: center;
}

.rotulo {
  display: block;
  margin-bottom: .5rem;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* O copia-e-cola do Pix tem mais de 100 caracteres. Nunca é mostrado na tela:
   vai só para a área de transferência. Botão no lugar da parede de texto. */
.botao-copiar {
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 1px solid var(--ouro);
  border-radius: 3px;
  background: transparent;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ouro-escuro);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.botao-copiar:hover,
.botao-copiar:focus-visible {
  background: var(--ouro);
  color: #fff;
  outline: none;
}

/* Pagamento fica dentro da peça, separado do botão do Instagram por uma
   linha, para não virar um amontoado de botões. */
.pagamento {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borda);
  text-align: center;
}

.pagamento[hidden] { display: none; }

.botao-pix-peca {
  display: block;
  width: 100%;
  margin-top: .7rem;
}

/* O QR só serve para quem abre no computador e escaneia com o celular.
   No celular a cliente está no próprio aparelho e não tem como escanear a
   própria tela, e o botão de copiar já resolve. Some para não virar
   enfeite no fluxo principal, que é mobile. */
.qr-pix { display: none; }

@media (min-width: 640px) {
  .qr-pix {
    display: block;
    width: 170px;
    margin: 1rem auto .3rem;
    border: 1px solid var(--borda);
    border-radius: 3px;
    overflow: hidden;
  }
}

.qr-pix svg { display: block; width: 100%; height: auto; }

/* Precisa vencer a regra da media query acima. */
.qr-pix[hidden] { display: none; }

.titular {
  display: block;
  margin: .55rem 0 0;
  font-size: .78rem;
  color: var(--texto-suave);
}

.link-insta {
  font-size: .88rem;
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid var(--ouro);
  padding-bottom: 2px;
}

.creditos {
  margin: 1.75rem 0 0;
  font-size: .7rem;
  letter-spacing: .03em;
  color: var(--texto-suave);
}

.creditos a {
  color: var(--texto-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
}

.creditos a:hover,
.creditos a:focus-visible { color: var(--ouro-escuro); }