/* ==========================================================================
   ACADEMIA SCRUM MARKSAINT — styles.css
   Identidade: MarkSaint (dark-tech neon: ciano #00e5ff sobre #060912).
   Layout: sidebar glass fixa + área de conteúdo escura (painel executivo).
   Todos os tokens de design vivem em :root — para retematizar, altere aqui.
   ========================================================================== */

:root {
  /* Tipografia */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Rajdhani', system-ui, sans-serif;

  /* Paleta MarkSaint */
  --bg: #060912;
  --bg-soft: #0a1020;
  --gunmetal: #1a2333;
  --gunmetal-2: #131a29;
  --cyan: #00e5ff;
  --cyan-2: #36c6ff;
  --petrol: #0a7ea4;
  --green: #2bff88;
  --orange: #ff9d2e;
  --red: #ff5470;

  /* Superfícies glass e texto */
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .055);
  --text: #e8eefc;
  --text-2: rgba(232, 238, 252, .78);
  --muted: rgba(255, 255, 255, .52);
  --muted-2: rgba(255, 255, 255, .36);
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);
  --hair: rgba(255, 255, 255, .07);

  /* Semânticas (feedback) */
  --ok: var(--green);
  --ok-bg: rgba(43, 255, 136, .08);
  --ok-brd: rgba(43, 255, 136, .3);
  --warn: var(--orange);
  --warn-bg: rgba(255, 157, 46, .08);
  --warn-brd: rgba(255, 157, 46, .3);
  --err: var(--red);
  --err-bg: rgba(255, 84, 112, .08);
  --err-brd: rgba(255, 84, 112, .32);
  --info-bg: rgba(0, 229, 255, .07);
  --info-brd: rgba(0, 229, 255, .25);

  /* Glows */
  --glow-cyan: 0 0 12px rgba(0, 229, 255, .35), 0 0 32px rgba(0, 229, 255, .12);
  --glow-green: 0 0 12px rgba(43, 255, 136, .3);

  /* Escala de espaçamento (base 8px) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px;

  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);

  --t-fast: 150ms ease;
  --t-base: 250ms ease;

  --sidebar-w: 308px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.68;
  color: var(--text);
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(0, 229, 255, .07), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(10, 126, 164, .1), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: inline-block; vertical-align: middle; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 0 0 var(--sp-3); color: #fff; }
h1 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
h2 { font-size: clamp(1.05rem, .9rem + .6vw, 1.3rem); font-weight: 700; letter-spacing: .02em; }
h3 { font-size: .98rem; font-weight: 700; letter-spacing: .02em; }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35rem; }
li { margin-bottom: var(--sp-2); }
a { color: var(--cyan); }
strong { color: #fff; }
button { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(0, 229, 255, .3); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan); color: #04121a; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius-md) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   LAYOUT — shell com sidebar fixa + coluna principal
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(13, 20, 36, .96) 0%, rgba(8, 12, 24, .98) 100%);
  border-right: 1px solid var(--hair);
  color: var(--text-2);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.brand img { border-radius: var(--radius-md); filter: drop-shadow(0 0 8px rgba(0, 229, 255, .35)); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt strong { font-family: var(--font-display); font-size: .92rem; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.brand-txt small { color: var(--muted); font-size: .8rem; }

.sidebar-close { display: none; color: var(--text-2); }

/* Anel de progresso */
.overall { display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-3); }
.ring { transform: rotate(-90deg); flex-shrink: 0; }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring-bg { stroke: rgba(255, 255, 255, .08); }
.ring-val {
  stroke: var(--cyan);
  stroke-dasharray: 226.2; /* 2πr, r=36 */
  stroke-dashoffset: 226.2;
  transition: stroke-dashoffset 700ms cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, .5));
}
.overall-txt strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: #fff; }
.overall-txt span { font-size: .82rem; color: var(--muted); line-height: 1.3; display: block; }

.progressbar {
  height: 8px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.progressbar.slim { height: 4px; margin: 0 var(--sp-4) var(--sp-4); }
.progressbar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--petrol), var(--cyan));
  border-radius: var(--radius-full);
  box-shadow: var(--glow-cyan);
  transition: width 500ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Navegação de módulos ---------- */
