/* ==========================================================================
   MarketingMatch — hoja de estilos
   Mobile-first. Tema oscuro por defecto, claro con [data-theme="light"].
   ========================================================================== */

:root{
  --bg:#120d1c;  --bg-2:#1a1330;
  --surface:#1e1733; --surface-2:#271e42; --surface-3:#322651;
  --text:#f5f2fb; --text-dim:#b0a6c8; --text-faint:#7e7399;
  --line:rgba(255,255,255,.09);
  --violet:#7c5cff; --coral:#ff5c8a; --amber:#ffb13d;
  --ok:#2ee6a0; --bad:#ff5470;
  --grad:linear-gradient(135deg,var(--violet),var(--coral));
  --shadow:0 18px 50px -12px rgba(0,0,0,.65);
  --r:20px; --r-lg:28px;
  --ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  --bg:#f6f3fb; --bg-2:#ece6f8;
  --surface:#ffffff; --surface-2:#f4effc; --surface-3:#e9e1f8;
  --text:#1c1430; --text-dim:#5d5277; --text-faint:#8c81a6;
  --line:rgba(28,20,48,.1);
  --shadow:0 18px 44px -14px rgba(60,40,110,.3);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.glow{
  position:fixed; inset:-30% -10% auto -10%; height:70vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(45% 55% at 20% 20%, rgba(124,92,255,.32), transparent 70%),
    radial-gradient(40% 50% at 82% 10%, rgba(255,92,138,.26), transparent 70%);
  filter:blur(10px);
}
:root[data-theme="light"] .glow{opacity:.55}

button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
kbd{
  font:inherit; font-size:.76rem; padding:1px 6px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line);
}

/* ---------------------------------------------------------- pantallas --- */
.screen{
  display:none; position:relative; z-index:1;
  max-width:560px; margin:0 auto; padding:18px 16px calc(28px + env(safe-area-inset-bottom));
  min-height:100%;
}
.screen.is-active{display:block; animation:fadeUp .4s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ------------------------------------------------------------- inicio --- */
.home-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:22px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  font-size:1.5rem; width:46px; height:46px; flex:none; display:grid; place-items:center;
  background:var(--grad); border-radius:14px; box-shadow:0 8px 22px -8px var(--violet);
}
.brand h1{margin:0; font-size:1.42rem; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.brand h1 span{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline{margin:2px 0 0; font-size:.8rem; color:var(--text-faint)}

.icon-btn{
  width:40px; height:40px; flex:none; border-radius:12px; font-size:1.05rem;
  background:var(--surface); border:1px solid var(--line); display:grid; place-items:center;
  transition:transform .2s var(--ease), background .2s;
}
.icon-btn:hover{background:var(--surface-2)} .icon-btn:active{transform:scale(.92)}

.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:11px 6px; text-align:center;
}
.stat b{display:block; font-size:1.2rem; font-weight:700; letter-spacing:-.02em}
.stat span{font-size:.66rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.07em}

.level-bar{
  position:relative; height:28px; border-radius:14px; background:var(--surface);
  border:1px solid var(--line); overflow:hidden; margin-bottom:22px;
}
.level-bar>div{position:absolute; inset:0 auto 0 0; background:var(--grad); width:0; transition:width .6s var(--ease)}
.level-bar>span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.74rem; font-weight:600; letter-spacing:.01em;
}

.quick-actions{display:grid; gap:9px; margin-bottom:28px}
.qa{
  display:flex; align-items:center; gap:13px; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; transition:transform .2s var(--ease), background .2s, border-color .2s;
}
.qa:hover{background:var(--surface-2); border-color:rgba(124,92,255,.4)}
.qa:active{transform:scale(.985)}
.qa-primary{background:var(--grad); border-color:transparent; box-shadow:0 12px 30px -14px var(--violet)}
.qa-primary:hover{background:var(--grad); filter:brightness(1.07)}
.qa-primary .qa-ico{background:rgba(255,255,255,.2)}
.qa-primary small{color:rgba(255,255,255,.8)!important}
.qa-ico{
  width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); font-size:1rem;
}
.qa-txt{display:flex; flex-direction:column; min-width:0}
.qa-txt b{font-size:.95rem; font-weight:600}
.qa-txt small{font-size:.76rem; color:var(--text-faint); margin-top:1px}

