/* 1. Variable Maestra */
    :root { --color-tienda: <?= COLOR_TIENDA ?>; }

    /* 2. REPARAR EL HERO (Imágenes nítidas) */
    .hero-overlay { 
        /* Cambiamos el gradiente para que la imagen se vea clara arriba y solo oscurezca abajo para leer el texto */
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%) !important; 
    }
    .swiper-slide img { 
        filter: brightness(1.1) contrast(1.05) !important; /* Mejora la nitidez */
    }

    /* 3. COLORES DINÁMICOS (Atacando tus clases de Tailwind) */
    
    /* Fondos: Botones amarillos/azules y etiquetas */
    .bg-yellow-400, .bg-blue-600, .bg-blue-500 { 
        background-color: var(--color-tienda) !important; 
        color: white !important; /* Asegura que el texto sea blanco */
    }

    /* Textos: Precios, Títulos y Hovers */
    .text-yellow-400, .text-blue-600, .text-blue-500, .hover\:text-blue-600:hover { 
        color: var(--color-tienda) !important; 
    }

    /* Botones de acción y detalles de la card */
    .group-hover\:bg-blue-600:hover, 
    .group-hover\:w-1/3, 
    #cart-total { 
        background-color: var(--color-tienda) !important; 
        color: white !important;
    }
    
    #cart-total { background: none !important; color: var(--color-tienda) !important; }

    /* Bordes dinámicos */
    .group-hover\:border-blue-100:hover { 
        border-color: var(--color-tienda) !important; 
    }

    /* 4. MANTENER EL NEGRO ELEGANTE */
    .bg-slate-900 { 
        background-color: #0f172a !important; 
        color: white !important;
    }
    .bg-slate-900:hover { 
        background-color: var(--color-tienda) !important; 
    }

    /* 5. OTROS AJUSTES */
    html { scroll-behavior: smooth; }
    #catalogo { scroll-margin-top: 100px; }
    .swiper { width: 100%; height: 95vh; }
    .swiper-slide { position: relative; overflow: hidden; }
    .swiper-pagination-bullet-active { background: var(--color-tienda) !important; width: 30px !important; border-radius: 10px !important; }
    body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
    .cart-drawer { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
    .cart-hidden { transform: translateX(100%); }
    .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); }
    .product-card:hover img { transform: scale(1.1); }


/*PLNATILLA PRINCIPAL*/
/*--------------------
    
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Plus+Jakarta+Sans:wght@200;400;800&display=swap');
    
        /* Animación de Fade para el Slider */
        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 2s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        .slide.active { opacity: 0.4; } /* Opacidad baja para que el texto resalte */
        
        .header-content { position: relative; z-index: 10; }
        
        /* Overlay para asegurar legibilidad */
        .header-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 50%, rgba(0,0,0,0.9) 100%);
            z-index: 5;
        }       
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: #000; color: #fff; overflow-x: hidden; scroll-behavior: smooth; }
        .huge-title { font-family: 'Inter', sans-serif; font-[900]; line-height: 0.8; letter-spacing: -0.05em; }
        
        /* Efecto de Expansión Original */
        .store-card { position: relative; height: 80vh; overflow: hidden; transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1); filter: grayscale(100%); opacity: 0.6; }
        .store-card:hover { filter: grayscale(0%); opacity: 1; width: 150%; }
        
        .store-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
        .store-card:hover .store-image { transform: scale(1.1); }
        
        .overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 100%); }
        
        /* Estilo de Testimonios */
        .testimonio-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); transition: all 0.5s ease; backdrop-blur: 10px; }
        .testimonio-card:hover { background: rgba(255,255,255,0.05); border-color: #4f46e5; transform: translateY(-10px); }        

        /* Responsivo 100% */
        @media (max-width: 768px) {
            .store-card { height: 50vh; width: 100% !important; opacity: 1; filter: grayscale(0%); }
            .huge-title { font-size: 4rem; }
            .info-section { padding-left: 1.5rem; padding-right: 1.5rem; }
        }