.modules-nav { flex: 1; padding: var(--sp-2); border-top: 1px solid var(--hair); }
.mod-group { margin-bottom: var(--sp-1); }
.mod-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  background: none; border: 0; color: var(--text-2); cursor: pointer;
  padding: var(--sp-3); border-radius: var(--radius-md); text-align: left;
  transition: background var(--t-fast);
}
.mod-toggle:hover { background: rgba(255, 255, 255, .05); }
.mod-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .03); }
.mod-ico {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: rgba(0, 229, 255, .1); color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, .18);
}
.mod-group.done .mod-ico { background: rgba(43, 255, 136, .1); color: var(--green); border-color: rgba(43, 255, 136, .25); }
.mod-meta { flex: 1; min-width: 0; }
.mod-meta b { display: block; font-size: .92rem; font-weight: 600; color: #eaf1fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-meta small { color: var(--muted); font-size: .8rem; }
.mod-pct { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.mod-group.done .mod-pct { color: var(--green); }

.lesson-list { list-style: none; margin: 0; padding: var(--sp-1) 0 var(--sp-2) var(--sp-4); }
.lesson-list[hidden] { display: none; }
.lesson-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); margin: 1px var(--sp-2) 1px 0;
  color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500;
  border-radius: var(--radius-sm); border-left: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast);
}
.lesson-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.lesson-link[aria-current="page"] {
  color: var(--cyan); background: rgba(0, 229, 255, .08);
  border-left-color: var(--cyan); font-weight: 600;
}
.lesson-dot {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--muted-2); display: grid; place-items: center; color: #04121a;
}
.lesson-link.is-done .lesson-dot { background: var(--green); border-color: var(--green); }
.lesson-link.is-done { color: rgba(43, 255, 136, .75); }

.sidebar-foot { padding: var(--sp-3) var(--sp-4) var(--sp-5); border-top: 1px solid var(--hair); display: grid; gap: var(--sp-2); }

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2, 5, 12, .7); backdrop-filter: blur(3px);
}

/* ---------- Topbar ---------- */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(6, 9, 18, .82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.crumb { flex: 1; margin: 0; font-size: .95rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb b { color: var(--text); }
.menu-btn { display: none; }

.icon-btn {
  background: none; border: 0; cursor: pointer; color: var(--text);
  width: 42px; height: 42px; border-radius: var(--radius-md);
  display: grid; place-items: center; transition: background var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); }

/* ---------- Conteúdo ---------- */
.content { flex: 1; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.content:focus { outline: none; }
.lesson-wrap { max-width: 880px; margin: 0 auto; }

.lesson-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: var(--sp-3);
}
.lesson-kicker::before { content: ""; width: 22px; height: 2px; background: var(--cyan); box-shadow: var(--glow-cyan); }

.lead { font-size: 1.22rem; color: var(--text-2); font-weight: 500; }

/* Animação de entrada (aplicada pelo JS via IntersectionObserver) */
.reveal { opacity: 0; transition: opacity 600ms ease; }
.reveal.in { opacity: 1; }

/* Cards e boxes informativos */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  transition: border-color var(--t-base);
}
.card:hover { border-color: var(--border-strong); }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.cards-2 .card, .cards-3 .card { margin-bottom: 0; }

.pillar-card { border-top: 2px solid var(--cyan); }
.pillar-card h3 { display: flex; align-items: center; gap: var(--sp-2); }
.pillar-card svg { color: var(--cyan); }

