/* =====================================================================
   CRISPA — VITRINA 3D
   Capa de profundidad sobre el diseño base (store.css).
   Una sola luz, arriba a la izquierda; sombras teñidas de vino.
   ===================================================================== */

:root {
  --shadow-wine: 40, 8, 14;
  --gold-light: color-mix(in srgb, var(--accent-color) 55%, #fff);
  --gold-dark: color-mix(in srgb, var(--accent-color) 62%, #3a2408);
}
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------------
   Pieza base: caja de seis caras
   --------------------------------------------------------------------- */
.b3 {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style: preserve-3d;
}
.b3-face { position: absolute; left: 50%; top: 50%; overflow: hidden; }
.f-front, .f-back { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.f-right, .f-left { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.f-top, .f-bottom { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.f-front  { transform: translateZ(calc(var(--d) / 2)); }
.f-back   { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.f-right  { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.f-left   { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.f-top    { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* ---------------------------------------------------------------------
   Botones con cuerpo: se hunden al presionarlos
   --------------------------------------------------------------------- */
.btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 3px 0 var(--wine-deep),
    0 16px 24px -16px rgba(var(--shadow-wine), .9);
  transition: background .25s, color .25s, transform .12s, box-shadow .12s;
}
.btn-primary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 var(--wine-deep), 0 6px 10px -8px rgba(var(--shadow-wine), .9);
}
.spotlight .btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 var(--gold-dark), 0 16px 24px -14px rgba(0,0,0,.6); }
.spotlight .btn-primary:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 var(--gold-dark), 0 6px 10px -8px rgba(0,0,0,.6); }

/* ---------------------------------------------------------------------
   CARRUSEL: vitrina giratoria
   El banner activo al frente; los vecinos se inclinan a los lados.
   --------------------------------------------------------------------- */
.hero-banner-container {
  overflow: clip; padding-top: 8px; padding-bottom: 46px; margin-bottom: 0;
  animation-name: heroIn3d;
}
@keyframes heroIn3d { from { opacity: 0; transform: perspective(1400px) rotateX(12deg) translateY(36px); } }

.slider-wrapper {
  --side: 11%;
  overflow: visible; background: none; box-shadow: none; border-radius: 0; isolation: auto;
}
.slider-wrapper::after { display: none; }
.slider-wrapper.single { --side: 0%; }

.slides-track {
  position: relative; display: block; aspect-ratio: 3.35 / 1; max-height: 540px;
  perspective: 1800px; perspective-origin: 50% 40%; transform-style: preserve-3d;
}
.slider-wrapper.single .slides-track { aspect-ratio: 2.8 / 1; }

.slide-item {
  position: absolute; top: 0; bottom: 0; left: var(--side); width: calc(100% - 2 * var(--side)); min-width: 0;
  transform-style: preserve-3d; will-change: transform;
  transition: transform 1s var(--ease), opacity .9s ease, filter 1s ease;
}
.slide-item.is-active { z-index: 3; transform: none; }
.slide-item.is-next {
  z-index: 2; cursor: pointer;
  transform: translateX(60%) translateZ(-320px) rotateY(-40deg);
  filter: brightness(.55) saturate(.8);
}
.slide-item.is-prev {
  z-index: 2; cursor: pointer;
  transform: translateX(-60%) translateZ(-320px) rotateY(40deg);
  filter: brightness(.55) saturate(.8);
}
.slide-item.is-next:hover, .slide-item.is-prev:hover { filter: brightness(.75) saturate(.9); }
.slide-item.is-hidden { z-index: 1; opacity: 0; pointer-events: none; transform: translateZ(-700px); }

.slide-face {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: var(--radius-l); background: var(--tint);
  box-shadow:
    0 60px 70px -50px rgba(var(--shadow-wine), .75),
    0 22px 34px -24px rgba(var(--shadow-wine), .5);
  transition: transform .6s var(--ease);
}
.slide-item.is-active .slide-face {
  transform: rotateY(calc(var(--cx, 0) * 7deg)) rotateX(calc(var(--cy, 0) * -5deg));
  -webkit-box-reflect: below 14px linear-gradient(transparent 86%, rgba(255, 255, 255, .09));
}
.slide-item.is-active .slide-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--cx, 0) * 90%) calc(20% + var(--cy, 0) * 90%), rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(to top, rgba(20, 5, 8, .42), transparent 42%);
}
.slides-track .hero-banner-img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

.slide-counter, .slide-dots { left: calc(var(--side) + 30px); z-index: 5; }
.slide-btn { z-index: 5; }
.slide-prev { right: calc(var(--side) + 78px); }
.slide-next { right: calc(var(--side) + 26px); }

/* ---------------------------------------------------------------------
   FRAGANCIA DEL MES: la caja del perfume sobre un escenario iluminado
   --------------------------------------------------------------------- */
.spotlight-media {
  min-height: 500px; cursor: default; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 58% at 46% 34%, color-mix(in srgb, var(--accent-color) 26%, var(--wine-dark)) 0%, var(--wine-dark) 58%, color-mix(in srgb, var(--wine-dark) 62%, #000) 100%);
}
.spotlight-media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; pointer-events: none; z-index: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent);
}
.spotlight-media:hover img { transform: none; }

.spot-stage { position: absolute; inset: 0; z-index: 1; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.spot-stage.grabbing { cursor: grabbing; }
.spot-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-color); }
.spot-stage::before {
  /* línea del piso, detrás de la caja */
  content: ''; position: absolute; left: 0; right: 0; bottom: 32%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-color) 22%, transparent), transparent);
}
.spot-light {
  position: absolute; left: 50%; top: -12%; width: 74%; height: 92%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 240, 215, .2), transparent 68%);
}
.spot-floor {
  position: absolute; left: 50%; top: 50%; width: 320px; height: 50px; margin: 150px 0 0 -160px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); filter: blur(5px); pointer-events: none;
}
.spot-scene { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 32%; pointer-events: none; }

