/* Doorprem Catalogo Static CSS Bundle */
        /* ================= GUÍAS VISUALES / FLYERS ================= */
        .btn-topbar-guias {
            background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(37,99,235,0.28));
            border: 1px solid rgba(59,130,246,0.4);
            color: #93c5fd;
            padding: 7px 13px;
            border-radius: 999px;
            font-weight: 800;
            font-size: 13px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
            font-family: inherit;
            flex-shrink: 0;
        }
        .btn-topbar-guias:hover {
            background: linear-gradient(135deg, rgba(59,130,246,0.32), rgba(37,99,235,0.45));
            border-color: rgba(96,165,250,0.6);
            color: #fff;
            transform: translateY(-1px);
        }
        .btn-topbar-sugerencia {
            background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.28));
            border: 1px solid rgba(245,158,11,0.4);
            color: #fde68a;
            padding: 7px 13px;
            border-radius: 999px;
            font-weight: 800;
            font-size: 13px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all .2s;
            font-family: inherit;
            flex-shrink: 0;
        }
        .btn-topbar-sugerencia:hover {
            background: linear-gradient(135deg, rgba(245,158,11,0.32), rgba(217,119,6,0.45));
            border-color: rgba(251,191,36,0.6);
            color: #fff;
            transform: translateY(-1px);
        }
        /* ================= SWITCH AUTO-RENOVACIÓN ================= */
        .switch-auto-renov {
            position: relative;
            display: inline-block;
            width: 36px;
            height: 20px;
            flex-shrink: 0;
            vertical-align: middle;
            margin: 0;
        }
        .switch-auto-renov input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }
        .slider-round {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: #334155;
            transition: .25s ease;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .slider-round:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 2px;
            bottom: 2px;
            background-color: #fff;
            transition: .25s ease;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .switch-auto-renov input:checked + .slider-round {
            background-color: #10b981;
            border-color: #059669;
        }
        .switch-auto-renov input:checked + .slider-round:before {
            transform: translateX(16px);
        }
        /* ================= MODAL NOVEDAD / NUEVO STOCK POPUP ================= */
        .modal-novedad-backdrop {
            background: rgba(2, 6, 23, 0.88) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            z-index: 100000;
            padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(16px, env(safe-area-inset-bottom, 16px)) 12px;
            box-sizing: border-box;
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        .modal-novedad-backdrop.show {
            display: flex !important;
        }
        .modal-novedad-card {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid rgba(245, 158, 11, 0.45);
            border-radius: 18px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(245, 158, 11, 0.15);
            max-width: 400px;
            width: 100%;
            max-height: min(90vh, calc(100dvh - 24px));
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: auto;
            animation: popToast 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal-novedad-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px 8px;
            flex-shrink: 0;
            background: rgba(15, 23, 42, 0.98);
            border-bottom: 1px solid rgba(245, 158, 11, 0.2);
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .modal-novedad-tag {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
        }
        .modal-novedad-close {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #94a3b8;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .modal-novedad-close:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.4);
        }
        .modal-novedad-nav-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #f1f5f9;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 16px;
            font-weight: 700;
            line-height: 1;
            transition: all 0.2s;
        }
        .modal-novedad-nav-btn:hover {
            background: rgba(245, 158, 11, 0.25);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.5);
            transform: scale(1.05);
        }
        .modal-novedad-slide {
            animation: fadeInPopSlide 0.25s ease-out;
        }
        @keyframes fadeInPopSlide {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-novedad-body {
            padding: 8px 18px 14px;
            text-align: center;
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        .modal-novedad-img-box {
            width: 100%;
            height: 130px;
            background: radial-gradient(circle at center, rgba(51, 65, 85, 0.5) 0%, rgba(15, 23, 42, 0.95) 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            border: 1px solid rgba(245, 158, 11, 0.22);
            overflow: hidden;
            position: relative;
            padding: 10px;
            box-sizing: border-box;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.45);
        }
        .modal-novedad-img {
            max-height: 95px;
            max-width: 85%;
            width: auto;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal-novedad-card:hover .modal-novedad-img {
            transform: scale(1.04);
        }
        .modal-novedad-img-box:has(img[src*="assets/img/servicios/"]) {
            padding: 0;
            height: 156px;
        }
        .modal-novedad-img[src*="assets/img/servicios/"] {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: cover;
        }
        .modal-novedad-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            height: 100%;
        }
        .modal-novedad-placeholder-avatar {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
            color: #ffffff;
            font-size: 24px;
            font-weight: 900;
            text-transform: uppercase;
        }
        .modal-novedad-placeholder-label {
            font-size: 11px;
            font-weight: 700;
            color: #94a3b8;
            letter-spacing: 0.5px;
            max-width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .modal-novedad-title {
            margin: 0 0 6px;
            font-size: 19px;
            font-weight: 800;
            color: #f8fafc;
            letter-spacing: -0.3px;
        }
        .modal-novedad-msg {
            margin: 0 0 14px;
            font-size: 12.5px;
            color: #cbd5e1;
            line-height: 1.45;
        }
        .modal-novedad-price-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .modal-novedad-price-main {
            font-size: 24px;
            font-weight: 900;
            color: #10b981;
        }
        .modal-novedad-price-old {
            font-size: 14px;
            color: #64748b;
            text-decoration: line-through;
            font-weight: 600;
        }
        .modal-novedad-badge-ahorro {
            background: #065f46;
            color: #6ee7b7;
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
        }
        .modal-novedad-stock-badge {
            display: inline-block;
            font-size: 11.5px;
            font-weight: 700;
            color: #38bdf8;
            background: rgba(56, 189, 248, 0.1);
            border: 1px solid rgba(56, 189, 248, 0.25);
            padding: 4px 12px;
            border-radius: 20px;
        }
        .modal-novedad-footer {
            padding: 12px 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-shrink: 0;
            background: rgba(15, 23, 42, 0.98);
            border-top: 1px solid rgba(245, 158, 11, 0.15);
        }
        .btn-novedad-comprar {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            font-size: 15px;
            font-weight: 800;
            padding: 13px 20px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
            transition: transform 0.15s, opacity 0.15s;
            width: 100%;
        }
        .btn-novedad-comprar:hover {
            transform: translateY(-1px);
            opacity: 0.95;
        }
        .btn-novedad-explorar {
            background: transparent;
            color: #94a3b8;
            font-size: 13px;
            font-weight: 600;
            padding: 8px;
            border: none;
            cursor: pointer;
            transition: color 0.15s;
            width: 100%;
        }
        .btn-novedad-explorar:hover {
            color: #e2e8f0;
        }

        /* ================= MODAL ALERTA RENOVACIÓN CUENTAS ================= */
        .modal-renovacion-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(2, 6, 23, 0.92);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 100095;
            align-items: center;
            justify-content: center;
            padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(16px, env(safe-area-inset-bottom, 16px)) 12px;
            box-sizing: border-box;
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        .modal-renovacion-backdrop.show {
            display: flex !important;
        }
        .modal-renovacion-card {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            border: 1.5px solid #f59e0b;
            border-radius: 18px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(245, 158, 11, 0.2);
            max-width: 460px;
            width: 100%;
            max-height: min(92vh, calc(100dvh - 24px));
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: auto;
            animation: popToast 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal-renovacion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 11px 16px 10px;
            flex-shrink: 0;
            background: rgba(15, 23, 42, 0.98);
            border-bottom: 1px solid rgba(245, 158, 11, 0.25);
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .modal-renovacion-tag-vencida {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: #fff;
            font-size: 10.5px;
            font-weight: 900;
            letter-spacing: 0.5px;
            padding: 4px 9px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
        }
        .modal-renovacion-tag-vence {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            font-size: 10.5px;
            font-weight: 900;
            letter-spacing: 0.5px;
            padding: 4px 9px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
        }
        .modal-renovacion-close {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #f1f5f9;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 15px;
            font-weight: 800;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        .modal-renovacion-close:hover {
            background: rgba(239, 68, 68, 0.25);
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.5);
            transform: scale(1.06);
        }
        .modal-renovacion-body {
            padding: 10px 14px 14px;
            text-align: center;
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        .modal-renovacion-body-multi {
            padding: 10px 14px 10px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: 0;
            flex: 1 1 auto;
        }
        .modal-renovacion-pinned-top {
            flex-shrink: 0;
            background: transparent;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 4px;
        }
        .scroll-cuentas-renovar {
            flex: 1 1 auto;
            min-height: 120px;
            max-height: calc(min(92vh, calc(100dvh - 24px)) - 290px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 6px 4px 6px 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            text-align: left;
        }
        .scroll-cuentas-renovar::-webkit-scrollbar {
            width: 5px;
        }
        .scroll-cuentas-renovar::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.4);
            border-radius: 4px;
        }
        .scroll-cuentas-renovar::-webkit-scrollbar-thumb {
            background: rgba(245, 158, 11, 0.45);
            border-radius: 4px;
        }
        .scroll-cuentas-renovar::-webkit-scrollbar-thumb:hover {
            background: #f59e0b;
        }
        .modal-renovacion-pinned-footer {
            flex-shrink: 0;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: transparent;
        }
        .modal-renovacion-acc-card {
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 12px;
            padding: 9px 12px;
            margin: 8px 0;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .modal-renovacion-acc-logo {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #0b1120;
            border: 1px solid #334155;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
        }
        .modal-renovacion-acc-logo img {
            max-width: 34px;
            max-height: 34px;
            object-fit: contain;
        }
        .btn-renovacion-principal {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            font-size: 14.5px;
            font-weight: 800;
            padding: 13px 18px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
            transition: transform 0.15s, opacity 0.15s;
            width: 100%;
        }
        .btn-renovacion-principal:hover {
            transform: translateY(-1px);
            opacity: 0.95;
        }
        .btn-renovacion-recargar {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            font-size: 14px;
            font-weight: 800;
            padding: 13px 18px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
            transition: transform 0.15s, opacity 0.15s;
            width: 100%;
        }
        .btn-renovacion-recargar:hover {
            transform: translateY(-1px);
            opacity: 0.95;
        }
        .btn-renovacion-omitir {
            background: transparent;
            color: #94a3b8;
            font-size: 13px;
            font-weight: 600;
            padding: 10px 8px 4px;
            border: none;
            cursor: pointer;
            transition: color 0.15s;
            width: 100%;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .btn-renovacion-omitir:hover {
            color: #f1f5f9;
        }

        .modal-guias-backdrop {
            background: rgba(2, 6, 23, 0.88) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            z-index: 99999;
            padding: 12px;
            box-sizing: border-box;
        }
        .modal-guias-backdrop.show {
            display: flex !important;
        }
        .modal-guias-card {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 18px;
            max-width: 460px;
            width: 100%;
            max-height: min(90vh, calc(100dvh - 24px));
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(59, 130, 246, 0.15);
            overflow: hidden;
            position: relative;
            margin: auto;
            animation: popToast 0.25s ease-out;
        }
        .modal-guias-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.12);
            background: rgba(15, 23, 42, 0.6);
            flex-shrink: 0;
        }
        .modal-guias-icon-badge {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .modal-guias-close {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #94a3b8;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            font-size: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s;
        }
        .modal-guias-close:hover {
            color: #fff;
            background: rgba(239, 68, 68, 0.4);
            border-color: #ef4444;
        }
        .modal-guias-tabs {
            display: flex;
            gap: 6px;
            padding: 8px 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            border-bottom: 1px solid rgba(148, 163, 184, 0.1);
            background: rgba(15, 23, 42, 0.4);
            flex-shrink: 0;
        }
        .modal-guias-tabs::-webkit-scrollbar {
            display: none;
        }
        .guia-tab-chip {
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(148, 163, 184, 0.15);
            color: #94a3b8;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all .2s;
            font-family: inherit;
        }
        .guia-tab-chip.active {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            border-color: #60a5fa;
            color: #ffffff;
            box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
        }
        .modal-guias-body {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #030712;
            overflow: hidden;
            flex: 1;
            min-height: 380px;
            max-height: 60vh;
            user-select: none;
            touch-action: pan-y;
        }
        .guia-img-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            box-sizing: border-box;
        }
        .guia-img-tag {
            max-height: 56vh;
            max-width: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.6);
            cursor: pointer;
            transition: opacity .2s ease-in-out;
        }
        .guia-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(148, 163, 184, 0.3);
            color: #fff;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 5;
            transition: all .2s;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .guia-nav-btn:hover {
            background: rgba(59, 130, 246, 0.8);
            border-color: #60a5fa;
            transform: translateY(-50%) scale(1.08);
        }
        .guia-nav-prev { left: 8px; }
        .guia-nav-next { right: 8px; }
        .guia-dots {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 7px;
            background: rgba(2, 6, 23, 0.65);
            padding: 4px 10px;
            border-radius: 999px;
            backdrop-filter: blur(4px);
            z-index: 4;
        }
        .guia-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all .2s;
        }
        .guia-dot.active {
            background: #60a5fa;
            width: 20px;
            border-radius: 4px;
        }
        .modal-guias-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: rgba(15, 23, 42, 0.8);
            border-top: 1px solid rgba(148, 163, 184, 0.12);
            flex-shrink: 0;
            gap: 10px;
        }
        .guia-tool-btn {
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 9px;
            color: #cbd5e1;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: inherit;
            transition: all .2s;
        }
        .guia-tool-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }
        .guia-cta-btn {
            flex: 1;
            padding: 10px 16px;
            background: linear-gradient(135deg, #10b981, #059669);
            border: none;
            border-radius: 10px;
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
            font-family: inherit;
            transition: all .2s;
        }
        .guia-cta-btn:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }
        @media (max-width: 480px) {
            .hide-mobile { display: none; }
            .modal-guias-card { max-height: min(90vh, calc(100dvh - 20px)); border-radius: 16px; margin: auto; }
            .modal-guias-body { min-height: 300px; max-height: 52vh; }
            .guia-img-tag { max-height: 48vh; }
            .modal-guias-tabs { padding: 6px 8px; }
            .guia-tab-chip { font-size: 11px; padding: 5px 10px; }
        }

        /* ================= REDISEÑO BOTTOM SHEET CARRITO (MÓVIL-FIRST) ================= */
        .modal-bottom-sheet {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(2, 6, 23, 0.78);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }
        .modal-bottom-sheet.show,
        .modal-bottom-sheet[style*="display: flex"] {
            display: flex !important;
        }
        .cart-sheet-content {
            background: #111827;
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 20px;
            width: 100%;
            max-width: 480px;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(59, 130, 246, 0.12);
            animation: sheetPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            padding: 0 !important;
        }
        @keyframes sheetPop {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .cart-sheet-handle {
            display: none;
            width: 40px;
            height: 4px;
            background: rgba(148, 163, 184, 0.4);
            border-radius: 999px;
            margin: 8px auto 2px;
            flex-shrink: 0;
        }
        .cart-sheet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.12);
            background: rgba(15, 23, 42, 0.85);
            flex-shrink: 0;
        }
        .cart-sheet-title {
            color: #f1f5f9;
            font-size: 16px;
            font-weight: 900;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .cart-sheet-close {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #94a3b8;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            transition: all 0.15s;
        }
        .cart-sheet-close:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #f87171;
            border-color: rgba(239, 68, 68, 0.4);
        }
        .cart-sheet-body {
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .cart-sheet-footer {
            flex-shrink: 0;
            background: rgba(15, 23, 42, 0.98);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            padding: 12px 16px 14px;
            box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
        }
        @media (max-width: 640px) {
            .modal-bottom-sheet {
                align-items: flex-end !important;
                padding: 0 !important;
            }
            .cart-sheet-content {
                max-width: 100% !important;
                border-radius: 20px 20px 0 0 !important;
                max-height: 86vh !important;
                border-bottom: none !important;
                border-left: none !important;
                border-right: none !important;
                animation: sheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            }
            @keyframes sheetSlideUp {
                from { transform: translateY(100%); }
                to { transform: translateY(0); }
            }
            .cart-sheet-handle {
                display: block;
            }
            .cart-sheet-body {
                padding: 10px 14px;
                gap: 8px;
            }
            .cart-sheet-footer {
                padding: 10px 14px 18px;
            }
        }

        /* ================= BLINDAJE UNIVERSAL DE MODALES (MÓVIL Y DESKTOP) ================= */
        /* Ningún modal puede desbordar la pantalla ni tapar la 'X' de cierre */
        .modal, .walk-modal, .modal-renovacion-backdrop, .modal-novedad-backdrop, .modal-guias-backdrop {
            box-sizing: border-box !important;
            padding: max(10px, env(safe-area-inset-top, 10px)) 10px max(14px, env(safe-area-inset-bottom, 14px)) 10px !important;
            overflow-y: auto !important;
            overscroll-behavior: contain !important;
            -webkit-overflow-scrolling: touch !important;
        }

        .modal-renovacion-card,
        .modal-novedad-card,
        .modal-guias-card,
        .walk-card {
            max-height: min(92vh, calc(100dvh - 20px)) !important;
            box-sizing: border-box !important;
            margin: auto !important;
        }

        /* Cabeceras 'X' siempre fijas arriba y visibles */
        .walk-head {
            position: sticky !important;
            top: -14px !important;
            z-index: 25 !important;
            background: #111827 !important;
            padding: 8px 0 6px !important;
            margin-top: -6px !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        }
        .walk-close {
            background: rgba(255, 255, 255, 0.14) !important;
            border: 1px solid rgba(255, 255, 255, 0.22) !important;
            color: #ffffff !important;
            font-size: 16px !important;
            font-weight: 900 !important;
            width: 32px !important;
            height: 32px !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            transition: all 0.2s !important;
        }
        .walk-close:hover {
            background: rgba(239, 68, 68, 0.35) !important;
            color: #fff !important;
        }

        /* Modal Alerta Renovación: Header y Botón X blindados */
        .modal-renovacion-header {
            position: sticky !important;
            top: 0 !important;
            z-index: 25 !important;
            background: rgba(15, 23, 42, 0.98) !important;
            border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
            flex-shrink: 0 !important;
        }
        .modal-renovacion-close {
            background: rgba(255, 255, 255, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.25) !important;
            color: #ffffff !important;
            font-size: 16px !important;
            font-weight: 900 !important;
            width: 32px !important;
            height: 32px !important;
            border-radius: 50% !important;
            flex-shrink: 0 !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
            transition: all 0.2s !important;
        }
        .modal-renovacion-close:hover {
            background: rgba(239, 68, 68, 0.35) !important;
            color: #fff !important;
            transform: scale(1.08) !important;
        }

        /* SweetAlert en móvil nunca excede la pantalla */
        .swal2-popup.swal-dark {
            max-height: min(92vh, calc(100dvh - 24px)) !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            box-sizing: border-box !important;
        }

        /* ================= 🧭 GUÍA INTERACTIVA EN VIVO PASO A PASO (SIN BLUR NI BLOQUEO) ================= */
        .dp-spotlight-backdrop {
            display: none !important;
            pointer-events: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .dp-spotlight-cutout {
            position: fixed;
            z-index: 100081;
            border-radius: 14px;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.38), 0 0 28px rgba(16, 185, 129, 0.75);
            border: 3px solid #10b981;
            pointer-events: none !important;
            transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
            animation: dpSpotPulse 1.5s infinite ease-in-out;
        }
        @keyframes dpSpotPulse {
            0%, 100% { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35), 0 0 22px rgba(16, 185, 129, 0.7); transform: scale(1); }
            50% { border-color: #38bdf8; box-shadow: 0 0 0 8px rgba(56, 189, 248, 0.28), 0 0 32px rgba(56, 189, 248, 0.9); transform: scale(1.015); }
        }
        .dp-live-btn-comprar-glow {
            box-shadow: 0 0 0 2.5px #38bdf8, 0 0 18px rgba(56, 189, 248, 0.65) !important;
            animation: dpBtnComprarPulse 1.6s infinite ease-in-out !important;
            position: relative;
        }
        @keyframes dpBtnComprarPulse {
            0%, 100% { box-shadow: 0 0 0 2px #38bdf8, 0 0 14px rgba(56, 189, 248, 0.55) !important; }
            50% { box-shadow: 0 0 0 4px #10b981, 0 0 22px rgba(16, 185, 129, 0.85) !important; }
        }
        .dp-live-target-glow-green {
            box-shadow: 0 0 0 3px #10b981, 0 0 26px rgba(16, 185, 129, 0.9) !important;
            border-color: #10b981 !important;
            animation: dpTargetGreenPulse 1.3s infinite ease-in-out !important;
        }
        @keyframes dpTargetGreenPulse {
            0%, 100% { box-shadow: 0 0 0 3px #10b981, 0 0 18px rgba(16, 185, 129, 0.75); }
            50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.38), 0 0 30px rgba(16, 185, 129, 1); }
        }
        .dp-live-pointer-badge {
            position: fixed;
            z-index: 100085;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #022c22;
            font-weight: 900;
            font-size: clamp(10.5px, 2.7vw, 12px);
            line-height: 1.25;
            padding: 6px 12px;
            border-radius: 12px;
            border: 2px solid #a7f3d0;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.75), 0 0 20px rgba(16, 185, 129, 0.65);
            pointer-events: none !important;
            white-space: normal;
            text-align: center;
            width: max-content;
            max-width: min(350px, calc(100vw - 20px));
            box-sizing: border-box;
            animation: dpPointerBounce 1.1s infinite ease-in-out;
        }
        @keyframes dpPointerBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        .dp-live-coach-hud {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100084;
            width: min(450px, calc(100vw - 20px));
            max-width: calc(100vw - 16px);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(2, 6, 23, 0.98) 100%);
            border: 2px solid #38bdf8;
            border-radius: 16px;
            padding: 10px 13px;
            box-sizing: border-box;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(56, 189, 248, 0.28);
            color: #f8fafc;
            pointer-events: auto;
            transition: top 0.22s ease, bottom 0.22s ease, border-color 0.22s ease;
        }
        .dp-live-coach-pill {
            position: fixed;
            right: 14px;
            bottom: 82px;
            z-index: 100084;
            background: linear-gradient(135deg, #0284c7, #2563eb);
            color: #fff;
            border: 1.5px solid #7dd3fc;
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 16px rgba(56, 189, 248, 0.45);
            display: none;
            align-items: center;
            gap: 6px;
        }
        .dp-barra-guia {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            padding: 10px 14px;
            margin: 8px 0 12px;
            border-radius: 14px;
            border: 1.5px solid rgba(56, 189, 248, 0.4);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
            box-sizing: border-box;
            width: 100%;
        }
        .dp-barra-guia-info {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            flex: 1 1 250px;
            min-width: min(100%, 240px);
        }
        .dp-barra-guia-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 0 1 auto;
            flex-wrap: wrap;
        }
        .dp-spotlight-tooltip {
            display: none !important;
        }
        @media (max-width: 768px) {
            .dp-live-coach-hud {
                width: calc(100vw - 14px);
                padding: 9px 11px;
                border-radius: 14px;
                max-height: 38dvh;
                overflow-y: auto;
            }
            .dp-live-pointer-badge {
                max-width: calc(100vw - 16px);
                padding: 5px 10px;
            }
            .dp-barra-guia {
                flex-direction: column;
                align-items: stretch;
                padding: 10px 12px;
                gap: 8px;
            }
            .dp-barra-guia-info {
                flex: none;
                width: 100%;
                min-width: 0;
            }
            .dp-barra-guia-actions {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }
            .dp-barra-guia-actions > button {
                width: 100%;
                justify-content: center;
                text-align: center;
                padding: 7px 8px !important;
                font-size: 11px !important;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        @media (max-width: 370px) {
            .dp-barra-guia-actions {
                grid-template-columns: 1fr;
            }
            .dp-live-coach-hud {
                width: calc(100vw - 10px);
                padding: 8px 9px;
            }
        }


        /* ================= 📱 FIX DOCK MÓVIL, BUSCADOR Y TABS RESPONSIVE ================= */
        .mobile-bottom-dock {
            display: none;
        }
        .search-wrap {
            position: relative;
        }
        .search-wrap .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            z-index: 2;
            font-size: 14px;
            line-height: 1;
        }
        .search-wrap .search-input {
            padding-left: 42px !important;
            padding-right: 36px !important;
        }
        .search-wrap .search-input::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }
        @media (max-width: 768px) {
            .mobile-bottom-dock {
                display: grid !important;
                grid-template-columns: repeat(4, 1fr);
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 9980;
                background: rgba(10, 15, 29, 0.96);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border-top: 1px solid rgba(148, 163, 184, 0.18);
                padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
                box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.55);
            }
            body.modal-open .mobile-bottom-dock {
                display: none !important;
            }
            .mobile-dock-item {
                appearance: none;
                -webkit-appearance: none;
                background: transparent !important;
                border: none !important;
                border-radius: 10px;
                color: #94a3b8;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                padding: 5px 2px;
                font-size: 10.5px;
                font-weight: 700;
                font-family: inherit;
                cursor: pointer;
                position: relative;
                transition: color 0.15s ease, background 0.15s ease;
                box-shadow: none !important;
            }
            .mobile-dock-item .dock-icon {
                font-size: 17px;
                line-height: 1.1;
            }
            .mobile-dock-item.active {
                color: #38bdf8;
                background: rgba(56, 189, 248, 0.1) !important;
            }
            .mobile-dock-item .dock-badge {
                position: absolute;
                top: 2px;
                right: calc(50% - 20px);
                background: #ef4444;
                color: #ffffff;
                font-size: 9.5px;
                font-weight: 900;
                min-width: 16px;
                height: 16px;
                padding: 0 4px;
                border-radius: 999px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
            }
            .carrito-flotante {
                bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
                padding: 10px 18px !important;
                font-size: 13.5px !important;
                max-width: calc(100vw - 24px) !important;
            }
            .tabs {
                gap: 5px !important;
                padding: 0 10px !important;
            }
            .tab-btn {
                padding: 8px 9px !important;
                font-size: 12px !important;
            }
        }

        /* =====================================================================
           ✨ HOSHINO DARK-TECH UPGRADES: MICRO-GRID, MARQUEE, LEDS & LISTA RÁPIDA
           ===================================================================== */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image:
                radial-gradient(ellipse 80% 42% at 50% -8%, rgba(56, 189, 248, 0.11), rgba(16, 185, 129, 0.04) 48%, transparent 78%),
                linear-gradient(to right, rgba(148, 163, 184, 0.032) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(148, 163, 184, 0.032) 1px, transparent 1px);
            background-size: 100% 100%, 36px 36px, 36px 36px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.12) 100%);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.12) 100%);
        }

        /* Brillo sutil superior derecho en tarjetas (.product-card) */
        .product-card {
            position: relative;
            overflow: hidden;
        }
        .product-card::after {
            content: '';
            position: absolute;
            top: -38px;
            right: -38px;
            width: 118px;
            height: 118px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(16, 185, 129, 0.05) 45%, transparent 72%);
            pointer-events: none;
            z-index: 0;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .product-card:hover::after {
            opacity: 1;
            transform: scale(1.18);
        }
        .product-card[data-en-oferta="1"]::after {
            background: radial-gradient(circle, rgba(251, 191, 36, 0.20) 0%, rgba(239, 68, 68, 0.08) 48%, transparent 74%);
        }

        /* ④ Barra Superior Automática (#dpTopMarqueeBar) */
        .dp-top-marquee-bar {
            position: relative;
            z-index: 55;
            width: 100%;
            overflow: hidden;
            background: linear-gradient(90deg, #071022 0%, #0d1b36 32%, #13203d 68%, #071022 100%);
            border-bottom: 1px solid rgba(56, 189, 248, 0.22);
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
            font-size: 12px;
            line-height: 1.25;
            user-select: none;
        }
        .dp-top-marquee-bar.has-flash-promo {
            background: linear-gradient(90deg, #1b1106 0%, #2b1807 28%, #0c1f3d 68%, #071326 100%);
            border-bottom-color: rgba(251, 191, 36, 0.35);
        }
        .dp-mq-viewport {
            display: flex;
            width: 100%;
            overflow: hidden;
            padding: 7px 0;
        }
        .dp-mq-track {
            display: flex;
            align-items: center;
            width: max-content;
            animation: dpMarqueeScroll 34s linear infinite;
            will-change: transform;
        }
        .dp-top-marquee-bar:hover .dp-mq-track {
            animation-play-state: paused;
        }
        @keyframes dpMarqueeScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .dp-mq-viewport { overflow-x: auto; scrollbar-width: none; }
            .dp-mq-track { animation: none !important; padding: 0 12px; }
            .dp-mq-group[aria-hidden="true"] { display: none !important; }
        }
        .dp-mq-group {
            display: inline-flex;
            align-items: center;
            gap: 18px;
            padding-right: 18px;
            white-space: nowrap;
        }
        .dp-mq-sep {
            color: rgba(148, 163, 184, 0.45);
            font-size: 11px;
        }
        .dp-mq-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #e2e8f0;
            font-weight: 600;
            text-decoration: none;
            background: transparent;
            border: none;
            padding: 0;
            font-family: inherit;
            font-size: 12px;
        }
        .dp-mq-chip.is-clickable {
            cursor: pointer;
            transition: transform 0.15s ease, filter 0.15s ease;
        }
        .dp-mq-chip.is-clickable:hover {
            filter: brightness(1.14);
            transform: translateY(-0.5px);
        }
        .dp-mq-pill-promo {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(239, 68, 68, 0.26));
            border: 1px solid rgba(251, 191, 36, 0.65);
            color: #fde68a;
            font-size: 10.5px;
            font-weight: 900;
            letter-spacing: 0.3px;
        }
        .dp-mq-cta {
            color: #93c5fd;
            font-weight: 800;
            font-size: 11.5px;
        }

        /* ② Puntos LED Pulsantes en Vivo */
        .dp-led-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: 4px;
            vertical-align: middle;
            position: relative;
            flex-shrink: 0;
        }
        .dp-led-green {
            background: #ecfdf5;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.45), 0 0 8px #34d399;
            animation: dpLedPulseGreen 1.8s ease-in-out infinite;
        }
        .dp-led-amber {
            background: #fffbeb;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5), 0 0 8px #fbbf24;
            animation: dpLedPulseAmber 1.4s ease-in-out infinite;
        }
        .dp-led-red {
            background: #fef2f2;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55), 0 0 9px #f87171;
            animation: dpLedPulseAmber 1.1s ease-in-out infinite;
        }
        .dp-led-blue {
            background: #e0f2fe;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45), 0 0 8px #38bdf8;
        }
        @keyframes dpLedPulseGreen {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.25); opacity: 0.72; }
        }
        @keyframes dpLedPulseAmber {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.32); opacity: 0.65; }
        }

        /* Pill ⚡ En Oferta en #catTabs */
        .cat-pill.dp-pill-oferta {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(239, 68, 68, 0.18));
            border-color: rgba(251, 191, 36, 0.55);
            color: #fde68a;
            font-weight: 800;
        }
        .cat-pill.dp-pill-oferta.on {
            background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
            border-color: #fde68a !important;
            color: #0f172a !important;
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
        }

        /* ③ Switcher ▦ Tarjetas | ☰ Lista Rápida */
        .dp-display-mode-switcher {
            display: inline-flex;
            align-items: center;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(148, 163, 184, 0.26);
            border-radius: 10px;
            padding: 2px;
            gap: 2px;
        }
        .dp-dm-btn {
            border: none;
            background: transparent;
            color: #94a3b8;
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 800;
            padding: 6px 10px;
            border-radius: 8px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.18s ease;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .dp-dm-btn:hover {
            color: #e2e8f0;
        }
        .dp-dm-btn.active {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #ffffff;
            box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
        }
        body.dp-cat-list-mode #gridServicios {
            display: none !important;
        }
        body.dp-cat-list-mode #mobileGridSwitcher {
            display: none !important;
        }
        #dpHoshinoListContainer {
            display: none;
            padding-bottom: 70px;
        }
        body.dp-cat-list-mode #dpHoshinoListContainer {
            display: block;
        }

        /* KPIs Superiores en Lista Rápida */
        .dp-hoshino-kpis {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }
        .dp-hkpi-card {
            background: linear-gradient(160deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.94));
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 14px;
            padding: 11px 13px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
        }
        .dp-hkpi-card.is-clickable {
            cursor: pointer;
            transition: transform 0.18s ease, border-color 0.18s ease;
        }
        .dp-hkpi-card.is-clickable:hover {
            transform: translateY(-2px);
            border-color: rgba(251, 191, 36, 0.55);
        }
        .dp-hkpi-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            font-weight: 800;
            color: #94a3b8;
            letter-spacing: 0.2px;
        }
        .dp-hkpi-val {
            font-size: 20px;
            font-weight: 900;
            color: #f8fafc;
            line-height: 1.15;
            font-variant-numeric: tabular-nums;
        }
        .dp-hkpi-sub {
            font-size: 10.5px;
            color: #64748b;
            font-weight: 600;
        }

        /* Grupos y Filas Horizontales Estilo Hoshino Status */
        .dp-hoshino-cat-block {
            margin-bottom: 16px;
        }
        .dp-hoshino-cat-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 4px 8px;
            font-size: 12.5px;
            font-weight: 900;
            color: #cbd5e1;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }
        .dp-hoshino-cat-cnt {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            text-transform: none;
        }
        .dp-hoshino-rows-stack {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .dp-hoshino-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.92));
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-left: 3.5px solid #10b981;
            border-radius: 13px;
            padding: 10px 13px;
            transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
        }
        .dp-hoshino-row:hover {
            transform: translateY(-1px);
            border-color: rgba(56, 189, 248, 0.38);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
        }
        .dp-hoshino-row.st-low { border-left-color: #f59e0b; }
        .dp-hoshino-row.st-urgent { border-left-color: #ef4444; }
        .dp-hoshino-row.st-order { border-left-color: #38bdf8; }
        .dp-hoshino-row.st-promo {
            border-left-color: #fbbf24;
            background: linear-gradient(145deg, rgba(45, 31, 14, 0.52), rgba(15, 23, 42, 0.94));
            border-color: rgba(251, 191, 36, 0.32);
        }
        .dp-hr-left {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .dp-hr-thumb {
            width: 56px;
            height: 36px;
            border-radius: 9px;
            background: rgba(2, 6, 23, 0.75);
            border: 1px solid rgba(148, 163, 184, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
            padding: 3px;
        }
        .dp-hr-thumb.is-cover {
            padding: 0;
        }
        .dp-hr-thumb img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }
        .dp-hr-thumb.is-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .dp-hr-ph {
            font-size: 14px;
            font-weight: 900;
            color: #e2e8f0;
        }
        .dp-hr-info {
            min-width: 0;
            flex: 1;
        }
        .dp-hr-title-line {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .dp-hr-name {
            font-size: 14px;
            font-weight: 800;
            color: #f8fafc;
            line-height: 1.2;
        }
        .dp-hr-promo-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 900;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(245, 158, 11, 0.22);
            border: 1px solid rgba(251, 191, 36, 0.55);
            color: #fde68a;
            font-variant-numeric: tabular-nums;
        }
        .dp-hr-sub {
            font-size: 11.5px;
            color: #94a3b8;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .dp-hr-right {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }
        .dp-hr-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
            background: rgba(16, 185, 129, 0.14);
            border: 1px solid rgba(16, 185, 129, 0.35);
            color: #6ee7b7;
        }
        .dp-hr-status-pill.is-low {
            background: rgba(245, 158, 11, 0.16);
            border-color: rgba(245, 158, 11, 0.42);
            color: #fcd34d;
        }
        .dp-hr-status-pill.is-urgent {
            background: rgba(239, 68, 68, 0.18);
            border-color: rgba(239, 68, 68, 0.48);
            color: #fca5a5;
        }
        .dp-hr-status-pill.is-order {
            background: rgba(14, 165, 233, 0.15);
            border-color: rgba(56, 189, 248, 0.38);
            color: #7dd3fc;
        }
        .dp-hr-price-col {
            text-align: right;
            min-width: 82px;
        }
        .dp-hr-price {
            font-size: 16px;
            font-weight: 900;
            color: #10b981;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }
        .dp-hr-old {
            font-size: 11px;
            color: #64748b;
            text-decoration: line-through;
            font-weight: 600;
            display: block;
            font-variant-numeric: tabular-nums;
        }
        .dp-hr-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .dp-hr-buy-btn {
            border: none;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #ffffff;
            font-family: inherit;
            font-size: 12px;
            font-weight: 900;
            padding: 8px 13px;
            border-radius: 10px;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
            transition: transform 0.15s ease, filter 0.15s ease;
        }
        .dp-hr-buy-btn:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        .dp-hr-buy-btn.is-renew {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #0f172a;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.32);
        }
        .dp-hr-quote-btn {
            border: 1px solid rgba(56, 189, 248, 0.35);
            background: rgba(14, 165, 233, 0.14);
            color: #bae6fd;
            font-size: 12px;
            font-weight: 800;
            padding: 7px 9px;
            border-radius: 9px;
            cursor: pointer;
        }
        body.modo-vista-cliente .dp-hr-quote-btn {
            display: none !important;
        }
        body.modo-vista-cliente #cartSaldoDisp,
        body.modo-vista-cliente #cartSaldoActual {
            filter: blur(5px);
            user-select: none;
        }
        .swal2-container {
            z-index: 100200 !important;
        }

        /* ===== LIMPIEZA VISUAL CABECERA Y ENCABEZADO CATÁLOGO ===== */
        .trust-line,
        #dpLiveHeaderPill {
            display: none !important;
        }
        .scroll-arrow-btn.is-arrow-hidden {
            opacity: 0 !important;
            pointer-events: none !important;
            width: 0 !important;
            min-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            overflow: hidden !important;
        }
        .dp-cat-head-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-width: 0;
        }
        .dp-cat-count-badge {
            font-size: 11px;
            font-weight: 800;
            color: #94a3b8;
            background: rgba(15, 23, 42, 0.78);
            border: 1px solid rgba(148, 163, 184, 0.22);
            padding: 3px 9px;
            border-radius: 999px;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
        }
        /* Cintillo compacto "Quiero Vender" (visitantes) */
        #guestQuieroVenderHero.guest-auth-hero {
            margin: 10px auto 2px !important;
        }
        #guestQuieroVenderHero .guest-auth-card {
            padding: 7px 12px !important;
            border-radius: 12px !important;
            gap: 10px !important;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.82)) !important;
            border: 1px solid rgba(245, 158, 11, 0.28) !important;
            flex-direction: row !important;
            align-items: center !important;
        }
        #guestQuieroVenderHero .guest-auth-icon {
            width: 28px !important;
            height: 28px !important;
            border-radius: 8px !important;
            font-size: 14px !important;
        }
        #guestQuieroVenderHero .guest-auth-text {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
            min-width: 0;
        }
        #guestQuieroVenderHero .guest-auth-text h2 {
            font-size: 12.5px !important;
            margin: 0 !important;
        }
        #guestQuieroVenderHero .guest-auth-text p {
            font-size: 11.5px !important;
            margin: 0 !important;
            color: #94a3b8 !important;
        }
        #guestQuieroVenderHero .btn-hero-revendedor {
            padding: 6px 12px !important;
            font-size: 11.5px !important;
            border-radius: 9px !important;
            white-space: nowrap !important;
            width: auto !important;
        }
        .btn-dismiss-guest-hero {
            background: transparent;
            border: none;
            color: #64748b;
            font-size: 13px;
            line-height: 1;
            padding: 4px 5px;
            border-radius: 6px;
            cursor: pointer;
            flex-shrink: 0;
            transition: color 0.15s ease, background 0.15s ease;
        }
        .btn-dismiss-guest-hero:hover {
            color: #cbd5e1;
            background: rgba(255, 255, 255, 0.06);
        }

        #headServiciosIndividuales {
            flex-wrap: wrap;
            gap: 10px 14px;
            margin-top: 12px !important;
            margin-bottom: 14px !important;
        }
        .dp-section-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
            min-width: 0;
            max-width: 100%;
        }

        @media (min-width: 769px) and (max-width: 1180px) {
            .card-top-badges {
                left: 8px;
                right: 8px;
                gap: 4px;
            }
            .card-top-badges .badge-combo {
                font-size: 8px !important;
                padding: 2.5px 5.5px !important;
                letter-spacing: 0 !important;
            }
            .card-top-badges .dp-led-dot {
                width: 5.5px;
                height: 5.5px;
                margin-right: 3px;
            }
        }

        @media (max-width: 768px) {
            .mobile-bottom-dock.is-guest-dock {
                grid-template-columns: repeat(3, 1fr) !important;
            }
            .dp-hoshino-kpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }
            .dp-hkpi-val { font-size: 17px; }
            .dp-hoshino-row {
                flex-wrap: wrap;
                gap: 9px;
                padding: 10px 11px;
            }
            .dp-hr-left {
                flex: 1 1 100%;
            }
            .dp-hr-right {
                width: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 6px 8px;
                padding-top: 6px;
                border-top: 1px solid rgba(148, 163, 184, 0.1);
            }
            .dp-hr-actions {
                margin-left: auto;
            }
            .dp-hr-price-col {
                text-align: left;
                min-width: 0;
                display: flex;
                align-items: baseline;
                gap: 6px;
            }
            .dp-dm-btn {
                padding: 5px 8px;
                font-size: 11px;
            }
        }

        @media (max-width: 680px) {
            #guestQuieroVenderHero .guest-auth-card {
                padding: 7px 9px !important;
                gap: 7px !important;
            }
            #guestQuieroVenderHero .guest-auth-left {
                gap: 7px !important;
                width: auto !important;
                flex: 1 1 0 !important;
            }
            #guestQuieroVenderHero .guest-auth-actions {
                width: auto !important;
                gap: 4px !important;
            }
            #guestQuieroVenderHero .guest-auth-text h2 {
                font-size: 11.5px !important;
                line-height: 1.2 !important;
            }
            #guestQuieroVenderHero .guest-auth-text p {
                display: none !important;
            }
            #guestQuieroVenderHero .btn-hero-revendedor {
                padding: 6px 9px !important;
                font-size: 11px !important;
            }
            #headServiciosIndividuales {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 8px 8px !important;
                margin-top: 8px !important;
                margin-bottom: 10px !important;
            }
            #headServiciosIndividuales::after {
                content: "";
                flex-basis: 100%;
                height: 0;
                order: 2;
            }
            #headServiciosIndividuales > .dp-cat-head-title-wrap {
                order: 1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex: 1 1 auto;
                min-width: 0;
                flex-wrap: nowrap !important;
                gap: 6px;
            }
            #headServiciosIndividuales #dpCatalogHeadTitle {
                font-size: 14.5px !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #headServiciosIndividuales .dp-cat-count-badge {
                font-size: 10.5px;
                padding: 2px 7px;
                flex-shrink: 0;
            }
            #headServiciosIndividuales .section-sub {
                margin-top: 0;
                font-size: 11.5px;
            }
            #headServiciosIndividuales > .dp-section-controls {
                display: contents !important;
            }
            #headServiciosIndividuales #sortCatalogo {
                order: 1;
                flex: 0 0 auto !important;
                width: auto !important;
                max-width: 146px !important;
                min-width: 0 !important;
                height: 30px !important;
                padding: 0 24px 0 10px !important;
                font-size: 11.5px !important;
                font-weight: 700 !important;
                border-radius: 999px !important;
            }
            #headServiciosIndividuales .dp-display-mode-switcher {
                order: 3;
                flex: 1 1 auto;
                min-width: 0;
            }
            #headServiciosIndividuales .dp-display-mode-switcher .dp-dm-btn {
                flex: 1 1 0;
                justify-content: center;
                padding: 6px 8px;
                font-size: 11px;
            }
            #headServiciosIndividuales #mobileGridSwitcher {
                order: 4;
                flex: 0 0 auto;
            }
            body:not(.mobile-grid-1col) .card-top-badges .dp-led-dot {
                width: 5px;
                height: 5px;
                margin-right: 3px;
            }
            body:not(.mobile-grid-1col) .card-action-row .btn-demo-mp-inline {
                padding: 0 7px !important;
                font-size: 10px !important;
                border-radius: 9px !important;
            }
        }

        @media (max-width: 400px) {
            .dp-hr-status-pill {
                font-size: 10px;
                padding: 3px 8px;
                gap: 4px;
            }
            .dp-hr-price {
                font-size: 14.5px;
            }
            .dp-hr-old {
                font-size: 10px;
            }
            .dp-hr-buy-btn {
                padding: 7px 10px;
                font-size: 11px;
            }
            .dp-hr-quote-btn {
                padding: 6px 8px;
                font-size: 11px;
            }
        }

        @media (max-width: 359px) {
            .dp-display-mode-switcher .dp-dm-btn {
                padding: 5px 5px;
                font-size: 10.2px;
                gap: 3px;
            }
            body:not(.mobile-grid-1col) .card-top-badges {
                left: 4px !important;
                right: 4px !important;
                gap: 3px !important;
            }
            body:not(.mobile-grid-1col) .card-top-badges .badge-combo {
                font-size: 6px !important;
                padding: 2px 3.5px !important;
            }
            body:not(.mobile-grid-1col) .card-top-badges .dp-led-dot {
                width: 4.5px;
                height: 4.5px;
                margin-right: 2px;
            }
            body:not(.mobile-grid-1col) .card-action-row {
                flex-wrap: wrap !important;
                gap: 5px !important;
            }
            body:not(.mobile-grid-1col) .card-action-row .btn-demo-mp-inline {
                flex: 1 1 100% !important;
                padding: 5px 6px !important;
                font-size: 10px !important;
            }
            body:not(.mobile-grid-1col) .card-action-row .btn-comprar {
                flex: 1 1 100% !important;
            }
        }
