/* Versão 2 realista: iPhone com as páginas que a gente montou, e o WhatsApp de verdade abrindo. */
.iph{position:relative;width:316px;height:644px;flex:none;border-radius:58px;padding:4px;
  background:linear-gradient(150deg,#5a5d63 0%,#26272b 22%,#3a3c41 50%,#1b1c1f 78%,#4b4d52 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1px #000, 0 60px 100px -40px rgba(0,0,0,.85), 0 20px 40px -20px rgba(0,0,0,.6)}
.iph::before,.iph::after{content:"";position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#1c1d20,#4a4c51)}
.iph::before{left:-3px;top:150px;height:56px;box-shadow:0 70px 0 #2a2b2f}
.iph::after{right:-3px;top:180px;height:88px}
.iph__bezel{width:100%;height:100%;border-radius:54px;background:#000;padding:8px}
.iph__screen{position:relative;width:292px;height:620px;border-radius:46px;overflow:hidden;background:#000;isolation:isolate;
  font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.iph__island{position:absolute;z-index:20;left:50%;top:10px;width:94px;height:28px;margin-left:-47px;border-radius:20px;background:#000}
.iph__glare{position:absolute;z-index:21;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%)}

/* barra de status e indicador de início */
.sb{position:absolute;z-index:19;left:0;right:0;top:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 34px;color:#111;font-weight:600;font-size:14px;letter-spacing:-.01em}
.sb__ic{display:flex;gap:5px;align-items:center}
.sb__ic svg{display:block}
.home{position:absolute;z-index:19;left:50%;bottom:7px;width:112px;height:5px;margin-left:-56px;border-radius:3px;background:#111}

/* página do negócio: a captura rola por baixo do cabeçalho fixo */
.scene{position:absolute;inset:0;opacity:0}
.pg{position:absolute;left:0;right:0;top:46px;bottom:0;overflow:hidden}
.pg__shot{position:absolute;left:0;top:0;width:292px}
.pg__shot img{display:block;width:292px;height:auto}
.pg__press{position:absolute;border-radius:999px;background:#000;opacity:0}
.pg__hdr{position:absolute;left:0;top:0;width:292px;background-repeat:no-repeat;background-size:292px auto;background-position:0 0}
.pg__top{position:absolute;left:0;right:0;top:0;height:46px}

/* toque na tela, como o "mostrar toques" do iPhone */
.touch{position:absolute;z-index:18;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:rgba(140,140,140,.42);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75), 0 2px 8px rgba(0,0,0,.18);opacity:0}

/* WhatsApp (iOS) */
.wa{position:absolute;inset:0;display:flex;flex-direction:column;background:#EFE7DE;color:#111B21;opacity:0;overflow:hidden}
.wa__head{display:flex;align-items:center;gap:8px;padding:46px 12px 8px 6px;background:#F6F6F6;box-shadow:0 .5px 0 rgba(0,0,0,.18)}
.wa__back{display:flex;align-items:center;color:#007AFF;font-size:15px}
.wa__av{width:34px;height:34px;border-radius:50%;object-fit:contain;padding:3px;flex:none;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.wa__who{flex:1;min-width:0;line-height:1.15}
.wa__who b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa__st{position:relative;display:block;height:14px;font-size:11.5px;color:#667781}
.wa__st span{position:absolute;left:0;top:0;white-space:nowrap}
.wa__typ{opacity:0;color:#1DAB61}
.wa__acts{display:flex;gap:16px;color:#007AFF;padding-right:2px}
.wa__body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 10px 8px;
  background-color:#EFE7DE;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M60 14l6 10h-12zM96 30c0-6 10-6 10 0s-10 10-10 10-10-4-10-10 10-6 10 0'/%3E%3Crect x='14' y='70' width='16' height='12' rx='3'/%3E%3Cpath d='M58 66c8 0 8 12 0 12M52 72h12M92 80l8-8 8 8M100 72v14M30 104h14M37 97v14M74 104a6 6 0 1 0 12 0'/%3E%3C/svg%3E");background-size:120px}
.wa__day{align-self:center;padding:3px 10px;border-radius:8px;background:#fff;color:#54656F;font-size:11px;box-shadow:0 1px .5px rgba(0,0,0,.1)}
.wa__e2e{align-self:center;max-width:88%;margin-bottom:4px;padding:6px 10px;border-radius:8px;background:#FFF3C4;color:#54656F;font-size:10.5px;line-height:14px;text-align:center}
.msg{position:relative;max-width:82%;padding:6px 8px 5px;border-radius:9px;font-size:13.5px;line-height:18px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.msg--out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}
.msg--in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.msg__meta{float:right;margin:6px 0 -4px 8px;font-size:10px;line-height:12px;color:#667781;white-space:nowrap}
.msg__tick{display:inline-block;margin-left:2px;color:#8696A0;letter-spacing:-3px;font-size:11px}
.slot{position:relative;align-self:flex-start;max-width:82%}
.slot .msg{max-width:none}
.slot .msg--typing{position:absolute;left:0;bottom:0;display:flex;gap:4px;padding:11px 12px}
.msg--typing i{width:6px;height:6px;border-radius:50%;background:#8696A0}
.wa__bar{display:flex;align-items:center;gap:8px;padding:6px 8px 26px;background:#F6F6F6;box-shadow:0 -.5px 0 rgba(0,0,0,.15)}
.wa__plus{color:#007AFF;flex:none}
.wa__in{position:relative;flex:1;min-width:0;min-height:32px;padding:7px 12px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15);font-size:13.5px;line-height:18px}
.wa__in .ch{opacity:0}
.wa__btn{position:relative;flex:none;width:32px;height:32px}
.wa__btn > *{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%}
.wa__send{background:#1DAB61;color:#fff}
.wa__mic{color:#007AFF;opacity:0}
.row--iph{position:relative;width:100%;height:680px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent)}
.row--iph .row__track{position:absolute;left:0;top:18px;display:flex;gap:32px}