/*
Theme Name: MAMBAR Restaurant & Bar
Theme URI: https://www.instagram.com/mambar.quilpue/
Author: MAMBAR
Author URI: https://www.instagram.com/mambar.quilpue/
Description: Plataforma digital MAMBAR con carta, CRM, Club, juegos, QR, ofertas en vivo, solicitudes musicales, karaoke e inteligencia comercial.
Version: 3.9.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: mambar
Tags: restaurant, entertainment, responsive-layout
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --ink: #120c14;
  --ink-2: #1c1220;
  --paper: #f4efe7;
  --paper-2: #e9e0d5;
  --purple: #9d45de;
  --purple-dark: #64258f;
  --orange: #ff7339;
  --pink: #ef3d8f;
  --lime: #c5f06c;
  --white: #fffdf8;
  --muted: #776e79;
  --radius: 24px;
  --shadow: 0 24px 80px rgba(26, 8, 34, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10000;
  width: auto;
  height: auto;
  padding: 12px 16px;
  clip: auto;
  background: var(--white);
  color: var(--ink);
  border-radius: 10px;
  font-weight: 700;
}
.noise {
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: .032;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  width: min(1280px, calc(100% - 32px));
  height: 82px;
  margin: 18px auto 0;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 50;
  border: 1px solid rgba(42, 22, 45, .1);
  border-radius: 18px;
  background: rgba(244, 239, 231, .86);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 204px; }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--white);
  font: 800 22px/1 "Manrope", sans-serif;
  transform: rotate(-5deg);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font: 800 18px/1 "Manrope", sans-serif; letter-spacing: .08em; }
.brand-copy small { margin-top: 5px; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.main-nav { display: flex; align-items: center; gap: 27px; font-size: 13px; font-weight: 600; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--purple); transition: right .25s; }
.main-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.link-button, .text-action { border: 0; background: none; cursor: pointer; color: inherit; font-weight: 600; font-size: 13px; }
.menu-toggle { display: none; border: 0; background: none; width: 42px; height: 42px; cursor: pointer; }
.menu-toggle span { display: block; width: 23px; height: 2px; margin: 5px auto; background: var(--ink); }

.button {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 100px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding-inline: 19px; font-size: 13px; }
.button-primary { background: var(--purple); color: #fff; box-shadow: 0 12px 28px rgba(118, 42, 168, .22); }
.button-primary:hover { background: #8738bd; box-shadow: 0 16px 35px rgba(118, 42, 168, .3); }
.button-ghost { border-color: rgba(33, 17, 36, .18); background: rgba(255,255,255,.2); }
.button-dark { background: var(--ink); color: #fff; }
.button-full { width: 100%; }

.hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 66px;
  padding: 80px 0 68px;
}
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow > span { width: 24px; height: 2px; background: var(--purple); }
.hero h1, .section-heading h2, .club-copy h2, .visit-copy h2 {
  margin: 20px 0 22px;
  font: 800 clamp(54px, 6.7vw, 92px)/.91 "Manrope", sans-serif;
  letter-spacing: -.065em;
}
.hero h1 em, .section-heading h2 em, .club-copy h2 em, .visit-copy h2 em { font-style: normal; color: var(--purple); }
.hero-copy > p { max-width: 610px; margin: 0; color: #625764; font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 37px; color: #756a76; font-size: 12px; }
.hero-trust b { color: var(--ink); }

.hero-scene { min-height: 570px; position: relative; display: grid; place-items: center; }
.hero-scene::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: linear-gradient(145deg, #b85be8, #6b288e 58%, #2a102f);
  box-shadow: 0 50px 110px rgba(92, 28, 121, .32);
}
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { width: 90px; height: 90px; top: 8%; right: 4%; background: var(--orange); }
.orb-two { width: 48px; height: 48px; left: 5%; bottom: 16%; background: var(--lime); }
.hero-card-main {
  width: min(370px, 80%);
  min-height: 470px;
  padding: 26px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(236,225,236,.95));
  box-shadow: 0 30px 80px rgba(24, 7, 29, .26);
  transform: rotate(2.5deg);
}
.hero-card-main small { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--purple); }
.hero-card-main h2 { margin: 8px 0 7px; font: 800 30px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.hero-card-main p { margin: 0; color: #776c78; font-size: 13px; line-height: 1.5; }
.food-visual { position: relative; height: 315px; display: grid; place-items: center; }
.burger-visual span { position: absolute; left: 12%; right: 12%; border-radius: 50%; filter: drop-shadow(0 10px 8px rgba(31, 13, 20, .17)); }
.burger-visual .bun.top { height: 92px; top: 40px; background: radial-gradient(circle at 30% 30%, #ffe7a1 0 3px, transparent 4px), radial-gradient(circle at 60% 22%, #ffe7a1 0 3px, transparent 4px), linear-gradient(#dc8c3d, #a94c22); border-radius: 150px 150px 28px 28px; }
.burger-visual .lettuce { height: 28px; top: 128px; background: #84a841; clip-path: polygon(0 40%, 12% 4%, 28% 55%, 42% 2%, 59% 51%, 77% 7%, 100% 47%, 92% 100%, 4% 88%); }
.burger-visual .cheese { height: 38px; top: 150px; background: #f3c23e; clip-path: polygon(0 0, 100% 10%, 91% 100%, 55% 64%, 21% 100%, 3% 70%); }
.burger-visual .patty { height: 64px; top: 174px; background: linear-gradient(#72331f, #351711); border-radius: 42% 48% 40% 47%; }
.burger-visual .bun.bottom { height: 62px; top: 227px; background: linear-gradient(#bd632d, #e69a48); border-radius: 25px 25px 100px 100px; }
.floating-card {
  position: absolute;
  z-index: 5;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 15px;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 18px 44px rgba(28, 7, 34, .2);
  backdrop-filter: blur(10px);
}
.floating-card small { display: block; font-size: 8px; letter-spacing: .13em; color: #847886; }
.floating-card strong { display: block; margin-top: 3px; font: 800 14px/1 "Manrope", sans-serif; }
.mini-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--purple); }
.floating-card-points { left: -1%; top: 25%; transform: rotate(-4deg); }
.floating-card-live { right: -2%; bottom: 22%; transform: rotate(3deg); }
.live-dot { width: 11px; height: 11px; border-radius: 50%; background: #ef487d; box-shadow: 0 0 0 6px rgba(239,72,125,.12); }

.ticker { padding: 17px 0; overflow: hidden; background: var(--ink); color: white; }
.ticker div { min-width: max-content; display: flex; align-items: center; justify-content: center; gap: 28px; font: 700 11px/1 "Manrope", sans-serif; letter-spacing: .18em; }
.ticker b { color: var(--lime); }
.value-strip { padding: 66px 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(42,22,45,.13); }
.value-strip article { display: flex; gap: 18px; padding: 0 32px; border-right: 1px solid rgba(42,22,45,.13); }
.value-strip article:first-child { padding-left: 0; }
.value-strip article:last-child { border: 0; }
.value-strip article > span { font: 700 11px/1 "Manrope", sans-serif; color: var(--purple); }
.value-strip h3 { margin: -4px 0 6px; font: 800 16px/1.2 "Manrope", sans-serif; }
.value-strip p { margin: 0; color: #786e78; font-size: 13px; line-height: 1.5; }

.menu-section { padding: 100px 0 115px; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; }
.section-heading h2, .club-copy h2, .visit-copy h2 { margin-bottom: 0; font-size: clamp(45px, 5.5vw, 76px); }
.section-heading > p { margin: 0 0 5px; max-width: 440px; color: #726873; font-size: 16px; line-height: 1.7; }
.menu-toolbar { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { padding: 11px 17px; border: 1px solid rgba(26,12,30,.12); border-radius: 99px; background: transparent; color: #6f6571; cursor: pointer; font-size: 12px; font-weight: 700; }
.filter-chip.active { border-color: var(--ink); background: var(--ink); color: white; }
.cart-trigger { min-width: 200px; padding: 8px 9px 8px 18px; border: 1px solid rgba(26,12,30,.12); border-radius: 99px; background: white; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.cart-trigger span { font-size: 12px; font-weight: 700; }
.cart-trigger b { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: white; font-size: 10px; }
.cart-trigger strong { margin-left: auto; font-size: 12px; }
.product-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-card { min-height: 390px; position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: 0 15px 45px rgba(31,12,36,.07); transition: transform .25s, box-shadow .25s; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.product-art { height: 210px; position: relative; display: grid; place-items: center; overflow: hidden; }
.product-art::before, .product-art::after { content: ""; position: absolute; border-radius: 50%; }
.product-art::before { width: 180px; height: 180px; background: rgba(255,255,255,.16); }
.product-art::after { width: 90px; height: 90px; top: 16px; right: 22px; background: rgba(255,255,255,.1); }
.art-food { background: linear-gradient(145deg, #ff8850, #a63240); }
.art-share { background: linear-gradient(145deg, #db5bad, #702899); }
.art-drink { background: linear-gradient(145deg, #2c163c, #8c42bd); }
.product-art .emoji { position: relative; z-index: 2; font-size: 90px; filter: drop-shadow(0 22px 20px rgba(33,5,29,.25)); transform: rotate(-7deg); }
.points-pill { position: absolute; z-index: 4; top: 15px; left: 15px; padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.92); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.multiplier-pill { background: var(--lime); color: #23300f; }
.product-info { padding: 21px; display: flex; flex-direction: column; flex: 1; }
.product-info h3 { margin: 0; font: 800 20px/1.2 "Manrope", sans-serif; letter-spacing: -.03em; }
.product-info p { margin: 9px 0 18px; color: #7a707a; font-size: 12px; line-height: 1.55; }
.product-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.product-bottom strong { font: 800 18px/1 "Manrope", sans-serif; }
.add-button { width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: white; cursor: pointer; font-size: 21px; transition: transform .18s, background .18s; }
.add-button:hover { transform: rotate(90deg) scale(1.06); background: var(--purple); }
.menu-note { margin-top: 22px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-radius: 14px; background: var(--paper-2); color: #675c68; }
.menu-note > span { color: var(--purple); }
.menu-note p { margin: 0; font-size: 12px; }
.menu-note a { margin-left: auto; white-space: nowrap; font-size: 12px; font-weight: 800; border-bottom: 1px solid; }

.experiences, .games-section { padding: 110px 0; background: var(--ink); color: white; }
.section-heading.light > p { color: #a89dab; }
.section-heading.light .eyebrow > span { background: var(--orange); }
.section-heading.light h2 em { color: #c175ec; }
.night-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.night-card { min-height: 400px; padding: 26px; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.night-card::after { content: "M"; position: absolute; right: -25px; bottom: -70px; font: 800 260px/1 "Manrope", sans-serif; color: rgba(255,255,255,.08); transform: rotate(-10deg); }
.night-purple { background: linear-gradient(150deg, #7c2aa7, #371348); }
.night-orange { background: linear-gradient(150deg, #f17b3c, #8e2b38); }
.night-pink { background: linear-gradient(150deg, #db438b, #6e225c); }
.night-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.night-top span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.night-top b { font: 800 36px/1 "Manrope", sans-serif; }
.night-card div:nth-child(2) { position: relative; z-index: 2; margin-top: auto; }
.night-card small { font-size: 9px; font-weight: 800; letter-spacing: .15em; color: rgba(255,255,255,.68); }
.night-card h3 { max-width: 280px; margin: 9px 0 14px; font: 800 31px/1.05 "Manrope", sans-serif; letter-spacing: -.04em; }
.night-card p { position: relative; z-index: 2; margin: 0; max-width: 285px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; }

.club-section { padding: 120px 0; display: grid; grid-template-columns: .95fr 1.05fr; gap: 95px; align-items: center; }
.club-copy > p { max-width: 520px; color: #6f6570; font-size: 16px; line-height: 1.7; }
.check-list { list-style: none; padding: 0; margin: 30px 0 36px; display: grid; gap: 13px; }
.check-list li { display: flex; align-items: center; gap: 10px; color: #4f4551; font-size: 14px; }
.check-list span { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: #e4d7ec; color: var(--purple); font-size: 11px; font-weight: 800; }
.member-card { min-height: 500px; padding: 35px; position: relative; overflow: hidden; border-radius: 34px; background: linear-gradient(145deg, #27142d, #100913 70%); color: white; box-shadow: 0 45px 90px rgba(33,10,41,.28); transform: rotate(1.5deg); }
.member-card::after { content: "M"; position: absolute; right: -48px; top: 70px; font: 800 330px/1 "Manrope", sans-serif; color: rgba(190,107,235,.09); transform: rotate(-8deg); }
.member-card-top, .points-balance, .level-progress, .member-card-footer, .member-user { position: relative; z-index: 2; }
.member-card-top { display: flex; justify-content: space-between; align-items: center; }
.member-brand { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .12em; }
.member-brand span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: white; color: var(--ink); font: 800 16px/1 "Manrope", sans-serif; }
.member-level { padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.member-user { margin-top: 70px; }
.member-user span { display: block; color: #a997ae; font-size: 12px; }
.member-user strong { display: block; margin-top: 6px; font: 800 28px/1 "Manrope", sans-serif; }
.points-balance { margin-top: 30px; display: flex; align-items: end; justify-content: space-between; }
.points-balance small { display: block; margin-bottom: 8px; color: #ab99b0; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.points-balance strong { font: 800 78px/.9 "Manrope", sans-serif; letter-spacing: -.07em; }
.points-balance div > span { margin-left: 8px; color: #aa97ae; font-size: 12px; }
.round-button { width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; background: var(--purple); color: white; font-size: 20px; }
.level-progress { margin-top: 44px; }
.level-progress > div:first-child { display: flex; justify-content: space-between; color: #a997ae; font-size: 10px; }
.level-progress b { color: white; }
.progress-track { height: 5px; margin-top: 11px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--purple), var(--lime)); transition: width .5s; }
.member-card-footer { position: absolute; left: 35px; right: 35px; bottom: 28px; display: flex; justify-content: space-between; color: #74677a; font-size: 8px; font-weight: 800; letter-spacing: .14em; }

.games-section { background: linear-gradient(180deg, #160a19, #0e0910); }
.game-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.game-card { padding: 15px 15px 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 25px; background: rgba(255,255,255,.045); }
.game-visual { height: 220px; position: relative; overflow: hidden; border-radius: 17px; display: grid; place-items: center; }
.trivia-visual { background: linear-gradient(135deg, #913cd0, #432151); }
.trivia-visual span { font: 800 130px/1 "Manrope", sans-serif; color: #fff; }
.trivia-visual b, .trivia-visual i { position: absolute; font: 800 50px/1 "Manrope", sans-serif; color: rgba(255,255,255,.18); }
.trivia-visual b { left: 20px; top: 25px; transform: rotate(-20deg); }
.trivia-visual i { right: 24px; bottom: 20px; transform: rotate(18deg); }
.memory-visual { grid-template-columns: repeat(2, 64px); gap: 10px; align-content: center; background: linear-gradient(135deg, #e85891, #7a285f); }
.memory-visual span { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.15); font-size: 28px; }
.reaction-visual { background: linear-gradient(135deg, #f27b3c, #8f293b); }
.reaction-visual span { width: 82px; height: 82px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 22px rgba(255,255,255,.1), 0 0 0 44px rgba(255,255,255,.05); }
.reaction-visual b { position: absolute; bottom: 18px; font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .15em; }
.game-meta { padding-top: 18px; display: flex; justify-content: space-between; color: #a997ad; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.game-card h3 { margin: 12px 0 8px; font: 800 22px/1.15 "Manrope", sans-serif; }
.game-card p { min-height: 40px; margin: 0 0 18px; color: #9d919f; font-size: 12px; line-height: 1.55; }
.game-button { width: 100%; padding: 13px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: none; color: white; display: flex; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: 700; }
.game-button span { color: var(--lime); }
.responsible-note { max-width: 720px; margin: 28px auto 0; color: #756c77; text-align: center; font-size: 10px; line-height: 1.6; }

.visit-section { padding: 110px 0; }
.visit-card { min-height: 530px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 32px; background: var(--ink); color: white; }
.map-pattern { position: relative; overflow: hidden; background: #25142b; }
.map-pattern::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 42px 42px; transform: rotate(12deg) scale(1.4); }
.map-road { position: absolute; height: 28px; border: 2px solid rgba(198,240,108,.35); border-left: 0; border-right: 0; transform-origin: left; }
.road-one { width: 130%; left: -20%; top: 30%; transform: rotate(21deg); }
.road-two { width: 130%; left: -10%; top: 70%; transform: rotate(-26deg); }
.road-three { width: 100%; left: 37%; top: -10%; transform: rotate(82deg); }
.map-pin { width: 72px; height: 72px; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; border: 7px solid rgba(255,255,255,.22); border-radius: 50% 50% 50% 5px; background: var(--purple); color: white; font: 800 28px/1 "Manrope", sans-serif; transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 20px 50px rgba(0,0,0,.38); }
.map-pin::first-letter { transform: rotate(45deg); }
.visit-copy { padding: 65px; align-self: center; }
.visit-copy .eyebrow span { background: var(--orange); }
.visit-copy h2 { margin-top: 19px; }
.visit-copy h2 em { color: #c178ec; }
.visit-copy > p { color: #a89dab; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.visit-copy .button-ghost { border-color: rgba(255,255,255,.2); }

.local-seo {
  margin-top: 96px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 56px;
  align-items: start;
}
.local-seo-copy h2 { margin: 18px 0; font: 800 clamp(36px, 4.4vw, 62px)/.98 "Manrope", sans-serif; letter-spacing: -.055em; }
.local-seo-copy h2 em { color: var(--purple-dark); font-style: normal; }
.local-seo-copy > p { max-width: 610px; color: var(--muted); line-height: 1.7; }
.local-seo-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.local-seo-tags span { padding: 9px 12px; border: 1px solid rgba(92, 51, 101, .15); border-radius: 99px; background: rgba(255,255,255,.46); color: #5f4865; font-size: 11px; font-weight: 700; }
.local-faq { overflow: hidden; border: 1px solid rgba(52, 29, 57, .12); border-radius: 24px; background: rgba(255,255,255,.54); box-shadow: var(--shadow); }
.local-faq details { padding: 0 24px; border-bottom: 1px solid rgba(52, 29, 57, .09); }
.local-faq details:last-child { border-bottom: 0; }
.local-faq summary { position: relative; padding: 21px 34px 21px 0; cursor: pointer; list-style: none; font: 750 15px/1.35 "Manrope", sans-serif; }
.local-faq summary::-webkit-details-marker { display: none; }
.local-faq summary::after { content: "+"; position: absolute; right: 0; top: 18px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 18px; }
.local-faq details[open] summary::after { content: "−"; background: var(--purple-dark); }
.local-faq p { margin: -4px 34px 21px 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.site-footer { padding-top: 70px; background: #0c080d; color: white; }
.footer-main { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; padding-bottom: 65px; }
.footer-brand { align-self: start; }
.footer-brand .brand-mark { background: var(--purple); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-links div { display: flex; flex-direction: column; gap: 9px; }
.footer-links small { margin-bottom: 5px; color: #6f6572; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.footer-links a, .footer-links span { color: #b6aab8; font-size: 11px; line-height: 1.4; }
.footer-links a:hover { color: white; }
.footer-action { width: fit-content; padding: 0; border: 0; border-bottom: 1px solid #6f6571; background: none; color: #b6aab8; cursor: pointer; font-size: 11px; }
.footer-bottom { padding: 18px 0 24px; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.08); color: #6f6571; font-size: 9px; }

.drawer { width: min(450px, 100%); position: fixed; z-index: 120; top: 0; bottom: 0; right: 0; padding: 30px; background: var(--white); box-shadow: -30px 0 80px rgba(20,7,25,.25); transform: translateX(105%); transition: transform .35s ease; display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head small, .portal-top small, .portal-login > small { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.drawer-head h2 { margin: 4px 0 0; font: 800 30px/1 "Manrope", sans-serif; }
.icon-button { width: 42px; height: 42px; border: 1px solid rgba(24,10,28,.12); border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; color: inherit; font-size: 24px; }
.cart-items { margin: 25px -6px 0 0; padding-right: 6px; overflow: auto; display: grid; gap: 10px; }
.cart-item { padding: 13px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; border-radius: 14px; background: #f2ece5; }
.cart-item-icon { width: 52px; height: 52px; border-radius: 11px; display: grid; place-items: center; background: white; font-size: 27px; }
.cart-item h4 { margin: 0 0 4px; font-size: 13px; }
.cart-item small { color: #807480; font-size: 10px; }
.quantity { display: flex; align-items: center; gap: 8px; }
.quantity button { width: 25px; height: 25px; border: 0; border-radius: 50%; background: white; cursor: pointer; }
.quantity b { min-width: 12px; text-align: center; font-size: 11px; }
.cart-empty { margin: auto 0; text-align: center; color: #716772; }
.cart-empty span { font-size: 50px; filter: grayscale(1); opacity: .5; }
.cart-empty h3 { margin: 14px 0 6px; color: var(--ink); font: 800 18px/1.2 "Manrope", sans-serif; }
.cart-empty p { margin: 0; font-size: 12px; }
.drawer-summary { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(24,10,28,.1); }
.points-preview, .summary-row { display: flex; align-items: center; justify-content: space-between; }
.points-preview { margin-bottom: 15px; padding: 12px; border-radius: 11px; background: #eadef2; color: #4f315f; font-size: 11px; }
.points-preview strong { color: var(--purple-dark); }
.summary-row { font-size: 13px; }
.summary-row strong { font: 800 22px/1 "Manrope", sans-serif; }
.drawer-summary > p { margin: 12px 0 17px; color: #8a7f89; font-size: 9px; text-align: center; }
.drawer-summary .button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(9,4,11,.72); opacity: 0; visibility: hidden; transition: .3s; backdrop-filter: blur(7px); }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal { width: min(680px, calc(100% - 30px)); max-height: calc(100vh - 36px); position: fixed; z-index: 130; left: 50%; top: 50%; padding: 42px; overflow: auto; border-radius: 28px; background: var(--white); transform: translate(-50%, -46%) scale(.96); opacity: 0; visibility: hidden; transition: .3s; box-shadow: 0 35px 100px rgba(8,2,10,.4); }
.modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.modal-close { position: absolute; right: 18px; top: 18px; z-index: 3; }
.portal-modal { width: min(760px, calc(100% - 30px)); }
.club-intro-modal { width: min(720px, calc(100% - 28px)); padding: 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 14% 8%, rgba(204,112,212,.28), transparent 34%), linear-gradient(145deg,#170b1c,#321638 68%,#4d2251); box-shadow: 0 42px 120px rgba(13,4,16,.58); }
.club-intro-modal .modal-close { color:#fff; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.09); }
.club-intro-brand { min-height:150px; display:grid; place-items:center; padding:35px 70px 18px; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent); }
.club-intro-brand img { width:min(310px,78%); max-height:112px; object-fit:contain; filter:drop-shadow(0 14px 30px rgba(0,0,0,.32)); }
.club-intro-copy { padding:5px 52px 4px; text-align:center; }
.club-intro-copy small { color:#e6b7e8; font:900 9px/1 "Manrope",sans-serif; letter-spacing:.18em; }
.club-intro-copy h2 { margin:12px auto 13px; max-width:600px; color:#fff; font:800 clamp(34px,5vw,56px)/.98 "Manrope",sans-serif; letter-spacing:-.055em; }
.club-intro-copy p { max-width:590px; margin:0 auto; color:#d7c7da; font-size:13px; line-height:1.65; }
.club-intro-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:25px 35px 0; padding:9px; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:rgba(255,255,255,.055); }
.club-intro-benefits span { min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; color:#f2e9f3; font-size:10px; font-weight:800; text-align:center; }
.club-intro-benefits b { width:27px; height:27px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:#2a122f; background:linear-gradient(135deg,#f0c4ee,#c981d0); font-size:8px; }
.club-intro-actions { display:grid; justify-items:center; gap:11px; padding:22px 35px 32px; }
.club-intro-actions .button { min-width:260px; min-height:51px; border:0; color:#251029; background:linear-gradient(135deg,#f2caef,#c77dcd); box-shadow:0 14px 35px rgba(206,121,211,.24); }
.club-intro-actions .text-action { color:#cbb8ce; font-size:10px; }
.portal-login { max-width: 640px; margin: auto; text-align: center; }
.modal-badge { width: 66px; height: 66px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 21px; background: var(--ink); color: white; font: 800 32px/1 "Manrope", sans-serif; transform: rotate(-5deg); }
.portal-login h2 { margin: 12px 0; font: 800 36px/1 "Manrope", sans-serif; letter-spacing: -.045em; }
.portal-login > p { margin: 0 auto 23px; color: #776d78; font-size: 13px; line-height: 1.55; }
.club-onboarding-head { display: grid; grid-template-columns: 70px 1fr; gap: 20px; align-items: center; text-align: left; }
.club-onboarding-head .modal-badge { margin: 0; }
.club-onboarding-head small { color: var(--purple); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.club-onboarding-head h2 { margin: 7px 0 6px; }
.club-onboarding-head p { max-width: 520px; margin: 0; color: #776d78; font-size: 12px; line-height: 1.55; }
.club-benefits { margin: 24px 0; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 1px solid #eadfea; border-radius: 16px; background: linear-gradient(135deg, #fff, #f6eef7); }
.club-benefits span { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; border-radius: 11px; color: #544a56; font-size: 10px; font-weight: 800; text-align: left; }
.club-benefits b { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; font-size: 8px; }
.portal-login form { max-width: 520px; margin: 0 auto; display: grid; gap: 12px; text-align: left; }
.club-stepper { margin-bottom: 4px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.club-stepper > i { height: 1px; background: #e3d7e4; }
.club-stepper > span { display: flex; align-items: center; gap: 7px; color: #9a8f9b; font-size: 9px; font-weight: 800; white-space: nowrap; }
.club-stepper > span b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #ded2df; border-radius: 50%; background: #fff; color: #8a7f8b; font-size: 8px; }
.club-stepper > span.active { color: var(--purple-dark); }
.club-stepper > span.active b { border-color: var(--purple); background: var(--purple); color: #fff; box-shadow: 0 6px 16px rgba(174,101,179,.25); }
.club-stepper > span.complete b { border-color: #d8bd7c; background: #f2dcaa; color: #4a3516; }
.club-form-step { display: grid; gap: 12px; animation: clubStepIn .25s ease both; }
.club-form-step[hidden] { display: none; }
@keyframes clubStepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.club-step-copy { margin: 8px 0 2px; }
.club-step-copy small { color: var(--purple); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.club-step-copy h3 { margin: 5px 0 4px; font: 800 18px/1.15 "Manrope", sans-serif; letter-spacing: -.025em; }
.club-step-copy p { margin: 0; color: #817682; font-size: 10px; line-height: 1.5; }
.portal-login label { color: #5f5561; font-size: 10px; font-weight: 800; }
.portal-login input, .portal-login select { width: 100%; height: 50px; margin-top: 6px; padding: 0 15px; border: 1px solid #ded3df; border-radius: 12px; outline: none; background: white; }
.portal-login input:focus, .portal-login select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(157,69,222,.1); }
.portal-login input:user-invalid, .portal-login select:user-invalid { border-color: #c34b65; box-shadow: 0 0 0 3px rgba(195,75,101,.08); }
.portal-login .field-help { display: block; margin-top: 5px; color: #958995; font-size: 8px; font-weight: 500; }
.club-form-step [data-club-next] { margin-top: 3px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.club-form-step [data-club-next] span { font-size: 16px; transition: transform .2s ease; }
.club-form-step [data-club-next]:hover span { transform: translateX(3px); }
.club-device-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: #887c89; font-size: 8px; text-align: center; }
.club-device-note span { color: #4f7c41; font-weight: 900; }
.club-consents { padding: 4px 0; display: grid; gap: 8px; }
.portal-login .consent-row { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; color: #6a5f6c; font-size: 10px; font-weight: 500; line-height: 1.45; cursor: pointer; }
.portal-login .consent-row input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--purple); }
.portal-login .consent-row button { padding: 0; border: 0; background: none; color: var(--purple-dark); cursor: pointer; font: inherit; font-weight: 800; text-decoration: underline; }
.portal-login .consent-row span b { display: block; margin-bottom: 2px; color: #453a46; font-size: 10px; }
.portal-login .benefit-consent, .portal-login .location-consent { padding: 11px; border-radius: 11px; background: #f4edf5; }
.portal-login .location-consent { background: #f1ece6; }
.club-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.club-form-actions .button { min-width: 210px; }
.club-form-actions .text-action { min-height: 44px; }
.form-status { min-height: 15px; margin: 0; color: #6a5f6c; font-size: 10px; line-height: 1.4; }
.form-status.error { color: #ae2748; }
.form-status.success { color: #23713b; }
.portal-login button:disabled { cursor: wait; opacity: .65; }
.demo-note { display: block; margin-top: 14px; color: #9b919b; font-size: 9px; }
.portal-top { display: flex; align-items: center; justify-content: space-between; padding-right: 45px; }
.portal-top h2 { margin: 5px 0 0; font: 800 28px/1 "Manrope", sans-serif; }
.portal-balance { margin-top: 26px; padding: 24px; border-radius: 20px; background: var(--ink); color: white; display: flex; align-items: center; justify-content: space-between; }
.portal-balance small { display: block; color: #9f91a3; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.portal-balance strong { font: 800 55px/.9 "Manrope", sans-serif; }
.portal-balance div:first-child > span { color: #9f91a3; font-size: 11px; }
.rank { display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 8px; }
.rank > span { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 20px; }
.rank b { font-size: 13px; }
.portal-tabs { margin: 25px 0 18px; display: flex; gap: 7px; }
.portal-tabs button { padding: 9px 14px; border: 0; border-radius: 99px; background: #eee6ee; cursor: pointer; color: #726673; font-size: 10px; font-weight: 800; }
.portal-tabs button.active { background: var(--purple); color: white; }
.portal-panel { display: none; }
.portal-panel.active { display: block; }
.mission-card { padding: 18px; border-radius: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: linear-gradient(135deg, #e9d8f4, #f5e9de); }
.mission-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: white; color: var(--purple); }
.mission-card small { color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.mission-card h3 { margin: 4px 0 3px; font-size: 14px; }
.mission-card p { margin: 0; color: #796f79; font-size: 10px; }
.mission-card > b { color: var(--purple); font: 800 17px/1 "Manrope", sans-serif; }
.recommendation-card { margin: 14px 0 22px; padding: 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #eadcec; border-radius: 16px; background: #fff; }
.recommendation-card small { color: var(--purple); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.recommendation-card h3 { margin: 5px 0 4px; font: 800 16px/1.15 "Manrope", sans-serif; }
.recommendation-card p { margin: 0; color: #776d78; font-size: 10px; line-height: 1.45; }
.recommendation-card a { flex: 0 0 auto; color: var(--purple-dark); font-size: 10px; font-weight: 800; }
.panel-title { margin: 22px 0 11px; font: 800 14px/1 "Manrope", sans-serif; }
.mini-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-games button { padding: 14px 10px; border: 1px solid #e3d9e3; border-radius: 13px; background: white; cursor: pointer; display: grid; gap: 3px; text-align: left; }
.mini-games button > span { font-size: 20px; color: var(--purple); }
.mini-games b { font-size: 11px; }
.mini-games small { color: #8a7f8a; font-size: 8px; }
.review-card { margin-top: 22px; padding: 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; border-radius: 18px; color: #fff; background: linear-gradient(125deg, #1a0f1e, #3b1648); }
.review-card span { color: var(--lime); letter-spacing: .12em; }
.review-card h3 { margin: 7px 0 5px; font: 800 17px/1.15 "Manrope", sans-serif; }
.review-card p { margin: 0; color: #c5b8c8; font-size: 10px; line-height: 1.45; }
.review-card .button { min-height: 42px; padding-inline: 16px; background: #fff; color: var(--ink); font-size: 10px; }
.mission-list { display: grid; gap: 8px; }
.mission-list article { padding: 15px; border-radius: 13px; background: #f2ebe5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.mission-list article > span { color: var(--purple); font-size: 9px; font-weight: 800; }
.mission-list h3 { margin: 0 0 4px; font-size: 12px; }
.mission-list p { margin: 0; color: #847984; font-size: 9px; }
.mission-list b { color: var(--purple); font-size: 10px; }
.reward-wallet { display: grid; gap: 9px; }
.reward-card { padding: 15px; border: 1px dashed #d2c4d2; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; }
.reward-card div { display: flex; align-items: center; gap: 10px; }
.reward-card span { font-size: 24px; }
.reward-card h3 { margin: 0 0 3px; font-size: 12px; }
.reward-card p { margin: 0; color: #827782; font-size: 9px; }
.reward-code { padding: 7px 9px; border-radius: 8px; background: var(--ink); color: white; font-size: 9px; font-weight: 800; }
.empty-rewards { padding: 30px; border-radius: 14px; background: #f2ebe5; text-align: center; color: #776d78; font-size: 11px; }

.game-modal { width: min(620px, calc(100% - 30px)); text-align: center; }
.game-intro .game-big-icon { width: 88px; height: 88px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 26px; background: #eadbf3; color: var(--purple); font: 800 40px/1 "Manrope", sans-serif; }
.game-intro small { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.game-intro h2 { margin: 9px 0 10px; font: 800 32px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.game-intro p { max-width: 430px; margin: 0 auto 22px; color: #756b76; font-size: 12px; line-height: 1.55; }
.game-intro .cost { margin-bottom: 18px; display: inline-flex; padding: 7px 10px; border-radius: 99px; background: var(--ink); color: white; font-size: 9px; font-weight: 800; }
.quiz-question h3 { max-width: 470px; margin: 12px auto 20px; font: 800 23px/1.2 "Manrope", sans-serif; }
.quiz-options { display: grid; gap: 8px; }
.quiz-options button { min-height: 47px; padding: 0 14px; border: 1px solid #ddd1dd; border-radius: 11px; background: white; cursor: pointer; }
.quiz-options button:hover { border-color: var(--purple); background: #f4ebf9; }
.quiz-progress { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.memory-board { max-width: 380px; margin: 18px auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.memory-tile { aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--purple); cursor: pointer; color: transparent; font-size: 27px; transition: transform .2s, background .2s; transform-style: preserve-3d; }
.memory-tile.flipped, .memory-tile.matched { background: #eee4ef; color: inherit; transform: rotateY(180deg); }
.memory-tile.matched { background: #dff0bd; }
.game-status { color: #736974; font-size: 11px; }
.reaction-zone { height: 270px; margin: 18px 0; border: 0; border-radius: 20px; display: grid; place-items: center; background: #efe7ef; cursor: pointer; width: 100%; }
.reaction-zone.waiting { background: #df5d5d; color: white; }
.reaction-zone.ready { background: var(--lime); color: #1d280b; }
.reaction-zone strong { font: 800 30px/1 "Manrope", sans-serif; }
.game-result .result-icon { font-size: 60px; }
.game-result h2 { margin: 12px 0 8px; font: 800 31px/1 "Manrope", sans-serif; }
.game-result p { margin: 0 auto 20px; max-width: 430px; color: #756a75; font-size: 12px; line-height: 1.6; }
.game-result .reward-code { display: inline-block; margin-bottom: 18px; font-size: 12px; }
.terms-content { text-align: left; }
.terms-content > small { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.terms-content h2 { margin: 8px 0 6px; font: 800 32px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.terms-lead { margin: 0 0 22px; color: #7e737e; font-size: 12px; }
.terms-content ol { margin: 0; padding-left: 21px; display: grid; gap: 12px; color: #655b66; font-size: 11px; line-height: 1.55; }
.terms-content li::marker { color: var(--purple); font-weight: 800; }
.terms-content b { color: var(--ink); }
.terms-warning { margin: 22px 0 0; padding: 14px; border-radius: 12px; background: #f2e7d9; color: #6e5542; font-size: 10px; line-height: 1.5; }
.mobile-order-bar { display: none; }

.toast { min-width: 250px; position: fixed; z-index: 200; left: 50%; bottom: 25px; padding: 13px 18px; border-radius: 99px; background: var(--ink); color: white; text-align: center; font-size: 11px; font-weight: 700; box-shadow: 0 16px 40px rgba(0,0,0,.25); transform: translate(-50%, 20px); opacity: 0; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .main-nav { display: none; }
  .menu-toggle { display: block; order: 3; }
  .main-nav.open { position: absolute; left: 0; right: 0; top: 72px; padding: 20px; display: grid; gap: 17px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
  .hero { grid-template-columns: 1fr 1fr; gap: 20px; }
  .hero-scene { transform: scale(.9); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .club-section { gap: 50px; }
}

@media (max-width: 760px) {
  .section-shell { width: min(100% - 30px, 580px); }
  .site-header { width: calc(100% - 20px); margin-top: 10px; height: 68px; padding: 0 14px; }
  .brand { min-width: 0; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-copy strong { font-size: 15px; }
  .header-actions { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 20px; padding: 68px 0 50px; }
  .hero h1 { font-size: clamp(53px, 16vw, 74px); }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-trust { gap: 10px 18px; }
  .hero-scene { min-height: 485px; transform: scale(.85); margin: -25px -30px; }
  .hero-scene::before { width: 400px; height: 400px; }
  .ticker div { justify-content: flex-start; animation: scrollTicker 18s linear infinite; }
  @keyframes scrollTicker { to { transform: translateX(-50%); } }
  .value-strip { grid-template-columns: 1fr; padding-top: 48px; }
  .value-strip article, .value-strip article:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(42,22,45,.11); }
  .menu-section, .club-section, .visit-section { padding: 75px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .section-heading h2, .club-copy h2, .visit-copy h2 { font-size: 48px; }
  .menu-toolbar { align-items: flex-start; flex-direction: column; }
  .cart-trigger { display: none; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 350px; }
  .product-art { height: 190px; }
  .menu-note { align-items: flex-start; flex-wrap: wrap; }
  .menu-note p { flex: 1; }
  .menu-note a { margin-left: 24px; }
  .experiences, .games-section { padding: 80px 0; }
  .night-grid, .game-grid { grid-template-columns: 1fr; }
  .night-card { min-height: 340px; }
  .club-section { grid-template-columns: 1fr; }
  .member-card { min-height: 450px; padding: 25px; }
  .points-balance strong { font-size: 63px; }
  .member-card-footer { left: 25px; right: 25px; }
  .visit-card { grid-template-columns: 1fr; }
  .map-pattern { min-height: 300px; }
  .visit-copy { padding: 42px 26px; }
  .visit-actions { flex-direction: column; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
  .drawer { padding: 22px; }
  .modal { padding: 34px 20px 24px; }
  .portal-modal { width: calc(100% - 18px); max-height: calc(100vh - 18px); padding-top: 48px; border-radius: 22px; }
  .club-onboarding-head { grid-template-columns: 48px 1fr; gap: 13px; }
  .club-onboarding-head .modal-badge { width: 48px; height: 48px; border-radius: 15px; font-size: 23px; }
  .club-onboarding-head h2 { margin: 5px 0; font-size: 27px; }
  .club-onboarding-head p { font-size: 10px; }
  .club-benefits { margin: 18px 0; padding: 7px; gap: 3px; }
  .club-benefits span { min-height: 54px; padding: 7px 5px; flex-direction: column; justify-content: center; gap: 5px; font-size: 8px; text-align: center; }
  .club-stepper { gap: 8px; }
  .club-stepper > span { font-size: 8px; }
  .club-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .club-form-actions .button { width: 100%; }
  .club-form-actions .text-action { align-self: center; }
  .portal-balance { align-items: flex-start; }
  .portal-balance strong { font-size: 44px; }
  .rank { display: none; }
  .mini-games { grid-template-columns: 1fr 1fr 1fr; }
  .mission-card { grid-template-columns: auto 1fr; }
  .mission-card > b { grid-column: 2; }
  .memory-board { grid-template-columns: repeat(3, 1fr); }
  .mobile-order-bar {
    position: fixed;
    z-index: 80;
    left: 10px;
    right: 10px;
    bottom: 10px;
    min-height: 58px;
    padding: 8px 10px 8px 16px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    background: rgba(18,12,20,.94);
    color: white;
    display: none;
    align-items: center;
    gap: 13px;
    box-shadow: 0 15px 45px rgba(0,0,0,.3);
    backdrop-filter: blur(15px);
  }
  .mobile-order-bar.active { display: flex; }
  .mobile-order-bar span { color: #a99eaa; font-size: 10px; }
  .mobile-order-bar span b { color: var(--lime); }
  .mobile-order-bar strong { margin-left: auto; font-size: 13px; }
  .mobile-order-bar em { padding: 11px 14px; border-radius: 12px; background: var(--purple); font-style: normal; font-size: 10px; font-weight: 800; }
}

/* MAMBAR Digital 2.0 · identidad oficial y carta completa */
:root {
  --ink: #211a20;
  --ink-2: #352b32;
  --paper: #f5eef4;
  --paper-2: #eaddea;
  --purple: #ae65b3;
  --purple-dark: #7b3f82;
  --pink: #d58d98;
  --orange: #d58d98;
  --lime: #f1d6ef;
}

