/* Homepage AI lead capture: the "What's going wrong?" router in the splash and the
   discovery interview sheet. Reuses the page tokens (--accent-primary, --font-ui, ...)
   and the existing .sheet-* / .field-* / .btn-* classes from index.html. */

/* ── Router box (sits on the splash video) ── */
.air {
  max-width: 680px; margin: 34px auto 0; text-align: left;
  background: rgba(255,255,255,0.94); border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.32);
  padding: 18px 18px 14px;
  color: var(--fg-primary);
}
.air-label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 1.6vw, 19px); letter-spacing: -0.01em; margin: 2px 4px 10px;
}
.air-row { display: flex; gap: 10px; align-items: flex-end; }
.air-input {
  flex: 1; min-width: 0; resize: none; border: none; outline: none;
  font-family: var(--font-ui); font-size: 16px; line-height: 1.45; color: var(--fg-primary);
  background: var(--bg-base); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--shadow-inset-sm); min-height: 50px; max-height: 160px; overflow-y: hidden;
}
.air-input:focus { box-shadow: var(--shadow-inset-sm), 0 0 0 2px var(--accent-primary); }
.air-go {
  flex: none; border: none; cursor: pointer; border-radius: 14px; height: 50px; padding: 0 20px;
  font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: #fff;
  background: var(--accent-primary); transition: transform 200ms ease, opacity 200ms ease;
}
.air-go:hover { transform: translateY(-1px); }
.air-go:disabled { opacity: 0.55; cursor: default; transform: none; }
.air-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 2px 2px; }
.air-chip {
  border: 1px solid rgba(0,0,0,0.1); background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; color: var(--fg-muted);
  border-radius: 999px; padding: 6px 12px; transition: color 150ms ease, border-color 150ms ease;
}
.air-chip:hover { color: var(--fg-primary); border-color: var(--accent-primary); }
.air-privacy { font-family: var(--font-ui); font-size: 11.5px; color: var(--fg-muted); margin: 10px 4px 0; }

.air-out { margin-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 14px; }
.air-out[hidden] { display: none; }
.air-thinking { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 14px; color: var(--fg-muted); }
.air-dots span {
  display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%;
  background: var(--accent-primary); animation: airDot 1.1s ease-in-out infinite;
}
.air-dots span:nth-child(2) { animation-delay: 0.15s; }
.air-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes airDot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.air-story {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-primary);
}
.air-read { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.4; margin: 0 0 8px; }
.air-p { font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--fg-primary); margin: 0 0 8px; }
.air-p.muted { color: var(--fg-muted); }
.air-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.air-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 14px; border-radius: 999px; padding: 10px 16px;
  border: none; transition: transform 200ms ease;
}
.air-btn:hover { transform: translateY(-1px); }
.air-btn.primary { background: var(--accent-primary); color: #fff; }
.air-btn.ghost { background: var(--bg-base); color: var(--fg-primary); box-shadow: var(--shadow-outset-sm); }
.air-link {
  background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
  font-family: var(--font-ui); font-size: 13px; color: var(--fg-muted);
}
.air-link:hover { color: var(--fg-primary); }
.air-follow { margin-top: 4px; }
.air-follow .air-row { margin-top: 8px; }
.air-save { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(0,0,0,0.12); }
.air-save .air-input { min-height: 44px; padding: 10px 14px; }
.air-save .air-go { height: 44px; }
.air-error { font-family: var(--font-ui); font-size: 14px; color: var(--brand-magenta); }

/* the story card the router pointed at */
.story.air-hit { outline: 3px solid var(--accent-primary); outline-offset: 6px; transition: outline-color 600ms ease; }

/* ── Discovery interview sheet ── */
.aiv-progress { display: flex; gap: 6px; margin: 0 0 18px; }
.aiv-progress span { flex: 1; height: 4px; border-radius: 4px; background: var(--neu-shadow-dark); transition: background 300ms ease; }
.aiv-progress span.on { background: var(--accent-primary); }
.aiv-step-label { font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px; }
.aiv-question { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 23px); line-height: 1.3; margin: 0 0 14px; }
.aiv-context {
  font-family: var(--font-ui); font-size: 13px; color: var(--fg-muted); background: var(--bg-base);
  border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-inset-sm); margin: 0 0 16px;
}
.aiv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.aiv-nav .btn-submit { flex: 1; }
.aiv-agenda { list-style: none; padding: 0; margin: 6px 0 16px; counter-reset: aiv; }
.aiv-agenda li { counter-increment: aiv; position: relative; padding: 0 0 12px 38px; }
.aiv-agenda li::before {
  content: counter(aiv); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-ui); font-weight: 800; font-size: 13px;
  color: #fff; background: var(--accent-primary);
}
.aiv-agenda b { display: block; font-family: var(--font-display); font-size: 15.5px; margin-bottom: 2px; }
.aiv-agenda span { font-family: var(--font-ui); font-size: 14px; color: var(--fg-muted); line-height: 1.45; }
.aiv-bring { font-family: var(--font-ui); font-size: 14px; color: var(--fg-primary); margin: 0 0 18px; }
.aiv-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--fg-muted); margin-top: 12px; text-align: center; }

