/* ══════════════════════════════════════════════════════════
   NEXO CLOUD® — Article Page Styles (blog/article.css)
   ══════════════════════════════════════════════════════════ */

/* ─── Hero Image ─── */
.article-hero { position:relative; height:480px; overflow:hidden; margin-top:72px; }
.article-hero img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.article-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:65%;
  background:linear-gradient(to top, rgba(6,9,19,1) 0%, rgba(6,9,19,0.4) 60%, transparent 100%);
  pointer-events:none;
}

/* ─── Breadcrumb ─── */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--text-muted); padding:20px 0; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-muted); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--nexo-pulse); }
.breadcrumb-sep { color:rgba(255,255,255,0.2); }
.breadcrumb-current { color:var(--nexo-white); }

/* ─── Layout ─── */
.article-layout { display:grid; grid-template-columns:1fr 290px; gap:48px; align-items:start; margin-top:32px; margin-bottom:80px; }
.article-sidebar { position:sticky; top:100px; display:flex; flex-direction:column; gap:16px; }

/* ─── TOC ─── */
.toc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-xl); padding:24px; }
.toc-title { font-size:0.85rem; font-weight:700; color:var(--nexo-white); margin-bottom:16px; }
.toc-list { list-style:none; padding:0; margin:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.toc-list li { counter-increment:toc; display:flex; align-items:baseline; gap:6px; padding:4px 0; }
.toc-list li::before { content:counter(toc)'.'; font-size:0.7rem; color:var(--nexo-pulse); font-weight:700; flex-shrink:0; }
.toc-list a { font-size:0.81rem; color:var(--text-muted); text-decoration:none; transition:color 0.2s; line-height:1.4; }
.toc-list a:hover { color:var(--nexo-white); }
.toc-list li.toc-active a { color:var(--nexo-pulse); }

/* ─── Sidebar CTA ─── */
.sidebar-cta {
  background:linear-gradient(135deg,rgba(185,221,1,0.06),rgba(1,160,140,0.06));
  border:1px solid rgba(185,221,1,0.15); border-radius:var(--r-xl);
  padding:22px; text-align:center;
}
.sidebar-cta-label { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--nexo-pulse); margin-bottom:8px; }
.sidebar-cta-desc  { font-size:0.79rem; color:var(--text-secondary); line-height:1.6; margin-bottom:14px; }

/* ─── Author Card ─── */
.article-author {
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin:22px 0 30px; flex-wrap:wrap;
}
.author-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(185,221,1,0.25); flex-shrink:0; }
.author-info { flex:1; min-width:120px; }
.author-name { font-size:0.86rem; font-weight:700; color:var(--nexo-white); }
.author-role { font-size:0.75rem; color:var(--nexo-pulse); }
.article-metas { display:flex; gap:20px; margin-left:auto; flex-wrap:wrap; }
.article-meta-item { font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; white-space:nowrap; }

/* ─── Article Typography ─── */
.article-body { font-size:0.94rem; line-height:1.85; color:var(--text-secondary); }
.article-body h2 { font-size:1.35rem; font-weight:700; color:var(--nexo-white); margin:40px 0 14px; scroll-margin-top:120px; }
.article-body h3 { font-size:1.05rem; font-weight:700; color:var(--nexo-white); margin:24px 0 10px; }
.article-body p  { margin-bottom:16px; }
.article-body ul, .article-body ol { margin:14px 0 18px; padding-left:0; list-style:none; }
.article-body ul li { padding:4px 0 4px 20px; position:relative; }
.article-body ul li::before { content:'→'; position:absolute; left:0; color:var(--nexo-pulse); font-size:0.78rem; top:7px; }
.article-body ol { counter-reset:ol-cnt; }
.article-body ol li { padding:4px 0 4px 24px; position:relative; counter-increment:ol-cnt; }
.article-body ol li::before { content:counter(ol-cnt)'.'; position:absolute; left:0; color:var(--nexo-pulse); font-size:0.78rem; font-weight:700; }
.article-body strong { color:var(--nexo-white); font-weight:600; }
.article-body hr { border:none; border-top:1px solid var(--border); margin:32px 0; }

