:root{
  --bg:#0e1116;
  --panel:#1b2230;
  --panel2:#222a3a;
  --ink:#e6e8ec;
  --ink-soft:#cfd3da;
  --muted:#8a93a3;
  --line:#3a4150;
  --border:#2a3142;
  --border-strong:#3b4458;
  --blue:#5a93e0;
  --green:#5fa86d;
  --yellow:#caa83a;
  --pink:#d35c8b;
  --purple:#9a7ee0;
  --orange:#d6803c;
  --red:#d35a5a;
}
*{box-sizing:border-box}
body{
  margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
a{color:var(--blue)}
.wrap{max-width:1100px;margin:0 auto;padding:30px 22px 80px}

/* --- Top bar --- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:24px;font-size:13px;color:var(--muted);
}
.topbar a{color:var(--blue);text-decoration:none}
.topbar a:hover{text-decoration:underline}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;background:var(--panel);border:1px solid var(--border);padding:3px 9px;border-radius:99px;font-size:11.5px}
.pill.cs{border-color:#2a4a6a;color:#a8c8f0}
.pill.math{border-color:#5a3a8a;color:#c8b5f0}
.pill.prob{border-color:#2a6a3a;color:#9adfa3}
.pill.fin{border-color:#7a3a4a;color:#f0a3c1}
.pill.ml{border-color:#7a6a2a;color:#f0d97a}

/* --- Hero --- */
.hero{
  background:linear-gradient(135deg,#152437,#241a36 70%);
  border:1px solid var(--border-strong);border-radius:14px;
  padding:30px 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;
}
.hero.math-bg{background:linear-gradient(135deg,#241a36,#1f1430 70%)}
.hero.prob-bg{background:linear-gradient(135deg,#15301f,#0f2418 70%)}
.hero.fin-bg{background:linear-gradient(135deg,#3a1a26,#2a1018 70%)}
.hero.ml-bg{background:linear-gradient(135deg,#3b3414,#2a240c 70%)}
.hero h1{margin:0 0 6px;font-size:30px;letter-spacing:.2px}
.hero .lead{font-size:15.5px;color:var(--ink-soft);margin:0}
.hero .tag{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:1.2px;margin-bottom:10px;display:inline-block}
.hero .tag.math{color:#c8b5f0}
.hero .tag.prob{color:#9adfa3}
.hero .tag.fin{color:#f0a3c1}
.hero .tag.ml{color:#f0d97a}
.hero-art{position:relative;height:230px}

h2{font-size:22px;margin:42px 0 14px;display:flex;align-items:center;gap:12px}
h2 .num{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--border-strong);border-radius:8px;font-size:14px;color:var(--blue);font-weight:700;
}
p.lead{font-size:15px;color:var(--ink-soft)}

/* --- Cards / boxes --- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:800px){.grid2,.grid3,.grid4,.grid6{grid-template-columns:1fr 1fr}}

/* --- Analogía: cards comparativas --- */
.vs{display:grid;grid-template-columns:1fr 60px 1fr;gap:14px;align-items:center;margin:20px 0}
.vs .vs-arrow{font-size:30px;color:var(--muted);text-align:center}
.vs .bad{border-color:#5a2424;background:linear-gradient(180deg,#2a1414,#1f1010)}
.vs .good{border-color:#1f4a2a;background:linear-gradient(180deg,#142a1d,#101f14)}
.vs h3{margin:0 0 8px;font-size:16px;display:flex;align-items:center;gap:8px}
.vs ul{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-soft)}
.vs li{margin-bottom:4px}

/* --- Pipeline (los 6 pasos del quant) --- */
.pipe{display:grid;gap:0;margin:20px 0}
.pipe.p4{grid-template-columns:repeat(4,1fr)}
.pipe.p5{grid-template-columns:repeat(5,1fr)}
.pipe.p6{grid-template-columns:repeat(6,1fr)}
.pipe-step{
  background:var(--panel);border:1px solid var(--border);padding:14px 12px;text-align:center;
  position:relative;
}
.pipe-step:not(:last-child)::after{
  content:'';position:absolute;right:-9px;top:50%;width:0;height:0;
  border-left:9px solid var(--border);border-top:9px solid transparent;border-bottom:9px solid transparent;
  z-index:2;
}
.pipe-step .ico{font-size:28px;margin-bottom:6px}
.pipe-step .lbl{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:1px;margin-bottom:4px}
.pipe-step .ttl{font-size:13.5px;color:var(--ink);font-weight:600}
.pipe-step.s1{border-color:#2a4a6a}
.pipe-step.s2{border-color:#5a6a2a}
.pipe-step.s3{border-color:#6a4a2a}
.pipe-step.s4{border-color:#5a2a6a}
.pipe-step.s5{border-color:#2a6a4a}
.pipe-step.s6{border-color:#6a2a4a}

/* --- Tools cards --- */
.tool{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;
  display:flex;gap:12px;align-items:flex-start;
}
.tool .ico{
  width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:22px;flex:0 0 auto;
}
.tool h4{margin:0 0 4px;font-size:15px}
.tool p{margin:0;font-size:13px;color:var(--ink-soft)}
.tool.python .ico{background:#1f3a5a;color:#a8c8f0}
.tool.git .ico{background:#5a1f24;color:#f0a3a3}
.tool.cli .ico{background:#3a3a14;color:#f0d97a}
.tool.notebook .ico{background:#3a1f3a;color:#c8a3e0}
.tool.blue .ico{background:#1f3a5a;color:#a8c8f0}
.tool.purple .ico{background:#3a1f5a;color:#c8b5f0}
.tool.green .ico{background:#1f5a2a;color:#9adfa3}
.tool.pink .ico{background:#5a1f3a;color:#f0a3c1}
.tool.yellow .ico{background:#5a4a1f;color:#f0d97a}

/* --- Caso práctico flow --- */
.case{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:14px}
.case h3{margin:0 0 12px;font-size:17px;color:var(--yellow)}
.case .quote{
  background:#0a0d12;border-left:3px solid var(--yellow);padding:8px 12px;
  border-radius:0 6px 6px 0;font-style:italic;font-size:14px;color:var(--ink-soft);margin-bottom:14px;
}

/* --- Día del quant timeline --- */
.day{position:relative;padding:14px 0}
.day-line{
  position:absolute;left:18px;top:24px;bottom:24px;width:2px;background:var(--border-strong);
}
.day-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;position:relative}
.day-time{
  width:38px;height:38px;background:var(--panel);border:2px solid var(--border-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;z-index:2;
}
.day-content{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 14px}
.day-content h5{margin:0 0 4px;font-size:14px;color:var(--blue)}
.day-content p{margin:0;font-size:13px;color:var(--ink-soft)}

/* --- TL;DR --- */
.tldr{
  background:linear-gradient(135deg,#15301f,#1f4a2a);
  border:1px solid var(--green);border-radius:12px;padding:18px 20px;margin-top:30px;
}
.tldr h3{margin:0 0 8px;font-size:16px;color:#9adfa3}
.tldr ul{margin:6px 0 0;padding-left:22px;font-size:14px;line-height:1.6}
.tldr b{color:#9adfa3}

/* --- Volver button --- */
.back-btn{
  display:inline-block;padding:10px 18px;background:var(--panel2);
  border:1px solid var(--border-strong);border-radius:8px;color:var(--ink);text-decoration:none;
}
.back-btn:hover{background:#2d3650}

/* --- SVG colors --- */
.svg-stroke-blue{stroke:var(--blue)}
.svg-fill-blue{fill:var(--blue)}
.svg-stroke-green{stroke:var(--green)}
.svg-fill-green{fill:var(--green)}
.svg-text{fill:var(--ink);font-family:inherit;font-size:12px}
.svg-text-soft{fill:var(--ink-soft);font-family:inherit;font-size:11px}
.svg-muted{fill:var(--muted);font-family:inherit;font-size:11px}
.code{font-family:monospace;font-size:11px;fill:#a8c8f0}
.code-key{font-family:monospace;font-size:11px;fill:#9adfa3}
.code-num{font-family:monospace;font-size:11px;fill:#f0d97a}