/* ══════════════════════════════════════════════════════════════════
   MONEYROCK EDUCAÇÃO — CSS ESPECÍFICO (shared)
   Carregado por Hub, Catálogo e Leitores via
   <link rel="stylesheet" href="/educacao/shared/educacao.css">.
   Reutiliza os tokens de app/calcula/shared/calcula.css (var(--calc-*),
   var(--mr-gold)) — não redeclara cores/tipografia/espaçamento.
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────────── */
.edu-hero {
  margin-bottom: var(--space-9);
}

.edu-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.edu-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--calc-text-2);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
}

.edu-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--calc-bg);
  background: linear-gradient(135deg, var(--mr-gold), var(--mr-gold-dim));
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  min-height: 44px;
  transition: opacity .15s;
}

.edu-cta-primary:hover {
  opacity: .9;
}

/* ── COLEÇÕES ─────────────────────────────────────────────────────── */
.edu-collection {
  margin-bottom: var(--space-9);
}

.edu-collection-header {
  margin-bottom: var(--space-6);
}

.edu-collection-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--calc-text);
  margin: var(--space-2) 0 var(--space-2);
}

@media (min-width: 768px) {
  .edu-collection-header h2 { font-size: var(--text-2xl); }
}

.edu-collection-header p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  max-width: 60ch;
}

.edu-level-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

.edu-level-iniciante {
  background: rgba(111, 174, 140, 0.15);
  color: var(--calc-positive);
}

.edu-level-intermediario {
  background: rgba(93, 173, 226, 0.15);
  color: var(--calc-neutral);
}

.edu-level-avancado {
  background: rgba(191, 156, 90, 0.15);
  color: var(--mr-gold);
}

.edu-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .edu-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .edu-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── FILTROS (Catálogo) ───────────────────────────────────────────── */
.edu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.edu-filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--calc-text-2);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  min-height: 44px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.edu-filter-btn:hover {
  border-color: var(--mr-gold);
  color: var(--calc-text);
}

.edu-filter-btn.active {
  background: var(--mr-gold);
  border-color: var(--mr-gold);
  color: var(--calc-bg);
}

.edu-catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .edu-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .edu-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── CARD DE E-BOOK (Hub e Catálogo) ─────────────────────────────── */
.edu-book-card {
  display: flex;
  flex-direction: column;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform .18s, border-color .18s;
}

.edu-book-card[data-available="true"]:hover {
  transform: translateY(-3px);
  border-color: var(--calc-border-gold);
}

.edu-book-card[data-available="false"] {
  opacity: .75;
}

.edu-book-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.edu-book-soon {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--calc-text-3);
  background: var(--calc-surface-2);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

.edu-book-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--calc-text);
  margin-bottom: var(--space-2);
}

.edu-book-hook {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--calc-text-2);
  margin-bottom: var(--space-3);
}

.edu-book-summary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-2);
  line-height: 1.55;
  margin-bottom: var(--space-4);
  flex: 1;
}

.edu-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.edu-book-pages {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
}

.edu-book-tool-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--mr-gold);
  background: rgba(191, 156, 90, 0.1);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.edu-book-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mr-gold);
  text-decoration: none;
  align-self: flex-start;
}

.edu-book-cta:hover {
  color: var(--mr-gold-light);
}

/* ── ECOSSISTEMA (CTA final do Hub) ──────────────────────────────── */
.edu-ecosystem {
  text-align: center;
}

.edu-ecosystem-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--calc-text);
  margin-bottom: var(--space-2);
}

.edu-ecosystem-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  margin-bottom: var(--space-5);
}

.edu-ecosystem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 640px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .edu-ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
}

.edu-eco-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-decoration: none;
  color: var(--calc-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  transition: border-color .18s, transform .18s;
}

.edu-eco-card:hover {
  border-color: var(--mr-gold);
  transform: translateY(-3px);
}

.edu-eco-icon {
  font-size: 28px;
  line-height: 1;
}

