/*
 * Visor 360°: estilos del recorrido (/recorrido-virtual/{proyecto}/).
 * Es una página aparte: abierta desde la página del proyecto se ve adentro de un marco, sin la barra de arriba.
 */

@font-face{
  font-family:"Lastik";
  src:url("fonts/Lastik-Free.woff2") format("woff2");
  font-display:swap;
}

/* Mismos tokens que el sitio (tema Housen) */
:root{
  --bg:#e0d9d1;
  --paper:#fff;
  --plan:#e3e0d9;
  --ink:#171615;
  --brown:#2d2117;
  --text:#3a332d;
  --muted:#5f5750;
  --line:rgba(45,33,23,.18);
  --gold:#b8975a;

  --f-display:"Lastik","Times New Roman",serif;
  --f-body:"DM Sans",system-ui,sans-serif;

  --r:12px;
  --r-sm:6px;
  --r-card:calc(var(--r) + 10px);   /* tarjeta blanca con 10px de margen: curvas paralelas a las de adentro */
  --gutter:clamp(16px,4vw,48px);
  --edge:24px;                      /* distancia de los controles al borde de la vista */
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 40px -18px rgba(23,16,10,.5);
  --sab:env(safe-area-inset-bottom,0px);   /* barra de inicio del celular */
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.app{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--bg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:var(--r);background:var(--brown);color:#fff;font:500 15px/1 var(--f-body);text-decoration:none;transition:background .3s}
.btn:hover{background:var(--ink)}
.btn svg{width:16px;height:16px;flex:none}
.arrow{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--brown);transition:background .25s,border-color .25s,color .25s}
.arrow:hover{background:var(--brown);border-color:var(--brown);color:#fff}
.arrow svg{width:16px;height:16px}

/* ===== Barra superior: la misma del sitio ===== */
.bar{position:relative;z-index:20;padding-top:env(safe-area-inset-top,0px);background:var(--bg);box-shadow:0 1px 0 rgba(45,32,23,.06),0 8px 18px -12px rgba(45,32,23,.4)}
.bar__in{height:64px;display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding-inline:var(--gutter);color:var(--brown)}
.logo{flex:none;color:var(--brown)}
.logo svg{display:block;width:auto;height:19px}
.crumbs{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font:15px/1.2 var(--f-body);white-space:nowrap}
.crumbs a{text-decoration:none;text-underline-offset:6px}
.crumbs a:hover{text-decoration:underline;text-decoration-thickness:1px}
.crumbs span{color:var(--muted)}
.bar__end{display:flex;align-items:center;margin-left:auto}
.bar__back{min-height:40px;padding:0 18px;font-size:14px}
.bar__close{display:none;width:44px;height:44px;place-items:center;margin-right:-10px;color:var(--brown)}
.bar__close svg{width:22px;height:22px}
.is-embedded .bar{display:none}
.is-embedded .app{grid-template-rows:minmax(0,1fr)}
.is-embedded{--sab:0px}   /* abierto desde la página del proyecto: el margen inferior lo pone la página */   /* sin barra, la vista ocupa todo el alto */

/* ===== Vista 360° ===== */
.stage{position:relative;overflow:hidden;background:#cfc6bc;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}
.stage.is-grabbing{cursor:grabbing}
.pano{position:absolute;inset:0;pointer-events:none}
/* cada ambiente es un cubo con sus 6 caras: la cámara queda en el centro */
.cube{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .55s var(--ease)}
.cube.is-in{opacity:1}
.cam{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.face{position:absolute;background-repeat:no-repeat;background-size:600% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s;-webkit-user-drag:none}
.face img.is-in{opacity:1}

/* Puntos para pasar de un ambiente a otro */
.spots{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .3s}
.spots.is-off{opacity:0}
.spots.is-off .spot{pointer-events:none}
.spot{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;pointer-events:auto}
.spot__label{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 6px;border-radius:var(--r);background:rgba(255,255,255,.94);color:var(--brown);font:500 14px/1 var(--f-body);white-space:nowrap;box-shadow:0 8px 20px -8px rgba(23,16,10,.5);transition:background .25s,color .25s}
.spot__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--brown);color:#fff;transition:background .25s,color .25s}
.spot__icon svg{width:15px;height:15px}
.spot__stem{width:2px;height:var(--stem,10px);background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(23,16,10,.35)}
.spot__dot{position:relative;width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:rgba(45,33,23,.4);box-shadow:0 0 8px rgba(23,16,10,.4)}
.spot__dot::after{content:"";position:absolute;inset:-7px;border:1.5px solid #fff;border-radius:50%;animation:ping 2.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.45);opacity:0}35%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
.spot:hover .spot__label,.spot:focus-visible .spot__label{background:var(--brown);color:#fff}
.spot:hover .spot__icon,.spot:focus-visible .spot__icon{background:#fff;color:var(--brown)}
.spot:focus-visible{outline:0}
.spot:focus-visible .spot__label{outline:2px solid var(--gold);outline-offset:2px}

/* Ayuda inicial */
.hint{position:absolute;left:50%;top:calc(var(--edge) + 8px);z-index:3;display:flex;align-items:center;gap:12px;padding:14px 20px 14px 16px;border-radius:var(--r);background:rgba(255,255,255,.94);color:var(--brown);font:500 15px/1.2 var(--f-body);white-space:nowrap;box-shadow:var(--shadow);transform:translate(-50%,-6px);pointer-events:none;opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hint.is-on{opacity:1;transform:translate(-50%,0)}
.hint svg{width:26px;height:26px;flex:none;animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(-5px) rotate(-6deg)}50%{transform:translateX(5px) rotate(6deg)}}

/* Carga entre ambientes */
.load{position:absolute;inset:0 0 auto;z-index:4;height:2px;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none}
.load.is-on{opacity:1}
.load::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:var(--brown);animation:bar 1.1s var(--ease) infinite}
@keyframes bar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* Portada mientras carga el primer ambiente */
.splash{position:absolute;inset:0;z-index:6;display:grid;place-items:center;align-content:center;gap:14px;padding:24px;background:var(--bg);text-align:center;transition:opacity .7s var(--ease),visibility .7s}
.splash.is-out{opacity:0;visibility:hidden}
.splash__name{margin:0;font:600 clamp(36px,4.4vw,60px)/1.02 var(--f-display);letter-spacing:.3px;color:var(--ink)}
/* Lastik tiene un solo peso (400): en 600 el navegador la engrosa a mano y en tamaños chicos se ve otra letra.
   600 solo en los títulos grandes (32 px o más), como en el sitio; el resto, 400. */
.splash__sub{margin:0;color:var(--muted);font-size:15px}
.splash__bar{position:relative;width:140px;height:2px;margin-top:10px;overflow:hidden;background:var(--line)}
.splash__bar::before{content:"";position:absolute;inset:0;width:40%;background:var(--brown);animation:bar 1.1s var(--ease) infinite}
.splash__err{max-width:44ch;margin:6px 0 0;color:var(--text);font-size:15px}
.splash.has-error .splash__bar{display:none}

/* ===== Tarjeta del ambiente (abajo a la izquierda) ===== */
.room{position:absolute;left:var(--edge);bottom:var(--edge);z-index:5;width:340px;padding:10px;background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow)}
.room__text{padding:10px 10px 16px}
.room__meta{margin:0;color:var(--muted);font-size:13px;line-height:1.3}
.room__name{margin:6px 0 0;font:400 30px/1.05 var(--f-display);letter-spacing:.3px;color:var(--ink)}
.room.is-changing .room__text{animation:textIn .5s var(--ease)}
@keyframes textIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.room__nav{display:flex;flex-wrap:wrap;gap:8px}
.room__next{flex:1;min-width:0;min-height:44px;justify-content:space-between;padding:0 16px}
.room__next>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room__all{flex:1 0 100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 16px;border:0;border-radius:var(--r);background:var(--bg);color:var(--brown);font:500 15px/1 var(--f-body);transition:background .25s}
.room__all:hover{background:#d6cdc2}
.room__all svg{width:16px;height:16px;flex:none}

/* ===== Herramientas (abajo a la derecha) ===== */
.tools{position:absolute;right:var(--edge);bottom:var(--edge);z-index:5;display:flex;flex-direction:column;gap:8px}
.tools__group{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);background:rgba(255,255,255,.94);box-shadow:0 10px 24px -12px rgba(23,16,10,.5)}
.tool{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--brown);transition:background .25s,color .25s}
.tool + .tool{border-top:1px solid var(--line)}
.tool:hover,.tool[aria-pressed="true"]{background:var(--brown);color:#fff}
.tool svg{width:18px;height:18px}

/* Aviso corto */
.toast{position:absolute;left:50%;top:var(--edge);z-index:6;max-width:calc(100% - 32px);margin:0;padding:12px 16px;border-radius:var(--r);background:var(--brown);color:#fff;font-size:14px;line-height:1.35;box-shadow:var(--shadow);transform:translate(-50%,-8px);opacity:0;transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ===== Todos los ambientes ===== */
.scrim{position:fixed;inset:0;z-index:30;background:rgba(15,13,11,.3);opacity:0;transition:opacity .3s}
.scrim.is-open{opacity:1}
.list{position:fixed;z-index:31;top:0;bottom:0;left:0;width:min(420px,100vw);display:flex;flex-direction:column;background:#fff;box-shadow:0 0 44px -12px rgba(23,16,10,.45);transform:translateX(-104%);transition:transform .4s var(--ease)}
.list.is-open{transform:none}
.list__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 14px 24px;border-bottom:1px solid var(--line)}
.list__title{margin:0;font:400 26px/1 var(--f-display);letter-spacing:.3px;color:var(--ink)}
.list__title small{margin-left:6px;color:var(--muted);font:400 14px/1 var(--f-body);letter-spacing:0}
.list__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 32px}
.list__floor{margin:26px 0 14px;color:var(--muted);font:500 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.list__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin:0;padding:0;list-style:none}
.rcard{display:block;width:100%;padding:0;border:0;background:none;color:var(--ink);text-align:left}
.rcard__img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--plan)}
.rcard__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.rcard:hover .rcard__img img{transform:scale(1.05)}
.rcard__tag{position:absolute;left:8px;top:8px;padding:6px 9px;border-radius:var(--r-sm);background:var(--brown);color:#fff;font:500 12px/1 var(--f-body)}
.rcard__name{display:block;margin-top:9px;font:400 18px/1.15 var(--f-display);letter-spacing:.3px;text-underline-offset:4px}
.rcard:hover .rcard__name{text-decoration:underline;text-decoration-thickness:1px}

@media (max-width:760px){
  :root{--edge:12px}
  .bar__in{height:56px;gap:16px}
  .crumbs{font-size:14px;gap:8px}
  .bar__back{display:none}
  .bar__close{display:grid}
  .room{left:var(--edge);right:var(--edge);bottom:calc(var(--edge) + 8px + var(--sab));width:auto}
  .room__text{padding:6px 8px 12px}
  .room__name{font-size:26px}
  .room__all{flex:none;width:44px;padding:0}
  .room__all span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tools{top:var(--edge);bottom:auto}
  .hint{top:auto;bottom:calc(var(--edge) + 156px + var(--sab))}   /* arriba de la tarjeta, sin tapar las herramientas */
  .spot__label{height:36px;gap:8px;padding-right:12px;font-size:13px}
  .spot__icon{width:26px;height:26px}
  .list{top:auto;right:0;width:auto;max-height:86dvh;border-radius:var(--r-card) var(--r-card) 0 0;transform:translateY(104%)}
  .list__head{padding-left:20px}
  .list__body{padding:0 20px calc(28px + var(--sab))}
}
/* celular apaisado: la tarjeta se achica para dejar ver el ambiente */
@media (max-height:520px) and (min-width:561px){
  .room{right:auto;width:300px}
  .room__meta{display:none}
  .room__name{margin:0;font-size:22px}
}
@media (hover:none),(pointer:coarse){
  .tools__group--zoom{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cube{transition-duration:.2s!important}
}

/* Recorridos sin plantas: la lista va sin títulos */
.list__body--solo .list__grid{margin-top:22px}

/* Ambientes sin optimizar: la panorámica dibujada con WebGL */
.pano-gl{position:absolute;inset:0;display:block;width:100%;height:100%}
.rcard__img--equi img{transform:scale(2.6)}   /* sin optimizar: de la panorámica se ve solo el centro (unos 100°) */
.rcard:hover .rcard__img--equi img{transform:scale(2.73)}