/* =========================================================
   NAVEGACIÓN DEL PROCESO
   Desktop: índice vertical fijo a la derecha (mix-blend para
   funcionar sobre fondos claros, oscuros e imágenes).
   Mobile: barra compacta inferior con capítulo actual + progreso.
   ========================================================= */
.pnav {
  position: fixed; z-index: 40;
  right: clamp(14px, 1.8vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  mix-blend-mode: difference;
  color: var(--color-white);
}

.pnav__list { display: flex; flex-direction: column; gap: 2px; }

.pnav__item {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem;
  height: 26px;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.pnav__num { opacity: 0.4; transition: opacity var(--dur-fast) ease; font-variant-numeric: tabular-nums; }

.pnav__tick {
  width: 12px; height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: width 600ms var(--ease-out), opacity var(--dur-fast) ease;
}

.pnav__name {
  position: absolute; right: calc(100% + 14px);
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--dur-fast) ease, transform 500ms var(--ease-out);
  pointer-events: none;
}

.pnav__item:hover .pnav__num,
.pnav__item:focus-visible .pnav__num { opacity: 1; }
.pnav__item:hover .pnav__tick { width: 22px; opacity: 0.8; }
.pnav__item:hover .pnav__name,
.pnav__item:focus-visible .pnav__name { opacity: 1; transform: none; }

.pnav__item.is-active .pnav__num { opacity: 1; }
.pnav__item.is-active .pnav__tick { width: 40px; opacity: 1; }

.pnav__current, .pnav__progress { display: none; }

/* Aparece tras cargar para no competir con la portada */
.js .pnav { opacity: 0; transition: opacity 900ms ease 900ms; }
.js .pnav.is-ready { opacity: 1; }

/* ---------- Mobile: barra inferior ---------- */
@media (max-width: 767px) {
  .pnav {
    top: auto; right: 10px; left: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: none;
    mix-blend-mode: normal;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem;
    padding: 0 0.4rem 0 1rem;
    height: 54px;
    overflow: hidden;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .pnav__progress {
    display: block;
    position: absolute; left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--color-accent);
    transform-origin: left;
    transform: scaleX(var(--progress, 0));
  }

  .pnav__current {
    display: flex; align-items: baseline; gap: 0.6rem;
    max-width: 44vw;
    white-space: nowrap;
  }
  .pnav__current-num { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--color-accent); }
  .pnav__current-name { overflow: hidden; text-overflow: ellipsis; }

  .pnav__list {
    flex-direction: row; gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    padding-inline: 12px;
  }
  .pnav__list::-webkit-scrollbar { display: none; }

  .pnav__item { height: 44px; min-width: 38px; justify-content: center; }
  .pnav__tick, .pnav__name { display: none; }
  .pnav__num { opacity: 0.45; }
  .pnav__item.is-active .pnav__num { color: var(--color-accent); opacity: 1; }
}