/* ============================================================
   Rust a fondo · Polyglot — hoja de estilo única
   Tema: EL METAL Y EL ÓXIDO. Oscuro por defecto.
   Todo el cromo via tokens. Los colores que codifican DATOS
   (familias, estados, sintaxis) son contrato fijo: idénticos
   en claro y oscuro.
   ============================================================ */

/* ---- Fuentes self-hosted (el dueño coloca los .woff2 en ./fonts/) ---- */
/* El sitio funciona sin ellas: hay fallback del sistema. */
@font-face {
  font-family: "Spectral";
  font-weight: 600; font-style: normal; font-display: swap;
  src: url("./fonts/Spectral-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-weight: 700; font-style: normal; font-display: swap;
  src: url("./fonts/Spectral-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-weight: 500; font-style: italic; font-display: swap;
  src: url("./fonts/Spectral-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("./fonts/SourceSans3-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 500; font-style: normal; font-display: swap;
  src: url("./fonts/SourceSans3-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 600; font-style: normal; font-display: swap;
  src: url("./fonts/SourceSans3-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-weight: 400; font-style: italic; font-display: swap;
  src: url("./fonts/SourceSans3-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("./fonts/SplineSansMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-weight: 600; font-style: normal; font-display: swap;
  src: url("./fonts/SplineSansMono-SemiBold.woff2") format("woff2");
}

/* ============================================================
   TOKENS — CLARO (lámina clara, tinta carbón, óxido de acento)
   ============================================================ */
:root {
  --color-primary: #B0521E;
  --color-primary-hover: #914216;
  --color-primary-muted: #F2DDCF;

  --color-bg-canvas: #F1EDE9;
  --color-bg-muted: #E5DED7;
  --color-bg-surface: #FAF8F5;
  --color-bg-lit: #FEFCFA;
  --color-bg-code: #F2EDE8;

  --color-fg-default: #2A211B;
  --color-fg-subtle: #64564B;
  --color-fg-faint: #928578;

  --color-border-default: #D8CCC1;
  --color-border-strong: #C2B2A4;
  --color-border-soft: #E3DAD1;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(74,48,30,.07);
  --shadow-md: 0 4px 16px rgba(74,48,30,.12);
  --shadow-lg: 0 16px 40px rgba(74,48,30,.20);

  /* textura: grabado metálico crosshatch, muy tenue */
  --grid-line: rgba(176,82,30,0.04);

  /* ---- CONTRATO FIJO DE DATOS (igual en claro y oscuro) ---- */
  /* familias de bloque */
  --fam-1: #2E8C84;  /* propiedad — petróleo */
  --fam-2: #4C6FB5;  /* compilación — azul pizarra */
  --fam-3: #9C5BA6;  /* memoria — ciruela */
  --fam-4: #5B9E52;  /* concurrencia — oliva */
  --fam-5: #C2912F;  /* profundizaciones — dorado */
  --fam-1-bg: rgba(46,140,132,.13);
  --fam-2-bg: rgba(76,111,181,.13);
  --fam-3-bg: rgba(156,91,166,.13);
  --fam-4-bg: rgba(91,158,82,.13);
  --fam-5-bg: rgba(194,145,47,.14);

  /* estados de visualización */
  --data-pos: #3E9B6B;   --data-pos-bg: rgba(62,155,107,.15);
  --data-neg: #D2564E;   --data-neg-bg: rgba(210,86,78,.15);
  --data-warn: #C2912F;  --data-warn-bg: rgba(194,145,47,.16);
  --data-info: #4C6FB5;  --data-info-bg: rgba(76,111,181,.14);

  /* sintaxis de código — los bloques de código quedan oscuros en ambos temas */
  --code-bg: #1B1410;
  --code-fg: #E9DFC9;
  --code-kw: #E0975C;
  --code-str: #7FB98A;
  --code-cm: #8A8069;
  --code-fn: #8FA6D6;
  --code-num: #D9A15A;
  --code-type: #C7A3D6;
  --code-err: #E0857D;
}

/* ============================================================
   TOKENS — OSCURO (DEFAULT · taller metalúrgico de noche)
   Solo cambian VALORES de cromo. Los datos NO se tocan.
   ============================================================ */
html.dark {
  --color-primary: #D97742;
  --color-primary-hover: #E28F61;
  --color-primary-muted: #3E2417;

  --color-bg-canvas: #1D1310;
  --color-bg-muted: #150D0A;
  --color-bg-surface: #281B15;
  --color-bg-lit: #30211A;
  --color-bg-code: #221713;

  --color-fg-default: #F2EAE4;
  --color-fg-subtle: #C0AC9F;
  --color-fg-faint: #8C7A6E;

  --color-border-default: #463023;
  --color-border-strong: #57402F;
  --color-border-soft: #392719;

  --shadow-sm: inset 0 0 0 1px rgba(217,119,66,.04), 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: inset 0 0 0 1px rgba(217,119,66,.05), 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: inset 0 0 0 1px rgba(217,119,66,.06), 0 20px 48px rgba(0,0,0,.6);

  --grid-line: rgba(217,119,66,0.04);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-fg-default);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* textura de grabado metálico — fija, decorativa, jamás codifica datos */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 9px);
}
img { max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
em { font-family: var(--font-display); font-style: italic; font-weight: 500; }
code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--color-bg-muted);
  padding: .08em .32em;
  border-radius: 4px;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }

.page { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 32px 96px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.mono { font-family: var(--font-mono); }
.rule-double {
  border: 0;
  height: 4px;
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  background: transparent;
}

/* ============================================================
   BARRA SUPERIOR (en todas las vistas)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px;
  background: color-mix(in srgb, var(--color-bg-canvas) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-default);
}
.topbar__back {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg-subtle);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .14s;
}
.topbar__back:hover { color: var(--color-primary); }

/* toggle de tema (3 botones) */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  padding: 2px;
  background: var(--color-bg-surface);
}
.theme-toggle button {
  width: 30px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--color-fg-faint);
  border-radius: var(--radius-full);
  transition: background .14s, color .14s;
}
.theme-toggle button:hover { color: var(--color-fg-default); }
.theme-toggle button[aria-pressed="true"] {
  background: var(--color-fg-default);
  color: var(--color-bg-canvas);
}
.theme-toggle svg { width: 16px; height: 16px; }

/* ============================================================
   HERO de la casa (índice)
   ============================================================ */
.hero { padding-top: 40px; }
.hero__brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.hero__brand { display: inline-flex; align-items: center; gap: 12px; }
.hero__brand svg { width: 26px; height: 26px; color: var(--color-primary); flex: none; }
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.hero__meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
  line-height: 1.7;
}
.hero__meta strong { color: var(--color-primary); font-weight: 600; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 50px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 24px 0 0;
}
.hero__lede {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-fg-subtle);
  max-width: 66ch;
  margin: 14px 0 0;
  text-wrap: pretty;
}

