/* ============================================================
   WOODSTONE — landing da coleção (collab Western × Arboreal), na mesma linha do site e da página do UNA,
   na paleta escura da Woodstone (pedido do dono em 25/09/2026: "vamos fazer essa página mais escura").
   Do material aprovado vêm só textos e fotos; a diagramação é desta página. Linha do site: Cabinet Grotesk 500
   (títulos), Satoshi (texto), Spline Sans Mono (rótulos e medidas); tinta, Pequiá escuro e musgo com grão, o fecho
   no verde do rodapé; texto marfim; um acento (caramelo, a madeira) na seta, no foco e no anel dos pontos da cena;
   canto curvo único em cima à direita; texto sobre foto só no véu de baixo; fotos com o filtro de cinema do site.
   Assinatura: a cena com as cinco peças, um ponto em cada uma, que desce até ela.
   Dials: energia 3, ritmo 3, movimento 2. Tudo aqui vale só em body[data-page="woodstone"].
   Estados: celular (< 640), tablet (640 a 991), computador (>= 992); a cena desliza para o lado abaixo de 768.
   ============================================================ */

body[data-page="woodstone"] {
  --w-tinta: #191711;
  --w-pequia: #3b2a1d;
  --w-musgo: #414a33;
  --w-verde: #23261b;          /* o verde Western do rodapé do site */
  --w-marfim: #f9f6ed;
  --w-caramelo: #b6926f;       /* o acento: a madeira */
  --w-regra: rgba(249, 246, 237, .2);
  --w-display: "Cabinet Grotesk", "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --w-texto: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --w-dados: "Spline Sans Mono", ui-monospace, Consolas, monospace;
  --w-saida: cubic-bezier(.16, 1, .3, 1);
  --w-canto: 2px 32px 2px 2px;
  --w-veu: linear-gradient(to top, rgba(25,23,17,.8) 0%, rgba(25,23,17,.56) 34%, rgba(25,23,17,.18) 66%, rgba(25,23,17,0) 100%);
  --w-g: var(--ws-gutter, clamp(20px, 3.5vw, 64px));
  --w-espaco: clamp(84px, 10vw, 168px);
  --w-sig: clamp(20px, 1.5vw, 24px);   /* altura do logo Western na assinatura; o nome da Arboreal fica a 45,38% */
}
/* o grão do site não passa por cima: as fotos e os fundos já trazem o grão */
body[data-page="woodstone"] .grain-bg { display: none !important; }
body[data-page="woodstone"] ::selection { background: var(--w-caramelo); color: var(--w-tinta); }

/* ---------- fundos com grão (quadrado periódico, 1:1 com o pixel da tela) ---------- */
.woodstone-pagina { background-color: var(--w-tinta); color: var(--w-marfim);
  background-image: image-set(url("../img/woodstone-site/grao-tinta-256.jpg") 1x, url("../img/woodstone-site/grao-tinta-512.jpg") 2x, url("../img/woodstone-site/grao-tinta-768.jpg") 3x); }
.woodstone-pagina .wd-em-pequia { background-color: var(--w-pequia);
  background-image: image-set(url("../img/woodstone-site/grao-pequia-256.jpg") 1x, url("../img/woodstone-site/grao-pequia-512.jpg") 2x, url("../img/woodstone-site/grao-pequia-768.jpg") 3x); }
.woodstone-pagina .wd-pedido { background-color: var(--w-musgo);
  background-image: image-set(url("../img/woodstone-site/grao-musgo-256.jpg") 1x, url("../img/woodstone-site/grao-musgo-512.jpg") 2x, url("../img/woodstone-site/grao-musgo-768.jpg") 3x); }
/* o fecho no verde do rodapé, com o mesmo grão nos dois: viram um bloco só no fim */
.woodstone-pagina .wd-fecho, body[data-page="woodstone"] .ws-footer { background-color: var(--w-verde); color: var(--w-marfim);
  background-image: image-set(url("../img/woodstone-site/grao-verde-256.jpg") 1x, url("../img/woodstone-site/grao-verde-512.jpg") 2x, url("../img/woodstone-site/grao-verde-768.jpg") 3x); }
.woodstone-pagina, .woodstone-pagina .wd-em-pequia, .woodstone-pagina .wd-pedido, .woodstone-pagina .wd-fecho,
body[data-page="woodstone"] .ws-footer { background-size: 256px 256px; background-repeat: repeat; }
body[data-page="woodstone"] .ws-footer::before { content: ""; position: absolute; top: 0; left: var(--ws-gutter, 24px); right: var(--ws-gutter, 24px); height: 1px; background: var(--w-regra); }

/* ---------- base ---------- */
.woodstone-pagina { font-family: var(--w-texto); -webkit-font-smoothing: antialiased; }
.woodstone-pagina :where(section) :is(h1, h2, h3, p, figure, ul, ol, li, dl, dt, dd) { margin: 0; padding: 0; }
.woodstone-pagina :where(section) :is(ul, ol) { list-style: none; }
.woodstone-pagina :where(section) img { display: block; max-width: none; }
.woodstone-pagina section { position: relative; }
.woodstone-pagina a:focus-visible, .woodstone-pagina button:focus-visible { outline: 2px solid var(--w-caramelo); outline-offset: 4px; border-radius: 2px; }
.woodstone-pagina figure { position: relative; overflow: hidden; }
.woodstone-pagina figure picture { display: block; width: 100%; height: 100%; }
.woodstone-pagina figure img { width: 100%; height: 100%; object-fit: cover; }

/* tipo: a marca, uma frase de cena, o título de seção, o nome da peça, o texto, o rótulo, a medida e a nota */
.woodstone-pagina .wd-marca { font: 500 clamp(56px, 8vw, 128px)/.88 var(--w-display); letter-spacing: -.048em; }
.woodstone-pagina .wd-frase { font: 500 clamp(40px, 6.4vw, 112px)/.98 var(--w-display); letter-spacing: -.042em; text-wrap: balance; }
.woodstone-pagina .wd-titulo { font: 500 clamp(34px, 4.2vw, 72px)/1.02 var(--w-display); letter-spacing: -.035em; text-wrap: balance; }
.woodstone-pagina .wd-subtitulo { font: 500 clamp(22px, 1.8vw, 30px)/1.12 var(--w-display); letter-spacing: -.02em; text-wrap: balance; }
.woodstone-pagina .wd-peca-nome { font: 500 clamp(60px, 7.4vw, 124px)/.9 var(--w-display); letter-spacing: -.05em; }
.woodstone-pagina .wd-texto { font: 400 clamp(17px, 1.3vw, 21px)/1.6 var(--w-texto); max-width: 38ch; text-wrap: pretty; }
.woodstone-pagina .wd-rotulo { font: 500 12px/1.5 var(--w-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .74; }
.woodstone-pagina .wd-dados { font: 500 clamp(13px, .95vw, 15px)/1.55 var(--w-dados); letter-spacing: .03em; font-variant-numeric: lining-nums tabular-nums; }
.woodstone-pagina .wd-nota { font: 400 clamp(14.5px, 1vw, 16px)/1.5 var(--w-texto); max-width: 52ch; opacity: .74; }

/* véu: o texto sobre foto mora só no escuro de baixo */
.woodstone-pagina .wd-veu { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; pointer-events: none; background: var(--w-veu); z-index: 1; }

/* botão: uma ação de verdade (abre o WhatsApp); a seta diz que o toque sai da página */
.woodstone-pagina .wd-botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px; padding: 0 22px 0 26px;
  background: var(--w-marfim); color: var(--w-tinta); border-radius: 2px 16px 2px 2px; text-decoration: none;
  font: 500 clamp(17px, 1.25vw, 20px)/1 var(--w-display); letter-spacing: -.01em; transition: transform .3s var(--w-saida); }
.woodstone-pagina .wd-seta { width: 26px; height: 26px; flex: none; }
.woodstone-pagina .wd-seta path { fill: none; stroke: var(--w-caramelo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--w-saida); }
@media (hover: hover) {
  .woodstone-pagina .wd-botao:hover { transform: translateY(-2px); }
  .woodstone-pagina :is(.wd-botao, .wd-consulta):hover .wd-seta path { transform: translate(3px, -3px); }
}
.woodstone-pagina .wd-botao:active { transform: translateY(0); }

