/* ============================================================
   kit.css — componentes de las landings de ForHosting KIT.
   Complementa site.css (hereda sus variables de marca). No se
   carga en el resto del sitio.
   ============================================================ */

/* --- hero de capacidad --- */
.kit-hero{padding:64px 0 40px;border-bottom:1px solid var(--linea)}
.kit-hero .eyebrow{color:var(--lima-deep);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
.kit-hero h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.98;font-size:clamp(32px,5vw,56px);margin:.2em 0 .3em}
.kit-hero .lead{font-size:clamp(17px,2vw,20px);color:var(--gris-txt);max-width:60ch}
.kit-hero .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.kit-capability-page .kit-hero{padding:24px 0 16px}
.kit-capability-page .kit-hero .hero-actions{margin-top:18px}
.kit-capability-page .kit-badges{margin-top:16px}
.kit-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.kit-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border:1px solid var(--linea-2);border-radius:999px;background:var(--panel);color:var(--tinta-2)}
.kit-badge.stable{border-color:var(--lima-deep);color:var(--lima-deep)}
.kit-badge.beta{border-color:var(--naranja-deep);color:var(--naranja-deep)}
/* Sustituye al botón de compra cuando la tarea no se puede ejecutar. Ocupa su
   sitio a propósito: el hueco explica por qué no hay botón. */
.kit-unavailable{margin-top:4px;padding:12px 16px;border:1px solid var(--naranja-deep);border-radius:12px;background:var(--panel);color:var(--tinta-2);font-size:14px;max-width:60ch}

/* --- endpoint --- */
.endpoint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--tinta);color:#e9ece5;padding:14px 18px;border-radius:12px;font-family:var(--font-mono);font-size:15px;margin:8px 0 20px}
.endpoint .method{font-weight:700;color:var(--lima);padding:2px 8px;border:1px solid var(--lima-deep);border-radius:6px;font-size:13px}
.endpoint .path{overflow-x:auto;white-space:nowrap}
.endpoint .copy{margin-inline-start:auto;cursor:pointer;color:var(--gris-500);background:none;border:0;font-size:12px}

/* --- pestañas de código --- */
.code-tabs{border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin:16px 0 28px;background:var(--tinta)}
.code-tabs .tabs{display:flex;gap:0;background:var(--tinta-2);border-bottom:1px solid rgba(255,255,255,.08)}
.code-tabs .tabs button{background:none;border:0;color:var(--gris-500);padding:11px 16px;font-family:var(--font-mono);font-size:13px;cursor:pointer;border-bottom:2px solid transparent}
.code-tabs .tabs button[aria-selected=true]{color:var(--lima);border-bottom-color:var(--lima)}
.code-tabs .tabs button:focus-visible,.code-tabs pre:focus-visible{outline:3px solid var(--lima);outline-offset:-3px}
.code-tabs pre{margin:0;padding:18px 20px;overflow-x:auto;color:#e9ece5;font-family:var(--font-mono);font-size:13.5px;line-height:1.6}
.code-tabs pre[hidden]{display:none}
.code-tabs .tok-str{color:var(--lima-hot)}
.code-tabs .tok-key{color:#8fd3ff}
.code-tabs .tok-com{color:var(--gris-500)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.two-col>*{min-width:0}

/* --- tablas de parámetros / errores --- */
.kit-table{width:100%;border-collapse:collapse;margin:14px 0 26px;font-size:14.5px}
.kit-table th{text-align:start;padding:9px 12px;background:var(--fondo-2);color:var(--gris-txt);font-size:12px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--linea)}
.kit-table td{padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.kit-table code{font-family:var(--font-mono);font-size:13px;background:var(--fondo-2);padding:1px 6px;border-radius:5px;color:var(--tinta-2)}
.kit-table .req{color:var(--naranja-deep);font-weight:600;font-size:12px}
.kit-table .opt{color:var(--gris-500);font-size:12px}

/* --- precio --- */
.price-card{border:1px solid var(--linea-2);border-radius:14px;padding:22px 24px;background:var(--panel);max-width:520px}
.price-card .pc-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--linea)}
.price-card .pc-row:last-child{border:0}
.price-card .pc-amount{font-family:var(--font-display);font-weight:800;font-size:22px}
.price-card .pc-note{color:var(--gris-txt);font-size:13px;margin-top:12px}

/* --- casos de uso --- */
.use-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0 28px}
.use-case{border:1px solid var(--linea);border-radius:12px;padding:18px 20px;background:var(--panel)}
.use-case h3{font-size:16px;margin:0 0 6px}
.use-case p{color:var(--gris-txt);font-size:14.5px;margin:0}

