/* Painel no MacBook + iPhone (molduras em CSS; as telas são prints reais do /painel?demo).
   Usado na página inicial e em /comecar. */
.lp-devices { position: relative; padding-bottom: 4%; }
.lp-devices img { display: block; width: 100%; height: auto; }
.mac { width: 90%; }
.mac-screen { position: relative; padding: 2.4% 2.4% 2.8%; border-radius: 16px 16px 4px 4px; background: #0e1210; box-shadow: inset 0 0 0 1px #2c322e, 0 30px 60px -28px rgba(17, 24, 20, 0.45); }
.mac-screen::before { content: ''; position: absolute; top: 1%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2b312d; }
.mac-screen img { border-radius: 3px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.mac-base { position: relative; height: 13px; margin: 0 -6.5%; border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px; background: linear-gradient(180deg, #e9ecef 0%, #c4c9ce 70%, #a9afb5 100%); box-shadow: 0 18px 30px -16px rgba(17, 24, 20, 0.4); }
.mac-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 16%; height: 5px; transform: translateX(-50%); border-radius: 0 0 7px 7px; background: #b3b9bf; }
/* Borda fina (~1% da largura), como os iPhones atuais */
.iphone { position: absolute; right: 0; bottom: 0; width: 24%; padding: 1.1%; border-radius: 15% / 7%; background: #1b1f1d; box-shadow: inset 0 0 0 1px #4a514d, 0 28px 50px -20px rgba(17, 24, 20, 0.5); }
.iphone::before { content: ''; position: absolute; z-index: 1; top: 2.6%; left: 50%; width: 28%; height: 2.2%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.iphone img { border-radius: 13.5% / 6.3%; aspect-ratio: 600 / 1298; object-fit: cover; object-position: top; }