/* Opción D: se carga después de inicio/b/styles.css. Misma idea que la C (el agente al centro de
   los servicios), en versión calmada: un solo movimiento a la vez, servicios como íconos y un
   motor que dice en una frase qué está haciendo. */

.hub {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  align-items: center;
  gap: 28px clamp(56px, 9vw, 160px);
  max-width: 1040px; margin-inline: auto;
  padding-block: 8px;
}

/* Cables: todos los de un lado convergen en un mismo punto del motor. */
.hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke: var(--line); stroke-width: 1.25; }
.wire__lit { fill: none; stroke: var(--blue); stroke-width: 1.75; stroke-linecap: round; opacity: 0; }
.wire__dot { fill: var(--blue); opacity: 0; }
.wire__port { fill: var(--white); stroke: var(--line); stroke-width: 1.25; }

/* Servicios: solo el ícono y el nombre. */
.node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.node--whatsapp, .node--gmail, .node--sheets { grid-column: 1; justify-self: end; }
.node--calendar, .node--hubspot, .node--slack { grid-column: 3; justify-self: start; }
.node--whatsapp, .node--calendar { grid-row: 1; }
.node--gmail, .node--hubspot { grid-row: 2; }
.node--sheets, .node--slack { grid-row: 3; }

.node__logo {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 12px 24px -16px rgba(11, 31, 58, 0.35);
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.node__logo::before {
  content: ""; width: 22px; height: 22px; background: var(--slate);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  transition: background-color 400ms var(--ease);
}
.node__name { font-size: 12.5px; font-weight: 500; color: var(--slate); transition: color 400ms var(--ease); }
/* --brand: el color oficial de cada servicio; el ícono lo toma cuando el agente lo está usando. */
.node--whatsapp { --logo: url(/inicio/logos/whatsapp.svg); --brand: #25d366; }
.node--gmail { --logo: url(/inicio/logos/gmail.svg); --brand: #ea4335; }
.node--sheets { --logo: url(/inicio/logos/googlesheets.svg); --brand: #34a853; }
.node--calendar { --logo: url(/inicio/logos/googlecalendar.svg); --brand: #4285f4; }
.node--hubspot { --logo: url(/inicio/logos/hubspot.svg); --brand: #ff7a59; }
.node--slack { --logo: url(/inicio/logos/slack.svg); --brand: #4a154b; }

.node.is-on .node__logo {
  border-color: color-mix(in srgb, var(--brand) 55%, white);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 12%, transparent), 0 12px 24px -14px color-mix(in srgb, var(--brand) 60%, transparent);
}
.node.is-on .node__logo::before { background: var(--brand); }
.node.is-on .node__name { color: var(--ink); }

/* Motor */
.core {
  position: relative; z-index: 1;
  grid-area: 1 / 2 / 4 / 3;
  display: flex; flex-direction: column; gap: 28px;
  padding: 24px;
  background: var(--carbon); color: var(--on-dark);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -40px rgba(11, 31, 58, 0.6), 0 8px 18px -12px rgba(11, 31, 58, 0.3);
}
.core__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.core__name { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--white); }
.core__name svg { width: 14px; height: 18px; fill: var(--blue-light); }
.core__live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-dark-muted); white-space: nowrap; }
.core__live i { width: 7px; height: 7px; border-radius: 50%; background: #2f9e6c; }

.core__body { display: flex; flex-direction: column; gap: 10px; }
.core__route { font: 400 12px/1.2 var(--mono); color: var(--blue-light); }
.core__text { min-height: 2.5em; font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; color: var(--white); text-wrap: pretty; }
.core__route.is-swap, .core__text.is-swap, .core__flow.is-swap { animation: swap-in 520ms var(--ease) both; }

.core__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--on-dark-rule); }
.core__flow { font-size: 12.5px; color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.core__steps { display: flex; gap: 5px; flex-shrink: 0; }
.core__steps i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); transition: background-color 400ms var(--ease), width 400ms var(--ease); }
.core__steps i.is-done { background: rgba(122, 172, 220, 0.55); }
.core__steps i.is-on { width: 22px; background: var(--blue-light); }

@keyframes swap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Tablet y móvil: servicios en una fila arriba y otra abajo del motor. */
@media (max-width: 960px) {
  .hub { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 64px 12px; max-width: 560px; }
  .node--whatsapp, .node--gmail, .node--sheets { grid-row: 1; justify-self: center; }
  .node--calendar, .node--hubspot, .node--slack { grid-row: 3; justify-self: center; }
  .node--whatsapp, .node--calendar { grid-column: 1; }
  .node--gmail, .node--hubspot { grid-column: 2; }
  .node--sheets, .node--slack { grid-column: 3; }
  .core { grid-area: 2 / 1 / 3 / 4; }
}

@media (max-width: 560px) {
  .hub { gap: 48px 8px; }
  .node__logo { width: 48px; height: 48px; }
  .node__logo::before { width: 20px; height: 20px; }
  .core { padding: 20px; gap: 22px; }
}