/* ==========================================================================
   FINAL — montaña animada con Misión y Visión
   Escena SVG fija (sticky) mientras se recorre un bloque de 420vh: el cielo
   pasa de mañana a noche, las capas de montaña suben, un muñequito recorre
   el sendero hasta la cima y celebra; Misión y Visión entran deslizándose.
   Todo lo mueve modules/final.js según el progreso del scroll.
   Sin filtros SVG de desenfoque: nubes con degradado radial y el brillo del
   sendero es un trazo translúcido (mucho más liviano).
   La escena son capas apiladas (cielo, estrellas, sol, luna, nubes, aves,
   cordilleras, niebla, montaña y muñequito): cada una se mueve con transform u
   opacity en la GPU. Solo mientras la sección está cerca se reservan sus capas
   (will-change); fuera de pantalla se liberan.
   ========================================================================== */

.vzf{--navy:#071E3A;--blue:#0A79E8;--sky:#9BE7F9;--mut:#4d6177;position:relative;font-family:var(--body);color:var(--navy);background:#071E3A;isolation:isolate;height:420vh}   /* alto = recorrido del scroll: más alto, animación más lenta */

/* Escena fija mientras se recorre el bloque */
.vzf-bg{position:sticky;top:0;height:100vh;overflow:hidden;z-index:0;pointer-events:none}
/* overflow visible: al mover una capa no se recorta lo que estaba fuera de su caja */
.vzf-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.vzf-bg svg.vzf-defs{width:0;height:0}
/* Muñequito: capa pequeña (final.js le da tamaño y posición) */
.vzf-bg svg.vzf-hikerl{inset:auto;left:0;top:0;width:200px;height:100px;will-change:transform}
.vzf.is-offscreen .vzf-hikerl{will-change:auto}
.vzf-sky,.vzf-sky i,.vzf-stars,#vzf-clouds{position:absolute;inset:0}
/* Cielo: mañana (k0) → mediodía azul VOZ (k1) → atardecer (k2) → noche (k3), fundidos por opacidad */
.vzf-sky i{display:block;opacity:0}
.vzf-sky .k0{opacity:1;background:linear-gradient(180deg,#bfe6fb,#d9f0fc 55%,#f3fbff)}
.vzf-sky .k1{background:linear-gradient(180deg,#4aa0e8,#8ccdf5 55%,#d2f0fc)}
.vzf-sky .k2{background:linear-gradient(180deg,#1c4c96,#4a8cd2 55%,#ffd6be)}
.vzf-sky .k3{background:linear-gradient(180deg,#061428,#0b2540 55%,#1a4678)}
.vzf-stars,#vzf-moon{opacity:0}
.vzf-layer,.vzf-birds,.vzf-sky i,.vzf-stars{will-change:transform,opacity}
.vzf.is-offscreen .vzf-layer,.vzf.is-offscreen .vzf-birds,.vzf.is-offscreen .vzf-sky i,.vzf.is-offscreen .vzf-stars{will-change:auto}
.vzf-birds.is-gone{visibility:hidden}
.vzf-birds.is-gone .vzf-wing{animation:none}
/* Estrellas: 3 grupos que parpadean a distinto ritmo */
.vzf-tw{animation:vzf-tw 3s ease-in-out infinite}
.vzf-tw1{animation-delay:-1s;animation-duration:2.4s}
.vzf-tw2{animation-delay:-2s;animation-duration:3.6s}
@keyframes vzf-tw{0%,100%{opacity:1}50%{opacity:.25}}
.vzf-drift{animation:vzf-drift 60s linear infinite alternate}
.vzf-drift2{animation:vzf-drift 90s linear infinite alternate-reverse}
@keyframes vzf-drift{from{transform:translateX(-40px)}to{transform:translateX(40px)}}
.vzf-wing{transform-box:fill-box;transform-origin:center;animation:vzf-flap .5s ease-in-out infinite alternate}
@keyframes vzf-flap{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
.vzf-shoot{animation:vzf-shoot 5s ease-in infinite}
/* 420×210 unidades del dibujo, en % del tamaño de la capa */
@keyframes vzf-shoot{0%,78%{transform:translate(0,0);opacity:0}80%{opacity:1}92%{transform:translate(-29%,23%);opacity:0}100%{opacity:0}}
/* La bandera ondea solo cuando ya está arriba (antes de eso está oculta) */
.vzf-flagcloth{transform-box:fill-box;transform-origin:left center}
.vzf-win .vzf-flagcloth{animation:vzf-wave 1.2s ease-in-out infinite alternate}
@keyframes vzf-wave{from{transform:skewY(-6deg) scaleX(1)}to{transform:skewY(5deg) scaleX(.92)}}
.vzf-legs line,.vzf-arms line{transform-box:fill-box;transform-origin:top center}
.vzf-walking .vzf-l1,.vzf-walking .vzf-a2{animation:vzf-step .42s ease-in-out infinite alternate}
.vzf-walking .vzf-l2,.vzf-walking .vzf-a1{animation:vzf-step .42s ease-in-out infinite alternate-reverse}
.vzf-walking .vzf-body{animation:vzf-bob .21s ease-in-out infinite alternate}
@keyframes vzf-step{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes vzf-bob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
.vzf-cheer .vzf-a1{transform:rotate(160deg)}
.vzf-cheer .vzf-a2{transform:rotate(-160deg)}
.vzf-cheer .vzf-body{animation:vzf-jump .5s ease-in-out infinite alternate}
@keyframes vzf-jump{from{transform:translateY(0)}to{transform:translateY(-5px)}}

/* dinero subiendo */
.vzf-money{position:absolute;inset:0;opacity:0;overflow:hidden}
.vzf-money span{position:absolute;bottom:-60px;display:flex;align-items:center;justify-content:center;font-weight:700;animation:vzf-rise 10s linear infinite;will-change:transform}
.vzf-money .c{width:30px;height:30px;border-radius:50%;background:#f6c343;border:3px solid #e0a52a;color:#8a5a00;font-size:15px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.vzf-money .b{width:44px;height:24px;border-radius:4px;background:#3ad0b0;border:2px solid #23a08a;color:#ffffff;font-size:13px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
@keyframes vzf-rise{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translateY(-115vh) rotate(260deg);opacity:0}}

/* Misión y Visión (imágenes PNG) */
.vzf-mvimg{position:absolute;top:9%;width:min(500px,38vw);height:auto;opacity:0;will-change:transform,opacity}
.vzf.is-offscreen .vzf-mvimg{will-change:auto}
/* Misión arriba a la izquierda y Visión debajo, a la derecha */
#vzf-mvm{left:3%;top:5%}
#vzf-mvv{right:3%;top:calc(5% + min(500px,38vw) * .5 + 4px)}
/* logo junto al muñequito en la cima */
.vzf-sb{opacity:0;transform-box:fill-box;transform-origin:100% 50%;transform:scale(.3)}
.vzf-win .vzf-sb{animation:vzf-sbpop .8s cubic-bezier(.3,1.5,.5,1) .5s forwards}
@keyframes vzf-sbpop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
.vzf-sb rect{filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}

/* logro en la cima */
.vzf-achv{position:absolute;inset:0;pointer-events:none}
.vzf-bg .vzf-fw{position:absolute;inset:0;width:100%;height:100%}
.vzf-achv .fw{opacity:0}
.vzf-glowc{opacity:0;transition:opacity 1s}
.vzf-win .vzf-glowc{opacity:.28}
.vzf-ring{opacity:0;transform-box:fill-box;transform-origin:center}
.vzf-confetti{position:absolute;inset:0;overflow:hidden}
.vzf-confetti i{position:absolute;top:-20px;height:14px;border-radius:2px;opacity:0}
.vzf-win .fw{animation:vzf-fw 1.3s ease-out forwards}
.vzf-win .fw2{animation-delay:.3s}.vzf-win .fw3{animation-delay:.6s}.vzf-win .fw4{animation-delay:.9s}.vzf-win .fw5{animation-delay:1.2s}
.vzf-win .vzf-ring{animation:vzf-ring 1.6s ease-out 2}
.vzf-win .vzf-ring.r2{animation-delay:.5s}
.vzf-win .vzf-confetti i{animation-name:vzf-conf;animation-timing-function:cubic-bezier(.3,.6,.5,1);animation-fill-mode:forwards}
@keyframes vzf-fw{0%{opacity:0;transform:scale(.2)}20%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@keyframes vzf-ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(4)}}
@keyframes vzf-conf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(95vh) translateX(40px) rotate(720deg)}}

@media (max-width:760px){
  .vzf{height:380vh}
  .vzf-mvimg{width:94vw;top:6%}
  #vzf-mvm,#vzf-mvv{left:3vw;right:auto;top:6%}
  .vzf-money .c{width:24px;height:24px;font-size:12px}
  .vzf-money .b{width:36px;height:20px;font-size:11px}
}