/* Navegador vertical de capítulos — apariencia compartida (2026-08-23). La base (.page-progress{display:none} + una variante en caja con backdrop-blur, ya en desuso) vive en section-layout.css, cargado en las 46 páginas. El tratamiento realmente vigente en Home hoy es el de home-editorial-v35.css ("v35.12: una guía óptica mínima, no un panel" — gana el empate de especificidad por cargarse después de section-layout.css en ): solo la línea de puntos es permanente; la etiqueta aparece como globo junto al punto en hover/foco/activo, sin panel ni conteo permanentes. Es exactamente la apariencia que pide el brief ("línea vertical extremadamente sutil", "en estado normal solo se ve la secuencia de puntos", "sin cajas grandes permanentes"), así que es la que se generaliza aquí — desacoplada de `.pg-home` para que cualquier página con el widget se vea igual. Las reglas `.pg-home` existentes tienen mayor especificidad y siguen ganando en Home: su apariencia aprobada no cambia ni un píxel. pp-count/pp-control/pp-next quedan en el DOM (accesibles por teclado con flechas/Home/End, ver page-progress.js) pero ocultos visualmente, igual que en Home hoy. */ @media (min-width:1101px) and (hover:hover) and (pointer:fine){ .page-progress{ right:12px; width:18px; padding:7px 2px; gap:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .page-progress::before{ content:''; position:absolute; top:12px; bottom:12px; left:50%; width:1px; transform:translateX(-50%); background:linear-gradient(180deg,transparent,rgba(133,224,255,.42) 16%,rgba(255,255,255,.5) 50%,rgba(215,0,0,.6) 84%,transparent); box-shadow:0 0 5px rgba(92,207,255,.2); pointer-events:none; } .pp-count, .pp-control, .pp-next, .pp-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .pp-stops{ position:relative; z-index:1; display:grid; justify-items:center; gap:5px; padding:1px 0; } .pp-stop{ position:relative; z-index:1; width:16px; height:14px; padding:0; display:grid; place-items:center; border:0; background:transparent; color:#fff; cursor:pointer; } .pp-stop > span{ width:3px; height:3px; border:1px solid rgba(210,241,255,.66); border-radius:50%; background:#0b3149; box-shadow:0 0 4px rgba(106,215,255,.2); transition:width .14s ease,height .14s ease,background .14s ease,box-shadow .14s ease; } .pp-stop:hover > span, .pp-stop:focus-visible > span{ width:5px; height:5px; } .pp-stop.is-active > span{ width:7px; height:7px; background:var(--brick,#d70000); box-shadow:0 0 0 2px rgba(215,0,0,.14),0 0 8px rgba(255,68,68,.58); } .pp-stop:focus-visible{ outline:1px solid #fff; outline-offset:1px; } .pp-stop > i{ display:none; } .pp-stop > em{ position:absolute; right:20px; top:50%; display:block; min-width:max-content; padding:4px 7px; border-right:1px solid rgba(215,0,0,.72); background:rgba(0,23,43,.82); box-shadow:0 6px 18px rgba(0,23,43,.12); opacity:0; transform:translate(3px,-50%); color:#fff; font-family:'Archivo',sans-serif; font-size:8px; font-style:normal; font-weight:750; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; pointer-events:none; transition:opacity .12s ease,transform .12s ease; } .pp-stop.is-active > em{ opacity:.58; transform:translate(0,-50%); } .page-progress:hover .pp-stop.is-active > em, .pp-stop:hover > em, .pp-stop:focus-visible > em{ opacity:1; transform:translate(0,-50%); } } @media (prefers-reduced-motion:reduce){ .page-progress *{ transition:none !important; } } /* Objetivo tactil de las paradas (Lote 4, 2026-08-25). El riel solo se muestra por encima de 1440px, asi que en movil y tablet no existe como objetivo tactil (display:none). Esta regla cubre el caso de un equipo ancho CON pantalla tactil: el paso vertical pasa de 19px a 44px para que dos paradas no se solapen, y el punto visual conserva su tamano. El ANCHO no se amplia a proposito: el riel esta pegado al borde y una caja de 44px de ancho interceptaria toques sobre el contenido. */ @media (pointer:coarse){ .pp-stops{ gap:0; } .pp-stop{ height:44px; } }