:root{
  --ciruela:#17102A;--iris:#3B1E6B;--lavanda:#C4B5FD;--marfil:#F6F3EE;--marfil-2:#ECE8E1;
  --muted:#6B6480;--linea:rgba(23,16,42,.12);--linea-osc:rgba(246,243,238,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,sans-serif;font-size:18px;line-height:1.7;color:var(--ciruela);background:var(--marfil);-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo{font-family:'Sora',sans-serif;letter-spacing:-.03em;line-height:1.12}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
a{color:var(--iris);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.nav{max-width:1160px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:-.055em;color:var(--ciruela);display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .g{font-family:'Sora';font-weight:400;font-size:.6rem;letter-spacing:.46em;color:var(--muted);border-left:1px solid var(--linea);padding-left:10px;transform:translateY(1px)}
.back{font-weight:600;font-size:.92rem}

/* Hero del artículo */
.art-hero{background:var(--ciruela);color:var(--marfil);padding:80px 0 70px;position:relative;overflow:hidden}
.art-hero::after{content:"";position:absolute;right:-70px;top:-50px;width:300px;height:300px;border-radius:50%;border:3px solid var(--lavanda);opacity:.22}
.art-hero::before{content:"";position:absolute;right:90px;bottom:-100px;width:200px;height:200px;border-radius:50%;background:var(--iris);opacity:.55;filter:blur(2px)}
.art-hero .wrap{position:relative;z-index:2}
.art-hero .cat{display:inline-block;background:var(--iris);color:var(--marfil);padding:5px 14px;border-radius:20px;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}
.art-hero h1{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;max-width:20ch;line-height:1.02;letter-spacing:-.03em}
.art-hero .meta{margin-top:22px;color:rgba(246,243,238,.6);font-size:.92rem;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

/* Foto banner del artículo */
.art-photo-wrap{max-width:900px;margin:-52px auto 0;padding:0 24px;position:relative;z-index:3}
.art-photo-wrap img{width:100%;border-radius:16px;display:block;box-shadow:0 34px 66px -34px rgba(23,16,42,.55);aspect-ratio:16/7.5;object-fit:cover}

/* Cuerpo */
article{padding:44px 0 40px}
article p{margin:0 0 22px}
article h2{font-size:1.7rem;font-weight:700;margin:44px 0 16px;color:var(--ciruela)}
article h3{font-size:1.25rem;font-weight:700;margin:30px 0 12px}
article ul,article ol{margin:0 0 22px;padding-left:22px}
article li{margin-bottom:10px}
article strong{color:var(--ciruela)}
.lead{font-size:1.22rem;color:#463f5c;margin-bottom:30px}
blockquote{border-left:4px solid var(--lavanda);background:var(--marfil-2);border-radius:0 10px 10px 0;padding:20px 24px;margin:30px 0;font-family:'Sora';font-weight:600;font-size:1.2rem;color:var(--iris)}
.callout{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:26px 28px;margin:30px 0}
.callout .mono{color:var(--iris);display:block;margin-bottom:8px}

/* CTA final */
.art-cta{background:var(--iris);color:var(--marfil);border-radius:18px;padding:40px;text-align:center;margin:50px 0 10px}
.art-cta h3{font-size:1.7rem;font-weight:800;margin-bottom:10px;color:#fff}
.art-cta p{color:rgba(246,243,238,.8);margin-bottom:24px}
.btn{display:inline-block;background:var(--lavanda);color:var(--ciruela);padding:13px 28px;border-radius:8px;font-weight:600;font-family:'Sora';transition:transform .15s}
.btn:hover{transform:translateY(-2px);text-decoration:none}

/* Otros artículos */
.more-posts{background:var(--marfil-2);padding:56px 0}
.more-posts h4{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--iris);margin-bottom:20px}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mp{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:22px 24px}
.mp .cat{font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--iris)}
.mp h5{font-family:'Sora';font-size:1.08rem;font-weight:700;margin:8px 0 0;line-height:1.3}

/* Footer */
footer{background:var(--ciruela);color:rgba(246,243,238,.55);padding:40px 0;font-size:.88rem}
footer .wrap{max-width:1160px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
@media(max-width:620px){.mp-grid{grid-template-columns:1fr}.art-cta{padding:30px 22px}}