/* timeline em cima das cartas (modelo interactive-timeline) */
:root{--linha-h:96px}
.grid{padding-top:calc(var(--linha-h) + env(safe-area-inset-top)) !important;height:100dvh}
.card{width:min(calc(100vw - 30px),calc((100dvh - var(--linha-h) - 40px) * 420 / 770)) !important}
@media (min-width:1024px){.card{width:min(calc(100vw - 80px),calc((100dvh - var(--linha-h) - 70px) * 770 / 420)) !important}}
.linha{position:fixed;left:0;right:0;top:env(safe-area-inset-top);height:var(--linha-h);z-index:55;display:flex;justify-content:center;pointer-events:none}
.linha-trilho{position:relative;width:min(1100px,calc(100vw - 140px));height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:auto;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.linha-trilho::-webkit-scrollbar{display:none}
.linha-faixa{position:relative;display:flex;align-items:flex-start;height:100%;padding:0 50%;width:max-content}
.linha-ponto{position:relative;flex:0 0 auto;width:74px;height:100%;border:0;background:none;padding:0;cursor:pointer;color:#ad8b5c;font:600 11px "Lenia Sans",system-ui,sans-serif;letter-spacing:.14em}
.linha-ponto .num{position:absolute;left:50%;top:22px;transform:translateX(-50%);opacity:.55;transition:opacity .3s,transform .3s}
.linha-ponto .pino{position:absolute;left:50%;top:44px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor;transition:all .35s cubic-bezier(.2,.8,.2,1)}
.linha-ponto::before{content:"";position:absolute;left:0;right:0;top:46px;height:1px;background:rgba(173,139,92,.28)}
.linha-ponto .risco{position:absolute;top:46px;width:1px;height:8px;background:rgba(173,139,92,.3)}
.linha-ponto.ativo .num{opacity:1;transform:translateX(-50%) scale(1.25)}
.linha-ponto.ativo .pino{top:40px;height:34px;width:5px;border-radius:4px;background:#cca476}
.linha-ponto:hover .num{opacity:1}
.linha-nome{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 74px);z-index:56;color:#cca476;font:700 11px "Lenia Sans",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .25s}
.linha-indice{position:fixed;top:max(20px,calc(env(safe-area-inset-top) + 14px));left:max(20px,calc(env(safe-area-inset-left) + 14px));z-index:60;color:#ad8b5c;font:700 11px "Lenia Sans",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:12px 4px}
.linha-indice:hover{opacity:.7}
@media (max-width:640px){:root{--linha-h:88px}.linha-trilho{width:calc(100vw - 124px)}.linha-ponto{width:56px}.linha-nome{top:calc(env(safe-area-inset-top) + 68px);font-size:10px}.linha-indice{display:none}}
@media (prefers-reduced-motion:reduce){.linha-ponto .pino,.linha-ponto .num{transition:none}}
/* enquanto a capa da maçã está fechada, a linha espera */
.linha,.linha-nome,.linha-indice{transition:opacity .5s ease}
#coverScreen:not(.opening) ~ .linha,#coverScreen:not(.opening) ~ .linha-nome,#coverScreen:not(.opening) ~ .linha-indice{opacity:0;pointer-events:none}