/* =========================================================================
   American Society — Member UI 2.0 (V2 e V3)
   Duas direções visuais para comparação, ativadas por ?design=v2 / ?design=v3.
   Escopo: só afeta páginas quando o body recebe .ui-v2 ou .ui-v3 (V1 intacta).
   Header do site não é alterado em nenhuma versão.
   ========================================================================= */

/* ---------------------------------------------------------------- V2: Claro editorial */
.ui-v2 {
  --ma-bg: #f5f1e8;
  --ma-surface: #fffdf9;
  --ma-surface-2: #faf6ee;
  --ma-ink: #17233a;
  --ma-muted: #6b7789;
  --ma-line: rgba(23, 35, 58, .10);
  --ma-line-strong: rgba(23, 35, 58, .18);
  --ma-accent: #0f6f63;
  --ma-accent-soft: rgba(15, 111, 99, .10);
  --ma-gold: #b08d57;
  --ma-radius: 20px;
  --ma-shadow: 0 18px 48px rgba(23, 35, 58, .08);
}

/* ---------------------------------------------------------------- V3: Escuro institucional */
.ui-v3 {
  --ma-bg: #0c1626;
  --ma-surface: rgba(255, 255, 255, .045);
  --ma-surface-2: rgba(255, 255, 255, .075);
  --ma-ink: #f2ece0;
  --ma-muted: #9fb0c7;
  --ma-line: rgba(255, 255, 255, .12);
  --ma-line-strong: rgba(255, 255, 255, .22);
  --ma-accent: #8fd6c6;
  --ma-accent-soft: rgba(143, 214, 198, .12);
  --ma-gold: #c9a227;
  --ma-radius: 18px;
  --ma-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* ------------------------------- fundo das páginas de filiação nas duas versões */
.ui-v2.site-body { background: var(--ma-bg); }
.ui-v3.site-body {
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(201, 162, 39, .10), transparent 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(143, 214, 198, .08), transparent 55%),
    var(--ma-bg);
}

/* ------------------------------- componentes genéricos (planos, benefícios, sucesso, status) */
.ui-v2 .hero--compact, .ui-v3 .hero--compact {
  background: transparent;
  border-bottom: 1px solid var(--ma-line);
}
.ui-v2 .hero--compact .hero__inner, .ui-v3 .hero--compact .hero__inner { padding: 46px 0 30px; }
.ui-v2 .hero--compact .eyebrow, .ui-v3 .hero--compact .eyebrow {
  color: var(--ma-gold);
  letter-spacing: .22em;
  font-weight: 700;
}
.ui-v2 .hero--compact h1, .ui-v3 .hero--compact h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.02em;
}
.ui-v2 .hero--compact h1 { color: var(--ma-ink); font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.ui-v3 .hero--compact h1 { color: var(--ma-ink); font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.ui-v2 .hero--compact .hero__subtitle, .ui-v3 .hero--compact .hero__subtitle {
  color: var(--ma-muted);
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.7;
}

.ui-v2 .panel, .ui-v3 .panel {
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius);
  box-shadow: var(--ma-shadow);
  backdrop-filter: blur(6px);
}
.ui-v2 .membership-flow, .ui-v3 .membership-flow { gap: 22px; margin-top: 26px; }
.ui-v2 .membership-flow__side h2, .ui-v3 .membership-flow__side h2,
.ui-v2 .membership-flow__main h2, .ui-v3 .membership-flow__main h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--ma-ink);
}
.ui-v2 .membership-member-meta p, .ui-v3 .membership-member-meta p { color: var(--ma-muted); }
.ui-v2 .membership-member-meta strong, .ui-v3 .membership-member-meta strong { color: var(--ma-ink); }

.ui-v2 .institutional-list a, .ui-v3 .institutional-list a { color: var(--ma-accent); font-weight: 600; }
.ui-v2 .button, .ui-v3 .button {
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.ui-v2 .button { background: var(--ma-accent); color: #fff; }
.ui-v2 .button:hover { background: #0c5b52; }
.ui-v3 .button { background: linear-gradient(135deg, var(--ma-gold), #e7cf7a); color: #17233a; }
.ui-v3 .button:hover { filter: brightness(1.06); }

.ui-v2 .admin-form label, .ui-v3 .admin-form label { color: var(--ma-ink); font-weight: 600; }
.ui-v2 .admin-form input, .ui-v2 .admin-form select, .ui-v2 .admin-form textarea {
  background: #fff;
  border: 1px solid var(--ma-line-strong);
  border-radius: 12px;
  color: var(--ma-ink);
}
.ui-v3 .admin-form input, .ui-v3 .admin-form select, .ui-v3 .admin-form textarea {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  color: var(--ma-ink);
}
.ui-v3 .admin-form input::placeholder, .ui-v3 .admin-form textarea::placeholder { color: rgba(242, 236, 224, .45); }
.ui-v2 .flash, .ui-v3 .flash {
  border-radius: 14px;
  border: 1px solid var(--ma-line-strong);
  background: var(--ma-accent-soft);
  color: var(--ma-ink);
}
.ui-v2 .form-privacy-note, .ui-v3 .form-privacy-note { color: var(--ma-muted); }
.ui-v2 .form-privacy-note a, .ui-v3 .form-privacy-note a { color: var(--ma-accent); }

/* ------------------------------- diretório: cards */
.ui-v2 .member-card, .ui-v3 .member-card {
  border-radius: var(--ma-radius);
  border: 1px solid var(--ma-line);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ui-v2 .member-card:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(23, 35, 58, .12); }
.ui-v3 .member-card:hover { transform: translateY(-3px); border-color: var(--ma-line-strong); }
.ui-v2 .member-card__badge, .ui-v3 .member-card__badge {
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.ui-v2 .member-card__badge { background: var(--ma-accent-soft); color: var(--ma-accent); }
.ui-v3 .member-card__badge { background: rgba(201, 162, 39, .16); color: var(--ma-gold); }
.ui-v3 .member-card__body, .ui-v3 .member-card__title, .ui-v3 .member-card__program { color: var(--ma-ink); }

/* =========================================================================
   ÁREA DO MEMBRO — markup novo (.ma-*)
   ========================================================================= */
.ma { max-width: 1120px; margin: 0 auto; padding: 26px 20px 70px; }

/* hero/credencial */
.ma__hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 28px 30px;
  border-radius: calc(var(--ma-radius) + 4px);
  border: 1px solid var(--ma-line);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
  overflow: hidden;
}
.ui-v2 .ma__hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--ma-gold), #dcc79a 45%, var(--ma-accent));
}
.ui-v3 .ma__hero {
  background:
    linear-gradient(135deg, rgba(201, 162, 39, .16), rgba(143, 214, 198, .08) 55%, transparent),
    var(--ma-surface);
}
.ma__monogram {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.ui-v2 .ma__monogram { background: var(--ma-accent-soft); color: var(--ma-accent); border: 1px solid rgba(15, 111, 99, .25); }
.ui-v3 .ma__monogram {
  background: rgba(12, 22, 38, .55);
  color: var(--ma-gold);
  border: 1px solid rgba(201, 162, 39, .45);
  box-shadow: 0 0 0 6px rgba(201, 162, 39, .08);
}
.ma__eyebrow {
  margin: 0 0 6px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ma-gold);
  font-weight: 700;
}
.ma__name {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--ma-ink);
  letter-spacing: -.02em;
}
.ma__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ma__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid var(--ma-line-strong);
  color: var(--ma-muted);
  text-transform: uppercase;
}
.ui-v2 .ma__chip { background: var(--ma-surface-2); }
.ui-v3 .ma__chip { background: rgba(255, 255, 255, .05); }
.ma__chip--ok { border-color: rgba(15, 111, 99, .35); color: var(--ma-accent); background: var(--ma-accent-soft); }
.ma__chip--warn { border-color: rgba(176, 141, 87, .45); color: var(--ma-gold); background: rgba(176, 141, 87, .12); }
.ma__actions { display: flex; flex-direction: column; gap: 10px; }
.ma__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  border: 1px solid var(--ma-line-strong);
  color: var(--ma-ink);
  background: transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.ma__btn:hover { transform: translateY(-1px); }
.ui-v2 .ma__btn--primary { background: var(--ma-accent); border-color: transparent; color: #fff; }
.ui-v2 .ma__btn--primary:hover { background: #0c5b52; }
.ui-v3 .ma__btn { background: rgba(255, 255, 255, .04); }
.ui-v3 .ma__btn.ma__btn--primary { background: linear-gradient(135deg, var(--ma-gold), #e7cf7a); border-color: transparent; color: #17233a; }
.ui-v3 .ma__btn.ma__btn--primary:hover { filter: brightness(1.06); }

/* tiles */
.ma__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.ma__tile {
  padding: 16px 18px;
  border-radius: var(--ma-radius);
  border: 1px solid var(--ma-line);
  background: var(--ma-surface);
}
.ma__tile span {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ma-muted);
  margin-bottom: 6px;
}
.ma__tile strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ma-ink);
}

/* cards */
.ma__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) {
  .ma__grid { grid-template-columns: 1fr; }
  .ma__hero { grid-template-columns: 1fr; }
  .ma__actions { flex-direction: row; flex-wrap: wrap; }
}
.ma__card {
  padding: 24px 26px;
  border-radius: var(--ma-radius);
  border: 1px solid var(--ma-line);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
}
.ma__card h2 {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ma-ink);
}
.ma__card h3 {
  margin: 20px 0 8px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ma-muted);
}
.ma__hint { margin: 0 0 14px; color: var(--ma-muted); font-size: .92rem; line-height: 1.6; }
.ma__rows { border-top: 1px solid var(--ma-line); }
.ma__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ma-line);
}
.ma__row > span { color: var(--ma-muted); font-size: .92rem; }
.ma__row > strong { color: var(--ma-ink); font-size: .95rem; }
.ma__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
}
.ma__state--on { background: var(--ma-accent-soft); color: var(--ma-accent); }
.ma__state--off { background: rgba(120, 130, 145, .14); color: var(--ma-muted); }
.ma__links { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ma__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px dashed var(--ma-line-strong);
  background: var(--ma-surface-2);
  font-size: .86rem;
  color: var(--ma-muted);
  word-break: break-all;
}
.ma__link a { color: var(--ma-accent); font-weight: 600; }
.ma__docs { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.ma__docs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--ma-line);
  background: var(--ma-surface-2);
  color: var(--ma-ink);
  text-decoration: none;
  font-weight: 600;
  transition: border-color .15s ease, transform .15s ease;
}
.ma__docs a:hover { border-color: var(--ma-line-strong); transform: translateX(2px); }
.ma__docs small { color: var(--ma-muted); font-weight: 500; }