.pbox { --w: 232px; --h: 290px; --d: 86px; margin-top: calc(var(--h) / -2 - 12px); }
.pbox .b3-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--wine-dark); }
.pbox .f-front { background: var(--tint); }
.pbox .b3-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.pbox .f-front::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .24) 0%, transparent 30%, transparent 68%, rgba(0, 0, 0, .16) 100%);
}
.box-frame { position: absolute; inset: 11px; z-index: 1; border: 1px solid color-mix(in srgb, var(--accent-color) 80%, transparent); }
.pbox .f-right { background: linear-gradient(90deg, color-mix(in srgb, var(--wine-dark) 80%, #000), var(--wine-deep)); }
.pbox .f-left { background: linear-gradient(270deg, var(--wine-dark), color-mix(in srgb, var(--primary-color) 85%, #fff)); }
.pbox .f-top { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 80%, #fff), var(--primary-color)); }
.pbox .f-bottom { background: #120407; }
.pbox .f-right::before, .pbox .f-left::before {
  content: ''; position: absolute; inset: 12px 9px; border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
}
.box-spine {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; white-space: nowrap; overflow: hidden;
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .16em; color: var(--accent-color);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 -1px 0 rgba(255, 255, 255, .12);
}
.box-lid {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-color); color: var(--accent-color); font-family: var(--display); font-size: 1.5rem;
}
.box-back-seal {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--accent-color); background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 70%, var(--wine-dark)), var(--wine-deep));
}
.box-back-seal span { font-family: var(--display); font-size: 4.2rem; line-height: 1; }
.box-back-seal small { font-size: .56rem; letter-spacing: .32em; margin-right: -.32em; color: var(--ivory); }

.spot-hint {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: .74rem; color: color-mix(in srgb, var(--ivory) 70%, transparent); transition: opacity .5s;
}
.spot-stage.touched .spot-hint { opacity: 0; }

/* ---------------------------------------------------------------------
   TARJETAS: se inclinan hacia el cursor, con reflejo de luz
   --------------------------------------------------------------------- */
.product-media {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow:
    var(--sx, 0px) 28px 36px -28px rgba(var(--shadow-wine), .6),
    0 2px 6px -3px rgba(var(--shadow-wine), .2);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.product-media.tilting { transition: transform .12s linear, box-shadow .12s linear; }
.product-card:hover .product-media img { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.08); }
.product-media.tilting img { transition: opacity .6s ease, transform .2s ease-out; }
.media-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .5), transparent 55%);
  mix-blend-mode: soft-light;
}
.product-media.tilting .media-glare { opacity: 1; }
.product-media .fav-btn, .product-media .quick-view-btn { z-index: 3; }
@media (hover: none) {
  .product-media { transition: transform .2s ease; }
  .product-media:active { transform: scale(.97); }
}

/* Selección CRISPA: aire para que se vean las sombras al inclinar */
.featured-row { padding: 10px 6px 30px; margin: -10px -6px -16px; }

/* ---------------------------------------------------------------------
   SOBRE NOSOTROS: medallón en capas
   --------------------------------------------------------------------- */
.about-monogram {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: var(--sx, 0px) 46px 60px -36px rgba(var(--shadow-wine), .7);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.about-monogram.tilting { transition: transform .12s linear, box-shadow .12s linear; }
.about-monogram::before { transform: translateZ(18px); }
.about-monogram::after { transform: translateZ(30px); }
.about-monogram span { transform: translateZ(60px); text-shadow: 0 10px 18px rgba(0, 0, 0, .45); }
.about-monogram small { transform: translateZ(40px); }

/* ---------------------------------------------------------------------
   FRASCO DE CRISTAL (invitación al buscador)
   --------------------------------------------------------------------- */
.finder-cta-art {
  min-height: 320px; overflow: hidden;
  background: radial-gradient(ellipse 62% 58% at 50% 40%, color-mix(in srgb, var(--accent-color) 30%, var(--wine-dark)), var(--wine-deep) 72%);
}
.finder-cta-art::after { display: none; }
.flacon-stage { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 28%; }
.flacon { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-40deg); }
.flacon-floor {
  position: absolute; left: 50%; top: 48%; width: 200px; height: 40px; margin: 112px 0 0 -100px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); filter: blur(4px);
}
.fl-part { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: translateY(var(--y)); transform-style: preserve-3d; }

