/* =============================================================================
   Soft Imperio — Tienda 3D (experiencia de compra caminable)
   Apartado APARTE del catálogo clásico: pantalla completa, identidad oscura con
   verde neón. Nada de esto toca el resto del sitio (todo cuelga de .t3d-*).
   El catálogo de /productos sigue siendo el camino principal de compra.
   ============================================================================= */

/* Colores propios de la experiencia: NO usa los tokens claros del sitio, así el
   3D se ve igual aunque el resto de la web sea de identidad clara. */
.t3d {
  --t3d-bg: #05080a;
  --t3d-bg2: #0a1014;
  --t3d-green: #2fe0a0;
  --t3d-green-dim: #17a877;
  --t3d-ink: #eaf6f0;
  --t3d-faint: #9fb5ac;
  --t3d-line: rgba(47, 224, 160, 0.22);
}

/* La página es una experiencia a pantalla completa: sin scroll, sin rebote al
   arrastrar en el celular (si no, mover la cámara arrastra la página). */
html.t3d-page,
html.t3d-page body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05080a;
}

.t3d {
  position: fixed;
  inset: 0;
  color: var(--t3d-ink);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(120% 90% at 50% 0%, #0b1418 0%, #05080a 70%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.t3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* el arrastre mueve la cámara, no la página */
  cursor: grab;
}
.t3d canvas.is-locked { cursor: none; }
.t3d canvas:active { cursor: grabbing; }

/* ===========================================================================
   INTRO — pantalla negra con verde. También hace de pantalla de carga: el 3D y
   el catálogo se preparan detrás mientras el cliente lee.
   =========================================================================== */
.t3d-intro {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: #000;
  transition: opacity 0.75s ease, visibility 0.75s;
}
.t3d-intro.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Rejilla verde que se pierde en el horizonte + latido suave del fondo */
.t3d-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 55%, rgba(47, 224, 160, 0.14), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(47, 224, 160, 0.055) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(47, 224, 160, 0.055) 38px 39px);
  animation: t3dPulse 5.5s ease-in-out infinite;
}
/* Barrido de escáner que baja despacio */
.t3d-intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26vh;
  top: -30vh;
  background: linear-gradient(180deg, transparent, rgba(47, 224, 160, 0.09), transparent);
  animation: t3dScan 6s linear infinite;
}
@keyframes t3dPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes t3dScan {
  0% { top: -30vh; }
  100% { top: 115vh; }
}

.t3d-intro__in {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.t3d-intro__mark {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.6rem;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(47, 224, 160, 0.1);
  border: 1px solid var(--t3d-line);
  box-shadow: 0 0 40px rgba(47, 224, 160, 0.25);
  animation: t3dFloat 4s ease-in-out infinite;
}
.t3d-intro__mark img { width: 38px; height: 38px; object-fit: contain; }
@keyframes t3dFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.t3d-intro__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--t3d-green);
  opacity: 0;
  animation: t3dIn 0.8s ease 0.15s forwards;
}

.t3d-intro__title {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 6.4vw, 3.6rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0;
  animation: t3dIn 0.9s ease 0.4s forwards;
}
.t3d-intro__title em {
  font-style: normal;
  color: var(--t3d-green);
  text-shadow: 0 0 34px rgba(47, 224, 160, 0.55);
}

.t3d-intro__sub {
  margin: 0 auto 2.4rem;
  max-width: 34rem;
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  line-height: 1.6;
  color: var(--t3d-faint);
  opacity: 0;
  animation: t3dIn 0.9s ease 0.75s forwards;
}

@keyframes t3dIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Botón de entrada: late para invitar al toque (y ese toque es el que
   DESBLOQUEA el audio en el celular — los navegadores lo exigen). */
.t3d-enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2.2rem;
  border: 1px solid var(--t3d-green);
  border-radius: 999px;
  background: rgba(47, 224, 160, 0.08);
  color: var(--t3d-green);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  animation: t3dIn 0.8s ease 1.05s forwards;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.t3d-enter:hover:not(:disabled) {
  background: rgba(47, 224, 160, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(47, 224, 160, 0.22);
}
.t3d-enter:disabled { opacity: 0.5; cursor: progress; animation: t3dIn 0.8s ease 1.05s forwards; }
.t3d-enter__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(47, 224, 160, 0.7);
  animation: t3dPing 1.8s ease-out infinite;
}
@keyframes t3dPing {
  0% { box-shadow: 0 0 0 0 rgba(47, 224, 160, 0.6); }
  70% { box-shadow: 0 0 0 16px rgba(47, 224, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 224, 160, 0); }
}

