/* css/integracoes.css — folha da página /integracoes (dona: a página). Vem depois do site.css e do inbox.css.
   Todas as folhas carregam em todas as páginas: toda regra daqui fica no prefixo .it-. Cores só da paleta escura
   do site.css e do inbox.css; o azul marca só a direção em destaque no mapa do topo (informação), junto do texto. */

/* ── topo: o mapa das três direções ──
   [data-cycle] destaca uma direção por vez (.is-active); a primeira já sai ativa do servidor, que é o estado
   parado sem JS e com "reduzir movimento". As outras continuam legíveis: o destaque é fundo + fio, não sumiço. */
.it-map {
  min-width: 0;
  padding: 28px;
  border: 1px solid #3b424d;
  border-radius: 10px;
  background: #15181d;
}
.it-map-origin {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid #3a4556;
}
.it-map-origin .brand-symbol {
  width: 34px;
  height: 34px;
  color: #cdd9ef;
}
.it-map-origin .eyebrow {
  display: block;
  color: #b5bfd2;
}
.it-map-origin strong {
  display: block;
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.2;
  color: #e5ebf5;
}
.it-routes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.it-route {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 8px 20px 16px;
  border-bottom: 1px solid #2f3742;
}
.it-route-n {
  padding-top: 1px;
  font-size: .8125rem;
  color: #9aa6ba;
}
.it-route-way {
  display: block;
  font: 400 .75rem/1.5 var(--mono);
  letter-spacing: .06em;
  color: #a3b0c2;
}
.it-route strong {
  display: block;
  margin-top: 6px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: #d9e0ec;
}
.it-route p {
  max-width: 380px;
  margin-top: 5px;
  font-size: .8125rem;
  line-height: 1.6;
  color: #aab6c9;
}
.it-route.is-active {
  background: #1b222d;
  box-shadow: inset 2px 0 #8abaff;
}
.it-route.is-active .it-route-n {
  color: #bdd7ff;
}
.it-route.is-active strong {
  color: #f2f5fa;
}
.it-map-foot {
  padding-top: 22px;
  font-size: .8125rem;
  line-height: 1.7;
  color: #b2c1d8;
}

/* ── conexões prontas: o apoio sob o título da .integrations ── */
.it-lead {
  max-width: 430px;
  margin-top: 16px;
  font-size: .9375rem;
  line-height: 1.7;
  color: #abacb3;
}

/* ── o assistente: as chamadas dele ao inbox ficam do lado dele (à esquerda), não do lado de quem atende ── */
.it-asst {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.it-asst .ibx-tool {
  align-self: flex-start;
}

/* ── o widget dentro do sistema da empresa: o hospedeiro (sem logo da Claryt) e a área tracejada do widget ── */
.it-host {
  margin: 0;
}
.it-host-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .8125rem;
  font-weight: 550;
  color: #e3e4ea;
  white-space: nowrap;
}
.it-host-name::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #4a4d56;
}
.it-host-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  background: #16171a;
}
.it-host-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid #383a42;
}
.it-host-nav span {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .8125rem;
  color: #a9acb8;
}
.it-host-nav .is-current {
  background: #26282e;
  color: #eef0f5;
}
.it-embed {
  min-width: 0;
  margin: 14px;
  border: 1px dashed #4a4e58;
  border-radius: 8px;
  overflow: hidden;
}
.it-embed-head {
  padding: 8px 14px;
  border-bottom: 1px solid #383a42;
  background: #1d1e22;
  font: 400 .6875rem/1.5 var(--mono);
  letter-spacing: .08em;
  color: #a3a6b2;
}
.it-action {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid #4a4e58;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 500;
  color: #e6e8ee;
  white-space: nowrap;
}

/* ── instalação: o texto e o trecho de código, depois da tela ── */
.it-install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 24px 56px;
  align-items: start;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid #393b42;
}
.it-install h3 {
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.3;
  color: #e6e6ec;
}
.it-install p {
  max-width: 400px;
  margin-top: 14px;
  font-size: .9375rem;
  line-height: 1.7;
  color: #abafb9;
}
/* os passos da instalação, em fio fino como as listas do site.css */
.it-steps {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #393b42;
}
.it-steps li {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #393b42;
  font-size: .9375rem;
  line-height: 1.6;
  color: #d5d9e2;
}
.it-steps .mono {
  flex-shrink: 0;
  padding-top: 2px;
  font-size: .75rem;
  letter-spacing: .07em;
  color: #a7aab4;
}

@media (max-width: 1100px) {
  .it-map {
    padding: 24px 22px;
  }
  .it-host-body {
    grid-template-columns: 132px minmax(0, 1fr);
  }
  .it-embed {
    margin: 10px;
  }
  .it-install {
    gap: 24px 36px;
  }
}
@media (max-width: 800px) {
  .it-map {
    max-width: 580px;
    width: 100%;
    justify-self: center;
    padding: 24px;
  }
  .it-lead {
    max-width: none;
  }
  /* no celular o menu do sistema hospedeiro sai; fica o widget (e dele, a conversa — inbox.css) */
  .it-host-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .it-host-nav {
    display: none;
  }
  .it-embed {
    margin: 8px;
  }
  .it-install {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
    padding-top: 24px;
  }
  .it-install p {
    max-width: none;
    font-size: 1rem;
  }
}
@media (max-width: 400px) {
  .it-map {
    padding: 21px 18px;
  }
  .it-map-origin strong {
    font-size: 1.35rem;
  }
  .it-route {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding-left: 12px;
  }
  .it-host-name {
    font-size: .75rem;
  }
  .it-steps li {
    font-size: .875rem;
  }
}

/* troca de direção no mapa: a mesma régua do site.css ([data-cycle-at]), mais o fio e as cores de dentro */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .it-route {
    transition: opacity .5s var(--motion-ease), background-color .5s var(--motion-ease), box-shadow .5s var(--motion-ease);
  }
  .js-motion .it-route strong,
  .js-motion .it-route-n {
    transition: color .5s var(--motion-ease);
  }
}