/* sección 4: Así de simple (clara) */
.simple .wrap{display:grid;gap:clamp(22px,3.4vw,40px)}
.simple h2 .serif{color:var(--verde)}
.pasos{list-style:none;position:relative;display:grid;gap:clamp(30px,6vw,44px);--gap:clamp(30px,6vw,44px);margin-top:clamp(6px,2vw,20px)}
.paso{position:relative;padding-left:64px}
.paso__n{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;z-index:2;
  font:800 1.05rem var(--sans);color:var(--tinta);background:var(--papel);border:3px solid rgba(11,20,16,.18);transition:background .5s .2s,color .5s .2s,border-color .5s .2s,transform .5s .2s}
.paso.on .paso__n{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff;transform:scale(1.06)}
/* tramo de línea que une cada paso con el siguiente: gris de fondo + relleno que se dibuja */
.paso:not(:last-child)::before,.paso:not(:last-child)::after{content:"";position:absolute;left:18.5px;top:40px;width:3px;bottom:calc(-1 * var(--gap));border-radius:3px;background:rgba(11,20,16,.12)}
.paso:not(:last-child)::after{background:var(--verde);transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.5,0,.2,1) .35s}
.paso.on:not(:last-child)::after{transform:none}
.paso__body{display:grid;grid-template-columns:clamp(92px,28vw,128px) 1fr;gap:16px;align-items:center}
.paso__obj{border-radius:26px;overflow:hidden;aspect-ratio:1;background:radial-gradient(circle at 50% 45%,#17331c,#050a07 72%);box-shadow:0 16px 36px rgba(11,20,16,.28),inset 0 0 0 1px rgba(181,242,61,.18)}
.paso__obj video,.paso__obj img{width:100%;height:100%;object-fit:cover}
.paso h3{font-size:clamp(1.2rem,2.4vw,1.55rem);line-height:1.1;margin-bottom:6px;color:var(--tinta)}
.paso p{color:rgba(11,20,16,.74);font-size:1rem}

.reloj{display:grid;grid-template-columns:clamp(96px,24vw,170px) 1fr;align-items:center;gap:clamp(8px,2vw,24px);padding:clamp(14px,2.4vw,26px) clamp(18px,3vw,40px) clamp(14px,2.4vw,26px) clamp(8px,1.4vw,18px);
  border-radius:calc(var(--r) + 8px);color:var(--texto);background:radial-gradient(120% 140% at 0% 50%,rgba(181,242,61,.2),rgba(181,242,61,.04) 55%,transparent),#08130b;border:1px solid rgba(181,242,61,.4);box-shadow:0 24px 60px rgba(11,20,16,.3)}
.reloj video{width:130%;max-width:none;margin:-15% 0 -15% -15%;aspect-ratio:1;object-fit:cover;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 56%,transparent 70%);mask-image:radial-gradient(circle,#000 56%,transparent 70%)}
.reloj__k{font:500 .78rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lima);margin-bottom:8px}
.reloj__t{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(1.5rem,4vw,2.9rem)}
.reloj__t em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--lima);letter-spacing:-.01em}
.simple__cierre{margin-top:4px}

@media (min-width:900px){
  .pasos{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px);--gap:clamp(20px,2.6vw,36px)}
  .paso{padding:64px 0 0}
  .paso__n{left:0;top:0}
  .paso:not(:last-child)::before,.paso:not(:last-child)::after{left:50px;right:auto;top:18.5px;bottom:auto;height:3px;width:calc(100% + var(--gap) - 60px)}
  .paso:not(:last-child)::after{transform:scaleX(0);transform-origin:left}
  .paso.on:not(:last-child)::after{transform:none}
  .paso__body{grid-template-columns:1fr;gap:18px;align-items:start}
  .paso__obj{max-width:230px}
}
@media (prefers-reduced-motion:reduce){.paso:not(:last-child)::after{transition:none}.paso__n{transition:none}}
html:not(.js) .paso:not(:last-child)::after{transform:none}
html:not(.js) .paso .paso__n{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff}