/*
 * Rayito: identidad "Tormenta" para la landing y el manual.
 *
 * Navy de nube de tormenta como neutro, amarillo de descarga como único
 * acento caliente y un azul frío ("arco") sólo para enlaces y foco.
 * Todos los colores salen de los tokens --rx-*: ningún componente usa un
 * literal. Claro y oscuro los redefine el atributo data-md-color-scheme que
 * Material pone en <body> (paleta del sistema y botón de modo).
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */

:root,
[data-md-color-scheme="default"] {
  --rx-bg: #f7f8fc;
  --rx-surface: #fff;
  --rx-surface-2: #eef1f8;
  --rx-ink: #161a2e;
  --rx-ink-2: #4a5068;
  --rx-ink-3: #6b7189;
  --rx-line: #dde1ec;
  --rx-storm: #161a2e;
  --rx-volt: #ffc83d;
  --rx-volt-ink: #7a4d00;
  --rx-on-volt: #161a2e;
  --rx-arc: #1b56c4;
  --rx-green: #1a6b42;
  --rx-magenta: #a3225b;
  --rx-window-shadow: 0 1px 0 rgb(22 26 46 / 0.04), 0 18px 40px -18px rgb(22 26 46 / 0.35);
  --rx-window-inset: none;
}

[data-md-color-scheme="slate"] {
  --rx-bg: #0f1222;
  --rx-surface: #171b30;
  --rx-surface-2: #1b2038;
  --rx-ink: #e8eaf3;
  --rx-ink-2: #a3a9c2;
  --rx-ink-3: #8990ab;
  --rx-line: #2a3050;
  --rx-storm: #12152a;
  --rx-volt: #ffd34d;
  --rx-volt-ink: #ffd34d;
  --rx-on-volt: #0f1222;
  --rx-arc: #7cc4ff;
  --rx-green: #7fd6a8;
  --rx-magenta: #ff9dc0;
  --rx-window-shadow: none;
  --rx-window-inset: inset 0 1px 0 rgb(255 255 255 / 0.04);
  --md-hue: 232;
}

:root {
  --rx-font-display: "Bricolage Grotesque", var(--md-text-font-family), system-ui, sans-serif;

  --rx-fs-hero: clamp(1.8rem, 1.1rem + 2.6vw, 3rem);
  --rx-fs-h2: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --rx-fs-h3: 0.95rem;
  --rx-fs-lead: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  --rx-fs-small: 0.65rem;
  --rx-fs-caption: 0.75rem;
  --rx-measure: 34em;

  --rx-s1: 0.2rem;
  --rx-s2: 0.4rem;
  --rx-s3: 0.6rem;
  --rx-s4: 0.8rem;
  --rx-s6: 1.2rem;
  --rx-s8: 1.6rem;
  --rx-s12: 2.4rem;
  --rx-s16: 3.2rem;

  --rx-r-s: 0.2rem;
  --rx-r-m: 0.4rem;
  --rx-r-l: 0.8rem;
  --rx-r-pill: 999px;
  --rx-art-bg: #fff;
  --rx-art-max: 46rem;
  --rx-art-loop: 6s;
  --rx-art-half: calc(var(--rx-art-loop) / 2);
  --rx-art-quarter: calc(var(--rx-art-loop) / 4);
  --rx-art-eighth: calc(var(--rx-art-loop) / 8);
  --rx-art-sway: 3.724deg;
  --rx-art-breath: 0.012;
  --rx-art-tail-swing: 6deg;
  --rx-art-flap-swing: 10deg;
  --rx-art-badge: 1.1rem;
  --rx-art-toggle: 2rem;
  --rx-art-toggle-ink: #12152a;
  --rx-art-toggle-bg: rgb(255 255 255 / 0.88);
  --rx-art-glow-core: rgb(255 247 185);
  --rx-art-glow-mid: rgb(251 140 0 / 0.25);
  --rx-art-glow-edge: rgb(251 140 0 / 0);
  --rx-art-dot: rgb(83 194 255);
  --rx-art-signal: #fff;
  --rx-art-ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
}

/* Mapeo a las variables de Material (paleta primary/accent: custom). */
[data-md-color-scheme] {
  --md-primary-fg-color: var(--rx-storm);
  --md-primary-fg-color--light: #2a3050;
  --md-primary-fg-color--dark: #0b0e1c;
  --md-primary-bg-color: #f7f8fc;
  --md-primary-bg-color--light: rgb(247 248 252 / 0.72);
  --md-accent-fg-color: var(--rx-arc);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--rx-arc) 10%, transparent);
  --md-accent-bg-color: var(--rx-volt);
  --md-typeset-a-color: var(--rx-arc);
  --md-default-bg-color: var(--rx-bg);
  --md-default-fg-color: var(--rx-ink);
  --md-default-fg-color--light: var(--rx-ink-2);
  --md-default-fg-color--lighter: var(--rx-ink-3);
  --md-default-fg-color--lightest: var(--rx-line);
  --md-typeset-color: var(--rx-ink);
  --md-code-bg-color: var(--rx-surface-2);
  --md-code-fg-color: var(--rx-ink);
  --md-footer-bg-color: var(--rx-storm);
  --md-footer-bg-color--dark: #0b0e1c;
  --md-footer-fg-color: #f7f8fc;
  --md-footer-fg-color--light: rgb(247 248 252 / 0.78);
  --md-footer-fg-color--lighter: rgb(247 248 252 / 0.62);

  --md-code-hl-keyword-color: var(--rx-arc);
  --md-code-hl-string-color: var(--rx-green);
  --md-code-hl-comment-color: var(--rx-ink-2);
  --md-code-hl-number-color: var(--rx-volt-ink);
  --md-code-hl-constant-color: var(--rx-volt-ink);
  --md-code-hl-special-color: var(--rx-magenta);
  --md-code-hl-function-color: var(--rx-ink);
  --md-code-hl-name-color: var(--rx-ink);
  --md-code-hl-variable-color: var(--rx-ink);
  --md-code-hl-operator-color: var(--rx-ink-2);
  --md-code-hl-punctuation-color: var(--rx-ink-2);
  --md-code-hl-generic-color: var(--rx-ink-2);
}

[data-md-color-scheme="slate"] {
  --md-code-hl-comment-color: var(--rx-ink-3);
}

