/* VxM Onboarding — brand tokens lifted from help-center.css and the marketing
   site (vxm.latam). Single source of truth for colors + typography. */
:root {
  --brand: #477ecf;
  --brand-strong: #2e5fb0;
  --accent: #20ad96;
  --accent-strong: #007d6c;
  --accent-bright: #00bfa6;
  --accent-soft: #7fd2cd;

  --fg: #1a1a1a;
  --fg-muted: rgba(26, 26, 26, 0.62);
  --fg-soft: rgba(26, 26, 26, 0.45);
  --bg: #ffffff;
  --bg-soft: #f9fafb;
  --bg-elev: #ffffff;
  --border: #e5e7eb;
  --border-soft: #f2f5ee;
  --danger: #b42318;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;

  /* Layered elevation — a tight ambient contact shadow paired with a soft key
     light. Two stacked shadows read as real depth instead of a flat drop. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -6px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.08), 0 28px 64px -14px rgba(16, 24, 40, 0.24);
  /* Question card: the same key light plus a brand-tinted glow so it reads as
     the primary "your turn" surface. */
  --shadow-primary: 0 2px 4px rgba(16, 24, 40, 0.05), 0 20px 46px -16px rgba(71, 126, 207, 0.5);

  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --max: 720px;
  --topbar-h: 72px;

  /* Cooler-toned hairline for card borders (bluish grey, not warm grey) and a
     shared focus ring + easing curve for interactive motion. */
  --border-cool: #e6e9f1;
  --ring: 0 0 0 3px rgba(71, 126, 207, 0.35);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  /* Layered brand-tinted backdrop — two warm/cool light sources up top plus a
     faint cool wash low down so the page never reads as flat white. */
  background:
    radial-gradient(1200px 620px at 18% -12%, rgba(71, 126, 207, 0.1), transparent 60%),
    radial-gradient(1000px 560px at 92% -4%, rgba(32, 173, 150, 0.07), transparent 62%),
    radial-gradient(900px 700px at 50% 118%, rgba(71, 126, 207, 0.05), transparent 60%),
    var(--bg-soft);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Whisper-fine grain — kills gradient banding and lends a tactile, premium
   surface. Fixed, non-interactive, well under conscious perception. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Keep app chrome above the grain layer. */
.topbar,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Brand-tinted text selection. */
::selection {
  background: rgba(71, 126, 207, 0.22);
  color: var(--fg);
}

/* Slim, brand-toned scrollbars — the little things. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 126, 207, 0.32) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(71, 126, 207, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 126, 207, 0.45);
  background-clip: padding-box;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--bg);
  color: var(--brand);
  padding: 8px 12px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 4px 2px;
  border-radius: 12px;
  /* Black horizontal wordmark on transparent → sits directly on the white
     topbar, no chip needed. es/en = VentasxMayor, pt = VendasxAtacado
     (swapped by applyLocale via LOGO_BY_LOCALE). */
  transition: transform 160ms var(--ease);
}
.brand img {
  display: block;
  height: 30px;
  width: auto;
}
.brand:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.brand-tag {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--fg-muted);
}
.signed-in-as {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signout-link {
  font-weight: 500;
}

/* Layout */
main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 20px 64px;
  width: 100%;
  flex: 1;
}
/* Wizard widens to fit the conversation + preview pane side by side. */
main:has(#screen-wizard:not(.hidden)) {
  max-width: 1140px;
}

.wizard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: start;
}
/* Bottom-sheet chrome: hidden on desktop, activated by the media query. */
.preview-sheet-toggle {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 55;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(71, 126, 207, 0.4);
}
.preview-sheet-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd60a;
  box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.6);
  animation: sheet-pulse 1.5s ease-out infinite;
}
@keyframes sheet-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.6);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 214, 10, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 214, 10, 0);
  }
}
.preview-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(0, 0, 0, 0.35);
}
.preview-backdrop.hidden {
  display: none !important;
}
.preview-sheet-close {
  display: none;
  position: sticky;
  top: 0;
  margin-left: auto;
  z-index: 2;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg-muted);
  font-size: 15px;
  cursor: pointer;
}
/* Mobile activation — MUST come after the base display:none rules above. */
@media (max-width: 880px) {
  .preview-sheet-toggle {
    display: inline-flex;
  }
  .preview-backdrop {
    display: block;
  }
  .preview-sheet-close {
    display: flex;
  }
}
.wizard-conv {
  min-width: 0;
}
.wizard-preview {
  min-width: 0;
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
}

/* Below 880px the preview aside becomes a bottom sheet (toggled by the fixed
   "Ver tu tienda" pill) instead of stacking invisibly under the chat. */
@media (max-width: 880px) {
  .wizard-grid {
    grid-template-columns: 1fr;
  }
  main {
    /* Keep the fixed sheet pill clear of the last card / reply form. */
    padding-bottom: 104px;
  }
  .wizard-preview {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 60;
    margin: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
    padding: 10px 16px 24px;
    max-height: 86vh;
    max-height: 86dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(105%);
    transition: transform 260ms cubic-bezier(0.32, 0.72, 0.33, 1);
  }
  .wizard-preview.sheet-open {
    transform: translateY(0);
  }
  .preview-store {
    height: 62vh;
    height: 62dvh;
    min-height: 420px;
  }
}


