/* El Método: Asfalto y bermellón, elección del usuario. */
:root {
  --bg: #111112;
  --panel: #202022;
  --reading: #19191c;
  --text: #f1efed;
  --muted: #beb9b5;
  --line: #474446;
  --soft: #29292c;
  --accent: #ff7659;
  --accent-hover: #ff957e;
}
body:has(.reading) { background: var(--reading); }
.site-header { background: var(--bg); }
.review-bar, .step-panel { background: var(--panel); }
.eyebrow, .unit-number, .hero-map span { color: var(--accent); }
.lead, .reading-test p { color: var(--text); }
.hero-map { background: var(--panel); box-shadow: 0 18px 35px -23px #050506; }
.hero-map > a:hover { color: var(--text); background: var(--soft); }
.site-header nav a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
button:hover, a.button:hover { background: var(--soft); }
.button.primary, .steps button[aria-pressed=true] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.button.primary:hover, .steps button[aria-pressed=true]:hover {
  background: var(--accent-hover);
  color: var(--bg);
  border-color: var(--accent-hover);
}
a:focus-visible, button:focus-visible, summary:focus-visible,
select:focus-visible, [tabindex]:focus-visible { outline-color: var(--accent); }
.skip { background: var(--accent); color: var(--bg); }
.pending { border-left-color: var(--line); }
.example { border-left-color: var(--accent); }
.lesson-row, .reading > section { border-color: var(--line); }
.lesson-row:hover, .next-links a:hover, .breadcrumbs a:hover { color: var(--accent); }
.reader-index a[aria-current] {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--accent);
}
.integration-links a, .answer summary, .reading a:not(.button):not(.next-links a) {
  color: var(--accent);
}