/* MAMBAR Club 3.1 · experiencia, juegos comerciales y desafío mensual */
.portal-balance .daily-score { min-width: 110px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.12); }
.portal-balance .daily-score b { display: block; margin: 5px 0 2px; font: 800 25px/1 "Manrope", sans-serif; color: var(--lime); }
.portal-balance .daily-score span { color: #a99eab; font-size: 8px; }
.monthly-challenge-card { margin: 15px 0 22px; padding: 19px; border: 1px solid rgba(157,69,222,.22); border-radius: 17px; background: linear-gradient(145deg,#17101a,#25132b); color: #fff; box-shadow: 0 15px 36px rgba(38,13,45,.14); }
.monthly-challenge-head { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; }
.monthly-challenge-head>span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg,var(--purple),var(--pink)); color: #fff; font-size: 18px; }
.monthly-challenge-head small { color: #c78be8; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.monthly-challenge-head h3 { margin: 4px 0 2px; font: 800 15px/1.1 "Manrope",sans-serif; }
.monthly-challenge-head p { margin: 0; color: #b7a9ba; font-size: 9px; }
.monthly-challenge-head>b { padding: 6px 9px; border-radius: 99px; background: rgba(197,240,108,.12); color: var(--lime); font-size: 8px; }
.monthly-progress-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 17px 0; }
.monthly-progress-grid>div { padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.04); }
.monthly-progress-grid span { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.monthly-progress-grid i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--purple),var(--pink)); transition: width .3s ease; }
.monthly-progress-grid b { display: block; margin-top: 7px; font-size: 11px; }
.monthly-progress-grid em { font-style: normal; }
.monthly-progress-grid small { color: #9f92a2; font-size: 7px; }
.monthly-leaderboard { margin: 0 0 14px; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,.045); }
.monthly-leaderboard>small { display: block; margin-bottom: 5px; color: #988a9b; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.monthly-leaderboard>span { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 8px; }
.monthly-leaderboard>span b { color: #d99afc; }.monthly-leaderboard>span em { color: #d5c9d7; font-style: normal; }.monthly-leaderboard>span strong { color: var(--lime); }
.monthly-challenge-card footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.monthly-challenge-card footer span { font-size: 9px; }.monthly-challenge-card footer strong { color: #db9cff; }
.monthly-challenge-card footer small { max-width: 250px; color: #948799; font-size: 7px; text-align: right; }
.mini-games { max-height: 305px; overflow-y: auto; padding-right: 4px; }
.mini-games button { min-height: 82px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.mini-games button:hover { transform: translateY(-2px); border-color: rgba(157,69,222,.45); box-shadow: 0 9px 23px rgba(78,31,89,.09); }
.pairing-hero { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 18px 0; padding: 18px; border-radius: 15px; background: #f3ebf5; text-align: left; }
.pairing-hero>span { font-size: 42px; }.pairing-hero small { color: var(--purple-dark); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.pairing-hero h3 { margin: 5px 0 0!important; font-size: 20px!important; }
.ticket-target { margin: 16px 0; padding: 19px; border-radius: 16px; background: var(--ink); color: #fff; }.ticket-target small { display: block; color: #b998c6; font-size: 8px; font-weight: 800; letter-spacing: .13em; }.ticket-target strong { display: block; margin-top: 6px; font: 800 34px/1 "Manrope",sans-serif; }
.ticket-options button { display: flex; align-items: center; justify-content: space-between; gap: 9px; }.ticket-options button b { max-width: 44%; font-size: 10px; }.ticket-options button span { color: var(--purple); font-size: 18px; }
.flavor-clue { margin: 17px 0; padding: 22px; border-radius: 15px; background: #f2eaf5; color: #5d3a66; font: 700 16px/1.45 "Manrope",sans-serif; }
.emoji-clue { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 17px 0; font-size: 64px; }.emoji-clue span { padding: 9px 11px; border-radius: 9px; background: #eee4f1; color: var(--purple-dark); font: 800 14px/1 ui-monospace,monospace; }
.simon-board { width: min(330px,100%); margin: 20px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.simon-board button { aspect-ratio: 1.4; border: 0; border-radius: 17px; opacity: .55; cursor: pointer; transition: .16s; }.simon-purple { background:#9d45de }.simon-pink { background:#ef3d8f }.simon-orange { background:#ff7339 }.simon-lime { background:#a9db51 }.simon-board button.lit { opacity: 1; transform: scale(1.04); box-shadow: 0 0 25px currentColor; }
.flame-arena { position: relative; height: 300px; margin: 17px 0; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at center,rgba(157,69,222,.18),transparent 48%),#19101c; }.flame-target { position: absolute; width: 58px; height: 58px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); cursor: pointer; font-size: 30px; transition: left .12s,top .12s,transform .12s; }.flame-target:hover { transform: scale(1.08); }
.order-products { display: grid; gap: 9px; margin: 17px 0; }.order-products button { display: grid; grid-template-columns: 42px 1fr; align-items: center; min-height: 56px; padding: 7px 14px; border: 1px solid #dfd4e0; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; }.order-products button span { font-size: 25px; }.order-products button.selected { border-color: var(--purple); background: #f1e8f6; opacity: .7; }
.scramble-word { margin: 18px 0; padding: 19px 12px; border-radius: 15px; background: var(--ink); color: #e2aeff; font: 800 clamp(20px,5vw,32px)/1.25 ui-monospace,monospace; letter-spacing:.13em; overflow-wrap:anywhere; }
@media(max-width:640px){.portal-balance{gap:16px;flex-wrap:wrap}.portal-balance .daily-score{width:100%;padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.12)}.monthly-progress-grid{grid-template-columns:1fr}.monthly-challenge-head{grid-template-columns:38px 1fr}.monthly-challenge-head>b{grid-column:1/-1;justify-self:start}.monthly-challenge-card footer{align-items:flex-start;flex-direction:column}.monthly-challenge-card footer small{text-align:left}.mini-games{max-height:390px}}
.brand { min-width: 92px; }
.brand-logo { width: auto; height: 66px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(174, 101, 179, .22)); }
.admin-entry { padding: 8px 0; color: #e3b6df; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.admin-entry:hover { color: #fff; }
.nav-admin-entry { display: none; }
.button-primary { background: linear-gradient(120deg, #d58d98, #ae65b3 58%, #7b3f82); box-shadow: 0 14px 34px rgba(174, 101, 179, .3); }
.button-primary:hover { background: linear-gradient(120deg, #e39aa5, #bc73c0 58%, #88498f); box-shadow: 0 18px 42px rgba(174, 101, 179, .38); }
.hero-scene::before { background: radial-gradient(circle at 50% 30%, rgba(213,141,152,.62), transparent 28%), linear-gradient(145deg, #9b559f, #5e3265 52%, #24151f); }
.hero-card-main { min-height: 520px; align-items: center; text-align: center; color: #fff; background: linear-gradient(160deg, rgba(35,25,35,.96), rgba(12,8,13,.97)); border: 1px solid rgba(255,255,255,.12); }
.hero-card-main > div:last-child { position: relative; z-index: 2; }
.hero-card-main small { color: #e2b7df; }
.hero-card-main p { color: #cbbbc9; }
.hero-official-logo { width: min(280px, 92%); max-height: 365px; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 20px 38px rgba(0,0,0,.4)); }
.hero h1 em { color: #df9ca8; }
.hero .eyebrow > span { background: #dca0d8; box-shadow: 0 0 16px rgba(220,160,216,.7); }
.ticker b, .live-card > small, .value-strip article > span { color: #e6b3df; }
.menu-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; }
.category-scroll { grid-column: 1 / -1; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.filter-chip { flex: 0 0 auto; white-space: nowrap; }
.filter-chip small { margin-left: 4px; opacity: .62; }
.menu-search input { width: min(480px, 100%); min-height: 47px; padding: 0 18px; border: 1px solid rgba(26,12,30,.13); border-radius: 99px; background: #fff; color: var(--ink); outline: none; }
.menu-search input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(174,101,179,.12); }
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card { min-height: 345px; }
.product-art { height: 175px; background: linear-gradient(145deg, #5b355e, #21151f); }
.product-art::before, .product-art::after { z-index: 0; }
.product-art img { width: 100%; height: 100%; position: relative; z-index: 1; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-art img { transform: scale(1.05); }
.product-art .emoji { z-index: 2; }
.points-pill { z-index: 4; }
.category-pill { position: absolute; z-index: 4; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 9px; border-radius: 99px; background: rgba(19,12,18,.78); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.product-info { padding: 18px; }
.product-info h3 { font-size: 17px; }
.product-info p { display: -webkit-box; min-height: 37px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.menu-empty { grid-column: 1 / -1; padding: 70px 20px; border: 1px dashed rgba(64,34,68,.2); border-radius: 20px; text-align: center; }
.menu-empty > span { color: var(--purple); font-size: 30px; }
.game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.price-visual { background: linear-gradient(145deg, #d58d98, #653567); }
.price-visual span { position: absolute; left: 25px; top: 18px; color: rgba(255,255,255,.22); font: 900 100px/1 "Manrope",sans-serif; }
.price-visual b { color: #fff; font: 900 90px/1 "Manrope",sans-serif; }
.price-visual i { position: absolute; right: 24px; bottom: 20px; color: #fff; font-size: 10px; font-style: normal; letter-spacing: .2em; }
.price-product { margin: 8px auto 14px; font-size: 74px; }
.mini-games { grid-template-columns: repeat(4, 1fr); }
.qr-claim { margin-bottom: 18px; padding: 18px; border: 1px solid #e2d4e3; border-radius: 16px; background: linear-gradient(135deg, #fff, #f4e8f4); }
.qr-claim h3 { margin: 4px 0; }
.qr-claim p { margin: 0; color: #756a76; font-size: 11px; }
.qr-claim > div:nth-child(2) { margin-top: 13px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.qr-claim input { min-width: 0; padding: 0 14px; border: 1px solid #d9c9dc; border-radius: 99px; text-transform: uppercase; }
.qr-claim .form-status { margin-top: 8px; }
.guest-order-fields { margin-bottom: 13px; padding: 13px; border-radius: 13px; background: #f5edf5; }
.guest-order-fields > small { color: #766b77; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.guest-order-fields > div { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.guest-order-fields input { min-width: 0; padding: 10px; border: 1px solid #decede; border-radius: 9px; background: #fff; font-size: 11px; }
.guest-order-fields .text-action { margin-top: 8px; padding: 0; color: var(--purple-dark); font-size: 9px; text-align: left; }
.footer-logo { width: 155px; height: auto; filter: drop-shadow(0 18px 30px rgba(174,101,179,.22)); }

@media (max-width: 1120px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .brand-logo { height: 57px; }
  .nav-admin-entry { display: block; color: #e2b1dc; }
  .menu-toolbar { grid-template-columns: 1fr; }
  .category-scroll { grid-column: 1; }
  .menu-search { width: 100%; }
  .menu-search input { width: 100%; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-card { min-height: 315px; }
  .product-art { height: 145px; }
  .product-info { padding: 14px; }
  .product-info h3 { font-size: 15px; }
  .product-bottom strong { font-size: 15px; }
  .game-grid { grid-template-columns: 1fr; }
  .mini-games { grid-template-columns: 1fr 1fr; }
  .qr-claim > div:nth-child(2), .guest-order-fields > div { grid-template-columns: 1fr; }
  .hero-card-main { min-height: 470px; }
  .hero-official-logo { max-height: 325px; }
}
@media (max-width: 440px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-art { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* MAMBAR 3.8 · juegos 7/10, instalación PWA y responsive final. */
html,body{max-width:100%;overflow-x:hidden}.button,button,input,select,textarea{touch-action:manipulation}.button,button{min-height:44px}.mini-games button em{display:inline-flex;width:max-content;margin-top:4px;padding:4px 6px;border-radius:99px;color:#74417b;background:#f1e6f2;font-size:7px;font-style:normal;font-weight:900;letter-spacing:.04em}.game-rule-pills{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:-8px 0 18px}.game-rule-pills span{padding:7px 10px;border-radius:99px;color:#65426b;background:#f0e6f2;font-size:9px;font-weight:800}.daily-secret-icon{width:78px;height:78px;display:grid;place-items:center;margin:15px auto;border-radius:25px;color:#fff;background:radial-gradient(circle at 30% 20%,#e596ec,#9d45de 52%,#4e1d58);box-shadow:0 16px 42px rgba(93,35,104,.25);font:900 37px/1 "Manrope",sans-serif}.daily-clue{margin:0 0 16px!important;padding:13px;border:1px solid #e4d7e6;border-radius:13px;color:#6b566d!important;background:#f8f2f9}.daily-guess-game .quiz-options button{display:grid;gap:3px;padding:12px 14px;text-align:left}.daily-guess-game .quiz-options button b{font-size:12px}.daily-guess-game .quiz-options button small{color:#8e818f;font-size:8px}.memory-board-hard{grid-template-columns:repeat(4,1fr);max-width:430px}.memory-board-hard .memory-tile{min-height:66px}.club-install-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:center;margin:0 0 16px;padding:16px;border:1px solid #d9c7dc;border-radius:18px;background:linear-gradient(135deg,#fff,#f4e7f5);box-shadow:0 10px 30px rgba(74,34,79,.06)}.club-install-icon{width:58px;height:58px;display:grid;place-items:center;overflow:hidden;border-radius:16px;background:#1d111f}.club-install-icon img{width:100%;height:100%;object-fit:cover}.club-install-card small{color:#874b8e;font:800 8px/1 "Manrope",sans-serif;letter-spacing:.13em}.club-install-card h3{margin:5px 0 3px;font:800 16px/1.15 "Manrope",sans-serif}.club-install-card p{margin:0;color:#766878;font-size:9px;line-height:1.45}.club-install-card>div>span{display:block;margin-top:5px;color:#497852;font-size:8px;font-weight:700}.club-install-card.is-installed{border-color:#cfe5d4;background:#f3faf5}.ios-install-help{grid-column:2/-1;padding:10px 12px;border-radius:11px;color:#624266;background:#eadcec;font-size:10px;line-height:1.5}.ios-install-help span{display:inline!important;color:#724678!important;font-size:15px!important}.portal-modal,.game-modal{overscroll-behavior:contain}.portal-panel{min-width:0}.portal-tabs{scrollbar-width:none}.portal-tabs::-webkit-scrollbar{display:none}

@media(max-width:900px){.section-shell{width:min(100% - 32px,1180px)}.site-header{padding-inline:18px}.hero,.club-section{gap:32px}.portal-dashboard{min-width:0}.portal-panel{overflow:visible}.mini-games{grid-template-columns:repeat(2,minmax(0,1fr))}.club-install-card{grid-template-columns:52px minmax(0,1fr)}.club-install-card>.button{grid-column:1/-1;width:100%}.ios-install-help{grid-column:1/-1}}
@media(max-width:640px){body{padding-bottom:env(safe-area-inset-bottom)}.site-header{min-height:72px;padding:8px 14px}.brand-logo{height:50px}.header-actions .button-small{display:none}.section-shell{width:min(100% - 24px,1180px)}.hero{padding-top:96px}.hero h1{font-size:clamp(48px,16vw,72px)}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions .button{width:100%}.section-heading h2,.club-copy h2{font-size:clamp(38px,12vw,56px)}.modal.portal-modal{inset:0!important;width:100%!important;height:100dvh;max-height:none!important;margin:0!important;padding:52px 14px calc(20px + env(safe-area-inset-bottom));border-radius:0;overflow-y:auto}.game-modal{width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:50px 16px 20px;border-radius:20px}.portal-top{position:sticky;top:-52px;z-index:8;margin:-52px -14px 0;padding:52px 14px 12px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.portal-tabs{position:sticky;top:58px;z-index:7;margin-inline:-14px;padding:7px 14px;border-block:1px solid #eadfeb;background:rgba(255,255,255,.95)}.portal-tabs button{min-height:42px}.portal-balance{padding:16px}.portal-panel{padding-top:13px}.club-install-card{grid-template-columns:46px minmax(0,1fr);padding:13px}.club-install-icon{width:46px;height:46px;border-radius:13px}.club-install-card h3{font-size:14px}.mini-games{grid-template-columns:1fr 1fr;gap:8px;max-height:none}.mini-games button{min-height:102px;padding:13px 10px}.mini-games b{font-size:11px;line-height:1.25}.memory-board,.memory-board-hard{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.memory-tile,.memory-board-hard .memory-tile{min-height:58px;font-size:21px}.quiz-options button{min-height:52px;font-size:12px}.table-checkin-card,.club-live-experience,.flash-zone{border-radius:17px}.club-live-card>header{grid-template-columns:38px minmax(0,1fr)}.club-live-card>header>b{grid-column:2;justify-self:start}.flash-clock{gap:8px;flex-wrap:wrap}.product-grid{grid-template-columns:1fr 1fr}.product-card{min-width:0}.product-info h3{overflow-wrap:anywhere}.drawer{width:100%;max-width:100%;padding:20px 14px calc(20px + env(safe-area-inset-bottom))}input,select,textarea{font-size:16px!important}}
@media(max-width:420px){.product-grid{grid-template-columns:1fr}.product-art{height:200px}.mini-games{grid-template-columns:1fr}.mini-games button{min-height:84px}.memory-board,.memory-board-hard{grid-template-columns:repeat(4,minmax(0,1fr))}.memory-tile,.memory-board-hard .memory-tile{min-height:52px}.portal-balance strong{font-size:38px}.portal-top h2{font-size:22px}.club-benefits{grid-template-columns:repeat(3,1fr)}.monthly-challenge-card{padding:15px}.flash-offer{padding:13px}.flash-clock{align-items:flex-start;flex-direction:column}.club-live-card form{padding-inline:14px}}

/* Identidad nocturna MAMBAR 2026 */
:root {
  --ink: #08070a;
  --ink-2: #151018;
  --paper: #f5f0e8;
  --paper-2: #e9ded2;
  --purple: #bd48ff;
  --purple-dark: #7620aa;
  --orange: #ff5a24;
  --pink: #ff2d7d;
  --lime: #d9ff45;
  --white: #fffdf7;
}

body { background: var(--ink); }
.site-header {
  position: sticky;
  top: 14px;
  color: #fff;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(8, 7, 10, .8);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
}
.brand-mark { background: linear-gradient(145deg, var(--orange), var(--pink) 48%, var(--purple)); }
.menu-toggle span { background: #fff; }
.main-nav a::after { background: var(--lime); }
.button-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--orange), var(--pink) 52%, var(--purple));
  box-shadow: 0 14px 34px rgba(255, 45, 125, .28);
}
.button-primary:hover {
  background: linear-gradient(120deg, #ff6c35, #ff4188 52%, #ca5bff);
  box-shadow: 0 18px 42px rgba(255, 45, 125, .38);
}

.hero {
  position: relative;
  min-height: 780px;
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 83% 23%, rgba(189, 72, 255, .24), transparent 29%),
    radial-gradient(circle at 6% 62%, rgba(255, 90, 36, .14), transparent 26%),
    linear-gradient(120deg, #070609 0%, #0c0810 48%, #140919 100%);
}
.hero::after {
  content: "MAMBAR";
  position: absolute;
  z-index: -1;
  left: -4vw;
  bottom: 9px;
  color: rgba(255, 255, 255, .025);
  font: 800 clamp(120px, 19vw, 290px)/.7 "Manrope", sans-serif;
  letter-spacing: -.09em;
  pointer-events: none;
}
.hero h1 { max-width: 760px; font-size: clamp(64px, 7.5vw, 108px); text-transform: uppercase; }
.hero h1 em { color: var(--lime); }
.hero-copy > p { color: #c9bdcc; }
.hero-trust { color: #958a98; }
.hero-trust b { color: #fff; }
.hero .button-ghost { color: #fff; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); }
.hero .eyebrow > span { background: var(--lime); box-shadow: 0 0 16px rgba(217, 255, 69, .7); }
.hero-scene::before {
  background: linear-gradient(145deg, #e05dff, #8b2ac1 48%, #32113b);
  box-shadow: 0 50px 130px rgba(173, 57, 232, .33);
}
.hero-card-main { background: linear-gradient(155deg, #fffef9, #e8dce9); }
.hero-scene.has-photo {
  min-height: 610px;
  overflow: visible;
}
.hero-scene.has-photo::before {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  background-image: linear-gradient(180deg, rgba(5, 3, 7, .08), rgba(5, 3, 7, .7)), var(--mambar-hero-image);
  background-position: center;
  background-size: cover;
  box-shadow: 0 50px 130px rgba(0, 0, 0, .45);
}
.hero-scene.has-photo .hero-card-main {
  width: calc(100% - 68px);
  min-height: 165px;
  left: 34px;
  right: 34px;
  bottom: 34px;
  position: absolute;
  padding: 24px;
  color: #fff;
  transform: none;
  background: rgba(8, 7, 10, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(18px);
}
.hero-scene.has-photo .hero-card-main p { color: #cfc4d1; }
.hero-scene.has-photo .food-visual { display: none; }
.hero-scene.has-photo .floating-card-points { left: -5%; top: 18%; }
.hero-scene.has-photo .floating-card-live { right: -4%; bottom: 28%; }

.ticker { border-block: 1px solid rgba(255, 255, 255, .1); background: #0f0b12; }
.ticker b { color: var(--lime); }

.mambar-live { padding: 110px 0 125px; color: #fff; }
.live-heading { margin-bottom: 44px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.live-heading small { color: var(--lime); font: 800 11px/1 "Manrope", sans-serif; letter-spacing: .2em; }
.live-heading h2 { margin: 14px 0 0; font: 800 clamp(48px, 5.5vw, 78px)/.92 "Manrope", sans-serif; letter-spacing: -.065em; }
.live-heading h2 em { color: var(--purple); font-style: normal; }
.live-heading > a { padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .35); font-size: 13px; font-weight: 700; }
.live-heading > a span { margin-left: 18px; color: var(--lime); }
.live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.live-card {
  min-height: 430px;
  padding: 28px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .28s ease, border-color .28s ease;
}
.live-card:hover { transform: translateY(-7px); border-color: rgba(255, 255, 255, .32); }
.live-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .18), transparent 28%);
}
.live-card::after {
  position: absolute;
  z-index: -1;
  top: 65px;
  right: -24px;
  color: rgba(255, 255, 255, .09);
  font: 800 170px/1 "Manrope", sans-serif;
  transform: rotate(-9deg);
}
.live-card-neon { background: linear-gradient(145deg, #5a118c, #1b0c25 62%, #0c0910); }
.live-card-neon::after { content: "2×1"; }
.live-card-heart { background: linear-gradient(145deg, #a70d4d, #280916 65%, #0c0910); }
.live-card-heart::after { content: "♥"; color: rgba(255, 107, 165, .15); }
.live-card-mic { background: linear-gradient(145deg, #b93412, #2a0d09 60%, #0c0910); }
.live-card-mic::after { content: "●"; color: rgba(255, 137, 52, .16); }
.live-card-day { position: absolute; top: 25px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; }
.live-card-day span { font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .16em; }
.live-card-day b { min-width: 46px; height: 46px; padding-inline: 10px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font: 800 13px/1 "Manrope", sans-serif; }
.live-card > small { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .19em; }
.live-card h3 { margin: 10px 0 15px; font: 800 40px/.96 "Manrope", sans-serif; letter-spacing: -.05em; }
.live-card p { max-width: 290px; margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.55; }
.live-disclaimer { margin: 18px 2px 0; color: #817783; font-size: 10px; }

.value-strip { color: #fff; border-color: rgba(255, 255, 255, .12); }
.value-strip article { border-color: rgba(255, 255, 255, .12); }
.value-strip p { color: #958a98; }
.value-strip article > span { color: var(--lime); }

.menu-section,
.club-section,
.visit-section {
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
.menu-section { margin-top: 78px; }
.product-card { border-color: rgba(26, 12, 30, .1); box-shadow: 0 20px 55px rgba(33, 14, 37, .08); }
.points-pill.multiplier-pill { background: var(--ink); color: var(--lime); }
.experiences { background: linear-gradient(180deg, #120b15, #08070a); }
.games-section { background: linear-gradient(180deg, #100916, #08070a); }
.club-section { margin-top: 0; }
.member-card { box-shadow: 0 40px 100px rgba(63, 17, 78, .28); }
.visit-card { box-shadow: 0 32px 90px rgba(42, 14, 48, .16); }
.whatsapp-float {
  position: fixed;
  z-index: 75;
  right: 22px;
  bottom: 22px;
  min-height: 54px;
  padding: 7px 18px 7px 7px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 99px;
  color: #fff;
  background: rgba(13, 10, 15, .92);
  box-shadow: 0 18px 54px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}
.whatsapp-float span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #08120b; background: #66ec83; font: 900 14px/1 "Manrope", sans-serif; }
.whatsapp-float b { font-size: 11px; }

@media (max-width: 1020px) {
  .main-nav.open { color: #fff; background: #151018; border: 1px solid rgba(255,255,255,.12); }
  .live-card h3 { font-size: 33px; }
  .local-seo { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .site-header { top: 8px; }
  .hero { padding-top: 72px; }
  .hero h1 { font-size: clamp(52px, 15.8vw, 74px); }
  .hero::after { left: -15px; bottom: 54px; font-size: 36vw; }
  .hero-scene.has-photo { min-height: 500px; transform: none; margin: 8px 0 0; }
  .hero-scene.has-photo .hero-card-main { width: calc(100% - 30px); left: 15px; right: 15px; bottom: 15px; }
  .hero-scene.has-photo .floating-card { display: none; }
  .mambar-live { padding: 78px 0 85px; }
  .live-heading { align-items: flex-start; flex-direction: column; }
  .live-heading h2 { font-size: 48px; }
  .live-grid { grid-template-columns: 1fr; }
  .live-card { min-height: 360px; }
  .menu-section { margin-top: 38px; }
  .local-seo { margin-top: 68px; }
  .local-seo-copy h2 { font-size: 39px; }
  .local-faq details { padding-inline: 18px; }
  .value-strip article { border-color: rgba(255,255,255,.11); }
  .recommendation-card { align-items: flex-start; flex-direction: column; }
  .review-card { grid-template-columns: 1fr; }
  .whatsapp-float { right: 10px; bottom: 10px; min-height: 50px; padding-right: 13px; }
  .whatsapp-float span { width: 36px; height: 36px; }
  .mobile-order-bar.active ~ .whatsapp-float { bottom: 82px; }
}

/* Paleta oficial MAMBAR: debe cerrar la cascada. */
:root { --ink:#211a20; --ink-2:#352b32; --paper:#f5eef4; --paper-2:#eaddea; --purple:#ae65b3; --purple-dark:#7b3f82; --pink:#d58d98; --orange:#d58d98; --lime:#f1d6ef; }
.button-primary { background:linear-gradient(120deg,#d58d98,#ae65b3 58%,#7b3f82); box-shadow:0 14px 34px rgba(174,101,179,.3); }
.button-primary:hover { background:linear-gradient(120deg,#e39aa5,#bc73c0 58%,#88498f); box-shadow:0 18px 42px rgba(174,101,179,.38); }
.hero-scene::before { background:radial-gradient(circle at 50% 30%,rgba(213,141,152,.62),transparent 28%),linear-gradient(145deg,#9b559f,#5e3265 52%,#24151f); box-shadow:0 50px 130px rgba(174,101,179,.34); }
.hero-card-main { min-height:520px; align-items:center; color:#fff; text-align:center; background:linear-gradient(160deg,rgba(35,25,35,.96),rgba(12,8,13,.97)); border:1px solid rgba(255,255,255,.12); }
.hero-card-main small { color:#e2b7df; }
.hero-card-main p { color:#cbbbc9; }
.hero h1 em { color:#df9ca8; }
.hero .eyebrow > span { background:#dca0d8; box-shadow:0 0 16px rgba(220,160,216,.7); }
.ticker b,.live-card>small,.value-strip article>span { color:#e6b3df; }

/* Experiencia presencial, mesas y ofertas relámpago. */
.portal-tabs button { position: relative; }
.live-dot { display:inline-block; width:7px; height:7px; margin-left:5px; border-radius:50%; background:#79e397; box-shadow:0 0 0 4px rgba(121,227,151,.12); vertical-align:middle; animation:mambarLivePulse 1.8s infinite; }
@keyframes mambarLivePulse { 50% { opacity:.45; transform:scale(.82); } }
.table-checkin-card { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr); gap:20px; padding:24px; border:1px solid rgba(174,101,179,.22); border-radius:22px; background:linear-gradient(135deg,#fff 0%,#fbf3fa 58%,#f2e4f1 100%); box-shadow:0 18px 52px rgba(56,22,59,.08); }
.table-checkin-intro h3 { margin:8px 0 7px; font:800 30px/1.05 "Manrope",sans-serif; letter-spacing:-.04em; color:#251925; }
.table-checkin-intro p { margin:0; color:#6c5d6b; line-height:1.55; }
.live-mark { display:inline-flex; align-items:center; gap:7px; color:#7b3f82; font:800 10px/1 "Manrope",sans-serif; letter-spacing:.14em; }
.live-mark i,.flash-refresh i { width:7px; height:7px; border-radius:50%; background:#45c56b; box-shadow:0 0 0 4px rgba(69,197,107,.12); }
#table-checkin-form { align-self:center; padding:16px; border-radius:16px; background:rgba(255,255,255,.78); border:1px solid rgba(174,101,179,.15); }
#table-checkin-form label { display:grid; gap:7px; color:#4c3d4c; font-size:12px; font-weight:800; }
#table-checkin-form input { width:100%; min-height:48px; padding:0 14px; border:1px solid #d8c5d8; border-radius:11px; background:#fff; font:700 18px/1 "Manrope",sans-serif; }
#table-checkin-form .button { width:100%; margin-top:10px; }
.table-presence-active { grid-column:2; align-self:center; padding:18px; border-radius:17px; color:#fff; background:linear-gradient(145deg,#291d2a,#4b284e); box-shadow:0 16px 38px rgba(42,23,43,.2); }
.table-presence-active[hidden] { display:none; }
.table-presence-active small { color:#deb6dc; font:800 9px/1 "Manrope",sans-serif; letter-spacing:.13em; }
.table-presence-active h3 { margin:6px 0 4px; font:800 28px/1 "Manrope",sans-serif; }
.table-presence-active p { margin:0 0 12px; color:#d6c8d5; font-size:12px; }
.table-presence-active .text-action { color:#fff; }
.presence-pulse { float:right; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(121,227,151,.12); }
.presence-pulse i { width:9px; height:9px; border-radius:50%; background:#79e397; animation:mambarLivePulse 1.5s infinite; }
.notification-note { grid-column:1/-1; display:flex; gap:8px; align-items:flex-start; margin:0; padding-top:14px; border-top:1px solid rgba(174,101,179,.14); color:#7b6a79; font-size:11px; line-height:1.45; }
.flash-zone { margin-top:18px; padding:22px; border-radius:22px; color:#fff; background:#1b111c; }
.flash-zone-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:14px; }
.flash-zone-head small { color:#dba5d6; font:800 9px/1 "Manrope",sans-serif; letter-spacing:.14em; }
.flash-zone-head h3 { margin:6px 0 0; font:800 24px/1.1 "Manrope",sans-serif; }
.flash-refresh { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(255,255,255,.12); border-radius:99px; color:#aee9bd; font:800 9px/1 "Manrope",sans-serif; letter-spacing:.1em; }
.flash-offer-stack { display:grid; gap:12px; }
.flash-empty { padding:28px 18px; border:1px dashed rgba(255,255,255,.18); border-radius:17px; text-align:center; background:rgba(255,255,255,.03); }
.flash-empty span { font-size:30px; }.flash-empty h4 { margin:8px 0 5px; font-size:17px; }.flash-empty p { margin:0; color:#bcaebc; font-size:12px; }
.flash-empty.is-waiting span { color:#79e397; }
.flash-offer { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; padding:17px; border:1px solid rgba(225,151,218,.32); border-radius:18px; background:linear-gradient(120deg,rgba(174,101,179,.27),rgba(213,141,152,.12)); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.flash-lightning { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; color:#2b162b; background:#f0b4e9; font-size:22px; box-shadow:0 0 26px rgba(240,180,233,.28); }
.flash-copy small { color:#e3b7df; font:800 9px/1 "Manrope",sans-serif; letter-spacing:.1em; }.flash-copy h4 { margin:6px 0 4px; font:800 20px/1.1 "Manrope",sans-serif; }.flash-copy p { margin:0 0 6px; color:#c7b9c6; font-size:12px; }.flash-copy strong { color:#fff; font-size:12px; }
.flash-clock { min-width:118px; text-align:right; }.flash-clock small { display:block; margin-bottom:4px; color:#bca8bb; font:800 8px/1 "Manrope",sans-serif; letter-spacing:.12em; }.flash-clock>b { display:block; margin-bottom:8px; color:#f3b5ea; font:800 28px/1 "Manrope",sans-serif; font-variant-numeric:tabular-nums; }.flash-clock em { display:inline-block; padding:8px 10px; border-radius:9px; color:#174d26; background:#bdf3c8; font:800 11px/1 ui-monospace,monospace; font-style:normal; }.flash-clock .button { min-height:36px; padding:0 12px; font-size:10px; }
.flash-offer.is-redeemed { border-color:rgba(121,227,151,.38); }
.flash-offer.is-validated { border-color:rgba(121,227,151,.55); background:linear-gradient(120deg,rgba(45,129,72,.28),rgba(121,227,151,.08)); }
.push-permission-card { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; align-items:center; padding:16px; border:1px solid rgba(174,101,179,.18); border-radius:16px; background:rgba(255,255,255,.7); }
.push-permission-card>div { display:flex; gap:11px; align-items:flex-start; }
.push-permission-card>div>span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:#f2e6f2; }
.push-permission-card p { margin:0; color:#756674; font-size:11px; line-height:1.45; }
.push-permission-card p b { display:block; margin-bottom:2px; color:#372a37; font-size:12px; }
.push-permission-card small { grid-column:1/-1; color:#8d7e8c; font-size:10px; }
.push-permission-card.is-active { border-color:rgba(63,167,94,.3); background:#f0faf3; }
.push-permission-card.is-active>div>span { background:#dff5e6; }
.push-permission-card.is-error { border-color:rgba(199,71,91,.28); background:#fff4f5; }

/* Música colaborativa y fila de karaoke dentro de Mi Club MAMBAR. */
.club-service-card { margin-top:18px; padding:20px; border:1px solid #e0d2e2; border-radius:22px; background:linear-gradient(145deg,#fff,#f8f2f9); box-shadow:0 16px 48px rgba(57,25,61,.055); }
.club-service-head { display:grid; grid-template-columns:48px minmax(0,1fr); gap:13px; align-items:center; }
.club-service-head>span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,#ae65b3,#733b7a); font-size:23px; }
.club-service-head small { color:#8b518f; font:850 8px/1 "Manrope",sans-serif; letter-spacing:.13em; }
.club-service-head h3 { margin:6px 0 4px; font:800 20px/1.08 "Manrope",sans-serif; }
.club-service-head p { margin:0; color:#7e7180; font-size:10px; line-height:1.45; }
.club-service-locked { margin-top:15px; padding:13px 15px; border:1px dashed #d9c9dc; border-radius:13px; background:#faf7fa; }
.club-service-locked[hidden],.club-service-actions[hidden],.club-service-status[hidden]{display:none}
.club-service-locked b { color:#59485c; font-size:10px; }.club-service-locked p { margin:3px 0 0; color:#8c7e8e; font-size:9px; }
.club-service-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:15px; }
.club-service-actions button { min-height:86px; display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:14px; border:1px solid #dfd1e1; border-radius:16px; color:#382c3a; background:#fff; text-align:left; box-shadow:0 8px 22px rgba(50,24,55,.04); }
.club-service-actions button>span { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#f0e4f1; font-size:19px; }
.club-service-actions button>b { align-self:end; font-size:11px; }.club-service-actions button>small { align-self:start; color:#8c808e; font-size:8px; }
.club-service-actions button:disabled { opacity:.5; cursor:not-allowed; }
.club-service-status { margin-top:15px; padding:15px; border:1px solid #cfe8d6; border-radius:14px; color:#28653b; background:#eff9f2; }
.club-service-status.is-acknowledged { border-color:#d9c9e4; color:#673a75; background:#f3eaf6; }
.club-service-status b { display:block; margin-bottom:4px; font-size:11px; }.club-service-status p { margin:0; font-size:9px; }
.club-live-experience { margin-top:18px; padding:22px; border:1px solid rgba(174,101,179,.2); border-radius:22px; background:linear-gradient(145deg,#fff,#f7eff7); box-shadow:0 16px 48px rgba(57,25,61,.06); }
.club-live-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.club-live-head small { color:#8b518f; font:800 9px/1 "Manrope",sans-serif; letter-spacing:.14em; }
.club-live-head h3 { margin:7px 0 5px; color:#271c28; font:800 25px/1.08 "Manrope",sans-serif; letter-spacing:-.035em; }
.club-live-head p { margin:0; color:#766a77; font-size:11px; }
.club-live-head>span { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #d9eadd; border-radius:99px; color:#2e7847; background:#eff9f2; font:800 8px/1 "Manrope",sans-serif; letter-spacing:.1em; white-space:nowrap; }
.club-live-head>span i { width:7px; height:7px; border-radius:50%; background:#45c56b; box-shadow:0 0 0 4px rgba(69,197,107,.12); animation:mambarLivePulse 1.8s infinite; }
.club-live-locked { display:flex; align-items:center; gap:13px; padding:17px; border:1px dashed #d7c6d8; border-radius:16px; background:#faf7fa; }
.club-live-locked[hidden] { display:none; }
.club-live-locked>span { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border-radius:12px; color:#78427d; background:#eee2ef; font-size:20px; }
.club-live-locked b { display:block; margin-bottom:3px; color:#392d3a; font-size:12px; }
.club-live-locked p { margin:0; color:#817582; font-size:10px; }
.club-live-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.club-live-grid.is-locked { display:none; }
.club-live-card { overflow:hidden; border:1px solid #e2d5e3; border-radius:19px; background:#fff; }
.club-live-card>header { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:17px 18px; color:#fff; background:linear-gradient(135deg,#29192c,#54305b); }
.karaoke-request-card>header { background:linear-gradient(135deg,#371824,#753148 65%,#9a4b64); }
.club-live-card>header>span { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#28152a; background:#e8b5e5; font-size:21px; }
.karaoke-request-card>header>span { color:#3a1823; background:#f0a8b7; }
.club-live-card>header small { color:#d8bddb; font:800 8px/1 "Manrope",sans-serif; letter-spacing:.11em; }
.karaoke-request-card>header small { color:#f0c4cd; }
.club-live-card>header h4 { margin:4px 0 0; font:800 18px/1.1 "Manrope",sans-serif; }
.club-live-card>header>b { padding:5px 8px; border-radius:99px; color:#c8edcf; background:rgba(88,190,116,.16); font-size:8px; }
.club-live-card>p { min-height:48px; margin:0; padding:15px 18px 0; color:#746775; font-size:11px; line-height:1.45; }
.club-live-card form { display:grid; gap:10px; padding:15px 18px 18px; }
.club-live-card form[hidden] { display:none; }
.club-live-card label { display:grid; gap:5px; color:#514452; font-size:10px; font-weight:800; }
.club-live-card label>span { color:#9b8e9c; font-size:8px; font-weight:600; }
.club-live-card input,.club-live-card textarea { width:100%; min-height:43px; padding:10px 11px; border:1px solid #dbcddd; border-radius:10px; background:#fdfbfd; color:#332934; font:600 11px/1.35 "DM Sans",sans-serif; resize:vertical; }
.club-live-card textarea { min-height:64px; }
.club-live-card form .button { width:100%; min-height:43px; }
.club-live-card .form-status { margin:0; font-size:9px; }
.club-live-current { margin:15px 18px 18px; padding:15px; border:1px solid #dfd2e1; border-radius:15px; background:linear-gradient(145deg,#faf6fb,#f4eaf5); }
.club-live-current[hidden] { display:none; }
.club-live-current-head { display:grid; grid-template-columns:44px minmax(0,1fr); gap:11px; align-items:center; }
.club-live-position { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,#ae65b3,#7b3f82); font:800 16px/1 "Manrope",sans-serif; }
.club-live-position.is-now { background:linear-gradient(135deg,#e1748c,#983951); box-shadow:0 0 0 5px rgba(213,91,117,.12); }
.club-live-current-head small { color:#7f4b84; font:800 8px/1 "Manrope",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.club-live-current-head h5 { margin:5px 0 2px; color:#302332; font:800 15px/1.15 "Manrope",sans-serif; }
.club-live-current-head p { margin:0; color:#817582; font-size:9px; }
.club-live-turn { display:grid; gap:3px; margin:13px 0 10px; padding:11px; border-radius:11px; color:#68416d; background:#efe2f0; }
.club-live-turn.is-now { color:#7a263a; background:#fae1e7; }
.club-live-turn strong { font-size:11px; line-height:1.4; }
.club-live-turn small { font-size:8px; }
.club-live-current>.text-action { color:#8b4b90; font-size:9px; }
.club-live-paused { display:grid; justify-items:center; gap:5px; padding:13px; text-align:center; }
.club-live-paused>span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#77507b; background:#e9ddeb; }
.club-live-paused b { font-size:11px; }.club-live-paused p { margin:0; color:#837685; font-size:9px; }

@media (max-width:760px) {
  .table-checkin-card { grid-template-columns:1fr; padding:18px; }
  .table-presence-active { grid-column:auto; }
  .notification-note { grid-column:auto; }
  .push-permission-card { grid-column:auto; grid-template-columns:1fr; }
  .push-permission-card .button { width:100%; }
  .push-permission-card small { grid-column:auto; }
  .flash-zone { padding:17px; }
  .flash-offer { grid-template-columns:38px 1fr; }
  .flash-lightning { width:38px; height:38px; }
  .flash-clock { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; text-align:left; }
  .flash-clock>b { margin:0; }
  .portal-tabs { overflow-x:auto; justify-content:flex-start; }
  .portal-tabs button { flex:0 0 auto; }
  .club-live-experience { padding:17px; }
	.club-service-card { padding:17px; }
	.club-service-actions { grid-template-columns:1fr; }
  .club-live-head { flex-direction:column; }
  .club-live-grid { grid-template-columns:1fr; }
  .club-live-card>header { padding:15px; }
}

/* Última prioridad móvil: una tarjeta de juego por fila en pantallas estrechas. */
@media (max-width:420px) {
  .mini-games { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .club-intro-modal { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:22px; }
  .club-intro-brand { min-height:110px; padding:28px 48px 10px; }
  .club-intro-brand img { width:min(245px,86%); max-height:86px; }
  .club-intro-copy { padding:5px 22px 0; }
  .club-intro-copy h2 { margin-top:9px; font-size:clamp(32px,10vw,43px); }
  .club-intro-copy p { font-size:11px; line-height:1.55; }
  .club-intro-benefits { margin:19px 13px 0; padding:6px; gap:3px; }
  .club-intro-benefits span { min-height:62px; padding:6px 3px; flex-direction:column; gap:5px; font-size:8px; }
  .club-intro-actions { padding:18px 18px calc(24px + env(safe-area-inset-bottom)); }
  .club-intro-actions .button { width:100%; min-width:0; }
}