.preview-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.preview-tab {
  background: none;
  border: 0;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.preview-tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 500;
}
.preview-popout {
  margin-left: auto;
  font-size: 16px;
  text-decoration: none;
  color: var(--fg-muted);
  padding: 4px 10px;
  border-radius: 6px;
}
.preview-popout:hover {
  color: var(--brand);
  background: rgba(71, 126, 207, 0.08);
}

.preview-store {
  /* Phone-frame mockup. Most customers will visit the store on a phone, and
     showing real mobile layout matches what they'll actually see. The
     storefront renders against the iframe's true width — no eggshell-side
     width fakery. */
  background: #1f1f23;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 12px;
  width: 390px;
  max-width: 100%;
  margin: 0 auto;
  /* dvh tracks the *visible* viewport on mobile browsers (URL bar collapse);
     the vh line is the fallback for engines without dvh support. */
  height: calc(100vh - var(--topbar-h) - 80px);
  height: calc(100dvh - var(--topbar-h) - 80px);
  min-height: 600px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.preview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 18px;
  background: #fff;
}

.preview-empty {
  background: var(--bg-elev);
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-lg);
  padding: 22px 22px 26px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}
.preview-empty-bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(71, 126, 207, 0.08);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* ------- Ghost storefront skeleton (empty-preview delight) ------------------
   A miniature, shimmering wireframe of the storefront being built. All blocks
   share one diagonal light sweep so it reads as a single living surface. */
.ghost-store {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-cool);
  background: var(--bg);
  padding: 12px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.ghost-store::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: activity-shimmer 2.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
/* Shared shape/tint for skeleton blocks. */
.ghost-store .ghost-logo,
.ghost-store .ghost-line,
.ghost-store .ghost-cart,
.ghost-store .ghost-hero,
.ghost-store .ghost-chip,
.ghost-store .ghost-thumb {
  display: block;
  background: linear-gradient(
    135deg,
    rgba(71, 126, 207, 0.13),
    rgba(32, 173, 150, 0.11)
  );
  border-radius: 6px;
}
.ghost-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ghost-logo {
  width: 40px;
  height: 16px;
  border-radius: 5px;
}
.ghost-line-sm {
  flex: 1;
  height: 8px;
  max-width: 90px;
}
.ghost-cart {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-left: auto;
}
.ghost-hero {
  height: 74px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.ghost-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.ghost-chip {
  width: 46px;
  height: 14px;
  border-radius: 999px;
}
.ghost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ghost-tile {
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ghost-thumb {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 7px;
}
.ghost-line-xs {
  height: 7px;
  width: 80%;
}
.ghost-line-price {
  height: 7px;
  width: 42%;
  background: linear-gradient(
    135deg,
    rgba(46, 95, 176, 0.22),
    rgba(0, 125, 108, 0.2)
  ) !important;
}

.preview-content {
  display: grid;
  gap: 14px;
}
.preview-section {
  background: var(--bg-elev);
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.preview-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 14px;
}
/* Tiny brand marker before each section title. */
.preview-section h3::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--accent) 100%);
  flex: 0 0 auto;
}

.preview-section dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 18px;
  font-size: 14px;
  align-items: center;
}
.preview-section dt,
.preview-section dd {
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
/* No separator under the final row (last dt + dd pair). */
.preview-section dl > dt:nth-last-child(2),
.preview-section dl > dd:nth-last-child(1) {
  border-bottom: 0;
}
.preview-section dt {
  color: var(--fg-soft);
  font-weight: 500;
  font-size: 13px;
}
.preview-section dd {
  margin: 0;
  color: var(--fg);
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.preview-logo-wrap {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  min-height: 72px;
}
.preview-logo-wrap img {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
}

.swatch-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px 0 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.02em;
}
.swatch-chip {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
}

.preview-meta {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  background: rgba(32, 173, 150, 0.12);
  border: 1px solid transparent;
  color: var(--accent-strong);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.chip-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  background: rgba(32, 173, 150, 0.18);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.chip-more {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--fg-muted);
}

/* Tree preview: nested categoria parent → hijos with indent + a thin guide
   line so depth is readable at a glance. Kicks in when categorias[*].hijos
   is non-empty (Phase A7). */
.cat-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0 0;
}
.cat-tree-node {
  display: flex;
  align-items: center;
  position: relative;
}
.cat-tree-node[style*="padding-left"]::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.5;
}
.cat-tree-node[style*="padding-left: 0px"]::before {
  display: none;
}
.chip-root {
  background: rgba(32, 173, 150, 0.18);
  border-color: rgba(32, 173, 150, 0.4);
  font-weight: 600;
}

