/* ============================================================
   PUALY RESORT & SPA — LANDING EXPERIENCIAL & INMERSIVA
   SISTEMA DE DISEÑO BICOLOR OFICIAL & TIPOGRAFÍA LUXURY
   ============================================================ */

:root {
    --bg-main: #1e293b;
    --bg-card: #093f66;
    --bg-floating: #162235;
    --bg-overlay: rgba(14, 25, 41, 0.78);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --border-subtle: rgba(255, 255, 255, 0.12);
    --border-gold: rgba(197, 160, 89, 0.35);
    
    --accent-gold: #c5a059;
    --accent-gold-soft: rgba(197, 160, 89, 0.15);
    --accent-emerald: #10b981;
    --accent-emerald-soft: rgba(16, 185, 129, 0.12);
    
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-cinzel: 'Cinzel', 'Times New Roman', serif;
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-card: 16px;
    --radius-pill: 30px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   CANVAS DE FONDO DINÁMICO & ESFUMADO CINEMATOGRÁFICO
   ============================================================ */
.dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.dynamic-bg .bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.8s ease, transform 1.2s ease;
}

.bg-image,
.bg-video {
    opacity: 0.75;
    filter: brightness(0.92) saturate(1.05);
}

.bg-image {
    background-color: #0b1320;
    background-size: cover;
    background-position: center;
}

.bg-fog {
    background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.05) 20%, rgba(51, 65, 85, 0.45) 60%, rgba(15, 23, 42, 0.85) 100%);
}

/* ============================================================
   BARRA SUPERIOR LUXURY: RETORNO & MÚSICA SPA (IZQUIERDA) Y GALERÍA (DERECHA)
   ============================================================ */
.top-nav-bar {
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
    z-index: 135;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.top-left-controls,
.top-right-controls {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.circle-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(22, 34, 53, 0.88);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: var(--transition-smooth);
}

.circle-icon-btn:hover {
    color: var(--accent-gold);
    border-color: var(--border-gold);
    transform: scale(1.08);
}

.circle-icon-btn.playing {
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
    background: var(--accent-emerald-soft);
}

.gallery-pill-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 20px;
    background: rgba(22, 34, 53, 0.85);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth);
    text-decoration: none;
    outline: none;
}

.gallery-pill-btn:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(30, 41, 59, 0.92);
    transform: scale(1.03);
}

/* ============================================================
   BURBUJAS REDONDAS CONVERSACIONALES (TELEGRAM Y WHATSAPP)
   ============================================================ */
.messenger-bubbles {
    position: fixed;
    bottom: 14px;
    right: 90px;
    z-index: 125;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.msg-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

.msg-bubble svg {
    width: 26px;
    height: 26px;
}

.tg-bubble {
    background: #ffffff !important;
    color: #0088cc !important;
    border: 1.5px solid #0088cc !important;
    order: 1;
}

.tg-bubble svg {
    width: 32px !important;
    height: 32px !important;
    fill: #0088cc !important;
    display: block;
}

.tg-bubble:hover {
    background: #f0f9ff !important;
    border-color: #0088cc !important;
    box-shadow: 0 12px 30px rgba(0, 136, 204, 0.45) !important;
}

.wa-bubble {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    order: 2;
}

.wa-bubble svg {
    width: 56px !important;
    height: 56px !important;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    display: block;
}

.wa-bubble:hover {
    box-shadow: none !important;
    transform: scale(1.14) translateY(-3px);
}

.wa-bubble:hover svg {
    filter: drop-shadow(0 14px 32px rgba(37, 211, 102, 0.55));
}

.messenger-direct-bubbles {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Botón flotante unificado "Volver al chat" (Telegram / WhatsApp) */
.unified-return-chat-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: #093f66;
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 28px;
    padding: 8px 18px;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    animation: pulseReturnBadge 2.8s infinite ease-in-out;
}

.unified-return-chat-btn:hover {
    transform: scale(1.06) translateY(-2px);
    border-color: var(--accent-emerald, #10b981);
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.3);
}

.unified-return-chat-btn .return-chat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.unified-return-chat-btn .return-chat-icon svg {
    width: 20px;
    height: 20px;
}

@keyframes pulseReturnBadge {
    0%, 100% { transform: scale(1); border-color: rgba(255, 255, 255, 0.22); }
    50% { transform: scale(1.04); border-color: #10b981; }
}

.msg-bubble:hover {
    transform: scale(1.14) translateY(-3px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
}

/* Al desplegarse el carrito lateral (420px), las burbujas se desplazan
   a la izquierda quedando pegadas al borde izquierdo del panel desplegado */
.experience-wrapper.cart-opened ~ .messenger-bubbles {
    transform: translateX(-430px);
}

/* ============================================================
   CONTENEDOR PRINCIPAL SPLIT-VIEW
   ============================================================ */
.experience-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    display: flex;
    overflow: hidden;
}

.main-content-flow {
    width: 100%;
    min-height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
    transform-origin: left center;
}

/* Split-view: panel de carrito abierto */
.experience-wrapper.cart-opened .main-content-flow {
    transform: translateX(-80px) scale(0.92);
    filter: brightness(0.85);
    pointer-events: none;
}

/* ============================================================
   SECCIONES Y ETAPAS
   ============================================================ */
.stage-section {
    display: none;
    width: 100%;
    min-height: 100vh;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    box-sizing: border-box;
}

.stage-section.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 1;
    min-height: 100vh;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.stage-section.active::-webkit-scrollbar {
    width: 6px;
}

.stage-section.active::-webkit-scrollbar-track {
    background: transparent;
}

.stage-section.active::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.stage-section.active::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold);
}

.stage-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 24px 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.stage-header {
    margin-bottom: 12px;
}

.stage-title {
    font-family: var(--font-serif);
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.stage-desc {
    font-size: 0.96rem;
    color: var(--text-secondary);
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.4;
    font-weight: 300;
}

/* ============================================================
   ETAPA 1: PANTALLA INICIAL — IMPACTO INMERSIVO
   ============================================================ */
#stage-impact {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: none;
}

#stage-impact.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#stage-impact:not(.active) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.88) contrast(1.03);
}

.video-dimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.0) 30%, rgba(30, 41, 59, 0.20) 70%, rgba(15, 23, 42, 0.35) 100%);
}

@keyframes pualyCinematicDimmerReveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pualyCinematicTextReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
        pointer-events: none;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.video-dimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.48) 30%, rgba(30, 41, 59, 0.46) 70%, rgba(15, 23, 42, 0.52) 100%);
    opacity: 0;
    animation: pualyCinematicDimmerReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
    pointer-events: none;
}

#stage-impact.revealed .video-dimmer::after,
#stage-impact.visible .video-dimmer::after {
    opacity: 1 !important;
    animation: none !important;
}

.impact-overlay {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 20px;
    max-width: 860px;
    width: 100%;
    box-sizing: border-box;
    margin: auto 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    transform: translateY(18px);
    animation: pualyCinematicTextReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.6));
}

.impact-overlay.revealed,
.impact-overlay.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    animation: none !important;
}

.brand-crest {
    margin-bottom: clamp(6px, 1.4vh, 16px);
}

.brand-logo {
    max-width: clamp(140px, 18vw, 240px);
    max-height: clamp(65px, 12vh, 120px);
    object-fit: contain;
    height: auto;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.75));
    transition: transform 0.4s ease;
}

.luxury-eyebrow {
    display: block;
    font-family: var(--font-cinzel);
    font-size: clamp(0.72rem, 1vw, 1rem);
    font-weight: 600;
    letter-spacing: clamp(2px, 0.3vw, 4.5px);
    color: #e6c575;
    text-shadow: 0 1px 2px #000000, 
                 0 -1px 2px #000000, 
                 1px 0 2px #000000, 
                 -1px 0 2px #000000, 
                 0 2px 8px rgba(0, 0, 0, 0.95), 
                 0 0 20px rgba(0, 0, 0, 0.9);
    margin-bottom: clamp(4px, 0.8vh, 8px);
}

.luxury-title {
    font-family: var(--font-cinzel);
    font-size: clamp(1.6rem, 3.2vw, 2.75rem);
    letter-spacing: clamp(1px, 0.2vw, 2.5px);
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.98), 
                 0 4px 18px rgba(0, 0, 0, 0.95), 
                 0 0 35px rgba(10, 20, 35, 0.98), 
                 0 0 60px rgba(0, 0, 0, 0.9);
    margin-bottom: clamp(4px, 1vh, 10px);
}

.luxury-subtitle {
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 1.5vw, 1.45rem);
    font-style: italic;
    color: #f8fafc;
    font-weight: 500;
    line-height: 1.3;
    max-width: clamp(320px, 55vw, 680px);
    margin-bottom: clamp(12px, 2.2vh, 22px);
    text-shadow: 0 1px 2px #000000, 
                 0 -1px 2px rgba(0, 0, 0, 0.8), 
                 1px 0 2px rgba(0, 0, 0, 0.8), 
                 -1px 0 2px rgba(0, 0, 0, 0.8), 
                 0 3px 12px rgba(0, 0, 0, 0.95), 
                 0 0 30px rgba(0, 0, 0, 0.85);
}

.invitation-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.4vh, 14px);
    opacity: 0.95;
    transition: var(--transition-smooth);
}

.invitation-question {
    font-size: 1.18rem;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px #000000, 
                 0 -1px 2px #000000, 
                 1px 0 2px #000000, 
                 -1px 0 2px #000000, 
                 0 2px 8px rgba(0, 0, 0, 0.95), 
                 0 0 18px rgba(0, 0, 0, 0.9);
    background: rgba(15, 23, 42, 0.45);
    padding: 6px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
}

.btn-luxury-enter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 34, 53, 0.85);
    border: 1px solid var(--accent-gold);
    color: var(--text-primary);
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.6px;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 50 !important;
    backdrop-filter: blur(12px);
    transition: var(--transition-smooth);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.btn-luxury-enter:hover {
    background: var(--accent-gold);
    color: #0f172a;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 15px 40px rgba(197, 160, 89, 0.4);
}

/* ============================================================
   ETAPA 2: ELEGÍ TU EXPERIENCIA (3 TARJETAS VERTICALES)
   ============================================================ */
.experience-deck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto 24px auto;
    transition: var(--transition-smooth);
}

.exp-card {
    flex: 0 1 360px;
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: var(--transition-smooth);
    position: relative;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    height: 530px;
    max-height: 530px;
    box-sizing: border-box;
}

.exp-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-gold);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.exp-card-media {
    height: 270px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s ease;
    flex-shrink: 0;
}

.exp-card:hover .exp-card-media {
    transform: scale(1.04);
}

.exp-card-body {
    padding: 18px 22px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
}

