:root {
  --night: #0f1a2e;
  --night-soft: #172542;
  --night-line: #26375a;
  --bg: #ffffff;
  --bg-alt: #f6f7fa;
  --ink: #10203a;
  --ink-soft: #4b5a72;
  --line: #dde3ec;
  --accent: #f09838;
  --accent-strong: #d9832a;
  --accent-soft: #fdeedd;
  --font-display: "Bricolage Grotesque", "Public Sans", sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --container: 1120px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent-strong); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }

.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 6px; }
.skip:focus { top: 16px; z-index: 100; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.button {
  font: inherit; font-weight: 600; font-size: 0.95rem;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
}
.button--lg { padding: 13px 24px; font-size: 1.02rem; }
.button--accent { background: var(--accent); color: var(--night); }
.button--accent:hover { background: var(--accent-strong); }
.button--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.button--ghost:hover { border-color: #fff; }
.button--secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.button--secondary:hover { border-color: var(--accent); }
.button:disabled { opacity: 0.55; cursor: default; }

/* Encabezado sobre el hero oscuro */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(15, 26, 46, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--night-line); }
.site-header__inner { display: flex; align-items: center; gap: 2rem; height: 66px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.wordmark__mark { width: 30px; height: 26px; color: var(--accent); }
.site-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.site-nav a { color: #c7d0e0; text-decoration: none; font-size: 0.95rem; }
.site-nav a:hover { color: #fff; }

/* Hero */
.hero { background: var(--night); color: #fff; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__title { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.02em; max-width: 12ch; }
.hero__bracket { color: var(--accent); font-weight: 500; }
.hero__lead { margin-top: 1.5rem; max-width: 34rem; font-size: 1.1rem; color: #c7d0e0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* Demo animada */
.demo { margin: 0; background: #fff; color: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.demo__header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.demo__avatar { width: 30px; height: 30px; color: var(--accent); flex: none; }
.demo__avatar svg, .chat__avatar svg { width: 100%; height: 100%; display: block; }
.demo__who { font-weight: 600; }
.demo__live { margin-left: auto; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.demo__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.demo__thread { height: 330px; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.demo__msg { max-width: 86%; padding: 9px 13px; border-radius: 12px; font-size: 0.93rem; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.demo__msg.is-visible { opacity: 1; transform: none; }
.demo__msg--user { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.demo__msg--agent, .demo__msg--human { align-self: flex-start; background: var(--bg-alt); border-bottom-left-radius: 4px; }
.demo__msg--human { border-left: 3px solid var(--accent); }
.demo__msg-who { display: block; font-size: 0.78rem; font-weight: 600; color: var(--accent-strong); margin-bottom: 2px; }
.demo__msg--tool { align-self: flex-start; background: none; padding: 2px 4px; font-size: 0.8rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.demo__msg--tool::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin 0.9s linear infinite; }
.demo__msg--tool.is-done::before { border-color: var(--accent); animation: none; background: var(--accent); }
.demo__action { display: inline-block; margin-top: 6px; padding: 4px 10px; border: 1px solid var(--accent); border-radius: 6px; font-size: 0.82rem; font-weight: 600; color: var(--accent-strong); }
.demo__msg--typing { opacity: 1; transform: none; min-width: 52px; color: var(--ink-soft); }
.demo__msg--typing::after { content: "…"; animation: dots 1.2s steps(4, end) infinite; }
.demo__caption { padding: 10px 16px 14px; font-size: 0.82rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* Secciones claras */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--alt { background: var(--bg-alt); }
.section__lead { margin-top: 1rem; max-width: 40rem; color: var(--ink-soft); font-size: 1.08rem; }

.capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.5rem; margin-top: 3rem; }
.capability { border-top: 2px solid var(--accent); padding-top: 1rem; }
.capability h3 { font-size: 1.15rem; }
.capability p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.98rem; }

.steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; counter-reset: step; }
.step__number { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; }
.step h3 { font-size: 1.2rem; }
.step p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.98rem; }

.solutions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.solution { border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.solution--custom { background: var(--night); color: #fff; border-color: var(--night); }
.solution--custom .solution__audience, .solution--custom p { color: #c7d0e0; }
.solution--custom .button { align-self: flex-start; margin-top: auto; }
.solution__audience { color: var(--ink-soft); font-size: 0.95rem; }
.solution p { font-size: 0.98rem; }
.solution > a { font-size: 0.95rem; margin-top: auto; }

.section--cta { background: var(--night); color: #fff; padding: clamp(3rem, 5vw, 4.5rem) 0; }
.section--cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.section--cta p { color: #c7d0e0; margin-top: 0.5rem; max-width: 34rem; }

.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; font-size: 0.9rem; color: var(--ink-soft); }
.site-footer__inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 8px; }
.site-footer__brand .wordmark__mark { width: 20px; height: 18px; }
.site-footer nav { display: flex; gap: 1.25rem; }
.site-footer a { color: var(--ink-soft); }

/* Chat flotante */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat__launcher { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--accent); color: var(--night); cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(15, 26, 46, 0.6); transition: transform 0.15s ease; }
.chat__launcher:hover { transform: translateY(-2px); }
.chat__launcher svg { width: 36px; height: 36px; }
.chat__launcher svg rect[fill="#fff"] { fill: var(--accent); }
.chat.is-open .chat__launcher { display: none; }

.chat__teaser { display: flex; align-items: flex-start; gap: 6px; max-width: 280px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; border-bottom-right-radius: 4px; padding: 10px 10px 10px 14px; box-shadow: 0 12px 28px -14px rgba(15, 26, 46, 0.5); animation: teaser 0.35s ease; }
.chat__teaser[hidden] { display: none; }
.chat__teaser-text { font: inherit; font-size: 0.93rem; line-height: 1.4; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.chat__teaser-close { flex: none; width: 24px; height: 24px; border: 0; background: none; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.chat__teaser-close:hover { background: var(--bg-alt); }
@keyframes teaser { from { opacity: 0; transform: translateY(8px); } }

.chat__panel { width: 380px; max-width: calc(100vw - 40px); height: 580px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(15, 26, 46, 0.5); }
.chat__panel[hidden] { display: none; }
.chat__header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--night); color: #fff; }
.chat__avatar { width: 34px; height: 34px; color: var(--accent); flex: none; }
.chat__header-text { display: flex; flex-direction: column; line-height: 1.2; }
.chat__title { font-weight: 600; font-size: 0.98rem; }
.chat__status { font-size: 0.8rem; color: #c7d0e0; display: inline-flex; align-items: center; gap: 6px; }
.chat__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.chat__status[data-state="busy"]::before { background: var(--accent); }
.chat__status[data-state="closed"]::before { background: #94a3b8; }
.chat__close { margin-left: auto; width: 32px; height: 32px; border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.chat__close:hover { background: var(--night-soft); }

.chat__messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; }
.msg--assistant { align-self: flex-start; background: var(--bg-alt); border-bottom-left-radius: 4px; }
.msg--user { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.msg--error { align-self: stretch; background: #fef2f2; color: #991b1b; font-size: 0.9rem; }
.msg p + p, .msg p + ul, .msg ul + p { margin-top: 0.5rem; }
.msg ul { margin: 0; padding-left: 1.1rem; }
.msg a { color: var(--accent-strong); }
.msg--typing { color: var(--ink-soft); min-width: 52px; }
.msg--typing::after { content: "…"; animation: dots 1.2s steps(4, end) infinite; }

.chat__suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.chat__suggestions[hidden] { display: none; }
.chip { font: inherit; font-size: 0.85rem; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--accent); }

.chat__form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat__form[hidden] { display: none; }
.chat__form textarea { flex: 1; resize: none; font: inherit; font-size: 0.95rem; line-height: 1.4; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; max-height: 120px; }
.chat__form textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.chat__closed { padding: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.chat__closed[hidden] { display: none; }
.chat__closed p { color: var(--ink-soft); font-size: 0.93rem; }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title { max-width: none; }
  .capabilities, .steps, .solutions { grid-template-columns: 1fr; }
  .capabilities { gap: 2rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-header__inner { gap: 1rem; }
  .site-nav { display: none; }
  .site-header .button { margin-left: auto; padding: 8px 14px; }
  .demo__thread { height: 300px; }
  .chat { right: 12px; bottom: 12px; }
  .chat.is-open { inset: 0; align-items: stretch; }
  .chat.is-open .chat__panel { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .chat__teaser { max-width: calc(100vw - 96px); }
}