/* ============================================================================
   KalunBot · Design System  (bloque 3 del rediseño, 4-ago-2026)
   ----------------------------------------------------------------------------
   Desde el 11-sep-2026 la web lleva la MISMA identidad que el bot 3.0
   (apps/bot-client/static/v3/tokens.css): «un terminal de mercado para
   Ultimate Team». Fondos azul noche, un único acento —el oro de las
   monedas— y el verde solo para ganancias, nunca como marca. Titulares en
   Archivo ancho, texto en Instrument Sans y cifras en JetBrains Mono.
   Si cambia un color del bot, se cambia aquí también.

   Sigue en pie lo decidido con el dueño el 4-ago-2026:
     · Premium y sobrio, NO gaming (referencias: Trade Republic, Apple).
     · Gradientes SÍ, glow NO. Nada de resplandor de neón.
     · Velocidad por encima de animaciones.
   (El «claro y oscuro» de entonces se retiró el 20-ago: ver los tokens.)
   Detalle y porqué: docs/web-2026-09/DISENO-WEB.md

   Este archivo es INDEPENDIENTE de kalunbot.min.css. Las páginas nuevas cargan
   solo este; las viejas siguen con el antiguo hasta que se migren. No mezclar
   los dos en la misma página.
   ========================================================================== */

/* ── Fuentes autoalojadas ─────────────────────────────────────────────────
   Las tres familias del bot 3.0, en ficheros variables servidos desde
   nuestro dominio: sin petición a un tercero que bloquee el render ni avise
   a Google de cada visita. `swap` para que el texto se vea desde el primer
   frame aunque la fuente aún no haya llegado. Solo el subconjunto latino,
   que es el que usa una web en español.                                    */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;        /* variable también en ancho: los titulares van anchos */
  font-display: swap;
  src: url('/assets/fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────────
   KalunBot es OSCURO Y SOLO OSCURO (20-ago-2026).

   Hasta hoy el tema seguía al sistema operativo, con la paleta clara como
   base. El problema es que media web nunca llegó a migrarse: 16 páginas
   —los 7 artículos del blog, afiliados, la guía, eafc27, vip— siguen
   escritas con colores oscuros a mano en su propio <style>. Sobre fondo
   claro eso era texto blanco sobre blanco: el índice del blog no enseñaba
   ni los títulos de los artículos, y el titular de afiliados era invisible.
   Y como Windows, iOS y Android vienen en claro de fábrica, eso lo veía
   la mayoría de la gente que entraba.

   Decisión: una sola paleta, la oscura, que es además para la que están
   escritas esas páginas. Sin interruptor y sin prefers-color-scheme: si
   solo hay un tema, no hay forma de que una página se quede a medias.

   `color-scheme: dark` no es decorativo — es lo que hace que las barras de
   scroll, los desplegables y los campos de formulario que pinta el propio
   navegador salgan oscuros. Sin eso quedan islas blancas.               */

:root {
  color-scheme: dark;

  /* Color — no hay variante clara, esto es la paleta entera. Son los
     mismos valores que apps/bot-client/static/v3/tokens.css (--kb3-*). */
  --kb-bg: #0D121E;            /* tinta: el fondo */
  --kb-bg-deep: #0A0E18;       /* noche: menú y pie, como la barra del bot */
  --kb-surface: #151B2B;       /* pizarra: tarjetas */
  --kb-surface-2: #1B2336;
  --kb-border: #26304A;
  --kb-text: #E9EDF5;
  --kb-text-muted: #8C96AE;
  --kb-text-dim: #5E6883;
  /* El acento es el oro de las monedas, lo único que vendemos. Si todo es
     dorado, nada lo es: botón principal, enlaces y detalles, no fondos. */
  --kb-accent: #E0B44C;
  --kb-accent-hover: #EBC468;
  --kb-accent-contrast: #1A1405;
  --kb-accent-soft: rgba(224, 180, 76, .08);
  --kb-coin-edge: #A07E2A;     /* el canto de la moneda del logo */
  /* Significado, no marca: el verde es «ganancias», nunca decoración. */
  --kb-success: #3DDC97;
  --kb-info: #6EA8FE;
  --kb-warn: #F59E0B;
  --kb-danger: #FF7A6B;

  /* Gradiente de acento. Amplio y suave — es fondo, no resplandor. */
  --kb-grad: radial-gradient(90rem 40rem at 50% -10%,
             rgba(224, 180, 76, .07), transparent 60%);

  /* Tipografía — la del bot 3.0 */
  --kb-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --kb-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kb-font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  /* Escala de espaciado, base 4 */
  --kb-1: 4px;   --kb-2: 8px;   --kb-3: 12px;  --kb-4: 16px;
  --kb-5: 24px;  --kb-6: 32px;  --kb-7: 48px;  --kb-8: 64px;  --kb-9: 96px;

  /* Forma */
  --kb-r-sm: 9px;    /* botones e inputs, como en el bot */
  --kb-r-md: 12px;   /* tarjetas */
  --kb-r-pill: 999px;

  --kb-container: 1120px;
  --kb-measure: 68ch;   /* ancho máximo de lectura cómoda */
}

/* Quien pasara por aquí antes del 20-ago-2026 puede tener kbp_theme="light"
   guardado, y el script le pondrá data-theme="light" en <html>. No se le
   hace caso a propósito: sin regla que lo recoja, el atributo no pinta nada
   y esa persona ve la web oscura como todo el mundo. */

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--kb-bg);
  color: var(--kb-text);
  font-family: var(--kb-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                    /* el body NUNCA scrollea en horizontal */
}

h1, h2, h3, h4 {
  font-family: var(--kb-font-display);
  font-weight: 700;
  font-stretch: 112%;            /* Archivo ancho, como los rótulos del bot */
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 var(--kb-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); font-weight: 750; font-stretch: 116%; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }

p { margin: 0 0 var(--kb-4); max-width: var(--kb-measure); }

a { color: var(--kb-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--kb-accent-hover); }

img, video { max-width: 100%; height: auto; }

/* Foco visible SIEMPRE. Es accesibilidad, no decoración. */
:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: 2px;
  border-radius: var(--kb-r-sm);
}

/* Cifras que no bailan al actualizarse (contadores, precios, monedas). */
.kb-num { font-family: var(--kb-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.kb-container { width: 100%; max-width: var(--kb-container); margin-inline: auto; padding-inline: var(--kb-4); }
.kb-muted { color: var(--kb-text-muted); }
.kb-grad-bg { background-image: var(--kb-grad); }

/* ── Botones ──────────────────────────────────────────────────────────── */

.kb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kb-2);
  min-height: 44px;                       /* objetivo táctil mínimo */
  padding: var(--kb-3) var(--kb-5);
  border: 1px solid transparent;
  border-radius: var(--kb-r-sm);
  font: inherit; font-weight: 650;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kb-btn--primary { background: var(--kb-accent); color: var(--kb-accent-contrast); }
.kb-btn--primary:hover { background: var(--kb-accent-hover); color: var(--kb-accent-contrast); }
.kb-btn--secondary { background: transparent; color: var(--kb-text); border-color: var(--kb-border); }
.kb-btn--secondary:hover { background: var(--kb-surface); color: var(--kb-text); }
.kb-btn--ghost { background: transparent; color: var(--kb-text-muted); }
.kb-btn--ghost:hover { color: var(--kb-text); }
.kb-btn[disabled], .kb-btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.kb-btn--block { width: 100%; }

/* ── Tarjetas ─────────────────────────────────────────────────────────── */

.kb-card {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-r-md);
  padding: var(--kb-5);
}
.kb-card--flat { background: transparent; }

/* Tarjeta de precio. La destacada se distingue por BORDE, no por sombra. */
.kb-price { display: flex; flex-direction: column; gap: var(--kb-3); }
.kb-price--featured { border-color: var(--kb-accent); }
.kb-price__amount { font-family: var(--kb-font-mono); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kb-price__period { color: var(--kb-text-muted); font-size: .9rem; }

/* ── Insignias ────────────────────────────────────────────────────────── */

.kb-badge {
  display: inline-flex; align-items: center; gap: var(--kb-1);
  padding: var(--kb-1) var(--kb-3);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-r-pill);
  font-size: .8rem; font-weight: 600;
  color: var(--kb-text-muted);
  white-space: nowrap;
}
.kb-badge--accent { color: var(--kb-accent); border-color: var(--kb-accent); }

/* ── Avisos ───────────────────────────────────────────────────────────── */

.kb-note {
  border: 1px solid var(--kb-border);
  border-left-width: 3px;
  border-radius: var(--kb-r-sm);
  background: var(--kb-surface);
  padding: var(--kb-4);
}
.kb-note--info { border-left-color: var(--kb-info); }
.kb-note--warn { border-left-color: var(--kb-warn); }
.kb-note--danger { border-left-color: var(--kb-danger); }
.kb-note > :last-child { margin-bottom: 0; }

