/* ---- V4: experiencia cinematográfica (scroll) ---- */
.story{position:relative;height:340vh;background:#12090b;color:#fff;margin:0}
.story__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.story__pin::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60vw 60vw at 15% 20%,rgba(242,97,80,.35),transparent 60%),radial-gradient(50vw 50vw at 90% 90%,rgba(191,90,242,.28),transparent 60%),#12090b}
.story__fx{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.story__word{position:absolute;left:0;top:50%;z-index:-1;white-space:nowrap;font-weight:800;font-size:clamp(160px,32vw,520px);letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.09);transform:translate3d(calc(8vw - var(--p) * 60vw),-50%,0);will-change:transform}
.story__media{position:absolute;z-index:1;overflow:hidden;background:#241015;inset:14vh 6vw 14vh 52vw;border-radius:36px;box-shadow:0 50px 100px -30px rgba(0,0,0,.7);will-change:top,left,right,bottom}
.story__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.18);transition:opacity 1s var(--ease),transform 2.2s var(--ease)}
.story__media img.on{opacity:1;transform:scale(1.04)}
.story__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,9,11,.88),rgba(18,9,11,.5) 45%,rgba(18,9,11,.1) 80%),linear-gradient(180deg,transparent 55%,rgba(18,9,11,.6));opacity:calc(var(--e,0) * 1)}
@media (max-width:760px){.story__shade{background:linear-gradient(180deg,rgba(18,9,11,.1) 30%,rgba(18,9,11,.92) 85%)}}
.story__txt{position:absolute;z-index:3;left:6vw;top:50%;width:min(44vw,560px);transform:translateY(-50%)}
.story__txt .eyebrow{margin-bottom:28px}
.eyebrow--light{color:#ff9d80}
.scene{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(40px);filter:blur(10px);pointer-events:none;transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.scene.on{position:relative;opacity:1;transform:none;filter:none;pointer-events:auto}
.scene__n{display:block;font-size:14px;font-weight:700;letter-spacing:.2em;color:#ff9d80;margin-bottom:14px}
.scene h2{font-size:clamp(40px,6.2vw,84px);line-height:1;letter-spacing:-.04em;font-weight:800;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.scene p{margin-top:22px;font-size:clamp(17px,1.7vw,22px);line-height:1.45;color:rgba(255,255,255,.82);max-width:460px}
.scene .btn{margin-top:30px}
.story__dots{position:absolute;z-index:3;left:6vw;bottom:6vh;display:flex;gap:10px;list-style:none}
.story__dots li{width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);transition:background .4s,width .4s var(--ease)}
.story__dots li.on{background:#ff8a5c;width:64px}
.story__hint{position:absolute;z-index:3;right:6vw;bottom:6vh;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);animation:kx-bob 2.4s ease-in-out infinite;opacity:calc(1 - var(--p) * 6)}
.story.is-end .scene h2,.story.is-end .scene p{text-shadow:0 2px 30px rgba(0,0,0,.6)}
@media (max-width:760px){
  .story{height:320vh}
  .story__txt{left:6vw;right:6vw;width:auto;top:auto;bottom:11vh;transform:none}
  .story__txt .eyebrow{display:none}
  .scene{bottom:0;top:auto}
  .scene h2{font-size:clamp(34px,10vw,48px)}
  .story__dots{bottom:5vh}.story__hint{display:none}
}
@media (prefers-reduced-motion:reduce){.story__media img{transition:opacity .3s}.story__hint{animation:none}}

/* footer: contacto + crédito */
.footer__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px 40px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.footer__info div{display:grid;gap:4px}
.footer__info b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}
.footer__info span,.footer__info a{color:var(--ink);font-size:14px}
.footer__info a:hover{color:var(--blue)}
.credit{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);text-align:center}
.credit p{font-size:13px;color:var(--ink-2)}
.credit a{color:var(--blue);font-weight:800;text-decoration:none}
.credit a:hover{text-decoration:underline}
