/* =========================================================================
   ARTICLE PREMIUM LAYER — enterprise editorial upgrade
   Loaded on top of article.css (currently: blog-precios-competencia.html)
   ========================================================================= */

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* --- Reading progress --- */
.art-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--grad);z-index:400;pointer-events:none}

/* --- Hero refinements --- */
.article-hero .hl-grad{
  background:linear-gradient(118deg,#8FA8FF 0%,#C9B9FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- Layout: sticky TOC rail + article column --- */
.art-layout{display:grid;grid-template-columns:208px minmax(0,740px);gap:clamp(44px,5.5vw,84px);justify-content:center}
.art-main{min-width:0}
.art-toc{position:sticky;top:104px;align-self:start;padding-top:6px}
.toc-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.art-toc nav{display:flex;flex-direction:column}
.art-toc a{
  position:relative;display:block;padding:8px 0 8px 18px;
  font-size:14px;font-weight:600;line-height:1.35;color:var(--text-3);text-decoration:none;
  border-left:2px solid var(--line);transition:color .25s var(--ease);
}
.art-toc a:hover{color:var(--text)}
.art-toc a.on{color:var(--brand-blue)}
.art-toc a.on::before{content:"";position:absolute;left:-2px;top:7px;bottom:7px;width:2px;background:var(--grad)}
@media (max-width:1100px){
  .art-layout{display:block}
  .art-toc{display:none}
}

/* --- Numbered sections --- */
.article{counter-reset:hsec}
.prose h2{scroll-margin-top:110px}
.prose h2::before{
  counter-increment:hsec;content:"0" counter(hsec);
  display:block;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.2em;
  margin-bottom:12px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- Pull quote: editorial, oversized mark --- */
.prose .pullquote{
  position:relative;border-left:0;border-image:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(30px,3.4vw,40px) 0 clamp(30px,3.4vw,40px) clamp(58px,6vw,76px);
}
.prose .pullquote::before{
  content:"\201C";position:absolute;left:0;top:clamp(34px,3.6vw,46px);
  font-family:var(--font-display);font-weight:800;font-size:clamp(64px,7vw,86px);line-height:.6;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- Stat trio: dark band --- */
.art-stats{
  grid-template-columns:repeat(3,1fr);gap:0;
  background:linear-gradient(180deg,#0B0F1E,#131A38);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.art-stat{background:transparent;border:0;box-shadow:none;padding:clamp(24px,2.8vw,34px)}
.art-stat + .art-stat{border-left:1px solid rgba(255,255,255,.08)}
.art-stat .n{background:linear-gradient(118deg,#7FA0FF 0%,#C9A6FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.art-stat .l{color:var(--on-ink-2)}
.art-stat .src{color:var(--on-ink-3)}
@media (max-width:640px){
  .art-stats{grid-template-columns:1fr}
  .art-stat + .art-stat{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
}

/* --- Data table: gradient cap --- */
.art-table-wrap{position:relative}
.art-table-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:1}

/* --- Case cards (antes / reveló / después) --- */
.case-card{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-md);overflow:hidden;
}
.cc-head{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.cc-num{
  flex:none;display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
}
.prose .case-card h3{margin:0;font-size:18px;line-height:1.25}
.cc-grid{display:grid;grid-template-columns:1fr 1fr 1fr}
.cc-col{padding:20px 22px}
.cc-col + .cc-col{border-left:1px solid var(--line-2)}
.cc-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.cc-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}
.cc-col.before .cc-tag{color:var(--text-3)}
.cc-col.insight .cc-tag{color:var(--brand-purple)}
.cc-col.after .cc-tag{color:#1A7A50}
.cc-col p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.cc-metrics{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.cc-metrics .m{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;
  background:rgba(45,99,246,.08);color:var(--brand-blue-d);border:1px solid rgba(45,99,246,.16);
}
.cc-metrics .m.up{background:rgba(31,138,91,.1);color:#1A7A50;border-color:rgba(31,138,91,.22)}
@media (max-width:760px){
  .cc-grid{grid-template-columns:1fr}
  .cc-col + .cc-col{border-left:0;border-top:1px solid var(--line-2)}
}

/* --- End CTA: dark premium panel --- */
.art-end-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#0B0F1E,#131A38);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--sh-lg);
}
.art-end-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 280px at 85% -20%,rgba(106,48,214,.4),transparent 62%),
    radial-gradient(480px 250px at 8% -25%,rgba(45,99,246,.35),transparent 62%);
}
.art-end-cta .t{position:relative}
.art-end-cta .btn{position:relative}
.art-end-cta h3{color:#fff}
.art-end-cta p{color:var(--on-ink-2)}