/* Club Kahiki — loyalty program (public). Same visual language as the venue pages
   (Jost/Bungee, ink+bamboo+cream palette) but app-like: compact cards, big tap targets. */

:root{
  --ink:#150f0a;
  --ink-2:#1e150d;
  --ink-3:#28170c;
  --bamboo:#caa15c;
  --bamboo-dark:#6e4f28;
  --cream:#f4e8ce;
  --cream-dim:#d8c3a5;
  --accent:#8fce3e;
  --accent-2:#4f8f1f;
  --danger:#e0574a;
  --radius:18px;
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --maxw:480px;
  --tap:48px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100dvh; background:var(--ink); color:var(--cream);
  font-family:'Jost', system-ui, sans-serif; font-size:16px; line-height:1.55;
}
h1,h2,h3{ font-family:'Bungee', system-ui, sans-serif; font-weight:400; line-height:1.1; margin:0 0 .5rem; }
p{ margin:0 0 1rem; color:var(--cream-dim); }
a{ color:var(--bamboo); }
img{ max-width:100%; display:block; }

.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:20px 20px 60px; min-height:100dvh; }
.wrap--app{ padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }

.club-header{ display:flex; align-items:center; justify-content:center; gap:.6rem; padding:20px 0 28px; text-align:center; }
.club-header img{ height:32px; }
.club-header .eyebrow{
  display:block; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--bamboo);
  margin-top:.4rem;
}
.club-header-row{ display:flex; flex-direction:column; align-items:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  min-height:var(--tap); padding:.85rem 1.4rem; border-radius:100px; border:1px solid transparent;
  font-size:.92rem; font-weight:600; letter-spacing:.02em; text-decoration:none; cursor:pointer;
  transition:all 200ms ease; font-family:inherit;
}
.btn--solid{ background:var(--bamboo); color:#241a0a; }
.btn--solid:hover{ background:#e0b876; transform:translateY(-1px); }
.btn--solid:active{ transform:scale(.98); }
.btn--outline{ border-color:rgba(244,232,206,.3); color:var(--cream); background:none; }
.btn--outline:hover{ border-color:var(--bamboo); color:var(--bamboo); }
.btn--ghost{ background:none; border:none; color:var(--cream-dim); text-decoration:underline; min-height:auto; width:auto; padding:.3rem; font-weight:400; font-size:.85rem; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* Cards */
.card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.22); border-radius:var(--radius);
  padding:1.5rem 1.4rem; margin-bottom:1.1rem; box-shadow:var(--shadow);
}
.card h2{ font-size:1.1rem; margin-bottom:.7rem; }

/* Forms */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field label{ font-size:.78rem; color:var(--cream-dim); text-transform:uppercase; letter-spacing:.05em; }
.field input, .field textarea{
  background:var(--ink); border:1px solid rgba(244,232,206,.22); border-radius:10px;
  padding:.85rem .9rem; color:var(--cream); font-size:1rem; font-family:inherit; min-height:var(--tap);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--bamboo); }