/* Tables */
.article-body table { width:100%; border-collapse:collapse; margin:24px 0; font-size:0.88rem; }
.article-body th { background:rgba(185,221,1,0.07); color:var(--nexo-pulse); padding:10px 14px; text-align:left; border-bottom:1px solid rgba(185,221,1,0.2); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; }
.article-body td { padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text-secondary); }
.article-body tr:last-child td { border-bottom:none; }

/* Highlight block */
.article-highlight { background:rgba(185,221,1,0.04); border-left:3px solid var(--nexo-pulse); border-radius:0 var(--r-md) var(--r-md) 0; padding:16px 20px; margin:24px 0; }
.article-highlight p { color:var(--nexo-white); font-weight:500; margin:0; line-height:1.7; }

/* ─── CTA Banner ─── */
.article-cta-banner {
  display:grid; grid-template-columns:60px 1fr auto; gap:24px; align-items:center;
  background:linear-gradient(135deg,rgba(14,20,40,0.9),rgba(10,28,20,0.9));
  border:1px solid rgba(185,221,1,0.18); border-radius:var(--r-xl);
  padding:32px 36px; margin:48px 0;
}
.article-cta-icon { width:56px; height:56px; border-radius:var(--r-md); background:rgba(185,221,1,0.1); display:flex; align-items:center; justify-content:center; font-size:1.7rem; }
.article-cta-text h3 { font-size:1.1rem; font-weight:700; margin-bottom:6px; }
.article-cta-text p  { font-size:0.86rem; color:var(--text-secondary); line-height:1.65; margin:0; }
.article-cta-btns { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }

/* ─── Related Articles ─── */
.related-section { border-top:1px solid var(--border); padding:60px 0 80px; }
.related-title { font-size:1.15rem; font-weight:700; margin-bottom:24px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; transition:all 0.3s; display:block; }
.related-card:hover { border-color:rgba(185,221,1,0.2); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,0.35); }
.related-card-img { height:140px; overflow:hidden; }
.related-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.related-card:hover .related-card-img img { transform:scale(1.06); }
.related-card-body { padding:16px; }
.related-badge { font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; display:block; }
.related-card-title { font-size:0.88rem; font-weight:700; color:var(--nexo-white); line-height:1.4; margin-bottom:8px; }
.related-card-cta { font-size:0.78rem; color:var(--nexo-pulse); font-weight:600; }

/* ─── Category Badge (inline use) ─── */
.bc-badge { display:inline-block; padding:3px 12px; border-radius:100px; font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.cat-ventas     { background:rgba(185,221,1,0.12); color:#B9DD01; }
.cat-inventario { background:rgba(1,160,140,0.12); color:#01A08C; }
.cat-tesoreria  { background:rgba(59,130,246,0.12); color:#60A5FA; }
.cat-gestion    { background:rgba(139,92,246,0.12); color:#A78BFA; }
.cat-estrategia { background:rgba(245,158,11,0.12); color:#FCD34D; }

/* ─── Footer Social ─── */
.footer-social-icon { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text-muted); transition:all 0.25s; }
.footer-social-icon:hover { border-color:rgba(185,221,1,0.5); color:var(--nexo-pulse); background:rgba(185,221,1,0.07); }

/* ─── Responsive ─── */
@media(max-width:1000px) { .article-layout { grid-template-columns:1fr; } .article-sidebar { position:static; } }
@media(max-width:768px) {
  .article-hero { height:300px; }
  .article-cta-banner { grid-template-columns:1fr; text-align:center; }
  .article-cta-icon { margin:0 auto; }
  .article-cta-btns { flex-direction:row; justify-content:center; }
  .related-grid { grid-template-columns:1fr; }
}