/* =====================================================================
   Portfólio · Topo
   No computador: uma barra em pílula, centralizada e com vidro fosco. Um
   destaque vermelho desliza para o item sob o mouse e volta para a seção
   que está na tela. No celular: botão que abre o menu em tela cheia.
   ===================================================================== */

.topo {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding-left: var(--trilho);
    pointer-events: none;
}
.topo-dentro {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--margem);
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topo-menu, .topo-abrir { pointer-events: auto; }

/* ---------- Pílula ---------- */
.topo-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .35rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(17, 17, 19, .55);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background-color .35s, border-color .35s, box-shadow .35s, transform .45s var(--saida);
}
.topo.rolou .topo-menu {
    background: rgba(10, 10, 11, .82);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 59, 59, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.js .topo-menu { opacity: 0; transform: translateY(-14px); }
.js.carregou .topo-menu { opacity: 1; transform: none; transition: opacity .7s var(--saida) .3s, transform .9s var(--saida) .3s, background-color .35s, border-color .35s, box-shadow .35s; }

.topo-link {
    position: relative;
    z-index: 1;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    color: var(--apagado);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s;
}
.topo-link:hover,
.topo-link.sob-cursor,
.topo-link[aria-current="true"] { color: var(--branco); }
.topo-link:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* Destaque que desliza (posição e largura vêm do JS) */
.topo-indicador {
    position: absolute;
    z-index: 0;
    top: .35rem;
    bottom: .35rem;
    left: 0;
    width: var(--w, 0px);
    transform: translateX(var(--x, 0px));
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 59, 59, .22), rgba(215, 15, 27, .14));
    box-shadow: inset 0 0 0 1px rgba(255, 59, 59, .45), 0 0 18px -4px rgba(255, 59, 59, .5);
    opacity: 0;
    pointer-events: none;
    transition: transform .45s var(--saida), width .45s var(--saida), opacity .25s;
}
.topo-indicador.visivel { opacity: 1; }
.topo-indicador.sem-transicao { transition: none; }

.topo-divisor { width: 1px; height: 1.4rem; margin: 0 .35rem; background: rgba(255, 255, 255, .14); }

.topo-curriculo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: var(--vermelho-forte);
    color: var(--branco);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(215, 15, 27, .8);
    transition: background-color .25s, box-shadow .25s, transform .2s var(--saida);
}
.topo-curriculo:hover { color: var(--branco); background: #ff3b47; box-shadow: 0 8px 24px -6px rgba(255, 59, 59, .9); transform: translateY(-1px); }
.topo-curriculo .icone { width: 1em; height: 1em; }

/* ---------- Botão do celular ---------- */
.topo-abrir {
    display: none;
    background: rgba(17, 17, 19, .7);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--branco);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    place-items: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.topo-abrir .icone { width: 1.3rem; height: 1.3rem; }

/* Barra de progresso: só quando o trilho lateral não cabe. */
.topo-progresso {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    pointer-events: none;
}
.topo-progresso span {
    display: block;
    height: 100%;
    background: var(--vermelho);
    transform-origin: left;
    transform: scaleX(var(--progresso, 0));
}
@media (min-width: 1240px) {
    .topo-progresso { display: none; }
}

/* ---------- Celular: menu em tela cheia ---------- */
@media (max-width: 860px) {
    .topo-dentro { justify-content: flex-end; height: 4.5rem; }
    .topo-abrir { display: grid; position: relative; z-index: 2; }
    .js .topo-menu, .js.carregou .topo-menu { opacity: 0; transform: translateY(-1rem); }
    .topo-menu {
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: .4rem;
        padding: 5rem var(--margem) 2rem;
        border: 0;
        border-radius: 0;
        background: var(--preto);
        box-shadow: none;
        visibility: hidden;
        transition: opacity .3s var(--saida), transform .3s var(--saida), visibility 0s .3s;
    }
    .topo.menu-aberto .topo-menu,
    .js.carregou .topo.menu-aberto .topo-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .3s var(--saida), transform .3s var(--saida);
    }
    .topo-link {
        padding: .2rem 0;
        font-size: var(--t-4);
        font-stretch: var(--larga);
        font-weight: 800;
        color: var(--branco);
        letter-spacing: -.02em;
    }
    .topo-link[aria-current="true"] { color: var(--vermelho); }
    .topo-indicador, .topo-divisor { display: none; }
    .topo-curriculo { margin-top: 1.5rem; font-size: 1rem; padding: .75rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .js .topo-menu { opacity: 1; transform: none; }
}