/* ==========================================================
   SmartForms — página dedicada (complementa css/style.css)
   Prefixo sf-  |  usa as variáveis do tema (dark/light)
   ========================================================== */
:root {
  --sf-ok: #34d399;
  --sf-warn: #fbbf24;
  --sf-bad: #f87171;
  --sf-info: #60a5fa;
}
.lm {
  --sf-ok: #059669;
  --sf-warn: #b45309;
  --sf-bad: #dc2626;
  --sf-info: #2563eb;
}

/* ---------- utilitários ---------- */
.sf-eyebrow-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 100px; font-size: .78rem; font-weight: 600;
  background: var(--sf); border: 1px solid var(--bd2); color: var(--tx2);
}
.sf-chip i { color: var(--pur); }
.sf-mut { color: var(--tx2); }
.sf-sm { font-size: .875rem; }
.sf-xs { font-size: .8rem; }
.sf-divider { border: 0; border-top: 1px solid var(--bd); margin: 0; }
.sf-icobox {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; border: 1px solid transparent;
}
.sf-icobox.red   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.22);  color: #f87171; }
.sf-icobox.amber { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); color: #fbbf24; }
.sf-icobox.violet{ background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.25); color: #a78bfa; }
.sf-icobox.blue  { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.22); color: #60a5fa; }
.sf-icobox.green { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.22); color: #34d399; }
.sf-icobox.pink  { background: rgba(236,72,153,.12); border-color: rgba(236,72,153,.22); color: #f472b6; }
.lm .sf-icobox.red   { color: #dc2626; }
.lm .sf-icobox.amber { color: #b45309; }
.lm .sf-icobox.violet{ color: #7c3aed; }
.lm .sf-icobox.blue  { color: #2563eb; }
.lm .sf-icobox.green { color: #059669; }
.lm .sf-icobox.pink  { color: #db2777; }
.lm .ftag { color: #6d28d9; }
.lm .hbadge { color: #6d28d9; }

/* ---------- hero ---------- */
#sf-hero { padding-bottom: 40px; }
.sf-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 880px; margin: 34px auto 0;
}
.sf-hero-stat {
  background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 16px 12px; text-align: center;
}
.sf-hero-stat b { display: block; font-size: 1rem; font-weight: 700; }
.sf-hero-stat span { font-size: .74rem; color: var(--tx3); }
@media (max-width: 767px) { .sf-hero-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- mockup base ---------- */
.sf-app { display: grid; grid-template-columns: 190px 1fr; min-height: 420px; font-size: .78rem; text-align: left; }
.sf-side { background: var(--bg2); border-right: 1px solid var(--bd); padding: 14px 10px; }
.sf-side .sf-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 4px 8px 14px; font-size: .86rem; }
.sf-side .sf-brand i { width: 26px; height: 26px; border-radius: 8px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.sf-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--tx3); margin-bottom: 3px; }
.sf-nav i { width: 15px; text-align: center; }
.sf-nav.on { background: rgba(139,92,246,.14); color: #a78bfa; font-weight: 600; }
.lm .sf-nav.on { color: #6d28d9; }
.sf-main { padding: 18px; background: var(--sf); min-width: 0; }
.sf-main h6 { font-size: .86rem; font-weight: 700; margin: 0 0 4px; }
.sf-main .sf-sub { color: var(--tx3); font-size: .72rem; margin-bottom: 14px; }
@media (max-width: 991px) { .sf-app { grid-template-columns: minmax(0, 1fr); } .sf-side { display: none; } }

.sf-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; }
@media (max-width: 767px) { .sf-split { grid-template-columns: 1fr; } }

.sf-panel { background: var(--bg2); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; min-width: 0; }
.sf-panel-t { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

/* campos de formulário (mock) */
.sf-field { margin-bottom: 10px; }
.sf-field label { display: block; font-size: .68rem; font-weight: 600; color: var(--tx2); margin-bottom: 4px; }
.sf-field label em { color: var(--sf-bad); font-style: normal; }
.sf-input {
  height: 28px; border-radius: 7px; border: 1px solid var(--bd2); background: var(--bg); padding: 0 9px;
  display: flex; align-items: center; justify-content: space-between; color: var(--tx3); font-size: .7rem; overflow: hidden; white-space: nowrap;
}
.sf-input.tall { height: 48px; align-items: flex-start; padding-top: 7px; }
.sf-input.ok { border-color: rgba(52,211,153,.5); color: var(--tx); }
.sf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-tag-calc { font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 100px; background: rgba(59,130,246,.15); color: var(--sf-info); }
.sf-tag-erp { font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 100px; background: rgba(139,92,246,.16); color: #a78bfa; }
.lm .sf-tag-erp { color: #6d28d9; }

/* paleta do construtor */
.sf-pal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sf-pal span { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--bd2); font-size: .68rem; color: var(--tx2); }
.sf-pal span i { color: var(--pur); width: 12px; text-align: center; }
.sf-drop { border: 1.5px dashed rgba(139,92,246,.55); border-radius: 10px; padding: 9px; margin-top: 8px; text-align: center; color: #a78bfa; font-size: .68rem; background: rgba(139,92,246,.06); }

/* ---------- status / badges ---------- */
.sf-st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 100px; font-size: .66rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.sf-st.s-open  { background: rgba(96,165,250,.14); color: var(--sf-info); border-color: rgba(96,165,250,.3); }
.sf-st.s-work  { background: rgba(251,191,36,.14); color: var(--sf-warn); border-color: rgba(251,191,36,.3); }
.sf-st.s-appr  { background: rgba(139,92,246,.16); color: #a78bfa; border-color: rgba(139,92,246,.32); }
.sf-st.s-ok    { background: rgba(52,211,153,.14); color: var(--sf-ok); border-color: rgba(52,211,153,.3); }
.sf-st.s-bad   { background: rgba(248,113,113,.14); color: var(--sf-bad); border-color: rgba(248,113,113,.3); }
.sf-st.s-ia    { background: rgba(236,72,153,.13); color: #f472b6; border-color: rgba(236,72,153,.3); }
.lm .sf-st.s-appr { color: #6d28d9; }
.lm .sf-st.s-ia { color: #db2777; }

/* ---------- workflow (SVG) ---------- */
.sf-flow { width: 100%; height: auto; display: block; }
.sf-flow .n { fill: var(--sf); stroke: var(--bd2); stroke-width: 1.2; }
.sf-flow .n-appr { stroke: rgba(139,92,246,.7); }
.sf-flow .n-ia { stroke: rgba(236,72,153,.7); }
.sf-flow .n-auto { stroke: rgba(59,130,246,.7); }
.sf-flow .n-end { stroke: rgba(52,211,153,.7); }
.sf-flow .n-bad { stroke: rgba(248,113,113,.7); }
.sf-flow text { fill: var(--tx); font-family: "Space Grotesk", sans-serif; font-size: 11.5px; font-weight: 600; }
.sf-flow text.s { fill: var(--tx3); font-size: 9.5px; font-weight: 500; }
.sf-flow .e { fill: none; stroke: var(--tx3); stroke-width: 1.4; opacity: .75; }
.sf-flow .e-d { stroke-dasharray: 4 4; }
.sf-flow .e-ok { stroke: var(--sf-ok); opacity: 1; }
.sf-flow .e-bad { stroke: var(--sf-bad); opacity: 1; }
.sf-flow .lbl { font-size: 9.5px; font-weight: 700; }
.sf-flow .lbl-ok { fill: var(--sf-ok); }
.sf-flow .lbl-bad { fill: var(--sf-bad); }
.sf-flow .ico { font-size: 12px; }

/* ---------- ticket (mock) ---------- */
.sf-ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sf-ticket-head h6 { margin: 0; font-size: .92rem; }
.sf-steps { display: flex; align-items: center; margin: 4px 0 16px; }
.sf-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; font-size: .64rem; color: var(--tx3); text-align: center; max-width: 74px; }
.sf-step b { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .62rem; background: var(--bg); border: 1.5px solid var(--bd2); color: var(--tx3); }
.sf-step.done b { background: var(--sf-ok); border-color: var(--sf-ok); color: #fff; }
.sf-step.cur b { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(139,92,246,.2); }
.sf-step.cur { color: var(--tx); font-weight: 700; }
.sf-step-line { flex: 1; height: 2px; background: var(--bd2); margin: 0 4px 18px; min-width: 14px; }
.sf-step-line.done { background: var(--sf-ok); }
.sf-cmt { display: flex; gap: 9px; margin-bottom: 10px; }
.sf-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: #fff; background: var(--grad); }
.sf-av.ia { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.sf-av.u { background: #475569; }
.sf-bub { background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; padding: 8px 10px; font-size: .7rem; color: var(--tx2); line-height: 1.5; flex: 1; min-width: 0; }
.sf-bub b { color: var(--tx); }
.sf-bub .sf-who { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; font-size: .66rem; color: var(--tx3); }
.sf-bub.ia { border-color: rgba(236,72,153,.28); background: rgba(236,72,153,.05); }
.sf-sla { height: 7px; border-radius: 100px; background: var(--bg); border: 1px solid var(--bd); overflow: hidden; }
.sf-sla i { display: block; height: 100%; background: linear-gradient(90deg, var(--sf-ok), var(--sf-warn)); border-radius: 100px; }
.sf-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sf-meta div { background: var(--bg); border: 1px solid var(--bd); border-radius: 9px; padding: 7px 9px; }
.sf-meta small { display: block; color: var(--tx3); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.sf-meta span { font-size: .72rem; font-weight: 700; }
.sf-hist { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--bd2); }
.sf-hist li { position: relative; padding: 0 0 10px 12px; font-size: .7rem; color: var(--tx2); }
.sf-hist li::before { content: ""; position: absolute; left: -20px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--pur); border: 2px solid var(--sf); }
.sf-hist li small { display: block; color: var(--tx3); font-size: .62rem; }

/* tabela (auditoria / governança) */
.sf-tbl { width: 100%; border-collapse: collapse; font-size: .7rem; }
.sf-tbl th { text-align: left; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); padding: 6px 8px; border-bottom: 1px solid var(--bd2); }
.sf-tbl td { padding: 8px; border-bottom: 1px solid var(--bd); color: var(--tx2); vertical-align: middle; }
.sf-tbl tr:last-child td { border-bottom: 0; }
.sf-tbl td b { color: var(--tx); }

/* ---------- abas de recursos ---------- */
.sf-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; border: 0; }
.sf-tabs .nav-link {
  border: 1px solid var(--bd2) !important; border-radius: 100px !important; padding: 9px 18px !important;
  font-size: .86rem; font-weight: 600; background: var(--sf) !important; color: var(--tx2) !important;
}
.sf-tabs .nav-link.active { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 8px 24px rgba(139,92,246,.35); }
.sf-tabs .nav-link i { margin-right: 7px; }
.sf-tabpane h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; }
.sf-tabpane .lead-p { color: var(--tx2); font-size: .98rem; margin-bottom: 20px; }
.sf-tabpane .pfl { font-size: .9rem; color: var(--tx2); }
.sf-tabpane .pfl b { color: var(--tx); }

/* ---------- antes x depois ---------- */
.sf-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 767px) { .sf-vs { grid-template-columns: 1fr; } }
.sf-vs-col { border-radius: 20px; padding: 26px; border: 1px solid var(--bd); background: var(--sf); }
.sf-vs-col.before { border-color: rgba(248,113,113,.28); }
.sf-vs-col.after { border-color: rgba(52,211,153,.4); background: linear-gradient(180deg, rgba(52,211,153,.07), var(--sf) 60%); }
.sf-vs-col h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.sf-vs-col ul { list-style: none; padding: 0; margin: 0; }
.sf-vs-col li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--tx2); padding: 9px 0; border-bottom: 1px solid var(--bd); }
.sf-vs-col li:last-child { border-bottom: 0; }
.sf-vs-col.before li i { color: var(--sf-bad); margin-top: 3px; }
.sf-vs-col.after li i { color: var(--sf-ok); margin-top: 3px; }

/* ---------- governança ---------- */
.sf-gov-card { height: 100%; padding: 26px; position: relative; overflow: hidden; }
.sf-gov-card .sf-big { position: absolute; right: -6px; top: -14px; font-size: 5.2rem; font-weight: 700; opacity: .06; line-height: 1; }
.sf-gov-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.sf-gov-card p { font-size: .875rem; color: var(--tx2); margin-bottom: 14px; }
.sf-gov-card ul { list-style: none; padding: 0; margin: 0; }
.sf-gov-card li { font-size: .82rem; color: var(--tx2); padding: 4px 0 4px 20px; position: relative; }
.sf-gov-card li::before { content: "\f00c"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: .64rem; color: var(--sf-ok); }

/* ---------- automações (linha do fluxo) ---------- */
.sf-chain { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0; }
.sf-link { display: flex; align-items: center; color: var(--tx3); padding: 0 6px; }
.sf-node { background: var(--sf); border: 1px solid var(--bd2); border-radius: 14px; padding: 14px 16px; min-width: 150px; text-align: center; }
.sf-node i { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.sf-node b { display: block; font-size: .84rem; }
.sf-node small { color: var(--tx3); font-size: .7rem; }
.sf-node.t-card i { color: var(--sf-info); }
.sf-node.t-appr { border-color: rgba(139,92,246,.5); } .sf-node.t-appr i { color: #a78bfa; }
.sf-node.t-auto { border-color: rgba(59,130,246,.45); } .sf-node.t-auto i { color: var(--sf-info); }
.sf-node.t-ia { border-color: rgba(236,72,153,.5); } .sf-node.t-ia i { color: #f472b6; }
.sf-node.t-end { border-color: rgba(52,211,153,.5); } .sf-node.t-end i { color: var(--sf-ok); }
@media (max-width: 991px) { .sf-link { display: none; } .sf-chain { gap: 10px; } .sf-node { flex: 1 1 140px; } }

/* ---------- casos de uso ---------- */
.sf-case { height: 100%; padding: 24px; display: flex; flex-direction: column; }
.sf-case h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.sf-case p { font-size: .84rem; color: var(--tx2); }
.sf-case .sf-flowline { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: .68rem; color: var(--tx3); }
.sf-case .sf-flowline span { padding: 3px 9px; border-radius: 100px; background: var(--bg2); border: 1px solid var(--bd2); color: var(--tx2); font-weight: 600; }
.sf-case .sf-flowline i { font-size: .6rem; }

/* ---------- integrações ---------- */
.sf-int { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.sf-int i { font-size: 1.15rem; color: var(--pur); width: 26px; text-align: center; }
.sf-int b { display: block; font-size: .88rem; }
.sf-int small { color: var(--tx3); font-size: .74rem; }

/* ---------- calculadora ---------- */
.sf-calc { padding: 32px; }
.sf-calc label { font-size: .8rem; font-weight: 600; color: var(--tx2); display: flex; justify-content: space-between; margin-bottom: 8px; }
.sf-calc label output { color: var(--tx); font-weight: 700; }
.sf-calc input[type=range] { width: 100%; accent-color: #8b5cf6; margin-bottom: 20px; }
.sf-calc .sf-res { background: var(--bg2); border: 1px solid var(--bd2); border-radius: 16px; padding: 22px; height: 100%; }
.sf-calc .sf-res .big { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.1; }
.sf-calc .sf-res small { color: var(--tx3); font-size: .74rem; }
.sf-res-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bd); font-size: .85rem; color: var(--tx2); }
.sf-res-row:last-of-type { border-bottom: 0; }
.sf-res-row b { color: var(--tx); }
.sf-note { font-size: .72rem; color: var(--tx3); margin-top: 12px; }

/* ---------- implantação ---------- */
.sf-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: sfstep; }
@media (max-width: 991px) { .sf-timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .sf-timeline { grid-template-columns: 1fr; } }
.sf-tl { padding: 24px; position: relative; counter-increment: sfstep; }
.sf-tl::before {
  content: counter(sfstep, decimal-leading-zero); position: absolute; top: 14px; right: 18px;
  font-size: 2.2rem; font-weight: 700; opacity: .1; line-height: 1;
}
.sf-tl h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.sf-tl p { font-size: .82rem; color: var(--tx2); margin-bottom: 12px; }
.sf-tl .pfl { font-size: .8rem; margin-bottom: 7px; }

/* ---------- barra de CTA fixa ---------- */
#sf-sticky {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 1040;
  background: var(--sf); border: 1px solid var(--bd2); border-radius: 100px; padding: 8px 8px 8px 22px;
  display: flex; align-items: center; gap: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.45); transition: transform .4s;
  max-width: calc(100vw - 110px);
}
#sf-sticky.show { transform: translate(-50%, 0); }
#sf-sticky span { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575px) { #sf-sticky span { display: none; } #sf-sticky { padding: 8px; left: 16px; transform: translate(0, 140%); } #sf-sticky.show { transform: none; } }

/* ---------- misc ---------- */
.sf-quote { border-left: 3px solid var(--pur); padding: 4px 0 4px 18px; font-size: 1.05rem; color: var(--tx2); }
.sf-quote b { color: var(--tx); }
.sf-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.sf-sec-alt { background: var(--bg2); }
.sf-sec-alt2 { background: var(--bg3); }
.sf-scroll-mt { scroll-margin-top: 84px; }
section[id] { scroll-margin-top: 68px; }
@media (prefers-reduced-motion: reduce) { .rv { transition: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* separador "›" entre as etapas dos casos de uso */
.sf-case .sf-flowline span:not(:last-child)::after { content: "\203A"; margin-left: 7px; color: var(--tx3); font-weight: 700; }
.sf-case .sf-flowline { gap: 6px; }
.sf-case .sf-flowline span { white-space: nowrap; }
.nav-link { white-space: nowrap; }

/* mobile: os brilhos (.aur) saem da tela e alargavam o viewport no celular */
html { overflow-x: hidden; }
#landing { overflow-x: clip; }
.sf-main { overflow-x: auto; }
.sf-ticket-head > .sf-st { flex-shrink: 0; }
@media (max-width: 575px) {
  .sf-main { padding: 12px !important; }
  .sf-chain .sf-node { flex: 1 1 100%; }
  .sf-calc { padding: 20px; }
  .sf-vs-col { padding: 20px; }
}
.sf-split > * { min-width: 0; }
.sf-hist li { overflow-wrap: anywhere; }
@media (max-width: 767px) { .sf-flow-wide { min-width: 640px; } }