/* ==========================================================================
   PISO LAMINADO E VINÍLICO: o chão muda tudo
   Ideia do Gustavo (Forros-Plano/01-EXPERIENCIA-POR-PAGINA.md):
   1) tela cheia, o chão em perspectiva: as réguas encaixam fileira por
      fileira sobre o contrapiso e, quando o chão fecha, a luz vira de fria
      para quente e o visitante escolhe o piso;
   2) uma régua abre em camadas, laminado ou vinílico, sem virar tabela;
   3) o visitante troca o sentido das réguas e o padrão do piso.
   As réguas são as fotos de produto tiradas do PSD do catálogo.
   ========================================================================== */

/* ---------- 1. a cena ----------
   Tela cheia, no mesmo desenho do forro: o chão deitado em perspectiva ocupa
   o quadro inteiro, com o contrapiso cru aparecendo. As fileiras de réguas
   encaixam da frente para o fundo, a luz fria vira sol de fim de tarde
   entrando pela janela, e no fecho o visitante troca o piso ali mesmo. */
.piso-cena {
  position: relative;
  height: 400vh;
  background: #100E0C;
}

.piso-stage {
  --piso: 0;
  --enche: clamp(0, calc((var(--piso) - 0.08) / 0.56), 1);
  --luz: clamp(0, calc((var(--piso) - 0.6) / 0.18), 1);
  --fim: clamp(0, calc((var(--piso) - 0.66) / 0.14), 1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #100E0C;
  perspective: 1100px;
  perspective-origin: 50% 40%;
}

/* o plano do chão: mesma geometria calibrada do teto do forro, que lá é
   olhar para cima e aqui é olhar para baixo. A ponta perto fica embaixo da
   tela, a longe sobe e encolhe. */
.piso-plano {
  position: absolute;
  left: -170%;
  right: -170%;
  top: -300%;
  bottom: -4%;
  transform: rotateX(53deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.piso-contrapiso {
  position: absolute;
  inset: 0;
  /* 29/09 (noite): era o reboco.png em multiply sobre um degradê, e o Firefox
     refazia a mescla no plano inteiro a cada quadro (a cena levava 0,4 s por
     quadro). A mescla agora vem pronta na imagem, com a cor do degradê no meio
     da tela (#7A766F); sem filter desde a tarde (o plano tem 4 telas de largura) */
  background: url('../img/texturas/cena/reboco-contrapiso.jpg') 0 0 / 420px 420px;
}

.piso-reguas {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--fileiras, 18), 1fr);
  transform-style: preserve-3d;
}
.piso-fileira {
  --p: clamp(0, calc((var(--enche) - var(--atraso) * 0.78) / 0.22), 1);
  position: relative;
  display: flex;
  overflow: visible;
  transform: translate3d(calc(var(--lado) * 22% * (1 - var(--p))), 0, calc(120px * (1 - var(--p))));
  opacity: clamp(0, calc(var(--p) * 2.6), 1);
  will-change: transform, opacity;
}
.piso-tabua {
  position: relative;
  flex: none;
  height: 100%;
  background-image: var(--tex);
  background-size: var(--bw, 1600px) calc(100% * var(--linhas, 4));
  background-position: var(--bx, 0) var(--by, 0);
  background-repeat: repeat-x;
  box-shadow: inset 0 -2px 0 rgba(22, 14, 8, 0.38), inset -2px 0 0 rgba(22, 14, 8, 0.3), inset 0 2px 0 rgba(255, 246, 232, 0.07);
}
/* cada tábua com um tom levemente próprio, como no piso de verdade, e a
   penumbra que levanta quando a luz entra. 29/09 (noite): eram um ::before e
   um ::after em cada tábua (235 na abertura e 440 no cômodo, 1.350 camadas
   repintadas a cada quadro). O tom foi para o background da tábua (regra
   .piso-tabua mais abaixo; o piso.js já dobra o alfa, que antes vinha duas
   vezes) e a penumbra, a mesma, para a fileira inteira. No cômodo o --luz não
   existe e a penumbra ficava sempre inteira: continua assim. */
.piso-fileira::after,
.piso-fila::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 8, 0.46);
  pointer-events: none;
}
.piso-fileira::after { opacity: calc(1 - 0.95 * var(--luz)); }

/* o sol de fim de tarde entra pela janela e deita no chão, dentro do plano,
   então ganha a mesma perspectiva das réguas */
