/* ---------- MEMBRESÍAS (spec 30): la tarjeta de muestra cambia de color con el nivel; beneficios y compra abajo ---------- */
.mb-page{container-type:inline-size;display:flex;flex-direction:column;gap:12px}

/* Tarjeta de muestra: la credencial del Inicio con la foto del estadio. Azul conserva su velo navy */
.mb-card{min-height:clamp(124px,min(42cqw,19.5vh),190px);border:1px solid rgba(4,11,31,.1);box-shadow:0 10px 24px rgba(4,11,31,.28);transition:box-shadow .3s}
.mb-card::before{background:url(../../assets/img/bg-tarjeta.webp) 70% 100%/cover;opacity:1}
.mb-card.t-azul::after{background:linear-gradient(90deg,rgba(4,11,31,.85) 0%,rgba(4,11,31,.45) 50%,rgba(4,11,31,0) 100%)}
.mb-card .name{font-family:var(--tech-wide);font-weight:600;font-size:1.6rem;line-height:1.2}
.mb-card .fanid b{font-family:var(--tech-wide);font-weight:600;font-size:1.2rem;letter-spacing:.04em}
.mb-card .shield{width:58px;height:58px}
.mb-card{padding:16px 18px}
.mb-card .name{margin-top:4px}
.mb-card .row.bottom{padding-top:8px}

/* Niveles: cuatro botones con la muestra del metal, el nombre y el precio (o "La tuya") */
.mb-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mb-tier{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:84px;padding:10px 4px 8px;border-radius:14px;border:1.5px solid var(--gray-lightest);background:var(--white);box-shadow:var(--shadow-soft);color:var(--navy);transition:border-color .15s}
.mb-tier:hover{border-color:var(--sky-ink)}
.mb-tier.on{border-color:var(--sky-ink);box-shadow:0 0 0 1px var(--sky-ink),var(--shadow-soft)}
.mb-tier .sw{width:34px;height:22px;border-radius:5px;box-shadow:0 2px 6px rgba(4,11,31,.2)}
.mb-tier .sw.t-azul{background:url(../../assets/img/bg-tarjeta.webp) 70% 100%/cover}
.mb-tier .sw.t-plata{background:url(../../assets/img/membresias/plata.webp) 70% 100%/cover}
.mb-tier .sw.t-oro{background:url(../../assets/img/membresias/oro.webp) 70% 100%/cover;filter:brightness(.82) saturate(.92)}
.mb-tier .sw.t-leyenda{background:url(../../assets/img/membresias/leyenda.webp) 70% 100%/cover;border:1px solid var(--leyenda-oro)}
.mb-tier b{font-family:var(--tech-wide);font-weight:600;font-size:.98rem;line-height:1.1}
.mb-tier small{font-size:.7rem;line-height:1.2;color:var(--muted);white-space:nowrap}

/* Nivel elegido: nombre, precio al año y bandera; beneficios con icono en una tarjeta blanca */
.mb-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.mb-head h1{font-family:var(--tech-wide);font-weight:600;font-size:1.7rem;line-height:1.1;color:var(--navy)}
.mb-price{font-size:.9rem;color:var(--muted)}
.mb-price b{font-family:var(--tech-wide);font-weight:600;font-size:1.15rem;color:var(--navy)}
.mb-head .flag{align-self:center;margin-left:auto}
.mb-bens{display:flex;flex-direction:column;padding:4px 16px;border-radius:var(--r-tile);background:var(--white);box-shadow:var(--shadow-soft)}
.mb-bens li{display:flex;align-items:center;gap:12px;min-height:40px;padding:4px 0;font-size:.88rem;line-height:1.35;color:var(--text)}
.mb-bens li+li{border-top:1px solid var(--gray-lightest)}
.mb-bens svg{flex:none;width:20px;height:20px;color:var(--sky-ink)}
.mb-note{font-size:.8rem;line-height:1.5;color:var(--muted)}

/* Confirmación del pago (hoja clara) y bienvenida (hoja oscura) */
.mb-sum{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--bg-card);color:var(--navy)}
.mb-sum .pb-l.disc{color:var(--sky-ink)}
.mb-sum .pb-l.tot{padding-top:8px;border-top:1px solid rgba(28,49,112,.15);font-weight:700;font-size:1rem}
.mb-sum .pb-l .pts svg{color:var(--navy)}
.mb-card-pay{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border-radius:14px;border:1.5px solid var(--gray-lightest);color:var(--navy);text-align:left}
.mb-card-pay svg{flex:none;width:22px;height:22px;color:var(--sky-ink)}
.mb-card-pay span{flex:1;min-width:0;display:flex;flex-direction:column}
.mb-card-pay small{font-size:.76rem;color:var(--muted)}
.mb-card-pay em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--sky-ink)}
.mb-ok-card{width:100%;max-width:320px;margin:4px auto 14px;container-type:inline-size}
.mb-ok-card .mb-card{text-align:left;height:auto;min-height:170px;box-shadow:0 0 0 1px rgba(126,222,241,.35),0 14px 40px rgba(61,139,255,.35)}
@media (prefers-reduced-motion:no-preference){ .mb-ok-card .mb-card{animation:mb-in .7s cubic-bezier(.16,1,.3,1) both} }
@keyframes mb-in{from{opacity:0;transform:translateY(16px) rotateX(18deg) scale(.94)}}

/* Teléfonos bajos: niveles sin muestra de color, beneficios más juntos y sin la nota (la vigencia sale al pagar) */
@media (max-height:780px){ .mb-page{gap:10px} .mb-tier{min-height:56px;padding:8px 4px 6px} .mb-tier .sw{display:none} .mb-bens li{min-height:36px;font-size:.84rem} .mb-note{display:none} .mb-head h1{font-size:1.5rem} }
@container (max-width:300px){ .mb-tier small{font-size:.64rem} .mb-tier b{font-size:.88rem} .mb-card .name{font-size:1.35rem} .mb-card .shield{display:none} }