/* ========================================
   MOLDURA DE CELULAR — DEMO CELULAR/DESKTOP

   Desenha o aparelho que envolve o <iframe> da demo na landing page.

   Só a moldura mora aqui. O conteúdo dentro do iframe tem CSS próprio, em
   static/css/demo-celular-desktop/, e um não enxerga o outro.
   ======================================== */

/* Brilho roxo ao redor do aparelho — mesma linguagem visual da moldura do
   vídeo (secoes/video-vertical.html). */
.demo-palco {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 2.5rem;
    background: radial-gradient(ellipse at center,
                rgba(139, 92, 246, 0.28) 0%,
                rgba(59, 130, 246, 0.18) 50%,
                transparent 100%);
}

/* ----- O aparelho ----- */

.demo-celular {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 12px;
    border-radius: 46px;
    background: linear-gradient(160deg, #2f2f38 0%, #16161c 45%, #26262e 100%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.06),
        0 30px 60px -15px rgba(0, 0, 0, 0.75),
        0 0 45px rgba(139, 92, 246, 0.35);
}

/* Ilha do alto-falante, sobreposta à tela. */
.demo-celular::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 84px;
    height: 20px;
    border-radius: 12px;
    background: #08080b;
}

/* ----- A tela ----- */

.demo-tela {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    background: #0b1220;
    /* Proporção de celular (390 x 844). Manter em aspect-ratio, e não em
       altura fixa, faz a tela acompanhar a largura em qualquer aparelho. */
    aspect-ratio: 390 / 780;
}

.demo-tela iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ----- Celular e tablet (< 1024px) -----

   No celular o aparelho encostava nas bordas da página. Aqui ele fica mais
   estreito, ganhando folga lateral — e SÓ isso: a altura é a mesma de antes.

   Como a altura vem da largura (aspect-ratio), estreitar sem mexer na
   proporção encolheria os dois. Por isso a proporção é alongada junto, de
   1:2,0 para 1:2,26, o que devolve a altura original. De quebra fica mais
   perto de um aparelho de verdade, que é 1:2,16.

   Vale SÓ abaixo de 1024px — no desktop a moldura larga já está certa. */

@media (max-width: 1023px) {
    .demo-celular {
        /* Era 360px, quase a largura inteira de um celular comum. Abaixo de
           300px o aparelho começa a parecer esticado. */
        max-width: 320px;
    }

    .demo-tela {
        aspect-ratio: 390 / 880;
    }
}

/* ----- Telas maiores ----- */

@media (min-width: 1024px) {
    .demo-palco {
        background: #2d1b4e;
        border: 2px solid rgba(139, 92, 246, 0.6);
        border-radius: 1.5rem;
        box-shadow: 0 25px 50px -12px rgba(26, 11, 46, 0.6);
    }
}