/* Hero: diagrama de flujo */
.igx-flow {
  --cols: minmax(0, 1fr) 44px 116px 44px minmax(0, 1fr);
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: 22px 20px 18px;
  border-radius: 28px;
  background:
    radial-gradient(60% 90% at 90% 0%, rgb(255 255 255 / 16%) 0, transparent 60%),
    linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 34px 70px rgb(16 24 64 / 24%);
  color: #fff;
}
.igx-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgb(255 255 255 / 9%) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.igx-flow > * { position: relative; }
.igx-flow__label {
  display: grid;
  grid-template-columns: var(--cols);
  margin: 0 0 10px;
  color: #8f96c6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}
.igx-flow__label span:nth-child(2) { grid-column: 3; }
.igx-flow__label span:nth-child(3) { grid-column: 5; }
.igx-flow__grid { display: grid; grid-template-columns: var(--cols); height: 300px; }
.igx-flow__col { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; min-width: 0; }
.igx-node {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  background: rgb(255 255 255 / 7%);
  backdrop-filter: blur(4px);
}
.igx-node > span { display: grid; min-width: 0; }
.igx-node b { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.igx-node small { color: rgb(255 255 255 / 85%); font-size: 10.5px; line-height: 1.25; }
.igx-node--out { border-color: rgb(255 255 255 / 18%); background: rgb(255 255 255 / 11%); }
.igx-node__ico { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.igx-node__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.igx-ico--card { background: #2563eb; color: #fff; }
.igx-ico--scan { background: #4f46e5; color: #fff; }
.igx-ico--event { background: #0ea5e9; color: #fff; }
.igx-ico--hs { background: #fff; }
.igx-ico--hook { background: #FB2B7D; color: #fff; }
.igx-ico--api { background: #10b981; color: #fff; }
.igx-hsdot { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: #FF7A59; box-shadow: 0 0 0 3px rgb(255 122 89 / 25%); }
.igx-wire { display: block; width: 100%; height: 100%; overflow: visible; }
.igx-wire path {
  fill: none;
  stroke: #8b7bff;
  stroke-width: 1.6;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
  animation: igx-flow 1.2s linear infinite;
}
.igx-wire--out path { stroke: #ff6fa6; }
@keyframes igx-flow { to { stroke-dashoffset: -22; } }
.igx-hub {
  display: grid;
  align-self: center;
  justify-items: center;
  gap: 6px;
  padding: 16px 8px 14px;
  border-radius: 20px;
  background: #fff;
  color: #070d38;
  text-align: center;
  box-shadow: 0 0 0 6px rgb(109 74 255 / 25%), 0 20px 40px rgb(0 0 0 / 30%);
}
.igx-hub img { border-radius: 14px; }
.igx-hub b { font-size: 13px; font-weight: 900; }
.igx-hub__ev { padding: 3px 8px; border-radius: 999px; background: #ffe8f2; color: #d61f6a; font-size: 9.5px; font-weight: 800; line-height: 1.3; }
.igx-flow__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgb(0 0 0 / 28%);
  overflow: hidden;
}
.igx-flow__foot code { overflow: hidden; color: rgb(255 255 255 / 90%); font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }

/* Tres maneras */
.igx-tiles .px-tile { position: relative; padding-bottom: 22px; }
.igx-tile__for {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #f0f1f6;
  color: #6D4AFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* HubSpot */
.igx-hs { position: relative; width: 100%; max-width: 440px; padding-top: 46px; }
.igx-hs__in { left: -14px; top: 0; }
.igx-hs__logo { border-radius: 8px; }
.igx-hs__rec { padding-bottom: 6px; }
.igx-hs__bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid #f0e6e1; background: #fff7f4; font-size: 11.5px; }
.igx-hs__bar b { color: #33475b; }
.igx-hs__bar span:last-child { color: #7c98b6; }
.igx-hs__bar span:last-child::before { content: "/"; margin-right: 8px; color: #cbd6e2; }
.igx-hs__top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.igx-hs__top > span:nth-child(2) { flex: 1; min-width: 0; }
.igx-hs__top b { display: block; color: #33475b; font-size: 15px; }
.igx-hs__top small { color: #7c98b6; font-size: 11px; }
.igx-hs__av { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FF7A59; color: #fff; font-size: 14px; font-weight: 900; }
.igx-hs__props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 16px; overflow: hidden; border: 1px solid #eaf0f6; border-radius: 10px; background: #eaf0f6; }
.igx-hs__props div { min-width: 0; padding: 9px 11px; background: #fff; }
.igx-hs__props dt { color: #7c98b6; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.igx-hs__props dd { margin: 2px 0 0; overflow: hidden; color: #33475b; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.igx-hs__act { display: flex; gap: 10px; margin: 12px 16px 10px; padding: 10px 12px; border-left: 3px solid #FF7A59; border-radius: 0 10px 10px 0; background: #fff7f4; }
.igx-hs__act b { display: block; color: #33475b; font-size: 11.5px; }
.igx-hs__act small { color: #7c98b6; font-size: 10.5px; }

/* Webhooks */
.igx-hook { max-width: 480px; }
.igx-hook__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
.igx-hook__fields { display: grid; gap: 10px; padding: 12px 16px 14px; }
.igx-hook__fields label { display: grid; gap: 4px; color: #6b7190; font-size: 10.5px; font-weight: 700; }
.igx-hook__fields .ux-input { overflow: hidden; color: #1f2547; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; white-space: nowrap; }
.igx-hook__secret { justify-content: space-between; gap: 8px; padding-right: 3px; }
.igx-hook__secret .ux-btn { padding: 3px 8px; font-family: Lato, sans-serif; font-size: 10px; font-style: normal; }
.igx-hook__last { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 10px; border-radius: 10px; background: #f6f7fb; color: #6b7190; font-size: 10.5px; font-weight: 700; }
.igx-hook__ev { color: #070d38; font-weight: 800; }
.igx-hook__last small { margin-left: auto; color: #8a90a6; font-size: 10px; }
.igx-code { position: relative; margin: 0 10px 10px; border-radius: 12px; background: #0b1033; }
.igx-code__tag,
.igx-term__bar em {
  padding: 2px 8px;
  border-radius: 999px;
  background: #FB2B7D;
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.igx-code__tag { position: absolute; right: 10px; top: 10px; }
.igx-code pre,
.igx-term__body {
  margin: 0;
  overflow-x: auto;
  color: #cdd3f5;
  font: 500 10.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
.igx-code pre { padding: 14px 14px 16px; }
.igx-k { color: #9cc0ff; }
.igx-s { color: #7ee2b8; }
.igx-m { color: #ff8fbb; font-weight: 800; }
.igx-c { color: #7a82b3; }
.igx-p { color: #ff8fbb; }

/* API: terminal */
.igx-term { width: 100%; max-width: 500px; overflow: hidden; border-radius: 16px; background: #0b0f1f; box-shadow: 0 30px 70px rgb(16 24 64 / 28%); }
.igx-term__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #151a2e; }
.igx-term__bar > i { width: 9px; height: 9px; border-radius: 50%; }
.igx-term__bar > i:nth-child(1) { background: #ff6b6b; }
.igx-term__bar > i:nth-child(2) { background: #ffc24b; }
.igx-term__bar > i:nth-child(3) { background: #3dd68c; }
.igx-term__bar span { margin-left: 8px; color: #8a90b8; font-size: 11px; font-weight: 700; }
.igx-term__bar em { margin-left: auto; }
.igx-term__body { padding: 16px 18px 20px; font-size: 11px; }
.igx-term__body .igx-c { white-space: pre-wrap; }

/* Dos lados */
.igx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.igx-duo__card { position: relative; overflow: hidden; padding: 34px 32px 32px; border-radius: 24px; }
.igx-duo__card h3 { margin: 14px 0 18px; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.4px; }
.igx-duo__card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.igx-duo__card li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; }
.igx-duo__tag { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.igx-duo__card--tech {
  background:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px) 0 0 / 100% 26px,
    #0b1033;
  color: #fff;
}
.igx-duo__card--tech .igx-duo__tag { background: rgb(126 226 184 / 16%); color: #7ee2b8; }
.igx-duo__card--tech li { color: #cdd3f5; }
.igx-duo__card--tech li::before { content: ">"; position: absolute; left: 4px; top: 0; color: #7ee2b8; font: 800 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.igx-duo__card--biz { border: 1px solid #f6d9e5; background: linear-gradient(160deg, #fff 0%, #fff1f6 100%); color: #070d38; }
.igx-duo__card--biz .igx-duo__tag { background: #ffe8f2; color: #d61f6a; }
.igx-duo__card--biz li { color: #1f2547; }
.igx-duo__card--biz li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffe8f2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d61f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.4l2.6 2.4L12 5.4'/></svg>") center / 12px no-repeat;
}

@media (max-width: 1240px) {
  .igx-flow { --cols: minmax(0, 1fr) 30px 100px 30px minmax(0, 1fr); padding: 18px 14px 14px; }
  .igx-node { gap: 7px; padding: 8px; }
  .igx-node__ico { width: 26px; height: 26px; }
}
@media (max-width: 899px) {
  .igx-flow { --cols: minmax(0, 1fr) 44px 116px 44px minmax(0, 1fr); max-width: 640px; margin: 0 auto; padding: 22px 20px 18px; }
  .igx-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .igx-flow { padding: 18px 14px 14px; }
  .igx-flow__label,
  .igx-wire { display: none; }
  .igx-flow__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; height: auto; }
  .igx-flow__col { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; }
  .igx-node { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
  .igx-node b { font-size: 11.5px; }
  .igx-node small { font-size: 9.5px; white-space: normal; }
  .igx-hub { grid-template-columns: auto auto auto; align-items: center; justify-content: center; justify-self: center; gap: 10px; padding: 10px 14px; }
  .igx-hub img { width: 34px; height: 34px; border-radius: 10px; }
  .igx-hub::before,
  .igx-hub::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 20px;
    background: repeating-linear-gradient(180deg, #8b7bff 0 4px, transparent 4px 7px);
  }
  .igx-hub { position: relative; }
  .igx-hub::before { top: -23px; }
  .igx-hub::after { bottom: -23px; background: repeating-linear-gradient(180deg, #ff6fa6 0 4px, transparent 4px 7px); }
  .igx-flow__foot code { font-size: 10px; }
  .igx-hs { padding-top: 58px; }
  .igx-hs__in { left: 0; right: 0; white-space: normal; }
  .igx-hs__props { grid-template-columns: minmax(0, 1fr); }
  .igx-code pre,
  .igx-term__body { font-size: 9.5px; }
  .igx-duo__card { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .igx-wire path { animation: none; }
}