/* components.css — componentes GO: openers E1-E8, cards adaptativos, callouts,
   tabelas, fluxograma/escada, quiz gold, Tabelão, figuras, HUB, cor semântica. */

/* ============ Cor semântica das palavras-chave (§12) ============ */
.kw-red   { color: var(--kw-red);   font-weight: 700; }
.kw-amber { color: var(--kw-amber); font-weight: 700; }
.kw-green { color: var(--kw-green); font-weight: 700; }
.kw-white { color: var(--kw-white); font-weight: 700; }

/* ============ Estrutura de página (hash-routed sections) ============ */
.page { display: none; padding-top: var(--sp-7); }
.page.is-active { display: block; animation: pageIn var(--dur-slow) var(--ease-lux); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page__eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rose); margin-bottom: var(--sp-2); }
.page__title { font-size: var(--fs-3xl); line-height: 1.08; margin-bottom: var(--sp-4); }
.page__lead { font-size: var(--fs-lg); color: var(--ink-90); max-width: var(--container-text); }
.topic-h { font-size: var(--fs-lg); color: var(--ink-100); margin: var(--sp-6) 0 var(--sp-3);
  padding-left: var(--sp-3); border-left: 3px solid var(--rose); }

/* chips de tópico (perceptíveis, LANDAM no tema) */
.chipset { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }
.chip--topic { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-pill); background: var(--wine-soft); color: var(--rose-hi);
  border: 1px solid var(--rose-soft); }
.chip--topic::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }

/* ============ Openers E1–E8 (componente dedicado por estratégia) ============ */
.opener { margin: var(--sp-4) 0 var(--sp-6); border-radius: var(--r-lg); }

/* E1 — Pergunta central */
.opener--question { text-align: center; padding: var(--sp-6) var(--sp-5);
  background: radial-gradient(120% 120% at 50% 0%, var(--wine-soft), transparent 70%);
  border: 1px solid var(--border-soft); }
.opener--question .opener__q { font-family: var(--font-serif); font-size: var(--fs-2xl); color: var(--ink-100);
  line-height: 1.3; max-width: 34ch; margin: 0 auto; }
.opener--question .opener__mark { display: block; font-size: 2.4rem; color: var(--rose); margin-bottom: var(--sp-2); line-height: 1; }

/* E3 — Caso clínico em abertura (card prontuário) */
.opener--case { background: var(--bg-glass); border: 1px solid var(--border-mid); border-left: 4px solid var(--wine);
  padding: var(--sp-5); box-shadow: var(--shadow-md); }
.opener--case .opener__tag { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--rose); margin-bottom: var(--sp-3); display: inline-block; }
.opener--case .opener__case-body { font-size: var(--fs-lg); color: var(--ink-90); text-align: justify; }
.opener--case .opener__case-body strong { color: var(--ink-100); }

/* E4 — Achado típico / pegadinha */
.opener--trap { background: var(--kw-amber-dim); border: 1px solid var(--kw-amber);
  border-radius: var(--r-lg); padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: flex-start; }
.opener--trap .opener__icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.opener--trap .opener__trap-body { font-size: var(--fs-lg); color: var(--ink-90); text-align: justify; }

/* E5 — Meta + checklist */
.opener--checklist { background: var(--bg-glass); border: 1px solid var(--border-mid); padding: var(--sp-5); }
.opener--checklist h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.opener--checklist ul { list-style: none; padding: 0; margin: 0; }
/* li como BLOCO com marcador absoluto: com display:flex cada <b>/<strong> inline do texto
   virava um flex-item separado que encolhia e quebrava em colunas (visível no mobile). */
.opener--checklist li { position: relative; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); color: var(--ink-90); }
.opener--checklist li::before { content: "○"; position: absolute; left: 0; top: var(--sp-2); color: var(--rose); font-weight: 700; }
.opener--checklist li.done::before { content: "●"; }

/* E6 — Mnemônico-âncora primeiro */
.opener--mnemonic { background: radial-gradient(140% 140% at 0% 0%, var(--kw-green-dim), transparent 60%);
  border: 1px solid var(--kw-green); padding: var(--sp-6) var(--sp-5); text-align: center; }
.opener--mnemonic .opener__phrase { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-2xl);
  color: var(--kw-green); line-height: 1.3; }

/* E7 — Comparação chocante (split) */
.opener--vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); align-items: stretch; }
.opener--vs .vs-card { padding: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--border-mid);
  background: var(--bg-glass); text-align: justify; }
.opener--vs .vs-card.good { border-color: var(--kw-green); background: var(--kw-green-dim); }
.opener--vs .vs-card.bad  { border-color: var(--kw-red);   background: var(--kw-red-dim); }
.opener--vs .vs-sep { display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700;
  color: var(--rose); font-size: var(--fs-xl); }
@media (max-width: 620px) { .opener--vs { grid-template-columns: 1fr; } .opener--vs .vs-sep { padding: var(--sp-1); } }

/* E8 — Erro comum desmontado */
.opener--bust { background: var(--bg-glass); border: 1px solid var(--border-mid); padding: var(--sp-5); }
.opener--bust .bust-wrong { color: var(--ink-70); text-decoration: line-through; text-decoration-color: var(--kw-red);
  font-size: var(--fs-lg); display: block; margin-bottom: var(--sp-2); }
.opener--bust .bust-right { color: var(--ink-100); font-size: var(--fs-lg); text-align: justify; }

/* ============ Cards adaptativos por campo (§19.5) ============ */
.card { background: var(--bg-glass); border: 1px solid var(--border-mid); border-radius: var(--r-md);
  padding: var(--sp-5); margin: var(--sp-5) 0; box-shadow: var(--shadow-sm); }
.card__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--rose); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }

.dont-confuse { border-left: 4px solid var(--rose); }
.dont-confuse .dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-2); }
.dont-confuse .dc-side { padding: var(--sp-4); border-radius: var(--r-sm); background: var(--bg-1); border: 1px solid var(--border-soft); }
.dont-confuse .dc-side h5 { color: var(--rose-hi); margin-bottom: var(--sp-2); }
.dont-confuse .dc-vs { text-align: center; font-weight: 700; color: var(--ink-50); }
/* !important vence o style inline grid-template-columns (algumas págs sobrescrevem p/ 3 col
   no desktop); no mobile empilha sempre, senão colunas minúsculas / estouro a 320px. */
@media (max-width: 560px) { .dont-confuse .dc-grid { grid-template-columns: 1fr !important; } }

.board-wants { border-left: 4px solid var(--wine); background: var(--wine-soft); }
.board-wants .card__label::before { content: "◎"; color: var(--wine); }
.trap { border-left: 4px solid var(--kw-amber); background: var(--kw-amber-dim); }
.finding { border-left: 4px solid var(--rose); }
.mnemonic-card { border-left: 4px solid var(--kw-green); background: var(--kw-green-dim); text-align: center; }
.mnemonic-card .mn-phrase { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-xl); color: var(--kw-green); }
.op-summary { border-left: 4px solid var(--rose); background: var(--bg-glass-strong); }
.op-summary p { margin: 0; text-align: justify; text-indent: 0; }

/* Revisão ativa */
.active-review { border-left: 4px solid var(--rose-hi); }
.active-review ol { margin: 0; padding-left: var(--sp-5); }
.active-review li { font-family: var(--font-serif); font-style: italic; color: var(--ink-90); }

/* caixa de cor (digressão / anedota) */
.color-box { background: var(--bg-1); border: 1px dashed var(--border-mid); border-radius: var(--r-md);
  padding: var(--sp-4); margin: var(--sp-5) 0; font-size: var(--fs-sm); color: var(--ink-70); font-style: italic; }
.color-box strong { color: var(--ink-90); font-style: normal; }

/* Card de raciocínio encadeado (P12) */
.chain { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; }
.chain__step { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: var(--r-sm); }
.chain__step .n { font-family: var(--font-mono); color: var(--rose); font-weight: 700; }
.chain__arrow { text-align: center; color: var(--rose); font-size: 1.1rem; }

