/* ==========================================================================
   AutoPilot CRM — Recursos: demonstrações animadas (mobile-first)
   Substitui os screenshots estáticos por cenas animadas do produto.
   Carregar DEPOIS de landing.css.
   ========================================================================== */

/* --- 1. Recursos volta a existir no mobile (antes: .feature-row display:none) --- */
@media (max-width: 1023px) {
  #recursos .feature-row,
  #recursos .feature-row.flip { display: grid; }
  #recursos .features-mobile { display: none; }
}

/* --- 2. Moldura do demo --- */
.feature-mock.is-demo .mock { aspect-ratio: auto; }
.feature-mock.is-demo .mock-screen {
  position: static;
  inset: auto;
  display: block;
  place-items: normal;
  background: none;
  overflow: hidden;
}

/* --- 3. Cena --- */
.fd {
  --app-bg: hsl(210 20% 98%);
  --app-card: hsl(0 0% 100%);
  --app-fg: hsl(220 20% 10%);
  --app-muted: hsl(220 10% 46%);
  --app-border: hsl(214 20% 90%);
  --app-soft: hsl(210 15% 95%);
  --app-primary: hsl(230 100% 50%);
  --app-primary-soft: hsl(225 70% 94%);
  --app-success: hsl(142 60% 38%);
  --app-warning: hsl(38 92% 46%);
  --app-danger: hsl(0 72% 51%);
  --e: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  container-type: inline-size;
  width: 100%;
  height: var(--fd-h, 400px);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--app-fg);
  background: var(--app-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
@media (min-width: 768px) { .fd { font-size: 13.5px; height: var(--fd-h-md, 460px); } }
@media (min-width: 1024px) { .fd { font-size: 14px; height: var(--fd-h-lg, 500px); } }

.fd svg { width: 1em; height: 1em; flex-shrink: 0; }

/* reveal base */
.fd [data-at] {
  opacity: 0;
  transform: translateY(0.8em) scale(0.975);
  transition: opacity 0.36s var(--e), transform 0.42s var(--e);
  will-change: opacity, transform;
}
.fd [data-at].on { opacity: 1; transform: none; }
.fd [data-at][data-plain] { transform: none; transition: opacity 0.3s ease; }
/* linhas de chat ainda não reveladas não ocupam espaço — o log cresce de verdade */
.fd [data-fd-log] > * > [data-at]:not(.on) { height: 0; margin-bottom: 0; overflow: hidden; }

/* progresso do loop */
.fd-prog {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--app-primary); opacity: 0.5; z-index: 4;
  border-radius: 0 2px 2px 0;
}

/* ---------- primitivas de app ---------- */
.fd-head {
  display: flex; align-items: center; gap: 0.65em;
  padding: 0.75em 0.9em; flex-shrink: 0;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-card);
}
.fd-av {
  width: 2.3em; height: 2.3em; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
  background: hsl(230 100% 50% / 0.1); color: var(--app-primary);
  font-weight: 600; font-size: 0.85em;
}
.fd-who { min-width: 0; }
.fd-name { font-weight: 600; font-size: 1.05em; display: flex; align-items: center; gap: 0.5em; }
.fd-sub { color: var(--app-muted); font-size: 0.82em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fd-tagsm {
  font-size: 0.72em; font-weight: 500; color: var(--app-muted);
  background: var(--app-soft); border-radius: 999px; padding: 0.15em 0.6em;
}
.fd-head-r { margin-left: auto; display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; }

.fd-log { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.fd-roll { padding: 0.9em; }

.fd-row { display: flex; margin-bottom: 0.7em; }
.fd-row.rin { justify-content: flex-start; }
.fd-row.rout { justify-content: flex-end; }
.fd-bub {
  max-width: 84%; border-radius: 1em; padding: 0.6em 0.8em;
  box-shadow: 0 1px 2px rgba(0, 40, 120, 0.05);
}
.fd-bub.bin { background: var(--app-soft); border-bottom-left-radius: 0.3em; }
.fd-bub.bout { background: var(--app-primary-soft); border-bottom-right-radius: 0.3em; }
.fd-bub p { margin: 0; }
.fd-t {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.2em;
  margin-top: 0.25em; font-size: 0.75em; color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}
.fd-t svg { width: 1em; height: 1em; }
.fd-ia {
  display: inline-flex; align-items: center; gap: 0.35em; margin-bottom: 0.3em;
  color: var(--app-primary); font-size: 0.78em; font-weight: 600;
}
.fd-ia i { display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 0.35em; background: hsl(230 100% 50% / 0.12); }
.fd-ia svg { width: 0.95em; height: 0.95em; }
.fd-sys { display: flex; justify-content: center; margin: 0.1em 0 0.8em; }
.fd-sys span {
  white-space: nowrap;
  font-size: 0.78em; font-weight: 500; padding: 0.25em 0.85em; border-radius: 999px;
  background: var(--app-soft); color: var(--app-muted); border: 1px solid var(--app-border);
}

.fd-dots { display: flex; gap: 0.35em; padding: 0.35em 0.15em; }
.fd-dots i {
  width: 0.5em; height: 0.5em; border-radius: 999px; display: block;
  background: hsl(230 100% 50% / 0.55); animation: fdDot 1.25s infinite ease-in-out;
}
.fd-dots i:nth-child(2) { animation-delay: 0.16s; }
.fd-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes fdDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-0.35em); opacity: 1; }
}