:root {
  /* Movimiento: sólo transform y opacity. */
  --rx-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rx-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rx-dur-fast: 120ms;
  --rx-dur-pop: 360ms;
  --rx-pop-overshoot: 1.25;
  --rx-pop-stagger: 60ms;
  --rx-rise-shift: 0.4rem;
  --rx-reveal-shift: 0.8rem;
  --rx-reveal-range: entry 0% cover 25%;
  --rx-line-stagger: 70ms;
  --rx-hero-dur: 450ms;
  --rx-bolt-flash-dur: 900ms;
  --rx-bolt-flash-delay: 250ms;
  --rx-bolt-zap-scale: 1.12;
  --rx-logo-glow-opacity: 0.5;
  --rx-logo-glow-mix: 70%;
  --rx-label-step: 2;
  /* Líneas del código del héroe con retardo propio; las posteriores comparten el último. */
  --rx-line-max: 5;
  /* Regla: la escala llega a 6 s y esos 6 s se dibujan en 1,5 s. */
  --rx-ruler-max-s: 6;
  --rx-ruler-start: 200ms;
  --rx-ruler-draw: 1500ms;
  --rx-ruler-line: 2px;
}

body {
  text-wrap: pretty;
}

.md-typeset :is(h1, h2, h3) {
  text-wrap: balance;
}

/* ------------------------------------------------------------------ */
/* 2. Cabecera, pestañas, navegación y pie                             */
/* ------------------------------------------------------------------ */

.md-header,
.md-tabs {
  background-color: var(--rx-storm);
  color: var(--md-primary-bg-color);
}

.md-header {
  box-shadow: none;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: 1.5rem;
}

.md-header__button.md-logo {
  position: relative;
  isolation: isolate;
}

.md-header__button.md-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rx-volt) var(--rx-logo-glow-mix), transparent), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rx-dur-fast);
}

.md-header__button.md-logo:is(:hover, :focus-visible)::after {
  opacity: var(--rx-logo-glow-opacity);
}

.md-header__title {
  font-family: var(--rx-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.md-tabs {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.md-tabs__link {
  opacity: 0.78;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover,
.md-tabs__link:focus-visible {
  opacity: 1;
}

.md-tabs__item--active {
  box-shadow: inset 0 -2px 0 var(--rx-volt);
}

.md-header__source .md-source__repository,
.md-source__facts {
  color: var(--md-primary-bg-color--light);
}

@media screen and (min-width: 60em) {
  .md-search__input {
    background-color: rgb(255 255 255 / 0.08);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  }

  .md-search__input:hover {
    background-color: rgb(255 255 255 / 0.14);
  }
}

.md-nav__title,
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
  color: var(--rx-ink-2);
  font-weight: 700;
}

.md-nav__link--active {
  color: var(--rx-ink);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--rx-volt);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

.md-nav__link {
  transition: color var(--rx-dur-fast);
}

.md-footer {
  background-color: var(--rx-storm);
}

.md-footer-meta {
  background-color: var(--md-footer-bg-color--dark);
}

.md-footer-meta .md-copyright,
.md-footer-meta .md-copyright a {
  color: var(--md-footer-fg-color--light);
}

.md-footer-meta .md-copyright a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* 3. Tipografía del manual                                            */
/* ------------------------------------------------------------------ */

.md-typeset h1 {
  font-family: var(--rx-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rx-ink);
  margin-bottom: 0.8em;
}

.md-typeset h2 {
  font-family: var(--rx-font-display);
  font-weight: 650;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rx-ink);
  margin: 2em 0 0.7em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rx-line);
}

.md-typeset h3 {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--rx-ink);
  letter-spacing: 0;
}

.md-typeset h4 {
  font-weight: 700;
  color: var(--rx-ink-2);
}

.md-typeset .headerlink {
  color: var(--rx-ink-3);
}

.md-typeset a:not(.md-button, .headerlink, .md-nav__link, .md-source, .md-tabs__link) {
  text-underline-offset: 0.2em;
}

.md-typeset :is(p, li, td, dd) > a:not(.md-button, .headerlink) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--rx-arc) 45%, transparent);
  text-decoration-thickness: 1px;
}

.md-typeset :is(p, li, td, dd) > a:not(.md-button, .headerlink):hover {
  text-decoration-color: currentcolor;
}

.md-typeset :not(pre) > code {
  background-color: var(--rx-surface-2);
  border-radius: var(--rx-r-s);
  padding: 0.1em 0.35em;
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 4. Código, pestañas de código, tablas, admonitions, tarjetas        */
/* ------------------------------------------------------------------ */

.md-typeset .highlight pre > code,
.md-typeset pre > code {
  border-radius: var(--rx-r-m);
}

.md-typeset .highlight,
.md-typeset .highlighttable {
  border-radius: var(--rx-r-m);
}

.md-typeset pre {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-m);
  background-color: var(--rx-surface-2);
}

.md-typeset pre > code {
  background-color: transparent;
}

.md-typeset .highlight .c1,
.md-typeset .highlight .cm,
.md-typeset .highlight .c,
.md-typeset .highlight .ch {
  font-style: italic;
}

.md-clipboard {
  color: var(--rx-ink-2);
}

.md-clipboard:hover,
.md-clipboard:focus-visible {
  color: var(--rx-arc);
}

.md-typeset .tabbed-set {
  border-radius: var(--rx-r-m);
}

.md-typeset .tabbed-labels > label {
  font-weight: 700;
  color: var(--rx-ink-2);
}

.md-typeset .tabbed-labels::before {
  background: var(--rx-volt);
  height: 2px;
}

.md-typeset .tabbed-labels {
  box-shadow: 0 -1px 0 var(--rx-line) inset;
}

.md-annotation__index {
  background-color: var(--rx-volt);
  color: var(--rx-on-volt);
}

.md-typeset .md-annotation__index::after {
  background-color: var(--rx-volt);
}

.md-typeset table:not([class]) {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-m);
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--rx-surface);
}

.md-typeset table:not([class]) th {
  background-color: var(--rx-surface-2);
  color: var(--rx-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--rx-line);
}

.md-typeset table:not([class]) th:first-child {
  border-top-left-radius: var(--rx-r-m);
}

.md-typeset table:not([class]) th:last-child {
  border-top-right-radius: var(--rx-r-m);
}

.md-typeset table:not([class]) td {
  border-top: 0;
  border-bottom: 1px solid var(--rx-line);
}

.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: 0;
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: transparent;
}

@media screen and (min-width: 45em) {
  .md-typeset table:not([class]) td:first-child code {
    white-space: nowrap;
  }
}

/* Admonitions: borde completo tenue y fondo apenas tintado. */
.md-typeset .admonition,
.md-typeset details {
  --rx-adm: var(--rx-arc);
  border: 1px solid color-mix(in srgb, var(--rx-adm) 35%, transparent);
  border-radius: var(--rx-r-m);
  background-color: color-mix(in srgb, var(--rx-adm) 6%, var(--rx-bg));
  box-shadow: none;
  font-size: 0.72rem;
}

.md-typeset :is(.admonition, details):is(.note, .info, .todo) {
  --rx-adm: #448aff;
}