/* --- FAQ --- */
.faq details{border-bottom:1px solid var(--linea);padding:14px 0}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lima-deep);font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--gris-txt);margin:10px 0 0;max-width:70ch}

/* --- relacionadas (silo) --- */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.related a{border:1px solid var(--linea);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--tinta);background:var(--panel);transition:border-color .15s}
.related a:hover{border-color:var(--lima-deep)}
.related a .r-kw{display:block;font-weight:600;font-size:14.5px}
.related a .r-cat{display:block;color:var(--gris-500);font-size:12px;margin-top:3px}

/* --- hub / catálogo --- */
.hub-hero{padding:56px 0 32px}
.hub-search{width:100%;max-width:520px;padding:13px 16px;border:1px solid var(--linea-2);border-radius:10px;font-size:15px;font-family:inherit;margin-top:20px}
.hub-cat{margin:40px 0}
.hub-cat h2{font-family:var(--font-display);text-transform:uppercase;font-size:22px;border-bottom:2px solid var(--lima);display:inline-block;padding-bottom:4px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:18px}
.hub-item{border:1px solid var(--linea);border-radius:10px;padding:15px 17px;text-decoration:none;color:var(--tinta);background:var(--panel);transition:border-color .15s,transform .15s}
.hub-item:hover{border-color:var(--lima-deep);transform:translateY(-2px)}
.hub-item .hi-title{font-weight:600;font-size:15px}
.hub-item .hi-desc{color:var(--gris-txt);font-size:13px;margin-top:4px}
.hub-item .hi-meta{color:var(--gris-500);font-size:12px;margin-top:8px;font-family:var(--font-mono)}

.section-label{font-family:var(--font-display);text-transform:uppercase;font-size:14px;letter-spacing:.05em;color:var(--gris-txt);margin:34px 0 6px}

/* --- guía en prosa (SEO) --- */
.kit-guide{max-width:74ch}
.kit-guide .guide-h{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(19px,2.4vw,24px);letter-spacing:.01em;margin:30px 0 8px;line-height:1.05}
.kit-guide .guide-h:first-child{margin-top:8px}
.kit-guide p{color:var(--tinta-2);font-size:16.5px;line-height:1.72;margin:0 0 6px}
.kit-guide p strong{color:var(--tinta);font-weight:700}

/* ============================================================
   Hub / landing del KIT (nuevo)
   ============================================================ */
.kh-hero{background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta-2) 100%);color:#eef1ea;padding:72px 0 64px;border-bottom:1px solid var(--linea-dark)}
.kh-hero-in{text-align:center}
.kh-eyebrow{color:var(--lima);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.kh-hero h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.98;font-size:clamp(34px,6.2vw,68px);margin:.18em 0 .12em;color:#fff}
.kh-hero .kh-hl{color:var(--lima)}
.kh-lead{font-size:clamp(16px,2vw,20px);color:#c3c9bd;max-width:66ch;margin:0 auto}
.kh-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.kh-cta.center{margin-top:24px}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#eef1ea}
.btn.ghost:hover{border-color:var(--lima);color:var(--lima)}
.kh-stats{display:flex;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap;margin-top:44px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12)}
.kh-stat{display:flex;flex-direction:column}
.kh-stat .ks-n{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,4vw,40px);color:var(--lima)}
.kh-stat .ks-l{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:#aab0a2;margin-top:2px}

.kh-block{margin:64px 0}
.kh-h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(24px,3.4vw,36px);line-height:1;margin:0 0 8px}
.kh-sub{color:var(--gris-txt);font-size:17px;max-width:64ch;margin:0 0 26px}

