/* Ocultar scrollbar pero mantener funcionalidad */
        #thumbnails-container {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* Internet Explorer 10+ */
            padding-bottom: 10px !important; /* Asegurar espacio suficiente abajo */
            margin-bottom: 10px;
        }
        #thumbnails-container::-webkit-scrollbar {
            display: none; /* WebKit */
        }
        
        /* Mejorar la transición de las miniaturas con GPU acceleration */
        .thumbnail-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform, box-shadow;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
        .thumbnail-item:hover {
            transform: scale(1.05) translateZ(0);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .thumbnail-item.active {
            transform: scale(1.02) translateZ(0);
            box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.3);
        }
        
        /* Indicadores de scroll mejorados con gradientes */
        .scroll-gradient-left {
            background: linear-gradient(to right, rgba(255, 255, 255, 0.95), transparent);
            transition: width 0.3s ease, opacity 0.3s ease;
            pointer-events: none;
        }
        
        .scroll-gradient-right {
            background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
            transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;
        }
        
        /* Imagen principal 1:1 */
        .main-image-container {
            padding-bottom: 100%; /* Proporción 1:1 cuadrada */
        }
        
        /* Grid: galería más pequeña para dar más espacio al contenido */
        @media (min-width: 1024px) {
            .product-detail-layout {
                grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
            }
        }
        
        /* Responsive para la galerÍ­a */
        @media (min-width: 1024px) {
            .product-gallery {
                position: static;
                height: fit-content;
                max-height: calc(100vh - 4rem);
                max-height: calc(100dvh - 4rem);
                overflow: visible; /* Cambiar a visible para evitar recortes */
            }
            
            .main-image-container {
                padding-bottom: 100%; /* 1:1 en desktop */
            }
            
            /* Mejorar el espaciado en desktop */
            #thumbnails-container {
                padding: 0.5rem 0 1.5rem 0;
                gap: 0.75rem;
                margin-bottom: 0.5rem;
                overflow-y: visible !important; /* Asegurar que el contenido no se recorte verticalmente */
            }
            
            .thumbnail-item {
                min-width: 4rem;
                min-height: 4rem;
            }
        }
        
        /* Mejorar la visualización en pantallas grandes */
        @media (min-width: 1280px) {
            .thumbnail-item {
                min-width: 4.5rem;
                min-height: 4.5rem;
            }
        }
        
        /* Asegurar que las miniaturas mantengan su aspecto cuadrado */
        .thumbnail-item {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 0.25rem;
        }
        
        /* Animación suave para el cambio de media con GPU acceleration */
        #main-media-container img,
        #main-media-container video {
            transition: opacity 0.3s ease-in-out, transform 0.3s ease;
            will-change: opacity, transform;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
        /* Mejorar la apariencia del contador */
        .media-counter {
            backdrop-filter: blur(8px);
            background: rgba(0, 0, 0, 0.7);
        }
        
        /* Optimizaciones del modal de imagen con GPU acceleration */
        #image-modal {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: opacity 0.3s ease;
        }
        
        #modal-image {
            will-change: transform, opacity;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
        /* Botones del modal con GPU acceleration */
        #image-modal button {
            will-change: transform, opacity;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }
        
        #image-modal button:hover {
            transform: scale(1.1) translateZ(0);
        }
        
        /* Skeleton loading optimizado */
        #modal-skeleton {
            will-change: opacity;
            animation: pulse-skeleton 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse-skeleton {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        
        /* Estilos para la UI mejorada del producto */
        article[itemscope][itemtype="https://schema.org/Product"] {
            background: transparent !important;
            box-shadow: none !important;
        }

        .product-detail-layout {
            display: grid;
            min-width: 0;
            width: 100%;
            gap: clamp(1rem, 2vw, 1.5rem) !important;
            align-items: start;
            background: var(--color-surface-primary);
            border: 1px solid rgba(var(--color-outline-rgb), 0.42);
            border-radius: 16px;
            padding: clamp(0.75rem, 1.6vw, 1.25rem);
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .product-gallery {
            min-width: 0;
        }

        .product-gallery > .relative.w-full {
            margin: 0 !important;
            border-radius: 14px !important;
            background: var(--color-surface-secondary) !important;
            border: 1px solid rgba(var(--color-outline-rgb), 0.36);
            box-shadow: none !important;
            overflow: hidden;
        }

        .product-gallery .main-image-container {
            background: var(--color-surface-secondary) !important;
        }

        .product-detail-container {
            display: flex;
            flex-direction: column;
            gap: clamp(1rem, 2vw, 1.5rem);
            min-width: 0;
            width: 100%;
            padding: clamp(0.5rem, 1.3vw, 1.25rem);
            background: transparent;
            animation: fadeInUp 0.6s ease-out;
        }

        .product-detail-container.space-y-6 > :not([hidden]) ~ :not([hidden]) {
            --tw-space-y-reverse: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        .product-detail-container h1 {
            color: var(--color-text-primary) !important;
            margin: 0;
            max-width: min(100%, 44rem);
        }

        .product-detail-container .product-info-pricing {
            gap: clamp(1rem, 1.8vw, 1.35rem);
        }

        .product-actions-wrap {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        .product-detail-container > .mt-6,
        .product-detail-container .space-y-6 > .mt-6,
        .product-detail-container > .mb-4 {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        .product-detail-container h3 {
            color: var(--color-text-primary) !important;
            font-size: var(--font-size-lg) !important;
            line-height: 1.25;
            margin-bottom: 0.5rem !important;
        }

        .product-detail-container p,
        .product-detail-container li,
        .product-detail-container .leading-relaxed {
            color: var(--color-text-secondary) !important;
        }

        .product-detail-container .text-center.text-sm.text-gray-500,
        .product-detail-container .text-gray-500,
        .product-detail-container .text-gray-600,
        .product-detail-container .text-gray-700 {
            color: var(--color-text-secondary) !important;
        }

        .product-detail-container .text-gray-900,
        .product-detail-container .text-gray-800 {
            color: var(--color-text-primary) !important;
        }

        .product-detail-container .bg-gray-50,
        .product-detail-container .bg-gray-100 {
            background: var(--color-surface-secondary) !important;
            border-color: rgba(var(--color-outline-rgb), 0.28) !important;
            color: var(--color-text-secondary) !important;
        }

        .product-detail-container .text-purple-500,
        .product-detail-container .text-purple-600,
        .product-detail-container .text-purple-700,
        .product-detail-container .text-indigo-600,
        .product-detail-container .text-indigo-700 {
            color: var(--color-primary) !important;
        }

        .product-detail-container .border-gray-100,
        .product-detail-container .border-gray-200,
        .product-detail-container .border-gray-300 {
            border-color: rgba(var(--color-outline-rgb), 0.28) !important;
        }

        .product-detail-container .bg-gray-900 {
            background: var(--color-primary) !important;
            color: var(--color-on-primary) !important;
        }

        #product-codes-section,
        .product-code-inline {
            width: fit-content;
            max-width: 100%;
            background: transparent !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            overflow: visible !important;
        }

        #product-codigo-row,
        .product-code-row {
            min-height: 0;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 0.5rem;
            padding: 0 !important;
        }

        #product-codigo-row > .flex {
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.42rem !important;
        }

        #product-codigo-row .w-10 {
            width: auto !important;
            height: auto !important;
            background: transparent !important;
            border-radius: 0 !important;
        }

        #product-codigo-row .w-10 i {
            color: var(--color-text-tertiary) !important;
            font-size: 0.78rem;
            opacity: 0.75;
        }

        #product-codigo-row > .flex > div:last-child {
            display: inline-flex !important;
            align-items: baseline !important;
            gap: 0.4rem !important;
        }

        #product-codigo-row p {
            margin: 0 !important;
            line-height: 1 !important;
        }

        #product-codigo-row p:first-child {
            color: var(--color-text-tertiary) !important;
            font-size: var(--font-size-xs) !important;
            font-weight: 600 !important;
        }

        #product-codigo-row #product-codigo-almacen-value {
            color: var(--color-text-secondary) !important;
            font-size: var(--font-size-sm) !important;
            font-weight: 700 !important;
            overflow-wrap: anywhere;
        }

        #product-codigo-row > button {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 1.85rem;
            height: 1.85rem;
            padding: 0 !important;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            color: var(--color-text-tertiary) !important;
            transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        }

        #product-codigo-row > button:hover {
            background: rgba(var(--color-outline-rgb), 0.14);
            border-color: rgba(var(--color-outline-rgb), 0.18);
            color: var(--color-text-primary) !important;
        }

        @media (min-width: 1024px) {
            .product-detail-container {
                padding-left: clamp(0.75rem, 1.4vw, 1.5rem);
                padding-right: clamp(0.75rem, 1.4vw, 1.5rem);
            }
        }

        @media (max-width: 1023px) {
            .product-detail-layout {
                display: flex;
                flex-direction: column;
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Efectos hover mejorados para botones */
        .btn-primary {
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .btn-primary:hover::before {
            left: 100%;
        }
        
        /* Mejoras para las tarjetas de información */
        .info-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .info-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        /* Badges del header del producto: sin card/fondo, estilo limpio */
        .product-header-badges {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0;
        }
        .product-header-badges .product-header-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0;
            border-radius: 0;
            font-size: 0.6875rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            text-decoration: none;
            border: none;
            background: transparent;
            color: #6b7280;
        }
        .product-header-badge--link:hover {
            color: #374151;
        }
        .product-header-badge--link .breadcrumb-icon {
            margin-right: 0.25rem;
        }
        
        /* Badges de producto: minimalistas, sin colores recargados */
        .product-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            font-size: 0.6875rem;
            font-weight: 500;
            letter-spacing: 0.02em;
        }
        
        .product-badge--new,
        .product-badge--featured {
            background: #f3f4f6;
            color: #6b7280;
            border: 1px solid #e5e7eb;
        }
        
        /* Mejoras para el contador de tiempo */
        .countdown-item {
            animation: countdownPulse 1s ease-in-out infinite;
        }
        
        @keyframes countdownPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        /* Responsive mejorado para la información del producto */
        @media (max-width: 640px) {
            .product-detail-container {
                padding: 1rem;
            }
            
            .product-detail-container h1 {
                font-size: var(--font-size-2xl);
                line-height: 1.3;
            }
        }
        
        /* Efectos de glassmorphism */
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        
        
        /* Estilos para precios estilo Amazon */
        .price-container {
            display: inline-flex;
            align-items: flex-start;
            line-height: 1;
        }
        
        .currency-symbol {
            font-size: 0.75em;
            vertical-align: top;
            margin-top: 0.1em;
            font-weight: 500;
        }
        
        .price-integer {
            font-size: 1em;
            font-weight: bold;
            line-height: 1;
        }
        
        .price-decimals {
            font-size: 0.6em;
            vertical-align: top;
            margin-top: 0.1em;
            font-weight: 500;
        }
        
        .currency-code {
            font-size: 0.7em;
            margin-left: 0.2em;
            vertical-align: top;
            margin-top: 0.1em;
            font-weight: normal;
            opacity: 0.8;
        }
        
        /* Tamaños especÍ­ficos para diferentes contextos */
        .price-large .currency-symbol {
            font-size: 0.8em;
        }
        
        .price-large .price-integer {
            font-size: 1.2em;
        }
        
        .price-large .price-decimals {
            font-size: 0.7em;
        }
        
        .price-small .currency-symbol {
            font-size: 0.7em;
        }
        
        .price-small .price-integer {
            font-size: 0.9em;
        }
        
        .price-small .price-decimals {
            font-size: 0.55em;
        }
        
        /* Utilidad para truncar texto */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* Animaciones para la portada */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
            opacity: 0;
        }
        
        /* Categorías horizontales - estilos dinámicos del tema */
        .category-scroll::-webkit-scrollbar {
            display: none;
        }
        
        .category-scroll {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .category-pill {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
            flex-shrink: 0;
            text-decoration: none;
        }

        .category-pill--selected {
            background: var(--color-primary);
            color: var(--color-on-primary);
            border: none;
            box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.25);
        }

        .category-pill--unselected {
            background: var(--color-surface-primary);
            color: var(--color-text-primary);
            border: 1px solid var(--color-outline);
        }

        .category-pill--unselected:hover {
            background: var(--color-surface-tertiary);
            color: var(--color-text-primary);
            border-color: var(--color-outline);
        }
        
        .category-pill--unselected:hover .category-pill-badge {
            background: var(--color-surface-secondary);
            color: var(--color-text-secondary);
        }

        .category-pill-badge {
            font-size: 0.75rem;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
        }

        .category-pill--selected .category-pill-badge {
            background: rgba(0, 0, 0, 0.2);
            color: var(--color-on-primary);
        }

        .category-pill--unselected .category-pill-badge {
            background: var(--color-surface-secondary);
            color: var(--color-text-tertiary);
        }

        /* Enlaces de filtros - neutros */
        .filter-clear-link {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--color-text-secondary);
            display: flex;
            align-items: center;
            gap: 0.25rem;
            transition: color 0.2s, opacity 0.2s;
        }

        .filter-clear-link:hover {
            color: var(--color-text-primary);
            opacity: 1;
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
        }

        .filter-chip--category {
            background: var(--color-surface-secondary);
            color: var(--color-text-primary);
        }

        .filter-chip-remove {
            color: inherit;
            opacity: 0.8;
        }

        .filter-chip-remove:hover {
            opacity: 1;
        }

        .btn-apply-filters {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 0.5rem;
            background: var(--color-primary);
            color: var(--color-on-primary);
            border: none;
            transition: all 0.2s ease;
        }

        .btn-apply-filters:hover {
            background: var(--color-primary-dark);
        }

        /* Pills en panel de filtros (móvil) */
        .filter-panel-pill {
            display: inline-flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .filter-panel-pill--selected {
            background: var(--color-surface-tertiary);
            color: var(--color-text-primary);
            border: 1px solid var(--color-outline);
            font-weight: 600;
        }

        .filter-panel-pill--unselected {
            background: var(--color-surface-secondary);
            color: var(--color-text-secondary);
            border: 1px solid var(--color-outline);
        }

        .filter-panel-pill--unselected:hover {
            background: var(--color-surface-tertiary);
            color: var(--color-text-primary);
        }

        .btn-empty-state {
            display: inline-flex;
            align-items: center;
            padding: 0.625rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 0.75rem;
            background: var(--color-primary);
            color: var(--color-on-primary);
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .btn-empty-state:hover {
            background: var(--color-primary-dark);
        }

        .sort-select-input {
            width: 100%;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            border: 1px solid var(--color-outline);
            border-radius: 0.5rem;
            background: var(--color-surface-primary);
            color: var(--color-text-primary);
        }

        .sort-select-input:focus {
            outline: none;
            border-color: var(--color-outline);
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
        }

        /* Filtros rápidos: destacados, nuevos, ofertas (variables del tema) */
        .filter-quick-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.375rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.2s ease;
            text-decoration: none;
            border: 1px solid transparent;
        }

        .filter-quick-pill--inactive {
            background: var(--color-surface-secondary);
            color: var(--color-text-secondary);
            border-color: var(--color-outline);
        }

        .filter-quick-pill--inactive:hover {
            background: var(--color-surface-tertiary);
        }

        .filter-quick-pill--featured {
            background: rgba(var(--color-accent-rgb), 0.15);
            color: var(--color-accent-dark);
            border-color: rgba(var(--color-accent-rgb), 0.35);
        }

        .filter-quick-pill--new {
            background: rgba(var(--color-success-rgb), 0.15);
            color: var(--color-success-dark);
            border-color: rgba(var(--color-success-rgb), 0.35);
        }

        .filter-quick-pill--offers {
            background: rgba(var(--color-error-rgb), 0.12);
            color: var(--color-error);
            border-color: rgba(var(--color-error-rgb), 0.3);
        }

        /* Chips de filtros activos con tema */
        .filter-chip--search {
            background: rgba(var(--color-info-rgb), 0.12);
            color: var(--color-info-dark);
        }

        .filter-chip--featured {
            background: rgba(var(--color-accent-rgb), 0.15);
            color: var(--color-accent-dark);
        }

        .filter-chip--new {
            background: rgba(var(--color-success-rgb), 0.15);
            color: var(--color-success-dark);
        }

        .filter-chip--offers {
            background: rgba(var(--color-error-rgb), 0.12);
            color: var(--color-error);
        }

        /* Barra de búsqueda - estilo pfm bordes suaves */
        .search-bar-container {
            background: var(--color-surface-primary);
            border: 1px solid rgba(var(--color-outline-rgb), 0.5);
            border-radius: 14px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }

        .search-bar-separator {
            width: 1px;
            height: 2rem;
            background: rgba(var(--color-outline-rgb), 0.5);
        }

        .search-bar-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 1.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            background: var(--color-primary);
            color: var(--color-on-primary);
            border: none;
            border-radius: 0 12px 12px 0;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .search-bar-btn:hover {
            background: var(--color-primary-dark);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .search-input-theme {
            background: transparent !important;
            color: var(--color-text-primary) !important;
        }

        .search-input-theme::placeholder {
            color: var(--color-text-tertiary) !important;
        }

        /* Botón de filtros - mismo estilo que la barra (blanco) */
        .filters-toggle-btn {
            background: transparent !important;
            color: var(--color-text-primary) !important;
            border: none;
        }

        .filters-toggle-btn:hover {
            background: var(--color-surface-secondary) !important;
            color: var(--color-text-primary) !important;
        }

        /* Panel de filtros y labels - bordes suaves */
        .filters-panel-theme {
            background: var(--color-surface-primary) !important;
            border: 1px solid rgba(var(--color-outline-rgb), 0.5) !important;
            border-radius: 14px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
        }

        .filter-label-theme {
            color: var(--color-text-primary) !important;
        }

        .filter-action-link {
            color: var(--color-text-secondary);
        }

        .filter-action-link:hover {
            color: var(--color-text-primary);
        }

        .filter-divider {
            border-color: var(--color-outline) !important;
        }

        /* Menú app y dropdown - estilo pfm bordes suaves */
        /* Vista de categorias: filtros criticos cargados antes del HTML para evitar flash sin estilos */
        .category-view-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1rem;
            padding: 0 1rem;
        }

        @media (min-width: 1024px) {
            .category-view-layout {
                grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
                align-items: start;
                gap: 1.25rem;
            }
        }

        .category-filters-aside {
            min-width: 0;
        }

        .category-filter-panel {
            background: var(--color-surface-primary);
            border: 1px solid rgba(var(--color-outline-rgb), 0.42);
            border-radius: 14px;
            padding: 1rem;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
            color: var(--color-text-primary);
        }

        .category-filter-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.75rem;
            padding-bottom: 0.85rem;
            margin-bottom: 0.9rem;
            border-bottom: 1px solid rgba(var(--color-outline-rgb), 0.28);
        }

        .category-filter-header h2 {
            color: var(--color-text-primary);
            font-size: var(--font-size-base);
            font-weight: 800;
            margin: 0;
            line-height: 1.2;
        }

        .category-filter-header p {
            color: var(--color-text-tertiary);
            font-size: var(--font-size-xs);
            margin: 0.2rem 0 0;
        }

        .category-filter-mobile-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            min-height: 2.25rem;
            padding: 0 0.75rem;
            border-radius: 10px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.38);
            background: var(--color-surface-primary);
            color: var(--color-text-primary);
            font-size: var(--font-size-sm);
            font-weight: 750;
            cursor: pointer;
        }

        .category-filter-body {
            display: grid;
            gap: 1rem;
        }

        @media (max-width: 1023px) {
            .category-filter-panel {
                padding: 0.9rem;
            }

            .category-filter-panel:not(.is-open) .category-filter-body {
                display: none;
            }

            .category-filter-panel:not(.is-open) .category-filter-header {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: 0;
            }
        }

        @media (min-width: 1024px) {
            .category-filter-mobile-toggle {
                display: none;
            }

            .category-filter-panel {
                position: sticky;
                top: 1rem;
                max-height: calc(100dvh - 2rem);
                overflow-y: auto;
            }
        }

        .price-slider-shell {
            position: relative;
            height: 2rem;
            margin-inline: 0.25rem;
            cursor: pointer;
            touch-action: pan-y;
        }

        .price-slider-shell::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 0.38rem;
            border-radius: 999px;
            transform: translateY(-50%);
            background: rgba(var(--color-outline-rgb), 0.28);
        }

        .price-slider-track {
            position: absolute;
            top: 50%;
            height: 0.38rem;
            border-radius: 999px;
            transform: translateY(-50%);
            background: var(--color-primary);
        }

        .price-slider-thumb {
            position: absolute;
            top: 50%;
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 999px;
            background: var(--color-surface-primary);
            border: 3px solid var(--color-primary);
            box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.22);
            transform: translate(-50%, -50%);
            cursor: grab;
            z-index: 2;
            touch-action: none;
        }

        .price-input-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
        }

        .app-menu-btn {
            background: var(--color-surface-secondary) !important;
            color: var(--color-text-primary) !important;
            border: 1px solid rgba(var(--color-outline-rgb), 0.4);
            border-radius: 12px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .app-menu-btn:hover {
            background: var(--color-surface-tertiary) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .app-menu-btn:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
        }

        .app-menu-dropdown {
            background: var(--color-surface-primary) !important;
            border: 1px solid rgba(var(--color-outline-rgb), 0.4) !important;
            border-radius: 14px !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
        }

        .app-menu-item {
            color: var(--color-text-primary) !important;
            border-radius: 10px;
            margin: 0 6px;
        }

        .app-menu-item:hover {
            background: var(--color-surface-secondary) !important;
        }

        .app-menu-icon {
            color: var(--color-primary) !important;
        }

        .app-menu-icon-muted {
            color: var(--color-text-tertiary) !important;
        }

        .app-menu-icon--success {
            color: var(--color-success) !important;
        }

        .lang-option--selected {
            background: var(--color-surface-secondary) !important;
            color: var(--color-text-primary) !important;
        }

        /* Cards: base unificada estilo pfm (entrar productos) - bordes suaves, sombra ligera moderna */
        .product-card,
        .related-product-card,
        .latest-product-card,
        .featured-promo-card {
            display: block;
            color: inherit;
            text-decoration: none;
            background: var(--color-surface-primary) !important;
            border: 1px solid rgba(var(--color-outline-rgb, 226, 232, 240), 0.6);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.2s ease;
        }

        .product-card:hover,
        .related-product-card:hover,
        .latest-product-card:hover,
        .featured-promo-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
            border-color: rgba(var(--color-outline-rgb, 226, 232, 240), 0.8);
        }

        .product-price-theme {
            color: var(--color-primary) !important;
        }

        .product-price-affiliate {
            color: var(--color-success) !important;
        }

        .featured-promo-arrow {
            background: rgba(var(--color-primary-rgb), 0.12) !important;
            color: var(--color-primary) !important;
        }

        .featured-promo-arrow:hover {
            background: var(--color-primary) !important;
            color: var(--color-on-primary) !important;
        }
        
        .categories-nav-wrapper {
            position: relative;
        }
        
        /* Botones de categorías - neutros, sin colores del tema en hover */
        .categories-nav-btn.interface-element {
            background-color: var(--color-surface-primary);
            color: var(--color-text-primary);
            border-color: var(--color-outline);
            border-radius: 12px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            transition: opacity 0.2s ease, background-color 0.2s, transform 0.15s, border-color 0.2s, box-shadow 0.2s;
        }
        
        .categories-nav-btn.interface-element:hover:not([disabled]) {
            background-color: var(--color-surface-tertiary);
            color: var(--color-text-primary);
            border-color: var(--color-outline);
            transform: scale(1.02);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
        
        .categories-nav-btn.interface-element:active:not([disabled]) {
            transform: scale(0.96);
        }
        
        .categories-nav-btn.interface-element:focus {
            --tw-ring-color: rgba(0, 0, 0, 0.15);
        }
        
        .categories-nav-btn.categories-nav-prev,
        .categories-nav-btn.categories-nav-next {
            opacity: 0;
        }
        
        .categories-nav-wrapper:hover .categories-nav-btn:not(.hidden),
        .categories-nav-wrapper:focus-within .categories-nav-btn:not(.hidden) {
            opacity: 1;
        }
        
        /* Pantallas táctiles: botones visibles cuando no están ocultos */
        @media (hover: none) {
            .categories-nav-btn:not(.hidden):not([disabled]) {
                opacity: 0.9;
            }
        }
        
        /* Scroll horizontal - ocultar scrollbar y smooth scroll */
        .scrollbar-hide {
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }
        
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        /* Mejoras para el scroll de últimos productos */
        .latest-scroll {
            scroll-snap-type: x mandatory;
        }
        
        .latest-scroll > div {
            scroll-snap-align: start;
        }
        
        /* Estilos para cards compactos (últimos productos + destacados) - imagen 1:1 cover sin bordes */
        .latest-card-image {
            aspect-ratio: 1/1;
            padding: 0;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .latest-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.25s ease;
        }
        .latest-product-card:hover .latest-card-img,
        .featured-promo-card:hover .latest-card-img {
            transform: scale(1.04);
        }
        .latest-card-placeholder {
            width: 100%;
            height: 100%;
            min-height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 1.25rem;
        }
        .latest-product-card,
        .featured-promo-card {
            min-height: auto;
        }
        
        /* Animación sutil para el badge de tiempo - REMOVIDO */
        /* .latest-product-card .bg-green-500 {
            animation: subtle-pulse 3s infinite;
        } */
        
        /* Animación sutil para el badge destacado */
        .featured-promo-card .featured-promo-badge {
            animation: subtle-pulse 3s infinite;
        }
        
        @keyframes subtle-pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
        }
        
        /* Asegurar que el texto se trunque correctamente */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
        }
        
        /* Efectos adicionales solo para product-card (grid principal) */
        .product-card {
            position: relative;
        }
        
        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
            pointer-events: none;
            z-index: 2;
        }
        
        .product-card:hover::before {
            left: 100%;
        }
        
        .product-card:hover .product-title {
            color: var(--color-text-primary);
        }
        
        .product-card:hover .product-price {
            transform: scale(1.02);
        }
        
        .product-card img {
            transition: filter 0.2s ease;
        }
        
        /* Skeleton loading para productos */
        .product-skeleton {
            background: linear-gradient(90deg, rgba(var(--color-outline-rgb), 0.2) 25%, rgba(var(--color-outline-strong-rgb), 0.35) 50%, rgba(var(--color-outline-rgb), 0.2) 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }
        
        @keyframes loading {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }
        
        /* Mejoras para filtros activos */
        .filter-badge {
            animation: slideInRight 0.3s ease-out;
        }
        
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(10px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Responsive mejorado */
        @media (max-width: 640px) {
            .grid-responsive {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
            }
        }
        
        @media (min-width: 641px) and (max-width: 899px) {
            .grid-responsive {
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
            }
        }
        
        @media (min-width: 900px) {
            .grid-responsive {
                grid-template-columns: repeat(4, 1fr);
                gap: 1.5rem;
            }
        }
        
        .breadcrumb-section {
            padding: 0;
        }

        .breadcrumb-wrapper {
            background: transparent !important;
            padding: clamp(0.85rem, 1.6vw, 1.15rem) 0;
            border: 0 !important;
            box-shadow: none !important;
        }
        
        .breadcrumb-wrapper--separator {
            border-bottom: 1px solid rgba(var(--color-outline-rgb), 0.14) !important;
        }
        
        /* Breadcrumb: consistente con pills de categorías */
        .breadcrumb-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            min-height: 2rem;
            color: var(--color-text-tertiary);
        }
        
        .breadcrumb-container::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 28px;
            background: linear-gradient(to left, var(--color-background), transparent);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .breadcrumb-container.has-overflow::after {
            opacity: 1;
        }
        
        .breadcrumb-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.34rem;
            min-height: 1.85rem;
            padding: 0;
            border-radius: 0;
            font-size: var(--font-size-sm);
            font-weight: 600;
            line-height: 1;
            transition: color 0.18s ease, opacity 0.18s ease;
            white-space: nowrap;
            text-decoration: none;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        
        .breadcrumb-pill--link {
            color: var(--color-text-secondary);
        }
        
        .breadcrumb-pill--link:hover {
            color: var(--color-text-primary);
        }
        
        .breadcrumb-pill--current {
            color: var(--color-text-primary);
            font-weight: 700;
            opacity: 0.92;
        }
        
        .breadcrumb-pill--back {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            padding: 0;
            border-radius: 999px;
            background: transparent !important;
            color: var(--color-text-secondary);
            border: 1px solid rgba(var(--color-outline-rgb), 0.22) !important;
            transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
            box-shadow: none !important;
        }
        
        .breadcrumb-pill--back:hover {
            background: rgba(var(--color-outline-rgb), 0.08) !important;
            color: var(--color-text-primary);
            border-color: rgba(var(--color-outline-rgb), 0.34) !important;
        }
        
        .breadcrumb-sep {
            width: 1px;
            height: 1.15rem;
            margin-inline: 0.15rem 0.25rem;
            background: rgba(var(--color-outline-rgb), 0.28);
        }
        
        .breadcrumb-icon {
            font-size: var(--font-size-xs);
            margin-right: 0;
            flex-shrink: 0;
            color: currentColor;
            opacity: 0.78;
        }

        .breadcrumb-chevron {
            font-size: 0.62rem;
            color: var(--color-text-tertiary);
            flex-shrink: 0;
            opacity: 0.62;
        }

        .breadcrumb-scroll-indicator {
            font-size: var(--font-size-xs);
            color: var(--color-text-tertiary);
        }
        
        .breadcrumb-item {
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        
        /* Estilos especÍ­ficos para el nombre del producto en breadcrumb */
        .breadcrumb-product-name {
            max-width: min(48vw, 28rem);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        @media (min-width: 640px) {
            .breadcrumb-product-name {
                max-width: min(42vw, 32rem);
            }
        }
        
        @media (min-width: 768px) {
            .breadcrumb-product-name {
                max-width: min(38vw, 36rem);
            }
        }
        
        /* Mejorar el contenedor del breadcrumb para móviles */
        @media (max-width: 640px) {
            .breadcrumb-container .flex.items-center {
                gap: 0.25rem;
            }
            
            .breadcrumb-item {
                padding: 0.375rem 0.75rem;
                font-size: var(--font-size-xs);
            }
            
            .breadcrumb-product-name {
                max-width: 150px;
            }
            
            .breadcrumb-pill {
                font-size: var(--font-size-xs);
            }
        }
        
        @media (max-width: 480px) {
            .breadcrumb-product-name {
                max-width: 120px;
            }
            
            .breadcrumb-wrapper {
                padding: 0.75rem;
            }
        }
        
        /* Indicador de scroll animado */
        #scroll-indicator {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        #scroll-indicator:hover {
            transform: translateX(2px);
            color: var(--color-primary);
        }
        
        /* Tarjetas de productos relacionados y precio similar - rediseño estilo pfm */
        .related-product-card {
            text-decoration: none;
            color: inherit;
            border-radius: 14px;
            overflow: hidden;
            background: var(--color-surface-primary);
            border: 1px solid rgba(var(--color-outline-rgb, 226, 232, 240), 0.5);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
        }
        
        .related-product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
            border-color: rgba(var(--color-outline-rgb, 226, 232, 240), 0.7);
        }
        
        .related-card-inner {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .related-card-image {
            position: relative;
            aspect-ratio: 1;
            padding: 0;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .related-card-img {
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .related-product-card:hover .related-card-img {
            transform: scale(1.05);
        }
        
        .related-card-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 1.5rem;
        }
        
        .related-card-video-wrap {
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        .related-card-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        .related-product-card:hover .related-card-play {
            opacity: 1;
        }
        
        .related-card-play-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .related-card-play-icon i {
            font-size: 0.75rem;
            margin-left: 2px;
        }
        
        .related-card-badge {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            font-size: 0.6875rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 8px;
            backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .related-card-badge--related {
            background: rgba(15, 23, 42, 0.75);
            color: #fff;
        }
        
        .related-card-badge--similar {
            background: rgba(30, 58, 138, 0.85);
            color: #fff;
        }
        
        .related-card-discount {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            font-size: 0.6875rem;
            font-weight: 700;
            padding: 0.25rem 0.5rem;
            border-radius: 8px;
            background: #dc2626;
            color: #fff;
        }
        
        .related-card-body {
            padding: 0.75rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
            flex-grow: 1;
        }
        
        .related-card-category {
            font-size: 0.6875rem;
            font-weight: 500;
            color: var(--color-text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        
        .related-card-title {
            font-size: var(--font-size-sm) !important;
            font-weight: 600;
            color: var(--color-text-primary);
            line-height: 1.35;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .related-product-card:hover .related-card-title {
            color: var(--color-text-primary);
        }
        
        .related-card-price {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }
        
        .related-card-price-current {
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-text-primary);
        }
        
        .related-card-price-original {
            font-size: 0.8125rem;
            color: var(--color-text-tertiary);
            text-decoration: line-through;
        }
        
        .related-card-cta {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--color-text-secondary);
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            transition: color 0.2s ease;
        }
        
        .related-product-card:hover .related-card-cta {
            color: var(--color-text-primary);
        }
        
        .related-card-cta i {
            font-size: 0.625rem;
            transition: transform 0.2s ease;
        }
        
        .related-product-card:hover .related-card-cta i {
            transform: translateX(2px);
        }
        
        /* Grid de productos - mismo alto por fila */
        .price-timer__grid.grid {
            display: grid;
            align-items: stretch;
            gap: 1rem;
            width: 100%;
        }
        /* Búsqueda: grid con auto-fit evita espacios vacíos cuando hay pocos resultados */
        .price-timer__grid.search-results-grid {
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
        }
        @media (max-width: 640px) {
            .price-timer__grid.search-results-grid {
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
            }
        }
        .price-timer__grid.grid > div,
        .price-timer__grid.grid > a {
            display: flex;
            min-height: 0;
        }
        .price-timer__grid.grid .product-card,
        .price-timer__grid.grid .related-product-card {
            display: flex;
            flex-direction: column;
            flex: 1;
            width: 100%;
            min-height: 0;
        }
        .price-timer__grid.grid .related-product-card .related-card-inner {
            flex: 1;
        }
        .price-timer__grid.grid .product-card .product-card-image-area {
            flex-shrink: 0;
        }
        .price-timer__grid.grid .product-card > div:last-child {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* Títulos de sección relacionados/similares - !important para sobreescribir h2 global */
        .related-section-title,
        .similar-section-title {
            font-size: var(--font-size-sm) !important;
            font-weight: 600;
            color: var(--color-text-primary);
            margin: 0 0 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .related-section-title i,
        .similar-section-title i {
            color: var(--color-text-tertiary);
            font-size: calc(1rem * var(--font-size-scale)) !important;
        }
        
        @media (max-width: 640px) {
            .price-timer__grid.grid {
                gap: 0.75rem;
            }
            
            .related-card-body {
                padding: 0.5rem 0.75rem;
            }
            
            .related-card-title {
                font-size: var(--font-size-xs) !important;
            }
            
            .related-card-price-current {
                font-size: 0.9375rem;
            }
        }
        
        @media (min-width: 641px) {
            .price-timer__grid.grid {
                gap: 1.25rem;
            }
        }
        
        @media (min-width: 1025px) {
            .price-timer__grid.grid {
                gap: 1.5rem;
            }
        }
        
        
        
        /* Efectos de pulso para el contador */
        .share-counter-pulse {
            animation: counterPulse 0.6s ease-in-out;
        }
        
        @keyframes counterPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        /* Estilos para botones secundarios de compartir */
        .secondary-share-button {
            transition: all 0.2s ease;
            border: 1px solid var(--color-outline);
        }
        
        .secondary-share-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--color-outline-strong);
        }
        
        /* Animación de entrada para la sección de compartir */
        .share-section-enter {
            animation: shareEnter 0.6s ease-out;
        }
        
        @keyframes shareEnter {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Efectos de glassmorphism para el modal QR */
        .qr-modal {
            backdrop-filter: blur(12px);
            background: rgba(0, 0, 0, 0.6);
        }
        
        .qr-modal-content {
            background: rgba(var(--color-background-rgb), 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(var(--color-background-rgb), 0.2);
        }
        
        /* Modal de canales TikTok Live */
        #live-channels-modal {
            transition: opacity 0.15s ease-in-out;
        }
        
        #live-channels-modal .modal-content {
            background: var(--color-surface-primary) !important;
            border: 1px solid var(--color-outline);
        }
        
        #live-channels-modal .tiktok-channel-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--color-surface-secondary) !important;
            border-color: var(--color-outline) !important;
        }
        
        #live-channels-modal .tiktok-channel-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(var(--color-outline-strong-rgb), 0.15);
            background: var(--color-surface-tertiary) !important;
        }
        
        /* Animación para cards en vivo */
        .tiktok-channel-card .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        /* Gradiente dinámico para canales en vivo */
        #live-channels-modal .tiktok-channel-card .live-gradient {
            background: linear-gradient(135deg, 
                rgba(var(--color-error-rgb), 0.08) 0%, 
                rgba(var(--color-primary-rgb), 0.05) 100%);
        }
        
        /* Header del modal dinámico */
        #live-channels-modal .modal-header {
            background: var(--color-surface-primary) !important;
        }
        
        #live-channels-modal .modal-header h3 {
            color: var(--color-text-primary) !important;
        }
        
        #live-channels-modal .modal-header p {
            color: var(--color-text-secondary) !important;
        }
        
        #live-channels-modal .modal-header button {
            color: var(--color-text-secondary) !important;
        }
        
        #live-channels-modal .modal-header button:hover {
            color: var(--color-text-primary) !important;
        }
        
        /* Colores de texto dinámicos en las cards */
        #live-channels-modal .tiktok-channel-card h4 {
            color: var(--color-text-primary) !important;
        }
        
        #live-channels-modal .tiktok-channel-card p {
            color: var(--color-text-secondary) !important;
        }
        
        #live-channels-modal .tiktok-channel-card .text-gray-600 {
            color: var(--color-text-secondary) !important;
        }
        
        /* Botones dinámicos */
        #live-channels-modal .tiktok-channel-card .bg-gray-200 {
            background: var(--color-surface-tertiary) !important;
            color: var(--color-text-primary) !important;
        }
        
        #live-channels-modal .tiktok-channel-card .bg-gray-200:hover {
            background: rgba(var(--color-primary-rgb), 0.1) !important;
        }
        
        #live-channels-modal .tiktok-channel-card .bg-gray-300 {
            background: var(--color-outline) !important;
            color: var(--color-text-secondary) !important;
        }
        
        /* Scroll interno del modal */
        #live-channels-modal .modal-content {
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        #live-channels-modal .modal-header {
            flex-shrink: 0;
        }
        
        #live-channels-modal .modal-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 0;
        }
        
        /* Ocultar scrollbar manteniendo funcionalidad */
        #live-channels-modal .modal-body {
            /* Para navegadores Webkit (Chrome, Safari, Edge) */
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
        }
        
        #live-channels-modal .modal-body::-webkit-scrollbar {
            display: none; /* Webkit browsers */
            width: 0;
            background: transparent;
        }
        
        #live-channels-modal .modal-body::-webkit-scrollbar-track {
            display: none;
        }
        
        #live-channels-modal .modal-body::-webkit-scrollbar-thumb {
            display: none;
        }
        
        /* Scroll suave en navegadores que lo soporten */
        #live-channels-modal .modal-body {
            scroll-behavior: smooth;
        }
        
        /* Indicador visual sutil de scroll disponible */
        #live-channels-modal .modal-body::after {
            content: '';
            position: sticky;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to top, 
                rgba(var(--color-outline-rgb), 0.3) 0%, 
                transparent 100%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        /* Mostrar indicador cuando hay contenido que hacer scroll */
        #live-channels-modal .modal-body:hover::after {
            opacity: 1;
        }
        
        /* Mejoras de accesibilidad para el modal */
        @media (max-width: 640px) {
            #live-channels-modal .modal-content {
                max-height: 85vh;
                margin: 2rem 0.5rem;
                border-radius: 1rem;
            }
            
            #live-channels-modal .modal-body {
                padding: 1rem 1.5rem 1.5rem 1.5rem;
            }
            
            #live-channels-modal .grid-cols-1 {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }
        
        /* Anchos tipo tablet (sin incluir HD escalado ~1024 CSS px) */
        @media (min-width: 641px) and (max-width: 899px) {
            #live-channels-modal .modal-content {
                max-height: 90vh;
            }
            
            #live-channels-modal .modal-body {
                padding: 1.5rem;
            }
        }
        
        /* Desktop / laptop pequeño */
        @media (min-width: 900px) {
            #live-channels-modal .modal-content {
                max-height: 80vh;
            }
        }
        
        /* Logo del header - sombra sutil */
        #store-logo-btn .rounded-full {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }

        /* Badge LIVE estilo TikTok - bordes suaves */
        #store-logo-btn .live-badge {
            font-family: system-ui, -apple-system, sans-serif;
            letter-spacing: 0.05em;
            transition: all 0.2s ease;
            z-index: 20;
            position: absolute;
            border-radius: 10px;
        }
        
        /* Animación de pulse mejorada para el badge LIVE */
        #store-logo-btn .animate-pulse {
            animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes livePulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.8;
                transform: scale(1.1);
            }
        }
        
        /* Efecto de glow mejorado para el badge LIVE */
        .live-badge.bg-red-500 {
            box-shadow: 0 0 12px rgba(var(--color-error-rgb), 0.8), 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        
        /* Asegurar que el badge no se recorte */
        #store-logo-btn .relative {
            overflow: visible;
        }

        /* Modal de afiliados */
        #affiliate-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: clamp(1rem, 3vw, 2.5rem);
            background: rgba(var(--color-background-rgb), 0.82);
            backdrop-filter: blur(12px);
            z-index: 60;
            font-family: var(--font-body) !important;
            font-size: var(--font-size-base) !important;
            color: var(--color-text-primary);
        }

        #affiliate-modal.modal-fullscreen {
            align-items: flex-start;
            padding: clamp(0.75rem, 3vw, 1.5rem);
        }

        .affiliate-modal__panel {
            width: min(920px, 95vw);
            height: min(90vh, 820px);
            height: min(90dvh, 820px);
            max-height: 90vh;
            max-height: 90dvh;
            background: var(--color-surface-primary);
            border-radius: 24px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.45);
            box-shadow: 0 32px 70px rgba(var(--color-primary-rgb), 0.16);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(var(--color-background-rgb), 0.2);
        }

        #affiliate-modal.modal-fullscreen .affiliate-modal__panel {
            height: calc(100vh - clamp(1.5rem, 5vw, 2.5rem));
            height: calc(100dvh - clamp(1.5rem, 5vw, 2.5rem));
            max-height: none;
            width: 100%;
            border-radius: 0;
        }

        .affiliate-modal__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(1rem, 2vw, 1.5rem);
            padding: clamp(1.5rem, 3vw, 2.5rem);
            border-bottom: 1px solid rgba(var(--color-outline-rgb), 0.35);
            background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.14) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
        }

        .affiliate-modal__identity {
            display: flex;
            align-items: center;
            gap: clamp(0.85rem, 2vw, 1.25rem);
            min-width: 0;
        }

        .affiliate-modal__icon {
            width: clamp(2.75rem, 6vw, 3.5rem);
            height: clamp(2.75rem, 6vw, 3.5rem);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            color: var(--color-on-primary);
            box-shadow: 0 15px 28px rgba(var(--color-primary-rgb), 0.28);
            flex-shrink: 0;
        }

        .affiliate-modal__icon i {
            font-size: clamp(1.1rem, 2vw, 1.6rem);
        }

        .affiliate-modal__titles h3 {
            font-size: clamp(calc(1.35rem * var(--font-size-scale)), 2.5vw, calc(1.85rem * var(--font-size-scale)));
            font-weight: 700;
            margin: 0;
        }

        .affiliate-modal__titles p {
            margin: 0.35rem 0 0 0;
            font-size: clamp(0.9rem, 1.8vw, 1.05rem);
            color: var(--color-text-secondary);
        }

        .affiliate-modal__close {
            width: clamp(2.5rem, 5vw, 2.875rem);
            height: clamp(2.5rem, 5vw, 2.875rem);
            border-radius: 999px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.5);
            background: rgba(var(--color-background-rgb), 0.6);
            color: var(--color-text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .affiliate-modal__close:hover {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            color: var(--color-on-primary);
            border-color: transparent;
            transform: translateY(-1px);
        }

        .affiliate-modal__close i {
            font-size: 1.1rem;
        }

        .affiliate-modal__content {
            flex: 1;
            padding: clamp(1.25rem, 3vw, 2rem);
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(1rem, 3vw, 2rem);
            overflow-y: auto;
            scrollbar-gutter: stable;
            min-height: 0;
            height: 100%;
            max-height: 100%;
        }

        @media (min-width: 1024px) {
            .affiliate-modal__content {
                grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
                gap: clamp(1.25rem, 2.5vw, 2.25rem);
            }
        }

        .affiliate-overview {
            display: flex;
            flex-direction: column;
            gap: clamp(1rem, 2.5vw, 1.75rem);
        }

        .affiliate-highlight {
            background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.18) 0%, rgba(var(--color-primary-rgb), 0.04) 100%);
            border: 1px solid rgba(var(--color-primary-rgb), 0.35);
            border-radius: 22px;
            padding: clamp(1.25rem, 3vw, 2.1rem);
            position: relative;
            overflow: hidden;
        }

        .affiliate-highlight::after {
            content: '';
            position: absolute;
            top: -40%;
            right: -25%;
            width: clamp(12rem, 35vw, 16rem);
            height: clamp(12rem, 35vw, 16rem);
            background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.25) 0%, transparent 70%);
            transform: rotate(25deg);
        }

        .affiliate-highlight__badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.4rem 0.9rem;
            border-radius: 999px;
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--color-on-primary);
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            box-shadow: 0 12px 24px rgba(var(--color-primary-rgb), 0.25);
            position: relative;
            z-index: 1;
            font-weight: 600;
        }

        .affiliate-highlight__badge i {
            font-size: 0.8rem;
        }

        .affiliate-highlight__title {
            position: relative;
            z-index: 1;
            margin: 1.25rem 0 0.5rem 0;
            font-size: clamp(1.35rem, 2.5vw, 1.85rem);
            font-weight: 700;
            color: var(--color-text-primary);
        }

        .affiliate-highlight__subtitle {
            position: relative;
            z-index: 1;
            margin: 0;
            color: var(--color-text-secondary);
            font-size: clamp(0.95rem, 1.9vw, 1.05rem);
            max-width: 46ch;
        }

        .affiliate-metrics {
            position: relative;
            z-index: 1;
            margin-top: clamp(1.25rem, 3vw, 1.75rem);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: clamp(0.9rem, 2vw, 1.25rem);
        }

        .affiliate-metric {
            background: rgba(var(--color-background-rgb), 0.92);
            border: 1px solid rgba(var(--color-outline-rgb), 0.4);
            border-radius: 16px;
            padding: 0.9rem 1.1rem;
            box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), 0.08);
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .affiliate-metric__label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--color-text-tertiary);
        }

        .affiliate-metric__value {
            font-size: clamp(1.35rem, 2.7vw, 1.75rem);
            font-weight: 700;
            color: var(--color-text-primary);
        }

        .affiliate-metric__hint {
            font-size: 0.85rem;
            color: var(--color-text-secondary);
        }

        .affiliate-benefits {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: clamp(0.9rem, 2vw, 1.25rem);
        }

        .affiliate-benefits__card {
            background: rgba(var(--color-background-rgb), 0.96);
            border-radius: 18px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.4);
            padding: 1.25rem;
            box-shadow: 0 16px 32px rgba(var(--color-secondary-rgb), 0.12);
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .affiliate-benefits__card i {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--color-primary-rgb), 0.15);
            color: var(--color-primary);
            font-size: 1rem;
        }

        .affiliate-benefits__title {
            font-weight: 600;
            margin: 0;
            color: var(--color-text-primary);
        }

        .affiliate-benefits__text {
            margin: 0;
            color: var(--color-text-secondary);
            font-size: 0.9rem;
        }



        .affiliate-steps-card {

            background: rgba(var(--color-background-rgb), 0.96);

            border-radius: 20px;

            border: 1px solid rgba(var(--color-outline-rgb), 0.35);

            padding: clamp(1.2rem, 3vw, 1.9rem);

            box-shadow: 0 18px 32px rgba(var(--color-primary-rgb), 0.12);

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }



        .affiliate-steps-card__title {

            margin: 0;

            font-size: clamp(1rem, 2vw, 1.2rem);

            font-weight: 600;

            color: var(--color-text-primary);

        }



        .affiliate-steps {

            display: flex;

            flex-direction: column;

            gap: 0.85rem;

        }



        .affiliate-step {

            display: flex;

            gap: 0.9rem;

            align-items: flex-start;

        }



        .affiliate-step__number {

            width: 42px;

            height: 42px;

            border-radius: 999px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            font-weight: 700;

            font-size: 1rem;

            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);

            color: var(--color-on-primary);

            box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), 0.2);

            flex-shrink: 0;

        }



        .affiliate-step__title {

            margin: 0;

            font-weight: 600;

            color: var(--color-text-primary);

        }



        .affiliate-step__text {

            margin: 0.25rem 0 0 0;

            color: var(--color-text-secondary);

            font-size: 0.9rem;

        }



        .affiliate-testimonial {

            background: rgba(var(--color-background-rgb), 0.96);

            border-radius: 20px;

            border: 1px solid rgba(var(--color-outline-rgb), 0.35);

            padding: clamp(1.35rem, 3vw, 1.85rem);

            position: relative;

            overflow: hidden;

            box-shadow: 0 16px 32px rgba(var(--color-primary-rgb), 0.12);

        }



        .affiliate-testimonial::before {

            content: "\201C";

            position: absolute;

            top: -0.4rem;

            left: 1.4rem;

            font-size: 4rem;

            color: rgba(var(--color-primary-rgb), 0.18);

            font-family: 'Georgia', serif;

        }



        .affiliate-testimonial__quote {

            margin: 0;

            font-size: 1rem;

            line-height: 1.6;

            color: var(--color-text-primary);

            position: relative;

            z-index: 1;

        }



        .affiliate-testimonial__author {

            margin-top: 1.25rem;

            display: flex;

            align-items: center;

            gap: 0.75rem;

            position: relative;

            z-index: 1;

        }



        .affiliate-testimonial__author i {

            width: 44px;

            height: 44px;

            border-radius: 999px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            background: rgba(var(--color-primary-rgb), 0.12);

            color: var(--color-primary);

        }



        .affiliate-testimonial__author-name {

            margin: 0;

            font-weight: 600;

            color: var(--color-text-primary);

        }



        .affiliate-testimonial__author-role {

            margin: 0;

            color: var(--color-text-secondary);

            font-size: 0.85rem;

        }



        .affiliate-modal__form-header {

            display: flex;

            flex-direction: column;

            gap: 0.35rem;

        }



        .affiliate-modal__form-header-badge {

            display: inline-flex;

            align-items: center;

            gap: 0.35rem;

            align-self: flex-start;

            padding: 0.35rem 0.75rem;

            border-radius: 999px;

            font-size: 0.75rem;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            font-weight: 600;

            color: var(--color-primary);

            background: rgba(var(--color-primary-rgb), 0.12);

        }



        .affiliate-modal__form-header-badge i {

            font-size: 0.75rem;

        }



        .affiliate-modal__form-header h4 {

            margin: 0;

        }



        .affiliate-modal__form-header p {

            margin: 0;

        }



        .affiliate-field-group {

            display: grid;

            gap: 1rem;

        }



        @media (min-width: 768px) {

            .affiliate-field-group--two {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }

        }

        .affiliate-example {
            background: rgba(var(--color-background-rgb), 0.96);
            border-radius: 20px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.4);
            padding: clamp(1.5rem, 3vw, 2.25rem);
            box-shadow: 0 20px 35px rgba(var(--color-primary-rgb), 0.1);
        }

        .affiliate-example__title {
            margin: 0 0 1.25rem 0;
            font-size: clamp(1.05rem, 2vw, 1.2rem);
            font-weight: 600;
            text-align: center;
        }

        .affiliate-example__cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem;
        }

        .affiliate-example__card {
            text-align: center;
            background: rgba(var(--color-background-secondary-rgb), 0.85);
            border-radius: 16px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.35);
            padding: 1.15rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .affiliate-example__icon {
            width: 48px;
            height: 48px;
            border-radius: 999px;
            margin: 0 auto;
            background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
            color: var(--color-on-success);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 20px rgba(var(--color-success-rgb), 0.2);
        }

        .affiliate-example__card:nth-child(2) .affiliate-example__icon {
            background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
            color: var(--color-on-warning);
            box-shadow: 0 10px 20px rgba(var(--color-warning-rgb), 0.2);
        }

        .affiliate-example__card-title {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-text-primary);
        }

        .affiliate-example__value {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--color-text-primary);
        }

        .affiliate-example__hint {
            font-size: 0.8rem;
            color: var(--color-text-secondary);
        }

        .affiliate-example__note {
            margin-top: 1.25rem;
            border-radius: 14px;
            background: rgba(var(--color-primary-rgb), 0.1);
            border: 1px dashed rgba(var(--color-primary-rgb), 0.35);
            padding: 0.85rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: var(--color-text-secondary);
            font-size: 0.9rem;
        }

        .affiliate-example__note i {
            color: var(--color-primary);
        }

        .affiliate-cta {
            background: rgba(var(--color-background-rgb), 0.96);
            border-radius: 18px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.35);
            padding: 1.35rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .affiliate-cta__lead {
            margin: 0;
            font-weight: 600;
            font-size: 1rem;
            color: var(--color-text-primary);
        }

        .affiliate-cta__list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .affiliate-cta__list li {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.9rem;
            color: var(--color-text-secondary);
        }

        .affiliate-cta__list li i {
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--color-success-rgb), 0.2);
            color: var(--color-success);
            font-size: 0.8rem;
        }

        .affiliate-modal__form {
            background: rgba(var(--color-background-rgb), 0.97);
            border-radius: 24px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.4);
            padding: clamp(1.2rem, 3vw, 2rem);
            box-shadow: 0 24px 45px rgba(var(--color-primary-rgb), 0.12);
            display: flex;
            flex-direction: column;
            gap: clamp(0.85rem, 2vw, 1.35rem);
        }

        .affiliate-field {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .affiliate-field__label {
            font-weight: 600;
            color: var(--color-text-secondary);
            font-size: 0.95rem;
        }

        .affiliate-input {
            width: 100%;
            border-radius: 16px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.45);
            background: rgba(var(--color-background-secondary-rgb), 0.85);
            padding: 0.85rem 1rem;
            font-size: 1rem;
            color: var(--color-text-primary);
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        .affiliate-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
            transform: translateY(-1px);
        }

        .affiliate-input--invalid {
            border-color: var(--color-error);
            box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.2);
        }

        .affiliate-input--warning {
            border-color: var(--color-warning);
            box-shadow: 0 0 0 3px rgba(var(--color-warning-rgb), 0.25);
        }

        .affiliate-input--textarea {
            resize: none;
            min-height: 140px;
        }

        .affiliate-field__helper {
            font-size: 0.8rem;
            color: var(--color-text-tertiary);
        }

        .affiliate-field__counter {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--color-text-tertiary);
        }

        .affiliate-field__counter-value {
            font-weight: 600;
            color: var(--color-text-tertiary);
        }

        .affiliate-field__counter-value--warning {
            color: var(--color-error);
        }

        .affiliate-modal__submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            width: 100%;
            padding: 1.1rem 1.5rem;
            border-radius: 18px;
            font-size: 1.05rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: var(--color-on-primary);
            font-family: var(--font-primary) !important;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .affiliate-submit-btn {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            border: none;
            box-shadow: 0 18px 38px rgba(var(--color-primary-rgb), 0.3);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .affiliate-submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .affiliate-submit-btn:hover::before {
            left: 100%;
        }

        .affiliate-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 24px 45px rgba(var(--color-primary-rgb), 0.38);
        }

        .affiliate-submit-btn:active {
            transform: translateY(0);
            box-shadow: 0 12px 24px rgba(var(--color-primary-rgb), 0.28);
        }

        .affiliate-submit-btn i {
            font-size: 1.05rem;
        }

        .affiliate-trust {
            border-radius: 16px;
            border: 1px solid rgba(var(--color-outline-rgb), 0.35);
            background: rgba(var(--color-background-secondary-rgb), 0.75);
            padding: 1rem 1.2rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.9rem;
            color: var(--color-text-secondary);
        }

        .affiliate-trust i {
            color: var(--color-success);
        }

        @media (max-width: 900px) {
            .affiliate-modal__panel {
                width: min(640px, 94vw);
                height: min(92vh, 760px);
                height: min(92dvh, 760px);
                border-radius: 20px;
            }
        }

        @media (max-width: 640px) {
            #affiliate-modal {
                padding: 0.75rem;
            }

            .affiliate-modal__panel {
                width: 100%;
                height: 100vh;
                height: 100dvh;
                border-radius: 0;
            }

            .affiliate-modal__header {
                padding: 1.1rem 1.25rem;
            }

            .affiliate-modal__content {
                padding: 1rem 1.1rem 1.25rem;
            }

            .affiliate-modal__form {
                padding: 1.1rem;
            }

            .affiliate-highlight__subtitle {
                max-width: unset;
            }
        }

