/*
 * Topo com cena 3D que se monta com a rolagem (inspirado na Proposta A do Figma Make).
 * Cômodos: cozinha e quarto. As cores vêm de variáveis --c3-* definidas em cada proposta.
 * Sem JavaScript ou com movimento reduzido: mostra direto a foto do ambiente pronto e o texto.
 */
.hero3d {
  position: relative;
  background: var(--c3-fundo);
}
.hero3d.hero3d-ativo {
  height: 320vh;
}
.hero3d-fixo {
  position: relative;
  height: calc(100svh - 4.5rem);
  min-height: 34rem;
  max-height: 60rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--c3-texto);
}
.hero3d-ativo .hero3d-fixo {
  position: sticky;
  top: 4.5rem;
  max-height: none;
}
.hero3d-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 72% 42%, var(--c3-halo), transparent 38%), var(--c3-fundo);
}
.hero3d-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cômodo */
.cena3d {
  position: absolute;
  width: min(1050px, 78vw);
  height: min(690px, 76%);
  right: -1vw;
  bottom: 0;
  perspective: 1100px;
  transform-style: preserve-3d;
  transform: rotateX(0.5deg) rotateY(calc(-4deg + 3deg * var(--c3-p, 1))) scale(calc(1.08 - 0.08 * var(--c3-p, 1)));
  transform-origin: 100% 100%;
  background: var(--c3-parede-2);
  overflow: hidden;
}
.c3-parede {
  position: absolute;
  inset: 0 0 18%;
  background:
    linear-gradient(90deg, transparent 70%, rgba(0, 0, 0, 0.08)),
    linear-gradient(var(--c3-parede-1), var(--c3-parede-2)),
    linear-gradient(rgba(255, 255, 255, var(--c3-parede-veu, 0.55)), rgba(255, 255, 255, var(--c3-parede-veu, 0.55))),
    var(--c3-tex-parede, none) 0 0 / 420px;
  background-blend-mode: normal, multiply, normal, normal;
  box-shadow: inset 0 -40px 60px rgba(40, 30, 22, 0.22);
}
.c3-lateral {
  position: absolute;
  top: 0;
  bottom: 18%;
  right: -8%;
  width: 30%;
  transform-origin: right;
  transform: rotateY(-58deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent),
    linear-gradient(var(--c3-lateral), var(--c3-lateral)),
    linear-gradient(rgba(255, 255, 255, var(--c3-parede-veu, 0.55)), rgba(255, 255, 255, var(--c3-parede-veu, 0.55))),
    var(--c3-tex-parede, none) 0 0 / 420px;
  background-blend-mode: normal, multiply, normal, normal;
}
.c3-piso {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -31%;
  height: 55%;
  transform-origin: top;
  transform: rotateX(62deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.28)),
    linear-gradient(rgba(0, 0, 0, 0.2), transparent 40%),
    linear-gradient(var(--c3-piso-tinta, transparent), var(--c3-piso-tinta, transparent)),
    var(--c3-tex-piso, none) 0 0 / 200px,
    linear-gradient(90deg, var(--c3-piso-1), var(--c3-piso-2) 46%, var(--c3-piso-1));
  background-blend-mode: normal, normal, multiply, normal, normal;
}
.c3-spot {
  position: absolute;
  top: 7%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff7dc;
  box-shadow: 0 0 24px 8px rgba(255, 244, 209, 0.35);
}
.c3-peca {
  position: absolute;
  will-change: transform, opacity;
}
.c3-madeira {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 22%, rgba(0, 0, 0, 0.16)),
    var(--c3-tex-madeira, none) 0 0 / 260px,
    linear-gradient(105deg, var(--c3-madeira-1), var(--c3-madeira-2));
  border: 1px solid rgba(33, 20, 13, 0.4);
  box-shadow: inset -7px 0 10px rgba(0, 0, 0, 0.12);
}
.c3-grafite {
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.22)),
    var(--c3-tex-grafite, none) 0 0 / 300px,
    linear-gradient(105deg, var(--c3-grafite-1), var(--c3-grafite-2));
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.c3-pedra {
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.2)),
    var(--c3-tex-pedra, none) center / 320px,
    linear-gradient(var(--c3-pedra-1), var(--c3-pedra-2));
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.28);
}
/* Reflexo na pedra polida */
.c3-pedra::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.42) 46%, transparent 58%);
}
/* Sombra de contato no chão, embaixo dos móveis */
.c3-apoio::before {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -16px;
  height: 26px;
  background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(3px);
  z-index: -1;
}
.c3-sulco::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 5px;
  height: 2px;
  background: rgba(24, 17, 13, 0.5);
}
.c3-ripado {
  display: flex;
  gap: 3px;
  padding: 0 3px;
  background: var(--c3-ripado-fundo);
}
.c3-ripado i {
  flex: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 45%, rgba(0, 0, 0, 0.4)),
    var(--c3-tex-madeira, none) 0 0 / 220px,
    linear-gradient(90deg, var(--c3-madeira-1), var(--c3-madeira-2));
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.35);
}
.c3-ripado i:nth-child(3n + 1) {
  background-position: 0 0, 37px 0, 0 0;
}
.c3-ripado i:nth-child(3n + 2) {
  background-position: 0 0, 91px 40px, 0 0;
}
.c3-led {
  position: absolute;
  z-index: 4;
  height: 3px;
  background: var(--c3-led);
  opacity: 0;
}
.c3-brilho {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse, var(--c3-led-brilho), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* Luz que o LED joga nas superfícies (opacidade controlada pela rolagem) */
.c3-luz {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
/* Ambiente mais escuro antes do LED acender */
.c3-penumbra {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: rgba(10, 8, 6, var(--c3-penumbra-forca, 0.32));
}
.c3-lustre {
  top: 0;
  width: 2px;
  background: var(--c3-fio, #6d6355);
}
.c3-lustre::after {
  content: '';
  position: absolute;
  left: -10px;
  bottom: -16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3d6, var(--c3-led) 55%, rgba(0, 0, 0, 0.3));
  box-shadow: 0 0 calc(4px + 26px * var(--c3-led-on, 0)) rgba(255, 200, 112, var(--c3-led-on, 0));
}
.c3-cone {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 150, 0.55), transparent 70%);
}

