:root{
  --violet:#7159ff; --violet-deep:#4930c9; --yellow:#e6b400; --green:#2f9d63; --coral:#e6754a;
  --ink:#1c1730; --ink-dim:#5d5875; --ink-faint:#8b8499;
  --paper:#faf9f6; --paper-2:#f2efe8; --line:rgba(20,15,46,.10); --line-bright:rgba(20,15,46,.18);
  --ease:cubic-bezier(.16,.8,.24,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
::selection{ background:var(--yellow); color:#1c1730; }
h1,h2,h3{ font-family:'Bebas Neue','Space Grotesk',sans-serif; font-weight:400; letter-spacing:.01em; margin:0; }

.container{ max-width:760px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2rem); }

/* top bar */
.topbar{
  border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20;
  backdrop-filter:blur(8px); background:rgba(250,249,246,.9);
}
.topbar-inner{ max-width:760px; margin:0 auto; padding:.9rem clamp(1.25rem,4vw,2rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar a.back{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-dim); display:flex; align-items:center; gap:.5em;
}
.topbar a.back:hover{ color:var(--violet); }
.topbar .brand{ font-family:'Bebas Neue'; font-size:1.2rem; text-decoration:none; color:var(--ink); letter-spacing:.03em; }

/* article header */
.art-head{ padding:clamp(2.5rem,7vw,4rem) 0 2rem; }
.art-badge{
  display:inline-flex; align-items:center; gap:.5em; font-family:'JetBrains Mono',monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.4rem .85rem; border-radius:999px; font-weight:600;
  color:#1c1730; margin-bottom:1.4rem;
}
.art-num{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-faint); letter-spacing:.08em; margin-bottom:.6rem; }
.art-head h1{ font-size:clamp(2.4rem,7vw,3.6rem); line-height:1; margin-bottom:.7rem; }
.art-head .subtitle{ font-size:1.15rem; color:var(--ink-dim); line-height:1.5; max-width:600px; }
.art-meta{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ink-faint); }
.art-meta span{ display:flex; align-items:center; gap:.4em; }

.art-cover{
  aspect-ratio:16/9; border-radius:16px; margin:0 0 2.4rem; position:relative; overflow:hidden;
  background:linear-gradient(155deg, var(--violet-deep), #221a55 60%, #0d0a1e);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  border:1px solid var(--line);
}
.art-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.art-cover span{ position:relative; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:#b3a9d6; letter-spacing:.05em; }

/* body */
.art-body{ font-size:1.08rem; line-height:1.85; padding-bottom:1rem; }
.art-body p{ margin:0 0 1.3rem; }
.art-body strong{ color:var(--ink); font-weight:700; }
.art-body em{ font-style:italic; }

.callout{
  margin:2.4rem 0; padding:1.6rem 1.8rem; border-radius:14px; background:var(--paper-2);
  border-left:4px solid var(--yellow); position:relative;
}
.callout .callout-label{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:#a67c00; margin-bottom:.6rem; display:block; font-weight:700;
}
.callout p{ margin:0; color:var(--ink); font-size:.98rem; line-height:1.7; }

.comentario{
  margin:2.8rem 0; padding:2rem 2rem 2rem 1.8rem; border-radius:16px; background:#1c1730; color:#f2efe8;
  border-left:4px solid var(--violet-bright, #9c86ff);
}
.comentario .c-label{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:#ffd93d; margin-bottom:.9rem; display:flex; align-items:center; gap:.6em; font-weight:700;
}
.comentario p{ margin:0 0 1rem; font-size:1.02rem; line-height:1.75; color:#e5e1f5; }
.comentario p:last-child{ margin-bottom:0; }

.fuentes{ margin:2.8rem 0; }
.fuentes summary{
  cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-dim); padding:.9rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.fuentes summary::-webkit-details-marker{ display:none; }
.fuentes summary::after{ content:'+'; font-size:1.1rem; color:var(--ink-faint); }
.fuentes[open] summary::after{ content:'\2212'; }
.fuentes ol{ padding-left:1.2rem; margin:1.2rem 0 0; }
.fuentes li{ margin-bottom:.9rem; font-size:.88rem; line-height:1.6; color:var(--ink-dim); }
.fuentes li a{ color:var(--violet); text-decoration:underline; text-decoration-color:rgba(113,89,255,.35); word-break:break-word; }
.fuentes li a:hover{ color:var(--violet-deep); }

.related{ margin:3rem 0 1rem; }
.related h3{ font-size:1.5rem; margin-bottom:1.2rem; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.related-card{
  display:block; text-decoration:none; padding:1.1rem 1.2rem; border-radius:12px; border:1px solid var(--line);
  transition:border-color .2s, transform .2s;
}
.related-card:hover{ border-color:var(--violet); transform:translateY(-2px); }
.related-card .r-cat{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.4rem; display:block; }
.related-card .r-title{ font-family:'Space Grotesk'; font-weight:700; font-size:.98rem; color:var(--ink); }

footer.art-footer{
  border-top:1px solid var(--line); margin-top:3rem; padding:2.4rem clamp(1.25rem,4vw,2rem) 3rem;
  text-align:center;
}
footer.art-footer a.btn-lib{
  display:inline-flex; align-items:center; gap:.6em; text-decoration:none; font-family:'JetBrains Mono',monospace;
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:#1c1730; background:var(--yellow);
  padding:.85rem 1.6rem; border-radius:999px; font-weight:700; transition:transform .2s, box-shadow .2s;
}
footer.art-footer a.btn-lib:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,0,0,.3); }
footer.art-footer p{ margin:1.4rem 0 0; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--ink-faint); }
footer.art-footer p a{ color:var(--ink-dim); text-decoration:underline; }