/* ============================================================
   ORIGEN RESIDENCE — TOTEM
   Amanhecer: o horizonte do emblema organiza todas as telas.
   O conteúdo é o céu; a navegação é o chão (barra inferior).
   verde Origen #334734 · névoa #eceee6 · aurora #f0d59e
   Layout pensado para tela horizontal (projetor), fluido por
   --u = 1% da altura de um quadro 16:9 que cabe na tela.
   ============================================================ */

:root {
  --pinheiro:     #1e2a21;
  --origen:       #334734;
  --folha:        #4b604a;
  --musgo:        #66785f;
  --nevoa:        #eceee6;
  --papel:        #fbfbf8;
  --aurora:       #f0d59e;
  --sol:          #e9b46a;
  --luz:          #fbeac2;
  --tinta:        #1d271f;
  --linha:        rgba(51, 71, 52, .15);
  --linha-aurora: rgba(240, 213, 158, .22);

  --serif: 'Newsreader', 'Georgia', serif;
  --sans:  'Figtree', 'Segoe UI', sans-serif;

  --u: min(calc(var(--vhpx, 100vh) / 100), .5625vw);

  --bar-h: clamp(52px, calc(var(--u) * 9), 150px);
  --pad:   clamp(10px, calc(var(--u) * 2.8), 56px);
  --gap:   clamp(8px,  calc(var(--u) * 2.2), 44px);
  --r-lg:  clamp(10px, calc(var(--u) * 1.8), 30px);
  --r-sm:  clamp(6px,  calc(var(--u) * .9),  16px);
  --tap:   clamp(40px, calc(var(--u) * 6.4), 104px);

  --t-xs:  clamp(11px, calc(var(--u) * 1.35), 22px);
  --t-sm:  clamp(12px, calc(var(--u) * 1.65), 27px);
  --t-md:  clamp(14px, calc(var(--u) * 2.05), 33px);
  --t-lg:  clamp(17px, calc(var(--u) * 2.9),  47px);
  --t-xl:  clamp(21px, calc(var(--u) * 4.2),  68px);
  --t-2xl: clamp(28px, calc(var(--u) * 6.4),  104px);

  --ease:    cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .18, 1);
}

/* em pé: a unidade passa a seguir a largura */
@media (orientation: portrait) {
  :root { --u: min(1vw, calc(var(--vhpx, 100vh) / 177.78)); }
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.45;
  background: var(--nevoa);
  color: var(--tinta);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
a   { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

:focus-visible {
  outline: 2px solid var(--sol);
  outline-offset: 3px;
}

/* ============================================================
   CHÃO — barra de navegação inferior (header.php)
   ============================================================ */

.groundbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--bar-h);
  z-index: 400;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--pad);
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(240, 213, 158, .16) 0%, rgba(240, 213, 158, 0) 60%),
    var(--origen);
  color: var(--nevoa);
}

/* a linha do horizonte, mais acesa no centro */
.groundbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: max(1px, calc(var(--u) * .14));
  background: linear-gradient(90deg,
    rgba(240, 213, 158, 0) 0%,
    rgba(240, 213, 158, .45) 28%,
    var(--luz) 50%,
    rgba(240, 213, 158, .45) 72%,
    rgba(240, 213, 158, 0) 100%);
}

.gb-sun {
  position: absolute;
  left: 50%; top: 0;
  width: clamp(6px, calc(var(--u) * 1), 16px);
  height: clamp(6px, calc(var(--u) * 1), 16px);
  border-radius: 50%;
  background: var(--luz);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 calc(var(--u) * 2.4) calc(var(--u) * .7) rgba(240, 213, 158, .5);
  pointer-events: none;
}

.gb-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  height: 100%;
  min-width: 0;
  text-decoration: none;
  color: var(--nevoa);
}

.gb-emblem {
  flex: none;
  width: calc(var(--bar-h) * .56);
  height: calc(var(--bar-h) * .56);
  color: var(--aurora);
}

.gb-word {
  height: calc(var(--bar-h) * .4);
  min-width: 0;
}

.gb-emblem svg,
.gb-word svg {
  display: block;
  height: 100%;
  width: auto;
}

.gb-title {
  grid-column: 2;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  padding-top: calc(var(--u) * .4);
}

.gb-menu {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  height: calc(var(--bar-h) * .6);
  padding: 0 calc(var(--u) * 2.4) 0 calc(var(--u) * 2);
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 158, .45);
  font-weight: 500;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--nevoa);
  transition: background .25s ease, transform .2s ease;
}

.gb-menu svg {
  width: calc(var(--bar-h) * .28);
  height: calc(var(--bar-h) * .28);
  color: var(--aurora);
}

.gb-menu:active { background: rgba(240, 213, 158, .14); transform: scale(.97); }

@media (hover: hover) {
  .gb-menu:hover { background: rgba(240, 213, 158, .1); }
}

/* área de conteúdo: tudo acima do chão */
.stage {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--bar-h);
  overflow: hidden;
}

/* ============================================================
   HOME — o sol nasce no horizonte
   ============================================================ */

.home {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #111914 0%, #18221b 36%, #26342a 62%, #26342a 100%);
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.has-video .bg-video { opacity: 1; }

/* véu verde sobre o vídeo, para o sol e a marca seguirem legíveis */
.home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 29, 23, .62) 0%, rgba(30, 42, 33, .25) 62%);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.has-video .home::before { opacity: 1; }

.sun {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 62%;
  z-index: 2;
  transform-origin: 50% 100%;
  transition: transform 1.05s var(--ease-io);
  pointer-events: none;
}

