/* Portada de gofast.com.ar — capa tipo app con historia 3D. Solo se carga en la portada (.home-app). */
.home-app{--h-night:#0E0230;--h-pink:#FF3797;--h-blue:#2226F7;--h-violet:#5140FF;--h-soft:#CFC9E8;
  --h-grad:linear-gradient(135deg,#2226F7,#5140ff 52%,#FF3797 145%)}

/* Historia */
.story{position:relative;background:var(--h-night);color:#fff;isolation:isolate;
  background-image:radial-gradient(90vw 60vh at 88% 4%,rgba(255,55,151,.24),transparent 62%),radial-gradient(90vw 70vh at 0% 60%,rgba(34,38,247,.34),transparent 64%)}
.story-pin{position:relative;display:grid;gap:36px;padding:44px 0 56px}
.story-stage{position:relative;display:grid;place-items:center;pointer-events:none}
.story-stage canvas{display:none;width:100%;height:100%}
.story-copy{position:relative;z-index:2}
.beat{max-width:640px}
.beat+.beat{margin-top:36px;padding-top:36px;border-top:1px solid rgba(255,255,255,.14)}
.story h1{font-size:clamp(2.6rem,10.4vw,5.6rem);color:#fff;line-height:.98}
.story h1 .mark{display:inline;background:none;color:var(--h-pink);padding:0;transform:none}
.story .beat h2{font-size:clamp(2.1rem,8.4vw,4.2rem);color:#fff}
.story .lead{color:var(--h-soft);margin-top:18px;max-width:46ch}
.story .beat-tag{display:inline-block;font:700 .84rem/1 var(--body);color:var(--h-pink);margin-bottom:14px}
.story .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.story .btn-pink{background:var(--h-grad);border-color:transparent;color:#fff;box-shadow:0 10px 30px rgba(81,64,255,.45)}
.story .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.story-note{position:relative;z-index:2;font-size:.74rem;color:rgba(255,255,255,.55);margin:0}
.story-progress,.story-dots,.story-hint{display:none}

/* Telefono dibujado con CSS: se ve sin JavaScript, con movimiento reducido o sin WebGL */
.story-phone{width:min(250px,64vw);aspect-ratio:21/43;border-radius:34px;padding:9px;background:linear-gradient(160deg,#2a1b78,#120640);box-shadow:0 30px 80px rgba(34,38,247,.45),inset 0 0 0 1px rgba(255,255,255,.14);transform:rotate(-4deg)}
.sp-screen{height:100%;border-radius:26px;background:linear-gradient(#1a0c52,var(--h-night));padding:18px 13px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.sp-title{font:900 .98rem/1 var(--display);color:#fff;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center}
.sp-title::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--h-pink)}
.sp-lane{display:grid;gap:6px}
.sp-lane span{font:800 .7rem/1.2 var(--display);color:var(--h-soft)}
.sp-lane i{font:800 .68rem/1 var(--display);font-style:normal;color:var(--h-night);background:#fff;border-radius:10px;padding:9px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Modo historia: tramo fijo con textos que se relevan */
.story-live .story{height:340vh;height:340svh}
.story-live .story-pin{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));display:block;padding:0;overflow:hidden}
.story-live .story-stage{position:absolute;inset:0;align-items:end;padding-bottom:calc(var(--tab-h) + 26px)}
.story-live .story-copy{position:absolute;left:0;right:0;top:0;margin-inline:auto}
.story-live .beat{position:absolute;left:0;right:0;top:26px;margin:0;padding:0;border:0;opacity:0;visibility:hidden;transform:translateY(26px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.story-live .beat.is-past{transform:translateY(-26px)}
.story-live .beat.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.08s,.08s,0s}
.story-live .story-phone{transition:opacity .5s}
.story-live .story-note{position:absolute;left:var(--gut);bottom:calc(var(--tab-h) + 12px)}
.story-live .story-progress{display:block;position:absolute;left:0;right:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));height:3px;background:rgba(255,255,255,.1);z-index:3}
.story-live .story-progress b{display:block;height:100%;background:var(--h-grad);transform-origin:left;transform:scaleX(0)}
.story-live .story-dots{display:flex;flex-direction:column;gap:9px;position:absolute;right:14px;top:50%;z-index:3;transform:translateY(-50%)}
.story-live .story-dots i{width:6px;height:6px;border-radius:6px;background:rgba(255,255,255,.3);transition:height .3s,background .3s}
.story-live .story-dots i.on{height:22px;background:var(--h-pink)}
.story-live .story-hint{display:flex;align-items:center;gap:8px;position:absolute;right:var(--gut);bottom:calc(var(--tab-h) + 10px);z-index:3;font:700 .74rem/1 var(--body);color:rgba(255,255,255,.7);transition:opacity .3s}
.story-live .story-hint::after{content:"";width:2px;height:22px;border-radius:2px;background:linear-gradient(var(--h-pink),transparent);animation:hint 1.6s ease-in-out infinite}
.story-live .story[data-beat-index="1"] .story-hint,.story-live .story[data-beat-index="2"] .story-hint,.story-live .story[data-beat-index="3"] .story-hint{opacity:0}
@keyframes hint{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(8px);opacity:0}}
.story-3d .story-stage canvas{display:block;position:absolute;inset:0;animation:canvas-in .9s ease both}
.story-3d .story-phone{opacity:0}
@keyframes canvas-in{from{opacity:0}to{opacity:1}}

/* Datos del servicio bajo la historia */
.home-facts{background:var(--h-night);color:#fff;padding:0 0 34px}
.home-facts .rail{gap:12px}
.fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fact strong{display:block;font:800 1.08rem/1.2 var(--display);margin-bottom:8px;color:#fff}
.fact span{font-size:.92rem;line-height:1.5;color:var(--h-soft)}

@media(max-width:780px){
  .story-live .story .lead{font-size:1rem;line-height:1.5}
  .story-live .story .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .story-live .story .hero-cta .btn-line{display:none}
  .home-facts .rail-dots{color:var(--h-pink)}
}

@media(min-width:781px){
  .story-live .story{height:320vh}
  .story-live .story-copy{height:100%}
  .story-live .story h1{font-size:clamp(2.8rem,5vw,4.9rem)}
  .story-live .story .beat h2{font-size:clamp(2.4rem,4.4vw,4.2rem)}
  .story-live .beat{top:50%;max-width:min(560px,46vw);transform:translateY(calc(-50% + 30px))}
  .story-live .beat.is-past{transform:translateY(calc(-50% - 30px))}
  .story-live .beat.is-on{transform:translateY(-50%)}
  .story-live .story-stage{align-items:center;justify-items:end;padding:0 9vw 0 0}
  .story-live .story-progress{bottom:0}
  .story-live .story-note,.story-live .story-hint{bottom:22px}
  .story-live .story-dots{right:26px}
  .story-pin{grid-template-columns:1.1fr .9fr;align-items:center;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
  .story-live .story-pin{width:auto}
  .home-facts{padding-bottom:64px}
}

@media(prefers-reduced-motion:reduce){.story-live .story-hint::after{animation:none}}
@media print{.story-stage{display:none}.story{background:#fff;color:#000}}
