/* ============================================================
   VOLTREX · Sistema de diseño compartido para DEMOS
   Fuente única de identidad. Todas las demos enlazan este archivo.
   Tokens y componentes calcados de la landing (index.html).
   Uso: <link rel="stylesheet" href="voltrex-demo.css">
   + Tailwind CDN para layout/espaciado + Fontshare para fuentes.
   ============================================================ */

:root {
  /* Tema claro, neutros tintados muy levemente al verde de marca */
  --bg:        oklch(0.992 0.004 152);
  --surface:   oklch(0.972 0.007 152);
  --surface-2: oklch(0.948 0.010 152);
  --line:      oklch(0.905 0.012 152);
  --line-2:    oklch(0.86 0.014 152);
  --ink:       oklch(0.24 0.022 158);
  --ink-soft:  oklch(0.44 0.018 158);
  --ink-faint: oklch(0.56 0.015 158);
  /* Un solo verde de marca, maduro */
  --brand:        oklch(0.58 0.135 151);
  --brand-strong: oklch(0.50 0.135 151);
  --brand-ink:    oklch(0.43 0.125 151);
  --brand-wash:   oklch(0.95 0.04 151);
  --wa:        #1faa59;
  --wa-bubble: #e6f6e0;

  /* Colores funcionales (categorías distinguibles, tono profesional) */
  --c-cliente: oklch(0.58 0.135 151);  /* verde  */
  --c-factura: oklch(0.62 0.13 75);    /* ámbar  */
  --c-urgente: oklch(0.58 0.16 25);    /* rojo   */
  --c-soporte: oklch(0.58 0.12 245);   /* azul   */
  --c-spam:    oklch(0.62 0.01 250);   /* gris   */
  --c-promo:   oklch(0.55 0.15 300);   /* violeta*/

  --r:    14px;
  --r-lg: 22px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,34,26,.05);
  --shadow-md: 0 6px 16px -4px rgba(20,34,26,.10), 0 2px 6px -2px rgba(20,34,26,.06);
  --shadow-lg: 0 30px 60px -24px rgba(20,34,26,.22), 0 10px 22px -12px rgba(20,34,26,.10);

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Switzer', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.5; margin: 0;
}
/* manchas de marca muy sutiles al fondo (profundidad, igual que la landing) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 720px at 90% -5%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 56%),
    radial-gradient(840px 640px at -8% 24%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 54%),
    radial-gradient(900px 700px at 98% 70%, color-mix(in oklab, var(--brand) 6%, transparent), transparent 58%),
    radial-gradient(780px 580px at 4% 98%, color-mix(in oklab, var(--brand) 5%, transparent), transparent 55%);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Cabinet Grotesk', system-ui, sans-serif; letter-spacing: -0.025em; margin: 0; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.brand-text { color: var(--brand-ink); }
::selection { background: var(--brand-wash); }

.mark { position: relative; white-space: nowrap; z-index: 0; }
.mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.07em; height: 0.34em; background: var(--brand-wash); border-radius: 4px; z-index: -1; }

/* ===== Botones (idénticos a la landing) ===== */
.btn {
  font-family: 'Switzer'; font-weight: 600; font-size: 14.5px;
  border-radius: var(--pill); padding: 11px 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 1px solid transparent; text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary { background: linear-gradient(180deg, oklch(0.55 0.138 151), var(--brand-strong)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(20,34,26,.14), 0 12px 24px -12px color-mix(in oklab, var(--brand) 60%, transparent); }
.btn-primary:hover { transform: translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 9px rgba(20,34,26,.16), 0 18px 34px -12px color-mix(in oklab, var(--brand) 72%, transparent); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--bg); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--surface); border-color: var(--brand); color: var(--brand-ink); transform: translateY(-1.5px); }
.btn-ghost:active { transform: translateY(0); }
.btn-lg { padding: 14px 24px; font-size: 15.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ===== Eyebrow / chips / badges ===== */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.eyebrow .ln { width: 18px; height: 1px; background: var(--brand); opacity: .6; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-weight: 500; font-size: 13px; padding: 7px 14px; border-radius: var(--pill); }
.eyebrow-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 8px 13px; border-radius: var(--pill); box-shadow: var(--shadow-sm); }
.chip svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

