/* ═════════════════════════════════════════════════════════════════════════════
   TREINAR — PRESCRIÇÃO DE ESTUDO

   A primeira dobra responde duas perguntas na mesma varredura: o que fazer
   agora e o que precisa voltar à memória. A margem graduada é a assinatura da
   folha: lembra que cada escolha nasce da rubrica real, não de uma recomendação
   genérica de conteúdo.
   ═══════════════════════════════════════════════════════════════════════════ */
.th-body {
  --th-paper: #f6f8fc;
  --th-surface: var(--app-surface);
  --th-ink: #17213a;
  --th-navy: #1d2a49;
  --th-muted: var(--app-muted-reading);
  --th-faint: #8b95aa;
  --th-line: var(--app-border-reading);
  --th-line-strong: #c8d1e1;
  --th-cobalt: #5268ca;
  --th-cobalt-deep: #3e50a7;
  --th-cobalt-soft: var(--app-accent-reading-soft);
  --th-lime: #9bce4b;
  --th-lime-soft: #f1f8e6;
  --th-lime-ink: #496b1e;
  --th-coral: #d36a50;
  --th-coral-soft: #fcf0ec;
  overflow-x: hidden;
}

.th-page {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: minmax(0, 1.58fr) minmax(320px, .82fr);
  column-gap: 24px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-bottom: 48px;
  color: var(--th-ink);
  font-family: var(--esp-ui, Inter, sans-serif);
}
.th-page *, .th-page *::before, .th-page *::after { box-sizing: border-box; }
.th-page a { color: inherit; }
.th-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Estrutura da primeira leitura ───────────────────────────────────────── */
.th-page > .th-page-head,
.th-page > .th-cycle-note,
.th-page > .th-data-note,
.th-page > .th-trilha,
.th-page > .ep-section:not(.th-review) { grid-column: 1 / -1; }
.th-page > .th-hero-layout { grid-column: 1; }
.th-page > .th-review { grid-column: 2; margin-top: 0; }
.th-page:not(:has(.th-review)) > .th-hero-layout { grid-column: 1 / -1; }

.th-page-head {
  align-items: flex-end;
  margin-bottom: 24px;
  padding: 4px 0 22px;
  border-bottom: 1px solid var(--th-line-strong);
}
.th-page-head > div { min-width: 0; }
.th-page-head h1 {
  max-width: 18ch;
  color: var(--th-ink);
  font: var(--esp-weight-bold) clamp(2.25rem, 4.5vw, 3.45rem)/1 var(--esp-display, Manrope, sans-serif);
  letter-spacing: -.06em;
}
.th-page-head p { max-width: 67ch; color: var(--th-muted); line-height: 1.55; }
.th-page-head .ep-date-chip {
  flex: 0 0 auto;
  min-height: 44px;
  border-color: var(--th-line-strong);
  border-radius: 8px;
  background: var(--th-surface);
  color: var(--th-navy);
  font-variant-numeric: tabular-nums;
}
.th-date-chip--after { border-color: #edcfc5 !important; background: var(--th-coral-soft) !important; color: #8e4837 !important; }

.th-cycle-note, .th-data-note {
  display: grid;
  align-items: center;
  margin: -10px 0 18px;
  border: 1px solid var(--th-line);
  border-left: 3px solid var(--th-coral);
  border-radius: 8px;
  background: var(--th-surface);
  color: var(--th-muted);
}
.th-cycle-note { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; font-size: var(--esp-type-support); }
.th-cycle-note b { color: #854535; }
.th-data-note { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 13px; padding: 12px 14px; }
.th-data-note-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: var(--th-coral-soft);
  color: var(--th-coral);
}
.th-data-note-icon svg { width: 19px; height: 19px; }
.th-data-note b { display: block; color: var(--th-ink); font-size: var(--esp-type-support); }
.th-data-note p { margin: 3px 0 0; font-size: var(--esp-type-caption); line-height: 1.45; }
.th-data-note button {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--th-line-strong);
  border-radius: 8px;
  background: var(--th-surface);
  color: var(--th-cobalt-deep);
  font: var(--esp-weight-bold) var(--esp-type-caption)/1 var(--esp-ui, Inter, sans-serif);
  cursor: pointer;
}
.th-data-note button:disabled { cursor: wait; opacity: .62; }

/* ── Prescrição: uma folha com margem de rubrica ─────────────────────────── */
.th-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr);
  gap: 14px;
  min-width: 0;
  align-items: stretch;
}
.th-page:has(.th-review) .th-hero-layout { grid-template-columns: 1fr; }

.th-recommend {
  position: relative;
  min-width: 0;
  min-height: 270px;
  padding: 30px 30px 28px 54px;
  overflow: hidden;
  border: 1px solid var(--th-line-strong);
  border-radius: var(--app-radius-mobile-panel);
  background: var(--th-surface);
  box-shadow: 0 26px 55px -48px rgba(23, 33, 58, .7);
  color: var(--th-ink);
}
.th-recommend::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 18px;
  width: 16px;
  border-left: 3px solid var(--th-cobalt);
  background: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(82, 104, 202, .5) 13px 14px);
}
.th-recommend::after { display: none; }
.th-recommend .ep-focus-grid { grid-template-columns: minmax(0, 1fr) 126px; gap: 27px; align-items: center; }
.th-recommend .ep-focus-kicker {
  color: var(--th-cobalt-deep);
  font-size: var(--esp-type-caption);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.th-recommend .ep-focus h2, .th-recommend h2 {
  max-width: 25ch;
  margin: 9px 0 8px;
  color: var(--th-ink);
  font: var(--esp-weight-bold) clamp(1.55rem, 2.55vw, 2.05rem)/1.08 var(--esp-display, Manrope, sans-serif);
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.th-recommend .ep-focus-meta { max-width: 62ch; color: var(--th-muted); }
.th-recommend .ep-focus-reason {
  display: flex;
  max-width: 66ch;
  margin: 14px 0 0;
  color: #3e4860;
  font-size: var(--esp-type-support);
  line-height: 1.48;
}
.th-recommend .ep-focus-reason::before { flex: 0 0 auto; margin-top: .48em; background: var(--th-lime-ink); }
.th-recommend .ep-primary {
  min-height: 48px;
  border-radius: 9px;
  background: var(--th-cobalt);
  color: #fff !important;
  box-shadow: none;
}
.th-recommend .ep-primary:hover { transform: translateY(-1px); filter: brightness(.97); }
.th-recommend[aria-busy="true"] .th-target { opacity: .58; }

.th-target {
  position: relative;
  display: flex;
  width: 126px;
  min-height: 142px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: auto;
  padding-left: 22px;
  border: 0;
  border-left: 1px solid var(--th-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--th-cobalt);
}
.th-target::before {
  content: "alvo da rubrica";
  max-width: 9ch;
  color: var(--th-muted);
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.th-target svg { width: 44px; height: 44px; }

/* Formatos são uma única régua de escolha, não três produtos concorrentes. */
.th-modes {
  display: grid;
  grid-template-columns: 1fr;
  align-content: stretch;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--th-line);
  border-radius: var(--app-radius-inset);
  background: var(--th-surface);
}
.th-page:has(.th-review) .th-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-mode {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 86px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transition: background .16s ease;
}
.th-mode + .th-mode { border-top: 1px solid var(--th-line); }
.th-page:has(.th-review) .th-mode + .th-mode { border-top: 0; border-left: 1px solid var(--th-line); }
.th-mode:hover { transform: none; border-color: var(--th-line); background: var(--th-cobalt-soft); box-shadow: none; }
.th-mode > .ep-icon {
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--th-cobalt-soft);
  color: var(--th-cobalt-deep);
}
.th-mode-copy { min-width: 0; }
.th-mode-copy b { display: block; color: var(--th-ink); font-size: var(--esp-type-support); }
.th-mode-copy > span { display: block; margin-top: 4px; color: var(--th-muted); font-size: var(--esp-type-caption); line-height: 1.32; }
.th-mode-copy > .th-mode-pill {
  display: inline-flex;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--th-faint);
  font-size: var(--esp-type-caption);
  line-height: 1;
}
.th-mode > i { color: var(--th-cobalt); font-size: var(--esp-type-support); font-style: normal; }

