/* «Así se ve al compartir»: chats simulados, comunes a todas las direcciones. */
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #eceef2; color: #1b1d22; }
img { max-width: 100%; display: block; }
.share-head { max-width: 1100px; margin: 0 auto; padding: 20px 16px 8px; }
.share-head h1 { margin: 0 0 6px; font-size: 1.5rem; }
.share-head p { margin: 0 0 8px; color: #4b5060; }
.share-grid { max-width: 1100px; margin: 0 auto; padding: 8px 16px 40px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.chat-app { font-size: .95rem; margin: 0 0 8px; color: #4b5060; font-weight: 600; }
.phone { border-radius: 24px; overflow: hidden; border: 1px solid #d4d7de; background: #fff; box-shadow: 0 6px 24px rgb(0 0 0 / .08); }
.chat-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #9aa1ad; color: #fff; font-size: .85rem; object-fit: cover; }
.chat-body { padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; }
.day { align-self: center; font-size: .75rem; background: rgb(255 255 255 / .8); padding: 2px 10px; border-radius: 8px; margin: 0 0 4px; }
.bubble { max-width: 86%; border-radius: 12px; padding: 6px 8px; position: relative; }
.bubble p { margin: 2px 4px; overflow-wrap: anywhere; }
.bubble .meta { display: block; text-align: right; font-size: .68rem; color: #667; margin: 0 4px; }
.out { align-self: flex-end; }
.in { align-self: flex-start; }

/* WhatsApp */
.chat-wa .chat-bar { background: #075e54; color: #fff; }
.chat-wa .chat-body { background: #efeae2; }
.chat-wa .out { background: #d9fdd3; }
.chat-wa .in { background: #fff; }
.wa-card { background: rgb(0 0 0 / .05); border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
.wa-card img { aspect-ratio: 1200 / 630; width: 100%; height: auto; object-fit: cover; }
.wa-card-text { padding: 6px 8px; display: grid; gap: 2px; }
.wa-card-text span { font-size: .8rem; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-card-text small { color: #777; }
.chat-wa a { color: #027eb5; }

/* Instagram */
.chat-ig .phone { background: #000; color: #f5f5f5; border-color: #222; }
.chat-ig .chat-bar { border-bottom: 1px solid #262626; }
.chat-ig .out { background: #3797f0; color: #fff; border-radius: 20px; padding: 8px 12px; }
.chat-ig .in { background: #262626; border-radius: 20px; padding: 8px 12px; }
.chat-ig .ig-card { background: #262626; padding: 0; overflow: hidden; border-radius: 18px; width: 86%; }
.ig-card img { aspect-ratio: 1200 / 630; width: 100%; height: auto; object-fit: cover; }
.ig-card-text { padding: 8px 12px; display: grid; gap: 2px; }
.ig-card-text small { color: #a8a8a8; }

/* iMessage */
.chat-im .chat-bar { justify-content: center; flex-direction: column; gap: 4px; font-size: .8rem; background: #f6f6f8; }
.chat-im .out { background: #0a84ff; color: #fff; border-radius: 18px; padding: 7px 12px; }
.chat-im .in { background: #e9e9eb; border-radius: 18px; padding: 7px 12px; }
.im-card { align-self: flex-start; width: 86%; border-radius: 18px; overflow: hidden; background: #e9e9eb; }
.im-card img { aspect-ratio: 1200 / 630; width: 100%; height: auto; object-fit: cover; }
.im-card-text { padding: 8px 12px; display: grid; gap: 2px; }
.im-card-text small { color: #6b6b70; }