.exp-card-badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent-gold);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.exp-card-title {
    font-family: var(--font-cinzel);
    font-size: 1.65rem;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.exp-card-desc {
    font-size: 0.94rem;
    color: var(--text-secondary);
    line-height: 1.45;
    font-weight: 300;
}

/* Contenedor interactivo de experiencias y selector de fechas (Lado a Lado) */
.exp-interactive-row {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s ease;
}

.exp-interactive-row.focus-active {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
}

.exp-interactive-row.focus-active.align-left {
    flex-direction: row-reverse;
}

.exp-interactive-row.focus-active .experience-deck {
    display: flex;
    width: auto;
    max-width: 360px;
    margin: 0;
}

.exp-interactive-row.focus-active .exp-card:not(.selected-focus) {
    display: none !important;
}

.exp-interactive-row.focus-active .exp-card.selected-focus {
    width: 340px;
    min-width: 320px;
    height: 530px;
    max-height: 530px;
    transform: none;
    cursor: default;
    border-color: var(--accent-gold);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

.exp-interactive-row.focus-active .exp-card.selected-focus .exp-card-media {
    height: 238px;
}

.exp-interactive-row.focus-active .context-picker-modal {
    margin: 0;
    max-width: 580px;
    height: 530px;
    max-height: 530px;
    display: flex;
    flex: 1;
    box-sizing: border-box;
}

.exp-interactive-row.focus-active .context-picker-box {
    width: 100%;
    height: 530px;
    max-height: 530px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 30px;
    box-sizing: border-box;
}

/* Modos de foco de selección estándar */
.experience-deck.focus-active .exp-card {
    opacity: 0.35;
    transform: scale(0.95);
    filter: blur(1.5px);
    pointer-events: none;
}

.experience-deck.focus-active .exp-card.selected-focus {
    opacity: 1;
    transform: scale(1.03);
    filter: none;
    border-color: var(--accent-gold);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

/* Selector embebido de fechas y huéspedes */
.context-picker-modal {
    width: 100%;
    max-width: 680px;
    margin: 20px auto 0;
    animation: fadeIn 0.5s ease forwards;
}

.context-picker-box {
    background: var(--bg-floating);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-card);
    padding: 32px 36px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.picker-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.picker-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.picker-inputs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.picker-field {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 6px;
}

.picker-field label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.luxury-input, .luxury-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.3s ease;
    width: 100%;
}

/* Blindaje anti-fondo blanco en autocompletado nativo del navegador */
input.luxury-input:-webkit-autofill,
input.luxury-input:-webkit-autofill:hover, 
input.luxury-input:-webkit-autofill:focus, 
input.luxury-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #162235 inset !important;
    -webkit-text-fill-color: #f8fafc !important;
    caret-color: #f8fafc !important;
    transition: background-color 5000s ease-in-out 0s;
}

.luxury-input:focus, .luxury-select:focus {
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.08);
}

select.luxury-input, select.luxury-select {
    background-color: #c2d7d2 !important;
    color: #0a0f18 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 28px !important;
    accent-color: #82a398 !important;
}

select.luxury-input option, select.luxury-select option {
    background-color: #c2d7d2 !important;
    color: #0a0f18 !important;
    padding: 10px 14px;
}

select.luxury-input option:checked, select.luxury-select option:checked,
select.luxury-input option:hover, select.luxury-select option:hover {
    background-color: #82a398 !important;
    color: #0a0f18 !important;
}

.picker-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.btn-picker-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #82a398;
    border: 1px solid rgba(10, 15, 24, 0.28);
    color: #0a0f18;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-picker-back:hover {
    background: #739589;
    color: #0a0f18;
}

.btn-picker-proceed {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #82a398;
    border: 1px solid rgba(10, 15, 24, 0.28);
    color: #0a0f18;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-picker-proceed:hover {
    background: #739589;
    color: #0a0f18;
}

/* ============================================================
   ETAPA 3: SELECCIÓN DE HABITACIÓN (2 TARJETAS LUXURY)
   ============================================================ */
.rooms-deck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.room-card {
    flex: 0 1 480px;
    width: 100%;
    max-width: 500px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    height: 508px;
    max-height: 508px;
    box-sizing: border-box;
    transition: var(--transition-smooth);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
}

.room-card:hover {
    border-color: var(--border-gold);
    transform: translateY(-4px);
}

.room-image-holder {
    height: 230px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s ease;
    flex-shrink: 0;
}

.room-card:hover .room-image-holder {
    transform: scale(1.03);
}

.room-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(22, 34, 53, 0.85);
    border: 1px solid var(--border-gold);
    color: var(--accent-gold);
    font-size: 0.64rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
}

.room-info {
    padding: 14px 20px 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
}

.room-name {
    font-family: var(--font-serif);
    font-size: 1.42rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.room-summary {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 8px;
    font-weight: 300;
}

.room-action-row {
    margin-top: auto;
}

.room-tap-hint {
    font-size: 0.72rem;
    color: var(--accent-gold);
    letter-spacing: 0.5px;
}

/* Modo Multi-Habitación: Ajuste de Altura Compacta para Evitar Solapamientos con Controles Flotantes */
@media (min-width: 901px) {
    .has-multi-bar .room-card,
    #stage-rooms.has-multi-bar .room-card {
        height: 435px;
        max-height: 435px;
    }

    .has-multi-bar .room-image-holder,
    #stage-rooms.has-multi-bar .room-image-holder {
        height: 210px;
    }

    .has-multi-bar .room-info,
    #stage-rooms.has-multi-bar .room-info {
        padding: 10px 18px 8px;
    }

    .has-multi-bar .room-name,
    #stage-rooms.has-multi-bar .room-name {
        font-size: 1.32rem;
        margin-bottom: 2px;
    }

    .has-multi-bar .room-summary,
    #stage-rooms.has-multi-bar .room-summary {
        font-size: 0.88rem;
        line-height: 1.38;
        margin-bottom: 4px;
    }

    .has-multi-bar .room-action-row,
    #stage-rooms.has-multi-bar .room-action-row {
        margin-top: auto;
        padding-top: 2px;
    }
}

/* Flotante Luxury en Hover (Habitaciones, Spa y Servicios) */
.room-hover-floating {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-floating);
    border-top: 1px solid var(--border-gold);
    padding: 14px 18px;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    box-sizing: border-box;
    z-index: 15;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

.room-card,
.spa-card,
.ext-card {
    cursor: pointer;
}

.room-hover-floating {
    cursor: default;
}

/* Flotante Luxury: Estado activo por toque o clic (Móvil y Escritorio) */
.room-card.floating-open .room-hover-floating,
.spa-card.floating-open .room-hover-floating,
.ext-card.floating-open .room-hover-floating,
.ext-card.hover-active .room-hover-floating {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Flotante Luxury: Estado cerrado explícitamente por toque o clic */
.room-card.floating-closed .room-hover-floating,
.spa-card.floating-closed .room-hover-floating,
.ext-card.floating-closed .room-hover-floating {
    transform: translateY(105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Flotante Luxury en Hover (solo dispositivos con puntero fino / ratón y que no estén cerrados explícitamente) */
@media (hover: hover) and (pointer: fine) {
    .room-card:not(.floating-closed):hover .room-hover-floating,
    .spa-card:not(.floating-closed):hover .room-hover-floating,
    .ext-card:not(.floating-closed):hover .room-hover-floating {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

.floating-header {
    margin-bottom: 6px;
}

.floating-badge {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--accent-emerald);
}

.floating-room-name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 1px 0;
}

.floating-dates {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.floating-rates {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rate-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}

.rate-label {
    color: var(--text-secondary);
}

.rate-value {
    font-weight: 600;
    color: var(--text-primary);
}

.rate-transfer .rate-value {
    color: var(--accent-emerald);
    font-size: 0.92rem;
}

.btn-select-room {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-gold);
    border: none;
    color: #0f172a;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-select-room:hover {
    background: #e6c575;
    transform: translateY(-2px);
}

/* ============================================================
   ETAPA 4: VENTA CRUZADA SPA & BIENESTAR (FORMATO VERTICAL CLON DE EXPERIENCIAS)
   ============================================================ */
#stage-spa-addons .stage-inner {
    padding-top: 10px;
}

#stage-spa-addons .stage-header {
    margin-bottom: 8px;
}

.spa-deck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto 14px auto;
}

.spa-card {
    flex: 0 1 360px;
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: var(--transition-smooth);
    position: relative;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    height: 550px;
    max-height: 550px;
    box-sizing: border-box;
}

.spa-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.spa-card-img {
    height: 190px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s ease;
    flex-shrink: 0;
}

.spa-card:hover .spa-card-img {
    transform: scale(1.04);
}

.spa-card-content {
    padding: 14px 20px 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-sizing: border-box;
}

.spa-badge,
.spa-min-badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent-gold);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    margin-bottom: 4px;
}

.spa-title {
    font-family: var(--font-cinzel);
    font-size: 1.35rem;
    letter-spacing: 1.1px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.spa-desc {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.45;
    font-weight: 300;
    margin-bottom: 8px;
}

.spa-price-box {
    margin-top: auto;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.spa-price-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.spa-price-val {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-emerald);
}

.btn-add-spa {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid var(--accent-emerald);
    color: var(--accent-emerald);
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-smooth);
    width: 100%;
    box-sizing: border-box;
}

.btn-add-spa:hover {
    background: var(--accent-emerald);
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

/* Botones de acción inferior */
.stage-footer-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.btn-skip-stage {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-skip-stage:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
    transform: translateY(-2px);
}

/* ============================================================
   ETAPA 5: EXTENSIONES (EARLY & LATE CHECKOUT)
   ============================================================ */
#stage-extensions .stage-inner {
    padding-top: 10px;
}

#stage-extensions .stage-header {
    margin-bottom: 8px;
}

.extensions-deck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: 980px;
    margin-bottom: 14px;
}

.ext-card {
    flex: 0 1 450px;
    width: 100%;
    max-width: 470px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 550px;
    max-height: 550px;
    box-sizing: border-box;
    transition: var(--transition-smooth);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
}

.ext-card-media {
    width: 100%;
    height: 230px;
    position: relative;
    overflow: hidden;
    background: #0b1320;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ext-card-media img,
.ext-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.ext-card:hover .ext-card-img {
    transform: scale(1.04);
}

/* ==========================================================================
   DINAMISMO MULTI-MEDIOS EN TARJETAS (CARRUSEL VIDEO-LIKE & VIDEO CORTO)
   ========================================================================== */

.card-media-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.exp-card-media.card-media-container {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
}

.exp-interactive-row.focus-active .exp-card.selected-focus .exp-card-media.card-media-container {
    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;
}

.spa-card-img.card-media-container {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
}

.ext-card-media.card-media-container {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
}

.card-media-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 18%, rgba(0,0,0,0) 82%);
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 18%, rgba(0,0,0,0) 82%);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
    transform: scale(1.03);
    transition: -webkit-mask-size 1.5s cubic-bezier(0.25, 1, 0.5, 1),
                mask-size 1.5s cubic-bezier(0.25, 1, 0.5, 1),
                transform 2.1s ease-out,
                opacity 0.28s ease;
    pointer-events: none;
    z-index: 1;
}

.card-media-slide.active {
    opacity: 1;
    transform: scale(1.0);
    -webkit-mask-size: 380% 380%;
    mask-size: 380% 380%;
    z-index: 2;
}

.card-media-slide.prev {
    opacity: 1;
    transform: scale(0.98);
    -webkit-mask-size: 380% 380%;
    mask-size: 380% 380%;
    z-index: 1;
}

.room-image-holder.card-media-container {
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
}

.has-multi-bar .room-image-holder.card-media-container,
#stage-rooms.has-multi-bar .room-image-holder.card-media-container {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
}

.card-media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
}

.card-media-indicators {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 5;
    pointer-events: none;
}

.card-media-dot {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.35s ease;
}

.card-media-dot.active {
    background: var(--accent-gold, #c5a880);
    width: 22px;
}

.ext-card-body {
    padding: 16px 20px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .ext-card:not(.floating-closed):hover {
        border-color: var(--border-gold);
        transform: translateY(-4px);
    }
}

.ext-pill {
    font-size: 0.70rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: 4px;
    display: inline-block;
}

.ext-room-badge {
    display: inline-block;
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-emerald);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.ext-card-title {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.ext-card-desc {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 12px;
    font-weight: 300;
    white-space: pre-line;
}

.ext-rate-box {
    margin-top: auto;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}

.ext-calc-note {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ext-price-val {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--accent-emerald);
}

.ext-tap-hint {
    font-size: 0.75rem;
    color: var(--accent-gold);
    letter-spacing: 0.5px;
    text-align: center;
    padding: 6px 0 0 0;
    opacity: 0.85;
}

.btn-add-ext {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-add-ext:hover {
    background: var(--accent-emerald-soft);
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
}

.btn-add-ext.selected {
    background: var(--accent-emerald);
    color: #0f172a;
    border-color: var(--accent-emerald);
}

/* ============================================================
   ETAPA 6: DECISIÓN FINAL & CIERRE OMNICANAL
   ============================================================ */
#stage-decision .stage-inner {
    padding-top: 10px;
    padding-bottom: 74px;
}

#stage-decision .stage-header {
    margin-bottom: 8px;
}

#stage-decision .stage-title {
    font-size: 2.1rem;
    margin-bottom: 2px;
}

#stage-decision .stage-desc {
    display: none !important;
}

.decision-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.decision-card {
    flex: 0 1 480px;
    width: 100%;
    max-width: 520px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 14px 18px;
    text-align: left;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.primary-decision {
    border-color: var(--border-gold);
}

.decision-card-icon {
    font-size: 1.15rem;
    margin-bottom: 2px;
}

.decision-card-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.decision-card-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-bottom: 8px;
    font-weight: 300;
}

.guest-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guest-form .form-row input {
    margin-bottom: 0;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.payment-selection-row {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 2px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.payment-radio input {
    accent-color: var(--accent-emerald);
}

/* Pastillas Interactivas de Selección de Pago */
.checkout-choice-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
}

.btn-payment-choice-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
    color: #f8fafc;
    width: 100%;
    box-sizing: border-box;
}

.btn-payment-choice-pill:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-1px);
}

.btn-payment-choice-pill.pill-transfer:hover {
    border-color: #10b981;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.18);
}

.btn-payment-choice-pill.pill-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 4px 18px rgba(56, 189, 248, 0.18);
}

.payment-pill-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-pill-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.payment-pill-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payment-pill-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.25;
}

.payment-pill-arrow {
    color: #94a3b8;
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.btn-payment-choice-pill:hover .payment-pill-arrow {
    transform: translateX(3px);
    color: #f8fafc;
}

/* Modal Flotante Central de Checkout */
.checkout-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeIn 0.25s ease forwards;
}

.checkout-modal-card {
    background: #333f3b !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
    padding: 24px 28px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.checkout-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

.checkout-modal-title {
    font-family: var(--font-cinzel);
    font-size: 1.15rem;
    color: #f8fafc;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.checkout-modal-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.1);
}

.btn-confirm-reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-emerald);
    border: none;
    color: #0f172a;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-top: 3px;
}

.btn-confirm-reserve:hover {
    background: #34d399;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

#modal-btn-view-voucher:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    transform: translateY(-1px);
}

/* Tarjeta VIP Preview */
.vip-preview-card {
    background: var(--bg-floating);
    border: 1px dashed var(--accent-gold);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.vip-crest {
    font-family: var(--font-cinzel);
    font-size: 0.68rem;
    letter-spacing: 1.8px;
    color: var(--accent-gold);
    margin-bottom: 3px;
}

.vip-code {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.vip-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.social-send-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.messenger-choice-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.messenger-choice-title {
    font-size: 0.78rem;
    color: #cbd5e1;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.messenger-bubbles-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.btn-messenger-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: #f8fafc;
}

.btn-messenger-bubble svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.btn-messenger-bubble.bubble-wa {
    border-color: rgba(37, 211, 102, 0.35);
    color: #25d366;
}

.btn-messenger-bubble.bubble-wa:hover {
    background: rgba(37, 211, 102, 0.18);
    border-color: #25d366;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25);
    color: #ffffff;
}

.btn-messenger-bubble.bubble-wa:hover svg {
    transform: scale(1.12);
}

.btn-messenger-bubble.bubble-tg {
    border-color: rgba(56, 189, 248, 0.35);
    color: #38bdf8;
}

.btn-messenger-bubble.bubble-tg:hover {
    background: rgba(0, 136, 204, 0.18);
    border-color: #0088cc;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.25);
    color: #ffffff;
}

.btn-messenger-bubble.bubble-tg:hover svg {
    transform: scale(1.12);
}

.btn-social-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
}

.btn-wa {
    background: #25d366;
    color: #0f172a;
}

.btn-wa:hover {
    background: #20ba5a;
    transform: translateY(-2px);
}

.btn-tg {
    background: #0088cc;
    color: #ffffff;
}

.btn-tg:hover {
    background: #0077b5;
    transform: translateY(-2px);
}

/* ============================================================
   BARRA DE CONTACTO DIRECTO CONCIERGE (TELÉFONO & MAIL)
   ============================================================ */
.decision-stage-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.concierge-direct-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.concierge-direct-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    color: var(--accent-gold);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.concierge-direct-pill:hover {
    background: var(--accent-gold-soft);
    border-color: var(--accent-gold);
    color: #f8fafc;
    transform: translateY(-2px);
}

/* ============================================================
   PANEL LATERAL DEL CARRITO — SPLIT VIEW
   ============================================================ */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-floating);
    border-left: 1px solid var(--border-gold);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
    z-index: 120;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.experience-wrapper.cart-opened .cart-drawer {
    transform: translateX(0);
}

.cart-drawer-header {
    padding: 28px 26px 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.drawer-crest {
    font-family: var(--font-cinzel);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--accent-gold);
}

.drawer-title {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    color: var(--text-primary);
}

.drawer-stay-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 0.74rem;
}

.drawer-stay-meta .stay-meta-pill {
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.3);
    color: var(--accent-gold);
    border-radius: 4px;
    padding: 2px 7px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-close-cart {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.btn-close-cart:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
    transform: scale(1.1);
}

.cart-drawer-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-sec-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-gold);
}

