/* The process layout is HTML/CSS; separators are transparent cuts in the bands. */
#operacoes > .wrap { container-type: inline-size; }
.process-rail > li { --process-color: #0072bc; }
.process-rail > li:nth-child(2),
.process-rail > li:nth-child(6) { --process-color: #00aeef; }
.process-rail > li:nth-child(3),
.process-rail > li:nth-child(7) { --process-color: #008fd5; }
.process-rail > li:nth-child(8) { --process-color: #0072bc; }
.process-rail > li:nth-child(5),
.process-rail > li:nth-child(9) { --process-color: #046499; }
.process-rail h3,
.process-rail > li:nth-child(n+6) h3 {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
@media (min-width: 981px) {
  .process-rail {
    --ring: 12.12cqw;
    --band: 1.79cqw;
    --cut: 1.05cqw;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 17.76%);
    grid-template-rows: 20.82cqw auto;
    gap: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 0 2cqw;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    isolation: isolate;
  }
  .process-rail > li {
    grid-column: auto;
    min-width: 0;
    z-index: 1;
  }
  /* Keep the desktop return path; smaller screens follow the HTML reading order. */
  .process-rail > li:nth-child(6) { grid-row: 2; grid-column: 5; }
  .process-rail > li:nth-child(7) { grid-row: 2; grid-column: 4; }
  .process-rail > li:nth-child(8) { grid-row: 2; grid-column: 3; }
  .process-rail > li:nth-child(9) { grid-row: 2; grid-column: 2; }
  .process-icon {
    position: relative;
    width: var(--ring);
    height: var(--ring);
    margin: 0 0 0 1.02cqw;
    border: 1.82cqw solid var(--process-color);
    border-radius: 50%;
    /* Overlap the band by one pixel to avoid a seam at fractional screen sizes. */
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 82%, 50% calc(100% - var(--band) + 1px), 0 calc(100% - var(--band) + 1px));
  }
  .process-rail > li:nth-child(n+6) .process-icon {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--band) + 1px), 50% calc(100% - var(--band) + 1px), 50% 82%, 0 82%);
  }
  .process-icon img { width: 68%; height: 68%; max-width: none; max-height: none; }
  .process-rail h3 {
    height: var(--band);
    margin: calc(var(--band) * -1) .38cqw 0 0;
    padding: 0 .7cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.52cqw;
    font-weight: 800;
    line-height: 1;
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, 0 100%, var(--cut) 50%);
  }
  .process-rail > li:nth-child(n+6) h3 {
    transform: translateX(-6cqw);
    clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 50%, 100% 100%, var(--cut) 100%, 0 50%);
  }
  .process-rail ul {
    margin: 1.35cqw .35cqw 0 7.05cqw;
    padding: 0 0 0 1.75cqw;
    border-left: .14cqw solid #c8c8c8;
    min-height: 5.3cqw;
    font-size: 1.23cqw;
    font-weight: 600;
    line-height: 1.2;
    width: 15.5cqw;
  }
  .process-rail ul li { margin-bottom: 0; }
  .process-rail ul::before,
  .process-rail ul::after {
    width: .7cqw;
    height: .7cqw;
    left: -.42cqw;
  }
  .process-rail ul::before { top: -.35cqw; }
  .process-rail ul::after { bottom: -.35cqw; }
  .process-rail > li:nth-child(n+6) ul { margin-left: 6.3cqw; width: 15.5cqw; }
  .process-rail::after {
    display: block;
    z-index: 0;
    top: calc(var(--ring) - var(--band));
    right: 3.1%;
    width: 15.15%;
    height: calc(20.82cqw + var(--band));
    border: var(--band) solid transparent;
    border-left: 0;
    border-radius: 0 4.5cqw 4.5cqw 0;
    background: linear-gradient(#cbc8ca, #aaa7aa 52%, #e4e2e2) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    clip-path: polygon(6cqw 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--band) / 2), var(--cut) calc(100% - var(--band)), 6cqw var(--band), 7.05cqw calc(var(--band) / 2));
  }
}