.edu-eco-name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--calc-text);
}

.edu-eco-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  line-height: 1.4;
}

/* ── LEITOR DE E-BOOK — LAYOUT DE DOIS PAINÉIS ────────────────────── */
html {
  scroll-behavior: smooth;
}

.edu-reader-layout {
  display: block;
}

@media (min-width: 768px) {
  .edu-reader-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* Painel esquerdo (desktop) / topo (mobile, vira acordeão) */
.edu-sidebar {
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .edu-sidebar {
    position: sticky;
    top: calc(var(--space-8) + 56px);
    margin-bottom: 0;
  }
}

.edu-sidebar-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--calc-text);
  margin: 0 0 var(--space-4);
}

/* Botão "Índice ▾" — só existe/aparece no mobile */
.edu-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--calc-text);
  cursor: pointer;
  min-height: 44px;
}

.edu-sidebar-toggle-icon {
  transition: transform .2s;
}

.edu-sidebar-toggle[aria-expanded="true"] .edu-sidebar-toggle-icon {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .edu-sidebar-toggle { display: none; }
}

.edu-sidebar-body {
  display: none;
}

.edu-sidebar-body.open {
  display: block;
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .edu-sidebar-body {
    display: block;
    margin-top: 0;
  }
}

.edu-progress-bar {
  height: 6px;
  background: var(--calc-surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.edu-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mr-gold-dim), var(--mr-gold));
  border-radius: var(--radius-pill);
  transition: width .3s ease;
  width: 0%;
}

.edu-progress-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
  margin-bottom: var(--space-4);
}

.edu-chapter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.edu-chapter-item a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-2);
  text-decoration: none;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  min-height: 44px;
}

.edu-chapter-item a:hover {
  background: var(--calc-surface-2);
  color: var(--calc-text);
}

.edu-chapter-item .edu-chapter-state {
  flex-shrink: 0;
  font-family: var(--font-mono);
  width: 16px;
  text-align: center;
}

.edu-chapter-item[data-state="done"] .edu-chapter-state { color: var(--calc-positive); }
.edu-chapter-item[data-state="current"] a { color: var(--mr-gold); font-weight: 600; }
.edu-chapter-item[data-state="current"] .edu-chapter-state { color: var(--mr-gold); }
.edu-chapter-item[data-state="pending"] .edu-chapter-state { color: var(--calc-text-3); }

/* Painel direito — conteúdo do e-book */
.edu-content {
  max-width: 720px;
}

.edu-content section[id^="capitulo-"] {
  scroll-margin-top: 80px;
}

.edu-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--calc-text);
  margin-bottom: var(--space-5);
  line-height: 1.3;
}

.edu-content h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin: var(--space-6) 0 var(--space-3);
}

.edu-content p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--calc-text-2);
  margin-bottom: var(--space-4);
}

.edu-content ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.edu-content li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--calc-text-2);
  margin-bottom: var(--space-2);
}

.edu-content strong {
  color: var(--calc-text);
}

.edu-chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.edu-prev-chapter,
.edu-next-chapter {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mr-gold);
  text-decoration: none;
}

.edu-prev-chapter:hover,
.edu-next-chapter:hover {
  color: var(--mr-gold-light);
}

.edu-next-chapter {
  margin-left: auto;
}

.edu-cta-box {
  background: var(--calc-surface);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}

.edu-cta-context {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text);
  margin-bottom: var(--space-3);
}

.edu-cta-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--calc-bg);
  background: linear-gradient(135deg, var(--mr-gold), var(--mr-gold-dim));
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  min-height: 44px;
}

.edu-cta-tool:hover {
  opacity: .9;
}

.edu-cta-final {
  background: linear-gradient(160deg, rgba(191,156,90,0.12), var(--calc-surface));
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  margin: var(--space-7) 0;
}

.edu-cta-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--calc-text);
  margin-bottom: var(--space-3);
}

.edu-cta-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  max-width: 50ch;
  margin: 0 auto var(--space-5);
  line-height: 1.6;
}

.edu-next-ebook {
  text-align: center;
  margin-bottom: var(--space-6);
}

.edu-next-ebook p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  margin-bottom: var(--space-2);
}

/* ── PLAYER DE ÁUDIO (leitor de e-book) ──────────────────────────── */
.edu-audio-player { margin-bottom: 1.5rem; }
.edu-audio-btn {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mr-gold);
  background: transparent;
  border: 1px solid var(--calc-border-gold);
  border-radius: 20px;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
}
.edu-audio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--calc-surface-2);
  border-radius: 8px;
}
/* Author styles always beat the UA default [hidden]{display:none} on
   specificity ties, so any class that sets display: on a element also
   toggled via .hidden in JS needs this explicit override — without it
   the panel stays visible even with the hidden attribute present (found
   as a real bug live in production: audio controls open by default on
   every e-book chapter and article). */
.edu-audio-controls[hidden] {
  display: none;
}
.edu-audio-play {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--calc-text);
}
.edu-audio-progress {
  flex: 1;
  height: 4px;
  background: var(--calc-border);
  border-radius: 2px;
  overflow: hidden;
}
.edu-audio-bar {
  height: 100%;
  background: var(--mr-gold);
  width: 0%;
  transition: width 0.5s linear;
}
.edu-audio-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--calc-text-3);
  min-width: 32px;
}

/* ── HUB: CTA PRINCIPAL (QUIZ) ────────────────────────────────────── */
.edu-start {
  margin-bottom: var(--space-7);
  text-align: center;
}
.edu-start-question {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-4);
}
.edu-start-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--mr-gold);
  color: var(--calc-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: opacity 0.15s;
  min-height: 56px;
  margin-bottom: var(--space-6);
}
.edu-start-cta:hover {
  opacity: 0.88;
}
.edu-start-divider {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  margin-bottom: var(--space-5);
}
@media (max-width: 480px) {
  .edu-start-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── HUB: SEÇÃO DE ENTRADA ────────────────────────────────────────── */
.edu-entry {
  margin-bottom: var(--space-8);
}
.edu-entry-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-4);
}
.edu-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .edu-entry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .edu-entry-grid { grid-template-columns: repeat(5, 1fr); }
}
.edu-entry-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--calc-text);
  transition: border-color 0.15s;
  position: relative;
}
.edu-entry-card:not(.edu-entry-card--soon):hover {
  border-color: var(--mr-gold);
}
.edu-entry-card--soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.edu-entry-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: var(--space-1);
}
.edu-entry-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--calc-text);
}
.edu-entry-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  line-height: 1.5;
  flex: 1;
}
.edu-entry-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  align-self: flex-start;
  margin-top: var(--space-2);
}
.edu-entry-status {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  align-self: flex-start;
  margin-top: var(--space-2);
}
.edu-entry-status--active {
  color: var(--calc-positive);
  border: 1px solid rgba(111,174,140,0.3);
  background: rgba(111,174,140,0.08);
}

/* ── HUB: CABEÇALHO DE SEÇÃO ───────────────────────────────────────── */
.edu-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--calc-border);
}
.edu-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--calc-text);
}
.edu-section-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--mr-gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
}
.edu-section-link:hover {
  text-decoration: underline;
}