.section-title{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-faint);
  font-weight:600; margin:0 0 11px 2px;
}
.section-title small{text-transform:none; letter-spacing:0; font-size:.8rem; color:var(--text-dim)}

.deck-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:26px}
.deck{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; text-align:left; position:relative; overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s, background .2s;
}
.deck:hover{transform:translateY(-3px); border-color:rgba(124,92,255,.45); background:var(--surface-2)}
.deck:active{transform:scale(.97)}
.deck-emoji{font-size:1.4rem; display:block; margin-bottom:7px}
.deck-name{font-size:.9rem; font-weight:600; line-height:1.25; display:block; margin-bottom:4px}
.deck-blurb{font-size:.73rem; color:var(--text-faint); line-height:1.4; display:block; margin-bottom:10px}
.deck-meter{height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.deck-meter>i{display:block; height:100%; background:var(--grad); width:0; transition:width .5s var(--ease)}
.deck-meta{display:flex; justify-content:space-between; font-size:.68rem; color:var(--text-faint); margin-top:6px}
.deck.is-mastered .deck-meter>i{background:linear-gradient(135deg,var(--ok),#1fc98b)}
.deck-crown{position:absolute; top:11px; right:12px; font-size:.85rem}

.home-foot{text-align:center; color:var(--text-faint); font-size:.75rem; line-height:1.6; padding-top:8px}
.home-foot b{color:var(--text-dim); font-weight:600}
.link-btn{margin-top:10px; font-size:.75rem; color:var(--text-faint); text-decoration:underline; text-underline-offset:3px}
.link-btn:hover{color:var(--bad)}

/* -------------------------------------------------------------- juego --- */
.play-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.play-title{flex:1; min-width:0; text-align:center}
.play-title b{display:block; font-size:1rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.play-title small{font-size:.72rem; color:var(--text-faint)}
.play-score{
  min-width:52px; text-align:center; font-size:.82rem; font-weight:700; padding:7px 9px;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--ok);
}
.progress{height:5px; border-radius:3px; background:var(--surface); overflow:hidden; margin-bottom:14px}
.progress>div{height:100%; background:var(--grad); width:0; transition:width .4s var(--ease)}

.brief{background:var(--surface); border:1px solid var(--line); border-radius:16px; margin-bottom:14px; overflow:hidden}
.brief-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; font-size:.82rem; font-weight:500; text-align:left; color:var(--text-dim);
}
.brief-toggle i{font-style:normal; transition:transform .3s var(--ease); font-size:.9rem}
.brief.is-open .brief-toggle i{transform:rotate(180deg)}
.brief p{
  margin:0; padding:0 14px; max-height:0; overflow:hidden; font-size:.83rem; line-height:1.62;
  color:var(--text-dim); transition:max-height .4s var(--ease), padding .4s var(--ease);
}
.brief.is-open p{max-height:340px; padding:0 14px 14px}

/* ------------------------------------------------------- pila de cartas */
.stage{position:relative; height:clamp(330px,52vh,430px); margin-bottom:18px}
.card-stack{position:absolute; inset:0}
.card{
  position:absolute; inset:0; border-radius:var(--r-lg); padding:26px 22px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  touch-action:none; user-select:none; -webkit-user-select:none;
  will-change:transform; cursor:grab;
}
.card.is-dragging{cursor:grabbing; transition:none!important}
.card-topic{
  position:absolute; top:18px; left:22px; right:22px; display:flex; align-items:center; gap:7px;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); font-weight:600;
}
.card-q{
  margin:0; font-size:clamp(1.06rem,4.3vw,1.3rem); line-height:1.44; font-weight:500;
  letter-spacing:-.01em; text-wrap:balance;
}
.card-options{display:flex; align-items:center; gap:10px; margin-top:4px}
.card-opt{
  flex:1; min-width:0; text-align:center; font-size:.8rem; font-weight:600; padding:9px 8px;
  border-radius:12px; background:var(--surface-2); border:1px solid var(--line); line-height:1.3;
}
.card-opt-l{border-color:rgba(255,84,112,.3)} .card-opt-r{border-color:rgba(46,230,160,.3)}
.card-arrows{font-size:.7rem; color:var(--text-faint); flex:none}
.card-deco{
  position:absolute; bottom:-30px; right:-20px; font-size:7rem; opacity:.045;
  pointer-events:none; line-height:1;
}

.card-stamp{
  position:absolute; top:34px; padding:7px 16px; border-radius:11px; font-weight:800;
  font-size:1rem; letter-spacing:.04em; text-transform:uppercase; border:3px solid;
  opacity:0; transition:opacity .12s linear; pointer-events:none;
}
.stamp-r{right:22px; transform:rotate(11deg); color:var(--ok); border-color:var(--ok)}
.stamp-l{left:22px;  transform:rotate(-11deg); color:var(--bad); border-color:var(--bad)}

.choice-hint{
  position:absolute; top:50%; transform:translateY(-50%); z-index:-1;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-faint); writing-mode:vertical-rl; opacity:.5;
}
.choice-left{left:-6px; rotate:180deg} .choice-right{right:-6px}

