/* ============================================================
   Orizon — Seção App do membro (#app): composição de devices
   Porta as telas reais do app (screenshots da App Store) para
   dentro de frames de device na home. Estende .phone/.app-stage
   do orizon-site.css. Prefixos novos, sem colisão: .phone-sm,
   .mp-*, .ph-today, .ph-ev, .app-incl-badge
   ============================================================ */

/* ---- selo: app incluso em todos os planos ---- */
.app-incl-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding: 11px 16px; border-radius: 999px;
  background: var(--accent); color: var(--fg-on-accent);
  font: 800 13px/1 var(--font-sans); letter-spacing: 0.02em;
}
.app-incl-badge .ic { width: 17px; height: 17px; }

/* ---- stage acomoda os 3 devices ---- */
.app-stage { min-height: 580px; }

/* ---- device central: agenda do dia (da tela Hoje real) ---- */
.ph-today { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; }
.ph-today span { font: 700 13px/1 var(--font-sans); color: var(--orz-ink); }
.ph-today b { font: 600 10.5px/1 var(--font-sans); color: var(--brand); }
.ph-ev { display: flex; align-items: center; gap: 10px; margin-top: 9px; background: var(--bg-surface); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(11,22,56,0.06); }
.ph-ev-ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(20,53,244,0.08); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-ev-ic .ic { width: 16px; height: 16px; }
.ph-ev-t { font: 700 12.5px/1.2 var(--font-sans); color: var(--fg-primary); }
.ph-ev-s { font: 500 10.5px/1.3 var(--font-sans); color: var(--fg-secondary); margin-top: 2px; }

/* ---- mini devices laterais (frame tipo iPhone, menor) ---- */
.phone-sm {
  position: absolute; width: 208px; aspect-ratio: 208 / 430;
  background: #0E1320; border-radius: 36px; padding: 9px;
  box-shadow: var(--shadow-float); z-index: 1;
}
.phone-sm::before { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 68px; height: 19px; background: #0E1320; border-radius: 999px; z-index: 5; }
.mp-give { left: 50%; margin-left: -304px; top: 30px; transform: rotate(-6deg); }
.mp-pray { left: 50%; margin-left: 96px; top: 86px; transform: rotate(6deg); }

.mp-screen { width: 100%; height: 100%; border-radius: 28px; overflow: hidden; position: relative; background: var(--bg-app); }
.mp-screen::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background-image: url("assets/sky-day.jpg"); background-size: cover; background-position: 50% 40%; }
.mp-screen::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(to bottom, rgba(247,244,234,0) 20%, var(--bg-app) 95%); }
.mp-body { position: absolute; inset: 0; padding: 40px 13px 14px; z-index: 2; }

.mp-title { font: 800 18px/1.05 var(--font-sans); letter-spacing: -0.02em; color: var(--orz-ink); }
.mp-sub { font: 500 10.5px/1.3 var(--font-sans); color: var(--fg-secondary); margin-top: 3px; }

