/* NODE ZERO — sistema de MOCKUP REAL: diseño compuesto sobre foto de prenda real.
   Reemplaza las siluetas 2D planas. Cada prenda define su encuadre (--fx/--fy/--scale)
   y su ZONA DE ESTAMPADO fija (--pl/--pt/--pw/--ph/--prot). El diseño vive en un overlay
   de tamaño FIJO: cambiar de diseño NO mueve el layout ni un pixel.

   Estructura HTML esperada:
   <div class="mk-stage mk-playera">
     <img class="mk-photo" src="img/prendas/playera_base.jpg" alt="">
     <div class="mk-darken"></div>            (opcional, para prendas claras)
     <div class="mk-print"><img class="mk-design" src="img/disenos/..png"></div>
   </div>
*/

.mk-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;          /* CUADRADO EXACTO — uniforme para toda prenda y diseño */
  overflow:hidden;
  border-radius:14px;
  background:#0b0b0d;
  border:1px solid var(--carbon,#26262b);
  isolation:isolate;          /* contiene los mix-blend-mode dentro del stage */
}

.mk-stage .mk-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);
  transform:scale(var(--scale,1));
  transform-origin:var(--fx,50%) var(--fy,50%);
}

/* capa opcional para "ennegrecer" una prenda de tela clara (p. ej. panel de gorra) */
.mk-stage .mk-darken{
  position:absolute; inset:0;
  background:var(--darkc,transparent);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* zona de estampado: rectángulo FIJO por prenda */
.mk-stage .mk-print{
  position:absolute;
  left:var(--pl,35%); top:var(--pt,40%);
  width:var(--pw,30%); height:var(--ph,30%);
  transform:rotate(var(--prot,0deg));
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}

.mk-stage .mk-design{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  /* diseño claro (blanco/verde) sobre tela oscura → "screen" deja pasar los pliegues
     y brillos de la tela, dando aspecto de estampado real y no de sticker plano */
  mix-blend-mode:screen;
  opacity:.94;
  filter:contrast(1.04) saturate(1.05);
}

/* ---------------- ENCUADRE Y ZONA POR PRENDA (calibrado visualmente) ---------------- */
.mk-playera{ --fx:52%; --fy:57%; --scale:1.18; --pl:37%; --pt:40%; --pw:27%; --ph:31%; --prot:0deg; }
.mk-hoodie { --fx:50%; --fy:46%; --scale:1.55; --pl:37%; --pt:38%; --pw:27%; --ph:31%; --prot:0deg; }
.mk-gorra  { --fx:50%; --fy:44%; --scale:1.35; --darkc:#191919; --pl:37%; --pt:28%; --pw:27%; --ph:20%; --prot:0deg; }

/* modo calibración: marca visible de la zona de estampado */
.mk-cal .mk-print{ outline:2px dashed #ff2a6d; background:rgba(255,42,109,.12); }