/* ============================================================
   PortalDeLicitaciones — SCROLLYTELLING LAYER (editorial)
   Sticky pinned scene · blur reveals · scroll progress · parallax
   · kinetic accent · hover microinteractions. Layered on top of
   styles-editorial.css; content stays visible if JS never runs.
   ============================================================ */

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--teal), var(--blue, #2563EB));
  z-index:120; box-shadow:0 0 14px rgba(15,158,132,.55);
  transition:width .12s linear;
}

/* ---------- blur reveal upgrade for existing .reveal ---------- */
.anim .reveal{
  filter:blur(10px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),
             transform .85s cubic-bezier(.2,.7,.2,1),
             filter .85s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform, filter;
}
.anim .reveal.in{ filter:blur(0); }

/* generic blur-rise utility */
.anim .br{ opacity:0; transform:translateY(30px); filter:blur(12px);
  transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1), filter .9s cubic-bezier(.19,1,.22,1); }
.anim .br.in{ opacity:1; transform:none; filter:blur(0); }

/* ---------- kinetic hero accent (replaces typewriter) ---------- */
.hero h1 .kinetic{ display:inline-block; font-style:italic; }
.anim .hero h1 .kinetic{ opacity:0; transform:translateY(10px); filter:blur(12px);
  transition:opacity 1s cubic-bezier(.19,1,.22,1) .35s, transform 1s cubic-bezier(.19,1,.22,1) .35s, filter 1s cubic-bezier(.19,1,.22,1) .35s; }
.anim .hero h1 .kinetic.in{ opacity:1; transform:none; filter:blur(0); }

/* ---------- dynamic background drift ---------- */
@keyframes drift{ 0%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(2.4%, -2%, 0) } 100%{ transform:translate3d(0,0,0) } }

/* ============================================================
   STICKY SCROLLYTELLING SCENE
   ============================================================ */
.sticky-scene{ padding:108px 0 120px; position:relative; }
.ss-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:start; margin-top:30px; }

/* pinned column */
.ss-stickycol{ position:sticky; top:96px; align-self:start; }
.ss-stage{ border-radius:20px; overflow:hidden; position:relative; }
.ss-stage-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--paper-2, #FAFBFC); }
.ss-dots{ display:flex; gap:6px; }
.ss-dots i{ width:10px; height:10px; border-radius:50%; background:#E0E6EF; }
.ss-dots i:nth-child(1){ background:#F2655A; } .ss-dots i:nth-child(2){ background:#F4BE4F; } .ss-dots i:nth-child(3){ background:#54C08A; }
.ss-stage-title{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--slate-d); text-transform:uppercase; transition:opacity .4s; }
.ss-live{ margin-left:auto; display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--teal-deep); }
.ss-live span{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(15,158,132,.5); animation:pulse 2.2s infinite; }

