/* ============================================================
   RAÍZES MANTIQUEIRA — TOTEM
   Serra: a cumeada da Mantiqueira acima do horizonte, as raízes
   abaixo. A navegação é um tronco vertical (trilho à esquerda);
   os títulos repetem as capitulares espaçadas do logotipo.
   carvão #273028 · osso #ebe5d8 · cobre #c8925f
   Layout pensado para tela horizontal (projetor), fluido por
   --u = 1% da altura de um quadro 16:9 que cabe na tela.
   ============================================================ */

:root {
  --breu:   #111613;
  --solo:   #171d19;
  --raizes: #273028;
  --painel: #1d241f;
  --serra:  #36423a;
  --nevoa:  #98a394;
  --salvia: #b4c0ad;
  --osso:   #ebe5d8;
  --papel:  #efeae0;
  --cobre:  #c8925f;
  --cobre-claro: #e0b48a;
  --linha:  rgba(235, 229, 216, .12);
  --linha-forte: rgba(235, 229, 216, .24);

  --serif: 'Noto Serif Display', 'Georgia', serif;
  --sans:  'Archivo', 'Segoe UI', sans-serif;

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

  --rail-w: clamp(60px, 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(8px,  calc(var(--u) * 1.2), 22px);
  --r-sm:   clamp(4px,  calc(var(--u) * .6),  12px);
  --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(20px, calc(var(--u) * 4),    66px);
  --t-2xl: clamp(28px, calc(var(--u) * 6.2),  100px);

  --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(--solo);
  color: var(--osso);
  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(--cobre);
  outline-offset: 3px;
}

/* ============================================================
   TRILHO — navegação vertical à esquerda (header.php)
   ============================================================ */

.rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  padding: calc(var(--u) * 2.6) 0 calc(var(--u) * 2.2);
  background: var(--raizes);
  border-right: 1px solid var(--linha);
  color: var(--osso);
}

.rail-home {
  flex: none;
  width: calc(var(--rail-w) * .6);
  height: calc(var(--rail-w) * .6);
  color: var(--osso);
}

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

/* a raiz que liga o emblema ao título e ao menu */
.rail-root {
  flex: 1;
  width: 1px;
  min-height: calc(var(--u) * 2);
  background: linear-gradient(180deg, var(--linha-forte), rgba(200, 146, 95, .55));
}

.rail-root-end {
  background: linear-gradient(180deg, rgba(200, 146, 95, .55), var(--linha-forte));
}

.rail-title {
  flex: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: 1;
  letter-spacing: .5em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--osso);
  padding-top: .5em;   /* compensa o espaçamento da última letra */
}

.rail-menu {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .5);
  width: calc(var(--rail-w) * .78);
  height: calc(var(--rail-w) * .78);
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  color: var(--osso);
  text-decoration: none;
  font-size: calc(var(--t-xs) * .9);
  font-weight: 500;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}

.rail-menu svg {
  width: 38%;
  height: 38%;
  color: var(--cobre);
}

.rail-menu:active { background: rgba(200, 146, 95, .16); transform: scale(.95); }

@media (hover: hover) {
  .rail-menu:hover { border-color: var(--cobre); }
}

/* área de conteúdo: tudo à direita do trilho */
.stage {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--rail-w);
  overflow: hidden;
}

/* ============================================================
   HOME — a serra ao entardecer; o menu desce até as raízes
   ============================================================ */

.home {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--breu);
}

.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; }

/* a cena tem 160% da tela: céu (66%) + subsolo; ao abrir, sobe 52% */
.scene {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 160%;
  z-index: 1;
  transition: transform 1.25s var(--ease-io);
}

