/* /integracoes — composição própria. Conceito: conexões com contrato, contexto e rastreabilidade.
   Linguagem: desenho técnico. Um cabo com três anéis (contrato, contexto, registro), uma tabela de mecanismos
   com o sentido de cada conexão, categorias sem logos, log de entregas, prévia de importação e um filtro de capacidades.
   Ritmo: hero claro com a anatomia → mecanismos (branco) → tipos (claro, explorável) → API (branco)
   → webhooks (escuro, demonstração) → arquivos (branco) → segurança (claro) → MCP (branco, explorável) → fechamento.
   Estados ocultos de motion só existem com .is-armed. */

/* ---------- Utilitários ---------- */
.in-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px clamp(40px,6vw,96px);align-items:end;margin-bottom:var(--space-head)}
.in-head .eyebrow{display:block}
.in-head-col{align-items:flex-start}
.in-note{margin-top:16px;font-family:var(--f-ui);font-size:12px;color:var(--ink-2)}
.dark .in-note{color:var(--paper-2)}
.in-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;margin-bottom:18px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
@media (max-width:900px){.in-head{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- 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}
}

/* ---------- Mecanismos ---------- */
.in-mech{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.in-mech-r{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(130px,.7fr) minmax(220px,1.1fr) minmax(0,1.4fr);gap:12px clamp(16px,3vw,40px);align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.in-mech-h{padding:12px 0;font-size:12px;color:var(--ink-3);font-family:var(--f-ui)}
.in-mech-r > span[role="cell"]{font-size:.97rem;color:var(--ink-2)}
.in-mn{display:flex;flex-direction:column}
.in-mn b{font-weight:500;font-size:1.25rem;letter-spacing:-.015em}
.in-mn small{font-size:12px;color:var(--ink-2)}
.in-dir{display:flex;align-items:center;gap:0;font-family:var(--f-ui)}
.in-dir i{font-style:normal;flex:none;display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:8px;background:var(--paper);font-size:12px;font-weight:500;color:var(--ink)}
.in-dir i.a{background:var(--ink);color:var(--paper)}
.in-ar{position:relative;flex:1;min-width:40px;height:2px;margin:0 6px;background:var(--neutral)}
.in-ar::after,.in-ar-both::before{content:"";position:absolute;top:50%;width:7px;height:7px;border-top:2px solid var(--neutral);border-right:2px solid var(--neutral)}
.in-ar::after{right:0;transform:translate(1px,-50%) rotate(45deg)}
.in-ar-both::before{left:0;transform:translate(-1px,-50%) rotate(-135deg)}
.in-ar-gate{background:linear-gradient(90deg,var(--neutral) 0 calc(50% - 8px),transparent calc(50% - 8px) calc(50% + 8px),var(--neutral) calc(50% + 8px))}
.in-ar-gate{box-shadow:none}
.in-ar-gate:not(.x)::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:3px;border:2px solid var(--blue);transform:translate(-50%,-50%)}
@media (max-width:900px){
  .in-mech-h{display:none}
  .in-mech-r{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);row-gap:10px}
  .in-mn{grid-row:1 / span 2}
  .in-mech-r > span[role="cell"]:nth-child(2)::before{content:"Inicia: ";color:var(--ink-3)}
  .in-mech-r > span[role="cell"]:last-child{grid-column:1 / -1}
}
@media (max-width:520px){
  .in-mech-r{grid-template-columns:minmax(0,1fr)}
  .in-mn{grid-row:auto}
  .in-dir{max-width:320px}
}

