/* =========================================================================
   MEDC no Celular — só o que é exclusivo desta página.
   Paleta, botões, hero, seções, cards e CTA final vêm de /css/recurso.css,
   o molde das páginas de recurso.

   O que sobra aqui: o carrossel de aparelhos e os selos das lojas.
   ========================================================================= */

/* ----------------------------- CARROSSEL ------------------------------ */
.palco {
    position: relative;
    height: 810px;
    margin: 44px 0 36px;
}

.palco-trilho {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tela {
    position: absolute;
    margin: 0;
    /* a largura vira variável: a moldura, os cantos e os botões laterais são
       todos proporções dela, então basta trocar aqui em cada quebra */
    --larg: 420px;
    width: var(--larg);
    transition: transform .62s cubic-bezier(.22, .61, .36, 1),
                opacity .62s ease,
                filter .62s ease;
    will-change: transform, opacity;
}

/* as de trás avançam o carrossel, como as setas */
.tela.pos-esquerda,
.tela.pos-direita { cursor: pointer; }

/* Posições: o script troca só estas classes. O deslocamento lateral é menor
   que a metade da largura, então as telas de trás encostam por baixo da do
   meio — é isso que dá a profundidade. */
.tela.pos-centro   { transform: translateX(0)     scale(1);   opacity: 1;   z-index: 3; }
.tela.pos-esquerda { transform: translateX(-63%)  scale(.70); opacity: .62; z-index: 2; filter: saturate(.88) brightness(.94); }
.tela.pos-direita  { transform: translateX(63%)   scale(.70); opacity: .62; z-index: 2; filter: saturate(.88) brightness(.94); }
.tela.pos-fora     { transform: translateX(0)     scale(.62); opacity: 0;   z-index: 1; pointer-events: none; }

/* Moldura do aparelho — mesmas proporções do mockup de iPhone do /aiva/:
   corpo quase preto, cantos largos, anel interno claro e os dois botões
   laterais. A dynamic island vem desenhada na própria imagem, para escalar
   junto com as telas de trás sem cálculo em CSS. */
.tela-moldura {
    position: relative;
    background: #0b0b0e;
    border-radius: calc(var(--larg) * 0.158);
    padding: calc(var(--larg) * 0.038);
    box-shadow: 0 30px 60px rgba(6, 24, 58, .34),
                0 6px 16px rgba(6, 24, 58, .2),
                inset 0 0 0 2px #26262d;
}

/* botões laterais */
.tela-moldura::before,
.tela-moldura::after {
    content: "";
    position: absolute;
    width: calc(var(--larg) * 0.009);
    background: #17171c;
}

.tela-moldura::before {
    left: calc(var(--larg) * -0.005);
    top: calc(var(--larg) * 0.439);
    height: calc(var(--larg) * 0.187);
    border-radius: 3px 0 0 3px;
}

.tela-moldura::after {
    right: calc(var(--larg) * -0.005);
    top: calc(var(--larg) * 0.351);
    height: calc(var(--larg) * 0.281);
    border-radius: 0 3px 3px 0;
}

.tela-moldura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--larg) * 0.123);
}

/* ------------------------------ LEGENDA ------------------------------- */
.palco-legenda { max-width: 46em; margin: 0 auto; text-align: center; }

.legenda-texto {
    margin: 0 0 26px;
    min-height: 3.4em;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
}

.legenda-texto b { color: var(--ink); font-weight: 600; }

.palco-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.palco-bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}

.palco-bt:hover { border-color: var(--cta); color: var(--cta); }

.palco-pontos { display: flex; align-items: center; gap: 9px; }

.ponto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}

.ponto.ativo { background: var(--cta); width: 26px; border-radius: 999px; }

/* --------------------------- SELOS DAS LOJAS -------------------------- */
/* Não são links: os aplicativos ainda estão em aprovação. */
.lojas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

.loja {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    opacity: .82;
}

.loja span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; font-size: 17px; font-weight: 600; }
.loja small { font-size: 11px; font-weight: 400; opacity: .8; }

.lojas-nota { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ---------------------------- RESPONSIVO ------------------------------ */
@media (max-width: 900px) {
    .palco { height: 630px; }
    .tela { --larg: 320px; }
    .tela.pos-esquerda { transform: translateX(-60%) scale(.72); opacity: .5; }
    .tela.pos-direita  { transform: translateX(60%)  scale(.72); opacity: .5; }
}

@media (max-width: 560px) {
    .palco { height: 480px; }
    .tela { --larg: 240px; }
    /* nas telas estreitas as laterais só espiam pela borda */
    .tela.pos-esquerda { transform: translateX(-58%) scale(.74); opacity: .42; }
    .tela.pos-direita  { transform: translateX(58%)  scale(.74); opacity: .42; }
    .legenda-texto { font-size: 15.5px; min-height: 4.6em; }
}

@media (prefers-reduced-motion: reduce) {
    .tela, .palco-bt, .ponto { transition: none; }
}