/* timeline.css — spec G + refino (docs/refino/timeline.md). y relativo ao topo da seção (página 5243,5).
   Topos = topo da maiúscula (.tb). Trilho: janela de x 58 a 1422 (1364), recortada só na horizontal; etapas em
   0 / 369 / 1423 / 1792 (compacta 310, larga 995, calha 59: 310 + 59 + 995 = 1364, G §8.2).
   --extra 170: o fecho que aponta para #destino (a seção escura logo abaixo) e o respiro antes dela.
   Curva das transições de CSS: cubic-bezier(.338,0,.105,1) = App.EASE.rodape (J §6). */
#timeline{--extra:170}
.tl__cab{position:absolute;inset:0 0 auto 0;height:calc(240 * var(--u))}
/* título: letter-spacing calibrado contra G q820 (G-titulo). O -.045em herdado de .d (base.css) deixa a
   caixa de tinta 8 px curta (315 contra os 322 do vídeo); -.033em fecha a borda direita sem mexer no left. */
.tl__tit{left:calc(59 * var(--u));top:calc(146 * var(--u));--cap:45;color:var(--c-ink);letter-spacing:-.033em}

/* ---------- setas: círculo do layout, chevron do K da marca ----------
   No hover o círculo escurece, o chevron fica verde e "passa": a cópia A sai na direção da seta e a B entra
   do outro lado. Na ponta (aria-disabled) o chevron apaga e o hover não responde. */
.tl__seta{position:absolute;top:calc(145.3 * var(--u));width:calc(82 * var(--u));height:calc(82 * var(--u));border-radius:50%;
  background:#f2f2f2;color:var(--c-ink);transform-origin:50% 50%;overflow:hidden;
  transition:background-color .35s cubic-bezier(.215,.61,.355,1),color .35s cubic-bezier(.215,.61,.355,1)}
.tl__seta--ant{left:calc(1195.5 * var(--u));--d:-1}
.tl__seta--prox{left:calc(1289 * var(--u));--d:1}
.tl__seta-in{position:absolute;inset:0;transition:transform .3s cubic-bezier(.215,.61,.355,1)}
.tl__seta:active .tl__seta-in{transform:scale(.88)}
.tl__chev{position:absolute;left:50%;top:50%;width:calc(13 * var(--u));height:calc(19.1 * var(--u));
  margin:calc(-9.55 * var(--u)) 0 0 calc(-6.5 * var(--u));transition:translate .6s cubic-bezier(.338,0,.105,1),opacity .35s}
.tl__seta--prox .tl__chev{scale:-1 1}
.tl__chev--b{translate:calc(var(--d) * -58 * var(--u)) 0}
.tl__seta:not([aria-disabled]):hover{background:var(--c-ink);color:var(--c-limao)}
.tl__seta:not([aria-disabled]):hover .tl__chev--a{translate:calc(var(--d) * 58 * var(--u)) 0}
.tl__seta:not([aria-disabled]):hover .tl__chev--b{translate:0 0}
.tl__seta[aria-disabled]{cursor:default}
.tl__seta[aria-disabled] .tl__chev{opacity:.25}

/* ---------- linha de progresso (entre o título e as setas) ----------
   630 de largura = o trilho (2787) em escala; o trecho verde (308,3) é a janela (1364) e anda com o trilho.
   Marcos no centro de cada etapa: número em cima, quadrado da marca na linha, nome embaixo. */