.product-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.product-card {
  background: var(--bg);
  border: 1px solid var(--border-cool);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.product-card-img {
  aspect-ratio: 1 / 1;
  background-color: var(--bg-soft);
  /* Soft brand-tinted placeholder when a product has no image. JS sets an
     inline background-image (url) only when one exists, overriding this
     gradient; the sizing rules below apply to real photos. */
  background-image: linear-gradient(
    135deg,
    rgba(71, 126, 207, 0.09) 0%,
    rgba(32, 173, 150, 0.07) 100%
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.product-card-meta {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.product-card-meta b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  color: var(--fg);
  font-size: 13px;
}
.product-card-meta .price {
  margin-top: auto;
  color: var(--brand-strong);
  font-weight: 700;
  font-size: 14px;
}
/* Clickable card: same visual, button semantics + cursor. */
.product-card-clickable {
  padding: 0;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
}
.product-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  font-size: 12px;
}
.product-card-facts {
  color: var(--fg-muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card-cat {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--fg-muted);
}

/* Product detail modal — everything the import captured, verifiable at a
   glance: full gallery, código/GTIN/marca/categoría/stock, variantes,
   descripción, link to the original page. */
.pd-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 27, 45, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pd-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(84vh, 900px);
  overflow-y: auto;
  background: var(--bg);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15, 27, 45, 0.35);
  padding: 22px 24px 24px;
}
.pd-close {
  position: sticky;
  top: 0;
  float: right;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--fg-muted);
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
}
.pd-close:hover { background: var(--border); color: var(--fg); }
.pd-main-img {
  aspect-ratio: 1 / 1;
  max-height: 300px;
  background-color: var(--bg-soft);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
}
.pd-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pd-thumb {
  flex: 0 0 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg-soft);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.pd-thumb:hover { border-color: var(--brand); }
.pd-title { margin: 14px 0 4px; font-size: 17px; line-height: 1.3; }
.pd-price { color: var(--brand-strong); font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.pd-facts { margin: 0 0 4px; }
.pd-fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.pd-fact dt { color: var(--fg-muted); flex-shrink: 0; }
.pd-fact dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pd-variants { margin-top: 12px; }
.pd-variants h4 { margin: 0 0 6px; font-size: 13px; color: var(--fg-muted); font-weight: 600; }
.pd-variant-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-desc-title { margin: 14px 0 4px; font-size: 13px; color: var(--fg-muted); font-weight: 600; }
.pd-desc { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.pd-source {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--brand);
  text-decoration: none;
}
.pd-source:hover { text-decoration: underline; }

#preview-textos {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--fg);
}

.banner-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.banner-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}
.banner-tile img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90px;
  object-fit: cover;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.social-pill {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--brand);
  text-decoration: none;
  text-transform: capitalize;
  font-weight: 500;
}
.social-pill:hover {
  background: rgba(71, 126, 207, 0.08);
  border-color: var(--brand);
}
.screen {
  display: block;
}
.hidden {
  display: none !important;
}

/* Hero */
.hero {
  text-align: center;
  margin-bottom: 40px;
  padding: 8px 8px 0;
  position: relative;
}
/* Soft brand aura behind the hero headline — depth without a hard edge. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -32px;
  width: min(560px, 90%);
  height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(71, 126, 207, 0.14),
    transparent 72%
  );
  z-index: -1;
  pointer-events: none;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-strong);
  background: rgba(71, 126, 207, 0.1);
  border: 1px solid rgba(71, 126, 207, 0.22);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(0, 191, 166, 0.25);
  animation: kicker-breathe 2.4s var(--ease) infinite;
}
@keyframes kicker-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(0, 191, 166, 0.25);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(0, 191, 166, 0.08);
  }
}
h1 {
  font-size: clamp(30px, 5.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  line-height: 1.08;
  color: var(--fg);
}
h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--fg-muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Card */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border-cool);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-md);
  margin-bottom: 16px;
}

/* Signup email card floats a little prouder than a plain card — it's the one
   thing we want the visitor to act on. */
#signup-form.form-card {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-cool);
}

/* Question card = the primary conversational surface. Stronger elevation with
   a brand glow + a gradient top rail so "your turn" is unmistakable, while the
   agent's message card (.feed-card) stays visually secondary. */
#reply-form.form-card:not(.hidden) {
  position: relative;
  box-shadow: var(--shadow-primary);
  border-color: rgba(71, 126, 207, 0.28);
  overflow: hidden;
}
#reply-form.form-card:not(.hidden)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    var(--accent) 50%,
    var(--brand) 100%
  );
  background-size: 200% 100%;
  animation: rail-flow 6s linear infinite;
  box-shadow: 0 1px 10px rgba(71, 126, 207, 0.5);
}
@keyframes rail-flow {
  to {
    background-position: -200% 0;
  }
}

/* Form */
.form-card {
  display: grid;
  gap: 14px;
}
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
input[type="email"],
input[type="text"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"] {
  width: 100%;
  height: 46px;
  background: var(--bg);
  border: 1px solid var(--border-cool);
  border-radius: var(--radius);
  padding: 0 14px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--fg);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  line-height: 1.2;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
}
textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--fg);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Inline reply: input + send button in same row with breathing room */
#reply-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
#reply-input-wrap > input,
#reply-input-wrap > textarea {
  flex: 1 1 220px;
  min-width: 0;
}
#reply-input-wrap > textarea {
  flex-basis: 100%;
}
#reply-input-wrap > .btn {
  flex: 0 0 auto;
}
input::placeholder,
textarea::placeholder {
  color: var(--fg-soft);
}
input:focus,
textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.02),
    0 0 0 3px rgba(71, 126, 207, 0.18);
}

/* Icon-affixed field (e.g. the signup email). A decorative leading icon that
   tints to brand on focus. */
.input-affix {
  position: relative;
  display: flex;
  align-items: center;
}
.input-affix-icon {
  position: absolute;
  left: 15px;
  width: 18px;
  height: 18px;
  color: var(--fg-soft);
  pointer-events: none;
  transition: color 160ms var(--ease);
}
.input-affix > input {
  padding-left: 44px;
}
.input-affix:focus-within .input-affix-icon {
  color: var(--brand);
}
textarea {
  min-height: 96px;
  resize: vertical;
}