.md-typeset :is(.admonition, details):is(.tip, .hint, .important, .abstract, .summary, .tldr) {
  --rx-adm: #00a7b8;
}

.md-typeset :is(.admonition, details):is(.success, .check, .done) {
  --rx-adm: #1fa35a;
}

.md-typeset :is(.admonition, details):is(.question, .help, .faq) {
  --rx-adm: #5a8f1a;
}

.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) {
  --rx-adm: #e08a00;
}

.md-typeset :is(.admonition, details):is(.failure, .fail, .missing, .danger, .error, .bug) {
  --rx-adm: #e5334b;
}

.md-typeset :is(.admonition, details):is(.example) {
  --rx-adm: #7c5cff;
}

.md-typeset :is(.admonition, details):is(.quote, .cite) {
  --rx-adm: #8990ab;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: transparent;
  font-weight: 700;
  color: var(--rx-ink);
}

.md-typeset div.admonition.info {
  --rx-adm: var(--rx-volt);
  --md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 15h2c0 1.08 1.37 2 3 2s3-.92 3-2c0-1.1-1.04-1.5-3.24-2.03C9.64 12.44 7 11.78 7 9c0-1.79 1.47-3.31 3.5-3.82V3h3v2.18C15.53 5.69 17 7.21 17 9h-2c0-1.08-1.37-2-3-2s-3 .92-3 2c0 1.1 1.04 1.5 3.24 2.03C14.36 11.56 17 12.22 17 15c0 1.79-1.47 3.31-3.5 3.82V21h-3v-2.18C8.47 18.31 7 16.79 7 15z'/></svg>");
  border-color: color-mix(in srgb, var(--rx-volt) 55%, transparent);
  background-color: color-mix(in srgb, var(--rx-volt) 10%, var(--rx-bg));
}

.md-typeset div.admonition.info > .admonition-title::before {
  background-color: var(--rx-volt-ink);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--rx-adm);
}

/* Tarjetas de Material (`grid cards`) en todo el sitio. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-m);
  background-color: var(--rx-surface);
  box-shadow: none;
  transition: border-color var(--rx-dur-fast);
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid > .card:hover {
  border-color: var(--rx-volt);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li > hr {
  border-color: var(--rx-line);
}

.md-typeset .grid.cards .twemoji.lg,
.md-typeset .grid.cards .lg svg {
  color: var(--rx-volt-ink);
}

/* Botones. */
.md-typeset .md-button {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-m);
  color: var(--rx-ink);
  font-weight: 700;
  min-height: 2.2rem;
  display: inline-flex;
  align-items: center;
  padding: 0 1em;
  transition: border-color var(--rx-dur-fast), background-color var(--rx-dur-fast);
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus-visible {
  border-color: var(--rx-ink-2);
  background-color: transparent;
  color: var(--rx-ink);
}

.md-typeset .md-button--primary {
  background-color: var(--rx-volt);
  border-color: var(--rx-volt);
  color: var(--rx-on-volt);
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus-visible {
  background-color: color-mix(in srgb, var(--rx-volt) 88%, var(--rx-ink));
  border-color: color-mix(in srgb, var(--rx-volt) 88%, var(--rx-ink));
  color: var(--rx-on-volt);
}

/* Foco visible, siempre. */
:is(a, button, summary, input, label, [tabindex]):focus-visible {
  outline: 2px solid var(--rx-arc);
  outline-offset: 2px;
}

.md-header :is(a, button, label, input):focus-visible,
.md-tabs a:focus-visible,
.md-footer a:focus-visible {
  outline-color: var(--rx-volt);
}

/* ------------------------------------------------------------------ */
/* 5. Páginas índice (pasos de "La ruta recomendada")                  */
/* ------------------------------------------------------------------ */

.md-typeset .rx-steps,
.md-typeset div.rx-steps {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  display: grid;
  gap: var(--rx-s4);
  counter-reset: rx-step;
}

.md-typeset .rx-steps > .rx-step {
  counter-increment: rx-step;
  position: relative;
  margin: 0;
  min-width: 0;
  padding: var(--rx-s4) var(--rx-s6) var(--rx-s4) 3.4rem;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-m);
  background-color: var(--rx-surface);
}

.md-typeset .rx-steps > .rx-step::before {
  content: counter(rx-step);
  position: absolute;
  left: var(--rx-s4);
  top: var(--rx-s3);
  font-family: var(--rx-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--rx-volt-ink);
  font-variant-numeric: tabular-nums;
}

.md-typeset .rx-steps > .rx-step > :first-child {
  margin-top: 0;
}

.md-typeset .rx-steps > .rx-step > :last-child {
  margin-bottom: 0;
}

.md-typeset .rx-steps > .rx-step h3 {
  margin: 0 0 var(--rx-s2);
  font-family: var(--rx-font-display);
  font-size: var(--rx-fs-h3);
}

/* ------------------------------------------------------------------ */
/* 6. Landing                                                          */
/* ------------------------------------------------------------------ */

.md-main:has(.rx-home) {
  background:
    radial-gradient(
      60rem 26rem at 0% 0%,
      color-mix(in srgb, var(--rx-volt) 9%, transparent),
      transparent 70%
    ),
    var(--rx-bg);
}

[data-md-color-scheme="slate"] .md-main:has(.rx-home) {
  background:
    radial-gradient(
      60rem 26rem at 0% 0%,
      color-mix(in srgb, var(--rx-volt) 6%, transparent),
      transparent 70%
    ),
    var(--rx-bg);
}

.md-main:has(.rx-home) .md-main__inner.md-grid {
  max-width: 76rem;
}

.rx-home {
  display: grid;
  gap: var(--rx-s12);
  padding-block: var(--rx-s8) var(--rx-s12);
  min-width: 0;
}

.rx-home > * {
  min-width: 0;
}

@media screen and (min-width: 60em) {
  .rx-home {
    gap: var(--rx-s16);
    padding-block: var(--rx-s12) var(--rx-s16);
  }
}

.md-typeset .rx-home h2 {
  font-family: var(--rx-font-display);
  font-weight: 650;
  font-size: var(--rx-fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--rx-s4);
  padding: 0;
  border-top: 0;
}

.md-typeset .rx-home h3 {
  font-size: var(--rx-fs-h3);
  font-weight: 700;
  margin: 0 0 var(--rx-s2);
}

.rx-home .headerlink {
  display: none;
}

.md-typeset .rx-section__lead,
.rx-section__lead {
  font-size: var(--rx-fs-lead);
  line-height: 1.55;
  color: var(--rx-ink-2);
  max-width: var(--rx-measure);
}

/* Hero */

.rx-hero {
  display: grid;
  gap: var(--rx-s8);
  align-items: center;
}