.sky {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 41.25%;
  background:
    radial-gradient(60% 60% at 72% 100%, rgba(200, 146, 95, .3) 0%, rgba(200, 146, 95, 0) 72%),
    linear-gradient(180deg, #0e1310 0%, #161d18 40%, #27302a 100%);
}

/* com vídeo, o céu fica translúcido e o vídeo aparece por trás da serra */
.has-video .sky {
  background:
    linear-gradient(180deg, rgba(14, 19, 16, .55) 0%, rgba(22, 29, 24, .3) 45%, rgba(39, 48, 42, .55) 100%);
}

.ridges {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
}

.ridge {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  transition: transform 1.25s var(--ease-io);
}

.ridge-1 { fill: #3c473f; opacity: .85; }
.ridge-2 { fill: #313b34; }
.ridge-3 { fill: #252e28; }
.ridge-4 { fill: #1a211c; }

/* névoa entre as camadas */
.mist {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 229, 216, .1), rgba(235, 229, 216, 0));
  pointer-events: none;
  animation: mist-drift 46s ease-in-out infinite alternate;
}

.mist-a { top: 18%; }
.mist-b { top: 44%; height: 28%; animation-duration: 63s; animation-direction: alternate-reverse; }

@keyframes mist-drift {
  from { transform: translateX(-8%); }
  to   { transform: translateX(8%); }
}

.underground {
  position: absolute;
  left: 0; right: 0;
  top: 41.25%;
  bottom: 0;
  background: linear-gradient(180deg, #161c18 0%, var(--breu) 40%);
}

/* o horizonte do emblema */
.underground::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: max(1px, calc(var(--u) * .14));
  background: linear-gradient(90deg,
    rgba(235, 229, 216, 0) 0%,
    rgba(235, 229, 216, .38) 22%,
    rgba(235, 229, 216, .55) 50%,
    rgba(235, 229, 216, .38) 78%,
    rgba(235, 229, 216, 0) 100%);
}

/* as raízes do emblema, crescendo a partir do horizonte */
.roots-art {
  position: absolute;
  left: 50%; top: 0;
  height: 27%;
  aspect-ratio: 68 / 29.8;
  transform: translateX(-50%);
  transition: opacity 1s ease;
}

.roots-art svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #2c372f;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 140%;
  mask-size: 100% 140%;
  animation: roots-grow 3.2s var(--ease) .5s both;
}

@keyframes roots-grow {
  from { -webkit-mask-size: 100% 0%;   mask-size: 100% 0%; }
  to   { -webkit-mask-size: 100% 140%; mask-size: 100% 140%; }
}

.logo-trigger {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: var(--osso);
  transition: opacity .45s ease;
}

/* cartela: logotipo horizontal no alto, à esquerda */
.home-lockup {
  position: absolute;
  left: calc(var(--pad) * 2.4);
  top: 12%;
  height: clamp(56px, calc(var(--u) * 14), 240px);
  color: var(--osso);
}

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

/* convite a descer: a raiz central continua numa linha até o texto */
.tap-hint {
  position: absolute;
  left: 50%; bottom: calc(var(--u) * 3);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--osso);
}

.tap-hint::before {
  content: '';
  width: 1px;
  height: calc(var(--u) * 4.5);
  background: linear-gradient(180deg, var(--cobre), rgba(200, 146, 95, 0));
  transform-origin: 50% 0;
  animation: hint-descend 2.6s var(--ease-io) infinite;
}

@keyframes hint-descend {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* — menu aberto: a câmera desce para o subsolo — */

body.menu-open .scene      { transform: translateY(-32.5%); }
body.menu-open .ridge-1    { transform: translateY(26%); }
body.menu-open .ridge-2    { transform: translateY(16%); }
body.menu-open .ridge-3    { transform: translateY(7%); }
body.menu-open .roots-art  { opacity: .32; }
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.25s;
}

.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 desce (body.menu-open move a .scene) e some ao fechar */
.menu-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--breu);
  opacity: 0;
  transition: opacity .6s ease .35s;
}

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

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

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

.menu-brand {
  height: clamp(30px, calc(var(--u) * 6.4), 110px);
  color: var(--osso);
}

.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 var(--linha-forte);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--osso);
  transition: background .25s ease, border-color .25s ease;
}

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

.menu-close:active { background: rgba(200, 146, 95, .16); }

@media (hover: hover) {
  .menu-close:hover { border-color: var(--cobre); }
}

