/* Polanco Parque Boutique — Torre A / Selecciona el nivel (mobile)
 *
 * Las medidas están en cqw (% del ancho del contenedor) porque así están
 * medidas sobre las referencias: el frame del video mide 754 px de ancho y el
 * mockup del footer 375 px, y de ahí sale cada proporción. Ver CALIBRACION.md. */

:root {
  --gutter: 7cqw;

  --olive:      #a29f85;   /* "TORRE A", icono de menú */
  --charcoal:   #4b4747;   /* titular y texto del header */
  --hairline:   #e4e4e6;   /* borde inferior del header */

  --olive-btn:      #a9a288;   /* pill del side sheet */

  --footer-bg:      #150b0b;
  --footer-heading: #b2ad92;
  --footer-link:    #adacac;

  --band-ok:    255 255 255;   /* nivel disponible */
  --band-off:   208  69  58;   /* nivel no disponible */

  --marker-x:   66%;     /* eje vertical del corchete */
  --label-x:    78.8%;   /* centro del bloque de texto */
}

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

html, body {
  overscroll-behavior-y: none;
  background: #000;
}

body {
  font-family: Montserrat, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--charcoal);
}

.app {
  container-type: inline-size;
  max-width: 520px;
  margin-inline: auto;
  /* clip y no hidden: hidden convertiría .app en contenedor de scroll y el
     sticky del escenario dejaría de anclarse al viewport. */
  overflow-x: clip;
  background: #fff;
}

/* El selector queda fijo mientras se recorren los niveles: la sección mide una
   pantalla más el recorrido, y dentro de ella el escenario va en sticky. Al
   terminar los niveles, la página sigue hacia el footer. */
.pin {
  position: relative;
  height: 100dvh;   /* lo recalcula app.js sumando el recorrido */
}

.stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Contenedor que se pliega a altura cero sin cortar de golpe */
.collapsible {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: 1fr;
  background: #fff;
  transition: grid-template-rows 0.3s ease;
}

.collapsible > div { overflow: hidden; min-height: 0; }

.collapsible.is-collapsed { grid-template-rows: 0fr; }

@media (prefers-reduced-motion: reduce) {
  .collapsible { transition: none; }
}

/* ── Header ─────────────────────────────────────────────── */

.topbar {
  height: 16.6cqw;
  min-height: 52px;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  background: #fff;
}

.menu {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  border: 0;
  background: none;
  font: inherit;
  font-size: 3.4cqw;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
}

.menu img { width: 4.5cqw; height: 4.5cqw; }

.topbar__brand    { height: 9.5cqw; }
.topbar__spectrum { justify-self: end; height: 4.6cqw; }

/* ── Bloque de título ───────────────────────────────────── */

.titleblock {
  padding: 9cqw var(--gutter) 13cqw;
  background: #fff;
}

.titleblock__eyebrow {
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--olive);
}

.titleblock__title {
  margin-top: 2.7cqw;
  font-size: 6.35cqw;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* ── Visor de la torre ──────────────────────────────────── */

.viewer {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: #24296a;
  outline: none;
  user-select: none;
}

/* Capa que se desplaza verticalmente con el scroll */
.viewer__pan {
  position: absolute;
  inset: 0 0 auto 0;
  will-change: transform;
}

/* Cielo extendido sobre la azotea: continúa el degradado del render.
   Se dibuja por detrás y sigue un poco más abajo del borde de la imagen
   para que no quede una costura visible. */
.viewer__sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #1b2260 0%, #3b478a 100%);
}

.viewer__art { position: relative; }

.viewer__tower {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Bandas de resaltado, recortadas a la silueta del edificio */
.viewer__bands {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0.00% 2.15%, 4.80% 2.15%, 11.55% 3.23%, 18.12% 4.31%, 24.87% 5.38%,
    31.62% 6.46%, 38.37% 7.53%, 45.12% 8.61%, 51.69% 9.69%, 58.44% 10.76%,
    60.75% 11.84%, 60.92% 12.92%, 60.92% 13.99%, 61.46% 15.07%, 61.46% 16.15%,
    61.81% 17.22%, 62.70% 18.30%, 63.59% 19.37%, 63.59% 20.45%, 63.59% 21.53%,
    63.59% 22.60%, 63.59% 23.68%, 63.59% 24.76%, 63.94% 25.83%, 64.12% 26.91%,
    64.12% 27.99%, 64.12% 29.06%, 64.12% 30.14%, 64.12% 31.21%, 64.12% 32.29%,
    64.12% 33.37%, 64.12% 34.44%, 64.12% 35.52%, 64.12% 36.60%, 64.12% 37.67%,
    64.12% 38.75%, 64.12% 39.83%, 64.12% 40.90%, 64.12% 41.98%, 64.12% 43.05%,
    64.12% 44.13%, 64.12% 45.21%, 64.12% 46.28%, 64.12% 47.36%, 64.12% 48.44%,
    64.12% 49.51%, 64.12% 50.59%, 64.12% 51.66%, 64.12% 52.74%, 64.12% 53.82%,
    64.12% 54.89%, 64.12% 55.97%, 64.12% 56.24%, 0.00% 56.24%
  );
  pointer-events: none;
}

