/* Layout: palco de cinema escuro (16:9; 4:5 no celular) com cenas sobrepostas; abaixo, dossiê em coluna de leitura.
   Visual escuro de propósito (tema único), no estilo da referência. */
:root {
  --ink: #070B1A; --ink2: #0D1330; --panel: #121A3D; --line: rgba(150,165,255,.18);
  --fg: #EEF1FF; --muted: #9AA4CC;
  --paper: #F3F5FA; --paper-ink: #141A33; --paper-muted: #5B6383; --paper-line: #D9DDEA;
  --g1: #34D399; --g2: #60A5FA; --g3: #F472B6; --warn: #FBBF24; --bad: #F87171; --okd: #047857;
  --f-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --f-doc: Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
body { background: var(--ink); color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.55; }
.wrap { max-width: 1120px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--g2); outline-offset: 3px; }

.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-block: 20px 14px; }
.top p { margin: 0; }
.brand { font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; font-size: 18px; }
.meta { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }

/* ---------- palco ---------- */
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, #131C48 0%, var(--ink) 62%); border: 1px solid var(--line); container-type: inline-size; }
@media (max-width: 640px) { .stage { aspect-ratio: 4 / 5; border-radius: 14px; } }
.glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.g-a { background: var(--g2); left: -18%; top: -30%; opacity: .32; }
.g-b { background: var(--g3); right: -22%; bottom: -40%; opacity: .2; }
.scene { position: absolute; inset: 0; z-index: 1; visibility: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqi; padding: 5cqi 6cqi; }
.scene.is-on, .scene.leaving { visibility: visible; }
.scene.light { background: var(--paper); color: var(--paper-ink); }

.eyebrow, .tag { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(9px, 1.15cqi, 13px); color: var(--muted); margin: 0; }
.tag { color: var(--g2); display: flex; align-items: center; gap: 1cqi; }
.tag::before { content: ""; width: 3cqi; height: 2px; background: var(--g2); }
.display { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 7.4cqi, 92px); line-height: .95; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.h { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 4cqi, 50px); line-height: 1.05; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.grad { font-family: var(--f-accent); font-style: italic; font-weight: 400; letter-spacing: 0; padding-right: .08em;
  background: linear-gradient(90deg, var(--g1), var(--g2) 45%, var(--g3) 90%, var(--g1)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.display .grad, .h .grad { font-size: 1.08em; }
.w { display: inline-block; }
.sub { color: var(--muted); font-size: clamp(13px, 1.8cqi, 21px); margin: 0; max-width: 40ch; }

/* cena 1 */
.docs { position: absolute; right: 4cqi; top: calc(50% - 16cqi); width: 40cqi; height: 32cqi; }
.doc { position: absolute; width: 17cqi; aspect-ratio: 3 / 4; background: var(--paper); color: var(--paper-ink); border-radius: 6px; padding: 1.5cqi;
  display: flex; flex-direction: column; gap: .8cqi; box-shadow: 0 2cqi 5cqi rgba(0,0,0,.55); font-size: clamp(8px, 1.2cqi, 14px); }
.doc b { font-family: var(--f-display); font-size: 1.3em; line-height: 1.05; }
.doc span { font-family: var(--f-mono); color: var(--paper-muted); font-size: .9em; margin-bottom: .6cqi; }
.doc i { display: block; height: .5cqi; min-height: 3px; border-radius: 2px; background: var(--paper-line); }
.doc i:nth-of-type(2) { width: 82%; } .doc i:nth-of-type(3) { width: 58%; }
.d1 { left: 0; top: 10%; transform: rotate(-9deg); }
.d2 { left: 30%; top: -4%; transform: rotate(5deg); z-index: 2; }
.d3 { left: 58%; top: 16%; transform: rotate(-3deg); z-index: 3; box-shadow: 0 0 0 2px var(--g3), 0 2cqi 5cqi rgba(0,0,0,.55); }
.hero { position: relative; z-index: 2; max-width: 50cqi; display: flex; flex-direction: column; gap: 2cqi; }

/* cena 2 */
.tlwrap { position: relative; }
.rail { position: absolute; display: block; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); }
.tlwrap .rail { left: 0; right: 0; top: .7cqi; height: 2px; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2cqi; }
.tl li { position: relative; padding-top: 3.4cqi; display: flex; flex-direction: column; gap: .4cqi; font-size: clamp(11px, 1.45cqi, 17px); line-height: 1.3; }
.tl li::before { content: ""; position: absolute; top: 0; left: 0; width: 1.4cqi; height: 1.4cqi; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--ink); border: 2px solid var(--g2); }
.tl time { font-family: var(--f-mono); color: var(--g2); font-size: .85em; }
.tl b { font-family: var(--f-display); font-size: 1.35em; line-height: 1.1; }
.tl span { color: var(--muted); }
.tl .hot::before { border-color: var(--warn); background: var(--warn); box-shadow: 0 0 0 .8cqi rgba(251,191,36,.18); }
.tl .hot time { color: var(--warn); }
.tl .now::before { border-color: var(--g1); background: var(--g1); box-shadow: 0 0 0 .8cqi rgba(52,211,153,.2); }
.tl .now time { color: var(--g1); }