/* ── Bloque de dato ───────────────────────────────────────────────────────
   El patrón de honestidad de la marca: una cifra NUNCA va sola, siempre con
   su fecha y sus condiciones. Si no hay fecha, no se publica.              */

.kb-figure { border: 1px solid var(--kb-border); border-radius: var(--kb-r-md); padding: var(--kb-5); background: var(--kb-surface); }
.kb-figure__value { font-family: var(--kb-font-display); font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; font-stretch: 118%; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kb-figure__when { color: var(--kb-text-muted); font-size: .85rem; margin-top: var(--kb-2); }
.kb-figure__cond { color: var(--kb-text-muted); font-size: .9rem; margin-top: var(--kb-3); margin-bottom: 0; }

/* ── Cómo funciona, en 3 pasos ────────────────────────────────────────────
   Una de las secciones más importantes de la home. Describe el MECANISMO del
   producto (qué hace el bot), no el proceso de compra.                      */

.kb-steps { display: grid; gap: var(--kb-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kb-step__n {
  font-family: var(--kb-font-mono);
  font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--kb-accent);
  padding-bottom: var(--kb-3);
  border-bottom: 1px solid var(--kb-border);
  margin-bottom: var(--kb-3);
}
.kb-step h3 { margin-bottom: var(--kb-2); }
.kb-step p { color: var(--kb-text-muted); margin-bottom: 0; }

/* ── Precio: lo que pagas HOY vs lo que pagas DESPUÉS ─────────────────────
   El Founder tiene dos importes y confundirlos es el error más caro de la
   página. El "hoy" va grande; el "después", debajo y separado por una línea. */

.kb-price__now { font-family: var(--kb-font-mono); font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kb-price__then { margin-top: var(--kb-3); padding-top: var(--kb-3); border-top: 1px solid var(--kb-border); color: var(--kb-text-muted); font-size: .9rem; }

/* Founder no es "un plan más caro", es una oferta distinta y limitada en el
   tiempo. Si se maqueta igual que los demás, se lee como una tercera opción. */
.kb-price--founder { background: var(--kb-surface-2); }
.kb-price--founder .kb-price__now { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.kb-price__crown { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kb-2) var(--kb-3); }
.kb-price__crown > * { white-space: nowrap; }
@media (min-width: 60rem) {
  /* Con sitio de sobra ocupa dos columnas: pesa el doble que los otros planes. */
  .kb-price--founder { grid-column: span 2; }
}

/* ── Barra de progreso (plazas Founder) ───────────────────────────────── */

.kb-progress { height: 10px; background: var(--kb-surface-2); border: 1px solid var(--kb-border); border-radius: var(--kb-r-pill); overflow: hidden; }
.kb-progress__fill { height: 100%; background: var(--kb-accent); border-radius: inherit; transition: width .4s ease; }

/* ── Campos de formulario ─────────────────────────────────────────────── */

.kb-field { display: flex; flex-direction: column; gap: var(--kb-2); margin-bottom: var(--kb-4); }
.kb-label { font-size: .9rem; font-weight: 600; }
.kb-input {
  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;
}
.kb-input:focus { border-color: var(--kb-accent); }
.kb-hint { font-size: .85rem; color: var(--kb-text-muted); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.kb-faq { border-top: 1px solid var(--kb-border); }
.kb-faq__item { border-bottom: 1px solid var(--kb-border); }
.kb-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--kb-4);
  padding: var(--kb-4) 0; background: none; border: 0;
  color: var(--kb-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.kb-faq__q::after { content: '+'; color: var(--kb-text-muted); font-size: 1.25rem; }
.kb-faq__item[open] .kb-faq__q::after { content: '−'; }
.kb-faq__a { padding-bottom: var(--kb-4); color: var(--kb-text-muted); }
.kb-faq__a > :last-child { margin-bottom: 0; }

/* ── Tablas ───────────────────────────────────────────────────────────────
   Las tablas anchas (comparativas) scrollean DENTRO de su contenedor. El
   body no puede scrollear en horizontal.                                    */

.kb-table-wrap { overflow-x: auto; border: 1px solid var(--kb-border); border-radius: var(--kb-r-md); }
.kb-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.kb-table th, .kb-table td { padding: var(--kb-3) var(--kb-4); text-align: left; border-bottom: 1px solid var(--kb-border); }
.kb-table th { font: 600 .72rem/1.4 var(--kb-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kb-text-muted); background: var(--kb-surface); }
.kb-table tr:last-child td { border-bottom: 0; }

/* ── Botón cuadrado de icono ──────────────────────────────────────────────
   Esto era .kb-theme-toggle. El interruptor de tema se retiró el 20-ago-2026
   —con una sola paleta no hay nada que interruptar— pero el botón de menú
   de móvil se apoyaba en esa misma clase para su forma, así que el estilo se
   queda con un nombre que dice lo que es. Si aparece .kb-theme-toggle en
   algún sitio, es marcado viejo y no tiene estilo detrás.               */

.kb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; color: var(--kb-text-muted);
  border: 1px solid var(--kb-border); border-radius: var(--kb-r-sm);
  cursor: pointer;
}
.kb-icon-btn:hover { color: var(--kb-text); }

/* ── CTA fijo en móvil ────────────────────────────────────────────────────
   La ÚNICA pieza pegajosa del sitio, y solo en home, precios y founders.   */

.kb-sticky-cta { display: none; }
@media (max-width: 768px) {
  .kb-sticky-cta {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 50;
    padding: var(--kb-3) var(--kb-4) calc(var(--kb-3) + env(safe-area-inset-bottom));
    background: var(--kb-bg-deep); border-top: 1px solid var(--kb-border);
  }
  /* La barra es fixed, asi que NO ocupa sitio: sin esto tapa para siempre los
     ultimos ~76 px de la pagina. Se veia en la home, donde se comia justo la
     linea que avisa de que la prueba pide tarjeta, y al final de todo tapaba el
     pie. :has() evita tener que marcar el body en cada una de las paginas que
     llevan la barra. */
  body:has(.kb-sticky-cta) { padding-bottom: 76px; }
}

/* ── Navegación, secciones y pie ──────────────────────────────────────────
   Estaban copiados en cada página. Al vivir aquí, cambiar el menú es un solo
   sitio en vez de veinte — que es justo el problema que tenía la web vieja.  */

.kb-nav { position: sticky; top: 0; z-index: 40; background: var(--kb-bg-deep); border-bottom: 1px solid var(--kb-border); }
.kb-nav__in { display: flex; align-items: center; gap: var(--kb-5); min-height: 64px; }
.kb-nav__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--kb-font-display); font-weight: 750; font-stretch: 112%; font-size: 1.1rem; color: var(--kb-text); text-decoration: none; }
/* La moneda del logo del bot: oro con su canto. Es CSS y no una imagen, así
   que sale igual en todas las páginas sin tocar su marcado. */
.kb-nav__brand::before, .kb-auth__brand::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--kb-accent); box-shadow: inset 0 0 0 3.5px var(--kb-coin-edge);
}
.kb-nav__links { display: flex; gap: var(--kb-5); margin-left: auto; }
.kb-nav__links a { color: var(--kb-text-muted); text-decoration: none; font-size: .95rem; font-weight: 500; }
.kb-nav__links a:hover, .kb-nav__links a[aria-current] { color: var(--kb-text); }
/* La acción se separa de la navegación con una línea: "Empezar" no es un
   enlace más del menú. */