/* a assinatura collab: "uma collab artesanal" + Western × Arboreal, as letras dos dois na mesma altura */
.woodstone-pagina .wd-assinatura { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.woodstone-pagina .wd-assinatura > span:first-child { font: italic 400 clamp(15px, 1.1vw, 18px)/1 var(--w-texto); letter-spacing: .01em; opacity: .82; }
/* a dupla de logos não se separa: se não couber, desce inteira para a linha de baixo */
.woodstone-pagina .wd-assinatura-dupla { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.woodstone-pagina .wd-assinatura-western { height: var(--w-sig); width: auto; }
.woodstone-pagina .wd-assinatura i { font: 300 clamp(15px, 1.1vw, 18px)/1 var(--w-display); font-style: normal; opacity: .55; }
.woodstone-pagina .wd-assinatura-arboreal { height: calc(var(--w-sig) * .4538); width: auto; position: relative; top: 1px; }

/* ============================================================ 1. abertura: a pedra de borda a borda; o texto sai do escuro
   à esquerda (a pedra ocupa quase a largura toda da foto, então o véu vem da esquerda e de baixo e o texto mora nele) */
.woodstone-pagina .wd-abre { height: 100svh; min-height: 640px; max-height: 1100px; overflow: hidden; color: var(--w-marfim); }
.woodstone-pagina .wd-abre-foto { position: absolute; inset: 0; }
.woodstone-pagina .wd-abre-veu { height: 100%;
  background: linear-gradient(to right, rgba(25,23,17,.92) 0%, rgba(25,23,17,.78) 24%, rgba(25,23,17,.34) 46%, rgba(25,23,17,0) 64%),
              linear-gradient(to top, rgba(25,23,17,.72) 0%, rgba(25,23,17,0) 44%); }
.woodstone-pagina .wd-abre-texto { position: absolute; z-index: 2; left: var(--w-g); bottom: clamp(34px, 7vh, 84px); width: min(38vw, 600px);
  display: grid; gap: 22px; justify-items: start; }
.woodstone-pagina .wd-abre .wd-marca { font-size: clamp(56px, 7.2vw, 116px); text-shadow: 0 0 24px #19171166; }
.woodstone-pagina .wd-abre-pe { display: grid; gap: 20px; justify-items: start; }
.woodstone-pagina .wd-abre-frase { font: 500 clamp(30px, 3vw, 52px)/1.04 var(--w-display); letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }
.woodstone-pagina .wd-abre-linha { font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--w-texto); opacity: .82; max-width: 34ch; }
.woodstone-pagina .wd-abre .wd-assinatura { margin-top: 6px; }
.woodstone-pagina .wd-abre .wd-botao { margin-top: 10px; }

/* ============================================================ 2. a coleção: a cena é o índice da página */
.woodstone-pagina .wd-colecao { padding: var(--w-espaco) 0; }
.woodstone-pagina .wd-colecao-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; padding: 0 var(--w-g); }
.woodstone-pagina .wd-colecao-cabeca .wd-titulo { grid-column: 1 / span 7; }
.woodstone-pagina .wd-colecao-cabeca .wd-texto { grid-column: 9 / -1; }
.woodstone-pagina .wd-cena { margin-top: clamp(48px, 5vw, 88px); }
.woodstone-pagina .wd-cena-quadro { position: relative; }
.woodstone-pagina .wd-cena-imagem { position: relative; width: 100%; aspect-ratio: 3168 / 1344; }
.woodstone-pagina .wd-cena-imagem > img { width: 100%; height: 100%; object-fit: cover; }

/* um ponto por peça: o toque de 44 px centrado no ponto; a placa com o nome ao lado; o tipo abre ao passar o mouse
   (só com mouse: no toque, um :hover que mostra conteúdo faz o iPhone pedir dois toques, e o primeiro só abria o
   tipo; o toque agora vai direto à peça) */
.woodstone-pagina .wd-ponto { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 2;
  color: var(--w-tinta); text-decoration: none; transition: opacity .45s ease; }
.woodstone-pagina .wd-ponto::before, .woodstone-pagina .wd-ponto::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.woodstone-pagina .wd-ponto::before { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--w-marfim); z-index: 1; }
.woodstone-pagina .wd-ponto::after { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid var(--w-caramelo); background: rgba(25, 23, 17, .28);
  transition: transform .5s var(--w-saida); }
