@media (min-width: 768px) {
      
      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;
      }
      
      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));
      }
      
      #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);
      }
      
      #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);
      }
      
      #btnContinueBar > div { max-width: 42rem; }
      
      #btnContinueBar #btnContinue { margin-left: auto !important; margin-right: auto !important; }

      

      
      #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;
      }

      
      #servicesGrid .grid.grid-cols-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      
      #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) {
      
      #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;
        
        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;
      }
      
      #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; }

      
      #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;
      }
    }
    
    @media (max-width: 1439.98px) { #deskResumen { display: none; } }