/* aula.css — Aula 06 "Carência de vitaminas" (Pediatria Bauer · BÔNUS)
   Camada por-aula: NÃO toca tokens/base/components globais.
   Cobre: wrappers de SVG inline (S-01..S-13 + 2 figuras-herói self-contained),
   figure.med + tarja de privacidade, nota-banca + nota-valor, tabelas responsivas
   (.cmp, grid no mobile — sem scroll horizontal), find-list, e a DECLARAÇÃO dos tokens
   que os SVGs desta aula consomem via var(--token,#fallback) — para seguirem o tema
   (claro + escuro) em vez de travar no fallback. Marcador data-svg-tokenized preservado.
   Eixo cromático da aula: lipossolúvel ADEK (sky/teal) × hidrossolúvel B+C (coral) ×
   pegadinha/diferencial (âmbar) × conduta/profilaxia (verde). */

/* =========================================================================
   TOKENS DOS SVGs — declarados aqui (valores DARK, espelhando o fallback inline
   de cada SVG) para que a ilustração siga a paleta da aula. Namespeados vit06-*
   onde o SVG pede; estruturais (bone/skin/sun/leaf/card) usados pelos pisos.
   ========================================================================= */
:root {
  /* superfícies e tinta auxiliares dos SVGs */
  --ax-shadow: #000000;
  --card-bot: #102539;
  --card-top: #163048;
  --shadow-deep: #020812;
  --ink-block: rgba(124,139,156,0.06);
  --ink-40: #5d6878;
  --ink-60: #94a3b3;
  --ink-80: #c4d2e0;

  /* acentos derivados da casa que os SVGs pedem por nome */
  --coral-70: #ff8470;
  --coral-90: #ffc7bb;
  --coral-soft: #e08a72;
  --teal-15: #0e3f68;
  --teal-70: #8ad2f7;
  --ok-green-bot: #0e3a2a;
  --ok-green-top: #16513a;
  --err-dim: rgba(244,113,90,0.13);
  --hl-bad: var(--err-red, #f4715a);
  --warn-amber-bg: #3a2c10;
  --warn-top: #5a4416;
  --warn-bot: #3e2f0f;

  /* materiais ilustrativos (osso/cartilagem/pele/sol/folha) — pisos clínicos */
  --bone-top: #f3ead7;   --bone-hi: #fffaf0;   --bone-mid: #dcc9a3;
  --bone-bot: #b8a079;   --bone-edge: #9c8862;
  --bone-rib-top: #e9dcc1; --bone-rib-bot: #c2ad84;
  --cart: #bcd4dc;       --cart-edge: #8fb3bd;
  --skin-top: #ffd9c4;   --skin-bot: #f0a892;  --skin-deep: #8a4d3a;
  --sun-core: #ffe49c;   --sun-mid: #ffc24d;   --sun-edge: #f7a32b; --sun-glow: #ffd27a;
  --leaf-top: #5fc98a;   --leaf-bot: #2f9d68;  --leaf-vein: #1f7a4e;
  --mat-amber: #caa24a;  --mat-brown: #7a5326;

  /* --- vit06: eixo lipo/hidro + heróis (H2 eixo PTH · H1 tabelão) --- */
  --vit06-ax-04101c: #04101c;
  --vit06-lipo-40: #ffd98a;  --vit06-lipo-60: #f2b94e;  --vit06-lipo-ink: #8ad2f7;  --vit06-lipo-line: #62bdf3;
  --vit06-hydro-40: #f6a89c; --vit06-hydro-60: #e2685c; --vit06-hidro-ink: #ff9d8a; --vit06-hidro-line: #f4715a;
  --vit06-sky-40: #8fd0f7;   --vit06-sky-60: #3a9fdd;
  --vit06-teal-40: #76e3c7;  --vit06-teal-60: #1fae8e;
  --vit06-good-60: #46c08a;  --vit06-bad-60: #f4715a;  --vit06-warn-60: #e0a32a;
  --vit06-flow-60: #5fb8e8;
  --vit06-body: rgba(120,175,225,0.06);
  --vit06-liver-40: #c08a6a; --vit06-liver-60: #97603f;
  --vit06-para-40: #b7a0f2;  --vit06-para-60: #8a6ce0;
  --vit06-blood-40: #f4a8a0; --vit06-blood-60: #e26d63;
  --vit06-bone-40: #e6edf5;  --vit06-bone-60: #b8c6d6;
  --vit06-thyroid: rgba(255,255,255,0.12);

  /* --- vit06 olho (S-03 hipovitaminose A) --- */
  --vit06-eye-sclera: #e2ebf2; --vit06-eye-sclera-hi: #f3f7fb; --vit06-eye-sclera-lo: #c2d2de;
  --vit06-eye-rim: #9fb2c0;    --vit06-pupil: #0a1622;        --vit06-caruncle: #f3c9b6;
  --vit06-lid: #8b6a5c;        --vit06-glint: #ffffff;
  --vit06-bitot: #eef2ee;      --vit06-bitot-edge: #cfd9cf;   --vit06-bitot-foam: #fbfdfb;
  --vit06-dry: #cdd6cc;        --vit06-dry-hi: #1d5a83;       --vit06-dry-lo: #103a57;
  --vit06-dry-line: #a9b6a8;   --vit06-dry-field: rgba(35,137,209,0.07);
  --vit06-cornea-haze: #dfe9d8; --vit06-ulcer: #d7ddca;       --vit06-melt: #e9ede2;  --vit06-vessel: #c98f86;
  --vit06-edema-hi: #ffb3a4;
  --vit06-wet-hi: #d65846;     --vit06-wet-lo: #8f3526;       --vit06-wet-field: rgba(232,83,60,0.07);

  /* --- vit06 S-02 (4 causas, P1) --- */
  --vit06s02-bg: #0B1A2C;  --vit06s02-bg-hi: #12243A;  --vit06s02-bg-lo: #07121F;
  --vit06s02-tx: #E5EEF6;  --vit06s02-tx-dim: #93A6B8; --vit06s02-tip-bg: #0E1B2A; --vit06s02-shadow: #000;
  --vit06s02-sky: #38BDF8; --vit06s02-sky-hi: #7DD3FC; --vit06s02-sky-soft: #3E7BA8; --vit06s02-sky-soft-hi: #5C9FCF;
  --vit06s02-teal: #2DD4BF; --vit06s02-teal-hi: #5EEAD4; --vit06s02-teal-lo: #0F8B7E;
  --vit06s02-core-tx: #052B27; --vit06s02-core-tx-dim: #0A3E38;
  --vit06s02-icon-on: #082235; --vit06s02-on-tx: #062033; --vit06s02-on-tx-dim: #0B3350;

  /* --- vit06 S-06 (cascata K 2-7-9-10, P6) --- */
  --vit06-s06-bg: #0B1B2E;  --vit06-s06-bg-hi: #132B44; --vit06-s06-bg-lo: #07111F;
  --vit06-s06-ink: #E6EEF7; --vit06-s06-ink-dim: #9FB4C9; --vit06-s06-ink-faint: #7C90A6;
  --vit06-s06-flow: #38BDF8; --vit06-s06-good: #2DD4BF; --vit06-s06-good-hi: #5EEAD4; --vit06-s06-on-good: #04201D;
  --vit06-s06-bad: #FB7185; --vit06-s06-bad-bg: #3A1822;
  --vit06-s06-mute: #2C3A4E; --vit06-s06-mute-line: #46566B; --vit06-s06-mute-tx: #748397;
  --vit06-s06-panel: rgba(56,189,248,0.05); --vit06-s06-stroke: rgba(56,189,248,0.18); --vit06-s06-tip-bg: #0E1F31;

  /* --- vit06 S-12 (3Ds pelagra, P11) --- */
  --vit06-s12-bg: #1A0F16;  --vit06-s12-bg-hi: #2A1420; --vit06-s12-bg-lo: #120A10;
  --vit06-s12-ink: #F4E9EC; --vit06-s12-ink-dim: #D2A9B3; --vit06-s12-ink-faint: #A07D87;
  --vit06-s12-coral: #FB7185; --vit06-s12-coral-hi: #FDA4AF;
  --vit06-s12-card-bg: rgba(251,113,133,0.07); --vit06-s12-card-bg-hi: rgba(251,113,133,0.16); --vit06-s12-card-stroke: rgba(251,113,133,0.32);
  --vit06-s12-skin: #F9C8A4; --vit06-s12-skin-line: #C98A66;
  --vit06-s12-gut: rgba(251,113,133,0.14); --vit06-s12-gut-line: #FDA4AF;
  --vit06-s12-brain: rgba(251,113,133,0.12);
  --vit06-s12-sun: #F59E0B; --vit06-s12-sun-hi: #FCD34D;
  --vit06-s12-warn: #F59E0B; --vit06-s12-warn-bg: #3A2A0E;
  --vit06-s12-bad: #F43F5E; --vit06-s12-bad-bg: #3A1622; --vit06-s12-tip-bg: #2A1620;

  /* --- vit06 S-13 (pares/rosários, P12) --- */
  --vit06s13-bead-hi: #f4ede3; --vit06s13-bead-mid: #d9cbb6; --vit06s13-bead-lo: #b09a7c;
}

/* === Tema light: superfícies internas dos SVGs acompanham o "céu claro" ===
   Sobrepõe só estruturais/tinta para legibilidade; os hues semânticos
   (coral/sky/teal/sun/leaf/osso) leem bem nos dois temas. */
:root[data-theme="light"] {
  --card-top: #ffffff; --card-bot: #f1f8ff;
  --shadow-deep: rgba(15,40,60,0.16);
  --ink-block: rgba(15,36,56,0.05);
  --ink-40: #6b7c8e; --ink-60: #44586c; --ink-80: #1f3346;
  --teal-15: #cfe6f7;
  --warn-amber-bg: rgba(173,124,20,0.14); --warn-top: #f7cd78; --warn-bot: #e3b14a;
  --err-dim: rgba(200,69,58,0.10);

  --vit06-ax-04101c: #0f2438;
  --vit06-body: rgba(31,127,194,0.05);
  --vit06-thyroid: rgba(15,36,56,0.08);

  /* S-02 */
  --vit06s02-bg: #eaf4fd; --vit06s02-bg-hi: #ffffff; --vit06s02-bg-lo: #e2eefb;
  --vit06s02-tx: #0f2438; --vit06s02-tx-dim: #44586c; --vit06s02-tip-bg: #ffffff;
  --vit06s02-sky-soft: #cfe6f7; --vit06s02-sky-soft-hi: #b3d8f2;
  --vit06s02-core-tx: #052B27; --vit06s02-core-tx-dim: #0A3E38;
  --vit06s02-icon-on: #062033; --vit06s02-on-tx: #062033; --vit06s02-on-tx-dim: #0B3350;

  /* S-06 */
  --vit06-s06-bg: #eaf4fd; --vit06-s06-bg-hi: #ffffff; --vit06-s06-bg-lo: #e2eefb;
  --vit06-s06-ink: #0f2438; --vit06-s06-ink-dim: #44586c; --vit06-s06-ink-faint: #6b7c8e;
  --vit06-s06-mute: #d7e6f2; --vit06-s06-mute-line: #b9cee0; --vit06-s06-mute-tx: #6b7c8e;
  --vit06-s06-bad-bg: rgba(200,69,58,0.12); --vit06-s06-tip-bg: #ffffff;
  --vit06-s06-on-good: #04201D;

  /* S-12 */
  --vit06-s12-bg: #fff3f5; --vit06-s12-bg-hi: #ffffff; --vit06-s12-bg-lo: #ffe8ec;
  --vit06-s12-ink: #3a1622; --vit06-s12-ink-dim: #7a4a55; --vit06-s12-ink-faint: #a07d87;
  --vit06-s12-card-bg: rgba(244,63,94,0.06); --vit06-s12-card-bg-hi: rgba(244,63,94,0.14); --vit06-s12-card-stroke: rgba(244,63,94,0.26);
  --vit06-s12-skin: #f6d3b8; --vit06-s12-skin-line: #c98a66;
  --vit06-s12-gut: rgba(244,63,94,0.12); --vit06-s12-warn-bg: rgba(173,124,20,0.14);
  --vit06-s12-bad-bg: rgba(200,69,58,0.12); --vit06-s12-tip-bg: #ffffff;
}

/* ===== Wrapper de SVG inline (piso e herói): frame de luxo da casa ===== */
.figure-svg__embed { margin: var(--sp-6) 0; }
.figure-svg__embed .figure-svg__frame { position: relative; }
.figure-svg__embed svg { display: block; width: 100%; height: auto; }
.figure-svg__embed figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-snug); }
.figure-svg__embed figcaption strong { color: var(--ink-100); }
.figure-svg__embed .figure-svg__hint {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--teal-60); margin-top: var(--sp-2);
}

/* herói self-contained: o stage só dá o palco; a interação vive no <script> do SVG */
.hero-stage { position: relative; width: 100%; }
.hero-stage svg { display: block; width: 100%; height: auto; }

/* ===== figure.med — imagem real + cueing/overlay + tarja de privacidade ===== */
.med { position: relative; }
.med .img-wrap { position: relative; display: block; }
.med .img-wrap img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }

/* SIMETRIA DE IMAGEM (Style Director 2026-06-08) — com o quadro de conteúdo agora
   largo (1124px), uma foto de ~700px nativos esticada à largura cheia fica borrada.
   Variantes via data-fit (mantém class="med" intacto p/ o gate-piso):
   default = largura média NÍTIDA centralizada; wide = preenche o quadro (alta-res);
   narrow = retrato pequeno/arquivo contido sem upscale destrutivo. */
.page__container .med:not(.med--plate):not(.med--inset):not([data-fit]) {
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.page__container .med[data-fit="wide"]   { max-width: var(--container-content); margin-left: auto; margin-right: auto; }
.page__container .med[data-fit="narrow"] { max-width: 460px; margin-left: auto; margin-right: auto; }

/* modo claro: foto real "iluminada"/integrada (regra da aula 5) — sem chapar */
:root[data-theme="light"] .med .img-wrap img {
  filter: saturate(1.06) contrast(1.03) brightness(1.02);
  box-shadow: 0 10px 30px rgba(15,40,60,0.14);
}
.med .img-wrap img { box-shadow: 0 14px 40px rgba(0,0,0,0.34); }

/* placa anatômica — imagem de fundo claro (diagrama/esquema) ganha moldura de
   "prancha" para não ler como bloco branco cru sobre a tela escura. Margem interna
   clara + hairline estrutural (teal) + cantos arredondados coerentes com a casa. */
.med--plate .img-wrap {
  padding: var(--sp-4);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(98,189,243,0.10);
}
.med--plate .img-wrap img {
  border-radius: var(--r-sm);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  background: #ffffff;
}
:root[data-theme="light"] .med--plate .img-wrap img {
  box-shadow: 0 6px 18px rgba(15,40,60,0.12);
}
/* placa centralizada e contida (diagrama vertical não precisa ocupar a largura toda) */
.page__container .med--plate { max-width: 560px; margin-left: auto; margin-right: auto; }
.med--plate figcaption { text-align: left; }

/* foto de baixa resolução nativa (microscopia recortada) — contém a largura para
   não ampliar além do que a imagem aguenta (nitidez) e a apresenta como campo
   microscópico centrado, com a mesma moldura de prancha. */
.page__container .med--inset { max-width: 460px; margin-left: auto; margin-right: auto; }
.med--inset .img-wrap {
  padding: var(--sp-3);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(98,189,243,0.08);
}
.med--inset .img-wrap img {
  image-rendering: auto;
  border-radius: var(--r-sm);
}
.med--inset figcaption { text-align: left; }

/* cueing/overlay: seta + label apontando o achado (§4.8.3) */
.med__cue { position: absolute; pointer-events: none; }
.med__cue-dot {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--warn-amber); box-shadow: 0 0 0 4px rgba(242,181,65,0.22), 0 0 12px rgba(242,181,65,0.4);
  transform: translate(-50%, -50%);
}
.med__cue-ring {
  position: absolute; border: 2px solid var(--warn-amber); border-radius: 50%;
  box-shadow: 0 0 14px rgba(242,181,65,0.35); transform: translate(-50%, -50%);
}
.med__cue-label {
  position: absolute; transform: translate(-50%, 0);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  background: rgba(8,18,30,0.92); color: #f5f0e6; padding: 3px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--warn-amber); white-space: nowrap;
}
.med__cue-line { position: absolute; height: 2px; transform-origin: left center; background: linear-gradient(90deg, var(--warn-amber), rgba(242,181,65,0.1)); }

