:root {
  --verde-alameda: #287C3C;
  --verde-profundo: #284E3C;
  --verde-tinta: #1C3A2B;
  --marfim: #F3EFE1;
  --marfim-alto: #FAF8F0;
  --marfim-baixo: #E9E3D2;
  --salvia: #A5A58B;
  --areia: #C8B99A;
  --azul-horizonte: #A8C4C8;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--marfim);
  color: var(--verde-tinta);
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.18s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

button:active {
  transform: scale(0.975);
}

:focus-visible {
  outline: 3px solid var(--verde-alameda);
  outline-offset: 4px;
}

.rotulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--salvia);
}

.tela {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--marfim);
}

.tela.ativa {
  display: flex;
  flex-direction: column;
  animation: entrar 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tela.ativa {
    animation: none;
  }
  button:active {
    transform: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}
.tela-home {
  display: none;
}

.tela-home.ativa {
  display: block;
}

.home-fundo {
  position: absolute;
  inset: 0;
}
.home-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.home-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(243, 239, 225, 0.88) 0%, rgba(243, 239, 225, 0.42) 38%, rgba(243, 239, 225, 0.18) 58%, rgba(28, 58, 43, 0.62) 100%);
}

.home-conteudo {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(40px, 5vh, 80px) clamp(40px, 4vw, 90px) clamp(28px, 3.2vh, 52px);
}

.home-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.8vh, 40px);
}

.home-logo {
  width: clamp(300px, 24vw, 480px);
  height: auto;
}

.home-chamada {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  font-size: clamp(19px, 1.9vw, 32px);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--verde-profundo);
}
.home-chamada span {
  display: inline-block;
  padding: 0.34em 0.7em;
  background: rgba(165, 165, 139, 0.42);
  backdrop-filter: blur(2px);
}

.home-menu {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 26px);
}

.acesso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: clamp(96px, 11vh, 136px);
  padding: 0 clamp(20px, 2vw, 36px);
  border-radius: 4px;
  background: rgba(250, 248, 240, 0.94);
  color: var(--verde-profundo);
  box-shadow: 0 14px 36px rgba(28, 58, 43, 0.22);
}
.acesso:active {
  background: var(--marfim-baixo);
}
.acesso .icone-tour {
  width: clamp(28px, 2.2vw, 38px);
  height: clamp(28px, 2.2vw, 38px);
  flex: 0 0 auto;
  stroke-width: 1.7;
}

.acesso-nome {
  font-size: clamp(17px, 1.42vw, 26px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.home-endereco {
  justify-self: center;
  margin-top: clamp(22px, 2.8vh, 40px);
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.tela-galeria.ativa {
  display: grid;
  grid-template-columns: clamp(180px, 13vw, 250px) minmax(0, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(12px, 1.4vh, 18px) clamp(14px, 1.4vw, 22px);
}

.palco-area {
  position: relative;
  min-height: 0;
  display: flex;
}
.palco-area .palco {
  flex: 1;
}

.palco-btn {
  position: absolute;
  right: clamp(14px, 1.4vw, 24px);
  bottom: clamp(14px, 1.6vh, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 4px;
  background: var(--verde-alameda);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.palco-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.palco-btn:active {
  background: var(--verde-profundo);
}

.coluna {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 16px);
  min-height: 0;
}
.coluna .carretel {
  flex: 1;
}

.lateral {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 16px);
  min-height: 0;
}

.lateral-voltar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  padding: 0 clamp(14px, 1.3vw, 22px);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-profundo);
  border: 1px solid var(--marfim-baixo);
  background: var(--marfim-alto);
}
.lateral-voltar svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke-width: 2.2;
}
.lateral-voltar:active {
  background: var(--marfim-baixo);
}

.palco {
  position: relative;
  min-height: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--marfim-baixo);
}
.palco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: revelar 0.5s ease both;
}

