/* Aparelhos (notebook e celular) com acabamento 3D: usados na página de apresentação e no passo a passo. Sem estilos inline.
   Estrutura: .ap > .ap-nb > .ap-tampa > .ap-tela(conteúdo) + .ap-base · .ap > .ap-cel > .ap-ilha + .ap-cel-in > .ap-tela */
.ap{position:relative;margin:0 auto;width:100%}
.ap-nb{width:84%;margin:0 auto;position:relative;filter:drop-shadow(0 30px 38px rgba(14,30,22,.38)) drop-shadow(0 6px 10px rgba(14,30,22,.22))}
.ap-tampa{position:relative;background:linear-gradient(180deg,#34383f 0%,#1a1d22 100%);border-radius:20px 20px 7px 7px;padding:1.7% 1.7% 2.2%;box-shadow:0 0 0 1px #5a606b,0 0 0 2.5px #0b0c0f,inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.6)}
.ap-tampa::before{content:"";position:absolute;top:.7%;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3b4d73 0,#0a0c10 62%);box-shadow:0 0 0 1.5px #23262d}
.ap-tampa::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,transparent 34%,transparent 68%,rgba(255,255,255,.04) 100%)}
.ap-base{position:relative;height:clamp(11px,1.6vw,20px);margin:0 -5.4%;border-radius:2px 2px 24px 24px / 2px 2px 15px 15px;background:linear-gradient(180deg,#f1f3f6 0%,#cdd2db 36%,#a7aebb 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.28)}
.ap-base::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(180deg,rgba(0,0,0,.38),transparent);border-radius:2px 2px 0 0}
.ap-base::after{content:"";position:absolute;left:50%;top:0;width:15%;height:62%;margin-left:-7.5%;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#98a0ad,#bcc2cc);box-shadow:inset 0 -1px 2px rgba(0,0,0,.28)}
.ap-tela{position:relative;overflow:hidden;background:#fff;border-radius:5px}
.ap-nb .ap-tela{aspect-ratio:16/10}
.ap-cel{position:absolute;right:0;bottom:0;width:15.5%;aspect-ratio:9/19;border-radius:15% / 7.2%;background:linear-gradient(155deg,#444a56 0%,#16191f 52%,#2d323c 100%);padding:3.6%;box-shadow:0 0 0 1.5px #646b78,0 0 0 3px #0c0d10,inset 0 1px 0 rgba(255,255,255,.26),0 28px 46px rgba(14,30,22,.5),0 6px 12px rgba(14,30,22,.3);z-index:3}
.ap-cel::before{content:"";position:absolute;left:-4px;top:19%;width:3px;height:7%;border-radius:2px 0 0 2px;background:#636a77;box-shadow:0 150% 0 #636a77,0 280% 0 #636a77}
.ap-cel::after{content:"";position:absolute;right:-4px;top:26%;width:3px;height:11%;border-radius:0 2px 2px 0;background:#636a77}
.ap-ilha{position:absolute;top:2.5%;left:50%;width:27%;height:2.5%;border-radius:99px;background:#000;transform:translateX(-50%);z-index:5;box-shadow:0 0 0 1px #14161a}
.ap-cel-in{position:absolute;inset:3.6%;border-radius:12.5% / 5.8%;overflow:hidden;background:#fff}
.ap-cel-in::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.14) 0%,transparent 36%);z-index:4}
.ap-cel .ap-tela{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
@media (max-width:760px){.ap-nb{width:100%}.ap-cel{position:relative;width:46%;max-width:240px;margin:22px auto 0;right:auto;bottom:auto}}