/* =============================================================================
   Soft Imperio — Cajas de software en 3D
   Cuboide CSS 3D (preserve-3d). Cada producto es una "caja" parada que flota,
   se inclina hacia el cursor y proyecta sombra. Tokens del sistema, fuentes
   display para nombres. Respeta prefers-reduced-motion.
   ============================================================================= */

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Escena con perspectiva (cada caja vive en su propio espacio 3D) */
.box3d-scene {
  perspective: 1200px;
  perspective-origin: 50% 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Flotación suave; rotación va en .box3d para no pelear con el transform */
.box3d-float { transform-style: preserve-3d; animation: boxFloat 6.5s var(--ease-out-soft, ease-in-out) infinite; will-change: transform; }
.box3d-scene:nth-child(3n + 2) .box3d-float { animation-delay: -2.1s; }
.box3d-scene:nth-child(3n + 3) .box3d-float { animation-delay: -4.3s; }
@keyframes boxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.box3d {
  --w: 200px; --h: 268px; --d: 56px;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-27deg);
  transition: transform 0.32s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform;
}

/* --- Caras del cuboide (método centrado: top/left 50% + margen mitad) --- */
.box3d__face { position: absolute; top: 50%; left: 50%; overflow: hidden; backface-visibility: hidden; }
.box3d__face--front  { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); transform: translateZ(calc(var(--d) / 2)); border-radius: 8px 6px 6px 8px; }
.box3d__face--back   { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); background: #0a0b10; border-radius: 6px; }
.box3d__face--right  { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.box3d__face--left   { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(90deg, #0c0d12, #07080c); }
.box3d__face--top    { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.box3d__face--bottom { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #050608; }

/* --- Portada (cara frontal) --- */
.bc {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 16px; color: #fff;
  background:
    radial-gradient(135% 78% at 50% -8%, color-mix(in oklch, var(--accent) 48%, #0d0e14), transparent 62%),
    linear-gradient(160deg, #16171f 0%, #0b0c11 88%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset -22px 0 36px -20px rgba(0, 0, 0, 0.7);
}
.bc__seller { font-size: 10px; letter-spacing: 0.2em; font-weight: 700; color: rgba(255, 255, 255, 0.58); }
/* Zona de arte: muestra la FOTO del producto; si no carga, el ícono de respaldo */
.bc__art { position: relative; display: grid; place-items: center; width: 100%; flex: 1 1 auto; min-height: 92px; margin: 12px 0; }
.bc__glyph { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45)); line-height: 0; transition: opacity 0.3s ease; }
.bc__glyph .brand-glyph { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.bc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.45s ease; }
.bc__img.is-on { opacity: 1; }
.bc__img.is-on ~ .bc__glyph { opacity: 0; }
.bc__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.bc__ed { margin-top: 8px; font-size: 11px; color: rgba(255, 255, 255, 0.64); }
.bc__bar { margin-top: auto; width: 36px; height: 4px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 14px -2px var(--accent); }

/* Con foto cargada: portada a sangre completa + degradado + textos encima */
.bc:has(.bc__img.is-on) { padding: 0; justify-content: flex-end; }
.bc:has(.bc__img.is-on) .bc__art { position: absolute; inset: 0; margin: 0; min-height: 0; }
.bc:has(.bc__img.is-on) .bc__img { object-fit: cover; }
.bc:has(.bc__img.is-on) .bc__seller { position: absolute; top: 12px; left: 0; right: 0; z-index: 3; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65); }
.bc:has(.bc__img.is-on)::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(7, 8, 12, 0.92) 4%, rgba(7, 8, 12, 0.18) 48%, rgba(7, 8, 12, 0.5) 100%); }
.bc:has(.bc__img.is-on) .bc__name,
.bc:has(.bc__img.is-on) .bc__ed { position: relative; z-index: 3; padding-inline: 16px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.bc:has(.bc__img.is-on) .bc__bar { position: relative; z-index: 3; margin: 12px auto 18px; }

/* --- Lomo (cara derecha) --- */
.bs {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #15161d, #0a0b0f);
  box-shadow: inset 3px 0 0 color-mix(in oklch, var(--accent) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bs span { writing-mode: vertical-rl; rotate: 180deg; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.52); white-space: nowrap; }

/* --- Tapa (cara superior) --- */
.bt { background: linear-gradient(120deg, #1b1c24, #0f1016); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }

/* --- Sombra/contacto en el "piso" --- */
.box3d-shadow {
  width: 165px; height: 30px; margin-top: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.2 0.02 260 / 0.42), transparent);
  filter: blur(6px);
}
[data-theme="dark"] .box3d-shadow { background: radial-gradient(closest-side, oklch(0 0 0 / 0.55), transparent); }

/* --- Pie de caja (nombre + precio bajo la caja, como ficha) --- */
.box3d-meta { margin-top: 6px; text-align: center; }
.box3d-meta b { display: block; font-size: 0.98rem; color: var(--ink); letter-spacing: -0.01em; }
.box3d-meta .pr { display: inline-flex; align-items: baseline; gap: 0.4rem; margin-top: 0.2rem; }
.box3d-meta .pr .now { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.box3d-meta .pr .old { font-size: 0.82rem; color: var(--ink-faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .box3d-float { animation: none; }
  .box3d { transition: none; }
}

/* =====================================================================
   Integración en la tarjeta de producto (.product-card.pc3d)
   La caja 3D reemplaza la imagen; debajo van nombre, rating, precio y CTA.
   Se usa en home, catálogo y productos relacionados (markup en SI.productCard).
   ===================================================================== */
.product-card.pc3d {
  background: transparent; border: none; box-shadow: none; overflow: visible;
  padding: 0; gap: 0;
}
.product-card.pc3d:hover { transform: none; box-shadow: none; border-color: transparent; }

.pc3d__scene {
  position: relative; display: flex; flex-direction: column; align-items: center;
  perspective: 1200px; perspective-origin: 50% 34%;
  padding-top: 1.1rem; text-decoration: none;
}
.pc3d .box3d { --w: 184px; --h: 248px; --d: 50px; cursor: pointer; }
.pc3d .bc { padding: 17px 14px; }
.pc3d .bc__name { font-size: 17px; }
.pc3d .bc__glyph { margin: 13px 0 11px; }

.pc3d__badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; box-shadow: var(--shadow-md); }

.pc3d__info { margin-top: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; }
.pc3d__name { font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.pc3d__name a { transition: color var(--t); }
.pc3d__name a:hover { color: var(--brand-ink); }
.pc3d__info .rating { justify-content: center; }
.pc3d__foot { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; margin-top: 0.1rem; }
.pc3d__foot .price { flex-direction: row; align-items: baseline; justify-content: center; gap: 0.5rem; }
.pc3d__actions { display: flex; gap: 0.5rem; width: 100%; max-width: 256px; }
.pc3d__actions .btn { flex: 1; justify-content: center; }
.pc3d__actions .add-btn { flex: none; }

.pc3d.is-out .box3d { filter: grayscale(0.75); opacity: 0.8; }
.pc3d.is-out .box3d-float { animation: none; }

/* --- Entrada al hacer scroll: la caja entra girando + elevándose + escalando.
   La activa SI.revealBoxes() añadiendo .has-reveal al <html> y .is-in a cada card.
   Sin JS o con movimiento reducido, todo se ve por defecto. --- */
.box3d-reveal { transform-style: preserve-3d; transition: opacity 0.7s var(--ease-out), transform 0.95s var(--ease-out); }
.pc3d__info { transition: opacity 0.55s var(--ease-out) 0.12s, transform 0.55s var(--ease-out) 0.12s; }
.has-reveal .product-card.pc3d:not(.is-in) .box3d-reveal { opacity: 0; transform: translateY(64px) rotateY(-42deg) scale(0.86); }
.has-reveal .product-card.pc3d:not(.is-in) .pc3d__info { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .box3d-reveal, .pc3d__info { transition: none; }
  .has-reveal .product-card.pc3d:not(.is-in) .box3d-reveal,
  .has-reveal .product-card.pc3d:not(.is-in) .pc3d__info { opacity: 1; transform: none; }
}

/* =====================================================================
   Caja 3D protagonista en la página de detalle (.pd-stage--3d)
   Misma caja, pero más grande y con un foco de luz verde detrás.
   ===================================================================== */
.pd-stage--3d {
  min-height: clamp(360px, 46vw, 500px);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.pd-stage--3d::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 50% 42%, color-mix(in oklch, var(--brand) 26%, transparent), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}
.pd-box__scene {
  position: relative;
  z-index: 1;
  perspective: 1350px;
  perspective-origin: 50% 36%;
}
.pd-stage--3d .box3d { --w: 226px; --h: 304px; --d: 62px; cursor: grab; }
.pd-stage--3d .bc { padding: 20px 17px; }
.pd-stage--3d .bc__name { font-size: 21px; }
.pd-stage--3d .bc__glyph { margin: 16px 0; }
.pd-stage--3d.is-out .box3d { filter: grayscale(0.7); opacity: 0.82; }
.pd-stage--3d.is-out .box3d-float { animation: none; }

@media (max-width: 480px) {
  .pd-stage--3d .box3d { --w: 188px; --h: 252px; --d: 52px; }
  .pd-stage--3d .bc__name { font-size: 18px; }
}