/* ============================================================
   ELEVADOS 3D · Sistema de diseño  ·  Tema: cohete / altitud
   ============================================================ */
:root {
  /* Espacio (fondos oscuros) */
  --space-900: #0a0e23;
  --space-800: #121737;
  --space-700: #1c2350;
  --space-card: #1a2150;

  /* Marca */
  --cohete: #6c5ce7;   /* morado elevación */
  --violeta: #8b5cf6;
  --llama: #ff6b5e;    /* coral fuego del cohete */
  --estrella: #ffc23c; /* amarillo monedas/estrellas */
  --cielo: #38bdf8;    /* azul cielo */
  --dinero: #22c55e;   /* verde dinero */
  --rosa: #ff7ac6;

  /* Claro */
  --bg: #f3f4ff;
  --bg-2: #e9ebff;
  --tinta: #1b1640;
  --tinta-2: #5a5685;
  --linea: #e6e6fb;
  --blanco: #ffffff;

  /* Degradados */
  --grad-cohete: linear-gradient(135deg, #6c5ce7 0%, #8b5cf6 50%, #38bdf8 100%);
  --grad-llama: linear-gradient(135deg, #ff6b5e 0%, #ffc23c 100%);
  --grad-dinero: linear-gradient(135deg, #22c55e 0%, #86efac 100%);
  --grad-espacio: radial-gradient(1200px 600px at 50% -10%, #2a2f6b 0%, #121737 45%, #0a0e23 100%);

  --sombra-sm: 0 4px 14px rgba(40, 30, 90, 0.10);
  --sombra: 0 12px 30px rgba(40, 30, 90, 0.14);
  --sombra-color: 0 12px 30px rgba(108, 92, 231, 0.35);
  --radio: 22px;
  --radio-sm: 14px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--tinta);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, .font-display {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tinta);
}

/* ---------- Fondo estrellado ---------- */
.starfield {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: var(--bg);
}
.starfield.dark { background: var(--grad-espacio); }
.star {
  position: absolute; border-radius: 50%; background: #fff;
  opacity: 0.8; animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle { 0%,100%{opacity:.2; transform:scale(.7);} 50%{opacity:1; transform:scale(1);} }

/* ---------- Layout ---------- */
.app-shell { max-width: 1180px; margin: 0 auto; padding: 0 16px 120px; }
.view { animation: viewIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 0 -16px 18px;
  background: rgba(243,244,255,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: "Fredoka"; font-weight: 700; font-size: 20px; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-cohete); color: #fff; font-size: 20px; box-shadow: var(--sombra-color);
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-5px) rotate(4deg);} }

.xp-pill {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--linea); border-radius: 999px;
  padding: 6px 10px 6px 6px; box-shadow: var(--sombra-sm); font-weight: 800;
}
.xp-pill .ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font-size: 18px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Fredoka"; font-weight: 600; font-size: 16px;
  border: none; border-radius: 14px; padding: 12px 20px; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  color: #fff; background: var(--cohete); box-shadow: var(--sombra-color);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-llama { background: var(--grad-llama); box-shadow: 0 12px 26px rgba(255,107,94,.35); }
.btn-dinero { background: var(--grad-dinero); box-shadow: 0 12px 26px rgba(34,197,94,.32); color:#0a3d1e;}
.btn-ghost { background: #fff; color: var(--cohete); border: 2px solid var(--linea); box-shadow: var(--sombra-sm); }
.btn-lg { font-size: 18px; padding: 16px 28px; border-radius: 18px; }
.btn-sm { font-size: 14px; padding: 8px 14px; border-radius: 11px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }

/* ---------- Tarjetas ---------- */
.card {
  background: #fff; border-radius: var(--radio); padding: 20px;
  box-shadow: var(--sombra); border: 1px solid rgba(255,255,255,.6);
}
.card-soft { background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-sm); border-radius: var(--radio); padding: 18px; }
.card-hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--grad-cohete); border-radius: 28px; padding: 26px;
  box-shadow: var(--sombra-color);
}
.card-hero::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%);
}

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr 1fr; } .grid-stack-mobile{grid-template-columns:1fr;} }

