/* ============================================================================
 * SeptiGenesis — Membresías (standalone).
 * Paleta sobria SeptiGenesis: teal #00a99d/#008077 + navy #143e6b/#0d2847
 * sobre fondos claros. Contraste AA. Poppins.
 * Responsive 390 (mobile) → 1440 (desktop), sin overflow horizontal.
 * ==========================================================================*/

:root {
  --mb-teal: #00a99d;
  --mb-teal-dark: #008077;
  --mb-teal-soft: #e6f7f5;
  --mb-teal-border: #9fded7;
  --mb-navy: #143e6b;
  --mb-navy-deep: #0d2847;
  --mb-bg: #f6faf9;
  --mb-surface: #ffffff;
  --mb-text: #12252e;
  --mb-text-soft: #4a5c63;
  --mb-border: #dfe8e6;
  --mb-danger: #b00020;
  --mb-warn: #8a5209;
  --mb-ok: #0f7a48;
  --mb-radius: 14px;
  --mb-radius-sm: 10px;
  --mb-shadow: 0 6px 24px rgba(13, 40, 71, 0.08);
  --mb-shadow-sm: 0 2px 8px rgba(13, 40, 71, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--mb-text);
  background: var(--mb-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mb-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.mb-skip { position: absolute; left: -999px; }
.mb-skip:focus {
  left: 12px; top: 12px;
  z-index: 1000;
  background: var(--mb-navy-deep);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--mb-radius-sm);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.mb-header {
  background: var(--mb-surface);
  border-bottom: 1px solid var(--mb-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.mb-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mb-navy-deep);
}
.mb-brand-name { font-weight: 700; font-size: 1.05rem; }
.mb-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mb-back {
  color: var(--mb-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.mb-back:hover { color: var(--mb-teal-dark); }
.mb-lang {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 6px 8px;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-surface);
  color: var(--mb-text);
}

/* ── Main / Hero ─────────────────────────────────────────────────────────── */
.mb-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 64px;
}
.mb-hero {
  text-align: center;
  padding: 56px 12px 40px;
}
.mb-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mb-teal-dark);
  background: var(--mb-teal-soft);
  border: 1px solid var(--mb-teal-border);
  padding: 5px 12px;
  border-radius: 999px;
}
.mb-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 18px 0 12px;
  color: var(--mb-navy-deep);
}
.mb-subtitle {
  max-width: 640px;
  margin: 0 auto;
  color: var(--mb-text-soft);
  font-size: 1rem;
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.mb-section-title {
  font-size: 1.35rem;
  color: var(--mb-navy-deep);
  margin: 8px 0 4px;
}
.mb-section-hint {
  color: var(--mb-text-soft);
  font-size: 0.92rem;
  margin: 0 0 14px;
}
.mb-status {
  color: var(--mb-text-soft);
  font-size: 0.92rem;
  min-height: 1.2em;
}

/* ── Planes grid ─────────────────────────────────────────────────────────── */
.mb-plans { margin-top: 8px; }
.mb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}
@media (min-width: 620px) {
  .mb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .mb-grid { grid-template-columns: repeat(3, 1fr); }
}

.mb-card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.mb-card:hover {
  box-shadow: var(--mb-shadow);
  transform: translateY(-2px);
}
.mb-card-stripe { height: 6px; width: 100%; }
.mb-card-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.mb-card-name {
  margin: 0;
  font-size: 1.15rem;
  color: var(--mb-navy-deep);
}
.mb-card-desc {
  margin: 0;
  color: var(--mb-text-soft);
  font-size: 0.9rem;
}
.mb-card-benefits {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mb-card-benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  color: var(--mb-text);
}
.mb-card-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mb-teal-dark);
  font-weight: 700;
}
.mb-card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.mb-card-price {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mb-navy-deep);
}
.mb-card-price.is-free { color: var(--mb-ok); }

.mb-empty {
  padding: 28px;
  text-align: center;
  color: var(--mb-text-soft);
  background: var(--mb-surface);
  border: 1px dashed var(--mb-border);
  border-radius: var(--mb-radius);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.mb-btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 16px;
  border-radius: var(--mb-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.mb-btn:disabled { opacity: 0.6; cursor: default; }
.mb-btn-primary {
  background: var(--mb-teal-dark);
  color: #fff;
}
.mb-btn-primary:hover:not(:disabled) { background: #006b62; }
.mb-btn-block { width: 100%; }
.mb-btn-sm { padding: 7px 12px; font-size: 0.85rem; }

/* ── Mi membresía ────────────────────────────────────────────────────────── */
.mb-mine { margin-top: 48px; }
.mb-mine-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 520px;
}
.mb-input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-sm);
  background: var(--mb-surface);
  color: var(--mb-text);
  flex: 1;
  min-width: 200px;
}
.mb-input:focus {
  outline: 2px solid var(--mb-teal);
  outline-offset: 1px;
  border-color: var(--mb-teal);
}
.mb-mine-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.mb-mine-row {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mb-mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.mb-mine-name { font-weight: 600; color: var(--mb-navy-deep); }
.mb-mine-status {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mb-border);
  color: var(--mb-text);
}
.mb-mine-status.is-active { background: #d8f3e6; color: var(--mb-ok); }
.mb-mine-status.is-pending { background: #fdefd6; color: var(--mb-warn); }
.mb-mine-status.is-expired { background: #fde3e3; color: var(--mb-danger); }
.mb-mine-status.is-cancelled { background: #eceef0; color: var(--mb-text-soft); }
.mb-mine-until {
  margin: 0;
  font-size: 0.86rem;
  color: var(--mb-text-soft);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.mb-footer {
  border-top: 1px solid var(--mb-border);
  background: var(--mb-surface);
  text-align: center;
  padding: 24px 20px;
  color: var(--mb-text-soft);
  font-size: 0.85rem;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.mb-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.mb-modal[hidden] { display: none; }
.mb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 40, 71, 0.55);
}
.mb-modal-card {
  position: relative;
  background: var(--mb-surface);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 22px 26px;
}
.mb-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  background: var(--mb-teal-soft);
  color: var(--mb-navy-deep);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.mb-modal-close:hover { background: var(--mb-teal-border); }
.mb-modal-head { margin-bottom: 14px; padding-right: 34px; }
.mb-modal-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  color: var(--mb-navy-deep);
}
.mb-modal-desc {
  margin: 0 0 10px;
  color: var(--mb-text-soft);
  font-size: 0.92rem;
}
.mb-modal-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--mb-teal-dark);
}
.mb-modal-benefits {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mb-modal-benefits li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
}
.mb-modal-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mb-teal-dark);
  font-weight: 700;
}

/* ── Sub form / success ──────────────────────────────────────────────────── */
.mb-sub-form, .mb-sub-success {
  border-top: 1px solid var(--mb-border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mb-sub-h, .mb-success-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--mb-navy-deep);
}
.mb-sub-hint, .mb-success-note {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--mb-text-soft);
}
.mb-success-text { margin: 0; color: var(--mb-text); font-size: 0.95rem; }
.mb-form-error {
  margin: 0;
  color: var(--mb-danger);
  font-size: 0.85rem;
}