/* halo do nascer do sol: núcleo claro e curto, véu largo e leve
   (somado à luz do céu com "screen", sem lavar o verde) */
.sun-glow {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(var(--u) * 170);
  max-width: 110vw;
  aspect-ratio: 2.2 / 1;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  background:
    radial-gradient(closest-side, rgba(255, 246, 222, .7) 0%, rgba(251, 234, 194, .32) 16%, rgba(251, 234, 194, 0) 40%),
    radial-gradient(closest-side, rgba(233, 180, 106, .2) 0%, rgba(233, 180, 106, .07) 55%, rgba(233, 180, 106, 0) 100%);
  mix-blend-mode: screen;
  animation: glow-breathe 9s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  from { opacity: .75; transform: translate(-50%, 50%) scale(.96); }
  to   { opacity: 1;   transform: translate(-50%, 50%) scale(1.04); }
}

.sunrise {
  position: absolute;
  left: 50%; bottom: 0;
  height: 82%;
  aspect-ratio: 57 / 41.1;
  transform: translateX(-50%);
  overflow: visible;
}

.sunrise .ray {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: ray-rise 1.6s var(--ease) both;
  animation-delay: calc(.3s + var(--i) * 65ms);
}

@keyframes ray-rise {
  from { transform: scale(.001); opacity: 0; }
  45%  { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.ground {
  position: absolute;
  left: 0; right: 0;
  top: 62%;
  height: 100%;
  z-index: 3;
  background: linear-gradient(180deg, #3b513c 0%, var(--origen) 16%, #2c3e2d 100%);
  transition: transform 1.05s var(--ease-io);
}

.ground::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: max(1px, calc(var(--u) * .16));
  background: linear-gradient(90deg,
    rgba(240, 213, 158, 0) 0%,
    rgba(240, 213, 158, .5) 24%,
    var(--luz) 50%,
    rgba(240, 213, 158, .5) 76%,
    rgba(240, 213, 158, 0) 100%);
}

/* a curva de terra do emblema */
.ground-curve {
  position: absolute;
  left: 0; top: calc(var(--u) * 1.6);
  width: 100%;
  height: calc(var(--u) * 7);
  fill: none;
  stroke: rgba(240, 213, 158, .3);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: opacity .5s ease;
}

body.menu-open .ground-curve { opacity: 0; }

.logo-trigger {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 3.4);
  padding-bottom: calc(var(--u) * 7);
  color: var(--nevoa);
  transition: opacity .45s ease;
}

.home-word {
  height: clamp(42px, calc(var(--u) * 12), 200px);
  color: var(--nevoa);
}

.home-word svg {
  display: block;
  height: 100%;
  width: auto;
}

.tap-hint {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--aurora);
  animation: hint-pulse 2.8s ease-in-out infinite;
}

.tap-hint::before {
  content: '';
  width: clamp(7px, calc(var(--u) * 1), 16px);
  height: clamp(7px, calc(var(--u) * 1), 16px);
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 0 calc(var(--u) * .7) rgba(240, 213, 158, .22);
}

@keyframes hint-pulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

/* — menu aberto: o chão sobe e o sol diminui — */

body.menu-open .ground { transform: translateY(-36%); }
body.menu-open .sun    { transform: translateY(-58.06%) scale(.4194); }
body.menu-open .logo-trigger { opacity: 0; pointer-events: none; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 500;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 1.05s;
}

.menu.open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

/* páginas internas: a cena da home vem dentro do menu (menu.php);
   entra com fade enquanto o chão sobe (body.menu-open move .ground e .sun) e some ao fechar */
.menu-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #111914 0%, #18221b 36%, #26342a 62%, #26342a 100%);
  opacity: 0;
  transition: opacity .6s ease .35s;
}

.menu.open .menu-fundo {
  opacity: 1;
  transition: opacity .45s ease;
}

/* os raios nascem de novo a cada vez que o menu abre */
.menu-fundo .sunrise .ray { animation: none; }
.menu.open .menu-fundo .sunrise .ray { animation: ray-rise 1.6s var(--ease) both; animation-delay: calc(.3s + var(--i) * 65ms); }

.menu-top {
  position: absolute;
  left: var(--pad); right: var(--pad); top: 0;
  height: 26%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: opacity .35s ease;
}

.menu.open .menu-top {
  opacity: 1;
  transition: opacity .6s ease .55s;
}

.menu-brand {
  height: clamp(30px, calc(var(--u) * 7.2), 120px);
  color: var(--nevoa);
}

.menu-brand svg {
  display: block;
  height: 100%;
  width: auto;
}

.menu-close {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  height: var(--tap);
  padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 2.6);
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 158, .45);
  color: var(--nevoa);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background .25s ease, transform .2s ease;
}

.menu-close svg {
  width: calc(var(--tap) * .38);
  height: calc(var(--tap) * .38);
  color: var(--aurora);
}

.menu-close:active { background: rgba(240, 213, 158, .14); transform: scale(.97); }

/* atalho discreto para o outro totem, ao lado do "Fechar": menor, borda e texto mais apagados */
.menu-acoes {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
}
.menu-outro {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .8);
  height: calc(var(--tap) * .78);
  padding: 0 calc(var(--u) * 1.8) 0 calc(var(--u) * 2.2);
  border-radius: 999px;
  border: 1px solid rgba(240, 213, 158, .2);
  color: rgba(236, 238, 230, .6);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .2s ease;
}
.menu-outro svg {
  width: calc(var(--tap) * .3);
  height: calc(var(--tap) * .3);
  color: var(--aurora);
  opacity: .75;
}
.menu-outro:active { background: rgba(240, 213, 158, .1); transform: scale(.97); }
@media (hover: hover) {
  .menu-outro:hover { color: var(--nevoa); border-color: rgba(240, 213, 158, .45); }
}

