/* ============================================================
   Ixtli Litibu — Recorrido 360°
   Visor Pannellum + UI propia, sobre los tokens de style.css
   ============================================================ */

.t360{
  position:relative;
  background:var(--navy-deep);
  overflow:hidden;
}
.t360__stage{
  position:relative;
  width:100%;
  height:min(82vh,780px);
  min-height:440px;
  background:var(--navy-deep);
}
.t360__pano{position:absolute;inset:0}
.t360__pano .pnlm-container{background:var(--navy-deep)!important;cursor:grab}
.t360__pano .pnlm-grab-cursor:active{cursor:grabbing}
.t360__pano .pnlm-load-box,
.t360__pano .pnlm-panorama-info,
.t360__pano .pnlm-orientation-button{display:none!important}

/* ---------- portada ---------- */
.t360__gate{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;text-align:center;padding:40px var(--gutter);
  background:
    linear-gradient(180deg,rgba(3,19,69,.62),rgba(3,19,69,.78)),
    var(--gate-img,none) center/cover no-repeat,
    var(--navy-deep);
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
.t360__gate.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.t360__gate .eyebrow{color:var(--bronze-soft)}
.t360__gate .display{color:var(--cream);max-width:16ch}
.t360__note{
  font-size:14px;letter-spacing:.02em;color:rgba(246,243,237,.72);
  max-width:46ch;margin:0 auto;line-height:1.7;
}
.t360__start{
  display:inline-flex;align-items:center;gap:12px;
  border:0;cursor:pointer;
}
.t360__start[disabled]{opacity:.55;cursor:not-allowed}
.t360__start svg{width:18px;height:18px}

/* ---------- barra superior ---------- */
.t360__top{
  position:absolute;top:20px;left:20px;z-index:4;
  padding:14px 22px 16px;
  background:rgba(3,19,69,.58);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(246,243,237,.16);
  max-width:min(420px,72vw);
}
.t360__idx{
  display:block;font-family:var(--f-sans);font-weight:500;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze-soft);
  font-variant-numeric:lining-nums;
}
.t360__title{
  display:block;margin-top:6px;
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(21px,2.4vw,29px);line-height:1.2;color:var(--cream);
}
.t360__alt{
  position:absolute;top:20px;right:20px;z-index:4;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;
  background:rgba(3,19,69,.58);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(246,243,237,.16);
  font-size:12px;letter-spacing:.1em;color:var(--cream);
  font-variant-numeric:lining-nums;
}
.t360__alt svg{width:15px;height:15px;color:var(--bronze-soft)}

/* ---------- controles ---------- */
.t360__ctrl{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  z-index:4;display:flex;flex-direction:column;gap:9px;
}
.t360__btn{
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(3,19,69,.52);
  border:1px solid rgba(246,243,237,.18);
  color:var(--cream);cursor:pointer;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.t360__btn:hover{background:var(--bronze);border-color:var(--bronze)}
.t360__btn svg{width:19px;height:19px}

/* ---------- riel de escenas ---------- */
.t360__rail{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:4;display:flex;gap:10px;padding:10px;
  background:rgba(3,19,69,.52);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(246,243,237,.16);
  max-width:calc(100% - 40px);overflow-x:auto;scrollbar-width:none;
}
.t360__rail::-webkit-scrollbar{display:none}
.t360__thumb{
  position:relative;flex:0 0 auto;width:132px;
  border:1px solid transparent;background:none;padding:0;cursor:pointer;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.t360__thumb img{width:100%;height:64px;object-fit:cover;display:block;opacity:.72;transition:opacity .3s var(--ease)}
.t360__thumb:hover img,.t360__thumb.is-active img{opacity:1}
.t360__thumb.is-active{border-color:var(--bronze)}
.t360__thumb-meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:6px 8px 7px;text-align:left;
  background:linear-gradient(180deg,rgba(3,19,69,0),rgba(3,19,69,.86));
  color:var(--cream);
}
.t360__thumb-meta b{
  display:block;font-family:var(--f-sans);font-weight:500;font-size:10px;
  letter-spacing:.16em;color:var(--bronze-soft);
  font-variant-numeric:lining-nums;
}
.t360__thumb-meta em{
  display:block;font-style:normal;font-size:11px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- pista y cargador ---------- */
.t360__hint{
  position:absolute;left:50%;bottom:112px;transform:translateX(-50%);
  z-index:4;display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;background:rgba(3,19,69,.6);
  border:1px solid rgba(246,243,237,.16);
  color:var(--cream);font-size:12px;letter-spacing:.06em;
  transition:opacity .8s var(--ease);
}
.t360__hint.is-out{opacity:0}
.t360__loader{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:rgba(3,19,69,.78);color:var(--cream);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
}
.t360__loader span{display:flex;align-items:center;gap:12px}
.t360__loader i{
  width:16px;height:16px;border:2px solid rgba(246,243,237,.3);
  border-top-color:var(--bronze);border-radius:50%;
  animation:t360spin .9s linear infinite;
}
@keyframes t360spin{to{transform:rotate(360deg)}}

/* ---------- hotspots ---------- */
/* OJO: no tocar el position:absolute que le pone Pannellum a .pnlm-hotspot-base
   (si se cambia a relative, el hotspot se sale del flujo y ocupa todo el ancho). */
.pnlm-hotspot-base.ix-hs{width:auto;height:auto;margin:0;cursor:pointer}
.ix-hs-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 8px;white-space:nowrap;
  background:rgba(3,19,69,.72);
  border:1px solid rgba(246,243,237,.26);
  color:var(--cream);font-family:var(--f-sans);font-weight:400;
  font-size:12.5px;letter-spacing:.03em;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transform:translate(-50%,-50%);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.ix-hs:hover .ix-hs-pill{background:var(--bronze);border-color:var(--bronze)}
.ix-hs-dot{
  width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;
  border-radius:50%;background:var(--bronze);color:#fff;
}
.ix-hs:hover .ix-hs-dot{background:var(--navy-deep)}
.ix-hs-dot svg{width:13px;height:13px}
.ix-hs-body{
  position:absolute;left:50%;top:calc(50% + 22px);transform:translateX(-50%);
  width:250px;padding:16px 18px;
  background:rgba(3,19,69,.94);
  border:1px solid rgba(246,243,237,.2);
  color:rgba(246,243,237,.86);font-size:13px;line-height:1.6;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility .3s var(--ease);
}
.ix-hs-body b{
  display:block;margin-bottom:6px;font-family:var(--f-display);
  font-weight:400;font-size:17px;color:var(--cream);
}
.ix-hs:hover .ix-hs-body,.ix-hs.is-open .ix-hs-body{opacity:1;visibility:visible}
.ix-hs-scene .ix-hs-dot{background:var(--cream);color:var(--navy-deep)}

/* ---------- secciones de apoyo ---------- */
.t360__cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:54px;
}
.t360__card{border-top:1px solid var(--line);padding-top:24px}
.t360__card-ico{display:block;color:var(--bronze);margin-bottom:14px}
.t360__card h3{
  font-family:var(--f-display);font-weight:400;font-size:23px;
  line-height:1.25;color:var(--blue);margin-bottom:10px;
}
.t360__card p{font-size:15.5px;line-height:1.8}

.t360__facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line-light);margin-top:8px;
}
.t360__fact{background:var(--navy);padding:32px 26px}
.t360__fact b{
  display:block;font-family:var(--f-display);font-weight:300;font-size:40px;
  line-height:1;color:var(--cream);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}
