/* ============================================================
   LIQUID CHAT · COLORES OFICIALES nuvaia.com
   bg #100330/#14063a · surface #1b0a4a · lima #c6ff3d
   violeta #7631fd/#9d7cff · texto #faf9f5 · WhatsApp #25d366
   Fuentes: Space Grotesk + DM Sans + Space Mono
   ============================================================ */
:root{
  --bg:#100330; --bg-2:#14063a; --surface:#1b0a4a;
  --text:#faf9f5; --muted:#a99fd0; --head:#ffffff;
  --glass-bg:rgba(255,255,255,.055); --glass-brd:#ffffff17; --glass-hi:rgba(255,255,255,.4);
  --shadow:0 34px 80px -32px rgba(0,0,0,.85);
  --accent:#7631fd; --accent-2:#9d7cff; --accent-ink:#fff;
  --grad:linear-gradient(135deg,#7631fd,#9d7cff);
  --chip-bg:rgba(118,49,253,.18); --chip-tx:#c9bcff; --line:#ffffff14;
  --lime:#c6ff3d; --lime-ink:#14063a; --wa:#25d366;
}
body{background:var(--bg)}

/* Fallback de fondo (si no se carga un bg-*.css): glows de marca estáticos */
body::before{content:"";position:fixed;inset:0;z-index:-3;background:
  radial-gradient(38% 30% at 82% 2%,#7631fd66,#0000 70%),
  radial-gradient(34% 26% at 12% 0,#c6ff3d1f,#0000 70%),
  radial-gradient(46% 40% at 96% 70%,#7631fd38,#0000 70%),
  radial-gradient(50% 42% at 0 95%,#9d7cff29,#0000 70%)}

/* Eyebrow en Space Mono (como la marca) */
.eyebrow{font-family:"Space Mono",ui-monospace,monospace;letter-spacing:.1em;font-weight:700;
  border:1px solid color-mix(in srgb,var(--lime) 26%,transparent)}

/* Botones primarios en lima de marca */
.btn-primary{background:var(--lime);color:var(--lime-ink);box-shadow:0 16px 34px -12px rgba(198,255,61,.5)}
.btn-primary:hover{background:#d2ff5c;box-shadow:0 22px 44px -12px rgba(198,255,61,.62)}
.btn-primary .ico{background:rgba(0,0,0,.16)}

/* Detalles lima */
.step .n{background:var(--lime);color:var(--lime-ink)}
.plan .badge{background:var(--lime);color:var(--lime-ink)}
.plan.feat{border-color:color-mix(in srgb,var(--lime) 55%,var(--glass-brd));box-shadow:inset 0 1px 0 var(--glass-hi),0 30px 70px -30px rgba(198,255,61,.4)}
.auto .num,.auto.more{color:var(--lime)}
.hero-stats .s b{color:#fff}

/* ===== Mockup de teléfono + chat (estructura) ===== */
.phone{position:relative;width:330px;margin:0 auto;border-radius:40px;padding:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid var(--glass-brd);box-shadow:inset 0 1px 0 var(--glass-hi),0 50px 100px -30px rgba(118,49,253,.6)}
.phone-in{background:rgba(16,3,48,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-radius:28px;overflow:hidden;height:520px;display:flex;flex-direction:column}
.phone .glow{position:absolute;inset:-30% -20%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(118,49,253,.55),transparent 60%);filter:blur(30px)}
.chat-top{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.chat-top .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:"Space Grotesk";font-weight:700;color:#fff;font-size:.9rem;flex:0 0 38px}
.chat-top .av img{width:100%;height:100%;object-fit:cover}
.chat-top .who{flex:1;min-width:0}
.chat-top .who b{display:block;font-size:.92rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-top .who span{display:flex;align-items:center;gap:5px;font-size:.72rem;color:#8fe6ad}
.chat-top .who span i{width:6px;height:6px;border-radius:50%;background:#25d366;flex:0 0 6px}
.chat-top .actions{margin-left:auto;display:flex;gap:15px;color:#b9a7ef;flex:0 0 auto}
.chat-top .actions svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.chat-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.bub{max-width:78%;padding:10px 13px;border-radius:16px;font-size:.88rem;line-height:1.4;opacity:0;transform:translateY(8px);animation:bubIn .4s forwards}
.bub.in{align-self:flex-start;background:rgba(255,255,255,.08);color:#efeaff;border-bottom-left-radius:5px}
.bub.out{align-self:flex-end;background:var(--lime);color:#14063a;border-bottom-right-radius:5px;font-weight:500}
.bub .tx{display:block}
.bub .meta{display:block;text-align:right;font-size:.6rem;margin-top:4px;line-height:1}
.bub.in .meta{color:#b9a7ef}
.bub.out .meta{color:rgba(20,6,58,.6)}
.bub .tick{margin-left:4px;color:#1f8bff;letter-spacing:-2px;font-weight:700}
.bub.typing{display:inline-flex;gap:4px;align-items:center}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:#cbb9ff;animation:blink 1.2s infinite}
.bub.typing i:nth-child(2){animation-delay:.2s}.bub.typing i:nth-child(3){animation-delay:.4s}
@keyframes bubIn{to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.chat-foot .fake{flex:1;min-height:36px;border-radius:999px;background:rgba(255,255,255,.06);display:flex;align-items:center;padding:0 14px;color:#8a7fb5;font-size:.82rem}
.chat-foot .send{width:36px;height:36px;border-radius:50%;background:var(--lime);flex:0 0 36px;display:flex;align-items:center;justify-content:center}
.chat-foot .send svg{width:17px;height:17px;fill:#14063a}
@media(max-width:900px){.phone{margin-top:24px}}