/* ============================================================
   CAPA 2 — ORIENTATION
   Pills "piso" + "espacio actual". Siempre visibles, mínimas.
   ============================================================ */
.top-left-stack {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  z-index: var(--z-orientation);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: min(72vw, 420px);
  pointer-events: none;
}

.mode-switch {
  pointer-events: auto;
}

.orientation {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.orientation__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  pointer-events: auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-scrim-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--surface-panel-border);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pill--accent {
  color: var(--ucal-black);
  background: var(--node-accent, var(--ucal-teal));
  border-color: transparent;
}

.orientation__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.02;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.orientation__desc {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  max-width: min(46ch, 100%);
  overflow-wrap: break-word;
  pointer-events: auto;
}

/* ============================================================
   CAPA 5 (+ disparadores de capa 3/4) — CLUSTER PERSISTENTE
   Semi-permanente: nunca desaparece del todo. Compacto por
   defecto (solo íconos); al hover/tap se expande revelando
   etiquetas. Se vuelve a comprimir sola.
   ============================================================ */
/* Ancla común del cluster + tour-bar. column-reverse: el primer hijo en
   el DOM (el cluster) queda al fondo; lo que se agregue después (el
   tour-bar) se apila arriba por flujo normal — si el cluster cambia de
   alto (estado "cuadrado", ver responsive más abajo) todo se reacomoda
   solo, sin offsets fijos que se puedan desincronizar y solapar. */
.bottom-stack {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: var(--z-cluster);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--sp-3);
}

.cluster {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-border);
  box-shadow: var(--shadow-cluster);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cluster.is-locked {
  pointer-events: none;
}

.cluster::before {
  /* separador visual entre grupo de navegación y grupo de controles */
  content: '';
  width: 1px;
  align-self: stretch;
  margin: var(--sp-1) 0;
  background: var(--surface-hairline);
  order: 2;
}

.cluster__group {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.cluster__group--nav { order: 1; }
.cluster__group--controls { order: 3; }

.cluster-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
}

/* Hover/foco POR BOTÓN: se revela el nombre de esa opción nada más —
   nunca los siete a la vez. No existe un estado "cluster expandido". */
.cluster-btn:hover,
.cluster-btn:focus-visible {
  padding: 0 var(--sp-4) 0 var(--sp-3);
}

.cluster-btn:hover,
.cluster-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.cluster-btn.is-active {
  background: var(--accent);
  color: var(--ucal-black);
}

.cluster-btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.cluster-btn__icon svg {
  width: 100%;
  height: 100%;
}

.cluster-btn__label {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.cluster-btn:hover .cluster-btn__label,
.cluster-btn:focus-visible .cluster-btn__label {
  max-width: 140px;
  opacity: 1;
}

/* Badge de estado (locución reproduciéndose) sobre el botón de play. Sin
   animación propia: el ícono (play↔pausa) y el fondo activo ya comunican
   el cambio de estado — un segundo loop parpadeando encima es ruido, no
   información. El único movimiento continuo de la interfaz es el pulso
   de los hotspots, que sí cumple un trabajo (marcar por dónde se puede
   seguir explorando). */
.cluster-btn__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ucal-lime);
  box-shadow: 0 0 0 2px var(--surface-panel);
  display: none;
}

.cluster-btn.is-playing .cluster-btn__dot {
  display: block;
}

/* ============================================================
   CAPA 3 — NAVIGATION PANEL (mapa + pisos + locaciones)
   Arriba a la derecha, debajo del switch Libre/Guiado.
   Estado normal (por defecto): el plano queda SIEMPRE visible; el
   selector de piso y la lista de locaciones se revelan al pasar el mouse
   por el panel (o con foco de teclado).
   Estado minimizado (un click en el encabezado): TODO se repliega —
   mapa incluido — y solo queda la pestaña, para ver la foto 360 sin nada
   encima. Otro click lo devuelve a su estado normal.
   Mobile: el panel entero se oculta (ver media query más abajo).
   ============================================================ */
.top-right-stack {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: var(--z-panels);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}