/* ── E-BOOK: CAPÍTULOS COLAPSÁVEIS (accordion) ───────────────────── */
.edu-chapter {
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
/* Envolve o <button> do cabeçalho — mantém a semântica de título (h2)
   sem quebrar o content model de <button>, que não aceita headings
   como filho direto (WAI-ARIA Accordion Pattern). Especificidade
   .edu-content .edu-chapter-header-heading (0,2,0) precisa vencer
   .edu-content h2 (0,1,1) para anular o margin-bottom/font herdados. */
.edu-content .edu-chapter-header-heading {
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.edu-chapter-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--calc-surface);
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--calc-text);
  transition: background 0.15s;
}
.edu-chapter-header:hover {
  background: var(--calc-surface-2);
}
.edu-chapter-header[aria-expanded="true"] {
  border-bottom: 1px solid var(--calc-border);
}
.edu-chapter-number {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--mr-gold);
  min-width: 32px;
}
.edu-chapter-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  flex: 1;
}
.edu-chapter-chevron {
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  transition: transform 0.2s;
}
.edu-chapter-header[aria-expanded="true"] .edu-chapter-chevron {
  transform: rotate(90deg);
}
.edu-chapter-body {
  padding: var(--space-6);
  background: var(--calc-surface);
}
.edu-chapter-body[hidden] {
  display: none;
}

/* ── QUIZ DE PERFIL FINANCEIRO ────────────────────────────────────── */
.quiz-wrap {
  max-width: 640px;
  margin: 0 auto;
}

/* Estado 1 — Intro */
.quiz-intro {
  text-align: center;
  padding: var(--space-6) 0;
}

.quiz-saved-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-2);
}

.quiz-saved-banner[hidden] {
  display: none;
}

.quiz-saved-banner strong {
  color: var(--mr-gold);
}

.quiz-saved-actions {
  display: flex;
  gap: var(--space-3);
}

.quiz-saved-actions button,
.quiz-saved-actions a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mr-gold);
  background: transparent;
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.quiz-saved-actions button:hover,
.quiz-saved-actions a:hover {
  border-color: var(--mr-gold);
}

.quiz-intro h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--calc-text);
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .quiz-intro h1 { font-size: var(--text-3xl, 2.25rem); }
}

.quiz-intro-sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--calc-text-2);
  margin-bottom: var(--space-5);
}

.quiz-intro .edu-badges {
  justify-content: center;
  margin-bottom: var(--space-6);
}

/* Estado 2 — Perguntas */
.quiz-progress-bar {
  height: 6px;
  background: var(--calc-surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mr-gold-dim), var(--mr-gold));
  border-radius: var(--radius-pill);
  transition: width .3s ease;
  width: 0%;
}

.quiz-progress-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
  margin-bottom: var(--space-6);
}

.quiz-question-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--mr-gold);
  margin-bottom: var(--space-3);
}

.quiz-question-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.35;
  color: var(--calc-text);
  margin-bottom: var(--space-6);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  min-height: 44px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.quiz-option:hover {
  border-color: var(--calc-border-gold);
}

.quiz-option-letter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--calc-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
  transition: border-color .15s, color .15s;
}

.quiz-option.selected {
  border-color: var(--mr-gold);
  background: rgba(191, 156, 90, 0.08);
  color: var(--calc-text);
}

.quiz-option.selected .quiz-option-letter {
  border-color: var(--mr-gold);
  color: var(--mr-gold);
}

.quiz-nav {
  display: flex;
  justify-content: flex-start;
}

.quiz-btn-prev {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--calc-text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--space-2);
}

.quiz-btn-prev:hover {
  color: var(--mr-gold);
}

/* Estado 3 — Resultado */
.quiz-result {
  text-align: center;
  padding: var(--space-6) 0;
}

.quiz-result-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-4);
}

.quiz-result-score {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
  margin-bottom: var(--space-3);
}

.quiz-result-kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mr-gold);
  margin-bottom: var(--space-2);
}

.quiz-result h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--calc-text);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.quiz-result-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto var(--space-7);
}

.quiz-result-section {
  text-align: left;
  margin-bottom: var(--space-6);
}

.quiz-result-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  margin-bottom: var(--space-3);
}

.quiz-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}

.quiz-result-card:hover {
  border-color: var(--mr-gold);
  transform: translateY(-2px);
}

.quiz-result-card-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--calc-text);
}

.quiz-result-card-arrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mr-gold);
  white-space: nowrap;
}

.quiz-save-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-7) 0;
  text-align: left;
}