.menu-list {
  position: absolute;
  left: var(--pad); right: var(--pad);
  top: calc(26% + var(--pad));
  bottom: var(--pad);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 9 itens: 3 × 3 */
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.menu-list li {
  position: relative;
  min-height: 0;
  opacity: 0;
  transform: translateY(calc(var(--u) * 3));
  transition: opacity .3s ease, transform .5s var(--ease);
}

.menu.open .menu-list li {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .8s var(--ease);
  transition-delay: calc(.42s + var(--i) * 45ms);
}

.menu-list li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--linha-aurora); }
.menu-list li:nth-child(n + 4)        { border-top: 1px solid var(--linha-aurora); }

.menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: calc(var(--u) * .8);
  height: 100%;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 2.4);
  overflow: hidden;
  text-decoration: none;
  color: var(--nevoa);
}

/* toque: amanhece dentro do item */
.menu-item::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 150%;
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  transform: translate(-50%, 50%) scale(.55);
  background: radial-gradient(closest-side, rgba(240, 213, 158, .34), rgba(240, 213, 158, 0));
  opacity: 0;
  transition: opacity .35s ease, transform .55s var(--ease);
  pointer-events: none;
}

.menu-item:active::before {
  opacity: 1;
  transform: translate(-50%, 50%) scale(1);
}

@media (hover: hover) {
  .menu-item:hover::before {
    opacity: .7;
    transform: translate(-50%, 50%) scale(.9);
  }
}

/* página atual: o amanhecer fica aceso e o nome em aurora */
.menu-item.atual::before {
  opacity: .8;
  transform: translate(-50%, 50%) scale(.9);
}

.menu-item.atual .mi-name { color: var(--aurora); }

.mi-ic {
  position: absolute;
  top: calc(var(--u) * 2.6);
  left: calc(var(--u) * 2.4);
  width: clamp(24px, calc(var(--u) * 5.4), 92px);
  height: clamp(24px, calc(var(--u) * 5.4), 92px);
  fill: none;
  stroke: var(--aurora);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mi-name {
  position: relative;
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--t-xl);
  line-height: 1.02;
  letter-spacing: -.012em;
}

/* metragem / novidade: no alto, alinhado ao ícone (nomes ficam na mesma linha) */
.mi-meta {
  position: absolute;
  top: calc(var(--u) * 2.6);
  right: calc(var(--u) * 2.4);
  height: clamp(24px, calc(var(--u) * 5.4), 92px);
  display: flex;
  align-items: center;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--aurora);
}

.mi-badge {
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--pinheiro);
  background: var(--aurora);
  padding: .5em .85em .55em;
  border-radius: 999px;
}

/* aberto pelo link index.php#menu: já abre aberto */
body.menu-instant .ground,
body.menu-instant .sun,
body.menu-instant .logo-trigger,
body.menu-instant .menu,
body.menu-instant .menu-fundo,
body.menu-instant .menu-top,
body.menu-instant .menu-list li {
  transition: none !important;
}

/* ============================================================
   PÁGINAS DE IFRAME (tours), 360 e MAPA
   ============================================================ */

.frame-page { background: var(--pinheiro); }

.frame-page iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--pinheiro);
}

#panorama,
#map {
  position: absolute;
  inset: 0;
}

/* Pannellum (vista 360) */
body.pano-page { background: var(--pinheiro); }
body.pano-page .pnlm-container { background: var(--pinheiro); font-family: var(--sans); }
body.pano-page .pnlm-controls {
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(20, 29, 23, .25);
  overflow: hidden;
}
body.pano-page .pnlm-controls-container { top: var(--pad); left: var(--pad); }
body.pano-page .pnlm-control { background-color: rgba(251, 251, 248, .95); }
body.pano-page .pnlm-load-box {
  background: rgba(30, 42, 33, .88);
  border-radius: var(--r-lg);
  font-family: var(--sans);
  color: var(--nevoa);
}
body.pano-page .pnlm-lbar { border-color: var(--aurora); }
body.pano-page .pnlm-lbar-fill { background: var(--aurora); }

/* Leaflet (pontos de interesse) */
body.map-page .leaflet-container { background: var(--pinheiro); font-family: var(--sans); }
body.map-page .leaflet-top.leaflet-left { top: var(--pad); left: var(--pad); }
body.map-page .leaflet-top.leaflet-left .leaflet-control { margin: 0; }
body.map-page .leaflet-bar {
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 20px rgba(20, 29, 23, .3);
  overflow: hidden;
}
body.map-page .leaflet-bar a,
body.map-page .leaflet-bar a:hover {
  width: clamp(36px, calc(var(--u) * 5.4), 80px);
  height: clamp(36px, calc(var(--u) * 5.4), 80px);
  line-height: clamp(36px, calc(var(--u) * 5.4), 80px);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--origen);
  background: rgba(251, 251, 248, .96);
  border-bottom-color: var(--linha);
}
body.map-page .leaflet-bar a:last-child { border-bottom: 0; }

/* ============================================================
   VÍDEO
   ============================================================ */

.video-page .stage {
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(240, 213, 158, .12) 0%, rgba(240, 213, 158, 0) 70%),
    var(--pinheiro);
}

.full-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* volume do vídeo — reaproveita a pílula dos controles de zoom */
.vol-controls { overflow: visible; }

.vol-mute .vx { display: none; }
.vol-controls[data-vol="low"] .vw2 { display: none; }
.vol-controls[data-vol="mute"] .vw1,
.vol-controls[data-vol="mute"] .vw2 { display: none; }
.vol-controls[data-vol="mute"] .vx { display: inline; }
.vol-controls[data-vol="mute"] .vol-mute { color: var(--musgo); }

/* nível atual, aparece por um instante acima da pílula */
.vol-level {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--u) * 1.2);
  transform: translate(-50%, 8px);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.6);
  border-radius: 999px;
  background: rgba(251, 251, 248, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha);
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(30, 42, 33, .14);
  color: var(--origen);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.vol-controls.show-level .vol-level {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   CONTROLES DE ZOOM (implantação e PDFs)
   ============================================================ */

.iz-controls {
  position: absolute;
  right: calc(var(--u) * 1.6);
  bottom: calc(var(--u) * 1.6);
  z-index: 4;
  display: flex;
  align-items: center;
  padding: calc(var(--u) * .5);
  border-radius: 999px;
  background: rgba(251, 251, 248, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha);
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(30, 42, 33, .14);
}

.iz-btn {
  flex: none;
  width: clamp(36px, calc(var(--u) * 5.2), 84px);
  height: clamp(36px, calc(var(--u) * 5.2), 84px);
  border-radius: 50%;
  color: var(--origen);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .25s ease, transform .2s ease, width .3s var(--ease), opacity .3s ease;
}

.iz-btn svg {
  width: 44%;
  height: 44%;
}

.iz-btn:active {
  background: rgba(51, 71, 52, .1);
  transform: scale(.92);
}

/* voltar ao enquadramento: só aparece com zoom, no fim do grupo */
.iz-reset {
  order: 3;
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.implanta-zoom.zoomed .iz-reset,
.pdfv.zoomed .iz-reset {
  width: clamp(36px, calc(var(--u) * 5.2), 84px);
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   IMPLANTAÇÃO — mapa à esquerda, legenda em colunas à direita
   ============================================================ */

.implanta {
  display: flex;
  gap: calc(var(--gap) * 1.4);
  padding: var(--pad);
}

/* o quadro segue a proporção da planta; se faltar altura, a planta encolhe dentro dele */
.implanta-fig {
  flex: none;
  align-self: center;
  width: 56%;
  height: auto;
  max-height: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  padding: calc(var(--u) * 1);
  border-radius: var(--r-lg);
  background: var(--papel);
  border: 1px solid var(--linha);
}

/* container de tamanho: a planta usa cqw/cqh para caber inteira */
.implanta-zoom {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-sm);
  touch-action: none;
  container-type: size;
}

/* planta + números num bloco só, na proporção da imagem (como object-fit: contain),
   assim cada número fica no lugar certo em qualquer tamanho de tela */
.iz-plan {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  width: min(100cqw, 100cqh * var(--arn, 1.7778));
  height: min(100cqh, 100cqw / var(--arn, 1.7778));
  transform-origin: center center;
  will-change: transform;
  cursor: grab;
}

.iz-plan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.implanta-zoom.dragging .iz-plan { cursor: grabbing; }

.implanta-zoom.smooth .iz-plan {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* na implantação os botões ficam no canto vazio da planta (alto à esquerda),
   para não cobrir os números da parte de baixo em telas pequenas */
.implanta-zoom .iz-controls {
  top: calc(var(--u) * 1.6);
  left: calc(var(--u) * 1.6);
  right: auto;
  bottom: auto;
}

/* área de toque sobre cada número impresso na planta, um pouco maior que o círculo;
   ao tocar, acende um halo na cor da legenda (verde ou sol) */
.iz-pin {
  --pin: 51, 71, 52;
  position: absolute;
  width: max(5.4%, 22px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.iz-pin.pin-sol { --pin: 233, 180, 106; }

.iz-pin.pressed {
  background: rgba(var(--pin), .3);
  border-color: rgba(var(--pin), .95);
  transform: translate(-50%, -50%) scale(1.08);
}

@media (hover: hover) {
  .iz-pin:hover {
    background: rgba(var(--pin), .16);
    border-color: rgba(var(--pin), .7);
  }
}

.implanta-lists {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  align-content: safe center;
  column-gap: calc(var(--gap) * 1.6);
  row-gap: var(--gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
}

.area h2 {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .4) 0 calc(var(--u) * 1.4);
  margin-bottom: calc(var(--u) * .6);
  border-bottom: 1px solid var(--linha);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.1;
  color: var(--origen);
}

/* a cor da bolinha = a cor dos números da área */
.area h2::before {
  content: '';
  flex: none;
  width: clamp(8px, calc(var(--u) * 1.2), 18px);
  height: clamp(8px, calc(var(--u) * 1.2), 18px);
  border-radius: 50%;
}

.area-verde h2::before { background: var(--origen); }
.area-sol h2::before   { background: var(--sol); }

.area ol { list-style: none; }

.area li { break-inside: avoid; }

.amenity {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.3);
  min-height: clamp(34px, calc(var(--u) * 6.2), 100px);
  padding: calc(var(--u) * .5) calc(var(--u) * .9);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.15;
  color: var(--tinta);
  transition: background .25s ease;
}

.amenity .n {
  flex: none;
  width: clamp(24px, calc(var(--u) * 3.8), 60px);
  height: clamp(24px, calc(var(--u) * 3.8), 60px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.area-verde .n { background: var(--origen); color: var(--nevoa); }
.area-sol .n   { background: var(--sol);    color: var(--pinheiro); }

.amenity .cam {
  flex: none;
  width: clamp(16px, calc(var(--u) * 2.6), 40px);
  height: clamp(16px, calc(var(--u) * 2.6), 40px);
  margin-left: auto;
  color: var(--musgo);
  opacity: .7;
}

/* itens sem foto: só legenda */
span.amenity { color: var(--musgo); font-weight: 400; }

.amenity.has-photo { cursor: pointer; }
.amenity.has-photo:active { background: rgba(51, 71, 52, .09); }

@media (hover: hover) {
  .amenity.has-photo:hover { background: rgba(51, 71, 52, .06); }
}

/* ============================================================
   GALERIA — foto à esquerda, legenda na coluna da direita
   ============================================================ */

.lightbox {
  --lb-side: clamp(220px, 27%, 620px);
  position: fixed;
  inset: 0;
  z-index: 600;
  background: #141d17;
  color: var(--nevoa);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility 0s linear 0s;
}

/* o palco deixa passar o toque: tocar fora da foto fecha a galeria */
.lb-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lb-side);
  grid-template-rows: minmax(0, 1fr);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.lb-stage.switching {
  opacity: 0;
  transform: scale(.985);
}

.lb-stage img {
  display: block;
  justify-self: center;
  align-self: center;
  width: auto;
  height: auto;
  max-width: calc(100% - var(--pad) * 2);
  max-height: calc(100% - var(--pad) * 2);
  pointer-events: auto;
}

.lb-caption {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  align-items: flex-start;
  gap: calc(var(--u) * 1.4);
  min-width: 0;
  padding: calc(var(--pad) + var(--tap)) var(--pad) calc(var(--pad) * 2 + var(--tap));
  border-left: 1px solid var(--linha-aurora);
  background: linear-gradient(180deg, rgba(51, 71, 52, .35), rgba(51, 71, 52, .12));
}

.lb-chip {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--aurora);
}

.lb-chip::before {
  content: '';
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: currentColor;
}

.lb-chip.verde { color: #b9cdb4; }
.lb-chip.sol   { color: var(--sol); }

.lb-num {
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--t-2xl);
  line-height: .9;
  color: var(--aurora);
  font-variant-numeric: lining-nums;
}

.lb-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.05;
  letter-spacing: -.01em;
}

.lb-desc {
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(236, 238, 230, .78);
  max-width: 38em;
}

.lb-count {
  margin-top: calc(var(--u) * .8);
  font-size: var(--t-xs);
  font-weight: 500;
  color: rgba(236, 238, 230, .55);
  font-variant-numeric: tabular-nums;
}

.lb-close,
.lb-nav {
  position: absolute;
  z-index: 2;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid rgba(240, 213, 158, .45);
  color: var(--nevoa);
  font-size: calc(var(--tap) * .5);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, transform .2s ease;
}

.lb-close { top: var(--pad); right: var(--pad); }

.lb-nav { bottom: var(--pad); padding-bottom: .12em; }
.lb-prev { right: calc(var(--pad) + var(--tap) + var(--gap)); }
.lb-next { right: var(--pad); }

.lb-close:active,
.lb-nav:active {
  background: rgba(240, 213, 158, .16);
  transform: scale(.94);
}

@media (hover: hover) {
  .lb-close:hover,
  .lb-nav:hover { background: rgba(240, 213, 158, .1); }
}

/* ============================================================
   PLANTAS — escolha à esquerda, planta no centro, ponto à direita
   ============================================================ */

.plantas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: calc(var(--gap) * 1.4);
  padding: var(--pad);
}

.plantas-tabs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: calc(var(--u) * .8);
  min-width: 0;
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * .5);
  width: 100%;
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4);
  border-radius: var(--r-lg);
  text-align: left;
  color: var(--origen);
  transition: background .35s ease, color .35s ease, transform .2s ease;
}

.tab strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -.01em;
}

.tab span {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--musgo);
  transition: color .35s ease;
}

.tab + .tab::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * 2.4); right: calc(var(--u) * 2.4);
  top: calc(var(--u) * -.4);
  height: 1px;
  background: var(--linha);
}

.tab.active {
  background: var(--origen);
  color: var(--nevoa);
}

.tab.active span { color: var(--aurora); }

.tab.active::before,
.tab.active + .tab::before { opacity: 0; }

.tab:active { transform: scale(.985); }

@media (hover: hover) {
  .tab:not(.active):hover { background: rgba(51, 71, 52, .06); }
}

.plan-stage {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-viewer {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--ar, 3 / 4);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--linha);
  box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 5) rgba(30, 42, 33, .12);
  touch-action: none;
  cursor: ns-resize;
}

.plan-viewer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.plan-overlay {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
}

/* o divisor é um horizonte: o sol (alça) percorre a planta */
.plan-divider {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 0;
  z-index: 5;
  pointer-events: none;
}

.plan-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: max(-1px, calc(var(--u) * -.15));
  height: max(2px, calc(var(--u) * .3));
  background: linear-gradient(90deg, rgba(233, 180, 106, .35), var(--sol) 50%, rgba(233, 180, 106, .35));
  box-shadow: 0 0 calc(var(--u) * 1.6) rgba(233, 180, 106, .5);
}

.plan-handle {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -50%);
  transition: transform .35s ease;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .7em 1.4em;
  border-radius: 999px;
  background: var(--origen);
  color: var(--nevoa);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(20, 29, 23, .3);
}

.plan-handle::before,
.plan-handle::after {
  content: '';
  width: 0; height: 0;
  border-left: .38em solid transparent;
  border-right: .38em solid transparent;
}

.plan-handle::before { border-bottom: .5em solid var(--aurora); }
.plan-handle::after  { border-top: .5em solid var(--aurora); }