/* ---------- Tipos ---------- */
.in-types{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.in-tabs .tab{height:44px;font-size:14px;padding:0 14px}
.in-types-panel{min-width:0;display:flex;flex-direction:column;gap:24px;padding:clamp(22px,3vw,36px);border-radius:20px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.in-tp-t{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.018em;max-width:34ch}
.in-tp-dia{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0;font-family:var(--f-ui)}
.in-tp-node{display:inline-flex;align-items:center;height:48px;padding:0 16px;border-radius:12px;background:var(--paper);font-size:13px;font-weight:500;white-space:nowrap}
.in-tp-node.a{background:var(--ink);color:var(--paper)}
.in-tp-wire{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 10px;min-height:48px}
.in-tp-wire::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line-2)}
.in-tp-wire .chip{position:relative;background:var(--blue-wash);color:var(--blue-text);box-shadow:0 0 0 4px var(--white)}
.in-tp-kv{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.in-tp-kv div{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:var(--paper)}
.in-tp-kv dt{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.in-tp-kv dd{margin:0;font-size:.95rem}
@media (max-width:900px){.in-types{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .in-tp-dia{grid-template-columns:minmax(0,1fr);justify-items:start}
  .in-tp-wire{align-items:flex-start;padding:10px 0 10px 22px;min-height:0}
  .in-tp-wire::before{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .in-tp-wire .chip{box-shadow:none}
  .in-tp-node{white-space:normal}
  .in-tp-kv{grid-template-columns:minmax(0,1fr)}
}

/* ---------- API ---------- */
.in-api{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(40px,6vw,96px);align-items:center}
.in-rr{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;font-family:var(--f-ui)}
.in-rr-card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;background:var(--paper)}
.in-rr-res{background:var(--ink);color:var(--paper)}
.in-rr-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.in-rr-res .in-rr-k{color:var(--paper-3)}
.in-rr-card b{font-weight:600;font-size:14.5px}
.in-rr-card dl{margin:0;display:flex;flex-direction:column;gap:8px}
.in-rr-card dt{font-size:11.5px;color:var(--ink-3)}
.in-rr-res dt{color:var(--paper-3)}
.in-rr-card dd{margin:0;font-size:13px}
.in-rr-mid{position:relative}
.in-rr-mid span{position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--neutral)}
.in-rr-mid span::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:2px solid var(--neutral);border-right:2px solid var(--neutral);transform:translate(1px,-50%) rotate(45deg)}
.in-rr-note{grid-column:1 / -1}
@media (max-width:980px){.in-api{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .in-rr{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 40px auto auto}
  .in-rr-mid span{left:50%;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .in-rr-mid span::after{right:auto;top:auto;bottom:0;left:50%;transform:translate(-50%,1px) rotate(135deg)}
}

/* ---------- Webhooks ---------- */
.in-stages{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;font-family:var(--f-ui)}
.in-stages li{display:flex;align-items:center;height:40px;padding:0 14px;border-radius:10px;background:rgba(245,245,247,.06);font-size:12.5px;color:var(--paper-2);transition:background .35s,color .35s}
.in-stages li span::before{content:counter(st) " ";counter-increment:st;color:var(--paper-3);margin-right:6px}
.in-stages{counter-reset:st}
.in-stages li.on{background:var(--paper);color:var(--ink);font-weight:500}
.in-stages li.on span::before{color:var(--ink-3)}
.in-log .ui-row{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.is-armed .in-lr{opacity:0;transform:translateY(6px)}
.is-armed .in-lr.in{opacity:1;transform:none}
@media (max-width:760px){
  .in-stages{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:430px){
  .in-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .in-log .ui-head{flex-direction:column;align-items:flex-start;gap:2px}
}

/* ---------- Importação ---------- */
.in-imp{overflow:hidden}
.in-imp-steps{list-style:none;margin:0;padding:14px 18px;display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line)}
.in-imp-steps li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--paper);font-size:12px;color:var(--ink-2)}
.in-imp-steps li.done::before{content:"✓";color:var(--ok-text);font-weight:600}
.in-imp-steps li.on{background:var(--ink);color:var(--paper);font-weight:500}
.in-imp-map{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) minmax(0,1fr) 24px minmax(0,1fr);gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.in-imp-map span{display:flex;flex-direction:column;font-size:12.5px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.in-imp-map small{font-weight:400;font-size:11px;color:var(--ink-3)}
.in-imp-map em{font-style:normal;color:var(--ink-3);text-align:center}
.in-imp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.in-imp-btns{display:flex;gap:8px}
@media (max-width:760px){.in-imp-map{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}}

/* ---------- Segurança ---------- */
#seguranca .eyebrow{display:block;margin-bottom:24px}
.in-impact{font-size:clamp(1.9rem,1.2rem + 2.5vw,3.5rem);line-height:1.1;letter-spacing:-.03em;max-width:24ch}
.in-impact span:first-child{color:var(--ink-3)}
.in-ctrls{list-style:none;margin:var(--space-head) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2)}
.in-ctrls li{display:flex;flex-direction:column;gap:8px;padding:22px 20px 0 0}
.in-ctrls li + li{padding-left:20px;border-left:1px solid var(--line)}
.in-ctrls b{font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.in-ctrls span{font-size:.93rem;color:var(--ink-2)}
@media (max-width:1080px){
  .in-ctrls{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-top:0}
  .in-ctrls li,.in-ctrls li + li{padding:18px 0;border-left:0;border-top:1px solid var(--line-2)}
}
@media (max-width:520px){.in-ctrls{grid-template-columns:minmax(0,1fr)}}

/* ---------- MCP ---------- */
.in-pass{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;font-family:var(--f-ui)}
/* trilho passa pelo centro dos marcadores (14px) do primeiro ao último */
.in-pass::before{content:"";position:absolute;left:var(--l,14px);top:var(--t,13px);width:var(--w,2px);height:var(--h,2px);background:var(--line-2)}
.in-pass li{position:relative;display:flex;flex-direction:column;gap:4px}
.in-pk{display:grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 2px var(--line-2),0 0 0 5px var(--white);font-size:12px;font-weight:600}
.in-pass li.core .in-pk{background:var(--ink);color:var(--paper);box-shadow:0 0 0 5px var(--white)}
.in-pass b{font-weight:600;font-size:14px}
.in-pass li > span:last-child{font-size:12.5px;color:var(--ink-2)}
.in-filter{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:24px clamp(28px,4vw,64px);align-items:start;margin-top:var(--space-sub);padding-top:var(--space-sub);border-top:1px solid var(--line)}
.in-filter-ctrl{display:flex;flex-direction:column;align-items:flex-start}
.in-filter-sum{margin-top:18px;font-size:.95rem;color:var(--ink-2)}
.in-caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;font-family:var(--f-ui)}
.in-caps li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 14px;border-radius:12px;background:var(--paper);font-size:13.5px;transition:background .3s,color .3s,box-shadow .3s}
.in-caps em{font-style:normal;flex:none;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500}
.in-caps li.ok{background:var(--white);box-shadow:0 0 0 1.5px var(--ink)}
.in-caps li.ok em{background:rgba(52,199,89,.13);color:var(--ok-text)}
.in-caps li.out{color:var(--ink-3)}
.in-caps li.out em{background:var(--wash);color:var(--ink-2)}
@media (max-width:980px){
  .in-pass{grid-template-columns:minmax(0,1fr);gap:18px}
  .in-pass li{padding-left:46px;min-height:28px}
  .in-pk{position:absolute;left:0;top:0;margin:0}
  .in-filter{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){.in-caps{grid-template-columns:minmax(0,1fr)}}

/* ---------- Fechamento ---------- */
.in-close{display:flex;flex-direction:column;align-items:flex-start;gap:36px}
@media (max-width:760px){.in-tabs{margin-inline:0;padding-inline:0}}
.in-log .chip{background:rgba(245,245,247,.1);color:var(--paper)}
.in-log .chip.blue{background:rgba(0,122,255,.22);color:#8FC3FF}
.in-log .chip.ok{background:rgba(52,199,89,.18);color:#7BE495}
.in-log .chip.alert{background:rgba(255,59,48,.18);color:#FF9F98}

/* =====================================================================
   MOBILE (≤ 720px) — diagrama técnico legível. Desktop/tablet ≥ 721 intocados.
   Webhooks: etapas numa faixa única compacta acima do log vertical (evento → assinatura → entrega → retry → histórico).
   Tipos: faixa de abas rolável, ativo sempre visível. Identificadores quebram/rolam dentro do componente.
   ===================================================================== */
@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-head{gap:16px;margin-bottom:26px}

  /* mecanismos */
  .in-mech-r{padding:16px 0;row-gap:8px}

  /* tipos: categorias em faixa rolável */
  .in-tabs{scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .in-tabs::-webkit-scrollbar{display:none}
  .in-tabs .tab{scroll-snap-align:start}
  .in-tabs .tab:last-child{margin-right:24px}
  .in-types{gap:14px}
  .in-types-panel{padding:20px 18px;gap:18px}
  .in-tp-kv{gap:10px}

  /* API: pedido → resposta em coluna */
  .in-api{gap:28px}
  .in-rr-card{padding:16px 18px}
  .in-rr-card code{overflow-wrap:anywhere}

  /* webhooks: faixa única de etapas + log vertical */
  .in-bar{margin-bottom:14px}
  .in-stages{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:12px}
  .in-stages li{justify-content:center;height:36px;padding:0 2px;font-size:12px;letter-spacing:-.01em;white-space:nowrap;border-radius:9px}
  .in-stages li span::before{display:none}
  .in-log .ui-row{gap:10px}

  /* importação */
  .in-imp-steps{padding:12px 14px}
  .in-imp-map{padding:12px 14px}
  .in-imp-foot{padding:12px 14px}

  /* segurança: título sem torre, lista curta */
  #seguranca .eyebrow{margin-bottom:18px}
  .in-impact{font-size:var(--fs-h2);line-height:1.14}
  .in-ctrls{margin-top:28px}
  .in-ctrls li,.in-ctrls li + li{padding:14px 0;gap:4px}

  /* MCP: timeline vertical + filtro */
  .in-pass{gap:16px}
  .in-filter{gap:16px}
  .in-filter .seg{width:100%}
  .in-filter .seg button{flex:1 1 0;height:44px;padding:0 8px;font-size:13.5px;white-space:nowrap}
  .in-filter-sum{margin-top:12px}
  .in-caps li{min-height:48px}

  .in-close{gap:28px}
}
@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}
}