/* =========================================================
   Needle Syndicate · Hero "showroom" (CSS 3D, 2.5D en móvil)

   Principios:
   1. Toda la geometría se expresa en unidades relativas al ancho del
      escenario (cqw con fallback vw). El resultado es la MISMA composición
      escalada en PC, tablet y móvil; solo cambia la proporción del escenario.
   2. Texto y botones viven en un overlay plano. Las paredes solo llevan
      imágenes y el logo. Nada legible dentro de la perspectiva.
   3. Sin JS obligatorio: sin él la sala se ve igual, solo sin parallax.
   ========================================================= */

.ns-room {
  --room-w: 100vw;              /* fallback */
  --persp: 90vw;                /* distancia de cámara */
  --depth: 76vw;                /* profundidad: la pared del fondo se ve al 54 % (90/(90+76)) */
  --ratio: 16 / 9;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --wall-pad: 6%;

  position: relative;
  isolation: isolate;
  background: var(--ns-black);
  overflow: hidden;
  container-type: inline-size;
}
@supports (width: 1cqw) {
  .ns-room { --persp: 90cqw; --depth: 76cqw; }
}
@media (max-width: 1023px) { .ns-room { --ratio: 4 / 3; } }
@media (max-width: 639px)  { .ns-room { --ratio: 3 / 4; --persp: 96vw; --depth: 78vw; } }
@supports (width: 1cqw) {
  @media (max-width: 639px) { .ns-room { --persp: 96cqw; --depth: 78cqw; } }
}

/* Escenario: caja con proporción fija, cámara con perspectiva */
.ns-room__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  max-height: 92svh;
  margin-inline: auto;
  perspective: var(--persp);
  perspective-origin: 50% 37%;
  overflow: hidden;
}
/* Si max-height recorta, el escenario se centra y las paredes se
   recalculan por porcentaje, así que nunca se descuadra. */

.ns-room__box {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 420ms var(--ns-ease);
  will-change: transform;
}

