/* ===== CajaMDigital — estilos y animaciones ===== */
:root{
  --bg:#0b0e16; --panel:#161a26; --muted:#8c93a5; --text:#eae8ff; --brand:#6c6cff;
  --brand-2:#28c7ff; --good:#00d68f; --bad:#ff4d67; --ring:rgba(108,108,255,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 50% -10%,#1b2040 0%,#0b0e16 55%),
  linear-gradient(120deg,#0b0e16,#0b0e16 70%,#0b0e16 );
  color:var(--text); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.badge{padding:6px 12px;border-radius:999px;background:#101425;color:#b6b9c7;border:1px solid #1f2435}

h1.big{font-weight:800;font-size:clamp(32px,6vw,56px);line-height:1.1;margin:12px 0 8px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:28px 0}
@media(min-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  background:linear-gradient(180deg,#171b28,#131826);
  border:1px solid #232a3e;border-radius:18px;padding:22px; position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.card h3{margin:0 0 6px;color:#aeb4c9;font-weight:700;letter-spacing:.02em}
.card .price{font-size:44px;font-weight:900;margin:6px 0 2px;letter-spacing:.02em}
.card .range{color:#a1a9be;font-weight:500}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient( 90deg, var(--brand), var(--brand-2) );
  color:white;border:0;border-radius:14px;padding:14px 18px;font-weight:800;
  box-shadow:0 10px 30px rgba(104,108,255,.35); cursor:pointer; transition:transform .05s ease;
}
.btn:active{transform:translateY(1px)}
.btn.outline{
  background:transparent;border:1px solid #2a324b;color:#cfd3e6;
}
.info-bar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.pill{background:#11162a;border:1px solid #1e2741;border-radius:16px;padding:14px 18px}
.pill .t{color:#99a1b8;font-weight:600}
.pill .v{font-size:22px;font-weight:900}

.footer{margin:40px 0 80px;color:#98a0b6;display:flex;gap:18px;flex-wrap:wrap}

/* ===== Overlay abrir caja ===== */
#open-overlay{
  position:fixed;inset:0;background:rgba(7,9,15,.80);backdrop-filter:blur(3px);
  display:none;place-items:center;z-index:9999;
}
#open-overlay.show{display:grid;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.chest-scene{ width:560px;max-width:90vw; aspect-ratio:16/12; perspective:1100px; }
.chest{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  background:radial-gradient(60% 60% at 50% 50%, #20263c 0%, #121728 100%);
  border-radius:18px; border:1px solid #263052; box-shadow:0 20px 80px rgba(0,0,0,.4) inset;
  display:grid;place-items:center;
}
.box{
  position:relative;width:66%;height:56%;transform-style:preserve-3d; transform:translateZ(0);
}
.box .base{
  position:absolute;inset:0;background:linear-gradient(180deg,#3d2a18,#2b1c10);
  border:3px solid #d4a25f;border-radius:10px; box-shadow:inset 0 4px 0 #e8c38f, 0 10px 30px rgba(0,0,0,.45);
}
.box .band{ position:absolute;left:50%;top:0;bottom:0;width:18%; transform:translateX(-50%);
  background:linear-gradient(180deg,#d3aa6a,#b88a4f);box-shadow:inset 0 2px 0 #f2d9a8 }
.box .lock{ position:absolute;left:50%;top:50%;transform:translate(-50%,-20%); width:50px;height:50px;
  background:#1d2336;border:3px solid #e0bf84;border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.35) }
.box .lid{
  position:absolute;left:0;right:0;top:-34%;height:38%; transform-origin:bottom center; transform:rotateX(0deg);
  background:linear-gradient(180deg,#3d2a18,#2b1c10); border:3px solid #d4a25f;border-bottom:0;border-radius:10px 10px 0 0;
  box-shadow:inset 0 4px 0 #e8c38f, 0 10px 30px rgba(0,0,0,.45)
}
.open .lid{ animation:openlid .7s cubic-bezier(.2,.9,.2,1.05) forwards }
@keyframes openlid{ 0%{transform:rotateX(0deg)} 70%{transform:rotateX(-95deg)} 100%{transform:rotateX(-88deg)} }

.glow{
  position:absolute;inset:-10%;background:radial-gradient(45% 45% at 50% 50%, rgba(255,233,146,.65), rgba(255,233,146,0) 60%);
  filter:blur(10px); opacity:0; pointer-events:none;
}
.open .glow{ animation:glow .6s .3s ease-out forwards }
@keyframes glow{ from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }

.result{
  margin-top:14px;text-align:center
}
.result h2{margin:8px 0 0;font-size:28px}
.result .sub{color:#9ba5bd}

/* confeti muy simple */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10000}
.confetti i{
  position:absolute; width:8px;height:12px; background: hsl(var(--hue),90%,60%);
  top:-12px; animation: fall linear forwards; opacity:.9; transform:rotate(0deg);
}
@keyframes fall{ to{ transform:translateY(110vh) rotate(360deg) } }