/* ============================================================
   Mimyr — styles.css  ·  "Caloroso e acolhedor"
   Fontes auto-hospedadas (LGPD), mobile-first, WCAG 2.1 AA, dark mode
   ============================================================ */

/* ── Fontes (woff2 latin, self-hosted em ./fonts) ── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fraunces-700.woff2") format("woff2"); }

/* ── Tokens (Light) ── */
:root {
  /* Marca */
  --color-accent:        #5b51e6;
  --color-accent-hover:  #463cc7;
  --color-accent-soft:   #eceafe;
  --color-on-accent:     #ffffff;

  /* Superfícies (off-white quente) */
  --color-bg:            #faf7f2;
  --color-surface:       #ffffff;
  --color-surface-2:     #fbf8f3;
  --color-border:        #ece5db;
  --color-border-strong: #ddd4c7;

  /* Texto (quase-preto quente) */
  --color-text:          #2c2722;
  --color-text-muted:    #756d63;
  --color-link:          #5b51e6;
  --color-link-hover:    #463cc7;

  /* Seções temáticas: bg suave + borda + tinta legível */
  --hook-bg:#fdf3e4; --hook-bd:#f0b45f; --hook-ink:#945c12;
  --analogy-bg:#f2eefc; --analogy-bd:#b79ae8; --analogy-ink:#6849ad;
  --pratica-bg:#e7f6ef; --pratica-bd:#5cc193; --pratica-ink:#1d7a54;
  --reflita-bg:#fdeef4; --reflita-bd:#ec9bbe; --reflita-ink:#a83e6b;
  --seguranca-bg:#eaf2fd; --seguranca-bd:#7fb0ec; --seguranca-ink:#285fae;
  --carreira-bg:#fbf0e7; --carreira-bd:#dc9d6e; --carreira-ink:#985a2e;

  /* Cores de tema por módulo (badges, heros) */
  --t1-bg:#fdeede; --t1-ink:#a4641a;
  --t2-bg:#e6f5ee; --t2-ink:#1d7a54;
  --t3-bg:#e7f0fd; --t3-ink:#2a5fb0;
  --t4-bg:#f1ecfc; --t4-ink:#6849ad;
  --t5-bg:#fcecf3; --t5-ink:#b03e6b;
  --t6-bg:#e4f4f3; --t6-ink:#137a72;
  --t7-bg:#eceafe; --t7-ink:#463cc7;

  /* Progresso */
  --color-progress-bg:   #ece5db;
  --color-progress-fill: #5b51e6;

  /* Layout */
  --content-max-width:   720px;
  --spacing-xs:0.375rem; --spacing-sm:0.75rem; --spacing-md:1.25rem;
  --spacing-lg:2.5rem; --spacing-xl:4rem;

  /* Tipografia */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  --font-size-sm:0.875rem; --font-size-base:1.0625rem; --font-size-lg:1.1875rem;
  --font-size-xl:1.5rem; --font-size-2xl:2.25rem;
  --line-height:1.72;

  /* Forma */
  --radius:14px; --radius-sm:10px; --radius-lg:20px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(44,39,34,.04), 0 2px 8px rgba(44,39,34,.05);
  --shadow-md:0 6px 16px rgba(44,39,34,.08), 0 12px 32px rgba(44,39,34,.07);
}