.callout {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid; border-radius: var(--radius-md);
  padding: var(--sp-4); margin-bottom: var(--sp-4); font-size: 1.02rem;
}
.callout svg { flex-shrink: 0; margin-top: 2px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout-info { background: var(--info-bg); border-color: var(--info-brd); color: var(--text-2); }
.callout-info svg { color: var(--cyan); }
.callout-warn { background: var(--warn-bg); border-color: var(--warn-brd); color: var(--text-2); }
.callout-warn svg { color: var(--orange); }
.callout-ok { background: var(--ok-bg); border-color: var(--ok-brd); color: var(--text-2); }
.callout-ok svg { color: var(--green); }

/* "Tradução simples" — box de analogia em linguagem acessível */
.simples {
  border: 1px dashed rgba(0, 229, 255, .35); background: rgba(0, 229, 255, .05);
  border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.simples-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--sp-2);
}
.simples-tag svg { color: var(--cyan); }
.simples p:last-child { margin-bottom: 0; }
.simples p { color: var(--text-2); }

.ms-tag {
  display: inline-block; font-family: var(--font-display); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
  background: rgba(0, 229, 255, .08); border: 1px solid rgba(0, 229, 255, .25);
  padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: var(--sp-2);
}

/* Termo com tooltip (glossário inline) */
.term {
  border-bottom: 1px dotted var(--cyan); cursor: help; position: relative; color: var(--cyan-2);
}
.term::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px;
  background: var(--gunmetal); color: var(--text); border: 1px solid var(--border-strong);
  font-size: .85rem; line-height: 1.45; padding: 8px 12px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast);
  z-index: 30;
}
.term:hover::after, .term:focus::after { opacity: 1; }

/* Tabela comparativa */
.table-wrap { overflow-x: auto; margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 560px; background: rgba(255, 255, 255, .02); }
table.cmp th, table.cmp td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.cmp thead th { background: rgba(0, 229, 255, .07); color: var(--cyan); font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }

/* Checklist */
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; }
.checklist svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }

/* ---------- Flip-cards (crossfade acessível, sem transform 3D) ---------- */
.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.flip {
  position: relative; text-align: left; cursor: pointer; min-height: 190px;
  background: var(--surface); border: 1px solid rgba(0, 229, 255, .22);
  border-radius: var(--radius-lg); padding: var(--sp-5); color: var(--text);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.flip:hover { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.flip-face { transition: opacity 350ms ease; }
.flip-front { display: block; }
.flip-back { display: block; position: absolute; inset: var(--sp-5); opacity: 0; pointer-events: none; font-size: .95rem; color: var(--text-2); overflow: auto; }
.flip.on .flip-front { opacity: 0; }
.flip.on .flip-back { opacity: 1; pointer-events: auto; }
.flip h3 { display: flex; align-items: center; gap: var(--sp-2); color: #fff; }
.flip h3 svg { color: var(--cyan); }
.flip-hint {
  position: absolute; right: var(--sp-3); bottom: var(--sp-2);
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}
.flip.on .flip-hint { display: none; }

/* ---------- Acordeão ("Na prática") ---------- */
.acc { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--sp-4); }
.acc-h {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-2); border: 0; border-bottom: 1px solid transparent;
  color: var(--text); cursor: pointer; text-align: left;
  padding: var(--sp-3) var(--sp-4); font-weight: 600; font-size: 1.02rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.acc-h:not(:first-child) { border-top: 1px solid var(--hair); }
.acc-h:hover { background: rgba(0, 229, 255, .07); color: var(--cyan-2); }
.acc-h .chev { margin-left: auto; transition: rotate 200ms ease; color: var(--muted); flex-shrink: 0; }
.acc-h[aria-expanded="true"] { color: var(--cyan); }
.acc-h[aria-expanded="true"] .chev { rotate: 180deg; }
.acc-p { padding: var(--sp-4); font-size: 1rem; color: var(--text-2); border-top: 1px solid var(--hair); background: rgba(0, 0, 0, .15); }
.acc-p[hidden] { display: none; }
.acc-p p:last-child, .acc-p ul:last-child { margin-bottom: 0; }

/* ---------- Tabs ---------- */
.tabs { margin-bottom: var(--sp-4); }
.tab-list { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--hair); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tab-btn {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer; padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--t-fast);
}
.tab-btn:hover { color: var(--text); }
.tab-btn[aria-selected="true"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-panel[hidden] { display: none; }

/* ---------- Calculadora de capacidade (slider) ---------- */
.calc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.calc-row { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.calc-row label { flex: 1; min-width: 190px; font-weight: 600; color: var(--text); }
.calc-row input[type="range"] { flex: 2; min-width: 160px; accent-color: var(--cyan); height: 28px; }
.calc-val { font-family: var(--font-display); font-size: .95rem; color: var(--cyan); min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.calc-box { background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); text-align: center; }
.calc-box small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.calc-box b { font-family: var(--font-display); font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; }
.calc-box.hl b { color: var(--cyan); text-shadow: 0 0 14px rgba(0, 229, 255, .5); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .72rem 1.3rem; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  min-height: 44px;
}
.btn-primary { background: linear-gradient(135deg, var(--petrol), #00b8d4); color: #fff; box-shadow: var(--glow-cyan); }
.btn-primary:hover { background: linear-gradient(135deg, #0c93bf, #00cfef); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--hair); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-block { width: 100%; }
.btn-sm { padding: .45rem .9rem; min-height: 38px; font-size: .72rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Navegação entre lições */
.lesson-nav {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hair);
}
.lesson-nav .spacer { flex: 1; }

/* ==========================================================================
   COMPONENTES INTERATIVOS (quiz, drag & drop, planner etc.)
   ========================================================================== */

/* ---------- Quiz ---------- */
.quiz-q { margin-bottom: var(--sp-5); }
.quiz-q fieldset { border: 0; padding: 0; margin: 0; }
.quiz-q legend { font-weight: 700; font-family: var(--font-body); color: #fff; margin-bottom: var(--sp-3); font-size: 1.12rem; }
.quiz-opt {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
  cursor: pointer; background: var(--surface); font-size: 1.02rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.quiz-opt:hover { border-color: var(--cyan); }
.quiz-opt input { margin-top: 6px; accent-color: var(--cyan); width: 17px; height: 17px; flex-shrink: 0; }
.quiz-opt.sel { border-color: var(--cyan); background: rgba(0, 229, 255, .07); }
.quiz-opt.opt-ok { border-color: var(--ok-brd); background: var(--ok-bg); }
.quiz-opt.opt-err { border-color: var(--err-brd); background: var(--err-bg); }
.opt-feedback { display: block; font-size: .95rem; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--border-strong); color: var(--text-2); }
.quiz-score { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }

.activity-feedback { margin-top: var(--sp-4); }
.activity-feedback:empty { display: none; }

/* ---------- Drag & drop (papéis) ---------- */
.dd-pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); min-height: 52px; padding: var(--sp-3); background: rgba(0, 0, 0, .2); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); }
.dd-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--gunmetal-2); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: var(--radius-full);
  padding: .45rem .95rem; font-size: .95rem; font-weight: 600; cursor: grab;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dd-chip svg { color: var(--muted); }
.dd-chip:hover { border-color: var(--cyan); }
.dd-chip[aria-pressed="true"] { border-color: var(--cyan); background: rgba(0, 229, 255, .1); box-shadow: var(--glow-cyan); }
.dd-chip.chip-ok { border-color: var(--ok-brd); background: var(--ok-bg); color: var(--green); }
.dd-chip.chip-err { border-color: var(--err-brd); background: var(--err-bg); color: var(--red); }
.dd-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.dd-zone {
  background: var(--surface); border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg); padding: var(--sp-4); min-height: 150px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dd-zone.over { border-color: var(--cyan); background: rgba(0, 229, 255, .06); }
.dd-zone h4 { margin: 0 0 var(--sp-1); font-family: var(--font-display); font-size: .85rem; color: var(--cyan); letter-spacing: .04em; }
.dd-zone .zone-hint { font-size: .85rem; color: var(--muted); margin-bottom: var(--sp-3); }
.dd-zone .zone-chips { display: flex; flex-direction: column; gap: var(--sp-2); }
.dd-explain { font-size: .95rem; color: var(--text-2); margin: var(--sp-1) 0 0; }

/* ---------- Backlog builder / planner ---------- */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.panel-h { padding: var(--sp-3) var(--sp-4); background: rgba(0, 229, 255, .07); border-bottom: 1px solid var(--hair); color: var(--cyan); font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.panel-h small { color: var(--muted); font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .85rem; }
.panel-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 120px; }
.panel-empty { color: var(--muted); font-size: .95rem; text-align: center; padding: var(--sp-4); border: 1.5px dashed var(--border); border-radius: var(--radius-md); }

.bk-item {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3); background: rgba(255, 255, 255, .03); font-size: .98rem;
}
.bk-item .bk-title { flex: 1; font-weight: 600; color: var(--text); }
.bk-item .bk-cat { display: block; font-weight: 500; font-size: .8rem; color: var(--muted); }
.bk-pts {
  flex-shrink: 0; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; font-size: .72rem;
  background: rgba(0, 229, 255, .1); color: var(--cyan); border: 1px solid rgba(0, 229, 255, .2); border-radius: var(--radius-full); padding: 3px 10px;
}
.bk-move { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: transparent; color: var(--cyan); cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast), box-shadow var(--t-fast); }
.bk-move:hover { background: rgba(0, 229, 255, .12); box-shadow: var(--glow-cyan); }

.capacity-meter { margin: var(--sp-4) 0; }
.capacity-row { display: flex; justify-content: space-between; font-size: .98rem; margin-bottom: var(--sp-2); }
.capacity-row strong { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-size: .88rem; }
.capacity-bar { height: 12px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .08); overflow: hidden; }
.capacity-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--petrol), var(--cyan)); box-shadow: var(--glow-cyan); transition: width 300ms ease, background 300ms ease; }
.capacity-bar.warn span { background: var(--orange); box-shadow: 0 0 10px rgba(255, 157, 46, .4); }
.capacity-bar.over span { background: var(--red); box-shadow: 0 0 10px rgba(255, 84, 112, .45); }

