:root { --tinta:#0f172a; --tinta2:#1e293b; --verde:#1d4ed8; --verde-osc:#1e40af; --verde-claro:#dbeafe; --lima:#60a5fa; --linea:#e2e8f0; --gris:#64748b; --fondo:#f1f4f9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--fondo); color:var(--tinta); font:16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; }
.ancho { max-width:1480px; margin-left:auto; margin-right:auto; padding:0 32px; }

/* Encabezado: una franja oscura con una cuadrícula suave. */
.cabeza { color:#fff; background-color:var(--tinta);
  background-image:radial-gradient(900px 380px at 88% -10%, rgba(59,130,246,.22), transparent 70%), linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size:auto, 46px 46px, 46px 46px; padding-bottom:128px; }
.tope { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid rgba(148,163,184,.16); }
.marca { color:#fff; text-decoration:none; display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.01em; }
.marca img { width:36px; height:36px; border-radius:10px; }
.marca b { color:var(--lima); font-weight:700; }
.marca em { font-style:normal; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; border-left:1px solid rgba(148,163,184,.35); padding-left:12px; margin-left:4px; }
.entrar { color:#e2e8f0; text-decoration:none; font-weight:600; font-size:14px; border:1px solid rgba(148,163,184,.4); border-radius:10px; padding:8px 14px; white-space:nowrap; }
.entrar:hover { background:rgba(255,255,255,.08); }
.portada { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-top:34px; }
.portada h1 { margin:0 0 8px; font-size:clamp(28px, 3.4vw, 44px); line-height:1.1; letter-spacing:-.025em; }
.portada p { margin:0; color:#cbd5e1; max-width:60ch; font-size:17px; }
.avance { min-width:260px; flex:0 1 320px; }
.avance span { display:flex; justify-content:space-between; font-size:13px; color:#cbd5e1; margin-bottom:8px; }
.avance span b { color:#fff; }
.avance span i { font-style:normal; }
.barra { height:8px; border-radius:99px; background:rgba(148,163,184,.25); overflow:hidden; }
.barra i { display:block; height:100%; width:0; background:linear-gradient(90deg, #3b82f6, #93c5fd); border-radius:99px; transition:width .4s; }

/* Reproductor y lista, montados sobre la franja oscura. */
main { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:28px; margin-top:-96px; margin-bottom:44px; align-items:stretch; }
.visor { min-width:0; }
.marco { position:relative; border-radius:16px; overflow:hidden; background:#000; box-shadow:0 24px 60px -18px rgba(15,23,42,.55), 0 0 0 1px rgba(15,23,42,.5); aspect-ratio:16/9; }
video { width:100%; height:100%; display:block; background:#000; }
.tapa { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; gap:4px; padding:clamp(18px, 3vw, 36px); border:0; cursor:pointer; color:#fff; background-size:cover; background-position:center top; }
.tapa::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.55) 45%, rgba(15,23,42,.94) 100%); }
.tapa > * { position:relative; }
.tapa[hidden] { display:none; }
.tapa .play { position:absolute; left:50%; top:46%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; background:var(--verde); display:grid; place-items:center; box-shadow:0 0 0 10px rgba(59,130,246,.25), 0 12px 30px rgba(0,0,0,.4); transition:transform .15s; }
.tapa:hover .play { transform:scale(1.06); }
.tapa .play::after { content:""; border-style:solid; border-width:15px 0 15px 25px; border-color:transparent transparent transparent #fff; margin-left:6px; }
.tapa small { font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:13px; color:var(--lima); }
.tapa strong { font-size:clamp(22px, 2.6vw, 36px); line-height:1.12; letter-spacing:-.02em; }
.tapa span { color:#cbd5e1; font-size:15px; }

.ficha { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:24px 26px; margin-top:20px; }
.ficha-tope { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.ficha small { color:var(--verde-osc); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:12px; }
.ficha h2 { margin:2px 0 4px; font-size:clamp(22px, 2vw, 28px); letter-spacing:-.02em; line-height:1.15; }
.ficha p { margin:0; color:var(--gris); max-width:62ch; }
.pasos { display:flex; gap:10px; flex-shrink:0; }
.pasos button { font-weight:600; border-radius:10px; padding:10px 16px; cursor:pointer; border:1px solid var(--linea); background:#fff; white-space:nowrap; }
.pasos button:hover:not(:disabled) { border-color:#94a3b8; }
.pasos button.sig { background:var(--verde); border-color:var(--verde); color:#fff; }
.pasos button.sig:hover:not(:disabled) { background:var(--verde-osc); border-color:var(--verde-osc); }
.pasos button:disabled { opacity:.4; cursor:default; }
.aprende { margin-top:20px; padding-top:18px; border-top:1px solid var(--linea); }
.aprende h3 { margin:0 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); }
.aprende ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 24px; }
.aprende li { position:relative; padding-left:28px; }
.aprende li::before { content:"✓"; position:absolute; left:0; top:2px; width:19px; height:19px; border-radius:50%; background:var(--verde-claro); color:var(--verde-osc); font-size:12px; font-weight:700; display:grid; place-items:center; }

.indice { background:#fff; border:1px solid var(--linea); border-radius:16px; box-shadow:0 24px 60px -24px rgba(15,23,42,.45); display:flex; flex-direction:column; height:0; min-height:100%; overflow:hidden; }
.indice-tope { display:flex; justify-content:space-between; align-items:baseline; padding:16px 18px 13px; border-bottom:1px solid var(--linea); }
.indice-tope h3 { margin:0; font-size:17px; letter-spacing:-.01em; }
.indice-tope span { color:var(--gris); font-size:13px; }
.indice ol { list-style:none; margin:0; padding:10px; display:grid; gap:4px; overflow-y:auto; flex:1; align-content:start; }
.indice li button { width:100%; text-align:left; display:grid; grid-template-columns:128px minmax(0,1fr); gap:13px; align-items:center; background:transparent; border:1px solid transparent; border-radius:12px; padding:8px; cursor:pointer; }
.indice li button:hover { background:#f1f5f9; }
.mini { position:relative; display:block; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#e2e8f0; border:1px solid var(--linea); }
.mini img { width:100%; height:100%; object-fit:cover; object-position:left top; display:block; }
.mini time { position:absolute; right:4px; bottom:4px; background:rgba(15,23,42,.86); color:#fff; font-size:11px; font-weight:600; border-radius:5px; padding:1px 5px; font-variant-numeric:tabular-nums; }
.mini i { position:absolute; left:4px; top:4px; width:20px; height:20px; border-radius:50%; background:var(--verde); color:#fff; font-style:normal; font-size:12px; font-weight:700; display:none; place-items:center; box-shadow:0 0 0 2px #fff; }
.indice li small { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); }
.indice li strong { display:block; font-size:15px; line-height:1.25; margin-top:1px; }
.indice li em { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-style:normal; color:var(--gris); font-size:13px; line-height:1.35; margin-top:2px; }
.indice li.visto .mini i { display:grid; }
.indice li.activo button { background:var(--verde-claro); border-color:#93c5fd; }
.indice li.activo small { color:var(--verde-osc); }
.indice li.activo .mini { border-color:var(--verde); }

footer { color:var(--gris); font-size:13px; padding:0 16px 34px; text-align:center; }

@media (max-width:1100px) {
  main { grid-template-columns:minmax(0,1fr); }
  .indice { height:auto; min-height:0; }
  .indice ol { overflow:visible; }
}
@media (max-width:640px) {
  .ancho { padding:0 16px; }
  .cabeza { padding-bottom:104px; }
  .marca em, .entrar { display:none; }
  .portada { padding-top:24px; gap:18px; }
  .portada p { font-size:16px; }
  .avance { flex-basis:100%; }
  main { margin-top:-84px; gap:18px; }
  .ficha { padding:18px; }
  .pasos { width:100%; }
  .pasos button { flex:1; padding:10px 8px; }
  .aprende ul { grid-template-columns:minmax(0,1fr); }
  .tapa .play { width:64px; height:64px; margin:-32px 0 0 -32px; top:40%; }
  .tapa .play::after { border-width:11px 0 11px 18px; margin-left:4px; }
  .tapa span { display:none; }
  .indice li button { grid-template-columns:108px minmax(0,1fr); }
}