/* valores */
.kh-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:48px 0}
.val-card{border:1px solid var(--linea);border-radius:14px;padding:22px;background:var(--panel)}
.val-ico{font-size:26px;line-height:1}
.val-card h3{font-size:16.5px;margin:12px 0 6px}
.val-card p{color:var(--gris-txt);font-size:14.5px;line-height:1.6;margin:0}

/* soluciones */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.sol-card{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--linea);border-radius:14px;padding:18px 20px;background:var(--panel);text-decoration:none;color:var(--txt);cursor:pointer;transition:border-color .15s,transform .15s}
.sol-card:hover{border-color:var(--lima-deep);transform:translateY(-2px)}
.sol-ico{font-size:26px;line-height:1.1}
.sol-card h3{font-size:16.5px;margin:0 0 4px}
.sol-card p{color:var(--gris-txt);font-size:14px;line-height:1.55;margin:0}

/* catálogo con barra lateral */
.cat-search{width:100%;padding:15px 18px;border:1px solid var(--linea-2);border-radius:12px;font-size:16px;font-family:inherit;margin-bottom:22px;background:var(--panel)}
.cat-search:focus{outline:none;border-color:var(--lima-deep)}
.catalog{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start}
/* top = 76px de nav fijo (.nav-inner 52px + nav.main padding 12px×2) + los 16px de
   aire de siempre. Con top:16px la barra se metía DEBAJO del nav al pegarse. */
.cat-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:2px}
.cat-link{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:start;background:none;border:0;border-radius:8px;padding:9px 12px;font-size:14px;font-family:inherit;color:var(--gris-txt);cursor:pointer}
.cat-link:hover{background:var(--fondo-2);color:var(--txt)}
.cat-link.active{background:var(--tinta);color:#fff;font-weight:600}
.cat-link .cat-n{font-size:11.5px;font-family:var(--font-mono);opacity:.7}
.cat-link.active .cat-n{opacity:.85}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}
.tool-card{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:12px;padding:15px 16px;text-decoration:none;color:var(--txt);background:var(--panel);transition:border-color .15s,transform .15s,box-shadow .15s}
.tool-card:hover{border-color:var(--lima-deep);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.05)}
.tc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.tc-cat{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris-500)}
.tool-soon{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--naranja-deep);border:1px solid var(--naranja-deep);border-radius:999px;padding:1px 7px}
.tc-title{font-weight:600;font-size:15.5px;line-height:1.2}
.tc-desc{color:var(--gris-txt);font-size:13px;line-height:1.45;margin:5px 0 12px;flex:1}
.tc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--linea);padding-top:9px}
.tc-foot code{font-family:var(--font-mono);font-size:11.5px;color:var(--gris-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-price{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--lima-deep)}
.cat-empty{color:var(--gris-txt);padding:30px 0}

/* pasos */
.kh-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.step{border:1px solid var(--linea);border-radius:14px;padding:22px;background:var(--panel)}
.step-n{width:34px;height:34px;border-radius:999px;background:var(--lima);color:var(--tinta);font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px}
.step h3{font-size:17px;margin:12px 0 6px}
.step p{color:var(--gris-txt);font-size:14.5px;line-height:1.6;margin:0}

/* precios */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.plan{position:relative;border:1px solid var(--linea-2);border-radius:16px;padding:26px 24px;background:var(--panel)}
.plan.featured{border-color:var(--lima-deep);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.plan-badge{position:absolute;top:-11px;inset-inline-start:24px;background:var(--lima);color:var(--tinta);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:999px}
.plan-name{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris-txt)}
.plan-price{font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1;margin:8px 0 12px}
.plan-price span{font-size:16px;color:var(--gris-txt);font-family:var(--font-body);font-weight:400}
.plan p{color:var(--gris-txt);font-size:14px;line-height:1.6;margin:0}

@media(max-width:720px){
  .catalog{grid-template-columns:1fr}
  .cat-side{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--linea)}
  .cat-link{border:1px solid var(--linea)}
}