.fd-composer {
  flex-shrink: 0; border-top: 1px solid var(--app-border); background: var(--app-card);
  padding: 0.6em 0.75em; display: flex; align-items: center; gap: 0.6em;
  color: var(--app-muted); font-size: 0.92em;
}
.fd-composer .fd-field {
  flex: 1; border: 1px solid var(--app-border); border-radius: 0.8em;
  padding: 0.5em 0.75em; background: var(--app-card); overflow: hidden; white-space: nowrap;
}
.fd-composer svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* chips / callouts sobre a cena */
.fd-float {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 0.8em; border-radius: 999px;
  background: var(--app-card); border: 1px solid var(--app-border);
  box-shadow: 0 8px 26px rgba(0, 40, 120, 0.16);
  font-size: 0.85em; font-weight: 600; white-space: nowrap; max-width: calc(100% - 1.8em);
}
.fd-float svg { width: 1.1em; height: 1.1em; }
.fd-float.accent { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.fd-float.warn { color: var(--app-warning); border-color: hsl(38 92% 46% / 0.4); background: hsl(38 92% 50% / 0.12); }
.fd-float.ok { color: var(--app-success); border-color: hsl(142 60% 38% / 0.4); background: hsl(142 60% 38% / 0.1); }
.fd-float.bl { left: 0.9em; bottom: 0.9em; }
.fd-float.tr { right: 0.9em; top: 3.6em; }
.fd-float.bc { left: 50%; bottom: 0.9em; transform: translateX(-50%) translateY(0.8em) scale(0.97); }
.fd-float.bc.on { transform: translateX(-50%); }
.fd-float.bc.up { bottom: 4.4em; }

/* lupa / zoom no horário */
.fd-spot {
  position: absolute; z-index: 3; right: 1.1em;
  width: 4.4em; height: 4.4em; border-radius: 999px;
  background: var(--app-card); border: 2px solid var(--app-primary);
  box-shadow: 0 10px 30px rgba(0, 40, 120, 0.22);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1em; font-variant-numeric: tabular-nums;
  color: var(--app-primary);
}
.fd-spot small { display: block; font-size: 0.6em; font-weight: 600; color: var(--app-muted); text-align: center; }
.fd-pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid var(--app-primary); opacity: 0; animation: fdPulse 2.2s infinite ease-out;
}
@keyframes fdPulse {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

/* ---------- ficha / cards ---------- */
.fd-pane {
  background: var(--app-card); border-top: 1px solid var(--app-border);
  padding: 0.8em 0.9em; flex-shrink: 0;
}
/* reserva espaço para o selo final não cobrir conteúdo */
.fd-pane.with-float { padding-bottom: 3.4em; }
.fd-dash.with-float { padding-bottom: 3.2em; }
.fd-pane-h {
  display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.6em;
  font-size: 0.76em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--app-muted);
}
.fd-pane-h svg { width: 1.05em; height: 1.05em; color: var(--app-primary); }
.fd-fields { display: grid; gap: 0.35em; }
.fd-f {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.6em; border-radius: 0.6em;
  background: var(--app-bg); border: 1px solid var(--app-border);
  font-size: 0.9em;
}
.fd-f .k { color: var(--app-muted); flex-shrink: 0; }
.fd-f .v { font-weight: 600; margin-left: auto; text-align: right; white-space: nowrap; }
.fd-f .ck {
  width: 1.25em; height: 1.25em; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; background: hsl(142 60% 38% / 0.14); color: var(--app-success);
}
.fd-f .ck svg { width: 0.8em; height: 0.8em; }

.fd-score { display: flex; align-items: center; gap: 0.6em; margin-top: 0.7em; }
.fd-score .lbl { font-size: 0.8em; color: var(--app-muted); flex-shrink: 0; }
.fd-track { flex: 1; height: 0.5em; border-radius: 999px; background: var(--app-soft); overflow: hidden; }
.fd-track > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--app-primary); transition: width 0.12s linear; }
.fd-score .num { font-weight: 700; font-variant-numeric: tabular-nums; }

