/* Só o que é exclusivo deste post: o comparador "formato atual → novo formato"
   do CNPJ alfanumérico. Nenhum bloco de app/layout/blocos/ cobre esse desenho,
   e ele não vale para mais nenhuma página — por isso mora aqui, com classes
   novas prefixadas pelo slug, como manda a regra do projeto (CLAUDE.md, seção 5).
   Antes era um d-flex flex-column flex-md-row do Bootstrap com seis style=""
   inline, incluindo font-family:monospace e a cor da marca escritas na mão. */

.cnpj-alfanumerico-2026-comparador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (min-width: 768px) {
  .cnpj-alfanumerico-2026-comparador { flex-direction: row; justify-content: center; gap: 28px }
}

.cnpj-alfanumerico-2026-comparador-item { text-align: center }

.cnpj-alfanumerico-2026-comparador-rotulo {
  font-size: .82rem;
  color: var(--pc-mudo);
  margin-bottom: 4px;
}

/* Monoespaçada de propósito: o ponto do bloco é comparar posição a posição
   onde entram as letras, e fonte proporcional desalinha os dois formatos. */
.cnpj-alfanumerico-2026-comparador-valor {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.15rem, 1rem + 1.2vw, 1.6rem);
  font-weight: 700;
  color: var(--pc-navy);
  margin: 0;
}

.cnpj-alfanumerico-2026-comparador-letra { color: var(--laranja-texto) }

.cnpj-alfanumerico-2026-comparador-seta {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--laranja-texto);
}

/* A seta é a única indicação de "isto vira aquilo": no desktop ela aponta para
   a direita, no celular para baixo, acompanhando a direção em que os dois
   formatos ficam. Quem não vê a seta lê os dois CNPJs em sequência sem relação
   nenhuma entre eles — daí o texto alternativo em .pc-sr. */
.cnpj-alfanumerico-2026-seta-baixo { display: inline }
.cnpj-alfanumerico-2026-seta-lado { display: none }

@media (min-width: 768px) {
  .cnpj-alfanumerico-2026-seta-baixo { display: none }
  .cnpj-alfanumerico-2026-seta-lado { display: inline }
}