/* ---------- Paredes ---------- */
.ns-room__wall {
  position: absolute;
  background: linear-gradient(180deg, var(--ns-wall) 0%, var(--ns-wall-deep) 100%);
  backface-visibility: hidden;
  overflow: hidden;
}
/* Paredes laterales: la luz entra por delante y se pierde al fondo (eje X = profundidad) */
.ns-room__wall--left {
  background:
    radial-gradient(70% 90% at 0% 30%, rgba(255, 90, 110, 0.28), transparent 65%),
    linear-gradient(90deg, #b8112b 0%, #8a0b1f 45%, var(--ns-wall-deep) 100%);
}
.ns-room__wall--right {
  background:
    radial-gradient(70% 90% at 100% 30%, rgba(255, 90, 110, 0.28), transparent 65%),
    linear-gradient(270deg, #b8112b 0%, #8a0b1f 45%, var(--ns-wall-deep) 100%);
}
/* Pared del fondo: un poco más oscura para que el logo destaque */
.ns-room__wall--back {
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(0, 0, 0, 0.35), transparent 70%),
    linear-gradient(180deg, #8a0b1f 0%, var(--ns-wall-deep) 100%);
  border: 2px solid var(--ns-neon);
  box-shadow: 0 0 14px var(--ns-neon), 0 0 48px rgba(255, 31, 74, 0.5);
}
.ns-room__wall::after { /* textura sutil de pared, sin imagen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}

.ns-room__wall--back {
  left: 0; top: 0; width: 100%; height: 100%;
  transform: translateZ(calc(var(--depth) * -1));
  /* El logo va en la mitad superior de la pared: el título plano ocupa la inferior sin pisarlo. */
  display: grid; place-items: start center; padding-top: 7%;
}
.ns-room__wall--left {
  left: 0; top: 0; width: var(--depth); height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
}
.ns-room__wall--right {
  right: 0; top: 0; width: var(--depth); height: 100%;
  transform-origin: right center;
  transform: rotateY(-90deg);
}

/* Techo y suelo: planos negros; el suelo refleja las paredes */
.ns-room__ceiling, .ns-room__floor {
  position: absolute; left: 0; width: 100%; height: var(--depth);
  background: var(--ns-black);
  backface-visibility: hidden;
  /* Las aristas de neón viven aquí: laterales (diagonales) y fondo. El borde
     frontal se quita porque coincide con el marco del escenario. */
  border: 2px solid var(--ns-neon);
  box-shadow: 0 0 14px var(--ns-neon), 0 0 40px rgba(255, 31, 74, 0.45);
}
.ns-room__ceiling {
  top: 0; transform-origin: top center; transform: rotateX(-90deg);
  border-top: 0;
  background: linear-gradient(180deg, #050403, #0e0b0a);
}
.ns-room__floor {
  bottom: 0; transform-origin: bottom center; transform: rotateX(90deg);
  border-bottom: 0;
  background:
    radial-gradient(60% 55% at 50% 15%, rgba(200, 16, 46, 0.5), transparent 70%),
    linear-gradient(180deg, #1a0a0c 0%, #0e0b0a 70%);
}

/* Contenido de las paredes laterales: una imagen grande enmarcada */
.ns-room__frame {
  position: absolute; inset: var(--wall-pad);
  margin: 0;
  background: #0b0908;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.ns-room__frame img { width: 100%; height: 100%; object-fit: cover; }
.ns-room__frame--placeholder {
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(239, 230, 216, 0.12), transparent 70%),
    linear-gradient(160deg, #1c1312, #0b0908);
}

/* Panel Pro (pared derecha): solo un gráfico; el texto va en el overlay */
.ns-room__frame--pro {
  background:
    linear-gradient(135deg, rgba(200, 16, 46, 0.35), transparent 55%),
    linear-gradient(160deg, #1c1312, #0b0908);
}

/* Logo en la pared del fondo */
.ns-room__logo {
  width: 40%; aspect-ratio: 1;
  display: grid; place-items: center;
  background: #0b0908;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
}
.ns-room__logo model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.ns-room__logo img { width: 78%; height: auto; }

/* ---------- Overlay plano (lo único legible) ---------- */
.ns-room__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(14px, 3vw, 40px) var(--ns-gutter);
  pointer-events: none;
}
.ns-room__overlay > * { pointer-events: auto; }
.ns-room__top { display: flex; justify-content: center; }
.ns-room__eyebrow { margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }

.ns-room__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--ns-space-4);
}
.ns-room__center { grid-column: 2; text-align: center; max-width: 60ch; }
.ns-room__title {
  margin: 0;
  font-size: var(--ns-display-xl);
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 31, 74, 0.55), 0 4px 30px rgba(0, 0, 0, 0.9);
}
.ns-room__tagline { margin: 0.5rem 0 1.1rem; font-size: var(--ns-text-md); color: var(--ns-bone); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.ns-room__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ns-space-3); }

/* Etiquetas planas que "señalan" cada pared */
.ns-room__tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  white-space: nowrap;
  font-size: var(--ns-text-xs); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--ns-bone); background: rgba(14, 11, 10, 0.7); border: 1px solid var(--ns-bone-30);
  backdrop-filter: blur(6px);
  transition: border-color var(--ns-dur-fast), transform var(--ns-dur-fast) var(--ns-ease);
}
.ns-room__tag:hover { border-color: var(--ns-neon); transform: translateY(-1px); }
.ns-room__tag--left { grid-column: 1; justify-self: start; }
.ns-room__tag--right { grid-column: 3; justify-self: end; }
.ns-room__tag::before { content: ""; width: 6px; height: 6px; background: var(--ns-neon); box-shadow: 0 0 8px var(--ns-neon); }

/* Tablet y móvil: las etiquetas bajan debajo del título para que el título quepa en una línea */
@media (max-width: 1023px) {
  .ns-room__bottom { grid-template-columns: 1fr 1fr; }
  .ns-room__center { grid-column: 1 / -1; grid-row: 1; }
  .ns-room__tag--left { grid-column: 1; grid-row: 2; }
  .ns-room__tag--right { grid-column: 2; grid-row: 2; }
  .ns-room__tag { padding: 0.5rem 0.7rem; letter-spacing: 0.1em; font-size: 0.68rem; }
  .ns-room__tagline { font-size: var(--ns-text-sm); margin-bottom: 0.8rem; }
  .ns-room__ctas .ns-btn { min-height: 44px; padding: 0.6rem 1.1rem; }
}

/* ---------- Sin animación de entrada ----------
   Regla aprendida en la verificación (Chrome 153):
   - Animar `transform` o `filter` en .ns-room__box o en las paredes APLANA el
     preserve-3d y la sala se convierte en rectángulos planos.
   - Una animación de opacidad en pestañas en segundo plano puede quedarse a
     medias. La sala debe verse completa siempre, con o sin JS, así que no hay
     fade de entrada. El único movimiento es el parallax de puntero (transition). */
@media (prefers-reduced-motion: reduce) {
  .ns-room__box { transition: none; }
}

/* ---------- Estantería plana bajo la sala ---------- */
.ns-shelf { position: relative; z-index: 3; background: linear-gradient(180deg, #120c0c, var(--ns-black) 30%); padding-block: var(--ns-space-8) var(--ns-space-12); }
.ns-shelf__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-4); margin-bottom: var(--ns-space-6); }
.ns-shelf__title { margin: 0; font-size: var(--ns-display-lg); }
.ns-shelf__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-space-4); }
@media (max-width: 1023px) { .ns-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .ns-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-3); } }