/* Buttons — fixed heights so every button across pickers, choices, custom
   escapes and action rows lines up to the same baseline. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, color 120ms ease,
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn-lg {
  height: 52px;
  padding: 0 24px;
  font-size: 15px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(71, 126, 207, 0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-strong) 0%, var(--brand) 100%);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(71, 126, 207, 0.36);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 6px 18px rgba(71, 126, 207, 0.36), var(--ring);
}
/* Light sweep across the CTA on hover — a moment of delight, gone in 600ms. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 620ms var(--ease);
  pointer-events: none;
}
.btn-primary:hover::after {
  left: 150%;
}
/* Keep label + arrow above the sweep; nudge the arrow forward on hover. */
.btn-primary > * {
  position: relative;
  z-index: 1;
}
.btn-primary svg {
  transition: transform 200ms var(--ease);
}
.btn-primary:hover svg {
  transform: translateX(3px);
}
/* Secondary doubles as the choice/yes-no button — a crisp white card that
   warms to the brand on hover. */
.btn-secondary {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-cool);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: rgba(71, 126, 207, 0.06);
  border-color: var(--brand);
  color: var(--brand-strong);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(71, 126, 207, 0.16);
}
.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Choice / yes-no button groups — uniform widths via grid so buttons never
   resize to fit varying label lengths. Wraps to next row when out of space.
   Same shape used for picker action rows ("Listo / Ninguno"). */
.choice-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  flex: 1 1 100%;
}
.choice-group .btn,
.custom-escape-row .btn {
  width: 100%;
  /* Long agent-written labels must WRAP, never clip ("guir sin productos y
     cargarlos despu" live 2026-07-20). */
  white-space: normal;
  height: auto;
  min-height: 44px;
  line-height: 1.3;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Shared picker card: image-pick + color-pick share padding / radius / hover /
   selected affordances. Body text uses var(--font), not mono — consistent with
   the rest of the wizard. */
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.picker-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  text-align: center;
}
.picker-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(71, 126, 207, 0.16);
  transform: translateY(-1px);
}
.picker-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 173, 150, 0.18);
}
.picker-card.is-broken {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Image picker — square thumbnail above the (optional) tick. */
.image-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
  flex: 1 1 100%;
}
.image-pick-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  position: relative;
}
.image-pick-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(71, 126, 207, 0.16);
  transform: translateY(-1px);
}
.image-pick-card .image-pick-thumb {
  flex: 1;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
}
.image-pick-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.image-pick-card.image-pick-broken {
  opacity: 0.4;
  cursor: not-allowed;
}
.image-pick-card.image-pick-multi .image-pick-tick {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: transparent;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.image-pick-card.image-pick-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 173, 150, 0.18);
}
.image-pick-card.image-pick-selected .image-pick-tick {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Color picker — chip on top, hex label below. Same outer card geometry as
   image-pick so a column of mixed pickers (rare but possible) lines up. */
.color-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
  flex: 1 1 100%;
}
.color-pick-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.color-pick-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(71, 126, 207, 0.16);
  transform: translateY(-1px);
}
.color-pick-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 173, 150, 0.18);
}
.color-pick-chip {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.color-pick-label {
  font-family: var(--mono, inherit);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg);
}

/* "Otra opción" / "Ninguna" — STACKED (button row on top, editor below).
   Was inline + flex-wrap which mixed sizes when input revealed mid-row. */
.custom-escape {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  flex: 1 1 100%;
}
.custom-escape-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.custom-escape-editor {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.custom-escape-editor input {
  flex: 1;
  min-width: 0;
}
.custom-escape-editor.hidden {
  display: none !important;
}

/* Turnstile widget — only renders when TURNSTILE_SITE_KEY is configured.
   Empty when widget absent so layout doesn't shift. */
.turnstile-slot {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  min-height: 0;
}
.turnstile-slot:empty {
  display: none;
}

/* Feedback */
.feedback {
  font-size: 13px;
  min-height: 18px;
  margin: 0;
  color: var(--fg-muted);
}
.feedback.error {
  color: var(--danger);
}
.feedback.ok {
  color: var(--accent-strong);
}
.footnote {
  font-size: 12px;
  color: var(--fg-soft);
  margin: 0;
  text-align: center;
}

/* Magic-link "sent" card — replaces the signup form once the email goes out.
   Visible UX > tiny inline feedback line. */
.sent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 36px 28px;
  border: 1px solid var(--brand);
  background: linear-gradient(180deg, rgba(71, 126, 207, 0.06) 0%, var(--bg-elev) 100%);
}
.sent-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(71, 126, 207, 0.14);
  color: var(--brand);
}
.sent-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.sent-lede {
  font-size: 15px;
  color: var(--fg);
  margin: 0;
  max-width: 38ch;
  line-height: 1.5;
}
.sent-email-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 14px;
}
.sent-email-label {
  color: var(--fg-soft);
}
.sent-email-value {
  color: var(--fg);
  font-weight: 600;
  font-family: var(--mono, inherit);
}
.sent-tips {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 44ch;
}
.sent-tips li {
  position: relative;
  padding-left: 18px;
  text-align: left;
}
.sent-tips li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.7;
}
.sent-tips b {
  color: var(--fg);
  font-weight: 600;
}
.sent-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-link {
  background: transparent;
  border: 0;
  color: var(--brand);
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
}
.btn-link:hover {
  color: var(--brand-strong);
  text-decoration: underline;
}

