/* ============================================================
   Site público do PlugueGestao (pluguegestao.com.br)
   Linguagem visual na linha monday.com, identidade PlugueGestao:
   Inter, azul #1296d4, pt-BR. Página de marketing (clara, com
   seções pretas intencionais). Não carrega o app.css do sistema.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --az: #1296d4; --az-d: #0e7cb0; --az-2: #45c0ef;
  --ink: #0b1220; --ink-2: #41506a; --ink-3: #697387;
  --line: #e9ecf3; --soft: #f5f7fb; --white: #fff; --black: #07090e;
  --ok: #0ca678; --doing: #dd7a04; --stuck: #e23047; --wait: #6a40e6; --pink: #e64980;
  --grad: linear-gradient(120deg, var(--az-2), var(--az));
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow: 0 18px 50px rgba(16,24,40,.12);
  --shadow-lg: 0 40px 90px rgba(16,24,40,.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in srgb, var(--az) 24%, transparent); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 13px 24px; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
  transition: transform .08s ease, background .15s, color .15s, border-color .15s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn i { font-size: 13px; transition: transform .15s; }
.btn:hover i.fa-arrow-right { transform: translateX(3px); }
.btn-primary { background: var(--az); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--az) 34%, transparent); }
.btn-primary:hover { background: var(--az-d); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: #d4d9e4; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #eef1f6; }
.btn-outline-az { background: transparent; color: var(--az); border-color: color-mix(in srgb, var(--az) 45%, #fff); }
.btn-outline-az:hover { background: color-mix(in srgb, var(--az) 8%, transparent); }
.btn-lg { font-size: 16.5px; padding: 15px 30px; }
.btn-sm { font-size: 14px; padding: 10px 18px; }

/* ---------- Cabeçalho ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-2); padding: 9px 13px; border-radius: 9px; transition: background .12s, color .12s; }
.nav a:hover { background: var(--soft); color: var(--ink); }
.head-act { display: flex; align-items: center; gap: 10px; flex: none; }
.head-login { font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 9px 12px; }
.head-login:hover { color: var(--az); }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 17px; cursor: pointer; }

/* ---------- Tipografia de display ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--az-d); background: color-mix(in srgb, var(--az) 13%, transparent); padding: 7px 15px; border-radius: 999px; }
.eyebrow.on-dark { color: #bfe5f8; background: rgba(255,255,255,.1); }
.h-hero { font-size: clamp(42px, 6.6vw, 84px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 20px 0 0; }
.h-sec { font-size: clamp(40px, 6vw, 82px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
.h-sub { font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.028em; line-height: 1.06; margin: 0; }
.h-giant { font-size: clamp(40px, 8vw, 104px); font-weight: 800; letter-spacing: -.04em; line-height: .98; margin: 0; }
.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); line-height: 1.5; margin: 22px 0 0; max-width: 620px; }
.sec-eyebrow { font-size: 15px; font-weight: 600; color: var(--ink-3); margin: 0 0 10px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Seções ---------- */
.sec { padding: 92px 0; }
.sec-soft { background: var(--soft); }
.sec-dark { background: var(--black); color: #fff; }
.sec-dark .lead, .sec-dark .sec-eyebrow { color: rgba(255,255,255,.66); }
.sec-tight { padding: 64px 0; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.sec-head { max-width: 760px; }
.center .sec-head { margin: 0 auto; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 40px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 54px; align-items: center; }
.hero-grid > *, .split > *, .numgrid > * { min-width: 0; }
.mock, .mock-board, .mock-chat { max-width: 100%; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 14px; color: var(--ink-3); }
.hero-note i { color: var(--ok); }

/* ---------- Mock de produto (quadro) ---------- */
.mock { position: relative; }
.mock-board { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.mb-top { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.mb-dot { width: 11px; height: 11px; border-radius: 50%; background: #e4e7ee; }
.mb-title { font-weight: 700; font-size: 14.5px; margin-left: 6px; }
.mb-tabs { margin-left: auto; display: flex; gap: 4px; }
.mb-tab { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 5px 11px; border-radius: 7px; }
.mb-tab.on { color: var(--az); background: color-mix(in srgb, var(--az) 11%, transparent); }
.mb-grp { font-size: 12px; font-weight: 700; color: var(--az); padding: 12px 18px 6px; }
.mb-row { display: grid; grid-template-columns: 1.7fr .8fr 1fr .7fr; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid #f1f3f8; font-size: 13px; }
.mb-row .mb-task { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 9px; }
.mb-bar-stripe { width: 4px; height: 20px; border-radius: 3px; flex: none; }
.mb-avs { display: flex; }
.mb-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.mb-av:first-child { margin-left: 0; }
.mb-date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #fff; padding: 5px 10px; border-radius: 7px; width: 100%; white-space: nowrap; }
.pill.ok { background: var(--ok); } .pill.doing { background: var(--doing); } .pill.stuck { background: var(--stuck); } .pill.wait { background: var(--wait); }
.mb-track { height: 7px; border-radius: 999px; background: #eceff4; overflow: hidden; }
.mb-fill { height: 100%; border-radius: 999px; background: var(--az); }

/* Card flutuante (IA / chat) sobre o mock */
.float-card { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px 15px; width: 270px; }
.fc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.fc-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 14px; background: var(--grad); flex: none; }
.fc-name { font-size: 13px; font-weight: 700; }
.fc-tag { font-size: 11px; font-weight: 700; color: var(--az-d); }
.fc-body { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.fc-body b { color: var(--ink); }
.hero .float-card { left: -26px; bottom: 28px; }

/* ---------- Faixa família ---------- */
.fam { display: flex; align-items: center; justify-content: center; gap: 14px 30px; flex-wrap: wrap; }
.fam-lbl { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.fam-chip { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-2); }
.fam-chip span { color: var(--az); }

/* ---------- Abas (o que faz) ---------- */
.tabs { display: flex; gap: 8px; justify-content: center; border-bottom: 1px solid var(--line); margin: 36px 0 0; flex-wrap: wrap; }
.tab { font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink-3); background: none; border: 0; padding: 14px 18px; cursor: pointer; position: relative; }
.tab.on { color: var(--ink); }
.tab.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--az); }
.tabpane { display: none; margin-top: 40px; }
.tabpane.on { display: block; }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 54px; align-items: center; }
.split .lead { margin-top: 16px; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: var(--ink-2); }
.ticks i { color: var(--ok); margin-top: 3px; font-size: 14px; }

/* Mock de chat */
.mock-chat { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; display: grid; gap: 12px; }
.chat-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-row.me { flex-direction: row-reverse; }
.bubble { max-width: 76%; font-size: 13.5px; line-height: 1.45; padding: 10px 13px; border-radius: 14px; }
.bubble.them { background: var(--soft); color: var(--ink); border-bottom-left-radius: 5px; }
.bubble.me { background: var(--az); color: #fff; border-bottom-right-radius: 5px; }
.bubble .mention { color: var(--az); font-weight: 600; }
.bubble.me .mention { color: #d6f0fc; }

/* ---------- Seção preta + fluxo ---------- */
.flow { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 56px; }
.flow-node { background: #12151d; border: 1px solid #222838; border-radius: 14px; padding: 15px 20px; display: flex; align-items: center; gap: 13px; min-width: 300px; }
.flow-node.trigger { background: #12151d; border-color: color-mix(in srgb, var(--ok) 40%, #222838); }
.flow-node.ai { background: linear-gradient(180deg, #141b2b, #101019); border-color: color-mix(in srgb, var(--az) 55%, #222838); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--az) 30%, transparent), 0 18px 40px rgba(0,0,0,.5); }
.flow-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: #fff; flex: none; }
.flow-ic.g { background: color-mix(in srgb, var(--ok) 26%, transparent); color: #6ee7b7; }
.flow-ic.b { background: var(--grad); }
.flow-tt { font-size: 14.5px; font-weight: 600; color: #fff; }
.flow-tt small { display: block; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.55); margin-top: 2px; }
.flow-line { width: 2px; height: 26px; background: linear-gradient(#2a3346, #2a3346); }
.flow-branch { display: flex; gap: 60px; position: relative; }
.flow-branch::before { content: ""; position: absolute; top: -26px; left: 25%; right: 25%; height: 2px; background: #2a3346; }
.flow-col { display: flex; flex-direction: column; align-items: center; }
.flow-chip { font-size: 12px; font-weight: 700; color: #cbd3e1; background: #171c27; border: 1px solid #262d3c; border-radius: 999px; padding: 4px 13px; margin-bottom: 10px; }

/* ---------- Cards de IA (agentes) ---------- */
.agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.agent { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s; }
.agent:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.agent-art { aspect-ratio: 5/4; position: relative; display: grid; place-items: center; }
.agent-art.c1 { background: linear-gradient(150deg, #e7f4fb, #d3ecf9); }
.agent-art.c2 { background: linear-gradient(150deg, #f3edff, #e7dcff); }
.agent-art.c3 { background: linear-gradient(150deg, #e7faf1, #d2f2e3); }
.agent-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-img { width: 88%; margin-left: auto; display: block; }
.agent-body { padding: 20px 22px 24px; }
.agent-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.agent-desc { font-size: 14.5px; color: var(--ink-2); margin: 8px 0 15px; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
.chip i { color: var(--az); font-size: 11px; }

/* ---------- Placeholder de imagem numerado ---------- */
.ph { position: relative; display: grid; place-items: center; gap: 8px; text-align: center;
  background: repeating-linear-gradient(45deg, rgba(18,150,212,.05) 0 12px, rgba(18,150,212,.09) 12px 24px);
  border: 1.5px dashed color-mix(in srgb, var(--az) 45%, #c9d4df); color: var(--az-d); border-radius: 14px; width: 100%; height: 100%; min-height: 150px; padding: 18px; }
.ph-num { width: 46px; height: 46px; border-radius: 50%; background: var(--az); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; box-shadow: 0 6px 18px color-mix(in srgb, var(--az) 35%, transparent); }
.ph-cap { font-size: 13px; font-weight: 600; max-width: 230px; line-height: 1.4; }
.ph-tag { position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--az); background: #fff; border-radius: 6px; padding: 3px 8px; box-shadow: var(--shadow-sm); }
.agent-art .ph { border: none; background: none; }
.agent-art .ph-cap { color: var(--ink-3); }

/* ---------- Pessoas + IA (colaboração) ---------- */
.collab { position: relative; max-width: 760px; margin: 50px auto 0; }
.collab-main { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); min-height: 420px; }
.collab .bub { position: absolute; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.bub .bub-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.bub.done { background: var(--ok); color: #fff; border: none; }
.bub.wa { background: #fff; }
.bub.wa i { color: #25d366; }
.collab .b1 { top: 18%; left: -36px; } .collab .b2 { top: 8%; right: -30px; }
.collab .b3 { bottom: 20%; left: -46px; } .collab .b4 { bottom: 12%; right: -40px; }

/* ---------- Grade de recursos ---------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.feat { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: #fff; transition: border-color .15s, transform .15s; }
.feat:hover { transform: translateY(-3px); border-color: #d9e0ec; }
.feat-ic { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: var(--az); background: color-mix(in srgb, var(--az) 11%, transparent); }
.feat h3 { font-size: 17px; font-weight: 700; margin: 1px 0 6px; letter-spacing: -.01em; align-self: start; }
.feat p { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* ---------- Lista numerada (preta) ---------- */
.numlist { display: grid; gap: 40px; margin-top: 10px; }
.num { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding-bottom: 36px; border-bottom: 1px solid #1c2230; }
.num:last-child { border-bottom: 0; }
.num-n { font-size: 46px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.num-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #cbd3e1; background: #171c27; border: 1px solid #262d3c; border-radius: 7px; padding: 3px 10px; margin-bottom: 10px; }
.num h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.num p { font-size: 15.5px; color: rgba(255,255,255,.62); margin: 0; line-height: 1.55; max-width: 560px; }
.numgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* ---------- CTA final ---------- */
.cta { background: var(--black); color: #fff; text-align: center; overflow: hidden; }
.cta .wrap { position: relative; }
.cta .h-giant { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-sub { font-size: clamp(17px,1.6vw,22px); color: rgba(255,255,255,.72); margin: 18px 0 32px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Rodapé ---------- */
.foot { background: #0a0c12; color: rgba(255,255,255,.62); padding: 64px 0 40px; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand img { height: 30px; filter: brightness(0) invert(1); opacity: .95; }
.foot-brand p { font-size: 14px; margin: 16px 0 0; max-width: 280px; line-height: 1.55; }
.foot-col h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; }
.foot-col a { display: block; font-size: 14.5px; color: rgba(255,255,255,.62); padding: 6px 0; transition: color .12s; }
.foot-col a:hover { color: #fff; }
.foot-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid #1a1e28; font-size: 13px; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: grid; place-items: center; }
  .hero-grid, .split, .numgrid { grid-template-columns: 1fr; gap: 40px; }
  .hero .float-card { right: 0; }
  .agents, .feats { grid-template-columns: 1fr 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .sec { padding: 68px 0; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .head-act .btn { display: none; }
  .agents, .feats { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .flow-branch { flex-direction: column; gap: 26px; }
  .flow-branch::before { display: none; }
  .collab .bub { position: static; margin: 8px auto 0; width: fit-content; }
  .hero-cta .btn, .cta-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Componentes v2: board rico, showcase central, banda colorida,
   cartões de valor coloridos e fundos de seção tingidos.
   ============================================================ */

/* Fundos de seção tingidos (várias cores) */
.sec-blue { background: linear-gradient(180deg, #eef7fd, #e3f1fb); }
.sec-purple { background: linear-gradient(180deg, #f5f1ff, #ebe3fb); }
.sec-pink { background: linear-gradient(180deg, #fdf0f6, #fbe3ee); }
.sec-green { background: linear-gradient(180deg, #ecfaf3, #ddf4e9); }

/* ---------- Board rico (mock de sistema estilo monday) ---------- */
.board { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.board-bar { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.board-dots { display: flex; gap: 5px; }
.board-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e4e7ee; display: block; }
.board-name { font-weight: 800; font-size: 14px; letter-spacing: -.01em; margin-left: 4px; }
.board-tabs { display: flex; gap: 2px; margin-left: 8px; }
.board-tabs span { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 5px 10px; border-radius: 7px; white-space: nowrap; }
.board-tabs span.on { color: var(--az); background: color-mix(in srgb, var(--az) 11%, transparent); }
.board-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--az-d); background: color-mix(in srgb, var(--az) 10%, transparent); padding: 5px 10px; border-radius: 7px; white-space: nowrap; }
.board-head, .board-row { display: grid; grid-template-columns: 1.85fr .7fr 1.4fr 1.08fr .62fr; gap: 12px; align-items: center; }
.board-head { padding: 9px 16px; background: var(--soft); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.board-grp { display: flex; align-items: center; gap: 8px; padding: 12px 16px 7px; font-weight: 800; font-size: 12.5px; color: var(--ink); }
.board-grp .gdot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.board-grp .gcount { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.board-row { padding: 9px 16px; border-top: 1px solid #f1f3f8; font-size: 12.5px; }
.b-task { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-stripe { width: 4px; height: 18px; border-radius: 3px; flex: none; }
.b-check { width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid #cfd6e2; flex: none; }
.b-check.done { background: var(--ok); border-color: var(--ok); position: relative; }
.b-check.done::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 8px; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; }
.b-avs { display: flex; align-items: center; }
.b-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.b-av:first-child { margin-left: 0; }
.b-timeline { height: 8px; border-radius: 999px; background: #eef1f6; position: relative; overflow: hidden; }
.b-timeline i { height: 100%; border-radius: 999px; display: block; }
.b-date { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.board-add { padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--ink-3); border-top: 1px solid #f1f3f8; display: flex; align-items: center; gap: 7px; }

/* ---------- Showcase: quadro só no centro (fundo tingido) ---------- */
.showcase { max-width: 1040px; margin: 48px auto 0; position: relative; }
.showcase .float-card { right: -14px; top: -22px; }

/* ---------- Banda colorida lado a lado (full-bleed) ---------- */
.band { border-radius: 26px; overflow: hidden; color: #fff; }
.band-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; padding: 52px 54px; }
.band.wa { background: linear-gradient(135deg, #0ea86a, #15b886); }
.band.az { background: linear-gradient(135deg, var(--az), #0a6ba2); }
.band.roxo { background: linear-gradient(135deg, #7c4dff, #6a40e6); }
.band-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); padding: 7px 14px; border-radius: 999px; }
.band h3 { font-size: clamp(30px, 4vw, 54px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; margin: 16px 0 0; }
.band p { font-size: 17px; opacity: .92; margin: 16px 0 0; line-height: 1.5; max-width: 460px; }
.band .btn { margin-top: 24px; }
.band-ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.band-ticks li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.band-ticks i { opacity: .9; }
.band-art { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 18px; }
.wa-chat { display: grid; gap: 10px; }
.wa-row { display: flex; }
.wa-row.me { justify-content: flex-end; }
.wa-bubble { max-width: 82%; font-size: 13.5px; line-height: 1.45; padding: 10px 13px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wa-bubble.me { background: #dcf8c6; color: #0b1f12; }
.wa-bubble small { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; text-align: right; }

/* ---------- Cartões de valor coloridos (várias cores) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
.stat { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-content: space-between; border-radius: 18px; padding: 24px 22px 22px; color: #fff; min-height: 178px; }
.stat .s-ic { grid-column: 1; align-self: start; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 18px; }
.stat .s-big { grid-column: 2; align-self: center; font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.stat .s-txt { grid-column: 1 / -1; font-size: 14px; opacity: .94; margin: 0; line-height: 1.4; }
.stat.c-az { background: linear-gradient(150deg, #19a3e0, #0a6ba2); }
.stat.c-roxo { background: linear-gradient(150deg, #8b5cf6, #6a40e6); }
.stat.c-verde { background: linear-gradient(150deg, #19c399, #0ca678); }
.stat.c-rosa { background: linear-gradient(150deg, #f25c9c, #e23a7d); }

@media (max-width: 960px) {
  .band-grid { grid-template-columns: 1fr; gap: 30px; padding: 40px 34px; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; }
  .board-head span:nth-child(4), .board-row > *:nth-child(4) { display: none; }
  .board-head, .board-row { grid-template-columns: 1.7fr .7fr 1fr .7fr; }
  .showcase .float-card { position: static; margin: 0 auto -10px; width: 100%; max-width: 300px; }
}

/* ---------- Fluxo de automação (árvore estilo monday) ---------- */
.flow2 { display: flex; flex-direction: column; align-items: center; margin-top: 50px; }
.fl-node { position: relative; display: flex; align-items: center; gap: 13px; width: 340px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); padding: 15px 17px; }
.fl-node.ai { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #1296d4, #7c4dff, #e64980, #45c0ef) border-box; box-shadow: 0 12px 30px rgba(16,24,40,.1); }
.fl-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; color: var(--ink-2); background: var(--soft); flex: none; }
.fl-ic.grad { background: linear-gradient(135deg, #1296d4, #7c4dff); color: #fff; }
.fl-ic.wa { background: #e6f8ef; color: #12b886; }
.fl-tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.fl-tx small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.fl-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; display: grid; place-items: center; color: #fff; font-size: 11px; z-index: 3; box-shadow: 0 3px 8px rgba(16,24,40,.18); }
.fl-badge.hex { background: #12b886; clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); }
.fl-badge.dia { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #7c4dff, #1296d4); transform: translateX(-50%) rotate(45deg); }
.fl-badge.dia i { transform: rotate(-45deg); }
.fl-line { width: 2px; height: 24px; background: #d7deea; }
.fl-line.sm { height: 18px; }
.fl-line.dashed { width: 0; height: 22px; background: none; border-left: 2px dashed #cdd5e2; }
.fl-split { display: grid; grid-template-columns: 1fr 1fr; position: relative; padding-top: 46px; width: 100%; max-width: 760px; }
.fl-split::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 23px; background: #d7deea; }
.fl-split::before { content: ""; position: absolute; top: 23px; left: 25%; right: 25%; height: 2px; background: #d7deea; }
.fl-branch { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 12px; }
.fl-branch::before { content: ""; position: absolute; top: -23px; left: 50%; transform: translateX(-50%); width: 2px; height: 23px; background: #d7deea; }
.fl-pill { position: relative; z-index: 2; font-size: 12px; font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.fl-plus { width: 30px; height: 30px; border-radius: 9px; border: 1.5px dashed #c6cedb; background: #fff; color: var(--ink-3); display: grid; place-items: center; font-size: 13px; cursor: default; }
@media (max-width: 760px) {
  .fl-split { grid-template-columns: 1fr; gap: 10px; padding-top: 24px; max-width: 360px; }
  .fl-split::before { display: none; }
  .fl-branch::before { display: none; }
  .fl-branch { padding: 0; margin-top: 16px; }
}

/* ---------- Passos (comece em poucos passos, estilo monday) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; align-items: stretch; }
.step { display: flex; flex-direction: column; background: linear-gradient(180deg, #eef7fd, #e3f1fb); border: 1px solid #d9e9f6; border-radius: 20px; padding: 28px 26px 26px; }
.step-h { display: flex; align-items: baseline; gap: 9px; font-size: 18.5px; font-weight: 800; color: var(--ink); letter-spacing: -.015em; }
.step-h .step-n { color: var(--az); }
.step-h .step-sep { color: #9ec3dd; font-weight: 600; }
.step-d { font-size: 14.5px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.5; }
.step-art { margin-top: auto; padding-top: 26px; }
.sm-input { background: #fff; border: 1.5px solid var(--az-2); border-radius: 12px; padding: 13px 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; box-shadow: 0 0 0 4px color-mix(in srgb, var(--az) 10%, transparent); }
.sm-int { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.sm-int-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sm-int-row + .sm-int-row { border-top: 1px solid var(--line); }
.sm-int-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: #fff; flex: none; }
.sm-toggle { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: #d7deea; position: relative; flex: none; }
.sm-toggle.on { background: var(--ok); }
.sm-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.sm-toggle.on::after { left: 16px; }
.sm-mascote { margin-bottom: 0; position: relative; z-index: 2; }
.sm-plan { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 15px; }
.sm-plan-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sm-plan-av { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.sm-plan-h b { font-size: 13.5px; color: var(--ink); }
.sm-plan-sub { font-size: 12.5px; color: var(--ink-3); }
.sm-plan ul { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; gap: 9px; }
.sm-plan li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.sm-plan li i { color: var(--ok); font-size: 13px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Marquee de pessoas e contextos (estilo monday) ---------- */
.marquee-sec { position: relative; overflow: hidden; padding: 72px 0; min-height: 660px; display: flex; flex-direction: column; justify-content: center; }
.marquee-rows { display: flex; flex-direction: column; gap: 18px; }
.marquee-row { display: flex; align-items: center; gap: 14px; width: max-content; animation: mq 52s linear infinite; }
.marquee-row.rev { animation-direction: reverse; }
.marquee-row.s1 { animation-duration: 44s; }
.marquee-row.s2 { animation-duration: 62s; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-chip { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 13px; font-size: 15px; font-weight: 700; white-space: nowrap; flex: none; }
.mq-chip.az { background: #1296d4; color: #fff; }
.mq-chip.verde { background: #12b886; color: #fff; }
.mq-chip.amarelo { background: #fdeec2; color: #8a6508; }
.mq-chip.azc { background: #d9e9fb; color: #1d5a98; }
.mq-avs { display: inline-flex; align-items: center; flex: none; }
.mq-avs .a, .mq-avs .more { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; margin-left: -13px; display: grid; place-items: center; font-size: 12px; font-weight: 700; box-shadow: var(--shadow-sm); }
.mq-avs .a { color: #fff; }
.mq-avs .a:first-child { margin-left: 0; }
.mq-avs .more { background: #eef1f6; color: var(--ink-3); }
.mq-ic { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-size: 18px; flex: none; }
.marquee-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px; }
.marquee-center::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, 98%); height: 600px; background: radial-gradient(ellipse at center, #fff 46%, rgba(255,255,255,.92) 62%, transparent 80%); }
.marquee-content { position: relative; text-align: center; max-width: 620px; }
.marquee-content .lead { margin: 16px auto 0; }
.mq-panel { width: min(560px, 100%); margin: 22px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; text-align: left; }
.mq-panel-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mq-kpi { background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.mq-kpi span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.mq-kpi b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-top: 2px; }
.mq-ia-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: color-mix(in srgb, var(--az) 9%, #fff); border-radius: 12px; padding: 11px 13px; font-size: 13px; color: var(--ink-2); }
.mq-ia-line .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.mq-ia-line b { color: var(--ink); }
.marquee-content .btn { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .marquee-row { animation: none; } }
@media (max-width: 620px) {
  .marquee-sec { min-height: 740px; }
  .mq-chip { font-size: 13.5px; height: 42px; padding: 0 16px; }
  .mq-ic, .mq-avs .a, .mq-avs .more { width: 38px; height: 38px; }
  .mq-panel-kpis { gap: 8px; }
  .mq-kpi { padding: 10px 11px; }
}

/* ---------- CTA final (faixa em gradiente full-bleed com glow + chips) ---------- */
.cta2 { position: relative; overflow: hidden; padding: 70px 0 74px; text-align: center; color: #fff;
  background: radial-gradient(130% 130% at 50% -10%, #1aa7e8 0%, #0d6aa6 26%, #0a3a5e 50%, #061a2d 76%, #040f1c 100%); }
.cta2::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.11) 1.3px, transparent 1.3px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 82% 86% at 50% 44%, #000 22%, transparent 76%);
  mask-image: radial-gradient(ellipse 82% 86% at 50% 44%, #000 22%, transparent 76%); }
.cta2-glow { position: absolute; z-index: 0; top: -180px; left: 50%; transform: translateX(-50%); width: 860px; max-width: 94%; height: 460px;
  background: radial-gradient(ellipse at center, rgba(90,200,245,.5), rgba(90,200,245,0) 70%); filter: blur(22px); pointer-events: none; }
.cta2-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.cta2 .eyebrow { background: rgba(255,255,255,.14); color: #d6f1fc; }
.cta2 .h-giant { margin-top: 14px; padding-bottom: .12em; line-height: 1.02; font-size: clamp(44px, 9.4vw, 120px);
  background: linear-gradient(118deg, #ffffff 24%, #7fd8f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta2-sub { font-size: clamp(16px, 1.5vw, 20px); color: rgba(255,255,255,.78); margin: 12px auto 28px; max-width: 540px; line-height: 1.5; }
.cta2-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta2-trust { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; color: rgba(255,255,255,.6); }
.cta2-fam { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.cta2-fam span { font-size: 14px; font-weight: 800; color: rgba(255,255,255,.52); letter-spacing: -.01em; }
.cta2-fam span b { color: #8bd6f5; font-weight: 800; }
.cta2-float { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(7px); box-shadow: 0 12px 34px rgba(0,0,0,.26); }
.cta2-float.done { background: rgba(14,166,120,.92); border-color: transparent; }
.cta2-float.doing { background: rgba(221,122,4,.92); border-color: transparent; }
.cta2-float .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.cta2-float.f1 { top: 56px; left: 4%; transform: rotate(-4deg); }
.cta2-float.f2 { top: 104px; right: 5%; transform: rotate(4deg); }
.cta2-float.f3 { bottom: 70px; left: 6%; transform: rotate(3deg); }
.cta2-float.f4 { bottom: 104px; right: 5%; transform: rotate(-3deg); }
.cta2-float.f5 { top: 46%; left: 1.5%; transform: rotate(3deg); }
.cta2-float.f6 { top: 42%; right: 1.5%; transform: rotate(-3deg); }
.cta2-float.f7 { top: 168px; left: 11%; transform: rotate(5deg); }
.cta2-float.f8 { bottom: 160px; right: 11%; transform: rotate(-5deg); }
.cta2-float.f9 { top: 26%; right: 13%; transform: rotate(4deg); }
@media (max-width: 1100px) { .cta2-float { display: none; } }
@media (max-width: 620px) { .cta2 { padding: 48px 0 52px; } }