.piso-sol {
  position: absolute;
  left: 38%;
  bottom: 2%;
  width: 24%;
  height: 34%;
  /* 29/09: sem blur nem soft-light (dentro do plano 3D travava o Firefox): o
     degradê já é macio e a luz entra por cima, transparente */
  background: radial-gradient(60% 55% at 50% 70%, rgba(255, 228, 180, 0.34) 0%, rgba(255, 214, 150, 0.14) 55%, rgba(255, 214, 150, 0) 100%);
  transform: skewX(-26deg);
  transform-origin: 50% 100%;
  opacity: calc(var(--luz) * 0.9);
  pointer-events: none;
}

/* luz fria antes, calor depois: cobre o quadro todo, fora do plano */
.piso-frio {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34, 46, 70, 0.26) 0%, rgba(26, 32, 44, 0.14) 100%);
  opacity: calc(1 - var(--luz));
  pointer-events: none;
}
.piso-quente {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 62% 58%, rgba(255, 200, 130, 0.12) 0%, rgba(255, 196, 120, 0) 70%),
    linear-gradient(180deg, rgba(40, 24, 10, 0.16) 0%, rgba(255, 190, 110, 0.03) 60%, rgba(20, 12, 6, 0.1) 100%);
  opacity: var(--luz);
  pointer-events: none;
}
.piso-vinheta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 100% at 50% 62%, rgba(8, 6, 4, 0) 40%, rgba(8, 6, 4, 0.85) 100%);
}

/* ---------- o texto da cena ---------- */
.piso-txt { position: absolute; inset: 0; pointer-events: none; }
.piso-bruma {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(130vw, 1100px);
  height: min(56vh, 460px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(8, 6, 4, 0.74) 0%, rgba(8, 6, 4, 0.44) 52%, rgba(8, 6, 4, 0) 100%);
  opacity: calc(1 - var(--piso) * 3.1);
}
.piso-kicker {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFC40E;
}
.piso-t1 {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(90vw, 17ch);
  transform: translate(-50%, calc(-50% - 28px * var(--piso)));
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.06;
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  color: #F7F2E9;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.92), 0 1px 4px rgba(0, 0, 0, 0.8);
  opacity: calc(1 - var(--piso) * 3.1);
}
.piso-t1 .piso-kicker { font-size: 0.72rem; letter-spacing: 0.12em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
.piso-t2 {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 56px);
  transform: translate(-50%, calc(22px * (1 - var(--fim))));
  width: min(92vw, 660px);
  text-align: center;
  opacity: var(--fim);
}
.piso-t2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -60vw;
  right: -60vw;
  top: -30%;
  bottom: -40%;
  background: linear-gradient(180deg, rgba(8, 6, 4, 0) 0%, rgba(8, 6, 4, 0.7) 18%, rgba(8, 6, 4, 0.8) 60%, rgba(8, 6, 4, 0.86) 100%);
  pointer-events: none;
}
.piso-t2 h2 {
  font-size: clamp(1.35rem, 3.2vw, 2.3rem);
  color: #FFFFFF;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 12px;
  text-wrap: balance;
}
.piso-t2 p {
  font-size: clamp(0.92rem, 1.5vw, 1.02rem);
  line-height: 1.65;
  color: #EFE7DA;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
  max-width: 58ch;
  margin: 0 auto;
}
.piso-cortina {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(8, 6, 4, 0) 0%, rgba(8, 6, 4, 0.5) 44%, rgba(8, 6, 4, 0.93) 100%);
  opacity: var(--fim);
}
.piso-dica {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.4vh, 34px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D8CDB9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  opacity: calc(1 - var(--piso) * 7);
  pointer-events: none;
}
.piso-dica span {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, #D8CDB9 0%, rgba(216, 205, 185, 0) 100%);
  animation: ripa-desce 1.9s var(--ease-saida) infinite;
}

