:root{
  --bg:#0b0e12; --elev:#10151b; --card:#141b23; --text:#e8edf5; --muted:#9fb1c9;
  --brand:#4fa3ff; --brand2:#19c5aa; --border:#223243; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px; --radius-lg:18px;
  --header-h:68px;                 /* igual que en index */
}
@media (max-width:900px){ :root{ --header-h:60px } }

/* ================= Base ================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
  background:var(--bg); color:var(--text); line-height:1.6;
  /* compensación por cabecera fija (como en index) */
  padding-top:var(--header-h);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92vw);margin-inline:auto}
.container-wide{width:100vw;max-width:100vw;margin:0}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:none;font-weight:700;padding:.75rem 1rem;border-radius:12px;cursor:pointer;transition:.2s transform,.2s opacity;box-shadow:var(--shadow);color:#001428}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border:1px solid var(--border);box-shadow:none;color:var(--text)}
.btn-primary{background:var(--brand)}
.btn-secondary{background:var(--brand2);color:#00130f}
.btn-success{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#00120f}
.btn.small{padding:.5rem .7rem;font-weight:600}

/* ===== Scrollbar (igual) ===== */
html{scrollbar-color:color-mix(in oklab,var(--brand)70%,var(--brand2)) var(--elev);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--elev);border-left:1px solid var(--border)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand),var(--brand2));border-radius:10px;border:2px solid var(--elev)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--brand2),var(--brand))}

/* ============== Cabecera (misma del index) ============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:color-mix(in oklab,var(--bg)88%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0}
.brand{display:flex;align-items:center}
.brand-logo{height:40px}

/* Navegación limpia (sin puntos) */
.nav{display:flex;align-items:center;gap:1rem;position:relative}
.nav-menu,.nav-menu ul,.nav-menu li{list-style:none;margin:0;padding:0}
.nav-menu>li{display:inline-flex;align-items:center;white-space:nowrap}
.nav-link{
  display:inline-flex;align-items:center;
  padding:.55rem .9rem;border-radius:10px;
  font-weight:700;font-size:1.05rem;
  transition:background-color .2s,color .2s
}
.nav-link::before{content:none!important}
.nav-link:hover,.nav-link:focus-visible{
  background:color-mix(in oklab,var(--brand)18%,transparent);
  color:#fff;
}

/* Menú móvil (igual que index) */
.nav-toggle{display:inline-grid;gap:4px;padding:.35rem;border:1px solid var(--border);background:var(--elev);border-radius:9px}
.nav-toggle-bar{width:20px;height:2px;background:var(--text)}
.nav-panel{position:fixed;inset:var(--header-h)0 0 0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.2s opacity}
.nav-panel.open{opacity:1;pointer-events:auto}
.nav-menu{
  position:fixed;left:0;right:0;top:var(--header-h);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  background:var(--elev);border-top:1px solid var(--border);
  display:grid;gap:.5rem;padding:1rem;transition:.2s transform,.2s opacity;
  max-height:calc(100vh - var(--header-h));overflow:auto
}
.nav-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
@media (min-width:1100px){
  .nav-toggle{display:none}.nav-panel{display:none}
  .nav-menu{position:static;transform:none;opacity:1;pointer-events:auto;display:flex;gap:.35rem;padding:0;background:transparent;border:none;max-height:none;overflow:visible;flex-wrap:nowrap}
}

/* ================= Hero ================= */
.hero{padding:3.5rem 0 2rem;position:relative}
.hero::after{content:"";position:absolute;inset:-40% -10% auto;height:70%;background:
  radial-gradient(60% 60% at 30% 20%,color-mix(in oklab,var(--brand)40%,transparent) 0%,transparent 60%),
  radial-gradient(50% 50% at 70% 10%,color-mix(in oklab,var(--brand2)35%,transparent) 0%,transparent 70%);
filter:blur(42px);opacity:.45;z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero h1{margin:.2rem 0 .5rem;font-size:clamp(1.9rem,2.4vw + 1rem,3.2rem);line-height:1.12}
.hero .hero-actions{display:flex;gap:.6rem;margin-top:.8rem}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem;box-shadow:var(--shadow)}
.price{display:flex;align-items:baseline;gap:.6rem}
.price-label{color:var(--muted)}
.price-value{font-size:1.6rem;font-weight:800}

/* ============== Layout del curso ============== */
.course-layout{padding:0}
.course-grid{display:grid;grid-template-columns:380px 1fr;grid-template-areas:"sidebar player";gap:1rem;padding:1rem 2rem}
@media (max-width:1000px){.course-grid{grid-template-columns:1fr;grid-template-areas:"sidebar" "player";padding:1rem}}

/* Sidebar */
.sidebar{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;
  position:sticky;top:calc(var(--header-h) + 8px);max-height:calc(100vh - var(--header-h) - 16px);
  overflow:auto;scrollbar-color:color-mix(in oklab,var(--brand)70%,var(--brand2)) var(--elev);scrollbar-width:thin
}
@media (max-width:1000px){.sidebar{position:static;max-height:none}}
.sidebar-title{margin:.2rem 0 1rem;font-size:1.05rem}
.sidebar-actions{display:flex;gap:.5rem;align-items:center;margin:.2rem 0 1rem;flex-wrap:wrap}
.searchbar{display:flex;align-items:center;border:1px solid var(--border);background:var(--elev);padding:.45rem .6rem;border-radius:10px;width:100%}
.searchbar input{flex:1;background:transparent;border:none;color:var(--text);outline:none}

.course-actions-card{display:grid;gap:.6rem;margin-bottom:1rem;padding:.7rem;border:1px solid var(--border);border-radius:12px;background:var(--elev)}
.course-price{color:var(--text)}

/* Árbol temario */
.tree{display:grid;gap:.25rem}
.tree-group{margin:.35rem 0 .15rem}
.tree-section{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;background:var(--elev);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem;cursor:pointer}
.tree-section[aria-expanded="true"]{outline:2px solid color-mix(in oklab,var(--brand)50%,transparent)}
.tree-list{margin:.25rem 0 .4rem .25rem;padding-left:.5rem;border-left:1px dashed var(--border);display:grid;gap:.25rem}

.tree-item{
  display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:.6rem;
  padding:.55rem .65rem;border-radius:10px;border:1px solid transparent;cursor:pointer
}
.tree-item:hover{background:var(--elev);border-color:var(--border)}
.tree-item.active{background:color-mix(in oklab,var(--brand)10%,transparent);border-color:color-mix(in oklab,var(--brand)40%,transparent)}
.item-num{
  font-weight:700;color:color-mix(in oklab,var(--brand)75%,white 10%);
  font-variant-numeric:tabular-nums;margin-top:.15rem
}
.item-title{line-height:1.5}

/* Reproductor */
.player .player-inner{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);height:calc(100vh - var(--header-h) - 16px);display:flex;flex-direction:column}
@media (max-width:1000px){.player .player-inner{height:auto}}
.ratio{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:12px;overflow:hidden}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-title{margin:.8rem 0 .2rem}
.video-meta{margin:.1rem 0 0}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:1.2rem 0;color:var(--muted)}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.back-to-top{border:1px solid var(--border);padding:.4rem .6rem;border-radius:8px}
.back-to-top:hover{background:var(--card)}
body.menu-open{overflow:hidden}

/* Responsive cabecera (opcional) */
@media (max-width:920px){
  .brand-logo{height:40px}
  .nav-link{font-size:1.06rem}
}
@media (max-width:640px){
  .brand-logo{height:36px}
  .menu-open .nav-link{font-size:1.1rem}
}