.box-page {
  min-height: 100vh;
  padding-top: 90px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,61,0,.32), transparent 30%),
    radial-gradient(circle at 85% 70%, rgba(123,44,255,.35), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(0,200,255,.14), transparent 34%),
    #030004;
  color: #fff;
  overflow: hidden;
}

.mystery-hero {
  min-height: calc(100vh - 90px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 70px 7%;
  position: relative;
}

.mystery-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 55px 55px;
  pointer-events: none;
}

.box-content,
.box-visual {
  position: relative;
  z-index: 2;
}

.box-badge {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  color: #ff9f00;
  border: 1px solid rgba(255,159,0,.6);
  background: rgba(255,61,0,.12);
  font-weight: 900;
  letter-spacing: 4px;
  font-size: 12px;
  box-shadow: 0 0 28px rgba(255,61,0,.25);
}

.box-content h1 {
  margin-top: 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 9vw, 125px);
  line-height: .85;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #fff, #ff3d00, #ff9f00, #ffe600);
  -webkit-background-clip: text;
  color: transparent;
}

.box-content p {
  margin-top: 24px;
  max-width: 560px;
  color: #e4d8d2;
  font-size: 21px;
  line-height: 1.5;
}

.box-form {
  margin-top: 34px;
  max-width: 460px;
  display: grid;
  gap: 14px;
}

.box-form input {
  width: 100%;
  padding: 17px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 16px;
  outline: none;
}

.box-form input:focus {
  border-color: rgba(255,159,0,.75);
  box-shadow: 0 0 0 4px rgba(255,90,20,.14);
}

.box-form button,
.copy-box-code {
  padding: 17px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 900;
  font-size: 17px;
  color: #190400;
  background: linear-gradient(135deg, #ff3d00, #ff9f00, #ffe600);
  box-shadow:
    0 0 30px rgba(255,61,0,.55),
    0 0 70px rgba(255,230,0,.22);
}

.box-form button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.box-message {
  min-height: 22px;
  font-weight: 900;
  color: #ff9f00;
}

.box-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}

.box-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,61,0,.5), transparent 58%),
    radial-gradient(circle, rgba(123,44,255,.35), transparent 70%);
  filter: blur(35px);
  animation: glowPulse 2.2s infinite ease-in-out;
}

.mystery-box {
  position: relative;
  width: 340px;
  height: 300px;
  animation: boxIdle 1.6s infinite ease-in-out;
}

.box-light {
  position: absolute;
  left: 50%;
  top: 70px;
  width: 170px;
  height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,230,0,.75), transparent 65%);
  filter: blur(22px);
  opacity: .55;
  animation: lightFlicker 1s infinite alternate;
}

.box-lid {
  position: absolute;
  top: 40px;
  left: 35px;
  width: 270px;
  height: 90px;
  border-radius: 26px 26px 14px 14px;
  background:
    linear-gradient(135deg, #ff3d00, #ff9f00 60%, #ffe600);
  box-shadow:
    0 0 30px rgba(255,90,20,.7),
    inset 0 -12px 22px rgba(0,0,0,.28);
  transform-origin: bottom center;
}

.box-body {
  position: absolute;
  left: 50px;
  top: 118px;
  width: 240px;
  height: 150px;
  border-radius: 18px 18px 32px 32px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18), transparent 35%),
    linear-gradient(135deg, #350018, #7b2cff 45%, #ff007a);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 25px 80px rgba(0,0,0,.65),
    0 0 65px rgba(123,44,255,.45),
    inset 0 0 40px rgba(255,255,255,.08);
  display: grid;
  place-items: center;
}

.box-body span {
  font-size: 90px;
  font-weight: 900;
  color: #ffe600;
  text-shadow:
    0 0 18px rgba(255,230,0,.8),
    0 0 45px rgba(255,90,20,.65);
}

.mystery-box.opening {
  animation: boxOpenShake .5s ease-in-out infinite;
}

.mystery-box.opened .box-lid {
  animation: lidOpen .9s ease forwards;
}

.mystery-box.opened .box-light {
  opacity: 1;
  animation: lightExplode 1s ease forwards;
}

.box-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);
}

.box-modal.show {
  display: flex;
}

.box-modal-card {
  width: min(480px, 94vw);
  text-align: center;
  position: relative;
  padding: 34px 26px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top, rgba(255,61,0,.55), transparent 42%),
    radial-gradient(circle at right, rgba(123,44,255,.3), transparent 40%),
    linear-gradient(180deg, #210707, #070008);
  border: 1px solid rgba(255,159,0,.55);
  box-shadow:
    0 0 80px rgba(255,61,0,.42),
    0 0 130px rgba(123,44,255,.22);
}

