/* componentes.css — gerado a partir de components: do DESIGN.md da RODA. Só usa os
   tokens de tokens.css — nenhuma cor, fonte ou raio literal aqui. Nomes de classe
   iguais aos usados nas peças já publicadas (pecas/fim-de-ciclo, pecas/carrossel,
   pecas/pipeline), para que uma peça nova plugue nelas sem reinventar. */

/* capítulo: bloco de fundo cheio, largura de página. Toda seção nova escolhe UM
   destes sete — nunca duas cores de fundo na mesma seção. */
.cap { padding-block: var(--spacing-xl); padding-inline: var(--spacing-lg); position: relative; overflow: hidden; }

.cap.c-amarelo  { background-color: var(--color-amarelo); color: var(--color-preto); }
.cap.c-preto    { background-color: var(--color-preto);   color: var(--color-branco); }
.cap.c-branco   { background-color: var(--color-branco);  color: var(--color-preto); }
.cap.c-verde    { background-color: var(--color-verde);   color: var(--color-preto); }
.cap.c-azul     { background-color: var(--color-azul);    color: var(--color-branco); }
.cap.c-rosa     { background-color: var(--color-rosa);    color: var(--color-preto); }
/* vermelho: reservado a título e rótulo curto — ver nota de contraste no DESIGN.md */
.cap.c-vermelho { background-color: var(--color-vermelho); color: var(--color-branco); }

/* rótulo em D-DIN Condensed com régua: abre todo capítulo ("rótulo ————— assunto") */
.rotulo {
  font-family: var(--font-label-family);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  line-height: var(--font-label-line-height);
  letter-spacing: var(--font-label-letter-spacing);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 var(--spacing-sm);
}
.rotulo::after { content: ""; flex: 1; height: 2px; background: currentColor; opacity: .9; }

/* título de exibição e de seção */
.titulo-display {
  font-family: var(--font-display-family);
  font-size: var(--font-display-size);
  font-weight: var(--font-display-weight);
  line-height: var(--font-display-line-height);
  letter-spacing: var(--font-display-letter-spacing);
  margin: 0;
}
.titulo-headline {
  font-family: var(--font-headline-family);
  font-size: var(--font-headline-size);
  font-weight: var(--font-headline-weight);
  line-height: var(--font-headline-line-height);
  letter-spacing: var(--font-headline-letter-spacing);
  margin: 0;
}

/* único par de botão/ação da marca */
.botao-acao {
  background-color: var(--color-azul);
  color: var(--color-branco);
  font-family: var(--font-label-family);
  font-size: var(--font-label-size);
  font-weight: var(--font-label-weight);
  letter-spacing: var(--font-label-letter-spacing);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--rounded-md);
  padding: 14px 24px;
  cursor: pointer;
}

/* marcador circular: raio total, como botão e etiqueta */
.marcador-circular {
  width: 20px; height: 20px;
  border-radius: var(--rounded-full);
  background-color: var(--color-vermelho);
}

/* número de destaque: contador, resultado de simulador, série numerada */
.numero-grande {
  font-family: var(--font-numero-family);
  font-size: var(--font-numero-size);
  font-weight: var(--font-numero-weight);
  line-height: var(--font-numero-line-height);
  letter-spacing: var(--font-numero-letter-spacing);
}

/* cartão/bloco: canto arredondado (R011), borda sólida, nunca sombra */
.cartao {
  background-color: var(--color-branco);
  color: var(--color-preto);
  border: 2px solid currentColor;
  border-radius: var(--rounded-md);
  padding: var(--spacing-md);
}

/* foto e botão (R011) */
.foto, figure img { border-radius: var(--rounded-md); }
.botao, button { border-radius: var(--rounded-full); }