.video-library {
  margin-top: 42px;
}

.video-library > h2,
.documents-section > h2 {
  font-size: 34px;
}

.video-section {
  margin: 28px 0 48px;
  padding: 28px;
  background: #fff;
  border: 1px solid #dce7ea;
  border-radius: 16px;
}

.video-section-heading {
  padding-left: 18px;
  border-left: 5px solid #009fe3;
}

.video-section-heading h2 {
  margin: 8px 0;
  color: #087db7;
  font-size: 28px;
}

.video-section-heading > p:last-child {
  margin: 8px 0 0;
  color: #607580;
  line-height: 1.5;
}

.video-section .video-grid {
  margin-top: 24px;
}

.documents-section {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid #d7e5e9;
}

@media (max-width: 800px) {
  .video-section {
    padding: 20px 15px;
  }

  .video-section-heading h2 {
    font-size: 24px;
  }
}

.guided-portal {
  --guide-blue: #087db7;
  --guide-green: #2f8d73;
}

.welcome-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 40px;
  align-items: center;
  margin: 20px 0 30px;
  padding: 30px;
  background: linear-gradient(120deg, #fff, #eaf6f8);
  border: 1px solid #d6e7eb;
  border-radius: 18px;
}

.welcome-guide h2 { margin: 0 0 10px; font-size: 28px; color: var(--guide-blue); }
.welcome-guide p { max-width: 800px; line-height: 1.65; color: #536d78; }
.overall-progress { padding: 22px; text-align: center; background: #fff; border-radius: 14px; }
.overall-progress strong { display: block; font-size: 40px; color: var(--guide-blue); }
.overall-progress span, .section-progress span { display: block; margin-bottom: 8px; color: #607580; font-size: 13px; font-weight: 700; }
.progress-track { height: 8px; overflow: hidden; background: #dfecef; border-radius: 99px; }
.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #009fe3, #2f8d73); border-radius: inherit; }
.library-heading { margin: 55px 0 25px; }
.library-heading h2 { margin: 9px 0; font-size: 38px; }
.library-heading p:last-child { color: #607580; }
.video-section-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; }
.section-number { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; background: var(--guide-blue); border-radius: 50%; font-size: 18px; font-weight: 900; }
.guidance-copy { padding: 12px 15px; background: #f1f8fa; border-radius: 8px; }
.section-progress { max-width: 380px; margin-top: 15px; }
.thumb { position: relative; }
.play-icon { position: absolute; inset: 50% auto auto 50%; display: grid!important; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px!important; color: #fff!important; background: rgba(8,125,183,.92); border-radius: 50%; font-size: 18px!important; }
.video-order { position: absolute; right: 9px; bottom: 9px; margin: 0!important; padding: 6px 9px; color: #fff!important; background: rgba(21,53,72,.9); border-radius: 5px; }
.video-card { transition: transform .18s ease, box-shadow .18s ease; }
.video-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,53,72,.12); }
.video-card.is-watched { border-color: #76bca8; }
.document-card p { margin: 10px 18px; line-height: 1.5; color: #607580; }

.back-link { display: inline-block; margin-bottom: 24px; color: #087db7; font-weight: 800; text-decoration: none; }
.video-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 35px; align-items: start; }
.video-main h1 { margin: 14px 0 20px; font-size: clamp(32px, 4vw, 52px); }
.video-main .player { max-width: none; }
.video-copy { margin: 25px 0; padding: 25px; background: #fff; border: 1px solid #dce7ea; border-radius: 14px; }
.video-copy h2 { margin-top: 0; color: #087db7; }
.video-copy p { line-height: 1.65; }
.support-note { padding: 15px; background: #edf7f9; border-left: 4px solid #009fe3; }
.section-playlist { position: sticky; top: 25px; padding: 24px; background: #fff; border: 1px solid #dce7ea; border-radius: 16px; box-shadow: 0 16px 35px rgba(21,53,72,.08); }
.section-playlist h2 { margin: 10px 0; color: #087db7; font-size: 25px; }
.section-playlist > p { line-height: 1.5; color: #607580; }
.section-playlist ol { margin: 20px -8px 0; padding: 0; list-style: none; max-height: 58vh; overflow: auto; }
.section-playlist li { margin: 5px 0; }
.section-playlist li a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px; color: #153548; text-decoration: none; border: 1px solid transparent; border-radius: 9px; }
.section-playlist li a:hover { background: #f2f8fa; }
.section-playlist li a.current { background: #e9f5f8; border-color: #88c9dc; }
.section-playlist li a.watched .list-number { color: #fff; background: #2f8d73; }
.list-number { display: grid; place-items: center; width: 30px; height: 30px; color: #087db7; background: #e4f2f6; border-radius: 50%; font-size: 12px; font-weight: 900; }
.section-playlist li small, .section-playlist li strong { display: block; }
.section-playlist li small { margin-bottom: 3px; color: #71858e; }
.section-playlist li strong { line-height: 1.3; font-size: 13px; }
.playlist-help { padding-top: 12px; border-top: 1px solid #e2ecef; font-size: 12px; }
.video-step-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 30px; }
.video-step-nav a { display: block; padding: 16px; color: #153548; background: #fff; border: 1px solid #dce7ea; border-radius: 10px; text-decoration: none; }
.video-step-nav a.next { text-align: right; }
.video-step-nav small, .video-step-nav strong { display: block; }
.video-step-nav small { margin-bottom: 5px; color: #087db7; }

@media (max-width: 1050px) {
  .video-layout { grid-template-columns: 1fr; }
  .section-playlist { position: static; }
  .section-playlist ol { max-height: none; }
}

@media (max-width: 800px) {
  .welcome-guide { grid-template-columns: 1fr; gap: 15px; padding: 22px; }
  .video-section-heading { grid-template-columns: 42px minmax(0, 1fr); padding-left: 0; border-left: 0; }
  .section-number { width: 40px; height: 40px; font-size: 14px; }
  .video-step-nav { grid-template-columns: 1fr; }
}
.parent-section-label{margin:0 0 22px;padding:14px 18px;border-left:5px solid #009fe3;background:#eef8fc;color:#075f88;font-size:.82rem;font-weight:800;letter-spacing:.06em}.rehab-subsection{border-top:0}.rehab-subsection+.rehab-subsection{margin-top:34px}.rehab-subsection .video-section-heading{background:#f8fbfd;border-radius:12px;padding:24px}.rehab-subsection .video-section-heading h2{color:#007dba}

/* Portada: mostrar la fotografía completa, incluida la prótesis. */
.hero > img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.home-stories {
  max-width: 1180px;
  margin: 72px auto;
  padding: 0 24px;
}

.home-stories-heading {
  max-width: 720px;
  margin-bottom: 30px;
}

.home-stories-heading h2 {
  margin: 8px 0 12px;
  color: #153548;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

.home-stories-heading > p:last-child {
  color: #607580;
  font-size: 18px;
  line-height: 1.6;
}

.home-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.home-story-grid article {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce7ea;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(21, 53, 72, .09);
}

.home-story-grid img {
  display: block;
  width: 100%;
  height: 245px;
  object-fit: cover;
}

.home-story-grid article:nth-child(2) img {
  object-position: center;
}

.home-story-grid article > div {
  padding: 24px;
}

.home-story-grid span {
  color: #009fe3;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}

.home-story-grid h3 {
  margin: 8px 0 10px;
  color: #007dba;
  font-size: 22px;
}

.home-story-grid p {
  margin: 0;
  color: #607580;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .home-story-grid {
    grid-template-columns: 1fr;
  }

  .home-story-grid img {
    height: min(58vw, 360px);
  }
}

/* Portada: iconos y numeración de los cinco apartados. */
.areas article {
  position: relative;
  padding-top: 22px;
}

.area-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.area-icon {
  display: grid !important;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 !important;
  border-radius: 13px;
  background: #e8f6fa;
  color: #087db7 !important;
  font-size: 24px !important;
  line-height: 1;
}

.area-number {
  margin: 0 !important;
  color: #087db7 !important;
  font-size: 18px !important;
  font-weight: 900;
}

.protected-label {
  display: block;
  margin-bottom: 8px;
  color: #78909a !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .hero > img {
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}