/* Complementos da aula demonstrativa, mantendo a identidade visual original. */
.demo { background: #edf2e5; border-bottom: 1px solid var(--line); }
.demo .sectionhead { align-items: center; }
.demo .sectionhead p { max-width: 375px; }
.demo-player { margin: 0; background: var(--green); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px #0b392e16; }
.demo-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #092a23; }
.demo-player figcaption { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; color: white; }
.demo-player figcaption strong { font-family: Manrope, Arial, sans-serif; font-size: 15px; font-weight: 600; }
.demo-player figcaption span { font-size: 12px; color: #c9d9ce; }
.demo-note { font-size: 12px; color: var(--muted); margin-top: 16px; }
.demo-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--mid); text-decoration: underline; text-underline-offset: 4px; }
.demo-error { padding: 20px 24px; color: #fff; font-size: 14px; }
.demo-error[hidden] { display: none; }
.demo-error a { text-decoration: underline; }
video:focus-visible { outline: 3px solid #8bb94b; outline-offset: 3px; }
@media (max-width: 680px) {
  .demo-player figcaption { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .demo-player figcaption strong { font-size: 14px; }
  .demo .sectionhead p { max-width: 100%; }
}
@media (max-width: 360px) {
  nav { gap: 8px; }
  .logo { width: 155px; }
  .logo img { width: 202px; margin-top: -32px; margin-left: -19px; }
  .navbtn { padding: 8px; font-size: 10px; }
}