/* ═══════════════════════════════════════════════════════════════════════════
   NEX GROUP · Blog v2 · blog.css (sin Tailwind ni Bootstrap)
   Todo va bajo .nxb para no chocar con estilos del sitio (partials antiguos o nuevos).
   Tokens: los de /shared/design/tokens.css, repetidos aquí como respaldo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --nx-paper:#F3F5F8; --nx-surface:#FFFFFF; --nx-ink:#0B1B33; --nx-ink-2:#42516B; --nx-ink-3:#7A879C;
  --nx-line:#DCE2EB; --nx-blue:#1452F0; --nx-blue-d:#0E3CB4; --nx-blue-50:#EAF0FF; --nx-wa:#1FA855;
  --nx-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --nx-text:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nx-r-panel:16px; --nx-r-card:12px; --nx-r-chip:999px;
  --nx-max:1200px; --nx-ease:cubic-bezier(.2,.7,.2,1);
  --nxb-sticky:104px; /* alto aproximado de la cabecera fija del sitio */
}

/* ---------- base ---------- */
.nxb{background:var(--nx-paper);color:var(--nx-ink);font-family:var(--nx-text);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:96px}
.nxb *,.nxb *::before,.nxb *::after{box-sizing:border-box}
.nxb :where(h1,h2,h3,h4){font-family:var(--nx-display);color:var(--nx-ink);margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.15}
/* resets con especificidad (0,1,0): ganan a Bootstrap/Tailwind (0,0,1) y pierden ante cualquier clase posterior */
.nxb :where(p){margin:0}
.nxb :where(a){color:inherit;text-decoration:none}
.nxb :where(ul,ol){margin:0;padding:0}
.nxb :where(table){caption-side:bottom}
.nxb button,.nxb input{font:inherit;color:inherit}
.nxb :focus-visible{outline:2px solid var(--nx-blue);outline-offset:3px;border-radius:4px}
.nxb-wrap{max-width:var(--nx-max);margin:0 auto;padding:0 24px}
.nxb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* botones */
.nxb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:10px;
  font-family:var(--nx-text);font-weight:600;font-size:.9375rem;line-height:1;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s var(--nx-ease),border-color .15s var(--nx-ease),color .15s var(--nx-ease)}
