/* LUM360 · recorridos para negocios · capa 4 de 4 · escenas: escenarios WebGL, pósters, rótulos proyectados y maqueta plana de respaldo */

/* ---------- Escenario ----------
   Un solo renderer WebGL para toda la página; cada escenario muestra su copia en una vista (canvas 2D).
   Cada escenario tiene un póster (CSS o imagen fija) para cuando la vista aún no tiene imagen. */

.biz-experience .ws-stage {
  position: relative;
  overflow: hidden;
  background: var(--ws-scene-bg);
  isolation: isolate;
}

.biz-experience .ws-stage--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.biz-experience .ws-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.biz-experience .ws-stage canvas {
  opacity: 0;
  transition: opacity 600ms var(--ws-ease-out);
}

.biz-experience .ws-stage.is-live canvas {
  opacity: 1;
}

/* Póster del hero: el terreno. Retícula de obra en perspectiva, solo CSS.
   Es lo que se ve en el primer render, antes de que cargue Three.js. */
.biz-experience .ws-stage__terrain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 600ms var(--ws-ease-out);
}

.biz-experience .ws-stage__terrain::before {
  content: "";
  position: absolute;
  top: 46%;
  left: -60%;
  width: 220%;
  height: 150%;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--ws-scene-grid) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--ws-scene-grid) 22%, transparent) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 18%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 60% at 50% 18%, #000 0%, transparent 100%);
  transform: perspective(60rem) rotateX(64deg);
  transform-origin: 50% 0;
}

.biz-experience .ws-stage.is-live .ws-stage__terrain {
  opacity: 0;
}

/* Grano sutil, solo en el nivel de calidad alto: quita el aspecto plástico del render */
html[data-stage-tier="high"] .biz-experience .ws-stage--hero.is-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Velos: el texto del hero se lee sobre la escena con contraste AA en ambos temas */
.biz-experience .ws-stage--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, var(--ws-scrim) 0, var(--ws-scrim-soft) 34%, var(--ws-scrim-none) 52%),
    linear-gradient(to top, var(--ws-scrim) 0, var(--ws-scrim-soft) 20%, var(--ws-scrim-none) 38%);
  pointer-events: none;
  transition: opacity var(--ws-dur-long) var(--ws-ease-out);
}

.biz-experience .ws-hero:not([data-phase="intro"]) .ws-stage--hero::after {
  opacity: 0.62;
}

@media (min-width: 60rem) {
  .biz-experience .ws-stage--hero::after {
    background:
      linear-gradient(to right, var(--ws-scrim) 0, var(--ws-scrim-soft) 34%, var(--ws-scrim-none) 58%),
      linear-gradient(to top, var(--ws-scrim) 0, var(--ws-scrim-soft) 9%, var(--ws-scrim-none) 20%);
  }

  .biz-experience .ws-hero:not([data-phase="intro"]) .ws-stage--hero::after {
    opacity: 0.7;
  }
}

/* ---------- Rótulos proyectados ----------
   Texto DOM colocado por JS en la posición de pantalla de un punto 3D.
   Nítido a cualquier densidad y con el tema por CSS. Decorativo: la información
   equivalente está en la lista de etapas. */

.biz-experience .ws-stage__labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.biz-experience .ws-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ws-muted);
  font-size: var(--ws-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}

.biz-experience .ws-label::before {
  content: "";
  width: 1.1rem;
  height: var(--ws-hairline);
  background: var(--ws-rule-strong);
}

.biz-experience .ws-label--cota {
  color: var(--ws-accent-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.biz-experience .ws-label--cota::before {
  display: none;
}

.biz-experience .ws-label--node {
  padding: 0.4rem 0.6rem;
  border: var(--ws-hairline) solid var(--ws-rule);
  border-radius: var(--ws-radius-sm);
  color: var(--ws-ink);
  background: var(--ws-scrim);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

.biz-experience .ws-label--node::before {
  display: none;
}

.biz-experience .ws-label--left {
  flex-direction: row-reverse;
}

.biz-experience .ws-label--bare::before {
  display: none;
}

/* Los nombres de los cuartos van sobre la maqueta: tinta plena y un halo del color del fondo para leerse sobre las líneas */
.biz-experience .ws-label--bare {
  color: var(--ws-ink);
  text-shadow: 0 0 0.5rem var(--ws-scene-bg), 0 0 0.2rem var(--ws-scene-bg);
}

.biz-experience .ws-label.is-active {
  color: var(--ws-accent-strong);
}


/* ---------- Recorrido del visitante: el flujo ---------- */

.biz-experience .ws-stage--flow {
  min-height: 30rem;
  background: var(--ws-paper-2);
}

.biz-experience .ws-flow-poster i {
  position: absolute;
  right: 20%;
  left: 20%;
  height: var(--ws-hairline);
  background: var(--ws-rule-strong);
}

.biz-experience .ws-flow-poster i:nth-child(1) { top: 12.5%; }
.biz-experience .ws-flow-poster i:nth-child(2) { top: 37.5%; }
.biz-experience .ws-flow-poster i:nth-child(3) { top: 62.5%; }
.biz-experience .ws-flow-poster i:nth-child(4) { top: 87.5%; background: var(--ws-accent-fill, var(--ws-accent-strong)); }

.biz-experience .ws-flow-poster::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12.5%;
  left: 50%;
  width: var(--ws-hairline);
  background: var(--ws-rule-strong);
}

.biz-experience .ws-flow__sources {
  display: none;
}

@media (min-width: 60rem) {
  .biz-experience .ws-stage--flow {
    height: clamp(15rem, 24vw, 21rem);
    min-height: 0;
  }

  .biz-experience .ws-flow-poster i {
    top: 12% !important;
    right: auto;
    bottom: 12%;
    width: var(--ws-hairline);
    height: auto;
  }

  .biz-experience .ws-flow-poster i:nth-child(1) { left: 20%; }
  .biz-experience .ws-flow-poster i:nth-child(2) { left: 40%; }
  .biz-experience .ws-flow-poster i:nth-child(3) { left: 60%; }
  .biz-experience .ws-flow-poster i:nth-child(4) { left: 80%; }

  .biz-experience .ws-flow-poster::before {
    top: 50%;
    right: 4%;
    bottom: auto;
    left: 11%;
    width: auto;
    height: var(--ws-hairline);
  }

  /* las cuatro entradas, alineadas con los cuatro carriles del flujo */
  .biz-experience .ws-flow__sources {
    position: absolute;
    z-index: 3;
    top: 10%;
    bottom: 10%;
    left: 0;
    display: grid;
    width: 10%;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    align-items: center;
    color: var(--ws-muted);
    font-size: var(--ws-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* ---------- Recorridos 360: el panorama ---------- */

.biz-experience .ws-stage--pano {
  aspect-ratio: 1 / 1;
  border: var(--ws-hairline) solid var(--ws-rule-strong);
  border-radius: var(--ws-radius-md);
  touch-action: pan-y;
  cursor: grab;
}

.biz-experience .ws-stage--pano.is-dragging {
  cursor: grabbing;
}

@media (min-width: 40rem) {
  .biz-experience .ws-stage--pano {
    aspect-ratio: 4 / 3;
  }
}

/* ==================================================================
   PÓSTERES DE ESCENARIO Y MAQUETA PLANA DE RESPALDO
   ================================================================== */

.biz-experience .ws-stage__poster {
  position: absolute;
  inset: 0;
  transition: opacity 600ms var(--ws-ease-out);
}

.biz-experience .ws-stage.is-live .ws-stage__poster {
  opacity: 0;
}

.biz-experience img.ws-stage__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El hero deja pasar el gesto vertical (scroll) y recibe el horizontal cuando el visitante ya está dentro de la fotografía */
.biz-experience .ws-stage--hero {
  touch-action: pan-y;
}

.biz-experience .ws-stage--hero.is-lookable {
  cursor: grab;
}

.biz-experience .ws-stage--hero.is-dragging {
  cursor: grabbing;
}

/* La fotografía real se ve sin velo pesado: el texto se lee sobre el degradado lateral */
.biz-experience .ws-hero[data-phase="final"] .ws-stage--hero::after {
  opacity: 0.72;
}

.biz-experience .ws-hero[data-phase="final"] .ws-hero__caption {
  text-shadow: 0 1px 1.2rem var(--ws-scrim);
}

/* ---------- Maqueta plana: mapa, fichas y planta del negocio ----------
   Es lo que se ve sin WebGL, con movimiento reducido, con ahorro de datos y sin JavaScript. Un estado por etapa:
   0 buscan · 1 comparan · 2 entran · 3 recorren · 4 llegan. */

.biz-experience .ws-story { position: relative; min-width: 0; }

.biz-experience .ws-story__table {
  position: relative;
  overflow: hidden;
  width: min(100%, 36rem);
  margin-inline: auto;
  aspect-ratio: 4 / 3.1;
  border: var(--ws-hairline) solid var(--ws-rule);
  background: var(--ws-paper-2);
}

.biz-experience .ws-story__svg { position: absolute; inset: 3% 4%; width: 92%; height: 94%; overflow: visible; }
.biz-experience .ws-story__svg * { transition: opacity var(--ws-dur-long) var(--ws-ease-out); }
.biz-experience .ws-story__streets { fill: none; stroke: color-mix(in oklch, var(--ws-scene-grid) 40%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.biz-experience .ws-story__pin { fill: var(--ws-subtle); }
.biz-experience .ws-story__ownpin circle:first-child { fill: none; stroke: var(--ws-accent-strong); stroke-width: 1.5; stroke-dasharray: 4 3; }
.biz-experience .ws-story__ownpin circle:last-child { fill: var(--ws-accent-strong); }
.biz-experience .ws-story__card rect { fill: var(--ws-card); stroke: var(--ws-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.biz-experience .ws-story__card path { fill: none; stroke: var(--ws-rule-strong); stroke-width: 3; stroke-linecap: round; }
.biz-experience .ws-story__card--own rect { stroke: var(--ws-accent-strong); fill: var(--ws-accent-soft); }
.biz-experience .ws-story__card--own circle { fill: none; stroke: var(--ws-accent-strong); stroke-width: 2; }
.biz-experience .ws-story__floor { fill: var(--ws-card); stroke: var(--ws-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.biz-experience .ws-story__wall { fill: none; stroke: var(--ws-accent-strong); stroke-width: 3; vector-effect: non-scaling-stroke; }
.biz-experience .ws-story__kit rect { fill: var(--ws-card-2); stroke: var(--ws-rule-strong); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.biz-experience .ws-story__kit rect.ws-story__accent { fill: var(--ws-accent); stroke: none; }
.biz-experience .ws-story__route { fill: none; stroke: var(--ws-accent-strong); stroke-dasharray: 5 4; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.biz-experience .ws-story__walker { fill: var(--ws-accent-strong); stroke: var(--ws-paper-2); stroke-width: 1.5; }
.biz-experience .ws-story__tag { position: absolute; top: var(--ws-space-sm); left: var(--ws-space-sm); padding: 0.25rem 0.5rem; color: var(--ws-subtle); background: var(--ws-scrim-soft); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.biz-experience .ws-story__cards, .biz-experience .ws-story__room, .biz-experience .ws-story__kit, .biz-experience .ws-story__route, .biz-experience .ws-story__walker, .biz-experience .ws-story__floor, .biz-experience .ws-story__wall { opacity: 0; }
.biz-experience .ws-story[data-story-state="1"] .ws-story__cards { opacity: 1; }
.biz-experience .ws-story:is([data-story-state="2"], [data-story-state="3"], [data-story-state="4"]) :is(.ws-story__room, .ws-story__floor, .ws-story__wall) { opacity: 1; }
.biz-experience .ws-story:is([data-story-state="2"], [data-story-state="3"], [data-story-state="4"]) :is(.ws-story__streets, .ws-story__pins) { opacity: 0.25; }
.biz-experience .ws-story:is([data-story-state="2"], [data-story-state="3"], [data-story-state="4"]) .ws-story__ownpin { opacity: 0; }
.biz-experience .ws-story:is([data-story-state="3"], [data-story-state="4"]) .ws-story__kit { opacity: 0; }
.biz-experience .ws-hero[data-persona="restaurante"] .ws-story:is([data-story-state="3"], [data-story-state="4"]) .ws-story__kit--restaurante,
.biz-experience .ws-hero[data-persona="hotel"] .ws-story:is([data-story-state="3"], [data-story-state="4"]) .ws-story__kit--hotel,
.biz-experience .ws-hero[data-persona="clinica"] .ws-story:is([data-story-state="3"], [data-story-state="4"]) .ws-story__kit--clinica,
.biz-experience .ws-hero[data-persona="tienda"] .ws-story:is([data-story-state="3"], [data-story-state="4"]) .ws-story__kit--tienda,
.biz-experience .ws-hero[data-persona="oficina"] .ws-story:is([data-story-state="3"], [data-story-state="4"]) .ws-story__kit--oficina { opacity: 1; }
.biz-experience .ws-story[data-story-state="4"] :is(.ws-story__route, .ws-story__walker) { opacity: 1; }

/* Sin JS: el mapa y la planta del giro, completos */
html:not(.ws-js) .biz-experience .ws-story :is(.ws-story__cards, .ws-story__room, .ws-story__floor, .ws-story__wall, .ws-story__route, .ws-story__walker) { opacity: 1; }
html:not(.ws-js) .biz-experience .ws-story__kit--restaurante { opacity: 1; }

/* ---------- Pósters de escenario ---------- */
.biz-experience .ws-stage__poster { position: absolute; inset: 0; transition: opacity 600ms var(--ws-ease-out); }
.biz-experience .ws-stage.is-live .ws-stage__poster { opacity: 0; }
.biz-experience .ws-stage--hero { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  .biz-experience .ws-stage canvas, .biz-experience .ws-stage__terrain, .biz-experience .ws-stage__poster, .biz-experience .ws-story__svg * { transition-duration: 0.01ms !important; }
}