.fd-badges { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.7em; }
.fd-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: 0.8em; font-weight: 600; padding: 0.3em 0.7em; border-radius: 999px;
  background: var(--app-soft); color: var(--app-muted);
}
.fd-badge.hot { background: hsl(0 72% 51% / 0.1); color: var(--app-danger); }
.fd-badge.cold { background: hsl(210 80% 52% / 0.12); color: hsl(210 80% 42%); }
.fd-badge.ok { background: hsl(142 60% 38% / 0.12); color: var(--app-success); }
.fd-badge.pri { background: hsl(230 100% 50% / 0.1); color: var(--app-primary); }
.fd-badge svg { width: 0.95em; height: 0.95em; }

/* silêncio / follow-up */
.fd-gap {
  display: flex; align-items: center; gap: 0.6em; margin: 0.2em 0 0.8em;
  color: var(--app-muted); font-size: 0.82em;
}
.fd-gap::before, .fd-gap::after {
  content: ''; flex: 1; height: 0; border-top: 1px dashed var(--app-border);
}
.fd-gap b { font-variant-numeric: tabular-nums; color: var(--app-warning); font-size: 1.15em; }

/* fotos do estoque */
.fd-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.fd-photo {
  border-radius: 0.7em; overflow: hidden; background: var(--app-soft);
  border: 1px solid var(--app-border); position: relative;
}
.fd-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  animation: fdKen 14s infinite alternate ease-in-out;
}
.fd-photo:nth-child(2) img { animation-delay: -4s; }
.fd-photo:nth-child(3) img { animation-delay: -8s; }
@keyframes fdKen {
  from { transform: scale(1.02) translate(0, 0); }
  to { transform: scale(1.12) translate(-1.5%, -2%); }
}
.fd-photo .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.9em 0.45em 0.3em;
  background: linear-gradient(180deg, transparent, rgba(8, 12, 24, 0.78));
  color: #fff; font-size: 0.68em; font-weight: 600; font-variant-numeric: tabular-nums;
  display: flex; justify-content: space-between; gap: 0.3em; white-space: nowrap;
}
.fd-veh {
  display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em;
  font-size: 0.85em; font-weight: 600;
}
.fd-veh svg { width: 1.05em; height: 1.05em; color: var(--app-primary); }
.fd-veh .price { margin-left: auto; color: var(--app-primary); font-variant-numeric: tabular-nums; }

/* modo shadow: dois painéis */
.fd-split { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr auto 1fr; gap: 0; }
.fd-phone {
  min-height: 0; overflow: hidden; position: relative;
  background: hsl(140 20% 96%); border-bottom: 1px solid var(--app-border);
  display: flex; flex-direction: column;
}
.fd-phone-h {
  display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.75em;
  background: hsl(160 45% 26%); color: #fff; font-size: 0.85em; font-weight: 600; flex-shrink: 0;
}
.fd-phone-h img { width: 1.2em; height: 1.2em; }
.fd-phone-h .tail { margin-left: auto; font-weight: 500; opacity: 0.8; font-size: 0.85em; }
.fd-phone-log { flex: 1; min-height: 0; overflow: hidden; padding: 0.6em 0.7em; }
.fd-wbub {
  max-width: 88%; border-radius: 0.7em; padding: 0.5em 0.65em; margin-bottom: 0.5em;
  background: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12); font-size: 0.92em;
}
.fd-wbub.me { background: hsl(96 55% 88%); margin-left: auto; }
.fd-wbub .from { font-size: 0.78em; font-weight: 700; color: hsl(160 50% 32%); margin-bottom: 0.15em; }
.fd-wbub ul { margin: 0.3em 0 0; padding-left: 1.1em; }
.fd-wbub li { margin-bottom: 0.1em; }
.fd-notif {
  position: absolute; left: 0.6em; right: 0.6em; top: 0.6em; z-index: 3;
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.55em 0.7em; border-radius: 0.8em;
  background: rgba(18, 22, 34, 0.94); color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-140%);
  transition: transform 0.5s var(--e), opacity 0.3s ease;
  opacity: 0;
}
.fd-notif.on { transform: none; opacity: 1; }
.fd-notif img { width: 1.6em; height: 1.6em; border-radius: 0.35em; }
.fd-notif .tx { min-width: 0; font-size: 0.82em; }
.fd-notif .tx b { display: block; }
.fd-notif .tx span { opacity: 0.75; }

