*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;display:flex;justify-content:center;overflow-x:hidden}
.stage{position:relative;width:700px;min-height:2265px;overflow:clip;background:#35a8c4;box-shadow:0 18px 55px rgba(0,0,0,.34)}
.sky-fixed{position:fixed;top:0;left:50%;width:700px;height:100vh;transform:translateX(-50%);background:url('../assets/fondo.png') center top/700px auto no-repeat;z-index:0;pointer-events:none}
.hero-lock{position:sticky;top:0;width:700px;height:430px;background:url('../assets/fondo.png') center top/700px auto no-repeat;z-index:5;pointer-events:none}
/* Nube/máscara suave para que el PNG se oculte con naturalidad al pasar por el encabezado */
.hero-lock:after{content:"";position:absolute;left:0;right:0;bottom:-92px;height:190px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.42) 62%,rgba(255,255,255,0) 100%);filter:blur(18px);opacity:.95}
.timeline-wrap{position:relative;z-index:2;margin-top:0;padding-bottom:0;min-height:1830px}
.timeline-png{display:block;width:700px;height:auto;user-select:none;-webkit-user-drag:none;will-change:transform;animation:introRise .75s ease-out both}
@keyframes introRise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){
  .stage{width:100vw;min-height:324vw}
  .sky-fixed{width:100vw;background-size:100vw auto}
  .hero-lock{width:100vw;height:61vw;background-size:100vw auto}
  .hero-lock:after{bottom:-13vw;height:27vw;filter:blur(2.6vw)}
  .timeline-wrap{min-height:260vw}
  .timeline-png{width:100vw}
}