/* ===== reframe multicanal (2026-07-14): canales, badge gratis, sección dev ===== */
.kit-channels{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 30px;padding:14px 18px;border:1px solid var(--linea-2);border-radius:12px;background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:.8rem}
.kit-capability-page .kit-channels{margin:8px 0 12px;padding:8px 10px}
.kit-channels .ch-label{color:var(--gris-txt);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;margin-inline-end:4px}
.kit-channels .ch{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--linea-2);border-radius:999px;color:var(--txt)}
.kit-channels .ch.on{border-color:var(--lima);color:var(--lima-deep)}
.kit-channels .ch.off{opacity:.6}
.kit-channels .ch em{font-style:normal;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris-500)}
.kit-badge.free{background:var(--lima);color:var(--tinta);border-color:var(--lima)}
.kit-badge.price{font-family:var(--font-mono);font-weight:700}
.kit-dev{border-top:2px solid var(--linea-2);margin-top:20px}
.kit-dev .dev-intro{color:var(--gris-txt);max-width:70ch;margin-bottom:20px}
.kit-dev h3.section-label{margin-top:34px}
.kit-dev .dev-docs{margin-top:26px}
.kit-dev .dev-docs a{color:var(--lima-deep);font-weight:600}
.kit-capability-page #widget,.kit-capability-page #run{padding:12px 0 52px}
.kit-capability-page #widget>.section-label,.kit-capability-page #run>.section-label{margin-top:0}
.kit-capability-page #run>.pc-note{max-width:70ch;margin:4px 0 10px;font-size:13px;line-height:1.4}

@media(max-width:720px){
  .kit-capability-page .section{padding:48px 0}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .code-tabs,.code-tabs pre,.endpoint,.endpoint .path{max-width:100%;min-width:0}
  .code-tabs .tabs{overflow-x:auto}
  .kit-capability-page .crumbs{padding-top:84px;line-height:1.35}
  .kit-capability-page .kit-hero{padding:20px 0 14px}
  .kit-capability-page .kit-hero h1{font-size:clamp(30px,10vw,42px);margin:.16em 0 .22em}
  .kit-capability-page .kit-hero .lead{font-size:16px;line-height:1.45}
  .kit-capability-page .kit-badges{margin-top:12px}
  .kit-capability-page .kit-hero .hero-actions{flex-wrap:wrap;gap:8px;margin-top:14px}
  .kit-capability-page .kit-hero .hero-actions .btn{width:auto;min-width:min(100%,13rem);flex:1;padding:10px 8px;font-size:12px}
  .kit-capability-page .kit-channels{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:8px 0 14px;padding:8px 10px;scrollbar-width:thin}
  .kit-capability-page .kit-channels .ch-label,.kit-capability-page .kit-channels .ch{flex:none}
  .kit-capability-page .kit-channels .ch{padding:5px 9px}
  .kit-capability-page #widget,.kit-capability-page #run{padding:16px 0 48px}
}

/* ===== documentación (/kit/documentation) — capa MÍNIMA sobre lo que ya existe =====
   La doc se pinta con los componentes que ya había: .kit-hero, .kit-table,
   .code-tabs, .endpoint, .kit-badge, .kh-block, .kh-steps, .price-grid,
   .catalog/.cat-side/.cat-link. Antes emitía .doc-hero/.doc-table/.doc-code…
   —un namespace paralelo que NADIE definió nunca— y por eso 15 tablas y todos
   los <pre> salían con los valores por defecto del navegador.
   Aquí va SOLO lo que de verdad no existía. Si esto crece, es que se está
   volviendo a inventar un segundo sistema. */

