/* ============================================================
   Vista Silvestre — Tour virtual 360°
   Extiende style.css (no lo reemplaza).
   ============================================================ */

.tour-page{ --tour-h: 100svh; }

/* ---------- Escenario a pantalla completa ---------- */
.tour-stage{
  position: relative;
  padding: 0;
  height: var(--tour-h);
  min-height: 540px;
  background: var(--bosque);
  overflow: hidden;
  isolation: isolate;
}
.tour-stage:fullscreen,
.tour-stage:-webkit-full-screen{ height: 100%; min-height: 0; }

.tour-viewer{ position:absolute; inset:0; z-index:1; }
.tour-viewer .pnlm-container{ background: var(--bosque); }

/* ---------- Portada / puerta de entrada ---------- */
.tour-gate{
  position:absolute; inset:0; z-index:6;
  display:grid; place-items:center;
  text-align:center;
  padding: calc(var(--promo-h, 0px) + clamp(6rem, 12vh, 8rem)) var(--gut) clamp(2rem, 6vh, 4rem);
  overflow:hidden;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.tour-gate.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.tour-gate-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.08);
  filter: saturate(1.05);
  animation: tour-drift 26s ease-in-out infinite alternate;
}
@keyframes tour-drift{
  from{ transform: scale(1.08) translate3d(-1.5%,0,0); }
  to  { transform: scale(1.14) translate3d(1.5%,0,0); }
}
.tour-gate-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(31,58,46,.42) 0%, rgba(31,58,46,.78) 62%, rgba(20,38,30,.94) 100%),
    linear-gradient(180deg, rgba(20,38,30,.55) 0%, transparent 35%);
}
.tour-gate-inner{ position:relative; max-width: 720px; }
.tour-gate-logo{
  width:72px; height:72px; margin:0 auto 1.25rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.tour-eyebrow{ color: var(--bronce-2); }
.tour-eyebrow::before{ background: var(--bronce-2); }
.tour-gate h1{
  color:#fff;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  text-shadow: 0 2px 26px rgba(0,0,0,.45);
  margin-bottom:.5em;
}
.tour-gate h1 .script{ color: var(--bronce-2); }
.tour-gate-lead{
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 56ch; margin: 0 auto 2rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
.tour-gate-lead strong{ color:#fff; font-weight:600; }
.tour-start{ box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.tour-start svg{ flex:none; }
.tour-gate-note{
  margin: 1.4rem 0 0;
  font-size: .8rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(255,255,255,.62);
}

/* ---------- Cargando ---------- */
.tour-loader{
  position:absolute; inset:0; z-index:5;
  display:grid; place-content:center; justify-items:center; gap:1.1rem;
  background: rgba(20,38,30,.82);
  backdrop-filter: blur(6px);
  color:#fff;
}
.tour-loader[hidden]{ display:none; }
.tour-loader p{ margin:0; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.tour-loader-ring{
  width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  border-top-color: var(--bronce-2);
  animation: tour-spin 1s linear infinite;
}
@keyframes tour-spin{ to{ transform: rotate(360deg); } }

/* ---------- Barra superior ---------- */
.tour-topbar{
  position:absolute; z-index:4;
  top: calc(var(--promo-h, 0px) + clamp(5.2rem, 7vh, 6rem));
  left: clamp(1rem, 3vw, 2.4rem);
  right: clamp(1rem, 3vw, 2.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  pointer-events:none;
  animation: tour-fade-in .8s var(--ease) both;
}
.tour-topbar[hidden]{ display:none; }
.tour-stage:fullscreen .tour-topbar,
.tour-stage:-webkit-full-screen .tour-topbar{ top: clamp(1rem, 3vh, 2rem); }
/* En pantalla completa el header del sitio ya no está en juego */
.tour-scene-label{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.7rem 1.15rem;
  background: rgba(20,38,30,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(212,165,116,.28);
  border-radius: 3px;
}
.tour-scene-index{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--bronce-2);
}
.tour-scene-label strong{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(1.05rem, 2vw, 1.5rem); line-height:1.1; color:#fff;
}
.tour-alt{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .95rem;
  background: rgba(20,38,30,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#fff; font-size:.8rem; font-weight:500; letter-spacing:.06em;
  white-space:nowrap;
}
.tour-alt svg{ color: var(--bronce-2); flex:none; }

/* ---------- Controles ---------- */
.tour-controls{
  position:absolute; z-index:4;
  right: clamp(1rem, 3vw, 2.4rem);
  top:50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap:.5rem;
  animation: tour-fade-in .8s .1s var(--ease) both;
}
.tour-controls[hidden]{ display:none; }
.tour-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:44px; height:44px; padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(20,38,30,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#fff; cursor:pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.tour-btn:hover{ background: var(--bronce); border-color: var(--bronce); color:#fff; }
.tour-btn:focus-visible{ outline:2px solid var(--bronce-2); outline-offset:3px; }
.tour-btn-txt{ display:none; }
#btn-rotate .ico-play{ display:none; }
#btn-rotate[aria-pressed="false"] .ico-pause{ display:none; }
#btn-rotate[aria-pressed="false"] .ico-play{ display:block; }

/* ---------- Pista de uso ---------- */
.tour-hint{
  position:absolute; z-index:4;
  left:50%; transform: translateX(-50%);
  bottom: clamp(9rem, 20vh, 12rem);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem 1.1rem;
  border-radius:999px;
  background: rgba(20,38,30,.5);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-size:.78rem; letter-spacing:.06em;
  white-space:nowrap;
  transition: opacity .6s var(--ease);
}
.tour-hint[hidden]{ display:none; }
.tour-hint.is-out{ opacity:0; }

/* ---------- Selector de puntos ---------- */
.tour-rail{
  position:absolute; z-index:4;
  left:50%; transform: translateX(-50%);
  bottom: clamp(1rem, 3vh, 2rem);
  display:flex; gap:.6rem;
  padding:.6rem;
  max-width: calc(100% - 2rem);
  overflow-x:auto;
  background: rgba(20,38,30,.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  scrollbar-width: none;
  animation: tour-fade-in .8s .2s var(--ease) both;
}
.tour-rail[hidden]{ display:none; }
.tour-rail::-webkit-scrollbar{ display:none; }
.tour-thumb{
  position:relative; flex:none;
  width: 132px; padding:0;
  border:1px solid transparent; border-radius:4px;
  background:none; cursor:pointer; overflow:hidden;
  text-align:left;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.tour-thumb img{
  width:100%; height:64px; object-fit:cover; display:block;
  opacity:.62; transition: opacity .25s var(--ease), transform .5s var(--ease);
}
.tour-thumb:hover img{ opacity:.95; transform: scale(1.06); }
.tour-thumb:hover{ border-color: rgba(212,165,116,.6); }
.tour-thumb:focus-visible{ outline:2px solid var(--bronce-2); outline-offset:2px; }
.tour-thumb.is-active{ border-color: var(--bronce-2); }
.tour-thumb.is-active img{ opacity:1; }
.tour-thumb-meta{
  position:absolute; inset:auto 0 0 0;
  display:flex; flex-direction:column; gap:.05rem;
  padding:.4rem .55rem;
  background: linear-gradient(180deg, transparent, rgba(15,30,24,.9) 55%);
  color:#fff;
}
.tour-thumb-meta b{ font-size:.72rem; letter-spacing:.1em; color: var(--bronce-2); }
.tour-thumb-meta em{
  font-style:normal; font-size:.72rem; line-height:1.25;
  color: rgba(255,255,255,.9);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@keyframes tour-fade-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; } }
.tour-controls{ animation-name: tour-fade-in-y; }
@keyframes tour-fade-in-y{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- Hotspots ---------- */
.pnlm-hotspot-base.vs-hs{
  width:auto; height:auto;
  margin:0; cursor:pointer;
}
.vs-hs-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .8rem .42rem .45rem;
  border-radius:999px;
  background: rgba(20,38,30,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(212,165,116,.45);
  color:#fff;
  font-family: var(--sans);
  font-size:.78rem; font-weight:500; letter-spacing:.03em;
  white-space:nowrap;
  box-shadow: 0 6px 22px rgba(0,0,0,.32);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.vs-hs:hover .vs-hs-pill{ background: rgba(184,136,74,.92); border-color: var(--bronce-2); }
.vs-hs-dot{
  position:relative; flex:none;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--bronce);
  color:#fff;
}
.vs-hs-dot svg{ width:12px; height:12px; }
.vs-hs-dot::after{
  content:""; position:absolute; inset:-5px;
  border-radius:50%; border:1px solid rgba(212,165,116,.75);
  animation: vs-ping 2.6s var(--ease) infinite;
}
@keyframes vs-ping{
  0%{ transform:scale(.7); opacity:.9; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ opacity:0; }
}
.vs-hs-body{
  position:absolute; left:50%; top: calc(100% + 10px);
  transform: translate(-50%, 6px);
  width: max-content; max-width: 260px;
  padding:.7rem .9rem;
  border-radius:4px;
  background: rgba(15,30,24,.94);
  border:1px solid rgba(212,165,116,.3);
  color: rgba(255,255,255,.86);
  font-family: var(--sans); font-size:.8rem; line-height:1.45;
  white-space: normal;
  display:flex; flex-direction:column; gap:.25rem;
  opacity:0; visibility:hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  pointer-events:none;
}
.vs-hs-body b{
  font-family: var(--serif); font-weight:500;
  font-size:1rem; line-height:1.2; color:#fff;
}
.vs-hs:hover .vs-hs-body,
.vs-hs.is-open .vs-hs-body{ opacity:1; visibility:visible; transform: translate(-50%, 0); }

/* Hotspot de cambio de escena */
.vs-hs-scene .vs-hs-pill{
  background: rgba(184,136,74,.86);
  border-color: rgba(255,255,255,.5);
}
.vs-hs-scene:hover .vs-hs-pill{ background:#fff; color: var(--bosque); }
.vs-hs-scene:hover .vs-hs-dot{ background: var(--bosque); }
.vs-hs-scene .vs-hs-dot{ background: rgba(255,255,255,.22); }

/* Pannellum: ocultamos su UI nativa, usamos la nuestra */
.pnlm-load-box, .pnlm-controls-container, .pnlm-panorama-info, .pnlm-orientation-button{ display:none !important; }
.pnlm-about-msg{ display:none !important; }
.pnlm-grab{ cursor: grab; }
.pnlm-grabbing{ cursor: grabbing; }

/* Fallback sin JS */
.tour-fallback{
  position:relative; z-index:7;
  max-width: 1000px; margin: 0 auto; padding: 7rem var(--gut) 3rem;
  color:#fff;
}
.tour-fallback img{ margin-bottom:1rem; border-radius:4px; }

/* ---------- Secciones de contenido ---------- */
.tour-read .section-head p{ font-size:1.08rem; }

.tour-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.tour-card{
  background:#fff;
  border:1px solid var(--linea);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tour-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-deep); }
.tour-card-ico{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:1.1rem;
  border-radius:50%;
  background: var(--arena-2);
  color: var(--bosque);
}
.tour-card h3{ font-size:1.3rem; margin-bottom:.5em; }
.tour-card p{ margin:0; color: var(--niebla-mute); font-size:.95rem; }

.tour-facts{ background: var(--bosque); color:#fff; }
.tour-facts-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2.4rem 1.5rem;
  text-align:center;
}
.tour-fact b{
  display:block;
  font-family: var(--serif); font-weight:400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--bronce-2);
  line-height:1;
  margin-bottom:.5rem;
}
.tour-fact span{
  font-size:.86rem; line-height:1.5;
  color: rgba(255,255,255,.7);
}

.tour-cta{ background: var(--arena); }
.tour-cta-inner{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.tour-cta h2 .script{ color: var(--bronce); }
.tour-cta p{ color: var(--niebla-mute); max-width: 52ch; }
.tour-cta .eyebrow{ color: var(--bronce); }
.tour-cta-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin: 2rem 0 1.6rem; }
.tour-cta .btn-ghost{ color: var(--bosque); border-color: rgba(31,58,46,.35); }
.tour-cta .btn-ghost:hover{ background: var(--bosque); color:#fff; border-color: var(--bosque); }
.tour-cta-links{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  list-style:none; margin:0; padding:0;
  font-size:.88rem;
}
.tour-cta-links a{ border-bottom:1px solid rgba(184,136,74,.4); padding-bottom:2px; }
.tour-note{
  background:#fff;
  border:1px solid var(--linea);
  border-left:3px solid var(--bronce);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-soft);
}
.tour-note h4{ margin-bottom:.9em; }
.tour-note p:last-child{ margin-bottom:0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .tour-cta-inner{ grid-template-columns: 1fr; }
}
/* ---------- Seguir explorando ---------- */
.tour-next{
  margin-top:.35rem;
  border-color: rgba(212,165,116,.5);
  background: rgba(184,136,74,.55);
}
.tour-next:hover{ background: var(--bronce); }
.tour-next svg{ animation: tour-bob 2.2s var(--ease) infinite; }
@keyframes tour-bob{ 0%,100%{ transform: translateY(-2px); } 50%{ transform: translateY(2px); } }

@media (max-width: 720px){
  /* El header fijo + la promo bar ya comen alto: el visor toma la pantalla completa
     y el botón de "seguir explorando" resuelve el scroll. */
  .tour-page{ --tour-h: 100svh; }
  .tour-topbar{
    flex-direction:row; align-items:center; gap:.5rem;
    top: calc(var(--promo-h, 0px) + 4.6rem);
    left:.75rem; right:.75rem;
  }
  .tour-scene-label{ padding:.45rem .75rem; min-width:0; background: rgba(20,38,30,.82); }
  .tour-alt{ background: rgba(20,38,30,.82); }
  .tour-scene-label strong{
    font-size:1rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .tour-scene-index{ font-size:.6rem; letter-spacing:.16em; }
  .tour-alt{ padding:.38rem .65rem; font-size:.7rem; flex:none; }
  .tour-alt svg{ width:13px; height:13px; }
  .tour-controls{
    top:auto; bottom: clamp(7.4rem, 17vh, 9.5rem);
    right: clamp(.75rem, 3vw, 1.5rem);
    transform:none;
    flex-direction:row;
  }
  .tour-btn{ width:40px; height:40px; }
  .tour-hint{ display:none; }
  .tour-thumb{ width: 112px; }
  .tour-thumb img{ height:56px; }
  .vs-hs-body{ max-width: 220px; }
  .vs-hs-body b{ font-size:.92rem; }
}

/* Muy estrecho: los rótulos se encimarían entre sí. Dejamos sólo el punto y
   el nombre aparece al tocarlo, dentro de la ficha. */
@media (max-width: 620px){
  .vs-hs-pill{
    padding:.28rem; gap:0;
    border-radius:999px;
  }
  .vs-hs-pill > span:last-child{ display:none; }
  .vs-hs-dot{ width:22px; height:22px; }
  .vs-hs-body{ top: calc(100% + 8px); }
}

@media (prefers-reduced-motion: reduce){
  .tour-gate-bg{ animation:none; }
  .tour-next svg{ animation:none; }
  .vs-hs-dot::after{ animation:none; opacity:0; }
  .tour-topbar, .tour-controls, .tour-rail{ animation:none; }
}