/* ============================================================
   LEADSTORE — Blog & Article styles (extends styles.css tokens)
   Medium-style long-form reading + index cards. Emerald system.
   ============================================================ */

/* ---------- Blog index hero ---------- */
.blog-hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(28px, 4vw, 48px);
  background:
    radial-gradient(ellipse at top right, rgba(5,150,105,.05), transparent 60%);
}
.blog-hero__inner { max-width: 880px; }
.blog-hero h1 {
  font-size: clamp(36px, 5.4vw, 68px);
  letter-spacing: -0.038em; line-height: 1.02;
  margin: 18px 0 20px; text-wrap: balance;
}
.blog-hero h1 strong { color: var(--accent); font-weight: 600; }
.blog-hero__sub {
  font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-3);
  max-width: 60ch; line-height: 1.5;
}
.blog-hero__meta {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.blog-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-hero__meta span::before { content: "→"; color: var(--accent); }

/* ---------- Category filter ---------- */
.blog-cats {
  position: sticky; top: 64px; z-index: 20;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
  padding: 14px 0;
}
.blog-cats__row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cat-chip {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  padding: 7px 14px; border-radius: 99px;
  border: 1px solid var(--line); background: white; color: var(--ink-2);
  cursor: pointer; transition: all var(--t-fast); white-space: nowrap;
}
.cat-chip:hover { border-color: var(--accent); color: var(--accent); }
.cat-chip.on { background: var(--ink); color: white; border-color: var(--ink); }

/* ---------- Featured article ---------- */
.blog-feat { padding: clamp(36px, 5vw, 56px) 0 0; }
.feat-card {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: white; transition: border-color var(--t-base), transform var(--t-base);
}
.feat-card:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (max-width: 820px) { .feat-card { grid-template-columns: 1fr; } }
.feat-card__media {
  background:
    repeating-linear-gradient(135deg, rgba(5,150,105,.07) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, var(--dark) 0%, #06281c 100%);
  min-height: 320px; position: relative;
  display: flex; align-items: flex-end; padding: 28px;
}
.feat-card__glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.35);
  letter-spacing: .1em;
}
.feat-card__badge {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--accent-3); background: rgba(5,150,105,.14);
  border: 1px solid rgba(5,150,105,.3); padding: 5px 11px; border-radius: 99px;
}
.feat-card__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 16px; }
.feat-card__cat { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; }
.feat-card__title { font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.028em; line-height: 1.1; }
.feat-card__excerpt { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; }
.feat-card__meta { margin-top: auto; display: flex; gap: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding-top: 8px; }
.feat-card__link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 600; font-size: 14.5px; }
.feat-card__link .arr { transition: transform var(--t-base); }
.feat-card:hover .feat-card__link .arr { transform: translateX(4px); }

/* ---------- Post grid ---------- */
.blog-grid-wrap { padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 8vw, 104px); }
.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }
.post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: white; transition: border-color var(--t-base), transform var(--t-base);
  min-height: 260px;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.post-card__top {
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-2);
}
.post-card__cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--accent); font-weight: 500; }
.post-card__read { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.post-card__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__title { font-size: 18px; letter-spacing: -0.016em; line-height: 1.22; color: var(--ink); }
.post-card:hover .post-card__title { color: var(--accent-2); }
.post-card__excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.post-card__foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.post-card__foot .more { color: var(--accent); display: inline-flex; gap: 5px; align-items: center; }
.post-card.is-hidden { display: none; }

.blog-empty { text-align: center; padding: 64px 0; color: var(--muted); font-family: var(--mono); font-size: 13px; }

/* ============================================================
   ARTICLE (single post)
   ============================================================ */
.article { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.article__crumb {
  max-width: 760px; margin: 0 auto 28px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.article__crumb a { color: var(--muted); }
.article__crumb a:hover { color: var(--accent); }
.article__crumb .sep { color: var(--muted-2); }
.article__crumb .current { color: var(--ink-2); }

.article__head { max-width: 760px; margin: 0 auto 36px; }
.article__kicker {
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  letter-spacing: .04em; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.article__kicker .dot { color: var(--muted-2); }
.article__kicker .rt { color: var(--muted); }
.article__title {
  font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -0.036em; line-height: 1.05;
  margin: 18px 0 20px; text-wrap: balance;
}
.article__dek { font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-3); line-height: 1.5; max-width: 60ch; }
.article__byline {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.article__byavatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
}
.article__byname { font-size: 14px; font-weight: 600; color: var(--ink); }
.article__bymeta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.article__byshare { margin-left: auto; display: flex; gap: 6px; }
.article__byshare a {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: all var(--t-fast);
}
.article__byshare a:hover { border-color: var(--accent); color: var(--accent); }

/* Lead visual band */
.article__cover {
  max-width: 980px; margin: 0 auto 44px; height: clamp(180px, 26vw, 300px);
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(5,150,105,.08) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, var(--dark) 0%, #06281c 100%);
  display: flex; align-items: center; justify-content: center;
}
.article__cover .glyph { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.4); letter-spacing: .14em; }
.article__cover .tag {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--mono); font-size: 11px; color: var(--accent-3);
  background: rgba(5,150,105,.14); border: 1px solid rgba(5,150,105,.3);
  padding: 5px 11px; border-radius: 99px;
}

/* Body typography */
.article__body { max-width: 720px; margin: 0 auto; }
.article__body > * + * { margin-top: 24px; }
.article__body p {
  font-size: 18px; line-height: 1.75; color: var(--ink-2); letter-spacing: -0.003em;
}
.article__body p > strong { color: var(--ink); font-weight: 600; }
.article__body a { color: var(--accent-2); font-weight: 500; border-bottom: 1px solid rgba(5,150,105,.3); }
.article__body a:hover { border-bottom-color: var(--accent); }
.article__body h2 {
  font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -0.026em; line-height: 1.15;
  margin-top: 52px; padding-top: 6px;
}
.article__body h3 {
  font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.018em; line-height: 1.25;
  margin-top: 38px; color: var(--ink);
}
.article__body h2 + p, .article__body h3 + p { margin-top: 14px; }
.article__body ul, .article__body ol { padding-left: 4px; display: flex; flex-direction: column; gap: 11px; }
.article__body li {
  font-size: 17.5px; line-height: 1.65; color: var(--ink-2);
  padding-left: 28px; position: relative;
}
.article__body ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
.article__body ol { counter-reset: li; }
.article__body ol li { counter-increment: li; }
.article__body ol li::before {
  content: counter(li); position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent);
  width: 20px; height: 20px; border: 1px solid var(--accent-tint); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.article__body li > strong { color: var(--ink); font-weight: 600; }

.article__body blockquote {
  margin: 36px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--accent);
}
.article__body blockquote p {
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; color: var(--ink);
  font-weight: 500; letter-spacing: -0.018em;
}
.article__body blockquote cite { display: block; margin-top: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-style: normal; }