.fl-cap { --w: 62px; --h: 54px; --d: 62px; }
.fl-cap .b3-face { background: linear-gradient(140deg, var(--gold-light), var(--accent-color) 50%, var(--gold-dark)); }
.fl-cap .f-right { filter: brightness(.78); }
.fl-cap .f-back { filter: brightness(.7); }
.fl-cap .f-top { background: var(--gold-light); }
.fl-neck { --w: 30px; --h: 16px; --d: 30px; }
.fl-neck .b3-face { background: var(--gold-dark); }

.fl-body { --w: 124px; --h: 140px; --d: 68px; }
.fl-body .b3-face {
  backface-visibility: visible;
  background: linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .14));
  border: 1px solid rgba(255, 255, 255, .45);
}
.fl-body .f-front::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: 12px; width: 9px; border-radius: 6px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, .05)); opacity: .7;
}
.fl-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -38%); width: 74px; padding: 9px 4px 7px;
  background: rgba(247, 241, 234, .94); text-align: center; color: var(--wine-deep);
}
.fl-label span { display: block; font-family: var(--display); font-size: .68rem; letter-spacing: .3em; margin-right: -.3em; }
.fl-label small { display: block; font-size: .42rem; letter-spacing: .14em; margin-top: 2px; color: var(--muted); }

.fl-juice { --w: 108px; --h: 100px; --d: 52px; }
.fl-juice .b3-face { backface-visibility: visible; background: color-mix(in srgb, var(--primary-color) 72%, transparent); }
.fl-juice .f-top { background: color-mix(in srgb, var(--accent-color) 45%, var(--primary-color)); }

/* ---------------------------------------------------------------------
   ENTRADAS CON PROFUNDIDAD
   --------------------------------------------------------------------- */
/* Logo de bienvenida: cada letra se levanta */
.intro-logo { animation: none; perspective: 700px; }
.intro-logo span { display: inline-block; transform-origin: 50% 85%; animation: letterIn 1s var(--ease) calc(.1s + var(--i) * 80ms) both; }
@keyframes letterIn { from { opacity: 0; transform: rotateX(-100deg) translateY(.25em); } }
/* El telón se pliega hacia atrás */
html.with-intro .intro-curtain { animation-name: curtainFold; transform-origin: 50% 0; }
@keyframes curtainFold { to { transform: perspective(1600px) rotateX(80deg) translateY(-10%); opacity: 0; visibility: hidden; } }

