/* timeline.css (celular) — como atuamos (#timeline), fundo branco. Ver js/m/timeline.js e
   docs/refino/m-faixa-timeline.md.
   Desenho em 390: título, linha de progresso com os quatro marcos e o carrossel nativo (scroll-snap) de cards de
   296u com 12u de calha: o próximo card aparece 62u. Foto do card na proporção 296 × 316 (a dos recortes do
   desktop), por dentro do painel. Etapas 1 e 3 no cinza da marca; 2 e 4 no card escuro. Curva das transições: cubic-bezier(.338,0,.105,1) =
   App.EASE.rodape. */
#timeline{background:#fff;color:var(--c-ink);padding:calc(88 * var(--u)) 0 calc(76 * var(--u))}

/* ---------- cabeçalho ---------- */
.tl__tit{font-size:calc(54 * var(--u));line-height:.94;letter-spacing:-.035em;color:var(--c-ink)}
.tl__msk{display:block;overflow:hidden;padding:.1em 0 .04em;margin:-.1em 0 -.04em}
.tl__l{display:block;white-space:nowrap}

/* linha de progresso: o trecho verde é a janela sobre o carrossel (largura e x postos pelo JS, em fração da largura
   rolável); marcos no centro de cada card: número em cima, quadrado da marca na linha, nome embaixo. Os marcos são
   botões de 84 × 62u (no mínimo 44 px reais). */