/* mantém a alça visível quando o divisor encosta nas bordas */
.plan-divider.at-bottom .plan-handle { transform: translate(-50%, -100%) translateY(calc(var(--u) * -1.2)); }
.plan-divider.at-top    .plan-handle { transform: translate(-50%, 0) translateY(calc(var(--u) * 1.2)); }

.plan-viewer.anim .plan-overlay {
  transition: clip-path .85s cubic-bezier(.65, 0, .25, 1), -webkit-clip-path .85s cubic-bezier(.65, 0, .25, 1);
}
.plan-viewer.anim .plan-divider { transition: top .85s cubic-bezier(.65, 0, .25, 1); }

.plan-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: calc(var(--gap) * 1.4);
}

.plan-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: calc(var(--u) * .5);
  border-radius: 999px;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.plan-switch button {
  height: var(--tap);
  padding: 0 calc(var(--u) * 1.6);
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--origen);
  transition: background .35s ease, color .35s ease;
}

.plan-switch button.active {
  background: var(--origen);
  color: var(--nevoa);
}

/* ponto de interesse da planta escolhida (abre a galeria) */
.plan-points button {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: calc(var(--gap) * 1.1);
  align-items: center;
  width: 100%;
  padding: calc(var(--u) * 1.2);
  border-radius: var(--r-lg);
  background: var(--papel);
  border: 1px solid var(--linha);
  text-align: left;
  transition: transform .2s ease, box-shadow .3s ease;
}

.plan-points button:active { transform: scale(.985); }

@media (hover: hover) {
  .plan-points button:hover { box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(30, 42, 33, .1); }
}

.plan-points img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}

.pp-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .9);
  min-width: 0;
}

.pp-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.05;
  color: var(--origen);
}

.pp-desc {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--musgo);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pp-more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--origen);
}

.pp-more svg { width: 1.2em; height: 1.2em; }

/* ============================================================
   VAGAS + BOOK + VISUALIZADOR DE PDF (PDF.js)
   ============================================================ */

.vagas {
  display: flex;
  gap: calc(var(--gap) * 1.4);
  padding: var(--pad);
}

.vagas .plantas-tabs {
  flex: none;
  width: clamp(170px, 24%, 520px);
}

.pdf-area {
  position: relative;
  flex: 1;
  min-width: 0;
}

.pdf-area .pdfv {
  position: absolute;
  inset: 0;
}

.pdf-page { padding: var(--pad); }
.pdf-page .pdfv { height: 100%; }

.pdfv {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    #e2e6dc;
  border: 1px solid var(--linha);
  touch-action: none;
}

.pdfv-track {
  position: absolute;
  left: 50%;
  top: 50%;
  will-change: transform;
  cursor: grab;
}

.pdfv.dragging .pdfv-track { cursor: grabbing; }

.pdfv.smooth .pdfv-track {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.pdfv-pg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 2px 14px rgba(30, 42, 33, .12);
}

.pdfv-pg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* recorte em alta resolução sobreposto ao canvas base */
.pdfv-pg .pdfv-hi { position: absolute; }

.pdfv-status {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  background: var(--nevoa);
  color: var(--musgo);
  font-size: var(--t-sm);
  font-weight: 500;
  pointer-events: none;
}

/* carregando: um sol que nasce e se põe */
.pdfv-status::before {
  content: '';
  width: clamp(36px, calc(var(--u) * 6), 90px);
  height: clamp(18px, calc(var(--u) * 3), 45px);
  border-radius: 999px 999px 0 0;
  border: 2px solid var(--sol);
  border-bottom: 0;
  animation: pdfv-rise 1.4s var(--ease-io) infinite alternate;
  transform-origin: 50% 100%;
}

@keyframes pdfv-rise {
  from { transform: scale(.55); opacity: .4; }
  to   { transform: scale(1);   opacity: 1; }
}

.pdfv.ready .pdfv-status { display: none; }
.pdfv.error .pdfv-status::before { display: none; }

/* ============================================================
   VISTAS — panorama por andar
   ============================================================ */

.myview-page { background: var(--pinheiro); }

.myview { background: var(--pinheiro); }

.myview-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.myview-stage.dragging { cursor: grabbing; }

.myview-reel {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform .9s var(--ease-io);
  will-change: transform;
}

.mv-slide {
  position: relative;
  width: 100%;
  height: calc(var(--vhpx, 100vh) - var(--bar-h));
  overflow: hidden;
  background: var(--pinheiro);
}

.mv-pan {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  will-change: transform;
}

.mv-face {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity .65s ease;
}

.mv-front { opacity: 1; }
.mv-back  { opacity: 0; }

.myview.show-back .mv-front { opacity: 0; }
.myview.show-back .mv-back  { opacity: 1; }

/* vistas noturnas cobrem a diurna quando existem */
.mv-front-n,
.mv-back-n { opacity: 0; }

.myview.show-night:not(.show-back) .mv-front-n { opacity: 1; }
.myview.show-night.show-back .mv-back-n { opacity: 1; }

/* véus de contraste: à esquerda (andares) e embaixo (legenda) */
.myview-stage::before,
.myview-stage::after {
  content: '';
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.myview-stage::before {
  left: 0; top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, rgba(20, 29, 23, .55), rgba(20, 29, 23, 0));
}

.myview-stage::after {
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(0deg, rgba(20, 29, 23, .6), rgba(20, 29, 23, 0));
}

/* legenda: andar + orientação, sobre o horizonte */
.mv-caption {
  position: absolute;
  left: calc(var(--pad) * 1.2 + var(--tap) + var(--gap) * 2);
  bottom: calc(var(--pad) * 1.1);
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  color: var(--nevoa);
  pointer-events: none;
}