.woodstone-pagina .wd-ponto-placa { position: absolute; top: 50%; left: 44px; transform: translateY(-50%); display: grid; width: max-content; padding: 9px 13px 8px;
  background: var(--w-marfim); border-radius: 2px 12px 2px 2px; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(25, 23, 17, .7); }
.woodstone-pagina .wd-ponto--esq .wd-ponto-placa { left: auto; right: 44px; }
.woodstone-pagina .wd-ponto-nome { font: 500 16px/1 var(--w-display); letter-spacing: -.01em; }
.woodstone-pagina .wd-ponto-tipo { display: none; font: 500 10.5px/1 var(--w-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.woodstone-pagina .wd-ponto:focus-visible .wd-ponto-tipo { display: block; margin-top: 6px; animation: wd-aparece .4s var(--w-saida); }
@keyframes wd-aparece { from { opacity: 0; transform: translateY(-3px); } to { opacity: .72; transform: none; } }
.woodstone-pagina .wd-ponto:is(:focus-visible, :active)::after { transform: scale(1.18); }
.woodstone-pagina .wd-ponto:focus-visible { outline-offset: -2px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .woodstone-pagina .wd-ponto:hover .wd-ponto-tipo { display: block; margin-top: 6px; animation: wd-aparece .4s var(--w-saida); }
  .woodstone-pagina .wd-ponto:hover::after { transform: scale(1.18); }
  .woodstone-pagina .wd-cena-imagem:has(.wd-ponto:hover) .wd-ponto:not(:hover) { opacity: .45; }
}

.woodstone-pagina .wd-colecao-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px var(--w-g) 0; }
.woodstone-pagina .wd-legenda { display: flex; flex-wrap: wrap; align-items: baseline; font: 500 12px/1.4 var(--w-dados); letter-spacing: .12em; text-transform: uppercase; }
.woodstone-pagina .wd-legenda span { margin-right: 12px; opacity: .7; }
.woodstone-pagina .wd-legenda a { color: inherit; text-decoration: none; padding: 12px 0; }
.woodstone-pagina .wd-legenda a + a::before { content: "·"; margin: 0 10px; opacity: .5; }
@media (hover: hover) { .woodstone-pagina .wd-legenda a:hover { color: var(--w-caramelo); } }
.woodstone-pagina .wd-dica { display: none; }

/* ============================================================ 3. a madeira e a pedra: cena de borda a borda */
.woodstone-pagina .wd-plena { position: relative; height: 100svh; min-height: 620px; max-height: 1100px; overflow: hidden; color: var(--w-marfim); }
.woodstone-pagina .wd-plena-foto { position: absolute; inset: 0; }
.woodstone-pagina .wd-plena-texto { position: absolute; z-index: 2; left: var(--w-g); right: var(--w-g); bottom: clamp(40px, 8vh, 96px); display: grid; gap: 22px; }
.woodstone-pagina .wd-plena-texto > * { text-shadow: 0 0 14px #19171180; }
.woodstone-pagina .wd-plena .wd-texto { max-width: 34ch; opacity: .92; }

/* ============================================================ 4 a 8. as cinco peças, cada uma com o seu desenho */
.woodstone-pagina .wd-peca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: center;
  padding: var(--w-espaco) var(--w-g); }
.woodstone-pagina .wd-peca-texto { display: grid; gap: 16px; align-content: start; justify-items: start; }
.woodstone-pagina .wd-peca-texto > .wd-texto { margin-top: 12px; }
/* a ficha da peça: a medida, onde indicar e o link, sempre juntos */
.woodstone-pagina .wd-peca-ficha { display: grid; gap: 16px; justify-items: start; }
.woodstone-pagina .wd-peca-foto { border-radius: var(--w-canto); }
.woodstone-pagina .wd-onde { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--w-regra); max-width: 40ch;
  font: 400 clamp(15px, 1.05vw, 17px)/1.5 var(--w-texto); }