.ss-stage-body{ position:relative; min-height:316px; padding:26px; }
.ss-panel{ position:absolute; inset:26px; opacity:0; transform:translateY(16px) scale(.99); filter:blur(7px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), filter .6s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.ss-panel.active{ opacity:1; transform:none; filter:none; pointer-events:auto; }

/* panel 0 — profile */
.ssp-rows{ display:grid; gap:14px; }
.ssp-row{ display:grid; grid-template-columns:20px 1fr 90px; gap:12px; align-items:center; font-size:14px; color:var(--ink); }
.ssp-ck{ width:20px; height:20px; border-radius:50%; background:var(--score-hi-bg); color:var(--score-hi); display:grid; place-items:center; font-size:11px; font-weight:700; }
.ssp-ck.part{ background:var(--mist); color:var(--slate); }
.ssp-bar{ height:6px; border-radius:100px; background:var(--mist); overflow:hidden; }
.ssp-bar i{ display:block; height:100%; background:var(--teal-grad); border-radius:100px; }
.ssp-foot{ display:flex; align-items:baseline; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.ssp-big{ font-family:var(--display); font-weight:600; font-size:40px; letter-spacing:-0.02em; color:var(--ink); }
.ssp-foot span:last-child{ font-family:var(--mono); font-size:12px; color:var(--slate); }

/* panel 1 — scores */
.ssp-scores{ display:grid; gap:12px; }
.ssp-score{ display:grid; grid-template-columns:42px 1fr auto; gap:13px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.ssr{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:14px; border:3px solid; }
.ssr.g{ color:var(--score-hi); border-color:var(--score-hi); }
.ssr.a{ color:var(--score-mid); border-color:var(--score-mid); }
.ssp-score b{ font-size:14px; color:var(--ink); display:block; letter-spacing:-0.01em; }
.ssp-score small{ font-family:var(--mono); font-size:11px; color:var(--slate); }
.ssp-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:6px; font-weight:700; }
.ssp-tag.g{ background:var(--score-hi-bg); color:var(--score-hi); }
.ssp-tag.a{ background:var(--score-mid-bg); color:var(--score-mid); }

/* panel 2 — draft */
.ssp-doc{ border:1px solid var(--line); border-radius:13px; padding:20px; display:flex; flex-direction:column; gap:11px; background:var(--paper); }
.ssp-doc-h{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.ssp-doc-ic{ width:26px; height:26px; border-radius:7px; background:var(--blue-soft, #EAF0FE); color:var(--blue, #2563EB); display:grid; place-items:center; }
.ssp-dl{ height:9px; border-radius:5px; background:var(--mist); }
.ssp-dl.w95{ width:95% } .ssp-dl.w88{ width:88% } .ssp-dl.w80{ width:80% } .ssp-dl.w75{ width:75% } .ssp-dl.w60{ width:60% }
.ssp-stamp{ align-self:flex-start; margin-top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-deep); background:var(--teal-soft); padding:5px 11px; border-radius:6px; }

/* panel 3 — strengths/gaps */
.ssp-fd{ display:grid; gap:16px; }
.ssp-fdrow{ display:grid; grid-template-columns:80px 1fr auto; gap:12px; align-items:center; font-size:13.5px; color:var(--slate-d); }
.ssp-fdbar{ height:8px; border-radius:100px; background:var(--mist); overflow:hidden; }
.ssp-fdbar i{ display:block; height:100%; border-radius:100px; }
.ssp-fdbar i.g{ background:var(--score-hi); } .ssp-fdbar i.a{ background:var(--score-mid); }
.ssp-fd b{ font-family:var(--mono); font-size:13px; }
.ssp-fd b.g{ color:var(--score-hi); } .ssp-fd b.a{ color:var(--score-mid); }
.ssp-rec{ margin-top:6px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--slate-d); line-height:1.5; }
.ssp-rec .mono{ display:block; font-size:11px; letter-spacing:.06em; margin-bottom:5px; }

/* animated data flow line */
.ss-flow{ width:100%; height:18px; display:block; }
.ss-flow-dash{ stroke-dasharray:40 280; }
.anim .ss-flow-dash{ animation:flowmove 3.4s linear infinite; }
@keyframes flowmove{ from{ stroke-dashoffset:320 } to{ stroke-dashoffset:0 } }

/* dot nav */
.ss-dotnav{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.ss-dotnav span{ width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:all .3s; }
.ss-dotnav span.on{ background:var(--teal); width:22px; border-radius:100px; }

/* narrative steps */
.ss-steps{ display:flex; flex-direction:column; }
.ss-step{ min-height:76vh; display:flex; flex-direction:column; justify-content:center; transition:opacity .5s ease, transform .5s ease; }
.ss-steps.ss-ready .ss-step{ opacity:.3; }
.ss-steps.ss-ready .ss-step.active{ opacity:1; }
.ss-num{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--teal-deep); letter-spacing:.1em; }
.ss-step h3{ font-family:var(--display); font-size:clamp(28px, 3.4vw, 40px); font-weight:600; letter-spacing:-0.01em; margin-top:14px; }
.ss-step p{ color:var(--slate-d); font-size:17px; margin-top:16px; max-width:440px; line-height:1.6; }

/* ============================================================
   HOVER MICROINTERACTIONS
   ============================================================ */
.src-cell, .stat-card, .cap, .plan, .orgc, .mkt-card, .backer, .vsample{ transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; }
.stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); border-color:var(--line-2); }
.src-cell{ position:relative; }
.src-cell::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.src-cell:hover::after{ transform:scaleX(1); }
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s; }
.btn:hover::after{ transform:translateX(120%); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .ss-grid{ grid-template-columns:1fr; gap:30px; }
  .ss-stickycol{ position:relative; top:0; }
  .ss-step{ min-height:auto; opacity:1; padding:18px 0; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display:none; }
  .anim .reveal{ filter:none !important; }
  .anim .br{ opacity:1 !important; transform:none !important; filter:none !important; }
  .anim .hero h1 .kinetic{ opacity:1 !important; transform:none !important; filter:none !important; }
  .ss-panel{ position:relative; inset:auto; opacity:1; transform:none; filter:none; margin-bottom:14px; }
  .ss-step{ opacity:1; }
}