.mv-caption-floor {
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--t-2xl);
  line-height: 1;
  letter-spacing: -.015em;
}

.mv-caption-sep { display: none; }

.mv-caption-face {
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--aurora);
}

.mv-draghint {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.8);
  border-radius: 999px;
  background: rgba(20, 29, 23, .58);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 213, 158, .3);
  color: var(--nevoa);
  font-size: var(--t-md);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s ease;
}

.mv-draghint.hide { opacity: 0; }

.mv-draghint-ic {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .4);
  color: var(--aurora);
  animation: mv-sway 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

.mv-draghint-ic svg {
  width: clamp(18px, calc(var(--u) * 2.8), 44px);
  height: clamp(18px, calc(var(--u) * 2.8), 44px);
}

@keyframes mv-sway {
  0%, 100% { transform: translateX(calc(var(--u) * -1.2)); }
  50%      { transform: translateX(calc(var(--u) * 1.2)); }
}

/* andares: régua vertical à esquerda (o sol marca o andar) */
.mv-rail {
  position: absolute;
  left: calc(var(--pad) * 1.2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.6);
}

.mv-floors {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .6);
}

.mv-floors::before {
  content: '';
  position: absolute;
  left: 50%; top: calc(var(--tap) * .5); bottom: calc(var(--tap) * .5);
  width: 1px;
  background: rgba(240, 213, 158, .4);
}

.mv-floor {
  position: relative;
  z-index: 2;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--nevoa);
  background: rgba(20, 29, 23, .55);
  border: 1px solid rgba(240, 213, 158, .3);
  transition: color .4s ease, transform .2s ease, border-color .4s ease;
}

.mv-floor:active { transform: scale(.92); }

.mv-floor-n {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1;
}

.mv-floor-tag {
  font-size: calc(var(--t-xs) * .78);
  font-weight: 500;
  opacity: .75;
  line-height: 1.2;
}

.mv-floor.active {
  color: var(--pinheiro);
  background: transparent;
  border-color: transparent;
}

.mv-floors-thumb {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 calc(var(--u) * 3) rgba(240, 213, 158, .55);
  transform: translate3d(0, 0, 0);
  transition: transform .9s var(--ease-io), width .3s ease, height .3s ease;
  pointer-events: none;
  mix-blend-mode: normal;
}

/* o texto ativo fica por cima do sol */
.mv-floor.active { z-index: 4; }

/* topo direito: frente/fundos + dia/noite */
.mv-topbar {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.mv-face-toggle {
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(var(--u) * .5);
  border-radius: 999px;
  background: rgba(20, 29, 23, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 213, 158, .3);
}

.mv-ft-btn {
  position: relative;
  z-index: 2;
  min-width: clamp(84px, calc(var(--u) * 13), 210px);
  height: var(--tap);
  padding: 0 calc(var(--u) * 2.2);
  color: var(--nevoa);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: color .4s ease;
}

.mv-ft-btn.active { color: var(--pinheiro); }

.mv-ft-thumb {
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * .5); bottom: calc(var(--u) * .5);
  left: calc(var(--u) * .5);
  width: calc(50% - var(--u) * .5);
  border-radius: 999px;
  background: var(--aurora);
  transition: transform .55s var(--ease-io);
}

.myview.show-back .mv-ft-thumb { transform: translateX(100%); }

.mv-daynight {
  position: relative;
  width: calc(var(--tap) + var(--u));
  height: calc(var(--tap) + var(--u));
  border-radius: 50%;
  border: 1px solid rgba(240, 213, 158, .3);
  background: rgba(20, 29, 23, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--aurora);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .4s ease, background .4s ease, opacity .4s ease, transform .2s ease;
}

.mv-daynight:active { transform: scale(.92); }

/* some quando o andar/face não tem foto noturna */
.mv-daynight:disabled { opacity: 0; pointer-events: none; }

.mv-daynight svg {
  position: absolute;
  width: 42%;
  height: 42%;
  transition: opacity .45s ease, transform .45s ease;
}

.mv-dn-sun { opacity: 0; transform: rotate(90deg) scale(.6); }

.myview.show-night .mv-daynight {
  background: var(--aurora);
  color: var(--pinheiro);
}

.myview.show-night .mv-dn-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
.myview.show-night .mv-dn-sun  { opacity: 1; transform: rotate(0) scale(1); }

/* ============================================================
   PÔR DO SOL — vídeo do dia para a noite, guiado por uma régua
   ============================================================ */

.pds-page { background: var(--pinheiro); }

.pds {
  --p: 0;                                   /* 0 = dia, 1 = noite (js) */
  background: var(--pinheiro);
}

.pds-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.pds-stage.dragging { cursor: grabbing; }

.pds-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* véus de contraste: embaixo (legenda) e à direita (régua) */
.pds-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(20, 29, 23, .6) 0%, rgba(20, 29, 23, 0) 34%),
    linear-gradient(270deg, rgba(20, 29, 23, .55) 0%, rgba(20, 29, 23, 0) 24%);
}

/* legenda sobre o horizonte, à esquerda (mesmo desenho das Vistas) */
.pds-caption {
  position: absolute;
  left: calc(var(--pad) * 1.4);
  bottom: calc(var(--pad) * 1.1);
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  color: var(--nevoa);
  pointer-events: none;
}

.pds-caption-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--t-2xl);
  line-height: 1;
  letter-spacing: -.015em;
}

.pds-caption-phase {
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--aurora);
}

/* dica de arraste (some no primeiro toque) */
.pds-hint {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.8);
  border-radius: 999px;
  background: rgba(20, 29, 23, .58);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 213, 158, .3);
  color: var(--nevoa);
  font-size: var(--t-md);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s ease;
}