/* Cozinha */
.k-baixos {
  left: 28%;
  right: 5%;
  bottom: 20%;
  height: 28%;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr 0.75fr;
  gap: 3px;
}
.k-baixos > * {
  position: relative;
}
.k-aereos {
  left: 38%;
  right: 5%;
  top: 11%;
  height: 28%;
  display: grid;
  grid-template-columns: 1fr 1.25fr 0.9fr;
  gap: 3px;
}
.k-aereos > * {
  position: relative;
}
.k-vidro {
  background: linear-gradient(90deg, rgba(157, 118, 76, 0.35), rgba(28, 27, 25, 0.82));
}
.k-bancada {
  left: 27%;
  right: 4%;
  bottom: 47.5%;
  height: 3.2%;
}
.k-frontao {
  left: 28%;
  right: 5%;
  top: 40%;
  height: 13%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.12)),
    var(--c3-tex-pedra, none) 30% 40% / 380px,
    linear-gradient(160deg, var(--c3-pedra-1), var(--c3-pedra-2));
}
.k-ripado {
  left: 8%;
  top: 5%;
  bottom: 18%;
  width: 21%;
}
.k-ilha {
  left: 41%;
  bottom: 5%;
  width: 47%;
  height: 28%;
  transform-style: preserve-3d;
}
.k-ilha-frente {
  position: absolute;
  inset: 6% 0 0;
}
.k-ilha-tampo {
  position: absolute;
  z-index: 2;
  left: -3%;
  right: -3%;
  top: 0;
  height: 9%;
  transform: skewX(-13deg);
}
.k-ilha-lado {
  position: absolute;
  top: 8%;
  right: -8%;
  width: 9%;
  bottom: 0;
  transform: skewY(-35deg);
  transform-origin: left top;
  background: rgba(0, 0, 0, 0.45);
}
.k-led-aereo {
  left: 38%;
  right: 5%;
  top: 39.5%;
}
.k-led-ripado {
  left: 8.5%;
  width: 20%;
  top: 8%;
}
.k-brilho {
  inset: 25% 0 17% 20%;
}

.k-lustre {
  height: 30%;
}
.k-lustre-1 {
  left: 54%;
}
.k-lustre-2 {
  left: 74%;
}
.k-luz-frontao {
  left: 38%;
  right: 5%;
  top: 39.5%;
  height: 16%;
  background: linear-gradient(to bottom, rgba(255, 205, 130, 0.75), rgba(255, 205, 130, 0.18) 60%, transparent);
}
.k-luz-ripado {
  left: 8%;
  width: 21%;
  top: 8%;
  bottom: 18%;
  background: linear-gradient(to bottom, rgba(255, 205, 130, 0.6), transparent 60%);
}
.k-luz-piso {
  left: 35%;
  width: 60%;
  bottom: 0;
  height: 22%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 200, 120, 0.45), transparent 70%);
}
.k-cone-1 {
  left: 47%;
  width: 16%;
  top: 31%;
  height: 40%;
}
.k-cone-2 {
  left: 67%;
  width: 16%;
  top: 31%;
  height: 40%;
}

/* Quarto */
.q-painel {
  left: 20%;
  right: 9%;
  top: 6%;
  bottom: 18%;
}
.q-criado {
  bottom: 18%;
  width: 13%;
  height: 15%;
}
.q-criado-esq {
  left: 13%;
}
.q-criado-dir {
  right: 3%;
}
.q-criado > span {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46%;
  height: 2px;
  background: rgba(24, 17, 13, 0.5);
}
.q-cama {
  left: 27%;
  width: 56%;
  bottom: 4%;
  height: 34%;
  transform-style: preserve-3d;
}
.q-cama-base {
  position: absolute;
  inset: 52% 0 0;
}
.q-colchao {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 34%;
  height: 22%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.12)),
    linear-gradient(var(--c3-tecido-1), var(--c3-tecido-2));
  transform: skewX(-12deg);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}
.q-manta {
  position: absolute;
  left: 46%;
  right: -3%;
  top: 33%;
  height: 26%;
  background: linear-gradient(var(--c3-manta-1), var(--c3-manta-2)), var(--c3-tex-tecido, none) 0 0 / 120px;
  background-blend-mode: multiply, normal;
  transform: skewX(-12deg);
}
.q-travesseiros {
  position: absolute;
  left: 6%;
  width: 38%;
  top: 14%;
  height: 22%;
  display: flex;
  gap: 6%;
}
.q-travesseiros i {
  flex: 1;
  border-radius: 40% 40% 18% 18%;
  background: linear-gradient(var(--c3-tecido-1), var(--c3-tecido-2));
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12);
}
.q-lustre-esq {
  left: 19.5%;
}
.q-lustre-dir {
  right: 9.5%;
}
.q-tapete {
  left: 18%;
  width: 74%;
  bottom: -2%;
  height: 12%;
  border-radius: 2px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.15), transparent),
    linear-gradient(var(--c3-tapete, #8c8782), var(--c3-tapete, #8c8782)),
    var(--c3-tex-tecido, none) 0 0 / 90px;
  background-blend-mode: normal, multiply, normal;
  transform: skewX(-14deg);
}
.q-lustre {
  height: 38%;
}
.q-luz-painel {
  left: 20%;
  right: 9%;
  top: 6%;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 205, 130, 0.6), transparent 70%);
}
.q-luz-cabeceira {
  left: 22%;
  right: 11%;
  top: 40%;
  height: 22%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 200, 120, 0.55), transparent 70%);
}
.q-cone-esq {
  left: 13%;
  width: 16%;
  top: 36%;
  height: 34%;
}
.q-cone-dir {
  right: 3%;
  width: 16%;
  top: 36%;
  height: 34%;
}
.q-led-painel {
  left: 20%;
  right: 9%;
  top: 6%;
}
.q-led-cabeceira {
  left: 24%;
  right: 13%;
  top: 46%;
}
.q-brilho {
  inset: 0 5% 30% 15%;
}

/* Sombra para leitura do texto e conteúdo */
.hero3d-sombra {
  position: absolute;
  inset: 0;
  background: var(--c3-sombra);
}
.hero3d .hero3d-conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero3d-texto {
  display: grid;
  gap: var(--e-3, 1.5rem);
  max-width: 40rem;
}
.hero3d h1 {
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.4rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c3-texto);
}
.hero3d h1 em {
  color: var(--c3-destaque);
}
.hero3d-sub {
  color: var(--c3-texto-suave);
  font-size: 1.0625rem;
  max-width: 34ch;
}
.hero3d-rotulo {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c3-destaque);
}
.hero3d-status {
  position: absolute;
  z-index: 6;
  right: var(--margem);
  top: 2rem;
  display: grid;
  grid-template-columns: auto 120px auto;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c3-texto);
}
.hero3d-status > div {
  height: 1px;
  background: var(--c3-linha);
}
.hero3d-status i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c3-destaque);
}
.hero3d-status b {
  min-width: 6.5rem;
  font-weight: 600;
}
.hero3d-indice {
  position: absolute;
  z-index: 2;
  right: var(--margem);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c3-texto);
}
.hero3d-indice i {
  display: block;
  height: 1px;
  width: 72px;
  background: var(--c3-linha);
}
.hero3d .selo-ilustrativa {
  z-index: 6;
  top: auto;
  bottom: 1rem;
  left: var(--margem);
}
/* Sem animação ativa (sem JS / movimento reduzido): só o ambiente pronto */
.hero3d:not(.hero3d-ativo) .cena3d,
.hero3d:not(.hero3d-ativo) .hero3d-status,
.hero3d:not(.hero3d-ativo) .hero3d-indice {
  display: none;
}

@media (max-width: 63.99rem) {
  .hero3d-fixo {
    align-items: flex-end;
    min-height: 40rem;
  }
  .cena3d {
    width: 125vw;
    height: 62%;
    min-height: 26rem;
    right: -25vw;
    top: 0;
    bottom: auto;
  }
  .hero3d-foto {
    object-position: 66% center;
  }
  .hero3d-sombra {
    background: var(--c3-sombra-celular);
  }
  .hero3d-conteudo {
    padding-bottom: 4.5rem;
  }
  .hero3d .hero3d-botao {
    width: 100%;
  }
  .hero3d-status {
    top: 1rem;
    grid-template-columns: auto 72px auto;
    gap: 0.5rem;
  }
  .hero3d-indice {
    display: none;
  }
}