/* Distrito 11 — estilos de artículo del blog */
.topbar-simple{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--pad-x);background:rgba(28,26,24,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.topbar-simple .brand{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;font-size:1.1rem;}
.topbar-simple .brand .accent{color:var(--clay);}
.article-wrap{width:100%;max-width:760px;margin-inline:auto;padding-inline:var(--pad-x);}
.article-head{padding-top:clamp(4rem,10vh,6rem);padding-bottom:2.5rem;}
.article-head .kicker{margin-bottom:1.2rem;display:inline-block;}
.article-title{font-family:var(--display);text-transform:uppercase;line-height:1.08;letter-spacing:.02em;font-size:clamp(2.1rem,1.4rem + 3.2vw,3.8rem);margin:0 0 1.4rem;}
.article-meta{display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--muted);font-size:.95rem;font-weight:600;letter-spacing:.02em;}
.article-meta .accent{color:var(--clay);}
.article-body{padding-bottom:5rem;font-size:clamp(1.08rem,1.02rem + .3vw,1.22rem);color:rgba(245,240,232,.9);}
.article-body h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin:2.8rem 0 1rem;line-height:1.16;}
.article-body h3{font-weight:700;font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem);margin:2rem 0 .7rem;color:var(--ivory);}
.article-body p{margin:0 0 1.2rem;line-height:1.7;}
.article-body ul,.article-body ol{margin:0 0 1.4rem;padding-left:0;list-style:none;}
.article-body li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;line-height:1.6;}
.article-body li::before{content:"";position:absolute;left:0;top:.6em;width:.5em;height:.5em;background:var(--clay);}
.article-body strong{color:var(--ivory);}
.article-body a{color:var(--clay-soft);text-decoration:underline;text-underline-offset:3px;}
.article-body .pull{border-left:3px solid var(--clay);padding:.4rem 0 .4rem 1.6rem;margin:2.2rem 0;font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem);line-height:1.22;color:var(--ivory);}
.article-body blockquote{border-left:3px solid var(--clay);padding-left:1.6rem;margin:2rem 0;font-style:italic;color:var(--ivory);}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.98rem;}
.article-body th,.article-body td{border:1px solid var(--line);padding:.8rem 1rem;text-align:left;}
.article-body th{background:rgba(224,112,58,.12);color:var(--ivory);font-weight:700;}
.faq{border-top:1px solid var(--line);margin-top:3rem;padding-top:2rem;}
.faq h2{margin-top:0;}
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0;}
.faq summary{cursor:pointer;font-weight:700;color:var(--ivory);font-size:1.1rem;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--clay);font-size:1.4rem;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details p{margin:.9rem 0 0;color:rgba(245,240,232,.82);}
.article-cta{border:1px solid var(--line);border-radius:20px;padding:2.4rem;margin:3.5rem 0 1rem;text-align:center;background:linear-gradient(180deg,rgba(224,112,58,.08),rgba(224,112,58,.02));}
.article-cta h2{margin:0 0 .8rem;}
.article-cta p{color:var(--gray);margin:0 0 1.6rem;}
.back-link{display:inline-block;margin-bottom:2rem;color:var(--muted);font-weight:600;font-size:.95rem;}
.back-link:hover{color:var(--clay);}

/* Los botones dentro del articulo NO son enlaces de texto: el color y el
   subrayado de .article-body a no deben pisarlos. */
.article-body .btn, .article-cta .btn { text-decoration:none; }
.article-body .btn-primary, .article-cta .btn-primary { color:var(--charcoal); }
.article-body .btn-ghost, .article-cta .btn-ghost { color:var(--ivory); }