.kb-nav__actions { display: flex; align-items: center; gap: var(--kb-3); padding-left: var(--kb-5); border-left: 1px solid var(--kb-border); }
.kb-nav__burger { display: none; }
@media (max-width: 900px) {
  .kb-nav__links, .kb-nav__actions .kb-btn--ghost { display: none; }
  .kb-nav__burger { display: inline-flex; margin-left: auto; }
  .kb-nav__actions { border-left: 0; padding-left: 0; }
  .kb-nav.is-open .kb-nav__links {
    display: flex; flex-direction: column; position: absolute; inset: 64px 0 auto 0;
    background: var(--kb-bg-deep); border-bottom: 1px solid var(--kb-border);
    padding: var(--kb-4); gap: var(--kb-4);
  }
}
/* Móviles pequeños (13-sep-2026, auditoría SEO S-30). A 375 px (iPhone mini,
   SE) la marca, la hamburguesa, «Probar gratis 24 h» y dos huecos de 24 px
   sumaban 375 px de contenido en 343 útiles: la página entera se desplazaba
   16 px de lado. Se estrechan los huecos y el botón, que no cambia de alto
   (sigue siendo fácil de pulsar). A 320 px ni así cabe: ahí, y solo ahí, se
   quita la moneda del logo. */
@media (max-width: 420px) {
  .kb-nav__in { gap: var(--kb-3); }
  .kb-nav__actions .kb-btn { padding-inline: var(--kb-3); font-size: .9rem; }
}
@media (max-width: 359px) {
  .kb-nav__brand::before { display: none; }
}

