:root {
  --bg: #05080f;
  --bg-alt: #0a1220;
  --panel: #0e1a2b;
  --border: rgba(56, 225, 255, .18);
  --neon: #38e1ff;
  --neon-soft: rgba(56, 225, 255, .12);
  --magenta: #e05cc8;
  --text: #dbe7f3;
  --muted: #8aa0b8;
}
html { scroll-padding-top: 70px; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--neon); }
.text-muted { color: var(--muted) !important; }
.text-neon { color: var(--neon); }

.navbar { background: rgba(5, 8, 15, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.navbar-brand { color: var(--neon) !important; letter-spacing: .05em; text-shadow: 0 0 10px rgba(56, 225, 255, .6); }
.navbar .nav-link:hover { color: var(--neon) !important; }

.hero { background: linear-gradient(rgba(5, 8, 15, .55), rgba(5, 8, 15, .9)), url("../img/tecnologia-y-desarrollo-software.webp") center / cover no-repeat fixed; color: #fff; padding: 8rem 0 5rem; border-bottom: 1px solid var(--border); }
@media (max-width: 991.98px) { .hero { background-attachment: scroll; } }
.hero img { width: 200px; height: 200px; object-fit: cover; border: 3px solid var(--neon); box-shadow: 0 0 25px rgba(56, 225, 255, .55), 0 0 60px rgba(56, 225, 255, .2); }
.hero h1 { text-shadow: 0 0 18px rgba(56, 225, 255, .55); }
.hero .tagline { color: var(--neon); }

.section-title { color: #fff; font-weight: 700; margin-bottom: 2.5rem; }
.section-title::after { content: ""; display: block; width: 70px; height: 3px; margin: .75rem auto 0; background: linear-gradient(90deg, var(--neon), var(--magenta)); box-shadow: 0 0 10px var(--neon); }
.section-alt { background: var(--bg-alt); }

.stat-box { background: var(--panel); border: 1px solid var(--border); border-radius: .5rem; }
.stat-box .fs-2 { color: var(--neon); text-shadow: 0 0 10px rgba(56, 225, 255, .5); }

.timeline { border-left: 2px solid var(--neon); padding-left: 1.5rem; box-shadow: -6px 0 12px -8px var(--neon); }
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-item::before { content: ""; position: absolute; left: -2.0rem; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--neon); box-shadow: 0 0 10px var(--neon); }
.timeline-item .date { font-size: .875rem; color: var(--magenta); font-weight: 600; letter-spacing: .03em; }
.timeline-item h5 { color: #fff; }
.highlight { background: var(--panel); border-left: 3px solid var(--magenta); }

.card { background: var(--panel); border: 1px solid var(--border) !important; color: var(--text); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 0 22px rgba(56, 225, 255, .25); }
.card-title, .card h6 { color: #fff; }
.card-title i { color: var(--neon); }
.skill-card { border-top: 3px solid var(--neon) !important; }
.badge-skill { background: var(--neon-soft); color: var(--neon); border: 1px solid var(--border); font-weight: 500; margin: 0 .25rem .4rem 0; }

.btn-neon { background: var(--neon); color: #05080f; font-weight: 600; border: 0; box-shadow: 0 0 15px rgba(56, 225, 255, .5); }
.btn-neon:hover { background: #7aeeff; color: #05080f; box-shadow: 0 0 25px rgba(56, 225, 255, .8); }
.btn-outline-neon { color: var(--neon); border: 1px solid var(--neon); }
.btn-outline-neon:hover { background: var(--neon-soft); color: #fff; box-shadow: 0 0 15px rgba(56, 225, 255, .4); }

footer { background: #03050a; border-top: 1px solid var(--border); color: var(--muted); }

.navbar .nav-link.active { color: var(--neon) !important; }

/* ---------- Blog ---------- */
.page-header { background: linear-gradient(rgba(5, 8, 15, .7), rgba(5, 8, 15, .95)), url("../img/tecnologia-y-desarrollo-software.webp") center / cover no-repeat; padding: 7.5rem 0 3rem; border-bottom: 1px solid var(--border); color: #fff; }
.page-header h1 { text-shadow: 0 0 18px rgba(56, 225, 255, .5); }
.page-header .meta { color: var(--muted); }

.post-card { overflow: hidden; }
.post-card .card-img-top { height: 190px; object-fit: cover; border-bottom: 1px solid var(--border); }
.post-card .card-img-placeholder { height: 190px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--neon); background: radial-gradient(circle, rgba(56, 225, 255, .15), transparent 70%); border-bottom: 1px solid var(--border); }
.post-card .card-title a { color: #fff; text-decoration: none; }
.post-card .card-title a:hover { color: var(--neon); }
.post-meta { font-size: .85rem; color: var(--muted); }
.post-meta i { color: var(--magenta); }
.badge-cat { background: rgba(224, 92, 200, .12); color: var(--magenta); border: 1px solid rgba(224, 92, 200, .35); text-decoration: none; font-weight: 500; }
.badge-cat:hover { background: rgba(224, 92, 200, .25); color: #fff; }

.sidebar .card:hover { transform: none; box-shadow: none; }
.sidebar h6 { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--neon) !important; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { padding: .35rem 0; border-bottom: 1px solid rgba(56, 225, 255, .08); }
.sidebar li:last-child { border-bottom: 0; }
.sidebar a { color: var(--text); text-decoration: none; }
.sidebar a:hover { color: var(--neon); }
.form-control { background: var(--bg); border-color: var(--border); color: var(--text); }
.form-control:focus { background: var(--bg); color: #fff; border-color: var(--neon); box-shadow: 0 0 0 .2rem rgba(56, 225, 255, .2); }

.pagination .page-link { background: var(--panel); border-color: var(--border); color: var(--neon); }
.pagination .active .page-link { background: var(--neon); border-color: var(--neon); color: var(--bg); }
.pagination .disabled .page-link { background: var(--panel); color: var(--muted); }

.post-cover { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--border); }
.post-content { font-size: 1.05rem; line-height: 1.75; }
.post-content h2, .post-content h3, .post-content h4 { color: #fff; margin-top: 2rem; }
.post-content img { max-width: 100%; height: auto; border-radius: .4rem; border: 1px solid var(--border); }
.post-content figure { margin: 1.5rem 0; }
.post-content blockquote { border-left: 3px solid var(--magenta); padding-left: 1rem; color: var(--muted); }
.post-content table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: .5rem .75rem; }
.post-content :not(pre) > code { background: var(--neon-soft); color: var(--neon); padding: .1rem .35rem; border-radius: .25rem; }
.post-content pre { position: relative; background: #0b0f19 !important; border: 1px solid var(--border); border-left: 3px solid var(--neon); border-radius: .4rem; padding: 1rem; overflow-x: auto; color: #e6edf3; font-size: .9rem; white-space: pre; }
.post-content pre code.hljs { background: transparent; padding: 0; }
.btn-copiar { position: absolute; top: .4rem; right: .4rem; font-size: .75rem; padding: .15rem .5rem; color: var(--neon); background: var(--panel); border: 1px solid var(--border); border-radius: .25rem; opacity: .7; }
.btn-copiar:hover { opacity: 1; }