/* ============ Callouts PVE / ENR (decisão pendente / enriquecimento) ============ */
.callout-pve { border: 2px solid var(--kw-amber); background: var(--kw-amber-dim); border-radius: var(--r-md);
  padding: var(--sp-5); margin: var(--sp-5) 0; }
.callout-pve .pve-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-0); background: var(--kw-amber);
  padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: var(--sp-3); }
.callout-pve .pve-values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
.callout-pve .pve-val { text-align: center; padding: var(--sp-4); background: var(--bg-1); border: 1px solid var(--kw-amber); border-radius: var(--r-sm); }
.callout-pve .pve-val .big { display: block; font-family: var(--font-mono); font-size: var(--fs-2xl); color: var(--kw-amber); font-weight: 700; }
.callout-pve .pve-val .src { font-size: var(--fs-xs); color: var(--ink-70); }
@media (max-width: 520px) { .callout-pve .pve-values { grid-template-columns: 1fr; } }

.callout-enr { border: 1px solid var(--wine); background: var(--wine-soft); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; }
.callout-enr .enr-tag { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--rose);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--sp-2); display: block; }
.callout-enr p { text-align: justify; text-indent: 0; margin-bottom: 0; }

/* ============ Tabelas (comparação / 2×2 / critérios) ============ */
.table-wrap { overflow-x: auto; margin: var(--sp-5) 0; border-radius: var(--r-md); border: 1px solid var(--border-mid); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px; }
table.data caption { text-align: left; font-weight: 700; color: var(--rose); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
table.data th, table.data td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.data thead th { background: var(--wine-soft); color: var(--ink-100); position: sticky; top: 0; }
table.data tbody th { background: var(--bg-1); color: var(--rose-hi); font-weight: 600; white-space: nowrap; }
table.data tr:last-child td, table.data tr:last-child th { border-bottom: 0; }
table.data td.hl-red { color: var(--kw-red); font-weight: 600; }
table.data td.hl-green { color: var(--kw-green); font-weight: 600; }
table.data td.hl-amber { color: var(--kw-amber); font-weight: 600; }

/* ============ Fluxograma / escada (nós + setas) ============ */
.flow { display: flex; flex-direction: column; gap: 0; margin: var(--sp-5) 0; }
.flow__node { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--border-mid);
  background: var(--bg-glass); position: relative; }
.flow__node.q { border-color: var(--rose); background: var(--wine-soft); font-weight: 600; }
.flow__node.good { border-color: var(--kw-green); }
.flow__node.bad  { border-color: var(--kw-red); }
.flow__node.amber { border-color: var(--kw-amber); }
.flow__branch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.flow__conn { text-align: center; color: var(--rose); font-size: 1.2rem; padding: var(--sp-1) 0; }
.flow__lbl { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-70); }
@media (max-width: 560px) { .flow__branch { grid-template-columns: 1fr; } }

.ladder { display: flex; flex-direction: column-reverse; gap: var(--sp-2); margin: var(--sp-5) 0; }
.ladder__step { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--border-mid); }
.ladder__step.cat1 { border-left: 5px solid var(--kw-green); background: var(--kw-green-dim); margin-right: 0; }
.ladder__step.cat2 { border-left: 5px solid var(--kw-amber); background: var(--kw-amber-dim); margin-right: 6%; }
.ladder__step.cat3 { border-left: 5px solid var(--kw-red); background: var(--kw-red-dim); margin-right: 12%; }
.ladder__step h5 { margin-bottom: var(--sp-1); }

/* ============ Figuras: SVG interativo (ilustração autoral) ============ */
figure.fig { margin: var(--sp-6) 0; }
figure.fig .fig__frame { background: var(--bg-1); border: 1px solid var(--border-mid); border-radius: var(--r-lg);
  padding: var(--sp-3); box-shadow: var(--shadow-md); overflow: hidden; }
