/* Reserva real y demo comparten la jerarquía y los estados de selección. */
.booking-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.booking-progress > span { display:flex; align-items:center; justify-content:center; gap:6px; min-height:43px; font-size:11px; padding:8px 4px; border-bottom:2px solid var(--line); color:var(--ink-soft); }
.booking-progress > span.active { color:var(--accent); border-bottom-color:var(--accent); background:var(--accent-soft); }
.booking-progress > span.complete b { background:var(--accent); color:var(--accent-ink); }
.booking-progress > span b { width:22px; height:22px; min-width:22px; display:grid; place-items:center; font-size:10px; }
.luxury-client .booking-progress > span.complete b { font-size:10px; }
.booking-progress > span::after,.booking-progress > span.complete b::after { display:none; }
.booking-step .step-heading > span,.details-heading > span { font-size:10px; letter-spacing:.07em; }
.booking-step h2,.details-heading h2 { font-size:23px; letter-spacing:-.035em; }
.luxury-client .svc-card.active { outline:1px solid var(--accent); outline-offset:2px; }
.luxury-client .day-chip.active,.luxury-client .pill.active { box-shadow:0 0 0 2px var(--surface-flat),0 0 0 3px var(--accent); }
.luxury-client .booking-summary { border-left:3px solid var(--accent); }
.luxury-client button:focus-visible,.demo-app button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.luxury-client .booking-step { scroll-margin-top:100px; }
.demo-coach { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:18px 20px; margin:0 0 20px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; background:var(--surface-flat); }
.demo-coach strong { display:block; font-size:13px; margin-bottom:5px; }
.demo-coach p { margin:0; font-size:12px; color:var(--ink-soft); line-height:1.6; }
.demo-coach button { font-size:12px; padding:10px 13px; min-height:42px; white-space:nowrap; }
.demo-app .demo-mode-switch { background:none; padding:0; border:0; gap:10px; }
.demo-app .demo-mode-switch button { display:block; border:1px solid var(--line); border-radius:10px; padding:13px 12px; text-align:left; }
.demo-mode-switch button strong,.demo-mode-switch button small { display:block; }
.demo-mode-switch button strong { font-size:13px; }
.demo-mode-switch button small { font-size:10px; margin-top:5px; opacity:.8; font-weight:400; }
.demo-app .demo-mode-switch button[aria-pressed=true] { background:var(--accent-soft); color:var(--ink); border-color:var(--accent); box-shadow:inset 0 -2px var(--accent); }
.demo-app .demo-context { margin-bottom:16px; }
.demo-app .demo-intro { margin-bottom:20px; }
.demo-app .demo-intro h1 { font-size:34px; line-height:1.12; }
.demo-app .demo-intro p { line-height:1.7; }
.demo-app .demo-professional .premium-intro p { font-size:13px; }
.demo-app .demo-contact-card { scroll-margin-top:110px; }
.demo-app .customer-ticket h2 { font-size:22px; }
.demo-app .demo-feedback { border-radius:10px; border-color:var(--line); }
.demo-embedded .demo-coach { padding:12px; gap:8px; margin-bottom:15px; }
.demo-embedded .demo-coach strong { font-size:11px; }
.demo-embedded .demo-coach p { font-size:10px; }
.demo-embedded .demo-coach button { font-size:10px; }
.demo-embedded .demo-mode-switch button { padding:10px; }
@media(max-width:480px) {
  .booking-progress > span { flex-direction:column; gap:5px; font-size:10px; min-height:60px; }
  .demo-coach { grid-template-columns:1fr; gap:12px; }
  .demo-coach button { justify-self:start; }
  .demo-app .demo-intro h1 { font-size:29px; }
}