/* Demo v2: sitios de cliente por sector */
:root {
  --d-primary: #e85d04;
  --d-primary-soft: rgba(232,93,4,.12);
  --d-bg: #0f1923;
  --d-surface: #162030;
  --d-surface2: #1e2d3d;
  --d-border: rgba(255,255,255,.1);
  --d-text: #f0ebe3;
  --d-muted: #8a9bb0;
  --d-radius: 12px;
  --d-shadow: 0 4px 24px rgba(0,0,0,.4);
  --d-success: #22c55e;
  --d-warning: #f59e0b;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Syne", "Inter", system-ui, sans-serif;
  --mono: "Inter", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fg: var(--d-text);
  --lead: color-mix(in srgb, var(--d-text) 84%, transparent);
  --muted: var(--d-muted);
  --hair: var(--d-border);
  --gold: var(--d-primary);
  --gold-soft: var(--d-primary-soft);
  --r-pill: 999px;
  --shadow-2: var(--d-shadow);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

a { color: inherit; }

button,
input {
  font: inherit;
}

.demo-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--d-primary) 22%, transparent), transparent 33%),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--d-primary) 14%, transparent), transparent 30%),
    linear-gradient(135deg, var(--d-bg), color-mix(in srgb, var(--d-bg) 74%, #000 26%));
  color: var(--d-text);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: hidden;
  --fg: var(--d-text);
  --lead: color-mix(in srgb, var(--d-text) 84%, transparent);
  --muted: var(--d-muted);
  --hair: var(--d-border);
  --gold: var(--d-primary);
  --gold-soft: var(--d-primary-soft);
  --r-pill: 999px;
  --shadow-2: var(--d-shadow);
}

.demo--materiales {
  --d-primary: #e85d04;
  --d-primary-soft: rgba(232,93,4,.12);
  --d-bg: #0f1923;
  --d-surface: #162030;
  --d-surface2: #1e2d3d;
}

.demo--ferreteria {
  --d-primary: #fbbf24;
  --d-primary-soft: rgba(251,191,36,.14);
  --d-bg: #1a1a1a;
  --d-surface: #242424;
  --d-surface2: #303030;
}

.demo--refaccionaria {
  --d-primary: #ef4444;
  --d-primary-soft: rgba(239,68,68,.13);
  --d-bg: #111111;
  --d-surface: #1b1b1b;
  --d-surface2: #2a1b1b;
}

.demo--mobiliario-cocinas {
  --d-primary: #a16207;
  --d-primary-soft: rgba(161,98,7,.17);
  --d-bg: #1c1410;
  --d-surface: #271b14;
  --d-surface2: #342317;
}

.demo--canceleria {
  --d-primary: #60a5fa;
  --d-primary-soft: rgba(96,165,250,.14);
  --d-bg: #0d1520;
  --d-surface: #152132;
  --d-surface2: #1c2f45;
}

.demo--imprenta {
  --d-primary: #a855f7;
  --d-primary-soft: rgba(168,85,247,.15);
  --d-bg: #0f0a1a;
  --d-surface: #1a102a;
  --d-surface2: #25143c;
}

.demo--medico-dental {
  --d-primary: #14b8a6;
  --d-primary-soft: rgba(20,184,166,.14);
  --d-bg: #f0fdfa;
  --d-surface: #ffffff;
  --d-surface2: #dff8f3;
  --d-border: rgba(15,23,42,.12);
  --d-text: #0f172a;
  --d-muted: #64748b;
  --d-shadow: 0 14px 42px rgba(15,23,42,.13);
}

.demo--maquinaria-refrigeracion {
  --d-primary: #3b82f6;
  --d-primary-soft: rgba(59,130,246,.14);
  --d-bg: #111827;
  --d-surface: #182235;
  --d-surface2: #20314a;
}

.demo-switcher {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(8, 12, 18, .76);
  backdrop-filter: blur(18px);
  color: #f8fafc;
}

.demo-switcher__label {
  color: rgba(248,250,252,.72);
  font-size: 12px;
  white-space: nowrap;
}

.demo-switcher__pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.demo-switcher__pills::-webkit-scrollbar { display: none; }

.demo-switcher__pills a,
.sector-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: rgba(248,250,252,.76);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}

