/* ============================================================
   NURT — Sistema de diseño
   Inspiración: dapta.ai + respond.io + flyers nuevos NURT
   Paleta semántica:
     · Naranja → calor, acción, hot lead, branding
     · Azul    → inteligencia, análisis, problema/insight
     · Verde   → éxito, lead listo, métricas positivas
   ============================================================ */

/* ---------- Reset + tokens ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  /* Color tokens */
  --bg: #050505;
  --bg-elevated: #0c0c0c;
  --surface: #111111;
  --surface-2: #161616;
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);

  --orange: #FF5722;
  --orange-bright: #FF6B3D;
  --orange-deep: #E64A19;
  --orange-glow: rgba(255, 87, 34, 0.45);
  --orange-soft: rgba(255, 87, 34, 0.12);
  --orange-faint: rgba(255, 87, 34, 0.05);
  --orange-line: rgba(255, 87, 34, 0.35);
  --orange-line-soft: rgba(255, 87, 34, 0.18);

  /* Azul de marca — inteligencia, problema, análisis */
  --blue: #3B82F6;
  --blue-bright: #60A5FA;
  --blue-deep: #2563EB;
  --blue-glow: rgba(59, 130, 246, 0.45);
  --blue-soft: rgba(59, 130, 246, 0.12);
  --blue-faint: rgba(59, 130, 246, 0.05);
  --blue-line: rgba(59, 130, 246, 0.38);
  --blue-line-soft: rgba(59, 130, 246, 0.20);

  /* Verde — éxito, lead caliente / listo, positivo */
  --green: #22C55E;
  --green-bright: #4ADE80;
  --green-deep: #16A34A;
  --green-glow: rgba(34, 197, 94, 0.40);
  --green-soft: rgba(34, 197, 94, 0.13);
  --green-faint: rgba(34, 197, 94, 0.06);
  --green-line: rgba(34, 197, 94, 0.38);
  --green-line-soft: rgba(34, 197, 94, 0.20);

  --text: #FAFAFA;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.50);
  --text-4: rgba(255, 255, 255, 0.32);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radii */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-5: 28px;

  /* Container */
  --container: 1180px;
  --container-narrow: 880px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}

/* Background grid + radial glow signature */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 87, 34, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 15% 60%, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 100%, rgba(255, 87, 34, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}
h1 { font-size: clamp(40px, 6.5vw, 76px); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; }
h4 { font-size: 17px; font-weight: 600; }

.lead {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 56ch;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.text-orange { color: var(--orange); }
.text-blue   { color: var(--blue); }
.text-green  { color: var(--green); }
.text-muted  { color: var(--text-3); }

/* Highlight de palabras (estilo flyer) */
.hl       { position: relative; color: var(--orange); }
.hl-blue  { position: relative; color: var(--blue); }
.hl-green { position: relative; color: var(--green); }

/* Eyebrow dot variantes */
.eyebrow.is-blue  .dot { background: var(--blue);  box-shadow: 0 0 10px var(--blue-glow); }
.eyebrow.is-green .dot { background: var(--green); box-shadow: 0 0 10px var(--green-glow); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow { max-width: var(--container-narrow); }

.section {
  padding: clamp(72px, 9vw, 128px) 0;
  position: relative;
}
.section.tight { padding: clamp(48px, 6vw, 80px) 0; }

.divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-line) 20%, var(--orange-line) 80%, transparent);
  opacity: 0.5;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 100px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
  white-space: nowrap;
  font-feature-settings: "ss01";
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--orange);
  color: #0a0a0a;
  box-shadow: 0 8px 32px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  background: var(--orange-bright);
  box-shadow: 0 12px 40px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-ghost {
  background: rgba(255,255,255,0.02);
  color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--orange-line);
  background: var(--orange-faint);
}

.btn-text {
  color: var(--text-2);
  padding: 8px 0;
}
.btn-text:hover { color: var(--orange); }

.btn-arrow::after {
  content: "→";
  transition: transform .2s ease;
  display: inline-block;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- Pill/Tag ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  border-radius: 100px;
}
.pill.is-blue  { color: var(--blue);  background: var(--blue-soft);  border-color: var(--blue-line); }
.pill.is-green { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }

/* Tag prominente para rótulos de sección — estilo flyer (presencia visual fuerte) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 100px;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  box-shadow: 0 0 32px var(--orange-soft), inset 0 1px 0 rgba(255,255,255,0.04);
}
.tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
}
.tag.is-blue  { color: var(--blue);  background: var(--blue-soft);  border-color: var(--blue-line);  box-shadow: 0 0 32px var(--blue-soft), inset 0 1px 0 rgba(255,255,255,0.04); }
.tag.is-blue  .dot { background: var(--blue);  box-shadow: 0 0 10px var(--blue-glow); }
.tag.is-green { color: var(--green); background: var(--green-soft); border-color: var(--green-line); box-shadow: 0 0 32px var(--green-soft), inset 0 1px 0 rgba(255,255,255,0.04); }
.tag.is-green .dot { background: var(--green); box-shadow: 0 0 10px var(--green-glow); }

/* Tag por encima del flow-line (z-index 5). Una capa sólida ::before
   tapa la línea justo en el área de la pill */