/* 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 var(--linha);
  color: rgba(235, 229, 216, .55);
  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;
}
.menu-outro svg {
  width: calc(var(--tap) * .3);
  height: calc(var(--tap) * .3);
  color: var(--cobre);
  opacity: .75;
}
.menu-outro:active { background: rgba(200, 146, 95, .12); }
@media (hover: hover) {
  .menu-outro:hover { color: var(--osso); border-color: var(--linha-forte); }
}

/* índice em duas colunas; o tronco das raízes passa entre elas */
.menu-list {
  position: absolute;
  left: calc(var(--pad) * 2.4);
  right: calc(var(--pad) * 2.4);
  top: calc(14% + var(--pad) * 1.6);
  bottom: calc(var(--pad) * 1.6);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-auto-flow: column;
  column-gap: calc(var(--u) * 16);
}

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

.menu.open .menu-list li {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .9s var(--ease);
  transition-delay: calc(.62s + var(--i) * 50ms);
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  height: 100%;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  color: var(--osso);
}

/* a linha de cobre cresce como uma raiz ao tocar */
.menu-item::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: max(1px, calc(var(--u) * .2));
  background: linear-gradient(90deg, var(--cobre), rgba(200, 146, 95, .2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}

.menu-item:active::after { transform: scaleX(1); }

/* página atual: nome em cobre e a linha já cheia */
.menu-item.atual::after { transform: scaleX(1); }
.menu-item.atual .mi-name { color: var(--cobre-claro); }

.mi-name {
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -.005em;
  transition: color .3s ease, transform .5s var(--ease);
}

.menu-item:active .mi-name {
  color: var(--cobre-claro);
  transform: translateX(calc(var(--u) * 1));
}

@media (hover: hover) {
  .menu-item:hover::after { transform: scaleX(1); }
  .menu-item:hover .mi-name { color: var(--cobre-claro); transform: translateX(calc(var(--u) * 1)); }
}

.mi-meta {
  flex: none;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--cobre);
}

.mi-new {
  padding: .35em .9em .4em;
  border-radius: 999px;
  border: 1px solid var(--cobre);
  font-size: var(--t-xs);
}

/* volta do botão "Menu" das páginas internas: já abre aberto */
body.menu-instant .scene,
body.menu-instant .ridge,
body.menu-instant .roots-art,
body.menu-instant .logo-trigger,
body.menu-instant .menu,
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(--breu); }

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

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

/* Pannellum (vista 360) */
body.pano-page { background: var(--breu); }
body.pano-page .pnlm-container { background: var(--breu); font-family: var(--sans); }
body.pano-page .pnlm-controls-container { top: var(--pad); left: var(--pad); }
body.pano-page .pnlm-controls {
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
body.pano-page .pnlm-control { background-color: rgba(235, 229, 216, .94); }
body.pano-page .pnlm-load-box {
  background: rgba(17, 22, 19, .9);
  border-radius: var(--r-lg);
  font-family: var(--sans);
  color: var(--osso);
}
body.pano-page .pnlm-lbar { border-color: var(--cobre); }
body.pano-page .pnlm-lbar-fill { background: var(--cobre); }

/* Leaflet (posição solar) */
body.map-page .leaflet-container { background: var(--breu); 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-forte);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
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(--osso);
  background: rgba(29, 36, 31, .94);
  border-bottom-color: var(--linha);
}
body.map-page .leaflet-bar a:last-child { border-bottom: 0; }

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

.video-page .stage {
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(200, 146, 95, .1) 0%, rgba(200, 146, 95, 0) 70%),
    var(--breu);
}

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

/* volume do vídeo — reaproveita a coluna 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(--cobre); }

/* nível atual, aparece por um instante ao lado da coluna */
.vol-level {
  position: absolute;
  right: calc(100% + var(--u) * 1.2);
  top: 50%;
  transform: translate(8px, -50%);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4);
  border-radius: 999px;
  background: rgba(17, 22, 19, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha-forte);
  color: var(--osso);
  font-size: clamp(13px, calc(var(--u) * 1.8), 28px);
  letter-spacing: .04em;
  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(0, -50%);
}

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

.iz-controls {
  position: absolute;
  right: calc(var(--u) * 1.6);
  bottom: calc(var(--u) * 1.6);
  z-index: 4;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  padding: calc(var(--u) * .5);
  border-radius: 999px;
  background: rgba(17, 22, 19, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha-forte);
}

.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(--osso);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .25s ease, transform .2s ease, height .3s var(--ease), opacity .3s ease;
}

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

.iz-btn:active {
  background: rgba(200, 146, 95, .2);
  transform: scale(.92);
}