@media screen and (min-width: 60em) {
  .rx-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--rx-s12);
  }
}

.rx-hero > * {
  min-width: 0;
}

.md-typeset .rx-hero__title {
  font-family: var(--rx-font-display);
  font-weight: 800;
  font-size: var(--rx-fs-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: var(--rx-s4) 0 var(--rx-s4);
  color: var(--rx-ink);
}

.md-typeset .rx-hero__lead {
  font-size: var(--rx-fs-lead);
  line-height: 1.55;
  color: var(--rx-ink-2);
  max-width: var(--rx-measure);
  margin: 0 0 var(--rx-s6);
}

.rx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rx-s3);
  margin-bottom: var(--rx-s4);
}

.rx-hero__actions p {
  display: contents;
}

.md-typeset .rx-hero__actions .md-button {
  margin: 0;
}

.md-typeset .rx-hero__note {
  font-size: 0.72rem;
  color: var(--rx-ink-2);
  margin: 0;
}

.md-typeset a.rx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rx-s2);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rx-line);
  border-radius: 999px;
  background-color: var(--rx-surface);
  color: var(--rx-volt-ink);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--rx-dur-fast);
}

.md-typeset a.rx-pill::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--rx-volt);
}

.md-typeset a.rx-pill:hover,
.md-typeset a.rx-pill:focus-visible {
  border-color: var(--rx-volt);
  color: var(--rx-volt-ink);
}

/* Ventana de código del hero */

.rx-hero__code {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-l);
  background-color: var(--rx-surface);
  box-shadow: var(--rx-window-shadow), var(--rx-window-inset);
  overflow: hidden;
}

.rx-window {
  display: flex;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem 0;
}

.rx-window span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--rx-line);
}

.rx-hero__code .tabbed-set {
  margin: 0;
}

.rx-hero__code .tabbed-labels {
  padding-inline: var(--rx-s4);
}

.rx-hero__code .tabbed-content {
  padding: 0;
}

.rx-hero__code .tabbed-block {
  padding: var(--rx-s2) var(--rx-s4) var(--rx-s4);
}

.rx-hero__code .tabbed-block > * + * {
  margin-top: var(--rx-s2);
}

.rx-hero__code .highlight,
.rx-hero__code pre {
  margin: 0;
}

.rx-hero__code .tabbed-block > .highlight + .highlight {
  margin-top: var(--rx-s2);
}

.rx-hero__code pre {
  border: 0;
  background-color: var(--rx-surface-2);
}

.rx-hero__code pre > code {
  font-size: 0.7rem;
  line-height: 1.6;
}

.md-typeset .rx-hero__foot {
  margin: 0;
  padding: var(--rx-s3) var(--rx-s4);
  border-top: 1px solid var(--rx-line);
  font-size: var(--rx-fs-small);
  color: var(--rx-ink-2);
}

/* Regla del destello: tiempos medidos a escala, 0 a 6 s. */

.rx-ruler {
  position: relative;
  display: grid;
  gap: var(--rx-s2);
  font-size: var(--rx-fs-small);
}

.rx-ruler__track {
  position: relative;
  display: grid;
  gap: var(--rx-s3);
  margin: 0;
  padding: 0;
}

.rx-ruler__tick,
.rx-ruler__mark {
  --at: calc(var(--s) / var(--rx-ruler-max-s) * 100%);
  --rx-at-time: calc(var(--rx-ruler-start) + var(--rx-ruler-draw) * var(--s) / var(--rx-ruler-max-s));
}

.rx-ruler__mark--up {
  --rx-rise-dir: 1;
}

.rx-ruler__mark--down {
  --rx-rise-dir: -1;
}

.rx-ruler__tick {
  display: none;
}

.rx-ruler__mark {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  grid-template-areas:
    "value label"
    "bar bar";
  align-items: baseline;
  column-gap: var(--rx-s3);
  row-gap: 0.3rem;
}

.rx-ruler__mark::after {
  grid-area: bar;
  content: "";
  height: 4px;
  width: var(--at);
  min-width: 4px;
  border-radius: 2px;
  background-color: var(--rx-volt);
}

.rx-ruler__value {
  grid-area: value;
  font-family: var(--rx-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--rx-volt-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rx-ruler__label {
  grid-area: label;
  font-size: 0.72rem;
  color: var(--rx-ink);
}

.md-typeset .rx-ruler__note {
  margin: var(--rx-s2) 0 0;
  font-size: var(--rx-fs-small);
  color: var(--rx-ink-2);
}

@media screen and (min-width: 60em) {
  .rx-ruler__track {
    display: block;
    height: 9rem;
    margin-top: 0;
  }

  .rx-ruler__track::before,
  .rx-ruler__track::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: var(--rx-ruler-line);
  }

  .rx-ruler__track::before {
    background-color: var(--rx-line);
  }

  .rx-ruler__tick {
    display: block;
    position: absolute;
    left: var(--at);
    top: 50%;
    width: 1px;
    height: 0.5rem;
    margin-top: -0.25rem;
    background-color: var(--rx-ink-3);
  }

  .rx-ruler__tick span {
    position: absolute;
    top: 0.75rem;
    left: 0;
    transform: translateX(-50%);
    color: var(--rx-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .rx-ruler__tick:first-of-type span {
    transform: none;
  }

  .rx-ruler__tick:nth-of-type(7) span {
    transform: translateX(-100%);
  }

  .rx-ruler__mark {
    position: absolute;
    left: var(--at);
    top: 50%;
    display: block;
  }

  .rx-ruler__mark::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.9rem;
    height: 0.9rem;
    min-width: 0;
    margin: -0.45rem 0 0 -0.45rem;
    border-radius: 50%;
    border: 2px solid var(--rx-bg);
  }

  .rx-ruler__value,
  .rx-ruler__label {
    position: absolute;
    left: 0;
    display: block;
    white-space: nowrap;
  }

  .rx-ruler__mark--up .rx-ruler__value {
    bottom: 1.95rem;
  }

  .rx-ruler__mark--up .rx-ruler__label {
    bottom: 0.9rem;
  }

  .rx-ruler__mark--down .rx-ruler__value {
    top: 2.35rem;
  }

  .rx-ruler__mark--down .rx-ruler__label {
    top: 3.9rem;
  }

  .rx-ruler__mark--end .rx-ruler__value,
  .rx-ruler__mark--end .rx-ruler__label {
    left: auto;
    right: -0.45rem;
    text-align: right;
  }

  .rx-ruler__value {
    font-size: 1.3rem;
  }

  .rx-ruler__mark::before {
    content: "";
    position: absolute;
    left: -1px;
    width: 2px;
    background-color: var(--rx-volt);
  }

  .rx-ruler__mark--up::before {
    bottom: 0;
    height: 0.9rem;
  }

  .rx-ruler__mark--down::before {
    top: 0;
    height: 2.2rem;
  }
}

/* Ganchos */

.rx-hooks {
  display: grid;
  gap: var(--rx-s4);
}

@media screen and (min-width: 60em) {
  .rx-hooks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rx-hook {
  min-width: 0;
  padding: var(--rx-s6);
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-m);
  background-color: var(--rx-surface);
  transition: border-color var(--rx-dur-fast);
}

.rx-hook:hover,
.rx-hook:focus-within {
  border-color: var(--rx-volt);
}

.rx-hook > :last-child {
  margin-bottom: 0;
}

.rx-hook p {
  margin-block: 0 var(--rx-s3);
  color: var(--rx-ink-2);
}

.rx-hook p:last-child {
  margin-bottom: 0;
}

/* Secciones y divisiones texto/código */

.rx-section,
.rx-split__copy,
.rx-split__code {
  min-width: 0;
}

.rx-split {
  display: grid;
  gap: var(--rx-s8);
  align-items: start;
}

@media screen and (min-width: 60em) {
  .rx-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--rx-s12);
  }
}