.nav-panel {
  width: min(340px, 88vw);
  max-height: 70vh;
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* El mapa vive fuera del acordeón de hover — siempre visible salvo que
   el panel entero esté minimizado. */
.nav-panel__map {
  padding: 0 var(--sp-4) var(--sp-4);
  flex-shrink: 0;
  max-height: 280px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              padding-bottom var(--dur-slow) var(--ease-out);
}

.nav-panel.is-minimized .nav-panel__map {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
}

.panel-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-4);
  flex-shrink: 0;
  text-align: left;
}

.panel-toggle:hover { background: rgba(255, 255, 255, 0.04); }

.panel-toggle__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

.panel-toggle__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-toggle__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Minimizado = chevrón hacia abajo, "tocá para volver a ver todo"
   (mismo lenguaje que el estado normal sin hover: nada desplegado). */

/* Cuerpo del acordeón: 0 por defecto (pestaña sola, visible), se abre
   bajo demanda. max-height (no height) para poder animar con transition. */
.nav-panel .panel-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: max-height var(--dur-slow) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.nav-panel:not(.is-minimized):hover .panel-body,
.nav-panel:not(.is-minimized):focus-within .panel-body {
  max-height: 45vh;
  opacity: 1;
  overflow-y: auto;
  border-top-color: var(--surface-hairline);
}

.nav-panel:not(.is-minimized):hover .panel-toggle__chevron,
.nav-panel:not(.is-minimized):focus-within .panel-toggle__chevron {
  transform: rotate(180deg);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--surface-hairline);
  flex-shrink: 0;
}

