:root {
  --ink: #090908;
  --charcoal: #11110f;
  --paper: #f1eee7;
  --muted: #aaa69d;
  --gold: #d7ad59;
  --gold-bright: #ebca83;
  --line: rgba(235, 202, 131, 0.22);
  --surface: #fbfaf6;
  --paper-soft: #f6f2e9;
  --radius-sm: 7px;
  --radius-md: 14px;
  --shadow-soft: 0 22px 55px rgba(32, 24, 13, 0.1);
}

/* AP7 · Calidad, conversión y observabilidad privada */
.quality-dashboard { display: grid; gap: 22px; color: #17140f; }
.quality-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(250px,.55fr); gap: 28px; padding: 34px; border: 1px solid rgba(216,174,91,.27); border-radius: 24px; background: radial-gradient(circle at 82% 10%,rgba(55,119,176,.2),transparent 32%),linear-gradient(135deg,#0b0b0a,#19150e 64%,#11151a); box-shadow: 0 24px 60px rgba(15,12,7,.16); color: white; }
.quality-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg,transparent 18%,rgba(232,192,112,.08) 42%,transparent 62%); transform: translateX(-100%); animation: quality-sweep 8s ease-in-out infinite; }
.quality-hero > div > span,.quality-hero h2,.quality-hero p { position: relative; z-index: 1; }
.quality-hero > div > span { display: inline-flex; align-items: center; gap: 8px; color: #e7bd68; font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.quality-hero > div > span i { width: 7px; height: 7px; border-radius: 50%; background: #6ed7a2; box-shadow: 0 0 14px #6ed7a2; }
.quality-hero h2 { margin: 13px 0 10px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(32px,4vw,53px); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.quality-hero h2 em { color: #e4bb68; font-weight: 400; }
.quality-hero p { max-width: 650px; margin: 0; color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.65; }
.quality-hero aside { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 11px; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(255,255,255,.055); backdrop-filter: blur(12px); }
.quality-hero aside > small { color: #d8ae5b; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.quality-hero aside > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 11px; background: rgba(0,0,0,.28); }
.quality-hero aside > div button { min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.6); font-size: 10px; font-weight: 800; cursor: pointer; }
.quality-hero aside > div button.active { background: linear-gradient(135deg,#e7bd68,#a87420); color: #15110a; box-shadow: 0 8px 20px rgba(216,174,91,.18); }
.quality-hero aside > span { color: rgba(255,255,255,.5); font-size: 9px; }
.quality-hero aside > button { min-height: 40px; border: 1px solid rgba(216,174,91,.28); border-radius: 10px; background: rgba(216,174,91,.07); color: #e8c271; font-size: 9px; font-weight: 850; cursor: pointer; }
.quality-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.quality-kpis article { position: relative; overflow: hidden; min-height: 150px; padding: 20px; border: 1px solid rgba(13,12,10,.09); border-radius: 17px; background: #fff; box-shadow: 0 12px 35px rgba(18,14,8,.06); }
.quality-kpis article::after { content: ""; position: absolute; right: -28px; bottom: -40px; width: 110px; height: 110px; border: 1px solid color-mix(in srgb,var(--quality-tone) 26%,transparent); border-radius: 50%; box-shadow: 0 0 45px color-mix(in srgb,var(--quality-tone) 12%,transparent); }
.quality-kpis article[data-tone="gold"] { --quality-tone:#d8ae5b; }.quality-kpis article[data-tone="green"] { --quality-tone:#308b64; }.quality-kpis article[data-tone="blue"] { --quality-tone:#367fb9; }.quality-kpis article[data-tone="ivory"] { --quality-tone:#806c50; }
.quality-kpis header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quality-kpis header > span { color: #766e62; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.quality-kpis header > b { color: var(--quality-tone); font-size: 8px; }
.quality-kpis article > strong { display: block; margin-top: 17px; font-family: Georgia,"Times New Roman",serif; font-size: 32px; font-weight: 400; line-height: 1; }
.quality-kpis article > p { position: relative; z-index: 1; max-width: 190px; margin: 10px 0 0; color: #81796e; font-size: 9px; line-height: 1.5; }
.quality-delta { padding: 5px 7px; border-radius: 99px; font-size: 7px; font-weight: 850; }.quality-delta.up { background:#e3f4eb;color:#257751 }.quality-delta.down { background:#f8e7e2;color:#a23e2a }.quality-delta.flat { background:#f0ece4;color:#7b7060 }
.quality-main-grid { display: grid; grid-template-columns: minmax(0,1.52fr) minmax(300px,.48fr); gap: 16px; }
.quality-funnel-panel,.quality-priority-panel,.quality-vitals-panel,.quality-device-panel,.quality-errors-panel { border: 1px solid rgba(13,12,10,.09); border-radius: 20px; background: #fff; box-shadow: 0 14px 40px rgba(18,14,8,.055); }
.quality-funnel-panel { padding: 23px; }
.quality-funnel-panel > header,.quality-vitals-panel > header,.quality-device-panel > header,.quality-errors-panel > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 19px; }
.quality-funnel-panel header > div > span,.quality-priority-panel > header span,.quality-vitals-panel header > div > span,.quality-device-panel header span,.quality-errors-panel header span { color: #aa7725; font-size: 7px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.quality-funnel-panel h3,.quality-priority-panel h3,.quality-vitals-panel h3,.quality-device-panel h3,.quality-errors-panel h3 { margin: 4px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 400; }
.quality-funnel-panel nav { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #f2eee6; }
.quality-funnel-panel nav button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #756d61; font-size: 8px; font-weight: 800; cursor: pointer; }
.quality-funnel-panel nav button.active { background: #15130f; color: #e8bf6d; }
.quality-funnel-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; padding: 15px 17px; border-radius: 13px; background: linear-gradient(135deg,#17140f,#2b2317); color: white; }
.quality-funnel-summary strong { color: #e5bb68; font-family: Georgia,"Times New Roman",serif; font-size: 31px; font-weight: 400; }.quality-funnel-summary span { font-size: 9px; font-weight: 800; }.quality-funnel-summary small { margin-left: auto; color: rgba(255,255,255,.5); font-size: 8px; }
.quality-funnel { display: grid; gap: 8px; }
.quality-funnel article { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; }.quality-funnel article > b { padding-top: 2px; color: #b98a3d; font-family: Georgia,serif; font-size: 10px; font-weight: 400; }
.quality-funnel article > div > header { display: flex; justify-content: space-between; gap: 10px; }.quality-funnel article > div > header strong { font-size: 9px; }.quality-funnel article > div > header span { font-size: 9px; font-weight: 900; }
.quality-funnel article > div > i { display: block; overflow: hidden; height: 7px; margin: 6px 0 4px; border-radius: 99px; background: #ece7de; }.quality-funnel article > div > i span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#aa7725,#ebc97e); box-shadow: 0 0 12px rgba(216,174,91,.25); }
.quality-funnel article footer { display: flex; justify-content: space-between; gap: 10px; color: #8b8277; font-size: 7px; }.quality-funnel article footer em { color: #a74d36; font-style: normal; font-weight: 800; }
.quality-priority-panel { overflow: hidden; display: flex; flex-direction: column; }.quality-priority-panel > header { padding: 23px 23px 0; }.quality-priority-panel > div { display: grid; gap: 7px; padding: 16px 16px 20px; }
.quality-priority-panel article { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 13px; border-radius: 12px; background: #f5f1e9; }.quality-priority-panel article > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e8dfcf; color: #705a36; font-size: 10px; font-style: normal; font-weight: 900; }
.quality-priority-panel article[data-severity="critical"] { background:#fbebe7 }.quality-priority-panel article[data-severity="critical"] > i { background:#bd4b35;color:white }.quality-priority-panel article[data-severity="warning"] { background:#fff4da }.quality-priority-panel article[data-severity="warning"] > i { background:#d5a039;color:#1c160d }.quality-priority-panel article[data-severity="good"] { background:#e8f4ed }.quality-priority-panel article[data-severity="good"] > i { background:#37845f;color:white }
.quality-priority-panel article strong { font-size: 9px; }.quality-priority-panel article p { margin: 4px 0 0; color: #70695e; font-size: 8px; line-height: 1.5; }.quality-priority-panel article button { margin-top: 8px; padding: 0; border: 0; background: transparent; color: #8c611c; font-size: 8px; font-weight: 850; cursor: pointer; }
.quality-priority-panel > footer { margin-top: auto; padding: 16px 23px 20px; background: #16140f; color: white; }.quality-priority-panel > footer span { color:#e3b964;font-size:7px;font-weight:850;text-transform:uppercase }.quality-priority-panel > footer p { margin:5px 0;color:rgba(255,255,255,.65);font-size:8px;line-height:1.5 }.quality-priority-panel > footer small { color:rgba(255,255,255,.4);font-size:7px }
.quality-vitals-panel { padding: 23px; }.quality-vitals-panel > header p { max-width: 380px; margin: 2px 0 0; color: #7f776b; font-size: 8px; line-height: 1.5; text-align: right; }.quality-vitals-panel > div { display:grid;grid-template-columns:repeat(5,1fr);gap:9px }.quality-vitals-panel article { padding:15px;border:1px solid #ece5d9;border-radius:13px;background:#faf8f4 }.quality-vitals-panel article header { display:flex;justify-content:space-between }.quality-vitals-panel article header span { color:#756b5d;font-size:8px;font-weight:900 }.quality-vitals-panel article header i { width:8px;height:8px;border-radius:50%;background:#a9a39b }.quality-vitals-panel article[data-tone="good"] header i { background:#43a475;box-shadow:0 0 10px rgba(67,164,117,.4) }.quality-vitals-panel article[data-tone="warning"] header i { background:#d8a338 }.quality-vitals-panel article[data-tone="poor"] header i { background:#bc4b38 }.quality-vitals-panel article > strong { display:block;margin:12px 0 5px;font-family:Georgia,serif;font-size:20px;font-weight:400 }.quality-vitals-panel article > p { margin:0;color:#82796d;font-size:8px }.quality-vitals-panel article footer { display:flex;justify-content:space-between;gap:5px;margin-top:12px;padding-top:9px;border-top:1px solid #ece5d9;color:#8b8276;font-size:7px }.quality-vitals-panel article footer b { color:#745e3c }
.quality-detail-grid { display:grid;grid-template-columns:1.2fr .8fr;gap:16px }.quality-device-panel,.quality-errors-panel { padding:23px }.quality-device-panel > div,.quality-errors-panel > div { display:grid;gap:6px }.quality-device-panel article { display:grid;grid-template-columns:minmax(150px,1.35fr) repeat(3,1fr);align-items:center;gap:10px;padding:12px;border-radius:11px;background:#f5f1e9 }.quality-device-panel article > span { display:grid;grid-template-columns:12px 1fr;gap:1px 8px;align-items:center }.quality-device-panel article > span i { grid-row:1/3;width:8px;height:24px;border-radius:5px;background:#8e8373 }.quality-device-panel article > span i[data-device="constrained"] { background:#d09531 }.quality-device-panel article > span i[data-device="capable"] { background:#327cad }.quality-device-panel article > span strong { font-size:8px }.quality-device-panel article > span small,.quality-device-panel article > div small { color:#887f73;font-size:7px }.quality-device-panel article > div { display:grid;gap:2px;text-align:right }.quality-device-panel article > div b { font-family:Georgia,serif;font-size:16px;font-weight:400 }
.quality-errors-panel article { display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;padding:11px;border-radius:10px;background:#f5f1e9 }.quality-errors-panel article > b { color:#aa7725;font-family:Georgia,serif;font-size:9px;font-weight:400 }.quality-errors-panel article > span { display:grid;gap:2px }.quality-errors-panel article > span strong { font-size:8px;text-transform:capitalize }.quality-errors-panel article small { color:#897f73;font-size:7px }.quality-errors-panel article > div { display:grid;gap:2px;text-align:right }.quality-errors-panel article > div strong { font-family:Georgia,serif;font-size:15px;font-weight:400 }
.quality-loading { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }.quality-loading i,.quality-loading span { min-height:145px;border-radius:18px;background:linear-gradient(100deg,#eee8dd 25%,#faf8f4 45%,#eee8dd 65%);background-size:300% 100%;animation:premium-skeleton 1.5s ease infinite }.quality-loading span { grid-column:1/-1;min-height:320px }
.quality-s7-grid { display:grid;grid-template-columns:1.15fr .9fr .75fr;gap:16px }
.quality-cta-panel,.quality-abandonment-panel,.quality-payment-panel,.quality-test-matrix { overflow:hidden;border:1px solid rgba(13,12,10,.09);border-radius:20px;background:#fff;box-shadow:0 14px 40px rgba(18,14,8,.055) }
.quality-cta-panel > header,.quality-abandonment-panel > header,.quality-payment-panel > header { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 22px 16px;border-bottom:1px solid #eee8de }
.quality-cta-panel header span,.quality-abandonment-panel header span,.quality-payment-panel header span,.quality-test-matrix > header span { color:#aa7725;font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase }
.quality-cta-panel h3,.quality-abandonment-panel h3,.quality-payment-panel h3,.quality-test-matrix h3 { margin:5px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:400 }
.quality-cta-panel > header > strong,.quality-abandonment-panel > header > strong { display:grid;gap:2px;color:#18150f;font-family:Georgia,serif;font-size:26px;font-weight:400;text-align:right }.quality-cta-panel > header > strong small,.quality-abandonment-panel > header > strong small { color:#84796b;font-family:inherit;font-size:9px;text-transform:uppercase }
.quality-cta-panel > div { display:grid;gap:3px;padding:14px }.quality-cta-panel article { display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(70px,.8fr) 28px;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:#f7f4ee }.quality-cta-panel article > span { display:grid;gap:2px }.quality-cta-panel article > span strong { font-size:10px }.quality-cta-panel article > span small { color:#81786c;font-size:8px }.quality-cta-panel article > i { display:block;overflow:hidden;height:7px;border-radius:99px;background:#e7e0d5 }.quality-cta-panel article > i b { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9e6c20,#e7bd68) }.quality-cta-panel article > em { color:#241d13;font-family:Georgia,serif;font-size:17px;font-style:normal;text-align:right }
.quality-abandonment-panel > div,.quality-payment-panel > div { display:grid;gap:6px;padding:14px }.quality-abandonment-panel article { display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:9px;padding:11px;border-radius:10px;background:#f7f4ee }.quality-abandonment-panel article > span { color:#b17d2a;font-family:Georgia,serif;font-size:10px }.quality-abandonment-panel article > div { display:grid;gap:2px }.quality-abandonment-panel article > div strong { font-size:10px }.quality-abandonment-panel article > div small { color:#80766a;font-size:8px }.quality-abandonment-panel article > b { color:#9b4738;font-family:Georgia,serif;font-size:18px;font-weight:400 }
.quality-payment-panel article { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:11px;background:linear-gradient(135deg,#17140f,#292116);color:white }.quality-payment-panel article > span { display:grid;gap:3px }.quality-payment-panel article > span strong { color:#fff;font-size:10px }.quality-payment-panel article > span small { color:rgba(255,255,255,.58);font-size:8px }.quality-payment-panel article > b { color:#e6bd6d;font-family:Georgia,serif;font-size:23px;font-weight:400 }
.quality-test-matrix > header { display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:23px 25px;border-bottom:1px solid #e8e1d6;background:linear-gradient(135deg,#faf8f3,#f2ece1) }.quality-test-matrix > header p { max-width:540px;margin:3px 0 0;color:#756c60;font-size:10px;line-height:1.6;text-align:right }.quality-test-matrix > div { display:grid }.quality-test-matrix article { display:grid;grid-template-columns:32px minmax(130px,.9fr) minmax(150px,1fr) minmax(190px,1.25fr) auto;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid #eee9e0 }.quality-test-matrix article:last-child { border-bottom:0 }.quality-test-matrix article > b { color:#ad7b2d;font-family:Georgia,serif;font-size:11px;font-weight:400 }.quality-test-matrix article > div { display:grid;gap:3px }.quality-test-matrix article > div strong { font-size:10px }.quality-test-matrix article > div small { color:#80776c;font-size:8px }.quality-test-matrix article > p { margin:0;color:#645d54;font-size:9px;line-height:1.45 }.quality-test-matrix article > span { padding:7px 9px;border-radius:99px;background:#e7f3eb;color:#2f7751;font-size:8px;font-weight:850;white-space:nowrap }.quality-test-matrix > footer { display:flex;align-items:center;gap:14px;padding:15px 22px;background:#17140f;color:white }.quality-test-matrix > footer span { color:#e5ba67;font-size:8px;font-weight:850;text-transform:uppercase }.quality-test-matrix > footer p { margin:0;color:rgba(255,255,255,.62);font-size:9px;line-height:1.5 }
@keyframes quality-sweep { 0%,18%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }
@media (max-width:1100px) { .quality-kpis { grid-template-columns:1fr 1fr }.quality-main-grid,.quality-detail-grid { grid-template-columns:1fr }.quality-s7-grid { grid-template-columns:1fr 1fr }.quality-payment-panel { grid-column:1/-1 }.quality-vitals-panel > div { grid-template-columns:repeat(3,1fr) }.quality-test-matrix article { grid-template-columns:28px minmax(130px,.8fr) minmax(150px,1fr) minmax(180px,1.2fr) }.quality-test-matrix article > span { grid-column:2/-1;justify-self:start } }
@media (max-width:720px) { .quality-dashboard { gap:14px }.quality-hero { grid-template-columns:1fr;padding:22px;border-radius:18px }.quality-hero h2 { font-size:34px }.quality-hero aside { padding:14px;backdrop-filter:none }.quality-kpis { gap:8px }.quality-kpis article { min-height:132px;padding:15px;border-radius:14px }.quality-kpis article > strong { font-size:27px }.quality-main-grid,.quality-s7-grid { grid-template-columns:1fr;gap:12px }.quality-payment-panel { grid-column:auto }.quality-funnel-panel,.quality-vitals-panel,.quality-device-panel,.quality-errors-panel { padding:16px;border-radius:16px }.quality-funnel-panel > header,.quality-vitals-panel > header,.quality-test-matrix > header { display:grid }.quality-funnel-panel nav { display:grid;grid-template-columns:repeat(3,1fr) }.quality-funnel-panel nav button { padding:0 5px }.quality-funnel-summary { display:grid;grid-template-columns:auto 1fr }.quality-funnel-summary small { grid-column:1/-1;margin-left:0 }.quality-vitals-panel > header p,.quality-test-matrix > header p { text-align:left }.quality-vitals-panel > div { grid-template-columns:1fr 1fr }.quality-vitals-panel article:last-child { grid-column:1/-1 }.quality-device-panel article { grid-template-columns:1fr 1fr }.quality-device-panel article > span { grid-column:1/-1 }.quality-errors-panel article { grid-template-columns:20px minmax(0,1fr) }.quality-errors-panel article > div { grid-column:2;text-align:left }.quality-test-matrix article { grid-template-columns:25px 1fr;gap:8px 12px;padding:15px 16px }.quality-test-matrix article > div,.quality-test-matrix article > p,.quality-test-matrix article > span { grid-column:2 }.quality-test-matrix article > span { justify-self:start }.quality-test-matrix > footer { align-items:flex-start;flex-direction:column;gap:5px }.quality-hero::before { animation:none } }
@media (prefers-reduced-motion:reduce) { .quality-hero::before { animation:none }.quality-loading i,.quality-loading span { animation:none } }

/* AP3 · data-dense controls and live agenda feedback */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid rgba(166, 119, 39, .16);
  color: #665f54;
  font-size: 13px;
}

.admin-pagination button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(149, 104, 29, .26);
  border-radius: 999px;
  background: #fffdfa;
  color: #211c14;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.admin-pagination button:hover:not(:disabled) { border-color: #b27d24; color: #8a5a0c; transform: translateY(-1px); }
.admin-pagination button:disabled { opacity: .42; cursor: not-allowed; }
.customer-pagination { margin-top: 12px; padding: 12px 8px 4px; }

.barber-agenda-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 18px;
  padding: 12px 16px;
  border: 1px solid rgba(188, 139, 49, .22);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(23, 21, 17, .98), rgba(39, 31, 18, .96));
  color: #f5ead4;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}

.barber-agenda-sync span { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 750; }
.barber-agenda-sync span i { width: 8px; height: 8px; border-radius: 50%; background: #76d49a; box-shadow: 0 0 0 5px rgba(118, 212, 154, .1); }
.barber-agenda-sync button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(228, 184, 97, .4); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #efc978; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.barber-agenda-sync button:disabled { opacity: .55; }

@media (max-width: 640px) {
  .admin-pagination { gap: 9px; padding-inline: 8px; }
  .admin-pagination button { min-height: 42px; padding-inline: 12px; }
  .barber-agenda-sync { align-items: stretch; flex-direction: column; }
  .barber-agenda-sync button { width: 100%; }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: var(--ink);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

select {
  font: inherit;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  background: var(--gold-bright);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  width: min(100% - 40px, 1400px);
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(9, 9, 8, 0.7);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
}

.official-logo {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, 0.3));
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-style: italic;
  transform: rotate(-2deg);
}

.brand-copy {
  display: grid;
  gap: 1px;
  line-height: 1;
}

.brand-copy strong {
  letter-spacing: 0.18em;
  font-size: 13px;
}

.brand-copy small {
  color: var(--gold);
  letter-spacing: 0.42em;
  font-size: 8px;
}

.desktop-nav {
  display: flex;
  gap: 25px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.desktop-nav a,
.text-link {
  transition: color 180ms ease;
}

.desktop-nav a { padding: 9px 0; }

.desktop-nav .my-booking-link {
  margin: 0 -8px;
  padding: 9px 11px;
  border: 1px solid rgba(235, 202, 131, .38);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(216, 174, 91, .08);
}

.desktop-nav a:hover,
.text-link:hover {
  color: var(--gold-bright);
}

.header-cta {
  justify-self: end;
  padding: 11px 14px;
  border: 1px solid rgba(235, 202, 131, .55);
  border-radius: 5px;
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.mobile-header-status,
.mobile-header-actions,
.mobile-reservation-access,
.mobile-team-access { display: none; }

.header-cta span,
.button span {
  margin-left: 8px;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #0a0a09;
  background: #0a0a09;
  transform: scale(1.02);
}

.hero-media img,
.service-page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: repeating-linear-gradient(115deg, transparent 0 54px, rgba(255,255,255,.06) 55px, transparent 56px 110px);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(6, 6, 5, 0.98) 0%, rgba(6, 6, 5, 0.78) 40%, rgba(6, 6, 5, 0.18) 72%),
    linear-gradient(0deg, rgba(5, 5, 4, 0.86) 0%, transparent 34%),
    radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.42) 100%);
}

.hero-content {
  width: min(100% - 72px, 1400px);
  margin: 0 auto;
  padding-top: clamp(180px, 22vh, 240px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 34px;
  height: 1px;
  background: var(--gold);
}

.hero h1 {
  max-width: 920px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(60px, 7.4vw, 116px);
  font-weight: 400;
  line-height: 0.87;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero h1 em {
  color: var(--gold-bright);
  font-weight: 400;
}

.hero-lede {
  max-width: 550px;
  margin: 32px 0 0;
  color: rgba(241, 238, 231, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 36px;
}

.hero-manage-booking {
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(235, 202, 131, .35);
  text-underline-offset: 5px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.hero-manage-booking:hover {
  color: #fff0c9;
  text-decoration-color: currentColor;
}

.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 24px;
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
}

.hero-assurances span { display: flex; align-items: center; gap: 7px; }
.hero-assurances b { color: var(--gold-bright); font-weight: 700; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-gold {
  background: var(--gold);
  color: var(--ink);
}

.button-gold:hover {
  background: var(--gold-bright);
}

.text-link {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.text-link span {
  margin-left: 8px;
  color: var(--gold);
}

.hero-proof {
  position: absolute;
  right: max(36px, calc((100vw - 1400px) / 2));
  bottom: 36px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 9, 0.5);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hero-proof div {
  display: grid;
  gap: 4px;
  min-width: 155px;
  padding: 20px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-proof div:last-child {
  border-right: 0;
}

.hero-proof strong {
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
}

.hero-proof span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agenda-section {
  position: relative;
  z-index: 3;
  padding: 118px 0 86px;
  background:
    linear-gradient(rgba(9, 9, 8, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 8, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px;
  color: var(--ink);
  scroll-margin-top: 20px;
}

.agenda-shell {
  width: min(100% - 72px, 1400px);
  margin-inline: auto;
}

.agenda-heading {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 58px;
}

.agenda-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 5.9vw, 88px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.agenda-heading h2 em {
  color: #986f29;
  font-weight: 400;
}

.agenda-heading > p {
  max-width: 530px;
  margin: 0 0 6px;
  color: #625f58;
  font-size: 16px;
  line-height: 1.75;
}

.booking-fast-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -25px 0 22px;
  padding: 14px 18px;
  border: 1px solid rgba(9, 9, 8, .11);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .66);
  scroll-margin-top: 20px;
}

.booking-fast-note strong { color: #8a6424; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.booking-fast-note span { color: #666159; font-size: 11px; }
.booking-fast-note b { margin: 0 6px; color: #b4893d; }

.booking-service-anchor {
  scroll-margin-top: 92px;
}

.home-service-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(138, 100, 36, .15);
  border-radius: 14px;
  background: rgba(255, 255, 255, .52);
}

.home-service-links > span {
  flex: 0 0 auto;
  color: #7f5a20;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-service-links > div {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.home-service-links a {
  color: #4f4a42;
  font-size: 12px;
  font-weight: 760;
  text-decoration: underline;
  text-decoration-color: rgba(138, 100, 36, .28);
  text-underline-offset: 4px;
}

.home-service-links a:hover { color: #8a6424; }

.booking-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 670px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 8, 0.15);
  background: #fbfaf6;
  box-shadow: 0 28px 80px rgba(32, 24, 13, 0.12);
  border-radius: var(--radius-md);
}

.wizard-mobile-status { display: none; }

.wizard-main {
  min-width: 0;
  padding: 0 44px 48px;
}

.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 -44px 42px;
  border-bottom: 1px solid rgba(9, 9, 8, 0.13);
}

.wizard-progress button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid rgba(9, 9, 8, 0.1);
  background: transparent;
  color: #8b877f;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wizard-progress button:last-child {
  border-right: 0;
}

.wizard-progress button:not(:disabled) {
  cursor: pointer;
}

.wizard-progress button.active {
  box-shadow: inset 0 -3px var(--gold);
  color: var(--ink);
}

.wizard-progress button.complete {
  color: #886521;
}

.wizard-progress button span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
}

.wizard-heading {
  margin-bottom: 30px;
}

.wizard-heading > span {
  color: #99722e;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.wizard-heading h3,
.booking-success h3 {
  margin: 8px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.4vw, 49px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.wizard-heading p {
  margin: 0;
  color: #706c63;
  font-size: 13px;
  line-height: 1.65;
}

.wizard-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.wizard-service-grid button {
  position: relative;
  min-height: 250px;
  padding: 27px 24px;
  border: 1px solid rgba(9, 9, 8, 0.15);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  border-radius: var(--radius-sm);
}

.wizard-service-grid button:hover {
  z-index: 1;
  transform: translateY(-4px);
  border-color: #b18536;
  box-shadow: 0 16px 30px rgba(54, 39, 16, 0.11);
}

.choice-check {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 1px solid rgba(9, 9, 8, 0.25);
  border-radius: 50%;
  transition: background 180ms ease;
}

.wizard-service-grid button:hover .choice-check {
  background: var(--gold);
  border-color: var(--gold);
}

.wizard-service-grid small {
  color: #9a742e;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wizard-service-grid h4 {
  max-width: 160px;
  margin: 37px 0 11px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.05;
}

.wizard-service-grid p {
  min-height: 62px;
  margin: 0 0 18px;
  color: #777269;
  font-size: 11px;
  line-height: 1.6;
}

.wizard-service-grid strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 400;
}

.barber-grid {
  display: grid;
  gap: 12px;
}

.barber-grid button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 15px 19px;
  border: 1px solid rgba(9, 9, 8, 0.15);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, transform 180ms ease;
  border-radius: var(--radius-sm);
}

.barber-grid button:hover {
  transform: translateX(4px);
  border-color: #ad8338;
}

.barber-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-style: italic;
}

.barber-grid button > span:nth-child(2) {
  display: grid;
  gap: 5px;
}

.barber-grid strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 400;
}

.barber-grid small {
  color: #807a70;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.barber-grid b {
  font-size: 20px;
  font-weight: 400;
}

.wizard-back,
.wizard-text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #625f58;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.barber-grid + .wizard-back {
  margin-top: 22px;
}

.date-strip {
  display: flex;
  gap: 8px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.date-strip button {
  flex: 0 0 70px;
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 88px;
  border: 1px solid rgba(9, 9, 8, 0.14);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  border-radius: 5px;
}

.date-strip button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.date-strip small,
.date-strip span {
  color: #8b857b;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.date-strip button.active small,
.date-strip button.active span {
  color: var(--gold-bright);
}

.date-strip strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 400;
}

.time-heading {
  display: flex;
  justify-content: space-between;
  margin: 27px 0 13px;
  font-size: 11px;
}

.time-heading span {
  color: #8b857b;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.time-grid button {
  min-height: 42px;
  border: 1px solid rgba(9, 9, 8, 0.18);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  border-radius: 5px;
}

.time-grid button:hover,
.time-grid button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--gold-bright);
}

.slots-message {
  display: grid;
  place-items: center;
  min-height: 122px;
  border: 1px dashed rgba(9, 9, 8, 0.24);
  color: #777269;
  font-size: 12px;
  text-align: center;
}

.waitlist-invite { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin-top: 14px; padding: 17px 18px; border: 1px solid rgba(160,116,42,.22); border-radius: 12px; background: linear-gradient(120deg, #f5ecdc, #fbf8f1); }
.waitlist-invite.no-slots { border-color: rgba(160,116,42,.38); box-shadow: 0 12px 30px rgba(80,57,18,.07); }
.waitlist-invite > div:first-child { display: grid; gap: 5px; }
.waitlist-invite > div:first-child small { color: #94691f; font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.waitlist-invite > div:first-child strong { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; }
.waitlist-invite > div:first-child p { margin: 0; color: #756f65; font-size: 9px; line-height: 1.55; }
.waitlist-invite > button { min-height: 42px; padding: 0 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--gold-bright); cursor: pointer; font-size: 8px; font-weight: 800; white-space: nowrap; }
.waitlist-invite form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-top: 5px; }
.waitlist-invite form label { display: grid; gap: 6px; }
.waitlist-invite form label > span { color: #6f695f; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.waitlist-invite form input, .waitlist-invite form select { width: 100%; height: 43px; padding: 0 11px; border: 1px solid rgba(9,9,8,.17); border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 10px; }
.waitlist-invite form .waitlist-consent { grid-column: 1 / -1; display: grid; grid-template-columns: 17px 1fr; align-items: center; }
.waitlist-invite form .waitlist-consent input { width: 16px; height: 16px; padding: 0; accent-color: #9e742b; }
.waitlist-invite form .waitlist-consent span { letter-spacing: 0; text-transform: none; }
.waitlist-invite form .wizard-error { grid-column: 1 / -1; margin: 0; }
.waitlist-invite form > div { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.waitlist-invite form > div button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(9,9,8,.18); border-radius: 999px; background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; }
.waitlist-invite form > div button[type="submit"] { border-color: var(--ink); background: var(--ink); color: var(--gold-bright); }
.waitlist-invite form > div button:disabled { cursor: wait; opacity: .5; }
.waitlist-success { grid-column: 1 / -1; display: grid !important; grid-template-columns: 38px 1fr; align-items: center; gap: 12px !important; }
.waitlist-success > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #3f704a; color: #fff; font-size: 16px; }
.waitlist-success > div { display: grid; gap: 4px; }
.waitlist-success strong { font-size: 11px; }
.waitlist-success p { margin: 0; color: #686259; font-size: 9px; line-height: 1.5; }

.wizard-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
}

.wizard-next {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.wizard-next:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.time-selection-help {
  color: #8a6424;
  font-size: 10px;
  font-weight: 700;
}

.wizard-error {
  margin: 15px 0 0;
  padding: 11px 13px;
  border-left: 3px solid #a83c2e;
  background: #f6e8e4;
  color: #7d2d22;
  font-size: 11px;
  line-height: 1.5;
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.booking-form label {
  display: grid;
  gap: 8px;
}

.booking-form label > span {
  color: #625f58;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.booking-form input,
.booking-form textarea {
  width: 100%;
  border: 1px solid rgba(9, 9, 8, 0.2);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.booking-form input {
  height: 49px;
  padding: 0 14px;
}

.booking-form textarea {
  padding: 13px 14px;
  resize: vertical;
}

.form-wide {
  grid-column: 1 / -1;
}
.booking-form .privacy-consent { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 11px; padding: 14px; border: 1px solid rgba(9, 9, 8, .12); border-radius: 12px; background: #f3efe6; }
.booking-form .privacy-consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: #a97b2d; }
.booking-form .privacy-consent > span { display: grid; gap: 4px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.booking-form .privacy-consent strong { font-size: 9px; }
.booking-form .privacy-consent small { color: #716c64; font-size: 8px; font-weight: 400; line-height: 1.55; }
.identity-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; padding: 0; border: 0; }
.identity-picker legend { grid-column: 1 / -1; margin-bottom: 6px; color: #777269; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.identity-picker button { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 2px 10px; min-height: 76px; padding: 12px; border: 1px solid rgba(9,9,8,.14); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.identity-picker button.active { border-color: #a97b2d; background: #f4ead7; box-shadow: inset 0 0 0 1px rgba(169,123,45,.15); }
.identity-picker button > span { grid-row: 1 / 3; font-size: 22px; }
.identity-picker button strong { font-size: 10px; }
.identity-picker button small { color: #777269; font-size: 8px; line-height: 1.35; }

.booking-final-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 1px;
  margin-bottom: 4px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 8, .11);
  border-radius: var(--radius-sm);
  background: rgba(9, 9, 8, .1);
}

.booking-final-summary > span { display: grid; gap: 5px; padding: 12px; background: var(--paper-soft); }
.booking-final-summary small { color: #8a847a; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.booking-final-summary strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.booking-final-summary button { width: max-content; padding: 0; border: 0; background: transparent; color: #8a6424; cursor: pointer; font-size: 8px; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }

.form-section-title { display: flex; align-items: center; gap: 9px; margin: 10px 0 -5px; color: #504c45; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.form-section-title span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--ink); color: var(--gold-bright); font-family: Georgia, "Times New Roman", serif; font-size: 10px; }
.booking-notes { border: 1px solid rgba(9, 9, 8, .12); border-radius: 8px; background: #f8f5ee; }
.booking-notes summary { padding: 14px; color: #625f58; cursor: pointer; font-size: 10px; font-weight: 750; list-style: none; }
.booking-notes summary::-webkit-details-marker { display: none; }
.booking-notes summary span { color: #8a857c; font-weight: 500; }
.booking-notes[open] summary { border-bottom: 1px solid rgba(9, 9, 8, .1); }
.booking-notes label { padding: 14px; }

.wizard-service-grid button:focus-visible,
.barber-grid button:focus-visible,
.date-strip button:focus-visible,
.time-grid button:focus-visible,
.wizard-next:focus-visible,
.wizard-back:focus-visible,
.booking-final-summary button:focus-visible {
  outline: 3px solid rgba(170, 126, 48, .48);
  outline-offset: 2px;
}

.booking-summary {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 173, 89, 0.14), transparent 33%),
    #0e0e0c;
  color: var(--paper);
}

.summary-heading { margin-bottom: 19px; text-align: center; }
.summary-heading p { margin: 0 0 5px; color: var(--gold-bright); font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
.summary-heading span { color: rgba(255, 255, 255, .4); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

.booking-summary > img {
  width: 116px;
  height: 116px;
  margin: 0 auto 26px;
  object-fit: contain;
}

.booking-summary dl {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.booking-summary dl > div {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.booking-summary dt {
  color: rgba(255, 255, 255, 0.43);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.booking-summary dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  text-transform: capitalize;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding: 26px 0 18px;
}

.summary-total span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  text-transform: uppercase;
}

.summary-total strong {
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
}

.booking-summary > small {
  color: rgba(255, 255, 255, 0.36);
  font-size: 9px;
  line-height: 1.6;
}

.booking-summary > small b { margin-right: 4px; color: var(--gold-bright); }

.booking-success {
  min-height: 590px;
  padding: 70px 8vw;
  border: 1px solid rgba(9, 9, 8, 0.15);
  background: #fbfaf6;
  text-align: center;
  box-shadow: 0 28px 80px rgba(32, 24, 13, 0.12);
}

.success-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 23px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-bright);
  font-size: 28px;
}

.booking-success .eyebrow {
  justify-content: center;
}

.success-code {
  color: #6d6960;
  font-size: 13px;
}

.success-code strong {
  margin-left: 6px;
  color: #8d6724;
  letter-spacing: 0.12em;
}

.success-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 850px;
  margin: 40px auto;
  border-top: 1px solid rgba(9, 9, 8, 0.16);
  border-bottom: 1px solid rgba(9, 9, 8, 0.16);
}

.success-summary > div {
  display: grid;
  gap: 8px;
  padding: 22px 16px;
  border-right: 1px solid rgba(9, 9, 8, 0.12);
}

.success-summary > div:last-child {
  border-right: 0;
}

.success-summary small {
  color: #8b857b;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.success-summary strong {
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.booking-success .success-actions .button-outline { border-color: rgba(9,9,8,.22); color: var(--ink); }
.booking-success .success-actions .button-outline:hover { border-color: var(--gold); background: #f1e7d4; }

.section-shell,
.product-shell,
.booking-panel,
footer {
  width: min(100% - 72px, 1400px);
  margin-inline: auto;
}

.services-section {
  position: relative;
  z-index: 2;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

.section-heading {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 70px;
}

.eyebrow.dark {
  color: #8d6b29;
}

.section-heading h2,
.experience-intro h2,
.product-copy h2,
.booking-copy h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 5.8vw, 86px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.section-heading h2 em,
.product-copy h2 em,
.booking-copy h2 em {
  color: #9b7228;
  font-weight: 400;
}

.section-heading > p {
  max-width: 520px;
  margin: 0 0 6px;
  color: #625f58;
  font-size: 16px;
  line-height: 1.75;
}

.service-list {
  border-top: 1px solid rgba(9, 9, 8, 0.18);
}

.service-card {
  display: grid;
  grid-template-columns: 72px minmax(280px, 1.3fr) minmax(170px, 0.65fr) 110px;
  align-items: center;
  gap: 30px;
  padding: 30px 4px;
  border-bottom: 1px solid rgba(9, 9, 8, 0.18);
  transition: padding 180ms ease, background 180ms ease;
}

.service-card:hover {
  padding-inline: 18px;
  background: rgba(215, 173, 89, 0.08);
}

.service-number {
  color: #96702d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
}

.service-copy h3 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.service-copy p {
  max-width: 560px;
  margin: 0;
  color: #6d6960;
  font-size: 13px;
  line-height: 1.6;
}

.service-detail-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: #8d6724; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-decoration: underline; text-decoration-color: rgba(141,103,36,.35); text-underline-offset: 4px; }

.service-meta {
  display: grid;
  gap: 8px;
}

.service-meta small {
  color: #777269;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-meta strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
}

.service-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  font-size: 12px;
  font-weight: 720;
}

.service-link b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(9, 9, 8, 0.35);
  border-radius: 50%;
  font-size: 15px;
  transition: background 180ms ease, color 180ms ease;
}

.service-link:hover b {
  background: var(--ink);
  color: var(--gold-bright);
}

.experience-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  margin-top: 120px;
  padding: 92px 78px;
  background:
    radial-gradient(circle at 5% 100%, rgba(215, 173, 89, 0.12), transparent 34%),
    var(--charcoal);
  color: var(--paper);
}

.experience-intro h2 {
  font-size: clamp(46px, 4.7vw, 70px);
}

.experience-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.experience-points article {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.experience-points span {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
}

.experience-points h3 {
  margin: 38px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
}

.experience-points p {
  margin: 0;
  color: rgba(241, 238, 231, 0.6);
  font-size: 12px;
  line-height: 1.75;
}

.reviews-section {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(300px, .72fr);
  align-items: center;
  gap: clamp(34px, 5vw, 78px);
  margin-top: 34px;
  padding: clamp(58px, 7vw, 94px) clamp(34px, 6vw, 84px);
  overflow: hidden;
  border: 1px solid rgba(9, 9, 8, .13);
  background: linear-gradient(135deg, #f7f2e7 0%, #fff 58%, #eee4d2 100%);
  box-shadow: 0 28px 80px rgba(56, 41, 17, .08);
}

.reviews-mark {
  display: grid;
  place-items: center;
  align-content: center;
  width: 172px;
  aspect-ratio: 1;
  border: 1px solid rgba(164, 119, 39, .28);
  border-radius: 50%;
  background: #11100e;
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 10px rgba(216, 174, 91, .045), 0 22px 45px rgba(23, 18, 9, .18);
}

.reviews-mark span { font-family: Georgia, "Times New Roman", serif; font-size: 64px; font-style: italic; line-height: .9; }
.reviews-mark small { margin-top: 10px; color: rgba(255,255,255,.5); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.reviews-copy h2 { margin: 13px 0 22px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4.2vw, 62px); font-weight: 400; line-height: .98; letter-spacing: -.042em; }
.reviews-copy h2 em { color: #9b7228; font-weight: 400; }
.reviews-copy > p:not(.eyebrow) { max-width: 650px; margin: 0; color: #676158; font-size: 13px; line-height: 1.75; }
.reviews-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.button-dark { border: 1px solid #11100e; background: #11100e; color: var(--gold-bright); }
.button-dark:hover { border-color: #9b7228; background: #282218; }
.reviews-book { color: #655331; font-size: 10px; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(155,114,40,.45); text-underline-offset: 5px; }
.reviews-principles { display: grid; gap: 12px; }
.reviews-principles article { position: relative; display: grid; gap: 8px; min-height: 145px; padding: 24px; overflow: hidden; border: 1px solid rgba(9,9,8,.1); background: rgba(255,255,255,.72); }
.reviews-principles article > * { position: relative; z-index: 1; }
.reviews-principles article > span { color: #9b7228; font-family: Georgia, "Times New Roman", serif; font-size: 11px; font-style: italic; }
.reviews-principles strong { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; }
.reviews-principles p { margin: 0; color: #746e64; font-size: 10px; line-height: 1.65; }

.faq-section {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(55px, 8vw, 120px);
  padding: 120px 0 130px;
  scroll-margin-top: 20px;
}

.faq-intro h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.045em;
}

.faq-intro h2 em { color: #9b7228; font-weight: 400; }
.faq-intro > p:last-child { max-width: 390px; margin: 24px 0 0; color: #625f58; font-size: 13px; line-height: 1.7; }
.faq-list { border-top: 1px solid rgba(9, 9, 8, .16); }
.faq-list details { border-bottom: 1px solid rgba(9, 9, 8, .16); }
.faq-list summary { display: grid; grid-template-columns: 35px 1fr 30px; align-items: center; gap: 14px; min-height: 82px; padding: 0 5px; cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 18px; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #936c27; font-size: 10px; font-style: italic; }
.faq-list summary b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(9, 9, 8, .2); border-radius: 50%; font-family: Arial, sans-serif; font-size: 14px; font-weight: 400; transition: transform 180ms ease, background 180ms ease; }
.faq-list details[open] summary b { background: var(--ink); color: var(--gold-bright); transform: rotate(45deg); }
.faq-list details p { max-width: 650px; margin: -4px 45px 24px 49px; color: #656159; font-size: 12px; line-height: 1.75; }

.visit-section {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  min-height: 610px;
  margin-bottom: 130px;
  overflow: hidden;
  background: #11100e;
  color: var(--paper);
  box-shadow: 0 35px 85px rgba(38, 27, 10, .15);
}

.visit-copy { align-self: center; padding: clamp(46px, 6vw, 88px); }
.visit-copy h2 { margin: 13px 0 23px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(43px, 4.7vw, 68px); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.visit-copy h2 em { color: var(--gold); font-weight: 400; }
.visit-copy > p:not(.eyebrow) { max-width: 590px; margin: 0; color: rgba(255,255,255,.61); font-size: 13px; line-height: 1.8; }
.visit-copy dl { margin: 30px 0; border-top: 1px solid rgba(255,255,255,.13); }
.visit-copy dl div { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.visit-copy dt { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.visit-copy dd { margin: 0; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.5; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.visit-actions > a:last-child { color: rgba(255,255,255,.7); font-size: 10px; font-weight: 750; text-decoration: underline; text-decoration-color: rgba(216,174,91,.42); text-underline-offset: 5px; }
.visit-map { position: relative; min-height: 560px; overflow: hidden; background: #24211b; }
.visit-map::after { position: absolute; inset: 0; border: 1px solid rgba(216,174,91,.25); content: ""; pointer-events: none; }
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 560px; border: 0; filter: grayscale(.85) sepia(.14) contrast(1.08); }
.visit-map > span { position: absolute; right: 18px; bottom: 18px; padding: 10px 13px; border: 1px solid rgba(216,174,91,.34); background: rgba(9,9,8,.88); color: var(--gold-bright); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); }

/* Las secciones fuera del primer pantallazo se componen al acercarse al viewport. */
.public-barbers,
.experience-panel,
.reviews-section,
.faq-section,
.visit-section,
.loyalty-public,
.products-booking,
.service-page-details,
.service-booking-guide,
.service-page-fit,
.service-page-faq,
.service-related {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

@media (max-width: 800px) {
  .visit-section { grid-template-columns: 1fr; min-height: 0; margin-bottom: 90px; }
  .visit-copy { padding: 58px 24px; }
  .visit-copy h2 { font-size: 46px; }
  .visit-copy dl div { grid-template-columns: 78px 1fr; }
  .visit-map,
  .visit-map iframe { min-height: 420px; }
}

@media (max-width: 520px) {
  .visit-copy dl div { grid-template-columns: 1fr; gap: 7px; }
  .visit-actions { align-items: stretch; flex-direction: column; }
  .visit-actions > a:last-child { text-align: center; }
  .visit-map,
  .visit-map iframe { min-height: 360px; }
}

.products-booking {
  padding-top: 150px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 20%, rgba(215, 173, 89, 0.08), transparent 25%),
    #090908;
}

.product-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(60px, 8vw, 130px);
}

.product-image-wrap {
  position: relative;
  min-height: 620px;
}

.product-image-wrap::before {
  content: "";
  position: absolute;
  inset: -20px 20px 20px -20px;
  z-index: 0;
  border: 1px solid rgba(215, 173, 89, 0.22);
}

.product-image-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 620px;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
}

.product-stamp {
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.18em;
  text-align: center;
}

.product-copy h2 {
  font-size: clamp(50px, 5.1vw, 76px);
}

.product-copy h2 em,
.booking-copy h2 em {
  color: var(--gold-bright);
}

.product-lede {
  max-width: 560px;
  margin: 30px 0 42px;
  color: rgba(241, 238, 231, 0.62);
  font-size: 15px;
  line-height: 1.8;
}

.product-items {
  margin-bottom: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.product-items > div {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.product-items span {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
}

.product-items strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
}

.product-items small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.button-outline {
  border-color: rgba(215, 173, 89, 0.62);
  color: var(--gold-bright);
}

.button-outline:hover {
  background: var(--gold);
  color: var(--ink);
}

.booking-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr auto;
  align-items: center;
  gap: 64px;
  margin-top: 154px;
  padding: 76px 0;
  border-top: 1px solid rgba(215, 173, 89, 0.38);
  border-bottom: 1px solid rgba(215, 173, 89, 0.38);
}

.booking-copy h2 {
  font-size: clamp(50px, 5vw, 74px);
}

.booking-details {
  display: grid;
  gap: 21px;
}

.booking-details > div {
  display: grid;
  gap: 5px;
}

.booking-details small {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.booking-details strong {
  font-size: 13px;
  font-weight: 520;
}

.booking-details a {
  display: grid;
  gap: 6px;
  width: fit-content;
}

.booking-details a > span {
  color: var(--gold-bright);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform 180ms ease, color 180ms ease;
}

.booking-details a:hover > span {
  color: #fff1c9;
  transform: translateX(3px);
}

.booking-button {
  display: grid;
  place-items: center;
  width: 174px;
  height: 174px;
  padding: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
  text-align: center;
  transition: transform 180ms ease, background 180ms ease;
}

.booking-button:hover {
  transform: rotate(-3deg) scale(1.03);
  background: var(--gold-bright);
}

.booking-button b {
  display: block;
  font-size: 20px;
}

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 42px 0 108px;
  color: rgba(241, 238, 231, 0.52);
  font-size: 11px;
}

footer p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
}

footer > div {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

footer a:hover {
  color: var(--gold-bright);
}

.mobile-booking-bar {
  display: none;
}

@media (max-width: 800px) {
  .site-header {
    grid-template-columns: 1fr auto;
    width: calc(100% - 40px);
    margin-top: 10px;
    padding: 9px 11px;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .official-logo {
    width: 54px;
    height: 54px;
  }

  .mobile-header-status,
  .mobile-reservation-access,
  .mobile-team-access {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(235, 202, 131, .35);
    border-radius: 999px;
    color: var(--gold-bright);
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .mobile-header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
  }

  .mobile-reservation-access {
    background: rgba(216, 174, 91, .12);
    font-weight: 800;
  }

  .mobile-team-access {
    padding-inline: 8px;
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
  }

  .mobile-header-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #76b684; box-shadow: 0 0 0 3px rgba(118, 182, 132, .13); }

  .hero {
    min-height: 800px;
  }

  .hero-content {
    width: calc(100% - 40px);
    padding-top: 175px;
  }

  .hero h1 {
    font-size: clamp(54px, 16vw, 74px);
    line-height: 0.92;
  }

  .hero-lede {
    margin-top: 26px;
    font-size: 15px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
  }

  .hero-assurances { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 22px; }

  .button {
    width: 100%;
  }

  .text-link {
    text-align: center;
  }

  .hero-proof {
    right: 20px;
    bottom: 26px;
    left: 20px;
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-proof div {
    min-width: 0;
    padding: 14px 10px;
  }

  .hero-proof strong {
    font-size: 18px;
  }

  .hero-proof span {
    font-size: 8px;
  }

  .agenda-section {
    padding: 82px 0 74px;
  }

  .agenda-shell {
    width: calc(100% - 24px);
  }

  .agenda-heading {
    grid-template-columns: 1fr;
    gap: 25px;
    width: calc(100% - 16px);
    margin: 0 auto 42px;
  }

  .agenda-heading h2 {
    font-size: 50px;
  }

  .booking-fast-note { align-items: flex-start; flex-direction: column; gap: 7px; width: calc(100% - 16px); margin: -12px auto 18px; }
  .booking-fast-note span { line-height: 1.55; }

  .booking-app {
    grid-template-columns: 1fr;
  }

  .wizard-main {
    padding: 0 18px 34px;
  }

  .wizard-progress {
    display: none;
  }

  .wizard-mobile-status { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 0 -18px 30px; padding: 16px 18px 0; border-bottom: 1px solid rgba(9, 9, 8, .11); }
  .wizard-mobile-status span { color: #8c6725; font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
  .wizard-mobile-status strong { font-size: 9px; }
  .wizard-mobile-status i { grid-column: 1 / -1; height: 3px; margin-top: 8px; background: #e0dbd0; }
  .wizard-mobile-status b { display: block; height: 100%; background: var(--gold); transition: width 180ms ease; }

  .wizard-heading h3,
  .booking-success h3 {
    font-size: 37px;
  }

  .wizard-service-grid {
    grid-template-columns: 1fr;
  }

  .wizard-service-grid button {
    min-height: 0;
    padding: 18px;
  }

  .wizard-service-grid h4 { max-width: calc(100% - 46px); margin: 20px 0 7px; font-size: 22px; }
  .wizard-service-grid p { min-height: auto; margin-bottom: 12px; }
  .wizard-service-grid .choice-check { top: 16px; right: 16px; width: 30px; height: 30px; }

  .date-strip button {
    flex-basis: 65px;
  }

  .time-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .wizard-footer-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .wizard-next {
    width: 100%;
  }

  .booking-form {
    grid-template-columns: 1fr;
  }

  .booking-final-summary { grid-template-columns: 1fr; }

  .form-wide {
    grid-column: auto;
  }

  .booking-summary { display: none; }

  .booking-success {
    min-height: 0;
    padding: 56px 20px;
  }

  .success-summary {
    grid-template-columns: 1fr 1fr;
  }

  .success-summary > div:nth-child(2) {
    border-right: 0;
  }

  .success-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(9, 9, 8, 0.12);
  }

  .success-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .section-shell,
  .product-shell,
  .booking-panel,
  footer {
    width: calc(100% - 40px);
  }

  .services-section {
    padding-top: 0;
  }

  .home-service-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 15px 16px;
  }

  .home-service-links > div {
    justify-content: flex-start;
    gap: 10px 16px;
  }

  .section-heading,
  .experience-panel,
  .product-shell,
  .booking-panel {
    grid-template-columns: 1fr;
  }

  .section-heading {
    gap: 28px;
    margin-bottom: 50px;
  }

  .section-heading h2,
  .experience-intro h2,
  .product-copy h2,
  .booking-copy h2 {
    font-size: 49px;
  }

  .service-card {
    grid-template-columns: 34px 1fr auto;
    gap: 14px;
    padding: 24px 0;
  }

  .service-card:hover {
    padding-inline: 0;
  }

  .service-number {
    align-self: start;
    padding-top: 8px;
  }

  .service-copy h3 {
    font-size: 25px;
  }

  .service-meta {
    grid-column: 2;
  }

  .service-link {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .service-link span {
    display: none;
  }

  .experience-panel {
    gap: 54px;
    margin-top: 76px;
    padding: 60px 24px;
  }

  .experience-points {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .experience-points h3 {
    margin-top: 22px;
  }

  .faq-section { grid-template-columns: 1fr; gap: 48px; padding: 84px 0 96px; }
  .faq-intro h2 { font-size: 49px; }
  .faq-list summary { grid-template-columns: 28px 1fr 28px; min-height: 76px; font-size: 16px; }
  .faq-list details p { margin: -3px 34px 22px 42px; }

  .products-booking {
    padding-top: 96px;
  }

  .product-shell {
    gap: 76px;
  }

  .product-image-wrap,
  .product-image-wrap img {
    min-height: 430px;
    height: 430px;
  }

  .product-image-wrap::before {
    inset: -12px 12px 12px -12px;
  }

  .product-stamp {
    right: -2px;
    bottom: -40px;
    width: 88px;
    height: 88px;
    font-size: 8px;
  }

  .product-items > div {
    grid-template-columns: 32px 1fr;
  }

  .product-items small {
    grid-column: 2;
  }

  .booking-panel {
    gap: 44px;
    margin-top: 105px;
    padding: 64px 0;
  }

  .booking-button {
    width: 100%;
    height: 58px;
    padding: 0 20px;
    border-radius: 0;
    grid-template-columns: 1fr auto;
    text-align: left;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 34px 0 112px;
  }

  footer > div {
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
  }

  .mobile-booking-bar {
    position: fixed;
    right: 14px;
    bottom: 14px;
    left: 14px;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 7px;
  }

  .mobile-booking-bar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 20px;
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    font-weight: 750;
  }

  .mobile-booking-bar .mobile-booking-team {
    padding-inline: 14px;
    border: 1px solid rgba(235, 202, 131, .6);
    background: #11100e;
    color: var(--gold-bright);
    font-size: 11px;
  }

  .mobile-booking-team span { display: grid; gap: 2px; }
  .mobile-booking-team small {
    color: rgba(235, 202, 131, .58);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .mobile-booking-team b { font-size: 14px; font-weight: 500; }
}

/* Fidelización */
.loyalty-public { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(45px, 8vw, 120px); padding: clamp(76px, 9vw, 135px) max(5vw, calc((100vw - 1320px) / 2)); background: #11100e; color: var(--paper); }
.loyalty-public-copy h2 { margin: 14px 0 23px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(43px, 5vw, 72px); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
.loyalty-public-copy h2 em { color: var(--gold); font-weight: 400; }
.loyalty-public-copy > p:not(.eyebrow) { max-width: 520px; margin: 0 0 30px; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.8; }
.loyalty-public-card { position: relative; display: grid; gap: 46px; min-height: 330px; padding: clamp(28px, 4vw, 54px); overflow: hidden; border: 1px solid rgba(220,172,76,.42); border-radius: 28px; background: radial-gradient(circle at 92% 8%, rgba(214,164,67,.28), transparent 38%), linear-gradient(145deg, #22201b, #0d0c0b); box-shadow: 0 35px 80px rgba(0,0,0,.32); }
.loyalty-public-card::after { position: absolute; right: -45px; bottom: -72px; color: rgba(220,172,76,.08); content: "★"; font-size: 250px; line-height: 1; }
.loyalty-public-card > div { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; }
.loyalty-public-card > div:first-child span { color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 21px; text-transform: uppercase; }
.loyalty-public-card small, .loyalty-public-card > div:last-child span { color: rgba(255,255,255,.47); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.loyalty-public-card .loyalty-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.loyalty-stamps span { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed rgba(220,172,76,.48); border-radius: 50%; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.loyalty-public-card > div:last-child { align-items: end; }
.loyalty-public-card > div:last-child strong { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; }

.summary-loyalty { display: grid; grid-template-columns: 28px 1fr; gap: 9px; margin-top: 16px; padding: 12px; border: 1px solid rgba(190,140,47,.25); border-radius: 12px; background: rgba(190,140,47,.08); }
.summary-loyalty > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #b98a33; color: #111; }
.summary-loyalty p { display: grid; gap: 3px; margin: 0; }
.summary-loyalty strong { color: #f1d28f; font-size: 9px; }
.summary-loyalty small { color: rgba(255,255,255,.48); font-size: 8px; line-height: 1.45; }
.success-loyalty { display: grid; grid-template-columns: 38px 1fr; gap: 12px; margin-top: 17px; padding: 15px; border: 1px solid rgba(9,9,8,.12); border-radius: 14px; background: #f5f1e8; text-align: left; }
.success-loyalty.reward { border-color: rgba(171,127,45,.42); background: #eee2c9; }
.success-loyalty > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.success-loyalty strong { font-size: 10px; }
.success-loyalty p { margin: 4px 0 0; color: #6f6a61; font-size: 9px; line-height: 1.5; }
.pos-loyalty { display: grid; grid-template-columns: 31px 1fr; gap: 10px; margin: 10px 0 4px; padding: 12px; border: 1px solid rgba(179,131,43,.32); background: #eee3ce; }
.pos-loyalty > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #a97b2d; color: #fff; }
.pos-loyalty div { display: grid; gap: 3px; }
.pos-loyalty strong { font-size: 9px; }
.pos-loyalty small { color: #756d61; font-size: 8px; }
.booking-loyalty-badge { color: #85601f; font-size: 7px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }

.loyalty-admin { margin-top: 38px; }
.loyalty-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(245px, .5fr); align-items: stretch; overflow: hidden; border-radius: 18px; background: #11100e; color: #fff; }
.loyalty-hero > div:first-child { padding: 30px; }
.loyalty-hero p, .loyalty-settings p, .loyalty-members-head p { margin: 0 0 6px; color: #b88a36; font-size: 8px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.loyalty-hero h2 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; }
.loyalty-hero > div:first-child span { max-width: 650px; color: rgba(255,255,255,.53); font-size: 10px; line-height: 1.65; }
.loyalty-hero > div:last-child { display: grid; align-content: center; gap: 5px; padding: 25px; background: linear-gradient(145deg, #d2a24c, #a87523); color: #15120d; text-align: center; }
.loyalty-hero > div:last-child.paused { background: #67635c; color: #fff; }
.loyalty-hero > div:last-child span, .loyalty-hero > div:last-child small { font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.loyalty-hero > div:last-child strong { font-family: Georgia, "Times New Roman", serif; font-size: 42px; font-weight: 400; }
.loyalty-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 15px 0; }
.loyalty-stats article { display: grid; gap: 7px; min-height: 105px; padding: 17px; border: 1px solid rgba(9,9,8,.13); border-radius: 13px; background: #fbfaf6; }
.loyalty-stats span, .loyalty-stats small { color: #817c73; font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.loyalty-stats strong { margin-top: auto; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; }
.loyalty-layout { display: grid; grid-template-columns: minmax(260px, .55fr) minmax(0, 1.45fr); align-items: start; gap: 14px; }
.loyalty-settings, .loyalty-members { padding: 22px; border: 1px solid rgba(9,9,8,.13); border-radius: 16px; background: #fbfaf6; }
.loyalty-settings { display: grid; gap: 15px; }
.loyalty-settings h3, .loyalty-members h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; }
.loyalty-settings > label:not(.loyalty-toggle) { display: grid; gap: 6px; }
.loyalty-settings > label > span { color: #777269; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.loyalty-settings input[type="number"], .loyalty-members-head input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid rgba(9,9,8,.16); border-radius: 8px; background: #fff; font: inherit; }
.loyalty-toggle { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 13px; border-radius: 10px; background: #f0ebe1; }
.loyalty-toggle input { width: 18px; height: 18px; accent-color: #aa7c2b; }
.loyalty-toggle span { display: grid; gap: 3px; }
.loyalty-toggle strong { font-size: 9px; }
.loyalty-toggle small, .loyalty-help { color: #7c776f; font-size: 8px; line-height: 1.5; }
.loyalty-percent { display: grid; grid-template-columns: 1fr 38px; }
.loyalty-percent b { display: grid; place-items: center; border: 1px solid rgba(9,9,8,.16); border-left: 0; border-radius: 0 8px 8px 0; color: #8a6525; }
.loyalty-percent input { border-radius: 8px 0 0 8px !important; }
.loyalty-settings > button { min-height: 43px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; cursor: pointer; font-size: 9px; font-weight: 750; }
.loyalty-members-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.loyalty-members-head label { display: grid; gap: 5px; width: min(280px, 44%); }
.loyalty-members-head label span { color: #777269; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.loyalty-member-list { display: grid; gap: 9px; }
.loyalty-member-list > article { padding: 15px; border: 1px solid rgba(9,9,8,.11); border-radius: 13px; background: #fff; }
.loyalty-member-list > article.reward-ready { border-color: rgba(171,127,45,.46); background: #fcf8ef; box-shadow: inset 3px 0 #b98a33; }
.loyalty-member-main { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.loyalty-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e8dcc5; color: #76541d; font-family: Georgia, "Times New Roman", serif; font-size: 11px; }
.loyalty-member-main > div { display: grid; gap: 4px; min-width: 0; }
.loyalty-member-main strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.loyalty-member-main small { color: #7c776f; font-size: 8px; }
.loyalty-member-main > b { padding: 6px 9px; border-radius: 20px; background: #eee7da; color: #78571f; font-size: 8px; }
.loyalty-progress { display: grid; gap: 8px; margin: 13px 0 11px 50px; }
.loyalty-progress > span { height: 4px; overflow: hidden; border-radius: 10px; background: #e6e2da; }
.loyalty-progress > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9d6f20,#d4aa5c); transition: width .25s ease; }
.loyalty-progress > div { display: flex; gap: 6px; }
.loyalty-progress b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px dashed #c5bba8; border-radius: 50%; color: #9a9389; font-size: 7px; }
.loyalty-progress b.filled { border-style: solid; border-color: #af812f; background: #af812f; color: #fff; }
.loyalty-member-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-left: 50px; }
.loyalty-member-actions > span { color: #766f65; font-size: 8px; }
.loyalty-member-actions > div { display: flex; gap: 5px; }
.loyalty-member-actions button { min-height: 30px; padding: 0 9px; border: 1px solid rgba(9,9,8,.13); border-radius: 7px; background: transparent; cursor: pointer; font-size: 7px; }
.loyalty-member-actions button:last-child { border-color: #a97b2d; color: #76541d; }
.loyalty-member-actions button:disabled { opacity: .4; cursor: not-allowed; }

.loyalty-center-intro { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 125px; margin-bottom: 13px; padding: 25px 28px; overflow: hidden; border: 1px solid rgba(9,9,8,.12); border-radius: 18px; background: radial-gradient(circle at 88% 20%, rgba(196,145,52,.15), transparent 30%), #fbfaf6; }
.loyalty-center-intro::after { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, rgba(205,155,64,.1) 48%, transparent 67%); content: ""; transform: translateX(-100%); animation: loyaltyGoldSweep 8s ease-in-out infinite; }
.loyalty-center-intro p, .promotion-toolbar p, .gift-card-toolbar p { margin: 0 0 6px; color: #9c7027; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.loyalty-center-intro h2 { margin: 0 0 7px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px,3vw,37px); font-weight: 400; letter-spacing: -.025em; }
.loyalty-center-intro > div:first-child > span { color: #746f66; font-size: 9px; line-height: 1.6; }
.loyalty-center-mark { position: relative; z-index: 1; display: grid; justify-items: center; min-width: 96px; padding: 12px 17px; border: 1px solid rgba(159,112,31,.38); border-radius: 12px; background: #11100e; color: #d9ad58; box-shadow: 0 12px 30px rgba(0,0,0,.13); }
.loyalty-center-mark span { font-size: 7px; font-weight: 800; letter-spacing: .22em; }
.loyalty-center-mark strong { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; letter-spacing: .08em; }
@keyframes loyaltyGoldSweep { 0%,58% { transform: translateX(-100%); } 76%,100% { transform: translateX(100%); } }

.loyalty-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 15px; }
.loyalty-tabs button { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 2px 9px; min-height: 68px; padding: 13px 15px; overflow: hidden; border: 1px solid rgba(9,9,8,.13); border-radius: 13px; background: #fbfaf6; color: #11100e; cursor: pointer; text-align: left; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.loyalty-tabs button:hover { border-color: rgba(162,117,39,.58); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(25,20,12,.08); }
.loyalty-tabs button.active { border-color: #a97929; background: linear-gradient(125deg,#1c1a16,#0e0d0c); color: #fff; box-shadow: 0 12px 27px rgba(0,0,0,.15); }
.loyalty-tabs button::after { position: absolute; right: -30px; bottom: -60px; width: 110px; height: 110px; border: 1px solid rgba(192,143,53,.14); border-radius: 50%; content: ""; }
.loyalty-tabs button > span { grid-row: 1 / 3; align-self: center; color: #a67627; font-family: Georgia, "Times New Roman", serif; font-size: 15px; }
.loyalty-tabs button.active > span { color: #d4a653; }
.loyalty-tabs strong { align-self: end; font-size: 9px; }
.loyalty-tabs small { color: #817c74; font-size: 7px; }
.loyalty-tabs button.active small { color: rgba(255,255,255,.48); }

.promotion-stats, .gift-card-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.promotion-stats article, .gift-card-stats article { position: relative; display: grid; gap: 6px; min-height: 104px; padding: 17px; overflow: hidden; border: 1px solid rgba(9,9,8,.12); border-radius: 13px; background: #fbfaf6; }
.promotion-stats article::after, .gift-card-stats article::after { position: absolute; right: -20px; bottom: -37px; width: 74px; height: 74px; border: 1px solid rgba(176,128,42,.13); border-radius: 50%; content: ""; }
.promotion-stats span, .promotion-stats small, .gift-card-stats span, .gift-card-stats small { color: #817c73; font-size: 7px; letter-spacing: .07em; text-transform: uppercase; }
.promotion-stats strong, .gift-card-stats strong { align-self: end; margin-top: auto; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; }
.gift-card-stats article:nth-child(3) strong { font-size: 21px; }

.promotion-toolbar, .gift-card-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) minmax(180px,280px) auto; align-items: end; gap: 13px; margin-bottom: 14px; padding: 20px 21px; border: 1px solid rgba(9,9,8,.12); border-radius: 15px; background: #fbfaf6; }
.gift-card-toolbar { grid-template-columns: minmax(215px,1fr) minmax(180px,250px) 150px auto; }
.promotion-toolbar h3, .gift-card-toolbar h3 { margin: 0 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; }
.promotion-toolbar > div > span, .gift-card-toolbar > div > span { color: #777269; font-size: 8px; line-height: 1.5; }
.promotion-toolbar label, .gift-card-toolbar label, .promotion-editor label, .gift-card-editor label, .gift-redeem-box label { display: grid; gap: 5px; }
.promotion-toolbar label > span, .gift-card-toolbar label > span, .promotion-editor label > span, .gift-card-editor label > span, .gift-redeem-box label > span { color: #777269; font-size: 7px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.promotion-toolbar input, .gift-card-toolbar input, .gift-card-toolbar select, .promotion-editor input, .promotion-editor select, .promotion-editor textarea, .gift-card-editor input, .gift-card-editor select, .gift-card-editor textarea, .gift-redeem-box input { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid rgba(9,9,8,.15); border-radius: 8px; outline: 0; background: #fff; color: #151310; font: inherit; font-size: 9px; transition: border-color .18s ease, box-shadow .18s ease; }
.promotion-toolbar input:focus, .gift-card-toolbar input:focus, .gift-card-toolbar select:focus, .promotion-editor input:focus, .promotion-editor select:focus, .promotion-editor textarea:focus, .gift-card-editor input:focus, .gift-card-editor select:focus, .gift-card-editor textarea:focus, .gift-redeem-box input:focus { border-color: #aa7b2c; box-shadow: 0 0 0 3px rgba(170,123,44,.1); }
.promotion-editor textarea, .gift-card-editor textarea { resize: vertical; }
.promotion-toolbar > button, .gift-card-toolbar > button, .promotion-empty button { min-height: 41px; padding: 0 14px; border: 1px solid #a97b2d; border-radius: 8px; background: #11100e; color: #e3ba6a; cursor: pointer; font-size: 8px; font-weight: 750; white-space: nowrap; }

.promotion-editor, .gift-card-editor { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 14px; padding: 21px; border: 1px solid rgba(163,117,38,.38); border-radius: 16px; background: linear-gradient(140deg,#fbfaf6,#f4efe5); box-shadow: 0 18px 44px rgba(36,28,17,.08); }
.promotion-editor > header, .promotion-editor > footer, .gift-card-editor > header, .gift-card-editor > footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promotion-editor > header, .gift-card-editor > header { padding-bottom: 13px; border-bottom: 1px solid rgba(9,9,8,.1); }
.promotion-editor > header small, .gift-card-editor > header small { color: #a27325; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.promotion-editor h3, .gift-card-editor h3 { margin: 3px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.promotion-editor > header button, .gift-card-editor > header button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(9,9,8,.12); border-radius: 50%; background: transparent; cursor: pointer; font-size: 19px; }
.promotion-editor .wide, .gift-card-editor .wide { grid-column: span 2; }
.promotion-editor > footer, .gift-card-editor > footer { justify-content: flex-end; padding-top: 5px; }
.promotion-editor > footer button, .gift-card-editor > footer button { min-height: 39px; padding: 0 13px; border: 1px solid rgba(9,9,8,.15); border-radius: 8px; background: transparent; cursor: pointer; font-size: 8px; }
.promotion-editor > footer button.primary, .gift-card-editor > footer button.primary { border-color: #11100e; background: #11100e; color: #e3ba6a; }
.promotion-editor button:disabled, .gift-card-editor button:disabled { opacity: .48; cursor: not-allowed; }
.promotion-value { display: grid; grid-template-columns: 1fr 38px; }
.promotion-value input { border-radius: 8px 0 0 8px; }
.promotion-value b { display: grid; place-items: center; border: 1px solid rgba(9,9,8,.15); border-left: 0; border-radius: 0 8px 8px 0; background: #f1ede4; color: #7c591f; }
.promotion-active { align-self: end; display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; min-height: 40px; padding: 8px 11px; border-radius: 8px; background: #ebe3d5; }
.promotion-active input { width: 17px; min-height: 17px; padding: 0; accent-color: #a97b2d; }
.promotion-active > span { display: grid; gap: 2px; letter-spacing: normal !important; text-transform: none !important; }
.promotion-active strong { color: #16130e; font-size: 8px; }
.promotion-active small { color: #746f66; font-size: 7px; }

.promotion-list, .gift-card-list { display: grid; gap: 10px; }
.promotion-card { display: grid; grid-template-columns: 145px minmax(0,1fr); overflow: hidden; border: 1px solid rgba(9,9,8,.12); border-radius: 15px; background: #fbfaf6; box-shadow: 0 5px 16px rgba(25,20,12,.035); transition: transform .2s ease, box-shadow .2s ease; }
.promotion-card:hover { transform: translateY(-2px); box-shadow: 0 15px 31px rgba(25,20,12,.08); }
.promotion-card-code { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 160px; padding: 18px; background: radial-gradient(circle at 100% 0,rgba(199,149,57,.25),transparent 40%),#151411; color: #fff; text-align: center; }
.promotion-card-code span { padding: 8px 10px; border: 1px dashed rgba(222,178,92,.58); border-radius: 7px; color: #e0b967; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.promotion-card-code small { color: rgba(255,255,255,.47); font-size: 7px; line-height: 1.4; text-transform: uppercase; }
.promotion-card-main { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 17px 19px 10px; }
.promotion-card-main h4 { margin: 5px 0 2px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; }
.promotion-card-main > div > strong { color: #815d21; font-size: 10px; }
.promotion-card-main p { margin: 7px 0 0; color: #79746b; font-size: 8px; line-height: 1.5; }
.promotion-state, .gift-card-state { display: inline-flex; padding: 5px 7px; border-radius: 999px; background: #ece8df; color: #716c64; font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.promotion-state.active, .gift-card-state.active { background: #e2efe5; color: #376f48; }
.promotion-state.scheduled { background: #e6ecf3; color: #476982; }
.promotion-state.expired, .gift-card-state.expired, .gift-card-state.cancelled { background: #eee5e2; color: #8e4c42; }
.promotion-state.completed, .gift-card-state.redeemed { background: #eee5cf; color: #7d5b1c; }
.promotion-card dl, .gift-card-record-info dl { display: grid; align-content: start; gap: 9px; margin: 2px 0 0; }
.promotion-card dl div, .gift-card-record-info dl div { display: grid; gap: 2px; }
.promotion-card dt, .gift-card-record-info dt { color: #8b867e; font-size: 6px; letter-spacing: .09em; text-transform: uppercase; }
.promotion-card dd, .gift-card-record-info dd { margin: 0; color: #3d3933; font-size: 8px; }
.promotion-usage { grid-column: 2; height: 3px; margin: 0 19px; overflow: hidden; border-radius: 10px; background: #e8e3da; }
.promotion-usage i { display: block; height: 100%; background: linear-gradient(90deg,#9d6f20,#d5ad61); }
.promotion-card > footer { grid-column: 2; display: flex; justify-content: flex-end; gap: 5px; padding: 10px 19px 15px; }
.promotion-card > footer button, .gift-card-record-info > footer button { min-height: 31px; padding: 0 9px; border: 1px solid rgba(9,9,8,.13); border-radius: 7px; background: #fff; cursor: pointer; font-size: 7px; }
.promotion-card > footer button:nth-child(2), .gift-card-record-info > footer button.primary { border-color: #a97b2d; background: #171511; color: #dfb461; }
.promotion-card > footer .danger, .gift-card-record-info > footer .danger { border-color: rgba(159,68,53,.28); color: #97483b; }
.promotion-card > footer button:disabled, .gift-card-record-info > footer button:disabled { opacity: .38; cursor: not-allowed; }
.promotion-empty { display: grid; justify-items: center; gap: 8px; min-height: 240px; padding: 45px 20px; border: 1px dashed rgba(9,9,8,.17); border-radius: 16px; background: #fbfaf6; text-align: center; }
.promotion-empty > span { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(170,123,44,.35); border-radius: 50%; color: #a8792b; font-size: 20px; }
.promotion-empty strong { margin-top: 4px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; }
.promotion-empty p { max-width: 390px; margin: 0 0 5px; color: #7b766e; font-size: 8px; line-height: 1.6; }

.gift-type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.gift-type-picker legend { grid-column: 1 / -1; margin-bottom: 5px; color: #777269; font-size: 7px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.gift-type-picker button { display: grid; gap: 3px; min-height: 48px; padding: 8px 11px; border: 1px solid rgba(9,9,8,.14); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; }
.gift-type-picker button.active { border-color: #a97b2d; background: #eee4d0; box-shadow: inset 3px 0 #a97b2d; }
.gift-type-picker strong { font-size: 8px; }
.gift-type-picker small { color: #7c776f; font-size: 7px; }
.gift-card-latest { display: grid; grid-template-columns: 1fr auto 30px; align-items: center; gap: 12px; margin-bottom: 13px; padding: 13px 15px; border: 1px solid rgba(163,117,38,.48); border-radius: 12px; background: #efe4ce; }
.gift-card-latest > div { display: grid; gap: 2px; }
.gift-card-latest span { color: #8d6420; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gift-card-latest strong { font-size: 10px; }
.gift-card-latest small { color: #726a5e; font-size: 7px; }
.gift-card-latest button { min-height: 34px; padding: 0 10px; border: 1px solid #9b6f25; border-radius: 7px; background: #11100e; color: #e2b966; cursor: pointer; font-size: 7px; }
.gift-card-latest button:last-child { width: 30px; padding: 0; border-color: transparent; background: transparent; color: #3d372f; font-size: 16px; }
.gift-card-record { display: grid; grid-template-columns: minmax(300px,.82fr) minmax(280px,1.18fr); gap: 0; overflow: hidden; border: 1px solid rgba(9,9,8,.12); border-radius: 17px; background: #fbfaf6; box-shadow: 0 8px 25px rgba(25,20,12,.06); }
.gift-card-record.cancelled, .gift-card-record.expired { opacity: .74; }
.gift-card-artwork { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 270px; padding: 21px; overflow: hidden; background: radial-gradient(circle at 85% 13%,rgba(205,155,63,.34),transparent 31%),linear-gradient(145deg,#24211b,#0d0c0b); color: #fff; }
.gift-card-artwork::before { position: absolute; inset: 9px; border: 1px solid rgba(218,173,85,.42); border-radius: 12px; pointer-events: none; content: ""; }
.gift-card-artwork::after { position: absolute; right: -42px; bottom: -73px; color: rgba(215,168,78,.07); content: "L"; font-family: Georgia, "Times New Roman", serif; font-size: 250px; line-height: 1; }
.gift-card-artwork > header, .gift-card-artwork-main, .gift-card-artwork > footer { position: relative; z-index: 1; }
.gift-card-artwork > header { display: flex; align-items: center; gap: 9px; }
.gift-card-artwork > header img { width: 39px; height: 39px; object-fit: contain; }
.gift-card-artwork > header div { display: grid; gap: 1px; }
.gift-card-artwork > header span { color: #e0b766; font-family: Georgia, "Times New Roman", serif; font-size: 13px; letter-spacing: .08em; }
.gift-card-artwork > header small { color: rgba(255,255,255,.45); font-size: 6px; letter-spacing: .2em; }
.gift-card-artwork-main { align-self: center; padding: 17px 2px; }
.gift-card-artwork-main small { color: rgba(255,255,255,.48); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.gift-card-artwork-main h3 { margin: 4px 0 8px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; }
.gift-card-artwork-main strong { color: #e2b966; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 400; }
.gift-card-artwork-main p { max-width: 300px; margin: 6px 0 0; color: rgba(255,255,255,.48); font-size: 7px; line-height: 1.45; }
.gift-card-artwork > footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.gift-card-artwork > footer > div { display: grid; gap: 2px; width: min(190px,65%); padding: 5px 7px; border-radius: 5px; background: #fff; }
.gift-card-artwork > footer b { color: #11100e; font-size: 6px; letter-spacing: .12em; text-align: center; }
.gift-card-artwork > footer > span { color: rgba(255,255,255,.46); font-size: 6px; line-height: 1.5; text-align: right; text-transform: uppercase; }
.gift-card-artwork > footer > span strong { color: #e1b764; font-size: 7px; }
.gift-barcode { display: block; width: 100%; max-width: 100%; height: auto; }
.barcode-fallback { color: #11100e; font-size: 7px; letter-spacing: .1em; }
.gift-card-record-info { display: grid; align-content: center; padding: 20px 22px; }
.gift-card-record-info > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.gift-card-record-info > div:first-child > small { color: #8a857c; font-size: 7px; letter-spacing: .08em; }
.gift-card-record-info h4 { margin: 8px 0 2px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.gift-card-record-info > strong { color: #805c20; font-size: 10px; }
.gift-card-record-info dl { grid-template-columns: repeat(3,1fr); margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(9,9,8,.09); }
.gift-card-record-info > footer { display: flex; justify-content: flex-end; gap: 5px; margin-top: 14px; }
.gift-redeem-box { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(170px,1fr) auto; align-items: end; gap: 9px; margin-top: 13px; padding: 12px; border: 1px solid rgba(166,119,39,.36); border-radius: 10px; background: #efe7d8; }
.gift-redeem-box > strong { grid-column: 1 / -1; color: #7d591f; font-size: 8px; text-transform: uppercase; }
.gift-redeem-box > div { display: flex; gap: 5px; }
.gift-redeem-box button { min-height: 40px; padding: 0 9px; border: 1px solid rgba(9,9,8,.16); border-radius: 7px; background: #fff; cursor: pointer; font-size: 7px; }
.gift-redeem-box button:last-child { border-color: #11100e; background: #11100e; color: #e0b55f; }
.gift-card-print-layer { display: none; }

.membership-admin { --membership-gold: #b68431; --membership-ink: #151310; }
.membership-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.membership-stats article { position: relative; display: grid; min-height: 108px; padding: 17px; overflow: hidden; border: 1px solid rgba(9,9,8,.12); border-radius: 14px; background: #fbfaf6; }
.membership-stats article::after { position: absolute; right: -25px; bottom: -43px; width: 85px; height: 85px; border: 1px solid rgba(182,132,47,.14); border-radius: 50%; content: ""; }
.membership-stats article.attention { border-color: rgba(172,120,34,.45); background: linear-gradient(135deg,#fbfaf6,#f1e4cb); }
.membership-stats span, .membership-stats small { color: #817c73; font-size: 7px; letter-spacing: .07em; text-transform: uppercase; }
.membership-stats strong { align-self: end; margin-top: auto; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; }
.membership-stats article:nth-child(2) strong { font-size: 20px; }

.membership-toolbar { display: grid; grid-template-columns: minmax(230px,1fr) auto auto; align-items: center; gap: 18px; margin-bottom: 10px; padding: 21px; border: 1px solid rgba(9,9,8,.12); border-radius: 16px; background: radial-gradient(circle at 92% 0,rgba(190,140,52,.12),transparent 25%),#fbfaf6; }
.membership-toolbar p { margin: 0 0 5px; color: #9c7027; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.membership-toolbar h3 { margin: 0 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; }
.membership-toolbar > div:first-child > span { color: #777269; font-size: 8px; line-height: 1.5; }
.membership-switch { display: flex; padding: 4px; border: 1px solid rgba(9,9,8,.1); border-radius: 10px; background: #eeeae1; }
.membership-switch button { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #716c63; cursor: pointer; font-size: 8px; font-weight: 700; }
.membership-switch button.active { background: #fff; color: #16130e; box-shadow: 0 4px 12px rgba(24,19,12,.08); }
.membership-switch b { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; background: rgba(169,121,40,.12); color: #8b6322; font-size: 7px; }
.membership-toolbar-actions { display: flex; gap: 7px; }
.membership-toolbar-actions button, .membership-empty button { min-height: 41px; padding: 0 14px; border: 1px solid #a97b2d; border-radius: 8px; background: #11100e; color: #e3ba6a; cursor: pointer; font-size: 8px; font-weight: 750; white-space: nowrap; }
.membership-toolbar-actions button.secondary { border-color: rgba(9,9,8,.15); background: #fff; color: #27231d; }
.membership-toolbar-actions button:disabled { opacity: .4; cursor: not-allowed; }
.membership-note { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border: 1px solid rgba(166,119,39,.24); border-radius: 10px; background: #f2eadb; color: #665e52; }
.membership-note > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid rgba(166,119,39,.4); border-radius: 50%; color: #9c7027; font-size: 12px; }
.membership-note p { margin: 0; font-size: 7px; line-height: 1.55; }
.membership-renewal-queue { margin-bottom: 14px; overflow: hidden; border: 1px solid rgba(166,119,39,.34); border-radius: 14px; background: linear-gradient(135deg,#17140f,#282116); color: #fff; box-shadow: 0 15px 35px rgba(29,21,11,.11); }
.membership-renewal-queue > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(221,177,91,.18); }
.membership-renewal-queue > header span { color: #d8a94f; font-size: 6px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.membership-renewal-queue > header h4 { margin: 4px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: 20px; font-weight: 400; }
.membership-renewal-queue > header > b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid rgba(221,177,91,.36); border-radius: 999px; color: #e1b765; font-size: 9px; }
.membership-renewal-queue > div { display: grid; }
.membership-renewal-queue article { display: grid; grid-template-columns: 44px minmax(190px,1fr) auto auto; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.membership-renewal-queue article:last-child { border-bottom: 0; }
.membership-renewal-queue article > div { display: grid; gap: 3px; }
.membership-renewal-queue article small { color: #c99a44; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.membership-renewal-queue article strong { font-size: 9px; }
.membership-renewal-queue article > div > span { color: rgba(255,255,255,.42); font-size: 7px; }
.membership-renewal-queue footer { display: flex; gap: 6px; }
.membership-renewal-queue button { min-height: 36px; padding: 0 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 7px; background: transparent; color: rgba(255,255,255,.58); cursor: pointer; font-size: 7px; font-weight: 750; }
.membership-renewal-queue button.primary { border-color: #c89438; background: #d8a94f; color: #12100c; }
.membership-renewal-queue button:disabled { opacity: .45; cursor: wait; }

.membership-plan-editor, .membership-enrolment { margin-bottom: 14px; border: 1px solid rgba(163,117,38,.4); border-radius: 17px; background: linear-gradient(140deg,#fbfaf6,#f4efe5); box-shadow: 0 18px 44px rgba(36,28,17,.08); }
.membership-plan-editor { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(245px,.55fr); gap: 18px; padding: 21px; }
.membership-plan-editor > header, .membership-plan-editor > footer, .membership-enrolment > header, .membership-enrolment > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.membership-plan-editor > header, .membership-plan-editor > footer { grid-column: 1 / -1; }
.membership-plan-editor > header, .membership-enrolment > header { padding-bottom: 13px; border-bottom: 1px solid rgba(9,9,8,.1); }
.membership-plan-editor > header small, .membership-enrolment > header small { color: #a27325; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.membership-plan-editor h3, .membership-enrolment h3 { margin: 3px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.membership-plan-editor > header button, .membership-enrolment > header button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(9,9,8,.12); border-radius: 50%; background: transparent; cursor: pointer; font-size: 19px; }
.membership-plan-fields { display: grid; grid-template-columns: repeat(3,1fr); align-content: start; gap: 12px; }
.membership-plan-fields label, .membership-enrolment label, .membership-filters label { display: grid; gap: 5px; }
.membership-plan-fields label > span, .membership-enrolment label > span, .membership-filters label > span { color: #777269; font-size: 7px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.membership-plan-fields input, .membership-plan-fields select, .membership-plan-fields textarea, .membership-enrolment input, .membership-enrolment select, .membership-filters input, .membership-filters select { width: 100%; min-height: 41px; padding: 9px 11px; border: 1px solid rgba(9,9,8,.15); border-radius: 8px; outline: 0; background: #fff; color: #151310; font: inherit; font-size: 9px; transition: border-color .18s ease, box-shadow .18s ease; }
.membership-plan-fields input:focus, .membership-plan-fields select:focus, .membership-plan-fields textarea:focus, .membership-enrolment input:focus, .membership-enrolment select:focus, .membership-filters input:focus, .membership-filters select:focus { border-color: #aa7b2c; box-shadow: 0 0 0 3px rgba(170,123,44,.1); }
.membership-plan-fields textarea { resize: vertical; }
.membership-plan-fields .wide { grid-column: span 2; }
.membership-percent { display: grid; grid-template-columns: 1fr 38px; }
.membership-percent input { border-radius: 8px 0 0 8px; }
.membership-percent b { display: grid; place-items: center; border: 1px solid rgba(9,9,8,.15); border-left: 0; border-radius: 0 8px 8px 0; background: #eee7da; color: #7c591f; font-size: 9px; }
.membership-check { align-self: end; display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 9px !important; min-height: 48px; padding: 8px 11px; border-radius: 9px; background: #ebe3d5; }
.membership-check input { width: 17px; min-height: 17px; padding: 0; accent-color: #a97b2d; }
.membership-check > span { display: grid; gap: 2px; letter-spacing: normal !important; text-transform: none !important; }
.membership-check strong { color: #17140f; font-size: 8px; }
.membership-check small { color: #746f66; font-size: 7px; line-height: 1.35; }
.membership-plan-preview { position: relative; align-self: stretch; min-height: 305px; padding: 25px 22px; overflow: hidden; border: 1px solid rgba(209,164,78,.34); border-radius: 15px; background: radial-gradient(circle at 90% 8%,rgba(209,160,67,.31),transparent 28%),linear-gradient(145deg,#24211c,#0d0c0b); color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.16); }
.membership-plan-preview::before, .membership-plan-card::before { position: absolute; inset: 8px; border: 1px solid rgba(222,178,92,.27); border-radius: 11px; pointer-events: none; content: ""; }
.membership-plan-preview::after, .membership-plan-card::after { position: absolute; right: -38px; bottom: -74px; color: rgba(219,174,86,.055); content: "L"; font-family: Georgia, "Times New Roman", serif; font-size: 235px; line-height: 1; }
.membership-plan-preview > * { position: relative; z-index: 1; }
.membership-plan-preview > small { color: rgba(255,255,255,.4); font-size: 6px; letter-spacing: .18em; text-transform: uppercase; }
.membership-plan-preview > span { display: block; margin-top: 21px; color: #e0b45f; font-size: 7px; font-weight: 800; letter-spacing: .21em; }
.membership-plan-preview h4 { margin: 4px 0 20px; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; }
.membership-plan-preview > strong { color: #e1b663; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; }
.membership-plan-preview > p { margin: 3px 0 15px; color: rgba(255,255,255,.43); font-size: 7px; }
.membership-plan-preview ul, .membership-plan-card ul { display: grid; gap: 7px; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(225,181,97,.18); list-style: none; }
.membership-plan-preview li, .membership-plan-card li { color: rgba(255,255,255,.67); font-size: 7px; line-height: 1.4; }
.membership-plan-preview li::before, .membership-plan-card li::before { margin-right: 7px; color: #d6a950; content: "✓"; }
.membership-plan-editor > footer, .membership-enrolment > footer { justify-content: flex-end; padding-top: 4px; }
.membership-plan-editor > footer button, .membership-enrolment > footer button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(9,9,8,.15); border-radius: 8px; background: transparent; cursor: pointer; font-size: 8px; }
.membership-plan-editor > footer button.primary, .membership-enrolment > footer button.primary { border-color: #11100e; background: #11100e; color: #e3ba6a; }
.membership-plan-editor button:disabled, .membership-enrolment button:disabled { opacity: .45; cursor: not-allowed; }

.membership-enrolment { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; padding: 21px; }
.membership-enrolment > header, .membership-enrolment > footer { grid-column: 1 / -1; }
.membership-enrolment .wide { grid-column: span 2; }
.membership-filters { display: grid; grid-template-columns: minmax(220px,1fr) 190px; gap: 10px; margin-bottom: 11px; padding: 13px; border: 1px solid rgba(9,9,8,.1); border-radius: 12px; background: #fbfaf6; }
.membership-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.membership-plan-card { position: relative; display: grid; min-height: 375px; padding: 24px 21px 19px; overflow: hidden; border: 1px solid rgba(185,134,47,.38); border-radius: 17px; background: radial-gradient(circle at 85% 8%,rgba(202,151,58,.25),transparent 26%),linear-gradient(145deg,#24211c,#0e0d0c); color: #fff; box-shadow: 0 13px 34px rgba(21,16,9,.13); transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease; }
.membership-plan-card:hover { transform: translateY(-4px); box-shadow: 0 21px 45px rgba(21,16,9,.2); }
.membership-plan-card.inactive { filter: saturate(.42); opacity: .68; }
.membership-plan-card > *:not(.membership-plan-shine):not(.membership-theme-fx):not(.membership-particles) { position: relative; z-index: 1; }
.membership-plan-shine { position: absolute; z-index: 0; inset: -40% auto -40% -42%; width: 28%; background: linear-gradient(90deg,transparent,rgba(242,199,114,.18),transparent); transform: rotate(15deg); animation: membershipShine 7.5s ease-in-out infinite; }
@keyframes membershipShine { 0%,55% { left: -42%; } 82%,100% { left: 125%; } }
@media (prefers-reduced-motion: reduce) {
  .membership-plan-shine,
  .membership-theme-fx i,
  .membership-theme-fx b,
  .membership-theme-fx em { animation: none !important; }
}
.membership-plan-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.membership-plan-card > header small { color: rgba(255,255,255,.38); font-size: 6px; letter-spacing: .16em; }
.membership-plan-card > header span { padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.53); font-size: 6px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.membership-plan-card > header span.active { background: rgba(119,180,126,.14); color: #9bc6a1; }
.membership-plan-card > div { align-self: center; margin: 22px 0 15px; }
.membership-plan-card > div p { margin: 0 0 5px; color: #d9aa52; font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.membership-plan-card h4 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; }
.membership-plan-card > div > span { color: rgba(255,255,255,.45); font-size: 7px; line-height: 1.5; }
.membership-plan-card > strong { color: #e1b55f; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; }
.membership-plan-card > strong small { color: rgba(255,255,255,.4); font-family: inherit; font-size: 8px; font-weight: 400; }
.membership-plan-card ul { align-content: start; margin-top: 13px; }
.membership-plan-card li b { color: #e3b966; font-weight: 700; }
.membership-plan-card > footer { align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; }
.membership-plan-card > footer button { min-height: 37px; border: 1px solid rgba(224,181,98,.3); border-radius: 8px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.76); cursor: pointer; font-size: 7px; }
.membership-plan-card > footer button:last-child { background: rgba(210,164,75,.12); color: #dfb460; }
.membership-plan-card > footer button:disabled { opacity: .4; cursor: not-allowed; }

.membership-list { display: grid; gap: 10px; }
.membership-record { display: grid; grid-template-columns: minmax(210px,1.2fr) minmax(150px,.75fr) minmax(200px,1fr) minmax(180px,.9fr); align-items: center; gap: 16px; padding: 17px 18px 13px; border: 1px solid rgba(9,9,8,.12); border-radius: 15px; background: #fbfaf6; box-shadow: 0 5px 17px rgba(25,20,12,.035); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.membership-record:hover { border-color: rgba(173,124,41,.35); transform: translateY(-2px); box-shadow: 0 14px 29px rgba(25,20,12,.075); }
.membership-record.cancelled, .membership-record.expired { opacity: .7; }
.membership-member { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.membership-avatar { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(184,133,46,.48); border-radius: 50%; background: radial-gradient(circle at 30% 20%,#3b3529,#14120e); color: #e1b45e; font-family: Georgia, "Times New Roman", serif; font-size: 13px; }
.membership-member > div { min-width: 0; }
.membership-member small, .membership-record-plan small, .membership-record-dates small { display: block; color: #918b82; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.membership-member h4 { margin: 3px 0 2px; overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.membership-member p { margin: 0; color: #777168; font-size: 7px; }
.membership-status { align-self: start; padding: 5px 7px; border-radius: 999px; background: #ece8df; color: #716c64; font-size: 6px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.membership-status.active { background: #e2efe5; color: #376f48; }
.membership-status.paused { background: #eee5cf; color: #7d5b1c; }
.membership-status.expired, .membership-status.cancelled { background: #eee5e2; color: #8e4c42; }
.membership-record-plan { display: grid; gap: 4px; min-width: 0; padding-left: 15px; border-left: 1px solid rgba(9,9,8,.09); }
.membership-record-plan strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.membership-record-plan span, .membership-record-dates span { color: #777168; font-size: 7px; }
.membership-record-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.membership-record-dates > div { display: grid; gap: 4px; }
.membership-record-dates strong { font-size: 8px; }
.membership-record-dates strong.paid { color: #39724a; }
.membership-record-dates strong.pending { color: #9a681e; }
.membership-usage { display: grid; gap: 6px; }
.membership-usage > div { display: flex; justify-content: space-between; gap: 9px; color: #746f66; font-size: 7px; }
.membership-usage > div strong { color: #29251f; font-size: 8px; }
.membership-usage > span { height: 5px; overflow: hidden; border-radius: 999px; background: #e9e4db; }
.membership-usage > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#96691e,#d6ad60); transition: width .25s ease; }
.membership-usage > small { color: #857f76; font-size: 6px; }
.membership-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(230px,1fr) auto; align-items: stretch; gap: 9px; padding-top: 13px; border-top: 1px solid rgba(9,9,8,.08); }
.membership-action-main, .membership-action-secondary { display: flex; flex-wrap: wrap; gap: 7px; }
.membership-action-secondary { justify-content: flex-end; }
.membership-actions button { display: grid; align-content: center; gap: 3px; min-height: 46px; padding: 8px 14px; border: 1px solid rgba(9,9,8,.14); border-radius: 10px; background: #fff; color: #2b2823; cursor: pointer; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.membership-actions button:hover:not(:disabled) { border-color: rgba(169,123,45,.46); box-shadow: 0 8px 20px rgba(39,29,14,.08); transform: translateY(-1px); }
.membership-actions button b { font-size: 8px; font-weight: 820; line-height: 1.15; }
.membership-actions button small { color: #847d73; font-size: 6.5px; line-height: 1.2; }
.membership-actions button.primary { border-color: #a97b2d; background: linear-gradient(135deg,#171511,#2a241a); color: #e7bf70; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.membership-actions button.primary small { color: rgba(255,255,255,.55); }
.membership-actions button.payment { border-color: rgba(54,112,72,.26); background: #f2f8f3; color: #316a42; }
.membership-actions button.reactivate { position: relative; overflow: hidden; border-color: #b98938; background: linear-gradient(135deg,#16130e,#2d2417); color: #efc979; box-shadow: 0 8px 20px rgba(116,78,17,.14); }
.membership-actions button.reactivate::after { position: absolute; inset: -80% auto -80% -35%; width: 24%; background: linear-gradient(90deg,transparent,rgba(255,219,144,.28),transparent); content: ""; transform: rotate(18deg); animation: membershipActionShine 4.8s ease-in-out infinite; }
.membership-actions button.reactivate small { color: rgba(255,255,255,.58); }
.membership-actions button.danger { border-color: rgba(159,68,53,.28); background: #fffafa; color: #8e3f34; }
.membership-actions button.danger small { color: #9b746e; }
.membership-actions button:disabled { opacity: .38; cursor: not-allowed; }
@keyframes membershipActionShine { 0%,58% { left: -35%; } 86%,100% { left: 130%; } }

.membership-dialog-overlay { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,8,7,.76); backdrop-filter: blur(10px); animation: membershipOverlayIn .22s ease both; }
.membership-action-dialog { display: grid; gap: 17px; width: min(100%,560px); max-height: min(90vh,720px); overflow-y: auto; padding: 25px; border: 1px solid rgba(214,169,81,.4); border-radius: 21px; background: radial-gradient(circle at 90% 0,rgba(195,143,50,.12),transparent 31%),#fbfaf6; box-shadow: 0 36px 110px rgba(0,0,0,.42); animation: membershipDialogIn .35s cubic-bezier(.16,1,.3,1) both; }
.membership-action-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.membership-action-dialog > header small { color: #a37627; font-size: 7px; font-weight: 850; letter-spacing: .15em; }
.membership-action-dialog h3 { margin: 5px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: 29px; font-weight: 400; }
.membership-action-dialog > header button { width: 35px; height: 35px; border: 1px solid rgba(9,9,8,.14); border-radius: 50%; background: rgba(255,255,255,.62); cursor: pointer; font-size: 17px; }
.membership-dialog-member { display: grid; grid-template-columns: 45px 1fr; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(9,9,8,.09); border-radius: 12px; background: rgba(255,255,255,.68); }
.membership-dialog-member > span { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(184,133,46,.48); border-radius: 50%; background: radial-gradient(circle at 30% 20%,#3b3529,#14120e); color: #e1b45e; font-family: Georgia,"Times New Roman",serif; font-size: 13px; }
.membership-dialog-member > div { display: grid; gap: 4px; }
.membership-dialog-member strong { font-size: 10px; }
.membership-dialog-member small { color: #7e776e; font-size: 7px; }
.membership-dialog-note { display: grid; gap: 6px; padding: 14px 15px; border-left: 3px solid #ad7e2f; border-radius: 9px; background: #f4ead6; }
.membership-dialog-note b { color: #6f501b; font-size: 9px; }
.membership-dialog-note span { color: #756b5e; font-size: 8px; line-height: 1.6; }
.membership-dialog-note.critical { border-left-color: #963f34; background: #f8e7e4; }
.membership-dialog-note.critical b { color: #792e27; }
.membership-dialog-note.critical span { color: #76524d; }
.membership-reactivation-payment { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.membership-reactivation-payment label, .membership-delete-confirm { display: grid; gap: 7px; }
.membership-reactivation-payment label span, .membership-delete-confirm > span { color: #70695f; font-size: 7px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.membership-reactivation-payment select, .membership-delete-confirm input { width: 100%; height: 47px; padding: 0 13px; border: 1px solid rgba(9,9,8,.17); border-radius: 9px; outline: 0; background: #fff; font: inherit; font-size: 9px; }
.membership-reactivation-payment select:focus, .membership-delete-confirm input:focus { border-color: #a97b2d; box-shadow: 0 0 0 3px rgba(169,123,45,.12); }
.membership-reactivation-payment p { grid-column: 1 / -1; margin: -2px 0 0; color: #8d5e1a; font-size: 8px; line-height: 1.5; }
.membership-action-dialog > footer { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; }
.membership-action-dialog > footer button { min-height: 46px; border: 1px solid rgba(9,9,8,.16); border-radius: 999px; background: transparent; cursor: pointer; font-size: 8px; font-weight: 820; }
.membership-action-dialog > footer button.primary { border-color: #b28332; background: linear-gradient(135deg,#171511,#2b2419); color: #e8bf6b; box-shadow: 0 10px 25px rgba(69,45,11,.16); }
.membership-action-dialog > footer button.danger { border-color: #933d33; background: #933d33; color: #fff; }
.membership-action-dialog button:disabled { cursor: not-allowed; opacity: .42; }
@keyframes membershipOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes membershipDialogIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.membership-empty { display: grid; justify-items: center; gap: 8px; min-height: 250px; padding: 48px 20px; border: 1px dashed rgba(9,9,8,.17); border-radius: 16px; background: #fbfaf6; text-align: center; }
.membership-empty > span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(170,123,44,.35); border-radius: 50%; color: #a8792b; font-size: 20px; }
.membership-empty strong { margin-top: 4px; font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 400; }
.membership-empty p { max-width: 420px; margin: 0 0 6px; color: #7b766e; font-size: 8px; line-height: 1.6; }

/* Membership design studio and saved visual themes */
.membership-plan-editor { position: relative; grid-template-columns: minmax(0,1.45fr) minmax(285px,.55fr); gap: 18px; padding: 0; overflow: hidden; border-color: rgba(207,158,66,.42); background: radial-gradient(circle at 88% 5%,rgba(199,147,52,.14),transparent 25%),linear-gradient(145deg,#1d1a15,#0d0c0b); color: #fff; box-shadow: 0 26px 70px rgba(13,10,6,.22); }
.membership-studio-header { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; padding: 23px 24px 19px !important; border-bottom-color: rgba(222,178,92,.16) !important; }
.membership-studio-header > div > small { color: #d8aa55; }
.membership-studio-header h3 { margin-top: 5px; color: #fff; font-size: clamp(23px,2.5vw,31px); }
.membership-studio-header p { max-width: 650px; margin: 6px 0 0; color: rgba(255,255,255,.48); font-size: 8px; line-height: 1.55; }
.membership-studio-header > button { border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.72); }
.membership-studio-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 19px 0 0; padding: 0; list-style: none; }
.membership-studio-steps li { position: relative; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; min-height: 38px; padding: 7px 11px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: rgba(255,255,255,.35); }
.membership-studio-steps li::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #c5953f; content: ""; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.membership-studio-steps li.active { border-color: rgba(207,158,66,.28); background: rgba(207,158,66,.08); color: #fff; }
.membership-studio-steps li.active::after { transform: scaleX(1); }
.membership-studio-steps b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.07); color: #d8aa55; font-size: 7px; }
.membership-studio-steps span { font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.membership-studio-workspace { min-width: 0; padding: 5px 0 5px 24px; }
.membership-step-heading { margin-bottom: 17px; }
.membership-step-heading > span { color: #d5a650; font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.membership-step-heading h4 { margin: 5px 0 6px; font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 400; }
.membership-step-heading p { max-width: 640px; margin: 0; color: rgba(255,255,255,.45); font-size: 8px; line-height: 1.55; }
.membership-theme-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.membership-theme-picker > button { position: relative; display: grid; grid-template-rows: 82px auto auto auto; gap: 5px; min-width: 0; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; outline: 0; background: rgba(255,255,255,.035); color: #fff; cursor: pointer; text-align: left; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.membership-theme-picker > button:hover { border-color: rgba(211,164,77,.45); transform: translateY(-2px); }
.membership-theme-picker > button:focus-visible { border-color: #e0b25f; box-shadow: 0 0 0 3px rgba(224,178,95,.2); }
.membership-theme-picker > button.selected { border-color: #c89a47; background: rgba(200,154,71,.09); box-shadow: 0 0 0 2px rgba(200,154,71,.1),0 12px 28px rgba(0,0,0,.15); }
.membership-theme-picker > button > strong { padding: 2px 3px 0; color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: 12px; font-weight: 400; }
.membership-theme-picker > button > small { min-height: 20px; padding: 0 3px; color: rgba(255,255,255,.42); font-size: 6px; line-height: 1.45; }
.membership-theme-picker > button > b { padding: 4px 3px 2px; color: #cf9f4b; font-size: 6px; letter-spacing: .06em; text-transform: uppercase; }
.membership-theme-swatch { position: relative; display: grid; place-items: center; min-height: 82px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: var(--plan-background); color: var(--plan-accent); }
.membership-theme-swatch::after { position: absolute; inset: 5px; border: 1px solid var(--plan-line); border-radius: 5px; content: ""; }
.membership-theme-swatch > i { position: relative; z-index: 2; font-family: Georgia,"Times New Roman",serif; font-size: 17px; font-style: normal; letter-spacing: .12em; text-shadow: 0 0 18px var(--plan-glow); }
.membership-identity-fields { display: grid; grid-template-columns: minmax(180px,.65fr) minmax(260px,1.35fr); gap: 11px; margin-top: 13px; }
.membership-identity-fields label { display: grid; gap: 5px; }
.membership-identity-fields label > span { color: rgba(255,255,255,.5); font-size: 7px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.membership-plan-editor input, .membership-plan-editor select, .membership-plan-editor textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; outline: 0; background: rgba(255,255,255,.055); color: #fff; color-scheme: dark; font: inherit; font-size: 9px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.membership-plan-editor input:focus, .membership-plan-editor select:focus, .membership-plan-editor textarea:focus { border-color: #c99a47; background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(201,154,71,.1); }
.membership-plan-editor textarea { resize: vertical; }
.membership-plan-editor .membership-plan-fields { grid-template-columns: repeat(3,1fr); }
.membership-plan-editor .membership-plan-fields label > span { color: rgba(255,255,255,.5); }
.membership-plan-editor .membership-percent b { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.08); color: #d7a850; }
.membership-plan-editor .membership-check { background: rgba(255,255,255,.055); }
.membership-plan-editor .membership-check strong { color: #fff; }
.membership-plan-editor .membership-check small { color: rgba(255,255,255,.4); }
.membership-review-step dl { display: grid; gap: 8px; margin: 0; }
.membership-review-step dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.035); }
.membership-review-step dt { color: rgba(255,255,255,.4); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.membership-review-step dd { margin: 0; color: #fff; font-size: 8px; line-height: 1.45; }
.membership-review-step > button { min-height: 38px; margin-top: 12px; padding: 0 12px; border: 1px solid rgba(207,158,66,.35); border-radius: 8px; background: rgba(207,158,66,.08); color: #d8aa55; cursor: pointer; font-size: 7px; }
.membership-studio-footer { grid-column: 1 / -1 !important; display: flex !important; justify-content: space-between !important; min-height: 69px; padding: 14px 24px 16px !important; border-top: 1px solid rgba(222,178,92,.14); }
.membership-studio-footer button { min-width: 120px; min-height: 42px !important; border-color: rgba(255,255,255,.14) !important; color: rgba(255,255,255,.72); }
.membership-studio-footer button.primary { min-width: 160px; border-color: #c99a47 !important; background: linear-gradient(135deg,#d4aa5b,#a87321) !important; color: #100e0a !important; box-shadow: 0 9px 25px rgba(174,124,38,.22); font-weight: 800; }
.membership-studio-footer button.primary span { margin-left: 10px; }

.membership-plan-preview { --plan-accent: #e1b663; --plan-line: rgba(222,178,92,.28); --plan-glow: rgba(214,165,75,.38); --plan-background: radial-gradient(circle at 90% 8%,rgba(209,160,67,.3),transparent 30%),linear-gradient(145deg,#24211c,#0d0c0b); position: sticky; top: 18px; min-height: 430px; margin: 5px 18px 5px 0; padding: 25px 22px 20px; border-color: var(--plan-line); background: var(--plan-background); box-shadow: 0 24px 52px rgba(0,0,0,.29),0 0 35px var(--plan-glow); }
.membership-plan-preview::before, .membership-plan-card::before { border-color: var(--plan-line); }
.membership-plan-preview::after, .membership-plan-card::after { color: var(--plan-glow); opacity: .23; }
.membership-plan-preview > *:not(.membership-plan-shine):not(.membership-theme-fx):not(.membership-particles), .membership-plan-card > *:not(.membership-plan-shine):not(.membership-theme-fx):not(.membership-particles) { position: relative; z-index: 2; }
.membership-plan-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.membership-plan-preview-top small { color: rgba(255,255,255,.38); font-size: 6px; letter-spacing: .16em; }
.membership-plan-preview-top b { padding: 5px 7px; border: 1px solid var(--plan-line); border-radius: 999px; color: var(--plan-accent); font-size: 6px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.membership-plan-preview > span:not(.membership-plan-shine):not(.membership-theme-fx):not(.membership-particles) { margin-top: 54px; color: var(--plan-accent); }
.membership-plan-preview h4 { margin-bottom: 8px; font-size: 31px; text-shadow: 0 0 24px var(--plan-glow); }
.membership-preview-description { min-height: 38px; margin: 0 0 18px !important; color: rgba(255,255,255,.48) !important; font-size: 7px !important; line-height: 1.55; }
.membership-plan-preview > strong, .membership-plan-card > strong { color: var(--plan-accent); text-shadow: 0 0 20px var(--plan-glow); }
.membership-plan-preview li::before, .membership-plan-card li::before { color: var(--plan-accent); }
.membership-plan-preview ul, .membership-plan-card ul { border-top-color: var(--plan-line); }
.membership-plan-preview > footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 10px; margin-top: 19px; padding-top: 12px; border-top: 1px solid var(--plan-line); color: rgba(255,255,255,.35); font-size: 6px; letter-spacing: .09em; }
.membership-plan-preview > footer b { color: var(--plan-accent); font-size: 6px; }

.membership-plan-card { --plan-accent: #e1b55f; --plan-line: rgba(222,178,92,.27); --plan-glow: rgba(214,165,75,.32); --plan-background: radial-gradient(circle at 85% 8%,rgba(202,151,58,.25),transparent 28%),linear-gradient(145deg,#24211c,#0e0d0c); border-color: var(--plan-line); background: var(--plan-background); box-shadow: 0 13px 34px rgba(21,16,9,.16),0 0 25px var(--plan-glow); }
.membership-plan-preview .membership-plan-shine, .membership-plan-card .membership-plan-shine { background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--plan-accent) 24%,transparent),transparent); }
.membership-plan-card > div p, .membership-plan-card li b { color: var(--plan-accent); }
.membership-plan-card > footer button { border-color: var(--plan-line); }
.membership-plan-card > footer button:last-child { background: color-mix(in srgb,var(--plan-accent) 12%,transparent); color: var(--plan-accent); }
.theme-classic { --plan-accent: #e3b966; --particle-secondary: #fff0b8; --plan-line: rgba(226,183,101,.31); --plan-glow: rgba(217,168,76,.34); --plan-background: radial-gradient(circle at 86% 9%,rgba(211,159,63,.28),transparent 29%),linear-gradient(145deg,#25211a,#0d0c0b); }
.theme-diamond { --plan-accent: #87d7ff; --particle-secondary: #e4f8ff; --plan-line: rgba(98,193,245,.34); --plan-glow: rgba(30,155,239,.38); --plan-background: radial-gradient(circle at 80% 5%,rgba(41,168,255,.35),transparent 26%),radial-gradient(circle at 14% 88%,rgba(19,77,181,.32),transparent 34%),linear-gradient(145deg,#092849,#030b18); }
.theme-obsidian { --plan-accent: #c3a0ff; --particle-secondary: #7f4dff; --plan-line: rgba(164,111,239,.34); --plan-glow: rgba(119,55,220,.38); --plan-background: radial-gradient(circle at 82% 7%,rgba(116,55,207,.32),transparent 29%),linear-gradient(145deg,#211536,#08060d); }
.theme-ruby { --plan-accent: #ff9a9a; --particle-secondary: #ffcf9e; --plan-line: rgba(234,87,87,.34); --plan-glow: rgba(215,38,61,.38); --plan-background: radial-gradient(circle at 83% 8%,rgba(233,59,78,.34),transparent 28%),linear-gradient(145deg,#3a0e17,#110307); }
.theme-platinum { --plan-accent: #edf7ff; --particle-secondary: #a9d8ee; --plan-line: rgba(205,226,239,.34); --plan-glow: rgba(178,217,237,.3); --plan-background: radial-gradient(circle at 83% 8%,rgba(230,245,255,.26),transparent 27%),linear-gradient(145deg,#3d4650,#12161b); }

.membership-theme-fx { position: absolute !important; z-index: 0 !important; inset: 0; display: block; overflow: hidden; pointer-events: none; }
.membership-theme-fx i, .membership-theme-fx b, .membership-theme-fx em { position: absolute; display: block; }
.theme-classic .membership-theme-fx i { width: 4px; height: 4px; border-radius: 50%; background: #f2ca77; box-shadow: 0 0 12px #d49e3d; animation: membershipGoldDust 5.5s ease-in-out infinite; }
.theme-classic .membership-theme-fx i:nth-child(1) { top: 24%; left: 18%; }
.theme-classic .membership-theme-fx i:nth-child(2) { top: 15%; right: 20%; animation-delay: -2s; }
.theme-classic .membership-theme-fx i:nth-child(3) { right: 29%; bottom: 19%; animation-delay: -4s; }
.theme-diamond .membership-theme-fx i, .theme-ruby .membership-theme-fx i, .theme-obsidian .membership-theme-fx i { width: 39px; height: 39px; background: linear-gradient(135deg,rgba(255,255,255,.76),var(--plan-accent) 34%,rgba(255,255,255,.08) 70%); clip-path: polygon(50% 0,88% 28%,72% 78%,50% 100%,28% 78%,12% 28%); filter: drop-shadow(0 0 13px var(--plan-accent)); opacity: .38; animation: membershipGemFloat 6s ease-in-out infinite; }
.theme-diamond .membership-theme-fx i:nth-child(1), .theme-ruby .membership-theme-fx i:nth-child(1), .theme-obsidian .membership-theme-fx i:nth-child(1) { top: 13%; right: 12%; }
.theme-diamond .membership-theme-fx i:nth-child(2), .theme-ruby .membership-theme-fx i:nth-child(2), .theme-obsidian .membership-theme-fx i:nth-child(2) { width: 20px; height: 20px; right: 34%; bottom: 19%; animation-delay: -2.4s; }
.theme-diamond .membership-theme-fx i:nth-child(3), .theme-ruby .membership-theme-fx i:nth-child(3), .theme-obsidian .membership-theme-fx i:nth-child(3) { width: 13px; height: 13px; top: 38%; left: 9%; animation-delay: -4s; }
.theme-diamond .membership-theme-fx b, .theme-diamond .membership-theme-fx em { right: -25%; width: 65%; height: 1px; background: linear-gradient(90deg,transparent,rgba(104,207,255,.75),transparent); filter: drop-shadow(0 0 5px #2aa9f5); transform: rotate(-18deg); animation: membershipBlueTrail 4.8s linear infinite; }
.theme-diamond .membership-theme-fx b { top: 21%; }
.theme-diamond .membership-theme-fx em { top: 31%; animation-delay: -2.4s; }
.theme-obsidian .membership-theme-fx i { clip-path: polygon(50% 0,95% 88%,62% 68%,47% 100%,18% 56%); }
.theme-ruby .membership-theme-fx b { top: 10%; right: 8%; width: 90px; height: 90px; border: 1px solid rgba(255,93,105,.18); border-radius: 50%; box-shadow: 0 0 34px rgba(226,45,68,.2); animation: membershipRubyPulse 3.6s ease-in-out infinite; }
.theme-platinum .membership-theme-fx i { top: 10%; right: 5%; width: 115px; height: 115px; border: 1px solid rgba(227,244,255,.2); border-top-color: rgba(255,255,255,.72); border-bottom-color: transparent; border-radius: 50%; box-shadow: inset 0 0 22px rgba(215,239,255,.08),0 0 22px rgba(215,239,255,.08); animation: membershipPlatinumOrbit 8s linear infinite; }
.theme-platinum .membership-theme-fx i:nth-child(2) { top: 18%; right: 12%; width: 75px; height: 75px; animation-direction: reverse; animation-duration: 5s; }
.theme-platinum .membership-theme-fx i:nth-child(3) { top: 27%; right: 19%; width: 35px; height: 35px; }
.theme-platinum .membership-theme-fx b { top: -30%; left: -20%; width: 22%; height: 160%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform: rotate(18deg); animation: membershipPlatinumSweep 6.5s ease-in-out infinite; }

.membership-particles { position: absolute !important; z-index: 1 !important; inset: -12%; display: block; overflow: hidden; pointer-events: none; contain: layout paint; }
.membership-particles i { --particle-x: 8%; --particle-drift: 28px; --particle-size: 4px; --particle-duration: 8s; --particle-delay: -1s; position: absolute; top: 108%; left: var(--particle-x); width: var(--particle-size); height: var(--particle-size); border-radius: 50%; background: var(--plan-accent); box-shadow: 0 0 8px var(--plan-accent),0 0 18px var(--plan-glow); opacity: 0; animation: membershipParticleRise var(--particle-duration) var(--particle-delay) linear infinite; will-change: transform,opacity; }
.membership-particles i:nth-child(2) { --particle-x: 19%; --particle-drift: -38px; --particle-size: 3px; --particle-duration: 9.3s; --particle-delay: -5.8s; }
.membership-particles i:nth-child(3) { --particle-x: 31%; --particle-drift: 52px; --particle-size: 6px; --particle-duration: 10.4s; --particle-delay: -3.2s; }
.membership-particles i:nth-child(4) { --particle-x: 43%; --particle-drift: -22px; --particle-size: 2px; --particle-duration: 7.6s; --particle-delay: -6.9s; }
.membership-particles i:nth-child(5) { --particle-x: 54%; --particle-drift: 34px; --particle-size: 5px; --particle-duration: 9.8s; --particle-delay: -1.8s; }
.membership-particles i:nth-child(6) { --particle-x: 65%; --particle-drift: -54px; --particle-size: 3px; --particle-duration: 8.7s; --particle-delay: -7.4s; }
.membership-particles i:nth-child(7) { --particle-x: 76%; --particle-drift: 44px; --particle-size: 7px; --particle-duration: 11s; --particle-delay: -4.6s; }
.membership-particles i:nth-child(8) { --particle-x: 87%; --particle-drift: -29px; --particle-size: 3px; --particle-duration: 7.9s; --particle-delay: -2.7s; }
.membership-particles i:nth-child(9) { --particle-x: 14%; --particle-drift: 61px; --particle-size: 2px; --particle-duration: 11.7s; --particle-delay: -9.1s; }
.membership-particles i:nth-child(10) { --particle-x: 38%; --particle-drift: -47px; --particle-size: 4px; --particle-duration: 8.2s; --particle-delay: -4.1s; }
.membership-particles i:nth-child(11) { --particle-x: 61%; --particle-drift: 25px; --particle-size: 3px; --particle-duration: 10.8s; --particle-delay: -8.5s; }
.membership-particles i:nth-child(12) { --particle-x: 92%; --particle-drift: -58px; --particle-size: 5px; --particle-duration: 9s; --particle-delay: -6.1s; }
.membership-particles i:nth-child(3n) { background: var(--particle-secondary); box-shadow: 0 0 9px var(--particle-secondary),0 0 20px var(--plan-glow); }
.theme-diamond .membership-particles i { border-radius: 1px; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); animation-name: membershipDiamondRise; }
.theme-obsidian .membership-particles i { border-radius: 0; clip-path: polygon(50% 0,100% 100%,52% 72%,18% 100%); animation-name: membershipObsidianRise; }
.theme-ruby .membership-particles i { width: calc(var(--particle-size) * .75); height: calc(var(--particle-size) * 1.8); border-radius: 70% 30% 65% 35%; animation-name: membershipRubyRise; }
.theme-platinum .membership-particles i { clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); animation-name: membershipPlatinumRise; }

@keyframes membershipGoldDust { 0%,100% { opacity: .25; transform: translateY(0) scale(.8); } 50% { opacity: 1; transform: translateY(-13px) scale(1.25); } }
@keyframes membershipGemFloat { 0%,100% { transform: translateY(0) rotate(-4deg) scale(.94); } 50% { transform: translateY(-11px) rotate(6deg) scale(1.04); } }
@keyframes membershipBlueTrail { 0% { opacity: 0; transform: translate(0,0) rotate(-18deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-190%,70px) rotate(-18deg); } }
@keyframes membershipRubyPulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.18); } }
@keyframes membershipPlatinumOrbit { to { transform: rotate(360deg); } }
@keyframes membershipPlatinumSweep { 0%,55% { left: -30%; } 85%,100% { left: 125%; } }
@keyframes membershipParticleRise { 0% { opacity: 0; transform: translate3d(0,35px,0) scale(.55); } 12% { opacity: .72; } 64% { opacity: .45; } 100% { opacity: 0; transform: translate3d(var(--particle-drift),-720px,0) scale(1.15); } }
@keyframes membershipDiamondRise { 0% { opacity: 0; transform: translate3d(0,30px,0) rotate(0) scale(.45); } 14% { opacity: .85; } 55% { opacity: .58; } 100% { opacity: 0; transform: translate3d(var(--particle-drift),-720px,0) rotate(420deg) scale(1.25); } }
@keyframes membershipObsidianRise { 0% { opacity: 0; transform: translate3d(0,35px,0) rotate(-22deg) scale(.4); } 18% { opacity: .68; } 52% { opacity: .38; } 100% { opacity: 0; transform: translate3d(var(--particle-drift),-720px,0) rotate(145deg) scale(1.1); } }
@keyframes membershipRubyRise { 0% { opacity: 0; transform: translate3d(0,35px,0) rotate(8deg) scale(.5); } 10% { opacity: .9; } 44% { opacity: .55; } 100% { opacity: 0; transform: translate3d(var(--particle-drift),-720px,0) rotate(-28deg) scale(.85); } }
@keyframes membershipPlatinumRise { 0% { opacity: 0; transform: translate3d(0,30px,0) rotate(0) scale(.3); } 20% { opacity: .8; } 48% { opacity: .35; transform: translate3d(12px,-330px,0) rotate(130deg) scale(1.35); } 100% { opacity: 0; transform: translate3d(var(--particle-drift),-720px,0) rotate(260deg) scale(.55); } }

@media (max-width: 1100px) {
  .loyalty-public { grid-template-columns: 1fr 1fr; gap: 35px; }
  .loyalty-layout { grid-template-columns: 1fr; }
  .loyalty-settings { grid-template-columns: 1fr 1fr; }
  .loyalty-settings > div:first-child, .loyalty-toggle, .loyalty-settings > button, .loyalty-help { grid-column: 1 / -1; }
  .promotion-toolbar { grid-template-columns: 1fr minmax(180px,280px) auto; }
  .gift-card-toolbar { grid-template-columns: 1fr 1fr; }
  .gift-card-toolbar > div { grid-column: 1 / -1; }
  .gift-card-toolbar > button { justify-self: end; }
  .promotion-editor, .gift-card-editor { grid-template-columns: 1fr 1fr; }
  .gift-card-record { grid-template-columns: minmax(280px,.9fr) minmax(280px,1.1fr); }
  .membership-stats { grid-template-columns: 1fr 1fr; }
  .membership-toolbar { grid-template-columns: 1fr auto; }
  .membership-toolbar-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .membership-plan-editor { grid-template-columns: 1fr; }
  .membership-plan-editor > header, .membership-plan-editor > footer { grid-column: auto; }
  .membership-studio-workspace { padding: 4px 24px; }
  .membership-theme-picker { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .membership-plan-preview { position: relative; top: auto; min-height: 370px; margin: 0 24px 5px; }
  .membership-plan-grid { grid-template-columns: 1fr 1fr; }
  .membership-record { grid-template-columns: 1fr 1fr; }
  .membership-record-plan { padding-left: 0; border-left: 0; }
  .membership-actions { grid-column: 1 / -1; }
  .admin-page {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    height: auto;
    padding: 12px 20px;
  }

  .admin-brand {
    padding: 0;
    border: 0;
  }

  .admin-brand img {
    width: 66px;
    height: 66px;
  }

  .admin-sidebar nav {
    display: flex;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .admin-nav-group { display: contents; }
  .admin-nav-group > p { display: none; }

  .admin-account {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: right;
  }

  .admin-account small,
  .admin-account span {
    display: none;
  }

  .admin-account a {
    margin-left: auto;
  }

  .admin-stats {
    grid-template-columns: 1fr 1fr;
  }

  .admin-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .admin-search {
    grid-column: 1 / -1;
  }

  .admin-booking {
    grid-template-columns: 90px 1fr 1fr;
  }

  .booking-state,
  .booking-actions {
    grid-column: auto;
  }

  .booking-actions {
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, 1fr);
  }

  .block-form {
    grid-template-columns: repeat(2, 1fr);
  }

  .block-reason,
  .block-form > button {
    grid-column: 1 / -1;
  }

  .barber-admin-grid { grid-template-columns: 1fr; }
  .barber-bookings article { grid-template-columns: 80px 1fr 1fr; }
  .barber-booking-actions { grid-column: 2 / -1; grid-template-columns: repeat(4, 1fr); }
  .inventory-stats { grid-template-columns: 1fr 1fr; }
  .inventory-list article { grid-template-columns: minmax(190px, 1fr) 100px 130px; }
  .inventory-actions { grid-column: 2 / -1; grid-template-columns: repeat(3, 1fr); }
  .inventory-actions button:first-child { grid-column: auto; }
  .stock-editor { grid-template-columns: 1fr 1fr; }
  .stock-editor > div:first-child, .stock-reason, .stock-editor > div:last-child { grid-column: 1 / -1; }
  .stock-editor > div:last-child { justify-content: flex-end; }
  .sales-stats { grid-template-columns: 1fr 1fr; }
  .pos-layout { grid-template-columns: 1fr; }
  .pos-checkout { position: static; }
  .sales-list article { grid-template-columns: 1fr 1fr 1fr 100px; }
  .sales-list article > button { grid-column: 2 / -1; }
  .customer-stats { grid-template-columns: 1fr 1fr; }
  .customer-toolbar { align-items: stretch; flex-direction: column; }
  .customer-toolbar > label { max-width: none; }
  .customer-layout { grid-template-columns: minmax(290px, .85fr) minmax(0, 1.6fr); }
  .customer-detail > header { grid-template-columns: 60px 1fr; }
  .customer-avatar { width: 58px; height: 58px; }
  .customer-detail header > div:last-child { grid-column: 2; }
  .customer-metrics { grid-template-columns: 1fr 1fr; }
  .customer-metrics article:nth-child(2) { border-right: 0; }
  .customer-metrics article:nth-child(-n+2) { border-bottom: 1px solid rgba(9, 9, 8, .1); }
  .customer-barber-insight { grid-template-columns: 1fr; }
  .customer-notes-grid { grid-template-columns: 1fr; }
  .reminder-stats { grid-template-columns: 1fr 1fr; }
  .reminder-list article { grid-template-columns: 1fr 1fr 120px; }
  .reminder-actions { grid-column: 2 / -1; grid-template-columns: repeat(3, 1fr); }
  .commission-toolbar { align-items: stretch; flex-wrap: wrap; }
  .commission-dates { margin-left: 0; }
  .commission-stats { grid-template-columns: 1fr 1fr; }
  .commission-rates { grid-template-columns: 1fr; }
  .commission-list > label { grid-template-columns: 25px 1fr 1fr 100px; }
  .commission-list label > div:last-child { grid-column: 2 / -1; text-align: left; }
}

@media (max-width: 680px) {
  .identity-picker { grid-template-columns: 1fr; }
  .loyalty-public { grid-template-columns: 1fr; padding: 72px 20px; }
  .loyalty-public-card { min-height: 280px; padding: 26px 21px; border-radius: 20px; }
  .loyalty-public-card .loyalty-stamps { gap: 6px; }
  .loyalty-stamps span { font-size: 17px; }
  .loyalty-hero { grid-template-columns: 1fr; }
  .loyalty-hero > div:first-child { padding: 23px; }
  .loyalty-hero > div:last-child { min-height: 145px; }
  .loyalty-stats { grid-template-columns: 1fr 1fr; }
  .loyalty-settings { grid-template-columns: 1fr; padding: 17px; }
  .loyalty-settings > div:first-child, .loyalty-toggle, .loyalty-settings > button, .loyalty-help { grid-column: auto; }
  .loyalty-members { padding: 15px; }
  .loyalty-members-head { align-items: stretch; flex-direction: column; }
  .loyalty-members-head label { width: 100%; }
  .loyalty-member-main { grid-template-columns: 38px minmax(0,1fr); }
  .loyalty-member-main > b { grid-column: 2; justify-self: start; }
  .loyalty-progress, .loyalty-member-actions { margin-left: 0; }
  .loyalty-member-actions { align-items: stretch; flex-direction: column; }
  .loyalty-member-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .loyalty-center-intro { min-height: 112px; padding: 21px; }
  .loyalty-center-mark { display: none; }
  .loyalty-tabs { grid-template-columns: 1fr; }
  .loyalty-tabs button { grid-template-columns: 26px 1fr; min-height: 61px; }
  .promotion-stats, .gift-card-stats { grid-template-columns: 1fr 1fr; }
  .promotion-toolbar, .gift-card-toolbar { grid-template-columns: 1fr; align-items: stretch; padding: 17px; }
  .promotion-toolbar > button, .gift-card-toolbar > button { justify-self: stretch; }
  .promotion-editor, .gift-card-editor { grid-template-columns: 1fr; padding: 17px; }
  .promotion-editor .wide, .gift-card-editor .wide { grid-column: auto; }
  .promotion-card { grid-template-columns: 1fr; }
  .promotion-card-code { min-height: 92px; }
  .promotion-card-main { grid-template-columns: 1fr; }
  .promotion-usage, .promotion-card > footer { grid-column: 1; }
  .promotion-card > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .gift-card-latest { grid-template-columns: 1fr 30px; }
  .gift-card-latest > button:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .gift-card-latest > button:last-child { grid-column: 2; grid-row: 1; }
  .gift-card-record { grid-template-columns: 1fr; }
  .gift-card-artwork { min-height: 285px; }
  .gift-card-record-info dl { grid-template-columns: 1fr 1fr; }
  .gift-card-record-info > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .gift-redeem-box { grid-template-columns: 1fr; }
  .membership-stats { grid-template-columns: 1fr 1fr; }
  .membership-toolbar { grid-template-columns: 1fr; align-items: stretch; padding: 17px; }
  .membership-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .membership-switch button { justify-content: center; min-height: 42px; }
  .membership-toolbar-actions { grid-column: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .membership-toolbar-actions button { min-height: 44px; }
  .membership-note { align-items: flex-start; }
  .membership-plan-editor, .membership-enrolment { grid-template-columns: 1fr; }
  .membership-plan-editor { padding: 0; }
  .membership-enrolment { padding: 17px; }
  .membership-studio-header { padding: 19px 17px 16px !important; }
  .membership-studio-header p { font-size: 9px; }
  .membership-studio-steps { gap: 5px; margin-top: 15px; }
  .membership-studio-steps li { grid-template-columns: 23px 1fr; min-height: 39px; padding: 6px 8px; }
  .membership-studio-steps b { width: 23px; height: 23px; }
  .membership-studio-workspace { padding: 3px 17px; }
  .membership-theme-picker { grid-template-columns: 1fr; }
  .membership-theme-picker > button { grid-template: 26px 26px / 82px minmax(0,1fr) auto; align-items: center; gap: 1px 10px; min-height: 83px; }
  .membership-theme-swatch { grid-row: 1 / 3; min-height: 65px; }
  .membership-theme-picker > button > strong { align-self: end; font-size: 14px; }
  .membership-theme-picker > button > small { align-self: start; min-height: 0; }
  .membership-theme-picker > button > b { grid-column: 3; grid-row: 1 / 3; text-align: right; }
  .membership-identity-fields { grid-template-columns: 1fr; }
  .membership-plan-fields { grid-template-columns: 1fr; }
  .membership-plan-editor .membership-plan-fields { grid-template-columns: 1fr; }
  .membership-plan-fields .wide, .membership-enrolment .wide, .membership-enrolment > header, .membership-enrolment > footer { grid-column: auto; }
  .membership-plan-preview { min-height: 390px; margin: 0 17px 5px; }
  .membership-review-step dl > div { grid-template-columns: 82px 1fr; }
  .membership-plan-editor > footer, .membership-enrolment > footer { display: grid; grid-template-columns: 1fr 1fr; }
  .membership-studio-footer { padding: 13px 17px 16px !important; }
  .membership-plan-editor > footer button, .membership-enrolment > footer button { min-height: 44px; }
  .membership-plan-grid { grid-template-columns: 1fr; }
  .membership-plan-card { min-height: 390px; }
  .membership-filters { grid-template-columns: 1fr; }
  .membership-record { grid-template-columns: 1fr; gap: 13px; padding: 15px; }
  .membership-record-dates { padding-top: 11px; border-top: 1px solid rgba(9,9,8,.08); }
  .membership-actions { grid-column: 1; grid-template-columns: 1fr; }
  .membership-action-main, .membership-action-secondary { display: grid; grid-template-columns: 1fr 1fr; }
  .membership-action-secondary { justify-content: stretch; }
  .membership-actions button { min-height: 43px; }
  .membership-action-dialog { padding: 21px 17px; border-radius: 18px; }
  .membership-action-dialog h3 { font-size: 26px; }
  .membership-reactivation-payment { grid-template-columns: 1fr; }
  .membership-reactivation-payment p { grid-column: auto; }
  .membership-action-dialog > footer { grid-template-columns: 1fr; }
  .admin-sidebar {
    grid-template-columns: auto 1fr;
  }

  .admin-sidebar nav {
    justify-content: flex-end;
  }

  .admin-sidebar nav a,
  .admin-sidebar nav button {
    flex: 0 0 auto;
    padding-inline: 9px;
    gap: 5px;
    font-size: 8px;
  }

  .admin-sidebar nav a span,
  .admin-sidebar nav button span {
    font-size: 7px;
  }

  .admin-account { display: flex; grid-column: 1 / -1; justify-content: flex-end; }
  .admin-account small, .admin-account strong, .admin-account span { display: none; }
  .admin-account a { display: inline-flex; align-items: center; min-height: 37px; margin: 0; padding: 0 12px; border: 1px solid rgba(216,174,91,.45); border-radius: 999px; color: #e1ba69; font-size: 8px; text-decoration: none; white-space: nowrap; }
  .admin-header-tools { justify-items: stretch; width: 100%; }
  .admin-visible-session { justify-content: space-between; padding: 10px 12px; border: 1px solid rgba(9,9,8,.11); border-radius: 12px; background: #fff; }
  .admin-visible-session > span { text-align: left; }

  .admin-content {
    padding: 32px 14px 70px;
  }

  .admin-header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-header button {
    width: 100%;
  }

  .admin-stats {
    gap: 8px;
  }

  .admin-stats article {
    min-height: 120px;
    padding: 15px;
  }

  .admin-stats strong {
    font-size: 25px;
  }

  .admin-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-search {
    grid-column: auto;
  }

  .admin-booking {
    grid-template-columns: 78px 1fr;
    gap: 14px;
  }

  .admin-services-list article {
    grid-template-columns: 52px minmax(180px, 1fr) 100px 120px;
  }

  .service-admin-actions {
    grid-column: 2 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .booking-service,
  .booking-state,
  .booking-actions {
    grid-column: 2;
  }

  .booking-actions {
    grid-template-columns: 1fr;
  }

  .services-admin-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .services-admin-intro > button {
    width: 100%;
  }

  .service-editor-grid {
    grid-template-columns: 1fr;
  }

  .service-field-wide {
    grid-column: auto;
  }

  .admin-services-list article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
  }

  .service-admin-meta,
  .service-admin-actions {
    grid-column: 2;
  }

  .service-admin-actions {
    grid-template-columns: 1fr 1fr;
  }

  .schedule-barbers { grid-template-columns: 1fr; }
  .weekly-schedule, .blocks-admin { padding: 16px; }
  .schedule-section-heading { align-items: stretch; flex-direction: column; }
  .schedule-section-heading > button { width: 100%; }
  .schedule-days article { grid-template-columns: 1fr; gap: 12px; }
  .day-hours { justify-content: flex-start; }
  .closed-label { justify-self: start; }
  .block-form { grid-template-columns: 1fr; }
  .block-reason, .block-form > button { grid-column: auto; }
  .blocks-list article { grid-template-columns: 1fr auto; }
  .blocks-list article p { grid-column: 1; }
  .blocks-list article button { grid-column: 2; grid-row: 1 / 3; }

  .barber-editor-layout { grid-template-columns: 1fr; }
  .photo-editor { justify-items: center; }
  .barber-fields { grid-template-columns: 1fr; }
  .barber-bio { grid-column: auto; }
  .barber-admin-grid article { grid-template-columns: 72px 1fr; }
  .barber-card-photo { width: 68px; height: 68px; }
  .barber-admin-grid .service-admin-actions { grid-column: 2; }
  .barber-portal-header { align-items: stretch; flex-direction: column; }
  .barber-portal-header nav a { flex: 1; text-align: center; }
  .barber-portal-stats { grid-template-columns: 1fr 1fr; }
  .barber-portal-stats article:last-child { grid-column: 1 / -1; }
  .barber-bookings article { grid-template-columns: 68px 1fr; }
  .barber-booking-service, .barber-booking-actions { grid-column: 2; }
  .barber-booking-actions { grid-template-columns: 1fr 1fr; }
  .push-control { grid-template-columns: 38px minmax(0, 1fr); }
  .push-control-icon { width: 38px; height: 38px; }
  .push-control-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .push-control-actions button:first-child:last-child { grid-column: 1 / -1; }
  .inventory-heading { align-items: stretch; flex-direction: column; }
  .inventory-heading > button { width: 100%; }
  .inventory-fields { grid-template-columns: 1fr; }
  .inventory-list article { grid-template-columns: 1fr 80px; }
  .inventory-price { grid-column: 1; }
  .inventory-actions { grid-column: 1 / -1; }
  .movement-history article { grid-template-columns: 46px 1fr; }
  .movement-history article > div:last-child { grid-column: 2; text-align: left; }
  .sales-stats { gap: 8px; }
  .sales-stats article { min-height: 110px; padding: 14px; }
  .sales-stats strong { font-size: 20px; }
  .pos-builder, .pos-checkout { padding: 17px; }
  .pos-heading { align-items: start; flex-direction: column; }
  .pos-customer-grid, .pos-adders { grid-template-columns: 1fr; }
  .pos-customer-grid .wide { grid-column: auto; }
  .pos-identity { grid-template-columns: 1fr; }
  .pos-identity > aside { grid-column: auto; }
  .pos-booking-source { grid-template-columns: 32px minmax(0, 1fr); }
  .pos-booking-source > b { grid-column: 2; justify-self: start; }
  .pos-cart article { grid-template-columns: minmax(0, 1fr) auto; }
  .pos-cart article > strong { grid-column: 1 / -1; }
  .sales-list article { grid-template-columns: 1fr 1fr; }
  .sales-list article > button { grid-column: 1 / -1; }
  .sale-total { text-align: left; }
  .customer-heading { align-items: stretch; flex-direction: column; }
  .customer-heading > button { width: 100%; }
  .customer-fields { grid-template-columns: 1fr; }
  .customer-fields .customer-wide { grid-column: auto; }
  .customer-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .customer-layout { grid-template-columns: 1fr; }
  .customer-list { max-height: 370px; overflow-y: auto; border-right: 0; border-bottom: 1px solid rgba(9, 9, 8, .12); }
  .customer-list.customer-barber-groups { max-height: none; overflow: visible; }
  .customer-barber-trigger { grid-template-columns: 46px minmax(0, 1fr) 48px 25px; padding-inline: 12px; }
  .customer-barber-insight dl { grid-template-columns: 1fr; }
  .customer-barber-insight dl > div { padding: 7px 0 0; border-top: 1px solid rgba(9, 9, 8, .1); border-left: 0; }
  .customer-detail { padding: 16px; }
  .customer-detail > header { grid-template-columns: 52px 1fr; }
  .customer-avatar { width: 50px; height: 50px; font-size: 15px; }
  .customer-detail header h2 { font-size: 23px; }
  .customer-detail header > div:last-child { grid-column: 1 / -1; }
  .customer-next { grid-template-columns: 1fr; }
  .customer-timeline > article { grid-template-columns: 32px 1fr; }
  .customer-timeline article > div:last-child { grid-column: 2; text-align: left; }
  .integration-card { grid-template-columns: 1fr; }
  .reminder-heading { align-items: stretch; flex-direction: column; }
  .reminder-heading > div:last-child { align-items: stretch; flex-direction: column; }
  .reminder-template { grid-template-columns: 1fr; }
  .reminder-template > div:last-child { grid-template-columns: 1fr 1fr; }
  .reminder-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .reminder-list article { grid-template-columns: 1fr; }
  .reminder-actions { grid-column: auto; grid-template-columns: 1fr; }
  .reminder-actions > small { text-align: left; }
  .commission-toolbar { flex-direction: column; }
  .commission-toolbar > label { min-width: 0; }
  .commission-toolbar > div[role="group"] { display: grid; grid-template-columns: 1fr 1fr; }
  .commission-dates { display: grid; grid-template-columns: 1fr auto 1fr; }
  .commission-stats { gap: 8px; }
  .commission-stats article { min-height: 108px; padding: 14px; }
  .commission-stats strong { font-size: 19px; }
  .commission-rates { padding: 17px; }
  .rate-summary, .rate-editor { grid-template-columns: 1fr 1fr; }
  .rate-summary button, .rate-editor > button { grid-column: span 2; }
  .commission-list > label { grid-template-columns: 22px 1fr; }
  .commission-list label > div:nth-of-type(n+2) { grid-column: 2; }
  .payout-box { position: static; grid-template-columns: 1fr; }
  .payout-history > div:last-child article { grid-template-columns: 1fr auto; }
  .payout-history article > div:nth-child(2) { grid-column: 1; }
  .payout-history article > strong { grid-column: 2; grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Pago online de servicios */
.booking-payment-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; padding: 0; border: 0; }
.booking-payment-picker legend { grid-column: 1 / -1; margin-bottom: 3px; color: #777168; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.booking-payment-picker > label { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 12px 14px; border: 1px solid rgba(9,9,8,.14); border-radius: 8px; background: #fff; cursor: pointer; }
.booking-payment-picker > label.active { border-color: #a77a2c; background: #f3ead8; box-shadow: inset 0 0 0 1px rgba(167,122,44,.22); }
.booking-payment-picker input { width: auto; accent-color: #9b7027; }
.booking-payment-picker label > span { display: grid; gap: 4px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.booking-payment-picker strong { font-size: 10px; }
.booking-payment-picker small { color: #716b61; font-size: 8px; font-weight: 400; line-height: 1.4; }
.booking-payment-result { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; margin-top: 17px; padding: 15px; border: 1px solid rgba(9,9,8,.12); border-radius: 14px; background: #f3f0e9; text-align: left; }
.booking-payment-result > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #6d675e; color: #fff; font-weight: 800; }
.booking-payment-result > div { display: grid; gap: 4px; }
.booking-payment-result strong { font-size: 10px; }
.booking-payment-result small { color: #6f6a61; font-size: 8px; line-height: 1.5; }
.booking-payment-result.paid { border-color: rgba(50,125,69,.28); background: #e8f2e9; }
.booking-payment-result.paid > span { background: #2f7540; }
.booking-payment-result.pending { border-color: rgba(172,126,43,.3); background: #f3ead7; }
.booking-payment-result.pending > span { background: #a1762d; }
.booking-online-paid, .booking-payment-pending { width: max-content; padding: 5px 7px; border-radius: 99px; font-size: 8px; font-weight: 750; }
.booking-online-paid { background: #deefe2; color: #26633a; }
.booking-payment-pending { background: #f3e8d2; color: #806022; }
.booking-refund-note { color: #8a4e2b; font-size: 8px; line-height: 1.35; }
.status-pill.pending_payment { background: #f3e8d2; color: #806022; }
.pos-online-paid { display: grid; grid-template-columns: 31px 1fr; gap: 10px; margin: 10px 0 4px; padding: 12px; border: 1px solid rgba(50,125,69,.26); background: #e5f0e7; }
.pos-online-paid > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #2f7540; color: white; }
.pos-online-paid > div { display: grid; gap: 3px; }
.pos-online-paid strong { font-size: 9px; }
.pos-online-paid small { color: #5e7162; font-size: 8px; }

@media (max-width: 720px) {
  .booking-payment-picker { grid-template-columns: 1fr; }
  .booking-payment-picker legend { grid-column: auto; }
}

/* Movimiento y reservas inspiradas en productos SaaS de agenda, con identidad Leveling */
@keyframes leveling-enter-down {
  from { transform: translateY(-22px); }
  to { transform: translateY(0); }
}

@keyframes leveling-enter-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes leveling-panel-in {
  from { opacity: 0; transform: translateX(18px) scale(.992); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes leveling-glow {
  0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1); opacity: .34; }
  50% { transform: translate3d(4%, 3%, 0) scale(1.08); opacity: .54; }
}

.hero h1 { animation: leveling-enter-down .72s cubic-bezier(.16, 1, .3, 1) both; }
.hero-lede { animation: leveling-enter-up .78s cubic-bezier(.16, 1, .3, 1) 55ms both; }
.hero-actions { animation: leveling-enter-up .82s cubic-bezier(.16, 1, .3, 1) 110ms both; }
.hero-assurances { animation: leveling-enter-up .86s cubic-bezier(.16, 1, .3, 1) 165ms both; }
.hero-media { animation: hero-breathe 16s ease-in-out infinite alternate; }

@keyframes hero-breathe {
  from { transform: scale(1.01); }
  to { transform: scale(1.055); }
}

.agenda-section::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  width: min(78vw, 1050px);
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 158, 70, .15), rgba(206, 158, 70, 0) 68%);
  filter: blur(18px);
  pointer-events: none;
  animation: leveling-glow 9s ease-in-out infinite;
}

.booking-fast-note {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 35px rgba(47, 33, 13, .06);
}

.booking-app {
  position: relative;
  z-index: 1;
  border-color: rgba(121, 87, 31, .19);
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(40, 28, 11, .15), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.wizard-progress {
  gap: 8px;
  margin-bottom: 34px;
  padding: 11px 14px;
  border-bottom-color: rgba(9, 9, 8, .08);
  background: rgba(239, 234, 223, .72);
}

.wizard-progress button {
  min-height: 50px;
  border-right: 0;
  border-radius: 999px;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.wizard-progress button.active {
  background: #fff;
  box-shadow: 0 9px 24px rgba(39, 27, 10, .09), inset 0 0 0 1px rgba(156, 113, 39, .18);
  transform: translateY(-1px);
}

.wizard-progress button.complete { background: rgba(210, 173, 101, .12); }
.wizard-panel { animation: leveling-panel-in .62s cubic-bezier(.16, 1, .3, 1) both; }

.wizard-service-grid button,
.barber-grid button,
.date-strip button,
.time-grid button {
  will-change: transform;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, box-shadow .32s ease, background-color .25s ease, color .25s ease;
}

.wizard-service-grid button:hover { transform: translateY(-7px) scale(1.008); box-shadow: 0 22px 42px rgba(54, 39, 16, .13); }
.wizard-service-grid button:active,
.barber-grid button:active,
.date-strip button:active,
.time-grid button:active { transform: scale(.975); transition-duration: .1s; }
.barber-grid button:hover { transform: translateX(7px); box-shadow: 0 12px 28px rgba(54, 39, 16, .09); }
.date-strip button:hover { transform: translateY(-3px); border-color: #b38535; }
.time-grid button:hover { transform: translateY(-3px); box-shadow: 0 9px 20px rgba(38, 27, 11, .09); }
.wizard-next { border-radius: 999px; box-shadow: 0 11px 24px rgba(169, 123, 45, .22); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, background .25s ease; }
.wizard-next:hover:not(:disabled) { transform: translateY(-3px); background: var(--gold-bright); box-shadow: 0 16px 30px rgba(169, 123, 45, .3); }
.wizard-next:active:not(:disabled) { transform: scale(.98); }

@supports (animation-timeline: view()) {
  .agenda-heading,
  .booking-fast-note,
  .booking-app {
    animation: leveling-enter-up linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
  }
}

/* Estado de Google Calendar en el panel */
.calendar-integration {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 8, .1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(38, 29, 15, .07);
}
.calendar-integration.connected { border-color: rgba(44, 126, 67, .22); background: linear-gradient(110deg, #fff, #eef7f0); }
.calendar-integration.warning { border-color: rgba(184, 124, 38, .26); background: linear-gradient(110deg, #fff, #fbf3e7); }
.calendar-integration.pending { background: linear-gradient(110deg, #fff, #f5f1e8); }
.calendar-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: conic-gradient(from 20deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4); color: #fff; font-size: 22px; font-weight: 850; box-shadow: 0 10px 24px rgba(66, 133, 244, .2); }
.calendar-integration-copy { display: grid; gap: 4px; }
.calendar-integration-copy > span { color: #8c6725; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.calendar-integration-copy h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; }
.calendar-integration-copy p { max-width: 720px; margin: 2px 0 0; color: #6e6960; font-size: 9px; line-height: 1.55; }
.calendar-error { color: #9a3b31; font-size: 8px; }
.calendar-integration-stats { display: flex; align-items: center; gap: 16px; }
.calendar-integration-stats > div { display: grid; gap: 2px; min-width: 60px; text-align: center; }
.calendar-integration-stats strong { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.calendar-integration-stats span { color: #79736a; font-size: 7px; text-transform: uppercase; }
.calendar-integration-stats button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; font-size: 8px; font-weight: 750; }
.calendar-setup-steps { display: flex; gap: 10px; }
.calendar-setup-steps span { display: flex; align-items: center; gap: 7px; color: #6e6960; font-size: 8px; white-space: nowrap; }
.calendar-setup-steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--gold-bright); font-family: Georgia, "Times New Roman", serif; }
.calendar-sync-badge { width: max-content; padding: 5px 7px; border-radius: 99px; font-size: 7px; font-weight: 750; }
.calendar-sync-badge.synced { background: #e1f0e5; color: #28623b; }
.calendar-sync-badge.failed { background: #f6e5e1; color: #8b362c; }
.calendar-sync-badge.pending,
.calendar-sync-badge.not_configured { background: #f3ead8; color: #806022; }

@media (max-width: 900px) {
  .calendar-integration { grid-template-columns: 48px 1fr; }
  .calendar-integration-stats,
  .calendar-setup-steps { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 800px) {
  .booking-fast-note { border-radius: 18px; }
  .booking-app { border-radius: 20px; }
  .wizard-panel { animation-duration: .5s; }
  .wizard-service-grid button:hover,
  .barber-grid button:hover,
  .date-strip button:hover,
  .time-grid button:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero-lede,
  .hero-actions,
  .hero-assurances,
  .hero-media,
  .agenda-section::before,
  .wizard-panel,
  .agenda-heading,
  .booking-fast-note,
  .booking-app { animation: none !important; }
  .wizard-service-grid button,
  .barber-grid button,
  .date-strip button,
  .time-grid button,
  .wizard-next { transition-duration: .01ms !important; }
}

/* Entrada rápida para reservas recibidas por WhatsApp y bloqueos */
.admin-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-header .header-action.whatsapp { border-color: #1f8f54; background: #1f8f54; color: #fff; }
.admin-header .header-action.whatsapp:hover { border-color: #177744; background: #177744; color: #fff; }
.admin-header .header-action.block { border-color: rgba(151, 108, 38, .4); background: #f5ecdc; color: #76531c; }
.booking-service-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.booking-source-badge { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; font-size: 7px !important; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.booking-source-badge.web { background: #e9e6df; color: #666159; }
.booking-source-badge.whatsapp { background: #dff1e5; color: #1e7144; }
.booking-source-badge.admin { background: #f1e7d5; color: #7b5920; }

.quick-agenda-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 9, 7, .64);
  backdrop-filter: blur(9px);
  animation: quick-overlay-in .22s ease both;
}
.quick-agenda-dialog {
  width: min(940px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(216, 174, 91, .32);
  border-radius: 22px;
  background: #f8f6f0;
  box-shadow: 0 35px 110px rgba(0, 0, 0, .34);
  animation: quick-dialog-in .42s cubic-bezier(.16, 1, .3, 1) both;
}
.quick-agenda-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 27px 18px; border-bottom: 1px solid rgba(9, 9, 8, .1); background: #11110f; color: #fff; }
.quick-agenda-dialog > header span { color: var(--gold-bright); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.quick-agenda-dialog > header h2 { margin: 5px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 3vw, 34px); font-weight: 400; }
.quick-agenda-close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; font-size: 24px; line-height: 1; }
.quick-agenda-close:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.quick-agenda-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; background: #eae5da; }
.quick-agenda-tabs button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: #716b61; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.quick-agenda-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 7px 18px rgba(40, 29, 13, .08); }
.quick-agenda-form { display: grid; gap: 18px; padding: 24px 27px 27px; }
.quick-agenda-guide { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid rgba(133, 94, 31, .14); border-radius: 12px; background: #f1eadc; color: #6d665d; font-size: 8px; }
.quick-agenda-guide b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--gold-bright); font-family: Georgia, "Times New Roman", serif; }
.quick-agenda-form fieldset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 0; padding: 18px; border: 1px solid rgba(9, 9, 8, .12); border-radius: 14px; background: #fff; }
.quick-agenda-form legend { padding: 0 8px; color: #8a6424; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.quick-agenda-form label, .quick-time-field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.quick-agenda-form label > span, .quick-time-field > span { color: #777168; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.quick-agenda-form label i { font-weight: 400; text-transform: none; }
.quick-agenda-form input, .quick-agenda-form select, .quick-agenda-form textarea { width: 100%; border: 1px solid rgba(9, 9, 8, .16); border-radius: 8px; background: #fbfaf7; color: var(--ink); font: inherit; font-size: 10px; }
.quick-agenda-form input, .quick-agenda-form select { height: 43px; padding: 0 11px; }
.quick-agenda-form textarea { padding: 11px; resize: vertical; }
.quick-agenda-form.whatsapp fieldset:first-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-date-picker { grid-column: 1 / -1; display: grid; gap: 12px; padding: 17px; overflow: hidden; border: 1px solid rgba(151,108,36,.2); border-radius: 16px; background: linear-gradient(145deg,#f9f6ef,#eee5d4); box-shadow: inset 0 1px rgba(255,255,255,.8); }
.quick-date-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.quick-date-header > div { display: grid; gap: 4px; }
.quick-date-header > div span { color: #8b6729; font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.quick-date-header > div strong { font-family: Georgia,"Times New Roman",serif; font-size: 17px; font-weight: 400; text-transform: capitalize; }
.quick-date-header nav { display: grid; grid-template-columns: 34px minmax(130px,auto) 34px; align-items: center; gap: 8px; }
.quick-date-header nav b { color: #2f2b25; font-family: Georgia,"Times New Roman",serif; font-size: 14px; font-weight: 400; text-align: center; text-transform: capitalize; }
.quick-date-header nav button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(9,9,8,.14); border-radius: 50%; background: rgba(255,255,255,.78); color: #6f5426; cursor: pointer; transition: border-color .18s ease,background .18s ease,transform .18s ease; }
.quick-date-header nav button:hover:not(:disabled) { transform: translateY(-1px); border-color: #9e7126; background: #fff; }
.quick-date-header nav button:disabled { cursor: not-allowed; opacity: .32; }
.quick-date-weekdays,.quick-date-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.quick-date-weekdays span { padding: 4px 0 1px; color: #908779; font-size: 7px; font-weight: 850; text-align: center; }
.quick-date-days > button,.quick-date-days > span { min-height: 39px; }
.quick-date-days > button { position: relative; border: 1px solid rgba(9,9,8,.1); border-radius: 10px; background: rgba(255,255,255,.72); color: #37322c; cursor: pointer; font-size: 10px; font-weight: 750; transition: border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease; }
.quick-date-days > button:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(158,113,38,.55); background: #fff; }
.quick-date-days > button.selected { border-color: #181713; background: #181713; color: var(--gold-bright); box-shadow: 0 8px 20px rgba(28,22,13,.18); }
.quick-date-days > button.today::after { position: absolute; bottom: 5px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #aa7725; content: ""; transform: translateX(-50%); }
.quick-date-days > button.selected.today::after { background: var(--gold-bright); }
.quick-date-days > button:disabled { cursor: not-allowed; opacity: .24; }
.quick-form-wide { grid-column: 1 / -1; }
.quick-time-field { grid-column: 1 / -1; }
.quick-time-field > small { padding: 11px; border-radius: 8px; background: #f1eee7; color: #716b61; font-size: 9px; }
.quick-time-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.quick-time-grid button { min-height: 36px; border: 1px solid rgba(9, 9, 8, .14); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; font-size: 9px; font-weight: 750; }
.quick-time-grid button:hover, .quick-time-grid button.active { border-color: #9e7126; background: #1a1916; color: var(--gold-bright); transform: translateY(-1px); }
.quick-service-summary { grid-column: 1 / -1; margin: 0; color: #706a60; font-size: 9px; }
.quick-consent { display: flex !important; grid-template-columns: auto 1fr; align-items: center !important; padding: 12px; border-radius: 8px; background: #f1eee7; }
.quick-consent input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: #94702d; }
.quick-consent span { letter-spacing: 0 !important; line-height: 1.5; text-transform: none !important; }
.quick-agenda-form > footer { display: flex; justify-content: flex-end; gap: 8px; }
.quick-agenda-form > footer button, .quick-agenda-success button, .quick-agenda-success a { min-height: 42px; padding: 0 17px; border: 1px solid rgba(9,9,8,.2); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font-size: 9px; font-weight: 800; text-decoration: none; }
.quick-agenda-form > footer button.primary { border-color: var(--ink); background: var(--ink); color: var(--gold-bright); }
.quick-agenda-form > footer button:disabled { cursor: not-allowed; opacity: .45; }
.quick-block-intro { margin: 0; padding: 14px 16px; border-left: 3px solid #ae7b2c; background: #f1eadc; color: #6b655c; font-size: 10px; line-height: 1.6; }
.quick-agenda-success { display: grid; justify-items: center; gap: 8px; padding: 46px 28px 50px; text-align: center; }
.quick-agenda-success > span { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: #1f8f54; color: #fff; font-size: 28px; box-shadow: 0 14px 35px rgba(31,143,84,.24); }
.quick-agenda-success h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; }
.quick-agenda-success p { margin: 0; color: #4f4a43; font-size: 11px; text-transform: capitalize; }
.quick-agenda-success small { max-width: 550px; margin: 6px 0 12px; color: #777168; font-size: 9px; line-height: 1.6; }
.quick-agenda-success a { display: inline-flex; align-items: center; border-color: #1f8f54; background: #1f8f54; color: #fff; }
.booking-editor-dialog { max-width: 940px; }
.booking-editor-form { background: radial-gradient(circle at 90% 0, rgba(191,145,57,.08), transparent 28%), #f5f1e8; }
.booking-editor-summary { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.booking-editor-summary > div,
.booking-editor-summary > p { display: grid; align-content: center; gap: 4px; min-height: 82px; margin: 0; padding: 15px 18px; border: 1px solid rgba(185,137,49,.2); border-radius: 14px; background: linear-gradient(145deg, #242119, #0e0e0c); color: #fff; box-shadow: 0 12px 28px rgba(28,22,13,.12); }
.booking-editor-summary > div small { color: var(--gold-bright); font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.booking-editor-summary > div strong { font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 400; text-transform: capitalize; }
.booking-editor-summary > div span { color: rgba(255,255,255,.62); font-size: 9px; }
.booking-editor-summary > p { grid-template-columns: auto 1fr; grid-template-rows: auto auto; background: linear-gradient(145deg,#fff,#eee5d4); color: var(--ink); box-shadow: none; }
.booking-editor-summary > p::before { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #181713; color: var(--gold-bright); content: "↻"; }
.booking-editor-summary > p b { align-self: end; font-family: Georgia,"Times New Roman",serif; font-size: 14px; font-weight: 400; }
.booking-editor-summary > p span { align-self: start; color: #777168; font-size: 8px; line-height: 1.5; }
.booking-editor-lock { grid-column: 1 / -1; margin: 0; padding: 11px 13px; border-left: 3px solid #b4802c; border-radius: 0 9px 9px 0; background: #f4ead7; color: #665c4c; font-size: 8px; line-height: 1.55; }
.booking-editor-form select:disabled { cursor: not-allowed; opacity: .72; }
.admin-booking .booking-actions button.edit-booking { border-color: rgba(164,116,36,.38); background: #fbf4e7; color: #7b561e; }
.admin-booking .booking-actions button.edit-booking:hover { border-color: #9e7126; background: #f2e1bd; }

@keyframes quick-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes quick-dialog-in { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) {
  .quick-agenda-form fieldset { grid-template-columns: 1fr 1fr; }
  .quick-time-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 680px) {
  .admin-header-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .admin-header-actions button:last-child { grid-column: 1 / -1; }
  .quick-agenda-overlay { align-items: end; padding: 0; }
  .quick-agenda-dialog { max-height: 94vh; border-radius: 20px 20px 0 0; }
  .quick-agenda-dialog > header { padding: 20px 18px 16px; }
  .quick-agenda-form { padding: 18px 14px 24px; }
  .quick-agenda-guide { grid-template-columns: auto 1fr; }
  .quick-agenda-form fieldset { grid-template-columns: 1fr; padding: 15px; }
  .quick-agenda-form.whatsapp fieldset:first-of-type { grid-template-columns: 1fr; }
  .quick-date-picker { grid-column: auto; padding: 13px 10px; border-radius: 13px; }
  .quick-date-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .quick-date-header nav { grid-template-columns: 34px 1fr 34px; }
  .quick-date-days > button,.quick-date-days > span { min-height: 36px; }
  .quick-form-wide, .quick-time-field, .quick-service-summary { grid-column: auto; }
  .quick-time-grid { grid-template-columns: repeat(4, 1fr); }
  .quick-agenda-form > footer { display: grid; grid-template-columns: 1fr 1.4fr; }
  .quick-agenda-form > footer button { width: 100%; }
  .booking-editor-summary { grid-template-columns: 1fr; }
  .booking-editor-summary > div, .booking-editor-summary > p { min-height: 74px; padding: 13px 14px; }
  .booking-editor-lock { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-agenda-overlay, .quick-agenda-dialog { animation: none !important; }
}

/* Acceso privado Leveling */
.staff-login-page { min-height: 100svh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr); background: #f4f1e9; color: #11110f; }
.staff-login-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; padding: clamp(30px, 5vw, 76px); overflow: hidden; background: radial-gradient(circle at 73% 18%, rgba(211,161,68,.2), transparent 28%), linear-gradient(145deg, #171611, #050505 74%); color: #fff; }
.staff-login-brand::after { content: ""; position: absolute; inset: auto -18% -28% 12%; aspect-ratio: 1; border: 1px solid rgba(216,174,91,.18); border-radius: 50%; box-shadow: 0 0 0 52px rgba(216,174,91,.025), 0 0 0 104px rgba(216,174,91,.018); }
.staff-login-brand > * { position: relative; z-index: 1; }
.staff-login-brand > a { width: fit-content; }
.staff-login-brand img { width: clamp(118px, 14vw, 188px); height: auto; }
.staff-login-brand div { max-width: 520px; }
.staff-login-brand p, .change-password-page > section > p { margin: 0 0 14px; color: #d8ae5b; font-size: 9px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.staff-login-brand h1 { margin: 0 0 20px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(43px, 5.3vw, 78px); font-weight: 400; letter-spacing: -.045em; line-height: .94; }
.staff-login-brand div > span { display: block; max-width: 410px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.7; }
.staff-login-brand > small { color: rgba(255,255,255,.42); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.staff-login-panel { display: grid; align-content: center; justify-items: center; gap: 28px; padding: 36px; }
.staff-login-panel > form { display: grid; gap: 20px; width: min(440px, 100%); padding: clamp(30px, 5vw, 54px); border: 1px solid rgba(9,9,8,.11); border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(43,32,14,.09); }
.staff-login-panel header span { color: #a8782a; font-size: 8px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.staff-login-panel header h2 { margin: 8px 0; font-family: Georgia, "Times New Roman", serif; font-size: 38px; font-weight: 400; letter-spacing: -.03em; }
.staff-login-panel header p { margin: 0; color: #777168; font-size: 10px; line-height: 1.6; }
.staff-login-panel label, .change-password-page label, .access-editor label { display: grid; gap: 8px; }
.staff-login-panel label > span, .change-password-page label > span, .access-editor label > span { color: #6f6a61; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.staff-login-panel input, .change-password-page input, .access-editor input { width: 100%; height: 49px; padding: 0 14px; border: 1px solid rgba(9,9,8,.16); border-radius: 10px; outline: 0; background: #faf9f6; color: #11110f; font: inherit; font-size: 11px; }
.staff-login-panel input:focus, .change-password-page input:focus, .access-editor input:focus { border-color: #a8782a; box-shadow: 0 0 0 3px rgba(168,120,42,.1); }
.staff-password-input { position: relative; }
.staff-password-input input { padding-right: 70px; }
.staff-password-input button { position: absolute; top: 5px; right: 5px; height: 39px; padding: 0 12px; border: 0; border-radius: 7px; background: #ece7dd; color: #5e584f; cursor: pointer; font-size: 8px; font-weight: 800; }
.staff-login-submit, .change-password-page form > button { height: 50px; border: 1px solid #161511; border-radius: 999px; background: #161511; color: #e0b65e; cursor: pointer; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.staff-login-submit:hover, .change-password-page form > button:hover { transform: translateY(-1px); box-shadow: 0 12px 25px rgba(0,0,0,.13); }
.staff-login-submit:disabled, .change-password-page form > button:disabled { cursor: wait; opacity: .55; }
.staff-login-panel form > small { color: #969087; font-size: 8px; line-height: 1.5; text-align: center; }
.staff-login-panel > a { color: #6c665d; font-size: 9px; text-decoration: none; }
.staff-login-error { margin: -4px 0 0; padding: 11px 13px; border-left: 3px solid #b94242; border-radius: 5px; background: #fff0f0; color: #8b2c2c; font-size: 9px; line-height: 1.5; }
.change-password-page { min-height: 100svh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 0, rgba(213,168,78,.13), transparent 35%), #10100e; }
.change-password-page > section { width: min(480px, 100%); padding: clamp(30px, 6vw, 55px); border: 1px solid rgba(216,174,91,.22); border-radius: 24px; background: #f8f6f0; box-shadow: 0 35px 100px rgba(0,0,0,.38); }
.change-password-page img { display: block; width: 120px; margin: 0 auto 30px; }
.change-password-page h1 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: 37px; font-weight: 400; letter-spacing: -.03em; }
.change-password-page > section > span { color: #756f65; font-size: 10px; line-height: 1.6; }
.change-password-page form { display: grid; gap: 17px; margin-top: 28px; }

/* Gestión de credenciales */
.staff-access-admin { display: grid; gap: 18px; margin-top: 38px; }
.access-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 28px 30px; border: 1px solid rgba(216,174,91,.23); border-radius: 18px; background: linear-gradient(120deg, #171611, #29251c); color: #fff; }
.access-hero p, .access-section-heading p, .barber-schedule-intro p { margin: 0 0 6px; color: #d8ae5b; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.access-hero h2, .access-section-heading h3, .barber-schedule-intro h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 400; }
.access-hero div > span { display: block; max-width: 620px; margin-top: 9px; color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.6; }
.access-hero > a { flex: 0 0 auto; padding: 12px 16px; border: 1px solid rgba(216,174,91,.55); border-radius: 999px; color: #e1ba6a; font-size: 8px; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.access-admin-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 21px; border: 1px solid rgba(9,9,8,.11); border-radius: 14px; background: #fff; }
.access-icon, .access-barber-avatar { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #171611; color: #e3ba67; font-family: Georgia, "Times New Roman", serif; }
.access-icon { width: 54px; height: 54px; font-size: 24px; }
.access-admin-card small { color: #9a742f; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.access-admin-card h3 { margin: 4px 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; }
.access-admin-card p { margin: 0; color: #746f66; font-size: 9px; }
.access-state { display: flex; align-items: center; gap: 10px; }
.access-state > span { padding: 6px 9px; border-radius: 999px; background: #fff3d8; color: #8f6824; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.access-state > span.active { background: #e6f5eb; color: #247143; }
.access-state button, .access-row-actions button, .access-editor footer button { min-height: 36px; padding: 0 13px; border: 1px solid rgba(9,9,8,.16); border-radius: 999px; background: #fff; color: #24221e; cursor: pointer; font-size: 8px; font-weight: 800; }
.access-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 20px 3px 0; }
.access-section-heading > span { color: #7f796f; font-size: 9px; }
.access-barber-list { display: grid; gap: 8px; }
.access-barber-list article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 15px 18px; border: 1px solid rgba(9,9,8,.1); border-radius: 12px; background: #fff; }
.access-barber-list article.disabled { opacity: .55; }
.access-barber-avatar { width: 45px; height: 45px; font-size: 18px; }
.access-barber-avatar img { width: 100%; height: 100%; object-fit: cover; }
.access-barber-list h4 { margin: 0 0 3px; font-size: 11px; }
.access-barber-list article > div:nth-child(2) > span { display: block; color: #8a847b; font-size: 8px; }
.access-barber-list article > div:nth-child(2) > small { display: block; margin-top: 6px; color: #625e56; font-size: 8px; }
.access-row-actions { display: flex; gap: 6px; }
.access-row-actions button.danger { border-color: #efc6c6; color: #9a3535; }
.access-row-actions button.activate { border-color: #bee1ca; color: #267244; }
.access-row-actions button.permission { border-color: #d4b370; background: #fbf3e3; color: #77551d; }
.access-row-actions button:disabled { cursor: not-allowed; opacity: .45; }
.access-barber-list small.permission-active, .access-barber-list small.permission-off { width: fit-content; margin-top: 5px; padding: 4px 7px; border-radius: 999px; font-size: 7px; font-weight: 800; }
.access-barber-list small.permission-active { background: #e1eee4; color: #2d6840; }
.access-barber-list small.permission-off { background: #eeeae2; color: #7c756a; }
.access-editor-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); }
.access-editor { display: grid; gap: 17px; width: min(460px, 100%); max-height: calc(100svh - 48px); overflow: auto; padding: 25px; border: 1px solid rgba(216,174,91,.24); border-radius: 20px; background: #f8f6f0; box-shadow: 0 35px 100px rgba(0,0,0,.35); }
.access-editor header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.access-editor header span { color: #a6772b; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.access-editor h3 { margin: 5px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; }
.access-editor header > button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(9,9,8,.15); border-radius: 50%; background: transparent; cursor: pointer; font-size: 20px; }
.access-editor label small, .access-editor > p { margin: 0; color: #807a71; font-size: 8px; line-height: 1.5; }
.access-editor footer { display: flex; justify-content: flex-end; gap: 7px; padding-top: 3px; }
.access-editor footer button.primary { border-color: #171611; background: #171611; color: #e1b962; }

/* Portal y disponibilidad del barbero */
.barber-portal-tabs { display: flex; gap: 8px; margin-bottom: 16px; padding: 7px; border: 1px solid rgba(9,9,8,.1); border-radius: 14px; background: #e8e3d9; }
.barber-portal-tabs button { min-height: 43px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: #777168; cursor: pointer; font-size: 9px; font-weight: 850; }
.barber-portal-tabs button span { margin-right: 7px; color: #a77a2e; font-family: Georgia, "Times New Roman", serif; }
.barber-portal-tabs button.active { background: #fff; color: #11110f; box-shadow: 0 7px 18px rgba(38,29,14,.08); }
.barber-schedule-panel { display: grid; gap: 16px; }
.barber-schedule-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 21px 24px; border-radius: 14px; background: #161511; color: #fff; }
.barber-schedule-intro > span { max-width: 420px; color: rgba(255,255,255,.54); font-size: 9px; line-height: 1.55; text-align: right; }
.barber-schedule-panel .weekly-schedule, .barber-schedule-panel .blocks-admin { margin: 0; }

@media (max-width: 820px) {
  .staff-login-page { grid-template-columns: 1fr; }
  .staff-login-brand { min-height: 340px; padding: 28px; }
  .staff-login-brand h1 { font-size: 44px; }
  .staff-login-brand > small { display: none; }
  .staff-login-panel { padding: 26px 16px 46px; }
  .access-hero, .access-section-heading, .barber-schedule-intro, .waitlist-admin-hero, .barber-waitlist-panel > header { align-items: stretch; flex-direction: column; }
  .barber-schedule-intro > span, .barber-waitlist-panel > header > span { max-width: none; text-align: left; }
  .access-admin-card, .access-barber-list article { grid-template-columns: auto 1fr; }
  .access-state, .access-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .waitlist-toolbar, .waitlist-invite, .waitlist-invite form { grid-template-columns: 1fr; }
  .waitlist-invite > button { width: 100%; }
  .waitlist-invite form .waitlist-consent, .waitlist-invite form .wizard-error, .waitlist-invite form > div { grid-column: auto; }
  .barber-waitlist-list article { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .barber-history-permission { align-items: flex-start; flex-direction: column; }
  .barber-history-permission span { text-align: left; }
  .customer-delete-dialog { padding: 20px 16px; }
  .customer-delete-dialog footer { grid-template-columns: 1fr; }
  .staff-login-brand { min-height: 300px; }
  .staff-login-brand div > span { display: none; }
  .staff-login-panel > form { padding: 28px 20px; border-radius: 18px; }
  .access-hero { padding: 22px 19px; }
  .access-hero > a { text-align: center; }
  .access-admin-card, .access-barber-list article { grid-template-columns: 1fr; }
  .access-icon, .access-barber-avatar { width: 42px; height: 42px; }
  .access-state, .access-row-actions { grid-column: auto; justify-content: stretch; flex-direction: column; }
  .access-state button, .access-row-actions button { width: 100%; }
  .barber-portal-tabs { display: grid; grid-template-columns: 1fr; }
  .barber-portal-tabs button { padding: 0 8px; }
  .barber-schedule-intro { padding: 19px; }
  .waitlist-list > article { grid-template-columns: 1fr; }
  .waitlist-status { justify-self: start; }
  .waitlist-actions { display: grid; grid-column: auto; justify-content: stretch; }
  .waitlist-actions a, .waitlist-actions button, .barber-waitlist-list a, .barber-waitlist-list button { width: 100%; }
  .barber-waitlist-list article > div:last-child { display: grid; }
  .waitlist-admin-hero, .barber-waitlist-panel > header { padding: 20px 18px; }
}

/* Portada premium: tarjetas editoriales y destello dorado en movimiento */
@keyframes leveling-gold-sweep {
  0%, 12% { opacity: 0; transform: translate3d(-30%, 0, 0) skewX(-18deg); }
  19% { opacity: .72; }
  38% { opacity: 0; transform: translate3d(430%, 0, 0) skewX(-18deg); }
  100% { opacity: 0; transform: translate3d(430%, 0, 0) skewX(-18deg); }
}

.gold-motion-card,
.experience-points article,
.product-items > div,
.wizard-service-grid button,
.barber-grid button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gold-motion-card::before,
.experience-points article::before,
.product-items > div::before,
.wizard-service-grid button::after,
.barber-grid button::after {
  position: absolute;
  z-index: 0;
  top: -45%;
  bottom: -45%;
  left: -42%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(245, 210, 137, .2), rgba(255, 238, 193, .58), rgba(205, 151, 56, .2), transparent);
  content: "";
  pointer-events: none;
  transform: translate3d(-30%, 0, 0) skewX(-18deg);
  animation: leveling-gold-sweep 7.5s cubic-bezier(.2, .65, .3, 1) infinite;
}

.gold-motion-card > *,
.experience-points article > *,
.product-items > div > *,
.wizard-service-grid button > *,
.barber-grid button > * { position: relative; z-index: 1; }

.service-card:nth-child(2)::before,
.public-barber-card:nth-child(2)::before,
.experience-points article:nth-child(2)::before { animation-delay: -5s; }
.service-card:nth-child(3)::before,
.public-barber-card:nth-child(3)::before,
.experience-points article:nth-child(3)::before { animation-delay: -2.5s; }
.service-card:nth-child(4)::before { animation-delay: -6.25s; }

.service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border-top: 0;
}

.service-card {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 285px;
  padding: 30px;
  border: 1px solid rgba(112, 79, 27, .17);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(247,241,229,.9));
  box-shadow: 0 18px 45px rgba(52, 37, 14, .08);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .4s ease;
}

.service-card:hover {
  padding-inline: 30px;
  border-color: rgba(172, 122, 38, .46);
  background: linear-gradient(145deg, #fff, #f7efe0);
  box-shadow: 0 28px 60px rgba(52, 37, 14, .14);
  transform: translateY(-8px);
}

.service-number { grid-column: 1; }
.service-copy { grid-column: 1 / -1; align-self: start; }
.service-copy h3 { font-size: clamp(27px, 2.35vw, 36px); }
.service-meta { grid-column: 1; align-self: end; }
.service-link { grid-column: 2; align-self: end; }

.public-barbers {
  padding-top: clamp(82px, 8vw, 112px);
  scroll-margin-top: 25px;
}

.public-barbers-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 52px;
}

.public-barbers-heading h2 {
  max-width: 880px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 5.2vw, 76px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.045em;
}

.public-barbers-heading h2 em { color: #987029; font-weight: 400; }
.public-barbers-heading > p { max-width: 470px; margin: 0 0 5px; color: #676259; font-size: 15px; line-height: 1.75; }

.public-barber-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-barber-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(112, 79, 27, .2);
  border-radius: 22px;
  background: #11100e;
  color: var(--paper);
  box-shadow: 0 24px 58px rgba(33, 23, 9, .16);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .45s ease;
}

.public-barber-card:hover {
  border-color: rgba(235, 202, 131, .58);
  box-shadow: 0 34px 72px rgba(33, 23, 9, .26);
  transform: translateY(-9px);
}

.public-barber-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: radial-gradient(circle at 70% 18%, rgba(215,173,89,.32), transparent 38%), linear-gradient(145deg, #2b261e, #0b0b0a);
  color: rgba(235, 202, 131, .72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(72px, 8vw, 118px);
  font-style: italic;
}

.public-barber-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.03); transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .4s ease; }
.public-barber-card:hover .public-barber-photo img { filter: saturate(1) contrast(1.06); transform: scale(1.045); }
.public-barber-photo small { position: absolute; right: 18px; bottom: 14px; color: var(--gold-bright); font-size: 10px; font-style: normal; letter-spacing: .15em; }

.public-barber-copy { display: grid; padding: 27px 28px 29px; }
.public-barber-copy > p { margin: 0 0 13px; color: var(--gold); font-size: 8px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.public-barber-copy h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; }
.public-barber-copy > strong { margin-top: 5px; color: rgba(255,255,255,.55); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.public-barber-copy > span { min-height: 48px; margin: 20px 0 24px; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.65; }
.public-barber-copy a { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(235,202,131,.2); color: var(--gold-bright); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.public-barber-copy a b { font-size: 16px; transition: transform .25s ease; }
.public-barber-copy a:hover b { transform: translate(3px, -3px); }

.experience-points { gap: 14px; }
.experience-points article {
  min-height: 235px;
  padding: 24px;
  border: 1px solid rgba(235, 202, 131, .18);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.experience-points article:hover { border-color: rgba(235, 202, 131, .46); background: rgba(215,173,89,.07); transform: translateY(-6px); }
.experience-points h3 { margin-top: 54px; }

.product-items { display: grid; gap: 10px; border-top: 0; }
.product-items > div { padding: 19px 18px; border: 1px solid rgba(235,202,131,.16); border-radius: 12px; background: rgba(255,255,255,.025); transition: border-color .3s ease, background .3s ease; }
.product-items > div:hover { border-color: rgba(235,202,131,.42); background: rgba(215,173,89,.07); }

@media (max-width: 1050px) {
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-barber-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-barbers-heading { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 700px) {
  .service-list,
  .public-barber-grid { grid-template-columns: 1fr; }
  .service-card,
  .service-card:hover { grid-template-columns: 1fr auto; min-height: 245px; padding: 25px; }
  .service-copy { grid-column: 1 / -1; }
  .service-meta { grid-column: 1; }
  .service-link { grid-column: 2; grid-row: auto; }
  .public-barbers { padding-top: 64px; }
  .public-barbers-heading h2 { font-size: 47px; }
  .public-barber-photo { aspect-ratio: 6 / 4; }
  .public-barber-copy { padding: 24px; }
  .experience-points article { min-height: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  .gold-motion-card::before,
  .experience-points article::before,
  .product-items > div::before,
  .wizard-service-grid button::after,
  .barber-grid button::after { animation: none !important; opacity: 0 !important; }
  .service-card,
  .public-barber-card,
  .public-barber-photo img,
  .experience-points article { transition-duration: .01ms !important; }
}

/* Agenda premium para administración y profesionales */
.booking-table-wrap { margin-top: 30px; padding: clamp(16px, 2.5vw, 28px); border: 1px solid rgba(117,83,28,.13); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(235,229,216,.66)); box-shadow: 0 24px 65px rgba(42,31,13,.08); }
.booking-table-heading { align-items: flex-end; margin-bottom: 20px; }
.booking-table-heading > div { display: grid; gap: 4px; }
.booking-table-heading p, .barber-agenda-toolbar p { margin: 0; color: #a17429; font-size: 7px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.booking-table-heading h2 { font-size: clamp(28px, 3vw, 37px); letter-spacing: -.035em; }
.booking-table-heading > span { padding: 8px 11px; border: 1px solid rgba(9,9,8,.1); border-radius: 999px; background: rgba(255,255,255,.72); color: #6d675e; font-size: 7px; font-weight: 750; letter-spacing: .04em; }
.admin-bookings { gap: 14px; }
.admin-booking { grid-template-columns: 124px minmax(210px,1.15fr) minmax(190px,1fr) 165px; grid-template-areas: "when client service state" "actions actions actions actions"; align-items: stretch; gap: 0 20px; padding: 11px 18px 0 11px; overflow: hidden; border-color: rgba(80,59,23,.11); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 12px 34px rgba(45,33,13,.07); transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease; }
.admin-booking:hover { transform: translateY(-3px); border-color: rgba(169,124,46,.28); box-shadow: 0 20px 48px rgba(45,33,13,.12); }
.admin-booking::before { display: none; }
.admin-booking .booking-when { grid-area: when; align-content: center; min-height: 128px; margin-bottom: 11px; padding: 17px 13px; border-radius: 13px; background: radial-gradient(circle at 75% 10%, rgba(216,174,91,.19), transparent 35%), linear-gradient(145deg,#242119,#0e0e0c); color: #fff; box-shadow: inset 0 0 0 1px rgba(216,174,91,.17), 0 10px 25px rgba(18,15,10,.15); }
.admin-booking .booking-when::before { content: "HORA"; width: max-content; padding: 4px 6px; border-radius: 999px; background: rgba(216,174,91,.14); color: #e0b65f; font-size: 6px; font-weight: 850; letter-spacing: .13em; }
.admin-booking .booking-when strong { color: #fff; font-size: 31px; letter-spacing: -.035em; }
.admin-booking .booking-when span { color: #d9b667; font-weight: 750; }
.admin-booking .booking-when small { color: rgba(255,255,255,.48); }
.admin-booking .booking-client { grid-area: client; align-content: center; padding: 19px 0; }
.admin-booking .booking-service { grid-area: service; align-content: center; margin: 18px 0; padding: 13px 14px; border: 1px solid rgba(9,9,8,.08); border-radius: 12px; background: #f7f3ea; }
.admin-booking .booking-state { grid-area: state; align-content: center; padding: 18px 0; }
.booking-person { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0; }
.booking-person > div { display: grid; gap: 3px; min-width: 0; }
.booking-person > div small { color: #938b7e; font-size: 7px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.booking-client-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(216,174,91,.32); border-radius: 50%; background: #191713; color: #e4bd6c; font-family: Georgia,"Times New Roman",serif; font-size: 13px; font-weight: 400; box-shadow: 0 7px 18px rgba(20,17,12,.13); }
.admin-booking .booking-client strong { font-family: Georgia,"Times New Roman",serif; font-size: 16px; font-weight: 400; }
.admin-booking .booking-client > a { width: max-content; margin-left: 50px; color: #2f7448; font-weight: 750; }
.admin-booking .booking-client > small, .admin-booking .booking-client > .birthday-private { margin-left: 50px; }
.admin-booking .booking-service-title strong { font-size: 11px; }
.admin-booking .booking-state > strong { margin-top: 4px; font-size: 18px; }
.status-pill { border-radius: 999px; }
.admin-booking .booking-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-height: 49px; padding: 9px 0 10px; border-top: 1px solid rgba(9,9,8,.075); }
.admin-booking .booking-actions button { min-height: 32px; padding: 0 13px; border-radius: 999px; background: #fff; transition: transform .18s ease, background .18s ease, color .18s ease; }
.admin-booking .booking-actions button:hover { transform: translateY(-1px); }
.admin-booking .booking-actions button.primary { border-color: #181713; background: #181713; color: #e0b65f; }
.admin-booking .booking-actions .review-request { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 15px; border: 1px solid #28623d; border-radius: 999px; background: #edf7f0; color: #28623d; font-size: 8px; font-weight: 850; letter-spacing: .03em; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.admin-booking .booking-actions .review-request:hover { transform: translateY(-1px); background: #def0e3; }
.admin-booking .booking-actions button.delete-record { margin-left: auto; border-color: transparent; background: transparent; }
.admin-booking .booking-delete-confirm { width: 100%; grid-template-columns: 1fr auto auto; align-items: center; border-radius: 10px; }

.barber-agenda-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 30px 0 15px; }
.barber-agenda-toolbar > div:first-child { display: grid; gap: 4px; }
.barber-agenda-toolbar h2 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(27px,3vw,36px); font-weight: 400; letter-spacing: -.035em; }
.barber-agenda-toolbar > div:first-child > span { color: #7b756b; font-size: 8px; }
.barber-agenda-toolbar .barber-filter { margin: 0; padding: 5px; border: 1px solid rgba(9,9,8,.1); border-radius: 999px; background: rgba(255,255,255,.66); }
.barber-agenda-toolbar .barber-filter button { min-width: 84px; min-height: 34px; border: 0; border-radius: 999px; background: transparent; }
.barber-agenda-toolbar .barber-filter button.active { background: #181713; box-shadow: 0 8px 20px rgba(20,17,12,.16); }
.barber-bookings { gap: 13px; }
.barber-bookings article { grid-template-columns: 145px minmax(200px,1.1fr) minmax(190px,1fr) 175px; align-items: stretch; gap: 20px; min-height: 150px; padding: 11px 18px 11px 11px; overflow: hidden; border-color: rgba(80,59,23,.11); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 12px 34px rgba(45,33,13,.07); transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease; }
.barber-bookings article:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(45,33,13,.11); }
.barber-bookings article::before { display: none; }
.barber-booking-time { align-content: center; padding: 16px; border-radius: 13px; background: radial-gradient(circle at 75% 10%, rgba(216,174,91,.2), transparent 35%), linear-gradient(145deg,#25221a,#0f0f0d); color: #fff; }
.barber-booking-time small { color: #d9b667; font-size: 7px; font-weight: 750; line-height: 1.45; text-transform: capitalize; }
.barber-booking-time strong { color: #fff; font-size: 32px; }
.barber-booking-time span { color: rgba(255,255,255,.5); }
.barber-booking-client, .barber-booking-service, .barber-booking-actions { align-content: center; }
.barber-booking-client h2 { font-family: Georgia,"Times New Roman",serif; font-size: 17px; font-weight: 400; }
.barber-booking-client > a { width: max-content; margin-left: 50px; color: #2f7448; font-weight: 750; text-decoration: none; }
.barber-booking-client > .birthday-private { margin-left: 50px; }
.barber-booking-service { padding: 13px 14px; border: 1px solid rgba(9,9,8,.08); border-radius: 12px; background: #f7f3ea; }
.barber-booking-service > small:first-child { color: #9a722c; font-size: 7px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.barber-booking-service strong { font-size: 12px; }
.barber-booking-service .booking-note { margin-top: 2px; padding-top: 6px; border-top: 1px solid rgba(9,9,8,.08); }
.barber-booking-actions { justify-items: stretch; }
.barber-booking-actions .status-pill { justify-self: start; margin-bottom: 3px; }
.barber-booking-actions button { min-height: 34px; padding: 0 10px; border-radius: 999px; background: #fff; }
.barber-booking-actions button.primary { border-color: #181713; background: #181713; color: #e0b65f; }

@media (max-width: 1120px) {
  .reviews-section { grid-template-columns: 150px minmax(0, 1fr); }
  .reviews-mark { width: 145px; }
  .reviews-principles { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .admin-booking { grid-template-columns: 112px 1fr 1fr; grid-template-areas: "when client service" "when state state" "actions actions actions"; }
  .admin-booking .booking-state { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 0 0 14px; }
  .admin-booking .booking-when { min-height: 100%; }
  .barber-bookings article { grid-template-columns: 125px 1fr 1fr; }
  .barber-booking-actions { grid-column: 2 / -1; display: flex; align-items: center; flex-wrap: wrap; }
  .barber-booking-actions button { min-width: 120px; }
}

@media (max-width: 720px) {
  .reviews-section { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; padding: 48px 22px; }
  .reviews-mark { width: 116px; }
  .reviews-mark span { font-size: 48px; }
  .reviews-copy h2 { font-size: 39px; }
  .reviews-actions { align-items: stretch; flex-direction: column; }
  .reviews-actions .button, .reviews-book { width: 100%; text-align: center; }
  .reviews-principles { grid-column: auto; grid-template-columns: 1fr; }
  .booking-table-wrap { padding: 13px; border-radius: 18px; }
  .admin-booking { grid-template-columns: 88px minmax(0,1fr); grid-template-areas: "when client" "when service" "state state" "actions actions"; gap: 0 13px; padding: 9px 12px 0 9px; border-radius: 15px; }
  .admin-booking .booking-when { min-height: 0; margin-bottom: 9px; padding: 12px 9px; }
  .admin-booking .booking-when strong { font-size: 25px; }
  .admin-booking .booking-client { padding: 12px 0 7px; }
  .admin-booking .booking-service { margin: 5px 0 10px; }
  .admin-booking .booking-state { grid-area: state; padding: 9px 0; border-top: 1px solid rgba(9,9,8,.07); }
  .admin-booking .booking-actions { justify-content: stretch; overflow-x: auto; }
  .admin-booking .booking-actions button { flex: 1 0 auto; min-width: 105px; }
  .admin-booking .booking-actions .review-request { flex: 1 0 auto; min-width: 148px; }
  .admin-booking .booking-actions button.delete-record { margin-left: 0; }
  .admin-booking .booking-delete-confirm { grid-template-columns: 1fr 1fr; }
  .admin-booking .booking-delete-confirm span { grid-column: 1 / -1; }
  .barber-agenda-toolbar { align-items: stretch; flex-direction: column; }
  .barber-agenda-toolbar .barber-filter { display: grid; grid-template-columns: repeat(3,1fr); }
  .barber-agenda-toolbar .barber-filter button { min-width: 0; }
  .barber-bookings article { grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 9px; border-radius: 15px; }
  .barber-booking-time { grid-row: 1 / 3; padding: 12px 9px; }
  .barber-booking-time strong { font-size: 25px; }
  .barber-booking-service { grid-column: 2; }
  .barber-booking-actions { grid-column: 1 / -1; padding: 9px 3px 2px; border-top: 1px solid rgba(9,9,8,.08); }
  .barber-booking-actions .status-pill { width: 100%; justify-content: center; min-height: 28px; }
  .barber-booking-actions button { flex: 1 1 125px; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-booking, .barber-bookings article { transition: none; }
}

/* Estados claros para agenda y catálogo */
@keyframes leveling-content-skeleton {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}

.booking-choice-skeletons > span,
.shop-product-skeletons > span {
  background: linear-gradient(105deg, #e8e3d9 22%, #f8f5ee 40%, #e8e3d9 58%);
  background-size: 240% 100%;
  animation: leveling-content-skeleton 1.25s linear infinite;
}

.booking-choice-skeletons > span {
  position: relative;
  min-height: 224px;
  overflow: hidden;
  border: 1px solid rgba(9,9,8,.08);
  border-radius: 9px;
}

.booking-choice-skeletons > span::before,
.booking-choice-skeletons > span::after {
  position: absolute;
  left: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  content: "";
}

.booking-choice-skeletons > span::before { right: 22%; bottom: 72px; height: 13px; }
.booking-choice-skeletons > span::after { right: 48%; bottom: 45px; height: 9px; opacity: .72; }

.barber-skeletons {
  display: grid;
  gap: 12px;
}

.barber-skeletons > span {
  min-height: 96px;
}

.barber-skeletons > span::before { top: 23px; right: auto; bottom: auto; width: 50px; height: 50px; }
.barber-skeletons > span::after { top: 34px; right: 28%; bottom: auto; left: 86px; height: 11px; }

.booking-resource-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 19px;
  border: 1px solid rgba(9,9,8,.13);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}

.booking-resource-state.error {
  border-color: rgba(161,74,52,.24);
  background: linear-gradient(115deg, #fbf1ed, #fffaf7);
}

.booking-resource-state.empty {
  border-style: dashed;
}

.booking-resource-state.compact {
  min-height: 210px;
  align-content: center;
}

.booking-resource-state > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(9,9,8,.14);
  border-radius: 50%;
  color: #9b7028;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
}

.booking-resource-state.error > span {
  border-color: rgba(161,74,52,.25);
  background: #a64d39;
  color: #fff;
}

.booking-resource-state > div {
  display: grid;
  gap: 5px;
}

.booking-resource-state strong {
  color: #29261f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
}

.booking-resource-state p {
  max-width: 520px;
  margin: 0;
  color: #756f65;
  font-size: 9px;
  line-height: 1.55;
}

.booking-resource-state > button,
.booking-resource-state > a,
.barber-grid .booking-resource-state > button {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #1b1915;
  border-radius: 999px;
  background: #1b1915;
  color: var(--gold-bright);
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transform: none;
}

.barber-grid .booking-resource-state > button:hover,
.booking-resource-state > button:hover,
.booking-resource-state > a:hover {
  border-color: #a7782e;
  background: #a7782e;
  color: #17140e;
  transform: none;
}

.shop-product-skeletons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.shop-product-skeletons > span {
  min-height: 440px;
  border: 1px solid rgba(9,9,8,.08);
  border-radius: 12px;
}

.shop-catalogue-error {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 220px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(153,66,45,.22);
  border-radius: 14px;
  background: linear-gradient(120deg, #fff9f3, #f6e9e2);
}

.shop-catalogue-error > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #9e4936;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
}

.shop-catalogue-error > div {
  display: grid;
  gap: 7px;
}

.shop-catalogue-error strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 400;
}

.shop-catalogue-error p {
  max-width: 520px;
  margin: 0;
  color: #756b61;
  font-size: 10px;
  line-height: 1.6;
}

.shop-catalogue-error > button,
.shop-catalogue-error > a {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #1b1915;
  border-radius: 999px;
  background: #1b1915;
  color: var(--gold-bright);
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
}

.shop-catalogue-error > a {
  grid-column: 2 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  border-color: transparent;
  background: transparent;
  color: #805d24;
  padding: 0;
}

@media (max-width: 680px) {
  .booking-resource-state,
  .shop-catalogue-error {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .booking-resource-state > button,
  .booking-resource-state > a,
  .barber-grid .booking-resource-state > button,
  .shop-catalogue-error > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .shop-catalogue-error > a {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .shop-product-skeletons { grid-template-columns: 1fr; }
  .shop-product-skeletons > span { min-height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-choice-skeletons > span,
  .shop-product-skeletons > span {
    animation: none;
  }
}

/* Portal de consulta para clientes */
.customer-booking-page { min-height: 100svh; background: radial-gradient(circle at 18% 18%, rgba(214, 169, 79, .13), transparent 25%), #0b0b09; color: #f6f2e9; }
.customer-booking-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.customer-booking-header img { display: block; width: 86px; height: auto; }
.customer-booking-header > a:last-child { padding: 11px 15px; border: 1px solid rgba(255,255,255,.2); color: #f6f2e9; font-size: 9px; font-weight: 750; text-decoration: none; }
.customer-booking-shell { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(470px, 1.15fr); align-items: center; gap: clamp(42px, 7vw, 110px); width: min(1120px, calc(100% - 48px)); min-height: calc(100svh - 111px); margin: 0 auto; padding: 55px 0 75px; }
.customer-booking-intro > p { margin: 0 0 16px; color: #d8ae5b; font-size: 9px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.customer-booking-intro h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(44px, 5vw, 72px); font-weight: 400; letter-spacing: -.045em; line-height: .96; }
.customer-booking-intro h1 em { color: #d8ae5b; font-weight: 400; }
.customer-booking-intro > span { display: block; max-width: 450px; margin-top: 24px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.7; }
.customer-booking-intro > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 13px; margin-top: 35px; color: rgba(255,255,255,.6); font-size: 9px; }
.customer-booking-intro > div b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(216,174,91,.4); border-radius: 50%; color: #d8ae5b; font-family: Georgia, "Times New Roman", serif; font-size: 10px; }
.customer-booking-card { min-height: 540px; padding: clamp(25px, 4vw, 48px); border: 1px solid rgba(216,174,91,.22); border-radius: 24px; background: #f7f4ed; color: #11110f; box-shadow: 0 40px 120px rgba(0,0,0,.38); }
.customer-booking-card form { display: grid; gap: 19px; }
.customer-booking-card form > div small { color: #9b7029; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.customer-booking-card h2 { margin: 7px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 4vw, 43px); font-weight: 400; letter-spacing: -.035em; }
.customer-booking-card form > div p, .customer-booking-result > p { margin: 0; color: #777168; font-size: 10px; line-height: 1.6; }
.customer-booking-card label { display: grid; gap: 8px; }
.customer-booking-card label span { color: #6e685f; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.customer-booking-card input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid rgba(9,9,8,.17); border-radius: 9px; outline: 0; background: #fff; color: #11110f; font: inherit; font-size: 12px; }
.customer-booking-card input:focus { border-color: #a77b30; box-shadow: 0 0 0 3px rgba(167,123,48,.12); }
.customer-booking-card form > button { height: 52px; margin-top: 3px; border: 0; border-radius: 999px; background: #171612; color: #e1ba69; cursor: pointer; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.customer-booking-card form > button:disabled { cursor: not-allowed; opacity: .5; }
.customer-booking-privacy { color: #8e887e; font-size: 8px; line-height: 1.55; text-align: center; }
.customer-booking-error { margin: -4px 0 0; padding: 12px 14px; border-left: 3px solid #a94638; border-radius: 6px; background: #f8e6e3; color: #8c3024; font-size: 9px; line-height: 1.5; }
.customer-booking-result { display: grid; gap: 19px; }
.customer-booking-result-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.customer-booking-result-head small { color: #777168; font-size: 9px; }
.customer-status { padding: 7px 10px; border-radius: 999px; background: #e7eee8; color: #2f6940; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.customer-status.cancelled, .customer-status.no_show { background: #f3e2df; color: #8a382c; }
.customer-status.completed { background: #e9e4d6; color: #785b27; }
.customer-status.pending_payment { background: #f5ecd9; color: #8b6423; }
.customer-booking-result > h2 { margin-bottom: -13px; }
.customer-booking-summary { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(9,9,8,.11); border-radius: 13px; overflow: hidden; }
.customer-booking-summary article { display: grid; gap: 7px; min-height: 89px; padding: 17px; background: #fff; }
.customer-booking-summary article:nth-child(odd) { border-right: 1px solid rgba(9,9,8,.09); }
.customer-booking-summary article:nth-child(-n+2) { border-bottom: 1px solid rgba(9,9,8,.09); }
.customer-booking-summary span { color: #8a847a; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.customer-booking-summary strong { font-size: 11px; line-height: 1.45; text-transform: capitalize; }
.customer-payment, .customer-reward { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; padding: 14px; border-radius: 11px; background: #ebe7de; }
.customer-payment > span, .customer-reward > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #1a1916; color: #d8ae5b; font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.customer-payment.paid { background: #e2eee5; }
.customer-payment.paid > span { background: #3d7049; color: #fff; }
.customer-payment div, .customer-reward div { display: grid; gap: 4px; }
.customer-payment strong, .customer-reward strong { font-size: 10px; }
.customer-payment small, .customer-reward small { color: #736e65; font-size: 8px; line-height: 1.5; }
.customer-reward { background: #f1e7d4; }
.customer-booking-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.customer-booking-actions a, .customer-booking-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 13px; border: 1px solid rgba(9,9,8,.18); border-radius: 999px; background: transparent; color: #24211d; cursor: pointer; font: inherit; font-size: 8px; font-weight: 800; text-align: center; text-decoration: none; }
.customer-booking-actions a { border-color: #171612; background: #171612; color: #e1ba69; }
.customer-booking-notice { padding: 12px 14px; border-left: 3px solid #3f704a; border-radius: 6px; background: #e4efe6; color: #285735 !important; font-size: 9px !important; font-weight: 700; }
.customer-manage-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; padding-top: 2px; }
.customer-manage-actions button { min-height: 48px; border: 1px solid #171612; border-radius: 999px; background: #171612; color: #e1ba69; cursor: pointer; font: inherit; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.customer-manage-actions button.danger { border-color: rgba(158,55,42,.28); background: #f6e8e5; color: #8e3328; }
.customer-policy-note { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid rgba(164,119,43,.2); border-radius: 10px; background: #f5ecdb; }
.customer-policy-note strong { font-size: 9px; }
.customer-policy-note span { color: #776d5f; font-size: 8px; line-height: 1.55; }
.customer-change-panel { display: grid; gap: 15px; padding: 20px; border: 1px solid rgba(9,9,8,.12); border-radius: 15px; background: #fff; box-shadow: 0 16px 40px rgba(55,42,17,.07); }
.customer-change-panel > div:first-child small { color: #9b7029; font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.customer-change-panel h3 { margin: 5px 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; letter-spacing: -.03em; }
.customer-change-panel > div:first-child p { margin: 0; color: #7c766d; font-size: 9px; line-height: 1.55; }
.customer-change-panel label { display: grid; gap: 7px; }
.customer-change-panel label > span { color: #6e685f; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.customer-change-panel input { height: 47px; }
.customer-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; max-height: 154px; overflow: auto; }
.customer-time-grid button { min-height: 39px; border: 1px solid rgba(9,9,8,.14); border-radius: 8px; background: #f5f2eb; color: #35312b; cursor: pointer; font-size: 10px; font-weight: 750; }
.customer-time-grid button.active { border-color: #171612; background: #171612; color: #e1ba69; }
.customer-times-empty { margin: 0; padding: 13px; border-radius: 8px; background: #f1eee7; color: #777168; font-size: 9px; text-align: center; }
.customer-change-panel footer { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.customer-change-panel footer button { min-height: 43px; border: 1px solid rgba(9,9,8,.17); border-radius: 999px; background: transparent; color: #39352e; cursor: pointer; font: inherit; font-size: 8px; font-weight: 800; }
.customer-change-panel footer button.primary { border-color: #171612; background: #171612; color: #e1ba69; }
.customer-change-panel footer button.danger { border-color: #a43f31; background: #a43f31; color: #fff; }
.customer-change-panel footer button:disabled { cursor: wait; opacity: .5; }
.customer-change-panel.cancel { border-color: rgba(164,63,49,.2); background: #fffafa; }
.customer-cancel-summary { display: grid; gap: 4px; padding: 13px 14px; border-radius: 9px; background: #f4eae7; }
.customer-cancel-summary span { color: #85766f; font-size: 8px; text-transform: capitalize; }
.customer-cancel-summary strong { color: #5f2a23; font-size: 10px; }

@media (max-width: 820px) {
  .customer-booking-shell { grid-template-columns: 1fr; gap: 35px; padding-top: 40px; }
  .customer-booking-intro > span { max-width: 600px; }
  .customer-booking-intro > div { display: none; }
}

@media (max-width: 520px) {
  .customer-booking-header { width: calc(100% - 30px); padding: 16px 0; }
  .customer-booking-header img { width: 68px; }
  .customer-booking-shell { width: calc(100% - 24px); padding: 34px 0 45px; }
  .customer-booking-intro h1 { font-size: 42px; }
  .customer-booking-intro > span { margin-top: 17px; font-size: 10px; }
  .customer-booking-card { min-height: 0; padding: 23px 17px; border-radius: 18px; }
  .customer-booking-summary { grid-template-columns: 1fr; }
  .customer-booking-summary article:nth-child(odd) { border-right: 0; }
  .customer-booking-summary article { min-height: 72px; border-bottom: 1px solid rgba(9,9,8,.09); }
  .customer-booking-summary article:last-child { border-bottom: 0; }
  .customer-booking-actions, .customer-manage-actions, .customer-change-panel footer { grid-template-columns: 1fr; }
  .customer-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-change-panel { padding: 17px 14px; }
}

/* Gestión premium de horarios y bloqueos */
.schedule-admin, .barber-schedule-panel { gap: 18px; }
.schedule-admin { display: grid; margin-top: 30px; }
.schedule-premium-hero, .barber-schedule-intro { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; overflow: hidden; padding: clamp(23px,3vw,34px); border: 1px solid rgba(216,174,91,.24); border-radius: 22px; background: radial-gradient(circle at 84% 5%, rgba(216,174,91,.16), transparent 32%), linear-gradient(125deg,#12120f,#28241b); color: #fff; box-shadow: 0 22px 58px rgba(25,20,12,.18); }
.schedule-premium-hero::after, .barber-schedule-intro::after { content: ""; position: absolute; right: -45px; bottom: -85px; width: 210px; height: 210px; border: 1px solid rgba(216,174,91,.12); border-radius: 50%; pointer-events: none; }
.schedule-premium-hero > div:first-child, .barber-schedule-intro > div:first-child { position: relative; z-index: 1; display: grid; gap: 6px; }
.schedule-premium-hero p, .barber-schedule-intro p { margin: 0; color: #d8ae5b; font-size: 8px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.schedule-premium-hero h2, .barber-schedule-intro h2 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(28px,3.2vw,40px); font-weight: 400; letter-spacing: -.035em; }
.schedule-premium-hero > div:first-child > span, .barber-schedule-intro > div:first-child > span { max-width: 590px; color: rgba(255,255,255,.55); font-size: 9px; line-height: 1.6; }
.schedule-hero-metrics { position: relative; z-index: 1; display: flex; gap: 9px; }
.schedule-hero-metrics > span { display: grid; gap: 4px; min-width: 92px; padding: 13px 14px; border: 1px solid rgba(216,174,91,.2); border-radius: 13px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.52); font-size: 7px; letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(8px); }
.schedule-hero-metrics strong { color: #e3bd6d; font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 400; line-height: 1; }
.schedule-barbers { gap: 10px; margin: 0; }
.schedule-barbers button { position: relative; gap: 12px; min-height: 74px; padding: 11px 14px; overflow: hidden; border-color: rgba(80,59,23,.12); border-radius: 15px; background: rgba(255,255,255,.88); box-shadow: 0 9px 26px rgba(40,29,12,.055); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.schedule-barbers button:hover { transform: translateY(-2px); border-color: rgba(166,121,43,.28); box-shadow: 0 15px 34px rgba(40,29,12,.1); }
.schedule-barbers button.active { border-color: rgba(177,132,54,.5); background: linear-gradient(135deg,#fff,#f1e6d1); box-shadow: inset 0 0 0 1px rgba(177,132,54,.15), 0 13px 32px rgba(80,57,19,.1); }
.schedule-barbers button > span { width: 42px; height: 42px; border: 1px solid rgba(216,174,91,.3); box-shadow: 0 7px 16px rgba(20,17,12,.15); }
.schedule-barbers button > div { display: grid; gap: 4px; min-width: 0; }
.schedule-barbers button strong { font-family: Georgia,"Times New Roman",serif; font-size: 14px; font-weight: 400; }
.schedule-barbers button small { color: #8a8276; font-size: 7px; text-transform: uppercase; }
.schedule-barbers button > i { display: grid; place-items: center; width: 27px; height: 27px; margin-left: auto; border: 1px solid rgba(9,9,8,.1); border-radius: 50%; color: #82796b; font-size: 9px; font-style: normal; }
.schedule-barbers button.active > i { border-color: #1b1915; background: #1b1915; color: #dfb762; }
.weekly-schedule, .blocks-admin { padding: clamp(18px,2.7vw,30px); border-color: rgba(80,59,23,.11); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 18px 50px rgba(44,32,13,.07); }
.blocks-admin { margin-top: 0; }
.schedule-section-heading { margin-bottom: 24px; }
.schedule-section-heading p { color: #a4772b; font-weight: 850; letter-spacing: .15em; }
.schedule-section-heading h2 { font-size: clamp(26px,3vw,35px); letter-spacing: -.035em; }
.overnight-help { margin: -12px 0 18px; padding: 11px 13px; border: 1px solid rgba(169,123,45,.16); border-radius: 11px; background: #fbf7ed; color: #66583f; font-size: 12px; line-height: 1.55; }
.schedule-section-heading > button, .block-form > button { min-height: 43px; border: 0; border-radius: 999px; box-shadow: 0 10px 24px rgba(25,21,14,.14); transition: transform .2s ease, box-shadow .2s ease; }
.schedule-section-heading > button:hover, .block-form > button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(25,21,14,.2); }
.schedule-days { gap: 9px; }
.schedule-days article { grid-template-columns: minmax(245px,.8fr) 1.2fr; min-height: 82px; padding: 11px 13px; border-color: rgba(80,59,23,.1); border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(42,31,13,.04); transition: border-color .22s ease, background .22s ease, transform .22s ease; }
.schedule-days article:hover { transform: translateX(3px); border-color: rgba(171,126,48,.26); }
.schedule-days article.closed { background: #f1eee7; color: #777269; box-shadow: none; }
.day-toggle { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.day-number { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(216,174,91,.27); border-radius: 10px; background: #1b1915; color: #deb661; font-family: Georgia,"Times New Roman",serif; font-size: 11px; font-weight: 400; }
.closed .day-number { border-color: rgba(9,9,8,.08); background: #ded9cf; color: #817b72; }
.day-name { display: grid; gap: 3px; }
.day-name strong { font-size: 11px; }
.day-name small { color: #8b847a; font-size: 7px; font-weight: 500; }
.day-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.day-toggle > i { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d6d1c7; box-shadow: inset 0 0 0 1px rgba(9,9,8,.08); transition: background .2s ease; }
.day-toggle > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.18); transition: transform .22s cubic-bezier(.16,1,.3,1); }
.day-toggle input:checked + i { background: #a97b2d; }
.day-toggle input:checked + i::after { transform: translateX(18px); }
.day-toggle input:focus-visible + i { box-shadow: 0 0 0 3px rgba(169,123,45,.2); }
.day-hours { gap: 8px; padding: 8px 9px; border: 1px solid rgba(9,9,8,.075); border-radius: 11px; background: #f7f3eb; }
.day-hours label { display: grid; gap: 4px; }
.day-hours label span { padding-left: 3px; }
.day-hours input { min-width: 104px; height: 39px; border-color: rgba(9,9,8,.11); border-radius: 8px; background: #fff; }
.day-hours i { width: 18px; height: 1px; overflow: hidden; background: #c8c0b3; }
.closed-label { justify-self: end; padding: 8px 11px; border-radius: 999px; background: #e4dfd6; color: #817b72; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.block-form { gap: 10px; padding: 18px; border-color: rgba(145,101,29,.14); border-radius: 15px; background: linear-gradient(140deg,#f4eee2,#eae1d2); }
.block-form label { gap: 8px; }
.block-form input, .block-form select { height: 45px; padding: 0 12px; border-color: rgba(9,9,8,.12); border-radius: 9px; outline: 0; background: rgba(255,255,255,.9); }
.block-form input:focus, .block-form select:focus { border-color: #a97b2d; box-shadow: 0 0 0 3px rgba(169,123,45,.1); }
.blocks-list { gap: 9px; margin-top: 18px; }
.blocks-list article { grid-template-columns: 44px 190px 1fr auto; gap: 14px; min-height: 76px; padding: 12px 14px; border-color: rgba(80,59,23,.1); border-radius: 13px; background: #fff; box-shadow: 0 8px 22px rgba(42,31,13,.045); }
.block-type-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #f1e5cf; color: #8a6322; font-family: Georgia,"Times New Roman",serif; font-size: 15px; }
.blocks-list article strong { font-size: 16px; }
.blocks-list article span:not(.block-type-icon) { color: #9a712d; font-weight: 750; }
.blocks-list article p { padding: 10px 12px; border-left: 2px solid #d5b26b; background: #faf7f0; line-height: 1.45; }
.blocks-list article button { min-height: 35px; padding: 0 13px; border-radius: 999px; background: #fff; }
.schedule-conflict-warning { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid rgba(169,123,45,.3); border-radius: 16px; background: linear-gradient(135deg,#fffaf0,#f5e7cc); box-shadow: 0 14px 34px rgba(70,48,14,.08); }
.schedule-conflict-warning > div { display: grid; gap: 6px; }
.schedule-conflict-warning strong { color: #5f4317; font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 400; }
.schedule-conflict-warning span { color: #6e604b; font-size: 12px; line-height: 1.55; }
.schedule-conflict-warning ul { display: grid; gap: 4px; margin: 5px 0 0; padding-left: 18px; color: #66583f; font-size: 12px; line-height: 1.45; }
.schedule-conflict-warning footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.schedule-conflict-warning button { min-height: 41px; padding: 0 15px; border: 1px solid rgba(9,9,8,.14); border-radius: 999px; background: #fff; color: #332b20; cursor: pointer; font-size: 12px; font-weight: 800; }
.schedule-conflict-warning button.primary { border-color: #1c1914; background: #1c1914; color: #e8c477; }
.schedule-conflict-warning button:disabled { cursor: wait; opacity: .55; }

@media (max-width: 900px) {
  .schedule-premium-hero, .barber-schedule-intro { align-items: stretch; flex-direction: column; }
  .schedule-hero-metrics { justify-content: flex-start; }
  .schedule-days article { grid-template-columns: 1fr; gap: 10px; }
  .day-hours { justify-content: flex-start; }
  .blocks-list article { grid-template-columns: 44px 1fr auto; }
  .blocks-list article p { grid-column: 2 / -1; }
  .blocks-list article button { grid-column: 3; grid-row: 1; }
  .schedule-conflict-warning { grid-template-columns: 1fr; }
  .schedule-conflict-warning footer { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .schedule-premium-hero, .barber-schedule-intro { padding: 21px 18px; border-radius: 18px; }
  .schedule-hero-metrics { display: grid; grid-template-columns: 1fr 1fr; }
  .schedule-hero-metrics > span { min-width: 0; }
  .schedule-barbers button { min-height: 68px; }
  .weekly-schedule, .blocks-admin { padding: 16px 13px; border-radius: 18px; }
  .schedule-section-heading { align-items: stretch; flex-direction: column; }
  .schedule-section-heading > button { width: 100%; }
  .schedule-days article { padding: 10px; }
  .day-toggle { grid-template-columns: 34px minmax(0,1fr) auto; }
  .day-hours { display: grid; grid-template-columns: 1fr auto 1fr; }
  .day-hours label { min-width: 0; }
  .day-hours input { width: 100%; min-width: 0; padding: 0 6px; }
  .block-form { grid-template-columns: 1fr; }
  .block-reason, .block-form > button { grid-column: auto; }
  .blocks-list article { grid-template-columns: 42px 1fr; }
  .blocks-list article p { grid-column: 1 / -1; }
  .blocks-list article button { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .schedule-conflict-warning { padding: 16px; }
  .schedule-conflict-warning footer { display: grid; grid-template-columns: 1fr; }
  .schedule-conflict-warning button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-barbers button, .schedule-days article, .schedule-section-heading > button, .block-form > button, .day-toggle > i, .day-toggle > i::after { transition: none; }
}

/* Eliminación protegida y fotografía móvil de barberos */
.service-admin-actions button.delete { border-color: #9b3d32; background: #9b3d32; color: #fff; }
.barber-delete-confirm { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; margin-top: 2px; padding: 14px 15px; border: 1px solid rgba(155,61,50,.23); border-radius: 11px; background: #f8eae7; }
.barber-delete-confirm > div { display: grid; gap: 4px; }
.barber-delete-confirm strong { color: #6d2e27; font-size: 9px; }
.barber-delete-confirm span { color: #81564f; font-size: 8px; line-height: 1.5; }
.barber-delete-confirm button { min-height: 35px; padding: 0 13px; border: 1px solid rgba(9,9,8,.15); border-radius: 999px; background: #fff; color: #2d2924; cursor: pointer; font-size: 8px; font-weight: 800; }
.barber-delete-confirm button.danger { border-color: #90362c; background: #90362c; color: #fff; }
.photo-editor label > span { border-radius: 999px; transition: background .2s ease, color .2s ease; }
.photo-editor label:hover > span { background: #171612; color: #e1ba69; }

@media (max-width: 520px) {
  .barber-admin-grid .service-admin-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .barber-admin-grid .service-admin-actions button:first-child { grid-column: auto; }
  .barber-admin-grid .service-admin-actions button.delete { grid-column: 1 / -1; }
  .barber-delete-confirm { grid-template-columns: 1fr 1fr; }
  .barber-delete-confirm > div { grid-column: 1 / -1; }
  .barber-delete-confirm button { width: 100%; }
  .photo-editor label > span, .photo-editor label small { width: min(260px, 100%); }
}

/* Páginas locales de servicios */
.service-page { min-height: 100vh; overflow-x: hidden; background: #f4f0e7; color: var(--ink); }
.service-page-header { position: absolute; z-index: 5; top: 18px; left: 50%; display: grid; grid-template-columns: 160px 1fr auto; align-items: center; width: min(calc(100% - 36px), 1400px); min-height: 72px; padding: 9px 13px 9px 20px; border: 1px solid rgba(216,174,91,.22); border-radius: 9px; background: rgba(10,10,9,.88); color: #fff; box-shadow: 0 14px 50px rgba(0,0,0,.25); transform: translateX(-50%); backdrop-filter: blur(16px); }
.service-page-brand img { display: block; width: 68px; height: 54px; object-fit: contain; }
.service-page-header nav { display: flex; justify-content: center; gap: clamp(22px,4vw,48px); }
.service-page-header nav a { color: rgba(255,255,255,.68); font-size: 9px; font-weight: 650; }
.service-page-header nav a:hover { color: var(--gold-bright); }
.service-page-header .button { min-height: 46px; padding-inline: 24px; }
.service-page-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 330px; align-content: end; min-height: 780px; padding: 150px max(5vw,calc((100vw - 1320px)/2)) 68px; overflow: hidden; background: #090908; color: #fff; }
.service-page-hero::before { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,rgba(4,4,3,.96) 0%,rgba(4,4,3,.82) 43%,rgba(4,4,3,.25) 72%,rgba(4,4,3,.5) 100%),linear-gradient(0deg,rgba(4,4,3,.9),transparent 48%); content: ""; }
.service-page-hero-media { position: absolute; inset: 0; filter: saturate(.78) contrast(1.06); transform: scale(1.01); }
.service-page-hero-media img { object-position: center 28%; }
.service-page-hero-copy { position: relative; z-index: 2; max-width: 850px; }
.service-breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 48px; color: rgba(255,255,255,.38); font-size: 8px; letter-spacing: .06em; }
.service-breadcrumbs a:hover { color: var(--gold-bright); }
.service-breadcrumbs strong { color: rgba(255,255,255,.65); font-weight: 500; }
.service-page-hero h1 { max-width: 850px; margin: 18px 0 25px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(54px,7vw,96px); font-weight: 400; line-height: .91; letter-spacing: -.052em; text-wrap: balance; }
.service-page-hero-copy > p:not(.eyebrow) { max-width: 650px; margin: 0; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.8; }
.service-page-actions { display: flex; align-items: center; gap: 27px; margin-top: 35px; }
.service-page-actions > a:last-child { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 750; text-decoration: underline; text-decoration-color: rgba(216,174,91,.4); text-underline-offset: 5px; }
.service-page-facts { position: relative; z-index: 2; align-self: end; border: 1px solid rgba(216,174,91,.25); background: rgba(8,8,7,.72); backdrop-filter: blur(14px); }
.service-page-facts > div { display: grid; gap: 6px; padding: 21px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.service-page-facts > div:last-child { border-bottom: 0; }
.service-page-facts small { color: var(--gold); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.service-page-facts strong { font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 400; }
.service-page-details,.service-page-fit,.service-page-faq { width: min(calc(100% - 72px),1320px); margin-inline: auto; }
.service-page-details { padding: 120px 0 130px; }
.service-page-heading { display: grid; grid-template-columns: .85fr 1.15fr; align-items: end; gap: 70px; margin-bottom: 64px; }
.service-page-heading h2,.service-page-fit h2,.service-page-faq h2 { margin: 14px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(48px,5.5vw,76px); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.service-page-heading h2 em,.service-page-fit h2 em,.service-page-faq h2 em { color: #9b7228; font-weight: 400; }
.service-highlight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.service-highlight-grid article { position: relative; min-height: 275px; padding: 32px; overflow: hidden; border: 1px solid rgba(9,9,8,.12); background: rgba(255,255,255,.68); box-shadow: 0 20px 50px rgba(50,37,15,.055); }
.service-highlight-grid article > * { position: relative; z-index: 1; }
.service-highlight-grid article > span { color: #9b7228; font-family: Georgia,"Times New Roman",serif; font-size: 12px; font-style: italic; }
.service-highlight-grid h3 { margin: 72px 0 14px; font-family: Georgia,"Times New Roman",serif; font-size: 26px; font-weight: 400; }
.service-highlight-grid p { margin: 0; color: #6f6a61; font-size: 11px; line-height: 1.75; }
.service-booking-guide { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(55px,8vw,120px); padding: 110px max(5vw,calc((100vw - 1320px)/2)); background: radial-gradient(circle at 8% 90%,rgba(216,174,91,.13),transparent 32%),#11100e; color: #fff; }
.service-booking-guide h2 { margin: 14px 0 22px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(47px,5vw,72px); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.service-booking-guide h2 em { color: var(--gold); font-weight: 400; }
.service-booking-guide > div > p:not(.eyebrow) { max-width: 530px; margin: 0 0 29px; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.8; }
.service-booking-guide ol { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); list-style: none; }
.service-booking-guide li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 25px 5px; border-bottom: 1px solid rgba(255,255,255,.14); }
.service-booking-guide li > span { color: var(--gold); font-family: Georgia,"Times New Roman",serif; font-size: 12px; font-style: italic; }
.service-booking-guide li div { display: grid; gap: 8px; }
.service-booking-guide li strong { font-family: Georgia,"Times New Roman",serif; font-size: 20px; font-weight: 400; }
.service-booking-guide li p { margin: 0; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.6; }
.service-page-fit { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(60px,9vw,130px); padding: 120px 0; }
.service-page-fit ul { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid rgba(9,9,8,.14); list-style: none; }
.service-page-fit li { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 13px; min-height: 65px; border-bottom: 1px solid rgba(9,9,8,.14); font-family: Georgia,"Times New Roman",serif; font-size: 18px; }
.service-page-fit li span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #11100e; color: var(--gold); font-family: sans-serif; font-size: 9px; }
.service-page-faq { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(55px,8vw,115px); padding: 20px 0 130px; }
.service-page-faq details { border-top: 1px solid rgba(9,9,8,.15); }
.service-page-faq details:last-child { border-bottom: 1px solid rgba(9,9,8,.15); }
.service-page-faq summary { display: grid; grid-template-columns: 40px 1fr 30px; align-items: center; gap: 15px; min-height: 83px; cursor: pointer; font-family: Georgia,"Times New Roman",serif; font-size: 18px; list-style: none; }
.service-page-faq summary::-webkit-details-marker { display: none; }
.service-page-faq summary span { color: #9b7228; font-size: 9px; font-style: italic; }
.service-page-faq summary b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(9,9,8,.18); border-radius: 50%; font-family: sans-serif; font-size: 12px; font-weight: 400; }
.service-page-faq details[open] summary b { background: #11100e; color: var(--gold); transform: rotate(45deg); }
.service-page-faq details p { margin: -5px 45px 26px 55px; color: #6c675e; font-size: 11px; line-height: 1.75; }
.service-related { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding: 95px max(5vw,calc((100vw - 1320px)/2)); background: #171612; color: #fff; }
.service-related h2 { margin: 14px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(40px,4.7vw,66px); font-weight: 400; letter-spacing: -.04em; }
.service-related > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-related > div:last-child a { display: grid; gap: 14px; min-height: 185px; padding: 27px; border: 1px solid rgba(216,174,91,.22); background: rgba(255,255,255,.025); transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.service-related > div:last-child a:hover { transform: translateY(-3px); border-color: rgba(216,174,91,.55); background: rgba(216,174,91,.06); }
.service-related small { color: rgba(255,255,255,.4); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.service-related strong { font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 400; }
.service-related a span { align-self: end; color: var(--gold); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.service-page-footer { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 30px; width: 100%; padding: 35px max(5vw,calc((100vw - 1320px)/2)); background: #090908; color: rgba(255,255,255,.48); }
.service-page-footer img { width: 65px; height: 55px; object-fit: contain; }
.service-page-footer p { margin: 0; text-align: center; }
.service-page-footer div { display: flex; gap: 22px; }
.service-page-footer a:hover { color: var(--gold); }
.service-mobile-cta { display: none; }

@media (max-width: 900px) {
  .service-page-header { grid-template-columns: 1fr auto; }
  .service-page-header nav { display: none; }
  .service-page-hero { grid-template-columns: 1fr; min-height: 760px; }
  .service-page-facts { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 45px; }
  .service-page-facts > div { border-right: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
  .service-page-facts > div:last-child { border-right: 0; }
  .service-page-heading,.service-page-fit,.service-page-faq,.service-related { grid-template-columns: 1fr; }
  .service-page-heading { gap: 25px; }
  .service-page-faq,.service-related { gap: 48px; }
  .service-page-footer { grid-template-columns: 100px 1fr; }
  .service-page-footer p { text-align: right; }
  .service-page-footer div { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 680px) {
  .service-page { padding-bottom: 68px; }
  .service-page-header { top: 9px; width: calc(100% - 18px); min-height: 61px; padding: 6px 8px 6px 13px; }
  .service-page-brand img { width: 55px; height: 46px; }
  .service-page-header .button { min-height: 40px; padding: 0 16px; font-size: 8px; }
  .service-page-hero { min-height: 720px; padding: 110px 20px 38px; }
  .service-page-hero::before { background: linear-gradient(90deg,rgba(4,4,3,.93),rgba(4,4,3,.54)),linear-gradient(0deg,rgba(4,4,3,.96),transparent 55%); }
  .service-page-hero-media img { object-position: 60% 25%; }
  .service-breadcrumbs { margin-bottom: 34px; }
  .service-page-hero h1 { margin-top: 13px; font-size: clamp(45px,14vw,64px); }
  .service-page-hero-copy > p:not(.eyebrow) { font-size: 12px; }
  .service-page-actions { align-items: stretch; flex-direction: column; gap: 17px; }
  .service-page-actions > a { width: 100%; justify-content: center; text-align: center; }
  .service-page-facts { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .service-page-facts > div { padding: 15px; }
  .service-page-facts > div:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); }
  .service-page-facts strong { font-size: 15px; }
  .service-page-details,.service-page-fit,.service-page-faq { width: calc(100% - 40px); }
  .service-page-details { padding: 78px 0 85px; }
  .service-page-heading h2,.service-page-fit h2,.service-page-faq h2 { font-size: 43px; }
  .service-highlight-grid { grid-template-columns: 1fr; }
  .service-highlight-grid article { min-height: 220px; padding: 26px; }
  .service-highlight-grid h3 { margin-top: 48px; }
  .service-booking-guide { grid-template-columns: 1fr; gap: 48px; padding: 80px 20px; }
  .service-booking-guide h2 { font-size: 45px; }
  .service-page-fit { gap: 42px; padding: 82px 0; }
  .service-page-fit li { font-size: 16px; }
  .service-page-faq { gap: 40px; padding: 10px 0 85px; }
  .service-page-faq summary { grid-template-columns: 29px 1fr 28px; gap: 9px; min-height: 74px; font-size: 15px; }
  .service-page-faq details p { margin: 0 35px 24px 38px; }
  .service-related { gap: 40px; padding: 72px 20px; }
  .service-related > div:last-child { grid-template-columns: 1fr; }
  .service-related > div:last-child a { min-height: 155px; }
  .service-page-footer { grid-template-columns: 1fr; padding: 34px 20px; text-align: center; }
  .service-page-footer > a { width: max-content; margin: 0 auto; }
  .service-page-footer p { text-align: center; }
  .service-page-footer div { grid-column: auto; flex-wrap: wrap; justify-content: center; }
  .service-mobile-cta { position: fixed; z-index: 20; right: 9px; bottom: 8px; left: 9px; display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 21px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: #d8ae5b; color: #111; box-shadow: 0 12px 35px rgba(0,0,0,.28); font-size: 9px; font-weight: 850; text-transform: uppercase; }
}

@media (prefers-reduced-motion: reduce) {
  .service-related > div:last-child a { transition: none; }
}

/* Sistema de movimiento premium Leveling */
@keyframes leveling-route-enter {
  from { opacity: .01; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes leveling-stage-enter {
  from { opacity: .01; transform: translate3d(16px, 0, 0) scale(.994); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes leveling-header-drop {
  from { opacity: 0; transform: translate3d(0, -18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes leveling-gold-text {
  0%, 18%, 100% { background-position: 115% 50%; }
  52%, 68% { background-position: -15% 50%; }
}

@keyframes leveling-ambient-drift {
  0%, 100% { opacity: .22; transform: translate3d(-4%, -2%, 0) scale(1); }
  50% { opacity: .38; transform: translate3d(5%, 3%, 0) scale(1.08); }
}

@keyframes leveling-toast-pop {
  0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.94); }
  65% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.015); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.leveling-scroll-progress {
  --leveling-scroll: 0;
  position: fixed;
  z-index: 160;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--leveling-scroll));
  transform-origin: left center;
  background: linear-gradient(90deg, #9c6c22, #f1d28e 62%, #fff1c6);
  box-shadow: 0 0 15px rgba(235, 193, 105, .58);
  transition: transform 80ms linear;
}

body > main { animation: leveling-route-enter .55s cubic-bezier(.16, 1, .3, 1) both; }

.leveling-motion-ready .leveling-reveal {
  opacity: .01;
  filter: blur(3px);
  transform: translate3d(0, 26px, 0) scale(.992);
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1),
    filter .72s cubic-bezier(.16, 1, .3, 1),
    transform .72s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--leveling-order, 0) * 55ms);
  will-change: opacity, filter, transform;
}

.leveling-motion-ready .leveling-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

.site-header,
.shop-header,
.service-page-header,
.customer-booking-header { animation: leveling-header-drop .72s cubic-bezier(.16, 1, .3, 1) both; }

.admin-sidebar { animation: leveling-header-drop .62s cubic-bezier(.16, 1, .3, 1) both; }
.admin-section-stage,
.barber-view-stage { animation: leveling-stage-enter .46s cubic-bezier(.16, 1, .3, 1) both; }

.official-logo,
.admin-brand img,
.shop-brand img,
.service-page-brand img,
.customer-booking-header img,
.staff-login-brand img {
  transition: filter .42s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.brand:hover .official-logo,
.admin-brand:hover img,
.shop-brand:hover img,
.service-page-brand:hover img,
.customer-booking-header a:hover img,
.staff-login-brand a:hover img {
  filter: drop-shadow(0 11px 22px rgba(216, 174, 91, .28));
  transform: translateY(-2px) scale(1.045) rotate(-1deg);
}

.desktop-nav a,
.shop-header nav a,
.service-page-header nav a { position: relative; }

.desktop-nav a::after,
.shop-header nav a::after,
.service-page-header nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  content: "";
  transform: scaleX(0);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}

.desktop-nav a:hover::after,
.shop-header nav a:hover::after,
.service-page-header nav a:hover::after { transform: scaleX(1); }

.hero-overlay::after {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 67% 36%, rgba(222, 174, 82, .25), transparent 28%);
  content: "";
  pointer-events: none;
  animation: leveling-ambient-drift 13s ease-in-out infinite;
}

.hero h1 em,
.agenda-heading h2 em,
.section-heading h2 em,
.public-barbers-heading h2 em,
.reviews-copy h2 em,
.faq-intro h2 em,
.visit-copy h2 em,
.loyalty-public h2 em,
.product-copy h2 em,
.booking-copy h2 em,
.shop-hero h1 em,
.shop-section-heading h2 em,
.service-page-hero h1 em,
.service-page-heading h2 em,
.service-page-fit h2 em,
.service-page-faq h2 em,
.customer-booking-intro h1 em {
  color: transparent;
  background: linear-gradient(100deg, #9a6d25 0%, #d6a94e 34%, #fff0b9 49%, #d6a94e 63%, #9a6d25 100%);
  background-clip: text;
  background-size: 240% 100%;
  -webkit-background-clip: text;
  animation: leveling-gold-text 8.5s ease-in-out infinite;
}

.hero h1 em,
.shop-hero h1 em,
.service-page-hero h1 em,
.loyalty-public h2 em,
.product-copy h2 em,
.booking-copy h2 em,
.customer-booking-intro h1 em {
  background-image: linear-gradient(100deg, #c69238 0%, #ebca83 34%, #fff5d5 49%, #ebca83 63%, #c69238 100%);
}

.eyebrow span { transform-origin: left center; transition: width .55s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; }
.leveling-reveal.is-visible .eyebrow span,
.eyebrow:hover span { width: 52px; }

.hero-proof div { transition: background .28s ease, transform .32s cubic-bezier(.16, 1, .3, 1); }
.hero-proof div:hover { background: rgba(215, 173, 89, .1); transform: translateY(-3px); }

.button,
.header-cta,
.booking-button,
.mobile-booking-primary,
.mobile-booking-team,
.wizard-next,
.checkout-button,
.product-add > button,
.staff-login-submit,
.customer-booking-card form > button,
.service-mobile-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::after,
.header-cta::after,
.booking-button::after,
.mobile-booking-primary::after,
.mobile-booking-team::after,
.wizard-next::after,
.checkout-button::after,
.product-add > button::after,
.staff-login-submit::after,
.customer-booking-card form > button::after,
.service-mobile-cta::after {
  position: absolute;
  z-index: 0;
  inset: -50% auto -50% -42%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, .62), transparent);
  content: "";
  pointer-events: none;
  transform: translate3d(-160%, 0, 0) skewX(-18deg);
  transition: transform .78s cubic-bezier(.16, 1, .3, 1);
}

.button:hover::after,
.header-cta:hover::after,
.booking-button:hover::after,
.mobile-booking-primary:hover::after,
.mobile-booking-team:hover::after,
.wizard-next:hover::after,
.checkout-button:hover::after,
.product-add > button:hover::after,
.staff-login-submit:hover::after,
.customer-booking-card form > button:hover::after,
.service-mobile-cta:hover::after { transform: translate3d(560%, 0, 0) skewX(-18deg); }

.button > *,
.header-cta > *,
.booking-button > *,
.mobile-booking-primary > *,
.mobile-booking-team > *,
.wizard-next > *,
.checkout-button > *,
.product-add > button > *,
.staff-login-submit > *,
.customer-booking-card form > button > *,
.service-mobile-cta > * { position: relative; z-index: 1; }

.service-card,
.public-barber-card,
.experience-points article,
.product-items > div,
.product-grid > article,
.shop-cart,
.customer-booking-card,
.staff-login-panel > form,
.service-highlight-grid article,
.service-related > div:last-child a,
.admin-stats article,
.barber-portal-stats article,
.inventory-stats article {
  transition:
    border-color .32s ease,
    box-shadow .42s cubic-bezier(.16, 1, .3, 1),
    transform .42s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .experience-points article:hover,
  .product-items > div:hover,
  .product-grid > article:hover,
  .shop-cart:hover,
  .customer-booking-card:hover,
  .staff-login-panel > form:hover,
  .service-highlight-grid article:hover,
  .admin-stats article:hover,
  .barber-portal-stats article:hover,
  .inventory-stats article:hover {
    border-color: rgba(180, 133, 49, .34);
    box-shadow: 0 24px 58px rgba(47, 34, 13, .13);
    transform: translateY(-5px);
  }

  .product-grid > article:hover .product-image img { transform: scale(1.06); }
}

.product-image img { transition: filter .48s ease, transform .72s cubic-bezier(.16, 1, .3, 1); }
.product-grid > article:hover .product-image img { filter: saturate(1.05) contrast(1.025); }

.admin-stats article,
.barber-portal-stats article,
.inventory-stats article { position: relative; overflow: hidden; }

.admin-stats article::after,
.barber-portal-stats article::after,
.inventory-stats article::after {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c7953f, #f0d28f, transparent);
  content: "";
  transform: scaleX(0);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}

.admin-stats article:hover::after,
.barber-portal-stats article:hover::after,
.inventory-stats article:hover::after { transform: scaleX(1); }

.admin-sidebar nav a,
.admin-sidebar nav button { position: relative; overflow: hidden; transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1); }
.admin-sidebar nav a::before,
.admin-sidebar nav button::before { position: absolute; inset: 10px auto 10px 0; width: 2px; border-radius: 99px; background: var(--gold-bright); content: ""; transform: scaleY(0); transition: transform .25s ease; }
.admin-sidebar nav a:hover,
.admin-sidebar nav button:hover { transform: translateX(3px); }
.admin-sidebar nav a.active::before,
.admin-sidebar nav button.active::before { transform: scaleY(1); }

.barber-portal-tabs button,
.barber-filter button,
.shop-filters button,
.purchase-mode-picker button,
.payment-option,
.identity-picker button {
  transition: border-color .24s ease, background .24s ease, box-shadow .3s ease, color .24s ease, transform .26s cubic-bezier(.16, 1, .3, 1);
}

.barber-portal-tabs button:active,
.barber-filter button:active,
.shop-filters button:active,
.purchase-mode-picker button:active,
.identity-picker button:active { transform: scale(.97); }

.quick-agenda-dialog,
.product-modal > article,
.customer-change-panel { transform-origin: center top; }

.admin-error,
.admin-notice,
.staff-login-error,
.wizard-error,
.shop-error,
.shop-success,
.customer-booking-error,
.customer-booking-notice,
.shop-cart-toast { animation: leveling-toast-pop .42s cubic-bezier(.16, 1, .3, 1) both; }

.quick-agenda-close,
.product-modal-close { transition: border-color .25s ease, background .25s ease, color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.quick-agenda-close:hover,
.product-modal-close:hover { transform: rotate(90deg) scale(1.06); }

.booking-app input,
.booking-app select,
.booking-app textarea,
.shop-checkout input,
.shop-checkout textarea,
.admin-content input,
.admin-content select,
.admin-content textarea,
.barber-portal input,
.barber-portal select,
.barber-portal textarea {
  transition: border-color .22s ease, background .22s ease, box-shadow .28s ease, transform .22s ease;
}

.booking-app input:focus,
.booking-app select:focus,
.booking-app textarea:focus,
.shop-checkout input:focus,
.shop-checkout textarea:focus,
.admin-content input:focus,
.admin-content select:focus,
.admin-content textarea:focus,
.barber-portal input:focus,
.barber-portal select:focus,
.barber-portal textarea:focus {
  border-color: rgba(162, 116, 38, .72);
  box-shadow: 0 0 0 3px rgba(177, 132, 52, .11), 0 9px 24px rgba(58, 41, 14, .07);
  outline: 0;
  transform: translateY(-1px);
}

@media (max-width: 800px) {
  .leveling-motion-ready .leveling-reveal {
    filter: none;
    transform: translate3d(0, 15px, 0);
    transition-duration: .55s;
    transition-delay: calc(var(--leveling-order, 0) * 32ms);
  }

  .leveling-motion-ready .leveling-reveal.is-visible { transform: translate3d(0, 0, 0); }
  .leveling-scroll-progress { height: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .leveling-scroll-progress { transition: none; }
  body > main,
  .site-header,
  .shop-header,
  .service-page-header,
  .customer-booking-header,
  .admin-sidebar,
  .admin-section-stage,
  .barber-view-stage,
  .hero-overlay::after,
  .hero h1 em,
  .agenda-heading h2 em,
  .section-heading h2 em,
  .public-barbers-heading h2 em,
  .reviews-copy h2 em,
  .faq-intro h2 em,
  .visit-copy h2 em,
  .loyalty-public h2 em,
  .product-copy h2 em,
  .booking-copy h2 em,
  .shop-hero h1 em,
  .shop-section-heading h2 em,
  .service-page-hero h1 em,
  .service-page-heading h2 em,
  .service-page-fit h2 em,
  .service-page-faq h2 em,
  .customer-booking-intro h1 em,
  .admin-error,
  .admin-notice,
  .staff-login-error,
  .wizard-error,
  .shop-error,
  .shop-success,
  .customer-booking-error,
  .customer-booking-notice,
  .shop-cart-toast { animation: none !important; }

  .leveling-motion-ready .leveling-reveal,
  .leveling-motion-ready .leveling-reveal.is-visible {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .button::after,
  .header-cta::after,
  .booking-button::after,
  .mobile-booking-primary::after,
  .mobile-booking-team::after,
  .wizard-next::after,
  .checkout-button::after,
  .product-add > button::after,
  .staff-login-submit::after,
  .customer-booking-card form > button::after,
  .service-mobile-cta::after { display: none; }
}

/* Reserva interactiva y tarjetas doradas v3 */
@keyframes leveling-panel-gold-pass {
  0%, 58% { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-18deg); }
  66% { opacity: .72; }
  82%, 100% { opacity: 0; transform: translate3d(620%, 0, 0) skewX(-18deg); }
}

@keyframes booking-loader-spin {
  to { transform: rotate(360deg); }
}

.schedule-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  align-items: start;
  gap: 15px;
}

.booking-date-professional-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  align-items: start;
  gap: 15px;
}

.booking-available-barbers {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(116,81,26,.15);
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(247,241,229,.91));
  box-shadow: 0 18px 48px rgba(47,34,13,.08),inset 0 1px rgba(255,255,255,.9);
}

.booking-available-barbers > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 53px;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(9,9,8,.08);
}

.booking-available-barbers > header > div { display: grid; gap: 4px; }
.booking-available-barbers > header small { color: #956b25; font-size: 7px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.booking-available-barbers > header strong { font-family: Georgia,"Times New Roman",serif; font-size: 19px; font-weight: 400; }
.booking-available-barbers > header > span { max-width: 150px; color: #716a60; font-size: 8px; line-height: 1.35; text-align: right; text-transform: capitalize; }

.booking-barber-prompt {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  min-height: 210px;
  padding: 22px;
  border: 1px dashed rgba(150,107,37,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.5);
}

.booking-barber-prompt > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #181713; color: var(--gold-bright); font-size: 18px; }
.booking-barber-prompt > div { display: grid; gap: 6px; }
.booking-barber-prompt strong { color: #312d26; font-family: Georgia,"Times New Roman",serif; font-size: 19px; font-weight: 400; }
.booking-barber-prompt p { margin: 0; color: #6b655b; font-size: 11px; line-height: 1.55; }

.booking-calendar-selected.pending { border-color: rgba(150,107,37,.2); background: #f5efe3; }
.booking-calendar-selected.pending > span { background: #8d6726; color: #fff; }

.booking-step-context {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  max-width: 760px;
  margin: -8px auto 15px;
}

.booking-step-context > div {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid rgba(9,9,8,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.72);
}

.booking-step-context small { grid-column: 1; color: #956b25; font-size: 7px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.booking-step-context strong { grid-column: 1; overflow: hidden; color: #363129; font-size: 11px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.booking-step-context button { grid-column: 2; grid-row: 1 / 3; padding: 7px 10px; border: 1px solid rgba(9,9,8,.12); border-radius: 999px; background: #fff; color: #6f5525; cursor: pointer; font-size: 8px; font-weight: 800; }

.schedule-picker.booking-time-only { grid-template-columns: minmax(0,760px); justify-content: center; }
.booking-time-only .booking-times-card { width: 100%; min-height: 360px; }

.booking-calendar-card,
.booking-times-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(116, 81, 26, .15);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(247,241,229,.91));
  box-shadow: 0 18px 48px rgba(47, 34, 13, .08), inset 0 1px rgba(255,255,255,.9);
  isolation: isolate;
}

.booking-calendar-card { padding: 20px; }
.booking-times-card { min-height: 100%; padding: 20px; }

.booking-calendar-card::after,
.booking-times-card::after {
  position: absolute;
  z-index: 0;
  top: -45%;
  bottom: -45%;
  left: -42%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(235,190,100,.08), rgba(255,235,179,.55), rgba(199,143,47,.12), transparent);
  content: "";
  pointer-events: none;
  transform: translate3d(-180%, 0, 0) skewX(-18deg);
  animation: leveling-panel-gold-pass 9s cubic-bezier(.2,.65,.3,1) infinite;
}

.booking-times-card::after { animation-delay: -4.5s; }
.booking-calendar-card > *,
.booking-times-card > * { position: relative; z-index: 1; }

.booking-calendar-header,
.booking-times-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 53px;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(9,9,8,.08);
}

.booking-calendar-header > div,
.booking-times-header > div { display: grid; gap: 4px; }
.booking-calendar-header small,
.booking-times-header small {
  color: #956b25;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.booking-calendar-header strong,
.booking-times-header strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
}

.booking-calendar-header > span,
.booking-times-header > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(9,9,8,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #716a60;
  font-size: 7px;
  font-weight: 750;
  white-space: nowrap;
}

.booking-calendar-header > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4e8a5e;
  box-shadow: 0 0 0 3px rgba(78,138,94,.12);
}

.booking-calendar-weekdays,
.booking-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.booking-calendar-weekdays { margin-bottom: 6px; }
.booking-calendar-weekdays span {
  padding: 3px 0;
  color: #918a7e;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.booking-calendar-grid > i { min-height: 61px; }
.booking-calendar-grid button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 61px;
  padding: 6px 2px;
  border: 1px solid rgba(9,9,8,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  cursor: pointer;
  transition: transform .24s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease, box-shadow .24s ease;
}

.booking-calendar-grid button small,
.booking-calendar-grid button span {
  color: #8c8579;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.booking-calendar-grid button strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.booking-calendar-grid button.today::before {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bd8730;
  content: "";
}

.booking-calendar-grid button:hover {
  z-index: 1;
  transform: translateY(-3px);
  border-color: rgba(166,119,39,.42);
  box-shadow: 0 10px 20px rgba(56,40,14,.1);
}

.booking-calendar-grid button.active {
  border-color: #171612;
  background:
    radial-gradient(circle at 80% 0%, rgba(216,174,91,.24), transparent 38%),
    #171612;
  color: #fff;
  box-shadow: 0 12px 25px rgba(20,17,12,.2), inset 0 0 0 1px rgba(216,174,91,.2);
  transform: translateY(-2px);
}

.booking-calendar-grid button.active small,
.booking-calendar-grid button.active span { color: #dbb563; }
.booking-calendar-grid button.active.today::before { background: #f4cf82; }

.booking-calendar-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid rgba(151,108,36,.14);
  border-radius: 12px;
  background: rgba(239,230,211,.62);
}

.booking-calendar-selected > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #191713;
  color: var(--gold-bright);
  font-size: 11px;
}

.booking-calendar-selected p { display: grid; gap: 3px; min-width: 0; margin: 0; }
.booking-calendar-selected small { color: #8c8375; font-size: 6px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.booking-calendar-selected strong { overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }

.time-groups { display: grid; align-content: start; gap: 16px; }
.time-group { display: grid; gap: 8px; }
.time-group > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.time-group > div:first-child strong { color: #4b463e; font-size: 9px; }
.time-group > div:first-child small { color: #918a7e; font-size: 7px; }
.booking-times-card .time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }

.booking-times-card .time-grid button {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 50px;
  padding: 7px 3px;
  border-color: rgba(9,9,8,.12);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
}

.booking-times-card .time-grid button > span { font-size: 12px; font-weight: 800; }
.booking-times-card .time-grid button > small { color: #9a9387; font-size: 6px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.booking-times-card .time-grid button:hover { border-color: #a7762d; background: #fff8e9; color: #42341e; }
.booking-times-card .time-grid button.active {
  border-color: #171612;
  background: #171612;
  color: var(--gold-bright);
  box-shadow: 0 10px 24px rgba(20,17,12,.18);
}
.booking-times-card .time-grid button.active > small { color: rgba(255,255,255,.56); }

.booking-slots-message {
  align-content: center;
  gap: 10px;
  min-height: 210px;
  border-radius: 14px;
  background: rgba(255,255,255,.56);
}

.booking-slots-message strong { color: #4d473e; font-size: 12px; }
.booking-slots-message small { max-width: 330px; color: #746d62; font-size: 9px; line-height: 1.55; text-align: center; }
.booking-slots-skeleton {
  display: grid;
  align-content: start;
  gap: 20px;
  min-height: 210px;
  padding: 18px 2px 4px;
}

.booking-skeleton-status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

.booking-skeleton-status p { display: grid; gap: 3px; margin: 0; }
.booking-skeleton-status strong { color: #4d473e; font-size: 11px; }
.booking-skeleton-status small { color: #746d62; font-size: 9px; line-height: 1.45; }
.booking-skeleton-time-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.booking-skeleton-time-grid i {
  min-height: 50px;
  border: 1px solid rgba(9,9,8,.06);
  border-radius: 11px;
  background: linear-gradient(105deg,#e8e3d9 22%,#fbf8f1 40%,#e8e3d9 58%);
  background-size: 240% 100%;
  animation: leveling-content-skeleton 1.25s linear infinite;
}
.booking-resource-state .booking-retry-button {
  min-height: 42px;
  padding-inline: 17px;
  border-color: #171612;
  border-radius: 999px;
  background: #171612;
  color: var(--gold-bright);
  font-weight: 850;
  box-shadow: 0 9px 22px rgba(23,22,18,.14);
}

.booking-loader {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(161,117,43,.18);
  border-top-color: #b17f2f;
  border-radius: 50%;
  animation: booking-loader-spin .75s linear infinite;
}

@media (max-width: 680px) {
  .booking-slots-skeleton { min-height: 190px; padding-top: 12px; }
  .booking-skeleton-status { align-items: flex-start; }
  .booking-skeleton-status small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-skeleton-time-grid i { animation: none; }
}

.selected-time-confirmation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(190,138,50,.22);
  border-radius: 14px;
  background: linear-gradient(110deg, #f0e5cf, #fff9ed);
  animation: leveling-panel-in .42s cubic-bezier(.16,1,.3,1) both;
}

.selected-time-confirmation > div { display: grid; gap: 4px; min-width: 0; }
.selected-time-confirmation small { color: #8c6727; font-size: 6px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.selected-time-confirmation strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.selected-time-confirmation .wizard-next { min-height: 41px; padding-inline: 15px; font-size: 8px; white-space: nowrap; }

.time-selection-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 17px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(9,9,8,.08);
  color: #797267;
  font-size: 8px;
}

.time-selection-prompt span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(157,113,39,.25);
  border-radius: 50%;
  color: #9e7029;
}

.schedule-picker + .waitlist-invite { margin-top: 15px; }

.admin-stats article,
.barber-portal-stats article,
.inventory-stats article,
.sales-stats article,
.customer-stats article,
.reminder-stats article,
.commission-stats article,
.barber-admin-grid article,
.admin-booking,
.barber-bookings article,
.weekly-schedule,
.blocks-admin,
.schedule-days article,
.waitlist-list > article,
.barber-waitlist-list article,
.customer-barber-group {
  position: relative;
  overflow: hidden;
  border-color: rgba(116,82,27,.15);
  box-shadow: 0 12px 34px rgba(45,33,13,.055), inset 0 1px rgba(255,255,255,.72);
  isolation: isolate;
  transition: transform .34s cubic-bezier(.16,1,.3,1), border-color .28s ease, box-shadow .34s ease;
}

.admin-stats article::after,
.barber-portal-stats article::after,
.inventory-stats article::after,
.sales-stats article::after,
.customer-stats article::after,
.reminder-stats article::after,
.commission-stats article::after,
.barber-admin-grid article::after,
.admin-booking::after,
.barber-bookings article::after,
.weekly-schedule::after,
.blocks-admin::after,
.schedule-days article::after,
.waitlist-list > article::after,
.barber-waitlist-list article::after,
.customer-barber-group::after {
  position: absolute;
  z-index: 0;
  top: -65%;
  bottom: -65%;
  left: -42%;
  width: 25%;
  height: auto;
  background: linear-gradient(90deg, transparent, rgba(226,180,91,.06), rgba(255,233,174,.38), rgba(190,132,39,.1), transparent);
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-180%,0,0) skewX(-18deg);
  animation: leveling-panel-gold-pass 10.5s cubic-bezier(.2,.65,.3,1) infinite;
}

.admin-stats article > *,
.barber-portal-stats article > *,
.inventory-stats article > *,
.sales-stats article > *,
.customer-stats article > *,
.reminder-stats article > *,
.commission-stats article > *,
.barber-admin-grid article > *,
.admin-booking > *,
.barber-bookings article > *,
.weekly-schedule > *,
.blocks-admin > *,
.schedule-days article > *,
.waitlist-list > article > *,
.barber-waitlist-list article > *,
.customer-barber-group > * { position: relative; z-index: 1; }

.admin-stats article:nth-child(2)::after,
.barber-portal-stats article:nth-child(2)::after,
.inventory-stats article:nth-child(2)::after,
.sales-stats article:nth-child(2)::after,
.customer-stats article:nth-child(2)::after,
.reminder-stats article:nth-child(2)::after,
.commission-stats article:nth-child(2)::after,
.schedule-days article:nth-child(2)::after { animation-delay: -7s; }

.admin-stats article:nth-child(3)::after,
.barber-portal-stats article:nth-child(3)::after,
.inventory-stats article:nth-child(3)::after,
.sales-stats article:nth-child(3)::after,
.customer-stats article:nth-child(3)::after,
.reminder-stats article:nth-child(3)::after,
.commission-stats article:nth-child(3)::after,
.schedule-days article:nth-child(3)::after { animation-delay: -3.5s; }

@media (hover: hover) and (pointer: fine) {
  .admin-stats article:hover,
  .barber-portal-stats article:hover,
  .inventory-stats article:hover,
  .sales-stats article:hover,
  .customer-stats article:hover,
  .reminder-stats article:hover,
  .commission-stats article:hover,
  .barber-admin-grid article:hover,
  .admin-booking:hover,
  .barber-bookings article:hover,
  .schedule-days article:hover,
  .waitlist-list > article:hover,
  .barber-waitlist-list article:hover,
  .customer-barber-group:hover {
    z-index: 1;
    transform: translateY(-4px);
    border-color: rgba(178,130,46,.34);
    box-shadow: 0 22px 50px rgba(45,33,13,.12), inset 0 1px rgba(255,255,255,.86);
  }
}

@media (max-width: 1120px) {
  .schedule-picker,
  .booking-date-professional-layout { grid-template-columns: 1fr; }
  .booking-times-card { min-height: 0; }
}

@media (max-width: 800px) {
  .booking-calendar-card,
  .booking-times-card { border-radius: 17px; }
  .booking-calendar-card { padding: 14px; }
  .booking-times-card { padding: 15px; }
  .booking-calendar-grid > i,
  .booking-calendar-grid button { min-height: 54px; }
  .booking-calendar-grid button:hover,
  .booking-calendar-grid button.active { transform: none; }
  .booking-calendar-card::after,
  .booking-times-card::after,
  .wizard-service-grid button::after,
  .barber-grid button::after { opacity: 0; animation: leveling-panel-gold-pass 11.5s cubic-bezier(.2,.65,.3,1) infinite; }
  .booking-times-card::after,
  .barber-grid button::after { animation-delay: -5.75s; }
}

@media (max-width: 520px) {
  .booking-available-barbers { padding: 14px; border-radius: 17px; }
  .booking-available-barbers > header { align-items: flex-start; }
  .booking-available-barbers > header > span { max-width: 120px; font-size: 7px; }
  .booking-barber-prompt { min-height: 150px; padding: 16px; }
  .booking-step-context { grid-template-columns: 1fr; }
  .booking-calendar-header,
  .booking-times-header { align-items: flex-start; }
  .booking-calendar-header > span { padding: 6px 7px; font-size: 6px; }
  .booking-calendar-header strong,
  .booking-times-header strong { font-size: 17px; }
  .booking-calendar-weekdays,
  .booking-calendar-grid { gap: 3px; }
  .booking-calendar-grid > i,
  .booking-calendar-grid button { min-height: 49px; }
  .booking-calendar-grid button { border-radius: 9px; }
  .booking-calendar-grid button small { display: none; }
  .booking-calendar-grid button strong { font-size: 18px; }
  .booking-calendar-grid button span { font-size: 5px; }
  .booking-calendar-selected strong { font-size: 8px; }
  .booking-times-card .time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selected-time-confirmation { grid-template-columns: 1fr; }
  .selected-time-confirmation .wizard-next { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .loyalty-center-intro::after,
  .booking-calendar-card::after,
  .booking-times-card::after,
  .admin-stats article::after,
  .barber-portal-stats article::after,
  .inventory-stats article::after,
  .sales-stats article::after,
  .customer-stats article::after,
  .reminder-stats article::after,
  .commission-stats article::after,
  .barber-admin-grid article::after,
  .admin-booking::after,
  .barber-bookings article::after,
  .weekly-schedule::after,
  .blocks-admin::after,
  .schedule-days article::after,
  .waitlist-list > article::after,
  .barber-waitlist-list article::after,
  .customer-barber-group::after { animation: none !important; opacity: 0 !important; }
  .booking-loader { animation: none !important; }
  .selected-time-confirmation { animation: none !important; }
}

/* Premium Gift Cards · editor, responsive preview and customer artwork */
.gift-card-editor-premium {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: rgba(163,117,38,.46);
  background: #f8f5ee;
}
.gift-card-editor-premium > header {
  padding: 22px 24px 18px;
  background: radial-gradient(circle at 90% 0,rgba(199,150,56,.16),transparent 32%),#fbfaf6;
}
.gift-card-editor-premium > header p {
  max-width: 600px;
  margin: 5px 0 0;
  color: #79736a;
  font-size: 8px;
  line-height: 1.55;
}
.gift-card-editor-layout {
  display: grid;
  grid-template-columns: minmax(460px,1.06fr) minmax(390px,.94fr);
  gap: 22px;
  padding: 22px 24px;
}
.gift-card-editor-sections {
  display: grid;
  gap: 11px;
}
.gift-card-editor-sections > section {
  overflow: hidden;
  border: 1px solid rgba(23,20,15,.11);
  border-radius: 14px;
  background: #fff;
}
.gift-card-editor-sections > section > header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(23,20,15,.08);
  background: linear-gradient(105deg,#faf8f2,#f5efe4);
}
.gift-card-editor-sections > section > header > span {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(169,121,42,.48);
  border-radius: 50%;
  color: #936821;
  font: 700 8px Georgia,"Times New Roman",serif;
}
.gift-card-editor-sections > section > header > div {
  display: grid;
  gap: 2px;
}
.gift-card-editor-sections > section > header strong {
  color: #1a1712;
  font: 400 14px Georgia,"Times New Roman",serif;
}
.gift-card-editor-sections > section > header small {
  color: #817b72;
  font-size: 7px;
}
.gift-card-editor-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding: 14px 15px 16px;
}
.gift-card-editor-fields .wide {
  grid-column: 1 / -1;
}
.gift-card-editor-premium > footer {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(23,20,15,.09);
  background: #fbfaf6;
}
.gift-card-editor-premium > footer button {
  min-height: 43px;
  padding-inline: 17px;
}
.gift-card-live-preview {
  position: sticky;
  top: 18px;
  align-self: start;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(171,123,43,.36);
  border-radius: 16px;
  background: linear-gradient(145deg,#1b1915,#0d0c0b);
  box-shadow: 0 20px 45px rgba(17,14,9,.15);
}
.gift-card-live-preview > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #fff;
}
.gift-card-live-preview > header > div {
  display: grid;
  gap: 3px;
}
.gift-card-live-preview > header span {
  color: #d7a94f;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gift-card-live-preview > header strong {
  font: 400 14px Georgia,"Times New Roman",serif;
}
.gift-card-live-preview > header > small {
  color: rgba(255,255,255,.46);
  font-size: 6px;
  white-space: nowrap;
}
.gift-card-live-preview > p {
  display: flex;
  gap: 7px;
  margin: 10px 2px 0;
  color: rgba(255,255,255,.55);
  font-size: 7px;
  line-height: 1.5;
}
.gift-card-live-preview > p span {
  color: #ddb45f;
}

.gift-card-latest {
  grid-template-columns: minmax(220px,1fr) auto 30px;
  padding: 15px 16px;
  border-radius: 14px;
  background: radial-gradient(circle at 95% 10%,rgba(219,173,84,.2),transparent 32%),#efe4ce;
}
.gift-card-latest-actions {
  display: flex;
  gap: 6px;
}
.gift-card-latest-actions button:first-child {
  border-color: #11100e;
  background: #11100e;
}
.gift-card-latest-actions button:nth-child(2) {
  background: #9b6f25;
  color: #fff8e8;
}
.gift-card-latest-actions button:nth-child(3) {
  background: transparent;
  color: #6b4c19;
}
.gift-card-latest-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

.gift-card-list {
  gap: 14px;
}
.gift-card-record {
  grid-template-columns: minmax(500px,1.18fr) minmax(310px,.82fr);
  border-color: rgba(147,105,36,.2);
  border-radius: 19px;
  box-shadow: 0 13px 38px rgba(25,20,12,.08);
  transition: transform .24s ease,box-shadow .24s ease;
}
.gift-card-record:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(25,20,12,.12);
}
.gift-card-artwork {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 45.5% 54.5%;
  grid-template-rows: minmax(0,1fr) 7.2%;
  aspect-ratio: 3 / 2;
  min-width: 0;
  min-height: 0;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  background: #070706;
  color: #fff;
}
.gift-card-artwork::before {
  position: absolute;
  z-index: 8;
  inset: 2.15%;
  border: max(1px,.18cqw) solid rgba(211,160,56,.78);
  border-radius: 2.1cqw;
  pointer-events: none;
  content: "";
  box-shadow: inset 0 0 0 1px rgba(255,220,147,.08);
}
.gift-card-artwork::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 12% 10%,rgba(222,168,59,.2),transparent 25%),linear-gradient(110deg,transparent 23%,rgba(229,183,91,.08) 43%,transparent 61%);
  pointer-events: none;
  content: "";
}
.gift-card-grain {
  position: absolute;
  z-index: 7;
  inset: 0;
  opacity: .32;
  pointer-events: none;
  background-image: radial-gradient(circle at 12% 18%,rgba(239,193,99,.4) 0 1px,transparent 1.4px),radial-gradient(circle at 89% 75%,rgba(239,193,99,.24) 0 1px,transparent 1.5px);
  background-size: 31px 37px,41px 47px;
  mask-image: linear-gradient(115deg,#000,transparent 23%,transparent 76%,#000);
}
.gift-card-brand-panel,
.gift-card-details-panel,
.gift-card-contact {
  position: relative;
  z-index: 2;
}
.gift-card-brand-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5.8% 7.8% 4.3%;
  border-right: max(1px,.18cqw) solid rgba(200,149,50,.65);
  background: radial-gradient(circle at 50% 14%,rgba(181,126,26,.2),transparent 34%),linear-gradient(145deg,#15140f,#050504);
  text-align: center;
}
.gift-card-logo {
  width: min(53%,220px);
  height: auto;
  margin-top: -1%;
  object-fit: contain;
  filter: drop-shadow(0 1.4cqw 1.5cqw rgba(0,0,0,.38));
}
.gift-card-stars {
  margin-top: -2.5%;
  color: #d3a447;
  font-size: clamp(7px,1.25cqw,14px);
  letter-spacing: .27em;
}
.gift-card-title {
  display: grid;
  justify-items: center;
  margin-top: 2.4%;
}
.gift-card-title small {
  color: rgba(255,255,255,.52);
  font-size: clamp(6px,.82cqw,10px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.gift-card-title strong {
  color: #f0eee9;
  font: 800 clamp(20px,4.2cqw,48px)/1 Georgia,"Times New Roman",serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 .3cqw .7cqw rgba(0,0,0,.55);
}
.gift-card-benefit {
  position: relative;
  display: grid;
  width: 90%;
  min-height: 18%;
  place-content: center;
  margin-top: 3%;
  padding: 2.5% 6%;
  overflow: hidden;
  border: 1px solid rgba(255,226,156,.27);
  border-radius: 1.3cqw;
  background: linear-gradient(100deg,#714809,#d6a43c 19%,#f0cf75 49%,#cb9130 81%,#684005);
  color: #151109;
  box-shadow: 0 1cqw 2cqw rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.42);
}
.gift-card-benefit::after {
  position: absolute;
  inset: -40% auto -40% -35%;
  width: 22%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  content: "";
  transform: skewX(-17deg);
  animation: giftCardGoldSweep 6.5s ease-in-out infinite;
}
.gift-card-benefit small {
  font-size: clamp(6px,.75cqw,9px);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.gift-card-benefit strong {
  max-width: 100%;
  overflow: hidden;
  font: 900 clamp(12px,2.05cqw,25px)/1.08 Arial,sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.gift-card-code {
  display: grid;
  width: 75%;
  margin-top: 4.2%;
  padding: 2.2% 3.2% 1.7%;
  border-radius: 1.1cqw;
  background: #f6f6f3;
}
.gift-card-code b {
  overflow: hidden;
  color: #11100e;
  font-size: clamp(6px,.75cqw,9px);
  letter-spacing: .16em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gift-card-details-panel {
  display: grid;
  align-content: center;
  gap: 3.4%;
  min-width: 0;
  padding: 7% 8% 5%;
  background: linear-gradient(90deg,rgba(7,7,6,.98),rgba(7,7,6,.85) 54%,rgba(7,7,6,.65)),url("/images/hero.webp") 64% center/cover no-repeat;
}
.gift-card-details-panel > header {
  padding-bottom: 3%;
  border-bottom: max(1px,.16cqw) solid rgba(201,150,50,.8);
}
.gift-card-details-panel small,
.gift-card-personal-data dt {
  color: #c89532;
  font-size: clamp(6px,.88cqw,11px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gift-card-details-panel h3 {
  max-width: 100%;
  margin: .6% 0 0;
  overflow: hidden;
  color: #f2f0eb;
  font: 800 clamp(17px,3.35cqw,40px)/1.02 Georgia,"Times New Roman",serif;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.gift-card-personal-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4%;
  margin: 0;
}
.gift-card-personal-data div {
  display: grid;
  min-width: 0;
  gap: .5cqw;
}
.gift-card-personal-data dd {
  margin: 0;
  overflow: hidden;
  color: rgba(255,255,255,.86);
  font-size: clamp(7px,1.05cqw,13px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gift-card-dedication {
  padding: 3.2% 4%;
  border: max(1px,.13cqw) solid rgba(200,149,50,.65);
  border-radius: 1.3cqw;
  background: rgba(3,3,2,.67);
}
.gift-card-dedication p {
  display: -webkit-box;
  margin: 1.2% 0 0;
  overflow: hidden;
  color: rgba(255,255,255,.88);
  font-size: clamp(7px,1.02cqw,13px);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gift-card-validity {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 3%;
  padding-bottom: 3%;
  border-bottom: max(1px,.14cqw) solid rgba(200,149,50,.52);
}
.gift-card-validity strong {
  color: #f1efea;
  font: 400 clamp(12px,2.05cqw,25px) Arial,sans-serif;
}
.gift-card-conditions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55cqw;
}
.gift-card-conditions > span {
  position: relative;
  padding-left: 1.7cqw;
  color: rgba(255,255,255,.73);
  font-size: clamp(6px,.78cqw,10px);
  line-height: 1.25;
}
.gift-card-conditions > span::before {
  position: absolute;
  left: 0;
  color: #c89532;
  content: "✓";
  font-weight: 900;
}
.gift-card-contact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: .8fr 1.7fr .8fr;
  align-items: center;
  gap: 2%;
  padding: 0 5%;
  border-top: max(1px,.16cqw) solid rgba(200,149,50,.67);
  background: #050504;
  color: rgba(255,255,255,.72);
  font-size: clamp(5px,.68cqw,8px);
  letter-spacing: .035em;
  text-align: center;
}
.gift-card-contact span:first-child {
  text-align: left;
}
.gift-card-contact span:last-child {
  text-align: right;
}
@keyframes giftCardGoldSweep {
  0%,55% { left: -35%; }
  78%,100% { left: 125%; }
}

.gift-card-record-info {
  align-content: center;
  padding: 24px 25px;
  background: radial-gradient(circle at 100% 0,rgba(203,153,60,.09),transparent 34%),#fbfaf6;
}
.gift-card-record-info h4 {
  font-size: 25px;
}
.gift-card-record-info > footer {
  flex-wrap: wrap;
}
.gift-card-record-info > footer button {
  min-height: 34px;
}

@media (max-width: 1240px) {
  .gift-card-editor-layout {
    grid-template-columns: 1fr;
  }
  .gift-card-live-preview {
    position: static;
  }
  .gift-card-record {
    grid-template-columns: 1fr;
  }
  .gift-card-record-info {
    padding: 20px 22px;
  }
}

@media (max-width: 720px) {
  .gift-card-stats {
    gap: 7px;
  }
  .gift-card-editor-premium > header {
    padding: 18px 17px 15px;
  }
  .gift-card-editor-layout {
    gap: 14px;
    padding: 15px;
  }
  .gift-card-editor-fields {
    grid-template-columns: 1fr;
    padding: 13px;
  }
  .gift-card-editor-fields .wide {
    grid-column: auto;
  }
  .gift-card-editor-premium input,
  .gift-card-editor-premium select,
  .gift-card-editor-premium textarea {
    min-height: 46px;
    font-size: 12px;
  }
  .gift-card-editor-premium textarea {
    min-height: 88px;
  }
  .gift-card-editor-premium > footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    padding: 14px 15px 17px;
  }
  .gift-card-live-preview {
    padding: 11px;
  }
  .gift-card-live-preview > header {
    align-items: start;
    flex-direction: column;
  }
  .gift-card-artwork {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 48px;
    aspect-ratio: auto;
    min-height: 650px;
    border-radius: 12px;
  }
  .gift-card-artwork::before {
    inset: 8px;
    border-radius: 10px;
  }
  .gift-card-brand-panel {
    display: grid;
    grid-template-columns: 104px minmax(0,1fr);
    grid-template-rows: auto auto auto;
    gap: 7px 14px;
    justify-items: stretch;
    padding: 27px 25px 21px;
    border-right: 0;
    border-bottom: 1px solid rgba(200,149,50,.65);
    text-align: left;
  }
  .gift-card-logo {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: center;
    width: 104px;
    margin: 0;
  }
  .gift-card-stars {
    display: none;
  }
  .gift-card-title {
    justify-items: start;
    margin: 0;
  }
  .gift-card-title small {
    font-size: 7px;
  }
  .gift-card-title strong {
    font-size: 25px;
  }
  .gift-card-benefit {
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 8px;
    text-align: center;
  }
  .gift-card-benefit small {
    font-size: 7px;
  }
  .gift-card-benefit strong {
    font-size: 14px;
  }
  .gift-card-code {
    width: 100%;
    margin: 0;
    padding: 5px 8px;
    border-radius: 7px;
    text-align: center;
  }
  .gift-card-code svg {
    max-height: 34px;
  }
  .gift-card-code b {
    font-size: 7px;
  }
  .gift-card-details-panel {
    align-content: start;
    gap: 15px;
    padding: 26px 25px 23px;
  }
  .gift-card-details-panel small,
  .gift-card-personal-data dt {
    font-size: 8px;
  }
  .gift-card-details-panel h3 {
    margin-top: 4px;
    font-size: 27px;
  }
  .gift-card-personal-data {
    gap: 13px;
  }
  .gift-card-personal-data dd {
    font-size: 10px;
  }
  .gift-card-dedication {
    padding: 12px 13px;
    border-radius: 9px;
  }
  .gift-card-dedication p {
    margin-top: 4px;
    font-size: 10px;
    -webkit-line-clamp: 3;
  }
  .gift-card-validity {
    gap: 10px;
    padding-bottom: 11px;
  }
  .gift-card-validity strong {
    font-size: 17px;
  }
  .gift-card-conditions {
    gap: 5px;
  }
  .gift-card-conditions > span {
    padding-left: 17px;
    font-size: 9px;
  }
  .gift-card-contact {
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    padding: 7px 21px;
    font-size: 7px;
  }
  .gift-card-contact span:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .gift-card-latest {
    grid-template-columns: 1fr 30px;
  }
  .gift-card-latest-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .gift-card-latest-actions button {
    min-height: 42px;
  }
  .gift-card-latest-actions button:last-child {
    grid-column: 1 / -1;
  }
  .gift-card-record {
    border-radius: 16px;
  }
  .gift-card-record:hover {
    transform: none;
  }
  .gift-card-record-info {
    padding: 18px 16px;
  }
  .gift-card-record-info dl {
    grid-template-columns: 1fr 1fr;
  }
  .gift-card-record-info > footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .gift-card-record-info > footer button {
    min-height: 41px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-card-benefit::after {
    animation: none;
  }
  .gift-card-record {
    transition: none;
  }
}

@media print {
  body * { visibility: hidden !important; }
  .gift-card-print-layer,
  .gift-card-print-layer * { visibility: visible !important; }
  @page { size: landscape; margin: 8mm; }
  .gift-card-print-layer { position: fixed; inset: 0; display: grid !important; place-items: center; padding: 0; background: #fff; }
  .gift-card-print-layer .gift-card-artwork {
    grid-template-columns: 45.5% 54.5%;
    grid-template-rows: minmax(0,1fr) 7.2%;
    width: 270mm;
    min-height: 0;
    aspect-ratio: 3 / 2;
    border-radius: 5mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .gift-card-print-layer .gift-card-brand-panel {
    display: flex;
    padding: 5.8% 7.8% 4.3%;
    border-right: max(1px,.18cqw) solid rgba(200,149,50,.65);
    border-bottom: 0;
    text-align: center;
  }
  .gift-card-print-layer .gift-card-logo {
    width: 53%;
    margin-top: -1%;
  }
  .gift-card-print-layer .gift-card-stars {
    display: inline;
  }
  .gift-card-print-layer .gift-card-title {
    justify-items: center;
    margin-top: 2.4%;
  }
  .gift-card-print-layer .gift-card-benefit {
    width: 90%;
    min-height: 18%;
    margin-top: 3%;
    padding: 2.5% 6%;
  }
  .gift-card-print-layer .gift-card-code {
    width: 75%;
    margin-top: 4.2%;
    padding: 2.2% 3.2% 1.7%;
  }
  .gift-card-print-layer .gift-card-details-panel {
    align-content: center;
    gap: 3.4%;
    padding: 7% 8% 5%;
  }
  .gift-card-print-layer .gift-card-contact {
    grid-template-columns: .8fr 1.7fr .8fr;
    padding: 0 5%;
  }
}

/* Gift Card payment flow */
.gift-card-payment-guide { display: flex; align-items: center; gap: 12px; margin: 12px 0 18px; padding: 14px 16px; border: 1px solid rgba(180,130,35,.28); border-radius: 12px; background: linear-gradient(135deg, rgba(230,190,94,.12), rgba(255,255,255,.55)); }
.gift-card-payment-guide > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #19160f; color: #e4ba55; }
.gift-card-payment-guide > div { display: grid; gap: 4px; }
.gift-card-payment-guide strong { font-size: 10px; }
.gift-card-payment-guide small { color: #777168; font-size: 9px; line-height: 1.45; }
.gift-card-payment-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid rgba(181, 130, 35, .55) !important; border-radius: 999px; background: linear-gradient(135deg, #17140d, #2a2110) !important; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(22,16,4,.12); color: #f6cd6b !important; font-size: 9px; font-weight: 800; letter-spacing: .04em; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gift-card-payment-button:hover { transform: translateY(-1px); border-color: #e5bd58 !important; box-shadow: inset 0 1px rgba(255,255,255,.1), 0 11px 28px rgba(22,16,4,.18); }
.gift-card-payment-button span { font-size: 14px; }
.gift-payment-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 22px; overflow-y: auto; background: rgba(5,5,4,.78); backdrop-filter: blur(12px); }
.gift-payment-modal { position: relative; width: min(780px, 100%); max-height: calc(100vh - 44px); overflow-y: auto; border: 1px solid rgba(222,174,72,.55); border-radius: 24px; background: radial-gradient(circle at 85% 0%, rgba(198,143,37,.16), transparent 31%), linear-gradient(155deg, #171611, #090908 64%); box-shadow: 0 34px 90px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06); color: #f6f2e8; }
.gift-payment-modal::before { content: ""; position: absolute; inset: 0 22px auto; height: 1px; background: linear-gradient(90deg, transparent, #e2b651, transparent); opacity: .8; }
.gift-payment-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 30px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.gift-payment-modal > header small { color: #d4a845; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gift-payment-modal > header h2 { margin: 7px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px, 4vw, 40px); font-weight: 400; line-height: 1; }
.gift-payment-modal > header p { margin: 0; color: #aaa397; font-size: 11px; }
.gift-payment-modal > header > button { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.04); color: #eee7d9; font-size: 23px; cursor: pointer; }
.gift-payment-code-step { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding: 22px 30px; }
.gift-payment-code-step > label { display: grid; gap: 7px; }
.gift-payment-code-step label > span, .gift-identity-check > span { color: #d8d0c1; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gift-payment-code-step label > div { display: grid; grid-template-columns: 1fr auto; }
.gift-payment-code-step input, .gift-identity-check input { min-width: 0; height: 46px; padding: 0 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px 0 0 10px; outline: none; background: rgba(255,255,255,.055); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.gift-payment-code-step input:focus, .gift-identity-check input:focus { border-color: #d8aa42; box-shadow: 0 0 0 3px rgba(216,170,66,.12); }
.gift-payment-code-step label button { min-width: 96px; border: 0; border-radius: 0 10px 10px 0; background: linear-gradient(135deg, #f2cf77, #a87518); color: #100d07; font-size: 10px; font-weight: 900; cursor: pointer; }
.gift-scan-trigger { min-height: 46px; padding: 0 16px; border: 1px solid rgba(220,173,67,.42); border-radius: 10px; background: rgba(220,173,67,.08); color: #edc765; font-size: 10px; font-weight: 800; cursor: pointer; }
.gift-camera { position: relative; margin: 0 30px 22px; overflow: hidden; border: 1px solid rgba(223,176,70,.42); border-radius: 16px; background: #000; aspect-ratio: 16 / 8; }
.gift-camera video { width: 100%; height: 100%; object-fit: cover; }
.gift-camera > span { position: absolute; inset: 22% 10%; border: 2px solid #f1c85c; border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.36), 0 0 28px rgba(241,200,92,.42); }
.gift-camera p { position: absolute; inset: auto 0 10px; margin: 0; color: #fff; font-size: 10px; text-align: center; text-shadow: 0 1px 4px #000; }
.gift-payment-error { margin: 0 30px 20px; padding: 13px 15px; border: 1px solid rgba(207,83,63,.42); border-radius: 10px; background: rgba(154,45,29,.17); color: #ffb5a9; font-size: 11px; }
.gift-payment-confirmation { padding: 0 30px 30px; }
.gift-validation-success { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding: 13px 15px; border: 1px solid rgba(95,181,122,.32); border-radius: 12px; background: rgba(52,139,80,.11); }
.gift-validation-success > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #318c52; color: #fff; font-weight: 900; }
.gift-validation-success div { display: grid; gap: 3px; }
.gift-validation-success strong { font-size: 12px; }
.gift-validation-success small { color: #aeb9ad; font-size: 9px; }
.gift-payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.gift-payment-grid article { display: grid; gap: 5px; min-height: 98px; padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.035); }
.gift-payment-grid article.highlight { border-color: rgba(221,174,66,.45); background: linear-gradient(135deg, rgba(221,174,66,.14), rgba(221,174,66,.04)); }
.gift-payment-grid small { color: #9d968b; font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.gift-payment-grid strong { margin-top: auto; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; }
.gift-payment-grid span { color: #bcb4a7; font-size: 9px; }
.gift-service-mismatch { display: grid; gap: 6px; margin-top: 12px; padding: 14px; border: 1px solid rgba(229,158,53,.38); border-radius: 12px; background: rgba(145,88,13,.15); }
.gift-service-mismatch strong { color: #f1c35a; font-size: 11px; }
.gift-service-mismatch span, .gift-service-mismatch small { color: #cbbfae; font-size: 9px; line-height: 1.5; }
.gift-service-mismatch label { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #f2e6cd; font-size: 9px; font-weight: 700; }
.gift-identity-check { display: grid; gap: 7px; margin-top: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.035); }
.gift-identity-check small { color: #9f988e; font-size: 9px; }
.gift-identity-check input { border-radius: 9px; }
.gift-balance-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; border: 0; }
.gift-balance-method legend { grid-column: 1 / -1; margin-bottom: 7px; color: #d8d0c1; font-size: 10px; }
.gift-balance-method label { display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #aaa397; font-size: 9px; font-weight: 800; cursor: pointer; }
.gift-balance-method label.active { border-color: #d8aa42; background: rgba(216,170,66,.13); color: #f5d47f; }
.gift-balance-method input { position: absolute; opacity: 0; }
.gift-presented-confirm { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.035); cursor: pointer; }
.gift-presented-confirm input { margin-top: 3px; accent-color: #c99d35; }
.gift-presented-confirm > span { display: grid; gap: 4px; }
.gift-presented-confirm strong { color: #eee8dc; font-size: 10px; }
.gift-presented-confirm small { color: #989187; font-size: 9px; line-height: 1.45; }
.gift-payment-confirmation > footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.gift-payment-confirmation > footer button { min-height: 43px; padding: 0 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: transparent; color: #d4cec2; font-size: 10px; font-weight: 800; cursor: pointer; }
.gift-payment-confirmation > footer button.primary { border-color: #d7a83c; background: linear-gradient(135deg, #f2cf77, #a87518); color: #100d07; }
.gift-payment-confirmation > footer button:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 680px) {
  .gift-payment-overlay { place-items: end center; padding: 0; }
  .gift-payment-modal { width: 100%; max-height: 94vh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
  .gift-payment-modal > header { padding: 23px 19px 18px; }
  .gift-payment-code-step { grid-template-columns: 1fr; padding: 18px 19px; }
  .gift-payment-code-step label > div { grid-template-columns: minmax(0, 1fr) 82px; }
  .gift-camera { margin: 0 19px 18px; aspect-ratio: 4 / 3; }
  .gift-payment-error { margin: 0 19px 17px; }
  .gift-payment-confirmation { padding: 0 19px 24px; }
  .gift-payment-grid { grid-template-columns: 1fr; }
  .gift-payment-grid article { min-height: 84px; }
  .gift-balance-method { grid-template-columns: 1fr; }
  .gift-payment-confirmation > footer { display: grid; grid-template-columns: 1fr; }
  .gift-payment-confirmation > footer button.primary { grid-row: 1; }
}

/* Club Leveling · public membership experience */
.home-club {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(330px,.7fr);
  align-items: center;
  gap: clamp(40px,7vw,110px);
  min-height: 650px;
  padding: clamp(70px,8vw,120px) clamp(24px,7vw,120px);
  overflow: hidden;
  background: radial-gradient(circle at 82% 48%,rgba(31,140,218,.22),transparent 24%),linear-gradient(135deg,#080909,#111722 55%,#050608);
  color: #fff;
}
.home-club::before { position: absolute; inset: 18px; border: 1px solid rgba(225,181,98,.18); border-radius: 3px; pointer-events: none; content: ""; }
.home-club-glow { position: absolute; top: -20%; right: 7%; width: 45%; height: 130%; background: linear-gradient(110deg,transparent,rgba(36,157,238,.08),transparent); transform: rotate(12deg); pointer-events: none; }
.home-club-copy { position: relative; z-index: 2; max-width: 720px; }
.home-club-copy h2 { margin: 13px 0 20px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(42px,6vw,86px); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.home-club-copy h2 em { color: #e0b45e; font-weight: 400; }
.home-club-copy > p:not(.eyebrow) { max-width: 620px; color: rgba(255,255,255,.57); font-size: clamp(12px,1.3vw,17px); line-height: 1.7; }
.home-club-copy > div { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.home-club-copy > div > a:last-child { color: rgba(255,255,255,.75); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.home-club-copy ul { display: flex; flex-wrap: wrap; gap: 9px 23px; margin: 31px 0 0; padding: 21px 0 0; border-top: 1px solid rgba(255,255,255,.11); list-style: none; }
.home-club-copy li { color: rgba(255,255,255,.5); font-size: 8px; letter-spacing: .04em; }
.home-club-copy li::before { margin-right: 7px; color: #76d0ff; content: "✓"; }
.home-club-card.membership-plan-card { z-index: 2; justify-self: center; width: min(100%,390px); min-height: 490px; padding: 46px 38px; transform: rotate(3deg); box-shadow: 0 45px 100px rgba(0,0,0,.5),0 0 65px rgba(37,155,232,.24); }
.home-club-card.membership-plan-card:hover { transform: rotate(1deg) translateY(-7px); }
.home-club-card > small { color: rgba(255,255,255,.47); font-size: 8px; letter-spacing: .22em; }
.home-club-card > strong { align-self: center; color: var(--plan-accent); font-family: Georgia,"Times New Roman",serif; font-size: clamp(38px,4vw,57px); font-weight: 400; letter-spacing: -.03em; text-shadow: 0 0 30px var(--plan-glow); }
.home-club-card > p { margin: -95px 0 0; color: rgba(255,255,255,.4); font-size: 8px; letter-spacing: .16em; }
.home-club-card > span:not(.membership-plan-shine):not(.membership-theme-fx):not(.membership-particles) { align-self: end; color: var(--plan-accent); font-size: 56px; }
.home-club-card > b { align-self: end; color: rgba(255,255,255,.42); font-size: 7px; letter-spacing: .18em; }

.club-page, .member-page { min-height: 100vh; overflow-x: hidden; background: #090909; color: #fff; }
.club-header, .member-page-header { position: relative; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 88px; padding: 0 clamp(22px,5vw,76px); border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(8,8,8,.88); backdrop-filter: blur(18px); }
.club-header > a:first-child img, .member-page-header img { width: 66px; height: 66px; object-fit: contain; }
.club-header nav, .member-page-header nav { display: flex; justify-content: center; gap: clamp(18px,3vw,42px); }
.club-header nav a, .member-page-header nav a { color: rgba(255,255,255,.58); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.club-header > a:last-child { display: flex; align-items: center; gap: 18px; min-height: 43px; padding: 0 18px; border: 1px solid rgba(224,181,95,.45); border-radius: 999px; color: #e2b664; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.club-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,.65fr); align-items: center; gap: clamp(50px,8vw,130px); min-height: 780px; padding: clamp(80px,9vw,135px) clamp(24px,7vw,120px); overflow: hidden; background: radial-gradient(circle at 80% 38%,rgba(36,154,235,.2),transparent 24%),radial-gradient(circle at 25% 20%,rgba(199,146,48,.1),transparent 22%),linear-gradient(145deg,#050607,#0d1420 65%,#050607); }
.club-hero::after { position: absolute; inset: 20px; border: 1px solid rgba(217,172,85,.16); pointer-events: none; content: ""; }
.club-hero-glow { position: absolute; inset: 0; pointer-events: none; }
.club-hero-glow i { position: absolute; width: 1px; height: 85%; background: linear-gradient(transparent,rgba(80,193,255,.38),transparent); transform: rotate(32deg); animation: clubHeroTrail 7s linear infinite; }
.club-hero-glow i:nth-child(1) { top: -20%; right: 18%; }
.club-hero-glow i:nth-child(2) { top: -35%; right: 30%; animation-delay: -2.5s; }
.club-hero-glow i:nth-child(3) { top: -15%; right: 42%; animation-delay: -5s; }
@keyframes clubHeroTrail { 0% { opacity: 0; transform: translateY(-20%) rotate(32deg); } 25%,65% { opacity: 1; } 100% { opacity: 0; transform: translateY(65%) rotate(32deg); } }
.club-hero-copy { position: relative; z-index: 2; max-width: 840px; }
.club-hero-copy > p:first-child, .club-section-heading span, .club-comparison > div > span, .club-checkout-closed > span, .club-how > div > span, .member-lookup-intro > span, .member-wallet-heading > span { color: #d8aa55; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.club-hero-copy > p:first-child span { display: inline-block; width: 27px; height: 1px; margin: 0 10px 3px 0; background: #d8aa55; }
.club-hero-copy h1 { margin: 18px 0 23px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(56px,7.7vw,112px); font-weight: 400; line-height: .88; letter-spacing: -.055em; }
.club-hero-copy h1 em { color: #e0b45d; font-weight: 400; }
.club-hero-copy > p:nth-of-type(2) { max-width: 660px; color: rgba(255,255,255,.57); font-size: clamp(13px,1.35vw,18px); line-height: 1.7; }
.club-hero-copy > div { display: flex; align-items: center; gap: 17px; margin-top: 34px; }
.club-hero-copy > div a { display: inline-grid; place-items: center; min-height: 51px; padding: 0 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.73); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.club-hero-copy > div a:first-child { border-color: #c8963f; background: linear-gradient(135deg,#e1ba6b,#9d691c); color: #0c0b09; box-shadow: 0 14px 34px rgba(188,133,40,.25); }
.club-hero-copy ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 35px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.1); list-style: none; }
.club-hero-copy li { color: rgba(255,255,255,.46); font-size: 8px; }
.club-hero-copy li::before { margin-right: 7px; color: #72ccf8; content: "✓"; }
.club-hero-card.membership-plan-card { z-index: 2; justify-self: center; width: min(100%,395px); min-height: 510px; padding: 43px 36px; transform: perspective(1000px) rotateY(-7deg) rotateZ(2deg); box-shadow: 30px 45px 100px rgba(0,0,0,.55),0 0 80px rgba(32,153,234,.22); }
.club-hero-card > small { color: rgba(255,255,255,.5); font-size: 8px; letter-spacing: .2em; }
.club-hero-card > strong { align-self: center; color: var(--plan-accent); font-family: Georgia,"Times New Roman",serif; font-size: 52px; font-weight: 400; text-shadow: 0 0 32px var(--plan-glow); }
.club-hero-card > p { margin-top: -105px; color: rgba(255,255,255,.43); font-size: 8px; letter-spacing: .16em; }
.club-hero-card > div { align-self: end; margin: 0; color: var(--plan-accent); font-size: 76px; }
.club-hero-card > span:last-child { align-self: end; color: rgba(255,255,255,.42); font-size: 7px; letter-spacing: .18em; }
.club-hero-number { position: absolute; right: -20px; bottom: -110px; color: rgba(255,255,255,.025); font-family: Georgia,"Times New Roman",serif; font-size: 390px; line-height: 1; }

.club-storefront { background: #f3efe7; color: #11100e; }
.club-plan-section, .club-comparison, .club-checkout, .club-how { padding: clamp(75px,9vw,130px) clamp(22px,7vw,120px); }
.club-section-heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.55fr); align-items: end; gap: 60px; margin-bottom: 50px; }
.club-section-heading h2, .club-comparison h2, .club-how h2, .club-checkout-closed h2 { margin: 10px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(42px,5.4vw,78px); font-weight: 400; line-height: .95; letter-spacing: -.04em; }
.club-section-heading h2 em, .club-how h2 em { color: #9d6d23; font-weight: 400; }
.club-section-heading > p { margin: 0; color: #6f6a61; font-size: 11px; line-height: 1.7; }
.club-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.club-plan-card.membership-plan-card { min-height: 610px; padding: 31px 27px 25px; cursor: default; }
.club-plan-card.membership-plan-card.selected { border-color: var(--plan-accent); box-shadow: 0 22px 55px rgba(15,12,8,.24),0 0 42px var(--plan-glow); }
.club-plan-card > header b { padding: 6px 9px; border: 1px solid var(--plan-line); border-radius: 999px; color: var(--plan-accent); font-size: 7px; letter-spacing: .07em; text-transform: uppercase; }
.club-plan-card .club-plan-name { align-self: start; margin: 45px 0 21px; }
.club-plan-card .club-plan-name > span { color: var(--plan-accent); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.club-plan-card .club-plan-name h3 { margin: 6px 0 10px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(28px,3vw,42px); font-weight: 400; line-height: 1; text-shadow: 0 0 22px var(--plan-glow); }
.club-plan-card .club-plan-name p { min-height: 52px; margin: 0; color: rgba(255,255,255,.49); font-size: 9px; font-weight: 400; letter-spacing: 0; line-height: 1.6; }
.club-plan-card .club-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 20px; }
.club-plan-card .club-plan-price strong { color: var(--plan-accent); font-family: Georgia,"Times New Roman",serif; font-size: clamp(27px,2.8vw,39px); font-weight: 400; }
.club-plan-card .club-plan-price span { color: rgba(255,255,255,.4); font-size: 8px; }
.club-plan-card ul { gap: 11px; margin: 0; padding-top: 19px; }
.club-plan-card li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
.club-plan-card li::before { display: none; }
.club-plan-card li > span { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--plan-line); border-radius: 50%; color: var(--plan-accent); font-size: 7px; }
.club-plan-card li p { display: grid; gap: 2px; margin: 0; color: rgba(255,255,255,.74); font-size: 9px; letter-spacing: 0; }
.club-plan-card li strong { font-weight: 650; }
.club-plan-card li small { color: rgba(255,255,255,.36); font-size: 7px; line-height: 1.45; }
.club-plan-saving { align-self: end; margin: 17px 0 10px; padding: 9px 11px; border: 1px solid var(--plan-line); border-radius: 8px; background: color-mix(in srgb,var(--plan-accent) 8%,transparent); color: rgba(255,255,255,.54); font-size: 7px; }
.club-plan-saving strong { color: var(--plan-accent); }
.club-plan-card > button { align-self: end; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 12px; padding: 0 15px; border: 1px solid var(--plan-line); border-radius: 9px; background: color-mix(in srgb,var(--plan-accent) 15%,#090909); color: #fff; cursor: pointer; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: transform .2s ease,background .2s ease; }
.club-plan-card > button:hover { background: color-mix(in srgb,var(--plan-accent) 27%,#090909); transform: translateY(-2px); }
.club-compare-trigger { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 49px; margin: 34px auto 0; padding: 0 22px; border: 1px solid rgba(17,16,14,.18); border-radius: 999px; background: transparent; color: #27231e; cursor: pointer; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.club-empty { display: grid; justify-items: center; gap: 12px; min-height: 390px; padding: 70px 24px; border: 1px solid rgba(19,17,13,.13); border-radius: 22px; background: #fff; text-align: center; }
.club-empty > span { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid rgba(172,124,40,.35); border-radius: 50%; color: #a97522; font-size: 28px; }
.club-empty h3 { margin: 12px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: 34px; font-weight: 400; }
.club-empty p { max-width: 560px; margin: 0; color: #726c63; font-size: 10px; line-height: 1.7; }
.club-empty a { margin-top: 8px; padding: 14px 19px; border-radius: 999px; background: #12100d; color: #e1b45e; font-size: 8px; font-weight: 800; text-transform: uppercase; }

.club-comparison { background: #e9e2d5; }
.club-comparison > div:first-child { margin-bottom: 32px; }
.club-comparison-scroll { overflow-x: auto; border: 1px solid rgba(17,16,14,.13); border-radius: 18px; background: #f8f5ef; box-shadow: 0 18px 55px rgba(29,22,12,.07); }
.club-comparison table { width: 100%; min-width: 760px; border-collapse: collapse; }
.club-comparison th, .club-comparison td { min-width: 170px; padding: 18px 20px; border-right: 1px solid rgba(17,16,14,.08); border-bottom: 1px solid rgba(17,16,14,.08); text-align: left; }
.club-comparison thead th { padding-top: 24px; padding-bottom: 24px; background: #15130f; color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 400; }
.club-comparison thead th:first-child { color: rgba(255,255,255,.42); font-family: inherit; font-size: 8px; text-transform: uppercase; }
.club-comparison thead small { display: block; margin-top: 5px; color: #e0b45e; font-family: inherit; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.club-comparison tbody th { color: #746e64; font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.club-comparison td { color: #332e27; font-size: 9px; }
.club-comparison td strong { display: block; font-family: Georgia,"Times New Roman",serif; font-size: 20px; font-weight: 400; }
.club-comparison td small { display: block; margin-top: 3px; color: #847d72; font-size: 7px; }
.club-comparison td button { min-height: 38px; padding: 0 13px; border: 1px solid #17140f; border-radius: 8px; background: #17140f; color: #e0b45e; cursor: pointer; font-size: 7px; font-weight: 800; }

.club-checkout { position: relative; scroll-margin-top: 20px; background: radial-gradient(circle at 15% 30%,var(--plan-glow),transparent 22%),#090909; color: #fff; }
.club-checkout-closed { min-height: 240px; text-align: center; }
.club-checkout-closed h2 { color: #fff; }
.club-checkout-closed p { color: rgba(255,255,255,.45); }
.club-checkout-layout { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(470px,1.28fr); align-items: start; gap: clamp(30px,5vw,75px); max-width: 1260px; margin: 0 auto; }
.club-checkout-summary.membership-plan-card { position: sticky; top: 24px; min-height: 520px; padding: 38px 33px; }
.club-checkout-summary > small { color: var(--plan-accent); font-size: 7px; letter-spacing: .18em; }
.club-checkout-summary h2 { align-self: center; margin: 35px 0 10px; font-family: Georgia,"Times New Roman",serif; font-size: 45px; font-weight: 400; text-shadow: 0 0 28px var(--plan-glow); }
.club-checkout-summary > p { align-self: start; margin: -70px 0 0; color: rgba(255,255,255,.48); font-size: 9px; line-height: 1.6; }
.club-checkout-summary > strong { align-self: end; display: flex; align-items: baseline; gap: 8px; font-size: 31px; }
.club-checkout-summary > strong span { color: rgba(255,255,255,.42); font-family: inherit; font-size: 8px; }
.club-checkout-summary > button { align-self: end; min-height: 42px; margin-top: 15px; border: 1px solid var(--plan-line); border-radius: 8px; background: transparent; color: var(--plan-accent); cursor: pointer; font-size: 7px; }
.club-contract-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: clamp(25px,4vw,50px); border: 1px solid rgba(255,255,255,.11); border-radius: 23px; background: rgba(255,255,255,.045); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.club-contract-form > header, .club-contract-form > fieldset, .club-contract-form > .club-privacy, .club-contract-form > .club-form-error, .club-contract-form > .club-submit, .club-contract-form > .club-form-security { grid-column: 1 / -1; }
.club-contract-form > header { margin-bottom: 9px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.club-contract-form > header span { color: var(--plan-accent); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.club-contract-form h3 { margin: 7px 0 6px; font-family: Georgia,"Times New Roman",serif; font-size: 37px; font-weight: 400; }
.club-contract-form header p { margin: 0; color: rgba(255,255,255,.45); font-size: 9px; line-height: 1.6; }
.club-contract-form > label { display: grid; gap: 6px; }
.club-contract-form label > span, .club-contract-form legend { color: rgba(255,255,255,.51); font-size: 7px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.club-contract-form input { width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; outline: 0; background: rgba(255,255,255,.055); color: #fff; color-scheme: dark; font: inherit; font-size: 10px; }
.club-contract-form input:focus { border-color: var(--plan-accent); box-shadow: 0 0 0 3px var(--plan-glow); }
.club-identity-picker, .club-payment-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 4px 0 0; padding: 0; border: 0; }
.club-identity-picker legend, .club-payment-picker legend { grid-column: 1 / -1; margin-bottom: 1px; }
.club-identity-picker button, .club-payment-picker label { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.035); color: #fff; cursor: pointer; }
.club-identity-picker button.active, .club-payment-picker label.active { border-color: var(--plan-accent); background: color-mix(in srgb,var(--plan-accent) 10%,transparent); box-shadow: inset 0 0 20px var(--plan-glow); }
.club-identity-picker button span { font-size: 17px; }
.club-identity-picker button strong { font-size: 9px; }
.club-payment-picker label input { width: 17px; min-height: 17px; padding: 0; accent-color: var(--plan-accent); }
.club-payment-picker label span { display: grid; gap: 3px; text-transform: none; }
.club-payment-picker label strong { color: #fff; font-size: 9px; }
.club-payment-picker label small { color: rgba(255,255,255,.42); font-size: 7px; }
.club-privacy { display: grid !important; grid-template-columns: 19px 1fr; align-items: start; gap: 10px !important; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.03); }
.club-privacy input { width: 17px; min-height: 17px; padding: 0; accent-color: var(--plan-accent); }
.club-privacy > span { display: grid; gap: 3px; letter-spacing: 0 !important; text-transform: none !important; }
.club-privacy strong { color: #fff; font-size: 8px; }
.club-privacy small { color: rgba(255,255,255,.4); font-size: 7px; line-height: 1.5; }
.club-form-error { margin: 0; padding: 12px 14px; border-left: 2px solid #db7162; background: rgba(184,64,46,.12); color: #ffb0a5; font-size: 8px; line-height: 1.5; }
.club-submit { min-height: 51px; border: 1px solid var(--plan-accent); border-radius: 10px; background: linear-gradient(135deg,var(--plan-accent),color-mix(in srgb,var(--plan-accent) 60%,#5d3811)); color: #0b0a08; cursor: pointer; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 13px 35px var(--plan-glow); }
.club-submit:disabled { opacity: .55; cursor: wait; }
.club-form-security { color: rgba(255,255,255,.36); font-size: 7px; text-align: center; }
.club-checkout-success { display: grid; justify-items: center; max-width: 800px; margin: 0 auto; padding: clamp(40px,7vw,85px); border: 1px solid var(--plan-line); border-radius: 24px; background: radial-gradient(circle at 50% 0,var(--plan-glow),transparent 35%),rgba(255,255,255,.04); text-align: center; }
.club-success-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 20px; border: 1px solid var(--plan-accent); border-radius: 50%; color: var(--plan-accent); font-size: 27px; box-shadow: 0 0 35px var(--plan-glow); }
.club-checkout-success > small { color: var(--plan-accent); font-size: 8px; letter-spacing: .16em; }
.club-checkout-success h2 { margin: 10px 0 13px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(39px,5vw,62px); font-weight: 400; }
.club-checkout-success > p { max-width: 580px; margin: 0; color: rgba(255,255,255,.51); font-size: 10px; line-height: 1.7; }
.club-checkout-success > div { display: grid; gap: 7px; min-width: min(100%,420px); margin-top: 26px; padding: 18px; border: 1px solid var(--plan-line); border-radius: 13px; background: rgba(0,0,0,.24); }
.club-checkout-success > div span, .club-checkout-success > div small { color: rgba(255,255,255,.42); font-size: 7px; text-transform: uppercase; }
.club-checkout-success > div strong { color: var(--plan-accent); font-family: var(--font-geist-mono),monospace; font-size: 20px; letter-spacing: .08em; }
.club-checkout-success nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 25px; }
.club-checkout-success nav a { padding: 13px 17px; border: 1px solid var(--plan-line); border-radius: 999px; color: var(--plan-accent); font-size: 8px; font-weight: 800; }

.club-how { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(40px,8vw,120px); background: #f3efe7; color: #11100e; }
.club-how ol { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid rgba(17,16,14,.15); list-style: none; }
.club-how li { display: grid; grid-template-columns: 48px minmax(150px,.6fr) 1fr; align-items: center; gap: 16px; padding: 25px 0; border-bottom: 1px solid rgba(17,16,14,.15); }
.club-how li b { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(166,117,34,.35); border-radius: 50%; color: #9a6a21; font-size: 8px; }
.club-how li strong { font-family: Georgia,"Times New Roman",serif; font-size: 20px; font-weight: 400; }
.club-how li p { margin: 0; color: #716b62; font-size: 9px; line-height: 1.6; }
.club-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px; min-height: 145px; padding: 25px clamp(24px,7vw,120px); border-top: 1px solid rgba(255,255,255,.1); background: #080808; color: #fff; }
.club-footer img { width: 80px; height: 80px; object-fit: contain; }
.club-footer p { color: rgba(255,255,255,.38); font-size: 8px; }
.club-footer nav { display: flex; gap: 22px; }
.club-footer a { color: rgba(255,255,255,.62); font-size: 8px; }

/* Customer membership wallet */
.member-page { background: radial-gradient(circle at 80% 10%,rgba(37,154,232,.16),transparent 25%),#090909; }
.member-page-header { grid-template-columns: auto 1fr; }
.member-page-header nav { justify-content: flex-end; }
.member-lookup-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.55fr); align-items: center; gap: clamp(45px,8vw,120px); max-width: 1320px; min-height: calc(100vh - 88px); margin: 0 auto; padding: clamp(60px,8vw,120px) clamp(22px,5vw,70px); }
.member-lookup-intro h1, .member-wallet-heading h1 { margin: 13px 0 19px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(51px,7vw,92px); font-weight: 400; line-height: .92; letter-spacing: -.05em; }
.member-lookup-intro h1 em { color: #e0b45e; font-weight: 400; }
.member-lookup-intro p, .member-wallet-heading p { max-width: 620px; color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.7; }
.member-lookup-shell form { display: grid; gap: 14px; padding: clamp(25px,4vw,42px); border: 1px solid rgba(220,175,88,.25); border-radius: 21px; background: rgba(255,255,255,.045); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.member-lookup-shell form header { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.member-lookup-shell form header > span { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid rgba(220,175,88,.35); border-radius: 50%; color: #e0b45e; font-size: 19px; }
.member-lookup-shell form header small { color: #d9aa54; font-size: 7px; letter-spacing: .14em; }
.member-lookup-shell h2 { margin: 3px 0 0; font-family: Georgia,"Times New Roman",serif; font-size: 25px; font-weight: 400; }
.member-lookup-shell label { display: grid; gap: 6px; }
.member-lookup-shell label span { color: rgba(255,255,255,.46); font-size: 7px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.member-lookup-shell input { min-height: 49px; padding: 0 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; outline: 0; background: rgba(255,255,255,.055); color: #fff; font: inherit; font-size: 10px; text-transform: uppercase; }
.member-lookup-shell input:focus { border-color: #d9aa54; box-shadow: 0 0 0 3px rgba(217,170,84,.12); }
.member-lookup-shell form > p { margin: 0; padding: 11px; border-left: 2px solid #d66d60; background: rgba(185,68,51,.12); color: #ffaaa0; font-size: 8px; }
.member-lookup-shell form > p.member-renewal-return { border-left-color: #d5a54e; background: rgba(213,165,78,.1); color: #f1cc82; line-height: 1.5; }
.member-lookup-shell form > p.member-renewal-return.ok { border-left-color: #58ad78; background: rgba(62,158,98,.12); color: #9ce0b4; }
.member-lookup-shell form > button { min-height: 50px; border: 1px solid #d5a54e; border-radius: 9px; background: linear-gradient(135deg,#e2ba68,#9e6a1e); color: #0b0a08; cursor: pointer; font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.member-lookup-shell form > small { color: rgba(255,255,255,.34); font-size: 7px; text-align: center; }
.member-wallet { display: grid; grid-template-columns: minmax(360px,.8fr) minmax(0,1.2fr); gap: clamp(35px,6vw,80px); max-width: 1320px; min-height: calc(100vh - 88px); margin: 0 auto; padding: clamp(55px,7vw,100px) clamp(22px,5vw,70px); }
.member-wallet-heading { grid-column: 1 / -1; }
.member-wallet-heading h1 { margin-bottom: 6px; font-size: clamp(45px,6vw,72px); }
.member-digital-card.membership-plan-card { align-self: start; min-height: 570px; padding: 34px; }
.member-digital-card > header { display: grid; grid-template-columns: 53px 1fr auto; align-items: center; gap: 12px; }
.member-digital-card > header img { width: 53px; height: 53px; object-fit: contain; }
.member-digital-card > header div { display: grid; gap: 3px; margin: 0; }
.member-digital-card > header small { color: rgba(255,255,255,.42); font-size: 6px; letter-spacing: .16em; }
.member-digital-card > header strong { color: var(--plan-accent); font-family: Georgia,"Times New Roman",serif; font-size: 17px; font-weight: 400; }
.member-digital-card > header > b { padding: 5px 7px; border: 1px solid var(--plan-line); border-radius: 999px; color: var(--plan-accent); font-size: 6px; }
.member-card-name { align-self: center !important; display: grid; gap: 5px; margin: 30px 0 15px !important; }
.member-card-name small, .member-card-benefit > span { color: rgba(255,255,255,.38); font-size: 7px; letter-spacing: .14em; }
.member-card-name strong { font-family: Georgia,"Times New Roman",serif; font-size: 34px; font-weight: 400; }
.member-card-name span { color: var(--plan-accent); font-family: var(--font-geist-mono),monospace; font-size: 9px; letter-spacing: .1em; }
.member-card-benefit { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 15px; margin: 0 0 18px !important; padding: 16px; border: 1px solid var(--plan-line); border-radius: 12px; background: color-mix(in srgb,var(--plan-accent) 8%,transparent); }
.member-card-benefit > span { grid-column: 1 / -1; }
.member-card-benefit strong { color: var(--plan-accent); font-family: Georgia,"Times New Roman",serif; font-size: 45px; font-weight: 400; }
.member-card-benefit p { margin: 0 !important; color: #fff !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
.member-card-barcode { display: grid; justify-items: center; gap: 4px; margin: 0 !important; padding: 13px 15px; border-radius: 10px; background: rgba(255,255,255,.94); }
.member-card-barcode svg { width: 100%; height: 48px; }
.member-card-barcode span { color: #11100e !important; font-family: var(--font-geist-mono),monospace; font-size: 8px !important; letter-spacing: .1em; }
.member-digital-card > footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--plan-line); color: rgba(255,255,255,.36); font-size: 6px; letter-spacing: .08em; }
.member-digital-card > footer b { color: var(--plan-accent); }
.member-wallet-details { display: grid; align-content: start; gap: 13px; }
.member-wallet-details article { display: grid; gap: 8px; padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); }
.member-wallet-details article > span { color: #d9aa54; font-size: 7px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.member-wallet-details article > strong { font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 400; }
.member-wallet-details article > small { color: rgba(255,255,255,.4); font-size: 8px; line-height: 1.5; }
.member-wallet-details article > i { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.09); }
.member-wallet-details article > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9a681e,#e1b968); box-shadow: 0 0 15px rgba(220,175,88,.45); }
.member-wallet-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 9px; margin-top: -36px; }
.member-wallet-actions a, .member-wallet-actions button { display: grid; place-items: center; min-height: 44px; padding: 0 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: transparent; color: rgba(255,255,255,.64); cursor: pointer; font: inherit; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.member-wallet-actions a { border-color: #d5a64f; background: #d5a64f; color: #0b0a08; }
.member-wallet-actions button.renew { border-color: rgba(213,166,79,.6); color: #e2b760; }
.member-wallet-actions button.download { border-color: rgba(126,216,255,.5); background: rgba(55,157,211,.09); color: #9bddfb; }
.member-wallet-actions button.share { border-color: rgba(66,184,111,.52); background: rgba(41,145,80,.12); color: #91e6b1; }
.member-wallet-actions button:disabled { cursor: wait; opacity: .5; }

.member-benefit-history { grid-column: 1 / -1; overflow: hidden; margin-top: 8px; border: 1px solid rgba(216,170,85,.2); border-radius: 22px; background: radial-gradient(circle at 92% 0,rgba(216,170,85,.12),transparent 29%),rgba(255,255,255,.035); box-shadow: 0 25px 70px rgba(0,0,0,.18); }
.member-benefit-history > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.member-benefit-history > header span { display: block; margin-bottom: 6px; color: #d8aa55; font-size: 7px; font-weight: 850; letter-spacing: .16em; }
.member-benefit-history > header h2 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(24px,3vw,35px); font-weight: 400; }
.member-benefit-history > header > b { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(216,170,85,.32); border-radius: 50%; color: #e6bd71; font-size: 10px; }
.member-benefit-history ol { display: grid; margin: 0; padding: 8px 26px 20px; list-style: none; }
.member-benefit-history li { position: relative; display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 14px; align-items: start; min-height: 72px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.065); }
.member-benefit-history li:last-child { border-bottom: 0; }
.member-benefit-history li::before { position: absolute; top: 29px; bottom: -30px; left: 5px; width: 1px; background: linear-gradient(rgba(216,170,85,.35),transparent); content: ""; }
.member-benefit-history li:last-child::before { display: none; }
.member-benefit-history li > i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 2px solid #d8aa55; border-radius: 50%; background: #11100e; box-shadow: 0 0 14px rgba(216,170,85,.35); }
.member-benefit-history li.credit > i { border-color: #62c68a; box-shadow: 0 0 14px rgba(98,198,138,.3); }
.member-benefit-history li.debit > i { border-color: #df9b67; box-shadow: 0 0 14px rgba(223,155,103,.28); }
.member-benefit-history li > div { display: grid; gap: 5px; }
.member-benefit-history li strong { font-size: 10px; }
.member-benefit-history li span { color: rgba(255,255,255,.58); font-size: 8px; line-height: 1.5; }
.member-benefit-history li small { color: rgba(255,255,255,.3); font-size: 7px; text-transform: capitalize; }
.member-benefit-history li > b { min-width: 32px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #e6bd71; font-size: 9px; text-align: center; }
.member-benefit-history li.credit > b { color: #83d5a3; }
.member-benefit-history > p { margin: 0; padding: 26px; color: rgba(255,255,255,.45); font-size: 9px; }

.membership-record-history { grid-column: 1 / -1; overflow: hidden; margin-top: 5px; border: 1px solid rgba(174,126,44,.22); border-radius: 15px; background: linear-gradient(145deg,rgba(20,18,14,.98),rgba(35,29,20,.96)); color: #f6f0e4; animation: membershipHistoryIn .3s ease both; }
.membership-record-history > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; border-bottom: 1px solid rgba(255,255,255,.08); }
.membership-record-history > header span { display: block; margin-bottom: 4px; color: #d4a64f; font-size: 6px; font-weight: 850; letter-spacing: .15em; }
.membership-record-history > header h5 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 400; }
.membership-record-history > header > b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(212,166,79,.3); border-radius: 50%; color: #e4bb6c; font-size: 8px; }
.membership-record-history ol { display: grid; max-height: 390px; overflow-y: auto; margin: 0; padding: 7px 19px 17px; list-style: none; scrollbar-color: rgba(213,166,79,.35) transparent; }
.membership-record-history li { display: grid; grid-template-columns: 13px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.065); }
.membership-record-history li:last-child { border-bottom: 0; }
.membership-record-history li > i { width: 9px; height: 9px; margin-top: 3px; border: 2px solid #d4a64f; border-radius: 50%; background: #1b1812; box-shadow: 0 0 11px rgba(212,166,79,.3); }
.membership-record-history li.credit > i { border-color: #61bc81; }
.membership-record-history li.debit > i { border-color: #d28a60; }
.membership-record-history li > div { display: grid; gap: 4px; min-width: 0; }
.membership-record-history li strong { font-size: 8px; }
.membership-record-history li span { overflow-wrap: anywhere; color: rgba(255,255,255,.58); font-size: 7px; line-height: 1.45; }
.membership-record-history li small { color: rgba(255,255,255,.3); font-size: 6px; }
.membership-record-history li > b { padding: 5px 7px; border-radius: 999px; background: rgba(212,166,79,.1); color: #e8c176; font-size: 8px; }
.membership-record-history li.credit > b { color: #80d49e; }
.membership-record-history > p { margin: 0; padding: 20px; color: rgba(255,255,255,.45); font-size: 8px; }
.membership-balance-summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; padding: 16px; border: 1px solid rgba(180,133,48,.2); border-radius: 14px; background: rgba(182,133,43,.06); }
.membership-balance-summary > div { display: grid; gap: 5px; text-align: center; }
.membership-balance-summary span { color: #887e6f; font-size: 7px; text-transform: uppercase; }
.membership-balance-summary strong { font-family: Georgia,"Times New Roman",serif; font-size: 29px; font-weight: 400; }
.membership-balance-summary > i { color: #b28332; font-style: normal; font-size: 18px; }
.membership-balance-field { display: grid; gap: 7px; }
.membership-balance-field > span { color: #665d50; font-size: 8px; font-weight: 800; }
.membership-balance-field input, .membership-balance-field textarea { width: 100%; border: 1px solid rgba(9,9,8,.16); border-radius: 12px; background: #fff; color: #17140f; font: inherit; font-size: 10px; outline: none; }
.membership-balance-field input { min-height: 47px; padding: 0 13px; }
.membership-balance-field textarea { resize: vertical; padding: 13px; line-height: 1.5; }
.membership-balance-field input:focus, .membership-balance-field textarea:focus { border-color: #b28332; box-shadow: 0 0 0 3px rgba(178,131,50,.1); }
.membership-balance-field small { color: #91887b; font-size: 7px; line-height: 1.45; }
@keyframes membershipHistoryIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
.member-export-result { grid-column: 2; margin: -25px 0 0; padding: 11px 13px; border-left: 2px solid #5db279; border-radius: 7px; background: rgba(66,164,101,.12); color: #a4e5b9; font-size: 7px; line-height: 1.55; }
.member-export-result.error { border-left-color: #ce665a; background: rgba(188,67,49,.12); color: #ffaaa0; }
.member-renewal-panel { grid-column: 2; display: grid; gap: 15px; margin-top: -22px; padding: clamp(22px,3vw,32px); border: 1px solid rgba(215,169,81,.28); border-radius: 18px; background: radial-gradient(circle at 95% 5%,rgba(211,163,74,.14),transparent 32%),rgba(255,255,255,.045); box-shadow: 0 24px 55px rgba(0,0,0,.18); }
.member-renewal-panel > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.member-renewal-panel > header div { display: grid; gap: 4px; }
.member-renewal-panel > header span { color: #d8a94f; font-size: 6px; font-weight: 800; letter-spacing: .14em; }
.member-renewal-panel h2 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(24px,3vw,34px); font-weight: 400; }
.member-renewal-panel > header > strong { color: #e0b55f; font-family: Georgia,"Times New Roman",serif; font-size: 25px; font-weight: 400; white-space: nowrap; }
.member-renewal-panel > p { margin: 0; color: rgba(255,255,255,.48); font-size: 8px; line-height: 1.7; }
.member-renewal-methods { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.member-renewal-methods label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; min-height: 60px; padding: 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(255,255,255,.035); cursor: pointer; }
.member-renewal-methods label.active { border-color: rgba(216,169,79,.65); background: rgba(216,169,79,.09); box-shadow: inset 0 0 20px rgba(216,169,79,.04); }
.member-renewal-methods input { accent-color: #d8a94f; }
.member-renewal-methods span { display: grid; gap: 3px; }
.member-renewal-methods strong { font-size: 8px; }
.member-renewal-methods small { color: rgba(255,255,255,.38); font-size: 6px; }
.member-renewal-panel > button { min-height: 48px; border: 1px solid #d5a54e; border-radius: 9px; background: linear-gradient(135deg,#e2ba68,#9e6a1e); color: #0b0a08; cursor: pointer; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.member-renewal-panel > button:disabled { opacity: .55; cursor: wait; }
.member-renewal-panel > small { color: rgba(255,255,255,.32); font-size: 6px; text-align: center; }
.member-renewal-error, .member-renewal-success { margin: 0; padding: 11px; border-left: 2px solid #ce665a; background: rgba(188,67,49,.12); color: #ffaaa0; font-size: 7px; line-height: 1.5; }
.member-renewal-success { border-left-color: #5db279; background: rgba(66,164,101,.12); color: #a4e5b9; }

/* Membership-aware booking and plan service selector */
.booking-membership-check { position: relative; display: grid; gap: 12px; padding: 16px; overflow: hidden; border: 1px solid rgba(9,9,8,.13); border-radius: 13px; background: linear-gradient(135deg,#15130f,#24201a); color: #fff; }
.booking-membership-check::after { position: absolute; right: -25px; bottom: -58px; color: rgba(255,255,255,.04); content: "◇"; font-size: 115px; }
.booking-membership-check.verified { border-color: var(--plan-accent); background: var(--plan-background); box-shadow: 0 10px 28px var(--plan-glow); }
.booking-membership-check > div:first-child { position: relative; z-index: 1; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; }
.booking-membership-check > div:first-child > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--plan-line,rgba(224,181,96,.3)); border-radius: 50%; color: var(--plan-accent,#e0b45e); font-size: 17px; }
.booking-membership-check > div p { display: grid; gap: 2px; margin: 0; }
.booking-membership-check small { color: var(--plan-accent,#e0b45e); font-size: 6px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.booking-membership-check strong { color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: 17px; font-weight: 400; }
.booking-membership-check p b { color: rgba(255,255,255,.44); font-size: 7px; font-weight: 400; }
.booking-membership-check > button { position: relative; z-index: 1; justify-self: start; min-height: 38px; padding: 0 13px; border: 1px solid var(--plan-line,rgba(224,181,96,.35)); border-radius: 8px; background: rgba(255,255,255,.05); color: var(--plan-accent,#e0b45e); cursor: pointer; font-size: 7px; font-weight: 800; }
.booking-membership-check > button:disabled { opacity: .4; cursor: not-allowed; }
.booking-membership-success { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--plan-line); }
.booking-membership-success span { color: var(--plan-accent); font-size: 8px; font-weight: 750; }
.booking-membership-success button { border: 0; background: transparent; color: rgba(255,255,255,.45); cursor: pointer; font-size: 7px; text-decoration: underline; }
.booking-membership-check > p { position: relative; z-index: 1; margin: 0; color: #ffafa3; font-size: 7px; line-height: 1.5; }
.booking-membership-check > p a { color: #fff; text-decoration: underline; }
.booking-payment-picker label.membership { border-color: #70c8f6; background: linear-gradient(135deg,rgba(26,134,207,.1),rgba(88,197,250,.16)); }
.booking-online-paid.membership-covered { border-color: rgba(82,186,240,.35); background: rgba(56,154,215,.1); color: #267aab; }
.membership-service-selector { margin: 0; padding: 0; border: 0; }
.membership-service-selector legend { margin-bottom: 5px; color: rgba(255,255,255,.5); font-size: 7px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.membership-service-selector > p { margin: 0 0 9px; color: rgba(255,255,255,.38); font-size: 7px; line-height: 1.5; }
.membership-service-selector > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.membership-service-selector > div > label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 51px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.035); cursor: pointer; }
.membership-service-selector > div > label.selected { border-color: #c99a47; background: rgba(201,154,71,.09); }
.membership-service-selector input { width: 16px; min-height: 16px; padding: 0; accent-color: #c99a47; }
.membership-service-selector label span { display: grid; gap: 2px; letter-spacing: 0 !important; text-transform: none !important; }
.membership-service-selector label strong { color: #fff; font-size: 8px; }
.membership-service-selector label small { color: rgba(255,255,255,.38); font-size: 7px; }
.membership-service-selector label b { color: #d9aa54; font-size: 10px; }

@media (max-width: 1050px) {
  .home-club, .club-hero { grid-template-columns: 1fr 350px; gap: 35px; }
  .club-plan-grid { grid-template-columns: 1fr 1fr; }
  .club-checkout-layout { grid-template-columns: 330px 1fr; gap: 25px; }
  .member-wallet { grid-template-columns: minmax(330px,.8fr) 1fr; }
}

@media (max-width: 760px) {
  .membership-renewal-queue article { grid-template-columns: 38px 1fr; padding: 14px; }
  .membership-renewal-queue article > div:nth-of-type(2), .membership-renewal-queue article > footer { grid-column: 2; }
  .membership-renewal-queue article > footer { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; }
  .home-club { grid-template-columns: 1fr; min-height: auto; padding: 78px 20px 90px; }
  .home-club::before { inset: 10px; }
  .home-club-copy h2 { font-size: clamp(44px,13vw,65px); }
  .home-club-copy > div { align-items: stretch; flex-direction: column; gap: 16px; }
  .home-club-copy > div > a { text-align: center; }
  .home-club-card.membership-plan-card { width: min(94%,340px); min-height: 440px; margin-top: 15px; padding: 38px 30px; }
  .club-header, .member-page-header { grid-template-columns: auto 1fr; min-height: 76px; padding: 0 16px; }
  .club-header > a:first-child img, .member-page-header img { width: 55px; height: 55px; }
  .club-header nav a:not(:last-child) { display: none; }
  .club-header nav, .member-page-header nav { justify-content: flex-end; gap: 15px; }
  .club-header nav a, .member-page-header nav a { font-size: 7px; }
  .club-header > a:last-child { display: none; }
  .club-hero { grid-template-columns: 1fr; min-height: auto; padding: 75px 20px 90px; }
  .club-hero::after { inset: 10px; }
  .club-hero-copy h1 { font-size: clamp(57px,17vw,82px); }
  .club-hero-copy > div { align-items: stretch; flex-direction: column; }
  .club-hero-copy > div a { width: 100%; }
  .club-hero-card.membership-plan-card { width: min(94%,345px); min-height: 455px; padding: 37px 30px; transform: rotate(2deg); }
  .club-section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 34px; }
  .club-plan-section, .club-comparison, .club-checkout, .club-how { padding: 70px 17px; }
  .club-plan-grid { grid-template-columns: 1fr; }
  .club-plan-card.membership-plan-card { min-height: 590px; }
  .club-comparison { padding-right: 0; }
  .club-comparison > div:first-child { padding-right: 17px; }
  .club-comparison-scroll { border-radius: 14px 0 0 14px; }
  .club-checkout-layout { grid-template-columns: 1fr; }
  .club-checkout-summary.membership-plan-card { position: relative; top: auto; min-height: 440px; }
  .club-contract-form { grid-template-columns: 1fr; padding: 21px 16px; }
  .club-contract-form > header, .club-contract-form > fieldset, .club-contract-form > .club-privacy, .club-contract-form > .club-form-error, .club-contract-form > .club-submit, .club-contract-form > .club-form-security { grid-column: auto; }
  .club-identity-picker, .club-payment-picker { grid-template-columns: 1fr; }
  .club-identity-picker legend, .club-payment-picker legend { grid-column: auto; }
  .club-checkout-success { padding: 45px 18px; }
  .club-how { grid-template-columns: 1fr; }
  .club-how li { grid-template-columns: 38px 1fr; }
  .club-how li p { grid-column: 2; }
  .club-footer { grid-template-columns: 1fr; justify-items: center; padding: 35px 20px; text-align: center; }
  .club-footer nav { flex-wrap: wrap; justify-content: center; }
  .member-lookup-shell { grid-template-columns: 1fr; min-height: auto; padding: 65px 17px 80px; }
  .member-lookup-intro h1 { font-size: clamp(48px,15vw,68px); }
  .member-wallet { grid-template-columns: 1fr; padding: 55px 16px 80px; }
  .member-wallet-heading, .member-wallet-actions, .member-export-result { grid-column: auto; }
  .member-renewal-panel { grid-column: auto; margin-top: 0; padding: 21px 16px; }
  .member-renewal-panel > header { align-items: flex-start; flex-direction: column; }
  .member-renewal-methods { grid-template-columns: 1fr; }
  .member-digital-card.membership-plan-card { min-height: 520px; padding: 25px 20px; }
  .member-digital-card > header { grid-template-columns: 45px 1fr; }
  .member-digital-card > header img { width: 45px; height: 45px; }
  .member-digital-card > header > b { grid-column: 1 / -1; justify-self: start; }
  .member-wallet-actions { margin-top: 0; }
  .member-wallet-actions > * { width: 100%; }
  .booking-membership-success { align-items: flex-start; flex-direction: column; }
  .membership-service-selector > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .club-hero-glow i { animation: none; }
  .home-club-card.membership-plan-card:hover { transform: rotate(3deg); }
}

@media print {
  .member-page * { visibility: hidden !important; }
  .member-digital-card, .member-digital-card * { visibility: visible !important; }
  .member-digital-card { position: fixed !important; inset: 15mm !important; width: auto !important; min-height: 0 !important; aspect-ratio: 1.58 / 1; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Modo móvil ligero: conserva respuesta táctil y elimina trabajo gráfico continuo. */
@media (update: slow) {
  body > main,
  .hero h1,
  .hero-lede,
  .hero-actions,
  .hero-assurances,
  .hero-media,
  .wizard-panel,
  .selected-time-confirmation,
  .customer-booking-header,
  .admin-sidebar,
  .admin-section-stage,
  .barber-view-stage,
  .membership-plan-shine,
  .membership-action-dialog,
  .membership-dialog-overlay,
  .membership-record-history,
  .club-contract-form,
  .club-plan-emblem > span,
  .club-plan-card.selected::before,
  .club-hero-glow i {
    animation: none !important;
  }

  .leveling-motion-ready .leveling-reveal,
  .leveling-motion-ready .leveling-reveal.is-visible {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .agenda-section::before,
  .loyalty-center-intro::after,
  .booking-calendar-card::after,
  .booking-times-card::after,
  .wizard-service-grid button::after,
  .barber-grid button::after,
  .admin-stats article::after,
  .barber-portal-stats article::after,
  .inventory-stats article::after,
  .sales-stats article::after,
  .customer-stats article::after,
  .reminder-stats article::after,
  .commission-stats article::after,
  .barber-admin-grid article::after,
  .admin-booking::after,
  .barber-bookings article::after,
  .weekly-schedule::after,
  .blocks-admin::after,
  .schedule-days article::after,
  .waitlist-list > article::after,
  .barber-waitlist-list article::after,
  .customer-barber-group::after,
  .membership-theme-fx,
  .membership-particles,
  .club-hero-glow {
    display: none !important;
    animation: none !important;
  }

  .site-header,
  .booking-fast-note,
  .shop-header,
  .visit-map > span,
  .quick-agenda-overlay,
  .access-editor-overlay,
  .product-modal,
  .gift-payment-overlay,
  .club-header,
  .member-page-header,
  .schedule-hero-metrics > span,
  .service-page-header,
  .service-page-facts,
  .membership-dialog-overlay,
  .club-plan-emblem {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .wizard-progress button,
  .wizard-service-grid button,
  .barber-grid button,
  .date-strip button,
  .time-grid button,
  .booking-calendar-grid button,
  .wizard-next,
  .club-plan-card button,
  .product-add > button {
    will-change: auto !important;
  }

  .wizard-service-grid button,
  .barber-grid button,
  .date-strip button,
  .time-grid button,
  .booking-calendar-grid button,
  .service-card,
  .public-barber-card,
  .product-grid > article,
  .club-plan-card {
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease !important;
  }

  .wizard-service-grid button:active,
  .barber-grid button:active,
  .date-strip button:active,
  .time-grid button:active,
  .booking-calendar-grid button:active,
  .service-card:active,
  .public-barber-card:active,
  .product-grid > article:active,
  .club-plan-card:active {
    transform: scale(.985) !important;
    transition-duration: .06s !important;
  }
}

/* Modo ligero selectivo: solo redes lentas, ahorro de datos o hardware realmente limitado. */
html.leveling-lite-mode body > main,
html.leveling-lite-mode .hero-media,
html.leveling-lite-mode .wizard-panel,
html.leveling-lite-mode .selected-time-confirmation,
html.leveling-lite-mode .admin-sidebar,
html.leveling-lite-mode .admin-section-stage,
html.leveling-lite-mode .barber-view-stage,
html.leveling-lite-mode .membership-plan-shine,
html.leveling-lite-mode .membership-action-dialog,
html.leveling-lite-mode .membership-dialog-overlay,
html.leveling-lite-mode .club-contract-form,
html.leveling-lite-mode .club-plan-emblem > span,
html.leveling-lite-mode .club-plan-card.selected::before,
html.leveling-lite-mode .club-hero-glow i {
  animation: none !important;
}

html.leveling-lite-mode .agenda-section::before,
html.leveling-lite-mode .loyalty-center-intro::after,
html.leveling-lite-mode .booking-calendar-card::after,
html.leveling-lite-mode .booking-times-card::after,
html.leveling-lite-mode .admin-stats article::after,
html.leveling-lite-mode .barber-portal-stats article::after,
html.leveling-lite-mode .admin-booking::after,
html.leveling-lite-mode .barber-bookings article::after,
html.leveling-lite-mode .membership-theme-fx,
html.leveling-lite-mode .membership-particles,
html.leveling-lite-mode .club-hero-glow {
  display: none !important;
}

html.leveling-lite-mode .leveling-motion-ready .leveling-reveal,
html.leveling-lite-mode .leveling-motion-ready .leveling-reveal.is-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

html.leveling-lite-mode .site-header,
html.leveling-lite-mode .booking-fast-note,
html.leveling-lite-mode .shop-header,
html.leveling-lite-mode .admin-sidebar,
html.leveling-lite-mode .quick-agenda-overlay,
html.leveling-lite-mode .product-modal,
html.leveling-lite-mode .gift-payment-overlay,
html.leveling-lite-mode .club-header,
html.leveling-lite-mode .member-page-header,
html.leveling-lite-mode .service-page-header,
html.leveling-lite-mode .service-page-facts {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Legibilidad 2026: tipografía mínima, contraste y controles consistentes. */
main small,
main label > span,
main fieldset > legend,
.site-header small,
.shop-header small,
.club-header small,
.member-page-header small {
  font-size: 12px !important;
  line-height: 1.45;
}

main button,
main [role="button"],
.site-header .header-cta,
.shop-header button,
.club-header button,
.member-page-header button {
  font-size: 14px !important;
  line-height: 1.25;
}

.time-grid button,
.quick-time-grid button,
.booking-times-card .time-grid button > span,
.booking-retry-button,
.booking-calendar-grid button span,
.booking-calendar-grid button small {
  font-size: 14px !important;
}

.booking-calendar-weekdays span,
.booking-calendar-header small,
.booking-times-header small,
.booking-calendar-selected p,
.booking-resource-state small,
.booking-slots-message small,
.time-selection-prompt,
.wizard-progress button,
.booking-fast-note strong,
.booking-fast-note span,
.booking-summary small {
  font-size: 12px !important;
  line-height: 1.5;
}

.admin-content article span,
.admin-content article small,
.barber-portal article span,
.barber-portal article small,
.barber-agenda-toolbar span,
.barber-history-permission span,
.shop-page article span,
.shop-page article small,
.shop-assurances small,
.shop-section-heading > span,
.product-modal section > small,
.quick-agenda-dialog small,
.access-hero span,
.access-admin-card p,
.access-section-heading > span,
.access-barber-list span,
.access-barber-list small {
  font-size: 12px !important;
  line-height: 1.5;
}

.club-page p,
.club-page li,
.club-page small,
.club-page label > span,
.club-page legend,
.member-page p,
.member-page li,
.member-page small,
.member-page label > span,
.member-page legend,
.club-plan-card .club-plan-name > span,
.club-plan-card .club-plan-price span,
.club-plan-card li p,
.club-plan-card li small,
.club-plan-saving,
.club-form-security,
.member-wallet-details article > span,
.member-wallet-details article > small,
.membership-service-selector > p {
  font-size: 12px !important;
  line-height: 1.55;
}

.club-contract-form input,
.member-lookup-shell input,
.membership-balance-field input,
.membership-balance-field textarea,
main form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
main form select,
main form textarea {
  min-height: 46px;
  border-color: #aaa297 !important;
  background-color: #ffffff !important;
  color: #171511 !important;
  color-scheme: light !important;
  caret-color: #8b6424;
  font-size: 14px !important;
  -webkit-text-fill-color: #171511 !important;
  opacity: 1;
}

main form input::placeholder,
main form textarea::placeholder {
  color: #625e57 !important;
  -webkit-text-fill-color: #625e57 !important;
  opacity: 1;
}

main form input:disabled,
main form select:disabled,
main form textarea:disabled {
  border-color: #c8c2b8 !important;
  background-color: #ebe7df !important;
  color: #625e57 !important;
  -webkit-text-fill-color: #625e57 !important;
  opacity: 1;
}

main form input[type="checkbox"],
main form input[type="radio"] {
  accent-color: #b27f2e;
  color-scheme: light;
}

main form input:-webkit-autofill,
main form input:-webkit-autofill:hover,
main form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #171511 !important;
}

main form option {
  background: #ffffff;
  color: #171511;
}

/* Grises más oscuros sobre superficies claras. */
.agenda-section small,
.agenda-section label > span,
.agenda-section legend,
.agenda-section .booking-resource-state small,
.agenda-section .booking-slots-message small,
.agenda-section .time-selection-prompt,
.admin-content small,
.admin-content label > span,
.admin-content legend,
.admin-content article span,
.barber-portal small,
.barber-portal label > span,
.barber-portal legend,
.barber-portal article span,
.shop-shell small,
.shop-shell label > span,
.shop-shell legend,
.shop-shell article span,
.quick-agenda-dialog small,
.quick-agenda-dialog label > span,
.access-editor small,
.access-editor label > span {
  color: #5a554d !important;
}

/* Secundarios claros sobre fondos oscuros: mínimo AA visual. */
.hero small,
.hero-assurances,
.site-header small,
.shop-hero small,
.shop-header small,
.club-page small,
.club-page p,
.club-page li,
.club-page label > span,
.club-page legend,
.member-page small,
.member-page p,
.member-page li,
.member-page label > span,
.member-page legend,
.staff-login-page small,
.staff-login-page p {
  color: rgba(255,255,255,.74) !important;
}

@media (max-width: 800px) {
  main button,
  main [role="button"],
  .site-header .header-cta,
  .shop-header button,
  .club-header button,
  .member-page-header button {
    min-height: 44px;
    font-size: 15px !important;
  }

  main form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  main form select,
  main form textarea {
    font-size: 16px !important;
  }

  .time-grid button,
  .quick-time-grid button,
  .booking-times-card .time-grid button > span,
  .booking-calendar-grid button span,
  .booking-calendar-grid button small {
    font-size: 15px !important;
  }
}

/* Alternativas sólidas para navegadores sin color-mix. */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .club-plan-emblem,
  .club-plan-saving,
  .member-card-benefit,
  .club-contract-progress span.done,
  .club-contract-progress span.active,
  .club-identity-picker button.active,
  .club-payment-picker label.active {
    background: rgba(216,174,91,.14);
  }

  .club-plan-card > button {
    background: #241d12;
  }

  .club-plan-card.selected > button,
  .club-submit {
    background: #d8ae5b;
    color: #090908;
  }

  .club-contract-form {
    background: #151411;
  }

  .club-plan-card.membership-plan-card::before,
  .club-plan-emblem {
    box-shadow: inset 0 0 24px rgba(216,174,91,.08);
  }
}

/* Fondo opaco cuando el navegador no admite desenfoque. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .site-header,
  .shop-header,
  .club-header,
  .member-page-header,
  .service-page-header {
    background: #0c0c0b;
  }

  .booking-fast-note {
    background: #f5f1e8;
  }

  .schedule-hero-metrics > span,
  .club-plan-emblem {
    background: #17130d;
  }

  .quick-agenda-overlay,
  .access-editor-overlay,
  .product-modal,
  .gift-payment-overlay,
  .membership-dialog-overlay {
    background: rgba(5,5,4,.94);
  }
}

/* Cobertura de textos compactos que antes quedaban bajo 11 px. */
.hero-assurances span,
.hero-assurances b,
.hero-proof span,
.wizard-progress span,
.wizard-heading > span,
.booking-resource-state p,
.summary-heading span,
.booking-summary dt,
.booking-summary > small,
.summary-total span,
.booking-loyalty-badge,
.service-detail-link,
.service-detail-link span,
.public-barber-copy > p,
.public-barber-copy > strong,
.public-barber-copy > a,
.reviews-book,
.reviews-book span,
.reviews-principles p,
.visit-copy dt,
.visit-actions > a:last-child,
.visit-map > span,
.home-club-copy > div > a:last-child,
.home-club-copy li,
.home-club-card > p,
.home-club-card > b,
.product-stamp,
.booking-panel dt,
.booking-panel span,
.customer-booking-summary span,
.staff-login-brand p,
.staff-login-panel header span,
.staff-login-panel header p,
.staff-login-shortcut strong,
.staff-login-shortcut span,
.staff-shortcut-tip strong,
.staff-shortcut-tip span,
.staff-login-panel > a,
.change-password-page > section > span {
  font-size: 12px !important;
  line-height: 1.5;
}

.hero-proof span,
.public-barber-copy > strong,
.reviews-principles p,
.booking-resource-state p,
.booking-summary dt,
.summary-heading span,
.home-club-copy li,
.home-club-card > p,
.home-club-card > b {
  color: rgba(255,255,255,.72) !important;
}

.reviews-principles p,
.booking-resource-state p,
.service-detail-link,
.customer-booking-summary span {
  color: #5c574f !important;
}

.wizard-progress button span,
.summary-loyalty strong,
.loyalty-public-card > div:last-child span,
.experience-points article > span,
.reviews-principles article > span {
  font-size: 12px !important;
}

.loyalty-public-card > div:last-child span {
  color: rgba(255,255,255,.74) !important;
}

/* Monitor financiero Mercado Pago */
.payment-reconciliation { display: grid; gap: 20px; }
.payment-reconciliation-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 190px;
  padding: 34px 38px;
  border: 1px solid rgba(214,169,74,.42);
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% 0%, rgba(54,117,214,.22), transparent 38%),
    linear-gradient(135deg, #12120f 0%, #1e1b13 58%, #0e1117 100%);
  box-shadow: 0 24px 60px rgba(25,20,10,.18), inset 0 1px rgba(255,255,255,.05);
}
.payment-reconciliation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(232,193,105,.08) 50%, transparent 80%);
}
.payment-reconciliation-hero > * { position: relative; z-index: 1; }
.payment-reconciliation-hero small { color: #d9ad53 !important; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.payment-reconciliation-hero h2 { margin: 8px 0 10px; color: #fff; font-family: Georgia, serif; font-size: clamp(30px, 4vw, 46px); font-weight: 400; }
.payment-reconciliation-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.74); font-size: 14px; line-height: 1.7; }
.payment-reconciliation-hero button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #d7ac55;
  border-radius: 999px;
  background: linear-gradient(135deg, #edcf89, #bd8530);
  color: #171108;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 12px 30px rgba(197,139,43,.2);
}
.payment-reconciliation-hero button:disabled { opacity: .65; }
.payment-security-warning,
.payment-security-ready {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  border-radius: 18px;
}
.payment-security-warning { border: 1px solid #e1b861; background: #fff8e7; }
.payment-security-ready { border: 1px solid #83b999; background: #edf8f1; }
.payment-security-warning > span,
.payment-security-ready > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 900; }
.payment-security-warning > span { background: #e8bd62; color: #2b1d05 !important; }
.payment-security-ready > span { background: #2d7d4e; color: #fff !important; }
.payment-security-warning strong,
.payment-security-ready strong { display: block; margin-bottom: 3px; color: #1d1a14; font-size: 14px; }
.payment-security-warning p,
.payment-security-ready p { margin: 0; color: #5d564a; font-size: 12px; line-height: 1.55; }
.payment-monitor-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.payment-monitor-stats article {
  position: relative;
  overflow: hidden;
  min-height: 130px;
  padding: 22px;
  border: 1px solid #ded8ce;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(36,30,20,.07);
}
.payment-monitor-stats article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #c99942; }
.payment-monitor-stats article.recovered::before { background: #3d72bd; }
.payment-monitor-stats article.healthy::before { background: #2d8a55; }
.payment-monitor-stats article.attention::before { background: #b1483f; }
.payment-monitor-stats span { display: block; color: #645e55 !important; font-size: 12px; font-weight: 750; }
.payment-monitor-stats strong { display: block; margin: 10px 0 4px; color: #181611; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.payment-monitor-stats small { color: #6c665e !important; font-size: 11px; }
.payment-event-panel { overflow: hidden; border: 1px solid #ded8ce; border-radius: 24px; background: #fff; box-shadow: 0 18px 45px rgba(36,30,20,.08); }
.payment-event-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid #ebe6dd; background: #fbfaf7; }
.payment-event-panel > header small { color: #9a6d24 !important; font-size: 10px; font-weight: 850; letter-spacing: .17em; }
.payment-event-panel > header h3 { margin: 5px 0 0; color: #181611; font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
.payment-event-panel > header > span { color: #625d55 !important; font-size: 12px; font-weight: 750; }
.payment-event-list { display: grid; }
.payment-event { display: grid; grid-template-columns: minmax(130px,.75fr) minmax(200px,1.5fr) minmax(150px,.8fr); align-items: center; gap: 18px; padding: 18px 28px; border-bottom: 1px solid #eee9e1; }
.payment-event:last-child { border-bottom: 0; }
.payment-event-state { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 3px 8px; }
.payment-event-state i { grid-row: 1 / 3; width: 9px; height: 9px; border-radius: 50%; background: #9e978d; box-shadow: 0 0 0 4px rgba(158,151,141,.14); }
.payment-event.processed .payment-event-state i { background: #2d8a55; box-shadow: 0 0 0 4px rgba(45,138,85,.13); }
.payment-event.attention .payment-event-state i,
.payment-event.failed .payment-event-state i,
.payment-event.rejected .payment-event-state i { background: #b1483f; box-shadow: 0 0 0 4px rgba(177,72,63,.13); }
.payment-event-state span { color: #25221c !important; font-size: 12px; font-weight: 850; }
.payment-event-state small,
.payment-event-main small,
.payment-event-detail small { color: #6d675e !important; font-size: 11px; }
.payment-event-main strong,
.payment-event-detail strong { display: block; color: #1b1915; font-size: 14px; }
.payment-event-main span,
.payment-event-detail span { display: block; margin: 3px 0; color: #5d574f !important; font-size: 12px; }
.payment-event-detail { text-align: right; }
.payment-event > p { grid-column: 2 / -1; margin: -8px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff1ef; color: #873b34; font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) {
  .payment-monitor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-event { grid-template-columns: minmax(120px,.7fr) minmax(180px,1.3fr) minmax(130px,.7fr); padding-inline: 20px; }
}

@media (max-width: 650px) {
  .payment-reconciliation { gap: 14px; }
  .payment-reconciliation-hero { align-items: stretch; flex-direction: column; min-height: 0; padding: 26px 22px; border-radius: 20px; }
  .payment-reconciliation-hero h2 { font-size: 31px; }
  .payment-reconciliation-hero button { width: 100%; }
  .payment-monitor-stats { gap: 10px; }
  .payment-monitor-stats article { min-height: 116px; padding: 18px 16px; border-radius: 16px; }
  .payment-monitor-stats strong { font-size: 25px; }
  .payment-event-panel { border-radius: 18px; }
  .payment-event-panel > header { padding: 20px 18px; }
  .payment-event-panel > header h3 { font-size: 24px; }
  .payment-event { grid-template-columns: 1fr auto; gap: 10px 14px; padding: 16px 18px; }
  .payment-event-state { grid-column: 1 / -1; }
  .payment-event-detail { text-align: right; }
  .payment-event > p { grid-column: 1 / -1; margin-top: 0; }
}

/* P7 · experiencia móvil clara, táctil y ligera. */
@supports (content-visibility: auto) {
  .services-section,
  .loyalty-public,
  .home-club,
  .reviews-section,
  .faq-section,
  .visit-section,
  .products-booking,
  footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 820px;
  }
}

@media (max-width: 720px) {
  .mobile-reservation-access,
  .mobile-team-access,
  .shop-header nav a,
  .club-header nav a,
  .member-page-header nav a,
  .service-page-header nav a,
  .service-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: 12px !important;
    line-height: 1.2;
  }

  .mobile-header-actions { gap: 8px; }
  .mobile-reservation-access { padding-inline: 13px; }
  .mobile-team-access { padding-inline: 11px; }
  .wizard-mobile-status span,
  .wizard-mobile-status strong,
  .hero-proof span,
  .mobile-booking-team small,
  .club-contract-progress span,
  .club-contract-progress b {
    font-size: 12px !important;
    line-height: 1.4;
  }

  .wizard-back,
  .wizard-text-button,
  .service-detail-link,
  .shop-page .product-copy > button,
  .product-modal section > button {
    min-height: 44px;
    font-size: 14px !important;
  }

  .faq-list summary { min-height: 56px; }
  .faq-list summary,
  .faq-list details p { font-size: 15px; line-height: 1.6; }

  .site-header,
  .shop-header,
  .club-header,
  .member-page-header,
  .service-page-header,
  .booking-fast-note,
  .visit-map > span,
  .quick-agenda-overlay,
  .access-editor-overlay,
  .product-modal,
  .gift-payment-overlay,
  .membership-dialog-overlay,
  .club-plan-emblem {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .wizard-progress button,
  .wizard-service-grid button,
  .barber-grid button,
  .date-strip button,
  .time-grid button,
  .booking-calendar-grid button,
  .wizard-next,
  .club-plan-card,
  .club-plan-card button,
  .product-add > button {
    will-change: auto !important;
  }

  .club-plan-card.membership-plan-card { transform: none; }
  .club-plan-card.membership-plan-card:hover { transform: none; }
}

html.leveling-compact-mobile .leveling-scroll-progress { display: none; }

/* Los móviles capaces conservan la identidad animada; el modo ligero sigue mandando
   en conexiones lentas, ahorro de datos, hardware limitado o movimiento reducido. */
@media (max-width: 720px) {
  html.leveling-motion-capable .gold-motion-card::before,
  html.leveling-motion-capable .experience-points article::before,
  html.leveling-motion-capable .product-items > div::before,
  html.leveling-motion-capable .wizard-service-grid button::after,
  html.leveling-motion-capable .barber-grid button::after {
    animation-duration: 10.5s;
  }
}

.booking-email-hint {
  display: block;
  margin-top: 7px;
  color: #756c5f;
  font-size: 12px !important;
  line-height: 1.45;
}

.booking-email-confirmed {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 3px 11px;
  width: min(100%, 540px);
  margin: 16px auto 2px;
  padding: 14px 16px;
  border: 1px solid rgba(166, 117, 35, .23);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(220, 174, 83, .12), rgba(255, 255, 255, .68));
  color: #272219;
  text-align: left;
}

/* S1 · navegación estable del asistente de reserva */
.booking-app,
.booking-success,
.wizard-main,
.wizard-panel {
  overflow-anchor: none;
}

.wizard-panel {
  min-height: 520px;
}

.wizard-heading h3[tabindex="-1"],
.booking-success h3[tabindex="-1"] {
  scroll-margin-top: 28px;
}

.wizard-heading h3[tabindex="-1"]:focus-visible,
.booking-success h3[tabindex="-1"]:focus-visible {
  border-radius: 5px;
  outline: 2px solid rgba(169, 123, 45, .58);
  outline-offset: 7px;
}

@media (max-width: 800px) {
  .wizard-panel {
    min-height: 590px;
  }

  .wizard-heading h3[tabindex="-1"],
  .booking-success h3[tabindex="-1"] {
    scroll-margin-top: calc(82px + env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-heading h3[tabindex="-1"],
  .booking-success h3[tabindex="-1"] {
    scroll-behavior: auto;
  }
}

.booking-email-confirmed > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #171511;
  color: #e2b95f;
  font-size: 16px;
}

.booking-email-confirmed strong { font-size: 13px; }
.booking-email-confirmed small { color: #71695d; font-size: 12px !important; line-height: 1.45; }

/* P8 · selector de servicios compacto, editorial y fácil de comparar. */
.wizard-service-grid.booking-service-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wizard-service-grid.booking-service-options > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.wizard-service-grid.booking-service-options .booking-service-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 142px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(133, 93, 29, .18);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0, rgba(220, 174, 83, .13), transparent 36%),
    linear-gradient(145deg, #fff, #f7f1e6);
  box-shadow: 0 13px 34px rgba(49, 34, 12, .07), inset 0 1px rgba(255,255,255,.88);
}

.booking-service-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(164, 115, 34, .24);
  border-radius: 50%;
  background: #191713;
  color: #e8bf6d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
}

.booking-service-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.wizard-service-grid .booking-service-copy small {
  color: #8a6425;
  font-size: 12px;
  line-height: 1.35;
}

.wizard-service-grid .booking-service-copy h4 {
  max-width: none;
  margin: 0;
  color: #191611;
  font-size: 22px;
  line-height: 1.08;
}

.wizard-service-grid .booking-service-copy p {
  display: -webkit-box;
  min-height: 0;
  margin: 2px 0 0;
  overflow: hidden;
  color: #625d54;
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.booking-service-pick {
  display: grid;
  justify-items: end;
  gap: 9px;
  min-width: 105px;
}

.wizard-service-grid .booking-service-pick strong {
  color: #181510;
  font-size: 19px;
  white-space: nowrap;
}

.booking-service-pick b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #191713;
  color: #e9c374;
  font-size: 12px;
  font-weight: 800;
}

.booking-service-pick i { font-style: normal; font-size: 15px; }
.wizard-service-grid.booking-service-options .booking-service-option:hover {
  border-color: rgba(164, 115, 34, .48);
  box-shadow: 0 18px 42px rgba(49, 34, 12, .11), inset 0 1px #fff;
  transform: translateY(-2px);
}

.booking-service-options.booking-choice-skeletons > span { min-height: 142px; border-radius: 17px; }

@media (max-width: 800px) {
  .wizard-service-grid.booking-service-options { grid-template-columns: 1fr; }
  .wizard-service-grid.booking-service-options > :last-child:nth-child(odd) { grid-column: auto; }
  .wizard-service-grid.booking-service-options .booking-service-option {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 15px;
  }
  .booking-service-index { width: 38px; height: 38px; font-size: 12px; }
  .wizard-service-grid .booking-service-copy h4 { font-size: 20px; }
  .booking-service-pick {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    padding-top: 11px;
    border-top: 1px solid rgba(77, 58, 27, .11);
  }
  .wizard-service-grid .booking-service-pick strong { font-size: 18px; }
  .booking-service-pick b { min-height: 40px; padding-inline: 14px; font-size: 13px; }
  .booking-service-options.booking-choice-skeletons > span { min-height: 126px; }
}

/* AP6 · Ecosistema comercial premium */
.loyalty-tabs > a { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 2px 9px; min-height: 68px; padding: 13px 15px; overflow: hidden; border: 1px solid rgba(9,9,8,.13); border-radius: 13px; background: linear-gradient(135deg,#fdfbf6,#eee2cc); color: #11100e; text-align: left; text-decoration: none; transition: border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.loyalty-tabs > a:hover { border-color: rgba(162,117,39,.58); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(25,20,12,.08); }
.loyalty-tabs > a::after { position: absolute; right: -30px; bottom: -60px; width: 110px; height: 110px; border: 1px solid rgba(192,143,53,.2); border-radius: 50%; content: ""; }
.loyalty-tabs > a > span { grid-row: 1 / 3; align-self: center; color: #a67627; font-family: Georgia,"Times New Roman",serif; font-size: 15px; }
.loyalty-tabs > a strong { align-self: end; font-size: 9px; }
.loyalty-tabs > a small { color: #817c74; font-size: 7px; }

.membership-admin-page { min-height: 100vh; padding-bottom: 80px; background: radial-gradient(circle at 90% 5%,rgba(190,139,46,.15),transparent 28%),#f2eee6; color: #11100e; }
.membership-admin-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px; padding: 0 max(24px,calc((100vw - 1420px)/2)); border-bottom: 1px solid rgba(9,9,8,.12); background: rgba(15,14,12,.96); color: #fff; backdrop-filter: blur(16px); }
.membership-admin-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.membership-admin-brand img { width: 52px; height: 52px; object-fit: contain; }
.membership-admin-brand span { display: grid; gap: 2px; }
.membership-admin-brand small { color: #bd8a31; font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.membership-admin-brand strong { font-family: Georgia,"Times New Roman",serif; font-size: 20px; font-weight: 400; }
.membership-admin-header nav { display: flex; align-items: center; gap: 9px; }
.membership-admin-header nav a { display: grid; place-items: center; min-height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.76); font-size: 9px; font-weight: 750; text-decoration: none; }
.membership-admin-intro { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 40px; align-items: end; width: min(1420px,calc(100% - 48px)); padding: clamp(55px,7vw,100px) 0 45px; margin: auto; }
.membership-admin-intro p { margin: 0 0 12px; color: #9e7025; font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.membership-admin-intro h1 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(43px,5.4vw,73px); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.membership-admin-intro h1 em { color: #9c7028; font-weight: 400; }
.membership-admin-intro > div > span { display: block; max-width: 720px; margin-top: 22px; color: #6c655a; font-size: 13px; line-height: 1.7; }
.membership-admin-intro aside { display: grid; gap: 5px; padding: 22px; border: 1px solid rgba(174,125,39,.32); border-radius: 17px; background: #15130f; color: #fff; box-shadow: 0 18px 45px rgba(26,20,11,.14); }
.membership-admin-intro aside small { color: #c99b47; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.membership-admin-intro aside strong { font-family: Georgia,"Times New Roman",serif; font-size: 22px; font-weight: 400; }
.membership-admin-intro aside span { color: rgba(255,255,255,.5); font-size: 9px; }
.membership-admin-stage { width: min(1420px,calc(100% - 48px)); margin: auto; padding: 28px; border: 1px solid rgba(9,9,8,.11); border-radius: 24px; background: rgba(255,255,255,.58); box-shadow: 0 30px 80px rgba(38,28,12,.09); }

.customer-commerce-hub { margin-top: 15px; padding: 20px; overflow: hidden; border: 1px solid rgba(175,126,40,.28); border-radius: 18px; background: radial-gradient(circle at 95% 0,rgba(203,152,60,.16),transparent 32%),#16140f; color: #fff; }
.customer-commerce-hub > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.customer-commerce-hub > header span { color: #c99842; font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.customer-commerce-hub > header h3 { margin: 5px 0; font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 400; }
.customer-commerce-hub > header p { margin: 0; color: rgba(255,255,255,.48); font-size: 9px; }
.customer-commerce-hub > header > b { padding: 7px 10px; border: 1px solid rgba(219,172,83,.35); border-radius: 999px; background: rgba(194,139,42,.12); color: #e0b766; font-size: 8px; }
.customer-commerce-hub > div { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.customer-commerce-hub article { display: grid; align-content: start; gap: 5px; min-height: 98px; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.045); }
.customer-commerce-hub article.benefits { border-color: rgba(207,161,71,.3); background: linear-gradient(145deg,rgba(205,156,61,.17),rgba(255,255,255,.035)); }
.customer-commerce-hub article span,.customer-commerce-hub article small { color: rgba(255,255,255,.45); font-size: 7px; line-height: 1.35; text-transform: uppercase; }
.customer-commerce-hub article strong { margin-top: auto; font-family: Georgia,"Times New Roman",serif; color: #f2dfb8; font-size: 18px; font-weight: 400; }
.timeline-icon.order { background: #dfd4c1; color: #5f4a27; }
.timeline-icon.membership { background: #c8def5; color: #224d75; }
.timeline-icon.giftcard { background: #ead2a1; color: #694712; }
.timeline-icon.benefit { background: #d8ead1; color: #35612c; }

.gift-redeem-box > p { margin: 0; color: #746d62; font-size: 9px; line-height: 1.5; }
.gift-redeem-box textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid rgba(9,9,8,.18); border-radius: 8px; background: #fff; color: #181511; font: inherit; font-size: 10px; }
.gift-redeem-box > small { color: #8d6b31; font-size: 8px; }
.gift-audit { margin-top: 12px; border-top: 1px solid rgba(9,9,8,.1); }
.gift-audit summary { padding: 12px 0 5px; color: #76551e; cursor: pointer; font-size: 9px; font-weight: 800; }
.gift-audit > div { display: grid; gap: 5px; padding-top: 6px; }
.gift-audit article { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: #f1ece2; }
.gift-audit article > span { color: #8b6222; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.gift-audit article div { display: grid; gap: 2px; }
.gift-audit article strong { font-size: 8px; }
.gift-audit article small,.gift-audit time { color: #7b746a; font-size: 7px; }

@media (max-width: 1000px) {
  .customer-commerce-hub > div { grid-template-columns: repeat(2,1fr); }
  .customer-commerce-hub article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .loyalty-tabs { grid-template-columns: 1fr 1fr; }
  .membership-admin-header { position: relative; padding: 10px 16px; align-items: flex-start; }
  .membership-admin-header nav { display: grid; justify-items: end; }
  .membership-admin-header nav a:nth-child(2) { display: none; }
  .membership-admin-intro { grid-template-columns: 1fr; width: calc(100% - 28px); padding: 45px 0 28px; }
  .membership-admin-intro h1 { font-size: 43px; }
  .membership-admin-intro aside { display: none; }
  .membership-admin-stage { width: calc(100% - 20px); padding: 10px; border-radius: 17px; }
  .customer-commerce-hub { padding: 15px; }
  .customer-commerce-hub > header { display: grid; }
  .customer-commerce-hub > div { grid-template-columns: 1fr 1fr; }
  .customer-commerce-hub article { min-height: 88px; }
  .gift-audit article { grid-template-columns: 58px minmax(0,1fr); }
  .gift-audit time { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .loyalty-tabs > a { transition: none; }
}

/* S4 · Inicio como ruta rápida hacia la reserva. */
.home-flow {
  position: relative;
  z-index: 2;
  background: var(--paper);
  color: var(--ink);
}

.home-trust {
  padding: clamp(78px, 8vw, 112px) 0 0;
  scroll-margin-top: 24px;
}

.home-trust-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 42px;
}

.home-trust-heading h2,
.home-final-cta h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.045em;
}

.home-trust-heading h2 em,
.home-final-cta h2 em { color: #a1782d; font-weight: 400; }
.home-trust-heading > p { max-width: 510px; margin: 0 0 5px; color: #686259; font-size: 14px; line-height: 1.75; }

.home-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: 16px;
}

.home-review-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  min-height: 310px;
  padding: clamp(28px, 4vw, 50px);
  overflow: hidden;
  border: 1px solid rgba(143, 100, 31, .2);
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0, rgba(215, 173, 89, .18), transparent 34%), #fff;
  box-shadow: 0 22px 60px rgba(52, 37, 14, .09);
}

.home-review-mark {
  display: grid;
  place-items: center;
  align-content: center;
  width: 118px;
  aspect-ratio: 1;
  border: 1px solid rgba(214, 171, 86, .35);
  border-radius: 50%;
  background: #11100e;
  color: #edca80;
}

.home-review-mark span { font-family: Georgia, "Times New Roman", serif; font-size: 50px; font-style: italic; line-height: .85; }
.home-review-mark small { max-width: 86px; margin-top: 9px; color: rgba(255,255,255,.5); font-size: 7px; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-align: center; text-transform: uppercase; }
.home-review-card h3 { margin: 9px 0 13px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 3.4vw, 48px); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.home-review-card h3 em { color: #9b7228; font-weight: 400; }
.home-review-card > div:last-child > p:not(.eyebrow) { max-width: 580px; margin: 0 0 22px; color: #655f56; font-size: 12px; line-height: 1.65; }
.home-review-card .button { min-height: 44px; padding-inline: 18px; }

.home-experience-cards { display: grid; gap: 10px; }
.home-experience-cards article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 18px 20px;
  border: 1px solid rgba(9,9,8,.11);
  border-radius: 17px;
  background: rgba(255,255,255,.65);
  transition: border-color .25s ease, background .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.home-experience-cards article:hover { border-color: rgba(167, 118, 37, .42); background: #fff; transform: translateX(-4px); }
.home-experience-cards article > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #171511; color: #e1b763; font-family: Georgia, "Times New Roman", serif; font-size: 12px; }
.home-experience-cards h3 { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 400; }
.home-experience-cards p { margin: 0; color: #6a645b; font-size: 11px; line-height: 1.5; }

.home-benefit-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(218, 174, 88, .24);
  border-radius: 18px;
  background: rgba(218, 174, 88, .22);
}

.home-benefit-strip article { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 13px; min-height: 92px; padding: 18px 22px; background: #171511; color: #fff; }
.home-benefit-strip article > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(225, 181, 98, .38); border-radius: 50%; color: #e3ba68; font-family: Georgia, "Times New Roman", serif; font-size: 13px; }
.home-benefit-strip article div { display: grid; gap: 4px; }
.home-benefit-strip strong { color: #f2eadb; font-size: 12px; }
.home-benefit-strip small { color: rgba(255,255,255,.52); font-size: 10px; line-height: 1.45; }

.home-faq-compact {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid rgba(9,9,8,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.5);
  scroll-margin-top: 24px;
}
.home-faq-title { display: grid; align-content: center; gap: 5px; padding-right: 20px; border-right: 1px solid rgba(9,9,8,.1); }
.home-faq-title span { color: #966c26; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.home-faq-title strong { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; }
.home-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.home-faq-grid details { border: 1px solid rgba(9,9,8,.1); border-radius: 11px; background: #fff; }
.home-faq-grid summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-height: 54px; padding: 11px 13px; color: #39352f; cursor: pointer; font-size: 10px; font-weight: 760; line-height: 1.35; list-style: none; }
.home-faq-grid summary::-webkit-details-marker { display: none; }
.home-faq-grid summary b { color: #9a6f27; font-size: 16px; font-weight: 400; transition: transform .2s ease; }
.home-faq-grid details[open] summary b { transform: rotate(45deg); }
.home-faq-grid details p { margin: 0; padding: 0 13px 14px; color: #69635a; font-size: 10px; line-height: 1.55; }

.home-flow .public-barbers { padding-top: clamp(72px, 7vw, 96px); }
.home-flow .public-barbers-heading { margin-bottom: 32px; }
.home-flow .public-barbers-heading h2 { font-size: clamp(42px, 4.7vw, 65px); }
.home-flow .public-barber-grid { gap: 13px; }
.home-flow .public-barber-card { grid-template-columns: 118px minmax(0, 1fr); min-height: 204px; border-radius: 18px; }
.home-flow .public-barber-photo { min-height: 204px; aspect-ratio: auto; }
.home-flow .public-barber-photo small { top: 12px; left: 12px; }
.home-flow .public-barber-copy { align-content: center; padding: 22px; }
.home-flow .public-barber-copy h3 { font-size: 28px; }
.home-flow .public-barber-copy > span { display: -webkit-box; margin-top: 10px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-flow .public-barber-copy a { margin-top: 14px; }

.home-flow .visit-section { min-height: 430px; margin: clamp(74px, 8vw, 110px) 0 90px; }
.home-flow .visit-copy { padding: clamp(42px, 5vw, 68px); }
.home-flow .visit-copy h2 { font-size: clamp(40px, 4.3vw, 60px); }
.home-flow .visit-map,
.home-flow .visit-map iframe { min-height: 430px; }

.home-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(100% - 72px, 1400px);
  margin: 0 auto;
  padding: 0 0 90px;
}

.home-path-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 330px;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(224, 181, 96, .25);
  border-radius: 24px;
  background: #11100e;
  color: #fff;
  box-shadow: 0 25px 65px rgba(28,20,9,.18);
  text-decoration: none;
  transition: border-color .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s ease;
}
.home-path-card:hover { border-color: rgba(235, 202, 131, .64); box-shadow: 0 34px 78px rgba(28,20,9,.27); transform: translateY(-7px); }
.home-path-card > * { position: relative; z-index: 2; }
.home-path-index { position: absolute; top: 24px; left: 26px; color: rgba(255,255,255,.48); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.home-path-card h2 { margin: 0 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 4vw, 54px); font-weight: 400; letter-spacing: -.04em; }
.home-path-card p { max-width: 450px; margin: 0 0 20px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.6; }
.home-path-card strong { display: inline-flex; align-items: center; gap: 9px; color: #ecc878; font-size: 11px; }
.home-path-card strong b { font-size: 16px; }
.home-path-club { background: radial-gradient(circle at 80% 20%, rgba(55, 167, 236, .22), transparent 36%), linear-gradient(145deg, #171715, #090a0b); }
.home-path-symbol { position: absolute; top: 38px; right: 45px; color: rgba(93, 193, 255, .55); font-size: 130px; line-height: 1; text-shadow: 0 0 38px rgba(59, 174, 244, .45); transform: rotate(10deg); }
.home-path-shop::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #10100f 0%, rgba(16,16,15,.96) 40%, rgba(16,16,15,.3) 100%); content: ""; }
.home-path-shop > img { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 64%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); }

.home-final { padding-top: 90px; background: radial-gradient(circle at 50% 0, rgba(218, 174, 88, .14), transparent 32%), #090908; color: #fff; }
.home-final-cta { display: grid; justify-items: center; width: min(100% - 40px, 980px); margin: 0 auto; padding: 0 0 88px; text-align: center; }
.home-final-cta h2 { color: #f3efe7; font-size: clamp(52px, 6.8vw, 92px); }
.home-final-cta h2 em { color: #dfb45e; }
.home-final-cta > p:not(.eyebrow) { max-width: 600px; margin: 22px 0 28px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.7; }
.home-final-cta > div { display: flex; align-items: center; gap: 24px; }
.home-final-cta > div > a:last-child { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 750; text-decoration: underline; text-decoration-color: rgba(222,177,89,.4); text-underline-offset: 5px; }

@media (max-width: 1050px) {
  .home-trust-grid { grid-template-columns: 1fr; }
  .home-experience-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-experience-cards article { grid-template-columns: 42px minmax(0, 1fr); min-height: 112px; padding: 15px; }
  .home-flow .public-barber-grid { grid-template-columns: 1fr; }
  .home-flow .public-barber-card { min-height: 180px; }
  .home-flow .public-barber-photo { min-height: 180px; }
}

@media (max-width: 800px) {
  .home-trust { padding-top: 60px; }
  .home-trust-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .home-trust-heading h2 { font-size: 45px; }
  .home-trust-heading > p { font-size: 13px; }
  .home-review-card { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 26px 22px; border-radius: 18px; }
  .home-review-mark { width: 84px; }
  .home-review-mark span { font-size: 37px; }
  .home-review-mark small { display: none; }
  .home-review-card h3 { font-size: 35px; }
  .home-experience-cards { grid-template-columns: 1fr; }
  .home-experience-cards article { min-height: 88px; }
  .home-benefit-strip { grid-template-columns: 1fr; }
  .home-benefit-strip article { min-height: 82px; }
  .home-faq-compact { grid-template-columns: 1fr; gap: 14px; padding: 15px; }
  .home-faq-title { padding: 0 0 13px; border-right: 0; border-bottom: 1px solid rgba(9,9,8,.1); }
  .home-faq-grid { grid-template-columns: 1fr; }
  .home-faq-grid summary { min-height: 52px; font-size: 11px; }
  .home-faq-grid details p { font-size: 11px; }
  .home-flow .public-barbers { padding-top: 62px; }
  .home-flow .public-barbers-heading { gap: 18px; }
  .home-flow .public-barbers-heading h2 { font-size: 43px; }
  .home-flow .public-barbers-heading > p { font-size: 13px; }
  .home-flow .public-barber-card { grid-template-columns: 98px minmax(0, 1fr); min-height: 172px; }
  .home-flow .public-barber-photo { min-height: 172px; aspect-ratio: auto; }
  .home-flow .public-barber-copy { padding: 17px; }
  .home-flow .public-barber-copy h3 { font-size: 25px; }
  .home-flow .public-barber-copy > span { display: none; }
  .home-flow .visit-section { min-height: 0; margin: 68px 0 64px; }
  .home-flow .visit-copy { padding: 48px 23px; }
  .home-flow .visit-map,
  .home-flow .visit-map iframe { min-height: 330px; }
  .home-paths { grid-template-columns: 1fr; width: calc(100% - 40px); padding-bottom: 64px; }
  .home-path-card { min-height: 255px; padding: 28px 24px; border-radius: 19px; }
  .home-path-card h2 { font-size: 38px; }
  .home-path-symbol { top: 35px; right: 25px; font-size: 92px; }
  .home-path-shop > img { width: 82%; opacity: .78; }
  .home-final { padding-top: 70px; }
  .home-final-cta { padding-bottom: 65px; }
  .home-final-cta h2 { font-size: 51px; }
  .home-final-cta > div { align-items: stretch; flex-direction: column; gap: 18px; width: 100%; }
  .home-final-cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-experience-cards article,
  .home-path-card { transition: none; }
  .home-experience-cards article:hover,
  .home-path-card:hover { transform: none; }
}

/* S5 · llamados a la acción premium, útiles y jerarquizados. */
#agenda,
#confianza,
#barberos,
#ubicacion,
#club,
#productos { scroll-margin-top: 105px; }

.home-site-header {
  position: fixed;
  z-index: 80;
  animation: none;
  transition: width .35s cubic-bezier(.16,1,.3,1), margin .35s cubic-bezier(.16,1,.3,1), padding .35s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home-site-header.is-compact {
  width: min(100% - 56px, 1240px);
  margin-top: 8px;
  padding-block: 7px;
  border-color: rgba(235,202,131,.25);
  background: rgba(9,9,8,.94);
  box-shadow: 0 14px 42px rgba(0,0,0,.34);
}

.home-site-header .official-logo { transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), filter .42s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.home-site-header.is-compact .official-logo { width: 43px; height: 43px; }
.home-site-header .desktop-nav { gap: clamp(14px, 1.55vw, 25px); }
.home-site-header .header-cta { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; border-radius: 8px; }
.home-site-header .header-cta span { margin-left: 0; }
.home-site-header .header-cta b { color: #fff0c2; font-size: 16px; font-weight: 400; }

.mobile-menu-toggle,
.mobile-menu-layer { display: none; }
.mobile-menu-layer[hidden] { display: none !important; }

.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.cta-primary {
  border: 1px solid #dcb45f;
  background: linear-gradient(135deg, #edca7a, #bd842a);
  color: #151109;
  box-shadow: 0 14px 32px rgba(160,107,24,.2);
  transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .22s ease;
}

.cta-primary:hover { border-color: #f5daa0; background: linear-gradient(135deg, #f5d998, #d6a141); box-shadow: 0 18px 38px rgba(160,107,24,.28); transform: translateY(-2px); }
.cta-primary:disabled { cursor: wait; opacity: .72; transform: none; }

.cta-secondary {
  border: 1px solid rgba(235,202,131,.38);
  background: rgba(255,255,255,.045);
  color: #f0d18c;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cta-secondary:hover { border-color: rgba(245,218,160,.72); background: rgba(216,174,91,.1); color: #fff1c8; }

.hero-actions .home-first-action { min-height: 50px; cursor: pointer; }
.hero-actions .home-first-action span { color: #fff1c8; font-size: 17px; }

.home-mid-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 16px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(214,171,86,.28);
  border-radius: 18px;
  background: radial-gradient(circle at 88% 0, rgba(216,174,91,.16), transparent 32%), #12110f;
  color: #fff;
  box-shadow: 0 18px 45px rgba(43,31,13,.1);
}
.home-mid-cta > div:first-child { display: grid; gap: 6px; }
.home-mid-cta > div:first-child span { color: #d9af5d; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.home-mid-cta > div:first-child strong { font-family: Georgia,"Times New Roman",serif; font-size: clamp(23px,2.4vw,31px); font-weight: 400; }
.home-mid-cta > div:last-child { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.home-mid-cta .cta-secondary { min-height: 48px; }

.home-live-availability {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 28px;
  width: min(100%, 790px);
  margin: 2px auto 0;
  padding: 18px 20px 18px 23px;
  border: 1px solid rgba(231,190,109,.3);
  border-radius: 17px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 20px 55px rgba(0,0,0,.2);
  text-align: left;
}
.home-live-availability > div { display: grid; gap: 5px; }
.home-live-availability > div > span { display: flex; align-items: center; gap: 8px; color: #dfb761; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.home-live-availability > div > span i { width: 7px; height: 7px; border-radius: 50%; background: #79c68d; box-shadow: 0 0 0 4px rgba(121,198,141,.1); }
.home-live-availability strong { color: #f5efe4; font-family: Georgia,"Times New Roman",serif; font-size: clamp(19px,2.3vw,27px); font-weight: 400; text-transform: capitalize; }
.home-live-availability small { color: rgba(255,255,255,.56); font-size: 11px !important; }
.home-live-availability .cta-primary { min-width: 190px; border: 0; cursor: pointer; }

.home-final-cta > .home-final-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
}
.home-final-cta > .home-final-secondary a { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 750; text-decoration: underline; text-decoration-color: rgba(222,177,89,.38); text-underline-offset: 5px; }
.home-final-cta > .home-final-secondary a:hover { color: #f0ce85; }

.cta-gold-pass { position: relative; overflow: hidden; isolation: isolate; }
.cta-gold-pass::before {
  position: absolute;
  z-index: 2;
  inset: -50% auto -50% -42%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,248,220,.72), transparent);
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-160%,0,0) skewX(-18deg);
}
html.leveling-motion-capable .cta-gold-pass::before { animation: s5-gold-pass 1.05s cubic-bezier(.16,1,.3,1) .75s 1 both; }
@keyframes s5-gold-pass {
  0%,18% { opacity: 0; transform: translate3d(-160%,0,0) skewX(-18deg); }
  28% { opacity: .8; }
  82% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(650%,0,0) skewX(-18deg); }
}

@media (max-width: 1120px) {
  .home-site-header .desktop-nav { gap: 12px; }
  .home-site-header .desktop-nav a { font-size: 11px; }
  .home-site-header .desktop-nav .my-booking-link { display: none; }
}

@media (max-width: 800px) {
  #agenda,
  #confianza,
  #barberos,
  #ubicacion,
  #club,
  #productos { scroll-margin-top: 82px; }

  .home-site-header,
  .home-site-header.is-compact {
    grid-template-columns: 1fr auto;
    width: calc(100% - 24px);
    margin-top: 8px;
    padding: 7px 8px 7px 10px;
    border-radius: 13px;
    background: #0c0c0b;
    box-shadow: 0 12px 34px rgba(0,0,0,.35);
  }
  .home-site-header .official-logo,
  .home-site-header.is-compact .official-logo { width: 44px; height: 44px; }
  .home-site-header .desktop-nav,
  .home-site-header .header-cta { display: none; }

  .mobile-menu-toggle {
    display: grid;
    place-content: center;
    gap: 4px;
    width: 46px;
    min-height: 46px;
    padding: 0;
    border: 1px solid rgba(235,202,131,.35);
    border-radius: 11px;
    background: rgba(216,174,91,.08);
    cursor: pointer;
  }
  .mobile-menu-toggle span { display: block; width: 18px; height: 1px; background: #edcc84; transition: transform .2s ease, opacity .2s ease; }
  .home-site-header.menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .home-site-header.menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
  .home-site-header.menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .mobile-menu-layer {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    align-items: start;
    padding: 76px 12px 12px;
    background: rgba(4,4,3,.76);
  }
  .mobile-menu-panel {
    width: 100%;
    max-height: calc(100svh - 88px);
    overflow-y: auto;
    border: 1px solid rgba(235,202,131,.22);
    border-radius: 20px;
    background: #11100e;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
  }
  .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 18px 15px; border-bottom: 1px solid rgba(255,255,255,.09); }
  .mobile-menu-heading > div { display: grid; gap: 4px; }
  .mobile-menu-heading small { color: #c89439 !important; font-size: 9px !important; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-menu-heading strong { color: #f5efe4; font-family: Georgia,"Times New Roman",serif; font-size: 22px; font-weight: 400; }
  .mobile-menu-heading button { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: transparent; color: #e9c574; cursor: pointer; font-size: 24px !important; font-weight: 300; }
  .mobile-menu-links { display: grid; padding: 8px; }
  .mobile-menu-links a { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; min-height: 54px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .mobile-menu-links a:last-child { border-bottom: 0; }
  .mobile-menu-links a > span { color: #af7d2d; font-family: Georgia,"Times New Roman",serif; font-size: 11px; }
  .mobile-menu-links a > strong { color: #f2ebde; font-size: 15px; }
  .mobile-menu-links a > b { color: #dab35e; font-size: 17px; font-weight: 400; }
  .mobile-menu-manage { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 8px 8px; padding: 15px 16px; border: 1px solid rgba(221,179,94,.26); border-radius: 13px; background: rgba(216,174,91,.09); color: #efce88; }
  .mobile-menu-manage > span { display: grid; gap: 3px; }
  .mobile-menu-manage small { color: rgba(255,255,255,.55) !important; font-size: 10px !important; }
  .mobile-menu-manage strong { font-size: 14px; }

  .hero-content { padding-top: 140px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .hero-actions .cta-primary,
  .hero-actions .cta-secondary { width: 100%; }
  .hero-manage-booking { justify-self: start; margin-top: 5px; }

  .home-mid-cta { display: grid; gap: 20px; padding: 22px 18px; }
  .home-mid-cta > div:last-child { display: grid; grid-template-columns: 1fr; width: 100%; }
  .home-mid-cta .cta-primary,
  .home-mid-cta .cta-secondary { width: 100%; }

  .home-final-cta > .home-live-availability { display: grid; grid-template-columns: 1fr; gap: 17px; width: 100%; padding: 18px; }
  .home-live-availability .cta-primary { width: 100%; }
  .home-final-cta > .home-final-secondary { display: grid; justify-items: center; gap: 15px; width: 100%; margin-top: 20px; }

  .mobile-booking-bar {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(235,202,131,.24);
    border-radius: 18px;
    background: #0b0b0a;
    box-shadow: 0 18px 48px rgba(0,0,0,.5);
  }
  .mobile-booking-bar a { min-height: 50px; padding-inline: 15px; border-radius: 12px; box-shadow: none; }
  .mobile-booking-bar .mobile-booking-team { border-radius: 12px; }
}

@media (max-width: 430px) {
  .mobile-booking-bar { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }
  .mobile-booking-bar a { padding-inline: 12px; font-size: 12px; }
  .mobile-booking-bar .mobile-booking-team { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-site-header,
  .home-site-header .official-logo,
  .mobile-menu-toggle span,
  .cta-primary,
  .cta-secondary { transition: none; }
  .cta-gold-pass::before { display: none; }
}

html.leveling-lite-mode .cta-gold-pass::before { display: none; }