/* Tag por encima del flow-line — un ::before con radial-gradient genera
   un "agujero" suave en la línea justo en el área del pill, sin ensuciar
   el glow naranja original (que sigue extendiéndose por afuera). */
.tag {
  position: relative;
  z-index: 6;
  isolation: isolate;
}
.tag::before {
  content: "";
  position: absolute;
  inset: -14px -22px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse 60% 75% at 50% 50%,
    var(--bg) 0%,
    var(--bg) 35%,
    transparent 90%);
  pointer-events: none;
}
.missing-step .tag::before {
  background: radial-gradient(ellipse 60% 75% at 50% 50%,
    var(--surface) 0%,
    var(--surface) 35%,
    transparent 90%);
}

/* Tag con líneas horizontales flanqueando (estilo "─── EL PROBLEMA ───") */
.tag-line {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 6;
}
.tag-line-side {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--orange-line) 60%, var(--orange));
  border-radius: 1px;
  position: relative;
}
.tag-line-side::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
  transform: translateY(-50%);
}
/* lado izquierdo: punto al inicio (a la izquierda); línea va de izq a der hacia el tag */
.tag-line-side:first-child {
  background: linear-gradient(to right, transparent, var(--orange-line-soft) 20%, var(--orange-line) 80%, var(--orange));
}
.tag-line-side:first-child::after { left: 0; }
/* lado derecho: punto al final (a la derecha) */
.tag-line-side:last-child {
  background: linear-gradient(to left, transparent, var(--orange-line-soft) 20%, var(--orange-line) 80%, var(--orange));
}
.tag-line-side:last-child::after { right: 0; }

/* Variante "strong" del tag — más presencia visual con halo extra */
.tag-strong {
  box-shadow:
    0 0 40px var(--orange-glow),
    0 0 0 1px var(--orange-line) inset,
    inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (max-width: 540px) {
  .tag-line { gap: 10px; }
  .tag-line-side { display: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 5, 5, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.nav-brand .mark {
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 8px var(--orange-glow));
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-2);
  font-weight: 500;
  transition: color .15s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
@media (max-width: 880px) {
  .nav-links { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(64px, 10vw, 132px) 0 clamp(48px, 6vw, 80px);
  overflow-x: clip;
  overflow-y: visible;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-eyebrow { margin-bottom: var(--s-5); }
.hero h1 {
  margin-bottom: var(--s-5);
}
.hero h1 .word-orange {
  color: var(--orange);
  display: inline-block;
}
.hero .lead { margin-bottom: var(--s-6); max-width: 52ch; }
.hero-ctas {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(48px, 7vw, 88px); /* aire para que no choque con el lifecycle-inset */
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.hero-trust .hero-trust-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange-glow);
  flex-shrink: 0;
}
.hero-trust .sep {
  color: var(--text-4);
  font-weight: 400;
}
@media (max-width: 720px) {
  .hero-trust { font-size: 10px; gap: 10px; letter-spacing: 0.08em; }
  .hero-trust .sep { display: none; } /* en mobile dejamos que haga wrap natural */
}

/* ============================================================
   Hero chat — UI estilo WhatsApp con paleta NURT
   ============================================================ */
.chat-mock {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--orange-line-soft);
  border-radius: var(--r-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  /* sin overflow:hidden — el lifecycle-inset queda colgando afuera */
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    0 0 60px var(--orange-soft),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Líneas naranjas verticales signature */
.chat-mock::before, .chat-mock::after {
  content: "";
  position: absolute;
  top: 24px; bottom: 24px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--orange-line) 20%, var(--orange-line) 80%, transparent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}
.chat-mock::before { left: -1px; }
.chat-mock::after  { right: -1px; }

/* Header tipo WhatsApp */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
  border-top-left-radius: var(--r-5);
  border-top-right-radius: var(--r-5);
}
.chat-header-left { display: flex; align-items: center; gap: 12px; }
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
}
.chat-header-actions svg { display: block; }
.chat-header-actions a:hover { color: var(--text); }

.chat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #0a0a0a;
  flex-shrink: 0;
}
.chat-status { font-size: 14px; font-weight: 600; line-height: 1.2; }
.chat-status .small {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin-top: 2px;
}
.chat-status .small.online {
  color: var(--green);
  font-weight: 500;
}
.chat-meta-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
}

