/* =============================================================
   DIRECTORIO CDMX — ARTICLE EDITORIAL SYSTEM
   Tipografia editorial profesional · TOC sticky · Callouts
   Pull-quotes · Tablas · Bibliografia · Author card · Share bar
   Extiende style.css — usar SIEMPRE despues del stylesheet base
   ============================================================= */

/* ---------- READING PROGRESS BAR ---------- */
.reading-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px; z-index:9999;
  background:transparent; pointer-events:none;
}
.reading-progress .bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--primary) 0%,var(--gold) 100%);
  box-shadow:0 0 10px var(--primary-glow);
  transition:width .1s ease-out;
}

/* ---------- ARTICLE HERO ---------- */
.article-hero{
  position:relative;
  padding:var(--space-12) 0 var(--space-8);
  background:
    linear-gradient(180deg,rgba(10,11,16,.3) 0%,var(--bg) 100%),
    radial-gradient(ellipse at top right,var(--primary-soft) 0%,transparent 60%),
    radial-gradient(ellipse at bottom left,rgba(212,175,55,.06) 0%,transparent 55%);
  border-bottom:1px solid var(--border);
}
.article-hero-inner{
  max-width:880px; margin:0 auto;
  text-align:left;
}
.article-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Inter',sans-serif;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:var(--space-4);
}
.article-eyebrow::before{
  content:""; width:2rem; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.article-eyebrow .cat{ color:var(--text); }
.article-eyebrow .sep{ color:var(--text-dim); }

.article-hero h1{
  font-family:'Poppins',sans-serif;
  font-size:clamp(2rem,4.5vw,3.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
  color:var(--text);
  margin-bottom:var(--space-5);
  max-width:22ch;
}
.article-deck{
  font-family:'Inter',sans-serif;
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  font-weight:300;
  line-height:1.55;
  color:var(--text-muted);
  max-width:62ch;
  margin-bottom:var(--space-6);
}
.article-byline{
  display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--space-4) var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid var(--border);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.article-byline .by-author{
  display:flex; align-items:center; gap:.6rem;
}
.article-byline .by-avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--grad-primary);
  display:grid; place-items:center;
  font-weight:700; font-size:.8rem;
  color:#fff;
  border:2px solid var(--surface);
}
.article-byline .by-name{ color:var(--text); font-weight:600; }
.article-byline .by-role{ display:block; font-size:var(--text-xs); color:var(--text-dim); font-weight:400; }
.article-byline .by-meta{ display:flex; align-items:center; gap:.4rem; }
.article-byline .by-meta i{ color:var(--gold); }
.article-byline .dot{ color:var(--text-dim); }

.article-cover{
  position:relative;
  margin:var(--space-8) auto 0;
  max-width:1100px;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.article-cover img{
  width:100%; height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.article-cover .caption{
  padding:var(--space-3) var(--space-5);
  background:var(--surface);
  font-size:var(--text-xs);
  color:var(--text-dim);
  font-style:italic;
  border-top:1px solid var(--border);
}

/* ---------- ARTICLE LAYOUT (TOC + BODY) ---------- */
.article-layout{
  display:grid;
  grid-template-columns:240px 1fr 280px;
  gap:var(--space-10);
  max-width:1320px;
  margin:0 auto;
  padding:var(--space-12) clamp(1rem,3vw,2rem);
  align-items:start;
}
@media (max-width:1100px){
  .article-layout{ grid-template-columns:220px 1fr; }
  .article-layout .article-rail-right{ display:none; }
}
@media (max-width:860px){
  .article-layout{ grid-template-columns:1fr; gap:var(--space-6); }
  .article-layout .article-rail-left{ display:none; }
}

/* ---------- TOC STICKY ---------- */
.article-toc{
  position:sticky; top:100px;
  padding:var(--space-5);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  max-height:calc(100vh - 140px);
  overflow-y:auto;
}
.article-toc-title{
  display:flex; align-items:center; gap:.5rem;
  font-family:'Poppins',sans-serif;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border);
}
.article-toc-title i{ color:var(--gold); }
.article-toc ol{
  list-style:none; counter-reset:toc;
  display:flex; flex-direction:column; gap:.4rem;
}
.article-toc li{ counter-increment:toc; }
.article-toc a{
  display:block;
  padding:.45rem .6rem .45rem 2.2rem;
  position:relative;
  font-size:var(--text-sm);
  color:var(--text-muted);
  line-height:1.35;
  border-left:2px solid transparent;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.article-toc a::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute; left:.55rem; top:.5rem;
  font-size:.7rem; font-weight:700;
  color:var(--text-dim);
  font-family:'Poppins',sans-serif;
  letter-spacing:.05em;
}
.article-toc a:hover{
  color:var(--text);
  background:rgba(255,255,255,.03);
}
.article-toc a.is-active{
  color:var(--gold-soft);
  border-left-color:var(--primary);
  background:var(--primary-soft);
}
.article-toc a.is-active::before{ color:var(--gold); }

/* ---------- TLDR / KEY TAKEAWAYS ---------- */
.article-tldr{
  background:var(--grad-card);
  border:1px solid var(--border-strong);
  border-left:4px solid var(--primary);
  border-radius:var(--r-lg);
  padding:var(--space-6) var(--space-7);
  margin-bottom:var(--space-8);
}
.article-tldr-label{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Poppins',sans-serif;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary-hover);
  margin-bottom:var(--space-3);
}
.article-tldr h2{
  font-size:var(--text-lg);
  margin-bottom:var(--space-3);
  color:var(--text);
}
.article-tldr ul{
  display:flex; flex-direction:column; gap:.6rem;
  list-style:none; padding:0;
}
.article-tldr li{
  position:relative; padding-left:1.5rem;
  font-size:.95rem; color:var(--text-muted); line-height:1.55;
}
.article-tldr li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.15rem;
  color:var(--gold); font-size:.85rem;
}

/* ---------- ARTICLE BODY TYPOGRAPHY ---------- */
.article-body{
  max-width:680px;
  font-size:1.0625rem;
  line-height:1.78;
  color:var(--text);
}
.article-body > p{
  margin-bottom:var(--space-6);
  color:#D9DBE8;
}
.article-body > p:first-of-type{
  font-size:1.18rem;
  line-height:1.7;
  color:var(--text);
}
.article-body > p:first-of-type::first-letter{
  font-family:'Poppins',sans-serif;
  font-size:4.2rem;
  font-weight:800;
  line-height:.95;
  float:left;
  padding:.35rem .65rem 0 0;
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.article-body h2{
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.5rem,2.4vw,1.9rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
  margin:var(--space-10) 0 var(--space-4);
  padding-top:var(--space-4);
  position:relative;
  scroll-margin-top:100px;
}
.article-body h2::before{
  content:""; position:absolute;
  top:0; left:0;
  width:2.5rem; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--gold));
  border-radius:var(--r-full);
}
.article-body h3{
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.15rem,1.6vw,1.35rem);
  font-weight:700;
  margin:var(--space-7) 0 var(--space-3);
  color:var(--gold-soft);
  scroll-margin-top:100px;
}
.article-body h4{
  font-family:'Poppins',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  margin:var(--space-5) 0 var(--space-2);
  color:var(--text);
}
.article-body strong{ color:var(--text); font-weight:700; }
.article-body em{ color:var(--gold-soft); font-style:italic; }
.article-body a{
  color:var(--primary-hover);
  text-decoration:underline;
  text-decoration-color:var(--primary-soft);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:text-decoration-color var(--t-fast), color var(--t-fast);
}
.article-body a:hover{
  color:var(--gold-soft);
  text-decoration-color:var(--gold);
}
.article-body ul, .article-body ol{
  margin:0 0 var(--space-6) 0;
  padding-left:1.5rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.article-body ul{ list-style:none; padding-left:0; }
.article-body ul li{
  position:relative; padding-left:1.75rem;
  color:#D9DBE8;
}
.article-body ul li::before{
  content:""; position:absolute;
  left:.25rem; top:.7rem;
  width:.45rem; height:.45rem;
  background:var(--primary);
  border-radius:50%;
  box-shadow:0 0 8px var(--primary-glow);
}
.article-body ol{
  list-style:none; counter-reset:articleol;
  padding-left:0;
}
.article-body ol > li{
  counter-increment:articleol;
  position:relative; padding-left:2.5rem;
  color:#D9DBE8;
}
.article-body ol > li::before{
  content:counter(articleol,decimal-leading-zero);
  position:absolute; left:0; top:-.05rem;
  font-family:'Poppins',sans-serif;
  font-size:.95rem;
  font-weight:800;
  color:var(--gold);
  letter-spacing:.05em;
}
.article-body hr{
  border:none; height:1px;
  background:linear-gradient(90deg,transparent,var(--border-strong),transparent);
  margin:var(--space-10) 0;
}

/* ---------- CALLOUTS (variants) ---------- */
.callout{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-4);
  padding:var(--space-5) var(--space-6);
  margin:var(--space-7) 0;
  background:var(--grad-card);
  border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius:var(--r-md);
}
.callout-icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:var(--r-md);
  background:var(--primary-soft);
  color:var(--primary-hover);
  font-size:1.15rem;
  flex-shrink:0;
}
.callout-body h4{
  font-family:'Poppins',sans-serif;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:.4rem;
}
.callout-body p{
  font-size:.95rem;
  color:var(--text-muted);
  line-height:1.6;
  margin:0;
}
.callout-body p + p{ margin-top:.6rem; }

.callout.callout-tip{ border-left-color:var(--gold); }
.callout.callout-tip .callout-icon{ background:rgba(212,175,55,.12); color:var(--gold-soft); }
.callout.callout-warning{ border-left-color:#F59E0B; }
.callout.callout-warning .callout-icon{ background:rgba(245,158,11,.12); color:#FBBF24; }
.callout.callout-data{ border-left-color:#3B82F6; }
.callout.callout-data .callout-icon{ background:rgba(59,130,246,.12); color:#60A5FA; }
.callout.callout-framework{
  border:1px solid var(--gold-glow);
  border-left:3px solid var(--gold);
  background:
    linear-gradient(135deg,rgba(212,175,55,.06),transparent 70%),
    var(--grad-card);
}
.callout.callout-framework .callout-icon{ background:rgba(212,175,55,.15); color:var(--gold-soft); }

/* ---------- CHECKLIST ---------- */
.checklist{
  margin:var(--space-7) 0;
  padding:var(--space-6) var(--space-7);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.checklist-title{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Poppins',sans-serif;
  font-size:1rem;
  font-weight:700;
  margin-bottom:var(--space-4);
  color:var(--gold-soft);
  letter-spacing:.02em;
}
.checklist-title i{ color:var(--gold); }
.checklist ul{
  list-style:none; padding:0;
  display:flex; flex-direction:column; gap:.7rem;
}
.checklist li{
  position:relative; padding-left:2rem;
  font-size:.97rem;
  color:#D9DBE8; line-height:1.55;
}
.checklist li::before{
  content:"\f0c8";
  font-family:"Font Awesome 6 Free"; font-weight:400;
  position:absolute; left:0; top:.05rem;
  color:var(--gold);
  font-size:1.05rem;
}

/* ---------- PULL QUOTE ---------- */
.pullquote{
  margin:var(--space-10) 0;
  padding:var(--space-7) var(--space-6);
  border-top:1px solid var(--border-strong);
  border-bottom:1px solid var(--border-strong);
  position:relative;
}
.pullquote::before{
  content:"\201C";
  position:absolute;
  top:-.4em; left:-.1em;
  font-family:'Poppins',serif;
  font-size:6rem;
  line-height:1;
  color:var(--primary);
  opacity:.35;
}
.pullquote p{
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.25rem,2vw,1.6rem);
  font-weight:600;
  line-height:1.35;
  color:var(--text);
  letter-spacing:-.02em;
  margin:0 0 var(--space-3) 0;
  padding-left:2rem;
}
.pullquote cite{
  display:block;
  font-style:normal;
  font-size:var(--text-sm);
  color:var(--gold-soft);
  letter-spacing:.05em;
  padding-left:2rem;
}
.pullquote cite::before{ content:"— "; }

/* ---------- TABLE EDITORIAL ---------- */
.table-wrap{
  margin:var(--space-7) 0;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
}
.article-body table{
  width:100%;
  border-collapse:collapse;
  font-size:.94rem;
}
.article-body table th{
  text-align:left;
  padding:var(--space-3) var(--space-4);
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gold-soft);
  background:var(--surface-2);
  border-bottom:1px solid var(--border-strong);
  white-space:nowrap;
}
.article-body table td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border);
  color:#D9DBE8;
  vertical-align:top;
  line-height:1.5;
}
.article-body table tbody tr:last-child td{ border-bottom:none; }
.article-body table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.015); }
.article-body table strong{ color:var(--gold-soft); }

/* ---------- STAT CARDS INLINE ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--space-3);
  margin:var(--space-7) 0;
}
.stat-card{
  padding:var(--space-5);
  background:var(--grad-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  text-align:left;
}
.stat-card .num{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:1.85rem;
  font-weight:800;
  color:var(--gold-soft);
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:.4rem;
}
.stat-card .label{
  display:block;
  font-size:var(--text-xs);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
}

/* ---------- FIGURE WITH CAPTION ---------- */
.article-figure{
  margin:var(--space-8) 0;
}
.article-figure img{
  width:100%; height:auto;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
}
.article-figure figcaption{
  margin-top:var(--space-3);
  font-size:var(--text-sm);
  color:var(--text-dim);
  font-style:italic;
  line-height:1.5;
  text-align:center;
}

/* ---------- SOURCES / BIBLIOGRAFIA ---------- */
.article-sources{
  margin-top:var(--space-10);
  padding:var(--space-6) var(--space-7);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.article-sources-title{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Poppins',sans-serif;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:var(--space-4);
}
.article-sources-title i{ color:var(--gold); }
.article-sources ol{
  list-style:decimal;
  padding-left:1.5rem;
  display:flex; flex-direction:column; gap:.6rem;
  margin:0;
  counter-reset:none;
}
.article-sources ol li{
  position:static; padding-left:0;
  font-size:.88rem;
  color:var(--text-muted);
  line-height:1.55;
}
.article-sources ol li::before{ display:none; }
.article-sources ol li::marker{ color:var(--gold); font-weight:700; }
.article-sources cite{ font-style:italic; color:var(--text); }
.article-sources a{ color:var(--primary-hover); }

/* ---------- AUTHOR CARD ---------- */
.article-author-card{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:var(--space-5);
  align-items:start;
  margin-top:var(--space-10);
  padding:var(--space-6) var(--space-7);
  background:
    linear-gradient(135deg,var(--primary-soft),transparent 70%),
    var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.article-author-card .avatar{
  width:80px; height:80px;
  border-radius:50%;
  background:var(--grad-primary);
  display:grid; place-items:center;
  font-family:'Poppins',sans-serif;
  font-size:1.85rem; font-weight:800;
  color:#fff;
  border:3px solid var(--surface);
  box-shadow:0 0 30px var(--primary-glow);
}
.article-author-card h4{
  font-family:'Poppins',sans-serif;
  font-size:1.15rem;
  font-weight:800;
  margin-bottom:.2rem;
  color:var(--text);
}
.article-author-card .role{
  display:block;
  font-size:var(--text-xs);
  color:var(--gold-soft);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:.7rem;
}
.article-author-card p{
  font-size:.92rem;
  color:var(--text-muted);
  line-height:1.55;
  margin-bottom:.7rem;
}
.article-author-card .author-meta{
  display:flex; flex-wrap:wrap;
  gap:var(--space-3);
  font-size:var(--text-xs);
  color:var(--text-dim);
}
.article-author-card .author-meta span{
  display:inline-flex; align-items:center; gap:.4rem;
}
.article-author-card .author-meta i{ color:var(--gold); }

/* ---------- SHARE BAR ---------- */
.article-share{
  margin:var(--space-8) 0;
  padding:var(--space-5) var(--space-6);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:var(--space-4);
}
.article-share-label{
  display:flex; align-items:center; gap:.5rem;
  font-family:'Poppins',sans-serif;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.article-share-label i{ color:var(--gold); }
.article-share-actions{
  display:flex; gap:.5rem;
  flex-wrap:wrap;
}
.share-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  font-size:.82rem;
  font-weight:600;
  color:var(--text-muted);
  transition:all var(--t-base);
}
.share-btn i{ font-size:.9rem; }
.share-btn:hover{
  color:var(--text);
  background:var(--primary-soft);
  border-color:var(--primary);
  transform:translateY(-1px);
}
.share-btn.copy.copied{
  background:rgba(34,197,94,.12);
  border-color:#22C55E;
  color:#86EFAC;
}

/* ---------- ARTICLE RAIL RIGHT (companion CTAs) ---------- */
.article-rail-right{
  position:sticky; top:100px;
  display:flex; flex-direction:column; gap:var(--space-5);
}
.rail-card{
  padding:var(--space-5);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.rail-card h4{
  font-family:'Poppins',sans-serif;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:var(--space-3);
}
.rail-card p{
  font-size:.88rem;
  color:var(--text-muted);
  line-height:1.5;
  margin-bottom:var(--space-3);
}
.rail-card.rail-cta{
  background:
    linear-gradient(135deg,var(--primary-soft),transparent),
    var(--surface);
  border:1px solid var(--primary);
}

/* ---------- BLOG INDEX ENHANCEMENTS ---------- */
.blog-hero-pro{
  position:relative;
  padding:var(--space-16) 0 var(--space-12);
  background:
    linear-gradient(180deg,rgba(10,11,16,.3),var(--bg) 90%),
    radial-gradient(ellipse at 70% 30%,var(--primary-soft) 0%,transparent 55%),
    radial-gradient(ellipse at 20% 70%,rgba(212,175,55,.06) 0%,transparent 55%);
  border-bottom:1px solid var(--border);
  text-align:center;
}
.blog-hero-pro .eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Inter',sans-serif;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:var(--space-4);
}
.blog-hero-pro .eyebrow::before,
.blog-hero-pro .eyebrow::after{
  content:""; width:2rem; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.blog-hero-pro h1{
  font-family:'Poppins',sans-serif;
  font-size:clamp(2.25rem,5vw,4rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  max-width:18ch;
  margin:0 auto var(--space-5);
}
.blog-hero-pro h1 .accent{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.blog-hero-pro .lede{
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:300;
  line-height:1.55;
  color:var(--text-muted);
  max-width:62ch;
  margin:0 auto var(--space-7);
}
.blog-hero-pro .pillars{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--space-4) var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid var(--border);
  max-width:780px; margin:0 auto;
}
.blog-hero-pro .pillar{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--text-muted);
  letter-spacing:.02em;
}
.blog-hero-pro .pillar i{ color:var(--gold); }
.blog-hero-pro .pillar strong{ color:var(--text); font-weight:700; }

/* Editorial post card upgrade */
.post-card.is-editorial{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.post-card.is-editorial .post-card-media{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
}
.post-card.is-editorial .post-card-media img{
  width:100%; height:100%;
  object-fit:cover;
}
.post-card.is-editorial .post-cat{
  position:absolute; top:1rem; left:1rem;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .75rem;
  background:rgba(10,11,16,.85);
  backdrop-filter:blur(6px);
  border:1px solid var(--border-strong);
  border-radius:var(--r-full);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-soft);
}
.post-card.is-editorial .post-cat i{ color:var(--gold); }
.post-card.is-editorial .read-time{
  position:absolute; top:1rem; right:1rem;
  padding:.3rem .65rem;
  background:rgba(10,11,16,.85);
  backdrop-filter:blur(6px);
  border-radius:var(--r-full);
  font-size:.7rem;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.05em;
}
.post-card.is-editorial .post-card-body{
  padding:var(--space-5) var(--space-6) var(--space-6);
  display:flex; flex-direction:column;
  gap:var(--space-3);
  flex:1;
}
.post-card.is-editorial h3{
  font-family:'Poppins',sans-serif;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text);
}
.post-card.is-editorial h3 a{ color:inherit; }
.post-card.is-editorial h3 a:hover{ color:var(--gold-soft); }
.post-card.is-editorial .excerpt{
  font-size:.92rem;
  line-height:1.55;
  color:var(--text-muted);
  margin:0;
}
.post-card.is-editorial .post-card-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto;
  padding-top:var(--space-3);
  border-top:1px solid var(--border);
  font-size:var(--text-xs);
  color:var(--text-dim);
}
.post-card.is-editorial .post-card-meta .by{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600;
  color:var(--text-muted);
}
.post-card.is-editorial .post-card-meta .by .avatar{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--grad-primary);
  display:grid; place-items:center;
  font-size:.65rem; font-weight:700;
  color:#fff;
}
.post-card.is-editorial .post-card-meta .views{
  display:inline-flex; align-items:center; gap:.3rem;
}
.post-card.is-editorial .post-card-meta i{ color:var(--gold); }

