/* Capítulo 9 · Como começamos (palco claro, 1200 x 800).
   Três fases em linha do tempo (setas verdes), o cartão do que medimos juntos e o contato.
   Cartões brancos flutuantes, raio 12, filete (--ui-borda), sombra curta. */

.comeco { position: absolute; inset: 0; color: var(--grafite); }

.comeco-topo { position: absolute; left: 40px; right: 40px; top: 32px; display: flex; align-items: baseline; gap: 18px; }
.comeco-titulo { margin: 0; font-family: var(--fonte-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--verde-profundo); }
.comeco-sub { margin: 0; font-size: 18px; color: var(--texto-secundario); }

/* fases */
.comeco-fases { position: absolute; left: 40px; right: 40px; top: 92px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.comeco-seta {
  height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 40px 0 18px;
  background: var(--verde-sispeq); color: var(--branco);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}
.comeco-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22); font-family: var(--fonte-mono); font-size: 15px; font-weight: 500;
}
.comeco-seta-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 22px; }
.comeco-col { display: flex; flex-direction: column; }
.comeco-fase {
  flex: 1; margin-top: 14px; min-height: 178px; padding: 20px 22px;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta);
}
.comeco-fase ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.comeco-fase li { position: relative; padding-left: 20px; font-size: 19px; line-height: 1.4; }
.comeco-fase li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--verde-sispeq); }

/* cartões de baixo */
.comeco-cartao { position: absolute; top: 386px; height: 378px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta); }
.comeco-cartao-titulo { margin: 0 0 8px; font-family: var(--fonte-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--verde-profundo); }
.comeco-medidas { left: 40px; width: 724px; padding: 18px 22px 14px; }
.comeco-contato { left: 780px; width: 380px; padding: 18px 24px; }

.comeco-medida { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--ui-borda); }
.comeco-medida-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde-sispeq); font-family: var(--fonte-mono); font-size: 14px; font-weight: 500;
}
.comeco-medida-nome { font-size: 19px; font-weight: 600; line-height: 1.3; }
.comeco-medida-pedido { margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--texto-secundario); }
.comeco-medida .selo-disp { font-size: 12.5px; padding: 4px 12px; }
.comeco-meta { text-align: right; }
.comeco-meta-valor { font-family: var(--fonte-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--verde-sispeq); }
.comeco-meta-rot { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--texto-secundario); }
.comeco-pips { margin-top: 7px; display: flex; gap: 4px; justify-content: flex-end; }
.comeco-pip { position: relative; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--verde-sispeq); }
.comeco-pip i { position: absolute; inset: 0; border-radius: 50%; background: var(--verde-sispeq); }

.comeco-pessoa { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--ui-borda); }
.comeco-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-sispeq); color: var(--branco); font-family: var(--fonte-display); font-weight: 800; font-size: 24px;
}
.comeco-pessoa-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 23px; line-height: 1.1; color: var(--verde-profundo); }
.comeco-pessoa-papel { margin-top: 3px; font-size: 16.5px; color: var(--texto-secundario); }