/* ===========================================================
   BLOCO: PROCESSO / LINHA DO TEMPO
   Paleta: verde musgo + dourado — Matrix Negociações
=========================================================== */

#processo{
  --proc-verde-esc:#141F19;
  --proc-creme:#F7F4EC;
  --proc-creme-2:#EFE9D8;
  --proc-borda:#DDD4B8;
  --proc-dourado:#BE8F2B;
  --proc-dourado-claro:#E4C173;
  --proc-cinza:#8C9389;
  --proc-fonte-titulo:'Fraunces', Georgia, serif;
  --proc-fonte-corpo:'Manrope', sans-serif;
  --proc-duracao:.55s;
  --proc-ease:cubic-bezier(.4,0,.2,1);
}

#processo{background:var(--proc-creme);padding:100px 0 108px;overflow:hidden;position:relative}
#processo::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--proc-creme-2) 1px,transparent 1px),linear-gradient(90deg,var(--proc-creme-2) 1px,transparent 1px);
  background-size:48px 48px;opacity:.5;pointer-events:none
}

.proc-caixa{max-width:1200px;margin:0 auto;padding:0 48px;position:relative}
.proc-cabecalho{margin-bottom:72px;display:flex;flex-direction:column;text-align:center;align-items:center;gap:16px}
.proc-rotulo{font-family:var(--proc-fonte-corpo);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--proc-dourado)}
.proc-titulo{font-family:var(--proc-fonte-titulo);font-size:clamp(1.9rem,2.5vw,2.8rem);font-weight:600;color:var(--proc-verde-esc);line-height:1.15;max-width:580px}

.proc-trilho-externo{position:relative;padding-bottom:8px}
.proc-linha-base{position:absolute;top:28px;left:28px;right:28px;height:1px;background:var(--proc-borda);overflow:hidden;z-index:0}
.proc-linha-progresso{position:absolute;inset:0;background:var(--proc-dourado);width:0%;transition:width 1.6s var(--proc-ease)}

.proc-etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;position:relative;z-index:1}
.proc-etapa{display:flex;flex-direction:column;align-items:flex-start;opacity:0;transform:translateY(28px);transition:opacity var(--proc-duracao) var(--proc-ease),transform var(--proc-duracao) var(--proc-ease)}
.proc-etapa.visivel{opacity:1;transform:translateY(0)}

.proc-marcador{position:relative;margin-bottom:28px;flex-shrink:0}
.proc-circulo{width:56px;height:56px;border-radius:50%;border:1px solid var(--proc-borda);background:var(--proc-creme);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:background .5s,border-color .5s}
.proc-etapa.visivel .proc-circulo{background:var(--proc-verde-esc);border-color:var(--proc-verde-esc)}
.proc-etapa--final.visivel .proc-circulo{background:var(--proc-dourado);border-color:var(--proc-dourado)}
.proc-numero{font-family:var(--proc-fonte-titulo);font-size:17px;color:var(--proc-cinza);line-height:1;transition:color .5s}
.proc-etapa.visivel .proc-numero{color:var(--proc-creme)}
.proc-etapa--final.visivel .proc-numero{color:var(--proc-verde-esc)}

.proc-pulso{position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--proc-dourado);opacity:0;z-index:1}
.proc-etapa.visivel .proc-pulso{animation:proc-pulsar 2.8s ease-out infinite}
.proc-etapa--final.visivel .proc-pulso{animation:none}
@keyframes proc-pulsar{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

.proc-conteudo{display:flex;flex-direction:column;gap:10px;padding-right:16px}
.proc-etiqueta{font-family:var(--proc-fonte-corpo);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--proc-cinza);opacity:0;transition:opacity .4s ease .25s}
.proc-etapa.visivel .proc-etiqueta{opacity:1}
.proc-etiqueta--destaque{color:var(--proc-dourado)}

.proc-nome{font-family:var(--proc-fonte-titulo);font-size:clamp(1.4rem,2vw,1.9rem);font-weight:600;color:var(--proc-verde-esc);line-height:1.2;opacity:0;transform:translateY(8px);transition:opacity .45s ease .15s,transform .45s ease .15s}
.proc-etapa.visivel .proc-nome{opacity:1;transform:translateY(0)}

.proc-descricao{font-family:var(--proc-fonte-corpo);font-size:1.2em;font-weight:400;color:#4A534A;line-height:1.65;opacity:0;transition:opacity .45s ease .3s}
.proc-etapa.visivel .proc-descricao{opacity:1}

.proc-detalhes{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.proc-detalhe{font-family:var(--proc-fonte-corpo);background-color:var(--proc-verde-esc);font-size:.8em;font-weight:600;color:var(--proc-creme);padding:5px 13px;border:1px solid var(--proc-verde-esc);border-radius:15px;opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease;display:inline-block}
.proc-etapa.visivel .proc-detalhe:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.38s}
.proc-etapa.visivel .proc-detalhe:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.5s}

@media(max-width:900px){
  .proc-etapas{grid-template-columns:repeat(2,1fr);gap:48px 24px}
  .proc-linha-base{display:none}
}
@media(max-width:580px){
  .proc-caixa{padding:0 24px}
  .proc-etapas{grid-template-columns:1fr;gap:40px}
}