.panel-header__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel-header__sub {
  margin: 2px 0 0;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

.panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.panel-close:hover { background: rgba(255, 255, 255, 0.14); }
.panel-close svg { width: 16px; height: 16px; }

.panel-body {
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.field-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}

.floor-selector {
  display: flex;
  gap: var(--sp-1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: var(--sp-1);
}

.floor-btn {
  flex: 1;
  padding: var(--sp-2) 0;
  border-radius: var(--r-sm);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.floor-btn.is-current {
  background: var(--accent);
  color: var(--ucal-black);
}

.floor-map {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #1c2422, #101312);
  border: 1px solid var(--surface-hairline);
}

/* Mini-mapa SVG del piso: los demás espacios aparecen como nodos
   clickeables, con las mismas conexiones que el grafo real. */
.floor-map__svg {
  width: 100%;
  height: 100%;
}

.floor-map__edge {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.5;
}

.floor-map__node {
  cursor: pointer;
}

.floor-map__node circle {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
  transition: fill var(--dur-fast) var(--ease-out), stroke var(--dur-fast) var(--ease-out);
}

.floor-map__node:hover circle,
.floor-map__node:focus-visible circle {
  fill: rgba(255, 255, 255, 0.22);
}

.floor-map__node.is-visited circle {
  fill: var(--node-accent, var(--ucal-teal));
  fill-opacity: 0.35;
  stroke: var(--node-accent, var(--ucal-teal));
}

.floor-map__node.is-current circle {
  fill: var(--node-accent, var(--ucal-teal));
  fill-opacity: 1;
  stroke: var(--ucal-white);
}

.floor-map__node text {
  fill: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 2.6px;
  text-anchor: middle;
}

.floor-map__node.is-current text {
  fill: var(--text-primary);
  font-weight: 700;
}

/* Resaltado cruzado: pasar el mouse por un espacio en el mapa marca su
   fila en la lista, y al revés — misma idea, dos vistas. */
.floor-map__node.is-highlighted circle {
  stroke: var(--ucal-white);
  stroke-width: 2;
}

/* ---- Tour: libre vs. guiado ---- */
.tour-toggle {
  display: flex;
  gap: var(--sp-1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: var(--sp-1);
}

.tour-toggle__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-sm);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tour-toggle__btn.is-active {
  background: var(--accent);
  color: var(--ucal-black);
}

.tour-toggle__btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Barra flotante sobre el cluster con el progreso del tour guiado — solo
   aparece en modo guiado, en cualquier tamaño de pantalla. El switch
   Libre/Guiado en sí vive arriba a la izquierda (mode-switch.js). */
.tour-bar {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-border);
  box-shadow: var(--shadow-cluster);
  max-width: min(90vw, 460px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.tour-bar.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.tour-toggle--compact {
  padding: 2px;
}

.tour-toggle--compact .tour-toggle__btn {
  padding: 6px var(--sp-3);
  font-size: 0.74rem;
}

.tour-bar__step {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.tour-bar__next {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-bar__next strong {
  color: var(--text-primary);
}

.tour-bar__go {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ucal-black);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.tour-bar__go svg { width: 14px; height: 14px; }

.tour-bar__exit {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.tour-bar__exit:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.tour-bar__exit svg { width: 14px; height: 14px; }


.location-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.location-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-md);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}

.location-item:hover,
.location-item.is-highlighted { background: rgba(255, 255, 255, 0.06); }

.location-item__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--node-accent, var(--ucal-teal));
  opacity: 0.85;
}

.location-item__meta {
  flex: 1;
  min-width: 0;
}

.location-item__name {
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location-item__state {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.location-item__state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.location-item.is-current .location-item__state {
  color: var(--ucal-lime);
}

.location-item.is-visited .location-item__state {
  color: var(--ucal-teal);
}

.location-item.is-current {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   CAPA 4 — CONTENT PANEL (info adicional + subtítulos)
   ============================================================ */
.content-panel {
  position: absolute;
  z-index: var(--z-panels);
  left: var(--sp-5);
  bottom: calc(var(--sp-5) * 2 + 56px);
  width: min(400px, 88vw);
  max-height: 60vh;
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(calc(100% + var(--sp-5)));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.content-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.content-panel__body {
  padding: var(--sp-4);
  overflow-y: auto;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-secondary);
}

.content-panel__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ucal-black);
  background: var(--node-accent, var(--ucal-teal));
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}

/* Subtítulos: banda inferior sobria, independiente de los paneles */
.subtitles {
  position: absolute;
  left: 50%;
  /* Holgado por encima del stack cluster + tour-bar. El cluster puede
     crecer a 2 filas en el nivel "cuadrado" (ver responsive) — este
     margen alcanza para ese caso también, para que nunca se solapen. */
  bottom: 200px;
  transform: translateX(-50%);
  z-index: var(--z-orientation);
  max-width: min(680px, 84vw);
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-scrim-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  line-height: 1.4;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.subtitles.is-visible {
  opacity: 1;
}

/* ============================================================
   HOTSPOTS
   ============================================================ */
.hotspot {
  position: absolute;
  z-index: var(--z-hotspots);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: auto;
}

.hotspot__ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 12, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(3px);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.hotspot__ring::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: hotspot-pulse 2.6s var(--ease-in-out) infinite;
}

.hotspot:hover .hotspot__ring,
.hotspot:focus-visible .hotspot__ring {
  transform: scale(1.08);
  background: rgba(10, 10, 12, 0.75);
}

.hotspot__ring svg {
  width: 18px;
  height: 18px;
  color: var(--ucal-white);
}

/* El aro de los hotspots de navegación toma el color del piso donde
   estás — son "los círculos que ayudan a navegar en la imagen 360". */
.hotspot--navigation .hotspot__ring {
  border-color: var(--accent);
}
.hotspot--navigation .hotspot__ring svg { color: var(--accent); }

.hotspot--info .hotspot__ring {
  border-color: var(--node-accent, var(--ucal-orange));
}
.hotspot--info .hotspot__ring svg { color: var(--node-accent, var(--ucal-orange)); }

.hotspot--content .hotspot__ring {
  border-color: var(--ucal-lime);
}
.hotspot--content .hotspot__ring svg { color: var(--ucal-lime); }

@keyframes hotspot-pulse {
  0% { opacity: 0.5; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

.hotspot__label {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-scrim-strong);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   TOAST — transición de piso
   ============================================================ */
.toast {
  position: absolute;
  top: var(--sp-5);
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface-scrim-strong);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   LOADING / ERROR
   ============================================================ */
.loading-veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-panels);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--ucal-black);
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.loading-veil.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-veil__mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--ucal-teal);
}

.loading-veil__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ucal-teal);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-banner {
  position: absolute;
  z-index: var(--z-toast);
  top: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: rgba(234, 54, 129, 0.16);
  border: 1px solid var(--ucal-pink);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  display: none;
  align-items: center;
  gap: var(--sp-2);
}

.error-banner.is-visible { display: flex; }

/* ============================================================
   TUTORIAL — pantalla única antes de entrar (Inicio → Tutorial → Piso C
   del diagrama original). Se ve una vez; el contenido sigue siendo el
   campus, no un wizard de varios pasos.
   ============================================================ */
.tutorial-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-tutorial);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(6, 6, 7, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.tutorial-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.tutorial-card {
  width: min(440px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-border);
  box-shadow: var(--shadow-panel);
}

.tutorial-card__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  line-height: 1.05;
}