/* Inline brand swatches in the ready summary ("Diseño listo con tu paleta") */
.ready-swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  margin-left: 5px;
  vertical-align: -2px;
}

/* Pre-launch checklist on the ready panel */
.ready-checklist {
  list-style: none;
  margin: 18px 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checklist-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 14px;
}
.checklist-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
}
.checklist-ok .checklist-icon {
  background: rgba(32, 173, 150, 0.18);
  color: var(--accent-strong);
}
.checklist-wait .checklist-icon {
  background: rgba(71, 126, 207, 0.18);
  color: var(--brand);
}
.checklist-todo .checklist-icon {
  background: rgba(255, 159, 10, 0.18);
  color: #b76b00;
}
.checklist-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  color: var(--fg);
}
.checklist-label a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.checklist-label a:hover {
  text-decoration: underline;
}
.checklist-hint {
  font-size: 12px;
  color: var(--fg-muted);
}

.ready-image-progress {
  margin: 14px 0 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.ready-image-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--fg);
  margin-bottom: 8px;
}
.ready-image-progress-bar {
  height: 8px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
}
.ready-image-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-strong) 100%);
  transition: width 300ms ease;
}

/* Trust row under signup — country names become subtle chips; the middot
   separators (aria-hidden) are dropped since the chips carry the separation. */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 26px;
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.trust-row span[aria-hidden] {
  display: none;
}
.trust-row span:not([aria-hidden]) {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  border: 1px solid var(--border-cool);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  color: var(--fg-muted);
}

/* Activity bar: shows what the agent is doing right now. */
.activity-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(71, 126, 207, 0.08);
  border: 1px solid rgba(71, 126, 207, 0.2);
  color: var(--brand-strong);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: 0.005em;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Sweeping sheen — reads as "the assistant is working". */
.activity-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: activity-shimmer 1.9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes activity-shimmer {
  to {
    transform: translateX(100%);
  }
}
.activity-bar > * {
  position: relative;
  z-index: 1;
}
.activity-progress {
  font-weight: 500;
  color: var(--brand-strong);
  opacity: 0.85;
  font-size: 12px;
  border-left: 1px solid rgba(71, 126, 207, 0.25);
  padding-left: 10px;
}
.activity-elapsed {
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.activity-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(71, 126, 207, 0.25);
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Boot splash — shown until bootstrap() decides signup vs wizard. */
.boot-splash {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.boot-mark {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: #1e293b;
  opacity: 0;
  animation: bootFade 0.4s ease 0.05s forwards;
}
.boot-mark span {
  color: #477ecf;
}
.boot-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  border-top-color: #477ecf;
  animation: spin 0.7s linear infinite, bootFade 0.4s ease 0.15s forwards;
  opacity: 0;
}
@keyframes bootFade {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot-spinner {
    animation: bootFade 0.4s ease forwards;
  }
}

/* Agent identity header — a decorative marker that sits above the feed card so
   the conversation reads as coming from a named assistant. aria-hidden in the
   markup; purely presentational. */
.conv-agent-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px 2px;
}
.conv-agent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 130%);
  box-shadow: 0 3px 10px rgba(71, 126, 207, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}
.conv-agent-avatar svg {
  display: block;
}
.conv-agent-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

/* Wizard feed: latest agent message(s). Renders prose, not raw dump. The agent
   card is intentionally SECONDARY to the question card — lighter elevation, an
   accent left border to tie it to the assistant identity above. */
.feed-card {
  min-height: 84px;
  font-size: 15px;
  color: var(--fg);
  word-wrap: break-word;
  line-height: 1.65;
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(
    180deg,
    rgba(32, 173, 150, 0.035) 0%,
    var(--bg-elev) 40%
  );
}
.feed-card .agent-msg {
  margin-bottom: 12px;
  /* New messages fade + slide in. Safe to animate: renderFeed() early-returns
     when the signature is unchanged, so nodes are only recreated on a genuine
     new message, not on every poll. */
  animation: msg-in 190ms var(--ease) both;
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.feed-card .agent-msg p {
  margin: 0 0 10px;
}
.feed-card .agent-msg p:last-child { margin-bottom: 0; }
.feed-card .agent-msg ul, .feed-card .agent-msg ol {
  margin: 6px 0 10px;
  padding-left: 22px;
}
.feed-card .agent-msg li { margin: 2px 0; }
.feed-card .agent-msg h1,
.feed-card .agent-msg h2,
.feed-card .agent-msg h3,
.feed-card .agent-msg h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 8px 0 6px;
  letter-spacing: -0.005em;
}
.feed-card .agent-msg code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
}
.feed-card .agent-msg strong { font-weight: 700; }
.feed-card .agent-msg em { font-style: italic; }
.feed-card .agent-msg a { color: var(--brand); }
.feed-card .agent-msg:last-child {
  margin-bottom: 0;
}
.feed-card.empty {
  color: var(--fg-soft);
  font-style: italic;
  font-size: 14px;
}

