/* ============ SEÇÃO 5 · BENTO "A plataforma inteira" ============ */
/* Escopado a #secao-5, classes com prefixo bn- (ver CLAUDE.md do projeto:
   reset local com :where() para não atropelar especificidade de classe —
   bug já vivido na fusão do funil). */
:where(#secao-5, #secao-5 *){box-sizing:border-box}

#secao-5.bn-section{
  position:relative;
  background:var(--neutral-50);
  padding:120px 0;
}

/* ---------- cabeçalho ---------- */
#secao-5 .bn-head{
  max-width:var(--container);
  margin:0 auto 56px;
  padding:0 32px;
}
#secao-5 .bn-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);
  color:var(--primary-600);
  margin:0 0 14px;
}
#secao-5 .bn-head h2{
  font-family:var(--font-sans);
  font-weight:800;
  font-size:clamp(30px, 3.4vw, 44px);
  color:var(--neutral-900);
  letter-spacing:-0.01em;
  margin:0 0 14px;
}
#secao-5 .bn-sub{
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  color:var(--neutral-600);
  max-width:560px;
  margin:0;
}

/* ---------- grid ---------- */
#secao-5 .bn-grid{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(150px, auto);
  grid-auto-flow:dense;
  gap:16px;
}

/* ---------- card base (compacto) ---------- */
#secao-5 .bn-card{
  position:relative;
  background:var(--neutral-0);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

#secao-5 .bn-icon{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-50);
  color:var(--primary-600);
  border-radius:var(--radius-sm);
}
#secao-5 .bn-icon i, #secao-5 .bn-icon svg{ width:18px; height:18px; }

#secao-5 .bn-title{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:15px;
  color:var(--neutral-900);
  margin:0;
}
#secao-5 .bn-desc{
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.5;
  color:var(--neutral-600);
  margin:0;
}

/* selo Andy — pill no canto superior direito (só nos compactos [ANDY]) */
#secao-5 .bn-andy{
  position:absolute;
  top:14px; right:14px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--primary-50);
  border-radius:var(--radius-pill);
  padding:2px 9px 2px 3px;
}
#secao-5 .bn-andy img{
  width:18px; height:18px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
#secao-5 .bn-andy b{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--primary-600);
}

/* badge "em breve" — pill no canto superior direito (cards de roadmap) */
#secao-5 .bn-soon{
  position:absolute;
  top:14px; right:14px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--neutral-600);
  background:var(--neutral-100);
  border:1px dashed var(--neutral-400);
  border-radius:var(--radius-pill);
  padding:3px 9px;
}

/* ---------- destaques (2x2) ---------- */
#secao-5 .bn-feature{
  grid-column:span 2;
  grid-row:span 2;
  padding:22px;
  gap:14px;
}
#secao-5 .bn-feature-head{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#secao-5 .bn-feature .bn-title{ font-size:18px; }
#secao-5 .bn-feature .bn-desc{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* janela do mini-artefato */
#secao-5 .bn-artefact{
  margin-top:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--neutral-50);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-sm);
  padding:12px;
  min-height:0;
}
#secao-5 .bn-dots{ display:flex; gap:6px; margin-bottom:2px; }
#secao-5 .bn-dots div{ width:8px; height:8px; border-radius:50%; background:var(--neutral-300); }

/* assinatura "feito pela Andy" no rodapé do artefato (destaques [ANDY]) */
#secao-5 .bn-art-foot{
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--neutral-200);
  display:flex;
  align-items:center;
  gap:6px;
}
#secao-5 .bn-art-foot img{ width:18px; height:18px; border-radius:50%; object-fit:cover; }
#secao-5 .bn-art-foot span{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--neutral-600);
}

/* ---------- D1: ranking de candidatos ---------- */
#secao-5 .bn-rank{ display:flex; flex-direction:column; gap:6px; }
#secao-5 .bn-rank-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
}
#secao-5 .bn-rank-lead{ background:var(--primary-50); }
#secao-5 .bn-rank-avatar{
  width:24px; height:24px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
#secao-5 .bn-rank-initials{
  display:flex; align-items:center; justify-content:center;
  background:var(--neutral-200);
  color:var(--neutral-700);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
}
#secao-5 .bn-rank-name{
  font-family:var(--font-sans);
  font-size:13px;
  color:var(--neutral-900);
  flex:1;
  min-width:0;
}
#secao-5 .bn-rank-name .mono{ font-family:var(--font-mono); font-weight:700; }
#secao-5 .bn-rank-score{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:var(--neutral-900);
}
#secao-5 .bn-rank-bars{
  display:flex;
  gap:2px;
  width:64px;
  height:6px;
  flex-shrink:0;
}
#secao-5 .bb{ height:100%; border-radius:2px; }
#secao-5 .bb1{ background:var(--primary-300); }
#secao-5 .bb2{ background:var(--primary-400); }
#secao-5 .bb3{ background:var(--primary-500); }
#secao-5 .bb4{ background:var(--primary-600); }

/* ---------- D2: mapeamento com o gestor ---------- */
#secao-5 .bn-map-title{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:13px;
  color:var(--neutral-900);
}
/* planilha de finalistas — gap:1px sobre fundo escuro desenha a grade */
#secao-5 .bn-map-sheet{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.1fr);
  gap:1px;
  background:var(--neutral-200);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
#secao-5 .bn-map-cell{
  background:var(--neutral-0);
  padding:5px 8px;
  font-family:var(--font-sans);
  font-size:12px;
  color:var(--neutral-900);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
#secao-5 .bn-map-head{
  background:var(--neutral-50);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--neutral-500);
}
#secao-5 .bn-map-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  background:var(--success-soft);
  color:var(--success);
  border-radius:var(--radius-pill);
  padding:4px 10px;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:600;
}
#secao-5 .bn-map-status i, #secao-5 .bn-map-status svg{ width:13px; height:13px; }

/* ---------- D3: geração de vaga por IA ---------- */
#secao-5 .bn-vaga-title{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:13px;
  color:var(--neutral-900);
}
#secao-5 .bn-vaga-field{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#secao-5 .bn-vaga-label{
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--neutral-500);
}
#secao-5 .bn-vaga-value{
  font-family:var(--font-sans);
  font-size:13px;
  color:var(--neutral-900);
}
#secao-5 .bn-truncate{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
#secao-5 .bn-vaga-pulse{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  background:var(--primary-50);
  color:var(--primary-600);
  border-radius:var(--radius-pill);
  padding:3px 10px;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:600;
}
#secao-5 .bn-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--primary-500);
  display:inline-block;
  flex-shrink:0;
}
@media (prefers-reduced-motion:no-preference){
  #secao-5 .bn-dot{ animation:bnPulse 1.2s ease-in-out infinite; }
}
@keyframes bnPulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.25; }
}

/* ---------- D4: próximas ações recomendadas ---------- */
/* o artefato do D4 tem pouco conteúdo pro slot 2x2 — as linhas de ação
   centralizam na folga vertical: este auto + o margin-top:auto do
   .bn-art-foot dividem o espaço livre igualmente acima e abaixo */
#secao-5 .bn-dots + .bn-next-row{ margin-top:auto; }
#secao-5 .bn-next-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:var(--neutral-0);
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-sm);
  font-family:var(--font-sans);
  font-size:13px;
  color:var(--neutral-900);
}
#secao-5 .bn-next-row i, #secao-5 .bn-next-row svg{
  width:16px; height:16px;
  color:var(--primary-600);
  flex-shrink:0;
}
#secao-5 .bn-next-row span{ flex:1; min-width:0; }
#secao-5 .bn-badge{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  border-radius:var(--radius-pill);
  padding:3px 8px;
  white-space:nowrap;
  flex-shrink:0;
}
#secao-5 .bn-badge-rec{ background:var(--primary-500); color:#fff; }
#secao-5 .bn-badge-alt{ background:var(--neutral-200); color:var(--neutral-700); }

/* ---------- reveal (stagger) + hover ---------- */
@media (prefers-reduced-motion:no-preference){
  #secao-5 .bn-card{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out),
               box-shadow 180ms var(--ease-out);
  }
  #secao-5 .bn-card.bn-in{
    opacity:1;
    transform:translateY(0);
  }
  #secao-5 .bn-card.bn-in:hover{ transform:translateY(-3px); }
}
#secao-5 .bn-card:hover{
  box-shadow:var(--shadow-md);
}

/* ---------- responsivo ---------- */
/* card largo (2 colunas x 1 linha) — fecha a última linha quando a conta
   de compactos não divide por 4 */
#secao-5 .bn-wide{ grid-column:span 2; }

@media (max-width:1100px){
  #secao-5 .bn-grid{ grid-template-columns:repeat(2, 1fr); }
  #secao-5 .bn-feature{ grid-row:auto; }
}
@media (max-width:700px){
  #secao-5 .bn-grid{ grid-template-columns:1fr; }
  #secao-5 .bn-feature{ grid-column:span 1; }
  #secao-5 .bn-wide{ grid-column:span 1; }
  #secao-5.bn-section{ padding:72px 0; }
  #secao-5 .bn-head{ margin-bottom:36px; }
  /* coluna estreita: célula quebra linha em vez de truncar */
  #secao-5 .bn-map-cell{ white-space:normal; font-size:11px; padding:5px 6px; }
}