/* ==========================================================================
   Génesis Digital · capa de coreografía ("Sea la luz")
   Guía completa: GenesisDigital_Docs/guias/diseno-scroll-cinematografico.md
   Reglas: el scroll nunca se secuestra; cada escena avanza con el scroll y termina quieta;
   todo lo "pinned" es position:sticky (sin pin-spacer); en móvil / reduced-motion cae al layout estático.
   html.cx = coreografía activa · html.cx-desk = escenas de escritorio (>=900px)
   ========================================================================== */

/* ---------- Preloader: la estrella se dibuja y estalla en luz ---------- */
.pre__star{position:absolute; width:92px; height:92px; fill:rgba(231,184,79,0); stroke:var(--gold-soft); stroke-width:1.5; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; margin-top:-34px;
  animation:preDraw 1.05s cubic-bezier(.65,0,.35,1) .12s forwards, preFill .55s ease 1.05s forwards}
@keyframes preDraw{to{stroke-dashoffset:0}}
@keyframes preFill{to{fill:rgba(231,184,79,.92)}}
.pre__orb{margin-top:-34px; animation:orb 1.15s var(--e2) .95s both}
.pre__txt{top:calc(50% + 62px); animation:pretxt 1.9s var(--e) .1s forwards}

/* ---------- Navegación: pastilla de vidrio flotante ---------- */
.nav{inset:.85rem 0 auto; border-bottom:0; background:none; pointer-events:none}
.nav.stuck{background:none; backdrop-filter:none; border-color:transparent}
.nav .nav__in{pointer-events:auto; width:min(1100px,calc(100% - 1.4rem)); max-width:none; height:58px; padding:0 .5rem 0 1.15rem; margin-inline:auto;
  border-radius:999px; background:rgba(14,26,48,.5); border:1px solid rgba(202,211,228,.14);
  -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.75); transition:background .45s var(--e), border-color .45s, box-shadow .45s}
.nav.stuck .nav__in{background:rgba(11,20,36,.74)}
.nav .nav__links{gap:1.7rem}
.nav .btn{padding:.62rem 1.2rem; font-size:.9rem}
.nav .brand__mark{width:26px; height:26px}
.nav .brand__name{font-size:1.14rem; transition:color .45s}
.nav .nav__links a{transition:color .45s}
.nav.is-light .nav__in{background:rgba(246,242,232,.72); border-color:rgba(20,29,51,.12); box-shadow:0 18px 40px -26px rgba(60,42,12,.45)}
.nav.is-light .brand__name{color:var(--ink)}
.nav.is-light .nav__links a{color:var(--ink-dim)}
.nav.is-light .nav__links a:hover{color:var(--ink)}
.nav.is-light .nav__burger{color:var(--ink)}
.nav .btn{white-space:nowrap}
@media (max-width:880px){
  .nav .nav__in{height:54px; padding-left:.95rem; gap:.5rem}
  .nav .btn{padding:.5rem .85rem; font-size:.76rem}
  .nav .brand__name{font-size:1.02rem}
}

/* ---------- Escena 1 · Manifiesto: la luz crece con el scroll ---------- */
.mani-scene{position:relative}
.mani-pin{position:relative}
.mani-light{position:absolute; left:50%; top:50%; width:96vmin; height:96vmin; margin:-48vmin 0 0 -48vmin; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(231,184,79,.3), rgba(231,184,79,.09) 38%, transparent 68%)}
.mani-pin .mani{position:relative; z-index:1}
.cx-desk .mani-scene{height:240vh}
.cx-desk .mani-pin{position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden}
.cx-desk .mani-pin .mani{padding-block:0}
.cx-desk .mani .w{transition:none; color:#4a566f}

/* ---------- Escena 2 · Stack de tecnología (caso real): la cámara se aleja ---------- */
.tech-scene{position:relative}
.tech-pin{position:relative; padding:clamp(2rem,4vw,3rem) clamp(1.25rem,4.5vw,3rem); max-width:var(--wrap); margin-inline:auto}
.cx-desk .tech-scene{height:270vh}
.cx-desk .tech-pin{position:sticky; top:0; height:100vh; max-width:none; padding:0; display:grid; place-items:center; overflow:hidden}
.cx-desk .tech-pin .casestudy{position:static; max-width:min(640px,52vw); background:none; border:0; padding:0; overflow:visible; text-align:center}
.cx-desk .tech-pin .casestudy::before{display:none}
.cx-desk .casestudy h3{font-size:clamp(1.7rem,3.4vw,2.7rem); max-width:22ch; margin:.9rem auto 0}
.cx-desk .casestudy p{margin:1.1rem auto 0; font-size:1.04rem; max-width:48ch; color:var(--mist)}
.cx-desk .casestudy__tag{display:inline-block}
.cx-desk .casestudy__tech{position:absolute; inset:0; display:block; margin:0; pointer-events:none}
.cx-desk .casestudy__t{position:absolute; left:var(--x); top:var(--y); pointer-events:auto; box-shadow:0 22px 40px -22px rgba(0,0,0,.7); will-change:transform}
.cx-desk .tech-glow{position:absolute; left:50%; top:50%; width:80vmin; height:80vmin; margin:-40vmin 0 0 -40vmin; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(231,184,79,.18), transparent 66%)}

