/* ==========================================================================
   Alocação de Programadores — estilos específicos desta página.
   Carrega DEPOIS de styles.css e reaproveita tokens, tipografia, motion,
   header, rodapé, popup, .cta / .cta-inline e as animações de entrada.
   ========================================================================== */

/*
  Snap por proximidade, como nas outras páginas de serviço: os blocos
  argumentativos são mais altos que a tela e snap obrigatório tornaria o
  pé deles inalcançável.
*/
.page-alocacao .deck { scroll-snap-type: y proximity; }
.page-alocacao .slide {
  scroll-snap-stop: normal;
  align-content: center;
  padding-block: 4rem;
}

/* ==========================================================================
   Hero — carimbo (mesmo padrão de software.css)
   ========================================================================== */

.stamp {
  flex: 0 0 auto;
  border: var(--line);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  padding: 1rem 1.25rem;
  text-align: center;
  rotate: -3deg;
  max-width: 13rem;
}

.stamp__num {
  display: block;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -.03em;
  /* nada de nowrap: valor comprido tem que quebrar dentro da caixa,
     não atravessar a borda */
  overflow-wrap: break-word;
}

.stamp__label {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.is-active .stamp { animation: pop .5s var(--ease-pop) var(--d, 0s) both; }

/* ==========================================================================
   Slide 2 — A pergunta difícil
   O widget que carrega o argumento da página: o mesmo problema cai na mesa
   de um dev sozinho e de um dev com retaguarda, e os dois desfechos ficam
   lado a lado. As fichas de especialidade acendem pra mostrar que tem gente
   atrás — mas o estado também está escrito em cada ficha ("consultado" /
   "de plantão"), porque borda e preenchimento sozinhos não bastam.
   ========================================================================== */

.hard { margin-top: 1.25rem; }

/* Os botões são a interação principal do bloco: grandes, com cara de botão. */
.hard__asks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .6rem;
}

.hard__ask {
  font: inherit;
  font-weight: bold;
  font-size: .9rem;
  line-height: 1.3;
  text-align: left;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-soft);
  padding: .7rem .9rem;
  cursor: pointer;
  transition: translate .12s var(--ease-pop), box-shadow .12s;
}

.hard__ask:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.hard__ask:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.hard__ask[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.hard__ask[aria-pressed="true"]::before { content: "▸ "; }

.hard__crew { margin-top: 1.25rem; }

.hard__crew-title {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-3);
  border-bottom: var(--line-thin);
  padding-bottom: .35rem;
}

.crew {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem;
}

/* ficha apagada: borda tracejada, texto acinzentado */
.crew__chip {
  border: 2px dashed var(--gray-3);
  background: var(--paper);
  color: var(--gray-3);
  padding: .5rem .7rem .45rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: background .2s, color .2s, translate .2s var(--ease-pop);
}

.crew__name { font-weight: bold; font-size: .88rem; line-height: 1.2; }
.crew__what { font-size: .72rem; line-height: 1.35; }

.crew__state {
  margin-top: auto;
  padding-top: .3rem;
  font-size: .6rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ficha acesa: borda sólida, fundo preto — e a palavra muda junto */
.crew__chip[data-on] {
  border: var(--line);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-soft);
  translate: -2px -2px;
}

.crew__chip[data-on] .crew__state::before { content: "✔ "; }

.hard__panels {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

/* o problema escolhido é repetido dentro da região aria-live, pra quem usa
   leitor de tela saber a qual pergunta os dois desfechos respondem */
.hard__chosen {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .85rem;
  border-bottom: var(--line);
  padding-bottom: .4rem;
}

.hard__panel {
  border: var(--line);
  background: var(--paper);
  padding: .9rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.hard__panel--us { box-shadow: var(--shadow-hard); }
.hard__panel--alone { border-style: dashed; }

.hard__panel h3 {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hard__sub { margin: .15rem 0 0; font-size: .74rem; color: var(--gray-3); }

.hard__figure { margin: 0; }

.hard__big {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -.02em;
}

.hard__big-label {
  display: block;
  font-size: .68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-3);
  margin-top: .25rem;
}

/* exceção semântica ao p&b, e nunca sozinha: o número e o rótulo já dizem */
.hard__panel--alone .hard__big { color: var(--loss); }
.hard__panel--us .hard__big { color: var(--win); }

.hard__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.hard__steps li {
  font-size: .82rem;
  line-height: 1.4;
  border-left: 8px solid var(--gray-2);
  background: var(--gray-1);
  padding: .35rem .6rem;
}

.hard__who {
  margin: 0;
  font-size: .85rem;
  border-top: var(--line-thin);
  border-bottom: var(--line-thin);
  padding: .4rem 0;
}

.hard__answer { margin: 0; font-size: .88rem; line-height: 1.45; }

.hard__also, .hard__slip {
  margin: auto 0 0;
  font-size: .76rem;
  color: var(--gray-3);
  padding-top: .4rem;
}

/* ==========================================================================
   Slide 3 — Quanto tempo até alguém produzindo
   Barras horizontais na mesma escala (16 semanas = 100%). As etapas são
   nomeadas na legenda logo abaixo, na mesma ordem dos pedaços da barra, e
   o número da legenda repete o preenchimento do pedaço correspondente.
   ========================================================================== */

.ramp { margin-top: 1.5rem; max-width: 60rem; }

.ramp__row { margin-bottom: 1.5rem; }

.ramp__title {
  margin: 0 0 .4rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
}

.ramp__total {
  font-size: .72rem;
  font-weight: bold;
  letter-spacing: .06em;
  background: var(--ink);
  color: var(--paper);
  padding: .15rem .5rem;
  white-space: nowrap;
}

.ramp__track {
  border: var(--line-thin);
  border-style: dashed;
  border-color: var(--gray-2);
  background: var(--paper);
  padding: 3px;
}

.ramp__bar {
  display: flex;
  height: 2.6rem;
  min-width: 2rem;
  width: var(--frac);
  border: var(--line);
  overflow: hidden;
  transition: width .6s var(--ease-slam);
}

.ramp__bar--us { box-shadow: var(--shadow-soft); }

.ramp__seg { flex: var(--wk); min-width: 0; }
.ramp__seg:nth-child(odd) { background: var(--ink); }
.ramp__seg:nth-child(even) { background: var(--gray-2); }
.ramp__seg + .ramp__seg { border-left: 2px solid var(--ink); }

.ramp__legend {
  list-style: none;
  counter-reset: ramp;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.ramp__legend li {
  counter-increment: ramp;
  border: var(--line-thin);
  background: var(--paper);
  padding: .3rem .6rem .3rem .4rem;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.ramp__legend li::before {
  content: counter(ramp);
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  display: grid;
  place-content: center;
  font-size: .7rem;
  font-weight: bold;
  border: 2px solid var(--ink);
}

/* o número repete o preenchimento do pedaço da barra que ele nomeia */
.ramp__legend li:nth-child(odd)::before { background: var(--ink); color: var(--paper); }
.ramp__legend li:nth-child(even)::before { background: var(--gray-2); color: var(--ink); }

.ramp__step { flex: 1 1 auto; }

.ramp__wk {
  font-weight: bold;
  white-space: nowrap;
  border-left: 2px solid var(--gray-2);
  padding-left: .45rem;
}

.ramp__scale {
  display: flex;
  justify-content: space-between;
  border-top: var(--line-thin);
  padding-top: .3rem;
  font-size: .62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-3);
}

/* ==========================================================================
   Slide 4 — Não é só programador
   Cada card mostra a linha de conteúdo sem exigir clique (e não abre nada).
   ========================================================================== */

.roles {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .7rem;
}

.role {
  border: var(--line-thin);
  background: var(--paper);
  padding: .7rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.role__name {
  font-weight: bold;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--gray-2);
  padding-bottom: .25rem;
}

.role__what { font-size: .82rem; line-height: 1.4; }

/* ==========================================================================
   Slide 5 — Como a gente escolhe gente
   ========================================================================== */

.picks {
  list-style: none;
  counter-reset: picks;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  max-width: 46rem;
}

.picks__item {
  counter-increment: picks;
  border: var(--line-thin);
  background: var(--paper);
  padding: .7rem .9rem .7rem 3.4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.picks__item::before {
  content: counter(picks);
  position: absolute;
  left: .8rem;
  top: .7rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-content: center;
  background: var(--ink);
  color: var(--paper);
  font-weight: bold;
}

.picks__what { font-weight: bold; font-size: 1rem; line-height: 1.25; }
.picks__why { font-size: .88rem; line-height: 1.45; }

/* ==========================================================================
   Slide 6 — Cases (mesmo padrão de software.css)
   ========================================================================== */

.cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
  margin-top: 1.25rem;
  align-items: start;
}

.case {
  border: var(--line);
  background: var(--paper);
  padding: .9rem 1.1rem;
}

.case--big {
  grid-row: span 2;
  box-shadow: var(--shadow-hard);
}

.case h3 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }

.case__sector {
  display: block;
  font-size: .65rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-3);
  margin: .1rem 0 .5rem;
}

.case p { margin: .4rem 0 0; font-size: .88rem; }

.case__stats {
  display: grid;
  gap: .5rem;
  margin: .75rem 0;
}

.case__stats div { border-top: var(--line-thin); padding-top: .35rem; }
.case__stats dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-3); }
.case__stats dd { margin: 0; font-size: 1.25rem; font-weight: bold; line-height: 1.15; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 860px) {
  .page-alocacao .slide { padding: 2rem 1.25rem; }

  /* no celular o carimbo precisa poder encolher: com flex 0 0 auto e
     max-width none, rótulo longo empurra o bloco pra fora da tela */
  .stamp { rotate: -2deg; max-width: 100%; flex: 0 1 auto; }
  .stamp__num { font-size: 1.8rem; }

  /* pergunta difícil: botões e fichas em coluna única, painéis empilhados */
  .hard__asks { grid-template-columns: 1fr; gap: .45rem; }
  .hard__ask { font-size: .82rem; padding: .55rem .75rem; }

  .crew { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .crew__chip { padding: .4rem .5rem .35rem; }
  .crew__name { font-size: .78rem; }
  .crew__what { font-size: .64rem; }
  .crew__state { font-size: .55rem; }
  .crew__chip[data-on] { translate: 0 0; box-shadow: 3px 3px 0 var(--ink); }

  .hard__panels { grid-template-columns: 1fr; gap: .7rem; }
  .hard__panel { padding: .7rem .8rem .9rem; gap: .4rem; }
  .hard__panel h3 { font-size: .85rem; }
  .hard__big { font-size: 1.6rem; }
  .hard__steps li { font-size: .75rem; }
  .hard__answer { font-size: .82rem; }

  /* barras: a de alocação fica curta demais pra ler, então ganha um mínimo */
  .ramp__bar { height: 2rem; }
  .ramp__bar--us { min-width: 4rem; }
  .ramp__title { font-size: .85rem; }
  .ramp__legend { gap: .3rem; }
  .ramp__legend li { font-size: .68rem; padding: .25rem .45rem .25rem .3rem; gap: .35rem; }
  .ramp__legend li::before { width: 1.1rem; height: 1.1rem; font-size: .6rem; }
  .ramp__scale { font-size: .55rem; }

  .roles { grid-template-columns: 1fr; gap: .5rem; }
  .role__name { font-size: .88rem; }
  .role__what { font-size: .78rem; }

  .picks__item { padding: .6rem .7rem .6rem 2.9rem; }
  .picks__item::before { width: 1.6rem; height: 1.6rem; left: .6rem; font-size: .8rem; }
  .picks__what { font-size: .9rem; }
  .picks__why { font-size: .8rem; }

  .cases { grid-template-columns: 1fr; }
  .case--big { grid-row: auto; }
  .case__stats dd { font-size: 1.05rem; }
}

/* ==========================================================================
   Quem pediu menos movimento, recebe menos movimento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .is-active .stamp { animation: none !important; }
  .crew__chip, .hard__ask, .ramp__bar { transition: none; }
}