/* Body con fondo levemente diferenciado (estilo WhatsApp dark) */
.chat-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  min-height: 320px;
  flex: 1;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 87, 34, 0.025) 0%, transparent 60%),
    var(--bg);
  position: relative;
}
/* Variante "live" — altura fija para que la conversación viva
   y los mensajes viejos se vayan desplazando hacia arriba.
   Fade-out de los mensajes que salen del cuadro visible. */
.chat-body.is-live {
  height: 380px;
  min-height: 380px;
  max-height: 380px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
}

/* Burbujas */
.bubble {
  max-width: 80%;
  padding: 7px 11px 8px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.42;
  word-wrap: break-word;
  position: relative;
}
.bubble .text { display: inline; }
.bubble .meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 400;
  margin-left: 8px;
  white-space: nowrap;
  letter-spacing: 0;
  font-family: var(--font-sans);
  position: relative;
  top: 1px;
}
.bubble .meta .ticks {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -2px;
  font-weight: 700;
}

/* Burbuja del bot (Nurt) — tono oscuro estilo "received" */
.bubble.bot {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-top-left-radius: 3px;
}
.bubble.bot .meta { color: var(--text-3); }
.bubble.bot strong { color: var(--orange); font-weight: 600; }

/* Burbuja del usuario — naranja de marca, no verde WhatsApp */
.bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: #1a0a05;
  border-top-right-radius: 3px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(255, 87, 34, 0.25);
}
.bubble.user .meta { color: rgba(26, 10, 5, 0.65); }
.bubble.user .meta .ticks { color: #1d3f8a; } /* Azul oscuro como ✓✓ leído */

/* ---------- Tool action cards (herramientas que usa el agente) ---------- */
.tool-action {
  align-self: flex-start;
  max-width: 88%;
  margin-top: 4px;
  padding: 10px 12px 11px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(255, 87, 34, 0.04));
  border: 1px solid var(--blue-line-soft);
  border-radius: 12px;
  border-top-left-radius: 3px;
  font-family: var(--font-sans);
  position: relative;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.08);
  animation: toolFadeIn .5s ease both;
}
@keyframes toolFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.tool-action.tool-finance,
.tool-action.tool-schedule {
  border-color: var(--orange-line-soft);
  background: linear-gradient(135deg, rgba(255, 87, 34, 0.08), rgba(59, 130, 246, 0.03));
  box-shadow: 0 0 24px var(--orange-soft);
}
.tool-action.tool-schedule {
  border-color: var(--green-line-soft);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(255, 87, 34, 0.04));
  box-shadow: 0 0 24px var(--green-soft);
}
.tool-action-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--blue-line-soft);
}
.tool-finance .tool-action-head,
.tool-finance .tool-action-head .tool-icon { color: var(--orange); }
.tool-finance .tool-action-head { border-bottom-color: var(--orange-line-soft); }
.tool-schedule .tool-action-head,
.tool-schedule .tool-action-head .tool-icon { color: var(--green); }
.tool-schedule .tool-action-head { border-bottom-color: var(--green-line-soft); }

.tool-action-head .tool-icon {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--blue);
}
.tool-finance .tool-action-head .tool-icon { background: var(--orange-soft); color: var(--orange); }
.tool-schedule .tool-action-head .tool-icon { background: var(--green-soft); color: var(--green); }

.tool-action-head .tool-name {
  flex: 1;
  color: var(--text);
  letter-spacing: 0.06em;
}
.tool-action-head .tool-status {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.02);
  font-weight: 500;
}
.tool-action-head .tool-status.confirmed {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-soft);
}
.tool-action-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-3);
}
.tool-row strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tool-row.hl-row {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-2);
}
.tool-row.hl-row strong { color: var(--orange); font-weight: 700; }
.tool-schedule .tool-row.hl-row strong { color: var(--green); }

/* Comparativa: 2 columnas */
.tool-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tool-col {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 7px 9px;
}
.tool-col-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.tool-col-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.6;
}
.tool-col-row strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tool-col-row.hl-row strong { color: var(--orange); }

/* Cola estilo WhatsApp en la primera burbuja de cada serie */
.bubble.first-of-series.bot::before {
  content: "";
  position: absolute;
  top: 0; left: -6px;
  width: 10px; height: 10px;
  background: var(--surface-2);
  border-left: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.bubble.first-of-series.user::before {
  content: "";
  position: absolute;
  top: 0; right: -6px;
  width: 10px; height: 10px;
  background: var(--orange-deep);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Footer / input bar tipo WhatsApp */
.chat-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom-left-radius: var(--r-5);
  border-bottom-right-radius: var(--r-5);
}
.chat-input-mock {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-3);
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 100px;
}
.chat-send-mock {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
  color: #0a0a0a;
  font-weight: 700;
  box-shadow: 0 0 16px var(--orange-glow);
  flex-shrink: 0;
}