/* ── Tokens (Dark, quente) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-accent:#a8a1fb; --color-accent-hover:#c4bffd; --color-accent-soft:#27224a; --color-on-accent:#1b1814;
    --color-bg:#1b1815; --color-surface:#262219; --color-surface-2:#231f17; --color-border:#3a342b; --color-border-strong:#4a4337;
    --color-text:#f1ece4; --color-text-muted:#a99f92; --color-link:#a8a1fb; --color-link-hover:#c4bffd;

    --hook-bg:#33291a; --hook-bd:#c98f3e; --hook-ink:#f0c07e;
    --analogy-bg:#2a2440; --analogy-bd:#9b7fdb; --analogy-ink:#cdb9f3;
    --pratica-bg:#16322a; --pratica-bd:#3f9d77; --pratica-ink:#7fd9b0;
    --reflita-bg:#352030; --reflita-bd:#cf7aa3; --reflita-ink:#f0a8c8;
    --seguranca-bg:#1a2740; --seguranca-bd:#5d8fd6; --seguranca-ink:#9cc0f3;
    --carreira-bg:#33271c; --carreira-bd:#c2854f; --carreira-ink:#e3ab78;

    --t1-bg:#33271a; --t1-ink:#e8b072; --t2-bg:#16302a; --t2-ink:#74d3a8;
    --t3-bg:#19273f; --t3-ink:#8fb6ee; --t4-bg:#2a2440; --t4-ink:#c0a9ef;
    --t5-bg:#34202d; --t5-ink:#ee9dbe; --t6-bg:#163230; --t6-ink:#6fcfc6;
    --t7-bg:#27224a; --t7-ink:#bcb4fc;

    --color-progress-bg:#3a342b; --color-progress-fill:#a8a1fb;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md:0 6px 16px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.3);
  }
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  font-size:var(--font-size-base);
  line-height:var(--line-height);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, svg { max-width:100%; height:auto; }

/* Skip link */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-accent); color:var(--color-on-accent);
  padding:var(--spacing-sm) var(--spacing-md); border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;
}
.skip-link:focus { left:0; }

a { color:var(--color-link); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--color-link) 35%, transparent); text-underline-offset:3px; transition:color .15s, text-decoration-color .15s; }
a:hover { color:var(--color-link-hover); text-decoration-color:currentColor; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; border-radius:3px; }

/* ── Tipografia ── */
h1,h2,h3,h4 { font-family:var(--font-heading); color:var(--color-text); line-height:1.18; letter-spacing:-0.01em; font-weight:600; }
h1 { font-size:clamp(2rem, 1.5rem + 2.4vw, 2.875rem); font-weight:600; margin-bottom:var(--spacing-md); }
h2 { font-size:clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem); margin-top:var(--spacing-xl); margin-bottom:var(--spacing-md); }
h3 { font-size:clamp(1.1875rem, 1.05rem + .6vw, 1.375rem); margin-top:var(--spacing-lg); margin-bottom:var(--spacing-sm); }
p { margin-bottom:var(--spacing-md); }
p:last-child { margin-bottom:0; }
strong { font-weight:600; }
ul, ol { margin:0 0 var(--spacing-md) 1.25rem; }
li { margin-bottom:var(--spacing-xs); }
code { font-family:var(--font-mono); font-size:.875em; color:var(--color-text); background:var(--color-surface-2); border:1px solid var(--color-border); padding:.08em .4em; border-radius:6px; overflow-wrap:break-word; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
pre { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:var(--spacing-md); overflow-x:auto; margin:var(--spacing-md) 0; }
pre code { background:none; border:none; padding:0; overflow-wrap:normal; }

/* ── Containers ── */
.site-header, .module, .module-nav, .site-footer, .index-page {
  width:100%; max-width:var(--content-max-width); margin-inline:auto; padding-inline:var(--spacing-md);
}

/* ── Botões ── */
.btn {
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:var(--font-size-base);
  line-height:1; text-decoration:none; cursor:pointer;
  padding:.85em 1.5em; border-radius:var(--radius-pill); border:1.5px solid transparent;
  transition:transform .15s, box-shadow .15s, background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background:var(--color-accent); color:var(--color-on-accent); box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--color-accent-hover); color:var(--color-on-accent); transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none; }
.btn-secondary { background:transparent; color:var(--color-text); border-color:var(--color-border-strong); }
.btn-secondary:hover { border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); text-decoration:none; }

/* ── Pills / badges ── */
.pill { display:inline-flex; align-items:center; gap:.35em; font-size:var(--font-size-sm); font-weight:600; padding:.25em .75em; border-radius:var(--radius-pill); background:var(--color-surface-2); color:var(--color-text-muted); border:1px solid var(--color-border); }

