/* ==========================================================================
   EPIC TOWER — Recorrido virtual 360°
   Página a pantalla completa: nav arriba, iframe ocupando el resto.
   Se carga DESPUÉS de home.css. Reusa sus tokens (--ink, --gold, --panel-bd).
   ========================================================================== */

/* --------------------------------------------------------------------------
   La página NO hace scroll a propósito.
   En móvil, arrastrar sobre el iframe gira la vista del recorrido en vez de
   desplazar la página: si hubiera contenido debajo, el usuario quedaría
   atrapado sin poder llegar a él. Por eso todo cabe exacto en una pantalla.
   -------------------------------------------------------------------------- */
.tour-page {
  min-height: 100svh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  color: var(--ink-dark);
}

/* El nav del home es fixed y flota sobre la foto del hero. Aquí va en flujo,
   como primera fila del layout, y con fondo sólido porque no hay foto debajo. */
.tour-page .nav {
  position: relative;
  flex: none;
  background: var(--ink);
  border-bottom: 1px solid var(--panel-bd);
}

.tour {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;          /* deja que el iframe se encoja dentro del flex */
}

/* --------------------------------------------------------------------------
   ENCABEZADO COMPACTO
   El cliente pidió quitar el título y recortar "la parte de arriba": el
   recorrido es el contenido, el encabezado solo le robaba alto. Queda el nav
   con el padding al mínimo y nada más. El h1 sigue en el HTML como .sr-only.
   -------------------------------------------------------------------------- */
.tour-page .nav { padding-block: 10px; }
.tour-page .nav__logo img { width: clamp(64px, 6vw, 84px); }

/* --------------------------------------------------------------------------
   EL IFRAME
   -------------------------------------------------------------------------- */
.tour__frame {
  flex: 1;
  position: relative;
  min-height: 0;
  background: var(--ink-2);        /* beige: es lo que se ve mientras carga */
  isolation: isolate;
}
.tour__frame iframe {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  border: 0;
}

/* Mensaje de carga: vive DEBAJO del iframe. Mientras el recorrido no ha
   pintado, el iframe está en blanco y se ve esto; al cargar, lo tapa. */
.tour__loading {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  text-align: center; padding: 24px;
}
.tour__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(180,121,61,.25); border-top-color: var(--gold-lg);
  animation: tourspin .8s linear infinite;
}
@keyframes tourspin { to { transform: rotate(360deg); } }
.tour__loading p {
  font-size: 13px; font-weight: 300; letter-spacing: .04em;
  color: rgba(15,28,21,.68);
}
.tour__loading a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tour__spinner { animation: none; } }

/* --------------------------------------------------------------------------
   DESKTOP — el recorrido como pieza embebida, no a sangre
   El cliente lo pidió "no tan pegado". Con aire alrededor deja de leerse como
   una pantalla aparte y se entiende que sigue dentro del sitio, o sea que hay
   a dónde volver. Se alinea al mismo ancho que el resto del contenido.
   En móvil NO se aplica: ahí cada píxel de alto cuenta y va a sangre.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .tour__frame {
    width: min(calc(100% - 2 * var(--gutter)), var(--container));
    margin: clamp(16px, 2vw, 28px) auto clamp(22px, 2.8vw, 38px);
    border: 1px solid var(--panel-bd);
    border-radius: var(--r-xl);
    overflow: hidden;              /* recorta el iframe a las esquinas */
    box-shadow: var(--shadow-deep);
  }
}

/* --------------------------------------------------------------------------
   MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .tour-page .nav { padding-block: 8px; }
}

/* Móvil apaisado: el alto es lo escaso, el nav se aprieta todo lo posible */
@media (max-height: 460px) {
  .tour-page .nav { padding-block: 5px; }
  .tour-page .nav__logo img { width: 56px; }
}