:root{
  --bg:#0f1115; --fg:#eaeef6; --muted:#9aa4b2; --brand:#6ae6ff; --card:#151922; --border:#232736;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Arial; color:var(--fg); background:var(--bg)}

.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(15,17,21,.6); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem;
}
.brand{color:var(--fg); font-weight:700; text-decoration:none}
.brand span{color:var(--brand)}
.nav a{color:var(--fg); text-decoration:none; margin:0 .6rem}
.nav a:hover{color:var(--brand)}
#themeToggle{margin-left:.6rem; background:transparent; border:1px solid var(--border); color:var(--fg); padding:.4rem .6rem; border-radius:8px; cursor:pointer}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; padding:4rem 1.2rem 2rem; max-width:1100px; margin:0 auto}
.hero-text h1{font-size:2.4rem; line-height:1.2}
.hero-text h1 span{color:var(--brand)}
.hero-text p{color:var(--muted); max-width:60ch}
.hero-avatar{width:220px; height:220px; border-radius:50%; object-fit:cover; justify-self:center; border:2px solid var(--border)}
.cta{margin-top:1rem}
.btn{display:inline-block; padding:.7rem 1rem; border:1px solid var(--border); border-radius:10px; color:var(--fg); text-decoration:none; margin-right:.6rem; background:transparent}
.btn.primary{background:var(--brand); color:#041014; border-color:transparent; font-weight:600}

.wrap{max-width:1100px; margin:0 auto; padding:2rem 1.2rem}
h2{margin:0 0 1rem 0; font-size:1.6rem}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.card img{width:100%; height:160px; object-fit:cover; background:#0d0f14}
.card-body{padding:1rem}
.card h3{margin:.2rem 0 .4rem}
.card p{color:var(--muted)}
.tags span{background:#1d2330; border:1px solid var(--border); color:var(--fg); padding:.2rem .5rem; border-radius:999px; margin-right:.3rem; font-size:.85rem}
.actions{margin-top:.6rem}
.link{color:var(--brand); text-decoration:none; margin-right:.8rem}

.xp-actions{display:flex; gap:.6rem; margin-bottom:1rem}
details.xp{background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:.8rem; padding:.6rem 1rem}
details.xp > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem}
details.xp > summary::-webkit-details-marker{display:none}
details.xp[open] > summary{color:var(--brand)}
.xp-body{padding:.6rem 0 0 0; color:var(--fg)}
.xp-body .muted{color:var(--muted); font-size:.9rem}
.pill{font-size:.75rem; padding:.1rem .5rem; border:1px solid var(--border); border-radius:999px; color:var(--muted)}

.timeline{list-style:none; padding:0; margin:0}
.timeline li{display:flex; gap:1rem; padding:1rem; background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:.8rem}
.timeline .time{min-width:110px; color:var(--muted)}

.contacto .social a{display:inline-block; margin-right:.8rem; color:var(--brand); text-decoration:none}

.site-footer{border-top:1px solid var(--border); color:var(--muted); text-align:center; padding:1.2rem}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-text p{margin:0 auto}
  .hero-avatar{margin-top:1rem}
}

:root.light{
  --bg:#f7f9fc; --fg:#0e1220; --muted:#485269; --brand:#0ea5e9; --card:#ffffff; --border:#e6eaf3;
}