/* ── Sistema de variables por tenant ─────────────────────────── */
    :root {
      --accent:   #c9a84c;
      --accent-r: 201; --accent-g: 168; --accent-b: 76;
      --gold:     var(--accent);
      --gold-dim: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.35);
      --neon-clr: #ffffff;
      --neon-r:   255; --neon-g: 255; --neon-b: 255;
      --body-bg:  #050505;
    }
    /* Display — Plus Jakarta Sans */
    .font-display { font-family: 'Plus Jakarta Sans', sans-serif; }

    /* Separador ornamental clásico (oculto por defecto; visible solo en Ferraza vía .tenant-ferraza .cat-sep) */
    .sep-ornamental {
      display: flex; align-items: center; gap: 0.875rem; user-select: none;
    }
    .cat-sep { display: none; }
    .sep-ornamental::before, .sep-ornamental::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.13));
    }
    .sep-ornamental::after { background: linear-gradient(to left, transparent, rgba(255,255,255,0.13)); }
    .sep-ornamental-gem { font-size: 0.55rem; color: rgba(255,255,255,0.28); letter-spacing: 0.25em; }

    /* Service card con background-image */
    .service-card-bg { background-size: cover; background-position: center; }

    /* ── Service description expand/collapse ── */
    .svc-desc { display:none; }
    .svc-desc.expanded { display:block; }
    .svc-desc-toggle { cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }

    /* Club banner — plateado premium */
    .club-banner-premium {
      background: linear-gradient(145deg, #0d0d0f 0%, #111116 60%, #0a0a0d 100%);
      box-shadow:
        0 0 0 1px rgba(200,200,210,0.22),
        0 0 24px rgba(180,180,200,0.07),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    }
    .club-banner-premium:hover {
      box-shadow:
        0 0 0 1px rgba(220,220,235,0.35),
        0 0 32px rgba(200,200,220,0.12),
        inset 0 1px 0 rgba(255,255,255,0.09),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    }

    /* Ferraza — acento plateado/blanco, fondo negro puro */
    .tenant-ferraza {
      --accent:    #e2e8f0;
      --accent-r:  226; --accent-g: 232; --accent-b: 240;
      --body-bg:   #000000;
    }
    .tenant-ferraza body { background-color: #000000; }
    .tenant-ferraza .booking-hero {
      background-image: url('/ferraza1.webp') !important;
      background-color: #050505 !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-ferraza .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(5,5,5,0.45) 0%, rgba(5,5,5,0.30) 40%, rgba(5,5,5,0.88) 100%) !important;
    }
    /* Ferraza — tipografía y formas premium */
    .tenant-ferraza h2,
    .tenant-ferraza h3,
    .tenant-ferraza #shopClubNombre { font-family: 'Plus Jakarta Sans', sans-serif; }
    .tenant-ferraza .service-option { border-radius: 0.5rem !important; }
    .tenant-ferraza .service-option .icon-bg { border-radius: 0.375rem !important; }
    .tenant-ferraza .service-option .svc-name { font-family: 'Plus Jakarta Sans', sans-serif; }
    .tenant-ferraza .category-pill { border-radius: 0.375rem !important; }
    .tenant-ferraza .barber-option { border-radius: 0.5rem !important; }
    .tenant-ferraza .barber-option .barber-name { font-family: 'Plus Jakarta Sans', sans-serif; }

    .tenant-ferraza .cat-sep { display: flex !important; }
    .tenant-ferraza .cat-title { font-family: 'Plus Jakarta Sans', sans-serif; }
    /* Ferraza — club banner premium */
    .tenant-ferraza #clubBanner a {
      background: linear-gradient(135deg,rgba(226,232,240,0.03) 0%,rgba(15,15,20,0) 100%) !important;
      border: 1px solid rgba(226,232,240,0.15) !important;
      box-shadow: none !important;
    }
    .tenant-ferraza #clubBanner .club-icon-wrap {
      background: rgba(226,232,240,0.08) !important;
      border: 1px solid rgba(226,232,240,0.18) !important;
      border-radius: 0.375rem !important;
    }
    .tenant-ferraza #clubBanner i.ph-fill { filter: none !important; }

    /* ── Ferraza — Info strip ──────────────────────────────────── */
    .tenant-ferraza .info-strip {
      background: rgba(0,0,0,0.88) !important;
      border-color: rgba(255,255,255,0.04) !important;
    }
    .tenant-ferraza .info-strip a {
      color: rgba(226,232,240,0.55) !important;
    }
    .tenant-ferraza .info-strip a:hover {
      color: #e2e8f0 !important;
    }
    .tenant-ferraza .info-strip i {
      color: rgba(226,232,240,0.38) !important;
    }

    /* ── Ferraza — Barra de progreso ───────────────────────────── */
    .tenant-ferraza #progressTrack {
      background-color: rgba(255,255,255,0.07) !important;
      height: 2px !important;
    }
    .tenant-ferraza #progressBar {
      background-color: #e2e8f0 !important;
      box-shadow: none !important;
      height: 2px !important;
    }
    .tenant-ferraza #stepIndicatorText {
      color: rgba(255,255,255,0.42) !important;
      letter-spacing: 0.14em !important;
      text-shadow: none !important;
      font-size: 0.68rem !important;
      font-weight: 700 !important;
    }
    .tenant-ferraza #progressPercentage {
      color: rgba(255,255,255,0.25) !important;
      font-size: 0.68rem !important;
    }



    /* ── Ferraza — Botón Continuar ─────────────────────────────── */
    .tenant-ferraza #btnContinueBar {
      background: rgba(0,0,0,0.90) !important;
      border-top: 1px solid rgba(255,255,255,0.05) !important;
      backdrop-filter: blur(28px) !important;
      -webkit-backdrop-filter: blur(28px) !important;
    }
    .tenant-ferraza #btnContinue {
      background: #e2e8f0 !important;
      color: #080808 !important;
      border-radius: 0.875rem !important;
      font-weight: 900 !important;
      letter-spacing: 0.025em !important;
      box-shadow: 0 2px 20px rgba(226,232,240,0.14) !important;
      transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
    }
    .tenant-ferraza #btnContinue:hover,
    .tenant-ferraza #btnContinue:not(:disabled):active {
      background: #ffffff !important;
      box-shadow: 0 4px 28px rgba(255,255,255,0.22) !important;
    }
    .tenant-ferraza #btnContinue:disabled,
    .tenant-ferraza #btnContinue[disabled] {
      background: rgba(226,232,240,0.12) !important;
      color: rgba(255,255,255,0.25) !important;
      box-shadow: none !important;
    }
    /* Ferraza: shimmer plata deslizante en hero */
    @keyframes ferraza-silver-sweep {
      0%   { transform: translateX(-200%) skewX(-12deg); opacity: 0; }
      15%  { opacity: 0.6; }
      85%  { opacity: 0.6; }
      100% { transform: translateX(350%) skewX(-12deg); opacity: 0; }
    }
    .tenant-ferraza .booking-hero-overlay { overflow: hidden; }
    .tenant-ferraza .booking-hero-overlay::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(226,232,240,0.14) 50%, transparent 65%);
      animation: ferraza-silver-sweep 9s ease-in-out 1.5s infinite;
      pointer-events: none;
    }
    /* Ferraza: tarjeta de éxito con brillo plata */
    .tenant-ferraza #success-state .bg-\[\#0a0a0d\] {
      border-color: rgba(226,232,240,0.28) !important;
      box-shadow: 0 0 20px rgba(226,232,240,0.07) !important;
    }

    /* ═══ Memphis Salón — Plata/Acero sobre Grafito ═══ */
    .tenant-memphis {
      --accent:    #D9DCE1;
      --accent-r:  217; --accent-g: 220; --accent-b: 225;
      --body-bg:   #101114;
    }
    .tenant-memphis body { background-color: #101114; }
    .tenant-memphis .booking-hero {
      background-color: #0c0d10 !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-memphis .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(16,17,20,0.45) 0%, rgba(16,17,20,0.32) 40%, rgba(16,17,20,0.92) 100%) !important;
      overflow: hidden;
    }
    .tenant-memphis .booking-hero-overlay::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(105deg, transparent 35%, rgba(217,220,225,0.12) 50%, transparent 65%);
      animation: ferraza-silver-sweep 9s ease-in-out 1.5s infinite;
    }
    /* Tipografía premium */
    .tenant-memphis h2,
    .tenant-memphis h3,
    .tenant-memphis #shopClubNombre { font-family: 'Plus Jakarta Sans', sans-serif; }
    .tenant-memphis .service-option { border-radius: 0.5rem !important; }
    .tenant-memphis .service-option .icon-bg { border-radius: 0.375rem !important; }
    .tenant-memphis .barber-option { border-radius: 0.5rem !important; }
    .tenant-memphis .category-pill { border-radius: 0.375rem !important; }

    /* Info strip */
    .tenant-memphis .info-strip { background: rgba(12,13,16,0.9) !important; border-color: rgba(255,255,255,0.05) !important; }
    .tenant-memphis .info-strip a { color: rgba(217,220,225,0.6) !important; }
    .tenant-memphis .info-strip a:hover { color: #D9DCE1 !important; }
    .tenant-memphis .info-strip i { color: rgba(217,220,225,0.45) !important; }

    /* Barra de progreso */
    .tenant-memphis #progressTrack { background-color: rgba(255,255,255,0.07) !important; height: 2px !important; }
    .tenant-memphis #progressBar { background-color: #D9DCE1 !important; box-shadow: none !important; height: 2px !important; }
    .tenant-memphis #stepIndicatorText { color: rgba(255,255,255,0.45) !important; letter-spacing: 0.14em !important; text-shadow: none !important; font-weight: 700 !important; font-size: 0.68rem !important; }
    .tenant-memphis #progressPercentage { color: rgba(255,255,255,0.3) !important; font-size: 0.68rem !important; }

    /* Botón Continuar */
    .tenant-memphis #btnContinueBar { background: rgba(12,13,16,0.92) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; }
    .tenant-memphis #btnContinue { background: #D9DCE1 !important; color: #0c0d10 !important; border-radius: 0.875rem !important; font-weight: 900 !important; letter-spacing: 0.025em !important; box-shadow: 0 2px 20px rgba(217,220,225,0.14) !important; transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important; }
    .tenant-memphis #btnContinue:hover,
    .tenant-memphis #btnContinue:not(:disabled):active { background: #ffffff !important; box-shadow: 0 4px 28px rgba(255,255,255,0.22) !important; }
    .tenant-memphis #btnContinue:disabled,
    .tenant-memphis #btnContinue[disabled] { background: rgba(217,220,225,0.12) !important; color: rgba(255,255,255,0.28) !important; box-shadow: none !important; }

    /* Club banner */
    .tenant-memphis #clubBanner a { background: linear-gradient(135deg,rgba(217,220,225,0.04) 0%,rgba(16,17,20,0) 100%) !important; border: 1px solid rgba(217,220,225,0.15) !important; box-shadow: none !important; }
    .tenant-memphis #clubBanner .club-icon-wrap { background: rgba(217,220,225,0.08) !important; border: 1px solid rgba(217,220,225,0.18) !important; border-radius: 0.375rem !important; }
    .tenant-memphis #clubBanner i.ph-fill { filter: none !important; }

    /* ═══ Blood Habib — B&N monocromático (letrero blackletter blanco/negro) ═══
       El local no tiene color de marca: su identidad es el letrero plata sobre
       negro de Calle Quinta 323, y las fotos que entrega son B&N. Por eso el
       acento es plata #E5E5E5 (mismo espíritu que Ferraza) y no el dorado
       heredado de Elegance. Espejo obligatorio: accentMap de barbero.html. */
    .tenant-bloodhabib {
      --accent:    #e5e5e5;
      --accent-r:  229; --accent-g: 229; --accent-b: 229;
      --neon-clr:  #e5e5e5;
      --neon-r:    229; --neon-g: 229; --neon-b: 229;
      --body-bg:   #080808;
    }
    .tenant-bloodhabib body { background-color: #080808; }
    .tenant-bloodhabib .booking-hero {
      background-image: url('/bloodhabib/banner.webp') !important;
      background-color: #080808 !important;
      background-size: cover !important;
      background-position: center 40% !important;
    }
    .tenant-bloodhabib .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(8,8,8,0.42) 0%, rgba(8,8,8,0.30) 40%, rgba(8,8,8,0.90) 100%) !important;
    }
    /* Info strip y progreso en gris plata (sin glow dorado) */
    .tenant-bloodhabib .info-strip i { color: rgba(229,229,229,0.55) !important; }
    .tenant-bloodhabib #progressBar { background-color: #e5e5e5 !important; box-shadow: none !important; }
    .tenant-bloodhabib #btnContinue { background: #e5e5e5 !important; color: #080808 !important; }
    .tenant-bloodhabib #btnContinue:disabled,
    .tenant-bloodhabib #btnContinue[disabled] { background: rgba(229,229,229,0.14) !important; color: rgba(255,255,255,0.30) !important; }
    /* ── "Portafolio" (bloque heredado de Aura) ──
       Blood Habib lo reusa SOLO para publicar sus fotos reales. Dos ajustes:
       (1) el bloque nace para Aura (tenant CLARO), así que hay que repintarlo
           en oscuro o queda texto grafito sobre fondo negro;
       (2) su botón "Quiénes Somos" se oculta porque el info-strip ya trae uno
           (.qs-btn, común a todos los locales) y salían duplicados — el
           Portafolio queda a ancho completo, igual que hace latincaribe al
           revés. */
    .tenant-bloodhabib #aura-sobre-wrap { display: block !important; }
    .tenant-bloodhabib #aura-sobre-btn { display: none !important; }
    .tenant-bloodhabib #aura-sobre-wrap .grid { grid-template-columns: 1fr !important; }
    .tenant-bloodhabib .qs-btn i { color: rgba(229,229,229,0.75) !important; }
    .tenant-bloodhabib #aura-sobre-btn,
    .tenant-bloodhabib #aura-info-btn {
      background: rgba(229,229,229,0.06) !important;
      border-color: rgba(229,229,229,0.22) !important;
      color: #e5e5e5 !important;
    }
    .tenant-bloodhabib #aura-info-sheet,
    .tenant-bloodhabib #aura-sobre-sheet {
      background: #101010 !important;
      border-top-color: rgba(229,229,229,0.28) !important;
    }
    .tenant-bloodhabib #aura-info-title,
    .tenant-bloodhabib #aura-sobre-title { color: #f5f5f5 !important; }
    .tenant-bloodhabib #aura-sobre-body { color: rgba(229,229,229,0.78) !important; }
    .tenant-bloodhabib #aura-info-handle,
    .tenant-bloodhabib #aura-sobre-handle { background: rgba(229,229,229,0.30) !important; }
    .tenant-bloodhabib #aura-info-close,
    .tenant-bloodhabib #aura-sobre-close { background: #e5e5e5 !important; color: #080808 !important; }
    /* ── Estados seleccionados en PLATA (pisan el dorado base de Elegance) ──
       El bloque "Golden Booking Theme" pinta la selección con #D4AF37
       !important para todos; sin estos overrides la card elegida, el barbero
       y los radios se encienden dorados en un tema que no tiene dorado. */
    .tenant-bloodhabib .service-option.border-neon {
      border-color: #e5e5e5 !important;
      box-shadow: 0 0 14px rgba(229,229,229,0.14) !important;
    }
    .tenant-bloodhabib .service-option.bg-brand-neon\/10 {
      background-color: rgba(229,229,229,0.06) !important;
    }
    .tenant-bloodhabib .barber-option.border-neon {
      border-color: #e5e5e5 !important;
      box-shadow: 0 0 12px rgba(229,229,229,0.14) !important;
    }
    .tenant-bloodhabib .barber-option.bg-brand-neon\/10 {
      background-color: rgba(229,229,229,0.06) !important;
    }
    /* Radios: el template en fila los trae con borde dorado inline */
    .tenant-bloodhabib .barber-radio { border-color: rgba(229,229,229,0.35) !important; }
    .tenant-bloodhabib .barber-option.border-neon .barber-radio { border-color: #e5e5e5 !important; }
    /* Estrella del rating del hero: ámbar → plata (tema sin dorados) */
    .tenant-bloodhabib #heroGoogleBadge svg { fill: #e5e5e5 !important; }
    /* Footer: etiquetas UBICACIÓN/HORARIO y sus cuadritos venían dorados inline */
    .tenant-bloodhabib #footerContact .w-10.h-10[style] {
      background: rgba(229,229,229,0.07) !important;
      border-color: rgba(229,229,229,0.20) !important;
    }
    .tenant-bloodhabib #footerContact p.uppercase[style] { color: rgba(229,229,229,0.55) !important; }

    /* Gitana Nails Studio */
    .tenant-gitana {
      --accent:   #ec4899;
      --accent-r: 236; --accent-g: 72; --accent-b: 153;
      --neon-clr: #ec4899;
      --neon-r:   236; --neon-g: 72; --neon-b: 153;
      --body-bg:  #0F0F11;
    }

    body {
      background-color: var(--body-bg);
      color: #f8fafc;
      overscroll-behavior-y: none;
      -webkit-tap-highlight-color: transparent;
    }

    /* Scrollbar global oscuro */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #000000; }
    ::-webkit-scrollbar-thumb { background: #333333; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #444444; }
    /* Tenants claros (config.js pone .theme-light en <html>): el track negro
       se veía como una franja oscura pegada al borde en desktop. */
    html.theme-light ::-webkit-scrollbar-track { background: #F1F5F9; }
    html.theme-light ::-webkit-scrollbar-thumb { background: #CBD5E1; }
    html.theme-light ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
    /* Toast de validación: su fondo casi negro va INLINE en el HTML. */
    html.theme-light #toastValidation {
      background: #FEF2F2 !important;
      border-color: rgba(220, 38, 38, 0.35) !important;
      color: #B91C1C !important;
    }

    /* Selección de texto */
    ::selection { background: #3f3f46; color: #ffffff; }
    html.theme-light ::selection { background: var(--accent, #334155); color: #ffffff; }

    /* El toast BAJA en Punto Pilates. Arriba se le monta a la tarjeta de
       planes, que en su pagina es lo primero y ocupa media pantalla: el aviso
       tapaba justo lo que le estaba diciendo que mirara. */
    html.tenant-puntopilates #toastValidation {
      top: auto;
      bottom: 6.5rem;
    }

    /* La primera pantalla se APARTA cuando la clienta ya avanzo.

       La tarjeta de planes es para decidir; una vez que esta eligiendo dia y
       hora ya decidio, y ahi solo estorba: ocupa media pantalla arriba del
       paso y la obliga a bajar cada vez. Lo pidio Andrea el 22-09 despues de
       perderse ella misma probando la reserva.

       El aviso de "no tienes plan" vuelve en el ULTIMO paso: ahi es la
       explicacion de por que el boton esta apagado, y sin el la clienta se
       queda mirando un boton muerto. Se esconde, nunca se fuerza a la
       vista: si _pintarAvisoSinPlan decidio que ese aviso no va (ya tiene
       plan, o viene por convenio), su `hidden` sigue mandando. */
    body.paso-avanzado #planesSiempre { display: none !important; }
    body.paso-avanzado:not(.paso-final) #avisoSinPlan { display: none !important; }
    /* En su lugar entra la linea chica, y solo mientras la clienta esta
       eligiendo: en el paso 0 ya esta la tarjeta grande, y en el ultimo la
       reemplaza el aviso de "no tienes plan", que dice lo mismo con el boton
       de comprar. Si ya tiene plan vigente no se le ofrece nada: venderle un
       plan al que acaba de pagar uno es ruido. */
    body.paso-avanzado:not(.paso-final):not(.con-plan) #planesMini:not(:empty) { display: flex !important; }

    /* Y el rotulo "PASO 2 DE 4" se corre para no quedar bajo el boton de
       volver, que es fixed en top-8 left-5: ocupa de 20 a 64 px de ancho y de
       44 a 88 de alto, pase lo que pase con el scroll. Al anclar el paso, esa
       fila cae justo en esa banda y el boton le comia las primeras letras.
       Solo dentro de un paso —que es cuando el salto la deja ahi— y solo en
       anchos de telefono. Mismo remedio que ya usan las pildoras de Kronnos
       cuando quedan pegadas arriba. */
    /* "Mi perfil" (ver _pintarMiPerfil). CSS propio y no clases de Tailwind:
       esta página trae el Tailwind ya compilado y las clases que no se usaban
       antes (right-5, text-[13.5px]…) no existen. Espejo del botón de volver:
       fixed a 32 px de arriba y 20 px del borde, 44 de alto. */
    #miPerfilFlotante {
      position: fixed; top: 32px; right: 20px; z-index: 50;
      height: 44px; padding: 0 16px 0 6px; box-sizing: border-box;
      display: flex; align-items: center; gap: 8px;
      border-radius: 9999px; text-decoration: none;
      background: rgba(255,255,255,0.94); color: #1C1D26;
      border: 1px solid rgba(28,29,38,0.10);
      box-shadow: 0 8px 22px -10px rgba(28,29,38,0.45);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      transition: transform .15s ease;
    }
    #miPerfilFlotante[hidden] { display: none; }
    #miPerfilFlotante:active { transform: scale(.96); }
    #miPerfilIniciales {
      width: 32px; height: 32px; border-radius: 9999px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: #FFF1E7; color: #B4501A !important; font-size: 12px; font-weight: 800;
    }
    #miPerfilFlotante .mi-perfil-txt { font-size: 13.5px; font-weight: 800; color: #1C1D26 !important; white-space: nowrap; }

    @media (max-width: 480px) {
      body.paso-avanzado #stepIndicatorText { margin-left: 52px; }
      /* Con "Mi perfil" arriba a la derecha, el "50%" quedaba debajo del
         botón. La barra naranja ya dice lo mismo. */
      body.con-perfil #progressPercentage { visibility: hidden; }
    }

    /* Los <select> del cumpleanos nacen con el fondo oscuro del tema base
       (bg-[#0a0a0d] escrito en el HTML). En un local CLARO el texto se aclara
       pero el fondo no, asi que quedaba NEGRO SOBRE NEGRO: el dia y el mes
       elegidos eran invisibles, y la lista desplegada salia como un bloque
       negro encima de un formulario blanco.

       Van las `option` tambien: en Windows la lista abierta se pinta con el
       fondo del <select>, no con el de la pagina, y ahi es donde se veia el
       panel negro. Se igualan a los inputs de al lado. */
    html.theme-light #cumpleDiaSel,
    html.theme-light #cumpleMesSel {
      background-color: #FFFFFF !important;
      color: #18181B !important;
      border-color: #D4D4D8 !important;
    }
    html.theme-light #cumpleDiaSel option,
    html.theme-light #cumpleMesSel option {
      background-color: #FFFFFF;
      color: #18181B;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Chips de categorías con barra en PC. Sin barra, con mouse no había cómo
       llegar a las que quedan cortadas a la derecha (en el teléfono se
       arrastran con el dedo, por eso ahí sigue oculta). */
    @media (hover: hover) and (pointer: fine) {
      .no-scrollbar.chips-barra {
        -ms-overflow-style: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--accent-r,150),var(--accent-g,150),var(--accent-b,150),0.55) transparent;
      }
      .no-scrollbar.chips-barra::-webkit-scrollbar { display: block; height: 6px; }
      .no-scrollbar.chips-barra::-webkit-scrollbar-track { background: transparent; }
      .no-scrollbar.chips-barra::-webkit-scrollbar-thumb {
        background: rgba(var(--accent-r,150),var(--accent-g,150),var(--accent-b,150),0.55);
        border-radius: 999px;
      }
    }

    /* Buscador de servicios — estilos por MODO de tema.
       config.js pone `theme-dark` o `theme-light` en <html> según la lista
       _lightTenants. Base = OSCURO (default de la plataforma, incl.
       self-service): superficie translúcida sobre el fondo del tenant y foco
       con su acento (--accent). `.theme-light` activa el esquema blanco
       (Aura, Latin Caribe, Infinity, Renacer). Renacer refina más abajo. */
    input.svc-search {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      background-color: rgba(255,255,255,0.07) !important;
      background-image: none !important;
      color: #f5f5f5 !important;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 0.75rem;
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
      line-height: 1.25rem;
      box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.35);
      outline: none;
      transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
      caret-color: var(--accent, #f5f5f5);
    }
    input.svc-search::placeholder { color: rgba(255,255,255,0.45) !important; opacity: 1; }
    input.svc-search:hover { border-color: rgba(255,255,255,0.28); }
    input.svc-search:focus {
      background-color: rgba(255,255,255,0.10) !important;
      border-color: rgba(var(--accent-r,201),var(--accent-g,168),var(--accent-b,76),0.60);
      box-shadow: 0 0 0 3px rgba(var(--accent-r,201),var(--accent-g,168),var(--accent-b,76),0.16);
    }

    /* ── Tema CLARO (Aura, Latin Caribe, Infinity, Renacer) ── */
    .theme-light input.svc-search {
      background-color: #ffffff !important;
      color: #1f2937 !important;                     /* neutral-800 */
      border-color: #e5e7eb;                         /* neutral-200 */
      box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.06);
      caret-color: #1f2937;
    }
    .theme-light input.svc-search::placeholder { color: #9ca3af !important; }  /* neutral-400 */
    .theme-light input.svc-search:hover { border-color: #d1d5db; }
    .theme-light input.svc-search:focus {
      background-color: #ffffff !important;
      border-color: #9ca3af;
      box-shadow: 0 0 0 3px rgba(156,163,175,0.15);
    }

    /* ── Renacer: buscador tema claro, foco azul ──
       Scoping vía .tenant-renacer para no filtrar a otros tenants; va DESPUÉS
       del bloque .theme-light para ganarle (misma especificidad).
       (Migrado de obsidiana/ámbar → claro/azul, rediseño 2026.) */
    .tenant-renacer input.svc-search {
      background-color: #f8fafc !important;          /* slate-50 */
      color: #0f172a !important;                     /* slate-900 */
      border-color: #e2e8f0;                         /* slate-200 */
      box-shadow: none;
      caret-color: #E98A45;                          /* naranja */
    }
    .tenant-renacer input.svc-search::placeholder { color: #94a3b8 !important; }  /* slate-400 */
    .tenant-renacer input.svc-search:hover { border-color: #cbd5e1; }            /* slate-300 */
    .tenant-renacer input.svc-search:focus {
      background-color: #ffffff !important;
      border-color: #E98A45;                         /* naranja */
      box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
    }
    /* Botón nativo 'x' — gris neutro; al hover blanco (oscuro) u oscuro (claro). */
    input.svc-search::-webkit-search-cancel-button {
      -webkit-appearance: none; height: 14px; width: 14px; cursor: pointer;
      background: transparent no-repeat center / 14px 14px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'><path d='M6.28 6.28a.75.75 0 0 1 1.06 0L10 8.94l2.66-2.66a.75.75 0 1 1 1.06 1.06L11.06 10l2.66 2.66a.75.75 0 1 1-1.06 1.06L10 11.06l-2.66 2.66a.75.75 0 1 1-1.06-1.06L8.94 10 6.28 7.34a.75.75 0 0 1 0-1.06z'/></svg>");
    }
    input.svc-search:hover::-webkit-search-cancel-button,
    input.svc-search:focus::-webkit-search-cancel-button {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'><path d='M6.28 6.28a.75.75 0 0 1 1.06 0L10 8.94l2.66-2.66a.75.75 0 1 1 1.06 1.06L11.06 10l2.66 2.66a.75.75 0 1 1-1.06 1.06L10 11.06l-2.66 2.66a.75.75 0 1 1-1.06-1.06L8.94 10 6.28 7.34a.75.75 0 0 1 0-1.06z'/></svg>");
    }
    .theme-light input.svc-search:hover::-webkit-search-cancel-button,
    .theme-light input.svc-search:focus::-webkit-search-cancel-button {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231f2937'><path d='M6.28 6.28a.75.75 0 0 1 1.06 0L10 8.94l2.66-2.66a.75.75 0 1 1 1.06 1.06L11.06 10l2.66 2.66a.75.75 0 1 1-1.06 1.06L10 11.06l-2.66 2.66a.75.75 0 1 1-1.06-1.06L8.94 10 6.28 7.34a.75.75 0 0 1 0-1.06z'/></svg>");
    }
    /* Renacer: 'x' del buscador — hereda el estilo claro (gris→oscuro). */

    /* Autofill: oscuro por defecto; overrides claro y Renacer más abajo. */
    input.svc-search:-webkit-autofill,
    input.svc-search:-webkit-autofill:hover,
    input.svc-search:-webkit-autofill:focus {
      -webkit-text-fill-color: #f5f5f5 !important;
      -webkit-box-shadow: 0 0 0 1000px #1f1f22 inset !important;
      caret-color: var(--accent, #f5f5f5) !important;
      transition: background-color 5000s ease-in-out 0s;
    }
    .theme-light input.svc-search:-webkit-autofill,
    .theme-light input.svc-search:-webkit-autofill:hover,
    .theme-light input.svc-search:-webkit-autofill:focus {
      -webkit-text-fill-color: #1f2937 !important;
      -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
      caret-color: #1f2937 !important;
    }
    .tenant-renacer input.svc-search:-webkit-autofill,
    .tenant-renacer input.svc-search:-webkit-autofill:hover,
    .tenant-renacer input.svc-search:-webkit-autofill:focus {
      -webkit-text-fill-color: #0f172a !important;
      -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
      caret-color: #E98A45 !important;
    }

    .text-neon {
      color: var(--neon-clr);
      text-shadow: 0 0 5px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.4),
                   0 0 10px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.2);
    }
    .border-neon {
      border-color: var(--neon-clr);
      box-shadow: 0 0 6px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.2),
                  inset 0 0 6px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.2);
    }

    /* ─── Indicador Abierto/Cerrado (global, multi-tenant) ─────────────
       Píldora que lee tenants/{tid}/settings/general.horario (formato
       {'0'..'6': {activo, inicio, fin}} · 0=Domingo). Click → modal semanal. */
    .hero-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      border: 1px solid transparent;
      background: rgba(255,255,255,0.02);
      color: rgba(255,255,255,0.65);
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .hero-status-pill.is-open {
      color: #34D399;
      border-color: rgba(52,211,153,0.28);
      background: rgba(52,211,153,0.06);
    }
    .hero-status-pill.is-closed {
      color: rgba(255,255,255,0.62);
      border-color: rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
    }
    .hero-status-pill:hover { filter: brightness(1.15); }
    .hero-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }
    .hero-status-pill.is-open .hero-status-dot {
      animation: hero-status-pulse 2s ease-in-out infinite;
      box-shadow: 0 0 6px currentColor;
    }
    @keyframes hero-status-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.18); opacity: 0.75; }
    }
    .hero-status-extra {
      color: rgba(255,255,255,0.42);
      font-weight: 500;
      margin-left: 2px;
    }

    /* Modal de horario semanal */
    :is(#openStatusModal,#locationModal) {
      position: fixed; inset: 0; z-index: 200;
      display: none;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      align-items: center; justify-content: center;
      padding: 20px;
    }
    :is(#openStatusModal,#locationModal).is-open { display: flex; }
    :is(#openStatusModal,#locationModal) .os-card {
      width: 100%; max-width: 340px;
      background: #0f0f10;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      color: #e6e6e6;
      animation: os-in .28s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes os-in {
      from { opacity: 0; transform: translateY(10px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    :is(#openStatusModal,#locationModal) .os-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    :is(#openStatusModal,#locationModal) .os-title {
      font-size: 14px; font-weight: 800; letter-spacing: 0.06em;
      text-transform: uppercase; color: #fff;
    }
    :is(#openStatusModal,#locationModal) .os-x {
      background: none; border: none; color: rgba(255,255,255,0.6);
      cursor: pointer; padding: 4px; font-size: 16px;
    }
    :is(#openStatusModal,#locationModal) .os-x:hover { color: #fff; }
    :is(#openStatusModal,#locationModal) .os-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      font-size: 13px;
    }
    :is(#openStatusModal,#locationModal) .os-row:last-child { border-bottom: 0; }
    :is(#openStatusModal,#locationModal) .os-row.is-today {
      background: rgba(255,255,255,0.03);
      margin: 0 -10px; padding: 8px 10px;
      border-radius: 8px;
    }
    :is(#openStatusModal,#locationModal) .os-day {
      font-weight: 600; color: rgba(255,255,255,0.75);
      text-transform: capitalize;
    }
    :is(#openStatusModal,#locationModal) .os-row.is-today .os-day { color: #fff; font-weight: 700; }
    :is(#openStatusModal,#locationModal) .os-range { font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); }
    :is(#openStatusModal,#locationModal) .os-range.is-closed { color: rgba(255,255,255,0.35); font-style: italic; }

    /* Estado Abierto/Cerrado: vive DENTRO del modal de horario. Antes se
       inyectaba en la franja de info, donde aparecía tarde (espera a
       Firestore) y provocaba un salto de layout molesto. */
    #openStatusNow { margin: -4px 0 12px; min-height: 20px; }
    #openStatusNow:empty { display: none; }

    /* Modal de ubicación */
    #locationModal .os-loc-addr {
      font-size: 15px; font-weight: 700; color: #fff; line-height: 1.35;
    }
    #locationModal .os-loc-city {
      font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px;
    }
    /* Muchos tenants traen la dirección completa en una línea (sin "|"): sin
       esto el <p> vacío dejaba un hueco antes del botón. */
    #locationModal .os-loc-city:empty { display: none; }
    /* Mapa embebido. Alto fijo en vez de aspect-ratio: el modal ya es angosto
       y una proporción 16:9 lo dejaba en una franja demasiado baja para
       reconocer la cuadra. */
    #locationModal .os-loc-map {
      margin-top: 14px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      line-height: 0;
    }
    #locationModal .os-loc-map iframe {
      display: block; width: 100%; height: 190px; border: 0;
    }
    /* En los tenants de tema claro el borde blanco translúcido desaparece
       sobre la tarjeta clara. */
    html.theme-light #locationModal .os-loc-map {
      border-color: rgba(17,24,39,0.12);
      background: rgba(17,24,39,0.03);
    }
    #locationModal .os-loc-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; margin-top: 18px; padding: 12px 16px;
      border-radius: 12px; border: 0; cursor: pointer;
      font-size: 14px; font-weight: 800;
      background: var(--accent, #c9a84c);
      /* El texto va ENCIMA del acento, así que no puede ser fijo: con el #111
         de Faith Barber quedaba negro sobre negro (1.05:1). --gold-contrast lo
         calcula config.js por contraste real contra el acento del local.
         index.html NO carga dashboard.css, que es donde se define la variable
         para las páginas del cliente, así que para los tenants a medida no
         existe y sigue rigiendo el #0a0a0a de siempre: no cambian. */
      color: var(--gold-contrast, #0a0a0a);
      text-decoration: none;
      transition: filter .2s ease, transform .12s ease;
    }
    #locationModal .os-loc-cta:hover { filter: brightness(1.08); }
    /* Zona de cobertura (locales a domicilio, `zonaCobertura` en config.js):
       un mapa con el área dibujada en vez del pin de Maps. */
    #locationModal .os-loc-zona {
      margin-top: 14px; height: 240px; border-radius: 12px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04);
    }
    html.theme-light #locationModal .os-loc-zona { border-color: rgba(17,24,39,0.12); }
    /* El modal queda centrado en medio píxel y entre teselas salía una raya
       clara: Leaflet 1.9 las mezcla con `plus-lighter`, que SUMA brillo donde
       se tocan. Mezcla normal + medio píxel de solape = sin raya. (La regla
       vive junto a #zonaPasoMapa y cubre los dos mapas.) */
    #locationModal .os-loc-leyenda { margin-top: 10px; display: grid; gap: 6px; }
    #locationModal .os-loc-leyenda p {
      display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.3;
      color: rgba(255,255,255,0.75);
    }
    #locationModal .os-loc-leyenda i {
      flex: none; width: 18px; height: 10px; border-radius: 3px;
      /* La tarjeta del modal es oscura en todos los temas: el acento se aclara
         para que la muestra se vea sobre ella. */
      border: 2px solid color-mix(in srgb, var(--zona-clr, #c9a84c) 55%, #fff);
      background: color-mix(in srgb, var(--zona-clr, #c9a84c) 35%, transparent);
    }
    #locationModal .os-loc-leyenda i.is-recargo { border-style: dashed; background: transparent; }
    /* Nota sin muestra: el recargo cuando el mapa no lo dibuja aparte. */
    #locationModal .os-loc-leyenda p.is-nota { padding-left: 26px; font-size: 12px; opacity: .8; }
    /* La misma zona en el paso final (#zonaPasoWrap). Fondo de la página, no
       de la tarjeta oscura del modal: el texto hereda el color del paso. */
    #zonaPasoMapa {
      position: relative; height: 150px; border-radius: 14px; overflow: hidden; cursor: pointer;
      border: 1px solid rgba(127,127,127,0.28); background: rgba(127,127,127,0.08);
    }
    #zonaPasoMapa:focus-visible { outline: 3px solid var(--accent, #c9a84c); outline-offset: 2px; }
    /* Mapa quieto: el toque lo recibe el contenedor (abre el modal), no
       Leaflet. Así no atrapa el scroll del teléfono a mitad del formulario. */
    #zonaPasoMapa .leaflet-pane, #zonaPasoMapa .leaflet-tile-container { pointer-events: none !important; }
    :is(#locationModal .os-loc-zona, #zonaPasoMapa) .leaflet-tile {
      mix-blend-mode: normal; width: 256.5px !important; height: 256.5px !important;
    }
    #zonaPasoMapa .zp-ampliar {
      position: absolute; top: 8px; right: 8px; z-index: 1000;
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
      background: rgba(255,255,255,0.92); color: #111; box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    }
    #zonaPasoWrap .zp-leyenda { margin-top: 8px; display: grid; gap: 4px; }
    #zonaPasoWrap .zp-leyenda p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.3; margin: 0; }
    #zonaPasoWrap .zp-leyenda p.is-nota { padding-left: 26px; font-size: 12px; opacity: .75; }
    #zonaPasoWrap .zp-leyenda i {
      flex: none; width: 18px; height: 10px; border-radius: 3px;
      border: 2px solid var(--zona-clr, #c9a84c);
      background: color-mix(in srgb, var(--zona-clr, #c9a84c) 22%, transparent);
    }
    #zonaPasoWrap .zp-leyenda i.is-recargo { border-style: dashed; background: transparent; }
    #locationModal .os-loc-cta:active { transform: scale(0.98); }
    /* ─── /Indicador Abierto/Cerrado ─── */
    .bg-neon {
      background-color: var(--neon-clr);
      box-shadow: 0 0 8px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.4),
                  0 0 15px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.2);
    }

    /* Booking hero */
    .booking-hero {
      background-color: #0a0806;
      background-image: url('/elegance.webp');
      background-size: cover;
      background-position: center 25%;
      position: relative;
    }
    .booking-hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.40) 40%, rgba(5,5,5,0.82) 100%);
    }
    .hero-logo-ring {
      border: 2px solid var(--accent);
      box-shadow: 0 0 0 1px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.15),
                  0 0 28px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.22),
                  0 0 50px rgba(0,0,0,0.6);
    }
    .gold-divider {
      width: 36px; height: 1.5px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      border-radius: 2px; margin: 10px auto;
    }

    /* ── Badge "Embajador" / marca asociada (data-driven via SHOP.partners) ─── */
    .partner-badge {
      display: none;
      align-items: center;
      gap: 8px;
      background: rgba(0,0,0,0.55);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 14px;
      padding: 5px 11px 5px 5px;
      transition: transform 0.15s ease, background 0.2s ease;
    }
    .partner-badge:hover { transform: translateY(-1px); background: rgba(0,0,0,0.72); }
    .partner-badge img {
      width: 28px; height: 28px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }
    .partner-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
    .partner-badge #partnerBadgeRole {
      font-size: 8px; font-weight: 700; letter-spacing: 0.12em;
      color: rgba(255,255,255,0.65); text-transform: uppercase; margin-bottom: 2px;
    }
    .partner-badge #partnerBadgeName {
      font-size: 12px; font-weight: 800; color: #fff;
    }

    @keyframes fadeSlideUp {
      from { opacity:0; transform:translateY(12px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ── Paso 3: estado de píldoras de horario ───────────────────── */
    /* Los estados se manejan con CSS custom props en inline style.
       Los valores de fallback definen el estado "disponible". */
    .time-pill {
      background:   var(--ps-bg,  rgba(255,255,255,0.06)) !important;
      border-color: var(--ps-br,  rgba(255,255,255,0.22)) !important;
      color:        var(--ps-cl,  rgba(255,255,255,0.80)) !important;
      font-weight:  var(--ps-fw,  600)                    !important;
      box-shadow:   var(--ps-sh,  none)                   !important;
      /* touch feedback instantáneo */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
    }
    .time-pill:active {
      transform: scale(0.93);
      transition: transform 0.08s ease !important;
    }
    /* Hover solo en píldoras NO seleccionadas */
    .time-pill:not([data-sel]):hover {
      background:   rgba(255,255,255,0.11) !important;
      border-color: var(--accent, #D4AF37) !important;
      color:        var(--accent, #D4AF37) !important;
    }
    .slot-pill-busy {
      background: rgba(120,15,15,0.14);
      border-color: rgba(200,50,50,0.22);
      color: rgba(200,70,70,0.38);
      text-decoration: line-through;
      text-decoration-color: rgba(200,70,70,0.45);
      cursor: not-allowed;
      pointer-events: none;
    }

    /* ── Cupos VIP: el aviso y la píldora ─────────────────────────────
       Estas páginas son dark-first y el tema claro se hace con overrides
       (`html.theme-light`, lista `_lightTenants` en config.js). El aviso y la
       píldora traían la paleta CLARA incrustada en el `style=` que escribe el
       JS —tinta slate-800 y ámbar-900 sobre un fondo translúcido—, así que en
       un local de tema oscuro quedaba tinta oscura sobre fondo oscuro. Y no
       había override que lo salvara: el inline le gana a la hoja, y por eso
       `check:tema-claro` tampoco lo veía. Lo reportó Ignacio el 21-09-2026
       mirando Golden Sheep, que es oscuro. La paleta vive acá: ámbar claro
       sobre oscuro por defecto, crema con tinta oscura en `.theme-light`.
       Contraste medido sobre el fondo de cada tema: 12:1 y 8,9:1. */
    .vip-nota {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 11px 13px;
      border-radius: 14px;
      background: rgba(245,158,11,0.10);
      border: 1px solid rgba(252,211,77,0.34);
      color: #FDE68A;
    }
    .vip-nota__ico { flex-shrink: 0; margin-top: 1px; font-size: 15px; line-height: 1.1; color: #FBBF24; }
    .vip-nota__tit {
      display: block;
      margin-bottom: 2px;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #FCD34D;
    }
    .vip-nota__txt   { font-size: 12px; line-height: 1.45; }
    .vip-nota__txt b { font-weight: 700; color: #FFFBEB; }
    html.theme-light .vip-nota        { background: #FFFBEB; border-color: #FCD34D; color: #78350F; }
    html.theme-light .vip-nota__ico   { color: #92400E; }
    html.theme-light .vip-nota__tit   { color: #92400E; }
    html.theme-light .vip-nota__txt b { color: #451A03; }

    /* La píldora VIP se pinta con las MISMAS custom props que las demás
       (`--ps-*`): `.time-pill` las aplica con !important, así que el
       `background` que el JS le ponía inline no llegaba a verse nunca y la
       hora con recargo salía igual a una normal. Al seleccionarla, esas
       props las escribe `selectTime` inline y el inline manda, que es lo
       correcto: gana el estado elegido. */
    .time-pill-vip {
      --ps-bg: rgba(245,158,11,0.16);
      --ps-br: rgba(252,211,77,0.55);
      --ps-cl: #FDE68A;
      --ps-fw: 700;
    }
    html.theme-light .time-pill-vip {
      --ps-bg: #FFFBEB;
      --ps-br: #FCD34D;
      --ps-cl: #78350F;
    }
    .vip-pill__ico { font-size: 12px; color: #FBBF24; }
    .vip-pill__rec { font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; color: #FCD34D; }
    html.theme-light .vip-pill__ico { color: #B45309; }
    html.theme-light .vip-pill__rec { color: #92400E; }
    /* Elegida: el fondo pasa a ser el color de selección del local, que cambia
       por tenant. El rayo y el "+$" heredan el color del texto en vez de
       quedarse en ámbar, que sobre un fondo dorado desaparecía. */
    .time-pill-vip[data-sel] .vip-pill__ico,
    .time-pill-vip[data-sel] .vip-pill__rec { color: inherit; }

    /* ── Sello +1: shimmer de acento que recorre la barra (todos los tenants) ── */
    @keyframes sello-shimmer {
      0%   { transform: translateX(-130%); }
      100% { transform: translateX(230%); }
    }
    .sello-stamp-bar {
      position: relative;
      overflow: hidden;
    }
    .sello-stamp-bar::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent                                        25%,
        rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.38) 50%,
        transparent                                        75%
      );
      transform: translateX(-130%);
      animation: sello-shimmer 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
      pointer-events: none;
    }

    /* ── Club de fidelidad oculto (flag `clubOculto` en config.js) ──────────────
       <html class="club-oculto"> apaga banner del club y la tarjeta del paso 4. */
    .club-oculto #clubBanner,
    .club-oculto #step4AuthContainer,
    .club-oculto #successNotifCta,
    .club-oculto #notaClubReagendar { display: none !important; }   /* "actívalo en tu Club" sin club */

    /* ── Club onboarding: gamificación (fade-in-up, chispas, badge glow) ──────── */
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0);    }
    }
    @keyframes spark-blink {
      0%, 100% { opacity: 0.1;  transform: scale(0.7); }
      50%       { opacity: 1;    transform: scale(2.2); }
    }
    @keyframes badge-glow-pulse {
      0%, 100% { box-shadow: 0 0 6px  rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.35); }
      50%       { box-shadow: 0 0 20px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.90),
                              0 0 36px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.28); }
    }
    /* Entrada escalonada: aplicar clase + animation-delay inline */
    .club-anim-el {
      opacity: 0;
      animation: fade-in-up 0.42s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    /* Chispas decorativas de fondo */
    .club-spark {
      position: absolute;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 5px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.9);
      animation: spark-blink var(--dur,2s) ease-in-out infinite;
      animation-delay: var(--del,0s);
      pointer-events: none;
    }
    /* Badge "+1" electrificado: shimmer + pulso de glow */
    .club-badge-el {
      position: relative;
      overflow: hidden;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.55) !important;
      animation: badge-glow-pulse 1.8s ease-in-out infinite;
    }
    .club-badge-el::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent                                         25%,
        rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.45) 50%,
        transparent                                         75%
      );
      transform: translateX(-130%);
      animation: sello-shimmer 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
      pointer-events: none;
    }
    /* Tarjeta principal: presión táctil + glow amplificado al activar */
    .club-hero-card {
      transition: box-shadow 0.2s ease, transform 0.15s ease;
    }
    .club-hero-card:active {
      transform: scale(0.97);
      box-shadow: 0 0 36px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.40) !important;
    }

    /* ── Paso 4 / Pantalla Éxito: SVG check animado ─────────────── */
    @keyframes drawCircle {
      to { stroke-dashoffset: 0; }
    }
    @keyframes drawCheck {
      to { stroke-dashoffset: 0; }
    }
    .svg-check-circle {
      stroke-dasharray: 160;
      stroke-dashoffset: 160;
      animation: drawCircle 0.55s cubic-bezier(0.16,1,0.3,1) 0.05s forwards;
    }
    .svg-check-path {
      stroke-dasharray: 58;
      stroke-dashoffset: 58;
      animation: drawCheck 0.45s cubic-bezier(0.16,1,0.3,1) 0.45s forwards;
    }

    /* Sello Chameleon – Paso 4 */
    .sello-chameleon-wrap { display: none; }
    @keyframes selloPopIn {
      0%   { opacity: 0; transform: scale(0.35) rotate(-18deg); }
      65%  { transform: scale(1.12) rotate(4deg); }
      100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }

    /* ═══════════════════════════════════════════════════════════════
       GITANA NAILS — PREMIUM BOHO-CHIC v3
       Elegante · Femenino · Glassmorphism · Sin glows
       ═══════════════════════════════════════════════════════════════ */

    /* 1. Fondo: "Raisin Black" rico y suave */
    .tenant-gitana body { background-color: #0F0F11; }

    /* 2. Hero con imagen gitana.webp */
    .tenant-gitana .booking-hero {
      background-image: url('/gitana.webp') !important;
      background-color: #0F0F11 !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-gitana .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(15,15,17,0.45) 0%, rgba(15,15,17,0.30) 40%, rgba(15,15,17,0.88) 100%) !important;
    }
    .tenant-gitana header .relative.z-10 {
      padding-top: 3.5rem !important;
      padding-bottom: 1.5rem !important;
    }

    /* Logo al estilo Elegance pero con acento fucsia */
    .tenant-gitana .hero-logo-ring {
      width: 96px !important; height: 96px !important;
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 1px rgba(236,72,153,0.15),
                  0 0 28px rgba(236,72,153,0.22) !important;
      margin-bottom: 1.25rem !important;
    }
    .tenant-gitana #shopLogo { width: 96px !important; height: 96px !important; }

    /* Nombre: semibold, limpio, sin glow */
    .tenant-gitana #shopNombre {
      font-size: 1.45rem !important;
      font-weight: 700 !important;
      letter-spacing: -0.015em !important;
      text-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
    }
    .tenant-gitana .gold-divider { display: none; }

    /* 3. Info strip */
    .tenant-gitana .info-strip {
      background: rgba(15,15,17,0.95) !important;
      border-color: rgba(255,255,255,0.04) !important;
    }
    .tenant-gitana .info-strip i {
      color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.5) !important;
    }

    /* 4. Tipografía: cero glow en todo texto */
    .tenant-gitana .text-neon { text-shadow: none !important; }
    .tenant-gitana h2 { text-shadow: none !important; }
    .tenant-gitana h2.text-neon {
      color: #e2e8f0 !important;
      font-weight: 500 !important;
    }
    .tenant-gitana .border-neon { box-shadow: none !important; }
    .tenant-gitana .bg-neon { box-shadow: none !important; }

    /* 5. Barra de progreso — fucsia puro */
    .tenant-gitana #progressTrack { background-color: rgba(255,255,255,0.06) !important; }
    .tenant-gitana #progressBar {
      background-color: var(--accent) !important;
      box-shadow: none !important;
    }
    .tenant-gitana #stepIndicatorText {
      color: var(--accent) !important;
      text-shadow: none !important;
    }

    /* 6. Tarjetas de servicio — glassmorphism premium */
    .tenant-gitana .service-option {
      background: rgba(255,255,255,0.025) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      border-color: rgba(255,255,255,0.07) !important;
      border-width: 1px !important;
      border-radius: 1.5rem !important;
      box-shadow: none !important;
      transform: none !important;
    }
    .tenant-gitana .service-option:hover {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.5) !important;
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.04) !important;
      box-shadow: none !important;
      transform: none !important;
    }
    /* Estado seleccionado: borde fucsia 2px, tinte rosa suave */
    .tenant-gitana .service-option.border-neon {
      border-color: var(--accent) !important;
      border-width: 2px !important;
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.09) !important;
      box-shadow: none !important;
      transform: none !important;
    }
    /* Ícono: fondo rose translúcido, sin sombra */
    .tenant-gitana .service-option .icon-bg {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08) !important;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.15) !important;
      box-shadow: none !important;
    }
    .tenant-gitana .service-option .icon-svg {
      color: var(--accent) !important;
      filter: none !important;
    }
    /* Precio y duración en fucsia */
    .tenant-gitana .service-option .price-tag { color: var(--accent) !important; }
    .tenant-gitana .service-option .duration-tag {
      color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.65) !important;
    }

    /* 7. Título de categoría */
    .tenant-gitana .category-section h3 {
      border-left-color: var(--accent) !important;
      color: #e2e8f0 !important;
      font-weight: 500 !important;
      text-shadow: none !important;
    }

    /* 8. Category pills — minimalistas */
    .tenant-gitana .category-pill {
      background: rgba(255,255,255,0.03) !important;
      border-color: rgba(255,255,255,0.08) !important;
      color: #9ca3af !important;
      box-shadow: none !important;
      border-radius: 9999px !important;
    }
    .tenant-gitana .category-pill:hover {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.4) !important;
      color: #e2e8f0 !important;
      box-shadow: none !important;
    }
    /* Pill activa */
    .tenant-gitana .category-pill.border-neon {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.1) !important;
      border-color: var(--accent) !important;
      color: var(--accent) !important;
      box-shadow: none !important;
    }

    /* 9. Tarjetas de profesional — glassmorphism */
    .tenant-gitana .barber-option {
      background: rgba(255,255,255,0.025) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      border-color: rgba(255,255,255,0.07) !important;
      border-width: 1px !important;
      border-radius: 1.5rem !important;
      box-shadow: none !important;
    }
    .tenant-gitana .barber-option:hover {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.5) !important;
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.04) !important;
      box-shadow: none !important;
    }
    .tenant-gitana .barber-option.border-neon {
      border-color: var(--accent) !important;
      border-width: 2px !important;
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.09) !important;
      box-shadow: none !important;
    }
    /* Avatar: sin borde dorado */
    .tenant-gitana .barber-option .w-20,
    .tenant-gitana .barber-option img {
      border-color: rgba(255,255,255,0.10) !important;
      box-shadow: none !important;
    }
    /* "Disponible" badge en fucsia */
    .tenant-gitana .barber-option .text-brand-neon { color: var(--accent) !important; }

    /* 10. Calendario — días glassmorphism */
    .tenant-gitana .day-btn {
      background: rgba(255,255,255,0.025) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border-color: rgba(255,255,255,0.07) !important;
      border-radius: 1.25rem !important;
      box-shadow: none !important;
    }
    .tenant-gitana .day-btn.active,
    .tenant-gitana .day-btn.border-neon {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.1) !important;
      border-color: var(--accent) !important;
      box-shadow: none !important;
    }
    /* Dot activo */
    .tenant-gitana .day-btn .dot.bg-neon {
      background: var(--accent) !important;
      box-shadow: none !important;
    }
    /* Sin drop-shadow en número del día */
    .tenant-gitana .day-btn .day-num { filter: none !important; }

    /* 11. Horas disponibles — forma píldora */
    .tenant-gitana #hoursGrid button { border-radius: 9999px !important; }
    .tenant-gitana #hoursGrid button:not([disabled]) {
      background: rgba(255,255,255,0.025) !important;
      border-color: rgba(255,255,255,0.08) !important;
    }
    .tenant-gitana #hoursGrid button:not([disabled]):hover {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.5) !important;
      color: var(--accent) !important;
      box-shadow: none !important;
    }
    /* Hora seleccionada: fucsia sólido */
    .tenant-gitana .time-pill.bg-neon {
      background: var(--accent) !important;
      color: #fff !important;
      box-shadow: none !important;
    }
    .tenant-gitana .time-pill.border-neon { box-shadow: none !important; }

    /* 12. Formulario paso 4: inputs modernos sin bordes */
    .tenant-gitana #step4 label {
      color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.6) !important;
    }
    .tenant-gitana #clientName,
    .tenant-gitana #clientPhone,
    .tenant-gitana #clientEmail {
      background: #18181b !important;
      border: none !important;
      border-radius: 0.875rem !important;
      transition: box-shadow 0.3s ease, background 0.3s ease !important;
    }
    .tenant-gitana #clientName:focus,
    .tenant-gitana #clientPhone:focus,
    .tenant-gitana #clientEmail:focus {
      outline: none !important;
      background: #1e1e22 !important;
      box-shadow: 0 0 0 2px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.65) !important;
    }

    /* Resumen de cita — glass */
    .tenant-gitana #step4 .mt-6.rounded-2xl {
      background: rgba(255,255,255,0.025) !important;
      border: 1px solid rgba(255,255,255,0.07) !important;
      backdrop-filter: blur(14px);
    }
    .tenant-gitana #summaryPrice { color: var(--accent) !important; }

    /* Auth container paso 4 — glass */
    .tenant-gitana #step4AuthContainer .rounded-2xl {
      background: rgba(255,255,255,0.025) !important;
      backdrop-filter: blur(14px) !important;
    }
    .tenant-gitana #step4AuthContainer i { filter: none !important; }

    /* 13. Botón continuar: píldora fucsia flotante */
    .tenant-gitana #btnContinue {
      background: var(--accent) !important;
      color: #fff !important;
      border-radius: 9999px !important;
      font-weight: 700 !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 10px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.2) !important;
    }
    /* Barra inferior más limpia */
    .tenant-gitana .fixed.bottom-0 {
      background: rgba(15,15,17,0.88) !important;
      border-top-color: rgba(255,255,255,0.04) !important;
    }

    /* 14. Club banner — glass */
    .tenant-gitana #clubBanner a {
      background: rgba(255,255,255,0.025) !important;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.2) !important;
      box-shadow: none !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .tenant-gitana #clubBanner .w-11 {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08) !important;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.2) !important;
    }
    .tenant-gitana #clubBanner i { color: var(--accent) !important; filter: none !important; }

    /* 15. Footer contact — glass */
    .tenant-gitana #footerContact > .rounded-2xl {
      background: rgba(255,255,255,0.025) !important;
      border-color: rgba(255,255,255,0.06) !important;
      backdrop-filter: blur(14px);
    }
    .tenant-gitana #footerContact .w-10 {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.07) !important;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.18) !important;
    }
    .tenant-gitana #footerContact .w-10 i { color: var(--accent) !important; filter: none; }
    .tenant-gitana #footerContact p[class*="uppercase"] {
      color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.55) !important;
    }
    .tenant-gitana #shopHorarioGrid span.rounded-full {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.5) !important;
    }

    /* 16. WhatsApp button */
    .tenant-gitana #waBtnLink {
      background: transparent !important;
      border: 1.5px solid rgba(37,211,102,0.4) !important;
      border-radius: 9999px !important;
      box-shadow: none !important;
      color: #25D366 !important;
    }
    .tenant-gitana #waBtnLink:hover,
    .tenant-gitana #waBtnLink:active { background: rgba(37,211,102,0.05) !important; }
    .tenant-gitana #waBtnLink i { filter: none !important; }

    /* 17. Pantalla de éxito — sin glows */
    .tenant-gitana #success-state .border-neon,
    .tenant-gitana #success-state .w-24 { box-shadow: none !important; }
    .tenant-gitana #success-state h2 { text-shadow: none !important; }
    .tenant-gitana #success-state .bg-brand-neon\/10 {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08) !important;
    }

    /* 18. Selection recap chips */
    .tenant-gitana #selectionRecap span {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.06) !important;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.15) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       MAPU BARBER SHOP — Classic Artisan Barbershop Theme
       Paleta: Burdeo cálido · Arena dorada · Crema clásica
       ═══════════════════════════════════════════════════════════════ */

    /* 1. Variables */
    .tenant-mapubarbershop {
      --accent:   #BFA37E;
      --accent-r: 191; --accent-g: 163; --accent-b: 126;
      --body-bg:  #2A1E22;
    }

    /* 2. Fondo burdeo oscuro mate */
    .tenant-mapubarbershop body {
      background-color: #2A1E22;
    }

    /* 3. Hero — overlay cálido y borde de latón doble */
    .tenant-mapubarbershop .booking-hero {
      background-image: url('/mapu3.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-mapubarbershop .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(42,30,34,0.60) 0%, rgba(42,30,34,0.32) 42%, rgba(42,30,34,0.97) 100%) !important;
    }
    /* Marco de latón doble sobre la imagen */
    .tenant-mapubarbershop .booking-hero::before {
      content: '';
      position: absolute; inset: 10px;
      border: 1px solid rgba(201,168,76,0.25);
      pointer-events: none; z-index: 5;
    }
    .tenant-mapubarbershop .booking-hero::after {
      content: '';
      position: absolute; inset: 15px;
      border: 1px solid rgba(201,168,76,0.10);
      pointer-events: none; z-index: 5;
    }

    /* 4. Logo ring */
    .tenant-mapubarbershop .hero-logo-ring {
      border: 2px solid #BFA37E !important;
      box-shadow:
        0 0 0 1px rgba(191,163,126,0.12),
        0 0 0 5px rgba(42,30,34,0.8),
        0 0 0 6px rgba(191,163,126,0.15),
        0 0 24px rgba(191,163,126,0.15),
        0 0 50px rgba(0,0,0,0.5) !important;
    }

    /* 5. Segundo logo — tratamiento premium */
    .tenant-mapubarbershop #shopLogo2 {
      filter: drop-shadow(0 0 12px rgba(201,168,76,0.3)) !important;
      opacity: 0.92 !important;
    }

    /* 6. Nombre del local */
    .tenant-mapubarbershop #shopNombre {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 700 !important;
      letter-spacing: 0.01em !important;
      color: #F0EBE1 !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
    }

    /* 7. Eslogan */
    .tenant-mapubarbershop #shopSlogan {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-style: italic !important;
      letter-spacing: 0.18em !important;
      color: rgba(191,163,126,0.90) !important;
      text-shadow: none !important;
    }

    /* 8. Divisor */
    .tenant-mapubarbershop .gold-divider {
      width: 60px !important; height: 1px !important;
      background: linear-gradient(90deg, transparent, #BFA37E, transparent) !important;
      opacity: 0.6 !important;
    }

    /* 9. Info strip del hero */
    .tenant-mapubarbershop .info-strip {
      background: rgba(42,30,34,0.95) !important;
      border-bottom: 1px solid rgba(191,163,126,0.12) !important;
    }

    /* 10. Texto del progress step */
    .tenant-mapubarbershop #stepIndicatorText {
      font-family: system-ui, -apple-system, sans-serif !important;
      font-style: normal !important;
      font-size: 10px !important;
      font-weight: 500 !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      color: rgba(191,163,126,0.75) !important;
      text-shadow: none !important;
    }

    /* 11. Barra de progreso — dorado mate sólido */
    .tenant-mapubarbershop #progressBar {
      background: #BFA37E !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop #progressTrack {
      background: rgba(191,163,126,0.12) !important;
    }

    /* 12. Encabezados de pasos — Playfair */
    .tenant-mapubarbershop h2.text-neon,
    .tenant-mapubarbershop #step0 h2,
    .tenant-mapubarbershop #step1 h2,
    .tenant-mapubarbershop #step2 h2,
    .tenant-mapubarbershop #step3 h2,
    .tenant-mapubarbershop #step4 h2 {
      font-family: 'Playfair Display', Georgia, serif !important;
      color: #F0EBE1 !important;
      text-shadow: none !important;
      font-weight: 700 !important;
    }
    .tenant-mapubarbershop #step0 p.text-gray-500 {
      font-style: normal !important;
      color: rgba(191,163,126,0.5) !important;
    }

    /* 13. Tarjetas de sucursal */
    .tenant-mapubarbershop .sucursal-option {
      background: #352529 !important;
      border-color: transparent !important;
      border-radius: 0.625rem !important;
      box-shadow: none !important;
      transition: all 0.18s ease !important;
    }
    .tenant-mapubarbershop .sucursal-option:hover {
      border-color: rgba(191,163,126,0.25) !important;
      background: #3D2C31 !important;
    }
    .tenant-mapubarbershop .sucursal-option.border-neon {
      border-color: #BFA37E !important;
      border-width: 2px !important;
      background: #3D2C31 !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .sucursal-option.bg-brand-neon\/10 {
      background: #3D2C31 !important;
    }
    .tenant-mapubarbershop .sucursal-option .font-bold {
      font-family: 'Playfair Display', Georgia, serif !important;
      color: #F0EBE1 !important;
    }
    .tenant-mapubarbershop .sucursal-option p {
      color: rgba(191,163,126,0.5) !important;
    }
    .tenant-mapubarbershop .sucursal-option .ph-fill.ph-map-pin {
      color: rgba(191,163,126,0.65) !important;
    }

    /* 14. Category pills */
    .tenant-mapubarbershop .category-pill {
      background: #352529 !important;
      border-color: rgba(191,163,126,0.15) !important;
      border-radius: 3px !important;
      color: rgba(191,163,126,0.55) !important;
      font-family: system-ui, -apple-system, sans-serif !important;
      font-style: normal !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.10em !important;
      text-transform: uppercase !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .category-pill:hover {
      border-color: rgba(191,163,126,0.38) !important;
      color: rgba(191,163,126,0.88) !important;
      background: #3D2C31 !important;
    }
    .tenant-mapubarbershop .category-pill.border-neon {
      background: #3D2C31 !important;
      border-color: #BFA37E !important;
      color: #BFA37E !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .category-pill.text-neon { color: #BFA37E !important; }

    /* 15. Separador y título de categoría */
    .tenant-mapubarbershop .cat-sep { display: flex !important; }
    .tenant-mapubarbershop .cat-title {
      font-family: 'Playfair Display', Georgia, serif !important;
      border-left-color: #BFA37E !important;
      color: rgba(240,235,225,0.65) !important;
      font-style: normal !important;
      font-weight: 600 !important;
    }

    /* 16. Tarjetas de servicio */
    .tenant-mapubarbershop .service-option {
      background: #352529 !important;
      border-color: transparent !important;
      border-radius: 0.625rem !important;
      box-shadow: none !important;
      transition: all 0.18s ease !important;
    }
    .tenant-mapubarbershop .service-option:hover {
      border-color: rgba(191,163,126,0.25) !important;
      background: #3D2C31 !important;
    }
    .tenant-mapubarbershop .service-option.border-neon,
    .tenant-mapubarbershop .service-option.border-2.border-neon {
      border-color: #BFA37E !important;
      border-width: 2px !important;
      background: #3D2C31 !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .service-option.bg-brand-neon\/10 {
      background: #3D2C31 !important;
    }

    /* 17. Contenedor de icono */
    .tenant-mapubarbershop .icon-bg {
      background: #2A1E22 !important;
      border-color: rgba(191,163,126,0.20) !important;
      border-radius: 0.5rem !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .service-option.border-neon .icon-bg {
      border-color: rgba(191,163,126,0.45) !important;
      background: #2A1E22 !important;
    }

    /* 18. SVG icon custom de Mapu */
    .tenant-mapubarbershop .mapu-icon svg {
      width: 100%; height: 100%;
      stroke: #BFA37E;
      filter: none;
    }

    /* 19. Nombre del servicio */
    .tenant-mapubarbershop .svc-name {
      font-family: 'Playfair Display', Georgia, serif !important;
      color: #F0EBE1 !important;
      font-style: normal !important;
      font-weight: 600 !important;
    }

    /* 20. Precio y duración */
    .tenant-mapubarbershop .price-tag {
      color: #BFA37E !important;
      text-shadow: none !important;
      font-family: 'Playfair Display', Georgia, serif !important;
    }
    .tenant-mapubarbershop .duration-tag { color: rgba(191,163,126,0.48) !important; }

    /* 21. Barbero cards */
    .tenant-mapubarbershop .barber-option {
      background: #352529 !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .barber-option:hover {
      border-color: rgba(191,163,126,0.25) !important;
      background: #3D2C31 !important;
    }
    .tenant-mapubarbershop .barber-option.border-neon {
      border-color: #BFA37E !important;
      border-width: 2px !important;
      background: #3D2C31 !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .barber-option.bg-brand-neon\/10 {
      background: #3D2C31 !important;
    }
    .tenant-mapubarbershop .barber-name {
      font-family: 'Playfair Display', Georgia, serif !important;
      color: #F0EBE1 !important;
    }
    .tenant-mapubarbershop .text-brand-neon { color: #BFA37E !important; }
    .tenant-mapubarbershop .text-neon {
      color: #BFA37E !important;
      text-shadow: none !important;
    }

    /* 22. Day buttons calendario */
    .tenant-mapubarbershop .day-btn {
      background: #352529 !important;
      border-color: rgba(191,163,126,0.15) !important;
    }
    .tenant-mapubarbershop .day-btn.active,
    .tenant-mapubarbershop .day-btn.border-neon {
      border-color: #BFA37E !important;
      background: #3D2C31 !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .day-btn .dot.bg-neon {
      background: #BFA37E !important;
      box-shadow: none !important;
    }

    /* 23. Horas disponibles */
    .tenant-mapubarbershop #hoursGrid button:not([disabled]) {
      background: #352529 !important;
      border-color: rgba(191,163,126,0.15) !important;
      color: rgba(240,235,225,0.75) !important;
    }
    .tenant-mapubarbershop #hoursGrid button:not([disabled]):hover {
      border-color: rgba(191,163,126,0.42) !important;
      background: #3D2C31 !important;
      color: #BFA37E !important;
    }
    .tenant-mapubarbershop .time-pill.bg-neon {
      background: #BFA37E !important;
      color: #2A1E22 !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .time-pill.border-neon { box-shadow: none !important; }

    /* 24. Inputs de confirmación */
    .tenant-mapubarbershop #clientName,
    .tenant-mapubarbershop #clientPhone,
    .tenant-mapubarbershop #clientEmail {
      background: #352529 !important;
      border-color: rgba(191,163,126,0.18) !important;
      color: #F0EBE1 !important;
    }
    .tenant-mapubarbershop #clientName:focus,
    .tenant-mapubarbershop #clientPhone:focus,
    .tenant-mapubarbershop #clientEmail:focus {
      outline: none !important;
      border-color: rgba(191,163,126,0.55) !important;
      box-shadow: 0 0 0 2px rgba(191,163,126,0.10) !important;
    }

    /* 25. Botón Continuar — dorado mate sólido */
    .tenant-mapubarbershop #btnContinue {
      background: #BFA37E !important;
      color: #2A1E22 !important;
      font-family: system-ui, -apple-system, sans-serif !important;
      font-style: normal !important;
      font-weight: 700 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      box-shadow: none !important;
      border: none !important;
    }

    /* 26. WhatsApp CTA */
    .tenant-mapubarbershop #waBtnLink {
      background: rgba(191,163,126,0.07) !important;
      color: #BFA37E !important;
      border-color: rgba(191,163,126,0.25) !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop #waBtnLink i { color: #BFA37E !important; filter: none !important; }

    /* 27. Recap chips */
    .tenant-mapubarbershop #selectionRecap span {
      background: rgba(191,163,126,0.07) !important;
      border-color: rgba(191,163,126,0.14) !important;
      color: rgba(191,163,126,0.65) !important;
    }

    /* 29. Club banner y cards de Ubicación/Horario */
    .tenant-mapubarbershop #clubBanner a {
      background: #352529 !important;
      border-color: rgba(191,163,126,0.22) !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop #footerContact .rounded-2xl {
      background: #352529 !important;
      border-color: rgba(191,163,126,0.15) !important;
    }
    .tenant-mapubarbershop #footerContact .h-px {
      background: rgba(191,163,126,0.10) !important;
    }

    /* 28. Sobre Nosotros button */
    #mapu-sobre-wrap { display: none; }
    .tenant-mapubarbershop #mapu-sobre-wrap { display: block !important; }

    /* D'Jones — Visitar sitio web */
    #lumen-web-wrap { display: none; }
    .tenant-lumen #lumen-web-wrap { display: block !important; }
    body[data-step="2"] #lumen-web-wrap,
    body[data-step="3"] #lumen-web-wrap,
    body[data-step="4"] #lumen-web-wrap { display: none !important; }
    #lumen-web-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 11px 16px;
      border-radius: 14px;
      border: 1px solid rgba(212,175,55,0.28);
      background: rgba(212,175,55,0.06);
      color: rgba(212,175,55,0.85);
      font-family: system-ui, sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      text-decoration: none;
    }
    #lumen-web-btn:active {
      background: rgba(212,175,55,0.14);
      border-color: rgba(212,175,55,0.5);
      color: #D4AF37;
    }
    /* Chat: hereda la caja del botón de la web para que se lean como un par,
       pero MÁS discreto —sin fondo dorado— porque el que manda en esta
       pantalla es reservar; el chat es la salida para el que tiene una duda,
       no la acción principal. */
    /* Chat flotante (D'Jones). `bottom` se calcula sobre la barra de
       Continuar —que es fija y respeta el safe-area del iPhone— para no
       taparle el CTA al cliente. Sin texto: en 56px una etiqueta obliga a
       encoger la tipografía hasta que no se lee, y el ícono de globo de
       diálogo ya se entiende solo. */
    #lumen-chat-fab { display: none; }
    .tenant-lumen #lumen-chat-fab {
      display: flex !important;
      position: fixed;
      right: 16px;
      bottom: calc(7.2rem + env(safe-area-inset-bottom));
      z-index: 45;
      width: 52px;
      height: 52px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(212,175,55,0.14);
      border: 1px solid rgba(212,175,55,0.42);
      color: #D4AF37;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.45);
      text-decoration: none;
      transition: transform 0.15s, background 0.2s;
    }
    .tenant-lumen #lumen-chat-fab i { font-size: 24px; line-height: 1; }
    .tenant-lumen #lumen-chat-fab:active {
      transform: scale(0.93);
      background: rgba(212,175,55,0.24);
    }

    /* Únete al Club — El 10. Usa el acento del local (--accent) y no un
       dorado fijo, así el botón sirve igual el día que otro local lo pida:
       basta agregar su clase a la regla de visibilidad. */
    #el10-club-wrap { display: none; }
    .tenant-el10salonmasculino #el10-club-wrap { display: block !important; }
    body[data-step="2"] #el10-club-wrap,
    body[data-step="3"] #el10-club-wrap,
    body[data-step="4"] #el10-club-wrap { display: none !important; }
    #el10-club-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 11px 16px;
      border-radius: 14px;
      border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.28);
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.06);
      color: var(--accent);
      font-family: system-ui, sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      text-decoration: none;
    }
    #el10-club-btn:active {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.14);
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.5);
    }
    #mapu-sobre-btn {
      width: 100%;
      padding: 10px 16px;
      border-radius: 12px;
      border: 1px solid rgba(191,163,126,0.30);
      background: rgba(191,163,126,0.06);
      color: rgba(191,163,126,0.80);
      font-family: system-ui, sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    #mapu-sobre-btn:active { background: rgba(191,163,126,0.12); border-color: rgba(191,163,126,0.50); }

    /* Modal overlay */
    #mapu-sobre-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(4px);
      align-items: flex-end;
    }
    #mapu-sobre-modal.open { display: flex; }
    #mapu-sobre-sheet {
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;
      background: #2A1E22;
      border-radius: 24px 24px 0 0;
      border-top: 1px solid rgba(191,163,126,0.20);
      padding: 0 24px 40px;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    #mapu-sobre-modal.open #mapu-sobre-sheet { transform: translateY(0); }
    #mapu-sobre-handle {
      width: 36px; height: 4px;
      background: rgba(191,163,126,0.25);
      border-radius: 2px;
      margin: 14px auto 20px;
    }
    #mapu-sobre-title {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 700;
      color: #BFA37E;
      margin-bottom: 16px;
      line-height: 1.25;
    }
    #mapu-sobre-body {
      font-family: system-ui, sans-serif;
      font-size: 14.5px;
      line-height: 1.75;
      color: rgba(255,255,255,0.72);
    }
    #mapu-sobre-close {
      margin-top: 24px;
      width: 100%;
      padding: 13px;
      border-radius: 12px;
      background: #BFA37E;
      color: #2A1E22;
      font-family: system-ui, sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
    }

    /* ═══════════════════════════════════════════════════════════════
       ELEGANCE — Golden Booking Theme (default tenant)
       ═══════════════════════════════════════════════════════════════ */

    /* Barra de progreso dorada */
    #progressBar {
      background-color: #D4AF37 !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop #progressBar {
      background: #BFA37E !important;
      box-shadow: none !important;
    }
    /* ferraza #progressBar → ver bloque "Ferraza — Barra de progreso" cerca de línea 149 */

    /* Botón Continuar dorado */
    #btnContinue {
      background-color: #D4AF37 !important;
      color: #050505 !important;
    }
    /* ferraza #btnContinue → ver bloque "Ferraza — Botón Continuar" cerca de línea 149 */
    /* Mapu override — sólido mate, sin gradiente */
    .tenant-mapubarbershop #btnContinue {
      background: #BFA37E !important;
      color: #2A1E22 !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop #btnContinueBar {
      background: rgba(42,30,34,0.92) !important;
      border-top-color: rgba(191,163,126,0.12) !important;
    }

    /* Cards de servicio seleccionadas: borde y fondo dorado */
    .service-option.border-neon {
      border-color: #D4AF37 !important;
      box-shadow: 0 0 10px rgba(212,175,55,0.1) !important;
    }
    .service-option.bg-brand-neon\/10 {
      background-color: rgba(212,175,55,0.08) !important;
    }
    .barber-option.border-neon {
      border-color: #D4AF37 !important;
      box-shadow: none !important;
    }
    .barber-option.bg-brand-neon\/10 {
      background-color: rgba(212,175,55,0.08) !important;
    }

    /* ══ SELECTOR DE MES (grilla del mes completo) ═════════════════════════
       Estructura y colores NEUTROS, construidos sobre --accent para que
       funcionen con cualquier marca. Este bloque no le cambia la pantalla a
       nadie: el panel solo se dibuja para los locales con
       `configuracion/main.calendarioMes`, y el resto ni siquiera ve el botón.
       Un local con hoja propia afina los colores desde ahí. */
    .mes-panel {
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 20px;
      padding: 14px 14px 12px;
      background: rgba(255,255,255,0.03);
    }
    .mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .mes-flecha {
      width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(255,255,255,0.12); background: transparent;
      color: inherit; transition: all .15s; cursor: pointer;
    }
    .mes-flecha:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .mes-flecha:disabled { opacity: .3; cursor: not-allowed; }
    /* inline-flex y no `flex:1`: con el envoltorio estirado a todo el ancho, la
       flechita del desplegable se iba al borde del panel y quedaba a diez
       centímetros del nombre del mes, como si fuera otro control. */
    .mes-sel-wrap { position: relative; display: inline-flex; align-items: center; }
    /* El <select> es el que cumple "elegir el mes directamente": con el
       horizonte en 3 meses las flechas alcanzan, pero en un teléfono abrir la
       lista nativa y tocar el mes es un gesto y no dos. */
    .mes-sel {
      appearance: none; -webkit-appearance: none;
      background: transparent; border: 0; color: inherit;
      font-size: 15px; font-weight: 700; text-align: center;
      padding: 8px 26px 8px 12px; border-radius: 12px; cursor: pointer;
    }
    .mes-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .mes-sel option { color: #111; }   /* la lista nativa la pinta el sistema */
    .mes-sel-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 11px; opacity: .6; }
    .mes-dow, .mes-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .mes-dow { margin-bottom: 4px; }
    .mes-dow span { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .5; padding: 4px 0; }
    /* Cuadrada pero con techo: sin `max-width` cada celda crece con el ancho
       del panel y en escritorio quedaban botones de 85 px para un número de
       dos dígitos. Centrada en su columna para que siga alineada con la
       cabecera de días. */
    .mes-dia {
      aspect-ratio: 1 / 1; min-height: 36px; width: 100%; max-width: 48px; margin-inline: auto;
      display: flex; align-items: center; justify-content: center;
      border-radius: 12px; border: 1px solid transparent;
      font-size: 14px; font-weight: 600; color: inherit;
      background: rgba(255,255,255,0.05); cursor: pointer; transition: all .12s;
    }
    .mes-dia:hover:not(.mes-dia--off) { border-color: var(--accent); }
    /* Apagado, NO invisible: que el día cerrado se vea es la mitad del pedido.
       En la tira estos días simplemente no existen, y eso hace imposible
       distinguir "el local no abre" de "todavía no llega la tira". Se apaga
       con opacidad y quitándole la tarjeta; sin tachado, que con veinte días
       cerrados convertía la grilla en un enrejado. */
    .mes-dia--off { opacity: .32; background: transparent; cursor: not-allowed; }
    .mes-dia--hoy:not(.mes-dia--sel) { box-shadow: inset 0 0 0 1px var(--accent); }
    .mes-dia--sel { background: var(--accent); color: var(--button-text, #fff); border-color: var(--accent); font-weight: 800; }
    .mes-pie, .mes-vacio { margin-top: 10px; font-size: 11px; text-align: center; opacity: .55; }
    .mes-vacio { opacity: .85; font-weight: 600; }
    .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    @media (prefers-reduced-motion: reduce) { .mes-dia, .mes-flecha { transition: none; } }

    /* ══ PLANES SIEMPRE VISIBLES + PUERTA DE CUENTA ════════════════════════
       Igual que la grilla del mes: estructura neutra sobre --accent, y no le
       cambia la pantalla a nadie porque los contenedores solo se llenan para
       los locales configurados. */
    .planes-caja {
      border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.30);
      border-radius: 20px; padding: 16px 18px;
      background: linear-gradient(135deg, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.12), rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.03));
    }
    .planes-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .planes-eti { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
    .planes-titulo { font-size: 16px; font-weight: 800; margin: 0; }
    .planes-bajada { font-size: 12.5px; line-height: 1.45; margin: 6px 0 10px; opacity: .8; }
    .planes-opciones { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
    .planes-opciones li {
      font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
      border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.35);
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08);
    }
    .planes-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .planes-nota { font-size: 11px; opacity: .65; display: inline-flex; align-items: center; gap: 5px; }
    .planes-cta {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 13px; font-weight: 800; padding: 9px 16px; border-radius: 999px;
      background: var(--accent); color: var(--button-text, #fff); text-decoration: none;
      transition: filter .15s;
    }
    .planes-cta:hover { filter: brightness(.93); }

    /* La version de una linea. Mismo lenguaje que la tarjeta grande, pero
       con techo de alto: lo que empuja el paso fuera de pantalla es el alto,
       asi que esto no puede crecer ni envolver. */
    .planes-mini {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-radius: 14px; text-decoration: none;
      border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.30);
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08);
      transition: filter .15s;
    }
    .planes-mini:hover { filter: brightness(.96); }
    .planes-mini > i { color: var(--accent); font-size: 17px; flex-shrink: 0; }
    .planes-mini-txt {
      font-size: 12.5px; line-height: 1.3; flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .planes-mini-txt b { font-weight: 800; }
    .planes-mini-cta {
      display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
      font-size: 12px; font-weight: 800; color: var(--accent); white-space: nowrap;
    }

    /* ══ FILTRO DE PROFESIONAL (paso de fecha y hora) ══════════════════════
       Mismo criterio que el selector de mes: neutro y construido sobre
       --accent, para que funcione con cualquier marca. Solo se dibuja donde
       el profesional es filtro y no paso; el resto ni ve el botón. */
    .profe-chip {
      border-width: 1px; border-style: solid;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.28);
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.05);
      color: var(--accent);
    }
    .profe-chip:hover { border-color: var(--accent); }
    .profe-chip-activo {
      border-color: var(--accent);
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.12);
    }
    #panelProfe {
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 20px; padding: 14px;
      background: rgba(255,255,255,0.03);
    }
    html.theme-light #panelProfe {
      border-color: rgba(15,23,42,0.10);
      background: rgba(15,23,42,0.025);
    }

    .cuenta-puerta {
      border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.35);
      border-radius: 20px; padding: 20px 18px; text-align: center;
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.07);
    }
    .cuenta-icono { font-size: 30px; color: var(--accent); line-height: 1; margin-bottom: 8px; }
    .cuenta-titulo { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
    .cuenta-bajada { font-size: 12.5px; line-height: 1.5; opacity: .75; margin: 0 0 14px; }
    .cuenta-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 13px 18px; border-radius: 14px; border: 0; cursor: pointer;
      font-size: 14px; font-weight: 800;
      background: var(--accent); color: var(--button-text, #fff);
    }
    a.cuenta-btn { text-decoration: none; }
    .cuenta-pie { font-size: 11px; opacity: .6; margin: 10px 0 0; }

    /* La puerta de "solo convenio" REEMPLAZA al asistente de reserva.
       Se apaga por CSS y no escondiendo cada <section> desde el JS porque el
       asistente se vuelve a mostrar solo por varios caminos —showStep, el
       botón de volver, el reanudar que corre después de iniciar sesión— y
       cualquiera de ellos reabriría un formulario que no se puede terminar.
       La clase la pone _pintarPuertaConvenio(). */
    body.solo-convenio #step0,
    body.solo-convenio #step1,
    body.solo-convenio #step2,
    body.solo-convenio #step3,
    body.solo-convenio #step4,
    body.solo-convenio #pasoProgreso { display: none !important; }

    /* LA CUENTA VA PRIMERO. Punto Pilates lo pidio el 21-09-2026: lo primero
       que hace la clienta al abrir el link es iniciar sesion o crear su
       cuenta. Antes la puerta estaba en el ULTIMO paso: elegia sede, clase,
       dia y hora, y recien ahi se enteraba de que necesitaba cuenta —y al
       volver del login habia que reconstruirle toda la reserva (de ahi el
       borrador y el reanudar). Pidiendola al entrar no hay nada que
       reconstruir.
       Se apaga por CSS y no escondiendo cada <section> desde el JS por el
       mismo motivo que la puerta de convenio: el asistente se vuelve a
       mostrar solo por varios caminos y cualquiera reabriria un formulario
       que todavia no se puede terminar. */
    body.cuenta-primero #step0,
    body.cuenta-primero #step1,
    body.cuenta-primero #step2,
    body.cuenta-primero #step3,
    body.cuenta-primero #step4,
    body.cuenta-primero #pasoProgreso,
    body.cuenta-primero #btnContinueBar { display: none !important; }
    .cuenta-ok {
      display: flex; align-items: center; gap: 12px;
      border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.30);
      border-radius: 16px; padding: 12px 14px;
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.07);
    }
    .cuenta-ok-icono { font-size: 22px; color: var(--accent); flex-shrink: 0; }
    .cuenta-ok-texto { flex: 1; min-width: 0; }
    .cuenta-ok-titulo { font-size: 13.5px; font-weight: 800; margin: 0; }
    .cuenta-ok-mail { font-size: 11.5px; opacity: .65; margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cuenta-salir {
      flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 6px 12px;
      border-radius: 999px; cursor: pointer; background: transparent; color: inherit;
      border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.35);
    }

    /* ── Tenants self-service: que el dorado siga al acento del local ──────
       Las reglas de arriba (#progressBar, #btnContinue, cards seleccionadas)
       hardcodean el #D4AF37 con !important, y cada tenant A MEDIDA lo pisa con
       su propio bloque .tenant-X. Un tenant self-service no tiene bloque: se
       quedaba con el dorado aunque su dueño hubiera elegido otro color, y los
       elementos más visibles de la página —la barra de progreso y el botón
       Continuar— salían de un color que no es su marca.

       Va acotado a .tenant-selfservice (la clase que pone config.js al
       registrar un tenant dinámico) justamente para no tocar a ningún local
       curado: ninguno la lleva. Ver [[acento-selfservice]] en config.js.
       Detectado el 2026-08-24 probando shibuyabarbershop: acento #00e5ff y
       barra dorada. */
    html.tenant-selfservice #progressBar {
      background-color: var(--accent) !important;
    }
    html.tenant-selfservice #btnContinue {
      background-color: var(--accent) !important;
      /* El texto del botón no puede ser fijo: sobre un acento claro el negro se
         lee y sobre uno oscuro no. --gold-contrast lo calcula config.js por
         contraste real contra el acento del local (ver _aplicarAcentoSelf).
         El fallback #ffffff es el seguro: si por lo que sea la var no llegara,
         un botón oscuro con texto blanco se lee, y al revés no —así se veía
         antes, negro sobre negro. */
      color: var(--gold-contrast, #ffffff) !important;
    }
    html.tenant-selfservice .service-option.border-neon,
    html.tenant-selfservice .barber-option.border-neon {
      border-color: var(--accent) !important;
      box-shadow: 0 0 10px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.1) !important;
    }
    html.tenant-selfservice .service-option.bg-brand-neon\/10,
    html.tenant-selfservice .barber-option.bg-brand-neon\/10 {
      background-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08) !important;
    }

    /* ── Paso 2: la ficha del profesional, mas compacta ────────────────────
       La rama de render por defecto —la que le toca a todo self-service—
       dibuja tarjetas verticales con un avatar de 80px. Con un equipo de
       cinco, el paso 2 mide 1096px: el cliente scrollea tres pantallas para
       ver a quien elegir. Y como casi ningun local sube fotos todavia, esos
       80px son un circulo vacio con una silueta adentro — justo lo que los
       locales nuevos pidieron achicar (25-08-2026).

       Se corrige por CSS y no en el render porque esa plantilla es COMUN a
       los tenants a medida, que ya tienen su presentacion afinada (elegance
       y chameleon van por la rama horizontal; sion, yugen y barbersclub
       traen la suya). Colgado de html.tenant-selfservice toca solo a los
       locales dinamicos.

       El selector no lleva !important a proposito: le gana por especificidad
       a las utilidades de Tailwind (.w-20, .mb-4) sin quedar por encima de
       la hoja propia del local, que es la que debe mandar si algun dia trae
       otra medida. */
    /* De tarjeta vertical a FILA. Achicar el avatar (25-08) no alcanzó: cada
       profesional seguía siendo un cuadro alto con la foto arriba y el nombre
       debajo, y con 4 opciones el paso 2 pedía scroll igual. Ahora es la misma
       fila compacta que ya usan barbersclub y elegance: foto a la izquierda,
       nombre y datos a la derecha.

       Va con `display: grid` y NO con `flex-direction: row` porque el nombre,
       la especialidad, los días y la disponibilidad son HERMANOS del avatar en
       el markup: en una fila flex quedarían los cuatro uno al lado del otro.
       El texto se manda a la segunda columna EXPLÍCITAMENTE (`grid-column: 2`
       más abajo) y por eso se apila solo, sin importar cuántas líneas traiga
       cada ficha. Sigue sin `!important` y sin colores propios: el acento y el
       tema del local mandan (los self-service claros también).

       ⚠️ NO confiar en `grid-row: 1 / -1` para eso. `-1` es la última línea de
       la grilla EXPLÍCITA, y acá no hay `grid-template-rows`: el tramo colapsa
       a la fila 1 y el avatar NO ocupa la altura. Con la celda (fila 2,
       columna 1) libre, la colocación automática metía ahí el texto largo, la
       columna 1 crecía a su ancho y la 2 quedaba en nada. Medido en un
       teléfono de 390px con "Sin preferencia": columnas de 236px y 56px, con
       el nombre y la disponibilidad cortados. Con `grid-column: 2` quedan en
       48px y 244px. Se veía en todos los locales self-service, no solo en uno. */
    html.tenant-selfservice #barberosGrid .barber-option {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 0.875rem;
      align-items: center;
      justify-items: start;
      text-align: left;
      padding: 0.875rem 1rem;
      min-height: 4.25rem;
    }
    html.tenant-selfservice #barberosGrid .barber-option .w-20 {
      grid-column: 1;
      grid-row: 1 / -1;
      align-self: center;
      width: 3rem;
      height: 3rem;
      margin-bottom: 0;
    }
    html.tenant-selfservice #barberosGrid .barber-option .w-20 i { font-size: 1.25rem; }
    /* Las líneas de texto: SIEMPRE en la segunda columna, a la izquierda y sin
       el centrado del molde vertical. La columna explícita es lo que impide que
       una etiqueta larga se cuele en la del avatar (ver el aviso de arriba). */
    html.tenant-selfservice #barberosGrid .barber-option > span,
    html.tenant-selfservice #barberosGrid .barber-option > p {
      grid-column: 2;
      justify-self: stretch;
      text-align: left;
      justify-content: flex-start;
      margin-bottom: 0;
    }

    /* ── Self-service CLARO: dos bloques escritos para fondo oscuro ─────────
       Los tenants a medida claros (aura, omega, sion…) traen su propio CSS y
       pisan estos dos. Un self-service no, así que hereda la versión oscura y
       el texto desaparece sobre blanco. Visto con Faith Barber, el primer
       self-service de tema claro (24-08-2026).

       1) #clubBanner trae `background:#0a0807` FIJO en el atributo style del
          HTML: una tarjeta negra en medio de una página blanca. Peor con un
          acento oscuro (#111 en Faith Barber), porque el nombre del club y el
          ícono se pintan con el acento y quedan negro sobre negro.
       2) El bloque de "Horas recomendadas" (#smartSlotsContainer) tiene su
          subtítulo en rgba(255,255,255,0.65) —blanco sobre blanco— y el título
          en un degradado ámbar recortado al texto, ilegible sobre claro.

       Todo va con !important porque los estilos originales son inline. */
    html.tenant-selfservice.theme-light #clubBanner a {
      background: #ffffff !important;
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.30) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    html.tenant-selfservice.theme-light #clubBanner p.text-white { color: #111111 !important; }
    html.tenant-selfservice.theme-light #clubBanner p.text-gray-500 { color: #6b7280 !important; }
    /* #shopClubNombre NO se toca acá: una regla del tema claro con !important
       lo deja en gray-400 (2.54:1) y gana igual. Es el mismo gris flojo que
       muestran aura y omega en producción, o sea un asunto del tema y no de
       este bloque; forzarlo solo para los self-service los dejaría distintos
       del resto sin arreglar la causa. */

    html.tenant-selfservice.theme-light #smartSlotsContainer > div {
      background: #f5f5f4 !important;
      border-color: rgba(17,17,17,0.10) !important;
      box-shadow: none !important;
    }
    html.tenant-selfservice.theme-light #smartSlotsContainer p:first-of-type {
      /* Anula el degradado recortado al texto, que sin fondo oscuro no se ve. */
      background: none !important;
      -webkit-text-fill-color: #111111 !important;
      color: #111111 !important;
    }
    html.tenant-selfservice.theme-light #smartSlotsContainer p:first-of-type i {
      -webkit-text-fill-color: var(--accent) !important;
      color: var(--accent) !important;
      filter: none !important;
    }
    html.tenant-selfservice.theme-light #smartSlotsContainer p:not(:first-of-type) {
      color: #4b5563 !important;
    }
    html.tenant-selfservice.theme-light #smartSlotsContainer .smart-slot-pill {
      background: #ffffff !important;
      border-color: rgba(17,17,17,0.14) !important;
      color: #111111 !important;
    }

    /* El rayo de "Horas recomendadas" viene cableado con el rosa de Aura
       (#FF8EA6) en el HTML inline. En los temas claros lo pinta el acento del
       propio local: ahí donde la rama sirve a varias marcas, el único color de
       marca del bloque no puede ser el de una sola. */
    html.theme-light #smartSlotsContainer p:first-of-type i {
      color: var(--accent) !important;
      -webkit-text-fill-color: var(--accent) !important;
      filter: none !important;
    }
    /* Y el resplandor de la esquina, por el mismo motivo: nace
       rgba(255,142,166,.15), o sea rosa Aura sobre la marca de otro. */
    html.theme-light #smartSlotsContainer > div > div:first-child {
      background: radial-gradient(circle,
        rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.14) 0%, transparent 70%) !important;
    }

    /* Mapu overrides para cards seleccionadas */
    .tenant-mapubarbershop .service-option.border-neon {
      border-color: #BFA37E !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .service-option.bg-brand-neon\/10 {
      background: #3D2C31 !important;
    }
    .tenant-mapubarbershop .barber-option.border-neon {
      border-color: #BFA37E !important;
      box-shadow: none !important;
    }
    .tenant-mapubarbershop .barber-option.bg-brand-neon\/10 {
      background: #3D2C31 !important;
    }
    /* ── Chameleon Barber Studio ── */
    /* ══ KRONNOS STUDIO PEÑABLANCA — Rojo Neón / Negro ══ */
    .tenant-kronnos_penablanca {
      --accent:   #e11d2a;
      --accent-r: 225; --accent-g: 29; --accent-b: 42;
      --neon-clr: #e11d2a;
      --neon-r:   225; --neon-g: 29; --neon-b: 42;
      --body-bg:  #0a0a0a;
    }
    .tenant-kronnos_penablanca body { background-color: #0a0a0a; }
    .tenant-kronnos_penablanca .booking-hero {
      background-image: url('/kronnos/kronospena.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-kronnos_penablanca .booking-hero-overlay {
      /* Overlay reforzado: vignette radial que focaliza el centro + gradiente
       * vertical mas denso en la zona del titulo (55% opacidad en la banda
       * central). Necesario porque el fondo del local tiene mucha luz roja
       * y letras KRONNOS repetidas que competian con el texto blanco. */
      background:
        radial-gradient(ellipse 100% 70% at 50% 45%,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.55) 60%,
          rgba(10,10,10,0.85) 100%),
        linear-gradient(180deg,
          rgba(0,0,0,0.55) 0%,
          rgba(0,0,0,0.40) 35%,
          rgba(0,0,0,0.55) 60%,
          rgba(10,10,10,0.98) 100%) !important;
    }

    /* ══ KRONNOS STUDIO LIMACHE — Naranja Neón / Negro ══ */
    .tenant-kronnos_limache {
      --accent:   #f97316;
      --accent-r: 249; --accent-g: 115; --accent-b: 22;
      --neon-clr: #f97316;
      --neon-r:   249; --neon-g: 115; --neon-b: 22;
      --body-bg:  #0a0a0a;
    }
    .tenant-kronnos_limache body { background-color: #0a0a0a; }
    .tenant-kronnos_limache .booking-hero {
      background-image: url('/kronnos/kronoslima.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-kronnos_limache .booking-hero-overlay {
      background:
        radial-gradient(ellipse 100% 70% at 50% 45%,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.55) 60%,
          rgba(10,10,10,0.85) 100%),
        linear-gradient(180deg,
          rgba(0,0,0,0.55) 0%,
          rgba(0,0,0,0.40) 35%,
          rgba(0,0,0,0.55) 60%,
          rgba(10,10,10,0.98) 100%) !important;
    }

    /* ══ YŪGEN STUDIO — Dark zen · Negro / Madera / Greige / Dorado ══ */
    .tenant-yugen {
      --accent:   #f5f3ef;
      --accent-r: 245; --accent-g: 243; --accent-b: 239;
      --neon-clr: #f5f3ef;
      --neon-r:   245; --neon-g: 243; --neon-b: 239;
      --body-bg:  #0b0a09;
    }
    .tenant-yugen body { background-color: #0b0a09; }
    .tenant-yugen .booking-hero {
      background-image: url('/yugen/yugen2.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-yugen .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(8,7,6,0.32) 0%,
        rgba(8,7,6,0.20) 26%,
        rgba(11,10,9,0.72) 56%,
        rgba(11,10,9,0.97) 100%) !important;
    }
    /* Hero alineado a la izquierda */
    .tenant-yugen .booking-hero > div:has(#heroLogoArea) {
      align-items: flex-start !important;
      text-align: left !important;
    }
    .tenant-yugen #heroLogoArea {
      justify-content: flex-start !important;
      margin-bottom: 1.25rem;
    }
    .tenant-yugen .gold-divider { margin-left: 0 !important; margin-right: 0 !important; }
    .tenant-yugen .booking-hero p:has(#shopSlogan) {
      padding-left: 0 !important; padding-right: 0 !important; text-align: left !important;
      text-transform: none !important;
      letter-spacing: -0.005em !important;
      font-size: 0.98rem !important;
      line-height: 1.35 !important;
      font-weight: 600 !important;
    }
    /* Sello ritual 幽玄 (幽 blanco + 玄 rojo) — esquina inferior izquierda del hero */
    .tenant-yugen .booking-hero::after {
      content: '幽玄';
      position: absolute;
      left: 16px;
      bottom: 14px;
      z-index: 5;
      pointer-events: none;
      font-family: 'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;
      font-size: 18px;
      line-height: 1;
      letter-spacing: 0.18em;
      background: linear-gradient(90deg, #ffffff 0 50%, #c0392b 50% 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    /* Logo sin borde dorado (sin animación — queda quieto) */
    .tenant-yugen .hero-logo-ring {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      filter: drop-shadow(0 16px 22px rgba(0,0,0,0.55));
    }
    .tenant-yugen #shopNombre {
      text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.9);
    }
    @keyframes yugenFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-9px); }
    }
    /* Slogan — brillo dorado que recorre el texto */
    .tenant-yugen #shopSlogan {
      font-family: inherit;
      background: linear-gradient(90deg,
        rgba(245,243,239,0.55) 0%, rgba(245,243,239,0.55) 35%,
        #ffffff 50%, rgba(245,243,239,0.55) 65%, rgba(245,243,239,0.55) 100%);
      background-size: 220% auto;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: yugenShimmer 6.5s linear infinite;
    }
    @keyframes yugenShimmer {
      0%   { background-position: 120% center; }
      100% { background-position: -120% center; }
    }
    /* Ondas op-art animadas en el fondo del hero */
    .yugen-waves { display: none; }
    /* Ondas op-art desactivadas (se quitaron las líneas horizontales animadas). */
    .tenant-yugen .yugen-waves {
      display: none;
      position: absolute; inset: 0; z-index: 1;
      pointer-events: none; overflow: hidden;
      opacity: 0.18;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='58'%3E%3Cpath d='M0,29 C40,7 80,51 120,29 C160,7 200,51 240,29' fill='none' stroke='%23f5f3ef' stroke-width='1.4'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 240px 58px;
      animation: yugenWaveDrift 16s linear infinite;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
    }
    @keyframes yugenWaveDrift {
      from { background-position: 0 0; }
      to   { background-position: 240px 0; }
    }
    /* Ondas sutiles en las tarjetas de servicio */
    .tenant-yugen .service-option { position: relative; overflow: hidden; }
    .tenant-yugen .service-option > * { position: relative; z-index: 1; }
    /* Ondas op-art quitadas de las tarjetas de servicio */
    .tenant-yugen .service-option::after { content: none; }

    /* ── Negro completo (sin café) + acentos blancos (sin dorado) ── */
    .tenant-yugen {
      --accent: #ffffff; --accent-r: 255; --accent-g: 255; --accent-b: 255;
      --neon-clr: #ffffff; --neon-r: 255; --neon-g: 255; --neon-b: 255;
      --body-bg: #000;
    }
    .tenant-yugen body { background-color: #000 !important; }
    .tenant-yugen .service-option,
    .tenant-yugen .barber-option { background-color: #0d0d0d !important; }
    /* Fondos cálidos en estilos inline (#15120e / #1f1a14 / #0a0807) → negro neutro */
    .tenant-yugen [style*="background:#15120e"],
    .tenant-yugen [style*="background:#1f1a14"],
    .tenant-yugen [style*="background:#0a0807"],
    .tenant-yugen [style*="background: #15120e"],
    .tenant-yugen [style*="background: #1f1a14"],
    .tenant-yugen [style*="background: #0a0807"] { background-color: #0d0d0d !important; }
    /* Bordes/acentos dorados (201,168,76) → blanco */
    .tenant-yugen [style*="rgba(201,168,76"] { border-color: rgba(255,255,255,0.18) !important; }
    /* Strip de info compacta + modal de info */
    .tenant-yugen .yugen-info { background: rgba(13,13,13,0.9) !important; }
    .tenant-yugen .yugen-modal-card { background: #0d0d0d !important; }
    /* Acentos dorados fijos → blanco */
    .tenant-yugen #btnContinue { background-color: #f5f3ef !important; color: #0b0a09 !important; }
    .tenant-yugen #progressBar { background-color: #f5f3ef !important; }
    /* Confirmación: logo de Yūgen en el sello animado (reusa #aura-stamp-wrap) */
    .tenant-yugen #success-state > div.w-24 { display: none !important; }
    .tenant-yugen #success-state #aura-stamp-wrap { display: flex !important; }
    .tenant-yugen #aura-stamp-wrap .aura-stamp-ring-1 { border-color: rgba(245,243,239,0.50) !important; }
    .tenant-yugen #aura-stamp-wrap .aura-stamp-ring-2 { border-color: rgba(245,243,239,0.28) !important; }
    .tenant-yugen #aura-stamp-wrap .aura-stamp-logo {
      border-color: rgba(245,243,239,0.40) !important;
      box-shadow: 0 0 0 6px rgba(245,243,239,0.08), 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25) !important;
    }
    .tenant-yugen .service-option.border-neon,
    .tenant-yugen .barber-option.border-neon {
      border-color: #f5f3ef !important;
      box-shadow: 0 0 10px rgba(245,243,239,0.12) !important;
    }
    .tenant-yugen .service-option.bg-brand-neon\/10,
    .tenant-yugen .barber-option.bg-brand-neon\/10 {
      background-color: rgba(245,243,239,0.08) !important;
    }
    /* Info compacta: botones Ver horario / Ver ubicación */
    .yugen-info { display: none; }
    .tenant-yugen .info-strip { display: none !important; }
    .tenant-yugen .yugen-info {
      display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(10,8,7,0.8);
    }
    .tenant-yugen .yugen-info .yg-full { flex-basis: 100%; }
    .tenant-yugen .yugen-info button {
      flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 11px 12px; border-radius: 12px;
      background: rgba(245,243,239,0.05);
      border: 1px solid rgba(245,243,239,0.14);
      color: #f5f3ef; font-size: 12.5px; font-weight: 600; cursor: pointer;
      transition: background .2s ease, border-color .2s ease, transform .15s ease;
    }
    .tenant-yugen .yugen-info button:hover { background: rgba(245,243,239,0.10); border-color: rgba(245,243,239,0.28); }
    .tenant-yugen .yugen-info button:active { transform: scale(.97); }
    .tenant-yugen .yugen-info button i { font-size: 15px; opacity: .85; }
    /* ── Íconos de la navegación del hero ────────────────────────────────
       Ubicación, Horario y Quiénes somos venían clavados a
       rgba(201,168,76,·) — el dorado de Elegance, repartido a TODOS los
       locales desde el CSS común y desde dos `style` inline. Un local con
       marca verde o roja mostraba tres íconos dorados que no eran suyos.
       Ahora siguen a --accent.

       Se midieron los 39 acentos del repo contra el fondo oscuro del strip
       (#0a0807). NINGUNO queda ilegible, así que --nav-icono existe como
       escape y hoy no lo usa nadie. Los cuatro que dan bajo 3:1 pintan sobre
       una barra CLARA, donde un acento casi negro es lo correcto:

         infinity #000000, renacer #1E2C55  → están en _lightTenants
         faithbarber #111111                → `tema: 'aura'` en su seed
         newglow #c2559b                    → _lightTenants

       Dos trampas que encontramos midiendo, por si alguien rehace esto:

       · El tema NO sale de una sola lista. _lightTenants cubre a los
         estáticos, pero un tenant dinámico lo pide con `tema: 'aura'` en su
         doc raíz. Sin mirar las dos, faithbarber parecía oscuro y por poco
         se lleva un ícono blanco sobre blanco.
       · El acento del tenant no es el primer `color:` del seed. En
         seed-mibarbed.js el primero es el de una SEDE (#262626, casi negro);
         el del local está más abajo y es #ffffff. Buscar sin anclar al doc
         raíz da un acento que no existe. */
    .info-strip i { color: var(--nav-icono, var(--accent)); }

    /* Quiénes somos — botón + modal (todos los locales) */
    .qs-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px; font-size:12.5px; font-weight:700; color:rgba(229,231,235,0.88); background:rgba(255,255,255,0.02); border:0; border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer; transition:background .15s; }
    /* Logo de la marca de productos dentro del botón de la tienda. Alto fijo y
       ancho automático: los logos vienen cuadrados, apaisados o circulares y
       con `height` todos ocupan la misma línea sin deformarse. `object-fit`
       por si alguno trae otra proporción. */
    .qs-btn .tienda-marca-logo { height:26px; width:auto; max-width:74px; object-fit:contain; border-radius:5px; flex-shrink:0; }
    .qs-btn:active { background:rgba(255,255,255,0.06); }
    .qs-btn i { color: var(--nav-icono, var(--accent)); font-size:14px; }
    /* "Nuestros productos" como puerta a la tienda (09-10-2026): el icono en
       una pastilla del color del local, una bajada y una flecha. La bajada se
       esconde en pantallas angostas para no partir la fila. */
    .qs-btn.tienda-btn { gap:10px; background: linear-gradient(90deg, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.10), rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.02) 70%); text-decoration:none; }
    .qs-btn.tienda-btn > i { width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.18); font-size:15px; }
    .qs-btn.tienda-btn .tienda-btn-sub { font-size:11px; font-weight:600; opacity:.62; }
    .qs-btn.tienda-btn .tienda-btn-sub::before { content:"\00B7"; margin-right:8px; opacity:.6; }
    .qs-btn.tienda-btn .tienda-btn-ir { font-size:13px; color: var(--accent); transition: transform .15s ease; }
    .qs-btn.tienda-btn:hover .tienda-btn-ir { transform: translateX(2px); }
    @media (max-width: 360px) { .qs-btn.tienda-btn .tienda-btn-sub { display:none; } }
    /* BRZ pone las puertas en una grilla de cuadros: ahí van solo icono y nombre. */
    html.tenant-brz .qs-btn.tienda-btn .tienda-btn-sub, html.tenant-brz .qs-btn.tienda-btn .tienda-btn-ir { display:none; }
    @media (prefers-reduced-motion: reduce) { .qs-btn.tienda-btn .tienda-btn-ir { transition:none; } }
    /* Temas claros (.theme-light, p. ej. el tema 'aura'): el .qs-btn base nace
       para fondo oscuro —texto casi blanco— y sobre la página clara
       "Nuestros productos" y "Quiénes somos" no se leían (Aura, 30-09-2026).
       Solo Invictus y Metropolitan lo tenían resuelto con su regla propia,
       que sigue ganando (es más específica y lleva !important). */
    html.theme-light .qs-btn { color: #334155; background: rgba(15,23,42,0.02); border-bottom-color: rgba(15,23,42,0.08); }
    html.theme-light .qs-btn:active { background: rgba(15,23,42,0.06); }
    .qs-modal { position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,0.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
    .qs-card { width:100%; max-width:440px; max-height:85vh; overflow-y:auto; background:#15161a; border:1px solid rgba(255,255,255,0.1); border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,0.55); animation:qsIn .25s ease; }
    @keyframes qsIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
    .qs-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; background:#15161a; }
    .qs-head h3 { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; color:#fff; margin:0; }
    .qs-head h3 i { color: var(--nav-icono, var(--accent)); }
    .qs-x { background:transparent; border:0; color:rgba(255,255,255,0.6); font-size:18px; cursor:pointer; padding:4px; line-height:1; }
    .qs-x:active { color:#fff; }
    .qs-body { padding:18px; font-size:14px; line-height:1.6; color:rgba(229,231,235,0.86); white-space:pre-wrap; word-break:break-word; }

    /* Antes de tu primera clase: lista con check, no vinetas. Cada punto es
       algo que la alumna tiene que HACER antes de llegar. */
    .pv-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
    .pv-lista li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.55; }
    .pv-lista li::before { content:'✓'; flex-shrink:0; margin-top:1px; font-weight:900; color:var(--accent,#34d399); }
    .pv-cierre { margin:16px 0 0; font-size:14px; font-weight:800; text-align:center; }
    .pv-ok {
      width:100%; margin-top:16px; padding:13px 16px; border:0; border-radius:14px; cursor:pointer;
      font-size:14px; font-weight:800; background:var(--accent,#34d399); color:var(--button-text,#0a0a0d);
    }
    .pv-ok:active { transform:scale(0.985); }

    /* En un local CLARO la tarjeta nace oscura (#15161a) y el texto se pierde.
       Se aclara aca y no por tenant: le sirve a cualquiera de tema claro. */
    html.theme-light .qs-card { background:#FFFFFF; border-color:#E5E7EB; }
    html.theme-light .qs-head { background:#FFFFFF; border-bottom-color:#E5E7EB; }
    html.theme-light .qs-head h3 { color:#111827; }
    html.theme-light .qs-x { color:#6B7280; }
    html.theme-light .qs-body { color:#374151; }
    html.theme-light .pv-cierre { color:#111827; }

    /* ── BRZ ACADEMY ────────────────────────────────────────────────────────
       Cuerpo propio y no `.qs-body`, que es texto plano con `pre-wrap`: acá el
       contenido es una declaración de marca, no un párrafo de configuración.
       Todo el color sale de var(--accent) para que siga al tenant y no quede
       un cian pegado a mano el día que la academia la quiera otro local. */
    .brz-aca { padding:18px; }
    .brz-aca-chips { display:flex; gap:8px; margin-bottom:14px; }
    .brz-aca-chips span { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
      font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
      color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
      border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
    .brz-aca-chips i { font-size:12px; }
    .brz-aca-lead { margin:0 0 8px; font-size:19px; line-height:1.25; font-weight:800; color:#fff; letter-spacing:-0.01em; }
    .brz-aca-sub { margin:0; font-size:13.5px; line-height:1.55; color:rgba(229,231,235,0.72); }
    .brz-aca-sep { height:1px; margin:16px 0; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent); }
    .brz-aca-txt { margin:0 0 14px; font-size:13.5px; line-height:1.6; color:rgba(229,231,235,0.86); }
    .brz-aca-txt strong { color:var(--accent); font-weight:700; }
    .brz-aca-quien { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
    .brz-aca-quien > div { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:12px;
      background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
    .brz-aca-quien > div > i { color:var(--accent); font-size:16px; margin-top:1px; flex-shrink:0; }
    .brz-aca-quien b { display:block; font-size:13px; font-weight:700; color:#fff; margin-bottom:2px; }
    .brz-aca-quien span { display:block; font-size:12px; line-height:1.45; color:rgba(229,231,235,0.62); }
    /* El CTA es el ÚNICO bloque sólido del acento en la hoja: si hubiera dos,
       ninguno sería el llamado a la acción. El texto va calculado contra el
       acento, no fijo en blanco — con un acento claro como el #3ED8D8 de BRZ
       el blanco no pasa contraste y el botón queda ilegible. */
    .brz-aca-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px;
      border-radius:12px; font-size:14px; font-weight:800; text-decoration:none;
      background:var(--accent); color:var(--accent-texto, #0b0b0d); }
    .brz-aca-cta:active { filter:brightness(0.92); }
    .brz-aca-cta i { font-size:17px; }

    /* Modal (bottom sheet) con animación simple */
    .yugen-modal {
      display: none; position: fixed; inset: 0; z-index: 120;
      align-items: flex-end; justify-content: center;
      background: rgba(0,0,0,0.6);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      opacity: 0; transition: opacity .28s ease;
    }
    .yugen-modal.open { display: flex; opacity: 1; }
    .yugen-modal-card {
      width: 100%; max-width: 28rem;
      background: #15120e; border: 1px solid rgba(245,243,239,0.12); border-bottom: none;
      border-radius: 20px 20px 0 0;
      padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
      max-height: 85vh; overflow-y: auto;
      transform: translateY(26px); opacity: 0;
      transition: transform .34s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    }
    .yugen-modal.open .yugen-modal-card { transform: translateY(0); opacity: 1; }
    .yugen-modal .ym-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .yugen-modal .ym-head h3 { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 700; color: #f5f3ef; }
    .yugen-modal .ym-head h3 i { font-size: 18px; }
    .yugen-modal-x {
      width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      background: rgba(245,243,239,0.06); border: 1px solid rgba(245,243,239,0.12); color: #b7afa3;
    }
    .yugen-modal-x:hover { color: #f5f3ef; }
    .yugen-modal-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13.5px; }
    .yugen-modal-row:last-child { border-bottom: none; }
    .yugen-modal-row .d { color: #b7afa3; }
    .yugen-modal-row .h { color: #f5f3ef; font-weight: 600; white-space: nowrap; }
    .yugen-modal .ym-addr { color: #f5f3ef; font-size: 14px; line-height: 1.5; }
    .yugen-modal .ym-empty { color: #b7afa3; font-size: 13.5px; }
    /* Mapa dentro del modal propio de Yügen (el estándar tiene el suyo en
       .os-loc-map). Mismo alto para que las dos vistas se sientan iguales. */
    .yugen-modal .ym-map {
      margin-top: 14px; border-radius: 12px; overflow: hidden;
      border: 1px solid rgba(245,243,239,0.14); background: rgba(245,243,239,0.05);
      line-height: 0;
    }
    .yugen-modal .ym-map iframe { display: block; width: 100%; height: 190px; border: 0; }
    .yugen-modal .ym-maps {
      display: block; margin-top: 16px; text-align: center; padding: 12px;
      border-radius: 12px; background: #f5f3ef; color: #0b0a09; font-weight: 700; font-size: 13px;
      text-decoration: none;
    }
    /* Lista de valores */
    .yugen-modal .ym-valor { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .yugen-modal .ym-valor:last-child { border-bottom: none; }
    .yugen-modal .ym-valor-ic {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      border: 1px solid rgba(245,243,239,0.22);
      display: flex; align-items: center; justify-content: center;
      color: #f5f3ef; font-size: 19px;
    }
    .yugen-modal .ym-valor-ic .ym-kanji { color: #c0392b; font-family: 'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif; font-size: 19px; }
    .yugen-modal .ym-valor-n { font-size: 12.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #f5f3ef; margin-bottom: 3px; }
    .yugen-modal .ym-valor-d { font-size: 12.5px; color: #b7afa3; line-height: 1.45; }
    .yugen-modal .ym-pol-intro { font-size: 13px; color: rgba(245,243,239,0.78); line-height: 1.5; margin-bottom: 8px; }
    @media (prefers-reduced-motion: reduce) {
      .tenant-yugen .hero-logo-ring,
      .tenant-yugen #shopNombre,
      .tenant-yugen #shopSlogan,
      .tenant-yugen .yugen-waves { animation: none !important; }
      .yugen-modal, .yugen-modal-card { transition: none !important; }
    }


    /* ══ MISTER MARTÍNEZ — negro, cromo y luz fría ══
       Su marca no tiene color propio: el logo es blanco y negro puro y la
       fachada es negro, cromo y el frío del poste. Todo el color de esta
       pantalla es interfaz, así que se define acá y no se muestrea de nada.
       Decisión del 2026-08-30: naranja de énfasis, burdeos para los fondos
       activos, y fuera el dorado del tema base — que no era de este local
       sino el de Elegance colándose por el CSS común. */
    .tenant-mistermartinez {
      /* El énfasis NO se fija acá: sigue al acento del local, que vive en el
         seed y llega por --accent. Fijarlo a mano fue justo el problema que
         se venía a arreglar — la barra pintada de un color y el resto de la
         agenda de otro, sin que nada los mantuviera de acuerdo. */
      --mm-enfasis:  var(--accent);
      /* Fondo del estado activo. Blanco encima: 10.94:1. */
      --mm-burdeos:  #6b2430;
      /* El negro del velo lleva el frío de la foto, no es negro neutro. */
      --mm-velo:     6, 7, 7;
    }

    /* ── La foto se queda ────────────────────────────────────────────────
       Es la prueba de que la barbería existe, así que no se tapa: se
       ordena. Dos cosas estaban mal. El encuadre dejaba el poste justo
       detrás del título, y el velo del tema base tiene un CLARO en el
       medio (0.40 al 40%) — justo donde va el nombre. Acá el velo sube en
       el centro en vez de bajar, y suma un óvalo suave detrás del texto. */
    .tenant-mistermartinez .booking-hero {
      background-position: 44% 34% !important;
    }
    .tenant-mistermartinez .booking-hero-overlay {
      background:
        linear-gradient(180deg,
          rgba(var(--mm-velo), 0.56) 0%,
          rgba(var(--mm-velo), 0.64) 40%,
          rgba(var(--mm-velo), 0.92) 100%),
        radial-gradient(118% 74% at 50% 66%,
          rgba(var(--mm-velo), 0.60) 0%,
          rgba(var(--mm-velo), 0.00) 74%) !important;
    }

    /* ── Logo: mismo tamaño, más aire ───────────────────────────────────
       No necesita crecer; necesita no ir apretado contra el título. */
    .tenant-mistermartinez .booking-hero > div:has(#heroLogoArea) {
      padding-top: 2.4rem !important;
      padding-bottom: 1.9rem !important;
    }
    .tenant-mistermartinez #heroLogoArea { margin-bottom: 1.7rem !important; }
    /* Aro sobrio: sombra que asienta el logo sobre la foto, sin halo. */
    .tenant-mistermartinez .hero-logo-ring {
      border: 1px solid rgba(255, 255, 255, 0.20) !important;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.60) !important;
    }

    /* ── Nombre en dos niveles ───────────────────────────────────────────
       "Barbería" pasa a antetítulo y "Mister Martínez" se queda con el
       peso. El nombre NO cambia: lo parte _heroNombreEnDosNiveles(), que
       envuelve la primera palabra en un span. Sin ese span esto degrada a
       un h1 normal, que es el comportamiento de siempre. */
    .tenant-mistermartinez #shopNombre {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 0.34rem !important;
      font-size: 2.05rem !important;
      letter-spacing: -0.025em !important;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.82) !important;
    }
    .tenant-mistermartinez #shopNombre .mm-antetitulo {
      font-size: 0.6rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.3em !important;
      text-transform: uppercase !important;
      color: rgba(255, 255, 255, 0.52) !important;
      text-shadow: none !important;
    }

    /* ── Especialidad ───────────────────────────────────────────────────
       Tenía 0.25em de tracking y quedaba lejos del nombre: se leía como
       adorno. Se acerca, se afloja el espaciado y sube un punto de cuerpo.
       Es lo que hace este local, tiene que poder leerse. */
    .tenant-mistermartinez .gold-divider {
      width: 20px !important;
      height: 1px !important;
      background: rgba(255, 255, 255, 0.20) !important;
      margin: 13px auto 9px !important;
    }
    .tenant-mistermartinez .booking-hero p:has(#shopSlogan) {
      font-size: 11px !important;
      letter-spacing: 0.1em !important;
      line-height: 1.4 !important;
      color: rgba(255, 255, 255, 0.80) !important;
    }

    /* ── Navegación: las tres, iguales ──────────────────────────────────
       Ubicación y Horario iban en columnas y "Quiénes somos" ocupaba una
       fila entera abajo, así que parecía de otra sección. El botón entra
       al strip por JS (misma vía que sionbarberia) y acá las tres quedan
       con la misma altura, el mismo peso y el mismo ícono.

       Los íconos seguían clavados a rgba(201,168,76,·) en el CSS común:
       el dorado de Elegance, que le llegaba a TODOS los locales. Acá pasan
       a --accent. Es un defecto de la plataforma y no de estos dos —
       candidato a subir al bloque común el día que se revisen todos. */
    :is(.tenant-mistermartinez, .tenant-viggomhc) .info-strip,
    :is(.tenant-mistermartinez, .tenant-viggomhc) .info-strip[style] {
      background: rgba(10, 11, 11, 0.94) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    :is(.tenant-mistermartinez, .tenant-viggomhc) .info-strip > * {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 0 !important;
      padding: 12px 8px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      color: rgba(229, 231, 235, 0.72) !important;
      background: transparent !important;
      border: 0 !important;
      border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 0 !important;
    }
    :is(.tenant-mistermartinez, .tenant-viggomhc) .info-strip > *:last-child {
      border-right: 0 !important;
    }
    /* El color ya lo pone la regla común de .info-strip i; acá solo el
       cuerpo del ícono, que en estos dos va un punto más chico. */
    :is(.tenant-mistermartinez, .tenant-viggomhc) .info-strip i {
      font-size: 13px !important;
    }
    :is(.tenant-mistermartinez, .tenant-viggomhc) .info-strip > *:hover { color: #ffffff !important; }
    :is(.tenant-mistermartinez, .tenant-viggomhc) .info-strip > *:active {
      background: var(--nav-activo, rgba(255, 255, 255, 0.06)) !important;
      color: #ffffff !important;
    }
    .tenant-mistermartinez { --nav-activo: var(--mm-burdeos); }

    /* ── Sin arcade ─────────────────────────────────────────────────────
       El tema base reparte halos de neón en títulos, bordes y píldoras.
       Acá se apagan: superficie mate, hairline y el color medido en el
       acento, que ya hace el trabajo sin brillar. */
    .tenant-mistermartinez .text-neon,
    .tenant-mistermartinez h2.text-neon { text-shadow: none !important; }
    .tenant-mistermartinez .bg-neon { box-shadow: none !important; }

    /* ── Móvil: el hero cabe en una mirada ──────────────────────────────
       Objetivo 190-240 px: logo, nombre y navegación sin scroll. El
       encuadre se corre un poco a la derecha para que el poste siga
       visible al recortar, pero fuera del texto. */
    @media (max-width: 640px) {
      /* El header trae min-height:300px inline y es lo que manda: sin pisarlo
         el hero no baja aunque el contenido ocupe menos. Con 190 el contenido
         queda al mando y aterriza en ~205, dentro del rango pedido. */
      .tenant-mistermartinez .booking-hero { min-height: 190px !important; }
      .tenant-mistermartinez .booking-hero { background-position: 47% 34% !important; }
      .tenant-mistermartinez .booking-hero > div:has(#heroLogoArea) {
        padding-top: 1.5rem !important;
        padding-bottom: 1.15rem !important;
      }
      .tenant-mistermartinez #heroLogoArea { margin-bottom: 0.95rem !important; }
      .tenant-mistermartinez .hero-logo-ring {
        width: 74px !important;
        height: 74px !important;
      }
      .tenant-mistermartinez #shopNombre { font-size: 1.55rem !important; gap: 0.26rem !important; }
      .tenant-mistermartinez #shopNombre .mm-antetitulo { font-size: 0.55rem !important; }
      .tenant-mistermartinez .gold-divider { margin: 10px auto 7px !important; }
    }


    /* ══ VIGGO MEN'S HAIR CLUB — verde de marca, sin neón ══
       Acá el acento SÍ está fundado: el verde vive en el logo, en los dos
       filetes que enmarcan "MEN'S HAIR CLUB". Lo que sobraba era el halo.
       El logo es una serif fina y elegante; el tema base lo rodeaba de
       resplandores verdes que lo hacían parecer una pantalla de arcade.
       Se apagan los halos y el verde queda como color, no como luz. */
    .tenant-viggomhc .text-neon,
    .tenant-viggomhc h2.text-neon { text-shadow: none !important; }
    .tenant-viggomhc .bg-neon { box-shadow: none !important; }
    .tenant-viggomhc .hero-logo-ring {
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.60) !important;
    }

    /* El fondo es un panel de marca, no una foto: el velo del tema base
       —pensado para oscurecer una fotografía— solo lo ensuciaba. Se deja
       apenas un asentado abajo, para que el strip no flote. */
    .tenant-viggomhc .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(6, 8, 6, 0.00) 0%,
        rgba(6, 8, 6, 0.10) 55%,
        rgba(6, 8, 6, 0.60) 100%) !important;
    }

    /* Aire alrededor del logo y especialidad más cerca del nombre, con el
       tracking aflojado: mismo criterio que en Mister Martínez. */
    .tenant-viggomhc .booking-hero > div:has(#heroLogoArea) {
      padding-top: 2.4rem !important;
      padding-bottom: 1.9rem !important;
    }
    .tenant-viggomhc #heroLogoArea { margin-bottom: 1.6rem !important; }
    .tenant-viggomhc .gold-divider {
      width: 20px !important;
      height: 1px !important;
      background: rgba(255, 255, 255, 0.20) !important;
      margin: 13px auto 9px !important;
    }
    .tenant-viggomhc .booking-hero p:has(#shopSlogan) {
      font-size: 11px !important;
      letter-spacing: 0.1em !important;
      line-height: 1.4 !important;
      color: rgba(255, 255, 255, 0.80) !important;
    }
    .tenant-viggomhc #shopNombre {
      font-size: 1.95rem !important;
      letter-spacing: -0.02em !important;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.82) !important;
    }

    @media (max-width: 640px) {
      .tenant-viggomhc .booking-hero { min-height: 190px !important; }
      .tenant-viggomhc .booking-hero > div:has(#heroLogoArea) {
        padding-top: 1.5rem !important;
        padding-bottom: 1.15rem !important;
      }
      .tenant-viggomhc #heroLogoArea { margin-bottom: 0.95rem !important; }
      .tenant-viggomhc .hero-logo-ring { width: 74px !important; height: 74px !important; }
      .tenant-viggomhc #shopNombre { font-size: 1.5rem !important; }
      .tenant-viggomhc .gold-divider { margin: 10px auto 7px !important; }
    }


    /* ══ VIGGO — salón de diseño masculino, no barbería ══
       Su sitio (viggomhc.cl) NO usa verde en ninguna parte: es grafito
       #0d0d0d, superficie #141414, tipografía en hueso cálido #f5f0e8 y
       secundarios #9a9590. El verde vive solo en el logo, en los dos filetes
       de "MEN'S HAIR CLUB".

       Así que el verde se reserva para lo funcional —progreso, seleccionado,
       el CTA— y el hueso carga la tipografía. Es lo que pidió Ignacio
       (menos neón) llevado hasta donde llega la marca de verdad. */
    .tenant-viggomhc {
      --vg-grafito:  #0d0d0d;
      --vg-carbon:   #141414;
      --vg-superficie: #1a1a1a;
      --vg-hueso:    #f5f0e8;
      --vg-gris:     #9a9590;
      --vg-tenue:    #5c5750;
      --vg-linea:    rgba(245, 240, 232, 0.10);
      /* Azul de marca, muestreado del banner (interior real del local):
         el tono más presente era #424e9f, ajustado en luz hasta cruzar
         3:1 sobre el grafito — mismo criterio que derivarTema() usa para
         colorMuted, no un número elegido. Reemplaza el verde del logo,
         que solo el logo conserva: acá era interfaz, no la marca. */
      --vg-verde:    #4f5cb6;
      --nav-activo:  rgba(245, 240, 232, 0.07);

      /* ── Tipografía ──────────────────────────────────────────────────
         Tres roles y ninguna serif: el logo ya la aporta y una segunda
         competiría con él. Condensada para lo que titula, Sans para lo que
         se lee, Mono para lo que se mide. */
      --vg-titulo: 'IBM Plex Sans Condensed', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
      --vg-cuerpo: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
      --vg-dato:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    }

    /* Cuerpo: lo que se lee corrido, los botones y el contenido general. */
    .tenant-viggomhc body,
    .tenant-viggomhc .svc-desc,
    .tenant-viggomhc .svc-desc-toggle,
    .tenant-viggomhc .vg-cf-d,
    .tenant-viggomhc input,
    .tenant-viggomhc #btnContinue {
      font-family: var(--vg-cuerpo) !important;
    }

    /* Títulos, encabezados y etiquetas que mandan. Semibold o bold, nunca
       más liviano: condensada floja se lee endeble. */
    .tenant-viggomhc #shopNombre,
    .tenant-viggomhc #shopSlogan,
    .tenant-viggomhc h2,
    .tenant-viggomhc .cat-title,
    .tenant-viggomhc .svc-name,
    .tenant-viggomhc .vg-cf-titulo,
    .tenant-viggomhc .vg-cf-t,
    .tenant-viggomhc #categoryPills button {
      font-family: var(--vg-titulo) !important;
      font-weight: 600 !important;
    }
    .tenant-viggomhc #shopNombre { font-weight: 700 !important; }

    /* Datos: precio, duración, porcentaje y la numeración de los pasos.
       tabular-nums para que las cifras no bailen entre tarjetas. */
    .tenant-viggomhc .price-tag,
    .tenant-viggomhc .duration-tag,
    .tenant-viggomhc #progressPercentage,
    .tenant-viggomhc .vg-cf-n {
      font-family: var(--vg-dato) !important;
      /* 500 y no el 700 que traían de Tailwind: del Mono solo se cargan 400 y
         500, así que un 700 lo FALSIFICA el navegador —engorda los trazos y
         arruina justo la precisión que esta familia aporta—. Medido: pedían
         700 y ninguna cara de ese peso existía. */
      font-weight: 500 !important;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }
    /* Mismo caso: el botón pedía 900 de una familia cargada hasta 600. */
    .tenant-viggomhc #btnContinue { font-weight: 600 !important; }

    /* El fondo de la página trae un radial del acento al 9% que baña TODA la
       pantalla — es de donde sale la sensación de arcade que había que
       sacar. Acá el grafito va limpio y el verde queda solo en lo funcional. */
    .tenant-viggomhc body {
      background-color: var(--vg-grafito) !important;
      background-image: none !important;
    }

    /* ── Hero ───────────────────────────────────────────────────────────
       Compacto, con la propuesta de valor del sitio. El orden que tiene que
       leerse: logo, nombre, especialidad, propuesta. */
    .tenant-viggomhc .booking-hero {
      background-color: var(--vg-grafito) !important;
    }
    /* El panel de marca del hero es un halo verde. Se apaga casi del todo:
       queda un rastro del color en vez de una pantalla encendida. */
    .tenant-viggomhc .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(13, 13, 13, 0.62) 0%,
        rgba(13, 13, 13, 0.70) 55%,
        rgba(13, 13, 13, 0.92) 100%) !important;
    }
    .tenant-viggomhc .booking-hero > div:has(#heroLogoArea) {
      padding-top: 2.2rem !important;
      padding-bottom: 1.6rem !important;
    }
    .tenant-viggomhc #heroLogoArea { margin-bottom: 1.4rem !important; }
    .tenant-viggomhc .hero-logo-ring {
      border: 1px solid var(--vg-linea) !important;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65) !important;
    }
    .tenant-viggomhc #shopNombre {
      font-size: 1.9rem !important;
      letter-spacing: -0.025em !important;
      color: var(--vg-hueso) !important;
      text-shadow: none !important;
    }
    .tenant-viggomhc .gold-divider { display: none !important; }
    .tenant-viggomhc .booking-hero p:has(#shopSlogan) {
      font-size: 10px !important;
      letter-spacing: 0.22em !important;
      color: var(--vg-gris) !important;
      margin-top: 0.55rem !important;
    }

    /* ── Cómo funciona ──────────────────────────────────────────────────
       Compacta a propósito: explica por qué esto no es un corte, sin
       estorbar la reserva. Tres pasos, una línea cada uno. */
    #viggoComoFunciona { display: none; }
    /* Sin caja: era un borde más en una pantalla que ya tenía demasiados.
       Queda la superficie sola, y más apretada — explica sin empujar los
       servicios fuera de la primera pantalla. */
    .tenant-viggomhc #viggoComoFunciona {
      display: block;
      margin: -4px 0 14px;
      padding: 11px 13px;
      background: var(--vg-carbon);
      border: 0;
      border-radius: 12px;
    }
    .tenant-viggomhc .vg-cf-titulo {
      margin: 0 0 8px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--vg-gris);
    }
    .tenant-viggomhc .vg-cf-pasos {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 7px;
    }
    .tenant-viggomhc .vg-cf-pasos li {
      display: grid;
      grid-template-columns: 1.6rem 1fr;
      grid-template-rows: auto auto;
      column-gap: 10px;
      align-items: baseline;
    }
    .tenant-viggomhc .vg-cf-n {
      grid-row: 1 / 3;
      font-size: 11px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--vg-verde);
    }
    .tenant-viggomhc .vg-cf-t {
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--vg-hueso);
    }
    .tenant-viggomhc .vg-cf-d {
      font-size: 11px;
      line-height: 1.35;
      color: var(--vg-gris);
    }

    /* ══ VIGGO-SCAN · inicio ══════════════════════════════════════════════
       Escaneo facial técnico: el contorno se dibuja, aparecen los tercios y
       los puntos de referencia, y una línea verde recorre una vez. Sin
       partículas ni resplandor: la lectura es de instrumento, no de juego.
       Dura 3,4 s, corre UNA vez al entrar en pantalla y no vuelve.
       Se saca borrando los tres bloques rotulados VIGGO-SCAN. */
    /* El escaneo va al costado de los pasos y no encima: centrado subía la
       caja de 152 a 216 px en móvil y dejaba el primer servicio justo en el
       pliegue. Acá no cuesta alto — ocupa el aire que las tres líneas dejan
       a la derecha. */
    .tenant-viggomhc #viggoComoFunciona {
      display: grid;
      grid-template-columns: 1fr auto;
      column-gap: 14px;
      align-items: start;
    }
    .tenant-viggomhc .vg-cf-titulo,
    .tenant-viggomhc .vg-cf-pasos { grid-column: 1; }
    .tenant-viggomhc #vgScan {
      grid-column: 2;
      grid-row: 1 / 3;
      width: 62px;
      height: 75px;
      overflow: visible;
      align-self: center;
    }
    .tenant-viggomhc #vgScan .vg-s-cara {
      fill: none;
      stroke: rgba(245, 240, 232, 0.30);
      stroke-width: 1.1;
      stroke-dasharray: 260;
      stroke-dashoffset: 260;
    }
    .tenant-viggomhc #vgScan .vg-s-linea,
    .tenant-viggomhc #vgScan .vg-s-eje {
      stroke: rgba(245, 240, 232, 0.16);
      stroke-width: 0.7;
      opacity: 0;
    }
    .tenant-viggomhc #vgScan .vg-s-pt {
      fill: var(--vg-verde);
      opacity: 0;
    }
    .tenant-viggomhc #vgScan .vg-s-barrido {
      stroke: var(--vg-verde);
      stroke-width: 1;
      opacity: 0;
    }

    /* Solo al entrar en pantalla: la clase la pone el observer. */
    .tenant-viggomhc #vgScan.vg-activo .vg-s-cara {
      animation: vgTrazo 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-barrido {
      animation: vgBarrido 1.6s cubic-bezier(0.5, 0, 0.5, 1) 0.5s forwards;
    }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-linea { animation: vgAparece 0.6s ease forwards; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-linea:nth-of-type(1) { animation-delay: 0.9s; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-linea:nth-of-type(2) { animation-delay: 1.15s; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-linea:nth-of-type(3) { animation-delay: 1.4s; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-eje { animation: vgAparece 0.7s ease 1.6s forwards; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-pt { animation: vgPunto 0.5s ease forwards; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-pt:nth-of-type(1) { animation-delay: 1.75s; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-pt:nth-of-type(2) { animation-delay: 1.95s; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-pt:nth-of-type(3) { animation-delay: 2.15s; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-pt:nth-of-type(4) { animation-delay: 2.35s; }
    .tenant-viggomhc #vgScan.vg-activo .vg-s-pt:nth-of-type(5) { animation-delay: 2.55s; }

    @keyframes vgTrazo   { to { stroke-dashoffset: 0; } }
    @keyframes vgAparece { to { opacity: 1; } }
    @keyframes vgPunto   { from { opacity: 0; } to { opacity: 0.95; } }
    @keyframes vgBarrido {
      0%   { opacity: 0;    transform: translateY(6px); }
      12%  { opacity: 0.85; }
      88%  { opacity: 0.85; }
      100% { opacity: 0;    transform: translateY(104px); }
    }

    /* Sin movimiento: se muestra el estado FINAL, que es el que informa. */
    @media (prefers-reduced-motion: reduce) {
      .tenant-viggomhc #vgScan * { animation: none !important; }
      .tenant-viggomhc #vgScan .vg-s-cara { stroke-dashoffset: 0; }
      .tenant-viggomhc #vgScan .vg-s-linea,
      .tenant-viggomhc #vgScan .vg-s-eje { opacity: 1; }
      .tenant-viggomhc #vgScan .vg-s-pt { opacity: 0.95; }
      .tenant-viggomhc #vgScan .vg-s-barrido { opacity: 0; }
    }

    @media (max-width: 640px) {
      .tenant-viggomhc #vgScan { width: 50px; height: 60px; }
    }
    /* ══ VIGGO-SCAN · fin ══ */

    /* ── Menos arcade ───────────────────────────────────────────────────
       El tema base reparte halos; acá la jerarquía la hace el peso
       tipográfico y la superficie, no el brillo. */
    .tenant-viggomhc .text-neon,
    .tenant-viggomhc h2.text-neon {
      color: var(--vg-hueso) !important;
      text-shadow: none !important;
    }
    /* Sin título en el paso 1: "Cómo funciona VIGGO" abre la sección y
       encabezarla dos veces solo restaba espacio. */
    .tenant-viggomhc #step1 h2 { display: none !important; }
    .tenant-viggomhc .bg-neon { box-shadow: none !important; }
    .tenant-viggomhc .service-option {
      background: var(--vg-carbon) !important;
      border-color: var(--vg-linea) !important;
      box-shadow: none !important;
    }

    /* ── Menos líneas ───────────────────────────────────────────────────
       Había borde en el marco, la navegación, el progreso, la caja
       informativa, el buscador, las categorías y el botón. El marco traía
       además un verde al 15% que encerraba la pantalla entera y la hacía
       leer como una tarjeta gigante. Se deja hairline neutro y se quitan
       los bordes que no separaban nada. */
    .tenant-viggomhc #bookingFrame {
      border-color: rgba(245, 240, 232, 0.055) !important;
    }
    .tenant-viggomhc .info-strip,
    .tenant-viggomhc .info-strip[style] {
      border-bottom: 0 !important;
    }
    .tenant-viggomhc #serviceSearch,
    .tenant-viggomhc input[type="search"],
    .tenant-viggomhc input[type="text"] {
      border-color: transparent !important;
      background: var(--vg-carbon) !important;
    }
    .tenant-viggomhc .cat-title {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    /* Categorías: eran 14 px con 24 px de aire lateral y las etiquetas de
       este local son largas —"VIGGO Visagismo IA System / Servicios de
       corte"—. Cuerpo un punto menor, más alto de línea y más separación
       entre píldoras: dejan de verse apretadas sin achicar el área táctil. */
    .tenant-viggomhc #categoryPills button {
      font-size: 12.5px !important;
      line-height: 1.25 !important;
      padding: 11px 18px !important;
      min-height: 46px !important;
      border-color: var(--vg-linea) !important;
      background: var(--vg-carbon) !important;
    }
    /* La activa se marca con el verde en el borde y el texto, no con un
       relleno saturado: en una fila de etiquetas largas el bloque de color
       era lo único que se veía. */
    .tenant-viggomhc #categoryPills button.active,
    .tenant-viggomhc #categoryPills button[aria-selected="true"] {
      border-color: var(--vg-verde) !important;
      color: var(--vg-hueso) !important;
    }
    .tenant-viggomhc #categoryPills { gap: 10px !important; }
    .tenant-viggomhc .cat-title,
    .tenant-viggomhc .svc-name { color: var(--vg-hueso) !important; }

    /* Seleccionado: evidente sin gritar — borde verde, superficie un punto
       más clara y el radio relleno. */
    .tenant-viggomhc .service-option.selected,
    .tenant-viggomhc .service-option[aria-pressed="true"] {
      background: var(--vg-superficie) !important;
      border-color: var(--vg-verde) !important;
      box-shadow: inset 0 0 0 1px var(--vg-verde) !important;
    }

    /* Progreso: riel fino y hueso, con el verde solo en el avance. */
    .tenant-viggomhc #progressBar { background: var(--vg-verde) !important; }

    /* La barra tapaba contenido pegada al borde. Se le da aire arriba con
       un degradado que la despega del scroll, sombra propia, y el botón
       baja de 60 a 54 px — sigue siendo área táctil de sobra. */
    .tenant-viggomhc #btnContinueBar {
      background: linear-gradient(180deg,
        rgba(13, 13, 13, 0.00) 0%,
        rgba(13, 13, 13, 0.86) 38%,
        rgba(13, 13, 13, 0.97) 100%) !important;
      padding-top: 10px !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .tenant-viggomhc #btnContinue {
      padding-top: 13px !important;
      padding-bottom: 13px !important;
      border-radius: 14px !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
    }

    /* Áreas táctiles cómodas en móvil. */
    @media (max-width: 640px) {
      .tenant-viggomhc .booking-hero { min-height: 200px !important; }
      .tenant-viggomhc .booking-hero > div:has(#heroLogoArea) {
        padding-top: 1.4rem !important;
        padding-bottom: 1.1rem !important;
      }
      .tenant-viggomhc #heroLogoArea { margin-bottom: 0.85rem !important; }
      .tenant-viggomhc .hero-logo-ring { width: 66px !important; height: 66px !important; }
      .tenant-viggomhc #shopNombre { font-size: 1.4rem !important; }
      .tenant-viggomhc .service-option { min-height: 64px !important; }
      /* En el teléfono la caja se cerraba en 182 px y empujaba los servicios
         fuera de la primera pantalla. Acá los pasos van en una línea cada
         uno, con la explicación debajo solo del primero. */
      .tenant-viggomhc #viggoComoFunciona { padding: 10px 12px; margin-bottom: 12px; }
      .tenant-viggomhc .vg-cf-pasos { gap: 5px; }
      .tenant-viggomhc .vg-cf-t { font-size: 12px; }
      .tenant-viggomhc .vg-cf-d { font-size: 10.5px; }
      .tenant-viggomhc #step1 h2 { font-size: 1.18rem !important; margin-bottom: 0.9rem !important; }
    }

    /* ── Viggo: sin dorados en ningún paso (pedido de Ignacio 02-10-2026) ──
       Cuatro piezas comunes traen el dorado de Elegance cableado inline:
       la ficha de ubicación y horario (paso 1), el aro de la foto del
       profesional (paso 2), las "Horas recomendadas" (paso 3) y los
       productos del paso 4. Se repasan acá con la paleta de Viggo —azul de
       marca, hueso y grafito—, por CSS y acotado al local: la lógica común
       no se toca. El `!important` de hoja le gana al `style` inline que
       ponen los manejadores (hover, elegido), sin tener que editarlos. */

    /* Paso 1 · Ubicación y horario: caja del ícono y rótulo. */
    .tenant-viggomhc [style*="background:rgba(201,168,76"] {
      background: rgba(79, 92, 182, 0.12) !important;
      border-color: rgba(79, 92, 182, 0.30) !important;
    }
    .tenant-viggomhc [style*="color:rgba(201,168,76"] { color: var(--vg-gris) !important; }

    /* Paso 2 · El aro crema de la foto de cada profesional. */
    .tenant-viggomhc [class*="border-[#F9E7B3]"] {
      border-color: var(--vg-linea) !important;
      box-shadow: none !important;
    }

    /* Paso 3 · Horas recomendadas: superficie de Viggo, título en hueso,
       el rayo y las horas en azul. Elegida = azul sólido. */
    .tenant-viggomhc #smartSlotsContainer > div {
      background: var(--vg-carbon) !important;
      border-color: var(--vg-linea) !important;
      box-shadow: none !important;
    }
    .tenant-viggomhc #smartSlotsContainer > div > div[style*="radial-gradient"] { display: none !important; }
    .tenant-viggomhc #smartSlotsContainer p:first-of-type {
      background: none !important;
      -webkit-text-fill-color: var(--vg-hueso) !important;
      color: var(--vg-hueso) !important;
    }
    .tenant-viggomhc #smartSlotsContainer p:first-of-type i {
      -webkit-text-fill-color: var(--vg-verde) !important;
      color: var(--vg-verde) !important;
      filter: none !important;
      animation: none !important;
    }
    .tenant-viggomhc #smartSlotsContainer p:not(:first-of-type) { color: var(--vg-gris) !important; }
    .tenant-viggomhc #smartSlotsContainer .smart-slot-pill {
      background: transparent !important;
      border-color: rgba(79, 92, 182, 0.45) !important;
      color: var(--vg-hueso) !important;
      box-shadow: none !important;
      font-family: var(--vg-dato) !important;
      font-weight: 500 !important;
      font-variant-numeric: tabular-nums;
    }
    .tenant-viggomhc #smartSlotsContainer .smart-slot-pill[data-active="1"] {
      background: var(--vg-verde) !important;
      border-color: var(--vg-verde) !important;
      color: #ffffff !important;
    }

    /* Paso 4 · Productos sugeridos: título, precio y "+ Añadir" (y su
       estado "✓ Añadido", que el código pinta inline con el dorado). */
    .tenant-viggomhc #step4XSell p[style*="D4AF37"] { color: var(--vg-hueso) !important; }
    .tenant-viggomhc #step4XSell .flex > div { background: var(--vg-carbon) !important; border-color: var(--vg-linea) !important; }
    .tenant-viggomhc #step4XSell .xsell-btn {
      background: transparent !important;
      border-color: rgba(79, 92, 182, 0.55) !important;
      color: var(--vg-hueso) !important;
    }
    .tenant-viggomhc #step4XSell .xsell-btn[style*="212, 175, 55"] {
      background: var(--vg-verde) !important;
      border-color: var(--vg-verde) !important;
      color: #ffffff !important;
    }
    @media (hover: hover) {
      .tenant-viggomhc #step4XSell .xsell-btn:hover { background: rgba(79, 92, 182, 0.18) !important; }
    }
    .tenant-viggomhc #step4XSell [style*="rgba(212,175,55"] { border-color: rgba(79, 92, 182, 0.45) !important; }
    .tenant-viggomhc #step4XSell [style*="color:#D4AF37"] { color: var(--vg-verde) !important; }

    /* Aviso flotante (showToast → _toastSobrio): tarjeta hueso sobre el
       grafito —se ve al instante sin brillar—, ícono de la marca en vez del
       emoji y el texto a la izquierda como una nota, no como un banner. */
    .tenant-viggomhc #toastValidation.tst {
      display: flex !important;
      align-items: flex-start;
      gap: 12px;
      max-width: 360px !important;
      padding: 12px 16px 12px 12px !important;
      border-radius: 14px !important;
      background: var(--vg-hueso) !important;
      border: 0 !important;
      color: var(--vg-grafito) !important;
      text-align: left !important;
      font-family: var(--vg-cuerpo) !important;
      box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
      backdrop-filter: none !important;
    }
    .tenant-viggomhc #toastValidation.tst.hidden { display: none !important; }
    .tenant-viggomhc #toastValidation .tst-ic {
      flex-shrink: 0;
      width: 26px; height: 26px;
      border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px;
      color: #ffffff;
      background: var(--vg-verde);
      margin-top: 1px;
    }
    .tenant-viggomhc #toastValidation.tst-err .tst-ic { background: #b42318; }
    .tenant-viggomhc #toastValidation .tst-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .tenant-viggomhc #toastValidation .tst-tx b {
      font-size: 13.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em;
    }
    .tenant-viggomhc #toastValidation .tst-tx span {
      font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--vg-tenue);
    }


    /* ══ STIVEN BARBER — el letrero de neón es la marca ═══════════════════
       Su identidad es monocroma: el monograma SB en una serif de alto
       contraste, y el letrero de neón blanco sobre el ladrillo gris azulado
       de su local (la foto del banner, que es la real). Nada de dorado ni de
       acento de color: la jerarquía la hace la luz blanca y la tipografía.

       Tres decisiones:
         · El hero muestra el NEÓN de verdad, encuadrado y encendiéndose al
           entrar. Reemplaza al logo redondo, que se pisaba con el letrero.
         · Bodoni Moda (ya cargada en el <head>) para lo que titula: es la
           familia del monograma SB. Inter para lo que se lee.
         · El blanco "enciende" lo elegido: categoría activa, servicio,
           profesional y hora, con el mismo halo frío del letrero.

       Todo cuelga de html.tenant-selfservice.tenant-stivenbarber (0,2,1),
       que le gana a la plantilla html.tenant-selfservice (0,1,1). Se saca
       borrando este bloque entero; no hay JS asociado. */
    html.tenant-stivenbarber {
      --sb-negro:   #070708;
      --sb-carbon:  #0e0f11;
      --sb-grafito: #15161a;
      --sb-borde:   rgba(226, 232, 255, 0.08);
      --sb-borde-2: rgba(226, 232, 255, 0.16);
      --sb-neon:    #f5f7ff;
      --sb-halo:    rgba(225, 233, 255, 0.55);
      --sb-gris:    #9b9ea8;
      --sb-tenue:   #6c6f79;
      /* El gris azulado del muro de ladrillo, muestreado del banner. Solo
         tiñe superficies, nunca texto. */
      --sb-muro-r: 108; --sb-muro-g: 114; --sb-muro-b: 132;
      --sb-serif: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
      --sb-sans:  'Inter', ui-sans-serif, system-ui, sans-serif;
      background-color: var(--sb-negro);
      /* El acento del local (#e8e6e1, blanco CÁLIDO) lo escribe config.js
         inline en <html>. A baja opacidad sobre negro ese cálido se lee
         beige —el aro de "Sin preferencia", los bordes de las tarjetas del
         club, los íconos—, y todo lo de la plataforma que "usa el color del
         local" en los pasos 1 a 4 sale de estas variables. Se fija al
         blanco frío del neón; el !important de hoja le gana al inline sin
         !important, así que config.js sigue igual. */
      --accent:     #f5f7ff !important;
      --accent-r:   245 !important;
      --accent-g:   247 !important;
      --accent-b:   255 !important;
      --neon-clr:   #f5f7ff !important;
      --neon-r:     245 !important;
      --neon-g:     247 !important;
      --neon-b:     255 !important;
      /* El aviso de cookies (js/legal-widgets.js) trae su propio morado. */
      --sptl-acento:       #f5f7ff;
      --sptl-acento-tinta: #050505;
    }
    html.tenant-selfservice.tenant-stivenbarber body {
      background-color: var(--sb-negro) !important;
      background-image: none !important;
      font-family: var(--sb-sans);
    }

    /* ── Hero: el neón ──────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber .booking-hero,
    html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom {
      /* La foto pasa a su propia capa (#heroSliderBg) para poder encenderla
         sin encender también el texto. */
      background-image: none !important;
      background-color: var(--sb-negro) !important;
      min-height: 468px !important;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
    }
    html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg {
      background-image: var(--hero-banner);
      background-repeat: no-repeat;
      /* Encuadre sobre el letrero, que está al 73,3 % del ancho y al 37 % del
         alto de la foto. Medidas FIJAS y no porcentajes: con % el letrero se
         corre según el ancho del marco. Con la foto a 1000 px el centro del
         neón cae en x = 733 px, así que el borde izquierdo va a
         W/2 − 733 = calc(50% − 233px) (el % de background-position se aplica
         sobre W − 1000). Queda de ~300 px de ancho y cubre hasta 360 px. */
      background-size: 1000px auto;
      background-position: calc(50% - 233px) -150px;
      filter: saturate(0.72) contrast(1.06);
      animation: sbEncendido 2.1s steps(1, end) 0.15s both;
    }
    /* El halo del letrero: una luz que respira sobre el neón, muy lenta. */
    html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(40% 24% at 50% 32%,
        rgba(235, 240, 255, 0.22), rgba(235, 240, 255, 0.06) 55%, transparent 75%);
      mix-blend-mode: screen;
      opacity: 0;
      animation: sbHalo 5.5s ease-in-out 2.3s infinite;
    }
    @keyframes sbEncendido {
      0%   { filter: saturate(0.72) contrast(1.06) brightness(0.16); }
      12%  { filter: saturate(0.72) contrast(1.06) brightness(0.75); }
      16%  { filter: saturate(0.72) contrast(1.06) brightness(0.22); }
      24%  { filter: saturate(0.72) contrast(1.06) brightness(0.95); }
      28%  { filter: saturate(0.72) contrast(1.06) brightness(0.40); }
      36%  { filter: saturate(0.72) contrast(1.06) brightness(1); }
      100% { filter: saturate(0.72) contrast(1.06) brightness(1); }
    }
    @keyframes sbHalo {
      0%, 100% { opacity: 0.55; }
      50%      { opacity: 1; }
    }
    /* Velo: casi limpio arriba (el neón tiene que brillar), y cerrando a
       negro abajo para que el nombre se lea y el hero se funda con la página. */
    html.tenant-selfservice.tenant-stivenbarber .booking-hero-overlay {
      background:
        linear-gradient(180deg,
          rgba(7, 7, 8, 0.45) 0%,
          rgba(7, 7, 8, 0.05) 18%,
          rgba(7, 7, 8, 0.00) 42%,
          rgba(7, 7, 8, 0.72) 68%,
          rgba(7, 7, 8, 0.97) 88%,
          var(--sb-negro) 100%) !important;
    }
    /* Decorados de otros temas que viven en el mismo <header>. */
    html.tenant-selfservice.tenant-stivenbarber .booking-hero :is(.yugen-waves, .lc-decor, .cg-brillos) {
      display: none !important;
    }
    /* El logo redondo se va: el letrero ES el logo, y se pisaban. */
    html.tenant-selfservice.tenant-stivenbarber #heroLogoArea { display: none !important; }

    html.tenant-selfservice.tenant-stivenbarber .booking-hero > div:has(#shopNombre) {
      padding: 0 1.5rem 2.6rem !important;
    }
    /* Antetítulo: dato de su propia bio de Instagram. */
    html.tenant-selfservice.tenant-stivenbarber .booking-hero > div:has(#shopNombre)::before {
      content: 'Barbería \00B7  San Bernardo';
      display: block;
      margin-bottom: 0.85rem;
      font-family: var(--sb-sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: rgba(245, 247, 255, 0.62);
    }
    html.tenant-selfservice.tenant-stivenbarber #shopNombre {
      font-family: var(--sb-serif) !important;
      font-weight: 800 !important;
      font-size: 2.9rem !important;
      line-height: 0.95 !important;
      letter-spacing: -0.015em !important;
      color: var(--sb-neon) !important;
      text-shadow:
        0 0 1px rgba(255, 255, 255, 0.55),
        0 0 22px rgba(225, 233, 255, 0.28),
        0 2px 18px rgba(0, 0, 0, 0.85) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .gold-divider {
      width: 44px !important;
      height: 1px !important;
      margin: 16px auto 12px !important;
      background: linear-gradient(90deg, transparent, rgba(245, 247, 255, 0.75), transparent) !important;
      box-shadow: 0 0 8px var(--sb-halo);
    }
    html.tenant-selfservice.tenant-stivenbarber .booking-hero p:has(#shopSlogan) {
      font-family: var(--sb-sans) !important;
      font-size: 10px !important;
      font-weight: 500 !important;
      letter-spacing: 0.26em !important;
      color: rgba(245, 247, 255, 0.55) !important;
    }
    /* Botón volver: vidrio, a juego. */
    html.tenant-selfservice.tenant-stivenbarber .booking-hero > button.fixed {
      background: rgba(10, 10, 12, 0.45) !important;
      border-color: rgba(245, 247, 255, 0.16) !important;
    }

    /* ── Franja de datos y accesos ─────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber .info-strip,
    html.tenant-selfservice.tenant-stivenbarber .info-strip[style] {
      background: transparent !important;
      border-top: 1px solid var(--sb-borde) !important;
      border-bottom: 1px solid var(--sb-borde) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .info-strip > * + * {
      border-left: 1px solid var(--sb-borde) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .info-strip :is(a, button),
    html.tenant-selfservice.tenant-stivenbarber .qs-btn {
      font-family: var(--sb-sans) !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.16em !important;
      text-transform: uppercase;
      color: rgba(245, 247, 255, 0.78) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .info-strip i,
    html.tenant-selfservice.tenant-stivenbarber .qs-btn i { color: var(--sb-neon) !important; }
    html.tenant-selfservice.tenant-stivenbarber .qs-btn {
      background: transparent !important;
      border-bottom: 1px solid var(--sb-borde) !important;
      padding: 15px !important;
      transition: background .2s ease, color .2s ease;
    }
    @media (hover: hover) {
      html.tenant-selfservice.tenant-stivenbarber .qs-btn:hover,
      html.tenant-selfservice.tenant-stivenbarber .info-strip :is(a, button):hover {
        background: rgba(var(--sb-muro-r), var(--sb-muro-g), var(--sb-muro-b), 0.10) !important;
        color: var(--sb-neon) !important;
      }
    }
    html.tenant-selfservice.tenant-stivenbarber .qs-btn .tienda-marca-logo {
      filter: grayscale(1) brightness(1.2);
    }

    /* ── Progreso ──────────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #stepIndicatorText,
    html.tenant-selfservice.tenant-stivenbarber #progressPercentage {
      font-family: var(--sb-sans) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 0.24em !important;
      color: rgba(245, 247, 255, 0.60) !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #progressPercentage {
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #progressTrack {
      height: 2px !important;
      background: rgba(245, 247, 255, 0.08) !important;
      overflow: visible !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #progressBar {
      height: 2px !important;
      background: var(--sb-neon) !important;
      box-shadow: 0 0 6px var(--sb-halo), 0 0 16px rgba(225, 233, 255, 0.35) !important;
    }

    /* ── Títulos de paso ───────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber main section > h2,
    html.tenant-selfservice.tenant-stivenbarber #step2Heading {
      font-family: var(--sb-serif) !important;
      font-weight: 700 !important;
      font-size: 2rem !important;
      line-height: 1.05 !important;
      letter-spacing: -0.01em !important;
      color: var(--sb-neon) !important;
      text-shadow: none !important;
    }

    /* ── Club: tarjeta sólida, no un recuadro punteado ─────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #clubFranja {
      border: 1px solid var(--sb-borde-2) !important;
      border-style: solid !important;
      border-radius: 18px !important;
      background:
        radial-gradient(120% 140% at 0% 0%,
          rgba(var(--sb-muro-r), var(--sb-muro-g), var(--sb-muro-b), 0.22), transparent 60%),
        var(--sb-carbon) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    html.tenant-selfservice.tenant-stivenbarber #clubFranja .club-franja-icono {
      background: var(--sb-neon) !important;
      color: #000 !important;
      border: 0 !important;
      box-shadow: 0 0 16px rgba(225, 233, 255, 0.35);
    }
    html.tenant-selfservice.tenant-stivenbarber #clubFranja .club-franja-icono i { color: #000 !important; }
    html.tenant-selfservice.tenant-stivenbarber #clubFranja .club-franja-titulo {
      font-family: var(--sb-serif) !important;
      font-weight: 700 !important;
      font-size: 1.02rem !important;
      letter-spacing: 0 !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #clubFranja .club-franja-sub { color: var(--sb-gris) !important; }

    /* ── Buscador y categorías ─────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #svcSearchInput {
      background: var(--sb-carbon) !important;
      border: 1px solid var(--sb-borde) !important;
      border-radius: 14px !important;
      color: var(--sb-neon) !important;
      font-family: var(--sb-sans) !important;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    html.tenant-selfservice.tenant-stivenbarber #svcSearchInput:focus {
      border-color: rgba(245, 247, 255, 0.40) !important;
      box-shadow: 0 0 0 3px rgba(225, 233, 255, 0.08) !important;
      outline: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #categoryPills { gap: 8px !important; }
    html.tenant-selfservice.tenant-stivenbarber .category-pill {
      font-family: var(--sb-sans) !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase;
      padding: 11px 18px !important;
      background: transparent !important;
      border: 1px solid var(--sb-borde-2) !important;
      color: rgba(245, 247, 255, 0.66) !important;
      box-shadow: none !important;
      text-shadow: none !important;
      transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
    }
    html.tenant-selfservice.tenant-stivenbarber .category-pill:is(.border-neon, .text-neon) {
      background: var(--sb-neon) !important;
      border-color: var(--sb-neon) !important;
      color: #050505 !important;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 18px rgba(225, 233, 255, 0.35) !important;
    }

    /* ── Secciones: número + serif en cursiva + hilo ───────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #servicesGrid { counter-reset: sbCat; }
    html.tenant-selfservice.tenant-stivenbarber .category-section { counter-increment: sbCat; }
    html.tenant-selfservice.tenant-stivenbarber .cat-sep { display: none !important; }
    html.tenant-selfservice.tenant-stivenbarber .cat-title {
      display: flex !important;
      align-items: baseline;
      gap: 12px;
      padding-left: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-family: var(--sb-serif) !important;
      font-style: italic;
      font-weight: 600 !important;
      font-size: 1.55rem !important;
      letter-spacing: -0.005em !important;
      color: var(--sb-neon) !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .cat-title::before {
      content: counter(sbCat, decimal-leading-zero);
      font-family: var(--sb-sans);
      font-style: normal;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.2em;
      color: var(--sb-tenue);
      transform: translateY(-3px);
    }
    html.tenant-selfservice.tenant-stivenbarber .cat-title::after {
      content: '';
      flex: 1;
      height: 1px;
      align-self: center;
      background: linear-gradient(90deg, var(--sb-borde-2), transparent);
    }

    /* ── Tarjeta de servicio ───────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber .category-section > div:has(> .service-option) {
      gap: 10px !important;
      display: flex;
      flex-direction: column;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option {
      margin: 0 !important;
      border-radius: 18px !important;
      border: 1px solid var(--sb-borde) !important;
      background: linear-gradient(180deg, #121316 0%, var(--sb-carbon) 100%) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option .icon-bg {
      border-radius: 13px !important;
      background: var(--sb-grafito) !important;
      border: 1px solid var(--sb-borde-2) !important;
      box-shadow: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option .icon-svg {
      color: rgba(245, 247, 255, 0.88) !important;
      filter: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .svc-name {
      font-family: var(--sb-sans) !important;
      font-weight: 600 !important;
      font-size: 15px !important;
      letter-spacing: -0.005em !important;
      color: var(--sb-neon) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .svc-desc { color: var(--sb-gris) !important; }
    html.tenant-selfservice.tenant-stivenbarber .svc-desc-toggle {
      color: var(--sb-tenue) !important;
      letter-spacing: 0.04em;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option .price-tag {
      font-family: var(--sb-serif) !important;
      font-weight: 700 !important;
      font-size: 17px !important;
      letter-spacing: 0 !important;
      color: var(--sb-neon) !important;
      text-shadow: none !important;
      font-variant-numeric: lining-nums;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option .duration-tag { color: var(--sb-gris) !important; }
    html.tenant-selfservice.tenant-stivenbarber .service-option .club-sello-chip {
      background: transparent !important;
      border: 1px solid var(--sb-borde-2) !important;
      color: rgba(245, 247, 255, 0.72) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option .svc-radio {
      border-width: 1.5px !important;
      border-color: rgba(245, 247, 255, 0.28) !important;
      position: relative;
    }
    @media (hover: hover) {
      html.tenant-selfservice.tenant-stivenbarber .service-option:not(.border-neon):hover,
      html.tenant-selfservice.tenant-stivenbarber .barber-option:not(.border-neon):hover {
        border-color: rgba(245, 247, 255, 0.24) !important;
        box-shadow: 0 14px 30px -16px rgba(225, 233, 255, 0.25) !important;
      }
    }
    /* Elegido: se enciende como el letrero. */
    html.tenant-selfservice.tenant-stivenbarber .service-option.border-neon,
    html.tenant-selfservice.tenant-stivenbarber .barber-option.border-neon {
      background:
        radial-gradient(130% 110% at 50% -30%, rgba(225, 233, 255, 0.12), transparent 60%),
        linear-gradient(180deg, #16171b 0%, #0f1013 100%) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(245, 247, 255, 0.85),
        0 0 18px rgba(225, 233, 255, 0.28),
        0 14px 34px -12px rgba(225, 233, 255, 0.30) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option.border-neon .icon-bg {
      background: var(--sb-neon) !important;
      border-color: var(--sb-neon) !important;
      box-shadow: 0 0 14px rgba(225, 233, 255, 0.45) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option.border-neon .icon-svg {
      color: #050505 !important;
      filter: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option.border-neon .svc-radio {
      background: var(--sb-neon) !important;
      border-color: var(--sb-neon) !important;
      box-shadow: 0 0 10px var(--sb-halo);
    }
    html.tenant-selfservice.tenant-stivenbarber .service-option.border-neon .svc-radio::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 45%;
      width: 5px;
      height: 9px;
      border: solid #050505;
      border-width: 0 2px 2px 0;
      transform: translate(-50%, -50%) rotate(45deg);
    }

    /* ── Profesionales ─────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #barberosGrid .barber-option {
      border-radius: 18px !important;
      border: 1px solid var(--sb-borde) !important;
      background: linear-gradient(180deg, #121316 0%, var(--sb-carbon) 100%) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #barberosGrid .barber-option img {
      filter: grayscale(0.15) contrast(1.04);
    }
    html.tenant-selfservice.tenant-stivenbarber #barberosGrid .barber-option > span:first-of-type,
    html.tenant-selfservice.tenant-stivenbarber #barberosGrid .barber-option h3 {
      font-family: var(--sb-serif) !important;
      font-weight: 700 !important;
      letter-spacing: 0 !important;
    }

    /* "Sin preferencia" trae un aro crema (#F9E7B3) cableado en la clase. */
    html.tenant-selfservice.tenant-stivenbarber #barberosGrid [class*="border-[#F9E7B3]"] {
      border-color: rgba(245, 247, 255, 0.45) !important;
      box-shadow: 0 0 14px rgba(225, 233, 255, 0.18) !important;
      background: var(--sb-grafito) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #barberosGrid [class*="border-[#F9E7B3]"] i {
      color: var(--sb-neon) !important;
    }

    /* ── Horas ─────────────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber .time-pill {
      border-color: var(--sb-borde-2) !important;
      background: var(--sb-carbon) !important;
      color: rgba(245, 247, 255, 0.85) !important;
      font-variant-numeric: tabular-nums;
    }
    html.tenant-selfservice.tenant-stivenbarber .time-pill.border-neon,
    html.tenant-selfservice.tenant-stivenbarber .time-pill[data-sel] {
      background: var(--sb-neon) !important;
      color: #050505 !important;
      border-color: var(--sb-neon) !important;
      box-shadow: 0 0 16px rgba(225, 233, 255, 0.40) !important;
    }

    /* ── Botón continuar ───────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #btnContinueBar {
      background: linear-gradient(180deg,
        rgba(7, 7, 8, 0) 0%, rgba(7, 7, 8, 0.88) 36%, rgba(7, 7, 8, 0.98) 100%) !important;
      border-top: 0 !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    html.tenant-selfservice.tenant-stivenbarber #btnContinue {
      font-family: var(--sb-sans) !important;
      font-size: 12.5px !important;
      font-weight: 700 !important;
      letter-spacing: 0.18em !important;
      text-transform: uppercase;
      border-radius: 16px !important;
      background: var(--sb-neon) !important;
      color: #050505 !important;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 26px rgba(225, 233, 255, 0.30), 0 10px 28px rgba(0, 0, 0, 0.6) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #btnContinue:disabled {
      background: rgba(245, 247, 255, 0.06) !important;
      color: rgba(245, 247, 255, 0.40) !important;
      box-shadow: inset 0 0 0 1px var(--sb-borde-2) !important;
      opacity: 1 !important;
    }

    /* ── Pie ───────────────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #clubBanner a,
    html.tenant-selfservice.tenant-stivenbarber #footerContact > div.rounded-2xl {
      background: var(--sb-carbon) !important;
      border: 1px solid var(--sb-borde) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #footerContact p[class*="uppercase"],
    html.tenant-selfservice.tenant-stivenbarber #clubBanner p[class*="uppercase"] {
      color: var(--sb-tenue) !important;
      letter-spacing: 0.22em !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #footerContact .rounded-xl,
    html.tenant-selfservice.tenant-stivenbarber #footerContact [class*="w-9"] {
      background: var(--sb-grafito) !important;
      border-color: var(--sb-borde-2) !important;
      color: var(--sb-neon) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #footerContact i { color: var(--sb-neon) !important; }

    /* ── Fecha y hora ──────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #step3 h3 {
      font-family: var(--sb-serif) !important;
      font-style: italic;
      font-weight: 600 !important;
      font-size: 1.35rem !important;
      color: var(--sb-neon) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #calendarCarousel .day-btn {
      background: var(--sb-carbon) !important;
      border-color: var(--sb-borde-2) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #calendarCarousel .day-btn .day-num {
      font-family: var(--sb-serif) !important;
      font-weight: 700 !important;
      text-shadow: none !important;
      filter: none !important;
    }
    /* Día elegido: invertido, como la categoría activa. */
    html.tenant-selfservice.tenant-stivenbarber #calendarCarousel .day-btn.active {
      background: var(--sb-neon) !important;
      border-color: var(--sb-neon) !important;
      box-shadow: 0 0 18px rgba(225, 233, 255, 0.35) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #calendarCarousel .day-btn.active span {
      color: #050505 !important;
      filter: none !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #calendarCarousel .day-btn.active .dot {
      background: #050505 !important;
      box-shadow: none !important;
    }
    /* Las horas recomendadas traen un ámbar cableado inline: acá van en el
       mismo blanco frío que todo lo demás. */
    html.tenant-selfservice.tenant-stivenbarber #smartSlotsContainer > div {
      background:
        radial-gradient(120% 140% at 100% 0%,
          rgba(var(--sb-muro-r), var(--sb-muro-g), var(--sb-muro-b), 0.20), transparent 60%),
        var(--sb-carbon) !important;
      border-color: var(--sb-borde-2) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #smartSlotsContainer > div > div:first-child:not(.grid) {
      display: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #smartSlotsContainer p:first-of-type {
      background: none !important;
      -webkit-text-fill-color: rgba(245, 247, 255, 0.72) !important;
      color: rgba(245, 247, 255, 0.72) !important;
      letter-spacing: 0.2em !important;
      font-size: 10px !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #smartSlotsContainer p:first-of-type i {
      -webkit-text-fill-color: var(--sb-neon) !important;
      color: var(--sb-neon) !important;
      filter: drop-shadow(0 0 4px var(--sb-halo)) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #smartSlotsContainer p:not(:first-of-type) {
      color: var(--sb-gris) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #smartSlotsContainer .smart-slot-pill {
      background: transparent !important;
      border-color: rgba(245, 247, 255, 0.28) !important;
      color: var(--sb-neon) !important;
      box-shadow: none !important;
      font-variant-numeric: tabular-nums;
    }

    /* ── Modal de complementos ─────────────────────────────────────────── */
    html.tenant-selfservice.tenant-stivenbarber #upsell-sheet {
      background: var(--sb-carbon) !important;
      border-color: var(--sb-borde-2) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #upsell-sheet h3 {
      font-family: var(--sb-serif) !important;
      font-weight: 700 !important;
      font-size: 1.5rem !important;
      text-transform: none !important;
      letter-spacing: -0.005em !important;
      color: var(--sb-neon) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #upsell-sheet .upsell-cta {
      letter-spacing: 0.18em !important;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 24px rgba(225, 233, 255, 0.28) !important;
    }

    /* ── Paso 4: productos y club ──────────────────────────────────────────
       Los dos traen dorado cableado inline (#D4AF37) y emojis a color.
       Acá van al blanco frío; los emojis, en gris, para que no rompan la
       paleta de la página. */
    html.tenant-selfservice.tenant-stivenbarber #step4XSell > p:first-child {
      font-family: var(--sb-sans) !important;
      color: rgba(245, 247, 255, 0.78) !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.18em !important;
      text-transform: uppercase;
    }
    html.tenant-selfservice.tenant-stivenbarber #step4XSell .flex > div {
      background: var(--sb-carbon) !important;
      border-color: var(--sb-borde) !important;
      border-radius: 16px !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #step4XSell [style*="background:#14141a"] {
      background: var(--sb-grafito) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #step4XSell .ph-shopping-bag {
      color: rgba(245, 247, 255, 0.28) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #step4XSell .flex p[style*="D4AF37"] {
      color: var(--sb-neon) !important;
      font-family: var(--sb-serif) !important;
      font-size: 14px !important;
      font-weight: 700 !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #step4XSell .xsell-btn {
      background: transparent !important;
      border-color: rgba(245, 247, 255, 0.30) !important;
      color: var(--sb-neon) !important;
      letter-spacing: 0.08em;
      transition: background .2s ease, color .2s ease;
    }
    @media (hover: hover) {
      html.tenant-selfservice.tenant-stivenbarber #step4XSell .xsell-btn:hover {
        background: var(--sb-neon) !important;
        color: #050505 !important;
      }
    }
    html.tenant-selfservice.tenant-stivenbarber .club-hero-card {
      background:
        radial-gradient(120% 140% at 0% 0%,
          rgba(var(--sb-muro-r), var(--sb-muro-g), var(--sb-muro-b), 0.20), transparent 60%),
        var(--sb-carbon) !important;
      border-color: var(--sb-borde-2) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .club-hero-card .ph-medal {
      color: var(--sb-neon) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .club-hero-card .grid > div {
      background: rgba(245, 247, 255, 0.03) !important;
      border-color: var(--sb-borde) !important;
      box-shadow: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber .club-hero-card .grid p.text-lg {
      font-family: var(--sb-serif) !important;
      color: var(--sb-neon) !important;
      filter: grayscale(1) brightness(1.5);
    }
    html.tenant-selfservice.tenant-stivenbarber .club-hero-card a {
      color: var(--sb-neon) !important;
    }
    /* Campos del formulario: foco en blanco, no en el acento del tema. */
    html.tenant-selfservice.tenant-stivenbarber #step4 :is(input, select, textarea) {
      background: var(--sb-carbon) !important;
      border-color: var(--sb-borde-2) !important;
      color: var(--sb-neon) !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #step4 :is(input, select, textarea):focus {
      border-color: rgba(245, 247, 255, 0.55) !important;
      box-shadow: 0 0 0 3px rgba(225, 233, 255, 0.08) !important;
      outline: none !important;
    }
    html.tenant-selfservice.tenant-stivenbarber #step4 label,
    html.tenant-selfservice.tenant-stivenbarber #selectionRecap span {
      color: rgba(245, 247, 255, 0.62);
    }

    /* ── Tablet (768–1199): la reserva flota sobre su propio local ──────── */
    @media (min-width: 768px) and (max-width: 1199.98px) {
      /* El marco mide 672 px: a 1000 px la foto no alcanza a cubrir la
         derecha (necesita ≥ 1,87 × el ancho). A 1300 px el neón queda en
         x = 953: calc(50% − 303px), mismo cálculo que en el teléfono. */
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg {
        background-size: 1300px auto;
        background-position: calc(50% - 303px) -236px;
      }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero,
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom { min-height: 520px !important; }
      html.tenant-selfservice.tenant-stivenbarber body {
        background-color: transparent !important;
      }
      html.tenant-selfservice.tenant-stivenbarber body::before {
        content: '';
        position: fixed;
        inset: -40px;
        z-index: -1;
        background: url('/stivenbarber/banner.webp') 72% 35% / cover no-repeat;
        filter: blur(26px) saturate(0.6) brightness(0.32);
        pointer-events: none;
      }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame {
        margin-top: 28px;
        margin-bottom: 28px;
        border-radius: 28px;
        background: var(--sb-negro);
        border: 1px solid rgba(245, 247, 255, 0.09) !important;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.6),
          0 40px 120px -20px rgba(0, 0, 0, 0.9) !important;
      }
    }

    /* ── Escritorio (≥ 1200): dos paneles, no un teléfono agrandado ───────
       Izquierda, fijo y de alto completo: el letrero de neón con el nombre.
       Derecha: la reserva, con una barra superior (ubicación, horario,
       quiénes somos, productos) y los servicios en dos columnas.

       Todo es geometría sobre el markup existente —nada se mueve de lugar
       en el DOM—, así que el móvil no cambia en nada:
         · el <header> del hero pasa a `position: fixed` (su inline trae
           `position: relative`, de ahí el !important);
         · #bookingFrame se vuelve una grilla de 3 columnas para que la
           franja de datos y los dos botones de acceso compartan UNA fila;
           todo lo demás ocupa la fila entera. Los modales que viven
           adentro son `fixed`, así que no ocupan celda.
       Los paneles #deskBrand/#deskResumen de la plataforma se apagan: el
       hero fijo ya es la marca y el botón Continuar ya dice lo elegido.

       Desde 1200 y no desde 1024: con el panel del neón, a 1024 la columna
       derecha quedaba en ~530 px y la barra superior se montaba (medido).
       Un iPad apaisado se queda con el marco flotante de tablet. */
    @media (min-width: 1200px) {
      html.tenant-stivenbarber {
        --sb-lado: clamp(420px, 38vw, 640px);
        --sb-col:  900px;
        --sb-gut:  max(40px, calc((100vw - var(--sb-lado) - var(--sb-col)) / 2));
      }
      html.tenant-selfservice.tenant-stivenbarber body {
        background-color: var(--sb-negro) !important;
        background-image:
          radial-gradient(60rem 40rem at 100% -10%,
            rgba(var(--sb-muro-r), var(--sb-muro-g), var(--sb-muro-b), 0.10), transparent 60%) !important;
        background-attachment: fixed !important;
      }
      html.tenant-selfservice.tenant-stivenbarber :is(#deskBrand, #deskResumen) { display: none !important; }

      html.tenant-selfservice.tenant-stivenbarber #bookingFrame {
        max-width: none;
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding-left: calc(var(--sb-lado) + var(--sb-gut));
        padding-right: var(--sb-gut);
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        background: transparent;
        overflow: visible;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-content: start;
      }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > * { grid-column: 1 / -1; }

      /* Panel izquierdo: el neón. */
      html.tenant-selfservice.tenant-stivenbarber .booking-hero,
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sb-lado);
        min-height: 0 !important;
        z-index: 30;
        border-right: 1px solid var(--sb-borde);
      }
      /* Panel alto: la foto a 1400 px de ancho deja el neón (x = 1027)
         centrado con calc(50% − 327px) y cubre paneles de hasta 746 px;
         --sb-lado topa en 640. Subida 200 px para que no asome el cielo
         gris del local; abajo el velo cierra a negro, así que en pantallas
         más altas que la foto no se ve borde. */
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg {
        background-size: 1400px auto;
        background-position: calc(50% - 327px) -200px;
      }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg::after {
        background: radial-gradient(46% 20% at 50% 27%,
          rgba(235, 240, 255, 0.22), rgba(235, 240, 255, 0.06) 55%, transparent 75%);
      }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero-overlay {
        background:
          linear-gradient(180deg,
            rgba(7, 7, 8, 0.35) 0%,
            rgba(7, 7, 8, 0.00) 14%,
            rgba(7, 7, 8, 0.00) 50%,
            rgba(7, 7, 8, 0.78) 70%,
            rgba(7, 7, 8, 0.97) 86%,
            var(--sb-negro) 100%),
          linear-gradient(90deg, transparent 80%, rgba(7, 7, 8, 0.45) 100%) !important;
      }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero > div:has(#shopNombre) {
        padding: 0 2.5rem 4.5rem !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #shopNombre {
        font-size: clamp(3rem, 4.2vw, 4.25rem) !important;
      }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero > div:has(#shopNombre)::before {
        font-size: 11px;
        margin-bottom: 1.1rem;
      }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero p:has(#shopSlogan) {
        font-size: 11px !important;
      }

      /* Barra superior: ubicación · horario | quiénes somos | productos. */
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > .info-strip { grid-column: 1; }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > #quienesSomosBtn { grid-column: 2; }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > #tiendaBtn { grid-column: 3; }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > :is(.info-strip, #quienesSomosBtn, #tiendaBtn) {
        min-height: 72px;
        border-top: 0 !important;
        border-bottom: 1px solid var(--sb-borde) !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > .info-strip {
        justify-content: flex-start !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > .info-strip > * {
        flex: none !important;
        padding: 0 18px !important;
        border: 0 !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > .info-strip > *:first-child { padding-left: 0 !important; }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > :is(#quienesSomosBtn, #tiendaBtn) {
        width: auto;
        padding: 0 0 0 22px !important;
        white-space: nowrap;
      }
      @media (hover: hover) {
        html.tenant-selfservice.tenant-stivenbarber #bookingFrame > :is(#quienesSomosBtn, #tiendaBtn):hover,
        html.tenant-selfservice.tenant-stivenbarber #bookingFrame > .info-strip :is(a, button):hover {
          background: transparent !important;
        }
      }

      /* La reserva. El padding lateral lo da el marco; los px-6 del markup
         móvil sobran. */
      html.tenant-selfservice.tenant-stivenbarber #pasoProgreso {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 2.75rem !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #bookingFrame > main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 8rem !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #categoryPills {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-wrap: wrap;
      }
      html.tenant-selfservice.tenant-stivenbarber main section > h2,
      html.tenant-selfservice.tenant-stivenbarber #step2Heading {
        font-size: 2.75rem !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #clubFranja,
      html.tenant-selfservice.tenant-stivenbarber #svcSearchWrap {
        max-width: 620px;
      }

      /* Servicios en dos columnas, desde 1360: a 1280 cada tarjeta quedaba
         en ~340 px y la duración se partía en dos líneas (medido). */
      @media (min-width: 1360px) {
        html.tenant-selfservice.tenant-stivenbarber .category-section > div:has(> .service-option) {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 14px !important;
        }
      }
      html.tenant-selfservice.tenant-stivenbarber .category-section { margin-bottom: 1.75rem !important; }
      html.tenant-selfservice.tenant-stivenbarber .service-option { height: 100%; }

      /* Profesionales: "Sin preferencia" arriba, a lo ancho, y el resto
         repartido en partes iguales debajo. */
      html.tenant-selfservice.tenant-stivenbarber #barberosGrid.flex.flex-col:not(.gap-0) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 14px !important;
      }
      /* Flex y no grid: una grilla deja la tercera columna vacía cuando el
         servicio lo hacen dos; así los que hay se reparten el ancho. */
      html.tenant-selfservice.tenant-stivenbarber #barberosGrid.flex.flex-col:not(.gap-0) > * {
        flex: 1 1 240px;
        width: auto !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #barberosGrid.flex.flex-col:not(.gap-0) > :first-child {
        flex-basis: 100%;
      }

      /* Paso 4: el formulario no necesita 900 px de ancho. */
      html.tenant-selfservice.tenant-stivenbarber #step4 {
        max-width: 760px;
      }
      /* Días: el carrusel trae -mx-6/px-6 para sangrar al borde del
         teléfono; acá el borde lo pone el marco. */
      html.tenant-selfservice.tenant-stivenbarber #calendarCarousel {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 2px !important;
        padding-right: 0 !important;
        padding-top: 4px;
      }
      html.tenant-selfservice.tenant-stivenbarber #step4XSell .overflow-x-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      /* Continuar: acompaña a la columna derecha. */
      html.tenant-selfservice.tenant-stivenbarber #btnContinueBar {
        left: calc(var(--sb-lado) + var(--sb-gut));
        right: var(--sb-gut);
        width: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
      }
      html.tenant-selfservice.tenant-stivenbarber #btnContinueBar > div {
        max-width: none;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      html.tenant-selfservice.tenant-stivenbarber #btnContinue {
        max-width: 460px;
        margin-left: auto;
      }
    }

    @media (max-width: 380px) {
      html.tenant-selfservice.tenant-stivenbarber #shopNombre { font-size: 2.45rem !important; }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero,
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom { min-height: 452px !important; }
    }

    /* Sin movimiento: el letrero ya encendido y el halo quieto. */
    @media (prefers-reduced-motion: reduce) {
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg,
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg::after {
        animation: none !important;
      }
      html.tenant-selfservice.tenant-stivenbarber .booking-hero.hero-custom #heroSliderBg::after { opacity: 0.8; }
    }


    /* ══ BARBERÍA BRZ — "El arte de tu imagen" (La Serena) ════════════════
       Piel propia, solo CSS, sacada de lo que el local ya muestra:
         · Grafito #0b1216 (su fachada) + cian #3ED8D8 (su isotipo) + blanco.
         · Bebas Neue (ya cargada) para lo que titula: es la condensada de
           sus portadas de Instagram ("BRZ ACADEMY", "EXPERIENCIA BRZ").
           Inter para lo que se lee.
         · El muro de listones negros del local (detrás de cada foto del
           equipo) como textura, y la línea cian con destello del centro de
           su logo de ACADEMY como separador.
         · El hero mantiene su carrusel (fachada, interior con los espejos
           LED y ACADEMY): la piel solo le cambia el tono y el velo.
       Todo cuelga de html.tenant-selfservice.tenant-brz (0,2,1), que le gana
       a la plantilla html.tenant-selfservice (0,1,1). Se saca borrando este
       bloque y /brz/marca-z.png; el JS de BRZ ACADEMY no depende de esto. */
    html.tenant-brz {
      --brz-negro:   #05090b;
      --brz-grafito: #0b1216;
      --brz-panel:   #0e171b;
      --brz-panel-2: #122027;
      --brz-borde:   rgba(62, 216, 216, 0.10);
      --brz-borde-2: rgba(62, 216, 216, 0.24);
      --brz-cian:    #3ED8D8;
      --brz-hielo:   #c9f6fa;
      --brz-tinta:   #eaf6f7;
      --brz-gris:    #8aa0a5;
      --brz-tenue:   #5b6f74;
      --brz-halo:    rgba(62, 216, 216, 0.45);
      --brz-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
      --brz-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
      /* Listones del muro: 2 px de luz cada 11 px, apenas visible. */
      --brz-listones: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 11px);
      /* La línea de su logo de ACADEMY: se enciende al centro. */
      --brz-destello: linear-gradient(90deg,
        transparent, rgba(62, 216, 216, 0.55) 30%, #bff7f7 50%, rgba(62, 216, 216, 0.55) 70%, transparent);
      background-color: var(--brz-negro);
      /* El aviso de cookies (js/legal-widgets.js) trae su propio morado. */
      --sptl-acento:       #3ED8D8;
      --sptl-acento-tinta: #03181a;
    }
    html.tenant-selfservice.tenant-brz body {
      background-color: var(--brz-negro) !important;
      background-image: none !important;
      font-family: var(--brz-sans);
    }

    /* ── Hero: el interior con los espejos LED ─────────────────────────── */
    html.tenant-selfservice.tenant-brz .booking-hero,
    html.tenant-selfservice.tenant-brz .booking-hero.hero-custom {
      background-image: none !important;
      background-color: var(--brz-negro) !important;
      min-height: 540px !important;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
    }
    /* Las fotos las pone el carrusel (initHeroSlider, SLIDES_BY_TENANT.brz)
       como .hero-slide en crossfade; acá solo el tono y el acercamiento
       lento de entrada, que se aplica al carrusel entero. */
    html.tenant-selfservice.tenant-brz .booking-hero #heroSliderBg {
      position: absolute;
      inset: 0;
      filter: saturate(0.55) contrast(1.08) brightness(0.9);
      transform-origin: 40% 30%;
      animation: brzEntrada 9s cubic-bezier(.2, .7, .2, 1) both;
    }
    /* Dos de las tres fotos traen su propio letrero ("BRZ · El arte de tu
       imagen"): la fachada y el logo de ACADEMY. A pantalla completa ese
       letrero caía justo detrás del nombre y se leían dos marcas encimadas.
       Esas dos van ARRIBA (al 66 % del alto) y el velo las funde a negro
       antes del nombre; el interior, que no trae letrero, sí llena el hero. */
    html.tenant-selfservice.tenant-brz #heroSliderBg .hero-slide:is(:nth-child(1), :nth-child(3)) {
      background-size: auto 66%;
      background-position: center top;
      /* Sin borde duro donde termina la foto. */
      -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 66%);
      mask-image: linear-gradient(180deg, #000 50%, transparent 66%);
    }
    /* La fachada: el letrero arranca al 18 % del ancho con el isotipo; al
       centro quedaba cortado. */
    html.tenant-selfservice.tenant-brz #heroSliderBg .hero-slide:nth-child(1) {
      background-position: 28% top;
    }
    html.tenant-selfservice.tenant-brz #heroSliderBg .hero-slide:nth-child(2) {
      background-position: center 30%;
    }
    /* El logo de ACADEMY viene negro sobre BLANCO: bajo el velo quedaba una
       placa gris. Invertido (y el matiz devuelto con hue-rotate) queda blanco
       sobre negro con la Z en su cian, como el resto de la página. */
    html.tenant-selfservice.tenant-brz #heroSliderBg .hero-slide:nth-child(3) {
      filter: invert(1) hue-rotate(180deg) brightness(1.05);
    }
    @keyframes brzEntrada {
      from { transform: scale(1.12); }
      to   { transform: scale(1); }
    }
    /* Velo: el cian del local en la esquina de los espejos, negro abajo para
       que el nombre se lea y el hero se funda con la página. */
    html.tenant-selfservice.tenant-brz .booking-hero-overlay {
      background:
        radial-gradient(70% 45% at 30% 28%, rgba(62, 216, 216, 0.16), transparent 70%),
        linear-gradient(180deg,
          rgba(5, 9, 11, 0.55) 0%,
          rgba(5, 9, 11, 0.10) 20%,
          rgba(5, 9, 11, 0.35) 45%,
          rgba(5, 9, 11, 0.88) 70%,
          var(--brz-negro) 96%) !important;
    }
    html.tenant-selfservice.tenant-brz .booking-hero :is(.yugen-waves, .lc-decor, .cg-brillos) {
      display: none !important;
    }
    /* El logo redondo se va: el isotipo va suelto, sin plato negro. */
    html.tenant-selfservice.tenant-brz #heroLogoArea { display: none !important; }
    html.tenant-selfservice.tenant-brz .booking-hero > div:has(#shopNombre) {
      padding: 0 1.5rem 2.4rem !important;
    }
    html.tenant-selfservice.tenant-brz .booking-hero > div:has(#shopNombre)::before {
      content: '';
      display: block;
      width: 64px;
      height: 76px;
      margin: 0 auto 1rem;
      background: url('/brz/marca-z.png') center / contain no-repeat;
      filter: drop-shadow(0 0 18px rgba(62, 216, 216, 0.45));
      opacity: 0;
      transition: opacity 1000ms ease-in-out;   /* el mismo del crossfade */
    }
    /* El isotipo solo con la foto del interior: las otras dos ya traen el
       logo del local en su letrero, y dos Z en pantalla se leen como error. */
    html.tenant-selfservice.tenant-brz .booking-hero:has(.hero-slide:nth-child(2).is-active) > div:has(#shopNombre)::before {
      opacity: 1;
    }
    /* Antetítulo: la ciudad. El lema ("El arte de tu imagen") ya lo dicen
       el letrero de la fachada y el de ACADEMY en el carrusel. */
    html.tenant-selfservice.tenant-brz #shopNombre::before {
      content: 'La Serena';
      display: block;
      margin-bottom: 0.6rem;
      font-family: var(--brz-sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--brz-cian);
      text-shadow: none;
    }
    html.tenant-selfservice.tenant-brz #shopNombre {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 4.1rem !important;
      line-height: 0.9 !important;
      letter-spacing: 0.02em !important;
      text-transform: uppercase;
      color: #fff !important;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75) !important;
      animation: brzAparece .9s ease .4s both;
    }
    @keyframes brzAparece {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: none; }
    }
    html.tenant-selfservice.tenant-brz .gold-divider {
      width: 150px !important;
      height: 1px !important;
      margin: 16px auto 12px !important;
      background: var(--brz-destello) !important;
      box-shadow: 0 0 10px var(--brz-halo);
    }
    html.tenant-selfservice.tenant-brz .booking-hero p:has(#shopSlogan) {
      font-family: var(--brz-sans) !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.3em !important;
      color: rgba(234, 246, 247, 0.72) !important;
    }
    html.tenant-selfservice.tenant-brz .booking-hero > button.fixed {
      background: rgba(5, 9, 11, 0.45) !important;
      border-color: rgba(62, 216, 216, 0.28) !important;
    }

    /* ── Franja de datos ───────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz .info-strip,
    html.tenant-selfservice.tenant-brz .info-strip[style] {
      background: var(--brz-negro) !important;
      border-top: 1px solid var(--brz-borde) !important;
      border-bottom: 1px solid var(--brz-borde) !important;
    }
    html.tenant-selfservice.tenant-brz .info-strip > * + * {
      border-left: 1px solid var(--brz-borde) !important;
    }
    html.tenant-selfservice.tenant-brz .info-strip :is(a, button) {
      font-family: var(--brz-sans) !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.16em !important;
      text-transform: uppercase;
      color: rgba(234, 246, 247, 0.72) !important;
    }
    html.tenant-selfservice.tenant-brz .info-strip i { color: var(--brz-cian) !important; }

    /* ── Accesos: Quiénes somos · Productos · BRZ ACADEMY ──────────────────
       En el markup son tres filas a lo ancho, una bajo otra: casi 140 px de
       botones antes del primer servicio. Acá van en UNA fila de tres
       baldosas. #bookingFrame pasa a flex con wrap: todo lo demás ocupa el
       100 % (y fuerza el salto de línea), y los accesos visibles comparten
       su fila en partes iguales. Si el local apaga uno, los otros dos se
       reparten el ancho solos. Los modales que viven adentro son fixed. */
    html.tenant-selfservice.tenant-brz #bookingFrame {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    html.tenant-selfservice.tenant-brz #bookingFrame > * { flex: 0 0 100%; min-width: 0; }
    html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn {
      flex: 1 1 0;
      flex-direction: column;
      gap: 7px !important;
      padding: 16px 6px 14px !important;
      background: var(--brz-listones), var(--brz-grafito) !important;
      border-bottom: 1px solid var(--brz-borde) !important;
      font-family: var(--brz-display) !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      letter-spacing: 0.08em !important;
      line-height: 1 !important;
      text-transform: uppercase;
      text-align: center;
      color: var(--brz-tinta) !important;
      transition: background .2s ease, color .2s ease;
    }
    html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn + .qs-btn {
      border-left: 1px solid var(--brz-borde) !important;
    }
    html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn i {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      font-size: 17px !important;
      color: var(--brz-cian) !important;
      background: rgba(62, 216, 216, 0.08);
      border: 1px solid var(--brz-borde-2);
    }
    html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn .tienda-marca-logo {
      height: 36px;
      filter: grayscale(1) brightness(1.3);
    }
    @media (hover: hover) {
      html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn:hover,
      html.tenant-selfservice.tenant-brz .info-strip :is(a, button):hover {
        background: var(--brz-listones), var(--brz-panel-2) !important;
        color: #fff !important;
      }
    }

    /* Modales de accesos: del gris de la plataforma al grafito del local. */
    html.tenant-selfservice.tenant-brz .qs-card,
    html.tenant-selfservice.tenant-brz .qs-head,
    html.tenant-selfservice.tenant-brz .os-card {
      background: var(--brz-grafito) !important;
      border-color: var(--brz-borde-2) !important;
    }
    html.tenant-selfservice.tenant-brz .qs-head h3 {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 22px !important;
      letter-spacing: 0.06em !important;
    }
    html.tenant-selfservice.tenant-brz .qs-head h3 i { color: var(--brz-cian) !important; }
    html.tenant-selfservice.tenant-brz .brz-aca-lead {
      font-family: var(--brz-display);
      font-weight: 400;
      font-size: 30px;
      line-height: 1;
      letter-spacing: 0.02em;
    }
    html.tenant-selfservice.tenant-brz .brz-aca-sep {
      background: var(--brz-destello);
      box-shadow: 0 0 8px var(--brz-halo);
    }

    /* ── Progreso ──────────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz #stepIndicatorText,
    html.tenant-selfservice.tenant-brz #progressPercentage {
      font-family: var(--brz-sans) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 0.24em !important;
      color: rgba(234, 246, 247, 0.62) !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-brz #progressPercentage {
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em !important;
      color: var(--brz-cian) !important;
    }
    html.tenant-selfservice.tenant-brz #progressTrack {
      height: 2px !important;
      background: rgba(234, 246, 247, 0.08) !important;
      overflow: visible !important;
    }
    html.tenant-selfservice.tenant-brz #progressBar {
      height: 2px !important;
      background: linear-gradient(90deg, rgba(62, 216, 216, 0.35), var(--brz-cian) 70%, #d9fbfb) !important;
      box-shadow: 0 0 8px var(--brz-halo), 0 0 18px rgba(62, 216, 216, 0.25) !important;
    }

    /* ── Títulos de paso ───────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz main section > h2,
    html.tenant-selfservice.tenant-brz #step2Heading,
    html.tenant-selfservice.tenant-brz #resenasTitle {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 2.6rem !important;
      line-height: 0.95 !important;
      letter-spacing: 0.015em !important;
      text-transform: uppercase;
      color: #fff !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-brz #resenasTitle { font-size: 2.2rem !important; }

    /* ── Club: tarjeta sólida con el destello arriba ───────────────────── */
    html.tenant-selfservice.tenant-brz #clubFranja {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--brz-borde-2) !important;
      border-style: solid !important;
      border-radius: 18px !important;
      background:
        radial-gradient(120% 140% at 0% 0%, rgba(62, 216, 216, 0.14), transparent 60%),
        var(--brz-panel) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    html.tenant-selfservice.tenant-brz #clubFranja::before {
      content: '';
      position: absolute;
      top: 0; left: 12%; right: 12%;
      height: 1px;
      background: var(--brz-destello);
    }
    html.tenant-selfservice.tenant-brz #clubFranja .club-franja-icono {
      background: var(--brz-cian) !important;
      border: 0 !important;
      box-shadow: 0 0 18px rgba(62, 216, 216, 0.35);
    }
    html.tenant-selfservice.tenant-brz #clubFranja .club-franja-icono i { color: #03181a !important; }
    html.tenant-selfservice.tenant-brz #clubFranja .club-franja-titulo {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 1.3rem !important;
      letter-spacing: 0.04em !important;
    }
    html.tenant-selfservice.tenant-brz #clubFranja .club-franja-sub { color: var(--brz-gris) !important; }

    /* ── Buscador y categorías ─────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz #svcSearchInput {
      background: var(--brz-panel) !important;
      border: 1px solid var(--brz-borde) !important;
      border-radius: 14px !important;
      color: var(--brz-tinta) !important;
      font-family: var(--brz-sans) !important;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    html.tenant-selfservice.tenant-brz #svcSearchInput:focus {
      border-color: rgba(62, 216, 216, 0.55) !important;
      box-shadow: 0 0 0 3px rgba(62, 216, 216, 0.10) !important;
      outline: none !important;
    }
    html.tenant-selfservice.tenant-brz #categoryPills { gap: 8px !important; }
    html.tenant-selfservice.tenant-brz .category-pill {
      font-family: var(--brz-display) !important;
      font-size: 16px !important;
      font-weight: 400 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase;
      padding: 9px 18px 8px !important;
      background: var(--brz-panel) !important;
      border: 1px solid var(--brz-borde) !important;
      color: rgba(234, 246, 247, 0.70) !important;
      box-shadow: none !important;
      text-shadow: none !important;
      transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
    }
    html.tenant-selfservice.tenant-brz .category-pill:is(.border-neon, .text-neon) {
      background: var(--brz-cian) !important;
      border-color: var(--brz-cian) !important;
      color: #03181a !important;
      box-shadow: 0 0 18px rgba(62, 216, 216, 0.35) !important;
    }

    /* ── Secciones: número + Bebas + la línea con destello ─────────────── */
    html.tenant-selfservice.tenant-brz #servicesGrid { counter-reset: brzCat; }
    html.tenant-selfservice.tenant-brz .category-section { counter-increment: brzCat; }
    html.tenant-selfservice.tenant-brz .cat-sep { display: none !important; }
    html.tenant-selfservice.tenant-brz .cat-title {
      display: flex !important;
      align-items: baseline;
      gap: 12px;
      padding-left: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 1.9rem !important;
      line-height: 1 !important;
      letter-spacing: 0.03em !important;
      text-transform: uppercase;
      color: #fff !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-brz .cat-title::before {
      content: counter(brzCat, decimal-leading-zero);
      font-family: var(--brz-sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--brz-cian);
      transform: translateY(-4px);
    }
    html.tenant-selfservice.tenant-brz .cat-title::after {
      content: '';
      flex: 1;
      height: 1px;
      align-self: center;
      background: linear-gradient(90deg, rgba(62, 216, 216, 0.45), transparent);
    }

    /* ── Tarjeta de servicio ───────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz .category-section > div:has(> .service-option) {
      gap: 10px !important;
      display: flex;
      flex-direction: column;
    }
    html.tenant-selfservice.tenant-brz .service-option {
      margin: 0 !important;
      border-radius: 18px !important;
      border: 1px solid var(--brz-borde) !important;
      background: linear-gradient(180deg, var(--brz-panel) 0%, var(--brz-grafito) 100%) !important;
      transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
    }
    html.tenant-selfservice.tenant-brz .service-option .icon-bg {
      border-radius: 13px !important;
      background: var(--brz-listones), var(--brz-panel-2) !important;
      border: 1px solid var(--brz-borde-2) !important;
      box-shadow: none !important;
    }
    html.tenant-selfservice.tenant-brz .service-option .icon-svg {
      color: var(--brz-cian) !important;
      filter: none !important;
    }
    html.tenant-selfservice.tenant-brz .svc-name {
      font-family: var(--brz-sans) !important;
      font-weight: 700 !important;
      font-size: 13.5px !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase;
      color: var(--brz-tinta) !important;
    }
    html.tenant-selfservice.tenant-brz .svc-desc { color: var(--brz-gris) !important; }
    html.tenant-selfservice.tenant-brz .svc-desc-toggle { color: var(--brz-tenue) !important; letter-spacing: 0.04em; }
    html.tenant-selfservice.tenant-brz .service-option .price-tag {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 22px !important;
      line-height: 1 !important;
      letter-spacing: 0.03em !important;
      color: var(--brz-cian) !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-brz .service-option .duration-tag { color: var(--brz-gris) !important; }
    html.tenant-selfservice.tenant-brz .service-option .club-sello-chip {
      background: rgba(62, 216, 216, 0.06) !important;
      border: 1px solid var(--brz-borde-2) !important;
      color: rgba(201, 246, 250, 0.85) !important;
    }
    html.tenant-selfservice.tenant-brz .service-option .svc-radio {
      border-width: 1.5px !important;
      border-color: rgba(62, 216, 216, 0.35) !important;
      position: relative;
    }
    @media (hover: hover) {
      html.tenant-selfservice.tenant-brz .service-option:not(.border-neon):hover,
      html.tenant-selfservice.tenant-brz .barber-option:not(.border-neon):hover {
        border-color: rgba(62, 216, 216, 0.35) !important;
        box-shadow: 0 14px 30px -16px rgba(62, 216, 216, 0.35) !important;
      }
    }
    /* Elegido: se enciende como el espejo LED del local. */
    html.tenant-selfservice.tenant-brz .service-option.border-neon,
    html.tenant-selfservice.tenant-brz .barber-option.border-neon {
      background:
        radial-gradient(130% 110% at 50% -30%, rgba(62, 216, 216, 0.16), transparent 60%),
        linear-gradient(180deg, #102127 0%, var(--brz-grafito) 100%) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 1px var(--brz-cian),
        0 0 20px rgba(62, 216, 216, 0.25),
        0 14px 34px -12px rgba(62, 216, 216, 0.35) !important;
    }
    html.tenant-selfservice.tenant-brz .service-option.border-neon .icon-bg {
      background: var(--brz-cian) !important;
      border-color: var(--brz-cian) !important;
      box-shadow: 0 0 14px var(--brz-halo) !important;
    }
    html.tenant-selfservice.tenant-brz .service-option.border-neon .icon-svg { color: #03181a !important; }
    html.tenant-selfservice.tenant-brz .service-option.border-neon .svc-radio {
      background: var(--brz-cian) !important;
      border-color: var(--brz-cian) !important;
      box-shadow: 0 0 10px var(--brz-halo);
    }
    html.tenant-selfservice.tenant-brz .service-option.border-neon .svc-radio::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 45%;
      width: 5px;
      height: 9px;
      border: solid #03181a;
      border-width: 0 2px 2px 0;
      transform: translate(-50%, -50%) rotate(45deg);
    }

    /* ── Profesionales ─────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz #barberosGrid .barber-option {
      border-radius: 18px !important;
      border: 1px solid var(--brz-borde) !important;
      background: linear-gradient(180deg, var(--brz-panel) 0%, var(--brz-grafito) 100%) !important;
    }
    html.tenant-selfservice.tenant-brz #barberosGrid .barber-option > span:first-of-type,
    html.tenant-selfservice.tenant-brz #barberosGrid .barber-option h3 {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 1.3rem !important;
      letter-spacing: 0.05em !important;
      text-transform: uppercase;
    }
    html.tenant-selfservice.tenant-brz #barberosGrid [class*="border-[#F9E7B3]"] {
      border-color: rgba(62, 216, 216, 0.55) !important;
      box-shadow: 0 0 14px rgba(62, 216, 216, 0.20) !important;
      background: var(--brz-panel-2) !important;
    }
    html.tenant-selfservice.tenant-brz #barberosGrid [class*="border-[#F9E7B3]"] i { color: var(--brz-cian) !important; }

    /* ── Fecha y hora ──────────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz #step3 h3 {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 1.6rem !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase;
      color: #fff !important;
    }
    html.tenant-selfservice.tenant-brz #calendarCarousel .day-btn {
      background: var(--brz-panel) !important;
      border-color: var(--brz-borde) !important;
    }
    html.tenant-selfservice.tenant-brz #calendarCarousel .day-btn .day-num {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 1.7rem !important;
      text-shadow: none !important;
      filter: none !important;
    }
    html.tenant-selfservice.tenant-brz #calendarCarousel .day-btn.active {
      background: var(--brz-cian) !important;
      border-color: var(--brz-cian) !important;
      box-shadow: 0 0 20px rgba(62, 216, 216, 0.40) !important;
    }
    html.tenant-selfservice.tenant-brz #calendarCarousel .day-btn.active span {
      color: #03181a !important;
      filter: none !important;
      text-shadow: none !important;
    }
    html.tenant-selfservice.tenant-brz #calendarCarousel .day-btn.active .dot {
      background: #03181a !important;
      box-shadow: none !important;
    }
    html.tenant-selfservice.tenant-brz .time-pill {
      border-color: var(--brz-borde-2) !important;
      background: var(--brz-panel) !important;
      color: var(--brz-tinta) !important;
      font-variant-numeric: tabular-nums;
    }
    html.tenant-selfservice.tenant-brz .time-pill.border-neon,
    html.tenant-selfservice.tenant-brz .time-pill[data-sel] {
      background: var(--brz-cian) !important;
      color: #03181a !important;
      border-color: var(--brz-cian) !important;
      box-shadow: 0 0 16px rgba(62, 216, 216, 0.45) !important;
    }
    /* Las horas recomendadas traen un ámbar cableado inline. */
    html.tenant-selfservice.tenant-brz #smartSlotsContainer > div {
      background:
        radial-gradient(120% 140% at 100% 0%, rgba(62, 216, 216, 0.12), transparent 60%),
        var(--brz-panel) !important;
      border-color: var(--brz-borde-2) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    }
    html.tenant-selfservice.tenant-brz #smartSlotsContainer > div > div:first-child:not(.grid) { display: none !important; }
    html.tenant-selfservice.tenant-brz #smartSlotsContainer p:first-of-type {
      background: none !important;
      -webkit-text-fill-color: var(--brz-cian) !important;
      color: var(--brz-cian) !important;
      letter-spacing: 0.2em !important;
      font-size: 10px !important;
    }
    html.tenant-selfservice.tenant-brz #smartSlotsContainer p:first-of-type i {
      -webkit-text-fill-color: var(--brz-cian) !important;
      color: var(--brz-cian) !important;
    }
    html.tenant-selfservice.tenant-brz #smartSlotsContainer p:not(:first-of-type) { color: var(--brz-gris) !important; }
    html.tenant-selfservice.tenant-brz #smartSlotsContainer .smart-slot-pill {
      background: transparent !important;
      border-color: rgba(62, 216, 216, 0.40) !important;
      color: var(--brz-tinta) !important;
      box-shadow: none !important;
      font-variant-numeric: tabular-nums;
    }

    /* ── Botón continuar ───────────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz #btnContinueBar {
      background: linear-gradient(180deg,
        rgba(5, 9, 11, 0) 0%, rgba(5, 9, 11, 0.88) 36%, rgba(5, 9, 11, 0.98) 100%) !important;
      border-top: 0 !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    html.tenant-selfservice.tenant-brz #btnContinue {
      font-family: var(--brz-display) !important;
      font-size: 21px !important;
      font-weight: 400 !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase;
      border-radius: 16px !important;
      background: var(--brz-cian) !important;
      color: #03181a !important;
      box-shadow: 0 0 0 1px rgba(201, 246, 250, 0.5), 0 0 28px rgba(62, 216, 216, 0.35), 0 10px 28px rgba(0, 0, 0, 0.6) !important;
    }
    html.tenant-selfservice.tenant-brz #btnContinue:disabled {
      background: var(--brz-listones), rgba(234, 246, 247, 0.05) !important;
      color: rgba(234, 246, 247, 0.42) !important;
      box-shadow: inset 0 0 0 1px var(--brz-borde-2) !important;
      opacity: 1 !important;
    }

    /* ── Modal de complementos ─────────────────────────────────────────── */
    html.tenant-selfservice.tenant-brz #upsell-sheet {
      background: var(--brz-grafito) !important;
      border-color: var(--brz-borde-2) !important;
    }
    html.tenant-selfservice.tenant-brz #upsell-sheet h3 {
      font-family: var(--brz-display) !important;
      font-weight: 400 !important;
      font-size: 1.9rem !important;
      letter-spacing: 0.03em !important;
      color: #fff !important;
    }

    /* ── Paso 4: productos, club y formulario ──────────────────────────── */
    html.tenant-selfservice.tenant-brz #step4XSell .flex > div {
      background: var(--brz-panel) !important;
      border-color: var(--brz-borde) !important;
      border-radius: 16px !important;
    }
    html.tenant-selfservice.tenant-brz #step4XSell .flex p[style*="D4AF37"] {
      color: var(--brz-cian) !important;
      font-family: var(--brz-display) !important;
      font-size: 17px !important;
      font-weight: 400 !important;
      letter-spacing: 0.03em;
    }
    html.tenant-selfservice.tenant-brz #step4XSell .xsell-btn {
      background: transparent !important;
      border-color: rgba(62, 216, 216, 0.40) !important;
      color: var(--brz-cian) !important;
    }
    html.tenant-selfservice.tenant-brz .club-hero-card {
      background:
        radial-gradient(120% 140% at 0% 0%, rgba(62, 216, 216, 0.12), transparent 60%),
        var(--brz-panel) !important;
      border-color: var(--brz-borde-2) !important;
    }
    html.tenant-selfservice.tenant-brz .club-hero-card .ph-medal { color: var(--brz-cian) !important; }
    html.tenant-selfservice.tenant-brz .club-hero-card .grid p.text-lg { color: var(--brz-cian) !important; }
    html.tenant-selfservice.tenant-brz .club-hero-card a { color: var(--brz-cian) !important; }
    html.tenant-selfservice.tenant-brz #step4 :is(input, select, textarea) {
      background: var(--brz-panel) !important;
      border-color: var(--brz-borde-2) !important;
      color: var(--brz-tinta) !important;
    }
    html.tenant-selfservice.tenant-brz #step4 :is(input, select, textarea):focus {
      border-color: rgba(62, 216, 216, 0.6) !important;
      box-shadow: 0 0 0 3px rgba(62, 216, 216, 0.10) !important;
      outline: none !important;
    }

    /* ── Pie: club, reseñas y contacto ─────────────────────────────────── */
    html.tenant-selfservice.tenant-brz #clubBanner a,
    html.tenant-selfservice.tenant-brz #footerContact > div.rounded-2xl {
      background: var(--brz-listones), var(--brz-panel) !important;
      border: 1px solid var(--brz-borde) !important;
    }
    html.tenant-selfservice.tenant-brz #footerContact p[class*="uppercase"],
    html.tenant-selfservice.tenant-brz #clubBanner p[class*="uppercase"] {
      color: var(--brz-cian) !important;
      letter-spacing: 0.22em !important;
    }
    html.tenant-selfservice.tenant-brz #footerContact .rounded-xl,
    html.tenant-selfservice.tenant-brz #footerContact [class*="w-9"] {
      background: var(--brz-panel-2) !important;
      border-color: var(--brz-borde-2) !important;
      color: var(--brz-cian) !important;
    }
    html.tenant-selfservice.tenant-brz #footerContact i { color: var(--brz-cian) !important; }

    /* ── Tablet (768–1199): la reserva flota sobre su propio local ──────── */
    @media (min-width: 768px) and (max-width: 1199.98px) {
      html.tenant-selfservice.tenant-brz body { background-color: transparent !important; }
      html.tenant-selfservice.tenant-brz body::before {
        content: '';
        position: fixed;
        inset: -40px;
        z-index: -1;
        background: url('/brz/login-banner.webp') 40% 30% / cover no-repeat;
        filter: blur(26px) saturate(0.5) brightness(0.3);
        pointer-events: none;
      }
      html.tenant-selfservice.tenant-brz #bookingFrame {
        margin-top: 28px;
        margin-bottom: 28px;
        border-radius: 28px;
        background: var(--brz-negro);
        border: 1px solid var(--brz-borde-2) !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 40px 120px -20px rgba(0, 0, 0, 0.9) !important;
      }
    }

    /* ── Escritorio (≥ 1200): el local a la izquierda, la reserva a la derecha
       Misma geometría que la de Stiven Barber: el <header> del hero pasa a
       fixed y #bookingFrame deja espacio a su izquierda. Nada se mueve en el
       DOM, así que el teléfono no cambia. La franja de datos y los tres
       accesos comparten la barra superior (el flex-wrap de arriba ya los
       pone en fila; acá la franja toma lo que sobra). */
    @media (min-width: 1200px) {
      html.tenant-brz {
        --brz-lado: clamp(420px, 38vw, 640px);
        --brz-col:  900px;
        --brz-gut:  max(40px, calc((100vw - var(--brz-lado) - var(--brz-col)) / 2));
      }
      html.tenant-selfservice.tenant-brz body {
        background-image:
          radial-gradient(60rem 40rem at 100% -10%, rgba(62, 216, 216, 0.07), transparent 60%) !important;
        background-attachment: fixed !important;
      }
      html.tenant-selfservice.tenant-brz :is(#deskBrand, #deskResumen) { display: none !important; }
      html.tenant-selfservice.tenant-brz #bookingFrame {
        max-width: none;
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding-left: calc(var(--brz-lado) + var(--brz-gut));
        padding-right: var(--brz-gut);
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        background: transparent;
        overflow: visible;
      }
      html.tenant-selfservice.tenant-brz .booking-hero,
      html.tenant-selfservice.tenant-brz .booking-hero.hero-custom {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--brz-lado);
        min-height: 0 !important;
        z-index: 30;
        border-right: 1px solid var(--brz-borde);
      }
      html.tenant-selfservice.tenant-brz #heroSliderBg .hero-slide:is(:nth-child(1), :nth-child(3)) {
        background-size: auto 52%;
        -webkit-mask-image: linear-gradient(180deg, #000 36%, transparent 52%);
        mask-image: linear-gradient(180deg, #000 36%, transparent 52%);
      }
      /* La fachada más chica que ACADEMY: su letrero es apaisado y a 52 % se
         cortaba la palabra BRZ en un panel de ~550 px. */
      html.tenant-selfservice.tenant-brz #heroSliderBg .hero-slide:nth-child(1) {
        background-size: auto 40%;
        background-position: 30% top;
        -webkit-mask-image: linear-gradient(180deg, #000 28%, transparent 40%);
        mask-image: linear-gradient(180deg, #000 28%, transparent 40%);
      }
      html.tenant-selfservice.tenant-brz .booking-hero-overlay {
        background:
          radial-gradient(70% 40% at 35% 30%, rgba(62, 216, 216, 0.14), transparent 70%),
          linear-gradient(180deg,
            rgba(5, 9, 11, 0.40) 0%,
            rgba(5, 9, 11, 0.05) 18%,
            rgba(5, 9, 11, 0.20) 45%,
            rgba(5, 9, 11, 0.85) 68%,
            var(--brz-negro) 92%),
          linear-gradient(90deg, transparent 80%, rgba(5, 9, 11, 0.5) 100%) !important;
      }
      html.tenant-selfservice.tenant-brz .booking-hero > div:has(#shopNombre) { padding: 0 2.5rem 4.5rem !important; }
      html.tenant-selfservice.tenant-brz .booking-hero > div:has(#shopNombre)::before { width: 84px; height: 100px; }
      html.tenant-selfservice.tenant-brz #shopNombre { font-size: clamp(4.5rem, 6vw, 6.25rem) !important; }
      html.tenant-selfservice.tenant-brz #shopNombre::before { font-size: 11px; margin-bottom: 0.9rem; }
      html.tenant-selfservice.tenant-brz .gold-divider { width: 220px !important; }

      /* Barra superior: datos | quiénes somos | productos | academy. */
      html.tenant-selfservice.tenant-brz #bookingFrame > .info-strip {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-start !important;
        min-height: 72px;
        border-top: 0 !important;
        background: transparent !important;
      }
      html.tenant-selfservice.tenant-brz #bookingFrame > .info-strip > * {
        flex: none !important;
        padding: 0 18px !important;
        border: 0 !important;
      }
      html.tenant-selfservice.tenant-brz #bookingFrame > .info-strip > *:first-child { padding-left: 0 !important; }
      html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn {
        flex: 0 0 auto;
        width: auto;   /* .qs-btn base trae width:100% */
        flex-direction: row;
        min-height: 72px;
        padding: 0 0 0 22px !important;
        gap: 10px !important;
        background: transparent !important;
        border-left: 0 !important;
        white-space: nowrap;
        font-size: 17px !important;
      }
      html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn i { width: 32px; height: 32px; font-size: 15px !important; }
      @media (hover: hover) {
        html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn:hover,
        html.tenant-selfservice.tenant-brz .info-strip :is(a, button):hover {
          background: transparent !important;
          color: var(--brz-cian) !important;
        }
      }

      html.tenant-selfservice.tenant-brz #pasoProgreso {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 2.75rem !important;
      }
      html.tenant-selfservice.tenant-brz #bookingFrame > main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 8rem !important;
      }
      html.tenant-selfservice.tenant-brz #categoryPills {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-wrap: wrap;
      }
      html.tenant-selfservice.tenant-brz main section > h2,
      html.tenant-selfservice.tenant-brz #step2Heading { font-size: 3.6rem !important; }
      html.tenant-selfservice.tenant-brz #clubFranja,
      html.tenant-selfservice.tenant-brz #svcSearchWrap { max-width: 620px; }
      @media (min-width: 1360px) {
        html.tenant-selfservice.tenant-brz .category-section > div:has(> .service-option) {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 14px !important;
        }
      }
      html.tenant-selfservice.tenant-brz .category-section { margin-bottom: 1.75rem !important; }
      html.tenant-selfservice.tenant-brz .service-option { height: 100%; }
      html.tenant-selfservice.tenant-brz #barberosGrid.flex.flex-col:not(.gap-0) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 14px !important;
      }
      html.tenant-selfservice.tenant-brz #barberosGrid.flex.flex-col:not(.gap-0) > * {
        flex: 1 1 240px;
        width: auto !important;
      }
      html.tenant-selfservice.tenant-brz #barberosGrid.flex.flex-col:not(.gap-0) > :first-child { flex-basis: 100%; }
      html.tenant-selfservice.tenant-brz #step4 { max-width: 760px; }
      html.tenant-selfservice.tenant-brz #calendarCarousel {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 2px !important;
        padding-right: 0 !important;
        padding-top: 4px;
      }
      html.tenant-selfservice.tenant-brz #step4XSell .overflow-x-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      html.tenant-selfservice.tenant-brz #btnContinueBar {
        left: calc(var(--brz-lado) + var(--brz-gut));
        right: var(--brz-gut);
        width: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
      }
      html.tenant-selfservice.tenant-brz #btnContinueBar > div {
        max-width: none;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      html.tenant-selfservice.tenant-brz #btnContinue { max-width: 460px; margin-left: auto; }
    }

    @media (max-width: 380px) {
      html.tenant-selfservice.tenant-brz #shopNombre { font-size: 3.4rem !important; }
      html.tenant-selfservice.tenant-brz #bookingFrame > .qs-btn { font-size: 13.5px !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      html.tenant-selfservice.tenant-brz .booking-hero #heroSliderBg,
      html.tenant-selfservice.tenant-brz .booking-hero > div:has(#shopNombre)::before,
      html.tenant-selfservice.tenant-brz #shopNombre { animation: none !important; }
    }

    /* ══ BARBERÍA INVICTUS — barbería clásica contemporánea ══════════════
       Tema CLARO vía `tema: 'aura'` en el seed: hereda el scaffold completo
       de Aura —body, tarjetas, botón, progreso, nav— y acá se recolorea a
       marfil / tinta / cobre. El doble .tenant-barberiainvictus.tenant-aura
       es lo que le gana en especificidad a las reglas grises de Aura, mismo
       truco que ya usan newglow/omega/oren.

       DOS ROLES, no uno: el resto de la plataforma asume un solo acento
       para todo. Acá van separados a propósito —así lo pidió Ignacio—:
         · tinta #17213B  → texto, títulos, el botón principal.
         · cobre #B56F45  → SOLO detalles chicos: bordes de seleccionado,
           indicadores, separadores. Nunca texto de lectura, nunca una
           tarjeta entera.
       Sin verde neón, sin degradados, sin dorado brillante: superficie
       mate, hairline, y el cobre midiendo sus apariciones. */
    .tenant-barberiainvictus.tenant-aura,
    .tenant-barberiainvictus {
      --inv-marfil:   #F4F1EB;
      --inv-blanco:   #FFFFFF;
      --inv-tinta:    #17213B;
      --inv-carbon:   #171717;
      --inv-piedra:   #777873;
      --inv-cobre:    #B56F45;
      --inv-borde:    #D9D5CD;
      --accent:   #B56F45;
      --accent-r: 181; --accent-g: 111; --accent-b: 69;
      --neon-clr: #B56F45;
      --neon-r:   181; --neon-g: 111; --neon-b: 69;
      --body-bg:  #F4F1EB;
    }
    .tenant-barberiainvictus.tenant-aura body { background-color: var(--inv-marfil) !important; }

    /* ── Tipografía ────────────────────────────────────────────────────
       Cormorant Garamond para lo que titula (semibold, nunca en cuerpos de
       texto chicos: pierde legibilidad ahí). Manrope para todo lo demás.
       Se cargan solo para este tenant, mismo patrón que _fuentesClinica()
       y _fuentesViggo(): no son familias del resto de la plataforma. */
    .tenant-barberiainvictus #shopNombre,
    .tenant-barberiainvictus .cat-title,
    .tenant-barberiainvictus .category-section h3,
    .tenant-barberiainvictus .svc-name,
    .tenant-barberiainvictus .barber-name,
    .tenant-barberiainvictus .qs-head h3,
    .tenant-barberiainvictus h2.text-neon {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      font-weight: 600 !important;
    }
    .tenant-barberiainvictus body,
    .tenant-barberiainvictus .svc-desc,
    .tenant-barberiainvictus .duration-tag,
    .tenant-barberiainvictus .price-tag,
    .tenant-barberiainvictus #shopSlogan,
    .tenant-barberiainvictus .category-pill,
    .tenant-barberiainvictus .qs-body,
    .tenant-barberiainvictus input,
    .tenant-barberiainvictus #btnContinue {
      font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
    }
    .tenant-barberiainvictus #shopNombre { font-size: 2rem !important; letter-spacing: -0.01em !important; }
    .tenant-barberiainvictus .svc-name { font-size: 1.02rem !important; font-weight: 600 !important; }
    .tenant-barberiainvictus .price-tag { font-weight: 700 !important; }

    /* ── Hero ─────────────────────────────────────────────────────────
       La foto (herramientas en mármol negro, B&N) queda: es la prueba de
       oficio. El overlay de Aura es denso y frío (rgba(20,20,20,·)); acá
       se cambia el tono a carbón cálido y se equilibra para que el logo y
       el texto respiren sin que la imagen se sienta pesada. El fondo de
       la imagen en sí llega por --hero-banner (mecanismo self-service, ya
       gana en especificidad a Aura sin tocarlo acá). */
    .tenant-barberiainvictus.tenant-aura .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(23,23,23,0.42) 0%,
        rgba(23,23,23,0.30) 42%,
        rgba(23,23,23,0.82) 100%) !important;
    }
    .tenant-barberiainvictus.tenant-aura .hero-logo-ring {
      border: 2px solid rgba(244,241,235,0.85) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
    }
    .tenant-barberiainvictus.tenant-aura #shopNombre { color: #ffffff !important; }
    .tenant-barberiainvictus.tenant-aura #shopSlogan,
    .tenant-barberiainvictus.tenant-aura #shopSlogan span {
      color: rgba(255,255,255,0.75) !important;
    }
    /* El divisor es un separador — uno de los usos explícitos del cobre. */
    .tenant-barberiainvictus.tenant-aura .gold-divider {
      background: linear-gradient(90deg, transparent, var(--inv-cobre), transparent) !important;
      opacity: 0.85;
    }

    /* Sin el wrap gris de Aura ("Sobre nosotros" + WhatsApp Consultas):
       Invictus no publicó esa info y no es parte de su flujo — mostrarlo
       sería agregar una sección que el local nunca tuvo. */
    .tenant-barberiainvictus.tenant-aura #aura-sobre-wrap,
    .tenant-barberiainvictus.tenant-aura #aura-info-wa { display: none !important; }

    /* ── Navegación: Ubicación / Horario / Quiénes somos ─────────────────
       Las tres iguales, banda clara con íconos de cobre — mismo criterio
       de "las tres, iguales" que ya se aplicó en Mister Martínez y Viggo,
       adaptado a superficie clara. "Quiénes somos" entra acá por JS. */
    .tenant-barberiainvictus.tenant-aura .info-strip,
    .tenant-barberiainvictus.tenant-aura .info-strip[style] {
      background: var(--inv-blanco) !important;
      border-top: 1px solid var(--inv-borde) !important;
      border-bottom: 1px solid var(--inv-borde) !important;
      display: flex !important;
    }
    .tenant-barberiainvictus.tenant-aura .info-strip > * {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 0 !important;
      padding: 12px 8px !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      color: var(--inv-tinta) !important;
      background: transparent !important;
      border: 0 !important;
      border-right: 1px solid var(--inv-borde) !important;
      border-radius: 0 !important;
    }
    .tenant-barberiainvictus.tenant-aura .info-strip > *:last-child { border-right: 0 !important; }
    .tenant-barberiainvictus.tenant-aura .info-strip i { color: var(--inv-cobre) !important; font-size: 13px !important; }
    .tenant-barberiainvictus.tenant-aura .info-strip > *:hover { background: var(--inv-marfil) !important; }
    .tenant-barberiainvictus.tenant-aura .info-strip > *:active { background: #EFE6DC !important; }

    /* ── Progreso ─────────────────────────────────────────────────────
       Es un indicador — otro de los usos explícitos del cobre. Riel en
       beige, avance en cobre, sin brillo. */
    .tenant-barberiainvictus.tenant-aura #progressBar { background: var(--inv-cobre) !important; box-shadow: none !important; }
    .tenant-barberiainvictus.tenant-aura #progressTrack { background-color: var(--inv-borde) !important; }
    .tenant-barberiainvictus.tenant-aura #stepIndicatorText { color: var(--inv-tinta) !important; }
    .tenant-barberiainvictus.tenant-aura #progressPercentage { color: var(--inv-piedra) !important; }

    /* ── Encabezados de sección y categorías ─────────────────────────── */
    .tenant-barberiainvictus.tenant-aura .cat-title { color: var(--inv-tinta) !important; border-left-color: var(--inv-cobre) !important; }
    .tenant-barberiainvictus.tenant-aura .category-section h3 { color: var(--inv-tinta) !important; }

    .tenant-barberiainvictus.tenant-aura .category-pill {
      background: var(--inv-blanco) !important;
      border-color: var(--inv-borde) !important;
      color: var(--inv-piedra) !important;
      font-weight: 500 !important;
    }
    .tenant-barberiainvictus.tenant-aura .category-pill:hover {
      border-color: var(--inv-cobre) !important;
      color: var(--inv-tinta) !important;
    }
    /* Seleccionada: borde de cobre y un tinte apenas perceptible, no un
       relleno sólido — "de forma sutil, sin llenar toda la tarjeta". */
    .tenant-barberiainvictus.tenant-aura .category-pill.border-neon,
    .tenant-barberiainvictus.tenant-aura .category-pill.text-neon {
      border-color: var(--inv-cobre) !important;
      color: var(--inv-tinta) !important;
      background: rgba(181,111,69,0.08) !important;
      box-shadow: none !important;
      font-weight: 700 !important;
    }

    /* ── Tarjetas de servicio ─────────────────────────────────────────
       Blanco sobre marfil, borde hairline beige, sombra apenas insinuada,
       esquinas moderadas (no la pastilla redondeada del tema base). */
    .tenant-barberiainvictus.tenant-aura .service-option,
    .tenant-barberiainvictus.tenant-aura .barber-option {
      background: var(--inv-blanco) !important;
      border-color: var(--inv-borde) !important;
      border-radius: 14px !important;
      box-shadow: 0 1px 2px rgba(23,23,23,0.04), 0 1px 6px rgba(23,23,23,0.03) !important;
    }
    .tenant-barberiainvictus.tenant-aura .service-option .svc-name,
    .tenant-barberiainvictus.tenant-aura .service-option .price-tag,
    .tenant-barberiainvictus.tenant-aura .service-option .text-brand-neon,
    .tenant-barberiainvictus.tenant-aura .service-option .text-gray-200 {
      color: var(--inv-tinta) !important;
    }
    .tenant-barberiainvictus.tenant-aura .service-option .duration-tag { color: var(--inv-piedra) !important; }
    .tenant-barberiainvictus.tenant-aura .service-option .icon-svg { color: var(--inv-cobre) !important; filter: none !important; }
    .tenant-barberiainvictus.tenant-aura .service-option .icon-bg {
      background: rgba(181,111,69,0.08) !important;
      border-color: rgba(181,111,69,0.20) !important;
    }
    .tenant-barberiainvictus.tenant-aura .barber-option .barber-name { color: var(--inv-tinta) !important; }
    .tenant-barberiainvictus.tenant-aura .barber-option .text-brand-neon,
    /* La línea de disponibilidad usa el Tailwind text-gray-400 crudo en esta
       variante del card ("Cualquier barbero disponible" / "Disponible para
       reservas"), no .text-brand-neon — así que aura tampoco lo alcanzaba.
       2.54:1 sobre blanco, encontrado con check-contraste.mjs. */
    .tenant-barberiainvictus.tenant-aura .barber-option .text-gray-400,
    .tenant-barberiainvictus.tenant-aura .barber-option .text-neutral-400 {
      color: var(--inv-piedra) !important;
    }

    /* Seleccionado: el cobre marca el borde y una superficie apenas
       teñida — el mismo criterio de "sutil" que las categorías. */
    .tenant-barberiainvictus.tenant-aura .service-option.border-neon,
    .tenant-barberiainvictus.tenant-aura .barber-option.border-neon {
      border-color: var(--inv-cobre) !important;
      background: rgba(181,111,69,0.06) !important;
      box-shadow: 0 0 0 1px rgba(181,111,69,0.30), 0 2px 8px rgba(23,23,23,0.05) !important;
    }
    .tenant-barberiainvictus.tenant-aura .service-option.bg-brand-neon\/10,
    .tenant-barberiainvictus.tenant-aura .barber-option.bg-brand-neon\/10 {
      background: rgba(181,111,69,0.06) !important;
    }
    .tenant-barberiainvictus.tenant-aura .service-option.border-neon .icon-bg {
      background: rgba(181,111,69,0.14) !important;
      border-color: rgba(181,111,69,0.35) !important;
    }
    .tenant-barberiainvictus.tenant-aura .service-option.border-neon .icon-svg,
    .tenant-barberiainvictus.tenant-aura .service-option.border-neon .price-tag { color: var(--inv-tinta) !important; }
    .tenant-barberiainvictus.tenant-aura .barber-radio { border-color: var(--inv-borde) !important; background: transparent !important; }
    .tenant-barberiainvictus.tenant-aura .barber-option.border-neon .barber-radio {
      border-color: var(--inv-cobre) !important;
      background: var(--inv-cobre) !important;
    }
    .tenant-barberiainvictus.tenant-aura .service-option:hover,
    .tenant-barberiainvictus.tenant-aura .barber-option:hover { border-color: rgba(181,111,69,0.45) !important; }

    /* ── Paso 3: día y hora ───────────────────────────────────────────
       Mismo criterio: cobre para "elegido", nunca gris genérico. */
    .tenant-barberiainvictus.tenant-aura .day-btn.active {
      background: var(--inv-tinta) !important;
      border-color: var(--inv-tinta) !important;
      box-shadow: 0 2px 10px rgba(23,33,59,0.20) !important;
    }
    .tenant-barberiainvictus.tenant-aura .day-btn.active span { color: rgba(255,255,255,0.75) !important; }
    .tenant-barberiainvictus.tenant-aura .day-btn.active .day-num { color: #ffffff !important; }
    .tenant-barberiainvictus.tenant-aura .time-pill.bg-neon,
    .tenant-barberiainvictus.tenant-aura .time-pill[data-sel] {
      background: var(--inv-cobre) !important;
      border-color: var(--inv-cobre) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }
    .tenant-barberiainvictus.tenant-aura .time-pill:not([data-sel]):hover {
      background: rgba(181,111,69,0.08) !important;
      border-color: var(--inv-cobre) !important;
      color: var(--inv-tinta) !important;
    }

    /* ── Botón principal ────────────────────────────────────────────── */
    .tenant-barberiainvictus.tenant-aura #btnContinue {
      background: var(--inv-tinta) !important;
      color: #F8F6F1 !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 16px rgba(23,33,59,0.22) !important;
      border-radius: 14px !important;
    }
    .tenant-barberiainvictus.tenant-aura #btnContinue:hover { background: #1f2c4d !important; }
    .tenant-barberiainvictus.tenant-aura #btnContinueBar {
      background: rgba(244,241,235,0.90) !important;
      border-top: 1px solid var(--inv-borde) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }

    /* ── "Quiénes somos": botón y modal ───────────────────────────────
       El .qs-btn base nace oscuro (texto casi blanco sobre casi-negro):
       sobre marfil sería texto claro invisible, mismo bug que newglow
       documentó. Acá va claro, con el ícono en cobre. */
    .tenant-barberiainvictus.tenant-aura .qs-btn {
      color: var(--inv-tinta) !important;
      background: var(--inv-blanco) !important;
      border-bottom: 1px solid var(--inv-borde) !important;
    }
    .tenant-barberiainvictus.tenant-aura .qs-btn:active { background: var(--inv-marfil) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-btn i { color: var(--inv-cobre) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-modal { background: rgba(23,23,23,0.55) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-card { background: var(--inv-blanco) !important; border-color: var(--inv-borde) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-head { background: var(--inv-blanco) !important; border-bottom-color: var(--inv-borde) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-head h3 { color: var(--inv-tinta) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-head h3 i { color: var(--inv-cobre) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-x { color: var(--inv-piedra) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-x:active { color: var(--inv-tinta) !important; }
    .tenant-barberiainvictus.tenant-aura .qs-body { color: rgba(23,33,59,0.82) !important; }

    /* ── Sin arcade: apagar halos y brillos del tema base ─────────────── */
    .tenant-barberiainvictus.tenant-aura .text-neon,
    .tenant-barberiainvictus.tenant-aura h2.text-neon { text-shadow: none !important; color: var(--inv-tinta) !important; }
    .tenant-barberiainvictus.tenant-aura .bg-neon { box-shadow: none !important; }
    .tenant-barberiainvictus.tenant-aura .booking-hero::after { display: none !important; }
    .tenant-barberiainvictus.tenant-aura .service-option.border-neon::after,
    .tenant-barberiainvictus.tenant-aura .barber-option.border-neon::after { display: none !important; }

    /* ── Móvil ────────────────────────────────────────────────────────
       Categorías con scroll horizontal propio (no rompen el ancho de la
       pantalla), tarjetas con más aire interno, objetivos táctiles ≥44px. */
    @media (max-width: 640px) {
      .tenant-barberiainvictus.tenant-aura #shopNombre { font-size: 1.65rem !important; }
      .tenant-barberiainvictus.tenant-aura .service-option,
      .tenant-barberiainvictus.tenant-aura .barber-option { padding: 14px !important; min-height: 64px !important; }
      .tenant-barberiainvictus.tenant-aura .category-pill {
        white-space: nowrap !important;
        min-height: 40px !important;
        padding: 9px 16px !important;
      }
      .tenant-barberiainvictus.tenant-aura .info-strip > * { min-height: 46px !important; }
      .tenant-barberiainvictus.tenant-aura #btnContinue { min-height: 52px !important; }
    }


    /* ══ METROPOLITAN CLASSIC BARBERSHOP — barbería clásica, vieja escuela ══
       Tema CLARO vía `tema: 'aura'` en el seed, mismo mecanismo que
       barberiainvictus. Acá el acento es UNO SOLO —salvia, tal como pidió
       Ignacio— y se usa donde su propia lista lo dice: botón, progreso,
       seleccionado, íconos. Sin verde neón, sin azul tecnológico, sin
       dorado brillante: superficie mate y el salvia midiendo cuánto pesa.

       El naranjo #fc962d que traía SÍ era el color real de su AgendaPro
       (a diferencia de otros locales de la tanda) — se reemplaza por
       dirección de marca, no porque fuera un color ajeno. Ver la cabecera
       del seed. */
    .tenant-metropolitanbarber.tenant-aura,
    .tenant-metropolitanbarber {
      --mp-marfil:  #F4F1EB;
      --mp-blanco:  #FFFFFF;
      --mp-carbon:  #1B1B1A;
      --mp-piedra:  #A9A59C;
      --mp-piedra-texto: #726d63;
      --mp-salvia:  #7C9B6A;
      --accent:   #7C9B6A;
      --accent-r: 124; --accent-g: 155; --accent-b: 106;
      --neon-clr: #7C9B6A;
      --neon-r:   124; --neon-g: 155; --neon-b: 106;
      --body-bg:  #F4F1EB;
    }
    .tenant-metropolitanbarber.tenant-aura body { background-color: var(--mp-marfil) !important; }

    /* ── Tipografía ────────────────────────────────────────────────────
       Playfair Display para lo que titula —va con el logo serifado y el
       sombrero de copa—, Lato para todo lo que se lee. Solo este tenant
       las descarga, mismo patrón que _fuentesInvictus()/_fuentesViggo(). */
    .tenant-metropolitanbarber #shopNombre,
    .tenant-metropolitanbarber .cat-title,
    .tenant-metropolitanbarber .category-section h3,
    .tenant-metropolitanbarber .svc-name,
    .tenant-metropolitanbarber .barber-name,
    .tenant-metropolitanbarber .qs-head h3,
    .tenant-metropolitanbarber h2.text-neon {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 600 !important;
    }
    .tenant-metropolitanbarber body,
    .tenant-metropolitanbarber .svc-desc,
    .tenant-metropolitanbarber .duration-tag,
    .tenant-metropolitanbarber .price-tag,
    .tenant-metropolitanbarber #shopSlogan,
    .tenant-metropolitanbarber .category-pill,
    .tenant-metropolitanbarber .qs-body,
    .tenant-metropolitanbarber input,
    .tenant-metropolitanbarber #btnContinue {
      font-family: 'Lato', ui-sans-serif, system-ui, sans-serif !important;
    }
    .tenant-metropolitanbarber #shopNombre { font-size: 2rem !important; letter-spacing: -0.005em !important; }
    .tenant-metropolitanbarber .svc-name { font-size: 1.02rem !important; font-weight: 600 !important; }
    .tenant-metropolitanbarber .price-tag { font-weight: 700 !important; }

    /* ── Hero ─────────────────────────────────────────────────────────
       El logo ya es la marca —sombrero, pipa, wordmark serifado—, así que
       el banner NO lo repite: dentro del hero se ve la fachada/interior en
       blanco y negro (o casi), con un overlay pareja para que el logo de
       arriba y el texto se lean sin que la foto pese. */
    .tenant-metropolitanbarber.tenant-aura .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(27,27,26,0.46) 0%,
        rgba(27,27,26,0.34) 42%,
        rgba(27,27,26,0.84) 100%) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .hero-logo-ring {
      border: 2px solid rgba(244,241,235,0.88) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
      background: #ffffff !important;
    }
    .tenant-metropolitanbarber.tenant-aura #shopNombre { color: #ffffff !important; }
    .tenant-metropolitanbarber.tenant-aura #shopSlogan,
    .tenant-metropolitanbarber.tenant-aura #shopSlogan span {
      color: rgba(255,255,255,0.75) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .gold-divider {
      background: linear-gradient(90deg, transparent, var(--mp-salvia), transparent) !important;
      opacity: 0.85;
    }
    .tenant-metropolitanbarber.tenant-aura #aura-sobre-wrap,
    .tenant-metropolitanbarber.tenant-aura #aura-info-wa { display: none !important; }

    /* ── Navegación: Ubicación / Horario / Quiénes somos ─────────────── */
    .tenant-metropolitanbarber.tenant-aura .info-strip,
    .tenant-metropolitanbarber.tenant-aura .info-strip[style] {
      background: var(--mp-blanco) !important;
      border-top: 1px solid var(--mp-piedra) !important;
      border-bottom: 1px solid var(--mp-piedra) !important;
      display: flex !important;
    }
    .tenant-metropolitanbarber.tenant-aura .info-strip > * {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 0 !important;
      padding: 12px 8px !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      color: var(--mp-carbon) !important;
      background: transparent !important;
      border: 0 !important;
      border-right: 1px solid var(--mp-piedra) !important;
      border-radius: 0 !important;
    }
    .tenant-metropolitanbarber.tenant-aura .info-strip > *:last-child { border-right: 0 !important; }
    .tenant-metropolitanbarber.tenant-aura .info-strip i { color: var(--mp-salvia) !important; font-size: 13px !important; }
    .tenant-metropolitanbarber.tenant-aura .info-strip > *:hover { background: var(--mp-marfil) !important; }
    .tenant-metropolitanbarber.tenant-aura .info-strip > *:active { background: #E7E3D9 !important; }

    /* ── Progreso ─────────────────────────────────────────────────────── */
    .tenant-metropolitanbarber.tenant-aura #progressBar { background: var(--mp-salvia) !important; box-shadow: none !important; }
    .tenant-metropolitanbarber.tenant-aura #progressTrack { background-color: var(--mp-piedra) !important; }
    .tenant-metropolitanbarber.tenant-aura #stepIndicatorText { color: var(--mp-carbon) !important; }
    .tenant-metropolitanbarber.tenant-aura #progressPercentage { color: var(--mp-piedra-texto) !important; }

    /* ── Encabezados y categorías ─────────────────────────────────────── */
    .tenant-metropolitanbarber.tenant-aura .cat-title { color: var(--mp-carbon) !important; border-left-color: var(--mp-salvia) !important; }
    .tenant-metropolitanbarber.tenant-aura .category-section h3 { color: var(--mp-carbon) !important; }

    .tenant-metropolitanbarber.tenant-aura .category-pill {
      background: var(--mp-blanco) !important;
      border-color: var(--mp-piedra) !important;
      color: var(--mp-piedra-texto) !important;
      font-weight: 500 !important;
    }
    .tenant-metropolitanbarber.tenant-aura .category-pill:hover {
      border-color: var(--mp-salvia) !important;
      color: var(--mp-carbon) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .category-pill.border-neon,
    .tenant-metropolitanbarber.tenant-aura .category-pill.text-neon {
      border-color: var(--mp-salvia) !important;
      color: var(--mp-carbon) !important;
      background: rgba(124,155,106,0.10) !important;
      box-shadow: none !important;
      font-weight: 700 !important;
    }

    /* ── Tarjetas de servicio y barbero ───────────────────────────────
       Blancas sobre marfil, borde fino de piedra, esquinas moderadas —
       ni la pastilla redondeada del tema base ni sombras marcadas. */
    .tenant-metropolitanbarber.tenant-aura .service-option,
    .tenant-metropolitanbarber.tenant-aura .barber-option {
      background: var(--mp-blanco) !important;
      border-color: var(--mp-piedra) !important;
      border-radius: 10px !important;
      box-shadow: 0 1px 2px rgba(27,27,26,0.04) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .service-option .svc-name,
    .tenant-metropolitanbarber.tenant-aura .service-option .price-tag,
    .tenant-metropolitanbarber.tenant-aura .service-option .text-brand-neon,
    .tenant-metropolitanbarber.tenant-aura .service-option .text-gray-200 {
      color: var(--mp-carbon) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .service-option .duration-tag { color: var(--mp-piedra-texto) !important; }
    .tenant-metropolitanbarber.tenant-aura .service-option .icon-svg { color: var(--mp-salvia) !important; filter: none !important; }
    .tenant-metropolitanbarber.tenant-aura .service-option .icon-bg {
      background: rgba(124,155,106,0.10) !important;
      border-color: rgba(124,155,106,0.25) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .barber-option .barber-name { color: var(--mp-carbon) !important; }
    .tenant-metropolitanbarber.tenant-aura .barber-option .text-brand-neon { color: var(--mp-piedra-texto) !important; }
    /* La disponibilidad ("Disponible para reservas") va en un text-gray-400
       de Tailwind puesto directo en esta variante de tarjeta, no en
       .text-brand-neon — mismo defecto que se encontró y midió en
       barberiainvictus (2.54:1 sobre blanco). Se corrige acá desde el
       principio, sin esperar a que el guard lo señale. */
    .tenant-metropolitanbarber.tenant-aura .barber-option .text-gray-400,
    .tenant-metropolitanbarber.tenant-aura .barber-option .text-neutral-400 {
      color: var(--mp-piedra-texto) !important;
    }
    /* Cuts & Friends (demo claro sin tema propio, 07-10-2026): el mismo
       text-gray-400 del paso 2 (2.54:1 sobre blanco, check-contraste.mjs).
       Solo eso: el resto va con la plantilla estándar. #6b7280 = 4.83:1. */
    .tenant-cutsandfriends.tenant-aura .barber-option .text-gray-400,
    .tenant-cutsandfriends.tenant-aura .barber-option .text-neutral-400 {
      color: #6b7280 !important;
    }
    /* "Disponible para reservas" / "Primer horario disponible" van en
       .text-brand-neon, que Aura manda a #9CA3AF: es un indicador positivo,
       así que va en su teal oscurecido (#1f6b63, ~6:1 sobre blanco). */
    .tenant-cutsandfriends.tenant-aura .barber-option .text-brand-neon {
      color: #1f6b63 !important;
    }

    .tenant-metropolitanbarber.tenant-aura .service-option.border-neon,
    .tenant-metropolitanbarber.tenant-aura .barber-option.border-neon {
      border-color: var(--mp-salvia) !important;
      background: rgba(124,155,106,0.07) !important;
      box-shadow: 0 0 0 1px rgba(124,155,106,0.32), 0 2px 8px rgba(27,27,26,0.05) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .service-option.bg-brand-neon\/10,
    .tenant-metropolitanbarber.tenant-aura .barber-option.bg-brand-neon\/10 {
      background: rgba(124,155,106,0.07) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .service-option.border-neon .icon-bg {
      background: rgba(124,155,106,0.16) !important;
      border-color: rgba(124,155,106,0.40) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .service-option.border-neon .icon-svg,
    .tenant-metropolitanbarber.tenant-aura .service-option.border-neon .price-tag { color: var(--mp-carbon) !important; }
    .tenant-metropolitanbarber.tenant-aura .barber-radio { border-color: var(--mp-piedra) !important; background: transparent !important; }
    .tenant-metropolitanbarber.tenant-aura .barber-option.border-neon .barber-radio {
      border-color: var(--mp-salvia) !important;
      background: var(--mp-salvia) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .service-option:hover,
    .tenant-metropolitanbarber.tenant-aura .barber-option:hover { border-color: rgba(124,155,106,0.55) !important; }

    /* ── Paso 3: día y hora ───────────────────────────────────────────── */
    .tenant-metropolitanbarber.tenant-aura .day-btn.active {
      background: var(--mp-salvia) !important;
      border-color: var(--mp-salvia) !important;
      box-shadow: 0 2px 10px rgba(124,155,106,0.28) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .day-btn.active span { color: rgba(27,27,26,0.68) !important; }
    .tenant-metropolitanbarber.tenant-aura .day-btn.active .day-num { color: var(--mp-carbon) !important; }
    .tenant-metropolitanbarber.tenant-aura .time-pill.bg-neon,
    .tenant-metropolitanbarber.tenant-aura .time-pill[data-sel] {
      background: var(--mp-salvia) !important;
      border-color: var(--mp-salvia) !important;
      color: var(--mp-carbon) !important;
      box-shadow: none !important;
    }
    .tenant-metropolitanbarber.tenant-aura .time-pill:not([data-sel]):hover {
      background: rgba(124,155,106,0.10) !important;
      border-color: var(--mp-salvia) !important;
      color: var(--mp-carbon) !important;
    }

    /* ── Botón principal ────────────────────────────────────────────────
       Texto carbón, no blanco: 5.54:1 contra 3.11:1. Ver la cabecera
       del seed — es el propio criterio que pidió Ignacio ("según
       contraste"), aplicado con el número medido. */
    .tenant-metropolitanbarber.tenant-aura #btnContinue {
      background: var(--mp-salvia) !important;
      color: var(--mp-carbon) !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 16px rgba(124,155,106,0.30) !important;
      border-radius: 10px !important;
    }
    .tenant-metropolitanbarber.tenant-aura #btnContinue:hover { background: #6f8d5d !important; }
    .tenant-metropolitanbarber.tenant-aura #btnContinueBar {
      background: rgba(244,241,235,0.90) !important;
      border-top: 1px solid var(--mp-piedra) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }

    /* ── "Quiénes somos": botón y modal ──────────────────────────────── */
    .tenant-metropolitanbarber.tenant-aura .qs-btn {
      color: var(--mp-carbon) !important;
      background: var(--mp-blanco) !important;
      border-bottom: 1px solid var(--mp-piedra) !important;
    }
    .tenant-metropolitanbarber.tenant-aura .qs-btn:active { background: var(--mp-marfil) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-btn i { color: var(--mp-salvia) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-modal { background: rgba(27,27,26,0.55) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-card { background: var(--mp-blanco) !important; border-color: var(--mp-piedra) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-head { background: var(--mp-blanco) !important; border-bottom-color: var(--mp-piedra) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-head h3 { color: var(--mp-carbon) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-head h3 i { color: var(--mp-salvia) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-x { color: var(--mp-piedra-texto) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-x:active { color: var(--mp-carbon) !important; }
    .tenant-metropolitanbarber.tenant-aura .qs-body { color: rgba(27,27,26,0.82) !important; }

    /* ── Sin brillo ni neón ────────────────────────────────────────────── */
    .tenant-metropolitanbarber.tenant-aura .text-neon,
    .tenant-metropolitanbarber.tenant-aura h2.text-neon { text-shadow: none !important; color: var(--mp-carbon) !important; }
    .tenant-metropolitanbarber.tenant-aura .bg-neon { box-shadow: none !important; }
    .tenant-metropolitanbarber.tenant-aura .booking-hero::after { display: none !important; }
    .tenant-metropolitanbarber.tenant-aura .service-option.border-neon::after,
    .tenant-metropolitanbarber.tenant-aura .barber-option.border-neon::after { display: none !important; }

    /* ── Móvil ─────────────────────────────────────────────────────────── */
    @media (max-width: 640px) {
      .tenant-metropolitanbarber.tenant-aura #shopNombre { font-size: 1.65rem !important; }
      .tenant-metropolitanbarber.tenant-aura .service-option,
      .tenant-metropolitanbarber.tenant-aura .barber-option { padding: 14px !important; min-height: 64px !important; }
      .tenant-metropolitanbarber.tenant-aura .category-pill {
        white-space: nowrap !important;
        min-height: 40px !important;
        padding: 9px 16px !important;
      }
      .tenant-metropolitanbarber.tenant-aura .info-strip > * { min-height: 46px !important; }
      .tenant-metropolitanbarber.tenant-aura #btnContinue { min-height: 52px !important; }
    }


    /* ══ THE CAVE BARBERSHOP & SPA — nocturna, refinada, local activo ══
       Se queda en tema OSCURO (a diferencia de barberiainvictus y
       metropolitanbarber): "nocturna" y "de nivel alto" es justamente lo
       que el negro profundo ya da por defecto en la plataforma. El trabajo
       acá es afinar los valores exactos y contener el dorado: un solo
       acento, y solo donde algo está seleccionado o importa. */
    .tenant-thecavebarber {
      --cv-negro:   #0E0E0E;
      --cv-carbon:  #181818;
      --cv-carbon2: #212121;
      --cv-marfil:  #F3EEE2;
      --cv-gris:    #A8A39A;
      --cv-oro:     #C79A32;
      --cv-borde:   rgba(168,163,154,0.16);
      --accent:   #C79A32;
      --accent-r: 199; --accent-g: 154; --accent-b: 50;
      --neon-clr: #C79A32;
      --neon-r:   199; --neon-g: 154; --neon-b: 50;
      --body-bg:  #0E0E0E;
    }
    .tenant-thecavebarber body { background-color: var(--cv-negro) !important; }

    /* ── Tipografía ────────────────────────────────────────────────────
       Cormorant Garamond para lo que titula —conecta con el logo y su
       barroquismo gótico—, Montserrat para el resto: precios, botones,
       texto general, legible en celular. Solo este tenant las carga. */
    .tenant-thecavebarber #shopNombre,
    .tenant-thecavebarber .cat-title,
    .tenant-thecavebarber .category-section h3,
    .tenant-thecavebarber .svc-name,
    .tenant-thecavebarber .barber-name,
    .tenant-thecavebarber .qs-head h3,
    .tenant-thecavebarber h2.text-neon {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      font-weight: 600 !important;
    }
    .tenant-thecavebarber body,
    .tenant-thecavebarber .svc-desc,
    .tenant-thecavebarber .duration-tag,
    .tenant-thecavebarber .price-tag,
    .tenant-thecavebarber #shopSlogan,
    .tenant-thecavebarber .category-pill,
    .tenant-thecavebarber .qs-body,
    .tenant-thecavebarber input,
    .tenant-thecavebarber #btnContinue {
      font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif !important;
    }
    .tenant-thecavebarber #shopNombre { font-size: 2rem !important; letter-spacing: -0.005em !important; }
    .tenant-thecavebarber .svc-name { font-size: 1.02rem !important; font-weight: 600 !important; color: var(--cv-marfil) !important; }
    .tenant-thecavebarber .price-tag { font-weight: 700 !important; color: var(--cv-marfil) !important; }
    .tenant-thecavebarber .duration-tag { color: var(--cv-gris) !important; }

    /* ── Hero ─────────────────────────────────────────────────────────
       El logo YA es la marca —caverna, poste, wordmark gótico— así que no
       se repite nada más: overlay negro parejo, más oscuro que el resto de
       la pantalla, para que el logo y el texto floten sobre la foto sin
       pelear con ella. */
    .tenant-thecavebarber .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(14,14,14,0.58) 0%,
        rgba(14,14,14,0.48) 42%,
        rgba(14,14,14,0.90) 100%) !important;
    }
    /* El logo nuevo (ThecaveLogo.png) trae su propio contorno irregular —la
       "boca de caverna"— sobre fondo transparente. El aro circular del tema
       base lo recortaba a un círculo, comiéndose las puntas del dibujo. Acá
       se saca el círculo y el recorte: se ve completo, en su forma, sin
       fondo ni borde propio —ya lo tiene dibujado—, apenas una sombra para
       que se despegue de la foto. "Tamaño medio": más ancho que el aro de
       96px de antes porque ahora tiene que mostrar el óvalo entero, no un
       recorte. */
    .tenant-thecavebarber .hero-logo-ring {
      width: 176px !important;
      height: 132px !important;
      border-radius: 0 !important;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
    }
    .tenant-thecavebarber .hero-logo-ring img#shopLogo {
      border-radius: 0 !important;
      object-fit: contain !important;
    }
    @media (max-width: 640px) {
      .tenant-thecavebarber .hero-logo-ring { width: 138px !important; height: 104px !important; }
    }
    .tenant-thecavebarber #shopNombre { color: var(--cv-marfil) !important; text-shadow: 0 2px 16px rgba(0,0,0,0.7) !important; }
    .tenant-thecavebarber #shopSlogan,
    .tenant-thecavebarber #shopSlogan span { color: rgba(243,238,226,0.72) !important; }
    /* El divisor es el único adorno del hero — cobra el dorado como acento
       de separador, no como brillo. */
    .tenant-thecavebarber .gold-divider {
      background: linear-gradient(90deg, transparent, var(--cv-oro), transparent) !important;
      opacity: 0.7;
    }

    /* ── Navegación: Ubicación / Horario / Quiénes somos ─────────────── */
    .tenant-thecavebarber .info-strip,
    .tenant-thecavebarber .info-strip[style] {
      background: var(--cv-carbon) !important;
      border-top: 1px solid var(--cv-borde) !important;
      border-bottom: 1px solid var(--cv-borde) !important;
      display: flex !important;
    }
    .tenant-thecavebarber .info-strip > * {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 0 !important;
      padding: 12px 8px !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      color: var(--cv-marfil) !important;
      background: transparent !important;
      border: 0 !important;
      border-right: 1px solid var(--cv-borde) !important;
      border-radius: 0 !important;
    }
    .tenant-thecavebarber .info-strip > *:last-child { border-right: 0 !important; }
    .tenant-thecavebarber .info-strip i { color: var(--cv-oro) !important; font-size: 13px !important; }
    .tenant-thecavebarber .info-strip > *:hover { background: var(--cv-carbon2) !important; }
    .tenant-thecavebarber .info-strip > *:active { background: rgba(199,154,50,0.10) !important; }

    /* ── Progreso ─────────────────────────────────────────────────────── */
    .tenant-thecavebarber #progressBar { background: var(--cv-oro) !important; box-shadow: none !important; }
    .tenant-thecavebarber #progressTrack { background-color: var(--cv-borde) !important; }
    .tenant-thecavebarber #stepIndicatorText { color: var(--cv-marfil) !important; }
    .tenant-thecavebarber #progressPercentage { color: var(--cv-gris) !important; }

    /* ── Encabezados y categorías ─────────────────────────────────────── */
    .tenant-thecavebarber .cat-title { color: var(--cv-marfil) !important; border-left-color: var(--cv-oro) !important; }
    .tenant-thecavebarber .category-section h3 { color: var(--cv-marfil) !important; }

    .tenant-thecavebarber .category-pill {
      background: var(--cv-carbon) !important;
      border-color: var(--cv-borde) !important;
      color: var(--cv-gris) !important;
      font-weight: 500 !important;
    }
    .tenant-thecavebarber .category-pill:hover {
      border-color: rgba(199,154,50,0.45) !important;
      color: var(--cv-marfil) !important;
    }
    /* Seleccionada: el dorado marca, no llena. Borde y un tinte apenas
       perceptible — "no llenar toda la pantalla de dorado" es literal. */
    .tenant-thecavebarber .category-pill.border-neon,
    .tenant-thecavebarber .category-pill.text-neon {
      border-color: var(--cv-oro) !important;
      color: var(--cv-marfil) !important;
      background: rgba(199,154,50,0.10) !important;
      box-shadow: none !important;
      font-weight: 700 !important;
    }

    /* ── Tarjetas de servicio y barbero ───────────────────────────────
       Carbón sobre negro, borde fino gris oscuro (NO dorado por defecto),
       esquinas moderadas, sin sombra marcada. */
    .tenant-thecavebarber .service-option,
    .tenant-thecavebarber .barber-option {
      background: var(--cv-carbon) !important;
      border-color: var(--cv-borde) !important;
      border-radius: 12px !important;
      box-shadow: none !important;
    }
    .tenant-thecavebarber .service-option .svc-name,
    .tenant-thecavebarber .service-option .price-tag,
    .tenant-thecavebarber .service-option .text-brand-neon,
    .tenant-thecavebarber .service-option .text-gray-200 {
      color: var(--cv-marfil) !important;
    }
    .tenant-thecavebarber .service-option .icon-svg { color: var(--cv-oro) !important; filter: none !important; }
    .tenant-thecavebarber .service-option .icon-bg {
      background: rgba(199,154,50,0.08) !important;
      border-color: rgba(199,154,50,0.22) !important;
    }
    .tenant-thecavebarber .barber-option .barber-name { color: var(--cv-marfil) !important; }
    .tenant-thecavebarber .barber-option .text-brand-neon { color: var(--cv-gris) !important; }
    /* En tema oscuro el text-gray-400 de la disponibilidad SÍ se lee bien
       sobre negro (7:1+) — el defecto que se corrigió en barberiainvictus
       y metropolitanbarber era propio del tema claro. Se deja igual acá,
       verificado con check-contraste.mjs. */

    /* Seleccionado: borde y tinte de oro, sutiles — el único momento en
       que el dorado "es importante", tal como pidió Ignacio. */
    .tenant-thecavebarber .service-option.border-neon,
    .tenant-thecavebarber .barber-option.border-neon {
      border-color: var(--cv-oro) !important;
      background: rgba(199,154,50,0.06) !important;
      box-shadow: 0 0 0 1px rgba(199,154,50,0.30) !important;
    }
    .tenant-thecavebarber .service-option.bg-brand-neon\/10,
    .tenant-thecavebarber .barber-option.bg-brand-neon\/10 {
      background: rgba(199,154,50,0.06) !important;
    }
    .tenant-thecavebarber .service-option.border-neon .icon-bg {
      background: rgba(199,154,50,0.14) !important;
      border-color: rgba(199,154,50,0.35) !important;
    }
    .tenant-thecavebarber .barber-radio { border-color: var(--cv-borde) !important; background: transparent !important; }
    .tenant-thecavebarber .barber-option.border-neon .barber-radio {
      border-color: var(--cv-oro) !important;
      background: var(--cv-oro) !important;
    }
    .tenant-thecavebarber .service-option:hover,
    .tenant-thecavebarber .barber-option:hover { border-color: rgba(199,154,50,0.35) !important; }

    /* ── Paso 3: día y hora ───────────────────────────────────────────── */
    .tenant-thecavebarber .day-btn.active {
      background: var(--cv-oro) !important;
      border-color: var(--cv-oro) !important;
      box-shadow: 0 2px 10px rgba(199,154,50,0.25) !important;
    }
    .tenant-thecavebarber .day-btn.active span { color: rgba(14,14,14,0.65) !important; }
    .tenant-thecavebarber .day-btn.active .day-num { color: var(--cv-negro) !important; }
    .tenant-thecavebarber .time-pill.bg-neon,
    .tenant-thecavebarber .time-pill[data-sel] {
      background: var(--cv-oro) !important;
      border-color: var(--cv-oro) !important;
      color: var(--cv-negro) !important;
      box-shadow: none !important;
    }
    .tenant-thecavebarber .time-pill:not([data-sel]):hover {
      background: rgba(199,154,50,0.10) !important;
      border-color: var(--cv-oro) !important;
      color: var(--cv-marfil) !important;
    }

    /* ── Botón principal ────────────────────────────────────────────────
       Oro con texto NEGRO, no marfil: 7.44:1 contra 2.24:1. Es lo que
       pidió Ignacio ("evita amarillo neón"), medido. */
    .tenant-thecavebarber #btnContinue {
      background: var(--cv-oro) !important;
      color: var(--cv-negro) !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 16px rgba(199,154,50,0.22) !important;
      border-radius: 12px !important;
    }
    .tenant-thecavebarber #btnContinue:hover { background: #b98c2a !important; }
    .tenant-thecavebarber #btnContinueBar {
      background: rgba(14,14,14,0.90) !important;
      border-top: 1px solid var(--cv-borde) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }

    /* ── "Quiénes somos": botón y modal ──────────────────────────────── */
    .tenant-thecavebarber .qs-btn {
      color: var(--cv-marfil) !important;
      background: var(--cv-carbon) !important;
      border-bottom: 1px solid var(--cv-borde) !important;
    }
    .tenant-thecavebarber .qs-btn:active { background: var(--cv-carbon2) !important; }
    .tenant-thecavebarber .qs-btn i { color: var(--cv-oro) !important; }
    .tenant-thecavebarber .qs-modal { background: rgba(0,0,0,0.65) !important; }
    .tenant-thecavebarber .qs-card { background: var(--cv-carbon) !important; border-color: var(--cv-borde) !important; }
    .tenant-thecavebarber .qs-head { background: var(--cv-carbon) !important; border-bottom-color: var(--cv-borde) !important; }
    .tenant-thecavebarber .qs-head h3 { color: var(--cv-marfil) !important; }
    .tenant-thecavebarber .qs-head h3 i { color: var(--cv-oro) !important; }
    .tenant-thecavebarber .qs-x { color: var(--cv-gris) !important; }
    .tenant-thecavebarber .qs-x:active { color: var(--cv-marfil) !important; }
    .tenant-thecavebarber .qs-body { color: rgba(243,238,226,0.82) !important; }

    /* ── Sin gaming: apagar halos y brillos del tema base ──────────────── */
    .tenant-thecavebarber .text-neon,
    .tenant-thecavebarber h2.text-neon { text-shadow: none !important; color: var(--cv-marfil) !important; }
    .tenant-thecavebarber .bg-neon { box-shadow: none !important; }
    .tenant-thecavebarber .booking-hero::after { display: none !important; }
    .tenant-thecavebarber .service-option.border-neon::after,
    .tenant-thecavebarber .barber-option.border-neon::after { display: none !important; }
    .tenant-thecavebarber .hero-logo-ring { animation: none !important; }

    /* ── Móvil ─────────────────────────────────────────────────────────── */
    @media (max-width: 640px) {
      .tenant-thecavebarber #shopNombre { font-size: 1.65rem !important; }
      .tenant-thecavebarber .service-option,
      .tenant-thecavebarber .barber-option { padding: 14px !important; min-height: 64px !important; }
      .tenant-thecavebarber .category-pill {
        white-space: nowrap !important;
        min-height: 40px !important;
        padding: 9px 16px !important;
      }
      .tenant-thecavebarber .info-strip > * { min-height: 46px !important; }
      .tenant-thecavebarber #btnContinue { min-height: 52px !important; }
    }


    /* ══ CALAKA BARBERSHOP — neo tradicional, urbana, con actitud ══════
       Tema OSCURO (se queda, como thecavebarber): "urbana, calle, con
       personalidad" no pide un fondo claro. El logo ya tiene toda la
       personalidad —calavera, tatuaje, tipografía vintage—; la interfaz
       alrededor va ordenada y con UN SOLO acento fuerte. */
    .tenant-calaka {
      --ca-negro:   #121212;
      --ca-carbon:  #1D1D1D;
      --ca-verde:   #30483D;
      --ca-crema:   #F1E7D7;
      --ca-gris:    #B8AC98;
      --ca-coral:   #C8614B;
      --ca-mostaza: #D0A52A;
      --ca-borde:   rgba(184,172,152,0.16);
      --accent:   #C8614B;
      --accent-r: 200; --accent-g: 97; --accent-b: 75;
      --neon-clr: #C8614B;
      --neon-r:   200; --neon-g: 97; --neon-b: 75;
      --body-bg:  #121212;
    }
    .tenant-calaka body { background-color: var(--ca-negro) !important; }

    /* ── Tipografía ────────────────────────────────────────────────────
       Alfa Slab One en títulos cortos, nombres de sección y etiquetas
       importantes —tiene fuerza de afiche, no se puede leer repetido en
       una lista—. Barlow para todo lo que se lee seguido: nombre de
       servicio, de barbero, precios, botones. El nombre del local
       ("Calaka Barbershop") tiene su propio tratamiento más abajo — Rye,
       no Alfa Slab One: decisión del 2026-08-31, western/rótulo de
       tatuaje en vez del bloque tipo afiche. */
    .tenant-calaka .cat-title,
    .tenant-calaka .category-section h3,
    .tenant-calaka h2.text-neon,
    .tenant-calaka .qs-head h3 {
      font-family: 'Alfa Slab One', 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
      font-weight: 400 !important;
      letter-spacing: -0.01em !important;
    }
    .tenant-calaka body,
    .tenant-calaka .svc-name,
    .tenant-calaka .barber-name,
    .tenant-calaka .svc-desc,
    .tenant-calaka .duration-tag,
    .tenant-calaka .price-tag,
    .tenant-calaka #shopSlogan,
    .tenant-calaka .category-pill,
    .tenant-calaka .qs-body,
    .tenant-calaka input,
    .tenant-calaka #btnContinue {
      font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif !important;
    }
    .tenant-calaka .svc-name { font-size: 1.02rem !important; font-weight: 600 !important; color: var(--ca-crema) !important; }
    .tenant-calaka .price-tag { font-weight: 700 !important; color: var(--ca-crema) !important; }
    .tenant-calaka .duration-tag { color: var(--ca-gris) !important; }

    /* ── El nombre: Rye, blanco ──────────────────────────────────────────
       Tercera vuelta (31-08): fuera el degradado dorado-naranjo, que no
       se leía sobre la foto ni con contorno ni sin él —el problema no
       era el trazo, era el color: un naranjo apagado sobre una foto de
       interior oscuro con luces cálidas se funde con el fondo—. Blanco
       sólido, sin background-clip ni transparencia: contraste directo,
       sin depender de qué haya detrás en cada punto de la letra.

       Bajado a 8.5rem de margin-top: con 1.75rem y después con 4rem el
       título seguía cruzando a la altura de las caras del grupo. El logo,
       que antes ocupaba ese espacio arriba, ahora es una placa aparte en
       la esquina — el hueco que dejó hay que llenarlo a mano.

       8.5rem es el TECHO medido, no un número redondo: a 9.5rem el hero
       crece de 300 a 348px porque el contenido desborda su alto fijo y
       empuja la barra de navegación. Con 8.5 el título cae en 221-255px
       dentro del hero (37-337) y quedan 45px de aire bajo el eslogan. */
    .tenant-calaka #shopNombre {
      font-family: 'Rye', 'Alfa Slab One', serif !important;
      font-weight: 400 !important;
      font-size: 2.1rem !important;
      letter-spacing: 0 !important;
      margin-top: 8.5rem !important;
      color: #ffffff !important;
      text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 4px 16px rgba(0,0,0,0.75) !important;
    }
    @media (max-width: 640px) {
      /* Calaka NO reduce el alto del hero en móvil (a diferencia de
         viggomhc o mistermartinez), así que siguen siendo los mismos
         300px y el margen puede ser casi igual al de escritorio: con
         8rem el título cae en 176-203px y quedan 59px de aire. */
      .tenant-calaka #shopNombre { font-size: 1.7rem !important; margin-top: 8rem !important; }
    }

    /* ── El logo, en la esquina ───────────────────────────────────────────
       Decisión del 2026-08-31: sale del centro del hero —donde competía
       con el nombre recién rediseñado— y pasa a una placa en la esquina
       superior derecha. La izquierda queda libre a propósito: ahí vive el
       botón "atrás", fixed, fuera del flujo del hero (top-8 left-5); un
       logo ahí se le habría montado encima.
       El archivo (calaka/logo.png) es cuadrado y sin transparencia —ya
       trae su fondo negro pintado—, así que "su propia forma" es ese
       cuadrado: se saca el aro circular del tema base, no el recorte
       (no hay silueta irregular que revelar, a diferencia de The Cave). */
    .tenant-calaka #heroLogoArea {
      position: absolute !important;
      top: 16px !important;
      right: 16px !important;
      left: auto !important;
      margin: 0 !important;
      z-index: 6;
    }
    .tenant-calaka .hero-logo-ring {
      width: 64px !important;
      height: 64px !important;
      border-radius: 10px !important;
      border: 1px solid rgba(241,231,215,0.30) !important;
      box-shadow: 0 4px 14px rgba(0,0,0,0.55) !important;
      background: #000000 !important;
    }
    .tenant-calaka .hero-logo-ring img#shopLogo {
      border-radius: 9px !important;
      object-fit: cover !important;
    }
    @media (max-width: 640px) {
      .tenant-calaka #heroLogoArea { top: 12px !important; right: 12px !important; }
      .tenant-calaka .hero-logo-ring { width: 52px !important; height: 52px !important; border-radius: 8px !important; }
      .tenant-calaka .hero-logo-ring img#shopLogo { border-radius: 7px !important; }
    }

    /* ── Hero ─────────────────────────────────────────────────────────
       El logo va completo, sin repetirse en el resto de la interfaz —ni
       otra calavera, ni un tatuaje decorativo en ningún lado—. Overlay
       parejo para que el logo (ya cargado de color) y el nombre no
       compitan con la foto del equipo. */
    .tenant-calaka .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(18,18,18,0.50) 0%,
        rgba(18,18,18,0.38) 42%,
        rgba(18,18,18,0.86) 100%) !important;
    }
    /* El aro y la posición del logo ya quedaron definidos arriba, en el
       bloque "El logo, en la esquina" — acá no se repiten para no pelear
       por especificidad/orden con esas reglas. Lo mismo el color del
       nombre: lo fija el bloque "Rye, degradado y contorno". */
    .tenant-calaka #shopSlogan,
    .tenant-calaka #shopSlogan span { color: rgba(241,231,215,0.72) !important; }
    /* El único uso del mostaza fuera de un ícono: el divisor bajo el
       nombre. Es justo el "detalle mínimo" que pide el brief. */
    .tenant-calaka .gold-divider {
      background: linear-gradient(90deg, transparent, var(--ca-mostaza), transparent) !important;
      opacity: 0.75;
    }

    /* ── Navegación: Ubicación / Horario / Quiénes somos ─────────────── */
    .tenant-calaka .info-strip,
    .tenant-calaka .info-strip[style] {
      background: var(--ca-carbon) !important;
      border-top: 1px solid var(--ca-borde) !important;
      border-bottom: 1px solid var(--ca-borde) !important;
      display: flex !important;
    }
    .tenant-calaka .info-strip > * {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 0 !important;
      padding: 12px 8px !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      color: var(--ca-crema) !important;
      background: transparent !important;
      border: 0 !important;
      border-right: 1px solid var(--ca-borde) !important;
      border-radius: 0 !important;
    }
    .tenant-calaka .info-strip > *:last-child { border-right: 0 !important; }
    .tenant-calaka .info-strip i { color: var(--ca-coral) !important; font-size: 13px !important; }
    .tenant-calaka .info-strip > *:hover { background: #232323 !important; }
    .tenant-calaka .info-strip > *:active { background: rgba(200,97,75,0.10) !important; }

    /* ── Progreso ─────────────────────────────────────────────────────── */
    .tenant-calaka #progressBar { background: var(--ca-coral) !important; box-shadow: none !important; }
    .tenant-calaka #progressTrack { background-color: var(--ca-borde) !important; }
    .tenant-calaka #stepIndicatorText { color: var(--ca-crema) !important; }
    .tenant-calaka #progressPercentage { color: var(--ca-gris) !important; }

    /* ── Encabezados y categorías ─────────────────────────────────────── */
    .tenant-calaka .cat-title { color: var(--ca-crema) !important; border-left-color: var(--ca-coral) !important; }
    .tenant-calaka .category-section h3 { color: var(--ca-crema) !important; }

    .tenant-calaka .category-pill {
      background: var(--ca-carbon) !important;
      border-color: var(--ca-borde) !important;
      color: var(--ca-gris) !important;
      font-weight: 500 !important;
    }
    .tenant-calaka .category-pill:hover {
      border-color: rgba(200,97,75,0.45) !important;
      color: var(--ca-crema) !important;
    }
    .tenant-calaka .category-pill.border-neon,
    .tenant-calaka .category-pill.text-neon {
      border-color: var(--ca-coral) !important;
      color: var(--ca-crema) !important;
      background: rgba(200,97,75,0.10) !important;
      box-shadow: none !important;
      font-weight: 700 !important;
    }

    /* ── Tarjetas de servicio y barbero ───────────────────────────────
       Carbón sobre negro, borde gris fino, esquinas moderadas, sin
       sombra ni brillo. El ícono va sobre un círculo VERDE —el círculo
       del logo, sin dibujar nada nuevo— con el glyph en crema, no coral:
       coral sobre ese verde da 2.48:1, ilegible; crema da 8.09:1. */
    .tenant-calaka .service-option,
    .tenant-calaka .barber-option {
      background: var(--ca-carbon) !important;
      border-color: var(--ca-borde) !important;
      border-radius: 12px !important;
      box-shadow: none !important;
    }
    .tenant-calaka .service-option .svc-name,
    .tenant-calaka .service-option .price-tag,
    .tenant-calaka .service-option .text-brand-neon,
    .tenant-calaka .service-option .text-gray-200 {
      color: var(--ca-crema) !important;
    }
    .tenant-calaka .service-option .icon-svg { color: var(--ca-crema) !important; filter: none !important; }
    .tenant-calaka .service-option .icon-bg {
      background: var(--ca-verde) !important;
      border-color: rgba(48,72,61,0.9) !important;
    }
    .tenant-calaka .barber-option .barber-name { color: var(--ca-crema) !important; }
    .tenant-calaka .barber-option .text-brand-neon { color: var(--ca-gris) !important; }

    /* Seleccionado: el coral es la ÚNICA acción fuerte — borde y un tinte
       apenas insinuado, nunca llena la tarjeta. */
    .tenant-calaka .service-option.border-neon,
    .tenant-calaka .barber-option.border-neon {
      border-color: var(--ca-coral) !important;
      background: rgba(200,97,75,0.06) !important;
      box-shadow: 0 0 0 1px rgba(200,97,75,0.30) !important;
    }
    .tenant-calaka .service-option.bg-brand-neon\/10,
    .tenant-calaka .barber-option.bg-brand-neon\/10 {
      background: rgba(200,97,75,0.06) !important;
    }
    .tenant-calaka .barber-radio { border-color: var(--ca-borde) !important; background: transparent !important; }
    .tenant-calaka .barber-option.border-neon .barber-radio {
      border-color: var(--ca-coral) !important;
      background: var(--ca-coral) !important;
    }
    .tenant-calaka .service-option:hover,
    .tenant-calaka .barber-option:hover { border-color: rgba(200,97,75,0.35) !important; }

    /* ── Paso 3: día y hora ───────────────────────────────────────────── */
    .tenant-calaka .day-btn.active {
      background: var(--ca-coral) !important;
      border-color: var(--ca-coral) !important;
      box-shadow: 0 2px 10px rgba(200,97,75,0.25) !important;
    }
    .tenant-calaka .day-btn.active span { color: rgba(18,18,18,0.65) !important; }
    .tenant-calaka .day-btn.active .day-num { color: var(--ca-negro) !important; }
    .tenant-calaka .time-pill.bg-neon,
    .tenant-calaka .time-pill[data-sel] {
      background: var(--ca-coral) !important;
      border-color: var(--ca-coral) !important;
      color: var(--ca-negro) !important;
      box-shadow: none !important;
    }
    .tenant-calaka .time-pill:not([data-sel]):hover {
      background: rgba(200,97,75,0.10) !important;
      border-color: var(--ca-coral) !important;
      color: var(--ca-crema) !important;
    }

    /* ── Botón principal ────────────────────────────────────────────────
       Coral con texto negro: 4.70:1. Crema sobre coral daría 3.26 —bajo
       el piso de 4.5 para texto. */
    .tenant-calaka #btnContinue {
      background: var(--ca-coral) !important;
      color: var(--ca-negro) !important;
      font-weight: 700 !important;
      box-shadow: 0 4px 16px rgba(200,97,75,0.24) !important;
      border-radius: 12px !important;
    }
    .tenant-calaka #btnContinue:hover { background: #b7543f !important; }
    .tenant-calaka #btnContinueBar {
      background: rgba(18,18,18,0.90) !important;
      border-top: 1px solid var(--ca-borde) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }

    /* ── "Quiénes somos": botón y modal ──────────────────────────────── */
    .tenant-calaka .qs-btn {
      color: var(--ca-crema) !important;
      background: var(--ca-carbon) !important;
      border-bottom: 1px solid var(--ca-borde) !important;
    }
    .tenant-calaka .qs-btn:active { background: #232323 !important; }
    .tenant-calaka .qs-btn i { color: var(--ca-coral) !important; }
    .tenant-calaka .qs-modal { background: rgba(0,0,0,0.65) !important; }
    .tenant-calaka .qs-card { background: var(--ca-carbon) !important; border-color: var(--ca-borde) !important; }
    .tenant-calaka .qs-head { background: var(--ca-carbon) !important; border-bottom-color: var(--ca-borde) !important; }
    .tenant-calaka .qs-head h3 { color: var(--ca-crema) !important; }
    .tenant-calaka .qs-head h3 i { color: var(--ca-coral) !important; }
    .tenant-calaka .qs-x { color: var(--ca-gris) !important; }
    .tenant-calaka .qs-x:active { color: var(--ca-crema) !important; }
    .tenant-calaka .qs-body { color: rgba(241,231,215,0.82) !important; }

    /* ── Sin gaming: apagar halos y brillos del tema base ──────────────── */
    .tenant-calaka .text-neon,
    .tenant-calaka h2.text-neon { text-shadow: none !important; color: var(--ca-crema) !important; }
    .tenant-calaka .bg-neon { box-shadow: none !important; }
    .tenant-calaka .booking-hero::after { display: none !important; }
    .tenant-calaka .service-option.border-neon::after,
    .tenant-calaka .barber-option.border-neon::after { display: none !important; }

    /* ── Móvil ─────────────────────────────────────────────────────────── */
    @media (max-width: 640px) {
      /* El tamaño y el contorno de #shopNombre en móvil ya van en el
         bloque "Rye, degradado y contorno" — acá no se repite. */
      .tenant-calaka .service-option,
      .tenant-calaka .barber-option { padding: 14px !important; min-height: 64px !important; }
      .tenant-calaka .category-pill {
        white-space: nowrap !important;
        min-height: 40px !important;
        padding: 9px 16px !important;
      }
      .tenant-calaka .info-strip > * { min-height: 46px !important; }
      .tenant-calaka #btnContinue { min-height: 52px !important; }
    }

    /* ══ KRONNOS WOMAN — Magenta Neón / Negro ══ */
    .tenant-kronnos_woman {
      --accent:   #ec4899;
      --accent-r: 236; --accent-g: 72; --accent-b: 153;
      --neon-clr: #ec4899;
      --neon-r:   236; --neon-g: 72; --neon-b: 153;
      --body-bg:  #0a0a0a;
    }
    .tenant-kronnos_woman body { background-color: #0a0a0a; }
    .tenant-kronnos_woman .booking-hero {
      background-image: url('/kronnos/kronoswoman.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-kronnos_woman .booking-hero-overlay {
      background:
        radial-gradient(ellipse 100% 70% at 50% 45%,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.55) 60%,
          rgba(10,10,10,0.85) 100%),
        linear-gradient(180deg,
          rgba(0,0,0,0.55) 0%,
          rgba(0,0,0,0.40) 35%,
          rgba(0,0,0,0.55) 60%,
          rgba(10,10,10,0.98) 100%) !important;
    }

    /* ══ KRONNOS (3 sedes): tipografia del hero para maxima legibilidad ══
     * Text-shadow multi-capa (drop cerca + halo lejos + linea nitida) para
     * separar el titulo del fondo con cualquier iluminacion. Applies incluso
     * si el overlay es levemente translucido. */
    .tenant-kronnos_penablanca #shopNombre,
    .tenant-kronnos_limache    #shopNombre,
    .tenant-kronnos_woman      #shopNombre {
      text-shadow:
        0 1px 2px rgba(0,0,0,0.95),
        0 2px 12px rgba(0,0,0,0.75),
        0 6px 32px rgba(0,0,0,0.55) !important;
      letter-spacing: -0.018em !important;
      line-height: 1.02 !important;
      font-weight: 900 !important;
    }
    .tenant-kronnos_penablanca #shopSlogan,
    .tenant-kronnos_limache    #shopSlogan,
    .tenant-kronnos_woman      #shopSlogan {
      text-shadow:
        0 1px 2px rgba(0,0,0,0.9),
        0 2px 10px rgba(0,0,0,0.6) !important;
    }
    /* Aire arriba y abajo del bloque titulo+slogan para separar visualmente
     * del logo (arriba) y del badge partner "DISTRIBUIDOR OFICIAL" (abajo)
     * que en Limache se solapaba con la firma decorativa. */
    .tenant-kronnos_penablanca .booking-hero > div:has(#heroLogoArea),
    .tenant-kronnos_limache    .booking-hero > div:has(#heroLogoArea),
    .tenant-kronnos_woman      .booking-hero > div:has(#heroLogoArea) {
      padding-top:    3rem !important;
      padding-bottom: 4rem !important;
    }
    /* Divider dorado mas visible sobre backgrounds oscuros post-overlay */
    .tenant-kronnos_penablanca .gold-divider,
    .tenant-kronnos_limache    .gold-divider,
    .tenant-kronnos_woman      .gold-divider {
      opacity: 0.9 !important;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
    }

    /* ══════════════════════════════════════════════════════════════════
     * KRONNOS · PASO SERVICIOS — estilo editorial griego (Peñablanca + Limache)
     * ══════════════════════════════════════════════════════════════════
     * Paleta: cream marmol + acento local + hairlines dorados.
     * Tipografia: Playfair Display (nombres) + Cormorant Garamond (precios/UI).
     * Motivo griego: meandro CSS bajo cada header de categoria.
     * Radios reducidos a 6px (mas geometrico, menos SaaS). Cards con borde
     * hairline oro + fondo transparente, se elevan sutil en hover.
     * ═══════════════════════════════════════════════════════════════════ */

    /* Header "¿Qué servicio buscas?" — solo el titulo mantiene serif ligero */
    .tenant-kronnos_penablanca #step1 h2:has(+ *),
    .tenant-kronnos_limache    #step1 h2:has(+ *),
    .tenant-kronnos_penablanca #step1 > div > h2,
    .tenant-kronnos_limache    #step1 > div > h2 {
      font-family: 'Playfair Display', serif !important;
      font-weight: 500 !important;
      font-style: normal !important;
      letter-spacing: -0.012em !important;
    }

    /* Category pills — Inter clean, tracking medio, sin neon */
    .tenant-kronnos_penablanca .category-pill,
    .tenant-kronnos_limache    .category-pill {
      background: transparent !important;
      border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.22) !important;
      border-radius: 999px !important;
      padding: 0.5rem 1.1rem !important;
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 500 !important;
      font-size: 0.82rem !important;
      text-transform: uppercase !important;
      letter-spacing: 0.10em !important;
      color: rgba(245, 235, 220, 0.75) !important;
      transition: all 0.2s ease !important;
      box-shadow: none !important;
    }
    .tenant-kronnos_penablanca .category-pill:hover,
    .tenant-kronnos_limache    .category-pill:hover {
      color: #faf3e8 !important;
      border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.42) !important;
      background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.04) !important;
    }
    .tenant-kronnos_penablanca .category-pill.border-neon,
    .tenant-kronnos_limache    .category-pill.border-neon {
      background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10) !important;
      border-color: var(--accent) !important;
      color: #faf3e8 !important;
      box-shadow: none !important;   /* fuera el glow */
    }

    /* Header de categoría (PACKS KRONNOS, SERVICIOS MASCULINOS...) —
     * Inter en versalitas. Sin serif = mas legible en 0.85rem. */
    .tenant-kronnos_penablanca .cat-title,
    .tenant-kronnos_limache    .cat-title {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 600 !important;
      font-size: 0.72rem !important;
      letter-spacing: 0.20em !important;
      text-transform: uppercase !important;
      border-left: 0 !important;
      padding-left: 0 !important;
      color: rgba(245, 235, 220, 0.65) !important;
      margin-bottom: 1rem !important;
      position: relative !important;
      padding-bottom: 0.55rem !important;
    }
    /* Meandro griego mucho mas discreto (opacidad baja, sin acento) */
    .tenant-kronnos_penablanca .cat-title::after,
    .tenant-kronnos_limache    .cat-title::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 5px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 5'><path fill='none' stroke='%23c9a84c' stroke-width='0.7' d='M0,4 L0,2 L3,2 L3,3 L6,3 L6,1 L9,1 L9,4 L12,4 L12,2 L15,2 L15,3 L18,3 L18,1 L21,1 L21,4 L24,4'/></svg>");
      background-repeat: repeat-x;
      background-size: 24px 5px;
      opacity: 0.32;
    }
    /* Oculta el separador ornamental viejo (✦ ✦ ✦) que agrega el JS */
    .tenant-kronnos_penablanca .sep-ornamental,
    .tenant-kronnos_limache    .sep-ornamental {
      display: none !important;
    }

    /* Cards de servicio — hairline sutil, sin glow, sombras casi imperceptibles */
    .tenant-kronnos_penablanca .service-option,
    .tenant-kronnos_limache    .service-option {
      background: rgba(15, 12, 9, 0.55) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 10px !important;
      padding: 1.1rem 1.25rem !important;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
      min-height: 78px !important;
    }
    .tenant-kronnos_penablanca .service-option:hover,
    .tenant-kronnos_limache    .service-option:hover {
      border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.30) !important;
      background: rgba(22, 16, 12, 0.65) !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30) !important;   /* sin glow */
    }

    /* Nombre del servicio — Inter, alto contraste, legible */
    .tenant-kronnos_penablanca .service-option .svc-name,
    .tenant-kronnos_limache    .service-option .svc-name,
    .tenant-kronnos_penablanca .service-option span[class*="svc-name"],
    .tenant-kronnos_limache    .service-option span[class*="svc-name"] {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 600 !important;
      font-size: 1.02rem !important;
      letter-spacing: -0.011em !important;
      line-height: 1.28 !important;
      color: #fafaf8 !important;
    }

    /* Precio — Inter tabular-nums, sin text-shadow, contraste solido */
    .tenant-kronnos_penablanca .service-option .price-tag,
    .tenant-kronnos_limache    .service-option .price-tag {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 600 !important;
      font-size: 1.05rem !important;
      letter-spacing: -0.005em !important;
      color: var(--accent) !important;
      text-shadow: none !important;
      font-variant-numeric: tabular-nums !important;
    }

    /* Duración — sans limpio, tracking discreto */
    .tenant-kronnos_penablanca .service-option .duration-tag,
    .tenant-kronnos_limache    .service-option .duration-tag {
      font-family: 'Inter', system-ui, sans-serif !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
      font-size: 0.68rem !important;
      color: rgba(245, 235, 220, 0.5) !important;
      font-weight: 500 !important;
    }

    /* "Ver más" toggle — sans, mas legible */
    .tenant-kronnos_penablanca .svc-desc-toggle,
    .tenant-kronnos_limache    .svc-desc-toggle {
      font-family: 'Inter', system-ui, sans-serif !important;
      text-transform: uppercase !important;
      letter-spacing: 0.10em !important;
      font-size: 0.66rem !important;
      color: rgba(245, 235, 220, 0.5) !important;
      font-weight: 500 !important;
      border: none !important;
      text-decoration: none !important;
      margin-top: 0.35rem !important;
    }
    .tenant-kronnos_penablanca .svc-desc-toggle::after,
    .tenant-kronnos_limache    .svc-desc-toggle::after {
      content: ' →';
      opacity: 0.6;
    }

    /* Radio circular — reducido, borde oro */
    .tenant-kronnos_penablanca .svc-radio,
    .tenant-kronnos_limache    .svc-radio {
      border-color: rgba(201, 168, 76, 0.35) !important;
      background: transparent !important;
      width: 20px !important;
      height: 20px !important;
    }
    /* Radio seleccionado — relleno acento */
    .tenant-kronnos_penablanca .service-option.selected .svc-radio,
    .tenant-kronnos_limache    .service-option.selected .svc-radio,
    .tenant-kronnos_penablanca .svc-radio-checked,
    .tenant-kronnos_limache    .svc-radio-checked {
      background: var(--accent) !important;
      border-color: var(--accent) !important;
    }

    /* ══════════════════════════════════════════════════════════════════
     * KRONNOS WOMAN — belleza contemporánea (line hairline magenta, serif)
     * Comparte la mayoría de reglas de Peñablanca/Limache pero mantiene
     * la personalidad femenina (menos "griego", más "boutique moderno").
     * ══════════════════════════════════════════════════════════════════ */
    .tenant-kronnos_woman #step1 > div > h2 {
      font-family: 'Playfair Display', serif !important;
      font-weight: 500 !important;
      font-style: normal !important;
      letter-spacing: -0.012em !important;
    }
    .tenant-kronnos_woman .category-pill {
      background: transparent !important;
      border: 1px solid rgba(236, 72, 153, 0.22) !important;
      border-radius: 999px !important;
      padding: 0.5rem 1.1rem !important;
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 500 !important;
      font-size: 0.82rem !important;
      text-transform: uppercase !important;
      letter-spacing: 0.10em !important;
      color: rgba(255, 240, 245, 0.78) !important;
      transition: all 0.2s ease !important;
      box-shadow: none !important;
    }
    .tenant-kronnos_woman .category-pill:hover {
      color: #fff !important;
      border-color: rgba(236, 72, 153, 0.42) !important;
      background: rgba(236, 72, 153, 0.05) !important;
    }
    .tenant-kronnos_woman .category-pill.border-neon {
      background: rgba(236, 72, 153, 0.10) !important;
      border-color: #ec4899 !important;
      color: #fff !important;
      box-shadow: none !important;   /* fuera el glow */
    }
    .tenant-kronnos_woman .cat-title {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 600 !important;
      font-size: 0.72rem !important;
      letter-spacing: 0.20em !important;
      text-transform: uppercase !important;
      border-left: 0 !important;
      padding-left: 0 !important;
      padding-bottom: 0.55rem !important;
      color: rgba(255, 240, 245, 0.7) !important;
      margin-bottom: 1rem !important;
      border-bottom: 1px solid rgba(236, 72, 153, 0.15) !important;
    }
    .tenant-kronnos_woman .sep-ornamental { display: none !important; }
    .tenant-kronnos_woman .service-option {
      background: rgba(20, 14, 18, 0.55) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 10px !important;
      padding: 1.1rem 1.25rem !important;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
      min-height: 78px !important;
    }
    .tenant-kronnos_woman .service-option:hover {
      border-color: rgba(236, 72, 153, 0.30) !important;
      background: rgba(32, 20, 26, 0.65) !important;
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30) !important;
    }
    .tenant-kronnos_woman .service-option .svc-name {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 600 !important;
      font-size: 1.02rem !important;
      letter-spacing: -0.011em !important;
      line-height: 1.28 !important;
      color: #fff5f8 !important;
    }
    .tenant-kronnos_woman .service-option .price-tag {
      font-family: 'Inter', system-ui, sans-serif !important;
      font-weight: 600 !important;
      font-size: 1.05rem !important;
      letter-spacing: -0.005em !important;
      color: #ec4899 !important;
      text-shadow: none !important;
      font-variant-numeric: tabular-nums !important;
    }
    .tenant-kronnos_woman .service-option .duration-tag {
      font-family: 'Inter', system-ui, sans-serif !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
      font-size: 0.68rem !important;
      color: rgba(255, 240, 245, 0.5) !important;
      font-weight: 500 !important;
    }
    .tenant-kronnos_woman .svc-desc-toggle {
      font-family: 'Inter', system-ui, sans-serif !important;
      text-transform: uppercase !important;
      letter-spacing: 0.10em !important;
      font-size: 0.66rem !important;
      color: rgba(255, 240, 245, 0.5) !important;
      font-weight: 500 !important;
      border: none !important;
      text-decoration: none !important;
    }
    .tenant-kronnos_woman .svc-desc-toggle::after { content: ' →'; opacity: 0.6; }

    /* ── KRONNOS (3 sedes): botones del agendamiento = color del local + blanco ── */
    .tenant-kronnos_penablanca #btnContinue,
    .tenant-kronnos_limache #btnContinue,
    .tenant-kronnos_woman #btnContinue {
      background: var(--accent) !important;
      color: #fff !important;
      font-weight: 800 !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5),
                  0 2px 14px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.40) !important;
    }
    .tenant-kronnos_penablanca #btnContinue:not(:disabled):hover,
    .tenant-kronnos_limache #btnContinue:not(:disabled):hover,
    .tenant-kronnos_woman #btnContinue:not(:disabled):hover {
      filter: brightness(1.08) !important;
    }
    .tenant-kronnos_penablanca #btnContinue:disabled, .tenant-kronnos_penablanca #btnContinue[disabled],
    .tenant-kronnos_limache #btnContinue:disabled,    .tenant-kronnos_limache #btnContinue[disabled],
    .tenant-kronnos_woman #btnContinue:disabled,      .tenant-kronnos_woman #btnContinue[disabled] {
      background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.16) !important;
      color: rgba(255,255,255,0.45) !important;
      box-shadow: none !important;
    }
    .tenant-kronnos_penablanca #btnContinueBar,
    .tenant-kronnos_limache #btnContinueBar,
    .tenant-kronnos_woman #btnContinueBar {
      background: rgba(10,10,10,0.92) !important;
      border-top-color: rgba(255,255,255,0.05) !important;
    }

    /* El CSS del banner de lanzamiento de Kronnos (#kronnosAgendaSoonBanner,
       .kr-alert*) se fue junto con su HTML: era un aviso con fecha fija que ya
       venció. Ver el comentario en el <main>. */

    /* Para que las categorías sticky funcionen: el marco phone usa overflow:hidden
       (evita scroll horizontal) que rompe position:sticky. `overflow-x:clip` recorta
       en horizontal SIN crear contenedor de scroll, así el sticky vuelve a anclarse
       al viewport. Solo sedes Kronnos. */
    .tenant-kronnos_penablanca #bookingFrame,
    .tenant-kronnos_limache    #bookingFrame,
    .tenant-kronnos_woman      #bookingFrame {
      overflow-x: clip;
      overflow-y: visible;
    }

    /* Categorías pegajosas (sticky tabs) — solo sedes Kronnos. */
    .tenant-kronnos_penablanca #categoryPills,
    .tenant-kronnos_limache    #categoryPills,
    .tenant-kronnos_woman      #categoryPills {
      position: sticky; top: 0; z-index: 30;
      background: rgba(10,8,6,0.95);
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(23,23,23,0.80);
      padding-top: 12px; padding-bottom: 12px; margin-bottom: 12px;
    }
    /* Al quedar pegadas, deja aire para el botón "volver" flotante (fixed top-8 left-5).
       Solo en anchos de teléfono (donde el marco ocupa toda la pantalla y hay solape). */
    @media (max-width: 480px) {
      .tenant-kronnos_penablanca #categoryPills.kr-pills-stuck,
      .tenant-kronnos_limache    #categoryPills.kr-pills-stuck,
      .tenant-kronnos_woman      #categoryPills.kr-pills-stuck { padding-left: 72px; }
    }
    /* Sedes con banner Viking al final: reducir el colchón inferior del grid
       (la limpieza para la barra Continuar la aporta el banner Viking). */
    .tenant-kronnos_penablanca #servicesGrid,
    .tenant-kronnos_limache    #servicesGrid { padding-bottom: 0.5rem !important; }

    /* ══ KRONNOS × VIKING — visibilidad reforzada (solo sedes masculinas) ══ */
    /* Pestaña VIP "TIENDA VIKING" en las categorías sticky (inyectada por JS). */
    .vk-tab {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 16px; border-radius: 999px;
      font-size: 12px; font-weight: 800; white-space: nowrap; text-decoration: none;
      color: #fbbf24;
      background: linear-gradient(90deg, rgba(69,26,3,0.80) 0%, #1c1410 100%);
      border: 2px solid rgba(245,158,11,0.80);
      box-shadow: 0 0 12px -2px rgba(245,158,11,0.40);
      transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .vk-tab:hover  { border-color: #fbbf24; box-shadow: 0 0 16px -2px rgba(245,158,11,0.55); }
    .vk-tab:active { transform: scale(0.96); }

    /* Banner in-feed: 2º elemento del listado, tras la 1ª tarjeta (inyectado por JS). */
    .vk-infeed {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      width: 100%; padding: 14px; border-radius: 16px;
      text-decoration: none; cursor: pointer;
      background: linear-gradient(90deg, #1c1410 0%, #140e0a 50%, #0a0806 100%);
      border: 1px solid rgba(245,158,11,0.60);
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.40);
      transition: border-color .2s ease, transform .12s ease;
    }
    .vk-infeed:hover  { border-color: #fbbf24; }
    .vk-infeed:active { transform: scale(0.99); }
    .vk-infeed-text  { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .vk-infeed-emoji { font-size: 18px; flex-shrink: 0; }
    .vk-infeed-text p { font-size: 12.5px; line-height: 1.35; color: #cbb89e; margin: 0; }
    .vk-infeed-text strong { color: #fbbf24; font-weight: 700; }
    .vk-infeed-cta {
      flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fbbf24; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.45);
    }
    .vk-infeed-cta i { font-size: 15px; }

    /* ══ AURA × SLICK GORILLA — módulo exclusivo del tenant Aura ══════════
       Paleta clara (blanco/gris) para calzar con el tema claro de Aura.
       Estructura calcada del bloque Viking pero con branding neutro. */
    .sg-tab {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 16px; border-radius: 999px;
      font-size: 12px; font-weight: 800; white-space: nowrap; text-decoration: none;
      color: #0f172a;
      background: #ffffff;
      border: 2px solid #0f172a;
      box-shadow: 0 2px 10px -2px rgba(15,23,42,0.20);
      transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .sg-tab:hover  { background: #f1f5f9; box-shadow: 0 4px 14px -2px rgba(15,23,42,0.28); }
    .sg-tab:active { transform: scale(0.96); }

    .sg-infeed {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      width: 100%; padding: 14px; border-radius: 16px;
      text-decoration: none; cursor: pointer;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      box-shadow: 0 8px 22px -12px rgba(15,23,42,0.18);
      transition: border-color .2s ease, transform .12s ease, box-shadow .2s ease;
    }
    .sg-infeed:hover  { border-color: #0f172a; box-shadow: 0 12px 26px -12px rgba(15,23,42,0.25); }
    .sg-infeed:active { transform: scale(0.99); }
    .sg-infeed-text  { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .sg-infeed-emoji { font-size: 18px; flex-shrink: 0; }
    .sg-infeed-text p { font-size: 12.5px; line-height: 1.35; color: #475569; margin: 0; }
    .sg-infeed-text strong { color: #0f172a; font-weight: 700; }
    .sg-infeed-cta {
      flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #ffffff; background: #0f172a; border: 1px solid #0f172a;
    }
    .sg-infeed-cta i { font-size: 15px; }

    /* Hero badge "Distribuidor oficial" resaltado en ámbar + flecha (sedes masculinas). */
    .tenant-kronnos_penablanca .partner-badge,
    .tenant-kronnos_limache    .partner-badge {
      background: rgba(18,13,10,0.90);
      border: 1px solid #f59e0b;
      border-radius: 12px;
      box-shadow: 0 0 15px -3px rgba(217,119,6,0.30);
      transition: border-color .2s ease, transform .2s ease, background .2s ease;
    }
    .tenant-kronnos_penablanca .partner-badge:hover,
    .tenant-kronnos_limache    .partner-badge:hover {
      border-color: #fbbf24;
      background: rgba(18,13,10,0.95);
      transform: scale(1.05);
    }
    .tenant-kronnos_penablanca .partner-badge #partnerBadgeName,
    .tenant-kronnos_limache    .partner-badge #partnerBadgeName { color: #fbbf24; font-weight: 800; }
    .tenant-kronnos_penablanca .partner-badge:hover #partnerBadgeName,
    .tenant-kronnos_limache    .partner-badge:hover #partnerBadgeName { color: #fcd34d; }
    .tenant-kronnos_penablanca .partner-badge::after,
    .tenant-kronnos_limache    .partner-badge::after {
      content: "→"; color: #fbbf24; font-weight: 700; font-size: 13px; margin-left: 2px; line-height: 1;
    }

    /* ── KRONNOS × VIKING — Módulo embajador de marca.
       Estética Viking: cobre/bronce sobre negro, "Authentic Man".
       SOLO sedes masculinas: Peñablanca y Limache.
       NUNCA en Kronnos Woman (marca masculina, estudio femenino). ── */
    #vikingAmbassadorModule { display: none; }
    .tenant-kronnos_penablanca #vikingAmbassadorModule,
    .tenant-kronnos_limache    #vikingAmbassadorModule { display: block; }

    /* Banner horizontal compacto — no bloquea el flujo de agenda.
       (Equivale al spec Tailwind: gradiente #1c1410→#0a0806, borde amber-600/40,
       hover amber-500/80, rounded-2xl, shadow ámbar, flex row en sm+.) */
    .vk-banner {
      display: flex; flex-direction: column; align-items: center; justify-content: space-between;
      gap: 16px;
      width: 100%;
      padding: 16px;
      border-radius: 16px;
      text-decoration: none;
      cursor: pointer;
      background: linear-gradient(90deg, #1c1410 0%, #120d0a 50%, #0a0806 100%);
      border: 1px solid rgba(217,119,6,0.40);            /* amber-600/40 */
      box-shadow: 0 4px 20px -5px rgba(217,119,6,0.15);
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
    }
    .vk-banner:hover {
      border-color: rgba(245,158,11,0.80);               /* amber-500/80 */
      box-shadow: 0 6px 26px -5px rgba(217,119,6,0.28);
    }
    .vk-banner:active { transform: scale(0.99); }
    @media (min-width: 640px) {
      .vk-banner { flex-direction: row; padding: 20px; }
    }

    .vk-banner-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .vk-logo {
      width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
      background: #000; border: 1px solid rgba(230,169,107,0.22);
    }
    .vk-logo img { width: 100%; height: 100%; object-fit: cover; }
    .vk-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

    .vk-badge {
      display: inline-flex; align-items: center; width: fit-content;
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
      color: #f59e0b;                                    /* amber-500 */
      background: rgba(69,26,3,0.60);                    /* amber-950/60 */
      border: 1px solid rgba(180,83,9,0.50);             /* amber-700/50 */
      padding: 2px 10px; border-radius: 999px;
      margin-bottom: 6px;
    }
    .vk-title { font-size: 14px; font-weight: 600; color: #e5e5e5; line-height: 1.25; }  /* neutral-200 */
    .vk-sub   { font-size: 12px; color: #a3a3a3; margin-top: 2px; }                        /* neutral-400 */
    @media (max-width: 639px) {
      .vk-banner-info { flex-direction: column; text-align: center; }
      .vk-text { align-items: center; }
      .vk-sub { display: none; }                          /* hidden sm:block */
    }

    .vk-cta {
      display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
      font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
      color: #0a0a0a;                                    /* neutral-950 */
      background: linear-gradient(90deg, #d97706 0%, #b45309 100%);  /* amber-600→700 */
      padding: 8px 16px; border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
      transition: background 0.2s ease, transform 0.12s ease;
    }
    .vk-banner:hover .vk-cta { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); } /* amber-500→600 */
    .vk-banner:active .vk-cta { transform: scale(0.95); }
    .vk-cta i { font-size: 14px; }
    @media (min-width: 640px) { .vk-cta { font-size: 13px; } }

    /* ══ KRONNOS — Layout en filas (igual que AURA) en pasos 1 y 2.
       Los radios de servicio/barbero usan el neón de cada sede en vez del
       dorado por defecto que el JS aplica inline. ══ */
    .tenant-kronnos_penablanca .svc-radio,
    .tenant-kronnos_limache .svc-radio,
    .tenant-kronnos_woman .svc-radio,
    .tenant-kronnos_penablanca .barber-radio,
    .tenant-kronnos_limache .barber-radio,
    .tenant-kronnos_woman .barber-radio {
      border-color: rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.45) !important;
      background: transparent !important;
    }
    .tenant-kronnos_penablanca .service-option.border-neon .svc-radio,
    .tenant-kronnos_limache .service-option.border-neon .svc-radio,
    .tenant-kronnos_woman .service-option.border-neon .svc-radio,
    .tenant-kronnos_penablanca .barber-option.border-neon .barber-radio,
    .tenant-kronnos_limache .barber-option.border-neon .barber-radio,
    .tenant-kronnos_woman .barber-option.border-neon .barber-radio {
      border-color: var(--neon-clr) !important;
      background: var(--neon-clr) !important;
    }

    /* ── KRONNOS — Esquema de cada sede: acento (rojo / naranja / rosa) + blanco
       sobre fondo oscuro. Reemplaza el dorado por defecto del tema Elegance. ── */
    .tenant-kronnos_penablanca #progressBar,
    .tenant-kronnos_limache #progressBar,
    .tenant-kronnos_woman #progressBar {
      background-color: var(--neon-clr) !important;
    }
    .tenant-kronnos_penablanca #btnContinue,
    .tenant-kronnos_limache #btnContinue,
    .tenant-kronnos_woman #btnContinue {
      background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.18) 100%) !important;
      background-color: var(--neon-clr) !important;
      color: #ffffff !important;
      border: none !important;
      letter-spacing: 0.02em;
      position: relative;
      overflow: hidden;
      box-shadow: 0 6px 22px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.38),
                  inset 0 1px 0 rgba(255,255,255,0.28) !important;
      transition: transform 0.14s ease, box-shadow 0.25s ease, filter 0.2s ease;
    }
    .tenant-kronnos_penablanca .service-option.border-neon,
    .tenant-kronnos_limache .service-option.border-neon,
    .tenant-kronnos_woman .service-option.border-neon,
    .tenant-kronnos_penablanca .barber-option.border-neon,
    .tenant-kronnos_limache .barber-option.border-neon,
    .tenant-kronnos_woman .barber-option.border-neon {
      border-color: var(--neon-clr) !important;
      box-shadow: 0 0 10px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.25) !important;
    }
    .tenant-kronnos_penablanca .service-option.bg-brand-neon\/10,
    .tenant-kronnos_limache .service-option.bg-brand-neon\/10,
    .tenant-kronnos_woman .service-option.bg-brand-neon\/10,
    .tenant-kronnos_penablanca .barber-option.bg-brand-neon\/10,
    .tenant-kronnos_limache .barber-option.bg-brand-neon\/10,
    .tenant-kronnos_woman .barber-option.bg-brand-neon\/10 {
      background-color: rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.10) !important;
    }

    /* ── KRONNOS — Ocultar el banner (hero + info strip) en pasos 2-4 y mostrar
       el header delgado con botón Volver, igual que AURA pero en tema oscuro. ── */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) body:is([data-step="2"],[data-step="3"],[data-step="4"]) .booking-hero,
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) body:is([data-step="2"],[data-step="3"],[data-step="4"]) .info-strip {
      display: none !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) body:is([data-step="2"],[data-step="3"],[data-step="4"]) #aura-slim-header {
      display: flex !important;
    }
    /* Slim header en tema oscuro + acento por sede */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-slim-header {
      background: #0a0a0a !important;
      border-bottom: 1px solid rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.28) !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .aura-slim-name { color: #ffffff !important; }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .aura-slim-step { color: var(--neon-clr) !important; }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-slim-back,
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-slim-back i { color: #ffffff !important; }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-slim-back:hover { background: rgba(255,255,255,0.08) !important; }
    /* Kronnos no tiene WhatsApp configurado: ocultar ese botón del slim header */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-slim-wa { display: none !important; }
    /* Oren no ofrece consultas por WhatsApp en la agenda pública: ocultar el botón
       del slim header Y el de "Consultas" del info-strip (hereda ambos de Aura).
       El info-wa usa .tenant-oren.tenant-aura para superar en especificidad la
       regla :is(.tenant-aura,...) #aura-info-wa{display:flex!important} de más abajo. */
    .tenant-oren #aura-slim-wa,
    .tenant-oren.tenant-aura #aura-info-wa { display: none !important; }

    /* ════════════════════════════════════════════════════════════════
       KRONNOS — Pulido premium: hero animado, glow de acento, shimmer
       en tarjeta seleccionada, íconos consistentes y sello de éxito.
       Todo en el neón de cada sede (rojo / naranjo / rosa).
       ════════════════════════════════════════════════════════════════ */

    /* (4) Íconos del info-strip en el acento (no dorado) */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .info-strip i {
      color: var(--accent) !important;
    }

    /* (1) Animaciones de entrada del hero */
    @keyframes kronnos-logo-reveal {
      from { opacity: 0; transform: scale(0.84) translateY(12px); filter: blur(10px); }
      to   { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0);   }
    }
    @keyframes kronnos-ring-glow {
      0%, 100% {
        box-shadow: 0 0 0 1px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.15),
                    0 0 24px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.25),
                    0 0 50px rgba(0,0,0,0.6);
      }
      50% {
        box-shadow: 0 0 0 2px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.38),
                    0 0 46px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.55),
                    0 0 70px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.18);
      }
    }
    @keyframes kronnos-fade-up {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes kronnos-slogan-appear {
      from { opacity: 0; transform: translateY(8px); letter-spacing: 0.42em; }
      to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.25em; }
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #heroLogoArea {
      animation: kronnos-logo-reveal 1s cubic-bezier(0.16,1,0.3,1) both;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .hero-logo-ring {
      animation: kronnos-ring-glow 3.6s ease-in-out 1.1s infinite;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #shopNombre {
      animation: kronnos-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.38s both;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .gold-divider {
      animation: kronnos-fade-up 0.5s ease-out 0.52s both;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #shopSlogan {
      display: inline-block;
      animation: kronnos-slogan-appear 0.75s cubic-bezier(0.16,1,0.3,1) 0.62s both;
    }

    /* (2) Glow radial del acento detrás del logo del hero */
    @keyframes kronnos-hero-glow {
      0%, 100% { opacity: 0.45; }
      50%       { opacity: 0.9; }
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .booking-hero::after {
      content: '';
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 85%; height: 58%;
      background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.20) 0%, transparent 70%);
      pointer-events: none;
      z-index: 1;
      animation: kronnos-hero-glow 5s ease-in-out infinite;
    }

    /* (3) Shimmer en la tarjeta seleccionada (servicio / barbero) */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .service-option.border-neon::after,
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .barber-option.border-neon::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-120%);
      background: linear-gradient(105deg, transparent 30%, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.28) 50%, transparent 70%);
      animation: aura-card-shimmer 0.65s cubic-bezier(0.25,0.46,0.45,0.94) 1;
      pointer-events: none;
    }

    /* (6) Sello animado en la confirmación — reusa #aura-stamp-wrap en el acento */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #success-state > div.w-24 {
      display: none !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #success-state #aura-stamp-wrap {
      display: flex !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-stamp-wrap .aura-stamp-ring-1 {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.55) !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-stamp-wrap .aura-stamp-ring-2 {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.30) !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-stamp-wrap .aura-stamp-logo {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.45) !important;
      box-shadow: 0 0 0 6px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.10),
                  0 8px 32px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.28),
                  0 2px 8px rgba(0,0,0,0.35) !important;
    }

    /* ════════════════════════════════════════════════════════════════
       KRONNOS — PILAR 2 (profundidad/materia) + PILAR 3 (interacción)
       ════════════════════════════════════════════════════════════════ */

    /* ── P2: Profundidad — superficies elevadas + hairline highlight ── */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .bg-\[\#0a0a0d\] {
      background-color: #141419 !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .service-option,
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .barber-option {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.55) !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .service-option:hover,
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .barber-option:hover {
      border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.45) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 16px rgba(0,0,0,0.55) !important;
    }

    /* ── P2: Grano de film sutil sobre todo el contenido (estático) ── */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 30;
      pointer-events: none;
      opacity: 0.06;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 140px 140px;
    }

    /* ── P2: Hero con tratamiento graduado (vignette cinematográfico + tinte de acento) ── */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .booking-hero-overlay {
      background:
        radial-gradient(110% 75% at 50% -5%, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08) 0%, transparent 42%),
        linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.28) 34%, rgba(10,10,10,0.97) 100%) !important;
    }

    /* ── P3: CTA — sheen periódico sutil + press táctil ── */
    @keyframes kronnos-cta-sheen {
      0%       { transform: translateX(-130%); }
      55%,100% { transform: translateX(240%); }
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #btnContinue::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 55%;
      background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
      transform: translateX(-130%);
      animation: kronnos-cta-sheen 5.5s ease-in-out infinite;
      pointer-events: none;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #btnContinue:hover {
      filter: brightness(1.06);
      box-shadow: 0 8px 28px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.50),
                  inset 0 1px 0 rgba(255,255,255,0.30) !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #btnContinue:active {
      transform: scale(0.985);
      filter: brightness(1.02);
    }
    /* CTA deshabilitado: apagado, sin sheen ni sombra */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #btnContinue:disabled {
      filter: grayscale(0.45) brightness(0.55);
      box-shadow: none !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #btnContinue:disabled::after {
      display: none;
    }

    /* ── P3: Transición entre pasos — easing premium + focus-in (blur) ── */
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) section[id^="step"] {
      transition-timing-function: cubic-bezier(0.16,1,0.3,1) !important;
    }
    :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) section[id^="step"].opacity-0 {
      filter: blur(7px) !important;
    }

    /* ════════════════════════════════════════════════════════════════
       KRONNOS — PILAR 4: IDENTIDAD POR SEDE
       Cada sede recibe tipografía, decoración y atmósfera propias para
       que no se sientan idénticas — solo la paleta cambia hoy. Manteniendo
       el sistema de tarjetas/botones compartido, lo que sigue afecta:
         · Tipografía del nombre + slogan (font + tracking)
         · Decoración del hero (overlay extra, patrón, ornamento)
         · Background del body con texturas sutiles
         · Microdetalles (sello, divisores, ornamentos)
       ════════════════════════════════════════════════════════════════ */

    /* ─────────── PEÑABLANCA · Industrial Luxe (Rojo Neón) ─────────── */

    /* Pinstripes verticales muy sutiles tipo grabado en metal */
    .tenant-kronnos_penablanca body {
      background-color: #0a0a0a;
      background-image:
        repeating-linear-gradient(90deg,
          transparent 0, transparent 3px,
          rgba(225,29,42,0.018) 3px, rgba(225,29,42,0.018) 4px),
        radial-gradient(ellipse at center top, rgba(225,29,42,0.05) 0%, transparent 60%) !important;
      background-attachment: fixed !important;
    }

    /* Nombre con tipografía industrial Bebas Neue */
    .tenant-kronnos_penablanca #shopNombre {
      font-family: 'Bebas Neue', 'Inter', sans-serif !important;
      font-weight: 400 !important;
      letter-spacing: 0.06em !important;
      font-size: 2.45rem !important;
      text-transform: uppercase !important;
      color: #ffffff !important;
      text-shadow:
        0 0 18px rgba(225,29,42,0.55),
        0 2px 14px rgba(0,0,0,0.8) !important;
    }

    /* Sello industrial debajo del logo (EST. + serial) */
    .tenant-kronnos_penablanca #heroLogoArea::after {
      content: 'EST · 2024 · BARBERSHOP & STUDIO';
      display: block;
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 9px;
      letter-spacing: 0.42em;
      color: rgba(225,29,42,0.75);
      white-space: nowrap;
      pointer-events: none;
      animation: kronnos-fade-up 0.6s ease-out 1.1s both;
    }
    .tenant-kronnos_penablanca #heroLogoArea { position: relative !important; padding-bottom: 14px; }

    /* Slogan con peso ligero + tracking generoso */
    .tenant-kronnos_penablanca #shopSlogan {
      font-family: 'Inter', sans-serif !important;
      text-transform: uppercase !important;
      letter-spacing: 0.32em !important;
      font-weight: 300 !important;
      font-size: 0.7rem !important;
      color: rgba(255,255,255,0.7) !important;
    }

    /* Divider rojo neón */
    .tenant-kronnos_penablanca .gold-divider {
      background: linear-gradient(90deg, transparent, #e11d2a, transparent) !important;
      width: 52px !important;
      box-shadow: 0 0 12px rgba(225,29,42,0.6);
    }

    /* Halo cinematográfico rojo + barras horizontales tipo neón letrero */
    .tenant-kronnos_penablanca .booking-hero-overlay {
      background:
        radial-gradient(60% 50% at 50% 18%, rgba(225,29,42,0.22) 0%, transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.22) 35%, rgba(10,10,10,0.97) 100%) !important;
    }
    .tenant-kronnos_penablanca .booking-hero::before {
      content: '';
      position: absolute;
      top: 12%; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(225,29,42,0.45), transparent);
      z-index: 2;
      pointer-events: none;
    }

    /* Títulos de paso con tipo industrial */
    .tenant-kronnos_penablanca h2,
    .tenant-kronnos_penablanca h3 {
      font-family: 'Bebas Neue', sans-serif !important;
      letter-spacing: 0.05em !important;
      font-weight: 400 !important;
    }

    /* Tarjeta con corner clip rojo neón en esquina superior */
    .tenant-kronnos_penablanca .service-option::before,
    .tenant-kronnos_penablanca .barber-option::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 14px; height: 14px;
      border-top: 1.5px solid rgba(225,29,42,0.35);
      border-right: 1.5px solid rgba(225,29,42,0.35);
      pointer-events: none;
    }
    .tenant-kronnos_penablanca .service-option,
    .tenant-kronnos_penablanca .barber-option { position: relative !important; }

    /* ─────────── LIMACHE · Warm Sunset (Naranja Ámbar) ─────────── */

    /* Background con gradient cálido sunset y light streaks */
    .tenant-kronnos_limache body {
      background-color: #0a0806;
      background-image:
        radial-gradient(ellipse at 50% 0%, rgba(249,115,22,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 80%, rgba(251,146,60,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 100%, rgba(245,158,11,0.04) 0%, transparent 50%) !important;
      background-attachment: fixed !important;
    }

    /* Nombre con tipografía elegante Cormorant cursiva */
    .tenant-kronnos_limache #shopNombre {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 600 !important;
      font-style: italic !important;
      letter-spacing: -0.005em !important;
      font-size: 2.4rem !important;
      color: #ffffff !important;
      text-shadow:
        0 2px 28px rgba(249,115,22,0.45),
        0 2px 14px rgba(0,0,0,0.7) !important;
    }

    /* Sello cálido debajo del logo */
    .tenant-kronnos_limache #heroLogoArea::after {
      content: '⚜ ESTILISMO · BARBERÍA · BELLEZA ⚜';
      display: block;
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Cormorant Garamond', serif;
      font-size: 10px;
      font-style: italic;
      letter-spacing: 0.30em;
      color: rgba(249,115,22,0.85);
      white-space: nowrap;
      pointer-events: none;
      animation: kronnos-fade-up 0.6s ease-out 1.1s both;
    }
    .tenant-kronnos_limache #heroLogoArea { position: relative !important; padding-bottom: 14px; }

    /* Slogan más curado */
    .tenant-kronnos_limache #shopSlogan {
      font-family: 'Cormorant Garamond', serif !important;
      font-style: italic !important;
      letter-spacing: 0.06em !important;
      font-weight: 500 !important;
      font-size: 1rem !important;
      text-transform: none !important;
      color: rgba(254,215,170,0.85) !important;
    }

    /* Divider naranja con glow cálido */
    .tenant-kronnos_limache .gold-divider {
      background: linear-gradient(90deg, transparent, #f97316 30%, #fbbf24 50%, #f97316 70%, transparent) !important;
      width: 58px !important;
      height: 1px !important;
      box-shadow: 0 0 16px rgba(249,115,22,0.5);
    }

    /* Hero overlay tipo sunset horizon — cielo cálido fundido a negro */
    .tenant-kronnos_limache .booking-hero-overlay {
      background:
        radial-gradient(80% 60% at 50% 15%, rgba(251,146,60,0.20) 0%, transparent 55%),
        linear-gradient(180deg,
          rgba(20,8,4,0.42) 0%,
          rgba(40,15,8,0.30) 28%,
          rgba(20,10,5,0.78) 60%,
          rgba(10,8,6,0.98) 100%) !important;
    }

    /* Light streaks horizontales sutiles en el hero */
    .tenant-kronnos_limache .booking-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, transparent 22%, rgba(251,146,60,0.06) 23%, transparent 24%),
        linear-gradient(180deg, transparent 40%, rgba(251,146,60,0.04) 41%, transparent 42%);
      pointer-events: none;
      z-index: 1;
    }

    /* Títulos de paso con serifa elegante */
    .tenant-kronnos_limache h2,
    .tenant-kronnos_limache h3 {
      font-family: 'Cormorant Garamond', serif !important;
      font-weight: 600 !important;
      letter-spacing: -0.005em !important;
    }

    /* Tarjetas con border-radius más generoso y warm glow */
    .tenant-kronnos_limache .service-option,
    .tenant-kronnos_limache .barber-option {
      border-radius: 14px !important;
    }
    .tenant-kronnos_limache .service-option.border-neon,
    .tenant-kronnos_limache .barber-option.border-neon {
      box-shadow:
        0 0 22px rgba(249,115,22,0.25),
        inset 0 1px 0 rgba(251,191,36,0.18) !important;
    }

    /* ─────────── WOMAN · Glamour / Spa Luxury (Magenta Pearlescente) ─────────── */

    /* Background con tinte rosa y curvas suaves */
    .tenant-kronnos_woman body {
      background-color: #0a0608;
      background-image:
        radial-gradient(ellipse at 30% 10%, rgba(236,72,153,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 90%, rgba(251,113,133,0.08) 0%, transparent 50%),
        radial-gradient(circle at 90% 30%, rgba(244,114,182,0.05) 0%, transparent 40%) !important;
      background-attachment: fixed !important;
    }

    /* Nombre con tipografía Bodoni — alta clase glamour */
    .tenant-kronnos_woman #shopNombre {
      font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif !important;
      font-weight: 600 !important;
      font-style: italic !important;
      letter-spacing: 0.01em !important;
      font-size: 2.4rem !important;
      color: #ffffff !important;
      text-shadow:
        0 2px 32px rgba(236,72,153,0.5),
        0 2px 14px rgba(0,0,0,0.7) !important;
    }

    /* Sello femenino con flores debajo del logo */
    .tenant-kronnos_woman #heroLogoArea::after {
      content: '✿ BEAUTY · NAILS · MAKEUP · LASHES ✿';
      display: block;
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Bodoni Moda', serif;
      font-size: 9px;
      font-style: italic;
      letter-spacing: 0.32em;
      color: rgba(236,72,153,0.85);
      white-space: nowrap;
      pointer-events: none;
      animation: kronnos-fade-up 0.6s ease-out 1.1s both;
    }
    .tenant-kronnos_woman #heroLogoArea { position: relative !important; padding-bottom: 14px; }

    /* Slogan elegante delicado */
    .tenant-kronnos_woman #shopSlogan {
      font-family: 'Bodoni Moda', serif !important;
      font-style: italic !important;
      letter-spacing: 0.05em !important;
      font-weight: 600 !important;
      font-size: 1rem !important;
      text-transform: none !important;
      color: rgba(252,231,243,0.92) !important;
    }

    /* Divider magenta con shimmer dorado-rosa */
    .tenant-kronnos_woman .gold-divider {
      background: linear-gradient(90deg, transparent, #ec4899 25%, #f9a8d4 50%, #ec4899 75%, transparent) !important;
      width: 58px !important;
      height: 1px !important;
      box-shadow: 0 0 18px rgba(236,72,153,0.55);
    }

    /* Hero overlay con shine pearlescente magenta */
    .tenant-kronnos_woman .booking-hero-overlay {
      background:
        radial-gradient(80% 60% at 50% 18%, rgba(236,72,153,0.22) 0%, transparent 55%),
        radial-gradient(50% 40% at 80% 30%, rgba(244,114,182,0.12) 0%, transparent 50%),
        linear-gradient(180deg,
          rgba(15,5,10,0.40) 0%,
          rgba(25,8,15,0.25) 30%,
          rgba(15,8,12,0.78) 65%,
          rgba(10,6,8,0.98) 100%) !important;
    }

    /* Decoración floral muy sutil en el hero (esquina inferior) */
    .tenant-kronnos_woman .booking-hero::before {
      content: '✦';
      position: absolute;
      top: 16%;
      right: 18%;
      font-size: 14px;
      color: rgba(244,114,182,0.45);
      pointer-events: none;
      z-index: 2;
      animation: kronnos-fade-up 0.8s ease-out 1.3s both;
    }

    /* Títulos con tipografía Bodoni alta */
    .tenant-kronnos_woman h2,
    .tenant-kronnos_woman h3 {
      font-family: 'Bodoni Moda', Georgia, serif !important;
      font-weight: 600 !important;
      letter-spacing: -0.005em !important;
    }

    /* Tarjetas con border-radius redondo glamour + magenta glow */
    .tenant-kronnos_woman .service-option,
    .tenant-kronnos_woman .barber-option {
      border-radius: 16px !important;
    }
    .tenant-kronnos_woman .service-option.border-neon,
    .tenant-kronnos_woman .barber-option.border-neon {
      box-shadow:
        0 0 28px rgba(236,72,153,0.28),
        inset 0 1px 0 rgba(249,168,212,0.25) !important;
    }
    .tenant-kronnos_woman .service-option.border-neon::before,
    .tenant-kronnos_woman .barber-option.border-neon::before {
      content: '✦';
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 11px;
      color: rgba(244,114,182,0.7);
      pointer-events: none;
      animation: kronnos-fade-up 0.4s ease-out both;
    }
    .tenant-kronnos_woman .service-option,
    .tenant-kronnos_woman .barber-option { position: relative !important; }

    /* Accesibilidad: respetar prefers-reduced-motion (lujo bien hecho) */
    @media (prefers-reduced-motion: reduce) {
      .tenant-kronnos_penablanca #heroLogoArea::after,
      .tenant-kronnos_limache #heroLogoArea::after,
      .tenant-kronnos_woman #heroLogoArea::after,
      .tenant-kronnos_woman .booking-hero::before {
        animation: none !important;
      }
    }

    /* ── Accesibilidad: respetar prefers-reduced-motion (lujo bien hecho) ── */
    @media (prefers-reduced-motion: reduce) {
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #heroLogoArea,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .hero-logo-ring,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #shopNombre,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .gold-divider,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #shopSlogan,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .booking-hero::after,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .service-option.border-neon::after,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) .barber-option.border-neon::after,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #btnContinue::after,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-stamp-wrap .aura-stamp-logo,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-stamp-wrap .aura-stamp-ring-1,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-stamp-wrap .aura-stamp-ring-2,
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) #aura-stamp-wrap .aura-stamp-shine {
        animation: none !important;
      }
      :is(.tenant-kronnos_penablanca,.tenant-kronnos_limache,.tenant-kronnos_woman) section[id^="step"].opacity-0 {
        filter: none !important;
      }
    }

    .tenant-chameleon {
      --accent:   #DAA520;
      --accent-r: 218; --accent-g: 165; --accent-b: 32;
      --neon-clr: #DAA520;
      --neon-r:   218; --neon-g: 165; --neon-b: 32;
      --body-bg:  #000000;
    }
    .tenant-chameleon body { background-color: #000000; }
    .tenant-chameleon .booking-hero {
      background-image: url('/fondolocal3-liviana.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-chameleon .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.92) 100%) !important;
    }
    /* Botones de acción → esmeralda */
    .tenant-chameleon #btnContinue {
      background: #004D40 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 20px rgba(0,77,64,0.45) !important;
    }
    .tenant-chameleon #btnContinueBar {
      background: rgba(0,0,0,0.92) !important;
      border-top-color: rgba(218,165,32,0.10) !important;
    }
    /* CTA "Unirme al Club" en paso 4 */
    .tenant-chameleon #step4AuthContainer a.flex {
      background: #004D40 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 18px rgba(0,77,64,0.35) !important;
    }
    .tenant-chameleon #step4AuthContainer a.flex i { color: #ffffff !important; }
    /* Tarjeta seleccionada: borde dorado metálico */
    .tenant-chameleon .service-option.border-neon {
      border-color: #DAA520 !important;
      box-shadow: 0 0 14px rgba(218,165,32,0.18) !important;
    }
    .tenant-chameleon .service-option.bg-brand-neon\/10 {
      background-color: rgba(218,165,32,0.07) !important;
    }
    /* Jerarquía: precio y duración en blanco sobre tarjeta seleccionada */
    .tenant-chameleon .service-option.border-neon .price-tag {
      color: #ffffff !important;
    }
    .tenant-chameleon .service-option.border-neon .duration-tag {
      color: rgba(255,255,255,0.55) !important;
    }
    /* Icono: halo dorado en tarjeta seleccionada */
    .tenant-chameleon .service-option.border-neon .icon-bg {
      border-color: rgba(218,165,32,0.50) !important;
      box-shadow: 0 0 12px rgba(218,165,32,0.28) !important;
      background: rgba(218,165,32,0.06) !important;
    }
    .tenant-chameleon .service-option.border-neon .icon-svg {
      color: #DAA520 !important;
      filter: drop-shadow(0 0 5px rgba(218,165,32,0.50)) !important;
    }
    /* Barbero seleccionado */
    .tenant-chameleon .barber-option.border-neon {
      border-color: #DAA520 !important;
      box-shadow: 0 0 12px rgba(218,165,32,0.15) !important;
    }
    .tenant-chameleon .barber-option.bg-brand-neon\/10 {
      background-color: rgba(218,165,32,0.07) !important;
    }
    /* Time pill seleccionada */
    .tenant-chameleon .time-pill.border-neon,
    .tenant-chameleon .time-pill.bg-brand-neon\/10 {
      background: rgba(218,165,32,0.12) !important;
      color: #DAA520 !important;
      border-color: #DAA520 !important;
      box-shadow: 0 0 10px rgba(218,165,32,0.20) !important;
      font-weight: 800 !important;
    }
    /* Category pills */
    .tenant-chameleon .category-pill.border-neon {
      border-color: #DAA520 !important;
      color: #DAA520 !important;
      background: rgba(218,165,32,0.08) !important;
      box-shadow: none !important;
    }

    /* ── Chameleon: shimmer dorado en tarjeta seleccionada ── */
    @keyframes cham-card-shimmer {
      from { transform: translateX(-120%); }
      to   { transform: translateX(280%); }
    }
    .tenant-chameleon .service-option.border-neon::after,
    .tenant-chameleon .barber-option.border-neon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
        transparent 30%, rgba(218,165,32,0.30) 50%, transparent 70%);
      transform: translateX(-120%);
      animation: cham-card-shimmer 0.65s cubic-bezier(0.25,0.46,0.45,0.94) 1;
      pointer-events: none;
    }

    /* ── Chameleon: headers de grupo horario en dorado ── */
    .tenant-chameleon #hoursGrid .text-gray-600 {
      color: rgba(218,165,32,0.70) !important;
    }

    /* ── Chameleon: badge de disponibilidad ── */
    .cham-badge {
      display: inline-flex; align-items: center;
      gap: 5px; font-size: 11px; font-weight: 700; margin-top: 4px;
    }
    .cham-badge-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    }
    .cham-badge-green .cham-badge-dot  { background:#4ADE80; box-shadow:0 0 6px rgba(74,222,128,0.65); }
    .cham-badge-amber .cham-badge-dot  { background:#DAA520; box-shadow:0 0 6px rgba(218,165,32,0.65); }
    .cham-badge-gray  .cham-badge-dot  { background:rgba(156,163,175,0.45); }
    .cham-badge-green { color:rgba(74,222,128,0.85); }
    .cham-badge-amber { color:rgba(218,165,32,0.85); }
    .cham-badge-gray  { color:rgba(156,163,175,0.55); }

    .tenant-ferraza .service-option.border-neon,
    .tenant-ferraza .barber-option.border-neon {
      border-color: var(--neon-clr) !important;
      box-shadow: 0 0 15px rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.15) !important;
    }
    .tenant-ferraza .service-option.bg-brand-neon\/10,
    .tenant-ferraza .barber-option.bg-brand-neon\/10 {
      background-color: rgba(var(--neon-r),var(--neon-g),var(--neon-b),0.1) !important;
    }

    .tenant-chameleon .sello-chameleon-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 1.25rem;
    }
    .tenant-chameleon .sello-chameleon-img {
      width: 6.5rem;
      height: 6.5rem;
      object-fit: contain;
      animation: selloPopIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
      filter: drop-shadow(0 0 14px rgba(218,165,32,0.40));
    }
    /* Chameleon: resumen paso 4 con estética gold/emerald */
    .tenant-chameleon #step4 .mt-6.rounded-2xl {
      background: linear-gradient(135deg, rgba(10,8,7,0.97) 0%, rgba(0,30,18,0.45) 100%) !important;
      border: 1px solid rgba(201,168,76,0.28) !important;
      box-shadow: 0 0 22px rgba(201,168,76,0.06), inset 0 1px 0 rgba(201,168,76,0.07) !important;
    }
    .tenant-chameleon #step4 .mt-6.rounded-2xl .text-white\/30 {
      color: rgba(201,168,76,0.55) !important;
    }
    .tenant-chameleon #step4 .mt-6.rounded-2xl #summaryService {
      color: #e8c86d !important;
    }
    .tenant-chameleon #step4 .mt-6.rounded-2xl #summaryPrice {
      color: #DAA520 !important;
    }
    .tenant-chameleon #step4 .mt-6.rounded-2xl .h-px {
      background: rgba(201,168,76,0.10) !important;
    }
    .tenant-chameleon #step4 .mt-6.rounded-2xl .text-gray-500,
    .tenant-chameleon #step4 .mt-6.rounded-2xl #summaryBarber,
    .tenant-chameleon #step4 .mt-6.rounded-2xl #summaryDateString {
      color: rgba(201,168,76,0.65) !important;
    }
    .tenant-chameleon #step4 .mt-6.rounded-2xl i {
      color: rgba(201,168,76,0.32) !important;
    }
    /* Chameleon: pantalla de éxito con gold/emerald */
    .tenant-chameleon #success-state .bg-\[\#0a0a0d\] {
      background: linear-gradient(135deg, rgba(10,8,7,0.97) 0%, rgba(0,30,18,0.45) 100%) !important;
      border: 1px solid rgba(201,168,76,0.32) !important;
      box-shadow: 0 0 28px rgba(201,168,76,0.09) !important;
    }
    .tenant-chameleon #success-state .bg-\[\#0a0a0d\] #successSummaryService {
      color: #e8c86d !important;
      font-weight: 800 !important;
    }
    .tenant-chameleon #success-state .bg-\[\#0a0a0d\] #successSummaryDate {
      color: rgba(201,168,76,0.80) !important;
    }
    .tenant-chameleon #success-state h2 {
      background: linear-gradient(135deg, #C9A050 0%, #e8c86d 50%, #DAA520 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ═══════════════════════════════════════════════════════════════
       BARBERS CLUB — Premium Dark Re-skin
       Paleta:
         Fondo body/main:    neutral-900 #18181b
         Cards / modals:     neutral-800 #27272a
         Bordes separadores: neutral-700 #404040
         Texto primario:     neutral-200 #e5e5e5
         Texto secundario:   neutral-400 #a3a3a3
         CTA primario:       orange-600 #ea580c (hover #c2410c)
         Acento (precios,
         seleccionados,
         barras progreso):   yellow-500 #eab308
       ═══════════════════════════════════════════════════════════════ */
    .tenant-barbersclub {
      --accent:   #eab308;
      --accent-r: 234; --accent-g: 179; --accent-b: 8;
      --neon-clr: #eab308;
      --neon-r:   234; --neon-g: 179; --neon-b: 8;
      --body-bg:  #18181b;
    }
    .tenant-barbersclub body {
      background-color: #18181b !important;
      color: #e5e5e5 !important;
    }
    /* Hero: banner propio del local (cover, centrado) */
    .tenant-barbersclub .booking-hero {
      background-image: url('/barbersclub/hero-bg.webp') !important;
      background-size: cover !important;
      background-position: center 35% !important;
      background-color: #18181b !important;
    }
    .tenant-barbersclub .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(24,24,27,0.55) 0%, rgba(24,24,27,0.32) 40%, rgba(24,24,27,0.97) 100%) !important;
    }
    /* ── CTA primario (Continuar / Seleccionar) → naranja ── */
    .tenant-barbersclub #btnContinue {
      background: #ea580c !important;
      background-image: none !important;
      color: #ffffff !important;
      box-shadow: 0 4px 20px rgba(234,88,12,0.30) !important;
    }
    .tenant-barbersclub #btnContinue:hover:not(:disabled) {
      background: #c2410c !important;
      box-shadow: 0 6px 24px rgba(234,88,12,0.42) !important;
    }
    .tenant-barbersclub #btnContinueBar {
      background: rgba(24,24,27,0.92) !important;
      border-top: 1px solid #404040 !important;
    }
    /* CTA "Unirme al Club" en paso 4 → naranja */
    .tenant-barbersclub #step4AuthContainer a.flex {
      background: #ea580c !important;
      color: #ffffff !important;
      box-shadow: 0 4px 18px rgba(234,88,12,0.28) !important;
    }
    .tenant-barbersclub #step4AuthContainer a.flex i { color: #ffffff !important; }
    /* ── Progreso: barra dorada ── */
    .tenant-barbersclub #progressBar {
      background: #eab308 !important;
      box-shadow: 0 0 8px rgba(234,179,8,0.35) !important;
    }
    .tenant-barbersclub #progressTrack {
      background: #404040 !important;
    }
    /* ── Tarjeta de servicio seleccionada: borde dorado + glow ── */
    .tenant-barbersclub .service-option.border-neon {
      border-color: #eab308 !important;
      box-shadow: 0 0 0 1px rgba(234,179,8,0.35), 0 0 20px rgba(234,179,8,0.22) !important;
    }
    .tenant-barbersclub .service-option.bg-brand-neon\/10 {
      background-color: rgba(234,179,8,0.08) !important;
    }
    /* Precio: dorado (siempre prominente) */
    .tenant-barbersclub .service-option .price-tag {
      color: #eab308 !important;
      font-weight: 700 !important;
    }
    .tenant-barbersclub .service-option.border-neon .price-tag {
      color: #eab308 !important;
    }
    .tenant-barbersclub .service-option .duration-tag {
      color: #a3a3a3 !important;
    }
    .tenant-barbersclub .service-option.border-neon .duration-tag {
      color: rgba(234,179,8,0.75) !important;
    }
    /* Icono con halo dorado en tarjeta seleccionada */
    .tenant-barbersclub .service-option .icon-bg {
      background: #18181b !important;
      border-color: #404040 !important;
    }
    .tenant-barbersclub .service-option.border-neon .icon-bg {
      border-color: rgba(234,179,8,0.55) !important;
      box-shadow: 0 0 12px rgba(234,179,8,0.28) !important;
      background: rgba(234,179,8,0.06) !important;
    }
    .tenant-barbersclub .service-option .icon-svg {
      color: #eab308 !important;
    }
    .tenant-barbersclub .service-option.border-neon .icon-svg {
      color: #eab308 !important;
      filter: drop-shadow(0 0 5px rgba(234,179,8,0.55)) !important;
    }
    /* Nombre del servicio: texto claro */
    .tenant-barbersclub .service-option .svc-name {
      color: #e5e5e5 !important;
    }
    .tenant-barbersclub .service-option .svc-desc {
      color: #a3a3a3 !important;
    }
    /* ── Tarjeta de barbero seleccionada ── */
    .tenant-barbersclub .barber-option.border-neon {
      border-color: #eab308 !important;
      box-shadow: 0 0 0 1px rgba(234,179,8,0.32), 0 0 18px rgba(234,179,8,0.18) !important;
    }
    .tenant-barbersclub .barber-option.bg-brand-neon\/10 {
      background-color: rgba(234,179,8,0.07) !important;
    }
    .tenant-barbersclub .barber-option .barber-name { color: #e5e5e5 !important; }
    .tenant-barbersclub .barber-option p { color: #a3a3a3 !important; }
    .tenant-barbersclub .barber-option .text-brand-neon {
      color: #eab308 !important;
    }
    /* ── Time pill seleccionada: dorado ── */
    .tenant-barbersclub .time-pill {
      background: #27272a !important;
      border-color: #404040 !important;
      color: #e5e5e5 !important;
    }
    .tenant-barbersclub .time-pill:hover:not(.disabled) {
      border-color: #eab308 !important;
      color: #eab308 !important;
    }
    .tenant-barbersclub .time-pill.border-neon,
    .tenant-barbersclub .time-pill.bg-brand-neon\/10,
    .tenant-barbersclub .time-pill[data-sel] {
      background: rgba(234,179,8,0.12) !important;
      color: #eab308 !important;
      border-color: #eab308 !important;
      box-shadow: 0 0 10px rgba(234,179,8,0.24) !important;
      font-weight: 800 !important;
    }
    /* ── Category pills ── */
    .tenant-barbersclub .category-pill {
      background: transparent !important;
      border-color: #525252 !important;
      color: #d4d4d4 !important;
      box-shadow: none !important;
    }
    .tenant-barbersclub .category-pill:hover {
      border-color: #eab308 !important;
      color: #eab308 !important;
    }
    .tenant-barbersclub .category-pill.border-neon {
      border-color: #eab308 !important;
      color: #eab308 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    /* ── Cabeceras / títulos ── */
    .tenant-barbersclub .cat-title,
    .tenant-barbersclub h2.text-neon,
    .tenant-barbersclub h3.cat-title {
      color: #e5e5e5 !important;
    }
    .tenant-barbersclub .cat-title.border-neon,
    .tenant-barbersclub h3.cat-title.border-neon {
      border-left-color: #eab308 !important;
    }
    /* ── Shimmer dorado al seleccionar (reutiliza cham-card-shimmer) ── */
    .tenant-barbersclub .service-option.border-neon::after,
    .tenant-barbersclub .barber-option.border-neon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
        transparent 30%, rgba(234,179,8,0.28) 50%, transparent 70%);
      transform: translateX(-120%);
      animation: cham-card-shimmer 0.65s cubic-bezier(0.25,0.46,0.45,0.94) 1;
      pointer-events: none;
    }
    /* ── Headers de grupo horario en dorado ── */
    .tenant-barbersclub #hoursGrid .text-gray-600 {
      color: rgba(234,179,8,0.75) !important;
    }
    /* ── Calendario ── */
    .tenant-barbersclub .day-btn {
      background: #27272a !important;
      border-color: #404040 !important;
      color: #d4d4d4 !important;
    }
    .tenant-barbersclub .day-btn:hover:not(:disabled) {
      border-color: #eab308 !important;
      color: #eab308 !important;
    }
    .tenant-barbersclub .day-btn.active,
    .tenant-barbersclub .day-btn.border-neon {
      background: #eab308 !important;
      border-color: #eab308 !important;
      color: #18181b !important;
      font-weight: 800 !important;
    }
    .tenant-barbersclub .day-btn.active span,
    .tenant-barbersclub .day-btn.border-neon span,
    .tenant-barbersclub .day-btn.active .day-num,
    .tenant-barbersclub .day-btn.border-neon .day-num {
      color: #18181b !important;
    }
    /* ── Inputs paso 4 ── */
    .tenant-barbersclub #clientName,
    .tenant-barbersclub #clientPhone,
    .tenant-barbersclub #clientEmail {
      background-color: #27272a !important;
      border: 1px solid #404040 !important;
      color: #e5e5e5 !important;
    }
    .tenant-barbersclub #clientName:focus,
    .tenant-barbersclub #clientPhone:focus,
    .tenant-barbersclub #clientEmail:focus {
      border-color: #eab308 !important;
      box-shadow: 0 0 0 2px rgba(234,179,8,0.18) !important;
    }
    .tenant-barbersclub #step4 label {
      color: #d4d4d4 !important;
    }

    /* ── Hero slider (Barbers Club) — 3 slides cross-fade ─────────── */
    .hero-slider-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }
    .hero-slider-bg .hero-slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center 35%;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 1000ms ease-in-out;
      will-change: opacity;
    }
    .hero-slider-bg .hero-slide.is-active { opacity: 1; }
    /* Cuando el slider está activo (barbersclub), retiramos la imagen estática */
    .tenant-barbersclub .booking-hero { background-image: none !important; }
    /* Overlay más denso para asegurar legibilidad sobre cualquier foto */
    .tenant-barbersclub .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(24,24,27,0.72) 0%, rgba(24,24,27,0.48) 40%, rgba(24,24,27,0.98) 100%) !important;
    }
    /* ── STUDIO LUXURY — hereda el tema de Barbers Club (alias) pero usa el
       banner REAL del local en el hero. El slider JS de barbersclub NO se
       dispara aquí (guard por CURRENT_TENANT_ID en initHeroSlider), así que
       esta imagen estática es la que se ve. Va después del `none` de arriba
       para ganar por orden (misma especificidad). ── */
    .tenant-estudioluxury .booking-hero {
      background-image: url('/luxury/banner.webp') !important;
      background-size: cover !important;
      background-position: center 42% !important;
      background-color: #0b0a09 !important;
    }

    /* Renacer (rediseño tema claro 2026): hero con FOTO de banner + overlay
       oscuro y texto blanco (patrón aura/latincaribe), cuerpo claro debajo.
       El resto del tema claro/azul marino/azul vive en el bloque grande
       .tenant-renacer (más abajo, después del bloque de Infinity). */
    .tenant-renacer .booking-hero {
      background-image: url('/renacer/banner.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
      background-color: #141018 !important;
    }
    /* Texto del hero blanco sobre la foto (el bloque grande mapea .text-white
       a slate; aquí lo devolvemos a blanco solo dentro del hero). */
    .tenant-renacer .booking-hero .text-white,
    .tenant-renacer .booking-hero .text-white\/70,
    .tenant-renacer .booking-hero .text-white\/50 { color: inherit !important; }
    .tenant-renacer .booking-hero p,
    .tenant-renacer .booking-hero span { color: rgba(255,255,255,0.75) !important; }
    .tenant-renacer #heroBadgeRating { color: #ffffff !important; }
    .tenant-renacer #heroBadgeCount { color: rgba(255,255,255,0.55) !important; }

    /* ── Oren Barber — hero propio ───────────────────────────────────────
       Reutiliza el tema CLARO de Aura (cuerpo blanco). El hero es un slider
       con los banners REALES de cada sede (renaca.webp / villaalemana.webp),
       que rotan para mostrar que son 2 locales (ver initHeroSlider). Quitamos
       la imagen de fondo del .booking-hero (Aura pinta /auralogin.webp) para
       que el slider #heroSliderBg se vea por debajo; queda un fondo oscuro de
       respaldo mientras cargan las fotos. El doble .tenant-oren.tenant-aura
       gana en especificidad sobre la regla de Aura. */
    .tenant-oren.tenant-aura .booking-hero,
    .tenant-oren .booking-hero {
      background-image: none !important;
      background-color: #0a0a0d !important;
    }
    /* Overlay más denso sobre las fotos para que el logo y el nombre se lean. */
    .tenant-oren .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(10,10,13,0.62) 0%, rgba(10,10,13,0.42) 40%, rgba(10,10,13,0.94) 100%) !important;
    }
    /* Oren (tema claro Aura) — tarjetas de sucursal en claro. Traen estilos
       dark inline (bg-[#0a0a0d], text-gray-100, icon bg-[#111115]) porque
       ningún tenant claro usaba multi-sucursal; las igualamos a las cards de
       servicio (blancas, borde y sombra suaves, texto oscuro). */
    .tenant-oren .sucursal-option {
      background: #ffffff !important;
      border-color: #E5E7EB !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.05) !important;
    }
    .tenant-oren .sucursal-option:hover { border-color: #D1D5DB !important; }
    .tenant-oren .sucursal-option.border-neon,
    .tenant-oren .sucursal-option.bg-brand-neon\/10 {
      background: #F3F4F6 !important;
      border-color: #4B5563 !important;
    }
    .tenant-oren .sucursal-option .font-bold { color: #18181B !important; }
    .tenant-oren .sucursal-option p { color: #6B7280 !important; }
    .tenant-oren .sucursal-option > div:first-child {
      background: #F3F4F6 !important;
      border-color: #E5E7EB !important;
    }
    .tenant-oren .sucursal-option .ph-map-pin { color: #6B7280 !important; }

    /* ── Oren: multi-sucursal fit & finish ─────────────────────────────
       (1) Info-strip (Ubicación + Horario + Consultas) NO tiene sentido
       antes de elegir sucursal: ambos datos varían por sede. La clase
       `sede-pendiente` la pone config.js en <html> desde el arranque
       (antes de que el body exista → cero flash) y la quita
       selectSucursal() al elegir. Reaparece con el detalle correcto de
       la sede en el paso 1.
       (2) "Quiénes Somos" / "Información" (heredados de Aura) se ocultan
       siempre en Oren — el tenant no los usa. La doble clase
       `.tenant-oren.tenant-aura` sube la especificidad para ganarle a la
       regla `:is(.tenant-aura,...) #aura-sobre-wrap { display: block }`
       que viene más abajo con !important. */
    html.tenant-oren.sede-pendiente .info-strip { display: none !important; }
    .tenant-oren.tenant-aura #aura-sobre-wrap { display: none !important; }

    /* ── Sion Barbería — hero propio y strip depurado ─────────────────────
       Reutiliza el tema CLARO de Aura (igual que Oren), con tres ajustes:

       (1) Hero: fachada real del local (/sion/banner.webp) en vez de la foto
           genérica de Aura (/auralogin.webp). El doble .tenant-sion.tenant-aura
           gana en especificidad sobre la regla :is(.tenant-aura,...) de más
           abajo, que trae !important.
       (2) "Quiénes Somos" / "Información" (heredados de Aura) se ocultan: el
           tenant no tiene ese contenido cargado y salían vacíos.
       (3) "Consultas" sale del info-strip. Ubicación y Horario son flex-1, así
           que al quedar dos se reparten el ancho completo solos. */
    .tenant-sion.tenant-aura .booking-hero,
    .tenant-sion .booking-hero {
      background-image: url('/sion/banner.webp') !important;
      background-size: cover !important;
      background-position: center 42% !important;
      background-color: #2C3941 !important;
    }
    .tenant-sion .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(12,15,17,0.68) 0%, rgba(12,15,17,0.52) 40%, rgba(12,15,17,0.95) 100%) !important;
    }
    .tenant-sion.tenant-aura #aura-sobre-wrap { display: none !important; }
    .tenant-sion.tenant-aura #aura-info-wa,
    .tenant-sion #aura-info-wa { display: none !important; }

    /* ── New Glow Salón — hero con la foto real del local ─────────────────
       Reutiliza el tema CLARO de Aura. Sin este bloque el hero sale con
       /auralogin.webp, o sea la foto del salón Aura en la portada de New Glow
       — lo mismo que le pasó a Omega por saltarse este paso.

       `heroBanner` en config.js NO alcanza: Aura pinta el fondo por CSS con
       !important y le gana al valor del tenant. El doble
       .tenant-newglow.tenant-aura es lo que recupera la especificidad.

       La foto es el interior real (neón rosa + pared de flores). Encuadre en
       45% para dejar a la vista el letrero del fondo, y overlay más denso que
       el de Aura porque sobre el rosa claro el logo blanco se lavaba. */
    .tenant-newglow.tenant-aura .booking-hero,
    .tenant-newglow .booking-hero {
      background-image: url('/newglow/banner.webp') !important;
      background-size: cover !important;
      background-position: center 45% !important;
      background-color: #2a1f27 !important;
    }
    .tenant-newglow.tenant-aura .booking-hero-overlay,
    .tenant-newglow .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(28,18,26,0.50) 0%, rgba(28,18,26,0.30) 40%, rgba(28,18,26,0.90) 100%) !important;
    }

    /* Salón Amanda: su hero (y todo su aspecto) vive en salonamanda/tema.css
       desde que pasó a tema oscuro propio (25-09-2026). */

    /* ── CLEAN PUPS — hero con la foto real de su camión ──────────────
       Mismo mecanismo que New Glow: reutiliza el tema CLARO de Aura y sin
       este bloque el hero saldría con /auralogin.webp. El camión ES el local
       (van a domicilio), así que es la foto honesta para la portada. */
    .tenant-cleanpups.tenant-aura .booking-hero,
    .tenant-cleanpups .booking-hero {
      background-image: url('/cleanpups/banner.webp') !important;
      background-size: cover !important;
      background-position: center 55% !important;
      background-color: #232B63 !important;
    }
    .tenant-cleanpups.tenant-aura .booking-hero-overlay,
    .tenant-cleanpups .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(20,26,66,0.50) 0%, rgba(20,26,66,0.42) 40%, rgba(20,26,66,0.90) 100%) !important;
    }

    /* ── Paola Leiva — hero con carrusel de dos fotos ─────────────────────
       Misma estructura que New Glow: reutiliza el tema CLARO de Aura y el
       doble .tenant-paolaleiva.tenant-aura para recuperar la especificidad.
       Sin este bloque su portada mostraba /auralogin.webp — la foto del salón
       AURA en la página de Paola. Estaba así en producción (8 referencias a
       auralogin el 05-09-2026), el mismo tropiezo que ya pasó con New Glow y
       con Omega.

       Dos banners en crossfade, como Memphis: la primera va de fondo y la
       segunda encima en un ::before que se desvanece. No hace falta JS. */
    .tenant-paolaleiva.tenant-aura .booking-hero,
    .tenant-paolaleiva .booking-hero {
      background-image: url('/paolaleiva/banner-1.webp') !important;
      background-size: cover !important;
      background-position: center 45% !important;
      background-color: #2a1f27 !important;
    }
    .tenant-paolaleiva .booking-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('/paolaleiva/banner-2.webp');
      background-size: cover;
      background-position: center 45%;
      z-index: 0;
      animation: paolaFade 12s ease-in-out infinite;
    }
    /* El overlay tiene que quedar SOBRE el carrusel o el degradado se pierde
       cuando entra la segunda foto. */
    .tenant-paolaleiva .booking-hero-overlay { z-index: 1; }
    .tenant-paolaleiva.tenant-aura .booking-hero-overlay,
    .tenant-paolaleiva .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(28,18,26,0.50) 0%, rgba(28,18,26,0.30) 40%, rgba(28,18,26,0.90) 100%) !important;
    }
    @keyframes paolaFade {
      0%, 42%  { opacity: 0; }
      50%, 92% { opacity: 1; }
      100%     { opacity: 0; }
    }
    /* Quien pidió menos animación no ve el cruce: se queda la primera foto. */
    @media (prefers-reduced-motion: reduce) {
      .tenant-paolaleiva .booking-hero::before { animation: none; opacity: 0; }
    }

    /* ── Omega Studio — hero editorial claro ──────────────────────────────
       Reutiliza el tema CLARO de Aura (igual que Oren y Sion), pero al revés:
       Aura pinta un hero OSCURO (foto + overlay) sobre cuerpo claro, y la
       identidad de Omega es negro sobre hueso — su logo y su wordmark vienen
       en tinta negra sobre #F8F7F4. Así que acá el hero se invierte a claro.

       Sin este bloque el tenant mostraba /auralogin.webp: literalmente la foto
       del salón Aura en el hero de Omega. Oren y Sion ya tenían su override;
       Omega se recreó (24-jul-2026) y se saltó ese paso.

       No hay foto del local todavía, así que el hero es tipográfico: el Ω en
       el ring y el nombre compuesto en Plus Jakarta Sans con tracking amplio,
       que es lo más cercano a la geométrica del wordmark oficial y ya viene
       cargada (no suma requests). Cuando lleguen las fotos, basta con darle
       background-image acá — el resto del bloque no cambia. */
    .tenant-omega.tenant-aura .booking-hero,
    .tenant-omega .booking-hero {
      background-image: none !important;
      background-color: #F8F7F4 !important;
      border-bottom: 1px solid rgba(17,17,17,0.10) !important;
    }
    /* El overlay de Aura es un degradado casi opaco pensado para tapar una
       foto; sobre el hueso ensuciaría el fondo.

       OJO con la especificidad: `:is(.tenant-aura,…) .booking-hero-overlay`
       pesa lo mismo que `.tenant-omega .booking-hero-overlay` y vive MÁS
       ABAJO en el archivo, así que ganaba el empate y el hero se veía negro
       igual. Por eso todo este bloque va con la doble clase. */
    .tenant-omega.tenant-aura .booking-hero-overlay,
    .tenant-omega .booking-hero-overlay { background: none !important; }
    /* Aura corona el hero con un glow gris que solo se lee sobre oscuro. */
    .tenant-omega.tenant-aura .booking-hero::after { display: none !important; }

    /* Ring del logo: el markup trae background:#0a0a0a inline y el Ω viene en
       tinta negra con alfa, así que sin esto queda negro sobre negro. */
    .tenant-omega.tenant-aura .hero-logo-ring,
    .tenant-omega .hero-logo-ring {
      background: #FFFFFF !important;
      border: 1px solid rgba(17,17,17,0.12) !important;
      box-shadow: none !important;
      animation: none !important;
    }
    .tenant-omega.tenant-aura #shopLogo,
    .tenant-omega #shopLogo {
      object-fit: contain !important;
      padding: 14px !important;
    }

    /* Badge de reseñas: trae background negro translúcido + borde blanco
       INLINE (pensado para hero oscuro). Sobre hueso hay que invertirlo. */
    .tenant-omega.tenant-aura #heroGoogleBadge {
      background: #FFFFFF !important;
      border: 1px solid rgba(17,17,17,0.12) !important;
      box-shadow: 0 1px 3px rgba(17,17,17,0.06) !important;
    }
    /* Progreso: Aura usa gris pizarra; Omega lo lleva a su negro. */
    .tenant-omega.tenant-aura #progressBar { background: #111111 !important; }

    /* Nombre: mayúsculas espaciadas, el gesto del wordmark. */
    .tenant-omega.tenant-aura #shopNombre {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
      color: #111111 !important;
      font-size: 1.45rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.22em !important;
      text-transform: uppercase !important;
      text-shadow: none !important;
      /* El tracking empuja el texto a la derecha: se compensa para que quede
         ópticamente centrado bajo el logo. */
      text-indent: 0.22em !important;
    }
    .tenant-omega.tenant-aura .gold-divider,
    .tenant-omega .gold-divider {
      background: #111111 !important;
      background-image: none !important;
      width: 34px !important;
      height: 1px !important;
      opacity: 0.55 !important;
      margin: 14px auto !important;
      box-shadow: none !important;
    }
    .tenant-omega.tenant-aura .booking-hero p,
    .tenant-omega.tenant-aura .booking-hero span,
    .tenant-omega.tenant-aura #shopSlogan {
      color: #6B7280 !important;
      text-shadow: none !important;
      animation: none !important;
    }
    /* Rating: la nota en tinta, el conteo en gris de apoyo. */
    .tenant-omega.tenant-aura #heroBadgeRating { color: #111111 !important; }
    .tenant-omega.tenant-aura #heroBadgeCount  { color: #6B7280 !important; }
    .tenant-omega.tenant-aura .booking-hero .text-white,
    .tenant-omega.tenant-aura .booking-hero .text-white\/70,
    .tenant-omega.tenant-aura .booking-hero .text-white\/50 { color: #6B7280 !important; }
    /* Volver: sobre hueso el círculo frost de Aura desaparece; se le da borde. */
    .tenant-omega.tenant-aura .booking-hero button[onclick="goBack()"] {
      background: #FFFFFF !important;
      border: 1px solid rgba(17,17,17,0.12) !important;
      box-shadow: none !important;
    }

    /* Banda de datos bajo el hero: negro de marca en vez del navy de Aura,
       que hace de corte entre el hero claro y el cuerpo claro.

       El `[style]` del selector no es decorativo: el markup trae un background
       inline, y Aura lo pisa con `.info-strip[style]` — que pesa (0,3,0) y
       vive más abajo. Sin el atributo acá quedaba empate y ganaba el navy. */
    .tenant-omega.tenant-aura .info-strip,
    .tenant-omega.tenant-aura .info-strip[style] {
      background: #111111 !important;
      border-bottom-color: rgba(255,255,255,0.10) !important;
    }
    .tenant-omega.tenant-aura .info-strip i,
    .tenant-omega.tenant-aura .info-strip i[style] { color: #A1A1AA !important; }

    /* Secciones propias de Aura: el tenant no tiene ese contenido cargado
       (quienesSomos.activo = false) y salían vacías. Mismo criterio que Sion. */
    .tenant-omega.tenant-aura #aura-sobre-wrap { display: none !important; }

    /* ── Alfa Men — tinta negra sobre blanco puro ─────────────────────────
       Mismo tratamiento que Omega (tema CLARO de Aura + hero invertido a
       claro), pero la base es #FFFFFF en vez de hueso: su logo (perfil B&N en
       círculo) y su wordmark "ALFA MEN" oficiales son tinta negra sobre
       blanco. Sin este bloque el hero mostraba /auralogin.webp (la foto del
       salón Aura). Hero tipográfico: nombre en mayúsculas con tracking amplio,
       el gesto de la angular geométrica del wordmark. Toda la capa va con
       doble clase .tenant-alfamen.tenant-aura por el empate de especificidad
       con `:is(.tenant-aura,…)` (ver nota en el bloque de Omega). */
    .tenant-alfamen.tenant-aura .booking-hero,
    .tenant-alfamen .booking-hero {
      /* Rayado diagonal ultra-tenue, guiño al poste tricolor barbershop
         reducido a un pulso rítmico. Sobre blanco puro da textura sin ensuciar
         y desaparece a distancia (opacidad 3% en negro). */
      background-image:
        repeating-linear-gradient(-45deg,
          rgba(17,17,17,0.032) 0 1px,
          transparent 1px 14px) !important;
      background-color: #FFFFFF !important;
      background-attachment: local !important;
      border-bottom: 1px solid rgba(17,17,17,0.08) !important;
      padding-top: 2rem !important;
      padding-bottom: 2.25rem !important;
      position: relative;
      overflow: hidden;
    }
    .tenant-alfamen.tenant-aura .booking-hero-overlay,
    .tenant-alfamen .booking-hero-overlay { background: none !important; }
    .tenant-alfamen.tenant-aura .booking-hero::after { display: none !important; }
    /* Micro-badge editorial vertical en el borde derecho — clase de
       identidad "portada de revista masculina". El único gesto que necesita
       el hero encima del logo/wordmark; sin él la composición se ve muy
       simétrica y le falta un ancla visual. */
    .tenant-alfamen.tenant-aura .booking-hero::before {
      content: 'ESTÉTICA MASCULINA';
      display: block !important;
      position: absolute;
      right: 20px;
      top: 78px;
      z-index: 5;
      pointer-events: none;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-size: 9px;
      line-height: 1;
      letter-spacing: 0.32em;
      font-weight: 700;
      color: rgba(17,17,17,0.32);
      text-transform: uppercase;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    /* Ring del logo: el markup trae background:#0a0a0a inline; el logo ya es
       un círculo blanco con el perfil en tinta, así que el ring se funde en
       blanco con drop-shadow suave para separarlo del rayado del fondo. */
    .tenant-alfamen.tenant-aura .hero-logo-ring,
    .tenant-alfamen .hero-logo-ring {
      background: #FFFFFF !important;
      border: 1px solid rgba(17,17,17,0.10) !important;
      box-shadow:
        0 12px 32px -8px rgba(17,17,17,0.16),
        0 3px 8px -2px rgba(17,17,17,0.08) !important;
      animation: none !important;
    }
    .tenant-alfamen.tenant-aura #heroGoogleBadge {
      background: #FFFFFF !important;
      border: 1px solid rgba(17,17,17,0.12) !important;
      box-shadow: 0 2px 8px -2px rgba(17,17,17,0.08) !important;
      backdrop-filter: none !important;
    }
    .tenant-alfamen.tenant-aura #progressBar { background: #111111 !important; }
    /* Wordmark ALFA MEN: gesto tipográfico principal del hero — mayúsculas con
       tracking amplio (guiño al wordmark oficial en stencil) y un poco más
       grande que Omega para reforzar la identidad "revista masculina". */
    .tenant-alfamen.tenant-aura #shopNombre {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
      color: #111111 !important;
      font-size: 1.75rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.28em !important;
      text-transform: uppercase !important;
      text-shadow: none !important;
      text-indent: 0.28em !important;
      margin-top: 4px !important;
    }
    /* Divider editorial: tres segmentos — línea larga, punto, línea larga —
       reemplaza el gold-divider genérico por algo con más carácter. Se hace
       con box-shadow para no tocar el markup. */
    .tenant-alfamen.tenant-aura .gold-divider,
    .tenant-alfamen .gold-divider {
      background: #111111 !important;
      background-image: none !important;
      width: 20px !important;
      height: 1.5px !important;
      opacity: 1 !important;
      margin: 18px auto 14px !important;
      border-radius: 2px !important;
      /* Segmentos laterales: espacio + línea a cada lado. */
      box-shadow:
        -50px 0 0 -0.25px #111111,
        -30px 0 0 -1px #111111,
        50px 0 0 -0.25px #111111,
        30px 0 0 -1px #111111 !important;
      position: relative !important;
    }
    /* Antes del wordmark: kicker "EST. 2017 · VIÑA DEL MAR" muy pequeño con
       tracking amplio, encima del nombre — el gesto del sub-título editorial. */
    .tenant-alfamen.tenant-aura #shopSlogan {
      color: rgba(17,17,17,0.62) !important;
      text-shadow: none !important;
      animation: none !important;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
      font-size: 10.5px !important;
      font-weight: 700 !important;
      letter-spacing: 0.32em !important;
      text-transform: uppercase !important;
      margin-top: 2px !important;
    }
    .tenant-alfamen.tenant-aura .booking-hero p,
    .tenant-alfamen.tenant-aura .booking-hero span {
      color: #6B7280 !important;
      text-shadow: none !important;
      animation: none !important;
    }
    .tenant-alfamen.tenant-aura #heroBadgeRating { color: #111111 !important; }
    .tenant-alfamen.tenant-aura #heroBadgeCount  { color: #6B7280 !important; }
    .tenant-alfamen.tenant-aura .booking-hero .text-white,
    .tenant-alfamen.tenant-aura .booking-hero .text-white\/70,
    .tenant-alfamen.tenant-aura .booking-hero .text-white\/50 { color: #6B7280 !important; }
    .tenant-alfamen.tenant-aura .booking-hero button[onclick="goBack()"] {
      background: #FFFFFF !important;
      border: 1px solid rgba(17,17,17,0.12) !important;
      box-shadow: none !important;
    }

    /* Banda de datos bajo el hero en negro de marca (corte entre hero blanco
       y cuerpo claro). El `[style]` es por la regla `.info-strip[style]` de
       Aura — misma pelea de especificidad que documenta el bloque de Omega. */
    .tenant-alfamen.tenant-aura .info-strip,
    .tenant-alfamen.tenant-aura .info-strip[style] {
      background: #111111 !important;
      border-bottom-color: rgba(255,255,255,0.10) !important;
    }
    .tenant-alfamen.tenant-aura .info-strip i,
    .tenant-alfamen.tenant-aura .info-strip i[style] { color: #A1A1AA !important; }

    /* "Quiénes Somos" ya sale por el .qs-btn común del info-strip; el wrap de
       Aura duplicaba el botón y no hay fotos de "Información" cargadas. */
    .tenant-alfamen.tenant-aura #aura-sobre-wrap { display: none !important; }

    /* Pantalla de éxito post-reserva: el default trae el botón de WhatsApp
       con glow verde neón, que sobre blanco alfamen se ve chillón y rompe la
       paleta B&N (mismo criterio que llevó el smart slot dorado a tinta).
       Se lleva a tinta sólida con el ícono en verde de marca — mantiene
       reconocimiento de WhatsApp sin el glow. */
    .tenant-alfamen.tenant-aura #waBtnLink,
    .tenant-alfamen.tenant-aura #success-state a#waBtnLink {
      background: #111111 !important;
      border-color: #111111 !important;
      color: #FFFFFF !important;
      box-shadow: 0 6px 18px rgba(17,17,17,0.16) !important;
    }
    .tenant-alfamen.tenant-aura #waBtnLink i {
      color: #25D366 !important;
      filter: none !important;
      text-shadow: none !important;
    }
    /* Botón Google Calendar en la misma familia visual que las cards del
       hero (fondo blanco puro + borde tinta tenue + ícono en tinta). */
    .tenant-alfamen.tenant-aura #successGCalBtn {
      background: #FFFFFF !important;
      border-color: rgba(17,17,17,0.12) !important;
      color: #111111 !important;
    }
    .tenant-alfamen.tenant-aura #successGCalBtn i { color: #111111 !important; }
    /* Card de resumen dinámico: fondo blanco (heredaba el negro) + borde
       tinta muy tenue + textos en tinta. */
    .tenant-alfamen.tenant-aura #success-state .bg-\[\#0a0a0d\] {
      background: #FFFFFF !important;
      border-color: rgba(17,17,17,0.10) !important;
    }
    .tenant-alfamen.tenant-aura #successSummaryService { color: #111111 !important; }
    .tenant-alfamen.tenant-aura #successSummaryDate,
    .tenant-alfamen.tenant-aura #successSummaryDate span { color: #6B7280 !important; }
    .tenant-alfamen.tenant-aura #successSummaryExtras { color: #6B7280 !important; border-top-color: rgba(17,17,17,0.08) !important; }
    /* Bloque del código de gestión: dashed en tinta + código en negro. */
    .tenant-alfamen.tenant-aura #successCodigoWrap {
      background: #FFFFFF !important;
      border-color: rgba(17,17,17,0.22) !important;
    }
    .tenant-alfamen.tenant-aura #successCodigoCita { color: #111111 !important; }

    /* ══════════════════════════════════════════════════════════════════
       CLINICAL GLOW — clínica estética premium (estilo editorial Apple)
       ══════════════════════════════════════════════════════════════════
       Paleta: nude cálido + dorado sofisticado + chocolate profundo. Tipografía
       dual: Cormorant Garamond (editorial serif, ya cargada globalmente) para
       display + system-ui/Inter para UI. Fuera de la capa `.tenant-aura` está
       el fallback ligero para tenants con doble clase. */

    .tenant-clinicalglow {
      --accent:    #c5a677;
      --accent-r:  197; --accent-g: 166; --accent-b: 119;
      --body-bg:   #faf5f0;
    }
    .tenant-clinicalglow body { background-color: #faf5f0 !important; }

    /* ── Resumen de reserva + franjas AM/PM (clínicas) ────────────────
       Base OSCURA como toda la plataforma. Iban con `style=` inline y por eso
       se veían blanco sobre blanco en Clinical Glow: un inline no lo puede
       pisar ninguna hoja, así que el override del tema claro no llegaba.
       Con clases, cada tenant claro las remapea igual que el resto. */
    #resumenReserva {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .rr-label  { color: rgba(255,255,255,0.45); }
    .rr-valor  { color: rgba(255,255,255,0.92); }
    .rr-franja { color: rgba(255,255,255,0.50); }

    /* ── FICHA INFERIOR (elemento firma del sistema Clinical Glow) ──
       Barra oscura que se va escribiendo línea por línea a medida que la
       persona elige, con el CTA adentro. Tokens del sistema:
       --ink #14151A · --gold #A8842F · --gold-lt #E6D2A0 · --line #E4DFD5.
       Los datos (duración, hora, precio) van en DM Mono: todo lo que es dato
       se ve como dato. La fuente se inyecta solo en clínicas — ver
       _fuentesClinica() — para no cargarles tres familias a los otros 27. */
    .tenant-clinicalglow.tenant-aura #btnContinueBar {
      background: #14151A !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-top: 1.5px solid #A8842F !important;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .tenant-clinicalglow.tenant-aura #resumenReserva {
      background: transparent !important;
      border: 0 !important;
      border-bottom: 1px solid rgba(230,210,160,0.18) !important;
      border-radius: 0 !important;
      padding: 0 0 10px !important;
      margin-bottom: 12px !important;
      animation: fichaSube .28s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes fichaSube { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
    @media (prefers-reduced-motion: reduce) {
      .tenant-clinicalglow.tenant-aura #resumenReserva { animation: none; }
    }
    .tenant-clinicalglow.tenant-aura .rr-label {
      font-family:"DM Mono",ui-monospace,monospace !important;
      letter-spacing:.14em !important;
      color:#8A8D96 !important;
    }
    .tenant-clinicalglow.tenant-aura .rr-valor {
      font-family:"DM Mono",ui-monospace,monospace !important;
      font-variant-numeric: tabular-nums;
      color:#E6D2A0 !important;
    }
    .tenant-clinicalglow.tenant-aura .rr-franja { color: #8A8D96 !important; }
    /* El CTA es el único dorado sólido de la página. */
    .tenant-clinicalglow.tenant-aura #btnContinueBar #btnContinue {
      background:#A8842F !important;
      color:#14151A !important;
      border-radius:11px !important;
      min-height:44px;
      font-family:"Karla",system-ui,sans-serif !important;
    }
    .tenant-clinicalglow.tenant-aura #btnContinueBar #btnContinue:focus-visible,
    .tenant-clinicalglow.tenant-aura .time-pill:focus-visible {
      outline:2px solid #A8842F !important; outline-offset:2px;
    }


    /* ── HERO · la placa es el único lujo ───────────────────────────
       Sistema Clinical Glow (docs/design-reference.html, esa página manda):
       bloque en tinta, marca GRABADA en placa —borde dorado 1.5px y degradado
       recortado sobre el texto—, bajada en Karla y línea de credencial en
       --ink-40. Se retiran los halos nude, el kicker vertical y el logo-ring:
       si una pantalla se siente cargada, se quita.
       Tokens: --ink #14151A · --ink-40 #8A8D96 · --gold #A8842F ·
       --gold-lt #E6D2A0. Las tintas del hero oscuro (#CFCBC2 bajada,
       #D8D4CB accesos, hairline blanco 9%) salen de la referencia.

       ⚠ DOBLE CLASE SIEMPRE (.tenant-clinicalglow.tenant-aura): las reglas
       :is(.tenant-aura,…) de más abajo empatan en especificidad y, por ir
       después en el archivo, ganarían sin avisar. */
    .tenant-clinicalglow.tenant-aura .booking-hero,
    .tenant-clinicalglow .booking-hero {
      background: #14151A !important;
      background-image: none !important;
      position: relative;
      overflow: hidden;
      min-height: 0 !important;
      /* Flex + order: el carrusel (#heroSliderBg) viene ANTES del contenido
         en el DOM pero se dibuja después, como franja propia. */
      display: flex;
      flex-direction: column;
      padding: 22px 20px 0 !important;
      text-align: center;
    }
    /* Sin scrim: la foto ya no vive detrás del texto. De fondo con velo no se
       veía (dos intentos, 2026-08-18); ahora el carrusel es una franja propia
       enmarcada y nada se le superpone. */
    .tenant-clinicalglow.tenant-aura .booking-hero-overlay,
    .tenant-clinicalglow .booking-hero-overlay { background: none !important; display: none !important; }
    /* ── CARRUSEL — cinta editorial dentro del bloque de tinta ──────
       #heroSliderBg deja de ser fondo absoluto (inset:0) y pasa al flujo
       como franja horizontal deslizable. Cinta y no vitrina única: usa el
       ancho (gratis) en vez del alto — con la vitrina de 300px el paso 1
       quedaba bajo el pliegue del celular (2026-08-18) y con una de 210px
       la foto quedaba tímida. Los .hero-slide pasan a static y se ven
       TODOS a la vez (opacity:1 anula el crossfade base); initHeroSlider
       detecta el tenant y la hace avanzar sola como marquesina.
       Sin scroll-snap: pelearía con el avance continuo por scrollLeft. */
    .tenant-clinicalglow.tenant-aura #heroSliderBg,
    .tenant-clinicalglow #heroSliderBg {
      position: relative;
      inset: auto;
      order: 5;
      z-index: 1;
      width: auto;
      /* Sangra el padding lateral del hero (20px) para correr de borde a
         borde; los extremos se funden en la tinta con la máscara. */
      margin: 14px -20px 0;
      padding: 12px 20px;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      /* La base .hero-slider-bg trae pointer-events:none (era fondo);
         sin esto la cinta no se puede deslizar con el dedo. */
      pointer-events: auto;
      /* Hairlines dorados arriba/abajo — el mismo hilo de la referencia. */
      background:
        linear-gradient(90deg, transparent, rgba(168,132,47,0.55), transparent) top / 100% 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(168,132,47,0.55), transparent) bottom / 100% 1px no-repeat;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
    }
    .tenant-clinicalglow #heroSliderBg::-webkit-scrollbar { display: none; }
    /* Fotos 3:4 y marquito 3:4: con cover entran COMPLETAS, sin recorte
       (cualquier scale > 1 o marco apaisado las cortaba — letrero cortado,
       2026-08-18). El `center 35%` de la base era para heros de fondo. */
    .tenant-clinicalglow #heroSliderBg .hero-slide {
      position: static;
      flex: 0 0 auto;
      width: 128px;
      aspect-ratio: 3 / 4;
      opacity: 1 !important;
      transform: none !important;
      background-position: center center !important;
      border-radius: 8px;
      border: 1px solid rgba(168,132,47,0.35);
      box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    }
    /* Sin kicker vertical ni hilo al pie del hero: el hilo dorado cierra la
       franja de accesos, que es donde termina el bloque oscuro. */
    .tenant-clinicalglow.tenant-aura .booking-hero::before,
    .tenant-clinicalglow.tenant-aura .booking-hero::after {
      content: none !important;
      display: none !important;
    }
    /* El contenido del hero pierde el padding grande del template: el aire
       lo pone el propio hero (26px arriba, 0 abajo — cierra la franja). */
    .tenant-clinicalglow.tenant-aura .booking-hero > div:has(#heroLogoArea) {
      padding: 0 !important;
    }
    /* Logo circular oficial (20-08) SOBRE la placa: el monograma CG trae su
       propio círculo negro + borde dorado, así que el ring del template se
       apaga (fondo y borde fuera) y solo se le deja un halo dorado suave.
       La placa tipográfica SIGUE siendo la marca del hero — el círculo la
       corona, no la reemplaza (pedido de Ignacio: "el círculo también"). */
    .tenant-clinicalglow.tenant-aura #heroLogoArea,
    .tenant-clinicalglow #heroLogoArea {
      display: flex !important;
      margin-bottom: 14px !important;
    }
    .tenant-clinicalglow.tenant-aura .hero-logo-ring,
    .tenant-clinicalglow .hero-logo-ring {
      width: 88px !important;
      height: 88px !important;
      background: transparent !important;
      border: none !important;
      box-shadow: 0 0 26px rgba(230, 210, 160, 0.28) !important;
      animation: cgPlacaGlow 3.6s ease-in-out infinite;
    }
    .tenant-clinicalglow.tenant-aura #shopLogo,
    .tenant-clinicalglow #shopLogo {
      object-fit: cover !important;
    }
    /* Tampoco va el divisor: entre placa, bajada y credencial el aire basta. */
    .tenant-clinicalglow.tenant-aura .booking-hero .gold-divider { display: none !important; }

    /* PLACA — el <h1> es la caja y el <span> que le inyecta _heroClinica()
       lleva el degradado recortado. Son dos elementos porque background-clip
       recorta el fondo del MISMO elemento: si la caja y el texto fueran uno,
       el degradado se comería la placa. */
    .tenant-clinicalglow.tenant-aura #shopNombre {
      display: inline-block !important;
      position: relative !important;
      padding: 11px 22px !important;
      margin: 0 !important;
      border-radius: 3px !important;
      background: linear-gradient(155deg, #26272C, #101115 60%) !important;
      border: 1.5px solid #A8842F !important;
      box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08) !important;
      font-weight: 400 !important;
      letter-spacing: normal !important;
      line-height: 1.15 !important;
      color: transparent !important;
    }
    /* Halo dorado que respira alrededor de la placa. Va en un pseudo-elemento
       y se anima por opacity: el box-shadow de la placa lleva !important y
       una animación no puede pisarlo (las keyframes pierden contra !important). */
    .tenant-clinicalglow.tenant-aura #shopNombre::before {
      content: '';
      position: absolute;
      inset: -7px;
      border-radius: 6px;
      box-shadow: 0 0 24px 5px rgba(230,210,160,0.30);
      animation: cgPlacaGlow 3.6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes cgPlacaGlow { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
    .tenant-clinicalglow.tenant-aura #shopNombre span {
      display: block;
      font-family: 'Marcellus', Georgia, serif !important;
      font-size: 19px !important;
      font-weight: 400 !important;
      line-height: 1.15 !important;
      text-transform: uppercase !important;
      /* El tracking abre la palabra por la derecha; el text-indent igual le
         devuelve el centro óptico. Sin él la placa se ve corrida a la izquierda. */
      letter-spacing: .22em !important;
      text-indent: .22em;
      /* Dos capas recortadas al texto: el barrido de luz (arriba) pasa cada
         ~4s sobre el degradado dorado fijo (abajo). */
      background:
        linear-gradient(110deg, rgba(255,248,225,0) 42%, rgba(255,248,225,0.95) 50%, rgba(255,248,225,0) 58%),
        linear-gradient(180deg, #F3E4B8, #B8912F 55%, #8A6A1E);
      background-size: 250% 100%, 100% 100%;
      background-position: -125% 0, 0 0;
      background-repeat: no-repeat;
      animation: cgShimmer 4.2s ease-in-out 1.2s infinite;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent !important;
      -webkit-text-fill-color: transparent;
      text-shadow: none !important;
    }
    @keyframes cgShimmer {
      0%   { background-position: -125% 0, 0 0; }
      38%  { background-position: 225% 0, 0 0; }
      100% { background-position: 225% 0, 0 0; }
    }

    /* BAJADA — Karla, no serif: Marcellus queda para h2/h3 y la marca. */
    .tenant-clinicalglow.tenant-aura .booking-hero p:has(#shopSlogan) {
      margin: 14px 0 0 !important;
      padding: 0 !important;
      font-size: 13.5px !important;
      font-weight: 400 !important;
      line-height: 1.45 !important;
      letter-spacing: .1em !important;
      text-transform: none !important;
    }
    .tenant-clinicalglow.tenant-aura #shopSlogan {
      font-family: 'Karla', system-ui, sans-serif !important;
      color: #E8E4DB !important;
      font-style: normal !important;
      font-weight: 400 !important;
      letter-spacing: .1em !important;
      text-shadow: 0 1px 10px rgba(20,21,26,0.85) !important;
      animation: none !important;
    }
    /* CREDENCIAL — la inyecta _heroClinica() desde SHOP.credencial. */
    .tenant-clinicalglow.tenant-aura .cg-credencial {
      margin: 6px 0 0 !important;
      font-family: 'Karla', system-ui, sans-serif !important;
      font-size: 12.5px !important;
      font-weight: 400 !important;
      line-height: 1.45 !important;
      letter-spacing: 0 !important;
      color: #C6C9D0 !important;
      text-shadow: 0 1px 10px rgba(20,21,26,0.85), 0 0 24px rgba(20,21,26,0.6);
      text-transform: none !important;
    }

    /* ── BRILLOS — destellos dorados de 4 puntas sobre el banner ──────
       El markup vive en el hero de TODOS los tenants (patrón .lc-decor de
       Latin Caribe): esta regla base los apaga y solo clinicalglow los
       enciende. Cada <svg> trae posición/tamaño/tinte/ritmo inline. */
    .cg-brillos { display: none; }
    .tenant-clinicalglow .cg-brillos {
      display: block;
      position: absolute;
      inset: 0;
      /* Sobre el scrim (que pinta sin z-index) y bajo el contenido (z-10):
         los destellos titilan encima de la foto pero nunca sobre el texto. */
      z-index: 1;
      pointer-events: none;
    }
    .tenant-clinicalglow .cg-brillos svg {
      position: absolute;
      height: auto;
      filter: drop-shadow(0 0 6px rgba(230,210,160,0.55));
      animation: cgTwinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
      opacity: 0;
    }
    @keyframes cgTwinkle {
      0%, 100% { opacity: 0; transform: scale(0.3) rotate(-14deg); }
      55%      { opacity: 1; transform: scale(1) rotate(6deg); }
    }

    /* ── PASO FINAL compacto para teléfono (pedido 20-08 2º) ─────────
       El paso apilaba club + consideraciones + formulario + datos + chip
       + resumen y daba "scroll infinito". Remedios: (1) el Resumen de
       reserva en-página SE VA — la ficha fija de abajo ya muestra lo
       mismo; (2) paddings y aires a la mitad en las tarjetas de lectura;
       (3) los antecedentes de texto se pliegan (ver _pintarFichaReserva).
       Solo clinicalglow: el resto de tenants mantiene su paso 4. */
    .tenant-clinicalglow #step4 > div:has(#summaryService) { display: none !important; }
    /* En la CONFIRMACIÓN no se navega: mientras #step4 está visible, fuera
       las FAQs, el banner del club y el footer de contacto — eran el grueso
       del "scroll infinito" y en los pasos 1-3 siguen apareciendo igual. */
    .tenant-clinicalglow:has(#step4:not(.hidden)) #faqSection,
    .tenant-clinicalglow:has(#step4:not(.hidden)) #clubBanner,
    .tenant-clinicalglow:has(#step4:not(.hidden)) #footerContact { display: none !important; }
    /* Tarjeta del club en el paso final: se queda (la usa quien inicia
       sesión) pero SIN la fila promocional de íconos — 100px menos. */
    .tenant-clinicalglow #step4AuthContainer .grid.grid-cols-3 { display: none !important; }
    .tenant-clinicalglow #step4 h2 { font-size: 1.35rem !important; margin-bottom: 2px !important; }
    .tenant-clinicalglow #step4 > p.text-\[13px\] { margin-bottom: 12px !important; }
    .tenant-clinicalglow #step4AuthContainer { margin-bottom: 12px !important; }
    .tenant-clinicalglow #consideracionesWrap .cg-form,
    .tenant-clinicalglow #fichaReservaWrap .cg-form,
    .tenant-clinicalglow #consentWebWrap .cg-form {
      padding: 14px 16px !important;
      margin-top: 0 !important;
    }
    .tenant-clinicalglow #consideracionesWrap ul { margin-top: 8px !important; gap: 4px !important; }
    .tenant-clinicalglow #step4 .cg-form-opt { font-size: 12px !important; }
    .tenant-clinicalglow #fichaReservaWrap .fr-opt { padding: 4px 0 !important; }
    .tenant-clinicalglow #step4 .space-y-4 label.block { margin-bottom: 5px !important; }
    .tenant-clinicalglow #step4 input#clientName,
    .tenant-clinicalglow #step4 input#clientPhone,
    .tenant-clinicalglow #step4 input#clientEmail {
      padding-top: 12px !important;
      padding-bottom: 12px !important;
    }
    .tenant-clinicalglow #waOptInWrap { padding: 12px 14px !important; }
    /* Los antecedentes de texto (alergias, medicamentos…) viven plegados:
       son opcionales y eran la mitad del scroll. */
    .tenant-clinicalglow .fr-listas summary {
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 600;
      color: #c5a677;
      padding: 6px 0 2px;
      list-style: none;
    }
    .tenant-clinicalglow .fr-listas summary::-webkit-details-marker { display: none; }
    .tenant-clinicalglow .fr-listas summary::before { content: '▸ '; }
    .tenant-clinicalglow .fr-listas[open] summary::before { content: '▾ '; }

    /* ── PASO FINAL reordenado: LEER primero, datos después ─────────
       Pedido 20-08: las consideraciones del tratamiento y el "Notifícanos"
       se leen ANTES de tipear nombre/teléfono/correo, y el consentimiento
       queda al final, justo antes de confirmar/pagar. Flex + order sobre
       los mismos bloques (el gap reemplaza al space-y, cuyos márgenes
       siguen el orden del DOM y no el visual). */
    .tenant-clinicalglow #step4 > .space-y-4 {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .tenant-clinicalglow #step4 > .space-y-4 > * { margin-top: 0 !important; }
    .tenant-clinicalglow #consideracionesWrap { order: 1; }
    .tenant-clinicalglow #fichaReservaWrap    { order: 2; }
    .tenant-clinicalglow #step4 > .space-y-4 > div:has(#clientName)  { order: 3; }
    .tenant-clinicalglow #step4 > .space-y-4 > div:has(#clientPhone) { order: 4; }
    .tenant-clinicalglow #grupoAcompanantesInputs { order: 5; }
    .tenant-clinicalglow #step4 > .space-y-4 > div:has(#clientEmail) { order: 6; }
    .tenant-clinicalglow #consentWebWrap { order: 7; }
    .tenant-clinicalglow #step4 > .space-y-4 > p { order: 8; }
    .tenant-clinicalglow #waOptInWrap { order: 9; }

    /* Destello fijo antes del título de categoría: eco del brillo del hero
       en el cuerpo claro, con pulso suave (acá titilar completo distrae). */
    .tenant-clinicalglow.tenant-aura .cat-title::before {
      content: '✦ ';
      color: #c5a677;
      animation: cgPulso 3.2s ease-in-out infinite;
    }
    @keyframes cgPulso { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

    /* Barrido de luz sobre el CTA dorado (el único dorado sólido de la
       página también es el único que destella). */
    .tenant-clinicalglow.tenant-aura #btnContinueBar #btnContinue {
      position: relative;
      overflow: hidden;
    }
    .tenant-clinicalglow.tenant-aura #btnContinueBar #btnContinue::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 46%;
      left: -60%;
      background: linear-gradient(105deg,
        rgba(255,255,255,0) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-18deg);
      animation: cgSheen 3.8s ease-in-out 1.6s infinite;
      pointer-events: none;
    }
    @keyframes cgSheen { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } }

    /* Con reduced-motion los brillos quedan fijos y tenues: la marca no
       desaparece, deja de moverse. */
    @media (prefers-reduced-motion: reduce) {
      .tenant-clinicalglow .cg-brillos svg,
      .tenant-clinicalglow.tenant-aura #shopNombre::before,
      .tenant-clinicalglow.tenant-aura #shopNombre span,
      .tenant-clinicalglow.tenant-aura .cat-title::before,
      .tenant-clinicalglow.tenant-aura #btnContinueBar #btnContinue::after,
      .tenant-clinicalglow.tenant-aura .service-option.border-neon,
      .tenant-clinicalglow.tenant-aura .service-option.bg-brand-neon\/10,
      .tenant-clinicalglow.tenant-aura .barber-option.border-neon,
      .tenant-clinicalglow.tenant-aura .barber-option.bg-brand-neon\/10,
      .tenant-clinicalglow.tenant-aura .slot-option.selected,
      .tenant-clinicalglow.tenant-aura [data-slot].selected,
      .tenant-clinicalglow.tenant-aura #successCodigoWrap::before,
      .tenant-clinicalglow.tenant-aura #successCodigoWrap::after {
        animation: none !important;
      }
      .tenant-clinicalglow .cg-brillos svg { opacity: .6; }
      .tenant-clinicalglow.tenant-aura #btnContinueBar #btnContinue::after,
      .tenant-clinicalglow.tenant-aura #successCodigoWrap::after { display: none; }
    }

    /* Badge Google Reviews — sobre tinta: hairline dorado, sin glass claro.
       (Hoy no se muestra: el local aún no tiene reseñas cargadas.) */
    .tenant-clinicalglow.tenant-aura #heroGoogleBadge {
      background: rgba(255,255,255,0.06) !important;
      border: 1px solid rgba(168,132,47,0.45) !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-clinicalglow.tenant-aura #heroBadgeRating {
      color: #E6D2A0 !important;
      font-family: 'DM Mono', ui-monospace, monospace !important;
      font-weight: 500 !important;
    }
    .tenant-clinicalglow.tenant-aura #heroBadgeCount  { color: #8A8D96 !important; }

    /* Botón volver — es `fixed`: convive con el hero en tinta Y con el cuerpo
       claro al hacer scroll. En tinta con hairline dorado funciona en ambos
       (el blanco frost de Aura era un foco al lado de la placa). */
    .tenant-clinicalglow.tenant-aura .booking-hero button[onclick="goBack()"] {
      background: #14151A !important;
      border: 1px solid rgba(230,210,160,0.28) !important;
      box-shadow: 0 4px 14px rgba(20,21,26,0.28) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-clinicalglow.tenant-aura .booking-hero button[onclick="goBack()"] i { color: #E6D2A0 !important; }

    /* ── ACCESOS (Ubicación · Horario · Consultas) ───────────────────
       Cierran el bloque oscuro: tres columnas separadas por hairlines
       verticales, ícono dorado arriba y etiqueta debajo. Los hairlines son
       el `gap:1px` dejando ver el fondo del contenedor — no bordes por hijo,
       que se descuadran cuando uno de los tres cambia de etiqueta.
       Aura pone la franja en grid 2×2; acá vuelve a una sola fila de 3. */
    .tenant-clinicalglow.tenant-aura .info-strip,
    .tenant-clinicalglow.tenant-aura .info-strip[style] {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 1px !important;
      /* El hilo dorado al pie va como background del contenedor (el 1px de
         padding lo deja ver): un ::after sería una cuarta celda del grid.
         El color de fondo hace de hairline en los `gap` y es OPACO —
         #292A2F es tinta + 9% blanco ya compuesto. Con el rgba puro la
         franja transparenta el cuerpo claro y los hilos salen blancos. */
      background:
        linear-gradient(90deg, transparent, #A8842F, transparent) bottom / 100% 1px no-repeat,
        #292A2F !important;
      padding-bottom: 1px !important;
      border: 0 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-clinicalglow.tenant-aura .info-strip > * {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      padding: 13px 4px !important;
      background: #14151A !important;
      color: #D8D4CB !important;
      font-family: 'Karla', system-ui, sans-serif !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }
    /* Aura arma su franja 2×2 con selectores de id (bordes, padding y el
       `grid-column: 1/-1` que manda Consultas a una segunda fila). Hay que
       deshacerlo TAMBIÉN por id: `.info-strip > *` pierde contra ellos. */
    .tenant-clinicalglow.tenant-aura #heroInfoAddr,
    .tenant-clinicalglow.tenant-aura #heroInfoHorBtn,
    .tenant-clinicalglow.tenant-aura #aura-info-wa {
      grid-column: auto !important;
      border: 0 !important;
      padding: 13px 4px !important;
    }
    .tenant-clinicalglow.tenant-aura .info-strip > *:active { background: #1D1E24 !important; }
    .tenant-clinicalglow.tenant-aura .info-strip > *:hover  { color: #F5F2EC !important; }
    .tenant-clinicalglow.tenant-aura .info-strip i,
    .tenant-clinicalglow.tenant-aura .info-strip i[style] {
      color: #A8842F !important;
      font-size: 15px !important;
      font-weight: 400 !important;
    }
    .tenant-clinicalglow.tenant-aura #aura-sobre-wrap { display: none !important; }

    /* Barra de progreso — hairline dorado sobre nude */
    .tenant-clinicalglow.tenant-aura #progressTrack { background: rgba(43,32,25,0.06) !important; height: 2px !important; }
    .tenant-clinicalglow.tenant-aura #progressBar {
      background: linear-gradient(90deg, #c5a677, #d8b4bd) !important;
      height: 2px !important;
      box-shadow: 0 0 8px rgba(197,166,119,0.35);
    }
    .tenant-clinicalglow.tenant-aura #progressPercentage {
      color: #78706c !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-size: 0.72rem !important;
      letter-spacing: 0.05em !important;
    }

    /* ── CATEGORY PILLS (Facial · Corporal · Capilar · Otros) ──
       Estilo hairline con underline dorado al activar — no pill relleno. */
    .tenant-clinicalglow.tenant-aura .category-pill {
      background: transparent !important;
      color: #78706c !important;
      border: none !important;
      border-radius: 0 !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-size: 0.72rem !important;
      letter-spacing: 0.22em !important;
      text-transform: uppercase !important;
      font-weight: 500 !important;
      padding: 8px 2px !important;
      margin: 0 12px !important;
      position: relative;
      transition: color 0.24s ease !important;
    }
    .tenant-clinicalglow.tenant-aura .category-pill:hover { color: #2b2019 !important; }
    .tenant-clinicalglow.tenant-aura .category-pill.active {
      color: #2b2019 !important;
      background: transparent !important;
    }
    .tenant-clinicalglow.tenant-aura .category-pill.active::after {
      content: '';
      position: absolute;
      left: 2px; right: 2px; bottom: 0;
      height: 1px;
      background: #c5a677;
    }

    /* Título de categoría — serif grande editorial */
    .tenant-clinicalglow.tenant-aura .cat-title {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      color: #2b2019 !important;
      font-size: 1.75rem !important;
      font-weight: 500 !important;
      letter-spacing: 0.005em !important;
      text-transform: none !important;
      margin-top: 1.5rem !important;
    }

    /* ── SERVICE CARDS (fila premium) ────────────────────────────────
       Blanco sobre nude con hairline muy sutil. Hover eleva 1px con sombra
       dorada. Estado seleccionado: gradiente cremoso + borde dorado + halo. */
    .tenant-clinicalglow.tenant-aura .service-option {
      background: #ffffff !important;
      border: 1px solid rgba(43,32,25,0.06) !important;
      border-radius: 18px !important;
      padding: 18px 20px !important;
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 1px 2px rgba(43,32,25,0.02) !important;
    }
    .tenant-clinicalglow.tenant-aura .service-option:hover {
      border-color: rgba(197,166,119,0.34) !important;
      box-shadow: 0 6px 24px -10px rgba(43,32,25,0.10) !important;
      transform: translateY(-1px);
    }
    /* Estado seleccionado — pisando el border-neon/bg-neon que aplica selectService */
    .tenant-clinicalglow.tenant-aura .service-option.border-neon,
    .tenant-clinicalglow.tenant-aura .service-option.bg-brand-neon\/10 {
      border-color: #c5a677 !important;
      background: linear-gradient(135deg, #fdfaf5 0%, #ffffff 60%) !important;
      box-shadow: 0 8px 32px -10px rgba(197,166,119,0.30) !important;
    }
    .tenant-clinicalglow.tenant-aura .svc-name {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-size: 0.98rem !important;
      font-weight: 600 !important;
      letter-spacing: -0.005em !important;
      color: #2b2019 !important;
    }
    .tenant-clinicalglow.tenant-aura .svc-desc {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-size: 0.82rem !important;
      color: #78706c !important;
      line-height: 1.55 !important;
    }
    /* Precio en serif dorado — el gesto que sube el nivel al tiro */
    .tenant-clinicalglow.tenant-aura .svc-price,
    .tenant-clinicalglow.tenant-aura .service-option [data-price],
    .tenant-clinicalglow.tenant-aura .service-option .text-neon {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      color: #c5a677 !important;
      font-weight: 600 !important;
      font-size: 1.15rem !important;
      letter-spacing: 0 !important;
    }
    .tenant-clinicalglow.tenant-aura .svc-duration,
    .tenant-clinicalglow.tenant-aura .service-option .text-brand-muted { color: #a8a19c !important; font-size: 0.78rem !important; }

    /* Íconos de servicio (thumbnails circulares) — halo dorado sutil */
    .tenant-clinicalglow.tenant-aura .service-option img,
    .tenant-clinicalglow.tenant-aura .service-option .svc-icon-wrap {
      background: #faf5f0 !important;
      border: 1px solid rgba(197,166,119,0.16) !important;
    }

    /* ── PROFESIONAL CARDS ───────────────────────────────────────────
       Mismo lenguaje que services: fila premium, nombre en serif. */
    .tenant-clinicalglow.tenant-aura .barber-option {
      background: #ffffff !important;
      border: 1px solid rgba(43,32,25,0.06) !important;
      border-radius: 18px !important;
      padding: 18px 20px !important;
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 1px 2px rgba(43,32,25,0.02) !important;
    }
    .tenant-clinicalglow.tenant-aura .barber-option:hover {
      border-color: rgba(197,166,119,0.34) !important;
      box-shadow: 0 6px 24px -10px rgba(43,32,25,0.10) !important;
      transform: translateY(-1px);
    }
    .tenant-clinicalglow.tenant-aura .barber-option.border-neon,
    .tenant-clinicalglow.tenant-aura .barber-option.bg-brand-neon\/10 {
      border-color: #c5a677 !important;
      background: linear-gradient(135deg, #fdfaf5 0%, #ffffff 60%) !important;
      box-shadow: 0 8px 32px -10px rgba(197,166,119,0.30) !important;
    }
    .tenant-clinicalglow.tenant-aura .barber-name {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      font-size: 1.4rem !important;
      font-weight: 500 !important;
      color: #2b2019 !important;
      letter-spacing: 0.015em !important;
    }
    /* Foto/avatar del profesional — nude ring dorado */
    .tenant-clinicalglow.tenant-aura .barber-option img {
      border: 2px solid #ffffff !important;
      box-shadow: 0 0 0 1px rgba(197,166,119,0.24), 0 4px 12px -4px rgba(43,32,25,0.10) !important;
    }

    /* ── BOTONES PRIMARIOS (Continuar / Confirmar) ───────────────────
       Pill negro chocolate con lift al hover — el CTA principal del flow. */
    .tenant-clinicalglow.tenant-aura #btnContinue,
    .tenant-clinicalglow.tenant-aura #btnConfirmarReserva,
    .tenant-clinicalglow.tenant-aura button[data-cta="primary"],
    .tenant-clinicalglow.tenant-aura .cta-continuar,
    .tenant-clinicalglow.tenant-aura button.bg-brand-neon {
      background: #2b2019 !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 999px !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-weight: 500 !important;
      font-size: 0.95rem !important;
      letter-spacing: 0.02em !important;
      padding: 14px 28px !important;
      box-shadow: 0 4px 16px rgba(43,32,25,0.18) !important;
      transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
      text-transform: none !important;
    }
    .tenant-clinicalglow.tenant-aura #btnContinue:hover,
    .tenant-clinicalglow.tenant-aura #btnConfirmarReserva:hover,
    .tenant-clinicalglow.tenant-aura button[data-cta="primary"]:hover,
    .tenant-clinicalglow.tenant-aura .cta-continuar:hover,
    .tenant-clinicalglow.tenant-aura button.bg-brand-neon:hover {
      background: #1a120d !important;
      box-shadow: 0 8px 24px rgba(43,32,25,0.24) !important;
      transform: translateY(-1px);
    }

    /* Botones secundarios (Atrás, etc.) */
    .tenant-clinicalglow.tenant-aura button.bg-brand-surface,
    .tenant-clinicalglow.tenant-aura button.border-brand-accent\/20 {
      background: #ffffff !important;
      border: 1px solid rgba(43,32,25,0.10) !important;
      color: #2b2019 !important;
      border-radius: 999px !important;
      font-weight: 500 !important;
    }

    /* ── SLOT PICKER (horas disponibles) ─────────────────────────────
       Píldoras nude con hover dorado y estado seleccionado chocolate. */
    .tenant-clinicalglow.tenant-aura .slot-option,
    .tenant-clinicalglow.tenant-aura [data-slot] {
      background: #ffffff !important;
      border: 1px solid rgba(43,32,25,0.08) !important;
      color: #2b2019 !important;
      border-radius: 12px !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-weight: 500 !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tenant-clinicalglow.tenant-aura .slot-option:hover,
    .tenant-clinicalglow.tenant-aura [data-slot]:hover {
      border-color: #c5a677 !important;
      color: #c5a677 !important;
    }
    .tenant-clinicalglow.tenant-aura .slot-option.selected,
    .tenant-clinicalglow.tenant-aura [data-slot].selected {
      background: #2b2019 !important;
      color: #ffffff !important;
      border-color: #2b2019 !important;
      box-shadow: 0 4px 12px rgba(43,32,25,0.18) !important;
    }

    /* GLINT — destello dorado de UNA pasada al elegir servicio, profesional
       u hora: el brillo aparece justo cuando la clienta avanza. Va por
       filter: drop-shadow porque los estados de arriba llevan box-shadow
       !important y una keyframe no puede pisarlos (gotcha de la placa). */
    .tenant-clinicalglow.tenant-aura .service-option.border-neon,
    .tenant-clinicalglow.tenant-aura .service-option.bg-brand-neon\/10,
    .tenant-clinicalglow.tenant-aura .barber-option.border-neon,
    .tenant-clinicalglow.tenant-aura .barber-option.bg-brand-neon\/10,
    .tenant-clinicalglow.tenant-aura .slot-option.selected,
    .tenant-clinicalglow.tenant-aura [data-slot].selected {
      animation: cgGlint 0.7s ease-out 1;
    }
    @keyframes cgGlint {
      0%   { filter: drop-shadow(0 0 0 rgba(197,166,119,0)); }
      35%  { filter: drop-shadow(0 0 14px rgba(197,166,119,0.75)); }
      100% { filter: drop-shadow(0 0 22px rgba(197,166,119,0)); }
    }

    /* ── SUCCESS STATE (post-reserva) ─────────────────────────────── */
    .tenant-clinicalglow.tenant-aura #waBtnLink,
    .tenant-clinicalglow.tenant-aura #success-state a#waBtnLink {
      background: #2b2019 !important;
      border-color: #2b2019 !important;
      color: #ffffff !important;
      border-radius: 999px !important;
      box-shadow: 0 4px 16px rgba(43,32,25,0.18) !important;
    }
    .tenant-clinicalglow.tenant-aura #waBtnLink i {
      color: #25D366 !important;
      filter: none !important;
      text-shadow: none !important;
    }
    .tenant-clinicalglow.tenant-aura #successGCalBtn {
      background: #ffffff !important;
      border: 1px solid rgba(197,166,119,0.30) !important;
      color: #2b2019 !important;
      border-radius: 999px !important;
    }
    .tenant-clinicalglow.tenant-aura #successGCalBtn i { color: #c5a677 !important; }
    .tenant-clinicalglow.tenant-aura #success-state .bg-\[\#0a0a0d\] {
      background: #ffffff !important;
      border: 1px solid rgba(197,166,119,0.20) !important;
      border-radius: 20px !important;
      box-shadow: 0 1px 2px rgba(43,32,25,0.03), 0 12px 32px -12px rgba(43,32,25,0.08) !important;
    }
    .tenant-clinicalglow.tenant-aura #successSummaryService {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-size: 1.35rem !important;
      color: #2b2019 !important;
    }
    .tenant-clinicalglow.tenant-aura #successSummaryDate,
    .tenant-clinicalglow.tenant-aura #successSummaryDate span { color: #58524e !important; }
    .tenant-clinicalglow.tenant-aura #successSummaryExtras { color: #78706c !important; border-top-color: rgba(197,166,119,0.14) !important; }
    .tenant-clinicalglow.tenant-aura #successCodigoWrap {
      background: linear-gradient(135deg, #fdfaf5, #ffffff) !important;
      border: 1px solid rgba(197,166,119,0.28) !important;
      border-radius: 14px !important;
    }
    .tenant-clinicalglow.tenant-aura #successCodigoCita {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      color: #c5a677 !important;
      font-weight: 600 !important;
      letter-spacing: 0.05em !important;
    }
    /* El código de reserva hereda el glow de la placa: neblina dorada
       interior que respira + barrido de luz. Es el peak emocional del
       flujo — acá el brillo celebra, no decora. Reusa cgPlacaGlow/cgSheen
       para que toda la página destelle al mismo ritmo. */
    .tenant-clinicalglow.tenant-aura #successCodigoWrap {
      position: relative !important;
      overflow: hidden !important;
    }
    .tenant-clinicalglow.tenant-aura #successCodigoWrap::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 26px rgba(197,166,119,0.35);
      animation: cgPlacaGlow 3.6s ease-in-out infinite;
      pointer-events: none;
    }
    .tenant-clinicalglow.tenant-aura #successCodigoWrap::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 46%;
      left: -60%;
      background: linear-gradient(105deg,
        rgba(230,210,160,0) 0%, rgba(230,210,160,0.35) 50%, rgba(230,210,160,0) 100%);
      transform: skewX(-18deg);
      animation: cgSheen 3.8s ease-in-out 0.6s infinite;
      pointer-events: none;
    }

    /* ── PREGUNTAS FRECUENTES · acordeón editorial ───────────────
       Cards white con hairline. Al abrir: borde dorado + sombra suave y el
       "+" gira 45° para volverse "×". Todo native <details>/<summary> sin
       JS extra. */
    .tenant-clinicalglow.tenant-aura #faqSection h2 {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      font-size: 1.85rem !important;
      font-weight: 500 !important;
      color: #2b2019 !important;
      letter-spacing: 0.005em !important;
      margin-bottom: 26px !important;
    }
    .tenant-clinicalglow.tenant-aura #faqSection h2::after {
      content: '';
      display: block;
      width: 60px; height: 1px;
      background: linear-gradient(90deg, transparent, #c5a677, transparent);
      margin: 12px auto 0;
    }
    .tenant-clinicalglow.tenant-aura .faq-item {
      background: #ffffff !important;
      border: 1px solid rgba(43,32,25,0.06) !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      box-shadow: 0 1px 2px rgba(43,32,25,0.02) !important;
      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tenant-clinicalglow.tenant-aura .faq-item[open] {
      border-color: rgba(197,166,119,0.28) !important;
      box-shadow: 0 6px 20px -8px rgba(43,32,25,0.08) !important;
    }
    .tenant-clinicalglow.tenant-aura .faq-summary {
      padding: 18px 20px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 14px !important;
      list-style: none !important;
      user-select: none !important;
    }
    .tenant-clinicalglow.tenant-aura .faq-summary::-webkit-details-marker,
    .tenant-clinicalglow.tenant-aura .faq-summary::marker { display: none !important; content: ''; }
    .tenant-clinicalglow.tenant-aura .faq-question {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-size: 0.98rem !important;
      font-weight: 500 !important;
      color: #2b2019 !important;
      letter-spacing: -0.005em !important;
      line-height: 1.4 !important;
    }
    .tenant-clinicalglow.tenant-aura .faq-icon {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-size: 1.5rem !important;
      color: #c5a677 !important;
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
      flex-shrink: 0 !important;
      line-height: 1 !important;
      font-weight: 300 !important;
    }
    .tenant-clinicalglow.tenant-aura .faq-item[open] .faq-icon { transform: rotate(45deg); }
    .tenant-clinicalglow.tenant-aura .faq-answer {
      padding: 0 20px 20px 20px !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      font-size: 0.9rem !important;
      color: #58524e !important;
      line-height: 1.65 !important;
    }

    /* ── SCROLLBAR (webkit) — hairline dorado sobre nude ─────────── */
    .tenant-clinicalglow.tenant-aura ::-webkit-scrollbar { width: 8px; height: 8px; }
    .tenant-clinicalglow.tenant-aura ::-webkit-scrollbar-track { background: transparent; }
    .tenant-clinicalglow.tenant-aura ::-webkit-scrollbar-thumb {
      background: rgba(197,166,119,0.28);
      border-radius: 999px;
    }
    .tenant-clinicalglow.tenant-aura ::-webkit-scrollbar-thumb:hover { background: rgba(197,166,119,0.48); }

    /* ── HORAS RECOMENDADAS · rubro clínica ──────────────────────────
       Sin `.tenant-*` a propósito: la clase `cg-smart` la emite SOLO la rama
       `tipo === 'clinica'` de _renderSmartSlots(), así que ninguna otra
       pantalla la ve y cualquier clínica nueva la hereda sin tocar CSS.
       El bloque ámbar del tema base peleaba con el oro del sistema y le
       robaba protagonismo al CTA: acá la tarjeta es superficie clínica
       (--paper sobre hairline --line) y el oro aparece SOLO en el rayo y el
       título. Las pastillas van como el resto de las horas. */
    .cg-smart {
      background: #FFFFFF;
      border-color: #E4DFD5;
      box-shadow: none;
    }
    .cg-smart .cg-smart-title {
      font-family: 'DM Mono', ui-monospace, monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #A8842F;
    }
    .cg-smart .cg-smart-title i { color: #A8842F; filter: none; }
    .cg-smart .cg-smart-sub {
      font-family: 'Karla', system-ui, sans-serif;
      font-size: 12.5px;
      color: #5C5F68;
    }
    .cg-smart .smart-slot-pill {
      background: #FFFFFF;
      border-color: #E4DFD5;
      color: #14151A;
      font-family: 'DM Mono', ui-monospace, monospace;
      font-variant-numeric: tabular-nums;
      font-size: 14px;
      font-weight: 400;
      box-shadow: none;
    }
    .cg-smart .smart-slot-pill:hover { border-color: #A8842F; }
    /* Elegida: tinta con la hora en dorado claro — el mismo par que usa la
       ficha inferior, para que la hora se lea como el dato que ya quedó. */
    .cg-smart .smart-slot-pill[data-active="1"] {
      background: #14151A;
      border-color: #14151A;
      color: #E6D2A0;
    }
    .cg-smart .smart-slot-pill:focus-visible { outline: 2px solid #A8842F; outline-offset: 2px; }

    /* ── FORMULARIO CLÍNICO PREVIO · rubro clínica ───────────────────
       Mismo criterio que `.cg-smart`: sin `.tenant-*` porque estas clases las
       emite SOLO _pintarFichaReserva(), que ya está gateado por rubro.

       Nacieron con las utilidades del tema oscuro (`text-white/80`) y en el
       tema claro de la clínica quedaron BLANCAS SOBRE BLANCO: el remapeo de
       tenant cubre `.text-white`, `/70` y `/50`, pero no `/80`. Depender de
       qué variante de opacidad está en esa lista es frágil — por eso el color
       va acá, en clases propias, y no en utilidades. */
    .cg-form {
      background: #FFFFFF !important;
      border-color: #E4DFD5 !important;
    }
    .cg-form-titulo {
      font-family: 'Karla', system-ui, sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: #14151A;
    }
    .cg-form-ayuda {
      font-family: 'Karla', system-ui, sans-serif;
      font-size: 12.5px;
      color: #5C5F68;
    }
    .cg-form-opt {
      font-family: 'Karla', system-ui, sans-serif;
      font-size: 14px;
      color: #14151A;
    }
    .cg-form .fr-opt input[type="checkbox"] { accent-color: #A8842F; }
    /* Etiquetas de los campos de texto y del RUT. */
    .cg-form label:not(.fr-opt) {
      font-family: 'DM Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: .12em;
      color: #8A8D96 !important;
    }
    .cg-form input[type="text"] {
      background: #FFFFFF !important;
      border-color: #E4DFD5 !important;
      color: #14151A !important;
      font-family: 'DM Mono', ui-monospace, monospace;
    }
    .cg-form input[type="text"]::placeholder { color: #8A8D96 !important; }
    .cg-form input[type="text"]:focus { outline: 2px solid #A8842F; outline-offset: 1px; border-color: transparent !important; }
    .cg-form-consent {
      font-family: 'Karla', system-ui, sans-serif;
      font-size: 11.5px;
      line-height: 1.55;
      color: #5C5F68;
    }

    /* La card de pie (Ubicación + Horario + IG + Chat) también varía por sede:
       se oculta en CUALQUIER tenant multi-sucursal hasta que se elige el local.
       `sede-pendiente` la pone config.js (>1 sucursal) y la quita selectSucursal().
       Genérico a propósito — no solo Oren. */
    html.sede-pendiente #footerContact { display: none !important; }

    /* ── Fit & finish: ocultar info-strip duplicada (dirección/horario) ── */
    .tenant-barbersclub .info-strip { display: none !important; }

    /* ── Unificación de tarjetas secundarias (bg + radio) ────────────── */
    .tenant-barbersclub #clubBanner a {
      background: #1a1a1a !important;
      border: 1px solid rgba(234,179,8,0.22) !important;
      border-radius: 1rem !important;
      box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
    }
    .tenant-barbersclub #footerContact > div {
      background: #1a1a1a !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 1rem !important;
    }

    /* ── Sticky CTA flotante (Continuar) ─────────────────────────────── */
    .tenant-barbersclub #btnContinueBar {
      background: transparent !important;
      border-top: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      pointer-events: none;
    }
    /* Gradiente sutil bajo el botón para separar del contenido scrolleable */
    .tenant-barbersclub #btnContinueBar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
        rgba(24,24,27,0) 0%, rgba(24,24,27,0.65) 55%, rgba(24,24,27,0.95) 100%);
      pointer-events: none;
      z-index: -1;
    }
    .tenant-barbersclub #btnContinueBar > div {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      pointer-events: auto;
    }
    .tenant-barbersclub #btnContinue {
      border-radius: 9999px !important;
      box-shadow: 0 10px 32px rgba(0,0,0,0.55),
                  0 4px 18px rgba(234,88,12,0.35) !important;
      letter-spacing: 0.01em !important;
    }

    /* ── Breathing animation del CTA (suave, 2.6s, sin bounce) ───────── */
    @keyframes bc-breathe {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 32px rgba(0,0,0,0.55),
                    0 4px 18px rgba(234,88,12,0.32),
                    0 0 0 0 rgba(234,88,12,0.12);
      }
      50% {
        transform: scale(1.03);
        box-shadow: 0 14px 40px rgba(0,0,0,0.6),
                    0 6px 26px rgba(234,88,12,0.48),
                    0 0 0 10px rgba(234,88,12,0.05);
      }
    }
    .tenant-barbersclub #btnContinue:not(:disabled) {
      animation: bc-breathe 2.6s ease-in-out infinite;
    }
    .tenant-barbersclub #btnContinue:not(:disabled):hover,
    .tenant-barbersclub #btnContinue:not(:disabled):active {
      animation-play-state: paused;
    }
    .tenant-barbersclub #btnContinue:disabled,
    .tenant-barbersclub #btnContinue[disabled] {
      animation: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
      .tenant-barbersclub #btnContinue { animation: none !important; }
      .hero-slider-bg .hero-slide { transition: none !important; }
    }
    .tenant-barbersclub #step4 label span {
      color: #a3a3a3 !important;
    }
    /* ── Resumen paso 4 (dark card + acento dorado) ── */
    .tenant-barbersclub #step4 .mt-6.rounded-2xl {
      background: #27272a !important;
      border: 1px solid #404040 !important;
      box-shadow: 0 0 22px rgba(234,179,8,0.05), inset 0 1px 0 rgba(234,179,8,0.06) !important;
    }
    .tenant-barbersclub #step4 .mt-6.rounded-2xl .text-white\/30 {
      color: #a3a3a3 !important;
    }
    .tenant-barbersclub #step4 .mt-6.rounded-2xl #summaryService {
      color: #eab308 !important;
      font-weight: 800 !important;
    }
    .tenant-barbersclub #step4 .mt-6.rounded-2xl #summaryPrice {
      color: #eab308 !important;
    }
    .tenant-barbersclub #step4 .mt-6.rounded-2xl .h-px {
      background: #404040 !important;
    }
    .tenant-barbersclub #step4 .mt-6.rounded-2xl .text-gray-500,
    .tenant-barbersclub #step4 .mt-6.rounded-2xl #summaryBarber,
    .tenant-barbersclub #step4 .mt-6.rounded-2xl #summaryDateString {
      color: #d4d4d4 !important;
    }
    .tenant-barbersclub #step4 .mt-6.rounded-2xl #summaryTime {
      color: #e5e5e5 !important;
      font-weight: 700 !important;
    }
    .tenant-barbersclub #step4 .mt-6.rounded-2xl i {
      color: #a3a3a3 !important;
    }
    /* ── Pantalla de éxito ── */
    .tenant-barbersclub #success-state .bg-\[\#0a0a0d\] {
      background: #27272a !important;
      border: 1px solid #404040 !important;
      box-shadow: 0 0 28px rgba(234,179,8,0.08) !important;
    }
    .tenant-barbersclub #success-state .bg-\[\#0a0a0d\] #successSummaryService {
      color: #eab308 !important;
      font-weight: 800 !important;
    }
    .tenant-barbersclub #success-state .bg-\[\#0a0a0d\] #successSummaryDate {
      color: #e5e5e5 !important;
    }
    .tenant-barbersclub #success-state h2 {
      color: #eab308 !important;
      background: linear-gradient(135deg, #eab308 0%, #fbbf24 50%, #eab308 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .tenant-barbersclub #success-state .text-neon,
    .tenant-barbersclub #success-state svg.text-neon {
      color: #eab308 !important;
    }

    /* WhatsApp CTA: sólido verde para elegance */
    #waBtnLink {
      background-color: #25D366 !important;
      color: #ffffff !important;
      border-color: #25D366 !important;
      box-shadow: 0 4px 20px rgba(37,211,102,0.35) !important;
    }
    #waBtnLink i { filter: none !important; color: #ffffff !important; }
    .tenant-ferraza #waBtnLink {
      background-color: rgba(37,211,102,0.1) !important;
      color: #25D366 !important;
      border-color: #25D366 !important;
      box-shadow: 0 0 20px rgba(37,211,102,0.3) !important;
    }
    .tenant-ferraza #waBtnLink i { color: #25D366 !important; }

    /* ═══════════════════════════════════════════════════════════════
       D'JONES BARBER — Vintage / Náutico / Dorado
       Paleta: Oro vintage (#C9A050) · Negro cálido (#030712) · Bronce
       ═══════════════════════════════════════════════════════════════ */
    .tenant-lumen {
      --accent:   #D4AF37;
      --accent-r: 212; --accent-g: 175; --accent-b: 55;
      --neon-clr: #D4AF37;
      --neon-r:   212; --neon-g: 175; --neon-b: 55;
      --body-bg:  #0d0a08;
    }
    .tenant-lumen body {
      background-color: #0d0a08 !important;
      background-image:
        linear-gradient(rgba(212,175,55,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,0.015) 1px, transparent 1px);
      background-size: 24px 24px !important;
    }

    /* Keyframes para animaciones piratas */
    @keyframes pirate-float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-5px) rotate(0.4deg); }
    }
    @keyframes doubloon-shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* Hero con efecto náutico / Luz de faro */
    .tenant-lumen .booking-hero {
      background-image: url('/djones1.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-lumen .booking-hero-overlay {
      background: radial-gradient(circle at 50% 30%, rgba(212,175,55,0.08) 0%, rgba(13,10,8,0.72) 45%, rgba(13,10,8,0.98) 100%) !important;
    }

    /* Info strip estilo camarote clásico */
    .tenant-lumen .info-strip {
      background: rgba(24,18,16,0.96) !important;
      border-bottom-color: rgba(212,175,55,0.12) !important;
    }
    .tenant-lumen .info-strip i {
      color: #D4AF37 !important;
      filter: drop-shadow(0 0 2px rgba(212,175,55,0.4)) !important;
    }
    .tenant-lumen .info-strip a,
    .tenant-lumen .info-strip > div {
      color: #f5ead6 !important;
      border-color: rgba(212,175,55,0.08) !important;
    }

    /* Anillo de logo — doblón de oro */
    .tenant-lumen .hero-logo-ring {
      border: 2.5px double #D4AF37 !important;
      box-shadow:
        0 0 0 1px rgba(212,175,55,0.2),
        0 0 25px rgba(212,175,55,0.35),
        0 0 45px rgba(212,175,55,0.15),
        0 0 60px rgba(0,0,0,0.85) !important;
    }

    /* Barra de progreso — brillo de doblón */
    .tenant-lumen #progressBar {
      background: linear-gradient(90deg, #8B6508, #D4AF37, #8B6508) !important;
      background-size: 200% 100% !important;
      animation: doubloon-shimmer 6s linear infinite !important;
      box-shadow: 0 0 12px rgba(212,175,55,0.7), 0 0 20px rgba(212,175,55,0.3) !important;
    }
    .tenant-lumen #progressTrack { background-color: rgba(212,175,55,0.08) !important; }
    .tenant-lumen #stepIndicatorText {
      color: #D4AF37 !important;
      text-shadow: 0 0 8px rgba(212,175,55,0.4) !important;
    }

    /* Pastillas de categoría — pergamino envejecido */
    .tenant-lumen .category-pill {
      background: rgba(24,18,16,0.5) !important;
      border: 1px solid rgba(212,175,55,0.15) !important;
      color: #a89f9a !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
    .tenant-lumen .category-pill:hover {
      border-color: #D4AF37 !important;
      color: #f5ead6 !important;
      animation: pirate-float 2s ease-in-out infinite !important;
    }
    .tenant-lumen .category-pill.border-neon {
      background: rgba(212,175,55,0.08) !important;
      border: 1px double #D4AF37 !important;
      color: #D4AF37 !important;
      outline: 1px solid rgba(212,175,55,0.15) !important;
      box-shadow: 0 0 10px rgba(212,175,55,0.18) !important;
    }
    .tenant-lumen .category-pill.text-neon { color: #D4AF37 !important; }

    /* Título del paso */
    .tenant-lumen h2.text-neon {
      color: #f5ead6 !important;
      font-family: 'Playfair Display', Georgia, serif !important;
      text-shadow: none !important;
    }

    /* Tarjetas de servicios — estilo camarote de galeón */
    .tenant-lumen .service-option {
      background: rgba(24,18,16,0.6) !important;
      border: 1px solid rgba(212,175,55,0.12) !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
    .tenant-lumen .service-option:hover {
      border-color: rgba(212,175,55,0.45) !important;
      background: rgba(24,18,16,0.85) !important;
      box-shadow: 0 0 16px rgba(212,175,55,0.12) !important;
      animation: pirate-float 2.8s ease-in-out infinite !important;
    }
    .tenant-lumen .service-option.border-neon {
      border: 1px double #D4AF37 !important;
      background: rgba(212,175,55,0.08) !important;
      outline: 1px solid rgba(212,175,55,0.18) !important;
      outline-offset: 2px !important;
      box-shadow: 0 0 20px rgba(212,175,55,0.15) !important;
    }
    .tenant-lumen .service-option.bg-brand-neon\/10 {
      background: rgba(212,175,55,0.08) !important;
    }
    .tenant-lumen .service-option .price-tag {
      color: #D4AF37 !important;
      font-weight: 700 !important;
    }
    .tenant-lumen .service-option .duration-tag {
      color: #a89f9a !important;
    }
    .tenant-lumen .service-option.border-neon .icon-bg {
      border-color: rgba(212,175,55,0.3) !important;
      background: rgba(212,175,55,0.06) !important;
    }
    .tenant-lumen .service-option.border-neon .icon-svg {
      color: #D4AF37 !important;
      filter: drop-shadow(0 0 3px rgba(212,175,55,0.4)) !important;
    }

    /* Tarjetas de barbero */
    .tenant-lumen .barber-option {
      background: rgba(24,18,16,0.6) !important;
      border: 1px solid rgba(212,175,55,0.12) !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
    .tenant-lumen .barber-option:hover {
      border-color: rgba(212,175,55,0.45) !important;
      background: rgba(24,18,16,0.85) !important;
      animation: pirate-float 2.8s ease-in-out infinite !important;
    }
    .tenant-lumen .barber-option.border-neon {
      border: 1px double #D4AF37 !important;
      background: rgba(212,175,55,0.08) !important;
      outline: 1px solid rgba(212,175,55,0.18) !important;
      outline-offset: 2px !important;
      box-shadow: 0 0 20px rgba(212,175,55,0.15) !important;
    }
    .tenant-lumen .barber-option.bg-brand-neon\/10 {
      background: rgba(212,175,55,0.08) !important;
    }
    .tenant-lumen .text-brand-neon { color: #D4AF37 !important; }

    /* Calendario de reservas */
    .tenant-lumen .day-btn {
      background: rgba(24,18,16,0.6) !important;
      border: 1px solid rgba(212,175,55,0.12) !important;
      color: #a89f9a !important;
    }
    .tenant-lumen .day-btn.active,
    .tenant-lumen .day-btn.border-neon {
      border: 1px double #D4AF37 !important;
      background: rgba(212,175,55,0.08) !important;
      outline: 1px solid rgba(212,175,55,0.18) !important;
      color: #D4AF37 !important;
      box-shadow: 0 0 14px rgba(212,175,55,0.15) !important;
    }
    .tenant-lumen .day-btn .dot.bg-neon {
      background: #D4AF37 !important;
      box-shadow: 0 0 6px rgba(212,175,55,0.7) !important;
    }

    /* Pastillas de hora */
    .tenant-lumen .time-pill.bg-neon {
      background: linear-gradient(90deg, #8B6508, #D4AF37, #8B6508) !important;
      background-size: 200% 100% !important;
      animation: doubloon-shimmer 6s linear infinite !important;
      color: #0d0a08 !important;
      font-weight: 800 !important;
      border-color: #D4AF37 !important;
      box-shadow: 0 0 12px rgba(212,175,55,0.3) !important;
    }
    .tenant-lumen .time-pill.border-neon {
      border-color: rgba(212,175,55,0.4) !important;
      color: #D4AF37 !important;
      background: rgba(212,175,55,0.03) !important;
    }

    /* Botón Continuar */
    .tenant-lumen #btnContinue {
      background: transparent !important;
      border: 2px solid #D4AF37 !important;
      color: #D4AF37 !important;
      box-shadow: 0 0 16px rgba(212,175,55,0.15) !important;
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 700 !important;
      letter-spacing: 0.05em !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
    .tenant-lumen #btnContinue:hover,
    .tenant-lumen #btnContinue:active {
      background: linear-gradient(90deg, #8B6508, #D4AF37, #8B6508) !important;
      background-size: 200% 100% !important;
      animation: doubloon-shimmer 6s linear infinite !important;
      color: #0d0a08 !important;
      box-shadow: 0 0 25px rgba(212,175,55,0.5) !important;
      transform: scale(1.02) !important;
    }
    .tenant-lumen #btnContinueBar {
      background: rgba(13,10,8,0.96) !important;
      border-top: 1px solid rgba(212,175,55,0.15) !important;
    }

    /* Inputs del formulario paso 4 */
    .tenant-lumen #clientName,
    .tenant-lumen #clientPhone,
    .tenant-lumen #clientEmail {
      background: rgba(24,18,16,0.6) !important;
      border: 1px solid rgba(212,175,55,0.15) !important;
      color: #f5ead6 !important;
    }
    .tenant-lumen #clientName:focus,
    .tenant-lumen #clientPhone:focus,
    .tenant-lumen #clientEmail:focus {
      border-color: #D4AF37 !important;
      box-shadow: 0 0 0 2px rgba(212,175,55,0.15) !important;
    }
    .tenant-lumen #summaryPrice {
      color: #D4AF37 !important;
      font-weight: 800 !important;
    }

    /* WhatsApp CTA */
    .tenant-lumen #waBtnLink {
      background: rgba(37,211,102,0.04) !important;
      border-color: rgba(37,211,102,0.4) !important;
      color: #25D366 !important;
    }
    .tenant-lumen #waBtnLink i { color: #25D366 !important; }

    /* Club banner */
    .tenant-lumen #clubBanner a {
      background: rgba(24,18,16,0.8) !important;
      border: 1px solid rgba(212,175,55,0.15) !important;
    }
    .tenant-lumen #clubBanner .club-icon-wrap {
      background: rgba(212,175,55,0.08) !important;
      border-color: rgba(212,175,55,0.15) !important;
      color: #D4AF37 !important;
    }

    /* Footer contact */
    .tenant-lumen #footerContact > .rounded-2xl {
      background: #181210 !important;
      border: 1px solid rgba(212,175,55,0.1) !important;
    }
    .tenant-lumen #footerContact .w-10 {
      background: rgba(212,175,55,0.06) !important;
      border-color: rgba(212,175,55,0.15) !important;
      color: #D4AF37 !important;
    }
    .tenant-lumen #shopHorarioGrid span.rounded-full {
      background: #D4AF37 !important;
    }

    /* Selection recap chips */
    .tenant-lumen #selectionRecap span {
      background: rgba(212,175,55,0.05) !important;
      border-color: rgba(212,175,55,0.15) !important;
      color: #f5ead6 !important;
    }

    /* Tipografía clásica */
    .tenant-lumen h1,
    .tenant-lumen h2,
    .tenant-lumen h3,
    .tenant-lumen .shop-name,
    .tenant-lumen .hero-title {
      font-family: 'Playfair Display', Georgia, serif !important;
      letter-spacing: 0.01em !important;
    }

    /* Barra de desplazamiento temática pirata */
    .tenant-lumen ::-webkit-scrollbar {
      width: 10px !important;
      height: 10px !important;
    }
    .tenant-lumen ::-webkit-scrollbar-track {
      background: #0d0a08 !important;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.85) !important;
    }
    .tenant-lumen ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #8B6508 0%, #D4AF37 50%, #8B6508 100%) !important;
      border-radius: 5px !important;
      border: 2.5px solid #0d0a08 !important;
      box-shadow: 0 0 4px rgba(212,175,55,0.4) !important;
    }

    /* Anillo dorado de doblón / Divisor centralizado */
    .tenant-lumen .gold-divider {
      width: 160px !important;
      height: 2.5px !important;
      background: radial-gradient(circle, #D4AF37 0%, rgba(212,175,55,0.2) 70%, transparent 100%) !important;
      position: relative !important;
      margin: 16px auto 12px !important;
      overflow: visible !important;
    }
    .tenant-lumen .gold-divider::after {
      content: '⚓' !important;
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      background: #0d0a08 !important;
      padding: 0 10px !important;
      color: #D4AF37 !important;
      font-size: 1.1rem !important;
      text-shadow: 0 0 6px rgba(212,175,55,0.6) !important;
      font-family: system-ui, -apple-system, sans-serif !important;
    }

    /* Modales de pergamino antiguo */
    .tenant-lumen #delneroClubSheet,
    .tenant-lumen #mapu-sobre-sheet {
      background-color: #f5ead6 !important;
      background-image:
        radial-gradient(rgba(139,101,8,0.02) 1px, transparent 1px),
        linear-gradient(rgba(139,101,8,0.015) 1px, transparent 1px) !important;
      background-size: 16px 16px !important;
      border: 3.5px double #8B6508 !important;
      outline: 1.5px solid rgba(212,175,55,0.35) !important;
      outline-offset: 4.5px !important;
      box-shadow: 0 20px 50px rgba(0,0,0,0.9) !important;
      border-radius: 8px !important;
    }
    .tenant-lumen #delneroClubSheet *,
    .tenant-lumen #mapu-sobre-sheet * {
      color: #1c120c !important;
      font-family: 'Playfair Display', Georgia, serif !important;
    }
    .tenant-lumen #delneroClubSheet p,
    .tenant-lumen #mapu-sobre-sheet p,
    .tenant-lumen #delneroClubSheet span,
    .tenant-lumen #mapu-sobre-sheet span {
      color: #3b281b !important;
      font-family: 'Inter', sans-serif !important;
    }
    .tenant-lumen #delneroClubSheet i,
    .tenant-lumen #mapu-sobre-sheet i {
      color: #8B6508 !important;
      filter: drop-shadow(0 0 2px rgba(139,101,8,0.25)) !important;
    }
    .tenant-lumen #delneroClubSheet #delneroClubTitle,
    .tenant-lumen #mapu-sobre-sheet #mapu-sobre-title {
      font-size: 24px !important;
      font-weight: 800 !important;
      letter-spacing: -0.01em !important;
      border-bottom: 2px dashed rgba(139,101,8,0.2) !important;
      padding-bottom: 10px !important;
      margin-bottom: 15px !important;
      color: #1c120c !important;
    }
    .tenant-lumen #delneroClubSheet div[style*="background:rgba(57,255,20"] {
      background: rgba(139,101,8,0.06) !important;
      border-color: rgba(139,101,8,0.2) !important;
    }
    .tenant-lumen #delneroClubSheet div[style*="background:rgba(57,255,20"] i {
      color: #8B6508 !important;
    }
    .tenant-lumen #delneroClubSheet a {
      background: linear-gradient(90deg, #8B6508 0%, #D4AF37 50%, #8B6508 100%) !important;
      background-size: 200% 100% !important;
      animation: doubloon-shimmer 6s linear infinite !important;
      color: #0d0a08 !important;
      font-weight: 800 !important;
      border: 1px solid #8B6508 !important;
      box-shadow: 0 6px 20px rgba(139,101,8,0.4) !important;
      text-shadow: 0 1px 1px rgba(255,255,255,0.2) !important;
      border-radius: 6px !important;
    }
    .tenant-lumen #delneroClubSheet a * {
      color: #0d0a08 !important;
    }
    .tenant-lumen #delneroClubSheet button {
      color: rgba(60,40,30,0.6) !important;
      border-color: rgba(139,101,8,0.15) !important;
      font-family: 'Inter', sans-serif !important;
    }

    /* Resumen de cita estilo Manifiesto de Navegación */
    .tenant-lumen #step4 .mt-6.rounded-2xl {
      background-color: #f5ead6 !important;
      background-image:
        radial-gradient(rgba(139,101,8,0.02) 1px, transparent 1px),
        linear-gradient(rgba(139,101,8,0.015) 1px, transparent 1px) !important;
      background-size: 16px 16px !important;
      border: 3px double #8B6508 !important;
      outline: 1px solid rgba(212,175,55,0.3) !important;
      outline-offset: 3px !important;
      box-shadow: 0 12px 35px rgba(0,0,0,0.6) !important;
      color: #1c120c !important;
      border-radius: 8px !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl * {
      color: #1c120c !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl p {
      color: rgba(28,18,12,0.5) !important;
      font-family: 'Inter', sans-serif !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl .h-px {
      background-color: rgba(139,101,8,0.2) !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl i {
      color: #8B6508 !important;
    }
    /* Lumen: resumen paso 4 con fondo pergamino */
    .tenant-lumen #step4 .mt-6.rounded-2xl {
      background-color: #f5ead6 !important;
      background-image: radial-gradient(rgba(139,101,8,0.025) 1px, transparent 1px) !important;
      background-size: 14px 14px !important;
      border: 1.5px solid rgba(212,175,55,0.42) !important;
      outline: 1px solid rgba(212,175,55,0.12) !important;
      outline-offset: 2px !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
      border-radius: 6px !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl .text-white\/30 {
      color: rgba(139,101,8,0.55) !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl .text-white {
      color: #1c120c !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl .h-px {
      background: rgba(139,101,8,0.15) !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl .text-gray-500,
    .tenant-lumen #step4 .mt-6.rounded-2xl #summaryBarber,
    .tenant-lumen #step4 .mt-6.rounded-2xl #summaryDateString {
      color: rgba(59,40,27,0.70) !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl i {
      color: rgba(139,101,8,0.40) !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl #summaryService {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 800 !important;
      color: #8B6508 !important;
    }
    .tenant-lumen #step4 .mt-6.rounded-2xl #summaryPrice,
    .tenant-lumen #step4 .mt-6.rounded-2xl #summaryTime {
      color: #8B6508 !important;
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 800 !important;
    }

    /* Pantalla de Éxito - Caja de Pergamino */
    .tenant-lumen #success-state .bg-\[\#0a0a0d\] {
      background-color: #f5ead6 !important;
      background-image:
        radial-gradient(rgba(139,101,8,0.02) 1px, transparent 1px),
        linear-gradient(rgba(139,101,8,0.015) 1px, transparent 1px) !important;
      background-size: 16px 16px !important;
      border: 3.5px double #8B6508 !important;
      outline: 1.5px solid rgba(212,175,55,0.35) !important;
      outline-offset: 4.5px !important;
      box-shadow: 0 16px 45px rgba(0,0,0,0.65) !important;
      color: #1c120c !important;
      border-radius: 8px !important;
    }
    .tenant-lumen #success-state .bg-\[\#0a0a0d\] * {
      color: #1c120c !important;
    }
    .tenant-lumen #successSummaryService {
      color: #8B6508 !important;
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 800 !important;
    }
    .tenant-lumen #successSummaryDate {
      color: #3b281b !important;
      font-weight: 700 !important;
      font-family: 'Inter', sans-serif !important;
    }

    /* Ocultar check original e inyectar cofre pirata */
    .tenant-lumen #success-state > div.w-24 {
      display: none !important;
    }
    .tenant-lumen #success-state #lumen-chest-wrap {
      display: flex !important;
    }
    #lumen-chest-wrap {
      display: none;
    }

    /* Cofre de Pirata - HTML/CSS puro */
    .tenant-lumen .pirate-chest-container {
      perspective: 1000px;
    }
    .tenant-lumen .pirate-chest {
      width: 100px;
      height: 80px;
      position: relative;
      margin: 10px auto;
      transform-style: preserve-3d;
    }
    
    /* Tapa del Cofre */
    .tenant-lumen .chest-lid {
      width: 100px;
      height: 40px;
      background: #5c3a21 !important;
      border-top-left-radius: 50px 40px !important;
      border-top-right-radius: 50px 40px !important;
      border: 2.5px solid #2e1a0b !important;
      border-bottom: none !important;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: center bottom;
      transform: rotateX(0deg);
      z-index: 3;
      box-shadow: inset 0 8px 16px rgba(0,0,0,0.4) !important;
      transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    /* Bandas metálicas de la tapa */
    .tenant-lumen .lid-band {
      width: 8px;
      height: 40px;
      background: linear-gradient(90deg, #8B6508, #D4AF37, #8B6508) !important;
      border: 1px solid #2e1a0b !important;
      position: absolute;
      top: 0;
    }
    .tenant-lumen .lb-left { left: 20px; }
    .tenant-lumen .lb-right { right: 20px; }

    /* Cuerpo del Cofre */
    .tenant-lumen .chest-body {
      width: 100px;
      height: 48px;
      background: #442a17 !important;
      border: 2.5px solid #2e1a0b !important;
      border-bottom-left-radius: 8px !important;
      border-bottom-right-radius: 8px !important;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      box-shadow: 0 8px 16px rgba(0,0,0,0.6), inset 0 6px 12px rgba(0,0,0,0.3) !important;
    }
    
    /* Bandas metálicas del cuerpo */
    .tenant-lumen .body-band {
      width: 8px;
      height: 48px;
      background: linear-gradient(90deg, #8B6508, #D4AF37, #8B6508) !important;
      border: 1px solid #2e1a0b !important;
      position: absolute;
      top: 0;
    }
    .tenant-lumen .bb-left { left: 18px; }
    .tenant-lumen .bb-right { right: 18px; }

    /* Cerradura */
    .tenant-lumen .chest-lock {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      font-size: 1.1rem !important;
      z-index: 4;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important;
    }

    /* Pila de Oro Interna */
    .tenant-lumen .chest-gold-pile {
      width: 90px;
      height: 16px;
      background: radial-gradient(ellipse at center, #ffe066 0%, #D4AF37 70%, #8B6508 100%) !important;
      border-radius: 50% !important;
      position: absolute;
      top: 32px;
      left: 5px;
      opacity: 0;
      z-index: 2;
      box-shadow: 0 0 15px rgba(212,175,55,0.85) !important;
      transition: opacity 0.6s ease;
    }

    /* Explosión y destello de luz dorada */
    .tenant-lumen .gold-glow-burst {
      position: absolute;
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, rgba(212,175,55,0.75) 0%, rgba(212,175,55,0) 70%) !important;
      filter: blur(4px) !important;
      top: 10px;
      left: 20px;
      transform: scale(0);
      opacity: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* Partículas de doblones y destellos */
    .tenant-lumen .doubloon-particle {
      position: absolute;
      left: 48px;
      top: 30px;
      font-size: 1.3rem !important;
      opacity: 0;
      transform: scale(0);
      z-index: 5;
      pointer-events: none;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
    }

    /* ── ANIMACIONES AL ABRIRSE EL COFRE ── */
    .tenant-lumen #success-state.flex .chest-lid {
      animation: open-chest-lid 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
      animation-delay: 0.6s !important;
    }
    .tenant-lumen #success-state.flex .chest-gold-pile {
      animation: fade-in-gold 0.7s ease forwards !important;
      animation-delay: 0.95s !important;
    }
    .tenant-lumen #success-state.flex .gold-glow-burst {
      animation: gold-glow-pulse-burst 1.6s ease-out forwards !important;
      animation-delay: 0.85s !important;
    }
    .tenant-lumen #success-state.flex .doubloon-particle {
      animation: particle-fly-out 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important;
      animation-delay: 0.9s !important;
    }

    /* Ajuste de trayectorias individuales para la dispersión de doblones */
    .tenant-lumen #success-state.flex .dp-1 { --tx: -48px; --ty: -65px; --rot: -20deg; }
    .tenant-lumen #success-state.flex .dp-2 { --tx: 48px; --ty: -75px; --rot: 25deg; }
    .tenant-lumen #success-state.flex .dp-3 { --tx: -70px; --ty: -40px; --rot: -30deg; }
    .tenant-lumen #success-state.flex .dp-4 { --tx: 70px; --ty: -45px; --rot: 35deg; }
    .tenant-lumen #success-state.flex .dp-5 { --tx: -15px; --ty: -90px; --rot: 10deg; }
    .tenant-lumen #success-state.flex .dp-6 { --tx: 15px; --ty: -85px; --rot: -15deg; }

    @keyframes open-chest-lid {
      0% { transform: rotateX(0deg); }
      100% { transform: rotateX(-105deg); }
    }
    @keyframes fade-in-gold {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes gold-glow-pulse-burst {
      0% { transform: scale(0); opacity: 0; }
      40% { transform: scale(2.4); opacity: 0.95; }
      100% { transform: scale(3.6); opacity: 0; }
    }
    @keyframes particle-fly-out {
      0% {
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 0;
      }
      15% {
        opacity: 1;
      }
      45% {
        transform: translate(var(--tx), var(--ty)) scale(1.3) rotate(var(--rot));
      }
      100% {
        transform: translate(calc(var(--tx) * 1.15), calc(var(--ty) + 45px)) scale(1) rotate(calc(var(--rot) * 1.6));
        opacity: 0;
      }
    }


    /* Transición micro-interactiva de tarjetas */
    .tenant-lumen .service-option:hover,
    .tenant-lumen .barber-option:hover {
      transform: translateY(-4px) !important;
      border-color: #D4AF37 !important;
      box-shadow: 0 8px 24px rgba(212,175,55,0.2) !important;
    }
    .tenant-lumen .service-option.border-neon .icon-bg,
    .tenant-lumen .barber-option.border-neon img {
      border: 1.5px double #D4AF37 !important;
      box-shadow: 0 0 10px rgba(212,175,55,0.4) !important;
    }


    /* ══ DEL NERO BARBER — Verde Neón / Negro Profundo / Crema Serif ══
       Paleta: Verde neón (#39ff14) · Negro (#050505) · Crema (#f0ead6)
       ═══════════════════════════════════════════════════════════════ */
    .tenant-delnero {
      --accent:   #39ff14;
      --accent-r: 57; --accent-g: 255; --accent-b: 20;
      --neon-clr: #39ff14;
      --neon-r:   57; --neon-g: 255; --neon-b: 20;
      --body-bg:  #050505;
    }
    .tenant-delnero body { background-color: #050505; }

    /* Hero: flat dark — misma estructura que Marcelo Hairdressing */
    .tenant-delnero .booking-hero {
      background-image: none !important;
      background-color: #050505 !important;
      min-height: auto !important;
      height: auto !important;
      padding: 0 !important;
      border-bottom: none !important;
    }
    .tenant-delnero .booking-hero-overlay {
      display: none !important;
    }
    .tenant-delnero .booking-hero > .relative.z-10:not(#marceloHeader) {
      display: none !important;
    }
    .tenant-delnero #marceloHeader {
      display: flex !important;
      background-image: url('/maira.webp') !important;
      background-size: cover !important;
      background-position: center 25% !important;
      min-height: 190px !important;
      padding: 0 22px 20px 22px !important;
      align-items: flex-end !important;
      border-bottom: none !important;
      position: relative !important;
    }
    .tenant-delnero #marceloHeader::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: -32px !important;
      background: linear-gradient(180deg,
        rgba(0,0,0,0.00) 0%,
        rgba(0,0,0,0.32) 42%,
        rgba(5,5,5,0.85) 62%,
        rgba(5,5,5,0.97) 76%,
        #050505 88%) !important;
      z-index: 0 !important;
      pointer-events: none !important;
    }
    .tenant-delnero #marceloHeader > * {
      position: relative !important;
      z-index: 1 !important;
    }
    .tenant-delnero #heroGoogleBadge { display: none !important; }
    /* Ocultar foto circular derecha del header */
    .tenant-delnero #marceloHeader > div:last-child { display: none !important; }

    /* Nombre del local — serif crema */
    .tenant-delnero #shopNombre {
      font-family: 'Playfair Display', Georgia, serif !important;
      color: #f0ead6 !important;
      text-shadow: 0 2px 16px rgba(0,0,0,0.7) !important;
    }
    .tenant-delnero #shopClubNombre {
      font-family: 'Playfair Display', Georgia, serif !important;
      color: #f0ead6 !important;
    }

    /* Info strip */
    .tenant-delnero .info-strip i { color: #39ff14 !important; opacity: 0.75; }
    .tenant-delnero .info-strip {
      background: rgba(5,5,5,0.90) !important;
      border-color: rgba(57,255,20,0.08) !important;
    }

    /* Barra de progreso */
    .tenant-delnero #progressBar {
      background-color: #39ff14 !important;
      box-shadow: 0 0 8px rgba(57,255,20,0.80), 0 0 15px rgba(57,255,20,0.40) !important;
    }
    .tenant-delnero #progressTrack { background-color: rgba(57,255,20,0.10) !important; }
    .tenant-delnero #stepIndicatorText {
      color: #39ff14 !important;
      text-shadow: 0 0 8px rgba(57,255,20,0.50) !important;
    }

    /* Píldoras de categoría: inactivas oscuras, activa verde neón */
    .tenant-delnero .category-pill {
      background: transparent !important;
      border-color: #3f3f46 !important;
      color: #71717a !important;
      box-shadow: none !important;
    }
    .tenant-delnero .category-pill:hover {
      border-color: rgba(57,255,20,0.40) !important;
      color: #d4d4d8 !important;
    }
    .tenant-delnero .category-pill.border-neon {
      background: rgba(57,255,20,0.10) !important;
      border-color: #39ff14 !important;
      color: #39ff14 !important;
      box-shadow: 0 0 8px rgba(57,255,20,0.20) !important;
    }
    .tenant-delnero .category-pill.text-neon { color: #39ff14 !important; }

    /* Heading paso 1 — crema para textos estáticos */
    .tenant-delnero h2.text-neon {
      color: #f0ead6 !important;
      text-shadow: none !important;
    }

    /* Tarjetas de servicio */
    @keyframes delneroSvcBorder {
      0%, 100% { border-color: #27272a; box-shadow: none; }
      50%       { border-color: rgba(57,255,20,0.30); box-shadow: 0 0 8px rgba(57,255,20,0.10); }
    }
    .tenant-delnero .service-option {
      background: rgba(57,255,20,0.02) !important;
      animation: delneroSvcBorder 3s ease-in-out infinite !important;
    }
    .tenant-delnero .service-option:nth-child(2) { animation-delay: 0.4s !important; }
    .tenant-delnero .service-option:nth-child(3) { animation-delay: 0.8s !important; }
    .tenant-delnero .service-option:nth-child(4) { animation-delay: 1.2s !important; }
    .tenant-delnero .service-option:nth-child(5) { animation-delay: 1.6s !important; }
    .tenant-delnero .service-option:nth-child(6) { animation-delay: 2.0s !important; }
    .tenant-delnero .service-option:hover {
      border-color: rgba(57,255,20,0.35) !important;
      background: rgba(57,255,20,0.04) !important;
      box-shadow: 0 0 15px rgba(57,255,20,0.10) !important;
    }
    .tenant-delnero .service-option.border-neon {
      border-color: #39ff14 !important;
      background: rgba(57,255,20,0.07) !important;
      box-shadow: 0 0 0 1px #39ff14, 0 0 15px rgba(57,255,20,0.15) !important;
    }
    /* Sin radio circular a la derecha */
    .tenant-delnero .service-option .svc-radio { display: none !important; }
    /* Nombre servicio: crema */
    .tenant-delnero .service-option .svc-name { color: #f0ead6 !important; }
    /* Precio: verde neón brillante */
    .tenant-delnero .service-option .price-tag { color: #39ff14 !important; }
    .tenant-delnero .service-option .duration-tag { color: rgba(57,255,20,0.55) !important; }
    .tenant-delnero .service-option.border-neon .icon-bg {
      border-color: rgba(57,255,20,0.40) !important;
      box-shadow: 0 0 10px rgba(57,255,20,0.20) !important;
      background: rgba(57,255,20,0.08) !important;
      box-shadow: 0 0 10px rgba(57,255,20,0.20) !important;
    }
    .tenant-delnero .service-option.border-neon .icon-svg {
      color: #39ff14 !important;
      filter: drop-shadow(0 0 4px rgba(57,255,20,0.50)) !important;
    }

    /* Tarjetas de barbero */
    .tenant-delnero .barber-option {
      background: rgba(57,255,20,0.02) !important;
      border-color: rgba(57,255,20,0.08) !important;
    }
    .tenant-delnero .barber-option:hover {
      border-color: rgba(57,255,20,0.35) !important;
      background: rgba(57,255,20,0.04) !important;
    }
    .tenant-delnero .barber-option.border-neon {
      border-color: #39ff14 !important;
      background: rgba(57,255,20,0.07) !important;
      box-shadow: 0 0 12px rgba(57,255,20,0.15) !important;
    }
    .tenant-delnero .barber-option.bg-brand-neon\/10 {
      background: rgba(57,255,20,0.07) !important;
    }
    .tenant-delnero .text-brand-neon { color: #39ff14 !important; }

    /* Calendario */
    .tenant-delnero .day-btn {
      background: rgba(57,255,20,0.02) !important;
      border-color: rgba(57,255,20,0.10) !important;
    }
    .tenant-delnero .day-btn.active,
    .tenant-delnero .day-btn.border-neon {
      background: rgba(57,255,20,0.08) !important;
      border-color: #39ff14 !important;
      box-shadow: 0 0 10px rgba(57,255,20,0.15) !important;
    }
    .tenant-delnero .day-btn .dot.bg-neon {
      background: #39ff14 !important;
      box-shadow: 0 0 6px rgba(57,255,20,0.60) !important;
    }

    /* Selector de hora: activo verde neón (fix residual mostaza) */
    .tenant-delnero .time-pill.bg-neon {
      background: #39ff14 !important;
      color: #050505 !important;
      box-shadow: 0 0 12px rgba(57,255,20,0.55) !important;
      font-weight: 800 !important;
    }
    .tenant-delnero .time-pill.border-neon {
      border-color: #39ff14 !important;
      color: #39ff14 !important;
      box-shadow: 0 0 8px rgba(57,255,20,0.25) !important;
    }

    /* Botón Continuar */
    .tenant-delnero #btnContinue {
      background: transparent !important;
      border: 1.5px solid #39ff14 !important;
      color: #39ff14 !important;
      box-shadow: 0 0 12px rgba(57,255,20,0.20), inset 0 0 12px rgba(57,255,20,0.03) !important;
    }
    .tenant-delnero #btnContinue:hover,
    .tenant-delnero #btnContinue:active {
      background: #39ff14 !important;
      color: #050505 !important;
      box-shadow: 0 0 20px rgba(57,255,20,0.50) !important;
    }
    .tenant-delnero #btnContinueBar {
      background: rgba(5,5,5,0.92) !important;
      border-top-color: rgba(57,255,20,0.10) !important;
    }

    /* Inputs datos personales */
    .tenant-delnero #clientName,
    .tenant-delnero #clientPhone,
    .tenant-delnero #clientEmail {
      background: rgba(57,255,20,0.03) !important;
      border-color: rgba(57,255,20,0.12) !important;
    }
    .tenant-delnero #clientName:focus,
    .tenant-delnero #clientPhone:focus,
    .tenant-delnero #clientEmail:focus {
      outline: none !important;
      border-color: #39ff14 !important;
      box-shadow: 0 0 0 2px rgba(57,255,20,0.20) !important;
    }
    .tenant-delnero #summaryPrice { color: #39ff14 !important; }

    /* Club banner */
    .tenant-delnero #clubBanner a {
      background: rgba(57,255,20,0.03) !important;
      border-color: rgba(57,255,20,0.18) !important;
    }
    .tenant-delnero #clubBanner .club-icon-wrap {
      background: rgba(57,255,20,0.08) !important;
      border-color: rgba(57,255,20,0.22) !important;
    }

    /* Footer contacto */
    .tenant-delnero #footerContact > .rounded-2xl {
      background: #080808 !important;
      border-color: rgba(57,255,20,0.08) !important;
    }
    .tenant-delnero #footerContact .w-10 {
      background: rgba(57,255,20,0.07) !important;
      border-color: rgba(57,255,20,0.18) !important;
    }
    .tenant-delnero #shopHorarioGrid span.rounded-full {
      background: rgba(57,255,20,0.50) !important;
    }

    /* Gold divider — verde neón */
    .tenant-delnero .gold-divider {
      background: linear-gradient(90deg, transparent, #39ff14, transparent) !important;
    }

    /* Selection recap chips */
    .tenant-delnero #selectionRecap span {
      background: rgba(57,255,20,0.06) !important;
      border-color: rgba(57,255,20,0.14) !important;
    }
    /* ── Del Nero · Club invite banner ──────────────────────────── */
    #delneroClubInvite { display: none; }
    .tenant-delnero #delneroClubInvite { display: block; }
    @keyframes dn-border-pulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(57,255,20,0.18), 0 0 10px rgba(57,255,20,0.08); }
      50%       { box-shadow: 0 0 0 1px rgba(57,255,20,0.42), 0 0 20px rgba(57,255,20,0.18); }
    }
    .dn-club-btn { animation: dn-border-pulse 3s ease-in-out infinite; }

    /* ── Del Nero · Club modal ───────────────────────────────────── */
    #delneroClubModal {
      display: none; position: fixed; inset: 0; z-index: 9990;
      background: rgba(0,0,0,0.82); backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px); align-items: flex-end;
    }
    #delneroClubModal.open { display: flex; }
    #delneroClubSheet {
      width: 100%; max-height: 90dvh; overflow-y: auto;
      background: #080808;
      border-radius: 24px 24px 0 0;
      border-top: 1px solid rgba(57,255,20,0.22);
      padding: 0 24px 40px;
      transform: translateY(100%);
      transition: transform 0.38s cubic-bezier(0.16,1,0.3,1);
    }
    #delneroClubModal.open #delneroClubSheet { transform: translateY(0); }
    #delneroClubHandle {
      width: 36px; height: 4px;
      background: rgba(57,255,20,0.22);
      border-radius: 2px; margin: 14px auto 28px;
    }


    /* ══ MARCELO HAIRDRESSING ══
       Aesthetic: Premium Dark — Apple-inspired minimal
       Background: #0A0A0A · Text: #FFF / #A0A0A0 · Cards: #141414
       ═══════════════════════════════════════════════════════════════ */
    .tenant-marcelo_hairdressing {
      --accent:   #ffffff;
      --accent-r: 255; --accent-g: 255; --accent-b: 255;
      --neon-clr: #ffffff;
      --neon-r:   255; --neon-g: 255; --neon-b: 255;
      --body-bg:  #0A0A0A;
    }
    .tenant-marcelo_hairdressing body {
      background-color: #0A0A0A !important;
    }

    /* ── Hero: flat dark — sin imagen de fondo ── */
    .tenant-marcelo_hairdressing .booking-hero {
      background-image: none !important;
      background-color: #0A0A0A !important;
      min-height: auto !important;
      height: auto !important;
      padding: 0 !important;
      border-bottom: none !important;
    }
    .tenant-marcelo_hairdressing .booking-hero-overlay {
      display: none !important;
    }
    .tenant-marcelo_hairdressing .booking-hero > .relative.z-10:not(#marceloHeader) {
      display: none !important;
    }
    .tenant-marcelo_hairdressing #marceloHeader {
      display: flex !important;
      background-image: url('/marcelo.webp') !important;
      background-size: cover !important;
      background-position: center 32% !important;
      min-height: 190px !important;
      padding: 0 22px 20px 22px !important;
      align-items: flex-end !important;
      border-bottom: none !important;
      position: relative !important;
    }
    .tenant-marcelo_hairdressing #marceloHeader::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: -32px !important;
      background: linear-gradient(180deg,
        rgba(0,0,0,0.00) 0%,
        rgba(0,0,0,0.32) 42%,
        rgba(10,10,10,0.82) 62%,
        rgba(10,10,10,0.97) 76%,
        #0A0A0A 88%) !important;
      z-index: 0 !important;
      pointer-events: none !important;
    }
    .tenant-marcelo_hairdressing #marceloHeader > * {
      position: relative !important;
      z-index: 1 !important;
    }
    .tenant-marcelo_hairdressing #heroGoogleBadge {
      display: none !important;
    }

    /* ── Info strip ── */
    .tenant-marcelo_hairdressing .info-strip {
      background: #0A0A0A !important;
      border-color: rgba(255,255,255,0.07) !important;
    }
    .tenant-marcelo_hairdressing .info-strip a,
    .tenant-marcelo_hairdressing .info-strip > div {
      color: #A0A0A0 !important;
    }
    .tenant-marcelo_hairdressing .info-strip i {
      color: rgba(255,255,255,0.35) !important;
    }

    /* ── Progress bar: thin, no glow ── */
    .tenant-marcelo_hairdressing #progressTrack {
      background-color: rgba(255,255,255,0.08) !important;
      height: 1.5px !important;
      border-radius: 999px !important;
      overflow: visible !important;
    }
    .tenant-marcelo_hairdressing #progressBar {
      background-color: #ffffff !important;
      box-shadow: none !important;
      height: 1.5px !important;
    }
    .tenant-marcelo_hairdressing #stepIndicatorText {
      color: rgba(255,255,255,0.35) !important;
      text-shadow: none !important;
      font-size: 0.64rem !important;
      letter-spacing: 0.14em !important;
    }
    .tenant-marcelo_hairdressing #progressPercentage {
      display: none !important;
    }

    /* ── Category pills (hidden, but styled if shown) ── */
    .tenant-marcelo_hairdressing #categoryPills {
      display: none !important;
    }
    .tenant-marcelo_hairdressing .category-pill {
      background: transparent !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      color: #A0A0A0 !important;
    }
    .tenant-marcelo_hairdressing .category-pill:hover {
      border-color: rgba(255,255,255,0.3) !important;
      color: #ffffff !important;
    }
    .tenant-marcelo_hairdressing .category-pill.border-neon,
    .tenant-marcelo_hairdressing .category-pill.text-neon {
      background: rgba(255,255,255,0.06) !important;
      border-color: #ffffff !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    /* ── Step headings ── */
    .tenant-marcelo_hairdressing h2.text-neon {
      color: #ffffff !important;
      text-shadow: none !important;
    }
    .tenant-marcelo_hairdressing #step1 > h2 {
      color: #ffffff !important;
      text-shadow: none !important;
      font-size: 1.3rem !important;
      font-weight: 700 !important;
      letter-spacing: -0.02em !important;
      margin-bottom: 1.25rem !important;
    }
    .tenant-marcelo_hairdressing .category-section h3 {
      color: rgba(255,255,255,0.22) !important;
      font-size: 0.65rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.2em !important;
      text-shadow: none !important;
    }

    /* ── Service cards (row layout, #141414 bg) ── */
    .tenant-marcelo_hairdressing .service-option {
      background: #141414 !important;
      border: 1px solid rgba(255,255,255,0.07) !important;
      border-radius: 14px !important;
      gap: 0.875rem !important;
      box-shadow: none !important;
      transition: border-color 0.2s ease, background 0.2s ease !important;
      transform: none !important;
    }
    .tenant-marcelo_hairdressing .service-option:hover {
      background: #1A1A1A !important;
      border-color: rgba(255,255,255,0.16) !important;
      box-shadow: none !important;
      transform: none !important;
    }
    .tenant-marcelo_hairdressing .service-option.border-neon {
      background: #1C1C1E !important;
      border-color: rgba(255,255,255,0.75) !important;
      box-shadow: none !important;
    }
    /* Icon */
    .tenant-marcelo_hairdressing .service-option .icon-bg {
      background: rgba(255,255,255,0.05) !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      border-radius: 10px !important;
      width: 42px !important;
      height: 42px !important;
      box-shadow: none !important;
    }
    .tenant-marcelo_hairdressing .service-option.border-neon .icon-bg {
      background: rgba(255,255,255,0.08) !important;
      border-color: rgba(255,255,255,0.2) !important;
    }
    .tenant-marcelo_hairdressing .service-option .icon-svg {
      color: rgba(255,255,255,0.48) !important;
      filter: none !important;
      text-shadow: none !important;
    }
    .tenant-marcelo_hairdressing .service-option.border-neon .icon-svg {
      color: #ffffff !important;
      filter: none !important;
    }
    /* Name */
    .tenant-marcelo_hairdressing .service-option .svc-name {
      color: #f0f0f0 !important;
      font-size: 0.88rem !important;
      font-weight: 600 !important;
    }
    /* Price */
    .tenant-marcelo_hairdressing .service-option .price-tag {
      color: #ffffff !important;
      text-shadow: none !important;
      font-size: 0.875rem !important;
      font-weight: 700 !important;
    }
    /* Duration */
    .tenant-marcelo_hairdressing .service-option .duration-tag {
      color: #A0A0A0 !important;
    }
    /* Radio */
    .tenant-marcelo_hairdressing .service-option .svc-radio {
      border-color: rgba(255,255,255,0.14) !important;
      width: 18px !important;
      height: 18px !important;
      flex-shrink: 0 !important;
    }
    .tenant-marcelo_hairdressing .service-option.border-neon .svc-radio {
      border-color: #ffffff !important;
      background: #ffffff !important;
      box-shadow: inset 0 0 0 3.5px #1C1C1E !important;
    }

    /* ── Barber cards ── */
    .tenant-marcelo_hairdressing .barber-option {
      background: #141414 !important;
      border-color: rgba(255,255,255,0.07) !important;
    }
    .tenant-marcelo_hairdressing .barber-option:hover {
      background: #1A1A1A !important;
      border-color: rgba(255,255,255,0.2) !important;
    }
    .tenant-marcelo_hairdressing .barber-option.border-neon {
      background: #1C1C1E !important;
      border-color: #ffffff !important;
      box-shadow: none !important;
    }
    .tenant-marcelo_hairdressing .barber-option.bg-brand-neon\/10 {
      background: rgba(255,255,255,0.06) !important;
    }
    .tenant-marcelo_hairdressing .text-brand-neon {
      color: #ffffff !important;
    }

    /* ── Calendar day buttons ── */
    .tenant-marcelo_hairdressing .day-btn {
      background: #141414 !important;
      border-color: rgba(255,255,255,0.07) !important;
      color: #A0A0A0 !important;
    }
    .tenant-marcelo_hairdressing .day-btn.active,
    .tenant-marcelo_hairdressing .day-btn.border-neon {
      background: #1C1C1E !important;
      border-color: #ffffff !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }
    .tenant-marcelo_hairdressing .day-btn .dot.bg-neon {
      background: #ffffff !important;
      box-shadow: none !important;
    }

    /* ── Time pills ── */
    .tenant-marcelo_hairdressing .time-pill {
      background: #141414 !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      color: #A0A0A0 !important;
    }
    .tenant-marcelo_hairdressing .time-pill:hover {
      border-color: rgba(255,255,255,0.28) !important;
      color: #ffffff !important;
    }
    .tenant-marcelo_hairdressing .time-pill.bg-neon,
    .tenant-marcelo_hairdressing .time-pill[data-sel] {
      background: #ffffff !important;
      color: #0A0A0A !important;
      box-shadow: none !important;
      font-weight: 700 !important;
      border-color: #ffffff !important;
    }
    .tenant-marcelo_hairdressing .time-pill.border-neon {
      border-color: rgba(255,255,255,0.6) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    /* ── Continue button bar ── */
    .tenant-marcelo_hairdressing #btnContinueBar {
      background: rgba(10,10,10,0.88) !important;
      backdrop-filter: blur(24px) !important;
      -webkit-backdrop-filter: blur(24px) !important;
      border-top: 1px solid rgba(255,255,255,0.07) !important;
    }
    .tenant-marcelo_hairdressing #btnContinue {
      background: #141414 !important;
      border: 1px solid rgba(255,255,255,0.28) !important;
      color: #ffffff !important;
      box-shadow: none !important;
      border-radius: 14px !important;
      font-weight: 700 !important;
      transition: background 0.2s ease, border-color 0.2s ease !important;
    }
    .tenant-marcelo_hairdressing #btnContinue:hover,
    .tenant-marcelo_hairdressing #btnContinue:active {
      background: #1C1C1E !important;
      border-color: rgba(255,255,255,0.55) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    /* ── Personal data inputs ── */
    .tenant-marcelo_hairdressing #clientName,
    .tenant-marcelo_hairdressing #clientPhone,
    .tenant-marcelo_hairdressing #clientEmail {
      background: #141414 !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      color: #ffffff !important;
    }
    .tenant-marcelo_hairdressing #clientName:focus,
    .tenant-marcelo_hairdressing #clientPhone:focus,
    .tenant-marcelo_hairdressing #clientEmail:focus {
      outline: none !important;
      border-color: rgba(255,255,255,0.38) !important;
      box-shadow: 0 0 0 2px rgba(255,255,255,0.04) !important;
    }
    .tenant-marcelo_hairdressing #summaryPrice {
      color: #ffffff !important;
    }

    /* ── Club banner: monochromatic premium ── */
    .tenant-marcelo_hairdressing #clubBanner a {
      background: #141414 !important;
      border-color: rgba(255,255,255,0.09) !important;
      color: #ffffff !important;
    }
    .tenant-marcelo_hairdressing #clubBanner .club-icon-wrap {
      background: rgba(255,255,255,0.04) !important;
      border-color: rgba(255,255,255,0.11) !important;
      color: #ffffff !important;
    }

    /* ── Marcelo Club invite ── */
    .tenant-marcelo_hairdressing #delneroClubInvite {
      display: block;
    }
    @keyframes mh-border-pulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.09); }
      50%       { box-shadow: 0 0 0 1px rgba(255,255,255,0.22); }
    }
    .tenant-marcelo_hairdressing .dn-club-btn {
      animation: mh-border-pulse 3s ease-in-out infinite;
      border-color: rgba(255,255,255,0.14) !important;
      background: #141414 !important;
      color: #ffffff !important;
    }

    /* ── Footer contact ── */
    .tenant-marcelo_hairdressing #footerContact > .rounded-2xl {
      background: #141414 !important;
      border-color: rgba(255,255,255,0.07) !important;
    }
    .tenant-marcelo_hairdressing #footerContact .w-10 {
      background: rgba(255,255,255,0.04) !important;
      border-color: rgba(255,255,255,0.09) !important;
      color: #ffffff !important;
    }
    .tenant-marcelo_hairdressing #shopHorarioGrid span.rounded-full {
      background: rgba(255,255,255,0.45) !important;
    }

    /* ── Divider ── */
    .tenant-marcelo_hairdressing .gold-divider {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent) !important;
    }

    /* ── Selection recap chips ── */
    .tenant-marcelo_hairdressing #selectionRecap span {
      background: rgba(255,255,255,0.04) !important;
      border-color: rgba(255,255,255,0.09) !important;
      color: #A0A0A0 !important;
    }
    /* ────────────────────────────────────────────────────────────── */
    /* ═══════════════════════════════════════════════════════════════
       AURA SALÓN & MALE GROOMING
       Paleta: Urbano-Industrial Light Mode (Cultura Deportiva)
       ───────────────────────────────────────────────────────────────
       Neutros:
         alpine-white    #F9FAFB  (zinc-50)   → fondo principal, tarjetas
         concrete-gray   #8E9399              → fondos secundarios, bordes
         stainless-steel #D4D4D8  (zinc-300)  → divisores, estados inactivos
         satin-black     #18181B  (zinc-900)  → textos, encabezados, íconos
       Acentos:
         accent-gray     #9CA3AF  (Tailwind gray-400) → CTA, selección
         accent-charcoal #111827              → CTA, selección fuerte, encabezados
         accent-pink     #FF8EA6              → badges, "Nuevo", decorativos
         accent-moss     #00553A              → éxito, confirmación
         accent-utilitarian #DC2626 (red-600) → destructivo, error
       ═══════════════════════════════════════════════════════════════ */
    :is(.tenant-aura,.tenant-latincaribe) {
      --accent:   #9CA3AF;
      --accent-r: 156; --accent-g: 163; --accent-b: 175;
      --neon-clr: #9CA3AF;
      --neon-r: 156; --neon-g: 163; --neon-b: 175;
      --body-bg:  #F9FAFB;
      --gold:     #9CA3AF;
      --gold-dim: rgba(156,163,175,0.35);
    }

    /* ── Base ── */
    :is(.tenant-aura,.tenant-latincaribe) body {
      background-color: #F9FAFB !important;
      color: #18181B !important;
    }

    /* ── Hero Header (Dark + auralogin.webp) ── */
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero {
      background-image: url('/auralogin.webp') !important;
      background-size: cover !important;
      background-position: center 30% !important;
      background-color: #141414 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero-overlay {
      background: linear-gradient(180deg, rgba(20,20,20,0.72) 0%, rgba(20,20,20,0.93) 100%) !important;
    }
    /* ══════════════════════════════════════════════════════════
       NEW GLOW SALÓN — su rosa real sobre el tema claro de Aura

       La paleta del local ya estaba cargada en `tenants/newglow/settings/theme`
       (colorAccent #F6ACDD, colorPrimary #c2559b, superficies rosadas) pero la
       agenda no la mostraba: el aplicador que lee ese doc —js/ui/theme.js— no
       está incluido en esta página, así que New Glow heredaba el GRIS de Aura
       (--accent #9CA3AF) y se veía como cualquier otro local.

       DOS ROSAS, UN SOLO CRITERIO — el mismo que la marca ya usa:
         · #c2559b (colorPrimary) para TEXTO, precios, bordes y estados activos.
         · #F6ACDD (colorAccent) SOLO para fondos y glows.
       El claro es el color de su logo, pero sobre blanco da ~1.6:1 de contraste:
       como texto es ilegible. Pintar los precios con él se vería "de marca" y
       no se podría leer, que es exactamente lo contrario de lo que buscamos.

       El doble .tenant-newglow.tenant-aura gana en especificidad al bloque
       :is(.tenant-aura,…) que define los tokens grises más abajo, sin depender
       del orden en que queden las reglas. */
    .tenant-newglow.tenant-aura,
    .tenant-newglow {
      --accent:   #c2559b;
      --accent-r: 194; --accent-g: 85; --accent-b: 155;
      --neon-clr: #c2559b;
      --neon-r:   194; --neon-g: 85; --neon-b: 155;
      --body-bg:  #ffffff;
      --gold:     #c2559b;
      --gold-dim: rgba(194,85,155,0.35);
    }
    .tenant-newglow.tenant-aura body { background-color: #ffffff !important; }

    /* OJO CON LA ESPECIFICIDAD: las reglas de Aura son `:is(.tenant-aura,…)
       .service-option .price-tag` (0,3,0) y viven MÁS ABAJO en este archivo.
       Un `.tenant-newglow.tenant-aura .price-tag` empata en peso y pierde por
       orden. Por eso cada selector de acá repite el mismo descendiente que usa
       Aura, para quedar un escalón arriba. */
    .tenant-newglow.tenant-aura .service-option .price-tag { color: #c2559b !important; }

    /* Progreso, pills y CTA: Aura los pinta en grises y negro. Con la marca
       puesta, el recorrido completo queda en su rosa. */
    .tenant-newglow.tenant-aura #progressBar {
      background: #c2559b !important;
    }
    .tenant-newglow.tenant-aura #progressTrack {
      background-color: rgba(194,85,155,0.14) !important;
    }
    .tenant-newglow.tenant-aura .category-pill.border-neon,
    .tenant-newglow.tenant-aura .category-pill.text-neon {
      border-color: #c2559b !important;
      color: #a8407f !important;
      background: rgba(246,172,221,0.22) !important;
    }
    .tenant-newglow.tenant-aura #btnContinue {
      background: #c2559b !important;
      color: #ffffff !important;
      box-shadow: 0 4px 20px rgba(194,85,155,0.35) !important;
    }
    .tenant-newglow.tenant-aura #btnContinue:hover {
      background: #a8407f !important;
    }
    /* Servicio elegido: borde y fondo de marca en vez del gris de Aura. */
    .tenant-newglow.tenant-aura .service-option.border-neon {
      border-color: #c2559b !important;
      background: rgba(246,172,221,0.12) !important;
    }
    /* Recap de la selección múltiple, en el rosa de la marca. */
    .tenant-newglow.tenant-aura .recap-multi {
      border-color: #c2559b !important;
      background: rgba(246,172,221,0.20) !important;
      color: #a8407f !important;
    }
    .tenant-newglow.tenant-aura .recap-multi-detalle {
      border-color: rgba(194,85,155,0.20) !important;
      background: rgba(246,172,221,0.10) !important;
    }
    .tenant-newglow.tenant-aura .recap-multi-item { color: #6b5460 !important; }
    .tenant-newglow.tenant-aura .recap-multi-precio { color: #a8407f !important; }

    /* ── Botonera bajo el hero ────────────────────────────────────────────
       Había TRES botones para dos cosas: el "Quiénes somos" común del
       info-strip (.qs-btn) más el par gris que hereda Aura (#aura-sobre-wrap
       y #aura-info-wa). Mismo problema —y misma solución— que ya documenta el
       bloque de Alfa Men: el wrap de Aura duplica el botón, y "Información"
       apunta a una galería de fotos que New Glow no tiene cargada. */
    .tenant-newglow.tenant-aura #aura-sobre-wrap,
    .tenant-newglow.tenant-aura #aura-info-wa { display: none !important; }

    /* Y el que SÍ queda era invisible: .qs-btn nace con color
       rgba(229,231,235,0.88) —gris casi blanco, pensado para los temas
       oscuros— sobre el fondo blanco del tema claro. Texto blanco sobre
       blanco: el botón estaba ahí, ocupando sus 46px, sin que se leyera nada. */
    .tenant-newglow.tenant-aura .qs-btn {
      color: #2a1f27 !important;
      background: #ffffff !important;
      border-bottom: 1px solid rgba(194,85,155,0.14) !important;
    }
    .tenant-newglow.tenant-aura .qs-btn:active { background: #fdf7fb !important; }
    .tenant-newglow.tenant-aura .qs-btn i { color: #c2559b !important; }

    /* Hoja de medidas y su rastro en la fila, en el rosa de la marca. */
    .tenant-newglow.tenant-aura .hv-opcion.is-on {
      border-color: #c2559b !important;
      background: rgba(246,172,221,0.22) !important;
    }
    .tenant-newglow.tenant-aura .hv-precio { color: #c2559b !important; }
    .tenant-newglow.tenant-aura .svc-familia-nota.is-elegido { color: #a8407f !important; }
    .tenant-newglow.tenant-aura .hv-opcion.is-on .hv-check {
      background: #c2559b !important; border-color: #c2559b !important; color: #ffffff !important;
    }
    .tenant-newglow.tenant-aura .hv-listo { background: #c2559b !important; color: #ffffff !important; }

    /* ── Paso 3: fecha y hora ──────────────────────────────────────────
       Aura pinta el día elegido en negro tinta (#111827) y la hora elegida en
       gris acero (#9CA3AF). Sobre la agenda rosa quedaban como dos islas de
       otra marca, y el gris de la hora ni siquiera se lee como "elegido":
       parece deshabilitado. */
    .tenant-newglow.tenant-aura .day-btn.active {
      background: #c2559b !important;
      border-color: #c2559b !important;
      box-shadow: 0 2px 10px rgba(194,85,155,0.28) !important;
    }
    .tenant-newglow.tenant-aura .day-btn.active span    { color: rgba(255,255,255,0.78) !important; }
    .tenant-newglow.tenant-aura .day-btn.active .day-num { color: #ffffff !important; }
    .tenant-newglow.tenant-aura .time-pill.bg-neon,
    .tenant-newglow.tenant-aura .time-pill[data-sel] {
      background: #c2559b !important;
      border-color: #c2559b !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(194,85,155,0.30) !important;
    }
    .tenant-newglow.tenant-aura .time-pill:not([data-sel]):hover {
      background: rgba(246,172,221,0.14) !important;
      border-color: #c2559b !important;
      color: #a8407f !important;
    }
    /* La casilla de WhatsApp, en su rosa: fondo apenas teñido y el check de
       marca cuando se marca. La legibilidad ya la resuelve el bloque
       `html.theme-light`; acá solo se le pone el color del local. */
    .tenant-newglow.tenant-aura #waOptInWrap,
    .tenant-newglow.tenant-aura #waOptInWrap[style] {
      background: #fdf7fb !important;
      border-color: rgba(194,85,155,0.22) !important;
    }
    .tenant-newglow.tenant-aura #waOptInWrap b { color: #a8407f !important; }
    .tenant-newglow.tenant-aura #waOptInCheck {
      border-color: rgba(194,85,155,0.40) !important;
      accent-color: #c2559b !important;
    }

    /* Smart Slots: newglow caía a la variante DORADA (la de los temas
       oscuros), donde el texto de apoyo va en ámbar claro sobre fondo ámbar
       claro y prácticamente no se lee. Ya pasó a la variante clara —se sumó a
       `isAura` en el render—; acá solo se lleva su rosa el ícono y las
       píldoras, que venían con el rosa genérico #FF8EA6 de Aura. */
    .tenant-newglow.tenant-aura .smart-slot-pill {
      border-color: rgba(194,85,155,0.25) !important;
      color: #a8407f !important;
    }
    .tenant-newglow.tenant-aura .smart-slot-pill:hover {
      background: rgba(246,172,221,0.16) !important;
      border-color: #c2559b !important;
    }

    /* ══════════════════════════════════════════════════════════
       CLEAN PUPS — los colores del camión sobre el tema CLARO de Aura

       Tres colores de marca: el naranja #F99B0F (el que el local eligió en su
       AgendaPro y el que viste el camión), el azul marino #232B63 del
       wordmark y el celeste #B3E9FA del círculo del logo.

       Misma trampa que New Glow: el naranja sobre blanco da ~2:1 y como
       texto no se lee. Entonces:
         · #232B63 (azul marino, >12:1) para TEXTO, precios y estados activos;
         · #F99B0F solo como RELLENO — botones (con texto marino encima,
           ~7:1), barra de progreso — donde no tiene que leerse solo;
         · #B3E9FA para fondos suaves.
       ══════════════════════════════════════════════════════════ */
    .tenant-cleanpups.tenant-aura,
    .tenant-cleanpups {
      --accent:   #232B63;
      --accent-r: 35; --accent-g: 43; --accent-b: 99;
      --neon-clr: #232B63;
      --neon-r:   35; --neon-g: 43; --neon-b: 99;
      --body-bg:  #FFFFFF;
      --gold:     #232B63;
      --gold-dim: rgba(35,43,99,0.35);
    }
    .tenant-cleanpups.tenant-aura body { background-color: #FFFFFF !important; }

    .tenant-cleanpups.tenant-aura .service-option .price-tag { color: #232B63 !important; }

    .tenant-cleanpups.tenant-aura #progressBar { background: #F99B0F !important; }
    .tenant-cleanpups.tenant-aura #progressTrack { background-color: rgba(249,155,15,0.18) !important; }
    .tenant-cleanpups.tenant-aura .category-pill.border-neon,
    .tenant-cleanpups.tenant-aura .category-pill.text-neon {
      border-color: #232B63 !important;
      color: #232B63 !important;
      background: rgba(179,233,250,0.45) !important;
    }
    .tenant-cleanpups.tenant-aura #btnContinue {
      background: #F99B0F !important;
      color: #232B63 !important;
      box-shadow: 0 4px 20px rgba(249,155,15,0.35) !important;
    }
    .tenant-cleanpups.tenant-aura #btnContinue:hover,
    .tenant-cleanpups.tenant-aura #btnContinue:not(:disabled):hover { background: #E88B00 !important; color: #232B63 !important; }
    .tenant-cleanpups.tenant-aura #btnContinue i { color: #232B63 !important; }
    /* CTA "Unirme al Club" del paso 4: con --gold marino y el texto oscuro
       del tema no se leía nada. Va igual que el botón principal. */
    .tenant-cleanpups.tenant-aura #step4AuthContainer a.flex {
      background: #F99B0F !important;
      color: #232B63 !important;
      box-shadow: 0 4px 18px rgba(249,155,15,0.30) !important;
    }
    .tenant-cleanpups.tenant-aura #step4AuthContainer a.flex i { color: #232B63 !important; }
    /* Deshabilitado caía en un beige que no es de nadie: el naranja lavado. */
    .tenant-cleanpups.tenant-aura #btnContinue:disabled,
    .tenant-cleanpups.tenant-aura #btnContinue[disabled] {
      background: #FDE7C4 !important;
      color: rgba(35,43,99,0.45) !important;
      box-shadow: none !important;
      opacity: 1 !important;
      filter: none !important;
    }
    .tenant-cleanpups.tenant-aura .service-option.border-neon {
      border-color: #232B63 !important;
      background: rgba(179,233,250,0.30) !important;
    }
    .tenant-cleanpups.tenant-aura .recap-multi {
      border-color: #232B63 !important;
      background: rgba(179,233,250,0.40) !important;
      color: #232B63 !important;
    }
    .tenant-cleanpups.tenant-aura .recap-multi-detalle {
      border-color: rgba(35,43,99,0.20) !important;
      background: rgba(179,233,250,0.20) !important;
    }
    .tenant-cleanpups.tenant-aura .recap-multi-item { color: #4b5270 !important; }
    .tenant-cleanpups.tenant-aura .recap-multi-precio { color: #232B63 !important; }

    /* El wrap de Aura duplica el botón "Quiénes somos" (igual que Salón Amanda). */
    .tenant-cleanpups.tenant-aura #aura-sobre-wrap,
    .tenant-cleanpups.tenant-aura #aura-info-wa { display: none !important; }
    .tenant-cleanpups.tenant-aura .qs-btn {
      color: #1a1a1a !important;
      background: #ffffff !important;
      border-bottom: 1px solid rgba(35,43,99,0.14) !important;
    }
    .tenant-cleanpups.tenant-aura .qs-btn:active { background: #eefaff !important; }
    .tenant-cleanpups.tenant-aura .qs-btn i { color: #232B63 !important; }

    .tenant-cleanpups.tenant-aura .hv-opcion.is-on {
      border-color: #232B63 !important;
      background: rgba(179,233,250,0.40) !important;
    }
    .tenant-cleanpups.tenant-aura .hv-precio { color: #232B63 !important; }
    .tenant-cleanpups.tenant-aura .svc-familia-nota.is-elegido { color: #232B63 !important; }
    .tenant-cleanpups.tenant-aura .hv-opcion.is-on .hv-check {
      background: #232B63 !important; border-color: #232B63 !important; color: #ffffff !important;
    }
    .tenant-cleanpups.tenant-aura .hv-listo { background: #F99B0F !important; color: #232B63 !important; }

    /* Paso 3: día y hora en el marino de marca. */
    .tenant-cleanpups.tenant-aura .day-btn.active {
      background: #232B63 !important;
      border-color: #232B63 !important;
      box-shadow: 0 2px 10px rgba(35,43,99,0.28) !important;
    }
    .tenant-cleanpups.tenant-aura .day-btn.active span    { color: rgba(255,255,255,0.78) !important; }
    .tenant-cleanpups.tenant-aura .day-btn.active .day-num { color: #ffffff !important; }
    .tenant-cleanpups.tenant-aura .time-pill.bg-neon,
    .tenant-cleanpups.tenant-aura .time-pill[data-sel] {
      background: #232B63 !important;
      border-color: #232B63 !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(35,43,99,0.30) !important;
    }
    .tenant-cleanpups.tenant-aura .time-pill:not([data-sel]):hover {
      background: rgba(179,233,250,0.40) !important;
      border-color: #232B63 !important;
      color: #232B63 !important;
    }

    /* Paso 4: el opt-in de WhatsApp. */
    .tenant-cleanpups.tenant-aura #waOptInWrap,
    .tenant-cleanpups.tenant-aura #waOptInWrap[style] {
      background: #eefaff !important;
      border-color: rgba(35,43,99,0.22) !important;
    }
    .tenant-cleanpups.tenant-aura #waOptInWrap b { color: #232B63 !important; }
    .tenant-cleanpups.tenant-aura #waOptInCheck {
      border-color: rgba(35,43,99,0.40) !important;
      accent-color: #232B63 !important;
    }

    .tenant-cleanpups.tenant-aura .smart-slot-pill[data-active="1"] {
      background: #232B63 !important;
      border-color: #232B63 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(35,43,99,0.22) !important;
    }
    .tenant-cleanpups.tenant-aura .smart-slot-pill {
      border-color: rgba(35,43,99,0.25) !important;
      color: #232B63 !important;
    }
    .tenant-cleanpups.tenant-aura .smart-slot-pill:hover {
      background: rgba(179,233,250,0.40) !important;
      border-color: #232B63 !important;
    }

    /* ══════════════════════════════════════════════════════════
       PAOLA LEIVA — misma paleta y misma estructura que New Glow

       Se pidió explícitamente que se vea como New Glow, y su rosa de marca es
       el MISMO (#F6ACDD), así que comparte la paleta entera. Rige el mismo
       criterio de los dos rosas que ya documenta el bloque de arriba:
         · #c2559b (rosa oscuro) para TEXTO, precios, bordes y estados activos
           sobre el cuerpo blanco — el claro da ~1.6:1 y es ilegible;
         · #F6ACDD solo como FONDO translúcido, donde no tiene que leerse.

       Está duplicado a propósito y no compartiendo selector con New Glow: son
       dos locales distintos que hoy coinciden, y el día que Paola quiera su
       propio tono, se toca acá sin arriesgar la portada de New Glow. Si se
       cambia la paleta de uno, mirar el otro.

       El hero NO se repite acá: el suyo vive más arriba, con el carrusel de
       sus dos fotos. */
    .tenant-paolaleiva.tenant-aura,
    .tenant-paolaleiva {
      --accent:   #c2559b;
      --accent-r: 194; --accent-g: 85; --accent-b: 155;
      --neon-clr: #c2559b;
      --neon-r:   194; --neon-g: 85; --neon-b: 155;
      --body-bg:  #ffffff;
      --gold:     #c2559b;
      --gold-dim: rgba(194,85,155,0.35);
    }
    .tenant-paolaleiva.tenant-aura body { background-color: #ffffff !important; }

    /* Cada selector repite el descendiente que usa Aura (`.service-option
       .price-tag`, etc.) para quedar un escalón arriba en especificidad: las
       reglas de Aura viven MÁS ABAJO y un empate lo gana ella por orden. */
    .tenant-paolaleiva.tenant-aura .service-option .price-tag { color: #c2559b !important; }
    .tenant-paolaleiva.tenant-aura #progressBar { background: #c2559b !important; }
    .tenant-paolaleiva.tenant-aura #progressTrack {
      background-color: rgba(194,85,155,0.14) !important;
    }
    .tenant-paolaleiva.tenant-aura .category-pill.border-neon,
    .tenant-paolaleiva.tenant-aura .category-pill.text-neon {
      border-color: #c2559b !important;
      color: #a8407f !important;
      background: rgba(246,172,221,0.22) !important;
    }
    .tenant-paolaleiva.tenant-aura #btnContinue {
      background: #c2559b !important;
      color: #ffffff !important;
      box-shadow: 0 4px 20px rgba(194,85,155,0.35) !important;
    }
    .tenant-paolaleiva.tenant-aura #btnContinue:hover { background: #a8407f !important; }
    .tenant-paolaleiva.tenant-aura .service-option.border-neon {
      border-color: #c2559b !important;
      background: rgba(246,172,221,0.12) !important;
    }
    .tenant-paolaleiva.tenant-aura .recap-multi {
      border-color: #c2559b !important;
      background: rgba(246,172,221,0.20) !important;
      color: #a8407f !important;
    }
    .tenant-paolaleiva.tenant-aura .recap-multi-detalle {
      border-color: rgba(194,85,155,0.20) !important;
      background: rgba(246,172,221,0.10) !important;
    }
    .tenant-paolaleiva.tenant-aura .recap-multi-item   { color: #6b5460 !important; }
    .tenant-paolaleiva.tenant-aura .recap-multi-precio { color: #a8407f !important; }

    /* El par gris que hereda Aura duplica el "Quiénes somos" del info-strip.
       Mismo caso que New Glow y Alfa Men. */
    .tenant-paolaleiva.tenant-aura #aura-sobre-wrap,
    .tenant-paolaleiva.tenant-aura #aura-info-wa { display: none !important; }

    /* Y el que queda nace en gris casi blanco (pensado para temas oscuros):
       sobre el fondo blanco del tema claro no se lee. */
    .tenant-paolaleiva.tenant-aura .qs-btn {
      color: #2a1f27 !important;
      background: #ffffff !important;
      border-bottom: 1px solid rgba(194,85,155,0.14) !important;
    }
    .tenant-paolaleiva.tenant-aura .qs-btn:active { background: #fdf7fb !important; }
    .tenant-paolaleiva.tenant-aura .qs-btn i { color: #c2559b !important; }

    .tenant-paolaleiva.tenant-aura .hv-opcion.is-on {
      border-color: #c2559b !important;
      background: rgba(246,172,221,0.22) !important;
    }
    .tenant-paolaleiva.tenant-aura .hv-precio { color: #c2559b !important; }
    .tenant-paolaleiva.tenant-aura .svc-familia-nota.is-elegido { color: #a8407f !important; }
    .tenant-paolaleiva.tenant-aura .hv-opcion.is-on .hv-check {
      background: #c2559b !important; border-color: #c2559b !important; color: #ffffff !important;
    }
    .tenant-paolaleiva.tenant-aura .hv-listo { background: #c2559b !important; color: #ffffff !important; }
    .tenant-paolaleiva.tenant-aura .day-btn.active {
      background: #c2559b !important;
      border-color: #c2559b !important;
    }
    .tenant-paolaleiva.tenant-aura #waOptInWrap b { color: #a8407f !important; }
    .tenant-paolaleiva.tenant-aura #waOptInCheck {
      border-color: rgba(194,85,155,0.40) !important;
      accent-color: #c2559b !important;
    }
    .tenant-paolaleiva.tenant-aura .smart-slot-pill {
      border-color: rgba(194,85,155,0.25) !important;
      color: #a8407f !important;
    }
    .tenant-paolaleiva.tenant-aura .smart-slot-pill:hover {
      background: rgba(246,172,221,0.16) !important;
      border-color: #c2559b !important;
    }

    /* ══════════════════════════════════════════════════════════
       GLOW STUDIO — navy + dorado sobre el tema claro de Aura

       Mismo patrón que New Glow arriba: tenant nuevo, sin data propia en la
       agenda todavía, así que se reusa el tema CLARO de Aura y se pisa con
       la marca real (Viña del Mar, glowsalon.cl). Administra Nattier Fernández.

       DOS DORADOS, UN SOLO CRITERIO — igual razonamiento que New Glow con
       su rosa (#c2559b vs #F6ACDD):
         · #B88939 (dorado oscuro) para TEXTO, precios, bordes y estados
           activos sobre el cuerpo blanco — necesita contraste, el claro da
           ~1.8:1 sobre blanco y es ilegible como texto.
         · #C3984E (dorado claro) SOLO para el hero (ring, divisor) y
           fondos/glows — sobre el navy #181C38 el oscuro se apaga y pierde
           el brillo metálico del isotipo real.
       Verde WhatsApp (#25D366) reservado SOLO para el check del aviso de
       WhatsApp — pedido explícito del dueño, no se mezcla con el resto.

       Sin foto propia del local todavía (como Omega cuando se creó): hero
       tipográfico sobre el navy del isotipo en vez de una foto. Cuando
       llegue una foto real del salón, blaqueta este bloque con
       background-image ahí — el resto no cambia. El wordmark pide Cinzel
       en la guía de marca; se usa Playfair Display (ya cargada arriba) en
       vez de sumar una fuente nueva solo para este tenant — mismo ahorro
       de requests que hizo Omega con Plus Jakarta Sans. */
    /* ═══ Skull Studio — ámbar sobre negro, tema propio ═══
       #FFB22C es el ámbar de skullstudio.cl, su propio sitio (ver
       skullstudio/FUENTES.md). Antes acá vivía #0F20FC, el `colorMedium` que
       declara su AgendaPro, junto con un fondo blanco y el tema claro de
       Aura: esa versión quedó obsoleta cuando nació skullstudio/tema.css, que
       pinta oscuro y en ámbar. El espejo nunca se actualizó.

       No era inofensivo: la hoja propia gana por especificidad
       (`html.tenant-skullstudio`), así que en pantalla mandaba el ámbar, pero
       este bloque es el RESPALDO por si la hoja no llega a cargar — y
       devolvía un local azul con fondo blanco. Los valores tienen que decir
       lo mismo que tema.css, igual que en Nubo acá abajo. */
    .tenant-skullstudio {
      --accent:   #ffb22c;
      --accent-r: 255; --accent-g: 178; --accent-b: 44;
      --neon-clr: #ffb22c;
      --neon-r:   255; --neon-g: 178; --neon-b: 44;
      --body-bg:  #080707;
      --gold:     #ffb22c;
      --gold-dim: rgba(255,178,44,0.20);
    }
    .tenant-skullstudio body { background-color: #080707; }

    /* Nubo: crema sobre grafito, tomado del logo; tema propio.
       #151820 es el fondo de la página (el mismo que pinta su tema.css y el
       que declara el manifest); #1D212A queda para los paneles. Este bloque
       es el respaldo por si la hoja propia no llega a cargar: si los dos
       valores no coinciden, el local parpadea de un gris al otro. */
    .tenant-nubosalon {
      --accent: #EEEADD;
      --accent-r: 238; --accent-g: 234; --accent-b: 221;
      --gold:     #EEEADD;
      --gold-dim: rgba(238,234,221,0.14);
      --neon-clr: #EEEADD;
      --neon-r: 238; --neon-g: 234; --neon-b: 221;
      --body-bg: #151820;
    }
    .tenant-nubosalon body { background-color: #151820; }

    /* Lion Studio: oro sobre negro cálido, MEDIDO del logo (no del minisitio
       de AgendaPro, cuyos colores son defaults del proveedor). #C39E58 es el
       p75 del degradado dorado: 7,62:1 sobre el fondo, AAA. #0E0C09 es el
       mismo negro que pinta su tema.css y declara el manifest — si los dos
       valores no coinciden, el local parpadea de un negro al otro. */
    .tenant-lionstudio {
      --accent: #C39E58;
      --accent-r: 195; --accent-g: 158; --accent-b: 88;
      --gold:     #C39E58;
      --gold-dim: rgba(195,158,88,0.20);
      --neon-clr: #C39E58;
      --neon-r: 195; --neon-g: 158; --neon-b: 88;
      --body-bg: #0E0C09;
    }
    .tenant-lionstudio body { background-color: #0E0C09; }

    /* El selector de arriba y este son UNA lista: `.tenant-glowstudio.tenant-aura`
       gana por especificidad sobre `.tenant-glowstudio`, así que si alguien mete
       una regla en medio de la coma, glowstudio se lleva el acento del vecino.
       Pasó con Skull (#0F20FC): Glow quedó azul. Los dos van pegados, siempre. */
    .tenant-glowstudio.tenant-aura,
    .tenant-glowstudio {
      --accent:   #B88939;
      --accent-r: 184; --accent-g: 137; --accent-b: 57;
      --neon-clr: #B88939;
      --neon-r:   184; --neon-g: 137; --neon-b: 57;
      --body-bg:  #ffffff;
      --gold:     #B88939;
      --gold-dim: rgba(184,137,57,0.35);
    }
    .tenant-glowstudio.tenant-aura body { background-color: #ffffff !important; }

    .tenant-glowstudio.tenant-aura .booking-hero,
    .tenant-glowstudio .booking-hero {
      background-image:
        radial-gradient(120% 90% at 50% -10%, #1D2245 0%, #181C38 65%) !important;
      background-color: #181C38 !important;
    }
    .tenant-glowstudio.tenant-aura .booking-hero-overlay,
    .tenant-glowstudio .booking-hero-overlay { background: none !important; }
    .tenant-glowstudio.tenant-aura .booking-hero::after { display: none !important; }

    /* Ring del logo y divisor: dorado CLARO — el oscuro se apaga sobre navy. */
    .tenant-glowstudio.tenant-aura .hero-logo-ring,
    .tenant-glowstudio .hero-logo-ring {
      border-color: #C3984E !important;
      box-shadow: 0 0 0 1px rgba(195,152,78,0.15),
                  0 0 28px rgba(195,152,78,0.22),
                  0 0 50px rgba(0,0,0,0.6) !important;
    }
    .tenant-glowstudio.tenant-aura .gold-divider,
    .tenant-glowstudio .gold-divider {
      background: linear-gradient(90deg, transparent, #C3984E, transparent) !important;
    }
    .tenant-glowstudio.tenant-aura #shopNombre,
    .tenant-glowstudio #shopNombre {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 600 !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      color: #C3984E !important;
      text-shadow: none !important;
    }
    .tenant-glowstudio.tenant-aura #shopSlogan,
    .tenant-glowstudio.tenant-aura .booking-hero p,
    .tenant-glowstudio.tenant-aura .booking-hero span {
      color: #EAD5B3 !important;
    }

    /* Franja de info bajo el hero: sobre cuerpo blanco, no sobre el navy del
       hero — texto en navy de los títulos, íconos en el dorado de marca. */
    .tenant-glowstudio.tenant-aura .info-strip,
    .tenant-glowstudio.tenant-aura .info-strip[style] {
      background: #ffffff !important;
      border-bottom: 1px solid rgba(24,28,56,0.10) !important;
    }
    .tenant-glowstudio.tenant-aura .info-strip a,
    .tenant-glowstudio.tenant-aura .info-strip button { color: #181C38 !important; }
    .tenant-glowstudio.tenant-aura .info-strip i,
    .tenant-glowstudio.tenant-aura .info-strip i[style] { color: #C3984E !important; }

    /* Progreso, pills y CTA: Aura los pinta en grises y negro. */
    .tenant-glowstudio.tenant-aura #progressBar { background: #B88939 !important; }
    .tenant-glowstudio.tenant-aura #progressTrack { background-color: rgba(184,137,57,0.14) !important; }
    .tenant-glowstudio.tenant-aura .category-pill.border-neon,
    .tenant-glowstudio.tenant-aura .category-pill.text-neon {
      border-color: #C3984E !important;
      color: #93701F !important;
      background: #FAF6EE !important;
    }
    /* CTA: degradado metálico (E8C87A→B88939), texto navy — pedido explícito
       del dueño después de ver el dorado plano demasiado apagado. */
    .tenant-glowstudio.tenant-aura #btnContinue {
      background: linear-gradient(180deg, #E8C87A 0%, #B88939 100%) !important;
      color: #181C38 !important;
      box-shadow: 0 4px 20px rgba(184,137,57,0.35) !important;
    }
    .tenant-glowstudio.tenant-aura #btnContinue:hover { filter: brightness(0.96) !important; }

    /* Servicio/profesional elegido: borde y fondo de marca en vez del gris de
       Aura. Champán exacto pedido para el feedback táctil (ver bloque de
       micro-animaciones más abajo) — antes era el dorado oscuro plano. */
    .tenant-glowstudio.tenant-aura .service-option.border-neon,
    .tenant-glowstudio.tenant-aura .barber-option.border-neon {
      border-color: #C3984E !important;
      background: #FAF7F2 !important;
    }

    /* Botonera bajo el hero: mismo problema y misma solución que New Glow —
       el wrap gris de Aura (#aura-sobre-wrap / #aura-info-wa) duplica el
       "Quiénes somos" del info-strip. */
    .tenant-glowstudio.tenant-aura #aura-sobre-wrap,
    .tenant-glowstudio.tenant-aura #aura-info-wa { display: none !important; }
    .tenant-glowstudio.tenant-aura .qs-btn {
      color: #181C38 !important;
      background: #ffffff !important;
      border-bottom: 1px solid rgba(184,137,57,0.14) !important;
    }
    .tenant-glowstudio.tenant-aura .qs-btn:active { background: #FAF6EE !important; }
    .tenant-glowstudio.tenant-aura .qs-btn i { color: #C3984E !important; }

    /* Paso 3: fecha y hora. */
    .tenant-glowstudio.tenant-aura .day-btn.active {
      background: #B88939 !important;
      border-color: #B88939 !important;
      box-shadow: 0 2px 10px rgba(184,137,57,0.28) !important;
    }
    .tenant-glowstudio.tenant-aura .day-btn.active span    { color: rgba(255,255,255,0.78) !important; }
    .tenant-glowstudio.tenant-aura .day-btn.active .day-num { color: #ffffff !important; }
    .tenant-glowstudio.tenant-aura .time-pill.bg-neon,
    .tenant-glowstudio.tenant-aura .time-pill[data-sel] {
      background: #B88939 !important;
      border-color: #B88939 !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(184,137,57,0.30) !important;
    }
    .tenant-glowstudio.tenant-aura .time-pill:not([data-sel]):hover {
      background: rgba(195,152,78,0.14) !important;
      border-color: #B88939 !important;
      color: #93701F !important;
    }

    /* Casilla de WhatsApp: fondo apenas teñido en dorado, pero el check va
       en verde WhatsApp — el único lugar del tenant donde se usa ese verde. */
    .tenant-glowstudio.tenant-aura #waOptInWrap,
    .tenant-glowstudio.tenant-aura #waOptInWrap[style] {
      background: #FAF8F5 !important;
      border-color: rgba(195,152,78,0.22) !important;
    }
    .tenant-glowstudio.tenant-aura #waOptInWrap b { color: #93701F !important; }
    .tenant-glowstudio.tenant-aura #waOptInCheck {
      border-color: rgba(195,152,78,0.40) !important;
      accent-color: #25D366 !important;
    }

    .tenant-glowstudio.tenant-aura .smart-slot-pill {
      border-color: rgba(195,152,78,0.25) !important;
      color: #93701F !important;
    }
    .tenant-glowstudio.tenant-aura .smart-slot-pill:hover {
      background: rgba(195,152,78,0.16) !important;
      border-color: #B88939 !important;
    }

    /* ── Duraciones ocultas al cliente (21-08-2026) ─────────────────────
       Las 69 duraciones del catálogo son ESTIMACIONES nuestras: glowsalon.cl
       publica precio pero no duración (ver el aviso de seed-glowstudio.js).
       Mostrarle "3h" a la clienta es afirmar un dato que nadie del salón
       confirmó, y en colorimetría el tiempo es justamente lo que se pregunta.

       Se oculta la ETIQUETA, no el dato: `duracion` sigue en Firestore y el
       motor de horas la sigue usando para bloquear el sillón. Borrarla de
       verdad sería peor — `Number(cita.duracionServicio) || 30` trata el 0
       como falsy y todo caería a 30 min, así que un Balayage de 3 horas
       dejaría libre el resto de la tarde (firebaseUtils.js, getHorasDisponibles).

       Un solo selector alcanza: glowstudio renderiza por la rama
       `_useRowLayout`, la única que dibuja la duración, y ahí va siempre
       dentro de `.duration-tag` con el ícono del reloj adentro. Las otras dos
       vistas que muestran duración (`.hv-dur` de la hoja de medidas y el chip
       `recap-multi`) cuelgan de `_catalogoGrande()`, que solo lista a newglow.
       Se incluye `.hv-dur` igual por si alguna vez entra a esa lista. */
    .tenant-glowstudio.tenant-aura .duration-tag,
    .tenant-glowstudio .duration-tag,
    .tenant-glowstudio.tenant-aura .hv-dur,
    .tenant-glowstudio .hv-dur { display: none !important; }

    /* ── Micro-animaciones (aprobadas 20-08-2026, sin el sweep del botón —
       "se ve muy intensa") ──────────────────────────────────────────────
       Todo scoped a glowstudio, cero riesgo para el resto de tenants. */
    @keyframes gsRingGlow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(195,152,78,0.15), 0 0 28px rgba(195,152,78,0.22), 0 0 50px rgba(0,0,0,0.6); }
      50%      { box-shadow: 0 0 0 1px rgba(195,152,78,0.15), 0 0 42px rgba(195,152,78,0.42), 0 0 50px rgba(0,0,0,0.6); }
    }
    @keyframes gsShimmer {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(350%); }
    }
    @keyframes gsFadeInUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* 1) Glow perimetral del ring del logo — respira cada 3s. */
    .tenant-glowstudio.tenant-aura .hero-logo-ring {
      animation: gsRingGlow 3s ease-in-out infinite;
    }

    /* 2) Feedback táctil en tarjetas de servicio/profesional: transición al
       elegir (ya en champán, ver arriba) + retroceso al tocar + el radio se
       anima con rebote (spring) en vez de encender de golpe. */
    .tenant-glowstudio.tenant-aura .service-option,
    .tenant-glowstudio.tenant-aura .barber-option {
      transition: border-color .2s ease, background-color .2s ease, transform .1s ease !important;
    }
    .tenant-glowstudio.tenant-aura .service-option:active,
    .tenant-glowstudio.tenant-aura .barber-option:active {
      transform: scale(0.985) !important;
    }
    .tenant-glowstudio.tenant-aura .svc-radio,
    .tenant-glowstudio.tenant-aura .barber-radio {
      transition: border-color .3s cubic-bezier(.34,1.56,.64,1),
                  background .3s cubic-bezier(.34,1.56,.64,1),
                  transform .3s cubic-bezier(.34,1.56,.64,1) !important;
    }

    /* 3) Barra de progreso: brillo cruzando cada 4s. */
    .tenant-glowstudio.tenant-aura #progressBar {
      position: relative !important;
      overflow: hidden !important;
    }
    .tenant-glowstudio.tenant-aura #progressBar::after {
      content: '';
      position: absolute; inset: 0; width: 40%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
      animation: gsShimmer 4s ease-in-out infinite;
    }

    /* 5) Horarios: pop-in escalonado (0.04s por píldora) al elegir un día.
       #hoursGrid se repuebla con innerHTML += en cada cambio de día, así que
       los nodos son nuevos cada vez y la animación se repite sola. */
    .tenant-glowstudio.tenant-aura #hoursGrid > div {
      opacity: 0;
      animation: gsFadeInUp .35s ease forwards;
    }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(1) { animation-delay: 0.04s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(2) { animation-delay: 0.08s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(3) { animation-delay: 0.12s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(4) { animation-delay: 0.16s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(5) { animation-delay: 0.20s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(6) { animation-delay: 0.24s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(7) { animation-delay: 0.28s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(8) { animation-delay: 0.32s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(9) { animation-delay: 0.36s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(10) { animation-delay: 0.40s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(11) { animation-delay: 0.44s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(12) { animation-delay: 0.48s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(13) { animation-delay: 0.52s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(14) { animation-delay: 0.56s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(15) { animation-delay: 0.60s; }
    .tenant-glowstudio.tenant-aura #hoursGrid > div:nth-child(16) { animation-delay: 0.64s; }
    /* (4, transición de pasos slide&fade, NO va acá: ya es comportamiento
       genérico de la plataforma — transition-all + translate-x-12/opacity-0
       en goToStep(), index.html ~línea 19118. Glow Studio ya lo tiene. */

    /* ══════════════════════════════════════════════════════════
       STUDIO DIECISÉIS (tenant sionbarberia) — Premium Dark · Monocromático
       Logo y banner oficiales (B&N · "Private Room").
    ══════════════════════════════════════════════════════════ */
    .tenant-sionbarberia {
      --accent:   #FAFAFA;
      --accent-r: 250; --accent-g: 250; --accent-b: 250;
      --neon-clr: #FFFFFF;
      --neon-r:   255; --neon-g: 255; --neon-b: 255;
      --body-bg:  #0a0a0a;
      --gold:     #E5E7EB;
      --gold-dim: rgba(229,231,235,0.35);
    }
    .tenant-sionbarberia body { background-color: #0a0a0a !important; color: #e8e8ea !important; }

    /* Hero: banner oficial banner16.webp (foto fachada · neón verde). contain +
       aspect-ratio EXACTO del archivo (1536x1024) → se ve COMPLETO, sin recorte
       ni franjas. Si cambia el archivo, actualizar el aspect-ratio. */
    .tenant-sionbarberia .booking-hero {
      background-image: url('/dieciseis/banner16.webp') !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      background-color: #0a0a0a !important;
      aspect-ratio: 1536 / 1024 !important;
      min-height: 0 !important;
      height: auto !important;
      position: relative !important;
    }
    /* Grano de película sutil → textura editorial premium (sobre la foto, BAJO el
       texto: z-index 2 < contenido z-10). No afecta legibilidad. */
    .tenant-sionbarberia .booking-hero::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 2 !important;
      pointer-events: none !important;
      opacity: 0.05 !important;
      mix-blend-mode: overlay !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") !important;
    }
    /* Scrim radial central (legibilidad del logo/frase) + degradado inferior
       reforzado (bg-gradient-to-t from-[#0a0806] via-[#0a0806]/85 to-transparent)
       para garantizar contraste del eslogan sobre piso/sillas del banner. */
    .tenant-sionbarberia .booking-hero-overlay {
      background:
        radial-gradient(ellipse 62% 48% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 56%, rgba(0,0,0,0) 78%),
        linear-gradient(to top,
          #0a0806 0%,
          rgba(10,8,6,0.90) 20%,
          rgba(10,8,6,0.60) 40%,
          rgba(10,8,6,0.18) 58%,
          rgba(10,8,6,0) 72%) !important;
    }
    /* Mostramos el logo circular + frase sobre el banner; ocultamos nombre y divisor. */
    .tenant-sionbarberia .gold-divider,
    .tenant-sionbarberia #shopNombre { display: none !important; }

    /* ── Logo: aro hairline blanco + glow plata (B&N premium consistente; el verde
         lo carga la FOTO de la fachada, no el chrome de la UI) + flotante ── */
    .tenant-sionbarberia #heroLogoArea { margin-bottom: 18px !important; }
    .tenant-sionbarberia .hero-logo-ring {
      width: 84px !important; height: 84px !important;
      background: #0a0a0a !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 0 5px rgba(0,0,0,0.45),
        0 0 26px rgba(255,255,255,0.16),
        0 14px 34px rgba(0,0,0,0.70) !important;
      animation: dieciseis-float 3.8s ease-in-out infinite !important;
    }
    @keyframes dieciseis-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-9px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tenant-sionbarberia .hero-logo-ring { animation: none !important; }
    }
    /* ── Frase bajo el logo: blanco legible sobre la foto ── */
    .tenant-sionbarberia .booking-hero p:has(#shopSlogan) {
      display: block !important;
      max-width: 300px; margin: 0 auto !important;
      color: #ffffff !important;
      font-size: 12.5px !important; font-weight: 600 !important;
      text-transform: none !important; letter-spacing: 0.02em !important;
      line-height: 1.45 !important;
      text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 22px rgba(0,0,0,0.75) !important;
    }
    .tenant-sionbarberia #shopSlogan { color: #ffffff !important; }

    /* ── Info-strip (dieciseis): WRAP responsivo para NO colisionar en móvil.
         · Estado (🔴 Cerrado · Abre 09:00) = píldora compacta con hairline
         · Ubicación + Quiénes somos = pills discretos con separador hairline
         Cuando el texto del estado es largo, los botones saltan LIMPIO a la 2da
         línea (order + flex-wrap + justify-center), sin overlap.
         "Quiénes somos" (qs-btn) se re-ubica dentro del strip vía JS. */
    html.tenant-sionbarberia .info-strip,
    html.tenant-sionbarberia .info-strip[style] {
      background: rgba(12,10,9,0.96) !important;
      border-top: 1px solid rgba(255,255,255,0.07) !important;
      border-bottom: 1px solid rgba(255,255,255,0.07) !important;
      padding: 11px 14px !important;
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: center !important;
      row-gap: 9px !important;
      column-gap: 10px !important;
      font-size: 12px !important;
      color: #d4d4d4 !important;
      width: 100% !important;
    }
    /* Estado → píldora compacta centrada; primera en el orden, así cuando es
       larga empuja a Ubicación/Quiénes somos a la segunda línea (sin colisión). */
    html.tenant-sionbarberia .info-strip #heroInfoHorBtn {
      order: 1 !important;
      flex: 0 1 auto !important;
      justify-content: center !important;
      padding: 4px 12px !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.045) !important;
      color: #ededed !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.015em !important;
      gap: 6px !important;
      min-width: 0 !important;
      max-width: 100% !important;
      white-space: nowrap !important;
    }
    html.tenant-sionbarberia .info-strip #heroInfoHorBtn > span {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    /* Ubicación (salta a la 2da línea cuando el estado es largo) */
    html.tenant-sionbarberia .info-strip #heroInfoAddr {
      order: 2 !important;
      flex: 0 0 auto !important;
      padding: 4px 10px !important;
      border: 0 !important;
      border-radius: 999px !important;
      color: #a3a3a3 !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      gap: 5px !important;
      transition: color 0.15s ease !important;
      text-decoration: none !important;
    }
    html.tenant-sionbarberia .info-strip #heroInfoAddr:hover { color: #ffffff !important; }
    /* Quiénes somos: pill discreto con separador hairline (movido vía JS) */
    html.tenant-sionbarberia .info-strip #quienesSomosBtn.qs-btn {
      order: 3 !important;
      display: inline-flex !important;
      align-items: center !important;
      width: auto !important;
      flex: 0 0 auto !important;
      padding: 4px 6px 4px 12px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      color: #a3a3a3 !important;
      background: transparent !important;
      border: 0 !important;
      border-left: 1px solid rgba(255,255,255,0.12) !important;
      border-radius: 0 !important;
      gap: 5px !important;
      transition: color 0.15s ease !important;
    }
    html.tenant-sionbarberia .info-strip #quienesSomosBtn.qs-btn:hover { color: #ffffff !important; }
    html.tenant-sionbarberia .info-strip #quienesSomosBtn.qs-btn i {
      color: currentColor !important;
      font-size: 12px !important;
    }
    /* Íconos por defecto del strip: plata neutro */
    .tenant-sionbarberia .info-strip i.ph-fill { color: rgba(255,255,255,0.70) !important; }

    /* ── Barra de progreso ("PASO X DE 4") ── */
    .tenant-sionbarberia #progressTrack { background-color: #1c1c1e !important; }
    .tenant-sionbarberia #progressBar {
      background: linear-gradient(90deg, #6b6b70, #d4d4d8, #fafafa) !important;
      box-shadow: 0 0 10px rgba(255,255,255,0.28) !important;
    }
    .tenant-sionbarberia #stepIndicatorText {
      color: #fafafa !important;
      text-shadow: none !important;
      letter-spacing: 0.14em !important;
      font-weight: 800 !important;
    }
    .tenant-sionbarberia #progressPercentage { color: rgba(255,255,255,0.5) !important; }

    /* ── Píldoras de categoría ── */
    .tenant-sionbarberia .category-pill {
      background: #0a0a0a !important;
      border: 1px solid #2e2e32 !important;
      color: #e8e8ea !important;
      transition: all 0.25s ease !important;
    }
    .tenant-sionbarberia .category-pill:hover { border-color: #8a8a90 !important; }
    .tenant-sionbarberia .category-pill.border-neon {
      background: #1b1b1e !important;
      border: 1px solid #fafafa !important;
      color: #ffffff !important;
      box-shadow: 0 0 12px rgba(255,255,255,0.18) !important;
    }
    .tenant-sionbarberia .category-pill.text-neon { color: #fafafa !important; }

    /* ── Tarjetas de servicio ── */
    .tenant-sionbarberia .service-option {
      background: #101012 !important;
      border: 1px solid #29292d !important;
      transition: all 0.25s ease !important;
    }
    .tenant-sionbarberia .service-option:hover {
      border-color: #d4d4d8 !important;
      box-shadow: 0 0 18px rgba(255,255,255,0.12) !important;
    }
    .tenant-sionbarberia .service-option.border-neon {
      border-color: #fafafa !important;
      background: #17171a !important;
      box-shadow: 0 0 16px rgba(255,255,255,0.16) !important;
    }
    .tenant-sionbarberia .service-option.bg-brand-neon\/10 {
      background-color: rgba(255,255,255,0.06) !important;
    }

    /* ── Barbero / día / hora seleccionados: blanco puro ── */
    .tenant-sionbarberia .barber-option.border-neon,
    .tenant-sionbarberia .day-btn.border-neon,
    .tenant-sionbarberia .time-pill.border-neon {
      border-color: #fafafa !important;
      box-shadow: 0 0 12px rgba(255,255,255,0.16) !important;
    }
    .tenant-sionbarberia .barber-option.bg-brand-neon\/10 {
      background-color: rgba(255,255,255,0.06) !important;
    }
    .tenant-sionbarberia .text-brand-neon { color: #fafafa !important; }

    /* ── Títulos de sección sin glow de neón ── */
    .tenant-sionbarberia h2.text-neon,
    .tenant-sionbarberia .text-neon {
      color: #ffffff !important;
      text-shadow: none !important;
    }

    /* ── Club banner + footer: tarjetas grafito con borde hairline ── */
    .tenant-sionbarberia #clubBanner a {
      background: #111113 !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      border-radius: 1rem !important;
      color: #ffffff !important;
      box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
    }
    .tenant-sionbarberia #clubBanner .club-icon-wrap {
      background: rgba(255,255,255,0.05) !important;
      border-color: rgba(255,255,255,0.12) !important;
      color: #ffffff !important;
    }
    .tenant-sionbarberia #footerContact > .rounded-2xl,
    .tenant-sionbarberia #footerContact > div {
      background: #111113 !important;
      border: 1px solid rgba(255,255,255,0.07) !important;
      border-radius: 1rem !important;
    }
    .tenant-sionbarberia #footerContact p.uppercase { color: #9ca3af !important; }
    .tenant-sionbarberia #footerContact .w-10.h-10.rounded-xl {
      background: rgba(255,255,255,0.06) !important;
      border-color: rgba(255,255,255,0.16) !important;
    }
    .tenant-sionbarberia #footerContact i.ph-fill { color: #e5e7eb !important; }
    .tenant-sionbarberia #shopHorarioGrid span.rounded-full {
      background: #d4d4d8 !important;
      opacity: 0.6 !important;
    }

    /* ── Recap de selección + precio ── */
    .tenant-sionbarberia #selectionRecap span {
      background: rgba(255,255,255,0.05) !important;
      border-color: rgba(255,255,255,0.1) !important;
      color: #b4b4ba !important;
    }
    .tenant-sionbarberia #summaryPrice { color: #ffffff !important; }

    /* ── Sticky CTA: botón blanco sobre barra vidrio ── */
    .tenant-sionbarberia #btnContinueBar {
      background: rgba(10,10,10,0.94) !important;
      border-top: 1px solid rgba(255,255,255,0.1) !important;
      backdrop-filter: blur(24px) !important;
      -webkit-backdrop-filter: blur(24px) !important;
    }
    .tenant-sionbarberia #btnContinue {
      background-color: #fafafa !important;
      color: #0a0a0a !important;
      font-weight: 800 !important;
      letter-spacing: 0.03em !important;
      box-shadow: 0 2px 20px rgba(255,255,255,0.15) !important;
    }

    /* ══════════════════════════════════════════════════════════
       EL BARBERO MODERNO (tenant elbarberomoderno) — SILVER & PURE DARK
       Tema propio, sin alias. Paleta:
         Fondo:      #080808 (negro profundo)
         Acento:     #C0C0C0 / #E0E0E0 (plata brillante)
         Bordes:     #2C2C2C / #333333 (gris acero) · activo #C0C0C0
         Texto:      #FFFFFF puro
    ══════════════════════════════════════════════════════════ */
    .tenant-elbarberomoderno {
      --accent:   #C0C0C0;
      --accent-r: 192; --accent-g: 192; --accent-b: 192;
      --neon-clr: #E0E0E0;
      --neon-r:   224; --neon-g: 224; --neon-b: 224;
      --body-bg:  #080808;
      --gold:     #E0E0E0;
      --gold-dim: rgba(224,224,224,0.35);
    }
    /* ═══ Sedes en el hero (SHOP.sedesEnHero) ═══
       El selector de sucursal vive en el hero en vez de ser el paso 0: la
       sede es lo primero que se decide, y cada una trae su foto. Va sobre el
       overlay oscuro de cualquier tema, así que el blanco es seguro. Cuando
       el cliente avanza del paso 1 queda solo la sede elegida, como rótulo:
       cambiarla a mitad de la reserva dejaría un barbero de otra sede. */
    .sede-hero { width: 100%; max-width: 420px; margin-top: 18px; }
    .sede-hero-intro {
      font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
      color: rgba(255,255,255,.55); margin: 0 0 8px;
    }
    .sede-hero-track {
      display: flex; gap: 4px; padding: 4px; border-radius: 999px;
      background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .sede-hero-op {
      flex: 1 1 0; min-width: 0; padding: 9px 8px; border-radius: 999px;
      font-size: 12px; font-weight: 700; line-height: 1.15; color: rgba(255,255,255,.72);
      transition: background-color .2s, color .2s;
    }
    .sede-hero-op[aria-selected="true"] { background: #fff; color: #080808; }
    .sede-hero-op:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .sede-hero-dir {
      margin: 10px 0 0; font-size: 11px; line-height: 1.45; text-align: center;
      color: rgba(255,255,255,.78);
    }
    .sede-hero-dir i { margin-right: 4px; vertical-align: -1px; }
    body:not([data-step="1"]) .sede-hero-intro { display: none; }
    body:not([data-step="1"]) .sede-hero-track { display: inline-flex; }
    body:not([data-step="1"]) .sede-hero-op { pointer-events: none; padding: 7px 16px; }
    body:not([data-step="1"]) .sede-hero-op:not([aria-selected="true"]) { display: none; }
    .booking-hero[data-sede] { transition: background-image .45s ease; }

    /* ═══ War Studio — capa "Póster Tipográfico" sobre el alias ═══
       warstudio reutiliza Silver & Pure Dark (elbarberomoderno) vía
       _themeAlias. Su lenguaje visual real (historias/grid de @warstudio.cl):
       condensadas GIGANTES en mayúsculas blanco sobre negro con grano de
       papel, líneas de subrayado bajo los títulos, grises neutros y la firma
       "WAR" cromada. Esta capa lo replica: Bebas Neue (ya cargada) en
       títulos, regla que crece bajo cada heading, grano sutil en el fondo,
       píldora activa INVERTIDA (blanco/negro, como sus stickers de stories)
       y sheen metálico en el CTA. Doble clase obligatoria para ganarle en
       especificidad al bloque del alias (ver Oren/Aura).
       Espejo obligatorio: accentMap de barbero.html. */
    .tenant-warstudio.tenant-elbarberomoderno .booking-hero {
      background-image: url('/warstudio/banner.webp') !important;
      background-position: center 35% !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .booking-hero-overlay {
      background: linear-gradient(180deg,
        rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.40) 40%, rgba(8,8,8,0.96) 100%) !important;
    }

    /* Grano de papel (mismo espíritu que sus fondos negros texturizados).
       feTurbulence inline: cero requests; textura, no ruido. */
    .tenant-warstudio.tenant-elbarberomoderno body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
    }

    /* ── Keyframes del show ── */
    @keyframes wsTrackIn {
      0%   { opacity: 0; letter-spacing: 0.55em; filter: blur(5px); }
      100% { opacity: 1; letter-spacing: 0.06em; filter: blur(0); }
    }
    @keyframes wsRuleGrow {
      0%   { transform: scaleX(0); }
      100% { transform: scaleX(1); }
    }
    @keyframes wsRise {
      0%   { opacity: 0; transform: translateY(16px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes wsSheen {
      0%, 55% { transform: translateX(-130%) skewX(-18deg); }
      85%, 100% { transform: translateX(230%) skewX(-18deg); }
    }
    @keyframes wsChrome {
      0%   { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    @keyframes wsRingPulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(224,224,224,0.35), 0 0 18px rgba(224,224,224,0.18), 0 0 40px rgba(0,0,0,0.8); }
      50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 0 30px rgba(224,224,224,0.40), 0 0 40px rgba(0,0,0,0.8); }
    }

    /* Nota: #shopNombre queda oculto por el alias (el logo circular YA es el
       wordmark "WAR STUDIO"); el tipo gigante lo ponen los títulos de paso. */
    .tenant-warstudio.tenant-elbarberomoderno .gold-divider {
      background: #ffffff !important;
      height: 2px !important;
      width: 72px !important;
      box-shadow: none !important;
      transform-origin: left center;
      animation: wsRuleGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
    }
    .tenant-warstudio.tenant-elbarberomoderno #shopLogo {
      animation: wsRingPulse 3.6s ease-in-out infinite;
    }

    /* ── Títulos de paso: el look "NUESTRO HORARIO" ── */
    .tenant-warstudio.tenant-elbarberomoderno h2.text-neon {
      font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
      font-size: 2.6rem !important;
      font-weight: 400 !important;
      text-transform: uppercase;
      letter-spacing: 0.04em !important;
      line-height: 0.95 !important;
      color: #ffffff !important;
      text-shadow: none !important;
      animation: wsRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .tenant-warstudio.tenant-elbarberomoderno #stepIndicatorText {
      color: #E0E0E0 !important;
      letter-spacing: 0.22em !important;
    }

    /* ── Categorías: rótulo condensado + regla bajo el título ── */
    .tenant-warstudio.tenant-elbarberomoderno .cat-title {
      font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
      font-size: 1.35rem !important;
      letter-spacing: 0.10em !important;
      color: #ffffff !important;
      display: inline-block;
      border-bottom: 2px solid rgba(255,255,255,0.85);
      padding-bottom: 2px;
    }

    /* Píldora activa INVERTIDA: blanco pleno + texto negro (sus stickers) */
    .tenant-warstudio.tenant-elbarberomoderno .category-pill {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
      font-size: 1.02rem !important;
      transition: transform 0.25s ease, background 0.25s ease !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .category-pill:active { transform: scale(0.96); }
    .tenant-warstudio.tenant-elbarberomoderno .category-pill.border-neon {
      background: #ffffff !important;
      border-color: #ffffff !important;
      color: #080808 !important;
      box-shadow: 0 0 18px rgba(255,255,255,0.28) !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .category-pill.text-neon { color: #080808 !important; }

    /* ── Entrada en cascada de tarjetas (servicios y barberos) ── */
    .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option,
    .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option {
      animation: wsRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option:nth-child(2),
    .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option:nth-child(2) { animation-delay: 0.06s; }
    .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option:nth-child(3),
    .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option:nth-child(3) { animation-delay: 0.12s; }
    .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option:nth-child(4),
    .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option:nth-child(4) { animation-delay: 0.18s; }
    .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option:nth-child(5),
    .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option:nth-child(5) { animation-delay: 0.24s; }
    .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option:nth-child(6),
    .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option:nth-child(6) { animation-delay: 0.30s; }
    .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option:nth-child(n+7),
    .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option:nth-child(n+7) { animation-delay: 0.36s; }

    /* Nombre de servicio/barbero en condensada (aguanta sus nombres largos) */
    .tenant-warstudio.tenant-elbarberomoderno .service-option .svc-name,
    .tenant-warstudio.tenant-elbarberomoderno .barber-option .barber-name {
      font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
      font-size: 1.28rem !important;
      letter-spacing: 0.045em !important;
      font-weight: 400 !important;
      line-height: 1.02 !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .service-option:hover,
    .tenant-warstudio.tenant-elbarberomoderno .barber-option:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,0.55) !important;
      transition: transform 0.25s ease, border-color 0.25s ease;
    }

    /* ── CTA: placa metálica con sheen que barre cada ciclo ── */
    .tenant-warstudio.tenant-elbarberomoderno #btnContinue {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #ffffff 0%, #dcdcdc 100%) !important;
      color: #080808 !important;
      font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
      font-size: 1.35rem !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase;
    }
    .tenant-warstudio.tenant-elbarberomoderno #btnContinue::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 40%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,0.9), transparent);
      animation: wsSheen 3.2s ease-in-out infinite;
      pointer-events: none;
    }
    .tenant-warstudio.tenant-elbarberomoderno #btnContinue:disabled,
    .tenant-warstudio.tenant-elbarberomoderno #btnContinue[disabled] {
      background: rgba(224,224,224,0.12) !important;
      color: rgba(255,255,255,0.35) !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno #btnContinue:disabled::after { display: none; }

    /* ── Strip "asesoría gratis" (elemento #wsAsesoriaStrip del paso 1) ──
       Nace oculto para TODOS los tenants; solo warstudio lo enciende. El
       dato es real: sus descripciones de AgendaPro incluyen la asesoría. */
    #wsAsesoriaStrip { display: none; }
    .tenant-warstudio.tenant-elbarberomoderno #wsAsesoriaStrip {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: -8px 0 20px;
      padding: 12px 16px;
      border: 1px solid rgba(255,255,255,0.35);
      border-left: 3px solid #ffffff;
      background: rgba(255,255,255,0.05);
      animation: wsRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    }
    .tenant-warstudio.tenant-elbarberomoderno #wsAsesoriaStrip i {
      color: #ffffff;
      font-size: 1.15rem;
      flex-shrink: 0;
    }
    .tenant-warstudio.tenant-elbarberomoderno #wsAsesoriaStrip span {
      font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
      font-size: 1.12rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.82);
      line-height: 1.1;
    }
    .tenant-warstudio.tenant-elbarberomoderno #wsAsesoriaStrip b {
      color: #ffffff;
      font-weight: 400;
    }

    /* Radios de selección en plata (heredaban el dorado de Elegance) */
    .tenant-warstudio.tenant-elbarberomoderno .svc-radio {
      border-color: rgba(224,224,224,0.40) !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .service-option.border-neon .svc-radio,
    .tenant-warstudio.tenant-elbarberomoderno .barber-option.border-neon .svc-radio,
    .tenant-warstudio.tenant-elbarberomoderno .svc-radio-checked {
      background: #ffffff !important;
      border-color: #ffffff !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .service-option.border-neon .svc-check,
    .tenant-warstudio.tenant-elbarberomoderno .barber-option.border-neon .svc-check {
      color: #080808 !important;
    }
    /* El paso 2 usa su propio circulito (.barber-radio, no .svc-radio) */
    .tenant-warstudio.tenant-elbarberomoderno .barber-radio {
      border-color: rgba(224,224,224,0.40) !important;
      background: transparent !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .barber-option.border-neon .barber-radio {
      background: #ffffff !important;
      border-color: #ffffff !important;
    }
    .tenant-warstudio.tenant-elbarberomoderno .barber-option.border-neon .barber-check {
      color: #080808 !important;
    }

    /* ── Barra de progreso: acero pulido en movimiento ── */
    .tenant-warstudio.tenant-elbarberomoderno #progressBar {
      background: linear-gradient(90deg, #9a9a9a, #ffffff, #c9c9c9, #ffffff) !important;
      background-size: 220% 100% !important;
      box-shadow: 0 0 10px rgba(255,255,255,0.35) !important;
      animation: wsChrome 3.5s linear infinite;
    }

    /* Accesibilidad: el show se apaga con prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      .tenant-warstudio.tenant-elbarberomoderno #shopNombre,
      .tenant-warstudio.tenant-elbarberomoderno .gold-divider,
      .tenant-warstudio.tenant-elbarberomoderno #shopLogo,
      .tenant-warstudio.tenant-elbarberomoderno h2.text-neon,
      .tenant-warstudio.tenant-elbarberomoderno #servicesGrid .service-option,
      .tenant-warstudio.tenant-elbarberomoderno #barberosGrid .barber-option,
      .tenant-warstudio.tenant-elbarberomoderno #btnContinue::after,
      .tenant-warstudio.tenant-elbarberomoderno #progressBar {
        animation: none !important;
      }
    }

    .tenant-elbarberomoderno body {
      background-color: #080808 !important;
      color: #ffffff !important;
    }

    /* ── Hero: foto de la estación con overlay negro elegante ── */
    .tenant-elbarberomoderno .booking-hero {
      background-image: url('/elbarberomoderno/barbero1.webp') !important;
      background-size: cover !important;
      background-position: center 35% !important;
      background-repeat: no-repeat !important;
      background-color: #080808 !important;
      aspect-ratio: auto !important;
      min-height: 340px !important;
      height: auto !important;
    }
    .tenant-elbarberomoderno .booking-hero-overlay {
      background: rgba(0,0,0,0.65) !important;
    }

    /* Logo oficial (monograma BM plateado) como protagonista sobre la foto.
       El logo ya trae el nombre → ocultamos el texto #shopNombre para no duplicar. */
    .tenant-elbarberomoderno #heroLogoArea {
      display: flex !important;
      margin-bottom: 14px !important;
    }
    .tenant-elbarberomoderno .hero-logo-ring {
      width: 168px !important; height: 168px !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      overflow: visible !important;
      box-shadow: none !important;
    }
    /* El archivo del logo trae un fondo oscuro CUADRADO horneado, y el emblema
       interior es un círculo con margen. Con border-radius:0 se veían los
       bordes del cuadrado recortados sobre la foto del hero; al 50% se recorta
       solo el fondo sobrante y queda como un medallón redondo. */
    .tenant-elbarberomoderno #shopLogo {
      object-fit: contain !important;
      border-radius: 50% !important;
      filter: drop-shadow(0 10px 28px rgba(0,0,0,0.7));
    }
    .tenant-elbarberomoderno #shopNombre { display: none !important; }
    .tenant-elbarberomoderno .gold-divider {
      display: block !important;
      background: linear-gradient(90deg, transparent, rgba(224,224,224,0.55), transparent) !important;
    }
    .tenant-elbarberomoderno .booking-hero p:has(#shopSlogan) { display: block !important; }
    .tenant-elbarberomoderno #shopSlogan,
    .tenant-elbarberomoderno #shopSlogan span {
      color: rgba(255,255,255,0.78) !important;
    }

    /* ── Info-strip: negro con borde sutil ── */
    html.tenant-elbarberomoderno .info-strip,
    html.tenant-elbarberomoderno .info-strip[style] {
      background: linear-gradient(135deg, #0e0e0e 0%, #141414 50%, #0c0c0c 100%) !important;
      border-bottom-color: rgba(255,255,255,0.08) !important;
    }

    /* ── Barra de progreso ("PASO X DE 4") ── */
    .tenant-elbarberomoderno #progressTrack {
      background-color: #1F1F1F !important;
    }
    .tenant-elbarberomoderno #progressBar {
      background: linear-gradient(90deg, #8A8A8A, #C0C0C0, #E0E0E0) !important;
      box-shadow: 0 0 10px rgba(192,192,192,0.35) !important;
    }
    .tenant-elbarberomoderno #stepIndicatorText {
      color: #E0E0E0 !important;
      text-shadow: none !important;
      letter-spacing: 0.14em !important;
      font-weight: 800 !important;
    }
    .tenant-elbarberomoderno #progressPercentage {
      color: rgba(255,255,255,0.55) !important;
    }

    /* ── Píldoras de categoría (Todos, Cortes, Barba, Combos) ── */
    .tenant-elbarberomoderno .category-pill {
      background: #080808 !important;
      border: 1px solid #333333 !important;
      color: #ffffff !important;
      transition: all 0.25s ease !important;
    }
    .tenant-elbarberomoderno .category-pill:hover {
      border-color: #8A8A8A !important;
      color: #ffffff !important;
    }
    .tenant-elbarberomoderno .category-pill.border-neon {
      background: #1F1F1F !important;
      border: 1px solid #C0C0C0 !important;
      color: #ffffff !important;
      box-shadow: 0 0 10px rgba(192,192,192,0.22) !important;
    }
    .tenant-elbarberomoderno .category-pill.text-neon { color: #E0E0E0 !important; }

    /* ── Tarjetas de servicios ── */
    .tenant-elbarberomoderno .service-option {
      background: #080808 !important;
      border: 1px solid #2C2C2C !important;
      transition: all 0.25s ease !important;
    }
    .tenant-elbarberomoderno .service-option:hover {
      border-color: #C0C0C0 !important;
      box-shadow: 0 0 18px rgba(192,192,192,0.18) !important;
    }
    .tenant-elbarberomoderno .service-option.border-neon {
      border-color: #C0C0C0 !important;
      background: #131313 !important;
      box-shadow: 0 0 14px rgba(192,192,192,0.22) !important;
    }
    .tenant-elbarberomoderno .service-option.bg-brand-neon\/10 {
      background-color: rgba(192,192,192,0.08) !important;
    }

    /* ── Tarjetas de barbero (Paso 2) — borde plata en vez de dorado ── */
    .tenant-elbarberomoderno .barber-option.border-neon {
      border-color: #C0C0C0 !important;
      box-shadow: 0 0 12px rgba(192,192,192,0.20) !important;
    }
    .tenant-elbarberomoderno .barber-option.bg-brand-neon\/10 {
      background-color: rgba(192,192,192,0.08) !important;
    }
    .tenant-elbarberomoderno .barber-option .text-brand-neon,
    .tenant-elbarberomoderno .text-brand-neon { color: #E0E0E0 !important; }
    /* Días/hora seleccionadas: mismo tratamiento plata */
    .tenant-elbarberomoderno .day-btn.border-neon,
    .tenant-elbarberomoderno .time-pill.border-neon {
      border-color: #C0C0C0 !important;
      box-shadow: 0 0 10px rgba(192,192,192,0.20) !important;
    }

    /* ── Títulos de sección ── */
    .tenant-elbarberomoderno h2.text-neon,
    .tenant-elbarberomoderno .text-neon {
      color: #ffffff !important;
      text-shadow: none !important;
    }

    /* ── Footer info card (Ubicación / Horario) — labels en plata, icono plata ── */
    .tenant-elbarberomoderno #footerContact p.uppercase {
      color: #A0A0A0 !important;
    }
    .tenant-elbarberomoderno #footerContact .w-10.h-10.rounded-xl {
      background: rgba(224,224,224,0.08) !important;
      border-color: rgba(224,224,224,0.22) !important;
    }
    .tenant-elbarberomoderno #footerContact i.ph-fill { color: #E0E0E0 !important; }
    /* Bullet del grid de horarios */
    .tenant-elbarberomoderno #shopHorarioGrid span.rounded-full { background: #C0C0C0 !important; opacity: 0.6 !important; }

    /* ── Info-strip (bajo el hero) — ícono clock/mapa en plata también ── */
    .tenant-elbarberomoderno .info-strip i.ph-fill { color: rgba(224,224,224,0.7) !important; }

    /* ── Sticky bottom bar (botón Continuar plateado) ── */
    .tenant-elbarberomoderno #btnContinueBar {
      background: rgba(8,8,8,0.94) !important;
      border-top: 1px solid rgba(224,224,224,0.10) !important;
      backdrop-filter: blur(24px) !important;
      -webkit-backdrop-filter: blur(24px) !important;
    }
    .tenant-elbarberomoderno #btnContinue {
      background-color: #E0E0E0 !important;
      color: #000000 !important;
      font-weight: 800 !important;
      letter-spacing: 0.03em !important;
      box-shadow: 0 2px 20px rgba(224,224,224,0.16) !important;
      transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
    }
    .tenant-elbarberomoderno #btnContinue:hover,
    .tenant-elbarberomoderno #btnContinue:not(:disabled):active {
      background-color: #ffffff !important;
      box-shadow: 0 4px 28px rgba(255,255,255,0.28) !important;
    }
    .tenant-elbarberomoderno #btnContinue:disabled,
    .tenant-elbarberomoderno #btnContinue[disabled] {
      background: rgba(224,224,224,0.14) !important;
      color: rgba(255,255,255,0.32) !important;
      box-shadow: none !important;
    }

    /* Botón Continuar/Confirmar: blanco premium (override del dorado base #D4AF37) */
    .tenant-sionbarberia #btnContinue {
      background-color: #FAFAFA !important;
      color: #0a0a0a !important;
      box-shadow: 0 2px 20px rgba(255,255,255,0.12) !important;
    }
    .tenant-sionbarberia #btnContinue:hover,
    .tenant-sionbarberia #btnContinue:not(:disabled):active {
      background-color: #ffffff !important;
      box-shadow: 0 4px 28px rgba(255,255,255,0.22) !important;
    }

    /* Info-strip compacta: definida arriba (bloque tenant sionbarberia). */
    :is(.tenant-aura,.tenant-latincaribe) .hero-logo-ring {
      border: 2.5px solid #ffffff !important;
      box-shadow: 0 0 20px rgba(156,163,175,0.25), 0 0 0 1px rgba(255,255,255,0.15) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #shopNombre {
      font-weight: 800 !important;
      color: #ffffff !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #shopSlogan,
    :is(.tenant-aura,.tenant-latincaribe) #shopSlogan span {
      color: rgba(255,255,255,0.70) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .gold-divider {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent) !important;
    }

    /* ── Hero Animations (Aura only) ── */
    @keyframes aura-logo-reveal {
      from { opacity: 0; transform: scale(0.82) translateY(12px); filter: blur(10px); }
      to   { opacity: 1; transform: scale(1)    translateY(0);     filter: blur(0);   }
    }
    @keyframes aura-ring-glow {
      0%, 100% {
        box-shadow: 0 0 20px rgba(156,163,175,0.25), 0 0 0 1px rgba(255,255,255,0.15);
      }
      50% {
        box-shadow: 0 0 44px rgba(156,163,175,0.55), 0 0 0 2px rgba(255,255,255,0.35),
                    0 0 70px rgba(156,163,175,0.18);
      }
    }
    @keyframes aura-fade-up {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes aura-slogan-appear {
      from { opacity: 0; transform: translateY(8px); letter-spacing: 0.35em; }
      to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.25em; }
    }
    @keyframes aura-text-glow {
      0%, 100% {
        text-shadow: 0 0 8px rgba(156,163,175,0.1);
        color: rgba(255,255,255,0.70);
      }
      50% {
        text-shadow: 0 0 18px rgba(156,163,175,0.85), 0 0 28px rgba(156,163,175,0.4);
        color: rgba(255,255,255,0.95);
      }
    }

    /* Logo area: emerge desde abajo con blur */
    :is(.tenant-aura,.tenant-latincaribe) #heroLogoArea {
      animation: aura-logo-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    /* Ring: pulso de brillo continuo, arranca cuando termina el reveal */
    :is(.tenant-aura,.tenant-latincaribe) .hero-logo-ring {
      animation: aura-ring-glow 3.5s ease-in-out 1.1s infinite;
    }
    /* Nombre del local: slide-up con delay */
    :is(.tenant-aura,.tenant-latincaribe) #shopNombre {
      animation: aura-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
    }
    /* Divisor: fade suave */
    :is(.tenant-aura,.tenant-latincaribe) .gold-divider {
      animation: aura-fade-up 0.5s ease-out 0.52s both;
    }
    /* Slogan: letter-spacing se cierra al entrar, luego pulsa con un aura celeste */
    :is(.tenant-aura,.tenant-latincaribe) #shopSlogan {
      display: inline-block;
      animation: aura-slogan-appear 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both,
                 aura-text-glow 3.5s ease-in-out 1.4s infinite;
    }

    /* ── Info Strip ── */
    :is(.tenant-aura,.tenant-latincaribe) .info-strip {
      background: #111827 !important;
      border-bottom-color: rgba(156,163,175,0.12) !important;
      /* 3-item layout: 2-col grid, WhatsApp spans second row */
      display: grid !important;
      grid-template-columns: 1fr 1fr;
    }
    :is(.tenant-aura,.tenant-latincaribe) .info-strip a,
    :is(.tenant-aura,.tenant-latincaribe) .info-strip > div {
      color: #D4D4D8 !important;
      border-color: rgba(156,163,175,0.15) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .info-strip i {
      color: #9CA3AF !important;
    }
    /* Row 1 bottom divider */
    :is(.tenant-aura,.tenant-latincaribe) #heroInfoAddr,
    :is(.tenant-aura,.tenant-latincaribe) .info-strip > div:first-of-type {
      border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    /* ── Back Button ── círculo claro frost + flecha oscura (alto contraste sobre
       el hero, antes flecha oscura sobre círculo navy = casi invisible) y bajado
       con safe-area para que no se corte contra el borde superior / notch. */
    :is(.tenant-aura,.tenant-latincaribe) button[onclick="goBack()"] {
      top: calc(env(safe-area-inset-top, 0px) + 2.75rem) !important;
      background: rgba(255,255,255,0.94) !important;
      border-color: rgba(0,0,0,0.06) !important;
      box-shadow: 0 4px 14px rgba(0,0,0,0.32) !important;
      -webkit-backdrop-filter: blur(6px) !important;
      backdrop-filter: blur(6px) !important;
    }
    /* .booking-hero en el selector para ganarle al override de .text-white del hero. */
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero button[onclick="goBack()"] i { color: #18181B !important; }

    /* ── Progress / Stepper ── */
    :is(.tenant-aura,.tenant-latincaribe) #progressBar {
      background: #374151 !important;
      box-shadow: none !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #progressTrack {
      background-color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #stepIndicatorText {
      color: #18181B !important;
      text-shadow: none !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #progressPercentage {
      color: #6B7280 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #selectionRecap {
      color: #8E9399 !important;
    }

    /* ── Section Headings ── */
    :is(.tenant-aura,.tenant-latincaribe) .text-neon {
      text-shadow: none !important;
      color: #18181B !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) h2.text-neon {
      color: #18181B !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .text-brand-neon\/60,
    :is(.tenant-aura,.tenant-latincaribe) .text-brand-neon\/80 {
      color: #18181B !important;
    }

    /* ── Generic text overrides for light bg ── */
    :is(.tenant-aura,.tenant-latincaribe) .text-gray-500 { color: #8E9399 !important; }
    /* ...menos en la grilla vacia del paso 2. Ese aviso ("No hay barberos
       disponibles en este momento") se escribe con .text-gray-500 desde JS, y
       #8E9399 sobre el gris #F9FAFB de la tarjeta da 2.96:1 — por debajo del
       minimo de 3:1. Lo pillo check-contraste.mjs en Faith Barber el
       25-08-2026: el local se entera de que no hay hora justo cuando el texto
       que se lo dice es el que no se ve. Toma el mismo #64748b (4.6:1) que ya
       usa el aviso hermano de "servicios cruzados", tres lineas mas abajo en
       el mismo render. */
    :is(.tenant-aura,.tenant-latincaribe) #barberosGrid .text-gray-500 { color: #64748b !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-gray-600 { color: #71717A !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-gray-700 { color: #52525B !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white\/50 { color: rgba(24,24,27,0.50) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white\/30 { color: rgba(24,24,27,0.30) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white\/60 { color: rgba(24,24,27,0.60) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white\/70 { color: rgba(24,24,27,0.70) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white\/25 { color: rgba(24,24,27,0.25) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white\/15 { color: rgba(24,24,27,0.15) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .text-white\/20 { color: rgba(24,24,27,0.20) !important; }

    /* ══ Modal de recomendaciones (upsell) — theming ══════════════════
       Base oscura (todos los tenants) + variante clara para aura/latin-
       caribe: su remap global de .text-white ya oscurece los textos del
       modal, así que aquí solo aclaramos sheet, cards, radio y CTAs para
       que el conjunto quede legible sobre blanco. */
    .upsell-item {
      background: rgba(255,255,255,0.01);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .upsell-item.sel {
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.85);
    }
    .upsell-radio {
      width: 1rem; height: 1rem; border-radius: 9999px; flex: none;
      border: 1px solid rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .upsell-item.sel .upsell-radio { background: #ffffff; border-color: #ffffff; }
    .upsell-check { display: none; font-size: 8px; font-weight: 900; color: #000000; line-height: 1; }
    .upsell-item.sel .upsell-check { display: block; }

    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) #upsell-sheet {
      background: #ffffff !important;
      border-color: rgba(24,24,27,0.12) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) #upsell-sheet .upsell-glow {
      background: radial-gradient(ellipse 60% 60% at 50% -10%, rgba(24,24,27,0.05) 0%, transparent 80%) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) .upsell-item {
      background: #fafafa;
      border-color: rgba(24,24,27,0.14);
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) .upsell-item.sel {
      background: rgba(24,24,27,0.05);
      border-color: #18181B;
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) .upsell-radio { border-color: rgba(24,24,27,0.3); }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) .upsell-item.sel .upsell-radio {
      background: #18181B; border-color: #18181B;
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) .upsell-check { color: #ffffff; }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) #upsell-sheet .upsell-cta {
      background: #18181B !important;
      color: #ffffff !important;
      box-shadow: 0 0 20px rgba(24,24,27,0.15) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) #upsell-sheet .upsell-cta-ghost {
      border-color: rgba(24,24,27,0.15) !important;
      color: rgba(24,24,27,0.55) !important;
    }
    /* Renacer: los acentos zinc del modal pasan a su azul marino de marca. */
    .tenant-renacer .upsell-item.sel {
      background: rgba(30,44,85,0.05);
      border-color: #1E2C55;
    }
    .tenant-renacer .upsell-item.sel .upsell-radio { background: #1E2C55; border-color: #1E2C55; }
    .tenant-renacer #upsell-sheet .upsell-cta {
      background: #1E2C55 !important;
      box-shadow: 0 0 20px rgba(30,44,85,0.18) !important;
    }

    /* ── Preserve white text inside navy/dark areas ── */
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero .text-white,
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero .text-white\/70,
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero .text-white\/50 {
      color: inherit !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #shopNombre { color: #ffffff !important; }
    :is(.tenant-aura,.tenant-latincaribe) #heroBadgeRating { color: #ffffff !important; }
    :is(.tenant-aura,.tenant-latincaribe) #heroBadgeCount { color: rgba(255,255,255,0.55) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero p,
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero span {
      color: rgba(255,255,255,0.70) !important;
    }

    /* ── Service Option Cards ── */
    :is(.tenant-aura,.tenant-latincaribe) .service-option {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .svc-name { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .price-tag { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .duration-tag { color: #8E9399 !important; }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .icon-svg {
      color: #9CA3AF !important;
      filter: none !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .icon-bg {
      background: rgba(156,163,175,0.08) !important;
      border-color: rgba(156,163,175,0.20) !important;
    }
    /* Selected state */
    :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon {
      border-color: #374151 !important;
      background: rgba(17,24,39,0.04) !important;
      box-shadow: 0 0 0 1px rgba(55,65,81,0.25), 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option.bg-brand-neon\/10 {
      background: rgba(17,24,39,0.04) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon .icon-bg {
      background: rgba(17,24,39,0.08) !important;
      border-color: rgba(55,65,81,0.35) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon .icon-svg {
      color: #111827 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon .price-tag { color: #111827 !important; }

    /* ── Category Pills ── */
    :is(.tenant-aura,.tenant-latincaribe) .category-pill {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
      color: #8E9399 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .category-pill:hover {
      border-color: #9CA3AF !important;
      color: #9CA3AF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .category-pill.border-neon,
    :is(.tenant-aura,.tenant-latincaribe) .category-pill.text-neon {
      border-color: #374151 !important;
      color: #111827 !important;
      background: rgba(17,24,39,0.06) !important;
      box-shadow: none !important;
      font-weight: 700 !important;
    }

    /* ── Barber Option Cards ── */
    :is(.tenant-aura,.tenant-latincaribe) .barber-option {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .barber-option .barber-name { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) .barber-option .text-brand-neon { color: #9CA3AF !important; }
    /* Selected state */
    :is(.tenant-aura,.tenant-latincaribe) .barber-option.border-neon {
      border-color: #374151 !important;
      background: rgba(17,24,39,0.04) !important;
      box-shadow: 0 0 0 1px rgba(55,65,81,0.25), 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .barber-option.bg-brand-neon\/10 {
      background: rgba(17,24,39,0.04) !important;
    }
    /* Radio circle — overrides inline gold color set by JS */
    :is(.tenant-aura,.tenant-latincaribe) .barber-radio {
      border-color: #D4D4D8 !important;
      background: transparent !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .barber-option.border-neon .barber-radio {
      border-color: #1F2937 !important;
      background: #1F2937 !important;
    }

    /* ── Shimmer en tarjeta seleccionada (Elegance + Aura) ── */
    @keyframes aura-card-shimmer {
      from { transform: translateX(-120%); }
      to   { transform: translateX(280%); }
    }
    .tenant-elegance .service-option.border-neon::after,
    .tenant-elegance .barber-option.border-neon::after,
    :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon::after,
    :is(.tenant-aura,.tenant-latincaribe) .barber-option.border-neon::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-120%);
      animation: aura-card-shimmer 0.65s cubic-bezier(0.25,0.46,0.45,0.94) 1;
      pointer-events: none;
    }
    .tenant-elegance .service-option.border-neon::after,
    .tenant-elegance .barber-option.border-neon::after {
      background: linear-gradient(105deg,
        transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon::after,
    :is(.tenant-aura,.tenant-latincaribe) .barber-option.border-neon::after {
      background: linear-gradient(105deg,
        transparent 30%, rgba(156,163,175,0.30) 50%, transparent 70%);
    }

    /* ── Elegance: animaciones exclusivas ── */
    @keyframes elegance-hero-glow {
      0%, 100% { opacity: 0.45; }
      50%       { opacity: 0.90; }
    }
    @keyframes elegance-progress-sweep {
      from { left: -40%; }
      to   { left: 140%; }
    }
    @keyframes elegance-success-glow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(201,168,76,0.18); }
      50%       { box-shadow: 0 0 22px rgba(201,168,76,0.28), 0 0 0 1px rgba(201,168,76,0.34); }
    }
    .tenant-elegance .booking-hero::after {
      content: '';
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 80%; height: 55%;
      background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.20) 0%, transparent 68%);
      pointer-events: none;
      animation: elegance-hero-glow 5s ease-in-out infinite;
      z-index: 1;
    }
    .tenant-elegance #progressTrack {
      position: relative;
      overflow: hidden;
    }
    .tenant-elegance #progressTrack::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: -40%;
      width: 35%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
      animation: elegance-progress-sweep 3.5s ease-in-out infinite;
      pointer-events: none;
    }
    .tenant-elegance #success-state .bg-\[\#0a0a0d\] {
      animation: elegance-success-glow 3.5s ease-in-out infinite;
    }

    /* ── Day Buttons — replaced below ── */

    /* ── Time Pills ── */
    :is(.tenant-aura,.tenant-latincaribe) .time-pill {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
      color: #18181B !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .time-pill:not([data-sel]):hover {
      background: rgba(156,163,175,0.06) !important;
      border-color: #9CA3AF !important;
      color: #111827 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .time-pill.bg-neon,
    :is(.tenant-aura,.tenant-latincaribe) .time-pill[data-sel] {
      background: #9CA3AF !important;
      border-color: #9CA3AF !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 8px rgba(156,163,175,0.30) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) .slot-pill-busy {
      background: rgba(220,38,38,0.06) !important;
      border-color: rgba(220,38,38,0.18) !important;
      color: rgba(220,38,38,0.40) !important;
    }

    /* ── Day Cards (step 3) ── */
    :is(.tenant-aura,.tenant-latincaribe) .day-btn {
      background: #FFFFFF !important;
      border-color: #E4E4E7 !important;
      box-shadow: none !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .day-btn span { color: #6B7280 !important; }
    :is(.tenant-aura,.tenant-latincaribe) .day-btn .day-num { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) .day-btn .dot { background: transparent !important; box-shadow: none !important; }
    :is(.tenant-aura,.tenant-latincaribe) .day-btn.active {
      background: #111827 !important;
      border-color: #111827 !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.20) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .day-btn.active span { color: rgba(255,255,255,0.70) !important; }
    :is(.tenant-aura,.tenant-latincaribe) .day-btn.active .day-num { color: #ffffff !important; }
    :is(.tenant-aura,.tenant-latincaribe) .day-btn.active .dot { background: transparent !important; box-shadow: none !important; }

    /* ── Main CTA Button ── */
    :is(.tenant-aura,.tenant-latincaribe) #btnContinue {
      background: #000000 !important;
      color: #ffffff !important;
      font-weight: 800 !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important;
      letter-spacing: 0.01em;
    }
    :is(.tenant-aura,.tenant-latincaribe) #btnContinue:hover {
      background: #111827 !important;
      color: #ffffff !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #btnContinueBar {
      background: rgba(249,250,251,0.88) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border-top: 1px solid #D4D4D8 !important;
    }

    /* ── Step 4: Form Inputs ── */
    :is(.tenant-aura,.tenant-latincaribe) #step4 label {
      color: #8E9399 !important;
    }
    /* Los <select> van EN LA MISMA regla que los inputs, no aparte. El HTML
       les pone las mismas clases oscuras (`bg-[#0a0a0d] text-white`) confiando
       en que el tema del local las pise, y esta regla —la que pinta los campos
       en los locales claros— solo nombraba `input`. Resultado: en Punto Pilates
       el RUT salia blanco y los dos selectores de cumpleano salian NEGROS, con
       el desplegable negro sobre texto negro. Los <option> se pintan aparte
       porque el sistema operativo los dibuja con su propio fondo. */
    :is(.tenant-aura,.tenant-latincaribe) #step4 input[type="text"],
    :is(.tenant-aura,.tenant-latincaribe) #step4 input[type="tel"],
    :is(.tenant-aura,.tenant-latincaribe) #step4 input[type="email"],
    :is(.tenant-aura,.tenant-latincaribe) #step4 select {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
      color: #18181B !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4 select option {
      background: #FFFFFF;
      color: #18181B;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4 input::placeholder {
      color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4 input:focus,
    :is(.tenant-aura,.tenant-latincaribe) #step4 select:focus {
      border-color: #9CA3AF !important;
      box-shadow: 0 0 0 3px rgba(156,163,175,0.15) !important;
    }

    /* ── Step 4: Summary Card ── */
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl {
      background: #FFFFFF !important;
      border: 1px solid #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl .text-white\/30 { color: #8E9399 !important; }
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl .text-white { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl .text-gray-500 { color: #8E9399 !important; }
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl .bg-white\/5,
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl .h-px {
      background: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl i {
      color: #9CA3AF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4 .mt-6.rounded-2xl #summaryTime {
      color: #111827 !important;
    }

    /* ── Club Banner ── */
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner > a {
      background: #FFFFFF !important;
      border: 1px solid #D4D4D8 !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner .club-icon-wrap {
      background: rgba(156,163,175,0.10) !important;
      border-color: rgba(156,163,175,0.25) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner i.ph-fill { color: #9CA3AF !important; filter: none !important; }
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner p.text-white { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner i.ph-bold { color: rgba(24,24,27,0.25) !important; }

    /* ── Club Fidelidad Step 4 ── */
    @keyframes auraStripeShimmer {
      0%   { background-position: -100% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes auraCtaGlow {
      0%, 100% { box-shadow: 0 4px 16px rgba(24,24,27,0.18); }
      50%       { box-shadow: 0 4px 28px rgba(24,24,27,0.36); }
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4AuthContainer .aura-club-stripe {
      background: linear-gradient(90deg,#D4D4D8 0%,#E5E7EB 30%,#9CA3AF 50%,#E5E7EB 70%,#D4D4D8 100%);
      background-size: 200% 100%;
      animation: auraStripeShimmer 3s ease-in-out infinite;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4AuthContainer .aura-cta-btn {
      animation: auraCtaGlow 2.5s ease-in-out infinite;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4AuthContainer .rounded-2xl {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
      box-shadow: 0 2px 20px rgba(0,0,0,0.07) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #step4AuthContainer div[style*="background:rgba(0,0,0"] {
      background: rgba(156,163,175,0.04) !important;
    }

    /* ── Footer Contact ── */
    :is(.tenant-aura,.tenant-latincaribe) #footerContact .rounded-2xl {
      background: #FFFFFF !important;
      border: 1px solid #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact .w-10 {
      background: rgba(156,163,175,0.10) !important;
      border-color: rgba(156,163,175,0.25) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact .w-10 i { color: #9CA3AF !important; }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact p[class*="uppercase"] { color: #9CA3AF !important; }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact p.text-white { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact .h-px { background: #D4D4D8 !important; }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact a.active\:bg-white\/5:active {
      background: rgba(156,163,175,0.06) !important;
    }

    /* ── Extras Section ── */
    :is(.tenant-aura,.tenant-latincaribe) #extrasSection p[class*="uppercase"] { color: #9CA3AF !important; }

    /* ── Success State ── */
    :is(.tenant-aura,.tenant-latincaribe) #success-state h2 { color: #111827 !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state .text-neon { color: #111827 !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state .bg-brand-neon\/10 { background: rgba(156,163,175,0.10) !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state svg.text-neon { color: #9CA3AF !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state #successSummaryDate { color: #9CA3AF !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state .bg-\[\#0a0a0d\] {
      background: #FFFFFF !important;
      border-color: rgba(156,163,175,0.30) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #success-state .text-brand-text { color: #18181B !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state .text-brand-neon\/80 { color: #52525B !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state a[class*="instagram"] { color: #8E9399 !important; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state button { color: #9CA3AF !important; }

    /* ── Aura: Sello animado en success ────────────────────────── */
    @keyframes aura-stamp-in {
      0%   { opacity: 0; transform: scale(2.2) rotate(-10deg); filter: blur(8px); }
      55%  { opacity: 1; filter: blur(0); }
      72%  { transform: scale(0.87) rotate(-1deg); }
      88%  { transform: scale(1.06) rotate(-4deg); }
      100% { transform: scale(1.00) rotate(-3deg); opacity: 1; }
    }
    @keyframes aura-stamp-ring {
      0%   { transform: scale(0.86); opacity: 0.65; }
      100% { transform: scale(1.65); opacity: 0; }
    }
    @keyframes aura-stamp-shine {
      0%   { transform: translateX(-130%) skewX(-18deg); }
      100% { transform: translateX(280%) skewX(-18deg); }
    }

    /* Ocultar checkmark SVG por defecto para Aura */
    :is(.tenant-aura,.tenant-latincaribe) #success-state > div.w-24 { display: none !important; }

    /* Mostrar wrapper del sello solo en Aura */
    #aura-stamp-wrap { display: none; }
    :is(.tenant-aura,.tenant-latincaribe) #success-state #aura-stamp-wrap { display: flex !important; }

    /* Animaciones aplicadas a hijos del stamp wrapper */
    #aura-stamp-wrap .aura-stamp-logo {
      animation: aura-stamp-in 0.68s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    #aura-stamp-wrap .aura-stamp-ring-1 {
      animation: aura-stamp-ring 0.80s ease-out 0.32s both;
    }
    #aura-stamp-wrap .aura-stamp-ring-2 {
      animation: aura-stamp-ring 1.05s ease-out 0.44s both;
    }
    #aura-stamp-wrap .aura-stamp-shine {
      animation: aura-stamp-shine 0.65s ease-in-out 0.50s both;
    }

    /* ── Toast Validation ── */
    :is(.tenant-aura,.tenant-latincaribe) #toastValidation {
      background: #FFFFFF !important;
      border: 1px solid rgba(220,38,38,0.35) !important;
      color: #DC2626 !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
    }

    /* ── Animations: club sparks, badge glow ── */
    :is(.tenant-aura,.tenant-latincaribe) .club-spark {
      background: #9CA3AF !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       AURA — Light Mode: Purge ALL Dark Mode Remnants
       Override hardcoded dark backgrounds, Tailwind brand-* tokens,
       and inline style colors that assume dark backgrounds.
       ═══════════════════════════════════════════════════════════════ */

    /* ── Hardcoded dark backgrounds → white/light ── */
    :is(.tenant-aura,.tenant-latincaribe) .bg-\[#0a0a0d\],
    :is(.tenant-aura,.tenant-latincaribe) .bg-\[#111115\],
    :is(.tenant-aura,.tenant-latincaribe) .bg-\[#0a0807\] {
      background-color: #FFFFFF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .bg-white\/5 {
      background-color: rgba(156,163,175,0.06) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .bg-white\/3 {
      background-color: rgba(156,163,175,0.04) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .bg-brand-neon\/5,
    :is(.tenant-aura,.tenant-latincaribe) .bg-brand-neon\/10 {
      background-color: rgba(156,163,175,0.06) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .bg-brand-neon\/0 {
      background-color: transparent !important;
    }

    /* ── Tailwind brand-text (was #f8fafc white) → satin-black ── */
    :is(.tenant-aura,.tenant-latincaribe) .text-brand-text {
      color: #18181B !important;
    }

    /* ── Tailwind brand-neon (was #ffffff) → context-aware ── */
    :is(.tenant-aura,.tenant-latincaribe) .text-brand-neon,
    :is(.tenant-aura,.tenant-latincaribe) .text-brand-neon\/60 {
      color: #9CA3AF !important;
    }

    /* ── Brand accent borders → stainless steel or sky ── */
    :is(.tenant-aura,.tenant-latincaribe) .border-brand-accent\/20 {
      border-color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .border-brand-accent\/10 {
      border-color: rgba(212,212,216,0.60) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .border-neon\/30 {
      border-color: rgba(156,163,175,0.30) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .border-neon\/50 {
      border-color: rgba(156,163,175,0.50) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .border-white\/10 {
      border-color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .border-white\/5 {
      border-color: rgba(212,212,216,0.40) !important;
    }

    /* ── Category section headers (Step 1 - "Cortes", "Barba") ── */
    :is(.tenant-aura,.tenant-latincaribe) .cat-title {
      color: #18181B !important;
      border-left-color: #9CA3AF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .cat-sep,
    :is(.tenant-aura,.tenant-latincaribe) .sep-ornamental {
      display: none !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .category-section h3 {
      color: #18181B !important;
    }

    /* ── Service card row layout text fix ── */
    :is(.tenant-aura,.tenant-latincaribe) .service-option .svc-name {
      color: #18181B !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .text-brand-neon {
      color: #9CA3AF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .text-gray-200 {
      color: #18181B !important;
    }

    /* ── Service card: icon-bg hardcoded bg-[#111115] ── */
    :is(.tenant-aura,.tenant-latincaribe) .service-option .icon-bg {
      background: rgba(156,163,175,0.08) !important;
      border-color: rgba(156,163,175,0.20) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option .icon-svg {
      color: #9CA3AF !important;
      filter: none !important;
    }

    /* ── Radio circles on service cards ── */
    :is(.tenant-aura,.tenant-latincaribe) .svc-radio {
      border-color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon .svc-radio {
      border-color: #1F2937 !important;
      background: #1F2937 !important;
      box-shadow: inset 0 0 0 2px #FFFFFF !important;
    }

    /* ── Hover shadows on card layout → light shadow ── */
    :is(.tenant-aura,.tenant-latincaribe) .service-option:hover {
      box-shadow: 0 2px 10px rgba(156,163,175,0.12) !important;
      border-color: rgba(156,163,175,0.40) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .barber-option:hover {
      box-shadow: 0 2px 10px rgba(156,163,175,0.12) !important;
      border-color: rgba(156,163,175,0.40) !important;
    }

    /* ── group-hover overlay on grid service cards ── */
    :is(.tenant-aura,.tenant-latincaribe) .service-option .group-hover\:bg-brand-neon\/5 {
      background-color: rgba(156,163,175,0.04) !important;
    }

    /* ── Calendar month heading & "Horas Disponibles" (Step 3) ── */
    /* infinity comparte el tema claro: sin este override, #currentMonthText
       ("Julio 2026") y el h3 "Horas Disponibles" quedan gris claro invisible. */
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) #currentMonthText {
      color: #18181B !important;
    }
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) #step3 h3 {
      color: #18181B !important;
    }

    /* ── Barber card hardcoded inline bg-[#0a0807] ── */
    :is(.tenant-aura,.tenant-latincaribe) .barber-option .icon-bg,
    :is(.tenant-aura,.tenant-latincaribe) .barber-option .barber-avatar {
      border-color: rgba(156,163,175,0.20) !important;
    }

    /* ── Skeleton loader ── */
    :is(.tenant-aura,.tenant-latincaribe,.tenant-infinity,.tenant-renacer) #servicesSkeleton > div {
      background: rgba(156,163,175,0.08) !important;
    }

    /* ── Selection recap chips ── */
    :is(.tenant-aura,.tenant-latincaribe) #selectionRecap span {
      color: #8E9399 !important;
    }

    /* ── Step 4: summary card inline bg-[#0a0807] ── */
    :is(.tenant-aura,.tenant-latincaribe) #step4 div[style*="background:#0a0807"],
    :is(.tenant-aura,.tenant-latincaribe) #step4 div[style*="background:#0a0a0d"] {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
    }

    /* ── Success state: summary card bg-[#0a0a0d] ── */
    :is(.tenant-aura,.tenant-latincaribe) #success-state .bg-\[\#0a0a0d\] {
      background: #FFFFFF !important;
      border-color: rgba(156,163,175,0.30) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
    }

    /* ── Footer contact: inline style bg-[#0a0807] ── */
    :is(.tenant-aura,.tenant-latincaribe) #footerContact div[style*="background:#0a0807"] {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact div[style*="background:rgba(255,255,255,0.06)"],
    :is(.tenant-aura,.tenant-latincaribe) #footerContact .h-px[style] {
      background: #D4D4D8 !important;
    }

    /* ── Footer contact: icon bg inline styles ── */
    :is(.tenant-aura,.tenant-latincaribe) #footerContact div[style*="background:rgba(201,168,76"] {
      background: rgba(156,163,175,0.10) !important;
      border-color: rgba(156,163,175,0.25) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact i[style*="color:var(--gold)"] {
      color: #9CA3AF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #footerContact p[style*="color:rgba(201,168,76"] {
      color: #9CA3AF !important;
    }

    /* ── Info strip: inline icon colors ── */
    :is(.tenant-aura,.tenant-latincaribe) .info-strip i[style] {
      color: #9CA3AF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .info-strip[style] {
      background: #111827 !important;
    }

    /* ── Club banner inline styles ── */
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner a[style] {
      background: #FFFFFF !important;
      border-color: #D4D4D8 !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner div[style*="background:rgba(var(--accent"] {
      background: rgba(156,163,175,0.10) !important;
      border-color: rgba(156,163,175,0.25) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #clubBanner p[style*="color:rgba(var(--accent"] {
      color: #9CA3AF !important;
    }

    /* ── Drop shadows that emit white glow (dark mode artifact) ── */
    :is(.tenant-aura,.tenant-latincaribe) .drop-shadow-\[0_0_5px_rgba\(255\,255\,255\,0\.35\)\] {
      filter: none !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) .hover\:shadow-\[0_0_15px_rgba\(255\,255\,255\,0\.15\)\]:hover {
      box-shadow: 0 2px 10px rgba(156,163,175,0.12) !important;
    }

    /* ── Breathing room — paso 1 ── */
    :is(.tenant-aura,.tenant-latincaribe) #aura-sobre-wrap {
      padding-top: 24px !important;
      padding-bottom: 12px !important;
    }
    /* Progress section: más aire sobre y bajo la barra.

       `div:has(#progressBar)` matchea TODO div que contenga la barra, no solo
       su sección: medido en producción son TRES — `#progressTrack` (el padre
       de la barra), la sección `px-6 mt-6 mb-6` (la que se quería) y
       `#bookingFrame`, que es la columna entera de la agenda.

       Ese tercero es el que Ignacio reportó el 16-09-2026 en Templo y en Aura:
       28px de margen sobre el frame, que en teléfono —donde el frame va a
       sangre— se ven como una franja del fondo de la página flotando encima de
       la foto del local, sin nada que la justifique. En escritorio el frame es
       una tarjeta con borde y ese aire sí tiene sentido, pero el margen se lo
       da su propia regla de ≥768px, no esta.

       Se excluye el frame y NADA más. El match accidental sobre
       `#progressTrack` se deja como está a propósito: corregir el selector a
       `div:has(> #progressTrack)` sería lo correcto de raíz, pero le quitaría
       28px al espacio entre el rótulo del paso y la barra en dos tenants
       vivos, y eso es un cambio de diseño que nadie pidió. Queda anotado. */
    :is(.tenant-aura,.tenant-latincaribe) div:has(#progressBar):not(#bookingFrame) {
      margin-top: 28px !important;
      margin-bottom: 28px !important;
    }
    /* Título "¿Qué servicio buscas?" — más espacio bajo */
    :is(.tenant-aura,.tenant-latincaribe) #step1 > h2:first-child {
      margin-bottom: 28px !important;
    }

    /* ── "Agendar otra hora" link in success ── */
    :is(.tenant-aura,.tenant-latincaribe) #success-state .text-brand-neon\/60 {
      color: #9CA3AF !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #success-state .hover\:drop-shadow-\[0_0_5px_rgba\(255\,255\,255\,0\.4\)\]:hover {
      filter: none !important;
    }


    /* ═══════════════════════════════════════════════════════════════
       AURA — "Quiénes Somos" (Urban-Industrial Style)
       ═══════════════════════════════════════════════════════════════ */
    #aura-sobre-wrap { display: none; }
    :is(.tenant-aura,.tenant-latincaribe) #aura-sobre-wrap { display: block !important; }
    #aura-sobre-btn, #aura-suscrip-btn, #aura-info-btn {
      width: 100%;
      padding: 10px 16px;
      border-radius: 12px;
      border: 1px solid rgba(156,163,175,0.25);
      background: rgba(156,163,175,0.06);
      color: #18181B;
      font-family: system-ui, sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    #aura-sobre-btn:active, #aura-suscrip-btn:active, #aura-info-btn:active {
      background: rgba(156,163,175,0.14);
      border-color: rgba(156,163,175,0.45);
    }

    /* ── Aura — "Información" image modal ── */
    #aura-info-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(17,24,39,0.50);
      backdrop-filter: blur(6px);
      align-items: flex-end;
      opacity: 0;
      transition: opacity 0.28s ease;
    }
    #aura-info-modal.open    { display: flex; }
    #aura-info-modal.visible { opacity: 1; }
    #aura-info-sheet {
      width: 100%;
      max-height: 88vh;
      overflow-y: auto;
      background: #F9FAFB;
      border-radius: 24px 24px 0 0;
      border-top: 2px solid #9CA3AF;
      padding: 0 16px 32px;
      transform: translateY(100%);
      transition: transform 0.48s cubic-bezier(0.16,1,0.3,1);
    }
    #aura-info-modal.visible #aura-info-sheet { transform: translateY(0); }
    #aura-info-handle {
      width: 36px; height: 4px;
      background: #D4D4D8;
      border-radius: 2px;
      margin: 14px auto 18px;
    }
    #aura-info-title {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 700;
      color: #18181B;
      margin: 0 8px 16px;
      line-height: 1.25;
      text-align: center;
    }
    #aura-info-sheet .aura-info-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 14px;
      margin-bottom: 14px;
      border: 1px solid rgba(156,163,175,0.25);
    }
    #aura-info-close {
      margin-top: 10px;
      width: 100%;
      padding: 13px;
      border-radius: 12px;
      background: #9CA3AF;
      color: #18181B;
      font-family: system-ui, sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    #aura-info-close:hover  { background: #6B7280; color: #ffffff; }
    #aura-info-close:active { opacity: 0.85; }

    #aura-sobre-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(17,24,39,0.50);
      backdrop-filter: blur(6px);
      align-items: flex-end;
      opacity: 0;
      transition: opacity 0.28s ease;
    }
    #aura-sobre-modal.open    { display: flex; }
    #aura-sobre-modal.visible { opacity: 1; }
    #aura-sobre-sheet {
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;
      background: #F9FAFB;
      border-radius: 24px 24px 0 0;
      border-top: 2px solid #9CA3AF;
      padding: 0 24px 40px;
      transform: translateY(100%);
      transition: transform 0.48s cubic-bezier(0.16,1,0.3,1);
    }
    #aura-sobre-modal.visible #aura-sobre-sheet { transform: translateY(0); }
    #aura-sobre-handle {
      width: 36px; height: 4px;
      background: #D4D4D8;
      border-radius: 2px;
      margin: 14px auto 20px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.32s ease, transform 0.32s ease;
      transition-delay: 0.20s;
    }
    #aura-sobre-modal.visible #aura-sobre-handle { opacity: 1; transform: translateY(0); }
    #aura-sobre-title {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      font-weight: 700;
      color: #18181B;
      margin-bottom: 16px;
      line-height: 1.25;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.36s ease, transform 0.36s ease;
      transition-delay: 0.26s;
    }
    #aura-sobre-modal.visible #aura-sobre-title { opacity: 1; transform: translateY(0); }
    #aura-sobre-body {
      font-family: system-ui, sans-serif;
      font-size: 14.5px;
      line-height: 1.75;
      color: rgba(24,24,27,0.72);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.38s ease, transform 0.38s ease;
      transition-delay: 0.34s;
    }
    #aura-sobre-modal.visible #aura-sobre-body { opacity: 1; transform: translateY(0); }
    #aura-sobre-close {
      margin-top: 24px;
      width: 100%;
      padding: 13px;
      border-radius: 12px;
      background: #9CA3AF;
      color: #18181B;
      font-family: system-ui, sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
      transition-delay: 0.42s;
    }
    #aura-sobre-modal.visible #aura-sobre-close { opacity: 1; transform: translateY(0); }
    #aura-sobre-close:hover  { background: #6B7280; color: #ffffff; }
    #aura-sobre-close:active { opacity: 0.85; }

    /* Ocultar botón en pasos subsiguientes para un flujo limpio */
    body[data-step="2"] #aura-sobre-wrap,
    body[data-step="3"] #aura-sobre-wrap,
    body[data-step="4"] #aura-sobre-wrap {
      display: none !important;
    }

    /* ── Slim Header (pasos 2-4 Aura) ── */
    /* ── Slim Header (Aura — steps 2-4) ── */
    #aura-slim-header {
      display: none;
      position: sticky;
      top: 0;
      z-index: 50;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      background: #FFFFFF;
      border-bottom: 1px solid #E4E4E7;
      width: 100%;
      box-sizing: border-box;
    }

    /* 3-column zones */
    .aura-slim-zone {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .aura-slim-zone--left  { min-width: 44px; justify-content: flex-start; }
    .aura-slim-zone--center {
      flex: 1;
      justify-content: center;
      gap: 8px;
      overflow: hidden;
    }
    .aura-slim-zone--right { min-width: 44px; justify-content: flex-end; }

    /* Logo */
    #aura-slim-header img {
      width: 32px; height: 32px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    /* Text stack inside center */
    .aura-slim-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      overflow: hidden;
    }
    .aura-slim-name {
      font-size: 14px;
      font-weight: 800;
      color: #18181B;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .aura-slim-step {
      font-size: 11px;
      font-weight: 600;
      color: #6B7280;
      white-space: nowrap;
    }

    /* Back button — large tap area, no border */
    #aura-slim-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      margin-left: -6px;
      border-radius: 50%;
      background: transparent;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
      color: #111827;
    }
    #aura-slim-back:hover  { background: rgba(17,24,39,0.07); }
    #aura-slim-back:active { background: rgba(17,24,39,0.14); }
    #aura-slim-back i { font-size: 20px; color: #111827; }

    /* WhatsApp — slim header */
    #aura-slim-wa {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      margin-right: -6px;
      border-radius: 50%;
      color: #4B5563;
      flex-shrink: 0;
      text-decoration: none;
      transition: color 0.15s, background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    #aura-slim-wa i { font-size: 20px; }
    #aura-slim-wa:hover  { color: #111827; background: rgba(17,24,39,0.07); }
    #aura-slim-wa:active { opacity: 0.65; }

    :is(.tenant-aura,.tenant-latincaribe) body[data-step="2"] .booking-hero,
    :is(.tenant-aura,.tenant-latincaribe) body[data-step="3"] .booking-hero,
    :is(.tenant-aura,.tenant-latincaribe) body[data-step="4"] .booking-hero { display: none !important; }

    :is(.tenant-aura,.tenant-latincaribe) body[data-step="2"] .info-strip,
    :is(.tenant-aura,.tenant-latincaribe) body[data-step="3"] .info-strip,
    :is(.tenant-aura,.tenant-latincaribe) body[data-step="4"] .info-strip { display: none !important; }

    :is(.tenant-aura,.tenant-latincaribe) body[data-step="2"] #aura-slim-header,
    :is(.tenant-aura,.tenant-latincaribe) body[data-step="3"] #aura-slim-header,
    :is(.tenant-aura,.tenant-latincaribe) body[data-step="4"] #aura-slim-header { display: flex !important; }

    /* WhatsApp — info strip (Aura only) */
    #aura-info-wa {
      display: none !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #aura-info-wa {
      display: flex !important;
      grid-column: 1 / -1;
      border-left: none !important;
      border-top: 1px solid rgba(255,255,255,0.05) !important;
      justify-content: center !important;
      padding-top: 8px !important;
      padding-bottom: 8px !important;
      color: rgba(255,255,255,0.50);
      transition: color 0.15s;
      text-decoration: none;
    }
    :is(.tenant-aura,.tenant-latincaribe) #aura-info-wa:hover  { color: rgba(255,255,255,0.80); }
    :is(.tenant-aura,.tenant-latincaribe) #aura-info-wa:active { color: #ffffff; }

    /* ── Aura: Review cards (inline dark hardcoded en JS) ── */
    :is(.tenant-aura,.tenant-latincaribe) #reviewsGrid > div {
      background: #FFFFFF !important;
      border-color: rgba(0,0,0,0.07) !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #reviewsGrid > div * {
      color: #18181B !important;
    }
    /* Estrellas vacías: #3f3f46 (oscuro) → gris claro sobre fondo blanco */
    :is(.tenant-aura,.tenant-latincaribe) #reviewsGrid svg[fill="#3f3f46"] path {
      fill: #D1D5DB !important;
    }
    :is(.tenant-aura,.tenant-latincaribe) #reviewsSection .text-zinc-500 { color: #8E9399 !important; }
    :is(.tenant-aura,.tenant-latincaribe) #reviewsCtaBtn {
      border-color: rgba(0,0,0,0.10) !important;
      color: #71717A !important;
      background: rgba(156,163,175,0.04) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       MACHO'S BARBERSHOP — Modern Industrial Slate & Copper Orange
       Paleta: Slate (#090d16) · Copper Orange (#f97316) · Charcoal Surface (#111827)
       ═══════════════════════════════════════════════════════════════ */
    .tenant-machos {
      --accent:   #f97316;
      --accent-r: 249; --accent-g: 115; --accent-b: 22;
      --neon-clr: #f97316;
      --neon-r:   249; --neon-g: 115; --neon-b: 22;
      --body-bg:  #090d16;
    }
    .tenant-machos body {
      background-color: #090d16 !important;
      background-image:
        linear-gradient(rgba(249,115,22,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249,115,22,0.015) 1px, transparent 1px);
      background-size: 24px 24px !important;
    }

    /* Keyframes for micro-animations */
    @keyframes machos-float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-4px); }
    }
    @keyframes copper-glow {
      0%, 100% { box-shadow: 0 0 15px rgba(249,115,22,0.2); }
      50% { box-shadow: 0 0 30px rgba(249,115,22,0.5); }
    }

    /* Hero visual background mapping */
    /* 04-10-2026: fuera /machos_bg.webp. Era una imagen generada por IA de un
       local inventado ("MACHO'S BARBERSHOP · EST. 2016" en neón) presentada
       como su interior. Sin foto real del local, el hero va con su naranjo. */
    .tenant-machos .booking-hero {
      background-image: radial-gradient(120% 90% at 50% 0%, rgba(249,115,22,0.24) 0%, rgba(9,13,22,0) 62%), linear-gradient(180deg, #121826 0%, #090d16 100%) !important;
      background-size: cover !important;
      background-position: center 30% !important;
    }
    .tenant-machos .booking-hero-overlay {
      background: radial-gradient(circle at 50% 30%, rgba(249,115,22,0.06) 0%, rgba(9,13,22,0.7) 45%, rgba(9,13,22,0.98) 100%) !important;
    }

    /* Info strip */
    .tenant-machos .info-strip {
      background: rgba(17,24,39,0.95) !important;
      border-bottom-color: rgba(249,115,22,0.12) !important;
    }
    .tenant-machos .info-strip i {
      color: #f97316 !important;
      filter: drop-shadow(0 0 2px rgba(249,115,22,0.4)) !important;
    }
    .tenant-machos .info-strip a,
    .tenant-machos .info-strip > div {
      color: #e2e8f0 !important;
      border-color: rgba(249,115,22,0.08) !important;
    }

    /* Logo ring */
    .tenant-machos .hero-logo-ring {
      border: 2px solid #f97316 !important;
      box-shadow:
        0 0 0 1px rgba(249,115,22,0.2),
        0 0 25px rgba(249,115,22,0.35),
        0 0 45px rgba(0,0,0,0.85) !important;
    }

    /* Progress Bar */
    .tenant-machos #progressBar {
      background: linear-gradient(90deg, #ea580c, #f97316, #ea580c) !important;
      box-shadow: 0 0 12px rgba(249,115,22,0.7), 0 0 20px rgba(249,115,22,0.3) !important;
    }
    .tenant-machos #progressTrack { background-color: rgba(249,115,22,0.08) !important; }
    .tenant-machos #stepIndicatorText {
      color: #f97316 !important;
      text-shadow: 0 0 8px rgba(249,115,22,0.4) !important;
    }

    /* Category pills */
    .tenant-machos .category-pill {
      background: rgba(17,24,39,0.6) !important;
      border: 1px solid rgba(249,115,22,0.15) !important;
      color: #94a3b8 !important;
      transition: all 0.3s ease !important;
    }
    .tenant-machos .category-pill:hover {
      border-color: #f97316 !important;
      color: #f8fafc !important;
      transform: translateY(-2px) !important;
    }
    .tenant-machos .category-pill.border-neon {
      background: rgba(249,115,22,0.1) !important;
      border: 1px solid #f97316 !important;
      color: #f97316 !important;
      box-shadow: 0 0 12px rgba(249,115,22,0.25) !important;
    }
    .tenant-machos .category-pill.text-neon { color: #f97316 !important; }

    /* Step Heading */
    .tenant-machos h2.text-neon {
      color: #f8fafc !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      text-shadow: none !important;
    }

    /* Service cards */
    .tenant-machos .service-option {
      background: rgba(17,24,39,0.7) !important;
      border: 1px solid rgba(249,115,22,0.12) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tenant-machos .service-option:hover {
      border-color: rgba(249,115,22,0.45) !important;
      background: rgba(17,24,39,0.9) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
      transform: translateY(-2px) !important;
    }
    .tenant-machos .service-option.border-neon {
      border: 1px solid #f97316 !important;
      background: rgba(249,115,22,0.1) !important;
      box-shadow: 0 0 15px rgba(249,115,22,0.2) !important;
    }
    .tenant-machos .service-option .price-tag {
      color: #f97316 !important;
    }
    .tenant-machos .service-option .duration-tag {
      color: #94a3b8 !important;
    }

    /* Barber cards */
    .tenant-machos .barber-option {
      background: rgba(17,24,39,0.7) !important;
      border: 1px solid rgba(249,115,22,0.12) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .tenant-machos .barber-option:hover {
      border-color: rgba(249,115,22,0.45) !important;
      background: rgba(17,24,39,0.9) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
      transform: translateY(-2px) !important;
    }
    .tenant-machos .barber-option.border-neon {
      border: 1px solid #f97316 !important;
      background: rgba(249,115,22,0.1) !important;
      box-shadow: 0 0 15px rgba(249,115,22,0.2) !important;
    }
    .tenant-machos .text-brand-neon {
      color: #f97316 !important;
    }

    /* Day selection buttons */
    .tenant-machos .day-btn {
      background: rgba(17,24,39,0.6) !important;
      border: 1px solid rgba(249,115,22,0.12) !important;
      transition: all 0.2s ease !important;
    }
    .tenant-machos .day-btn:hover {
      border-color: rgba(249,115,22,0.4) !important;
      color: #ffffff !important;
    }
    .tenant-machos .day-btn.active,
    .tenant-machos .day-btn.border-neon {
      background: #f97316 !important;
      border-color: #f97316 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(249,115,22,0.35) !important;
    }

    /* Time pill buttons */
    .tenant-machos .time-pill {
      background: rgba(17,24,39,0.6) !important;
      border: 1px solid rgba(249,115,22,0.12) !important;
      color: #e2e8f0 !important;
    }
    .tenant-machos .time-pill.border-neon,
    .tenant-machos .time-pill[data-sel] {
      background: #f97316 !important;
      border-color: #f97316 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(249,115,22,0.35) !important;
    }

    /* Primary buttons */
    .tenant-machos #btnContinue {
      background: linear-gradient(135deg,#f97316,#ea580c) !important;
      color: #ffffff !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.05em !important;
      box-shadow: 0 4px 20px rgba(249,115,22,0.3) !important;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .tenant-machos #btnContinue:hover {
      box-shadow: 0 8px 30px rgba(249,115,22,0.5) !important;
      transform: translateY(-1px) !important;
    }
    .tenant-machos #btnContinueBar {
      background: rgba(9,13,22,0.9) !important;
      border-top-color: rgba(249,115,22,0.15) !important;
    }

    /* Inputs */
    .tenant-machos #clientName,
    .tenant-machos #clientPhone,
    .tenant-machos #clientEmail {
      background: rgba(17,24,39,0.8) !important;
      border-color: rgba(249,115,22,0.15) !important;
      color: #ffffff !important;
    }
    .tenant-machos #clientName:focus,
    .tenant-machos #clientPhone:focus,
    .tenant-machos #clientEmail:focus {
      border-color: #f97316 !important;
      box-shadow: 0 0 12px rgba(249,115,22,0.2) !important;
    }

    /* WhatsApp contact */
    .tenant-machos #waBtnLink {
      background: #25D366 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 15px rgba(37,211,102,0.3) !important;
    }

    /* Loyalty Club banner */
    .tenant-machos #clubBanner {
      background: rgba(17,24,39,0.7) !important;
      border: 1px solid rgba(249,115,22,0.15) !important;
    }
    .tenant-machos #clubBanner a {
      background: #f97316 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 15px rgba(249,115,22,0.3) !important;
    }

    /* Toast */
    .tenant-machos #toastValidation {
      background: #111827 !important;
      border: 1px solid rgba(239,68,68,0.4) !important;
      color: #ef4444 !important;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       INFINITY STUDIO — Monochrome Premium (Estricto B/N)
       Paleta: Blanco puro (#FFFFFF), gris claro (#FAFAFA/#F5F5F5),
       bordes (#E5E5E5), texto secundario (#555555), negro absoluto (#000000).
       Sin amarillo, dorado ni ámbar bajo ninguna circunstancia.
       ═══════════════════════════════════════════════════════════════ */
    .tenant-infinity {
      --accent:   #000000;
      --accent-r: 0; --accent-g: 0; --accent-b: 0;
      --neon-clr: #000000;
      --neon-r:   0; --neon-g:   0; --neon-b:   0;
      --body-bg:  #F4F4F5;

      /* Tokens Monochrome Premium — solo blanco/negro/grises */
      /* zinc-100. Va junto con .tenant-infinity body: si quedan distintos, lo
         que derive de la var se despega del fondo real de la página. */
      --brand-bg: #F4F4F5 !important;
      --brand-surface: #FFFFFF !important;
      --brand-surface-alt: #FFFFFF !important;
      --brand-primary: #000000 !important;
      --brand-accent: #555555 !important;
      --brand-text: #000000 !important;
      --brand-muted: #999999 !important;
      --brand-border: #E5E5E5 !important;
      --brand-glow: rgba(0, 0, 0, 0.05) !important;
      --brand-button-text: #FFFFFF !important;
      --brand-progress-track: #E5E5E5 !important;

      position: relative;
    }

    /* Intercepción de utilidades de color blanco de Tailwind: se mapean a
       negro con alpha para conservar la jerarquía tipográfica sin color. */
    .tenant-infinity .text-white\/50 { color: rgba(0, 0, 0, 0.5) !important; }
    .tenant-infinity .text-white\/40 { color: rgba(0, 0, 0, 0.4) !important; }
    .tenant-infinity .text-white\/30 { color: rgba(0, 0, 0, 0.3) !important; }
    .tenant-infinity .text-white\/20 { color: rgba(0, 0, 0, 0.2) !important; }
    .tenant-infinity .text-white\/10 { color: rgba(0, 0, 0, 0.1) !important; }
    .tenant-infinity .text-white\/70 { color: rgba(0, 0, 0, 0.7) !important; }
    /* Red de seguridad (#5 auditoría): .text-white SÓLIDO sin remapear → negro sobre
       las superficies claras de infinity. SIN !important a propósito: las reglas por
       id que fijan blanco donde corresponde (botón Continuar #btnContinue, pills
       seleccionadas con color inline) siguen ganando. */
    .tenant-infinity .text-white { color: #000000; }
    .tenant-infinity .text-white\/80 { color: rgba(0, 0, 0, 0.8) !important; }
    .tenant-infinity .text-white\/90 { color: rgba(0, 0, 0, 0.9) !important; }

    /* Las marcas de agua ∞ (dos glifos de 22rem/28rem en ::before/::after,
       animados en loop infinito) se apagaron a pedido del local: "el fondo
       distorsiona la información". Eran fijas y se movían todo el tiempo
       detrás de las tarjetas — a rgba(0,0,0,0.02) casi no se ven quietas,
       pero el movimiento continuo sí se percibe y cansa al leer.
       Se dejan las reglas (con content:none) y no se borra el keyframe por si
       el local las quiere de vuelta: revivirlas es cambiar esta línea. */
    .tenant-infinity::before,
    .tenant-infinity::after {
      content: none !important;
    }
    .tenant-infinity body {
      /* Gris de marca (zinc-100). Antes #FAFAFA: como las tarjetas están
         fijadas en #FFFFFF, el contraste era de 2 puntos y todo se leía plano
         — "el fondo distorsiona la información". Con zinc-100 la tarjeta
         blanca se despega del fondo y la jerarquía vuelve. */
      background-color: #F4F4F5 !important;
      background-image: none !important;
      color: #000000 !important;
      position: relative;
    }
    .tenant-infinity .booking-hero {
      background: #FFFFFF !important;
      border-bottom: 1px solid #E5E5E5 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-infinity .booking-hero-overlay {
      background: none !important;
    }
    .tenant-infinity #shopNombre {
      color: #000000 !important;
      text-shadow: none !important;
      font-weight: 900 !important;
    }
    .tenant-infinity #shopNombre::after {
      content: " ∞";
      font-weight: 300;
      color: rgba(0, 0, 0, 0.55);
      font-size: 2.2rem;
      vertical-align: middle;
      display: inline-block;
      animation: infinity-loop-spin 4s ease-in-out infinite !important;
      margin-left: 8px;
    }
    .tenant-infinity #shopSlogan {
      color: #555555 !important;
      letter-spacing: 0.25em !important;
      font-size: 10px !important;
    }
    .tenant-infinity button[onclick="goBack()"] {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      box-shadow: none !important;
    }
    .tenant-infinity button[onclick="goBack()"] i {
      color: #000000 !important;
    }
    .tenant-infinity #heroGoogleBadge {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      box-shadow: none !important;
    }
    .tenant-infinity #heroGoogleBadge span,
    .tenant-infinity #heroGoogleBadge .text-white {
      color: #000000 !important;
    }
    .tenant-infinity .info-strip {
      background: #FFFFFF !important;
      border-top: 1px solid #E5E5E5 !important;
      border-bottom: 1px solid #E5E5E5 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-infinity .info-strip i {
      color: #555555 !important;
    }
    .tenant-infinity .info-strip a,
    .tenant-infinity .info-strip > div {
      color: #000000 !important;
      font-weight: 600 !important;
    }
    .tenant-infinity .hero-logo-ring {
      background: #FFFFFF !important;
      border: 4px solid #FFFFFF !important;
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06) !important;
      animation: infinity-breathe 4s ease-in-out infinite !important;
    }
    .tenant-infinity #progressBar {
      background: #000000 !important;
      box-shadow: none !important;
      border: none !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .tenant-infinity #progressBar::after {
      content: none !important;
      display: none !important;
      animation: none !important;
    }
    .tenant-infinity #progressTrack {
      background-color: #E5E5E5 !important;
      border: none !important;
    }
    .tenant-infinity #stepIndicatorText {
      color: #555555 !important;
      font-weight: 700 !important;
      letter-spacing: 0.05em !important;
    }
    /* El % del paso lleva text-brand-neon/60 (blanco 60% literal del build
       de Tailwind) → invisible sobre blanco. */
    .tenant-infinity #progressPercentage { color: #8A8A8A !important; }
    /* ── Category Pills (Monochrome) ── */
    .tenant-infinity .category-pill {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      color: #555555 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
    }
    .tenant-infinity .category-pill:hover {
      background: #FFFFFF !important;
      border-color: #000000 !important;
      color: #000000 !important;
      box-shadow: none !important;
      transform: none !important;
    }
    .tenant-infinity .category-pill.border-neon,
    .tenant-infinity .category-pill.text-neon {
      border-color: #000000 !important;
      color: #FFFFFF !important;
      background: #000000 !important;
      box-shadow: none !important;
      font-weight: 700 !important;
      animation: none !important;
    }
    .tenant-infinity h2.text-neon {
      color: #000000 !important;
      text-shadow: none !important;
    }
    /* ── Service / Barber Option Cards (Monochrome) ── */
    .tenant-infinity .service-option,
    .tenant-infinity .barber-option {
      background: #FFFFFF !important;
      background-image: none !important;
      background-size: auto !important;
      border: 1px solid #E5E5E5 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      color: #000000 !important;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
      animation: none !important;
    }
    .tenant-infinity .service-option:hover,
    .tenant-infinity .barber-option:hover {
      background: #FFFFFF !important;
      background-image: none !important;
      box-shadow: none !important;
      border-color: #000000 !important;
      transform: none !important;
      animation: none !important;
    }
    .tenant-infinity .service-option.border-neon,
    .tenant-infinity .barber-option.border-neon {
      background: #FFFFFF !important;
      border: 2px solid #000000 !important;
      color: #000000 !important;
      box-shadow: none !important;
      animation: none !important;
    }
    .tenant-infinity .service-option.bg-brand-neon\/10,
    .tenant-infinity .barber-option.bg-brand-neon\/10 {
      background: #FFFFFF !important;
    }
    .tenant-infinity .service-option .svc-name { color: #000000 !important; }
    .tenant-infinity .service-option .price-tag {
      color: #000000 !important;
      font-weight: 700 !important;
    }
    .tenant-infinity .service-option.border-neon .price-tag { color: #000000 !important; }
    .tenant-infinity .service-option .duration-tag {
      color: #555555 !important;
      background: transparent !important;
      border: none !important;
    }
    .tenant-infinity .service-option .icon-bg {
      background: rgba(156,163,175,0.08) !important;
      border-color: rgba(156,163,175,0.20) !important;
    }
    .tenant-infinity .service-option .icon-svg {
      color: #555555 !important;
      filter: none !important;
    }
    .tenant-infinity .service-option.border-neon .icon-bg {
      background: rgba(17,24,39,0.08) !important;
      border-color: rgba(55,65,81,0.35) !important;
    }
    .tenant-infinity .service-option.border-neon .icon-svg { color: #111827 !important; }
    .tenant-infinity .service-option p,
    .tenant-infinity .service-option span,
    .tenant-infinity .service-option div {
      color: #000000 !important;
    }
    .tenant-infinity .svc-radio { border-color: #E5E5E5 !important; }
    .tenant-infinity .service-option.border-neon .svc-radio {
      border-color: #000000 !important;
      background: #000000 !important;
      box-shadow: inset 0 0 0 2px #FFFFFF !important;
    }
    .tenant-infinity .barber-option .barber-name { color: #000000 !important; }
    .tenant-infinity .barber-option .text-brand-neon { color: #555555 !important; }
    .tenant-infinity .barber-name,
    .tenant-infinity .barber-option p,
    .tenant-infinity .barber-option span {
      color: #000000 !important;
    }
    .tenant-infinity .barber-radio {
      border-color: #E5E5E5 !important;
      background: transparent !important;
    }
    .tenant-infinity .barber-option.border-neon .barber-radio {
      border-color: #000000 !important;
      background: #000000 !important;
    }
    .tenant-infinity .barber-option .icon-bg,
    .tenant-infinity .barber-option .barber-avatar {
      border-color: #E5E5E5 !important;
    }
    .tenant-infinity .text-brand-neon {
      color: #000000 !important;
      font-weight: 800 !important;
    }
    /* Badge "✦ Más solicitado" — versión light Infinity refinada.
       Antes: pill negro absoluto con texto blanco (agresivo sobre bg claro).
       Ahora: outline navy sutil con fondo navy 4%, texto navy sólido, y
       la estrella ✦ pasa a un tono amber para preservar el guiño de
       "destaque" sin gritar. */
    .tenant-infinity .service-option .bg-white\/6,
    .tenant-infinity .service-option .bg-violet-500\/10,
    .tenant-infinity .service-option .bg-black {
      background: rgba(17,24,39,0.04) !important;
      color: #111827 !important;
      border-color: rgba(17,24,39,0.20) !important;
    }
    .tenant-infinity .service-option .border-white\/15,
    .tenant-infinity .service-option .border-violet-500\/20,
    .tenant-infinity .service-option .border-black {
      border-color: rgba(17,24,39,0.20) !important;
    }
    .tenant-infinity .service-option .text-white\/85,
    .tenant-infinity .service-option .text-violet-400,
    .tenant-infinity .service-option .bg-black.text-white {
      color: #111827 !important;
    }
    /* Estrella ✦: primer carácter del span en amber para dar acento */
    .tenant-infinity .service-option span.inline-flex.rounded-full::first-letter {
      color: #b45309 !important;
    }
    /* Shimmer al seleccionar — sutil gris para no romper el monocromo */
    .tenant-infinity .service-option.border-neon::after,
    .tenant-infinity .barber-option.border-neon::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-120%);
      animation: aura-card-shimmer 0.65s cubic-bezier(0.25,0.46,0.45,0.94) 1;
      pointer-events: none;
      background: linear-gradient(105deg,
        transparent 30%, rgba(0,0,0,0.06) 50%, transparent 70%);
    }

    /* ═══════════════════════════════════════════════════════════════════
       AIRY & REFINED — Rediseño de bloques (Paso 1 servicios + Paso 2 barberos)
       Bordes sutiles, tarjetas blancas con shadow-sm, activo #FAFAFA,
       más aire (p-5), iconos minimalistas, tipografía editorial.
       ═══════════════════════════════════════════════════════════════════ */

    /* Contenedores de grilla — más aire lateral en móvil y gap-4 consistente */
    .tenant-infinity #servicesGrid,
    .tenant-infinity #barberosGrid {
      row-gap: 16px !important;
    }
    .tenant-infinity #barberosGrid {
      gap: 16px !important;
    }

    /* Cards base — shadow-sm inactivo, sin max-width (evita el efecto
       visual de bordes cortados que se veía como un "fade" lateral). */
    .tenant-infinity .service-option {
      padding: 12px 16px !important;
      width: 100% !important;
      background: #FFFFFF !important;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
      border-color: #E5E5E5 !important;
      transform: none !important;
    }
    /* Paso 2 — estilo idéntico al de Aura (limpio, sin bordes duros). */
    .tenant-infinity .barber-option {
      padding: 16px !important;
      width: 100% !important;
      background: #FFFFFF !important;
      border: 1px solid #D4D4D8 !important;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
      transform: none !important;
    }

    /* Estado activo — patrón Aura: navy suave con doble ring en shadow */
    .tenant-infinity .service-option.border-neon,
    .tenant-infinity .service-option.border-neon.border-2 {
      background: #FAFAFA !important;
      border: 1px solid #000000 !important;
      box-shadow: none !important;
      transform: none !important;
    }
    .tenant-infinity .barber-option.border-neon,
    .tenant-infinity .barber-option.border-neon.border-2 {
      background: rgba(17,24,39,0.04) !important;
      border: 1px solid #374151 !important;
      box-shadow: 0 0 0 1px rgba(55,65,81,0.25), 0 2px 8px rgba(0,0,0,0.06) !important;
      transform: none !important;
    }
    .tenant-infinity .service-option.bg-brand-neon\/10 {
      background: #FAFAFA !important;
    }
    .tenant-infinity .barber-option.bg-brand-neon\/10 {
      background: rgba(17,24,39,0.04) !important;
    }

    /* Hover — sutil, sin cambio de tamaño */
    .tenant-infinity .service-option:hover {
      border-color: #000000 !important;
      background: #FFFFFF !important;
    }
    .tenant-infinity .barber-option:hover {
      border-color: #9CA3AF !important;
      background: rgba(156,163,175,0.04) !important;
    }
    .tenant-infinity .service-option.border-neon:hover {
      background: #FAFAFA !important;
    }
    .tenant-infinity .barber-option.border-neon:hover {
      background: rgba(17,24,39,0.06) !important;
    }

    /* ── Servicios: icono minimalista (sin caja pesada, list row horizontal) ── */
    .tenant-infinity .service-option .icon-bg {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      width: 40px !important;
      height: 40px !important;
      margin-bottom: 0 !important;
    }
    .tenant-infinity .service-option .icon-svg {
      color: #111111 !important;
      font-size: 20px !important;
      filter: none !important;
      text-shadow: none !important;
      font-weight: 300 !important;
      transform: none !important;
    }
    .tenant-infinity .service-option.border-neon .icon-bg {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
    .tenant-infinity .service-option.border-neon .icon-svg {
      color: #000000 !important;
      transform: none !important;
    }
    /* Imagen personalizada del servicio — mantener redondel limpio */
    .tenant-infinity .service-option .icon-bg img {
      border-radius: 9999px !important;
      box-shadow: none !important;
    }

    /* ── Tipografía de servicios: IDÉNTICA a la de Aura (usan el mismo template
       _useRowLayout). Aura NO override tamaño/peso → usa el base (text-sm, bold,
       tracking-wide). Infinity solo override el COLOR, igual que Aura, para que
       el tamaño de letra calce exacto (antes 1.05rem se veía más grande). ── */
    .tenant-infinity .service-option .svc-name {
      color: #18181B !important;
    }
    /* Badge "✦ Más solicitado" del template de Aura es violeta → negro para infinity. */
    .tenant-infinity .service-option span.bg-violet-500\/10 {
      background: #000000 !important;
      border-color: #000000 !important;
      color: #FFFFFF !important;
    }
    .tenant-infinity .service-option .svc-desc {
      color: #555555 !important;
      font-weight: 400 !important;
      line-height: 1.35 !important;
    }
    /* Precio: mismo tamaño que Aura (base text-[13px] del template). Infinity solo
       override el color, igual que Aura — antes 1.125rem se veía mucho más grande. */
    .tenant-infinity .service-option .price-tag {
      color: #18181B !important;
    }
    .tenant-infinity .service-option .duration-tag {
      color: #666666 !important;
      font-weight: 400 !important;
      font-size: 11px !important;
      margin-top: 2px !important;
    }

    /* ── Radio de selección (svc-radio) — refinado ── */
    .tenant-infinity .service-option .svc-radio {
      border-color: #E5E5E5 !important;
      border-width: 1.5px !important;
      background: transparent !important;
    }
    .tenant-infinity .service-option.border-neon .svc-radio {
      background: #1F2937 !important;
      border-color: #1F2937 !important;
      box-shadow: inset 0 0 0 2px #FFFFFF !important;
    }
    /* Tarjeta de servicio seleccionada: elevación suave como Aura (no borde negro
       grueso). Va DESPUÉS del rule compartido service+barber → gana solo en servicios. */
    .tenant-infinity .service-option.border-neon {
      border: 1px solid #374151 !important;
      background: rgba(17,24,39,0.04) !important;
      box-shadow: 0 0 0 1px rgba(55,65,81,0.25), 0 2px 8px rgba(0,0,0,0.06) !important;
    }
    /* Check blanco dentro del radio negro al seleccionar */
    .tenant-infinity .service-option.border-neon .svc-check {
      color: #FFFFFF !important;
    }

    /* ── Barberos: foto circular limpia con borde fino, sin sombra ── */
    .tenant-infinity .barber-option img.rounded-full,
    .tenant-infinity .barber-option div.rounded-full {
      border: 1px solid #E5E5E5 !important;
      box-shadow: none !important;
      background: #FFFFFF !important;
      filter: none !important;
    }
    .tenant-infinity .barber-option [class*="drop-shadow"],
    .tenant-infinity .barber-option [class*="shadow-["] {
      box-shadow: none !important;
      filter: none !important;
    }
    /* Ícono placeholder dentro del avatar cuando no hay foto */
    .tenant-infinity .barber-option div.rounded-full i {
      color: #999999 !important;
      filter: none !important;
    }

    /* ── Tipografía: paleta idéntica a Aura ── */
    .tenant-infinity .barber-option .barber-name {
      color: #18181B !important;
      font-weight: 600 !important;
      font-size: 1.05rem !important;
      line-height: 1.2 !important;
      letter-spacing: -0.02em !important;
      margin-bottom: 4px !important;
    }
    .tenant-infinity .barber-option p {
      color: #6B7280 !important;
      font-weight: 400 !important;
      font-size: 12px !important;
      line-height: 1.35 !important;
    }
    /* Disponibilidad — gris medio Aura (#9CA3AF), no compite con el nombre */
    .tenant-infinity .barber-option .text-brand-neon,
    .tenant-infinity .barber-option .text-neon {
      color: #9CA3AF !important;
      font-weight: 500 !important;
      font-size: 12px !important;
      margin-top: 4px !important;
    }
    .tenant-infinity .barber-option .text-brand-neon i,
    .tenant-infinity .barber-option .text-neon i {
      color: #9CA3AF !important;
    }

    /* ── Radio de selección — patrón Aura: transparente → navy sólido ── */
    .tenant-infinity .barber-option .barber-radio {
      border-color: #D4D4D8 !important;
      border-width: 2px !important;
      background: transparent !important;
    }
    .tenant-infinity .barber-option.border-neon .barber-radio {
      background: #1F2937 !important;
      border-color: #1F2937 !important;
      box-shadow: none !important;
    }

    /* ── Paso 2 - Cards de barberos ──
       Acá vivía un hack que forzaba flex-direction:row sobre las cards, para
       imitar el layout compacto de Aura. Funcionaba a medias y por eso los
       nombres se partían en dos líneas: el render default (flex-col) deja el
       nombre, la especialidad, los días y la disponibilidad como HERMANOS
       sueltos del flex. Al voltear el eje a row, los cuatro pasaban a competir
       por el ancho y wrappeaban todos.

       La solución no era CSS: ahora `infinity` entra en la rama _isElegance
       del render (_renderBarberos), que es la MISMA que usa Aura y que sí anida
       el texto en un .flex-1.min-w-0 con truncate. Con eso el nombre ocupa el
       ancho que sobra y corta con "…" en vez de romper la card.
       Las reglas de img.w-20 de acá abajo quedaron muertas (esa rama usa w-12,
       cubierto más abajo); se dejan por si algún día vuelve el render default. */
    /* Foto grande (w-20 h-20) del render default → 48x48 compacto. Aplico
       a IMG y a DIV (placeholder cuando no hay foto). */
    .tenant-infinity .barber-option img.w-20,
    .tenant-infinity .barber-option div.w-20.rounded-full {
      width: 48px !important;
      height: 48px !important;
      margin-bottom: 0 !important;
      border: 1px solid #D4D4D8 !important;
      box-shadow: none !important;
      background: #F4F4F5 !important;
      filter: none !important;
      flex-shrink: 0 !important;
    }
    /* Foto ya compacta (w-12) del "any" card en elegance-like — mismo estilo */
    .tenant-infinity .barber-option img.w-12,
    .tenant-infinity .barber-option div.w-12.rounded-full {
      border: 1px solid #D4D4D8 !important;
      box-shadow: none !important;
      background: #F4F4F5 !important;
      filter: none !important;
      flex-shrink: 0 !important;
    }
    /* Íconos del placeholder de foto: gris claro, sin sombra */
    .tenant-infinity .barber-option i.ph-user,
    .tenant-infinity .barber-option i.ph-shuffle {
      color: #9CA3AF !important;
      font-size: 18px !important;
      filter: none !important;
      text-shadow: none !important;
    }
    /* Wrapper de textos: ocupa el espacio restante y alinea a la izquierda */
    .tenant-infinity .barber-option > .absolute {
      display: none !important;
    }
    .tenant-infinity .barber-option > span,
    .tenant-infinity .barber-option > p {
      text-align: left !important;
    }
    /* Nombre del barbero: text-base (no text-lg) y sin mucho margen */
    .tenant-infinity .barber-option .barber-name {
      color: #18181B !important;
      font-weight: 600 !important;
      font-size: 15px !important;
      line-height: 1.2 !important;
      letter-spacing: -0.01em !important;
      margin-bottom: 2px !important;
      text-align: left !important;
    }
    /* Especialidad — más chica, tracking normal */
    .tenant-infinity .barber-option p.uppercase,
    .tenant-infinity .barber-option p[class*="tracking-widest"] {
      color: #9CA3AF !important;
      font-weight: 500 !important;
      font-size: 10px !important;
      letter-spacing: 0.06em !important;
      margin-bottom: 0 !important;
      text-align: left !important;
    }
    /* Disponibilidad — inline, discreta */
    .tenant-infinity .barber-option span.flex.items-center {
      font-size: 11px !important;
      justify-content: flex-start !important;
      margin-top: 2px !important;
      text-align: left !important;
    }
    /* Estado activo: doble ring shadow como Aura */
    .tenant-infinity .barber-option.border-neon {
      background: rgba(17,24,39,0.04) !important;
      border: 1px solid #374151 !important;
      box-shadow: 0 0 0 1px rgba(55,65,81,0.25),
                  0 2px 8px rgba(0,0,0,0.06) !important;
    }
    /* Shimmer overlay animado al seleccionar (mismo que Aura) */
    .tenant-infinity .barber-option.border-neon::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      transform: translateX(-120%) !important;
      animation: aura-card-shimmer 0.65s cubic-bezier(0.25,0.46,0.45,0.94) 1 !important;
      pointer-events: none !important;
      background: linear-gradient(105deg,
        transparent 30%, rgba(156,163,175,0.30) 50%, transparent 70%) !important;
    }
    /* Reducir el gap del grid entre cards para que se sientan más densas */
    .tenant-infinity #barberosGrid {
      gap: 8px !important;
      row-gap: 8px !important;
    }

    /* Overrides finos para que el rediseño se respete sobre las clases ph */
    .tenant-infinity .service-option i.ph,
    .tenant-infinity .service-option i.ph-fill {
      transform: none !important;
      filter: none !important;
      text-shadow: none !important;
    }

    /* Calendario y horarios (Monochrome) */
    .tenant-infinity .day-btn {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      color: #555555 !important;
      box-shadow: none !important;
      transition: all 0.2s !important;
    }
    .tenant-infinity .day-btn span,
    .tenant-infinity .day-btn .day-num {
      color: #555555 !important;
      transition: all 0.2s !important;
    }
    .tenant-infinity .day-btn:hover {
      background: #FFFFFF !important;
      color: #000000 !important;
      border-color: #000000 !important;
      transform: none !important;
    }
    .tenant-infinity .day-btn:hover span,
    .tenant-infinity .day-btn:hover .day-num {
      color: #000000 !important;
    }
    .tenant-infinity .day-btn.active,
    .tenant-infinity .day-btn.border-neon {
      background: #000000 !important;
      border: 2px solid #000000 !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
      box-shadow: none !important;
    }
    .tenant-infinity .day-btn.active span,
    .tenant-infinity .day-btn.border-neon span {
      color: #FFFFFF !important;
      font-weight: 800 !important;
    }
    .tenant-infinity .day-btn.active .day-num,
    .tenant-infinity .day-btn.border-neon .day-num {
      color: #FFFFFF !important;
      font-weight: 900 !important;
      text-shadow: none !important;
    }

    .tenant-infinity .time-pill {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      color: #000000 !important;
      transition: all 0.2s !important;
    }
    .tenant-infinity .time-pill:hover:not(.disabled) {
      background: #FFFFFF !important;
      color: #000000 !important;
      border-color: #000000 !important;
      transform: none !important;
    }
    .tenant-infinity .time-pill.border-neon,
    .tenant-infinity .time-pill[data-sel] {
      background: #000000 !important;
      border: 2px solid #000000 !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
      box-shadow: none !important;
    }

    /* ── Footer info card (Ubicación / Horario) — light mode Infinity ──
       Los selectores previos con `main > div > div > div` no matcheaban
       el árbol real. Ahora scopeamos a #footerContact (mismo patrón que
       Aura). El bloque original usa inline styles con bg #0a0807 y textos
       gold hardcoded (rgba(201,168,76,...)). En Infinity quedaba caja
       negra con textos navy encima (efecto ilegible). */
    .tenant-infinity #footerContact div[style*="background:#0a0807"] {
      background: #FFFFFF !important;
      border-color: rgba(17,24,39,0.08) !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }
    /* Ícono contenedor (mapa/reloj) — pastilla navy sutil en vez de gold */
    .tenant-infinity #footerContact div[style*="background:rgba(201,168,76,0.1)"] {
      background: rgba(17,24,39,0.06) !important;
      border-color: rgba(17,24,39,0.14) !important;
    }
    .tenant-infinity #footerContact i[style*="color:var(--gold)"] {
      color: #111827 !important;
    }
    /* Labels "UBICACIÓN" / "HORARIO" — reemplazan el gold-tenue por navy tenue */
    .tenant-infinity #footerContact p[style*="color:rgba(201,168,76,0.55)"] {
      color: rgba(17,24,39,0.55) !important;
    }
    /* Calle y ciudad */
    .tenant-infinity #shopDireccionCalle { color: #111827 !important; }
    .tenant-infinity #shopDireccionCiudad { color: #6B7280 !important; }
    /* Divisor entre Ubicación y Horario */
    .tenant-infinity #footerContact div[style*="background:rgba(255,255,255,0.06)"] {
      background: rgba(17,24,39,0.08) !important;
    }
    /* Arrow "abrir mapa" (text-white/15 no cubierto por overrides genéricos) */
    .tenant-infinity #shopDireccionLink i.ph-arrow-square-out {
      color: rgba(17,24,39,0.35) !important;
    }
    /* text-white/15 general en Infinity — arreglo defensivo */
    .tenant-infinity .text-white\/15 { color: rgba(17,24,39,0.15) !important; }
    /* Estado active del link cuando el usuario lo toca */
    .tenant-infinity #shopDireccionLink:active {
      background: rgba(17,24,39,0.04) !important;
    }
    /* Grilla del horario semanal — items internos */
    .tenant-infinity #shopHorarioGrid,
    .tenant-infinity #shopHorarioGrid * {
      color: #374151 !important;
    }
    .tenant-infinity #shopHorarioGrid span.rounded-full {
      background: rgba(17,24,39,0.08) !important;
      color: #111827 !important;
    }
    /* Instagram footer link */
    .tenant-infinity #footerInstagram,
    .tenant-infinity #footerInstagram span,
    .tenant-infinity #footerInstagram i {
      color: #6B7280 !important;
    }
    .tenant-infinity #footerInstagram:hover,
    .tenant-infinity #footerInstagram:hover span,
    .tenant-infinity #footerInstagram:hover i {
      color: #111827 !important;
    }

    /* ── Horario grid: renderizado JS con text-gray-300 (no había override) ── */
    .tenant-infinity #shopHorarioGrid .text-gray-300 {
      color: #374151 !important;
    }
    /* El "dot" decorativo antes del texto — inline usa var(--gold) + opacity 0.5.
       En Infinity queda un dot navy medio invisible → subimos opacidad y color. */
    .tenant-infinity #shopHorarioGrid span.w-1.h-1.rounded-full {
      background: #111827 !important;
      opacity: 1 !important;
    }

    /* ── Botón "Quiénes somos" (.qs-btn) — hardcoded a blanco/gold ──
       texto rgba(229,231,235,0.88) + bg rgba(255,255,255,0.02) + icono gold
       → sobre fondo blanco todo es invisible o mal contrastado. */
    .tenant-infinity .qs-btn {
      color: #374151 !important;
      background: rgba(17,24,39,0.03) !important;
      border-bottom-color: rgba(17,24,39,0.08) !important;
    }
    .tenant-infinity .qs-btn:active {
      background: rgba(17,24,39,0.07) !important;
    }
    .tenant-infinity .qs-btn i {
      color: #111827 !important;
    }

    /* ── Encabezados de pasos: h2.text-neon con text-shadow glow ──
       "Selecciona tu Servicio", "Selecciona tu Barbero", "Selecciona fecha y
       hora", "Último paso" — todos con clase text-neon que aplica glow
       fluorescente. En Infinity light no queda estético. */
    .tenant-infinity .text-neon,
    .tenant-infinity h2.text-neon,
    .tenant-infinity h3.text-neon {
      color: #111827 !important;
      text-shadow: none !important;
    }

    /* ── Botón CTA "Unirme a la Comunidad Infinity" (#step4AuthContainer a) ──
       Sin override quedaba con el color por default del CTA base (transparente
       o casi). Lo pasamos a pill navy sólido con texto blanco. */
    .tenant-infinity #step4AuthContainer a.flex {
      background: #111827 !important;
      color: #FFFFFF !important;
      border-color: #111827 !important;
      box-shadow: 0 4px 14px rgba(17,24,39,0.20) !important;
    }
    .tenant-infinity #step4AuthContainer a.flex i,
    .tenant-infinity #step4AuthContainer a.flex span,
    .tenant-infinity #step4AuthContainer a.flex p {
      color: #FFFFFF !important;
    }
    .tenant-infinity #step4AuthContainer a.flex:hover {
      background: #374151 !important;
      border-color: #374151 !important;
    }
    .tenant-infinity .time-pill.disabled {
      background: #FAFAFA !important;
      border-color: #E5E5E5 !important;
      color: #999999 !important;
      text-decoration: line-through !important;
      opacity: 0.45 !important;
    }

    /* ── CTA principal (Monochrome, negro sólido) ── */
    .tenant-infinity #btnContinue {
      background: #000000 !important;
      color: #FFFFFF !important;
      border: none !important;
      font-weight: 800 !important;
      letter-spacing: 0.01em !important;
      box-shadow: none !important;
      transition: filter 0.2s ease !important;
      animation: none !important;
      text-shadow: none !important;
    }
    .tenant-infinity #btnContinue::after {
      content: none !important;
      display: none !important;
      animation: none !important;
    }
    .tenant-infinity #btnContinue:hover:not(:disabled) {
      background: #000000 !important;
      color: #FFFFFF !important;
      transform: none !important;
      border-color: transparent !important;
      filter: brightness(1.15) !important;
    }
    .tenant-infinity #btnContinue:active { transform: scale(0.985) !important; }
    .tenant-infinity #btnContinue:disabled {
      background: #E5E5E5 !important;
      color: #999999 !important;
      filter: none !important;
      box-shadow: none !important;
    }
    /* Sticky bottom bar — negro sólido, sin gradientes ni tintes dorados */
    .tenant-infinity #btnContinueBar {
      background: #FFFFFF !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-top: 1px solid #E5E5E5 !important;
    }
    .tenant-infinity #btnContinueBar button {
      background: #000000 !important;
      color: #FFFFFF !important;
      border: none !important;
      font-weight: 800 !important;
      box-shadow: none !important;
      background-image: none !important;
    }
    .tenant-infinity #clientName,
    .tenant-infinity #clientPhone,
    .tenant-infinity #clientEmail {
      background-color: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      color: #000000 !important;
      border-radius: 12px !important;
      transition: all 0.2s !important;
    }
    .tenant-infinity #clientName:focus,
    .tenant-infinity #clientPhone:focus,
    .tenant-infinity #clientEmail:focus {
      border-color: #000000 !important;
      background-color: #FFFFFF !important;
      box-shadow: none !important;
    }
    .tenant-infinity #waBtnLink {
      background: #25D366 !important;
      color: #FFFFFF !important;
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25) !important;
    }

    /* Paso 4 — labels de formulario */
    .tenant-infinity #step4 label {
      color: #555555 !important;
      font-weight: 700 !important;
      text-shadow: none !important;
    }
    .tenant-infinity #step4 label span {
      color: #999999 !important;
    }

    /* Paso 4 — tarjeta de resumen (originalmente fondo negro #0a0807) */
    .tenant-infinity #step4 div[style*="background:#0a0807"] {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-infinity #step4 div[style*="background:#0a0807"] p {
      color: #000000 !important;
    }
    .tenant-infinity #step4 div[style*="background:#0a0807"] .text-white\/30 {
      color: #999999 !important;
      font-weight: 700 !important;
    }
    .tenant-infinity #step4 div[style*="background:#0a0807"] #summaryService,
    .tenant-infinity #step4 div[style*="background:#0a0807"] #summaryPrice {
      color: #000000 !important;
      font-weight: 800 !important;
    }
    .tenant-infinity #step4 div[style*="background:#0a0807"] .bg-white\/5 {
      background-color: #FAFAFA !important;
    }
    .tenant-infinity #step4 div[style*="background:#0a0807"] span,
    .tenant-infinity #step4 div[style*="background:#0a0807"] #summaryBarber,
    .tenant-infinity #step4 div[style*="background:#0a0807"] #summaryDateString {
      color: #555555 !important;
    }
    .tenant-infinity #step4 div[style*="background:#0a0807"] #summaryTime {
      color: #000000 !important;
      font-weight: 700 !important;
    }
    .tenant-infinity #step4 div[style*="background:#0a0807"] i {
      color: #555555 !important;
    }

    /* Club de fidelidad — Monochrome */
    .tenant-infinity #clubBanner {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      border-radius: 16px !important;
    }
    .tenant-infinity #clubBanner a {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      border-radius: 16px !important;
      color: #000000 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-infinity #clubBanner a:hover {
      transform: none !important;
      box-shadow: none !important;
      border-color: #000000 !important;
    }
    .tenant-infinity #clubBanner .club-icon-wrap {
      background: #FAFAFA !important;
      border: 1px solid #E5E5E5 !important;
    }
    .tenant-infinity #clubBanner i.ph-fill {
      color: #000000 !important;
      filter: none !important;
    }
    .tenant-infinity #clubBanner p#shopClubNombre {
      color: #555555 !important;
      font-weight: 700 !important;
    }
    .tenant-infinity #clubBanner a .text-white {
      color: #000000 !important;
      font-weight: 800 !important;
    }
    .tenant-infinity #clubBanner a .text-gray-500 {
      color: #555555 !important;
    }
    .tenant-infinity #clubBanner a i.ph-arrow-right {
      color: #999999 !important;
    }

    .tenant-infinity #toastValidation {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      color: #000000 !important;
      box-shadow: none !important;
    }
    .tenant-infinity #success-state .bg-\[\#0a0a0d\] {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      box-shadow: none !important;
      border-radius: 20px !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-infinity #success-state h2 {
      color: #000000 !important;
      text-shadow: none !important;
    }
    .tenant-infinity #success-state .text-neon {
      color: #000000 !important;
    }
    .tenant-infinity #success-state svg.text-neon {
      color: #000000 !important;
    }
    .tenant-infinity #success-state .text-brand-text {
      color: #000000 !important;
    }
    .tenant-infinity #success-state .text-brand-neon\/80 {
      color: #555555 !important;
    }
    .tenant-infinity #successSummaryService {
      color: #000000 !important;
      font-weight: 800 !important;
    }
    .tenant-infinity #successSummaryDate {
      color: #000000 !important;
      font-weight: 600 !important;
    }
    .tenant-infinity #successInstagram {
      color: #555555 !important;
    }
    .tenant-infinity #successInstagram:hover {
      color: #000000 !important;
    }
    .tenant-infinity #reviewsSection p,
    .tenant-infinity #reviewsSection span,
    .tenant-infinity #reviewsSection h3 {
      color: #000000 !important;
    }
    .tenant-infinity #reviewsSection div[style*="color:var(--accent);"] {
      color: #000000 !important;
    }
    .tenant-infinity #reviewsCtaBtn {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      color: #555555 !important;
    }
    .tenant-infinity #reviewsCtaBtn:hover {
      color: #000000 !important;
      background: #FFFFFF !important;
      border-color: #000000 !important;
    }
    .tenant-infinity #reviewsGrid > div {
      background: #FFFFFF !important;
      border: 1px solid #E5E5E5 !important;
      color: #000000 !important;
    }
    .tenant-infinity #reviewsGrid > div * {
      color: #000000 !important;
    }
    /* Divider "gold" reutilizado como divider neutro en Monochrome */
    .tenant-infinity .gold-divider {
      width: 150px !important;
      height: 1px !important;
      background: #E5E5E5 !important;
      margin: 20px auto !important;
      position: relative !important;
      overflow: visible !important;
      border: none !important;
    }
    .tenant-infinity .gold-divider::before {
      content: "∞" !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      background: #FAFAFA !important;
      padding: 0 12px !important;
      color: #000000 !important;
      font-size: 1.8rem !important;
      font-weight: 300 !important;
      line-height: 1 !important;
      display: inline-block !important;
      animation: infinity-loop-spin 4s ease-in-out infinite !important;
    }

    /* Keyframes para animaciones de infinito y respiración con destellos */
    @keyframes infinity-bg-flow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes float-infinity-slow {
      0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
      100% { transform: translate3d(40px, -60px, 0) rotate(15deg) scale(1.15); }
    }
    @keyframes float-infinity-fast {
      0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
      100% { transform: translate3d(-50px, -80px, 0) rotate(-25deg) scale(0.9); }
    }
    @keyframes progress-glow-sweep {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes white-shimmer-sweep {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes infinity-selected-glow {
      0%, 100% {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 8px 30px rgba(0, 0, 0, 0.05), 0 0 15px rgba(255, 255, 255, 0.8) !important;
        transform: scale(1) !important;
      }
      50% {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 1), 0 16px 45px rgba(0, 0, 0, 0.08), 0 0 30px rgba(255, 255, 255, 1) !important;
        transform: scale(1.01) !important;
      }
    }
    @keyframes infinity-breathe {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 30px rgba(0,0,0,0.04), 0 0 15px rgba(255,255,255,0.7) !important;
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 12px 45px rgba(0,0,0,0.06), 0 0 35px rgba(255,255,255,1) !important;
      }
    }
    @keyframes infinity-breathe-subtle {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(0,0,0,0.03), 0 0 10px rgba(255,255,255,0.6) !important;
      }
      50% {
        transform: scale(1.015);
        box-shadow: 0 12px 35px rgba(0,0,0,0.05), 0 0 20px rgba(255,255,255,1) !important;
      }
    }
    @keyframes infinity-glow-btn {
      0%, 100% {
        box-shadow: 0 10px 30px rgba(0,0,0,0.03), 0 0 20px rgba(255,255,255,0.8), inset 0 0 0 0px rgba(255,255,255,1) !important;
      }
      50% {
        box-shadow: 0 15px 40px rgba(0,0,0,0.06), 0 0 40px rgba(255,255,255,1), inset 0 0 4px 1px rgba(255,255,255,1) !important;
        transform: scale(1.01) !important;
      }
    }
    @keyframes infinity-loop-spin {
      0% {
        transform: rotate(0deg) scale(1);
        text-shadow: 0 0 5px rgba(255,255,255,0.5);
      }
      50% {
        transform: rotate(180deg) scale(1.15);
        text-shadow: 0 0 25px rgba(0,0,0,0.05), 0 0 10px rgba(255,255,255,1);
        color: rgba(17, 24, 39, 0.55);
      }
      100% {
        transform: rotate(360deg) scale(1);
        text-shadow: 0 0 5px rgba(255,255,255,0.5);
      }
    }

    /* ══════════════════════════════════════════════════════════
       RENACER — tema claro, azul marino (primario) + naranja (secundario)
       ──────────────────────────────────────────────────────────
       renacer hereda el tema base OSCURO de elegance vía _themeAlias
       (html lleva `tenant-renacer tenant-elegance`). Este bloque —el
       último por orden de fuente— invierte esa base a un tema claro,
       igual que hace .tenant-infinity. Va con !important porque muchas
       reglas base doradas lo usan. Scoping estricto a .tenant-renacer:
       ningún otro tenant se entera.
         · Azul marino #1E2C55 → botón principal, progreso, pill activa, selección
         · Naranja #E98A45 → bordes de tarjeta, foco, hover (detalles del flyer)
         · Texto  #0F172A (slate-900) / #64748B (slate-500)
       ══════════════════════════════════════════════════════════ */
    .tenant-renacer {
      --accent:   #1E2C55;  --accent-r: 30; --accent-g: 44; --accent-b: 85;
      --neon-clr: #1E2C55;  --neon-r:   30; --neon-g:   44; --neon-b:   85;
      --body-bg:  #FFFFFF;
      --brand-bg: #FFFFFF !important;
      --brand-surface: #FFFFFF !important;
      --brand-surface-alt: #F8FAFC !important;
      --brand-primary: #1E2C55 !important;
      --brand-accent: #E98A45 !important;
      --brand-text: #0F172A !important;
      --brand-muted: #64748B !important;
      --brand-border: #E2E8F0 !important;
      --brand-progress-track: #E2E8F0 !important;
      position: relative;
    }

    /* Utilidades text-white de Tailwind → slate oscuro (mantiene la jerarquía). */
    .tenant-renacer .text-white\/50 { color: rgba(15,23,42,0.50) !important; }
    .tenant-renacer .text-white\/40 { color: rgba(15,23,42,0.45) !important; }
    .tenant-renacer .text-white\/30 { color: rgba(15,23,42,0.38) !important; }
    .tenant-renacer .text-white\/20 { color: rgba(15,23,42,0.28) !important; }
    .tenant-renacer .text-white\/10 { color: rgba(15,23,42,0.14) !important; }
    .tenant-renacer .text-white\/70 { color: rgba(15,23,42,0.70) !important; }
    .tenant-renacer .text-white\/80 { color: rgba(15,23,42,0.80) !important; }
    .tenant-renacer .text-white\/90 { color: rgba(15,23,42,0.90) !important; }
    /* .text-white SÓLIDO sin !important: deja ganar al botón/pills con color inline blanco. */
    .tenant-renacer .text-white { color: #0F172A; }
    .tenant-renacer .text-gray-400 { color: #64748B !important; }
    .tenant-renacer .text-gray-300 { color: #475569 !important; }
    .tenant-renacer .text-neutral-400 { color: #64748B !important; }

    /* Fondo de la página → blanco. */
    .tenant-renacer body {
      background-color: #FFFFFF !important;
      background-image: none !important;
      color: #0F172A !important;
    }

    /* Apagar las decoraciones doradas que hereda de elegance (shimmer/glow/sweep). */
    .tenant-renacer .booking-hero::after { content: none !important; }
    .tenant-renacer .service-option.border-neon::after,
    .tenant-renacer .barber-option.border-neon::after { content: none !important; }
    .tenant-renacer #progressTrack::after { content: none !important; animation: none !important; }

    /* ── Header / hero: FOTO de banner + overlay oscuro (tinte azul) y texto
       blanco. El fondo/foto la pone la regla de arriba (línea ~3565). ── */
    .tenant-renacer .booking-hero-overlay {
      background: linear-gradient(180deg, rgba(20,15,35,0.50) 0%, rgba(20,15,35,0.86) 100%) !important;
    }
    .tenant-renacer #shopNombre { color: #FFFFFF !important; text-shadow: 0 1px 12px rgba(0,0,0,0.35) !important; }
    .tenant-renacer #shopSlogan { color: rgba(255,255,255,0.72) !important; }
    .tenant-renacer .gold-divider {
      background: linear-gradient(90deg, transparent, #C9D2E8, transparent) !important;
    }
    .tenant-renacer .hero-logo-ring {
      background: #FFFFFF !important;
      border: 4px solid #FFFFFF !important;
      box-shadow: 0 6px 22px rgba(0,0,0,0.28) !important;
    }
    .tenant-renacer .info-strip {
      background: #FFFFFF !important;
      border-top: 1px solid #E2E8F0 !important;
      border-bottom: 1px solid #E2E8F0 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tenant-renacer .info-strip i { color: #1E2C55 !important; }
    .tenant-renacer .info-strip a,
    .tenant-renacer .info-strip > div { color: #0F172A !important; font-weight: 600 !important; }
    .tenant-renacer button[onclick="goBack()"] {
      background: #FFFFFF !important;
      border: 1px solid #E2E8F0 !important;
      box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
    }
    .tenant-renacer button[onclick="goBack()"] i { color: #0F172A !important; }
    .tenant-renacer #heroGoogleBadge {
      background: #FFFFFF !important;
      border: 1px solid #E2E8F0 !important;
      box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
    }
    .tenant-renacer #heroGoogleBadge span,
    .tenant-renacer #heroGoogleBadge .text-white { color: #0F172A !important; }

    /* ── Barra de progreso — morada sobre riel gris ── */
    .tenant-renacer #progressBar {
      background: #1E2C55 !important;
      box-shadow: none !important;
      border: none !important;
    }
    .tenant-renacer #progressBar::after { content: none !important; display: none !important; }
    .tenant-renacer #progressTrack { background-color: #E2E8F0 !important; border: none !important; }
    .tenant-renacer #stepIndicatorText { color: #1E2C55 !important; font-weight: 700 !important; }
    .tenant-renacer #progressPercentage { color: #64748B !important; }

    /* ── Pills de categoría — blanco/borde suave; activa morada sólida ── */
    .tenant-renacer .category-pill {
      background: #FFFFFF !important;
      border: 1px solid #E2E8F0 !important;
      color: #475569 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      transition: border-color .2s ease, color .2s ease, background .2s ease !important;
    }
    .tenant-renacer .category-pill:hover {
      border-color: #F6D9BF !important;   /* naranja claro */
      color: #E98A45 !important;
      background: #FFFFFF !important;
      transform: none !important;
    }
    .tenant-renacer .category-pill.border-neon,
    .tenant-renacer .category-pill.text-neon {
      background: #1E2C55 !important;
      border-color: #1E2C55 !important;
      color: #FFFFFF !important;
      box-shadow: 0 4px 14px rgba(30,44,85,0.30) !important;
      font-weight: 700 !important;
      animation: none !important;
    }

    /* ── Títulos — oscuros (el azul marino se reserva para acciones) ── */
    .tenant-renacer .cat-title {
      color: #0F172A !important;
      border-color: #1E2C55 !important;
    }
    /* "¿Qué servicio buscas?" y otros h2.text-neon → slate-900 (jerarquía limpia). */
    .tenant-renacer h2.text-neon { color: #0F172A !important; text-shadow: none !important; }

    /* ── Tarjetas de servicio — blanco, borde azul fino, hover azul + sombra ── */
    .tenant-renacer .service-option,
    .tenant-renacer .barber-option {
      background: #FFFFFF !important;
      background-image: none !important;
      border: 1px solid #F6D9BF !important;   /* naranja claro */
      box-shadow: none !important;
      color: #0F172A !important;
      transition: box-shadow .2s ease, border-color .2s ease !important;
      animation: none !important;
    }
    .tenant-renacer .service-option:hover,
    .tenant-renacer .barber-option:hover {
      background: #FFFFFF !important;
      border-color: #E98A45 !important;       /* naranja */
      box-shadow: 0 4px 14px rgba(37,99,235,0.12) !important;   /* hover:shadow-md */
      transform: none !important;
    }
    /* Seleccionada → azul marino (mata el glow blanco + scale heredados del JS default). */
    .tenant-renacer .service-option.border-neon,
    .tenant-renacer .barber-option.border-neon {
      background: rgba(30,44,85,0.06) !important;
      border: 2px solid #1E2C55 !important;
      box-shadow: 0 0 0 3px rgba(30,44,85,0.12) !important;
      transform: none !important;
      animation: none !important;
    }
    .tenant-renacer .service-option.bg-brand-neon\/10,
    .tenant-renacer .barber-option.bg-brand-neon\/10 { background: rgba(30,44,85,0.06) !important; }
    /* Textos de la tarjeta: nombre y precio oscuros (alta legibilidad). */
    .tenant-renacer .service-option .text-white,
    .tenant-renacer .service-option p.text-white { color: #0F172A !important; }
    .tenant-renacer .service-option .price-tag { color: #0F172A !important; font-weight: 700 !important; }
    .tenant-renacer .service-option.border-neon .price-tag { color: #0F172A !important; }
    /* Ícono del servicio: acento azul marino. Thumb → gris muy claro. */
    .tenant-renacer .service-option i.text-amber-500 { color: #1E2C55 !important; }
    .tenant-renacer .service-option .bg-neutral-800 {
      background: #F1F5F9 !important;         /* slate-100 */
      border-color: #E2E8F0 !important;
    }
    /* Radio de selección — azul marino (pisa el #D4AF37 que el JS pone inline). */
    .tenant-renacer .svc-radio { border-color: #CBD5E1 !important; }
    .tenant-renacer .service-option.border-neon .svc-radio {
      border-color: #1E2C55 !important;
      background: #1E2C55 !important;
    }

    /* ── Paso 2: barberos (rama propia de renacer, estilo oscuro/ámbar). El
       .barber-option ya toma el fondo blanco de arriba; acá se aclaran el
       avatar (bg-neutral-800), las iniciales/ícono (text-amber-500) y el radio. ── */
    .tenant-renacer .barber-option .bg-neutral-800 {
      background: #F1F5F9 !important;         /* slate-100 */
      border-color: #E2E8F0 !important;
    }
    .tenant-renacer .barber-option .text-amber-500 { color: #1E2C55 !important; }
    .tenant-renacer .barber-option .border-neutral-600 { border-color: #CBD5E1 !important; }
    .tenant-renacer .barber-name { color: #0F172A !important; }
    /* Barbero seleccionado: el render pone ámbar INLINE (rgba(245,158,11,…)),
       no la clase .border-neon → se piso por el atributo de estilo. */
    .tenant-renacer .barber-option[style*="245,158,11"] {
      border-color: #1E2C55 !important;
      background: rgba(30,44,85,0.06) !important;
    }
    .tenant-renacer .barber-option[style*="245,158,11"] .barber-radio {
      background: #1E2C55 !important;
      border-color: #1E2C55 !important;
    }
    .tenant-renacer .barber-option[style*="245,158,11"] .barber-check { color: #FFFFFF !important; }

    /* ── Tarjeta "Únete al Club" (fondo inline oscuro #0a0807) → blanca ──
       El ícono/borde ya usan var(--accent) = azul marino, así que quedan bien;
       solo hay que aclarar el fondo y mapear los grises/blancos sueltos. */
    .tenant-renacer a:has(> .club-icon-wrap) {
      background: #FFFFFF !important;
      border-color: #E2E8F0 !important;
      box-shadow: 0 2px 12px rgba(15,23,42,0.06) !important;
    }
    .tenant-renacer .text-gray-500 { color: #94A3B8 !important; }
    .tenant-renacer .text-white\/25 { color: rgba(15,23,42,0.30) !important; }

    /* ── Paso 3: fecha y hora ── */
    /* Pills de día (bg-[#0a0a0d] oscuro → blanco; seleccionado → azul marino). */
    .tenant-renacer .day-btn {
      background: #FFFFFF !important;
      border-color: #E2E8F0 !important;
      color: #0F172A !important;
      box-shadow: none !important;
    }
    .tenant-renacer .day-btn:hover { border-color: #F6D9BF !important; }
    .tenant-renacer .day-btn.active,
    .tenant-renacer .day-btn.border-neon {
      background: rgba(30,44,85,0.08) !important;
      border-color: #1E2C55 !important;
      color: #1E2C55 !important;
    }
    .tenant-renacer .day-btn .dot,
    .tenant-renacer .day-btn .dot.bg-neon { background: #1E2C55 !important; }
    /* Horas disponibles (.time-pill): el estado base es blanco-sobre-oscuro
       (--ps-cl blanco), invisible sobre fondo claro. La seleccionada la pinta
       el JS (mapa SEL → azul marino). Aquí solo el estado NO seleccionado. */
    .tenant-renacer .time-pill:not([data-sel]) {
      background: #FFFFFF !important;
      border-color: #C9D2E8 !important;   /* azul claro */
      color: #16213F !important;          /* marino oscuro */
    }
    .tenant-renacer .time-pill:not([data-sel]):hover {
      background: #F2F4FA !important;
      border-color: #1E2C55 !important;
      color: #1E2C55 !important;
    }
    /* Tarjetas con fondo inline oscuro #0a0807 (ubicación) → blancas. */
    .tenant-renacer [style*="background:#0a0807"] {
      background: #FFFFFF !important;
      border-color: #E2E8F0 !important;
    }
    /* Chips de Smart Slots (estado estático; el hover lo re-pinta el JS inline). */
    .tenant-renacer .smart-slot-pill {
      background: #FFFFFF !important;
      border-color: #C9D2E8 !important;      /* azul claro */
      color: #16213F !important;             /* marino oscuro */
    }

    /* ── Botón de acción principal — azul marino sólido, texto blanco ── */
    .tenant-renacer #btnContinueBar {
      background: rgba(255,255,255,0.92) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border-top: 1px solid #E2E8F0 !important;
    }
    .tenant-renacer #btnContinue,
    .tenant-renacer #btnContinueBar button {
      background: #1E2C55 !important;
      color: #FFFFFF !important;
      border: none !important;
      box-shadow: 0 8px 24px rgba(30,44,85,0.30) !important;
      background-image: none !important;
      font-weight: 800 !important;
    }
    .tenant-renacer #btnContinue:hover:not(:disabled) {
      background: #16213F !important;         /* marino oscuro */
      color: #FFFFFF !important;
      transform: none !important;
      filter: none !important;
    }
    .tenant-renacer #btnContinue:active { transform: scale(0.985) !important; }
    .tenant-renacer #btnContinue:disabled {
      background: #E2E8F0 !important;
      color: #94A3B8 !important;
      box-shadow: none !important;
      filter: none !important;
    }

    /* ── Paso 4: inputs del formulario (bg-[#0a0a0d] oscuro → claro, foco azul) ── */
    .tenant-renacer #clientName,
    .tenant-renacer #clientPhone,
    .tenant-renacer #clientEmail {
      background: #F8FAFC !important;
      border: 1px solid #E2E8F0 !important;
      color: #0F172A !important;
    }
    .tenant-renacer #clientName::placeholder,
    .tenant-renacer #clientPhone::placeholder,
    .tenant-renacer #clientEmail::placeholder { color: #94A3B8 !important; }
    .tenant-renacer #clientName:focus,
    .tenant-renacer #clientPhone:focus,
    .tenant-renacer #clientEmail:focus {
      background: #FFFFFF !important;
      border-color: #E98A45 !important;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
    }
    /* Banner "¿Ya tienes cuenta?" (fondo inline negro tenue) → gris muy claro. */
    .tenant-renacer .club-anim-el { background: #F1F5F9 !important; }

    /* ── Pantalla de éxito: tarjetas .bg-[#0a0a0d] → claras (como ferraza) ──
       El check y los textos .text-neon ya salen azul marinos por --neon-clr; el h2
       "¡Reserva Confirmada!" queda oscuro por la regla h2.text-neon de arriba. */
    .tenant-renacer #success-state .bg-\[\#0a0a0d\] {
      background: #F8FAFC !important;
      border-color: #C9D2E8 !important;   /* azul claro */
    }
    .tenant-renacer #success-state .border-neon\/30 { border-color: #C9D2E8 !important; }
    /* text-brand-text / text-brand-neon son colores LITERALES del build de
       Tailwind (casi blancos, pensados para el tema oscuro de Elegance), NO
       leen las variables --brand-*: sobre las tarjetas claras de arriba el
       nombre del servicio, el párrafo de confirmación y el CTA de
       recordatorios quedaban invisibles. */
    .tenant-renacer #success-state .text-brand-text { color: #0F172A !important; }
    .tenant-renacer #success-state [class*="text-brand-neon"] { color: #475569 !important; }
    .tenant-renacer #success-state .bg-brand-neon\/10 { background: rgba(30,44,85,0.08) !important; }
    .tenant-renacer #success-state .text-white\/50,
    .tenant-renacer #success-state .text-white\/60 { color: #64748B !important; }
    .tenant-renacer #success-state button[style*="border:1px solid rgba(255,255,255"] {
      border-color: rgba(15,23,42,0.14) !important;
    }

    /* ══════════════════════════════════════════════════
       MEMPHIS SALÓN — tenant-memphis
    ══════════════════════════════════════════════════ */
    .tenant-memphis .booking-hero {
      background-image: url('/mem.webp') !important;
      background-size: cover !important;
      background-position: center top !important;
    }

    /* Segunda imagen del carrusel: se crossfade sobre mem.webp */
    .tenant-memphis .booking-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('/mem2.webp');
      background-size: cover;
      background-position: center top;
      z-index: 0;
      animation: memphisFade 10s ease-in-out infinite;
    }

    /* Overlay siempre por encima del carrusel */
    .tenant-memphis .booking-hero-overlay { z-index: 1; }

    @keyframes memphisFade {
      0%, 40%  { opacity: 1; }
      50%, 90% { opacity: 0; }
      100%     { opacity: 1; }
    }

    /* Sin icono/logo en el hero */
    .tenant-memphis #heroLogoArea { display: none !important; }

    /* ════════════════════════════════════════════════════════════════
       CHAMELEON — PILAR 2 (profundidad/materia) + PILAR 3 (interacción)
       Tema oscuro · acento dorado (#DAA520) · CTA esmeralda (#004D40)
       ════════════════════════════════════════════════════════════════ */

    /* ── P2: Profundidad — superficies elevadas + hairline highlight ── */
    .tenant-chameleon .bg-\[\#0a0a0d\] { background-color: #141210 !important; }
    .tenant-chameleon .service-option,
    .tenant-chameleon .barber-option {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 1px 2px rgba(0,0,0,0.6) !important;
    }
    .tenant-chameleon .service-option:hover,
    .tenant-chameleon .barber-option:hover {
      border-color: rgba(218,165,32,0.45) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 16px rgba(0,0,0,0.6) !important;
    }

    /* ── P2: Grano de film sutil (estático) ── */
    .tenant-chameleon body::after {
      content: '';
      position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0.06;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 140px 140px;
    }

    /* ── P2: Hero graduado — glow de acento dorado + vignette ── */
    @keyframes cham-hero-glow { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
    .tenant-chameleon .booking-hero::after {
      content: '';
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 85%; height: 58%;
      background: radial-gradient(ellipse at 50% 0%, rgba(218,165,32,0.16) 0%, transparent 70%);
      pointer-events: none; z-index: 1;
      animation: cham-hero-glow 5s ease-in-out infinite;
    }
    .tenant-chameleon .booking-hero-overlay {
      background:
        radial-gradient(110% 75% at 50% -5%, rgba(218,165,32,0.07) 0%, transparent 42%),
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 34%, rgba(0,0,0,0.97) 100%) !important;
    }

    /* ── P3: CTA esmeralda — glossy + sheen + press ── */
    .tenant-chameleon #btnContinue {
      background-image: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(0,0,0,0.20) 100%) !important;
      background-color: #004D40 !important;
      position: relative; overflow: hidden;
      box-shadow: 0 6px 22px rgba(0,77,64,0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
      transition: transform 0.14s ease, box-shadow 0.25s ease, filter 0.2s ease;
    }
    @keyframes cham-cta-sheen { 0% { transform: translateX(-130%); } 55%,100% { transform: translateX(240%); } }
    .tenant-chameleon #btnContinue::after {
      content: '';
      position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
      background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
      transform: translateX(-130%);
      animation: cham-cta-sheen 5.5s ease-in-out infinite;
      pointer-events: none;
    }
    .tenant-chameleon #btnContinue:hover {
      filter: brightness(1.08);
      box-shadow: 0 8px 28px rgba(0,77,64,0.6), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    }
    .tenant-chameleon #btnContinue:active { transform: scale(0.985); filter: brightness(1.02); }
    .tenant-chameleon #btnContinue:disabled { filter: grayscale(0.45) brightness(0.55); box-shadow: none !important; }
    .tenant-chameleon #btnContinue:disabled::after { display: none; }

    /* ── P3: Transición entre pasos — easing premium + focus-in ── */
    .tenant-chameleon section[id^="step"] { transition-timing-function: cubic-bezier(0.16,1,0.3,1) !important; }
    .tenant-chameleon section[id^="step"].opacity-0 { filter: blur(7px) !important; }

    /* ── Accesibilidad: prefers-reduced-motion ── */
    @media (prefers-reduced-motion: reduce) {
      .tenant-chameleon .booking-hero::after,
      .tenant-chameleon .service-option.border-neon::after,
      .tenant-chameleon .barber-option.border-neon::after,
      .tenant-chameleon #btnContinue::after { animation: none !important; }
      .tenant-chameleon section[id^="step"].opacity-0 { filter: none !important; }
    }

    /* ════════════════════════════════════════════════════════════════
       BARBERS CLUB — Efectos avanzados (dark premium)
       Cards neutral-800, hero glow dorado, CTA naranja con sheen sutil.
       ════════════════════════════════════════════════════════════════ */
    /* Reemplaza el fondo oscuro genérico #0a0a0d → neutral-800 #27272a */
    .tenant-barbersclub .bg-\[\#0a0a0d\] { background-color: #27272a !important; }
    /* Cards de servicio y barbero: neutral-800 sobre neutral-900 */
    .tenant-barbersclub .service-option,
    .tenant-barbersclub .barber-option {
      background-color: #27272a !important;
      border-color: #404040 !important;
      color: #e5e5e5 !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.5) !important;
    }
    .tenant-barbersclub .service-option:hover,
    .tenant-barbersclub .barber-option:hover {
      border-color: rgba(234,179,8,0.55) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 16px rgba(0,0,0,0.55) !important;
    }
    /* Hero glow dorado suave (mismo animation cham-hero-glow) */
    .tenant-barbersclub .booking-hero::after {
      content: '';
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 85%; height: 58%;
      background: radial-gradient(ellipse at 50% 0%, rgba(234,179,8,0.14) 0%, transparent 70%);
      pointer-events: none; z-index: 1;
      animation: cham-hero-glow 5s ease-in-out infinite;
    }
    .tenant-barbersclub .booking-hero-overlay {
      background:
        radial-gradient(110% 75% at 50% -5%, rgba(234,179,8,0.06) 0%, transparent 42%),
        linear-gradient(180deg, rgba(24,24,27,0.55) 0%, rgba(24,24,27,0.28) 34%, rgba(24,24,27,0.97) 100%) !important;
    }
    /* CTA naranja con sheen sutil */
    .tenant-barbersclub #btnContinue {
      background-image: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.14) 100%) !important;
      background-color: #ea580c !important;
      position: relative; overflow: hidden;
      box-shadow: 0 6px 22px rgba(234,88,12,0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important;
      transition: transform 0.14s ease, box-shadow 0.25s ease, filter 0.2s ease, background-color 0.2s ease;
    }
    .tenant-barbersclub #btnContinue::after {
      content: '';
      position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
      background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
      transform: translateX(-130%);
      animation: cham-cta-sheen 5.5s ease-in-out infinite;
      pointer-events: none;
    }
    .tenant-barbersclub #btnContinue:hover:not(:disabled) {
      background-color: #c2410c !important;
      box-shadow: 0 8px 28px rgba(234,88,12,0.5), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    }
    .tenant-barbersclub #btnContinue:active { transform: scale(0.985); filter: brightness(1.02); }
    .tenant-barbersclub #btnContinue:disabled { filter: grayscale(0.45) brightness(0.55); box-shadow: none !important; }
    .tenant-barbersclub #btnContinue:disabled::after { display: none; }
    /* Transición entre pasos */
    .tenant-barbersclub section[id^="step"] { transition-timing-function: cubic-bezier(0.16,1,0.3,1) !important; }
    .tenant-barbersclub section[id^="step"].opacity-0 { filter: blur(7px) !important; }
    @media (prefers-reduced-motion: reduce) {
      .tenant-barbersclub .booking-hero::after,
      .tenant-barbersclub .service-option.border-neon::after,
      .tenant-barbersclub .barber-option.border-neon::after,
      .tenant-barbersclub #btnContinue::after { animation: none !important; }
      .tenant-barbersclub section[id^="step"].opacity-0 { filter: none !important; }
    }

    /* ════════════════════════════════════════════════════════════════
       AURA — PILAR 2 + PILAR 3 adaptados al tema CLARO (hero oscuro,
       acento gris #9CA3AF, CTA negro). Profundidad por sombra, no grano.
       ════════════════════════════════════════════════════════════════ */

    /* ── P2: Profundidad en modo claro — sombra suave de reposo en tarjetas ── */
    :is(.tenant-aura,.tenant-latincaribe) .service-option,
    :is(.tenant-aura,.tenant-latincaribe) .barber-option {
      box-shadow: 0 1px 2px rgba(24,24,27,0.05), 0 1px 3px rgba(24,24,27,0.03) !important;
    }

    /* ── P2: Hero graduado — glow de acento gris sobre el hero oscuro ── */
    @keyframes aura-hero-glow { 0%,100% { opacity: 0.4; } 50% { opacity: 0.8; } }
    :is(.tenant-aura,.tenant-latincaribe) .booking-hero::after {
      content: '';
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 85%; height: 55%;
      background: radial-gradient(ellipse at 50% 0%, rgba(156,163,175,0.12) 0%, transparent 70%);
      pointer-events: none; z-index: 1;
      animation: aura-hero-glow 5s ease-in-out infinite;
    }

    /* ── P3: CTA negro — sheen blanco sutil + press ── */
    :is(.tenant-aura,.tenant-latincaribe) #btnContinue {
      position: relative; overflow: hidden;
      transition: transform 0.14s ease, box-shadow 0.25s ease, filter 0.2s ease;
    }
    @keyframes aura-cta-sheen { 0% { transform: translateX(-130%); } 55%,100% { transform: translateX(240%); } }
    :is(.tenant-aura,.tenant-latincaribe) #btnContinue::after {
      content: '';
      position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
      background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
      transform: translateX(-130%);
      animation: aura-cta-sheen 5.5s ease-in-out infinite;
      pointer-events: none;
    }
    :is(.tenant-aura,.tenant-latincaribe) #btnContinue:active { transform: scale(0.985); }
    :is(.tenant-aura,.tenant-latincaribe) #btnContinue:disabled { filter: grayscale(0.3) brightness(0.7); box-shadow: none !important; }
    :is(.tenant-aura,.tenant-latincaribe) #btnContinue:disabled::after { display: none; }

    /* ── P3: Transición entre pasos — easing premium + focus-in ── */
    :is(.tenant-aura,.tenant-latincaribe) section[id^="step"] { transition-timing-function: cubic-bezier(0.16,1,0.3,1) !important; }
    :is(.tenant-aura,.tenant-latincaribe) section[id^="step"].opacity-0 { filter: blur(7px) !important; }

    /* ── Accesibilidad: prefers-reduced-motion ── */
    @media (prefers-reduced-motion: reduce) {
      :is(.tenant-aura,.tenant-latincaribe) #heroLogoArea,
      :is(.tenant-aura,.tenant-latincaribe) .hero-logo-ring,
      :is(.tenant-aura,.tenant-latincaribe) #shopNombre,
      :is(.tenant-aura,.tenant-latincaribe) .gold-divider,
      :is(.tenant-aura,.tenant-latincaribe) #shopSlogan,
      :is(.tenant-aura,.tenant-latincaribe) .booking-hero::after,
      :is(.tenant-aura,.tenant-latincaribe) .service-option.border-neon::after,
      :is(.tenant-aura,.tenant-latincaribe) .barber-option.border-neon::after,
      :is(.tenant-aura,.tenant-latincaribe) #btnContinue::after,
      :is(.tenant-aura,.tenant-latincaribe) #aura-stamp-wrap .aura-stamp-logo,
      :is(.tenant-aura,.tenant-latincaribe) #aura-stamp-wrap .aura-stamp-ring-1,
      :is(.tenant-aura,.tenant-latincaribe) #aura-stamp-wrap .aura-stamp-ring-2,
      :is(.tenant-aura,.tenant-latincaribe) #aura-stamp-wrap .aura-stamp-shine { animation: none !important; }
      :is(.tenant-aura,.tenant-latincaribe) section[id^="step"].opacity-0 { filter: none !important; }
    }

    /* ═══════════════════════════════════════════════════════════════
       THE LATIN CARIBE — paleta del logo: cian / dorado / rosa.
       Reemplaza el gris/azul heredado de Aura. (va después → gana)
       ═══════════════════════════════════════════════════════════════ */
    .tenant-latincaribe {
      --accent:   #0FB4BD; --accent-r: 15; --accent-g: 180; --accent-b: 189;
      --neon-clr: #0FB4BD; --neon-r: 15; --neon-g: 180; --neon-b: 189;
      --gold:     #0FB4BD;
      --gold-dim: rgba(15,180,189,0.35);
    }
    /* Hero: banner del local (mesa de billar — banner global por defecto) */
    .tenant-latincaribe .booking-hero {
      background-image: url('/thelatin/banner-latincaribe-main.jpeg') !important;
      background-position: center !important;
      background-size: cover !important;
    }
    /* Ring del logo: glow cian→rosa */
    .tenant-latincaribe .hero-logo-ring {
      box-shadow: 0 0 20px rgba(53,221,230,0.30), 0 0 0 1px rgba(255,255,255,0.15) !important;
      animation: lc-ring-glow 3.5s ease-in-out 1.1s infinite !important;
    }
    @keyframes lc-ring-glow {
      0%,100% { box-shadow: 0 0 20px rgba(53,221,230,0.30), 0 0 0 1px rgba(255,255,255,0.15); }
      50%     { box-shadow: 0 0 44px rgba(243,91,166,0.45), 0 0 0 2px rgba(255,255,255,0.35), 0 0 70px rgba(53,221,230,0.20); }
    }
    /* Divisor: degradado tri-color de la marca */
    .tenant-latincaribe .gold-divider {
      background: linear-gradient(90deg, transparent, #35DDE6, #F0D98E, #F35BA6, transparent) !important;
    }
    /* Slogan: glow cian/rosa (en vez del gris) */
    @keyframes lc-text-glow {
      0%,100% { text-shadow: 0 0 8px rgba(53,221,230,0.15); color: rgba(255,255,255,0.72); }
      50%     { text-shadow: 0 0 18px rgba(53,221,230,0.85), 0 0 28px rgba(243,91,166,0.35); color: #ffffff; }
    }
    .tenant-latincaribe #shopSlogan {
      animation: aura-slogan-appear 0.75s cubic-bezier(0.16,1,0.3,1) 0.65s both,
                 lc-text-glow 3.5s ease-in-out 1.4s infinite !important;
    }
    /* Info-strip: iconos en cian */
    .tenant-latincaribe .info-strip i { color: #0FB4BD !important; }
    /* Progress: barra degradado cian→rosa, % en rosa */
    .tenant-latincaribe #progressBar { background: linear-gradient(90deg, #35DDE6, #F35BA6) !important; }
    .tenant-latincaribe #progressPercentage { color: #F35BA6 !important; }
    /* "Quiénes Somos" / "Información" heredados de Aura se ocultan completos:
       el local usa el "Quiénes somos" del panel (qs-btn), que duplicaba a este.
       El wrap queda en el DOM (display:none): sigue siendo el ancla del banner
       del club re-ubicado. */
    .tenant-latincaribe #aura-sobre-wrap { display: none !important; }
    /* qs-btn: el estilo base es texto claro para fondo oscuro y en el tema
       claro quedaba casi invisible. Card blanca a juego con el banner del
       club, texto oscuro e ícono cian de la marca. */
    .tenant-latincaribe .qs-btn {
      width: calc(100% - 48px);
      margin: 14px 24px 0;
      padding: 13px 16px;
      border-radius: 14px;
      background: #FFFFFF;
      border: 1px solid #D4D4D8;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      color: #18181B;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .tenant-latincaribe .qs-btn:active { background: #F4F4F5; }
    .tenant-latincaribe .qs-btn i { color: #0FB4BD; font-size: 15px; }
    /* Banner del club re-ubicado arriba (bajo "Quiénes Somos") vía JS: en los
       pasos 2-4 se esconde igual que el hero/info-strip, para que el checkout
       quede limpio. */
    .tenant-latincaribe body:is([data-step="2"],[data-step="3"],[data-step="4"]) #clubBanner { display: none !important; }

    /* ── Decoración caribeña: palmeras azules + bola 8 de pool ── */
    .lc-decor { display: none; }
    .tenant-latincaribe .lc-decor {
      display: block; position: absolute; inset: 0;
      pointer-events: none; overflow: hidden; z-index: 6;
    }
    .tenant-latincaribe .lc-palm {
      position: absolute; bottom: -12px; font-size: 100px; line-height: 1;
      color: #35DDE6; opacity: 0.30;
      text-shadow: 0 0 22px rgba(53,221,230,0.55), 0 0 40px rgba(15,180,189,0.30);
    }
    .tenant-latincaribe .lc-palm-left  { left: -20px;  transform: scaleX(-1) rotate(-4deg); }
    .tenant-latincaribe .lc-palm-right { right: -20px; transform: rotate(-4deg); }
    /* Red de seguridad: dirección larga no desborda el info-strip (máx 2 líneas) */
    .tenant-latincaribe #heroInfoAddrText {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      overflow: hidden;
    }

    /* ══ Self-service con tema alias (wizard /crea, Paso 3) ══════════════
       Los tenants dinámicos reutilizan el CSS de Aura (claro) o Chameleon
       (oscuro) vía _themeAlias, pero NO deben heredar la MARCA de esos
       locales: ni sus fotos de hero ni sus secciones propias. Mismo patrón
       que .tenant-oren.tenant-aura, con la clase genérica tenant-selfservice
       que config.js agrega a todo tenant dinámico. */
    html.tenant-selfservice.tenant-aura .booking-hero {
      background-image: none !important;
      background-color: #23232a !important;
    }
    html.tenant-selfservice.tenant-chameleon .booking-hero {
      background-image: none !important;
      background-color: #0a0a0d !important;
    }
    html.tenant-selfservice #aura-info-wa,
    html.tenant-selfservice #aura-sobre-wrap { display: none !important; }
    /* Banner propio subido en el wizard: le gana a las reglas de arriba por
       orden (misma especificidad, declarado después). */
    /* RED DE SEGURIDAD WHITE-LABEL: el `.booking-hero` base trae
       `background-image: url('/elegance.webp')`, la foto del local de Elegance.
       Cada tenant a medida la pisa en su bloque .tenant-X; uno self-service no
       tiene bloque, así que mostraba la foto de OTRO CLIENTE mientras no
       llegara su banner —y para siempre si no llegaba—. Sin banner propio el
       hero queda en su color de fondo, que es feo pero es suyo. */
    html.tenant-selfservice .booking-hero {
      background-image: none;
    }
    html.tenant-selfservice .booking-hero.hero-custom {
      background-image: var(--hero-banner) !important;
      background-size: cover !important;
      background-position: center !important;
    }

    /* ═══ Selección de servicio y profesional — plantilla dinámica ═══════════
       Todo local nuevo (self-service y alta express) nace con esta selección,
       así que es la primera impresión del producto: la tarjeta no "se marca",
       se ENCIENDE. En vez de cambiar un borde de color, se compone luz —
       filo superior, brillo interno, aro nítido y una sombra del color de la
       marca— y un barrido pasa una sola vez al elegir.

       Todo se construye sobre --accent / --accent-r,g,b, que config.js escribe
       como estilo inline con el color que el dueño eligió en el wizard. Por eso
       el mismo CSS se ve premium en dorado, en rosado o en azul sin una línea
       por tenant. Gana por especificidad (html + 2 clases) al alias de tema. */

    html.tenant-selfservice .service-option,
    html.tenant-selfservice .barber-option,
    html.tenant-selfservice .time-pill {
      position: relative;
      transition: transform .22s cubic-bezier(.2,.7,.3,1),
                  box-shadow .28s ease,
                  border-color .2s ease;
    }

    /* En reposo: solo un filo de luz arriba, para que la tarjeta tenga cuerpo
       y el salto al seleccionar se note. */
    html.tenant-selfservice .service-option:not(.border-neon),
    html.tenant-selfservice .barber-option:not(.border-neon) {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055),
                  0 1px 2px rgba(0,0,0,.35) !important;
    }

    @media (hover: hover) {
      html.tenant-selfservice .service-option:not(.border-neon):hover,
      html.tenant-selfservice .barber-option:not(.border-neon):hover {
        transform: translateY(-2px);
        border-color: rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.42) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.075),
                    0 10px 24px -12px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.35) !important;
      }
    }

    /* Seleccionada ────────────────────────────────────────────────────────── */
    html.tenant-selfservice .service-option.border-neon,
    html.tenant-selfservice .barber-option.border-neon {
      border-color: transparent !important;
      transform: translateY(-3px);
      background-image:
        radial-gradient(130% 95% at 50% -32%,
          rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.20),
          transparent 62%) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 30px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.12),
        0 0 0 1.5px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.72),
        0 12px 34px -10px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.50),
        0 3px 10px rgba(0,0,0,.55) !important;
    }

    /* Barrido de luz: una sola pasada al elegir. */
    @keyframes ss-sweep {
      from { transform: translateX(-130%); }
      to   { transform: translateX(260%); }
    }
    html.tenant-selfservice .service-option.border-neon::after,
    html.tenant-selfservice .barber-option.border-neon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg,
        transparent 34%,
        rgba(255,255,255,.13) 46%,
        rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.32) 52%,
        transparent 66%);
      transform: translateX(-130%);
      animation: ss-sweep .85s cubic-bezier(.22,.61,.36,1) 1;
      pointer-events: none;
      border-radius: inherit;
    }

    /* El ícono del servicio también se enciende. */
    html.tenant-selfservice .service-option.border-neon .icon-bg {
      border-color: rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.55) !important;
      background: rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.10) !important;
      box-shadow: 0 0 14px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.32) !important;
    }
    html.tenant-selfservice .service-option.border-neon .icon-svg {
      color: var(--accent, #D4AF37) !important;
      filter: drop-shadow(0 0 6px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.55)) !important;
    }
    /* Foto del profesional: aro de marca. */
    html.tenant-selfservice .barber-option.border-neon img {
      box-shadow: 0 0 0 2px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.75),
                  0 0 14px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.35) !important;
    }

    /* Hora elegida: mismo lenguaje, en versión compacta. */
    html.tenant-selfservice .time-pill.border-neon,
    html.tenant-selfservice .time-pill[data-sel] {
      background: rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.14) !important;
      color: var(--accent, #D4AF37) !important;
      border-color: rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.85) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
                  0 0 14px rgba(var(--accent-r,212),var(--accent-g,175),var(--accent-b,55),.30) !important;
      font-weight: 800 !important;
    }

    @media (prefers-reduced-motion: reduce) {
      html.tenant-selfservice .service-option,
      html.tenant-selfservice .barber-option,
      html.tenant-selfservice .time-pill { transition: none !important; }
      html.tenant-selfservice .service-option.border-neon,
      html.tenant-selfservice .barber-option.border-neon { transform: none !important; }
      html.tenant-selfservice .service-option.border-neon::after,
      html.tenant-selfservice .barber-option.border-neon::after { display: none !important; }
    }

    /* ── Calificar en Google desde la agenda (ver _renderResenaEnAgenda) ──
       Base neutra; la hoja propia de cada local le pone su marca. */
    #resenaAgenda {
      display: flex; align-items: center; gap: 14px;
      margin-top: 40px; padding: 16px 18px; border-radius: 16px;
      text-decoration: none; color: inherit;
      border: 1px solid rgba(var(--accent-r,201),var(--accent-g,168),var(--accent-b,76),.28);
      background: rgba(127,127,127,.06);
    }
    #resenaAgenda + #clubBanner { margin-top: 14px; }
    #resenaAgenda .ra-g {
      width: 44px; height: 44px; flex: none; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; background: #fff;
    }
    #resenaAgenda .ra-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    #resenaAgenda .ra-kicker {
      font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
      color: var(--accent, #c9a84c);
    }
    #resenaAgenda .ra-titulo { font-size: 15px; font-weight: 700; margin-top: 2px; }
    #resenaAgenda .ra-estrellas { font-size: 13px; letter-spacing: .12em; color: #FBBF24; margin-top: 2px; }
    #resenaAgenda .ra-sub { font-size: 12px; opacity: .6; margin-top: 2px; }
    #resenaAgenda .ra-flecha { font-size: 18px; opacity: .5; flex: none; }

    /* ── Elegir profesional desde el paso 1 (ver _renderProfesionalesPaso1) ──
       Base neutra para cualquier local que lo encienda; cada hoja propia le
       pone su marca encima. Solo existe si SHOP.profesionalEnPaso1. */
    #profPaso1 { margin: -6px 0 22px; }
    #profPaso1 .pp1-titulo {
      font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
      color: var(--accent, #c9a84c);
    }
    #profPaso1 .pp1-sub { font-size: 12px; opacity: .62; margin-top: 2px; }
    #profPaso1 .pp1-lista {
      display: flex; gap: 14px; overflow-x: auto; padding: 12px 2px 4px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    #profPaso1 .pp1-lista::-webkit-scrollbar { display: none; }
    #profPaso1 .pp1-item {
      flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 7px;
      text-decoration: none; color: inherit;
    }
    #profPaso1 .pp1-item img,
    #profPaso1 .pp1-inicial {
      width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
      border: 2px solid rgba(var(--accent-r,201),var(--accent-g,168),var(--accent-b,76),.6);
    }
    #profPaso1 .pp1-inicial {
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 20px; background: rgba(127,127,127,.12);
    }
    #profPaso1 .pp1-nombre {
      font-size: 11.5px; font-weight: 600; max-width: 68px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* ═══════════════════════════════════════════════════════════════════
       PANTALLA DE CONFIRMACIÓN EN TENANTS CLAROS
       ═══════════════════════════════════════════════════════════════════
       Los overrides de modo claro de esta página se hicieron por CLASE
       (`.bg-[#0a0a0d]`), pero tres bloques de la confirmación traen el fondo
       oscuro en un `style` INLINE, y a un inline solo se le gana con
       `!important` y un selector de atributo. Resultado en Aura: el código de
       gestión y la tarjeta de Wallet quedaban negros sobre la página blanca,
       con el código de la cita ilegible — justo la pantalla donde el cliente
       tiene que copiarlo.

       Va por `html.theme-light` y NO por `.tenant-x`: config.js pone esa clase
       a todos los de _lightTenants, incluidos los de self-service que se
       agregan en caliente, así que un local claro nuevo lo hereda solo. Es la
       regla de la casa: en modo claro se mapean TODOS los fondos o ninguno.

       Los tres puntos que se veían negros venían acompañados de otros ocho que
       solo se notan una vez que el fondo es blanco: textos `text-white/NN`,
       bordes blancos translúcidos y un botón blanco sobre tarjeta blanca. */

    /* Fondos oscuros inline → blanco. (El banner del Club también trae uno,
       pero cuelga FUERA de #success-state y ya lo resuelve su propia regla.) */
    html.theme-light #success-state #successCodigoWrap,
    html.theme-light #success-state #successWalletCard {
      background: #FFFFFF !important;
      border-color: rgba(156,163,175,0.35) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
    }

    /* Textos que asumían fondo negro. `text-white/40` sobre blanco no se ve:
       el atributo los toma a todos (30, 40, 50, 70) sin tener que escapar la
       barra como haría un selector de clase. */
    html.theme-light #success-state [class*="text-white/"] {
      color: #6B7280 !important;
    }
    html.theme-light #success-state #successCodigoWrap .text-brand-text,
    html.theme-light #success-state #successWalletCard .text-brand-text {
      color: #18181B !important;
    }

    /* Bordes blancos translúcidos → gris visible. */
    html.theme-light #success-state #btnCompartirAgenda[style],
    html.theme-light #success-state #reviewsCtaBtn[style] {
      border-color: rgba(156,163,175,0.40) !important;
    }

    /* El botón de la Wallet es blanco con texto negro: sobre la tarjeta ya
       blanca desaparecía por completo. Se invierte a oscuro. */
    html.theme-light #success-state #successWalletBtn[style] {
      background: #18181B !important;
      color: #FFFFFF !important;
    }

    /* El resto de la confirmación trae el fondo oscuro por CLASE: el resumen
       de la cita, "Instala la app" y "Activa los recordatorios" (bg-[#0a0a0d]),
       y el texto de apoyo en text-brand-neon/NN, que en un local claro es
       blanco. Quedaban tarjetas negras con el título negro encima y "Tu
       espacio está 100% asegurado" blanco sobre blanco — medido el 27-09-2026
       en Uñas Viña (en vivo) y en los tres claros del lote de septiembre.
       Cada local que lo notó se lo arregló por su cuenta (Aura, Lumen,
       Elegance…); esto es la red para todos los demás.

       En :where() A PROPÓSITO: deja la regla con la especificidad de un
       selector de clase, así la de cualquier local que ya diseñó su propia
       confirmación (`.tenant-x #success-state .bg-…`) le sigue ganando. */
    html.theme-light :where(#success-state .bg-\[\#0a0a0d\]) {
      background: #FFFFFF !important;
      border-color: rgba(156,163,175,0.35) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
    }
    html.theme-light :where(#success-state [class*="text-brand-neon/"]) {
      color: #52525B !important;
    }
    /* "Instalar" (Android) es blanco inline: sobre la tarjeta ya blanca
       desaparecía, igual que el de la Wallet. */
    html.theme-light :where(#success-state #successPwaBtn[style]) {
      background: #18181B !important;
      color: #FFFFFF !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       TEMPLO SALÓN MASCULINO · INICIO  —  arquitectura mineral
       ───────────────────────────────────────────────────────────────────
       Tenant de PROPUESTA (seed-templo.js). Este bloque y el seed son las
       DOS piezas que hay que borrar si el local no compra: por el aspecto
       Templo es camino B aunque su ruteo sea camino A.

       Dirección: la columna del logotipo. Superficies claras minerales,
       negro mate, líneas estructurales finas y oliva SOLO en lo elegido.
       Monta sobre `.tenant-aura` (tema claro base, que llega porque el seed
       declara `tema: 'aura'` en el DOC RAIZ `tenants/templo` — ahi lo leen las
       dos rutas, el middleware Edge y el fetch de config.js). Va al final del <style>
       del <head> a propósito: así gana en cascada sobre esa base sin subir
       la especificidad a mano.

       Los textos, precios, duraciones, pasos y la lógica NO se tocan: todo
       acá es color, forma, espacio y movimiento.
       ═══════════════════════════════════════════════════════════════════ */
    /* `html.` delante de TODO el bloque no es adorno: el tenant es dinámico,
       así que <html> lleva también `tenant-selfservice`, y sus reglas
       (`html.tenant-selfservice .service-option.border-neon`, `html.tenant-
       selfservice #btnContinue`) tienen un elemento más de especificidad que
       un `.tenant-templo` pelado — ganaban ellas y el botón salía oliva y el
       borde del seleccionado transparente. Con `html.` empatamos o subimos, y
       como este bloque va al final del <style> el desempate cae de este lado. */
    html.tenant-templo {
      --t-bg:      #F5F5F1;   /* blanco cálido — fondo general              */
      --t-surface: #FFFFFF;   /* blanco — tarjetas y paneles                */
      --t-ink:     #171917;   /* negro carbón — textos y botones            */
      --t-stone:   #DDDFD8;   /* gris piedra — separadores decorativos      */
      --t-muted:   #62675F;   /* gris oscuro — información secundaria       */
      --t-olive:   #536047;   /* oliva profundo — selección y foco          */

      /* Oliva translúcido: el tinte de lo seleccionado. Apenas teñido, como
         pide el brief — el peso del estado lo cargan el borde y la franja. */
      --t-olive-wash: rgba(83,96,71,0.07);
      --t-olive-line: rgba(83,96,71,0.38);

      /* Sombras CORTAS. Lo que separa una superficie de otra acá es el tono
         y un desplazamiento mínimo, no un halo grande: un salón que se
         presenta como sobrio no puede flotar. */
      --t-shadow:    0 1px 2px rgba(23,25,23,0.05), 0 2px 8px rgba(23,25,23,0.04);
      --t-shadow-up: 0 2px 4px rgba(23,25,23,0.07), 0 8px 24px rgba(23,25,23,0.06);

      /* !important OBLIGATORIO en estas seis: config.js las escribe INLINE
         en <html> con el color que el tenant tiene en Firestore (era el
         verde #26912A de su agenda anterior), y un estilo inline le gana a
         cualquier regla de hoja que no lo lleve. Sin esto, todo lo que el
         tema base deriva del acento —bordes de seleccion, puntos, halos—
         sale verde y el redisenio queda a medias. El bloque es la fuente de
         verdad del aspecto; el dato de Firestore ya no manda aca. */
      --accent:   #536047 !important;
      --accent-r: 83 !important; --accent-g: 96 !important; --accent-b: 71 !important;
      --neon-clr: #536047 !important;
      --neon-r:   83 !important; --neon-g:   96 !important; --neon-b:   71 !important;
      --body-bg:  #F5F5F1 !important;

      --brand-bg:             #F5F5F1 !important;
      --brand-surface:        #FFFFFF !important;
      --brand-surface-alt:    #FFFFFF !important;
      --brand-primary:        #171917 !important;
      --brand-accent:         #536047 !important;
      --brand-text:           #171917 !important;
      --brand-muted:          #62675F !important;
      --brand-border:         #DDDFD8 !important;
      --brand-glow:           rgba(83,96,71,0.10) !important;
      --brand-button-text:    #FFFFFF !important;
      --brand-progress-track: #DDDFD8 !important;
    }

    html.tenant-templo body {
      background-color: var(--t-bg) !important;
      color: var(--t-ink) !important;
    }

    /* ── 4 · Tipografía ───────────────────────────────────────────────
       Manrope para todo. Michroma SOLO en el nombre de marca, que ya existe
       como texto independiente (#shopNombre) — no reconstruye el logo ni lo
       sustituye: el logo sigue siendo su archivo. Michroma es ancha y solo
       tiene un peso, así que en cualquier otro sitio rompería la jerarquía.
       Las fuentes las descarga _fuentesTemplo(), solo para este local. */
    html.tenant-templo body,
    html.tenant-templo input,
    html.tenant-templo button,
    html.tenant-templo select,
    html.tenant-templo textarea,
    html.tenant-templo .svc-desc,
    html.tenant-templo .svc-name,
    html.tenant-templo .price-tag,
    html.tenant-templo .duration-tag,
    html.tenant-templo .barber-name,
    html.tenant-templo .category-pill,
    html.tenant-templo .cat-title,
    html.tenant-templo #shopSlogan,
    html.tenant-templo #btnContinue {
      font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif !important;
    }
    html.tenant-templo .svc-desc              { font-weight: 400 !important; }
    html.tenant-templo .duration-tag,
    html.tenant-templo #shopSlogan            { font-weight: 500 !important; }
    html.tenant-templo .svc-name,
    html.tenant-templo .barber-name,
    html.tenant-templo .price-tag,
    html.tenant-templo .category-pill,
    html.tenant-templo #btnContinue           { font-weight: 700 !important; }
    html.tenant-templo .cat-title,
    html.tenant-templo h2,
    html.tenant-templo h3                     { font-weight: 700 !important; letter-spacing: -0.015em !important; }

    /* El nombre en DOS niveles: la marca arriba y el generico debajo, ambos
       en Michroma —misma letra, distinto peso visual— separados por tamanio y
       espaciado en vez de por tipografia. `_heroNombreTemplo()` parte el <h1>
       en .tpl-marca + .tpl-bajada; si por lo que sea no corriera, el <h1>
       sigue siendo texto plano legible y estas reglas simplemente no aplican.
       Va sobre la FOTO, asi que aca el texto es claro, no `--t-muted`. */
    html.tenant-templo #shopNombre {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 0.3rem !important;
      font-family: 'Michroma', 'Manrope', sans-serif !important;
      font-weight: 400 !important;
      color: #FFFFFF !important;
      line-height: 1 !important;
    }
    html.tenant-templo #shopNombre .tpl-marca {
      font-family: 'Michroma', 'Manrope', sans-serif !important;
      font-size: 1.8rem !important;
      letter-spacing: 0.04em !important;
      line-height: 1 !important;
      /* Blanco EXPLICITO, no heredado: el tema base pinta los <span> del hero
         con `.booking-hero span { color: rgba(255,255,255,.70) }`, y una regla
         directa sobre el span le gana siempre a lo que herede del <h1>. Al 70%
         el nombre se leia gris sucio sobre la foto.
         Ademas va sobre FOTO, no sobre un color: ningun calculo de contraste
         sirve aqui porque detras hay espejo, pared y madera a la vez. La
         sombra es lo que garantiza que se lea sobre cualquier zona. */
      color: #FFFFFF !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.35) !important;
    }
    html.tenant-templo #shopNombre .tpl-bajada {
      font-family: 'Michroma', 'Manrope', sans-serif !important;
      font-size: 0.58rem !important;
      letter-spacing: 0.34em !important;
      text-transform: uppercase !important;
      color: rgba(255,255,255,0.95) !important;
      line-height: 1.2 !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.55) !important;
      /* El letter-spacing empuja el ultimo caracter fuera del centro optico. */
      text-indent: 0.34em !important;
    }
    @media (min-width: 640px) {
      html.tenant-templo #shopNombre .tpl-marca  { font-size: 2.6rem !important; }
      html.tenant-templo #shopNombre .tpl-bajada { font-size: 0.72rem !important; }
    }

    /* ── 2 · Cabecera ─────────────────────────────────────────────────
       La foto manda: el hero es el carrusel del local y nada se le
       superpone salvo el degradado que hace legible el nombre. */
    html.tenant-templo .booking-hero {
      background-color: #1b1d1a !important;
      background-position: center 32% !important;
    }
    /* El carrusel (#heroSliderBg, ver initHeroSlider) reemplaza al banner
       fijo: sin esto quedan las dos capas y la foto de abajo asoma en el
       crossfade. Hay que ganarle a `html.tenant-selfservice
       .booking-hero.hero-custom`, que trae la suya con !important — misma
       especificidad, y este bloque va después. */
    html.tenant-templo .booking-hero,
    html.tenant-templo .booking-hero.hero-custom {
      background-image: none !important;
    }
    html.tenant-templo #heroSliderBg .hero-slide {
      background-position: center 32%;
    }
    html.tenant-templo .booking-hero-overlay {
      /* La franja del 45% es justo donde cae el nombre, y ahi detras hay
         espejo y pared clara: con 0.30 el texto blanco se disolvia. Se sube
         el medio y se mantiene el degradado para que la foto siga leyendose. */
      background: linear-gradient(180deg,
        rgba(15,17,15,0.46) 0%,
        rgba(15,17,15,0.44) 45%,
        rgba(15,17,15,0.80) 100%) !important;
    }
    /* Móvil: la foto entra en la banda de 180-220px que pide el brief.
       Se conseguía recortando lo que compone el alto —padding 88→42px, nombre
       58→44px— porque el alto lo manda el CONTENIDO y con el logo dentro
       sobraba. Al ocultar el logo para el carrusel (punto 3) desaparecieron de
       golpe sus ~96px y el mismo recorte se pasó de largo: medido en un iPhone
       de 390px, el hero quedó en 112px. La mitad de la banda, y con una foto
       que ya no se ve.

       Ahora el recorte se queda (la tipografía sigue bien así) y el alto lo
       pone un mínimo real. Es lo que corresponde cuando lo que tiene que
       mandar es la FOTO y no el texto encima: min-height no podía usarse para
       ACHICAR —es un piso, no un techo— pero para esto es justo la herramienta.

       (El margen superior que Templo heredaba de Aura ya no se corrige acá:
       se arregló en el origen, excluyendo `#bookingFrame` de la regla de la
       barra de progreso —ver el `:not(#bookingFrame)` de esa sección—, así que
       Aura y LatinCaribe dejaron de tener la misma franja.) */
    @media (max-width: 639.98px) {
      /* El contenido se centra en la banda. Con el alto puesto por `min-height`
         el texto quedaba clavado arriba: chocaba con el botón de volver y
         dejaba 88px de foto muerta abajo. Centrado, la flecha queda libre y el
         nombre cae sobre la zona alta del mesón, que es donde el degradado ya
         lo hace legible. */
      html.tenant-templo .booking-hero {
        min-height: 200px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
      }
      html.tenant-templo .booking-hero > div.z-10 {
        padding-top: 22px !important;
        padding-bottom: 20px !important;
      }
      html.tenant-templo #shopNombre .tpl-marca  { font-size: 1.5rem !important; }
      html.tenant-templo #shopNombre .tpl-bajada { font-size: 0.52rem !important; }
      html.tenant-templo .booking-hero .gold-divider {
        margin-top: 7px !important;
        margin-bottom: 7px !important;
      }
    }

    /* ── 3 · Logotipo ─────────────────────────────────────────────────
       NO se muestra en el hero. Las dos fotos del carrusel ya traen el
       logotipo del local (el letrero de la pared y el círculo del mesón) y
       justo debajo va el nombre en texto: la placa era la tercera marca en
       300px y saturaba. Se OCULTA, no se borra del DOM, porque el panel
       lateral de escritorio lee el `src` de #shopLogo para su propio logo
       (ver llenarPanel → #deskBrandLogo); si se quita, ese queda vacío.
       Si algún día las fotos dejan de mostrar el logotipo, revivir esto. */
    html.tenant-templo #heroLogoArea { display: none !important; }

    /* ── 8 · Progreso, con remate escalonado en los extremos ──────────
       Mismo gesto del portal, en pequeño y una sola vez más. El brief pide
       repetirlo poco: está acá y en el hero, en ningún otro sitio. */
    html.tenant-templo #progressTrack {
      background-color: var(--t-stone) !important;
      height: 2px !important;
      border-radius: 0 !important;
      position: relative;
    }
    html.tenant-templo #progressBar {
      background: var(--t-ink) !important;
      box-shadow: none !important;
      height: 2px !important;
      border-radius: 0 !important;
    }
    html.tenant-templo #progressTrack::before,
    html.tenant-templo #progressTrack::after {
      content: '';
      position: absolute;
      top: -3px;
      width: 1px; height: 8px;
      background: var(--t-stone);
    }
    html.tenant-templo #progressTrack::before { left: 0; }
    html.tenant-templo #progressTrack::after  { right: 0; }
    html.tenant-templo #stepIndicatorText {
      color: var(--t-muted) !important;
      font-weight: 700 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      text-shadow: none !important;
      font-size: 0.68rem !important;
    }
    html.tenant-templo #progressPercentage {
      color: var(--t-muted) !important;
      font-size: 0.68rem !important;
      font-weight: 500 !important;
    }

    /* ── 6 · Buscador y categorías ────────────────────────────────────
       Rectángulos de esquinas suavizadas. Activa = negra con texto blanco;
       el resto, superficie clara con borde visible. Alto cómodo para el
       pulgar sin que las filas crezcan. */
    html.tenant-templo #svcSearchWrap {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      box-shadow: var(--t-shadow) !important;
    }
    html.tenant-templo #svcSearchInput {
      background: transparent !important;
      color: var(--t-ink) !important;
    }
    html.tenant-templo #svcSearchInput::placeholder { color: var(--t-muted) !important; opacity: 1 !important; }
    html.tenant-templo #svcSearchWrap i             { color: var(--t-muted) !important; }
    html.tenant-templo #svcSearchWrap:focus-within {
      border-color: var(--t-olive) !important;
      box-shadow: 0 0 0 3px var(--t-olive-wash) !important;
    }

    html.tenant-templo .category-pill {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 7px !important;
      color: var(--t-muted) !important;
      padding: 0.5rem 0.9rem !important;
      min-height: 38px !important;
      box-shadow: none !important;
      transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
    }
    html.tenant-templo .category-pill:hover { border-color: var(--t-muted) !important; color: var(--t-ink) !important; }
    html.tenant-templo .category-pill.border-neon,
    html.tenant-templo .category-pill.text-neon,
    html.tenant-templo .category-pill.active {
      background: var(--t-ink) !important;
      border-color: var(--t-ink) !important;
      color: #FFFFFF !important;
      box-shadow: var(--t-shadow) !important;
    }

    /* ── 5 · Tarjetas de servicios como placas minerales ──────────────
       Filas compactas, fondo blanco, 8px de radio, borde discreto.
       El borde es SIEMPRE de 1px y la franja lateral es un inset
       box-shadow: ni el borde ni la franja ocupan caja, así que
       seleccionar no mueve un solo píxel. Eso es lo que pide el brief
       cuando dice que el estado no debe provocar saltos. */
    html.tenant-templo .service-option {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      box-shadow: none !important;
      transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
    }
    html.tenant-templo .service-option:hover { border-color: var(--t-muted) !important; }
    html.tenant-templo .service-option .svc-name  { color: var(--t-ink) !important; }
    html.tenant-templo .service-option .svc-desc  { color: var(--t-muted) !important; }
    html.tenant-templo .service-option .price-tag { color: var(--t-ink) !important; }
    html.tenant-templo .service-option .duration-tag {
      color: var(--t-muted) !important;
      background: var(--t-bg) !important;
      border: 1px solid var(--t-stone) !important;
    }
    html.tenant-templo .service-option .icon-bg {
      background: var(--t-bg) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 6px !important;
    }
    html.tenant-templo .service-option .icon-svg,
    html.tenant-templo .service-option .icon-bg i { color: var(--t-muted) !important; }

    html.tenant-templo .service-option.border-neon,
    html.tenant-templo .service-option.bg-brand-neon\/10 {
      background: var(--t-olive-wash) !important;
      border-color: var(--t-olive) !important;
      box-shadow: inset 3px 0 0 0 var(--t-olive) !important;
    }
    html.tenant-templo .service-option.border-neon .svc-name,
    html.tenant-templo .service-option.border-neon .price-tag { color: var(--t-ink) !important; }
    html.tenant-templo .service-option.border-neon .icon-bg {
      background: #FFFFFF !important;
      border-color: var(--t-olive-line) !important;
    }
    html.tenant-templo .service-option.border-neon .icon-svg,
    html.tenant-templo .service-option.border-neon .icon-bg i { color: var(--t-olive) !important; }

    /* El indicador que YA existe, reforzado: se rellena de oliva. */
    html.tenant-templo .svc-radio,
    html.tenant-templo .barber-radio {
      border: 1.5px solid var(--t-stone) !important;
      background: var(--t-surface) !important;
    }
    html.tenant-templo .service-option.border-neon .svc-radio,
    html.tenant-templo .barber-option.border-neon .barber-radio {
      border-color: var(--t-olive) !important;
      background: var(--t-olive) !important;
      box-shadow: inset 0 0 0 3px #FFFFFF !important;
    }
    html.tenant-templo .service-option.border-neon .svc-check { color: var(--t-olive) !important; }

    /* ── Neutralizar la capa "selfservice" del estado elegido ────────
       Todo tenant dinámico arrastra `html.tenant-selfservice`, que pinta lo
       seleccionado con vocabulario de tema OSCURO: gradiente radial del
       acento, glow de 34px, un barrido de luz animado (`ss-sweep`) y un
       translateY(-3px) que despega la fila. Sobre superficies minerales
       claras eso se lee como un error de render, y el translateY es
       justamente el salto que el brief pide evitar. Se apaga entero y queda
       lo de Templo: tinte, borde y franja. */
    html.tenant-templo .service-option.border-neon,
    html.tenant-templo .barber-option.border-neon,
    html.tenant-templo .service-option.bg-brand-neon\/10,
    html.tenant-templo .barber-option.bg-brand-neon\/10 {
      background-image: none !important;
      transform: none !important;
      border-color: var(--t-olive) !important;
      box-shadow: inset 3px 0 0 0 var(--t-olive) !important;
    }
    html.tenant-templo .service-option.border-neon::after,
    html.tenant-templo .barber-option.border-neon::after {
      content: none !important;
      animation: none !important;
      background: none !important;
    }

    /* Y la misma capa EN REPOSO: un filo blanco hacia dentro mas una sombra
       negra al 35%, pensados para tarjetas oscuras. Sobre blanco el filo no
       existe y la sombra ensucia. Se apagan; el cuerpo de la placa lo dan el
       borde piedra y el tono, no una sombra. */
    html.tenant-templo .service-option:not(.border-neon),
    html.tenant-templo .barber-option:not(.border-neon) {
      box-shadow: none !important;
    }
    @media (hover: hover) {
      html.tenant-templo .service-option:not(.border-neon):hover,
      html.tenant-templo .barber-option:not(.border-neon):hover {
        transform: none !important;
        border-color: var(--t-muted) !important;
        box-shadow: none !important;
      }
    }

    /* ── 7 · Profesionales, fechas y horarios ─────────────────────────
       El mismo lenguaje de placas y el mismo oliva para lo elegido, para
       que reconocer el estado activo sea idéntico durante todo el
       recorrido. Las fotos se unifican en tamaño y encuadre. */
    html.tenant-templo .barber-option {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      box-shadow: none !important;
      transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
    }
    html.tenant-templo .barber-option:hover { border-color: var(--t-muted) !important; }
    html.tenant-templo .barber-option .barber-name { color: var(--t-ink) !important; }
    html.tenant-templo .barber-option p,
    html.tenant-templo .barber-option span         { color: var(--t-muted) !important; }
    html.tenant-templo .barber-option img.rounded-full,
    html.tenant-templo .barber-option .barber-avatar {
      width: 52px !important; height: 52px !important;
      object-fit: cover !important; object-position: center top !important;
      border: 1px solid var(--t-stone) !important;
      box-shadow: none !important;
      filter: none !important;
    }
    html.tenant-templo .barber-option.border-neon,
    html.tenant-templo .barber-option.bg-brand-neon\/10 {
      background: var(--t-olive-wash) !important;
      border-color: var(--t-olive) !important;
      box-shadow: inset 3px 0 0 0 var(--t-olive) !important;
    }
    html.tenant-templo .barber-option.border-neon img.rounded-full,
    html.tenant-templo .barber-option.border-neon .barber-avatar { border-color: var(--t-olive-line) !important; }

    html.tenant-templo .day-btn {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      color: var(--t-muted) !important;
      box-shadow: none !important;
      transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
    }
    html.tenant-templo .day-btn .day-num { color: var(--t-ink) !important; filter: none !important; }
    html.tenant-templo .day-btn.border-neon,
    html.tenant-templo .day-btn.active {
      background: var(--t-olive-wash) !important;
      border-color: var(--t-olive) !important;
      color: var(--t-olive) !important;
      box-shadow: inset 0 -3px 0 0 var(--t-olive) !important;
    }
    html.tenant-templo .day-btn.border-neon .day-num,
    html.tenant-templo .day-btn.active .day-num { color: var(--t-ink) !important; }
    html.tenant-templo .day-btn .dot.bg-neon    { background: var(--t-olive) !important; }

    html.tenant-templo .time-pill {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      color: var(--t-ink) !important;
      font-weight: 600 !important;
      transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
    }
    html.tenant-templo .time-pill:hover:not([disabled]) { border-color: var(--t-muted) !important; }
    html.tenant-templo .time-pill.border-neon,
    html.tenant-templo .time-pill.text-neon,
    html.tenant-templo .time-pill.active {
      background: var(--t-olive-wash) !important;
      border-color: var(--t-olive) !important;
      color: var(--t-ink) !important;
      box-shadow: inset 3px 0 0 0 var(--t-olive) !important;
    }
    html.tenant-templo .time-pill[disabled] {
      background: var(--t-bg) !important;
      border-color: var(--t-stone) !important;
      color: #A6AAA2 !important;
    }

    /* ── 9 · Resumen de reserva ───────────────────────────────────────
       Placa ligeramente elevada sobre el gris piedra. El orden lo ponen la
       alineación y los separadores finos; el total es lo único que sube de
       peso. Sin marca de agua: no hay un símbolo suelto del logo, y usar el
       logotipo completo al 4% se lee como una mancha, no como textura. */
    html.tenant-templo #resumenReserva {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      box-shadow: var(--t-shadow-up) !important;
    }
    html.tenant-templo #resumenReserva > div + div {
      border-top: 1px solid var(--t-stone) !important;
    }
    html.tenant-templo #summaryService,
    html.tenant-templo #summaryBarber,
    html.tenant-templo #summaryDateString,
    html.tenant-templo #summaryTime {
      color: var(--t-ink) !important;
      font-weight: 600 !important;
    }
    html.tenant-templo #summaryPrice {
      color: var(--t-ink) !important;
      font-weight: 800 !important;
      font-size: 1.15rem !important;
      letter-spacing: -0.02em !important;
    }

    /* ── 10 · Botón principal y barra inferior ────────────────────────
       Negro mate, texto blanco, un filo de luz muy tenue arriba y sombra
       corta. Al pulsarlo baja 1px: una pieza sólida que se apoya, no un
       botón que se encoge. La etiqueta y el comportamiento no se tocan. */
    html.tenant-templo #btnContinueBar {
      background: rgba(245,245,241,0.94) !important;
      border-top: 1px solid var(--t-stone) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      box-shadow: none !important;
    }
    html.tenant-templo #btnContinue {
      background: var(--t-ink) !important;
      color: #FFFFFF !important;
      border: none !important;
      border-radius: 8px !important;
      letter-spacing: 0.01em !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14),
                  0 2px 6px rgba(23,25,23,0.18) !important;
      transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
    }
    html.tenant-templo #btnContinue:active:not([disabled]) {
      transform: translateY(1px) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
                  0 1px 3px rgba(23,25,23,0.20) !important;
    }
    html.tenant-templo #btnContinue[disabled] {
      background: #C7CAC3 !important;
      color: #6E726B !important;
      box-shadow: none !important;
    }

    /* ── Separadores y tiras de info ──────────────────────────────────── */
    html.tenant-templo .gold-divider {
      background: var(--t-stone) !important;
      height: 1px !important;
      box-shadow: none !important;
    }
    /* El `[style]` NO es decorativo: el markup trae `background:rgba(10,8,7,.8)`
       inline y el tema base lo pisa con `.info-strip[style]`, que pesa (0,3,0).
       Un `.info-strip` pelado pierde contra eso y la barra sale oscura sobre
       fondo claro. Mismo recurso que usan invictus, metropolitan y alfamen. */
    html.tenant-templo .info-strip,
    html.tenant-templo .info-strip[style] {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      box-shadow: var(--t-shadow) !important;
    }
    html.tenant-templo .info-strip i,
    html.tenant-templo .info-strip a,
    html.tenant-templo .info-strip button,
    html.tenant-templo .info-strip span,
    html.tenant-templo .info-strip > * { color: var(--t-muted) !important; }
    html.tenant-templo .info-strip a:hover,
    html.tenant-templo .info-strip button:hover { color: var(--t-ink) !important; }
    /* Los separadores internos son `border-white/5`: invisibles sobre blanco. */
    html.tenant-templo .info-strip > a,
    html.tenant-templo .info-strip > button { border-color: var(--t-stone) !important; }

    /* "Quiénes somos": el tema base lo deja translúcido para que funcione
       sobre foto oscura. Sobre el fondo mineral desaparecía. */
    html.tenant-templo .tenant-quienes-line,
    html.tenant-templo .psi-quienes-line {
      color: var(--t-muted) !important;
      opacity: 1 !important;
      text-shadow: none !important;
    }
    html.tenant-templo .tenant-quienes-line i,
    html.tenant-templo .psi-quienes-line i { color: var(--t-olive) !important; }
    html.tenant-templo #shopSlogan       { color: var(--t-muted) !important; }
    html.tenant-templo h2.text-neon,
    html.tenant-templo .text-neon        { color: var(--t-ink) !important; }

    /* ── AUTOSUFICIENCIA: no depender de `theme-light` ────────────────
       Este bloque se escribio asumiendo que el tenant llegaria con
       `theme-light` (lo trae `tema: 'aura'` desde Firestore). Mientras el
       seed no se corra —y en produccion, si ese dato faltara— <html> se
       queda en `theme-dark` y el tema base sigue repartiendo BLANCO y
       superficies casi negras sobre un fondo que aqui ya es claro: los
       titulos de categoria salian a 1.07:1, o sea invisibles.

       Asi que el redisenio no delega el modo claro: lo garantiza el mismo.
       Con `theme-light` estas reglas son redundantes y no hacen danio;
       sin el, son las que evitan que la agenda quede ilegible. */

    /* 1 · Superficies que el tema base deja oscuras. Medidas una a una:
       fuera del hero solo quedaban estas tres (la category-pill activa SI
       debe seguir negra, y por eso no esta aqui). */
    html.tenant-templo #clubBanner .group,
    html.tenant-templo #clubBanner > a,
    html.tenant-templo main .rounded-2xl.overflow-hidden,
    html.tenant-templo #deskResumenCard {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
      box-shadow: var(--t-shadow) !important;
    }
    /* Banner de consentimiento: es global, no de Templo, pero sobre fondo
       mineral un panel casi negro rompe la pagina entera. */
    html.tenant-templo .sptl-banner {
      background: rgba(255,255,255,0.97) !important;
      border-top: 1px solid var(--t-stone) !important;
    }
    html.tenant-templo .sptl-banner,
    html.tenant-templo .sptl-banner :is(p, span, div, strong, b) {
      color: var(--t-ink) !important;
    }
    html.tenant-templo .sptl-banner a { color: var(--t-olive) !important; }
    /* El boton traia violeta de sistema: con la paleta de Templo desentonaba
       mas que el propio banner. Negro mate, igual que el boton principal. */
    html.tenant-templo .sptl-banner button {
      background: var(--t-ink) !important;
      color: #FFFFFF !important;
      border: none !important;
      border-radius: 8px !important;
    }

    /* 2 · El blanco del tema oscuro, reconducido a tinta. `[class*=]` cubre
       de una vez text-white y todas sus variantes de opacidad
       (text-white/80, /70, /50...), que son clases distintas para el CSS. */
    html.tenant-templo :is([class*="text-white"], .cat-title, .text-neon, .text-brand-neon) {
      color: var(--t-ink) !important;
    }
    /* El titulo de categoria lleva una franja a la izquierda: en oliva es el
       mismo gesto que la franja del servicio elegido. */
    html.tenant-templo .cat-title {
      border-left-color: var(--t-olive) !important;
    }
    /* Panel de marca del ESCRITORIO: no existe en movil, por eso no aparecio
       en las primeras pasadas. Fondo claro con texto blanco: 1.09:1. */
    html.tenant-templo #deskBrand,
    html.tenant-templo #deskBrandInfo,
    html.tenant-templo #deskBrandInfo *,
    html.tenant-templo #deskBrandNombre {
      color: var(--t-ink) !important;
    }
    html.tenant-templo #deskBrandSlogan,
    html.tenant-templo #deskResumenCard :is(.text-gray-400, .text-gray-500) {
      color: var(--t-muted) !important;
    }
    /* Panel lateral "Tu reserva" del escritorio: la tarjeta ya es blanca pero
       su contenido seguia en blanco (1:1). Los rotulos en gris, los valores
       en tinta — que es la jerarquia que pide el punto 9 del brief. */
    html.tenant-templo #deskResumen,
    html.tenant-templo #deskResumen :is(p, span, div, strong, h3, h4) {
      color: var(--t-ink) !important;
    }
    html.tenant-templo .desk-res-label {
      color: var(--t-muted) !important;
    }

    /* 2b · Pasos 3 y 4. No se ven hasta avanzar en la reserva, asi que no
       aparecieron hasta recorrer el flujo entero paso a paso. */
    html.tenant-templo #currentMonthText,
    html.tenant-templo .text-brand-text {
      color: var(--t-ink) !important;
    }
    /* Bloque "Agenda al instante": el titulo venia en blanco al 65% (1:1
       contra el fondo) y las horas sugeridas en ambar sobre crema (1.6:1).
       Las horas son el elemento con el que se INTERACTUA en este paso. */
    html.tenant-templo #smartSlotsContainer,
    html.tenant-templo #smartSlotsContainer :is(p, span, div, h3, h4) {
      color: var(--t-ink) !important;
    }
    html.tenant-templo .smart-slot-pill {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-olive-line) !important;
      color: var(--t-olive) !important;
      font-weight: 600 !important;
    }
    /* Club: el CTA sale sobre el acento oliva y traia texto casi negro
       (3.04:1). Sobre oliva el blanco mide 6.1:1. OJO: la regla tiene que
       apuntar SOLO al elemento con fondo oliva — un `.club-anim-el *` a secas
       pinto de blanco textos que estaban sobre blanco y creo 10 fallos
       nuevos. Se apunta al boton por su fondo, no a la familia de clases. */
    html.tenant-templo #step4AuthContainer a.club-anim-el,
    html.tenant-templo #step4AuthContainer a.club-anim-el i {
      background: var(--t-ink) !important;
      color: #FFFFFF !important;
      box-shadow: var(--t-shadow) !important;
    }
    html.tenant-templo #step4AuthContainer a.club-anim-el i { background: none !important; }
    /* "Iniciar sesion" en oliva al 80% sobre gris claro no llegaba (2.99:1);
       en tinta mide 10.8:1 y sigue leyendose como enlace por el subrayado. */
    html.tenant-templo #step4AuthContainer button,
    html.tenant-templo #step4AuthContainer a {
      color: var(--t-ink) !important;
    }


    /* 2c · Campos del formulario (paso 4). Aqui el fallo no lo veia la
       auditoria de contraste porque un input VACIO no tiene texto que medir:
       lo que se rompe es lo que la persona ESCRIBE. Los campos se quedaron
       con el fondo casi negro del tema base (#0a0a0d) mientras el texto ya
       era tinta (#171917): negro sobre negro, imposible leer lo tecleado.
       Se les da la misma superficie que a las demas placas. */
    html.tenant-templo :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
      background: var(--t-surface) !important;
      color: var(--t-ink) !important;
      border: 1px solid var(--t-stone) !important;
      border-radius: 8px !important;
      caret-color: var(--t-olive) !important;
    }
    html.tenant-templo :is(input, textarea)::placeholder {
      color: var(--t-muted) !important;
      opacity: 1 !important;
    }
    html.tenant-templo :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
      border-color: var(--t-olive) !important;
      box-shadow: 0 0 0 3px var(--t-olive-wash) !important;
      outline: none !important;
    }
    /* El autorrelleno de Chrome repinta el fondo con su propio amarillo y se
       lleva por delante cualquier background: se neutraliza con un inset que
       cubre la caja y forzando el color del texto. */
    html.tenant-templo :is(input, textarea):-webkit-autofill {
      -webkit-text-fill-color: var(--t-ink) !important;
      -webkit-box-shadow: 0 0 0 1000px var(--t-surface) inset !important;
      caret-color: var(--t-olive) !important;
    }
    /* Casillas y radios quedan fuera de la regla de arriba: darles fondo y
       borde de caja de texto los deja irreconocibles. Solo se les pone el
       acento, que es lo que el navegador usa para el estado marcado. */
    html.tenant-templo input:is([type="checkbox"], [type="radio"]) {
      accent-color: var(--t-olive) !important;
    }

    /* Aura fija los campos del paso 4 con `#step4 input[type="text"]`, que
       pesa (1,2,1): su zinc #18181B se lee bien, pero no es la tinta de esta
       paleta. Repetir la clase sube a (1,2,2) y devuelve la coherencia. */
    html.tenant-templo.tenant-templo #step4 input,
    html.tenant-templo.tenant-templo #step4 textarea {
      background: var(--t-surface) !important;
      color: var(--t-ink) !important;
      border: 1px solid var(--t-stone) !important;
    }
    html.tenant-templo.tenant-templo #step4 input:focus,
    html.tenant-templo.tenant-templo #step4 textarea:focus {
      border-color: var(--t-olive) !important;
      box-shadow: 0 0 0 3px var(--t-olive-wash) !important;
    }

    /* El buscador de servicios ya tiene su propia caja (#svcSearchWrap); su
       input va transparente para no dibujar una caja dentro de otra. */
    html.tenant-templo #svcSearchInput {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* 2d · Refuerzo de especificidad para los blancos con opacidad.
       `text-white/50`, `/30`, `/70` son clases DISTINTAS para el CSS, y el
       tema claro las remapea a un gris (rgb(142,147,153)) con mas peso que
       un `.tenant-templo` simple. Repetir la clase —.tenant-templo dos
       veces— sube la especificidad sin recurrir a un ID, que es el truco
       estandar para este caso. Solo se ve con `theme-light` puesto, o sea
       en el estado que habra en produccion: por eso no salio antes. */
    html.tenant-templo.tenant-templo [class*="text-white"] {
      color: var(--t-ink) !important;
    }
    /* Rotulos y encabezados: secundarios, no tinta plena. */
    html.tenant-templo.tenant-templo label,
    html.tenant-templo.tenant-templo label[class*="text-white"],
    html.tenant-templo.tenant-templo #resumenReserva [class*="text-white"] {
      color: var(--t-muted) !important;
    }
    /* El dia del carrusel: el <span> interno traia blanco al 70% y quedaba a
       1.14:1. Hereda del boton, que ya tiene el color correcto. */
    html.tenant-templo.tenant-templo .day-btn * {
      color: inherit !important;
    }

    /* 2e · Supremacia sobre la capa de IDs del tema Aura.
       Aura trae su propio juego de overrides para modo claro escrito con
       ID (`:is(.tenant-aura,...) #step4 label`, `#selectionRecap`, etc.), que
       pesan (1,1,1). Ninguna cantidad de clases gana a eso, asi que estas
       reglas repiten el ID para poder competir. El gris que elige Aura
       (#8E9399 / #9CA3AF) ronda 2.5-2.8:1 sobre superficies minerales: le
       sirve a su paleta, no a esta. Se reconduce a `--t-muted`. */
    html.tenant-templo #step4 label,
    html.tenant-templo #step4 .mt-6.rounded-2xl [class*="text-white"],
    html.tenant-templo #step4 .mt-6.rounded-2xl :is(.text-gray-500, .text-gray-400),
    html.tenant-templo #selectionRecap,
    html.tenant-templo #selectionRecap *,
    html.tenant-templo #barberosGrid [class*="text-gray"],
    html.tenant-templo #extrasSection p[class*="uppercase"],
    html.tenant-templo #footerContact .w-10 i {
      color: var(--t-muted) !important;
    }
    /* La caja de "¿Ya tienes cuenta?" venia en gris medio (#ccc): sobre ese
       fondo ni la tinta secundaria llegaba. Se aclara a superficie y el
       texto vuelve a medir de sobra. */
    html.tenant-templo #step4AuthContainer .rounded-2xl {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
    }
    html.tenant-templo #step4 .mt-6.rounded-2xl {
      background: var(--t-surface) !important;
      border: 1px solid var(--t-stone) !important;
    }
    /* "Disponible para reservas" de cada profesional NO es un gris: lleva
       `.text-brand-neon`, que Aura manda a #9CA3AF (2.54:1). Es un indicador
       positivo, asi que va en oliva —el mismo verde de lo elegido— y mide
       6.34:1 sobre la placa blanca. */
    html.tenant-templo #barberosGrid .text-brand-neon {
      color: var(--t-olive) !important;
    }
    /* Pie de la tarjeta del club ("¿Ya tienes cuenta?"): traia fondo gris
       medio propio, donde ni la tinta secundaria llegaba. Es un <div>; el
       CTA de al lado es un <a> y conserva su negro. */
    html.tenant-templo #step4AuthContainer div.club-anim-el {
      background: var(--t-bg) !important;
      border-color: var(--t-stone) !important;
    }

    /* 3 · Y el hero recupera el blanco: ahi va sobre FOTO, no sobre color.
       Esta regla va despues de la del punto 2 a proposito. */
    html.tenant-templo.tenant-templo .booking-hero :is([class*="text-white"], .text-neon, .text-brand-neon),
    html.tenant-templo.tenant-templo .booking-hero label {
      color: #FFFFFF !important;
    }

    /* 3b · Y la hoja de extras igual: su fondo (#0a0807) esta escrito a mano
       en el HTML con una arbitraria de Tailwind, asi que NO sigue al tema.
       El punto 2 le pintaba la tinta encima y el "Cerrar" quedaba a 1.13:1
       —negro sobre negro, invisible—. Se devuelve el blanco a todo lo que
       va sobre esa superficie, conservando la jerarquia original: el titulo
       y el boton de WhatsApp en blanco pleno, el "Cerrar" y el cuerpo
       apagados pero legibles (6.3:1 y 5.2:1 sobre #0a0807). */
    html.tenant-templo.tenant-templo #chameleon-extras-sheet [class*="text-white"] {
      color: #FFFFFF !important;
    }
    html.tenant-templo.tenant-templo #chameleon-extras-sheet [class*="text-white/"] {
      color: rgba(255,255,255,0.55) !important;
    }
    html.tenant-templo.tenant-templo #chameleon-extras-sheet :is(.text-gray-300, .text-gray-400, .text-gray-500) {
      color: rgba(255,255,255,0.62) !important;
    }

    /* ── Contraste: los grises heredados del tema oscuro ──────────────
       La plataforma es dark-first y reparte grises de Tailwind (gray-300 a
       gray-500, zinc-500) pensados para leerse sobre negro. Sobre las
       superficies minerales quedan entre 1.4:1 y 2.6:1 — texto que
       literalmente no se ve. Se reconducen todos a `--t-muted`, que mide
       4.97:1 sobre el fondo y 5.57:1 sobre las tarjetas: AA en ambos.
       Auditado elemento por elemento, no a ojo. */
    html.tenant-templo :is(.text-gray-300, .text-gray-400, .text-gray-500,
                           .text-gray-600, .text-zinc-400, .text-zinc-500,
                           .text-zinc-600, .text-neutral-400,
                           .text-neutral-500) {
      color: var(--t-muted) !important;
    }
    html.tenant-templo #shopClubNombre,
    html.tenant-templo .info-strip span,
    html.tenant-templo .tenant-quienes-line span,
    html.tenant-templo .psi-quienes-line span {
      color: var(--t-muted) !important;
    }
    /* "Ver más" es un CONTROL, no texto secundario: en oliva (6.34:1) se lee
       y además se anuncia como pulsable, que es lo que estaba fallando. */
    html.tenant-templo .svc-desc-toggle {
      color: var(--t-olive) !important;
      font-weight: 600 !important;
    }

    /* Los cuatro focos que el barrido de clases no alcanza, porque el color
       no viene de una clase del propio elemento sino heredado de su bloque.
       Localizados uno a uno con la auditoría, no por sospecha. */
    html.tenant-templo #quienesSomosBtn,
    html.tenant-templo #quienesSomosBtn span,
    /* El botón de la tienda es hermano de "Quiénes somos" (misma .qs-btn) y
       hereda el gris claro del tema oscuro: sobre el fondo claro daba 1.24:1
       y el texto no se veía. Va con el mismo color que su hermano. */
    html.tenant-templo #tiendaBtn,
    html.tenant-templo #tiendaBtn span,
    html.tenant-templo #tiendaBtn i,
    html.tenant-templo #clubBanner #shopClubNombre,
    html.tenant-templo #shopDireccionLink span,
    html.tenant-templo #shopDireccionLink div,
    html.tenant-templo #footerContact a,
    html.tenant-templo #footerContact span,
    html.tenant-templo #footerContact p,
    html.tenant-templo #footerContact p[class*="uppercase"] {
      color: var(--t-muted) !important;
    }
    /* Las etiquetas "UBICACIÓN" / "HORARIO" de las tarjetas de abajo: 10px en
       gray-400 sobre blanco daban 2.54:1. Son rótulos, no adorno.
       Dos trampas que costaron encontrar, anotadas para el proximo:
       1) NO se puede usar [class*="text-[10px]"] — los corchetes sin escapar
          hacen invalido el selector y CSS descarta la regla ENTERA, llevandose
          por delante al selector bueno que va al lado.
       2) Estos rotulos viven en #footerContact y el tema Aura los pisa con
          `:is(.tenant-aura,...) #footerContact p[class*="uppercase"]`, que
          lleva un ID: (1,2,1). Ninguna cantidad de CLASES gana a un ID, asi
          que el selector de arriba necesita el #footerContact para competir.
          Encima el <p> trae un color dorado inline; de ahi el !important. */
    html.tenant-templo .rounded-2xl .uppercase.font-bold {
      color: var(--t-muted) !important;
    }

    /* Sobre la FOTO del hero manda lo contrario: ahí el texto va claro. Esta
       regla viene después de la anterior a propósito — el eslogan quedaba en
       gris oscuro sobre la foto, a 2.69:1. */
    html.tenant-templo .booking-hero #shopSlogan,
    html.tenant-templo .booking-hero :is(.text-gray-300, .text-gray-400, .text-gray-500) {
      color: rgba(255,255,255,0.88) !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
    }

    /* Botón inactivo: #6E726B sobre #C7CAC3 daba 2.96:1 y el "Selecciona un
       servicio" no se leía justo cuando más importa. Ahora 6.1:1. */
    html.tenant-templo #btnContinue[disabled] {
      background: #DDDFD8 !important;
      color: #4A4E47 !important;
    }

    /* Foco visible: el oliva también es el color de foco, como pide el
       punto 1. Sin esto el tema claro deja el outline por defecto, que
       sobre blanco casi no se ve. */
    html.tenant-templo :is(button, a, input, select, textarea):focus-visible {
      outline: 2px solid var(--t-olive) !important;
      outline-offset: 2px !important;
    }

    @media (prefers-reduced-motion: reduce) {
      html.tenant-templo .service-option,
      html.tenant-templo .barber-option,
      html.tenant-templo .category-pill,
      html.tenant-templo .day-btn,
      html.tenant-templo .time-pill,
      html.tenant-templo #btnContinue {
        transition: none !important;
      }
    }
    /* ═══ TEMPLO SALÓN MASCULINO · FIN ═══════════════════════════════ */