/* voltar ao enquadramento: só aparece com zoom, no topo da coluna */
.iz-reset {
  order: 3;
  height: 0;
  opacity: 0;
  pointer-events: none;
  color: var(--cobre);
}

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

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

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

.implanta-lists {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1.2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--serra) transparent;
}

.implanta-fig {
  flex: none;
  order: 2;
  height: 100%;
  aspect-ratio: var(--ar, 3 / 4);
  max-width: 52%;
  padding: calc(var(--u) * .8);
  border-radius: var(--r-lg);
  background: var(--papel);
}

/* container de tamanho: a planta usa cqw/cqh para caber inteira.
   o container isola o multiply, por isso o papel também vai aqui */
.implanta-zoom {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-sm);
  touch-action: none;
  container-type: size;
  background: var(--papel);
}

/* planta + números num bloco só, na proporção da imagem (como object-fit: contain);
   o branco da imagem vira papel (multiply), sem caixa branca no escuro */
.iz-plan {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  width: min(100cqw, 100cqh * var(--arn));
  height: min(100cqh, 100cqw / var(--arn));
  transform-origin: center center;
  will-change: transform;
  mix-blend-mode: multiply;
  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);
}

/* área de toque sobre cada número impresso na planta, um pouco maior que o círculo */
.iz-pin {
  position: absolute;
  width: 6.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background .25s ease;
}

.iz-pin.pressed { background: rgba(200, 146, 95, .45); }

@media (hover: hover) {
  .iz-pin:hover { background: rgba(200, 146, 95, .3); }
}

/* centraliza quando sobra espaço; quando falta, rola desde o topo */
.implanta-lists > :first-child { margin-top: auto; }
.implanta-lists > :last-child  { margin-bottom: auto; }

.area h2 {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.4);
  padding-bottom: calc(var(--u) * 1);
  border-bottom: 1px solid var(--linha-forte);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.1;
  color: var(--osso);
}

/* a cor da marca = a cor dos números da área */
.area h2::before {
  content: '';
  flex: none;
  align-self: center;
  width: calc(var(--u) * 3);
  min-width: 16px;
  height: 2px;
}

.area ol {
  list-style: none;
  column-count: 2;
  column-gap: calc(var(--gap) * 2);
}

.area li { break-inside: avoid; }

.amenity {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  min-height: clamp(30px, calc(var(--u) * 5.2), 86px);
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.15;
  color: var(--osso);
  transition: color .25s ease, background .25s ease;
}

.amenity .n {
  flex: none;
  width: 1.9em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-md);
  font-variant-numeric: lining-nums tabular-nums;
}

.area .n { color: var(--cobre); }

.amenity .cam {
  flex: none;
  width: clamp(16px, calc(var(--u) * 2.4), 38px);
  height: clamp(16px, calc(var(--u) * 2.4), 38px);
  margin-left: auto;
  color: var(--nevoa);
  opacity: .8;
}

span.amenity { color: var(--nevoa); }

.amenity.has-photo { cursor: pointer; }
.amenity.has-photo:active { color: var(--cobre-claro); background: rgba(200, 146, 95, .08); }

@media (hover: hover) {
  .amenity.has-photo:hover { color: var(--cobre-claro); }
}

/* ============================================================
   GALERIA — foto em tela cheia, legenda em faixa inferior
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: #0d110f;
  color: var(--osso);
  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-rows: minmax(0, 1fr) auto;
  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(--tap) + var(--pad)) * 2);
  max-height: calc(100% - var(--pad) * 2);
  pointer-events: auto;
}

/* faixa de legenda, como a etiqueta de uma obra */
.lb-caption {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(var(--u) * 1.6);
  row-gap: calc(var(--u) * .6);
  padding: calc(var(--u) * 2.2) calc(var(--pad) * 2 + var(--tap) * 2 + var(--gap)) calc(var(--u) * 2.4) calc(var(--pad) * 1.4);
  border-top: 1px solid var(--linha);
  background: var(--solo);
}

.lb-chip {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--nevoa);
}

.lb-chip::before {
  content: '';
  width: 1.6em;
  height: 2px;
  background: currentColor;
}

.lb-chip.interna { color: var(--salvia); }
.lb-chip.externa { color: var(--cobre); }

