/* =====================================================================
   Portfólio · A rota (trilho lateral com as paradas da página)
   Uma carga vermelha desce pelo trilho conforme a leitura avança e acende
   a parada da seção visível. Só aparece com folga lateral (>= 1240 px).
   ===================================================================== */

.rota-lateral {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--trilho);
    z-index: 40;
    display: none;
    --topo-rota: 7.5rem;
    --base-rota: 4.5rem;
}
@media (min-width: 1240px) {
    .rota-lateral { display: block; }
}

.rota-trilho {
    position: absolute;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    top: var(--topo-rota);
    bottom: var(--base-rota);
    height: calc(100% - var(--topo-rota) - var(--base-rota));
    overflow: visible;
}
.rota-trilho line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.rota-base { stroke: var(--linha-forte); stroke-dasharray: 4 6; }
.rota-feito {
    stroke: var(--vermelho);
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--progresso, 0));
}

.rota-paradas {
    position: absolute;
    left: 0; right: 0;
    top: var(--topo-rota);
    bottom: var(--base-rota);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.rota-paradas li { height: 0; display: flex; align-items: center; }
.rota-paradas a {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: -.8rem 0;
    border-radius: 50%;
    text-decoration: none;
}
.rota-paradas a::before {
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--preto);
    border: 2px solid var(--linha-forte);
    transition: border-color .3s, background-color .3s, transform .3s var(--saida);
}
.rota-paradas a.passou::before { border-color: var(--vermelho); background: var(--vermelho); }
.rota-paradas a.atual::before { transform: scale(1.35); border-color: var(--branco); background: var(--vermelho); }

/* Nome da parada: aparece ao passar o mouse e ao focar; o da parada atual
   fica sempre à mostra quando sobra margem (>= 1440 px) para não cobrir texto. */
.rota-paradas a span {
    position: absolute;
    left: calc(100% + .35rem);
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 600;
    color: var(--branco);
    background: var(--preto);
    padding: .15rem .5rem;
    border-radius: 3px;
    opacity: 0;
    transform: translateX(-.4rem);
    transition: opacity .25s, transform .25s var(--saida);
    pointer-events: none;
}
.rota-paradas a:hover span,
.rota-paradas a:focus-visible span { opacity: 1; transform: none; }
@media (min-width: 1440px) {
    .rota-paradas a.atual span { opacity: 1; transform: none; color: var(--vermelho); }
}

.rota-carga {
    position: absolute;
    left: 50%;
    top: var(--topo-rota);
    width: .95rem;
    height: .95rem;
    margin: -.475rem 0 0 -.475rem;
    border-radius: 2px;
    background: var(--vermelho);
    box-shadow: 0 0 0 4px rgba(255, 59, 59, .18), 0 0 18px rgba(255, 59, 59, .55);
    transform: translateY(var(--carga-y, 0px)) rotate(45deg);
    pointer-events: none;
}

/* Conteúdo abre espaço para o trilho */
main { padding-left: var(--trilho); }