/* etiquetas de categoría (clasificación) — colores funcionales distinguibles */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--pill); line-height: 1.2; white-space: nowrap; }
.tag .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag--cliente { color: var(--c-cliente); background: color-mix(in oklab, var(--c-cliente) 12%, white); }
.tag--factura { color: var(--c-factura); background: color-mix(in oklab, var(--c-factura) 14%, white); }
.tag--urgente { color: var(--c-urgente); background: color-mix(in oklab, var(--c-urgente) 12%, white); }
.tag--soporte { color: var(--c-soporte); background: color-mix(in oklab, var(--c-soporte) 12%, white); }
.tag--spam    { color: var(--c-spam);    background: color-mix(in oklab, var(--c-spam) 12%, white); }
.tag--promo   { color: var(--c-promo);   background: color-mix(in oklab, var(--c-promo) 12%, white); }

/* ===== Tarjetas + iconos ===== */
.u-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.u-card.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.ico { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; background: linear-gradient(155deg, color-mix(in oklab, var(--brand) 26%, white), color-mix(in oklab, var(--brand) 7%, white)); color: var(--brand-strong); border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px -2px color-mix(in oklab, var(--brand) 32%, transparent); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.ico svg { width: 22px; height: 22px; }
.u-card.hover:hover .ico { transform: scale(1.07) rotate(-3deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 7px 16px -4px color-mix(in oklab, var(--brand) 48%, transparent); }
.ico-sm { width: 36px; height: 36px; border-radius: 10px; }
.ico-sm svg { width: 17px; height: 17px; }

/* panel oscuro (para pantallas tipo "dispositivo"/dashboard oscuro, opcional) */
.panel-dark { position: relative; overflow: hidden; background: radial-gradient(720px 320px at 88% -30%, color-mix(in oklab, var(--brand) 42%, transparent), transparent 62%), linear-gradient(150deg, oklch(0.31 0.055 158), oklch(0.205 0.04 158)); border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent); border-radius: var(--r-lg); color: #e9f4ee; box-shadow: var(--shadow-lg); }

/* ===== Chat WhatsApp (idéntico a la landing) ===== */
.chat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.chat-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--wa); color: #fff; }
.chat-top .ava { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: 16px; }
.chat-top .nm { font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.chat-top .st { font-size: 11.5px; opacity: .85; }
.chat-body { padding: 18px 14px 16px; background: #f3efe7; display: flex; flex-direction: column; gap: 9px; min-height: 318px; }
.bub { max-width: 82%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(20,34,26,.08); }
.bub.in  { align-self: flex-start; background: #fff; border-top-left-radius: 4px; color: #16201a; }
.bub.out { align-self: flex-end; background: var(--wa-bubble); border-top-right-radius: 4px; color: #16201a; }
.bub .time { display: block; text-align: right; font-size: 10px; color: #6b7a70; margin-top: 3px; }
.bub.typing { display: inline-flex; gap: 4px; padding: 13px 14px; align-self: flex-start; background: #fff; }
.bub.typing span { width: 6px; height: 6px; border-radius: 50%; background: #9bb0a3; animation: vx-blink 1.2s infinite; }
.bub.typing span:nth-child(2) { animation-delay: .2s; }
.bub.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes vx-blink { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* ===== Chrome común de demo ===== */
/* barra superior */
.demo-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px clamp(16px, 4vw, 40px); background: color-mix(in oklab, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.demo-nav .back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.demo-nav .back:hover { color: var(--brand-ink); }
.demo-nav .brand { display: inline-flex; align-items: center; gap: 8px; font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: 19px; color: var(--ink); }
.demo-nav .brand svg { width: 22px; height: 22px; color: var(--brand); }
.demo-nav .nav-r { display: flex; align-items: center; gap: 12px; }

/* lienzo */
.demo-shell { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 40px; }
.demo-hero { max-width: 720px; margin-bottom: 30px; }
.demo-hero h1 { font-weight: 800; line-height: 1.04; font-size: clamp(28px, 4.4vw, 44px); }
.demo-hero p { color: var(--ink-soft); margin-top: 14px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
.demo-hero .eyebrow { margin-bottom: 14px; }

/* marco de "ventana de app" (para correos, contenido, docs, dashboard, reportes) */
.app-win { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.app-bar .dots { display: flex; gap: 6px; }
.app-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); display: block; }
.app-bar .title { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.app-bar .title svg { width: 15px; height: 15px; color: var(--brand); }

/* KPI tiles */
.kpi { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.kpi .lbl { font-size: 12px; color: var(--ink-faint); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.kpi .val { font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: clamp(24px, 2.4vw, 30px); color: var(--ink); margin-top: 6px; line-height: 1; }
.kpi .delta { font-size: 12px; font-weight: 600; margin-top: 7px; display: inline-flex; align-items: center; gap: 4px; }
.kpi .delta.up { color: var(--brand-ink); }
.kpi .delta.down { color: var(--c-urgente); }

/* tabla */
.vx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vx-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.vx-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.vx-table tbody tr:hover { background: var(--surface); }
.vx-table tbody tr:last-child td { border-bottom: 0; }

/* barras de gráfico simples (composición con divs) */
.bars { display: flex; align-items: flex-end; gap: 7px; height: 150px; }
.bars .bar { flex: 1; background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 70%, white), var(--brand)); border-radius: 6px 6px 3px 3px; min-height: 4px; transition: height .9s var(--ease); position: relative; }
.bars .bar.muted { background: var(--surface-2); }

/* coachmark / guía animada inicial */
.guide-hint { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--brand-ink); background: color-mix(in oklab, var(--brand) 10%, white); border: 1px solid color-mix(in oklab, var(--brand) 26%, transparent); padding: 9px 15px; border-radius: var(--pill); box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent); animation: vx-pulse 2.2s var(--ease) infinite; }
.guide-hint svg { width: 16px; height: 16px; }
@keyframes vx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 40%, transparent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* resaltar elemento durante la guía automática */
.guide-spot { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 12px; animation: vx-spot 1.3s var(--ease) infinite; }
@keyframes vx-spot { 0%,100% { outline-color: color-mix(in oklab, var(--brand) 40%, transparent); } 50% { outline-color: var(--brand); } }

/* botón de "volver a reproducir" la guía */
.demo-replay { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line-2); padding: 8px 14px; border-radius: var(--pill); cursor: pointer; box-shadow: var(--shadow-sm); }
.demo-replay:hover { border-color: var(--brand); color: var(--brand-ink); }
.demo-replay svg { width: 15px; height: 15px; }

/* banda CTA inferior (cierra cada demo invitando a cotizar) */
.demo-cta { margin-top: 40px; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px); text-align: center; background: radial-gradient(720px 320px at 50% -40%, color-mix(in oklab, var(--brand) 38%, transparent), transparent 62%), linear-gradient(150deg, oklch(0.31 0.055 158), oklch(0.205 0.04 158)); border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent); color: #e9f4ee; box-shadow: var(--shadow-lg); }
.demo-cta h3 { color: #fff; font-weight: 800; font-size: clamp(22px, 3vw, 30px); }
.demo-cta p { color: #aacabb; margin-top: 10px; max-width: 46ch; margin-left: auto; margin-right: auto; font-size: 15px; }
.demo-cta .actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.demo-cta .btn-ghost { background: rgba(255,255,255,.06); color: #eef8f2; border-color: rgba(255,255,255,.22); }
.demo-cta .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #6ef2ab; color: #fff; }

/* aviso "demo / datos de ejemplo" */
.demo-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-faint); background: var(--surface); border: 1px dashed var(--line-2); padding: 5px 11px; border-radius: var(--pill); }
.demo-flag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* utilidades de animación */
.vx-fade { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.vx-fade.in { opacity: 1; transform: none; }
.vx-shimmer { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 200% 100%; animation: vx-sh 1.3s linear infinite; }
@keyframes vx-sh { to { background-position: -200% 0; } }
.cursor-blink::after { content: "▋"; color: var(--brand); animation: vx-cur 1s steps(2) infinite; margin-left: 1px; }
@keyframes vx-cur { 50% { opacity: 0; } }

/* responsive base */
@media (max-width: 640px) {
  .demo-nav .brand span { display: none; }
  .demo-cta .actions { flex-direction: column; }
  .demo-cta .actions .btn { width: 100%; }
}

/* respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .vx-fade { opacity: 1; transform: none; }
}

/* ============================================================
   CAPA PREMIUM (efecto "wow"): ambiente, IA en vivo, graficos,
   escaneo OCR, streaming, feed en tiempo real, microinteracciones.
   Con gusto: nada de texto-degradado, glass por defecto ni neon.
   ============================================================ */

/* fondo ambiental con aurora de marca, muy sutil */
.premium-bg { position: relative; isolation: isolate; }
.premium-bg::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 420px at 14% 6%, color-mix(in oklab, var(--brand) 13%, transparent), transparent 60%),
    radial-gradient(560px 420px at 94% 2%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 62%); }

/* panel "cerebro de IA": razonamiento en vivo junto a la demo */
.ai-panel { background: var(--bg); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding:18px 20px; }
.ai-panel .ai-h { display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-ink); }
.ai-step { display:flex; align-items:center; gap:11px; padding:9px 0; color:var(--ink-soft); font-size:13.5px; opacity:.42; transition: opacity .4s var(--ease), color .4s var(--ease); }
.ai-step .si { width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--line-2); color:var(--ink-faint); background:var(--bg); transition: all .4s var(--ease); }
.ai-step .si svg { width:13px; height:13px; }
.ai-step.active { opacity:1; color:var(--ink); }
.ai-step.active .si { border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 14%, transparent); animation: vx-spin 1s linear infinite; }
.ai-step.done { opacity:1; color:var(--ink); }
.ai-step.done .si { border-color:var(--brand); background:var(--brand); color:#fff; animation:none; }
@keyframes vx-spin { to { transform: rotate(360deg); } }

/* "en vivo" pulsante */
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--brand); position:relative; display:inline-block; flex:none; }
.live-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--brand); animation: vx-ping 1.7s var(--ease) infinite; }
@keyframes vx-ping { 0%{ transform:scale(1); opacity:.55;} 80%,100%{ transform:scale(2.6); opacity:0;} }

/* chip de confianza de la IA */
.conf { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--brand-ink); background: color-mix(in oklab, var(--brand) 10%, white); border:1px solid color-mix(in oklab, var(--brand) 24%, transparent); padding:2px 8px; border-radius:var(--pill); }