.lb-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--cobre);
  font-variant-numeric: lining-nums;
}

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

.lb-desc {
  flex-basis: 100%;
  max-width: 60em;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: rgba(235, 229, 216, .76);
}

.lb-count {
  position: absolute;
  top: var(--pad);
  left: calc(var(--pad) * 1.4);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--nevoa);
  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 var(--linha-forte);
  color: var(--osso);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}

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

.lb-nav { bottom: calc(var(--u) * 2.2); }
.lb-prev { right: calc(var(--pad) + var(--tap) + var(--gap)); }
.lb-next { right: var(--pad); }

.lb-close:active,
.lb-nav:active {
  background: rgba(200, 146, 95, .2);
  transform: scale(.94);
}

@media (hover: hover) {
  .lb-close:hover,
  .lb-nav:hover { border-color: var(--cobre); }
}

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

.plantas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 36%, 680px);
  grid-template-areas: "plan side";
  gap: calc(var(--gap) * 1.8);
  padding: var(--pad) calc(var(--pad) * 1.4);
}

.plan-stage {
  grid-area: plan;
  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);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--papel);
  touch-action: none;
  cursor: ns-resize;
}

.plan-viewer[data-axis="x"] { cursor: ew-resize; }

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

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

/* divisor vertical: um tronco de cobre com a alça no meio */
.plan-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: 100%;
  width: 0;
  z-index: 5;
  pointer-events: none;
}

.plan-divider::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: max(-1px, calc(var(--u) * -.15));
  width: max(2px, calc(var(--u) * .3));
  background: var(--cobre);
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(200, 146, 95, .55);
}

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

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

.plan-handle::before { border-right: .5em solid var(--cobre); }
.plan-handle::after  { border-left: .5em solid var(--cobre); }

/* alça visível quando o divisor encosta nas bordas */
.plan-divider.at-bottom .plan-handle { transform: translate(-100%, -50%) translateX(calc(var(--u) * -1.2)); }
.plan-divider.at-top    .plan-handle { transform: translate(0, -50%) translateX(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: left .85s cubic-bezier(.65, 0, .25, 1); }

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

/* metragens em grade 2 × 2 */
.plantas .plantas-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linha-forte);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * .6);
  padding: calc(var(--u) * 2) calc(var(--u) * 1.6);
  border-bottom: 1px solid var(--linha-forte);
  text-align: left;
  color: var(--nevoa);
  transition: color .35s ease, background .35s ease;
}

.plantas .tab:nth-child(odd) { border-right: 1px solid var(--linha-forte); }

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

.tab span {
  font-size: var(--t-xs);
  font-weight: 500;
}

/* marcador: a raiz de cobre sob a opção escolhida */
.tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: max(2px, calc(var(--u) * .3));
  background: var(--cobre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}

.tab.active { color: var(--osso); background: rgba(235, 229, 216, .04); }
.tab.active span { color: var(--cobre-claro); }
.tab.active::after { transform: scaleX(1); }

.tab:active { background: rgba(235, 229, 216, .07); }

/* técnica / humanizada: duas palavras, a escolhida sublinhada */
.plan-switch {
  display: flex;
  gap: calc(var(--u) * 3);
}

.plan-switch button {
  position: relative;
  height: var(--tap);
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--nevoa);
  transition: color .35s ease;
}

.plan-switch button::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--u) * .6);
  height: max(2px, calc(var(--u) * .25));
  background: var(--cobre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}

.plan-switch button.active { color: var(--osso); }
.plan-switch button.active::after { transform: scaleX(1); }

/* ponto de interesse da planta escolhida (abre a galeria) */
.plan-points button {
  display: grid;
  grid-template-columns: clamp(64px, calc(var(--u) * 13), 220px) 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(--painel);
  border: 1px solid var(--linha);
  text-align: left;
  transition: border-color .3s ease, transform .2s ease;
}

.plan-points button:active { transform: scale(.985); border-color: var(--cobre); }

@media (hover: hover) {
  .plan-points button:hover { border-color: rgba(200, 146, 95, .6); }
}

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

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

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

.pp-desc {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--nevoa);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -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(--cobre-claro);
}

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

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

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

