/* ============ "Linha do rio" — navegação lateral (desktop) ============ */
.linha-rio {
  --lr-cor: var(--bege);
  position: fixed;
  right: clamp(18px, 2.4vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  height: min(56vh, 460px);
  display: flex;
  color: var(--lr-cor);
  transition: color .6s, filter .6s;
  /* legível sobre fotografias claras (pôr do sol) */
  filter: drop-shadow(0 1px 1px rgba(5, 13, 8, .7)) drop-shadow(0 0 10px rgba(5, 13, 8, .45));
}
.linha-rio.sobre-claro { --lr-cor: var(--tinta); filter: none; }

.lr-trilho {
  position: absolute; right: 5px; top: 0; bottom: 0;
  width: 1px;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
.lr-preenche {
  position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: linear-gradient(var(--ouro-reflexo), var(--ouro) 70%, var(--terracota));
  transform-origin: top;
  transform: scaleY(var(--progresso, 0));
}
.lr-preenche::after {
  /* gota de luz que acompanha o progresso */
  content: ''; position: absolute; left: -2px; bottom: -3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ouro-reflexo);
  box-shadow: 0 0 12px 3px rgba(242, 200, 138, .6);
  transform: scaleY(calc(1 / max(var(--progresso, 1), .02)));
}

.lr-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%;
}
.lr-lista a {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 6px 0;
  text-decoration: none;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.lr-num { font-variant-numeric: tabular-nums; opacity: .55; transition: opacity .4s, color .4s; }
.lr-nome {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0;
  transition: max-width .6s var(--ease-org), opacity .4s;
}
.lr-no {
  order: 3;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  background: var(--noite);
  transition: transform .5s var(--ease-org), background-color .4s, border-color .4s;
  position: relative;
}
.linha-rio.sobre-claro .lr-no { background: var(--bege); }
.lr-no::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--ouro);
  opacity: 0; transform: scale(.4);
}
.lr-lista a:hover .lr-nome, .lr-lista a:focus-visible .lr-nome { max-width: 140px; opacity: .8; }
.lr-lista a[aria-current="true"] .lr-num { opacity: 1; color: var(--ouro); }
.lr-lista a[aria-current="true"] .lr-nome { max-width: 140px; opacity: 1; }
.lr-lista a[aria-current="true"] .lr-no {
  background: var(--ouro); border-color: var(--ouro); transform: scale(1.15);
}
.lr-lista a[aria-current="true"] .lr-no::after { animation: lr-pulso 2.4s var(--ease-org) infinite; }
@keyframes lr-pulso {
  0% { opacity: .9; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.6); }
}
.lr-lista a.visitada .lr-no { border-color: var(--ouro); }

.lr-tempo {
  position: absolute; right: -2px; bottom: -34px;
  font-size: 9px; letter-spacing: .2em; font-variant-numeric: tabular-nums;
  opacity: .55;
}
.lr-tempo::after { content: ' %'; }

/* ============ Versão móvel ============ */
.linha-topo, .lt-rotulo, .lt-menu { display: none; }

@media (max-width: 860px) {
  .linha-rio { display: none; }
  .linha-topo {
    display: block;
    position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 50;
    background: rgba(243, 239, 229, .12);
  }
  .lt-preenche {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--ouro-reflexo), var(--ouro), var(--terracota));
    transform-origin: left; transform: scaleX(var(--progresso, 0));
  }
  .lt-rotulo {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; top: 12px; right: 12px; z-index: 51;
    padding: 8px 14px;
    border: 1px solid rgba(216, 167, 99, .45); border-radius: 100px;
    background: rgba(8, 21, 14, .55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--bege);
    font: 700 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  }
  .lt-num { color: var(--ouro); }
  .lt-sep { opacity: .4; }
  .lt-menu:not([hidden]) {
    display: flex; flex-direction: column;
    position: fixed; top: 52px; right: 12px; z-index: 51;
    padding: 8px;
    background: rgba(8, 21, 14, .92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(216, 167, 99, .3); border-radius: 14px;
  }
  .lt-menu a {
    padding: 12px 16px; text-decoration: none;
    font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  }
  .lt-menu a[aria-current="true"] { color: var(--ouro); }
}