/* ── Agenda de revisão: comparabilidade à primeira dobra ─────────────────── */
.th-review {
  min-width: 0;
  padding: 21px 20px 8px;
  border: 1px solid var(--th-line-strong);
  border-top: 4px solid var(--th-cobalt);
  border-radius: var(--app-radius-inset);
  background: var(--th-surface);
}
.th-review .ep-section-head {
  align-items: flex-start;
  margin-bottom: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--th-line);
}
.th-review .ep-section-head > div { min-width: 0; }
.th-review .ep-section-head h2 {
  color: var(--th-ink);
  font: var(--esp-weight-bold) var(--esp-type-body)/1.2 var(--esp-display, Manrope, sans-serif);
  letter-spacing: -.025em;
}
.th-review .ep-section-head span {
  display: block;
  margin-top: 5px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  line-height: 1.35;
}
.th-review .ep-section-head a {
  flex: 0 0 auto;
  min-height: 44px;
  margin: -11px -5px -8px 0;
  padding: 0 5px;
  align-items: center;
  color: var(--th-cobalt-deep);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  white-space: nowrap;
}
.th-review-list { margin: 0; padding: 0; list-style: none; }
.th-review-item + .th-review-item { border-top: 1px solid var(--th-line); }
.th-review-item > a {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 52px 14px;
  gap: 10px;
  align-items: center;
  min-height: 78px;
  margin: 0 -6px;
  padding: 11px 6px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.th-review-item > a:hover { background: var(--th-cobalt-soft); }

.th-review-corpo { min-width: 0; }
.th-review-corpo b { display: block; color: var(--th-ink); font-size: var(--esp-type-support); line-height: 1.3; }
.th-review-corpo small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-review-pct { text-align: right; font-variant-numeric: tabular-nums; }
.th-review-pct b { display: block; color: var(--th-ink); font-size: var(--esp-type-support); }
.th-review-seta { color: var(--th-cobalt); font-weight: var(--esp-weight-bold); }

/* ── Evidência longitudinal: trilha e última leitura ─────────────────────── */
.th-trilha { margin-top: 38px; padding-top: 27px; border-top: 1px solid var(--th-line-strong); }
.th-trilha .ep-section-head { margin-bottom: 0; }
.th-trilha .ep-section-head h2 { color: var(--th-ink); }
.th-trilha .ep-section-head span {
  display: block;
  margin-top: 5px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
}
.th-trilha-porque { max-width: 74ch; margin: 13px 0 0; color: var(--th-muted); font-size: var(--esp-type-support); line-height: 1.55; }
.th-trilha-lista { margin: 17px 0 0; padding: 0; border-top: 1px solid var(--th-line); list-style: none; }
.th-trilha-item + .th-trilha-item { border-top: 1px solid var(--th-line); }
.th-trilha-item > a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 84px;
  gap: 16px;
  align-items: center;
  min-height: 74px;
  padding: 12px 4px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.th-trilha-item > a:hover { background: var(--th-cobalt-soft); }
.th-trilha-n {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--th-line-strong);
  border-radius: 6px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  font-variant-numeric: tabular-nums;
}
.th-trilha-corpo { min-width: 0; }
.th-trilha-corpo b { display: block; color: var(--th-ink); font-size: var(--esp-type-support); line-height: 1.35; }
.th-trilha-corpo small { display: block; margin-top: 3px; color: var(--th-muted); font-size: var(--esp-type-caption); }
.th-trilha-peso {
  color: var(--th-ink);
  font-size: var(--esp-type-support);
  font-weight: var(--esp-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.th-trilha-peso i { margin-left: 4px; color: var(--th-muted); font-size: var(--esp-type-caption); font-style: normal; font-weight: var(--esp-weight-regular); }
.th-trilha-estado { min-width: 76px; color: var(--th-muted); font-size: var(--esp-type-caption); font-weight: var(--esp-weight-bold); text-align: right; }
.th-trilha-item--agora .th-trilha-n { border-color: var(--th-cobalt); background: var(--th-cobalt); color: #fff; }
.th-trilha-item--agora .th-trilha-estado { color: var(--th-cobalt-deep); }
.th-trilha-item--feito > a { opacity: .64; }
.th-trilha-item--feito .th-trilha-n { border-color: #bedb91; background: var(--th-lime-soft); color: var(--th-lime-ink); }

.th-page > .ep-section:not(.th-review):not(.th-trilha) { margin-top: 38px; }
.th-page > .ep-section:not(.th-review) .ep-section-head {
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--th-line-strong);
}
.th-page > .ep-section:not(.th-review) .ep-section-head h2 { color: var(--th-ink); }
.th-page > .ep-section:not(.th-review) .ep-section-head a {
  color: var(--th-cobalt-deep);
  font-weight: var(--esp-weight-bold);
}
.th-page .ep-rows {
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--th-line);
  border-bottom: 1px solid var(--th-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.th-page .ep-row { min-height: 72px; padding-right: 4px; padding-left: 4px; }

/* ── Casos indicados: lista de comparação, não vitrine ───────────────────── */
.th-case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--th-line);
  border-bottom: 1px solid var(--th-line);
}
.th-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 106px;
  padding: 16px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transition: background .16s ease;
}
.th-case + .th-case { border-top: 1px solid var(--th-line); }
.th-case:hover { transform: none; border-color: var(--th-line); background: var(--th-cobalt-soft); box-shadow: none; }
.th-case-tag { color: var(--th-cobalt-deep); font-size: var(--esp-type-caption); font-weight: var(--esp-weight-bold); }
.th-case h3 { margin: 7px 0 5px; color: var(--th-ink); font: var(--esp-weight-bold) var(--esp-type-body)/1.25 var(--esp-display, Manrope, sans-serif); letter-spacing: -.025em; }
.th-case p { margin: 0; color: var(--th-muted); font-size: var(--esp-type-support); line-height: 1.45; }
.th-case-score {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--th-cobalt-deep);
  font-size: var(--esp-type-support);
  font-weight: var(--esp-weight-bold);
  white-space: nowrap;
}
.th-case-score i { display: inline-flex; font-size: var(--esp-type-body); font-style: normal; }

/* Seletores legados do catálogo permanecem estáveis, mesmo sem ocupar a dobra. */
.th-toolbar {
  position: sticky;
  top: 10px;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px;
  border: 1px solid var(--th-line-strong);
  border-radius: var(--app-radius-control);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
}
.th-search { position: relative; display: flex; min-width: 0; align-items: center; }
.th-search > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--th-muted); pointer-events: none; }
.th-search input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--th-line);
  border-radius: 8px;
  outline: none;
  background: var(--th-paper);
  color: var(--th-ink);
  font: var(--esp-weight-medium) var(--esp-type-support)/1 var(--esp-ui, Inter, sans-serif);
}
.th-search input::placeholder { color: var(--th-faint); opacity: 1; }
.th-search input:focus-visible { border-color: var(--th-cobalt); box-shadow: 0 0 0 3px rgba(82, 104, 202, .2); }
.th-filters, .th-criterion-chips { display: flex; gap: 6px; overflow-x: auto; padding: 1px; scrollbar-width: none; }
.th-filters::-webkit-scrollbar, .th-area-strip::-webkit-scrollbar, .th-criterion-chips::-webkit-scrollbar { display: none; }
.th-filter, .th-chip {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--th-line);
  border-radius: 8px;
  background: var(--th-surface);
  color: var(--th-muted);
  font: var(--esp-weight-bold) var(--esp-type-caption)/1 var(--esp-ui, Inter, sans-serif);
  white-space: nowrap;
  cursor: pointer;
}
.th-filter.active, .th-filter[aria-pressed="true"], .th-chip.active, .th-chip[aria-pressed="true"] {
  border-color: #b9c3ef;
  background: var(--th-cobalt-soft);
  color: var(--th-cobalt-deep);
}
.th-filter--clear { color: var(--th-muted); }
.th-filter:disabled { cursor: default; opacity: .45; }
.th-area-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; }
.th-area-card {
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--th-line);
  border-radius: 9px;
  background: var(--th-surface);
  color: var(--th-ink);
  text-align: left;
  cursor: pointer;
}
.th-area-card.active, .th-area-card[aria-pressed="true"] { border-color: var(--th-cobalt); background: var(--th-cobalt-soft); }
.th-area-card b { display: block; font-size: var(--esp-type-support); }
.th-area-card span { display: block; margin-top: 7px; color: var(--th-muted); font-size: var(--esp-type-caption); }

/* ── Vazio, falha e carregamento ─────────────────────────────────────────── */
.th-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 27px;
  border: 1px solid var(--th-line-strong);
  border-left: 3px solid var(--th-coral);
  border-radius: 9px;
  background: var(--th-surface);
  color: var(--th-muted);
}
.th-empty-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 8px; background: var(--th-coral-soft); color: var(--th-coral); }
.th-empty-icon svg { width: 22px; height: 22px; }
.th-empty h2, .th-empty h3 { margin: 1px 0 6px; color: var(--th-ink); font: var(--esp-weight-bold) var(--esp-type-body)/1.25 var(--esp-display, Manrope, sans-serif); letter-spacing: -.025em; }
.th-empty p { max-width: 62ch; margin: 0; font-size: var(--esp-type-support); line-height: 1.52; }
.th-empty button {
  min-height: 44px;
  margin-top: 13px;
  padding: 0 14px;
  border: 1px solid var(--th-line-strong);
  border-radius: 8px;
  background: var(--th-surface);
  color: var(--th-cobalt-deep);
  font: var(--esp-weight-bold) var(--esp-type-caption)/1 var(--esp-ui, Inter, sans-serif);
  cursor: pointer;
}
.th-empty-kicker { display: block; margin-bottom: 6px; color: var(--th-cobalt-deep); font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--esp-type-caption); font-weight: var(--esp-weight-bold); letter-spacing: .11em; }
.th-empty--catalog { box-shadow: none; }
.th-empty--catalog .ep-primary { width: fit-content; margin-top: 18px; }

.th-error {
  width: min(590px, 100%);
  margin: 10vh auto 0;
  padding: 32px;
  border: 1px solid var(--th-line-strong);
  border-top: 4px solid var(--th-coral);
  border-radius: var(--app-radius-control);
  background: var(--th-surface);
  box-shadow: none;
  text-align: left;
}
.th-error h2 { margin: 9px 0 0; color: var(--th-ink); font: var(--esp-weight-bold) var(--esp-type-heading)/1.08 var(--esp-display, Manrope, sans-serif); letter-spacing: -.045em; }
.th-error p { max-width: 49ch; margin: 12px 0 20px; color: var(--th-muted); line-height: 1.55; }
.th-error button, .th-error > a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 8px;
  font: var(--esp-weight-bold) var(--esp-type-support)/1 var(--esp-ui, Inter, sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.th-error button { border: 0; background: var(--th-navy); color: #fff; }
.th-error > a { margin-left: 7px; border: 1px solid var(--th-line-strong); background: var(--th-surface); color: var(--th-cobalt-deep); }

#casos { scroll-margin-top: 92px; }
#casos:focus { outline: none; }
#casos:focus-visible { outline: 3px solid rgba(82, 104, 202, .3); outline-offset: 7px; border-radius: 8px; }
.th-filter:focus-visible, .th-area-card:focus-visible, .th-chip:focus-visible, .th-mode:focus-visible,
.th-case:focus-visible, .th-error button:focus-visible, .th-error a:focus-visible, .th-data-note button:focus-visible,
.th-empty button:focus-visible, .th-recommend:focus-visible, .th-review-item > a:focus-visible,
.th-trilha-item > a:focus-visible {
  outline: 3px solid rgba(82, 104, 202, .34);
  outline-offset: 3px;
}

/* ── Responsividade ───────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .th-page { grid-template-columns: minmax(0, 1.42fr) minmax(300px, .78fr); gap: 20px; }
  .th-page:has(.th-review) .th-mode { grid-template-columns: 36px minmax(0, 1fr); min-height: 92px; }
  .th-page:has(.th-review) .th-mode > i { display: none; }
  .th-page:has(.th-review) .th-mode > .ep-icon { width: 36px; height: 36px; }
  .th-review-item > a { grid-template-columns: 72px minmax(0, 1fr) 46px; }
  .th-review-seta { display: none; }
}

@media (max-width: 900px) {
  .th-page { display: block; }
  .th-page > .th-review { margin-top: 18px; }
  .th-hero-layout { grid-template-columns: 1fr; }
  .th-modes, .th-page:has(.th-review) .th-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-mode + .th-mode, .th-page:has(.th-review) .th-mode + .th-mode { border-top: 0; border-left: 1px solid var(--th-line); }
  .th-review-item > a { grid-template-columns: 92px minmax(0, 1fr) 68px 16px; }
  .th-review-seta { display: block; }
}

@media (max-width: 760px) {
  .th-toolbar { position: static; grid-template-columns: 1fr; }
  .th-filters { margin: 0 -1px; }
  .th-modes, .th-page:has(.th-review) .th-modes { grid-template-columns: 1fr; }
  .th-mode + .th-mode, .th-page:has(.th-review) .th-mode + .th-mode { border-top: 1px solid var(--th-line); border-left: 0; }
  .th-mode { min-height: 76px; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .th-mode > i, .th-page:has(.th-review) .th-mode > i { display: block; }
  .th-review-item > a { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; padding-block: 13px; }

  .th-review-corpo small { white-space: normal; }
  .th-review-seta { display: none; }
  .th-trilha-item > a { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; }
  .th-trilha-estado { display: none; }
  .th-data-note { grid-template-columns: 40px minmax(0, 1fr); }
  .th-data-note button { grid-column: 2; justify-self: start; }
  #casos { scroll-margin-top: 74px; }
}

@media (max-width: 640px) {
  .th-page { padding-bottom: 24px; }
  .th-page-head { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 18px; padding-bottom: 18px; }
  .th-page-head h1 { max-width: 18ch; font-size: var(--esp-type-heading); }
  .th-page-head p { font-size: var(--esp-type-support); }
  .th-page-head .ep-date-chip { max-width: 100%; white-space: normal; }
  .th-cycle-note { grid-template-columns: 1fr; }
  .th-recommend { min-height: 0; padding: 23px 18px 21px 43px; }
  .th-recommend::before { left: 14px; }
  .th-recommend .ep-focus-grid { grid-template-columns: minmax(0, 1fr) 84px; gap: 14px; }
  .th-recommend h2 { max-width: 18ch; font-size: var(--esp-type-heading); }
  .th-target { width: 84px; min-height: 96px; padding-left: 12px; }
  .th-target svg { width: 34px; height: 34px; }
  .th-review { padding: 19px 16px 7px; }
  .th-page > .ep-section:not(.th-review), .th-trilha { margin-top: 30px; }
  .th-empty { padding: 22px; }
  .th-error { margin-top: 6vh; padding: 26px 19px; }
  .th-error button, .th-error > a { width: 100%; }
  .th-error > a { margin: 8px 0 0; }
}

@media (max-width: 480px) {
  .th-page .ep-section-head { align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; }
  .th-page .ep-section-head > span, .th-page .ep-section-head > a { max-width: 100%; text-align: left; white-space: normal; }
  .th-recommend .ep-focus-grid { grid-template-columns: 1fr; }
  .th-recommend .th-target { display: none; }
  .th-recommend h2 { max-width: none; }
  .th-recommend .ep-primary { width: 100%; }
  .th-data-note { grid-template-columns: 36px minmax(0, 1fr); padding: 12px; }
  .th-data-note-icon { width: 36px; height: 36px; }
  .th-review .ep-section-head a { margin: 0; }
  .th-case { grid-template-columns: 1fr; gap: 10px; padding: 15px 2px; }
  .th-case-score { justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--th-line); }
  .th-empty { grid-template-columns: 1fr; }
  .th-empty--catalog .ep-primary { width: 100%; }
}

@media (max-width: 340px) {
  .th-page-head h1, .th-recommend h2 { font-size: var(--esp-type-heading); }
  .th-recommend { padding: 21px 15px 19px 38px; }
  .th-recommend::before { left: 12px; width: 13px; }
  .th-mode { padding: 11px 10px; }
  .th-filter, .th-chip { padding-inline: 10px; }
  .th-review { padding-right: 13px; padding-left: 13px; }
  .th-trilha-item > a { grid-template-columns: 26px minmax(0, 1fr); }
  .th-trilha-peso { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .th-mode, .th-case, .th-recommend .ep-primary { transition: none; }
  .th-recommend .ep-primary:hover { transform: none; }
}

/* ═══ Prescrição com profundidade ═══════════════════════════════════════════
   A rubrica continua guiando a escolha, mas deixa de ser simulada como margem
   pautada. O alvo vira uma cápsula navy; luz índigo e superfícies independentes
   dão presença sem transformar a primeira dobra num bloco escuro. */
.th-body {
  --th-depth-line: rgba(101, 118, 190, .19);
  --th-depth-shadow: 0 28px 62px -46px rgba(31, 44, 95, .64), 0 3px 10px rgba(42, 56, 112, .035);
}
.th-body .app-main {
  background-image:
    radial-gradient(640px 420px at 77% -6%, rgba(95, 116, 219, .11), transparent 68%),
    radial-gradient(420px 300px at 30% 20%, rgba(177, 196, 240, .08), transparent 72%);
  background-attachment: local;
}
.th-page { position: relative; column-gap: 20px; }
.th-page-head {
  margin-bottom: 26px;
  padding: 5px 0 18px;
  border-bottom: 0;
}
.th-page-head h1 { letter-spacing: -.065em; }
.th-page-head .ep-date-chip {
  padding-inline: 16px;
  border-color: rgba(100, 116, 182, .18);
  border-radius: var(--app-radius-pill);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 34px -26px rgba(31, 44, 94, .55);
  backdrop-filter: blur(12px);
}
.th-cycle-note,
.th-data-note {
  border-color: rgba(112, 125, 172, .17);
  border-left-width: 1px;
  border-radius: 15px;
  box-shadow: 0 16px 34px -30px rgba(39, 50, 93, .45);
}

.th-hero-layout { gap: 12px; }
.th-recommend {
  min-height: 282px;
  padding: 34px;
  border: 1px solid var(--th-depth-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}
.th-recommend::before { display: none; content: none; }
.th-recommend .ep-focus-grid { grid-template-columns: minmax(0, 1fr) 126px; gap: 30px; }
.th-recommend .ep-focus-kicker { color: #5064c2; letter-spacing: .095em; }
.th-recommend .ep-focus h2,
.th-recommend h2 {
  max-width: 24ch;
  font: var(--esp-weight-bold) clamp(1.72rem, 2.65vw, 2.2rem)/1.08 var(--esp-display, Manrope, sans-serif);
}
.th-recommend .ep-primary {
  border-radius: var(--app-radius-inset);
  background: linear-gradient(135deg, #5068d7, #4055bb);
  box-shadow: 0 14px 26px -18px rgba(40, 58, 145, .88);
}
.th-target {
  width: 126px;
  min-height: 128px;
  gap: 13px;
  padding: 18px 13px;
  border: 0;
  border-radius: var(--app-radius-card);
  background:
    radial-gradient(110px 80px at 90% 0%, rgba(117, 139, 231, .32), transparent 72%),
    linear-gradient(145deg, #182543, #27375f);
  box-shadow: 0 20px 34px -26px rgba(19, 31, 69, .9);
  color: #baf160;
}
.th-target::before { color: #c7d0ec; letter-spacing: .055em; }
.th-target svg { color: #baf160; }

.th-modes,
.th-page:has(.th-review) .th-modes {
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.th-mode,
.th-page:has(.th-review) .th-mode {
  min-height: 88px;
  padding: 13px 14px;
  border: 1px solid rgba(103, 119, 183, .16);
  border-radius: var(--app-radius-panel);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 36px -32px rgba(32, 45, 92, .6);
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease, background .17s ease;
}
.th-mode + .th-mode,
.th-page:has(.th-review) .th-mode + .th-mode { border: 1px solid rgba(103, 119, 183, .16); }
.th-mode:hover {
  transform: translateY(-2px);
  border-color: rgba(82, 104, 202, .32);
  background: #fff;
  box-shadow: 0 22px 38px -30px rgba(38, 54, 126, .48);
}
.th-mode > .ep-icon { border-radius: var(--app-radius-inset); }
.th-mode-copy > .th-mode-pill {
  width: fit-content;
  padding: 4px 7px;
  border-radius: var(--app-radius-pill);
  background: var(--th-cobalt-soft);
  color: var(--th-cobalt-deep);
}

.th-review {
  position: relative;
  overflow: hidden;
  padding: 23px 21px 9px;
  border: 1px solid var(--th-depth-line);
  border-radius: 20px;
  background:
    radial-gradient(240px 150px at 100% 0%, rgba(105, 125, 221, .12), transparent 74%),
    rgba(255, 255, 255, .94);
  box-shadow: var(--th-depth-shadow);
}
.th-review::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--th-cobalt), #8b9aeb, transparent);
}
.th-review .ep-section-head { border-bottom-color: rgba(108, 122, 176, .15); }
.th-review-item > a { border-radius: var(--app-radius-inset); transition: background .16s ease, transform .16s ease; }
.th-review-item > a:hover { background: rgba(238, 241, 253, .78); transform: translateX(2px); }

.th-trilha {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid rgba(107, 122, 179, .15);
  border-radius: 20px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 52px -46px rgba(34, 46, 91, .52);
}
.th-page > .ep-section:not(.th-review):not(.th-trilha) {
  margin-top: 24px;
  padding: 23px 24px;
  border: 1px solid rgba(107, 122, 179, .15);
  border-radius: 20px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 24px 52px -46px rgba(34, 46, 91, .52);
}
.th-page > .ep-section:not(.th-review) .ep-section-head {
  padding-bottom: 12px;
  border-bottom-color: rgba(107, 122, 179, .15);
}
.th-page .ep-rows,
.th-case-grid { border-bottom-color: rgba(107, 122, 179, .14); border-top-color: rgba(107, 122, 179, .14); }
.th-case:hover { border-radius: var(--app-radius-inset); background: rgba(238, 241, 253, .72); }
.th-toolbar {
  border-color: rgba(102, 118, 181, .18);
  border-radius: var(--app-radius-card);
  box-shadow: 0 18px 38px -34px rgba(34, 46, 95, .52);
}
.th-search input,
.th-filter,
.th-chip,
.th-area-card { border-radius: var(--app-radius-inset); }

@media (max-width: 1040px) {
  .th-page { column-gap: 16px; }
}

@media (max-width: 900px) {
  .th-page > .th-review { margin-top: 16px; }
  .th-mode + .th-mode,
  .th-page:has(.th-review) .th-mode + .th-mode { border: 1px solid rgba(103, 119, 183, .16); }
}

@media (max-width: 760px) {
  .th-modes,
  .th-page:has(.th-review) .th-modes { gap: 9px; }
  .th-mode + .th-mode,
  .th-page:has(.th-review) .th-mode + .th-mode { border: 1px solid rgba(103, 119, 183, .16); }
  .th-trilha,
  .th-page > .ep-section:not(.th-review):not(.th-trilha) { padding: 20px 18px; }
}

@media (max-width: 640px) {
  .th-page-head { margin-bottom: 19px; padding-bottom: 10px; }
  .th-recommend { padding: 25px 20px 22px; border-radius: 19px; }
  .th-recommend .ep-focus-grid { grid-template-columns: minmax(0, 1fr) 90px; gap: 16px; }
  .th-target { width: 90px; min-height: 104px; padding: 13px 8px; border-radius: 15px; }
  .th-target::before { font-size: var(--esp-type-caption); }
  .th-target svg { width: 34px; height: 34px; }
  .th-review { padding: 21px 17px 8px; border-radius: var(--app-radius-card); }
  .th-page > .ep-section:not(.th-review),
  .th-trilha { margin-top: 20px; }
}

@media (max-width: 480px) {
  .th-recommend .ep-focus-grid { grid-template-columns: 1fr; }
  .th-recommend .th-target { display: none; }
  .th-recommend .ep-primary { width: 100%; }
  .th-mode { border-radius: var(--app-radius-mobile-panel); }
  .th-trilha,
  .th-page > .ep-section:not(.th-review):not(.th-trilha) { padding: 18px 15px; border-radius: var(--app-radius-card); }
}

@media (max-width: 340px) {
  .th-recommend { padding-inline: 16px; }
  .th-review { padding-inline: 14px; }
  .th-trilha,
  .th-page > .ep-section:not(.th-review):not(.th-trilha) { padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .th-mode,
  .th-review-item > a { transition: none; }
  .th-mode:hover,
  .th-review-item > a:hover { transform: none; }
}

/* ═══ Estados e esqueleto fiéis à prescrição ════════════════════════════════
   A arquitetura permanece. Ação usa lima; cobalt continua sendo orientação,
   foco e estado. O carregamento passa a ocupar a mesma primeira dobra da tela. */
.th-recommend .ep-primary {
  background: linear-gradient(135deg, #baf160, #a8e24f);
  color: #243217 !important;
  box-shadow: 0 15px 28px -19px rgba(87, 132, 24, .78);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.th-recommend .ep-primary:hover {
  background: linear-gradient(135deg, #c2f672, #afe957);
  color: #1f2d13 !important;
  box-shadow: 0 18px 32px -19px rgba(87, 132, 24, .84);
  filter: none;
  transform: translateY(-2px);
}
.th-recommend .ep-primary:active {
  box-shadow: 0 9px 18px -14px rgba(87, 132, 24, .72);
  transform: translateY(0) scale(.99);
}
.th-recommend .ep-primary:focus-visible {
  outline: 3px solid rgba(82, 104, 202, .46);
  outline-offset: 4px;
}
.th-target,
.th-review-pct,
.th-trilha-peso { font-variant-numeric: tabular-nums; }
.th-mode:active,
.th-review-item > a:active,
.th-case:active { transform: translateY(1px); }
.th-review-pct,
.th-trilha-peso { white-space: nowrap; }
.th-page :is(.th-mode, .th-review-item > a, .th-case, .th-trilha-item > a):focus-visible {
  outline-color: rgba(82, 104, 202, .46);
  outline-offset: 4px;
}

/* A abertura real permanece enquanto o acervo responde. A prévia usa peças
   de layout, não desenhos de conteúdo ou notas fictícias. */
.th-entry-head { width: min(1180px, 100%); margin-inline: auto; }
.th-loading { display: grid; width: min(1180px, 100%); margin: 0 auto; padding-bottom: 42px; gap: 16px; }
.th-load-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.th-load-feedback p { margin: 0; color: var(--th-muted); font-size: var(--esp-type-support); line-height: 1.5; }
.th-load-feedback button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--th-line-strong);
  border-radius: 8px;
  background: var(--th-surface);
  color: var(--th-cobalt-deep);
  font: var(--esp-weight-bold) var(--esp-type-support)/1.3 var(--esp-ui, Inter, sans-serif);
  cursor: pointer;
}
.th-load-feedback button:focus-visible { outline: 3px solid var(--th-cobalt); outline-offset: 3px; }
.th-load-grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(320px, .82fr); gap: 20px; }
.th-load-main { display: grid; align-content: start; gap: 12px; min-width: 0; }
.th-load-card { min-width: 0; padding: 26px; border: 1px solid var(--th-line); border-radius: 20px; background: var(--th-surface); }
.th-placeholder { display: block; width: 100%; height: 12px; border-radius: 5px; background: var(--th-cobalt-soft); animation: th-loading-breathe 1.8s ease-in-out infinite; }
.th-placeholder--label { width: 42%; height: 11px; }
.th-placeholder--title { width: 90%; height: 74px; margin-top: 20px; }
.th-placeholder--copy { width: 85%; margin-top: 15px; }
.th-placeholder--copy + .th-placeholder--copy { width: 62%; }
.th-placeholder--action { width: 178px; max-width: 100%; height: 48px; margin-top: 28px; border-radius: var(--app-radius-control); }
.th-load-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--th-line); border-radius: var(--app-radius-panel); background: var(--th-surface); }
.th-load-modes > div { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 114px; padding: 14px; }
.th-load-modes > div + div { border-left: 1px solid var(--th-line); }
.th-placeholder--icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--app-radius-control); }
.th-placeholder--mode { width: 70%; height: 36px; }
.th-load-review { padding: 20px; }
.th-load-next { padding: 16px; margin-top: 22px; border: 1px solid var(--th-line); border-radius: var(--app-radius-inset); }
.th-load-next .th-placeholder--title { height: 24px; margin-top: 14px; }
.th-load-next .th-placeholder--copy:first-child { margin-top: 0; }
.th-load-row { display: flex; align-items: center; min-height: 66px; border-top: 1px solid var(--th-line); }
.th-load-row:first-of-type { margin-top: 12px; }
.th-load-row .th-placeholder { width: 64%; margin: 0; }
@keyframes th-loading-breathe { 50% { opacity: .55; } }
@media (max-width: 1040px) {
  .th-load-grid { grid-template-columns: minmax(0, 1.42fr) minmax(300px, .78fr); column-gap: 16px; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  /* O título saiu do grid, mas conserva seu intervalo original entre linhas. */
  .th-entry-head { margin-bottom: 46px; }
}
@media (max-width: 900px) {
  .th-load-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .th-load-modes { grid-template-columns: minmax(0, 1fr); }
  .th-load-modes > div { min-height: 72px; }
  .th-load-modes > div + div { border-left: 0; border-top: 1px solid var(--th-line); }
}
@media (max-width: 640px) {
  .th-load-card { padding: 20px 18px; border-radius: var(--app-radius-card); }
  .th-placeholder--title { height: 90px; }
  .th-placeholder--action { width: 100%; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .th-placeholder { animation: none; } }

.th-error {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(211, 106, 80, .22);
  border-top-width: 1px;
  border-radius: 20px;
  background: var(--th-surface);
  box-shadow: none;
}
.th-error button {
  background: var(--th-lime);
  color: #243217;
}
.th-empty {
  border-color: rgba(211, 106, 80, .18);
  border-left-width: 1px;
  border-radius: var(--app-radius-card);
  box-shadow: 0 22px 48px -42px rgba(66, 39, 50, .46);
}

@media (max-width: 480px) {
  .th-error { padding: 25px 19px; border-radius: var(--app-radius-card); }
}

@media (hover: none) {
  .th-recommend .ep-primary:hover,
  .th-mode:hover,
  .th-review-item > a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .th-recommend .ep-primary,
  .th-mode,
  .th-review-item > a,
  .th-case { transition: none; }
  .th-recommend .ep-primary:hover,
  .th-recommend .ep-primary:active,
  .th-mode:active,
  .th-review-item > a:active,
  .th-case:active { transform: none; }
}

/* ── Refino: menos ornamento, mais conteudo ─────────────────────────────────
   O "alvo da rubrica" era uma caixa escura com duas palavras em caixa alta e um
   icone, sem carregar dado nenhum — decoracao vestida de componente, que e o que
   mais denuncia interface gerada. O heroi passa a usar a largura toda para o que
   ele de fato diz. */
.th-recommend .th-target { display: none; }
.th-recommend .ep-focus-grid { grid-template-columns: minmax(0, 1fr); }

/* A trilha e CONTEUDO, nao um objeto: ela nao precisa de moldura propria. Sem o
   cartao em volta, a sequencia se le como uma lista de verdade e a pagina ganha
   uma hierarquia de superficie — cartao para o que se clica, pagina para o que
   se le. */
.th-trilha {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-top: 34px;
}
.th-trilha .ep-section-head { padding-bottom: 12px; border-bottom: 1px solid var(--th-line); }

/* Os tres formatos sao UMA regua de escolha, nao tres produtos concorrentes — e
   era isso que o CSS mais acima ja dizia, antes de uma regra posterior devolver
   cartao, sombra e vao a cada um. Um contorno so, fio entre os itens: le-se como
   um instrumento com tres posicoes em vez de tres coisas disputando atencao. */
.th-hero-layout .th-modes {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--th-line);
  border-radius: var(--app-radius-panel);
  background: var(--ep-card, #fff);
  box-shadow: var(--ep-shadow, 0 1px 2px rgba(29,39,70,.06));
}
.th-hero-layout .th-modes > * {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.th-hero-layout .th-modes > * + * { border-top: 1px solid var(--th-line); }
.th-hero-layout .th-modes > *:hover { background: var(--ep-blue-soft, #eef1ff); }

/* Sem o ornamento, o heroi tinha 195px mortos: o titulo e capado em 22ch e o
   cartao ocupava dois tercos da largura. Um ponto de entrada e manchete mais
   botao — nao precisa de dois tercos. A regua de formatos ganha a diferenca e as
   duas colunas passam a ter presenca parecida, que e o que elas de fato tem. */
.th-hero-layout { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); }
.th-recommend .ep-focus h2, .th-recommend h2 { max-width: 20ch; }

/* A linha da trilha ja tinha hover, mas sem transicao: o fundo aparecia seco, o
   que le como pagina estatica em vez de superficie que responde. O movimento e
   curto de proposito — confirmacao de alvo, nao animacao. */
.th-trilha-item > a {
  transition: background-color .16s ease, transform .16s ease;
}
.th-trilha-item > a:hover { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .th-trilha-item > a { transition: none; }
  .th-trilha-item > a:hover { transform: none; }
}

/* ═══ Uma régua de escolha, sem três cartões concorrentes ══════════════════
   A regra anterior já descrevia os formatos como uma única régua, mas perdia
   por especificidade para o estado com fila de revisão. Estes seletores fecham
   o contrato visual: um contorno, divisórias internas e nenhum vão decorativo. */
.th-page .th-hero-layout .th-modes,
.th-page:has(.th-review) .th-hero-layout .th-modes {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--th-line);
  border-radius: var(--app-radius-panel);
  background: var(--ep-card, #fff);
  box-shadow: var(--ep-shadow, 0 1px 2px rgba(29, 39, 70, .06));
}
.th-page .th-hero-layout .th-modes > *,
.th-page:has(.th-review) .th-hero-layout .th-modes > * {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.th-page .th-hero-layout .th-modes > * + *,
.th-page:has(.th-review) .th-hero-layout .th-modes > * + * {
  border-top: 1px solid var(--th-line);
  border-left: 0;
}
.th-page .th-hero-layout .th-modes > *:hover,
.th-page:has(.th-review) .th-hero-layout .th-modes > *:hover {
  background: var(--ep-blue-soft, #eef1ff);
  box-shadow: none;
  transform: none;
}

/* Uma linha não bastava para explicar por que cada revisão entrou na fila.
   Duas linhas mantêm a comparação rápida sem cortar a frase no primeiro verbo. */
.th-review-corpo small {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (min-width: 761px) {
  .th-review-item > a {
    grid-template-columns: 72px minmax(0, 1fr) 48px 12px;
    gap: 8px;
  }
}

@media (max-width: 760px) {
  /* A regra intermediária de 1040 px removia a terceira coluna e, ao reexibir
     a seta no celular, ela caía sozinha numa segunda linha. */
  .th-page:has(.th-review) .th-hero-layout .th-mode {
    grid-template-columns: 36px minmax(0, 1fr) 14px;
    min-height: 88px;
  }
}

/* O estado sem fila de revisão usa outra árvore de seletores. Esta regra vem
   por último para garantir o mesmo reflow em tablet nos dois estados. */
@media (max-width: 900px) {
  .th-page .th-hero-layout,
  .th-page:not(:has(.th-review)) > .th-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Os três modos continuam no mesmo card; o fio entre eles é vertical. */
.th-page .th-hero-layout .th-modes > * + *,
.th-page:has(.th-review) .th-hero-layout .th-modes > * + * {
  border-top: 0;
  border-left: 1px solid var(--th-line);
}

@media (max-width: 760px) {
  .th-page .th-hero-layout .th-modes > * + *,
  .th-page:has(.th-review) .th-hero-layout .th-modes > * + * {
    border-top: 1px solid var(--th-line);
    border-left: 0;
  }
}

/* A régua mantém cada pílula na mesma base, mesmo quando a descrição quebra. */
.th-page .th-hero-layout .th-mode-copy {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: stretch;
}
.th-page .th-hero-layout .th-mode-copy > .th-mode-pill {
  align-self: end;
  justify-self: start;
}

/* ═══ A revisão seguinte primeiro, a fila depois ═══════════════════════════
   A agenda não é uma tabela: ela precisa dizer o que volta primeiro e deixar
   os próximos critérios comparáveis sem cortar explicações pela metade. */
.th-review {
  padding: 20px;
  border: 1px solid var(--th-line-strong);
  border-radius: var(--app-radius-panel);
  background: var(--th-surface);
  box-shadow: none;
}
.th-review::before { display: none; }
.th-review .ep-section-head {
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: 0;
}
.th-review-list { display: grid; }
.th-review-next { margin-bottom: var(--app-space-1); }
.th-review-next > a {
  display: block;
  padding: 15px;
  border: 1px solid #d9def3;
  border-radius: var(--app-radius-inset);
  background: var(--th-cobalt-soft);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease;
}
.th-review-next > a:hover {
  border-color: #bec8ec;
  background: #e8ecfb;
}
.th-review-next > a:focus-visible {
  outline: 3px solid rgba(82, 104, 202, .34);
  outline-offset: 3px;
}
.th-review-next-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 10px;
  color: var(--th-cobalt-deep);
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  letter-spacing: .035em;
  line-height: 1.3;
  text-transform: uppercase;
}
.th-review-next-kicker i,
.th-review-next-cta i { font-style: normal; }
.th-review-next--fraco .th-review-next-kicker,
.th-review-next--recidiva .th-review-next-kicker { color: #aa4e39; }
.th-review-next-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--app-space-3);
  margin-top: var(--app-space-2);
}
.th-review-next-main b {
  min-width: 0;
  color: var(--th-ink);
  font-size: var(--esp-type-body);
  line-height: 1.25;
}
.th-review-next-main strong {
  flex: 0 0 auto;
  color: var(--th-ink);
  font-size: var(--esp-type-body);
  font-variant-numeric: tabular-nums;
}
.th-review-next-score { flex: 0 0 auto; text-align: right; }
.th-review-next-score small {
  display: block;
  margin-top: 2px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  line-height: 1.3;
}
.th-review-next .th-review-due {
  padding: 3px 6px;
  border: 1px solid var(--th-line-strong);
  border-radius: 5px;
  background: var(--th-surface);
  white-space: nowrap;
}
.th-review-next-reason {
  display: block;
  margin-top: 7px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  line-height: 1.45;
}
.th-review-next-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  color: var(--th-cobalt-deep);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
}
.th-review-after {
  padding: 13px 4px 5px;
  color: var(--th-faint);
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.th-review-after + .th-review-item { border-top: 0; }
@media (min-width: 761px) {
  .th-review-item > a {
    grid-template-columns: minmax(0, 1fr) auto 12px;
  }
}
.th-review-item > a {
  gap: 10px;
  min-height: 62px;
  margin: 0;
  padding: 11px 4px;
  border-radius: 8px;
}
.th-review-item > a:hover {
  background: var(--th-cobalt-soft);
  transform: none;
}
.th-review-corpo small {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  overflow: visible;
  color: var(--th-muted);
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}
.th-review-corpo .th-review-due { color: var(--th-cobalt-deep); font-weight: var(--esp-weight-medium); }
.th-review-corpo small > span:last-child:not(:first-child)::before { content: '·'; margin-right: 8px; }
.th-review-pct b { font-size: var(--esp-type-support); }

@media (max-width: 760px) {
  .th-review { padding: 18px 16px 9px; }
  .th-review-next > a { padding: 14px; }
  .th-review-item > a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 2px;
  }
  .th-review-seta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .th-review-next > a { transition: none; }
}

/* Mobile: os três formatos cabem numa régua curta. A duração ocupa sempre
   a mesma coluna, sem truncar descrições ou diminuir os alvos de toque. */
@media (max-width: 760px) {
  .th-page .th-hero-layout .th-mode,
  .th-page:has(.th-review) .th-hero-layout .th-mode {
    min-height: 72px;
    padding-block: 11px;
  }
  .th-page .th-hero-layout .th-mode-copy {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    align-content: center;
    align-items: center;
  }
  .th-page .th-hero-layout .th-mode-copy > b { grid-column: 1; grid-row: 1; }
  .th-page .th-hero-layout .th-mode-copy > span:not(.th-mode-pill) {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
  .th-page .th-hero-layout .th-mode-copy > .th-mode-pill {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .th-page-head { gap: 8px; margin-bottom: 15px; padding-bottom: 6px; }
  .th-page-head .ep-date-chip { min-height: 32px; }
  .th-recommend { padding-block: 20px; }
}
@media (max-width: 820px) {
  html:has(body.th-body) {
    scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 340px) and (max-height: 740px) {
  .th-page-head h1,
  .th-recommend h2 { font-size: var(--esp-type-subhead); line-height: 1.2; }
  /* Os três formatos logo abaixo já explicam esta introdução. */
  .th-page-head p { display: none; }
}

/* ═══ TREINAR / RECOMENDAÇÃO + CAMINHO — setembro 2026 ══════════════════════
   O caso recomendado é a única chamada forte da primeira dobra. A trilha usa
   eixo e nós com escala distinta para passado, presente e futuro; formatos e
   revisões permanecem disponíveis, mas deixam de competir com o próximo passo. */
.th-body .app-main { padding-top: clamp(32px, 5vw, 60px); }
.th-page {
  display: block;
  width: min(1080px, 100%);
  padding-bottom: 64px;
}
.th-entry-head {
  width: min(1080px, 100%);
  align-items: center;
  margin-bottom: 18px;
  padding: 0;
  border-bottom: 0;
}
.th-page-head h1 {
  max-width: 22ch;
  font-family: var(--esp-title);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: var(--esp-title-weight, 700);
  line-height: .98;
  letter-spacing: -.055em;
}
.th-page-head p {
  max-width: 62ch;
  margin-top: 10px;
  font-size: var(--esp-type-support);
  line-height: 1.48;
}
.th-page-head .ep-date-chip {
  min-height: 34px;
  padding-inline: 12px;
  border-color: #dfe4ee;
  border-radius: var(--app-radius-pill);
  background: transparent;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
}
.th-cycle-note,
.th-data-note { margin: 0 0 18px; }

.th-practice-stage {
  overflow: hidden;
  border: 1px solid rgba(96, 115, 190, .2);
  border-radius: 24px;
  background: var(--th-surface);
  box-shadow: 0 24px 62px -50px rgba(28, 40, 78, .78);
}
.th-recommend {
  min-height: 390px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(238, 242, 255, .92), rgba(255, 255, 255, 0) 38%),
    var(--th-surface);
  box-shadow: none;
  color: var(--th-ink);
}
.th-recommend::before,
.th-recommend::after { content: none; display: none; }
.th-recommend-layout {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  min-height: 390px;
}
.th-recommend-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-block: 28px;
  border-right: 1px solid #dfe4f2;
  color: #6171bd;
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  font-weight: var(--esp-weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.th-recommend-rail i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--th-lime);
  box-shadow: 0 0 0 5px rgba(155, 206, 75, .13);
}
.th-recommend-copy {
  display: flex;
  min-width: 0;
  max-width: 820px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 42px 54px 44px;
}
.th-recommend .ep-focus-kicker {
  margin: 0 0 17px;
  color: var(--th-cobalt-deep);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.th-recommend .ep-focus h2,
.th-recommend h2 {
  max-width: 25ch;
  margin: 0;
  color: var(--th-ink);
  font-family: var(--esp-title);
  font-size: clamp(32px, 4.25vw, 50px);
  font-weight: var(--esp-title-weight, 700);
  line-height: 1.01;
  letter-spacing: -.047em;
  overflow-wrap: anywhere;
}
.th-recommend .ep-focus-meta {
  max-width: 66ch;
  margin-top: 14px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  line-height: 1.48;
}
.th-recommend .ep-focus-reason {
  display: block;
  max-width: 62ch;
  margin: 18px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--th-lime);
  color: #3f4961;
  font-size: var(--esp-type-support);
  line-height: 1.5;
}
.th-recommend .ep-focus-reason::before { content: none; display: none; }
.th-recommend .ep-primary {
  min-width: 190px;
  min-height: 52px;
  margin-top: 25px;
  padding-inline: 23px;
  border-radius: 12px;
  background: #ade94d;
  color: #243315 !important;
  box-shadow: 0 13px 28px -20px rgba(107, 147, 40, .74);
}

.th-alternatives {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid #e3e7f0;
}
.th-alternatives > span {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-right: 1px solid #e3e7f0;
  color: #778199;
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  font-weight: var(--esp-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.th-page .th-alternatives .th-modes,
.th-page:has(.th-review) .th-alternatives .th-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.th-page .th-alternatives .th-mode,
.th-page:has(.th-review) .th-alternatives .th-mode {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 86px;
  padding: 14px 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transition: background-color .16s ease;
}
.th-page .th-alternatives .th-mode + .th-mode,
.th-page:has(.th-review) .th-alternatives .th-mode + .th-mode {
  border-top: 0;
  border-left: 1px solid #e3e7f0;
}
.th-page .th-alternatives .th-mode:hover,
.th-page:has(.th-review) .th-alternatives .th-mode:hover {
  background: #f4f6fd;
  transform: none;
}
.th-alternatives .th-mode > .ep-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.th-alternatives .th-mode > .ep-icon svg { width: 17px; height: 17px; }
.th-alternatives .th-mode-copy {
  display: block;
  min-width: 0;
  align-self: auto;
}
.th-alternatives .th-mode-copy b {
  font-size: var(--esp-type-caption);
  line-height: 1.25;
}
.th-alternatives .th-mode-copy > span:not(.th-mode-pill) {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
}
.th-alternatives .th-mode-copy > .th-mode-pill {
  display: none;
}
.th-alternatives .th-mode > i { color: var(--th-cobalt-deep); }

.th-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin-top: 52px;
}
.th-review-placement { margin-top: 12px; }
.th-plan-main { min-width: 0; }
.th-section-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--th-cobalt-deep) !important;
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px !important;
  font-weight: var(--esp-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.th-trilha {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.th-trilha .ep-section-head {
  margin: 0;
  padding: 0;
  border: 0;
}
.th-trilha .th-trilha-head { align-items: end; }
.th-trilha .th-trilha-head > div { min-width: 0; }
.th-trilha .th-trilha-count {
  flex: 0 0 auto;
  margin: 0 0 3px auto;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  line-height: 1.35;
  white-space: nowrap;
}
.th-trilha .ep-section-head h2 {
  font-family: var(--esp-title);
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.th-trilha .ep-section-head span:last-child:not(.th-trilha-count) {
  display: block;
  margin-top: 8px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
}
.th-trilha-porque {
  max-width: 64ch;
  margin: 13px 0 0;
  color: var(--th-muted);
  font-size: var(--esp-type-support);
  line-height: 1.5;
}
.th-trilha-progress {
  height: 5px;
  margin: 20px 0 22px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e8f0;
}
.th-trilha-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #667bea, #a7dc55);
}
.th-trilha-lista {
  --th-trilha-axis: 21px;
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.th-trilha-lista::before {
  content: "";
  position: absolute;
  top: 23px;
  bottom: 23px;
  left: var(--th-trilha-axis);
  width: 2px;
  border-radius: 2px;
  background: #dbe1ec;
}
.th-trilha-item,
.th-trilha-item + .th-trilha-item { border: 0; }
.th-trilha-item > a {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 68px;
  padding: 11px 12px 11px 0;
  border: 1px solid transparent;
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
  transition: opacity .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.th-trilha-item > a > * { position: relative; z-index: 1; }
.th-trilha-item > a:hover { background: rgba(238, 242, 255, .72); transform: translateX(2px); }
.th-trilha-n {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  place-items: center;
  border: 2px solid #cbd3e0;
  border-radius: 50%;
  background: #f6f7fb;
  color: #73809a;
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
}
.th-trilha-corpo { min-width: 0; }
.th-trilha-corpo .th-trilha-estado {
  display: block;
  min-width: 0;
  margin-bottom: 4px;
  color: #7e89a0;
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9px;
  font-weight: var(--esp-weight-bold);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.th-trilha-corpo b {
  display: block;
  color: var(--th-ink);
  font-family: var(--esp-title);
  font-size: var(--esp-type-support);
  line-height: 1.3;
  letter-spacing: -.018em;
}
.th-trilha-corpo small {
  display: block;
  margin-top: 5px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  line-height: 1.4;
}
.th-trilha-cta {
  display: none;
  align-items: center;
  gap: 7px;
  color: var(--th-cobalt-deep);
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  white-space: nowrap;
}
.th-trilha-cta i { font-style: normal; }
.th-trilha-item--feito > a { opacity: .57; }
.th-trilha-item--feito .th-trilha-n {
  border-color: #b7d78c;
  background: #eff8df;
  color: var(--th-lime-ink);
}
.th-trilha-item--agora { margin-block: 5px; }
.th-trilha-item--agora > a {
  min-height: 132px;
  padding: 20px 20px 20px 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.th-trilha-item--agora > a::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 var(--th-trilha-axis);
  border: 1px solid #cfd7f3;
  border-radius: 15px;
  background: var(--th-surface);
  box-shadow: 0 20px 42px -34px rgba(40, 54, 108, .72);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.th-trilha-item--agora > a:hover {
  background: transparent;
  transform: none;
}
.th-trilha-item--agora > a:hover::before { border-color: #b9c5ec; background: #fafbff; }
.th-trilha-item--agora .th-trilha-n {
  border-color: #99ca50;
  background: #f6f7fb;
  color: #56752b;
  box-shadow:
    0 0 0 5px rgba(163, 215, 82, .18),
    0 0 19px rgba(126, 176, 54, .34);
}
.th-trilha-item--agora .th-trilha-corpo .th-trilha-estado { color: var(--th-cobalt-deep); }
.th-trilha-item--agora .th-trilha-corpo b {
  font-size: var(--esp-type-body);
  line-height: 1.24;
}
.th-trilha-item--agora .th-trilha-cta { display: inline-flex; }
.th-trilha-item--aberto > a { opacity: .5; }

.th-review {
  margin: 0;
  padding: 21px;
  border: 1px solid #dfe4ee;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
}
.th-review .ep-section-head {
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.th-review .ep-section-head h2 {
  font-family: var(--esp-title);
  font-size: var(--esp-type-subhead);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.th-review .ep-section-head > div > span:last-child {
  display: block;
  margin-top: 6px;
  color: var(--th-muted);
  font-size: var(--esp-type-caption);
  line-height: 1.35;
}
.th-review .ep-section-head > a {
  min-height: 28px;
  margin: 0;
  color: var(--th-cobalt-deep);
  font-size: 10px;
  white-space: nowrap;
}
.th-review-next { margin: 0; }
.th-review-next > a {
  display: block;
  padding: 16px;
  border: 0;
  border-radius: 13px;
  background: #eef2ff;
  transition: background-color .16s ease;
}
.th-review-next > a:hover { border-color: transparent; background: #e7ecfc; }
.th-review-next-main { gap: 10px; }
.th-review-next-reason { line-height: 1.45; }
.th-review-more { margin-top: 10px; border-top: 1px solid var(--th-line); }
.th-review-more summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--th-cobalt-deep);
  cursor: pointer;
  font-size: var(--esp-type-caption);
  font-weight: var(--esp-weight-bold);
  list-style: none;
}
.th-review-more summary::-webkit-details-marker { display: none; }
.th-review-more summary > span { font-size: var(--esp-type-body); transition: transform .16s ease; }
.th-review-more[open] summary > span { transform: rotate(45deg); }
.th-review-more > ol { margin: 0; padding: 0; list-style: none; }
.th-review-more .th-review-item + .th-review-item { border-top: 1px solid var(--th-line); }

.th-history-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 84px;
  padding: 14px 2px;
  border-top: 1px solid var(--th-line);
  border-bottom: 1px solid var(--th-line);
  color: inherit;
  text-decoration: none;
}
.th-history-link > .ep-icon { width: 36px; height: 36px; }
.th-history-link > span:nth-child(2) { min-width: 0; }
.th-history-link small {
  display: block;
  color: var(--th-cobalt-deep);
  font-family: var(--esp-micro, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9px;
  font-weight: var(--esp-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.th-history-link b {
  display: block;
  margin-top: 4px;
  color: var(--th-ink);
  font-size: var(--esp-type-caption);
  line-height: 1.3;
}
.th-history-link b + span {
  display: block;
  margin-top: 3px;
  color: var(--th-muted);
  font-size: 10px;
}
.th-history-link > i { color: var(--th-cobalt-deep); font-style: normal; }

@media (max-width: 900px) {
  .th-plan-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .th-plan-aside { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); align-items: start; }
  .th-history-link { margin-top: 2px; }
}

@media (max-width: 760px) {
  .th-body .app-main { padding-top: 24px; }
  .th-entry-head { align-items: flex-start; margin-bottom: 14px; }
  .th-page-head h1 { padding-right: 38px; font-size: clamp(31px, 9.4vw, 40px); line-height: 1; }
  .th-page-head p { margin-top: 8px; line-height: 1.42; }
  .th-page-head .ep-date-chip { min-height: 30px; margin-top: 2px; }
  .th-practice-stage { border-radius: 19px; }
  .th-recommend,
  .th-recommend-layout { min-height: 0; }
  .th-recommend-layout { grid-template-columns: minmax(0, 1fr); }
  .th-recommend-rail {
    justify-content: flex-start;
    padding: 15px 21px 0;
    border: 0;
    writing-mode: horizontal-tb;
    transform: none;
  }
  .th-recommend-copy { padding: 20px 21px 25px; }
  .th-recommend .ep-focus-kicker { margin-bottom: 13px; }
  .th-recommend .ep-focus h2,
  .th-recommend h2 { max-width: none; font-size: clamp(28px, 8.4vw, 36px); }
  .th-recommend .ep-focus-meta { margin-top: 11px; }
  .th-recommend .ep-focus-reason { margin-top: 13px; font-size: var(--esp-type-caption); }
  .th-recommend .ep-primary { width: 100%; min-height: 50px; margin-top: 20px; }
  .th-alternatives { grid-template-columns: minmax(0, 1fr); }
  .th-alternatives > span { min-height: 38px; padding: 10px 15px; border-right: 0; border-bottom: 1px solid #e3e7f0; }
  .th-page .th-alternatives .th-modes,
  .th-page:has(.th-review) .th-alternatives .th-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-page .th-alternatives .th-mode,
  .th-page:has(.th-review) .th-alternatives .th-mode {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 7px;
    min-height: 102px;
    padding: 13px 8px;
    text-align: center;
  }
  .th-page .th-alternatives .th-mode + .th-mode,
  .th-page:has(.th-review) .th-alternatives .th-mode + .th-mode { border-top: 0; border-left: 1px solid #e3e7f0; }
  .th-alternatives .th-mode-copy { display: block; }
  .th-alternatives .th-mode-copy > span:not(.th-mode-pill) { display: none; }
  .th-alternatives .th-mode > i { display: none; }
  .th-plan-layout { gap: 30px; margin-top: 38px; }
  .th-plan-aside { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .th-trilha-item > a { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding-right: 4px; }
  .th-trilha-lista { --th-trilha-axis: 18px; }
  .th-trilha-n { width: 32px; height: 32px; margin-left: 2px; }
  .th-trilha-item--agora > a {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 142px;
    padding: 18px 14px 18px 0;
    transform: none;
  }
  .th-trilha-item--agora > a:hover { transform: none; }
  .th-trilha-cta { grid-column: 2; justify-self: start; margin-top: 8px; }
  .th-review { padding: 18px 16px; }
}

@media (max-width: 390px) {
  .th-entry-head { flex-direction: column; }
  .th-page-head h1 { padding-right: 44px; }
  .th-page-head .ep-date-chip { align-self: flex-start; }
  .th-alternatives .th-mode-copy b { font-size: 11px; }
  .th-trilha-item--agora .th-trilha-corpo b { font-size: var(--esp-type-support); }
  .th-review .ep-section-head { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .th-page .th-alternatives .th-mode,
  .th-trilha-item > a,
  .th-review-next > a,
  .th-review-more summary > span { transition: none; }
  .th-trilha-item > a:hover,
  .th-trilha-item--agora > a,
  .th-trilha-item--agora > a:hover { transform: none; }
}

/* ═══ PRIMEIRA DOBRA COMPACTA — setembro 2026 ═══════════════════════════════
   “Treinar” orienta a rota; a recomendação assume a explicação e a ação. */
.th-body .app-main { padding-top: 22px; }
.app-body.th-body .th-entry-head {
  min-height: 38px;
  align-items: center;
  margin-bottom: 10px;
  padding: 0;
}
.app-body.th-body .th-page-head h1 {
  max-width: none;
  font-size: clamp(28px, 2.6vw, 34px);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.app-body.th-body .th-page-head p {
  max-width: 72ch;
  margin-top: 5px;
  font-size: var(--esp-type-caption);
  line-height: 1.4;
}
.th-body .th-page-head .ep-date-chip { min-height: 32px; padding-inline: 11px; }
.th-body .th-recommend .ep-focus h2,
.th-body .th-recommend h2 {
  max-width: 27ch;
  font-size: clamp(30px, 3.25vw, 39px);
  line-height: 1.07;
  letter-spacing: -.048em;
}
@media (max-width: 760px) {
  .th-body .app-main { padding-top: 14px; }
  .app-body.th-body .th-entry-head {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .app-body.th-body .th-page-head h1 { padding-right: 0; font-size: clamp(25px, 7vw, 29px); }
  .app-body.th-body .th-page-head p { margin-top: 4px; }
  .th-body .th-page-head .ep-date-chip {
    min-height: 30px;
    margin: 0 0 0 auto;
    white-space: nowrap;
  }
  .th-body .th-recommend .ep-focus h2,
  .th-body .th-recommend h2 { font-size: clamp(25px, 7.2vw, 30px); line-height: 1.09; }
  .th-body .th-recommend-copy { padding-top: 18px; }
}
@media (max-width: 390px) {
  .app-body.th-body .th-entry-head { flex-direction: row; }
  .th-body .th-page-head .ep-date-chip { align-self: center; }
}

/* Primeira dobra: uma ação principal e três formatos compactos ao lado. */
@media (min-width: 761px) {
  .th-body .th-page .th-plan-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .th-body .th-trilha-porque { max-width: none; }
  .th-body .th-trilha-item--agora > a {
    min-height: 112px;
    padding-block: 16px;
  }
  .th-body .th-page .th-practice-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    gap: 12px;
    align-items: stretch;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .th-body .th-practice-stage > .th-recommend {
    min-height: 390px;
    border: 1px solid var(--th-line);
    border-radius: 22px;
    background: var(--th-surface);
    box-shadow: none;
  }
  .th-body .th-practice-stage .th-recommend-layout { min-height: 100%; }
  .th-body .th-practice-stage > .th-alternatives {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid var(--th-line);
    border-radius: 22px;
    background: var(--th-surface);
    box-shadow: none;
  }
  .th-body .th-practice-stage > .th-alternatives > span {
    min-height: 0;
    padding: 20px 18px 14px;
    border: 0;
    border-bottom: 1px solid var(--th-line);
  }
  .th-body .th-page .th-alternatives .th-modes,
  .th-body .th-page:has(.th-review) .th-alternatives .th-modes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .th-body .th-page .th-alternatives .th-mode,
  .th-body .th-page:has(.th-review) .th-alternatives .th-mode {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 0;
    padding: 14px 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }
  .th-body .th-page .th-alternatives .th-mode + .th-mode,
  .th-body .th-page:has(.th-review) .th-alternatives .th-mode + .th-mode {
    border: 0;
    border-top: 1px solid var(--th-line);
  }
  .th-body .th-page .th-alternatives .th-mode:hover,
  .th-body .th-page:has(.th-review) .th-alternatives .th-mode:hover {
    transform: none;
    border-color: var(--th-line);
    background: var(--th-cobalt-soft);
    box-shadow: none;
  }
  .th-body .th-alternatives .th-mode-copy > span:not(.th-mode-pill),
  .th-body .th-alternatives .th-mode > i { display: block; }

  .th-body .th-review-placement .th-review {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 16px;
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
  }
  .th-body .th-review-placement .th-review .ep-section-head {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 0;
    padding: 17px 20px;
    border-right: 1px solid var(--th-line);
  }
  .th-body .th-review-placement .th-review .th-section-kicker {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 6px;
    white-space: nowrap;
  }
  .th-body .th-review-placement .th-review .ep-section-head h2 {
    grid-column: 1;
    grid-row: 2;
  }
  .th-body .th-review-placement .th-review .ep-section-head > div > span:last-child {
    grid-column: 1;
    grid-row: 3;
  }
  .th-body .th-review-placement .th-review .ep-section-head > a {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    min-height: 30px;
    margin: 5px 0 0;
    padding: 0;
  }
  .th-body .th-review-placement .th-review-list {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 10px 10px 10px 0;
  }
  .th-body .th-review-placement .th-review-next > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 18px;
    min-height: 100px;
    padding: 13px 15px;
  }
  .th-body .th-review-placement .th-review-next-kicker { grid-column: 1 / -1; }
  .th-body .th-review-placement .th-review-next-main {
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: baseline;
    margin: 3px 0 0;
  }
  .th-body .th-review-placement .th-review-next-reason {
    grid-column: 1;
    grid-row: 3;
    margin-top: 3px;
  }
  .th-body .th-review-placement .th-review-next-cta {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    margin-top: 3px;
    white-space: nowrap;
  }
  .th-body .th-review-placement .th-review-next-score { text-align: right; }
  .th-body .th-review-placement .th-review-more {
    grid-column: 2;
    grid-row: 2;
    margin: 0 10px 0 0;
  }
}

@media (max-width: 760px) {
  .th-body .th-page .th-practice-stage {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .th-body .th-practice-stage > .th-recommend,
  .th-body .th-practice-stage > .th-alternatives {
    overflow: hidden;
    border: 1px solid var(--th-line);
    border-radius: 19px;
    background: var(--th-surface);
  }
  .th-body .th-practice-stage > .th-alternatives { border-top: 1px solid var(--th-line); }
  .th-body .th-review-placement { margin-top: 10px; }
  .th-body .th-review-placement .th-review {
    padding: 16px;
    border-radius: 19px;
    background: rgba(255, 255, 255, .78);
  }
  .th-body .th-review-placement .th-review .ep-section-head { margin-bottom: 10px; }
  .th-body .th-review-placement .th-review-next > a { padding: 14px; }
  .th-body .th-trilha .th-trilha-head {
    align-items: flex-end;
    flex-wrap: nowrap;
  }
  .th-body .th-trilha .th-trilha-count {
    max-width: 17ch;
    text-align: right;
    white-space: normal;
  }
}