/* Servicios: composición orbital con cinco nodos interactivos. */
.services {
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
.services-heading {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 70px);
  transform: translateY(-62px);
}
.services-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 2.45rem);
}
.services-heading span {
  font-size: clamp(2rem, 3.5vw, 4rem);
  line-height: 1;
}
.service-orbit {
  position: relative;
  width: min(100%, 980px);
  height: min(60vw, 640px);
  min-height: 530px;
  margin: 20px auto 0;
}
.service-center {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(100vw, 2048px);
  aspect-ratio: 2048 / 1808;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.service-center img {
  display: block;
  width: 100%;
  height: auto;
}
.service-node {
  position: absolute;
  z-index: 2;
  width: clamp(180px, 20vw, 230px);
  aspect-ratio: 1;
  padding: 20px;
  border: 1.5px solid var(--yellow);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font:
    600 clamp(0.78rem, 1.2vw, 1rem)/1.15 Isidora,
    Arial,
    sans-serif;
  cursor: pointer;
  transition:
    background 0.25s,
    box-shadow 0.25s,
    transform 0.25s;
}
.service-node:hover {
  transform: scale(1.05);
}
.service-node.active {
  background: var(--yellow);
  box-shadow:
    0 0 0 10px #fff,
    0 0 0 12px var(--yellow),
    0 0 0 22px #fff,
    0 0 0 24px var(--yellow);
  font-weight: 800;
}
.node-change {
  left: 2%;
  top: 4%;
}
.node-one-shot {
  left: 8%;
  bottom: 12%;
}
.node-content {
  left: 50%;
  bottom: -92px;
  transform: translateX(-50%);
}
.node-content:hover {
  transform: translateX(-50%) scale(1.05);
}
.node-content.active {
  transform: translateX(-50%);
}
.node-identity {
  right: 8%;
  bottom: 12%;
}
.node-management {
  right: 2%;
  top: 4%;
}
.service-message {
  position: relative;
  top: 20px;
  z-index: 3;
  min-height: 1.5em;
  margin: 108px auto 18px;
  max-width: 500px;
  font-size: 1.08rem;
  line-height: 1.45;
  text-align: center;
}
.services-footer {
  position: relative;
  top: 20px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--yellow);
  font-size: 1.85rem;
  letter-spacing: 0.2em;
}
.step-line {
  display: none;
}
@media (max-width: 800px) {
  .services {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 58.05px;
    padding-bottom: 43px;
  }
  .services-heading {
    transform: translateY(-46px);
  }
  .service-orbit {
    height: 590px;
    min-height: 0;
  }
  .service-center {
    width: 600px;
    top: 59%;
    transform: translate(-50%, -90%);
  }
  .service-node {
    width: 107.4px;
    padding: 12px;
    font-size: 0.75rem;
  }
  .node-change {
    left: -1%;
    top: 4%;
    transform: translateY(-30%);
  }
  .node-one-shot {
    left: 7.5%;
    bottom: 22%;
    transform: translateY(-200%);
  }
  .node-content {
    bottom: -68px;
    transform: translate(-50%, -290%);
  }
  .node-content.active {
    transform: translate(-50%, -290%);
  }
  .node-content:hover {
    transform: translate(-50%, -290%) scale(1.05);
  }
  .node-identity {
    right: 7.5%;
    bottom: 22%;
    transform: translateY(-200%);
  }
  .node-one-shot:hover,
  .node-identity:hover {
    transform: translateY(-200%) scale(1.05);
  }
  .node-management {
    right: -1%;
    top: 4%;
    transform: translateY(-30%);
  }
  .node-change:hover,
  .node-management:hover {
    transform: translateY(-30%) scale(1.05);
  }
  .service-node.active {
    box-shadow:
      0 0 0 5px #fff,
      0 0 0 7px var(--yellow),
      0 0 0 12px #fff,
      0 0 0 14px var(--yellow);
  }
  .service-message {
    margin: -242px auto 16px;
    font-size: 0.755rem;
  }
  .services-footer {
    font-size: 1.25rem;
    letter-spacing: 0.12em;
  }
}