.med figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-70); line-height: var(--lh-snug); }
.med figcaption strong { color: var(--ink-100); }
/* atribuição (fonte/licença): --ink-60 em vez de --ink-50 — sobre o fundo de
   prancha (--bg-elevated-2, mais claro) o ink-50 caía a 3.83:1 (axe, < AA 4.5);
   ink-60 dá ≥6:1 nos dois temas sem perder o caráter de "fine print". (Style
   Director 2026-06-10, G-18.) */
.med figcaption .attr { display: block; margin-top: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-60); letter-spacing: 0.02em; }

/* tarja de privacidade (criança identificável — P4 raquitismo: orbital sobre os olhos) */
.med__tarja {
  position: absolute;
  background: rgba(8, 18, 30, 0.96);
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.med__tarja::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
}
.med__tarja--orbital { top: 7%; left: 22%; width: 56%; height: 11%; }

/* ===== nota-banca — blindagem discreta: secundária, recuada, escudo ===== */
.nota-banca {
  display: flex; gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--info-blue-dim);
  border-left: 2px solid var(--info-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  color: var(--ink-70);
}
.nota-banca__shield { flex-shrink: 0; width: 18px; height: 18px; color: var(--info-blue); margin-top: 2px; }
.nota-banca__body { flex: 1; }
.nota-banca__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--info-blue); margin-right: var(--sp-2); }
.nota-banca p { margin: 0; font-size: var(--fs-sm); }
.nota-banca strong { color: var(--ink-90); }

/* ===== nota-valor — número de prova: ícone "+", acento da casa ===== */
.nota-valor {
  display: flex; gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--teal-05);
  border-left: 2px solid var(--teal-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  color: var(--ink-70);
}
.nota-valor__plus { flex-shrink: 0; width: 18px; height: 18px; color: var(--teal-60); margin-top: 2px; }
.nota-valor__body { flex: 1; }
.nota-valor__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-60); margin-right: var(--sp-2); }
.nota-valor p { margin: 0; font-size: var(--fs-sm); }
.nota-valor strong { color: var(--ink-90); }

/* ===== identidade por página: ponto do page-tag conforme o eixo da aula =====
   lipo = sky (ADEK), hidro = coral (B+C), trap = âmbar (pegadinha/diferencial),
   conduta = verde (profilaxia/tratamento), caso = coral, meta = teal. */
.page-tag--lipo .page-tag__dot    { background: var(--teal-60); box-shadow: 0 0 8px var(--teal-60); }
.page-tag--hidro .page-tag__dot   { background: var(--coral-60); box-shadow: 0 0 8px var(--coral-60); }
.page-tag--trap .page-tag__dot    { background: var(--warn-amber); box-shadow: 0 0 8px var(--warn-amber); }
.page-tag--conduta .page-tag__dot { background: var(--ok-green); box-shadow: 0 0 8px var(--ok-green); }
.page-tag--caso .page-tag__dot    { background: var(--coral-60); box-shadow: 0 0 8px var(--coral-60); }
.page-tag--meta .page-tag__dot    { background: var(--teal-60); box-shadow: 0 0 8px var(--teal-60); }

/* ===== lista de achados (clínica em bullets limpos) ===== */
.find-list { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; gap: var(--sp-2); }
.find-list li {
  position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);
  background: var(--bg-glass); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-90); line-height: var(--lh-snug);
}
.find-list li::before {
  content: ""; position: absolute; left: var(--sp-4); top: 1.15em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-60);
}

/* ===== tabelas responsivas (.cmp) — grid no mobile, sem scroll horizontal =====
   Reaproveita .comparison-table do components.css no desktop; no mobile vira
   cards empilhados via data-label (evita o bug de scroll horizontal de casa). */
.cmp { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-sm); background: var(--bg-elevated); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-soft); }
.cmp caption { caption-side: top; text-align: left; padding: var(--sp-3) var(--sp-4); background: var(--bg-elevated-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-90); border-bottom: 1px solid var(--border-soft); }
.cmp th, .cmp td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.cmp thead th { background: var(--bg-elevated-2); color: var(--teal-60); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.cmp tbody th { font-family: var(--font-mono); color: var(--teal-60); white-space: nowrap; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
.cmp strong { color: var(--ink-100); }
.cmp .row-canon { background: var(--hl-good-bg, rgba(95,223,160,0.10)); }
.cmp .cell-good { color: var(--ok-green); font-weight: 600; }
.cmp .cell-warn { color: var(--warn-amber); font-weight: 600; }
.cmp .cell-bad  { color: var(--err-red); font-weight: 600; }

@media (max-width: 640px) {
  .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp thead { position: absolute; clip: rect(0 0 0 0); height: 1px; width: 1px; overflow: hidden; }
  .cmp tbody tr { border: 1px solid var(--border-soft); border-radius: var(--r-sm); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--bg-elevated-2); }
  .cmp tbody td, .cmp tbody th { border-bottom: 1px solid var(--border-soft); padding: var(--sp-2) 0 var(--sp-2) 42%; position: relative; text-align: left; white-space: normal; }
  .cmp tbody tr td:last-child, .cmp tbody tr th:last-child { border-bottom: 0; }
  .cmp tbody td::before, .cmp tbody th::before {
    content: attr(data-label); position: absolute; left: 0; top: var(--sp-2); width: 38%;
    font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-60);
  }
}

