.mdx {
  --lm-prose-rule: color-mix(in oklab, var(--lm-gold, #f2c14a) 26%, var(--lm-line, #232a3a));
  line-height: 1.7;
  color: color-mix(in oklab, var(--lm-text, #e6ebf5) 92%, transparent);
  overflow-wrap: anywhere;
}

.mdx > * + * { margin-top: 0.9em; }

.mdx h1, .mdx h2, .mdx h3, .mdx h4, .mdx h5, .mdx h6 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lm-text, #e6ebf5);
}
.mdx > :first-child { margin-top: 0; }

.mdx h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.mdx h2 {
  position: relative;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  padding-bottom: 0.35em;
}
.mdx h2::after {
  content: "";
  position: absolute;
  inset-inline: 0 auto;
  bottom: 0;
  width: 3.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lm-gold, #f2c14a), transparent);
}
.mdx h3 { font-size: 1.25rem; }
.mdx h4 { font-size: 1.0625rem; }
.mdx h5, .mdx h6 {
  font-family: var(--lm-pixel, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm-dim, #8b93a7);
}

.mdx a {
  color: var(--lm-gold, #f2c14a);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--lm-gold, #f2c14a) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--lm-fast, 140ms) linear;
}
.mdx a:hover { text-decoration-color: currentColor; }

.mdx strong { color: #fff; font-weight: 700; }
.mdx em { color: color-mix(in oklab, var(--lm-gold, #f2c14a) 45%, #fff); }
.mdx del { color: var(--lm-dim, #8b93a7); }

.mdx ul, .mdx ol { padding-inline-start: 1.35em; }
.mdx ul { list-style: none; }
.mdx ul > li { position: relative; }
.mdx ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1em;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  rotate: 45deg;
  background: var(--lm-gold, #f2c14a);
}
.mdx ol { list-style: decimal; }
.mdx ol > li::marker {
  color: var(--lm-gold, #f2c14a);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.mdx li + li { margin-top: 0.35em; }
.mdx li > ul, .mdx li > ol { margin-top: 0.35em; }

.mdx blockquote {
  position: relative;
  margin-inline: 0;
  padding: 0.75em 1em 0.75em 1.25em;
  border-radius: var(--lm-r-sm, 6px);
  background: color-mix(in oklab, var(--lm-gold, #f2c14a) 6%, transparent);
  color: color-mix(in oklab, var(--lm-text, #e6ebf5) 88%, transparent);
}
.mdx blockquote::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--lm-gold, #f2c14a), transparent);
}
.mdx blockquote > :first-child { margin-top: 0; }

.mdx code {
  padding: 0.12em 0.4em;
  border-radius: var(--lm-r-sharp, 2px);
  background: color-mix(in oklab, var(--lm-gold, #f2c14a) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--lm-gold, #f2c14a) 20%, transparent);
  font-family: var(--lm-pixel, ui-monospace, monospace);
  font-size: 0.85em;
  color: color-mix(in oklab, var(--lm-gold, #f2c14a) 55%, #fff);
}
.mdx pre {
  padding: 1em 1.15em;
  border-radius: var(--lm-r, 0.75rem);
  border: 1px solid var(--lm-prose-rule);
  background: var(--lm-sunken, #0d1119);
  overflow-x: auto;
  line-height: 1.55;
}
.mdx pre code { padding: 0; border: 0; background: none; color: inherit; font-size: 0.8125rem; }

/* Un <hr> escrito en el CMS separa, pero con aire: nunca con una línea. */
.mdx hr {
  height: 0;
  border: 0;
  background: none;
  margin-block: 2.25em;
}

.mdx img {
  max-width: 100%;
  height: auto;
  border-radius: var(--lm-r-sm, 6px);
}

.mdx table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  overflow: hidden;
  border-radius: var(--lm-r-sm, 6px);
  box-shadow: 0 0 0 1px var(--lm-prose-rule);
}
.mdx th, .mdx td {
  padding: 0.55em 0.8em;
  text-align: start;
}
/* Franjas en vez de líneas, igual que en la comparativa. */
.mdx tbody tr:nth-of-type(even) td { background: color-mix(in oklab, var(--lm-line, #232a3a) 30%, transparent); }
.mdx th {
  font-family: var(--lm-pixel, monospace);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lm-gold, #f2c14a);
  background: color-mix(in oklab, var(--lm-gold, #f2c14a) 8%, transparent);
}
.mdx tbody tr:hover td { background: color-mix(in oklab, var(--lm-gold, #f2c14a) 7%, transparent); }

.mdx kbd {
  padding: 0.1em 0.45em;
  border-radius: var(--lm-r-sharp, 2px);
  border: 1px solid var(--lm-prose-rule);
  box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--lm-ink, #0a0e16) 60%, transparent);
  font-family: var(--lm-pixel, monospace);
  font-size: 0.75em;
}