/* Camada visual baseada no protótipo Ferramentas Web & UX; conteúdo vetorial do curso original intacto. */
:root{--ui-ink:#354153;--ui-muted:#89939e;--ui-green:#22bf69;--ui-wash:#eff7ff;--ui-line:#e1e6eb}
body{background:var(--ui-wash);color:var(--ui-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.course-shell{min-height:100vh;display:grid;grid-template-columns:272px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--ui-line);z-index:22}
.brand{padding:23px 19px 19px;border-bottom:1px solid var(--ui-line)}.brand-title{font-size:17px;font-weight:760;white-space:nowrap}.brand-code{font-size:22px;color:#20b66c;margin-right:5px}.brand-muted{color:#73808b}.brand p{font-size:12px;color:var(--ui-muted);margin:7px 0 0}
.course-nav{padding:19px 13px;overflow-y:auto;flex:1}.nav-heading{font-size:12px;color:#626d76;margin:0 8px 12px}.nav-link{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px;border:0;background:transparent;border-radius:8px;color:#78838e;margin:3px 0;font-size:12px;line-height:1.4}.nav-link:hover{background:#eff8f3}.nav-link.active{background:var(--ui-green);color:white;box-shadow:0 2px 7px #18a96325}.nav-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#dae0e3}.nav-link.active .nav-dot{background:#d9ffeb}.nav-link.done:not(.active) .nav-dot{background:var(--ui-green)}.nav-title{flex:1}.nav-chevron{font-size:16px}
.sidebar-bottom{padding:17px;border-top:1px solid var(--ui-line);font-size:11px;color:#89939e}.progress{height:6px;background:#deeff9;border-radius:5px;margin-top:9px;overflow:hidden}.progress div{height:100%;width:0;background:var(--ui-green);transition:width .2s}.reset-progress{border:0;background:none;color:#87939f;padding:11px 0 0;font-size:11px;text-decoration:underline}
.main-area{min-width:0}.toolbar{display:flex;align-items:center;gap:13px;height:62px;max-width:1400px;padding:0 32px;margin:auto}.toolbar-label{color:#89929b;font-size:12px}.toolbar-right{margin-left:auto}.btn{border-radius:8px;padding:11px 15px;font-weight:650;font-size:12px}.btn-dark{background:#273b50;color:white;border:0}.btn-green{background:var(--ui-green);color:white;border:0}.btn-outline{background:white;color:#354759;border:1px solid #cfd9e2}.btn:disabled{opacity:.45;cursor:not-allowed}.menu-button{display:none;border:0;background:none;color:#586573;font-size:22px}
.lesson{max-width:1400px;padding:10px 32px 75px;margin:auto}.lesson-heading{padding:0 4px 20px}.eyebrow{font-size:11px;color:#82919d;letter-spacing:.08em}.lesson-heading h1{font-size:clamp(25px,3vw,37px);letter-spacing:-.03em;margin:9px 0 8px;color:#303e4e}.lead{font-size:15px;color:#85919d;line-height:1.55;margin:0}.lesson-content{background:white;border:1px solid #e1e6eb;border-radius:12px;box-shadow:0 5px 19px #1739530b;overflow:hidden}
#app{max-width:none;margin:0;padding:0}.poster{padding:26px;min-height:600px;border-radius:0;box-shadow:none;overflow:visible}.poster .hero h1{font-size:clamp(32px,4.4vw,75px)}.poster .hero p{font-size:clamp(13px,1.15vw,18px)}.poster .panel h2{font-size:clamp(14px,1.4vw,23px)}.poster .panel p,.poster .panel li{font-size:clamp(12px,1.02vw,16px)}
.lesson-footer{margin-top:22px}.learning-note{padding:15px 18px;background:white;border:1px solid var(--ui-line);border-radius:9px}.learning-note strong{font-size:14px}.learning-note p{font-size:12px;color:#788493;margin:7px 0 0}.lesson-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* Apresentação: infográficos originais em tela ampla, sem duplicar conteúdo. */
body.presenting{background:#171c25}body.presenting .course-shell{display:block}body.presenting .sidebar,body.presenting .lesson-heading,body.presenting .lesson-footer,body.presenting .toolbar-label,body.presenting .menu-button{display:none}body.presenting .toolbar{position:fixed;z-index:30;right:15px;top:8px;width:auto;height:auto;padding:0}body.presenting .toolbar .btn-dark{background:#293846e8;border:1px solid #64727e;color:white}body.presenting .lesson{padding:62px 2vw 28px;max-width:1900px}body.presenting .lesson-content{border:0;border-radius:12px;box-shadow:0 15px 55px #0006}body.presenting .poster{min-height:calc(100vh - 95px)}
@media(max-width:900px){.course-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;transform:translateX(-101%);transition:transform .2s;width:272px;box-shadow:0 0 26px #142d4619}.sidebar.open{transform:translateX(0)}.menu-button{display:block}.toolbar{padding:0 18px}.lesson{padding:7px 16px 60px}.poster{padding:16px}.poster .hero{flex-wrap:wrap}.poster .hero h1{font-size:clamp(28px,7vw,55px)}.poster .cols{grid-template-columns:repeat(2,minmax(0,1fr))!important}.poster .info-now{width:100%}}
@media(max-width:560px){.poster .cols{grid-template-columns:1fr!important}.poster .panel{padding:15px}.poster .hero h1{font-size:36px}.lesson-heading h1{font-size:27px}.lesson-actions .btn{flex:1}.poster .hero .info-now{min-width:0}}