.field-check{ display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:var(--cream-dim); }
.field-check input{ margin-top:.2rem; width:18px; height:18px; accent-color:var(--bamboo); flex:0 0 auto; }
.form-msg{ font-size:.85rem; padding:.7rem .9rem; border-radius:10px; margin-bottom:1rem; }
.form-msg--error{ background:rgba(224,87,74,.15); color:#ff9e91; }
.form-msg--ok{ background:rgba(143,206,62,.15); color:#c3ec8f; }

/* Membership card */
.member-card{
  position:relative; border-radius:20px; padding:1.6rem 1.5rem; margin-bottom:1.3rem;
  background:
    radial-gradient(circle at 15% -10%, rgba(202,161,92,.35), transparent 55%),
    linear-gradient(155deg, #241a0d 0%, #150f0a 65%);
  border:1px solid rgba(202,161,92,.4); box-shadow:0 25px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.member-card::before{
  content:''; position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(143,206,62,.18), transparent 70%); pointer-events:none;
}
.member-card__top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.4rem; }
.member-card__brand{ font-family:'Bungee', system-ui, sans-serif; font-size:1rem; color:var(--bamboo); letter-spacing:.02em; }
.member-card__tier{ font-size:.65rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cream-dim); }
.member-card__name{ font-size:1.15rem; font-weight:600; margin-bottom:.2rem; word-break:break-word; }
.member-card__code{ font-size:.72rem; color:var(--cream-dim); letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.member-card__points{ display:flex; align-items:baseline; gap:.4rem; margin-top:1.1rem; }
.member-card__points strong{ font-family:'Bungee', system-ui, sans-serif; font-size:2.4rem; color:var(--accent); line-height:1; }
.member-card__points span{ font-size:.78rem; color:var(--cream-dim); text-transform:uppercase; letter-spacing:.05em; }

.qr-wrap{
  background:var(--cream); border-radius:16px; padding:14px; display:flex; align-items:center;
  justify-content:center; margin:0 0 1.3rem;
}
.qr-wrap img{ width:100%; max-width:230px; }
.qr-hint{ text-align:center; font-size:.78rem; color:var(--cream-dim); margin:-.7rem 0 1.3rem; }

/* Rewards list */
.rewards-list{ display:flex; flex-direction:column; gap:.7rem; }
.reward-item{
  display:flex; align-items:center; gap:.9rem; background:var(--ink); border:1px solid rgba(244,232,206,.1);
  border-radius:14px; padding:.8rem .9rem;
}
.reward-item__info{ flex:1; min-width:0; }
.reward-item__name{ font-weight:600; font-size:.92rem; margin-bottom:.1rem; }
.reward-item__desc{ font-size:.78rem; color:var(--cream-dim); }
.reward-item__cost{
  flex:0 0 auto; font-size:.85rem; font-weight:700; color:var(--bamboo); white-space:nowrap;
  background:rgba(202,161,92,.12); padding:.4rem .7rem; border-radius:100px;
}
.reward-item--locked{ opacity:.5; }

/* History */
.history-item{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.7rem 0;
  border-top:1px dashed rgba(244,232,206,.1); font-size:.85rem;
}
.history-item:first-child{ border-top:none; }
.history-item__desc{ color:var(--cream); }
.history-item__date{ font-size:.72rem; color:var(--cream-dim); }
.history-item__points{ font-weight:700; white-space:nowrap; }
.history-item__points--earn{ color:var(--accent); }
.history-item__points--redeem{ color:var(--danger); }

.tabs{ display:flex; gap:.4rem; margin-bottom:1rem; background:var(--ink); border-radius:100px; padding:4px; }
.tabs button{
  flex:1; background:none; border:none; color:var(--cream-dim); font-family:inherit; font-size:.82rem;
  padding:.6rem 0; border-radius:100px; cursor:pointer; min-height:40px;
}
.tabs button.is-active{ background:var(--bamboo); color:#241a0a; font-weight:600; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.club-footer{ text-align:center; margin-top:2rem; }
.club-footer a{ font-size:.8rem; }

.empty-note{ text-align:center; color:var(--cream-dim); font-size:.85rem; padding:1rem 0; }

@media (min-width:560px){
  .wrap{ padding-top:40px; }
}

/* ==========================================================================
   Installable webapp: bottom nav, push banner, hero, big points, wallet card
   ========================================================================== */

/* Bottom nav — same component/measurements as the staff CMS for a consistent feel */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:25; max-width:var(--maxw); margin:0 auto;
  display:flex; background:var(--ink-2); border-top:1px solid rgba(202,161,92,.22);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.bottom-nav a, .bottom-nav button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  padding:.6rem 0 .5rem; text-decoration:none; color:var(--cream-dim); font-size:.68rem; min-height:56px;
  background:none; border:none; font-family:inherit; cursor:pointer;
}
.bottom-nav__icon{ font-size:1.25rem; line-height:1; }
.bottom-nav a.is-active, .bottom-nav button.is-active{ color:var(--accent); }

/* App sections (Home / Tarjeta / Recompensas) — switched client-side, no page reload, so the
   background video and any push-permission state never get interrupted mid-session. */
.app-section{ display:none; }
.app-section.is-active{ display:block; }

/* Push notification banner */
.push-banner{
  display:none; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  background:rgba(202,161,92,.12); border:1px solid rgba(202,161,92,.3); border-radius:12px;
  padding:.9rem 1.1rem; margin:0 0 1.1rem; font-size:.83rem; color:var(--cream);
}
.push-banner .btn{ flex:0 0 auto; width:auto; }

/* Home page background video — fixed behind the whole viewport, not just a card. The video
   itself has its white background already keyed out and composited onto var(--ink) at export
   time (see coin-hero-bg.mp4), so it drops straight onto the page with no visible seam. */
.page-bg-video{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.page-bg-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; }
.page-bg-video::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 30%, transparent 0%, rgba(21,15,10,.35) 55%, var(--ink) 92%);
}
body.has-video-bg{ background:var(--ink); }
body.has-video-bg .wrap{ position:relative; z-index:2; }
body.has-video-bg .grain{ z-index:1; }

