:root{
  --azul:#1975f1; --azul-osc:#1259c4; --azul-suave:#eaf2fe;
  --rojo:#f93a37; --verde:#12b76a; --amarillo:#f79009;
  --tinta:#101828; --texto:#475467; --tenue:#667085;
  --linea:#e4e7ec; --fondo:#f7f9fc; --blanco:#fff;
  --radio:14px; --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--texto);background:var(--fondo);-webkit-font-smoothing:antialiased;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column}
/* Los hijos del body son flex items: sin width el `margin:0 auto` de .kb-wrap
   gana sobre el stretch y encoge la página al ancho del contenido. */
body > *{width:100%}
body > .kb-foot{margin-top:auto}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
.kb-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── Barra superior ─────────────────────────────────────────── */
.kb-top{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:50}
.kb-top-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.kb-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.kb-logo:hover{text-decoration:none}
.kb-logo img{height:26px;width:auto;display:block}
.kb-logo-txt{color:var(--tenue);font-size:17px;font-weight:500;
  border-left:1px solid var(--linea);padding-left:11px;line-height:1.2}
.kb-top-nav{display:flex;align-items:center;gap:22px;font-size:14px}
.kb-top-nav a{color:var(--texto);font-weight:500}
.kb-btn-top{background:var(--azul);color:#fff !important;padding:0 18px;height:40px;
  display:inline-flex;align-items:center;border-radius:10px}
.kb-btn-top:hover{background:var(--azul-osc);text-decoration:none}

/* ── Hero ───────────────────────────────────────────────────── */
.kb-hero{background:linear-gradient(135deg,#1975f1 0%,#0f4fa8 100%);color:#fff;padding:72px 0 84px;text-align:center}
.kb-hero h1{margin:0 0 12px;font-size:38px;line-height:1.2;font-weight:700;letter-spacing:-.5px}
.kb-hero p{margin:0 auto 32px;max-width:600px;font-size:17px;color:#d6e5fd}

/* ── Buscador ───────────────────────────────────────────────── */
.kb-search{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linea);
  border-radius:12px;padding:0 8px 0 16px;height:48px;max-width:520px}
.kb-search i{color:var(--tenue);font-size:15px}
.kb-search input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--tinta);background:transparent;height:100%}
.kb-search button{border:0;background:var(--azul);color:#fff;font:inherit;font-weight:600;font-size:14px;
  height:36px;padding:0 18px;border-radius:9px;cursor:pointer}
.kb-search button:hover{background:var(--azul-osc)}
.kb-search-lg{max-width:680px;margin:0 auto;height:60px;border:0;box-shadow:0 12px 32px rgba(8,35,80,.22);padding-left:22px}
.kb-search-lg input{font-size:16px}
.kb-search-lg button{height:44px;padding:0 24px}

/* Sugerencias en vivo del buscador */
.kb-sug{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;
  background:#fff;border:1px solid var(--linea);border-radius:12px;overflow:hidden;
  box-shadow:0 16px 40px rgba(16,24,40,.16);text-align:left}