/* Lifecycle inset (estilo respond.io) — desplazado hacia abajo para no tapar el chat */
.lifecycle-inset {
  position: absolute;
  bottom: -56px;
  left: -28px;
  z-index: 3;
  background: var(--bg-elevated);
  border: 1px solid var(--orange-line);
  border-radius: var(--r-3);
  padding: 14px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px var(--orange-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}
.lifecycle-inset .row {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-3);
}
.lifecycle-inset .row .num {
  color: var(--text);
  font-weight: 700;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line-soft);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
}
.lifecycle-inset .row.warm .num {
  background: var(--orange-soft);
  border-color: var(--orange-line-soft);
  color: var(--orange);
}
.lifecycle-inset .row.hot .num {
  background: var(--green);
  border-color: transparent;
  color: #0a0a0a;
  box-shadow: 0 0 10px var(--green-glow);
}
@media (max-width: 540px) {
  .lifecycle-inset { display: none; }
}

/* ---------- Brief mock + línea al equipo comercial ---------- */
.brief-mock {
  position: absolute;
  left: calc(100% + 28px);
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
  background: var(--bg-elevated);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-3);
  padding: 14px 14px 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px var(--blue-soft);
  z-index: 3;
  font-family: var(--font-sans);
}
/* Línea horizontal del chat al brief */
.brief-mock::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--orange-line), var(--blue-line));
  box-shadow: 0 0 6px var(--blue-glow);
}
.brief-mock::after {
  content: "";
  position: absolute;
  left: -32px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateY(-50%);
  box-shadow: 0 0 10px var(--orange-glow);
}
.brief-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--blue-line-soft);
}
.brief-icon {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--blue);
}
.brief-title { flex: 1; color: var(--text); letter-spacing: 0.06em; }
.brief-pill {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.brief-pill.is-pending {
  color: var(--text-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
}
.brief-pill.is-ready-flag {
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  box-shadow: 0 0 14px var(--green-glow);
}
.brief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.brief-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-3);
  font-family: var(--font-sans);
  position: relative;
}
.brief-list li strong {
  color: var(--text-3);
  font-weight: 600;
  font-size: 11.5px;
  text-align: right;
  opacity: 0.45;
  transition: color .3s ease, opacity .3s ease;
}
.brief-list li.is-filled strong {
  color: var(--text);
  opacity: 1;
}
/* Animación de "se está llenando" cuando llega un dato nuevo */
@keyframes brief-fill-flash {
  0%   { color: var(--orange); transform: translateX(2px); }
  60%  { color: var(--orange); }
  100% { color: var(--text);   transform: translateX(0); }
}
.brief-list li.just-filled strong {
  animation: brief-fill-flash 0.85s ease;
}
.brief-list li.just-filled::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
  transform: translateY(-50%);
  animation: brief-dot-pulse 0.85s ease forwards;
}
@keyframes brief-dot-pulse {
  0%   { opacity: 1; transform: translateY(-50%) scale(0.6); }
  100% { opacity: 0; transform: translateY(-50%) scale(1.6); }
}
/* Score + temperatura del lead (movido desde lifecycle-inset, ahora arriba del brief) */
.brief-score {
  margin-bottom: 10px;
  padding: 10px 11px 10px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid var(--green-line-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 0 18px var(--green-faint);
}
.brief-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brief-score-row.tight { margin-top: 2px; }
.brief-score-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.brief-score-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.02em;
  text-shadow: 0 0 14px var(--green-glow);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color .3s ease, text-shadow .3s ease;
}
.brief-score-num.is-empty {
  color: var(--text-3);
  text-shadow: none;
  opacity: 0.5;
}
.brief-score-bar {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.brief-score-bar .fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg,
    var(--blue) 0%,
    var(--orange) 55%,
    var(--green) 100%);
  border-radius: 100px;
  box-shadow: 0 0 10px var(--green-glow);
  transition: width .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.brief-temp-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.brief-temp-pill.is-empty {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  color: var(--text-4);
  font-weight: 600;
}
.brief-temp-pill.is-cold {
  background: var(--blue-soft);
  border: 1px solid var(--blue-line-soft);
  color: var(--blue-bright);
  box-shadow: 0 0 10px var(--blue-soft);
}
.brief-temp-pill.is-warm {
  background: var(--orange-faint);
  border: 1px solid var(--orange-line-soft);
  color: var(--orange-bright);
}
.brief-temp-pill.is-hot {
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  color: var(--orange-bright);
  box-shadow: 0 0 12px var(--orange-soft);
}
.brief-temp-pill.is-ready {
  background: var(--green);
  color: #0a0a0a;
  box-shadow: 0 0 14px var(--green-glow);
}