.cart-item-row {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.cart-item-row.empty-state {
    color: var(--text-muted);
    font-style: italic;
    background: transparent;
    border-style: dashed;
}

.cart-item-title {
    font-weight: 500;
    color: var(--text-primary);
}

.cart-item-sub {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.cart-item-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-item-price {
    font-weight: 600;
    color: var(--accent-emerald);
}

.btn-remove-item {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-remove-item:hover {
    color: #ef4444;
}

.empty-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.cart-totals-box {
    margin-top: auto;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.total-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.total-amount {
    font-size: 1.15rem;
    color: var(--text-primary);
}

.total-amount.highlight {
    color: var(--accent-emerald);
    font-size: 1.3rem;
}

.total-tax-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.cart-drawer-footer {
    padding: 20px 26px 26px;
    border-top: 1px solid var(--border-subtle);
}

.btn-drawer-checkout {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--accent-emerald);
    border: none;
    color: #0f172a;
    padding: 14px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-drawer-checkout:hover {
    background: #34d399;
    transform: translateY(-2px);
}

/* ============================================================
   CONTROLES FLOTANTES INFERIORES: CARRITO Y STEPPER DE PÁGINAS
   ============================================================ */
.floating-controls-bar {
    position: fixed;
    bottom: 8px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 126;
}

.floating-controls-cluster {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: auto;
}

/* Pastillas Flotantes Suaves y Delicadas de Navegación Lateral (Solo Desktop / Puerto 5013) */
.btn-floating-stage-nav {
    pointer-events: auto;
    background: rgba(22, 34, 53, 0.92);
    border: 1.5px solid rgba(197, 160, 89, 0.45);
    color: #f1f5f9;
    padding: 13px 26px;
    border-radius: var(--radius-pill);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: var(--transition-smooth);
    white-space: nowrap;
    position: absolute;
    top: 50%;
}

.btn-floating-stage-prev {
    right: calc(100% + 22px);
    transform: translateY(-50%);
}

.btn-floating-stage-prev:hover {
    background: rgba(22, 34, 53, 0.98);
    border-color: rgba(197, 160, 89, 0.85);
    color: #ffffff;
    transform: translateY(-50%) translateX(-4px);
    box-shadow: 0 10px 28px rgba(197, 160, 89, 0.32);
}

.btn-floating-stage-next {
    left: calc(100% + 22px);
    transform: translateY(-50%);
}

.btn-floating-stage-next:hover {
    background: rgba(22, 34, 53, 0.98);
    border-color: rgba(197, 160, 89, 0.85);
    color: #ffffff;
    transform: translateY(-50%) translateX(4px);
    box-shadow: 0 10px 28px rgba(197, 160, 89, 0.32);
}

.btn-floating-stage-nav svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* Pastillas de navegación móvil (Ocultas en Desktop / Puerto 5013) */
.mobile-stage-nav-row {
    display: none;
}

.cart-trigger-container {
    position: relative;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

@media (min-width: 901px) {
    .stage-stepper-dots {
        display: none !important;
    }
}

.stage-stepper-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.stepper-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stepper-dot:hover {
    background: rgba(255, 255, 255, 0.65);
    transform: scale(1.2);
}

.stepper-dot.active {
    width: 8px;
    height: 8px;
    background: var(--accent-emerald, #10b981);
    border-color: var(--accent-emerald, #10b981);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
    transform: scale(1.25);
}

.cart-badge-widget {
    background: transparent;
    border: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-badge-widget:hover {
    transform: scale(1.08);
}

.cart-tooltip-hover {
    position: absolute;
    bottom: 74px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--bg-floating);
    border: 1px solid var(--border-gold);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.cart-trigger-container:hover .cart-tooltip-hover {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   MICROANIMACIÓN SQUEEZE & LAUNCH AL CARRITO
   ============================================================ */
.squeeze-active {
    animation: cardSqueeze 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes cardSqueeze {
    0% { transform: scale(1); filter: brightness(1); }
    35% { transform: scale(0.92) rotate(-1.5deg); filter: brightness(1.25); border-color: var(--accent-gold); }
    70% { transform: scale(0.96) rotate(0.5deg); filter: brightness(1.15); }
    100% { transform: scale(1); filter: brightness(1); }
}

.fly-item-clone {
    position: fixed;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 25px rgba(197, 160, 89, 0.8), 0 12px 30px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    display: none;
}

@keyframes cartAbsorbWave {
    0% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
    40% { transform: scale(1.32); box-shadow: 0 0 35px rgba(197, 160, 89, 0.85); border-color: #ffffff; }
    100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
}

.cart-absorb-pulse {
    animation: cartAbsorbWave 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================================
   ANIMACIONES GENERALES
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    html, body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .experience-wrapper {
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: visible;
    }
    .main-content-flow {
        min-height: 100%;
    }
    .stage-section {
        min-height: 100vh;
        height: auto;
    }
    .stage-section.active:not(#stage-impact) {
        height: auto !important;
        max-height: none !important;
        min-height: 100% !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    .stage-inner {
        padding: 20px 16px 76px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #stage-experience-choice .stage-inner,
    #stage-rooms .stage-inner,
    #stage-spa-addons .stage-inner,
    #stage-extensions .stage-inner,
    #stage-gallery .stage-inner,
    #stage-decision .stage-inner {
        padding-bottom: 76px !important;
    }
    .experience-deck {
        grid-template-columns: 1fr;
    }
    .rooms-deck {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .room-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    .room-image-holder {
        height: 220px !important;
    }
    .extensions-deck {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .ext-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    .ext-card-media,
    .ext-card-media.card-media-container {
        display: block !important;
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
        width: 100% !important;
    }
    .decision-cards-grid {
        grid-template-columns: 1fr;
    }
    .luxury-title {
        font-size: 2.3rem;
    }
    .stage-title {
        font-size: 2rem;
    }
    .cart-drawer {
        width: 90vw !important;
        max-width: 90vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 120 !important;
    }
    .cart-drawer-header {
        padding: 16px 18px 12px !important;
    }
    .cart-drawer-body {
        padding: 14px 18px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
    }
    .cart-drawer-footer {
        padding: 12px 18px 76px !important;
        background: var(--bg-floating) !important;
        border-top: 1px solid var(--border-subtle) !important;
    }
    .btn-drawer-checkout {
        padding: 11px 18px !important;
        font-size: 0.88rem !important;
        border-radius: var(--radius-pill) !important;
    }
    /* Ocultar pastillas flotantes de navegación desktop en celular */
    .floating-controls-cluster .btn-floating-stage-nav {
        display: none !important;
    }

    /* Pastillas de navegación móvil integradas en el scroll */
    .mobile-stage-nav-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 20px auto 0 !important;
        box-sizing: border-box !important;
    }
    .mobile-nav-pill {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: rgba(22, 34, 53, 0.95) !important;
        border: 1px solid rgba(197, 160, 89, 0.45) !important;
        color: #f8fafc !important;
        padding: 13px 20px !important;
        border-radius: var(--radius-pill) !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.4px !important;
        cursor: pointer !important;
        backdrop-filter: blur(12px) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
        transition: var(--transition-smooth) !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }
    .mobile-nav-pill.primary {
        background: rgba(16, 185, 129, 0.18) !important;
        border-color: var(--accent-emerald) !important;
        color: var(--accent-emerald) !important;
    }
    .mobile-nav-pill:active {
        transform: scale(0.98) !important;
    }

    /* Ocultar barra de scroll nativa visualmente en móvil manteniendo el scroll activo */
    html, body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
        display: none !important;
        background: transparent !important;
    }

    /* Barra superior desactivada en móvil para unificar controles en la franja inferior */
    .top-nav-bar {
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        border: none !important;
    }
    /* Controles sensoriales integrados en la hilera inferior (Puerto 5014) */
    .top-left-controls {
        position: fixed !important;
        bottom: 12px !important;
        left: 58px !important;
        z-index: 128 !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: auto !important;
    }
    .top-right-controls {
        position: fixed !important;
        bottom: 13px !important;
        right: 58px !important;
        z-index: 128 !important;
        display: flex !important;
        align-items: center !important;
        pointer-events: auto !important;
    }
    .circle-icon-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .gallery-pill-btn {
        height: 30px !important;
        padding: 0 9px !important;
        font-size: 0.70rem !important;
        gap: 4px !important;
    }

    /* Burbujas flotantes de mensajería (Telegram a la izquierda y WhatsApp a la derecha al ras inferior) */
    .messenger-bubbles {
        position: fixed !important;
        bottom: 6px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        z-index: 125 !important;
    }
    .msg-bubble {
        width: 44px !important;
        height: 44px !important;
        pointer-events: auto !important;
    }
    .tg-bubble {
        background: #ffffff !important;
        border: 1.5px solid #0088cc !important;
        box-shadow: 0 4px 14px rgba(0, 136, 204, 0.3) !important;
        order: 1 !important;
    }
    .tg-bubble svg {
        width: 25px !important;
        height: 25px !important;
        fill: #0088cc !important;
    }
    .wa-bubble {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        order: 2 !important;
    }
    .wa-bubble svg {
        width: 44px !important;
        height: 44px !important;
        filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4)) !important;
    }

    /* Carrito flotante y dots en el centro inferior al ras de pantalla */
    .floating-controls-bar {
        position: fixed !important;
        bottom: 6px !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        pointer-events: none !important;
        z-index: 126 !important;
    }
    .cart-badge-widget,
    .cart-circular-badge.cart-badge-widget {
        width: auto !important;
        height: auto !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .cart-badge-circle {
        width: 46px !important;
        height: 46px !important;
        border-width: 3px !important;
    }
    .cart-badge-circle svg {
        width: 21px !important;
        height: 21px !important;
        transform: translateX(-2px) !important;
    }
    .cart-badge-pill {
        margin-top: -8px !important;
        padding: 1px 9px 2px 9px !important;
        font-size: 0.63rem !important;
    }
    .cart-count-badge {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        font-size: 0.65rem !important;
        top: -3px !important;
        right: -3px !important;
    }
    .cart-trigger-container {
        gap: 3px !important;
    }
    .stage-stepper-dots {
        display: flex !important;
        gap: 5px !important;
        padding: 2px 7px !important;
    }
    .stepper-dot {
        width: 5px !important;
        height: 5px !important;
    }
    .stepper-dot.active {
        width: 7px !important;
        height: 7px !important;
    }

    /* Etapa 2: Apilamiento vertical de Experiencia y Selector de Fechas en móvil */
    .exp-interactive-row.focus-active,
    .exp-interactive-row.focus-active.align-left,
    .exp-interactive-row.focus-active.align-right {
        flex-direction: column !important;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: 100%;
    }
    .exp-interactive-row.focus-active .experience-deck {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin: 0;
        justify-content: center;
    }
    .exp-interactive-row.focus-active .exp-card.selected-focus {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        transform: none;
        box-sizing: border-box;
    }
    .exp-interactive-row.focus-active .exp-card.selected-focus .exp-card-media,
    .exp-interactive-row.focus-active .exp-card.selected-focus .exp-card-media.card-media-container {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }
    .exp-interactive-row.focus-active .context-picker-modal {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    .exp-interactive-row.focus-active {
        padding-bottom: 35px !important;
    }
    .exp-interactive-row.focus-active .context-picker-box {
        width: 100%;
        height: auto;
        padding: 16px 14px;
        box-sizing: border-box;
    }
    .picker-inputs-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
        margin-bottom: 16px;
    }
    .stage-footer-actions {
        display: none !important;
    }
    .picker-actions {
        flex-direction: column !important;
        gap: 12px;
        width: 100%;
    }
    .btn-picker-proceed {
        width: 100%;
        justify-content: center;
        order: 1;
        padding: 12px 18px;
        box-sizing: border-box;
    }
    .btn-picker-back {
        width: 100%;
        text-align: center;
        order: 2;
        padding: 8px 12px;
    }

    /* ============================================================
       ETAPA 4 RESPONSIVE MOBILE: LISTADO VERTICAL (CLON DE HABITACIONES Y EXPERIENCIAS)
       ============================================================ */
    #stage-spa-addons .stage-inner {
        padding-top: 10px !important;
        padding-bottom: 76px !important;
    }
    #stage-spa-addons .stage-header {
        margin-bottom: 18px !important;
    }
    #stage-spa-addons .spa-deck {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    #stage-spa-addons .spa-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        box-sizing: border-box !important;
    }
    #stage-spa-addons .spa-card-img,
    #stage-spa-addons .spa-card-img.card-media-container {
        height: 175px !important;
        min-height: 175px !important;
        max-height: 175px !important;
        width: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }
    #stage-spa-addons .spa-card-content {
        padding: 18px 16px 22px !important;
    }
    #stage-spa-addons .spa-title {
        font-size: 1.4rem !important;
    }
    #stage-spa-addons .spa-desc {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }
    #stage-spa-addons .btn-add-spa {
        padding: 12px 18px !important;
        font-size: 0.88rem !important;
        width: 100% !important;
    }
}

/* ============================================================
   ETAPA 6: GALERÍA DE FOTOS MULTI-SECCIÓN & LIGHTBOX (80% VIEWPORT)
   ============================================================ */
.stage-header-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 12px;
    width: 100%;
}

.stage-header-gallery .stage-header-texts {
    width: 100%;
    text-align: center;
}

.gallery-filter-scroll-wrapper {
    position: relative;
    max-width: 960px;
    width: 100%;
    margin: 0 auto 24px auto;
    overflow: hidden;
    padding: 6px 0;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.gallery-sections-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px;
    cursor: grab;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.gallery-sections-filter::-webkit-scrollbar {
    display: none;
}

.gallery-sections-filter.is-dragging {
    cursor: grabbing;
}

.filter-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-primary, #cbd5e1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    outline: none;
    font-family: inherit;
}

.filter-pill:hover,
.filter-pill.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-emerald, #10b981);
    color: var(--accent-emerald, #10b981);
    transform: translateY(-1px);
}

.gallery-sections-filter .filter-pill {
    flex-shrink: 0;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary, #f8fafc);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-sections-filter .filter-pill:hover,
.gallery-sections-filter .filter-pill.active {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #38bdf8;
}

.gallery-deck-container {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
}

.gallery-deck-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.gallery-card {
    flex: 0 1 260px;
    width: 100%;
    max-width: 280px;
    background: #093f66;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}

.gallery-card-media {
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.gallery-zoom-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(22, 34, 53, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    transition: transform 0.2s ease, background 0.2s ease;
}

.gallery-card:hover .gallery-zoom-badge {
    transform: scale(1.12);
    background: #38bdf8;
    color: #0f172a;
}

.gallery-card-body {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #093f66;
}

.gallery-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.gallery-card-tag {
    font-size: 0.70rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

/* Lightbox Modal Maximalista Puro (Sin marcos, bordes ni descripciones) */
.gallery-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    animation: fadeIn 0.25s ease-out;
    cursor: zoom-out;
    user-select: none;
}

.lightbox-dialog {
    width: 100%;
    height: 100%;
    max-width: 96vw;
    max-height: 94vh;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-shadow: none;
    cursor: zoom-out;
}

.btn-lightbox-close {
    display: none !important;
}

.lightbox-img-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    overflow: hidden;
    cursor: zoom-out;
}

.lightbox-img-wrapper img {
    max-width: 95vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 12px;
    user-select: none;
    cursor: zoom-out;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-caption {
    display: none !important;
}

/* ============================================================
   REGLAS RESPONSIVE MOBILE EXCLUSIVAS (DISPOSITIVOS Y SIMULADOR)
   ============================================================ */
@media (max-width: 600px) {
    #stage-impact {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    #stage-impact.active {
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .impact-overlay {
        padding: 14px 18px !important;
        justify-content: center !important;
        margin: auto 0 !important;
        max-height: 100vh !important;
    }

    .brand-crest {
        margin-bottom: 12px !important;
    }

    .brand-logo {
        max-width: 170px !important;
    }

    .luxury-eyebrow {
        font-size: 0.75rem !important;
        letter-spacing: 3px !important;
        margin-bottom: 6px !important;
    }

    .luxury-title {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .luxury-subtitle {
        font-size: 1.15rem !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        padding: 0 8px !important;
        margin-bottom: 22px !important;
    }

    .invitation-box {
        width: 100% !important;
        max-width: 320px !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    .invitation-question {
        font-size: 0.96rem !important;
    }

    .btn-luxury-enter {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        font-size: 0.92rem !important;
    }

    .cards-grid, .experience-grid, .spa-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .stage-inner {
        padding: 10px 14px 76px !important;
        width: 100%;
        box-sizing: border-box;
    }

    #stage-experience-choice .stage-inner,
    #stage-rooms .stage-inner,
    #stage-spa-addons .stage-inner,
    #stage-extensions .stage-inner,
    #stage-gallery .stage-inner,
    #stage-decision .stage-inner {
        padding-bottom: 76px !important;
    }

    .stage-title {
        font-size: 1.65rem;
    }

    .stage-desc {
        font-size: 0.84rem;
        padding: 0 8px;
    }

    .exp-interactive-row.focus-active .context-picker-box {
        padding: 18px 14px;
    }
}

/* ============================================================
   MULTI-ROOM SUMMARY BAR & DINÁMICA DE HABITACIONES
   ============================================================ */
.multi-room-summary-bar {
    max-width: 900px;
    margin: 0 auto 12px;
    background: #162235;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 10px;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.multi-room-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.multi-room-badge {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.multi-room-pax-status {
    font-size: 0.82rem;
    color: #cbd5e1;
    font-weight: 500;
}

.btn-add-room-inline {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-add-room-inline:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-cart-add-room-mini {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
    border-radius: 14px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cart-add-room-mini:hover {
    background: rgba(56, 189, 248, 0.22);
    border-color: #38bdf8;
}

/* ============================================================
   BANNER FIJO DE ADVERTENCIA EN CARRITO
   ============================================================ */
.cart-warning-banner {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    animation: fadeIn 0.3s ease;
}

.cart-warning-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.cart-warning-content {
    font-size: 0.75rem;
    color: #fde68a;
    line-height: 1.35;
}

.cart-warning-content strong {
    color: #fef08a;
}

/* ============================================================
   MODAL DE SELECCIÓN DE HUÉSPEDES PARA NUEVA HABITACIÓN
   ============================================================ */
.modal-pax-picker {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.modal-pax-box {
    background: #162235;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 24px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.modal-pax-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    text-align: center;
}

.modal-pax-sub {
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.35;
}

.pax-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.pax-option-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pax-option-card:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    transform: translateY(-2px);
}

.pax-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: #38bdf8;
}

.pax-lbl {
    font-size: 0.72rem;
    font-weight: 500;
    color: #cbd5e1;
}

/* ============================================================
   FLECHAS FANTASMA FLOTANTES ON-DEMAND (RESPONSIVE MOBILE PUERTO 5014)
   ============================================================ */
.mobile-ghost-nav {
    display: none;
}

@media (max-width: 900px) {
    .mobile-ghost-nav {
        position: fixed;
        top: 50%;
        left: 0;
        right: 0;
        width: 100%;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 125;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .ghost-nav-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(22, 34, 53, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #f8fafc;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.2s ease, border-color 0.2s ease;
        pointer-events: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-ghost-nav.visible .ghost-nav-btn {
        opacity: 0.85;
        transform: scale(1);
        pointer-events: auto;
    }

    .ghost-nav-btn:hover,
    .ghost-nav-btn:active {
        opacity: 1 !important;
        background: rgba(22, 34, 53, 0.95);
        border-color: rgba(16, 185, 129, 0.5);
        color: #10b981;
        transform: scale(1.05) !important;
    }

    .ghost-nav-btn.hidden {
        display: none !important;
    }

    /* Animación de asomo sutil (Peek Effect) al entrar en Etapas 3+ */
    @keyframes mobilePeekCue {
        0% { transform: translateX(0); }
        35% { transform: translateX(-18px); }
        70% { transform: translateX(4px); }
        100% { transform: translateX(0); }
    }

    .mobile-peek-anim {
        animation: mobilePeekCue 0.55s cubic-bezier(0.25, 1, 0.5, 1) 0.3s 1 normal both !important;
    }
}

/* ============================================================
   SISTEMA DE DISEÑO UNIFICADO — HOTEL LUXURY ALPINO (PUERTO 5013)
   ============================================================ */

/* 1. TÍTULOS DE TODAS LAS PÁGINAS (Dorado Hotel Boutique Luxury Alpino) */
.stage-title,
#stage-experience-choice .stage-title,
#stage-rooms .stage-title,
#stage-spa-addons .stage-title,
#stage-extensions .stage-title,
#stage-gallery .stage-title,
#stage-decision .stage-title {
    font-family: var(--font-cinzel) !important;
    color: #e6c575 !important;
    font-size: 2.15rem !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px #000000, 
                 0 2px 8px rgba(0, 0, 0, 0.95), 
                 0 0 20px rgba(0, 0, 0, 0.9) !important;
    margin-bottom: 12px !important;
    text-align: center !important;
}

/* 2. BAJADAS DE TODAS LAS PÁGINAS (Cursiva de Una Experiencia Alpina, agrandadas) */
.stage-desc,
#stage-experience-choice .stage-desc,
#stage-rooms .stage-desc,
#stage-spa-addons .stage-desc,
#stage-extensions .stage-desc,
#stage-gallery .stage-desc,
#stage-decision .stage-desc {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 1.65rem !important;
    color: #f8fafc !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.3px !important;
    max-width: 860px !important;
    margin: 0 auto 28px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 
                 0 2px 8px rgba(0, 0, 0, 0.85) !important;
    text-align: center !important;
}

/* 3. UNIFICACIÓN EN VERDE SALVIA (#b2c8c4) PARA CONTENEDORES Y TARJETAS (PÁGINAS 2 A 6) */
.exp-card,
.context-picker-box,
.room-card,
.spa-card,
.spa-addon-card,
.ext-card,
.extension-card,
.gallery-card,
.gallery-card-body,
.decision-summary-card,
.decision-action-box,
.pax-option-card,
.modal-pax-box {
    background: #b2c8c4 !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 14px 34px rgba(71, 85, 105, 0.22) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Tipografía de alta definición dentro de los contenedores salvia */
.exp-card .exp-card-title,
.context-picker-box .picker-title,
.room-card .room-name,
.room-card .room-card-title,
.spa-card .spa-title,
.spa-addon-card .addon-card-title,
.ext-card .ext-card-title,
.extension-card .ext-card-title,
.gallery-card .gallery-card-title,
.decision-summary-card h3,
.decision-action-box h4 {
    color: #0a0f18 !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

.exp-card .exp-card-desc,
.context-picker-box .picker-sub,
.room-card .room-summary,
.room-card .room-card-desc,
.room-card .room-spec-item,
.spa-card .spa-desc,
.spa-addon-card .addon-card-desc,
.ext-card .ext-card-desc,
.extension-card .ext-card-desc,
.decision-summary-card p,
.decision-action-box p {
    color: #111827 !important;
    font-weight: 500 !important;
    line-height: 1.52 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

/* Pastillas superiores en tarjetas salvia */
.exp-card-badge,
.room-badge,
.room-badge-top,
.spa-badge,
.spa-min-badge,
.addon-badge,
.ext-pill,
.gallery-card-tag {
    background: rgba(15, 23, 42, 0.10) !important;
    color: #0a0f18 !important;
    border: 1px solid rgba(15, 23, 42, 0.24) !important;
    font-weight: 700 !important;
    font-size: 0.70rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-pill) !important;
    padding: 3px 10px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
    align-self: flex-start !important;
}

/* Badges secundarios y etiquetas en reposo sobre fondo salvia */
.ext-room-badge {
    background: rgba(15, 23, 42, 0.08) !important;
    color: #0a0f18 !important;
    border: 1px solid rgba(15, 23, 42, 0.20) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.room-tap-hint,
.ext-tap-hint {
    color: #1e3a5f !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
}

.ext-rate-box {
    background: rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-top: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.ext-calc-note {
    color: #1e293b !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

.ext-price-val {
    color: #0a0f18 !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    font-family: var(--font-cinzel) !important;
}

/* Inputs y selects dentro del contenedor de fechas (Página 3) */
.context-picker-box .picker-field label {
    color: #0a0f18 !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

.context-picker-box .luxury-input,
.context-picker-box .luxury-select,
.context-picker-box input[type="date"],
.context-picker-box select {
    background-color: #c2d7d2 !important;
    color: #0a0f18 !important;
    border: 1px solid rgba(10, 15, 24, 0.25) !important;
    font-weight: 600 !important;
    color-scheme: light;
}

.context-picker-box select option {
    background-color: #c2d7d2 !important;
    color: #0a0f18 !important;
}

.context-picker-box select option:checked,
.context-picker-box select option:hover {
    background-color: #a8c4bd !important;
    color: #0a0f18 !important;
}

/* 4. PALETA DE PASTILLAS SUAVES, DELICADAS Y ARMONIOSAS */
.ghost-nav-btn,
.mobile-nav-pill,
.btn-floating-stage-nav,
.gallery-return-top-btn {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 600 !important;
    padding: 12px 26px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.88rem !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.15) !important;
    transition: all 0.25s ease !important;
}

.btn-floating-stage-nav[style*="display: none"],
.btn-floating-stage-nav[style*="display:none"],
.btn-floating-stage-nav.is-hidden {
    display: none !important;
}

.btn-floating-stage-prev {
    transform: translateY(-50%) !important;
}

.btn-floating-stage-next {
    transform: translateY(-50%) !important;
}

.ghost-nav-btn svg,
.mobile-nav-pill svg,
.btn-floating-stage-nav svg,
.btn-floating-stage-prev svg,
.btn-floating-stage-next svg,
.gallery-return-top-btn svg {
    stroke: #0a0f18 !important;
}

/* Estabilidad estricta: Cero saltos o caídas hacia abajo al posar el cursor */
.ghost-nav-btn:hover,
.mobile-nav-pill:hover,
.gallery-return-top-btn:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

.btn-floating-stage-prev:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: translateY(-50%) !important;
}

.btn-floating-stage-next:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: translateY(-50%) !important;
}

/* Pastillas de acción del selector de fechas: Cambiar Experiencia / Continuar */
.btn-picker-back,
.btn-picker-proceed {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.82rem !important;
    box-shadow: 0 3px 10px rgba(10, 15, 24, 0.12) !important;
    transition: all 0.25s ease !important;
}

.btn-picker-proceed {
    font-weight: 700 !important;
}

.btn-picker-back svg,
.btn-picker-proceed svg {
    stroke: #0a0f18 !important;
}

.btn-picker-back:hover,
.btn-picker-proceed:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

/* Pastillas de acción principal: Checkout / Drawer / Móvil */
.btn-drawer-checkout,
.mobile-nav-pill.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 700 !important;
    padding: 12px 26px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.88rem !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.15) !important;
    transition: all 0.25s ease !important;
}

.btn-drawer-checkout svg,
.mobile-nav-pill.primary svg {
    stroke: #0a0f18 !important;
}

.btn-drawer-checkout:hover,
.mobile-nav-pill.primary:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

/* 5. INSIGNIA DEL CARRITO FLOTANTE (CÍRCULO EUCALIPTO + BORDE Y PASTILLA EN GRIS OSCURO) */
.cart-badge-widget,
.cart-circular-badge.cart-badge-widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cart-badge-widget:hover,
.cart-circular-badge.cart-badge-widget:hover {
    transform: scale(1.08) !important;
    background: transparent !important;
}

.cart-badge-circle {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: #82a398 !important;
    border: 3.5px solid #1e293b !important;
    color: #1e293b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(10, 15, 24, 0.35) !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, background 0.25s ease !important;
}

.cart-badge-circle svg {
    stroke: #1e293b !important;
    color: #1e293b !important;
    width: 27px !important;
    height: 27px !important;
    display: block !important;
    transform: translateX(-2.5px) !important;
    transition: transform 0.25s ease !important;
}

.cart-badge-widget:hover .cart-badge-circle {
    background: #8fb1a6 !important;
}

.cart-badge-widget:hover .cart-badge-circle svg {
    transform: translateX(-2.5px) scale(1.08) !important;
}

.cart-badge-pill {
    margin-top: -10px !important;
    background: #1e293b !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 2px 14px 3px 14px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    z-index: 2 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.cart-count-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ff7a00 !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    z-index: 3 !important;
}

.cart-drawer,
.cart-drawer-header,
.cart-drawer-footer {
    background: #333f3b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

.cart-drawer-header .drawer-title {
    color: #f8fafc !important;
}

.cart-drawer-header .drawer-crest {
    color: #82a398 !important;
}

.cart-drawer-header .drawer-stay-meta {
    color: #cbd5e1 !important;
}

.cart-drawer-header .btn-close-cart {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.cart-drawer-body {
    background: #2b3532 !important;
}

.cart-section .cart-sec-label {
    color: #82a398 !important;
    font-weight: 700 !important;
}

.cart-card-item,
.cart-item-row {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.22) !important;
    color: #0a0f18 !important;
}

.cart-card-item *,
.cart-item-row * {
    color: #0a0f18 !important;
}

.cart-totals-box {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.22) !important;
}

.cart-totals-box * {
    color: #0a0f18 !important;
}

/* 6. PÁGINA 7: FORMAS DE PAGO (TRANSFERENCIA Y TARJETA) */
.checkout-choice-pills {
    margin-top: 2px !important;
    gap: 6px !important;
}

.btn-payment-choice-pill,
.btn-payment-choice-pill.pill-transfer,
.btn-payment-choice-pill.pill-card {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.12) !important;
    transition: all 0.25s ease !important;
    padding: 10px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
}

.btn-payment-choice-pill:hover,
.btn-payment-choice-pill.pill-transfer:hover,
.btn-payment-choice-pill.pill-card:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    transform: none !important;
}

.btn-payment-choice-pill .payment-pill-title,
.btn-payment-choice-pill .payment-pill-title span {
    color: #0a0f18 !important;
    font-size: 0.90rem !important;
    font-weight: 700 !important;
}

.btn-payment-choice-pill .payment-pill-sub {
    color: #14201c !important;
    font-weight: 500 !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
}

.btn-payment-choice-pill .payment-pill-arrow {
    color: #0a0f18 !important;
}

.btn-payment-choice-pill .payment-pill-icon {
    background: rgba(10, 15, 24, 0.10) !important;
    color: #0a0f18 !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1.15rem !important;
}

/* 7. PÁGINA 7: WHATSAPP, TELEGRAM, TELÉFONO Y CORREO CONCIERGE */
.btn-messenger-bubble,
.btn-messenger-bubble.bubble-wa,
.btn-messenger-bubble.bubble-tg {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(10, 15, 24, 0.12) !important;
    transition: all 0.25s ease !important;
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
}

.btn-messenger-bubble svg {
    fill: #0a0f18 !important;
}

.btn-messenger-bubble:hover,
.btn-messenger-bubble.bubble-wa:hover,
.btn-messenger-bubble.bubble-tg:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

.concierge-direct-links {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.concierge-direct-pill,
#concierge-phone-link,
#concierge-email-link {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(10, 15, 24, 0.12) !important;
    transition: all 0.25s ease !important;
    padding: 8px 14px !important;
    font-size: 0.84rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.concierge-direct-pill svg {
    stroke: #0a0f18 !important;
    width: 16px !important;
    height: 16px !important;
}

.concierge-direct-pill:hover,
#concierge-phone-link:hover,
#concierge-email-link:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

.btn-confirm-reserve {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
}

.btn-confirm-reserve:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

/* 8. PÁGINA 7: RECUADRO VIP PASS / COTIZACIÓN EN VERDE SALVIA ELEVADO */
.vip-preview-card {
    background: #82a398 !important;
    border: 1px dashed rgba(10, 15, 24, 0.45) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.12) !important;
}

.vip-preview-card .vip-crest {
    color: #0a0f18 !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    font-size: 0.76rem !important;
    text-shadow: none !important;
}

.vip-preview-card .vip-code {
    color: #0a0f18 !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    margin: 4px 0 !important;
    text-shadow: none !important;
}

.vip-preview-card .vip-text {
    color: #14201c !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
}

/* 9. PÁGINA 7: CONTENEDORES DE DECISIÓN CON FONDO DE CABECERA DE CARRITO (#333f3b) */
.decision-card {
    background: #333f3b !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    padding: 14px 22px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

.decision-card-icon {
    display: none !important;
}

.decision-card .decision-card-title {
    color: #f8fafc !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 1.45rem !important;
    letter-spacing: 0.6px !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.decision-card .decision-card-desc {
    color: #cbd5e1 !important;
    font-size: 0.90rem !important;
    font-weight: 400 !important;
    line-height: 1.40 !important;
    margin-bottom: 12px !important;
}

.decision-card .luxury-input,
.decision-card .luxury-select,
.decision-card input[type="text"],
.decision-card input[type="tel"],
.decision-card input[type="email"],
.decision-card select,
#modal-body-card .luxury-input,
#modal-body-card input[type="text"],
#modal-body-card input[type="password"],
#modal-body-card select {
    background-color: #d6e6e2 !important;
    color: #0a0f18 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    font-weight: 600 !important;
    color-scheme: light;
    padding: 9px 12px !important;
    font-size: 0.86rem !important;
    border-radius: 8px !important;
}

#modal-body-card label {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.decision-card .luxury-input::placeholder,
.decision-card input::placeholder,
#modal-body-card .luxury-input::placeholder,
#modal-body-card input::placeholder {
    color: #3f534e !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.decision-card .luxury-input:focus,
.decision-card .luxury-select:focus,
.decision-card select:focus,
#modal-body-card .luxury-input:focus,
#modal-body-card input:focus,
#modal-body-card select:focus {
    border-color: #82a398 !important;
    background-color: #e2f0ec !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(130, 163, 152, 0.4) !important;
}

.decision-card select.luxury-input,
.decision-card select {
    background-color: #d6e6e2 !important;
    color: #0a0f18 !important;
    accent-color: #82a398 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0f18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    padding-right: 28px !important;
}

.decision-card select.luxury-input option,
.decision-card select option {
    background-color: #d6e6e2 !important;
    color: #0a0f18 !important;
    padding: 10px 14px;
}

.decision-card select.luxury-input option:checked,
.decision-card select.luxury-input option:hover,
.decision-card select.luxury-input option:focus,
.decision-card select option:checked,
.decision-card select option:hover,
.decision-card select option:focus {
    background-color: #82a398 !important;
    color: #0a0f18 !important;
}

.decision-card .messenger-choice-title {
    color: #f8fafc !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    margin-bottom: 8px !important;
}

/* Blindaje anti-fondo negro en autocompletado nativo del navegador */
.decision-card input.luxury-input:-webkit-autofill,
.decision-card input.luxury-input:-webkit-autofill:hover, 
.decision-card input.luxury-input:-webkit-autofill:focus, 
.decision-card input.luxury-input:-webkit-autofill:active,
#booking-guest-form input:-webkit-autofill,
#booking-guest-form input:-webkit-autofill:hover,
#booking-guest-form input:-webkit-autofill:focus,
#booking-guest-form input:-webkit-autofill:active,
#modal-body-card input:-webkit-autofill,
#modal-body-card input:-webkit-autofill:hover,
#modal-body-card input:-webkit-autofill:focus,
#modal-body-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #d6e6e2 inset !important;
    -webkit-text-fill-color: #0a0f18 !important;
    caret-color: #0a0f18 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Custom Selects en Página 7 — Erradicación total del azul nativo y viñetas */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.custom-select-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #d6e6e2 !important;
    color: #0a0f18 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    border-radius: 6px !important;
    padding: 7px 11px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap !important;
}

.custom-select-trigger .custom-select-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto;
    text-align: left;
}

.custom-select-trigger.is-active,
.custom-select-trigger:focus {
    border-color: #82a398 !important;
    background-color: #e2f0ec !important;
    box-shadow: 0 0 0 2px rgba(130, 163, 152, 0.4) !important;
}

.custom-select-trigger .custom-select-arrow {
    display: inline-flex;
    align-items: center;
    color: #0a0f18;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 6px;
}

.custom-select-trigger.is-active .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #d6e6e2;
    border: 1px solid rgba(10, 15, 24, 0.28);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    scrollbar-width: thin;
    scrollbar-color: #82a398 #d6e6e2;
}

.custom-select-menu.is-open {
    display: block !important;
}

.custom-select-option {
    padding: 9px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0a0f18;
    background: #d6e6e2;
    cursor: pointer;
    transition: background 0.12s ease;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.custom-select-option:hover {
    background-color: #82a398 !important;
    color: #0a0f18 !important;
    font-weight: 700 !important;
}

/* 10. DESPLEGABLE DE TARIFARIO EN HOVER (GRIS PELTRE / PIEDRA ALPINA) & BOTONES / TARIFAS (VERDE EUCALIPTO) */
.room-hover-floating {
    background: #333f3b !important;
    border-top: 1px solid rgba(130, 163, 152, 0.35) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45) !important;
}

.floating-badge {
    color: #82a398 !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
}

.floating-room-name {
    color: #f8fafc !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
}

.floating-dates {
    color: #cbd5e1 !important;
}

/* Contenedor flotante interno de tarifas (Tarifas de transferencia y con tarjeta) */
.floating-rates {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.22) !important;
    border-radius: 8px !important;
    padding: 9px 13px !important;
    box-shadow: 0 3px 10px rgba(10, 15, 24, 0.12) !important;
}

.floating-rates .rate-label {
    color: #0a0f18 !important;
    font-weight: 600 !important;
}

.floating-rates .rate-value {
    color: #0a0f18 !important;
    font-weight: 700 !important;
}

.floating-rates .rate-transfer .rate-value,
.floating-rates .rate-card .rate-value {
    color: #0a0f18 !important;
    font-weight: 700 !important;
}

/* Botón / Pastilla de Sumar Habitación / Servicio hasta la Página 6 */
.btn-select-room {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.15) !important;
    transition: all 0.25s ease !important;
}

.btn-select-room svg {
    stroke: #0a0f18 !important;
}

.btn-select-room:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

.btn-select-room.selected {
    background: #5a7b6f !important;
    color: #f8fafc !important;
    border-color: rgba(10, 15, 24, 0.4) !important;
}

.btn-select-room.selected svg {
    stroke: #f8fafc !important;
}

/* Botones secundarios de sumar habitación inline y mini en carrito */
.btn-add-room-inline,
.btn-cart-add-room-mini {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(10, 15, 24, 0.12) !important;
}

.btn-add-room-inline:hover,
.btn-cart-add-room-mini:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: none !important;
}

/* ============================================================
   PARLANTITO Y PASTILLA DE GALERÍA: UNIFICACIÓN DE COLOR Y DESPLAZAMIENTO DINÁMICO
   ============================================================ */
.circle-icon-btn,
.gallery-pill-btn {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.28) !important;
    color: #0a0f18 !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.15) !important;
}

