/* Paldea Guide — Scarlet run. Tema oscuro escarlata/oro. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800;900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ground:#1B1114; --surface:#241A1E; --surface2:#2F2126; --raise:#3C2A30;
  --parchment:#F0E7D7; --muted:#B49B94; --dim:#8A7370;
  --scarlet:#E24A42; --gold:#E0A82E; --tera:#4CD6C1; --violet:#B98BE0;
  --good:#5FD08A; --bad:#E4574F;
  --line:rgba(240,231,215,.14); --line2:rgba(240,231,215,.07);
  --display:'Big Shoulders Display',Impact,sans-serif;
  --body:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1100px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ground); color:var(--parchment);
  font:15px/1.55 var(--body); -webkit-text-size-adjust:100%;
}
:focus-visible{outline:2px solid var(--tera); outline-offset:2px;}
a{color:var(--gold);}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px;}

/* ---------- header ---------- */
.hd{padding:34px 0 26px; background:linear-gradient(165deg,#3E1418 0%,var(--ground) 66%); border-bottom:1px solid var(--line);}
.eyebrow{font:10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold);}
h1{font-family:var(--display); font-weight:900; font-size:clamp(38px,8vw,72px); line-height:.84; margin:10px 0 0; text-transform:uppercase;}
h1 em{font-style:normal; color:var(--scarlet);}
.tagline{color:var(--muted); font-size:14px; margin:12px 0 0; max-width:62ch;}
.hd-stats{display:flex; gap:22px; flex-wrap:wrap; margin-top:20px;}
.hd-stat{font:11px/1.5 var(--mono); color:var(--dim);}
.hd-stat b{display:block; font:700 20px/1 var(--body); color:var(--parchment); margin-bottom:3px;}

/* ---------- progreso ---------- */
.prog{display:flex; align-items:center; gap:14px; margin-top:22px;}
.prog-track{flex:1; height:7px; background:var(--surface2); border-radius:99px; overflow:hidden;}
.prog-fill{height:100%; width:0; background:linear-gradient(90deg,var(--scarlet),var(--gold)); transition:width .45s ease;}
.prog-txt{font:11px/1 var(--mono); color:var(--muted); white-space:nowrap;}

/* ---------- nav ---------- */
nav{position:sticky; top:0; z-index:20; background:rgba(27,17,20,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-in{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; max-width:var(--wrap); margin:0 auto; padding:0 20px;}
.nav-in::-webkit-scrollbar{display:none;}
.tab{flex:0 0 auto; background:none; border:0; border-bottom:2px solid transparent; color:var(--dim);
  font:700 19px/1 var(--display); letter-spacing:.05em; text-transform:uppercase; padding:14px 16px; cursor:pointer;}
.tab:hover{color:var(--muted);}
.tab[aria-selected="true"]{color:var(--parchment); border-bottom-color:var(--scarlet);}

/* ---------- paneles ---------- */
.panel{display:none; padding:28px 0 60px;}
.panel.on{display:block;}
.lede{color:var(--muted); font-size:14px; max-width:70ch; margin:0 0 24px;}
.lede b{color:var(--parchment); font-weight:600;}
h2{font-family:var(--display); font-weight:800; font-size:30px; text-transform:uppercase; margin:36px 0 10px; letter-spacing:.01em;}
h2:first-child{margin-top:0;}
h3{font-family:var(--display); font-weight:800; font-size:23px; text-transform:uppercase; margin:26px 0 8px;}

.note{border-left:2px solid var(--tera); background:var(--surface2); padding:13px 15px; font-size:13.5px; color:#DFD4C7; margin:18px 0;}
.note b{color:var(--tera);}
.note.warn{border-left-color:var(--scarlet);} .note.warn b{color:var(--scarlet);}
.note.gold{border-left-color:var(--gold);} .note.gold b{color:var(--gold);}

/* ---------- etapas ---------- */
.stage{border:1px solid var(--line2); background:var(--surface); margin-bottom:12px;}
.stage-bar{width:100%; display:flex; align-items:center; gap:13px; padding:15px 16px; text-align:left;
  background:none; border:0; border-left:3px solid var(--raise); color:var(--parchment); cursor:pointer; font-family:var(--body);}
.stage-bar:hover{background:var(--surface2); border-left-color:var(--gold);}
.stage.done>.stage-bar{border-left-color:var(--good);}
.stage.done .stage-t{color:var(--dim); text-decoration:line-through; text-decoration-color:rgba(95,208,138,.55);}
.stage-n{font:10px/1 var(--mono); color:var(--gold); border:1px solid var(--line); padding:5px 7px; flex:none;}
.stage.done .stage-n{color:var(--good); border-color:rgba(95,208,138,.4);}
.stage-tx{flex:1; min-width:0;}
.stage-t{display:block; font:800 21px/1.05 var(--display); text-transform:uppercase;}
.stage-s{display:block; font:10.5px/1.4 var(--mono); color:var(--dim); margin-top:4px;}
.stage-lv{font:11px/1 var(--mono); color:var(--tera); flex:none; white-space:nowrap;}
.chev{color:var(--dim); font-size:11px; flex:none; transition:transform .2s;}
.stage.open .chev{transform:rotate(90deg);}
.stage-body{display:none; padding:2px 16px 18px;}
.stage.open .stage-body{display:block;}

.block{margin-top:18px;}
.block-h{font:9.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  padding-bottom:7px; border-bottom:1px solid var(--line2); margin-bottom:11px;}

/* checklist */
.chk{display:flex; gap:11px; padding:9px 11px; margin-bottom:6px; background:var(--surface2);
  border-left:2px solid var(--raise); cursor:pointer; font-size:13.5px; color:#DFD4C7;}
.chk:hover{border-left-color:var(--gold);}
.chk.ok{border-left-color:var(--good);}
.chk.ok .chk-t{color:var(--dim); text-decoration:line-through; text-decoration-color:rgba(95,208,138,.5);}
.box{flex:none; width:16px; height:16px; margin-top:2px; border:1.5px solid var(--dim);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent;}
.chk.ok .box{background:var(--good); border-color:var(--good); color:#0E2A1B;}
.chk-t b{color:var(--parchment); font-weight:600;}
.chk-t code, code{font:11.5px var(--mono); background:rgba(0,0,0,.3); padding:1px 5px; color:#F5DFA8;}

/* jefes */
.boss{border:1px solid var(--line2); background:var(--surface2); margin-bottom:14px;}
.boss-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--line2);
  border-left:3px solid var(--scarlet);}
.boss-n{font:800 20px/1 var(--display); text-transform:uppercase;}
.boss-meta{font:10.5px/1 var(--mono); color:var(--gold);}
.boss-in{padding:13px 14px;}
.roster{font:12px/1.7 var(--mono); color:var(--muted); margin-bottom:12px;}
.roster b{color:var(--parchment);}
.plan{display:grid; gap:8px;}
.use, .avoid{display:grid; grid-template-columns:auto 1fr; gap:11px; padding:10px 12px; font-size:13px;}
.use{background:rgba(95,208,138,.07); border-left:2px solid var(--good);}
.avoid{background:rgba(228,87,79,.07); border-left:2px solid var(--bad);}
.tag{font:9.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding-top:2px;}
.use .tag{color:var(--good);} .avoid .tag{color:var(--bad);}
.mon{font-weight:700; color:var(--parchment);}
.mv{display:inline-block; font:11.5px var(--mono); background:rgba(0,0,0,.3); padding:1px 6px; margin:2px 3px 0 0; color:#F5DFA8;}
.why{color:var(--muted); font-size:12.5px; margin-top:4px;}
.bwarn{margin-top:11px; font-size:12.5px; color:#DFD4C7; border-left:2px solid var(--gold); background:rgba(0,0,0,.22); padding:9px 11px;}
.bwarn b{color:var(--gold);}

.stage-done-btn{margin-top:18px; background:none; border:1px solid var(--line); color:var(--muted);
  font:9.5px var(--mono); letter-spacing:.15em; text-transform:uppercase; padding:8px 14px; cursor:pointer;}
.stage-done-btn:hover{border-color:var(--good); color:var(--good);}
.stage.done .stage-done-btn{border-color:var(--good); color:var(--good);}

/* ---------- equipo ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px;}
.card{background:var(--surface); border:1px solid var(--line2); padding:17px;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);}
.card h3{margin:0 0 5px; font-size:28px;}
.card-t{font:9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:12px;}
.dl{display:grid; grid-template-columns:auto 1fr; gap:5px 11px; font-size:12.5px;
  border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); padding:11px 0; margin-bottom:12px;}
.dl dt{font:9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding-top:2px;}
.dl dd{margin:0; color:#DFD4C7;}
.statbars{display:grid; gap:5px; margin-bottom:12px;}
.sb{display:grid; grid-template-columns:34px 1fr 30px; gap:8px; align-items:center; font:10.5px var(--mono);}
.sb-l{color:var(--dim);}
.sb-t{height:6px; background:var(--surface2); overflow:hidden;}
.sb-f{height:100%; background:linear-gradient(90deg,var(--scarlet),var(--gold));}
.sb-v{color:var(--muted); text-align:right;}
.ivrow{font:11px var(--mono); color:var(--muted); margin-bottom:10px;}
.ivrow .lo{color:var(--bad); font-weight:700;}
.ivrow .hi{color:var(--good); font-weight:700;}
.tl{list-style:none; padding:0; margin:0 0 12px;}
.tl li{display:grid; grid-template-columns:56px 1fr; gap:10px; font-size:12.5px; padding:7px 0;
  border-bottom:1px solid var(--line2); color:#DFD4C7;}
.tl li:last-child{border-bottom:0;}
.tl li span{font:10.5px var(--mono); color:var(--gold);}
.tl li b{color:var(--parchment);}
.tl li s{color:var(--dim);}
.fin{background:var(--surface2); border-left:2px solid var(--gold); padding:11px 13px; font-size:12.5px; color:#DFD4C7;}
.fin b{color:var(--gold);}

/* ---------- tablas ---------- */
.tblwrap{overflow-x:auto; margin:14px 0;}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:460px;}
th,td{text-align:left; padding:8px 11px; border-bottom:1px solid var(--line2);}
th{font:9.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); white-space:nowrap;}
td b{color:var(--parchment);} td{color:#DFD4C7;}
tr:last-child td{border-bottom:0;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:20px 0 40px; font:11px var(--mono); color:var(--dim);}
.foot-in{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center;}
.reset{background:none; border:1px solid var(--line); color:var(--dim); font:9.5px var(--mono);
  letter-spacing:.15em; text-transform:uppercase; padding:7px 12px; cursor:pointer;}
.reset:hover{border-color:var(--bad); color:var(--bad);}

@media (max-width:600px){
  .hd{padding:22px 0 18px;} .wrap{padding:0 14px;} .nav-in{padding:0 14px;}
  .stage-lv{display:none;} .tab{font-size:17px; padding:12px 12px;}
  .use,.avoid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto;}}