/* ==========================================================================
   FrameDor — capa de marca sobre el visor de SuperSplat
   Se carga DESPUÉS de index.css. No tocar index.css / index.js: así se pueden
   actualizar con cada exportación sin perder la personalización.
   ========================================================================== */

:root {
  --fd-bg: #120d09;
  --fd-bg-2: #1c150e;
  --fd-gold: #d6b37a;
  --fd-gold-light: #ecd3a4;
  --fd-gold-deep: #a8824a;
  --fd-cream: #f5efe3;
  --fd-muted: #b9ab95;
  --fd-serif: "Cormorant Garamond", Georgia, serif;
  --fd-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html, body { background: var(--fd-bg); }

/* Paleta del visor: el naranja de SuperSplat pasa a dorado y los grises a tonos cálidos */
.sse-viewer {
  --sse-text: #e9e0d0;
  --sse-text-light: var(--fd-cream);
  --sse-text-dark: var(--fd-muted);
  --sse-text-darkest: #7d705f;
  --sse-accent: var(--fd-gold);
  --sse-grip: var(--fd-gold-light);
  --sse-bkg: #0e0a07;
  --sse-bkg-dark: #241b12;
  --sse-bkg-darkest: #150f0a;
  --sse-bkg-light: #3a2e22;
  font-family: var(--fd-sans) !important;
  background: var(--fd-bg);
}

/* Sin marca de SuperSplat (aparece cuando el visor va incrustado en otra web) */
.sse-viewer .sse-viewerBranding { display: none !important; }

/* Paneles con borde dorado muy sutil */
.sse-viewer .sse-controlsHint,
.sse-viewer .sse-infoPanel > .sse-infoPanelContent,
.sse-viewer .sse-settingsPanel,
.sse-viewer .sse-annotationNav {
  border-color: rgba(214, 179, 122, 0.18) !important;
}

/* Línea de tiempo del recorrido en dorado */
.sse-viewer .sse-controlsWrap > .sse-timelineContainer > .sse-line {
  border-bottom-color: rgba(236, 211, 164, 0.35) !important;
}

/* Cargador original oculto: lo sustituye el de FrameDor */
.sse-viewer .sse-loadingWrap { display: none !important; }

/* Cabecera del panel de información con la marca FrameDor */
.sse-viewer .sse-viewerTitle .fd-info-logo { width: 56px; height: auto; margin-bottom: 6px; }
.sse-viewer .sse-viewerTitle .sse-title-name {
  font-family: var(--fd-serif);
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.sse-viewer .sse-viewerTitle .sse-title-version { display: none !important; }
.sse-viewer .sse-viewerTitle .fd-info-sub {
  color: var(--fd-gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 10px;
}
.sse-viewer .fd-info-legal {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 6px 0 2px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.sse-viewer .fd-info-legal a { color: rgba(236, 211, 164, 0.6); text-decoration: none; }
.sse-viewer .fd-info-legal a:hover { color: var(--fd-gold); text-decoration: underline; }

/* ---------------------------------------------------------------- cargador */
.fd-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(214, 179, 122, 0.10), transparent 60%),
    var(--fd-bg);
  color: var(--fd-cream);
  font-family: var(--fd-sans);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 900ms;
}
.fd-loader.fd-done { opacity: 0; visibility: hidden; }

.fd-loader__mark {
  position: relative;
  width: 76px;
  height: 76px;
  -webkit-mask: url("./assets/framedor-icon.png") center / contain no-repeat;
          mask: url("./assets/framedor-icon.png") center / contain no-repeat;
  background: url("./assets/framedor-icon.png") center / contain no-repeat;
  animation: fd-breathe 2.8s ease-in-out infinite;
}
/* reflejo dorado sutil que cruza el logo */
.fd-loader__mark::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 246, 224, 0.55) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: fd-glint 3.2s ease-in-out infinite;
}
.fd-loader__name {
  font-family: var(--fd-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.fd-loader__name span { color: var(--fd-gold); }
.fd-loader__caption {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fd-muted);
}
.fd-loader__bar {
  width: min(220px, 60vw);
  height: 1px;
  background: rgba(236, 211, 164, 0.16);
  overflow: hidden;
  margin-top: 6px;
}
.fd-loader__fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--fd-gold-deep), var(--fd-gold-light));
  transition: transform 300ms ease-out;
}
.fd-loader__pct {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fd-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes fd-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes fd-glint { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .fd-loader__mark, .fd-loader__mark::after { animation: none; }
}

/* Datos técnicos de la tarjeta gráfica: no aportan nada al cliente */
.sse-viewer .sse-infoPanel .sse-infoGpu { display: none !important; }

/* Créditos de PlayCanvas en el panel de información */
.sse-viewer .sse-infoPanel .sse-infoLinks { display: none !important; }

/* Sin cámara orbital para el visitante: se ocultan su botón, "Encuadrar" y sus atajos en la ayuda.
   (El visor la sigue usando por dentro al ir a un punto de interés; eso se mantiene.) */
.sse-viewer .sse-orbitCamera,
.sse-viewer .sse-settingsPanel .sse-frame,
.sse-viewer .fd-hidden-row { display: none !important; }

/* Herramientas de edición que no aportan al visitante: modo volar (dron), ver la colisión y la
   rueda de ajustes con su panel. Solo queda el botón de caminar (atajos 2 y V anulados en index.js). */
.sse-viewer .sse-flyCamera,
.sse-viewer .sse-showCollision,
.sse-viewer .sse-settings,
.sse-viewer .sse-settingsPanel { display: none !important; }
.sse-viewer .sse-controlButton.sse-fpsCamera { border-radius: 4px !important; }

/* ------------------------------------------------ ayuda de controles (aviso y panel "i") */
/* Aviso de controles de arriba a la derecha: textos en framedor.js (window.fdDescribe) */
.sse-viewer .sse-controlsHint {
  min-width: 232px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(214, 179, 122, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(236, 211, 164, 0.06), transparent 60%),
    rgba(18, 13, 9, 0.74);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(236, 211, 164, 0.08);
  color: #e9e0d0;
}
.sse-viewer .sse-controlsHint > .sse-controlsHintHeader {
  align-items: center;
  border-bottom-color: rgba(214, 179, 122, 0.16);
  padding-bottom: 9px;
  margin-bottom: 6px;
}
.sse-viewer .sse-controlsHint > .sse-controlsHintHeader > .sse-controlsHintIcon { fill: var(--fd-gold); margin-top: 0; }
.sse-viewer .sse-controlsHint .sse-controlsHintTitle {
  font-family: var(--fd-serif);
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em;
  color: var(--fd-cream) !important;
}
.sse-viewer .sse-controlsHint .sse-controlsHintSubtitle {
  margin-top: 3px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fd-gold) !important;
}
.sse-viewer .sse-controlsHint .sse-controlsHintItem { min-height: 29px; }
.sse-viewer .sse-controlsHint .sse-controlsHintAction { font-size: 12px; color: #e9e0d0; }
.sse-viewer .sse-controlsHint > .sse-controlsHintRows > .sse-divider { background-color: rgba(214, 179, 122, 0.14); }
.sse-viewer .sse-controlsHint .sse-or { color: var(--fd-muted); }
.sse-viewer .sse-controlsHint .sse-mouse { color: var(--fd-gold-light); }
.sse-viewer .sse-controlsHint .sse-mouse > .sse-mouseIcon > .sse-mouseBody { stroke: rgba(236, 211, 164, 0.75); }
.sse-viewer .sse-controlsHint .sse-mouse > .sse-mouseIcon > .sse-mouseSplit { stroke: rgba(236, 211, 164, 0.4); }
.sse-viewer .sse-controlsHint .sse-mouse > .sse-mouseIcon > .sse-mouseActive { fill: var(--fd-gold); }

/* teclas y gestos con borde dorado (aviso y panel de ayuda) */
.sse-viewer .sse-controlsHint .sse-key,
.fd-guide kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid rgba(214, 179, 122, 0.32);
  border-bottom-color: rgba(214, 179, 122, 0.55);
  background: rgba(214, 179, 122, 0.09);
  color: var(--fd-cream);
  font-family: var(--fd-sans);
  font-size: 11px;
  font-weight: 600;
}
.sse-viewer .sse-controlsHint .sse-gesture,
.fd-guide .fd-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 10px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(214, 179, 122, 0.35);
  background: rgba(214, 179, 122, 0.1);
  color: var(--fd-gold-light);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* Panel de ayuda ("i" / H) */
