/* ---------------------------------------------------------------------------
 * NEXO — concepto 3D en la cabecera de Producto (/producto/), en el sitio de
 * la foto (Edgar, 6-9-2026).
 *
 * Adaptado el 2026-09-06 de entrega-nexo-claude/nexo-animacion.html. Del
 * prototipo se conservan el objeto, los materiales y el despiece (eso vive en
 * nexo.js); aquí el envoltorio se reescribe con los tokens del tema: papel,
 * tinta, naranja de marca, Archivo/Instrument Sans/JetBrains Mono. Los
 * rótulos de presentación (logotipo, «Estudio de movimiento», pie) no se
 * integran.
 *
 * El rótulo flotante (.nx-callout) recorre las seis capas durante el despiece
 * y nombra cada una con la disciplina del servicio que la diseña.
 *
 * Estados del visor (atributo data-nexo en #imas-nexo-3d):
 *   espera    aún no se ha pedido Three.js (la sección está lejos)
 *   cargando  biblioteca en camino
 *   listo     escena en marcha
 *   fallo     sin WebGL o sin biblioteca: se queda la imagen fija
 *   sin       móvil (< 768 px) o ahorro de datos: solo el póster, sin pedir nada
 * La altura del escenario se reserva con aspect-ratio antes de cargar nada,
 * así la página no salta cuando entra el lienzo.
 * ------------------------------------------------------------------------ */
/* --- visor --- */
.nx-visor{border-radius:6px;overflow:hidden;background:var(--paper-2);position:relative}
/* Dentro de la cabecera hereda la sombra de .ahero-media; la proporción la
   pone el escenario. Sin barra de controles (Edgar, 6-9-2026): la secuencia
   corre sola en bucle y la pieza se gira arrastrando. */
.ahero-media.nx-visor{aspect-ratio:auto;height:auto}
.nx-stage{position:relative;aspect-ratio:16/10;min-height:340px;max-height:600px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,#fff,var(--paper) 62%,var(--paper-2) 100%)}
.nx-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .6s var(--ease)}
.nx-canvas:active{cursor:grabbing}
[data-nexo="listo"] .nx-canvas{opacity:1}
/* Imagen fija del propio modelo: se ve mientras llega la biblioteca y se queda si no hay 3D. */
.nx-poster,.ahero-media .nx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;
  opacity:.55;transition:opacity .6s var(--ease)}
[data-nexo="fallo"] .nx-poster{opacity:1}
[data-nexo="listo"] .nx-poster{opacity:0}
.nx-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:8px 14px;border-radius:4px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);
  background:rgba(246,246,244,.82);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none}
[data-nexo="cargando"] .nx-loading,[data-nexo="fallo"] .nx-loading{opacity:1}
[data-nexo="fallo"] .nx-loading{text-transform:none;letter-spacing:.02em;font-family:var(--body);font-size:.86rem;white-space:normal;max-width:min(80%,34ch);text-align:center}
[data-nexo="cargando"] .nx-loading-text::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-left:10px;vertical-align:1px;animation:nx-latir 1s infinite alternate}
@keyframes nx-latir{from{opacity:.2}to{opacity:1}}

.nx-stage-top{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;font-size:.62rem}
.nx-hint{color:var(--steel);text-transform:none;letter-spacing:.02em;font-family:var(--body);font-size:.78rem}
[data-nexo="fallo"] .nx-hint,[data-nexo="fallo"] .nx-caption{display:none}
/* «sin»: móvil o ahorro de datos; solo el póster, sin pista, pie ni llamada. */
[data-nexo="sin"] .nx-hint,[data-nexo="sin"] .nx-caption,[data-nexo="sin"] .nx-callout,[data-nexo="sin"] .nx-loading{display:none}
[data-nexo="sin"] .nx-poster{opacity:1}
.nx-caption{position:absolute;bottom:18px;left:18px;right:18px;display:flex;align-items:center;gap:13px;pointer-events:none}
.nx-number{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--orange-deep);font-variant-numeric:tabular-nums;padding-right:13px;border-right:1px solid var(--line-strong)}
.nx-title{font-family:var(--display);font-variation-settings:'wdth' 104;font-weight:500;font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:-.015em;color:var(--ink)}
.nx-callout{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;
  background:rgba(246,246,244,.88);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap;max-width:calc(100% - 24px);will-change:transform}
.nx-pin{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}

/* --- pantallas estrechas --- */
@media (max-width:600px){
  .nx-stage{aspect-ratio:1/1;min-height:320px;max-height:460px}
  .nx-stage-top,.nx-caption{left:14px;right:14px}
  .nx-hint{display:none}
  /* En pantallas estrechas la etiqueta puede partirse en dos líneas. */
  .nx-callout{white-space:normal;line-height:1.35}
}
@media (prefers-reduced-motion:reduce){
  .nx-canvas,.nx-poster,.nx-loading,.nx-callout{transition:none}
  .nx-loading-text::after{animation:none}
}