.quiz-save-card-text p:first-child {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--calc-text);
  margin-bottom: var(--space-1);
}

.quiz-save-card-text p:last-child {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
}

.quiz-btn-retake {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--calc-text-2);
  background: transparent;
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  cursor: pointer;
  margin-top: var(--space-6);
}

.quiz-btn-retake:hover {
  border-color: var(--mr-gold);
  color: var(--mr-gold);
}

/* ── QUIZ: HUB DE QUIZZES ─────────────────────────────────────────── */
.quiz-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 640px;
}

@media (min-width: 768px) {
  .quiz-hub-grid { grid-template-columns: repeat(2, 1fr); }
}

.quiz-hub-card {
  display: flex;
  flex-direction: column;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  transition: border-color .18s, transform .18s;
}

.quiz-hub-card:hover {
  border-color: var(--calc-border-gold);
  transform: translateY(-3px);
}

.quiz-hub-card-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.quiz-hub-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin-bottom: var(--space-2);
}

.quiz-hub-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-2);
  line-height: 1.55;
  margin-bottom: var(--space-4);
  flex: 1;
}

@media (max-width: 480px) {
  .quiz-option { padding: var(--space-4); }
  .quiz-result-card { flex-direction: column; align-items: flex-start; }
  .quiz-save-card { flex-direction: column; align-items: flex-start; }
}

/* ── HUB DE ARTIGOS ───────────────────────────────────────────────── */
.edu-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .edu-article-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .edu-article-grid { grid-template-columns: repeat(3, 1fr); }
}

.edu-article-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.edu-article-card {
  display: flex;
  flex-direction: column;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  transition: transform .18s, border-color .18s;
}

.edu-article-card:hover {
  transform: translateY(-3px);
  border-color: var(--calc-border-gold);
}

.edu-article-card-category {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--mr-gold);
  background: rgba(191, 156, 90, 0.1);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}

.edu-article-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--calc-text);
  margin-bottom: var(--space-2);
}

.edu-article-card-summary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-2);
  line-height: 1.55;
  margin-bottom: var(--space-4);
  flex: 1;
}

.edu-article-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.edu-article-card-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
}

.edu-article-card-cta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mr-gold);
}

/* ── ARTIGO — LEITOR ──────────────────────────────────────────────── */
.edu-article-body {
  max-width: 720px;
  margin: 0 auto;
}

.edu-article-hero {
  margin-bottom: var(--space-8);
}

.edu-article-kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mr-gold);
  margin-bottom: var(--space-3);
}

.edu-article-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--calc-text);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .edu-article-hero h1 { font-size: var(--text-3xl, 2.25rem); }
}

.edu-article-hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--calc-text-2);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.edu-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.edu-article-meta-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
}

.edu-article-meta-tool {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--mr-gold);
  background: rgba(191, 156, 90, 0.1);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.edu-article-section {
  margin-bottom: var(--space-7);
}

.edu-article-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--calc-text);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.edu-article-section h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin: var(--space-5) 0 var(--space-3);
}

.edu-article-section p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--calc-text-2);
  margin-bottom: var(--space-4);
}

.edu-article-section ul,
.edu-article-section ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.edu-article-section li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--calc-text-2);
  margin-bottom: var(--space-2);
}

.edu-article-section strong {
  color: var(--calc-text);
}

.edu-article-section table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.edu-article-section th,
.edu-article-section td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--calc-border);
  color: var(--calc-text-2);
}

.edu-article-section th {
  color: var(--calc-text);
  font-weight: 600;
  border-bottom: 1px solid var(--calc-border-gold);
}

.edu-article-example {
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-left: 3px solid var(--mr-gold);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.edu-article-example p {
  margin-bottom: 0;
}

.edu-article-example p + p {
  margin-top: var(--space-2);
}

.edu-article-cta-box {
  background: var(--calc-surface);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-7) 0;
  text-align: center;
}

.edu-article-cta-box p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text);
  margin-bottom: var(--space-4);
}

.edu-article-summary {
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}

.edu-article-summary p.edu-article-summary-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin-bottom: var(--space-4);
}

.edu-article-summary ul {
  margin: 0;
  padding-left: var(--space-5);
}

.edu-article-summary li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--calc-text-2);
  margin-bottom: var(--space-3);
}

.edu-article-summary li:last-child {
  margin-bottom: 0;
}

.edu-article-related {
  margin-bottom: var(--space-6);
}

.edu-article-related-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  margin-bottom: var(--space-3);
}

.edu-article-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 600px) {
  .edu-article-related-grid { grid-template-columns: repeat(2, 1fr); }
}

.edu-article-related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--calc-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: border-color .15s, transform .15s;
  min-height: 44px;
}

.edu-article-related-card:hover {
  border-color: var(--mr-gold);
  transform: translateY(-2px);
}

/* ── ARTIGO — PLAYER DE ÁUDIO (mais discreto que o dos e-books) ──── */
.edu-article-player {
  margin: var(--space-4) 0 var(--space-6);
}

.edu-article-player .edu-audio-btn {
  font-size: var(--text-sm);
  color: var(--calc-text-2);
  border-color: var(--calc-border);
}

.edu-article-player .edu-audio-btn:hover {
  color: var(--mr-gold);
  border-color: var(--calc-border-gold);
}

/* ── HUB DE TRILHAS ───────────────────────────────────────────────── */
.trilha-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .trilha-grid { grid-template-columns: repeat(3, 1fr); }
}

.trilha-card {
  display: flex;
  flex-direction: column;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform .18s, border-color .18s;
}

.trilha-card:hover {
  transform: translateY(-3px);
  border-color: var(--calc-border-gold);
}

.trilha-card-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.trilha-card-for {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--mr-gold);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: var(--space-2);
}

.trilha-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin-bottom: var(--space-2);
}

.trilha-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-2);
  line-height: 1.55;
  margin-bottom: var(--space-4);
  flex: 1;
}

.trilha-card-meta {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.trilha-card-meta span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
}

.trilha-card-status {
  margin-bottom: var(--space-4);
}

/* ── TRILHA — PROGRESSO ───────────────────────────────────────────── */
.trilha-progress {
  margin: var(--space-6) 0 var(--space-8);
  max-width: 720px;
}

.trilha-progress-bar {
  height: 8px;
  background: var(--calc-surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.trilha-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mr-gold-dim), var(--mr-gold));
  border-radius: var(--radius-pill);
  transition: width .3s ease;
  width: 0%;
}

.trilha-progress-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
}

/* ── TRILHA — PASSOS ──────────────────────────────────────────────── */
.trilha-steps {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.trilha-step {
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.trilha-step-type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

.trilha-step-type--leitura {
  color: var(--calc-neutral);
  background: rgba(93, 173, 226, 0.12);
}

.trilha-step-type--pratica {
  color: var(--calc-positive);
  background: rgba(111, 174, 140, 0.12);
}

.trilha-step-type--reflexao {
  color: var(--mr-gold);
  background: rgba(191, 156, 90, 0.12);
}

.trilha-step-type--acao {
  color: #4A8562;
  background: rgba(74, 133, 98, 0.14);
}

/* Cor propria (violeta) para passos de desafio/game ativos — quando o
   passo ainda e um slot reservado, .trilha-step--game aplica opacity:.55
   ao card inteiro (badge incluso), entao o mesmo tom aqui fica visto
   "apagado" ali e vibrante quando o game existe de fato, sem precisar
   de uma segunda variante de cor por estado. */
.trilha-step-type--desafio {
  color: #9B8AC4;
  background: rgba(155, 138, 196, 0.12);
}

.trilha-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin-bottom: var(--space-3);
}

.trilha-step-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.trilha-step-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mr-gold);
  text-decoration: none;
  margin-bottom: var(--space-5);
}

