/* Una obra con SEI®: cronología editorial a pantalla completa */
.crono{height:760vh;position:relative}
.crono__sticky{position:sticky;top:var(--ctop,0px);height:calc(100vh - var(--ctop,0px));overflow:hidden;color:#fff;background:#0d1330}
.tl__bg{position:absolute;left:0;top:0;width:25%;height:25%;transform:scale(4.4);transform-origin:0 0}
.tl__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(9px) saturate(.9) brightness(.55);opacity:0;transition:opacity 1.6s ease;will-change:opacity}
.tl__bg img.on{opacity:1}
.tl__head{position:absolute;left:var(--pad,24px);top:28px;font-size:15px;font-weight:500;opacity:.8;z-index:3}
.tl__stage{position:absolute;left:0;right:0;top:12%;height:46%}
.tl__item{position:absolute;left:50%;top:0;height:100%;aspect-ratio:16/9;margin:0;transform:translate3d(-50%,0,0);will-change:transform,opacity;backface-visibility:hidden}
.tl__frame{position:relative;width:100%;height:100%}
.tl__frame img{width:100%;height:100%;object-fit:cover;display:block}
.tl__item:not(.cur) .tl__frame{opacity:.75}
.tl__frame{transition:opacity .6s ease}
@keyframes tlin{from{clip-path:inset(0 0 100% 0);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:none}}
.tl__frame .c{position:absolute;width:14px;height:14px;border-color:rgba(255,255,255,.85);border-style:solid;border-width:0}
.c1{left:-10px;top:-10px;border-left-width:1px!important;border-top-width:1px!important}
.c2{right:-10px;top:-10px;border-right-width:1px!important;border-top-width:1px!important}
.c3{left:-10px;bottom:-10px;border-left-width:1px!important;border-bottom-width:1px!important}
.c4{right:-10px;bottom:-10px;border-right-width:1px!important;border-bottom-width:1px!important}
.tl__tag{position:absolute;left:0;bottom:-30px;font-size:13px;font-weight:500;opacity:.85}
.tl__dim{position:absolute;right:0;top:-30px;font-size:12px;opacity:.6}
.tl__caption{position:absolute;left:0;right:0;top:calc(12% + 46% + 52px);text-align:center;padding:0 24px;z-index:2}
.tl__caption.in > *{animation:tlcap .7s cubic-bezier(.19,1,.22,1) both}
.tl__caption.in > *:nth-child(2){animation-delay:.06s}.tl__caption.in > *:nth-child(3){animation-delay:.12s}
@keyframes tlcap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tl__week{font-size:clamp(34px,3.6vw,56px);letter-spacing:-.03em;line-height:1}
.tl__week .digits{font-weight:300}
.tl__phase{font-size:15px;font-weight:500;margin-top:10px;opacity:.75}
.tl__desc{font-size:20px;font-weight:500;margin:8px auto 0;max-width:560px;line-height:1.35}
.tl__ruler{position:absolute;left:12%;right:12%;bottom:28px;z-index:2}
.tl__scale{position:relative;height:30px;border-bottom:1px solid rgba(255,255,255,.3);margin:0 110px 10px 110px}
.tl__tick{position:absolute;bottom:0;width:1px;height:8px;background:rgba(255,255,255,.5)}
.tl__tick b{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:400;opacity:.7}
.tl__tick.k{height:14px;background:#F2492E}.tl__tick.k b{color:#F2492E;opacity:1}
.tl__dot{position:absolute;bottom:-5px;width:9px;height:9px;border-radius:50%;background:#fff;margin-left:-4.5px;box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.tl__lane{display:grid;grid-template-columns:110px 1fr 110px;align-items:center;gap:0;margin-top:8px;font-size:14px;font-weight:500}
.tl__track{position:relative;height:4px;background:rgba(255,255,255,.15);overflow:hidden}
.tl__fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0)}
.tl__fill--s{background:#fff}.crono.done .tl__fill--s{background:#F2492E}
.tl__fill--t{background:rgba(255,255,255,.45)}
.tl__st{text-align:right}
.crono.done [data-st-s]{color:#F2492E}
@media (max-width:820px){
  .crono{height:680vh}
  .tl__head{top:16px;left:20px}
  .tl__stage{top:11%;height:auto}
  .tl__item{width:calc(100vw - 40px);height:auto;aspect-ratio:16/9}
  .tl__caption{top:calc(11% + (100vw - 40px) * .5625 + 36px)}
  .tl__week{font-size:40px}
  .tl__desc{font-size:17px}
  .tl__ruler{left:20px;right:20px;bottom:20px}
  .tl__scale{margin:0 0 10px 0}
  .tl__lane{grid-template-columns:84px 1fr 72px}
  .tl__dim{display:none}
}
@media (prefers-reduced-motion:reduce){.crono{height:auto}.crono__sticky{position:relative;height:auto;padding:40px 0}.tl__stage{position:relative;height:auto;display:flex;gap:16px;overflow-x:auto;top:0}.tl__item{position:relative;left:0;transform:none!important;opacity:1!important;height:220px;flex:none}.tl__caption,.tl__ruler{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin-top:24px}}