/* Estado "activo" del foot (cuando el lead pasa a listo) */
.brief-foot { transition: opacity .35s ease; opacity: 0.55; }
.brief-foot.is-active { opacity: 1; }
.brief-foot.is-active .brief-arrow {
  animation: brief-arrow-pulse 1.6s ease-in-out infinite;
}
.brief-foot.is-active .brief-target {
  box-shadow: 0 0 26px var(--orange-glow);
}
@keyframes brief-arrow-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
/* Foot: línea hacia abajo + tarjeta "Equipo comercial" */
.brief-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.brief-arrow {
  display: block;
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, var(--blue-line), var(--orange-line));
  position: relative;
}
.brief-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--orange);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 4px var(--orange-glow));
}
.brief-target {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  padding: 5px 12px;
  border-radius: 100px;
  font-weight: 600;
  box-shadow: 0 0 18px var(--orange-soft);
}
/* En viewports menores a ~1640px ya no cabe a la derecha del chat
   → lo dejamos inline (debajo del chat-mock) en lugar de ocultarlo,
   así el score/temperatura del lead siempre se ve. */
@media (max-width: 1640px) {
  .brief-mock {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 360px;
    margin: 56px auto 0;
  }
  .brief-mock::before,
  .brief-mock::after { display: none; }
}
@media (max-width: 540px) {
  .brief-mock { margin-top: 72px; }
}

/* ============================================================
   FLOW TRACK — línea naranja central que recorre la web
   ============================================================ */
.flow-track {
  position: relative;
}
.flow-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--orange-line) 6%,
    var(--orange-line) 94%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
}
.flow-line::before,
.flow-line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px var(--orange-glow);
  transform: translateX(-50%);
}
.flow-line::before { top: 4%; }
.flow-line::after  { bottom: 4%; }

/* Pulso descendente que recorre la línea */
.flow-line-pulse {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%);
  box-shadow: 0 0 18px var(--orange-glow), 0 0 40px var(--orange-soft);
  animation: flowPulse 7s linear infinite;
}
@keyframes flowPulse {
  0%   { top: 4%;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 96%; opacity: 0; }
}
/* Las secciones se mantienen sobre el body, pero la línea les pasa por encima vía z-index */
.flow-track > section {
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .flow-line { display: none; }
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(32px, 4vw, 48px) 0;
  background: rgba(255, 87, 34, 0.02);
}
/* Carrusel: 2 visibles a la vez, con auto-advance + flechas */
.stats-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: var(--s-3);
}
.stats-viewport {
  overflow: hidden;
  position: relative;
}
.stats-track {
  display: flex;
  gap: var(--s-6);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.stats-track .stat {
  flex: 0 0 calc((100% - var(--s-6)) / 2);
  min-width: 0;
  opacity: 0.5;
  transition: opacity .5s ease;
}
.stats-track .stat.is-active { opacity: 1; }
.stats-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
  padding: 0;
}
.stats-arrow:hover {
  border-color: var(--orange-line);
  color: var(--orange);
  background: var(--orange-faint);
}
.stats-arrow:active { transform: scale(.94); }
.stats-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.stats-dots {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.stats-dots .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-4);
  transition: background .25s ease, width .25s ease;
}
.stats-dots .dot.is-active {
  background: var(--orange);
  width: 16px;
  border-radius: 100px;
  box-shadow: 0 0 8px var(--orange-glow);
}
@media (max-width: 720px) {
  .stats-carousel { grid-template-columns: 32px 1fr 32px; gap: 8px; }
  .stats-track .stat { flex: 0 0 100%; }
  .stats-arrow { width: 32px; height: 32px; }
}
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 8px;
}
.stat .num.is-blue  { color: var(--blue); }
.stat .num.is-green { color: var(--green); }
.stat .label {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.45;
  max-width: 22ch;
}

/* ============================================================
   PROBLEM CARDS (Dolores)
   ============================================================ */
.section-head {
  text-align: center;
  margin-bottom: var(--s-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}
.section-head h2 {
  max-width: 22ch;
}
.section-head.is-strong h2 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.section-head .lead {
  text-align: center;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (max-width: 720px) { .problem-grid { grid-template-columns: 1fr; } }

.problem-card {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.problem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 0% 100%, var(--blue-soft) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.problem-card:hover {
  border-color: var(--blue-line);
  transform: translateY(-2px);
}
.problem-card:hover::before { opacity: 1; }
.problem-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.problem-card h3 {
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.problem-card .quote {
  font-style: italic;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--blue);
  border-radius: 8px;
  margin-bottom: var(--s-4);
}
.problem-card p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.problem-card .impact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.problem-card .impact::before {
  content: "→";
  color: var(--blue);
}

/* ============================================================
   STEP / "EL PASO QUE OMITEN"
   ============================================================ */
.missing-step {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, var(--blue-soft) 0%, transparent 70%),
    var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.missing-step .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (max-width: 880px) {
  .missing-step .container { grid-template-columns: 1fr; }
}
.missing-step h2 {
  max-width: 16ch;
}
.compare-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.compare-card {
  position: relative;
  padding: var(--s-5);
  background: var(--bg-elevated);
  border-radius: var(--r-3);
  border: 1px solid var(--line);
}
.compare-card.good { border-color: var(--green-line-soft); }
.compare-card.bad  { border-color: var(--orange-line); }
.compare-card .icon-box {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: var(--s-3);
}
.compare-card.good .icon-box {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  color: var(--green);
  box-shadow: 0 0 18px var(--green-glow);
}
.compare-card.bad .icon-box {
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  color: var(--orange);
  box-shadow: 0 0 18px var(--orange-glow);
}
.compare-card p { color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0; }
.compare-card p strong, .compare-card p em { color: var(--text); font-style: normal; font-weight: 600; }

/* ============================================================
   BRIDGE — canales → NURT → CRMs (líneas individuales por item)
   ============================================================ */
.bridge {
  position: relative;
  margin-bottom: var(--s-9);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px);
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(255, 87, 34, 0.07) 0%, transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
}
.bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 90%);
}

