/* =========================================================
   Agent Engineering na Prática — lesson.css
   Tema compartilhado com o hotsite: fundo branco, tinta quase-preta,
   terracota como acento, JetBrains Mono para tudo que é "técnico".
   ========================================================= */

:root{
  --bg: #FFFFFF;
  --ink: #0A0A0A;
  --muted: #706A63;
  --accent: #CC785C;
  --accent-deep: #A65940;
  --accent-tint: #FBEEE8;
  --surface: #FAF8F5;
  --surface-dark: #0D0D0D;
  --line: #E8E4DE;
  --green: #2F6A4F;
  --green-tint: #EAF3EE;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

/* ---------- top nav ---------- */
.lesson-nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem 1.75rem;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-course{
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--ink);
}
.nav-course::before{
  content:"◆ ";
  color:var(--accent);
}
.nav-back{
  font-size:0.83rem;
  text-decoration:none;
  color:var(--muted);
  transition:color .15s ease;
}
.nav-back:hover{ color:var(--ink); }
.nav-progress{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--muted);
  letter-spacing:0.03em;
}

/* ---------- shell / sidebar ---------- */
.lesson-shell{
  display:grid;
  grid-template-columns:272px minmax(0,1fr);
  max-width:1160px;
  margin:0 auto;
}
.sidebar{
  border-right:1px solid var(--line);
  padding:2rem 1.25rem 3rem;
  position:sticky; top:56px;
  align-self:start;
  height:calc(100vh - 56px);
  overflow-y:auto;
}
.sb-module{ margin-bottom:1.5rem; }
.sb-module-title{
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.6rem;
  display:flex; gap:0.5rem; align-items:baseline;
}
.sb-module-title .n{ color:var(--accent); }
.sb-lesson{
  display:block;
  font-size:0.85rem;
  padding:0.4rem 0.6rem;
  border-radius:6px;
  text-decoration:none;
  color:var(--ink);
  margin-bottom:0.15rem;
  transition:background .12s ease;
}
.sb-lesson:hover{ background:var(--surface); }
.sb-lesson.active{
  background:var(--accent-tint);
  color:var(--accent-deep);
  font-weight:600;
}
.sb-lesson.disabled{
  color:#C9C3BB;
  cursor:default;
  pointer-events:none;
}
.sb-lesson.disabled::after{
  content:" · em breve";
  font-family:var(--font-mono);
  font-size:0.68rem;
}

/* ---------- content ---------- */
.lesson-content{
  padding:2.75rem 3rem 6rem;
  max-width:760px;
}
.lesson-eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.75rem;
}
.lesson-title{
  font-family:var(--font-display);
  font-size:2.4rem;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 1rem;
}
.lesson-subtitle{
  font-size:1.05rem;
  line-height:1.55;
  color:var(--muted);
  max-width:56ch;
  margin:0 0 2rem;
}

.video-placeholder{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  padding:3rem 1rem;
  text-align:center;
  margin-bottom:2.5rem;
}
.video-icon{
  width:48px; height:48px; margin:0 auto 0.75rem;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.video-label{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--muted);
  letter-spacing:0.04em;
}

.content-section{ margin-bottom:2.75rem; }
.section-tag{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.85rem;
}
.section-title{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:700;
  line-height:1.3;
  margin-bottom:0.9rem;
}
.section-body p{
  font-size:0.98rem;
  line-height:1.68;
  color:#2A2825;
  margin:0 0 0.9rem;
}
.section-body p:last-child{ margin-bottom:0; }

.callout{
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  background:var(--surface);
  border-radius:8px;
  padding:1rem 1.25rem;
  font-size:0.92rem;
  line-height:1.6;
  color:#3A3733;
}
.callout.green{
  border-left-color:var(--green);
  background:var(--green-tint);
}
.callout-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.4rem;
}

.feature-list{ margin-top:1rem; }
.feature-item{
  display:flex; gap:0.85rem;
  padding:0.9rem 0;
  border-bottom:1px solid var(--line);
}
.feature-item:last-child{ border-bottom:none; }
.feature-arrow{
  font-family:var(--font-mono);
  color:var(--accent);
  font-weight:700;
  flex-shrink:0;
}
.feature-text{ font-size:0.94rem; line-height:1.55; }
.feature-text strong{ font-weight:600; }

.highlight-quote{
  margin:1.75rem 0;
  padding:1.5rem 1.75rem;
  background:var(--surface-dark);
  color:#fff;
  border-radius:12px;
  font-family:var(--font-display);
  font-size:1.08rem;
  line-height:1.55;
}
.highlight-quote span{ color:#9A9A9A; }

.checklist{ list-style:none; padding:0; margin:0; }
.checklist li{
  display:flex; gap:0.75rem;
  padding:0.85rem 0;
  border-bottom:1px solid var(--line);
}
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{
  content:"✓";
  font-family:var(--font-mono);
  color:var(--accent);
  font-weight:700;
  flex-shrink:0;
}
.checklist li div strong{ font-weight:600; font-size:0.95rem; }

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.9rem;
}
.plan-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.1rem 1rem;
  text-align:center;
}
.plan-card.recommended{
  border-color:var(--accent);
  background:var(--accent-tint);
  position:relative;
}
.plan-label{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.4rem;
}
.plan-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:0.3rem;
}
.plan-price{
  font-family:var(--font-mono);
  font-size:1.3rem;
  font-weight:700;
  color:var(--accent-deep);
}
.plan-rec{
  margin-top:0.4rem;
  font-family:var(--font-mono);
  font-size:0.68rem;
  color:var(--accent-deep);
  font-weight:700;
}

.lesson-nav-bottom{
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:0.88rem;
}
.lesson-nav-bottom a{
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0.6rem 1rem;
  transition:border-color .15s ease, color .15s ease;
}
.lesson-nav-bottom a:hover{ border-color:var(--accent); color:var(--accent-deep); }
.lesson-nav-bottom .disabled{
  color:#C9C3BB;
  border-color:var(--line);
  pointer-events:none;
}
.lesson-nav-bottom .next{ margin-left:auto; }

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .lesson-shell{ grid-template-columns:1fr; }
  .sidebar{
    position:static; height:auto;
    border-right:none; border-bottom:1px solid var(--line);
  }
  .lesson-content{ padding:2rem 1.25rem 4rem; }
  .lesson-title{ font-size:1.9rem; }
  .plan-grid{ grid-template-columns:1fr; }
}