.vagas .plantas-tabs {
  order: 2;
  flex: none;
  width: clamp(180px, 24%, 500px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
}

.vagas .tab { border-top: 1px solid var(--linha-forte); border-bottom: 0; }
.vagas .tab:last-child { border-bottom: 1px solid var(--linha-forte); }
.vagas .tab::after { bottom: auto; top: -1px; }

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

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

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

.pdfv {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--painel);
  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 4px 26px rgba(0, 0, 0, .45);
}

.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(--painel);
  color: var(--nevoa);
  font-size: var(--t-sm);
  font-weight: 500;
  pointer-events: none;
}

/* carregando: uma raiz que cresce e recolhe */
.pdfv-status::before {
  content: '';
  width: 2px;
  height: clamp(28px, calc(var(--u) * 6), 90px);
  background: linear-gradient(180deg, var(--cobre), rgba(200, 146, 95, 0));
  transform-origin: 50% 0;
  animation: pdfv-grow 1.3s var(--ease-io) infinite alternate;
}

@keyframes pdfv-grow {
  from { transform: scaleY(.15); }
  to   { transform: scaleY(1); }
}

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

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

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

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

.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: var(--vhpx, 100vh);
  overflow: hidden;
  background: var(--breu);
}

.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: alto (legenda), direita (andares), base (frente/fundos) */
.myview-stage::before,
.myview-stage::after {
  content: '';
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.myview-stage::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 17, 15, .6) 0%, rgba(13, 17, 15, 0) 30%),
    linear-gradient(270deg, rgba(13, 17, 15, .6) 0%, rgba(13, 17, 15, 0) 26%);
}

.myview-stage::after {
  left: 0; right: 0; bottom: 0;
  height: 24%;
  background: linear-gradient(0deg, rgba(13, 17, 15, .55), rgba(13, 17, 15, 0));
}

/* legenda no alto, à esquerda */
.mv-caption {
  position: absolute;
  left: calc(var(--pad) * 1.4);
  top: calc(var(--pad) * 1.1);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .8);
  color: var(--osso);
  pointer-events: none;
}

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

.mv-caption-sep {
  width: calc(var(--u) * 5);
  height: 2px;
  background: var(--cobre);
}

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

.mv-draghint {
  position: absolute;
  left: 50%; top: 50%;
  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(13, 17, 15, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--linha-forte);
  color: var(--osso);
  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(--cobre);
  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: numerais à direita, marcados por uma raiz de cobre */
.mv-rail {
  position: absolute;
  right: calc(var(--pad) * 1.2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--u) * 2.4);
}

.mv-floors {
  --fp: calc(var(--u) * .6);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--fp);
  border-radius: var(--r-lg);
  background: rgba(13, 17, 15, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--linha);
}

.mv-floor {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .45em;
  min-width: calc(var(--tap) * 1.9);
  height: calc(var(--tap) * 1.05);
  padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 2.6);
  color: rgba(235, 229, 216, .62);
  transition: color .4s ease;
}

.mv-floor-n {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: calc(var(--tap) * 1.05);
}

.mv-floor-tag {
  font-size: var(--t-xs);
  font-weight: 500;
}

.mv-floor.active { color: var(--osso); }

.mv-floors-thumb {
  position: absolute;
  top: var(--fp); left: var(--fp);
  z-index: 1;
  border-radius: var(--r-sm);
  background: rgba(235, 229, 216, .08);
  transform: translate3d(0, 0, 0);
  transition: transform .9s var(--ease-io), width .3s ease, height .3s ease;
  pointer-events: none;
}

.mv-floors-thumb::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: max(2px, calc(var(--u) * .35));
  background: var(--cobre);
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(200, 146, 95, .6);
}

.mv-daynight {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  background: rgba(13, 17, 15, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--osso);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .4s ease, background .4s ease, border-color .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 {
  border-color: var(--cobre);
  color: var(--cobre-claro);
}

.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); }

/* frente / fundos: duas palavras na base, sublinhado de cobre */
.mv-face-toggle {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad) * 1.1);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
}

.mv-ft-btn {
  position: relative;
  z-index: 2;
  min-width: clamp(96px, calc(var(--u) * 15), 240px);
  height: var(--tap);
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 400;
  color: rgba(235, 229, 216, .62);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  transition: color .4s ease;
}

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

/* andar sem foto de fundos */
.mv-ft-btn:disabled { opacity: .35; pointer-events: none; }

.mv-ft-thumb {
  position: absolute;
  z-index: 1;
  left: 0; bottom: 0;
  width: 50%;
  height: max(2px, calc(var(--u) * .3));
  background: var(--cobre);
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(200, 146, 95, .6);
  transition: transform .55s var(--ease-io);
}

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

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

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

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

.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: alto (legenda) e direita (régua) */
.pds-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 17, 15, .6) 0%, rgba(13, 17, 15, 0) 30%),
    linear-gradient(270deg, rgba(13, 17, 15, .6) 0%, rgba(13, 17, 15, 0) 24%);
}

/* legenda no alto, à esquerda (mesmo desenho das Vistas) */
.pds-caption {
  position: absolute;
  left: calc(var(--pad) * 1.4);
  top: calc(var(--pad) * 1.1);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .8);
  pointer-events: none;
}

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

.pds-caption-sep {
  width: calc(var(--u) * 5);
  height: 2px;
  background: var(--cobre);
}

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

/* dica de arraste (some no primeiro toque) */
.pds-hint {
  position: absolute;
  left: 50%; top: 50%;
  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(13, 17, 15, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--linha-forte);
  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(--cobre);
  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: sol no alto, lua na base */
.pds-rail {
  position: absolute;
  right: calc(var(--pad) * 1.2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  height: min(46%, calc(var(--u) * 42));
  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(13, 17, 15, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--linha);
}

.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(235, 229, 216, calc(.4 + (1 - var(--p)) * .6)); }
.pds-end-night { color: rgba(235, 229, 216, calc(.4 + var(--p) * .6)); }
.pds-end-day svg { color: rgba(224, 180, 138, 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 polegar: a linha começa e termina meio polegar 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: var(--linha-forte);
}

.pds-track-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--p) * 100%);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--cobre-claro), var(--cobre));
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(200, 146, 95, .5);
}

.pds-thumb {
  position: absolute;
  left: 50%;
  top: calc(var(--p) * 100%);
  width: calc(var(--tap) * .5);
  height: calc(var(--tap) * .5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--osso);
  border: max(2px, calc(var(--u) * .3)) solid var(--cobre);
  box-shadow: 0 0 calc(var(--u) * 2) rgba(200, 146, 95, .6), 0 2px 10px rgba(0, 0, 0, .4);
  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) {
  .rail-menu span { display: none; }
  .rail-title { letter-spacing: .38em; }
  .plan-points img { display: none; }
  .plan-points button { grid-template-columns: 1fr; }
  .pp-desc { -webkit-line-clamp: 2; }
  .mv-floor-tag { display: none; }
  .mv-floor { min-width: calc(var(--tap) * 1.3); }
}

@media (orientation: portrait) {
  .rail {
    right: 0; bottom: auto;
    width: auto;
    height: var(--rail-w);
    flex-direction: row;
    padding: 0 var(--pad);
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }
  .rail-root { width: auto; height: 1px; min-height: 0; min-width: calc(var(--u) * 2); }
  .rail-title { writing-mode: horizontal-tb; transform: none; padding-top: 0; letter-spacing: .3em; }
  .stage { left: 0; top: var(--rail-w); }
  .mv-slide { height: calc(var(--vhpx, 100vh) - var(--rail-w)); }

  .home-lockup { left: 50%; transform: translateX(-50%); height: clamp(40px, calc(var(--u) * 13), 140px); }
  .menu-list { grid-template-columns: 1fr; grid-template-rows: repeat(8, minmax(0, 1fr)); }
  .menu-brand { height: clamp(24px, calc(var(--u) * 7), 70px); }
  .mo-extra { display: none; }   /* em pé o atalho fica só "Origen" */

  .implanta { flex-direction: column; overflow-y: auto; }
  .implanta-fig { order: 0; height: 60%; max-width: 100%; align-self: center; }
  .implanta-lists { overflow: visible; }

  .plantas { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "plan" "side"; }
  .plan-points img { display: none; }
  .plan-points button { grid-template-columns: 1fr; }

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

  .mv-caption,
  .pds-caption { top: var(--pad); }
}

/* ============================================================
   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;
  }
}