/* ==========================================================================
   NEXUS theme-final / assets/css/sections/contratacao.css
   Territorio exclusivo da secao #contratacao. Reusa .section, .container,
   .section__head, .eyebrow, .lead, .card, .card__body, .card__title,
   .card__desc, .btn, .btn--primary, .btn--lg, .btn__arrow de 02-base.css e
   03-ui.css. So o que e genuinamente especifico desta secao mora aqui: o
   bloco de destaque da primeira conversa e a grade numerada das quatro
   vias formais.

   So consome tokens de 01-tokens.css. Nenhum hex, nenhum px de raio,
   nenhuma familia de fonte literal. Motion: so transform e opacity, duracao
   sempre multiplicada por var(--motion).
   ========================================================================== */

.contratacao {
  overflow: clip;
}

/* --------------------------------------------------------------------------
   Bloco de destaque: a conversa inicial de quarenta minutos. Superficie
   propria, tingida pela cor de marca, para ficar visualmente distinta dos
   cartoes das outras quatro vias, o caminho pratico de virar cliente.
   Empilha em telas estreitas (coluna), vira linha com o CTA a direita a
   partir de 640px, sem quebrar a leitura em nenhum ponto entre os dois
   extremos.
   -------------------------------------------------------------------------- */

.contratacao__spotlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  margin-block-end: var(--space-10);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-lg);
  border: var(--hairline) solid hsl(var(--primary) / 0.32);
  background:
    linear-gradient(135deg, hsl(var(--primary) / 0.14), transparent 60%),
    hsl(var(--surface-2) / 0.7);
  box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
  .contratacao__spotlight {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.contratacao__spotlight-main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.contratacao__spotlight-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contratacao__spotlight-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  border-radius: var(--radius-full);
  background-color: hsl(var(--primary) / 0.18);
  color: hsl(var(--primary));
  font-size: var(--fs-lead);
}

.contratacao__spotlight-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: hsl(var(--foreground));
}

/* Achado novo desta rodada, encontrado pela sonda de pixel e nao pelo brief:
   no tema claro este paragrafo media 4,11:1 a 4,31:1 em index.html, nos
   quatro viewports, contra os 4,5:1 do §8. A causa e a mesma familia do resto
   da rodada, so que aplicada a SUPERFICIE em vez do glifo: .contratacao__
   spotlight pinta o proprio painel com hsl(var(--surface-2) / 0.7) por baixo
   de um linear-gradient de hsl(var(--primary) / 0.14), e o resultado medido no
   canto onde o texto pousa e rgb(226), nao os rgb(250) que --muted-foreground
   pressupoe. --muted-foreground tem 5,32:1 de folga sobre o branco real e o
   painel come essa folga inteira.

   Quem redefine a propria superficie e obrigado a redefinir o proprio
   -foreground na mesma regra: e a regra do §12 que reprovou a rodada
   anterior, e vale para um componente exatamente como vale para uma pele.
   --faint-foreground e a tinta calibrada para esse pior caso (5,18:1 medidos
   sobre rgb(226), ver o bloco --faint em 01-tokens.css); --muted-foreground
   nao e. No escuro o painel escurece em vez de clarear e os dois passam, mas
   a regra nao muda por tema. */
.contratacao__spotlight-text {
  margin: 0;
  max-width: var(--measure);
  color: hsl(var(--faint-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.contratacao__spotlight-cta {
  flex: none;
  inline-size: 100%;
}

@media (min-width: 640px) {
  .contratacao__spotlight-cta {
    inline-size: auto;
  }
}

.contratacao__spotlight-cta .btn {
  inline-size: 100%;
}

@media (min-width: 480px) {
  .contratacao__spotlight-cta .btn {
    inline-size: auto;
  }
}

/* Defeito reportado pelo dono com captura da secao, agosto de 2026: os
   quatro cartoes (03, White label, tinha menos texto) terminavam em alturas
   diferentes. Causa: este grid sobrescrevia o align-items:stretch padrao de
   CSS Grid com start, entao cada item so ocupava a altura do proprio
   conteudo. .card__body ja e "display:grid; align-content:start; flex:1"
   (03-ui.css): o texto sempre ficou grudado no topo, o unico ingrediente que
   faltava para a CAIXA crescer ate a do maior irmao era o align-items da
   grade em volta. stretch e o valor de fabrica do CSS Grid: a regra abaixo
   so existe para deixar explicito que a decisao e deliberada, nao um
   esquecimento. */
 .contratacao__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--space-6);
  align-items: stretch;
  counter-reset: contratacao-item;
}

.contratacao__item {
  position: relative;
  counter-increment: contratacao-item;
  transition: border-color calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.contratacao__item:hover {
  border-color: hsl(var(--primary) / 0.4);
}

.contratacao__item .card__body {
  position: relative;
  padding-block-start: var(--space-7);
}
/* O degrau alternado interno saiu na 12a rodada: o dono achou torto. Os
   quatro cartoes alinham no topo. */

/* Numero de ordem: contador CSS puro, nao e texto escrito no partial.
   Estritamente decorativo, por isso aria-hidden no span que o carrega.

   Tinta: --faint-foreground. O alfa 0.55 sobre --muted-foreground que morava
   aqui e o mesmo antipadrao que reprovou o indice de #capacidades e a nota
   de #provas; foi varrido junto por grep de "muted-foreground) / 0." para o
   defeito nao voltar por um seletor que a varredura de contraste nao pegou
   so porque o glifo e curto. Ver o bloco --faint em 01-tokens.css. */
.contratacao__item-index {
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline-end: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: hsl(var(--faint-foreground));
  font-variant-numeric: tabular-nums;
}

.contratacao__item-index::before {
  content: counter(contratacao-item, decimal-leading-zero);
}

.contratacao__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  margin-block-end: var(--space-1);
  border-radius: var(--radius-md);
  background-color: hsl(var(--secondary));
  color: hsl(var(--primary));
  font-size: var(--fs-base);
}

/* --------------------------------------------------------------------------
   Telas muito largas: mesma trava de medida do resto do site (§7.3 do
   contrato), o destaque nao vira uma faixa esparramada de ponta a ponta.
   -------------------------------------------------------------------------- */

@media (min-width: 1900px) {
  .contratacao__spotlight-main {
    max-width: calc(var(--measure) * 1.15);
  }
}