/* ================= 🌙 DUCKSPACE V3 CALM DARK-DEFAULT + WARM LIGHT SYSTEM ================= */
:root,
html[data-color-mode="dark"] {
    --dp-bg: #0b0f17;
    --dp-surface: #121826;
    --dp-surface-2: #182032;
    --dp-surface-3: #0e1420;
    --dp-border: rgba(148, 163, 184, 0.11);
    --dp-border-strong: rgba(148, 163, 184, 0.20);
    --dp-ink: #f1f5f9;
    --dp-ink-2: #94a3b8;
    --dp-ink-3: #64748b;
    --dp-accent: #10b981;
    --dp-accent-2: #059669;
    --dp-brand-orange: #ea580c;
    --dp-pill-active-bg: rgba(255, 255, 255, 0.10);
    --dp-pill-active-border: rgba(255, 255, 255, 0.24);
    --dp-pill-active-txt: #f8fafc;
    --dp-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.22);
    --dp-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.38);
    --dp-topbar-bg: rgba(11, 15, 23, 0.92);
}

html[data-color-mode="light"] {
    --dp-bg: #f3efe6;
    --dp-surface: #faf8f4;
    --dp-surface-2: #ebe6dc;
    --dp-surface-3: #e2dcd0;
    --dp-border: rgba(28, 25, 23, 0.09);
    --dp-border-strong: rgba(28, 25, 23, 0.17);
    --dp-ink: #1c1917;
    --dp-ink-2: #57534e;
    --dp-ink-3: #78716c;
    --dp-accent: #059669;
    --dp-accent-2: #047857;
    --dp-brand-orange: #c2410c;
    --dp-pill-active-bg: #1c1917;
    --dp-pill-active-border: #1c1917;
    --dp-pill-active-txt: #faf8f4;
    --dp-shadow-card: 0 2px 10px rgba(28, 25, 23, 0.04);
    --dp-shadow-hover: 0 10px 24px rgba(28, 25, 23, 0.08);
    --dp-topbar-bg: rgba(243, 239, 230, 0.94);
    --bg: #f3efe6;
    --bg-card: #faf8f4;
    --text-1: #1c1917;
    --text-2: #57534e;
    --text-3: #78716c;
    --border: rgba(28, 25, 23, 0.09);
}