/* tarjetas de "por qué Rust" */
.why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.why__card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 15px 17px;
  box-shadow: var(--shadow-sm);
}
.why__card .eyebrow { font-size: 10px; letter-spacing: .14em; }
.why__card p { font-size: 13.5px; line-height: 1.5; margin: 7px 0 0; color: var(--color-fg-default); }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.block-head {
  margin-top: 34px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.block-head__n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.block-head__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--card-accent, var(--color-primary));
  border-radius: var(--radius-lg);
  padding: 16px 18px 15px;
  box-shadow: var(--shadow-sm);
  transition: border-color .14s, box-shadow .14s, transform .14s, background .14s;
}
.card:hover {
  border-color: var(--color-border-strong);
  border-left-color: var(--card-accent, var(--color-primary));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.card__folio {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--card-accent, var(--color-primary));
}
.card__diff {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--color-fg-faint);
}
.card__star { color: var(--data-warn); }
.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 10px 0 0;
}
.card__tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-fg-subtle);
  margin: 8px 0 0;
  text-wrap: pretty;
}
.card__avoid {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  border-top: 1px dotted var(--color-border-default);
  margin-top: 13px;
}
.card__avoid-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--data-neg);
  flex: none;
  padding-top: 2px;
}
.card__avoid-text {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-fg-subtle);
}

/* fila cross-serie */
.crossrow {
  margin-top: 40px;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
}
.crossrow__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.crossrow__cell {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 13px;
}
.crossrow__cell.is-rust { border-color: var(--color-primary); border-left: 3px solid var(--color-primary); }
.crossrow__cell .k { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-subtle); }
.crossrow__cell.is-rust .k { color: var(--color-primary); }
.crossrow__cell .v { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-top: 3px; }

.colophon {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-fg-faint);
  letter-spacing: .04em;
}
.colophon strong { color: var(--color-primary); font-weight: 600; }

/* ============================================================
   FICHA INTERIOR (vista tema)
   ============================================================ */
.tema__crumbs {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}
.tema__head { margin-top: 20px; }
.tema__headrow { display: flex; align-items: baseline; gap: 16px; }
.tema__folio {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 600;
  color: var(--color-fg-faint);
  letter-spacing: -.03em;
  line-height: 1;
}
.tema__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tema__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -.02em;
  margin: 3px 0 0;
  line-height: 1.05;
}
.tema__lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -.01em;
  margin: 16px 0 0;
  max-width: 70ch;
  color: var(--color-fg-default);
  text-wrap: pretty;
}
.section { margin-top: 34px; }
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.015em;
  margin: 8px 0 0;
}
.prose {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-fg-default);
  max-width: 74ch;
  margin: 16px 0 0;
  text-wrap: pretty;
}
.prose.subtle { color: var(--color-fg-subtle); }

/* en breve — 4 datos */
.enbreve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.enbreve__item {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.enbreve__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}
.enbreve__v {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-fg-default);
  margin-top: 5px;
}
.enbreve__v strong { color: var(--color-primary); font-weight: 600; }