.circle-icon-btn svg,
.gallery-pill-btn svg {
    stroke: #0a0f18 !important;
}

.circle-icon-btn:hover,
.gallery-pill-btn:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
}

.circle-icon-btn.playing {
    background: #82a398 !important;
    border-color: rgba(10, 15, 24, 0.45) !important;
    color: #0a0f18 !important;
}

.circle-icon-btn.playing:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
}

/* Transición fluida para la pastilla de galería */
.gallery-pill-btn {
    font-weight: 600 !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Desplazamiento dinámico hacia la izquierda al abrir el carrito */
body.cart-opened .gallery-pill-btn {
    transform: translateX(-430px) !important;
}

body.cart-opened .gallery-pill-btn:hover {
    transform: translateX(-430px) scale(1.03) !important;
}

@media (max-width: 900px) {
    body.cart-opened .gallery-pill-btn {
        transform: translateX(calc(-90vw - 12px)) !important;
    }
    body.cart-opened .gallery-pill-btn:hover {
        transform: translateX(calc(-90vw - 12px)) scale(1.03) !important;
    }
}

/* ============================================================
   PIE DE FUNCIONES Y NAVEGACIÓN MÓVIL (EXCLUSIVO PUERTO 5014)
   ============================================================ */

/* Por defecto en cualquier entorno no-5014: oculto siempre */
.mobile-functions-bar {
    display: none !important;
}

/* 1. ELIMINACIÓN DE CONTROLES DUPLICADOS Y FLECHAS FANTASMA (PUERTO 5014) */
body.is-pualy-5014 #mobile-ghost-nav,
body.is-pualy-5014 .mobile-ghost-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Retiro de controles superpuestos en pantalla (circulito parlante y pastilla galería superior) */
body.is-pualy-5014 #soundscape-toggle,
body.is-pualy-5014 .circle-icon-btn,
body.is-pualy-5014 #btn-quick-gallery,
body.is-pualy-5014 .gallery-pill-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* 2. RETIRO DE PUNTITOS GIRATORIOS STEPPER (PUERTO 5014) */
body.is-pualy-5014 #stage-stepper-dots,
body.is-pualy-5014 .stage-stepper-dots {
    display: none !important;
}

/* RETIRO DE PASTILLAS INFERIORES DE NAVEGACIÓN EN PÁGINAS 3, 4, 5, 6 Y 7 (PUERTO 5014) */
body.is-pualy-5014 #stage-rooms .mobile-stage-nav-row,
body.is-pualy-5014 #stage-spa-addons .mobile-stage-nav-row,
body.is-pualy-5014 #stage-extensions .mobile-stage-nav-row,
body.is-pualy-5014 #stage-gallery .mobile-stage-nav-row,
body.is-pualy-5014 #stage-decision .mobile-stage-nav-row,
html.is-pualy-5014 #stage-rooms .mobile-stage-nav-row,
html.is-pualy-5014 #stage-spa-addons .mobile-stage-nav-row,
html.is-pualy-5014 #stage-extensions .mobile-stage-nav-row,
html.is-pualy-5014 #stage-gallery .mobile-stage-nav-row,
html.is-pualy-5014 #stage-decision .mobile-stage-nav-row {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 3. PANTALLA 2 (EXPERIENCIAS): PARLANTITO BIEN A LA IZQUIERDA Y WHATSAPP A LA DERECHA */
/* Remover pastilla de galería en página 2 */
body.stage-is-experience-choice #btn-quick-gallery,
body.stage-is-experience-choice .gallery-pill-btn,
body.stage-is-experience-choice .top-right-controls {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Parlantito bien a la izquierda de la pantalla, a la misma altura que WhatsApp */
body.stage-is-experience-choice .top-left-controls {
    position: fixed !important;
    bottom: 16px !important;
    top: auto !important;
    left: 16px !important;
    right: auto !important;
    z-index: 125 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.stage-is-experience-choice #soundscape-toggle,
body.stage-is-experience-choice .top-left-controls .circle-icon-btn {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    pointer-events: auto !important;
}

/* Solo WhatsApp abajo a la derecha en página 2 */
body.stage-is-experience-choice .messenger-bubbles {
    position: fixed !important;
    bottom: 16px !important;
    top: auto !important;
    left: auto !important;
    right: 16px !important;
    width: auto !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
    z-index: 125 !important;
}
body.stage-is-experience-choice .tg-bubble {
    display: none !important;
}
body.stage-is-experience-choice .wa-bubble {
    display: flex !important;
    pointer-events: auto !important;
}

/* Ocultar controles redundantes en etapas con barra inferior activa (Puerto 5014) */
body.is-pualy-5014.has-functions-bar .top-left-controls,
body.is-pualy-5014.has-functions-bar .top-right-controls {
    display: none !important;
}

/* Ocultar barra superior en etapa 1 de impacto */
body.stage-is-impact .top-left-controls,
body.stage-is-impact .top-right-controls,
body.stage-is-impact .top-nav-bar {
    display: none !important;
}

/* 4. PANTALLAS 3 A 7: BARRA INFERIOR COMPACTA CON FONDO VERDE SALVIA DEL CARRITO */
body.is-pualy-5014.has-functions-bar .mobile-functions-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 42px !important;
    background: #82a398 !important;
    border-top: 1px solid rgba(10, 15, 24, 0.22) !important;
    z-index: 126 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.3) !important;
}

/* Estructura dividida de la barra inferior */
.mobile-bar-side {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
    gap: 4px;
}
.mobile-bar-left {
    justify-content: flex-start;
}
.mobile-bar-right {
    justify-content: flex-end;
}
.mobile-bar-center-slot {
    width: 72px;
    flex-shrink: 0;
    height: 100%;
}

/* Rayitas divisorias entre funciones */
.mobile-bar-divider {
    width: 1px;
    height: 18px;
    background: rgba(10, 15, 24, 0.22);
    flex-shrink: 0;
    margin: 0 3px;
}

/* Botones de navegación y acción: Sin pastillas, textos e íconos limpios */
.mobile-bar-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0a0f18 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    gap: 4px;
}
.mobile-bar-btn:active {
    opacity: 0.65;
    transform: scale(0.95);
}
.mobile-bar-btn-arrow {
    padding: 2px 8px !important;
}
.mobile-bar-btn-audio {
    padding: 2px 6px !important;
}
.mobile-bar-btn-gallery {
    padding: 2px 6px !important;
}
.mobile-bar-btn-gallery:active,
.mobile-bar-btn-gallery.active {
    opacity: 0.7;
}

