/* ══════════════════════════════════════
   MUSEU JUDAICO RJ — Associe-se
   Estilos específicos da página
══════════════════════════════════════ */

/* ── PLANOS ── */
.planos-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.5rem 0; }
.plano-card { border-radius:10px; overflow:hidden; border:2px solid var(--border); background:white; cursor:pointer; transition:border-color 200ms,box-shadow 200ms,transform 180ms; position:relative; }
.plano-card:hover { border-color:rgba(180,145,80,.5); box-shadow:0 8px 28px rgba(14,14,20,.1); transform:translateY(-2px); }
.plano-card.selected { border-color:var(--navy); box-shadow:0 0 0 1px var(--navy),0 8px 28px rgba(27,37,79,.15); }
.plano-card.selected .plano-check { opacity:1; }
.plano-check { position:absolute; top:.75rem; right:.75rem; width:22px; height:22px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 200ms; }
.plano-check svg { stroke:white; width:11px; height:11px; stroke-width:2.5; }
.plano-top { height:4px; background:linear-gradient(to right,var(--gold),var(--gold-light) 60%,rgba(180,145,80,.2) 100%); }
.plano-body { padding:1.5rem 1.375rem 1.625rem; }
.plano-freq { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:.625rem; }
.plano-valor { font-family:var(--serif); font-size:2.25rem; font-weight:300; color:var(--navy); line-height:1; letter-spacing:-.02em; }
.plano-valor sup { font-size:1rem; font-weight:400; vertical-align:super; margin-right:2px; letter-spacing:0; }
.plano-periodo { font-family:var(--mono); font-size:.65rem; color:var(--ink-3); margin-top:.25rem; margin-bottom:.875rem; }
.plano-equiv { font-size:.8125rem; color:var(--ink-3); line-height:1.5; border-top:1px solid var(--border); padding-top:.875rem; }
.plano-equiv strong { color:var(--ink-2); }

/* ── Plano selecionado no form ── */
.plano-selecionado { background:var(--navy-tint); border:1.5px solid var(--navy); border-radius:5px; padding:.875rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.plano-selecionado-label { font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; color:var(--navy-mid); }
.plano-selecionado-valor { font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--navy); }
.plano-none { background:var(--parchment); border:1.5px dashed var(--border); border-radius:5px; padding:.875rem 1rem; font-size:.875rem; color:var(--ink-3); text-align:center; }

/* ── PIX BOX ── */
.pix-box { background:var(--parchment); border:1px solid var(--border); border-radius:10px; padding:2rem 2.25rem; margin-top:3rem; }
.pix-box-title { font-family:var(--serif); font-size:1.375rem; font-weight:500; color:var(--ink); margin-bottom:.5rem; }
.pix-box-sub { font-size:.875rem; color:var(--ink-3); line-height:1.65; margin-bottom:1.5rem; }
.pix-row { display:flex; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; }
.pix-qr { width:96px; height:96px; background:white; border:1px solid var(--border); border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--navy); }
.pix-info { flex:1; }
.pix-key-label { font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.375rem; }
.pix-key-val { font-family:var(--mono); font-size:.875rem; color:var(--ink-2); margin-bottom:.75rem; }
.pix-copy-btn { display:inline-flex; align-items:center; gap:.375rem; background:var(--navy); color:white; font-family:var(--sans); font-size:.8rem; font-weight:600; border:none; border-radius:3px; padding:.5rem 1rem; cursor:pointer; transition:background 150ms; }
.pix-copy-btn:hover { background:var(--navy-deep); }

/* ── ASIDE BENEFITS ── */
.aside-benefit { display:flex; align-items:flex-start; gap:.75rem; padding:.875rem 1.25rem; border-bottom:1px solid var(--border); }
.aside-benefit:last-child { border-bottom:none; }
.aside-benefit .icon { color:var(--gold); flex-shrink:0; margin-top:2px; }
.aside-benefit-text { font-size:.8375rem; color:var(--ink-3); line-height:1.6; }
.aside-benefit-text strong { display:block; color:var(--ink-2); font-size:.875rem; margin-bottom:1px; }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .planos-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .planos-grid { grid-template-columns:1fr; }
  .pix-box { padding:1.5rem; }
}