/* Remove distracting background neon glows in BOTH modes for visual calm */
body::before,
body::after,
.bg-glow {
    display: none !important;
}
html[data-color-mode="dark"] body,
html[data-color-mode="light"] body {
    background: var(--dp-bg) !important;
    background-image: none !important;
    color: var(--dp-ink) !important;
}

/* Sleek, minimal scrollbars across all modals, drawers & SweetAlert2 popups */
.swal2-popup *,
.cart-sheet-body,
.cart-sheet-footer,
.walk-card,
.modal-content,
.modal-renovacion-body,
.modal-guias-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
html[data-color-mode="light"] .swal2-popup *,
html[data-color-mode="light"] .cart-sheet-body,
html[data-color-mode="light"] .cart-sheet-footer,
html[data-color-mode="light"] .walk-card,
html[data-color-mode="light"] .modal-content,
html[data-color-mode="light"] .modal-renovacion-body,
html[data-color-mode="light"] .modal-guias-body {
    scrollbar-color: rgba(28, 25, 23, 0.20) transparent;
}
.swal2-popup ::-webkit-scrollbar,
.cart-sheet-body::-webkit-scrollbar,
.cart-sheet-footer::-webkit-scrollbar,
.walk-card::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.swal2-popup ::-webkit-scrollbar-track,
.cart-sheet-body::-webkit-scrollbar-track,
.cart-sheet-footer::-webkit-scrollbar-track,
.walk-card::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: transparent;
}
.swal2-popup ::-webkit-scrollbar-thumb,
.cart-sheet-body::-webkit-scrollbar-thumb,
.cart-sheet-footer::-webkit-scrollbar-thumb,
.walk-card::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 999px;
}
html[data-color-mode="light"] .swal2-popup ::-webkit-scrollbar-thumb,
html[data-color-mode="light"] .cart-sheet-body::-webkit-scrollbar-thumb,
html[data-color-mode="light"] .cart-sheet-footer::-webkit-scrollbar-thumb,
html[data-color-mode="light"] .walk-card::-webkit-scrollbar-thumb,
html[data-color-mode="light"] .modal-content::-webkit-scrollbar-thumb {
    background: rgba(28, 25, 23, 0.20);
}

/* 1. Top Marquee — Quiet, monochrome editorial strip (zero loud rainbow gradients) */
#dpTopMarqueeBar,
#dpTopMarqueeBar.has-flash-promo {
    background: #0e1420 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}
#dpTopMarqueeBar .dp-mq-track {
    animation-duration: 50s !important;
}
#dpTopMarqueeBar .dp-mq-chip,
#dpTopMarqueeBar .dp-mq-chip span {
    color: #94a3b8 !important;
    font-size: 11.5px !important;
}
#dpTopMarqueeBar .dp-mq-chip b {
    color: #e2e8f0 !important;
}
#dpTopMarqueeBar .dp-mq-pill-promo {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] #dpTopMarqueeBar,
html[data-color-mode="light"] #dpTopMarqueeBar.has-flash-promo {
    background: #eae4d7 !important;
    border-bottom: 1px solid rgba(28, 25, 23, 0.08) !important;
    color: #57534e !important;
}
html[data-color-mode="light"] #dpTopMarqueeBar .dp-mq-chip,
html[data-color-mode="light"] #dpTopMarqueeBar .dp-mq-chip span {
    color: #57534e !important;
}
html[data-color-mode="light"] #dpTopMarqueeBar .dp-mq-chip b {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #dpTopMarqueeBar .dp-mq-pill-promo {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #f59e0b !important;
}
html[data-color-mode="light"] #dpTopMarqueeBar .dp-mq-promo-price {
    color: #9a3412 !important;
}

/* 2. Topbar + Duckspace Language, Currency (COP/USDT) & Theme Controls */
.topbar {
    background: var(--dp-topbar-bg) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--dp-border) !important;
}
html[data-color-mode="dark"] .search-input {
    background: #141c2c !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}
html[data-color-mode="dark"] .search-input:focus {
    border-color: rgba(16, 185, 129, 0.45) !important;
    background: #182235 !important;
}
html[data-color-mode="light"] .topbar .brand {
    color: #1c1917 !important;
    font-weight: 900;
    letter-spacing: -0.02em;
}
html[data-color-mode="light"] .topbar .brand-icon {
    background: #1c1917 !important;
    color: #faf8f4 !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] .search-input {
    background: #eae4d8 !important;
    border: 1px solid rgba(28, 25, 23, 0.11) !important;
    color: #1c1917 !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] .search-input::placeholder {
    color: #78716c !important;
}
html[data-color-mode="light"] .search-input:focus {
    background: #faf8f4 !important;
    border-color: #1c1917 !important;
    box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.07) !important;
}
html[data-color-mode="light"] #btnLimpiarSearch {
    background: rgba(28, 25, 23, 0.09) !important;
    color: #44403c !important;
}

