/* Seja apoiador (/apoio/) — os cards do site não têm espaço interno próprio: cada bloco daqui define o seu */
.ap-teste{margin:0 0 16px;padding:10px 14px;background:#2a2410;color:#ffd84d;font-weight:700;box-shadow:inset 0 0 0 2px #c9970f}
.ap-aviso{padding:22px}
.ap-aviso h2{margin:0 0 6px}
.ap-aviso p{margin:0}
.ap-meu{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:16px 18px}
.ap-meu p{margin:0;flex:1 1 260px}
.ap-meu img,.ap-ok img{image-rendering:pixelated;vertical-align:middle}

/* períodos */
.ap-periodos{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.ap-periodos button{font:inherit;font-weight:800;padding:10px 14px;background:var(--card2);color:var(--fg);border:0;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.ap-periodos button small{font-weight:700;color:var(--moss);margin-left:4px}
.ap-periodos button[aria-selected="true"]{background:var(--fox);color:var(--fox-ink);box-shadow:inset 0 -3px 0 var(--fox-deep)}
.ap-periodos button[aria-selected="true"] small{color:inherit}

/* planos */
.ap-planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:860px){.ap-planos{grid-template-columns:1fr}}
.ap-plano{display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center;padding:20px 18px 18px}
.ap-plano .ap-ic{image-rendering:pixelated;width:64px;height:64px}
.ap-plano h2{margin:0}
.ap-plano.ap-ferro{box-shadow:inset 0 0 0 2px #8f99a3}
.ap-plano.ap-ouro{box-shadow:inset 0 0 0 2px #c9970f}
.ap-plano.ap-diamante{box-shadow:inset 0 0 0 2px #22b3ab}
.ap-plano.sel{box-shadow:inset 0 0 0 4px var(--fox)}
.ap-preco{margin:0;display:flex;align-items:baseline;gap:4px;justify-content:center}
.ap-preco b{font-size:1.9rem;line-height:1}
.ap-preco span,.ap-mes{color:var(--muted);font-size:.85rem}
.ap-forma{font-size:.75rem;font-weight:800;padding:2px 8px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)}
.ap-benef{list-style:none;padding:0;margin:4px 0;text-align:left;display:grid;gap:8px;font-size:.92rem;flex:1;align-content:start;width:100%}
.ap-benef li{padding-left:20px;position:relative;line-height:1.45}
.ap-benef li::before{content:'✓';position:absolute;left:0;color:var(--moss);font-weight:900}
.ap-plano .btn{width:100%}

/* formulários (assinatura e doação) */
.ap-pagar,.ap-doacao{margin-top:20px;padding:22px 18px;display:grid;gap:14px}
.ap-pagar h2,.ap-doacao h2{margin:0;line-height:1.25;text-wrap:balance}
.ap-pagar > p,.ap-doacao > p{margin:0;line-height:1.5}
.ap-pagar form,.ap-doacao form{gap:18px}
.ap-pagar .field label,.ap-doacao .field label{margin-bottom:6px}
.ap-pagar .note,.ap-doacao .note{margin:0}
.ap-obrig{color:#e5484d;font-weight:900;margin-left:3px}

/* escolhas: forma de pagar */
.ap-formas{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.ap-formas legend{font-weight:800;padding:0;margin:0 0 8px}
.ap-formas > label{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--card2);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}
.ap-formas > label:has(input:checked){box-shadow:inset 0 0 0 2px var(--fox)}
.ap-formas > label input{margin:0;flex:none}
.ap-formas > label span{display:grid;gap:2px}
.ap-formas small{color:var(--muted)}
.ap-formas .note{margin:0}

/* caixinhas */
.ap-ok-chk{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.45;cursor:pointer}
.ap-ok-chk input{margin:2px 0 0;flex:none}
.ap-renova{padding:12px 14px;background:var(--card2);box-shadow:inset 0 0 0 2px var(--line)}
.ap-renova span{display:grid;gap:4px}
.ap-renova small{color:var(--muted);line-height:1.45}

/* valores da doação */
.ap-valores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:420px){.ap-valores{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ap-valores button{font:inherit;font-weight:800;padding:10px 6px;background:var(--card2);color:var(--fg);border:0;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;white-space:nowrap}
.ap-valores button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--fox);color:var(--fox)}

/* como funciona */
.ap-termos{margin-top:18px}
.ap-termos summary{cursor:pointer;font-weight:800}
.ap-termos ul{margin:10px 0 0;padding-left:20px;display:grid;gap:8px;font-size:.92rem;color:var(--muted)}

/* volta do pagamento */
.ap-ok{padding:22px}
.ap-ok h2{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.ap-ok p{margin:0 0 10px}
.ap-resto{display:grid;gap:18px}
.ap-resto[hidden],.ap-pagar [hidden]{display:none}
.ap-doacao [hidden]{display:none}