.demo-switcher__pills a:hover,
.demo-switcher__pills a[aria-current="page"],
.sector-nav a:hover,
.sector-nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--d-primary) 72%, white 0%);
  background: var(--d-primary-soft);
  color: var(--d-primary);
}

.demo-switcher__badge {
  justify-self: end;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--d-primary) 78%, white 10%);
  border-radius: 999px;
  color: #fff4d6;
  background: rgba(245,158,11,.12);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.demo-nav {
  position: fixed;
  inset: 53px clamp(12px, 3vw, 28px) auto;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  padding: 14px clamp(14px, 2.4vw, 22px);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  background: color-mix(in srgb, var(--d-surface) 82%, transparent);
  box-shadow: var(--d-shadow);
  backdrop-filter: blur(18px);
}

.demo-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.demo-nav__logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--d-primary), color-mix(in srgb, var(--d-primary) 60%, #fff 18%));
  color: #071017;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 850;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--d-primary) 28%, transparent);
}

.demo-nav__name {
  overflow: hidden;
  color: var(--d-text);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-nav__links {
  display: none;
  align-items: center;
  gap: 18px;
}

.demo-nav__links a {
  color: var(--d-muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.demo-nav__links a:hover { color: var(--d-text); }

.demo-nav__cta,
.demo-disclaimer a,
.ia-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--d-primary);
  color: #061016;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--d-primary) 28%, transparent);
  white-space: nowrap;
}

.demo-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  min-height: 100vh;
  padding: 155px clamp(18px, 6vw, 72px) 54px;
}

.demo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--d-primary) 16%, transparent), transparent 36%),
    radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--d-primary) 20%, transparent), transparent 38%);
  opacity: .78;
}

.demo-hero__copy {
  max-width: 680px;
}

.demo-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--d-primary) 55%, transparent);
  border-radius: 999px;
  background: var(--d-primary-soft);
  color: var(--d-primary);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-h1 {
  margin: 22px 0 16px;
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(44px, 8vw, 94px);
  font-weight: 800;
  line-height: .91;
  letter-spacing: 0;
}

.demo-sub {
  margin: 0;
  max-width: 60ch;
  color: var(--lead);
  font-size: clamp(16px, 2vw, 20px);
}

.demo-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.demo-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  background: color-mix(in srgb, var(--d-surface) 78%, transparent);
  box-shadow: var(--d-shadow);
}

.demo-stat__n,
.demo-stat__l {
  display: block;
}

.demo-stat__n {
  color: var(--d-primary);
  font-family: var(--display);
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 850;
  line-height: 1;
}

.demo-stat__l {
  margin-top: 6px;
  color: var(--d-muted);
  font-size: 12px;
  font-weight: 650;
}

.demo-hero__chat {
  width: min(100%, 560px);
}

.demo-disclaimer {
  padding: 24px clamp(18px, 6vw, 72px);
  background: linear-gradient(90deg, rgba(245,158,11,.16), var(--d-primary-soft));
  border-block: 1px solid color-mix(in srgb, var(--d-primary) 35%, transparent);
}

.demo-disclaimer__inner {
  display: grid;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--d-text);
  font-size: 14px;
}

.demo-disclaimer strong {
  color: var(--d-primary);
}

.sector-nav {
  padding: 18px clamp(18px, 6vw, 72px);
  border-bottom: 1px solid var(--d-border);
  background: color-mix(in srgb, var(--d-surface) 66%, transparent);
}

.sector-nav__inner {
  display: flex;
  gap: 8px;
  max-width: 1180px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.sector-nav__inner::-webkit-scrollbar { display: none; }

.demo-footer {
  padding: 24px clamp(18px, 6vw, 72px) 36px;
  color: var(--d-muted);
  text-align: center;
  font-size: 13px;
}

.demo-footer a {
  color: var(--d-text);
  font-weight: 800;
  text-decoration: none;
}

.ia-chat {
  border-color: var(--d-border);
}

.ia-chat__hd,
.ia-chips,
.ia-input-row {
  border-color: var(--d-border);
}

.ia-sale-table {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.ia-sale-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--d-border) 75%, transparent);
}

.ia-sale-row:last-child {
  border-bottom: 0;
}

.ia-sale-name {
  display: block;
  color: var(--d-text);
  font-weight: 800;
}

