/* ==========================================================================
   NEXOSS PIPELINE (.pipeline) — hero of /soluciones/integracion-ia
   Same language as the document-volume diagram (doc-volume.css): dots,
   labels and thin connectors around the yellow IA Nexoss core. The flow
   runs top to bottom:
     01 Lo que ya tienes  (documentos, correos, hojas de cálculo, sistemas)
     02 IA Nexoss         (core + "Lee · Entiende · Relaciona · Propone")
     03 Lo que obtienes   (agentes, automatización, dashboards, decisiones)

   Markup: figure.page-hero__media--pipeline > .pipeline[data-pipeline] >
   svg.pipeline__svg + .pipeline__head × 3 + ul.pipeline__list--in +
   p.pipeline__core + ol.pipeline__stages + ul.pipeline__list--out.
   js/modules/pipeline.js positions every item (--x / --y, in px), sets the
   height, draws the connectors and plays the runs.
   Wide ≥ 520 px (and ≥ 52 rem): rows; otherwise pairs around an aisle.
   Reduced motion: the script shows the complete static diagram at once.
   ========================================================================== */

.page-hero__media--pipeline {
  margin-right: 0;
}

/* Needs the script to lay itself out */
.no-js .page-hero__media--pipeline {
  display: none;
}

.pipeline {
  --core: 76px;
  --col: 140px;
  position: relative;
  height: 38rem;
}

.pipeline__svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---- Step heads: 01 · 02 · 03 --------------------------------------------------- */
.pipeline__head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: var(--ink-400);
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0)) translate(var(--tx, 0), -50%);
  transition: opacity .8s var(--ease-out-quad) .2s;
}

.pipeline__head[data-side="end"] {
  --tx: -100%;
}

.pipeline__head b {
  margin-right: .6em;
  color: var(--white);
  font-weight: inherit;
}

/* ---- Nodes ------------------------------------------------------------------------ */
.pipeline__node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0));
  transition: opacity .7s var(--ease-out-quad);
}

.pipeline__list--out .pipeline__node {
  transition-delay: .5s;
}

.pipeline__dot {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-400);
  border-radius: 50%;
  background: var(--ink-950);
  transition: background-color .35s, border-color .35s, box-shadow .35s;
}

/* Pulse ring */
.pipeline__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--yellow-500);
  border-radius: 50%;
  opacity: 0;
}

/* Results: square yellow marker */
.pipeline__node--out .pipeline__dot {
  border: 1.5px solid var(--yellow-500);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(245, 196, 0, .25);
}

.pipeline__label {
  position: absolute;
  top: 0;
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  background: rgba(11, 13, 16, .78); /* keeps the lines behind it readable */
  color: var(--ink-300);
  font-size: max(1.5rem, 13px);
  font-weight: var(--fw-book);
  line-height: 1.2;
  white-space: nowrap;
  transition: color .35s;
}

.pipeline__node--out .pipeline__label {
  color: var(--white);
}

.pipeline__node[data-side="left"] .pipeline__label {
  right: 10px;
  text-align: right;
  transform: translateY(-50%);
}

.pipeline__node[data-side="right"] .pipeline__label {
  left: 10px;
  transform: translateY(-50%);
}

/* Wide layout: label above (sources) or below (results) its dot, wrapping in its column */
.pipeline__node[data-side="above"] .pipeline__label,
.pipeline__node[data-side="below"] .pipeline__label {
  left: 0;
  width: max-content;
  max-width: var(--col);
  text-align: center;
  white-space: normal;
  transform: translateX(-50%);
}

.pipeline__node[data-side="above"] .pipeline__label {
  top: auto;
  bottom: 12px;
}

.pipeline__node[data-side="below"] .pipeline__label {
  top: 12px;
}