.nxb-btn--pri{background:var(--nx-blue);color:#fff}
.nxb-btn--pri:hover{background:var(--nx-blue-d);color:#fff}
.nxb-btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.nxb-btn--ghost:hover{border-color:#fff}
.nxb-btn--line{border-color:var(--nx-line);background:var(--nx-surface);color:var(--nx-ink)}
.nxb-btn--line:hover{border-color:var(--nx-ink-3)}

/* ═══════════ ÍNDICE ═══════════ */
.nxb-hero{padding:72px 0 48px}
.nxb-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:end}
.nxb-hero h1{font-size:clamp(2.4rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.035em;font-weight:600;max-width:15ch}
.nxb-hero__sub{margin-top:20px;font-size:1.1875rem;line-height:1.55;color:var(--nx-ink-2);max-width:54ch}
.nxb-search{position:relative}
.nxb-search label{display:block;font-size:.875rem;color:var(--nx-ink-2);margin-bottom:8px;font-weight:500}
.nxb-search input{width:100%;height:52px;border:1px solid var(--nx-line);border-radius:var(--nx-r-card);background:var(--nx-surface);
  padding:0 16px 0 46px;font-size:1rem;color:var(--nx-ink);outline:none;transition:border-color .15s}
.nxb-search input::placeholder{color:var(--nx-ink-3)}
.nxb-search input:focus{border-color:var(--nx-blue);box-shadow:0 0 0 3px var(--nx-blue-50)}
.nxb-search svg{position:absolute;left:16px;bottom:16px;color:var(--nx-ink-3)}

.nxb-sec{padding:40px 0}
.nxb-sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:20px}
.nxb-sec__head h2{font-size:1.625rem}
.nxb-sec__head p{color:var(--nx-ink-2);font-size:.9375rem;max-width:46ch;text-align:right}

/* índice por sector: el elemento protagonista */
.nxb-ledger{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:var(--nx-r-panel);overflow:hidden;list-style:none}
.nxb-ledger li{border-top:1px solid var(--nx-line)}
.nxb-ledger li:first-child{border-top:0}
.nxb-row{display:grid;grid-template-columns:200px minmax(0,1fr) 120px 150px;align-items:center;gap:24px;padding:22px 28px;position:relative}
.nxb-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nx-blue);transform:scaleY(0);transition:transform .2s var(--nx-ease)}
.nxb-row:hover{background:#FAFBFD}
.nxb-row:hover::before,.nxb-row:focus-within::before{transform:scaleY(1)}
.nxb-row__sector{font-family:var(--nx-display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.nxb-row__sector small{display:block;font-family:var(--nx-text);font-size:.8125rem;font-weight:400;color:var(--nx-ink-3);letter-spacing:0;margin-top:2px}
.nxb-row__title a{font-size:1.0625rem;font-weight:500;line-height:1.4;color:var(--nx-ink)}
.nxb-row__title a::after{content:"";position:absolute;inset:0}
.nxb-row:hover .nxb-row__title a{color:var(--nx-blue)}
.nxb-row__title p{color:var(--nx-ink-2);font-size:.9375rem;margin-top:4px;line-height:1.5}
.nxb-row__meta{font-size:.875rem;color:var(--nx-ink-3);white-space:nowrap}
.nxb-row__demo{position:relative;z-index:1;justify-self:end;font-size:.875rem;font-weight:600;color:var(--nx-blue);padding:8px 0;white-space:nowrap}
.nxb-row__demo:hover{text-decoration:underline;text-underline-offset:3px}

/* guías de producto */
.nxb-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none}
.nxb-guide{position:relative;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:var(--nx-r-card);padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px;height:100%}
.nxb-guide:hover{border-color:var(--nx-ink-3)}
.nxb-guide h3{font-size:1.25rem;line-height:1.25}
.nxb-guide h3 a::after{content:"";position:absolute;inset:0}
.nxb-guide p{color:var(--nx-ink-2);font-size:.9375rem;line-height:1.55}
.nxb-guide__meta{margin-top:auto;padding-top:8px;font-size:.8125rem;color:var(--nx-ink-3)}

/* todos los artículos */
.nxb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.nxb-chip{height:36px;padding:0 14px;border-radius:var(--nx-r-chip);border:1px solid var(--nx-line);background:var(--nx-surface);
  font-size:.875rem;font-weight:500;color:var(--nx-ink-2);cursor:pointer}
.nxb-chip:hover{border-color:var(--nx-ink-3);color:var(--nx-ink)}
.nxb-chip[aria-pressed="true"]{background:var(--nx-ink);border-color:var(--nx-ink);color:#fff}
.nxb-list{list-style:none;border-top:1px solid var(--nx-line)}
.nxb-item{border-bottom:1px solid var(--nx-line)}
.nxb-item a{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;padding:20px 4px;align-items:baseline}
.nxb-item h3{font-family:var(--nx-text);font-size:1.0625rem;font-weight:600;letter-spacing:0;line-height:1.4}
.nxb-item a:hover h3{color:var(--nx-blue)}
.nxb-item p{color:var(--nx-ink-2);font-size:.9375rem;margin-top:4px;max-width:70ch}
.nxb-item__meta{font-size:.8125rem;color:var(--nx-ink-3);text-align:right}
.nxb-item__meta span{display:block}
.nxb-empty{padding:32px 4px;color:var(--nx-ink-2)}

/* autor (página) */
.nxb-authorpage{display:grid;grid-template-columns:120px minmax(0,1fr);gap:32px;align-items:start;max-width:860px}
.nxb-authorpage h1{font-size:clamp(2.2rem,4.5vw,3.25rem);letter-spacing:-.03em}
.nxb-authorpage .nxb-role{font-size:1.0625rem;color:var(--nx-ink-2);margin-top:8px}
.nxb-authorpage .nxb-bio{margin-top:20px;font-size:1.0625rem;line-height:1.7;color:var(--nx-ink);max-width:64ch}
.nxb-authorpage .nxb-bio p+p{margin-top:12px}

/* ═══════════ ARTÍCULO ═══════════ */
.nxb-art__head{padding:48px 0 36px;border-bottom:1px solid var(--nx-line);background:var(--nx-surface)}
.nxb-crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.875rem;color:var(--nx-ink-3);margin-bottom:24px;list-style:none}
.nxb-crumbs li+li::before{content:"/";margin-right:6px;color:var(--nx-line)}
.nxb-crumbs a:hover{color:var(--nx-blue)}
.nxb-art__headin{max-width:calc(220px + 96px + 38rem);margin:0 auto}
.nxb-art__head h1{font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.06;letter-spacing:-.03em;max-width:24ch}
.nxb-lead{margin-top:20px;font-size:1.1875rem;line-height:1.55;color:var(--nx-ink-2);max-width:62ch}
.nxb-byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.nxb-who{display:flex;align-items:center;gap:12px}
.nxb-avatar{width:44px;height:44px;border-radius:50%;background:var(--nx-ink);color:#fff;display:grid;place-items:center;
  font-family:var(--nx-display);font-weight:600;font-size:.9375rem;letter-spacing:.02em;flex:none;overflow:hidden}
.nxb-avatar img{width:100%;height:100%;object-fit:cover}
.nxb-who b{display:block;font-weight:600;font-size:.9375rem}
.nxb-who a:hover b{color:var(--nx-blue)}
.nxb-who__txt span{display:block;font-size:.8125rem;color:var(--nx-ink-3)}
.nxb-dates{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.875rem;color:var(--nx-ink-2);list-style:none}
.nxb-dates li{padding-left:20px;border-left:1px solid var(--nx-line)}
.nxb-dates li:first-child{padding-left:0;border-left:0}
.nxb-dates b{font-weight:500;color:var(--nx-ink-3);margin-right:4px}

.nxb-art__grid{display:grid;grid-template-columns:220px minmax(0,38rem);gap:96px;padding-top:48px;align-items:start;justify-content:center}
.nxb-toc{position:sticky;top:var(--nxb-sticky);font-size:.875rem;max-height:calc(100vh - var(--nxb-sticky) - 24px);overflow:auto}
.nxb-toc summary{list-style:none;font-family:var(--nx-display);font-weight:600;font-size:.9375rem;color:var(--nx-ink);margin-bottom:12px;cursor:default}
.nxb-toc summary::-webkit-details-marker{display:none}
.nxb-toc ol{list-style:none;border-left:1px solid var(--nx-line)}
.nxb-toc li a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--nx-ink-2);line-height:1.4}
.nxb-toc li.is-h3 a{padding-left:28px;font-size:.8125rem}
.nxb-toc li a:hover{color:var(--nx-ink)}
.nxb-toc li a[aria-current="true"]{color:var(--nx-blue);border-left-color:var(--nx-blue)}