/* ---------- Encabezados arriba ---------- */
.bridge-headers {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: center;
  margin-bottom: clamp(20px, 2.5vw, 28px);
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line-2);
}
.bridge-headers .bridge-head:first-child { grid-column: 1; }
.bridge-headers .bridge-head:last-child { grid-column: 3; justify-self: end; }
.bridge-head {
  display: flex; align-items: center; gap: 10px;
}
.bridge-arrow {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  border: 1px solid var(--blue-line);
  box-shadow: 0 0 16px var(--blue-soft);
}
.bridge-arrow-out {
  background: var(--orange-soft);
  color: var(--orange);
  border-color: var(--orange-line);
  box-shadow: 0 0 16px var(--orange-glow);
}
.bridge-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}

/* ---------- Body: 3 cols (lista | core | lista) ---------- */
.bridge-body {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: stretch;
  min-height: 340px;
}

/* SVG de cables: capa absoluta cubriendo todo el body */
.bridge-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 87, 34, 0.4));
}
.wires-pulse circle {
  filter: drop-shadow(0 0 4px rgba(255, 87, 34, 0.9));
}

/* ---------- Listas de items ---------- */
.bridge-list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
}

.bridge-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%), var(--bg-elevated);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  width: 100%;
  max-width: 240px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.bridge-list-in .bridge-item { margin-right: auto; }
.bridge-list-out .bridge-item { margin-left: auto; flex-direction: row; justify-content: flex-start; }

.bridge-item:hover {
  border-color: var(--orange-line);
  background: linear-gradient(180deg, rgba(255,87,34,0.08) 0%, rgba(255,87,34,0.02) 100%), var(--bg-elevated);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 24px var(--orange-soft), inset 0 1px 0 rgba(255,255,255,0.06);
}
.bridge-list-in .bridge-item:hover { transform: translateX(3px); }
.bridge-list-out .bridge-item:hover { transform: translateX(-3px); }

.bridge-icon {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.bridge-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bridge-list-out .bridge-name { text-align: left; }

/* Puerto donde sale/entra la línea (lado interno del item) */
.bridge-port {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow:
    0 0 0 3px rgba(255, 87, 34, 0.18),
    0 0 14px var(--orange-glow);
  flex-shrink: 0;
}
.bridge-list-in .bridge-port { margin-left: auto; }
.bridge-list-out .bridge-port { margin-right: 0; }

/* ---------- Núcleo NURT (centrado en el body) ---------- */
.bridge-center {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bridge-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 148px; height: 148px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 107, 61, 0.4) 0%, transparent 65%),
    radial-gradient(circle at 50% 100%, rgba(255, 87, 34, 0.18) 0%, transparent 70%),
    var(--bg-elevated);
  border: 1.5px solid var(--orange-line);
  box-shadow:
    0 0 0 6px rgba(255, 87, 34, 0.06),
    0 0 0 14px rgba(255, 87, 34, 0.03),
    0 0 50px var(--orange-glow),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -8px 24px rgba(255, 87, 34, 0.18);
  flex-shrink: 0;
}
.bridge-core-mark {
  width: 44px; height: 44px;
  filter: drop-shadow(0 0 12px var(--orange-glow));
  margin-bottom: 2px;
}
.bridge-core-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text);
}
.bridge-core-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 0;
}
.bridge-core-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--orange-line);
  opacity: 0;
  animation: bridge-core-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