/* ---------- Timeline de cerimônias ---------- */
.tl-slots { display: grid; gap: var(--sp-3); }
.tl-slot { display: flex; gap: var(--sp-4); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); }
.tl-when { flex: 1; }
.tl-when b { display: block; font-family: var(--font-display); color: #fff; font-size: .85rem; letter-spacing: .02em; }
.tl-when small { color: var(--muted); font-size: .9rem; }
.tl-slot select {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: .55rem .7rem;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--gunmetal-2); color: var(--text); min-width: 220px; min-height: 44px;
}
.tl-slot.slot-ok { border-color: var(--ok-brd); background: var(--ok-bg); }
.tl-slot.slot-err { border-color: var(--err-brd); background: var(--err-bg); }

/* ---------- Dashboard fictício ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--cyan); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); }
.kpi small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; font-family: var(--font-display); }
.kpi b { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(0, 229, 255, .4); }
.kpi span { display: block; font-size: .88rem; color: var(--text-2); }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.chart-card svg { width: 100%; height: auto; }
.chart-legend { display: flex; gap: var(--sp-4); font-size: .9rem; color: var(--text-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.chart-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
/* Animação de "desenho" da linha do burndown */
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.line-anim { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw-line 1.6s ease forwards 300ms; }

/* ---------- Estudo de caso ---------- */
.case-step { margin-bottom: var(--sp-4); }
.case-choice {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
  cursor: pointer; font-size: 1.02rem; transition: border-color var(--t-fast);
}
.case-choice:hover { border-color: var(--cyan); }
.case-choice[disabled] { cursor: default; opacity: .6; }
.case-choice.pick-best { border-color: var(--ok-brd); background: var(--ok-bg); opacity: 1; }
.case-choice.pick-mid { border-color: var(--warn-brd); background: var(--warn-bg); opacity: 1; }
.case-choice.pick-bad { border-color: var(--err-brd); background: var(--err-bg); opacity: 1; }

