:root{
  --bg:#05110b;
  --bg-2:#08180f;
  --fg:#c8f7c5;
  --fg-dim:#6aa66a;
  --accent:#39ff14;
  --accent-2:#00d1ff;
  --accent-3:#ff9a3c; /* Claude-ish warm accent */
  --danger:#ff5370;
  --term:#ffd166;
  --card:rgba(255,255,255,.02);
  --border:rgba(57,255,20,.25);
  --border-2:rgba(255,154,60,.3);
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(ellipse at top, #0b2015 0%, #020806 70%) fixed;
  color:var(--fg);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}

a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
code, code.inline{
  font-family:var(--mono);
  background:rgba(57,255,20,.1);
  color:var(--accent);
  padding:1px 6px;
  border-radius:4px;
  border:1px solid rgba(57,255,20,.2);
  font-size:.92em;
}
.term{color:var(--term);font-weight:700}
.muted{color:var(--fg-dim)}
.small{font-size:13px}
.lead{font-size:17px;max-width:720px;color:var(--fg-dim);margin:0 0 28px}

/* CRT header */
header.crt{
  padding:48px 0 56px;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
header.crt::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px);
  pointer-events:none;
}
.logo{
  color:var(--accent);
  font-size:clamp(7px, 1.6vw, 13px);
  line-height:1.1;
  margin:0 0 20px;
  text-shadow:0 0 12px rgba(57,255,20,.4);
  white-space:pre;
  overflow:auto;
}
.tag{font-size:clamp(18px,3vw,26px);margin:0 0 8px;color:#fff}
.sub{max-width:720px;color:var(--fg-dim);margin:0 0 28px}
.cta{
  display:inline-block;
  padding:14px 28px;
  border:1px solid var(--accent);
  background:rgba(57,255,20,.08);
  color:var(--accent);
  font-weight:700;
  font-size:16px;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:all .15s ease;
  text-decoration:none;
}
.cta:hover{
  background:var(--accent);
  color:#05110b;
  text-decoration:none;
  box-shadow:0 0 24px rgba(57,255,20,.5);
}
.hint{color:var(--fg-dim);font-size:13px;margin-top:14px}

section, footer{padding:56px 0;border-bottom:1px solid var(--border)}
h2{font-size:clamp(20px,2.4vw,28px);margin:0 0 20px;color:#fff;letter-spacing:.02em}
h2::before{content:"$ ";color:var(--accent)}
h3{font-size:16px;color:var(--accent-2);margin:0 0 6px;letter-spacing:.02em}

/* Claude block (hero secundario, tonos warm) */
#claude{
  background:
    radial-gradient(ellipse at top right, rgba(255,154,60,.08) 0%, transparent 60%),
    var(--bg-2);
}
#claude h2{color:#fff}
#claude h2::before{content:"◆ ";color:var(--accent-3)}
.term-block{
  background:#000;
  border:1px solid var(--border-2);
  padding:20px 22px;
  margin:0 0 32px;
  border-radius:2px;
  overflow-x:auto;
  font-size:14px;
  line-height:1.7;
  color:var(--fg);
  box-shadow:0 0 0 1px rgba(255,154,60,.05), 0 0 40px rgba(255,154,60,.05);
  white-space:pre;
}
.term-block .p{color:var(--accent-3);font-weight:700}    /* prompt $ */
.term-block .g{color:var(--accent)}                       /* output marks → ✓ */
.term-block .arg{color:var(--accent-2)}                   /* args/slugs */
.term-block .y{color:var(--term)}
.term-block .c{color:var(--accent-2)}

.skills-title{font-size:14px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.2em;margin:0 0 14px}
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.skill{
  background:var(--card);
  border:1px solid var(--border-2);
  padding:16px 18px;
}
.skill header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.skill header code{background:none;border:none;padding:0;color:var(--accent-3);font-size:13px}
.skill .author{color:var(--fg-dim);font-size:12px}
.skill p{margin:0;color:var(--fg-dim);font-size:13px;line-height:1.5}
@media(max-width:720px){.skills-grid{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.steps li{
  background:var(--card);
  border:1px solid var(--border);
  padding:20px;
  position:relative;
}
.step-n{
  color:var(--accent);
  font-size:12px;
  letter-spacing:.3em;
  display:block;
  margin-bottom:6px;
}
.steps p{margin:0;color:var(--fg-dim)}
@media(max-width:720px){.steps{grid-template-columns:1fr}}

/* quests en 3 columnas */
.quest-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:14px}
.qcol{background:var(--card);border:1px solid var(--border);padding:16px 18px}
.qcol h3{font-size:13px;letter-spacing:.1em;margin:0 0 12px;color:var(--fg);text-transform:uppercase}
.qcol .muted{font-size:12px;letter-spacing:normal;text-transform:none}
.quest-list{list-style:none;padding:0;margin:0}
.quest-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;
  border-bottom:1px dashed rgba(57,255,20,.12);
  gap:12px;
}
.quest-list li:last-child{border-bottom:none}
.quest-list code{background:none;border:none;padding:0;font-size:13px;color:var(--accent)}
.pay{color:var(--term);font-weight:700;font-size:13px;white-space:nowrap}
@media(max-width:880px){.quest-cols{grid-template-columns:1fr}}

/* stack */
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stack-grid > div{
  background:var(--card);
  border:1px solid var(--border);
  padding:20px;
}
.stack-grid ul{margin:0;padding:0 0 0 18px;color:var(--fg-dim)}
.stack-grid li{margin-bottom:6px}
.stack-grid strong{color:var(--fg)}
@media(max-width:720px){.stack-grid{grid-template-columns:1fr}}

/* footer */
footer{background:var(--bg-2);padding:48px 0 72px}
.receipts{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;margin:0 0 18px}
.receipts dt{color:var(--fg-dim);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.receipts dd{margin:0;font-size:14px;word-break:break-all}
@media(max-width:720px){.receipts{grid-template-columns:1fr}.receipts dd{margin-bottom:8px}}

#status.ok{color:var(--accent)}
#status.down{color:var(--danger)}

/* ===== ASCII ART decorations ===== */
.ascii-term, .ascii-flow, .ascii-coin, .ascii-banner {
  font-family: var(--mono);
  white-space: pre;
  line-height: 1.15;
  margin: 0 0 28px;
  overflow-x: auto;
}

.ascii-term {
  color: var(--accent);
  font-size: clamp(9px, 1.1vw, 13px);
  text-shadow: 0 0 8px rgba(57,255,20,.25);
  padding: 4px 0;
  margin: 0 0 28px;
}
.ascii-term .ok { color: var(--accent-2); font-weight: 700; }
.ascii-term .hl { color: var(--term); font-weight: 700; }
.ascii-term .caret {
  display: inline-block;
  color: var(--accent);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.ascii-flow {
  color: var(--accent-2);
  font-size: clamp(9px, 1.1vw, 13px);
  text-shadow: 0 0 10px rgba(0,209,255,.25);
  margin: 0 auto 32px;
  text-align: center;
}

.ascii-coin {
  color: var(--term);
  font-size: clamp(9px, 1.1vw, 13px);
  text-align: center;
  text-shadow: 0 0 12px rgba(255,209,102,.35);
  margin: 0 auto 24px;
}

.ascii-banner {
  color: var(--accent-3);
  font-size: clamp(8px, 1vw, 12px);
  text-align: center;
  text-shadow: 0 0 10px rgba(255,154,60,.35);
  margin: 0 auto 28px;
  letter-spacing: .02em;
}