.band {
  position: absolute;
  left: 0;
  right: 0;
  transform-origin: var(--marker-x) 50%;
  background: rgb(var(--band-ok) / 0.11);
}

.band.is-off { background: rgb(var(--band-off) / 0.62); }

.viewer__disclaimer {
  position: absolute;
  top: 4.75%;
  right: var(--gutter);
  font-size: 3.15cqw;
  font-weight: 400;
  color: #fff;
  pointer-events: none;
}

/* ── Corchete + etiqueta de nivel ───────────────────────── */

.viewer__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.marker {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform, opacity;
}

.marker__bracket {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--marker-x) - 2.8%);
  width: 2.8%;
  border: 0.28cqw solid #fff;
  border-left: 0;
}

.marker__label {
  position: absolute;
  top: 50%;
  left: var(--label-x);
  width: max-content;
  text-align: center;
  color: #fff;
  line-height: 1.15;
}

.marker__level {
  font-size: 4.15cqw;
  letter-spacing: -0.01em;
  font-weight: 500;
  white-space: nowrap;
}

.marker__state {
  margin-top: 0.4cqw;
  font-size: 3.3cqw;
  font-weight: 400;
  white-space: nowrap;
}

/* ── Footer ─────────────────────────────────────────────── */

.footer {
  padding: 17cqw var(--gutter) 17.3cqw;
  border-top: 1px solid rgb(255 255 255 / 0.9);
  background: var(--footer-bg);
}

.footer__logo {
  display: block;
  height: 17.3cqw;
  filter: brightness(0) invert(1);
}

.footer__heading {
  margin-top: 9cqw;
  font-size: 3cqw;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--footer-heading);
}

.footer__nav:first-of-type .footer__heading { margin-top: 11.5cqw; }

.footer__nav ul {
  margin-top: 3cqw;
  list-style: none;
}

.footer__nav a,
.footer__contact a {
  color: var(--footer-link);
  text-decoration: none;
}

.footer__nav a:hover,
.footer__contact a:hover { color: #fff; }

.footer__nav a {
  display: block;
  font-size: 4.55cqw;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.02em;
}

.footer__rule {
  margin-top: 9.6cqw;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.footer__contact {
  margin-top: 11cqw;
  list-style: none;
  display: grid;
  gap: 4.6cqw;
}

.footer__contact li {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
}

.footer__contact img { height: 4.3cqw; width: auto; }

.footer__contact a {
  font-size: 3.8cqw;
  letter-spacing: 0.01em;
}

.footer__social {
  margin-top: 11cqw;
  list-style: none;
  display: flex;
  gap: 6.3cqw;
}

/* Los tres iconos vienen en una sola imagen: se recortan por posición. */
.footer__social i {
  display: block;
  width: 4.4cqw;
  height: 4.4cqw;
  background-image: url(assets/footer/social.png);
  background-size: 26.4cqw 4.4cqw;   /* 6 × el ancho de un icono */
  background-position: calc(var(--i) * -11cqw) 0;
  background-repeat: no-repeat;
  opacity: 0.92;
}

.footer__social a:hover i { opacity: 1; }

.footer__by {
  margin-top: 11.5cqw;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font-size: 3.2cqw;
  color: #fcfcfc;
}

.footer__by img { height: 6.4cqw; width: auto; }

/* ── Botones flotantes ──────────────────────────────────── */

/* La capa es fija pero se limita al ancho de la columna, para que en desktop
   los botones queden pegados al borde del teléfono y no al de la ventana. */
.fabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  max-width: 520px;
  margin-inline: auto;
  padding: 0 6cqw 6cqw 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3.4cqw;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Mientras el side sheet está abierto no deben flotar por encima */
html.is-locked .fabs { opacity: 0; pointer-events: none; }

.fab {
  position: relative;
  pointer-events: auto;
  width: 14cqw;
  height: 14cqw;
  min-width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #2f2b2b;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fab:hover  { box-shadow: 0 6px 20px rgb(0 0 0 / 0.36); }
.fab:active { transform: scale(0.95); }

.fab svg { width: 46%; height: 46%; display: block; }

.fab--wa { color: #1fa855; }
.fab--wa svg { width: 52%; height: 52%; }

/* Punto de aviso: va por detrás del botón, como en la referencia */
.fab__badge {
  position: absolute;
  z-index: -1;
  top: -5%;
  right: -5%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: #d5453c;
}

@media (prefers-reduced-motion: reduce) {
  .fab { transition: none; }
}

/* ── Side sheet de disponibilidad ───────────────────────── */

/* Zona de tap del nivel activo: invisible, la posiciona app.js */
.viewer__hit {
  position: absolute;
  left: 0;
  right: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  z-index: 5;
}

.viewer__hit:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

.sheet {
  position: absolute;
  inset: 0;
  z-index: 20;
  visibility: hidden;
}

.sheet.is-open { visibility: visible; }

.sheet__panel {
  position: absolute;
  left: 0;
  top: 4.2%;
  bottom: 1.4%;
  width: 84%;
  padding: 4.5% 8.25%;
  background: #fff;
  transform: translateX(-102%);
  transition: transform 0.34s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.sheet.is-open .sheet__panel { transform: none; }

/* Botón circular montado sobre el borde derecho del panel */
.sheet__close {
  position: absolute;
  top: 4.5%;
  right: -5.5cqw;
  width: 11cqw;
  height: 11cqw;
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #2f2b2b;
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.22);
  cursor: pointer;
}

.sheet__close svg { width: 45%; height: 45%; }

/* Marco interior de línea fina */
.sheet__frame {
  height: 100%;
  border: 1px solid #e3e0da;
  padding: 8% 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-y: auto;
}

.sheet__level {
  font-size: 10.4cqw;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--charcoal);
}

.sheet__lead {
  margin-top: 6.5cqw;
  font-size: 3.6cqw;
  font-weight: 400;
  line-height: 1.5;
  color: #3d3a3a;
}

/* Listado por número de habitaciones (sólo hay modelos de 1, 2 y 3) */
.sheet__units {
  width: 100%;
  margin-top: 5cqw;
  list-style: none;
}

.sheet__units li {
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  padding: 3.4cqw 0;
  border-top: 1px solid #ececea;
  text-align: left;
}

.sheet__units li:last-child { border-bottom: 1px solid #ececea; }

.sheet__units li.is-empty { color: #b8b5b0; }

.sheet__count {
  min-width: 7cqw;
  font-size: 6.4cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--olive-btn);
}

.sheet__units li.is-empty .sheet__count { color: #cdcac4; }

/* "de" pequeño, sobre la misma línea base que la cifra y el modelo */
.sheet__of {
  font-size: 3cqw;
  font-weight: 600;
  color: var(--olive-btn);
}

.sheet__units li.is-empty .sheet__of { color: #cdcac4; }

.sheet__model {
  margin-left: 1.4cqw;
  font-size: 3.7cqw;
  font-weight: 500;
  color: #3d3a3a;
}

.sheet__units li.is-empty .sheet__model { color: #b8b5b0; }

.sheet__actions {
  width: 100%;
  margin-top: 7cqw;
  display: grid;
  gap: 3cqw;
  justify-items: center;
}

.sheet__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.8cqw;
  padding: 3.2cqw 6cqw;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 3.9cqw;
  font-weight: 600;
  color: #2f2b2b;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease;
}

.sheet__btn--primary { background: var(--olive-btn); }
.sheet__btn--primary:hover { filter: brightness(1.06); }

.sheet__btn--ghost { border-color: #2f2b2b; background: transparent; }
.sheet__btn--ghost:hover { background: rgb(47 43 43 / 0.06); }

.sheet__btn svg { width: 4.8cqw; height: 4.8cqw; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .sheet__panel { transition: none; }
}

/* Bloqueo del scroll mientras el sheet está abierto */
html.is-locked, html.is-locked body { overflow: hidden; }