:root{
  --accent:#7cf5ff;
}

.hero.hero--small{
  min-height: 44vh;
  height: clamp(360px, 44vh, 520px);
  background: radial-gradient(60% 60% at 50% 40%, rgba(0,229,255,.14), transparent 70%), #0a0f1c;
  display:grid; place-items:center; text-align:center;
}
.hero-actions{margin-top:1rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
.hero-content h1,
.hero-content p {
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}


.breadcrumbs{margin:1rem 0 0.5rem}
.breadcrumbs ol{list-style:none; padding:0; margin:0; display:flex; gap:.5rem; flex-wrap:wrap; color:#9fb3c8; font-size:.95rem}
.breadcrumbs a{color:var(--primary-neo); text-decoration:none}
.breadcrumbs li+li::before{content:"/"; margin:0 .25rem; color:#6d7a90}

.intro-cap p{color:#c9d6e6; text-align: justify;}
.container h2{text-align: center;}
.container p{text-align: justify;}

.levels{margin-top:1rem; display:grid; gap:.6rem}
.lvl{border:1px solid rgba(255,255,255,.08); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); overflow:hidden}
.lvl summary{cursor:pointer; list-style:none; padding:1rem; font-weight:700; display:flex; align-items:center; gap:.5rem}
.lvl summary::-webkit-details-marker{display:none}
.lvl .lvl-num{color:var(--accent); font-weight:800}
.lvl-body{padding:0 1rem 1rem 1rem; color:#cfe3f6; text-align: justify;}
.lvl[open]{box-shadow:0 10px 28px rgba(0,0,0,.35)}
.lvl summary:focus{outline:2px dashed var(--primary-neo); outline-offset:2px}

.video-wrapper{position:relative; aspect-ratio:16/9; width:100%; border-radius:14px; overflow:hidden; margin-top:.75rem; border:1px solid rgba(255,255,255,.06)}
.video-wrapper .yt{width:100%; height:100%}

.cta-row{display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; align-items: center; justify-content: center;}

/* Cabecera de capítulo (título + imagen + CTA) */
.chapter-title{
  text-align:center;
  font-size:clamp(2rem, 3vw, 3rem);
  margin:0 0 .75rem 0;
}

.chapter-figure{
  margin:0 auto 1rem auto;
  max-width: 1100px;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.chapter-figure img{
  display:block;
  width:100%;
  height:auto;
}

.chapter-subtitle{
  text-align:center;
  color:#cfe3f6;
  margin:.25rem 0 .75rem 0;
}

.chapter-cta{
  display:flex;
  justify-content:center;
}

/* Si antes usabas el hero con fondo/overlay, lo neutralizamos
   para que no afecte este diseño nuevo. */
.hero.hero--small{ display:none; }
.hero-overlay{ display:none; }