/* =========================================================
   BLOCO 3 — LEARNING EXPERIENCE
========================================================= */
.lesson-header-center{
  justify-self:center;display:flex;flex-direction:column;align-items:center;line-height:1.1
}
.lesson-header-center span{color:var(--muted-2);font-size:.58rem;font-weight:900;letter-spacing:.12em}
.lesson-header-center strong{margin-top:4px;color:var(--cyan);font-size:.65rem;letter-spacing:.08em}
.learning-layout{display:grid;grid-template-columns:330px minmax(0,1fr);padding-top:var(--header-height);min-height:100vh}
.lesson-sidebar{
  position:sticky;top:var(--header-height);height:calc(100vh - var(--header-height));overflow:auto;
  border-right:1px solid var(--line);background:#070b11;padding:26px 18px;z-index:50
}
.lesson-sidebar-head{padding:8px 8px 20px}
.lesson-sidebar-head>span{color:var(--cyan);font-size:.62rem;font-weight:900;letter-spacing:.12em}
.lesson-sidebar-head h2{margin:8px 0 14px;font-family:var(--font-title);font-size:1.35rem}
.sidebar-progress{height:5px;border-radius:99px;background:rgba(255,255,255,.05);overflow:hidden}
.sidebar-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 10px rgba(0,229,255,.45);transition:width .45s var(--ease)}
.lesson-sidebar-head small{display:block;margin-top:7px;color:var(--muted-2);font-size:.64rem}
.lesson-nav{display:flex;flex-direction:column;gap:5px}
.lesson-nav-item{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:11px;border:1px solid transparent;border-radius:12px;color:var(--muted);text-decoration:none;transition:background var(--fast),border-color var(--fast),color var(--fast)}
.lesson-nav-item:hover{color:var(--text);background:rgba(255,255,255,.025)}
.lesson-nav-item.active{color:var(--text);border-color:rgba(0,229,255,.22);background:rgba(0,229,255,.05)}
.lesson-nav-item.completed{border-color:rgba(0,227,140,.14)}
.lesson-nav-item>span{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--cyan);font-size:.63rem;font-weight:900}
.lesson-nav-item.completed>span{color:#00140d;border-color:transparent;background:var(--green)}
.lesson-nav-item strong{display:block;font-size:.72rem;line-height:1.25}
.lesson-nav-item small{display:block;margin-top:3px;color:var(--muted-2);font-size:.58rem}
.dashboard-link{display:block;margin:18px 8px 0;padding-top:16px;border-top:1px solid var(--line);color:var(--cyan);text-decoration:none;font-size:.65rem;font-weight:900;letter-spacing:.08em}
.lesson-main{width:min(100%,1000px);padding:48px clamp(24px,5vw,72px) 90px}
.lesson-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted-2);font-size:.7rem}
.lesson-breadcrumb a{color:var(--muted);text-decoration:none}.lesson-breadcrumb a:hover{color:var(--cyan)}
.lesson-title-block{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:34px}
.lesson-kicker{color:var(--cyan);font-size:.64rem;font-weight:900;letter-spacing:.12em}
.lesson-title-block h1{max-width:800px;margin:9px 0 0;font-family:var(--font-title);font-size:clamp(2.5rem,5vw,5rem);line-height:.95;letter-spacing:-.05em}
.lesson-time{padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted-2);font-size:.58rem;font-weight:900;white-space:nowrap}
.lesson-lead{max-width:780px;margin:22px 0 0;color:var(--muted);font-size:1.08rem}
.lesson-objectives{margin-top:34px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.014)}
.lesson-objectives>span,.lesson-summary>span,.safety-callout>span,.video-note>span{color:var(--cyan);font-size:.62rem;font-weight:900;letter-spacing:.12em}
.lesson-objectives ul{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:15px 0 0;padding:0;list-style:none}
.lesson-objectives li{color:#c6d0db;font-size:.82rem}.lesson-objectives li span{color:var(--green);margin-right:7px}
.lesson-video{margin-top:32px}
.video-frame{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(0,229,255,.18);border-radius:22px;background:#050a0f}
.video-tech-grid{position:absolute;inset:0;background:linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px),radial-gradient(circle at center,rgba(0,229,255,.11),transparent 38%);background-size:32px 32px,32px 32px,auto}
.video-placeholder-content{position:relative;z-index:2;text-align:center}
.video-play{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 16px;padding-left:4px;border:1px solid rgba(0,229,255,.38);border-radius:50%;color:var(--cyan);background:rgba(0,229,255,.05);box-shadow:0 0 34px rgba(0,229,255,.18)}
.video-placeholder-content strong{display:block;font-family:var(--font-title);font-size:.9rem;letter-spacing:.08em}
.video-placeholder-content small{display:block;max-width:390px;margin:8px auto 0;color:var(--muted-2);padding:0 16px}
.video-note{display:flex;gap:14px;margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.012)}
.video-note p{margin:0;color:var(--muted-2);font-size:.72rem}
.lesson-article{margin-top:46px}
.lesson-content-block{margin-top:42px}
.lesson-content-block h2{margin:0 0 14px;font-family:var(--font-title);font-size:clamp(1.6rem,3vw,2.4rem)}
.lesson-content-block p{max-width:820px;color:#b1bdc9;font-size:1rem;line-height:1.82}
.safety-callout{margin-top:44px;padding:22px;border-left:3px solid #ffd45f;border-radius:0 14px 14px 0;background:rgba(255,193,7,.035)}
.safety-callout>span{color:#ffd45f}.safety-callout p{margin:8px 0 0;color:#b7bdc4;font-size:.84rem}
.lesson-summary{margin-top:44px;padding:24px;border:1px solid rgba(0,229,255,.16);border-radius:18px;background:linear-gradient(135deg,rgba(0,229,255,.045),rgba(0,102,255,.025))}
.lesson-summary p{margin:10px 0 0;color:#c6d2dd}
.lesson-completion{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:56px;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.lesson-completion>div>span{color:var(--cyan);font-size:.62rem;font-weight:900;letter-spacing:.1em}
.lesson-completion h2{margin:7px 0 5px;font-family:var(--font-title);font-size:1.35rem}
.lesson-completion p{margin:0;color:var(--muted-2);font-size:.76rem}
#complete-lesson-btn.completed{color:#00140d;background:var(--green);box-shadow:0 0 24px rgba(0,227,140,.18)}
.lesson-pagination{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.lesson-pagination>a{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--line);border-radius:16px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.012);transition:border-color var(--fast),background var(--fast)}
.lesson-pagination>a:hover{border-color:var(--line-strong);background:rgba(0,229,255,.025)}
.lesson-next{justify-content:flex-end;text-align:right}
.lesson-pagination small{display:block;color:var(--muted-2);font-size:.56rem;font-weight:900;letter-spacing:.1em}
.lesson-pagination strong{display:block;margin-top:3px;font-size:.72rem}
.lesson-pagination>a>span{color:var(--cyan);font-size:1.2rem}
.lesson-overlay{position:fixed;inset:0;z-index:1040;background:rgba(0,0,0,.58);backdrop-filter:blur(5px)}
.lesson-toast{position:fixed;left:50%;bottom:24px;z-index:2000;padding:13px 17px;border:1px solid rgba(0,227,140,.26);border-radius:12px;color:#dfffee;background:rgba(4,23,16,.94);box-shadow:0 18px 48px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:opacity var(--fast),transform var(--fast);font-size:.78rem}
.lesson-toast.show{opacity:1;transform:translate(-50%,0)}
.lesson-menu-btn{display:none}

/* Dashboard */
.dashboard-page{padding:calc(var(--header-height) + 55px) 0 90px;min-height:100vh}
.dashboard-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:38px}
.dashboard-head h1{margin:8px 0 0;font-family:var(--font-title);font-size:clamp(2.6rem,5vw,5rem);line-height:.95}
.dashboard-head p{max-width:540px;margin:0;color:var(--muted)}
.dashboard-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.dashboard-card{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.dashboard-card h2{margin:0;font-family:var(--font-title)}
.active-course-card{grid-row:span 2}
.course-progress-big{display:flex;align-items:end;justify-content:space-between;margin:38px 0 12px}.course-progress-big strong{font-family:var(--font-title);font-size:4rem;color:var(--cyan);line-height:.8}.course-progress-big span{color:var(--muted-2);font-size:.72rem}
.progress-track{height:8px;border-radius:99px;background:rgba(255,255,255,.05);overflow:hidden}.progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 12px rgba(0,229,255,.35);transition:width .45s var(--ease)}
.dashboard-course-list{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.dashboard-course-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.012)}
.dashboard-course-row div span{display:block;color:var(--muted-2);font-size:.6rem;font-weight:900}.dashboard-course-row div strong{font-size:.8rem}.dashboard-course-row>a{color:var(--cyan);font-size:.65rem;font-weight:900;text-decoration:none}
.achievement-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}.achievement{min-height:100px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.012);opacity:.42}.achievement.unlocked{opacity:1;border-color:rgba(0,227,140,.18)}.achievement span{color:var(--green);font-size:.65rem;font-weight:900}.achievement strong{display:block;margin-top:10px;font-size:.76rem}

@media(max-width:1000px){
  .learning-layout{grid-template-columns:1fr}
  .lesson-sidebar{position:fixed;left:0;top:var(--header-height);bottom:0;width:min(88vw,350px);height:auto;z-index:1050;transform:translateX(-105%);transition:transform .35s var(--ease);box-shadow:30px 0 70px rgba(0,0,0,.4)}
  .lesson-sidebar.open{transform:translateX(0)}
  .lesson-menu-btn{display:block}
  .lesson-header .header-inner{grid-template-columns:auto 1fr auto}
  .lesson-header .header-cta{display:none}
  .lesson-main{margin:0 auto}
  .dashboard-grid{grid-template-columns:1fr}.active-course-card{grid-row:auto}
}
@media(max-width:700px){
  .lesson-header-center{display:none}
  .lesson-header .header-inner{grid-template-columns:1fr auto}
  .lesson-main{padding:34px 18px 70px}
  .lesson-title-block{flex-direction:column}
  .lesson-objectives ul{grid-template-columns:1fr}
  .video-note{flex-direction:column;gap:4px}
  .lesson-completion{align-items:stretch;flex-direction:column}.lesson-completion .btn{width:100%}
  .lesson-pagination{grid-template-columns:1fr}
  .dashboard-head{align-items:flex-start;flex-direction:column}.achievement-list{grid-template-columns:1fr}
}