:root{
  --navy:#1B2A4A;
  --navy-light:#2C4270;
  --paper:#EEF1EC;
  --paper-card:#F7F8F5;
  --paper-dark:#E1E5DC;
  --burgundy:#7A2331;
  --burgundy-light:#9C3244;
  --gold:#B8862E;
  --ink:#23262B;
  --ink-soft:#565B54;
  --success:#3F6B4F;
  --error:#A23B3B;
  --line:#CBD0C4;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px 80px;}
h1,h2,h3{font-family:'Source Serif 4',Georgia,serif;color:var(--navy);margin:0;}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.03em;}
a{color:inherit;text-decoration:none;}

/* ---------- TOP NAV (site-wide) ---------- */
.topnav{
  background:var(--navy); color:#fff; padding:14px 20px;
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.04em;
}
.topnav-inner{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
.brand{font-weight:700; text-transform:uppercase; display:flex; align-items:center; gap:8px;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--burgundy-light);}
.crumbs{color:#B9C2D8; font-size:12.5px;}
.crumbs a:hover{color:#fff; text-decoration:underline;}
.crumbs .sep{margin:0 6px; color:#5A6B92;}

/* ---------- HERO / EXPEDIENTE COVER ---------- */
.cover{
  background:var(--navy); color:#fff; padding:44px 20px 60px; position:relative; overflow:hidden;
}
.cover::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px);
}
.cover-inner{max-width:1040px;margin:0 auto;position:relative;}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#C9D2E6; margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow .sep{width:22px;height:1px;background:#5A6B92;}
.cover h1{color:#fff; font-size:2.3rem; line-height:1.15; max-width:680px; font-weight:700;}
.cover p.sub{color:#B9C2D8; font-size:1.02rem; margin-top:14px; max-width:600px;}

.stamp{
  position:absolute; top:26px; right:8px; width:118px; height:118px;
  border:2.5px solid var(--burgundy-light); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transform:rotate(-9deg);
  color:var(--burgundy-light); font-family:'JetBrains Mono',monospace;
  text-align:center; font-size:10.5px; font-weight:700; letter-spacing:.04em; line-height:1.35;
  background:rgba(122,35,49,0.06);
}
.stamp::before{content:""; position:absolute; inset:6px; border:1px solid var(--burgundy-light); border-radius:50%;}
.stamp.small{width:74px;height:74px;font-size:8.5px;top:18px;right:6px;}

/* ---------- CARD GRID ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:-30px; position:relative; z-index:2;}
.card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px;
  box-shadow:0 4px 16px rgba(27,42,74,.06);
  display:flex; flex-direction:column; gap:10px;
  transition:.15s;
}
a.card:hover{border-color:var(--navy); box-shadow:0 8px 22px rgba(27,42,74,.11); transform:translateY(-2px);}
.card.locked{opacity:.58; filter:grayscale(.3);}
.card-tag{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:700;}
.card h2, .card h3{font-size:1.2rem;}
.card p{margin:0; color:var(--ink-soft); font-size:.92rem;}
.card-meta{display:flex; gap:14px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft); margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}
.badge{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; font-weight:700; padding:3px 9px; border-radius:20px;
}
.badge.ok{background:#E7F1EA; color:var(--success);}
.badge.soon{background:#F0EDE6; color:var(--ink-soft);}
.progress{height:6px; border-radius:4px; background:var(--paper-dark); overflow:hidden; margin-top:2px;}
.progress > div{height:100%; background:var(--gold);}

/* ---------- TEMA LIST ROWS ---------- */
.temarow{
  display:flex; align-items:center; gap:16px; padding:16px 18px;
  background:#fff; border:1px solid var(--line); border-radius:9px; margin-bottom:10px;
}
.temarow.active{border-color:var(--navy);}
.temarow.locked{opacity:.55;}
.temarow .tnum{font-family:'JetBrains Mono',monospace; color:var(--gold); font-weight:700; font-size:13px; min-width:26px;}
.temarow .ttitle{flex:1; font-weight:600;}
.temarow .tsub{color:var(--ink-soft); font-size:.85rem; margin-top:2px; font-weight:400;}

/* ---------- SECTION HEADS ---------- */
.section-lead{padding:34px 4px 10px;}
.section-lead h2{font-size:1.4rem;}
.section-lead p{color:var(--ink-soft); margin-top:6px;}

/* ---------- TABS / PANEL (tema page) ---------- */
.tabbar{display:flex; gap:6px; margin:-28px auto 0; max-width:1040px; padding:0 20px; position:relative; z-index:2;}
.tab{
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  background:var(--paper-card); color:var(--ink-soft); border:1px solid var(--line); border-bottom:none;
  padding:14px 22px 12px; border-radius:8px 8px 0 0; cursor:pointer; font-weight:600; transition:.15s;
}
.tab.active{background:#fff; color:var(--navy); box-shadow:0 -2px 10px rgba(0,0,0,.05);}
.tab:not(.active):hover{color:var(--navy);}
.panel{background:#fff; border:1px solid var(--line); border-radius:0 8px 8px 8px; padding:8px 0 30px;}
.tabwrap{max-width:1040px; margin:0 auto; padding:0 20px;}

/* ---------- RESUMEN / FOLIOS ---------- */
.folio{border-bottom:1px solid var(--line);}
.folio:last-child{border-bottom:none;}
.folio-head{display:flex; align-items:baseline; gap:16px; padding:22px 4px; cursor:pointer; user-select:none;}
.folio-num{font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:13px; font-weight:700; min-width:34px;}
.folio-head h2{font-size:1.28rem; flex:1;}
.folio-toggle{font-family:'JetBrains Mono',monospace; color:var(--ink-soft); font-size:13px;}
.folio-body{padding:0 4px 26px 50px; display:none;}
.folio.open .folio-body{display:block;}
.folio.open .folio-toggle{color:var(--burgundy);}
.folio-body p{margin:0 0 14px; color:var(--ink);}
.folio-body ul{margin:0 0 14px; padding-left:20px;}
.folio-body li{margin-bottom:8px;}
.art-tag{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--navy); font-weight:700; background:var(--paper); padding:1px 7px; border-radius:4px; margin-right:6px;}

.box{border-left:3px solid var(--navy); background:var(--paper); padding:14px 18px; margin:16px 0; border-radius:0 6px 6px 0;}
.box.trampa{border-left-color:var(--burgundy);}
.box.recuerda{border-left-color:var(--gold);}
.box-label{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.box.trampa .box-label{color:var(--burgundy);}
.box.recuerda .box-label{color:var(--gold);}

table.mini{width:100%; border-collapse:collapse; margin:14px 0; font-size:.93rem;}
table.mini th{background:var(--navy); color:#fff; text-align:left; padding:9px 12px; font-weight:600;}
table.mini td{padding:9px 12px; border-bottom:1px solid var(--line);}
table.mini tr:nth-child(even) td{background:var(--paper);}

/* ---------- TEST ---------- */
.test-head{padding:26px 4px 6px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px;}
.test-head h2{font-size:1.4rem;}
.test-meta{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink-soft);}
.btn{
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.03em;
  background:var(--burgundy); color:#fff; border:none; border-radius:6px; padding:12px 20px; cursor:pointer; text-transform:uppercase;
}
.btn:hover{background:var(--burgundy-light);}
.btn.ghost{background:none; border:1.5px solid var(--navy); color:var(--navy);}

.qcard{padding:20px 4px; border-bottom:1px solid var(--line);}
.qtext{font-weight:600; margin-bottom:12px; font-size:1.02rem;}
.opt{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:7px; margin-bottom:8px; cursor:pointer; transition:.12s;}
.opt:hover{border-color:var(--navy);}
.bubble{width:20px; height:20px; border-radius:50%; border:2px solid var(--ink-soft); flex-shrink:0;}
.opt.correct{border-color:var(--success); background:#EEF5F0;}
.opt.correct .bubble{border-color:var(--success); background:var(--success);}
.opt.wrong{border-color:var(--error); background:#FBEFEF;}
.opt.wrong .bubble{border-color:var(--error); background:var(--error);}
.opt.disabled{cursor:default;}
.explain{font-size:.9rem; color:var(--ink-soft); margin-top:8px; padding:10px 14px; background:var(--paper); border-radius:6px; display:none;}
.explain.show{display:block;}
.scorewrap{display:flex; justify-content:center; padding:34px 0 10px;}
.score-stamp{
  width:150px; height:150px; border-radius:50%; border:3px solid var(--gold);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(-6deg); color:var(--navy); font-family:'JetBrains Mono',monospace; position:relative;
}
.score-stamp::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold);border-radius:50%;}
.score-stamp .n{font-size:2rem; font-weight:700;}
.score-stamp .l{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;}

footer{text-align:center; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft); padding:30px 20px;}

@media (max-width:640px){
  .cover h1{font-size:1.7rem;}
  .stamp{width:90px;height:90px;font-size:9px;top:16px;right:4px;}
  .folio-body{padding-left:20px;}
  .grid{grid-template-columns:1fr;}
}