.tutorial-card__intro {
  margin: 0 0 var(--sp-5);
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

.tutorial-tips {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}

.tutorial-tip {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.tutorial-tip__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ucal-teal);
}

.tutorial-tip__icon svg {
  width: 100%;
  height: 100%;
}

.tutorial-tip__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tutorial-tip__copy strong {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tutorial-tip__copy span {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.4;
}

.tutorial-card__cta {
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--ucal-teal);
  color: var(--ucal-black);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: filter var(--dur-fast) var(--ease-out);
}

.tutorial-card__cta:hover,
.tutorial-card__cta:focus-visible {
  filter: brightness(1.08);
}

/* ============================================================
   RESPONSIVE — CLUSTER: el cluster es SIEMPRE una sola fila plana por
   encima del corte mobile (≤720px, ver media query mobile más abajo).
   Antes había un nivel intermedio que envolvía en 2 filas para "ahorrar
   espacio", pero ya no hace falta: como el hover revela el nombre de UN
   botón a la vez (no los siete juntos), el peor caso de ancho es apenas
   un ícono más una etiqueta — entra de sobra en una sola fila incluso en
   ventanas angostas. Envolver en 2 filas era el bug, no una función.
   ============================================================ */

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 720px) {
  .top-left-stack {
    top: var(--sp-4);
    left: var(--sp-4);
    max-width: 78vw;
    gap: var(--sp-2);
  }

  .top-right-stack {
    top: var(--sp-4);
    right: var(--sp-4);
  }

  .orientation__title { font-size: 1.5rem; }
  .orientation__desc { display: none; }

  .tutorial-card {
    padding: var(--sp-5);
  }

  .tutorial-card__title { font-size: 1.4rem; }

  .bottom-stack {
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    gap: var(--sp-2);
  }

  .cluster {
    max-width: calc(100vw - 2 * var(--sp-4));
    gap: 2px;
    padding: 3px;
  }

  .cluster::before { margin: 3px 0; }

  .cluster-btn { height: 44px; min-width: 42px; padding: 0 var(--sp-2); }
  .cluster-btn:hover,
  .cluster-btn:focus-visible { padding: 0 var(--sp-2); }

  /* En mobile no hay hover real, y no hay espacio para desplegar texto sin
     desbordar la pantalla: el cluster se queda siempre solo-íconos. */
  .cluster-btn__label {
    display: none;
  }

  /* El mapa/"Explorar UCAL" se oculta por completo en mobile: no hay
     espacio para un plano navegable de sobra. El switch Libre/Guiado sigue
     accesible (comparte el mismo stack pero no es un .nav-panel) y el
     cambio de piso sigue disponible vía los hotspots de nivel dentro de
     la propia escena 360 y el botón "Volver al hall" del cluster. */
  .nav-panel {
    display: none;
  }

  /* Info adicional: sigue siendo 100% on-demand (la pide el cluster) */
  .content-panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
  }

  .content-panel.is-open {
    transform: translateY(0);
  }

  .content-panel::before {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--surface-hairline);
    margin: var(--sp-2) auto 0;
  }

  .tour-bar {
    max-width: calc(100vw - 2 * var(--sp-4));
  }

  .tour-bar__step { display: none; }

  .subtitles {
    /* Holgado por encima del stack cluster+tour-bar: como ahora se
       apilan por flujo (column-reverse), esto no necesita perseguir su
       alto exacto — solo dejar aire de sobra por si el tour-bar aparece. */
    bottom: 190px;
    max-width: 92vw;
    font-size: 0.88rem;
  }
}