/* Só a página de componentes (o "guia"): o layout da vitrine, não do app. */

.guia {
  max-width: 440px;
  margin: 0 auto;
  padding: 12px var(--margem) calc(132px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 48px;
}
.guia-abertura { display: grid; gap: 4px; padding-top: 8px; }
.guia-secao { display: grid; gap: 16px; }
.guia-rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px/1 var(--f-texto);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--couro);
}
.guia-rotulo::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.guia-nota { font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.guia-pilha { display: grid; gap: 14px; }
.guia-pilha-larga { display: grid; gap: 22px; }

/* Marca */
.guia-marca { display: grid; gap: 18px; padding: 28px 22px; border-radius: var(--raio-cartao); background: var(--ebano); border: 1px solid var(--linha); }
.guia-marca .logotipo { width: 200px; height: auto; aspect-ratio: 723.28 / 236; color: var(--linho); }
.guia-marca .assinatura { font: 500 22px/1.2 var(--f-titulo); letter-spacing: -0.02em; }

/* Cores */
.guia-cores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guia-cor { border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; background: var(--cartao); }
.guia-cor i { display: block; height: 56px; }
.guia-cor div { padding: 10px 12px 12px; display: grid; gap: 2px; }
.guia-cor b { font: 600 14px/1.2 var(--f-titulo); }
.guia-cor code { font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto-2); }
.guia-cor span { font-size: 12px; line-height: 1.35; color: var(--texto-2); }

/* Tipografia */
.guia-tipo { display: grid; gap: 18px; }
.guia-tipo small { display: block; margin-bottom: 6px; font-size: 12px; color: var(--texto-2); }