/* Suka Web V7.1.1 — componente 3D aislado. No reutiliza clases de cajas anteriores. */
.suka711-stage{
  position:relative;
  isolation:isolate;
  --suka711-navy:#203c5a;
  --suka711-navy-deep:#0e2038;
  --suka711-bronze:#d9a05f;
  --suka711-paper:#f6f3ea;
  --suka711-dim:.24;
}
.suka711-stage .product-orbit{z-index:1}
.suka711-canvas-wrap{
  position:absolute;
  left:50%;
  top:50%;
  width:470px;
  height:390px;
  transform:translate(-50%,-50%);
  z-index:5;
  pointer-events:none;
  transition:opacity .65s ease,filter .65s ease,transform .65s ease;
}
.suka711-canvas{display:block;width:100%;height:100%;background:transparent}
.suka711-box-hit{
  position:absolute;
  left:50%;
  top:50%;
  width:390px;
  height:280px;
  transform:translate(-50%,-50%);
  z-index:10;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:24px;
}
.suka711-box-hit:focus-visible{outline:3px solid #fff;outline-offset:9px}
.suka711-stage.is-opening .suka711-box-hit,.suka711-stage.is-open .suka711-box-hit{cursor:default}
.suka711-copy{
  position:absolute;
  left:50%;
  z-index:11;
  width:270px;
  text-align:center;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:opacity .36s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.suka711-copy strong{display:block;font-size:30px;line-height:1;font-weight:800;letter-spacing:-.04em}
.suka711-copy small{display:block;margin-top:7px;font-size:11px;line-height:1.35;max-width:225px}
.suka711-copy-closed{top:43%;transform:translate(-50%,-50%);color:var(--suka711-navy-deep)}
.suka711-copy-closed small{color:rgba(14,32,56,.66)}
.suka711-copy-open{top:61%;transform:translate(-50%,-50%) translateY(12px) scale(.94);opacity:0;color:var(--suka711-navy-deep)}
.suka711-copy-open small{color:rgba(14,32,56,.68)}
.suka711-stage.is-opening .suka711-copy-closed,.suka711-stage.is-open .suka711-copy-closed{opacity:0;transform:translate(-50%,-50%) translateY(-14px) scale(.92)}
.suka711-stage.is-open .suka711-copy-open,.suka711-stage.is-releasing-products .suka711-copy-open{opacity:1;transform:translate(-50%,-50%)}
.suka711-stage.is-products-settled .suka711-canvas-wrap{opacity:calc(1 - var(--suka711-dim));filter:saturate(.78) brightness(.94);transform:translate(-50%,-50%) scale(.97)}
.suka711-stage.is-products-settled .suka711-copy-open{opacity:1;filter:none}

/* Productos: posiciones y animación completamente independientes del CSS heredado. */
.suka711-product{
  position:absolute;
  left:50%;
  top:50%;
  z-index:9;
  object-fit:contain;
  pointer-events:none;
  opacity:0;
  filter:drop-shadow(0 28px 25px rgba(11,22,37,.28));
  transform:translate(-50%,-50%) scale(.05) rotate(0deg);
  transition:opacity .34s ease var(--release-delay,160ms),transform 1.12s cubic-bezier(.16,.86,.2,1.08) var(--release-delay,160ms);
  will-change:transform,opacity;
}
.suka711-product[data-slot="1"]{width:142px;--px:-70px;--py:-255px;--rot:-8deg;--float-delay:-.6s;--float-duration:6.1s;--float-amp:15px}
.suka711-product[data-slot="2"]{width:178px;--px:245px;--py:-78px;--rot:12deg;--float-delay:-1.3s;--float-duration:6.6s;--float-amp:17px}
.suka711-product[data-slot="3"]{width:155px;--px:-220px;--py:-28px;--rot:-10deg;--float-delay:-2.1s;--float-duration:5.8s;--float-amp:13px}
.suka711-product[data-slot="4"]{width:170px;--px:28px;--py:226px;--rot:5deg;--float-delay:-3s;--float-duration:6.4s;--float-amp:16px}
.suka711-product[data-slot="5"]{width:150px;--px:235px;--py:188px;--rot:-7deg;--float-delay:-1.7s;--float-duration:6s;--float-amp:14px}
.suka711-product[data-slot="6"]{width:115px;--px:112px;--py:-220px;--rot:7deg;--float-delay:-2.5s;--float-duration:5.6s;--float-amp:12px}
.suka711-product[data-slot="7"]{width:145px;--px:-300px;--py:-170px;--rot:-4deg;--float-delay:-3.7s;--float-duration:6.8s;--float-amp:18px}
.suka711-product[data-slot="8"]{width:135px;--px:-292px;--py:196px;--rot:8deg;--float-delay:-.9s;--float-duration:6.2s;--float-amp:14px}
.suka711-stage.is-releasing-products .suka711-product,.suka711-stage.is-floating-products .suka711-product{
  opacity:1;
  transform:translate(-50%,-50%) translate(var(--px),var(--py)) scale(1) rotate(var(--rot));
}
.suka711-stage.is-floating-products .suka711-product{
  animation:suka711ProductFloat var(--float-duration,6s) ease-in-out infinite;
  animation-delay:var(--float-delay,-1s);
}
@keyframes suka711ProductFloat{
  0%,100%{transform:translate(-50%,-50%) translate(var(--px),var(--py)) scale(1) rotate(var(--rot))}
  50%{transform:translate(-50%,-50%) translate(var(--px),calc(var(--py) - var(--float-amp))) scale(1.015) rotate(calc(var(--rot) + 1.5deg))}
}

.suka711-spark{position:absolute;left:50%;top:47%;width:7px;height:7px;border-radius:50%;background:#f3c779;opacity:0;z-index:12;box-shadow:0 0 16px rgba(243,199,121,.9);pointer-events:none}
.suka711-stage.is-opening .suka711-spark{animation:suka711Spark 1.3s ease-out var(--sd,0s) both}
@keyframes suka711Spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}24%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.3)}}
.suka711-spark.s1{--sx:-145px;--sy:-120px;--sd:.1s}.suka711-spark.s2{--sx:135px;--sy:-132px;--sd:.14s}.suka711-spark.s3{--sx:-185px;--sy:-22px;--sd:.18s}.suka711-spark.s4{--sx:180px;--sy:-15px;--sd:.21s}.suka711-spark.s5{--sx:-135px;--sy:112px;--sd:.25s}.suka711-spark.s6{--sx:145px;--sy:105px;--sd:.29s}.suka711-spark.s7{--sx:-45px;--sy:-175px;--sd:.12s}.suka711-spark.s8{--sx:50px;--sy:-168px;--sd:.2s}.suka711-spark.s9{--sx:-210px;--sy:55px;--sd:.3s}.suka711-spark.s10{--sx:210px;--sy:58px;--sd:.34s}.suka711-spark.s11{--sx:-65px;--sy:150px;--sd:.32s}.suka711-spark.s12{--sx:75px;--sy:148px;--sd:.37s}
.suka711-replay{position:absolute;left:50%;top:calc(50% + 185px);transform:translateX(-50%);z-index:13;border:1px solid rgba(255,255,255,.4);background:rgba(14,32,56,.58);color:#fff;border-radius:999px;padding:11px 17px;font-size:11px;font-weight:800;backdrop-filter:blur(10px);cursor:pointer;opacity:0;transition:opacity .35s ease}
.suka711-stage.is-open .suka711-replay{opacity:1}.suka711-replay[hidden]{display:none}

/* Fallback solo si WebGL o Three.js no están disponibles. */
.suka711-fallback-box{display:none;position:absolute;inset:70px 70px 55px}
.suka711-stage.is-webgl-fallback .suka711-canvas{display:none}.suka711-stage.is-webgl-fallback .suka711-fallback-box{display:block}
.suka711-fallback-body{position:absolute;left:50%;bottom:12px;width:245px;height:145px;transform:translateX(-50%) perspective(600px) rotateX(-7deg);background:linear-gradient(135deg,#fffef9,#ddd8ce);border:4px solid var(--suka711-navy);box-shadow:0 28px 35px rgba(7,18,32,.35)}
.suka711-fallback-lid{position:absolute;left:50%;top:45px;width:250px;height:115px;transform:translateX(-50%) perspective(600px) rotateX(66deg);transform-origin:bottom;background:linear-gradient(135deg,#fffef9,#e6e1d7);border:4px solid var(--suka711-navy)}
.suka711-stage.is-open .suka711-fallback-lid{transform:translateX(-50%) perspective(600px) rotateX(-22deg)}

@media(max-width:600px){
  .suka711-canvas-wrap{width:330px;height:285px;top:52%}
  .suka711-box-hit{width:280px;height:210px;top:52%}
  .suka711-copy{width:210px}.suka711-copy strong{font-size:22px}.suka711-copy small{font-size:9px}
  .suka711-copy-closed{top:47%}.suka711-copy-open{top:63%}
  .suka711-replay{top:calc(52% + 145px)}
  .suka711-product[data-slot="1"]{width:90px;--px:-45px;--py:-176px}
  .suka711-product[data-slot="2"]{width:112px;--px:154px;--py:-58px}
  .suka711-product[data-slot="3"]{width:98px;--px:-145px;--py:-20px}
  .suka711-product[data-slot="4"]{width:112px;--px:18px;--py:157px}
  .suka711-product[data-slot="5"]{width:94px;--px:151px;--py:132px}
  .suka711-product[data-slot="6"]{width:80px;--px:73px;--py:-151px}
  .suka711-product[data-slot="7"]{width:90px;--px:-190px;--py:-116px}
  .suka711-product[data-slot="8"]{width:85px;--px:-188px;--py:137px}
}
@media(prefers-reduced-motion:reduce){.suka711-stage *{transition:none!important;animation:none!important}.suka711-stage.is-open .suka711-product{opacity:1!important}}


/* V7.1.2 — apertura automática; controles de acción ocultos. */
.suka711-box-hit,
.suka711-replay{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.suka711-stage,
.suka711-stage.is-box-closed,
.suka711-stage.is-opening,
.suka711-stage.is-open{
  cursor:default !important;
}


/* V7.1.3 — el texto vive dentro del modelo 3D; no se muestran copias HTML. */
.suka711-copy,
.suka711-copy-closed,
.suka711-copy-open{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.suka711-fallback-body{
  background:linear-gradient(145deg,#7897b5,#587797 72%) !important;
  border-color:#e2b679 !important;
}
.suka711-fallback-lid{
  background:linear-gradient(145deg,#86a2bd,#6483a2) !important;
  border-color:#e2b679 !important;
}

/* V7.1.4 — caja azul media y branding visible integrado en el modelo 3D. */
.suka711-stage{
  --suka711-dim:.12;
}
.suka711-stage.is-products-settled .suka711-canvas-wrap{
  opacity:calc(1 - var(--suka711-dim));
  filter:saturate(.92) brightness(.98);
}
.suka711-fallback-body{
  background:linear-gradient(145deg,#6289ad,#426d95 72%) !important;
  border-color:#e2b679 !important;
}
.suka711-fallback-lid{
  background:linear-gradient(145deg,#7598b8,#527ba1) !important;
  border-color:#e2b679 !important;
}


/* V7.1.5 — impresión directa sin etiqueta: azul Suka + dorado. */
.suka711-stage{--suka711-dim:.08}
.suka711-stage.is-products-settled .suka711-canvas-wrap{
  opacity:calc(1 - var(--suka711-dim));
  filter:saturate(.98) brightness(1);
}