.rx-split__copy p,
.rx-split__copy li {
  max-width: var(--rx-measure);
}

.rx-split__code .tabbed-set {
  margin: 0;
}

/* Pasos */

.rx-section .rx-steps {
  margin: 0;
  gap: var(--rx-s4);
}

@media screen and (min-width: 60em) {
  .rx-section .rx-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rx-section .rx-steps > .rx-step {
  padding: var(--rx-s6);
  padding-top: 3.6rem;
}

.rx-section .rx-steps > .rx-step::before {
  left: var(--rx-s6);
  top: var(--rx-s4);
  font-size: 2rem;
}

.rx-section .rx-steps > .rx-step p {
  color: var(--rx-ink-2);
}

.rx-section .rx-steps > .rx-step pre {
  margin-block: var(--rx-s3);
}

/* Todo lo demás */

.rx-features {
  display: grid;
  gap: var(--rx-s6) var(--rx-s8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

@media screen and (min-width: 60em) {
  .rx-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rx-feature {
  min-width: 0;
  padding-top: var(--rx-s4);
  border-top: 1px solid var(--rx-line);
}

.rx-feature p {
  margin: var(--rx-s2) 0 0;
  color: var(--rx-ink-2);
  font-size: 0.72rem;
}

.rx-feature .twemoji {
  color: var(--rx-volt-ink);
}

.rx-feature > :first-child {
  margin-top: 0;
}

/* Banda de coste */

.rx-band {
  padding: var(--rx-s8) var(--rx-s6);
  border-radius: var(--rx-r-m);
  background-color: var(--rx-surface-2);
}

@media screen and (min-width: 60em) {
  .rx-band {
    padding: var(--rx-s12);
  }
}

.rx-band > :last-child {
  margin-bottom: 0;
}

.rx-band__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rx-s6) var(--rx-s4);
  margin: var(--rx-s8) 0;
}

@media screen and (min-width: 60em) {
  .rx-band__figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.md-typeset .rx-figure {
  display: grid;
  gap: var(--rx-s1);
  margin: 0;
  min-width: 0;
}

.rx-figure strong {
  font-family: var(--rx-font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.7rem + 1.4vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rx-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.rx-figure span {
  font-size: 0.72rem;
  color: var(--rx-ink-2);
}

/* Tarjetas del manual */

.rx-cards.grid.cards > ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.rx-cards.grid.cards > ul > li {
  position: relative;
  margin: 0;
}

.rx-cards.grid.cards > ul > li a {
  position: relative;
  z-index: 1;
}

.rx-cards.grid.cards > ul > li strong a {
  position: static;
  z-index: auto;
  text-decoration: none;
  color: var(--rx-ink);
}

.rx-cards.grid.cards > ul > li strong a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rx-r-m);
}

.rx-cards.grid.cards > ul > li strong a:focus-visible {
  outline: 0;
}

.rx-cards.grid.cards > ul > li strong a:focus-visible::after {
  outline: 2px solid var(--rx-arc);
  outline-offset: 2px;
}

/* Qué incluye y CTA final */

.rx-incluye {
  min-width: 0;
}

.md-typeset .rx-incluye h2 {
  margin-bottom: var(--rx-s4);
}

.rx-cta {
  text-align: center;
  padding-block: var(--rx-s8);
}

.md-typeset .rx-cta h2 {
  margin-bottom: var(--rx-s6);
}

.rx-cta .md-button {
  margin: var(--rx-s1);
}

/* ------------------------------------------------------------------ */
/* 7. Movimiento: un solo momento orquestado, sólo si se permite       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rx-draw-x {
    from { transform: scaleX(0); }
  }

  @keyframes rx-grow-y {
    from { transform: scaleY(0); }
  }

  @keyframes rx-charge {
    from {
      opacity: 1;
      transform: scaleX(0);
    }

    to {
      opacity: 1;
    }
  }

  @keyframes rx-fade-in {
    from { opacity: 0; }
  }

  @keyframes rx-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes rx-rise {
    from {
      opacity: 0;
      transform: translateY(calc(var(--rx-rise-shift) * var(--rx-rise-dir, 1)));
    }
  }

  @keyframes rx-pop {
    0% { opacity: 0; transform: scale(0); }
    60% { opacity: 1; transform: scale(var(--rx-pop-overshoot)); }
    100% { opacity: 1; transform: none; }
  }

  /* Parpadeo de rayo: destello, caída casi a cero y segundo destello que se apaga. */
  @keyframes rx-bolt-flash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    16% { opacity: 0.2; }
    26% { opacity: 0.9; }
    100% { opacity: 0; }
  }

  @keyframes rx-bolt-zap {
    40% { transform: scale(var(--rx-bolt-zap-scale)); }
  }

  @keyframes rx-bolt-zap-hover {
    40% { transform: scale(var(--rx-bolt-zap-scale)); }
  }

  @keyframes rx-reveal {
    from {
      opacity: 0;
      transform: translateY(var(--rx-reveal-shift));
    }
  }

  .rx-ruler__mark::after {
    transform-origin: left center;
    animation: rx-draw-x calc(var(--rx-ruler-draw) * var(--s) / var(--rx-ruler-max-s)) linear var(--rx-ruler-start) backwards;
  }

  .rx-ruler__value,
  .rx-ruler__label {
    animation: rx-rise var(--rx-dur-pop) var(--rx-ease-out) var(--rx-at-time) backwards;
  }

  @media screen and (max-width: 59.99em) {
    @supports (animation-timeline: view()) {
      .rx-ruler__mark::after {
        animation: rx-draw-x linear both;
        animation-timeline: view();
        animation-range: var(--rx-reveal-range);
      }

      .rx-ruler__value,
      .rx-ruler__label {
        animation: rx-rise linear both;
        animation-timeline: view();
        animation-range: var(--rx-reveal-range);
      }
    }
  }

  @media screen and (min-width: 60em) {
    .rx-ruler__track::before {
      transform-origin: left center;
      animation: rx-draw-x var(--rx-ruler-draw) linear var(--rx-ruler-start) backwards;
    }

    .rx-ruler__track::after {
      background-color: var(--rx-volt);
      opacity: 0;
      transform-origin: left center;
      pointer-events: none;
      animation:
        rx-charge var(--rx-ruler-draw) linear var(--rx-ruler-start),
        rx-fade-out var(--rx-dur-pop) var(--rx-ease-out) calc(var(--rx-ruler-start) + var(--rx-ruler-draw));
    }

    .rx-ruler__tick {
      animation: rx-fade-in var(--rx-dur-pop) var(--rx-ease-out) var(--rx-at-time) backwards;
    }

    .rx-ruler__mark::after {
      transform-origin: center;
      animation: rx-pop var(--rx-dur-pop) var(--rx-ease-pop) var(--rx-at-time) backwards;
    }

    .rx-ruler__mark--up::before {
      transform-origin: bottom center;
    }

    .rx-ruler__mark--down::before {
      transform-origin: top center;
    }

    .rx-ruler__mark::before {
      animation: rx-grow-y var(--rx-dur-pop) var(--rx-ease-out) calc(var(--rx-at-time) + var(--rx-pop-stagger)) backwards;
    }

    .rx-ruler__value,
    .rx-ruler__label {
      animation-delay: calc(var(--rx-at-time) + var(--rx-label-step) * var(--rx-pop-stagger));
    }
  }

  body:has(.rx-home) .md-header__button.md-logo::after {
    animation: rx-bolt-flash var(--rx-bolt-flash-dur) var(--rx-ease-out) var(--rx-bolt-flash-delay);
  }

  body:has(.rx-home) .md-header__button.md-logo img {
    animation: rx-bolt-zap var(--rx-bolt-flash-dur) var(--rx-ease-out) var(--rx-bolt-flash-delay);
  }

  @media (hover: hover) {
    body:has(.md-header) .md-header__button.md-logo:is(:hover, :focus-visible) img {
      animation: rx-bolt-zap-hover var(--rx-dur-pop) var(--rx-ease-pop);
    }
  }

  .rx-hero__code {
    animation: rx-rise var(--rx-hero-dur) var(--rx-ease-out) backwards;
  }

  .rx-hero__code .tabbed-block > .highlight:last-child code > span {
    animation: rx-fade-in var(--rx-dur-pop) var(--rx-ease-out) calc(var(--rx-hero-dur) + var(--rx-line-stagger) * var(--rx-line, var(--rx-line-max))) backwards;
  }

  .rx-hero__code code > span:first-child { --rx-line: 0; }
  .rx-hero__code code > span:nth-child(2) { --rx-line: 1; }
  .rx-hero__code code > span:nth-child(3) { --rx-line: 2; }
  .rx-hero__code code > span:nth-child(4) { --rx-line: 3; }
  .rx-hero__code code > span:nth-child(5) { --rx-line: 4; }

  @supports (animation-timeline: view()) {
    .rx-home :is(.rx-hook, .rx-feature, .rx-figure, .rx-steps > .rx-step) {
      animation: rx-reveal linear both;
      animation-timeline: view();
      animation-range: var(--rx-reveal-range);
    }
  }

  /* Ilustración: un bucle maestro (--rx-art-loop) y todos los periodos son
     fracciones suyas, así que el dibujo cierra el ciclo sin saltos. Cada seno
     se escribe con easeInOutSine y `alternate`, que da un seno exacto; los
     retardos negativos hacen que el primer fotograma ya esté a mitad. */

  .rx-art__gear { animation: rx-art-spin var(--rx-art-half) linear infinite; }
  .rx-art__gear--2 { animation-name: rx-art-spin-back; }

  .rx-art__male {
    animation:
      rx-art-sway var(--rx-art-quarter) var(--rx-art-ease-sine) calc(var(--rx-art-eighth) * -1) infinite alternate,
      rx-art-breath var(--rx-art-eighth) var(--rx-art-ease-sine) calc(var(--rx-art-eighth) / -2) infinite alternate;
  }

  .rx-art__male > .rx-art__tail {
    animation: rx-art-tail var(--rx-art-quarter) var(--rx-art-ease-sine) calc(var(--rx-art-eighth) * -1) infinite alternate;
  }

  .rx-art__female {
    animation: rx-art-sway var(--rx-art-quarter) var(--rx-art-ease-sine) calc(var(--rx-art-loop) * -0.42275) infinite alternate;
  }

  .rx-art__female > .rx-art__tail {
    animation: rx-art-tail var(--rx-art-quarter) var(--rx-art-ease-sine) calc(var(--rx-art-loop) * -0.2205) infinite alternate;
  }

  .rx-art__cube { animation: rx-art-cube-x var(--rx-art-half) var(--rx-art-ease-sine) calc(var(--rx-art-quarter) * -1) infinite alternate; }

  .rx-art__cube-bob {
    animation:
      rx-art-cube-y var(--rx-art-quarter) var(--rx-art-ease-sine) calc(var(--rx-art-eighth) * -1) infinite alternate,
      rx-art-cube-tilt var(--rx-art-half) var(--rx-art-ease-sine) calc(var(--rx-art-quarter) * -1) infinite alternate;
  }

  .rx-art__wing { animation: rx-art-flap calc(var(--rx-art-loop) / 12) var(--rx-art-ease-sine) infinite alternate; }

  .rx-art__belt { animation: rx-art-belt var(--rx-art-half) linear calc(var(--i) * var(--rx-art-loop) / -6) infinite; }
  .rx-art__arrow { animation: rx-art-arrow var(--rx-art-half) linear calc(var(--i) * var(--rx-art-quarter) * -1) infinite; }

  .rx-art__glow {
    animation: rx-art-glow var(--rx-art-quarter) var(--rx-art-ease-sine) calc(var(--i) * var(--rx-art-loop) * 0.15915 - var(--rx-art-loop) * 0.625) infinite alternate;
  }

  .rx-art__dot {
    animation: rx-art-dot var(--rx-art-eighth) var(--rx-art-ease-sine) calc(var(--n) * var(--rx-art-loop) * 0.039788 - var(--rx-art-loop) * 0.3125) infinite alternate;
  }

  .rx-art__signal { animation: rx-art-signal var(--rx-art-half) linear infinite; }

  @keyframes rx-art-spin { to { rotate: 360deg; } }
  @keyframes rx-art-spin-back { to { rotate: -360deg; } }

  @keyframes rx-art-sway {
    from { rotate: calc(var(--rx-art-sway) * -1); }
    to { rotate: var(--rx-art-sway); }
  }

  @keyframes rx-art-breath {
    from { scale: 1 calc(1 - var(--rx-art-breath)); }
    to { scale: 1 calc(1 + var(--rx-art-breath)); }
  }

  @keyframes rx-art-tail {
    from { rotate: calc(var(--rx-art-tail-swing) * -1); }
    to { rotate: var(--rx-art-tail-swing); }
  }

  @keyframes rx-art-cube-x {
    from { translate: -4.787% 0; }
    to { translate: 4.787% 0; }
  }

  @keyframes rx-art-cube-y {
    from { translate: 0 -19.469%; }
    to { translate: 0 19.469%; }
  }

  @keyframes rx-art-cube-tilt {
    from { rotate: -4.011deg; }
    to { rotate: 4.011deg; }
  }

  @keyframes rx-art-flap {
    from { rotate: calc(var(--rx-art-flap-swing) * var(--dir) * -1); }
    to { rotate: calc(var(--rx-art-flap-swing) * var(--dir)); }
  }

  @keyframes rx-art-belt {
    0% { translate: 0 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { translate: 381.17% 109.82%; opacity: 0; }
  }

  @keyframes rx-art-arrow {
    0% { translate: 0% 0%; opacity: 0; }
    5% { translate: 33% -2.4%; opacity: 0.156; }
    10% { translate: 65% -6.6%; opacity: 0.309; }
    15% { translate: 95.9% -12.6%; opacity: 0.454; }
    20% { translate: 125.8% -20.4%; opacity: 0.588; }
    25% { translate: 154.7% -30%; opacity: 0.707; }
    30% { translate: 182.5% -41.4%; opacity: 0.809; }
    35% { translate: 209.3% -54.6%; opacity: 0.891; }
    40% { translate: 235% -69.6%; opacity: 0.951; }
    45% { translate: 259.7% -86.3%; opacity: 0.988; }
    50% { translate: 283.3% -104.9%; opacity: 1; }
    55% { translate: 305.9% -125.2%; opacity: 0.988; }
    60% { translate: 327.5% -147.4%; opacity: 0.951; }
    65% { translate: 348% -171.3%; opacity: 0.891; }
    70% { translate: 367.5% -197.1%; opacity: 0.809; }
    75% { translate: 385.9% -224.6%; opacity: 0.707; }
    80% { translate: 403.3% -253.9%; opacity: 0.588; }
    85% { translate: 419.7% -285%; opacity: 0.454; }
    90% { translate: 435% -317.9%; opacity: 0.309; }
    95% { translate: 449.3% -352.6%; opacity: 0.156; }
    100% { translate: 462.5% -389.1%; opacity: 0; }
  }

  @keyframes rx-art-glow {
    from { opacity: 0.22; }
    to { opacity: 0.5; }
  }

  @keyframes rx-art-dot {
    from { opacity: 0.2; }
    to { opacity: 1; }
  }

  @keyframes rx-art-signal {
    0%, 100% { translate: 0 0; }
    33.333% { translate: 440% -540%; }
    66.667% { translate: 770% 20%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.rx-home, .md-header) *,
  :is(.rx-home, .md-header) *::before,
  :is(.rx-home, .md-header) *::after,
  .md-typeset .grid.cards > ul > li,
  .md-typeset .md-button,
  .md-nav__link {
    transition: none;
    animation: none;
  }
}

[dir] .md-typeset .rx-steps > .rx-step {
  margin-inline: 0;
}

.md-typeset__scrollwrap .md-typeset__table,
.md-typeset__table table:not([class]) {
  display: block;
  width: 100%;
}

.md-typeset__table table:not([class]) {
  display: table;
}

.rx-home {
  padding-top: 0;
}

/* Agente: código a ancho completo bajo el texto */

@media screen and (min-width: 60em) {
  .rx-split--stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .rx-split--stack .rx-split__copy p,
  .rx-split--stack .rx-split__copy li {
    max-width: 62rem;
  }
}

.rx-split--stack {
  gap: var(--rx-s2);
}

.rx-split--stack .rx-split__copy > :last-child {
  margin-bottom: 0;
}

.rx-split--stack .rx-split__code .tabbed-set {
  margin-top: 0;
}

/* Código ancho: se desplaza dentro de su caja en vez de recortarse. */

.rx-home .highlight,
.rx-home .highlight pre,
.rx-home pre {
  overflow-x: auto;
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* 8. Ilustración "Cómo funciona": capas HTML/CSS sobre la placa       */
/* ------------------------------------------------------------------ */

/*
 * Cada capa es una caja en porcentaje de la placa (1672 x 941), así que todo
 * escala con la figura. Sin animar, la escena es la imagen fija de reposo: es
 * lo que ve quien pide menos movimiento. Las animaciones están en la sección 7.
 * El dibujo es sobre blanco y lo sigue siendo en modo oscuro.
 */

.md-typeset .rx-art {
  position: relative;
  width: 100%;
  max-width: var(--rx-art-max);
  margin: var(--rx-s8) auto;
}

.rx-art__stage {
  position: relative;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: var(--rx-art-bg);
  border-radius: var(--rx-r-m);
  box-shadow: 0 0 0 1px var(--rx-line);
  contain: layout paint;
  isolation: isolate;
}

.rx-art__plate {
  display: block;
  width: 100%;
  height: 100%;
}

.rx-art__l {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.rx-art__l > img,
.rx-art__cube-bob > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rx-art__cube-bob {
  position: absolute;
  inset: 0;
}
.rx-art__gear--1 {
  left: 32.8349%; top: 31.9872%; width: 3.4689%; height: 6.1637%;
  transform-origin: 50% 50%;
}
.rx-art__gear--2 {
  left: 47.3684%; top: 33.5813%; width: 3.4689%; height: 6.1637%;
  transform-origin: 50% 50%;
}
.rx-art__gear--3 {
  left: 62.4402%; top: 35.2816%; width: 3.4689%; height: 6.1637%;
  transform-origin: 50% 50%;
}
.rx-art__male {
  left: 4.9043%; top: 62.1679%; width: 15.1914%; height: 24.3358%;
  transform-origin: 39.370% 100%;
}
.rx-art__female {
  left: 79.7249%; top: 36.6631%; width: 10.3469%; height: 21.0414%;
  transform-origin: 43.931% 100%;
}
.rx-art__rail {
  left: 78.3493%; top: 52.8162%; width: 9.8684%; height: 10.2019%;
}
.rx-art__cube {
  left: 87.2010%; top: 29.4368%; width: 11.2440%; height: 12.0085%;
}
.rx-art__belt {
  left: 78.6842%; top: 66.4655%; width: 3.8756%; height: 6.5802%;
}
.rx-art__arrow {
  left: 78.3493%; top: 62.0616%; width: 2.8708%; height: 4.8884%;
}
.rx-art__signal {
  left: 6.3397%; top: 45.2710%; width: 0.5981%; height: 1.0627%;
}
.rx-art__glow--0 {
  left: 29.3660%; top: 57.2795%; width: 6.1005%; height: 10.8395%;
}
.rx-art__glow--1 {
  left: 45.9330%; top: 60.7864%; width: 6.1005%; height: 10.8395%;
}
.rx-art__glow--2 {
  left: 63.2177%; top: 64.2933%; width: 6.1005%; height: 10.8395%;
}

.rx-art__glow {
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--rx-art-glow-core) 0 3.9%, var(--rx-art-glow-mid) 55%, var(--rx-art-glow-edge) 100%);
  opacity: 0.36;
}

.rx-art__dot {
  width: 0.2632%;
  height: 0.4676%;
  border-radius: 50%;
  background: var(--rx-art-dot);
  opacity: 0.6;
}

.rx-art__signal {
  border-radius: 50%;
  background: var(--rx-art-signal);
}

.rx-art__male > .rx-art__tail {
  transform-origin: 25% 72.2%;
}

.rx-art__female > .rx-art__tail {
  transform-origin: 25.4% 66%;
}

.rx-art__cube-bob {
  transform-origin: 50% 51.327%;
}

.rx-art__wing--l {
  --dir: 1;
  transform-origin: 37.438% 55.738%;
}

.rx-art__wing--r {
  --dir: -1;
  transform-origin: 78.818% 45.082%;
}

.rx-art__gear--2 {
  rotate: 0deg;
}
.rx-art__dot--0 {
  left: 30.8493%;
  top: 55.3454%;
}
.rx-art__dot--1 {
  left: 31.3876%;
  top: 55.3454%;
}
.rx-art__dot--2 {
  left: 31.9258%;
  top: 55.3454%;
}
.rx-art__dot--3 {
  left: 47.1172%;
  top: 58.2147%;
}
.rx-art__dot--4 {
  left: 47.6555%;
  top: 58.2147%;
}
.rx-art__dot--5 {
  left: 48.1938%;
  top: 58.2147%;
}
.rx-art__dot--6 {
  left: 63.8038%;
  top: 61.4028%;
}
.rx-art__dot--7 {
  left: 64.3421%;
  top: 61.4028%;
}
.rx-art__dot--8 {
  left: 64.8804%;
  top: 61.4028%;
}

/* Reposo de los paquetes: la cinta en u = 1/6, 1/2 y 5/6; la flecha en u = 1/2. */

.rx-art__belt {
  --u: calc((1 + 2 * var(--i)) / 6);
  translate: calc(var(--u) * 381.17%) calc(var(--u) * 109.82%);
}

.rx-art__arrow {
  translate: 283.3% -104.9%;
}

.rx-art__arrow--1 {
  opacity: 0;
}

.rx-art:is([data-offscreen], [data-hidden], [data-user-paused]) .rx-art__stage * {
  animation-play-state: paused;
}

.md-typeset .rx-art figcaption {
  max-width: none;
  margin: var(--rx-s4) 0 0;
  color: var(--rx-ink-2);
  font-size: var(--rx-fs-caption);
  font-style: normal;
  text-align: left;
}

.rx-art figcaption ol {
  display: grid;
  gap: var(--rx-s3) var(--rx-s6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rx-art;
}

.rx-art figcaption li {
  position: relative;
  margin: 0;
  padding-left: var(--rx-s8);
  counter-increment: rx-art;
}

.rx-art figcaption li::before {
  content: counter(rx-art);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--rx-art-badge);
  height: var(--rx-art-badge);
  border-radius: 50%;
  background: var(--rx-volt);
  color: var(--rx-on-volt);
  font-size: var(--rx-fs-small);
  font-weight: 800;
}

@media screen and (min-width: 60em) {
  .rx-art figcaption ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rx-art__toggle {
  position: absolute;
  top: var(--rx-s2);
  right: var(--rx-s2);
  display: grid;
  place-items: center;
  width: var(--rx-art-toggle);
  height: var(--rx-art-toggle);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--rx-art-toggle-ink);
  background: var(--rx-art-toggle-bg);
  box-shadow: 0 0 0 1px rgb(18 21 42 / 0.16);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--rx-dur-fast);
}

.rx-art__toggle:is(:hover, :focus-visible) {
  opacity: 1;
}

.rx-art__toggle[hidden] {
  display: none;
}

.rx-art__icon {
  width: var(--rx-s3);
  height: var(--rx-s3);
  background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%);
}

.rx-art__toggle[aria-pressed="true"] .rx-art__icon {
  background: currentColor;
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

/* Etiqueta de sección y fila de llamadas a la acción */

.rx-eyebrow {
  display: inline-block;
  margin: 0 0 var(--rx-s2);
  padding: var(--rx-s1) var(--rx-s3);
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-pill);
  background-color: var(--rx-surface);
  color: var(--rx-volt-ink);
  font-size: var(--rx-fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.md-typeset ul.rx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rx-s2);
  margin: var(--rx-s4) 0 0;
  padding: 0;
  list-style: none;
}

.md-typeset ul.rx-chips li {
  width: fit-content;
  margin: 0;
  list-style: none;
  padding: var(--rx-s1) var(--rx-s3);
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-r-pill);
  background-color: var(--rx-surface);
  color: var(--rx-ink);
  font-size: var(--rx-fs-caption);
  line-height: 1.4;
}

.rx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rx-s3) var(--rx-s4);
  margin-block: var(--rx-s6) 0;
}

.rx-actions p {
  display: contents;
}

.md-typeset .rx-actions .md-button {
  margin: 0;
}

.md-typeset .md-button .twemoji {
  margin-inline-end: var(--rx-s2);
}

@media screen and (max-width: 59.99em) {
  .md-typeset .rx-actions--steps .md-button--primary {
    background-color: transparent;
    border-color: var(--rx-line);
    color: var(--rx-ink);
  }

  .rx-actions--steps {
    margin-block-end: var(--rx-s8);
  }
}

.rx-art + .rx-actions,
.rx-section > .rx-actions {
  justify-content: center;
}

.rx-cta__note {
  margin: var(--rx-s4) 0 0;
  color: var(--rx-ink-2);
  font-size: var(--rx-fs-small);
}

.md-typeset .rx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}