.kb-sug.on{display:block}
.kb-sug a{display:block;padding:11px 16px;border-bottom:1px solid var(--linea)}
.kb-sug a:last-child{border-bottom:0}
.kb-sug a:hover,.kb-sug a.on{background:var(--azul-suave);text-decoration:none}
.kb-sug b{display:block;color:var(--tinta);font-size:14.5px;font-weight:600;line-height:1.35}
.kb-sug span{display:block;color:var(--tenue);font-size:12.5px;margin-top:2px}
.kb-sug mark{background:#fff2c2;color:inherit;padding:0;border-radius:2px}
.kb-sug-vacio{padding:14px 16px;color:var(--tenue);font-size:14px}

/* ── Rejilla de categorías ──────────────────────────────────── */
.kb-seccion{padding:56px 0}
.kb-seccion-t{margin:0 0 6px;color:var(--tinta);font-size:22px;font-weight:700;letter-spacing:-.2px}
.kb-seccion-s{margin:0 0 28px;font-size:15px}
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kb-cat{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 24px;transition:.16s;text-decoration:none}
.kb-cat:hover{text-decoration:none;border-color:#c9dcfb;box-shadow:0 8px 24px rgba(16,24,40,.07);transform:translateY(-2px)}
.kb-cat-ico{width:44px;height:44px;border-radius:11px;background:var(--azul-suave);color:var(--azul);
  display:grid;place-items:center;font-size:18px;margin-bottom:16px}
.kb-cat h3{margin:0 0 6px;color:var(--tinta);font-size:16px;font-weight:600}
.kb-cat p{margin:0 0 14px;font-size:14px;color:var(--texto)}
.kb-cat span{font-size:13px;color:var(--tenue);font-weight:500}

/* ── Migas ──────────────────────────────────────────────────── */
.kb-migas{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tenue);padding:22px 0 0}
.kb-migas a{color:var(--tenue)}
.kb-migas i{font-size:10px;opacity:.6}
.kb-migas .kb-actual{color:var(--tinta);font-weight:500}

/* ── Cabecera de página ─────────────────────────────────────── */
.kb-cab{padding:26px 0 30px;border-bottom:1px solid var(--linea);background:#fff}
.kb-cab h1{margin:0 0 8px;color:var(--tinta);font-size:30px;font-weight:700;letter-spacing:-.4px}
.kb-cab p{margin:0;font-size:15.5px}

/* ── Lista de artículos ─────────────────────────────────────── */
.kb-lista{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.kb-item{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--linea);
  text-decoration:none;transition:background .14s}
.kb-item:last-child{border-bottom:0}
.kb-item:hover{background:#f9fbff;text-decoration:none}
.kb-item-ico{color:var(--azul);font-size:15px;width:20px;text-align:center;flex:none}
.kb-item-txt{flex:1;min-width:0}
.kb-item-txt b{display:block;color:var(--tinta);font-size:15px;font-weight:600;margin-bottom:2px}
.kb-item-txt span{font-size:13.5px;color:var(--texto)}
.kb-item-fl{color:var(--tenue);font-size:13px;flex:none}

/* ── Artículo ───────────────────────────────────────────────── */
.kb-art{display:grid;grid-template-columns:250px minmax(0,1fr) 220px;gap:44px;padding:34px 0 70px;align-items:start}
.kb-aside{position:sticky;top:92px}
.kb-aside-t{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--tenue);margin:0 0 12px}
.kb-aside a{display:block;padding:7px 12px;border-radius:8px;font-size:14px;color:var(--texto);line-height:1.45}
.kb-aside a:hover{background:#eef4ff;text-decoration:none}
.kb-aside a.on{background:var(--azul-suave);color:var(--azul);font-weight:600}
.kb-toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--linea);font-size:13.5px;color:var(--tenue)}
.kb-toc a:hover{color:var(--azul);border-color:var(--azul);text-decoration:none}
.kb-toc .n3{padding-left:24px;font-size:13px}

.kb-cuerpo{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:40px 46px}
.kb-cuerpo h1{margin:0 0 10px;color:var(--tinta);font-size:30px;font-weight:700;letter-spacing:-.4px;line-height:1.25}
.kb-cuerpo h2{margin:42px 0 14px;color:var(--tinta);font-size:21px;font-weight:700;padding-top:6px}
.kb-cuerpo h3{margin:30px 0 10px;color:var(--tinta);font-size:17px;font-weight:600}
/* El header es sticky de 68px: sin este margen el título del ancla queda debajo. */
.kb-cuerpo h2[id],.kb-cuerpo h3[id]{scroll-margin-top:92px}
.kb-cuerpo p{margin:0 0 15px;font-size:15.5px}
.kb-cuerpo ul,.kb-cuerpo ol{margin:0 0 18px;padding-left:22px;font-size:15.5px}
.kb-cuerpo li{margin-bottom:8px}
.kb-cuerpo hr{border:0;border-top:1px solid var(--linea);margin:34px 0}
.kb-cuerpo code{background:#f2f4f7;border:1px solid var(--linea);border-radius:5px;padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#344054}
.kb-pre{background:#101828;color:#e4e7ec;border-radius:10px;padding:16px 18px;overflow-x:auto;font-size:13px;margin:0 0 18px}
.kb-pre code{background:none;border:0;color:inherit;padding:0}
.kb-resumen{margin:0 0 26px;font-size:16.5px;color:var(--texto);padding-bottom:22px;border-bottom:1px solid var(--linea)}

.kb-fig{margin:26px 0;text-align:center}
.kb-fig img{max-width:100%;border:1px solid var(--linea);border-radius:10px;box-shadow:0 4px 16px rgba(16,24,40,.06);
  cursor:zoom-in;transition:box-shadow .15s}
.kb-fig img:hover{box-shadow:0 8px 26px rgba(16,24,40,.16)}

/* Visor de capturas a pantalla completa */
.kb-lb{display:none;position:fixed;inset:0;z-index:200;background:rgba(16,24,40,.86);
  align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.kb-lb.on{display:flex}
.kb-lb img{max-width:100%;max-height:100%;border-radius:10px;background:#fff;cursor:default;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.kb-lb-x{position:absolute;top:18px;right:22px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer;line-height:1}
.kb-lb-x:hover{background:rgba(255,255,255,.26)}
.kb-fig figcaption{margin-top:10px;font-size:13px;color:var(--tenue)}

.kb-tabla-wrap{overflow-x:auto;margin:0 0 20px}
.kb-tabla{width:100%;border-collapse:collapse;font-size:14.5px}
.kb-tabla th{text-align:left;background:#f9fafb;color:var(--tenue);font-size:11.5px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;padding:11px 14px;border-bottom:1px solid var(--linea)}
.kb-tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);color:var(--texto)}
.kb-tabla tr:last-child td{border-bottom:0}

.kb-callout{display:flex;gap:14px;border-radius:12px;padding:16px 18px;margin:0 0 20px;border:1px solid}
.kb-callout-body>*:last-child{margin-bottom:0}
.kb-callout-t{font-weight:600;color:var(--tinta);margin:0 0 4px !important}
.kb-callout-ico{font-size:15px;padding-top:2px}
.kb-nota{background:#f0f6ff;border-color:#cfe0fd}.kb-nota .kb-callout-ico{color:var(--azul)}
.kb-ojo{background:#fef4f2;border-color:#fcd9d5}.kb-ojo .kb-callout-ico{color:var(--rojo)}
.kb-tip{background:#f2fbf6;border-color:#c8ecd9}.kb-tip .kb-callout-ico{color:var(--verde)}
.kb-paso{background:#fffaeb;border-color:#fdeab8}.kb-paso .kb-callout-ico{color:var(--amarillo)}

.kb-navpie{display:flex;justify-content:space-between;gap:16px;margin:32px 0 56px}
.kb-navpie a{flex:1;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:16px 20px}
.kb-navpie a:hover{border-color:#c9dcfb;text-decoration:none}
.kb-navpie span{display:block;font-size:12px;color:var(--tenue);margin-bottom:3px}
.kb-navpie b{color:var(--tinta);font-size:14.5px;font-weight:600}
.kb-navpie .fin{text-align:right}

/* ── Vacío / resultados ─────────────────────────────────────── */
.kb-vacio{background:#fff;border:1px dashed var(--linea);border-radius:var(--radio);padding:54px;text-align:center}
.kb-vacio i{font-size:26px;color:var(--tenue);margin-bottom:14px;display:block}
.kb-vacio b{display:block;color:var(--tinta);font-size:16px;margin-bottom:6px}
.kb-badge{display:inline-block;background:var(--azul-suave);color:var(--azul);font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:20px;margin-bottom:8px}

/* ── Pie ────────────────────────────────────────────────────── */
.kb-foot{background:#fff;border-top:1px solid var(--linea);margin-top:60px;padding:34px 0}
.kb-foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px}
.kb-foot-t{color:var(--tinta);font-weight:600;margin:0 0 4px}
.kb-foot p{margin:0}
.kb-foot-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

@media (max-width:1000px){
  .kb-grid{grid-template-columns:repeat(2,1fr)}
  .kb-art{grid-template-columns:minmax(0,1fr);gap:24px}
  .kb-aside,.kb-toc{position:static;display:none}
}
@media (max-width:640px){
  .kb-grid{grid-template-columns:1fr}
  .kb-hero{padding:48px 0 56px}.kb-hero h1{font-size:27px}
  .kb-cuerpo{padding:26px 20px}
  .kb-search-lg{height:52px}
  .kb-top-nav a:not(.kb-btn-top){display:none}
}