.box-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.box-modal-card img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 18px rgba(255,90,20,.6));
}

.box-modal-card h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  line-height: .95;
  letter-spacing: 2px;
}

.box-modal-card p {
  color: #e4d8d2;
  margin-top: 10px;
  font-size: 16px;
}

.box-code-card {
  margin: 22px 0;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,90,20,.35);
  background: rgba(0,0,0,.38);
}

.box-code-card span {
  display: block;
  color: #d9c9c2;
  margin-bottom: 8px;
}

.box-code-card strong {
  display: block;
  color: #ff9f00;
  font-size: 30px;
  letter-spacing: 1px;
}

@keyframes boxIdle {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-1deg); }
}

@keyframes boxOpenShake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-7px) rotate(-2deg); }
  50% { transform: translateX(7px) rotate(2deg); }
  75% { transform: translateX(-4px) rotate(-1deg); }
}

@keyframes lidOpen {
  from { transform: rotate(0deg) translateY(0); }
  to { transform: rotate(-24deg) translateY(-90px); }
}

@keyframes lightFlicker {
  from { opacity: .35; transform: translateX(-50%) scale(.9); }
  to { opacity: .75; transform: translateX(-50%) scale(1.15); }
}

@keyframes lightExplode {
  from { transform: translateX(-50%) scale(1); opacity: .8; }
  to { transform: translateX(-50%) scale(2.5); opacity: 0; }
}

@keyframes glowPulse {
  0%,100% { opacity: .55; transform: scale(.95); }
  50% { opacity: .9; transform: scale(1.08); }
}

@media (max-width: 900px) {
  .mystery-hero {
    grid-template-columns: 1fr;
    padding: 60px 18px;
    text-align: center;
  }

  .box-form {
    margin-left: auto;
    margin-right: auto;
  }

  .box-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .box-visual {
    min-height: 380px;
  }

  .mystery-box {
    transform: scale(.82);
  }
}

@media (max-width: 600px) {
  .box-page {
    padding-top: 70px;
  }

  .box-content h1 {
    font-size: 62px;
  }

  .box-content p {
    font-size: 17px;
  }

  .mystery-box {
    transform: scale(.72);
  }

  .box-glow {
    width: 360px;
    height: 360px;
  }

  .box-modal-card h2 {
    font-size: 42px;
  }
}


/* =========================
   CAJA CON IMÁGENES
========================= */

.box-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
  position: relative;
}

.box-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,61,0,.55), transparent 56%),
    radial-gradient(circle, rgba(123,44,255,.35), transparent 70%);
  filter: blur(38px);
  animation: glowPulse 2.2s infinite ease-in-out;
  pointer-events: none;
}

.box-rays {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255,230,0,.18) 18deg,
      transparent 36deg,
      transparent 70deg,
      rgba(255,90,20,.2) 95deg,
      transparent 118deg,
      transparent 180deg,
      rgba(123,44,255,.2) 210deg,
      transparent 236deg,
      transparent 360deg
    );
  filter: blur(2px);
  opacity: .45;
  animation: raysRotate 8s linear infinite;
  pointer-events: none;
}

.box-particles {
  position: absolute;
  width: 620px;
  height: 620px;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,230,0,.95) 0 2px, transparent 3px) 10% 20% / 90px 90px,
    radial-gradient(circle, rgba(255,90,20,.9) 0 2px, transparent 3px) 70% 30% / 110px 110px,
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 3px) 40% 70% / 130px 130px;
  opacity: .7;
  animation: particlesFloat 3s ease-in-out infinite alternate;
}

.mystery-box-img {
  position: relative;
  width: min(500px, 90vw);
  aspect-ratio: 1 / 1;
  z-index: 3;
  animation:
    boxFloat 2.6s ease-in-out infinite,
    boxVibe 1.7s ease-in-out infinite;
  filter:
    drop-shadow(0 25px 45px rgba(0,0,0,.75))
    drop-shadow(0 0 42px rgba(255,90,20,.45));
}

.box-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    opacity .45s ease,
    transform .65s cubic-bezier(.12,.9,.18,1);
  user-select: none;
  pointer-events: none;
}

.box-img-closed {
  opacity: 1;
  transform: scale(1);
}

.box-img-open {
  opacity: 0;
  transform: scale(.9) translateY(20px);
}

.mystery-box-img.opening {
  animation:
    boxShake .45s ease-in-out infinite,
    boxGlowStrong .7s ease-in-out infinite alternate;
}

.mystery-box-img.opened {
  animation:
    boxFloatOpen 2.4s ease-in-out infinite;
}

.mystery-box-img.opened .box-img-closed {
  opacity: 0;
  transform: scale(.85) translateY(30px) rotate(-4deg);
}

.mystery-box-img.opened .box-img-open {
  opacity: 1;
  transform: scale(1.06) translateY(-8px);
}

.mystery-box-img.opened::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,230,0,.85), transparent 68%);
  filter: blur(22px);
  opacity: .9;
  z-index: -1;
  animation: openLightPulse 1.5s ease-in-out infinite;
}

.mystery-box-img.opened::after {
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,230,0,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 35%, rgba(255,90,20,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.95) 0 2px, transparent 4px),
    radial-gradient(circle at 40% 70%, rgba(123,44,255,.95) 0 3px, transparent 4px);
  opacity: .9;
  animation: sparkleBurst 1.4s ease-in-out infinite alternate;
  pointer-events: none;
}

/* =========================
   ANIMACIONES CAJA
========================= */

@keyframes boxFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-14px) rotate(-1deg) scale(1.025);
  }
}

@keyframes boxVibe {
  0%, 100% {
    filter:
      drop-shadow(0 25px 45px rgba(0,0,0,.75))
      drop-shadow(0 0 36px rgba(255,90,20,.38));
  }
  50% {
    filter:
      drop-shadow(0 30px 55px rgba(0,0,0,.8))
      drop-shadow(0 0 60px rgba(255,230,0,.48));
  }
}

@keyframes boxShake {
  0%, 100% {
    transform: translateX(0) rotate(0deg) scale(1.03);
  }
  20% {
    transform: translateX(-8px) rotate(-2deg) scale(1.04);
  }
  40% {
    transform: translateX(8px) rotate(2deg) scale(1.05);
  }
  60% {
    transform: translateX(-5px) rotate(-1deg) scale(1.04);
  }
  80% {
    transform: translateX(5px) rotate(1deg) scale(1.05);
  }
}

@keyframes boxGlowStrong {
  from {
    filter:
      drop-shadow(0 25px 45px rgba(0,0,0,.75))
      drop-shadow(0 0 45px rgba(255,90,20,.55));
  }
  to {
    filter:
      drop-shadow(0 30px 65px rgba(0,0,0,.85))
      drop-shadow(0 0 95px rgba(255,230,0,.85));
  }
}

@keyframes boxFloatOpen {
  0%, 100% {
    transform: translateY(0) scale(1.03);
  }
  50% {
    transform: translateY(-10px) scale(1.07);
  }
}

@keyframes openLightPulse {
  0%, 100% {
    opacity: .65;
    transform: translate(-50%, -50%) scale(.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

@keyframes raysRotate {
  from {
    transform: rotate(0deg) scale(.95);
  }
  to {
    transform: rotate(360deg) scale(1.05);
  }
}

@keyframes particlesFloat {
  from {
    transform: translateY(0) scale(1);
    opacity: .55;
  }
  to {
    transform: translateY(-22px) scale(1.05);
    opacity: .95;
  }
}

@keyframes sparkleBurst {
  from {
    transform: scale(.92) rotate(0deg);
    opacity: .45;
  }
  to {
    transform: scale(1.08) rotate(8deg);
    opacity: 1;
  }
}

@keyframes glowPulse {
  0%,100% {
    opacity: .55;
    transform: scale(.95);
  }
  50% {
    opacity: .9;
    transform: scale(1.08);
  }
}

/* MOBILE */

@media (max-width: 900px) {
  .box-visual {
    min-height: 420px;
  }

  .mystery-box-img {
    width: min(420px, 92vw);
  }

  .box-glow,
  .box-rays {
    width: 430px;
    height: 430px;
  }

  .box-particles {
    width: 460px;
    height: 460px;
  }
}

@media (max-width: 600px) {
  .box-visual {
    min-height: 330px;
  }

  .mystery-box-img {
    width: min(320px, 94vw);
  }

  .box-glow,
  .box-rays {
    width: 330px;
    height: 330px;
  }

  .box-particles {
    width: 350px;
    height: 350px;
  }
}

#chipRain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: .35;
}

.box-page,
.header {
  position: relative;
  z-index: 2;
}

.header {
  position: relative;
  z-index: 1000;
}