/* =====================================================================
   tour.css — Recorrido virtual a pantalla completa
   ===================================================================== */
:root{
  --pine-950:#0a1f16; --pine-900:#122619;
  --cream:#f6f1e7; --cream-dim:#d9d2c1;
  --gold:#c9a15a; --gold-light:#e6cd94;
  --st-green:#3ecf7a; --st-red:#e05252;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden;}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--pine-950); color:var(--cream);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font:inherit; cursor:pointer;}
img{display:block; max-width:100%;}

/* ---------- escenario ---------- */
.t-stage{
  position:fixed; inset:0; overflow:hidden; background:#000;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.t-stage.es360{cursor:grab;}
.t-stage.agarrando{cursor:grabbing;}
#tCanvas{position:absolute; inset:0; width:100%; height:100%; display:none;}

/* vista fija: la imagen llena la pantalla con un movimiento lento */
.t-flat{position:absolute; inset:0; overflow:hidden;}
@keyframes tKen{
  from{transform:translate(-50%,-50%) scale(1.04);}
  to{transform:translate(-52%,-49%) scale(1.14);}
}
.t-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(180deg, rgba(6,14,10,.62) 0%, transparent 22%, transparent 58%, rgba(6,14,10,.80) 100%);
}
.t-stage.cambiando .t-flat, .t-stage.cambiando #tCanvas{opacity:.35; transition:opacity .2s;}

/* ---------- flechas entre ambientes ---------- */
.t-hots{position:absolute; inset:0; z-index:5; pointer-events:none;}
.t-hot{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; padding:0; pointer-events:auto;
}
.t-hot-ring{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(10,31,22,.45); border:2px solid rgba(255,255,255,.85);
  backdrop-filter:blur(4px); box-shadow:0 6px 20px rgba(0,0,0,.5);
  animation:tPulse 2.4s ease-out infinite; transition:transform .18s, background .18s;
}
.t-hot-arrow{
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:12px solid var(--cream); margin-top:-2px;
}
@keyframes tPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.35), 0 6px 20px rgba(0,0,0,.5);}
  70%{box-shadow:0 0 0 18px rgba(255,255,255,0), 0 6px 20px rgba(0,0,0,.5);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0), 0 6px 20px rgba(0,0,0,.5);}
}
.t-hot:hover .t-hot-ring{transform:scale(1.12); background:rgba(201,161,90,.55); animation:none;}
.t-hot-lab{
  font-size:12px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  background:rgba(10,31,22,.72); padding:5px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
}

/* ---------- barra superior ---------- */
.t-top{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:16px; padding:16px 20px;
}
.t-back{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:9px 16px 9px 12px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:rgba(10,31,22,.55); border:1px solid rgba(255,255,255,.2);
  color:var(--cream); text-decoration:none; backdrop-filter:blur(8px);
}
.t-back:hover{background:rgba(10,31,22,.8);}
.t-logo{height:26px; width:auto; opacity:.95; flex:0 0 auto;}
.t-where{margin-left:auto; text-align:right; min-width:0;}
.t-where b{display:block; font-family:'Fraunces',Georgia,serif; font-size:19px; line-height:1.15;}
.t-kind{
  display:inline-block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-dim); margin-top:3px;
}
.t-kind.es360{color:var(--gold-light);}
.t-full{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; font-size:15px;
  background:rgba(10,31,22,.55); border:1px solid rgba(255,255,255,.2); color:var(--cream);
  backdrop-filter:blur(8px);
}