/* Reseller & Client Topbar Chips & Buttons */
html[data-color-mode="dark"] #btnToggleVistaCliente {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}
html[data-color-mode="dark"] #btnToggleVistaCliente.active,
html[data-color-mode="dark"] body.modo-vista-cliente #btnToggleVistaCliente {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #6ee7b7 !important;
}
html[data-color-mode="light"] .user-chip {
    background: #faf8f4 !important;
    border: 1px solid rgba(28, 25, 23, 0.15) !important;
    color: #1c1917 !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] .user-chip-name {
    color: #1c1917 !important;
    font-weight: 800 !important;
}
html[data-color-mode="light"] #btnToggleVistaCliente {
    background: #faf8f4 !important;
    border: 1px solid rgba(28, 25, 23, 0.16) !important;
    color: #44403c !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] #btnToggleVistaCliente.active,
html[data-color-mode="light"] body.modo-vista-cliente #btnToggleVistaCliente {
    background: #1c1917 !important;
    border-color: #1c1917 !important;
    color: #faf8f4 !important;
}
html[data-color-mode="light"] .btn-topbar-guias[onclick*="abrirModalPoliticasRevendedor"] {
    background: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    color: #92400e !important;
    font-weight: 800 !important;
}
html[data-color-mode="light"] #btnTopbarProveedorCat {
    background: #e7f4ed !important;
    border-color: #059669 !important;
    color: #065f46 !important;
}

.dp-duck-controls {
    display: inline-flex;
    align-items: center;
    background: var(--dp-surface-2);
    border: 1px solid var(--dp-border-strong);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}
.dp-duck-btn {
    border: none;
    background: transparent;
    color: var(--dp-ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 9px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    transition: background 0.16s ease, color 0.16s ease;
    white-space: nowrap;
}
.dp-duck-btn:hover {
    background: rgba(148, 163, 184, 0.14);
}
html[data-color-mode="light"] .dp-duck-btn:hover {
    background: rgba(28, 25, 23, 0.07);
}
.dp-duck-curr-btn.is-usdt {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
}
html[data-color-mode="light"] .dp-duck-curr-btn.is-usdt {
    background: #fef3c7;
    color: #92400e;
}
.dp-duck-theme-btn {
    padding: 5px 8px;
    font-size: 13.5px;
}
.dp-duck-sep {
    width: 1px;
    height: 14px;
    background: var(--dp-border-strong);
}

.dp-btn-login-top {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.36) !important;
    color: #6ee7b7 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}
.dp-btn-login-top:hover {
    background: rgba(16, 185, 129, 0.20) !important;
    border-color: rgba(52, 211, 153, 0.55) !important;
    color: #a7f3d0 !important;
}
html[data-color-mode="light"] .dp-btn-login-top {
    background: #e7f4ed !important;
    border: 1px solid rgba(5, 150, 105, 0.38) !important;
    color: #065f46 !important;
}
html[data-color-mode="light"] .dp-btn-login-top:hover {
    background: #d1fae5 !important;
    border-color: #059669 !important;
}

@media (max-width: 820px) {
    .topbar-inner {
        flex-wrap: wrap !important;
        gap: 8px 8px !important;
        padding: 10px 12px !important;
        align-items: center !important;
    }
    .topbar-inner .brand {
        order: 1;
        font-size: 15.5px !important;
        gap: 8px !important;
        min-width: 0;
        white-space: nowrap;
    }
    .topbar-inner .brand .brand-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
        flex-shrink: 0;
    }
    .topbar-inner .dp-duck-controls {
        order: 2;
        height: 34px !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        padding: 3px !important;
        gap: 2px !important;
    }
    .topbar-inner .dp-duck-btn {
        height: 100% !important;
        padding: 0 8.5px !important;
        font-size: 11.5px !important;
    }
    .topbar-inner .dp-duck-theme-btn {
        padding: 0 7.5px !important;
        font-size: 13px !important;
    }
    .topbar-inner #btnTopbarProveedorCat,
    .topbar-inner #btnToggleVistaCliente,
    .topbar-inner .topbar-user {
        order: 3;
        margin-left: 0 !important;
        width: auto !important;
        height: 34px !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    .topbar-inner .topbar-user {
        padding: 0 12px !important;
        font-size: 12px !important;
        max-width: 150px;
    }
    .topbar-inner .user-chip .user-chip-name {
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar-inner .search-wrap {
        order: 4;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 2px !important;
    }
}
@media (max-width: 768px) {
    .topbar-inner .brand {
        gap: 0 !important;
    }
    .topbar-inner .brand .brand-title-text {
        display: none !important;
    }
    #mobileBottomDock #dockBtnLogin {
        color: #6ee7b7 !important;
    }
    html[data-color-mode="light"] #mobileBottomDock #dockBtnLogin {
        color: #059669 !important;
    }
}
@media (max-width: 380px) {
    .topbar-inner {
        gap: 7px 6px !important;
        padding: 9px 10px !important;
    }
    .topbar-inner .dp-duck-btn {
        padding: 0 7px !important;
        font-size: 11px !important;
    }
    .topbar-inner .topbar-user {
        padding: 0 10px !important;
        font-size: 11.5px !important;
    }
}

/* 3. Calm Wallet Strip, Reseller Quota Banners, Guest Banner & Navigation Tabs (Both Modes!) */
.wallet-card-cat {
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border-strong) !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    box-shadow: var(--dp-shadow-card) !important;
}
.wallet-card-cat .wallet-icon {
    background: rgba(16, 185, 129, 0.10) !important;
    border: 1px solid rgba(16, 185, 129, 0.20) !important;
    box-shadow: none !important;
}
.wallet-card-cat .wallet-label {
    color: var(--dp-ink-2) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}
.wallet-card-cat .wallet-amount {
    color: var(--dp-ink) !important;
    text-shadow: none !important;
    font-size: 22px !important;
}
.wallet-card-cat .wallet-btn {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
}
.wallet-card-cat .wallet-btn:hover {
    background: #059669 !important;
}
html[data-color-mode="light"] .wallet-card-cat .wm-link.wm-guia {
    color: #065f46 !important;
    font-weight: 700 !important;
}
html[data-color-mode="light"] .wallet-card-cat .wm-link.wm-warn {
    color: #b45309 !important;
    font-weight: 800 !important;
}

/* Quiet Reseller Quota Banner (zero bright yellow visual glare) */
#bannerCuotaRevendedor,
#bannerPendienteRevendedor {
    background: rgba(245, 158, 11, 0.06) !important;
    border: 1px solid rgba(245, 158, 11, 0.18) !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] #bannerCuotaRevendedor,
html[data-color-mode="light"] #bannerPendienteRevendedor {
    background: #f8f0df !important;
    border: 1px solid #e5c687 !important;
}
html[data-color-mode="light"] #bannerCuotaRevendedor > div,
html[data-color-mode="light"] #bannerCuotaRevendedor b,
html[data-color-mode="light"] #bannerPendienteRevendedor > div,
html[data-color-mode="light"] #bannerPendienteRevendedor b {
    color: #78350f !important;
}
html[data-color-mode="light"] #bannerCuotaRevendedor button {
    background: #ede2c8 !important;
    border: 1px solid #d4b87a !important;
    color: #78350f !important;
    box-shadow: none !important;
}

/* Quiet Want-to-Sell Guest Banner */
#guestQuieroVenderHero .guest-auth-card,
.guest-auth-card {
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border) !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}
html[data-color-mode="light"] #guestQuieroVenderHero .guest-auth-text h2,
html[data-color-mode="light"] .guest-auth-text h2 {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #guestQuieroVenderHero .guest-auth-text p,
html[data-color-mode="light"] .guest-auth-text p {
    color: #57534e !important;
}
html[data-color-mode="light"] #guestQuieroVenderHero button[onclick*="cerrar"] {
    color: #57534e !important;
}
html[data-color-mode="light"] #upsellCarritoSlot b,
html[data-color-mode="light"] #upsellCarritoSlot strong {
    color: #1e3a8a !important;
}

.tabs-container {
    border-bottom-color: var(--dp-border) !important;
}
html[data-color-mode="light"] .tab-btn {
    color: #57534e !important;
}
html[data-color-mode="light"] .tab-btn.active {
    color: #1c1917 !important;
    border-bottom-color: #1c1917 !important;
}
html[data-color-mode="light"] .tab-count {
    background: #e5dfd3 !important;
    color: #292524 !important;
}
.scroll-arrow-btn {
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border-strong) !important;
    color: var(--dp-ink) !important;
    box-shadow: var(--dp-shadow-card) !important;
}
.section-title {
    color: var(--dp-ink) !important;
    font-size: 17px !important;
}
.dp-cat-count-badge {
    background: var(--dp-surface-2) !important;
    color: var(--dp-ink-2) !important;
    border: 1px solid var(--dp-border) !important;
}
.dp-display-mode-switcher,
.mobile-view-switcher {
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 12px !important;
    padding: 3px !important;
    box-shadow: none !important;
}
.dp-dm-btn,
.mv-btn {
    color: var(--dp-ink-2) !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
}
.dp-dm-btn.active,
.mv-btn.active {
    background: var(--dp-pill-active-bg) !important;
    color: var(--dp-pill-active-txt) !important;
    border: 1px solid var(--dp-pill-active-border) !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] .dp-display-mode-switcher,
html[data-color-mode="light"] .mobile-view-switcher {
    background: #e9e4d9 !important;
    border-color: rgba(28, 25, 23, 0.10) !important;
}
html[data-color-mode="light"] .dp-dm-btn,
html[data-color-mode="light"] .mv-btn {
    color: #57534e !important;
}
html[data-color-mode="light"] .dp-dm-btn.active,
html[data-color-mode="light"] .mv-btn.active {
    background: #faf8f4 !important;
    color: #1c1917 !important;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08) !important;
}
html[data-color-mode="light"] .sort-select {
    background-color: #faf8f4 !important;
    border-color: rgba(28, 25, 23, 0.13) !important;
    color: #1c1917 !important;
}

/* 4. Duckspace Overlapping HD Mini-Icon Stacks & Luminous Filter Pills */
.dp-cat-mini-stack {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    margin-right: 2px;
    flex-shrink: 0;
}
.dp-cat-mini-stack img {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6.5px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #0f172a;
    border: 1.5px solid #0e1420;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    display: block;
    position: relative;
}
.dp-cat-mini-stack img + img {
    margin-left: -6px;
}
html[data-color-mode="light"] .dp-cat-mini-stack img {
    border-color: #ffffff;
    box-shadow: 0 2px 5px rgba(28, 25, 23, 0.16);
}
.cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border) !important;
    color: var(--dp-ink-2) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16) !important;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}
.cat-pill:has(.dp-cat-mini-stack) {
    padding: 6px 13px 6px 8px !important;
}
.cat-pill:hover {
    border-color: var(--dp-border-strong) !important;
    color: var(--dp-ink) !important;
    transform: translateY(-1px);
}
.cat-pill.on,
.cat-pill.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.20), rgba(16, 185, 129, 0.09)) !important;
    border-color: rgba(52, 211, 153, 0.58) !important;
    color: var(--dp-pill-active-txt) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px -3px rgba(16, 185, 129, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-color-mode="light"] .cat-pill {
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.06) !important;
}
html[data-color-mode="light"] .cat-pill.on,
html[data-color-mode="light"] .cat-pill.active {
    background: var(--dp-pill-active-bg) !important;
    border-color: var(--dp-pill-active-border) !important;
    color: var(--dp-pill-active-txt) !important;
    box-shadow: 0 4px 12px rgba(28, 25, 23, 0.16) !important;
}
.cat-pill .cat-cnt {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.72;
}

/* 5. Desktop 4-Column Grid + Duckspace Dual-Layer Ambient Brand Glow (.dp-svc-card) */
@media (min-width: 1140px) {
    #gridServicios:not(.grid-1col) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}
@media (min-width: 820px) and (max-width: 1139px) {
    #gridServicios:not(.grid-1col) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

.dp-svc-card {
    background: radial-gradient(130% 95% at 12% 5%, rgba(var(--svc-rgb, 99, 102, 241), 0.23) 0%, rgba(var(--svc-rgb, 99, 102, 241), 0.07) 48%, rgba(13, 18, 30, 0.97) 86%), var(--dp-surface) !important;
    border: 1px solid rgba(var(--svc-rgb, 148, 163, 184), 0.25) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow: var(--dp-shadow-card) !important;
    display: flex;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    position: relative !important;
    transition: transform 0.20s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.20s ease, border-color 0.20s ease !important;
}
.dp-svc-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: radial-gradient(64% 50% at 10% 0%, rgba(var(--svc-rgb, 99, 102, 241), 0.14) 0%, rgba(var(--svc-rgb, 99, 102, 241), 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 30%) !important;
    opacity: 1 !important;
    transition: opacity 0.22s ease !important;
}
.dp-svc-card::after {
    display: none !important;
}
.dp-svc-card > *:not(.dp-card-hidden-compat) {
    position: relative;
    z-index: 1;
}
.dp-svc-card > .dp-card-head-duck {
    position: relative;
    z-index: 6;
}

/* CRITICAL FILTER VISIBILITY RULE: never override inline display:none from aplicarFiltroCatalogo() */
#gridServicios .dp-svc-card[style*="display: none"],
#gridServicios .dp-svc-card[style*="display:none"],
.product-card[style*="display: none"],
.product-card[style*="display:none"] {
    display: none !important;
}

.dp-svc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--svc-rgb, 129, 140, 248), 0.52) !important;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.62), 0 0 28px -8px rgba(var(--svc-rgb, 99, 102, 241), 0.30) !important;
}

html[data-color-mode="light"] .dp-svc-card {
    background: radial-gradient(130% 95% at 12% 5%, rgba(var(--svc-rgb, 99, 102, 241), 0.10) 0%, rgba(var(--svc-rgb, 99, 102, 241), 0.03) 48%, rgba(250, 248, 244, 0.98) 86%), var(--dp-surface) !important;
    border: 1px solid rgba(var(--svc-rgb, 99, 102, 241), 0.22) !important;
    box-shadow: 0 2px 10px rgba(28, 25, 23, 0.05) !important;
}
html[data-color-mode="light"] .dp-svc-card::before {
    background: radial-gradient(60% 46% at 10% 0%, rgba(var(--svc-rgb, 99, 102, 241), 0.07) 0%, rgba(var(--svc-rgb, 99, 102, 241), 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 32%) !important;
}
html[data-color-mode="light"] .dp-svc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--svc-rgb, 99, 102, 241), 0.42) !important;
    box-shadow: 0 14px 30px -10px rgba(28, 25, 23, 0.13), 0 0 22px -8px rgba(var(--svc-rgb, 99, 102, 241), 0.20) !important;
}

/* Hidden DOM compatibility container */
.dp-card-hidden-compat {
    display: none !important;
}

/* Row 1: Zero-Gap Full-Bleed Squircle App Icon + Top-Right Status Pill + Optional Reseller ⋯ */
.dp-card-head-duck {
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    display: flex;
    align-items: flex-start !important;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    gap: 8px;
    margin-bottom: 12px;
}
.dp-svc-card .card-logo,
#gridServicios .dp-svc-card .card-logo {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22.5% !important;
    overflow: hidden !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.36), 0 0 20px -5px rgba(var(--svc-rgb, 99, 102, 241), 0.40) !important;
    isolation: isolate;
}
.dp-svc-card .card-logo::after,
#gridServicios .dp-svc-card .card-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
.dp-svc-card .card-logo:not(.is-logo-contain) img,
#gridServicios .dp-svc-card .card-logo:not(.is-logo-contain) img,
body:not(.mobile-grid-1col) #gridServicios .dp-svc-card .card-logo:not(.is-logo-contain) img,
body.mobile-grid-1col #gridServicios .dp-svc-card .card-logo:not(.is-logo-contain) img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    filter: none !important;
    transform: scale(1.02);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dp-svc-card:hover .card-logo:not(.is-logo-contain) img,
#gridServicios .dp-svc-card:hover .card-logo:not(.is-logo-contain) img {
    transform: scale(1.05);
}
.dp-svc-card .card-logo.is-logo-contain,
#gridServicios .dp-svc-card .card-logo.is-logo-contain {
    padding: 6px !important;
    background: radial-gradient(circle at 30% 25%, rgba(var(--svc-rgb, 99, 102, 241), 0.34), rgba(15, 23, 42, 0.96)) !important;
}
.dp-svc-card .card-logo.is-logo-contain img,
#gridServicios .dp-svc-card .card-logo.is-logo-contain img,
body:not(.mobile-grid-1col) #gridServicios .dp-svc-card .card-logo.is-logo-contain img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    transform: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) !important;
}
.dp-svc-card .card-logo .placeholder,
#gridServicios .dp-svc-card .card-logo .placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    font-size: 20px !important;
}
html[data-color-mode="light"] .dp-svc-card .card-logo,
html[data-color-mode="light"] #gridServicios .dp-svc-card .card-logo {
    border: 0 !important;
    box-shadow: 0 5px 14px rgba(28, 25, 23, 0.14), 0 0 16px -5px rgba(var(--svc-rgb, 99, 102, 241), 0.30) !important;
}
html[data-color-mode="light"] .dp-svc-card .card-logo::after,
html[data-color-mode="light"] #gridServicios .dp-svc-card .card-logo::after {
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(28, 25, 23, 0.11);
}