/* cenas 3 e 4 */
.paper { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 12px; padding: 2.4cqi 2.8cqi; box-shadow: 0 3cqi 6cqi rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 1cqi; }
.paper small { font-family: var(--f-mono); color: var(--paper-muted); font-size: clamp(9px, 1.1cqi, 13px); letter-spacing: .06em; text-transform: uppercase; }
.clause { font-family: var(--f-doc); font-size: clamp(13px, 2cqi, 26px); line-height: 1.35; margin: 0; }
.clause.strong { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
mark.mk { color: inherit; padding: 0 .08em; background: linear-gradient(transparent 52%, rgba(244,114,182,.55) 52%) no-repeat; background-size: var(--m, 100%) 100%; }
.stamp { position: absolute; right: 3cqi; bottom: -2.4cqi; transform: rotate(-7deg); border: 3px solid var(--bad); color: #C2263B; background: #FFF5F6; border-radius: 8px;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .6cqi 1.4cqi; font-size: clamp(10px, 1.6cqi, 20px); }
.facts { list-style: none; margin: 1.4cqi 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4cqi; }
.facts li, .chip-co { border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 999px; padding: .9cqi 1.8cqi; font-size: clamp(11px, 1.5cqi, 18px); }
.facts b { color: var(--g1); font-weight: 600; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; }
.note { margin: 0; font-size: clamp(11px, 1.4cqi, 16px); color: var(--paper-muted); }
.note.ok { color: var(--okd); font-weight: 600; }

/* cena 5 */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 6cqi minmax(0, 1.6fr) 6cqi minmax(0, 1fr); align-items: center; }
.node { border: 1px solid var(--line); background: rgba(18,26,61,.85); border-radius: 14px; padding: 1.6cqi 1.8cqi; font-weight: 600; font-size: clamp(12px, 1.6cqi, 19px); line-height: 1.25; }
.node small { display: block; font-weight: 400; color: var(--muted); font-size: .8em; margin-top: .4em; }
.branches { display: grid; gap: 3cqi; }
.ln { width: 100%; height: 100%; overflow: visible; }
.ln path { fill: none; stroke: var(--g2); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.goal { text-align: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 2.4cqi, 30px); border: 2px solid transparent;
  background: linear-gradient(var(--ink2), var(--ink2)) padding-box, linear-gradient(120deg, var(--g1), var(--g2), var(--g3)) border-box; }
.goal .grad { display: block; font-size: 1.25em; }

/* cena 6 */
.num { font-variant-numeric: tabular-nums; color: var(--warn); white-space: nowrap; }
.bar { display: flex; gap: 3px; height: 4cqi; min-height: 22px; border-radius: 10px; overflow: hidden; }
.seg { width: calc(var(--w) * 1%); display: block; }
.s1, .c1 { background: #7D87B9; } .s2, .c2 { background: var(--g3); } .s3, .c3 { background: var(--warn); } .s4, .c4 { background: var(--g1); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqi 4cqi; font-size: clamp(11px, 1.5cqi, 18px); }
.legend li { display: flex; align-items: center; gap: 1cqi; }
.legend i { width: 1.4cqi; height: 1.4cqi; min-width: 9px; min-height: 9px; border-radius: 3px; flex: none; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.foot { margin: 0; color: var(--muted); font-size: clamp(10px, 1.3cqi, 15px); font-family: var(--f-mono); }

/* cena 7 */
.own { display: grid; grid-template-columns: minmax(0, 1fr) 8cqi minmax(0, 1.1fr); align-items: center; gap: 1.6cqi; }
.chip-co { border-color: rgba(244,114,182,.5); border-radius: 14px; font-weight: 600; }
.chip-co small, .co small { display: block; font-weight: 400; color: var(--muted); font-size: .82em; }
.arw { position: relative; display: block; height: 2px; background: linear-gradient(90deg, var(--g3), var(--g2)); }
.arw::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--g2); border-right: 0; }
.co { position: relative; border: 1px solid rgba(96,165,250,.55); background: rgba(18,26,61,.85); border-radius: 14px; padding: 1.8cqi 2cqi; font-family: var(--f-display); font-weight: 700; font-size: clamp(13px, 1.9cqi, 23px); }
.badge { position: absolute; top: -1.6cqi; right: 1.6cqi; background: var(--g1); color: #04261A; font-family: var(--f-body); font-weight: 700; font-size: clamp(9px, 1.1cqi, 13px); border-radius: 999px; padding: .3cqi 1.2cqi; }
.verdict { list-style: none; margin: 1cqi 0 0; padding: 0; display: grid; gap: 1.4cqi; font-size: clamp(11px, 1.6cqi, 19px); }
.verdict li { display: grid; grid-template-columns: 3cqi 1fr; gap: 1.2cqi; align-items: start; color: var(--muted); }
.verdict li::before { display: grid; place-items: center; width: 3cqi; height: 3cqi; min-width: 18px; min-height: 18px; border-radius: 50%; font-weight: 800; font-size: .9em; }
.verdict .no::before { content: "✕"; background: rgba(248,113,113,.18); color: var(--bad); }
.verdict .yes::before { content: "✓"; background: rgba(52,211,153,.18); color: var(--g1); }
.verdict b { color: var(--fg); }

/* cena 8 (clara) */
.stwrap { position: relative; }
.stwrap .rail { left: 2cqi; right: 2cqi; top: 2cqi; height: 2px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.2cqi; }
.steps li { display: flex; flex-direction: column; gap: .8cqi; position: relative; }
.steps .n { display: grid; place-items: center; width: 4cqi; height: 4cqi; min-width: 22px; min-height: 22px; border-radius: 50%; background: var(--paper-ink); color: var(--paper); font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: clamp(11px, 1.6cqi, 19px); }
.steps li:last-child .n { background: var(--g1); color: #04261A; }
.steps b { font-family: var(--f-display); font-weight: 700; font-size: clamp(11px, 1.55cqi, 19px); line-height: 1.15; }
.steps span { font-family: var(--f-mono); color: var(--paper-muted); font-size: clamp(9px, 1.05cqi, 13px); }
.light .grad { background-image: linear-gradient(90deg, #059669, #2563EB 50%, #DB2777 90%, #059669); }

/* cena 9 */
.s-end { align-items: center; text-align: center; }
.brand-end { font-family: var(--f-display); font-weight: 800; font-size: clamp(14px, 2.2cqi, 26px); margin: 1.5cqi 0 0; }
.fine { margin: 0; font-family: var(--f-mono); color: var(--muted); font-size: clamp(9px, 1.1cqi, 13px); }

/* play inicial */
.bigplay { position: absolute; z-index: 5; left: 50%; bottom: 5cqi; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 12px 22px 12px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(7,11,26,.72); backdrop-filter: blur(8px); text-align: left; }
.bigplay b { display: block; font-family: var(--f-display); font-size: 17px; }
.bigplay small { display: block; color: var(--muted); font-size: 12px; }
.pl { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); position: relative; flex: none; }
.pl::after { content: ""; position: absolute; left: 17px; top: 13px; border: 9px solid transparent; border-left: 14px solid #06122A; border-right: 0; }
.bigplay:hover .pl { filter: brightness(1.1); }

/* legenda e controles */
.caption { margin: 0; min-height: 4.4em; padding: 16px 2px 6px; font-size: clamp(16px, 1.9vw, 21px); line-height: 1.45; max-width: 70ch; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 6px 8px; }
.ctl { min-width: 40px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; padding: 0 12px; font-size: 15px; }
.ctl.wide { font-weight: 600; font-size: 14px; }
.ctl:hover { border-color: var(--g2); }
.chapters { flex: 1 1 220px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; min-width: 0; }
.chap { height: 26px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.chap::before, .chap .fill { content: ""; position: absolute; left: 0; top: 11px; height: 4px; border-radius: 2px; }
.chap::before { right: 0; background: var(--line); }
.chap .fill { width: 0; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.where { font-family: var(--f-mono); font-size: 12px; color: var(--muted); min-width: 0; }

@container (max-width: 640px) {
  .scene { padding: 7cqi 6cqi; gap: 3.4cqi; }
  .s-open { justify-content: flex-end; }
  .docs { right: 6cqi; top: 6cqi; width: 84cqi; height: 50cqi; }
  .doc { width: 30cqi; padding: 2.4cqi; font-size: 2.8cqi; }
  .hero { max-width: none; }
  .display { font-size: 11cqi; }
  .h { font-size: 6.4cqi; }
  .sub { font-size: 3.8cqi; }
  .eyebrow, .tag { font-size: 2.6cqi; }
  .tlwrap .rail { left: 1.4cqi; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tl { grid-template-columns: 1fr; gap: 2.6cqi; padding-left: 7cqi; }
  .tl li { padding-top: 0; font-size: 3.3cqi; }
  .tl li::before { left: -7cqi; top: .2em; width: 3cqi; height: 3cqi; }
  .clause { font-size: 4.2cqi; } .paper { padding: 4cqi; gap: 2cqi; } .paper small { font-size: 2.5cqi; }
  .stamp { font-size: 3.2cqi; bottom: -3.6cqi; }
  .facts { flex-direction: column; gap: 2cqi; } .facts li { font-size: 3.4cqi; padding: 1.6cqi 3cqi; }
  .pair { grid-template-columns: 1fr; gap: 3cqi; } .note { font-size: 3.1cqi; }
  .s-f2 .clause { font-size: 3.6cqi; }
  .flow { grid-template-columns: 1fr; gap: 3cqi; } .ln { display: none; } .branches { gap: 2.4cqi; }
  .node { font-size: 3.5cqi; padding: 3cqi; } .goal { font-size: 4.6cqi; }
  .bar { height: 7cqi; } .legend { grid-template-columns: 1fr; font-size: 3.4cqi; gap: 2cqi; } .legend i { width: 3cqi; height: 3cqi; }
  .foot { font-size: 2.8cqi; }
  .own { grid-template-columns: 1fr; gap: 3cqi; } .arw { width: 2px; height: 5cqi; margin-left: 6cqi; background: linear-gradient(var(--g3), var(--g2)); }
  .arw::after { right: auto; left: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--g2); border-bottom: 0; }
  .chip-co, .co { font-size: 3.6cqi; padding: 2.6cqi 3.4cqi; } .badge { font-size: 2.6cqi; top: -2.6cqi; padding: .6cqi 2.4cqi; }
  .verdict { font-size: 3.3cqi; gap: 2.6cqi; } .verdict li { grid-template-columns: 6cqi 1fr; gap: 2.4cqi; }
  .stwrap .rail { left: 3.6cqi; right: auto; top: 2cqi; bottom: 2cqi; width: 2px; height: auto; }
  .steps { grid-template-columns: 1fr; gap: 2.2cqi; }
  .steps li { flex-direction: row; align-items: center; gap: 3cqi; }
  .steps .n { width: 7.4cqi; height: 7.4cqi; font-size: 3.4cqi; flex: none; }
  .steps b { font-size: 3.6cqi; flex: 1; } .steps span { font-size: 2.6cqi; text-align: right; max-width: 30%; }
  .brand-end { font-size: 4.6cqi; } .fine { font-size: 2.6cqi; }
  .bigplay { bottom: auto; top: 42%; }
}

/* ---------- dossiê ---------- */
.dossier { display: flex; flex-direction: column; gap: 56px; padding-block: 48px 64px; }
.block { display: flex; flex-direction: column; gap: 14px; }
.block h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.block h3 { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.25; margin: 0; text-wrap: balance; }
.kicker { margin: 0; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--g2); }
.lead { margin: 0; color: var(--muted); }
.summary { margin: 0; padding-left: 20px; display: grid; gap: 10px; max-width: 72ch; font-size: 17px; }
.summary b, .card b, .box b, .plan b { color: #fff; }
.tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
th { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
td small { color: var(--muted); }
td.d { font-family: var(--f-mono); white-space: nowrap; color: var(--g2); font-variant-numeric: tabular-nums; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink2); min-width: 0; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.pill { align-self: flex-start; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.pill.strong { background: rgba(52,211,153,.16); color: var(--g1); }
.pill.mid { background: rgba(251,191,36,.16); color: var(--warn); }
.pill.check { background: rgba(96,165,250,.16); color: var(--g2); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.box { padding: 22px; border-radius: 14px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.box p, .box li { color: var(--muted); font-size: 15px; margin: 0; }
.box ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.box.good { border-color: rgba(52,211,153,.45); }
.box.good .kicker { color: var(--g1); }
.box.risk { border-color: rgba(248,113,113,.45); }
.box.risk .kicker { color: var(--bad); }
.plan { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan > li { counter-increment: p; position: relative; padding: 18px 18px 18px 64px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink2); display: flex; flex-direction: column; gap: 6px; }
.plan > li::before { content: counter(p); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--g1), var(--g2)); color: #06122A; font-family: var(--f-display); font-weight: 800; }
.plan > li:has(input:checked) { border-color: rgba(52,211,153,.5); }
.plan > li:has(input:checked) h3 { text-decoration: line-through; text-decoration-color: var(--g1); }
.plan .who { margin: 0; font-family: var(--f-mono); font-size: 12px; color: var(--g2); }
.plan ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 15px; }
.done { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.done input { width: 18px; height: 18px; accent-color: var(--g1); }
.plan h3 { padding-right: 70px; }
.cal { margin-top: 10px; padding: 20px; border-radius: 14px; border: 1px dashed var(--line); display: flex; flex-direction: column; gap: 12px; }
.cal ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.cal li { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); }
.cal time { font-family: var(--f-mono); color: var(--fg); font-size: 13px; }
.legal { border-top: 1px solid var(--line); padding-top: 18px; }
.legal p { margin: 0; color: var(--muted); font-size: 13px; max-width: 80ch; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* legenda grande na tela (aparece só durante a apresentação) */
.sub { position: absolute; z-index: 4; left: 50%; bottom: 3.2cqi; transform: translateX(-50%); width: max-content; max-width: 88%; margin: 0;
  padding: 1cqi 2.2cqi; border-radius: 1.4cqi; background: rgba(5, 8, 20, .86); box-shadow: 0 1cqi 3cqi rgba(0,0,0,.35);
  font-family: var(--f-body); font-weight: 600; font-size: clamp(15px, 2.5cqi, 32px); line-height: 1.3; text-align: center; color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; pointer-events: none; text-wrap: balance; }
.stage.is-started .sub:not(:empty) { opacity: 1; visibility: visible; }
.sub span { color: rgba(255,255,255,.5); transition: color .12s ease; }
.sub span.on { color: #fff; }
.sub span.cur { color: var(--g1); }

/* botão de pausa sobre a apresentação */
.hud { position: absolute; z-index: 6; top: 2cqi; right: 2cqi; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(5, 8, 20, .72); cursor: pointer; display: none; place-items: center; transition: transform .15s ease, background .15s ease; }
.stage.is-started .hud { display: grid; }
.hud:hover { background: rgba(5, 8, 20, .9); transform: scale(1.06); }
.hud i { width: 16px; height: 18px; border-left: 5px solid #fff; border-right: 5px solid #fff; box-sizing: border-box; }
.hud.paused { background: var(--g1); border-color: transparent; }
.hud.paused i { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #04261A; margin-left: 4px; }

/* ponto que está sendo falado */
.bigplay[hidden] { display: none; }
.tl li.cur time, .tl li.cur b { color: var(--g1); }
.steps li.cur .n { box-shadow: 0 0 0 .7cqi rgba(52,211,153,.35); }
.steps li.cur b { color: #0B7A55; }

/* fechamento */
.cta { margin: 1.2cqi 0 0; font-family: var(--f-accent); font-style: italic; font-size: clamp(20px, 4.2cqi, 52px); line-height: 1.1; color: var(--g1); }
@container (max-width: 640px) { .sub { font-size: 4cqi; bottom: 3cqi; max-width: 92%; } .hud { width: 44px; height: 44px; } .cta { font-size: 6cqi; } }