/* #solucion — el hilo de oro entra por arriba, al centro, y cae en FITAL API. */
#solucion { overflow: hidden; overflow: clip; }

#solucion .solucion__hilo {
  position: absolute; left: calc(50% - 1px); width: 2px;
  pointer-events: none;
}
#solucion .solucion__hilo--a {
  top: 0; height: calc(var(--seccion) - 22px);
  background: linear-gradient(180deg, var(--oro) 55%, rgba(185, 138, 50, 0));
}

#solucion .solucion__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
#solucion .eyebrow::before { display: none; }

/* Diagrama */
#solucion .solucion__diagrama {
  position: relative;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-block: clamp(72px, 11vh, 120px) clamp(48px, 7vh, 72px);
}
#solucion .solucion__trazos {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
#solucion .solucion__trazo { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
#solucion .solucion__trazo--entrada,
#solucion .solucion__trazo--salida { stroke: var(--oro); stroke-opacity: .5; stroke-width: 1.5; }
#solucion .solucion__trazo--hilo { stroke: url(#solucion-hilo); stroke-width: 2; }
#solucion .solucion__pulso {
  fill: none; stroke: var(--oro-premium); stroke-width: 2.25; stroke-linecap: round;
  opacity: 0;
}
#solucion .solucion__punto { fill: var(--oro); opacity: 0; }

#solucion .solucion__nodo { position: relative; z-index: 1; margin: 0; }
#solucion .solucion__origen {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 72px; padding: 16px 28px 16px 22px;
  background: var(--blanco-calido);
  border: 1px solid var(--hilo); border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.012em;
}
#solucion .solucion__origen .icono { width: var(--ico-m); height: var(--ico-m); color: var(--oro-texto); }
#solucion .solucion__centro {
  --luz: 0;
  display: grid; place-items: center;
  width: clamp(220px, 19vw, 264px); height: clamp(104px, 9.4vw, 128px);
  background: var(--grad-oro);
  border-radius: var(--radio);
  box-shadow:
    inset 0 0 0 1px rgba(255, 254, 251, .32),
    0 1px 2px rgba(12, 24, 48, .08),
    0 18px 40px rgba(139, 102, 35, calc(.18 + .16 * var(--luz)));
  color: var(--tinta);
  font-size: var(--t-h3); font-weight: 600; letter-spacing: -.02em;
}

#solucion .solucion__destinos {
  position: relative; z-index: 1;
  justify-self: end;
  display: grid; gap: clamp(8px, 1.1vw, 14px);
  margin: 0; padding: 0; list-style: none;
}
#solucion .solucion__destino {
  --luz: 0;
  display: flex; align-items: center; gap: 12px;
  min-width: 176px; min-height: 56px; padding: 8px 20px 8px 16px;
  background: var(--blanco-calido);
  border: 1px solid var(--hilo); border-radius: var(--radio-s);
  box-shadow: 0 0 0 calc(3px * var(--luz)) rgba(185, 138, 50, calc(.14 * var(--luz)));
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em;
}
#solucion .solucion__destino .icono { flex: none; width: var(--ico-m); height: var(--ico-m); color: var(--oro-texto); }

/* Atributos */
#solucion .solucion__atributos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px);
  margin: 0; padding: 0; list-style: none;
}
#solucion .solucion__atributo { padding-top: 20px; border-top: 1px solid var(--hilo); }
#solucion .solucion__atr-t { margin: 0 0 6px; font-size: var(--t-h4); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
#solucion .solucion__atributo p { margin: 0; color: var(--texto-2); line-height: 1.45; }

@media (max-width: 899px) {
  #solucion .solucion__diagrama {
    display: flex; flex-direction: column; align-items: center;
    padding-block: 64px 48px;
  }
  #solucion .solucion__origen { justify-self: auto; margin-bottom: 40px; min-height: 60px; }
  #solucion .solucion__centro { width: 220px; height: 104px; margin-bottom: 64px; }
  #solucion .solucion__destinos {
    justify-self: auto; width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  }
  #solucion .solucion__destino {
    flex-direction: column; justify-content: center; gap: 6px;
    min-width: 0; min-height: 76px; padding: 10px 2px;
    font-size: .875rem; letter-spacing: -.012em;
  }
  #solucion .solucion__atributos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}