.dp-card-head-right {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    padding-top: 1px;
}

/* Quiet, Soft Translucent Status Pills instead of 50 Screaming Traffic-Light Blocks */
.dp-svc-card .badge-combo {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3.5px 8px !important;
    border-radius: 999px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    min-width: 0;
    display: inline-block !important;
    line-height: 1.25 !important;
    background: rgba(16, 185, 129, 0.10) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.20) !important;
}
.dp-svc-card .badge-combo .dp-led-dot {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 5.5px !important;
    height: 5.5px !important;
    margin-right: 4px !important;
    animation: none !important;
    box-shadow: none !important;
}
/* Semantic soft badge tints in Dark Mode */
.dp-svc-card .badge-combo[style*="#d97706"],
.dp-svc-card .badge-combo[style*="#f59e0b"],
.dp-svc-card .badge-combo[style*="245, 158, 11"],
.dp-svc-card .badge-combo[style*="245,158,11"] {
    background: rgba(245, 158, 11, 0.11) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.22) !important;
}
.dp-svc-card .badge-combo[style*="#ef4444"],
.dp-svc-card .badge-combo[style*="#dc2626"],
.dp-svc-card .badge-combo[style*="239, 68, 68"],
.dp-svc-card .badge-combo[style*="239,68,68"] {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.24) !important;
}
.dp-svc-card .badge-combo[style*="#6366f1"],
.dp-svc-card .badge-combo[style*="#4f46e5"],
.dp-svc-card .badge-combo[style*="#8b5cf6"] {
    background: rgba(99, 102, 241, 0.13) !important;
    color: #c7d2fe !important;
    border-color: rgba(99, 102, 241, 0.26) !important;
}
/* Semantic soft badge tints in Light Mode */
html[data-color-mode="light"] .dp-svc-card .badge-combo {
    background: #e8f4ee !important;
    color: #065f46 !important;
    border: 1px solid #bce3cf !important;
}
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="#d97706"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="#f59e0b"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="245, 158, 11"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="245,158,11"] {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="#ef4444"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="#dc2626"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="239, 68, 68"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="239,68,68"] {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="#6366f1"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="#4f46e5"],
html[data-color-mode="light"] .dp-svc-card .badge-combo[style*="#8b5cf6"] {
    background: #e0e7ff !important;
    color: #3730a3 !important;
    border-color: #a5b4fc !important;
}

/* Responsive badge copy: full on desktop/1x1, concise on 2x2 mobile so pills never cut mid-word */
.dp-btxt-long { display: inline; }
.dp-btxt-short { display: none; }

/* Row 2: Clean 2-Line Title (Never chopped mid-word on 1 line) */
.dp-svc-card .card-title,
#gridServicios .dp-svc-card .card-title {
    color: var(--dp-ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 5px 0 !important;
    letter-spacing: -0.01em !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    min-width: 0 !important;
    word-break: break-word;
}

/* Row 3: Quiet 1-2 Line Benefit */
.dp-svc-card .card-desc {
    color: var(--dp-ink-2) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
    margin: 0 0 12px 0 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 33px;
}

/* Owned active pill inline */
.dp-owned-inline-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 8px;
    align-self: flex-start;
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
html[data-color-mode="light"] .dp-owned-inline-tag {
    background: #e8f4ee;
    color: #065f46;
    border-color: #bce3cf;
}

/* Flash Offer Bar inside cards — 100% legible in BOTH Dark & Light Mode */
[id^="promoFlashBar_"] {
    background: rgba(245, 158, 11, 0.09) !important;
    border: 1px solid rgba(245, 158, 11, 0.24) !important;
    border-radius: 9px !important;
    padding: 4px 8px !important;
    margin-bottom: 8px !important;
}
[id^="promoFlashBar_"],
[id^="promoFlashBar_"] span,
[id^="promoFlashBar_"] * {
    color: #fcd34d !important;
}
html[data-color-mode="light"] [id^="promoFlashBar_"] {
    background: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
}
html[data-color-mode="light"] [id^="promoFlashBar_"],
html[data-color-mode="light"] [id^="promoFlashBar_"] span,
html[data-color-mode="light"] [id^="promoFlashBar_"] * {
    color: #92400e !important;
}

/* Row 3.5: Visible Plan Duration Strip (1 Mes / 6 Meses / Interactive Multi-Duration Pills) */
.dp-card-dur-strip {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
    width: 100%;
    min-width: 0;
}
.dp-card-dur-strip .dp-dur-chip {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    padding: 4px 8.5px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    color: var(--dp-ink-2);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s ease;
    min-width: 0;
}
.dp-card-dur-strip button.dp-dur-chip {
    cursor: pointer;
    flex: 1 1 0%;
    padding: 4.5px 5px;
}
.dp-card-dur-strip button.dp-dur-chip:hover {
    border-color: rgba(16, 185, 129, 0.45);
    color: var(--dp-ink);
}
.dp-card-dur-strip button.dp-dur-chip.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.48);
    color: #6ee7b7;
    font-weight: 800;
}
.dp-card-dur-strip button.dp-dur-chip.is-out {
    opacity: 0.48;
}
.dp-card-dur-strip .dp-dur-chip.is-single {
    background: rgba(148, 163, 184, 0.10);
    border-color: rgba(148, 163, 184, 0.22);
    color: #cbd5e1;
    font-weight: 700;
}
.dp-card-dur-strip .dp-dur-chip.is-single.is-extended {
    background: rgba(56, 189, 248, 0.13);
    border-color: rgba(56, 189, 248, 0.34);
    color: #7dd3fc;
    font-weight: 800;
}
.dp-card-dur-strip .dp-dur-lbl-full { display: inline; }
.dp-card-dur-strip .dp-dur-lbl-short { display: none; }
.dp-card-dur-strip.is-compact-4 .dp-dur-lbl-full { display: none; }
.dp-card-dur-strip.is-compact-4 .dp-dur-lbl-short { display: inline; }

html[data-color-mode="light"] .dp-card-dur-strip .dp-dur-chip {
    background: #f1ede4;
    border-color: #d6cebe;
    color: #57534e;
}
html[data-color-mode="light"] .dp-card-dur-strip button.dp-dur-chip:hover {
    border-color: #a8a29e;
    color: #1c1917;
}
html[data-color-mode="light"] .dp-card-dur-strip button.dp-dur-chip.active {
    background: #e8f4ee;
    border-color: #6ee7b7;
    color: #065f46;
}
html[data-color-mode="light"] .dp-card-dur-strip .dp-dur-chip.is-single {
    background: #efeae0;
    border-color: #d6cebe;
    color: #44403c;
}
html[data-color-mode="light"] .dp-card-dur-strip .dp-dur-chip.is-single.is-extended {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}
html[data-color-mode="light"] .dp-dur-single-cart-pill {
    background: #e8f4ee !important;
    border-color: #86efac !important;
    color: #065f46 !important;
}

.dp-hr-dur {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--dp-ink-3);
    line-height: 1.15;
    margin-top: 1px;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #gridServicios:not(.grid-1col) .dp-card-dur-strip {
        gap: 4px;
        margin-bottom: 6px;
    }
    #gridServicios:not(.grid-1col) .dp-card-dur-strip .dp-dur-chip {
        font-size: 9.8px;
        padding: 3.5px 6px;
    }
    #gridServicios:not(.grid-1col) .dp-card-dur-strip.is-compact-3 .dp-dur-lbl-full {
        display: none;
    }
    #gridServicios:not(.grid-1col) .dp-card-dur-strip.is-compact-3 .dp-dur-lbl-short {
        display: inline;
    }
}

/* Row 4: Calm Footer (Desde $X /mes  +  Quiet Comprar -> Pill) */
.dp-card-foot-duck {
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid var(--dp-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dp-price-stack-duck {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dp-from-lbl {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--dp-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.dp-price-line-duck {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
.dp-svc-card .card-price {
    color: var(--dp-ink) !important;
    font-size: 16.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}
.dp-unit-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--dp-ink-3);
    white-space: nowrap;
}
.dp-svc-card .card-price-old {
    font-size: 11px !important;
    color: var(--dp-ink-3) !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
}

.dp-svc-card .card-action-row {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Calm, Relaxing Card Buy Button (lights up on hover instead of 50 neon blocks at once) */
.dp-svc-card .btn-comprar {
    box-sizing: border-box !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    background: rgba(16, 185, 129, 0.13) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    box-shadow: none !important;
    transition: all 0.16s ease !important;
}
.dp-svc-card .btn-comprar:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}
html[data-color-mode="light"] .dp-svc-card .btn-comprar {
    background: #ede8dd !important;
    color: #1c1917 !important;
    border: 1px solid #d6cebe !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] .dp-svc-card .btn-comprar:hover {
    background: #1c1917 !important;
    color: #faf8f4 !important;
    border-color: #1c1917 !important;
    box-shadow: 0 4px 12px rgba(28, 25, 23, 0.16) !important;
}

.dp-svc-card .btn-comprar.btn-encargo-preventa {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
}
html[data-color-mode="light"] .dp-svc-card .btn-comprar.btn-encargo-preventa {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #f59e0b !important;
}

/* Stack price cleanly above [🎁 Demo] + [Comprar ->] at ALL screen widths so price NEVER wraps vertically */
.dp-card-foot-duck:has(.btn-demo-mp-inline) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}
.dp-card-foot-duck:has(.btn-demo-mp-inline) .card-action-row {
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
}
.dp-card-foot-duck:has(.btn-demo-mp-inline) .btn-comprar {
    flex: 1 1 auto !important;
    justify-content: center;
    text-align: center;
}
.dp-svc-card .btn-demo-mp-inline {
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    background: rgba(56, 189, 248, 0.10) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #7dd3fc !important;
    box-shadow: none !important;
}
html[data-color-mode="light"] .dp-svc-card .btn-demo-mp-inline {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

/* Reseller ⋯ Quick Menu (Single line, zero wrap, hidden in Vista Cliente) */
.dp-rev-tools-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0 !important;
}
body.modo-vista-cliente .dp-rev-tools-wrap {
    display: none !important;
}
.dp-rev-dots-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--dp-border-strong);
    background: var(--dp-surface-2);
    color: var(--dp-ink-2);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
html[data-color-mode="light"] .dp-rev-dots-btn {
    background: #efeae0;
    border-color: rgba(28, 25, 23, 0.14);
    color: #292524;
}
.dp-rev-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 175px;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border-strong);
    border-radius: 13px;
    padding: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    z-index: 45;
    flex-direction: column;
    gap: 4px;
}
.dp-rev-popover.open {
    display: flex;
}
.dp-rev-pop-item {
    border: none;
    background: transparent;
    color: var(--dp-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 9px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.dp-rev-pop-item:hover {
    background: var(--dp-surface-2);
}

/* Mobile 2x2 & 1x1 Grid Adjustments (320px - 640px) */
@media (max-width: 640px) {
    #gridServicios:not(.grid-1col) .dp-svc-card {
        padding: 11px !important;
        border-radius: 15px !important;
    }
    body:not(.mobile-grid-1col) #gridServicios:not(.grid-1col) .dp-svc-card .card-logo,
    #gridServicios:not(.grid-1col) .dp-svc-card .card-logo {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 22.5% !important;
        border: 0 !important;
    }
    body.mobile-grid-1col #gridServicios .dp-svc-card .card-logo,
    #gridServicios.grid-1col .dp-svc-card .card-logo {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 22.5% !important;
        border: 0 !important;
    }
    #gridServicios:not(.grid-1col) .dp-card-head-duck {
        margin-bottom: 9px;
        gap: 5px;
        align-items: flex-start !important;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .badge-combo {
        font-size: 8.8px !important;
        padding: 3px 6.5px !important;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .badge-combo .dp-btxt-long {
        display: none !important;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .badge-combo .dp-btxt-short {
        display: inline !important;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .card-title {
        min-height: 32px;
        font-size: 13.5px !important;
        line-height: 1.24 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .card-desc {
        font-size: 11px !important;
        min-height: 28px;
        margin-bottom: 9px !important;
    }
    #gridServicios:not(.grid-1col) .dp-card-foot-duck {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 7px !important;
        padding-top: 8px;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .card-price {
        font-size: 15px !important;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .card-action-row {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
    }
    #gridServicios:not(.grid-1col) .dp-svc-card .btn-comprar {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 8px !important;
        font-size: 11.5px !important;
        text-align: center;
        justify-content: center;
    }
}

/* 6. Hoshino Quick List + Calm Combo Cards (.card-combo) + Floating Cart + Mobile Dock */
.carrito-flotante {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
}

/* Duckspace Ambient Combo Cards + Full-Bleed Squircle Bundle Icons in BOTH Dark & Light Mode */
.card-combo {
    background: radial-gradient(130% 95% at 12% 5%, rgba(var(--svc-rgb, 245, 158, 11), 0.21) 0%, rgba(var(--svc-rgb, 245, 158, 11), 0.06) 48%, rgba(13, 18, 30, 0.97) 86%), var(--dp-surface) !important;
    border: 1px solid rgba(var(--svc-rgb, 245, 158, 11), 0.26) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow: var(--dp-shadow-card) !important;
    transition: transform 0.20s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.20s ease, border-color 0.20s ease !important;
}
.card-combo::before,
.card-combo::after {
    display: none !important;
}
.card-combo:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--svc-rgb, 245, 158, 11), 0.50) !important;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.62), 0 0 26px -8px rgba(var(--svc-rgb, 245, 158, 11), 0.28) !important;
}
.card-combo .card-logo-combo {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 15px !important;
    height: 76px !important;
    padding: 8px 10px !important;
}
html[data-color-mode="light"] .card-combo .card-logo-combo {
    background: rgba(28, 25, 23, 0.04) !important;
    border-color: rgba(28, 25, 23, 0.08) !important;
}
.card-combo .combo-logo-box,
body:not(.mobile-grid-1col) .card-combo .combo-logo-box {
    position: relative !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 22.5% !important;
    padding: 6px !important;
    background: radial-gradient(circle at 30% 25%, rgba(var(--svc-rgb, 245, 158, 11), 0.34), rgba(15, 23, 42, 0.96)) !important;
    border: 0 !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.34), 0 0 16px -5px rgba(var(--svc-rgb, 245, 158, 11), 0.32) !important;
    overflow: hidden !important;
    isolation: isolate;
}
.card-combo .combo-logo-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
html[data-color-mode="light"] .card-combo .combo-logo-box::after {
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(28, 25, 23, 0.11);
}
.card-combo .combo-split-wrapper.combo-split-4 .combo-logo-box,
body:not(.mobile-grid-1col) .card-combo .combo-split-wrapper.combo-split-4 .combo-logo-box {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    border-radius: 22.5% !important;
}
.card-combo .combo-logo-box.is-cover,
body:not(.mobile-grid-1col) .card-combo .combo-logo-box.is-cover {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22.5% !important;
    background: transparent !important;
}
.card-combo .combo-logo-box.is-cover img,
body:not(.mobile-grid-1col) .card-combo .combo-logo-box.is-cover img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: none !important;
    display: block !important;
    transform: scale(1.02);
}
@media (max-width: 640px) {
    .card-combo .combo-logo-box,
    body:not(.mobile-grid-1col) .card-combo .combo-logo-box {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        border-radius: 22.5% !important;
    }
}
.card-combo .badge-combo {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3.5px 9px !important;
    border-radius: 999px !important;
}
html[data-color-mode="light"] .card-combo .badge-combo {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}
.card-combo .card-title {
    color: var(--dp-ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
.card-combo .card-desc {
    color: var(--dp-ink-2) !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
}
.card-combo .card-price {
    color: var(--dp-ink) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}
.card-combo .card-price-old {
    color: var(--dp-ink-3) !important;
    font-size: 11.5px !important;
}
.card-combo .card-meta {
    color: var(--dp-accent) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
.card-combo .btn-comprar {
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 9px 14px !important;
    background: rgba(16, 185, 129, 0.14) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    box-shadow: none !important;
}
.card-combo .btn-comprar:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}
html[data-color-mode="light"] .card-combo .btn-comprar {
    background: #ede8dd !important;
    color: #1c1917 !important;
    border: 1px solid #d6cebe !important;
}
html[data-color-mode="light"] .card-combo .btn-comprar:hover {
    background: #1c1917 !important;
    color: #faf8f4 !important;
    border-color: #1c1917 !important;
}
html[data-color-mode="light"] .card-combo .btn-cotizar-rev {
    background: #f1ede4 !important;
    border-color: rgba(28, 25, 23, 0.14) !important;
    color: #292524 !important;
}

/* Calm Quick-List Squircle Icons & Bottom Dock */
.dp-hoshino-row,
.dp-hoshino-row.st-promo {
    background: linear-gradient(90deg, rgba(var(--svc-rgb, 99, 102, 241), 0.10) 0%, rgba(var(--svc-rgb, 99, 102, 241), 0.02) 34%, rgba(14, 20, 32, 0.96) 100%), var(--dp-surface) !important;
    border-color: var(--dp-border) !important;
    box-shadow: var(--dp-shadow-card) !important;
}
.dp-hr-thumb {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 22.5% !important;
    padding: 5px !important;
    background: radial-gradient(circle at 30% 25%, rgba(var(--svc-rgb, 99, 102, 241), 0.34), rgba(15, 23, 42, 0.96)) !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32), 0 0 14px -4px rgba(var(--svc-rgb, 99, 102, 241), 0.36) !important;
    overflow: hidden !important;
    isolation: isolate;
}
.dp-hr-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
html[data-color-mode="light"] .dp-hr-thumb::after {
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(28, 25, 23, 0.11);
}
.dp-hr-thumb.is-cover {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22.5% !important;
    background: transparent !important;
}
.dp-hr-thumb.is-cover img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: scale(1.02);
}
html[data-color-mode="light"] .dp-hkpi-card,
html[data-color-mode="light"] .dp-hoshino-cat-block {
    background: #faf8f4 !important;
    border-color: rgba(28, 25, 23, 0.10) !important;
    box-shadow: var(--dp-shadow-card) !important;
}
html[data-color-mode="light"] .card-combo {
    background: radial-gradient(130% 95% at 12% 5%, rgba(var(--svc-rgb, 245, 158, 11), 0.10) 0%, rgba(var(--svc-rgb, 245, 158, 11), 0.03) 48%, rgba(250, 248, 244, 0.98) 86%), #faf8f4 !important;
    border-color: rgba(var(--svc-rgb, 245, 158, 11), 0.24) !important;
    box-shadow: var(--dp-shadow-card) !important;
}
html[data-color-mode="light"] .dp-hoshino-cat-hdr {
    background: #ede8dd !important;
    border-bottom-color: rgba(28, 25, 23, 0.09) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] .dp-hoshino-row {
    background: #faf8f4 !important;
    border-bottom-color: rgba(28, 25, 23, 0.07) !important;
}
html[data-color-mode="light"] .dp-hoshino-row:hover {
    background: #f2ede3 !important;
}
html[data-color-mode="light"] .dp-hr-name,
html[data-color-mode="light"] .dp-hr-price,
html[data-color-mode="light"] .card-combo .card-title,
html[data-color-mode="light"] .card-combo .card-price {
    color: #1c1917 !important;
}
html[data-color-mode="light"] .dp-hr-sub,
html[data-color-mode="light"] .dp-hkpi-sub,
html[data-color-mode="light"] .card-combo .card-desc {
    color: #57534e !important;
}
html[data-color-mode="light"] #mobileBottomDock,
html[data-color-mode="light"] #mobileBottomNav {
    background: rgba(243, 239, 230, 0.96) !important;
    border-top: 1px solid rgba(28, 25, 23, 0.10) !important;
    box-shadow: 0 -4px 18px rgba(28, 25, 23, 0.06) !important;
}
html[data-color-mode="light"] #mobileBottomDock button,
html[data-color-mode="light"] #mobileBottomNav button {
    color: #57534e !important;
}
html[data-color-mode="light"] #mobileBottomDock button.active,
html[data-color-mode="light"] #mobileBottomNav button.active {
    color: #1c1917 !important;
}