.pds-hint.hide { opacity: 0; }

.pds-hint-ic {
  display: flex;
  flex-direction: column;
  color: var(--aurora);
  animation: pds-sway 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

.pds-hint-ic svg {
  width: clamp(16px, calc(var(--u) * 2.4), 38px);
  height: clamp(16px, calc(var(--u) * 2.4), 38px);
  margin: calc(var(--u) * -.4) 0;
}

@keyframes pds-sway {
  0%, 100% { transform: translateY(calc(var(--u) * -.8)); }
  50%      { transform: translateY(calc(var(--u) * .8)); }
}

/* régua à direita: o sol desce do dia (alto) até a noite (base) */
.pds-rail {
  position: absolute;
  right: calc(var(--pad) * 1.2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  height: min(58%, calc(var(--u) * 48));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.6) calc(var(--u) * .6);
  border-radius: 999px;
  background: rgba(20, 29, 23, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 213, 158, .3);
}

.pds-end {
  flex: none;
  width: calc(var(--tap) * 1.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .5);
  font-size: var(--t-xs);
  font-weight: 500;
  transition: transform .2s ease;
}

.pds-end:active { transform: scale(.92); }

.pds-end svg {
  width: calc(var(--tap) * .46);
  height: calc(var(--tap) * .46);
}

/* a ponta do lado atual acende, a outra apaga, acompanhando a régua */
.pds-end-day   { color: rgba(236, 238, 230, calc(.4 + (1 - var(--p)) * .6)); }
.pds-end-night { color: rgba(236, 238, 230, calc(.4 + var(--p) * .6)); }
.pds-end-day svg { color: rgba(240, 213, 158, calc(.4 + (1 - var(--p)) * .6)); }

.pds-track {
  position: relative;
  flex: 1;
  width: calc(var(--tap) * 1.3);
  cursor: pointer;
  transition: opacity .4s ease;
}

.pds:not(.ready) .pds-track { opacity: .45; }

/* percurso do sol: a linha começa e termina meio sol para dentro */
.pds-track-line {
  position: absolute;
  left: 50%;
  top: calc(var(--tap) * .3);
  bottom: calc(var(--tap) * .3);
  width: max(2px, calc(var(--u) * .3));
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(240, 213, 158, .22);
}

/* o rastro do sol: luz no alto, entardecer embaixo */
.pds-track-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--p) * 100%);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--luz), var(--sol));
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(233, 180, 106, .5);
}

/* o sol: o brilho em volta apaga conforme anoitece */
.pds-thumb {
  position: absolute;
  left: 50%;
  top: calc(var(--p) * 100%);
  width: calc(var(--tap) * .56);
  height: calc(var(--tap) * .56);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--aurora);
  box-shadow:
    0 0 calc(var(--u) * 3) calc(var(--u) * .4) rgba(240, 213, 158, calc(.65 - var(--p) * .4)),
    0 2px 10px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease);
}

.pds-stage.dragging .pds-thumb { transform: translate(-50%, -50%) scale(1.15); }

/* ============================================================
   TELAS BAIXAS (celular deitado) e EM PÉ
   ============================================================ */

@media (max-height: 520px) and (orientation: landscape) {
  .gb-word { display: none; }
  .menu-top { height: 24%; }
  .pp-desc { -webkit-line-clamp: 3; }
  .plan-points img { display: none; }
  .plan-points button { grid-template-columns: 1fr; }
  .mv-floor-tag { display: none; }
  .mi-ic { top: calc(var(--u) * 1.6); }
}

@media (orientation: portrait) {
  .gb-word { display: none; }
  .gb-title { font-size: var(--t-md); }

  .menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .menu-list li:not(:nth-child(3n + 1)) { border-left: 0; }
  .menu-list li:nth-child(n + 4) { border-top: 0; }
  .menu-list li:nth-child(2n) { border-left: 1px solid var(--linha-aurora); }
  .menu-list li:nth-child(n + 3) { border-top: 1px solid var(--linha-aurora); }
  .menu-brand { height: clamp(26px, calc(var(--u) * 9), 80px); }
  .mo-extra { display: none; }   /* em pé o atalho fica só "Raízes" */

  .implanta { flex-direction: column; justify-content: safe center; overflow-y: auto; }
  .implanta-fig { width: 100%; max-height: 60%; }
  .implanta-lists { flex: none; overflow: visible; }

  .plantas {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .plantas-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .plantas-tabs::-webkit-scrollbar { display: none; }
  .plantas .tab { flex: 1 0 40%; }
  .tab + .tab::before { display: none; }
  .plan-points img { display: none; }
  .plan-points button { grid-template-columns: 1fr; }

  .vagas { flex-direction: column; }
  .vagas .plantas-tabs { width: 100%; flex-direction: row; }

  .lightbox { --lb-side: 1fr; }
  .lb-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb-caption { border-left: 0; border-top: 1px solid var(--linha-aurora); padding: var(--pad) var(--pad) calc(var(--pad) * 2 + var(--tap)); }

  .mv-caption { left: var(--pad); bottom: calc(var(--pad) * 1.4 + var(--tap)); }
  .mv-topbar { top: auto; bottom: var(--pad); right: var(--pad); }

  .pds-caption { left: var(--pad); flex-direction: column; gap: calc(var(--u) * .8); }
  .pds-rail { right: var(--pad); }
}

/* celular em pé: as duas legendas da implantação, uma embaixo da outra */
@media (orientation: portrait) and (max-width: 520px) {
  .implanta-lists { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
}