/* ---------- Home / hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0a1226 0%, #060912 70%);
  border: 1px solid rgba(0, 229, 255, .18);
  border-radius: var(--radius-lg); color: var(--text-2);
  padding: var(--sp-6); margin-bottom: var(--sp-5);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero > :not(canvas) { position: relative; }
.hero h1 { color: #fff; text-shadow: 0 0 24px rgba(0, 229, 255, .35); }
.hero .lead { color: var(--text-2); max-width: 62ch; }
.hero .btn-primary { margin-top: var(--sp-3); }
.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.home-stats h2 { color: var(--cyan); text-shadow: 0 0 16px rgba(0, 229, 255, .4); }
.mod-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.mod-card { display: flex; gap: var(--sp-4); align-items: flex-start; text-decoration: none; color: inherit; transition: box-shadow var(--t-base), border-color var(--t-base); }
.mod-card:hover { box-shadow: var(--glow-cyan); border-color: rgba(0, 229, 255, .4); }
.mod-card .mod-ico { width: 44px; height: 44px; }
.mod-card h3 { margin-bottom: var(--sp-1); font-size: .88rem; }
.mod-card p { font-size: .95rem; color: var(--text-2); margin-bottom: var(--sp-2); }
.mod-card .progressbar { height: 5px; }
.status-pill { display: inline-block; font-family: var(--font-display); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-full); padding: 3px 10px; margin-bottom: var(--sp-2); }
.status-pill.st-none { background: rgba(255, 255, 255, .05); color: var(--muted); border: 1px solid var(--border); }
.status-pill.st-part { background: rgba(0, 229, 255, .1); color: var(--cyan); border: 1px solid rgba(0, 229, 255, .25); }
.status-pill.st-done { background: var(--ok-bg); color: var(--green); border: 1px solid var(--ok-brd); }

/* ---------- Resumo executivo ---------- */
.resumo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.resumo-card h3 { display: flex; align-items: center; gap: var(--sp-2); color: #fff; font-size: .85rem; }
.resumo-card h3 svg { color: var(--cyan); flex-shrink: 0; }
.resumo-card ul { margin-bottom: 0; font-size: .98rem; color: var(--text-2); }
.resumo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------- Toast de conquista ---------- */
.toast {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 90;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--gunmetal); border: 1px solid var(--ok-brd);
  color: var(--text); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), var(--glow-green);
  font-weight: 600; max-width: min(420px, calc(100vw - 2rem));
  opacity: 0; transition: opacity 300ms ease;
}
.toast.show { opacity: 1; }
.toast svg { color: var(--green); flex-shrink: 0; }
.toast b { color: var(--green); font-family: var(--font-display); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; display: block; }

/* ==========================================================================
   GRÁFICOS SVG (viz.js) — barras, fluxo cumulativo, rosca, comparativo, radar
   Padrão: o SVG já nasce no estado final; as animações partem de um estado
   inicial. Se a animação não rodar, o gráfico continua correto e legível.
   ========================================================================== */
.chart { margin: 0 0 var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
.chart-title { font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--cyan); margin-bottom: var(--sp-3); text-transform: uppercase; }
.chart-body svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.chart .axis { fill: rgba(255, 255, 255, .45); font-size: 10px; font-family: var(--font-body); }

