/* === origen: Gestdoc Sitio v5.dc.html · Home · documento 3D con scroll (inline → clases) ===
 * --p lo setea design.js en [data-scrolly]. scrollyH / stickyH / stage3dH (isMobile) y
 * pasos (isDesktop) → media queries al final. calc(var(--p, 0) …) verbatim.
 */
.gd-scrolly{position:relative;height:280vh}
.gd-scrolly__sticky{position:sticky;top:64px;height:calc(100vh - 130px);overflow:hidden;display:flex;align-items:center}
.gd-scrolly__halo{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%) scale(calc(.6 + var(--p, 0) * .6));border-radius:50%;background:radial-gradient(circle,rgba(31,59,255,.10),transparent 60%);pointer-events:none}
.gd-scrolly__inner{position:relative;max-width:1240px;margin:0 auto;padding:0 20px;width:100%;display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center}
.gd-scrolly__copy{flex:1 1 340px;min-width:0}
.gd-scrolly__title{font-weight:600;font-size:clamp(32px,4.6cqw,64px);line-height:.98;letter-spacing:-.045em;margin:12px 0 0}

/* Pasos (isDesktop) */
.gd-scrolly__steps{display:flex;flex-direction:column;margin-top:26px}
.gd-scrolly__step{display:flex;gap:14px;padding:12px 0}
.gd-scrolly__step--1{opacity:clamp(.3, calc((var(--p, 0) - 0) * 8 + .3), 1)}
.gd-scrolly__step--2{opacity:clamp(.3, calc((var(--p, 0) - .25) * 8 + .3), 1)}
.gd-scrolly__step--3{opacity:clamp(.3, calc((var(--p, 0) - .5) * 8 + .3), 1)}
.gd-scrolly__step--4{opacity:clamp(.3, calc((var(--p, 0) - .75) * 8 + .3), 1)}
.gd-scrolly__step-n{font:500 12px 'Geist Mono',monospace;color:#1F3BFF;padding-top:3px}
.gd-scrolly__step-body{flex:1}
.gd-scrolly__step-t{font-size:18px;font-weight:600}
.gd-scrolly__step-d{font-size:14px;color:#475069;margin-top:2px}
.gd-scrolly__step-bar{height:2px;background:#EEF0F5;margin-top:10px;border-radius:2px;overflow:hidden}
.gd-scrolly__step-fill{height:100%;background:#1F3BFF}
.gd-scrolly__step-fill--1{width:clamp(0%, calc(var(--p, 0) * 400%), 100%)}
.gd-scrolly__step-fill--2{width:clamp(0%, calc((var(--p, 0) - .25) * 400%), 100%)}
.gd-scrolly__step-fill--3{width:clamp(0%, calc((var(--p, 0) - .5) * 400%), 100%)}
.gd-scrolly__step-fill--4{width:clamp(0%, calc((var(--p, 0) - .75) * 400%), 100%)}

/* Escenario 3D */
.gd-scrolly__stage{flex:1.2 1 460px;min-width:0;height:560px;position:relative;perspective:1600px}
.gd-scrolly__ask{position:absolute;left:4%;top:12%;opacity:clamp(0, min(calc((var(--p, 0) - .05) * 10), calc((.5 - var(--p, 0)) * 10)), 1);transform:translateY(calc((1 - var(--p, 0)) * 30px));z-index:3;background:rgba(255,255,255,.95);border-radius:16px;padding:10px 12px;box-shadow:0 20px 50px -14px rgba(10,15,31,.3);font-size:13px;max-width:220px}
.gd-scrolly__ask-who{font-size:11px;color:#667085;font-weight:500}
.gd-scrolly__ask-q{margin-top:4px}
.gd-scrolly__ok{position:absolute;right:2%;bottom:10%;opacity:clamp(0, calc((var(--p, 0) - .86) * 10), 1);transform:translateY(calc((1 - clamp(0, calc((var(--p, 0) - .86) * 10), 1)) * 20px));z-index:3;background:#0A0F1F;color:#fff;border-radius:14px;padding:12px 14px;font-size:13px;box-shadow:0 20px 50px -14px rgba(10,15,31,.5)}
.gd-scrolly__ok-d{font-size:11px;color:#98A2B3;margin-top:2px}
.gd-scrolly__doc{position:absolute;left:50%;top:50%;width:min(420px,88%);transform:translate(-50%,-50%) rotateX(calc((1 - min(1, var(--p, 0) * 1.3)) * 55deg)) rotateY(calc((1 - min(1, var(--p, 0) * 1.3)) * 22deg)) rotateZ(calc((1 - min(1, var(--p, 0) * 1.3)) * -16deg)) scale(calc(.8 + min(1, var(--p, 0) * 1.3) * .2));transform-style:preserve-3d;background:#fff;border-radius:14px;padding:clamp(18px,2.4cqw,30px);box-shadow:0 calc(20px + (1 - var(--p, 0)) * 60px) calc(50px + (1 - var(--p, 0)) * 80px) -20px rgba(10,15,31,.35),0 0 0 1px rgba(10,15,31,.05)}
.gd-scrolly__doc-top{display:flex;justify-content:space-between;font:500 10px 'Geist Mono',monospace;color:#98A2B3;letter-spacing:.08em}
.gd-scrolly__doc-type{color:#1F3BFF}
.gd-scrolly__doc-name{font-size:clamp(18px,1.8cqw,23px);font-weight:600;letter-spacing:-.02em;margin-top:10px;transform:translateZ(30px)}
.gd-scrolly__fields{display:flex;flex-direction:column;gap:9px;margin-top:16px;font-size:13px}
.gd-scrolly__field{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid #EEF0F5}
.gd-scrolly__field--1{opacity:clamp(0, calc((var(--p, 0) - .2) * 10), 1);transform:translateZ(calc((1 - var(--p, 0)) * 80px)) translateX(calc((1 - clamp(0, calc((var(--p, 0) - .2) * 10), 1)) * 24px))}
.gd-scrolly__field--2{opacity:clamp(0, calc((var(--p, 0) - .28) * 10), 1);transform:translateZ(calc((1 - var(--p, 0)) * 80px)) translateX(calc((1 - clamp(0, calc((var(--p, 0) - .28) * 10), 1)) * 24px))}
.gd-scrolly__field--3{opacity:clamp(0, calc((var(--p, 0) - .36) * 10), 1);transform:translateZ(calc((1 - var(--p, 0)) * 80px)) translateX(calc((1 - clamp(0, calc((var(--p, 0) - .36) * 10), 1)) * 24px))}
.gd-scrolly__field--4{opacity:clamp(0, calc((var(--p, 0) - .44) * 10), 1);transform:translateZ(calc((1 - var(--p, 0)) * 80px)) translateX(calc((1 - clamp(0, calc((var(--p, 0) - .44) * 10), 1)) * 24px))}
.gd-scrolly__field-k{color:#667085}
.gd-scrolly__field-v{font-weight:600;background:#EEF1FF;border-radius:4px;padding:0 4px}
.gd-scrolly__lines{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.gd-scrolly__line{height:5px;background:#EEF0F5;border-radius:3px;display:block}
.gd-scrolly__line--94{width:94%}
.gd-scrolly__line--72{width:72%}
.gd-scrolly__signs{display:flex;gap:14px;margin-top:18px;align-items:flex-end}
.gd-scrolly__sign{flex:1;position:relative}
.gd-scrolly__sign-svg{width:100%;height:40px;display:block}
.gd-scrolly__sign-path{stroke-dasharray:320px;stroke-dashoffset:calc(320px * (1 - clamp(0, calc((var(--p, 0) - .55) * 6.5), 1)))}
.gd-scrolly__sign-line{border-top:1.5px solid #0A0F1F;padding-top:6px;font-size:11px;color:#667085}
.gd-scrolly__sign-ok{color:#0E9F6E;font-weight:600;opacity:clamp(0, calc((var(--p, 0) - .68) * 10), 1)}
.gd-scrolly__sign-2{flex:1;border-top:1.5px dashed #C3C8D4;padding-top:6px;font-size:11px;color:#667085}
.gd-scrolly__sign-inv{color:#1F3BFF;font-weight:600;opacity:clamp(0, calc((var(--p, 0) - .72) * 10), 1)}
.gd-scrolly__stamp{position:absolute;right:-22px;bottom:-26px;width:94px;height:94px;border-radius:50%;background:#1F3BFF;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(31,59,255,.45);opacity:clamp(0, calc((var(--p, 0) - .74) * 12), 1);transform:translateZ(60px) scale(calc(1.8 - clamp(0, calc((var(--p, 0) - .74) * 12), 1) * .8)) rotate(8deg)}
.gd-scrolly__stamp-k{font:500 8px 'Geist Mono',monospace;letter-spacing:.14em}
.gd-scrolly__stamp-t{font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.05}

/* isDesktop (w ≥ 900): pasos visibles */
@media (max-width:899.98px){
  .gd-scrolly__steps{display:none}
}
/* isMobile (w < 760): scrollyH 230vh · stickyH calc(100vh - 150px) · stage3dH 420px */
@media (max-width:759.98px){
  .gd-scrolly{height:230vh}
  .gd-scrolly__sticky{height:calc(100vh - 150px)}
  .gd-scrolly__stage{height:420px}
}