/* Sección: desarrollo de software (navy = autoridad) */
.soft-tabs .nav-link {
  color: var(--brand-cloud); border: 1px solid rgba(238,244,255,.25); border-radius: 99px;
  padding: .45rem 1rem; font-weight: 600; background: rgba(238,244,255,.04);
}
.soft-tabs .nav-link:hover { border-color: rgba(238,244,255,.55); color: #fff; }
.soft-tabs .nav-link.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.soft-tab-content {
  min-height: 84px; padding: 1rem 1.2rem; border-radius: 1rem;
  background: rgba(238,244,255,.06); border-left: 3px solid var(--brand-blue); color: rgba(238,244,255,.9);
}

.arch-bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1.1rem; border-bottom: 1px solid rgba(238,244,255,.1); }
.arch-bar span:last-child { font-size: .8rem; font-weight: 600; color: rgba(238,244,255,.6); }
.arch-body { padding: clamp(1rem, 3vw, 2rem); }
.arch-layer {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .95rem 1.2rem; border-radius: .9rem; font-weight: 600; font-size: .95rem; color: #fff;
}
.arch-layer small { color: rgba(238,244,255,.65); font-size: .78rem; font-weight: 500; }
.arch-front { background: rgba(238,244,255,.10); border: 1px solid rgba(238,244,255,.28); }
.arch-api   { background: var(--brand-blue); border: 1px solid rgba(238,244,255,.25); box-shadow: 0 16px 32px -16px rgba(var(--blue-rgb), .9); }
.arch-data  { background: rgba(238,244,255,.10); border: 1px solid rgba(238,244,255,.28); }
.arch-mod {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .8rem .4rem;
  border-radius: .9rem; font-size: .8rem; font-weight: 600; color: #fff;
  background: rgba(var(--blue-rgb), .28); border: 1px solid rgba(var(--blue-rgb), .65);
  transition: transform .25s var(--ease), background-color .25s;
}
.arch-mod i { font-size: 1.15rem; color: var(--brand-cloud); }
.arch-mod:hover { transform: translateY(-3px); background: rgba(var(--blue-rgb), .5); }
.arch-flow { height: 28px; display: grid; place-items: center; }
.arch-flow span { width: 2px; height: 100%; background: rgba(238,244,255,.35); position: relative; overflow: hidden; }
.arch-flow span::after {
  content: ""; position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(238,244,255,.9); animation: flow 1.6s linear infinite;
}
@keyframes flow { from { top: -6px; } to { top: 100%; } }