/* GoodPlann · viaje a la superficie */

.gp .journey{ position:relative; height:280vh; }
.gp .journey-sticky{ position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden; }
.gp .jbright{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(80% 62% at 80% 6%, rgba(255,222,150,.30), transparent 60%),
    linear-gradient(180deg, rgba(150,225,230,.14), rgba(90,190,195,.10)); }
.gp .journey-inner{ position:relative; z-index:1; text-align:center; }
.gp .j-k{ font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tiffany); }
.gp .j-h{ margin:12px 0 0; font-weight:900; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.03em; color:var(--snow); }
.gp .j-sub{ margin:14px auto 0; max-width:54ch; color:var(--muted); font-size:1.02rem; line-height:1.55; }
.gp .jread{ margin:30px 0 0; display:flex; align-items:baseline; justify-content:center; gap:12px; }
.gp .jread b{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:900; color:var(--tiffany); font-variant-numeric:tabular-nums; }
.gp .jsep{ color:var(--muted-2); }
.gp #jstate{ font-size:1.05rem; color:var(--ink); font-weight:700; }
.gp .jline{ position:relative; height:6px; border-radius:99px; margin:74px auto 64px; width:86%; max-width:880px;
  background:linear-gradient(90deg, rgba(51,153,137,.22), rgba(125,226,209,.22)); }
.gp .jline-fill{ position:absolute; left:0; top:0; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,#1E6E64,#33B0A0 45%,#7DE2D1 78%,#DFFCF6);
  box-shadow:0 0 16px rgba(125,226,209,.5); transition:width .5s cubic-bezier(.22,.9,.25,1); }
.gp .jnode{ position:absolute; top:50%; left:var(--p); transform:translate(-50%,-50%); }
.gp .jdot{ display:block; width:15px; height:15px; border-radius:50%; background:rgba(255,255,255,.16);
  border:2px solid rgba(125,226,209,.4); transition:.3s; }
.gp .jnode.on .jdot{ background:linear-gradient(135deg,#7DE2D1,#33998A); border-color:#DFFCF6; box-shadow:0 0 14px rgba(125,226,209,.7); }
.gp .jlbl{ position:absolute; top:22px; left:50%; transform:translateX(-50%); width:106px; white-space:normal; text-align:center;
  font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; line-height:1.25; color:var(--muted-2); transition:.3s; }
.gp .jnode.up .jlbl{ top:auto; bottom:22px; }
.gp .jnode.on .jlbl{ color:var(--snow); }
.gp .j-big{ display:inline-block; font-size:1.28em; line-height:1.05; }
.gp .jmarker{ position:absolute; top:50%; left:0; width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%, #fff, #7DE2D1 55%, #33998A); box-shadow:0 0 24px rgba(125,226,209,.85);
  transition:left .5s cubic-bezier(.22,.9,.25,1), transform .5s cubic-bezier(.22,.9,.25,1); }
.gp .jmarker::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(125,226,209,.4); animation:pulseRing 2.4s ease-out infinite; }
@media (max-width:560px){
 .gp .jlbl{ font-size:8px; width:60px; letter-spacing:.02em; }
 .gp .jline{ width:94%; }
}