/*!
 * Photo Sphere Viewer 5.15.1
 * @copyright 2014-2015 Jérémy Heleine
 * @copyright 2015-2026 Damien "Mistic" Sorel
 * @licence MIT (https://opensource.org/licenses/MIT)
 */
/* src/styles/index.scss */
.psv-container {
  --psv-core-loaded: true;
  container-name: psv-container;
  container-type: size;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background:
    radial-gradient(
      #fff 0%,
      #fdfdfd 16%,
      #fbfbfb 33%,
      #f8f8f8 49%,
      #efefef 66%,
      #dfdfdf 82%,
      #bfbfbf 100%);
  overflow: hidden;
}
.psv-container * {
  box-sizing: content-box;
}
.psv-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: opacity linear 100ms;
}
.psv-fullscreen-emulation {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999;
}
.psv-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 80;
}
.psv-loader {
  --psv-loader-border: 3px;
  --psv-loader-tickness: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  width: 150px;
  height: 150px;
}
.psv-loader-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(61, 61, 61, 0.5);
  z-index: -1;
}
.psv-loader-text {
  font: 600 16px sans-serif;
  text-align: center;
}
.psv-loader--undefined .psv-loader-canvas {
  animation: psv-loader 2s cubic-bezier(0.75, 0.25, 0.25, 0.75) infinite;
}
@keyframes psv-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.psv-navbar {
  display: flex;
  position: absolute;
  z-index: 90;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(61, 61, 61, 0.5);
  transition: bottom ease-in-out 0.1s;
  font: 16px sans-serif;
  cursor: default;
}
.psv-navbar--open {
  bottom: 0;
}
.psv-navbar,
.psv-navbar * {
  box-sizing: content-box;
}
.psv-button {
  flex: 0 0 auto;
  padding: 10px;
  position: relative;
  cursor: pointer;
  height: 20px;
  width: 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}
