/* ============================================================================
   KIDTALES · BRAND TOKENS  ·  Fuente única de verdad (drop-in)
   ----------------------------------------------------------------------------
   Cómo usar en otra página o producto:
     <link rel="stylesheet" href="kidtales-brand.css">
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Quicksand:wght@400;500;600;700&family=Bitter:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
   Luego usa las variables (var(--kt-primary), var(--kt-grad-brand), …) o las
   clases utilitarias (.kt-text-gradient, .kt-bg-wash, .kt-btn, .kt-logo-dot…).
   Dos ediciones: Scholar (default, rojo/azul) y Org (.kt-org, ocre/papel cálido).
   ============================================================================ */

:root {
  /* ── Colores de marca (HEX exactos del logo) ───────────────────────────── */
  --kt-primary:   #FF6B6B;   /* coral  · kt-red    */
  --kt-secondary: #55B4F0;   /* azul   · kt-blue   */
  --kt-highlight: #D78F4B;   /* ocre   · kt-yellow */
  --kt-accent:    #F47C2A;   /* naranja· kt-orange */
  --kt-green:     #3FA34D;   /* éxito / orgánico   */

  /* Variantes -ink: oscurecidas para TEXTO sobre fondo claro (WCAG AA ≥4.5:1) */
  --kt-primary-ink:   #BF5050;   /* 4.69:1 */
  --kt-secondary-ink: #37759C;   /* 5.02:1 */
  --kt-highlight-ink: #966434;   /* 5.04:1 */
  --kt-accent-ink:    #C25A14;   /* 4.66:1 */

  /* RGB (triplete) para componer con alpha: rgb(var(--kt-primary-rgb) / .15) */
  --kt-primary-rgb:   255 107 107;
  --kt-secondary-rgb:  85 180 240;
  --kt-highlight-rgb: 215 143  75;
  --kt-accent-rgb:    244 124  42;

  /* ── Superficies · edición Scholar (default) ───────────────────────────── */
  --kt-bg:        #FFFFFF;
  --kt-surface:   #F8FAFC;
  --kt-surface-2: #F1F5F9;
  --kt-surface-3: #E2E8F0;
  --kt-border:    #E2E8F0;
  --kt-border-2:  #CBD5E1;

  /* ── Texto (contraste AA verificado) ───────────────────────────────────── */
  --kt-text:      #0F172A;   /* 17.85:1 */
  --kt-text-sub:  #475569;   /*  7.58:1 */
  --kt-text-dim:  #64748B;   /*  4.83:1 */

  /* ── Tipografías ───────────────────────────────────────────────────────── */
  --kt-font-display: 'Nunito', system-ui, sans-serif;   /* títulos / cifras (700–900) */
  --kt-font-body:    'Quicksand', system-ui, sans-serif;/* UI / cuerpo (400–700)      */
  --kt-font-reading: 'Bitter', Georgia, serif;          /* lectura / editorial / quotes */

  /* ── Radios y sombras ──────────────────────────────────────────────────── */
  --kt-radius:    14pt;
  --kt-radius-lg: 24px;
  --kt-radius-pill: 999px;
  --kt-shadow:    0 6px 20px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.06);
  --kt-shadow-lg: 0 18px 50px rgba(15,23,42,.16);

  /* ════════════════════════════════════════════════════════════════════════
     DEGRADADOS DE MARCA  (la firma visual de KidTales)
     Codificados a partir de los degradados reales del producto.
     ════════════════════════════════════════════════════════════════════════ */

  /* Firma — coral → naranja → ocre → azul. El degradado insignia de títulos. */
  --kt-grad-brand:  linear-gradient(110deg, #FF6B6B 0%, #F47C2A 38%, #D78F4B 64%, #55B4F0 100%);

  /* Atardecer / cálido — coral → naranja → ocre. Energía, calidez. */
  --kt-grad-sunset: linear-gradient(120deg, #FF6B6B 0%, #F47C2A 55%, #D78F4B 100%);

  /* Cielo — azul → ocre. Sereno, confiable; bueno para fondos amplios. */
  --kt-grad-sky:    linear-gradient(120deg, #55B4F0 0%, #7FB9C9 50%, #D78F4B 100%);

  /* CTA / botón — coral → naranja → ocre, en pill. Acción. */
  --kt-grad-cta:    linear-gradient(110deg, #FF6B6B 0%, #F47C2A 60%, #D78F4B 100%);

  /* Wash — lavado sutil para fondos de página (azul/5 → bg → ocre/5). */
  --kt-grad-wash:   linear-gradient(135deg, rgb(var(--kt-secondary-rgb) / .06) 0%, var(--kt-bg) 46%, rgb(var(--kt-highlight-rgb) / .06) 100%);

  /* Logo dot — conic rainbow del punto de marca. */
  --kt-grad-logo:   conic-gradient(from 210deg, #FF6B6B, #F47C2A, #D78F4B, #55B4F0, #FF6B6B);

  /* Tinta — superficies oscuras (CTA blocks, hero invertido). */
  --kt-grad-ink:    linear-gradient(135deg, #0F172A 0%, #1E293B 100%);

  /* Org — cálido ocre (edición donada). Ver bloque .kt-org abajo. */
  --kt-grad-org:    linear-gradient(135deg, #D78F4B 0%, #F47C2A 100%);
  --kt-grad-org-wash: linear-gradient(135deg, #FFFAF1 0%, #FBF6EE 46%, #F3EAD9 100%);

  /* Storytime — lúdico/mágico (edición B2C, app para casa). Misma familia
     (coral + azul) con acentos mágicos (rosa → púrpura). Ver bloque .kt-storytime. */
  --kt-grad-storytime: linear-gradient(120deg, #FD6868 0%, #F8AFEE 34%, #917DED 68%, #68ACDD 100%);
  --kt-grad-magic:     linear-gradient(120deg, #FD6868 0%, #917DED 55%, #68ACDD 100%);
}

/* ════════════════════════════════════════════════════════════════════════
   EDICIÓN ORG  ·  aplica .kt-org en <html>/<body> o en un contenedor.
   Reescribe superficies y acento a la paleta cálida (papel + ocre). Voz:
   cálida, digna, agradecida — nunca asistencialista.
   ════════════════════════════════════════════════════════════════════════ */
.kt-org {
  --kt-primary:    #D78F4B;   /* el acento de org ES el ocre */
  --kt-primary-ink:#966434;
  --kt-primary-rgb:215 143 75;
  --kt-accent:     #F47C2A;
  --kt-secondary:  #3FA34D;   /* verde orgánico como secundario cálido */
  --kt-bg:         #FBF6EE;
  --kt-surface:    #FFFFFF;
  --kt-surface-2:  #F3EAD9;
  --kt-surface-3:  #EADFCE;
  --kt-border:     #E7DCC8;
  --kt-border-2:   #DCCAAD;
  --kt-text:       #241F1A;
  --kt-text-sub:   #5B5247;
  --kt-text-dim:   #9B8F7E;
  /* en org, el degradado de marca por defecto es el cálido */
  --kt-grad-brand: var(--kt-grad-org);
  --kt-grad-wash:  var(--kt-grad-org-wash);
}

/* ════════════════════════════════════════════════════════════════════════
   EDICIÓN STORYTIME  ·  aplica .kt-storytime al contenedor.
   App B2C para casa (familias). Misma familia visual de KidTales con un
   giro lúdico/mágico: coral vivo + acento púrpura. Voz: juguetona, cálida,
   para niños y papás (sin jerga pedagógica).
   ════════════════════════════════════════════════════════════════════════ */
.kt-storytime {
  --kt-primary:     #FD6868;   /* coral vivo del logo Storytime */
  --kt-primary-ink: #BF5050;
  --kt-primary-rgb: 253 104 104;
  --kt-accent:      #EF811B;
  --kt-secondary:   #68ACDD;   /* cielo */
  --kt-highlight:   #F4CF5D;   /* oro brillante */
  --kt-magic:       #917DED;   /* púrpura mágico (acento distintivo) */
  --kt-magic-ink:   #6A55C2;   /* púrpura para texto sobre claro */
  /* el degradado de marca por defecto es el mágico */
  --kt-grad-brand:  var(--kt-grad-storytime);
}

/* ════════════════════════════════════════════════════════════════════════
   UTILIDADES
   ════════════════════════════════════════════════════════════════════════ */

/* Texto con degradado (clip a las letras). Acepta modificadores. */
.kt-text-gradient,
.kt-text-gradient--brand  { background-image: var(--kt-grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.kt-text-gradient--sunset { background-image: var(--kt-grad-sunset);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.kt-text-gradient--sky    { background-image: var(--kt-grad-sky);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }

/* Fondos con degradado. */
.kt-bg-brand  { background: var(--kt-grad-brand); }
.kt-bg-sunset { background: var(--kt-grad-sunset); }
.kt-bg-sky    { background: var(--kt-grad-sky); }
.kt-bg-wash   { background: var(--kt-grad-wash); }
.kt-bg-ink    { background: var(--kt-grad-ink); color: #fff; }
.kt-bg-org    { background: var(--kt-grad-org); }
.kt-bg-storytime { background: var(--kt-grad-storytime); }
.kt-bg-magic  { background: var(--kt-grad-magic); }

.kt-text-gradient--magic { background-image: var(--kt-grad-storytime);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }

/* Botón / CTA con degradado en pill. */
.kt-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--kt-font-display); font-weight: 800; font-size: 11pt;
  color: #fff; text-decoration: none; cursor: pointer; border: 0;
  padding: 10pt 20pt; border-radius: var(--kt-radius-pill);
  background: var(--kt-grad-cta);
  box-shadow: 0 6px 18px rgb(var(--kt-primary-rgb) / .35);
  letter-spacing: .01em;
}
.kt-btn--ghost {
  background: transparent; color: var(--kt-primary-ink);
  box-shadow: inset 0 0 0 2px var(--kt-border-2);
}

/* Punto del logo (rainbow conic). */
.kt-logo-dot {
  width: 1em; height: 1em; border-radius: .32em; display: inline-block;
  background: var(--kt-grad-logo);
  box-shadow: inset 0 0 0 2.5px #fff;
}

/* Texto de color de marca (variantes AA). */
.kt-primary   { color: var(--kt-primary-ink); }
.kt-secondary { color: var(--kt-secondary-ink); }
.kt-highlight { color: var(--kt-highlight-ink); }
.kt-accent    { color: var(--kt-accent-ink); }

/* Tarjeta base. */
.kt-card {
  background: var(--kt-surface); border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius); box-shadow: var(--kt-shadow);
}

/* Badge / pill. */
.kt-badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--kt-font-display); font-weight: 800; font-size: 8.5pt;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 4pt 10pt; border-radius: var(--kt-radius-pill);
  color: var(--kt-primary-ink); background: rgb(var(--kt-primary-rgb) / .12);
}

/* Tipografía base opcional. */
.kt-display { font-family: var(--kt-font-display); font-weight: 900; letter-spacing: -.01em; }
.kt-body    { font-family: var(--kt-font-body); }
.kt-reading { font-family: var(--kt-font-reading); line-height: 1.62; }

/* Fallback de impresión: forzar render de degradados en PDF. */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}