.home-greeting{ position:relative; z-index:2; text-align:center; padding-top:2.4rem; }
.home-greeting__hi{ font-size:.85rem; color:var(--cream-dim); margin-bottom:.2rem; }
.home-points{ font-family:'Bungee', system-ui, sans-serif; font-size:4.4rem; line-height:1; color:var(--accent); text-shadow:0 6px 24px rgba(0,0,0,.5); }
.home-points__label{ font-size:.78rem; color:var(--cream-dim); text-transform:uppercase; letter-spacing:.12em; margin-top:.3rem; }

.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1.5rem 0 1.1rem; }
.quick-actions a{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;
  background:var(--ink-2); border:1px solid rgba(202,161,92,.22); border-radius:16px;
  padding:1.1rem .6rem; text-decoration:none; color:var(--cream); font-size:.82rem; font-weight:600;
}
.quick-actions a span.qa-icon{ font-size:1.6rem; }
.quick-actions a:active{ transform:scale(.97); }

.home-activity__item{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.6rem 0;
  border-top:1px dashed rgba(244,232,206,.1); font-size:.85rem;
}
.home-activity__item:first-child{ border-top:none; }

/* Tarjeta page: wallet / install card */
.wallet-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.22); border-radius:var(--radius);
  padding:1.3rem 1.3rem 1.4rem; margin-bottom:1rem;
}
.wallet-card h3{ font-family:'Jost',system-ui,sans-serif; font-weight:600; font-size:.95rem; color:var(--bamboo); margin:0 0 .5rem; }
.wallet-card p{ font-size:.83rem; margin-bottom:.9rem; }
.wallet-card .btn{ margin-bottom:.6rem; }
.wallet-card .btn:last-child{ margin-bottom:0; }
.wallet-steps{ margin:0; padding-left:1.1rem; font-size:.82rem; color:var(--cream-dim); line-height:1.7; }

/* Home: "Regala Kahiki" promo card — same shape as .wallet-card, warmer accent to stand out */
.giftcard-promo{
  background:linear-gradient(155deg, rgba(224,120,150,.14) 0%, var(--ink-2) 70%);
  border-color:rgba(224,120,150,.35);
}
.giftcard-promo h3{ color:#e07896; }
.giftcard-promo p{ margin-bottom:0; }

/* Install banner (iOS "add to home screen" instructions on tarjeta.php) */
.install-banner{
  background:rgba(202,161,92,.1); border:1px dashed rgba(202,161,92,.35); border-radius:12px;
  padding:.9rem 1rem; margin-bottom:1rem; font-size:.82rem; color:var(--cream-dim); display:none;
}
.install-banner.is-visible{ display:block; }

/* "Añadir a Apple Wallet" — real .pkpass download once the cert is installed */
.apple-wallet-btn{
  display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%;
  min-height:var(--tap); padding:.85rem 1.4rem; border-radius:12px; background:#000; color:#fff;
  text-decoration:none; font-family:inherit; font-size:.92rem; font-weight:600;
}
.apple-wallet-btn:active{ transform:scale(.98); }
.apple-wallet-btn__icon{
  width:20px; height:20px; flex:0 0 auto; display:inline-block; background:#fff;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 12.5c0-2-1.6-3-3-3H4.5v9c0 .8.7 1.5 1.5 1.5h11c.8 0 1.5-.7 1.5-1.5v-6zM19.5 9.5h-16V7c0-.8.7-1.5 1.5-1.5h13c.8 0 1.5.7 1.5 1.5v2.5z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 12.5c0-2-1.6-3-3-3H4.5v9c0 .8.7 1.5 1.5 1.5h11c.8 0 1.5-.7 1.5-1.5v-6zM19.5 9.5h-16V7c0-.8.7-1.5 1.5-1.5h13c.8 0 1.5.7 1.5 1.5v2.5z'/></svg>");
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* "Guardar en Google Wallet" — a signed link, not a file download, but styled to match */
.google-wallet-btn{
  display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%;
  min-height:var(--tap); padding:.85rem 1.4rem; border-radius:12px;
  background:#fff; color:#1f1f1f; text-decoration:none; font-family:inherit;
  font-size:.92rem; font-weight:600; border:1px solid rgba(0,0,0,.08); margin-top:.6rem;
}
.google-wallet-btn:active{ transform:scale(.98); }

/* QR tappable to save to wallet, when available */
.qr-wrap--tappable{ cursor:pointer; }
.qr-wrap--tappable:active{ transform:scale(.98); }