/* 7. Unified Refinement for ALL Modals & SweetAlert2 Popups (Dark & Light Modes) */
.swal2-popup {
    border-radius: 20px !important;
    border: 1px solid var(--dp-border-strong) !important;
    padding: 18px 18px 16px !important;
}
.swal2-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    padding: 4px 28px 6px !important;
    line-height: 1.25 !important;
}
.swal2-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 18px !important;
    background: var(--dp-surface-2) !important;
    color: var(--dp-ink-2) !important;
    border: 1px solid var(--dp-border) !important;
}
.swal2-close:hover {
    color: var(--dp-ink) !important;
}

html[data-color-mode="light"] #modalCarrito .cart-sheet-content,
html[data-color-mode="light"] .walk-card,
html[data-color-mode="light"] .modal-guias-card,
html[data-color-mode="light"] #modalLoginPin .modal-content,
html[data-color-mode="light"] #modalPoliticasRevendedor .modal-content,
html[data-color-mode="light"] #modalReporteContent,
html[data-color-mode="light"] .modal-novedad-card,
html[data-color-mode="light"] .modal-renovacion-card,
html[data-color-mode="light"] #modalProveedorCatalogo > div,
html[data-color-mode="light"] .swal2-popup {
    background: #faf8f4 !important;
    border-color: rgba(28, 25, 23, 0.14) !important;
    color: #1c1917 !important;
    box-shadow: 0 24px 60px rgba(28, 25, 23, 0.18) !important;
}
html[data-color-mode="light"] .cart-sheet-header,
html[data-color-mode="light"] .cart-sheet-footer,
html[data-color-mode="light"] .walk-head,
html[data-color-mode="light"] .modal-guias-header,
html[data-color-mode="light"] .modal-guias-footer,
html[data-color-mode="light"] .modal-novedad-header,
html[data-color-mode="light"] .modal-novedad-footer,
html[data-color-mode="light"] .modal-renovacion-header,
html[data-color-mode="light"] .modal-renovacion-pinned-footer,
html[data-color-mode="light"] #modalReporteContent > div:first-child {
    background: #f1ede4 !important;
    border-color: rgba(28, 25, 23, 0.10) !important;
}
html[data-color-mode="light"] .cart-sheet-title,
html[data-color-mode="light"] .walk-title,
html[data-color-mode="light"] .ws-h,
html[data-color-mode="light"] #pinModalTitle,
html[data-color-mode="light"] #guiaModalTitle,
html[data-color-mode="light"] .modal-novedad-title,
html[data-color-mode="light"] .modal-novedad-price-main,
html[data-color-mode="light"] #modalPoliticasRevendedor h3,
html[data-color-mode="light"] .swal2-title {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #pinModalSubtitle,
html[data-color-mode="light"] .ws-p,
html[data-color-mode="light"] .modal-novedad-msg,
html[data-color-mode="light"] #guiaModalSubtitle,
html[data-color-mode="light"] #modalPoliticasRevendedor p,
html[data-color-mode="light"] .swal2-html-container {
    color: #44403c !important;
}

/* Fix #clienteSeleccionado (Stock Propio / Cliente Nuevo / Cliente Guardado) in Light Mode */
html[data-color-mode="light"] #clienteSeleccionado > div {
    background: #e8f5ee !important;
    border-color: #6ee7b7 !important;
}
html[data-color-mode="light"] #clienteSeleccionado div[style*="color:#fff"],
html[data-color-mode="light"] #clienteSeleccionado div[style*="color: #fff"] {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #clienteSeleccionado [style*="color:#6ee7b7"],
html[data-color-mode="light"] #clienteSeleccionado [style*="color:#34d399"] {
    color: #065f46 !important;
}
html[data-color-mode="light"] #clienteSeleccionado [style*="color:#c4b5fd"] {
    color: #5b21b6 !important;
}
html[data-color-mode="light"] #clienteSeleccionado [style*="color:#94a3b8"],
html[data-color-mode="light"] #clienteSeleccionado [style*="color:#cbd5e1"] {
    color: #57534e !important;
}
html[data-color-mode="light"] #clienteSeleccionado button {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}

/* LUIIS / User Profile Menu (.pm-popup) in Light Mode */
html[data-color-mode="light"] .pm-popup .pm-name {
    color: #1c1917 !important;
}
html[data-color-mode="light"] .pm-popup .pm-role {
    color: #57534e !important;
}
html[data-color-mode="light"] .pm-popup .pm-level {
    background: #ede8dd !important;
}
html[data-color-mode="light"] .pm-popup .pm-level-pts {
    color: #44403c !important;
}
html[data-color-mode="light"] .pm-popup .pm-row {
    background: #ffffff !important;
    border-color: rgba(28, 25, 23, 0.10) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] .pm-popup .pm-row:hover {
    background: #f2ede3 !important;
}
html[data-color-mode="light"] .pm-popup .pm-row-label {
    color: #1c1917 !important;
}
html[data-color-mode="light"] .pm-popup .pm-row-sub {
    color: #57534e !important;
}
html[data-color-mode="light"] .pm-popup #pmCuotaRev {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}
html[data-color-mode="light"] .pm-popup #pmCuotaRev .pm-row-label,
html[data-color-mode="light"] .pm-popup #pmCuotaRev .pm-row-sub {
    color: #92400e !important;
}
html[data-color-mode="light"] .pm-popup #pmFlyersRev {
    background: #f3e8ff !important;
    border-color: #c084fc !important;
    color: #6b21a8 !important;
}
html[data-color-mode="light"] .pm-popup #pmFlyersRev .pm-row-label,
html[data-color-mode="light"] .pm-popup #pmFlyersRev .pm-row-sub {
    color: #6b21a8 !important;
}
html[data-color-mode="light"] .pm-popup #pmSalir {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}
html[data-color-mode="light"] .pm-popup #pmSalir .pm-row-label {
    color: #dc2626 !important;
}

/* Inner inline-dark boxes, buttons, labels & gradients inside Modals, Views & SweetAlert2 in Light Mode (preserves #flyerPreviewPhone) */
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="#0f172a"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="#1e293b"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="#020617"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="15,23,42"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="15, 23, 42"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="30,41,59"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="30, 41, 59"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="2,6,23"],
html[data-color-mode="light"] .swal2-popup div:not(#flyerPreviewPhone):not(.flyer-wa-phone)[style*="2, 6, 23"],
html[data-color-mode="light"] #modalCarrito div[style*="2,6,23"],
html[data-color-mode="light"] #modalCarrito div[style*="15,23,42"],
html[data-color-mode="light"] #modalCarrito div[style*="15, 23, 42"],
html[data-color-mode="light"] #modalCarrito div[style*="30,41,59"],
html[data-color-mode="light"] #modalCarrito div[style*="#0f172a"],
html[data-color-mode="light"] #modalCarrito div[style*="#1e293b"],
html[data-color-mode="light"] #modalCarrito div[style*="#020617"],
html[data-color-mode="light"] .modal-renovacion-card div[style*="2,6,23"],
html[data-color-mode="light"] .modal-renovacion-card div[style*="15,23,42"],
html[data-color-mode="light"] .modal-renovacion-card div[style*="#0f172a"],
html[data-color-mode="light"] #modalProveedorCatalogo div[style*="15,23,42"],
html[data-color-mode="light"] #modalProveedorCatalogo div[style*="#0f172a"],
html[data-color-mode="light"] #catInlineRatingCard,
html[data-color-mode="light"] #widgetCalificacionCompra,
html[data-color-mode="light"] .name-alert-strip > div {
    background: #f1ede4 !important;
    background-image: none !important;
    border-color: rgba(28, 25, 23, 0.13) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] #modalCarrito button[style*="15,23,42"],
html[data-color-mode="light"] #modalCarrito button[style*="15, 23, 42"],
html[data-color-mode="light"] #modalCarrito button[style*="30,41,59"],
html[data-color-mode="light"] #modalCarrito button[style*="#0f172a"],
html[data-color-mode="light"] #modalCarrito button[style*="#1e293b"],
html[data-color-mode="light"] .swal2-popup button:not(.swal2-confirm)[style*="#1e293b"],
html[data-color-mode="light"] .swal2-popup button:not(.swal2-confirm)[style*="#0f172a"],
html[data-color-mode="light"] .swal2-popup button:not(.swal2-confirm)[style*="30,41,59"],
html[data-color-mode="light"] .swal2-popup button:not(.swal2-confirm)[style*="15,23,42"],
html[data-color-mode="light"] #modalProveedorCatalogo button[style*="#1e293b"],
html[data-color-mode="light"] #modalProveedorCatalogo button[style*="15,23,42"],
html[data-color-mode="light"] #modalOnboardingTour button#btnTourPrev {
    background: #ffffff !important;
    background-image: none !important;
    border-color: rgba(28, 25, 23, 0.16) !important;
    color: #292524 !important;
}
html[data-color-mode="light"] #modalReporte .btn-opcion-diagnostico {
    background: #f5f1e8 !important;
    border-color: rgba(28, 25, 23, 0.13) !important;
}
html[data-color-mode="light"] #modalReporte .btn-opcion-diagnostico b {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #modalBuzonSugerencias h3,
html[data-color-mode="light"] #modalBuzonSugerencias label,
html[data-color-mode="light"] #modalOnboardingTour h3 {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #vista-cuentas > div:first-child[style*="59,130,246"] {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}
html[data-color-mode="light"] #vista-cuentas > div:first-child[style*="59,130,246"] div {
    color: #1e3a8a !important;
}
html[data-color-mode="light"] #vista-cuentas > div:first-child[style*="59,130,246"] button {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}
html[data-color-mode="light"] .swal2-popup select[style*="#1e293b"],
html[data-color-mode="light"] .swal2-popup select[style*="#0f172a"],
html[data-color-mode="light"] .swal2-popup input[style*="#0f172a"],
html[data-color-mode="light"] .swal2-popup input[style*="#1e293b"],
html[data-color-mode="light"] .swal2-popup textarea[style*="#0f172a"],
html[data-color-mode="light"] .swal2-popup textarea[style*="#1e293b"],
html[data-color-mode="light"] .modal-renovacion-card select,
html[data-color-mode="light"] .modal-renovacion-card textarea,
html[data-color-mode="light"] .modal-renovacion-card input {
    background: #ffffff !important;
    border-color: rgba(28, 25, 23, 0.18) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#6ee7b7"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #6ee7b7"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#34d399"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #34d399"] {
    color: #065f46 !important;
}
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#fbbf24"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #fbbf24"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#fcd34d"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#fde68a"] {
    color: #92400e !important;
}
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#fca5a5"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#f87171"] {
    color: #b91c1c !important;
}
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#38bdf8"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#60a5fa"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#7dd3fc"] {
    color: #1d4ed8 !important;
}
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#c4b5fd"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#a78bfa"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#c084fc"] {
    color: #5b21b6 !important;
}
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#f8fafc"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #f8fafc"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#f1f5f9"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #f1f5f9"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#e2e8f0"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #e2e8f0"] {
    color: #1c1917 !important;
}
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#cbd5e1"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #cbd5e1"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color:#94a3b8"],
html[data-color-mode="light"] .swal2-popup :not(#flyerPreviewPhone *) [style*="color: #94a3b8"] {
    color: #57534e !important;
}

html[data-color-mode="light"] .cart-sheet-close,
html[data-color-mode="light"] .walk-close,
html[data-color-mode="light"] .modal-guias-close,
html[data-color-mode="light"] .modal-novedad-close,
html[data-color-mode="light"] .modal-renovacion-close,
html[data-color-mode="light"] #modalLoginPin button[onclick*="cerrarModalLoginPin"],
html[data-color-mode="light"] #btnCerrarPoliticasRev {
    background: #e9e4d9 !important;
    border-color: rgba(28, 25, 23, 0.14) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] #modalLoginPin input,
html[data-color-mode="light"] .walk-input,
html[data-color-mode="light"] .wk-input-field,
html[data-color-mode="light"] .buscador-input,
html[data-color-mode="light"] #modalCarrito input:not([type="checkbox"]):not([type="radio"]),
html[data-color-mode="light"] #modalCarrito select,
html[data-color-mode="light"] #modalReporteContent input,
html[data-color-mode="light"] #modalReporteContent textarea,
html[data-color-mode="light"] .swal2-input,
html[data-color-mode="light"] .swal2-select {
    background: #ffffff !important;
    border-color: rgba(28, 25, 23, 0.18) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] #modalLoginPin label,
html[data-color-mode="light"] .wk-field-label,
html[data-color-mode="light"] .wk-titular-txt,
html[data-color-mode="light"] .wk-titular-txt b,
html[data-color-mode="light"] #modalPoliticasRevendedor label,
html[data-color-mode="light"] #repPasoSelector b {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #pinStepClave > div:first-child,
html[data-color-mode="light"] .wk-unified-card,
html[data-color-mode="light"] .wk-account-item,
html[data-color-mode="light"] .wk-compact-notice,
html[data-color-mode="light"] #boxServicioReporte,
html[data-color-mode="light"] #modalPoliticasRevendedor > .modal-content > div > div {
    background: #f1ede4 !important;
    border-color: rgba(28, 25, 23, 0.11) !important;
    color: #292524 !important;
}
html[data-color-mode="light"] #modalPoliticasRevendedor > .modal-content > div > div div,
html[data-color-mode="light"] #modalPoliticasRevendedor > .modal-content > div > div b {
    color: #292524 !important;
}
html[data-color-mode="light"] .wk-chip,
html[data-color-mode="light"] .guia-tab-chip,
html[data-color-mode="light"] .guia-tool-btn {
    background: #ece7dc !important;
    border-color: rgba(28, 25, 23, 0.12) !important;
    color: #292524 !important;
}
html[data-color-mode="light"] .wk-chip.active,
html[data-color-mode="light"] .guia-tab-chip.active {
    background: #1c1917 !important;
    border-color: #1c1917 !important;
    color: #faf8f4 !important;
}
html[data-color-mode="light"] .wk-copy-pill {
    background: #ffffff !important;
    border-color: rgba(28, 25, 23, 0.16) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] .wk-acc-num,
html[data-color-mode="light"] .wk-amount-value {
    color: #1c1917 !important;
}
html[data-color-mode="light"] .wk-amount-label {
    color: #57534e !important;
}
html[data-color-mode="light"] .wk-btn-edit-monto {
    background: #ffffff !important;
    border-color: rgba(28, 25, 23, 0.16) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] .wk-plat-badge {
    color: #065f46 !important;
}
html[data-color-mode="light"] .btn-sel-urgentes {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}
html[data-color-mode="light"] .btn-mini-cred {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}
html[data-color-mode="light"] .btn-copy-all-mini {
    background: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
    color: #047857 !important;
}