.bridge-core-pulse.two { animation-delay: 1.3s; }
@keyframes bridge-core-pulse {
  0%   { transform: scale(0.92); opacity: 0.65; }
  80%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Responsive: vertical stack en mobile/tablet */
@media (max-width: 980px) {
  .bridge-headers {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .bridge-headers .bridge-head:first-child,
  .bridge-headers .bridge-head:last-child {
    grid-column: 1;
    justify-self: center;
  }
  .bridge-body {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
  }
  .bridge-wires { display: none; }
  .bridge-list { gap: 10px; }
  .bridge-list-in .bridge-item,
  .bridge-list-out .bridge-item {
    margin: 0 auto;
    max-width: 320px;
  }
  .bridge-list-out .bridge-item { flex-direction: row; }
  .bridge-port { display: none; }
  .bridge-core { width: 124px; height: 124px; }
}

/* ---------- Funnel grid (embudo + steps verticales) ---------- */
.funnel-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .funnel-grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ---------- Funnel: cubos isométricos 3D (SVG) ---------- */
.funnel-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255, 87, 34, 0.14) 0%, transparent 70%),
    var(--bg-elevated);
  border: 1px solid var(--orange-line-soft);
  border-radius: var(--r-4);
  overflow: hidden;
}
.funnel-svg {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

/* ---------- Steps verticales (lado derecho del embudo) ---------- */
.steps-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.step-v {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 16px;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: border-color .2s ease, transform .2s ease;
}
.step-v:hover { border-color: var(--orange-line-soft); transform: translateY(-1px); }
.step-v:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -14px;
  width: 1px;
  height: 14px;
  background: linear-gradient(to bottom, var(--orange-line), transparent);
}
.step-v-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--text-3);
}
.step-v.is-blue   .step-v-icon { color: var(--blue);   background: var(--blue-soft);   border-color: var(--blue-line);   box-shadow: 0 0 14px var(--blue-soft); }
.step-v.is-orange .step-v-icon { color: var(--orange); background: var(--orange-soft); border-color: var(--orange-line); box-shadow: 0 0 14px var(--orange-glow); }
.step-v.is-green  .step-v-icon { color: var(--green);  background: var(--green-soft);  border-color: var(--green-line);  box-shadow: 0 0 14px var(--green-glow); }
.step-v-body h3 { font-size: 17px; margin: 0 0 6px; }
.step-v-body p { color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 540px) {
  .step-v { grid-template-columns: 36px 1fr; padding: var(--s-3) var(--s-4); gap: 12px; }
  .step-v-icon { width: 36px; height: 36px; }
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 980px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }

.feature {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: border-color .2s ease, transform .2s ease;
}
.feature:hover {
  border-color: var(--orange-line);
  transform: translateY(-2px);
}
.feature.is-blue:hover  { border-color: var(--blue-line); }
.feature.is-green:hover { border-color: var(--green-line); }

.feature .feature-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  display: grid;
  place-items: center;
  color: var(--orange);
  margin-bottom: var(--s-4);
}
.feature.is-blue  .feature-icon { background: var(--blue-soft);  border-color: var(--blue-line);  color: var(--blue); }
.feature.is-green .feature-icon { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.feature h3 {
  font-size: 17px;
  margin-bottom: var(--s-3);
}
.feature p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* ============================================================
   DEMO INTERACTIVO (chat + scoring panel side-by-side)
   ============================================================ */
.demo-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-4);
  border: 1px solid var(--orange-line-soft);
  border-radius: var(--r-5);
  background: var(--bg-elevated);
  padding: var(--s-4);
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 60px var(--orange-soft);
}
@media (max-width: 920px) { .demo-panel { grid-template-columns: 1fr; } }

.demo-chat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
  position: relative;
  height: 540px;
  max-height: 540px;
  display: flex;
  flex-direction: column;
}
.demo-chat::before, .demo-chat::after {
  content: ""; position: absolute;
  top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--orange-line) 20%, var(--orange-line) 80%, transparent);
  opacity: 0.5;
}
.demo-chat::before { left: -1px; }
.demo-chat::after { right: -1px; }

.demo-chat .chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: hidden;
  padding-right: 4px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
}

.demo-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.demo-side h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin: 0;
}
.score-display {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.score-display .num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--blue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color .5s ease, text-shadow .5s ease;
}
.score-display .delta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--blue);
  font-weight: 600;
  transition: color .5s ease;
}
/* Estados del score por temperatura */
.score-display.is-cold  .num,
.score-display.is-cold  .delta { color: var(--blue); }
.score-display.is-warm  .num,
.score-display.is-warm  .delta { color: var(--orange); }
.score-display.is-warm  .num   { text-shadow: 0 0 24px var(--orange-glow); }
.score-display.is-hot   .num,
.score-display.is-hot   .delta { color: var(--orange-bright); }
.score-display.is-hot   .num   { text-shadow: 0 0 28px var(--orange-glow); }
.score-display.is-ready .num,
.score-display.is-ready .delta { color: var(--green); }
.score-display.is-ready .num   { text-shadow: 0 0 28px var(--green-glow); }

