/* KronosDesk site — secoes 2026 (prova, como funciona, automacao, numeros reais).
   Usa os tokens de styles.css (--bg, --surface, --primary...). */

/* ── Faixa de prova ─────────────────────────────────────────────────────────── */
.trust {
  border-top: 1px solid rgba(148, 163, 184, 0.10);
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  background: var(--bg-soft);
  padding: 22px 0;
}
.trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.trust__group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.trust__label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.trust__logos { display: flex; gap: 10px 28px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.trust__logos li { font-weight: 700; font-size: 1rem; color: #CBD5E1; letter-spacing: -0.01em; }
.trust__stats { display: flex; gap: 32px; margin: 0; }
.trust__stats div { display: flex; flex-direction: column-reverse; }
.trust__stats dt { font-size: .78rem; color: #64748B; }
.trust__stats dd { margin: 0; font-size: 1.5rem; font-weight: 800; color: #F8FAFC; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── Como funciona ──────────────────────────────────────────────────────────── */
.steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.step { padding: 28px 28px 0 0; position: relative; }
.step + .step { padding-left: 28px; border-left: 1px solid rgba(148, 163, 184, 0.14); }
.step__num {
  display: block;
  margin-bottom: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .85rem;
  font-weight: 700;
  color: var(--primary-light);
}
.step h3 { margin: 0 0 8px; font-size: 1.15rem; color: #F8FAFC; }
.step p { margin: 0; color: #94A3B8; line-height: 1.65; }

/* ── Automacao de credito (diferencial) ────────────────────────────────────── */
.section--auto { background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.06) 40%, transparent); }
.auto__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.auto__list { list-style: none; margin: 24px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auto__list li { position: relative; padding-left: 28px; color: #94A3B8; line-height: 1.6; }
.auto__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--primary-light);
  border-bottom: 2px solid var(--primary-light);
  transform: rotate(-45deg);
}
.auto__list strong { color: #E2E8F0; font-weight: 600; }

.auto__chat {
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.5);
}
.auto__chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  font-size: .85rem;
  font-weight: 600;
  color: #CBD5E1;
}
.auto__chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
.auto__msgs { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; }
.msg {
  margin: 0;
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  animation: msgIn .4s ease forwards;
}
.msg--in { align-self: flex-start; background: #182338; color: #E2E8F0; border-bottom-left-radius: 4px; }
.msg--out { align-self: flex-end; background: #1D4ED8; color: #fff; border-bottom-right-radius: 4px; }
.msg--sys {
  align-self: center;
  max-width: none;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(34, 197, 94, 0.12);
  color: #4ADE80;
  font-size: .78rem;
  font-weight: 600;
}
.auto__msgs .msg:nth-child(1) { animation-delay: .1s; }
.auto__msgs .msg:nth-child(2) { animation-delay: .5s; }
.auto__msgs .msg:nth-child(3) { animation-delay: .9s; }
.auto__msgs .msg:nth-child(4) { animation-delay: 1.3s; }
.auto__msgs .msg:nth-child(5) { animation-delay: 1.8s; }
.auto__msgs .msg:nth-child(6) { animation-delay: 2.3s; }
.auto__msgs .msg:nth-child(7) { animation-delay: 2.8s; }
@keyframes msgIn { to { opacity: 1; transform: none; } }
.auto__caption { margin: 0; padding: 0 18px 16px; font-size: .75rem; color: #64748B; }

/* ── Beneficios: numeros reais ─────────────────────────────────────────────── */
.benefits-real {
  background: var(--surface);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  padding: 28px;
}
.benefits-real__label { margin: 0 0 18px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-light); }
.benefits-real dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(148, 163, 184, 0.12); border-radius: 12px; overflow: hidden; }
.benefits-real dl div { background: var(--surface); padding: 18px 16px; display: flex; flex-direction: column-reverse; gap: 4px; }
.benefits-real dt { font-size: .82rem; color: #94A3B8; }
.benefits-real dd { margin: 0; font-size: 2rem; font-weight: 800; color: #F8FAFC; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.benefits-real__note { margin: 14px 0 0; font-size: .75rem; color: #64748B; }

/* ── Responsivo ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .auto__grid { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .step, .step + .step { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(148, 163, 184, 0.14); }
}
@media (max-width: 640px) {
  .trust__inner { flex-direction: column; align-items: flex-start; }
  .trust__stats { gap: 22px; }
  .trust__stats dd { font-size: 1.25rem; }
  .benefits-real { padding: 20px; }
  .benefits-real dd { font-size: 1.6rem; }
  .msg { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; opacity: 1; transform: none; }
}