/* Mis Pantallas (#vista-cuentas), Mis Pedidos (#vista-pedidos), Reportes (#vista-reportes) & Social Toast in Light Mode */
html[data-color-mode="light"] .cuenta-card,
html[data-color-mode="light"] .card-cuenta,
html[data-color-mode="light"] .item-compacto,
html[data-color-mode="light"] .item-reporte,
html[data-color-mode="light"] #barraMultiRenovCuentas,
html[data-color-mode="light"] #vista-cuentas > div[style*="dashed"],
html[data-color-mode="light"] #vista-pedidos > div[style*="dashed"],
html[data-color-mode="light"] #vista-reportes > div[style*="dashed"] {
    background: #faf8f4 !important;
    border-color: rgba(28, 25, 23, 0.11) !important;
    color: #1c1917 !important;
    box-shadow: var(--dp-shadow-card) !important;
}
html[data-color-mode="light"] .cred-row-interactive {
    background: #f1ede4 !important;
    border-color: rgba(28, 25, 23, 0.10) !important;
    color: #1c1917 !important;
}
html[data-color-mode="light"] .cs-pill {
    background: #faf8f4 !important;
    border-color: rgba(28, 25, 23, 0.12) !important;
    color: #44403c !important;
}
html[data-color-mode="light"] .cs-pill.active {
    background: #1c1917 !important;
    border-color: #1c1917 !important;
    color: #faf8f4 !important;
}
html[data-color-mode="light"] .cuenta-card h3,
html[data-color-mode="light"] .card-cuenta h3,
html[data-color-mode="light"] .card-cuenta [style*="color:#fff"],
html[data-color-mode="light"] .card-cuenta [style*="color: #fff"],
html[data-color-mode="light"] .card-cuenta [style*="color:#f8fafc"],
html[data-color-mode="light"] .card-cuenta [style*="color:#f1f5f9"],
html[data-color-mode="light"] .item-compacto [style*="color:#fff"],
html[data-color-mode="light"] .item-compacto [style*="color:#f8fafc"],
html[data-color-mode="light"] .item-reporte div[style*="color: white"],
html[data-color-mode="light"] #vista-cuentas p[style*="color: white"],
html[data-color-mode="light"] #vista-pedidos p[style*="color: white"],
html[data-color-mode="light"] #vista-reportes p[style*="color: white"] {
    color: #1c1917 !important;
}
html[data-color-mode="light"] .item-reporte span[style*="color:#cbd5e1"],
html[data-color-mode="light"] .item-reporte div[style*="color: #cbd5e1"] {
    color: #44403c !important;
}
#dpSocialToastCard {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
html[data-color-mode="light"] #dpSocialToastCard {
    background: rgba(250, 248, 244, 0.97) !important;
    border-color: rgba(28, 25, 23, 0.14) !important;
    color: #1c1917 !important;
    box-shadow: 0 10px 28px rgba(28, 25, 23, 0.12) !important;
}
html[data-color-mode="light"] footer {
    border-top-color: rgba(28, 25, 23, 0.10) !important;
}

/* 8. Payment Method Selector (Bre-B Predeterminado + Binance Pay USDT Sin QR) */
.dp-pay-method-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.dp-pay-tab-btn {
    border: 1.5px solid var(--dp-border-strong);
    background: var(--dp-surface);
    color: var(--dp-ink-2);
    border-radius: 12px;
    padding: 9px 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    transition: all 0.16s ease;
    position: relative;
}
.dp-pay-tab-btn.active-breb {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    color: var(--dp-ink);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.12);
}
.dp-pay-tab-btn.active-binance {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    color: var(--dp-ink);
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.14);
}
html[data-color-mode="light"] .dp-pay-tab-btn {
    background: #ffffff;
}
html[data-color-mode="light"] .dp-pay-tab-btn.active-breb {
    background: #e6f5ec;
    border-color: #059669;
}
html[data-color-mode="light"] .dp-pay-tab-btn.active-binance {
    background: #fef6df;
    border-color: #d97706;
}
.dp-pay-tab-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: var(--dp-surface-2);
}
.dp-pay-tab-tit {
    font-size: 12px;
    font-weight: 900;
    color: var(--dp-ink);
    line-height: 1.15;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-pay-tab-sub {
    font-size: 10px;
    font-weight: 700;
    color: var(--dp-ink-3);
    line-height: 1.2;
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 400px) {
    .dp-pay-method-tabs {
        gap: 6px;
    }
    .dp-pay-tab-btn {
        padding: 8px 7px;
        gap: 5px;
    }
    .dp-pay-tab-ico {
        width: 22px;
        height: 22px;
        font-size: 12px;
        border-radius: 6px;
    }
    .dp-pay-tab-tit {
        font-size: 11px;
        white-space: nowrap;
    }
    .dp-pay-tab-sub {
        font-size: 9.5px;
    }
    .dp-pay-check-dot {
        width: 15px;
        height: 15px;
        font-size: 9px;
    }
}
@media (max-width: 345px) {
    .dp-pay-tab-ico {
        display: none;
    }
}
.dp-pay-check-dot {
    margin-left: auto;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid var(--dp-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
    color: transparent;
}
.dp-pay-tab-btn.active-breb .dp-pay-check-dot {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}
.dp-pay-tab-btn.active-binance .dp-pay-check-dot {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0f172a;
}

.dp-binance-conv-box {
    background: var(--dp-surface-2);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 8px;
    margin-bottom: 10px;
    text-align: left;
}
html[data-color-mode="light"] .dp-binance-conv-box {
    background: #fdf6e7;
    border-color: #f59e0b;
}

/* 9. Unified 3-Step Checkout Wizard inside #modalCarrito */
.dp-cart-stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px 14px;
    background: var(--dp-surface-2);
    border-bottom: 1px solid var(--dp-border);
}
.dp-cstep-btn {
    border: 1px solid var(--dp-border);
    background: var(--dp-surface);
    color: var(--dp-ink-3);
    border-radius: 10px;
    padding: 7px 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.16s ease;
    white-space: nowrap;
}
.dp-cstep-num {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.18);
    color: var(--dp-ink-2);
    font-size: 10.5px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dp-cstep-btn.active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    color: var(--dp-ink);
}
.dp-cstep-btn.active .dp-cstep-num {
    background: #10b981;
    color: #ffffff;
}
.dp-cstep-btn.done {
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}
.dp-cstep-btn.done .dp-cstep-num {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}
html[data-color-mode="light"] .dp-cstep-btn.done {
    color: #065f46;
}

.dp-cart-item-card {
    background: var(--dp-surface-2);
    border: 1px solid var(--dp-border);
    border-radius: 13px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dp-dur-pills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    row-gap: 11px;
    margin-top: 8px;
}
.dp-dur-pill-btn {
    position: relative;
    flex: 1 1 0%;
    min-width: 72px;
    padding: 8px 8px 6px;
    border-radius: 9px;
    border: 1px solid var(--dp-border-strong);
    background: var(--dp-surface);
    color: var(--dp-ink-2);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    transition: all 0.14s ease;
}
.dp-dur-pill-btn.dp-dur-popular:not(.active) {
    border-color: rgba(245, 158, 11, 0.36);
}
html[data-color-mode="light"] .dp-dur-pill-btn.dp-dur-popular:not(.active) {
    border-color: rgba(217, 119, 6, 0.35);
}
.dp-dur-pill-pop-tag {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #192235;
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.42);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.1;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    pointer-events: none;
    z-index: 2;
}
.dp-dur-pill-btn.active .dp-dur-pill-pop-tag {
    background: #064e3b;
    color: #a7f3d0;
    border-color: #10b981;
}
html[data-color-mode="light"] .dp-dur-pill-pop-tag {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}
html[data-color-mode="light"] .dp-dur-pill-btn.active .dp-dur-pill-pop-tag {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}
@media (max-width: 360px) {
    .dp-dur-pill-pop-tag {
        font-size: 7.8px;
        padding: 1.5px 5px;
    }
}
.dp-dur-pill-btn.active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.13);
    color: var(--dp-ink);
    box-shadow: none;
}
html[data-color-mode="light"] .dp-dur-pill-btn.active {
    background: #e6f5ec;
    border-color: #059669;
    color: #065f46;
}
.dp-dur-pill-price {
    font-size: 10px;
    font-weight: 700;
    color: var(--dp-ink-3);
    font-variant-numeric: tabular-nums;
}
.dp-dur-pill-btn.active .dp-dur-pill-price {
    color: var(--dp-ink-2);
}
html[data-color-mode="light"] .dp-dur-pill-btn.active .dp-dur-pill-price {
    color: #065f46;
}
.dp-dur-pill-save {
    font-size: 9px;
    color: #10b981;
    font-weight: 800;
    background: rgba(16, 185, 129, 0.12);
    padding: 0 5px;
    border-radius: 999px;
}
html[data-color-mode="light"] .dp-dur-pill-save {
    color: #047857;
    background: #d1fae5;
}

/* 10. Calm, Zero-Noise Activation Fields (#camposDinamicosCarrito — YouTube / Gmail / Plex / Emby) */
#camposDinamicosCarrito .dp-act-card {
    background: var(--dp-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--dp-border-strong) !important;
    border-radius: 13px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
}
#camposDinamicosCarrito .dp-act-kicker {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--dp-ink) !important;
    margin-bottom: 6px !important;
}
#camposDinamicosCarrito .dp-yt-mode-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
}
#camposDinamicosCarrito .dp-yt-mode-btn {
    padding: 7px 9px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: left !important;
    line-height: 1.25 !important;
    font-family: inherit !important;
    background: var(--dp-surface) !important;
    background-image: none !important;
    border: 1px solid var(--dp-border-strong) !important;
    color: var(--dp-ink-2) !important;
    transition: all 0.14s ease !important;
}
#camposDinamicosCarrito .dp-yt-mode-btn b {
    color: inherit !important;
}
#camposDinamicosCarrito .dp-yt-mode-btn.is-selected {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: #10b981 !important;
    color: #6ee7b7 !important;
    font-weight: 800 !important;
}
html[data-color-mode="light"] #camposDinamicosCarrito .dp-yt-mode-btn {
    background: #ffffff !important;
    border-color: rgba(28, 25, 23, 0.15) !important;
    color: #44403c !important;
}
html[data-color-mode="light"] #camposDinamicosCarrito .dp-yt-mode-btn.is-selected {
    background: #e6f5ec !important;
    border-color: #059669 !important;
    color: #065f46 !important;
}
#camposDinamicosCarrito .dp-yt-helper-note {
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 8px !important;
    padding: 6px 9px !important;
    font-size: 10.5px !important;
    color: var(--dp-ink-2) !important;
    line-height: 1.35 !important;
}
#camposDinamicosCarrito .dp-yt-helper-note b {
    color: var(--dp-ink) !important;
}
#camposDinamicosCarrito .dp-yt-helper-note a {
    color: var(--dp-accent) !important;
    font-weight: 700 !important;
}
#camposDinamicosCarrito .dp-act-label {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: var(--dp-ink) !important;
}
#camposDinamicosCarrito .dp-act-label b {
    color: var(--dp-accent) !important;
}
#camposDinamicosCarrito .dp-act-input {
    width: 100% !important;
    padding: 9px 12px !important;
    background: var(--dp-surface) !important;
    border: 1.5px solid var(--dp-border-strong) !important;
    border-radius: 9px !important;
    color: var(--dp-ink) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    outline: none !important;
    box-sizing: border-box !important;
}
#camposDinamicosCarrito .dp-act-input:focus {
    border-color: var(--dp-accent) !important;
}
#camposDinamicosCarrito .dp-act-input.is-confirmed {
    border-color: #10b981 !important;
}
#camposDinamicosCarrito .dp-act-input.is-step2 {
    border-color: #f59e0b !important;
}
#camposDinamicosCarrito .dp-act-input.is-error {
    border-color: #ef4444 !important;
}
#camposDinamicosCarrito .dp-act-reset-btn {
    background: var(--dp-surface) !important;
    border: 1px solid var(--dp-border-strong) !important;
    color: var(--dp-ink-2) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}
#camposDinamicosCarrito .dp-act-info-note {
    background: var(--dp-surface-2) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 10px !important;
    padding: 7px 10px !important;
    margin-bottom: 7px !important;
    font-size: 11px !important;
    color: var(--dp-ink-2) !important;
    line-height: 1.35 !important;
}
#camposDinamicosCarrito .dp-act-info-note b {
    color: var(--dp-ink) !important;
}

/* Quiet 1-line delivery caption instead of a green box */
#avisoPantallaCarrito {
    background: transparent !important;
    border: none !important;
    padding: 2px 2px 0 !important;
    margin-top: 4px !important;
}
#avisoPantallaCarrito > div {
    font-size: 11px !important;
    color: var(--dp-ink-3) !important;
}

/* 11. Calm, Crystal-Clear Optional Combo / Cross-Sell Suggestion (.dp-calm-upsell & .sug-sheet) */
.dp-calm-upsell {
    background: var(--dp-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--dp-border-strong) !important;
    border-radius: 13px !important;
    padding: 10px 12px !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dp-calm-upsell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.dp-calm-upsell-kicker {
    font-size: 11px;
    font-weight: 800;
    color: var(--dp-ink);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.dp-calm-upsell-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dp-calm-upsell-save {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.24);
    white-space: nowrap;
}
html[data-color-mode="light"] .dp-calm-upsell-save {
    background: #e6f5ec;
    color: #065f46;
    border-color: #a7f3d0;
}
.dp-calm-upsell-close {
    border: none;
    background: transparent;
    color: var(--dp-ink-3);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.dp-calm-upsell-desc {
    font-size: 11.5px;
    color: var(--dp-ink-2);
    line-height: 1.4;
}
.dp-calm-upsell-desc b {
    color: var(--dp-ink);
    font-weight: 800;
}
.dp-calm-upsell-btn {
    width: 100%;
    padding: 7.5px 11px;
    border-radius: 9px;
    border: 1px solid var(--dp-border-strong);
    background: var(--dp-surface);
    color: var(--dp-ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.14s ease;
}
.dp-calm-upsell-btn:hover {
    border-color: var(--dp-accent);
    color: var(--dp-accent);
}
.dp-calm-upsell-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 11px !important;
}
.dp-calm-upsell-inline .dp-calm-upsell-btn {
    width: auto;
    flex-shrink: 0;
    padding: 6px 11px;
}

/* Catalog bottom suggestion toast (.sug-sheet) in Dark & Light modes */
.sug-sheet {
    background: var(--dp-surface) !important;
    background-image: none !important;
    border: 1px solid var(--dp-border-strong) !important;
    color: var(--dp-ink) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30) !important;
}
.sug-sheet .sug-added,
.sug-sheet .sug-name {
    color: var(--dp-ink) !important;
}
.sug-sheet .sug-kicker,
.sug-sheet .sug-name small {
    color: var(--dp-ink-2) !important;
}
.sug-sheet .sug-close {
    background: var(--dp-surface-2) !important;
    color: var(--dp-ink-2) !important;
    border: 1px solid var(--dp-border) !important;
}

.dp-dest-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.dp-dest-cards-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 400px) {
    .dp-dest-cards-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}
.dp-dest-choice-card {
    border: 1.5px solid var(--dp-border-strong);
    background: var(--dp-surface);
    color: var(--dp-ink);
    border-radius: 13px;
    padding: 11px 9px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.dp-dest-choice-card.active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.12);
}
.dp-dest-choice-ico {
    font-size: 20px;
    line-height: 1;
}
.dp-dest-choice-tit {
    font-size: 12px;
    font-weight: 900;
    color: var(--dp-ink);
}
.dp-dest-choice-sub {
    font-size: 10px;
    color: var(--dp-ink-3);
    line-height: 1.25;
}

.dp-inline-breb-box {
    background: var(--dp-surface-2);
    border: 1.5px solid rgba(16, 185, 129, 0.38);
    border-radius: 14px;
    padding: 12px;
    text-align: left;
}
.dp-inline-breb-box.is-binance-mode {
    border-color: rgba(245, 158, 11, 0.50);
}
.dp-inline-key-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--dp-surface);
    border: 1px dashed var(--dp-border-strong);
    margin-bottom: 6px;
}
.dp-step-primary-btn {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.dp-step-primary-btn.is-binance-cta {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}
.dp-step-back-btn {
    padding: 10px 13px;
    border-radius: 11px;
    border: 1px solid var(--dp-border-strong);
    background: var(--dp-surface);
    color: var(--dp-ink-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
}

/* Step 3 full scrollability on compact phones, open virtual keyboards & landscape */
#modalCarrito.is-step-3 .cart-sheet-body {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 4px !important;
}
#modalCarrito.is-step-3 .cart-sheet-footer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@media (max-height: 540px) {
    #modalCarrito .cart-sheet-content {
        max-height: 95dvh !important;
    }
    #modalCarrito .cart-sheet-header {
        padding: 8px 14px !important;
    }
    #modalCarrito .dp-cart-stepper {
        padding: 6px 12px !important;
    }
}

/* 12. Silence Legacy 4-Step Neon Live-Coach Spotlight HUD & Guide Bar (replaced by clean 3-Step Compra Rápida) */
#dpLiveCoachHud,
#dpLivePointerBadge,
#dpSpotlightCutout,
#dpSpotlightBackdrop,
#dpSpotlightTooltip,
#dpLiveCoachPill,
#dpBarraGuiaPasoAPaso,
.dp-barra-guia,
#barraGuiaPasoAPaso {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.dp-live-btn-comprar-glow,
.dp-live-target-glow-green {
    box-shadow: none !important;
    animation: none !important;
}