.ia-sale-meta {
  display: block;
  margin-top: 2px;
  color: var(--d-muted);
  font-size: 11px;
}

.ia-sale-amt {
  color: var(--d-text);
  font-weight: 850;
  white-space: nowrap;
}

.ia-stock {
  display: inline-flex;
  margin-right: 6px;
  color: var(--d-success);
  font-weight: 800;
}

.ia-stock--wait {
  color: var(--d-warning);
}

.ia-delivery,
.ia-upsell,
.ia-note-inline,
.ia-not-found {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--d-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--d-surface2) 72%, transparent);
  color: var(--lead);
  font-size: 12px;
}

.ia-upsell strong {
  color: var(--d-primary);
}

.ia-quote__total {
  border-top-color: color-mix(in srgb, var(--d-primary) 45%, transparent);
}

.ia-quote__total-amt {
  color: var(--d-primary);
}

.ia-whatsapp {
  width: 100%;
  margin-top: 12px;
  color: #061016;
}

.ia-suggestion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.ia-suggestion-row button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--d-primary) 42%, transparent);
  border-radius: 999px;
  background: var(--d-primary-soft);
  color: var(--d-primary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.demo--medico-dental .demo-switcher {
  background: rgba(15,23,42,.82);
}

.demo--medico-dental .ia-chat,
.demo--medico-dental .ia-msg--bot .ia-bubble,
.demo--medico-dental .ia-input,
.demo--medico-dental .ia-chips,
.demo--medico-dental .ia-input-row,
.demo--medico-dental .ia-chat__hd {
  background: rgba(255,255,255,.92);
}

.demo--medico-dental .ia-msg--user .ia-bubble,
.demo--medico-dental .ia-send,
.demo--medico-dental .ia-chat__av {
  color: #05201d;
}

@media (min-width: 768px) {
  .demo-nav__links {
    display: flex;
  }

  .demo-disclaimer__inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
}

@media (min-width: 980px) {
  .demo-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .78fr);
  }
}

@media (max-width: 760px) {
  .demo-switcher {
    grid-template-columns: 1fr auto;
  }

  .demo-switcher__label {
    display: none;
  }

  .demo-switcher__pills {
    order: 2;
    grid-column: 1 / -1;
  }

  .demo-nav {
    inset: 91px 12px auto;
  }

  .demo-nav__cta {
    display: none;
  }

  .demo-hero {
    padding-top: 178px;
  }

  .demo-stats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .demo-nav,
  .demo-stat,
  .ia-chat {
    animation: demo-rise .7s cubic-bezier(.2,.8,.2,1) both;
  }

  .demo-hero__copy {
    animation: demo-rise .78s cubic-bezier(.2,.8,.2,1) both;
  }
}

@keyframes demo-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Demo v2 polish layer: stronger sector identity, cleaner hierarchy, safer responsive rhythm */
.demo-body {
  --d-radius: 8px;
  --d-accent2: #f8fafc;
  --d-grid: color-mix(in srgb, var(--d-primary) 18%, transparent);
  --d-panel: color-mix(in srgb, var(--d-surface) 88%, #000 12%);
  --d-panel-strong: color-mix(in srgb, var(--d-surface2) 86%, #000 14%);
  --d-focus: color-mix(in srgb, var(--d-primary) 62%, #fff 20%);
  position: relative;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--d-bg) 92%, #000 8%), var(--d-bg)),
    repeating-linear-gradient(90deg, transparent 0 47px, color-mix(in srgb, var(--d-primary) 8%, transparent) 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--d-primary) 7%, transparent) 48px);
}

.demo-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--d-primary) 16%, transparent) 0 20%, transparent 20% 100%),
    linear-gradient(245deg, color-mix(in srgb, var(--d-accent2) 10%, transparent) 0 14%, transparent 14% 100%);
  opacity: .72;
}

.demo-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--d-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  opacity: .38;
}

