/*
 * App no celular (PWA): peças comuns ao painel e à loja. Carregado pelas tags de inc/painel_app.php e inc/loja_app.php.
 * Janela do passo a passo do iPhone (criada pelo assets/app-celular.js).
 */
.app-ios { width: min(420px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 22px; background: #fff; color: #17171a; box-shadow: 0 30px 70px -20px rgb(0 0 0 / .5); font-family: inherit; }
.app-ios::backdrop { background: rgb(10 10 12 / .6); backdrop-filter: blur(2px); }
.app-ios-caixa { display: grid; gap: 10px; padding: 26px 22px 20px; text-align: center; }
.app-ios-icone { justify-self: center; width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6); }
.app-ios h2 { margin: 6px 0 0; font-family: var(--fonte-titulo, inherit); font-size: 20px; line-height: 1.25; }
.app-ios-sub { margin: 0; font-size: 14px; color: #55524b; }
.app-ios-passos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.app-ios-passos li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #faf8f3; border: 1px solid #e8e2d4; font-size: 14.5px; line-height: 1.4; }
.app-ios-passos svg { display: inline-block; vertical-align: -5px; margin: 0 2px; color: #0a84ff; }
.app-ios-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f5d77a, #e0b12e 55%, #b8860b); color: #1a1300; font-weight: 800; font-size: 14px; }
.app-ios-nota { margin: 4px 0 6px; font-size: 13px; color: #6b675e; }
@media (max-width: 560px) {
    /* no celular a janela sobe de baixo, como as outras janelas do site */
    .app-ios { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; }
    .app-ios-caixa { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}