/*
 * 03-identificacao.css
 * Seção: Identificação / "Você sente que certas coisas se repetem?"
 *
 * Fonte da verdade: docs/recon-conteudo-estrutura.md (seção 2),
 * docs/recon-visual-tokens.md (linhas 53-54 da escala tipográfica) e
 * docs/recon-animacoes-responsividade.md. Tokens via var(--...) — ver docs/CONVENCOES.md.
 *
 * REDESIGN (2026-08-10, pedido do cliente): seção passou de fundo escuro
 * (--cor-fundo-preto-puro) para fundo "off" — o creme de marca (--cor-fundo-claro),
 * a mesma cor já usada em 05-porque-acontece/06-premiacao. Isso quebra a sequência de
 * 3 seções escuras seguidas (hero → identificação → problemas) logo no início da
 * página. Toda a paleta de texto do bloco foi invertida para os tons escuros
 * (--cor-texto-quase-preto / --cor-texto-cinza-escuro) e os destaques em itálico
 * passaram a usar o dourado real (--cor-cta-dourado) em vez do antigo
 * --cor-dourado-primario (que é só um alias do creme — ficaria invisível aqui).
 * Layout das 4 pills e do bloco de fechamento também foi reformulado (ver notas
 * abaixo) para não ficar "plano" num fundo claro sem o contraste do fundo escuro.
 *
 * [ATUALIZAÇÃO 2026-08-11, pedido do cliente] Título/subtítulo trocados para
 * "O mundo mudou..." (ver 04-problemas para os 4 cards e o texto de
 * fechamento que dão continuidade a esta introdução). As 4 pills placeholder
 * e o bloco de fechamento antigo ("O Novo Sistema é uma experiência...")
 * foram removidos — a seção agora só tem o cabeçalho.
 */

.identificacao {
  background-color: var(--cor-fundo-claro);
}

/* ---------------------------------------------------------------------------
 * Cabeçalho: heading (esquerda) + subtítulo (direita), alinhados na mesma linha
 * ------------------------------------------------------------------------- */

.identificacao__header {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 32px;
}

.identificacao__title {
  font-size: var(--fs-h2-destaque);
  font-weight: var(--fw-h2-destaque);
  line-height: var(--lh-h2-destaque);
  color: var(--cor-texto-quase-preto);
}

.identificacao__title-highlight {
  display: inline;
  font-style: italic;
  color: var(--cor-destaque-em-claro);
}

.identificacao__subtitle {
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--fw-hero-subtitulo);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-cinza-escuro);
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .identificacao__header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }

  .identificacao__subtitle {
    text-align: center;
  }
}

@media (max-width: 430px) {
  .identificacao__title {
    font-size: clamp(26px, 7vw, 32px);
  }
}