/* "E depois da primeira versão?" — o desenho das três cenas (o movimento está em js/depois.js). Antes morava no oferta.css,
   que saiu da página junto com a oferta (21/10), e as cenas ficaram sem estilo. */
.depois-cena { display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 184px; padding: 16px 18px; transition: opacity 200ms ease; }

/* quadros pintados (as mesmas pessoas do resto do site) */
.depois-cena .th1 { background: radial-gradient(ellipse 30% 50% at 30% 28%, rgba(255,241,220,.45), transparent 70%), linear-gradient(182deg, #55575a, #38393c 60%, #1c1d1f 61%, #434447); }
.depois-cena .th2 { background: radial-gradient(ellipse 26% 40% at 70% 34%, rgba(255,241,220,.5), transparent 70%), linear-gradient(184deg, #8a8378, #635d54 58%, #2e2b27 59%, #514b43); }
.depois-cena .th3 { background: radial-gradient(ellipse 30% 50% at 40% 26%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #3d4a37, #2a3327 64%, #151a14 65%, #33402f); }
.depois-cena .th4 { background: radial-gradient(circle at 50% 38%, rgba(18,15,13,.9) 0 12%, transparent 13%), radial-gradient(ellipse 30% 46% at 48% 26%, rgba(255,241,220,.5), transparent 70%), linear-gradient(178deg, #2b3445, #1c2230 58%, #0f1219 59%, #262e3d); }

/* 1 · a V02 nasce embaixo da V01 */
.d-linha { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.d-linha b, .d-linha span { font: 400 11px var(--mono); color: var(--t3); font-variant-numeric: tabular-nums; }
.d-linha span { text-align: right; }
.d-linha.v02 b, .d-linha.v02 span { color: var(--azul-sel); }
.d-trilha { display: flex; gap: 3px; height: 26px; }
.d-trilha i { position: relative; flex: none; width: calc(var(--w) * 1%); border-radius: 5px; background: #24324f; border: 1px solid rgba(153,200,255,.14); }
.d-linha.v02 .d-trilha i { background: #2c55c2; border-color: rgba(153,200,255,.3); }
.d-trilha i.alvo { background: #3a3220; border-color: rgba(255,214,107,.55); }
.d-trilha i.alvo em { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font: 400 10.5px var(--mono); font-style: normal; color: #ffd66b;
  padding: 2px 7px; border-radius: 5px; background: rgba(255,214,107,.1); border: 1px solid rgba(255,214,107,.3); }
.d-linha.v02 .d-trilha i.novo { background: var(--azul-claro); }
.d-linha.v01 { margin-top: 20px; }
.d-mudou { font: 400 11.5px var(--mono); color: var(--t2); text-align: center; }

/* 2 · uma gravação, três peças */
.d-fonte { display: grid; gap: 6px; }
.d-fonte b { font: 400 10.5px var(--mono); color: var(--t3); }
.d-bruto { position: relative; height: 12px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px), #14161a; border: 1px solid var(--linha); }
.d-bruto i { position: absolute; top: -1px; bottom: -1px; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); border-radius: 3px; transform-origin: left center; }
.d-fones { display: flex; justify-content: center; gap: 12px; min-height: 0; flex: 1; }
.d-fone { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 9px; border: 1.5px solid; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; padding-bottom: 7px; }
.d-fone span { font-size: 11px; white-space: nowrap; color: #fff; padding: 1px 6px; border-radius: 5px; background: rgba(8,9,10,.66); }
.d-fone small { font: 400 9.5px var(--mono); color: rgba(255,255,255,.75); }
.d-bruto .a, .d-fone.a { --cor: #5aa2ff; } .d-bruto .b, .d-fone.b { --cor: #78d9b0; } .d-bruto .c, .d-fone.c { --cor: #ffd66b; }
.d-bruto i { background: var(--cor); }
.d-fone { border-color: var(--cor); box-shadow: 0 0 16px -6px var(--cor); }

/* 3 · a ★ é sua */
.d-takes { display: flex; gap: 10px; justify-content: center; }
.d-take { position: relative; width: 30%; aspect-ratio: 16 / 10; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); }
.d-take small { position: absolute; left: 6px; bottom: 4px; font: 400 9.5px var(--mono); color: rgba(255,255,255,.8); }
.d-take.sim { border-color: #cfe3ff; box-shadow: 0 0 18px rgba(90,162,255,.6); }
.d-take em { position: absolute; right: 5px; top: 3px; font-style: normal; font-size: 15px; }
.d-take.sim em { color: #ffd66b; text-shadow: 0 0 10px rgba(255,214,107,.7); }
.d-take.nao { opacity: .4; } .d-take.nao em { color: #ff8a7a; }
.d-motivo { font-size: 12.5px; color: var(--t2); text-align: center; text-wrap: balance; }
.d-motivo b { font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: var(--azul-sel); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }