/* ===== serviços: lista editorial ===== */
#servicos{background:var(--painel);border-block:1px solid var(--linha)}
.srv-topo{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.srv-topo .sub{margin:0;max-width:38ch}
.srv{list-style:none;padding:0;margin:48px 0 0;border-bottom:1px solid var(--linha)}
.srv-item{
  position:relative;display:grid;align-items:center;
  grid-template-columns:5.5rem minmax(0,1.1fr) minmax(0,1fr) 3rem;gap:24px;
  padding:34px 8px;border-top:1px solid var(--linha);
  transition:color .3s,opacity .7s ease,translate .7s ease;
  isolation:isolate;
}
.srv-item::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--laranja);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.srv-num{font-family:var(--nav);font-weight:500;letter-spacing:.14em;color:var(--laranja);font-size:.95rem;transition:color .3s}
.srv-item h3{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1;transition:color .3s,translate .45s cubic-bezier(.22,1,.36,1)}
.srv-desc{color:var(--suave);max-width:44ch;text-wrap:pretty;transition:color .3s}
.srv-seta{font-size:1.6rem;justify-self:end;color:var(--laranja);transition:color .3s,rotate .45s cubic-bezier(.22,1,.36,1)}
.srv-item:hover::before,.srv-item:focus-within::before{transform:scaleY(1)}
.srv-item:hover h3,.srv-item:hover .srv-num,.srv-item:hover .srv-desc,.srv-item:hover .srv-seta{color:#0a0a0c}
.srv-item:hover .srv-seta{rotate:45deg}

/* ===== processo: linha do tempo com progresso ===== */
.proc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.proc-lado{position:sticky;top:110px}
.proc-lado .sub{max-width:34ch}
.etapas{list-style:none;padding:0;margin:0;position:relative;--prog:0}
.etapas::before,.etapas::after{content:"";position:absolute;left:22px;top:12px;bottom:12px;width:2px;background:var(--linha)}
.etapas::after{background:var(--laranja);transform-origin:top;transform:scaleY(var(--prog))}
.etapa{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:28px;padding:0 0 clamp(36px,6vw,64px)}
.etapa:last-child{padding-bottom:0}
.etapa-ponto{
  position:relative;z-index:1;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--fundo);border:2px solid var(--linha);
  font-family:var(--nav);font-weight:500;font-size:.85rem;letter-spacing:.06em;color:var(--suave);
  transition:border-color .4s,color .4s,background .4s;
}
.etapa.ativa .etapa-ponto{border-color:var(--laranja);color:#0a0a0c;background:var(--laranja)}
.etapa h3{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.05;color:var(--suave);transition:color .4s;padding-top:6px}
.etapa.ativa h3{color:var(--creme)}
.etapa p{margin-top:10px;color:var(--suave);max-width:46ch;text-wrap:pretty}

@media (max-width:900px){
  .srv-item{grid-template-columns:3rem minmax(0,1fr) 2rem;gap:6px 16px;padding:26px 4px}
  .srv-desc{grid-column:2 / 3;grid-row:2}
  .srv-seta{grid-row:1;grid-column:3}
  .proc{grid-template-columns:1fr}
  .proc-lado{position:static}
}
@media (prefers-reduced-motion:reduce){
  .srv-item,.srv-item::before,.srv-item h3,.srv-seta{transition:none !important}
}