/* Apoie o projeto: bloco usado no site e no aplicativo. Só tokens (assets/theme.php). */
.support-intro { display: grid; gap: 22px; align-items: center; }
.support-story { display: grid; gap: 12px; } .support-story p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--n-600); } .support-story strong { color: var(--n-900); }
.support-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border-radius: 22px; background: var(--n-0); box-shadow: 0 1px 2px color-mix(in srgb, var(--c-deep-900) 5%, transparent), 0 14px 30px -24px color-mix(in srgb, var(--c-deep-900) 40%, transparent); }
.support-ring { position: relative; width: 132px; height: 132px; margin: 0; } .support-ring svg { width: 100%; height: 100%; }
.support-ring-track { fill: none; stroke: var(--n-150); stroke-width: 11; }
.support-ring-fill { fill: none; stroke: var(--c-success); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.3, .8, .3, 1); }
.support-ring figcaption { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.support-ring strong { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--n-900); } .support-ring small { font-size: 11px; color: var(--n-600); }
.support-meter dl { display: grid; gap: 8px; margin: 0; } .support-meter dl div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.support-meter dt { font-size: 13.5px; color: var(--n-600); } .support-meter dd { margin: 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--n-900); }
.support-example { grid-column: 1 / -1; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c-warning) 10%, var(--n-0)); font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--c-warning) 70%, var(--n-900)); }
.support-example svg { width: 16px; height: 16px; margin-top: 1px; }
@media (min-width: 860px) { .support-intro { grid-template-columns: 1.1fr 1fr; gap: 34px; } }
.support-pay { display: grid; gap: 14px; }
.support-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--n-150); overflow-x: auto; scrollbar-width: none; }
.support-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--n-600); cursor: pointer; white-space: nowrap; }
.support-tabs button.is-active { background: var(--n-0); color: var(--n-900); box-shadow: 0 1px 4px color-mix(in srgb, var(--c-deep-900) 16%, transparent); } .support-tabs img { border-radius: 50%; }
.support-network { display: grid; gap: 18px; justify-items: center; padding: 18px; border-radius: 22px; background: var(--n-0); box-shadow: inset 0 0 0 1px var(--n-150); }
.support-network[hidden] { display: none; }
.support-qr { display: grid; place-items: center; width: 196px; height: 196px; padding: 12px; border-radius: 18px; background: var(--n-0); box-shadow: 0 0 0 1px var(--n-150), 0 14px 30px -22px color-mix(in srgb, var(--c-deep-900) 50%, transparent); }
.support-qr img, .support-qr canvas { width: 172px; height: 172px; }
.support-address { display: grid; gap: 10px; width: 100%; min-width: 0; } .support-address small { font-size: 13.5px; color: var(--n-600); }
.support-address code { display: block; padding: 12px 14px; border-radius: 14px; background: var(--n-100); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.5; color: var(--n-900); overflow-wrap: anywhere; user-select: all; }
.support-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--n-150); color: var(--n-900); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .18s ease, transform .16s ease; }
.support-copy svg { width: 17px; height: 17px; } .support-copy:active { transform: scale(.97); } .support-copy.is-copied { background: color-mix(in srgb, var(--c-success) 14%, var(--n-0)); color: var(--c-success); }
.support-warning { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--n-600); } .support-warning svg { width: 15px; height: 15px; margin-top: 1px; }
@media (min-width: 700px) { .support-network { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; } }
@media (max-width: 560px) { .support-tabs button { flex: 1 1 0; min-width: 0; gap: 5px; padding: 0 6px; font-size: 12.5px; white-space: nowrap; } .support-tabs img { width: 18px; height: 18px; } }
.support-meter dd, .support-meter strong { white-space: nowrap; }
.support-suggest { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--c-success) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-success) 24%, transparent); font-size: 14.5px; line-height: 1.5; } .support-suggest svg { width: 20px; height: 20px; margin-top: 1px; color: var(--c-success); }
/* Simulação (antes de as contribuições abrirem): a conta que mantém o projeto, sem número de arrecadação. */
.support-meter.is-simulation { display: grid; gap: 14px; align-content: start; }
.support-sim-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--n-600); } .support-sim-title svg { width: 17px; height: 17px; color: var(--c-accent); }
.support-sim { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.1fr); gap: 8px; align-items: center; }
.support-sim > div { display: grid; gap: 2px; justify-items: center; padding: 14px 6px; border-radius: 16px; background: var(--n-50); text-align: center; min-width: 0; } .support-sim strong { font-size: clamp(17px, 2.4vw, 22px); font-variant-numeric: tabular-nums; color: var(--n-900); white-space: nowrap; } .support-sim small { font-size: 11.5px; line-height: 1.3; color: var(--n-600); }
.support-sim > span { font-size: 18px; font-weight: 700; color: var(--n-600); } .support-sim .is-total { background: color-mix(in srgb, var(--c-success) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-success) 26%, transparent); } .support-sim .is-total strong { color: var(--c-success); }
.support-sim-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--n-600); }
@media (max-width: 460px) { .support-sim { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .support-sim > span:last-of-type { display: none; } .support-sim .is-total { grid-column: 1 / -1; } }
.support-meter.is-simulation { grid-template-columns: minmax(0, 1fr); }
/* Com o PIX são quatro opções: no celular, grade 2 × 2 (nada se sobrepõe nem esconde); os ícones não encolhem. */
@media (max-width: 560px) { .support-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; } .support-tabs button { font-size: 13.5px; } .support-tabs button > :is(img, svg) { flex: 0 0 auto; width: 18px; height: 18px; } }