/* =========================================================
   SITE · GLOBAL
   ========================================================= */

/* === MOBILE MENU TRANSITION ============================== */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

#mobile-menu.active {
    max-height: 400px;
    opacity: 1;
}

/* === GRAYSCALE === */
.grayscale-filter {
    filter: grayscale(100%);
    transition: filter 0.6s cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 768px) {
    .group:hover .grayscale-filter {
filter: grayscale(0%);
    }
}

.grayscale-filter-mobile-active {
    filter: grayscale(0%);
}

/* === HERO === */
.hero-overlay {
    background: linear-gradient(160deg, rgba(15, 15, 15, 0.3) 0%, rgba(41, 95, 143, 0.55) 40%, rgba(15, 15, 15, 0.85) 100%);
}

/* === NAVBAR === */
.nav-transparent {
    background: transparent;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
}

.nav-solid {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px) saturate(180%);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.06);
}

nav {
    transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Modificado para que no afecte al dropdown móvil */
.nav-transparent .desktop-link,
.nav-transparent button.nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.nav-transparent .desktop-link:hover,
.nav-transparent button.nav-link:hover {
    color: #DCAF57;
}

.nav-transparent .hamburger-icon {
    color: rgba(15, 15, 15, 0.3);
}

/* === GLASS PANEL === */
.glass-panel {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px) saturate(180%);
}

/* === EDITORIAL LINES === */
.editorial-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #DCAF57 0%, transparent 100%);
}

/* === SCROLLBAR HIDE === */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

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

/* === WIDGET ANIMATIONS === */
.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === PREMIUM BUTTONS === */
.btn-premium {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(.16, 1, .3, 1);
}

.btn-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #DCAF57 0%, #c9983d 100%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
    z-index: -1;
}

.btn-premium:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-premium:hover {
    color: #0f0f0f;
    border-color: transparent;
}

.btn-secondary {
    border: 1px solid rgba(220, 175, 87, 0.6);
    background: transparent;
}

.btn-secondary:hover {
    border-color: #DCAF57;
}

/* === GOLD SEPARATOR === */
.gold-sep {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #DCAF57, transparent);
    margin: 1.5rem auto;
}

/* === TEXTURE OVERLAY (editorial grain) === */
.texture-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 150px;
    z-index: 1;
}


/* =========================================================
   WIDGET DE TURNOS
   Una única fuente de estilos para #reservas.
   ========================================================= */

#reservas {
        --widget-bg: #0f1113;
        --widget-panel: #15191d;
        --widget-panel-soft: #1b2025;
        --widget-card: #181d22;
        --widget-card-hover: #20262c;
        --widget-text: #f7f4ee;
        --widget-muted: #a9adb1;
        --widget-line: rgba(220, 175, 87, 0.25);
        --widget-line-soft: rgba(255, 255, 255, 0.10);
        --widget-blue: #295f8f;
        --widget-gold: #DCAF57;
        --widget-shadow: 0 26px 70px rgba(0, 0, 0, .28);
        background:
            radial-gradient(circle at 15% 10%, rgba(41, 95, 143, .18), transparent 34%),
            radial-gradient(circle at 90% 80%, rgba(220, 175, 87, .08), transparent 30%),
            #0b0d0f;
        color: var(--widget-text);
        transition: background .35s ease, color .35s ease;
    }

    #reservas[data-theme="light"] {
        --widget-bg: #f7f4ee;
        --widget-panel: #ffffff;
        --widget-panel-soft: #f3f0ea;
        --widget-card: #fbfaf7;
        --widget-card-hover: #ffffff;
        --widget-text: #121416;
        --widget-muted: #6f7377;
        --widget-line: rgba(220, 175, 87, 0.42);
        --widget-line-soft: rgba(15, 15, 15, 0.10);
        --widget-shadow: 0 24px 60px rgba(31, 36, 41, .12);
        background:
            radial-gradient(circle at 10% 12%, rgba(41, 95, 143, .09), transparent 30%),
            radial-gradient(circle at 92% 82%, rgba(220, 175, 87, .12), transparent 32%),
            #f3f0ea;
    }

    #reservas .widget-shell {
        background: var(--widget-panel);
        border: 1px solid var(--widget-line-soft);
        box-shadow: var(--widget-shadow);
        transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
    }

    #reservas .widget-topbar {
        background:
            linear-gradient(110deg, rgba(41, 95, 143, .98), rgba(30, 67, 101, .98)),
            var(--widget-blue);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    #reservas .widget-content,
    #reservas .widget-summary,
    #reservas .widget-card,
    #reservas .widget-choice {
        transition: background .35s ease, border-color .35s ease, color .35s ease, transform .25s ease, box-shadow .25s ease;
    }

    #reservas .widget-content {
        background: var(--widget-panel);
    }

    #reservas .widget-card,
    #reservas .widget-choice {
        background: var(--widget-card);
        border: 1px solid var(--widget-line-soft);
        color: var(--widget-text);
    }

    #reservas .widget-card:hover,
    #reservas .widget-choice:hover {
        background: var(--widget-card-hover);
        border-color: rgba(220, 175, 87, .65);
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
    }

    #reservas .widget-card:focus-visible,
    #reservas .widget-choice:focus-visible,
    #reservas button:focus-visible {
        outline: 2px solid var(--widget-gold);
        outline-offset: 3px;
    }

    #reservas .widget-card[aria-pressed="true"],
    #reservas .widget-choice.is-selected {
        background: linear-gradient(135deg, var(--widget-blue), #1f4c74);
        border-color: var(--widget-gold);
        color: white;
        box-shadow: 0 14px 30px rgba(41, 95, 143, .24);
    }

    #reservas .widget-card[aria-pressed="true"] .muted,
    #reservas .widget-choice.is-selected .muted {
        color: rgba(255, 255, 255, .75);
    }

    #reservas .widget-summary {
        background: linear-gradient(160deg, var(--widget-panel-soft), var(--widget-card));
        border: 1px solid var(--widget-line);
    }

    #reservas .widget-title {
        color: var(--widget-text);
    }

    #reservas .widget-muted {
        color: var(--widget-muted);
    }
