/* Moldura de celular dos mockups. Cada tela é um <article class="phone" data-os="ios|android"> */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 40px 28px; padding: 0 24px 80px; max-width: 1400px; margin: 0 auto; justify-items: center; }
.shot { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.shot h3 { font: 700 1rem/1.2 var(--font-display); margin: 0; }
.shot p { margin: 0; max-width: 34ch; color: var(--ink-soft); font-size: .88rem; text-align: center; }

.phone { position: relative; width: 340px; height: 700px; background: var(--ground); color: var(--ink); border-radius: 44px; border: 10px solid #0c0d10; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); font-family: var(--font-ui); }
.phone[data-os="android"] { border-radius: 30px; }
.phone .status { flex: none; height: 44px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 22px 6px; font: 700 .8rem var(--font-ui); }
.phone[data-os="android"] .status { height: 32px; align-items: center; padding: 0 18px; font-weight: 600; }
.phone[data-os="ios"]::before { content: ""; position: absolute; top: 9px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #0c0d10; z-index: 5; }
.phone[data-os="android"]::before { content: ""; position: absolute; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #0c0d10; z-index: 5; }
.phone .screen { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.phone .body { flex: 1; min-height: 0; overflow: hidden; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.nav-large { padding: 4px 16px 8px; }
.nav-large h1 { font: 800 1.9rem/1.05 var(--font-display); letter-spacing: -.02em; margin: 0; }
.nav-inline { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; min-height: 48px; font-weight: 700; }
.tabbar { flex: none; display: flex; justify-content: space-around; padding: 10px 8px 18px; border-top: 1px solid var(--line); background: var(--card); font: 600 .72rem var(--font-ui); color: var(--ink-soft); }
.tabbar .on { color: var(--action); }