/* ============================================================
   Jerarquía tipográfica del contenido
   ------------------------------------------------------------
   Capa: base
   ============================================================ */

/* ═══════════════════════════════════════════════════
   TIPOGRAFÍA
═══════════════════════════════════════════════════ */
p { margin-bottom: 12px; line-height: 1.75; }
h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem; color: var(--accent-2);
  margin: 24px 0 12px;
  transition: color var(--t);
}
html.dark-mode h3, body.dark-mode h3 { color: var(--accent); }
ul, ol { padding-left: 24px; margin: 12px 0; }
li { margin-bottom: 7px; line-height: 1.7; }
strong { color: var(--accent-2); font-weight: 600; transition: color var(--t); }
html.dark-mode strong, body.dark-mode strong { color: var(--accent); }

/* Step label inline */
.step {
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--accent-strong); font-weight: 700; margin: 16px 0 4px;
  letter-spacing: .06em;
}
html.dark-mode .step, body.dark-mode .step { color: var(--accent); }

/* Bloque indentado con borde gold — para desarrollos dentro de pasos/ejemplos */
.paso-indent {
  padding: 6px 0 6px 18px;
  border-left: 3px solid rgba(var(--accent-rgb),.35);
  margin: 10px 0 16px;
  transition: border-color .25s;
}
.paso-indent:hover { border-left-color: var(--accent); }
body.dark-mode .paso-indent { border-left-color: rgba(var(--accent-rgb),.3); }
body.dark-mode .paso-indent:hover { border-left-color: var(--accent); }

/* ═══════════════════════════════════════════════════
   MathJax dentro de texto transformado
   ───────────────────────────────────────────────────
   MathJax dibuja cada glifo con su propia fuente y su
   propio ancho. Dos propiedades heredadas lo corrompen:

     text-transform  el uppercase llega hasta los <mjx-c>
                     y convierte `f(x)` en `F(X)`;
                     `\lim` sale ilegible.
     letter-spacing  separa las cajas de la formula entre
                     si. MathJax lo resetea hacia adentro
                     pero NO en el contenedor.

   Pasa en cualquier rotulo en versalitas que reciba una
   formula: el sistema tiene 25 reglas con uppercase en 13
   archivos —section-label, flujo-titulo, deslizador-nombre,
   rf-rot, param-name, res-rot— y todas rompen igual. Por eso
   la regla vive aca, en la capa de tipografia, y no en el
   componente donde se descubrio.

   Sin !important a proposito: un valor HEREDADO siempre
   pierde contra una declaracion que matchea al elemento,
   sin importar la especificidad del ancestro.

   Solo NEUTRALIZA lo heredado; no toca font-family, ni
   font-style, ni font-weight, que MathJax se encarga de
   fijar por su cuenta.
═══════════════════════════════════════════════════ */
mjx-container,
mjx-container * {
  text-transform: none;
  letter-spacing: normal;
  word-spacing: normal;
  font-variant: normal;
}