.tela-galeria .palco {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tela-galeria .palco::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.tela-galeria .palco img {
  width: 100%;
  height: auto;
  object-fit: initial;
}

.palco-planta {
  background: var(--marfim-alto);
  border: 1px solid var(--marfim-baixo);
}
.palco-planta img {
  padding: clamp(10px, 1.2vw, 20px);
}

@keyframes revelar {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.carretel {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vh, 14px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carretel::-webkit-scrollbar {
  display: none;
}
.carretel[hidden] {
  display: none;
}

.miniatura {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(96px, 10vh, 140px);
  overflow: hidden;
  border-radius: 4px;
  scroll-snap-align: start;
  background: var(--marfim-baixo);
  opacity: 0.55;
}
.miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.miniatura::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--verde-alameda);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.miniatura.ativa {
  opacity: 1;
}
.miniatura.ativa::after {
  transform: scaleY(1);
}

.miniatura-nome {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 9px;
  background: linear-gradient(to bottom, transparent, rgba(28, 58, 43, 0.88));
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.3;
}

.carretel-plantas .miniatura {
  background: var(--marfim-alto);
  border: 1px solid var(--marfim-baixo);
}
.carretel-plantas .miniatura img {
  object-fit: contain;
  padding: 6px 6px 24px;
}

.tela-aptos.ativa {
  display: grid;
  grid-template-columns: clamp(150px, 10.5vw, 200px) minmax(0, 1fr) clamp(180px, 13vw, 250px);
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(12px, 1.4vh, 18px) clamp(14px, 1.4vw, 22px);
}

.tela-aptos.sem-ambientes.ativa {
  grid-template-columns: clamp(150px, 10.5vw, 200px) minmax(0, 1fr);
}

.aptos-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.aptos-menu::-webkit-scrollbar {
  display: none;
}

.aptos-grupo {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--salvia);
  padding: clamp(10px, 1.4vh, 18px) 4px 6px;
  margin-bottom: 4px;
}
.aptos-grupo:first-child {
  padding-top: 0;
}

.aptos-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aptos-item {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 1.4vw, 24px);
  border-radius: 4px;
  border: 1px solid var(--marfim-baixo);
  background: var(--marfim-alto);
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--verde-profundo);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.aptos-item.ativo {
  background: var(--verde-profundo);
  border-color: var(--verde-profundo);
  color: var(--marfim);
  font-weight: 600;
}

.aptos-planta {
  position: relative;
  min-height: 0;
  display: flex;
}

.aptos-planta .palco {
  flex: 1;
}

.planta-pavs {
  position: absolute;
  left: clamp(14px, 1.4vw, 24px);
  top: clamp(14px, 1.6vh, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.planta-pavs[hidden] {
  display: none;
}

.pav-slide {
  position: relative;
  width: clamp(88px, 6.5vw, 124px);
  height: clamp(64px, 6.4vh, 88px);
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--marfim-baixo);
  background: var(--marfim-alto);
  box-shadow: 0 4px 14px rgba(28, 58, 43, 0.12);
  opacity: 0.7;
}
.pav-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px 4px 20px;
}
.pav-slide span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4px 8px;
  background: var(--marfim-alto);
  border-top: 1px solid var(--marfim-baixo);
  color: var(--verde-profundo);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}
.pav-slide::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--verde-alameda);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pav-slide.ativo {
  opacity: 1;
}
.pav-slide.ativo::after {
  transform: scaleY(1);
}

.planta-acoes {
  position: absolute;
  right: clamp(14px, 1.4vw, 24px);
  bottom: clamp(14px, 1.6vh, 24px);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.planta-acoes > * {
  pointer-events: auto;
}

.planta-tour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 4px;
  background: var(--verde-alameda);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.planta-tour .icone-tour {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}
.planta-tour:active {
  background: var(--verde-profundo);
}
.planta-tour[hidden] {
  display: none;
}

.carretel-ambientes .miniatura {
  opacity: 1;
}
.carretel-ambientes .miniatura::after {
  content: none;
}

.fancybox__container {
  --f-bg: rgba(28, 58, 43, 0.97);
  --f-spinner-color-1: rgba(243, 239, 225, 0.2);
  --f-spinner-color-2: #287C3C;
  --f-button-width: 72px;
  --f-button-height: 72px;
  --f-button-color: #F3EFE1;
  --f-button-hover-color: #F3EFE1;
  --f-button-bg: rgba(243, 239, 225, 0.1);
  --f-button-hover-bg: rgba(243, 239, 225, 0.22);
  --f-button-active-bg: rgba(243, 239, 225, 0.3);
  --f-button-border-radius: 4px;
  --f-thumb-width: 120px;
  --f-thumb-height: 76px;
  --f-thumb-border-radius: 4px;
  --f-thumb-outline: 2px;
  --f-thumb-selected-outline-color: #287C3C;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
}

.fancybox__caption {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marfim);
}

.fancybox__infobar {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--marfim);
  font-variant-numeric: tabular-nums;
}

.fancybox__nav .f-button {
  --f-button-width: 72px;
  --f-button-height: 72px;
}

.tour {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  animation: surgir 0.3s ease both;
}

.tour[hidden] {
  display: none;
}

@keyframes surgir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tour-frame {
  width: 100%;
  height: 100%;
  border: none;
}

.tour-fechar {
  position: absolute;
  top: clamp(16px, 2vh, 28px);
  left: clamp(16px, 1.8vw, 32px);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(243, 239, 225, 0.3);
  background: rgba(40, 78, 60, 0.82);
  color: var(--marfim);
}
.tour-fechar svg {
  width: 20px;
  height: 20px;
}
.tour-fechar:active {
  background: rgba(243, 239, 225, 0.16);
}