.kb-sec { padding: var(--kb-8) 0; }
.kb-sec--lg { padding: var(--kb-9) 0; }
.kb-sec--alt { background: var(--kb-surface); border-block: 1px solid var(--kb-border); }
.kb-sec__tag { display: block; font: 600 .72rem/1.4 var(--kb-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kb-text-muted); margin-bottom: var(--kb-3); }

.kb-grid { display: grid; gap: var(--kb-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--kb-5); }

.kb-foot { background: var(--kb-bg-deep); border-top: 1px solid var(--kb-border); padding: var(--kb-8) 0 var(--kb-6); }
.kb-foot__cols { display: grid; gap: var(--kb-5); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.kb-foot h3 { font: 600 .72rem/1.4 var(--kb-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kb-text-muted); margin-bottom: var(--kb-3); }
.kb-foot a { display: block; color: var(--kb-text-muted); text-decoration: none; font-size: .92rem; margin-bottom: var(--kb-2); }
.kb-foot a:hover { color: var(--kb-text); }
.kb-foot__legal { margin-top: var(--kb-7); padding-top: var(--kb-5); border-top: 1px solid var(--kb-border); color: var(--kb-text-muted); font-size: .82rem; }

/* ── Pantallas de acceso ──────────────────────────────────────────────────
   Login, registro, verificación, recuperar contraseña y las de retorno de
   OAuth. Son 14 páginas (ES + EN) con la misma forma: una tarjeta estrecha,
   centrada y sin navegación que distraiga. Vive aquí y no en cada página
   porque justo esa duplicación era el problema de la web vieja.            */

.kb-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--kb-6) var(--kb-4); background-image: var(--kb-grad); }
.kb-auth__card { width: 100%; max-width: 26rem; background: var(--kb-surface); border: 1px solid var(--kb-border); border-radius: var(--kb-r-md); padding: var(--kb-6); }
.kb-auth__brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--kb-font-display); font-weight: 750; font-stretch: 112%; font-size: 1.1rem; color: var(--kb-text); text-decoration: none; text-align: center; margin-bottom: var(--kb-5); }
.kb-auth__card h1 { font-size: 1.5rem; margin-bottom: var(--kb-2); }
.kb-auth__card p { max-width: none; }
.kb-auth__foot { margin: var(--kb-5) 0 0; padding-top: var(--kb-4); border-top: 1px solid var(--kb-border); text-align: center; font-size: .9rem; color: var(--kb-text-muted); }

/* Separador con texto: "o con email". */
.kb-divider { display: flex; align-items: center; gap: var(--kb-3); margin: var(--kb-5) 0; color: var(--kb-text-muted); font-size: .8rem; }
.kb-divider::before, .kb-divider::after { content: ''; flex: 1; height: 1px; background: var(--kb-border); }

/* Botón de Google. Blanco y con su logo en los dos temas: es una marca ajena
   y la gente la reconoce por su aspecto, no por el nuestro. */
.kb-btn--google { background: #ffffff; color: #1f1f1f; border-color: #dadce0; }
.kb-btn--google:hover { background: #f5f5f5; color: #1f1f1f; }

/* ── Avisos en línea (resultado de una acción) ─────────────────────────────
   Distinto de .kb-note, que es informativo y permanente: esto aparece y
   desaparece según lo que conteste el servidor.                            */

.kb-alert { padding: var(--kb-3) var(--kb-4); border: 1px solid var(--kb-border); border-radius: var(--kb-r-sm); font-size: .9rem; margin-bottom: var(--kb-4); }
.kb-alert:empty { display: none; }
.kb-alert--error { border-color: var(--kb-danger); color: var(--kb-danger); }
.kb-alert--success { border-color: var(--kb-success); color: var(--kb-success); }
.kb-alert--info { border-color: var(--kb-border); color: var(--kb-text-muted); }

/* ── Escalera de precios: los dos estados (15-sep-2026) ────────────────────
   El marcado lleva lo de hoy (data-esc-off) y lo nuevo (data-esc-on), y
   kbp-escalera.js pone .kb-esc en <html> cuando el servidor la enciende. Sin
   esa clase —JavaScript apagado, ruta en 404, servidor caído— se ve lo de hoy.
   Van aquí y no inyectadas por el script para que, sin JavaScript, lo nuevo
   no aparezca nunca. */
html:not(.kb-esc) [data-esc-on] { display: none !important; }
html.kb-esc [data-esc-off] { display: none !important; }

/* ── Respeto por quien pide menos movimiento ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}