/* ==========================================================================
   Componentes — equivalentes estáticos das peças do design system
   Nomenclatura: bloco__elemento--modificador, em kebab-case.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sobrelinha numerada de seção (SectionLabel)
   -------------------------------------------------------------------------- */
.sobrelinha {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-sobrelinha);
  text-transform: uppercase;
  color: var(--nc-mostarda);
}

.sobrelinha__indice::after {
  content: '—';
  margin-left: var(--espaco-2);
}

.sobrelinha--clara {
  color: var(--nc-areia);
}

/* --------------------------------------------------------------------------
   Títulos
   -------------------------------------------------------------------------- */
.titulo-hero {
  font-size: var(--texto-hero);
  line-height: var(--entrelinha-hero);
  margin-top: var(--espaco-5);
}

.titulo-secao {
  font-size: var(--texto-h2);
  line-height: var(--entrelinha-titulo);
  margin-top: var(--espaco-4);
  max-width: 720px;
}

.titulo-secao--menor {
  font-size: var(--texto-h2-menor);
  line-height: var(--entrelinha-subtitulo);
}

.titulo-secao--claro {
  color: var(--texto-sobre-escuro);
}

/* Segunda linha em itálico: a voz da marca -------------------------- */
.destaque-italico {
  display: block;
  font-style: italic;
}

.destaque-italico--chocolate {
  color: var(--nc-chocolate);
}

.destaque-italico--areia {
  color: var(--nc-areia);
}

.destaque-italico--mostarda {
  display: inline;
  color: var(--nc-mostarda);
}

/* --------------------------------------------------------------------------
   Parágrafos e notas
   -------------------------------------------------------------------------- */
.paragrafo {
  font-size: var(--texto-lead);
  line-height: var(--entrelinha-corpo);
  max-width: var(--medida-leitura);
}

.bloco-introducao .paragrafo {
  margin-top: var(--espaco-7);
}

.paragrafo--claro {
  color: var(--texto-sobre-escuro-suave);
  font-size: var(--texto-corpo-sm);
}

.nota-secao {
  margin-top: var(--espaco-7);
  font-size: var(--texto-fino);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-discreto);
  max-width: var(--medida-leitura);
}

.nota-secao--clara {
  color: var(--texto-sobre-escuro-discreto);
  font-size: var(--texto-legenda);
  max-width: 460px;
}

/* --------------------------------------------------------------------------
   Botão (Button)
   Preenchidos escurecem no hover; contornados ganham o tint mostarda.
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 44px;
  padding: var(--espaco-3) var(--espaco-8);
  border: var(--traco-fino) solid transparent;
  border-radius: var(--raio-pilula);
  font-size: var(--texto-miudo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-pilula);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: var(--transicao-cor), transform var(--duracao-rapida) var(--curva-suave);
}

.botao:active {
  transform: scale(var(--escala-pressionado));
}

.botao--primario {
  background: var(--acao-primaria);
  border-color: var(--acao-primaria);
  color: var(--nc-off-white);
}

.botao--primario:hover {
  background: var(--acao-primaria-hover);
  border-color: var(--acao-primaria-hover);
  color: var(--nc-off-white);
}

.botao--contorno {
  background: transparent;
  border-color: var(--nc-mostarda);
  color: var(--nc-chocolate);
}

.botao--contorno:hover {
  background: var(--acao-contorno-hover);
  color: var(--nc-espresso);
}

/* Contorno sobre fundo escuro */
.secao--escura .botao--contorno,
.cartao--musgo .botao--contorno {
  color: var(--nc-marfim);
}

.secao--escura .botao--contorno:hover,
.cartao--musgo .botao--contorno:hover {
  color: var(--nc-espresso);
}

.botao--pequeno {
  min-height: 38px;
  padding: var(--espaco-2) var(--espaco-6);
  font-size: var(--texto-rotulo);
}

.botao--grande {
  min-height: 48px;
  padding: var(--espaco-4) var(--espaco-10);
}

.botao--bloco {
  width: 100%;
}

.botao[disabled] {
  cursor: not-allowed;
  filter: saturate(0.6);
}

/* Link de ação em caixa-alta, com seta ----------------------------- */
.link-acao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-top: var(--espaco-7);
  font-size: var(--texto-miudo);
  letter-spacing: var(--tracking-pilula);
  text-transform: uppercase;
  color: var(--nc-terracota);
}

/* --------------------------------------------------------------------------
   Pílula de categoria (Pill)
   -------------------------------------------------------------------------- */
.pilula {
  display: inline-block;
  align-self: flex-start;
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-pilula);
  text-transform: uppercase;
  color: var(--nc-chocolate);
}

.pilula--mostarda {
  background: var(--nc-tint-mostarda);
  color: var(--nc-espresso);
}

.pilula--marfim {
  background: var(--nc-marfim);
}

/* --------------------------------------------------------------------------
   Cartão (Card)
   Contorno dourado no lugar de sombra — o sistema é plano.
   -------------------------------------------------------------------------- */
.cartao {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--pad-cartao);
  background: var(--superficie-cartao);
  border: var(--borda-cartao);
  border-radius: var(--raio-2xl);
}

.cartao--musgo {
  background: var(--superficie-inversa-alt);
  border-color: transparent;
  color: var(--texto-sobre-escuro);
}

.cartao--papel {
  background: var(--superficie-cartao);
  padding: var(--espaco-9);
}

.cartao__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-5);
}

