/* tour.css — recorrido inmersivo a pantalla completa */

.tour {
  position: fixed; inset: 0; z-index: 60; background: var(--night); color: var(--paper);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.tour[hidden] { display: none; }
.tour.is-open { opacity: 1; transition: opacity 0.75s var(--ease) 0.35s; }
html.tour-on { overflow: hidden; }
html.tour-on .nav { opacity: 0; pointer-events: none; transition: opacity 0.4s; }

.tour-view, .tour-view canvas, .tour-flat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tour-view { transform: scale(1.12); transition: transform 1.6s var(--ease) 0.3s; }
.tour.is-open .tour-view { transform: none; }
.tour-flat { object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 0.8s, transform 9s linear; }
.tour-flat.is-in { opacity: 1; transform: scale(1.02); }

.tour-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12, 10, 9, 0.82) 0%, rgba(12, 10, 9, 0.28) 26%, transparent 46%),
    linear-gradient(to bottom, rgba(12, 10, 9, 0.5) 0%, transparent 20%);
}

.tour-close {
  position: absolute; left: var(--gutter); top: 1.4rem; display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.15rem; border-radius: 999px; cursor: pointer;
  font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper);
  background: rgba(20, 17, 15, 0.38); border: 1px solid rgba(242, 237, 228, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: background 0.25s, border-color 0.25s, transform 0.3s var(--ease);
}
.tour-close:hover { background: var(--paper); color: var(--ink, #14110F); border-color: var(--paper); }
.tour-close span { transition: transform 0.3s var(--ease); }
.tour-close:hover span { transform: translateX(-4px); }

.tour-cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 7.2rem; pointer-events: none; }
.tour-cap > * { opacity: 0; transform: translateY(26px); transition: opacity 0.25s, transform 0.25s; }
.tour-cap.is-in > * { opacity: 1; transform: none; transition: opacity 0.8s var(--ease) 0.35s, transform 1s var(--ease) 0.35s; }
.tour-cap.is-in > .tour-name { transition-delay: 0.45s; }
.tour-cap.is-in > .tour-note { transition-delay: 0.58s; }
.tour-kicker { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(242, 237, 228, 0.75); margin: 0 0 0.6rem; }
.tour-name {
  font-family: var(--font-display); font-style: italic; font-weight: 300; line-height: 0.95; margin: 0;
  font-size: clamp(3rem, 7.5vw, 6.5rem); letter-spacing: -0.01em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.tour-note { margin: 0.7rem 0 0; font-size: 0.95rem; color: rgba(242, 237, 228, 0.88); }

.tour-arrow {
  position: absolute; top: 50%; translate: 0 -50%; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  font: 300 1.9rem/1 var(--font-display); color: var(--paper); display: grid; place-items: center; padding: 0 0 4px;
  background: rgba(20, 17, 15, 0.3); border: 1px solid rgba(242, 237, 228, 0.26);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background 0.25s, color 0.25s, transform 0.3s var(--ease);
}
.tour-arrow:hover { background: var(--paper); color: #14110F; transform: scale(1.08); }
.tour-prev { left: var(--gutter); }
.tour-next { right: var(--gutter); }

.tour-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 0.5rem; justify-content: safe center;
  padding: 1.1rem var(--gutter) 1.6rem; overflow-x: auto; scrollbar-width: none;
}
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs button {
  position: relative; flex: none; overflow: hidden; padding: 0.85rem 1.2rem; border-radius: 999px; cursor: pointer;
  font: 500 0.68rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  color: rgba(242, 237, 228, 0.9); background: rgba(20, 17, 15, 0.42); border: 1px solid rgba(242, 237, 228, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.tour-tabs button:hover { border-color: rgba(242, 237, 228, 0.7); }
.tour-tabs button[aria-selected="true"] { background: var(--paper); color: #14110F; border-color: var(--paper); }
.tour-tabs button span { position: relative; z-index: 1; }
/* avance del espacio en curso */
.tour-tabs button i { position: absolute; inset: 0; background: rgba(20, 17, 15, 0.13); transform: scaleX(0); transform-origin: left; }
.tour-tabs button.is-run i { transform: scaleX(1); transition: transform 9s linear 0.4s; }

/* Botón para entrar al recorrido desde la maqueta */
.tour-start {
  position: absolute; z-index: 2; left: 50%; bottom: 122px; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.6rem 0.95rem 1.1rem; border-radius: 999px; cursor: pointer;
  font: 600 0.72rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
  color: #14110F; background: var(--paper); border: 0; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.tour-start:hover { transform: scale(1.05); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.tour-start-ico { width: 26px; height: 26px; border-radius: 50%; background: #14110F; position: relative; }
.tour-start-ico::after { content: ""; position: absolute; left: 10px; top: 8px; border: 5px solid transparent; border-left: 8px solid var(--paper); border-right: 0; }
.tour-start-ico::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(20, 17, 15, 0.5); animation: tourPulse 2.2s ease-out infinite; }
@keyframes tourPulse { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.is-render .tour-start { opacity: 0; pointer-events: none; }
.js-motion .depto:not(.is-in) .tour-start { opacity: 0; }

@media (max-width: 760px) {
  .tour-close { top: 1rem; padding: 0.65rem 0.95rem; font-size: 0.64rem; }
  .tour-arrow { display: none; }
  .tour-cap { bottom: 6.2rem; }
  .tour-tabs { justify-content: flex-start; padding-bottom: 1.3rem; }
  .tour-start { bottom: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-view { transform: none; transition: none; }
  .tour-start-ico::before { animation: none; }
}

/* Espacios con video (vertical): ventana de altura completa sobre el render desenfocado */
.tour-view canvas, .tour-flat { transition: filter 0.9s var(--ease); }
.tour.has-clip .tour-view canvas, .tour.has-clip .tour-flat { filter: blur(22px) brightness(0.55) saturate(1.1); }
.tour-clip {
  position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 9 / 16; translate: -50% 0; overflow: hidden; pointer-events: none;
  opacity: 0; clip-path: inset(50% 0 50% 0); transform: scale(1.08);
  transition: opacity 0.35s, clip-path 0.4s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 0 0 1px rgba(242, 237, 228, 0.22), 0 0 120px -10px rgba(217, 138, 85, 0.6), 0 0 200px 40px rgba(0, 0, 0, 0.55);
}
.tour-clip.is-in { opacity: 1; clip-path: inset(0); transform: none; transition: opacity 0.5s, clip-path 1.1s var(--ease), transform 1.6s var(--ease); }
.tour-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour:not(.has-clip) .tour-clip { visibility: hidden; }
@media (max-width: 760px), (max-aspect-ratio: 3 / 4) {
  .tour-clip { left: 0; right: 0; translate: none; aspect-ratio: auto; box-shadow: none; }
}