.aula-page { background: #10100e; }
.primary-nav a[aria-current="page"] { color: var(--yellow); }
.aula-hero { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; min-height: calc(100vh - 88px); padding: 72px 0 82px; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 8vw, 110px); align-items: center; }
.aula-hero-copy > .eyebrow { margin-bottom: clamp(40px, 4vw, 58px); }
.aula-hero h1 { margin: 0; font: 400 clamp(5.5rem, 10vw, 10rem)/.86 Bebas Neue, Impact, sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.aula-hero h1 span { display: block; color: var(--yellow); }
.aula-hero h1 .aula-title-middle { color: var(--ink); }
.aula-hero h1 em { display: block; margin-top: -.015em; font-family: DM Serif Display, Georgia, serif; font-size: .52em; font-weight: 400; line-height: 1.12; text-transform: none; }
.aula-hero-copy > p:not(.eyebrow) { max-width: 670px; margin: 36px 0 30px; color: #c6c3ba; font: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.65 DM Serif Display, Georgia, serif; }
.aula-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.aula-primary, .aula-secondary { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; text-decoration: none; font: 500 .7rem/1 IBM Plex Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }
.aula-primary { min-width: 220px; padding: 17px 18px; background: var(--yellow); color: #111; }
.aula-secondary { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.course-status { padding: 30px; border: 1px solid var(--line); background: #181815; }
.status-top { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font: 500 .67rem/1 IBM Plex Mono, monospace; text-transform: uppercase; letter-spacing: .08em; }
.status-top strong { color: var(--yellow); font: 400 2.1rem/1 Bebas Neue, Impact, sans-serif; }
.status-track { height: 4px; margin: 22px 0 25px; background: #32322d; overflow: hidden; }
.status-track span { display: block; width: 0; height: 100%; background: var(--yellow); transition: width .5s ease; }
.course-status p { margin: 0 0 26px; color: var(--muted); font: 400 .88rem/1.6 DM Serif Display, Georgia, serif; }
.course-status a { color: var(--ink); font: 500 .65rem/1.4 IBM Plex Mono, monospace; text-transform: uppercase; letter-spacing: .07em; }

.aula-program { padding: 104px max(24px, calc((100vw - var(--max)) / 2)); background: #eae6db; color: #171714; }
.program-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: end; margin-bottom: 58px; }
.program-heading .eyebrow, .aula-method .eyebrow { color: #6c6961; }
.program-heading h2, .aula-method h2 { margin: 0; font: 400 clamp(3.7rem, 7vw, 7rem)/.84 Bebas Neue, Impact, sans-serif; text-transform: uppercase; }
.program-heading > p { max-width: 480px; margin: 0 0 5px; color: #58554d; font: 400 1.08rem/1.65 DM Serif Display, Georgia, serif; }
.lesson-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid #171714; }
.lesson-card { position: relative; min-height: 260px; padding: 27px; border-bottom: 1px solid rgba(17,17,15,.2); color: #171714; text-decoration: none; display: grid; grid-template-columns: 46px 1fr auto; gap: 20px; align-items: start; transition: background .22s ease, color .22s ease; }
.lesson-card:nth-child(odd) { border-right: 1px solid rgba(17,17,15,.2); }
.lesson-card:hover, .lesson-card:focus-visible { background: #171714; color: #f5f0e8; }
.lesson-number { color: #9a3324; font: 500 .68rem/1 IBM Plex Mono, monospace; }
.lesson-card p { margin: 0 0 22px; color: #8f3022; font: 500 .62rem/1.3 IBM Plex Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }
.lesson-card h3 { max-width: 460px; margin: 0 0 18px; font: 400 clamp(2.2rem, 4vw, 3.6rem)/.86 Bebas Neue, Impact, sans-serif; text-transform: uppercase; }
.lesson-description { display: block; max-width: 430px; color: #656159; font: 400 .9rem/1.55 DM Serif Display, Georgia, serif; }
.lesson-card:hover .lesson-description, .lesson-card:focus-visible .lesson-description { color: #bdb9af; }
.lesson-arrow { align-self: end; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; }
.lesson-card.is-complete::after { content: 'Completada'; position: absolute; top: 20px; right: 24px; padding: 6px 8px; background: #171714; color: var(--yellow); font: 500 .55rem/1 IBM Plex Mono, monospace; letter-spacing: .06em; text-transform: uppercase; }
.lesson-card.is-complete .lesson-arrow { background: var(--yellow); border-color: var(--yellow); color: #171714; }

.aula-method { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 104px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 8vw, 110px); }
.aula-method .eyebrow { color: var(--muted); }
.method-list { border-top: 1px solid var(--line); }
.method-list article { position: relative; padding: 28px 0 28px 56px; border-bottom: 1px solid var(--line); }
.method-list span { position: absolute; left: 0; top: 31px; color: var(--yellow); font: 500 .65rem/1 IBM Plex Mono, monospace; }
.method-list h3 { margin: 0 0 8px; font: 400 1.7rem/1 Bebas Neue, Impact, sans-serif; text-transform: uppercase; }
.method-list p { margin: 0; color: var(--muted); font: 400 .92rem/1.6 DM Serif Display, Georgia, serif; }
.teacher-note { grid-column: 2; padding: 28px; border: 1px solid var(--line); }
.teacher-note p { margin: 0 0 24px; color: #c9c6bd; font: 400 1.06rem/1.55 DM Serif Display, Georgia, serif; }
.teacher-note a { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--yellow); text-decoration: none; font: 500 .67rem/1.4 IBM Plex Mono, monospace; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 900px) {
  .aula-hero { width: min(calc(100% - 32px), var(--max)); min-height: 0; grid-template-columns: 1fr; padding: 60px 0 78px; }
  .course-status { max-width: 560px; }
  .program-heading { grid-template-columns: 1fr; }
  .lesson-grid { grid-template-columns: 1fr; }
  .lesson-card:nth-child(odd) { border-right: 0; }
  .aula-method { width: min(calc(100% - 32px), var(--max)); grid-template-columns: 1fr; }
  .teacher-note { grid-column: auto; }
}

@media (max-width: 620px) {
  .aula-hero h1 { font-size: clamp(4.8rem, 23vw, 7rem); }
  .aula-hero-copy > .eyebrow { margin-bottom: 36px; }
  .aula-program { padding: 76px 16px; }
  .lesson-card { min-height: 245px; padding: 24px 4px; grid-template-columns: 34px 1fr 34px; gap: 10px; }
  .lesson-card h3 { font-size: clamp(2.1rem, 10vw, 3.1rem); }
  .lesson-card.is-complete::after { top: 16px; right: 4px; }
  .aula-method { padding: 76px 0; }
}