/* escaneo tipo OCR + cajas detectadas */
.scan-host { position:relative; }
.scan-line { position:absolute; left:0; right:0; top:-70px; height:70px; pointer-events:none; z-index:6;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--brand) 20%, transparent) 55%, color-mix(in oklab, var(--brand) 38%, transparent));
  border-bottom:2px solid var(--brand); box-shadow:0 0 26px color-mix(in oklab, var(--brand) 38%, transparent); opacity:0; }
.scan-host.scanning .scan-line { animation: vx-scan 1.7s var(--ease) forwards; }
@keyframes vx-scan { 0%{ top:-70px; opacity:1;} 100%{ top:100%; opacity:1;} }
.bbox { position:absolute; border:2px solid var(--brand); border-radius:6px; background: color-mix(in oklab, var(--brand) 8%, transparent); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 10%, transparent); opacity:0; transform:scale(.97); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; }
.bbox.on { opacity:1; transform:scale(1); }

/* cursor de streaming de texto (IA escribiendo token a token) */
.stream-cursor::after { content:""; display:inline-block; width:8px; height:1.05em; vertical-align:-2px; margin-left:2px; background:var(--brand); animation: vx-cur2 .9s steps(2) infinite; }
@keyframes vx-cur2 { 50%{ opacity:0; } }

/* feed en vivo */
.feed-item { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px; border:1px solid var(--line); background:var(--bg); box-shadow:var(--shadow-sm); }
.feed-enter { animation: vx-feed .5s var(--ease); }
@keyframes vx-feed { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform:none; } }

/* sparkline + trazo de grafico que se dibuja */
.spark { display:block; width:100%; height:34px; }
.spark .line { fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.spark .area { fill: color-mix(in oklab, var(--brand) 12%, transparent); stroke:none; }
.draw-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw-line.drawn { animation: vx-draw 1.4s var(--ease) forwards; }
@keyframes vx-draw { to { stroke-dashoffset: 0; } }

/* microinteraccion: elevar con luz de marca */
.lift { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), 0 10px 30px -16px color-mix(in oklab, var(--brand) 50%, transparent); }

/* barra de "procesando" */
.vx-prog { height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.vx-prog > i { display:block; height:100%; width:0; border-radius:999px; background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 60%, white), var(--brand)); transition: width .5s var(--ease); }

/* numero que tickea */
.tick { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .scan-host.scanning .scan-line, .ai-step.active .si { animation: none !important; }
  .scan-line { display:none; }
}