/* cuerpo: medida ≤ 68ch, 18px / 1.72 */
.nxb-body{max-width:38rem;font-size:1.125rem;line-height:1.72;color:#16263F}
.nxb-body > * + *{margin-top:1.1em}
.nxb-body h2{font-size:1.75rem;line-height:1.2;margin-top:2.3em;scroll-margin-top:calc(var(--nxb-sticky) + 12px)}
.nxb-body h3{font-size:1.25rem;line-height:1.3;margin-top:1.9em;scroll-margin-top:calc(var(--nxb-sticky) + 12px)}
.nxb-body h2 + *,.nxb-body h3 + *{margin-top:.6em}
.nxb-body ul,.nxb-body ol{padding-left:1.3em}
.nxb-body li{padding-left:.2em}
.nxb-body li + li{margin-top:.5em}
.nxb-body li::marker{color:var(--nx-ink-3)}
.nxb-body ol li::marker{font-family:var(--nx-display);font-weight:600;color:var(--nx-ink-2)}
.nxb-body strong,.nxb-body b{font-weight:600;color:var(--nx-ink)}
.nxb-body a{color:var(--nx-blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nxb-body a:hover{color:var(--nx-blue-d);text-decoration-thickness:2px}
.nxb-body blockquote{margin-left:0;padding:4px 0 4px 20px;border-left:3px solid var(--nx-line);color:var(--nx-ink-2)}
.nxb-answer{background:var(--nx-surface);border:1px solid var(--nx-line);border-left:3px solid var(--nx-blue);border-radius:4px var(--nx-r-card) var(--nx-r-card) 4px;padding:20px 24px}
.nxb-answer__label{font-family:var(--nx-display);font-weight:600;font-size:.875rem;color:var(--nx-blue);margin-bottom:6px}
.nxb-answer p{font-size:1.1875rem;line-height:1.6;color:var(--nx-ink)}
.nxb-table{overflow-x:auto;border:1px solid var(--nx-line);border-radius:var(--nx-r-card);background:var(--nx-surface);margin-top:1.4em !important;-webkit-overflow-scrolling:touch}
.nxb-table table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.45;min-width:560px}
.nxb-table th{text-align:left;font-weight:600;background:#F7F9FB;color:var(--nx-ink);padding:12px 16px;border-bottom:1px solid var(--nx-line);vertical-align:bottom}
.nxb-table td{padding:12px 16px;border-bottom:1px solid var(--nx-line);vertical-align:top;color:var(--nx-ink-2)}
.nxb-table tr:last-child td{border-bottom:0}
.nxb-table td:first-child{color:var(--nx-ink);font-weight:500}
.nxb-note{font-size:.9375rem;color:var(--nx-ink-2);background:#FFF4DE;border-radius:var(--nx-r-card);padding:14px 18px}

/* FAQ */
.nxb-faq{margin-top:64px;max-width:38rem}
.nxb-faq h2{font-size:1.75rem;margin-bottom:16px}
.nxb-faq details{border-top:1px solid var(--nx-line)}
.nxb-faq details:last-child{border-bottom:1px solid var(--nx-line)}
.nxb-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:600;font-size:1.0625rem;line-height:1.4}
.nxb-faq summary::-webkit-details-marker{display:none}
.nxb-faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-right:2px solid var(--nx-ink-3);border-bottom:2px solid var(--nx-ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--nx-ease)}
.nxb-faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.nxb-faq summary:hover{color:var(--nx-blue)}
.nxb-faq details p{padding:0 0 20px;font-size:1.0625rem;line-height:1.7;color:var(--nx-ink-2)}

/* autor y compartir */
.nxb-authorbox{margin-top:56px;max-width:38rem;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;background:var(--nx-surface);
  border:1px solid var(--nx-line);border-radius:var(--nx-r-panel);padding:24px}
.nxb-authorbox .nxb-avatar{width:64px;height:64px;font-size:1.25rem}
.nxb-authorbox h2{font-size:1.125rem}
.nxb-authorbox .nxb-role{font-size:.875rem;color:var(--nx-ink-3);margin-top:2px}
.nxb-authorbox p.nxb-bio{margin-top:12px;font-size:.9688rem;line-height:1.65;color:var(--nx-ink-2)}
.nxb-authorbox .nxb-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px;font-size:.875rem;font-weight:600}
.nxb-authorbox .nxb-links a{color:var(--nx-blue)}
.nxb-authorbox .nxb-links a:hover{text-decoration:underline;text-underline-offset:3px}
.nxb-share{margin-top:32px;max-width:38rem;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.nxb-share > span{font-size:.875rem;color:var(--nx-ink-2);margin-right:8px}
.nxb-share a,.nxb-share button{width:40px;height:40px;border-radius:10px;border:1px solid var(--nx-line);background:var(--nx-surface);display:grid;place-items:center;color:var(--nx-ink-2);cursor:pointer}
.nxb-share a:hover,.nxb-share button:hover{color:var(--nx-ink);border-color:var(--nx-ink-3)}
.nxb-share .is-done{color:#0FA968;border-color:#0FA968}

/* CTA por sector */
.nxb-cta{margin-top:80px;background:var(--nx-ink);color:#fff;border-radius:var(--nx-r-panel);padding:44px 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.nxb-cta h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;max-width:22ch}
.nxb-cta p{color:#B9C3D4;margin-top:12px;font-size:1rem;line-height:1.6;max-width:56ch}
.nxb-cta__actions{display:flex;flex-direction:column;gap:10px;min-width:250px}
.nxb-cta__small{font-size:.8125rem;color:#8D9AB0;text-align:center;margin-top:2px}
.nxb-cta__small a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* relacionados */
.nxb-related{margin-top:72px}
.nxb-related h2{font-size:1.5rem;margin-bottom:20px}

/* paginación simple / aviso noindex */
.nxb-flag{display:inline-block;font-size:.8125rem;font-weight:500;color:#8A5A00;background:#FFF4DE;border-radius:var(--nx-r-chip);padding:4px 12px;margin-bottom:16px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nxb-art__headin{max-width:38rem}
  .nxb-art__grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:28px}
  .nxb-toc{position:static;max-height:none;max-width:38rem;width:100%;margin-left:auto;margin-right:auto;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:var(--nx-r-card);padding:14px 18px;margin-bottom:32px}
  .nxb-toc summary{cursor:pointer;margin:0;display:flex;justify-content:space-between}
  .nxb-toc summary::after{content:"Mostrar";font-family:var(--nx-text);font-weight:500;font-size:.8125rem;color:var(--nx-blue)}
  .nxb-toc[open] summary::after{content:"Ocultar"}
  .nxb-toc[open] summary{margin-bottom:10px}
  .nxb-body,.nxb-faq,.nxb-authorbox,.nxb-share{margin-left:auto;margin-right:auto}
  .nxb-row{grid-template-columns:160px minmax(0,1fr) 130px;padding:20px 24px}
  .nxb-row__meta{display:none}
}
@media (max-width:860px){
  .nxb-hero{padding:44px 0 28px}
  .nxb-hero__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .nxb-sec__head{flex-direction:column;align-items:flex-start;gap:6px}
  .nxb-sec__head p{text-align:left}
  .nxb-guides{grid-template-columns:minmax(0,1fr)}
  .nxb-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 20px;padding:2px 16px 6px;scrollbar-width:none}
  .nxb-chips::-webkit-scrollbar{display:none}
  .nxb-chip{flex:none}
  .nxb-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px}
  .nxb-row__sector{font-size:1rem;display:flex;gap:8px;align-items:baseline}
  .nxb-row__sector small{margin:0}
  .nxb-row__demo{justify-self:start;padding:6px 0 0}
  .nxb-item a{grid-template-columns:minmax(0,1fr);gap:6px}
  .nxb-item__meta{text-align:left}
  .nxb-item__meta span{display:inline;margin-right:14px}
  .nxb-cta{grid-template-columns:minmax(0,1fr);padding:32px 24px}
  .nxb-cta__actions{min-width:0}
  .nxb-authorpage{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:560px){
  .nxb{font-size:16px}
  .nxb-wrap{padding:0 16px}
  .nxb-art__head{padding:28px 0 28px}
  .nxb-body{font-size:1.0625rem;line-height:1.7}
  .nxb-body h2{font-size:1.5rem}
  .nxb-answer{padding:16px 18px}
  .nxb-answer p{font-size:1.0625rem}
  .nxb-lead{font-size:1.0625rem}
  .nxb-dates li{padding-left:0;border-left:0}
  .nxb-authorbox{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .nxb *,.nxb *::before,.nxb *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}
@media print{
  .nxb-toc,.nxb-share,.nxb-cta,.nxb-related{display:none}
  .nxb-art__grid{display:block}
}