.card.fly-left {transition:transform .42s var(--ease), opacity .42s; transform:translate(-135%,22px) rotate(-26deg); opacity:0}
.card.fly-right{transition:transform .42s var(--ease), opacity .42s; transform:translate( 135%,22px) rotate( 26deg); opacity:0}
.card.fly-up   {transition:transform .42s var(--ease), opacity .42s; transform:translateY(-130%) scale(.9); opacity:0}

/* ----------------------------------------------------------- controles */
.controls{display:flex; align-items:center; justify-content:center; gap:10px}
.ctl{
  border-radius:16px; font-weight:600; font-size:.86rem; padding:14px 12px; line-height:1.25;
  background:var(--surface); border:1.5px solid var(--line); flex:1; min-width:0;
  transition:transform .18s var(--ease), background .2s, border-color .2s;
}
.ctl:active{transform:scale(.94)}
.ctl-left:hover {border-color:var(--bad); background:rgba(255,84,112,.1)}
.ctl-right:hover{border-color:var(--ok);  background:rgba(46,230,160,.1)}
.ctl-skip{
  flex:none; width:50px; height:50px; padding:0; border-radius:50%;
  font-size:1.1rem; font-weight:700; color:var(--text-faint);
}
.ctl-skip:hover{border-color:var(--amber); color:var(--amber)}
.kbd-hint{text-align:center; font-size:.72rem; color:var(--text-faint); margin:14px 0 0}

/* ----------------------------------------------------- retroalimentación */
.feedback{
  position:fixed; inset:0; z-index:50; display:none; align-items:flex-end; justify-content:center;
  background:rgba(8,5,16,.72); backdrop-filter:blur(7px); padding:16px;
}
.feedback.is-open{display:flex}
.fb-card{
  width:100%; max-width:528px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow); animation:slideUp .32s var(--ease);
  max-height:88vh; overflow-y:auto;
}
@keyframes slideUp{from{transform:translateY(100%)} to{transform:none}}
.fb-badge{
  display:inline-block; font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; padding:6px 13px; border-radius:10px; margin-bottom:13px;
}
.fb-badge.ok   {background:rgba(46,230,160,.16); color:var(--ok)}
.fb-badge.bad  {background:rgba(255,84,112,.16); color:var(--bad)}
.fb-badge.skip {background:rgba(255,177,61,.16); color:var(--amber)}
.fb-answer{margin:0 0 10px; font-size:1.04rem; font-weight:600; line-height:1.4}
.fb-why{margin:0; font-size:.9rem; line-height:1.66; color:var(--text-dim)}
.fb-tip{
  margin-top:14px; padding:12px 14px; border-radius:14px; font-size:.84rem; line-height:1.55;
  background:var(--surface-2); border-left:3px solid var(--amber); color:var(--text-dim);
}
.fb-tip:empty{display:none}
.fb-tip b{color:var(--amber); font-weight:600}

