/* Ventana del tour 360 en Servicios (banda #tour-virtual-360). Misma caja que la imagen de banda (3:2), sin CLS:
   póster (miniatura) hasta que la banda entra en pantalla; entonces Pannellum se monta encima y funde. */
.tv-caja { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grid); isolation: isolate; }
.tv-ventana { position: absolute; inset: 0; cursor: grab; outline-offset: -4px; }
.tv-ventana:active { cursor: grabbing; }
.tv-ventana:focus-visible { outline: 3px solid #fff; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .55); }
.tv .tv-poster, .banda-img .tv-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; z-index: 0; }
.tv-pano { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .8s ease; touch-action: pan-y; }
.tv-pano.on { opacity: 1; }
.tv-pano .pnlm-container { background: transparent !important; touch-action: pan-y; }
.tv-pano .pnlm-load-box, .tv-pano .pnlm-about-msg, .tv-pano .pnlm-controls-container, .tv-pano .pnlm-panorama-info,
.tv-pano .pnlm-hot-spot-debug-indicator, .tv-pano .pnlm-compass, .tv-pano .pnlm-lbox { display: none !important; }
.tv-caja::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.tv-rotulo { position: absolute; left: 14px; bottom: 14px; z-index: 3; pointer-events: none; color: #fff; display: flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 9px; background: rgba(10, 10, 10, .62); border-radius: 999px;   /* pastilla oscura: se lee sobre zonas claras */
  font: 400 12px/1 "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.tv-rotulo .sello360 { --u: 0.6; }
.tv-abrir.btn { position: absolute; right: 14px; bottom: 14px; z-index: 4; padding: 10px 18px; font-size: var(--t-small);
  background: #fff; border-color: #fff; color: #0a0a0a; box-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.tv-abrir.btn:hover { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.tv-abrir.btn:focus-visible { outline: 3px solid #0a0a0a; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
@media (max-width: 479.98px) {
  .tv-rotulo { left: 10px; bottom: 62px; }
  .tv-abrir.btn { right: 10px; bottom: 10px; left: 10px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .tv-pano { transition: none; } }