/* ---------- Escena 3 · Servicios: paneles que se apilan ---------- */
.cx-desk .cards{display:block}
.cx-desk .stk{position:sticky; top:calc(104px + var(--i,0) * 16px); margin-bottom:clamp(1.6rem,5vh,3rem); transform-origin:50% 0}
.cx-desk .stk .card{display:grid; grid-template-columns:5.2rem 1fr 13rem; grid-template-areas:"top h3 price" "top p price"; column-gap:2rem; align-items:start;
  min-height:min(34vh,300px); padding:2.4rem 2.6rem; border-radius:24px;
  background:linear-gradient(180deg,#1b2a49,#101c34); box-shadow:0 34px 60px -34px rgba(0,0,0,.85)}
.cx-desk .stk .card__top{grid-area:top; flex-direction:column; gap:1.2rem; align-items:flex-start}
.cx-desk .stk .card h3{grid-area:h3; margin-top:0; font-size:clamp(1.5rem,2.6vw,2.1rem); align-self:end}
.cx-desk .stk .card p{grid-area:p; margin-top:.9rem; font-size:1.04rem; max-width:52ch}
.cx-desk .stk .card__price{grid-area:price; align-self:stretch; margin:0; padding:0 0 0 1.6rem; border-top:0; border-left:1px solid var(--line); flex-direction:column; align-items:flex-start; justify-content:center; gap:.5rem; font-size:1.3rem}
.cx-desk .stk .card__price span{order:-1}
.cx-desk .cards{padding-bottom:6vh}

/* ---------- Sección clara (el "amanecer"): Proceso ---------- */
.sec--paper{position:relative; background:var(--paper); color:var(--ink-dim)}
.sec--paper::before{content:""; position:absolute; left:0; right:0; top:0; height:clamp(90px,14vw,170px); pointer-events:none; transform:translateY(-100%);
  background:linear-gradient(180deg,rgba(246,242,232,0),var(--paper))}
.sec--paper h2,.sec--paper h3,.sec--paper h4{color:var(--ink)}
.sec--paper .sec__head p,.sec--paper p{color:var(--ink-dim)}
.sec--paper .idx{color:var(--gold-deep)}
.sec--paper .tl__line{background:rgba(20,29,51,.14)}
.sec--paper .tl__dot{background:var(--paper); border-color:#b9ae94}
.sec--paper .tl__item.on .tl__dot{border-color:var(--gold-deep); box-shadow:0 0 0 5px rgba(183,137,44,.16), 0 0 16px rgba(183,137,44,.45)}
.sec--paper .tl__n{color:var(--gold-deep)}
.sec--paper .tl__fill{background:linear-gradient(var(--gold),var(--gold-deep)); box-shadow:0 0 12px rgba(183,137,44,.45)}
.sec--paper .eyebrow{color:var(--gold-deep)}

/* ---------- Cierre: la luz del CTA respira con el scroll ---------- */
.cx-desk .cta__glow{transform-origin:50% 60%}

/* Encabezados de sección más amplios + Proceso en dos columnas (título fijo, línea de tiempo corre) */
.sec__head{max-width:min(100%,900px)}
.sec__head h2{max-width:22ch}
@media (min-width:900px){
  .sec--paper .sec.wrap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:clamp(2rem,6vw,5rem); align-items:start}
  .sec--paper .sec__head{position:sticky; top:130px; margin-bottom:0}
  .sec--paper .tl{margin-top:0}
}

/* ---------- Planes: tarjetas que suben con el scroll + foco en el recomendado ---------- */
#planes::before{content:""; position:absolute; inset:-6% -4% auto; height:80%; pointer-events:none; z-index:-1;
  background:radial-gradient(50% 46% at 50% 40%, rgba(231,184,79,.12), transparent 72%)}
.cx-desk .plw{will-change:transform}
.cx-desk .plw:has(.plan--feat){z-index:2}
.cx-desk .plan--feat{box-shadow:0 40px 80px -40px rgba(231,184,79,.45)}

/* ---------- Resultados: la transformación la dirige el scroll ---------- */
.cx-desk .ba-scene{height:230vh}
.cx-desk .ba-pin{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:70px}
.cx-desk .ba-pin .ba__wrap{width:min(980px, calc((100vh - 230px) * 16 / 9)); max-width:100%}
.cx-desk .ba.sweep{animation:none}
.cx-desk .ba-pin .ba__tabs{margin-bottom:1.1rem}
.ba-hint{display:none; margin-top:1.1rem; text-align:center; font-family:var(--cond); letter-spacing:.3em; text-transform:uppercase; font-size:.72rem; color:var(--mist-faint)}
.cx-desk .ba-hint{display:block}

/* ---------- Estático / móvil: sin escenas ---------- */
@media (max-width:899px){
  .mani-pin{padding-block:clamp(5rem,12vw,8rem)}
  .mani-light{width:120vmin; height:120vmin; margin:-60vmin 0 0 -60vmin}
}