/* Ondas del parlantito al sonar */
.mobile-bar-btn-audio.playing .bar-sound-waves {
    animation: pulseWaves 1.4s infinite ease-in-out;
}

/* 5. EL CARRITO UBICADO EN EL CENTRO SOBRE LA BARRA DIVISORIA (AGRANDADO Y APOYADO AL RAS) */
body.is-pualy-5014.has-functions-bar .floating-controls-bar {
    position: fixed !important;
    bottom: 0px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 42px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    pointer-events: none !important;
    z-index: 128 !important;
}
body.is-pualy-5014.has-functions-bar .floating-controls-cluster {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: auto !important;
    pointer-events: none !important;
}
body.is-pualy-5014.has-functions-bar .cart-trigger-container {
    pointer-events: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
body.is-pualy-5014.has-functions-bar .cart-circular-badge,
body.is-pualy-5014.has-functions-bar .cart-badge-widget {
    pointer-events: auto !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0px !important;
}
body.is-pualy-5014.has-functions-bar .cart-badge-circle {
    width: 52px !important;
    height: 52px !important;
    border-width: 3.5px !important;
    border-color: #1e293b !important;
    background: #82a398 !important;
}
body.is-pualy-5014.has-functions-bar .cart-badge-circle svg {
    width: 24px !important;
    height: 24px !important;
    transform: translateX(-1.5px) !important;
}
body.is-pualy-5014.has-functions-bar .cart-count-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.68rem !important;
    top: -2px !important;
    right: -2px !important;
}
body.is-pualy-5014.has-functions-bar .cart-badge-pill {
    margin-top: -9px !important;
    margin-bottom: 0px !important;
    background: #1e293b !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 2px 10px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* 6. ELEVACIÓN DE TELEGRAM Y WHATSAPP POR ENCIMA DEL PIE DE FUNCIONES */
body.is-pualy-5014.has-functions-bar .messenger-bubbles {
    position: fixed !important;
    bottom: 54px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 125 !important;
}
body.is-pualy-5014.has-functions-bar .msg-bubble {
    pointer-events: auto !important;
}

/* 7. COMPENSACIÓN INFERIOR PARA QUE EL CONTENIDO NO SE SOLAPE CON LA BARRA FIJA */
body.is-pualy-5014.has-functions-bar .stage-inner {
    padding-bottom: 60px !important;
}

/* 8. GALERÍA ADAPTADA MÓVIL PUERTO 5014: TÍTULO CENTRADO, FILTROS SALVIA Y FICHERO INFINITO */
/* Remoción de botón superior Volver */
body.is-pualy-5014 #stage-gallery #btn-return-gallery-top,
body.is-pualy-5014 #stage-gallery .gallery-return-top-btn,
html.is-pualy-5014 #stage-gallery #btn-return-gallery-top,
html.is-pualy-5014 #stage-gallery .gallery-return-top-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Centrado exacto del encabezado */
body.is-pualy-5014 #stage-gallery .stage-header-gallery,
html.is-pualy-5014 #stage-gallery .stage-header-gallery {
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

body.is-pualy-5014 #stage-gallery .stage-header-gallery .stage-header-texts,
html.is-pualy-5014 #stage-gallery .stage-header-gallery .stage-header-texts {
    text-align: center !important;
    width: 100% !important;
}

