/* Visor del gemelo digital 3D (dúplex en pozo, Fernández Oro). Usa los tokens de gj-marca.css. */
.visor-3d { display: grid; gap: 1.6rem; margin: 0 0 2.5rem; }
.visor-3d [hidden] { display: none !important; }
.visor-intro { display: grid; gap: 0.6rem; max-width: 62ch; }
.visor-eyebrow { font-family: 'Supreme', sans-serif; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--gj-texto-tenue); }
.visor-intro h1, .visor-intro h2 { font-family: 'General Sans', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--gj-texto);
  margin: 0; text-wrap: balance; }
.visor-intro p { margin: 0; color: var(--gj-texto-tenue); font-size: 1.05rem; line-height: 1.6; }

.visor-caja { background: var(--gj-panel); border: 1px solid var(--gj-borde); border-radius: 14px;
  box-shadow: var(--shadow-md); overflow: hidden; display: grid; }
.visor-herramientas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--gj-borde); }
.visor-niveles { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--gj-texto); border-radius: 999px; }
.visor-niveles button { font: 600 0.82rem/1 'Supreme', sans-serif; letter-spacing: 0; text-transform: none; color: var(--gj-texto);
  background: transparent; border: 0; border-radius: 999px; padding: 10px 16px; height: auto; line-height: 1;
  box-shadow: none; cursor: pointer; }
.visor-niveles button[aria-pressed="true"] { background: var(--gj-texto); color: #fff; }
.visor-niveles button:disabled { opacity: 0.45; cursor: not-allowed; }
.visor-niveles button:focus-visible, .visor-abrir:focus-visible { outline: 2px solid var(--gj-texto); outline-offset: 3px; }
.visor-ayuda { font-size: 0.82rem; color: var(--gj-texto-tenue); }

.visor-escena { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: var(--gj-fondo); }
.visor-lienzo { position: absolute; inset: 0; }
.visor-lienzo canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.visor-lienzo canvas:active { cursor: grabbing; }
.visor-poster { position: absolute; inset: 0; display: grid; place-items: center; }
.visor-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visor-abrir { position: relative; font: 600 0.95rem/1 'Supreme', sans-serif; letter-spacing: 0; text-transform: none;
  background: var(--gj-texto); color: #fff; border: 0; border-radius: 8px; padding: 15px 22px; height: auto; line-height: 1;
  box-shadow: var(--shadow-md); cursor: pointer; }
.visor-abrir:hover { background: var(--gj-oliva-claro); }
.visor-cargando { position: absolute; left: 16px; top: 14px; z-index: 2; box-shadow: var(--shadow-md); font-size: 0.82rem; color: var(--gj-texto-tenue);
  background: var(--gj-panel); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--gj-borde); }
.visor-zoom { position: absolute; right: 14px; top: 14px; z-index: 2; display: grid; gap: 6px; }
#main .visor-zoom button, .visor-zoom button { width: 42px; height: 42px; min-width: 0; padding: 0; margin: 0; border-radius: 50%; border: 0;
  background: var(--gj-texto); color: #fff; font: 600 1.35rem/1 'Supreme', sans-serif; letter-spacing: 0; text-transform: none;
  box-shadow: var(--shadow-md); cursor: pointer; display: grid; place-items: center; }
#main .visor-zoom button:hover, .visor-zoom button:hover { background: var(--gj-oliva-claro); color: #fff; }
.visor-zoom button:focus-visible { outline: 2px solid var(--gj-texto); outline-offset: 3px; }
.visor-leyenda { font-size: 0.82rem; color: var(--gj-texto-tenue); padding: 12px 16px; border-top: 1px solid var(--gj-borde); margin: 0; }

@media screen and (max-width: 736px) {
  .visor-escena { aspect-ratio: 4 / 5; }
  .visor-niveles button { padding: 10px 13px; }
}