/* <code> dentro de prosa. Es el hueco real: solo estaban estilados .prose code
   y .kit-table code, y no hay regla de elemento desnudo en ningún sitio, así que
   un <code> dentro de un <p> salía sin caja. Espeja .kit-table code. */
.kh-block p code,.kh-block li code,.step p code,.kit-table td code{font-family:var(--font-mono);font-size:.85em;background:var(--fondo-2);padding:1px 6px;border-radius:5px;color:var(--tinta-2)}

/* Tabla ancha: scroll horizontal propio. Es lo que .ctable ya hace en site.css,
   pero sin arrastrar su fondo y su borde (la tabla del KIT es .kit-table).
   IMPORTANTE: el scroll va en el envoltorio, no en el body — la página nunca
   debe desplazarse en horizontal. */
.kit-table-wrap{overflow-x:auto;margin:14px 0 26px}
.kit-table-wrap>.kit-table{margin:0}

/* 496 filas necesitan cebra y hover o son ilegibles. */
.kit-table tbody tr:nth-child(even) td{background:rgba(0,0,0,.015)}
.kit-table tbody tr:hover td{background:rgba(184,255,74,.06)}
.kit-table a{color:var(--lima-deep)}
.kit-table a:hover{border-bottom:1px solid var(--lima-deep)}

/* Chips de categoría: en el hub el filtro vive en .cat-side, pero aquí .cat-side
   ya la ocupa el índice de la página, así que el filtro necesita su propio
   control. Es la forma móvil de .cat-side (líneas 171-172) promovida a
   componente — mismos .cat-link, ningún estilo nuevo que aprender. */
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.cat-chips .cat-link{border:1px solid var(--linea)}
.cat-empty{color:var(--gris-txt);padding:22px 0}

/* ============================================================
   Hub /kit — REDISEÑO (portado del LAB aprobado, 2026-07-24)
   TODO va scopeado bajo .kithub para no pisar las ~4.000 landings
   ni las páginas de categoría (que reusan .kh-block/.tool-card sin
   este contenedor). Nombres genéricos del lab (.hero/.big/.stat/
   .chip/.chan/.grid/.count…) SOLO existen aquí dentro.
   ============================================================ */