/* History collapse */
.history {
  margin-top: 4px;
  margin-bottom: 16px;
}
.history summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-muted);
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  font-weight: 500;
}
.history summary::marker,
.history summary::-webkit-details-marker {
  display: none;
}
.history summary:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.history-feed {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 14px;
  color: var(--fg-muted);
  white-space: pre-wrap;
}
.history-feed .agent-msg {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.history-feed .agent-msg:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* Ready / error cards */
.ready-card {
  border-color: var(--accent-bright);
  background: linear-gradient(180deg, rgba(0, 191, 166, 0.08), var(--bg-elev) 60%);
}
.ready-card h2 {
  color: var(--accent-strong);
}
.error-card {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}
.error-card h2 {
  color: var(--danger);
}
/* Collapsed raw server error under the localized cap/loop messages */
.error-details {
  margin-top: 8px;
  font-size: 13px;
}
.error-details summary {
  cursor: pointer;
  color: var(--fg-muted);
}
.error-details p {
  margin: 6px 0 0;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

/* Debug overlay (?debug=1 enables it) */
.debug {
  position: fixed;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  z-index: 5;
}

/* Footer */
.site-footer {
  max-width: var(--max);
  margin: 32px auto 24px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-soft);
}
.site-footer a {
  color: var(--fg-muted);
}

/* Mobile */
@media (max-width: 480px) {
  main {
    padding: 32px 14px 56px;
  }
  h1 {
    font-size: 26px;
  }
  .card {
    padding: 18px;
  }
  .topbar {
    padding: 0 18px;
  }
  .brand {
    padding: 6px 11px;
  }
  .brand img {
    height: 23px;
  }
  .hero {
    margin-bottom: 28px;
  }
}

.file-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  width: 100%;
  text-align: center;
}
.file-upload-zone:hover,
.file-upload-zone:focus,
.file-upload-zone-hover {
  border-color: var(--brand);
  background: rgba(71, 126, 207, 0.06);
  outline: none;
}
.file-upload-hint {
  font-weight: 600;
  margin-bottom: 4px;
}
.file-upload-sub {
  font-size: 0.85em;
  color: var(--muted, #666);
}
.file-upload-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  width: 100%;
}
.file-upload-item {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 4px;
  font-size: 0.9em;
}
.file-upload-status {
  font-size: 0.85em;
  color: var(--muted, #666);
  margin: 4px 0;
  min-height: 1.2em;
}

/* Progress stepper — a connected rail of dots. JS sets each <li> class to
   "step" | "step done" | "step current" and its textContent to the label;
   the dot, check icon and connecting rail are all pure CSS keyed off those
   classes. Open-ended wizards are the #1 abandonment driver, so showing where
   the customer is and how much remains is load-bearing, not decoration. */
.stepper {
  display: flex;
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
}
.stepper .step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
  text-align: center;
  padding: 0 2px;
  transition: color 200ms var(--ease);
}
/* Dot */
.stepper .step::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 2px solid var(--border-cool);
  color: var(--fg-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: background 220ms var(--ease), border-color 220ms var(--ease),
    color 220ms var(--ease), transform 220ms var(--ease);
}
/* Connecting rail — runs from this dot's centre to the next one, behind the
   dots. Hidden on the last step. */
.stepper .step::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border-cool);
  z-index: 0;
  transition: background 220ms var(--ease);
}
.stepper .step:last-child::after {
  display: none;
}
.stepper .step.done {
  color: var(--accent-strong);
}
.stepper .step.done::before {
  content: "✓";
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* The segment leaving a completed step is itself complete. */
.stepper .step.done.linked::after {
  background: var(--accent);
}
.stepper .step.current {
  color: var(--brand-strong);
}
.stepper .step.current::before {
  background: rgba(71, 126, 207, 0.12);
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.08);
  animation: step-pulse 1.9s var(--ease) infinite;
}
@keyframes step-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(71, 126, 207, 0.4);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(71, 126, 207, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(71, 126, 207, 0);
  }
}

/* Customer transcript bubbles — right-aligned, brand-tinted. Rendered in
   both the main feed card and the collapsed history feed. */
.customer-msg {
  margin: 10px 0 10px auto;
  width: fit-content;
  max-width: 85%;
  padding: 9px 14px;
  background: linear-gradient(
    135deg,
    rgba(71, 126, 207, 0.16) 0%,
    rgba(71, 126, 207, 0.1) 100%
  );
  border: 1px solid rgba(71, 126, 207, 0.24);
  color: var(--fg);
  border-radius: 14px 14px 4px 14px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: right;
  box-shadow: var(--shadow-sm);
  animation: msg-in 190ms var(--ease) both;
}
.customer-msg-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.customer-msg-imgs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.history-feed .customer-msg {
  border-bottom: 1px solid rgba(71, 126, 207, 0.24);
  padding-bottom: 8px;
}

/* "cambiar" edit affordance on preview summary rows */
.edit-link {
  background: none;
  border: 0;
  padding: 0 2px;
  margin-left: 6px;
  color: var(--brand);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}
.edit-link:hover {
  text-decoration: underline;
}
.edit-link:disabled {
  color: var(--fg-soft);
  cursor: not-allowed;
  text-decoration: none;
}
/* dd rows that carry an edit link: value ellipsizes, link never clips */
.preview-section dd.dd-editable {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.preview-section dd.dd-editable .dd-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-logo-wrap .edit-link {
  position: absolute;
  right: 8px;
  bottom: 6px;
}
.preview-logo-wrap {
  position: relative;
}
.swatch-row .edit-link {
  align-self: center;
}

/* Reconnect banner: subtle, non-blocking */
.reconnect-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px dashed var(--border);
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.reconnect-banner::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(71, 126, 207, 0.25);
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}

