:root {
  --bg: #05010d;
  --panel: rgba(9, 4, 22, 0.82);
  --ink: #e8e2f5;
  --muted: #a89cc8;
  --pink: #ff2bd6;
  --purple: #7c5cff;
  --cyan: #25d9ff;
  --border: rgba(124, 92, 255, 0.35);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
}
::selection { background: rgba(255,43,214,.45); color:#fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

#bg-gl { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
.site { position:relative; z-index:1; max-width: 1080px; margin: 0 auto; padding: 0 1.4rem 4rem; }

/* ---------- header ---------- */
header.site-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding: 1.6rem 0 1rem; flex-wrap:wrap;
}
.brand {
  font-family:'Audiowide', sans-serif;
  font-size: 1.7rem; text-decoration:none; letter-spacing:.06em;
  background: linear-gradient(180deg,
    #8bacf7 0%, #dfe7fb 12%, #ffffff 18%, #b8c4de 30%, #ffffff 38%,
    #6a4d8f 44%, #6a4d8f 47%, #ffffff 52%,
    #f3a8dd 58%, #c76db4 68%, #ffb8e8 76%, #f0c6f1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 9px rgba(78,70,188,.45)) drop-shadow(0 3px 10px rgba(41,191,253,.25));
}
nav a {
  color: var(--muted); text-decoration:none; margin-left:1.4rem;
  font-size:.95rem; letter-spacing:.14em; text-transform:uppercase;
  transition: color .18s ease;
}
nav a:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(37,217,255,.6); }

/* ---------- hero ---------- */
.hero { text-align:center; padding: 4.5rem 0 3.5rem; }
.hero h1 {
  font-family:'Audiowide', sans-serif;
  font-size: clamp(3rem, 10vw, 6.5rem);
  letter-spacing:.05em;
  /* capa 1: shine que barre (se anima) | capa 2: cromo base */
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 56%) no-repeat,
    linear-gradient(180deg,
    #8bacf7 0%, #dfe7fb 12%,
    #ffffff 18%, #b8c4de 30%,
    #ffffff 38%,
    #6a4d8f 44%, #6a4d8f 47%,
    #ffffff 52%,
    #f3a8dd 58%, #c76db4 68%,
    #ffb8e8 76%, #f0c6f1 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: -125% 0, 0 0;
  animation: chrome-shine 10s ease-in-out infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 20px rgba(78,70,188,.40)) drop-shadow(0 12px 26px rgba(41,191,253,.22));
  margin-bottom: .5rem;
}
@keyframes chrome-shine {
  0%   { background-position: -125% 0, 0 0; }
  45%  { background-position: 225% 0, 0 0; }
  100% { background-position: 225% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero h1 { animation:none; }
}
/* reflejo especular bajo el título (como en la referencia) */
@supports (-webkit-box-reflect: below 0) {
  .hero h1 {
    -webkit-box-reflect: below -0.28em linear-gradient(transparent 62%, rgba(160,200,255,.10) 85%, rgba(41,191,253,.22));
  }
}
.cards {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.3rem; margin-top: 1rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.3rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column; gap:.55rem;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
  box-shadow: 0 0 26px rgba(255,43,214,.22), inset 0 0 18px rgba(255,43,214,.05);
}
.card h2 { font-size:1.22rem; line-height:1.35; }
.card h2 a { color:#fff; text-decoration:none; }
.card h2 a:hover { color: var(--pink); text-shadow: 0 0 10px rgba(255,43,214,.55); }
.card p { color:var(--muted); font-size:.95rem; flex:1; }
.meta {
  font-size:.8rem; color:var(--cyan); letter-spacing:.12em;
  display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;
}
.meta time { color:var(--cyan); }

.tags { display:flex; gap:.45rem; flex-wrap:wrap; }
.tag {
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--purple); text-decoration:none;
  border:1px solid rgba(124,92,255,.4); border-radius:999px; padding:.18rem .7rem;
  transition: all .18s ease;
}
.tag:hover { color:#fff; border-color:var(--pink); background:rgba(255,43,214,.12); text-shadow:0 0 6px rgba(255,43,214,.6); }

/* ---------- listado / sección ---------- */
.section-title {
  font-family:'Audiowide', sans-serif; font-size:1.5rem; margin:2.2rem 0 .4rem;
  color:#fff; text-shadow: 0 0 14px rgba(124,92,255,.55);
}
.section-title .count { color:var(--purple); font-size:1rem; }

/* ---------- artículo ---------- */
article.post {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: clamp(1.6rem, 4vw, 3rem);
  margin-top: 1.6rem;
}
article.post h1 {
  font-family:'Audiowide', sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height:1.25; color:#fff;
  text-shadow: 0 0 16px rgba(255,43,214,.35);
  margin-bottom: .4rem;
}
article.post .meta { margin-bottom: 1.8rem; }
article.post h2 { color:var(--pink); margin:2rem 0 .7rem; font-size:1.35rem; text-shadow:0 0 10px rgba(255,43,214,.4); }
article.post h3 { color:var(--purple); margin:1.6rem 0 .5rem; font-size:1.12rem; }
article.post p { margin-bottom: 1rem; }
article.post a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
article.post a:hover { color:#fff; text-shadow:0 0 8px rgba(37,217,255,.7); }
article.post ul, article.post ol { margin: 0 0 1rem 1.4rem; }
article.post li { margin-bottom:.35rem; }
article.post img { max-width:100%; border-radius:10px; border:1px solid var(--border); }

article.post code {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.86em;
  background: rgba(124,92,255,.14);
  border:1px solid rgba(124,92,255,.25);
  border-radius:5px; padding:.1em .4em;
}
article.post pre {
  margin: 1.2rem 0; padding: 1.1rem 1.3rem;
  background: rgba(3,1,10,.85);
  border:1px solid var(--border); border-radius:10px;
  overflow-x:auto;
}
article.post pre code { background:none; border:none; padding:0; font-size:.86rem; line-height:1.55; }

article.post blockquote {
  border-left: 3px solid var(--pink);
  background: rgba(255,43,214,.07);
  padding: .8rem 1.2rem; margin: 1.2rem 0;
  border-radius: 0 10px 10px 0;
  color: var(--muted);
}
article.post hr { border:none; border-top:1px dashed rgba(124,92,255,.4); margin:2rem 0; }

.back {
  display:inline-block; margin-top:1.4rem;
  color:var(--muted); text-decoration:none; font-size:.9rem; letter-spacing:.1em;
}
.back:hover { color:var(--cyan); }

/* ---------- flecha volver arriba ---------- */
.to-top {
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:10;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; line-height:1; text-decoration:none;
  color:var(--cyan);
  background: rgba(9,4,22,.85);
  border:1px solid rgba(37,217,255,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 14px rgba(37,217,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.to-top:hover {
  color:#fff;
  border-color:var(--pink);
  transform: translateY(-3px);
  box-shadow: 0 0 22px rgba(255,43,214,.45);
}
@media (max-width:560px){ .to-top{ right:1rem; bottom:1rem; width:42px; height:42px; } }

footer.site-foot {
  margin-top: 4rem; text-align:center;
  color: rgba(168,156,200,.55); font-size:.82rem; letter-spacing:.12em;
}

@media (max-width: 560px){
  header.site-head { justify-content:center; text-align:center; }
  nav a:first-child { margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
  .card, .tag, nav a { transition:none; }
}