/* =====================================================================
   Portfólio · Moldura de navegador (onde os protótipos rodam)
   ===================================================================== */

.navegador {
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-g);
    background: var(--superficie);
    overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(215, 15, 27, .35), 0 0 0 1px rgba(255, 255, 255, .02);
}

.navegador-barra {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--linha);
    background: var(--superficie-2);
    font-size: .8rem;
}
.navegador-luzes { display: flex; gap: .4rem; }
.navegador-luzes i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--linha-forte); }
.navegador-luzes i:first-child { background: var(--vermelho-forte); }

.navegador-endereco {
    flex: 1;
    min-width: 0;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--preto);
    color: var(--apagado);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navegador-selo {
    flex: 0 0 auto;
    color: var(--vermelho);
    font-weight: 600;
    padding: .2rem .55rem;
    border: 1px solid rgba(255, 59, 59, .4);
    border-radius: 999px;
}

.navegador-restaurar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: transparent;
    color: var(--apagado);
    transition: color .2s, border-color .2s, transform .5s var(--saida);
}
.navegador-restaurar:hover { color: var(--branco); border-color: var(--branco); transform: rotate(-200deg); }

.navegador-tela {
    position: relative;
    height: clamp(560px, 72vh, 700px);
    overflow: hidden;
}

@media (max-width: 560px) {
    .navegador-luzes { display: none; }
    .navegador-selo { display: none; }
    .navegador-tela { height: 640px; }
}