body.is-pualy-5014 #stage-gallery .stage-title,
html.is-pualy-5014 #stage-gallery .stage-title {
    text-align: center !important;
    margin-bottom: 6px !important;
}

body.is-pualy-5014 #stage-gallery .stage-desc,
html.is-pualy-5014 #stage-gallery .stage-desc {
    text-align: center !important;
    margin: 0 auto !important;
}

/* Pastillas de filtro por sección con estilo uniforme del sistema (#82a398) */
body.is-pualy-5014 .gallery-sections-filter .filter-pill,
html.is-pualy-5014 .gallery-sections-filter .filter-pill {
    background: rgba(130, 163, 152, 0.16) !important;
    border: 1px solid rgba(130, 163, 152, 0.38) !important;
    color: #e2e8f0 !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
}

body.is-pualy-5014 .gallery-sections-filter .filter-pill:hover,
body.is-pualy-5014 .gallery-sections-filter .filter-pill.active,
html.is-pualy-5014 .gallery-sections-filter .filter-pill:hover,
html.is-pualy-5014 .gallery-sections-filter .filter-pill.active {
    background: #82a398 !important;
    border-color: rgba(10, 15, 24, 0.4) !important;
    color: #0a0f18 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(10, 15, 24, 0.22) !important;
    transform: none !important;
}