/* formulário de edição */
.ma__form { margin-top: 14px; }
.ma__form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.ma__field { display: flex; flex-direction: column; gap: 6px; }
.ma__field--full { grid-column: 1 / -1; }
.ma__field label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--ma-ink); }
.ma__field input, .ma__field select, .ma__field textarea {
  padding: 12px 14px;
  border-radius: 12px;
  font: inherit;
  font-size: .95rem;
}
.ui-v2 .ma__field input, .ui-v2 .ma__field select, .ui-v2 .ma__field textarea {
  border: 1px solid var(--ma-line-strong); background: #fff; color: var(--ma-ink);
}
.ui-v3 .ma__field input, .ui-v3 .ma__field select, .ui-v3 .ma__field textarea {
  border: 1px solid var(--ma-line); background: rgba(255, 255, 255, .06); color: var(--ma-ink);
}
.ma__field textarea { min-height: 110px; resize: vertical; }
.ma__toggles { display: grid; gap: 10px; margin: 18px 0 6px; }
.ma__toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid var(--ma-line);
  background: var(--ma-surface-2);
  font-size: .9rem;
  color: var(--ma-ink);
  cursor: pointer;
}
.ma__toggle input { width: auto; margin-top: 3px; accent-color: var(--ma-accent); }
.ma__toggle small { display: block; color: var(--ma-muted); font-size: .8rem; margin-top: 3px; line-height: 1.5; }
.ma__submit-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.ma__note { color: var(--ma-muted); font-size: .84rem; }

/* =========================================================================
   PÁGINA PÚBLICA DE VERIFICAÇÃO — markup novo (.vp-*)
   ========================================================================= */
.vp { max-width: 880px; margin: 0 auto; padding: 26px 20px 80px; }
.vp__card {
  position: relative;
  padding: 34px 36px 30px;
  border-radius: calc(var(--ma-radius) + 4px);
  border: 1px solid var(--ma-line);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
  overflow: hidden;
}
.ui-v2 .vp__card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--ma-gold), var(--ma-accent)); }
.ui-v3 .vp__card {
  background: linear-gradient(150deg, rgba(201, 162, 39, .14), transparent 55%), var(--ma-surface);
}
.vp__top { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.vp__monogram {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.9rem; font-weight: 700;
}
.ui-v2 .vp__monogram { background: var(--ma-accent-soft); color: var(--ma-accent); border: 1px solid rgba(15, 111, 99, .25); }
.ui-v3 .vp__monogram { background: rgba(12, 22, 38, .5); color: var(--ma-gold); border: 1px solid rgba(201, 162, 39, .45); }
.vp__seal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid rgba(15, 111, 99, .35); color: var(--ma-accent); background: var(--ma-accent-soft);
  margin-bottom: 10px;
}
.ui-v3 .vp__seal { border-color: rgba(201, 162, 39, .45); color: var(--ma-gold); background: rgba(201, 162, 39, .12); }
.vp__name {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 600; color: var(--ma-ink); letter-spacing: -.02em; line-height: 1.1;
}
.vp__sub { margin: 8px 0 0; color: var(--ma-muted); font-size: .95rem; }
.vp__rows { margin-top: 24px; border-top: 1px solid var(--ma-line); }
.vp__row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ma-line); }
.vp__row span { color: var(--ma-muted); font-size: .92rem; }
.vp__row strong { color: var(--ma-ink); font-size: .95rem; letter-spacing: .01em; }
.vp__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.vp__foot p { margin: 0; color: var(--ma-muted); font-size: .84rem; max-width: 52ch; line-height: 1.55; }

/* ---------------------------------------------------------------- switcher de preview */
.design-switcher {
  position: fixed;
  left: 16px;
  bottom: 78px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(12, 22, 38, .92);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  font: 600 12px/1 Inter, Arial, sans-serif;
  color: #f2ece0;
}
.design-switcher a {
  padding: 7px 12px;
  border-radius: 999px;
  color: #f2ece0;
  text-decoration: none;
  opacity: .75;
}
.design-switcher a:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.design-switcher a.is-active { background: #c9a227; color: #17233a; opacity: 1; }
.design-switcher span { opacity: .6; padding: 0 4px; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 640px) {
  .ma__hero { padding: 22px; }
  .ma__card { padding: 20px; }
  .vp__card { padding: 24px 20px; }
  .ma__tile strong { font-size: 1.3rem; }
}