.pipeline__meta {
  display: block;
  margin-top: 3px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  font-size: max(1rem, 9.5px);
  font-weight: var(--fw-regular);
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.pipeline__meta.is-swap {
  animation: pipeline-swap .4s var(--ease-out-quart);
}

/* States (pipeline.js) */
.pipeline__node.is-active .pipeline__dot {
  border-color: var(--white);
  background: var(--white);
}

.pipeline__node.is-active .pipeline__dot::after {
  animation: pipeline-ping .9s var(--ease-out-quad);
}

.pipeline__node.is-active .pipeline__label {
  color: var(--white);
}

.pipeline__node--out.is-active .pipeline__dot {
  border-color: var(--yellow-500);
  background: var(--yellow-500);
  box-shadow: 0 0 18px rgba(245, 196, 0, .7);
}

.pipeline__node--out.is-active .pipeline__meta {
  color: var(--yellow-500);
}

/* Hover: what is not related dims */
.pipeline.is-focus .pipeline__node:not(.is-related) {
  opacity: .3;
  transition-delay: 0s;
}

.pipeline__node.is-related .pipeline__label {
  color: var(--white);
}

/* ---- Core ------------------------------------------------------------------------- */
.pipeline__core {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  width: var(--core);
  height: var(--core);
  margin: 0;
  border-radius: 22%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 7px rgba(245, 196, 0, .09), 0 0 44px rgba(245, 196, 0, .3);
  opacity: 0;
  /* `translate` (not `transform`) so the pulse `scale` grows it in place */
  translate: calc(var(--x, 0) - var(--core) / 2) calc(var(--y, 0) - var(--core) / 2);
  transition: opacity 1s var(--ease-out-quad), box-shadow .35s, scale .45s var(--ease-out-quart);
}

.pipeline__core.is-hit {
  scale: 1.06;
  box-shadow: 0 0 0 14px rgba(245, 196, 0, .13), 0 0 70px rgba(245, 196, 0, .5);
}

.pipeline__ai {
  font-family: var(--font-display);
  font-size: calc(var(--core) * .44);
  font-stretch: 90%;
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: .9;
}

.pipeline__brand {
  margin-top: calc(var(--core) * .07);
  font-family: var(--font-mono);
  font-size: max(calc(var(--core) * .125), 8px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- Stages: Lee · Entiende · Relaciona · Propone ------------------------------------ */
.pipeline__stages li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink-400);
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0)) translateY(-50%);
  transition: opacity .8s var(--ease-out-quad) .4s, color .25s;
}

.pipeline__stages li::before {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  border: 1px solid currentColor;
  transition: background-color .25s;
}

.pipeline__stages li.is-on {
  color: var(--yellow-500);
}

.pipeline__stages li.is-done {
  color: var(--ink-200);
}

.pipeline__stages li.is-on::before,
.pipeline__stages li.is-done::before {
  background: currentColor;
}

/* ---- Entrance (.is-in, added by the script) ---------------------------------------- */
.pipeline.is-in .pipeline__node,
.pipeline.is-in .pipeline__head,
.pipeline.is-in .pipeline__core,
.pipeline.is-in .pipeline__stages li {
  opacity: 1;
}

/* ---- SVG ---------------------------------------------------------------------------- */
.pipeline__line {
  fill: none;
  stroke: var(--ink-700);
  stroke-width: 1;
  transition: stroke .3s;
}

.pipeline__line--out {
  stroke: rgba(245, 196, 0, .26);
}

.pipeline__line.is-hl {
  stroke: var(--ink-300);
}

.pipeline__line.is-trace {
  stroke: var(--yellow-500);
  stroke-width: 1.5;
}

.pipeline__mesh {
  fill: none;
  stroke: var(--ink-800);
  stroke-dasharray: 2 5;
}

/* Rings that close in on the core while it processes */
.pipeline__ring {
  fill: none;
  stroke: var(--yellow-500);
  stroke-width: 1;
  opacity: 0;
}

.pipeline__lit {
  fill: none;
  stroke: var(--yellow-500);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0;
}

.pipeline__lit--soft {
  stroke: rgba(255, 255, 255, .6);
}

.pipeline__spark-core {
  fill: var(--white);
}

.pipeline__spark-halo {
  fill: rgba(255, 255, 255, .12);
}

.pipeline__spark--out .pipeline__spark-core {
  fill: var(--yellow-500);
}

.pipeline__spark--out .pipeline__spark-halo {
  fill: rgba(245, 196, 0, .25);
}

.pipeline__spark-ring {
  fill: var(--ink-950);
  stroke: var(--yellow-500);
  stroke-width: 1.5;
}

/* ---- Tablet / mobile ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .page-hero__media--pipeline {
    grid-column: 1 / -1;
  }
}

@keyframes pipeline-ping {
  from { opacity: .9; transform: scale(.6); }
  to { opacity: 0; transform: scale(2); }
}

@keyframes pipeline-swap {
  from { opacity: 0; transform: translateY(.4rem); }
  to { opacity: 1; transform: none; }
}