/* ===== recall metacognitivo (P12) — perguntas de auto-teste, sem gabarito ===== */
.recall { margin: var(--sp-5) 0; padding: var(--sp-5); border: 1px dashed var(--border-mid); border-radius: var(--r-md); background: var(--bg-glass); }
.recall__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--warn-amber); margin: 0 0 var(--sp-3); }
.recall ol { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-3); }
.recall li { font-family: var(--font-serif); font-style: italic; color: var(--ink-90); line-height: var(--lh-snug); }

/* ===== caso-síntese (P13) — 3 pacientes em cards ===== */
.synth-cases { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
.synth-case { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-4); background: var(--bg-elevated); border: 1px solid var(--border-soft); border-left: 3px solid var(--coral-60); border-radius: var(--r-md); }
.synth-case__n { font-family: var(--font-mono); font-weight: 700; color: var(--coral-60); font-size: var(--fs-lg); }
.synth-case__body { font-size: var(--fs-sm); color: var(--ink-90); line-height: var(--lh-snug); }
.synth-case__body strong { color: var(--ink-100); }

/* =========================================================================
   CONTENÇÃO DE LUXO (Style Director 2026-06-10) — reproduz o padrão-ouro
   aula-04 #/p5: prosa corrida deixa de ser "parede" e passa a viver dentro
   de uma MEMBRANA de vidro fosco (flush à coluna de conteúdo), com cada
   tópico separado por divisor tracejado teal (= estrutura). A medida de
   leitura (--measure) do chassi é preservada DENTRO da membrana; só a
   contenção e a simetria flush mudam. Disciplina de cor: teal = estrutura/
   divisor · ouro = legenda · coral = perigo (inalterada).
   Fallback sólido (--bg-glass tem versão clara+escura nos tokens); o
   backdrop-filter é enhancement, nunca dependência de legibilidade.
   REVERTER: apagar este bloco + desfazer wrappers .lesson-card em _pages.mjs. */
.lesson-card {
  position: relative;
  background: var(--bg-glass);
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  margin: var(--sp-5) 0;
}
.lesson-card > .prose { margin: 0; }
.lesson-card > .prose > :first-child { margin-top: 0; }
.lesson-card > .prose > :last-child { margin-bottom: 0; }
/* dentro da membrana o tópico abre com um marcador estrutural teal e
   ganha respiro acima; o primeiro tópico não recebe linha de cima */
.lesson-card .prose > h3.topic-h {
  position: relative;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--teal-40);
}
.lesson-card .prose > h3.topic-h:first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}
:root[data-theme="light"] .lesson-card .prose > h3.topic-h { border-top-color: rgba(35,137,209,0.30); }
/* No tema claro a membrana fica MAIS OPACA (fundo quase sólido) — o vidro a 70%
   resolvia sobre o backdrop e derrubava o contraste do texto de acento (term/
   hl-good) abaixo de AA. G-15: translucidez é enhancement, legibilidade não
   depende dela → fundo sólido-suave garante acento legível sobre a membrana.
   O blur segue dando profundidade; só a opacidade do papel sobe. */
:root[data-theme="light"] .lesson-card {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.6);
  border-color: var(--border-mid);
}
@media (max-width: 640px) {
  .lesson-card { padding: var(--sp-5) var(--sp-4); }
}

/* SIMETRIA FLUSH DE IMAGEM (Style Director 2026-06-10) — substitui o regime
   anterior (foto centrada a 760px = largura própria divergente da coluna =
   ragged, a dismorfia que reprovou esta aula). Agora a foto preenche a
   coluna de conteúdo (flush esq=dir com prosa/SVG/cards). Diagramas de fundo
   claro (--plate) e microscopias (--inset) seguem em prancha contida, mas
   centrada e com moldura coerente — leitura de "lâmina", não de buraco.
   A regra default antiga (max-width:760px centrada) fica neutralizada. */
.page__container .med:not(.med--plate):not(.med--inset):not([data-fit]) {
  max-width: 100%; margin-left: 0; margin-right: 0;
}
.page__container .med[data-fit="wide"] { max-width: 100%; margin-left: 0; margin-right: 0; }
/* prancha (diagrama claro) e inset (microscopia) continuam contidos, mas o
   frame de prancha agora se estende à coluna inteira para não criar void
   lateral: a imagem fica centrada DENTRO da prancha, e a prancha é flush. */
.page__container .med--plate { max-width: 100%; margin-left: 0; margin-right: 0; }
.med--plate .img-wrap { display: grid; place-items: center; }
.med--plate .img-wrap img { max-width: 620px; width: 100%; }
.page__container .med--inset { max-width: 100%; margin-left: 0; margin-right: 0; }
.med--inset .img-wrap { display: grid; place-items: center; }
.med--inset .img-wrap img { max-width: 520px; width: 100%; }

/* HEADER FLUTUANTE — alvo de toque a 320px (Style Director 2026-06-10).
   No flex-row do header, .icon-btn (38px fixo) não tinha flex-shrink:0 e, em
   320px, brand+contador+3 ícones estouravam → cada ícone colapsava p/ ~2px
   (alvo de toque inviável, G-20/G-27). Fix escopado a esta aula: trava o
   tamanho do ícone e, em telas muito estreitas, recolhe o contador textual
   (a barra de progresso abaixo já comunica o avanço) e o subtítulo do brand,
   liberando espaço p/ os 3 ícones em 38×38 reais. */
.site-header__row .icon-btn { flex-shrink: 0; }
@media (max-width: 400px) {
  .site-header__progress { display: none; }
  .site-header__subtitle { display: none; }
  .site-header__row { gap: var(--sp-3); }
}

/* CLIP DE SANGRIA SVG (Style Director 2026-06-10) — alguns pisos self-contained
   (S-10 viewBox iniciando em x=20) têm <text> que sangra alguns px do viewBox.
   A 320px isso gerava scrollWidth fantasma (348>320) sem nada visível clipado —
   permitia um arraste horizontal de ~28px. Clipar a sangria no wrapper resolve
   o overflow sem tocar a ilustração (conteúdo visível dentro do viewBox intacto).
   Não toca o SVG (fronteira do Ilustrador); é guarda de apresentação. */
.figure-svg__embed { overflow: hidden; }
.figure-svg__embed .figure-svg__frame { overflow: hidden; border-radius: var(--r-md); }

/* CASE-CARD META — wrap a 320px (Style Director 2026-06-10). O chassi estiliza
   .case-card__meta como grid (max-content 1fr) p/ um par dt/dd; mas TODAS as
   páginas usam um <p> único, e em p10 o texto longo ("Caso · paciente-síntese
   (reaparece no fechamento)") era forçado a uma coluna max-content sem quebra →
   324px → overflowX a 320. Como <p> único, volta a fluxo de bloco normal (quebra
   de linha). Escopado a esta aula; não altera o uso dt/dd (inexistente aqui). */
.case-card p.case-card__meta { display: block; white-space: normal; overflow-wrap: anywhere; }

/* CONTRASTE DOS TERMOS-CHAVE no tema claro (Style Director 2026-06-10, G-18).
   .term (pílula de palavra-chave high-yield) usava --teal-80 (#2a93d6) sobre
   --teal-05 → 3.05:1, abaixo de AA 4.5 para texto normal. Como os termos SÃO
   a superfície de aprendizagem (keywords da prova), precisam ler limpo no claro.
   Escurece o teal SÓ no tema claro DESTA aula (#1a6ca0 → 5.15:1); o escuro
   (--teal-80 = #a6dbfb sobre fundo escuro) já passa e fica intocado. Não altera
   o token compartilhado nem as aulas commitadas. */
:root[data-theme="light"] .prose .term { color: #1a6ca0; }