/* ── Header / Breadcrumb ── */
.site-header { padding-top:var(--spacing-lg); padding-bottom:var(--spacing-sm); }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.5em; font-size:var(--font-size-sm); color:var(--color-text-muted); }
.breadcrumb a { color:var(--color-text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--color-accent); }
.breadcrumb [aria-current="page"] { color:var(--color-text); font-weight:600; }

/* ── Footer ── */
.site-footer { padding-block:var(--spacing-xl) var(--spacing-lg); margin-top:var(--spacing-xl); border-top:1px solid var(--color-border); text-align:center; color:var(--color-text-muted); font-size:var(--font-size-sm); }
.site-footer p { margin-bottom:var(--spacing-xs); }

/* ── Hero ── */
.hero { position:relative; padding-block:var(--spacing-xl) var(--spacing-lg); }
.hero::before {
  content:""; position:absolute; z-index:-1; top:-10%; right:-15%; width:55vw; max-width:520px; aspect-ratio:1;
  background:radial-gradient(circle at 30% 30%, var(--t1-bg), transparent 62%), radial-gradient(circle at 70% 65%, var(--analogy-bg), transparent 60%);
  filter:blur(8px); opacity:.7; pointer-events:none;
}
.hero-label, .index-page > .hero .hero-label { display:inline-block; font-size:var(--font-size-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--spacing-sm); }
.hero h1 { font-weight:600; }
.hero-subtitle, .intro { font-size:var(--font-size-lg); color:var(--color-text-muted); }
.hero-subtitle { margin-bottom:var(--spacing-md); }
.intro { max-width:none; }
.hero .btn { margin-top:var(--spacing-sm); }

/* ── Cards (base) ── */
.card {
  display:block; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius); padding:var(--spacing-lg); box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
a.card, .card a.card-link { text-decoration:none; }
a.card:hover, .card.is-link:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong); }

/* ── Índice do curso: module cards ── */
.index-page { padding-block-end:var(--spacing-lg); }
.modules-section { margin-block:var(--spacing-xl); }
.modules-section > h2 { margin-top:0; }
.module-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--spacing-md); grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.module-item {
  position:relative; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius); padding:var(--spacing-lg); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:var(--spacing-xs);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.module-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong); }
.module-num { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:var(--radius-pill); font-family:var(--font-heading); font-weight:600; font-size:var(--font-size-lg); background:var(--t7-bg); color:var(--t7-ink); margin-bottom:var(--spacing-sm); }
.module-item h3 { margin:0; font-size:var(--font-size-lg); }
.module-item h3 a { color:var(--color-text); text-decoration:none; }
.module-item h3 a::after { content:""; position:absolute; inset:0; }
.module-item:hover h3 a, .module-item h3 a:focus-visible { color:var(--color-accent); }
.module-item p { color:var(--color-text-muted); font-size:var(--font-size-sm); margin:0; }
.module-item .module-meta { margin-top:var(--spacing-sm); font-weight:600; color:var(--color-text); }
.course-meta { margin-bottom:var(--spacing-lg); color:var(--color-text-muted); font-size:var(--font-size-base); }
/* tema por módulo via nth-child do grid */
.module-list .module-item:nth-child(7n+1) .module-num{background:var(--t1-bg);color:var(--t1-ink);}
.module-list .module-item:nth-child(7n+2) .module-num{background:var(--t2-bg);color:var(--t2-ink);}
.module-list .module-item:nth-child(7n+3) .module-num{background:var(--t3-bg);color:var(--t3-ink);}
.module-list .module-item:nth-child(7n+4) .module-num{background:var(--t4-bg);color:var(--t4-ink);}
.module-list .module-item:nth-child(7n+5) .module-num{background:var(--t5-bg);color:var(--t5-ink);}
.module-list .module-item:nth-child(7n+6) .module-num{background:var(--t6-bg);color:var(--t6-ink);}
.module-list .module-item:nth-child(7n+7) .module-num{background:var(--t7-bg);color:var(--t7-ink);}

