/* =========================================================================
   TOUR360.CSS — Botón "Ver Tour 360º" en las tarjetas de obra
   + modal a pantalla completa con el tour virtual de Kuula (iframe)
   -------------------------------------------------------------------------
   Paleta: azul oscuro #1B3A5C (var --navy) · hover azul medio #2E6DA4
   Comportamiento en js/tour360.js (el iframe se carga solo al abrir).
   ========================================================================= */

/* ---- Botón dentro de la tarjeta de la obra ---- */
.btn--tour {
  align-self: flex-start;
  margin-top: .9rem;
  padding: .6rem 1.1rem;
  font-size: .85rem;
  background: var(--navy);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 6px 18px rgba(20, 44, 70, .35);
}
.btn--tour:hover,
.btn--tour:focus-visible {
  background: var(--blue-mid);
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}
.btn--tour svg { width: 17px; height: 17px; flex: none; }

/* ---- Modal / lightbox del tour ---- */
.tour-modal {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(.6rem, 3vw, 2.2rem);
  background: rgba(15, 30, 48, .92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.tour-modal.open { display: flex; }

/* Caja que contiene el iframe: ocupa el máximo de pantalla disponible */
.tour-modal__frame {
  position: relative;
  width: 100%;
  max-width: 1500px;
  height: 86vh;
  height: 86dvh;
  min-height: 80vh;
  background: var(--navy-deep);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.tour-modal__frame iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}

/* Título de la obra sobre el visor */
.tour-modal__title {
  position: absolute; top: 0; left: 0;
  z-index: 2;
  margin: 0;
  padding: .55rem 1rem;
  font-family: var(--font-sans);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
  background: rgba(27, 58, 92, .85);
  border-bottom-right-radius: var(--radius-sm);
  pointer-events: none;
}

/* Aviso mientras carga el tour */
.tour-modal__loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-sans); font-size: .9rem;
  color: rgba(255, 255, 255, .8);
  pointer-events: none;
}
.tour-modal.is-ready .tour-modal__loading { display: none; }

/* Botón de cierre (X) — esquina superior derecha */
.tour-modal__close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  z-index: 310;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(27, 58, 92, .85);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.tour-modal__close:hover,
.tour-modal__close:focus-visible { background: var(--blue-mid); transform: scale(1.06); }

/* ---- Móvil: el tour ocupa toda la pantalla ---- */
@media (max-width: 760px) {
  .tour-modal { padding: 0; }
  .tour-modal__frame {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }
  .tour-modal__close {
    top: .7rem; right: .7rem;
    width: 42px; height: 42px;
  }
  .btn--tour { padding: .55rem 1rem; font-size: .82rem; }
}

/* Pantallas bajas en horizontal: aprovechar toda la altura */
@media (max-height: 560px) {
  .tour-modal { padding: 0; }
  .tour-modal__frame { height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; }
}