/* Botón de envÍ­o con tema dinámico */
        .affiliate-submit-btn {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            box-shadow: 0 4px 14px 0 rgba(var(--color-primary-rgb), 0.3);
        }
        
        .affiliate-submit-btn:hover {
            background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
            box-shadow: 0 6px 20px 0 rgba(var(--color-primary-rgb), 0.4);
            transform: translateY(-1px);
        }
        
        .affiliate-submit-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px 0 rgba(var(--color-primary-rgb), 0.3);
        }
        
        /* Inputs y elementos del formulario con tema dinámico */
        #affiliate-modal input:focus,
        #affiliate-modal select:focus,
        #affiliate-modal textarea:focus {
            border-color: var(--color-primary) !important;
            box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1) !important;
        }
        
        /* Colores de validación con tema dinámico */
        #affiliate-modal .border-red-300 {
            border-color: var(--color-error) !important;
        }
        
        #affiliate-modal .text-red-500 {
            color: var(--color-error) !important;
        }
        
        /* Mensaje de seguridad con tema dinámico */
        #affiliate-modal .bg-gray-50 {
            background-color: var(--color-background-secondary) !important;
            border-color: var(--color-border) !important;
        }
        
        #affiliate-modal .text-gray-600 {
            color: var(--color-text-secondary) !important;
        }
        
        #affiliate-modal .text-gray-500 {
            color: var(--color-text-tertiary) !important;
        }
        
        /* Sección simplificada con tema dinámico */
        .affiliate-simple-example {
            background: var(--color-background-secondary);
            border: 1px solid var(--color-border);
        }
        
        /* Tarjetas simples */
        .affiliate-simple-card {
            background: var(--color-background);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            padding: 1.5rem;
            transition: all 0.2s ease;
        }
        
        .affiliate-simple-card:hover {
            border-color: var(--color-primary);
            box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.1);
        }
        
        /* Iconos simples */
        .affiliate-simple-icon {
            background: var(--color-primary);
        }
        
        /* Nota simple */
        .affiliate-simple-note {
            background: var(--color-warning-light);
            border: 1px solid var(--color-warning);
        }
        
        .affiliate-simple-note i {
            color: var(--color-warning);
        }
        
        /* Estilos para mensajes de estado */
        .affiliate-message {
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .affiliate-message.success {
            background-color: var(--color-success-light);
            color: var(--color-success-dark);
            border: 1px solid var(--color-success);
        }
        
        .affiliate-message.error {
            background-color: var(--color-error-light);
            color: var(--color-error-dark);
            border: 1px solid var(--color-error);
        }
        
        .affiliate-message.warning {
            background-color: var(--color-warning-light);
            color: var(--color-warning-dark);
            border: 1px solid var(--color-warning);
        }
        
        /* Borde amarillo para email duplicado */
        #affiliate-modal .border-yellow-400 {
            border-color: var(--color-warning) !important;
        }
        
        /* Icono del header con tema dinámico */
        .affiliate-header-icon {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            box-shadow: 0 4px 12px 0 rgba(var(--color-primary-rgb), 0.3);
        }
        
        /* Icono del hero con tema dinámico */
        .affiliate-hero-icon {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .social-icon:hover {
            transform: rotate(5deg) scale(1.1);
        }
        
        /* Efectos de hover simplificados */
        .gradient-hover {
            transition: all 0.3s ease;
        }
        
        .gradient-hover:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        
        /* Animación de éxito para compartir */
        .share-success {
            animation: shareSuccess 0.5s ease-out;
        }
        
        @keyframes shareSuccess {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* Botón de compartir: estilo neutro alineado con controles de la galería (prev/next) */
        .gallery-share-btn {
            background: rgba(255, 255, 255, 0.9);
            color: #374151;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
            animation: fadeInBounce 0.5s ease-out 0.5s both;
        }

        .gallery-share-btn:hover {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .gallery-share-btn:active {
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
        }

        /* Animación de entrada con bounce sutil */
        @keyframes fadeInBounce {
            0% {
                opacity: 0;
                transform: translateY(-10px) scale(0.8);
            }
            60% {
                opacity: 1;
                transform: translateY(0) scale(1.05);
            }
            100% {
                opacity: 0.9;
                transform: translateY(0) scale(1);
            }
        }

        /* Animación del icono al hacer hover */
        .gallery-share-btn i {
            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .gallery-share-btn:hover i {
            transform: rotate(15deg) scale(1.1);
        }

        /* Efecto de pulso sutil en móvil para indicar interactividad */
        @media (hover: none) and (pointer: coarse) {
            .gallery-share-btn {
                animation: fadeInBounce 0.5s ease-out 0.5s both, subtlePulse 3s ease-in-out 2s infinite;
            }
            
            @keyframes subtlePulse {
                0%, 100% {
                    transform: scale(1);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
                }
                50% {
                    transform: scale(1.05);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
                }
            }
        }

        /* Modo oscuro: estilo consistente con controles */
        [data-theme="dark"] .gallery-share-btn {
            background: rgba(55, 65, 81, 0.9);
            color: #e5e7eb;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }

        [data-theme="dark"] .gallery-share-btn:hover {
            background: rgba(75, 85, 99, 0.95);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }
        
        /* Estilos para el menú tipo app */
        #app-menu-button {
            position: relative;
            overflow: hidden;
        }
        
        #app-menu-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(var(--color-primary-rgb), 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }
        
        #app-menu-button:hover::before {
            width: 100%;
        }
        
        #app-menu-dropdown {
            backdrop-filter: blur(12px);
            border-radius: 14px !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        /* Animación de entrada para items del menú */
        #app-menu-dropdown button,
        #app-menu-dropdown a {
            animation: menuItemSlideIn 0.3s ease-out forwards;
            opacity: 0;
            transform: translateX(10px);
        }
        
        #app-menu-dropdown button:nth-child(1),
        #app-menu-dropdown a:nth-child(1) {
            animation-delay: 0.1s;
        }
        
        #app-menu-dropdown button:nth-child(3),
        #app-menu-dropdown a:nth-child(3) {
            animation-delay: 0.15s;
        }
        
        #app-menu-dropdown button:nth-child(5),
        #app-menu-dropdown a:nth-child(5) {
            animation-delay: 0.2s;
        }
        
        #app-menu-dropdown button:nth-child(7),
        #app-menu-dropdown a:nth-child(7) {
            animation-delay: 0.25s;
        }
        
        @keyframes menuItemSlideIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Efectos hover para items del menú */
        #app-menu-dropdown a:hover,
        #app-menu-dropdown button:hover {
            background-color: var(--color-surface-secondary);
        }
        
        /* Responsive para el menú */
        @media (max-width: 640px) {
            #app-menu-dropdown {
                width: 14rem;
                right: -1rem;
            }
        }
        
        /* Indicador de estado activo */
        #app-menu-button.active {
            background-color: var(--color-surface-tertiary);
            transform: rotate(90deg);
        }
        
        /* Animación suave para el botón */
        #app-menu-button i {
            transition: transform 0.2s ease;
        }
        
        /* Mejoras para iOS Safari */
        #app-menu-button {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        #app-menu-dropdown {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        /* Estilos especÍ­ficos para iOS */
        .ios-device #app-menu-button {
            -webkit-appearance: none;
            appearance: none;
            border: none;
            outline: none;
        }
        
        .ios-device #app-menu-dropdown {
            -webkit-overflow-scrolling: touch;
        }
        
        .ios-device #app-menu-dropdown button,
        .ios-device #app-menu-dropdown a {
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
            -webkit-touch-callout: none;
        }
        
        /* Estilos para el submenú de idiomas */
        #language-submenu {
            backdrop-filter: blur(12px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        #language-submenu button {
            animation: menuItemSlideIn 0.3s ease-out forwards;
            opacity: 0;
            transform: translateX(10px);
        }
        
        #language-submenu button:nth-child(1) { animation-delay: 0.1s; }
        #language-submenu button:nth-child(2) { animation-delay: 0.15s; }
        #language-submenu button:nth-child(3) { animation-delay: 0.2s; }
        #language-submenu button:nth-child(4) { animation-delay: 0.25s; }
        
        #language-submenu button:hover {
            background-color: var(--color-surface-secondary);
        }
        
        /* Responsive para el submenú de idiomas */
        @media (max-width: 640px) {
            #language-submenu {
                width: 8rem;
                left: -8rem;
            }
        }
        
        /* Efectos para iOS */
        .ios-device #language-submenu {
            -webkit-overflow-scrolling: touch;
        }
        
        .ios-device #language-submenu button {
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
            -webkit-touch-callout: none;
        }
        
        /* Sistema de notificaciones flotantes */
        .floating-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            max-width: 400px;
            min-width: 300px;
            padding: 16px 20px;
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            backdrop-filter: blur(10px);
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(var(--color-background-rgb), 0.2);
        }
        
        .floating-notification.show {
            transform: translateX(0);
            opacity: 1;
        }
        
        .floating-notification.success {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(22, 163, 74, 0.95) 100%);
            color: white;
            border-color: rgba(34, 197, 94, 0.3);
        }
        
        .floating-notification.error {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
            color: white;
            border-color: rgba(239, 68, 68, 0.3);
        }
        
        .floating-notification.warning {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.95) 0%, rgba(217, 119, 6, 0.95) 100%);
            color: white;
            border-color: rgba(245, 158, 11, 0.3);
        }
        
        .floating-notification.info {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
            color: white;
            border-color: rgba(59, 130, 246, 0.3);
        }
        
        .floating-notification-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .floating-notification-text {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        .floating-notification-icon {
            margin-right: 12px;
            font-size: 18px;
        }
        
        .floating-notification-close {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: background-color 0.2s;
            margin-left: 12px;
        }
        
        .floating-notification-close:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        /* Responsive para notificaciones */
        @media (max-width: 640px) {
            .floating-notification {
                top: 10px;
                right: 10px;
                left: 10px;
                max-width: none;
                min-width: auto;
            }
        }
        
        /* Animación de entrada */
        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }
        
        /* Mejoras adicionales estilo pfm - navbar/header moderno */
        
        /* Header mejorado con efecto glassmorphism y bordes suaves */
        header {
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background-color: rgba(255, 255, 255, 0.97);
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }
        
        /* Separador tenue entre header y contenido - estilo moderno */
        .store-header {
            border-bottom: 1px solid rgba(var(--color-outline-rgb), 0.2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
        }
        
        /* Mejoras en botones */
        button, .btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0.5rem;
        }
        
        button:hover, .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* Enlaces de categorías - neutros en hover */
        .category-link, a[href*="?c="] {
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
        }
        
        .category-link:hover, a[href*="?c="]:hover {
            background-color: var(--color-surface-tertiary);
            color: var(--color-text-primary);
            transform: translateY(-1px);
        }
        
        /* Footer moderno construido 100% a partir del tema activo.
           Todos los colores salen de variables --footer-* (definidas en :root):
             --footer-bg     banda del footer (oscura por defecto, override por tema)
             --footer-text   texto principal (+ superficies/textos translúcidos vía -rgb)
             --footer-accent color de marca para corazón, línea superior y subrayados
             --footer-border divisores y borde superior
           Así cualquier tema —actual o futuro— se aplica solo; un tema puede afinarlo
           con un bloque "footer" en store-themes.json. Sin degradado de fondo. */
        footer.footer-modern {
            background: var(--footer-bg);
            color: var(--footer-text);
            border-top: 1px solid var(--footer-border);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        footer.footer-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--footer-accent), transparent);
            opacity: 0.8;
        }

        /* Logo del footer - bordes suaves */
        .footer-logo-container {
            background: rgba(var(--footer-text-rgb), 0.1);
            padding: 0.5rem;
            border-radius: 12px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .footer-logo-container:hover {
            background: rgba(var(--footer-text-rgb), 0.2);
            transform: scale(1.05);
        }

        .footer-logo {
            filter: brightness(1.2);
        }

        /* Título del footer */
        .footer-title {
            color: var(--footer-text) !important;
            font-family: var(--font-heading) !important;
            font-size: var(--font-size-base) !important;
            font-weight: 700;
            margin-bottom: 0.25rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Copyright */
        .footer-copyright {
            color: rgba(var(--footer-text-rgb), 0.7) !important;
            font-family: var(--font-body) !important;
            font-size: var(--font-size-xs) !important;
        }

        /* Enlaces del footer */
        .footer-link {
            color: rgba(var(--footer-text-rgb), 0.9) !important;
            font-family: var(--font-body) !important;
            font-size: var(--font-size-sm) !important;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            position: relative;
        }

        .footer-link:hover {
            color: var(--footer-accent) !important;
            background: rgba(var(--footer-text-rgb), 0.1);
            transform: translateY(-2px);
        }

        .footer-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: var(--footer-accent);
            transition: width 0.3s ease;
        }

        .footer-link:hover::after {
            width: 80%;
        }

        /* Iconos de redes sociales */
        .footer-social-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(var(--footer-text-rgb), 0.1);
            color: var(--footer-text) !important;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(var(--footer-text-rgb), 0.2);
        }

        .footer-social-icon i {
            font-size: 1rem;
            color: var(--footer-text) !important;
        }

        .footer-social-icon:hover {
            background: rgba(var(--footer-text-rgb), 0.25);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            border-color: rgba(var(--footer-text-rgb), 0.4);
        }

        /* Divisor del footer - tinte sutil del acento del tema (toque premium) */
        .footer-divider {
            border-top: 1px solid rgba(var(--footer-accent-rgb), 0.3);
        }

        /* Texto de marca */
        .footer-store-description {
            font-size: 0.875rem;
            line-height: 1.6;
            color: rgba(var(--footer-text-rgb), 0.82);
            max-width: 42rem;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .footer-brand {
            color: rgba(var(--footer-text-rgb), 0.6) !important;
            font-family: var(--font-body) !important;
            font-size: var(--font-size-xs) !important;
        }

        .footer-heart {
            color: var(--footer-accent) !important;
            animation: heartbeat 1.5s ease-in-out infinite;
        }

        .footer-create-store-link {
            cursor: pointer;
        }
        .footer-create-store-link:hover {
            background: rgba(var(--footer-text-rgb), 0.22) !important;
            border-color: rgba(var(--footer-text-rgb), 0.5) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        @keyframes heartbeat {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
        }
        
        /* Responsive para footer */
        @media (max-width: 640px) {
            footer.footer-modern {
                padding: 1.5rem 1rem;
            }
            
            .footer-link {
                font-size: var(--font-size-xs) !important;
                padding: 0.375rem 0.5rem;
            }
            
            .footer-social-icon {
                width: 2rem;
                height: 2rem;
            }
            
            .footer-social-icon i {
                font-size: 0.875rem;
            }
        }

        /* Mejoras en el scroll */
        * {
            scroll-behavior: smooth;
        }
        
        /* Imágenes con cover - llenan área sin bordes (zoom) */
        .product-card img {
            object-fit: cover;
            background: linear-gradient(135deg, var(--color-background-secondary), var(--color-background-tertiary));
        }
        
        /* Animación de carga mejorada */
        @keyframes shimmer {
            0% {
                background-position: -1000px 0;
            }
            100% {
                background-position: 1000px 0;
            }
        }
        
        .loading-shimmer {
            animation: shimmer 2s infinite;
            background: linear-gradient(to right, var(--color-background-secondary) 0%, var(--color-background-tertiary) 50%, var(--color-background-secondary) 100%);
            background-size: 1000px 100%;
        }
        
        /* Mejoras en badges de descuento (bg-* mapeados a vars de tema en bloques anteriores) */
        .product-card .absolute.bg-red-500,
        .product-card .absolute.bg-green-500,
        .product-card .absolute.bg-blue-500,
        .product-card .absolute.bg-purple-500,
        .product-card .absolute.bg-orange-500 {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        /* Botón editar producto (admin) - estilo pfm */
        .store-product-edit-trigger {
            background: var(--color-primary);
            color: var(--color-on-primary);
            border: 1px solid var(--color-primary);
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }
        .store-product-edit-trigger:hover {
            background: var(--color-primary-dark);
            border-color: var(--color-primary-dark);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .store-product-edit-dropdown {
            border-radius: 14px !important;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
            border-color: rgba(var(--color-outline-rgb), 0.4) !important;
        }
        
        /* Link de pack/producto en completar pedido - bordes suaves */
        .pack-product-link {
            border-color: var(--color-outline);
            background: var(--color-surface-primary);
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
        }
        .pack-product-link:hover {
            box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08);
        }
        
        /* Mejoras en el grid de productos */
        .grid {
            gap: 1rem;
        }
        
        @media (max-width: 640px) {
            .grid {
                gap: 0.75rem;
            }
        }

        /* Dark theme polish: una capa global para que cualquier tema oscuro cubra toda la tienda */
        body.theme-dark {
            color-scheme: dark;
        }

        body.theme-dark header,
        body.theme-dark .store-header {
            background: rgba(var(--color-background-rgb), 0.9) !important;
            border-bottom-color: rgba(var(--color-outline-rgb), 0.28);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
        }

        body.theme-dark .search-bar-container,
        body.theme-dark .filters-panel-theme,
        body.theme-dark .app-menu-dropdown,
        body.theme-dark #language-submenu,
        body.theme-dark .product-detail-container,
        body.theme-dark .cart-sidebar,
        body.theme-dark .discount-modal-content,
        body.theme-dark .store-product-edit-dropdown {
            background: var(--color-surface-primary) !important;
            border-color: rgba(var(--color-outline-rgb), 0.34) !important;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
        }

        body.theme-dark .search-bar-container {
            background: rgba(var(--color-background-secondary-rgb), 0.88) !important;
        }

        body.theme-dark .search-bar-separator,
        body.theme-dark .filter-divider,
        body.theme-dark .cart-header,
        body.theme-dark .cart-footer,
        body.theme-dark .total-row {
            border-color: rgba(var(--color-outline-rgb), 0.28) !important;
        }

        body.theme-dark .product-card,
        body.theme-dark .related-product-card,
        body.theme-dark .latest-product-card,
        body.theme-dark .featured-promo-card,
        body.theme-dark .pack-product-link,
        body.theme-dark .category-pill--unselected,
        body.theme-dark .discount-code-link,
        body.theme-dark .info-card,
        body.theme-dark .qr-modal-content {
            background: var(--color-surface-primary) !important;
            border-color: rgba(var(--color-outline-rgb), 0.28) !important;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
        }

        body.theme-dark .product-card:hover,
        body.theme-dark .related-product-card:hover,
        body.theme-dark .latest-product-card:hover,
        body.theme-dark .featured-promo-card:hover,
        body.theme-dark .pack-product-link:hover {
            border-color: rgba(var(--color-primary-rgb), 0.26) !important;
            box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3) !important;
        }

        body.theme-dark .product-card::before {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
        }

        body.theme-dark .product-card-image-area,
        body.theme-dark .product-card-image-area .product-card-video-wrap,
        body.theme-dark .latest-card-image,
        body.theme-dark .related-card-image,
        body.theme-dark .latest-card-placeholder,
        body.theme-dark .related-card-placeholder {
            background: linear-gradient(135deg, var(--color-surface-secondary), var(--color-surface-tertiary)) !important;
            color: var(--color-text-tertiary) !important;
        }

        body.theme-dark .product-card-img,
        body.theme-dark .latest-card-img,
        body.theme-dark .related-card-img,
        body.theme-dark #main-media-container img {
            background-color: var(--color-surface-secondary);
        }

        body.theme-dark .product-header-badges .product-header-badge,
        body.theme-dark .product-header-badge--link,
        body.theme-dark .related-card-category,
        body.theme-dark .cart-item-price,
        body.theme-dark .summary-label,
        body.theme-dark .shipping-label,
        body.theme-dark .discount-label,
        body.theme-dark .filter-action-link,
        body.theme-dark .filter-clear-link {
            color: var(--color-text-secondary) !important;
        }

        body.theme-dark .product-header-badge--link:hover,
        body.theme-dark .filter-action-link:hover,
        body.theme-dark .filter-clear-link:hover,
        body.theme-dark .app-menu-item:hover,
        body.theme-dark .category-pill--unselected:hover {
            color: var(--color-text-primary) !important;
        }

        body.theme-dark .product-badge--new,
        body.theme-dark .product-badge--featured,
        body.theme-dark .cart-item-badge.soft,
        body.theme-dark .filter-chip,
        body.theme-dark .filter-panel-pill--unselected,
        body.theme-dark .filter-quick-pill--inactive {
            background: rgba(var(--color-background-tertiary-rgb), 0.78) !important;
            color: var(--color-text-secondary) !important;
            border-color: rgba(var(--color-outline-rgb), 0.32) !important;
        }

        body.theme-dark input,
        body.theme-dark select,
        body.theme-dark textarea,
        body.theme-dark .sort-select-input,
        body.theme-dark .discount-code-input-modal {
            background: var(--color-surface-secondary) !important;
            color: var(--color-text-primary) !important;
            border-color: rgba(var(--color-outline-rgb), 0.36) !important;
        }

        body.theme-dark input::placeholder,
        body.theme-dark textarea::placeholder {
            color: var(--color-text-tertiary) !important;
        }

        body.theme-dark .price-slider-track-bg,
        body.theme-dark #price-slider-container {
            background: transparent !important;
        }

        body.theme-dark .empty-state-store .bg-gray-50,
        body.theme-dark .empty-state-store .border-gray-100 {
            background: var(--color-surface-secondary) !important;
            border-color: var(--color-outline) !important;
        }

        body.theme-dark nav[aria-label] a:not([class*="bg-purple-500"]) {
            background: var(--color-surface-primary) !important;
            color: var(--color-text-secondary) !important;
            border-color: rgba(var(--color-outline-rgb), 0.34) !important;
        }

        body.theme-dark nav[aria-label] a:not([class*="bg-purple-500"]):hover {
            background: var(--color-surface-tertiary) !important;
            color: var(--color-text-primary) !important;
            border-color: rgba(var(--color-primary-rgb), 0.38) !important;
        }

        body.theme-dark .gallery-share-btn {
            background: rgba(var(--color-background-secondary-rgb), 0.9);
            color: var(--color-text-primary);
            border: 1px solid rgba(var(--color-outline-rgb), 0.65);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
        }

        body.theme-dark .gallery-share-btn:hover {
            background: var(--color-surface-tertiary);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
        }

        body.theme-dark article[itemscope][itemtype="https://schema.org/Product"] {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        body.theme-dark .breadcrumb-wrapper {
            background: transparent !important;
            border-bottom-color: rgba(var(--color-outline-rgb), 0.14) !important;
            box-shadow: none !important;
        }

        body.theme-dark .product-detail-layout {
            background: var(--color-surface-primary);
            border: 1px solid rgba(var(--color-outline-rgb), 0.24);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
        }

        body.theme-dark .product-detail-container {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        body.theme-dark #product-codes-section {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        body.theme-dark .home-section-inner,
        body.theme-dark .store-categories-section .home-section-inner {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        body.theme-dark .home-section-title,
        body.theme-dark .related-section-title,
        body.theme-dark .similar-section-title {
            color: var(--color-text-primary) !important;
        }

        body.theme-dark .search-bar-container,
        body.theme-dark .product-detail-layout,
        body.theme-dark .product-card,
        body.theme-dark .related-product-card,
        body.theme-dark .latest-product-card,
        body.theme-dark .featured-promo-card,
        body.theme-dark .pack-product-link,
        body.theme-dark .cart-sidebar {
            transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }