/* ============================================================================
   IMÁGENES 360 · las piezas que son VISORES, no vídeos
   Contrato: docs/02-DECLARACIONES.md §21.5-novodecies
   ----------------------------------------------------------------------------
   Por qué esta sección necesita CSS propio cuando las dos anteriores no:

   Todas las secciones anteriores demuestran con VÍDEOS. Un vídeo tiene
   proporción fija (16:9) y `.dn-pieza` ya la resuelve. Aquí la prueba son tres
   VISORES 360 NAVEGABLES: el usuario arrastra y la vista gira. Un visor
   necesita una CAJA de alto fijo donde el arrastre tenga sentido — si la caja
   sigue la proporción de la panorámica (2:1) queda una banda de 200px de alto
   en PC y el arrastre es incómodo.

   ORIGEN: `ds-v2/code/prototipo/maqueta-imagenes-360.html`, bloque `.vi360`.
   SeCOPIA la forma (posición absoluta, cursor grab/grabbing, `touch-action:none`
   —esto último es lo que permite arrastrar en el móvil sin que la página se
   desplace— y la pista que aparece al pasar por encima).
   Se CAMBIA el vestido a los tokens del contrato.

   TABLA DE TRADUCCIÓN DE TOKENS:
     original              aquí
     --sim-fondo        →  --superficie
     --bd               →  --borde
     --acento-rgb       →  --acento-rgb   (ya existe, 01-declaraciones.css:93)
     #0d1117 (fijo)     →  --superficie      (el negro del lienzo 3D)

   LOS BLANCOS FIJOS DEL ORIGINAL, TRADUCIDOS:
     rgba(6,9,14,.62)          → la pista va sobre el lienzo, que es oscuro
                                  SIEMPRE: se conserva oscuro, igual que en
                                  blockchain el pie de la pieza (§21.5-octodecies).
     rgba(255,255,255,.14)     → --borde-hielo, que ya existe para cristal
     #eaf0f8                   → --fg-sobre-video
   Verificado leyendo getComputedStyle en los dos temas, no a ojo.
   ========================================================================== */

/* ── LA REJILLA ─────────────────────────────────────────────────────────────
   Mismos cortes que `.dn-riel`: 3 columnas en PC, 1 en tablet y en teléfono.
   Un visor 360 en tablet a 2 columnas quedaría de 330px: demasiado estrecho
   para arrastrar con el dedo. Por eso baja a 1 antes que las piezas con vídeo. */
.i3-riel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(24px, 3.4vh, 36px);
  width: 100%;
}

@media (max-width: 1099px) {
  .i3-riel { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}

/* ── LA PIEZA ─────────────────────────────────────────────────────────────── */
.i3-pieza {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  margin: 0;
  border-radius: var(--radio-3, 14px);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  overflow: hidden;
  transition: border-color .4s, transform .4s;
}

.i3-pieza:hover {
  border-color: var(--acento-borde);
  transform: translateY(-4px);
}

/* ── LA CAJA DEL VISOR ──────────────────────────────────────────────────────
   Alto fijo, no proporción. En PC 260px es el alto que usaba el original y con
   el que el arrastre se siente bien; en tablet y teléfono crece para que quepa
   más panorama, que es lo que el dedo agradece. */
.i3-panel {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}

@media (max-width: 1099px) {
  .i3-panel { height: 300px; }
}

@media (max-width: 719px) {
  .i3-panel { height: 240px; }
}

/* ══ EL VISOR — CSS REAL DE LA MAQUETA ═════════════════════════════════════
   `touch-action: none` NO es decorativo: sin él, en el móvil el navegador se
   queda el gesto para hacer scroll y el visor no gira. Es la línea que hace
   que funcione en táctil.
   `user-select: none` evita que el arrastre seleccione texto de la página. */
.vi360 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--superficie);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.vi360.arrastrando { cursor: grabbing; }

/* El canvas se pinta por dentro y NO recibe los punteros: los eventos los
   captura `.vi360`, que es quien tiene los listeners. */
.vi360 canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ── LA PISTA «Arrastre para girar» ────────────────────────────────────────
   Aparece al pasar por encima y SE VA al empezar a arrastrar: en cuanto el
   usuario ha entendido el gesto, el cartel solo estorba. En táctil no hay
   hover, así que se queda visible (media query más abajo).

   Va sobre el lienzo, que es oscuro en los dos temas, así que sus colores son
   los del tema oscuro a propósito — igual que el pie de blockchain. */
.vi360__pista {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(6, 9, 14, .62);
  color: #eaf0f8;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: opacity .3s ease;
  opacity: 0;
}

.vi360:hover .vi360__pista { opacity: 1; }
.vi360.arrastrando .vi360__pista,
.vi360.tocado .vi360__pista { opacity: 0; }

.vi360__pista svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* Sin ratón no hay hover: la pista tiene que verse sola, o nadie sabe que se
   puede arrastrar. */
@media (hover: none) {
  .vi360__pista { opacity: 1; }
}

/* ── LA CIFRA ─────────────────────────────────────────────────────────────
   Igual que en las piezas con vídeo: cristal arriba a la derecha. */
.i3-cifra {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(6, 9, 14, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.i3-num {
  font-size: .82rem;
  font-weight: 800;
  color: var(--naranja-500);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ── EL PIE ───────────────────────────────────────────────────────────────
   Debajo del visor, no encima: aquí el visor ocupa toda la caja y taparle
   parte con texto dejaría menos sitio para girar. */
.i3-pie {
  display: block;
  padding: 15px 15px 17px;
}

.i3-tag {
  display: block;
  margin-bottom: 5px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}

.i3-h {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(.86rem, 1.05vw, 1.02rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}

.i3-pie small {
  display: block;
  font-size: .73rem;
  line-height: 1.5;
  color: var(--mut);
}

.i3-dato {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--borde);
  font-size: .62rem;
  font-style: normal;
  line-height: 1.4;
  color: var(--mut);
}

/* ── ANZUELOS PROPIOS DE LA SECCIÓN ───────────────────────────────────────
   Sin declaraciones: el estilo viene de `.au-hero`. Se declaran porque el
   verificador exige regla para toda clase del HTML, y con razón: una clase sin
   regla es indistinguible de un error de tecleo. */
.i3-hero,
.i3-hero__lienzo,
.i3-hero__rotulo { /* anzuelos, el estilo viene de .au-hero */ }

/* ── SI NO HAY WEBGL ──────────────────────────────────────────────────────
   El motor añade `.sin-gl` y se queda la caja con el fondo del lienzo. Sin
   esto el usuario ve un hueco negro sin saber por qué. Se pone una nota. */
.vi360.sin-gl::after {
  content: "Este navegador no puede mostrar el recorrido 360";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font-size: .72rem;
  color: #8a94a6;
}

/* ── QUIEN PREFIERE NO VER MOVIMIENTO ─────────────────────────────────────
   El visor NO se anima solo: solo gira si el usuario arrastra. Así que aquí no
   hay nada que apagar. Se deja constancia para que nadie «arregle» lo que no
   está roto añadiendo una animación automática. */