/* ============================================================================ KalunBot · estilos de las páginas con vocabulario propio ---------------------------------------------------------------------------- Nació el 19-ago-2026 como «capa de compatibilidad»: traducía las clases del sistema VIEJO (kalunbot.min.css, verde neón) a los tokens del nuevo, para migrar de golpe páginas con mucho contenido sin reescribir el marcado. El 29-ago-2026 se repasó selector por selector contra las 14 páginas que lo cargan, y **47 de las 77 clases estaban muertas**. La mayoría porque el trabajo de esa sesión se las llevó por delante: · todo lo de .nav → esas páginas usan ya el menú generado (.kb-nav) · todo lo de .footer → usan ya el pie generado (.kb-foot) · .theme-toggle → no hay tema claro desde el 20-ago-2026 · .badge, .kpi, .card, .feat, .panel, .strip → nunca llegaron a usarse en estas páginas Comprobado también que ninguna la añade JavaScript: en estas 14 páginas lo único que se toca por código es `is-open` (el menú, del sistema de diseño) y `active` (la barra lateral de /guia, con su CSS propio). Lo que queda NO es deuda: es el vocabulario de componentes de estas páginas —las tarjetas de bot y de SBC, los pasos de /afiliados, el CTA de artículo, la barra lateral de la guía— que el sistema de diseño no tiene porque solo existen aquí. Los botones ya coinciden pixel a pixel con .kb-btn. Quien rediseñe una de estas páginas de verdad, que la quite de su . ========================================================================== */ /* ── Base ─────────────────────────────────────────────────────────────────── */ body { background: var(--kb-bg); color: var(--kb-text); font-family: var(--kb-font-body); } a { color: var(--kb-accent); } a:hover { color: var(--kb-accent-hover); } img, video { max-width: 100%; height: auto; } /* El sistema viejo tiraba de gradientes de texto y resplandores de neón. Aquí se neutralizan: el nuevo usa un solo acento, y nunca sobre texto corrido. */ .grad, [class*='glow'] { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--kb-accent) !important; text-shadow: none !important; filter: none !important; } /* ── Contenedores y secciones ─────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--kb-container); margin-inline: auto; padding-inline: var(--kb-4); } .container--narrow { max-width: 44rem; } .wrap { width: 100%; max-width: var(--kb-container); margin-inline: auto; padding: var(--kb-6) var(--kb-4); } .section { padding: var(--kb-8) 0; } /* El sistema viejo animaba la entrada de casi todo. Se deja visible: la decisión del rediseño fue velocidad por encima de animaciones. */ .reveal { opacity: 1 !important; transform: none !important; } /* ── Tipografía ───────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--kb-font-display); font-weight: 700; font-stretch: 112%; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; color: var(--kb-text); } h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); } h2 { font-size: clamp(1.45rem, 1.2rem + 1.4vw, 2.05rem); } h3 { font-size: 1.15rem; } p { color: var(--kb-text); } .lead { font-size: 1.1rem; color: var(--kb-text-muted); } /* Cifras que no bailan. Por atributo y no por clase: las páginas nombran sus valores con sufijos distintos (__val, __value) y así entran todos. */ [class*='__val'], [class*='__value'] { font-variant-numeric: tabular-nums; } /* ── Botones ──────────────────────────────────────────────────────────────── */ /* Coinciden con .kb-btn del sistema de diseño: mismo fondo, color, radio, alto, padding, peso y —desde el 29-ago-2026— mismo tamaño de letra. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kb-2); min-height: 44px; padding: var(--kb-3) var(--kb-5); border: 1px solid var(--kb-border); border-radius: var(--kb-r-sm); background: transparent; color: var(--kb-text); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { background: var(--kb-surface); color: var(--kb-text); transform: none !important; } .btn--primary { background: var(--kb-accent); border-color: var(--kb-accent); color: var(--kb-accent-contrast); } .btn--primary:hover { background: var(--kb-accent-hover); border-color: var(--kb-accent-hover); color: var(--kb-accent-contrast); } .btn--ghost { background: transparent; color: var(--kb-text-muted); border-color: transparent; } .btn--ghost:hover { color: var(--kb-text); background: var(--kb-surface); } .btn--lg { min-height: 50px; padding: var(--kb-4) var(--kb-6); font-size: 1rem; } .btn--sm { min-height: 36px; padding: var(--kb-2) var(--kb-4); font-size: .87rem; } .btn[disabled] { opacity: .5; pointer-events: none; } /* ── Los componentes propios de estas páginas ─────────────────────────────── */ /* .tip y .article-cta → avisos y llamadas dentro de los artículos .sbc-card → las tarjetas de SBC del blog .opt-table → la tabla de opciones de /guia-filtros .aff-step → los pasos de /afiliados .step → los pasos numerados de /eafc27 y del blog .g-sidebar__section → la barra lateral del manual */ .tip, .sbc-card, .opt-table, .aff-step, .step, .g-sidebar__section, .article-cta { background: var(--kb-surface); border: 1px solid var(--kb-border); border-radius: var(--kb-r-md); box-shadow: none !important; } .tip, .sbc-card, .aff-step, .article-cta { padding: var(--kb-5); } .step__n, .aff-step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: 0 0 2.2rem; border-radius: 50%; border: 1px solid var(--kb-accent); color: var(--kb-accent); background: transparent; font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; margin-bottom: var(--kb-3); } .step, .aff-step { display: flex; gap: var(--kb-4); align-items: flex-start; } .step__title { font-weight: 600; margin: 0 0 var(--kb-2); color: var(--kb-text); } .step__desc { margin: 0; color: var(--kb-text-muted); font-size: .93rem; } .sbc-number__value { display: block; font-family: var(--kb-font-display); font-size: 1.6rem; font-weight: 800; font-stretch: 118%; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--kb-text); } .sbc-number__label { display: block; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--kb-text-muted); margin-top: var(--kb-1); } /* ── FAQ de /afiliados ────────────────────────────────────────────────────── */ .aff-faq__item { border-bottom: 1px solid var(--kb-border); padding: var(--kb-4) 0; background: transparent; border-radius: 0; } .aff-faq__item summary { cursor: pointer; font-weight: 600; color: var(--kb-text); list-style: none; } .aff-faq__item summary::-webkit-details-marker { display: none; } .aff-faq__item summary::before { content: '+'; color: var(--kb-accent); margin-right: var(--kb-3); font-weight: 600; } .aff-faq__item[open] summary::before { content: '−'; } .aff-faq__item p { margin: var(--kb-3) 0 0; color: var(--kb-text-muted); font-size: .93rem; } /* ── Tablas ───────────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: var(--kb-3) var(--kb-4); border-bottom: 1px solid var(--kb-border); color: var(--kb-text); } th { font-family: var(--kb-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kb-text-muted); font-weight: 600; background: var(--kb-surface); } tr:last-child td { border-bottom: 0; } /* ── Formularios ──────────────────────────────────────────────────────────── */ input, textarea, select { min-height: 44px; padding: var(--kb-3) var(--kb-4); background: var(--kb-bg); color: var(--kb-text); border: 1px solid var(--kb-border); border-radius: var(--kb-r-sm); font: inherit; } input:focus, textarea:focus, select:focus { border-color: var(--kb-accent); outline: none; } label { color: var(--kb-text); } /* ── Nada de movimiento para quien pide menos ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }