/* ==========================================================================
   Artículo de blog - Agencia MDI (tema claro). Depende de site-2026 + home-v2
   + theme-light (tokens). Cargar DESPUÉS de esos tres.
   ========================================================================== */

.artwrap{max-width:760px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem);padding-bottom:clamp(3rem,6vw,5rem)}
.artbreadcrumb{font-family:var(--font-display);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe-dim);padding-top:clamp(1.5rem,4vw,2.5rem)}
.artbreadcrumb a{color:var(--taupe)}
.artbreadcrumb a:hover{color:var(--gold)}

.arthead{padding-block:1.4rem clamp(1.8rem,4vw,2.6rem);border-bottom:1px solid var(--line-2);margin-bottom:clamp(2rem,4vw,2.8rem)}
.artcat{font-family:var(--font-display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.arthead h1{font-family:var(--font-display);font-weight:660;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.07;letter-spacing:-.03em;color:var(--ivory);text-wrap:balance;margin-top:1rem}
.artmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--taupe-dim)}
.artmeta b{color:var(--taupe);font-weight:500}

.artlead{font-size:clamp(1.1rem,1.7vw,1.28rem);line-height:1.6;color:var(--ivory);font-weight:500;margin-bottom:2rem}

/* prose */
.artprose{font-size:1.05rem;line-height:1.8;color:var(--taupe)}
.artprose > * + *{margin-top:1.25rem}
.artprose h2{font-family:var(--font-display);font-weight:640;font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.15;letter-spacing:-.02em;color:var(--ivory);margin-top:2.8rem}
.artprose h3{font-family:var(--font-display);font-weight:620;font-size:clamp(1.2rem,2vw,1.45rem);color:var(--ivory);margin-top:2rem}
.artprose strong{color:var(--ivory);font-weight:600}
.artprose a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.artprose ul,.artprose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.artprose ul{list-style:disc}.artprose ol{list-style:decimal}
.artprose blockquote{border-left:3px solid var(--gold);padding-left:1.3rem;font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.4;color:var(--ivory)}

/* callout - key takeaways / tip */
.callout{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:6px;padding:1.4rem 1.6rem;margin-block:2rem}
.callout h4{font-family:var(--font-display);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.callout ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem;margin:0}
.callout li{display:flex;gap:.6rem;color:var(--ivory);font-size:.98rem;line-height:1.5}
.callout li svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:.18rem}

/* message template box */
.msgbox{background:var(--ink-3);border:1px dashed var(--line);border-radius:6px;padding:1.5rem;margin-block:1.5rem;font-size:.99rem;line-height:1.7;color:var(--taupe)}
.msgbox .lbl{font-family:var(--font-display);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.9rem}
.msgbox p + p{margin-top:.8rem}
.msgbox em{color:var(--ivory);font-style:normal;background:rgba(253,173,0,.14);padding:0 .28rem;border-radius:2px}

/* inline CTA */
.artcta{background:linear-gradient(180deg,var(--ink-2),var(--ink-3));border:1px solid var(--line);border-radius:8px;padding:clamp(1.6rem,3vw,2.2rem);margin-block:2.6rem;text-align:center}
.artcta h3{font-family:var(--font-display);font-weight:640;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ivory);margin-bottom:.6rem;letter-spacing:-.02em}
.artcta p{color:var(--taupe);margin-bottom:1.4rem;max-width:46ch;margin-inline:auto}

/* footer: prev/next + related */
.artfoot{border-top:1px solid var(--line-2);margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.8rem}
.artprevnext{display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.artprevnext a{color:var(--taupe);max-width:46%}
.artprevnext a:hover{color:var(--gold)}
.related__t{font-family:var(--font-display);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-dim);margin-top:2.6rem}
.related{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:6px;overflow:hidden;margin-top:1rem}
@media(min-width:720px){.related{grid-template-columns:repeat(3,1fr)}}
.related a{background:var(--ink);padding:1.3rem;display:block;transition:background .2s}
.related a:hover{background:var(--ink-2)}
.related .rc{display:block;font-family:var(--font-display);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.related .rt{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ivory);margin-top:.5rem;line-height:1.28;letter-spacing:-.01em}

/* FAQ aditivo en artículos (SEO Fase 2) — reutiliza el acordeón .faq de home-v2 */
.artfaq{max-width:760px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem);margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.5rem);border-top:1px solid var(--line-2)}
.artfaq h2{font-family:var(--font-display);font-weight:640;font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.15;letter-spacing:-.02em;color:var(--ivory);margin-bottom:1rem}