/* ════════════════════════════════════════════════════════
   CogniLab · Lesson Prose
   ────────────────────────────────────────────────────────
   Tipografía única para el contenido de las lecciones.
   Aplica a:
     · Reader del curso interactivo (.cx-reader__inner.cu-prose)
     · Previsualización en la landing (.cv-mock__body.cu-prose)
     · Cualquier otro lugar que muestre HTML de lecciones.

   Tokens (sobrescribibles por el contenedor padre):
     --prose-fg          texto principal
     --prose-fg-2        texto secundario / cuerpo
     --prose-fg-3        texto terciario / metadatos
     --prose-accent      color de h2 border + ul markers
     --prose-accent-2    color de ol markers + blockquote border
     --prose-accent-bg   fondo de blockquote
     --prose-em-color    color del énfasis (em)
     --prose-code-fg     color del code inline
     --prose-code-bg     fondo del code inline
     --prose-code-bd     borde del code inline
   ════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Spectral:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

.cu-prose {
    /* Defaults — fondos oscuros (curso + landing). Cualquier consumidor
       puede sobreescribir estos tokens en su propio scope. */
    --prose-fg:         #f8f8f8;
    --prose-fg-2:       #d4d4d8;
    --prose-fg-3:       #9ca3af;
    --prose-accent:     #22d3ee;
    --prose-accent-2:   #a78bfa;
    --prose-accent-bg:  rgba(167, 139, 250, 0.05);
    --prose-em-color:   #ffffff;
    --prose-code-fg:    #67e8f9;
    --prose-code-bg:    rgba(34, 211, 238, 0.10);
    --prose-code-bd:    rgba(34, 211, 238, 0.18);

    --prose-font:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --prose-serif:      'Spectral', Georgia, 'Times New Roman', serif;
    --prose-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    font-family: var(--prose-font);
    font-size: 17px;
    line-height: 1.78;
    color: var(--prose-fg-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Aplicar la familia tipográfica a todos los descendientes para sobreescribir
   defaults heredados (p.ej. landing usa OpenDyslexic globalmente). */
.cu-prose * { font-family: inherit; }

.cu-prose h1 {
    font-size: clamp(28px, 4.4vw, 42px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: var(--prose-fg);
    margin: 0 0 28px;
    text-wrap: balance;
}

.cu-prose h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--prose-fg);
    margin: 56px 0 18px;
    padding-left: 14px;
    border-left: 3px solid var(--prose-accent);
}
.cu-prose h2:first-child { margin-top: 0; }

.cu-prose h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--prose-fg);
    margin: 40px 0 14px;
}

.cu-prose p {
    font-size: 17px;
    line-height: 1.78;
    color: var(--prose-fg-2);
    margin: 0 0 22px;
    text-wrap: pretty;
}

.cu-prose strong {
    color: var(--prose-fg);
    font-weight: 600;
}

.cu-prose em {
    color: var(--prose-em-color);
    font-style: italic;
    font-family: var(--prose-serif);
    font-weight: 500;
}

.cu-prose ul, .cu-prose ol {
    margin: 0 0 22px 22px;
    padding: 0;
}
.cu-prose li {
    font-size: 17px;
    line-height: 1.75;
    color: var(--prose-fg-2);
    margin-bottom: 8px;
    padding-left: 6px;
}
.cu-prose ul li::marker { color: var(--prose-accent); }
.cu-prose ol li::marker { color: var(--prose-accent-2); font-weight: 600; }

.cu-prose blockquote {
    margin: 24px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--prose-accent-2);
    background: var(--prose-accent-bg);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--prose-fg-2);
}

.cu-prose code {
    font-family: var(--prose-mono);
    font-size: 0.92em;
    background: var(--prose-code-bg);
    border: 1px solid var(--prose-code-bd);
    padding: 1px 7px;
    border-radius: 5px;
    color: var(--prose-code-fg);
}

/* ── Tablas ──────────────────────────────────────────────────────── */
.cu-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: 15px;
    line-height: 1.55;
    /* Overflow scroll en móvil sin romper el layout */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cu-prose thead {
    border-bottom: 2px solid var(--prose-accent);
}
.cu-prose thead tr {
    background: rgba(34, 211, 238, 0.07);
}
.cu-prose th {
    padding: 12px 18px;
    font-weight: 700;
    text-align: left;
    color: var(--prose-fg);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cu-prose td {
    padding: 11px 18px;
    color: var(--prose-fg-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
.cu-prose tbody tr:last-child td {
    border-bottom: 0;
}
/* Rayas zebra sutiles */
.cu-prose tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.025);
}
.cu-prose tbody tr:hover td {
    background: rgba(34, 211, 238, 0.05);
    transition: background 120ms;
}