/* Guia da Espanhola. Estilos só do guia (prefixo guia-); não fazem parte do sistema.
   Cor, borda e raio usam --es-*. Medidas em px, mono e peso do cromo do guia são
   literais de propósito e não viram componente. */
.guia-topo { border-bottom: var(--es-borda-faixa) solid currentColor; }
.guia-acoes { display: flex; flex-wrap: wrap; gap: var(--es-ponto-pad); margin-top: var(--es-col-gap); align-items: center; }
.guia-codigo {
  margin-top: var(--es-col-gap);
  padding: var(--es-col-gap);
  border: 2px solid var(--es-carimbo);
  border-radius: var(--es-raio-controle);
  background: var(--es-superficie);
  color: var(--es-texto);
  /* Mono e medidas do bloco de código são do guia, nunca de componente. */
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.guia-amostra { margin-top: var(--es-col-gap); }
/* Colunas fixas (6 ou 2): a quebra livre poria a pastilha laranja encostada numa verde. */
.guia-mostra-temas { display: grid; grid-template-columns: repeat(6, max-content); gap: 12px; margin-top: var(--es-col-gap); }
@media (max-width: 950px) { .guia-mostra-temas { grid-template-columns: repeat(2, max-content); } }
.guia-pastilha {
  padding: 12px 20px;
  background: var(--es-fundo);
  color: var(--es-texto);
  border: 2px solid var(--es-carimbo);
  border-radius: var(--es-raio-pill);
  font-size: var(--es-t-rotulo);
  font-weight: var(--es-peso-titulo);
  letter-spacing: var(--es-tracking-rotulo);
  text-transform: uppercase;
}