/* Calm Promo Banner (#promoVixBanner) in Light Mode when enabled from Admin */
html[data-color-mode="light"] #promoVixBanner .promo-banner-card {
    background: #faf8f4 !important;
    background-image: none !important;
    border-color: rgba(28, 25, 23, 0.14) !important;
    box-shadow: 0 6px 20px rgba(28, 25, 23, 0.06) !important;
}
html[data-color-mode="light"] #promoVixBanner .promo-heading,
html[data-color-mode="light"] #promoVixBanner .promo-price-main {
    color: #1c1917 !important;
}
html[data-color-mode="light"] #promoVixBanner .promo-subheading,
html[data-color-mode="light"] #promoVixBanner .promo-price-old {
    color: #57534e !important;
}
    /* 🎨 MEJORAS DE CONVERSIÓN, RENDIMIENTO Y UX (#1, #2, #3, #4, #6, #8, #9, #11, #12, #14, #15) */
    .product-card {
        content-visibility: auto;
        contain-intrinsic-size: 0 320px;
    }
    .card-cuenta, .item-compacto {
        content-visibility: visible !important;
    }
    .quick-filters-bar {
        display: flex;
        align-items: center;
        gap: 7px;
        overflow-x: auto;
        padding: 4px 2px 10px 2px;
        margin-bottom: 6px;
        scrollbar-width: none;
    }
    .quick-filters-bar::-webkit-scrollbar { display: none; }
    .qf-pill {
        flex-shrink: 0;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 800;
        border: 1px solid rgba(148, 163, 184, 0.25);
        background: rgba(15, 23, 42, 0.72);
        color: #cbd5e1;
        cursor: pointer;
        transition: all 0.18s ease;
    }
    .qf-pill:hover { border-color: rgba(56, 189, 248, 0.5); color: #fff; }
    .qf-pill.active {
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        border-color: #60a5fa;
        color: #fff;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    }
    .product-card {
        display: flex;
        flex-direction: column;
    }
    .product-card:not(.dp-svc-card) .card-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .month-pills-row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px;
        height: 34px;
        box-sizing: border-box;
        margin: 6px 0 8px 0;
        background: rgba(15, 23, 42, 0.72);
        padding: 3px;
        border-radius: 9px;
        border: 1px solid rgba(148, 163, 184, 0.18);
    }
    .month-pills-single-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        box-sizing: border-box;
        margin: 6px 0 8px 0;
        padding: 0 8px;
        border-radius: 9px;
        background: rgba(139, 92, 246, 0.12);
        border: 1px solid rgba(139, 92, 246, 0.28);
        color: #c4b5fd;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mp-pill {
        flex: 1 1 0;
        min-width: 0;
        height: 26px;
        border: 1px solid transparent;
        background: transparent;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 800;
        padding: 0 3px;
        border-radius: 7px;
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        white-space: nowrap;
        overflow: hidden;
    }
    .mp-pill.mp-pill-agotado {
        opacity: 0.55;
        color: #64748b;
    }
    .mp-stk-pill {
        font-size: 8.5px;
        font-weight: 800;
        color: #34d399;
        flex-shrink: 0;
    }
    .mp-stk-pill.agotado {
        color: #f87171;
    }
    .mp-pill.active {
        background: rgba(16, 185, 129, 0.22);
        color: #34d399;
        border-color: rgba(16, 185, 129, 0.45);
    }
    .mp-more-btn {
        background: rgba(99, 102, 241, 0.14);
        border: 1px solid rgba(129, 140, 248, 0.35);
        color: #c7d2fe;
    }
    .mp-more-btn:hover {
        background: rgba(99, 102, 241, 0.25);
        color: #fff;
    }
    .mp-popover-menu {
        position: absolute;
        bottom: calc(100% + 6px);
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.97);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(99, 102, 241, 0.45);
        border-radius: 12px;
        padding: 8px;
        z-index: 60;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
    }
    .mp-popover-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 10.5px;
        font-weight: 800;
        color: #93c5fd;
        margin-bottom: 6px;
        padding: 0 2px;
    }
    .mp-popover-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    .mp-pop-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 5px 4px;
        border-radius: 8px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        background: rgba(30, 41, 59, 0.75);
        cursor: pointer;
        transition: all 0.14s ease;
    }
    .mp-pop-item:hover {
        border-color: rgba(56, 189, 248, 0.55);
        background: rgba(30, 41, 59, 0.95);
    }
    .mp-pop-item.active {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.6);
    }
    .mp-pop-dur {
        font-size: 10.5px;
        font-weight: 800;
        color: #f8fafc;
    }
    .mp-pop-item.active .mp-pop-dur {
        color: #34d399;
    }
    .mp-pop-price {
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
    }
    .mp-pop-item.active .mp-pop-price {
        color: #a7f3d0;
    }
    .mp-save {
        background: #10b981;
        color: #052e16;
        font-size: 8px;
        font-weight: 900;
        padding: 1px 3px;
        border-radius: 4px;
        flex-shrink: 0;
    }
    .btn-encargo-preventa {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        color: #0f172a !important;
        font-weight: 900 !important;
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
        font-size: 12px !important;
    }
    .btn-cotizar-rev {
        width: 100%;
        margin-top: 6px;
        padding: 7px 10px;
        border-radius: 9px;
        border: 1px dashed rgba(56, 189, 248, 0.45);
        background: rgba(14, 165, 233, 0.1);
        color: #7dd3fc;
        font-size: 11.5px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.16s ease;
    }
    .btn-cotizar-rev:hover {
        background: rgba(14, 165, 233, 0.2);
        border-color: #38bdf8;
        color: #fff;
    }
    .blink-scarcity {
        animation: pulseScarcity 2s infinite;
    }
    @keyframes pulseScarcity {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.04); }
    }
    .cuentas-status-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
    }
    .cuentas-status-pills {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .cs-pill {
        flex-shrink: 0;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 800;
        border: 1px solid rgba(148, 163, 184, 0.25);
        background: rgba(15, 23, 42, 0.75);
        color: #cbd5e1;
        cursor: pointer;
    }
    .cs-pill.active {
        background: #3b82f6;
        border-color: #60a5fa;
        color: #fff;
    }
    .btn-sel-urgentes {
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 800;
        border: 1px solid rgba(245, 158, 11, 0.5);
        background: rgba(245, 158, 11, 0.15);
        color: #fde047;
        cursor: pointer;
    }
    .chk-multirenov {
        width: 17px;
        height: 17px;
        accent-color: #10b981;
        cursor: pointer;
    }
    .grid-cuentas,
    #vista-cuentas .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important;
        gap: 18px !important;
    }
    @media (max-width: 720px) {
        .grid-cuentas,
        #vista-cuentas .grid,
        body:not(.mobile-grid-1col) #vista-cuentas .grid {
            grid-template-columns: 1fr !important;
            gap: 14px !important;
        }
        body:not(.mobile-grid-1col) #vista-cuentas .card-cuenta {
            padding: 16px !important;
        }
    }
    .card-cuenta {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .cred-row-interactive {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 9px;
        padding: 7px 10px;
        margin-bottom: 8px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .cred-row-interactive > div:first-child {
        flex: 1 1 0%;
        min-width: 0;
    }
    .cred-row-interactive .copy-txt,
    .card-cuenta .copy-txt,
    .item-compacto .copy-txt {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: break-all;
        white-space: normal;
    }
    .btn-mini-cred {
        background: rgba(59, 130, 246, 0.16);
        border: 1px solid rgba(59, 130, 246, 0.35);
        color: #93c5fd;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 8px;
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .btn-copy-all-mini {
        background: rgba(16, 185, 129, 0.15);
        border: 1px solid rgba(16, 185, 129, 0.35);
        color: #6ee7b7;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 9px;
        border-radius: 7px;
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
    }
.dp-live-header-pill {
    max-width: 1100px;
    margin: 4px auto 6px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11.5px;
    color: #cbd5e1;
    text-align: center;
    line-height: 1.35;
    user-select: none;
}
.dp-live-header-pill b {
    color: #34d399;
    font-weight: 800;
}
.dp-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    flex-shrink: 0;
    animation: dpLiveDotPulse 1.8s infinite ease-in-out;
}
@keyframes dpLiveDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.65; }
}
.dp-social-toast-wrap {
    position: fixed;
    left: 16px;
    bottom: 20px;
    z-index: 9920;
    max-width: 288px;
    width: calc(100vw - 32px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.dp-social-toast-wrap.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
body.modal-open .dp-social-toast-wrap {
    display: none !important;
}
.dp-social-toast-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(9, 14, 28, 0.97));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(16, 185, 129, 0.38);
    border-radius: 14px;
    padding: 9px 11px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    pointer-events: auto;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.dp-social-toast-wrap:not(.show) .dp-social-toast-card {
    pointer-events: none;
}
.dp-social-toast-card:hover {
    border-color: rgba(52, 211, 153, 0.68);
}
.dp-social-toast-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(16, 185, 129, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 3px;
}
.dp-social-toast-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.dp-social-toast-prog {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2.5px;
    width: 100%;
    background: linear-gradient(90deg, #10b981, #38bdf8);
    transform-origin: left center;
    transform: scaleX(0);
}
.dp-social-toast-wrap.show .dp-social-toast-prog.run {
    animation: dpToastProgDrain var(--pd-dur, 7s) linear forwards;
}
.dp-social-toast-card:hover .dp-social-toast-prog.run {
    animation-play-state: paused;
}
@keyframes dpToastProgDrain {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}
.dp-social-toast-body {
    flex: 1;
    min-width: 0;
    line-height: 1.28;
}
.dp-social-toast-title {
    font-size: 11.5px;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-social-toast-title b {
    color: #38bdf8;
    font-weight: 800;
}
.dp-social-toast-sub {
    font-size: 10.5px;
    color: #6ee7b7;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dp-social-toast-close {
    pointer-events: auto;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.dp-social-toast-close:hover {
    color: #cbd5e1;
}
@media (max-width: 768px) {
    .dp-social-toast-wrap {
        left: 12px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        max-width: min(274px, calc(100vw - 24px));
    }
}

/* ============================================================================
   14. CRO CHECKOUT UPGRADE: REAL BRAND LOGOS, COMBO STACK & IN-MODAL QUICK ADD
   ============================================================================ */
.dp-cart-item-logo {
    width: var(--dp-clogo-sz, 28px);
    height: var(--dp-clogo-sz, 28px);
    border-radius: 7px;
    flex-shrink: 0;
    background: #0f172a;
    border: 1px solid rgba(var(--svc-rgb, 148, 163, 184), 0.36);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
html[data-color-mode="light"] .dp-cart-item-logo {
    background: #0f172a;
    border-color: rgba(var(--svc-rgb, 100, 116, 139), 0.42);
}
.dp-cart-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dp-cart-item-logo.is-logo-contain img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}
.dp-cart-logo-mono {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(var(--svc-rgb, 59, 130, 246), 0.45), rgba(15, 23, 42, 0.95));
    letter-spacing: -0.02em;
}
.dp-combo-logo-stack {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    vertical-align: middle;
}
.dp-combo-logo-stack .dp-cart-item-logo {
    border-radius: 6px;
    border: 1.5px solid #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
html[data-color-mode="light"] .dp-combo-logo-stack .dp-cart-item-logo {
    border-color: #ffffff;
}
.dp-combo-logo-stack .dp-cart-item-logo + .dp-cart-item-logo {
    margin-left: -6px;
}
.dp-combo-stack-more {
    margin-left: -5px;
    height: 22px;
    min-width: 22px;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border-strong);
    color: var(--dp-ink-2);
    font-size: 9.5px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.dp-goal-quickadd-pill {
    border: 1px solid rgba(16, 185, 129, 0.38);
    background: rgba(16, 185, 129, 0.13);
    color: #34d399;
    border-radius: 999px;
    padding: 3px 9px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.14s ease;
}
.dp-goal-quickadd-pill:hover {
    background: rgba(16, 185, 129, 0.22);
}
html[data-color-mode="light"] .dp-goal-quickadd-pill {
    background: #ecfdf5;
    color: #047857;
    border-color: #6ee7b7;
}

.dp-footer-quickadd-btn {
    border: 1px solid var(--dp-border-strong);
    background: var(--dp-surface-2);
    color: var(--dp-ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.dp-footer-quickadd-btn:hover,
.dp-footer-quickadd-btn.is-open {
    border-color: rgba(56, 189, 248, 0.55);
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.10);
}
html[data-color-mode="light"] .dp-footer-quickadd-btn:hover,
html[data-color-mode="light"] .dp-footer-quickadd-btn.is-open {
    border-color: #0284c7;
    color: #0369a1;
    background: #f0f9ff;
}

.dp-qadd-drawer {
    background: var(--dp-surface-2);
    border: 1.5px solid rgba(56, 189, 248, 0.35);
    border-radius: 13px;
    padding: 9px 10px;
    margin-bottom: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
html[data-color-mode="light"] .dp-qadd-drawer {
    border-color: #7dd3fc;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.dp-qadd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}
.dp-qadd-title {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--dp-ink);
    line-height: 1.25;
}
.dp-qadd-title b {
    color: #34d399;
}
html[data-color-mode="light"] .dp-qadd-title b {
    color: #059669;
}
.dp-qadd-close {
    border: none;
    background: rgba(148, 163, 184, 0.14);
    color: var(--dp-ink-2);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
}
.dp-qadd-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 7px;
}
.dp-qadd-search-wrap {
    position: relative;
}
.dp-qadd-search-inp {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px 6px 28px;
    border-radius: 9px;
    border: 1px solid var(--dp-border-strong);
    background: var(--dp-surface);
    color: var(--dp-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    outline: none;
}
@media (min-width: 769px) {
    .dp-qadd-search-inp {
        font-size: 12.5px;
        padding: 6.5px 10px 6.5px 28px;
    }
}
.dp-qadd-search-inp:focus {
    border-color: #38bdf8;
}
.dp-qadd-chips {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
}
.dp-qadd-chips::-webkit-scrollbar {
    display: none;
}
.dp-qadd-chip {
    border: 1px solid var(--dp-border-strong);
    background: var(--dp-surface);
    color: var(--dp-ink-2);
    border-radius: 999px;
    padding: 3.5px 9px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.dp-qadd-chip.active {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.55);
    color: #7dd3fc;
}
html[data-color-mode="light"] .dp-qadd-chip.active {
    background: #e0f2fe;
    border-color: #0284c7;
    color: #0369a1;
}
.dp-qadd-list {
    max-height: 192px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 2px;
}
.dp-qadd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 9px;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
}
.dp-qadd-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.dp-qadd-row-info {
    min-width: 0;
    flex: 1;
}
.dp-qadd-row-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--dp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.dp-qadd-row-sub {
    font-size: 10.5px;
    color: var(--dp-ink-3);
    line-height: 1.25;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-qadd-row-sub b {
    color: #34d399;
    font-weight: 800;
}
html[data-color-mode="light"] .dp-qadd-row-sub b {
    color: #059669;
}
.dp-qadd-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dp-qadd-price-col {
    text-align: right;
    line-height: 1.1;
}
.dp-qadd-price-now {
    font-size: 12px;
    font-weight: 900;
    color: var(--dp-ink);
    display: block;
}
.dp-qadd-price-old {
    font-size: 9.5px;
    color: var(--dp-ink-3);
    text-decoration: line-through;
    display: block;
}
.dp-qadd-add-btn {
    border: 1px solid rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border-radius: 8px;
    padding: 5.5px 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.14s ease;
}
.dp-qadd-add-btn:hover {
    background: rgba(16, 185, 129, 0.22);
}
.dp-qadd-add-btn.is-added {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}
html[data-color-mode="light"] .dp-qadd-add-btn {
    background: #ecfdf5;
    border-color: #34d399;
    color: #047857;
}
html[data-color-mode="light"] .dp-qadd-add-btn.is-added {
    background: #059669;
    color: #ffffff;
}
.dp-qadd-foot {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dashed var(--dp-border);
    display: flex;
    justify-content: center;
}
.dp-qadd-fullcat-link {
    border: none;
    background: transparent;
    color: var(--dp-ink-3);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 2px 6px;
}

/* =====================================================================
   📱 BLINDAJE RESPONSIVO iOS WEBKIT (CERO AUTO-ZOOM AL TOCAR INPUTS)
   Y BOTTOM-SHEET 100% DE BORDE A BORDE EN MÓVIL (320px - 768px)
   ===================================================================== */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    html body #modalCarrito #camposDinamicosCarrito .dp-act-input,
    html body #camposDinamicosCarrito .dp-act-input,
    html body #modalCarrito input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([maxlength="4"]),
    html body input[id]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([maxlength="4"]),
    html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([maxlength="4"]),
    html body select[id],
    html body select,
    html body textarea[id],
    html body textarea {
        font-size: 16px !important;
    }
}

@media (max-width: 640px) {
    #modalCarrito.modal.modal-bottom-sheet {
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    #modalCarrito .cart-sheet-content {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        max-height: min(90vh, 100dvh) !important;
        box-sizing: border-box !important;
    }
}

#modalCarrito .cart-sheet-body,
#modalCarrito .cart-sheet-footer,
#modalCarrito #dpCartStep1Wrap,
#modalCarrito #dpCartStep2Wrap,
#modalCarrito #camposDinamicosCarrito,
#modalCarrito .dp-cart-item-card,
#modalCarrito .dp-dur-pills-grid {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    #dpTopCombosQuickStrip .dp-combos-strip-badge {
        display: none !important;
    }
}