@media (min-width:901px){

  .process-label{ white-space:nowrap; }

  @supports (grid-template-rows: subgrid){
    .process-list > .process-item{
      display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0;
    }
    .process-item > div:not(.process-top){ display:contents; }
    .process-list > .process-item .process-top{ margin-bottom:20px; }
    .process-list > .process-item h4{ min-height:0; align-self:start; }
    .process-list > .process-item p{ align-self:start; }
  }
}

.deal-back{ display:none; }

@media (min-width:901px) and (min-height:600px) and (prefers-reduced-motion:no-preference){

  #proceso.deal-on{
    --deal-run:2.4;
    padding:0;
    height:calc(100vh / var(--ndz, 1) * (1 + var(--deal-run)));
    overflow:clip;
  }
  #proceso.deal-on::before{ display:none; }
  #proceso.deal-on .deal-stage{
    position:sticky; top:0; isolation:isolate;
    height:calc(100vh / var(--ndz, 1));
    display:flex; flex-direction:column; justify-content:center;
    padding:84px 0 40px;
  }
  #proceso.deal-on .deal-stage::before{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(36% 55% at 4% 70%,  rgba(76,111,255,calc(0.12 * var(--aura))), transparent 70%),
      radial-gradient(36% 55% at 96% 30%, rgba(124,92,255,calc(0.12 * var(--aura))), transparent 70%);
  }
  #proceso.deal-on .deal-stage > .wrap{ width:100%; }
  #proceso.deal-on .sec-head{ margin-bottom:clamp(28px, 5vh, 56px); }

  #proceso.deal-on .process-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    position:relative; gap:18px;
    border:0; border-radius:0; overflow:visible;
    perspective:1700px; perspective-origin:50% 30%;
  }
  #proceso.deal-on .process-item,
  #proceso.deal-on .process-item:nth-child(n){
    border:1px solid var(--border); border-radius:18px;
    background:var(--surface);
    transform-style:preserve-3d;
    transform-origin:50% 60%;
    box-shadow:0 18px 40px -26px rgba(0,0,0,.45);
    transition:box-shadow .35s ease, border-color .35s ease, background .25s ease;
  }
  html[data-theme="dark"] #proceso.deal-on .process-item{ box-shadow:0 18px 40px -22px rgba(0,0,0,.9); }
  #proceso.deal-on .process-item:hover{ background:var(--surface-2); }

  #proceso.deal-on .process-item.is-flying{
    border-color:rgba(76,111,255,.55);
    box-shadow:0 60px 90px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(76,111,255,.25), 0 0 60px -10px rgba(76,111,255,.45);
  }

  #proceso.deal-on .deal-back{
    display:flex; align-items:center; justify-content:center;
    position:absolute; inset:-1px; z-index:5; border-radius:inherit; overflow:hidden;
    transform:rotateY(180deg) translateZ(.5px);
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    background:#000;
    border:1px solid #000;
    box-shadow:inset 0 0 0 7px #000, inset 0 0 0 8px rgba(255,255,255,.14);
  }
  #proceso.deal-on .deal-back-num{
    position:relative; font-family:'IBM Plex Mono', monospace; font-weight:600; line-height:1;
    font-size:clamp(64px, 7vw, 104px); letter-spacing:-.04em;
    color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.9);
    text-shadow:0 0 26px rgba(76,111,255,.45);
  }
  #proceso.deal-on .deal-back-logo{
    position:absolute; left:50%; bottom:18px; width:26px; height:26px; margin-left:-13px;
    object-fit:contain; opacity:.75;
  }

  html[data-theme="dark"] #proceso.deal-on .deal-back{
    border:1px solid transparent;
    background:
      linear-gradient(#000, #000) padding-box,
      linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(76,111,255,.85) 45%, rgba(124,92,255,.55) 75%, rgba(255,255,255,.12) 100%) border-box;
    box-shadow:
      inset 0 0 0 7px #000, inset 0 0 0 8px rgba(255,255,255,.1),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
  html[data-theme="dark"] #proceso.deal-on .process-item.is-back{
    box-shadow:0 0 0 1px rgba(76,111,255,.18), 0 0 46px -10px rgba(76,111,255,.55), 0 30px 60px -30px rgba(0,0,0,.9);
  }
  html[data-theme="dark"] #proceso.deal-on .process-item.is-back.is-flying{
    box-shadow:0 0 0 1px rgba(76,111,255,.3), 0 0 70px -8px rgba(76,111,255,.7), 0 60px 90px -40px rgba(0,0,0,.9);
  }
  html[data-theme="dark"] #proceso.deal-on .deal-back-num{
    text-shadow:0 0 30px rgba(76,111,255,.75), 0 0 2px rgba(255,255,255,.6);
  }

  #proceso.deal-on .process-item.is-back .process-top,
  #proceso.deal-on .process-item.is-back h4,
  #proceso.deal-on .process-item.is-back p{ visibility:hidden; }

  #proceso.deal-on .process-item::before{
    content:''; position:absolute; inset:-1px; top:-1px; left:-1px; width:auto; height:auto;
    border-radius:inherit; pointer-events:none; z-index:6;
    background:none; opacity:0; transition:none;
    box-shadow:0 0 0 1.5px rgba(76,111,255,.95), 0 0 46px 8px rgba(76,111,255,.45);
  }
  #proceso.deal-on .process-item.is-landed::before{ animation:deal-impact .9s cubic-bezier(.2,.7,.2,1) both; }
  #proceso.deal-on .process-item.is-landed{ animation:deal-thud .5s cubic-bezier(.2,.7,.2,1) both; }
  #proceso.deal-on .process-item.is-landed .process-num{ animation:deal-num-pop .7s cubic-bezier(.2,.7,.2,1) .05s both; }

  @keyframes deal-impact{
    0%  { opacity:1; transform:scale(1); }
    100%{ opacity:0; transform:scale(1.09); }
  }
  @keyframes deal-thud{
    0%  { scale:1.03 .97; }
    45% { scale:.985 1.012; }
    100%{ scale:1; }
  }
  @keyframes deal-num-pop{
    0%  { transform:scale(.8);  text-shadow:0 0 0 rgba(76,111,255,0); }
    40% { transform:scale(1.14); text-shadow:0 0 22px rgba(76,111,255,.85); }
    100%{ transform:scale(1);   text-shadow:0 0 0 rgba(76,111,255,0); }
  }
  #proceso.deal-on .process-num{ display:inline-block; transform-origin:0 60%; }

  #proceso.deal-on .process-item::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
    background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%) no-repeat;
    background-size:250% 100%; background-position:130% 0; opacity:0;
  }
  #proceso.deal-on .process-list.is-finale .process-item{
    animation:deal-thud .5s cubic-bezier(.2,.7,.2,1) both, deal-wave .9s cubic-bezier(.3,.7,.2,1) both;
    animation-delay:0s, calc(var(--wave-i, 0) * 95ms);
  }
  #proceso.deal-on .process-list.is-finale .process-item::after{
    animation:deal-sheen 1s ease-out both; animation-delay:calc(var(--wave-i, 0) * 95ms);
  }
  #proceso.deal-on .process-item:nth-child(2){ --wave-i:1; }
  #proceso.deal-on .process-item:nth-child(3){ --wave-i:2; }
  #proceso.deal-on .process-item:nth-child(4){ --wave-i:3; }
  #proceso.deal-on .process-item:nth-child(5){ --wave-i:4; }

  @keyframes deal-wave{
    0%  { translate:0 0; border-color:var(--border); }
    35% { translate:0 -12px; border-color:rgba(76,111,255,.7); }
    100%{ translate:0 0; border-color:var(--border); }
  }
  @keyframes deal-sheen{
    0%  { opacity:1; background-position:130% 0; }
    100%{ opacity:1; background-position:-30% 0; }
  }

  @media (max-width:1100px){
    #proceso.deal-on .process-list{ gap:12px; }
    #proceso.deal-on .process-label{ white-space:normal; }
  }

  #proceso.deal-on .process-top,
  #proceso.deal-on .process-item h4,
  #proceso.deal-on .process-item p{ position:relative; z-index:1; }
}