.demo--materiales { --d-accent2: #f59e0b; }
.demo--ferreteria { --d-accent2: #f97316; }
.demo--refaccionaria { --d-accent2: #facc15; }
.demo--mobiliario-cocinas { --d-accent2: #f5d19d; }
.demo--canceleria { --d-accent2: #93c5fd; }
.demo--imprenta { --d-accent2: #22d3ee; }
.demo--medico-dental {
  --d-accent2: #0ea5e9;
  --d-panel: rgba(255,255,255,.88);
  --d-panel-strong: rgba(255,255,255,.98);
  --d-grid: rgba(15,118,110,.12);
}
.demo--maquinaria-refrigeracion { --d-accent2: #94a3b8; }

.demo-switcher {
  min-height: 52px;
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}

.demo-switcher__pills a,
.sector-nav a,
.demo-eyebrow,
.ia-label-badge,
.ia-quote__total-label,
.demo-body .ia-label-badge,
.demo-body .ia-quote__total-label {
  letter-spacing: 0;
}

.demo-switcher__pills a,
.sector-nav a {
  position: relative;
  overflow: hidden;
}

.demo-switcher__pills a::before,
.sector-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--d-primary) 14%, transparent), transparent);
  opacity: 0;
  transform: translateX(-40%);
  transition: opacity .18s ease, transform .28s ease;
}

.demo-switcher__pills a:hover::before,
.sector-nav a:hover::before,
.demo-switcher__pills a[aria-current="page"]::before,
.sector-nav a[aria-current="page"]::before {
  opacity: 1;
  transform: translateX(0);
}

.demo-switcher__badge {
  background: linear-gradient(135deg, rgba(245,158,11,.2), color-mix(in srgb, var(--d-primary) 18%, transparent));
}

.demo-nav {
  inset-inline: 50%;
  width: min(1180px, calc(100% - 24px));
  transform: translateX(-50%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--d-panel) 88%, transparent), color-mix(in srgb, var(--d-surface2) 48%, transparent));
  overflow: hidden;
}

.demo-nav::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--d-primary), var(--d-accent2), transparent);
}

.demo-nav__logo {
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--d-primary) 88%, #fff 12%), color-mix(in srgb, var(--d-accent2) 76%, #000 10%));
}

.demo-nav__links a,
.demo-nav__cta,
.demo-disclaimer a,
.ia-whatsapp,
.ia-chip,
.ia-send {
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.demo-nav__links a:focus-visible,
.demo-nav__cta:focus-visible,
.demo-disclaimer a:focus-visible,
.demo-switcher a:focus-visible,
.sector-nav a:focus-visible,
.ia-chip:focus-visible,
.ia-input:focus-visible,
.ia-send:focus-visible,
.ia-whatsapp:focus-visible {
  outline: 2px solid var(--d-focus);
  outline-offset: 3px;
}

.demo-nav__cta:hover,
.demo-disclaimer a:hover,
.ia-whatsapp:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--d-primary) 34%, transparent);
}

.demo-hero {
  isolation: isolate;
  overflow: hidden;
  padding-inline: max(18px, calc((100vw - 1180px) / 2));
}

.demo-hero::before {
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--d-primary) 18%, transparent) 0 22%, transparent 22% 100%),
    linear-gradient(292deg, color-mix(in srgb, var(--d-accent2) 10%, transparent) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(135deg, transparent 0 16px, color-mix(in srgb, var(--d-primary) 7%, transparent) 17px 18px);
  opacity: .84;
}

.demo-hero::after {
  content: "";
  position: absolute;
  right: max(-160px, -8vw);
  top: 18%;
  z-index: -1;
  width: min(54vw, 660px);
  height: min(58vw, 700px);
  border: 1px solid color-mix(in srgb, var(--d-primary) 18%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--d-panel) 64%, transparent), transparent),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--d-primary) 9%, transparent) 0 1px, transparent 1px 28px);
  clip-path: polygon(18% 0, 100% 8%, 82% 100%, 0 88%);
  opacity: .55;
}

.demo-hero__copy {
  position: relative;
  padding-block: clamp(8px, 4vh, 44px);
}

.demo-eyebrow {
  max-width: min(100%, 42rem);
  text-transform: none;
  color: color-mix(in srgb, var(--d-primary) 82%, var(--d-text) 18%);
}

.demo-h1 {
  max-width: 11.5ch;
  text-wrap: balance;
  color: var(--d-text);
  text-shadow: 0 20px 60px rgba(0,0,0,.24);
}