.kithub{--kd:#111714;--kd2:#1a211c}

/* --- HERO oscuro --- */
.kithub .hero{background:var(--tinta);color:#eef1ea;position:relative;overflow:hidden;border-radius:0 0 26px 26px;margin-bottom:8px}
.kithub .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 50% -140px,rgba(184,255,74,.14),transparent 60%);pointer-events:none}
.kithub .hero-in{padding:clamp(88px,11vw,124px) 0 clamp(38px,5vw,52px);text-align:center;position:relative;z-index:2}
.kithub .hero .eyebrow{color:var(--lima);font-family:var(--font-mono);font-weight:600;letter-spacing:.24em;font-size:.7rem;text-transform:uppercase;margin-bottom:16px;justify-content:center}
.kithub .hero .eyebrow::before{content:none}
.kithub .hero h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(38px,7vw,100px);margin:0;line-height:.94;color:#fff}
.kithub .hero h1 .hl{color:var(--lima)}
.kithub .hero .lead{max-width:720px;margin:22px auto 0;color:#c4ccbf;font-size:clamp(15px,1.9vw,19px);line-height:1.55}
.kithub .hero .lead b{color:#eef1ea}
.kithub .hero-cta{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kithub .hero-cta .btn{font-size:.95rem;padding:14px 26px}
/* Botones del hub (.p sólido lima, .g fantasma). Reusan el clip-path y la
   tipografía de .btn (site.css). Valen tanto en el hero oscuro como en la
   sección de precios clara. */
.kithub .btn.p{background:var(--lima);color:var(--tinta)}
.kithub .btn.p:hover{background:var(--lima-hot)}
.kithub .hero .btn.g{background:transparent;box-shadow:inset 0 0 0 1px #39433a;color:#fff}
.kithub .hero .btn.g:hover{box-shadow:inset 0 0 0 1px var(--lima);color:var(--lima)}

/* --- Franja de canales --- */
.kithub .channels{margin:30px auto 0;max-width:1000px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.kithub .chan{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:11px 15px;font-size:13px;color:#dfe6da}
.kithub .chan .ic{font-size:17px;line-height:1}
.kithub .chan b{color:#fff;font-weight:600}
.kithub .chan small{color:#9aa69a;font-family:var(--font-mono);font-size:11px}
.kithub .chan .st{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:999px;margin-inline-start:2px}
.kithub .chan .st.live{background:var(--lima);color:var(--tinta)}
.kithub .chan .st.building{background:#3a4a1c;color:var(--lima-hot)}
.kithub .chan .st.coming{background:#2a3330;color:#aeb8ac}

/* --- Firehose (marquesina decorativa, CSS puro) --- */
.kithub .fire{margin-top:30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kithub .fire .frow{display:flex;gap:10px;width:max-content;animation:khFire 95s linear infinite}
.kithub .fire .frow.r2{animation-duration:120s;margin-top:10px;animation-direction:reverse}
.kithub .fire:hover .frow{animation-play-state:paused}
.kithub .chip{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cdd6c9;padding:7px 13px;border-radius:999px;font-family:var(--font-mono);font-size:12px;white-space:nowrap}
.kithub .chip .cd{color:var(--lima);margin-inline-end:6px;font-weight:600}
@keyframes khFire{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.kithub .fire .frow{animation:none}}

/* --- Estadísticas --- */
.kithub .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:860px;margin:34px auto 0;text-align:center}
.kithub .stat .n{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:800;color:var(--lima);line-height:1}
.kithub .stat .l{color:#9aa69a;font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;font-weight:600;margin-top:4px;text-transform:uppercase;display:block}

/* --- Sliders GRANDES (Nuevas / Populares) --- */
.kithub .kh-sliders{margin:8px 0 4px}
.kithub .kh-slider{margin:0 0 34px}
.kithub .khs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.kithub .khs-head h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.4vw,42px);margin:0;line-height:.98}
.kithub .khs-head .khs-sub{color:var(--gris-txt);font-size:15px;margin:8px 0 0}
.kithub .khs-arrows{display:flex;gap:8px;flex:none}
.kithub .khs-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea-2);background:var(--blanco);color:var(--tinta);cursor:pointer;font-size:18px;line-height:1}
.kithub .khs-arrows button:hover{border-color:var(--lima-deep);color:var(--lima-deep)}
.kithub .khs-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none}
.kithub .khs-track::-webkit-scrollbar{display:none}
.kithub .cap-slide{scroll-snap-align:start;min-width:400px;max-width:400px;display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;
 border-radius:20px;padding:26px;color:#fff;background:linear-gradient(135deg,#1a211c,#111714);border:1px solid #232a23;
 box-shadow:0 18px 40px -22px rgba(17,23,20,.5);transition:transform .15s,box-shadow .2s,border-color .2s}
.kithub .cap-slide:hover{transform:translateY(-3px);box-shadow:0 26px 50px -20px rgba(17,23,20,.6);border-color:#3a4a2a}
.kithub .cap-slide:hover .cs-go{color:var(--lima)}
.kithub .cap-slide.pop{background:linear-gradient(135deg,#20301a,#141c11)}
.kithub .cs-badge{position:absolute;top:16px;inset-inline-end:16px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;padding:5px 10px;border-radius:999px;background:var(--lima);color:var(--tinta)}
.kithub .cs-badge.rank{background:#2a3a1a;color:var(--lima-hot)}
.kithub .cs-cat{color:var(--lima);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kithub .cs-title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:.98;margin:10px 0 8px}
.kithub .cs-desc{color:#b9c3b3;font-size:14px;line-height:1.45;margin:0 0 18px;flex:1;min-height:58px}
.kithub .cs-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2a332b;padding-top:16px}
.kithub .cs-who{display:flex;align-items:center;gap:8px;font-size:12px;color:#9aa69a;min-width:0}
.kithub .cs-author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kithub .cs-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#0b0d0b;flex:none}
.kithub .cs-price{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;flex:none}
.kithub .cs-go{margin-top:14px;display:inline-block;font-family:var(--font-mono);font-size:12px;color:var(--lima-hot)}
.kithub .cs-go code{font-family:var(--font-mono);color:inherit}

/* --- Catálogo: chips + contador + rejilla de tarjetas ricas --- */
.kithub .chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.kithub .catchip{border:1px solid var(--linea-2);background:var(--blanco);color:var(--gris-txt);padding:8px 13px;border-radius:999px;font-size:12.5px;font-family:inherit;cursor:pointer;display:flex;gap:7px;align-items:center;line-height:1.2}
.kithub .catchip:hover{border-color:var(--lima-deep)}
.kithub .catchip.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.kithub .catchip .n{color:var(--gris-500);font-family:var(--font-mono);font-size:11px}
.kithub .catchip.on .n{color:var(--lima)}
.kithub .count{color:var(--gris-txt);font-family:var(--font-mono);font-size:12px;margin:0 0 14px}
.kithub .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.kithub .kcard{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:9px;min-width:0;text-decoration:none;color:var(--txt);transition:border-color .15s,transform .15s,box-shadow .2s;box-shadow:0 1px 2px rgba(17,23,20,.04)}
.kithub .kcard:hover{border-color:var(--lima-deep);transform:translateY(-2px);box-shadow:0 10px 30px -16px rgba(17,23,20,.28)}
.kithub .kc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kithub .kc-cat{font-family:var(--font-mono);font-size:10.5px;color:var(--lima-deep);font-weight:600;letter-spacing:.04em;text-transform:uppercase;display:flex;gap:5px;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kithub .kc-tag{font-family:var(--font-mono);font-size:9px;font-weight:600;padding:3px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;flex:none}
.kithub .kc-tag.free{background:var(--lima-dim);color:var(--lima-deep);border:1px solid #cfe6a2}
.kithub .kc-tag.api{background:var(--fondo-2);color:var(--gris-txt)}
.kithub .kc-tag.soon{background:var(--fondo-2);color:var(--naranja-deep,#a15b00)}
.kithub .kc-tag.off{background:var(--fondo-2);color:var(--gris-500)}
.kithub .kc-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;margin:0;font-size:17px;line-height:1.05}
.kithub .kc-desc{color:var(--gris-txt);font-size:13.5px;line-height:1.45;flex:1}
.kithub .kc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kithub .kc-auth{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--gris-txt);min-width:0}
.kithub .kc-author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kithub .kc-av{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:none}
.kithub .kc-views{font-family:var(--font-mono);font-size:11px;color:var(--gris-txt);flex:none}
.kithub .kc-views b{color:var(--lima-deep)}
.kithub .kc-foot2{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--linea);padding-top:11px}
.kithub .kc-foot2 code{font-family:var(--font-mono);font-size:11px;color:var(--lima-deep);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kithub .kc-price{font-family:var(--font-display);color:var(--txt);font-weight:700;font-size:15px;flex:none}

@media(max-width:900px){.kithub .stats{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(max-width:560px){.kithub .cap-slide{min-width:300px;max-width:300px}.kithub .grid{grid-template-columns:1fr}}