.sse-viewer .sse-infoPanel > .sse-infoPanelContent {
  width: 360px;
  border: 1px solid rgba(214, 179, 122, 0.22) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(214, 179, 122, 0.10), transparent 55%),
    rgba(18, 13, 9, 0.82);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(236, 211, 164, 0.08);
}
.sse-viewer .sse-infoPanel .sse-infoShortcuts { display: none !important; }
.fd-guide {
  padding-top: 14px;
  border-top: 1px solid rgba(214, 179, 122, 0.16);
  color: #e9e0d0;
}
.fd-guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.fd-guide__title {
  margin: 0;
  font-family: var(--fd-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--fd-cream);
}
.fd-guide__tutorial {
  appearance: none;
  border: 1px solid rgba(214, 179, 122, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(236, 211, 164, 0.18), rgba(168, 130, 74, 0.12));
  color: var(--fd-gold-light);
  font: 600 10.5px/1.3 var(--fd-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.fd-guide__tutorial:hover { border-color: var(--fd-gold-light); color: var(--fd-cream); }
.fd-guide .fd-x2 { font-size: 10px; font-weight: 700; color: var(--fd-gold-light); }
.fd-guide__rows { list-style: none; margin: 0; padding: 0; }
.fd-guide__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(214, 179, 122, 0.08);
}
.fd-guide__row:last-child { border-bottom: 0; }
.fd-guide__action { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--fd-cream); }
.fd-guide__action small { font-size: 11px; color: var(--fd-muted); }
.fd-guide__inputs { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.fd-guide .fd-or { font-size: 11px; color: var(--fd-muted); }
.fd-guide .fd-mouse { width: 16px; height: 23px; fill: none; stroke: rgba(236, 211, 164, 0.75); stroke-width: 1.5; }
.fd-guide .fd-mouse path:not(.fd-on) { stroke: rgba(236, 211, 164, 0.4); stroke-width: 1.25; }
.fd-guide .fd-mouse .fd-on { fill: var(--fd-gold); stroke: none; }
.fd-guide__note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(214, 179, 122, 0.07);
  border: 1px solid rgba(214, 179, 122, 0.14);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fd-muted);
}
.fd-guide__note strong { color: var(--fd-gold-light); font-weight: 600; }
/* el panel de ayuda va por encima de las flechas de los puntos de interés (en móvil se cruzan) */
.sse-viewer .sse-infoPanel { z-index: 50; }