/* ---------- Stat cards (dashboard) ---------- */
.stat {
  border-radius: 20px; padding: 18px; color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--sombra);
}
.stat .stat-emoji { font-size: 26px; }
.stat .stat-num { font-family: "Fredoka"; font-weight: 700; font-size: clamp(22px, 5vw, 30px); line-height: 1.1; margin-top: 6px; }
.stat .stat-label { font-weight: 700; opacity: .92; font-size: 13px; }
.stat-invertido { background: linear-gradient(135deg,#ff6b5e,#ff9a5e); }
.stat-ingresos { background: var(--grad-cohete); }
.stat-beneficio { background: var(--grad-dinero); color:#08351b; }
.stat-vendidos { background: linear-gradient(135deg,#ffc23c,#ff9f1c); color:#5b3b00;}

/* ---------- Barra de combustible / progreso ---------- */
.fuel { background: #eceaff; border-radius: 999px; height: 16px; overflow: hidden; position: relative; }
.fuel > span {
  display: block; height: 100%; border-radius: 999px; background: var(--grad-llama);
  transition: width .8s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px rgba(255,107,94,.6);
}
.fuel.verde > span { background: var(--grad-dinero); box-shadow: 0 0 12px rgba(34,197,94,.5); }

/* ---------- Chips / etiquetas ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px; padding:5px 11px; border-radius:999px; background:var(--bg-2); color:var(--cohete); }
.chip-dinero { background:#dcfce7; color:#15803d; }
.chip-fuego { background:#ffe7e2; color:#e0412f; }
.chip-estrella { background:#fff3d6; color:#a86a00; }
.chip-aviso { background:#fef3c7; color:#92400e; }
.dificultad { letter-spacing:1px; }

/* ---------- Navegación inferior (móvil) ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; min-width: 60px; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: "Fredoka"; font-weight: 600; font-size: 10.5px; color: var(--tinta-2);
  padding: 6px 8px; border-radius: 14px; transition: .15s; position: relative;
}
.tab .ic { font-size: 21px; }
.tab.activo { color: var(--cohete); background: var(--bg-2); }
.tab.bloqueada { opacity: .5; }
.tab.bloqueada .ic::after { content: "🔒"; position: absolute; font-size: 11px; margin-left: -6px; margin-top: -4px; }
.tab .nuevo { position:absolute; top:2px; right:8px; width:9px; height:9px; border-radius:50%; background:var(--llama); box-shadow:0 0 0 2px #fff; animation:pop .5s; }

/* ---------- Bloqueado ---------- */
.locked {
  text-align: center; padding: 50px 20px; color: var(--tinta-2);
}
.locked .big { font-size: 64px; animation: float 4s ease-in-out infinite; }

/* ---------- Misión / clase ---------- */
.clase-card { display:flex; gap:14px; align-items:flex-start; }
.clase-num {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display:grid; place-items:center;
  font-family:"Fredoka"; font-weight:700; font-size:22px; color:#fff; background: var(--grad-cohete);
}
.clase-card.bloqueada { opacity:.62; filter: grayscale(.3); }
.timeline { position: relative; }
.timeline::before { content:""; position:absolute; left:25px; top:10px; bottom:10px; width:3px; background:linear-gradient(var(--cohete),var(--cielo)); border-radius:3px; opacity:.25; }

/* ---------- Logros ---------- */
.logro { text-align:center; padding:16px 10px; border-radius:18px; background:#fff; border:1px solid var(--linea); box-shadow:var(--sombra-sm); transition:.15s; }
.logro .em { font-size:38px; display:block; }
.logro.no { opacity:.45; filter:grayscale(1); }
.logro:hover { transform:translateY(-3px); }

/* ---------- Modal ---------- */
.modal-bg {
  position: fixed; inset: 0; z-index: 100; background: rgba(12,10,40,.55);
  backdrop-filter: blur(4px); display: grid; place-items: center; padding: 18px;
  animation: fade .2s;
}
.modal {
  background: #fff; border-radius: 26px; padding: 24px; width: 100%; max-width: 460px;
  box-shadow: 0 30px 80px rgba(20,15,60,.4); animation: pop .35s cubic-bezier(.2,.9,.3,1.2);
  max-height: 90vh; overflow-y: auto;
}
@keyframes fade { from{opacity:0;} to{opacity:1;} }
@keyframes pop { from{opacity:0; transform:scale(.85) translateY(20px);} to{opacity:1; transform:none;} }

/* ---------- Formularios ---------- */
.field { margin-bottom: 14px; }
.field label { display:block; font-weight:800; font-size:13px; margin-bottom:6px; color:var(--tinta); }
.input, select.input, textarea.input {
  width: 100%; font-family:"Nunito"; font-weight:700; font-size:16px; color:var(--tinta);
  background:#fff; border:2px solid var(--linea); border-radius:14px; padding:12px 14px; outline:none;
  transition:.15s;
}
.input:focus { border-color: var(--cohete); box-shadow: 0 0 0 4px rgba(108,92,231,.15); }

/* ---------- Mascota / burbuja ---------- */
.mascota-burbuja {
  display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--linea);
  border-radius:20px; padding:12px 16px; box-shadow:var(--sombra-sm);
}
.mascota-burbuja .em { font-size:34px; animation: float 4s ease-in-out infinite; }

/* ---------- Confeti / celebración ---------- */
.confetti { position: fixed; top: -10px; width: 10px; height: 14px; z-index: 200; pointer-events:none; border-radius:2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(620deg); opacity: .9; } }

/* ---------- Util ---------- */
.muted { color: var(--tinta-2); }
.center { text-align: center; }
.row { display:flex; align-items:center; gap:10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.sec-title { display:flex; align-items:center; gap:10px; margin: 26px 0 12px; }
.sec-title h2 { font-size: clamp(20px,4.5vw,26px); }
.pill-num { background:var(--grad-cohete); color:#fff; border-radius:999px; padding:2px 10px; font-size:13px; font-weight:800; }
.scroll-x { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.scroll-x::-webkit-scrollbar{display:none;}
a { color: var(--cohete); }
.count { font-variant-numeric: tabular-nums; }