/* ==========================================================================
   Caixa 3D (ver assets/js/caixa3d.js)
   ========================================================================== */

.box3d {
  --u: 3px;                 /* igual à constante U do JS */
  --cut: #131518;           /* linha de corte */
  --fold: #e5007d;          /* linha de vinco */
  --fs: 1; --fb: 1; --fd: 1; --fl: 1; --ln: 0; --open: 0;
  --c: #00a3e0; --m: #e5007d; --y: #ffdd00;
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s;
}
.box3d.is-ready { opacity: 1; }

.bx-scene {
  position: absolute;
  inset: 0;
  perspective: 2400px;
  perspective-origin: 50% 35%;
}
.bx-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.bx-part {
  position: absolute;
  transform-style: preserve-3d;
}
.bx-face,
.bx-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bx-back {
  transform: rotateY(180deg);
  background: var(--inside);
}
.bx-face.is-shape,
.bx-back.is-shape { background: none; }

.bx-face svg,
.bx-back svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bx-face .fill { fill: var(--flap, var(--base)); }
.bx-back .fill-in { fill: var(--inside); }

/* Linhas da faca */
.bx-part line {
  stroke-width: var(--sw, 0.4px);
  stroke-linecap: round;
  opacity: var(--ln);
}
.bx-part line.cut { stroke: var(--cut); }
.bx-part line.fold { stroke: var(--fold); stroke-dasharray: var(--dash, 2px 1.4px); }

/* Faces impressas + sombreamento conforme a orientação */
.bx-face:not(.is-shape) { background-color: var(--base); }
.bx-face:not(.is-shape)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 20, calc(var(--sh, 0) * var(--fs)));
  pointer-events: none;
}
.bx-back:not(.is-shape)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 30, 20, 0.14);
}
.bx-face--front { --sh: 0.03; }
.bx-face--sideR { --sh: 0.17; }
.bx-face--sideL { --sh: 0.26; }
.bx-face--back  { --sh: 0.3; }
.bx-face--lid   { --sh: 0; }
.box3d[data-orient="lying"] .bx-face--sideL { --sh: 0; }
.box3d[data-orient="lying"] .bx-face--front { --sh: 0.08; }
.box3d[data-orient="lying"] .bx-face--lid   { --sh: 0.2; }
.box3d[data-orient="lying"] .bx-face--sideR { --sh: 0.32; }

.bx-shadow {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(19, 21, 24, 0.34), rgba(19, 21, 24, 0.13) 55%, rgba(19, 21, 24, 0) 100%);
  opacity: var(--fs);
}

/* Elementos de arte (decoração genérica, sem marca) */
.bx-art {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* Arte contínua: a faixa atravessa as faces como na impressão real */
.box3d .bx-face--front,
.box3d .bx-face--back,
.box3d .bx-face--sideL,
.box3d .bx-face--sideR {
  background-size: calc(var(--L) * var(--u)) 100%;
  background-position: calc(var(--x) * var(--u) * -1) 0;
  background-repeat: no-repeat;
}

/* Barras de "texto" genéricas */
.art-text {
  left: 8%;
  bottom: 14%;
  width: 46%;
  height: 24%;
  --bar: #8b9099;
  background:
    linear-gradient(var(--title, #17264a), var(--title, #17264a)) 0 0 / 78% 26% no-repeat,
    linear-gradient(var(--bar), var(--bar)) 0 52% / 100% 11% no-repeat,
    linear-gradient(var(--bar), var(--bar)) 0 76% / 90% 11% no-repeat,
    linear-gradient(var(--bar), var(--bar)) 0 100% / 64% 11% no-repeat;
}
.art-text-s {
  left: 12%;
  top: 16%;
  width: 70%;
  height: 22%;
  --bar: #8b9099;
  background:
    linear-gradient(var(--bar), var(--bar)) 0 0 / 100% 14% no-repeat,
    linear-gradient(var(--bar), var(--bar)) 0 33% / 86% 14% no-repeat,
    linear-gradient(var(--bar), var(--bar)) 0 66% / 94% 14% no-repeat,
    linear-gradient(var(--bar), var(--bar)) 0 100% / 58% 14% no-repeat;
}

/* Código de barras genérico */
.art-barcode {
  right: 9%;
  bottom: 14%;
  width: 22%;
  height: 40%;
  background:
    repeating-linear-gradient(90deg, #131518 0 3px, transparent 3px 5px, #131518 5px 6px, transparent 6px 9px, #131518 9px 13px, transparent 13px 15px, #131518 15px 16px, transparent 16px 20px)
    8% 12% / 84% 66% no-repeat,
    #fff;
}
.art-barcode-v {
  left: 22%;
  top: 8%;
  width: 56%;
  height: 16%;
  background:
    repeating-linear-gradient(0deg, #131518 0 3px, transparent 3px 5px, #131518 5px 6px, transparent 6px 9px, #131518 9px 13px, transparent 13px 15px)
    12% 8% / 76% 84% no-repeat,
    #fff;
}

/* ---- Modelo "estrutura": usado na montagem ---------------------------- */
.box3d[data-design="estrutura"] {
  --base: #fbfaf6;
  --flap: #fbfaf6;
  --inside: #b7ad9d;
  --tone: #005aac;
}
.box3d[data-design="estrutura"] .bx-face--front,
.box3d[data-design="estrutura"] .bx-face--back,
.box3d[data-design="estrutura"] .bx-face--sideL,
.box3d[data-design="estrutura"] .bx-face--sideR {
  background-image: linear-gradient(104deg, transparent 0 66%, var(--tone) 66% 79%, var(--c) 79% 81.5%, transparent 81.5%);
}
.box3d[data-design="estrutura"] .bx-face--lid {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 3px, transparent 3px 13px),
    var(--tone);
  box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--tone), inset 0 0 0 calc(4.6 * var(--u)) rgba(255, 255, 255, 0.55);
}
.box3d[data-design="estrutura"] .bx-tuck .fill { fill: var(--tone); }
.box3d[data-design="estrutura"] .art-text { --title: var(--tone); }
.art-rings {
  left: 8%;
  top: 12%;
  height: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side, var(--tone, #005aac) 0 7%, transparent 7% 19%);
}
.art-rings-s {
  right: 12%;
  top: 14%;
  height: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side, var(--tone, #005aac) 0 9%, transparent 9% 24%);
}

/* ---- Modelo "cmy": cartucho do produto 01 ----------------------------- */
.box3d[data-design="cmy"] {
  --base: #f3eee4;
  --flap: #f3eee4;
  --inside: #b5aa98;
  --navy: #17264a;
}
.box3d[data-design="cmy"] .bx-face--front,
.box3d[data-design="cmy"] .bx-face--back,
.box3d[data-design="cmy"] .bx-face--sideL,
.box3d[data-design="cmy"] .bx-face--sideR {
  background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--y), var(--y));
  background-size: 100% 20%, 100% 2.2%;
  background-position: 0 100%, 0 77.5%;
}
.box3d[data-design="cmy"] .bx-face--lid {
  background:
    radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 2px) 0 0 / 15px 15px,
    var(--navy);
  box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--navy), inset 0 0 0 calc(4.5 * var(--u)) var(--y);
}
.box3d[data-design="cmy"] .bx-tuck .fill { fill: var(--navy); }
.art-cmy {
  right: 9%;
  top: 9%;
  height: 58%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle closest-side, var(--c) 97%, transparent 100%) 0 0 / 64% 64% no-repeat,
    radial-gradient(circle closest-side, var(--m) 97%, transparent 100%) 100% 0 / 64% 64% no-repeat,
    radial-gradient(circle closest-side, var(--y) 97%, transparent 100%) 50% 100% / 64% 64% no-repeat;
  background-blend-mode: multiply;
}
.box3d[data-design="cmy"] .bx-face--front .art-text { top: 16%; bottom: auto; height: 30%; }
.art-dots {
  left: 12%;
  top: 48%;
  width: 34%;
  height: 12%;
  background:
    radial-gradient(circle closest-side, var(--c) 96%, transparent) 0 50% / 30% 100% no-repeat,
    radial-gradient(circle closest-side, var(--m) 96%, transparent) 50% 50% / 30% 100% no-repeat,
    radial-gradient(circle closest-side, var(--y) 96%, transparent) 100% 50% / 30% 100% no-repeat;
}

/* ---- Modelo "onda": caixa em microondulado do produto 02 -------------- */
.box3d[data-design="onda"] {
  --base: #1b2a47;
  --flap: #1b2a47;
  --inside: #c4a57a;
  --or: #f08a24;
  --cream: #f6efe2;
}
.box3d[data-design="onda"] .bx-face--front,
.box3d[data-design="onda"] .bx-face--back,
.box3d[data-design="onda"] .bx-face--sideL,
.box3d[data-design="onda"] .bx-face--sideR {
  background-image: linear-gradient(162deg,
    transparent 0 14%, var(--or) 14% 26%, var(--cream) 26% 27.4%, transparent 27.4% 62%,
    var(--or) 62% 74%, var(--cream) 74% 75.4%, transparent 75.4%);
}
.box3d[data-design="onda"] .bx-face--lid {
  background: var(--or);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--or), inset 0 0 0 calc(3.6 * var(--u)) var(--cream);
}
.box3d[data-design="onda"] .bx-tuck .fill { fill: var(--or); }
/* A caixa fica deitada: as "linhas" correm na vertical do painel */
.art-label {
  left: 14%;
  right: 14%;
  top: 33%;
  bottom: 31%;
  border-radius: calc(3 * var(--u));
  background:
    linear-gradient(var(--base), var(--base)) 19% 66.7% / 16% 70% no-repeat,
    linear-gradient(#7d8697, #7d8697) 47.3% 77.3% / 7% 56% no-repeat,
    linear-gradient(#7d8697, #7d8697) 62.4% 73.7% / 7% 62% no-repeat,
    linear-gradient(#7d8697, #7d8697) 77.4% 83.3% / 7% 40% no-repeat,
    var(--cream);
}
.art-label-s {
  left: 22%;
  right: 22%;
  top: 40%;
  bottom: 40%;
  border-radius: calc(2 * var(--u));
  background:
    linear-gradient(var(--base), var(--base)) 30% 70% / 14% 60% no-repeat,
    linear-gradient(#7d8697, #7d8697) 66% 76% / 10% 48% no-repeat,
    var(--cream);
}