.demo-h1::after {
  content: "";
  display: block;
  width: min(180px, 38vw);
  height: 6px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--d-primary), var(--d-accent2));
}

.demo-sub {
  font-size: clamp(16px, 1.65vw, 19px);
  line-height: 1.65;
}

.demo-stats {
  max-width: 640px;
}

.demo-stat {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--d-panel) 88%, transparent), color-mix(in srgb, var(--d-panel-strong) 68%, transparent));
}

.demo-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--d-primary), var(--d-accent2));
}

.demo-stat__n {
  color: color-mix(in srgb, var(--d-primary) 86%, var(--d-accent2) 14%);
}

.demo-stat__l {
  color: color-mix(in srgb, var(--d-muted) 82%, var(--d-text) 18%);
}

.demo-hero__chat {
  justify-self: end;
}

.demo-body .ia-chat {
  min-height: clamp(500px, 64vh, 620px);
  max-height: none;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--d-border) 72%, var(--d-primary) 28%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--d-panel-strong) 92%, transparent), color-mix(in srgb, var(--d-surface) 86%, #000 14%));
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    0 0 0 1px color-mix(in srgb, var(--d-primary) 10%, transparent) inset;
}

.demo-body .ia-chat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--d-primary), var(--d-accent2), transparent);
  z-index: 2;
}

.demo-body .ia-chat__hd {
  padding-block: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--d-surface2) 64%, transparent), color-mix(in srgb, var(--d-surface) 76%, transparent));
}

.demo-body .ia-chat__av {
  border-radius: 8px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--d-primary) 30%, transparent);
}

.demo-body .ia-msgs {
  gap: 12px;
  padding: 18px;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--d-primary) 5%, transparent)),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--d-primary) 6%, transparent) 24px);
}

.demo-body .ia-msg {
  max-width: min(92%, 430px);
}

.demo-body .ia-bubble {
  border-radius: 8px;
}

.demo-body .ia-msg--user .ia-bubble {
  border-bottom-right-radius: 3px;
  color: #071017;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--d-primary) 24%, transparent);
}

.demo-body .ia-msg--bot .ia-bubble {
  border-bottom-left-radius: 3px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--d-panel-strong) 84%, transparent), color-mix(in srgb, var(--d-panel) 80%, transparent));
}

.ia-sale-table {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--d-border) 82%, var(--d-primary) 18%);
  border-radius: 8px;
}

.ia-sale-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--d-surface2) 42%, transparent);
}

.ia-sale-row:nth-child(even) {
  background: color-mix(in srgb, var(--d-surface) 56%, transparent);
}

.ia-sale-name,
.ia-sale-meta {
  overflow-wrap: anywhere;
}

.ia-stock {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--d-success) 12%, transparent);
}

.ia-stock--wait {
  background: color-mix(in srgb, var(--d-warning) 14%, transparent);
}

.ia-delivery,
.ia-upsell,
.ia-note-inline,
.ia-not-found {
  border-radius: 8px;
}

.ia-upsell {
  border-color: color-mix(in srgb, var(--d-primary) 30%, var(--d-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--d-primary) 12%, transparent), color-mix(in srgb, var(--d-accent2) 8%, transparent));
}

.ia-quote__total {
  margin-top: 14px;
  padding: 14px 0 0;
}

.ia-quote__total-amt {
  font-size: clamp(25px, 4vw, 34px);
}

.demo-body .ia-chips,
.demo-body .ia-input-row {
  background: color-mix(in srgb, var(--d-surface) 76%, transparent);
}

.demo-body .ia-chip {
  min-height: 32px;
  border-color: color-mix(in srgb, var(--d-primary) 26%, var(--d-border));
  color: color-mix(in srgb, var(--d-text) 82%, var(--d-primary) 18%);
}

.demo-body .ia-input {
  min-height: 42px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--d-surface2) 72%, transparent);
}

.demo-body .ia-input:focus {
  border-color: var(--d-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-primary) 12%, transparent);
}

.demo-body .ia-send {
  border-radius: 8px;
}

.demo-disclaimer {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--d-primary) 16%, transparent), color-mix(in srgb, var(--d-accent2) 10%, transparent)),
    color-mix(in srgb, var(--d-surface) 72%, transparent);
}

.demo-disclaimer__inner {
  border-left: 4px solid var(--d-primary);
  padding-left: 16px;
}

