/* VNS · Escena inmersiva "Hasta lograr el sueño" — v02
   v03: frases en un solo tamaño medio; anteriores en regular (400), cierre en bold (700); degradados progresivos. */
.vns-scene{--navy:#1C1C1E;--mute:#9A9A9A;--dim:.35;position:relative;height:420vh;background:var(--navy);color:#fff}
.vns-scene__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* Medio (canvas) */
.vns-scene__media{position:absolute;inset:0;overflow:hidden}
.vns-scene__canvas,.vns-scene__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vns-scene__canvas{transform-origin:60% 40%;will-change:transform,opacity}
.js .vns-scene__poster{opacity:0}
.vns-scene__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(28,28,30,.88) 0%,rgba(28,28,30,.84) 8%,rgba(28,28,30,.76) 16%,rgba(28,28,30,.64) 24%,rgba(28,28,30,.5) 32%,rgba(28,28,30,.36) 40%,rgba(28,28,30,.23) 48%,rgba(28,28,30,.13) 56%,rgba(28,28,30,.06) 64%,rgba(28,28,30,.02) 72%,rgba(28,28,30,0) 80%),rgba(28,28,30,var(--dim))}

/* Texto */
.vns-scene__copy{position:absolute;left:0;right:0;bottom:0;padding:0 20px calc(48px + env(safe-area-inset-bottom));z-index:2}
.vns-scene__meta{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:22px}
.vns-scene__bar{position:relative;width:72px;height:1px;background:rgba(255,255,255,.2);overflow:hidden}
.vns-scene__bar span{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.vns-scene__lines{position:relative;min-height:7.5rem}
.vns-scene__line,.vns-scene__final{position:absolute;left:0;right:0;bottom:0;margin:0;opacity:0;transform:translateY(18px);filter:blur(8px);
  transition:opacity .5s ease,transform .5s ease,filter .5s ease;pointer-events:none}
.vns-scene__line,.vns-scene__final h2{font-weight:400;font-size:clamp(1.3rem,1.05rem + 1vw,1.875rem);line-height:1.35;letter-spacing:-.005em;max-width:24ch;text-wrap:balance;color:rgba(255,255,255,.94)}
.vns-scene__line.is-on,.vns-scene__final.is-on{opacity:1;transform:none;filter:none;pointer-events:auto;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1)}
.vns-scene__final h2{margin:0;color:#fff;font-weight:700}
.vns-scene__final .btn-cta{margin-top:24px;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--navy);padding:16px 28px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);opacity:0;transform:translateY(10px);transition:opacity .8s .35s ease,transform .8s .35s ease,background .3s}
.vns-scene__final.is-on .btn-cta{opacity:1;transform:none}
.vns-scene__final .btn-cta:hover{background:#E8E8E8}
.vns-scene__final .btn-cta svg{width:14px;height:14px}

/* Indicación inicial */
.vns-scene__hint{position:absolute;left:50%;top:calc(50% + 40px);transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:opacity .6s ease}
.vns-scene__hint i{display:block;width:1px;height:44px;background:linear-gradient(#fff,transparent);animation:vns-hint 1.8s ease-in-out infinite;transform-origin:top}
.vns-scene.is-moving .vns-scene__hint{opacity:0}
@keyframes vns-hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Escritorio: editorial dividido (texto a la izquierda, video completo a la derecha) */
@media (min-width:900px){
  .vns-scene__media{left:auto;right:0;width:min(calc(100svh * .75),62vw);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.03) 5%,rgba(0,0,0,.1) 10%,rgba(0,0,0,.2) 15%,rgba(0,0,0,.33) 20%,rgba(0,0,0,.47) 25%,rgba(0,0,0,.61) 30%,rgba(0,0,0,.74) 35%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.93) 45%,rgba(0,0,0,.98) 50%,#000 56%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.03) 5%,rgba(0,0,0,.1) 10%,rgba(0,0,0,.2) 15%,rgba(0,0,0,.33) 20%,rgba(0,0,0,.47) 25%,rgba(0,0,0,.61) 30%,rgba(0,0,0,.74) 35%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.93) 45%,rgba(0,0,0,.98) 50%,#000 56%)}
  .vns-scene__shade{background:linear-gradient(to top,rgba(28,28,30,.5) 0%,rgba(28,28,30,.36) 8%,rgba(28,28,30,.22) 16%,rgba(28,28,30,.11) 24%,rgba(28,28,30,.04) 32%,rgba(28,28,30,0) 40%),
    linear-gradient(to bottom,rgba(28,28,30,.35) 0%,rgba(28,28,30,.12) 10%,rgba(28,28,30,0) 20%),rgba(28,28,30,var(--dim))}
  .vns-scene__copy{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;
    padding:0 max(32px,calc((100vw - 72rem)/2 + 32px));padding-right:calc(min(calc(100svh * .75),62vw) + 32px)}
  .vns-scene__lines{min-height:9rem}
  .vns-scene__line,.vns-scene__final{top:50%;bottom:auto;transform:translateY(calc(-50% + 18px))}
  .vns-scene__line.is-on,.vns-scene__final.is-on{transform:translateY(-50%)}
  .vns-scene__hint{left:calc(100% - min(calc(100svh * .75),62vw) / 2)}
}

/* Sin movimiento: cuadro final estático con la frase */
@media (prefers-reduced-motion:reduce){
  .vns-scene{height:auto}
  .vns-scene__sticky{position:relative}
  .vns-scene__canvas,.vns-scene__hint,.vns-scene__line,.vns-scene__meta{display:none}
  .js .vns-scene__poster{opacity:1}
  .vns-scene__final{position:relative;opacity:1;transform:none!important;filter:none;pointer-events:auto}
  .vns-scene__final .btn-cta{opacity:1;transform:none}
}
.no-js .vns-scene{height:auto}
.no-js .vns-scene__sticky{position:relative}
.no-js .vns-scene__final{position:relative;opacity:1;transform:none;filter:none}
.no-js .vns-scene__final .btn-cta{opacity:1;transform:none}
.no-js .vns-scene__line,.no-js .vns-scene__meta,.no-js .vns-scene__hint{display:none}

/* Durante la escena se ocultan los botones flotantes (inmersión y legibilidad de las frases) */
#fabs{transition:opacity .4s ease,bottom .5s ease}
body.in-scene #fabs{opacity:0;pointer-events:none}

/* ---------- Receso visual “Nuestro compromiso” + corte limpio hacia la escena ---------- */
.vns-interlude{position:relative;padding-block:clamp(7rem,4rem + 10vw,12rem)}  /* mismo aire arriba y abajo: antesala centrada de la escena */
#contacto{padding-bottom:0!important}
[data-typewriter].is-typing{white-space:pre-wrap}