.tl__linha{position:relative;margin-top:calc(26 * var(--u));height:calc(62 * var(--u))}
.tl__base{position:absolute;left:0;right:0;top:calc(26 * var(--u));height:1px;background:#dcdcdc;transform-origin:0 50%}
.tl__pol{position:absolute;left:0;top:calc(25 * var(--u));width:30%;height:calc(3 * var(--u));background:var(--c-limao);transform-origin:0 50%}
.tl__marco{position:absolute;top:0;width:calc(84 * var(--u));margin-left:calc(-42 * var(--u));height:100%;color:#767676;
  transition:color .45s cubic-bezier(.215,.61,.355,1)}
.tl__marco-n{position:absolute;left:0;right:0;top:calc(4 * var(--u));text-align:center;font-size:calc(14 * var(--u));line-height:1;letter-spacing:0}
.tl__marco-q{position:absolute;left:50%;top:calc(23 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));margin-left:calc(-3.5 * var(--u));
  background:#cfcfcf;transition:background-color .45s,rotate .6s cubic-bezier(.338,0,.105,1)}
.tl__marco-t{position:absolute;left:0;right:0;top:calc(39 * var(--u));text-align:center;white-space:nowrap;
  font:600 calc(11.5 * var(--u))/1.2 var(--f-texto);letter-spacing:-.005em}
.tl__marco.is-on{color:var(--c-ink)}
.tl__marco.is-on .tl__marco-q{background:var(--c-ink)}
.tl__marco:active .tl__marco-q{background:var(--c-limao);rotate:45deg;transition-duration:.1s}

/* ---------- carrossel ---------- */
.tl__trilho{position:relative;display:flex;align-items:stretch;gap:calc(12 * var(--u));margin-top:calc(24 * var(--u));
  padding:0 var(--pad);scroll-padding:0 var(--pad);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline-offset:-2px}
.tl__trilho::-webkit-scrollbar{display:none}
/* card: painel com a foto por dentro (6u de borda). Claro = cinza da marca; escuro = o card preto do desktop */
.tl__card{position:relative;flex:0 0 calc(296 * var(--u));display:flex;flex-direction:column;padding:calc(6 * var(--u));
  border-radius:calc(26 * var(--u));background:var(--c-cinza);scroll-snap-align:start;scroll-snap-stop:always}
.tl__card--escuro{background:var(--c-ink);color:#fff}

/* quadro da galeria: as fotos se empilham; a da vez (.is-on) por cima, a que entra abre pelo corte (js) */
.tl__img{position:relative;flex:none;aspect-ratio:296 / 316;border-radius:calc(20 * var(--u));overflow:hidden;isolation:isolate;
  background:var(--c-limao);-webkit-user-select:none;user-select:none}
/* fundo de cada quadro enquanto a foto abre: a paleta SKNA (limão, grafite, cinza, limão claro), como no desktop */
.tl__img--planning{background:var(--c-grafite)}
.tl__img--etapa3{background:var(--c-cinza)}
.tl__img--etapa4{background:var(--c-limao-claro)}
.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;-webkit-user-drag:none;pointer-events:none}
/* 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,.36) 0%,rgba(12,12,12,0) 32%),linear-gradient(0deg,rgba(12,12,12,.3) 0%,rgba(12,12,12,0) 26%)}
.tl__mid--claro::after{content:none}
/* legenda: pílula de vidro com o quadrado verde da marca (gira 45° no toque, o corte da sinalética) */
.tl__leg{position:absolute;left:calc(12 * var(--u));bottom:calc(12 * var(--u));z-index:2;display:flex;align-items:center;gap:calc(7 * var(--u));
  height:calc(28 * var(--u));max-width:calc(100% - 24 * var(--u));padding:0 calc(12 * var(--u)) 0 calc(10 * var(--u));border-radius:calc(14 * var(--u));
  background:rgba(12,12,12,.46);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  color:#fff;font:500 calc(11.5 * var(--u))/1 var(--f-texto);letter-spacing:-.005em;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:active .tl__leg i{rotate:45deg;transition-duration:.25s}
.tl__mid--claro .tl__leg{background:rgba(255,255,255,.8);color:var(--c-ink)}
/* número grande da etapa: os algarismos sobem de dentro do recorte */
.tl__num{position:absolute;left:calc(18 * var(--u));top:calc(16 * var(--u));z-index:3;display:flex;overflow:hidden;padding-top:.06em;
  font-size:calc(56 * var(--u));line-height:.9;letter-spacing:-.03em;color:#fff;pointer-events:none;transition:color .5s cubic-bezier(.215,.61,.355,1)}
.tl__dig{display:block}
.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(18 * var(--u));top:calc(26 * 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,.38);transition:background-color .5s}
.tl__barras b{display:block;width:100%;height:100%;background:#fff;transform-origin:0 50%;transition:background-color .5s}
.is-claro .tl__barras i{background:rgba(12,12,12,.16)}
.is-claro .tl__barras b{background:var(--c-ink)}

/* texto do card */
.tl__txt{display:flex;flex-direction:column;flex:1;padding:calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u))}
.tl__h{font-size:calc(28 * var(--u));line-height:1;letter-spacing:-.03em}
.tl__p{margin-top:calc(12 * var(--u));font-size:calc(15 * var(--u));line-height:1.5;color:#2b2b2b;text-wrap:pretty}
.tl__p{margin-bottom:calc(22 * var(--u))}
.tl__card--escuro .tl__p{color:#a3a3a3}
/* botão do card escuro: pílula branca; no toque fica limão e encolhe um pouco */
.tl__bt{display:inline-flex;align-items:center;gap:calc(16 * var(--u));align-self:flex-start;margin-top:auto;height:calc(50 * var(--u));
  padding:0 calc(18 * var(--u)) 0 calc(22 * var(--u));border-radius:calc(25 * var(--u));background:#fff;color:var(--c-ink);
  font:600 calc(14 * var(--u))/1 var(--f-texto);letter-spacing:-.01em;transition:background-color .3s,transform .3s cubic-bezier(.215,.61,.355,1)}
.tl__bt:active{background:var(--c-limao);transform:scale(.96);transition-duration:.08s}
.tl__bt-ic{position:relative;display:block;width:calc(20 * var(--u));height:calc(20 * var(--u));overflow:hidden}
.tl__tel{width:100%;height:100%}
.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:active .tl__bch--a{translate:0 calc(22 * var(--u))}
.tl__bt:active .tl__bch--b{translate:0 0}
/* "Próxima etapa" (cards claros): pílula escura com o chevron do K em limão, que passa para a direita no toque */
.tl__bt--prox{background:var(--c-ink);color:#fff}
.tl__bt--prox:active{background:var(--c-grafite)}
.tl__rch{position:absolute;left:50%;top:50%;width:calc(9.5 * var(--u));height:calc(14 * var(--u));margin:calc(-7 * var(--u)) 0 0 calc(-4.75 * var(--u));
  color:var(--c-limao);transition:translate .6s cubic-bezier(.338,0,.105,1)}
.tl__rch--b{translate:calc(-22 * var(--u)) 0}
.tl__bt--prox:active .tl__rch--a{translate:calc(22 * var(--u)) 0}
.tl__bt--prox:active .tl__rch--b{translate:0 0}

/* ---------- fecho: aponta para #destino ----------
   O círculo fica à esquerda: o canto de baixo à direita é do chip do menu. A linha inteira é o alvo do toque. */
.tl__passa{position:relative;display:flex;align-items:center;gap:calc(16 * var(--u));margin-top:calc(40 * var(--u));
  padding-top:calc(24 * var(--u));padding-bottom:calc(4 * var(--u));color:var(--c-ink)}
.tl__passa-l{position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:#dcdcdc;transform-origin:0 50%}
.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 .3s,color .3s,transform .3s cubic-bezier(.215,.61,.355,1)}
.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-tx{display:flex;flex-direction:column;gap:calc(4 * var(--u))}
.tl__passa-tx b{font:600 calc(16 * var(--u))/1.2 var(--f-texto);letter-spacing:-.02em}
.tl__passa-tx span{font:500 calc(13 * var(--u))/1.35 var(--f-texto);letter-spacing:-.01em;color:#6b6b6b}
.tl__passa:active .tl__passa-c{background:var(--c-ink);color:var(--c-limao);transform:scale(.94);transition-duration:.08s}

.tl__marco:focus-visible,.tl__bt:focus-visible,.tl__passa:focus-visible{outline:2px solid var(--c-limao);outline-offset:3px}
.tl__trilho:focus-visible{outline:2px solid var(--c-limao)}

/* ---------- tablet (820): dois cards inteiros e o começo do terceiro ---------- */
@media (min-width:700px){
  .tl__card{flex-basis:calc((100vw - 2 * var(--pad) - 12 * var(--u) - 72px) / 2)}
  .tl__linha{margin-top:calc(30 * var(--u))}
  /* o card do tablet tem ~240u (338 px): o tipo de dentro desce um pouco para caber como no celular, e em px
     continua maior que o do celular (texto de 19,6 px, legenda de 14 px) */
  .tl__h{font-size:calc(24 * var(--u))}
  .tl__p{font-size:calc(14 * var(--u))}
  .tl__num{font-size:calc(48 * var(--u))}
  .tl__leg{font-size:calc(10 * var(--u));height:calc(25 * var(--u))}
  .tl__bt{height:calc(44 * var(--u));font-size:calc(12.5 * var(--u))}
  .tl__txt{padding:calc(18 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u))}
}
@media (prefers-reduced-motion:reduce){
  .tl__leg i,.tl__marco-q,.tl__bch,.tl__rch,.tl__bt,.tl__passa-c{transition:none}
}