/* Mobile page index ("Laboratorio.dc.html", proposal 3e): thin ticks on the right edge mark
   the page's sections (the current one longer, in the brand gradient); tapping them opens a
   translucent glass index aligned with the ticks. Markup built by js/page-index.js. */
.page-index { display: none; }

@media (max-width: 999px) {
  .page-index { display: block; font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .page-index__ticks { position: fixed; top: 50%; right: 0; z-index: 940; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; padding: 14px 8px 14px 14px; border: 0; background: none; transform: translateY(-50%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .page-index__ticks:focus-visible { outline: 2px solid #6a00d4; outline-offset: -2px; border-radius: 10px; }
  .page-index__tick { display: block; flex: 0 0 auto; width: 12px; height: 3px; border-radius: 999px; background: rgba(41, 9, 166, .35); transition: width .2s ease; }
  .is-current > .page-index__tick, .page-index__tick.is-current { width: 24px; background: linear-gradient(120deg, #4167dd, #2909a6 55%, #6a00d4); }

  .page-index__overlay { position: fixed; inset: 0; z-index: 950; background: rgba(246, 244, 255, .25); }
  .page-index__overlay[hidden] { display: none; }
  .page-index__panel { position: absolute; top: 50%; right: 10px; display: flex; flex-direction: column; gap: 2px; width: min(260px, calc(100vw - 20px)); padding: 10px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: rgba(255, 255, 255, .62); box-shadow: 0 20px 50px rgba(41, 9, 166, .22); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); transform: translateY(-50%); }
  .page-index .page-index__link, .page-index .page-index__link:hover { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: #1a1a2e; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: right; text-decoration: none; cursor: pointer; }
  .page-index .page-index__link.is-current { background: rgba(255, 255, 255, .85); color: #2909a6; font-weight: 800; }
  .page-index__link:focus-visible { outline: 2px solid #6a00d4; outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-index__tick { transition: none; }
}