/* /integracoes — hero "anatomia de uma conexão" + seções no padrão r2 (src/styles/brand.css).
   Motions (page.js): quatro formas de conectar (faixas), integrações reais chegando (pilha que se reorganiza),
   pedido e resposta da API (conversa), entrega de webhook com nova tentativa, importação em lote (número que sobe),
   escopo do MCP (filtro). Sem logos de parceiros. Estados ocultos só com .sx.is-armed. */

/* ---------- Hero ---------- */
.in-hero{padding-block:clamp(48px,6vw,104px) var(--space-section)}
.in-hero .eyebrow{display:block;margin-bottom:24px}
.in-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.in-h1{font-size:clamp(2.4rem,1.2rem + 3.6vw,4.6rem);line-height:1.03;max-width:13ch}
.in-hero-copy{display:flex;flex-direction:column;gap:28px}
.in-hero-copy .lead{max-width:46ch}
@media (max-width:900px){.in-hero-grid{grid-template-columns:minmax(0,1fr);align-items:start}}

/* Anatomia: trilho na altura do centro dos nós (22px); extremidades opacas cobrem o trilho */
.in-anat{margin-top:var(--space-head);padding:clamp(24px,3vw,40px);border-radius:24px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.in-anat-k{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:500;margin-bottom:28px}
.in-cable{--p:100%;position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;gap:clamp(16px,2.4vw,36px);font-family:var(--f-ui)}
.in-cable::before,.in-cable::after{content:"";position:absolute;left:0;top:21px;height:2px;border-radius:2px}
.in-cable::before{right:0;background:var(--line-2)}
.in-cable::after{width:var(--p);background:var(--blue);transition:width .7s var(--ease),height .7s var(--ease)}
.in-end{position:relative;z-index:1}
.in-end-b{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:600;white-space:nowrap}
.in-end-ext{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.in-ring{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.in-ring-n{width:22px;height:22px;margin:11px 0 10px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 2px var(--line-2),0 0 0 6px var(--white);transition:box-shadow .35s,background .35s}
.in-ring.on .in-ring-n{background:var(--blue);box-shadow:inset 0 0 0 2px var(--blue),0 0 0 6px var(--white)}
.in-ring b{font-family:var(--f-brand);font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.in-ring span:last-child{font-size:13px;color:var(--ink-2);max-width:26ch}
.is-armed .in-ring b,.is-armed .in-ring span:last-child{opacity:.35;transition:opacity .4s}
.is-armed .in-ring.on b,.is-armed .in-ring.on span:last-child{opacity:1}
@media (max-width:900px){
  .in-cable{grid-template-columns:minmax(0,1fr);gap:22px}
  .in-cable::before,.in-cable::after{left:21px;top:22px;width:2px;height:auto}
  .in-cable::before{bottom:22px;right:auto}
  .in-cable::after{height:calc((100% - 44px) * var(--pn,1));bottom:auto}
  .in-ring{align-items:flex-start;text-align:left;padding-left:56px;gap:2px}
  .in-ring-n{position:absolute;left:11px;top:0;margin:0}
  .in-ring span:last-child{max-width:none}
}

/* ---------- Fechamento ---------- */
.in-close{display:flex;flex-direction:column;align-items:flex-start;gap:36px}

/* ---------- 1 · quatro faixas ---------- */
.inl ul{display:flex;flex-direction:column;gap:10px}
.inl-r{display:grid;grid-template-columns:auto minmax(64px,1fr) auto;align-items:center;column-gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transition:opacity .3s,border-color .3s,box-shadow .3s}
.sx.is-armed .inl-r:not(.on):not(.ok){opacity:.5}
.inl-r.on{border-color:rgba(0,122,255,.5);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.inl-a{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;white-space:nowrap}
.inl-g{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:600}
.inl-w{position:relative;height:30px}
.inl-w i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--sx-line2)}
.inl-w b{position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--sx-blue);opacity:0}
.inl-w em{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;border:1px solid var(--sx-line2);display:grid;place-items:center;color:var(--sx-ink2);transition:background .25s,color .25s,border-color .25s}
.inl-w em svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
.inl-r.is-open .inl-w em{background:var(--sx-blue);border-color:var(--sx-blue);color:#fff}
.inl-w b.r{animation:inlR .7s var(--sx-ease) forwards}
.inl-w b.l{animation:inlL .7s var(--sx-ease) forwards}
@keyframes inlR{0%{opacity:0;transform:translateX(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(var(--d,100px))}}
@keyframes inlL{0%{opacity:0;transform:translateX(var(--d,100px))}15%,85%{opacity:1}100%{opacity:0;transform:translateX(0)}}
.inl-t{grid-column:1 / -1;margin-top:8px;font-size:12.5px;color:var(--sx-ink3)}
.inl-t b{font-family:var(--f-brand);font-weight:500;font-size:13.5px;color:var(--ink);margin-right:8px}
.inl-r.on .inl-t b{color:var(--sx-blue-t)}

/* ---------- 2 · integrações chegando ---------- */
.inf{--h:66px;--g:8px;background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 18px 20px}
.inf-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.inf-h b{font-family:var(--f-brand);font-weight:500;font-size:16px}
.inf-h span{font-size:12.5px;color:var(--sx-ink3)}
.inf-list{position:relative;height:calc(var(--h) * 5 + var(--g) * 4)}
.inf-it{position:absolute;left:0;right:0;top:0;height:var(--h);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 14px;border-radius:14px;background:var(--paper);transform:translateY(calc(var(--s,0) * (var(--h) + var(--g))));transition:transform .5s var(--sx-ease),opacity .4s var(--sx-ease),box-shadow .3s,background .3s}
.inf-it[data-i="0"]{--s:4}.inf-it[data-i="1"]{--s:3}.inf-it[data-i="2"]{--s:2}.inf-it[data-i="3"]{--s:1}.inf-it[data-i="4"]{--s:0}
.sx.is-armed .inf-it:not(.in){opacity:0}
.inf-it.is-hi{background:#fff;box-shadow:0 0 0 1px rgba(0,122,255,.45),0 0 0 4px rgba(0,122,255,.1)}
.inf-it .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.inf-it time{font-size:12px;color:var(--sx-ink3);font-variant-numeric:tabular-nums}

/* ---------- 3 · pedido e resposta ---------- */
.inc{display:flex;flex-direction:column;gap:12px}
.inc-m{max-width:84%;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--sx-line)}
.inc-m.is-req{align-self:flex-start;border-bottom-left-radius:6px}
.inc-m.is-res{align-self:flex-end;background:var(--sx-blue-b);border-color:rgba(0,122,255,.2);border-bottom-right-radius:6px}
.inc-who{font-size:12px;font-weight:500;color:var(--sx-ink3)}
.inc-m.is-res .inc-who{color:var(--sx-blue-t)}
.inc-m > b{font-family:var(--f-brand);font-weight:500;font-size:15px;margin-bottom:6px}
.inc-kv{display:flex;gap:10px;font-size:13px}
.inc-kv > span{min-width:74px;color:var(--sx-ink3)}
.inc-kv code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--sx-wash);padding:1px 6px;border-radius:6px}
.inc-chk{align-self:center;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sx-ink2)}
.inc-chk .sx-ic{width:26px;height:26px;border-radius:50%}
.inc-chk.is-ok .sx-ic{background:var(--sx-ok-b);color:var(--sx-ok-t)}
.inc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.inc-foot > span{font-size:12px;color:var(--sx-ink3)}

/* ---------- 4 · webhook ---------- */
.inw-top{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center}
.inw-end{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border-radius:16px;background:#fff;min-width:0}
.inw-k{font-size:12px;color:var(--sx-ink3)}
.inw-end > b{font-family:var(--f-brand);font-weight:500;font-size:14px;overflow-wrap:anywhere}
.inw-end > span{font-size:12.5px;color:var(--sx-ink3)}
.inw-end .sx-badge{margin-top:8px}
.inw-path{position:relative;height:40px;margin:0 10px}
.inw-path i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(255,255,255,.28)}
.sx:not(.dark *) .inw-path i{border-top-color:var(--sx-line2)}
.inw-fly{position:absolute;left:0;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--sx-blue);color:#fff;display:grid;place-items:center;opacity:0}
.inw-fly svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.inw-fly.go{animation:inwX .8s var(--sx-ease) forwards}
@keyframes inwX{0%{opacity:0;transform:translateX(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(var(--d,40px))}}
.inw-log{margin-top:12px;padding:2px 16px;border-radius:16px;background:#fff}
.inw-log li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--sx-line)}
.inw-log li:first-child{border-top:0}
.inw-log li b{grid-column:1;font-family:var(--f-brand);font-weight:500;font-size:13.5px}
.inw-log li span:not(.sx-badge){grid-column:1;font-size:12.5px;color:var(--sx-ink3)}
.inw-log li .sx-badge{grid-column:2;grid-row:1 / span 2}

/* ---------- 5 · importação ---------- */
.ini{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.ini-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.ini-big{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px !important}
.ini-big b{font-family:var(--f-brand);font-weight:400;font-size:48px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ini-big span{font-size:14px;color:var(--sx-ink2)}
.ini-bar{height:8px;border-radius:999px;background:var(--sx-wash);overflow:hidden}
.ini-bar i{display:block;height:100%;border-radius:999px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--v,.98));transition:transform 1.4s var(--sx-ease)}
.sx.is-armed .ini-bar i{transform:scaleX(var(--v,0))}
.ini-bad{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:14px;background:var(--sx-al-b)}
.ini-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--sx-line)}
.ini-note{font-size:12.5px;color:var(--sx-ink3)}
.ini-f .sx-btn{height:36px;padding:0 14px}