/* Contenedor y Escenario Fichero de Fotos (Cover Flow / Card Deck) */
body.is-pualy-5014 #stage-gallery .gallery-deck-container,
html.is-pualy-5014 #stage-gallery .gallery-deck-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px auto 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

body.is-pualy-5014 #stage-gallery .gallery-deck-grid,
html.is-pualy-5014 #stage-gallery .gallery-deck-grid {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(300px, 48vh, 390px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* Tarjeta individual del fichero */
body.is-pualy-5014 .gallery-fichero-card,
html.is-pualy-5014 .gallery-fichero-card {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 275px !important;
    max-width: 74vw !important;
    height: 100% !important;
    margin-left: calc(-1 * min(275px, 74vw) / 2) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #093f66 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.35s ease, filter 0.35s ease, z-index 0.35s ease !important;
    user-select: none !important;
    cursor: pointer !important;
    will-change: transform, opacity !important;
}

body.is-pualy-5014 .gallery-fichero-img,
html.is-pualy-5014 .gallery-fichero-img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 17px !important;
}

/* Estados del Fichero: Primera Plana (Centro) y Segunda Plana (Laterales asomando) */
body.is-pualy-5014 .gallery-fichero-card.is-center,
html.is-pualy-5014 .gallery-fichero-card.is-center {
    transform: translateX(0) scale(1) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

body.is-pualy-5014 .gallery-fichero-card.is-next,
html.is-pualy-5014 .gallery-fichero-card.is-next {
    transform: translateX(64%) scale(0.86) !important;
    z-index: 5 !important;
    opacity: 0.55 !important;
    filter: brightness(0.7) !important;
    pointer-events: auto !important;
}

body.is-pualy-5014 .gallery-fichero-card.is-prev,
html.is-pualy-5014 .gallery-fichero-card.is-prev {
    transform: translateX(-64%) scale(0.86) !important;
    z-index: 5 !important;
    opacity: 0.55 !important;
    filter: brightness(0.7) !important;
    pointer-events: auto !important;
}

body.is-pualy-5014 .gallery-fichero-card.is-hidden-right,
html.is-pualy-5014 .gallery-fichero-card.is-hidden-right {
    transform: translateX(110%) scale(0.7) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.is-pualy-5014 .gallery-fichero-card.is-hidden-left,
html.is-pualy-5014 .gallery-fichero-card.is-hidden-left {
    transform: translateX(-110%) scale(0.7) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Indicador de fotos discreto debajo del fichero */
body.is-pualy-5014 .gallery-fichero-counter,
html.is-pualy-5014 .gallery-fichero-counter {
    text-align: center !important;
    margin: 8px auto 0 auto !important;
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
}

/* Vista Ampliada Limpia en Móvil Puerto 5014 (Sin contorno, sin descripciones, sin botones) */
body.is-pualy-5014 #gallery-lightbox-modal.active,
html.is-pualy-5014 #gallery-lightbox-modal.active {
    background: rgba(10, 15, 24, 0.94) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.is-pualy-5014 #gallery-lightbox-modal:not(.active),
html.is-pualy-5014 #gallery-lightbox-modal:not(.active) {
    display: none !important;
}

body.is-pualy-5014 #gallery-lightbox-modal .lightbox-dialog,
html.is-pualy-5014 #gallery-lightbox-modal .lightbox-dialog {
    width: 96vw !important;
    height: 92vh !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.is-pualy-5014 #gallery-lightbox-modal .btn-lightbox-close,
html.is-pualy-5014 #gallery-lightbox-modal .btn-lightbox-close,
body.is-pualy-5014 #gallery-lightbox-modal .lightbox-caption,
html.is-pualy-5014 #gallery-lightbox-modal .lightbox-caption {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.is-pualy-5014 #gallery-lightbox-modal .lightbox-img-wrapper,
html.is-pualy-5014 #gallery-lightbox-modal .lightbox-img-wrapper {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

body.is-pualy-5014 #gallery-lightbox-modal .lightbox-img-wrapper img,
html.is-pualy-5014 #gallery-lightbox-modal .lightbox-img-wrapper img {
    max-width: 96vw !important;
    max-height: 88vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65) !important;
    cursor: pointer !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1) !important;
}

/* ========================================================
   PUERTO 5013 (DESKTOP): PASTILLAS OFICIALES Y SCROLL HORIZONTAL
   ======================================================== */
body:not(.is-pualy-5014) .gallery-filter-scroll-wrapper {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overflow: visible !important;
    max-width: 1100px !important;
    width: 100% !important;
    margin: 0 auto 16px auto !important;
    padding: 4px 0 !important;
}

body:not(.is-pualy-5014) .gallery-sections-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 6px 16px 14px 16px !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: #82a398 rgba(22, 34, 53, 0.7) !important;
}

body:not(.is-pualy-5014) .gallery-sections-filter::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
}

body:not(.is-pualy-5014) .gallery-sections-filter::-webkit-scrollbar-track {
    background: rgba(22, 34, 53, 0.7) !important;
    border-radius: 10px !important;
}

body:not(.is-pualy-5014) .gallery-sections-filter::-webkit-scrollbar-thumb {
    background: #82a398 !important;
    border-radius: 10px !important;
}

body:not(.is-pualy-5014) .gallery-sections-filter::-webkit-scrollbar-thumb:hover {
    background: #739589 !important;
}

/* Pastillas de filtro idénticas a los botones oficiales ("Volver a habitaciones", "Continuar") */
body:not(.is-pualy-5014) .gallery-sections-filter .filter-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(130, 163, 152, 0.18) !important;
    border: 1px solid rgba(130, 163, 152, 0.35) !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.88rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

body:not(.is-pualy-5014) .gallery-sections-filter .filter-pill:hover {
    background: #739589 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.2) !important;
}

body:not(.is-pualy-5014) .gallery-sections-filter .filter-pill.active {
    background: #82a398 !important;
    border: 1px solid rgba(10, 15, 24, 0.35) !important;
    color: #0a0f18 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(10, 15, 24, 0.25) !important;
}

/* ========================================================
   PUERTO 5013 (DESKTOP): CARRUSEL FICHERO INFINITO (COVER-FLOW)
   ======================================================== */
body:not(.is-pualy-5014) #stage-gallery .gallery-deck-container {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 12px auto 0 auto !important;
    padding: 10px 0 !important;
    overflow: visible !important;
    position: relative !important;
}

body:not(.is-pualy-5014) #stage-gallery .gallery-deck-grid {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(420px, 56vh, 540px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* Tarjeta individual del fichero en Desktop (5013) */
body:not(.is-pualy-5014) .gallery-fichero-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: clamp(540px, 58vw, 820px) !important;
    max-width: 86vw !important;
    height: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #093f66 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), 
                filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform, opacity !important;
    user-select: none !important;
}

body:not(.is-pualy-5014) .gallery-fichero-img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 19px !important;
}

/* Primera Plana: Foto activa centrada con protagonismo total */
body:not(.is-pualy-5014) .gallery-fichero-card.is-center {
    transform: translateX(0) scale(1) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    border: 1.5px solid rgba(130, 163, 152, 0.45) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Segunda Plana: Asoma lateral izquierdo y derecho */
body:not(.is-pualy-5014) .gallery-fichero-card.is-next {
    transform: translateX(58%) scale(0.85) !important;
    z-index: 5 !important;
    opacity: 0.52 !important;
    filter: brightness(0.65) !important;
    pointer-events: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.is-pualy-5014) .gallery-fichero-card.is-prev {
    transform: translateX(-58%) scale(0.85) !important;
    z-index: 5 !important;
    opacity: 0.52 !important;
    filter: brightness(0.65) !important;
    pointer-events: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.is-pualy-5014) .gallery-fichero-card.is-next:hover,
body:not(.is-pualy-5014) .gallery-fichero-card.is-prev:hover {
    opacity: 0.8 !important;
    filter: brightness(0.85) !important;
}

/* Ocultas fuera de vista */
body:not(.is-pualy-5014) .gallery-fichero-card.is-hidden-right {
    transform: translateX(120%) scale(0.7) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body:not(.is-pualy-5014) .gallery-fichero-card.is-hidden-left {
    transform: translateX(-120%) scale(0.7) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Flechas direccionales flotantes en Desktop */
body:not(.is-pualy-5014) .gallery-fichero-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 25 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(22, 34, 53, 0.88) !important;
    border: 1.5px solid rgba(130, 163, 152, 0.45) !important;
    color: #82a398 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.25s ease !important;
    backdrop-filter: blur(10px) !important;
}

body:not(.is-pualy-5014) .gallery-fichero-prev {
    left: 16px !important;
}

body:not(.is-pualy-5014) .gallery-fichero-next {
    right: 16px !important;
}

body:not(.is-pualy-5014) .gallery-fichero-arrow:hover {
    background: #82a398 !important;
    border-color: rgba(10, 15, 24, 0.5) !important;
    color: #0a0f18 !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 10px 28px rgba(130, 163, 152, 0.3) !important;
}

body:not(.is-pualy-5014) .gallery-fichero-counter {
    text-align: center !important;
    margin: 16px auto 0 auto !important;
    font-size: 0.88rem !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

/* ========================================================
   SELECTOR DESPLEGABLE ELEGANTE DE SECCIONES (PUERTO 5013 DESKTOP)
   ======================================================== */
body:not(.is-pualy-5014) #stage-gallery .gallery-filter-scroll-wrapper {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    margin: 0 auto 16px auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    max-width: 100% !important;
    width: auto !important;
}

body:not(.is-pualy-5014) #stage-gallery .gallery-sections-filter {
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
    padding: 0 !important;
    cursor: default !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-container {
    position: relative !important;
    display: inline-block !important;
    z-index: 100 !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-trigger {
    background: #82a398 !important;
    border: 1.5px solid rgba(10, 15, 24, 0.35) !important;
    color: #0a0f18 !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    border-radius: 24px !important;
    padding: 8px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    user-select: none !important;
    font-family: inherit !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-trigger:hover {
    background: #94b8ac !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(130, 163, 152, 0.35) !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.25s ease !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-trigger.is-active .gallery-dropdown-arrow {
    transform: rotate(180deg) !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
    min-width: 250px !important;
    max-height: 290px !important;
    overflow-y: auto !important;
    background: #162235 !important;
    border: 1px solid rgba(130, 163, 152, 0.45) !important;
    border-radius: 14px !important;
    padding: 8px 6px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65) !important;
    z-index: 150 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;
    scrollbar-width: thin !important;
    scrollbar-color: #82a398 rgba(255, 255, 255, 0.05) !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-item {
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-item:hover {
    background: rgba(130, 163, 152, 0.16) !important;
    color: #f8fafc !important;
}

body:not(.is-pualy-5014) .gallery-dropdown-item.is-selected {
    background: rgba(130, 163, 152, 0.26) !important;
    color: #82a398 !important;
    font-weight: 700 !important;
}