/* os pisos para escolher no fecho: ficam fora do Tab até o chão fechar */
.piso-tons {
  margin-top: clamp(14px, 2.6vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  visibility: hidden;
  pointer-events: none;
}
.piso-tons.tons-ativos { visibility: visible; pointer-events: auto; }
.piso-tons-rotulo {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D8CDB9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.piso-tons-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.piso-tom {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid rgba(247, 242, 233, 0.3);
  border-radius: 4px;
  background: rgba(10, 9, 8, 0.62);
  color: #F7F2E9;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.piso-tom:hover { border-color: var(--yellow); }
.piso-tom:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.piso-tom[aria-pressed="true"] { border-color: var(--yellow); background: rgba(58, 45, 8, 0.8); }
.piso-tom-amostra {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.piso-tom[data-piso="carvalho-americano"] .piso-tom-amostra { background-image: url('../img/texturas/cena/piso-carvalho-americano.jpg'); }
.piso-tom[data-piso="carvalho-crema"] .piso-tom-amostra { background-image: url('../img/texturas/cena/piso-carvalho-crema.jpg'); }
.piso-tom[data-piso="nobre-castanha"] .piso-tom-amostra { background-image: url('../img/texturas/cena/piso-nobre-castanha.jpg?v=2'); }
.piso-tom[data-piso="duna"] .piso-tom-amostra { background-image: url('../img/texturas/cena/piso-duna-lvt.jpg'); }
.piso-tom-ficha { font-size: 0.84rem; line-height: 1.5; color: #EFE7DA; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95); }
.piso-tom-link { margin-left: 6px; color: var(--yellow); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 2. por dentro da régua ---------- */
.piso-camadas {
  --abre: 0;
  background:
    radial-gradient(80% 70% at 78% 40%, rgba(255, 196, 14, 0.08) 0%, rgba(255, 196, 14, 0) 60%),
    #F4F0EA;
  color: var(--navy);
  padding: clamp(64px, 9vw, 110px) 0;
}
.piso-camadas.aberto { --abre: 1; }
.piso-camadas-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.piso-camadas h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: 14px; text-wrap: balance; }
.piso-camadas-txt > p { color: #4D5568; line-height: 1.65; max-width: 52ch; }
.piso-camadas .piso-kicker { color: #8A5A00; }
.piso-tipo { display: inline-flex; margin: 22px 0 18px; border: 1.5px solid var(--navy); border-radius: 4px; overflow: hidden; }
.piso-tipo button {
  padding: 10px 18px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.piso-tipo button[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; }
.piso-tipo button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
.piso-legenda { margin: 0; display: grid; gap: 2px; counter-reset: camada; }
.piso-legenda > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid #DDD6CB;
}
.piso-legenda > div::before {
  counter-increment: camada;
  content: counter(camada);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #8A5A00;
}
.piso-legenda dt { font-weight: 700; }
.piso-legenda dd { margin: 0; color: #4D5568; font-size: 0.94rem; line-height: 1.5; }
.piso-camadas [data-mostra] { display: none; }
.piso-camadas[data-tipo="laminado"] [data-mostra="laminado"],
.piso-camadas[data-tipo="vinilico"] [data-mostra="vinilico"] { display: grid; }
.piso-camadas[data-tipo="laminado"] p[data-mostra="laminado"],
.piso-camadas[data-tipo="vinilico"] p[data-mostra="vinilico"] { display: block; }
.piso-quando { margin-top: 14px; padding: 12px 14px; background: #FFFFFF; border-left: 3px solid #FFC40E; font-size: 0.94rem; line-height: 1.5; }

/* a régua em 3D, com as camadas se afastando */
.piso-regua3d {
  position: relative;
  height: clamp(300px, 36vw, 440px);
  perspective: 1400px;
}
.piso-regua3d-corpo {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(90%, 520px);
  aspect-ratio: 3.2;
  transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-24deg);
  transform-style: preserve-3d;
}
.piso-camada {
  position: absolute;
  inset: 0;
  transform: translateZ(calc((var(--z) * (4px + 46px * var(--abre)))));
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.4s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 calc(10px + 20px * var(--abre)) 30px rgba(20, 20, 30, 0.18);
}
.piso-camada::after {
  content: attr(data-n);
  position: absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%) rotateZ(24deg) rotateX(-60deg);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: #8A5A00;
  opacity: var(--abre);
  transition: opacity 0.6s ease 0.4s;
}
.piso-camada.c4 { --z: 0; background: #D9CCB4; }
.piso-camada.c3 { --z: 1; background: linear-gradient(90deg, #B98D5F, #A67B50); }
.piso-camada.c2 { --z: 2; background: url('../img/texturas/cena/piso-andorra-regua.jpg') 0 0 / cover; }
.piso-camada.c1 {
  --z: 3;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0.28) 62%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 calc(10px + 20px * var(--abre)) 30px rgba(20, 20, 30, 0.1);
}
.piso-camadas[data-tipo="vinilico"] .piso-camada.c3 { background: linear-gradient(90deg, #A7ACAE, #8E9497); }
.piso-camadas[data-tipo="vinilico"] .piso-camada.c4 { background: #3E4744; }
.piso-camadas[data-tipo="vinilico"] .piso-camada.c2 { background-image: url('../img/texturas/cena/piso-canela-lvt.jpg'); }

/* ---------- 3. o sentido das réguas ---------- */
.piso-sentido {
  --ang: 0deg;
  background: #1F1D1A;
  color: #F4EEE6;
  padding: clamp(64px, 9vw, 104px) 0;
}
.piso-sentido-cabeca { text-align: center; max-width: 56ch; margin: 0 auto clamp(26px, 4vw, 40px); }
.piso-sentido-cabeca h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 12px; text-wrap: balance; }
.piso-sentido-cabeca p { color: #D3C9BC; line-height: 1.65; }
/* 29/09: a planta de cima virou um cômodo em perspectiva, da largura da tela.
   Caixa 3D: fundo, duas paredes, teto e o chão (que continua sendo a .piso-planta
   do piso.js, com as tábuas). --W vem do piso.js (largura real da sala). No chão,
   tábua deitada no elemento = atravessada no cômodo, por isso o +90deg. */
.piso-sala {
  --W: 100vw;
  --H: clamp(440px, 74vh, 760px);
  --D: calc(var(--W) * 0.95);
  position: relative;
  height: var(--H);
  margin-top: clamp(4px, 1vw, 10px);
  overflow: hidden;
  perspective: calc(var(--W) * 0.5);
  perspective-origin: 50% 38%;
  background: #D9CFC1;
}
.piso-sala-caixa { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ps-face { position: absolute; backface-visibility: hidden; }
.ps-fundo {
  width: var(--W); height: var(--H);
  left: calc(var(--W) / -2); top: calc(var(--H) / -2);
  transform: translateZ(calc(var(--D) * -1));
  background: linear-gradient(180deg, #F2ECE3 0%, #E9E1D5 70%, #DDD3C5 100%);
  box-shadow: inset 0 calc(var(--H) * -0.05) 0 #F7F5F0, inset 0 calc(var(--H) * -0.055) 0 rgba(0, 0, 0, 0.08);
}
.ps-esq, .ps-dir {
  width: var(--D); height: var(--H);
  left: calc(var(--D) / -2); top: calc(var(--H) / -2);
  box-shadow: inset 0 calc(var(--H) * -0.05) 0 #F7F5F0, inset 0 calc(var(--H) * -0.055) 0 rgba(0, 0, 0, 0.08);
}
.ps-esq {
  transform: translateX(calc(var(--W) / -2)) translateZ(calc(var(--D) / -2)) rotateY(90deg);
  background: linear-gradient(90deg, #D9CEBF 0%, #E6DDD0 100%);
}
.ps-dir {
  transform: translateX(calc(var(--W) / 2)) translateZ(calc(var(--D) / -2)) rotateY(-90deg);
  background: linear-gradient(270deg, #CFC4B5 0%, #E1D8CB 100%);
}
.ps-teto {
  width: var(--W); height: var(--D);
  left: calc(var(--W) / -2); top: calc(var(--D) / -2);
  transform: translateY(calc(var(--H) / -2)) translateZ(calc(var(--D) / -2)) rotateX(-90deg);
  background: radial-gradient(40% 60% at 50% 50%, #FBF9F5 0%, #F1ECE4 60%, #E4DDD2 100%);
}
/* janela na parede da esquerda: é dela que vem a luz no chão */
.ps-janela {
  position: absolute; left: 30%; width: 34%; top: 16%; height: 50%;
  background: linear-gradient(180deg, #CFE3F2 0%, #EAF3F8 60%, #F8F4EA 100%);
  border: calc(var(--H) * 0.016) solid #FAFAF7;
  box-shadow: 0 0 60px 18px rgba(255, 246, 225, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.ps-janela::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--H) * 0.012);
  transform: translateX(-50%); background: #FAFAF7;
}
.ps-porta {
  position: absolute; left: 62%; width: 17%; bottom: 5%; height: 72%;
  background: linear-gradient(180deg, #8C7B68 0%, #6E5F4F 100%);
  box-shadow: 0 0 0 calc(var(--H) * 0.012) #FAFAF7;
}
.ps-quadro {
  position: absolute; left: 34%; width: 26%; top: 24%; height: 26%;
  background: linear-gradient(135deg, #C9B79C 0%, #A48D70 45%, #7F9A93 100%);
  box-shadow: 0 0 0 calc(var(--H) * 0.01) #3B3430, 0 10px 18px rgba(0, 0, 0, 0.12);
}
.piso-planta {
  width: var(--W); height: var(--D);
  left: calc(var(--W) / -2); top: calc(var(--D) / -2);
  transform: translateY(calc(var(--H) / 2)) translateZ(calc(var(--D) / -2)) rotateX(90deg);
  overflow: hidden;
  background: #6B5A48;
  cursor: ew-resize;
}
.piso-planta-chao {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: 340%;
  transform: translate(-50%, -50%) rotate(calc(var(--ang) + 90deg));
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.piso-fila { position: relative; display: flex; height: var(--regua, 44px); }
.piso-tabua {
  flex: none;
  height: 100%;
  background-image: linear-gradient(var(--tom, transparent), var(--tom, transparent)), var(--tex, url('../img/texturas/cena/piso-carvalho-americano.jpg'));
  background-size: 100% 100%, auto calc(var(--regua, 44px) * 3.2);
  background-position: 0 0, var(--bx, 0) var(--by, 0);
  background-repeat: no-repeat, repeat;
  box-shadow: inset -1px 0 0 rgba(22, 12, 4, 0.42), inset 0 -1px 0 rgba(22, 12, 4, 0.34), inset 0 1px 0 rgba(255, 246, 232, 0.10);
}
/* a luz da janela no chão e a sombra que o chão ganha perto das paredes */
.ps-sol {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(34% 26% at 12% 46%, rgba(255, 236, 200, 0.55) 0%, rgba(255, 236, 200, 0) 100%),
    linear-gradient(90deg, rgba(20, 12, 6, 0.28) 0%, rgba(20, 12, 6, 0) 12%, rgba(20, 12, 6, 0) 88%, rgba(20, 12, 6, 0.3) 100%),
    linear-gradient(180deg, rgba(20, 12, 6, 0.34) 0%, rgba(20, 12, 6, 0) 22%, rgba(20, 12, 6, 0) 80%, rgba(20, 12, 6, 0.18) 100%);
  mix-blend-mode: normal;
}
.piso-sala-efeito {
  position: absolute; left: 50%; top: clamp(18px, 4vh, 36px); transform: translateX(-50%);
  margin: 0; padding: 10px 18px; border-radius: 999px;
  background: rgba(31, 29, 26, 0.78); color: #F4EEE6;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem); white-space: nowrap;
  pointer-events: none;
}
.piso-sala-efeito b { color: #FFC40E; }
.piso-sala-efeito span { display: none; }
.piso-sentido:not([data-ang="90"]) .ef-comprido,
.piso-sentido[data-ang="90"] .ef-largo { display: inline; }
.piso-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  width: min(100%, 880px);
  margin: clamp(20px, 3vw, 28px) auto 0;
}
.piso-botoes { display: inline-flex; border: 1.5px solid #FFC40E; border-radius: 4px; overflow: hidden; }
.piso-botoes button {
  padding: 11px 16px;
  border: 0;
  background: transparent;
  color: #FFC40E;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.piso-botoes button[aria-pressed="true"] { background: #FFC40E; color: #1F1D1A; }
.piso-botoes button:focus-visible, .piso-chip:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.piso-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.piso-chip {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background-size: 220% auto;
  background-position: center;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.piso-chip:hover { transform: scale(1.07); }
.piso-chip[aria-pressed="true"] { border-color: #FFC40E; transform: scale(1.07); }
.piso-escolha { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; width: 100%; }
.piso-nome { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.02rem, 2vw, 1.3rem); }
.piso-link {
  display: inline-flex;
  padding: 12px 20px;
  border: 1.5px solid #FFC40E;
  border-radius: 3px;
  color: #FFC40E;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.piso-link:hover, .piso-link:focus-visible { background: #FFC40E; color: #1F1D1A; }

@media (max-width: 860px) {
  .piso-camadas-grade { grid-template-columns: 1fr; }
  .piso-regua3d { height: 280px; order: -1; }
}
@media (max-width: 720px) {
  .piso-cena { height: 360vh; }
  /* tela estreita: a ponta longe encolhe mais, a folga lateral cresce */
  .piso-plano { left: -230%; right: -230%; }
  .piso-t1, .piso-bruma { top: 42%; }
  /* o botão do WhatsApp mora embaixo à direita: o fecho sobe um pouco */
  .piso-t2 { bottom: clamp(88px, 12vh, 118px); padding: 0 16px; }
  .piso-t2 h2 { font-size: 1.28rem; margin-bottom: 9px; }
  .piso-t2 p { font-size: 0.88rem; line-height: 1.55; }
  .piso-tom { padding: 5px 10px 5px 5px; font-size: 0.8rem; gap: 7px; }
  .piso-tom-amostra { width: 24px; height: 24px; }
  .piso-sala { --H: clamp(420px, 64svh, 620px); --D: calc(var(--W) * 1.5); perspective: calc(var(--W) * 0.62); }
  .piso-sala-efeito { font-size: 0.82rem; padding: 8px 14px; }
  .piso-controles { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .piso-cena { height: 100vh; }
  .piso-stage { --piso: 1; }
  .piso-dica { display: none; }
  .piso-dica span { animation: none; }
  .piso-camadas { --abre: 1; }
  .piso-camada, .piso-planta-chao, .piso-chip { transition: none; }
}