/* Barras (velocity) — crescem da base */
@keyframes bar-grow { from { transform: scaleY(0); } }
.chart .bar { transform-box: fill-box; transform-origin: bottom; animation: bar-grow .7s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.chart .bar-plan { fill: rgba(255, 255, 255, .22); }
.chart .bar-done { fill: var(--cyan); filter: drop-shadow(0 0 5px rgba(0, 229, 255, .45)); }
.chart .bar-done.bar-met { fill: var(--green); filter: drop-shadow(0 0 5px rgba(43, 255, 136, .5)); }
.chart .bar:hover { opacity: .82; }

/* Áreas empilhadas (CFD) — surgem em cascata */
@keyframes area-in { from { opacity: 0; } }
.chart .area { animation: area-in .6s ease backwards; animation-delay: calc(var(--i, 0) * 130ms); }

/* Rosca — segmentos se desenham */
@keyframes donut-in { from { opacity: 0; transform: rotate(-24deg); } }
.donut-wrap { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; justify-content: center; }
.donut-wrap svg { width: 180px; flex-shrink: 0; }
.donut-seg { transform-origin: 90px 90px; animation: donut-in .7s ease backwards; animation-delay: calc(var(--i, 0) * 110ms); transition: opacity var(--t-fast); }
.donut-seg:hover { opacity: .75; }
.donut-c1 { fill: #fff; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.donut-c2 { fill: rgba(255, 255, 255, .5); font-size: 10px; font-family: var(--font-body); }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; }
.donut-legend li { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--hair); margin: 0; font-size: .98rem; }
.donut-legend li:last-child { border-bottom: 0; }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend span { flex: 1; color: var(--text-2); }
.donut-legend b { font-family: var(--font-display); font-size: .88rem; color: #fff; }

/* Comparativo horizontal */
@keyframes bench-grow { from { width: 0; } }
.bench-row { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--hair); }
.bench-row:last-child { border-bottom: 0; }
.bench-label { font-weight: 600; color: var(--text); font-size: .98rem; }
.bench-label small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted-2); }
.bench-bars { display: grid; gap: 5px; }
.bench-line { display: flex; align-items: center; gap: var(--sp-2); }
.bench-fill { height: 9px; border-radius: var(--radius-full); width: var(--w); animation: bench-grow .8s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.bench-fill.fa { background: linear-gradient(90deg, var(--petrol), var(--cyan)); box-shadow: 0 0 8px rgba(0, 229, 255, .35); }
.bench-fill.fb { background: #5b6b86; }
.bench-line b { font-family: var(--font-display); font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bench-delta { font-family: var(--font-display); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.bench-delta.up { color: var(--green); }
.bench-delta.down { color: var(--red); }

/* Radar de maturidade */
@keyframes radar-in { from { transform: scale(.05); opacity: 0; } }
.radar-grid { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.radar-shape { fill: rgba(0, 229, 255, .18); stroke: var(--cyan); stroke-width: 2; transform-origin: 130px 130px; animation: radar-in .6s cubic-bezier(.2, .8, .3, 1); filter: drop-shadow(0 0 8px rgba(0, 229, 255, .4)); }
.radar-dot { fill: var(--cyan); }
.radar-label { fill: rgba(255, 255, 255, .72); font-size: 11px; font-family: var(--font-display); letter-spacing: .02em; }

/* Sparkline nos KPIs */
.spark { display: block; margin-top: 4px; opacity: .9; }

/* ==========================================================================
   ATIVIDADE — RADAR DE MATURIDADE
   ========================================================================== */
.mat-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-5); align-items: start; }
.mat-radar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); position: sticky; top: 84px; }
.mat-radar svg { width: 100%; height: auto; overflow: visible; }
.mat-score { text-align: center; margin-top: var(--sp-2); }
.mat-score b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--cyan); text-shadow: 0 0 20px rgba(0, 229, 255, .5); line-height: 1.1; }
.mat-score small { color: var(--muted); font-size: .85rem; }
.mat-dim { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.mat-dim h4 { font-family: var(--font-display); font-size: .82rem; color: var(--cyan); margin: 0 0 var(--sp-2); letter-spacing: .03em; }
.mat-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.mat-opt { flex: 1; min-width: 40px; min-height: 40px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-display); font-size: .85rem; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.mat-opt:hover { border-color: var(--cyan); color: var(--cyan); }
.mat-opt[aria-pressed="true"] { background: rgba(0, 229, 255, .14); border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.mat-desc { font-size: .93rem; color: var(--text-2); margin: var(--sp-2) 0 0; min-height: 2.4em; }

/* ==========================================================================
   GLOSSÁRIO
   ========================================================================== */
.gloss-search { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.gloss-search input {
  flex: 1; min-width: 220px; font-family: var(--font-body); font-size: 1.05rem;
  padding: .7rem 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--gunmetal-2); color: var(--text); min-height: 46px;
}
.gloss-search input::placeholder { color: var(--muted-2); }
.gloss-count { font-family: var(--font-display); font-size: .78rem; color: var(--muted); white-space: nowrap; }
.gloss-list { display: grid; gap: var(--sp-3); }
.gloss-item { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--cyan); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); }
.gloss-item h3 { font-size: .95rem; margin: 0 0 var(--sp-1); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.gloss-item p { margin: 0; color: var(--text-2); font-size: 1rem; }
.gloss-mod { font-family: var(--font-display); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); background: rgba(0, 229, 255, .08); border: 1px solid rgba(0, 229, 255, .22); padding: 2px 8px; border-radius: var(--radius-full); text-decoration: none; }
.gloss-mod:hover { background: rgba(0, 229, 255, .18); }
mark { background: rgba(0, 229, 255, .28); color: #fff; border-radius: 2px; padding: 0 2px; }

/* ==========================================================================
   EFEITOS VISUAIS GLOBAIS
   ========================================================================== */

/* Barra de progresso de leitura da lição (topo da tela) */
.read-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; background: transparent; }
.read-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--petrol), var(--cyan)); box-shadow: 0 0 10px rgba(0, 229, 255, .7); transition: width 120ms linear; }