.btn-main{
  width:100%; margin-top:20px; padding:15px; border-radius:16px; font-size:.95rem; font-weight:700;
  background:var(--grad); color:#fff; box-shadow:0 12px 30px -14px var(--violet);
  transition:transform .18s var(--ease), filter .2s;
}
.btn-main:hover{filter:brightness(1.08)} .btn-main:active{transform:scale(.975)}
.btn-ghost{
  width:100%; margin-top:9px; padding:14px; border-radius:16px; font-size:.9rem; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--text-dim);
}
.btn-ghost:hover{background:var(--surface-2); color:var(--text)}

/* --------------------------------------------------------- resultados --- */
.result-wrap{text-align:center; padding-top:16px}
.result-ring{
  width:148px; height:148px; margin:0 auto 20px; border-radius:50%; display:grid;
  place-content:center; position:relative; background:var(--surface); border:1px solid var(--line);
}
.result-ring::before{
  content:''; position:absolute; inset:-1px; border-radius:50%; padding:7px;
  background:conic-gradient(var(--violet) calc(var(--pct,0)*1%), var(--surface-3) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.result-ring b{font-size:2.1rem; font-weight:800; letter-spacing:-.03em; line-height:1}
.result-ring small{font-size:.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.09em}
#result-title{margin:0 0 7px; font-size:1.4rem; font-weight:700; letter-spacing:-.02em}
.result-sub{margin:0 0 22px; color:var(--text-dim); font-size:.9rem; line-height:1.55}
.result-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:20px}
.result-grid>div{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:13px 7px}
.result-grid b{display:block; font-size:1.3rem; font-weight:700}
.result-grid span{font-size:.68rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.07em}
.result-missed{text-align:left; margin-bottom:8px}
.result-missed:empty{display:none}
.rm-title{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); font-weight:600; margin:0 0 9px 2px}
.rm-item{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bad);
  border-radius:12px; padding:11px 13px; margin-bottom:7px; font-size:.82rem; line-height:1.5;
}
.rm-item b{display:block; font-weight:500; margin-bottom:4px}
.rm-item span{color:var(--text-faint); font-size:.78rem}
.result-actions{margin-top:14px}

/* ----------------------------------------------------------- glosario --- */
.search-wrap{margin-bottom:14px}
#gl-search{
  width:100%; padding:14px 16px; border-radius:16px; font:inherit; font-size:.92rem;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
}
#gl-search::placeholder{color:var(--text-faint)}
#gl-search:focus{outline:none; border-color:var(--violet)}
.gl-list{display:grid; gap:8px}
.gl-item{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.gl-term{margin:0 0 5px; font-size:.92rem; font-weight:600; letter-spacing:-.01em}
.gl-def{margin:0; font-size:.83rem; line-height:1.6; color:var(--text-dim)}
.gl-tag{
  display:inline-block; margin-top:9px; font-size:.68rem; font-weight:600; padding:3px 9px;
  border-radius:8px; background:var(--surface-2); color:var(--text-faint);
}
.gl-empty{text-align:center; color:var(--text-faint); font-size:.87rem; padding:40px 20px; line-height:1.6}
mark{background:rgba(255,177,61,.28); color:inherit; border-radius:3px; padding:0 2px}

/* ---------------------------------------------------------- escritorio - */
@media (min-width:600px){
  .screen{padding:28px 24px 40px}
  .deck-grid{grid-template-columns:repeat(3,1fr)}
  .feedback{align-items:center}
  .fb-card{border-radius:var(--r-lg); animation:popIn .3s var(--ease)}
  @keyframes popIn{from{transform:scale(.94); opacity:0} to{transform:none; opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}