.t3d-intro__skip {
  display: block;
  margin: 1.6rem auto 0;
  background: none;
  border: 0;
  color: var(--t3d-faint);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  opacity: 0;
  animation: t3dIn 0.8s ease 1.35s forwards;
}
.t3d-intro__skip:hover { color: var(--t3d-ink); }

/* ===========================================================================
   HUD
   =========================================================================== */
.t3d-hud {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}
.t3d.is-live .t3d-hud { opacity: 1; }
.t3d-hud button { pointer-events: auto; }

/* ---------------------------------------------------------------------------
   MANO EN PRIMERA PERSONA
   Dos láminas 2D superpuestas (suelta / señalando) que se cruzan al acercarse
   a un producto. Va POR ENCIMA del 3D y POR DEBAJO del HUD, igual que el arma
   en cualquier juego. Como es una capa del navegador y no geometría, moverla
   cada fotograma no le cuesta nada a la tarjeta gráfica.
   --------------------------------------------------------------------------- */
.t3d-hand {
  position: absolute;
  right: -4%;
  bottom: -9%;
  z-index: 15;
  width: clamp(185px, 24vw, 320px);
  aspect-ratio: 460 / 560;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.45s;
  /* Sin filter: una sombra de CSS sobre una capa que cambia de posición cada
     fotograma le da trabajo extra al navegador. La sombra ya va pintada en el
     dibujo (contorno oscuro del contorno de la mano). */
  will-change: transform;
}
.t3d.is-live .t3d-hand { opacity: 1; }
.t3d-hand canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.18s ease;
}
.t3d-hand .t3d-hand__b { opacity: 0; }
.t3d-hand.is-near .t3d-hand__a { opacity: 0; }
.t3d-hand.is-near .t3d-hand__b { opacity: 1; }

.t3d-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: max(0.9rem, env(safe-area-inset-top)) 1rem 0.9rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
}
.t3d-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.t3d-brand img { width: 26px; height: 26px; object-fit: contain; }
.t3d-brand span { opacity: 0.9; }
.t3d-brand b {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t3d-green);
  border: 1px solid var(--t3d-line);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.t3d-topbar__sp { flex: 1; }

.t3d-icobtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 16, 20, 0.62);
  backdrop-filter: blur(8px);
  color: var(--t3d-ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.t3d-icobtn:hover { background: rgba(47, 224, 160, 0.16); border-color: var(--t3d-line); }
.t3d-icobtn svg { width: 19px; height: 19px; }
.t3d-icobtn.is-off { color: var(--t3d-faint); opacity: 0.75; }

.t3d-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 16, 20, 0.62);
  backdrop-filter: blur(8px);
  color: var(--t3d-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.2s ease;
}
.t3d-exit:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Cartel de ayuda de controles (se va solo) ---- */
.t3d-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 1.4rem;
  border-radius: 16px;
  border: 1px solid var(--t3d-line);
  background: rgba(5, 8, 10, 0.78);
  backdrop-filter: blur(10px);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--t3d-ink);
  transition: opacity 0.6s ease;
  max-width: min(90vw, 26rem);
}
.t3d-tip.is-gone { opacity: 0; }
.t3d-tip kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.12em 0.42em;
  margin: 0 0.1em;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82em;
}
.t3d-tip b { color: var(--t3d-green); }

/* ---- Retícula al centro (solo escritorio) ---- */
.t3d-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
}
.t3d-dot.is-hot {
  transform: scale(2.1);
  background: var(--t3d-green);
}
@media (pointer: coarse) { .t3d-dot { display: none; } }

/* ===========================================================================
   LENGUAJE DE JUEGO (28-jul-2026, pedido del dueño: "que se vea tipo GTA").
   Tres cosas hacen que una escena 3D en un navegador se lea como videojuego y
   no como "una página con un canvas": la VIÑETA en las esquinas, un MINIMAPA
   que gira contigo, y textos en mayúsculas con sombra dura pegados a los
   bordes de la pantalla en vez de tarjetas flotantes centradas.
   =========================================================================== */

/* Sombra dura: la que llevan los HUD de consola para leerse sobre cualquier
   fondo, claro u oscuro, sin necesidad de una caja detrás. */
.t3d-hud {
  --t3d-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.75);
}

