/* ============================================================
   Device — moldura de vidro escuro em volta da gravação do painel.
   Hover só acende a borda e o brilho; nada se move. Numa seção cujo
   assunto já é uma tela em movimento, o device se mexer vira ruído.
   ============================================================ */

.device {
    margin: 0;
    padding: 10px;
    border-radius: var(--radius-card);
    transition:
        border-color var(--dur-slow) var(--ease-apple),
        box-shadow   var(--dur-slow) var(--ease-apple);
}

.device__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 4px var(--space-3) 12px;
}

.device__dots { display: flex; gap: 6px; }
.device__dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.device__caption {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
}

/* O raio de dentro é o de fora menos o respiro da moldura: os dois cantos
   ficam concêntricos. */
.device__screen {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius-card) - 10px);
    background: #0B0E12;
}

.device__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover) {
    .device:hover {
        border-color: rgba(185, 184, 255, 0.70);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 30px 70px rgba(15, 10, 70, 0.35),
            0 0 60px var(--brand-glow);
    }
}