/* Seção da linha do tempo <he-process> (he-process.js).
   Título, subtítulo e etapas centralizados. A linha enche do dourado ao verde; a última etapa fica verde. */
.pc { padding: 128px 0; border-top: 1px solid rgba(150, 180, 225, 0.07); }
.pc-in { max-width: 1360px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 56px; }
.pc-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 860px; margin: 0 auto; }
.pc-eyebrow { display: block; font: 600 11px 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #FFC30F; }
.pc-head h2 { margin: 0; font: 600 clamp(34px, 4vw, 54px)/1.06 'Funnel Display', sans-serif; letter-spacing: -0.025em; color: #D9C8B7; text-wrap: balance; }
.pc-head h2 span { color: #58D417; }
.pc-head p { margin: 0; max-width: 640px; font: 400 18px/1.6 'Plus Jakarta Sans', sans-serif; color: #A3B1C8; text-wrap: pretty; }

he-process { --gap: 24px; --node: 44px; position: relative; display: block; max-width: 1180px; width: 100%; margin: 0 auto; }

/* trilho: do centro da primeira bolinha ao centro da última */
.pc-track { position: absolute; top: calc(var(--node) / 2 - 1px); left: calc((100% - 2 * var(--gap)) / 6); right: calc((100% - 2 * var(--gap)) / 6); height: 2px; border-radius: 2px; background: rgba(150, 180, 225, 0.14); }
.pc-track i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #FFC30F, #FFC30F 55%, #58D417); box-shadow: 0 0 14px rgba(255, 195, 15, 0.45); transform: scaleX(0); transform-origin: left; transition: transform 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.2s; }
.is-in .pc-track i { transform: scaleX(1); }

.pc-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pc-step { --c: #FFC30F; --lit: calc(0.2s + var(--i) * 0.75s); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.pc-step:last-child { --c: #58D417; }
.pc-node { position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 15px 'Funnel Display', sans-serif; color: #8090AC; background: #06101F; border: 1px solid rgba(150, 180, 225, 0.25); transition: background 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s; transition-delay: var(--lit); }
.is-in .pc-node { background: var(--c); border-color: var(--c); color: #06101F; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent), 0 0 26px color-mix(in srgb, var(--c) 55%, transparent); }

.pc-card { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 22px 18px; border-radius: 16px; border: 1px solid rgba(150, 180, 225, 0.12); background: #0B1A30; opacity: 0.35; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.6s, box-shadow 0.6s; transition-delay: var(--lit); }
.is-in .pc-card { opacity: 1; transform: none; }
.is-in .pc-step:last-child .pc-card { border-color: rgba(88, 212, 23, 0.45); background: radial-gradient(260px 160px at 50% 0%, rgba(88, 212, 23, 0.14), transparent 70%), #0B1A30; box-shadow: 0 0 40px -10px rgba(88, 212, 23, 0.4); }
.pc-when { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.pc-card h3 { margin: 0; font: 600 21px/1.2 'Funnel Display', sans-serif; color: #F5F6FA; }
.pc-card p { margin: 0; font: 400 14px/1.6 'Plus Jakarta Sans', sans-serif; color: #A3B1C8; text-wrap: pretty; }
.pc-see { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 14px; border-radius: 10px; background: rgba(88, 212, 23, 0.06); border: 1px solid rgba(88, 212, 23, 0.2); }
.pc-see small { font: 700 9.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #58D417; }
.pc-see span { font: 500 13.5px/1.45 'Plus Jakarta Sans', sans-serif; color: #DDEBD3; }

/* tablet e celular: linha do tempo vertical na lateral esquerda, número na linha e cartão ao lado */
@media (max-width: 900px) {
  .pc { padding: 72px 0; }
  .pc-in { padding: 0 20px; gap: 36px; }
  .pc-head { gap: 16px; }
  .pc-head h2 { font-size: 32px; }
  .pc-head p { font-size: 16px; }
  he-process { --node: 38px; }
  .pc-track { display: none; }
  .pc-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pc-step { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; padding-bottom: 16px; }
  .pc-step:last-child { padding-bottom: 0; }
  /* trecho de linha do número até o próximo, enchendo na vez de cada etapa */
  .pc-step:not(:last-child)::before, .pc-step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: calc(var(--node) + 6px); bottom: 6px; width: 2px; border-radius: 2px; }
  .pc-step:not(:last-child)::before { background: rgba(150, 180, 225, 0.14); }
  .pc-step:not(:last-child)::after { background: #FFC30F; box-shadow: 0 0 10px rgba(255, 195, 15, 0.4); transform: scaleY(0); transform-origin: top; transition: transform 0.75s linear; transition-delay: var(--lit); }
  .pc-step:nth-child(2)::after { background: linear-gradient(180deg, #FFC30F, #58D417); }
  .is-in .pc-step::after { transform: scaleY(1); }
  .pc-node { flex: none; font-size: 13px; }
  .pc-card { align-items: flex-start; text-align: left; gap: 8px; padding: 16px; border-radius: 14px; transform: translateX(8px); }
  .pc-when { font-size: 10px; }
  .pc-card h3 { font-size: 18px; }
  .pc-card p { font-size: 13.5px; }
  .pc-see { align-items: flex-start; text-align: left; margin-top: 4px; padding: 10px 12px; }
  .pc-see span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-track i, .pc-node, .pc-card, .pc-step::after { transition: none; }
}