.cartao__indice {
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-sobrelinha);
  text-transform: uppercase;
  color: var(--nc-mostarda);
}

.cartao__titulo {
  font-size: var(--texto-h3);
  font-style: italic;
  line-height: var(--entrelinha-subtitulo);
  margin-bottom: var(--espaco-3);
}

.cartao__titulo--grande {
  font-size: var(--texto-h3-grande);
  line-height: 1.2;
}

.cartao__titulo--reto {
  font-style: normal;
  font-size: 22px;
  line-height: 1.3;
  margin-top: var(--espaco-5);
}

.cartao__texto {
  font-size: var(--texto-corpo-sm);
  line-height: var(--entrelinha-compacta);
}

/* Cartão de serviço ------------------------------------------------- */
.cartao-servico__rotulo {
  margin: var(--espaco-5) 0 var(--espaco-2);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-sobrelinha);
  text-transform: uppercase;
  color: var(--nc-mostarda);
}

.cartao-servico .link-acao {
  margin-top: auto;
  padding-top: var(--espaco-7);
}

/* Cartão de conteúdo (clicável) ------------------------------------ */
.cartao-conteudo {
  transition: border-color var(--duracao-base) var(--curva-suave);
  color: inherit;
}

.cartao-conteudo:hover {
  border-color: var(--nc-mostarda);
  color: inherit;
}

.cartao-conteudo__acao {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-top: auto;
  padding-top: var(--espaco-5);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-pilula);
  text-transform: uppercase;
  color: var(--nc-terracota);
}

/* --------------------------------------------------------------------------
   Ícones (Icon / IconBadge)
   Aplicados como máscara CSS: o SVG herda a cor do contexto.
   -------------------------------------------------------------------------- */
.icone {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  flex: none;
}

.icone--ideia {
  mask-image: url('../assets/icones/ideia.svg');
  -webkit-mask-image: url('../assets/icones/ideia.svg');
}

.icone--livro-aberto {
  mask-image: url('../assets/icones/livro-aberto.svg');
  -webkit-mask-image: url('../assets/icones/livro-aberto.svg');
}

.icone--relogio {
  mask-image: url('../assets/icones/relogio.svg');
  -webkit-mask-image: url('../assets/icones/relogio.svg');
}

.icone--casa {
  mask-image: url('../assets/icones/casa.svg');
  -webkit-mask-image: url('../assets/icones/casa.svg');
}

.icone--lapis {
  mask-image: url('../assets/icones/lapis.svg');
  -webkit-mask-image: url('../assets/icones/lapis.svg');
}

.icone--lupa {
  mask-image: url('../assets/icones/lupa.svg');
  -webkit-mask-image: url('../assets/icones/lupa.svg');
}

.icone--maos {
  mask-image: url('../assets/icones/maos.svg');
  -webkit-mask-image: url('../assets/icones/maos.svg');
}

.icone--seta {
  mask-image: url('../assets/icones/seta.svg');
  -webkit-mask-image: url('../assets/icones/seta.svg');
}

.icone--acao {
  width: 18px;
  height: 18px;
}

/* Medalhão circular ------------------------------------------------ */
.medalhao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--raio-circulo);
  flex: none;
}

.medalhao-icone--grande {
  width: 56px;
  height: 56px;
}

.medalhao-icone--mostarda {
  background: var(--nc-tint-mostarda);
  color: var(--nc-mostarda);
}

.medalhao-icone--terracota {
  background: var(--nc-tint-terracota);
  color: var(--nc-terracota);
}

.medalhao-icone--oliva {
  background: var(--nc-tint-oliva);
  color: var(--nc-oliva);
}

.medalhao-icone--musgo {
  background: var(--nc-tint-musgo);
  color: var(--nc-musgo);
}

/* --------------------------------------------------------------------------
   Listas
   -------------------------------------------------------------------------- */
.lista-marcada {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-top: var(--espaco-5);
}

.lista-marcada__item {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-3);
  font-size: var(--texto-legenda);
}

.lista-marcada__item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--raio-pilula);
  background: var(--nc-mostarda);
  flex: none;
}

.lista-criterios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espaco-4);
}

.lista-criterios__item {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  font-size: var(--texto-corpo-sm);
  line-height: var(--entrelinha-compacta);
}

.lista-criterios__item::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border: var(--borda-acento);
  border-radius: var(--raio-pilula);
  flex: none;
}

/* --------------------------------------------------------------------------
   Citação (QuoteCard)
   Sobre fundo escuro, sempre em cartão de papel — nunca texto sobre texto.
   -------------------------------------------------------------------------- */
.citacao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
  height: 100%;
  margin: 0;
  padding: var(--pad-cartao);
  background: var(--superficie-cartao);
  border: var(--borda-cartao);
  border-radius: var(--raio-2xl);
}

.citacao__texto {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  line-height: var(--entrelinha-subtitulo);
  color: var(--texto-titulo);
}

.citacao__texto::before {
  content: '\201C';
  color: var(--nc-mostarda);
}

.citacao__texto::after {
  content: '\201D';
  color: var(--nc-mostarda);
}

.citacao__autor {
  margin-top: auto;
  font-size: var(--texto-fino);
  letter-spacing: var(--tracking-pilula);
  text-transform: uppercase;
  color: var(--texto-discreto);
}

.citacao--centralizada {
  max-width: var(--medida-leitura);
  margin: var(--espaco-12) auto 0;
  text-align: center;
}

.citacao--centralizada .citacao__texto {
  font-size: var(--texto-citacao);
}