@media (min-width: 768px) {
      /* Ambiente: brillos del acento sobre el fondo del tenant. Solo
         background-image: el COLOR base sigue saliendo de `.tenant-X body`
         (más específico que esto), y un tenant con textura propia en el
         body le gana a estos brillos — su diseño manda. */
      body {
        background-image:
          radial-gradient(55rem 38rem at 82% -8%,  rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.09), transparent 62%),
          radial-gradient(46rem 34rem at -6% 104%, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.05), transparent 58%);
        background-attachment: fixed;
      }
      /* En tema claro los brillos al 9% desaparecen contra el fondo blanco
         (reporte de Ignacio con clinicalglow: "gris liso"). Más acento y un
         viñeteado frío suave para que el marco flote. */
      html.theme-light body {
        background-image:
          radial-gradient(55rem 38rem at 82% -8%,  rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.16), transparent 62%),
          radial-gradient(46rem 34rem at -6% 104%, rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.10), transparent 58%),
          radial-gradient(130rem 90rem at 50% -10%, transparent 55%, rgba(15,23,42,0.06));
      }
      /* Columna ANCHA en tablet/escritorio (OK de Ignacio 24-08: los locales
         operan la agenda en iPad). 42rem = 672px: las filas de servicio
         respiran, caben más horas por fila y más días en el carrusel, sin
         reestructurar nada — las listas son apiladas y fluidas. El id le
         gana al max-w-md del markup sin !important. */
      #bookingFrame {
        max-width: 42rem;
        margin-top: 2.25rem;
        margin-bottom: 2.25rem;
        border-radius: 22px;
        border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.15);
        box-shadow: 0 28px 70px rgba(0,0,0,0.5);
      }
      html.theme-light #bookingFrame {
        border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.28);
        box-shadow: 0 22px 55px rgba(15,23,42,0.14);
      }
      /* La barra Continuar deja de cruzar toda la pantalla: se acota al
         ancho de la columna (42rem), desde el mismo breakpoint en que el
         frame se vuelve tarjeta. Solo geometría — colores y overrides por
         tenant/tema quedan como estaban. */
      #btnContinueBar {
        left: 50%;
        right: auto;
        width: 42rem;
        max-width: 100vw;
        transform: translateX(-50%);
        border-radius: 18px 18px 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.22);
      }
      /* Su contenido interno trae max-w-md del markup móvil: acá acompaña
         a la columna ancha. */
      #btnContinueBar > div { max-width: 42rem; }

      /* ── Densificación con la columna ancha ─────────────────────────
         Solo containers cuyos hijos son TARJETAS autocontenidas. Las
         familias de lista con divisores (gap-0, p.ej. renacer) quedan
         fuera a propósito: una grilla les rompe los bordes compartidos. */

      /* Profesionales en 2 columnas. renderBarbers pone la clase por
         familia: los `flex flex-col` (tarjetas apiladas del estándar y
         filas de barbersclub) pasan a grilla; los que ya son `grid`
         (sionbarberia, mapu, chameleon) no calzan con este selector.
         "Sin preferencia" (primer hijo) se queda a lo ancho: es la
         opción default y no compite con ningún profesional. */
      #barberosGrid.flex.flex-col:not(.gap-0) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #barberosGrid.flex.flex-col:not(.gap-0) > :first-child {
        grid-column: 1 / -1;
      }

      /* Grilla cuadrada legacy de servicios (gitana y compañía): con
         672px caben 3 tarjetas por fila sin apretar. */
      #servicesGrid .grid.grid-cols-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      /* Paso 4: nombre y teléfono lado a lado; todo lo demás (correo,
         ficha clínica, consentimiento, opt-in) sigue a lo ancho. El
         space-y-4 del markup se traduce a gap para que el ritmo
         vertical no cambie (ambos son 1rem). */
      #step4 .space-y-4 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
      }
      #step4 .space-y-4 > * { margin-top: 0; grid-column: 1 / -1; }
      #step4 .space-y-4 > div:has(> #clientName),
      #step4 .space-y-4 > div:has(> #clientPhone) { grid-column: auto; }
    }
    #deskBrand { display: none; }
    @media (min-width: 1440px) {
      /* Panel de marca en el pasillo izquierdo — solo monitores de verdad:
         con la columna de 42rem, en un iPad apaisado (≤1366px) el pasillo
         no da para el panel sin apretar. Decorativo (aria-hidden y sin
         eventos): duplica logo/nombre/slogan que el hero ya muestra, así
         que no depende de datos nuevos ni de ningún flujo existente. */
      #deskBrand {
        display: flex;
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: calc(50% - 23rem);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 0 3rem;
        text-align: center;
        color: #ffffff;
        pointer-events: none;
        /* Aparece recién cuando el hero sale de vista al scrollear: antes
           duplicaba logo/nombre/slogan a 30cm del hero (reporte de Ignacio).
           `.listo` = datos copiados; `.enfoco` = hero fuera de pantalla. */
        opacity: 0;
        transform: translateX(-12px);
        transition: opacity .45s ease, transform .45s ease;
      }
      #deskBrand.listo.enfoco { opacity: 1; transform: none; }
      html.theme-light #deskBrand { color: #0f172a; }
      #deskBrandLogoWrap {
        width: 108px; height: 108px; border-radius: 50%; overflow: hidden;
        border: 2px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.55);
        box-shadow: 0 0 34px rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.22);
        background: rgba(0,0,0,0.35);
      }
      html.theme-light #deskBrandLogoWrap { background: rgba(255,255,255,0.6); }
      #deskBrandLogo { width: 100%; height: 100%; object-fit: cover; }
      #deskBrandNombre { font-weight: 900; font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.1; }
      #deskBrandSep {
        width: 68px; height: 2px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
      }
      #deskBrandSlogan {
        font-size: 10px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.28em; opacity: 0.62; line-height: 1.7; max-width: 30ch;
      }
      /* Dirección y horario: los mismos datos del info-strip del hero,
         para que quien mira desde un monitor los tenga sin scrollear. */
      #deskBrandInfo {
        display: flex; flex-direction: column; gap: 7px;
        margin-top: 10px; font-size: 12.5px; font-weight: 600;
        opacity: 0.72; line-height: 1.5; max-width: 34ch;
      }
      #deskBrandInfo:empty { display: none; }
      #deskBrandInfo span { display: flex; align-items: center; justify-content: center; gap: 7px; }
      #deskBrandInfo i { color: var(--accent); font-size: 14px; }

      /* ── Mini-resumen de la reserva (pasillo derecho) ────────────────
         El beneficio real de un layout de dos columnas sin reestructurar
         nada: ver qué llevas mientras avanzas. Solo ESPEJA estado que ya
         existe (mismo patrón que el panel de marca) y muere bajo 1440px. */
      #deskResumen {
        display: flex;
        position: fixed;
        top: 0; bottom: 0; right: 0;
        width: calc(50% - 23rem);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 2.5rem;
        color: #ffffff;
        pointer-events: none;
        opacity: 0;
        transform: translateX(12px);
        transition: opacity .45s ease, transform .45s ease;
      }
      #deskResumen.con-datos { opacity: 1; transform: none; }
      html.theme-light #deskResumen { color: #0f172a; }
      #deskResumenCard {
        min-width: 210px; max-width: 270px;
        border-radius: 18px;
        border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.30);
        background: rgba(0,0,0,0.30);
        box-shadow: 0 14px 44px rgba(0,0,0,0.30);
        padding: 16px 20px 18px;
        text-align: left;
      }
      html.theme-light #deskResumenCard {
        background: rgba(255,255,255,0.72);
        box-shadow: 0 14px 40px rgba(15,23,42,0.10);
      }
      #deskResumenCard h4 {
        font-size: 10px; font-weight: 800; text-transform: uppercase;
        letter-spacing: 0.22em; color: var(--accent); margin: 0 0 10px;
      }
      .desk-res-row { margin-top: 9px; }
      .desk-res-row:first-of-type { margin-top: 0; }
      .desk-res-label {
        display: block; font-size: 9px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.5;
      }
      .desk-res-valor {
        display: block; font-size: 13.5px; font-weight: 600;
        line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere;
      }
    }
    /* Fuera del breakpoint el resumen no existe (igual que #deskBrand). */
    @media (max-width: 1439.98px) { #deskResumen { display: none; } }