/* Vista rápida y buscador: llegan desde el fondo */
.modal { perspective: 1600px; }
.modal-card { transform: rotateX(14deg) translateY(50px) scale(.96); transform-origin: 50% 100%; }

/* Carrito y favoritos: se abren como una puerta */
.drawer { transform: perspective(1400px) translateX(100%) rotateY(-24deg); transform-origin: 100% 50%; }
.drawer.active { transform: perspective(1400px) translateX(0) rotateY(0deg); }

/* ---------------------------------------------------------------------
   TABLET Y CELULAR
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .spotlight-media { min-height: 420px; }
  .pbox { --w: 200px; --h: 250px; --d: 74px; }
  .spot-floor { width: 270px; margin: 128px 0 0 -135px; }
}

@media (max-width: 768px) {
  .hero-banner-container { padding: 0 0 26px; margin-bottom: -18px; }
  .slider-wrapper { --side: 8%; }
  .slides-track { aspect-ratio: auto; height: clamp(170px, 46vw, 240px); max-height: none; perspective: 900px; }
  .slide-face { border-radius: var(--radius-m); box-shadow: 0 16px 22px -16px rgba(var(--shadow-wine), .55); }
  .slide-item.is-active .slide-face { -webkit-box-reflect: none; transform: none; }
  .slide-item.is-next { transform: translateX(76%) translateZ(-170px) rotateY(-34deg); }
  .slide-item.is-prev { transform: translateX(-76%) translateZ(-170px) rotateY(34deg); }
  .slide-counter { display: none; }
  .slide-dots { left: calc(var(--side) + 16px); bottom: 22px; }
  .slide-prev { right: calc(var(--side) + 52px); }
  .slide-next { right: calc(var(--side) + 14px); }

  .spotlight-media { min-height: 220px; }
  .spotlight-media::after { height: 26%; }
  .pbox { --w: 98px; --h: 122px; --d: 36px; margin-top: calc(var(--h) / -2 - 6px); }
  .spot-floor { width: 130px; height: 24px; margin: 60px 0 0 -65px; }
  .box-frame { inset: 5px; }
  .box-spine { font-size: .5rem; letter-spacing: .08em; }
  .pbox .f-right::before, .pbox .f-left::before { inset: 5px 4px; }
  .box-lid { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: .7rem; }
  .box-back-seal span { font-size: 2rem; }
  .box-back-seal small { display: none; }
  .spot-hint { display: none; }

  .featured-row { padding: 6px 4px 22px; margin: -6px -4px -10px; }
  .drawer { transform: perspective(1000px) translateX(100%) rotateY(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .slide-item, .slide-face, .product-media, .about-monogram { transition: none !important; }
  .intro-logo span { animation: none; }
}

/* =====================================================================
   ESCENARIO: carrusel + frasco 3D sobre fondo vino
   ===================================================================== */
.stage {
  position: relative; isolation: isolate; overflow: hidden; padding-top: 30px;
  background:
    radial-gradient(ellipse 50% 70% at 50% 30%, color-mix(in srgb, var(--accent-color) 18%, var(--wine-dark)) 0%, transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 20%, var(--wine-dark) 0%, var(--wine-deep) 60%, #0c0205 100%);
}
.stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent);
}
.stage-beam {
  position: absolute; left: 50%; top: 0; width: 70%; height: 100%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 236, 205, .12), rgba(255, 236, 205, .02) 75%, transparent);
  clip-path: polygon(38% 0, 62% 0, 90% 100%, 10% 100%); filter: blur(20px);
}
.stage .hero-banner-container { position: relative; z-index: 2; margin-top: 0; }
.stage-canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .3s; }
.stage-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.stage-canvas.hero3d-ready { opacity: 1; }
.stage .slide-btn, .stage .slide-dots, .stage .slide-counter { z-index: 6; }
/* Con el frasco a la derecha, el carrusel se corre un poco */
@media (min-width: 1000px) {
  .stage .slider-wrapper { --side: 12%; }
}
.stage { animation: heroStage 1.2s var(--ease) both; }
html.with-intro .stage { animation-delay: 1.5s; }
@keyframes heroStage { from { opacity: 0; } }