/* ---------- 6 · MCP ---------- */
.inm{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px}
.inm-h{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.inm-seg{display:inline-flex;gap:2px;margin:16px 0 8px;padding:3px;border-radius:999px;background:var(--sx-wash)}
.inm-seg span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;color:var(--sx-ink2);transition:background .25s,color .25s,box-shadow .25s}
.inm-seg span.on{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 3px rgba(10,20,60,.12)}
.inm-seg span.is-press{box-shadow:0 0 0 4px rgba(0,122,255,.18)}
.inm-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--sx-line);transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.inm-list li:first-child{border-top:0}
.sx.is-armed .inm-list li:not(.in){opacity:0;transform:translateY(8px)}
.inm-dot{width:8px;height:8px;border-radius:50%;background:var(--sx-ok);flex:none;transition:background .25s}
.inm-list li.out .inm-dot{background:var(--sx-line2)}
.inm-t{flex:1;min-width:0;font-size:13.5px}
.inm-list li.out .inm-t{color:var(--sx-ink3)}
.inm-list li.is-hi{background:var(--sx-blue-b);margin:0 -10px;padding-inline:10px;border-radius:10px}
.inm-sum{margin-top:8px !important;padding-top:12px;border-top:1px solid var(--sx-line);font-size:13px;color:var(--sx-ink2)}
.inm-sum b{font-family:var(--f-brand);font-weight:500;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .in-hero{padding-top:36px}
  .in-hero .eyebrow{margin-bottom:18px}
  .in-hero-grid{gap:20px}
  .in-hero-copy{gap:24px}
  .in-anat{margin-top:36px;padding:20px 18px}
  .in-anat-k{margin-bottom:20px}
  .in-cable{gap:18px}
  .in-close{gap:28px}
  .inl-r{padding:12px}
  .inl-a{font-size:13px}
  .inl-a .sx-ic{display:none}
  .inf{--h:70px;padding:16px}
  .inf-it{padding:0 12px;gap:10px}
  .inf-it time{display:none}
  .inc-m{max-width:94%}
  .inw-top{grid-template-columns:minmax(0,1fr)}
  .inw-path{height:56px;margin:6px 0}
  .inw-path i{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed rgba(255,255,255,.28)}
  .inw-fly{left:50%;top:0;margin:0 0 0 -15px}
  .inw-fly.go{animation-name:inwY}
  .ini,.inm{padding:16px}
  .ini-bad{grid-template-columns:auto minmax(0,1fr)}
  .sx .ini-bad .sx-badge{display:none}
  .ini-bad .mv-tt span{white-space:normal}
  .ini-f{flex-direction:column;align-items:stretch}
  .ini-f .sx-btn{height:40px}
  .inm-seg span{padding:0 10px;font-size:12px}
  .sx .inm-list li .sx-badge{display:none}
}
@keyframes inwY{0%{opacity:0;transform:translateY(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateY(26px)}}
@media (max-width:430px){
  .in-hero-copy .btn-row,.in-close .btn-row{flex-direction:column;align-items:stretch;width:100%}
  .in-hero-copy .btn-row .btn,.in-close .btn-row .btn{width:100%;justify-content:center}
}
@media (max-width:720px){#inicio :is(.x-pill,.eyebrow):not(.sx *){margin-bottom:16px !important}}