@media (max-width: 560px) {
  .air { padding: 14px 12px 12px; border-radius: 18px; margin-top: 26px; }
  .air-row { flex-direction: column; align-items: stretch; }
  #air-input { min-height: 96px; }
  .air-go { width: 100%; }
  .air-chips { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .air-dots span { animation: none; opacity: 0.7; }
}

/* ── AI diagnosis section (replaces "Stories from the field") ──
   Without JS the 14 stories render in full as before; ai-lead.js adds .ais-js, which turns
   them into compact tiles and opens the chosen or matched one in the stage. */
.ais .ais-header { max-width: 760px; margin-inline: auto; text-align: center; }
.ais .ais-header .section-intro { max-width: 640px; margin-inline: auto; }
.ais .air {
  max-width: 820px; margin-top: 30px; background: #fff;
  box-shadow: var(--shadow-outset-md, 0 12px 32px rgba(0,0,0,0.08));
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 22%, white);
}

.ais-stage { max-width: 880px; margin: 28px auto 0; scroll-margin-top: 90px; }
.ais-stage[hidden] { display: none; }
.ais-stage-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 6px 12px; font-family: var(--font-ui); font-size: 13px; color: var(--fg-muted);
}
.ais-stage-bar b { color: var(--fg-primary); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; }
.ais-stage .story { padding: 36px 40px 32px; animation: aisIn 420ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes aisIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ais-browse { text-align: center; margin: 72px auto 26px; max-width: 640px; scroll-margin-top: 90px; }
.ais-browse-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); color: var(--fg-primary); margin: 0 0 6px; }
.ais-browse-sub { font-family: var(--font-ui); font-size: 15px; color: var(--fg-muted); margin: 0; }

.ais-js .ais-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; align-items: start; }
.ais-js .ais-themes .theme { margin-top: 0; }
.ais-js .ais-themes .theme-h { font-size: 17px; margin-bottom: 2px; }
.ais-js .ais-themes .theme-sub { font-size: 13px; line-height: 1.45; margin-bottom: 12px; min-height: 2.9em; }
.ais-js .ais-themes .stories { display: flex; flex-direction: column; gap: 12px; }
.ais-js .ais-themes .story {
  padding: 16px 16px 15px; cursor: pointer; border-radius: 18px;
  box-shadow: var(--shadow-outset-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.ais-js .ais-themes .story:hover { transform: translateY(-2px); border-color: var(--c); }
.ais-js .ais-themes .story:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.ais-js .ais-themes .story > :not(.story-tag):not(.story-h3) { display: none; }
.ais-js .ais-themes .story-tag { font-size: 9.5px; padding: 4px 9px; margin-bottom: 9px; }
.ais-js .ais-themes .story-h3 { font-size: 15.5px; line-height: 1.3; margin: 0; }
.ais-js .ais-themes .story.is-active { border-color: var(--c); box-shadow: var(--shadow-inset-sm); transform: none; }
.ais-js .ais-themes .story.is-active::after {
  content: 'Showing above ↑'; display: block; margin-top: 8px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 800; color: var(--c);
}
.ais-js .ais-themes .story.is-active[data-lang="es"]::after { content: 'Abierta arriba ↑'; }

@media (max-width: 1100px) { .ais-js .ais-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ais-js .ais-themes { grid-template-columns: 1fr; }
  .ais-js .ais-themes .theme-sub { min-height: 0; }
  .ais-stage .story { padding: 26px 20px 24px; }
  .ais-browse { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .ais-stage .story { animation: none; } }

/* ── AI sparkle icon: nav "Diagnose" link and the Diagnose button ── */
.ai-spark { width: 15px; height: 15px; flex: none; fill: currentColor; }
.nav-ai { display: inline-flex; align-items: center; gap: 5px; }
.nav-ai .ai-spark { color: var(--accent-primary); animation: aiSpark 2.8s ease-in-out infinite; }
@keyframes aiSpark { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.18) rotate(12deg); opacity: 0.8; } }
.air-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.air-go .ai-spark { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .nav-ai .ai-spark { animation: none; } }