/* ─── Champions — layout específico da página ────────────────────
   Só arranjo/espaçamento (grid + gap); todo o visual (título, texto,
   cards numerados, cards de logo) vem de como-funciona.css e
   dash_funcionario.css, sem estilo novo. */

/* Decorações — idênticas a .hero-deco-left/right de index.css (mesmos
   assets, mesmos valores). .champions-hero precisa ser full-bleed (sem
   .container/padding lateral), igual a .hero do index — senão o
   left/right negativo fica relativo à borda com padding em vez da
   borda real da janela, e a decoração não encosta na borda. O
   .container de verdade fica só no wrapper interno, ao redor do
   conteúdo. */
.champions-hero {
  position: relative;
  overflow: visible;
}
.hero-deco-left {
  position: absolute;
  left: -140px;
  top: 160px;
  width: clamp(180px, 22vw, 396px);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.hero-deco-right {
  position: absolute;
  right: -120px;
  top: 130px;
  width: clamp(160px, 20vw, 366px);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

/* Título/intro ao lado dos 4 cards numerados, igual o Figma. */
.champions-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* .cf-intro-text p vem de como-funciona.css em clamp(17px,1.6vw,24px) —
   grande demais pro texto de intro dessa página. */
.champions-hero-grid .cf-intro-text p {
  font-size: 16px;
}

/* No Figma as 4 caixas têm todas a mesma altura fixa (não esticam
   conforme o texto de cada uma) — sem isso o grid iguala cada linha só
   entre si, deixando o card com menos texto (Prosus/Base Ativa) com um
   vazio grande embaixo. */
.champions-hero-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Card das 4 categorias — não existe um componente igual no projeto pra
   reaproveitar (mais compacto que .cf-step, sem o ícone circular
   flutuante), então só isso aqui é novo; a cor de cada um vem das
   classes .badges-group-* (já usadas nas grades de logo abaixo), via
   --accent, pra manter a mesma cor por categoria na página inteira. */
.champions-category-card {
  min-height: 180px;
  background: rgba(8,9,11,0.82);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  padding: 15px 18px;
}

.champions-category-bar {
  display: block;
  width: 44px;
  height: 6px;
  border-radius: 20px;
  background: var(--accent);
  margin-bottom: 10px;
}

.champions-category-number {
  font-family: var(--font-poppins);
  font-weight: 600;
  font-size: 13px;
  color: var(--white);
  margin-bottom: 10px;
}

.champions-category-card h3 {
  font-family: var(--font-poppins);
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.champions-category-card p {
  font-family: var(--font-poppins);
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  line-height: 1.45;
}

/* Seções de categoria direto na página (sem a caixa com borda de
   .badges-group, que é o visual do dashboard interno). */
.champions-categorias {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 56px;
}

@media (max-width: 900px) {
  .champions-hero-grid { grid-template-columns: 1fr; }
  .hero-deco-left,
  .hero-deco-right { display: none; }
}

@media (max-width: 560px) {
  .champions-hero-steps { grid-template-columns: 1fr; }
}