.article__body figure { margin: 40px 0; }
.article__body figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; }

/* Callout box */
.callout {
  margin: 36px 0; padding: 22px 24px; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
}
.callout__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.callout p { font-size: 16px !important; line-height: 1.65 !important; color: var(--ink-2); margin: 0 !important; }
.callout p + p { margin-top: 12px !important; }

/* Comparison / data table */
.ctable-wrap { margin: 36px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ctable { width: 100%; border-collapse: collapse; min-width: 540px; font-size: 14.5px; }
.ctable thead th {
  background: var(--bg-2); text-align: left; padding: 14px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line);
}
.ctable thead th.is-star { color: var(--accent); }
.ctable td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top; line-height: 1.5; }
.ctable tr:last-child td { border-bottom: none; }
.ctable td:first-child, .ctable th:first-child { font-weight: 500; color: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.ctable td.is-star { background: rgba(5,150,105,.04); color: var(--ink); font-weight: 500; }
.ctable .yes { color: var(--accent); font-weight: 600; }
.ctable .no { color: var(--muted-2); }

/* Inline CTA band */
.article-cta {
  max-width: 760px; margin: 52px auto; padding: clamp(28px, 4vw, 40px);
  border-radius: var(--r-lg); background: linear-gradient(135deg, var(--dark) 0%, #06281c 100%);
  color: #F0F4F2; text-align: center;
}
.article-cta h3 { color: #F0F4F2; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.024em; line-height: 1.15; }
.article-cta h3 strong { color: var(--accent-3); }
.article-cta p { color: rgba(240,244,242,.66); font-size: 15.5px; line-height: 1.55; margin: 12px auto 22px; max-width: 52ch; }
.article-cta .btn-row { justify-content: center; }

/* External backlink card (datalayer / funneld) */
.bl-card {
  margin: 36px 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: white; display: flex; gap: 18px; align-items: flex-start;
}
.bl-card__mark {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600; font-size: 18px;
}
.bl-card__mark--dl { background: #0f2c54; }
.bl-card__mark--fn { background: #13110E; color: #EBE6D7; }
.bl-card__k { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.bl-card__t { font-size: 17px; font-weight: 600; letter-spacing: -0.014em; }
.bl-card__d { font-size: 14px; color: var(--ink-3); line-height: 1.55; margin-top: 6px; }
.bl-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent-2); font-weight: 600; font-size: 14px; border: 0 !important; }
.bl-card__link .arr { transition: transform var(--t-base); }
.bl-card__link:hover .arr { transform: translateX(4px); }

/* Key takeaways */
.takeaways { margin: 40px 0; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); }
.takeaways__k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.takeaways ul { display: flex; flex-direction: column; gap: 12px; }
.takeaways li { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; padding-left: 26px; position: relative; }
.takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* Author box */
.author-box {
  max-width: 760px; margin: 56px auto 0; padding: 26px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: white; display: flex; gap: 18px; align-items: flex-start;
}
.author-box__av {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px;
}
.author-box__name { font-size: 15px; font-weight: 600; }
.author-box__role { font-family: var(--mono); font-size: 11.5px; color: var(--accent); margin-top: 2px; }
.author-box__bio { font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: 8px; }

/* Related posts */
.related { background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0; }
.related__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.related__title { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.022em; }
.related__all { font-family: var(--mono); font-size: 13px; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .related-grid { grid-template-columns: 1fr; } }

/* Reading progress bar */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 60; transition: width .1s linear; }

/* prose width helper for full-bleed elements inside body already centered */
.article__body .full { }

/* ---------- Table of contents (auto-generated) ---------- */
.article__body h2 { scroll-margin-top: 88px; }
.article__toc {
  margin: 8px 0 40px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
}
.article__toc-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.article__toc ol { counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; }
@media (max-width: 600px) { .article__toc ol { grid-template-columns: 1fr; } }
.article__toc li { counter-increment: toc; position: relative; padding-left: 26px; line-height: 1.4; }
.article__toc li::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted-2);
}
.article__toc a {
  font-size: 14.5px; color: var(--ink-2); font-weight: 500;
  border-bottom: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.article__toc a:hover { color: var(--accent); border-bottom-color: rgba(5,150,105,.3); }

/* ---------- Category-tinted article covers ---------- */
.article__cover--datos { background:
  repeating-linear-gradient(135deg, rgba(99,102,241,.10) 0 2px, transparent 2px 12px),
  linear-gradient(135deg, #0b1020 0%, #161e3a 100%); }
.article__cover--datos .tag { color: #a5b4fc; background: rgba(99,102,241,.16); border-color: rgba(99,102,241,.35); }
.article__cover--datos .glyph { color: rgba(165,180,252,.55); }

.article__cover--rgpd { background:
  repeating-linear-gradient(135deg, rgba(148,163,184,.10) 0 2px, transparent 2px 12px),
  linear-gradient(135deg, #0c1116 0%, #1e2730 100%); }
.article__cover--rgpd .tag { color: #cbd5e1; background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.35); }
.article__cover--rgpd .glyph { color: rgba(203,213,225,.5); }

.article__cover--mercados { background:
  repeating-linear-gradient(135deg, rgba(20,184,166,.11) 0 2px, transparent 2px 12px),
  linear-gradient(135deg, #07201d 0%, #0a2e2a 100%); }
.article__cover--mercados .tag { color: #5eead4; background: rgba(20,184,166,.16); border-color: rgba(20,184,166,.35); }
.article__cover--mercados .glyph { color: rgba(94,234,212,.55); }

.article__cover--guias { background:
  repeating-linear-gradient(135deg, rgba(245,158,11,.10) 0 2px, transparent 2px 12px),
  linear-gradient(135deg, #1a1206 0%, #2a1f0c 100%); }
.article__cover--guias .tag { color: #fcd34d; background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.32); }
.article__cover--guias .glyph { color: rgba(252,211,77,.5); }

.article__cover--sectores { background:
  repeating-linear-gradient(135deg, rgba(244,114,182,.09) 0 2px, transparent 2px 12px),
  linear-gradient(135deg, #190a14 0%, #2a1020 100%); }
.article__cover--sectores .tag { color: #f9a8d4; background: rgba(244,114,182,.14); border-color: rgba(244,114,182,.3); }
.article__cover--sectores .glyph { color: rgba(249,168,212,.5); }


/* ============================================================
   ARTICLE FAQ (visible Q&A + FAQPage schema)
   ============================================================ */
.article-faq{max-width:760px;margin:56px auto 0;padding:0 24px;}
.article-faq__k{font-family:var(--mono,monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#059669);margin-bottom:6px;}
.article-faq__title{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;line-height:1.15;margin:0 0 22px;color:var(--ink,#0a0f0d);}
.faq-item{border-top:1px solid var(--line,#e6eae8);}
.faq-item:last-child{border-bottom:1px solid var(--line,#e6eae8);}
.faq-item__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:inherit;font-size:18px;font-weight:600;line-height:1.4;color:var(--ink,#0a0f0d);letter-spacing:-.01em;}
.faq-item__q:hover{color:var(--accent-2,#047857);}
.faq-item__q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--accent,#059669);transition:transform .25s ease;}
.faq-item[open] .faq-item__q::after{transform:translateY(-50%) rotate(45deg);}
.faq-item__a{padding:0 0 22px;font-size:16.5px;line-height:1.7;color:var(--ink-2,#33403b);}
.faq-item__a a{color:var(--accent-2,#047857);border-bottom:1px solid rgba(5,150,105,.3);}
.faq-item summary{list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
@media(max-width:520px){.article-faq{padding:0 18px;}.faq-item__q{font-size:16.5px;}}