/* ── Autor (card) ── */
.author-section { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--spacing-lg); margin-block:var(--spacing-lg); }
.author-section h2 { margin-top:0; }
.author-name { font-family:var(--font-heading); font-weight:600; font-size:var(--font-size-lg); margin-bottom:var(--spacing-xs); }

/* ── Chapter / module shell ── */
.module { padding-block-end:var(--spacing-lg); }
.module-header { margin-bottom:var(--spacing-md); }
.module-number { display:inline-block; font-size:var(--font-size-sm); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--spacing-xs); }
.reading-time { font-size:var(--font-size-sm); color:var(--color-text-muted); }
.module-header h1 { margin-top:var(--spacing-xs); }

/* Progress bar (arredondada) */
.progress-bar { height:8px; background:var(--color-progress-bg); border-radius:var(--radius-pill); overflow:hidden; margin-block:var(--spacing-md) var(--spacing-lg); }
.progress-fill { height:100%; background:var(--color-progress-fill); border-radius:var(--radius-pill); transition:width .3s; }

/* Learning objectives */
.learning-objectives { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--spacing-lg); margin-block:var(--spacing-lg); }
.learning-objectives h2 { margin-top:0; font-size:var(--font-size-lg); }
.learning-objectives ul { margin-bottom:0; }

/* ── Chapter layout com sidebar (desktop) ── */
.chapter { max-width:1100px; }
@media (min-width:1024px) {
  .chapter { display:grid; grid-template-columns:15rem minmax(0, var(--content-max-width)); gap:var(--spacing-xl); align-items:start; justify-content:center; }
  .chapter > article, .chapter > .subpage-nav { grid-column:2; width:100%; max-width:var(--content-max-width); }
  .chapter-toc { grid-column:1; grid-row:1 / span 3; position:sticky; top:var(--spacing-md); align-self:start; }
}
.chapter-toc { font-size:var(--font-size-sm); }
.chapter-toc h2 { font-family:var(--font-body); font-size:var(--font-size-sm); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); margin:0 0 var(--spacing-sm); }
.chapter-toc ol { list-style:none; margin:0; padding:0; }
.chapter-toc li { margin:0; }
.chapter-toc a { display:block; padding:.4em .7em; border-radius:var(--radius-sm); color:var(--color-text-muted); text-decoration:none; border-left:2px solid transparent; transition:background-color .15s, color .15s; }
.chapter-toc a:hover { background:var(--color-surface-2); color:var(--color-text); }
.chapter-toc a[aria-current="page"] { background:var(--color-accent-soft); color:var(--color-accent); font-weight:600; border-left-color:var(--color-accent); }
@media (max-width:1023px) { .chapter-toc { display:none; } }

/* ── Seções de conteúdo (fundo tingido suave) ── */
article > section { margin-block:var(--spacing-lg); }
.hook, .analogy-box, .real-case, .na-pratica, .reflita, .mini-exercicio, .checagem, .callout, .cross-ref, .aprofundamento {
  margin-block:var(--spacing-lg);
  border-radius:var(--radius); padding:var(--spacing-md) var(--spacing-lg); border:1px solid var(--color-border);
}
/* Dois blocos tingidos adjacentes (sem prosa entre eles) pedem mais respiro
   que o ritmo padrão de seção, senão lêem como um bloco só. */
