/* ============================================================
   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-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 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)}

/* --- 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-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}

/* ===== 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}