/* ---- tela Doar (portada de S5) ---- */
.mp-amount { margin-top: 12px; background: linear-gradient(135deg, var(--brand-deep), var(--orz-navy-800)); color: #fff; border-radius: var(--radius-md); padding: 13px; position: relative; overflow: hidden; }
.mp-glow { position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,205,120,0.35) 0%, transparent 65%); }
.mp-o { font: 700 8.5px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65); position: relative; }
.mp-amt { font: 800 24px/1 var(--font-sans); letter-spacing: -0.02em; margin-top: 7px; position: relative; color: #fff; }
.mp-chips { display: flex; gap: 5px; margin-top: 10px; position: relative; }
.mp-chips span { font: 600 9.5px/1 var(--font-sans); padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; }
.mp-chips span.on { background: #fff; color: var(--orz-ink); font-weight: 700; }
.mp-rec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.14); position: relative; }
.mp-rec-t { font: 700 10.5px/1.2 var(--font-sans); color: #fff; }
.mp-rec-s { font: 500 9px/1.3 var(--font-sans); color: rgba(255,255,255,0.65); margin-top: 2px; }
.mp-toggle { width: 32px; height: 19px; border-radius: 999px; background: var(--accent); position: relative; flex-shrink: 0; display: inline-block; }
.mp-toggle i { position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

.mp-pay { margin-top: 12px; background: var(--bg-surface); border-radius: var(--radius-md); padding: 3px 11px; box-shadow: 0 1px 2px rgba(11,22,56,0.06); }
.mp-pay-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; }
.mp-pay-row + .mp-pay-row { border-top: 1px solid rgba(33,34,35,0.08); }
.mp-pay-row .ic { width: 15px; height: 15px; color: var(--orz-ink); flex-shrink: 0; }
.mp-pay-row.off .ic { color: var(--fg-secondary); }
.mp-pix { width: 15px; height: 15px; color: var(--orz-ink); flex-shrink: 0; }
.mp-pay-t { font: 600 10.5px/1.2 var(--font-sans); color: var(--fg-primary); }
.mp-pay-t em { font: 500 9px/1 var(--font-sans); font-style: normal; color: var(--fg-secondary); display: block; margin-top: 2px; }
.mp-radio { width: 13px; height: 13px; border-radius: 999px; border: 1.5px solid rgba(33,34,35,0.28); flex-shrink: 0; }
.mp-radio.on { border: 4px solid var(--brand); background: #fff; }
.mp-cta { margin-top: 12px; background: var(--brand); color: #fff; border-radius: 12px; padding: 11px; text-align: center; font: 700 11.5px/1 var(--font-sans); }

/* ---- tela Orações (portada de S2) ---- */
.mp-tabs { display: flex; gap: 5px; margin-top: 11px; }
.mp-tabs span { font: 600 10px/1 var(--font-sans); padding: 7px 11px; border-radius: 999px; background: var(--bg-surface); color: var(--fg-secondary); box-shadow: inset 0 0 0 1px rgba(33,34,35,0.12); }
.mp-tabs span.on { background: var(--orz-ink); color: var(--bg-app); box-shadow: none; font-weight: 700; }
.mp-post { margin-top: 10px; background: var(--bg-surface); border-radius: 13px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(11,22,56,0.06); }
.mp-who { display: flex; align-items: center; gap: 8px; }
.mp-av { width: 27px; height: 27px; border-radius: 999px; background: var(--orz-navy-800); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-sans); flex-shrink: 0; }
.mp-av.anon { background: var(--orz-sand-100); color: var(--fg-secondary); }
.mp-av .ic { width: 13px; height: 13px; }
.mp-n { font: 700 11px/1.1 var(--font-sans); color: var(--fg-primary); }
.mp-m { font: 500 9px/1.1 var(--font-sans); color: var(--fg-tertiary); margin-top: 2px; }
.mp-post p { font: 500 10.5px/1.45 var(--font-sans); color: var(--fg-primary); margin: 8px 0 0; }
.mp-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 6px 10px; border-radius: 999px; font: 700 9.5px/1 var(--font-sans); background: var(--bg-surface); color: var(--fg-primary); box-shadow: inset 0 0 0 1px rgba(33,34,35,0.14); }
.mp-pill .ic { width: 12px; height: 12px; color: var(--fg-secondary); }
.mp-pill.lime { background: var(--accent); color: var(--fg-on-accent); box-shadow: none; }
.mp-pill.lime .ic { color: var(--fg-on-accent); }

/* ---- cards flutuantes reposicionados sobre a composição ---- */
@media (min-width: 961px) {
  .app-stage .app-card-float.c1 { top: -2%; right: -4%; z-index: 4; }
  .app-stage .app-card-float.c2 { bottom: 2%; left: -5%; z-index: 4; }
}

/* ---- responsivo ---- */
@media (max-width: 1280px) {
  .phone-sm { width: 184px; aspect-ratio: 184 / 450; }
  .mp-give { margin-left: -244px; }
  .mp-pray { margin-left: 60px; }
}
@media (max-width: 960px) {
  .phone-sm { display: none; }
  .app-stage { min-height: 540px; }
}