:root{
  --bg:#0b0c10; --ink:#f6f7fb; --muted:#a8adba; --panel:#141724;
  --stroke:#20263a; --brand:#7cf2c2; --brand2:#ff77e1;
  --acc:#9ad1ff; --acc2:#ffd38a; --ok:#00e29b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:radial-gradient(1200px 800px at 15% -5%, #1a1f36 0%, #0b0c10 60%), #0b0c10;
  font:16px/1.55 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
.wrap{max-width:1140px;margin-inline:auto;padding:1.25rem}
header.wrap{padding-top:2rem;padding-bottom:.5rem}
h1{margin:0 0 .25rem;font-weight:800}
.sub{margin:.25rem 0 0;color:var(--muted)}
.muted{color:var(--muted)}
.tiny-tip{font-size:.8rem;color:var(--muted);margin-top:.4rem}

/* Panels */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 70%);
  border:1px solid var(--stroke); border-radius:16px; padding:1rem 1.1rem;
  box-shadow:0 8px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}

/* Scope bar */
.scope-bar{margin-bottom:1rem}
.scope-bar input{display:none}
.scope-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.5rem;
}
.pill{
  display:flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  border:1px solid #2b3250; border-radius:12px; padding:.65rem .9rem;
  background:linear-gradient(180deg,#18203a,#10162a); color:#eaf0ff; font-weight:700;
}
.pill:hover{border-color:#3a4572}
#scope-cercanos:checked ~ .scope-row label[for="scope-cercanos"],
#scope-lejanos:checked  ~ .scope-row label[for="scope-lejanos"],
#scope-comunidad:checked~ .scope-row label[for="scope-comunidad"]{
  color:#0b0c10; border-color:transparent;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  box-shadow:0 2px 14px rgba(124,242,194,.25), inset 0 0 0 1px rgba(255,255,255,.15);
}

/* Reward filters */
.filters{margin-top:.25rem}
.filter-row{display:flex;gap:.4rem;justify-content:center;align-items:center;margin-top:.25rem}
.filters input{display:none}
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.28rem .5rem;border-radius:999px;border:1px solid #2b3250;font-weight:700;cursor:pointer;
  background:linear-gradient(180deg,#18203a,#10162a); color:#eaf0ff; font-size:.85rem;
}
.chip.merito::before{content:"★"}
.chip.recursos::before{content:"⛁"}
.chip.dinero::before{content:"€"}
.filters label:hover{border-color:#3a4572}
#f-merito:checked  ~ .filter-row label[for="f-merito"],
#f-recursos:checked~ .filter-row label[for="f-recursos"],
#f-dinero:checked  ~ .filter-row label[for="f-dinero"]{
  color:#0b0c10;border-color:transparent;background:linear-gradient(90deg,var(--brand),var(--brand2));
}

/* Wizard */
.wizard{margin-bottom:1rem}
.wizard input{display:none}
.wizard-head h2{margin:.2rem 0}
.wizard-card{
  position:relative; overflow:hidden; border-radius:14px;
  background:linear-gradient(180deg,#111528,#0c111e);
  border:1px solid var(--stroke); padding:.8rem; min-height:96px;
}
.wiz-suggestion{
  display:none; align-items:flex-start; gap:.8rem; border-radius:12px; padding:.6rem .7rem;
  border:1px solid transparent; transition:border-color .2s, background .2s;
}
.wiz-suggestion:hover{border-color:#2b3250;background:#0e1321}
.wiz-suggestion .select{margin-right:.2rem;accent-color:var(--brand)}
.wiz-suggestion .text strong{display:block;margin-bottom:.05rem}
.wiz-suggestion .rewards{display:flex;gap:.3rem;margin-top:.25rem}
#wiz-1:checked ~ .wizard-card .s1{display:flex}
#wiz-2:checked ~ .wizard-card .s2{display:flex}
#wiz-3:checked ~ .wizard-card .s3{display:flex}
#wiz-4:checked ~ .wizard-card .s4{display:flex}
#wiz-5:checked ~ .wizard-card .s5{display:flex}
.wizard-actions{display:flex;gap:.5rem;margin-top:.6rem}
.wizard-actions .btn{display:none}
#wiz-1:checked ~ .wizard-actions label[for="wiz-2"],
#wiz-2:checked ~ .wizard-actions label[for="wiz-3"],
#wiz-3:checked ~ .wizard-actions label[for="wiz-4"],
#wiz-4:checked ~ .wizard-actions label[for="wiz-5"],
#wiz-5:checked ~ .wizard-actions label[for="wiz-1"]{display:inline-flex}

/* Botones base */
.btn{
  appearance:none; border:1px solid #2b3250; background:linear-gradient(180deg,#18203a,#10162a);
  color:#eaf0ff; padding:.55rem .9rem; border-radius:12px; cursor:pointer;
  font-weight:700; text-decoration:none; transition:transform .08s ease, box-shadow .2s ease, border-color .2s;
  box-shadow:0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn:hover{border-color:#3a4572; box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(124,242,194,.12) inset}
.btn:active{transform:translateY(1px)}
.btn.solid{background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#0b0c10; border-color:transparent}
.btn.ghost{background:transparent}




/* layout */
.wrap{max-width:1100px;margin-inline:auto;padding:1.25rem}
header.wrap{padding-top:2rem;padding-bottom:.5rem}
h1{margin:0 0 .25rem;font-weight:800;letter-spacing:.2px}
.sub{margin:.25rem 0 0;color:var(--muted)}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.tiny-tip{font-size:.8rem;color:var(--muted);margin-top:.5rem}

/* panels */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 70%);
  border:1px solid var(--stroke); border-radius:16px; padding:1rem 1.1rem;
  box-shadow:0 8px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}

/* grid categories */
.grid{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cat header h3{margin:.2rem 0 .1rem}
.cat header p{margin:0 0 .6rem}

/* subtabs (3 compartidas) */
.subtabs input{display:none}
.subtabs .tabs{
  display:flex; gap:.35rem; margin:.25rem 0 .7rem;
}
.subtabs .tabs label{
  cursor:pointer; padding:.4rem .6rem; border:1px solid var(--stroke);
  border-radius:999px; font-size:.92rem; color:var(--muted);
  background:linear-gradient(180deg,#111528,#0d111f);
}
.subtabs .tabs label:hover{border-color:#2a3350;color:#cbd3e6}
.subtabs .tab{display:none; margin:0; padding-left:1.1rem}
.subtabs .tab li{margin:.35rem 0}

/* show selected tab */
.subtabs:has(#p1-a:checked) .t1,
.subtabs:has(#p2-a:checked) .t1,
.subtabs:has(#p3-a:checked) .t1,
.subtabs:has(#p4-a:checked) .t1,
.subtabs:has(#p5-a:checked) .t1 {display:block}
.subtabs:has(#p1-b:checked) .t2,
.subtabs:has(#p2-b:checked) .t2,
.subtabs:has(#p3-b:checked) .t2,
.subtabs:has(#p4-b:checked) .t2,
.subtabs:has(#p5-b:checked) .t2 {display:block}
.subtabs:has(#p1-c:checked) .t3,
.subtabs:has(#p2-c:checked) .t3,
.subtabs:has(#p3-c:checked) .t3,
.subtabs:has(#p4-c:checked) .t3,
.subtabs:has(#p5-c:checked) .t3 {display:block}

/* highlight tab pill when active */
#p1-a:checked ~ .tabs label[for="p1-a"],
#p1-b:checked ~ .tabs label[for="p1-b"],
#p1-c:checked ~ .tabs label[for="p1-c"],
#p2-a:checked ~ .tabs label[for="p2-a"],
#p2-b:checked ~ .tabs label[for="p2-b"],
#p2-c:checked ~ .tabs label[for="p2-c"],
#p3-a:checked ~ .tabs label[for="p3-a"],
#p3-b:checked ~ .tabs label[for="p3-b"],
#p3-c:checked ~ .tabs label[for="p3-c"],
#p4-a:checked ~ .tabs label[for="p4-a"],
#p4-b:checked ~ .tabs label[for="p4-b"],
#p4-c:checked ~ .tabs label[for="p4-c"],
#p5-a:checked ~ .tabs label[for="p5-a"],
#p5-b:checked ~ .tabs label[for="p5-b"],
#p5-c:checked ~ .tabs label[for="p5-c"]{
  color:#0b0c10; border-color:transparent;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  box-shadow:0 2px 14px rgba(124,242,194,.25), inset 0 0 0 1px rgba(255,255,255,.15);
}