.trilha-step-cta:hover {
  color: var(--mr-gold-light);
}

.trilha-step-reflection {
  display: block;
  width: 100%;
  min-height: 88px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text);
  background: var(--calc-surface-2);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  resize: vertical;
}

.trilha-step-reflection::placeholder {
  color: var(--calc-text-3);
}

.trilha-step-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--calc-text-2);
  background: transparent;
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.trilha-step-btn:hover {
  border-color: var(--mr-gold);
  color: var(--mr-gold);
}

.trilha-step-btn.step-done {
  color: var(--calc-positive);
  border-color: rgba(111, 174, 140, 0.4);
  background: rgba(111, 174, 140, 0.08);
  cursor: default;
}

.trilha-step--game {
  opacity: .55;
}

.trilha-step-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--calc-text-3);
  background: var(--calc-surface-2);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}

.trilha-step--game .trilha-step-btn {
  cursor: default;
  pointer-events: none;
}

/* ── TRILHA — CONCLUSÃO ───────────────────────────────────────────── */
.trilha-conclusao {
  background: linear-gradient(160deg, rgba(191,156,90,0.12), var(--calc-surface));
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  margin: var(--space-8) 0;
  max-width: 720px;
}

.trilha-conclusao-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--calc-text);
  margin-bottom: var(--space-3);
}

.trilha-conclusao-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto var(--space-6);
}

.trilha-conclusao-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.trilha-conclusao-secondary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--mr-gold);
  text-decoration: none;
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
}

.trilha-conclusao-secondary[hidden] {
  display: none;
}

.trilha-conclusao-secondary:hover {
  border-color: var(--mr-gold);
}

@media (max-width: 480px) {
  .trilha-conclusao-actions { flex-direction: column; }
}

/* ── HUB DE GAMES ─────────────────────────────────────────────────── */
.game-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .game-hub-grid { grid-template-columns: repeat(2, 1fr); }
}

.game-hub-card {
  display: flex;
  flex-direction: column;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform .18s, border-color .18s;
}

.game-hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--calc-border-gold);
}

.game-hub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.game-hub-card-icon {
  font-size: 32px;
  line-height: 1;
}

.game-hub-card-trilha {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--mr-gold);
  background: rgba(191, 156, 90, 0.1);
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.game-hub-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin-bottom: var(--space-2);
}

.game-hub-card-difficulty {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
  margin-bottom: var(--space-3);
}

.game-hub-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-2);
  line-height: 1.55;
  margin-bottom: var(--space-4);
  flex: 1;
}

.game-hub-card-status {
  margin-bottom: var(--space-4);
}

/* ── ARTIGOS: CTA DO FINANCE ──────────────────────────────────────── */
.edu-article-finance-cta {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: linear-gradient(135deg, rgba(191, 156, 90, 0.06), rgba(191, 156, 90, 0.02));
  border: 1px solid var(--calc-border-gold);
  border-radius: var(--radius-lg);
  text-align: center;
}

.edu-article-finance-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--calc-text);
  margin-bottom: var(--space-3);
}

.edu-article-finance-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--calc-text-2);
  margin-bottom: var(--space-5);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.edu-article-finance-btn {
  display: inline-flex;
  align-items: center;
  background: var(--mr-gold);
  color: var(--calc-bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  min-height: 44px;
  transition: opacity 0.15s;
}

.edu-article-finance-btn:hover {
  opacity: 0.88;
}

/* ── CONTEÚDO RELACIONADO (e-books e artigos) ────────────────────── */
.edu-related {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--calc-border);
}

.edu-related-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--calc-text-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-4);
}

.edu-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .edu-related-grid {
    grid-template-columns: 1fr;
  }
}

.edu-related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--calc-text);
  transition: border-color 0.15s;
}

.edu-related-card:hover {
  border-color: var(--mr-gold);
}

.edu-related-type {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--calc-text-3);
}

.edu-related-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--calc-text);
  line-height: 1.4;
}