/* Sistema de flechas del recorrido — compartido por todos los estilos.
 *
 * Cada destino de la escena existe siempre, mire donde mire el visitante:
 *
 *   · La salida que tiene AL FRENTE va sola sobre la foto (.pt-flecha), fija
 *     arriba al centro de la pantalla y al doble de tamaño. No está clavada en
 *     su punto de la imagen: cambia sola al girar la vista.
 *   · Todas las demás viven en las dos columnas de los costados (.pt-chip),
 *     del lado que les toca y ordenadas por cercanía.
 *
 * ── Chevrón desnudo (12-sep-2026) ───────────────────────────────────────────
 * No hay pastilla ni caja en ningún lado: sobre la foto y en los costados va
 * el mismo chevrón blanco con sombra, y nada más. El nombre aparece sólo al
 * pasar el mouse por encima.
 *
 * Es lo más limpio del catálogo y lo más frágil: sin caja detrás, todo el
 * contraste lo sostiene la sombra, así que lleva dos y no una.
 *
 * El dibujo mide 28px pero el área que responde al dedo nunca baja de 44px.
 */

:root {
  /* Tamaño del dibujo. Cada flecha puede pisarlo con su propio `tam` en
   * scenes.js, que tour.js escribe como --pt-tam en el elemento. */
  --pt-tam: 48px;
  /* Área que responde al dedo: el mínimo cómodo, mida lo que mida el dibujo.
   * Con el disco a 48px ya se cumple sobrado; queda por si alguna salida se
   * achica con su propio `tam` en scenes.js. */
  --pt-tacto: 44px;
  --pt-acento: #ffffff;
  --pt-acento-txt: #08192c;
  --pt-panel: rgba(255, 255, 255, .16);
  --pt-borde: rgba(255, 255, 255, .6);
  --pt-texto: #f2f5f6;
  --pt-riel-izq: 12px;
  --pt-riel-der: 12px;
  /* El botón de regresar acompaña al riel izquierdo: en computadora los dos se
   * corren para no quedar debajo de la tarjeta de la escena, que vive pegada
   * al borde izquierdo y centrada. Pegado al borde a secas, el botón quedaba
   * tapado por la tarjeta. */
  --pt-salida-x: var(--pt-riel-izq);

  /* La del frente: del mismo tamaño que las de los costados y bien arriba.
   * El 12% la deja por encima de todo menos del rótulo de la villa y de los
   * mandos, que están en las esquinas y le dejan el centro libre. */
  --pt-tam-frente: var(--pt-tam);
  --pt-frente-y: 12%;

  /* El chevrón, dibujado una sola vez y usado por la flecha y por el riel. */
  --pt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

.pt-capa {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 6;
  pointer-events: none; overflow: hidden;
}
.pt-capa [hidden] { display: none !important; }

/* La marca de agua no vive acá: va estampada dentro de cada foto como una tira
 * de logos que rodea al visitante. La construye marca_agua.py y la aplica
 * build_panos.py al generar los panoramas. */

/* La firma de Nuva vive en cada estilo (.firma-nuva), abajo a la derecha. */

/* El parpadeo entre escenas. Va encima de las flechas para que se apaguen con
 * la foto, y no recibe clics nunca. El color lo define cada estilo. */
.pt-velo {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 9;
  background: var(--pt-velo, #0b0e11);
  opacity: 0; pointer-events: none;
  transition: opacity 500ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .pt-velo { transition-duration: 120ms !important; }
}

/* ------------------------------------------- el chevrón, flecha y riel */

/* La misma figura en los dos lugares: al frente y en los costados. */
.pt-flecha, .pt-chip {
  display: grid; place-items: center;
  width: var(--pt-tam); height: var(--pt-tam);
  padding: 0; appearance: none;
  color: var(--pt-acento);
  background: var(--pt-panel);
  border: 1px solid var(--pt-borde);
  border-radius: 50%;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 3px 16px rgba(0, 0, 0, .42);
  cursor: pointer; pointer-events: auto;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* La del frente: fija en la pantalla, no en la foto, y al doble de tamaño.
 * Es la única que se dibuja encima de la fotografía. */
.pt-flecha {
  position: absolute;
  left: 50%; top: var(--pt-frente-y);
  transform: translate(-50%, -50%);
  z-index: 7;   /* debajo del velo (9), que las tapa al cambiar de escena */
  width: var(--pt-tam-frente); height: var(--pt-tam-frente);
}

/* La del frente apunta SIEMPRE hacia arriba: quiere decir "seguí adelante".
 * Estando fija arriba al centro y no sobre la puerta, seguir el rumbo del
 * destino confundía — un chevrón hacia la derecha se leía como "andá a la
 * derecha". tour.js sigue escribiendo --pt-giro desde el campo `giro` de
 * scenes.js; para volver al rumbo de cada destino alcanza con cambiar el
 * -90deg de acá por rotate(var(--pt-giro, 0deg)). */
.pt-flecha .pt-flecha__punta { transform: rotate(-90deg); }

/* El colchón del dedo: invisible, centrado, nunca menor a --pt-tacto. Sin
 * esto, un disco de 28px es casi imposible de tocar en un teléfono. */
.pt-flecha::before, .pt-chip::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(var(--pt-tacto), var(--pt-tam));
  height: max(var(--pt-tacto), var(--pt-tam));
}

.pt-flecha__punta, .pt-chip__punta {
  /* El chevrón vive dentro del disco, así que ocupa poco más de la mitad. */
  width: 52%; height: 52%;
  background: currentColor;
  -webkit-mask: var(--pt-chevron) center / contain no-repeat;
          mask: var(--pt-chevron) center / contain no-repeat;
  /* Con el disco de cristal el fondo no sostiene el contraste: sobre cielo
   * claro un chevrón blanco sin sombra desaparece. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

/* Al pasar por encima el disco se llena de dorado y el chevrón se da vuelta a
 * marino: el cambio se ve de lejos y no mueve nada de sitio. */
.pt-flecha:hover, .pt-chip:hover,
.pt-flecha:focus-visible, .pt-chip:focus-visible {
  background: var(--pt-acento); color: var(--pt-acento-txt);
  border-color: var(--pt-acento);
}
.pt-flecha:hover .pt-flecha__punta, .pt-chip:hover .pt-chip__punta,
.pt-flecha:focus-visible .pt-flecha__punta,
.pt-chip:focus-visible .pt-chip__punta { filter: none; }
.pt-flecha:active, .pt-chip:active { filter: brightness(.88); }
.pt-flecha:focus-visible, .pt-chip:focus-visible {
  outline: 2px solid var(--pt-acento); outline-offset: 4px;
}

/* ------------------------------------------------------ el nombre, siempre */

/* Los nombres están a la vista todo el tiempo, no sólo al pasar el mouse: en
 * un teléfono no existe "pasar por encima", y sin nombre el visitante tocaba
 * a ciegas.
 *
 * La clave para que ocho de estos no se vean como un desorden es que sean
 * PEQUEÑOS y PAREJOS: mismo tamaño de letra, mismo ancho máximo en píxeles
 * —no en porcentaje de pantalla, que los dejaba de anchos distintos— y el
 * texto largo cortado con puntos suspensivos. Así los de un costado forman
 * una columna alineada en vez de un borde dentado. */
.pt-flecha__txt, .pt-chip__txt {
  position: absolute; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: rgba(8, 18, 30, .62);
  border-radius: 5px; padding: 3px 7px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  pointer-events: none;
  transition: background .18s ease;
}

/* Todos los nombres van DEBAJO de su flecha, incluidos los de los costados.
 * El de la del centro va centrado bajo el disco. */
.pt-flecha__txt {
  top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  font-size: 11px; max-width: 180px;
}

/* En los costados el nombre también cuelga debajo, pero alineado con el borde
 * exterior —derecho en la columna derecha, izquierdo en la izquierda— en vez
 * de centrado bajo el disco. Centrado, un nombre largo se salía de la pantalla
 * y la columna quedaba con el borde dentado; así los discos y los nombres
 * comparten una misma línea recta. */
.pt-chip__txt { top: calc(100% + 1px); max-width: 124px; }
.pt-riel--izq .pt-chip__txt { left: 0; }
.pt-riel--der .pt-chip__txt { right: 0; }

/* Con el mouse encima sólo se refuerza el fondo: nada se mueve de lugar. */
.pt-flecha:hover .pt-flecha__txt, .pt-flecha:focus-visible .pt-flecha__txt,
.pt-chip:hover .pt-chip__txt,     .pt-chip:focus-visible .pt-chip__txt {
  background: rgba(8, 18, 30, .92);
}

/* --------------------------------------------------------- botón Salida */

/* El único con texto a la vista. Deshace el último paso: vuelve a la escena de
 * la que vino el visitante, sea cual sea. Con los discos mudos hace falta una
 * salida segura y siempre en el mismo lugar — y es lo que convierte el disco
 * de «Pasillo superior», dentro de una habitación, en «Salida».
 *
 * Va arriba a la izquierda, debajo del rótulo de la villa: la única franja que
 * queda libre tanto en computadora como en teléfono. Discreto a propósito —
 * tiene que estar, no llamar la atención. */
.pt-salida {
  position: absolute;
  left: var(--pt-salida-x); top: 50%;
  transform: translateY(-50%);
  z-index: 8;   /* por encima de los discos, debajo del velo */
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 13px 0 9px;
  appearance: none; cursor: pointer; pointer-events: auto;
  font-family: inherit; font-size: 10px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pt-texto);
  background: rgba(8, 18, 30, .5);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pt-salida:hover, .pt-salida:focus-visible {
  background: var(--pt-acento); color: var(--pt-acento-txt);
  border-color: var(--pt-acento);
}
.pt-salida:focus-visible { outline: 2px solid var(--pt-acento); outline-offset: 3px; }

/* A la mitad de tamaño queda por debajo del mínimo cómodo para el dedo, así
 * que lleva el mismo colchón invisible que las flechas: se ve chico, se toca
 * grande. */
.pt-salida::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 16px); height: var(--pt-tacto);
}

/* La punta mira a la izquierda: es el gesto de volver. */
.pt-salida__punta {
  flex: none; width: 11px; height: 11px;
  background: currentColor;
  transform: rotate(180deg);
  -webkit-mask: var(--pt-chevron) center / contain no-repeat;
          mask: var(--pt-chevron) center / contain no-repeat;
}

/* ------------------------------------------------- riel de los costados */

.pt-riel {
  z-index: 7;   /* debajo del velo, que tapa todo en la transición */ 
  /* La altura del riel se puede subir por estilo: en móvil el panel de
   * amenidades ocupa la mitad de abajo y las flechas le caerían encima. */
  /* El riel izquierdo ya no puede vivir en el centro: ahí está el botón de
   * regresar. Los dos suben, para que las dos columnas queden a la misma
   * altura entre sí y el botón tenga el centro libre. */
  position: absolute; top: var(--pt-riel-y, 32%); transform: translateY(-50%);
  /* El hueco entre discos deja sitio al nombre, que ahora cuelga debajo de
   * cada uno en vez de al costado. Es generoso a propósito: con poco aire el
   * nombre quedaba a la misma distancia de su disco que del siguiente y no se
   * entendía a cuál de los dos pertenecía. */
  display: flex; flex-direction: column; gap: 27px;
  max-height: 56%; pointer-events: none;
  /* Sin overflow a propósito: el nombre sale hacia el costado, fuera del ancho
   * del riel, y cualquier recorte se lo comería. Los discos se aprietan con el
   * gap cuando son muchos. */
}
.pt-riel--izq { left: var(--pt-riel-izq); align-items: flex-start; }
.pt-riel--der { right: var(--pt-riel-der); align-items: flex-end; }

/* En el riel el chevrón mira hacia afuera: a la izquierda en el riel
 * izquierdo, a la derecha en el derecho. No sigue el rumbo del destino como
 * las de la foto, porque acá lo que dice es "está para ese lado". */
.pt-chip { position: relative; }
.pt-riel--izq .pt-chip__punta { transform: rotate(180deg); }
.pt-riel--der .pt-chip__punta { transform: rotate(0deg); }

/* ----------------------------------------------------------- en celular */

@media (max-width: 720px) {
  .pt-flecha__txt, .pt-chip__txt { font-size: 11.5px; max-width: 56vw; padding: 4px 8px; }
  .pt-riel { gap: 25px; max-height: 68%; pointer-events: auto; }
  :root {
    --pt-riel-izq: 6px; --pt-riel-der: 6px;
    /* En vertical sobra alto arriba: la del frente baja un poco para no
     * quedar pegada al rótulo de la villa. */
    --pt-frente-y: 14%;
    --pt-riel-y: 34%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-flecha, .pt-chip, .pt-flecha__txt, .pt-chip__txt { transition-duration: .01ms !important; }
}