/* ============================================================
   RECORRIDOS 360 — marcadores, tarjeta y selector de posiciones
   Va después de pannellum.css. Los overlays viven DENTRO del
   contenedor de Pannellum para seguir visibles en pantalla completa.
   Colores fijos (no variables del sitio) porque el editor local
   también carga este archivo sin styles.css.
   ============================================================ */

/* pannellum.css pone content-box a todo lo de adentro */
.pnlm-container .rv-punto,
.pnlm-container .rv-punto *,
.pnlm-container .rv-tarjeta,
.pnlm-container .rv-tarjeta *,
.pnlm-container .rv-escenas,
.pnlm-container .rv-escenas *,
.rv-plano,
.rv-plano *{box-sizing:border-box}

/* ---------- Plano con "estás aquí" ---------- */
.rv-plano{
  position:absolute;z-index:4;top:12px;right:12px;width:clamp(112px, 24%, 172px);
  padding:6px;border-radius:12px;line-height:0;
  background:rgba(var(--b0-rgb,20,24,21),.74);border:1px solid rgba(var(--ambar-rgb,179,139,93),.28);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.rv-plano__lienzo{position:relative}
.rv-plano__img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;pointer-events:none}
.rv-plano__cono{
  position:absolute;width:64px;height:64px;border-radius:50%;pointer-events:none;
  -webkit-mask:radial-gradient(circle, #000 0 22%, transparent 70%);
  mask:radial-gradient(circle, #000 0 22%, transparent 70%);
}
.rv-plano__cono[hidden]{display:none}
.rv-plano__punto{
  position:absolute;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;transform:translate(-50%,-50%);
  -webkit-tap-highlight-color:transparent;
}
.rv-plano__punto::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--crema,#EFEBE4);box-shadow:0 0 0 2px rgba(var(--b0-rgb,20,24,21),.9);
  transform:translate(-50%,-50%);transition:transform .2s ease;
}
.rv-plano__punto.activa::after{
  width:12px;height:12px;background:var(--ambar-luz,#D1B088);
  box-shadow:0 0 0 2px var(--b0,#141815), 0 0 0 5px rgba(var(--ambar-luz-rgb,209,176,136),.4);
}
.rv-plano__punto:focus-visible{outline:2px solid var(--ambar-luz,#D1B088);outline-offset:0}
@media (hover:hover){.rv-plano__punto:hover::after{transform:translate(-50%,-50%) scale(1.35)}}

/* ---------- Marcadores ---------- */
.rv-punto{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.rv-punto--paso{width:56px;height:56px}
.rv-punto--info{width:44px;height:44px}

/* Pannellum mueve el div con transform en cada cuadro: las animaciones van
   en el hijo, nunca en .rv-punto. */
.rv-punto__marca{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.rv-punto__marca svg{width:26px;height:26px;display:block}

/* La flecha se inclina como si estuviera tirada en el piso: se lee como
   "camina hasta allá" y no como un botón flotando en el aire. */
.rv-punto--paso{perspective:360px}
.rv-punto--paso .rv-punto__marca{
  transform:rotateX(58deg);
  color:var(--crema,#EFEBE4);background:rgba(var(--b0-rgb,20,24,21),.55);
  border:2px solid rgba(var(--crema-rgb,239,235,228),.92);
  box-shadow:0 2px 10px rgba(0,0,0,.35), inset 0 0 0 5px rgba(var(--crema-rgb,239,235,228),.08);
}
.rv-punto--paso .rv-punto__marca svg{width:28px;height:28px;stroke-width:2.2}

.rv-punto--info .rv-punto__marca{
  color:var(--b0,#141815);background:var(--ambar,#B38B5D);
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.rv-punto--info .rv-punto__marca svg{width:22px;height:22px;stroke-width:1.9}
.rv-punto--info::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ambar,#B38B5D);
  pointer-events:none;animation:rvPulso 2.6s ease-out infinite;
}
@keyframes rvPulso{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.75);opacity:0}}

.rv-punto__texto{
  position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;
  font:500 12.5px/1.2 'Hanken Grotesk',system-ui,-apple-system,sans-serif;letter-spacing:.03em;
  color:var(--crema,#EFEBE4);background:rgba(var(--b0-rgb,20,24,21),.8);border:1px solid rgba(var(--ambar-rgb,179,139,93),.3);
  padding:5px 10px;border-radius:999px;
}
/* El rótulo de la flecha va ARRIBA: las flechas viven en la parte baja de
   la escena y abajo se salen del visor. */
.rv-punto--paso .rv-punto__texto{top:auto;bottom:calc(100% + 2px)}

/* En los puntos de información el rótulo solo aparece al pasar o enfocar:
   la tarjeta ya lo dice y así la foto no se llena de letreros. */
.rv-punto--info .rv-punto__texto{opacity:0;transform:translate(-50%,-4px);transition:opacity .2s ease, transform .2s ease}
.rv-punto--info:focus-visible .rv-punto__texto{opacity:1;transform:translateX(-50%)}
.rv-punto:focus-visible .rv-punto__marca{box-shadow:0 0 0 3px var(--b0,#141815), 0 0 0 6px var(--ambar-luz,#D1B088)}

@media (hover:hover){
  .rv-punto:hover .rv-punto__marca{transform:scale(1.1)}
  .rv-punto--paso:hover .rv-punto__marca{transform:rotateX(58deg) scale(1.12) translateY(-4px)}
  .rv-punto--info:hover .rv-punto__texto{opacity:1;transform:translateX(-50%)}
}

/* ---------- Tarjeta de información ---------- */
.rv-tarjeta{
  position:absolute;z-index:6;top:16px;right:16px;width:min(340px, calc(100% - 32px));
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:18px 52px 18px 18px;border-radius:14px;
  color:var(--crema,#EFEBE4);background:rgba(var(--b0-rgb,20,24,21),.92);border:1px solid rgba(var(--ambar-rgb,179,139,93),.28);
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.45);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;text-align:left;
  cursor:auto;-webkit-user-select:text;user-select:text;
  opacity:0;transform:translateY(-6px);transition:opacity .22s ease, transform .22s ease;
}
.rv-tarjeta[hidden]{display:none}
.rv-tarjeta.abierta{opacity:1;transform:none}
.rv-tarjeta__icono{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--ambar-luz,#D1B088);background:rgba(var(--ambar-rgb,179,139,93),.14);
}
.rv-tarjeta__icono svg{width:22px;height:22px}
.rv-tarjeta__titulo{margin:0;font-family:'Marcellus',Georgia,serif;font-size:18px;line-height:1.3;color:var(--crema,#EFEBE4)}
.rv-tarjeta__texto{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--crema-dim,#B1ACA2)}
.rv-tarjeta__texto[hidden]{display:none}
.rv-tarjeta__cerrar{
  position:absolute;top:6px;right:6px;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;color:var(--crema,#EFEBE4);background:transparent;cursor:pointer;
  transition:background-color .2s ease;
}
.rv-tarjeta__cerrar svg{width:20px;height:20px}
.rv-tarjeta__cerrar:hover{background:rgba(var(--crema-rgb,239,235,228),.1)}
.rv-tarjeta__cerrar:focus-visible{outline:2px solid var(--ambar-luz,#D1B088);outline-offset:-4px}

/* ---------- Selector de posiciones ---------- */
.rv-escenas{
  position:absolute;z-index:5;left:0;right:0;bottom:12px;
  display:flex;gap:8px;padding:0 12px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rv-escenas::-webkit-scrollbar{display:none}
/* Centrado que no corta el primer botón cuando no caben todos */
.rv-escenas > :first-child{margin-left:auto}
.rv-escenas > :last-child{margin-right:auto}
.rv-escena{
  flex:none;min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer;
  font:500 13.5px/1 'Hanken Grotesk',system-ui,-apple-system,sans-serif;letter-spacing:.03em;
  color:var(--crema,#EFEBE4);background:rgba(var(--b0-rgb,20,24,21),.72);border:1px solid rgba(var(--ambar-rgb,179,139,93),.3);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.rv-escena:focus-visible{outline:2px solid var(--ambar-luz,#D1B088);outline-offset:2px}
.rv-escena.activa{color:var(--b0,#141815);background:var(--ambar,#B38B5D);border-color:var(--ambar,#B38B5D)}
@media (hover:hover){.rv-escena:not(.activa):hover{border-color:var(--ambar,#B38B5D)}}

.rv-error{
  margin:0;height:100%;min-height:inherit;display:grid;place-items:center;padding:24px;text-align:center;
  font:15px/1.5 'Hanken Grotesk',system-ui,sans-serif;color:var(--crema-dim,#B1ACA2);background:var(--b1,#1A1F1B);
}

@media (max-width:700px){
  .rv-tarjeta{top:auto;bottom:12px;left:12px;right:12px;width:auto;transform:translateY(8px)}
  .rv-con-escenas .rv-tarjeta{bottom:68px}
  .rv-plano{top:10px;right:10px;width:100px;padding:5px}
  .rv-plano__cono{width:50px;height:50px}
  /* La pista y el plano no caben juntos arriba en un celular */
  .rv-plano-activo .pano-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rv-punto--info::before{animation:none;opacity:0}
  .rv-punto__marca,.rv-tarjeta,.rv-escena,.rv-punto__texto{transition:none}
}

/* ---------- En la ficha de habitación ---------- */
/* Con varias posiciones los botones ocupan la franja de abajo: la pista
   sube y desaparece al primer toque. */
.rv-varias .pano-hint{bottom:auto;top:14px;animation:hintFade .8s 1.2s both, rvPistaFuera .5s 6s forwards}
@keyframes rvPistaFuera{to{opacity:0;visibility:hidden}}
.rv-tocado .pano-hint{animation:none;opacity:0;transition:opacity .4s ease}

/* ============================================================
   MODO DISCRETO (la web; el editor no lo usa)
   Los puntos de información son un punto de luz; se abren con su icono y
   nombre solo el que queda cerca del centro de la vista (recorrido.js marca
   .rv-cerca). Las flechas del piso pierden peso y muestran su destino solo
   cuando se va hacia ellas. El área para tocar sigue siendo de 44 px.
   ============================================================ */
.rv-discreto .rv-punto--info::before{animation:none;opacity:0}
.rv-discreto .rv-punto--info .rv-punto__marca{
  transform:scale(.3);
  color:transparent;background:rgba(var(--crema-rgb,239,235,228),.96);
  box-shadow:0 0 0 7px rgba(var(--crema-rgb,239,235,228),.22), 0 1px 8px rgba(0,0,0,.5);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.rv-discreto .rv-punto--info .rv-punto__marca svg{opacity:0;transition:opacity .2s ease}
.rv-discreto .rv-punto--info.rv-cerca .rv-punto__marca{
  transform:scale(.86);
  color:var(--b0,#141815);background:var(--ambar-luz,#D1B088);
  box-shadow:0 0 0 4px rgba(var(--ambar-luz-rgb,209,176,136),.25), 0 4px 16px rgba(0,0,0,.45);
}
.rv-discreto .rv-punto--info.rv-cerca .rv-punto__marca svg{opacity:1}
.rv-discreto .rv-punto--info.rv-cerca .rv-punto__texto{opacity:1;transform:translateX(-50%)}

/* Flecha: un aro en el piso, sin disco oscuro encima de la foto */
.rv-discreto .rv-punto--paso{width:52px;height:52px}
.rv-discreto .rv-punto--paso .rv-punto__marca{
  background:rgba(var(--b0-rgb,20,24,21),.18);
  border:2px solid rgba(var(--crema-rgb,239,235,228),.85);
  box-shadow:0 0 14px rgba(0,0,0,.28);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.rv-discreto .rv-punto--paso .rv-punto__marca svg{width:24px;height:24px;opacity:.95}
.rv-discreto .rv-punto--paso .rv-punto__texto{opacity:0;transform:translate(-50%,4px);transition:opacity .22s ease, transform .22s ease}
.rv-discreto .rv-punto--paso.rv-cerca .rv-punto__texto,
.rv-discreto .rv-punto--paso:focus-visible .rv-punto__texto{opacity:1;transform:translateX(-50%)}
.rv-discreto .rv-punto--paso.rv-cerca .rv-punto__marca{border-color:var(--crema,#EFEBE4);background:rgba(var(--b0-rgb,20,24,21),.32)}

@media (hover:hover){
  .rv-discreto .rv-punto--info:hover .rv-punto__marca{
    transform:scale(.86);color:var(--b0,#141815);background:var(--ambar-luz,#D1B088);
  }
  .rv-discreto .rv-punto--info:hover .rv-punto__marca svg{opacity:1}
  .rv-discreto .rv-punto--paso:hover .rv-punto__texto{opacity:1;transform:translateX(-50%)}
}

/* En el celular sobran los botones de zoom: se pellizca. */
@media (hover:none){
  .rv-discreto .pnlm-zoom-controls{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv-discreto .rv-punto__marca,
  .rv-discreto .rv-punto__texto{transition:none}
}

/* Selector de posiciones compacto: una píldora y su lista */
.rv-escenas__actual{display:none}
.rv-escenas__lista{display:contents}
.rv-discreto .rv-escenas{left:12px;right:auto;bottom:12px;display:block;padding:0;overflow:visible;max-width:calc(100% - 24px)}
.rv-discreto .rv-escenas > *{margin:0}
.rv-discreto .rv-escenas__actual{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 16px;border-radius:999px;cursor:pointer;
  font:500 13.5px/1 'Hanken Grotesk',system-ui,-apple-system,sans-serif;letter-spacing:.02em;
  color:var(--crema,#EFEBE4);background:rgba(var(--b0-rgb,20,24,21),.58);border:1px solid rgba(var(--crema-rgb,239,235,228),.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.rv-escenas__cuenta{color:var(--crema-dim,#B1ACA2);font-weight:400}
.rv-escenas__actual svg{width:16px;height:16px;transition:transform .2s ease}
.rv-escenas.abierta .rv-escenas__actual svg{transform:rotate(180deg)}
.rv-discreto .rv-escenas__actual:focus-visible{outline:2px solid var(--ambar-luz,#D1B088);outline-offset:2px}
.rv-discreto .rv-escenas__lista{
  display:none;position:absolute;left:0;bottom:calc(100% + 8px);min-width:210px;max-height:min(58vh, 340px);overflow-y:auto;
  padding:6px;border-radius:14px;background:rgba(var(--b0-rgb,20,24,21),.9);border:1px solid rgba(var(--crema-rgb,239,235,228),.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.rv-discreto .rv-escenas.abierta .rv-escenas__lista{display:grid;gap:2px}
.rv-discreto .rv-escena{
  display:block;width:100%;min-height:42px;padding:0 12px;text-align:left;
  border:0;border-radius:10px;background:transparent;box-shadow:none;font-size:14px;
}
.rv-discreto .rv-escena.activa{color:var(--crema,#EFEBE4);background:rgba(var(--ambar-rgb,179,139,93),.26)}
@media (hover:hover){.rv-discreto .rv-escena:not(.activa):hover{background:rgba(var(--crema-rgb,239,235,228),.08)}}