.tl__linha{position:absolute;left:calc(520 * var(--u));top:calc(146 * var(--u));width:calc(630 * var(--u));height:calc(82 * var(--u))}
.tl__base{position:absolute;left:0;right:0;top:calc(40 * var(--u));height:1px;background:#dcdcdc;transform-origin:0 50%}
.tl__pol{position:absolute;left:0;top:calc(39 * var(--u));width:calc(308.3 * var(--u));height:calc(3 * var(--u));
  background:var(--c-limao);transform-origin:0 50%}
.tl__marco{position:absolute;top:0;width:calc(120 * var(--u));margin-left:calc(-60 * var(--u));height:100%;color:#a9a9a9;
  transition:color .45s cubic-bezier(.215,.61,.355,1)}
.tl__marco-n{left:0;width:100%;text-align:center;top:calc(13 * var(--u));--cap:12;letter-spacing:-.02em}
.tl__marco-q{position:absolute;left:50%;top:calc(37 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));
  margin-left:calc(-3.5 * var(--u));background:#d4d4d4;transition:background-color .45s,rotate .6s cubic-bezier(.338,0,.105,1)}
.tl__marco-t{left:0;width:100%;text-align:center;top:calc(57 * var(--u));--cap:9;white-space:nowrap}
.tl__marco.is-on{color:var(--c-ink)}
.tl__marco.is-on .tl__marco-q{background:var(--c-ink)}
.tl__marco:not(.is-on):hover{color:#555}
.tl__marco:not(.is-on):hover .tl__marco-q{background:var(--c-limao);rotate:45deg}

/* ---------- trilho e etapas ---------- */
.tl__janela{position:absolute;left:calc(58 * var(--u));top:calc(274.1 * var(--u));width:calc(1364 * var(--u));
  height:calc(636 * var(--u));overflow-x:clip;overflow-y:visible;cursor:grab}
.tl__trilho{position:absolute;left:0;top:0;height:100%;width:calc(2787 * var(--u))}
.tl__etapa{position:absolute;top:0;height:100%}
.tl__img{position:absolute;left:0;top:0;overflow:hidden;isolation:isolate}
.tl__etapa--compacta{width:calc(310 * var(--u))}
.tl__etapa--compacta .tl__img{width:calc(310 * var(--u));height:calc(326 * var(--u));border-radius:calc(29 * var(--u));background:var(--c-limao)}
/* título do card 1: calibrado contra G q820 (G-card1-tit). left de 2 para 0 (a caixa saía 2 px para a
   direita); o -.045em herdado de .d já fecha a borda direita dentro de 1 px neste --cap menor (26,5), então
   fica explícito aqui, e não só herdado, para documentar a checagem. */
.tl__etapa--compacta > h3{left:0;top:calc(386.9 * var(--u));--cap:26.5;--lh:36;color:var(--c-ink);letter-spacing:-.045em}
.tl__etapa--compacta > p{left:0;top:calc(488.4 * var(--u));--cap:14;--lh:31;width:calc(320 * var(--u));color:var(--c-ink)}
.tl__etapa--larga{width:calc(995 * var(--u))}
.tl__etapa--larga .tl__img{width:calc(586 * var(--u));height:calc(637 * var(--u));border-radius:calc(34 * var(--u));background:var(--c-grafite)}
/* fundo de cada quadro enquanto a foto abre: a paleta SKNA (limão, grafite, cinza, limão claro) */
.tl__img--etapa3{background:var(--c-cinza)!important}
.tl__img--etapa4{background:var(--c-limao-claro)!important}

/* galeria: as fotos se empilham; a da vez (.is-on) por cima, a que entra abre por clip-path (js) */
.tl__mid{position:absolute;inset:0;margin:0;visibility:hidden}
.tl__mid.is-on{visibility:visible}
.tl__foto{position:absolute;inset:0;overflow:hidden}
.tl__foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.215,.61,.355,1);user-select:none}
.tl__img:hover .tl__foto img{transform:scale(1.045)}
/* sombra só no alto (número) e no pé (legenda); a prancha clara não leva */
.tl__mid::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,12,.34) 0%,rgba(12,12,12,0) 30%),linear-gradient(0deg,rgba(12,12,12,.24) 0%,rgba(12,12,12,0) 24%)}
.tl__mid--claro::after{content:none}
/* legenda: pílula de vidro com o quadrado verde da marca (gira 45° no hover, o corte da sinalética) */
.tl__leg{position:absolute;left:calc(14 * var(--u));bottom:calc(14 * var(--u));z-index:2;display:flex;align-items:center;
  gap:calc(7 * var(--u));height:calc(27 * var(--u));max-width:calc(100% - 28 * var(--u));padding:0 calc(11 * var(--u)) 0 calc(10 * var(--u));
  border-radius:calc(14 * var(--u));background:rgba(12,12,12,.42);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  color:#fff;font:500 calc(11 * var(--u))/1 var(--f-texto);letter-spacing:-.01em;white-space:nowrap}
.tl__leg span{overflow:hidden;text-overflow:ellipsis}
.tl__leg i{flex:none;width:calc(6 * var(--u));height:calc(6 * var(--u));background:var(--c-limao);transition:rotate .7s cubic-bezier(.338,0,.105,1)}
.tl__img:hover .tl__leg i{rotate:45deg}
.tl__mid--claro .tl__leg{background:rgba(255,255,255,.78);color:var(--c-ink)}
.tl__etapa--larga .tl__leg{left:calc(20 * var(--u));bottom:calc(20 * var(--u));height:calc(30 * var(--u));border-radius:calc(15 * var(--u));
  padding:0 calc(13 * var(--u)) 0 calc(12 * var(--u));font-size:calc(12 * var(--u));gap:calc(8 * var(--u))}
/* número grande da etapa (os algarismos sobem de dentro do recorte, App.sobeLetras) */
.tl__num{left:calc(22 * var(--u));top:calc(24 * var(--u));--cap:40;z-index:3;color:#fff;letter-spacing:-.02em;
  transition:color .5s cubic-bezier(.215,.61,.355,1);pointer-events:none}
.tl__etapa--larga .tl__num{left:calc(30 * var(--u));top:calc(30 * var(--u));--cap:54}
.is-claro .tl__num{color:var(--c-ink)}
/* barras da galeria (o relógio de cada foto), no canto oposto ao número */
.tl__barras{position:absolute;right:calc(22 * var(--u));top:calc(27 * var(--u));z-index:3;display:flex;gap:calc(4 * var(--u));pointer-events:none}
.tl__barras i{display:block;width:calc(16 * var(--u));height:2px;border-radius:1px;overflow:hidden;background:rgba(255,255,255,.36);transition:background-color .5s}
.tl__barras b{display:block;width:100%;height:100%;background:#fff;transform-origin:0 50%;transition:background-color .5s}
.tl__etapa--larga .tl__barras{right:calc(30 * var(--u));top:calc(36 * var(--u));gap:calc(5 * var(--u))}
.tl__etapa--larga .tl__barras i{width:calc(22 * var(--u))}
.is-claro .tl__barras i{background:rgba(12,12,12,.16)}
.is-claro .tl__barras b{background:var(--c-ink)}

/* ---------- card escuro e botão ---------- */
.tl__escuro{position:absolute;left:calc(645 * var(--u));top:calc(167.3 * var(--u));width:calc(350 * var(--u));height:calc(469 * var(--u));
  border-radius:calc(29 * var(--u));background:var(--c-ink)}
.tl__escuro h3{left:calc(42 * var(--u));top:calc(41.6 * var(--u));--cap:19;--lh:27.5;color:#fff}
.tl__escuro p{left:calc(42 * var(--u));top:calc(148.6 * var(--u));--cap:14.5;--lh:31;width:calc(265 * var(--u));color:#8e8e8e}
.tl__bt{position:absolute;left:calc(42.5 * var(--u));top:calc(356.1 * var(--u));width:calc(201 * var(--u));height:calc(61 * var(--u));
  border-radius:calc(30.5 * var(--u));background:#fff;color:var(--c-ink);transform-origin:50% 50%;
  transition:background-color .35s cubic-bezier(.215,.61,.355,1)}
.tl__bt:hover{background:var(--c-limao)}
.tl__bt > .t{left:calc(31.5 * var(--u));top:calc(25 * var(--u));--cap:11;font-weight:600}
.tl__bt .tl__tel{position:absolute;left:calc(159.5 * var(--u));top:calc(20.5 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u));
  transition:rotate .6s cubic-bezier(.338,0,.105,1)}
.tl__bt:hover .tl__tel{rotate:-14deg}
/* última etapa: o botão aponta para baixo (#destino); no hover o chevron passa, como nas setas */
.tl__bt-ic{position:absolute;left:calc(159.5 * var(--u));top:calc(20.5 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u));overflow:hidden}
.tl__bch{position:absolute;left:50%;top:50%;width:calc(15 * var(--u));height:calc(10.2 * var(--u));margin:calc(-5.1 * var(--u)) 0 0 calc(-7.5 * var(--u));
  transition:translate .6s cubic-bezier(.338,0,.105,1)}
.tl__bch--b{translate:0 calc(-22 * var(--u))}
.tl__bt:hover .tl__bch--a{translate:0 calc(22 * var(--u))}
.tl__bt:hover .tl__bch--b{translate:0 0}

/* ---------- fecho: aponta para #destino ---------- */
.tl__passa{position:absolute;left:calc(58 * var(--u));top:calc(972 * var(--u));width:calc(1364 * var(--u));height:calc(52 * var(--u));
  display:flex;align-items:center;gap:calc(24 * var(--u));color:var(--c-ink)}
.tl__passa-t{position:relative;--cap:11;color:#6b6b6b;white-space:nowrap;transition:color .35s}
.tl__passa-l{flex:1;height:1px;background:#dcdcdc;transform-origin:0 50%;transition:background-color .35s}
.tl__passa-c{position:relative;flex:none;width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:50%;background:var(--c-limao);
  color:var(--c-ink);overflow:hidden;transition:background-color .35s,color .35s}
.tl__pch{position:absolute;left:50%;top:50%;width:calc(20.6 * var(--u));height:calc(14 * var(--u));margin:calc(-7 * var(--u)) 0 0 calc(-10.3 * var(--u))}
.tl__passa:hover .tl__passa-t{color:var(--c-ink)}
.tl__passa:hover .tl__passa-l{background:var(--c-ink)}
.tl__passa:hover .tl__passa-c{background:var(--c-ink);color:var(--c-limao)}

.tl__seta:focus-visible,.tl__marco:focus-visible,.tl__bt:focus-visible,.tl__passa:focus-visible{outline:2px solid var(--c-limao);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .tl__foto img,.tl__chev,.tl__bch,.tl__leg i,.tl__marco-q,.tl__tel{transition:none}
}