/* callout "la fuerza" */
.fuerza {
  display: flex;
  gap: 14px;
  background: var(--color-primary-muted);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-top: 14px;
}
.fuerza__body { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--color-fg-default); }
.fuerza__body .eyebrow { display: block; color: var(--color-primary); margin-bottom: 5px; }

/* bloques de código — oscuros en ambos temas */
.codegrid { display: grid; gap: 16px; margin-top: 14px; }
.codegrid.two { grid-template-columns: 1fr 1fr; }
.codeblock {
  background: var(--code-bg);
  border: 1px solid #3A2A20;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.codeblock__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--code-cm);
  padding: 9px 14px;
  border-bottom: 1px solid #3A2A20;
}
.codeblock pre {
  margin: 0;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--code-fg);
  overflow-x: auto;
}
.kw { color: var(--code-kw); }
.st { color: var(--code-str); }
.cm { color: var(--code-cm); font-style: italic; }
.fn { color: var(--code-fn); }
.nm { color: var(--code-num); }
.ty { color: var(--code-type); }

/* consola de error rustc — oscura fija */
.rustc {
  margin-top: 14px;
  background: var(--code-bg);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow-x: auto;
}
.rustc pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--code-fg);
  white-space: pre;
}
.rustc .e { color: var(--code-err); font-weight: 600; }
.rustc .g { color: var(--code-cm); }
.rustc .r { color: var(--code-err); }
.rustc .b { color: var(--code-fn); }
.rustc .s { color: var(--code-str); }
.rustc__note { font-family: var(--font-sans); font-size: 12px; color: #B3A991; margin-top: 8px; line-height: 1.5; }

/* veredicto OK */
.verdict-ok {
  margin-top: 14px;
  background: var(--data-pos-bg);
  border: 1px solid var(--data-pos);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--data-pos);
}
.verdict-ok span { color: var(--color-fg-default); }
.verdict-note {
  margin-top: 14px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-fg-default);
}

/* mito / realidad */
.mito {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.mito__card { border-radius: var(--radius-lg); padding: 16px 18px; }
.mito__card.myth { background: var(--data-neg-bg); border: 1px solid var(--data-neg); }
.mito__card.real { background: var(--data-pos-bg); border: 1px solid var(--data-pos); }
.mito__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mito__card.myth .mito__tag { color: var(--data-neg); }
.mito__card.real .mito__tag { color: var(--data-pos); }
.mito__card.myth p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  margin: 6px 0 0;
  color: var(--color-fg-default);
}
.mito__card.real p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0 0;
  color: var(--color-fg-default);
}

/* recursos */
.recursos { margin-top: 12px; }
.recursos hr { border: 0; border-top: 1px solid var(--color-border-default); margin: 0 0 4px; }
.recurso {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--color-border-default);
}
.recurso:last-child { border-bottom: 0; }
.recurso__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-fg-faint);
  flex: none;
  width: 118px;
}
.recurso__link {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--color-primary);
}
.recurso__link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* nav prev/next */
.tema__nav {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tema__nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .14s, color .14s;
}
.tema__nav a:hover { color: var(--color-primary-hover); }

/* ============================================================
   WIDGET SHELL (el "well" y sus controles)
   ============================================================ */
.well {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-top: 18px;
}
.well__pad { padding: 20px; }
.wctl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-surface);
  color: var(--color-fg-default);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  transition: background .14s, border-color .14s, transform .1s;
}
.wctl:hover { border-color: var(--color-primary); background: var(--color-bg-lit); }
.wctl:active { transform: translateY(1px); }
.wctl.primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wctl.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.wctl.ghost { background: transparent; border-color: var(--color-border-default); color: var(--color-fg-subtle); }
.wctl:disabled { opacity: .4; cursor: not-allowed; }
.wctl svg { width: 16px; height: 16px; }

.wsteplabel {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg-subtle);
  min-width: 120px;
  text-align: center;
}
.whint { font-family: var(--font-sans); font-size: 12.5px; color: var(--color-fg-subtle); }

/* segmented control */
.segmented {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 2px;
  background: var(--color-bg-surface);
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--color-fg-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .14s, color .14s;
}
input[type="range"] { accent-color: var(--color-primary); height: 22px; cursor: pointer; }
.segmented button[aria-pressed="true"] {
  background: var(--color-fg-default);
  color: var(--color-bg-canvas);
}

.wrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wrow.between { justify-content: space-between; }
.wrow.mt { margin-top: 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .page, .topbar, .hero { padding-left: 18px; padding-right: 18px; }
  .codegrid.two { grid-template-columns: 1fr; }
  .mito { grid-template-columns: 1fr; }
  .tema__folio { font-size: 34px; }
  .recurso { flex-direction: column; gap: 3px; }
  .recurso__kind { width: auto; }
  .hero__meta { text-align: left; }
}

/* ============================================================
   MOVIMIENTO REDUCIDO — mostrar estado final sin animar
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}