/* Session-expired / cancelled interstitials */
.expired-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(71, 126, 207, 0.06) 0%, var(--bg-elev) 100%);
}
.expired-card h2 {
  margin: 0;
}
.expired-card p {
  margin: 0;
  color: var(--fg-muted);
}

/* Cross-device OTP block on the "email sent" card */
.otp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.otp-reveal {
  font-size: 13px;
}
.otp-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.otp-form input {
  width: 132px;
  text-align: center;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.35em;
}
.otp-form .feedback {
  flex-basis: 100%;
  text-align: center;
}

/* batch_ask card — vertical list of labeled sub-widgets, one submit. */
.batch-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 100%;
  margin-bottom: 10px;
}
.batch-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.batch-field-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.batch-field-label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.batch-field-label::before {
  content: "";
  width: 4px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--accent) 100%);
  flex: 0 0 auto;
}
.btn.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 173, 150, 0.18);
  color: var(--accent);
}

/* Motion is opt-out: honour the OS "reduce motion" setting by dropping every
   non-essential transition/animation. Interactive affordances still change
   state, just without movement. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* "Contact an expert" escape hatch — present but never competing with the flow. */
.expert-help-row {
  margin: 10px 2px 0;
  text-align: center;
}
.expert-help-link {
  background: none;
  border: none;
  color: var(--fg-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.expert-help-link:hover {
  color: var(--brand);
}
.expert-help-done {
  color: var(--accent-strong);
  font-size: 12.5px;
  font-weight: 600;
}

/* ── LAUNCH MODE ─────────────────────────────────────────────────────────── */
body.launch-mode .wizard-conv { display: none; }
body.launch-mode main:has(#screen-wizard:not(.hidden)) { max-width: none; padding: 0; }
body.launch-mode .wizard-grid { grid-template-columns: 1fr; gap: 0; }
/* The aside becomes the WHOLE screen below the topbar. It must paint its own
   background (it's transparent in wizard mode) or the page footer bleeds
   through, and it must neutralize the <880px bottom-sheet transform or the
   store sits translated 105% offscreen on mobile. */
body.launch-mode .wizard-preview {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  background: var(--bg);
  transform: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
/* Drop the phone-frame mockup: fullscreen editor means the real store at the
   real viewport width, not a 390px frame floating on eggshell. */
body.launch-mode .preview-store {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.launch-mode .preview-iframe { height: 100%; border-radius: 0; }
body.launch-mode .preview-tabs { display: none; }
body.launch-mode footer { display: none; }
body.launch-mode .preview-sheet-toggle { display: none; }

/* The last screen before the customer pays. Pill floats bottom-CENTER over
   the fullscreen editor; the expanded panel rises from the same spot as a
   polished receipt-style card. Every detail here sells trust. */
.launch-overlay {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.launch-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff; border: none; cursor: pointer;
  font: 600 15px/1 var(--font); letter-spacing: 0.01em;
  padding: 16px 28px; border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px rgba(46, 95, 176, 0.45);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms;
  animation: launch-pulse 2.6s ease-in-out infinite;
  white-space: nowrap;
}
.launch-pill:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 44px rgba(46,95,176,0.5); }
@keyframes launch-pulse { 0%,100% { box-shadow: 0 12px 32px rgba(46,95,176,0.45); } 50% { box-shadow: 0 12px 44px rgba(46,95,176,0.7); } }
@media (prefers-reduced-motion: reduce) { .launch-pill { animation: none; } }

.launch-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px));
  /* Pinned bottom:22px in the overlay — cap the height and scroll internally so
     the top (rocket + close button) never slips ABOVE the topbar (the header
     paints over it) or off a short mobile viewport. */
  max-height: calc(100vh - var(--topbar-h) - 44px);
  max-height: calc(100dvh - var(--topbar-h) - 44px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(15, 27, 45, 0.28), 0 4px 16px rgba(15, 27, 45, 0.10);
  padding: 30px 30px 24px;
  text-align: center;
  animation: launch-panel-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes launch-panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .launch-panel { animation: none; } }

.launch-hero { display: flex; justify-content: center; margin-bottom: 12px; }
.launch-hero-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; font-size: 26px;
  background: linear-gradient(135deg, rgba(71, 126, 207, 0.14), rgba(71, 126, 207, 0.05));
  border: 1px solid rgba(71, 126, 207, 0.22);
  border-radius: 50%;
}
.launch-panel h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.launch-sub { margin: 0 auto 20px; color: var(--fg-muted); font-size: 14px; line-height: 1.5; max-width: 320px; }
.launch-close {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-soft); border: none; color: var(--fg-muted); cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.launch-close:hover { background: var(--border); color: var(--fg); }

/* Receipt-style rows: label left, value right, hairline dividers. */
.launch-summary {
  margin: 0 0 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  text-align: left;
}
.launch-summary .launch-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
}
.launch-summary dt { color: var(--fg-muted); flex-shrink: 0; }
.launch-summary dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.launch-plan { margin: 0 0 16px; padding: 10px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.launch-fiscal {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px; padding: 14px; text-align: left;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
}
.launch-fiscal .lf-head { margin-bottom: 2px; }
.launch-fiscal .lf-title { font-weight: 700; font-size: 14px; }
.launch-fiscal .lf-note { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--fg-soft); }
.launch-fiscal .lf-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg-muted); }
.launch-fiscal input[type="text"],
.launch-fiscal select {
  width: 100%; padding: 9px 11px; font-size: 14px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  box-sizing: border-box;
}
.launch-fiscal input[type="text"]:focus,
.launch-fiscal select:focus { outline: none; border-color: var(--accent, #2563eb); }
.launch-fiscal .lf-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--fg); cursor: pointer;
}
.launch-fiscal .lf-check input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.launch-btn { width: 100%; }
/* "Hablar con mi asesor" — secondary green action under the launch CTA. */
.launch-asesor { width: 100%; margin-top: 10px; background: #25d366; color: #fff; border: 0; }
.launch-asesor:hover { filter: brightness(1.08); }
.launch-asesor[disabled] { opacity: .7; cursor: default; filter: none; }
.launch-trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px 0 0; font-size: 12.5px; color: var(--fg-muted);
}
.launch-trust svg { flex-shrink: 0; opacity: 0.7; }
.launch-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-soft); }
.launch-waiting { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--fg-muted); }
.launch-done { text-align: center; margin-top: 8px; }
.launch-done h3 { margin: 0 0 14px; font-size: 19px; }

