/* Cartão digital — Leonardo Cabello, Wow Soluções.
   Carregado depois do card.css (o mesmo do cartão do Wincer): aqui fica só o que é deste cartão.
   A luz verde do retrato manda na paleta; os painéis das cenas são os de gestão de projetos, roteiro e clientes. */

/* ───────── paleta: a luz verde da foto, em vez da vermelha e verde-azulada do outro cartão ───────── */
:root{--red:#46e06a;--teal:#2fb8c4}
.glow--teal{background:radial-gradient(60% 40% at 8% 52%,rgba(70,224,106,.5),transparent 70%)}
.glow--red{background:radial-gradient(60% 42% at 94% 38%,rgba(47,184,196,.4),transparent 70%)}
.diagwrap{background:radial-gradient(60% 50% at 8% 40%,rgba(70,224,106,.13),transparent 70%),radial-gradient(60% 50% at 96% 60%,rgba(47,184,196,.12),transparent 70%)}
.diag{background:linear-gradient(135deg,rgba(70,224,106,.15),rgba(47,184,196,.11))}

/* ───────── retrato: o rosto fica mais alto no quadro e a foto tem 3:4 exato ───────── */
.person{aspect-ratio:765/1020;transform-origin:45% 31%}

/* ───────── título em duas linhas ("Do roteiro à entrega.") ───────── */
.card--title h2{font-size:clamp(4rem,18.5vw,9rem);line-height:.88}

/* ───────── painel: etapas do projeto (o método da Wow) ───────── */
.panel--board{display:grid;gap:16px;align-content:center}
.step{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline}
.step b{font:400 clamp(1.6rem,7.4vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:.006em;font-weight:400}
.step span{font:italic 400 1rem/1.2 var(--serif);color:var(--mute)}
.step i{grid-column:1/-1;display:block;height:3px;border-radius:2px;background:rgba(243,237,228,.16);overflow:hidden}
.step i::after{content:'';display:block;height:100%;width:calc(var(--p)*1%);border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--lime))}
.panel--board small{color:var(--mute);font-size:.92rem}

/* ───────── painel: um trecho de roteiro ───────── */
.code__body .k{color:var(--lime)}
.code__body .who{display:block;padding-left:2ch}

/* ───────── painel: o número que pesa ───────── */
.panel--big{display:flex;flex-direction:column;justify-content:center}
.panel--big b{display:block;font:400 clamp(9rem,46vw,15rem)/.78 var(--display);text-transform:none;text-shadow:0 4px 34px rgba(9,1,1,.8);margin-left:-.02em}
.panel--big span{display:block;margin-top:.9rem;font:italic 400 1.15rem/1.3 var(--serif);color:rgba(243,237,228,.92)}

/* cena com luz: as etapas aparecem uma a uma, as barras se enchem (só no formato "filme") */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .panel--board{align-content:center}
  .step{--n:0;--q:clamp(0,calc(var(--h,1)*8 - var(--n)),1);opacity:var(--q);translate:0 calc((1 - var(--q))*3svh)}
  .step:nth-of-type(2){--n:1}
  .step:nth-of-type(3){--n:2}
  .step:nth-of-type(4){--n:3}
  .step i::after{transform-origin:0 50%;transform:scaleX(var(--q))}
  .panel--board small{opacity:clamp(0,calc(var(--h,1)*8 - 4),1)}
  .panel--big b{translate:calc((1 - var(--e,1))*-14vw) 0}
  .panel--big span{opacity:clamp(0,calc(var(--h,1)*8 - .5),1)}
}

/* celular e janela estreita: painel e texto formam um bloco só, ancorado embaixo (legenda de filme).
   Antes o painel ficava preso no topo e o texto no rodapé, e em tela alta sobrava um vazio no meio. */
@media (max-width:899px) and (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .card--beat{display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) calc(var(--dock) + 3svh)}
  .card--beat .card__txt{position:relative;left:auto;right:auto;bottom:auto;width:100%;order:2}
  .card--beat .panel{position:relative;left:auto;right:auto;top:auto;width:100%;height:auto;order:1;margin:0 0 clamp(18px,3.5svh,34px)}
}

@media (min-width:900px){
  .card--title h2{font-size:clamp(6rem,12vw,12rem)}
  .panel--big b{font-size:clamp(11rem,17vw,17rem)}
}