.t3d-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 105% at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.5) 88%, rgba(0, 0, 0, 0.72) 100%);
}
/* Grano de película: rompe los degradados perfectos y quita ese aire de
   "hecho por computadora". OJO — la primera versión usaba mix-blend-mode y
   eso obliga al navegador a MEZCLAR toda la pantalla contra el 3D en cada
   fotograma, justo encima de un lienzo que se repinta 60 veces por segundo.
   Se veía lindo y costaba carísimo. Ahora es una capa suelta y opaca al 4 %:
   el navegador la compone una vez y se olvida. */
.t3d-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.04;
}

/* ---- Contador de recorrido (arriba a la derecha, como el dinero) ---- */
.t3d-score {
  position: absolute;
  top: max(4.6rem, calc(env(safe-area-inset-top) + 4rem));
  right: max(1rem, env(safe-area-inset-right));
  text-align: right;
  line-height: 1;
  text-shadow: var(--t3d-shadow);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.t3d-score.is-on { opacity: 1; }
.t3d-score__lbl {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(234, 246, 240, 0.6);
  margin-bottom: 0.3rem;
}
.t3d-score b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  color: var(--t3d-green);
}
.t3d-score b i {
  font-style: normal;
  font-size: 0.62em;
  color: rgba(234, 246, 240, 0.55);
}