.woodstone-pagina .wd-onde span:last-child { opacity: .88; }
.woodstone-pagina .wd-consulta { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 6px; padding: 10px 0;
  color: var(--w-marfim); text-decoration: none; border-bottom: 1px solid rgba(182, 146, 111, .7);
  font: 500 clamp(16px, 1.15vw, 18px)/1.2 var(--w-display); letter-spacing: -.01em; }
.woodstone-pagina .wd-consulta .wd-seta { width: 22px; height: 22px; }
/* em exposição na HIO: a etiqueta marfim no canto da foto, como no material */
.woodstone-pagina .wd-selo { position: absolute; z-index: 3; left: 14px; bottom: 14px; padding: 9px 12px 8px; background: var(--w-marfim); color: var(--w-tinta);
  border-radius: 2px 12px 2px 2px; font: 500 11.5px/1 var(--w-dados); letter-spacing: .12em; text-transform: uppercase; }

/* duo (Gaia; o Elo em espelho): uma foto só, em pé, e o texto do outro lado (o dono pediu uma foto por peça: com
   o detalhe ao lado, pareciam dois produtos) */
.woodstone-pagina .wd-peca--duo .wd-peca-texto { grid-column: 1 / span 5; grid-row: 1; }
.woodstone-pagina .wd-peca--duo .wd-peca-foto { grid-column: 7 / -1; grid-row: 1; aspect-ratio: 4 / 5; }
.woodstone-pagina .wd-peca--espelho .wd-peca-foto { grid-column: 1 / span 6; }
.woodstone-pagina .wd-peca--espelho .wd-peca-texto { grid-column: 8 / -1; }
/* quadrada (o Elo): as duas mesas inteiras no quadro, como no material (06/10: "a foto do Elo saiu cortada") */
.woodstone-pagina .wd-peca--quadrada .wd-peca-foto { aspect-ratio: 1; }
/* lado (Núcleo): a foto sai pela borda esquerda, o texto responde à direita */
.woodstone-pagina .wd-peca--lado .wd-peca-foto { grid-column: 1 / span 7; grid-row: 1; margin-left: calc(var(--w-g) * -1); aspect-ratio: 4 / 3; border-radius: 0 32px 2px 0; }
.woodstone-pagina .wd-peca--lado .wd-peca-texto { grid-column: 9 / -1; grid-row: 1; }
/* larga (Origem, o banco comprido, e a Ágora): a foto na largura toda, o texto numa linha de três colunas embaixo */
.woodstone-pagina .wd-peca--larga { align-items: start; }
.woodstone-pagina .wd-peca--larga .wd-peca-foto { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.woodstone-pagina .wd-peca--larga .wd-peca-texto { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px; row-gap: 16px; align-items: start; }
.woodstone-pagina .wd-peca--larga .wd-peca-nome { grid-column: 1 / span 4; grid-row: 1; }
.woodstone-pagina .wd-peca--larga .wd-peca-tipo { grid-column: 1 / span 4; grid-row: 2; }
.woodstone-pagina .wd-peca--larga .wd-peca-texto > .wd-texto { grid-column: 5 / span 4; grid-row: 1 / span 3; margin: 0; }
.woodstone-pagina .wd-peca--larga .wd-peca-ficha { grid-column: 9 / -1; grid-row: 1 / span 3; }
/* Ágora, a maior: a foto inteira de borda a borda, sem corte e sem véu sobre a peça (pedido do dono: "precisamos
   exibir o produto") */
.woodstone-pagina .wd-peca--agora .wd-peca-foto { margin: 0 calc(var(--w-g) * -1); aspect-ratio: 2528 / 1696; border-radius: 0; }

/* ============================================================ 9. a pedra em cinco tons: a placa do Elo em Carbono em
   estúdio e a cartela, como no material (06/10). Os cards têm a textura real e o nome embaixo; a base dos cards e a da
   placa ficam na mesma linha, e os nomes na linha da legenda da placa (os dois rótulos ocupam 14 + 18 px) */
.woodstone-pagina .wd-tons { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(40px, 4vw, 64px); padding: var(--w-espaco) var(--w-g); align-items: end; }
.woodstone-pagina .wd-tons-texto { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.woodstone-pagina .wd-tons-texto .wd-titulo { grid-column: 1 / span 7; }
.woodstone-pagina .wd-tons-texto .wd-texto { grid-column: 9 / -1; }
.woodstone-pagina .wd-tons-placa { grid-column: 1 / span 7; display: grid; gap: 14px; overflow: visible; }
.woodstone-pagina .wd-tons-foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--w-canto); }
.woodstone-pagina .wd-tons-placa figcaption { line-height: 18px; }
.woodstone-pagina .wd-cartela { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, .8vw, 12px); }
.woodstone-pagina .wd-card { display: grid; gap: 14px; }
.woodstone-pagina .wd-amostra { aspect-ratio: .65; border-radius: 2px 14px 2px 2px; }
.woodstone-pagina .wd-card-nome { font: 500 11px/18px var(--w-dados); letter-spacing: .1em; text-transform: uppercase; opacity: .86; white-space: nowrap; }