/* ------------------------------------------- menú de puntos de interés (arriba) */
/* Píldora de cristal como el botón del Mapa 2D: marrón translúcido, borde dorado, flechas doradas
   y el nombre del punto en la serif de la marca. En móvil es el mismo menú (bloque móvil). */
.sse-viewer .sse-annotationNav.sse-desktop {
  border: 1px solid rgba(214, 179, 122, 0.34) !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(236, 211, 164, 0.1), rgba(236, 211, 164, 0.02)), rgba(18, 13, 9, 0.42) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 246, 226, 0.14);
}
@media (pointer: coarse) {
  .sse-viewer .sse-annotationNav.sse-touch {
    border: 1px solid rgba(214, 179, 122, 0.34) !important;
    border-radius: 999px !important;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(236, 211, 164, 0.1), rgba(236, 211, 164, 0.02)), rgba(18, 13, 9, 0.42) !important;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 246, 226, 0.14);
  }
}
.sse-viewer .sse-annotationNav.sse-desktop > button { width: 46px; height: 46px; }
.sse-viewer .sse-annotationNav > button { color: var(--fd-gold); background-color: transparent; transition: background-color 0.2s ease, color 0.2s ease; }
.sse-viewer .sse-annotationNav > button:hover,
.sse-viewer .sse-annotationNav.sse-desktop > button:hover { color: var(--fd-gold-light); background-color: rgba(214, 179, 122, 0.16); }
.sse-viewer .sse-annotationNav > button > svg { width: 20px; height: 20px; }
.sse-viewer .sse-annotationNav > button > svg > g.sse-stroke { opacity: 0.25; }
.sse-viewer .sse-annotationNav.sse-desktop > .sse-annotationInfo { width: 250px; padding: 0 10px; }
.sse-viewer .sse-annotationNav > .sse-annotationInfo > .sse-annotationNavTitle {
  font-family: var(--fd-serif);
  font-size: 20px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fd-cream) !important;
  text-shadow: 0 1px 3px rgba(18, 13, 9, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* globo con el nombre al pasar por un punto de interés: cristal marrón con borde dorado */
.sse-viewer .sse-annotation {
  background: rgba(18, 13, 9, 0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(214, 179, 122, 0.34);
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: var(--fd-cream) !important;
  font-family: var(--fd-sans) !important;
}
.sse-viewer .sse-annotation .sse-annotation-title { font-family: var(--fd-serif); font-size: 17px; font-weight: 600; color: var(--fd-gold-light); }
.sse-viewer .sse-annotation.sse-arrow-right::before { border-right-color: rgba(18, 13, 9, 0.72) !important; }
.sse-viewer .sse-annotation.sse-arrow-left::before { border-left-color: rgba(18, 13, 9, 0.72) !important; }

/* ------------------------------------------- anillo que sigue al cursor al caminar */
/* Lo dibuja el visor en SVG (parches ring-defs / ring-gold): marfil con un reflejo dorado que
   gira muy despacio, borde oscuro casi invisible para que se lea sobre suelos claros o de madera. */
.fd-nav { filter: drop-shadow(0 0 0.6px rgba(18, 13, 9, 0.55)) drop-shadow(0 0 5px rgba(214, 179, 122, 0.4)); }
.fd-ring-s1 { stop-color: var(--fd-cream); }
.fd-ring-s2 { stop-color: var(--fd-gold-light); }
.fd-ring-s3 { stop-color: #fffaf0; }
.fd-ring-s4 { stop-color: var(--fd-gold); }
/* punto central de la vista con ratón */
.fd-nav .fd-capture { fill: var(--fd-cream); stroke: var(--fd-gold-deep); stroke-opacity: 0.8; }

/* ------------------------------------------------------------------- móvil */
@media (pointer: coarse) {
  /* puntos de interés: menú pequeño arriba como en ordenador, no flechas a los lados */
  .sse-viewer .sse-annotationNav.sse-touch {
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    width: auto;
    height: auto;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
  }
  .sse-viewer .sse-annotationNav.sse-touch > button {
    position: static;
    transform: none;
    width: 46px;
    height: 46px;
    border-radius: 0 !important;
  }
  .sse-viewer .sse-annotationNav.sse-touch > button:active { background-color: rgba(214, 179, 122, 0.2); }
  .sse-viewer .sse-annotationNav.sse-touch > .sse-annotationInfo {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(190px, 46vw);
    padding: 0 6px;
    white-space: nowrap;
  }

  /* el aviso de controles baja para no tapar el menú de puntos */
  .sse-viewer .sse-controlsHint { top: calc(max(12px, env(safe-area-inset-top)) + 60px); }
}

/* ------------------------------------------------------------------ Mapa 2D */
.fd-map {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--fd-sans);
  pointer-events: none;
}
.fd-map > * { pointer-events: auto; }
.fd-map__toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(214, 179, 122, 0.34);
  background: linear-gradient(180deg, rgba(236, 211, 164, 0.1), rgba(236, 211, 164, 0.02)), rgba(18, 13, 9, 0.38);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--fd-cream);
  font: 600 14px/1 var(--fd-sans);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 246, 226, 0.14);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.fd-map__toggle:hover { border-color: rgba(236, 211, 164, 0.7); background-color: rgba(42, 31, 20, 0.5); color: #fff6e2; }
.fd-map__toggle:hover svg { stroke: var(--fd-gold-light); }
.fd-map__toggle svg { width: 20px; height: 20px; fill: none; stroke: var(--fd-gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fd-map__toggle .fd-map__chev { width: 16px; height: 16px; stroke: var(--fd-muted); transition: transform 0.25s ease; }
.fd-map--open .fd-map__toggle { border-color: rgba(236, 211, 164, 0.6); background-color: rgba(28, 21, 14, 0.5); }
.fd-map--open .fd-map__chev { transform: rotate(180deg); }

.fd-map__panel {
  width: min(clamp(420px, 38vw, 640px), calc(100vw - 32px));
  box-sizing: border-box;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(214, 179, 122, 0.3);
  background: linear-gradient(180deg, rgba(236, 211, 164, 0.1), rgba(236, 211, 164, 0.02) 55%), rgba(18, 13, 9, 0.42);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 24px 56px -26px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 246, 226, 0.14);
  color: #e9e0d0;
  animation: fd-map-in 0.22s ease-out;
  transition: width 0.3s ease;
}
.fd-map--large .fd-map__panel { width: min(1100px, calc(100vw - 32px)); }
.fd-map__panel[hidden] { display: none; }
@keyframes fd-map-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* sobre el cristal el fondo puede ser muy claro (cortinas, paredes): sombra suave en los textos */
.fd-map__head, .fd-map__note { text-shadow: 0 1px 3px rgba(18, 13, 9, 0.55); }
.fd-map__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.fd-map__head > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fd-map__title { font-family: var(--fd-serif); font-size: 19px; font-weight: 500; color: var(--fd-cream); }
.fd-map__area { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fd-gold); white-space: nowrap; }
.fd-map__zoom {
  appearance: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid rgba(214, 179, 122, 0.3); background: rgba(236, 211, 164, 0.08); cursor: pointer; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 246, 226, 0.12);
}
.fd-map__zoom:hover { border-color: rgba(236, 211, 164, 0.6); }
.fd-map__zoom svg { width: 15px; height: 15px; fill: none; stroke: var(--fd-gold-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fd-map--large .fd-map__zoom svg { transform: rotate(180deg); }
/* lámina de papel del plano: papel translúcido (efecto cristal); el dibujo va algo transparente
   en bloque (opacity del svg) para que los cortes de puertas sigan tapando los muros */
.fd-map__sheet {
  border-radius: 8px;
  padding: 8px;
  background: rgba(247, 240, 226, 0.76);
  box-shadow: inset 0 0 0 1px rgba(60, 45, 25, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  outline: 1px solid rgba(168, 130, 74, 0.45); /* filete dorado interior de la lámina */
  outline-offset: -6px;
  max-height: calc(100vh - 170px);
  overflow: auto;
}
.fd-map__svg { display: block; width: 100%; height: auto; opacity: 0.86; }
.fd-map__note { margin: 8px 2px 0; font-size: 10.5px; line-height: 1.45; color: var(--fd-muted); }

/* dibujo (unidades = metros). Tinta #2b241c sobre papel #f4efe4 */
.fd-wall-ext { fill: #fbf8f1; stroke: #2b241c; stroke-width: 0.3; stroke-linejoin: miter; }
.fd-wall-int { fill: none; stroke: #2b241c; stroke-width: 0.11; stroke-linejoin: miter; }
.fd-room polygon { fill: #fbf8f1; transition: fill 0.2s ease; }
.fd-room--link { cursor: pointer; outline: none; }
.fd-room--link:hover polygon, .fd-room--link:focus-visible polygon { fill: #f1e2c2; }
.fd-cut-ext { stroke: #fbf8f1; stroke-width: 0.34; }
.fd-cut-int { stroke: #fbf8f1; stroke-width: 0.13; }
.fd-open { stroke: #8c7a62; stroke-width: 0.022; stroke-dasharray: 0.12 0.08; }
.fd-win { stroke: #2b241c; stroke-width: 0.025; }
.fd-win--glass { stroke: #6f8fa3; stroke-width: 0.03; }
.fd-door { stroke: #2b241c; stroke-width: 0.04; stroke-linecap: round; }
.fd-swing { fill: none; stroke: #2b241c; stroke-width: 0.016; stroke-dasharray: 0.06 0.04; }
.fd-furniture { pointer-events: none; }
.fd-f { fill: #ece4d4; stroke: #5b4f40; stroke-width: 0.018; }
.fd-f--soft { fill: #e2d7c2; }
.fd-f--counter { fill: #ddd1ba; }
.fd-f--wet { fill: #e3e9ea; }
.fd-f--dark { fill: #3a332b; }
.fd-l { fill: none; stroke: #5b4f40; stroke-width: 0.014; }
.fd-l--dash { stroke-dasharray: 0.05 0.04; }
.fd-l--strong { stroke-width: 0.03; }
.fd-l--light { stroke: #b9ab95; }
.fd-rug { fill: rgba(168, 130, 74, 0.08); stroke: #a89272; stroke-width: 0.014; stroke-dasharray: 0.04 0.03; }
.fd-room-name { font: 700 0.2px var(--fd-sans); letter-spacing: 0.035px; fill: #2b241c; text-anchor: middle; pointer-events: none; }
.fd-room-area { font: 600 0.19px var(--fd-sans); letter-spacing: 0; fill: #8a6a3a; }
.fd-room-size { font: 500 0.15px var(--fd-sans); letter-spacing: 0; fill: #7a6e5f; }
.fd-entry { font: 700 0.15px var(--fd-sans); letter-spacing: 0.03px; fill: #8a6a3a; text-anchor: middle; }
.fd-entry-arrow { stroke: #8a6a3a; stroke-width: 0.035; }
.fd-arrowhead { fill: #8a6a3a; }
.fd-dims { pointer-events: none; }
.fd-dim, .fd-dim-ext { stroke: #6b5f50; stroke-width: 0.012; }
.fd-dim-tick { stroke: #2b241c; stroke-width: 0.03; }
.fd-dim-text { font: 600 0.17px var(--fd-sans); fill: #2b241c; text-anchor: middle; }
.fd-scale-a { fill: #2b241c; }
.fd-scale-b { fill: #fbf8f1; stroke: #2b241c; stroke-width: 0.012; }
.fd-scale-text { font: 600 0.13px var(--fd-sans); fill: #2b241c; text-anchor: middle; }
.fd-sheet-title { font: 700 0.15px var(--fd-sans); letter-spacing: 0.04px; fill: #8a6a3a; text-anchor: end; }
.fd-you { pointer-events: none; }
.fd-you-cone { fill: rgba(168, 130, 74, 0.35); }
.fd-you-dot { fill: #c9a25c; stroke: #2b241c; stroke-width: 0.05; }

@media (pointer: coarse) {
  /* en móvil el botón va bajo el menú de puntos de interés */
  .fd-map { top: calc(max(12px, env(safe-area-inset-top)) + 58px); left: max(12px, env(safe-area-inset-left)); }
  .fd-map__panel, .fd-map--large .fd-map__panel { width: calc(100vw - 24px); }
  .fd-map__zoom { display: none; }
  .fd-map__sheet { max-height: calc(100vh - 250px); }
  /* con el mapa abierto el aviso de controles estorba */
  .sse-viewer.fd-map-open .sse-controlsHint { display: none !important; }
}
/* con el plano ampliado, el aviso de controles se oculta para no taparlo */
.sse-viewer.fd-map-open.fd-map-large .sse-controlsHint { display: none !important; }

/* ------------------------------------------------------------- Tutorial */
.fd-tut {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 7, 5, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: var(--fd-sans);
  animation: fd-tut-fade 0.35s ease-out;
}
.fd-tut[hidden] { display: none; }
@keyframes fd-tut-fade { from { opacity: 0; } to { opacity: 1; } }
.fd-tut__card {
  width: min(360px, 100%);
  box-sizing: border-box;
  padding: 20px 22px 18px;
  border-radius: 18px;
  border: 1px solid rgba(214, 179, 122, 0.28);
  background: radial-gradient(ellipse at 50% 0%, rgba(214, 179, 122, 0.14), transparent 60%), rgba(18, 13, 9, 0.94);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(236, 211, 164, 0.1);
  color: #e9e0d0;
  text-align: center;
  animation: fd-tut-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fd-tut-rise { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.fd-tut__eyebrow { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fd-gold); }
.fd-tut__stage {
  position: relative;
  height: 150px;
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 60%, rgba(214, 179, 122, 0.1), transparent 65%);
}
.fd-tut__title { margin: 4px 0 6px; font-family: var(--fd-serif); font-size: 26px; font-weight: 500; color: var(--fd-cream); }
.fd-tut__text { margin: 0 auto; max-width: 290px; min-height: 42px; font-size: 13px; line-height: 1.55; color: #d8cdb9; }
.fd-tut__text b { color: var(--fd-gold-light); font-weight: 600; }
.fd-tut__dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 12px; }
.fd-tut__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(236, 211, 164, 0.25); transition: width 0.25s ease, background 0.25s ease; }
.fd-tut__dots i.fd-on { width: 18px; border-radius: 3px; background: var(--fd-gold); }
.fd-tut__actions { display: flex; justify-content: space-between; align-items: center; }
.fd-tut__skip, .fd-tut__next { appearance: none; border: 0; cursor: pointer; font: 600 12px/1 var(--fd-sans); letter-spacing: 0.06em; }
.fd-tut__skip { background: none; color: var(--fd-muted); padding: 10px 4px; }
.fd-tut__skip:hover { color: var(--fd-cream); }
.fd-tut__next {
  padding: 11px 20px;
  border-radius: 999px;
  color: #1c150e;
  background: linear-gradient(135deg, var(--fd-gold-light), var(--fd-gold) 55%, var(--fd-gold-deep));
  box-shadow: 0 10px 24px -12px rgba(214, 179, 122, 0.7);
}
.fd-tut__next:focus-visible, .fd-tut__skip:focus-visible { outline: 2px solid var(--fd-gold-light); outline-offset: 2px; }

/* ratón */
.fd-tut__mouse { width: 62px; height: 92px; overflow: visible; }
.fd-tut__body { fill: rgba(236, 211, 164, 0.05); stroke: var(--fd-gold-light); stroke-width: 2.2; }
.fd-tut__split { fill: none; stroke: rgba(236, 211, 164, 0.5); stroke-width: 1.6; }
.fd-tut__btn { fill: transparent; }
.fd-tut__wheel { fill: rgba(236, 211, 164, 0.15); stroke: rgba(236, 211, 164, 0.6); stroke-width: 1.4; transform-box: fill-box; }
.fd-anim-drag { animation: fd-drag 2.6s ease-in-out infinite; }
.fd-anim-drag .fd-tut__btn--l { fill: var(--fd-gold); }
@keyframes fd-drag { 0%, 100% { transform: translateX(-28px) rotate(-6deg); } 50% { transform: translateX(28px) rotate(6deg); } }
.fd-anim-dbl .fd-tut__btn--l { animation: fd-dbl 1.8s infinite; }
@keyframes fd-dbl { 0%, 6%, 16%, 22% { fill: var(--fd-gold); } 8%, 14%, 24%, 100% { fill: transparent; } }
.fd-anim-right { animation: fd-orbit 3.2s ease-in-out infinite; }
.fd-anim-right .fd-tut__btn--r { animation: fd-rclick 3.2s infinite; }
@keyframes fd-rclick { 0%, 10% { fill: var(--fd-gold); } 14%, 100% { fill: transparent; } }
@keyframes fd-orbit { 0%, 18% { transform: translate(0, 0); } 40% { transform: translate(-24px, -6px); } 65% { transform: translate(22px, 4px); } 88%, 100% { transform: translate(0, 0); } }
.fd-anim-wheel .fd-tut__wheel { animation: fd-wheel 1.2s ease-in-out infinite; }
@keyframes fd-wheel { 0%, 100% { fill: rgba(236, 211, 164, 0.15); transform: translateY(0); } 50% { fill: var(--fd-gold); transform: translateY(3px); } }
.fd-tut__keys { display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: 28px 28px; gap: 4px; }
.fd-tut__keys kbd {
  display: grid; place-items: center; border-radius: 6px; font: 700 12px var(--fd-sans); color: var(--fd-cream);
  border: 1px solid rgba(214, 179, 122, 0.4); border-bottom-width: 3px; background: rgba(214, 179, 122, 0.08);
}
.fd-tut__keys kbd:first-child { grid-column: 2; animation: fd-key 1.2s ease-in-out infinite; }
@keyframes fd-key { 0%, 100% { transform: none; background: rgba(214, 179, 122, 0.08); } 45% { transform: translateY(2px); background: rgba(214, 179, 122, 0.45); } }
/* móvil: dedo sobre una pantalla */
.fd-tut__phone {
  position: relative; width: 86px; height: 140px; border-radius: 16px;
  border: 2px solid rgba(236, 211, 164, 0.55); background: rgba(236, 211, 164, 0.05);
}
.fd-tut__touch, .fd-tut__ring { position: absolute; left: 50%; top: 55%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; }
.fd-tut__touch { background: rgba(236, 211, 164, 0.85); box-shadow: 0 0 0 6px rgba(214, 179, 122, 0.25); opacity: 0; }
.fd-tut__ring { border: 2px solid var(--fd-gold-light); opacity: 0; }
.fd-anim-swipe .fd-tut__touch:first-child { opacity: 1; animation: fd-swipe 2.4s ease-in-out infinite; }
@keyframes fd-swipe { 0%, 100% { transform: translateX(-22px); } 50% { transform: translateX(22px); } }
.fd-anim-tap .fd-tut__touch:first-child { animation: fd-tap 1.8s infinite; }
.fd-anim-tap .fd-tut__ring { animation: fd-ring 1.8s infinite; }
@keyframes fd-tap { 0%, 30% { opacity: 1; transform: scale(0.85); } 40%, 100% { opacity: 0; transform: scale(1); } }
@keyframes fd-ring { 0%, 20% { opacity: 0; transform: scale(0.6); } 30% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(2.2); } }
.fd-anim-dtap .fd-tut__touch:first-child { animation: fd-dtap 1.8s infinite; }
.fd-anim-dtap .fd-tut__ring { animation: fd-dring 1.8s infinite; }
@keyframes fd-dtap { 0%, 8% { opacity: 1; } 10%, 18% { opacity: 0; } 20%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes fd-dring { 0%, 25% { opacity: 0; transform: scale(0.6); } 32% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(2.4); } }
.fd-anim-pinch .fd-tut__touch { opacity: 1; animation: fd-pinch-a 2.2s ease-in-out infinite; }
.fd-anim-pinch .fd-tut__touch--2 { animation-name: fd-pinch-b; }
@keyframes fd-pinch-a { 0%, 100% { transform: translate(-8px, 8px); } 50% { transform: translate(-26px, 26px); } }
@keyframes fd-pinch-b { 0%, 100% { transform: translate(8px, -8px); } 50% { transform: translate(26px, -26px); } }
/* menú de puntos y Mapa 2D */
.fd-tut__menu {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.45); color: var(--fd-cream); font-size: 13px;
}
.fd-tut__menu i { font-style: normal; min-width: 64px; }
.fd-tut__menu span { color: var(--fd-gold-light); font-size: 18px; animation: fd-nudge 1.4s ease-in-out infinite; }
.fd-tut__menu span:last-child { animation-direction: reverse; }
@keyframes fd-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
.fd-tut__chip {
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(214, 179, 122, 0.5); color: var(--fd-cream);
  font-size: 12px; font-weight: 600; animation: fd-glow 1.8s ease-in-out infinite;
}
@keyframes fd-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 179, 122, 0); } 50% { box-shadow: 0 0 0 6px rgba(214, 179, 122, 0.18); } }
@media (prefers-reduced-motion: reduce) {
  .fd-tut, .fd-tut * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* phones: no AR / VR buttons (Lucas, 21 oct 2026) */
@media (pointer: coarse) {
  .sse-arMode, .sse-vrMode { display: none !important; }
}

/* FrameDor logo in the bottom-left corner, on top of the scene but never catching clicks (Lucas, 23 oct 2026) */
body::after {
  content: ""; position: fixed; z-index: 5; pointer-events: none;
  left: max(18px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 100px; height: 94px; opacity: .95;
  background: url("./assets/framedor-logo.png") left bottom / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(0, 0, 0, .35));
}
@media (pointer: coarse), (max-width: 640px) {
  body::after { width: 64px; height: 60px; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Etiqueta de ayuda cuando el tour va dentro de otra web (en lugar de la ventana del tutorial) */
.fd-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 110px); /* leaves the logo (bottom left) clear */
  box-sizing: border-box;
  padding: 7px 7px 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(214, 179, 122, 0.28);
  background: rgba(18, 13, 9, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #e9e0d0;
  font-family: var(--fd-sans);
  font-size: 12px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.fd-hint.fd-on { opacity: 1; transform: none; pointer-events: auto; }
.fd-hint__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-hint b { color: var(--fd-gold); font-weight: 600; }
.fd-hint__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fd-gold);
  box-shadow: 0 0 0 0 rgba(214, 179, 122, 0.6);
  animation: fd-hint-pulse 2s ease-out infinite;
}
@keyframes fd-hint-pulse { to { box-shadow: 0 0 0 8px rgba(214, 179, 122, 0); } }
.fd-hint__more {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(214, 179, 122, 0.4);
  background: transparent;
  color: var(--fd-gold);
  font: 600 12px/1 var(--fd-sans);
  cursor: pointer;
}
.fd-hint__more:hover { background: rgba(214, 179, 122, 0.15); }
@media (prefers-reduced-motion: reduce) { .fd-hint__dot { animation: none; } }