#reservas .widget-divider {
        border-color: var(--widget-line-soft);
    }

    #reservas .editorial-kicker {
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--widget-gold);
    }
#reservas .fade-in {
        animation: widgetFade .38s cubic-bezier(.16, 1, .3, 1);
    }

    @keyframes widgetFade {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
#reservas .cta-button {
        background: var(--widget-blue);
        color: white;
        border: 1px solid rgba(220, 175, 87, .7);
        box-shadow: 0 14px 28px rgba(41, 95, 143, .25);
        transition: transform .25s ease, background .25s ease, box-shadow .25s ease, opacity .25s ease;
    }

    #reservas .cta-button:not(:disabled):hover {
        background: var(--widget-gold);
        color: #101214;
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(220, 175, 87, .22);
    }

    #reservas .cta-button:disabled {
        opacity: .42;
        cursor: not-allowed;
        box-shadow: none;
    }

    #reservas .progress-track {
        background: rgba(0, 0, 0, .24);
    }

    #reservas .progress-fill {
        background: linear-gradient(90deg, #e6bd6d, var(--widget-gold));
    }


    /* Date / time picker del Paso 5 */
    #reservas .availability-request-option {
        width: 100%;
        background: var(--widget-card);
        border: 1px solid var(--widget-line-soft);
        color: var(--widget-text);
        transition:
            background .25s ease,
            border-color .25s ease,
            box-shadow .25s ease,
            transform .25s ease;
    }

    #reservas .availability-request-option:hover {
        background: var(--widget-card-hover);
        border-color: rgba(220, 175, 87, .58);
    }

    #reservas .availability-request-option[aria-pressed="true"] {
        background: rgba(220, 175, 87, .08);
        border-color: var(--widget-gold);
        box-shadow: inset 0 0 0 1px rgba(220, 175, 87, .12);
    }

    #reservas .availability-request-check {
        border: 1px solid rgba(220, 175, 87, .65);
        color: var(--widget-gold);
        background: transparent;
        transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease,
            transform .2s ease;
    }

    #reservas .availability-request-option[aria-pressed="true"] .availability-request-check {
        background: var(--widget-gold);
        border-color: var(--widget-gold);
        color: #fff;
        transform: scale(1.04);
    }

    #reservas .calendar-panel {
        width: 100%;
        max-width: 640px;
        margin-inline: auto;
    }

    #reservas .calendar-toolbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        gap: .75rem;
    }

    #reservas .calendar-nav {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--widget-line-soft);
        color: var(--widget-text);
        background: transparent;
        transition:
            color .2s ease,
            border-color .2s ease,
            background .2s ease,
            opacity .2s ease;
    }

    #reservas .calendar-nav:not(:disabled):hover {
        color: var(--widget-gold);
        border-color: var(--widget-gold);
        background: rgba(220, 175, 87, .06);
    }

    #reservas .calendar-nav:disabled {
        opacity: .16;
        cursor: default;
    }

    #reservas .calendar-weekdays,
    #reservas .calendar-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    #reservas .calendar-weekdays {
        gap: 3px;
    }

    #reservas .calendar-grid {
        gap: 4px;
    }

    #reservas .calendar-weekday {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        padding-block: .5rem;
        color: var(--widget-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    #reservas .calendar-day {
        position: relative;
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        aspect-ratio: 1 / 1;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--widget-muted);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        transition:
            color .18s ease,
            background .18s ease,
            border-color .18s ease,
            opacity .18s ease,
            transform .18s ease;
    }

    #reservas .calendar-day.is-available {
        color: var(--widget-gold);
        cursor: pointer;
    }

    #reservas .calendar-day.is-available:not(.is-selected):hover {
        background: rgba(220, 175, 87, .09);
        border-color: rgba(220, 175, 87, .34);
    }

    #reservas .calendar-day.is-unavailable {
        color: var(--widget-muted);
        opacity: .38;
        cursor: not-allowed;
    }

    #reservas .calendar-day.is-outside-range {
        color: var(--widget-muted);
        opacity: .18;
        cursor: default;
    }

    #reservas .calendar-day.is-outside-month {
        color: var(--widget-muted);
        opacity: .12;
        cursor: default;
    }

    #reservas .calendar-day.is-today:not(.is-selected) {
        border-color: var(--widget-gold);
    }

    #reservas .calendar-day.is-selected {
        background: var(--widget-gold);
        border-color: var(--widget-gold);
        color: #fff;
        opacity: 1;
        box-shadow: 0 6px 18px rgba(220, 175, 87, .18);
        transform: scale(1.02);
    }

    #reservas .calendar-day:disabled {
        pointer-events: none;
    }

    #reservas .calendar-legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--widget-gold);
    }

    #reservas .calendar-legend-today {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 1px solid var(--widget-gold);
        background: transparent;
    }

    #reservas .change-date-button {
        color: var(--widget-gold);
        border: 1px solid rgba(220, 175, 87, .34);
        background: transparent;
        transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease;
    }

    #reservas .change-date-button:hover {
        background: rgba(220, 175, 87, .07);
        border-color: var(--widget-gold);
    }

    #reservas .time-btn {
        min-height: 48px;
        padding: .7rem .6rem;
    }

    #reservas .time-btn.is-selected {
        background: var(--widget-gold);
        border-color: var(--widget-gold);
        color: #fff;
        transform: none;
        box-shadow: 0 8px 20px rgba(220, 175, 87, .14);
    }

    #reservas .summary-coordination-note {
        border-left: 1px solid rgba(220, 175, 87, .5);
    }

    @media (prefers-reduced-motion: reduce) {

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

    /* =========================================================
       V2 · VIEWPORT / FOCUS MODE / CHOICE SYSTEM
       ========================================================= */

    html.widget-focus-lock,
    body.widget-focus-lock {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    #reservas,
    #reservas *,
    #reservas *::before,
    #reservas *::after {
        box-sizing: border-box;
    }

    body.widget-focus-lock #whatsapp-float-container {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #reservas .widget-stage {
        position: relative;
    }

    #reservas .widget-shell {
        min-height: 620px;
    }

    #reservas .widget-content {
        min-height: 560px;
    }

    #reservas .widget-focus-close {
        display: none;
    }

    #reservas .widget-content {
        scrollbar-width: thin;
        scrollbar-color: rgba(220, 175, 87, .35) transparent;
    }

    #reservas .widget-content::-webkit-scrollbar {
        width: 5px;
    }

    #reservas .widget-content::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(220, 175, 87, .28);
    }

    #reservas .step-heading {
        margin-bottom: 1rem;
        padding-bottom: .85rem;
        border-bottom: 1px solid var(--widget-line-soft);
    }

    #reservas .step-heading h3 {
        margin-top: .35rem;
        font-size: clamp(1.35rem, 5.4vw, 2rem);
        line-height: .98;
    }

    #reservas .step-heading__description {
        margin-top: .45rem;
        max-width: 34rem;
        color: var(--widget-muted);
        font-size: .76rem;
        line-height: 1.35;
    }

    #reservas {
        --choice-card-height: 136px;
        --choice-grid-max-width: 860px;
    }

    #reservas .choice-grid {
        display: grid;
        width: 100%;
        max-width: var(--choice-grid-max-width);
        margin-inline: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: var(--choice-card-height);
        gap: .55rem;
    }

    #reservas .choice-grid > * {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
    }

    /* Categorías · full cover */
    #reservas .category-cover-card {
        position: relative;
        isolation: isolate;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        border-radius: .85rem;
        padding: .9rem;
        text-align: left;
        border: 1px solid var(--widget-line-soft);
        background: #11161a;
        color: #fff;
    }

    #reservas .category-cover-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(180deg, rgba(7, 10, 12, .03) 15%, rgba(7, 10, 12, .22) 48%, rgba(7, 10, 12, .92) 100%);
    }

    #reservas .category-cover-card__image {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.82) contrast(1.02);
        transform: scale(1.01);
        transition: transform .35s ease, filter .35s ease;
    }

    #reservas .category-cover-card:hover .category-cover-card__image,
    #reservas .category-cover-card[aria-pressed="true"] .category-cover-card__image {
        filter: saturate(1) contrast(1.03);
        transform: scale(1.035);
    }

    #reservas .category-cover-card__copy {
        position: absolute;
        inset-inline: .9rem;
        bottom: .85rem;
        z-index: 2;
    }

    #reservas .category-cover-card__eyebrow {
        display: block;
        margin-bottom: .25rem;
        color: var(--widget-gold);
        font-size: .52rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    #reservas .category-cover-card__title {
        display: block;
        color: #fff;
        font-size: .98rem;
        font-weight: 800;
        letter-spacing: .02em;
        line-height: 1.05;
        text-transform: uppercase;
    }

    #reservas .category-cover-card__description {
        display: block;
        margin-top: .3rem;
        color: rgba(255, 255, 255, .72);
        font-size: .64rem;
        line-height: 1.2;
    }

    /* Servicios · 2 columnas compactas */
    #reservas .service-choice-card {
        position: relative;
        display: flex;
        min-width: 0;
        height: 100%;
        min-height: 0;
        align-items: flex-start;
        justify-content: space-between;
        gap: .5rem;
        border-radius: .75rem;
        padding: .8rem;
        text-align: left;
    }

    #reservas .service-choice-card__title {
        display: block;
        color: var(--widget-text);
        font-size: .8rem;
        font-weight: 700;
        line-height: 1.1;
        text-transform: uppercase;
    }

    #reservas .service-choice-card__description {
        display: -webkit-box;
        margin-top: .35rem;
        overflow: hidden;
        color: var(--widget-muted);
        font-size: .62rem;
        line-height: 1.3;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    #reservas .choice-state {
        display: inline-flex;
        width: 1.65rem;
        height: 1.65rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(220, 175, 87, .4);
        color: var(--widget-gold);
        font-size: .56rem;
    }

    /* Profesionales · full cover compacto 2x3 */
    #reservas .pros-grid {
        width: 100%;
        max-width: 860px;
        margin-inline: auto;
    }

    #reservas .pro-cover-card {
        position: relative;
        isolation: isolate;
        min-width: 0;
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
        overflow: hidden;
        border-radius: .8rem;
        padding: .75rem;
        text-align: left;
        border: 1px solid var(--widget-line-soft);
        background: #101418;
        color: #fff;
    }

    #reservas .pro-cover-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(180deg, rgba(7, 10, 12, .02) 15%, rgba(7, 10, 12, .18) 45%, rgba(7, 10, 12, .94) 100%);
    }

    #reservas .pro-cover-card__image {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 28%;
        filter: saturate(.88);
        transition: transform .35s ease, filter .35s ease;
    }

    #reservas .pro-cover-card:hover .pro-cover-card__image,
    #reservas .pro-cover-card[aria-pressed="true"] .pro-cover-card__image {
        transform: scale(1.025);
        filter: saturate(1);
    }

    #reservas .pro-cover-card__copy {
        position: absolute;
        inset-inline: .75rem;
        bottom: .7rem;
        z-index: 2;
        min-width: 0;
        padding-right: 1.65rem;
    }

    #reservas .pro-cover-card__name {
        display: block;
        overflow: hidden;
        color: #fff;
        font-size: .92rem;
        font-weight: 800;
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #reservas .pro-cover-card__role {
        display: -webkit-box;
        margin-top: .22rem;
        overflow: hidden;
        color: #e3bd6f;
        font-size: .6rem;
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    #reservas .pro-cover-card .choice-state {
        position: absolute;
        right: .62rem;
        top: .62rem;
        z-index: 3;
        width: 1.5rem;
        height: 1.5rem;
        background: rgba(8, 11, 13, .45);
        backdrop-filter: blur(6px);
    }

    #reservas .pro-cover-card[aria-pressed="true"],
    #reservas .category-cover-card[aria-pressed="true"] {
        border-color: var(--widget-gold);
        box-shadow:
            inset 0 0 0 1px rgba(220, 175, 87, .18),
            0 9px 24px rgba(0, 0, 0, .16);
    }

    /* Paso 4 · misma geometría que categorías, servicios y profesionales */
    #reservas .booking-choice-card {
        position: relative;
        display: flex;
        height: 100%;
        min-width: 0;
        min-height: 0;
        align-items: center;
        gap: .7rem;
        overflow: hidden;
        border-radius: .8rem;
        padding: .75rem;
        background:
            linear-gradient(145deg, var(--widget-panel-soft), var(--widget-card));
        border: 1px solid var(--widget-line-soft);
        color: var(--widget-text);
    }

    #reservas .booking-choice-card__index {
        display: inline-flex;
        width: 1.75rem;
        height: 1.75rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(220, 175, 87, .45);
        color: var(--widget-gold);
        font-size: .55rem;
        font-weight: 800;
        letter-spacing: .04em;
    }

    #reservas .booking-choice-card__copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    #reservas .booking-choice-card__service {
        display: block;
        overflow: hidden;
        color: var(--widget-text);
        font-size: .8rem;
        font-weight: 700;
        line-height: 1.1;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    #reservas .booking-choice-card__professional {
        display: block;
        margin-top: .3rem;
        overflow: hidden;
        color: var(--widget-muted);
        font-size: .62rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #reservas .booking-choice-card__remove {
        display: inline-flex;
        width: 1.75rem;
        height: 1.75rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid transparent;
        color: var(--widget-muted);
        transition:
            color .2s ease,
            border-color .2s ease,
            background .2s ease;
    }

    #reservas .booking-choice-card__remove:hover {
        color: var(--widget-gold);
        border-color: rgba(220, 175, 87, .35);
        background: rgba(220, 175, 87, .06);
    }

    /* Calendario real del salón: martes a sábado */