/* ============================================================ 10. valores sob consulta e do pedido à sua casa, no musgo */
.woodstone-pagina .wd-pedido { display: grid; row-gap: clamp(64px, 7vw, 120px); padding: var(--w-espaco) var(--w-g); }
.woodstone-pagina .wd-pedido-linha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: start; }
.woodstone-pagina .wd-pedido-cabeca { grid-column: 1 / span 5; display: grid; gap: 22px; align-content: start; }
.woodstone-pagina .wd-pedido-cabeca .wd-texto { text-wrap: balance; }
/* a lista começa na mesma coluna das etapas do pedido, embaixo */
.woodstone-pagina .wd-pedido-valores { grid-column: 6 / -1; display: grid; gap: 24px; justify-items: start; }
/* a lista do material: a peça e o tipo à esquerda, as medidas à direita, entre filetes */
.woodstone-pagina .wd-valores { width: 100%; border-bottom: 1px solid var(--w-regra); }
.woodstone-pagina .wd-valores li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 24px; row-gap: 4px;
  padding: 16px 0 15px; border-top: 1px solid var(--w-regra); }
.woodstone-pagina .wd-valores-peca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.woodstone-pagina .wd-valores-nome { font: 500 clamp(22px, 1.8vw, 28px)/1.1 var(--w-display); letter-spacing: -.02em; }
.woodstone-pagina .wd-valores .wd-dados { text-align: right; }
.woodstone-pagina .wd-pedido-valores .wd-nota { margin-top: -4px; max-width: 60ch; }
.woodstone-pagina .wd-caminho { border-top: 1px solid var(--w-regra); padding-top: clamp(28px, 3vw, 44px); }
.woodstone-pagina .wd-caminho > .wd-subtitulo { grid-column: 1 / span 4; }
.woodstone-pagina .wd-etapas { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(18px, 2vw, 36px); row-gap: 30px; }
.woodstone-pagina .wd-etapas div { display: grid; gap: 8px; align-content: start; }
.woodstone-pagina .wd-etapas dt { font: 500 11.5px/1.5 var(--w-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .76; }
.woodstone-pagina .wd-etapas dd { font: 400 clamp(16px, 1.15vw, 18px)/1.5 var(--w-texto); max-width: 36ch; }

/* ============================================================ 11. fecho, no verde do rodapé */
.woodstone-pagina .wd-fecho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(40px, 4vw, 72px); padding: var(--w-espaco) var(--w-g); }
.woodstone-pagina .wd-fecho-cabeca { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.woodstone-pagina .wd-marca--fecho { font-size: clamp(40px, 4.4vw, 72px); }
.woodstone-pagina .wd-fecho-frase { grid-column: 1 / span 8; }
.woodstone-pagina .wd-fecho-acao { grid-column: 9 / -1; display: grid; gap: 18px; align-content: end; justify-items: start; }
.woodstone-pagina .wd-numero { font: 300 clamp(34px, 3.2vw, 56px)/1 var(--w-display); letter-spacing: -.03em; color: inherit; text-decoration: none; margin-top: 12px; font-variant-numeric: lining-nums; }
.woodstone-pagina .wd-fecho .wd-nota { margin-top: 10px; }
/* para ver Gaia e Origem: o endereço da HIO, como no fecho do material (decisão do dono, 06/10) */
.woodstone-pagina .wd-hio { display: grid; gap: 8px; margin-top: 14px; max-width: 46ch; font: 400 clamp(15px, 1.05vw, 17px)/1.5 var(--w-texto); }
.woodstone-pagina .wd-hio span:last-child { opacity: .88; }

/* ============================================================ movimento (só com JS e sem "reduzir movimento") */
.wd-vivo .woodstone-pagina .wd-camera img { transform: scale(calc(1.02 + .08 * var(--p, 0))); transform-origin: 50% 58%; }
.wd-vivo .woodstone-pagina .wd-camera.wd-perto img { will-change: transform; }
.wd-vivo .woodstone-pagina .wd-sussurro { opacity: 0; filter: blur(14px); transform: translateY(14px); }
.wd-vivo .woodstone-pagina .wd-ouvindo .wd-sussurro { opacity: 1; filter: blur(0); transform: none;
  transition: opacity 1.9s var(--w-saida), filter 2.3s var(--w-saida), transform 2.3s var(--w-saida); }
.wd-vivo .woodstone-pagina .wd-ouvindo .wd-sussurro + .wd-sussurro { transition-delay: .5s; }
.wd-vivo .woodstone-pagina .wd-abre-foto img { animation: wd-assenta 2.8s var(--w-saida) .2s both; }
.wd-vivo .woodstone-pagina :is(.wd-marca, .wd-abre-pe > *) { animation: wd-sobe 1.4s var(--w-saida) both; }
.wd-vivo .woodstone-pagina .wd-abre-pe > :nth-child(1) { animation-delay: .14s; }
.wd-vivo .woodstone-pagina .wd-abre-pe > :nth-child(2) { animation-delay: .24s; }
.wd-vivo .woodstone-pagina .wd-abre-pe > :nth-child(3) { animation-delay: .34s; }
.wd-vivo .woodstone-pagina .wd-abre-pe > :nth-child(4) { animation-delay: .44s; }
.wd-vivo .woodstone-pagina .wd-fecho .wd-marca { animation: none; }
/* a cena acende as peças da esquerda para a direita, como luzes, na primeira vez que aparece */
.wd-vivo .woodstone-pagina .wd-cena:not(.wd-acesa) .wd-ponto { opacity: 0; }
.wd-vivo .woodstone-pagina .wd-cena.wd-acesa .wd-ponto { animation: wd-acende 1.1s var(--w-saida) backwards; animation-delay: calc(var(--i) * 160ms + 120ms); }
@keyframes wd-assenta { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes wd-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wd-acende { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* ============================================================ tablet (640 a 991): uma coluna com respiro */
@media (max-width: 991.98px) {
  /* a abertura na foto em pé (4:5), o texto no véu de baixo, como no UNA */
  .woodstone-pagina .wd-abre-veu { height: 80%; background: linear-gradient(to top, rgba(25,23,17,.9) 0%, rgba(25,23,17,.7) 38%, rgba(25,23,17,.24) 70%, rgba(25,23,17,0) 100%); }
  .woodstone-pagina .wd-abre-texto { right: var(--w-g); width: auto; bottom: 34px; gap: 18px; }
  .woodstone-pagina .wd-abre .wd-marca { font-size: clamp(56px, 12vw, 104px); }
  .woodstone-pagina .wd-abre-frase { max-width: 18ch; }
  .woodstone-pagina .wd-colecao-cabeca, .woodstone-pagina .wd-tons-texto, .woodstone-pagina .wd-pedido-linha,
  .woodstone-pagina .wd-fecho { grid-template-columns: 1fr; }
  /* com body[data-page] na frente para vencer as regras de coluna do computador (que têm três classes) */
  body[data-page="woodstone"] .woodstone-pagina :is(.wd-colecao-cabeca, .wd-tons-texto, .wd-pedido-linha, .wd-fecho) > * { grid-column: 1 / -1; }
  /* peças: a foto em cima, o texto embaixo */
  .woodstone-pagina .wd-peca { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 36px; }
  .woodstone-pagina .wd-peca--duo .wd-peca-foto { grid-column: 1 / span 9; grid-row: 1; }
  .woodstone-pagina .wd-peca--espelho .wd-peca-foto { grid-column: 4 / -1; }
  .woodstone-pagina .wd-peca--duo .wd-peca-texto, .woodstone-pagina .wd-peca--lado .wd-peca-texto { grid-column: 1 / -1; grid-row: 2; }
  .woodstone-pagina .wd-peca--lado .wd-peca-foto { grid-column: 1 / -1; margin: 0 calc(var(--w-g) * -1); border-radius: 0; }
  .woodstone-pagina .wd-peca--larga .wd-peca-texto { grid-template-columns: 1fr; }
  .woodstone-pagina .wd-peca--larga .wd-peca-texto > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .woodstone-pagina .wd-tons-placa, .woodstone-pagina .wd-cartela { grid-column: 1 / -1; }
  .woodstone-pagina .wd-cartela { max-width: 640px; }
  .woodstone-pagina .wd-caminho > .wd-subtitulo, .woodstone-pagina .wd-etapas, .woodstone-pagina .wd-pedido-valores { grid-column: 1 / -1; }
  .woodstone-pagina .wd-fecho-frase, .woodstone-pagina .wd-fecho-acao { grid-column: 1 / -1; }
}

/* ============================================================ a cena desliza para o lado (< 768): o dedo passeia pela casa */
@media (max-width: 767.98px) {
  .woodstone-pagina .wd-cena-quadro { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .woodstone-pagina .wd-cena-quadro::-webkit-scrollbar { display: none; }
  .woodstone-pagina .wd-cena-imagem { --alto: min(62svh, 560px); height: var(--alto); width: calc(var(--alto) * 3168 / 1344); aspect-ratio: auto; }
  .woodstone-pagina .wd-colecao-pe { flex-direction: column; }
  .woodstone-pagina .wd-legenda span { flex-basis: 100%; margin: 0 0 2px; }
  .woodstone-pagina .wd-dica { display: block; font: italic 400 14px/1.4 var(--w-texto); opacity: .72; }
}

/* ============================================================ celular (< 640): uma coluna, na escala do telefone */
@media (max-width: 639.98px) {
  body[data-page="woodstone"] { --w-espaco: 76px; }
  .woodstone-pagina .wd-abre { height: 92svh; min-height: 600px; }
  .woodstone-pagina .wd-abre-texto { bottom: 28px; gap: 16px; }
  .woodstone-pagina .wd-abre-pe { gap: 16px; }
  .woodstone-pagina .wd-abre .wd-botao { width: 100%; }
  .woodstone-pagina .wd-plena { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
  .woodstone-pagina .wd-plena-texto { bottom: 30px; gap: 14px; }
  .woodstone-pagina .wd-plena .wd-frase { font-size: clamp(38px, 10.5vw, 48px); }
  .woodstone-pagina .wd-peca { row-gap: 30px; }
  .woodstone-pagina .wd-peca--duo .wd-peca-foto { grid-column: 1 / -1; margin: 0 calc(var(--w-g) * -1); border-radius: 0; }
  .woodstone-pagina .wd-peca--larga .wd-peca-foto { margin: 0 calc(var(--w-g) * -1); border-radius: 0; aspect-ratio: 4 / 3; }
  .woodstone-pagina .wd-peca--agora .wd-peca-foto { aspect-ratio: 2528 / 1696; }
  .woodstone-pagina .wd-peca--quadrada .wd-peca-foto { aspect-ratio: 4 / 3; }
  .woodstone-pagina .wd-cartela { gap: 8px; }
  .woodstone-pagina .wd-card { gap: 10px; }
  .woodstone-pagina .wd-card-nome { font-size: 10px; letter-spacing: .06em; }
  .woodstone-pagina .wd-valores li { grid-template-columns: 1fr; }
  .woodstone-pagina .wd-valores .wd-dados { text-align: left; }
  .woodstone-pagina .wd-etapas { grid-template-columns: 1fr; }
  .woodstone-pagina .wd-fecho-acao .wd-botao { width: 100%; }
}