.fd-bridge {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.4em; background: var(--app-card);
  border-bottom: 1px solid var(--app-border);
  font-size: 0.76em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--app-primary);
}
.fd-bridge svg { width: 1.1em; height: 1.1em; }
.fd-bridge .beam {
  width: 2.4em; height: 2px; border-radius: 2px; overflow: hidden;
  background: hsl(230 100% 50% / 0.15); position: relative;
}
.fd-bridge .beam::after {
  content: ''; position: absolute; inset: 0; width: 45%;
  background: var(--app-primary); animation: fdBeam 1.6s infinite linear;
}
@keyframes fdBeam { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
.fd-crm { min-height: 0; display: flex; flex-direction: column; background: var(--app-bg); }
.fd-crm-h {
  display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0.75em; flex-shrink: 0;
  background: var(--app-card); border-bottom: 1px solid var(--app-border);
  font-size: 0.8em; font-weight: 600; color: var(--app-muted);
}
.fd-crm-h svg { width: 1.05em; height: 1.05em; color: var(--app-primary); }
.fd-crm-h .tail { margin-left: auto; font-weight: 500; }
.fd-mirror {
  display: flex; align-items: flex-start; gap: 0.5em;
  padding: 0.45em 0.6em; border-radius: 0.6em; margin-bottom: 0.4em;
  background: var(--app-card); border: 1px solid var(--app-border); font-size: 0.88em;
}
.fd-mirror .src {
  font-size: 0.72em; font-weight: 700; color: hsl(160 50% 32%);
  background: hsl(160 50% 32% / 0.1); border-radius: 999px; padding: 0.15em 0.5em; flex-shrink: 0;
}

/* pipeline mini */
.fd-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; }
.fd-stage {
  border-radius: 0.6em; border: 1px solid var(--app-border); background: var(--app-bg);
  padding: 0.4em; min-height: 3.4em; position: relative;
}
.fd-stage .st {
  font-size: 0.66em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--app-muted); margin-bottom: 0.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-stage.active { border-color: var(--app-primary); background: hsl(230 100% 50% / 0.06); }
.fd-lead {
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: 0.45em;
  padding: 0.3em 0.4em; font-size: 0.72em; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 40, 120, 0.06);
  display: flex; align-items: center; gap: 0.3em;
}

/* ---------- dashboard ---------- */
.fd-dash { flex: 1; min-height: 0; overflow: hidden; padding: 0.8em; display: flex; flex-direction: column; gap: 0.6em; }
.fd-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.fd-kpi {
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: 0.7em;
  padding: 0.55em 0.65em;
}
.fd-kpi .kl {
  font-size: 0.72em; font-weight: 600; color: var(--app-muted);
  text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.35em;
}
.fd-kpi .kl svg { width: 1.05em; height: 1.05em; color: var(--app-primary); }
.fd-kpi .kv {
  font-size: 1.5em; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  margin-top: 0.1em; display: flex; align-items: baseline; gap: 0.15em;
}
.fd-kpi .kv small { font-size: 0.5em; font-weight: 600; color: var(--app-muted); }
.fd-kpi .kd { font-size: 0.72em; font-weight: 600; color: var(--app-success); display: flex; align-items: center; gap: 0.25em; }
.fd-kpi .kd svg { width: 0.9em; height: 0.9em; }

.fd-card {
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: 0.7em;
  padding: 0.6em 0.7em; flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.fd-card .ch {
  font-size: 0.74em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--app-muted); margin-bottom: 0.5em; display: flex; align-items: center; gap: 0.4em;
}
.fd-card .ch svg { width: 1.05em; height: 1.05em; color: var(--app-primary); }
.fd-funnel { display: grid; gap: 0.35em; }
.fd-fl { display: flex; align-items: center; gap: 0.5em; font-size: 0.82em; }
.fd-fl .fn { width: 6.2em; color: var(--app-muted); flex-shrink: 0; }
.fd-fl .fbar { flex: 1; height: 1.1em; border-radius: 0.35em; background: var(--app-soft); overflow: hidden; }
.fd-fl .fbar > i {
  display: block; height: 100%; width: 0; border-radius: 0.35em;
  background: linear-gradient(90deg, hsl(230 100% 50% / 0.85), hsl(230 100% 62%));
  transition: width 0.12s linear;
}
.fd-fl .fv { width: 2.2em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.fd-chart { display: flex; align-items: stretch; gap: 0.4em; flex: 1; min-height: 4em; }
.fd-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3em; align-items: center; }
.fd-chart i {
  display: block; width: 100%; height: 0; border-radius: 0.3em 0.3em 0 0;
  background: hsl(230 100% 50% / 0.35); transition: height 0.12s linear;
}
.fd-chart .d:last-child i { background: var(--app-primary); }
.fd-chart span { font-size: 0.68em; color: var(--app-muted); font-weight: 600; }

/* ---------- ajustes pela largura da própria cena (não da tela) ---------- */
@container (min-width: 430px) {
  .fd-photos { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 720px) {
  .fd-kpis { grid-template-columns: repeat(4, 1fr); }
}
@container (max-width: 430px) {
  .fd-fl .fn { width: 5.4em; }
  .fd-stage { padding: 0.3em; }
}

@media (prefers-reduced-motion: reduce) {
  .fd [data-at] { transition: none; }
  .fd-photo img, .fd-dots i, .fd-bridge .beam::after, .fd-pulse::after { animation: none; }
}