/* ---- Letrero de zona (abajo a la izquierda, como el nombre del barrio) ---- */
.t3d-zone {
  position: absolute;
  left: max(1.2rem, env(safe-area-inset-left));
  bottom: max(13.6rem, calc(env(safe-area-inset-bottom) + 12.6rem));
  max-width: min(80vw, 30rem);
  text-shadow: var(--t3d-shadow);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.t3d-zone.is-on { opacity: 1; transform: none; }
.t3d-zone__sub {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--t3d-green);
  margin-bottom: 0.25rem;
}
.t3d-zone__name {
  display: block;
  font-size: clamp(1.6rem, 5.5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}

/* ---- Minimapa ---- */
.t3d-map {
  position: absolute;
  left: max(1.1rem, env(safe-area-inset-left));
  bottom: max(2.2rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  width: 160px;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.75);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(47, 224, 160, 0.28);
  background: #050c0a;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.t3d-map.is-on { opacity: 1; }
.t3d-map canvas { display: block; width: 100%; height: 100%; }
.t3d-map__n {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(234, 246, 240, 0.6);
  text-shadow: 0 1px 2px #000;
}

/* En el celular el minimapa se achica y sube: abajo a la izquierda vive el
   joystick, y el pulgar no puede taparlo. */
@media (pointer: coarse) {
  .t3d-map {
    width: 104px;
    height: 104px;
    top: max(4.4rem, calc(env(safe-area-inset-top) + 3.8rem));
    bottom: auto;
  }
  .t3d-zone { bottom: auto; top: max(9.6rem, calc(env(safe-area-inset-top) + 9rem)); left: max(9rem, 8.4rem); }
  .t3d-zone__name { font-size: clamp(1.2rem, 6vw, 1.8rem); }
}

/* ---- Volver a tomar el mouse (solo escritorio, tras pulsar Esc) ---- */
.t3d-relock {
  position: absolute;
  left: 50%;
  top: 5.2rem;
  transform: translate(-50%, -8px);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--t3d-line);
  background: rgba(5, 10, 12, 0.82);
  backdrop-filter: blur(10px);
  color: var(--t3d-ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.t3d-relock.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.t3d-relock:hover { border-color: var(--t3d-green); }
@media (pointer: coarse) { .t3d-relock { display: none; } }

/* ---- Aviso de producto cercano ---- */
.t3d-near {
  position: absolute;
  left: 50%;
  bottom: max(2.1rem, calc(env(safe-area-inset-bottom) + 1.4rem));
  transform: translate(-50%, 18px);
  width: min(92vw, 34rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.8rem;
  /* Esquinas poco redondeadas y borde marcado: lenguaje de HUD de consola,
     no de tarjeta de página web. */
  border-radius: 10px;
  border: 1px solid rgba(47, 224, 160, 0.4);
  border-left: 3px solid var(--t3d-green);
  background: rgba(3, 8, 9, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  text-align: left;
}
.t3d-near.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.t3d-near__art {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.t3d-near__art img { width: 78%; height: 78%; object-fit: contain; }
.t3d-near__txt { flex: 1; min-width: 0; }
.t3d-near__cat {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--t3d-green);
  margin-bottom: 0.15rem;
}
.t3d-near__name {
  display: block;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t3d-near__price {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  color: var(--t3d-green);
  font-weight: 500;
  margin-top: 0.15rem;
}
.t3d-near__acts {
  flex: none;
  display: flex;
  gap: 0.45rem;
}
.t3d-nbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.62rem 0.85rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.t3d-nbtn:hover { transform: translateY(-1px); }
.t3d-nbtn--ghost {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--t3d-ink);
}
.t3d-nbtn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.t3d-nbtn--buy {
  background: var(--t3d-green);
  color: #04120c;
  box-shadow: 0 8px 22px rgba(47, 224, 160, 0.22);
}
.t3d-nbtn--buy:hover { background: #45f0b1; }
/* Tecla como la de un juego: cuadrada, con relieve, delante de la acción */
.t3d-nbtn kbd {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 5px;
  border: 1px solid currentColor;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
  opacity: 0.8;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78em;
  font-weight: 700;
}
/* En el celular no hay teclado: las teclas sobran y los botones mandan */
@media (pointer: coarse) {
  .t3d-nbtn kbd { display: none; }
}

/* ---- Joystick (celular) ---- */
.t3d-stick {
  position: absolute;
  left: max(1.1rem, env(safe-area-inset-left));
  /* Justo por encima del aviso de cercanía (que mide ~148 px con sus dos
     botones): si se baja más, el pulgar tapa "Comprar". */
  bottom: max(10.75rem, calc(env(safe-area-inset-bottom) + 9.6rem));
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 16, 20, 0.42);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  touch-action: none;
  display: none;
}
.t3d-stick::after {
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}
.t3d-stick__thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(47, 224, 160, 0.35);
  border: 1px solid var(--t3d-green);
  box-shadow: 0 0 22px rgba(47, 224, 160, 0.35);
  transition: transform 0.08s linear;
}
@media (pointer: coarse) { .t3d-stick { display: block; } }

/* ===========================================================================
   FICHA DEL PRODUCTO (encima del 3D)
   =========================================================================== */
.t3d-sheet {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 5, 7, 0.72);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  overflow-y: auto;
}
.t3d-sheet.is-open { opacity: 1; visibility: visible; }

.t3d-card {
  width: min(100%, 44rem);
  border-radius: 22px;
  border: 1px solid var(--t3d-line);
  background: linear-gradient(180deg, #0b1216, #070c0f);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65);
  padding: 1.5rem;
  transform: translateY(22px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  margin: auto;
}
.t3d-sheet.is-open .t3d-card { transform: none; }

.t3d-card__top {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
}
.t3d-card__art {
  width: 104px;
  height: 104px;
  flex: none;
  border-radius: 18px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.t3d-card__art img { width: 78%; height: 78%; object-fit: contain; }
.t3d-card__head { flex: 1; min-width: 0; }
.t3d-card__tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--t3d-line);
  background: rgba(47, 224, 160, 0.1);
  color: var(--t3d-green);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t3d-card__name {
  margin: 0 0 0.55rem;
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}
.t3d-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.t3d-card__price b {
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--t3d-green);
  letter-spacing: -0.02em;
}
.t3d-card__price s { color: var(--t3d-faint); font-size: 0.95rem; }
.t3d-card__price i {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  color: #04120c;
  background: var(--t3d-green);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.t3d-card__sum {
  margin: 1.15rem 0 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #cfe0d8;
}

.t3d-card__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.t3d-card__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #cfe0d8;
}
.t3d-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 0.95em;
  height: 0.5em;
  border-left: 2px solid var(--t3d-green);
  border-bottom: 2px solid var(--t3d-green);
  transform: rotate(-45deg);
}

.t3d-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.t3d-card__meta span {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.78rem;
  color: var(--t3d-faint);
}

.t3d-card__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.t3d-btn {
  flex: 1 1 12rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.2rem;
  border-radius: 13px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.t3d-btn:hover { transform: translateY(-2px); }
.t3d-btn--buy {
  background: var(--t3d-green);
  color: #04120c;
  box-shadow: 0 12px 34px rgba(47, 224, 160, 0.25);
}
.t3d-btn--buy:hover { background: #45f0b1; }
.t3d-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--t3d-ink);
}
.t3d-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.t3d-btn--back {
  flex: 1 1 100%;
  background: none;
  border-color: transparent;
  color: var(--t3d-faint);
  font-weight: 600;
  padding: 0.65rem;
}
.t3d-btn--back:hover { color: var(--t3d-ink); transform: none; }

/* ===========================================================================
   RESPALDO — sin WebGL, equipo muy justo o movimiento reducido
   =========================================================================== */
.t3d-fallback {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
  background: #05080a;
}
.t3d-fallback.is-on { display: grid; }
.t3d-fallback h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  color: #fff;
}
.t3d-fallback p {
  margin: 0 auto 1.8rem;
  max-width: 30rem;
  line-height: 1.65;
  color: var(--t3d-faint);
}

/* ===========================================================================
   CAJA — la compra ocurre DENTRO de la experiencia (mismo lenguaje visual),
   y solo al final salta la pasarela de pago real.
   =========================================================================== */
.t3d-card--buy { width: min(100%, 32rem); }

.t3d-buy__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.t3d-buy__art {
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.t3d-buy__art img { width: 78%; height: 78%; object-fit: contain; }
.t3d-buy__name { margin: 0 0 0.2rem; font-size: 1.08rem; font-weight: 800; color: #fff; }
.t3d-buy__unit { font-size: 0.86rem; color: var(--t3d-faint); }

.t3d-buy__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.t3d-buy__row span { font-size: 0.92rem; color: #cfe0d8; }

.t3d-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  overflow: hidden;
}
.t3d-qty button {
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  color: var(--t3d-ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.t3d-qty button:hover { background: rgba(47, 224, 160, 0.2); }
.t3d-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.t3d-qty b {
  min-width: 2.6rem;
  text-align: center;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.t3d-buy__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.15rem 0 0.35rem;
}
.t3d-buy__total span { font-size: 0.95rem; color: #cfe0d8; }
.t3d-buy__total b {
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  color: var(--t3d-green);
  letter-spacing: -0.02em;
}

.t3d-buy__note {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--t3d-faint);
}

/* ===========================================================================
   CELULAR — el aviso pasa a ocupar el ancho y los botones se vuelven grandes;
   el joystick vive por encima para que el pulgar no tape las acciones.
   =========================================================================== */
@media (max-width: 720px), (pointer: coarse) {
  .t3d-near {
    left: 0;
    right: 0;
    width: auto;
    margin: 0 max(0.6rem, env(safe-area-inset-right)) 0 max(0.6rem, env(safe-area-inset-left));
    bottom: max(0.9rem, calc(env(safe-area-inset-bottom) + 0.5rem));
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    padding: 0.7rem;
    transform: translate(0, 18px);
  }
  .t3d-near.is-on { transform: translate(0, 0); }
  .t3d-near__art { width: 46px; height: 46px; border-radius: 11px; }
  .t3d-near__name { font-size: 0.92rem; }
  .t3d-near__acts {
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .t3d-nbtn {
    justify-content: center;
    padding: 0.8rem 0.6rem;
    font-size: 0.9rem;
    border-radius: 13px;
  }
}

@media (max-width: 560px) {
  .t3d-card { padding: 1.15rem; border-radius: 18px; }
  .t3d-card__top { gap: 0.85rem; }
  .t3d-card__art { width: 74px; height: 74px; border-radius: 14px; }
  .t3d-topbar { padding-top: max(0.6rem, env(safe-area-inset-top)); gap: 0.5rem; }
  .t3d-btn { flex: 1 1 100%; }
  /* En 390 px de ancho la marca completa empujaba "Salir" fuera de pantalla:
     se deja el logo, la insignia se achica y el botón queda solo con su icono. */
  .t3d-brand span { display: none; }
  .t3d-brand b { font-size: 0.56rem; padding: 0.18rem 0.42rem; letter-spacing: 0.12em; }
  .t3d-exit__t { display: none; }
  .t3d-exit { padding: 0 0.7rem; }
}

/* En el celular el aviso del producto ocupa todo el borde de abajo, así que la
   mano entra por el COSTADO derecho en vez de la esquina: si no, el gesto de
   señalar quedaba tapado justo cuando importa. */
@media (pointer: coarse) {
  .t3d-hand {
    width: clamp(150px, 38vw, 250px);
    right: -7%;
    bottom: 9%;
  }
}

/* Pantallas bajas en horizontal (celular acostado): el HUD se aprieta */
@media (max-height: 460px) {
  .t3d-stick {
    width: 104px;
    height: 104px;
    bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.6rem));
  }
  .t3d-stick__thumb { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .t3d-near { width: min(70vw, 30rem); left: auto; right: 0.8rem; margin: 0; transform: translate(0, 18px); }
  .t3d-near.is-on { transform: translate(0, 0); }
  .t3d-hand { width: clamp(120px, 21vw, 190px); bottom: 2%; right: -4%; }
}