.input-skip {
  flex-basis: 100%;
  order: 99;
  align-self: center;
  width: auto;
  margin: 2px auto 0;
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.input-skip:hover { color: var(--brand); }

/* ---------- Feature spotlight (rotating highlights) ----------
   Subtle, premium strip at the foot of the conversation column. Reinforces
   VxM's high-value wholesale capabilities throughout onboarding without
   competing with the active question. Text is swapped by app.js on a timer;
   the .is-swapping class drives a short cross-fade. */
.feature-ticker {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--border-cool);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(32, 173, 150, 0.05), rgba(32, 173, 150, 0.02)),
    var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.feature-ticker-spark {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
  color: var(--accent-strong);
  opacity: 0.9;
}
.feature-ticker-body {
  min-width: 0;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.feature-ticker.is-swapping .feature-ticker-body {
  opacity: 0;
  transform: translateY(4px);
}
.feature-ticker-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 3px;
}
.feature-ticker-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg);
}
.feature-ticker-text {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* Error/stuck card: always-available text reply so the customer is never
   trapped — a typed message resumes the session as a steer for the agent. */
.error-reply { display: flex; gap: 8px; margin-top: 14px; }
.error-reply input { flex: 1 1 auto; min-width: 0; }
.error-reply .btn { flex: none; }
@media (max-width: 480px) { .error-reply { flex-direction: column; } }

/* Social login buttons on the signup screen (Google / Microsoft / Yahoo). */
.social-login { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.social-sep { display: flex; align-items: center; gap: 12px; color: #8a94a6; font-size: 13px; margin: 2px 0; text-transform: none; }
.social-sep::before, .social-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: #e3e8ef; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 18px; border: 1px solid #d7dce5; border-radius: 12px; background: #fff; color: #1f2937; text-decoration: none; font-weight: 600; font-size: 15px; font-family: inherit; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
.social-btn:hover { background: #f7f9fc; border-color: #c3cad6; text-decoration: none; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.social-btn svg { flex: none; }

/* ============================================================
   Mobile hardening (customer wizard, go-live 2026-07).
   Consolidated at the end so these overrides win on source order.
   Everything here is scoped to small / short / touch viewports and
   is inert on desktop (env() insets resolve to 0 off-notch).
   ============================================================ */
@media (max-width: 880px) {
  /* iOS Safari auto-zooms (and jumps the layout) on focus of any field
     under 16px. Force every customer-focusable control to the 16px
     threshold on mobile; desktop keeps its tighter 15/14px scale. Covers
     the reply input, signup fields, OTP, manual-info, and the fiscal
     (CUIT / razón social) form + country select. */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Notch / status-bar / home-indicator insets (viewport-fit=cover). */
  .topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  main {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    /* Keep the last card / reply form clear of the floating sheet pill AND
       the home indicator. */
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  /* Bottom sheet sits flush against the home indicator — pad its floor + sides. */
  .wizard-preview {
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  /* Float the "Ver tu tienda" pill above the indicator. */
  .preview-sheet-toggle {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  }

  /* Touch-target minimums (44px). Corner dismissers and the underlined "skip"
     affordance are visually small; pad them out for reliable tapping without
     changing their look on desktop. */
  .launch-close,
  .preview-sheet-close {
    width: 44px;
    height: 44px;
  }
  .input-skip {
    min-height: 44px;
    padding: 11px 14px;
  }
}

/* Short viewports (landscape phones, small laptops): the 600px / 420px
   preview min-heights force the phone-frame / bottom sheet to overflow.
   Relax them so nothing clips or scrolls the page sideways. */
@media (max-height: 700px) {
  .preview-store {
    min-height: 0;
  }
}
@media (max-width: 880px) and (max-height: 700px) {
  .wizard-preview {
    max-height: 94dvh;
  }
  .preview-store {
    height: 62dvh;
    min-height: 0;
  }
}

/* Belt-and-braces: the page body must never scroll sideways on a phone. */
@media (max-width: 880px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
}