/*
  Club en la web (apps/loyalty, docs/PLAN_CLUB.md): alta (/club/, con el tema de la web y los campos de booking.css),
  condiciones y la tarjeta del socio (/club/tarjeta/…, página suelta para el móvil, sin site.css: lleva sus propios
  valores por defecto). El color de la tarjeta llega en --club-bg y el del texto encima en --club-fg.
*/
.club { --club-bg: var(--c-brand, #FF5669); --club-fg: var(--c-ink, #1D1D1B); }

/* Alta ------------------------------------------------------------------------------------------ */
.club-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .club-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.club-title { margin: 8px 0 12px; font-family: var(--f-display); font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
.club-lead { max-width: 34rem; font-size: 1.15rem; line-height: 1.5; color: var(--c-graphite); }
.club-perks { display: grid; gap: 10px; margin: 24px 0 16px; padding: 0; list-style: none; }
.club-perks li { display: flex; gap: 10px; align-items: baseline; padding: 14px 18px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--club-bg) 16%, var(--c-white)); font-size: 1.02rem; }
.club-perks li::before { content: "★"; color: var(--club-bg); font-size: 1.1rem; }
.club-small { font-size: 0.95rem; color: var(--c-graphite); }
.club-form-box { padding: 24px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-white); box-shadow: 0 10px 30px rgba(29, 29, 27, 0.06); }
@media (min-width: 768px) { .club-form-box { padding: 32px; } }
.club-form { display: grid; gap: 20px; }
.club-form .site-button { justify-self: start; }
.club-kids { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.club-kid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); gap: 10px; }
.club-optional { font-weight: 400; color: var(--c-graphite); }
.club-terms-page { max-width: 52rem; }
.club-terms { display: grid; gap: 12px; margin: 16px 0 28px; line-height: 1.55; }
.club-terms h3 { margin-top: 12px; font-family: var(--f-display); font-size: 1.3rem; font-weight: 800; }
.club-terms ul { display: grid; gap: 8px; padding-left: 1.2em; }

/* Tarjeta del socio (página suelta) ----------------------------------------------------------- */
.club-page {
  margin: 0; min-height: 100vh; background: #F6F5F1; color: #1D1D1B;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
.club-page *, .club-page *::before, .club-page *::after { box-sizing: border-box; }
.club-wallet { display: grid; gap: 16px; width: 100%; max-width: 30rem; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
.club-wallet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 8px; }
.club-wallet-company { font-weight: 800; font-size: 1.05rem; color: inherit; text-decoration: none; }
.club-wallet-kicker { font-size: 0.9rem; color: #5B5650; }
.club-note { padding: 14px 16px; border-radius: 16px; background: #FFFFFF; font-size: 0.98rem; line-height: 1.45; }
.club-note-ok { background: #E6F6EC; }
.club-card-face { display: grid; gap: 4px; min-height: 12rem; padding: 22px; border-radius: 24px; background: var(--club-bg); color: var(--club-fg); box-shadow: 0 16px 40px rgba(29, 29, 27, 0.18); }
.club-card-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; font-weight: 700; }
.club-card-no { font-variant-numeric: tabular-nums; }
.club-card-holder { margin: 22px 0 0; font-size: 1.05rem; font-weight: 600; }
.club-card-balance { margin: 0; font-size: 1.1rem; font-weight: 600; }
.club-card-balance span { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.club-scan { display: grid; justify-items: center; gap: 4px; padding: 18px 16px 14px; border-radius: 20px; background: #FFFFFF; text-align: center; }
.club-scan-code { width: 100%; }
.club-scan-code svg { display: block; width: 100%; height: 72px; }
.club-scan-number { margin: 6px 0 0; font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.12em; }
.club-scan-help { margin: 0; font-size: 0.9rem; color: #5B5650; }
.club-block { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: #FFFFFF; }
.club-block h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.club-block p { margin: 0; line-height: 1.45; }
.club-progress { height: 10px; border-radius: 999px; background: #EFEDE7; overflow: hidden; }
.club-progress span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--club-bg); }
.club-stampcard { display: grid; gap: 8px; padding-top: 4px; }
.club-stampcard + .club-stampcard { padding-top: 14px; border-top: 1px solid #EFEDE7; }
.club-stampcard-title { display: flex; justify-content: space-between; font-weight: 700; }
.club-stampcard-title span { color: #5B5650; font-weight: 600; font-variant-numeric: tabular-nums; }
.club-page .club-small { margin: 0; font-size: 0.9rem; color: #5B5650; }
.club-stamps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.club-stamp { width: 30px; height: 30px; border: 2px dashed rgba(29, 29, 27, 0.25); border-radius: 999px; }
.club-stamp.is-on { border: 0; background: var(--stamp, var(--club-bg)); }
.club-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.club-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.club-list small { display: block; color: #5B5650; font-size: 0.85rem; }
.club-pill { flex: none; padding: 6px 12px; border-radius: 999px; background: #EFEDE7; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #1D1D1B; text-decoration: none; }
.club-pill.is-ready { background: var(--club-bg); color: var(--club-fg); }
.club-pill-link { background: #1D1D1B; color: #FFFFFF; }
.club-wallet-foot { padding-top: 8px; font-size: 0.85rem; color: #5B5650; text-align: center; }
.club-wallet-foot a { color: inherit; }
/* Campañas (C-4): promociones del día en la tarjeta y la página para dejar de recibir novedades */
.club-promo { padding: 12px 16px; border-radius: 16px; background: var(--club-bg); color: var(--club-fg); font-weight: 700; line-height: 1.4; }
.club-promo small { display: block; font-weight: 600; opacity: 0.85; }
.club-note p { margin: 0 0 12px; }
.club-button { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: #1D1D1B; color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; }