/* FinQuest — Estilos. Oscuro cálido "oro": verde esmeralda + dorado (no AI). */
:root {
  --bg: #0c1712;           /* verde casi negro */
  --bg2: #102018;
  --panel: #14271d;        /* paneles verde oscuro */
  --panel2: #1c3528;
  --ink: #f4f7f1;          /* blanco cálido */
  --muted: #93a89b;        /* gris verdoso */
  --accent: #FFB800;       /* dorado cálido ámbar (acento de marca) */
  --accent2: #46d68a;      /* verde éxito */
  --danger: #f3766b;
  --purple: #1faa6b;       /* (nombre heredado) ahora ESMERALDA: color de marca */
  --brand2: #0f7a4c;       /* esmeralda más oscuro para degradados */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Títulos con la fuente display (personalidad de marca) */
h1, h2, h3,
.screen-title, .lp-title, .lp-h2, .ruta-title, .tools-subtitle,
.tool-big, .lp-price-amt, .fq-logo-text, .hud-logo-text,
.course-name, .lp-feat-t, .ob-logo, .lp-step b, .imp-h, .maestro-name {
  font-family: var(--font-display);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 72% -10%, #163d2b 0%, var(--bg) 55%);
  color: var(--ink);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ---------- HUD ---------- */
#hud {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: rgba(12,23,18,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ffffff14;
}
.hud-logo { display: flex; align-items: center; gap: 7px; padding-right: 14px; margin-right: 4px; border-right: 1px solid #ffffff1f; }
.hud-logo-pig { width: auto; height: 42px; object-fit: contain; }
.hud-logo-text { font-size: 19px; font-weight: 900; letter-spacing: -.5px; white-space: nowrap; }
.hud-avatar { width: 52px; height: 64px; display: flex; align-items: center; justify-content: center; }
.hud-block { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.hud-name { font-weight: 700; font-size: 15px; }
.hud-level { display: flex; align-items: center; gap: 8px; }
.lvl-tag { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.lvl-bar { flex: 1; height: 8px; background: #ffffff1a; border-radius: 99px; overflow: hidden; min-width: 90px; }
.lvl-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--accent)); border-radius: 99px; transition: width .4s; }
.lvl-next { font-size: 11px; color: var(--muted); white-space: nowrap; }
.hud-stat { text-align: center; padding: 0 6px; }
.hud-stat-val { font-weight: 800; font-size: 16px; color: var(--accent); }
.hud-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.hud-shop-btn {
  margin-left: auto; background: var(--accent); color: #1a1a1a; border: none;
  padding: 10px 16px; border-radius: 12px; font-weight: 800; cursor: pointer; font-size: 14px;
}
.hud-shop-btn:hover { filter: brightness(1.05); }
.pro-badge { background: linear-gradient(90deg,#ffd23f,#ff8a3f); color:#1a1a1a; font-size:10px; padding:2px 6px; border-radius:6px; font-weight:800; vertical-align: middle; }
.free-badge { background:#ffffff1a; color: var(--muted); font-size:10px; padding:2px 6px; border-radius:6px; font-weight:700; }

/* ---------- Layout general ---------- */
#app { max-width: 1180px; margin: 0 auto; padding: 28px 22px; }
.screen { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.screen-title { font-size: 30px; margin-bottom: 6px; }
.screen-sub { color: var(--muted); margin-bottom: 24px; }
.empty-note { color: var(--muted); padding: 20px; }

/* Botones */
.btn-primary { background: linear-gradient(90deg,var(--purple),#0f7a4c); color: #fff; border: none; padding: 14px 22px; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: var(--shadow); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--panel2); color: var(--ink); border: 1px solid #ffffff1f; padding: 14px 22px; border-radius: 12px; font-weight: 700; cursor: pointer; }
.btn-secondary:hover { background: var(--panel); }
.btn-ghost { background: transparent; color: var(--muted); border: none; cursor: pointer; font-size: 14px; padding: 6px 0; margin-bottom: 12px; }
.btn-ghost:hover { color: var(--ink); }
.btn-ghost.danger { color: var(--danger); margin-top: 28px; }
.hidden { display: none !important; }

/* ---------- Onboarding ---------- */
.onboarding { display: flex; justify-content: center; padding-top: 24px; }
.ob-card { background: var(--panel); border: 1px solid #ffffff14; border-radius: 24px; padding: 36px; width: 540px; max-width: 100%; box-shadow: var(--shadow); }
.ob-logo { font-size: 38px; font-weight: 900; text-align: center; letter-spacing: -1px; }
/* Logo FinQuest (Chancho + wordmark) */
.fq-logo { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fq-logo-pig { width: auto; height: 88px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); animation: floaty 3s ease-in-out infinite; }
.fq-logo-text { font-size: 42px; font-weight: 900; letter-spacing: -1.5px; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.fq-fin { color: var(--ink); }
.fq-quest { color: var(--accent); }
.ob-tag { text-align: center; color: var(--muted); margin: 8px 0 28px; }
.ob-label { display: block; font-weight: 700; margin: 18px 0 8px; }
.ob-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #ffffff22; background: var(--bg2); color: var(--ink); font-size: 16px; }
.ob-input:focus { outline: 2px solid var(--purple); }
.ob-chars { display: flex; gap: 16px; }
.ob-char { flex: 1; background: var(--bg2); border: 2px solid #ffffff14; border-radius: 16px; padding: 14px; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: .2s; }
.ob-char .ob-char-art .avatar { width: 90px !important; }
.ob-char.selected { border-color: var(--accent); background: #1b3a2a; }
.ob-char span { font-weight: 700; }
.ob-start { width: 100%; margin-top: 26px; }

/* ---------- Mapa de cursos ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.course-card { display: flex; gap: 16px; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 20px; cursor: pointer; transition: .2s; }
.course-card[data-open="1"]:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow); }
.course-card.locked { opacity: .55; cursor: not-allowed; }
.course-icon { font-size: 42px; }
.course-body { flex: 1; }
.course-name { font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.course-desc { color: var(--muted); font-size: 13px; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-lock { color: var(--accent); font-size: 13px; font-weight: 700; }
.course-prog { height: 8px; background: #ffffff1a; border-radius: 99px; overflow: hidden; }
.course-prog-fill { height: 100%; background: var(--accent2); }
.course-prog-txt { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* Rutas (orden sugerido del mapa) */
.ruta-section { margin-bottom: 30px; }
.ruta-head { margin: 4px 0 14px; }
.ruta-title { font-weight: 800; font-size: 20px; letter-spacing: -.3px; }
.ruta-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ruta-tag { color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.ruta-current .ruta-title { color: var(--accent); }
.course-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #ffffff14; color: var(--muted); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.course-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rec-badge { background: linear-gradient(90deg,#ffd23f,#ff8a3f); color: #1a1a1a; font-size: 10px; padding: 2px 8px; border-radius: 6px; font-weight: 800; }
.rec-badge.done { background: var(--accent2); color: #08130d; }

/* ---------- Temas ---------- */
.tema-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.tema-card { text-align: left; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 20px; cursor: pointer; color: var(--ink); transition: .2s; }
.tema-card:hover { border-color: var(--purple); transform: translateY(-3px); }
.tema-name { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.tema-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.tema-prog { height: 7px; background: #ffffff1a; border-radius: 99px; overflow: hidden; }
.tema-prog-fill { height: 100%; background: var(--accent2); }

/* ---------- Secciones por tema dentro del curso ---------- */
.tema-section { margin-bottom: 24px; }
.tema-header { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 12px; padding-bottom: 7px; border-bottom: 1px solid #ffffff1a; }
.tema-header-name { font-weight: 800; font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.tema-header-meta { font-size: 12px; color: var(--muted); font-weight: 700; }

/* ---------- Lecciones (camino) ---------- */
.lesson-path { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.lesson-node { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 16px 20px; cursor: pointer; color: var(--ink); text-align: left; transition: .2s; }
.lesson-node:hover { border-color: var(--purple); transform: translateX(4px); }
.lesson-node.done { border-color: var(--accent2); }
.lesson-num { width: 38px; height: 38px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.lesson-node.done .lesson-num { background: var(--accent2); color: #06371c; }
.lesson-name { font-weight: 700; }
.lesson-reward { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Lección (video) ---------- */
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius); overflow: hidden; margin: 8px 0 20px; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-placeholder { aspect-ratio: 16/9; background: var(--panel); border: 2px dashed #ffffff22; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); margin: 8px 0 20px; }
.vp-icon { font-size: 50px; }
.lesson-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lesson-hint { color: var(--muted); }

/* ---------- Aula: el Chancho dicta la clase ---------- */
.lesson-bar { display: flex; align-items: center; justify-content: space-between; }
.lesson-courselabel { color: var(--muted); font-size: 13px; font-weight: 600; }
.classroom { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: stretch; margin-top: 8px; }
.teacher { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; background: radial-gradient(circle at 50% 30%, #1b3a2a, var(--bg2)); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 20px 14px; }
.teacher-img { width: auto; height: 175px; max-width: 185px; object-fit: contain; animation: floaty 3s ease-in-out infinite; filter: drop-shadow(0 0 7px rgba(255,184,0,.4)) drop-shadow(0 8px 14px rgba(0,0,0,.42)); }
.teacher-bubble { background: var(--panel2); border: 1px solid var(--purple); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 13px; font-weight: 600; text-align: center; position: relative; }
.teacher-name { font-weight: 800; color: var(--purple); font-size: 13px; }
.teacher-img.talking { animation: talk .34s ease-in-out infinite; }
.teacher-img.celebrate { animation: bounce .7s ease 3; }
.slide-tag { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .6px; padding: 4px 10px; border-radius: 99px; margin-bottom: 12px; }
.tag-ejemplo { background: #14361f; color: var(--accent2); }
.tag-ojo { background: #3a1717; color: var(--danger); }
.tag-dato { background: #123326; color: var(--purple); }
.tag-pregunta { background: #3a3416; color: var(--accent); }
.lesson-opts { margin-top: 4px; }
@keyframes talk { 0%,100% { transform: translateY(0) scaleY(1) scaleX(1); } 50% { transform: translateY(-4px) scaleY(1.05) scaleX(.97); } }
.teacher-controls { display: flex; gap: 8px; margin-top: 4px; }
.voice-btn { background: var(--bg2); border: 1px solid #ffffff1f; color: var(--muted); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.voice-btn:hover { color: var(--ink); border-color: var(--purple); }
.slide-text { min-height: 3.4em; }
.slide-text::after { content: '▌'; color: var(--purple); animation: caret 1s steps(1) infinite; }
.slide-text.done::after { content: ''; }
@keyframes caret { 50% { opacity: 0; } }
.lesson-slide { background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.slide-dots { display: flex; gap: 8px; margin-bottom: 18px; }
.slide-dot { width: 28px; height: 6px; border-radius: 99px; background: #ffffff1a; transition: .3s; }
.slide-dot.on { background: var(--accent); }
.slide-dot.done { background: var(--accent2); }
.slide-icon { font-size: 54px; margin-bottom: 8px; }
.slide-title { font-size: 24px; margin-bottom: 14px; }
.slide-text { color: #d7dbf0; font-size: 17px; line-height: 1.6; flex: 1; }
.slide-nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.slide-nav .btn-secondary:disabled { opacity: .4; cursor: not-allowed; }
.slide-count { color: var(--muted); font-size: 13px; font-weight: 700; margin-left: auto; }
@media (max-width: 760px) { .classroom { grid-template-columns: 1fr; } .teacher { flex-direction: row; } .teacher-img { width: auto; height: 100px; } }

/* ---------- Quiz ---------- */
.quiz-screen { max-width: 720px; margin: 0 auto; }
.quiz-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.quiz-progress { flex: 1; height: 10px; background: #ffffff1a; border-radius: 99px; overflow: hidden; }
.quiz-progress-fill { height: 100%; background: linear-gradient(90deg,var(--purple),var(--accent)); transition: width .3s; }
.quiz-count { font-weight: 800; color: var(--muted); }
.quiz-card { background: var(--panel); border: 1px solid #ffffff14; border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.quiz-maestro { font-size: 40px; text-align: center; margin-bottom: 10px; }
.quiz-q { font-size: 22px; margin-bottom: 22px; text-align: center; }
.quiz-opts { display: flex; flex-direction: column; gap: 12px; }
.quiz-opt { background: var(--bg2); border: 2px solid #ffffff14; border-radius: 12px; padding: 16px; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; transition: .15s; }
.quiz-opt:hover:not(:disabled) { border-color: var(--purple); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.correct { border-color: var(--accent2); background: #14361f; }
.quiz-opt.wrong { border-color: var(--danger); background: #3a1717; }
.quiz-feedback { margin-top: 18px; padding: 0; max-height: 0; overflow: hidden; color: var(--muted); font-size: 14px; transition: max-height .3s, padding .3s; }
.quiz-feedback.show { max-height: 200px; padding: 14px 0 0; }
.fb-ok { color: var(--accent2); font-weight: 800; }
.fb-no { color: var(--danger); font-weight: 800; }
.quiz-next { margin-top: 20px; width: 100%; }

/* ---------- Resultado ---------- */
.result-screen { max-width: 560px; margin: 0 auto; }
.result-card { background: var(--panel); border: 1px solid #ffffff14; border-radius: 20px; padding: 30px; text-align: center; box-shadow: var(--shadow); }
.result-avatar .avatar { width: 150px !important; }
.result-avatar.celebrate { animation: bounce 1s ease infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
.result-score { color: var(--muted); margin: 8px 0 18px; }
.result-breakdown { background: var(--bg2); border-radius: 14px; padding: 16px; text-align: left; }
.bd-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.bd-amt { color: var(--accent2); font-weight: 700; }
.bd-total { border-top: 1px solid #ffffff1f; margin-top: 6px; padding-top: 12px; font-weight: 800; }
.bd-total .bd-amt { color: var(--accent); }
.maestro-inline { margin: 18px 0; color: var(--muted); font-size: 14px; }
.levelup { background: linear-gradient(90deg,var(--accent),#ff8a3f); color:#1a1a1a; font-weight: 800; padding: 10px; border-radius: 12px; margin-bottom: 16px; }
.result-actions { display: flex; gap: 12px; }
.result-actions button { flex: 1; }

/* ---------- Marketplace ---------- */
.market-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.market-character { background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 20px; position: sticky; top: 80px; text-align: center; }
.market-character h3 { margin-bottom: 12px; }
.char-stage { min-height: 240px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #1b3a2a, var(--bg2)); border-radius: 14px; }
.char-stage .avatar { width: 170px !important; }
.char-meta { margin-top: 14px; font-size: 14px; }
.char-balance { color: var(--accent); font-weight: 700; margin-top: 4px; }
.char-equipped { margin-top: 16px; text-align: left; }
.eq-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.eq-chip { display: flex; align-items: center; gap: 6px; background: var(--bg2); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; }
.eq-x { margin-left: auto; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.eq-x:hover { color: var(--danger); }
.eq-empty { color: var(--muted); font-size: 13px; }
.market-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cat-tab { background: var(--panel); border: 1px solid #ffffff14; border-radius: 99px; padding: 8px 16px; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; }
.cat-tab.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
.item-card { background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.item-card.is-owned { border-color: var(--accent2); }
.item-card.is-locked { opacity: .7; }
.item-icon { font-size: 40px; }
.item-name { font-weight: 700; font-size: 14px; min-height: 34px; display: flex; align-items: center; justify-content: center; }
.item-price { color: var(--accent); font-weight: 800; }
.item-bar { height: 6px; background: #ffffff1a; border-radius: 99px; overflow: hidden; }
.item-bar-fill { height: 100%; background: var(--purple); }
.item-locklabel { font-size: 11px; color: var(--muted); }
.buy-btn, .equip-btn { border: none; border-radius: 10px; padding: 10px; font-weight: 800; cursor: pointer; font-size: 13px; }
.buy-btn { background: var(--accent); color: #1a1a1a; }
.buy-btn.cant { background: #ffffff1a; color: var(--muted); cursor: not-allowed; }
.buy-btn.locked { background: #ffffff14; color: var(--muted); cursor: not-allowed; }
.equip-btn { background: var(--purple); color: #fff; }
.owned-tag { color: var(--accent2); font-weight: 800; font-size: 13px; padding: 8px; }
.sell-btn { border: 1px solid #ffffff22; background: transparent; color: var(--muted); border-radius: 10px; padding: 8px; font-weight: 700; cursor: pointer; font-size: 12px; }
.sell-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- Inversiones ---------- */
.invest-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.invest-summary { display: flex; gap: 16px; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 18px; margin: 8px 0 8px; }

/* Tienda ↔ Mi mundo: toggle segmentado */
.shop-toggle { display: inline-flex; gap: 4px; background: var(--panel); border: 1px solid #ffffff14; border-radius: 12px; padding: 4px; margin: 4px 0 14px; }
.st-btn { background: transparent; border: none; border-radius: 9px; padding: 8px 18px; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; transition: .15s; }
.st-btn.active { background: var(--accent); color: #1a1a1a; }
.st-btn:not(.active):hover { color: var(--ink); }
.world-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Perfil: mini-tarjeta de Mi mundo */
.world-mini { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--panel); border: 1px solid #ffffff14; border-radius: 16px; padding: 14px 18px; margin: 14px 0 4px; cursor: pointer; color: var(--ink); font-family: inherit; text-align: left; transition: .15s; }
.world-mini:hover { border-color: var(--accent); }
.wm-ic { font-size: 26px; }
.wm-body { flex: 1; }
.wm-title { display: block; font-weight: 800; font-size: 15px; margin-bottom: 7px; }
.wm-count { color: var(--muted); font-weight: 600; font-size: 12.5px; margin-left: 6px; }
.wm-bar { display: block; height: 8px; background: #ffffff12; border-radius: 99px; overflow: hidden; }
.wm-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 99px; }
.wm-go { color: var(--accent); font-size: 20px; font-weight: 800; }

/* Mi mundo: progreso + próximo desbloqueo */
.world-progress { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.wp-bar { flex: 1; height: 10px; background: #ffffff12; border-radius: 99px; overflow: hidden; }
.wp-fill { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 99px; transition: width .6s; }
.wp-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.world-next { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid #ffffff14; border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; }
.wn-info { flex: 1; }
.wn-title { font-size: 14.5px; margin-bottom: 8px; }
.wn-bar { height: 8px; background: #ffffff12; border-radius: 99px; overflow: hidden; }
.wn-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.wn-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.wn-btn { white-space: nowrap; }
.wn-done { justify-content: center; font-size: 15px; }
@media (max-width: 560px) { .world-next { flex-direction: column; align-items: stretch; text-align: center; } }

/* Tienda: destello del ítem enfocado desde Mi mundo */
.item-focus { outline: 2px solid var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); animation: itemPulse 1.3s ease-in-out 2; }
@keyframes itemPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Herramientas: buscador + recientes */
.tools-search { margin: 4px 0 12px; }
.tools-search input { width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid #ffffff1a; border-radius: 14px; padding: 13px 16px; color: var(--ink); font-size: 15px; font-family: inherit; outline: none; }
.tools-search input:focus { border-color: var(--accent); }
.tools-recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.tr-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.tr-chip { background: var(--panel); border: 1px solid #ffffff1a; border-radius: 99px; padding: 7px 14px; color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .15s; }
.tr-chip:hover { border-color: var(--accent); }
.tools-results { margin-bottom: 14px; }
.tools-noresult { color: var(--muted); text-align: center; padding: 18px; }

/* Quiz: chips de repaso + tarjeta de progreso */
.wheel-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.repaso-chip { border-color: var(--purple, #b08be0) !important; }
.quiz-progress { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 18px; background: var(--panel); border: 1px solid #ffffff12; border-radius: 14px; padding: 12px 18px; }
.qp-stat { color: var(--muted); font-size: 13.5px; }
.qp-stat b { color: var(--ink); }

/* Asignación por riesgo (diversificación de un vistazo) */
.invest-alloc { margin: 2px 0 10px; }
.alloc-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: #ffffff10; }
.alloc-bar i { display: block; height: 100%; }
.alloc-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.alloc-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.alloc-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Etiqueta "como en la vida real" en las tarjetas de riesgo */
.it-vida { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: block; width: 100%; padding: 0 6px; box-sizing: border-box; text-align: center; }

/* Confirmación al retirar con pérdida */
.inv-confirm-overlay { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 999; padding: 20px; }
.inv-confirm { background: var(--panel2, var(--panel)); border: 1px solid #ffffff22; border-radius: 20px; padding: 26px 24px; max-width: 420px; text-align: center; box-shadow: 0 20px 60px #000b; }
.ic-emoji { font-size: 34px; }
.ic-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 8px 0 6px; color: var(--danger); }
.ic-text { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.ic-btns { display: flex; gap: 10px; justify-content: center; }
.btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); border-radius: 12px; padding: 10px 16px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.isum { flex: 1; text-align: center; }
.isum-val { font-size: 22px; font-weight: 800; color: var(--ink); }
.isum-val.pos { color: var(--accent2); } .isum-val.neg { color: var(--danger); }
.isum-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.invest-subhead { margin: 26px 0 14px; }
.invest-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.invest-type { text-align: left; background: var(--panel); border: 2px solid #ffffff14; border-radius: var(--radius); padding: 16px; cursor: pointer; color: var(--ink); transition: .2s; }
.invest-type:hover { border-color: var(--purple); }
.invest-type.selected { border-color: var(--accent); background: #1b3a2a; }
.it-icon { font-size: 30px; }
.it-label { font-weight: 800; font-size: 16px; margin: 4px 0; }
.it-risk { font-size: 11px; font-weight: 700; display: inline-block; padding: 2px 8px; border-radius: 99px; margin-bottom: 8px; }
.risk-bajo { background: #14361f; color: var(--accent2); }
.risk-medio { background: #3a3416; color: var(--accent); }
.risk-alto { background: #3a1717; color: var(--danger); }
.it-desc { font-size: 12px; color: var(--muted); }
.invest-form { display: flex; gap: 12px; margin-top: 16px; }
.invest-form .ob-input { flex: 1; }
.invest-note { color: var(--muted); font-size: 13px; margin-top: 12px; }
.invest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }
.inv-card { background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 16px; }
.inv-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.inv-type-tag { font-weight: 700; font-size: 13px; }
.inv-days { font-size: 12px; color: var(--muted); }
.inv-values { display: flex; justify-content: space-between; align-items: baseline; }
.inv-now { font-size: 24px; font-weight: 800; }
.inv-gain { font-size: 14px; font-weight: 700; }
.inv-gain.pos { color: var(--accent2); } .inv-gain.neg { color: var(--danger); }
.inv-spark { margin: 8px 0; }
.spark { display: block; }
.inv-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.inv-principal { font-size: 12px; color: var(--muted); }
.withdraw-btn { background: var(--purple); color: #fff; border: none; border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer; font-size: 13px; }
.withdraw-btn.early { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.inv-lockmsg { font-size: 12px; color: var(--muted); margin-top: 8px; }
@media (max-width: 720px) { .invest-types { grid-template-columns: 1fr; } }

/* ---------- Perfil ---------- */
.profile-head { display: flex; gap: 24px; align-items: center; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.profile-avatar .avatar { width: 130px !important; }
.profile-info h1 { margin-bottom: 14px; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 22px; }
.pstat { text-align: center; }
.pstat-val { font-size: 22px; font-weight: 800; color: var(--accent); }
.pstat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.profile-section { margin-bottom: 14px; }
.owned-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.owned-chip { background: var(--panel); border: 1px solid #ffffff14; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* ---------- Nav inferior ---------- */
#nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 30px; background: rgba(12,23,18,.96); backdrop-filter: blur(8px); border-top: 1px solid #ffffff14; padding: 8px 0; z-index: 40; }
#nav button { background: transparent; border: none; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 22px; padding: 6px 18px; border-radius: 12px; }
#nav button span { font-size: 11px; font-weight: 600; }
#nav button:hover { color: var(--ink); background: #ffffff10; }
#nav button.active { color: var(--accent); background: #ffffff10; }

/* Quiz de práctica */
.quiz-subtitle { text-align: center; color: var(--purple); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
/* Badge de dificultad de la pregunta */
.quiz-dif {
  display: flex; align-items: center; gap: 5px; width: fit-content; margin: 0 auto 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px; border: 1px solid currentColor;
}
.quiz-dif::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.quiz-dif.dif-facil   { color: #46d68a; background: rgba(70,214,138,.10); }
.quiz-dif.dif-media   { color: #f5c542; background: rgba(245,197,66,.10); }
.quiz-dif.dif-dificil { color: #ff6b6b; background: rgba(255,107,107,.10); }
.course-card[data-practice] { cursor: pointer; transition: .2s; }
.course-card[data-practice]:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow); }
.practice-meta { font-size: 13px; color: var(--accent); font-weight: 600; }
.practice-hint { color: var(--muted); margin-top: 18px; font-size: 14px; }
.practice-subhead { margin: 26px 0 14px; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }
.random-card { display: flex; gap: 18px; align-items: center; background: linear-gradient(100deg, #123326, #1e2342); border: 1px solid var(--purple); border-radius: var(--radius); padding: 22px; cursor: pointer; transition: .2s; }
.random-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.random-icon { font-size: 48px; }
.random-title { font-weight: 800; font-size: 19px; margin-bottom: 4px; }
.random-desc { color: var(--muted); font-size: 14px; margin-bottom: 8px; }

/* ---------- Maestro toast ---------- */
#maestro-toast { position: fixed; right: 24px; bottom: 90px; max-width: 340px; display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--purple); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); transform: translateY(30px); opacity: 0; pointer-events: none; transition: .35s; z-index: 60; }
#maestro-toast.show { transform: none; opacity: 1; pointer-events: auto; }
.maestro-face { position: relative; flex-shrink: 0; }
.mood-badge { position: absolute; bottom: -2px; right: -4px; font-size: 18px; }
.chancho-img { object-fit: contain; display: block; filter: drop-shadow(0 0 4px rgba(255,184,0,.38)) drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
/* el aura grande del maestro de lección la define .teacher-img (más abajo no la pisamos) */
.teacher-img.chancho-img { filter: drop-shadow(0 0 7px rgba(255,184,0,.4)) drop-shadow(0 8px 14px rgba(0,0,0,.42)); }
.maestro-face .chancho-img { width: 58px; height: 58px; }
.quiz-maestro .chancho-img { width: 76px; height: 76px; margin: 0 auto; }
.maestro-inline .chancho-img.inline { width: 30px; height: 30px; display: inline-block; vertical-align: middle; }
.maestro-face.cheer .chancho-img { animation: bounce 1s ease infinite; }
.maestro-face.warn .chancho-img { animation: shake .5s ease; }
.maestro-face.sad .chancho-img { filter: grayscale(.4) brightness(.92); }
@keyframes shake { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-4px);} 75% { transform: translateX(4px);} }
.maestro-name { font-weight: 800; color: var(--purple); font-size: 13px; margin-bottom: 3px; }
.maestro-msg { font-size: 13px; line-height: 1.4; }

.avatar { display: block; }

/* ---------- Avatar del jugador (chanchito vestible por nivel) ---------- */
.paperdoll { position: relative; display: inline-block; line-height: 0; }
.paperdoll .pd-base { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom center; }
/* Aura/glow que sigue la silueta: disimula el borde del recorte y da look premium.
   Los drop-shadow encadenados trazan el contorno del alpha en varias direcciones. */
.paperdoll-mini .pd-base {
  filter:
    drop-shadow(0 0 2px rgba(255,184,0,.35))
    drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.paperdoll-big .pd-base {
  filter:
    drop-shadow(0 0 5px rgba(255,184,0,.28))
    drop-shadow(0 8px 14px rgba(0,0,0,.42));
}

/* Look actual (caption bajo el avatar en el perfil) */
.profile-look {
  margin-top: 6px; text-align: center; font-size: .82rem; font-weight: 700;
  color: var(--accent); letter-spacing: .02em;
}

/* Vista previa de próximos outfits bloqueados */
.outfit-preview { margin: 18px 0 4px; }
.outfit-preview .op-title { font-size: .9rem; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.outfit-preview .op-row { display: flex; gap: 14px; flex-wrap: wrap; }
.op-card {
  width: 130px; background: var(--panel); border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px; padding: 12px 10px 10px; text-align: center;
}
.op-imgwrap { position: relative; height: 120px; display: flex; align-items: flex-end; justify-content: center; }
.op-img { height: 100%; width: auto; object-fit: contain; object-position: bottom center; filter: grayscale(.9) brightness(.55) drop-shadow(0 0 4px rgba(255,255,255,.25)); opacity: .85; }
.op-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.op-name { margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.op-req { margin-top: 2px; font-size: .74rem; color: var(--accent); font-weight: 700; }
.op-maxed { background: var(--panel); border: 1px solid var(--accent); border-radius: 16px; padding: 14px 16px; font-weight: 700; color: var(--accent); }

/* Showcase del personaje en onboarding */
.ob-charsolo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 14px; }
.ob-char-note { font-size: .82rem; color: var(--muted); text-align: center; max-width: 320px; line-height: 1.4; }

/* ---------- Animación: desbloqueo de outfit al subir de nivel ---------- */
.ou-overlay {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,6,.72); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s ease; padding: 20px;
}
.ou-overlay.show { opacity: 1; }
.ou-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--accent); border-radius: 24px; padding: 26px 28px 24px;
  max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 4px rgba(255,184,0,.08);
  transform: translateY(24px) scale(.94); transition: transform .4s cubic-bezier(.2,.9,.3,1.2);
}
.ou-overlay.show .ou-card { transform: translateY(0) scale(1); }
.ou-spark { font-size: 2rem; animation: ou-spin 2.4s linear infinite; }
@keyframes ou-spin { to { transform: rotate(360deg); } }
.ou-title { margin: 4px 0 2px; font-size: 1.35rem; font-weight: 900; color: var(--accent); }
.ou-sub { font-size: .92rem; color: var(--ink); font-weight: 700; margin-bottom: 14px; }
.ou-stage { position: relative; height: 260px; display: flex; align-items: flex-end; justify-content: center; }
.ou-newwrap { height: 100%; display: flex; align-items: flex-end; }
.ou-new {
  height: 100%; width: auto; object-fit: contain; object-position: bottom center;
  filter:
    drop-shadow(0 0 7px rgba(255,184,0,.35))
    drop-shadow(0 12px 22px rgba(0,0,0,.5));
  opacity: 0; transform: scale(.7) translateY(20px); animation: ou-pop .7s .25s cubic-bezier(.2,.9,.3,1.3) forwards;
}
@keyframes ou-pop { to { opacity: 1; transform: scale(1) translateY(0); } }
.ou-chancho {
  position: absolute; right: -6px; bottom: 0; height: 120px; width: auto; object-fit: contain;
  opacity: 0; transform: translateX(30px) rotate(8deg);
  animation: ou-enter .55s .55s ease forwards, ou-bounce 1.1s 1.1s ease-in-out infinite;
}
@keyframes ou-enter { to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes ou-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ou-desc { margin: 12px 0 16px; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.ou-close { width: 100%; }

/* ---------- Maestro Chancho — compañero fijo (lecciones y quiz) ---------- */
#maestro-companion {
  position: fixed; right: 22px; bottom: 88px; z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  opacity: 0; transform: translateY(24px) scale(.9); pointer-events: none; transition: .35s ease;
}
#maestro-companion.show { opacity: 1; transform: none; }
#maestro-companion .mc-img { width: auto; height: 132px; object-fit: contain; }
.mc-pig { position: relative; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.mc-accent { position: absolute; top: 2px; right: 6px; font-size: 30px; animation: pop .4s ease; }
.mc-bubble {
  background: var(--panel); border: 1px solid var(--purple); border-radius: 16px 16px 4px 16px;
  padding: 10px 14px; font-size: 13px; max-width: 220px; box-shadow: var(--shadow);
  font-weight: 600; transition: opacity .4s; align-self: flex-end;
}
.mc-bubble-hide { opacity: 0; }
.mc-neutral .mc-img { animation: floaty 3s ease-in-out infinite; }
.mc-celebrate .mc-img { animation: bounce .7s ease infinite; }
.mc-celebrate .mc-pig { filter: drop-shadow(0 0 16px rgba(74,222,128,.6)); }
.mc-sad .mc-img { filter: grayscale(.55) brightness(.9); transform: rotate(-5deg); }
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }
@keyframes pop { 0% { transform: scale(0);} 70% { transform: scale(1.25);} 100% { transform: scale(1);} }
@media (max-width: 720px) { #maestro-companion .mc-img { width: auto; height: 100px; } }

@media (max-width: 820px) {
  .market-layout { grid-template-columns: 1fr; }
  .market-character { position: static; }
  #hud { flex-wrap: wrap; gap: 10px; }
  .hud-block { min-width: 140px; }
}

/* ============ Herramientas ============ */
.tool-card { cursor: pointer; }
.tool-detail { max-width: 640px; }
.link-back { color: var(--muted); cursor: pointer; display: inline-block; margin-bottom: 12px; font-size: 14px; }
.link-back:hover { color: var(--ink); }
.tool-panel { background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.tool-intro { color: var(--muted); font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.tool-field { display: block; margin-bottom: 16px; }
.tool-flabel { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.tool-finput { display: flex; align-items: center; background: var(--bg2); border: 1px solid #ffffff1f; border-radius: 12px; overflow: hidden; }
.tool-finput input { flex: 1; background: transparent; border: none; color: var(--ink); padding: 12px 14px; font-size: 16px; font-weight: 700; outline: none; min-width: 0; }
.tool-finput:focus-within { border-color: var(--purple); }
.tool-suffix { padding: 0 14px; color: var(--muted); font-weight: 700; font-size: 14px; }
.tool-hint { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; line-height: 1.4; }
.tool-result { margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff14; }
.tool-big { font-size: 38px; font-weight: 900; color: var(--accent); letter-spacing: -1px; }
.tool-biglbl { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.tool-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tool-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink); }
.tool-row span { color: var(--muted); }
.tool-row.gain b { color: var(--accent); }
.tool-row.total { border-top: 1px dashed #ffffff24; padding-top: 8px; font-weight: 800; }
.tool-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: #ffffff12; margin-bottom: 8px; }
.tool-bar-seg { height: 100%; }
.seg-aporte { background: var(--purple); }
.seg-gana { background: var(--accent); }
.tool-bar-leg { display: flex; gap: 18px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.tool-bar-leg .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.tool-note { background: #ffffff0d; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.tool-mini { color: var(--muted); font-size: 11px; margin-top: 10px; line-height: 1.4; }
.tool-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tool-tabs button { flex: 1; background: var(--bg2); border: 1px solid #ffffff1f; color: var(--muted); padding: 10px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 13px; }
.tool-tabs button.active { background: var(--purple); color: #fff; border-color: var(--purple); }

/* Presupuesto */
.pres-block { margin-bottom: 18px; }
.pres-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pres-head h3 { font-size: 15px; }
.pres-sum { color: var(--accent); font-size: 16px; }
.pres-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.pres-row input, .pres-row select { background: var(--bg2); border: 1px solid #ffffff1f; color: var(--ink); padding: 9px 10px; border-radius: 9px; font-size: 13px; outline: none; }
.pres-row input:focus, .pres-row select:focus { border-color: var(--purple); }
.pres-name { flex: 1; min-width: 0; }
.pres-cat { width: 110px; }
.pres-amt { width: 110px; text-align: right; font-weight: 700; }
.pres-del { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 6px; }
.pres-del:hover { color: var(--danger); }
.btn-ghost.small { font-size: 13px; color: var(--purple); font-weight: 700; }
.pres-saldo { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 12px; margin: 6px 0 22px; font-weight: 700; }
.pres-saldo.pos { background: rgba(70,214,138,.12); color: var(--accent2); }
.pres-saldo.neg { background: rgba(255,90,90,.12); color: var(--danger); }
.pres-saldo b { font-size: 20px; }
.pres-503020 h3 { font-size: 15px; margin-bottom: 14px; }
.cmp-row { margin-bottom: 14px; }
.cmp-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.cmp-top small { color: var(--muted); font-weight: 600; }
.cmp-top b.good { color: var(--accent2); }
.cmp-top b.bad { color: #ffb74d; }
.cmp-bar { position: relative; height: 10px; background: #ffffff12; border-radius: 99px; }
.cmp-fill { height: 100%; border-radius: 99px; }
.cmp-fill.good { background: var(--accent2); }
.cmp-fill.bad { background: #ffb74d; }
.cmp-mark { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); opacity: .5; }
.tool-conv { display: flex; align-items: flex-end; gap: 10px; }
.tool-conv .tool-field { flex: 1; margin-bottom: 0; }
.tool-eq { font-size: 22px; font-weight: 800; color: var(--muted); padding-bottom: 12px; }

/* Herramientas — extras */
.tools-subtitle { font-size: 20px; font-weight: 800; margin: 34px 0 4px; }
.tool-finput select { flex: 1; background: transparent; border: none; color: var(--ink); padding: 12px 14px; font-size: 16px; font-weight: 700; outline: none; cursor: pointer; }
.tool-finput select option { background: var(--panel); color: var(--ink); }
.link-card { text-decoration: none; color: inherit; }
.link-card:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: var(--shadow); }
.ext-badge { color: var(--accent); font-weight: 900; font-size: 13px; }
.tool-verdict { display: inline-block; padding: 8px 14px; border-radius: 10px; font-weight: 800; font-size: 15px; margin-bottom: 16px; }
.tool-verdict small { display: block; font-weight: 600; font-size: 11px; opacity: .85; margin-top: 2px; }
.tool-verdict.good { background: rgba(70,214,138,.15); color: var(--accent2); }
.tool-verdict.mid { background: rgba(245,197,66,.15); color: var(--accent); }
.tool-verdict.bad { background: rgba(243,118,107,.15); color: var(--danger); }

/* ============ Landing ============ */
.landing { max-width: 1000px; margin: 0 auto; }
.lp-hero { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 24px 16px 50px; max-width: 1040px; margin: 0 auto; }
.lp-hero-text { flex: 1; text-align: left; min-width: 0; }
.lp-hero-text .fq-logo { justify-content: flex-start; margin-bottom: 16px; gap: 14px; }
.lp-hero .fq-logo-pig { height: 92px; }
.lp-hero-visual { flex-shrink: 0; }
.lp-title { font-size: 44px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.08; margin-bottom: 16px; }
.lp-title .hl { color: var(--accent); }
.lp-sub { color: var(--muted); font-size: 17px; max-width: 480px; margin: 0 0 26px; line-height: 1.5; }
.lp-cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Badge de acreditación CMV */
.lp-cmv { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,184,0,.10); border: 1px solid rgba(255,184,0,.4); color: var(--ink); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.lp-cmv b { color: var(--accent); }
.lp-cmv-ic { display: inline-flex; }
.lp-cmv-ic svg { width: 18px; height: 18px; color: var(--accent); }

/* Mockup del teléfono con la app */
.lp-phone { width: 260px; border-radius: 34px; padding: 10px; background: #0a0f0c; border: 2px solid #ffffff18; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lp-phone-scr { border-radius: 26px; overflow: hidden; background: radial-gradient(600px 300px at 70% -10%, #163d2b, var(--bg) 60%); padding: 14px 12px 20px; }
.lp-ph-top { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.lp-ph-logo { height: 22px; width: auto; }
.lp-ph-lvl { font-weight: 800; color: var(--accent); }
.lp-ph-hs { margin-left: auto; }
.lp-ph-dots { display: flex; gap: 5px; margin: 10px 0 12px; }
.lp-ph-dots i { flex: 1; height: 5px; border-radius: 99px; background: #ffffff1f; }
.lp-ph-dots i.on { background: var(--accent2); }
.lp-ph-lesson { display: flex; flex-direction: column; gap: 12px; }
.lp-ph-maestro { display: flex; flex-direction: column; align-items: center; position: relative; }
.lp-ph-bubble { background: var(--panel2); border: 1px solid var(--accent2); color: var(--ink); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 4px; }
.lp-ph-pig { width: auto; height: 120px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,184,0,.35)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.lp-ph-clase { background: #ffffff08; border: 1px solid #ffffff14; border-radius: 14px; padding: 12px 13px; }
.lp-ph-clase-t { font-weight: 800; font-size: 14px; margin-bottom: 5px; }
.lp-ph-clase-d { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.lp-ph-next { margin-top: 14px; background: var(--accent2); color: #06231a; font-size: 12.5px; font-weight: 800; text-align: center; padding: 9px; border-radius: 12px; }
@media (max-width: 820px) {
  .lp-hero { flex-direction: column; text-align: center; gap: 26px; }
  .lp-hero-text { text-align: center; }
  .lp-hero-text .fq-logo { justify-content: center; }
  .lp-sub { margin-left: auto; margin-right: auto; }
  .lp-cta-row { align-items: center; }
  .lp-cmv { margin-left: auto; margin-right: auto; }
}
.lp-cta { font-size: 17px; padding: 16px 34px; }
.lp-cta-note { color: var(--muted); font-size: 13px; }
.lp-section { padding: 36px 16px; }
.lp-h2 { font-size: 28px; font-weight: 800; text-align: center; margin-bottom: 28px; letter-spacing: -.5px; }
/* Barra de números reales */
.lp-stats { display: flex; flex-wrap: wrap; gap: 12px; max-width: 740px; margin: 0 auto 26px; }
.lp-stat { flex: 1 1 130px; text-align: center; background: rgba(255,184,0,.08); border: 1px solid rgba(255,184,0,.30); border-radius: 16px; padding: 14px 8px; }
.lp-stat-n { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.lp-stat-l { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

.lp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.lp-feat { background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 22px; transition: border-color .15s ease, transform .12s ease; }
.lp-feat:hover { border-color: rgba(255,184,0,.4); transform: translateY(-3px); }
.lp-feat-ic { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,184,0,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.lp-feat-ic svg { width: 24px; height: 24px; color: var(--accent); }
.lp-feat-pig { width: 34px; height: 34px; object-fit: contain; }
.lp-feat-t { font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.lp-feat-d { color: var(--muted); font-size: 14px; line-height: 1.5; }
.lp-how { background: #ffffff08; border-radius: 24px; }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.lp-step { text-align: center; padding: 12px; }
.lp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--brand2)); color: #fff; font-weight: 900; font-size: 20px; margin-bottom: 12px; }
.lp-step b { display: block; font-size: 17px; margin-bottom: 6px; }
.lp-step p { color: var(--muted); font-size: 14px; line-height: 1.5; }
/* Confianza + nube de temas + camino */
.lp-trust { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; margin: 0 auto; }
.lp-chip { background: var(--panel); border: 1px solid #ffffff16; border-radius: 99px; padding: 8px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.lp-topics-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 16px; }
.lp-camino-sub { text-align: center; color: var(--muted); font-size: 15px; margin: -8px 0 22px; }
.lp-camino { display: flex; align-items: stretch; justify-content: center; gap: 12px; max-width: 860px; margin: 0 auto; }
.lp-nivel { flex: 1; max-width: 240px; background: var(--panel); border: 1px solid #ffffff14; border-radius: 18px; padding: 20px 16px; text-align: center; }
.lp-nivel-e { font-size: 30px; }
.lp-nivel-t { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-top: 6px; }
.lp-nivel-n { color: var(--accent); font-weight: 700; font-size: 13px; margin: 2px 0 8px; }
.lp-nivel-d { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.lp-camino-arrow { align-self: center; color: var(--accent); font-size: 22px; font-weight: 800; }
@media (max-width: 640px) {
  .lp-camino { flex-direction: column; align-items: center; }
  .lp-nivel { max-width: 340px; width: 100%; }
  .lp-camino-arrow { transform: rotate(90deg); }
}

/* Planes: Gratis vs Pro (2 columnas) */
.lp-plans { display: flex; gap: 18px; max-width: 720px; margin: 0 auto; align-items: stretch; }
.lp-plan { flex: 1; background: var(--panel); border: 1px solid #ffffff14; border-radius: 20px; padding: 26px 22px; display: flex; flex-direction: column; text-align: left; }
.lp-plan-pro { border: 2px solid var(--accent); position: relative; background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.lp-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #1a1a1a; font-weight: 800; font-size: 11px; padding: 4px 14px; border-radius: 99px; white-space: nowrap; letter-spacing: .3px; }
.lp-plan-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--accent); }
.lp-plan-amt { font-size: 40px; font-weight: 900; margin: 6px 0 2px; letter-spacing: -1.5px; }
.lp-plan-amt span { font-size: 17px; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.lp-plan-sub { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; }
.lp-plan-list { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.lp-plan-list li { position: relative; padding: 7px 0 7px 22px; font-size: 14px; color: var(--ink); line-height: 1.35; }
.lp-plan-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent2); font-weight: 900; }
.lp-plan-cta { width: 100%; }
.lp-plan-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 8px; }

/* FAQ (acordeón nativo) */
.lp-faq-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lp-faq-item { background: var(--panel); border: 1px solid #ffffff12; border-radius: 14px; padding: 0 16px; }
.lp-faq-item summary { list-style: none; cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::before { content: '+'; color: var(--accent); font-weight: 900; font-size: 18px; width: 16px; }
.lp-faq-item[open] summary::before { content: '−'; }
.lp-faq-item p { margin: 0 0 16px 26px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lp-final { padding: 24px 16px 72px; }
.lp-final-card { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 24px; background: linear-gradient(135deg, var(--panel2), var(--panel)); border: 1px solid #ffffff14; border-radius: 24px; padding: 30px 34px; box-shadow: var(--shadow); }
.lp-final-pig { width: 130px; height: auto; flex-shrink: 0; filter: drop-shadow(0 6px 16px #0006); }
.lp-final-txt { text-align: left; }
.lp-final-h { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.15; margin: 0 0 6px; }
.lp-final-sub { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.lp-final-txt .lp-cta { margin: 0; }
@media (max-width: 560px) { .lp-final-card { flex-direction: column; text-align: center; } .lp-final-txt { text-align: center; } .lp-final-pig { width: 110px; } }
@media (max-width: 700px) { .lp-plans { flex-direction: column; } }
@media (max-width: 600px) { .lp-title { font-size: 34px; } .lp-h2 { font-size: 23px; } }

/* Tabla de impuestos */
.imp-h { font-size: 15px; margin: 22px 0 10px; }
.imp-h small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; margin-top: 2px; }
.imp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-table th { text-align: left; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #ffffff1f; font-size: 12px; }
.imp-table td { padding: 9px 10px; border-bottom: 1px solid #ffffff10; }
.imp-table tr:hover td { background: #ffffff08; }
.imp-table .ta-c { text-align: center; font-weight: 700; }
.imp-table .ta-r { text-align: right; color: var(--muted); }

/* ============ Sendero (mapa de cursos) ============ */
.trail { position: relative; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding: 18px 0; }
.trail::before { content: ''; position: absolute; left: 50%; top: 38px; bottom: 38px; width: 4px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, #ffffff2b 0 11px, transparent 11px 22px); z-index: 0; }
.trail-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin: 24px 0; cursor: pointer; transition: transform .15s ease; }
.trail-node:hover { transform: translateY(-4px) scale(1.04); }
.sway-l { margin-right: 240px; }
.sway-r { margin-left: 240px; }
.node-ring { width: 120px; height: 120px; border-radius: 50%; padding: 7px; display: flex; background: conic-gradient(var(--accent2) calc(var(--p) * 1%), #ffffff20 0); }
.node-face { flex: 1; border-radius: 50%; background: var(--panel2); display: flex; align-items: center; justify-content: center; font-size: 34px; position: relative; border: 5px solid var(--bg); }
.trail-node.rec .node-ring { background: conic-gradient(var(--accent) calc(var(--p) * 1%), #ffffff20 0); }
.trail-node.rec .node-face { animation: nodePulse 2.2s ease-in-out infinite; }
@keyframes nodePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,197,66,.45); } 50% { box-shadow: 0 0 0 22px rgba(245,197,66,0); } }
.trail-node.done .node-face { border-color: var(--accent2); }
.node-flag { position: absolute; top: -2px; right: -2px; background: var(--accent); color: #1a1a1a; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; border: 4px solid var(--bg); }
.node-flag.done { background: var(--accent2); }
.node-label { margin-top: 13px; text-align: center; max-width: 260px; }
.node-name { font-weight: 700; font-size: 17px; line-height: 1.25; }
.node-meta { color: var(--muted); font-size: 14px; margin-top: 4px; }
@media (max-width: 680px) { .trail { max-width: 100%; } .sway-l { margin-right: 110px; } .sway-r { margin-left: 110px; } .node-ring { width: 100px; height: 100px; } }

/* Íconos SVG flat (cursos y herramientas) */
.node-face svg { width: 62px; height: 62px; color: var(--accent); }
.node-emoji { font-size: 50px; }
.trail-node.rec .node-face svg { color: var(--accent); }
.course-icon svg, .svg-ic svg { width: 40px; height: 40px; color: var(--accent); display: block; }
.svg-ic { display: inline-flex; }

/* Quiz — Omitir, puntaje +/−, estado vacío */
.fb-delta { font-weight: 800; margin: 0 4px; white-space: nowrap; }
.fb-delta.plus { color: var(--accent2); }
.fb-delta.minus { color: var(--danger); }
.quiz-skip { display: block; margin: 10px auto 0; color: var(--muted); font-weight: 700; }
.quiz-skip:hover { color: var(--ink); }
.bd-amt.neg { color: var(--danger); }
.quiz-empty-card { text-align: center; max-width: 470px; margin: 24px auto; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.quiz-empty-icon img { width: 92px; height: 92px; }
.quiz-empty-card h2 { margin: 12px 0 8px; }
.quiz-empty-card p { color: var(--muted); margin-bottom: 22px; line-height: 1.55; }

/* ============ Mi mundo (escenas con tus compras) ============ */
.world-scene { margin-bottom: 22px; }
.scene-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.scene-head h3 { font-size: 17px; }
.scene-count { color: var(--accent); font-weight: 800; font-size: 13px; }
.scene-stage { position: relative; min-height: 240px; border-radius: var(--radius); border: 1px solid #ffffff14; padding: 18px 20px; display: flex; align-items: flex-end; gap: 18px; overflow: hidden; background: linear-gradient(180deg, #1b3b2b 0%, #173021 60%, #0f2017 60%, #0c1812 100%); }
.scene-stage::after { content: ''; position: absolute; left: 0; right: 0; top: 60%; height: 2px; background: #00000040; }
.scene-garage .scene-stage { background: linear-gradient(180deg, #2b3034 0%, #22272b 58%, #16191c 58%, #101214 100%); }
.scene-lujo .scene-stage { background: linear-gradient(180deg, #2c2616 0%, #221d11 58%, #15110a 58%, #0e0b06 100%); }
.scene-avatar { flex: 0 0 auto; align-self: flex-end; transform: scale(.72); transform-origin: bottom center; margin: 0 -10px -6px; }
.scene-shelf { flex: 1; display: flex; flex-wrap: wrap; gap: 18px 14px; align-items: flex-end; align-content: flex-end; position: relative; z-index: 1; }
.scene-item { display: flex; flex-direction: column; align-items: center; width: 88px; transition: transform .15s; }
.scene-item:hover { transform: translateY(-4px); }
.scene-emoji { font-size: 48px; line-height: 1; filter: drop-shadow(0 8px 7px rgba(0,0,0,.45)); }
.scene-name { font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; line-height: 1.2; }
.scene-empty { color: var(--muted); font-size: 14px; align-self: center; padding: 24px 8px; max-width: 400px; line-height: 1.5; }
.world-shop { display: block; margin: 8px auto 0; }

/* Fondo ilustrado de cada escena de Mi mundo */
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.scene-avatar, .scene-shelf { position: relative; z-index: 1; }

/* Hub del Quiz (desafío diario + práctica) */
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.hub-card { display: flex; gap: 16px; align-items: center; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 22px; cursor: pointer; transition: .2s; }
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hub-daily { border-color: var(--accent); background: linear-gradient(180deg, #2a2614, var(--panel)); }
.hub-daily:hover { border-color: var(--accent); }
.hub-practice:hover { border-color: var(--purple); }
.hub-done { opacity: .65; cursor: default; }
.hub-done:hover { transform: none; box-shadow: none; }
.hub-ic { font-size: 40px; flex: 0 0 auto; }
.hub-title { font-weight: 800; font-size: 18px; font-family: var(--font-display); }
.hub-desc { color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.4; }
.hub-badge { background: var(--purple); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }

/* Vidas, congeladores y hub extra */
.hud-hearts { color: var(--danger); }
.hud-freeze { font-size: 12px; color: #7fd3ff; }
.hub-extra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; color: var(--muted); font-size: 14px; }
.hub-extra b { color: var(--ink); }
.hub-sep { opacity: .4; }
.hub-extra .btn-ghost.small { margin: 0; color: var(--accent); font-weight: 700; }
.hub-note { color: var(--muted); font-size: 12px; margin-top: 6px; }
.hearts-empty { font-size: 56px; margin-bottom: 6px; }
.quiz-empty-card .btn-ghost { display: block; margin: 10px auto 0; }

/* Liga / ranking */
.hub-league:hover { border-color: var(--accent); }
.league-screen { max-width: 640px; }
.lg-board { display: flex; flex-direction: column; gap: 6px; }
.lg-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid #ffffff10; border-left: 3px solid transparent; border-radius: 12px; padding: 12px 16px; }
.lg-rank { width: 28px; text-align: center; font-weight: 800; color: var(--muted); font-family: var(--font-display); }
.lg-name { flex: 1; font-weight: 600; }
.lg-xp { color: var(--accent); font-weight: 800; font-size: 14px; }
.lg-row.you { background: #1b3a2a; border-color: var(--accent); }
.lg-row.promote { border-left-color: var(--accent2); }
.lg-row.promote .lg-rank { color: var(--accent2); }
.lg-row.demote { border-left-color: var(--danger); }
.lg-row.demote .lg-rank { color: var(--danger); }

/* Examen del curso */
.exam-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(180deg,#2a2614,var(--panel)); border: 1px solid var(--accent); border-radius: var(--radius); padding: 20px; margin-top: 26px; flex-wrap: wrap; }
.exam-cta.passed { border-color: var(--accent2); background: linear-gradient(180deg,#16301f,var(--panel)); }
.exam-cta-txt b { font-size: 16px; display: block; margin-bottom: 4px; }
.exam-cta-txt span { color: var(--muted); font-size: 13px; }
.exam-badge { background: var(--accent2); color: #08130d; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-left: 6px; }
.exam-cta .btn-primary { flex: 0 0 auto; }

/* Mini-resumen / mapa de ruta al inicio de un curso */
.course-intro { background: linear-gradient(180deg,#182f22,var(--panel)); border: 1px solid #ffffff14; border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 18px 20px; margin: 4px 0 26px; }
.ci-lead { color: var(--ink); font-size: 15px; line-height: 1.55; margin: 0; }
.ci-road { margin-top: 14px; }
.course-intro .ci-lead + .ci-road { border-top: 1px solid #ffffff12; padding-top: 14px; }
.ci-road-t { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ci-road-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ci-road-list li { position: relative; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.ci-road-list li::before { content: '›'; position: absolute; left: 6px; top: -1px; color: var(--accent2); font-weight: 800; }

/* Panorama financiero + termómetro libertad */
.pat-neto { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: 12px; margin: 8px 0 14px; font-weight: 700; }
.pat-neto.pos { background: rgba(70,214,138,.12); color: var(--accent2); }
.pat-neto.neg { background: rgba(243,118,107,.12); color: var(--danger); }
.pat-neto b { font-size: 24px; font-family: var(--font-display); }
.lf-stage { font-size: 22px; font-weight: 800; font-family: var(--font-display); color: var(--accent); margin-bottom: 4px; }

/* ============ Mapa hoja de ruta (sin scroll) ============ */
.roadmap-screen { display: flex; flex-direction: column; }
.rm-head { margin-bottom: 12px; }
.rm-head .screen-title { font-size: 26px; margin-bottom: 2px; }
.rm-head .screen-sub { margin-bottom: 0; font-size: 13px; }
.rm-map { display: flex; flex-direction: column; gap: 10px; }
.rm-lane { background: #ffffff06; border: 1px solid #ffffff10; border-left: 3px solid #ffffff14; border-radius: 14px; padding: 9px 14px 12px; }
.rm-lane.rm-current { border-color: var(--accent); border-left-color: var(--accent); background: rgba(245,197,66,.05); }
.rm-lane-label { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--muted); margin-bottom: 8px; font-family: var(--font-display); }
.rm-lane.rm-current .rm-lane-label { color: var(--accent); }
.rm-lane-n { width: 20px; height: 20px; border-radius: 50%; background: #ffffff14; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink); }
.rm-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rm-node { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; width: 88px; gap: 5px; padding: 0; transition: transform .12s ease; }
.rm-node:hover { transform: translateY(-3px); }
.rm-ring { width: 58px; height: 58px; border-radius: 50%; padding: 4px; display: flex; background: conic-gradient(var(--accent2) calc(var(--p) * 1%), #ffffff1a 0); }
.rm-face { flex: 1; border-radius: 50%; background: var(--panel2); display: flex; align-items: center; justify-content: center; position: relative; border: 2px solid var(--bg); }
.rm-face svg { width: 30px; height: 30px; color: var(--accent); }
.rm-face .node-emoji { font-size: 26px; }
.rm-node.rec .rm-ring { background: conic-gradient(var(--accent) calc(var(--p) * 1%), #ffffff1a 0); }
.rm-node.done .rm-face { border-color: var(--accent2); }
.rm-flag { position: absolute; top: -3px; right: -3px; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #1a1a1a; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.rm-flag.done { background: var(--accent2); }
.rm-name { font-size: 10px; color: var(--ink); text-align: center; line-height: 1.15; max-height: 25px; overflow: hidden; }

/* Cursos Esenciales (clave): anillo dorado con glow + badge flotante */
.rm-node { position: relative; }
@media (max-width: 760px) { .rm-node { width: 70px; } .rm-ring { width: 50px; height: 50px; } }

/* Callout: herramienta recomendada en la lección */
.tool-hint-cta { display: inline-block; background: linear-gradient(180deg,#2a2614,var(--panel)); border: 1px solid var(--accent); color: var(--ink); border-radius: 12px; padding: 10px 16px; font-size: 14px; cursor: pointer; margin-bottom: 14px; font-family: var(--font); }
.tool-hint-cta b { color: var(--accent); }
.tool-hint-cta:hover { filter: brightness(1.1); }

/* Flechas de orden en el mapa */
.rm-arrow { align-self: flex-start; margin-top: 19px; color: var(--accent); font-weight: 800; font-size: 20px; opacity: .55; }
.rm-down { text-align: center; color: var(--accent); font-size: 20px; opacity: .45; line-height: 1; margin: 1px 0 -2px; }

/* Tarjeta de herramienta a nivel de curso */
.course-tool-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(180deg,#13302a,var(--panel)); border: 1px solid var(--purple); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; cursor: pointer; transition: .15s; }
.course-tool-cta:hover { transform: translateY(-2px); border-color: var(--accent); }
.course-tool-cta .ct-ic { font-size: 28px; }
.course-tool-cta .ct-tx b { display: block; font-size: 15px; color: var(--ink); }
.course-tool-cta .ct-tx span { color: var(--muted); font-size: 13px; }
.course-tool-cta .ct-tx span b { display: inline; color: var(--accent); }

/* Arma tu portafolio */
.po-desc { color: var(--ink); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.po-split { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.port-donut { width: 150px; height: 150px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.port-hole { width: 92px; height: 92px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 38px; }
.po-legend { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.po-leg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.po-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.po-leg-name { flex: 1; color: var(--ink); }
.po-leg-pct { font-weight: 800; color: var(--ink); width: 42px; text-align: right; }
.po-leg-amt { color: var(--muted); width: 90px; text-align: right; font-size: 12px; }
.po-platforms { display: flex; flex-direction: column; gap: 12px; }
.po-pcat b { font-size: 14px; }
.po-pcat p { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 3px; }
.po-pcat p b { color: var(--ink); }

/* Test de perfil de inversionista */
.rq-card { width: 600px; }
.rq-title { text-align: center; font-size: 26px; margin-bottom: 4px; line-height: 1.2; }
.rq-title .hl { color: var(--accent); }
.rq-q { margin: 14px 0; background: #ffffff05; border: 1px solid #ffffff0d; border-radius: 14px; padding: 15px 16px; }
.rq-q-text { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 11px; font-size: 15px; }
.rq-n { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; background: var(--accent); color: #1a1a1a; font-weight: 900; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.rq-opts { display: flex; flex-direction: column; gap: 9px; }
.rq-opt { position: relative; text-align: left; padding: 13px 16px 13px 46px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid #ffffff12; border-left: 3px solid #ffffff1f; color: var(--ink); border-radius: 12px; cursor: pointer; font-size: 14px; transition: .14s; }
.rq-opt::before { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ffffff3d; transition: .14s; }
.rq-opt:hover { border-left-color: var(--accent2); transform: translateX(2px); }
.rq-opt:hover::before { border-color: var(--accent2); }
.rq-opt.sel { border-color: var(--accent2); border-left-color: var(--accent2); background: linear-gradient(180deg, rgba(70,214,138,.20), rgba(70,214,138,.05)); color: var(--ink); font-weight: 700; }
.rq-opt.sel::before { background: var(--accent2); border-color: var(--accent2); box-shadow: inset 0 0 0 3px var(--panel); }
.rq-result { text-align: center; }
.rq-emo { font-size: 56px; }
.rq-note { color: var(--muted); font-size: 13px; background: #ffffff0d; border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
.po-test { font-size: 13px; margin: -6px 0 14px; color: var(--muted); }
.po-test a { color: var(--accent); cursor: pointer; font-weight: 700; }

/* Confeti de celebración */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-pc { position: absolute; top: -16px; width: 9px; height: 14px; opacity: .95; animation-name: confFall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes confFall { from { transform: translateY(-20px) rotate(0deg); } to { transform: translateY(106vh) rotate(900deg); } }

/* Badge PRO en nodos del mapa */
.rm-ring { position: relative; }
.rm-pro { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg,#ffd23f,#ff8a3f); color: #1a1a1a; font-size: 8px; font-weight: 900; padding: 1px 6px; border-radius: 6px; border: 1.5px solid var(--bg); letter-spacing: .3px; }
.rm-free { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); background: var(--accent2); color: #08130d; font-size: 8px; font-weight: 900; padding: 1px 6px; border-radius: 6px; border: 1.5px solid var(--bg); letter-spacing: .3px; }

/* ---------- Paywall curso PRO ---------- */
.paywall-screen { max-width: 560px; margin: 0 auto; padding: 16px; }
.paywall-card {
  margin-top: 18px; text-align: center;
  background: linear-gradient(160deg, rgba(245,197,66,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(245,197,66,.35); border-radius: 22px;
  padding: 30px 24px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.pw-lock { font-size: 46px; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 4px 12px rgba(245,197,66,.4)); }
.pw-title { font-family: var(--font-display); font-size: 1.45rem; margin: 4px 0 10px; }
.pw-sub { color: var(--muted, #9fb3aa); font-size: .98rem; line-height: 1.5; margin: 0 auto 16px; max-width: 420px; }
.pw-price { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--accent); margin: 6px 0 2px; }
.pw-price span { font-size: 1rem; color: var(--muted, #9fb3aa); font-weight: 600; }
.pw-price-sub { color: var(--muted, #9fb3aa); font-size: 13px; margin-bottom: 14px; }
.pw-list { display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 360px; margin: 0 auto 20px; }
.pw-list span { font-size: .95rem; color: #d7e7df; }
.pw-cta { width: 100%; max-width: 360px; font-size: 1.05rem; }
.pw-note { font-size: .8rem; color: var(--muted, #8aa49a); margin-top: 12px; opacity: .8; }

/* Nodo de curso bloqueado en el mapa */
.rm-node.locked .rm-ring { filter: grayscale(.7) brightness(.7); opacity: .78; }
.rm-flag.lock { background: rgba(0,0,0,.55); }

/* ---------- Grupos de herramientas ---------- */
/* ---------- Herramientas: acordeón por categoría ---------- */
.tool-acc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tool-acc {
  background: var(--panel); border: 1px solid rgba(255,255,255,.07);
  border-left: 4px solid var(--tg); border-radius: 16px; overflow: hidden;
  transition: border-color .2s ease;
}
.tool-acc.open { border-color: var(--tgbd); border-left-color: var(--tg); }
.tool-acc-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: none; border: none; cursor: pointer;
  color: var(--ink); text-align: left; font: inherit;
}
.tool-acc-head:hover { background: var(--tgbg); }
.tac-chev { color: var(--tg); font-size: .8rem; transition: transform .25s ease; width: 12px; }
.tool-acc.open .tac-chev { transform: rotate(90deg); }
.tac-head-ic {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--tgbg); font-size: 1rem;
}
.tac-head-title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--tg); }
.tac-head-count {
  margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--tg);
  background: var(--tgbg); border-radius: 999px; padding: 2px 11px;
}
.tool-acc-body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.tool-acc.open .tool-acc-body { max-height: 720px; }
.tac-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px; padding: 4px 18px 18px;
}
.tac-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  background: var(--tgbg); border: 1px solid var(--tgbd); border-radius: 12px;
  cursor: pointer; text-decoration: none; color: var(--ink);
  transition: transform .12s ease, background .15s ease;
}
.tac-item:hover { transform: translateY(-2px); background: var(--panel2); }
.tac-item-ic { font-size: 21px; flex-shrink: 0; color: var(--tg); line-height: 1; }
.tac-item-ic .svg-ic { width: 21px; height: 21px; }
.tac-item-ic .svg-ic svg { stroke: var(--tg); }
.tac-item-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.tac-item-desc { font-size: 11.5px; color: var(--muted, #9fb3aa); line-height: 1.3; margin-top: 2px; }
.tac-item-desc b { color: var(--accent); font-weight: 700; }

/* Herramienta bloqueada: se ve apagada, con candado */
.tac-item.tool-locked { opacity: .62; border-style: dashed; }
.tac-item.tool-locked:hover { transform: none; background: var(--tgbg); opacity: .8; }
.tac-item.tool-locked .tac-item-ic { font-size: 18px; }

/* Pantalla de herramienta bloqueada */
.tool-lock { text-align: center; padding: 8px 4px 4px; }
.tool-lock-ic { font-size: 44px; margin-bottom: 10px; }
.tool-lock-lead { font-size: 16px; color: var(--ink); line-height: 1.5; margin: 0 auto 8px; max-width: 460px; }
.tool-lock-lead b { color: var(--accent); }
.tool-lock-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 auto 20px; max-width: 460px; }
.tool-lock .btn-primary { display: inline-block; }

/* CTA de herramienta bloqueada en la pantalla del curso */
.course-tool-cta.locked { cursor: default; border-color: #ffffff1f; border-style: dashed; background: linear-gradient(180deg,#1a2620,var(--panel)); opacity: .85; }
.course-tool-cta.locked:hover { transform: none; border-color: #ffffff1f; }
.course-tool-cta.locked .ct-tx span b { color: var(--muted); }

/* Pestaña Mercado: datos reales */
.mkt-lead { background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 22px; }
.mkt-lead p { margin: 0; font-size: 14px; line-height: 1.5; }
.mkt-lead-note { color: var(--muted); font-size: 13px !important; margin-top: 6px !important; }
.mkt-up-txt { color: var(--accent2); font-weight: 700; }
.mkt-down-txt { color: #ff6b6b; font-weight: 700; }
.mkt-sec { font-size: 17px; margin: 22px 0 12px; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mkt-tile { background: var(--panel); border: 1px solid #ffffff14; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.mkt-tile.mkt-off { opacity: .55; }
.mkt-head { display: flex; align-items: center; gap: 10px; }
.mkt-ic { font-size: 22px; line-height: 1; }
.mkt-name { font-weight: 800; font-size: 15px; }
.mkt-sub { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.mkt-price { font-size: 21px; font-weight: 800; margin-top: 2px; }
.mkt-chg { font-size: 13px; font-weight: 700; }
.mkt-chg.up { color: var(--accent2); }
.mkt-chg.down { color: #ff6b6b; }
.mkt-spark { width: 100%; height: 30px; margin-top: 2px; opacity: .9; }
.mkt-na { color: var(--muted); font-size: 13px; padding: 8px 0; }
.mkt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.mkt-loading { color: var(--muted); padding: 30px 0; font-size: 15px; }
.mkt-updating { display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 12.5px; font-weight: 700; color: #ff6b6b; background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.3); border-radius: 999px; padding: 3px 10px; animation: mktPulse 1.1s ease-in-out infinite; }
@keyframes mktPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* Estado de las bolsas (abierto/cerrado) */
.mkt-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; background: var(--panel); border: 1px solid #ffffff14; border-radius: var(--radius); padding: 13px 18px; margin-bottom: 22px; }
.mkt-st-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.mkt-st-name { font-weight: 700; }
.mkt-badge { font-size: 12.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.mkt-badge.open { background: rgba(70,214,138,.15); color: var(--accent2); }
.mkt-badge.closed { background: rgba(255,107,107,.15); color: #ff6b6b; }
.mkt-st-when { font-size: 12px; color: var(--muted); }
.mkt-st-note { flex-basis: 100%; font-size: 11.5px; color: var(--muted); border-top: 1px solid #ffffff10; padding-top: 8px; margin-top: 2px; }

/* Color por categoría */
.tg-dia       { --tg: #6cb6d8; --tgbg: rgba(108,182,216,.09); --tgbd: rgba(108,182,216,.28); }
.tg-ahorro    { --tg: #5fd0a0; --tgbg: rgba(95,208,160,.09);  --tgbd: rgba(95,208,160,.28); }
.tg-deudas    { --tg: #e0b15e; --tgbg: rgba(224,177,94,.09);  --tgbd: rgba(224,177,94,.28); }
.tg-inversion { --tg: #b08be0; --tgbg: rgba(176,139,224,.09); --tgbd: rgba(176,139,224,.28); }
.tg-tramites  { --tg: #4fd6c4; --tgbg: rgba(79,214,196,.09);  --tgbd: rgba(79,214,196,.28); }

/* ---------- Tutorial guiado (coach marks) ---------- */
#tour-root { position: fixed; inset: 0; z-index: 9998; }
.tour-block { position: fixed; inset: 0; z-index: 9998; pointer-events: auto; }
.tour-dim   { position: fixed; inset: 0; z-index: 9999; background: rgba(6,12,9,.74); pointer-events: none; display: none; }
.tour-spot  {
  position: fixed; z-index: 9999; display: none; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(6,12,9,.74), 0 0 18px rgba(245,197,66,.45);
  transition: all .22s ease;
}
.tour-card {
  position: fixed; z-index: 10000; width: 290px; max-width: calc(100vw - 24px);
  background: var(--panel, #14271d); border: 1px solid rgba(245,197,66,.4);
  border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
  transition: left .2s ease, top .2s ease;
}
.tour-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; margin-bottom: 5px; }
.tour-text  { color: #d7e7df; font-size: .92rem; line-height: 1.45; }
.tour-foot  { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-skip  { background: none; border: none; color: var(--muted, #9fb3aa); font-size: .85rem; cursor: pointer; padding: 6px 4px; }
.tour-skip:hover { color: #d7e7df; }
.tour-next  { padding: 8px 16px; font-size: .9rem; border-radius: 10px; }
.tour-dots  { display: flex; gap: 6px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.tour-dots i.on { background: var(--accent); width: 16px; border-radius: 3px; }

/* ---------- Cruz para cerrar los mensajes de Platón ---------- */
#maestro-toast { position: fixed; } /* asegura posicionamiento para la cruz */
.maestro-close, .mc-close {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--muted, #9fb3aa);
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
  display: grid; place-items: center; transition: .15s;
}
.maestro-close:hover, .mc-close:hover { background: rgba(255,255,255,.18); color: #fff; }
#maestro-toast { padding-right: 30px; }
.mc-bubble { position: relative; padding-right: 30px; pointer-events: auto; }

/* ---------- Panel de desarrollo (solo ?dev) ---------- */
#dev-tools {
  position: fixed; left: 14px; bottom: 96px; z-index: 70;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: rgba(12,23,18,.92); border: 1px dashed rgba(245,197,66,.5);
  border-radius: 12px; padding: 9px 10px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.dev-tools-tag { font-size: 9px; font-weight: 800; letter-spacing: .12em; color: var(--accent); opacity: .8; }
#dev-tools button {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #d7e7df; border-radius: 8px; padding: 6px 10px; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: .15s; white-space: nowrap; width: 100%;
  text-align: left;
}
#dev-tools button:hover { background: rgba(245,197,66,.16); border-color: var(--accent); }

/* ---------- Catálogo de cursos por nivel de conocimiento ---------- */
.rm-levels { display: flex; flex-direction: column; gap: 16px; }
.lvl-block {
  background: var(--lvbg, #ffffff06); border: 1px solid #ffffff10;
  border-left: 3px solid var(--lv, #ffffff20); border-radius: 14px; overflow: hidden;
}
/* Encabezado del nivel (colapsable) */
.lvl-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: none; border: none; cursor: pointer; color: var(--ink); text-align: left; font: inherit;
}
.lvl-head:hover { background: #ffffff08; }
.lvl-chev { color: var(--lv, var(--accent)); font-size: .8rem; width: 12px; transition: transform .25s ease; }
.lvl-block.open .lvl-chev { transform: rotate(90deg); }
.lvl-badge { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--lv, var(--accent)); }
.lvl-count { font-size: 12px; color: var(--muted); }
.lvl-pct { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--lv, var(--accent)); background: var(--lvbg); border-radius: 999px; padding: 3px 11px; }
.lvl-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.lvl-block.open .lvl-body { max-height: 1600px; }
.lvl-sub { font-size: 12.5px; color: var(--muted); padding: 0 16px 10px; }
/* Grilla de nodos (layout original, limpio y compacto) */
.lvl-grid { display: flex; gap: 14px; flex-wrap: wrap; padding: 4px 16px 16px; }
.lvl-grid .rm-node { width: 96px; }

/* Banner "Continúa donde quedaste" */
.rm-continue {
  width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--accent);
  border-radius: 16px; padding: 12px 16px; cursor: pointer; color: var(--ink); text-align: left;
  box-shadow: 0 0 0 3px rgba(255,184,0,.07);
}
.rm-continue:hover { transform: translateY(-2px); transition: transform .12s ease; }
.rmc-ring { width: 52px; height: 52px; flex-shrink: 0; }
.rmc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rmc-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); font-weight: 800; }
.rmc-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmc-bar { height: 5px; background: #ffffff1a; border-radius: 99px; overflow: hidden; margin-top: 2px; }
.rmc-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.rmc-cta { flex-shrink: 0; background: var(--accent); color: #1a1a1a; font-size: 12.5px; font-weight: 800; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }

/* Ruta recomendada (según la meta) */
.rm-route { margin-bottom: 16px; background: #ffffff06; border: 1px solid #ffffff10; border-radius: 14px; padding: 12px 4px 8px 14px; }
.rm-route-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 12px; }
.rm-route-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.rm-route-goal { font-size: 12px; color: var(--muted); }
.rm-route-change { margin-left: auto; background: none; border: 1px solid var(--accent); color: var(--accent); font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.rm-route-row { display: flex; gap: 22px; overflow-x: auto; padding: 6px 12px 10px 0; scrollbar-width: thin; }
/* Indicador sutil de "hay más → desliza": degradado + flecha dorada que late; se ocultan al llegar al final */
.rm-route-scroll { position: relative; }
/* Degradados sutiles a ambos lados que insinúan que hay más contenido */
.rm-route-scroll::before, .rm-route-scroll::after { content: ''; position: absolute; top: 0; bottom: 10px; width: 56px; pointer-events: none; z-index: 1; transition: opacity .25s ease; }
.rm-route-scroll::before { left: 0; border-radius: 14px 0 0 14px; background: linear-gradient(270deg, rgba(31,59,41,0), rgba(31,59,41,.92)); }
.rm-route-scroll::after  { right: 0; border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgba(31,59,41,0), rgba(31,59,41,.92)); }
/* Flechas clickeables para moverse (útil sin trackpad) */
.rm-route-arrow { position: absolute; top: 50px; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #1a2b1f; background: var(--accent); color: #1a2b1f; font-size: 30px; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 5px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.55); transition: background .15s ease, transform .12s ease, opacity .25s ease; }
.rm-route-arrow:hover { background: #ffd766; transform: translateY(-50%) scale(1.12); }
.rm-route-arrow.left { left: 2px; }
.rm-route-arrow.right { right: 4px; }
@media (max-width: 760px) { .rm-route-arrow { top: 40px; width: 40px; height: 40px; font-size: 27px; } }
.rm-route-scroll.at-start::before, .rm-route-scroll.at-start .rm-route-arrow.left { opacity: 0; pointer-events: none; }
.rm-route-scroll.at-end::after, .rm-route-scroll.at-end .rm-route-arrow.right { opacity: 0; pointer-events: none; }
.rm-route-scroll.no-overflow .rm-route-arrow, .rm-route-scroll.no-overflow::before, .rm-route-scroll.no-overflow::after { opacity: 0; pointer-events: none; }
/* En la ruta protagonista los nodos son más grandes (hay espacio de sobra a la derecha) */
.rm-route-row .rm-node { width: 132px; flex-shrink: 0; gap: 10px; }
.rm-route-row .rm-ring { width: 86px; height: 86px; }
.rm-route-row .rm-face svg { width: 44px; height: 44px; }
.rm-route-row .rm-face .node-emoji { font-size: 40px; }
.rm-route-row .rm-name { font-size: 14px; max-height: none; line-height: 1.2; font-weight: 600; }
.rm-route-row .rm-flag { width: 24px; height: 24px; font-size: 13px; }
.rm-route-row .rm-order { width: 26px; height: 26px; font-size: 13px; }
.rm-route-row .rm-free { font-size: 9.5px; padding: 2px 8px; }

/* Ruta protagonista (hero) + elegir objetivo + explorar todo */
.rm-route.hero { background: linear-gradient(160deg,#22412f 0%,#1a3222 55%,#1f3b29 100%); border: 1px solid #ffffff1f; border-left: 3px solid var(--accent); padding: 16px 4px 10px 16px; }
.rm-route.hero .rm-route-title { font-size: 18px; }
.rm-route-sub { color: var(--muted); font-size: 13px; margin: 0 12px 12px 0; line-height: 1.45; }
.rm-goalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-right: 12px; }
.rm-goalpick { display: flex; align-items: center; gap: 11px; text-align: left; background: var(--panel2); border: 1px solid #ffffff14; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: .15s; }
.rm-goalpick:hover { transform: translateY(-2px); border-color: var(--accent); }
.rm-goalpick-ic { font-size: 24px; flex-shrink: 0; }
.rm-goalpick-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rm-goalpick-tx b { font-size: 14px; }
.rm-goalpick-tx span { font-size: 11.5px; color: var(--muted); }

.rm-explore { margin-top: 20px; }
.rm-explore-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: #ffffff08; border: 1px solid #ffffff14; border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--ink); font-weight: 700; font-size: 15px; }
.rm-explore-toggle:hover { background: #ffffff10; }
.rm-explore-lbl { flex: 1; text-align: left; }
.rm-explore-n { background: var(--accent); color: #1a1a1a; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.rm-explore-chev { transition: transform .2s; color: var(--muted); }
.rm-explore-toggle.open .rm-explore-chev { transform: rotate(90deg); }
.rm-explore-body { margin-top: 14px; }
.rm-view-toggle { display: inline-flex; gap: 4px; background: #ffffff08; border: 1px solid #ffffff14; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.rm-view-btn { background: none; border: none; color: var(--muted); font-weight: 700; font-size: 13px; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: .15s; }
.rm-view-btn.active { background: var(--accent); color: #1a1a1a; }
.rm-levels[hidden] { display: none; }  /* gana al display:flex de .rm-levels */

/* Lección bloqueada (freemium) */
.lesson-node.locked { opacity: .7; }
.lesson-node.locked .lesson-num { background: #ffffff14; }
@media (max-width: 520px) { .rm-goalgrid { grid-template-columns: 1fr; } }

/* Picker de meta (onboarding y "cambiar") */
.gp-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.gp-goals { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.gp-goal { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; background: var(--panel2); border: 1px solid #ffffff12; border-radius: 16px; cursor: pointer; color: var(--ink); text-align: left; transition: border-color .15s ease, transform .12s ease; }
.gp-goal:hover { border-color: var(--accent); transform: translateY(-2px); }
.gp-goal-ic { font-size: 28px; flex-shrink: 0; }
.gp-goal-body { flex: 1; display: flex; flex-direction: column; }
.gp-goal-label { font-size: 16px; font-weight: 700; }
.gp-goal-sub { font-size: 12.5px; color: var(--muted); }
.gp-goal-arrow { color: var(--accent); font-weight: 800; }
.lvl-grid .rm-node { width: 96px; }
.lvl-grid .rm-name { max-height: 38px; font-size: 10.5px; }

/* Color suave por nivel */
.lvl-basico   { --lv: #5fd0a0; --lvbg: rgba(95,208,160,.06); }
.lvl-medio    { --lv: #6cb6d8; --lvbg: rgba(108,182,216,.06); }
.lvl-avanzado { --lv: #b08be0; --lvbg: rgba(176,139,224,.06); }
/* Colores de los mundos temáticos (misma paleta que la ruleta del Quiz) */
.tema-dia        { --lv: #46d68a; --lvbg: rgba(70,214,138,.07); }
.tema-deudas     { --lv: #6cb6d8; --lvbg: rgba(108,182,216,.07); }
.tema-invertir   { --lv: #b08be0; --lvbg: rgba(176,139,224,.07); }
.tema-trabajo    { --lv: #f5c542; --lvbg: rgba(245,197,66,.07); }
.tema-patrimonio { --lv: #ff8a3f; --lvbg: rgba(255,138,63,.07); }
.tema-proteccion { --lv: #ff6b6b; --lvbg: rgba(255,107,107,.07); }
.tema-nuevo      { --lv: #35c9dc; --lvbg: rgba(53,201,220,.07); }
.tema-mundo      { --lv: #4f8fe8; --lvbg: rgba(79,143,232,.07); }
.lvl-extras      { --lv: #9aa7b0; --lvbg: rgba(154,167,176,.08); }
.rm-extras { margin-top: 18px; }
.lvl-basico   .rm-ring { background: conic-gradient(#5fd0a0 calc(var(--p) * 1%), #ffffff1a 0); }
.lvl-medio    .rm-ring { background: conic-gradient(#6cb6d8 calc(var(--p) * 1%), #ffffff1a 0); }
.lvl-avanzado .rm-ring { background: conic-gradient(#b08be0 calc(var(--p) * 1%), #ffffff1a 0); }

/* ---------- Orden sugerido (numerito) y "empieza aquí" ---------- */
.rm-order {
  position: absolute; top: -4px; left: -4px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(20,30,24,.95); border: 1.5px solid #ffffff2e;
  color: var(--muted, #9fb3aa); font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.rm-node.rec { position: relative; }
.rm-node.rec .rm-face { border-color: var(--accent); box-shadow: 0 0 12px rgba(245,197,66,.4); }
.rm-node.rec .rm-order { border-color: var(--accent); color: var(--accent); }
.rm-next-tag {
  display: inline-block; margin-top: 3px;
  background: var(--accent); color: #1a1a1a; font-size: 8.5px; font-weight: 900;
  padding: 1px 7px; border-radius: 7px; letter-spacing: .2px; white-space: nowrap;
}

/* ---------- Acceso a Mi mundo desde el perfil ---------- */
.profile-actions { margin: 18px 0 10px; }
.profile-actions .btn-primary { width: 100%; max-width: 320px; }

/* ---------- Gráfico dentro de una lección ---------- */
.slide-chart {
  margin: 6px auto 12px; max-width: 380px;
  background: rgba(255,255,255,.03); border: 1px solid #ffffff14;
  border-radius: 12px; padding: 8px;
}
.slide-chart svg { width: 100%; height: auto; display: block; }

/* ---------- Simulador de inversión (rediseño) ---------- */
.sim-banner { display:flex; gap:12px; align-items:center; background:linear-gradient(160deg, rgba(70,214,138,.12), rgba(255,255,255,.03)); border:1px solid rgba(70,214,138,.3); border-radius:16px; padding:13px 15px; margin-bottom:12px; }

/* ---- Test de Bienestar Financiero ---- */
.wb-prev { color: var(--muted); font-size: 12.5px; }
.wb-q { background: #ffffff06; border: 1px solid #ffffff12; border-radius: 14px; padding: 13px 15px; margin-bottom: 10px; transition: border-color .2s ease; }
.wb-q.done { border-color: rgba(70,214,138,.35); }
.wb-qt { font-weight: 700; font-size: 14.5px; margin-bottom: 9px; }
.wb-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-opt { flex: 1; min-width: 86px; padding: 8px 6px; border-radius: 10px; border: 1px solid #ffffff1c; background: #ffffff08; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s ease; }
.wb-opt:hover { background: #ffffff12; color: var(--ink); }
.wb-opt.on { background: rgba(70,214,138,.16); border-color: var(--accent2); color: var(--accent2); }
.wb-progress { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0; }
.wb-bar { position: relative; height: 12px; border-radius: 999px; margin: 14px 0 6px; background: linear-gradient(90deg, #ff6b6b 0 26%, #ff8a3f 26% 51%, #f5c542 51% 76%, #46d68a 76% 100%); opacity: .9; }
.wb-fill { display: none; }
.wb-mark { position: absolute; top: -4px; width: 4px; height: 20px; border-radius: 3px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.6); transform: translateX(-50%); }
.wb-bar-leg { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-bottom: 10px; }
.wb-rec-head { font-size: 15px; margin: 16px 0 10px; }
.wb-rec { background: #ffffff07; border: 1px solid #ffffff14; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.wb-rec-t { margin-bottom: 9px; font-size: 14px; }
.wb-rec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-rec-actions .btn-primary, .wb-rec-actions .btn-secondary { font-size: 12.5px; padding: 8px 14px; }
.wb-foot { margin-top: 14px; }

/* ---- Inversión: pestañas de modo (Simulador / Cartera real) ---- */
.inv-mode { display:flex; gap:8px; margin-bottom:14px; }
.inv-mode-btn { flex:1; padding:10px 12px; border-radius:12px; border:1px solid #ffffff1f; background:#ffffff08; color:var(--muted); font-weight:700; font-size:14px; cursor:pointer; transition:all .15s ease; }
.inv-mode-btn.on { background:rgba(245,197,66,.14); border-color:var(--accent); color:var(--accent); }
.inv-mode-btn:hover:not(.on) { background:#ffffff12; color:var(--ink); }

/* ---- Cartera real ---- */
.ra-hora { margin-left:10px; font-size:12px; color:var(--muted); font-weight:500; }
.ra-refresh { background:none; border:none; cursor:pointer; font-size:14px; padding:0 2px; }
.ra-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-bottom:6px; }
.ra-asset { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:11px 12px; border-radius:14px; border:1px solid #ffffff17; background:#ffffff07; cursor:pointer; text-align:left; transition:all .13s ease; }
.ra-asset:hover { background:#ffffff10; transform:translateY(-1px); }
.ra-asset.selected { border-color:var(--accent); background:rgba(245,197,66,.1); box-shadow:0 0 10px rgba(245,197,66,.25); }
.ra-asset .ra-ic { font-size:20px; }
.ra-asset .ra-name { font-weight:700; font-size:13.5px; color:var(--ink); }
.ra-asset .ra-price { font-size:13px; color:var(--muted); font-weight:600; }
.ra-asset .mkt-chg { font-size:11px; }
.ra-selinfo { color:var(--muted); font-size:13px; margin:0 0 10px; }
.ra-holds { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.ra-hold { background:#ffffff07; border:1px solid #ffffff14; border-radius:14px; padding:12px 14px; }
.ra-hold-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ra-hold-head .ra-ic { font-size:18px; }
.ra-qty { margin-left:auto; font-size:12px; color:var(--muted); }
.ra-hold-rows { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); margin-bottom:9px; }
.ra-hold-rows .pos { color:var(--accent2); font-weight:700; }
.ra-hold-rows .neg { color:var(--danger); font-weight:700; }
.ra-hold-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ra-hold-actions .btn-secondary { font-size:12px; padding:6px 12px; }
.ra-conc { background:rgba(255,138,63,.1); border:1px solid rgba(255,138,63,.35); color:#ffb98a; border-radius:12px; padding:10px 13px; font-size:13px; margin-bottom:12px; }
.ra-real { font-size:11.5px; color:var(--muted); align-self:center; }
.rp-mix { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.rp-chip { font-size:10.5px; background:#ffffff0d; border:1px solid #ffffff14; border-radius:999px; padding:2px 7px; color:var(--muted); }
.rp-rec { font-size:10px; background:rgba(245,197,66,.16); color:var(--accent); border-radius:999px; padding:2px 7px; font-weight:800; vertical-align:middle; }
.ra-note { color:var(--muted); font-size:12px; margin-top:14px; line-height:1.5; }
@media (max-width: 520px) { .ra-grid { grid-template-columns:repeat(2, 1fr); } }
.sim-banner-ic { font-size:30px; flex-shrink:0; }
.sim-banner-title { font-family:var(--font-display); font-weight:800; font-size:16px; }
.sim-banner-sub { font-size:12.5px; color:var(--muted); line-height:1.45; }
.invest-news { background:rgba(245,197,66,.1); border:1px solid rgba(245,197,66,.3); border-radius:12px; padding:9px 13px; font-size:13px; margin-bottom:12px; }
.sim-timebar { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#ffffff06; border:1px solid #ffffff12; border-radius:12px; padding:9px 13px; margin-bottom:14px; flex-wrap:wrap; }
.sim-day { font-size:13px; color:#d7e7df; }
.sim-adv { padding:9px 16px; font-size:14px; }
.invest-subhead { font-family:var(--font-display); font-size:14px; margin:16px 0 9px; color:var(--accent); }
.it-meter { display:flex; align-items:center; gap:7px; justify-content:center; margin:4px 0; }
.risk-meter { display:inline-flex; gap:3px; }
.rm-bar { width:14px; height:6px; border-radius:3px; background:#ffffff1f; }
.rm-bar.on.lvl-1 { background:#5fd0a0; }
.rm-bar.on.lvl-2 { background:#e0b15e; }
.rm-bar.on.lvl-3 { background:#ff6b6b; }
.it-vida { font-size:11.5px; color:var(--muted); }
.it-vibe { font-size:12px; margin-top:3px; }
.quick-amts { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px; }
.quick-amt { background:#ffffff0c; border:1px solid #ffffff1f; color:#d7e7df; border-radius:9px; padding:6px 13px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.quick-amt:hover { background:rgba(70,214,138,.16); border-color:var(--accent2); }
.invest-empty { text-align:center; padding:24px 16px; background:#ffffff05; border:1px dashed #ffffff1f; border-radius:14px; }
.ie-emoji { font-size:38px; margin-bottom:8px; }
.invest-empty p { color:var(--muted); font-size:13.5px; line-height:1.5; }

/* Aclaración del botón Avanzar 1 día */
.sim-hint { font-size:12.5px; color:var(--muted); line-height:1.5; margin:-4px 0 14px; background:#ffffff05; border-left:3px solid var(--accent2); border-radius:0 8px 8px 0; padding:8px 12px; }

/* Parpadeo al actualizar el valor en vivo */
@keyframes valflash { 0% { color: var(--accent); transform: scale(1.06); } 100% { color: inherit; transform: scale(1); } }
.inv-now.flash, .isum-val.flash { animation: valflash .5s ease; }

/* ---------- Tooltip de información (ℹ️) ---------- */
.info-tip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:7px; border-radius:50%; background:rgba(255,255,255,.14); color:var(--muted,#9fb3aa); font-size:11px; font-weight:700; cursor:help; vertical-align:middle; font-family:sans-serif; }
.info-tip:hover, .info-tip:focus { background:rgba(245,197,66,.25); color:var(--accent); outline:none; }
.info-bubble { display:none; position:absolute; top:135%; left:0; width:270px; max-width:78vw; background:var(--panel,#14271d); border:1px solid rgba(245,197,66,.4); border-radius:12px; padding:10px 13px; font-size:12px; font-weight:400; color:#d7e7df; line-height:1.5; box-shadow:0 14px 34px rgba(0,0,0,.55); z-index:60; text-align:left; }
.info-tip:hover .info-bubble, .info-tip:focus .info-bubble { display:block; }

/* Encabezado de "Mis inversiones" con el botón Actualizar al lado */
.invest-listhead { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:6px; }
.invest-listhead .invest-subhead { margin:10px 0 8px; }
.mini-refresh { padding:6px 13px; font-size:12.5px; }

/* Tooltip alineado a la derecha del ícono (para títulos cerca del borde) */
.info-tip.tip-right .info-bubble { left: auto; right: 0; }

/* ---------- Estados bloqueados PRO (quiz y tienda) ---------- */
.hub-card.hub-locked { opacity: .82; border-color: rgba(245,197,66,.35); cursor: pointer; }
.hub-card.hub-locked .hub-ic { filter: grayscale(.3); }
.buy-btn.pro-locked { background: linear-gradient(90deg,#ffd23f,#ff8a3f); color:#1a1a1a; border:none; font-weight:800; }

/* La tarjeta de tipo de inversión no debe recortar el tooltip */
.invest-type { overflow: visible; }
.invest-type .info-tip { vertical-align: middle; }

/* ---------- Mapa de cursos: niveles más grandes y mejor separados ---------- */
.rm-levels { gap: 14px; }
.lvl-block { border-left-width: 5px; border-radius: 16px; padding: 12px 16px 15px; box-shadow: 0 5px 16px rgba(0,0,0,.15); }
.lvl-basico   { --lvbg: rgba(95,208,160,.09); }
.lvl-medio    { --lvbg: rgba(108,182,216,.09); }
.lvl-avanzado { --lvbg: rgba(176,139,224,.09); }
.lvl-label { align-items: center; margin-bottom: 11px; gap: 11px; }
.lvl-badge { display: inline-block; background: var(--lv); color: #0c1712; padding: 4px 14px; border-radius: 999px; font-size: 15px; font-weight: 800; }
.lvl-sub { font-size: 13px; }
.lvl-grid { gap: 13px 16px; }
.lvl-grid .rm-node { width: 106px; }
.lvl-grid .rm-ring { width: 67px; height: 67px; }
.lvl-grid .rm-face svg { width: 35px; height: 35px; }
.lvl-grid .rm-face .node-emoji { font-size: 31px; }
.lvl-grid .rm-name { font-size: 12px; max-height: 46px; line-height: 1.22; }
.lvl-grid .rm-order { width: 21px; height: 21px; font-size: 10.5px; }

/* ---------- Tarjeta de tipo de inversión: todo centrado y ordenado ---------- */
.invest-type { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 18px 14px; }
.invest-type .it-icon { font-size: 36px; margin: 0; }
.invest-type .it-label { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; }
.invest-type .it-meter { justify-content: center; margin: 0; }
.invest-type .it-risk { margin: 0; }

/* ---------- Quiz: nuevo formato (chips + mosaicos por modo) ---------- */
.quiz-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 18px; }
.qstat { background: #ffffff08; border: 1px solid #ffffff14; border-radius: 11px; padding: 8px 13px; font-size: 13px; color: #d7e7df; display: inline-flex; align-items: center; gap: 6px; }
.qstat small { color: var(--muted); font-size: 11px; }
.qstat-buy { background: rgba(245,197,66,.16); border: 1px solid rgba(245,197,66,.4); color: var(--accent); border-radius: 8px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; margin-left: 4px; }
.qstat-buy:hover { background: rgba(245,197,66,.28); }

.quiz-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quiz-mode { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 26px 16px 22px; border-radius: 18px; background: var(--qmbg); border: 1px solid var(--qmbd); cursor: pointer; color: var(--ink); transition: .18s; position: relative; }
.quiz-mode:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.qm-emoji { font-size: 46px; line-height: 1; }
.qm-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.qm-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; max-width: 220px; }
.qm-badge, .qm-tag { font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-top: 2px; }
.qm-badge { background: var(--accent); color: #1a1a1a; }
.qm-tag { background: rgba(70,214,138,.18); color: var(--accent2); }
.qm-practice { --qmbg: rgba(70,214,138,.10); --qmbd: rgba(70,214,138,.38); }
.qm-daily    { --qmbg: rgba(245,197,66,.10); --qmbd: rgba(245,197,66,.32); }
.qm-league   { --qmbg: rgba(176,139,224,.10); --qmbd: rgba(176,139,224,.32); }
.quiz-mode.qm-locked { opacity: .72; }
@media (max-width: 720px) { .quiz-modes { grid-template-columns: 1fr; } }

/* ---------- Ruleta de temas ---------- */
.wheel-screen { display: flex; flex-direction: column; align-items: center; }
.wheel-screen .screen-title { align-self: flex-start; }
.wheel-wrap { position: relative; width: 300px; height: 300px; margin: 8px auto 6px; }
.wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 26px; color: var(--accent); z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.wheel { position: relative; width: 300px; height: 300px; border-radius: 50%; border: 6px solid #0c1712; box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 16px 40px rgba(0,0,0,.5); transform: rotate(0deg); }
.wheel-lab { position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.wheel-lab.wheel-dim { opacity: .35; }
.wheel-spin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 86px; height: 86px; border-radius: 50%; background: #fff; color: #14271d; border: 4px solid var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: .15s; }
.wheel-spin:hover { transform: translate(-50%,-50%) scale(1.06); }
.wheel-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; max-width: 520px; }
.wh-leg { display: inline-flex; align-items: center; gap: 6px; background: #ffffff0a; border: 1px solid #ffffff14; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: #d7e7df; cursor: pointer; transition: .15s; }
.wh-leg:hover { background: #ffffff16; }
.wh-leg i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.wh-leg.wheel-dim { opacity: .45; }

/* Quiz con 2 modos: que se distribuyan bien */
.quiz-modes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Acciones del perfil en fila */
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.profile-actions .btn-primary, .profile-actions .btn-secondary { width: auto; max-width: none; }

/* ---------- Ruleta como home del Quiz: cabecera + botón Desafío diario ---------- */
.wheel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.daily-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,197,66,.14); border: 1px solid rgba(245,197,66,.45); color: var(--accent); border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: .15s; }
.daily-chip:hover { background: rgba(245,197,66,.26); }
.daily-chip.daily-locked { opacity: .85; }
.daily-chip.pulse { animation: dailyPulse 1.4s ease-in-out infinite; }
@keyframes dailyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,66,.45); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(245,197,66,0); transform: scale(1.05); }
}

/* Ruleta más grande + anuncio del tema que salió */
.wheel-wrap { width: 360px; height: 360px; }
.wheel { width: 360px; height: 360px; }
.wheel-spin { width: 96px; height: 96px; font-size: 17px; }
.wheel-result { min-height: 26px; text-align: center; font-size: 16px; color: #d7e7df; margin: 2px 0 4px; opacity: 0; transform: translateY(6px); transition: .25s; }
.wheel-result.show { opacity: 1; transform: none; }
.wheel-result b { color: var(--accent); }

/* ---------- Mi mundo: mapa isométrico con zonas ---------- */
.world-map { position: relative; width: 100%; max-width: 1000px; margin: 6px auto 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 1760 / 982; box-shadow: 0 10px 34px rgba(0,0,0,.4); }
.world-map-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.wz { position: absolute; }
.wz-locked { cursor: pointer; }
.wz-veil { position: absolute; inset: 0; background: rgba(0,0,0,.70); border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: opacity 1s ease; }
.wz-have .wz-veil { opacity: 0; pointer-events: none; }
.wz-reveal .wz-veil { animation: veilFade 1s ease forwards; }
@keyframes veilFade { from { opacity: .70; } to { opacity: 0; } }
.wz-locked:hover .wz-veil { background: rgba(0,0,0,.55); }
.wz-lock { font-size: 20px; filter: drop-shadow(0 1px 3px #000); }
.wz-tip { position: absolute; bottom: 104%; left: 50%; transform: translateX(-50%); background: var(--panel, #14271d); border: 1px solid rgba(245,197,66,.45); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 5px 11px; border-radius: 9px; opacity: 0; pointer-events: none; transition: .15s; z-index: 6; box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.wz-tip b { color: var(--accent); }
.wz-locked:hover .wz-tip { opacity: 1; }

/* ============================================================
   MOBILE (≤520px): la app completa usable en un celular.
   ============================================================ */
@media (max-width: 700px) {
  #app { padding: 18px 14px 90px; }
  .screen-title { font-size: 24px; }
}
@media (max-width: 520px) {
  /* --- Barra de navegación: 7 pestañas que caben --- */
  #nav { gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-between; }
  #nav button { flex: 1 1 0; min-width: 0; padding: 5px 2px; font-size: 19px; gap: 1px; border-radius: 9px; }
  #nav button span { font-size: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- HUD compacto --- */
  #hud { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .hud-logo { display: none; }               /* el avatar ya identifica la app */
  .hud-name { font-size: 13px; }
  .hud-level { gap: 6px; }
  .lvl-bar { width: 70px; }
  .lvl-next { display: none; }               /* el "$x / $y" es muy largo en chico */
  .hud-stat-val { font-size: 13.5px; }
  .hud-stat-lbl { font-size: 8.5px; }
  .hud-shop-btn { padding: 8px 12px; font-size: 13px; margin-left: auto; }

  /* --- Platón flotante: que no tape media pantalla --- */
  #maestro-companion { right: 10px; left: 10px; bottom: 78px; align-items: stretch; }
  #maestro-companion .mc-bubble, .maestro-bubble { max-width: none; font-size: 12.5px; }

  /* --- Pantallas y tarjetas --- */
  .screen-title { font-size: 21px; }
  .screen-sub { font-size: 13.5px; }
  .course-intro { padding: 14px; }
  .ci-lead { font-size: 13.5px; }
  .tool-panel { padding: 14px; }
  .tac-grid { padding: 4px 10px 12px; }
  .exam-cta { padding: 14px; }
  .exam-cta .btn-primary { width: 100%; }

  /* --- Lección: la sala de clases en columna --- */
  .slide, .slide-body { padding: 14px !important; }
  .slide-nav { flex-wrap: wrap; gap: 8px; }
  .lesson-node { padding: 10px 12px; }

  /* --- Quiz: rueda y chips --- */
  .wheel { width: 260px; height: 260px; }
  .wheel-spin { width: 74px; height: 74px; font-size: 14px; }
  .quiz-progress { flex-wrap: wrap; gap: 8px; font-size: 12px; }
  .wheel-legend { gap: 6px; }
  .wh-leg { padding: 5px 9px; font-size: 11.5px; }

  /* --- Mercado --- */
  .mkt-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .mkt-tile { padding: 11px 12px; }
  .mkt-price { font-size: 17px; }
  .mkt-sub { font-size: 10.5px; }
  .mkt-name { font-size: 13.5px; }
  .mkt-lead { padding: 11px 13px; }
  .mkt-lead p { font-size: 12.5px; }

  /* --- Tienda / inversión / herramientas --- */
  .market-head { flex-wrap: wrap; gap: 8px; }
  .cat-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .item-grid { grid-template-columns: 1fr 1fr; }
  .tools-recent { flex-wrap: wrap; }

  /* --- Landing --- */
  .lp-title { font-size: 27px; }
  .lp-chips { gap: 6px; }
  .lp-chip { font-size: 11.5px; padding: 6px 10px; }
}

@media (max-width: 520px) {
  /* --- Tienda: el muñeco no puede ser más ancho que el teléfono --- */
  .market-character { max-width: 100%; overflow: hidden; }
  .char-stage { min-height: 170px; }
  .char-stage .paperdoll { height: 160px !important; max-width: 100%; }
  .paperdoll img { max-height: 100%; max-width: 100%; object-fit: contain; }

  /* --- Inversión: resumen en 2x2 y montos más chicos --- */
  .invest-summary { flex-wrap: wrap; gap: 10px 6px; padding: 12px; }
  .isum { flex: 1 1 42%; min-width: 0; }
  .isum-val { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .isum-lbl { font-size: 9.5px; }
}

/* Gotcha de grid: los items no pueden encogerse bajo su contenido sin esto. */
.market-layout > * { min-width: 0; }

/* Dato freak: globo clickeable + tarjeta grande */
.maestro-bubble.fact-clickable { cursor: pointer; }
.maestro-bubble.fact-clickable:hover { filter: brightness(1.06); }
.fact-tap-hint { margin-top: 6px; font-size: 11px; color: var(--accent); font-weight: 700; opacity: .9; }

.fact-modal-ov { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3,8,5,.88); backdrop-filter: blur(4px); opacity: 1; animation: factOvIn .18s ease both; }
@keyframes factOvIn { from { opacity: 0; } to { opacity: 1; } }
.fact-modal { position: relative; width: 520px; max-width: 100%; background: linear-gradient(180deg,#1c3a2a,var(--panel)); border: 1px solid #ffffff1f; border-radius: 22px; padding: 30px 28px 26px; box-shadow: var(--shadow); text-align: center; opacity: 1; animation: factIn .22s ease both; }
@keyframes factIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.fact-close { position: absolute; top: 12px; right: 14px; background: #ffffff14; border: none; color: var(--ink); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.fact-close:hover { background: #ffffff26; }
.fact-badge { display: inline-block; background: var(--accent); color: #1a1a1a; font-weight: 800; font-size: 12.5px; padding: 4px 13px; border-radius: 999px; margin-bottom: 16px; }
.fact-kicker { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 15px; margin-bottom: 12px; letter-spacing: .02em; }
.fact-big-text { font-size: 21px; line-height: 1.45; color: var(--ink); margin: 0 0 18px; font-weight: 600; }
.fact-mas { text-align: left; background: rgba(255,255,255,.05); border: 1px solid #ffffff14; border-radius: 14px; padding: 14px 16px; margin: 0 0 22px; }
.fact-mas-h { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 13px; margin-bottom: 6px; letter-spacing: .02em; }
.fact-mas-text { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.fact-go { width: 100%; }
.fact-go b { color: inherit; }
@media (max-width: 520px) { .fact-big-text { font-size: 18px; } .fact-mas-text { font-size: 14px; } .fact-modal { padding: 26px 18px 20px; } }

/* ---------- Álbum de Datos Freak (láminas coleccionables) ---------- */
.album-screen { max-width: 1100px; margin: 0 auto; padding-bottom: 60px; }
.album-head { text-align: center; margin-bottom: 26px; }
.album-head h1 { font-family: var(--font-display); margin: 6px 0 4px; }
.album-sub { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.album-progress { max-width: 520px; margin: 0 auto 14px; }
.album-count { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.album-count b { color: var(--accent); font-size: 20px; }
.album-bar { height: 10px; border-radius: 999px; background: #ffffff14; overflow: hidden; }
.album-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffd97a); transition: width .4s; }
.album-hito-next { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.album-hito-next b { color: var(--accent); }
.album-sobre { min-width: 300px; }
.album-sobre.used { opacity: .55; cursor: default; filter: saturate(.4); }
.album-sec { margin: 26px 0 8px; }
.album-sec-h { font-family: var(--font-display); font-size: 17px; margin: 0 0 10px; }
.album-sec-n { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: 6px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lam { position: relative; border-radius: 12px; padding: 10px 10px 12px; min-height: 108px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; }
.lam-num { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.lam.collected { background: linear-gradient(165deg, #253d2d, #1a2e21); border: 1.5px solid #f5c54233; cursor: pointer; transition: transform .12s, border-color .12s; }
.lam.collected:hover { transform: translateY(-2px); border-color: #f5c54288; }
.lam.collected .lam-ic { font-size: 20px; }
.lam-txt { font-size: 12px; line-height: 1.35; color: var(--ink); opacity: .92; }
.lam.locked { background: #ffffff08; border: 1.5px dashed #ffffff1c; align-items: center; justify-content: center; }
.lam.locked .lam-num { position: absolute; top: 8px; left: 10px; }
.lam-q { font-size: 30px; font-weight: 900; color: #ffffff22; font-family: var(--font-display); }
.fact-lam-num { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.fact-nueva { background: #46d68a1f; border: 1px solid #46d68a55; color: #7fe8ae; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.fact-nueva b, .fact-hito b { color: var(--accent); }
.fact-hito { background: #f5c5421f; border: 1px solid #f5c54255; color: #ffd97a; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.fact-album { width: 100%; margin-top: 10px; }
/* Sobre diario */
.sobre-modal { text-align: center; }
.sobre-top { font-size: 44px; animation: sobrePop .5s ease; }
.sobre-h { font-family: var(--font-display); margin: 6px 0 16px; }
.sobre-laminas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.sobre-lam { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; background: linear-gradient(165deg, #253d2d, #1a2e21); border: 1.5px solid #f5c54255; border-radius: 14px; padding: 12px 14px; cursor: pointer; opacity: 0; animation: lamIn .45s ease forwards; }
.sobre-lam:hover { border-color: #f5c542aa; }
.sobre-lam-ic { font-size: 22px; grid-row: span 2; }
.sobre-lam-tema { font-size: 12px; font-weight: 800; color: var(--accent); }
.sobre-lam .lam-num { grid-row: span 2; }
.sobre-lam-txt { grid-column: 2 / 4; font-size: 13px; line-height: 1.4; color: var(--ink); }
.sobre-tip { font-size: 12.5px; color: var(--muted); margin: 0; }
.sobre-full { font-size: 15px; color: var(--ink); }
@keyframes lamIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sobrePop { 0% { transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: scale(1); } }
@media (max-width: 520px) { .album-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .album-sobre { min-width: 0; width: 100%; } }

/* Cartera plegable + portafolios agrupados */
.ra-cart-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.ra-cart-toggle:hover .ra-caret { color: var(--accent); }
.ra-caret { font-size: 13px; font-weight: 700; color: var(--muted); }
.ra-basket { border-color: #f5c54244; }
.ra-basket .ra-qty { letter-spacing: 2px; }

/* ---------- Interactivos (estilo Brilliant) ---------- */
.tag-interactivo { background: #FFB80022; color: #FFB800; }
.tag-estimacion { background: #46d68a22; color: #46d68a; }
.ix-lead { font-size: 14.5px; }
.ix-box { text-align: left; background: rgba(255,255,255,.04); border: 1px solid #ffffff14; border-radius: 14px; padding: 16px 18px; margin-top: 10px; }
.ix-ctrl { margin-bottom: 12px; }
.ix-ctrl label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 5px; }
.ix-ctrl label b { color: var(--ink); font-size: 15px; }
.ix-ctrl input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.ix-chart { width: 100%; height: auto; margin: 6px 0 2px; }
.ix-axis { fill: #93a89b; font-size: 11px; font-family: var(--font); }
.ix-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); margin: 8px 0 4px; }
.ix-stats b { color: var(--ink); }
.ix-gold b, .ix-gold { color: var(--accent) !important; }
.ix-bad b, .ix-bad { color: #f3766b !important; }
.ix-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.ix-barwrap { margin: 8px 0; }
.ix-barlab { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin: 8px 0 4px; }
.ix-barlab b { color: var(--ink); }
.ix-bar { height: 14px; border-radius: 999px; background: #ffffff10; overflow: hidden; }
.ix-bar i { display: block; height: 100%; border-radius: 999px; transition: width .25s; }
.ix-range { margin: 14px 0 6px; }
.ix-rangebar { position: relative; height: 16px; border-radius: 999px; background: #ffffff10; }
.ix-rangefill { position: absolute; top: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f3766b55, #46d68a55); transition: left .2s, width .2s; }
.ix-rangedot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 10px #FFB80088; transition: left .2s; }
.ix-rangelab { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 5px; }
.ix-play { width: 100%; margin: 4px 0 10px; }
.fb-hint { color: var(--accent); font-weight: 800; }
/* Pregunta del día */
.daily-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; margin: 0 0 14px; background: linear-gradient(160deg, #2a2440, #1d1a30); border: 1.5px solid #7c5cff44; border-radius: 16px; cursor: pointer; color: var(--ink); text-align: left; transition: border-color .15s, transform .12s; }
.daily-q:hover { border-color: #7c5cff99; transform: translateY(-1px); }
.daily-q.done { opacity: .75; background: var(--panel); border-color: #ffffff14; }
.dq-ic { font-size: 26px; }
.dq-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dq-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.dq-badge { font-size: 11px; font-weight: 800; background: #FFB80022; color: var(--accent); border-radius: 999px; padding: 2px 9px; margin-left: 6px; }
.dq-badge.ok { background: #46d68a22; color: #46d68a; }
.dq-sub { font-size: 12.5px; color: var(--muted); }
.dq-go { color: var(--accent); font-size: 18px; }
.dq-modal { text-align: left; }
.dq-q { font-family: var(--font-display); font-size: 19px; margin: 6px 0 14px; }
.dq-done-note { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.dq-vercurso { display: block; margin-top: 12px; }

/* Mercado fusionado en Inversión */
.ra-desc { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; margin: 2px 0 4px; }
.ra-indice { cursor: default; opacity: .85; border-style: dashed !important; }
.ra-tag-ind { font-size: 10px; font-weight: 800; color: var(--muted); background: #ffffff10; border-radius: 999px; padding: 1px 7px; margin-left: 5px; vertical-align: middle; }