/* 19/10 · a /whatsapp D2 (server/siteD/whatsappD.ts): a capa com o exemplo de conversa ao lado, o QR num cartão,
   os três papéis em cartões, as perguntas e o fecho. Sem letras azuis: os números das bolhas vão a branco forte. */
.wa2-h1 { max-width: 16ch; }
.wa2-conversas { display: grid; gap: 14px; }

/* o exemplo de conversa: diz que é exemplo, sem moldura de telemóvel */
.wa2-ex { display: grid; gap: 8px; padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.wa2-ex-lbl { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.wa2-b { margin: 0; max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; color: var(--espuma); }
.wa2-me { justify-self: end; border-bottom-right-radius: 6px; background: rgba(34,211,238,.12); box-shadow: inset 0 0 0 1px rgba(34,211,238,.26); }
.wa2-sb { justify-self: start; border-bottom-left-radius: 6px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.wa2-n { font-weight: 700; color: #F8FAFC; font-variant-numeric: tabular-nums; }

/* «Fala com o assistente»: texto e passos à esquerda, o QR num cartão à direita */
.wa2-fala-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.wa2-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wa2-qr { display: grid; justify-items: center; gap: 14px; margin: 0; padding: 28px 24px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.wa2-qr-img { padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.wa2-qr-img img { display: block; width: 190px; height: 190px; }
.wa2-qr figcaption { font-size: 14px; color: var(--claro); }
.wa2-qr .pg-ctas { margin: 4px 0 0; justify-content: center; }

/* os três papéis */
.wa2-papel .pg-lista { margin: 6px 0 4px; }
.wa2-papel .wa2-ex { margin-top: auto; padding: 14px; background: rgba(6,14,26,.4); }
.wa2-papel .wa2-b { font-size: 14px; }

.wa2-nota { max-width: 72ch; margin: 22px 0 0; font-size: 14px; line-height: 1.6; color: var(--fraco); }
.wa2-fim { padding-bottom: clamp(48px, 6vw, 80px); }
.wa2-fim .pg-ctas { justify-content: center; margin: 0; }

@media (max-width: 980px) {
  .wa2-fala-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wa2-passos { grid-template-columns: 1fr; }
  .wa2-b { max-width: 94%; }
}