/* tour.css — el escenario del tour 360.
   Todo lo de acá viaja con el tour embebido. Nada de datos comerciales. */

.escenario {
  position: relative;
  background: var(--escenario);
  overflow: hidden;
}

#viewer {
  width: 100%;
  height: 100%;
  background-color: var(--escenario);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Tira de ambientes ─────────────────────────────────────────────────────── */
.ambientes {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 40; max-width: calc(100% - 32px);
  display: flex; gap: 4px; padding: 4px;
  background: rgba(20, 23, 29, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ambientes::-webkit-scrollbar { display: none; }
.ambientes:empty { display: none; }

.amb {
  font-family: var(--display); font-weight: 600; font-size: .63rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  background: none; border: 0; border-radius: 999px;
  padding: 8px 15px; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.amb:hover { color: #fff; }
.amb[aria-current="true"] { background: var(--crema); color: var(--tinta); }
.amb:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }

/* ── Flechas de navegación ─────────────────────────────────────────────────── */
.ps-flecha {
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 100%; height: 100%;
  transition: transform .18s ease;
}
.ps-flecha svg { width: 100%; height: 100%; display: block; }
.ps-flecha .anillo {
  fill: rgba(20, 23, 29, .24);
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 1.6;
  transition: stroke .18s ease, fill .18s ease;
}
.ps-flecha .chevron {
  fill: none; stroke: #fff; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s ease;
}
.ps-flecha:hover { transform: scale(1.12); }
.ps-flecha:hover .anillo  { stroke: var(--terracota); fill: rgba(194, 94, 63, .2); }
.ps-flecha:hover .chevron { stroke: var(--terracota); }

/* ── Sello de marca ────────────────────────────────────────────────────────── */
.sello {
  position: absolute; z-index: 40; left: 16px;
  bottom: calc(var(--psv-navbar-alto) + 12px);
  display: flex; align-items: baseline; gap: 6px;
  background: rgba(20, 23, 29, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 3px;
  padding: 7px 12px; text-decoration: none;
}
.sello .s1, .sello .s2 {
  font-family: var(--display); font-weight: 600; font-size: .6rem; letter-spacing: .18em;
}
.sello .s1 { color: #fff; }
.sello .s2 { color: var(--terracota); }

/* ── Tour a pantalla completa (tour.html, el embebible) ────────────────────── */
body.solo-tour { overflow: hidden; }
body.solo-tour .escenario {
  position: fixed; inset: 0;
  height: 100dvh;   /* dvh: en móvil la barra del navegador cambia el alto */
}
body.solo-tour .sello { padding: 4px 9px; left: 10px; }
body.solo-tour .sello .s1,
body.solo-tour .sello .s2 { font-size: .55rem; }

/* En pantallas tactiles los botones tienen que ser tocables de verdad:
   44px es el minimo para no errar el dedo. */
@media (pointer: coarse) {
  .amb { min-height: 44px; padding: 0 16px; }
  .ambientes { padding: 3px; }
}

@media (max-width: 560px) {
  .ambientes { top: 10px; max-width: calc(100% - 20px); }
  .amb { font-size: .6rem; }
  .sello { left: 10px; padding: 6px 10px; }
}