/* ---------- tipologías y luz ---------- */
.t-side{
  position:fixed; top:78px; left:20px; z-index:20;
  display:flex; flex-direction:column; gap:12px; width:236px;
}
.t-tipos{display:flex; flex-direction:column; gap:8px;}
.t-seg{
  text-align:left; padding:11px 14px; border-radius:14px; color:var(--cream-dim);
  background:rgba(10,31,22,.55); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); transition:all .16s;
}
.t-seg b{display:block; font-family:'Fraunces',Georgia,serif; font-size:14.5px; color:var(--cream);}
.t-seg i{display:block; font-style:normal; font-size:11px; margin-top:2px; line-height:1.4;}
.t-seg:hover{border-color:rgba(230,205,148,.5);}
.t-seg.on{
  background:linear-gradient(135deg, rgba(201,161,90,.92), rgba(230,205,148,.92));
  border-color:transparent;
}
.t-seg.on b, .t-seg.on i{color:#2a1d05;}

.t-luces{
  display:flex; gap:6px; padding:5px; border-radius:999px;
  background:rgba(10,31,22,.55); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.t-luz{
  flex:1; padding:8px 4px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:none; border:0; color:var(--cream-dim); transition:all .16s;
}
.t-luz:hover:not(.no){color:var(--cream); background:rgba(255,255,255,.08);}
.t-luz.on{background:var(--gold); color:#2a1d05;}
.t-luz.no{opacity:.3; cursor:not-allowed;}

/* ---------- minimapa ---------- */
.t-plano{
  position:fixed; right:20px; bottom:120px; z-index:20; width:196px;
  padding:12px; border-radius:16px;
  background:rgba(10,31,22,.62); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
}
.t-plano-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px;}
.t-plano-head b{font-size:12px; letter-spacing:.04em;}
.t-plano-head i{font-style:normal; font-size:9.5px; color:var(--cream-dim); opacity:.75;}
.t-plano-svg{width:100%; height:auto; display:block; overflow:visible;}
.t-plano-img{width:100%; border-radius:8px; margin-bottom:-100%;}
.t-pt{fill:rgba(255,255,255,.45); cursor:pointer; transition:fill .16s, r .16s;}
.t-pt:hover{fill:var(--cream);}
.t-pt.act{fill:var(--gold-light); stroke:rgba(230,205,148,.35); stroke-width:3;}
.t-pisos{display:flex; gap:6px; margin-top:8px;}
.t-piso{
  flex:1; padding:6px; border-radius:8px; font-size:11px; font-weight:700;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--cream-dim);
}
.t-piso.on{background:var(--gold); border-color:transparent; color:#2a1d05;}

/* ---------- tira de ambientes ---------- */
.t-lista{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; gap:10px; padding:14px 20px 18px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.t-lista::-webkit-scrollbar{display:none;}
.t-item{
  flex:0 0 auto; width:104px; border-radius:12px; overflow:hidden; position:relative;
  background:none; border:2px solid transparent; padding:0; transition:border-color .16s, transform .16s;
}
.t-item img{width:100%; height:62px; object-fit:cover;}
.t-item span{
  position:absolute; left:0; right:0; bottom:0; padding:14px 7px 5px;
  font-size:10.5px; font-weight:600; text-align:left; color:var(--cream);
  background:linear-gradient(180deg, transparent, rgba(6,14,10,.9));
}
.t-item:hover{transform:translateY(-2px);}
.t-item.on{border-color:var(--gold-light);}

/* ---------- carga y ayuda ---------- */
.t-load{
  position:fixed; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center; gap:12px;
  background:rgba(6,14,10,.55); backdrop-filter:blur(3px);
  font-size:13px; color:var(--cream-dim); letter-spacing:.05em;
}
.t-load.on{display:flex;}
.t-load.err{background:rgba(6,14,10,.85); color:#f0a0a0;}
.t-load::before{
  content:""; width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(230,205,148,.25); border-top-color:var(--gold-light);
  animation:tSpin .8s linear infinite;
}
.t-load.err::before{display:none;}
@keyframes tSpin{ to{ transform:rotate(360deg); } }

.t-help{
  position:fixed; left:50%; bottom:132px; transform:translateX(-50%) translateY(8px);
  z-index:19; display:flex; align-items:center; gap:9px;
  padding:9px 18px; border-radius:999px; font-size:12.5px; color:var(--cream-dim);
  background:rgba(10,31,22,.6); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); opacity:0; visibility:hidden;
  transition:opacity .4s, transform .4s, visibility .4s;
}
.t-help.on{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}

/* ---------- llamado a la acción ---------- */
.t-cta{
  position:fixed; right:20px; top:78px; z-index:20;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:linear-gradient(135deg, var(--gold), var(--gold-light)); color:#2a1d05;
  text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.t-cta:hover{transform:translateY(-2px);}

/* ---------- celular ---------- */
@media(max-width:820px){
  .t-top{padding:10px 14px; gap:10px;}
  .t-back{padding:8px 13px 8px 10px; font-size:12.5px;}
  .t-back span{display:none;}
  .t-logo{display:none;}
  .t-where{margin-left:auto;}
  .t-where b{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw;}
  .t-kind{font-size:9px; letter-spacing:.08em;}
  .t-full{width:36px; height:36px;}

  /* En celular los controles suben al tope: el centro de la pantalla
     queda libre para las flechas del recorrido. */
  .t-side{
    top:74px; bottom:auto; left:14px; right:14px; width:auto;
    flex-direction:row; align-items:center; gap:8px;
  }
  .t-tipos{flex-direction:row; flex:1; gap:6px;}
  .t-seg{padding:7px 10px; border-radius:11px; flex:1; min-width:0; text-align:center;}
  .t-seg b{font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .t-seg i{display:none;}
  .t-luces{flex:0 0 auto; padding:3px;}
  .t-luz{padding:6px 8px; font-size:10px;}

  .t-plano{
    right:14px; bottom:116px; width:118px; padding:9px;
  }
  .t-plano-head i{display:none;}
  .t-pisos{margin-top:6px;}
  .t-piso{padding:4px; font-size:10px;}

  .t-lista{padding:10px 14px 14px; gap:8px;}
  .t-item{width:80px;}
  .t-item img{height:50px;}
  .t-item span{font-size:9.5px; padding:12px 5px 4px;}

  .t-cta{
    top:auto; bottom:auto; right:14px; top:12px;
    padding:9px 14px; font-size:12px; display:none;
  }
  .t-help{bottom:186px; font-size:11.5px; padding:8px 14px;}
}
@media(max-width:420px){
  .t-plano{width:104px; bottom:172px;}
  .t-hot-ring{width:42px; height:42px;}
  .t-hot-lab{font-size:11px; padding:4px 10px;}
}

/* =====================================================================
   ENCUADRE DE LOS RENDERS PLANOS
   Los renders son horizontales (1,6:1) y la pantalla del celular es
   vertical: al llenarla solo se veía el 27% de la foto. Por eso, cuando
   la pantalla es mucho más vertical que la imagen, se muestra COMPLETA
   sobre una copia difuminada de sí misma.
   ===================================================================== */
.t-flat-fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(34px) saturate(1.15) brightness(.55);
  transform:scale(1.18); opacity:0; transition:opacity .4s;
}
.t-flat.completa .t-flat-fondo{opacity:1;}

/* El tamaño exacto lo calcula tour.js: así el recorte es el correcto y
   se sabe cuánto se puede arrastrar. */
.t-flat-foto{
  position:absolute; top:50%; left:50%; max-width:none;
  transform:translate(-50%,-50%);
}
.t-flat-foto.mueve{animation:tKen 26s ease-in-out infinite alternate;}

/* modo completa: la foto entra entera y se le da un marco suave */
.t-flat.completa .t-flat-foto{
  animation:none !important;
  border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.55);
}

/* botón para alternar entre ver completa y llenar la pantalla */
.t-fit{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; font-size:15px;
  background:rgba(10,31,22,.55); border:1px solid rgba(255,255,255,.2); color:var(--cream);
  backdrop-filter:blur(8px);
}
.t-fit.on{background:var(--gold); border-color:transparent; color:#2a1d05;}
@media(max-width:820px){ .t-fit{width:36px; height:36px; font-size:13px;} }


/* La foto plana se puede arrastrar cuando llena la pantalla */
.t-flat:not(.completa) .t-flat-foto{will-change:transform;}
.t-stage.arrastrable{cursor:grab;}
.t-stage.arrastrable.agarrando{cursor:grabbing;}

/* Aviso para girar el celular: con renders horizontales en pantalla
   vertical se ven pequeños, y acostado se ven a pantalla completa. */
.t-girar{
  position:fixed; left:50%; top:126px; transform:translateX(-50%) translateY(-6px);
  z-index:19; display:none; align-items:center; gap:8px; white-space:nowrap;
  padding:8px 15px; border-radius:999px; font-size:11.5px; color:var(--cream-dim);
  background:rgba(10,31,22,.72); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px); opacity:0; transition:opacity .5s, transform .5s;
}
.t-girar.on{display:flex; opacity:1; transform:translateX(-50%) translateY(0);}
.t-girar b{color:var(--gold-light); font-weight:600;}
@media(min-width:821px), (orientation:landscape){ .t-girar{display:none !important;} }

/* En celular vertical la foto completa sube un poco: así el espacio
   libre queda abajo y el minimapa no le pasa por encima. */
@media(max-width:820px) and (orientation:portrait){
  .t-flat.completa .t-flat-foto{top:42%;}
  .t-plano{bottom:104px;}
}

/* Celular acostado: la pantalla es baja, los controles se compactan. */
@media(max-height:500px) and (orientation:landscape){
  .t-side{top:64px; left:14px; width:190px; gap:8px;}
  .t-seg{padding:8px 11px; border-radius:11px;}
  .t-seg b{font-size:12.5px;}
  .t-seg i{font-size:10px;}
  .t-luz{padding:6px 3px; font-size:10.5px;}
  .t-plano{width:150px; padding:9px; bottom:100px; right:14px;}
  .t-lista{padding:8px 14px 10px;}
  .t-item{width:84px;}
  .t-item img{height:48px;}
  .t-top{padding:10px 14px;}
  .t-cta{display:none;}
}

/* =====================================================================
   TRANSICIÓN DE "CAMINAR"
   Al pasar de un ambiente a otro, el fotograma que dejas se acerca
   hacia la puerta que tocaste y se desvanece, mientras el ambiente
   nuevo entra desde adelante. Da la sensación de dar un paso.
   ===================================================================== */
.t-fade{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:0; overflow:hidden; will-change:transform, opacity;
}
.t-fade > *{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  max-width:none;
}
.t-fade.viva{opacity:1;}
.t-fade.anda{
  transition:transform 760ms cubic-bezier(.22,.61,.36,1),
             opacity 620ms cubic-bezier(.4,0,.7,1),
             filter 760ms ease-out;
}

/* el ambiente nuevo entra desde adelante y se asienta */
.t-flat.entra .t-flat-foto, .t-stage.entra #tCanvas{
  animation:tPaso 700ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes tPaso{
  from{ opacity:0; }
  35% { opacity:1; }
  to  { opacity:1; }
}
.t-flat.entra{animation:tAcerca 700ms cubic-bezier(.22,.61,.36,1) both;}
.t-flat.atras{animation:tAleja 700ms cubic-bezier(.22,.61,.36,1) both;}
@keyframes tAcerca{ from{transform:scale(1.16); filter:blur(5px);} to{transform:scale(1); filter:blur(0);} }
@keyframes tAleja { from{transform:scale(.90); filter:blur(4px);}  to{transform:scale(1); filter:blur(0);} }

@media(prefers-reduced-motion:reduce){
  .t-fade.anda{transition:opacity 260ms linear;}
  .t-flat.entra, .t-flat.atras, .t-flat.entra .t-flat-foto{animation:none;}
}