#reservas .calendar-spacer {
        min-height: 42px;
    }

    #reservas .calendar-day {
        min-height: 42px;
        aspect-ratio: auto;
    }

    #reservas .availability-request-option {
        margin-top: 1rem;
        padding: .75rem .85rem;
    }

    #reservas .availability-request-option .widget-title {
        font-size: .76rem;
        line-height: 1.25;
    }

    #reservas .availability-request-option .widget-muted {
        margin-top: .2rem;
        font-size: .64rem;
        line-height: 1.35;
    }

    #reservas #times-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

    #reservas .time-btn {
        min-height: 44px;
        padding: .55rem .4rem;
        font-size: .76rem;
    }

    #reservas .step-actions {
        z-index: 6;
    }

    /* Focus mode: se activa por JS sólo en mobile o viewport de poca altura. */
    #reservas.is-focus-mode {
        position: fixed !important;
        inset: 0 !important;
        z-index: 9999 !important;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding: 0 !important;
        background: #0b0d0f;
    }

    #reservas.is-focus-mode .widget-stage {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        padding: 0;
    }

    #reservas.is-focus-mode .widget-section-heading,
    #reservas.is-focus-mode .widget-decoration {
        display: none !important;
    }

    #reservas.is-focus-mode .widget-shell {
        display: grid;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        min-height: 0 !important;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
        border: 0;
        border-radius: 0 !important;
        box-shadow: none;
    }

    #reservas.is-focus-mode .widget-topbar {
        position: relative;
        z-index: 10;
        padding:
            max(.62rem, env(safe-area-inset-top))
            .75rem
            .62rem;
    }

    #reservas.is-focus-mode .widget-focus-close {
        display: inline-flex;
    }

    #reservas.is-focus-mode .widget-content {
        min-height: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding:
            .75rem
            .75rem
            max(.75rem, env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }

    #reservas.is-focus-mode .step-actions {
        position: sticky;
        bottom: -.75rem;
        margin-inline: -.75rem;
        padding: .65rem .75rem .75rem;
        background:
            linear-gradient(180deg, rgba(21, 25, 29, 0), var(--widget-panel) 24%);
    }

    @media (max-width: 767px), (max-height: 760px) {
        #reservas {
            --choice-card-height: 100px;
            padding-block: 2.5rem;
        }

        #reservas .widget-section-heading {
            margin-bottom: 1rem;
        }

        #reservas .widget-shell {
            min-height: 0;
        }

        #reservas .widget-content {
            min-height: 0;
        }

        #reservas .widget-topbar {
            padding: .7rem .75rem;
        }

        #reservas .widget-topbar #btn-back,
        #reservas .widget-topbar .widget-focus-close {
            width: 2.35rem;
            height: 2.35rem;
        }

        #reservas .widget-topbar #step-indicator {
            font-size: .54rem;
            letter-spacing: .13em;
        }

        #reservas .widget-topbar #step-counter {
            font-size: .58rem;
        }

        #reservas .widget-topbar .progress-track {
            margin-top: .45rem;
            height: 2px;
        }

        #reservas .step-heading {
            margin-bottom: .7rem;
            padding-bottom: .65rem;
        }

        #reservas .step-heading .editorial-kicker {
            display: none;
        }

        #reservas .step-heading h3 {
            margin-top: 0;
            font-size: clamp(1.18rem, 5.5vw, 1.55rem);
        }

        #reservas .step-heading__description {
            margin-top: .32rem;
            font-size: .66rem;
            line-height: 1.28;
        }

        #reservas .choice-grid {
            gap: .45rem;
        }

        #reservas .category-cover-card {
            padding: .7rem;
        }

        #reservas .category-cover-card__copy {
            inset-inline: .7rem;
            bottom: .65rem;
        }

        #reservas .category-cover-card__title {
            font-size: .85rem;
        }

        #reservas .category-cover-card__description {
            font-size: .57rem;
        }

        #reservas .service-choice-card {
            padding: .68rem;
        }

        #reservas .service-choice-card__title {
            font-size: .72rem;
        }

        #reservas .service-choice-card__description {
            font-size: .57rem;
        }

        #reservas .pro-cover-card {
            padding: .6rem;
        }

        #reservas .pro-cover-card__copy {
            inset-inline: .62rem;
            bottom: .58rem;
            padding-right: 1.45rem;
        }

        #reservas .pro-cover-card__name {
            font-size: .82rem;
        }

        #reservas .pro-cover-card__role {
            font-size: .54rem;
        }

        #reservas .pro-cover-card .choice-state {
            top: .5rem;
            right: .5rem;
            width: 1.35rem;
            height: 1.35rem;
        }

        #reservas .booking-choice-card {
            gap: .5rem;
            padding: .62rem;
        }

        #reservas .booking-choice-card__index,
        #reservas .booking-choice-card__remove {
            width: 1.5rem;
            height: 1.5rem;
        }

        #reservas .booking-choice-card__service {
            font-size: .7rem;
        }

        #reservas .booking-choice-card__professional {
            margin-top: .22rem;
            font-size: .56rem;
        }

        #reservas .calendar-panel {
            max-width: 100%;
        }

        #reservas .calendar-toolbar {
            grid-template-columns: 36px minmax(0, 1fr) 36px;
            gap: .3rem;
        }

        #reservas .calendar-nav {
            width: 36px;
            height: 36px;
        }

        #reservas .calendar-weekdays {
            margin-top: .55rem;
        }

        #reservas .calendar-weekday {
            padding-block: .35rem;
            font-size: .48rem;
        }

        #reservas .calendar-grid {
            gap: 3px;
        }

        #reservas .calendar-day,
        #reservas .calendar-spacer {
            min-height: 36px;
        }

        #reservas .calendar-day {
            font-size: .7rem;
        }

        #reservas .calendar-legend-row {
            margin-top: .6rem;
        }

        #reservas .calendar-help {
            display: none;
        }

        #reservas #times-grid {
            gap: .4rem;
        }

        #reservas .time-btn {
            min-height: 42px;
            font-size: .7rem;
        }

        #reservas #dates-loading,
        #reservas #times-loading,
        #reservas #dates-empty,
        #reservas #times-empty,
        #reservas #times-placeholder {
            min-height: 86px;
            padding: 1rem;
        }
    }

    @media (max-width: 380px) {
        #reservas {
            --choice-card-height: 94px;
        }

        #reservas .pro-cover-card__name {
            font-size: .76rem;
        }

        #reservas .pro-cover-card__role {
            -webkit-line-clamp: 1;
            line-clamp: 1;
        }
    }