:root { --m11-red:#dc2626; --m11-deep:#2e2640; --m11-ink:#1e293b; --m11-muted:#64748b; --m11-line:#e2e8f0; --m11-paper:#f8fafc; }
* { box-sizing:border-box; }
body { margin:0; font-family:Manrope,system-ui,sans-serif; color:var(--m11-ink); background:var(--m11-paper); }
.lesson-deck { height:100vh; overflow:hidden; }
.lesson-slides { height:calc(100vh - 58px); position:relative; }
.lesson-slide { display:none; height:100%; overflow:auto; padding:clamp(18px,4.5vh,52px) clamp(20px,5vw,72px); max-width:1320px; margin:auto; }
/* `safe center` distribui o espaço vertical sem cortar o topo quando o
   conteúdo excede a altura; navegador que não suporta ignora e alinha ao topo. */
.lesson-slide.active { display:flex; flex-direction:column; justify-content:safe center; animation:lessonIn .28s ease-out; }
.lesson-cover.active { justify-content:safe center; }
@keyframes lessonIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.lesson-cover { background:linear-gradient(135deg,#450a0a,#b91c1c 52%,#f87171); color:#fff; max-width:none; padding:clamp(40px,12vh,140px) clamp(28px,9vw,150px); }
.lesson-cover h1 { font-size:clamp(2.6rem,6vw,5.4rem); max-width:900px; margin:18px 0; line-height:1.02; }
.lesson-cover p { max-width:820px; font-size:clamp(1rem,2.6vh,1.7rem); line-height:1.5; color:rgba(255,255,255,.88); }
.lesson-cover small { color:rgba(255,255,255,.7); }
.lesson-kicker { display:inline-block; color:var(--m11-red); font-size:clamp(.7rem,1.6vh,1.2rem); font-weight:900; letter-spacing:.16em; text-transform:uppercase; margin-bottom:clamp(6px,1.2vh,16px); }
.lesson-cover .lesson-kicker { color:#ffe3e3; }
.lesson-slide h2 { font-size:clamp(1.5rem,4.4vh,3.5rem); line-height:1.12; margin:0 0 clamp(10px,2.2vh,28px); color:var(--m11-deep); }
.lesson-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:clamp(8px,1.5vh,18px); }
.lesson-card,.lesson-callout { background:#fff; border:1px solid var(--m11-line); border-radius:14px; padding:clamp(12px,2.1vh,30px); box-shadow:0 4px 14px rgba(46,38,64,.06); }
.lesson-card b { color:var(--m11-red); font-size:clamp(.66rem,1.3vh,.88rem); letter-spacing:.12em; text-transform:uppercase; }
.lesson-card h3 { margin:clamp(4px,.9vh,12px) 0; font-size:clamp(.95rem,2.5vh,2rem); color:var(--m11-deep); }
.lesson-card p,.lesson-card li,.lesson-callout { line-height:1.5; font-size:clamp(.85rem,2.3vh,1.85rem); color:#374151; }
.lesson-wide { max-width:960px; }
.lesson-card ol,.lesson-card ul { margin:clamp(3px,.7vh,8px) 0 0; padding-left:1.2rem; }
.lesson-card ol li { margin-bottom:clamp(3px,.7vh,9px); }
.lesson-callout { border-left:6px solid var(--m11-red); margin:0 0 clamp(10px,1.9vh,22px); font-size:clamp(.95rem,2.5vh,2rem) !important; flex:0 0 auto; }
/* slide de conceito: texto à esquerda, checklist à direita, erro comum embaixo */
.lesson-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(9px,1.5vh,18px); margin-bottom:clamp(9px,1.5vh,18px); align-items:stretch; }
.lesson-split .lesson-card p { font-size:clamp(.9rem,2.5vh,2rem); }
.lesson-split ul { margin:clamp(3px,.7vh,8px) 0 0; padding-left:1.15rem; }
.lesson-split li { margin-bottom:clamp(3px,.7vh,9px); }
.lesson-hint { font-size:clamp(.72rem,1.7vh,1.35rem) !important; font-weight:600; color:var(--m11-muted) !important; margin:2px 0 clamp(4px,.9vh,10px) !important; }
.lesson-warn { background:#fff7ed; border:1px solid #fed7aa; border-left:6px solid #d97706; border-radius:12px; padding:clamp(10px,1.8vh,24px) clamp(14px,2vh,26px); line-height:1.5; font-size:clamp(.85rem,2.2vh,1.75rem); color:#7c2d12; flex:0 0 auto; }
.lesson-warn strong { color:#9a3412; }
.lesson-footer { height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 22px; background:#fff; border-top:1px solid var(--m11-line); }
.lesson-footer button,.lesson-footer a { border:0; border-radius:9px; padding:9px 14px; background:var(--m11-deep); color:#fff; text-decoration:none; font:700 .85rem Manrope,sans-serif; cursor:pointer; }
.lesson-footer a { background:#f1f4f8; color:var(--m11-deep); }
.lesson-counter { font-weight:800; color:var(--m11-deep); }
.material-head,.plan-head { padding:54px max(24px,calc((100% - 1120px)/2)); background:linear-gradient(135deg,#2e2640,#7a2230 52%,#dc2626); color:#fff; }
.material-head span,.plan-head span { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.material-head h1,.plan-head h1 { margin:14px 0 8px; font-size:clamp(2rem,5vw,3.4rem); }
.material-head p,.plan-head p { margin:0; color:rgba(255,255,255,.8); font-size:1.05rem; }
.material-body,.plan-body { max-width:900px; margin:0 auto; padding:38px 24px 80px; }
.material-box,.material-section,.plan-body section { background:#fff; border:1px solid var(--m11-line); border-radius:14px; padding:26px; margin-bottom:22px; box-shadow:0 3px 12px rgba(46,38,64,.05); }
.material-section h2,.material-box h2,.plan-body h2 { color:var(--m11-deep); margin-top:0; border-bottom:2px solid var(--m11-line); padding-bottom:10px; }
.material-section h3 { color:var(--m11-deep); }
.material-section p,.material-section li,.material-box p,.material-box li,.plan-body p,.plan-body li { line-height:1.75; color:#374151; }
.material-note { background:#fff7ed; border-left:4px solid #d97706; padding:14px 16px; margin-top:18px; }
/* ponte com a Aula 1 no material: RF, RNF, ADR e cenário de aceite */
.material-sdd { display:grid; gap:12px; }
.material-sdd div { border:1px solid var(--m11-line); border-left:4px solid var(--m11-red); border-radius:12px; padding:14px 16px; background:#fbfdff; line-height:1.7; color:#374151; }
.material-sdd b { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--m11-red); margin-bottom:6px; }
@media (max-width:900px) { .lesson-split { grid-template-columns:1fr; } }
@media (max-width:720px) { .lesson-grid { grid-template-columns:1fr; } .lesson-footer { padding:0 10px; } .lesson-footer a { display:none; } }

/* O bloco principal de cada slide ocupa a altura livre; o conteúdo do card é
   centrado verticalmente. Evita tela com 60% de vazio sem aumentar a fonte. */
.lesson-slide.active > .lesson-grid,
.lesson-slide.active > .lesson-split,
.lesson-slide.active > .lesson-card { flex:1 1 auto; min-height:0; }
.lesson-split .lesson-card,
.lesson-grid .lesson-card { display:flex; flex-direction:column; justify-content:center; min-height:0; overflow:auto; }
.lesson-grid .lesson-card > b { flex:0 0 auto; }