/* Header: solo el logo (sin botones ni barra fija) */
.nav{position:absolute;background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;pointer-events:none}
.nav a{pointer-events:auto}

/* Barra de progreso por capítulos (lado izquierdo), sin marco.
   Colores elegidos para leerse sobre fondo crema y fondo ciruela. */
#chapters{--d:14px;position:fixed;left:28px;top:50%;transform:translateY(-50%);width:14px;height:clamp(230px,40vh,440px);z-index:60}
#chapters .ch-line{position:absolute;top:0;bottom:0;left:calc(50% - 2px);width:4px;border-radius:4px;background:rgba(168,130,230,.5)}
#chapters .ch-fill{position:absolute;left:0;right:0;top:0;height:calc(var(--d) / 2 + (100% - var(--d)) * var(--c, 0));border-radius:4px;background:var(--pink)}
#chapters .ch-dot{position:absolute;left:0;top:calc(var(--d) / 2 + (100% - var(--d)) * var(--k, 0));width:var(--d);height:var(--d);margin-top:calc(var(--d) / -2);border-radius:50%;box-sizing:border-box;background:var(--plum-800);border:3px solid rgba(200,168,255,.85);transition:background .25s,border-color .25s,box-shadow .25s}
#chapters .ch-dot.on{border-color:var(--pink)}
#chapters .ch-dot.now{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(255,200,107,.3)}
#chapters .ch-dot span{position:absolute;left:38px;top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;padding:8px 14px;border-radius:99px;font:600 11px/1 var(--f-head);letter-spacing:.18em;text-transform:uppercase;color:var(--cream);background:rgba(21,7,33,.92);border:1px solid rgba(255,255,255,.2);pointer-events:none;opacity:0;transition:opacity .35s ease,transform .35s ease}
/* El nombre aparece un momento al cambiar de sección (.show) y al pasar el ratón */
#chapters .ch-dot.show span,#chapters .ch-dot:hover span,#chapters .ch-dot:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
#chapters .ch-dot:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (max-width:768px){
  #chapters{--d:12px;left:5px;width:12px;height:clamp(200px,34vh,360px)}
    #chapters .ch-line{left:calc(50% - 1.5px);width:3px}
  #chapters .ch-dot{border-width:2px}
  #chapters .ch-dot.now{box-shadow:0 0 0 3px rgba(255,200,107,.3)}
  #chapters .ch-dot span{left:32px;padding:7px 12px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){#chapters .ch-dot,#chapters .ch-dot span{transition:none}}
