/* Automação: flow builder com nós vivos e log de execução, antes x depois com relógio, capacidades e ferramentas. */
.automacao{background:var(--o-ink)}

.a-hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,88px) 0 clamp(64px,8vw,104px)}
.a-hero-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 70%,#000,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 70%,#000,transparent 80%)}
.a-hero-top{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.a-hero h1{font-size:clamp(38px,4.6vw,66px);line-height:1;letter-spacing:-.035em}
.a-hero .o-lede{margin-top:0}
.a-hero .o-cta-row{margin-top:22px}
.a-builder-bar .o-tag{flex-shrink:0}

.a-builder{position:relative;border-radius:var(--o-r-l);background:#101013;border:1px solid var(--o-line-d);box-shadow:0 60px 100px -60px rgba(0,0,0,.95);overflow:hidden}
.a-builder-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--o-line-d);font-size:14px}
.a-dot{width:10px;height:10px;border-radius:50%;background:var(--o-red);box-shadow:0 0 12px var(--o-red)}
.a-run{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(34,197,94,.14);color:var(--o-ok-hi);font-size:12.5px;font-weight:600}
.a-count{margin-left:auto;color:var(--o-muted-l)}
.a-count b{color:#fff;font-variant-numeric:tabular-nums}
.a-canvas{position:relative;height:340px;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px}
.a-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.a-wires path{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5}
.a-wires path.hot{stroke:var(--o-red-hi);stroke-width:2;stroke-dasharray:6 6;animation:a-flow .8s linear infinite}
@keyframes a-flow{to{stroke-dashoffset:-24}}
.a-nodes{list-style:none;position:absolute;inset:0}
.a-node{position:absolute;left:calc(4% + var(--c) * 19.5%);top:calc(14% + var(--r) * 30%);width:16.5%;min-width:150px;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;
  background:#18181d;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 30px -20px rgba(0,0,0,.9);transition:border-color .35s,box-shadow .35s,transform .35s var(--o-ease)}
.a-node-ic{width:36px;height:36px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#e4e4e7}
.a-node-ic svg{width:18px;height:18px}
.a-node-ic svg:not([stroke]) path{fill:currentColor}
.a-node b{display:block;font-family:var(--font-head);font-size:14px;line-height:1.25}
.a-node small{display:block;font-size:12px;line-height:1.35;color:var(--o-muted-l)}
.a-node.on{border-color:rgba(255,107,107,.7);box-shadow:0 0 0 4px rgba(204,41,41,.14),0 18px 30px -20px rgba(0,0,0,.9);transform:translateY(-2px)}
.a-node.on .a-node-ic{background:var(--o-red);color:#fff}
.a-node.done .a-node-ic{color:var(--o-ok-hi)}
.a-log{list-style:none;display:flex;gap:18px;overflow:hidden;padding:12px 18px;border-top:1px solid var(--o-line-d);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--o-faint-l);white-space:nowrap}
.a-log{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.a-log li{transition:color .3s}
.a-log li.on{color:var(--o-ok-hi)}

/* antes x depois */
.a-ba-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"head tasks" "calc tasks";gap:clamp(20px,3vw,40px) clamp(32px,5vw,80px);align-items:start}
.a-ba-head{grid-area:head}
.a-ba-grid .o-head{margin-bottom:0}
.a-tasks{grid-area:tasks}
.a-calc{grid-area:calc;display:grid;gap:12px;padding:clamp(18px,2.4vw,26px);border-radius:var(--o-r-l);background:var(--o-ink);color:#fff}
.a-calc-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--font-head);font-weight:600;font-size:16px}
.a-calc-top output{margin-left:auto;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.a-calc input[type=range]{width:100%;min-height:32px;accent-color:var(--o-red-hi)}
.a-calc-res{font-size:16px;line-height:1.45}
.a-calc-res b{font-family:var(--font-head);font-size:clamp(28px,3vw,38px);letter-spacing:-.04em;color:var(--o-ok-hi);font-variant-numeric:tabular-nums}
.a-calc .o-micro{margin:0;font-size:13.5px;color:#c9c9cf}
.a-calc .btn{justify-self:start}
.a-cmp{margin-top:clamp(28px,4vw,48px)}
.a-cmp-h{font-family:var(--font-head);font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;margin-bottom:4px}
.a-tasks{padding:clamp(20px,3vw,30px);border-radius:var(--o-r-l);background:var(--o-white);border:1px solid var(--o-line-l)}
.a-tasks-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.a-tasks .o-toggle button{min-height:44px}
.a-tasks-head b{font-family:var(--font-head);font-size:17px}
.a-tasks ol{list-style:none;display:grid;gap:8px}
.a-tasks li{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--o-paper);border:1px solid var(--o-line-l);overflow:hidden;
  transition:background-color .4s;transition-delay:calc(var(--i) * 90ms)}
.a-t-txt{justify-self:start;font-size:15.5px;text-decoration-line:line-through;text-decoration-thickness:2px;text-decoration-color:transparent;transition:color .4s,text-decoration-color .45s;transition-delay:inherit}
.a-t-time{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--o-red-ink)}
.a-t-auto{position:absolute;right:16px;top:50%;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#e3efe6;color:var(--o-ok);font-size:13px;font-weight:600;
  opacity:0;transform:translate(10px,-50%);transition:opacity .35s,transform .35s var(--o-ease);transition-delay:inherit}
.a-t-auto svg{width:13px;height:13px}
.a-tasks[data-mode="depois"] li{background:rgba(21,128,61,.04)}
.a-tasks[data-mode="depois"] .a-t-txt{color:var(--o-muted-d)}
.a-tasks[data-mode="depois"] .a-t-txt{text-decoration-color:var(--o-muted-d)}
.a-tasks[data-mode="depois"] .a-t-time{opacity:0}
.a-tasks[data-mode="depois"] .a-t-auto{opacity:1;transform:translate(0,-50%)}
.a-tasks-sum{margin-top:16px;font-family:var(--font-head);font-size:18px;font-weight:700}
.a-tasks-sum .a{color:var(--o-red-ink)}
.a-tasks-sum .b{color:var(--o-ok)}
.a-tasks[data-mode="antes"] .a-tasks-sum .b,.a-tasks[data-mode="depois"] .a-tasks-sum .a{display:none}

/* capacidades e ferramentas */
.a-can{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.a-can li{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--o-r);background:var(--o-paper);border:1px solid var(--o-line-l)}
.a-can svg{width:44px;height:44px;padding:11px;border-radius:13px;background:var(--o-ink);color:#fff;margin-bottom:6px}
.a-can b{font-family:var(--font-head);font-size:18px}
.a-can span{font-size:15px;line-height:1.5;color:var(--o-muted-d)}
.a-stack{margin-top:20px;padding:20px 22px;border-radius:var(--o-r);border:1px dashed rgba(20,20,22,.18)}
.a-stack ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px}
.a-stack li{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.a-stack svg{width:20px;height:20px}
.a-stack svg:not([stroke]) path{fill:var(--o-text-d)}

.a-people{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.a-people .o-head{margin-bottom:24px}
.a-steps{list-style:none;display:grid;gap:14px;counter-reset:st}
.a-steps li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--o-muted-d)}
.a-steps b{color:var(--o-text-d)}
.a-step-n{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--o-ink);color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px}
.a-people .o-clients{margin-top:22px}
.a-offer{display:grid;gap:22px;justify-items:start}
.a-offer .o-head{margin-bottom:0}
.a-offer-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.a-offer-list li{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--o-r);background:var(--o-white);border:1px solid var(--o-line-l)}
.a-offer-list svg{width:36px;height:36px;padding:8px;border-radius:11px;background:var(--o-ink);color:#fff;margin-bottom:4px}
.a-offer-list b{font-family:var(--font-head);font-size:16.5px}
.a-offer-list span{font-size:14.5px;line-height:1.45;color:var(--o-muted-d)}
.automacao .o-diag:empty{display:none}
.a-stack .o-micro{margin:14px 0 0;font-size:13.5px}

@media (max-width:1100px){.a-can{grid-template-columns:repeat(2,1fr)}.a-offer-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .a-hero-top,.a-people{grid-template-columns:1fr}
  .a-ba-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tasks" "calc"}
  .a-canvas{height:auto;padding:16px}
  .a-wires{display:none}
  .a-nodes{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .a-node{position:relative;left:auto;top:auto;width:auto;min-width:0}
  .a-log{flex-direction:column;gap:4px;white-space:normal}
}
@media (max-width:760px){.a-nodes{grid-template-columns:minmax(0,1fr);gap:12px}.a-node + .a-node::before{content:"";position:absolute;left:28px;top:-13px;width:2px;height:13px;background:var(--o-red-hi)}.a-can{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.a-can li{padding:14px;gap:4px}.a-can svg{width:36px;height:36px;padding:8px;margin-bottom:4px}.a-can b{font-size:15.5px;line-height:1.3}.a-can span{font-size:13.5px;line-height:1.45}.a-count,.a-log,.a-people .o-photo{display:none}.a-offer-list{gap:8px}.a-offer-list li{padding:14px}.a-offer-list span{display:none}.a-offer-list li{align-items:flex-start}.a-calc-top{font-size:15px}.a-offer .btn{width:100%;justify-content:center}.a-t-auto{position:static;transform:none;display:none}.a-tasks[data-mode="depois"] .a-t-auto{display:inline-flex}.a-tasks[data-mode="depois"] .a-t-time{display:none}}
@media (prefers-reduced-motion:reduce){.a-wires path.hot{animation:none}.a-tasks li,.a-t-txt,.a-t-auto{transition:none}}
/* contratar x automatizar */
.i-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px}
.i-cmp-col{padding:22px;border-radius:var(--o-r);background:var(--o-white);border:1px solid var(--o-line-l)}
.i-cmp-col.new{background:var(--o-ink);color:#fff;border-color:var(--o-ink)}
.i-cmp-col.new .o-kicker{color:#ff8a8a}
.i-cmp-col ul{list-style:none;display:grid;gap:10px}
.i-cmp-col li{display:flex;gap:10px;font-size:15.5px;line-height:1.45}
.i-cmp-col svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--o-muted-d)}
.i-cmp-col.new svg{color:var(--o-ok-hi)}
@media (max-width:760px){.i-cmp{grid-template-columns:minmax(0,1fr)}.i-cmp-col{padding:16px}.i-cmp-col ul{gap:8px}.i-cmp-col li{font-size:14.5px}}

@media (max-width:760px){.a-hero .o-proof{gap:2px 14px;font-size:13px;margin-top:10px}.a-people .o-clients{font-size:13.5px;margin-top:14px}.a-offer{gap:16px}}
@media (max-width:760px){.a-stack{padding:14px 16px}.a-stack ul{gap:8px 16px}.a-stack li{font-size:14px}}
.a-calc .o-tag{background:#fff;color:var(--o-ink)}
.a-calc-res b{line-height:1}