:is(.hook, .analogy-box, .real-case, .na-pratica, .reflita, .mini-exercicio, .checagem, .callout, .cross-ref, .aprofundamento)
+ :is(.hook, .analogy-box, .real-case, .na-pratica, .reflita, .mini-exercicio, .checagem, .callout, .cross-ref, .aprofundamento) {
  margin-top:var(--spacing-xl);
}
.hook { background:var(--hook-bg); border-color:color-mix(in srgb, var(--hook-bd) 45%, var(--color-border)); }
.concept { padding:0; border:none; background:none; }
.analogy-box { background:var(--analogy-bg); border-color:color-mix(in srgb, var(--analogy-bd) 45%, var(--color-border)); }
.analogy-label, .callout-label { display:flex; align-items:center; gap:.45em; font-family:var(--font-body); font-size:var(--font-size-sm); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:var(--spacing-sm); }
.analogy-label { color:var(--analogy-ink); }
.real-case { background:var(--color-surface); box-shadow:var(--shadow-sm); }
.real-case h2, .na-pratica h2, .reflita h2 { margin-top:0; font-size:var(--font-size-lg); }
.na-pratica { background:var(--pratica-bg); border-color:color-mix(in srgb, var(--pratica-bd) 45%, var(--color-border)); }
.na-pratica h2 { color:var(--pratica-ink); }
.reflita { background:var(--reflita-bg); border-color:color-mix(in srgb, var(--reflita-bd) 45%, var(--color-border)); }
.reflita h2 { color:var(--reflita-ink); }
.mini-exercicio { background:var(--pratica-bg); border-color:color-mix(in srgb, var(--pratica-bd) 45%, var(--color-border)); }
.mini-exercicio h3 { margin-top:0; font-family:var(--font-body); font-size:var(--font-size-sm); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--pratica-ink); margin-bottom:var(--spacing-sm); }

/* ── Callouts (tingidos por tipo + ícone) ── */
.callout-label::before { font-weight:400; }
.callout.seguranca { background:var(--seguranca-bg); border-color:color-mix(in srgb, var(--seguranca-bd) 45%, var(--color-border)); }
.callout.seguranca .callout-label { color:var(--seguranca-ink); }
.callout.seguranca .callout-label::before { content:"\1F6E1\FE0F"; }
.callout.carreira { background:var(--carreira-bg); border-color:color-mix(in srgb, var(--carreira-bd) 45%, var(--color-border)); }
.callout.carreira .callout-label { color:var(--carreira-ink); }
.callout.carreira .callout-label::before { content:"\1F4BC"; }
.callout.va-alem { background:var(--analogy-bg); border-color:color-mix(in srgb, var(--analogy-bd) 45%, var(--color-border)); }
.callout.va-alem .callout-label { color:var(--analogy-ink); }
.callout.va-alem .callout-label::before { content:"\1F9ED"; }
.callout.conexao-modulo, .cross-ref { background:var(--color-accent-soft); border-color:color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.callout.conexao-modulo .callout-label, .cross-ref .callout-label { color:var(--color-accent); }
.callout.conexao-modulo .callout-label::before, .cross-ref .callout-label::before { content:"\1F517"; }

/* ── Aprofundamento opcional (colapsável) ──
   Desvio no meio da prosa. Fica fechado por padrão: a própria affordance
   comunica que é extra, então o texto não precisa avisar "pode pular". */
.aprofundamento { background:var(--analogy-bg); border-color:color-mix(in srgb, var(--analogy-bd) 45%, var(--color-border)); }
.aprofundamento > summary { cursor:pointer; list-style:none; }
.aprofundamento > summary::-webkit-details-marker { display:none; }
.aprofundamento > summary:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; border-radius:var(--radius-sm); }
.aprofundamento-label { display:flex; align-items:center; gap:.45em; font-family:var(--font-body); font-size:var(--font-size-sm); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--analogy-ink); margin-bottom:var(--spacing-xs); }
.aprofundamento-label::before { content:"\1F9ED"; font-weight:400; }
.aprofundamento-title { display:flex; align-items:baseline; gap:.5em; font-family:var(--font-display); font-size:var(--font-size-lg); font-weight:600; color:var(--color-text); }
.aprofundamento-title::before { content:"\25B8"; display:inline-block; color:var(--analogy-ink); transition:transform .18s ease; }
.aprofundamento[open] > summary .aprofundamento-title::before { transform:rotate(90deg); }
.aprofundamento[open] > summary { margin-bottom:var(--spacing-md); }
.aprofundamento > :last-child { margin-bottom:0; }
@media (prefers-reduced-motion:reduce) { .aprofundamento-title::before { transition:none; } }

/* ── Checagem rápida ── */
.checagem { background:var(--color-surface); box-shadow:var(--shadow-sm); }
.checagem h2 { margin-top:0; font-size:var(--font-size-lg); }
.checagem > p { color:var(--color-text-muted); font-size:var(--font-size-sm); margin-bottom:var(--spacing-sm); }
.checagem details { border-top:1px solid var(--color-border); padding:var(--spacing-sm) 0; }
.checagem details:last-child { padding-bottom:0; }
.checagem summary { cursor:pointer; font-weight:600; padding:var(--spacing-xs) 0; }
.checagem summary:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.checagem details[open] summary { color:var(--color-accent); margin-bottom:var(--spacing-sm); }
.checagem details p { margin:0; color:var(--color-text-muted); }

/* ── Diagramas ── */
.diagram { margin:var(--spacing-lg) 0; text-align:center; }
.diagram svg { max-width:100%; height:auto; }
.diagram figcaption { font-size:var(--font-size-sm); color:var(--color-text-muted); margin-top:var(--spacing-sm); font-style:italic; }

/* ── Tabelas ── */
.table-wrap, .table-wrapper { overflow-x:auto; margin:var(--spacing-lg) 0; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); }
.table-wrap:focus-visible, .table-wrapper:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.comparison-table { width:100%; border-collapse:collapse; font-size:var(--font-size-sm); margin:0; }
.table-wrap .comparison-table, .table-wrapper .comparison-table { margin:0; }
.comparison-table caption { text-align:left; font-weight:600; color:var(--color-text-muted); padding:var(--spacing-sm) 0; }
.comparison-table th, .comparison-table td { padding:var(--spacing-sm) var(--spacing-md); text-align:left; border-bottom:1px solid var(--color-border); }
.comparison-table thead th, .comparison-table th[scope="col"] { background:var(--color-surface-2); font-weight:600; border-bottom:2px solid var(--color-border-strong); }
.comparison-table td { color:var(--color-text-muted); }
@media (max-width:768px){ .comparison-table th, .comparison-table td { padding:var(--spacing-xs) var(--spacing-sm); } }
@media (max-width:480px){ .comparison-table { font-size:.8rem; } }

/* ── Nav prev/next (cards) ── */
.subpage-nav { display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-md); margin-top:var(--spacing-xl); }
.subpage-nav a { display:block; padding:var(--spacing-md); border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-surface); color:var(--color-text); text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s; }
.subpage-nav a:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--color-accent); color:var(--color-accent); }
.subpage-nav .prev { text-align:left; }
.subpage-nav .next { text-align:right; }
.subpage-nav a:only-child { max-width:none; }
.subpage-nav .next:only-child { grid-column:2; }

/* ── Module-nav (entre módulos) ── */
.module-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--spacing-md); margin-top:var(--spacing-lg); }

/* ── start-cta como botão ── */
.start-cta { margin-top:var(--spacing-lg); }
.start-cta a { font-weight:600; }

/* ── Módulo: lista de capítulos ── */
.module-index-list { list-style:none; margin:var(--spacing-lg) 0; padding:0; display:flex; flex-direction:column; gap:var(--spacing-sm); }
.module-index-item { display:flex; justify-content:space-between; align-items:center; gap:var(--spacing-md); padding:var(--spacing-md); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s; }
.module-index-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--color-border-strong); }
.module-index-item a { color:var(--color-text); text-decoration:none; font-weight:500; }
.module-index-item a::after { content:" \2192"; color:var(--color-text-muted); }
.module-index-item:hover a, .module-index-item:hover a::after { color:var(--color-accent); }
.module-index-item .time { flex-shrink:0; font-size:var(--font-size-sm); color:var(--color-text-muted); white-space:nowrap; }

/* ── Glossário: busca ── */
.glossary-search { margin-block:var(--spacing-lg); }
.glossary-search label { display:block; font-weight:600; font-size:var(--font-size-sm); margin-bottom:var(--spacing-xs); }
.glossary-search input[type="search"] {
  width:100%; font:inherit; color:var(--color-text);
  padding:.7em 1.1em; border:1.5px solid var(--color-border-strong); border-radius:var(--radius-pill);
  background:var(--color-surface); box-shadow:var(--shadow-sm);
  transition:border-color .15s, box-shadow .15s;
}
.glossary-search input[type="search"]::placeholder { color:var(--color-text-muted); }
.glossary-search input[type="search"]:focus-visible { outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px var(--color-accent-soft); }
.glossary-count { margin-top:var(--spacing-sm); font-size:var(--font-size-sm); color:var(--color-text-muted); min-height:1.4em; }

/* ── Glossário ── */
.glossary-list { margin:0 0 var(--spacing-lg); padding:0; }
.glossary-entry { padding:var(--spacing-md) 0; border-bottom:1px solid var(--color-border); }
.glossary-entry:last-child { border-bottom:none; }
.glossary-entry dt { font-family:var(--font-heading); font-weight:600; font-size:var(--font-size-lg); margin-bottom:var(--spacing-xs); }
.glossary-entry dd { margin-left:0; color:var(--color-text-muted); }
.glossary-entry dd a { white-space:nowrap; }

/* ── Responsivo ── */
@media (max-width:480px) {
  .subpage-nav { grid-template-columns:1fr; }
  .subpage-nav .next, .subpage-nav .next:only-child { grid-column:1; text-align:left; }
  .hook, .analogy-box, .real-case, .na-pratica, .reflita, .mini-exercicio, .checagem, .callout, .cross-ref { padding:var(--spacing-md); }
}

/* ── Movimento (respeita reduced-motion) ── */
/* ── Cookie banner (LGPD) ── */
.cookie-banner {
  position:fixed; z-index:90; left:var(--spacing-md); right:var(--spacing-md); bottom:var(--spacing-md);
  max-width:640px; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--spacing-md);
  background:var(--color-surface); border:1px solid var(--color-border-strong);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:var(--spacing-md) var(--spacing-lg);
  transition:opacity .2s, transform .2s;
}
.cookie-banner__text { flex:1 1 260px; }
.cookie-banner__text p { margin:0; font-size:var(--font-size-sm); color:var(--color-text-muted); }
.cookie-banner__actions { display:flex; gap:var(--spacing-sm); flex-shrink:0; }
.cookie-banner__btn {
  font:inherit; font-weight:600; font-size:var(--font-size-sm); line-height:1; cursor:pointer;
  padding:.65em 1.2em; border-radius:var(--radius-pill); border:1.5px solid transparent;
  transition:background-color .15s, border-color .15s, color .15s, transform .15s;
}
.cookie-banner__btn--accept { background:var(--color-accent); color:var(--color-on-accent); }
.cookie-banner__btn--accept:hover { background:var(--color-accent-hover); transform:translateY(-1px); }
.cookie-banner__btn--reject { background:transparent; color:var(--color-text); border-color:var(--color-border-strong); }
.cookie-banner__btn--reject:hover { border-color:var(--color-accent); color:var(--color-accent); }
.cookie-banner__btn:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.cookie-banner--hidden { opacity:0; transform:translateY(1rem); pointer-events:none; }

.cookie-toggle {
  position:fixed; z-index:80; bottom:var(--spacing-md); left:var(--spacing-md);
  font:inherit; font-size:var(--font-size-sm); font-weight:600; cursor:pointer;
  padding:.5em 1em; border-radius:var(--radius-pill);
  background:var(--color-surface); color:var(--color-text-muted);
  border:1px solid var(--color-border); box-shadow:var(--shadow-sm);
  transition:color .15s, border-color .15s;
}
.cookie-toggle:hover { color:var(--color-accent); border-color:var(--color-accent); }
.cookie-toggle:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }

@media (max-width:520px) {
  .cookie-banner { flex-direction:column; align-items:stretch; }
  .cookie-banner__actions { justify-content:flex-end; }
  /* com o banner aberto, o toggle fica escondido atrás dele no mobile */
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ── Print ── */
@media print {
  .site-header, .subpage-nav, .module-nav, .site-footer, .chapter-toc, .progress-bar, .skip-link { display:none; }
  body { background:#fff; color:#000; }
  .hook, .analogy-box, .real-case, .na-pratica, .reflita, .mini-exercicio, .checagem, .callout { border:1px solid #ccc; background:#fff; }
}