.psv-button--active {
  background: rgba(255, 255, 255, 0.2);
}
.psv-button--disabled {
  pointer-events: none;
  opacity: 0.5;
}
.psv-button-svg {
  width: 100%;
  transform: scale(1);
  transition: transform 200ms ease;
  vertical-align: initial;
}
.psv-button:not(.psv-button--disabled):focus-visible {
  outline: 2px solid #007cff;
  outline-offset: -2px;
}
.psv-container:not(.psv--is-touch) .psv-button--hover-scale:not(.psv-button--disabled):hover .psv-button-svg {
  transform: scale(1.2);
}
.psv-move-button + .psv-move-button {
  margin-left: -10px;
}
.psv-download-button {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
}
.psv-download-button::before,
.psv-download-button::after {
  display: none !important;
}
.psv-custom-button {
  width: auto;
  min-width: 20px;
}
.psv-custom-button--no-padding {
  padding: 0;
  height: 100%;
}
.psv-caption {
  flex: 1 1 100%;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-align: center;
  cursor: unset;
  padding: unset;
  height: unset;
  width: unset;
}
.psv-caption-content {
  display: inline-block;
  padding: 10px;
  white-space: nowrap;
}
.psv-zoom-range.psv-button {
  width: 80px;
  height: 1px;
  margin: 10px 0;
  padding: 9.5px 0;
  max-width: 600px;
}
.psv-zoom-range-line {
  position: relative;
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}
.psv-zoom-range-handle {
  position: absolute;
  border-radius: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1);
  transition: transform 0.3s ease;
}
.psv-zoom-range:not(.psv-button--disabled):hover .psv-zoom-range-line {
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
}
.psv-zoom-range:not(.psv-button--disabled):hover .psv-zoom-range-handle {
  transform: scale(1.3);
}
.psv-notification {
  position: absolute;
  z-index: 100;
  bottom: -40px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 0 2em;
  opacity: 0;
  transition-property: opacity, bottom;
  transition-timing-function: ease-in-out;
  transition-duration: 200ms;
}
.psv-notification-content {
  max-width: 50em;
  background: rgba(61, 61, 61, 0.8);
  border-radius: 4px;
  padding: 0.5em 1em;
  font: 14px sans-serif;
  color: rgb(255, 255, 255);
}
.psv-notification--visible {
  opacity: 100;
  bottom: 80px;
}
.psv-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 110;
  inset: 0;
  background:
    radial-gradient(
      #fff 0%,
      #fdfdfd 16%,
      #fbfbfb 33%,
      #f8f8f8 49%,
      #efefef 66%,
      #dfdfdf 82%,
      #bfbfbf 100%);
  opacity: 0.8;
  cursor: default;
}
.psv-overlay-image {
  width: 100%;
  text-align: center;
  color: rgb(48, 48, 48);
}
.psv-overlay-image svg {
  width: 50%;
}
@container psv-container (orientation: landscape) {
  .psv-overlay-image svg {
    width: 33%;
  }
}
.psv-overlay-title {
  color: black;
  margin-top: 1em;
  font: 30px sans-serif;
  text-align: center;
}
.psv-overlay-text {
  color: rgba(0, 0, 0, 0.8);
  font: 20px sans-serif;
  opacity: 0.8;
  text-align: center;
}
.psv-panel {
  position: absolute;
  z-index: 90;
  right: 0;
  height: 100%;
  width: 400px;
  max-width: calc(100% - 9px);
  background: rgba(10, 10, 10, 0.7);
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  transition-duration: 100ms;
  cursor: default;
  margin-left: 9px;
}
.psv--has-navbar .psv-panel {
  height: calc(100% - 40px);
}
.psv-panel-close-button {
  display: none;
  position: absolute;
  top: -1px;
  right: 0;
  width: 19.2px;
  height: 19.2px;
  padding: 6.4px;
  background: transparent;
  color: #fff;
  transition: background 300ms ease-in-out;
  cursor: pointer;
}
.psv-panel-close-button svg {
  transition: transform 300ms ease-in-out;
}
.psv-panel-close-button:hover {
  background: rgba(0, 0, 0, 0.9);
}
.psv-panel-close-button:hover svg {
  transform: scale(-1);
}
.psv-panel-resizer {
  display: none;
  position: absolute;
  top: 0;
  left: -9px;
  width: 9px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  cursor: col-resize;
}
.psv-panel-resizer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5.5px;
  margin-top: -14.5px;
  width: 1px;
  height: 1px;
  box-shadow:
    1px 0 #fff,
    3px 0px #fff,
    5px 0px #fff,
    1px 2px #fff,
    3px 2px #fff,
    5px 2px #fff,
    1px 4px #fff,
    3px 4px #fff,
    5px 4px #fff,
    1px 6px #fff,
    3px 6px #fff,
    5px 6px #fff,
    1px 8px #fff,
    3px 8px #fff,
    5px 8px #fff,
    1px 10px #fff,
    3px 10px #fff,
    5px 10px #fff,
    1px 12px #fff,
    3px 12px #fff,
    5px 12px #fff,
    1px 14px #fff,
    3px 14px #fff,
    5px 14px #fff,
    1px 16px #fff,
    3px 16px #fff,
    5px 16px #fff,
    1px 18px #fff,
    3px 18px #fff,
    5px 18px #fff,
    1px 20px #fff,
    3px 20px #fff,
    5px 20px #fff,
    1px 22px #fff,
    3px 22px #fff,
    5px 22px #fff,
    1px 24px #fff,
    3px 24px #fff,
    5px 24px #fff,
    1px 26px #fff,
    3px 26px #fff,
    5px 26px #fff,
    1px 28px #fff,
    3px 28px #fff,
    5px 28px #fff;
  background: transparent;
}
.psv-panel-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: rgb(220, 220, 220);
  font: 16px sans-serif;
  overflow: auto;
}
.psv-panel-content:not(.psv-panel-content--no-margin) {
  padding: 1em;
}
.psv-panel-content--no-interaction {
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}
.psv-panel--open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-duration: 0.2s;
}
.psv-panel--open .psv-panel-close-button,
.psv-panel--open .psv-panel-resizer {
  display: block;
}
@container psv-container (max-width: 400px) {
  .psv-panel {
    width: 100% !important;
    max-width: none;
  }
  .psv-panel-resizer {
    display: none !important;
  }
}
.psv-panel-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.psv-panel-menu-title {
  flex: none;
  display: flex;
  align-items: center;
  font: 24px sans-serif;
  margin: 24px 12px;
}
.psv-panel-menu-title svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.psv-panel-menu-list {
  flex: 1 1;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.psv-panel-menu-item {
  min-height: 1.5em;
  padding: 0.5em 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background 0.1s ease-in-out;
}
.psv-panel-menu-item--active {
  outline: 1px solid currentcolor;
  outline-offset: -1px;
}
.psv-panel-menu-item-icon {
  flex: none;
  height: 1.5em;
  width: 1.5em;
  margin-right: 0.5em;
}
.psv-panel-menu-item-icon img {
  max-width: 100%;
  max-height: 100%;
}
.psv-panel-menu-item-icon {
}
.psv-panel-menu-item-icon svg {
  width: 100%;
  height: 100%;
}
.psv-panel-menu-item:focus-visible {
  outline: 2px solid #007cff;
  outline-offset: -2px;
}
.psv-panel-menu--stripped .psv-panel-menu-item:hover {
  background: rgba(255, 255, 255, 0.2);
}
.psv-panel-menu--stripped .psv-panel-menu-item:nth-child(odd),
.psv-panel-menu--stripped .psv-panel-menu-item:nth-child(odd)::before {
  background: rgba(255, 255, 255, 0.1);
}
.psv-panel-menu--stripped .psv-panel-menu-item:nth-child(even),
.psv-panel-menu--stripped .psv-panel-menu-item:nth-child(even)::before {
  background: transparent;
}
.psv-container:not(.psv--is-touch) .psv-panel-menu-item:hover {
  background: rgba(255, 255, 255, 0.2);
}
.psv-tooltip {
  position: absolute;
  z-index: 50;
  box-sizing: border-box;
  max-width: 200px;
  background: rgba(61, 61, 61, 0.8);
  border-radius: 4px;
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  transition-duration: 100ms;
  cursor: default;
}
.psv-tooltip-content {
  color: rgb(255, 255, 255);
  font: 14px sans-serif;
  text-shadow: 0 1px #000;
  padding: 0.5em 1em;
}
.psv-tooltip-arrow {
  position: absolute;
  height: 0;
  width: 0;
  border: 7px solid transparent;
}
.psv-tooltip--top-left,
.psv-tooltip--top-center,
.psv-tooltip--top-right {
  transform: translate3d(0, 5px, 0);
}
.psv-tooltip--top-left .psv-tooltip-arrow,
.psv-tooltip--top-center .psv-tooltip-arrow,
.psv-tooltip--top-right .psv-tooltip-arrow {
  border-top-color: rgba(61, 61, 61, 0.8);
}
.psv-tooltip--bottom-left,
.psv-tooltip--bottom-center,
.psv-tooltip--bottom-right {
  transform: translate3d(0, -5px, 0);
}
.psv-tooltip--bottom-left .psv-tooltip-arrow,
.psv-tooltip--bottom-center .psv-tooltip-arrow,
.psv-tooltip--bottom-right .psv-tooltip-arrow {
  border-bottom-color: rgba(61, 61, 61, 0.8);
}
.psv-tooltip--left-top,
.psv-tooltip--center-left,
.psv-tooltip--left-bottom {
  transform: translate3d(5px, 0, 0);
}
.psv-tooltip--left-top .psv-tooltip-arrow,
.psv-tooltip--center-left .psv-tooltip-arrow,
.psv-tooltip--left-bottom .psv-tooltip-arrow {
  border-left-color: rgba(61, 61, 61, 0.8);
}
.psv-tooltip--right-top,
.psv-tooltip--center-right,
.psv-tooltip--right-bottom {
  transform: translate3d(-5px, 0, 0);
}
.psv-tooltip--right-top .psv-tooltip-arrow,
.psv-tooltip--center-right .psv-tooltip-arrow,
.psv-tooltip--right-bottom .psv-tooltip-arrow {
  border-right-color: rgba(61, 61, 61, 0.8);
}
.psv-tooltip--left-top,
.psv-tooltip--top-left {
  box-shadow: -3px -3px 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--top-center {
  box-shadow: 0 -3px 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--right-top,
.psv-tooltip--top-right {
  box-shadow: 3px -3px 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--left-bottom,
.psv-tooltip--bottom-left {
  box-shadow: -3px 3px 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--bottom-center {
  box-shadow: 0 3px 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--right-bottom,
.psv-tooltip--bottom-right {
  box-shadow: 3px 3px 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--center-left {
  box-shadow: -3px 0 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--center-right {
  box-shadow: 3px 0 0 rgba(90, 90, 90, 0.7);
}
.psv-tooltip--visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/*!
 * Photo Sphere Viewer / Markers Plugin 5.15.1
 * @copyright 2015-2026 Damien "Mistic" Sorel
 * @licence MIT (https://opensource.org/licenses/MIT)
 */
/* src/styles/index.scss */
.psv-container {
  --psv-markers-plugin-loaded: true;
}
.psv-markers {
  pointer-events: none;
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.psv-markers-svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.psv-markers-css3d-container {
  position: absolute;
  z-index: 21;
}
.psv-marker {
  display: none;
  pointer-events: auto;
}
.psv-marker--normal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  overflow: visible;
  background-size: contain;
  background-repeat: no-repeat;
}
.psv-marker--css3d {
  display: block;
}
.psv-marker--transparent {
  display: block;
  opacity: 0;
}
.psv-marker--visible {
  display: block;
}
.psv-marker--has-tooltip,
.psv-marker--has-content {
  cursor: pointer;
}
/*
 * EL ORDEN IMPORTA. El navegador aplica lo importado en este orden, y ante dos reglas igual de específicas gana la
 * que viene después. Por eso `base.css` (el tour de siempre) va **antes** que las hojas que lo ajustan: el tema de
 * cada web, el teléfono y lo que lleva a consultar. Antes ese cuerpo estaba acá mismo, debajo de los `@import`, y le
 * ganaba a todos los ajustes (el verde de WhatsApp y los botones casi opacos no se veían).
 */
/*
 * LA TRANSICIÓN ENTRE AMBIENTES (sin "cargando")
 * ==============================================
 * Estilos NUEVOS del movimiento entre ambientes y de las medidas de la barra.
 * Clases nuevas, prefijo `t360-mov-`. No sobreescribe nada de `tour360.css`: esta
 * hoja se importa ANTES que la principal.
 *
 * El cartel de "cargando" (`.t360-carga`) queda solo para la primera entrada al
 * tour, con el logo. Entre ambientes se ve la portada al instante y, si la imagen
 * completa tarda más de ~1,2 s, esta barrita fina arriba: sin texto.
 */

/* ---- La barrita de avance (solo si un cambio de ambiente tarda) ---------------- */
.t360-mov-progreso {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.1);
}
.t360-mov-progreso > span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--t360-i-acento, #fff);
  transition: transform 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .t360-mov-progreso > span {
    transition: none;
  }
}

/* ---- Las medidas aproximadas, en la barra de arriba -------------------------------- */
/* "Cocina · 2 de 5 · ≈ 12 m²": más liviana que el nombre, nunca lo empuja afuera de la barra. */
.t360-mov-medidas {
  flex: none;
  margin-left: 0.5em;
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.78;
}

/*
 * EL PLANO DEL VISOR (2D)
 * =======================
 * Un plano de arquitecto sobre vidrio oscuro (o sobre papel, en el estudio): los
 * pisos tintados por tipo, **muros rectos con espesor** y esquinas en inglete, las
 * puertas como un paso en el muro con el arco de su hoja y los nombres con los m²
 * aproximados en cifras tabulares. Nada redondeado en el dibujo, sin brillos ni
 * sombras: lo único que se destaca es el ambiente donde se está.
 *
 * Esta hoja se importa ANTES que `tour360.css`, así que para pisar las reglas
 * viejas (`.t360-plano__*`, `.t360-mini*`) cada selector lleva una clase más
 * (`.t360-plano …` / `.t360 …`). Sirve igual para el tema claro (estudio) y para el
 * oscuro (sobre la foto).
 */

.t360-plano {
  /* El color de los muros y de las hojas de las puertas: tinta sobre papel, o trazo claro sobre vidrio. */
  --t360-plano-muro: #1f2430;
}
.t360-plano--oscuro {
  --t360-plano-muro: #e7eaf0;
}

/* ---- Los pisos ------------------------------------------------------------------------ */
.t360-plano .t360-plano__amb :is(rect, path) {
  fill: var(--t360-tipo);
  /* El color orienta, no grita: los límites los marcan los muros, no un borde de color. */
  fill-opacity: calc(var(--t360-plano-opacidad) * 0.8);
  stroke: none;
  transition: fill-opacity 0.2s ease;
}
.t360-plano .t360-plano__amb.es-navegable:hover :is(rect, path) {
  fill-opacity: calc(var(--t360-plano-opacidad) + 0.16);
}
.t360-plano .t360-plano__amb.es-navegable:focus-visible :is(rect, path) {
  stroke: var(--t360-plano-texto);
  stroke-width: 0.14;
}
.t360-plano .t360-plano__amb.es-actual :is(rect, path) {
  fill: var(--t360-i-acento);
  fill-opacity: 0.62;
}

/* ---- Los muros y las puertas ---------------------------------------------------------- */
.t360-plano .t360-plano__muro {
  fill: none;
  stroke: var(--t360-plano-muro);
  stroke-opacity: 0.94;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-linecap: butt;
  pointer-events: none;
}
/* La hoja de la puerta y su arco de giro: más fina que el muro, es un dato y no una pared. */
.t360-plano .t360-plano__hoja {
  fill: none;
  stroke: var(--t360-plano-muro);
  stroke-opacity: 0.55;
  stroke-width: 0.07;
  stroke-linecap: butt;
  pointer-events: none;
}

/* El recorrido de una corrediza y el eje de un portón: punteados; los postes del portón, macizos. */
.t360-plano .t360-plano__hoja.es-punteada {
  stroke-dasharray: 0.3 0.22;
}
.t360-plano .t360-plano__poste {
  fill: var(--t360-plano-muro);
  fill-opacity: 0.85;
  stroke: none;
  pointer-events: none;
}

/* ---- La silueta del piso de abajo y las escaleras ------------------------------------- */
/* Apagada y atrás de todo: sirve para ubicar el piso de arriba, no para leerse. */
.t360-plano .t360-plano__fantasma {
  fill: var(--t360-plano-muro);
  fill-opacity: 0.05;
  stroke: var(--t360-plano-muro);
  stroke-opacity: 0.3;
  stroke-width: 0.12;
  stroke-dasharray: 0.5 0.35;
  stroke-linejoin: miter;
  pointer-events: none;
}
/* Una escalera: su huella, los escalones y la flecha de hacia dónde se sube (o, en el piso de arriba, se baja). */
.t360-plano .t360-plano__escalera rect {
  fill: var(--t360-plano-muro);
  fill-opacity: 0.08;
  stroke: var(--t360-plano-muro);
  stroke-opacity: 0.75;
  stroke-width: 0.09;
  pointer-events: none;
}
.t360-plano .t360-plano__escalera .t360-plano__peldanos {
  fill: none;
  stroke: var(--t360-plano-muro);
  stroke-opacity: 0.6;
  stroke-width: 0.06;
  pointer-events: none;
}
.t360-plano .t360-plano__escalera .t360-plano__flecha-escalera {
  fill: none;
  stroke: var(--t360-plano-muro);
  stroke-opacity: 0.85;
  stroke-width: 0.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.t360-plano .t360-plano__escalera .t360-plano__divisiones {
  fill: none;
  stroke: var(--t360-plano-muro);
  stroke-opacity: 0.8;
  stroke-width: 0.09;
  pointer-events: none;
}
.t360-plano .t360-plano__escalera.es-baja .t360-plano__divisiones {
  stroke-opacity: 0.5;
}
.t360-plano .t360-plano__escalera.es-baja rect {
  fill-opacity: 0.04;
  stroke-opacity: 0.5;
  stroke-dasharray: 0.4 0.25;
}
.t360-plano .t360-plano__escalera.es-baja .t360-plano__peldanos {
  stroke-opacity: 0.35;
}

/* ---- Los nombres y los m² ----------------------------------------------------------- */
.t360-plano .t360-plano__nombre {
  font-weight: 600;
  letter-spacing: 0;
  stroke-width: 0.13;
}
.t360-plano .t360-plano__nombre .t360-plano__detalle {
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  opacity: 0.74;
}
.t360-plano .t360-plano__nombre.es-actual .t360-plano__detalle {
  opacity: 0.9;
}

/* ---- Las cámaras --------------------------------------------------------------------- */
.t360-plano .t360-plano__punto {
  stroke-width: 0.08;
}
.t360-plano .t360-plano__camara.es-actual .t360-plano__punto {
  fill: #fff;
  stroke: var(--t360-i-acento);
  stroke-width: 0.22;
}

/* ---- El cono: se apaga hacia afuera (el relleno lo pone el degradado del componente) ---- */
.t360-plano .t360-plano__cono {
  stroke: var(--t360-plano-cono-borde);
  stroke-opacity: 0.5;
  stroke-width: 0.06;
}

/* ---- La leyenda ----------------------------------------------------------------------- */
.t360-plano .t360-plano__leyenda {
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* ---- La tarjeta del minimapa ------------------------------------------------------------ */
/* Cantos de instrumento, no de burbuja: radio chico y un filo claro en vez de una sombra. */
.t360 .t360-mini {
  width: 248px;
  padding: 10px 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.t360 .t360-mini__cabeza {
  margin: 0 0 6px 2px;
}
/* Un título es un título: en minúscula normal, sin versalitas ni tracking. */
.t360 .t360-mini__titulo {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.88;
}
.t360 .t360-mini .t360-plano__svg {
  max-height: 184px;
}
.t360 .t360-mini__accion {
  border-radius: 6px;
}
/* Las plantas, como un selector segmentado de cantos rectos. */
.t360 .t360-mini__plantas {
  padding: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.t360 .t360-mini__planta {
  border-radius: 4px;
}
.t360 .t360-mini__planta.es-actual {
  background: #fff;
  color: #12141a;
}

/* El plano a lo grande: más aire y más alto para leer los nombres y los m². */
.t360 .t360-mini--grande {
  width: min(880px, 100%);
  padding: 16px 18px 12px;
  border-radius: 12px;
}
.t360 .t360-mini--grande .t360-mini__titulo {
  font-size: 13px;
}
.t360 .t360-mini--grande .t360-plano__svg {
  max-height: min(68vh, 660px);
  max-height: min(68svh, 660px);
}

/* Arriba del plano grande: 2D | 3D y, en 2D, las plantas, en una sola fila. */
.t360 .t360-mini__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
.t360 .t360-mini__controles > .t360-mini__plantas {
  margin-bottom: 8px;
}
.t360 .t360-mini__accion:disabled {
  opacity: 0.45;
  cursor: progress;
}

/* Mientras llega el código de la casa en 3D: el mismo alto que ella, así el plano no salta. */
.t360 .t360-mini__casa-espera {
  height: min(62svh, 560px);
}
.t360 .t360-mini__casa-espera.es-compacta {
  height: 176px;
}

/*
 * LA VISTA DE CASA (3D)
 * =====================
 * Estilos NUEVOS de la maqueta en 3D del plano. Clases nuevas, prefijo
 * `t360-casa-`. No sobreescribe nada de `tour360.css`: esta hoja se importa ANTES
 * que la principal. Dueño: la tarea "visor: plano y vista de casa".
 *
 * Es un plano de arquitecto, no un juguete: cantos rectos, paredes claras con dos
 * tonos según la normal, tapa fina, pisos con el color del tipo apagado y nada de
 * degradados. Por defecto va sobre el vidrio oscuro del minimapa; con la clase
 * `t360-casa-claro` se puede poner sobre fondo claro (el estudio).
 *
 * Se personaliza con las variables del paquete (`--t360-acento`, `--t360-fondo`,
 * `--t360-texto`, `--t360-fuente`) y con estas, propias de la vista:
 *
 *   --t360-casa-pared-luz      el tono claro de las paredes (cara que mira a la luz).
 *   --t360-casa-pared-sombra   el tono oscuro (cara que le da la espalda).
 *   --t360-casa-piso-base      el color contra el que se apaga el del tipo de ambiente.
 */

/* ---- La caja y las variables -------------------------------------------------------- */

.t360-casa-raiz {
  --t360-casa-acento: var(--t360-i-acento, var(--t360-acento, #3d7bf7));
  --t360-casa-sobre-acento: var(--t360-i-sobre-acento, var(--t360-sobre-acento, #fff));
  --t360-casa-fondo: var(--t360-i-fondo, var(--t360-fondo, #0b0d12));
  --t360-casa-texto: var(--t360-i-texto, var(--t360-texto, #fff));
  --t360-casa-fuente: var(--t360-i-fuente, var(--t360-fuente, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif));

  --t360-casa-piso-base: #1b1e29;
  --t360-casa-pared-luz: #f2f1ee;
  --t360-casa-pared-sombra: #8d92a1;
  --t360-casa-pared-linea: rgba(12, 14, 22, 0.4);
  --t360-casa-tapa: #ffffff;
  /* Las aberturas: madera de las hojas, metal del portón, vidrio con un tinte violeta (nada de celeste) y latón. */
  --t360-casa-madera-luz: #d2ad7e;
  --t360-casa-madera-sombra: #7b5a3b;
  --t360-casa-metal-luz: #8c92a4;
  --t360-casa-metal-sombra: #343848;
  --t360-casa-vidrio-hueco: rgba(176, 170, 224, 0.42);
  --t360-casa-laton: #e3cf94;
  --t360-casa-sombra-suelo: rgba(0, 0, 0, 0.42);
  --t360-casa-halo: rgba(11, 13, 18, 0.72);
  --t360-casa-leyenda: rgba(255, 255, 255, 0.66);
  --t360-casa-vidrio: rgba(255, 255, 255, 0.1);
  --t360-casa-vidrio-borde: rgba(255, 255, 255, 0.2);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  font-family: var(--t360-casa-fuente);
  color: var(--t360-casa-texto);
  box-sizing: border-box;
}
.t360-casa-raiz *,
.t360-casa-raiz *::before,
.t360-casa-raiz *::after {
  box-sizing: border-box;
}

/* Sobre fondo claro (el estudio): las mismas piezas, con los tonos corridos. */
.t360-casa-raiz.t360-casa-claro {
  --t360-casa-texto: #1f2430;
  --t360-casa-piso-base: #eceef3;
  --t360-casa-pared-luz: #ffffff;
  --t360-casa-pared-sombra: #a9afbf;
  --t360-casa-pared-linea: rgba(31, 36, 48, 0.4);
  --t360-casa-metal-luz: #a1a7b8;
  --t360-casa-metal-sombra: #50556a;
  --t360-casa-sombra-suelo: rgba(31, 36, 48, 0.2);
  --t360-casa-tapa: #ffffff;
  --t360-casa-hueco: rgba(255, 255, 255, 0.96);
  --t360-casa-halo: rgba(255, 255, 255, 0.75);
  --t360-casa-leyenda: rgba(31, 36, 48, 0.62);
  --t360-casa-vidrio: rgba(31, 36, 48, 0.07);
  --t360-casa-vidrio-borde: rgba(31, 36, 48, 0.18);
}

/* ---- La tarjeta chica del minimapa: la casa sin botones y con un alto propio --------------- */

.t360-casa-raiz.es-compacta .t360-casa-escena {
  min-height: 0;
  height: 176px;
}
.t360-casa-raiz.es-compacta .t360-casa-leyenda {
  font-size: 10px;
}

/* ---- La escena ------------------------------------------------------------------------ */

.t360-casa-escena {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  height: min(62vh, 560px);
  height: min(62svh, 560px);
}
.t360-casa-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Arrastrar gira la maqueta: el navegador no tiene que scrollear ni hacer zoom de página. */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.t360-casa-svg:active {
  cursor: grabbing;
}
.t360-casa-svg.es-sobre-ambiente {
  cursor: pointer;
}

/* ---- Las caras ------------------------------------------------------------------------ */

.t360-casa-caras {
  pointer-events: none;
}

/* La sombra de la casa sobre el suelo: la huella de la planta baja, desenfocada. Le da peso sin pintar nada más. */
.t360-casa-sombra polygon {
  fill: var(--t360-casa-sombra-suelo);
  stroke: none;
}

/* El piso: el color del tipo, apagado contra el fondo, con una línea fina. Sin degradados. */
.t360-casa-piso {
  /* Sin `color-mix`, el mismo efecto con la transparencia. */
  fill: var(--t360-tipo, #a4a9b4);
  fill-opacity: 0.5;
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 0.75px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.t360-casa-piso.es-sobre {
  fill-opacity: 0.8;
}
@supports (fill: color-mix(in srgb, red 50%, blue)) {
  .t360-casa-piso {
    fill: color-mix(in srgb, var(--t360-tipo, #a4a9b4) 50%, var(--t360-casa-piso-base));
    fill-opacity: 1;
  }
  .t360-casa-piso.es-sobre {
    fill: color-mix(in srgb, var(--t360-tipo, #a4a9b4) 78%, var(--t360-casa-piso-base));
  }
}
.t360-casa-piso.es-actual {
  fill: var(--t360-casa-acento);
  fill-opacity: 1;
}

/*
 * La pared: dos tonos según la normal. `--t360-casa-luz` (0 a 1) lo pone el componente y
 * mezcla el tono claro con el oscuro. Primero un gris liso por si el navegador no sabe
 * de `color-mix`. Líneas finas: el muro se lee por sus tonos, no por su contorno.
 */
.t360-casa-pared {
  fill: #bcc0cd;
  fill: color-mix(in srgb, var(--t360-casa-pared-luz) calc(var(--t360-casa-luz, 0.6) * 100%), var(--t360-casa-pared-sombra));
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 0.75px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* La tapa: la tira fina y clara arriba de la pared. El borde del mismo color tapa las costuras. */
.t360-casa-tapa {
  fill: var(--t360-casa-tapa);
  stroke: var(--t360-casa-tapa);
  stroke-width: 0.75px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.t360-casa-tapa.es-actual {
  fill: color-mix(in srgb, var(--t360-casa-acento) 22%, var(--t360-casa-tapa));
  stroke: color-mix(in srgb, var(--t360-casa-acento) 22%, var(--t360-casa-tapa));
}

/*
 * La escalera: la pisada es clara (mira para arriba) y la contrahuella toma el tono de una pared según la luz.
 * El agujero del piso de arriba lo hace el propio piso (par-impar): acá no hay nada que pintar.
 */
.t360-casa-escalon {
  fill: var(--t360-casa-tapa);
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 0.75px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.t360-casa-lateral,
.t360-casa-contrahuella,
.t360-casa-losa {
  fill: #bcc0cd;
  fill: color-mix(in srgb, var(--t360-casa-pared-luz) calc(var(--t360-casa-luz, 0.6) * 100%), var(--t360-casa-pared-sombra));
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 0.75px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
/* El canto de la losa, un poco más oscuro que un muro: se lee como el espesor del piso de arriba. */
.t360-casa-losa {
  fill: color-mix(in srgb, var(--t360-casa-pared-sombra) 38%, color-mix(in srgb, var(--t360-casa-pared-luz) calc(var(--t360-casa-luz, 0.6) * 100%), var(--t360-casa-pared-sombra)));
}

/*
 * Lo de afuera no se ve como otro ambiente de adentro. El jardín: pasto y un cerco bajo de piedra. La terraza: una
 * baranda de vidrio. La galería: un piso de tablas con columnas y un techo de vigas de madera.
 */
.t360-casa-piso.es-jardin {
  fill: color-mix(in srgb, var(--t360-tipo, #5fbf6e) 64%, #1d3b27);
}
.t360-casa-piso.es-vereda {
  fill: color-mix(in srgb, var(--t360-tipo, #a9a49b) 70%, #4a4740);
}
.t360-casa-piso.es-galeria {
  fill: color-mix(in srgb, var(--t360-tipo, #d1b384) 72%, #3a2e20);
}
.t360-casa-pared.es-jardin {
  fill: color-mix(in srgb, #ddd6c6 calc(var(--t360-casa-luz, 0.6) * 100%), #8a8272);
}
.t360-casa-tapa.es-jardin {
  fill: #efeadf;
  stroke: #efeadf;
}
.t360-casa-pared.es-terraza {
  fill: var(--t360-casa-vidrio-hueco);
  stroke: var(--t360-casa-pared-linea);
}
.t360-casa-tapa.es-terraza {
  fill: #e9e6df;
  stroke: #e9e6df;
}
.t360-casa-lateral.es-terraza {
  fill: color-mix(in srgb, #dedbd4 calc(var(--t360-casa-luz, 0.6) * 100%), #7d7f8c);
}
.t360-casa-lateral.es-galeria {
  fill: color-mix(in srgb, var(--t360-casa-madera-luz) calc(var(--t360-casa-luz, 0.6) * 100%), var(--t360-casa-madera-sombra));
}
.t360-casa-tapa.es-galeria {
  fill: var(--t360-casa-madera-luz);
  stroke: var(--t360-casa-madera-luz);
}
/* En la vista de plano, lo de los pisos de abajo es solo una silueta: apagado. */
.t360-casa-raiz.es-planta .es-debajo {
  opacity: 0.38;
}

/*
 * Las aberturas. Cada clase se dibuja distinta (ver `aberturas3d.ts`): el hueco ya está recortado en la pared, así que
 * por una puerta, un paso o una ventana se ve lo que hay del otro lado.
 */
.t360-casa-ab-hoja {
  fill: #a98558;
  fill: color-mix(in srgb, var(--t360-casa-madera-luz) calc(var(--t360-casa-luz, 0.6) * 100%), var(--t360-casa-madera-sombra));
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 0.75px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.t360-casa-ab-porton {
  fill: #5d6274;
  fill: color-mix(in srgb, var(--t360-casa-metal-luz) calc(var(--t360-casa-luz, 0.6) * 100%), var(--t360-casa-metal-sombra));
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
}
.t360-casa-ab-vidrio {
  fill: var(--t360-casa-vidrio-hueco);
  stroke: none;
}
.t360-casa-ab-marco {
  fill: none;
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 1px;
  stroke-linejoin: miter;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
/* El paso libre es solo su marco: un poco más marcado, para que se lea como vano. */
.t360-casa-abertura.es-paso .t360-casa-ab-marco {
  stroke-width: 1.6px;
}
.t360-casa-ab-panel {
  fill: none;
  stroke: rgba(0, 0, 0, 0.26);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
}
.t360-casa-ab-liston {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.9px;
  vector-effect: non-scaling-stroke;
}
.t360-casa-ab-riel {
  fill: none;
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 1.3px;
  vector-effect: non-scaling-stroke;
}
.t360-casa-ab-tirador {
  fill: var(--t360-casa-laton);
  stroke: none;
}
.t360-casa-ab-antepecho {
  fill: var(--t360-casa-tapa);
  stroke: var(--t360-casa-pared-linea);
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
}

/* ---- El cono y las cámaras (sobre el piso) ------------------------------------------------- */

.t360-casa-cono {
  fill: var(--t360-casa-acento);
  fill-opacity: 0.46;
  stroke: #fff;
  stroke-opacity: 0.85;
  stroke-width: 1px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
/*
 * Un punto de vista: un palo con un globo, como un pin de mapa (el pie en el piso, con su sombrita, y el globo arriba).
 * El de la escena actual es más grande y lleva el acento.
 */
.t360-casa-punto__pie {
  fill: var(--t360-casa-sombra-suelo);
  stroke: none;
}
.t360-casa-punto__palo {
  fill: none;
  stroke: var(--t360-casa-texto);
  stroke-opacity: 0.9;
  stroke-width: 1.4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.t360-casa-punto__globo {
  fill: var(--t360-casa-texto);
  stroke: var(--t360-casa-fondo);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.t360-casa-punto.es-actual .t360-casa-punto__palo {
  stroke: var(--t360-casa-acento);
  stroke-opacity: 1;
  stroke-width: 2px;
}
.t360-casa-punto.es-actual .t360-casa-punto__globo {
  fill: #fff;
  stroke: var(--t360-casa-acento);
  stroke-width: 3px;
}

/* ---- Los nombres y los m² ----------------------------------------------------------------- */

.t360-casa-etiquetas {
  pointer-events: none;
}
.t360-casa-etiqueta {
  fill: var(--t360-casa-texto);
  stroke: var(--t360-casa-halo);
  stroke-width: 0.1;
  stroke-linejoin: round;
  paint-order: stroke fill;
  font-family: var(--t360-casa-fuente);
  font-weight: 600;
  letter-spacing: 0.01em;
  user-select: none;
  -webkit-user-select: none;
}
.t360-casa-etiqueta .t360-casa-detalle {
  font-weight: 500;
  opacity: 0.8;
}
.t360-casa-etiqueta.es-actual {
  fill: var(--t360-casa-sobre-acento);
  stroke: none;
}

/* ---- Las zonas que se pueden elegir (teclado y lectores de pantalla) ----------------------------- */

/* Los clics del mouse y los toques los resuelve el SVG mirando qué hay adelante; estas
   zonas son para el teclado, el foco y los lectores de pantalla. */
.t360-casa-toques {
  pointer-events: none;
}
.t360-casa-toque {
  outline: none;
}
.t360-casa-foco {
  fill: none;
  stroke: transparent;
  stroke-width: 3px;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.t360-casa-toque:focus-visible .t360-casa-foco {
  stroke: var(--t360-casa-acento);
}

/* ---- Los botones de la vista --------------------------------------------------------------- */

.t360-casa-controles {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 12px);
  padding: 4px;
  border-radius: 8px;
  background: var(--t360-casa-vidrio);
  border: 1px solid var(--t360-casa-vidrio-borde);
}
.t360-casa-boton {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* El botón se ve de 34 px pero se toca como uno de 42. */
.t360-casa-boton::after {
  content: '';
  position: absolute;
  inset: -4px;
}
.t360-casa-boton:hover {
  background: var(--t360-casa-vidrio-borde);
}
.t360-casa-boton:focus-visible {
  outline: 2px solid var(--t360-casa-acento);
  outline-offset: 1px;
}
.t360-casa-boton svg {
  display: block;
}

/*
 * La pila de pisos, arriba a la izquierda: un botón por piso, uno sobre otro con el más alto arriba (como el edificio),
 * cada uno con el ícono de la pila con su losa llena. En 3D apagado = ese piso no se dibuja (la casa no se corre); en
 * el plano visto desde arriba se elige uno solo.
 */
.t360-casa-pisos {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 4px;
  max-width: calc(100% - 60px);
  padding: 4px;
  border-radius: 10px;
  background: var(--t360-casa-vidrio);
  border: 1px solid var(--t360-casa-vidrio-borde);
}
.t360-casa-piso-boton {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.t360-casa-piso-boton:hover {
  background: var(--t360-casa-vidrio-borde);
}
.t360-casa-piso-boton:focus-visible {
  outline: 2px solid var(--t360-casa-acento);
  outline-offset: 1px;
}
.t360-casa-piso-boton.es-oculto {
  opacity: 0.55;
}
.t360-casa-piso-boton.es-oculto span {
  text-decoration: line-through;
}
/* En el plano visto desde arriba, el piso que se mira. */
.t360-casa-piso-boton.es-elegido {
  background: var(--t360-casa-texto);
  color: var(--t360-casa-fondo);
}
.t360-casa-piso-boton.es-elegido:hover {
  background: var(--t360-casa-texto);
}
/* En la tarjeta chica la pila es más chica y los botones llevan las siglas («PB», «PA»). */
.t360-casa-raiz.es-compacta .t360-casa-pisos {
  top: 4px;
  left: 4px;
  gap: 2px;
  max-width: calc(100% - 8px);
  padding: 3px;
  border-radius: 8px;
}
.t360-casa-raiz.es-compacta .t360-casa-piso-boton {
  gap: 4px;
  min-height: 28px;
  padding: 0 8px 0 6px;
  font-size: 11.5px;
}
.t360-casa-raiz.es-compacta .t360-casa-piso-boton svg {
  width: 14px;
  height: 14px;
}

/* ---- La leyenda: siempre visible --------------------------------------------------------------- */

.t360-casa-leyenda {
  margin-top: 8px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--t360-casa-leyenda);
}

@media (prefers-reduced-motion: reduce) {
  .t360-casa-raiz *,
  .t360-casa-raiz *::before,
  .t360-casa-raiz *::after {
    transition: none !important;
    animation: none !important;
  }
}

/*
 * LOS SALTOS APOYADOS EN EL PISO
 * ==============================
 * Un salto que sabe a qué distancia queda (`piso.ts`) no es un botón flotante: es un aro
 * pintado en el piso, aplastado por la perspectiva y más chico cuanto más lejos. El botón
 * sigue midiendo lo de siempre (es lo que se toca); lo que se achica y se aplasta es el aro.
 *
 *   --t360-piso-escala    de 0,5 (lejos) a 1,15 (cerca). La pone `crearElementoDelSalto`.
 *
 * Va con más especificidad que las reglas de `tour360.css`, que se importa después.
 * Sin degradados, sin brillo, cantos del aro redondos porque es un círculo en el piso.
 */

.t360-salto.t360-salto--piso .t360-salto__circulo {
  /* El aro acostado: la elipse de un círculo visto desde 1,5 m de altura. */
  transform: perspective(220px) rotateX(58deg) scale(var(--t360-piso-escala, 1));
  /* El aro tiene que verse también sobre un piso blanco: borde blanco, relleno oscuro y un aro oscuro por fuera. */
  border: 3px solid rgba(255, 255, 255, 0.96);
  background: rgba(14, 16, 22, 0.42);
  box-shadow: 0 0 0 2px rgba(14, 16, 22, 0.55), 0 0 16px 3px rgba(14, 16, 22, 0.35);
  color: #fff;
}

/* El latido también acostado, sin crecer fuera de la caja del botón. */
.t360-salto.t360-salto--piso .t360-salto__circulo::after {
  inset: -4px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(14, 16, 22, 0.4);
}

.t360-salto.t360-salto--piso:hover .t360-salto__circulo,
.t360-salto.t360-salto--piso:focus-visible .t360-salto__circulo {
  transform: perspective(220px) rotateX(58deg) scale(calc(var(--t360-piso-escala, 1) * 1.14));
  background: var(--t360-i-acento, #3d7bf7);
  border-color: rgba(255, 255, 255, 0.95);
  color: var(--t360-i-sobre-acento, #fff);
}

.t360-salto.t360-salto--piso:active .t360-salto__circulo {
  transform: perspective(220px) rotateX(58deg) scale(calc(var(--t360-piso-escala, 1) * 1.04));
}

.t360-salto.t360-salto--piso:focus-visible .t360-salto__circulo {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* En el estudio: el salto elegido y el que se está arrastrando se siguen marcando (el aro acostado pisa esas reglas). */
.t360-salto.t360-salto--piso.t360-salto--elegido .t360-salto__circulo,
.t360-salto.t360-salto--piso.es-arrastrado .t360-salto__circulo {
  background: var(--t360-i-acento, #3d7bf7);
  color: var(--t360-i-sobre-acento, #fff);
}
.t360-salto.t360-salto--piso.es-arrastrado .t360-salto__circulo {
  transform: perspective(220px) rotateX(58deg) scale(calc(var(--t360-piso-escala, 1) * 1.2));
}

/* El nombre queda legible (derecho) y pegado al aro, que ocupa menos de la caja. */
.t360-salto.t360-salto--piso .t360-salto__nombre {
  top: calc(50% + 16px * var(--t360-piso-escala, 1) + 6px);
}

@media (prefers-reduced-motion: reduce) {
  .t360-salto.t360-salto--piso .t360-salto__circulo::after {
    animation: none;
  }
}

/*
 * EL RECORRIDO GUIADO
 * ===================
 * Mientras el tour se recorre solo, un cartelito quieto abajo dice dónde va ("Cocina · 2 de 5") y
 * deja frenarlo con un botón. Cualquier toque en la imagen también lo frena. Clases nuevas,
 * prefijo `t360-recorrido`. Sin animación propia: lo que se mueve es la imagen.
 */

.t360-recorrido {
  position: relative;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Pegado a la tira de ambientes: es lo que se mira mientras el tour se recorre solo. */
  max-width: min(100%, 460px);
  padding: 8px 8px 10px 16px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(14, 16, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: var(--t360-i-fuente, system-ui, sans-serif);
  line-height: 1.2;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  pointer-events: auto;
}

/* El puntito que late: dice que está andando solo. */
.t360-recorrido__punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t360-i-acento, #3d7bf7);
  box-shadow: 0 0 0 0 var(--t360-i-acento, #3d7bf7);
  animation: t360-latido 1.8s ease-out infinite;
}
@keyframes t360-latido {
  70% {
    box-shadow: 0 0 0 7px rgba(61, 123, 247, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(61, 123, 247, 0);
  }
}

.t360-recorrido__texto {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.t360-recorrido__titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.62;
}
.t360-recorrido__donde {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
}
.t360-recorrido__nombre {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t360-recorrido__cuenta {
  flex: none;
  font-size: 13px;
  opacity: 0.7;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.t360-recorrido .t360-recorrido__parar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.t360-recorrido .t360-recorrido__parar:hover {
  background: rgba(255, 255, 255, 0.2);
}
.t360-recorrido .t360-recorrido__parar:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* El avance del recorrido: una raya fina al pie, que llena de a una parada. */
.t360-recorrido__barra {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.t360-recorrido__avance {
  display: block;
  height: 100%;
  background: var(--t360-i-acento, #3d7bf7);
  transition: width 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .t360-recorrido__punto {
    animation: none;
  }
  .t360-recorrido__avance {
    transition: none;
  }
}

/* ---- El panel «Info»: cómo se maneja el tour ------------------------------------------------------------------ */

.t360 .t360-boton--barra.es-activo {
  background: rgba(255, 255, 255, 0.18);
}

.t360-ayuda {
  position: absolute;
  z-index: 12;
  pointer-events: auto;
  top: calc(max(12px, var(--t360-i-sa-t)) + 66px);
  right: max(12px, var(--t360-i-sa-r));
  width: min(360px, calc(100% - 24px));
  max-height: calc(100% - 140px);
  overflow: auto;
  padding: 10px 12px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(14, 16, 22, 0.82);
  background: color-mix(in srgb, var(--t360-i-fondo, #0e1016) 84%, transparent);
  color: var(--t360-i-texto, #fff);
  font-family: var(--t360-i-fuente, inherit);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.t360-ayuda__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.t360-ayuda__titulo {
  font-size: 14px;
  font-weight: 650;
}

.t360-ayuda__lista {
  display: grid;
  gap: 0;
  margin: 0;
}

.t360-ayuda__fila {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.t360-ayuda__fila dt {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.72;
}

.t360-ayuda__fila dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.35;
}

.t360-ayuda__teclas {
  display: inline-flex;
  gap: 4px;
}

.t360-tecla {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1;
}

.t360--compacto .t360-ayuda {
  left: max(12px, var(--t360-i-sa-l));
  right: max(12px, var(--t360-i-sa-r));
  width: auto;
  top: calc(max(12px, var(--t360-i-sa-t)) + 60px);
}

/* ---- La ficha de la propiedad: panel lateral ----------------------------------------------------------------- */

.t360-ficha {
  position: absolute;
  z-index: 13;
  pointer-events: auto;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--t360-i-fondo, #0e1016);
  color: var(--t360-i-texto, #fff);
  font-family: var(--t360-i-fuente, inherit);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.35);
  animation: t360-ficha-entra 0.24s ease-out;
}
@keyframes t360-ficha-entra {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
.t360-ficha__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(12px + var(--t360-i-sa-t, 0px)) calc(12px + var(--t360-i-sa-r, 0px)) 8px 20px;
}
.t360-ficha__etiqueta {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}
.t360-ficha__cuerpo {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 20px 20px;
}
.t360-ficha__precio {
  margin: 0;
  font-size: 28px;
  font-weight: 750;
  line-height: 1.1;
}
.t360-ficha__expensas {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.7;
}
.t360-ficha .t360-ficha__titulo {
  margin: 16px 0 0;
  color: inherit;
  font-family: inherit;
  letter-spacing: 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}
.t360-ficha__direccion {
  margin: 4px 0 0;
  font-size: 13.5px;
  opacity: 0.7;
}
.t360-ficha__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.t360-ficha__dato {
  padding: 10px 12px;
  background: rgba(12, 14, 19, 0.96);
  background: color-mix(in srgb, var(--t360-i-fondo, #0e1016) 96%, #fff 4%);
}
.t360-ficha__dato dt {
  font-size: 11.5px;
  opacity: 0.6;
}
.t360-ficha__dato dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 650;
}
.t360-ficha__descripcion {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.88;
  white-space: pre-line;
}
.t360-ficha__destacados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.t360-ficha__destacados li {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
}
.t360-ficha__pie {
  display: grid;
  gap: 8px;
  padding: 12px 20px calc(16px + var(--t360-i-sa-b, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.t360-ficha__consultar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 0;
  border-radius: var(--t360-i-radio-boton, 12px);
  background: var(--t360-i-acento);
  color: var(--t360-i-sobre-acento);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.t360-ficha__ver {
  text-align: center;
  color: inherit;
  font-size: 13.5px;
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.t360--compacto .t360-ficha {
  top: auto;
  width: 100%;
  max-height: 88%;
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 18px 0 0;
  animation-name: t360-ficha-sube;
}
@keyframes t360-ficha-sube {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

/*
 * ESTILOS DEL TOUR 360
 * ====================
 * Todo lo que sigue lleva el prefijo `t360-` y vive bajo `.t360`,
 * `.t360-portada`, `.t360-plano` o `.t360-visor-escena`: no hay estilos sobre
 * `body`, `html` ni etiquetas sueltas, así importarlo no cambia nada de la
 * página que lo inserta. (Lo único que toca fuera de lo propio es la clase
 * `t360-bloqueado` que el tour agrega y saca de <body> mientras ocupa la
 * pantalla, para frenar el scroll de la página.)
 *
 * Se personaliza con variables CSS, sin tocar el paquete:
 *
 *   --t360-acento        el color de la marca: ambiente actual, plano, "Consultar".
 *   --t360-sobre-acento  el color del texto encima del acento (blanco por defecto;
 *                        el componente lo calcula solo si pasás `marca.acento`).
 *   --t360-fondo         el fondo oscuro (carga, vidrio de los paneles).
 *   --t360-texto         el color del texto sobre el vidrio.
 *   --t360-radio         el radio de las tarjetas y paneles.
 *   --t360-fuente        la tipografía.
 *   --t360-z             el z-index del tour en pantalla completa (9000 por defecto:
 *                        el formulario de consulta de las webs usa 10000 y va encima).
 *
 * Las variables internas empiezan con `--t360-i-`: no se usan desde afuera.
 */

/* ---- Variables ------------------------------------------------------------ */

.t360,
.t360-portada,
.t360-plano,
.t360-visor-escena {
  --t360-i-acento: var(--t360-acento, #3d7bf7);
  --t360-i-sobre-acento: var(--t360-sobre-acento, #fff);
  --t360-i-fondo: var(--t360-fondo, #0b0d12);
  --t360-i-texto: var(--t360-texto, #fff);
  --t360-i-radio: var(--t360-radio, 16px);
  --t360-i-fuente: var(--t360-fuente, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}

/* ---- El tour: la caja ------------------------------------------------------- */

.t360,
.t360 *,
.t360 *::before,
.t360 *::after {
  box-sizing: border-box;
}
/* Photo Sphere Viewer espera content-box en sus propias piezas. */
.t360 .psv-container *,
.t360-visor-escena .psv-container * {
  box-sizing: content-box;
}

.t360 {
  --t360-i-sa-t: 0px;
  --t360-i-sa-r: 0px;
  --t360-i-sa-b: 0px;
  --t360-i-sa-l: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* Si quien lo inserta no le da alto, que no se colapse. */
  aspect-ratio: 16 / 10;
  border-radius: inherit;
  background: var(--t360-i-fondo);
  color: var(--t360-i-texto);
  font-family: var(--t360-i-fuente);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

/* Pantalla completa: la página propia del tour, o el embebido agrandado. */
.t360--completo,
.t360--expandido {
  --t360-i-sa-t: env(safe-area-inset-top, 0px);
  --t360-i-sa-r: env(safe-area-inset-right, 0px);
  --t360-i-sa-b: env(safe-area-inset-bottom, 0px);
  --t360-i-sa-l: env(safe-area-inset-left, 0px);
  /* Pegado a los cuatro bordes (y no `100vh`): en el iPhone `100vh` y `100svh` no coinciden con lo que se ve cuando las
     barras de Safari cambian de tamaño, y por abajo se asomaba la página. */
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  /* 9000: el formulario de consulta de las webs (10000) tiene que quedar por ENCIMA del tour. */
  z-index: var(--t360-z, 9000);
}

/* Cuando el navegador mismo lo pone en pantalla completa. */
.t360:fullscreen {
  --t360-i-sa-t: env(safe-area-inset-top, 0px);
  --t360-i-sa-r: env(safe-area-inset-right, 0px);
  --t360-i-sa-b: env(safe-area-inset-bottom, 0px);
  --t360-i-sa-l: env(safe-area-inset-left, 0px);
  border-radius: 0;
}

/* Mientras el tour ocupa la pantalla, la página de atrás no se mueve. */
body.t360-bloqueado {
  overflow: hidden;
  overscroll-behavior: none;
}

.t360__vacio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  opacity: 0.8;
}

.t360__solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- La panorámica ---------------------------------------------------------- */

.t360__visor {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.t360 .psv-container,
.t360-visor-escena .psv-container {
  background: var(--t360-i-fondo);
}
/*
 * Un ambiente que arrancó con la portada (640 px) se ve desenfocado, no pixelado, hasta que la 2K lo reemplaza: ahí el
 * desenfoque se va solo. El leve zoom esconde el borde que deja el desenfoque (el contenedor recorta lo que sobra).
 */
.t360 .psv-canvas-container {
  transition: filter 0.6s ease, transform 0.6s ease;
}
.t360[data-borrosa] .psv-canvas-container {
  filter: blur(9px);
  transform: scale(1.05);
}
/* La interfaz de Photo Sphere Viewer no se usa: la barra, la carga y los avisos son nuestros. */
.t360 .psv-loader-container,
.t360 .psv-navbar,
.t360 .psv-notification,
.t360 .psv-overlay,
.t360 .psv-panel,
.t360 .psv-tooltip,
.t360-visor-escena .psv-loader-container,
.t360-visor-escena .psv-navbar,
.t360-visor-escena .psv-notification,
.t360-visor-escena .psv-overlay,
.t360-visor-escena .psv-panel,
.t360-visor-escena .psv-tooltip {
  display: none !important;
}

/*
 * Sobre rendimiento: el tour dibuja encima de un <canvas> WebGL que se vuelve a
 * pintar al girar o cambiar de ambiente. Las sombras grandes y difusas, los
 * desenfoques de fondo y las animaciones infinitas sobre ese canvas son lo más
 * caro de componer; medido en un navegador con WebGL por software, dejaban el
 * visor trabado varios segundos al cambiar de ambiente. Por eso: sombras chicas,
 * `backdrop-filter` solo en piezas grandes y fijas (barra, minimapa y botones) y
 * **sin sombra** (un `backdrop-filter` con `box-shadow` en el mismo elemento era
 * la combinación más cara), y ninguna animación que corra mientras se cambia de
 * ambiente.
 */

/* ---- Vidrio: la receta compartida ------------------------------------------- */

.t360-barra,
.t360-mini,
.t360-boton--vidrio,
.t360-aviso,
.t360-carga:not(.es-inicial) .t360-carga__centro {
  background: rgba(16, 18, 24, 0.52);
  background: color-mix(in srgb, var(--t360-i-fondo) 54%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--t360-i-texto);
}

/*
 * Los rótulos de los saltos NO llevan desenfoque: son varios, se mueven con la
 * imagen y un `backdrop-filter` por cada uno se vuelve caro en teléfonos
 * modestos. Un fondo oscuro un poco más opaco se lee igual.
 */
.t360-salto__nombre,
.t360-inicial__texto {
  background: rgba(14, 16, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---- Botones ---------------------------------------------------------------- */

.t360 .t360-boton {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.t360 .t360-boton:focus-visible,
.t360 .t360-chip:focus-visible,
.t360 .t360-mini__accion:focus-visible,
.t360 .t360-mini__planta:focus-visible {
  outline: 3px solid var(--t360-i-acento);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.t360 .t360-boton--barra:hover {
  background: rgba(255, 255, 255, 0.14);
}
.t360 .t360-boton:active {
  transform: scale(0.96);
}
.t360 .t360-boton--vidrio {
  padding: 0 16px;
  min-height: 46px;
}
.t360 .t360-boton--vidrio:hover {
  background: rgba(16, 18, 24, 0.7);
  background: color-mix(in srgb, var(--t360-i-fondo) 72%, transparent);
}
.t360 .t360-boton--vidrio.es-activo {
  background: var(--t360-i-acento);
  border-color: transparent;
  color: var(--t360-i-sobre-acento);
}
.t360 .t360-boton--primario {
  min-height: 48px;
  padding: 0 22px;
  background: var(--t360-i-acento);
  color: var(--t360-i-sobre-acento);
  font-size: 15.5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.t360 .t360-boton--primario:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.t360 .t360-icono {
  flex: none;
  display: block;
}

/* ---- La barra de arriba -------------------------------------------------------- */

.t360-barra {
  position: absolute;
  z-index: 5;
  top: max(12px, var(--t360-i-sa-t));
  left: max(12px, var(--t360-i-sa-l));
  right: max(12px, var(--t360-i-sa-r));
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 7px 8px 7px 16px;
  border-radius: calc(var(--t360-i-radio) + 6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.t360--sin-barra .t360-barra:not(:focus-within) {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.t360-marca {
  flex: none;
  display: flex;
  align-items: center;
  max-width: 150px;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* Los logos suelen ser oscuros sobre transparente: van sobre una chapita clara. */
.t360-marca--logo {
  padding: 5px 10px;
  border-right: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
}
.t360-marca__logo {
  display: block;
  /* Alto fijo y ancho automático: un SVG sin medidas propias también se ve. */
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}
.t360-marca__nombre {
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t360-barra__titulo {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.t360-barra__ambiente {
  display: flex;
  align-items: baseline;
  min-width: 0;
  font-size: 16px;
  font-weight: 650;
}
/* El nombre se corta con "…" si no entra; "· 1 de 8" no se corta nunca. */
.t360-barra__nombre {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t360-barra__cuenta {
  flex: none;
  margin-left: 0.35em;
  font-weight: 450;
  white-space: nowrap;
  opacity: 0.68;
}
.t360-barra__tour {
  font-size: 12.5px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t360-barra__acciones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ---- Los saltos (marcadores dentro de la panorámica) --------------------------- */

.t360-salto,
.t360-salto * {
  box-sizing: border-box;
}
.t360-salto {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--t360-i-fuente, system-ui, sans-serif);
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.t360-salto__circulo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Se distingue de un fondo blanco (un piso claro, una pared): relleno oscuro, borde blanco y un aro oscuro por fuera. */
  background: rgba(14, 16, 22, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(14, 16, 22, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.t360-salto__circulo svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* El anillo que late: invita a tocar sin tapar la imagen. */
.t360-salto__circulo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(14, 16, 22, 0.35), inset 0 0 0 1px rgba(14, 16, 22, 0.3);
  animation: t360-pulso 2.6s ease-out infinite;
  pointer-events: none;
}
.t360-salto:hover .t360-salto__circulo,
.t360-salto:focus-visible .t360-salto__circulo {
  transform: scale(1.16);
  background: var(--t360-i-acento, #3d7bf7);
  border-color: transparent;
  color: var(--t360-i-sobre-acento, #fff);
}
.t360-salto:focus-visible .t360-salto__circulo {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.t360-salto:active .t360-salto__circulo {
  transform: scale(1.04);
}
.t360-salto__nombre {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 180px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.t360--saltos-ocultos .t360-salto {
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}
/* Escondidos no hace falta que latan: es trabajo de composición que se paga en pleno cambio de ambiente. */
.t360--saltos-ocultos .t360-salto__circulo::after {
  animation: none;
}

/* En el estudio: los saltos se arrastran / se ven apagados. */
.t360-salto--editable {
  cursor: grab;
  touch-action: none;
}
.t360-salto--editable.es-arrastrado {
  cursor: grabbing;
}
.t360-salto--editable.es-arrastrado .t360-salto__circulo {
  transform: scale(1.2);
  background: var(--t360-i-acento, #3d7bf7);
  color: var(--t360-i-sobre-acento, #fff);
}
.t360-salto--apagado {
  opacity: 0.4;
  pointer-events: none;
}
/* El elegido en el estudio: un anillo, para ubicarlo entre los demás. */
.t360-salto--elegido .t360-salto__circulo {
  background: var(--t360-i-acento, #3d7bf7);
  color: var(--t360-i-sobre-acento, #fff);
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.t360-inicial {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  pointer-events: none;
}
.t360-inicial__anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px dashed #fff;
  /* Contorno oscuro por fuera y por dentro: se ve sobre una pared clara y sobre una oscura. */
  box-shadow: 0 0 0 1.5px rgba(10, 12, 18, 0.6), inset 0 0 0 1.5px rgba(10, 12, 18, 0.6);
  background: radial-gradient(circle, #fff 0 3px, rgba(10, 12, 18, 0.6) 3.5px 5px, transparent 5.5px);
}
.t360-inicial__texto {
  background: rgba(14, 16, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---- Botones ---------------------------------------------------------------- */

.t360 .t360-boton {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.t360 .t360-boton:focus-visible,
.t360 .t360-chip:focus-visible,
.t360 .t360-mini__accion:focus-visible,
.t360 .t360-mini__planta:focus-visible {
  outline: 3px solid var(--t360-i-acento);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.t360 .t360-boton--barra:hover {
  background: rgba(255, 255, 255, 0.14);
}
.t360 .t360-boton:active {
  transform: scale(0.96);
}
.t360 .t360-boton--vidrio {
  padding: 0 16px;
  min-height: 46px;
}
.t360 .t360-boton--vidrio:hover {
  background: rgba(16, 18, 24, 0.7);
  background: color-mix(in srgb, var(--t360-i-fondo) 72%, transparent);
}
.t360 .t360-boton--vidrio.es-activo {
  background: var(--t360-i-acento);
  border-color: transparent;
  color: var(--t360-i-sobre-acento);
}
.t360 .t360-boton--primario {
  min-height: 48px;
  padding: 0 22px;
  background: var(--t360-i-acento);
  color: var(--t360-i-sobre-acento);
  font-size: 15.5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.t360 .t360-boton--primario:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.t360 .t360-icono {
  flex: none;
  display: block;
}

/* ---- La barra de arriba -------------------------------------------------------- */

.t360-barra {
  position: absolute;
  z-index: 5;
  top: max(12px, var(--t360-i-sa-t));
  left: max(12px, var(--t360-i-sa-l));
  right: max(12px, var(--t360-i-sa-r));
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 7px 8px 7px 16px;
  border-radius: calc(var(--t360-i-radio) + 6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.t360--sin-barra .t360-barra:not(:focus-within) {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.t360-marca {
  flex: none;
  display: flex;
  align-items: center;
  max-width: 150px;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* Los logos suelen ser oscuros sobre transparente: van sobre una chapita clara. */
.t360-marca--logo {
  padding: 5px 10px;
  border-right: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
}
.t360-marca__logo {
  display: block;
  /* Alto fijo y ancho automático: un SVG sin medidas propias también se ve. */
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}
.t360-marca__nombre {
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t360-barra__titulo {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.t360-barra__ambiente {
  display: flex;
  align-items: baseline;
  min-width: 0;
  font-size: 16px;
  font-weight: 650;
}
/* El nombre se corta con "…" si no entra; "· 1 de 8" no se corta nunca. */
.t360-barra__nombre {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t360-barra__cuenta {
  flex: none;
  margin-left: 0.35em;
  font-weight: 450;
  white-space: nowrap;
  opacity: 0.68;
}
.t360-barra__tour {
  font-size: 12.5px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t360-barra__acciones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ---- Los saltos (marcadores dentro de la panorámica) --------------------------- */

.t360-salto,
.t360-salto * {
  box-sizing: border-box;
}
.t360-salto {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--t360-i-fuente, system-ui, sans-serif);
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.t360-salto__circulo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Se distingue de un fondo blanco (un piso claro, una pared): relleno oscuro, borde blanco y un aro oscuro por fuera. */
  background: rgba(14, 16, 22, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(14, 16, 22, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.t360-salto__circulo svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* El anillo que late: invita a tocar sin tapar la imagen. */
.t360-salto__circulo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(14, 16, 22, 0.35), inset 0 0 0 1px rgba(14, 16, 22, 0.3);
  animation: t360-pulso 2.6s ease-out infinite;
  pointer-events: none;
}
.t360-salto:hover .t360-salto__circulo,
.t360-salto:focus-visible .t360-salto__circulo {
  transform: scale(1.16);
  background: var(--t360-i-acento, #3d7bf7);
  border-color: transparent;
  color: var(--t360-i-sobre-acento, #fff);
}
.t360-salto:focus-visible .t360-salto__circulo {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.t360-salto:active .t360-salto__circulo {
  transform: scale(1.04);
}
.t360-salto__nombre {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 180px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.t360--saltos-ocultos .t360-salto {
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}
/* Escondidos no hace falta que latan: es trabajo de composición que se paga en pleno cambio de ambiente. */
.t360--saltos-ocultos .t360-salto__circulo::after {
  animation: none;
}

/* En el estudio: los saltos se arrastran / se ven apagados. */
.t360-salto--editable {
  cursor: grab;
  touch-action: none;
}
.t360-salto--editable.es-arrastrado {
  cursor: grabbing;
}
.t360-salto--editable.es-arrastrado .t360-salto__circulo {
  transform: scale(1.2);
  background: var(--t360-i-acento, #3d7bf7);
  color: var(--t360-i-sobre-acento, #fff);
}
/*
 * El área para tocar un salto se estira mucho hacia arriba (240 px) y un poco a los costados. Las flechas apoyadas en el
 * piso quedan muy abajo —a veces pegadas a la tira de ambientes— y quien toca bastante más arriba, sobre el piso o la
 * puerta, también quiere ir. El dibujo no cambia; arrastrar la vista empezando sobre esa zona sigue girándola; y en el
 * estudio no se usa (ahí el salto se arrastra y un toque de más lo movería).
 */
.t360-salto:not(.t360-salto--editable):not(.t360-salto--apagado)::before {
  content: '';
  position: absolute;
  top: -240px;
  right: -14px;
  bottom: 0;
  left: -14px;
}

.t360-salto--apagado {
  opacity: 0.4;
  pointer-events: none;
}

.t360-inicial {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  pointer-events: none;
}
.t360-inicial__anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 4px, transparent 5px);
}
.t360-inicial__texto {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--t360-i-fuente, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@keyframes t360-pulso {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ---- El cartel "Arrastrá para mirar alrededor" ------------------------------------ */

/*
 * Sin `backdrop-filter`: la manito de adentro se anima sin parar y, con un
 * desenfoque de fondo en el contenedor, el navegador vuelve a desenfocar la
 * panorámica en cada cuadro. Medido: dejaba el visor trabado varios segundos
 * al cambiar de ambiente. Un fondo oscuro más opaco se lee igual.
 */
.t360-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(16, 18, 24, 0.66);
  background: color-mix(in srgb, var(--t360-i-fondo) 68%, transparent);
  color: var(--t360-i-texto);
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
  animation: t360-aparecer 0.5s ease both;
}
.t360-hint__mano {
  display: block;
  animation: t360-mano 2s ease-in-out infinite;
}
@keyframes t360-mano {
  0%,
  100% {
    transform: translateX(-16px) rotate(-8deg);
  }
  50% {
    transform: translateX(16px) rotate(8deg);
  }
}
@keyframes t360-aparecer {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ---- Abajo: minimapa, consultar, tira de ambientes ------------------------------------ */

.t360-abajo {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 56px max(12px, var(--t360-i-sa-r)) max(10px, var(--t360-i-sa-b)) max(12px, var(--t360-i-sa-l));
  pointer-events: none;
}
/* Un velo suave para que lo blanco se lea sobre cualquier foto. */
.t360-abajo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.t360-abajo__fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.t360-abajo__izquierda,
.t360-abajo__derecha {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
.t360-abajo__derecha {
  margin-left: auto;
}
.t360-abajo :is(button, .t360-mini, .t360-tira, .t360-credito) {
  pointer-events: auto;
}

.t360-tira {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.t360-tira::-webkit-scrollbar {
  display: none;
}
/* Centrada si entra; si no entra, arranca desde la izquierda y se desliza. */
.t360 .t360-tira > :first-child {
  margin-left: auto;
}
.t360 .t360-tira > :last-child {
  margin-right: auto;
}

.t360 .t360-chip {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 116px;
  height: 66px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: #15181f;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.t360 .t360-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.7);
}
.t360 .t360-chip__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.t360 .t360-chip__nombre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 16px 9px 5px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.t360 .t360-chip.es-actual {
  border-color: var(--t360-i-acento);
  box-shadow: 0 0 0 1px var(--t360-i-acento);
}
.t360 .t360-chip.es-actual .t360-chip__nombre {
  background: var(--t360-i-acento);
  color: var(--t360-i-sobre-acento);
  padding-top: 5px;
  text-shadow: none;
}
.t360 .t360-chip.es-cargando .t360-chip__foto {
  opacity: 0.55;
}

.t360-credito {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 11px 5px 12px;
  border-radius: 999px;
  /* Un fondo sólido y no un vidrio: `backdrop-filter` sobre el canvas lo traba (ver la nota de rendimiento arriba). */
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.t360-credito:hover,
.t360-credito:focus-visible {
  opacity: 1;
}
.t360-credito__texto {
  white-space: nowrap;
}
/* El logo es verde sobre transparente: se lee bien sobre el fondo oscuro de la pastilla. */
.t360-credito__logo {
  display: block;
  height: 16px;
  width: auto;
}

/* ---- El minimapa -------------------------------------------------------------------- */

.t360-mini {
  width: 236px;
  padding: 10px 10px 8px;
  border-radius: calc(var(--t360-i-radio) + 2px);
}
.t360-mini__cabeza {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px 4px;
}
.t360-mini__titulo {
  margin-right: auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
.t360 .t360-mini__accion {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* El botón se ve de 36 px pero se toca como uno de 44. */
.t360 .t360-mini__accion::after {
  content: '';
  position: absolute;
  inset: -4px;
}
.t360 .t360-mini__accion:hover {
  background: rgba(255, 255, 255, 0.16);
}
.t360-mini__plantas {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.t360 .t360-mini__planta {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.8;
}
.t360 .t360-mini__planta.es-actual {
  background: rgba(255, 255, 255, 0.92);
  color: #12141a;
  opacity: 1;
}
.t360-mini .t360-plano__svg {
  max-height: 168px;
}

/* El plano a lo grande: para leer los nombres. */
.t360-mini-fondo {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--t360-i-sa-t)) max(16px, var(--t360-i-sa-r)) max(16px, var(--t360-i-sa-b)) max(16px, var(--t360-i-sa-l));
  /* Un velo oscuro y liso: desenfocar toda la pantalla detrás del plano sería lo más caro de componer. */
  background: rgba(6, 8, 12, 0.72);
  animation: t360-fundir 0.2s ease both;
}
.t360-mini--grande {
  /* El plano a lo grande tapa lo de atrás: casi opaco, sin transparencias que molesten. */
  background: rgba(16, 18, 24, 0.95);
  background: color-mix(in srgb, var(--t360-i-fondo) 95%, transparent);
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: 100%;
  padding: 14px 14px 10px;
  border-radius: calc(var(--t360-i-radio) + 6px);
  overflow: hidden;
}
.t360-mini--grande .t360-mini__titulo {
  font-size: 12.5px;
}
.t360-mini--grande .t360-plano {
  flex: 1 1 auto;
  min-height: 0;
}
.t360-mini--grande .t360-plano__svg {
  height: auto;
  max-height: min(62vh, 560px);
  max-height: min(62svh, 560px);
  min-height: 0;
}
@keyframes t360-fundir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- El plano (también lo usa el estudio, sin el tour) ------------------------------- */

.t360-plano {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  font-family: var(--t360-i-fuente);
  --t360-plano-texto: #1f2430;
  --t360-plano-leyenda: rgba(31, 36, 48, 0.62);
  --t360-plano-opacidad: 0.24;
  --t360-plano-punto: #1f2430;
  --t360-plano-borde-punto: #fff;
  --t360-plano-cono-borde: rgba(31, 36, 48, 0.75);
  --t360-plano-halo: rgba(255, 255, 255, 0.7);
}
.t360-plano--oscuro {
  --t360-plano-texto: #fff;
  --t360-plano-leyenda: rgba(255, 255, 255, 0.66);
  --t360-plano-opacidad: 0.4;
  --t360-plano-punto: #fff;
  --t360-plano-borde-punto: #0b0d12;
  --t360-plano-cono-borde: rgba(255, 255, 255, 0.95);
  --t360-plano-halo: rgba(11, 13, 18, 0.55);
}
.t360-plano__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.t360-plano__amb :is(rect, path) {
  fill: var(--t360-tipo);
  fill-opacity: var(--t360-plano-opacidad);
  stroke: var(--t360-tipo);
  stroke-opacity: 0.9;
  stroke-width: 0.1;
  transition: fill-opacity 0.2s ease;
}
.t360-plano__amb.es-navegable {
  cursor: pointer;
  outline: none;
}
.t360-plano__amb.es-navegable:hover :is(rect, path) {
  fill-opacity: calc(var(--t360-plano-opacidad) + 0.18);
}
.t360-plano__amb.es-navegable:focus-visible :is(rect, path) {
  stroke: var(--t360-plano-texto);
  stroke-width: 0.22;
}
.t360-plano__amb.es-actual :is(rect, path) {
  fill: var(--t360-i-acento);
  fill-opacity: 1;
  stroke: var(--t360-i-acento);
}
.t360-plano__nombre {
  fill: var(--t360-plano-texto);
  /* Un halo finito para que el nombre se lea sobre el cono y sobre los colores de los ambientes. */
  stroke: var(--t360-plano-halo);
  stroke-width: 0.14;
  stroke-linejoin: round;
  paint-order: stroke fill;
  font-family: var(--t360-i-fuente);
  font-weight: 600;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.t360-plano__nombre.es-actual {
  fill: var(--t360-i-sobre-acento);
  stroke: none;
}
.t360-plano__cono {
  fill: #fff;
  fill-opacity: 0.4;
  stroke: var(--t360-plano-cono-borde);
  stroke-width: 0.09;
  stroke-linejoin: round;
  pointer-events: none;
}
.t360-plano__punto {
  fill: var(--t360-plano-punto);
  stroke: var(--t360-plano-borde-punto);
  stroke-width: 0.1;
  pointer-events: none;
}
.t360-plano__camara.es-actual .t360-plano__punto {
  fill: #fff;
  stroke: var(--t360-i-acento);
  stroke-width: 0.2;
}
.t360-plano__camara.es-secundaria .t360-plano__punto {
  fill: rgba(255, 255, 255, 0.35);
  stroke: var(--t360-plano-borde-punto);
  stroke-width: 0.08;
  opacity: 0.55;
  transition: opacity 0.2s ease, fill 0.2s ease, transform 0.2s ease;
}
.t360-plano__camara.es-secundaria:hover .t360-plano__punto,
.t360-plano__camara.es-secundaria:focus-visible .t360-plano__punto {
  fill: rgba(255, 255, 255, 0.85);
  opacity: 1;
  stroke: var(--t360-i-acento);
}
.t360-plano__camara.es-secundaria.es-actual .t360-plano__punto {
  fill: #fff;
  opacity: 1;
  stroke: var(--t360-i-acento);
  stroke-width: 0.2;
}
.t360-plano__camara.es-navegable {
  cursor: pointer;
}
.t360-plano__toque {
  fill: transparent;
  pointer-events: all;
}
.t360-plano__leyenda {
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  color: var(--t360-plano-leyenda);
}
.t360-plano__vacio {
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--t360-plano-leyenda);
}

/* ---- Avisos, carga y errores --------------------------------------------------------- */

.t360-aviso {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: calc(max(10px, var(--t360-i-sa-b)) + 128px);
  transform: translate(-50%, 8px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.t360-aviso.es-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.t360-carga {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.55s ease, visibility 0s linear 0s;
}
.t360-carga.es-inicial {
  background: var(--t360-i-fondo);
}
.t360-carga:not(.es-inicial) {
  background: rgba(6, 8, 12, 0.22);
}
.t360-carga.es-oculta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
.t360-carga__fondo {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(26px) brightness(0.55) saturate(1.15);
  pointer-events: none;
}
.t360-carga__centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
}
.t360-carga:not(.es-inicial) .t360-carga__centro {
  padding: 18px 26px;
  border-radius: calc(var(--t360-i-radio) + 2px);
}
.t360-carga__marca {
  margin-bottom: 6px;
  font-size: 22px;
}
.t360-carga__marca .t360-marca__logo {
  height: 48px;
  max-width: 200px;
  padding: 10px 16px;
  box-sizing: content-box;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
}
.t360-carga__texto {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.95;
}
.t360-carga__barra {
  width: min(280px, 70vw);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.t360-carga__barra span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0.04);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.t360-falla {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--t360-i-fondo);
}
.t360-falla__centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  padding: 24px;
  text-align: center;
}
.t360-falla__centro p {
  margin: 0;
  font-size: 16px;
  font-weight: 550;
}

/* ---- Pantallas angostas (el tour mide menos de 560 px, no la ventana) ---------------- */

.t360--compacto .t360-barra {
  gap: 8px;
  min-height: 54px;
  padding-left: 10px;
}
.t360--compacto .t360-barra__ambiente {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-size: 15px;
  line-height: 1.2;
}
.t360--compacto .t360-barra__nombre {
  max-width: 100%;
}
.t360--compacto .t360-barra__cuenta {
  margin-left: 0;
  font-size: 12px;
}
.t360--compacto .t360-barra__punto {
  display: none;
}
.t360--compacto .t360-barra__tour,
.t360--compacto .t360-boton__texto,
.t360--compacto .t360-credito__texto {
  display: none;
}
.t360--compacto .t360-credito {
  padding: 4px 9px;
  opacity: 0.7;
}
.t360--compacto .t360-credito__logo {
  height: 13px;
}
.t360--compacto .t360-marca {
  max-width: 92px;
  padding-right: 8px;
}
.t360--compacto .t360-marca--logo {
  padding: 4px 7px;
}
.t360--compacto .t360-marca__logo {
  height: 20px;
  max-width: 76px;
}
.t360--compacto .t360-chip {
  width: 96px;
  height: 58px;
}
.t360--compacto .t360-abajo {
  gap: 8px;
}
.t360--compacto .t360-mini-fondo {
  align-items: flex-end;
}
.t360--compacto .t360-mini--grande {
  width: 100%;
}

/* ---- Visor de una escena (estudio) -------------------------------------------------- */

.t360-visor-escena {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  border-radius: inherit;
  background: var(--t360-i-fondo);
  color: var(--t360-i-texto);
  font-family: var(--t360-i-fuente);
  outline: none;
}
.t360-visor-escena:focus-visible {
  outline: 2px solid var(--t360-i-acento);
  outline-offset: -2px;
}
.t360-visor-escena__huesped {
  position: absolute;
  inset: 0;
}
.t360-visor-escena__progreso {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.t360-visor-escena__progreso span {
  display: block;
  height: 100%;
  background: var(--t360-i-acento);
  transition: width 0.2s ease;
}
.t360-visor-escena__error {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(16, 18, 24, 0.82);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ---- La portada de la ficha ---------------------------------------------------------- */

.t360-portada {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* Si el contenedor no tiene alto propio, que tenga forma de foto. */
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: #0b0d12;
  color: #fff;
  font-family: var(--t360-i-fuente);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.t360-portada,
.t360-portada *,
.t360-portada *::before,
.t360-portada *::after {
  box-sizing: border-box;
}
.t360-portada:focus-visible {
  outline: 3px solid var(--t360-i-acento);
  outline-offset: -5px;
}
/* La imagen es más ancha que la caja y se desliza despacio de un lado al otro. */
.t360-portada__marco {
  position: absolute;
  /* Más alta que la caja: se recortan los polos (techo y piso estirados), que en una foto 360 plana distraen. */
  top: -15%;
  height: 130%;
  left: 0;
  width: 132%;
  animation: t360-deriva 54s ease-in-out infinite alternate;
  will-change: transform;
}
.t360-portada__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
}
.t360-portada__img--alta {
  opacity: 0;
  transition: opacity 0.7s ease;
}
/*
 * Mientras llega la imagen buena, la chica (640 px) se ve desenfocada y no pixelada: estirada a todo el ancho se le notan los
 * cuadritos. El leve zoom esconde el borde que deja el desenfoque. Con la 2K ya lista (`es-nitida`) no hay nada que tapar.
 */
.t360-portada__img:not(.t360-portada__img--alta) {
  transition: filter 0.6s ease, transform 0.6s ease;
}
.t360-portada__marco:not(.es-nitida) .t360-portada__img:not(.t360-portada__img--alta) {
  filter: blur(10px);
  transform: scale(1.05);
}
.t360-portada__img--alta.es-lista {
  opacity: 1;
}
@keyframes t360-deriva {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-24.2%, 0, 0);
  }
}
.t360-portada__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.36) 38%, rgba(0, 0, 0, 0.2) 66%, rgba(0, 0, 0, 0.26) 100%);
}
.t360-portada__centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}
.t360-portada__boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  /* Vidrio OSCURO: sobre una foto clara el texto blanco tiene que seguir leyéndose. */
  background: rgba(10, 12, 18, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  font-size: 18px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.22s ease, background-color 0.22s ease;
}
.t360-portada:hover .t360-portada__boton,
.t360-portada:focus-visible .t360-portada__boton {
  background: rgba(10, 12, 18, 0.66);
  transform: scale(1.04);
}
.t360-portada:active .t360-portada__boton {
  transform: scale(0.98);
}
.t360-portada__icono {
  flex: none;
  display: block;
}

/* ---- Reducir movimiento ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .t360-portada__marco {
    width: 100%;
    animation: none;
  }
  .t360-portada__img--alta,
  .t360-portada__boton {
    transition: none;
  }
  .t360-salto__circulo::after,
  .t360-hint__mano {
    animation: none;
  }
  .t360-hint,
  .t360-mini-fondo {
    animation: none;
  }
  .t360-barra,
  .t360-salto,
  .t360-salto__circulo,
  .t360-aviso,
  .t360-carga,
  .t360-carga__barra span,
  .t360 .t360-boton,
  .t360 .t360-chip {
    transition: none;
  }
}

/* ---- Un dato sobre la 360 («i»): un botón redondo y, al tocarlo, su texto ---------------------------------------- */

.t360-info {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(14, 16, 22, 0.62);
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.t360-info:hover {
  transform: scale(1.08);
  background: rgba(14, 16, 22, 0.8);
}
.t360-info:focus-visible {
  outline: 3px solid var(--t360-i-acento, #3d7bf7);
  outline-offset: 2px;
}
.t360-info__i {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}
.t360-info--editable {
  cursor: grab;
}
.t360-info--editable.es-arrastrado {
  cursor: grabbing;
  transform: scale(1.12);
}
.t360-info--elegida {
  border-color: var(--t360-i-acento, #3d7bf7);
  box-shadow: 0 0 0 3px rgba(61, 123, 247, 0.35), 0 2px 10px rgba(0, 0, 0, 0.4);
}
.t360-info--apagada {
  opacity: 0.4;
  pointer-events: none;
}

/* La tarjeta de un dato: adentro del marcador, arriba del botón, cerrada hasta que se toca. */
.t360-info__tarjeta {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: min(260px, 70vw);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(14, 16, 22, 0.92);
  color: #fff;
  font-family: var(--t360-i-fuente, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: pre-line;
  transform: translateX(-50%);
  cursor: default;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.t360-info.es-abierta .t360-info__tarjeta {
  display: flex;
}
.t360-info__titulo {
  font-weight: 650;
}
.psv-marker:has(.t360-info.es-abierta) {
  z-index: 60 !important;
}

/*
 * Con mouse (o teclado) el dato se ve con solo pasar por encima de la «i» o enfocarla, sin hacer clic. En pantallas
 * táctiles no: ahí `:hover` se queda pegado después de un toque, y el dato se abre tocando. Tocar la «i» sigue
 * abriéndola y dejándola fija (`es-abierta`). En el estudio (`--editable`) la «i» se arrastra y no abre nada.
 */
.t360-info:not(.t360-info--editable):not(.t360-info--apagada):focus-visible .t360-info__tarjeta {
  display: flex;
}
.psv-marker:has(.t360-info:not(.t360-info--editable):not(.t360-info--apagada):focus-visible) {
  z-index: 60 !important;
}
@media (hover: hover) and (pointer: fine) {
  .t360-info:not(.t360-info--editable):not(.t360-info--apagada):hover .t360-info__tarjeta {
    display: flex;
  }
  .psv-marker:has(.t360-info:not(.t360-info--editable):not(.t360-info--apagada):hover) {
    z-index: 60 !important;
  }
}

/*
 * EL TEMA: lo que una web cambia para que el tour se vea de ella
 * ==============================================================
 * El tour no tiene colores sueltos: todo sale de unas pocas variables públicas (`--t360-*`) que la web puede fijar en
 * cualquier contenedor de arriba (o en una clase de tema, ver `src/temas/`). Ninguna es obligatoria: sin ellas, el tour
 * se ve como siempre (oscuro, con acento azul).
 *
 *   MARCA
 *   --t360-acento              el color de la marca (botón principal, lo elegido, el ambiente actual).
 *   --t360-sobre-acento        el color del texto sobre el acento.
 *
 *   BASE
 *   --t360-fondo               el fondo del tour y de lo que flota sobre la foto (oscuro o claro).
 *   --t360-texto               el color del texto y de los íconos sobre ese fondo.
 *   --t360-fuente              la tipografía.
 *
 *   SUPERFICIES Y BOTONES
 *   --t360-superficie          el fondo de la barra de arriba, el plano y los paneles. Por defecto, el fondo casi opaco.
 *   --t360-borde               el filo de esas superficies.
 *   --t360-boton-fondo         el fondo de un botón de la barra y del plano.
 *   --t360-boton-fondo-hover   el mismo, al pasarle el mouse.
 *   --t360-boton-flotante      el fondo de los botones que flotan sobre la foto («Plano», «Mover el móvil»).
 *   --t360-sombra              la sombra de las superficies (`box-shadow`).
 *
 *   --t360-whatsapp            el fondo de «Consultar» (por defecto el verde de WhatsApp) y
 *   --t360-sobre-whatsapp      su texto.
 *
 *   FORMAS
 *   --t360-radio               el redondeo de las superficies grandes (la barra, el plano).
 *   --t360-radio-boton         el redondeo de los botones (por defecto 10px; 999px: píldora).
 *   --t360-radio-foto          el de las fotos de la tira de ambientes (por defecto 8px).
 *
 * Ojo: la transparencia es a propósito baja. Los botones se leen mejor (sobre todo para quien ve poco) cuanto más
 * sólidos son; si la web quiere vidrio, que lo pida bajando el alfa de `--t360-superficie`.
 */

.t360,
.t360-portada,
.t360-plano,
.t360-visor-escena {
  /* Un color común primero: un navegador sin `color-mix` (iOS anterior al 16.2) dejaba el fondo transparente. */
  --t360-i-superficie: var(--t360-superficie, rgba(11, 13, 18, 0.92));
  --t360-i-borde: var(--t360-borde, rgba(255, 255, 255, 0.3));
  --t360-i-boton-fondo: var(--t360-boton-fondo, rgba(255, 255, 255, 0.16));
  --t360-i-boton-fondo-hover: var(--t360-boton-fondo-hover, rgba(255, 255, 255, 0.28));
  --t360-i-boton-flotante: var(--t360-boton-flotante, rgba(11, 13, 18, 0.94));
  --t360-i-sombra: var(--t360-sombra, 0 6px 18px rgba(0, 0, 0, 0.35));
  --t360-i-radio-boton: var(--t360-radio-boton, 10px);
  --t360-i-radio-foto: var(--t360-radio-foto, 8px);
  /* «Consultar» va con el verde de WhatsApp (lleva ahí) y texto oscuro: blanco sobre ese verde casi no se lee. */
  --t360-i-whatsapp: var(--t360-whatsapp, #25d366);
  --t360-i-sobre-whatsapp: var(--t360-sobre-whatsapp, #0b1f12);
}

/* Con `color-mix`, los mismos valores salen del fondo y del texto de cada web (un tema claro queda claro). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .t360,
  .t360-portada,
  .t360-plano,
  .t360-visor-escena {
    --t360-i-superficie: var(--t360-superficie, color-mix(in srgb, var(--t360-i-fondo) 92%, transparent));
    --t360-i-borde: var(--t360-borde, color-mix(in srgb, var(--t360-i-texto) 30%, transparent));
    --t360-i-boton-fondo: var(--t360-boton-fondo, color-mix(in srgb, var(--t360-i-texto) 16%, transparent));
    --t360-i-boton-fondo-hover: var(--t360-boton-fondo-hover, color-mix(in srgb, var(--t360-i-texto) 28%, transparent));
    --t360-i-boton-flotante: var(--t360-boton-flotante, color-mix(in srgb, var(--t360-i-fondo) 94%, transparent));
  }
}

/*
 * LA INTERFAZ EN EL TELÉFONO Y LAS SUPERFICIES SÓLIDAS
 * ====================================================
 * Esta hoja va después de las otras y usa selectores un poco más específicos (`.t360 .x`) para pisar sus reglas.
 *
 *   · Superficies y botones casi opacos (variables de `tema.css`): se ven bien con luz de día y para quien ve poco.
 *   · En pantallas angostas (`t360--compacto`, `t360--muy-angosto`) nada se pisa: la barra de arriba pasa a dos renglones
 *     y los botones del plano 3D bajan a una columna abajo a la derecha.
 *   · Blancos táctiles de 46 px en pantallas táctiles.
 *   · El aviso temporal que explica cómo se mueve el teléfono (`.t360-giro-ayuda`).
 */

/* ---- Superficies: casi opacas ---------------------------------------------------------------------------------- */

/* El botón de la portada de la ficha («Recorrer en 360°») también: sobre una foto clara, al 50 % no se leía. */
.t360-portada__boton {
  background: rgba(10, 12, 18, 0.86);
}
.t360-portada:hover .t360-portada__boton,
.t360-portada:focus-visible .t360-portada__boton {
  background: rgba(10, 12, 18, 0.94);
}

.t360 .t360-barra,
.t360 .t360-mini,
.t360 .t360-boton--vidrio,
.t360 .t360-aviso,
.t360 .t360-ayuda {
  background: var(--t360-i-superficie);
  border: 1px solid var(--t360-i-borde);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--t360-i-sombra);
  color: var(--t360-i-texto);
}
.t360 .t360-boton--vidrio {
  background: var(--t360-i-boton-flotante);
  border-radius: var(--t360-i-radio-boton);
}
.t360 .t360-boton--vidrio:hover {
  background: var(--t360-i-boton-fondo-hover);
}
.t360 .t360-boton--vidrio.es-activo {
  background: var(--t360-i-acento);
  color: var(--t360-i-sobre-acento);
}
.t360 .t360-boton--barra {
  background: var(--t360-i-boton-fondo);
  border-radius: var(--t360-i-radio-boton);
}
.t360 .t360-boton--barra:hover,
.t360 .t360-boton--barra.es-activo {
  background: var(--t360-i-boton-fondo-hover);
}
.t360 .t360-mini__accion {
  background: var(--t360-i-boton-fondo);
}
.t360 .t360-mini__accion:hover {
  background: var(--t360-i-boton-fondo-hover);
}
.t360 .t360-boton--primario {
  border-radius: var(--t360-i-radio-boton);
}

/* Los rótulos de los saltos y de la vista inicial: más sólidos. */
.t360 .t360-salto__nombre,
.t360 .t360-inicial__texto {
  background: rgba(14, 16, 22, 0.88);
  border-color: rgba(255, 255, 255, 0.3);
}

/* El plano 3D / 2D dentro del tour: sus botones también salen de las variables del tema. */
.t360 .t360-casa-raiz {
  --t360-casa-vidrio: var(--t360-i-superficie);
  --t360-casa-vidrio-borde: var(--t360-i-borde);
}

/* ---- Pantallas táctiles --------------------------------------------------------------------------------------- */

.t360--tactil .t360-boton {
  min-width: 46px;
  min-height: 46px;
}
.t360--tactil .t360-casa-boton,
.t360--tactil .t360-casa-piso-boton {
  min-width: 44px;
  min-height: 44px;
}

/* ---- Pantallas angostas ----------------------------------------------------------------------------------------- */

/* El botón del giroscopio conserva su texto (corto): tiene que decir qué hace. */
.t360 .t360-boton__texto-corto {
  display: none;
}
.t360--compacto .t360-boton-giro .t360-boton__texto-corto {
  display: inline;
}

/* El plano 3D: los botones de la vista bajan a una columna abajo a la derecha, y la pila de pisos queda arriba a la izquierda. */
.t360--compacto .t360-mini--grande .t360-casa-controles {
  top: auto;
  bottom: 8px;
  right: 8px;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: none;
}
.t360--compacto .t360-mini--grande .t360-casa-pisos {
  max-width: calc(100% - 72px);
}
.t360--compacto .t360-mini--grande .t360-mini__controles {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Muy angosta: la barra de arriba en dos renglones (marca y título arriba; los botones repartidos, abajo). */
.t360--muy-angosto .t360-barra {
  flex-wrap: wrap;
  row-gap: 4px;
  padding-bottom: 6px;
}
.t360--muy-angosto .t360-barra__titulo {
  flex: 1 1;
  min-width: 0;
}
.t360--muy-angosto .t360-barra__acciones {
  flex: 1 0 100%;
  justify-content: space-between;
  gap: 4px;
}
.t360--muy-angosto .t360-barra__acciones > .t360-boton {
  flex: 1 1;
  min-width: 0;
}
.t360--muy-angosto .t360-ayuda {
  top: calc(max(12px, var(--t360-i-sa-t)) + 112px);
}

/* ---- Cómo se mueve el teléfono: un dibujo temporal en el medio ------------------------------------------------ */

.t360-giro-ayuda {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(86vw, 320px);
  padding: 16px 22px 18px;
  border: 1px solid var(--t360-i-borde);
  border-radius: 22px;
  background: var(--t360-i-superficie);
  box-shadow: var(--t360-i-sombra);
  color: var(--t360-i-texto);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: t360-giro-entra 0.28s ease-out;
}
.t360-giro-ayuda__texto {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}
@keyframes t360-giro-entra {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t360-giro-ayuda {
    animation: none;
  }
}

/* El crédito dice «Tour 360 por [logo]» también en el teléfono (más chico): solo el logo no se entendía. */
.t360--compacto .t360-credito__texto {
  display: inline;
  font-size: 10.5px;
}

/*
 * LO QUE LLEVA A CONSULTAR, Y LO QUE NUNCA DEJA LA PANTALLA ROTA
 * ==============================================================
 *   · «Consultar» con el verde y el logo de WhatsApp.
 *   · La tarjeta del final del recorrido (`TarjetaFinal`).
 *   · El modo simple sin WebGL (`VisorSimple`).
 *   · El dibujo de «Mover con el teléfono» (`DibujoDelGiro`).
 */

/* ---- «Consultar» ------------------------------------------------------------------------------------------------ */

.t360 .t360-boton--whatsapp {
  min-height: 48px;
  padding: 0 22px 0 18px;
  background: var(--t360-i-whatsapp);
  color: var(--t360-i-sobre-whatsapp);
  border: 0;
  font-size: 15.5px;
  font-weight: 750;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
.t360 .t360-boton--whatsapp:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.t360 .t360-boton--claro {
  min-height: 48px;
  padding: 0 20px;
  background: #fff;
  color: #14161a;
  border: 0;
  font-size: 15.5px;
  font-weight: 700;
}
.t360 .t360-boton--claro:hover {
  filter: brightness(0.95);
}

/* ---- La tarjeta del final --------------------------------------------------------------------------------------- */

.t360-final {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  padding: calc(16px + var(--t360-i-sa-t, 0px)) calc(16px + var(--t360-i-sa-r, 0px)) calc(16px + var(--t360-i-sa-b, 0px))
    calc(16px + var(--t360-i-sa-l, 0px));
  background: rgba(0, 0, 0, 0.45);
  animation: t360-final-entra 260ms ease-out both;
}
.t360-final__tarjeta {
  width: min(100%, 380px);
  padding: 22px 22px 16px;
  border-radius: 22px;
  border: 1px solid var(--t360-i-borde);
  background: var(--t360-i-superficie);
  color: var(--t360-i-texto);
  box-shadow: var(--t360-i-sombra);
  text-align: center;
}
.t360-final__marca {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.t360-final__marca .t360-marca__logo {
  max-height: 40px;
  max-width: 160px;
}
.t360-final__titulo {
  margin: 0;
  font-size: 21px;
  font-weight: 760;
  line-height: 1.2;
}
.t360-final__texto {
  margin: 8px 0 18px;
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.85;
}
.t360-final__acciones {
  display: grid;
  gap: 10px;
}
.t360-final__acciones .t360-boton {
  width: 100%;
  justify-content: center;
}
.t360-final__secundarias {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
}
.t360-final__link {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.t360-final__link:focus-visible {
  outline: 2px solid var(--t360-i-acento);
  outline-offset: 2px;
  border-radius: 6px;
}
@keyframes t360-final-entra {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t360-final {
    animation: none;
  }
}

/* ---- El modo simple ----------------------------------------------------------------------------------------------- */

.t360-simple {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #111;
  background-repeat: repeat-x;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.t360-simple:active {
  cursor: grabbing;
}
.t360-simple:focus-visible {
  outline: 3px solid var(--t360-i-acento);
  outline-offset: -3px;
}
.t360-simple__aviso {
  position: absolute;
  left: 50%;
  top: calc(84px + var(--t360-i-sa-t, 0px));
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--t360-i-superficie);
  color: var(--t360-i-texto);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- El dibujo de «Mover con el teléfono» --------------------------------------------------------------------------- */

.t360-giro {
  display: block;
  overflow: visible;
}
.t360-giro__esfera {
  fill: #fff;
  fill-opacity: 0.1;
  stroke: #fff;
  stroke-opacity: 0.55;
  stroke-width: 1.5;
}
.t360-giro__latitud {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.32;
  stroke-width: 1.2;
}
.t360-giro__ventana {
  fill: #fff;
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.t360-giro__persona {
  fill: var(--t360-i-acento);
}
.t360-giro__brazo {
  fill: none;
  stroke: var(--t360-i-acento);
  stroke-width: 6;
  stroke-linecap: round;
}
.t360-giro__telefono rect:first-child {
  fill: #1b1d22;
  stroke: #fff;
  stroke-width: 1.4;
}
.t360-giro__pantalla {
  fill: #fff;
  fill-opacity: 0.9;
}

/* ---- Formas: menos redondeadas ----------------------------------------------------------------------------------
 * Botones casi cuadrados (10px) y fotos con un borde apenas redondeado (8px): se ve más sobrio que las píldoras.
 * Cada web lo cambia con `--t360-radio-boton` y `--t360-radio-foto`. */

.t360 .t360-boton,
.t360 .t360-credito,
.t360-portada__boton {
  border-radius: var(--t360-i-radio-boton);
}
.t360 .t360-chip,
.t360 .t360-chip__foto {
  border-radius: var(--t360-i-radio-foto);
}
.t360 .t360-barra,
.t360 .t360-mini,
.t360 .t360-ayuda,
.t360-final__tarjeta,
.t360-giro-ayuda {
  border-radius: 14px;
}

/* ---- Los datos de la propiedad y las fotos del ambiente ---------------------------------------------------------- */

.t360-barra__resumen {
  display: block;
  font-size: 13px;
  font-weight: 650;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t360-final__resumen {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.t360 .t360-boton-fotos {
  position: relative;
}
.t360-boton-fotos__cuenta {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--t360-i-acento);
  color: var(--t360-i-sobre-acento);
  font-size: 11px;
  font-weight: 750;
  line-height: 17px;
  text-align: center;
}

.t360-galeria {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: calc(10px + var(--t360-i-sa-t, 0px)) calc(10px + var(--t360-i-sa-r, 0px)) calc(14px + var(--t360-i-sa-b, 0px))
    calc(10px + var(--t360-i-sa-l, 0px));
  background: rgba(5, 6, 9, 0.96);
  color: #fff;
}
.t360-galeria__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 10px;
}
.t360-galeria__titulo {
  font-size: 17px;
  font-weight: 700;
}
.t360-galeria__cuenta {
  font-weight: 500;
  opacity: 0.8;
}
.t360-galeria__marco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  touch-action: pan-y;
}
.t360-galeria__foto {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--t360-i-radio-foto);
  user-select: none;
  -webkit-user-select: none;
}
.t360 .t360-galeria__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  justify-content: center;
}
.t360-galeria__flecha.es-anterior {
  left: calc(12px + var(--t360-i-sa-l, 0px));
}
.t360-galeria__flecha.es-siguiente {
  right: calc(12px + var(--t360-i-sa-r, 0px));
}

/*
 * LA BARRA DE ARRIBA, LIVIANA
 * ===========================
 * Sin tarjeta de vidrio: un degradado suave sobre la imagen, el nombre del ambiente grande y botones redondos. Lo que
 * antes ocupaba la barra (logo, título del tour, resumen, m²) vive en el panel «Ficha» y en la tarjeta del final.
 * Va al final del CSS para ganarle a las reglas de la barra de antes sin `!important`.
 */

.t360 .t360-barra {
  top: 0;
  left: 0;
  right: 0;
  min-height: 0;
  padding: calc(16px + var(--t360-i-sa-t, 0px)) calc(16px + var(--t360-i-sa-r, 0px)) 52px calc(22px + var(--t360-i-sa-l, 0px));
  align-items: flex-start;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.24) 55%, rgba(0, 0, 0, 0));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* El degradado no tapa la imagen: solo los botones y el nombre reciben toques. */
  pointer-events: none;
}
.t360 .t360-barra > * {
  pointer-events: auto;
}
.t360 .t360-barra__titulo {
  pointer-events: none;
}

/* El logo de la inmobiliaria se queda, más chico y sin la raya; lo demás ya está en otro lado. */
.t360 .t360-marca {
  align-self: center;
  max-width: 128px;
  padding-right: 0;
  border-right: 0;
}
.t360 .t360-marca--logo {
  padding: 4px 9px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.t360 .t360-marca__logo {
  height: 24px;
  max-width: 100px;
}
.t360 .t360-marca__nombre {
  font-size: 15px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.t360 .t360-barra__titulo {
  align-self: center;
}
.t360 .t360-barra__tour,
.t360 .t360-barra__resumen,
.t360 .t360-mov-medidas {
  display: none;
}

.t360 .t360-barra__ambiente {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.t360 .t360-barra__cuenta {
  font-size: 13px;
  font-weight: 500;
}

.t360 .t360-barra__acciones {
  gap: 8px;
}
.t360 .t360-boton--barra {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.t360 .t360-boton--barra:hover,
.t360 .t360-boton--barra.es-activo {
  background: rgba(0, 0, 0, 0.62);
}
/* Solo «Recorrer» y «Ficha» llevan texto: son lo que se quiere que se toque. Los demás, un ícono con su nombre en `title`. */
.t360 .t360-boton--barra .t360-boton__texto {
  display: none;
}
.t360 .t360-boton--barra[data-recorrido][aria-label^='Recorrer'],
.t360 .t360-boton--barra[aria-controls='t360-ficha'] {
  gap: 8px;
  padding: 0 16px 0 12px;
}
.t360 .t360-boton--barra[aria-label^='Recorrer'] .t360-boton__texto,
.t360 .t360-boton--barra[aria-controls='t360-ficha'] .t360-boton__texto {
  display: inline;
  font-weight: 650;
}
.t360 .t360-boton--barra[aria-label^='Recorrer'] {
  border-color: #fff;
  background: #fff;
  color: #111;
}
.t360 .t360-boton--barra[aria-label^='Recorrer']:hover {
  background: rgba(255, 255, 255, 0.88);
}
/* El contador de fotos del ambiente, como una insignia sobre el botón. */
.t360 .t360-boton-fotos {
  position: relative;
}

/* Teléfono: el nombre un poco más chico y los botones, a 40 px. */
.t360--compacto .t360-barra {
  padding-left: calc(16px + var(--t360-i-sa-l, 0px));
  padding-bottom: 44px;
}
.t360--compacto .t360-barra__ambiente {
  font-size: 19px;
}
.t360--compacto .t360-barra__acciones {
  gap: 6px;
}
.t360--compacto .t360-boton--barra {
  min-width: 40px;
  min-height: 40px;
}
/* Teléfono (menos de 560 px): el nombre arriba y los botones repartidos en un segundo renglón, para que nada se pise. */
.t360--compacto .t360-barra {
  flex-wrap: wrap;
  row-gap: 8px;
}
.t360--compacto .t360-barra__titulo {
  flex: 1 1;
}
.t360--compacto .t360-barra__acciones {
  flex: 1 0 100%;
  justify-content: space-between;
}
.t360--compacto .t360-barra__acciones > .t360-boton {
  flex: none;
}

/* Teléfono angosto (menos de 420 px): los siete botones, todos redondos y del mismo tamaño, solo con ícono. */
.t360--muy-angosto .t360-barra__acciones {
  justify-content: space-between;
  gap: 6px;
}
.t360--muy-angosto .t360-barra .t360-boton--barra[aria-label] {
  flex: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  gap: 0;
}
.t360--muy-angosto .t360-barra .t360-boton--barra[aria-label] .t360-boton__texto {
  display: none;
}
/* El número de fotos, como una insignia sobre el botón (en cualquier ancho). */
.t360 .t360-boton-fotos__cuenta {
  position: absolute;
  top: -4px;
  right: -4px;
}