.t360__fact span{
  display:block;margin-top:10px;font-size:14px;line-height:1.6;
  color:rgba(246,243,237,.74);
}

.t360__fallback img{width:100%;margin-bottom:12px}

/* ---------- teaser del home ---------- */
.t360teaser__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.t360teaser__media{position:relative;display:block;overflow:hidden}
/* height:auto es obligatorio: el atributo height del <img> le gana al aspect-ratio */
.t360teaser__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 1.1s var(--ease)}
.t360teaser__media:hover img{transform:scale(1.04)}
.t360teaser__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(3,19,69,.06),rgba(3,19,69,.42));
}
.t360teaser__play span{
  width:86px;height:86px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(246,243,237,.6);color:var(--cream);
  background:rgba(3,19,69,.28);backdrop-filter:blur(4px);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.t360teaser__media:hover .t360teaser__play span{background:var(--bronze);border-color:var(--bronze)}
.t360teaser__play svg{width:26px;height:26px}
.t360teaser__list{margin:26px 0 32px}
.t360teaser__list li{
  display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;
}
.t360teaser__list b{
  flex:0 0 62px;font-family:var(--f-display);font-weight:400;color:var(--bronze);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}

@media (max-width:1023px){
  .t360__cards{grid-template-columns:repeat(2,1fr);gap:26px}
  .t360__facts{grid-template-columns:repeat(2,1fr)}
  .t360teaser__grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:860px){
  .t360__stage{height:min(74vh,620px);min-height:400px}
  .t360__top{top:14px;left:14px;padding:11px 16px 13px;max-width:calc(100% - 118px)}
  .t360__alt{top:14px;right:14px;padding:7px 12px;font-size:11px}
  .t360__ctrl{right:14px;gap:7px}
  .t360__btn{width:38px;height:38px}
  .t360__btn svg{width:17px;height:17px}
  .t360__rail{bottom:14px;padding:8px;gap:8px}
  .t360__thumb{width:104px}
  .t360__thumb img{height:52px}
  .t360__cards{grid-template-columns:1fr}
  .t360__facts{grid-template-columns:1fr}
  .t360__fact{padding:26px 22px}
}

/* ---------- secciones de la página del recorrido ---------- */
.t360sec{padding:110px 0}
.t360sec--facts{padding:104px 0 112px}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
@media (max-width:860px){
  .t360sec{padding:66px 0}
  .t360sec--facts{padding:62px 0 70px}
}

/* El atributo hidden pierde contra display:grid/flex — hay que forzarlo. */
.t360 [hidden]{display:none!important}