/* ═══════════════════════════════════════════════════
   BOXY v2 — MyBox Pack Mascot (Fijado y Blindado)
   ═══════════════════════════════════════════════════ */

/* Escudo anti-deformaciones */
.boxy-container, .boxy-container *, .boxy-container *::before, .boxy-container *::after {
  box-sizing: border-box !important;
}

.boxy-container {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 10px 0 0; position: relative;
  user-select: none;
}

.boxy-character {
  position: relative; width: 200px; height: 220px; cursor: pointer;
  animation: boxyFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.35));
  transition: filter .3s;
}
.boxy-character:hover { filter: drop-shadow(0 25px 40px rgba(0,0,0,.45)); }

@keyframes boxyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-10px) rotate(1.5deg); }
  70% { transform: translateY(5px) rotate(-1deg); }
}

/* ── Body ── */
.boxy-body {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 160px; height: 140px; border-radius: 14px 14px 18px 18px;
  overflow: visible;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 5px),
    linear-gradient(175deg, #e8a96c 0%, #d4915a 30%, #c07a44 60%, #a86838 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.25), inset 0 -5px 0 rgba(0,0,0,.12),
    inset 3px 0 0 rgba(255,255,255,.08), inset -3px 0 0 rgba(0,0,0,.05);
}

/* ── Flaps ── */
.boxy-flap {
  position: absolute; width: 72px; height: 24px;
  border-radius: 6px 6px 2px 2px; transform-origin: bottom center; z-index: 2;
}
.boxy-flap-l {
  top: -20px; left: 6px;
  background: linear-gradient(180deg, #f0be8a, #d4915a);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 -2px 4px rgba(0,0,0,.1);
  animation: flapL 5s ease-in-out infinite;
}
.boxy-flap-r {
  top: -20px; right: 6px;
  background: linear-gradient(180deg, #e8b07e, #c88050);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.2), 0 -2px 4px rgba(0,0,0,.1);
  animation: flapR 5s ease-in-out .6s infinite;
}
@keyframes flapL { 0%,100%{transform:rotateX(20deg) rotateZ(-1deg)} 50%{transform:rotateX(35deg) rotateZ(1deg)} }
@keyframes flapR { 0%,100%{transform:rotateX(22deg) rotateZ(1deg)} 50%{transform:rotateX(30deg) rotateZ(-1deg)} }

.boxy-tape {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 148px; background: rgba(255,230,180,.12);
  border-left: 1.5px dashed rgba(255,255,255,.06); border-right: 1.5px dashed rgba(255,255,255,.06); z-index: 1;
}

.boxy-face { position: relative; width: 100%; height: 100%; }

/* ── Eyes ── */
.boxy-eye {
  position: absolute; width: 36px; height: 36px; background: #fff; border-radius: 50%;
  box-shadow: inset 0 3px 6px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.1);
  overflow: hidden; z-index: 5; animation: boxyBlink 3.5s ease-in-out infinite;
  transition: transform .25s ease;
}
.boxy-eye-l { top: 32px; left: 26px; }
.boxy-eye-r { top: 32px; right: 26px; animation-delay: .08s; }

.boxy-pupil {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: transform .06s ease-out;
  background: radial-gradient(circle at 38% 32%, #4a2a15, #1a0a04);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
}
.boxy-glint {
  position: absolute; width: 8px; height: 8px; background: rgba(255,255,255,.95);
  border-radius: 50%; top: 7px; left: 10px; z-index: 6; pointer-events: none;
}
.boxy-glint::after {
  content: ''; position: absolute; width: 4px; height: 4px;
  background: rgba(255,255,255,.6); border-radius: 50%; top: 12px; left: 2px;
}

@keyframes boxyBlink { 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.05)} }

/* ── Eyebrows ── */
.boxy-brow {
  position: absolute; width: 22px; height: 4px; background: #8b5e3c;
  border-radius: 3px; z-index: 6; transition: all .3s ease;
}
.boxy-brow-l { top: 24px; left: 30px; transform: rotate(-5deg); }
.boxy-brow-r { top: 24px; right: 30px; transform: rotate(5deg); }
.boxy-character:hover .boxy-brow-l { transform: rotate(-12deg) translateY(-3px); }
.boxy-character:hover .boxy-brow-r { transform: rotate(12deg) translateY(-3px); }
.boxy-character.covering .boxy-brow-l { transform: rotate(12deg) translateY(-2px); }
.boxy-character.covering .boxy-brow-r { transform: rotate(-12deg) translateY(-2px); }

/* ── Nose ── */
.boxy-nose {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 5px; background: #9e6840; border-radius: 0 0 50% 50%; z-index: 5;
}

/* ── Mouth ── */
.boxy-mouth {
  position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 10px; border-bottom: 3.5px solid #7a4422;
  border-radius: 0 0 14px 14px;
  transition: all .35s cubic-bezier(.34,1.56,.64,1); z-index: 5;
}
.boxy-character:hover .boxy-mouth { width: 30px; height: 14px; border-bottom-width: 4px; }
.boxy-character.covering .boxy-mouth {
  width: 14px; height: 14px; border: 3px solid #7a4422;
  border-radius: 50%; background: #5a2d0e;
}

/* ── Blush ── */
.boxy-blush {
  position: absolute; top: 68px; width: 20px; height: 10px;
  border-radius: 50%; background: rgba(255,100,100,.25);
  z-index: 4; opacity: 0; transition: opacity .4s;
}
.boxy-blush-l { left: 14px; }
.boxy-blush-r { right: 14px; }
.boxy-character:hover .boxy-blush { opacity: 1; }
.boxy-character.covering .boxy-blush { opacity: .7; }

/* ═══ HANDS ═══ */
.boxy-hand {
  position: absolute;
  width: 44px; height: 32px; border-radius: 8px 8px 10px 10px;
  z-index: 20; opacity: 0;
  transition: all .45s cubic-bezier(.34,1.56,.64,1);
  background: linear-gradient(170deg, #e8a96c 0%, #c07a44 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 3px 8px rgba(0,0,0,.25);
}
.boxy-hand::before {
  content: ''; position: absolute; top: -6px; left: 6px;
  width: 32px; height: 8px; background: inherit;
  border-radius: 6px 6px 0 0; box-shadow: inset 0 2px 0 rgba(255,255,255,.15);
}
.boxy-hand-l { top: 52px; left: -20px; transform: translateX(-25px) rotate(-15deg) scale(.7); }
.boxy-hand-r { top: 52px; right: -20px; transform: translateX(25px) rotate(15deg) scale(.7); }

.boxy-character.covering .boxy-hand-l {
  opacity: 1; left: 6px; top: 44px;
  transform: translateX(12px) rotate(-2deg) scale(1);
}
.boxy-character.covering .boxy-hand-r {
  opacity: 1; right: 6px; top: 44px;
  transform: translateX(-12px) rotate(2deg) scale(1);
}
.boxy-character.covering .boxy-eye { animation: none; transform: scaleY(.25); }

/* ── Feet ── */
.boxy-feet {
  position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 30px;
}
.boxy-foot {
  width: 26px; height: 10px;
  background: linear-gradient(180deg, #b06e3c, #8a5530);
  border-radius: 0 0 10px 10px; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* ── Label ── */
.boxy-label {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 900; color: rgba(255,255,255,.3);
  letter-spacing: .15em; text-transform: uppercase; pointer-events: none;
}

/* ── Shadow ── */
.boxy-shadow {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 16px;
  background: radial-gradient(ellipse, rgba(0,0,0,.3) 0%, transparent 70%);
  border-radius: 50%; animation: boxyShadow 4s ease-in-out infinite; z-index: -1;
}
@keyframes boxyShadow { 0%,100%{width:120px;opacity:.35} 30%{width:100px;opacity:.25} 70%{width:130px;opacity:.4} }

/* ── Speech (Corregido para MyBox Pack) ── */
.boxy-speech {
  position: relative;
  background: #2a6da8; /* Azul oscuro para que se lea en fondos claros */
  color: #ffffff;
  font-size: .82rem; font-weight: 700; padding: 10px 22px; border-radius: 22px;
  margin-bottom: 10px; opacity: 0; transform: translateY(10px) scale(.85);
  transition: all .5s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 4px 10px rgba(42, 109, 168, 0.3);
}
.boxy-speech::after {
  content: ''; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px;
  background: #2a6da8; 
}
.boxy-speech.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ── Squish ── */
@keyframes boxySquish {
  0%{transform:scale(1)} 20%{transform:scale(.88,1.12)} 40%{transform:scale(1.08,.92)}
  60%{transform:scale(.97,1.03)} 80%{transform:scale(1.02,.98)} 100%{transform:scale(1)}
}
.boxy-character.squish { animation: boxySquish .5s ease !important; }

/* ── Click stars ── */
.boxy-star {
  position: absolute; font-size: 14px; pointer-events: none;
  animation: starPop .8s ease forwards; z-index: 20;
}
@keyframes starPop {
  0% { opacity:1; transform:translate(0,0) scale(0); }
  30% { opacity:1; transform:translate(var(--sx),var(--sy)) scale(1.2); }
  100% { opacity:0; transform:translate(calc(var(--sx)*2),calc(var(--sy)*1.5 - 20px)) scale(.5); }
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .boxy-container { padding: 5px 0 0; }
  .boxy-character { width: 150px; height: 170px; }
  .boxy-body { width: 120px; height: 105px; }
  .boxy-eye { width: 28px; height: 28px; }
  .boxy-eye-l { top: 24px; left: 18px; }
  .boxy-eye-r { top: 24px; right: 18px; }
  .boxy-pupil { width: 12px; height: 12px; }
  .boxy-brow { width: 16px; top: 18px; }
  .boxy-brow-l { left: 22px; } .boxy-brow-r { right: 22px; }
  .boxy-mouth { top: 60px; } .boxy-nose { top: 50px; }
  .boxy-blush { top: 52px; }
  .boxy-flap { width: 54px; height: 18px; top: -16px; }
  .boxy-hand { width: 34px; height: 24px; }
  .boxy-hand::before { width: 24px; top: -5px; left: 4px; }
  .boxy-hand-l { top: 38px; left: -15px; }
  .boxy-hand-r { top: 38px; right: -15px; }
  .boxy-character.covering .boxy-hand-l { left: 4px; top: 32px; transform: translateX(8px) rotate(-2deg) scale(1); }
  .boxy-character.covering .boxy-hand-r { right: 4px; top: 32px; transform: translateX(-8px) rotate(2deg) scale(1); }
  .boxy-feet { gap: 22px; } .boxy-foot { width: 20px; height: 8px; }
  .boxy-speech { font-size: .74rem; padding: 7px 16px; }
}