.sector-nav {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--d-surface) 78%, transparent), color-mix(in srgb, var(--d-bg) 94%, transparent));
}

.demo-footer {
  background: color-mix(in srgb, var(--d-bg) 94%, #000 6%);
}

.demo--medico-dental .demo-body::before,
.demo--medico-dental.demo-body::before {
  opacity: .48;
}

.demo--medico-dental .demo-h1 {
  text-shadow: none;
}

.demo--medico-dental .ia-sale-row:nth-child(even),
.demo--medico-dental .ia-sale-row,
.demo--medico-dental .ia-delivery,
.demo--medico-dental .ia-upsell,
.demo--medico-dental .ia-note-inline,
.demo--medico-dental .ia-not-found {
  background: rgba(240,253,250,.76);
}

@media (min-width: 980px) {
  .demo-hero {
    grid-template-columns: minmax(0, .98fr) minmax(420px, .82fr);
  }

  .demo-body .ia-chat {
    transform: translateY(14px) rotate(-.4deg);
  }

  .demo-body .ia-chat:hover {
    transform: translateY(8px) rotate(0deg);
  }
}

@media (max-width: 860px) {
  .demo-h1 {
    max-width: 12ch;
  }

  .demo-hero__chat {
    justify-self: stretch;
  }

  .demo-hero__chat,
  .demo-body .ia-chat {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .demo-nav {
    width: calc(100% - 24px);
  }

  .demo-hero {
    padding-inline: 16px;
    padding-bottom: 36px;
  }

  .demo-h1 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .demo-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .demo-stats::-webkit-scrollbar {
    display: none;
  }

  .demo-stat {
    min-width: 150px;
  }
}

@media (max-width: 480px) {
  .demo-switcher {
    gap: 8px;
  }

  .demo-switcher__badge {
    padding-inline: 9px;
  }

  .demo-nav__name {
    max-width: 46vw;
  }

  .demo-body .ia-chat {
    min-height: 470px;
  }

  .ia-sale-row {
    grid-template-columns: 1fr;
  }

  .ia-sale-amt {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .demo-nav {
    animation: demo-nav-rise .7s cubic-bezier(.2,.8,.2,1) backwards;
  }

  .demo-body .ia-chat {
    animation: demo-chat-rise .7s cubic-bezier(.2,.8,.2,1) backwards .08s;
  }

  .demo-switcher__pills a:hover,
  .sector-nav a:hover,
  .demo-stat:hover,
  .ia-chip:hover {
    transform: translateY(-1px);
  }

  .demo-h1::after {
    animation: demo-line 1s cubic-bezier(.2,.8,.2,1) both .2s;
  }
}

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

@keyframes demo-line {
  from {
    transform: scaleX(.2);
    transform-origin: left;
    opacity: .25;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
    opacity: 1;
  }
}

@keyframes demo-nav-rise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes demo-chat-rise {
  from {
    opacity: 0;
    transform: translateY(32px) rotate(-.4deg);
  }
  to {
    opacity: 1;
    transform: translateY(14px) rotate(-.4deg);
  }
}

/* Fixed type scale to avoid clipped hero and stat text across sectors */
.demo-hero {
  scroll-margin-top: 148px;
}

.demo-h1 {
  max-width: 15ch;
  font-size: 62px;
  line-height: .98;
}

.demo-sub {
  font-size: 18px;
}

.demo-stat {
  min-width: 0;
}

.demo-stat__n {
  font-size: 28px;
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.demo-stat__n:empty {
  display: none;
}

.demo-stat__n:empty + .demo-stat__l {
  margin-top: 0;
  color: color-mix(in srgb, var(--d-primary) 84%, var(--d-text) 16%);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.demo-stat__l {
  overflow-wrap: anywhere;
}

.ia-quote__total-amt {
  font-size: 32px;
}

@media (max-width: 980px) {
  .demo-h1 {
    font-size: 54px;
  }
}

@media (max-width: 760px) {
  .demo-h1 {
    font-size: 42px;
  }

  .demo-sub {
    font-size: 16px;
  }

  .demo-stat__n {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .demo-h1 {
    font-size: 36px;
  }

  .ia-quote__total-amt {
    font-size: 26px;
  }
}