/* Malha de fundo sutil (grid tech) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(0, 229, 255, .035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 229, 255, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* Tilt + brilho que segue o cursor nos cards de módulo */
.mod-card { position: relative; overflow: hidden; }
.mod-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 229, 255, .14), transparent 65%);
  transition: opacity var(--t-base);
}
.mod-card:hover::after { opacity: 1; }

/* Título com gradiente animado no hero.
   Só aplica onde background-clip:text existe — senão o texto ficaria invisível. */
@keyframes hue-slide { to { background-position: 220% center; } }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 {
    background: linear-gradient(100deg, #fff 20%, var(--cyan) 42%, #fff 64%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: hue-slide 7s linear infinite;
  }
}

/* Confetti (canvas temporário na conclusão de módulo) */
#confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; }

/* Contadores/valores com brilho ao atualizar */
@keyframes val-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.pop { animation: val-pop .45s ease; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; left: -360px; top: 0; z-index: 70; height: 100dvh;
    transition: left 280ms cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-lg); width: min(var(--sidebar-w), 86vw);
  }
  body.sidebar-open .sidebar { left: 0; }
  .sidebar-close, .menu-btn { display: grid; }
  .content { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}
@media (max-width: 860px) {
  .cards-3, .dd-zones, .flip-grid, .calc-out { grid-template-columns: 1fr; }
  .mat-grid { grid-template-columns: 1fr; }
  .mat-radar { position: static; }
  .bench-row { grid-template-columns: 1fr auto; }
  .bench-bars { grid-column: 1 / -1; }
  .split-2, .resumo-grid, .mod-cards { grid-template-columns: 1fr; }
  .flip { min-height: 0; }
  .flip-back { position: static; display: none; }
  .flip.on .flip-back { display: block; }
  .flip.on .flip-front { display: none; opacity: 1; }
}
@media (max-width: 640px) {
  body { font-size: 1.05rem; }
  .cards-2, .home-stats { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .topbar-resumo span { display: none; }
  .tl-slot { flex-direction: column; align-items: stretch; }
  .tl-slot select { min-width: 0; width: 100%; }
  .lesson-nav { flex-direction: column-reverse; }
  .lesson-nav .btn { width: 100%; }
  .hero { padding: var(--sp-5); }
  .toast { right: var(--sp-3); bottom: var(--sp-3); }
}

/* ---------- Impressão (Resumo executivo) ---------- */
@media print {
  .sidebar, .topbar, .scrim, .lesson-nav, .toast, .no-print,
  .read-bar, #confetti { display: none !important; }
  body::before { display: none !important; }
  /* desfaz o texto em gradiente para imprimir legível */
  .hero h1 { -webkit-text-fill-color: #0f2a4a !important; color: #0f2a4a !important; background: none !important; animation: none !important; }
  body { background: #fff; color: #16283f; font-size: 11pt; }
  h1, h2, h3, h4, strong { color: #0f2a4a; }
  .content { padding: 0; }
  .card, .resumo-card { box-shadow: none; break-inside: avoid; border-color: #ccd6e6; background: #fff; }
  .resumo-card ul, .callout { color: #33465e; }
  .resumo-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .line-anim { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}