/* A12 Pix — o QR code e o código copia e cola (Front\Bloco). Título, texto e fundo se montam
   em volta com widgets e blocos nativos. Tokens do kit com fallback; nenhuma regra mira id de
   elemento.

   O widget do Elementor só sobrepõe variáveis: --pix-alinhar, --pix-tamanho, --pix-qr,
   --pix-texto, --pix-botao e --pix-botao-texto. Vazias, valem os tokens; o texto (rótulo,
   aviso, "Ver o código Pix") herda a cor de quem envolve o Pix, para funcionar sobre fundo
   escuro.

   O QR é uma placa branca de cantos arredondados (desenhada no próprio SVG, com a zona de
   respiro), olhos arredondados e o símbolo do Santuário num disco branco no centro. Abaixo de
   160 px as câmeras dos bancos deixam de ler: é o piso. */
.a12-pix {
	--pix-marca: var(--e-global-color-a12marca, #7B4A32);
	--pix-escura: var(--e-global-color-a12marcaescura, #4E2E1E);
	display: flex;
	flex-direction: column;
	align-items: var(--pix-alinhar, flex-start);
	gap: 1rem;
	color: var(--pix-texto, inherit);
}
.a12-pix--centro { --pix-alinhar: center; }
.a12-pix--direita { --pix-alinhar: flex-end; }

.a12-pix__qr { margin: 0; line-height: 0; color: var(--pix-qr, var(--pix-escura)); }
.a12-pix__qr svg { display: block; width: var(--pix-tamanho, 220px); min-width: 160px; max-width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .08)); }

/* Código */
.a12-pix__codigo-bloco { width: 100%; max-width: 560px; }
.a12-pix--tudo .a12-pix__codigo-bloco { max-width: max(var(--pix-tamanho, 220px), 480px); }
.a12-pix__rotulo { display: block; margin-bottom: .35rem; font-size: .9em; font-weight: 600; }
.a12-pix__copia { display: flex; gap: .5rem; align-items: stretch; }
.a12-pix__codigo { flex: 1 1 auto; min-width: 0; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; text-overflow: ellipsis; }
.a12-pix__aviso { margin: .5rem 0 0; font-size: .9em; }
.a12-pix__aviso:empty { margin: 0; }

/* O botão do design system (o mesmo do a12-eventos). O kit não estiliza `button` solto, e o
   do tema Hello sai com texto claro sobre fundo claro; `.a12-pix .a12-pix__botao` (0,2,0)
   vence `button:hover` do tema e `.elementor-kit-N button` (0,1,1) sem !important. */
.a12-pix .a12-pix__botao { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 32px; background: var(--pix-botao, var(--pix-marca)); color: var(--pix-botao-texto, #fff); font-family: var(--e-global-typography-9975a72-font-family, Roboto), sans-serif; font-size: 1rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: filter .15s; }
.a12-pix .a12-pix__botao:hover, .a12-pix .a12-pix__botao:focus-visible { background: var(--pix-botao, var(--pix-marca)); color: var(--pix-botao-texto, #fff); filter: brightness(.9); }
.a12-pix .a12-pix__botao:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* "Ver o código Pix": sem JavaScript, ou para quem prefere copiar à mão. */
.a12-pix__ver { margin-top: .75rem; font-size: .9em; }
.a12-pix__ver summary { width: fit-content; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.a12-pix__ver[open] summary { margin-bottom: .5rem; }

/* Fora da produção o Pix continua real: o selo existe para ninguém pagar achando que é teste. */
.a12-pix__teste { margin: 0; padding: .25rem .75rem; border: 1px dashed #c77700; border-radius: 999px; background: #fff1dc; color: #7a3e00; font-size: .75em; font-weight: 600; }

/* Só quem edita vê: o Pix não apareceu e por quê. */
.a12-pix-erro { padding: .75rem 1rem; border-left: 4px solid #b3261e; background: #fdecea; color: #601410; font-size: .9em; }

@media (max-width: 480px) {
	.a12-pix__copia { flex-direction: column; }
	.a12-pix__codigo { min-height: 48px; }
}

/* O convite para a Família dos Devotos (08/11/2026): uma linha, no tom do
   texto do bloco — informa, não disputa com o código Pix. */
.a12-pix .a12-pix__convite {
	margin: 12px 0 0;
	font-size: 0.95em;
	line-height: 1.5;
}
.a12-pix .a12-pix__convite a {
	font-weight: 600;
}