figure.fig .fig__frame svg { width: 100%; height: auto; border-radius: var(--r-sm); }
figure.fig figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-70); }
figure.fig figcaption .fig__name { color: var(--rose-hi); font-weight: 700; font-family: var(--font-serif); }
figure.fig figcaption .fig__explain { display: block; margin-top: var(--sp-2); color: var(--ink-90); text-align: justify; }
figure.fig.heroi .fig__frame { border-color: var(--rose); box-shadow: var(--glow-rose); }
.fig__hint { font-size: var(--fs-xs); color: var(--rose); font-family: var(--font-mono); margin-top: var(--sp-2); }

/* ============ Figuras: imagem real ancorada ============ */
figure.real { margin: var(--sp-6) 0; }
figure.real .real__frame { background: var(--bg-1); border: 1px solid var(--border-mid); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md); }
figure.real .real__frame img { width: 100%; height: auto; display: block; background: var(--bg-2); }
figure.real .real__cap { padding: var(--sp-4) var(--sp-5); }
figure.real .real__cap .real__name { color: var(--rose-hi); font-weight: 700; font-family: var(--font-serif); display: block; margin-bottom: var(--sp-2); }
figure.real .real__cap .real__lead { text-align: justify; color: var(--ink-90); margin-bottom: var(--sp-2); }
figure.real .real__cap .real__attr { font-size: var(--fs-xs); color: var(--ink-70); border-top: 1px solid var(--border-soft); padding-top: var(--sp-2); margin-top: var(--sp-2); }
figure.real .real__cap .real__attr a { color: var(--ink-70); }
/* swatch (polo claro/fisiológico do contraste do mecônio) */
.swatch-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.swatch { border-radius: var(--r-md); border: 1px solid var(--border-mid); overflow: hidden; display: flex; flex-direction: column; }
.swatch .sw-chip { height: 120px; }
.swatch .sw-chip.clear { background: linear-gradient(135deg, #eef6f2, #dcefe7); }
.swatch .sw-lbl { padding: var(--sp-3); font-size: var(--fs-sm); }
.swatch.good .sw-lbl { color: var(--kw-green); }
@media (max-width: 560px) { .swatch-pair { grid-template-columns: 1fr; } }

/* painel composto (R-15 ressuscitação rotulada) */
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.panel-grid .real__frame img { height: 180px; object-fit: cover; }
.panel-cell { display: flex; flex-direction: column; min-width: 0; }
.dle-schema { min-width: 0; }
.panel-cell .pc-label { font-size: var(--fs-sm); padding: var(--sp-3); color: var(--ink-90); }
.panel-cell .pc-label b { color: var(--kw-green); }
.dle-schema { display: grid; place-items: center; text-align: center; background: var(--kw-green-dim);
  border: 1px solid var(--kw-green); border-radius: var(--r-lg); padding: var(--sp-5); }
.dle-schema .dle-ic { font-size: 2rem; }
@media (max-width: 620px) { .panel-grid { grid-template-columns: 1fr !important; } }

/* ============ Quiz gold (explica TODAS as alternativas) ============ */
.quiz { margin: var(--sp-7) 0 var(--sp-4); background: var(--bg-glass); border: 1px solid var(--border-mid);
  border-radius: var(--r-lg); padding: var(--sp-5); }
.quiz > h3 { display: flex; align-items: center; gap: var(--sp-2); color: var(--rose); font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.quiz > h3::before { content: "✎"; }
.quiz__q { padding: var(--sp-4) 0; border-top: 1px solid var(--border-soft); }
.quiz__q:first-of-type { border-top: 0; }
.quiz__stem { font-weight: 600; color: var(--ink-100); margin-bottom: var(--sp-3); text-align: justify; text-indent: 0; }
.quiz__alts { display: flex; flex-direction: column; gap: var(--sp-2); }
.quiz__alt { text-align: left; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-mid); border-radius: var(--r-sm);
  background: var(--bg-1); color: var(--ink-90); transition: border-color var(--dur-fast), background var(--dur-fast); display: flex; gap: var(--sp-3); }
.quiz__alt .letter { font-family: var(--font-mono); font-weight: 700; color: var(--rose); flex-shrink: 0; }
.quiz__alt:hover:not([disabled]) { border-color: var(--rose); background: var(--bg-2); }
.quiz__alt[aria-checked="true"] { border-color: var(--rose); }
.quiz__alt.correct { border-color: var(--kw-green); background: var(--kw-green-dim); }
.quiz__alt.correct .letter { color: var(--kw-green); }
.quiz__alt.wrong { border-color: var(--kw-red); background: var(--kw-red-dim); }
.quiz__alt.wrong .letter { color: var(--kw-red); }
.quiz__fb { margin-top: var(--sp-3); display: none; }
.quiz__fb.show { display: block; animation: pageIn var(--dur-mid) var(--ease-out); }
.quiz__verdict { font-weight: 700; margin-bottom: var(--sp-2); }
.quiz__verdict.ok { color: var(--kw-green); }
.quiz__verdict.no { color: var(--kw-red); }
.quiz__expl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.quiz__expl li { font-size: var(--fs-sm); color: var(--ink-90); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--bg-1); border-left: 3px solid var(--border-mid); text-align: justify; }
.quiz__expl li.is-correct { border-left-color: var(--kw-green); }
.quiz__expl li.is-wrong { border-left-color: var(--kw-red); }
.quiz__expl li .why { color: var(--ink-70); font-style: italic; }
.badge-elaborada { display: inline-block; font-size: var(--fs-xs); color: var(--kw-amber); border: 1px solid var(--kw-amber);
  border-radius: var(--r-pill); padding: 2px 8px; margin-left: var(--sp-2); }

/* ============ Tabelão da Vitalidade Fetal (objeto persistente) ============ */
.tabelao { margin: var(--sp-6) 0; border: 1px solid var(--rose); border-radius: var(--r-lg); overflow: hidden; }
.tabelao__head { padding: var(--sp-4) var(--sp-5); background: var(--wine-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tabelao__head h3 { margin: 0; color: var(--rose); font-size: var(--fs-lg); }
.tabelao__meta { font-size: var(--fs-xs); color: var(--ink-70); font-family: var(--font-mono); }
.tabelao__rows { list-style: none; margin: 0; padding: 0; }
.tabelao__row { display: grid; grid-template-columns: 200px 1fr auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-soft); }
.tabelao__row .t-name { font-weight: 600; color: var(--ink-100); }
.tabelao__row .t-val { color: var(--ink-90); font-size: var(--fs-sm); text-align: justify; text-indent: 0; }
.tabelao__row .t-state { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.tabelao__row.filled .t-state { background: var(--kw-green-dim); color: var(--kw-green); border: 1px solid var(--kw-green); }
.tabelao__row.pending .t-state { background: var(--bg-1); color: var(--ink-70); border: 1px solid var(--border-mid); }
.tabelao__row.linkback .t-state { background: var(--wine-soft); color: var(--rose-hi); border: 1px solid var(--rose); }
@media (max-width: 620px) { .tabelao__row { grid-template-columns: 1fr; gap: var(--sp-1); } .tabelao__row .t-state { justify-self: start; } }

/* ============ Navegação inter-páginas ============ */
.page-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid var(--border-soft); }
.page-nav a, .page-nav button { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-1); color: var(--ink-90);
  border-bottom: 1px solid var(--border-mid); min-width: 130px; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.page-nav a:hover, .page-nav button:hover:not([disabled]) { border-color: var(--rose); transform: translateY(-1px); color: var(--ink-100); }
.page-nav .nav-dir { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rose); }
.page-nav .nav-ttl { font-size: var(--fs-sm); font-weight: 600; }
.page-nav .next { text-align: right; margin-left: auto; }
.page-nav [disabled] { opacity: 0.4; }

.conn { margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--rose);
  background: var(--wine-soft); border-radius: 0 var(--r-md) var(--r-md) 0; }
.conn__lbl { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--rose); margin-bottom: var(--sp-2); }
.conn p { margin: 0; text-align: justify; text-indent: 0; color: var(--ink-90); }

/* ============ HUB ============ */
.hub-hero { padding: var(--sp-8) 0 var(--sp-6); }
.hub-hero__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--sp-6); align-items: center; }
@media (max-width: 820px) { .hub-hero__grid { grid-template-columns: 1fr; } }
.hub-hero__eyebrow { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); }
.hub-hero__title { font-size: var(--fs-display); line-height: 1.02; margin: var(--sp-3) 0; }
.hub-hero__sub { font-size: var(--fs-lg); color: var(--ink-90); max-width: 52ch; }
.stat-panel { background: var(--bg-glass); border: 1px solid var(--rose); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--glow-rose); }
.stat-panel h4 { color: var(--rose); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-4); }
.stat-panel .stat { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-2) 0; border-top: 1px solid var(--border-soft); }
.stat-panel .stat:first-of-type { border-top: 0; }
.stat-panel .stat .num { font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--ink-100); font-weight: 700; }
.stat-panel .stat .lbl { font-size: var(--fs-sm); color: var(--ink-70); }

.aula-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-8); }
.aula-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg);
  border: 1px solid var(--border-mid); background: var(--bg-glass); text-decoration: none; color: var(--ink-90);
  border-bottom: 1px solid var(--border-mid); transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
.aula-card.live:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: var(--glow-rose); color: var(--ink-100); }
.aula-card__n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--rose); letter-spacing: 0.1em; }
.aula-card__t { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-100); line-height: 1.2; }
.aula-card__d { font-size: var(--fs-sm); color: var(--ink-70); text-align: justify; text-indent: 0; }
.aula-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.aula-card__status { font-size: var(--fs-xs); font-family: var(--font-mono); padding: 3px 10px; border-radius: var(--r-pill); }
.aula-card.live .aula-card__status { color: var(--kw-green); border: 1px solid var(--kw-green); background: var(--kw-green-dim); }
.aula-card.soon { opacity: 0.62; cursor: not-allowed; }
.aula-card.soon .aula-card__status { color: var(--ink-50); border: 1px solid var(--border-mid); }

/* banner mantra (rodapé de página, decorativo) */
.mantra { position: sticky; bottom: 0; z-index: var(--z-banner); pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg-glass-strong) 26%);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--rose-soft);
  padding: var(--sp-3) var(--reading-pad) max(var(--sp-3), env(safe-area-inset-bottom)); }
.mantra__inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-serif); color: var(--ink-90); font-size: var(--fs-sm); }
.mantra__inner strong { color: var(--rose); }

/* ── SELO DE EXECUTOR ──────────────────────────────────────────────────────
   Ordem dele, 02/08: "quero o nome de quem executou cada aula, pois
   posteriormente farei teste de ESTABILIDADE e não só de variedade".
   O hub deixa de ser vitrine e vira bancada: dá para ler consistência de um
   motor batendo o olho na trilha inteira, sem abrir log nem git. */
.exec-tag{
  display:inline-flex; align-items:center; gap:.36em;
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:.68rem; letter-spacing:.04em; line-height:1;
  padding:.34em .6em; border-radius:6px;
  border:1px solid currentColor; opacity:.82;
  white-space:nowrap;
}
.exec-tag::before{ content:"▸"; opacity:.6; font-size:.9em }
.exec-tag--claude   { color:#C9A6E9 }
.exec-tag--grok     { color:#8FD3F4 }
.exec-tag--glm      { color:#7EE0C0 }
.exec-tag--minimax  { color:#F5B971 }
.exec-tag--kimi     { color:#F291B8 }
.exec-tag--deepseek { color:#9FB4F2 }
.exec-tag--copilot  { color:#B8C4D4 }
.aula-card__foot{ flex-wrap:wrap; gap:.5em }

/* bancada de versões — mesma aula, executores diferentes, lado a lado */
.bancada-nota{
  max-width:74ch; color:var(--ink-70);
  border-left:2px solid var(--rose); padding-left:14px; margin:-4px 0 18px;
}