/* ==========================================================================
   Hyper — Mockup animado de conversa no WhatsApp ("na prática").
   Conversa → link de pagamento → pago. Mensagens surgem em sequência (loop).
   Tema dark da LP (hyper-tokens.css). Inspirado na LP antiga /agencias.
   ========================================================================== */
.hx-section {
  background: var(--hy-bg);
  padding: 92px 24px 96px;
  font-family: "Oakes Grotesk", sans-serif;
  border-top: 1px solid var(--hy-border);
}
.hx-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}

.hx-eyebrow {
  display: inline-block; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 600; color: var(--hy-green); margin-bottom: 18px;
}
.hx-title {
  font-size: 38px; line-height: 1.14; font-weight: 600;
  color: var(--hy-text); letter-spacing: -0.5px; margin: 0 0 18px;
}
.hx-title em { font-style: normal; color: var(--hy-green); }
.hx-sub { font-size: 18px; line-height: 1.6; color: var(--hy-text-muted); margin: 0; }
.hx-points { list-style: none; margin: 26px 0 0; padding: 0; }
.hx-points li {
  font-size: 16px; color: var(--hy-text); line-height: 1.5;
  padding-left: 30px; margin-bottom: 14px; position: relative;
}
.hx-points li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--hy-green-soft);
  box-shadow: inset 0 0 0 1.5px var(--hy-green);
}

/* ---------- Telefone / chat ---------- */
.hx-phone { display: flex; justify-content: center; }
.hx-chat {
  position: relative;
  width: 100%; max-width: 380px;
  background: var(--hy-surface);
  border: 1px solid var(--hy-border);
  border-radius: 26px;
  padding: 20px 18px 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,.09);
}
.hx-chat__head {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--hy-border);
}
.hx-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--hy-green); color: var(--hy-green-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
}
.hx-name { font-size: 16px; font-weight: 600; color: var(--hy-text); }
/* balão "96% aprovação" — flutua pra fora do canto superior direito */
.hx-pill {
  position: absolute; top: -18px; right: -10px; z-index: 6;
  text-align: right; line-height: 1.2;
  background: var(--hy-surface-2); border: 1px solid var(--hy-border);
  border-radius: 14px; padding: 10px 15px;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}
.hx-pill b { display: block; font-size: 15px; color: var(--hy-green); font-weight: 700; }
.hx-pill small { font-size: 11.5px; color: var(--hy-text-muted); }

.hx-msgs { display: flex; flex-direction: column; gap: 12px; min-height: 360px; }

/* bolhas */
.hx-msg, .hx-pay, .hx-tag {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.hx-msgs.is-on .hx-msg.show,
.hx-msgs.is-on .hx-pay.show,
.hx-msgs.is-on .hx-tag.show { opacity: 1; transform: translateY(0); }

.hx-msg {
  max-width: 82%; padding: 11px 15px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.4; color: var(--hy-text);
}
.hx-msg--in { align-self: flex-start; background: var(--hy-surface-2); border-bottom-left-radius: 5px; }
.hx-msg--out { align-self: flex-end; background: rgba(10,122,48,.16); border-bottom-right-radius: 5px; color: var(--hy-text); }

/* card de pagamento (verde) */
.hx-pay {
  align-self: flex-end; max-width: 86%;
  background: var(--hy-green); color: var(--hy-green-ink);
  border-radius: 16px; border-bottom-right-radius: 5px; padding: 14px 16px;
}
.hx-pay__title { font-size: 15px; font-weight: 700; }
.hx-pay__val { font-size: 14px; font-weight: 600; margin: 2px 0 12px; }
.hx-pay__val span { font-weight: 500; opacity: .8; }
.hx-pay__btn {
  background: rgba(6,13,0,.16); border-radius: 9px; padding: 9px 12px;
  font-size: 13px; font-weight: 600; text-align: center;
}

/* etiqueta "1 dia útil" — flutua pra fora da borda esquerda */
.hx-tag {
  align-self: flex-start; line-height: 1.2;
  margin-left: -28px; position: relative; z-index: 6;
  background: var(--hy-surface-2); border: 1px solid var(--hy-border);
  border-radius: 14px; padding: 10px 15px;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}
.hx-tag b { display: block; font-size: 15px; color: var(--hy-text); font-weight: 700; }
.hx-tag small { font-size: 11.5px; color: var(--hy-text-muted); }

@media (max-width: 860px) {
  .hx-section { padding: 64px 22px 68px; }
  .hx-inner { grid-template-columns: 1fr; gap: 40px; }
  .hx-title { font-size: 28px; }
  .hx-copy { text-align: center; }
  .hx-points { display: inline-block; text-align: left; }
}