/* =====================================================================
   SELECCIÓN CRISPA: anillo 3D
   ===================================================================== */
.featured-row.ring-mode { display: block; overflow: visible; padding: 0; margin: 0; }
.ring-stage {
  --cw: 236px;
  position: relative; height: calc(var(--cw) * 1.25 + 140px);
  perspective: 1800px; perspective-origin: 50% 30%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.ring-stage.grabbing { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 14px; width: var(--cw); margin-left: calc(var(--cw) / -2); transform-style: preserve-3d; }
.ring-item { position: absolute; left: 0; top: 0; width: var(--cw); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ring-item .product-card { pointer-events: auto; }
.ring-item.is-front .product-media { box-shadow: 0 40px 50px -34px rgba(var(--shadow-wine), .8), 0 2px 6px -3px rgba(var(--shadow-wine), .2); }
.ring-floor {
  position: absolute; left: 50%; top: calc(14px + var(--cw) * 1.25 + 6px); width: min(1100px, 96%); height: 46px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--shadow-wine), .16), transparent 70%);
  z-index: -1;
}

/* =====================================================================
   CATÁLOGO: cada tarjeta se coloca en el estante
   ===================================================================== */
.product-card.d3-pending { opacity: 0; transform: perspective(1100px) rotateX(-38deg) translateY(50px) scale(.96); transform-origin: 50% 100%; }
.product-card.d3-in {
  opacity: 1; transform: none;
  transition: transform 1.05s var(--ease), opacity .7s ease; transition-delay: var(--d, 0ms);
}

/* =====================================================================
   FRAGANCIA DEL MES: caja más grande y teatral
   ===================================================================== */
.spotlight-media { min-height: 580px; }
.pbox { --w: 270px; --h: 338px; --d: 96px; }
.spot-floor { width: 380px; height: 60px; margin: 176px 0 0 -190px; }
.box-spine { font-size: 1.25rem; }

/* =====================================================================
   PIE DE PÁGINA: el nombre tallado en 3D
   ===================================================================== */
.site-footer { position: relative; overflow: hidden; }
.site-footer .footer-brand { display: none; }
.footer-mark {
  font-family: var(--display); font-weight: 500; line-height: .82; text-align: center; white-space: nowrap;
  font-size: clamp(4.5rem, 17vw, 16rem); letter-spacing: .1em; margin: -10px 0 44px; padding-left: .1em;
  color: var(--accent-color);
  transform: perspective(900px) rotateX(24deg); transform-origin: 50% 100%;
  text-shadow:
    0 1px 0 var(--gold-dark), 0 2px 0 var(--gold-dark), 0 3px 0 color-mix(in srgb, var(--gold-dark) 80%, #000),
    0 4px 0 color-mix(in srgb, var(--gold-dark) 70%, #000), 0 5px 0 color-mix(in srgb, var(--gold-dark) 60%, #000),
    0 6px 0 color-mix(in srgb, var(--gold-dark) 50%, #000), 0 7px 0 color-mix(in srgb, var(--gold-dark) 40%, #000),
    0 8px 0 color-mix(in srgb, var(--gold-dark) 30%, #000),
    0 26px 30px rgba(0, 0, 0, .6);
}

/* =====================================================================
   TABLET Y CELULAR (piezas nuevas)
   ===================================================================== */
@media (max-width: 1100px) {
  .spotlight-media { min-height: 460px; }
  .pbox { --w: 220px; --h: 275px; --d: 80px; }
  .spot-floor { width: 300px; margin: 144px 0 0 -150px; }
}
@media (max-width: 768px) {

  .ring-stage { --cw: 150px; height: calc(var(--cw) * 1.25 + 120px); perspective: 900px; }

  .spotlight-media { min-height: 230px; }
  .pbox { --w: 104px; --h: 130px; --d: 38px; }
  .spot-floor { width: 140px; height: 24px; margin: 64px 0 0 -70px; }
  .box-spine { font-size: .5rem; }

  .footer-mark { font-size: 21vw; margin: 0 0 26px; letter-spacing: .06em; padding-left: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card.d3-pending { opacity: 1; transform: none; }
}