/* Editorial featured card */
.blog-featured-pro{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  margin-bottom:var(--space-10);
}
@media (max-width:860px){
  .blog-featured-pro{ grid-template-columns:1fr; }
}
.blog-featured-pro .media{
  position:relative;
  min-height:380px;
  overflow:hidden;
}
.blog-featured-pro .media img{
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; inset:0;
}
.blog-featured-pro .media .overlay{
  position:absolute; inset:0;
  background:linear-gradient(45deg,rgba(10,11,16,.7),transparent 60%);
}
.blog-featured-pro .badge{
  position:absolute; top:1.25rem; left:1.25rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem;
  background:var(--grad-primary);
  border-radius:var(--r-full);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  box-shadow:0 8px 20px var(--primary-glow);
  z-index:2;
}
.blog-featured-pro .body{
  padding:clamp(2rem,3.5vw,3rem);
  display:flex; flex-direction:column;
  justify-content:center;
}
.blog-featured-pro .cat{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:var(--space-4);
}
.blog-featured-pro .cat::before{
  content:""; width:1.5rem; height:1px; background:var(--gold);
}
.blog-featured-pro h2{
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.15;
  margin-bottom:var(--space-4);
}
.blog-featured-pro h2 a{ color:var(--text); }
.blog-featured-pro h2 a:hover{ color:var(--gold-soft); }
.blog-featured-pro .deck{
  font-size:1rem;
  line-height:1.6;
  color:var(--text-muted);
  margin-bottom:var(--space-5);
}
.blog-featured-pro .featured-meta{
  display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--border);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.blog-featured-pro .featured-meta .by{
  display:inline-flex; align-items:center; gap:.5rem;
}
.blog-featured-pro .featured-meta .avatar{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--grad-primary);
  display:grid; place-items:center;
  font-size:.72rem; font-weight:700;
  color:#fff;
}
.blog-featured-pro .featured-meta i{ color:var(--gold); }
.blog-featured-pro .actions{
  margin-top:var(--space-5);
  display:flex; flex-wrap:wrap;
  gap:var(--space-3);
}

/* Section heading */
.editorial-section-bar{
  display:flex; align-items:center;
  gap:var(--space-4);
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border);
}
.editorial-section-bar .icon{
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--grad-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--gold-soft);
}
.editorial-section-bar h2{
  font-family:'Poppins',sans-serif;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
}
.editorial-section-bar .meta{
  margin-left:auto;
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
}

/* Mobile adjustments */
@media (max-width:768px){
  .article-body{ font-size:1rem; }
  .article-body > p:first-of-type::first-letter{
    font-size:3.2rem; padding-right:.4rem;
  }
  .article-tldr, .checklist, .callout, .article-author-card, .article-sources, .article-share{
    padding-left:1rem; padding-right:1rem;
  }
  .article-author-card{
    grid-template-columns:60px 1fr;
    gap:var(--space-4);
  }
  .article-author-card .avatar{ width:60px; height:60px; font-size:1.4rem; }
  .pullquote p{ padding-left:1rem; font-size:1.2rem; }
  .pullquote::before{ font-size:4rem; }
  .blog-featured-pro .body{ padding:var(--space-6); }
}