/* Seção "depois do envio" v3: linha do tempo + cena das 22h04 */
.depois .eyebrow{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violeta-txt)}

/* Linha do tempo */
.linha{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
.linha li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:16px;padding-bottom:30px}
.linha li:last-child{padding-bottom:0}
.linha li::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:linear-gradient(var(--violeta),rgba(116,51,242,.12));transform-origin:top;transform:scaleY(0);transition:transform .9s ease}
.linha li:last-child::before{display:none}
.linha .no{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--lilas);background:radial-gradient(circle at 30% 25%,rgba(138,82,255,.55),rgba(116,51,242,.14));border:1px solid var(--borda-2);box-shadow:0 0 0 0 rgba(116,51,242,.5);transition:box-shadow .8s ease}
.linha .no svg{width:22px;height:22px}
.linha .quando{margin:2px 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violeta-txt)}
.linha h3{margin:0 0 6px;font-size:19px;font-weight:800;line-height:1.25}
.linha p{margin:0;color:var(--texto-2);font-size:15px;line-height:1.55}
.linha p.quando{color:var(--violeta-txt);font-size:11.5px;line-height:1.3}
.vis .linha li::before,.linha.vis li::before{transform:scaleY(1)}
.linha.vis li:nth-child(2)::before{transition-delay:.5s}
.linha.vis .no{box-shadow:0 0 0 7px rgba(116,51,242,.12)}

/* Cena */
.cena{margin:30px 0 0;display:grid;gap:14px;padding:18px;border-radius:22px;border:1px solid var(--borda-2);
  background:radial-gradient(120% 70% at 85% -10%,rgba(116,51,242,.35),transparent 60%),linear-gradient(180deg,#0f0a22,#07040f)}
.cena-rot{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violeta-txt)}
.cena-titulo{margin:6px 0 0;font-size:clamp(22px,5.4vw,28px);font-weight:800;line-height:1.15;text-wrap:balance}
.relogio{margin:16px 0 0;display:flex;align-items:baseline;gap:12px}
.relogio .hh{font-size:clamp(52px,14vw,76px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,var(--lilas) 70%,#8a52ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(138,82,255,.35)}
.relogio .dia{font-size:13px;font-weight:600;color:var(--texto-3);letter-spacing:.04em}
.msg{margin:14px 0 0;display:flex;gap:10px;align-items:flex-end}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--borda-2);color:var(--lilas);font-weight:800;font-size:14px}
.balao{background:rgba(255,255,255,.08);border:1px solid var(--borda);border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:15px;line-height:1.45;color:var(--texto)}

.pista{padding:16px;border-radius:16px;border:1px solid var(--borda);background:rgba(255,255,255,.03)}
.pista.ruim{border-color:rgba(255,143,163,.35)}
.pista.bom{border-color:rgba(21,235,149,.4)}
.pista-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pista-nome{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--erro)}
.pista.bom .pista-nome{color:var(--verde)}
.pista-min{font-size:13px;font-weight:600;color:var(--texto-2);font-variant-numeric:tabular-nums}
.pista-min b{font-size:26px;font-weight:800;color:var(--texto)}
.barra{height:10px;border-radius:99px;background:rgba(255,255,255,.07);margin:10px 0 14px;overflow:hidden}
.barra i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.ruim .barra i{background:linear-gradient(90deg,#ff8fa3,#ff5d7a)}
.bom .barra i{background:linear-gradient(90deg,#15eb95,#6dffc5)}
.cena.vis .ruim .barra i{width:100%}
.cena.vis .bom .barra i{width:13%;transition-delay:.9s}
.pista-txt{margin:0;font-size:15px;line-height:1.5;color:var(--texto)}
.pista-txt em{color:var(--texto-2)}
.pista-fim{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--borda);display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--erro)}
.pista-fim.ok{color:var(--verde)}
.ponto{flex:none;width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;opacity:.9}
.ruim .ponto{background:transparent;border:2px solid currentColor}
.cena.vis .ok .ponto{animation:pulso 2.2s ease-out infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(21,235,149,.55)}100%{box-shadow:0 0 0 12px rgba(21,235,149,0)}}

.marcos{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.marcos li{display:grid;grid-template-columns:72px 1fr;gap:10px;font-size:15px;line-height:1.45}
.marcos .h{font-size:12.5px;font-weight:700;color:var(--verde);font-variant-numeric:tabular-nums;padding-top:2px}
.cena figcaption{margin:2px 2px 0;font-size:12px;color:var(--texto-3)}

/* Revelação (só quando o JS roda) */
.js .linha li,.js .cena .msg,.js .cena .pista{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .linha.vis li,.js .cena.vis .msg,.js .cena.vis .pista{opacity:1;transform:none}
.js .linha.vis li:nth-child(2){transition-delay:.25s}.js .linha.vis li:nth-child(3){transition-delay:.5s}
.js .cena.vis .msg{transition-delay:.3s}.js .cena.vis .ruim{transition-delay:.7s}.js .cena.vis .bom{transition-delay:1.1s}

@media (min-width:960px){
  .cena{margin-top:0;padding:26px;gap:18px}
  .linha li{padding-bottom:42px}
  .linha h3{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .js .linha li,.js .cena .msg,.js .cena .pista{opacity:1;transform:none;transition:none}
  .linha li::before{transform:scaleY(1);transition:none}
  .barra i{transition:none}.cena .ruim .barra i{width:100%}.cena .bom .barra i{width:13%}
  .cena.vis .ok .ponto{animation:none}
}

@media (min-width:960px){.depois .linha{position:sticky;top:96px}}