.temperature-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.temperature-bar .fill {
  height: 100%;
  /* Gradient narrativo: azul (frío/análisis) → naranja (caliente) → verde (ready) */
  background: linear-gradient(90deg,
    var(--blue-deep) 0%,
    var(--blue) 25%,
    var(--orange) 55%,
    var(--orange-bright) 75%,
    var(--green) 100%);
  border-radius: 100px;
  width: 0%;
  box-shadow: 0 0 12px var(--blue-glow);
  transition: width .8s cubic-bezier(.4, 0, .2, 1), box-shadow .5s ease;
}
.temperature-bar.is-warm  .fill { box-shadow: 0 0 14px var(--orange-glow); }
.temperature-bar.is-hot   .fill { box-shadow: 0 0 16px var(--orange-glow); }
.temperature-bar.is-ready .fill { box-shadow: 0 0 18px var(--green-glow); }
.temp-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.signals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.signal-row.pos        { border-color: var(--blue-line-soft); }
.signal-row.pos.strong { border-color: var(--green-line-soft); background: var(--green-faint); }
.signal-row .label { color: var(--text-2); }
.signal-row .pts {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.signal-row.pos.strong .pts { color: var(--green); }
.signal-row .pts.neg { color: #fb7185; }

.client-data-box {
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
}
.client-data-box .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
/* Próximo paso sugerido — cambia de tono según calor del lead */
.next-step {
  font-size: 14px;
  color: var(--text-2);
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line-soft);
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
  line-height: 1.5;
}
.next-step strong { color: var(--blue); font-weight: 600; transition: color .5s ease; }
.next-step.is-warm  { background: var(--orange-soft); border-color: var(--orange-line-soft); }
.next-step.is-warm  strong { color: var(--orange); }
.next-step.is-hot   { background: var(--orange-soft); border-color: var(--orange-line); box-shadow: 0 0 22px var(--orange-glow); }
.next-step.is-hot   strong { color: var(--orange-bright); }
.next-step.is-ready { background: var(--green-soft); border-color: var(--green-line); box-shadow: 0 0 22px var(--green-glow); }
.next-step.is-ready strong { color: var(--green); }

.client-data-box .key { color: var(--text-3); }
.client-data-box .val { color: var(--text); transition: color .4s ease; }
.client-data-box .val.hl       { color: var(--blue); }
.client-data-box .val.is-warm  { color: var(--orange); }
.client-data-box .val.is-hot   { color: var(--orange-bright); }
.client-data-box .val.is-ready { color: var(--green); }

/* ============================================================
   INTEGRATIONS — pill row con scroll infinito horizontal
   ============================================================ */
.integrations {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, var(--orange-faint) 0%, transparent 70%),
    var(--bg);
}
/* Wrapper externo: máscara de fade laterales + clip horizontal */
.integrations-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
/* Track interno: dos sets idénticos en línea (set A + set B duplicado).
   Animación de 0 → -50% para que el seam (final de set A) coincida
   exactamente con el inicio (set B), generando loop perfecto.
   Arranca con desplazamiento inicial para que el primer logo no quede
   pegado al borde izquierdo (sensación "viene desde el centro"). */
.integrations-row {
  display: inline-flex;
  gap: 14px;
  flex-wrap: nowrap;
  width: max-content;
  animation: intScroll 50s linear infinite;
  will-change: transform;
}
.integrations-marquee:hover .integrations-row { animation-play-state: paused; }
@keyframes intScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.int-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
  white-space: nowrap;
}
.int-pill:hover {
  border-color: var(--orange-line);
  background: rgba(255, 87, 34, 0.04);
  transform: translateY(-2px);
}
.int-logo {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.int-logo svg { display: block; }
.int-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.integrations-foot {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.integrations-foot .dot-mini {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange-glow);
}

/* ============================================================
   USE CASES / ICP
   ============================================================ */
.icp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1100px) { .icp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .icp-grid { grid-template-columns: 1fr; } }

.icp {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background:
    radial-gradient(ellipse 100% 60% at 50% 100%, var(--orange-faint) 0%, transparent 70%),
    var(--surface);
  text-align: center;
}
.icp .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-3);
  display: block;
}
.icp h3 { font-size: 19px; margin-bottom: var(--s-3); }
.icp p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  position: relative;
  padding: clamp(72px, 9vw, 132px) 0;
  text-align: center;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, var(--orange-soft) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}
.final-cta h2 {
  max-width: 18ch;
}
.final-cta-buttons {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.final-cta-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: var(--s-4);
}

/* Logo spotlight floating mark */
.spotlight-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  width: 600px;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--s-7) 0 var(--s-5);
  background: var(--bg);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.footer-brand .nav-brand { font-size: 20px; }
.footer-brand p {
  font-size: 13px;
  color: var(--text-3);
  max-width: 32ch;
  line-height: 1.55;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  font-size: 14px;
  color: var(--text-2);
  transition: color .15s;
}
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-bottom .links { display: flex; gap: var(--s-4); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
.pulse-dot {
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 1.6s ease-in-out infinite;
  box-shadow: 0 0 10px var(--orange-glow);
}

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 6px 0;
}
.typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-3);
  animation: typing 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }