/* Tienda Bundle - Generado 2026-03-22 22:19:13 */

/* === tienda.css === */
/* ============================================
   VARIABLES CSS - SISTEMA DE DISEÑO PREMIUM MEJORADO
============================================ */
:root {
    /* Colores Premium del diseño de referencia */
    --primary-gold: #D4AF37;
    --secondary-gold: #F4E4BC;
    --accent-rose: #D4A574;
    --dark-navy: #1a1f36;
    --medium-navy: #2d3561;
    --light-navy: #434b7a;
    --cream: #FAF8F5;
    --pearl: #F8F6F0;
    --charcoal: #2C2C2C;
    --silver: #E8E8E8;
    --soft-shadow: rgba(26, 31, 54, 0.1);
    --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    --navy-gradient: linear-gradient(135deg, #1a1f36 0%, #2d3561 100%);

    /* Tipografía */
    --tienda-fuente-titulo: 'Playfair Display', serif;
    --tienda-fuente-cuerpo: 'Inter', sans-serif;

    /* Transiciones premium */
    --tienda-transicion-rapida: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --tienda-transicion-media: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --tienda-transicion-lenta: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --tienda-transicion-elastica: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ============================================
       VARIABLES PARA LÍNEAS DE PRODUCTO
    ============================================ */

    /* Línea de Nutrición - Salud y Vitalidad */
    --nutricion-primary: #00B4A6;
    --nutricion-secondary: #4CAF50;
    --nutricion-accent: #81C784;
    --nutricion-dark: #00695C;
    --nutricion-light: #E0F2E7;
    --nutricion-text-primary: #1B5E20;
    --nutricion-text-secondary: #2E7D32;
    --nutricion-gradient-main: linear-gradient(135deg, #00B4A6 0%, #4CAF50 100%);
    --nutricion-gradient-soft: linear-gradient(135deg, #E0F2E7 0%, #F1F8E9 100%);
    --nutricion-gradient-hero: linear-gradient(135deg, #00695C 0%, #00B4A6 50%, #E0F2E7 100%);
    --nutricion-shadow: rgba(0, 180, 166, 0.3);
    --nutricion-shadow-strong: rgba(0, 105, 92, 0.4);

    /* Línea de Belleza - Elegancia y Lujo */
    --belleza-primary: #E91E63;
    --belleza-secondary: #F48FB1;
    --belleza-accent: #FCE4EC;
    --belleza-rose: #C2185B;
    --belleza-gold: #FF6F00;
    --belleza-light: #FFF0F3;
    --belleza-text-primary: #880E4F;
    --belleza-text-secondary: #AD1457;
    --belleza-gradient-main: linear-gradient(135deg, #E91E63 0%, #F48FB1 100%);
    --belleza-gradient-soft: linear-gradient(135deg, #FFF0F3 0%, #FCE4EC 100%);
    --belleza-gradient-hero: linear-gradient(135deg, #880E4F 0%, #E91E63 50%, #FFF0F3 100%);
    --belleza-shadow: rgba(233, 30, 99, 0.3);
    --belleza-shadow-strong: rgba(136, 14, 79, 0.4);
}

/* ============================================
   RESET Y CONFIGURACIÓN BASE
============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--tienda-fuente-cuerpo);
    background-color: var(--cream);
    color: var(--charcoal);
    line-height: 1.6;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Prevenir overflow horizontal en todos los contenedores */
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Row necesita overflow visible para que sticky funcione */
.row {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible; /* Importante para sticky */
}

/* ============================================
   HERO SECTION - NUEVO
============================================ */
.hero-section {
    position: relative;
    height: 60vh;
    min-height: 500px;
    background: var(--navy-gradient);
    overflow: hidden;
    margin-top: -20px;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(26, 31, 54, 0.5), rgba(26, 31, 54, 0.7));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 2rem;
    max-width: 800px;
    animation: slideUp 1s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--secondary-gold);
    margin-bottom: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-family: var(--tienda-fuente-titulo);
}

.hero-text {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.8;
}

/* Elegant Button */
.btn-elegant {
    background: var(--gold-gradient);
    border: none;
    color: var(--dark-navy);
    padding: 15px 40px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
    text-decoration: none;
    display: inline-block;
}

.btn-elegant:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);
    color: var(--dark-navy);
}

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

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

/* ============================================
   BARRA DE CARACTERÍSTICAS - NUEVO
============================================ */
.features-bar {
    background: white;
    padding: 30px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: relative;
    z-index: 10;
}

.feature-item {
    text-align: center;
    padding: 0 20px;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: var(--dark-navy);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-navy);
    margin-bottom: 5px;
}

.feature-text {
    font-size: 0.9rem;
    color: var(--charcoal);
    opacity: 0.8;
}

/* ============================================
   CONTENEDOR PRINCIPAL MEJORADO
============================================ */
.tienda-contenedor-principal {
    background-color: var(--pearl);
    min-height: 100vh;
    padding: 80px 0;
    overflow-x: hidden;
}

/* ============================================
   ENCABEZADO PREMIUM MEJORADO
============================================ */
.tienda-encabezado {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.tienda-titulo-principal {
    font-family: var(--tienda-fuente-titulo);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--dark-navy);
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.tienda-titulo-principal::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--gold-gradient);
    border-radius: 2px;
}

.tienda-subtitulo {
    font-size: 1.2rem;
    color: var(--charcoal);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   BARRA LATERAL PREMIUM MEJORADA - FIJA
============================================ */
.tienda-barra-lateral {
    /* Por defecto NO sticky en móviles/tablets */
    position: relative;
    top: 0;
    height: fit-content;
    overflow-x: hidden;
    padding-right: 5px;
    margin-top: 20px;
}

/* Configuración para dispositivos grandes (Desktop) */
@media (min-width: 992px) {
    /* Asegurar que el contenedor de la columna permita sticky */
    .col-lg-2,
    .col-md-3 {
        position: relative;
        align-self: flex-start;
    }

    .tienda-barra-lateral {
        /* Sticky en PC/dispositivos grandes */
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px !important; /* Espacio para navbar */
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        will-change: transform !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
}

/* Scrollbar personalizado para la barra lateral */
.tienda-barra-lateral::-webkit-scrollbar {
    width: 6px;
}

.tienda-barra-lateral::-webkit-scrollbar-track {
    background: transparent;
}

.tienda-barra-lateral::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 10px;
}

.tienda-barra-lateral::-webkit-scrollbar-thumb:hover {
    background: var(--dark-navy);
}

.tienda-card-filtro {
    background: white;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--soft-shadow);
    margin-bottom: 30px;
    overflow: hidden;
    transition: all var(--tienda-transicion-media);
}

.tienda-card-filtro:hover {
    box-shadow: 0 15px 40px rgba(26, 31, 54, 0.15);
    transform: translateY(-2px);
}

.tienda-card-encabezado {
    background: var(--navy-gradient);
    color: white;
    padding: 16px 20px;
    border: none;
}

.tienda-card-titulo {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.tienda-card-titulo i {
    color: var(--secondary-gold);
}

/* Lista de categorías mejorada */
.tienda-lista-categorias {
    border: none;
}

.tienda-item-categoria {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0;
    transition: all var(--tienda-transicion-rapida);
}

.tienda-item-categoria:last-child {
    border-bottom: none;
}

.tienda-enlace-categoria {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 22px;
    text-decoration: none;
    color: var(--charcoal);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--tienda-transicion-rapida);
    position: relative;
}

.tienda-enlace-categoria i {
    color: var(--primary-gold);
    font-size: 1.15rem;
    min-width: 20px;
    text-align: center;
}

.tienda-enlace-categoria:hover {
    color: var(--primary-gold);
    background-color: rgba(212, 175, 55, 0.05);
    padding-left: 28px;
}

.tienda-item-categoria.active .tienda-enlace-categoria {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), rgba(244, 228, 188, 0.05));
    color: var(--primary-gold);
    font-weight: 600;
}

.tienda-item-categoria.active .tienda-enlace-categoria::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gold-gradient);
}

/* ============================================
   ESTILOS TEMÁTICOS PARA FILTROS DE LÍNEA
============================================ */

/* Filtro de NUTRICIÓN - Estados */
.filtro-linea[data-linea="nutricion"] {
    transition: all 0.3s ease;
}

.filtro-linea[data-linea="nutricion"]:hover {
    background: linear-gradient(90deg, rgba(0, 180, 166, 0.08), rgba(76, 175, 80, 0.08));
    color: #00B4A6;
}

.filtro-linea[data-linea="nutricion"]:hover i {
    color: #00B4A6;
    transform: scale(1.1);
}

/* Filtro de NUTRICIÓN - Activo */
.tienda-item-categoria.active .filtro-linea[data-linea="nutricion"] {
    background: linear-gradient(90deg, rgba(38, 166, 154, 0.95), rgba(102, 187, 106, 0.95));
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 180, 166, 0.3);
}

.tienda-item-categoria.active .filtro-linea[data-linea="nutricion"] i {
    color: white;
    transform: scale(1.15);
}

.tienda-item-categoria.active .filtro-linea[data-linea="nutricion"]::before {
    background: linear-gradient(180deg, #00B4A6, #4CAF50);
    width: 5px;
}

/* Filtro de BELLEZA - Estados */
.filtro-linea[data-linea="belleza"] {
    transition: all 0.3s ease;
}

.filtro-linea[data-linea="belleza"]:hover {
    background: linear-gradient(90deg, rgba(233, 30, 99, 0.08), rgba(244, 143, 177, 0.08));
    color: #E91E63;
}

.filtro-linea[data-linea="belleza"]:hover i {
    color: #E91E63;
    transform: scale(1.1);
}

/* Filtro de BELLEZA - Activo */
.tienda-item-categoria.active .filtro-linea[data-linea="belleza"] {
    background: linear-gradient(90deg, rgba(233, 30, 99, 0.95), rgba(244, 143, 177, 0.95));
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
}

.tienda-item-categoria.active .filtro-linea[data-linea="belleza"] i {
    color: white;
    transform: scale(1.15);
}

.tienda-item-categoria.active .filtro-linea[data-linea="belleza"]::before {
    background: linear-gradient(180deg, #E91E63, #F48FB1);
    width: 5px;
}

/* Filtro "Todos" - Mantener estilo dorado */
.filtro-linea[data-linea="todos"]:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(244, 228, 188, 0.08));
    color: var(--primary-gold);
}

.tienda-item-categoria.active .filtro-linea[data-linea="todos"] {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), rgba(244, 228, 188, 0.1));
    color: var(--primary-gold);
}

/* Filtros específicos para productos de Nutrición y Belleza */
.beneficios-grid,
.certificaciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px;
}

.beneficio-opcion,
.certificacion-opcion {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: all var(--tienda-transicion-rapida);
    border: 2px solid transparent;
}

.beneficio-opcion:hover,
.certificacion-opcion:hover {
    background: var(--pearl);
    border-color: var(--primary-gold);
}

.beneficio-opcion input[type="checkbox"],
.certificacion-opcion input[type="checkbox"] {
    margin-right: 10px;
    accent-color: var(--primary-gold);
    transform: scale(1.2);
}

.beneficio-texto,
.certificacion-texto {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--charcoal);
}

.beneficio-texto i,
.certificacion-texto i {
    margin-right: 8px;
    color: var(--primary-gold);
    font-size: 0.9rem;
}

.beneficio-opcion:has(input:checked),
.certificacion-opcion:has(input:checked) {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), rgba(244, 228, 188, 0.05));
    border-color: var(--primary-gold);
}

.beneficio-opcion:has(input:checked) .beneficio-texto,
.certificacion-opcion:has(input:checked) .certificacion-texto {
    color: var(--primary-gold);
    font-weight: 600;
}

/* Herramientas Interactivas */
.herramientas-interactivas {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px 20px;
    margin: 30px 0;
    border-radius: 20px;
}

.herramienta-card {
    background: white;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    transition: all var(--tienda-transicion-rapida);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: 100%;
    border: 2px solid transparent;
}

.herramienta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-color: var(--primary-gold);
}

.herramienta-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: var(--gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.herramienta-card h4 {
    color: var(--charcoal);
    margin-bottom: 15px;
    font-weight: 600;
}

.herramienta-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.btn-herramienta {
    background: var(--gold-gradient);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    transition: all var(--tienda-transicion-rapida);
    cursor: pointer;
}

.btn-herramienta:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Sección Educativa */
.seccion-educativa {
    margin: 40px 0;
    padding: 30px 20px;
}

.seccion-educativa h3 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--charcoal);
    font-weight: 700;
}

.consejo-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: 100%;
    transition: all var(--tienda-transicion-rapida);
    border-left: 5px solid;
}

.consejo-nutricion {
    border-left-color: #4CAF50;
}

.consejo-belleza {
    border-left-color: #E91E63;
}

.consejo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.consejo-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.consejo-header i {
    font-size: 18px;
    margin-right: 10px;
}

.consejo-nutricion .consejo-header i {
    color: #4CAF50;
}

.consejo-belleza .consejo-header i {
    color: #E91E63;
}

.consejo-header span {
    font-weight: 600;
    color: var(--charcoal);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

.consejo-card h5 {
    color: var(--charcoal);
    margin-bottom: 10px;
    font-weight: 600;
}

.consejo-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 14px;
}

.consejo-link {
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all var(--tienda-transicion-rapida);
}

.consejo-link:hover {
    color: var(--secondary-gold);
    text-decoration: none;
}

.consejo-link i {
    margin-left: 5px;
    transition: all var(--tienda-transicion-rapida);
}

.consejo-link:hover i {
    transform: translateX(3px);
}

/* Sección de Testimonios */
.seccion-testimonios {
    margin: 50px 0;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
}

.seccion-testimonios h3 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--charcoal);
    font-weight: 700;
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.testimonio-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: all var(--tienda-transicion-rapida);
    border-top: 4px solid;
    position: relative;
}

.testimonio-nutricion {
    border-top-color: #4CAF50;
}

.testimonio-belleza {
    border-top-color: #E91E63;
}

.testimonio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.testimonio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.cliente-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.cliente-avatar {
    margin-right: 15px;
}

.cliente-datos h5 {
    margin: 0 0 5px 0;
    color: var(--charcoal);
    font-weight: 600;
    font-size: 16px;
}

.estrellas {
    color: #FFD700;
    font-size: 14px;
    margin-bottom: 3px;
}

.tiempo-uso {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.linea-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nutricion-badge {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.belleza-badge {
    background: rgba(233, 30, 99, 0.1);
    color: #E91E63;
}

/* ============================================
   TEXTO DE STOCK - INDICADORES DE DISPONIBILIDAD
============================================ */
.producto-stock {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 5px;
    margin-bottom: 8px;
    font-family: var(--tienda-fuente-cuerpo);
}

/* Estado: En Stock - Verde */
.producto-stock.stock-disponible {
    color: #4CAF50;
}

/* Estado: Agotado - Rojo */
.producto-stock.stock-agotado {
    color: #F44336;
}

/* Responsive - Ajustes para móvil */
@media (max-width: 768px) {
    .producto-stock {
        font-size: 10px;
        margin-top: 4px;
        margin-bottom: 6px;
    }
}

.testimonio-card p {
    color: #444;
    line-height: 1.6;
    margin-bottom: 15px;
    font-style: italic;
    font-size: 14px;
}

.producto-resenado {
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.producto-resenado small {
    color: #666;
    font-weight: 500;
}

.ver-mas-testimonios {
    text-align: center;
}

.btn-ver-mas-testimonios {
    background: var(--gold-gradient);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: all var(--tienda-transicion-rapida);
    cursor: pointer;
}

.btn-ver-mas-testimonios:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

.btn-ver-mas-testimonios i {
    margin-left: 8px;
    transition: all var(--tienda-transicion-rapida);
}

.btn-ver-mas-testimonios:hover i {
    transform: translateX(5px);
}

/* Responsive para testimonios */
@media (max-width: 768px) {
    .testimonios-grid {
        grid-template-columns: 1fr;
    }

    .testimonio-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .linea-badge {
        margin-top: 10px;
    }

    .cliente-info {
        margin-bottom: 10px;
    }
}

/* Búsqueda mejorada */
.tienda-formulario-busqueda {
    padding: 20px;
}

.tienda-input-busqueda {
    border: 2px solid transparent;
    background: var(--pearl);
    border-radius: 50px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all var(--tienda-transicion-rapida);
}

.tienda-input-busqueda:focus {
    border-color: var(--primary-gold);
    background: white;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
    outline: none;
}

.tienda-boton-busqueda {
    background: var(--gold-gradient);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: var(--dark-navy);
    transition: all var(--tienda-transicion-rapida);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tienda-boton-busqueda:hover {
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* ============================================
   BANNER DE OFERTAS - MEJORADO CON ALTO CONTRASTE
============================================ */
.banner-ofertas {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FDC830 100%);
    color: white;
    padding: 30px 40px;
    border-radius: 16px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.3);
}

.banner-ofertas::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.banner-contenido {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.oferta-icono {
    font-size: 3rem;
    color: white;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.oferta-texto {
    flex: 1;
}

.oferta-texto h3 {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #FFFFFF;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.oferta-texto p {
    font-size: 1rem;
    color: #FFFFFF;
    font-weight: 500;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    margin: 0;
}

.oferta-contador {
    display: flex;
    gap: 12px;
}

.contador-item {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 1);
    padding: 12px 18px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.contador-numero {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FF6B35;
    line-height: 1;
    text-shadow: none;
}

.contador-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #555;
    font-weight: 600;
    text-shadow: none;
    margin-top: 4px;
}

/* ============================================
   TARJETAS DE PRODUCTO PREMIUM MEJORADAS
============================================ */
.tienda-grid-productos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 80px;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
}

.tienda-card-producto {
    background: white;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}

.tienda-card-producto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.tienda-card-producto:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
}

.tienda-card-producto:hover::before {
    opacity: 1;
}

/* Efectos específicos para tema nutrición */
body.tema-nutricion .tienda-card-producto:hover {
    box-shadow:
        0 25px 50px var(--nutricion-shadow),
        0 15px 35px rgba(0, 180, 166, 0.2),
        0 5px 15px rgba(0, 105, 92, 0.1);
    border-color: var(--nutricion-primary);
}

/* Efectos específicos para tema belleza */
body.tema-belleza .tienda-card-producto:hover {
    box-shadow:
        0 25px 50px var(--belleza-shadow),
        0 15px 35px rgba(233, 30, 99, 0.2),
        0 5px 15px rgba(136, 14, 79, 0.1);
    border-color: var(--belleza-primary);
}

/* Badge de descuento y líneas */
.producto-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    gap: 5px;
}

.producto-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

.badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.badge-nutricion {
    background: linear-gradient(135deg, #00B4A6 0%, #4CAF50 100%);
}

.badge-belleza {
    background: linear-gradient(135deg, #E91E63 0%, #F48FB1 100%);
}

.badge i {
    font-size: 10px;
}

.badge-new {
    background: var(--gold-gradient);
    color: var(--dark-navy);
}

.badge-sale {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

/* Contenedor de imagen mejorado */
.tienda-imagen-contenedor {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #f8f8f8;
}

.tienda-contenedor-imagen {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #f8f8f8;
}

.tienda-imagen-producto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all var(--tienda-transicion-lenta);
    background: white;
}

.tienda-card-producto:hover .tienda-imagen-producto {
    transform: scale(1.08);
}

.tienda-card-producto:hover .tienda-overlay-acciones {
    opacity: 1;
}

/* ============================================
   OVERLAY DE ACCIONES RÁPIDAS - DISEÑO PREMIUM
   Glassmorphism y micro-interacciones
============================================ */
.tienda-overlay-acciones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 5;
    pointer-events: none;
}

.tienda-card-producto:hover .tienda-overlay-acciones {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Botones con efecto glassmorphism */
.tienda-boton-accion {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #2c3e50;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo en hover */
.tienda-boton-accion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    transition: width 0.4s ease, height 0.4s ease;
    transform: translate(-50%, -50%);
}

.tienda-boton-accion:hover::before {
    width: 100%;
    height: 100%;
}

/* Hover con colores específicos */
.tienda-boton-accion:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35), 0 4px 10px rgba(212, 175, 55, 0.2);
    color: white;
}

/* Botón de Ver - Azul */
.tienda-boton-accion:nth-child(1):hover {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 12px 30px rgba(52, 152, 219, 0.35), 0 4px 10px rgba(52, 152, 219, 0.2);
}

/* Botón de Carrito - Dorado */
.tienda-boton-accion:nth-child(2):hover {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35), 0 4px 10px rgba(212, 175, 55, 0.2);
}

/* Botón de Favoritos - Rosa/Rojo */
.tienda-boton-accion:nth-child(3):hover {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 12px 30px rgba(231, 76, 60, 0.35), 0 4px 10px rgba(231, 76, 60, 0.2);
}

/* Animación de entrada escalonada */
.tienda-card-producto:hover .tienda-boton-accion:nth-child(1) {
    animation: bounceInAction 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s both;
}

.tienda-card-producto:hover .tienda-boton-accion:nth-child(2) {
    animation: bounceInAction 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
}

.tienda-card-producto:hover .tienda-boton-accion:nth-child(3) {
    animation: bounceInAction 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s both;
}

@keyframes bounceInAction {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tienda-boton-accion:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

.overlay-btn {
    background: white;
    color: var(--dark-navy);
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.tienda-card-producto:hover .overlay-btn {
    opacity: 1;
    transform: translateY(0);
}

.tienda-card-producto:hover .overlay-btn:first-child {
    transition-delay: 0.1s;
}

.tienda-card-producto:hover .overlay-btn:last-child {
    transition-delay: 0.2s;
}

.overlay-btn:hover {
    background: var(--gold-gradient);
    color: var(--dark-navy);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* Contenido de la tarjeta mejorado */
.tienda-info-producto {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tienda-contenido-card {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tienda-nombre-producto {
    font-family: var(--tienda-fuente-titulo);
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 47px;
}

.tienda-descripcion-producto {
    color: var(--charcoal);
    opacity: 0.8;
    font-size: 0.95rem;
    margin-bottom: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tienda-descripcion-corta {
    color: var(--charcoal);
    opacity: 0.8;
    font-size: 0.95rem;
    margin-bottom: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tienda-categoria-producto {
    font-size: 13px;
    color: #95a5a6;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.tienda-etiquetas {
    display: flex;
    gap: 8px;
}

.tienda-etiqueta {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tienda-precio {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.5rem;
    color: var(--primary-gold);
    font-weight: 700;
}

.tienda-precio-contenedor {
    margin: 10px 0 15px 0;
}

.tienda-precio-actual {
    font-size: 26px;
    font-weight: 700;
    color: #d4af37;
}

/* Acciones de la tarjeta mejoradas */
.tienda-acciones-card {
    padding: 20px 25px;
    background: rgba(244, 228, 188, 0.1);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    display: flex;
    gap: 10px;
}

.tienda-acciones-producto {
    margin-top: auto;
}

.tienda-boton-principal {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.tienda-boton-principal:hover {
    background: linear-gradient(135deg, #f4d03f 0%, #d4af37 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.tienda-boton-principal i {
    font-size: 15px;
}

.tienda-boton-detalle {
    flex: 1;
    padding: 10px 20px;
    border: 2px solid var(--dark-navy);
    background: transparent;
    color: var(--dark-navy);
    border-radius: 50px;
    font-weight: 600;
    transition: all var(--tienda-transicion-rapida);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tienda-boton-detalle:hover {
    background: var(--dark-navy);
    color: white;
    transform: translateY(-2px);
}

.tienda-boton-carrito {
    flex: 1;
    padding: 10px 20px;
    background: var(--gold-gradient);
    border: none;
    color: var(--dark-navy);
    border-radius: 50px;
    font-weight: 600;
    transition: all var(--tienda-transicion-rapida);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tienda-boton-carrito:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.stock-disponible {
    font-size: 13px;
    color: #27ae60;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stock-disponible i {
    font-size: 12px;
}

.tienda-stock-info {
    margin-bottom: 10px;
}

/* ============================================
   MODAL DEL CARRITO - DISEÑO MEJORADO
============================================ */
#carritoModal .modal-dialog {
    animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#carritoModal.show .modal-content {
    animation: modalContentFadeIn 0.3s ease-out 0.2s both;
}

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

.carrito-header {
    background: linear-gradient(135deg, #1a2332 0%, #2d3561 50%, #1a2332 100%);
    color: white;
    border: none;
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

/* Asegurar que el modal del carrito tenga estructura flexbox correcta */
/* Z-index muy alto para estar por encima del navbar (navbar = 10000) */
#carritoModal {
    z-index: 10500 !important;
}

#carritoModal.show {
    z-index: 10500 !important;
}

/* Backdrop del modal también debe estar por encima del navbar */
.modal-backdrop.show {
    z-index: 10400 !important;
}

#carritoModal .modal-dialog {
    margin: 0 auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 800px !important;
}

#carritoModal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    position: relative !important;
    border-radius: 0 !important;
}

#carritoModal .modal-header {
    flex-shrink: 0 !important;
    z-index: 1 !important;
    position: relative;
}

#carritoModal .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 0 !important;
    min-height: 0;
}

#carritoModal .modal-footer {
    flex-shrink: 0 !important;
    z-index: 10;
    position: relative;
}

.carrito-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--secondary-gold), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.carrito-header .modal-title {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.3rem;
    color: white;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.carrito-header .modal-title i {
    color: var(--secondary-gold);
    font-size: 1.5rem;
    animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.carrito-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 8px;
}

.carrito-header .btn-close:hover {
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.carrito-items-container {
    max-height: none;
    overflow-y: visible;
    padding: 0;
    background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
}

.carrito-items-container::-webkit-scrollbar {
    width: 8px;
}

.carrito-items-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.carrito-items-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border-radius: 10px;
}

.carrito-items-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gold);
}

.carrito-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 15px;
    position: relative;
}

.carrito-item:hover {
    background: linear-gradient(135deg, rgba(250, 250, 250, 0.5) 0%, #ffffff 100%);
    border-left: 4px solid var(--primary-gold);
    padding-left: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transform: translateX(2px);
}

.carrito-item-imagen {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid rgba(212, 175, 55, 0.1);
    flex-shrink: 0;
}

.carrito-item:hover .carrito-item-imagen {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
    border-color: var(--primary-gold);
    transform: scale(1.02);
}

.carrito-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: center;
    padding-right: 10px;
}

.carrito-item-nombre {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--dark-navy);
    line-height: 1.3;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carrito-item-detalles {
    font-size: 0.75rem;
    color: var(--charcoal);
    opacity: 0.75;
    margin: 0;
    padding: 3px 8px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
    font-weight: 500;
}

.carrito-item-precio-unitario {
    font-size: 0.85rem;
    color: var(--charcoal);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.carrito-item-precio-unitario strong {
    color: var(--primary-gold);
    font-size: 1.1rem;
    font-weight: 700;
}

.carrito-item-controles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 160px;
    padding: 5px 0;
}

.cantidad-control {
    display: flex;
    align-items: center;
    gap: 3px;
    background: white;
    border-radius: 50px;
    padding: 5px 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.25);
    width: 100%;
    justify-content: center;
}

.cantidad-btn {
    background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.cantidad-btn:hover {
    background: linear-gradient(135deg, var(--secondary-gold), var(--primary-gold));
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
}

.cantidad-btn:active {
    transform: scale(0.95);
}

.cantidad-valor {
    min-width: 50px;
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--dark-navy);
    user-select: none;
    font-family: var(--tienda-fuente-titulo);
}

.carrito-item-subtotal {
    text-align: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(244, 228, 188, 0.18));
    border-radius: 12px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    width: 100%;
}

.carrito-item-subtotal-label {
    font-size: 0.7rem;
    color: var(--charcoal);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.carrito-item-subtotal-valor {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-gold);
    display: block;
    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.25);
    font-family: var(--tienda-fuente-titulo);
}

.carrito-item-acciones {
    position: absolute;
    top: 12px;
    right: 12px;
}

.btn-eliminar-item {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.2);
    backdrop-filter: blur(10px);
}

.btn-eliminar-item:hover {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border-color: #dc3545;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.45);
}

.btn-eliminar-item:active {
    transform: scale(0.9) rotate(90deg);
}

.carrito-resumen {
    padding: 20px 25px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    border-top: 2px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08);
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.resumen-item:hover {
    background: rgba(212, 175, 55, 0.08);
    transform: translateX(2px);
}

.resumen-item span:first-child {
    color: var(--charcoal);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
}

.resumen-item span:last-child {
    font-weight: 700;
    color: var(--dark-navy);
    font-size: 1.05rem;
}

.resumen-item.total {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 12px;
    padding: 15px 18px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(244, 228, 188, 0.2));
    border: 2px solid rgba(212, 175, 55, 0.35);
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
}

.resumen-item.total span:first-child {
    color: var(--dark-navy);
    font-weight: 800;
    font-size: 1.1rem;
}

.resumen-item.total span:last-child {
    color: var(--primary-gold);
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
    font-family: var(--tienda-fuente-titulo);
}

.carrito-footer {
    background: linear-gradient(to bottom, #f8f9fa 0%, white 100%);
    padding: 20px 25px;
    border-top: 2px solid rgba(212, 175, 55, 0.2);
    gap: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carrito-footer .btn-outline-secondary {
    padding: 12px 24px;
    border: 2px solid var(--charcoal);
    color: var(--charcoal);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.carrito-footer .btn-outline-secondary:hover {
    background: var(--dark-navy);
    border-color: var(--dark-navy);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 35, 50, 0.3);
}

.btn-pagar {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold) 100%);
    border: none;
    color: white;
    padding: 14px 35px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.95rem;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    position: relative;
    overflow: hidden;
}

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

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

.btn-pagar:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6);
    background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--primary-gold) 100%);
}

.btn-pagar:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    .modal-content {
        min-height: 100vh;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .carrito-header {
        padding: 22px 20px;
        background: linear-gradient(135deg, #1a2332 0%, #2d3561 100%);
    }

    .carrito-header .modal-title {
        font-size: 1.3rem;
        gap: 10px;
    }

    .carrito-header .modal-title i {
        font-size: 1.5rem;
    }

    .modal-body {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .carrito-items-container {
        flex: 1;
        max-height: none;
        overflow-y: auto;
        padding-bottom: 20px;
    }

    .carrito-item {
        flex-direction: column;
        padding: 20px 15px;
        gap: 15px;
        position: relative;
    }

    .carrito-item:hover {
        border-left-width: 4px;
        padding-left: 11px;
    }

    .carrito-item-imagen {
        width: 100%;
        height: 200px;
        border-radius: 12px;
    }

    .carrito-item-info {
        padding: 0;
        width: 100%;
    }

    .carrito-item-nombre {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }

    .carrito-item-detalles {
        font-size: 0.85rem;
        padding: 5px 12px;
        margin-bottom: 8px;
    }

    .carrito-item-precio-unitario {
        font-size: 0.95rem;
    }

    .carrito-item-precio-unitario strong {
        font-size: 1.3rem;
    }

    .carrito-item-controles {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: auto;
        width: 100%;
        padding: 0;
    }

    .cantidad-control {
        flex-shrink: 0;
    }

    .carrito-item-subtotal {
        padding: 6px 10px;
    }

    .carrito-item-subtotal-label {
        font-size: 0.75rem;
    }

    .carrito-item-subtotal-valor {
        font-size: 1.2rem;
    }

    .carrito-item-acciones {
        position: absolute;
        top: 20px;
        right: 15px;
    }

    .btn-eliminar-item {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        padding: 8px;
    }

    .carrito-resumen {
        position: sticky;
        bottom: 0;
        background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
        box-shadow: 0 -8px 25px rgba(0,0,0,0.12);
        z-index: 10;
        padding: 20px 20px;
    }

    .resumen-item {
        font-size: 1rem;
        padding: 8px 12px;
        margin-bottom: 12px;
    }

    .resumen-item.total {
        font-size: 1.3rem;
        padding: 15px 15px;
        margin-top: 12px;
    }

    .resumen-item.total span:last-child {
        font-size: 1.4rem;
    }

    .carrito-footer {
        flex-direction: column;
        gap: 15px;
        box-shadow: 0 -8px 25px rgba(0,0,0,0.12);
        padding: 25px 20px;
    }

    .carrito-footer .btn-outline-secondary {
        width: 100%;
        margin: 0;
        padding: 16px 24px;
        font-size: 1rem;
    }

    .carrito-footer button {
        width: 100%;
        margin: 0;
    }

    .btn-pagar {
        padding: 18px 35px;
        font-size: 1rem;
        letter-spacing: 1.2px;
    }
}

/* Responsive para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .modal-dialog {
        max-width: 85%;
    }

    .carrito-item {
        padding: 25px 30px;
        gap: 25px;
    }

    .carrito-item-imagen {
        width: 105px;
        height: 125px;
    }

    .carrito-header {
        padding: 26px 32px;
    }

    .carrito-resumen {
        padding: 23px 32px;
    }

    .carrito-footer {
        padding: 23px 32px;
    }
}

/* ============================================
   NEWSLETTER SECTION - NUEVO
============================================ */
.newsletter-section {
    background: var(--navy-gradient);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.newsletter-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

.newsletter-title {
    font-family: var(--tienda-fuente-titulo);
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

.newsletter-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    gap: 15px;
}

.newsletter-input {
    flex: 1;
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.newsletter-btn {
    padding: 15px 40px;
    background: var(--gold-gradient);
    border: none;
    border-radius: 50px;
    color: var(--dark-navy);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
}

/* ============================================
   TESTIMONIOS - NUEVO
============================================ */
.testimonials-section {
    padding: 80px 0;
    background: white;
}

.testimonial-card {
    background: var(--pearl);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    position: relative;
    margin: 0 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all var(--tienda-transicion-media);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.quote-icon {
    font-size: 3rem;
    color: var(--primary-gold);
    margin-bottom: 20px;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    font-style: italic;
    color: var(--charcoal);
}

.testimonial-author {
    font-weight: 600;
    color: var(--dark-navy);
    font-size: 1.1rem;
}

.testimonial-role {
    color: var(--primary-gold);
    font-size: 0.9rem;
}

/* Ocultar carrito del header del template original */
.cart-dropdown {
    display: none !important;
}

/* ============================================
   FIX SUPER AGRESIVO: BOTÓN DEBE FUNCIONAR SÍ O SÍ
============================================ */

/* Eliminar overlays y pseudoelementos que puedan bloquear */
.tienda-card-producto::before,
.tienda-card-producto::after,
.tienda-info-producto::before,
.tienda-info-producto::after,
.tienda-acciones-producto::before,
.tienda-acciones-producto::after {
    content: none !important;
    display: none !important;
}

/* Todo debe permitir clicks */
.tienda-card-producto,
.tienda-card-producto *,
.tienda-info-producto,
.tienda-info-producto * {
    pointer-events: auto !important;
}

.tienda-acciones-producto {
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tienda-boton-principal {
    /* Reset completo */
    all: unset !important;

    /* Estilos base */
    display: inline-block !important;
    padding: 14px 32px !important;
    text-align: center !important;

    /* Degradado Verde-Amarillo (Nutrición por defecto) */
    background: linear-gradient(135deg, #4ade80 0%, #facc15 100%) !important;
    color: #ffffff !important;

    /* Tipografía */
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-family: inherit !important;
    line-height: 1.5 !important;

    /* Forma */
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4) !important;

    /* Interactividad */
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;

    /* Posicionamiento */
    position: relative !important;
    z-index: 999999 !important;

    /* Transición */
    transition: all 0.3s ease !important;
}

.tienda-boton-principal:hover {
    background: linear-gradient(135deg, #22c55e 0%, #eab308 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.6) !important;
}

.tienda-boton-principal:active {
    transform: translateY(0px) !important;
    background: linear-gradient(135deg, #4ade80 0%, #facc15 100%) !important;
}

.tienda-boton-principal * {
    pointer-events: none !important;
}

/* Botones cuando el tema es BELLEZA */
body.tema-belleza .tienda-boton-principal {
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%) !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4) !important;
}

body.tema-belleza .tienda-boton-principal:hover {
    background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%) !important;
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.6) !important;
}

body.tema-belleza .tienda-boton-principal:active {
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%) !important;
}

/* Botones cuando el tema es NUTRICIÓN (mantener verde-amarillo) */
body.tema-nutricion .tienda-boton-principal {
    background: linear-gradient(135deg, #4ade80 0%, #facc15 100%) !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4) !important;
}

body.tema-nutricion .tienda-boton-principal:hover {
    background: linear-gradient(135deg, #22c55e 0%, #eab308 100%) !important;
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.6) !important;
}

body.tema-nutricion .tienda-boton-principal:active {
    background: linear-gradient(135deg, #4ade80 0%, #facc15 100%) !important;
}

/* ============================================
   BOTÓN FLOTANTE MEJORADO
============================================ */
.tienda-carrito-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold) 100%);
    border: 3px solid white;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.5rem;
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

.tienda-carrito-flotante:hover {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
}

.tienda-carrito-flotante:active {
    transform: scale(0.95);
}

.tienda-carrito-flotante.shake {
    animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-8px) rotate(-10deg); }
    75% { transform: translateX(8px) rotate(10deg); }
}

/* Carrito flotante tema BELLEZA (Rosa-Fucsia) */
body.tema-belleza .tienda-carrito-flotante {
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%) !important;
    box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4) !important;
}

body.tema-belleza .tienda-carrito-flotante:hover {
    box-shadow: 0 15px 40px rgba(236, 72, 153, 0.6) !important;
}

/* Carrito flotante tema NUTRICIÓN (Verde-Amarillo) */
body.tema-nutricion .tienda-carrito-flotante {
    background: linear-gradient(135deg, #4ade80 0%, #facc15 100%) !important;
    box-shadow: 0 10px 30px rgba(74, 222, 128, 0.4) !important;
}

body.tema-nutricion .tienda-carrito-flotante:hover {
    box-shadow: 0 15px 40px rgba(74, 222, 128, 0.6) !important;
}

.tienda-carrito-flotante .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: 3px solid white;
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(220, 53, 69, 0.7);
    }
}

.tienda-carrito-flotante .badge.new-item {
    animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* Ajustes del contador en móviles */
@media (max-width: 768px) {
    .tienda-carrito-flotante .badge {
        top: 2px;
        right: 2px;
        min-width: 20px;
        height: 20px;
        font-size: 0.6rem;
        border-width: 2px;
    }
}

@media (max-width: 480px) {
    .tienda-carrito-flotante .badge {
        top: 3px;
        right: 3px;
        min-width: 18px;
        height: 18px;
        font-size: 0.55rem;
        border-width: 1.5px;
    }
}

/* ============================================
   ANIMACIONES Y EFECTOS
============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pearl);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-navy);
}

/* ============================================
   RESPONSIVE DESIGN
============================================ */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .tienda-contenedor-imagen {
        height: 300px;
    }

    .tienda-carrito-flotante {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    /* Modal del carrito en móviles */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    .modal-content {
        min-height: 100vh;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
    }

    .carrito-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        gap: 15px;
    }

    .carrito-item-imagen {
        width: 100%;
        height: auto;
        max-height: 200px;
    }

    .carrito-item-info {
        width: 100%;
    }

    .carrito-item-controles {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
    }

    .cantidad-control {
        order: 2;
    }

    .btn-eliminar-item {
        order: 1;
        align-self: flex-end;
    }

    .carrito-items-container {
        max-height: calc(100vh - 350px);
        padding: 10px;
    }

    .carrito-resumen {
        position: sticky;
        bottom: 0;
        background: white;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        z-index: 10;
    }

    .modal-footer {
        flex-direction: column;
        gap: 10px;
        position: sticky;
        bottom: 0;
        background: white;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    }

    .modal-footer button {
        width: 100%;
        margin: 0;
    }

    /* Ajustes de tipografía */
    .tienda-titulo-principal {
        font-size: 2rem;
    }

    .feature-item {
        margin-bottom: 20px;
    }

    /* Barra lateral en móviles pequeños solamente */
    .tienda-barra-lateral {
        margin-bottom: 30px;
    }

    /* Filtros colapsables en móviles */
    .tienda-card-filtro {
        margin-bottom: 15px;
    }

    .tienda-card-encabezado {
        cursor: pointer;
        position: relative;
    }

    .tienda-card-encabezado::after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }

    .tienda-card-filtro.collapsed .tienda-card-encabezado::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Precio y acciones en móviles */
    .tienda-info-producto {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tienda-precio {
        margin-top: 5px;
    }

    .tienda-acciones-card {
        flex-direction: column;
        gap: 10px;
    }

    .tienda-boton-detalle,
    .tienda-boton-carrito {
        width: 100%;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr);
    }

    .modal-dialog {
        max-width: 90%;
    }
}

/* Media query específica para móviles pequeños */
@media (max-width: 480px) {
    .tienda-titulo-principal {
        font-size: 1.8rem;
    }

    .tienda-subtitulo {
        font-size: 1rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .btn-elegant {
        padding: 12px 25px;
        font-size: 0.9rem;
    }

    /* Tarjetas de producto en móviles */
    .tienda-card-producto {
        border-radius: 15px;
    }

    .tienda-contenedor-imagen {
        height: 250px;
    }

    .tienda-nombre-producto {
        font-size: 1.1rem;
    }

    .tienda-precio {
        font-size: 1.3rem;
    }

    /* Features bar responsive */
    .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .feature-title {
        font-size: 1rem;
    }

    .feature-text {
        font-size: 0.85rem;
    }

    /* Modal del carrito en móviles pequeños */
    .modal-header {
        padding: 20px !important;
    }

    .modal-title {
        font-size: 1.2rem !important;
    }

    .carrito-item {
        padding: 12px;
    }

    .carrito-item-imagen {
        width: 100%;
        height: auto;
        max-height: 150px;
    }

    .carrito-item-nombre {
        font-size: 1rem;
    }

    .carrito-item-detalles {
        font-size: 0.85rem;
    }

    .cantidad-control {
        transform: scale(0.9);
    }

    .carrito-resumen {
        padding: 15px;
    }

    .resumen-item {
        font-size: 0.95rem;
    }

    .resumen-item.total {
        font-size: 1.1rem;
    }

    /* Newsletter en móviles */
    .newsletter-title {
        font-size: 1.8rem;
    }

    .newsletter-subtitle {
        font-size: 1rem;
    }

    .newsletter-input,
    .newsletter-btn {
        font-size: 0.9rem;
        padding: 12px 20px;
    }

    /* Testimonials en móviles */
    .testimonial-card {
        padding: 25px;
        margin: 0 5px;
    }

    .quote-icon {
        font-size: 2rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }
}

/* ============================================
   ESTILOS PARA SELECTOR DE LÍNEAS MEJORADO
============================================ */
.lineas-selector-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.lineas-selector-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(0, 180, 166, 0.1), transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(233, 30, 99, 0.1), transparent 60%);
    animation: float 8s ease-in-out infinite;
}

.lineas-selector-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.lineas-titulo {
    font-family: var(--tienda-fuente-titulo);
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00B4A6, #E91E63, #4CAF50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    text-shadow: none;
}

.lineas-subtitulo {
    font-size: 1.2rem;
    color: #2C2C2C;
    margin-bottom: 50px;
    font-weight: 500;
}

.lineas-toggle-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.lineas-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 700px;
    width: 100%;
}

.lineas-toggle input[type="radio"] {
    display: none;
}

.linea-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 3px solid transparent;
    overflow: hidden;
}

.linea-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    z-index: 1;
    transition: opacity 0.4s ease;
}

.linea-option > * {
    position: relative;
    z-index: 2;
}

.linea-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.linea-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.linea-content {
    width: 100%;
}

.linea-content h4 {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    transition: all 0.4s ease;
}

.linea-content p {
    font-size: 1rem;
    margin: 0 0 15px 0;
    opacity: 0.8;
    transition: all 0.4s ease;
    font-weight: 500;
}

.linea-features {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Estados por defecto */
.linea-option.nutricion {
    background: linear-gradient(135deg, rgba(0, 180, 166, 0.05), rgba(76, 175, 80, 0.05));
}

.linea-option.nutricion .linea-icon {
    background: var(--nutricion-gradient-soft);
    color: var(--nutricion-primary);
    border: 2px solid var(--nutricion-primary);
}

.linea-option.nutricion .linea-content h4 {
    color: var(--nutricion-text-primary);
}

.linea-option.nutricion .linea-content p {
    color: var(--nutricion-text-secondary);
}

.linea-option.belleza {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05), rgba(244, 143, 177, 0.05));
}

.linea-option.belleza .linea-icon {
    background: var(--belleza-gradient-soft);
    color: var(--belleza-primary);
    border: 2px solid var(--belleza-primary);
}

.linea-option.belleza .linea-content h4 {
    color: var(--belleza-text-primary);
}

.linea-option.belleza .linea-content p {
    color: var(--belleza-text-secondary);
}

/* Estados hover */
.linea-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.linea-option.nutricion:hover {
    border-color: var(--nutricion-primary);
    background: linear-gradient(135deg, rgba(0, 180, 166, 0.1), rgba(76, 175, 80, 0.1));
}

.linea-option.belleza:hover {
    border-color: var(--belleza-primary);
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.1), rgba(244, 143, 177, 0.1));
}

.linea-option:hover .linea-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Estados activos */
.lineas-toggle input[type="radio"]:checked + .linea-option.nutricion {
    background: linear-gradient(135deg, #26A69A 0%, #66BB6A 100%);
    border-color: var(--nutricion-primary);
    box-shadow: 0 20px 60px var(--nutricion-shadow-strong);
    transform: translateY(-8px);
}

.lineas-toggle input[type="radio"]:checked + .linea-option.nutricion::before {
    opacity: 0.1;
}

.lineas-toggle input[type="radio"]:checked + .linea-option.nutricion .linea-icon {
    background: white;
    color: var(--nutricion-primary);
    transform: scale(1.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.lineas-toggle input[type="radio"]:checked + .linea-option.nutricion .linea-content h4,
.lineas-toggle input[type="radio"]:checked + .linea-option.nutricion .linea-content p {
    color: white;
}

.lineas-toggle input[type="radio"]:checked + .linea-option.belleza {
    background: var(--belleza-gradient-main);
    border-color: var(--belleza-primary);
    box-shadow: 0 20px 60px var(--belleza-shadow-strong);
    transform: translateY(-8px);
}

.lineas-toggle input[type="radio"]:checked + .linea-option.belleza::before {
    opacity: 0.1;
}

.lineas-toggle input[type="radio"]:checked + .linea-option.belleza .linea-icon {
    background: white;
    color: var(--belleza-primary);
    transform: scale(1.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.lineas-toggle input[type="radio"]:checked + .linea-option.belleza .linea-content h4,
.lineas-toggle input[type="radio"]:checked + .linea-option.belleza .linea-content p {
    color: white;
}

/* Animación para feature dots */
.lineas-toggle input[type="radio"]:checked + .linea-option .feature-dot {
    background: white !important;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* ============================================
   TEMAS DINÁMICOS - LÍNEA DE NUTRICIÓN
============================================ */
body.tema-nutricion {
    --primary-gold: var(--nutricion-primary);
    --secondary-gold: var(--nutricion-secondary);
    --accent-rose: var(--nutricion-accent);
    --gold-gradient: var(--nutricion-gradient-main);
    --navy-gradient: var(--nutricion-gradient-soft);
    --charcoal: var(--nutricion-text-primary);
}

/* ============================================
   ESTILOS DEL MODAL DE CARRITO - TEMA NUTRICIÓN
============================================ */
body.tema-nutricion .carrito-header {
    background: var(--nutricion-gradient-main) !important;
    color: white !important;
    border-bottom: 3px solid var(--nutricion-dark);
}

body.tema-nutricion .carrito-header::before {
    background: linear-gradient(90deg, transparent, var(--nutricion-secondary), transparent);
}

body.tema-nutricion .carrito-header .modal-title {
    color: white !important;
}

body.tema-nutricion .carrito-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

body.tema-nutricion .carrito-header .modal-title i {
    color: var(--nutricion-accent) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.tema-nutricion .carrito-footer {
    border-top-color: var(--nutricion-primary);
    background: linear-gradient(to top, var(--nutricion-light) 0%, white 100%);
}

body.tema-nutricion .btn-pagar {
    background: var(--nutricion-gradient-main) !important;
    box-shadow: 0 6px 20px var(--nutricion-shadow);
}

body.tema-nutricion .btn-pagar:hover {
    background: linear-gradient(135deg, var(--nutricion-dark) 0%, var(--nutricion-primary) 100%) !important;
    box-shadow: 0 12px 35px var(--nutricion-shadow-strong);
}

body.tema-nutricion .carrito-item:hover {
    border-left-color: var(--nutricion-primary);
}

body.tema-nutricion .carrito-item-imagen {
    border: 2px solid var(--nutricion-light);
}

body.tema-nutricion .carrito-item:hover .carrito-item-imagen {
    border-color: var(--nutricion-secondary);
    box-shadow: 0 8px 25px var(--nutricion-shadow);
}

body.tema-nutricion .cantidad-control {
    border-color: var(--nutricion-primary);
}

body.tema-nutricion .cantidad-btn {
    color: var(--nutricion-primary);
}

body.tema-nutricion .cantidad-btn:hover {
    background: var(--nutricion-primary);
    color: white;
}

body.tema-nutricion .carrito-item-precio-unitario strong {
    color: var(--nutricion-primary);
}

body.tema-nutricion .carrito-item-subtotal-valor {
    color: var(--nutricion-primary);
}

body.tema-nutricion .resumen-item.total {
    background: var(--nutricion-light);
    border-top-color: var(--nutricion-primary);
}

body.tema-nutricion .resumen-item.total span {
    color: var(--nutricion-dark);
}

body.tema-nutricion .hero-section {
    background: var(--nutricion-gradient-hero);
    color: white;
    position: relative;
    overflow: hidden;
}

body.tema-nutricion .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.2), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 20s linear infinite;
}

@keyframes sparkle {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-100px); }
}

body.tema-nutricion .hero-title,
body.tema-nutricion .hero-text,
body.tema-nutricion .hero-subtitle {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

body.tema-nutricion .btn-elegant {
    background: var(--nutricion-gradient-main);
    border-color: var(--nutricion-primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--nutricion-shadow);
}

body.tema-nutricion .btn-elegant:hover {
    background: linear-gradient(135deg, var(--nutricion-dark) 0%, var(--nutricion-primary) 100%);
    box-shadow: 0 8px 25px var(--nutricion-shadow-strong);
    transform: translateY(-3px);
    color: white;
}

body.tema-nutricion .tienda-card-encabezado {
    background: var(--nutricion-gradient-main);
    color: white;
}

body.tema-nutricion .tienda-card-titulo {
    color: white;
    font-weight: 600;
}

body.tema-nutricion .feature-icon {
    background: var(--nutricion-gradient-soft);
    color: var(--nutricion-primary);
    border: 2px solid var(--nutricion-primary);
    position: relative;
    overflow: hidden;
}

body.tema-nutricion .feature-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--nutricion-primary) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

body.tema-nutricion .feature-icon:hover::before {
    width: 100px;
    height: 100px;
}

body.tema-nutricion .feature-title {
    color: var(--nutricion-text-primary);
    font-weight: 600;
}

body.tema-nutricion .feature-text {
    color: var(--nutricion-text-secondary);
}

body.tema-nutricion .tienda-titulo-principal {
    color: var(--nutricion-text-primary);
}

body.tema-nutricion .tienda-subtitulo {
    color: var(--nutricion-text-secondary);
}

body.tema-nutricion .lineas-selector-section {
    background: var(--nutricion-gradient-soft);
    position: relative;
}

body.tema-nutricion .lineas-selector-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 180, 166, 0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(76, 175, 80, 0.15), transparent 40%),
        radial-gradient(circle at 60% 20%, rgba(129, 199, 132, 0.1), transparent 30%);
    animation: drift 15s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(1deg); }
    66% { transform: translateY(10px) rotate(-1deg); }
}

/* ============================================
   TEMAS DINÁMICOS - LÍNEA DE BELLEZA
============================================ */
body.tema-belleza {
    --primary-gold: var(--belleza-primary);
    --secondary-gold: var(--belleza-secondary);
    --accent-rose: var(--belleza-accent);
    --gold-gradient: var(--belleza-gradient-main);
    --navy-gradient: var(--belleza-gradient-soft);
    --charcoal: var(--belleza-text-primary);
}

/* ============================================
   ESTILOS DEL MODAL DE CARRITO - TEMA BELLEZA
============================================ */
body.tema-belleza .carrito-header {
    background: var(--belleza-gradient-main) !important;
    color: white !important;
    border-bottom: 3px solid var(--belleza-rose);
}

body.tema-belleza .carrito-header::before {
    background: linear-gradient(90deg, transparent, var(--belleza-secondary), transparent);
}

body.tema-belleza .carrito-header .modal-title {
    color: white !important;
}

body.tema-belleza .carrito-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

body.tema-belleza .carrito-header .modal-title i {
    color: var(--belleza-accent) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.tema-belleza .carrito-footer {
    border-top-color: var(--belleza-primary);
    background: linear-gradient(to top, var(--belleza-light) 0%, white 100%);
}

body.tema-belleza .btn-pagar {
    background: var(--belleza-gradient-main) !important;
    box-shadow: 0 6px 20px var(--belleza-shadow);
}

body.tema-belleza .btn-pagar:hover {
    background: linear-gradient(135deg, var(--belleza-rose) 0%, var(--belleza-primary) 100%) !important;
    box-shadow: 0 12px 35px var(--belleza-shadow-strong);
}

body.tema-belleza .carrito-item:hover {
    border-left-color: var(--belleza-primary);
}

body.tema-belleza .carrito-item-imagen {
    border: 2px solid var(--belleza-light);
}

body.tema-belleza .carrito-item:hover .carrito-item-imagen {
    border-color: var(--belleza-secondary);
    box-shadow: 0 8px 25px var(--belleza-shadow);
}

body.tema-belleza .cantidad-control {
    border-color: var(--belleza-primary);
}

body.tema-belleza .cantidad-btn {
    color: var(--belleza-primary);
}

body.tema-belleza .cantidad-btn:hover {
    background: var(--belleza-primary);
    color: white;
}

body.tema-belleza .carrito-item-precio-unitario strong {
    color: var(--belleza-primary);
}

body.tema-belleza .carrito-item-subtotal-valor {
    color: var(--belleza-primary);
}

body.tema-belleza .resumen-item.total {
    background: var(--belleza-light);
    border-top-color: var(--belleza-primary);
}

body.tema-belleza .resumen-item.total span {
    color: var(--belleza-rose);
}

body.tema-belleza .hero-section {
    background: var(--belleza-gradient-hero);
    color: white;
    position: relative;
    overflow: hidden;
}

body.tema-belleza .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(3px 3px at 25px 35px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 50px 75px, rgba(255, 215, 0, 0.3), transparent),
        radial-gradient(1px 1px at 85px 45px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 120px 85px, rgba(255, 215, 0, 0.2), transparent),
        radial-gradient(1px 1px at 155px 35px, rgba(255, 255, 255, 0.3), transparent);
    background-repeat: repeat;
    background-size: 180px 120px;
    animation: glitter 15s linear infinite;
}

@keyframes glitter {
    0% { transform: translateX(0px) rotate(0deg); }
    100% { transform: translateX(-180px) rotate(360deg); }
}

body.tema-belleza .hero-title,
body.tema-belleza .hero-text,
body.tema-belleza .hero-subtitle {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

body.tema-belleza .btn-elegant {
    background: var(--belleza-gradient-main);
    border-color: var(--belleza-primary);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--belleza-shadow);
}

body.tema-belleza .btn-elegant:hover {
    background: linear-gradient(135deg, var(--belleza-rose) 0%, var(--belleza-primary) 100%);
    box-shadow: 0 8px 25px var(--belleza-shadow-strong);
    transform: translateY(-3px);
    color: white;
}

body.tema-belleza .tienda-card-encabezado {
    background: var(--belleza-gradient-main);
    color: white;
}

body.tema-belleza .tienda-card-titulo {
    color: white;
    font-weight: 600;
}

body.tema-belleza .feature-icon {
    background: var(--belleza-gradient-soft);
    color: var(--belleza-primary);
    border: 2px solid var(--belleza-primary);
    position: relative;
    overflow: hidden;
}

body.tema-belleza .feature-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--belleza-primary) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

body.tema-belleza .feature-icon:hover::before {
    width: 100px;
    height: 100px;
}

body.tema-belleza .feature-title {
    color: var(--belleza-text-primary);
    font-weight: 600;
}

body.tema-belleza .feature-text {
    color: var(--belleza-text-secondary);
}

body.tema-belleza .tienda-titulo-principal {
    color: var(--belleza-text-primary);
}

body.tema-belleza .tienda-subtitulo {
    color: var(--belleza-text-secondary);
}

body.tema-belleza .lineas-selector-section {
    background: var(--belleza-gradient-soft);
    position: relative;
}

body.tema-belleza .lineas-selector-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(233, 30, 99, 0.15), transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(244, 143, 177, 0.15), transparent 40%),
        radial-gradient(circle at 50% 60%, rgba(252, 228, 236, 0.1), transparent 30%);
    animation: shimmer 12s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.05) rotate(2deg); opacity: 1; }
}

/* ============================================
   RESPONSIVE DESIGN PARA SELECTOR DE LÍNEAS
============================================ */
@media (max-width: 768px) {
    .lineas-titulo {
        font-size: 2.2rem;
    }

    .lineas-toggle {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 400px;
    }

    .linea-option {
        padding: 30px 25px;
    }

    .linea-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    .linea-content h4 {
        font-size: 1.4rem;
    }

    .linea-content p {
        font-size: 0.95rem;
    }

    .lineas-selector-section {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .lineas-titulo {
        font-size: 1.8rem;
    }

    .lineas-subtitulo {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .linea-option {
        padding: 15px;
        gap: 10px;
    }

    .linea-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .linea-content h4 {
        font-size: 1.1rem;
    }

    .linea-content p {
        font-size: 0.85rem;
    }
}

/* ============================================
   ESTILOS PARA BADGES DE LÍNEAS DE PRODUCTO
============================================ */
.producto-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge-nutricion {
    background: var(--nutricion-gradient-main);
    color: white;
    border: 2px solid var(--nutricion-primary);
    box-shadow: 0 4px 15px var(--nutricion-shadow);
    position: relative;
    overflow: hidden;
}

.badge-nutricion::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

.badge-belleza {
    background: var(--belleza-gradient-main);
    color: white;
    border: 2px solid var(--belleza-primary);
    box-shadow: 0 4px 15px var(--belleza-shadow);
    position: relative;
    overflow: hidden;
}

.badge-belleza::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite 1.5s;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

.badge-nutricion i,
.badge-belleza i {
    margin-right: 5px;
    font-size: 0.8rem;
}

/* Animaciones específicas para badges de línea */
.badge-nutricion:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--nutricion-shadow);
}

.badge-belleza:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--belleza-shadow);
}

/* Responsive para badges */
@media (max-width: 768px) {
    .producto-badges {
        top: 10px;
        left: 10px;
        gap: 6px;
    }

    .badge-nutricion,
    .badge-belleza {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    .badge-nutricion i,
    .badge-belleza i {
        margin-right: 3px;
        font-size: 0.7rem;
    }
}

/* ============================================
   OPTIMIZACIONES RESPONSIVE ADICIONALES
============================================ */

/* Tablet - Mejoras específicas */
@media (max-width: 992px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .lineas-selector-section {
        padding: 50px 0;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-text {
        font-size: 1.1rem;
    }
}

/* Mobile - Optimizaciones específicas para líneas */
@media (max-width: 576px) {
    .tienda-grid-productos {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero-text {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .btn-elegant {
        padding: 12px 30px;
        font-size: 0.9rem;
    }

    /* Ajustes específicos para filtros */
    .tienda-card-filtro {
        margin-bottom: 20px;
    }

    .tienda-enlace-categoria {
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    .tienda-enlace-categoria i {
        font-size: 1rem;
    }

    /* Productos en mobile */
    .tienda-card-producto {
        margin-bottom: 15px;
    }

    .tienda-imagen-producto {
        height: 250px;
    }

    .tienda-titulo-producto {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .tienda-precio-actual {
        font-size: 1.3rem;
    }

    /* Banner de ofertas responsive */
    .banner-ofertas {
        padding: 20px;
        margin: 20px 0;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .oferta-icono {
        font-size: 2.5rem;
    }

    .oferta-texto h3 {
        font-size: 1.4rem;
        color: #FFFFFF;
    }

    .oferta-texto p {
        font-size: 0.9rem;
        color: #FFFFFF;
    }

    .oferta-contador {
        justify-content: center;
        gap: 10px;
    }

    .contador-item {
        padding: 10px 15px;
    }

    .contador-numero {
        font-size: 1.5rem;
    }

    .contador-label {
        font-size: 0.7rem;
    }

    .contador-numero {
        font-size: 1.2rem;
        color: var(--secondary-gold);
        text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    }
}

/* Extra Small devices - Ajustes finales */
@media (max-width: 360px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .lineas-titulo {
        font-size: 1.6rem;
    }

    .tienda-imagen-producto {
        height: 200px;
    }

    .features-bar .feature-item {
        text-align: center;
        margin-bottom: 15px;
    }

    .feature-title {
        font-size: 0.9rem;
    }

    .feature-text {
        font-size: 0.8rem;
    }
}

/* ============================================
   ANIMACIONES EXCLUSIVAS PREMIUM
============================================ */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sparkle {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
    100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Notificaciones premium */
.notificacion-premium {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    padding: 20px 30px;
    border-radius: 50px;
    color: white;
    font-weight: 500;
    z-index: 9999;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notificacion-premium.show {
    transform: translateX(0);
    animation: slideInRight 0.5s ease-out;
}

.notificacion-premium i {
    font-size: 24px;
    animation: pulse 1s infinite;
}

/* Badge animado del carrito */
.tienda-carrito-flotante .badge {
    animation: pulse 0.5s ease-out;
}

.tienda-carrito-flotante.shake {
    animation: shake 0.5s ease-out;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg); }
    20%, 40%, 60%, 80% { transform: rotate(5deg); }
}

/* Loading spinner elegante */
.loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    z-index: 9999;
    display: none;
}

.loading-spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid var(--pearl);
    border-top-color: var(--primary-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Hover effect en productos mejorado */
.tienda-card-producto:hover {
    animation: float 3s ease-in-out infinite;
}

/* Glow effect para badges */
.producto-badge {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 10px -10px var(--primary-gold); }
    to { box-shadow: 0 0 20px 5px var(--primary-gold); }
}

/* Botón de favoritos animado */
.btn-favorito i {
    transition: all 0.3s ease;
}

.btn-favorito:hover i {
    transform: scale(1.3);
    color: #e74c3c;
}

.btn-favorito i.fas {
    animation: heartBeat 1.5s ease-in-out;
    color: #e74c3c;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

/* Success checkmark animation */
.success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

.success-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4CAF50;
}

.success-checkmark .check-icon::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 30px;
    height: 50px;
    border: solid #4CAF50;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
    animation: checkmark 0.8s ease-in-out;
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }
    20% {
        height: 0;
        width: 10px;
        opacity: 1;
    }
    40% {
        height: 25px;
        width: 10px;
    }
    100% {
        height: 50px;
        width: 30px;
    }
}

/* Fix para botón en modal Bootstrap */
#btn-proceder-pago {
    background: var(--gold-gradient) !important;
    border: none !important;
    color: var(--dark-navy) !important;
    padding: 12px 30px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px !important;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
    cursor: pointer;
}

#btn-proceder-pago:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);
}

/* Debugging - Asegurar que los botones sean clickeables */
.btn-agregar-carrito {
    cursor: pointer !important;
    z-index: 10;
    position: relative;
}

.btn-agregar-carrito:hover {
    filter: brightness(1.1);
}

/* ============================================
   MEJORAS PARA TARJETAS DE PRODUCTOS - TIPOGRAFÍA Y BOTONES
============================================ */

/* Mejoras tipográficas para nombres de productos */
.tienda-nombre-producto a {
    color: var(--dark-navy);
    text-decoration: none;
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.4rem;
    font-weight: 700;
    transition: color 0.3s ease;
    cursor: pointer;
    line-height: 1.2;
    display: block;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.tienda-nombre-producto a:hover {
    color: var(--primary-gold);
    text-decoration: none;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Mejoras para descripción del producto */
.tienda-descripcion-corta {
    color: var(--charcoal);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mejoras para contenedor de precios */
.tienda-precio-contenedor {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tienda-precio-actual {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-gold);
    text-shadow: 0 1px 2px rgba(212, 175, 55, 0.2);
}

.tienda-precio-original {
    font-size: 1.1rem;
    color: var(--charcoal);
    text-decoration: line-through;
    opacity: 0.6;
}

.precio-descuento {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mejoras para información de stock */
.tienda-stock-info {
    margin-bottom: 25px;
}

.stock-disponible {
    color: #27ae60;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stock-agotado {
    color: #e74c3c;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stock-limitado {
    color: #f39c12;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Rediseño del botón principal "Agregar al Carrito" */
.tienda-boton-principal {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-gold) 0%, #f1c40f 100%);
    border: none;
    border-radius: 12px;
    padding: 14px 22px;
    color: var(--dark-navy);
    font-family: var(--tienda-fuente-titulo);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.tienda-boton-principal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.tienda-boton-principal:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #f1c40f 0%, var(--primary-gold) 100%);
}

.tienda-boton-principal:hover::before {
    left: 100%;
}

.tienda-boton-principal:active {
    transform: translateY(-1px);
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.tienda-boton-principal i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.tienda-boton-principal:hover i {
    transform: scale(1.1);
}

/* Mejoras para botones de overlay */
.tienda-boton-accion {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: var(--dark-navy);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.tienda-boton-accion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--primary-gold);
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.tienda-boton-accion:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: var(--dark-navy);
}

.tienda-boton-accion:hover::before {
    width: 100%;
    height: 100%;
}

/* Mejoras para categoría del producto */
.tienda-categoria-producto {
    background: rgba(244, 228, 188, 0.2);
    color: var(--primary-gold);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Mejoras para badges de productos */
.producto-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3;
}

.badge-nutricion {
    background: linear-gradient(135deg, var(--nutricion-primary), #00897b);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0, 180, 166, 0.3);
}

.badge-belleza {
    background: linear-gradient(135deg, var(--belleza-primary), #ad1457);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.3);
}

/* Mejoras en el espaciado de la información del producto */
.tienda-info-producto {
    padding: 18px 22px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(5px);
}

/* Mejoras para el contenedor de acciones - ÁREA DE COMPRA INFERIOR */
.tienda-acciones-producto {
    margin-top: auto;
    padding-top: 25px;
    border-top: 2px solid rgba(212, 175, 55, 0.1);
    background: linear-gradient(to bottom, transparent, rgba(244, 228, 188, 0.05));
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: -25px;
    padding-left: 25px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    padding-right: 25px;
    padding-bottom: 25px;
    border-radius: 0 0 25px 25px;
}

/* Estados responsivos mejorados */
@media (max-width: 768px) {
    .tienda-nombre-producto a {
        font-size: 1.2rem;
    }

    .tienda-precio-actual {
        font-size: 1.6rem;
    }

    .tienda-boton-principal {
        padding: 14px 20px;
        font-size: 1rem;
    }

    .tienda-boton-accion {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

/* ============================================
   MEJORAS ADICIONALES DE ESPACIADO Y JERARQUÍA VISUAL
============================================ */

/* Mejoras para el contenedor principal de la imagen - AMPLIADO */
.tienda-imagen-contenedor {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.tienda-imagen-producto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tienda-card-producto:hover .tienda-imagen-producto {
    transform: scale(1.08);
}

/* Mejorar la jerarquía visual de la información del producto - REORGANIZADO */
.tienda-info-producto {
    padding: 18px 22px 22px 22px;
    background: white;
    position: relative;
    border-radius: 0 0 25px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tienda-info-producto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-gold), transparent, var(--primary-gold));
    opacity: 0.4;
}

/* Contenedor para información principal del producto */
.tienda-contenido-principal {
    flex-grow: 1;
    margin-bottom: 25px;
}

/* Espaciado mejorado para elementos individuales - REORGANIZADO */
.tienda-categoria-producto {
    margin-bottom: 6px;
    position: relative;
    font-size: 0.7rem;
}

.tienda-nombre-producto {
    margin-bottom: 10px;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    font-size: 1.1rem;
    line-height: 1.4;
}

.tienda-descripcion-corta {
    display: none;
}

.tienda-precio-contenedor {
    margin: 12px 0;
    padding: 0;
    border: none;
}

.tienda-stock-info {
    display: none;
}

/* Mejoras para la estructura general del grid - REORGANIZADO */
.tienda-grid-productos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 10px;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.producto-contenedor {
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tienda-card-producto {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: white;
    border: 1px solid #f0f0f0;
}

.tienda-card-producto:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
}

/* Efectos específicos por tema */
body.tema-nutricion .tienda-card-producto:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
}

body.tema-belleza .tienda-card-producto:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
}

/* Mejoras para estados de interacción */
.tienda-card-producto .tienda-boton-accion {
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tienda-card-producto:hover .tienda-boton-accion {
    transform: translateY(0);
    opacity: 1;
}

.tienda-card-producto:hover .tienda-boton-accion:nth-child(1) {
    transition-delay: 0.1s;
}

.tienda-card-producto:hover .tienda-boton-accion:nth-child(2) {
    transition-delay: 0.2s;
}

.tienda-card-producto:hover .tienda-boton-accion:nth-child(3) {
    transition-delay: 0.3s;
}

/* Estados adicionales para botones específicos - ELIMINADO para usar estilos de tienda-sliders.css */

/* Responsividad mejorada */
@media (max-width: 1200px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 992px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .tienda-info-producto {
        padding: 25px 20px 20px 20px;
    }
}

@media (max-width: 576px) {
    .tienda-grid-productos {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 15px;
    }

    .tienda-imagen-contenedor {
        height: 350px; /* Mantener imágenes grandes en móvil */
    }

    .tienda-info-producto {
        padding: 20px;
    }

    .tienda-acciones-producto {
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: -20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    .tienda-boton-accion {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .tienda-nombre-producto {
        min-height: 50px;
    }

    .tienda-descripcion-corta {
        min-height: 40px;
    }
}

/* ============================================
   MEJORAS FINALES DE ORGANIZACIÓN Y ESTRUCTURA
============================================ */

/* Asegurar que las tarjetas tengan altura consistente */
.tienda-card-producto {
    min-height: auto;
}

/* Optimizar la distribución del contenido */
.tienda-info-producto {
    min-height: auto;
    padding: 24px;
}

/* Mejorar la presentación de badges en imágenes grandes */
.producto-badges {
    top: 10px;
    left: 10px;
    z-index: 10;
}

/* Optimizar el overlay para imágenes más grandes */
.tienda-overlay-acciones .tienda-boton-accion {
    margin: 0 5px;
}

/* Estados mejorados para interacción */
.tienda-card-producto:hover {
    transform: translateY(-6px);
}

/* Mejor jerarquía visual para precio en tarjetas más grandes */
.tienda-precio-actual {
    font-size: 26px;
    font-weight: 700;
    color: #d4af37;
}

/* Mejorar separación visual entre contenido y acción */
.tienda-acciones-producto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25px;
    right: 25px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
    opacity: 0.3;
}

.tienda-acciones-producto {
    position: relative;
}

/* Responsividad específica para imágenes grandes */
@media (max-width: 1400px) {
    .tienda-imagen-contenedor {
        height: 280px;
    }
}

@media (max-width: 1200px) {
    .tienda-imagen-contenedor {
        height: 280px;
    }

    .tienda-card-producto {
        min-height: auto;
    }
}

@media (max-width: 992px) {
    .tienda-imagen-contenedor {
        height: 240px;
    }

    .tienda-card-producto {
        min-height: 440px;
    }
}

@media (max-width: 768px) {
    .tienda-imagen-contenedor {
        height: 220px;
    }

    .tienda-card-producto {
        min-height: 420px;
    }

    .tienda-precio-actual {
        font-size: 1.8rem;
    }
}

/* Efecto de brillo en botones */
.btn-elegant::after,
.tienda-boton-carrito::after,
.overlay-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    transition: all 0.6s;
    opacity: 0;
}

.btn-elegant:hover::after,
.tienda-boton-carrito:hover::after,
.overlay-btn:hover::after {
    animation: shimmer 0.6s ease-out;
    opacity: 1;
}

/* Efecto ripple al hacer click */
.tienda-boton-carrito {
    position: relative;
    overflow: hidden;
}

.tienda-boton-carrito::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.tienda-boton-carrito:active::before {
    width: 300px;
    height: 300px;
}

/* Animación de partículas al agregar al carrito */
.particula {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    font-size: 20px;
    animation: sparkle 1s ease-out forwards, moveParticle 1s ease-out forwards;
}

@keyframes moveParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--random-x), var(--random-y)) scale(0);
        opacity: 0;
    }
}

/* ============================================
   BARRA DE BÚSQUEDA SUPERIOR - DINÁMICA POR LÍNEA
============================================ */
.tienda-busqueda-superior {
    margin-bottom: 30px;
}

.tienda-busqueda-superior .input-group {
    max-width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.barra-busqueda-input {
    border: 2px solid #e0e0e0;
    border-right: none;
    padding: 12px 20px;
    font-size: 15px;
    font-family: var(--tienda-fuente-cuerpo);
    transition: all 0.3s ease;
    background: white;
}

.barra-busqueda-input:focus {
    outline: none;
    border-color: var(--nutricion-primary);
    box-shadow: 0 0 0 3px rgba(0, 180, 166, 0.1);
}

.barra-busqueda-boton {
    padding: 12px 25px;
    border: none;
    background: var(--nutricion-gradient-main);
    color: white;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.barra-busqueda-boton:hover {
    background: linear-gradient(135deg, #00897b 0%, #388E3C 100%);
    transform: translateX(2px);
}

.barra-busqueda-boton i {
    font-size: 16px;
}

/* Estilos para tema Belleza */
body.tema-belleza .barra-busqueda-input:focus {
    border-color: var(--belleza-primary);
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

body.tema-belleza .barra-busqueda-boton {
    background: var(--belleza-gradient-main);
}

body.tema-belleza .barra-busqueda-boton:hover {
    background: linear-gradient(135deg, #ad1457 0%, #D81B60 100%);
}

/* Estilos para tema Nutrición (por defecto) */
body.tema-nutricion .barra-busqueda-input:focus {
    border-color: var(--nutricion-primary);
    box-shadow: 0 0 0 3px rgba(0, 180, 166, 0.1);
}

body.tema-nutricion .barra-busqueda-boton {
    background: var(--nutricion-gradient-main);
}

body.tema-nutricion .barra-busqueda-boton:hover {
    background: linear-gradient(135deg, #00897b 0%, #388E3C 100%);
}

/* Responsivo */
@media (max-width: 768px) {
    .barra-busqueda-input {
        font-size: 14px;
        padding: 10px 15px;
    }

    .barra-busqueda-boton {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ============================================
   INDICADORES VISUALES DE CARRITO - ESTADO "EN CARRITO"
============================================ */

/* Botón cuando el producto está en el carrito */
.tienda-boton-principal.en-carrito,
.btn-agregar-carrito.en-carrito {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

.tienda-boton-principal.en-carrito:hover,
.btn-agregar-carrito.en-carrito:hover {
    background: linear-gradient(135deg, #20c997, #28a745) !important;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.5), 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Badge de cantidad en el botón */
.badge-cantidad-carrito {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: linear-gradient(135deg, #dc3545, #ff6b7a) !important;
    color: white !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
    animation: badgePulse 2s infinite !important;
    z-index: 10 !important;
    border: 2px solid white !important;
}

/* Animación del badge */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.6);
    }
}

/* Icono de check cuando está en el carrito */
.tienda-boton-principal.en-carrito i.fa-check-circle,
.btn-agregar-carrito.en-carrito i.fa-check-circle {
    animation: checkBounce 0.5s ease;
}

@keyframes checkBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Efecto de resplandor para botones en carrito */
.tienda-boton-principal.en-carrito::after,
.btn-agregar-carrito.en-carrito::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: shimmerEffect 3s infinite;
    pointer-events: none;
}

@keyframes shimmerEffect {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 1; transform: translateX(100%); }
}

/* Responsividad del badge */
@media (max-width: 768px) {
    .badge-cantidad-carrito {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
        top: -6px !important;
        right: -6px !important;
    }
}

/* ============================================
   BOTONES DE FAVORITOS - ESTADO ACTIVO
============================================ */

/* Botón de favorito normal */
.tienda-boton-accion[onclick*="toggleFavorito"] {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ddd;
    color: #666;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tienda-boton-accion[onclick*="toggleFavorito"]:hover {
    background: white;
    border-color: #D4AF37;
    color: #D4AF37;
    transform: scale(1.1);
}

/* Botón de favorito cuando está ACTIVO (producto en favoritos) */
.tienda-boton-accion.favorito-activo,
button[onclick*="toggleFavorito"].favorito-activo {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f) !important;
    border-color: #ee5a6f !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(238, 90, 111, 0.4) !important;
}

.tienda-boton-accion.favorito-activo:hover,
button[onclick*="toggleFavorito"].favorito-activo:hover {
    background: linear-gradient(135deg, #ee5a6f, #c92a2a) !important;
    box-shadow: 0 6px 20px rgba(238, 90, 111, 0.5) !important;
    transform: scale(1.15) !important;
}

/* Icono cuando está en favoritos */
.tienda-boton-accion.favorito-activo i,
button[onclick*="toggleFavorito"].favorito-activo i {
    color: white !important;
}

/* Animación al agregar a favoritos */
@keyframes heartPulse {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(0.9);
    }
    75% {
        transform: scale(1.2);
    }
}

/* Efecto de brillo en favoritos activos */
.tienda-boton-accion.favorito-activo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    animation: shimmerFavorito 3s infinite;
    pointer-events: none;
}

@keyframes shimmerFavorito {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ============================================
   SOLUCIÓN MÓVIL - FILTROS FLOTANTES
============================================ */

/* Ocultar barra lateral en móviles */
@media (max-width: 768px) {
    .tienda-barra-lateral {
        display: none;
    }

    /* Expandir columna de productos en móviles */
    .tienda-contenedor-principal .col-lg-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Botón flotante de filtros para móviles */
.btn-filtros-movil {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--accent-rose) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    font-family: var(--tienda-fuente-cuerpo);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.btn-filtros-movil i {
    font-size: 24px;
    margin: 0;
}

.btn-filtros-movil:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
}

.btn-filtros-movil:active {
    transform: translateY(-1px) scale(0.98);
}

/* Mostrar botón solo en móviles */
@media (max-width: 768px) {
    .btn-filtros-movil {
        display: flex !important;
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        width: 60px !important;
        height: 60px !important;
        z-index: 999 !important;
    }

    .tienda-carrito-flotante {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 60px !important;
        height: 60px !important;
        z-index: 1055 !important;
    }
}

/* Modal de filtros para móviles */
.modal-filtros-movil {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-filtros-movil.show {
    display: block;
    opacity: 1;
}

.modal-filtros-contenido {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 30px 30px 0 0;
    max-height: 85vh;
    overflow-y: auto;
    padding: 25px;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);
}

.modal-filtros-movil.show .modal-filtros-contenido {
    transform: translateY(0);
}

.modal-filtros-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--silver);
}

.modal-filtros-header h3 {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.5rem;
    color: var(--dark-navy);
    margin: 0;
}

.btn-cerrar-filtros {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--charcoal);
    cursor: pointer;
    padding: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.btn-cerrar-filtros:hover {
    background: var(--silver);
    color: var(--dark-navy);
}

/* Estilos para los filtros dentro del modal */
.modal-filtros-movil .tienda-card-filtro {
    background: var(--pearl);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--silver);
}

.modal-filtros-movil .tienda-card-encabezado {
    margin-bottom: 15px;
}

.modal-filtros-movil .tienda-card-titulo {
    font-family: var(--tienda-fuente-titulo);
    font-size: 1.2rem;
    color: var(--dark-navy);
    margin: 0;
}

.modal-filtros-movil .tienda-card-titulo i {
    margin-right: 8px;
    color: var(--primary-gold);
}

.modal-filtros-movil .tienda-lista-categorias {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-filtros-movil .tienda-item-categoria {
    margin-bottom: 5px;
}

.modal-filtros-movil .tienda-enlace-categoria {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: var(--charcoal);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.modal-filtros-movil .tienda-enlace-categoria i {
    margin-right: 10px;
    font-size: 1.1rem;
    color: var(--primary-gold);
}

.modal-filtros-movil .tienda-enlace-categoria:hover {
    background: white;
    color: var(--dark-navy);
    transform: translateX(5px);
}

.modal-filtros-movil .tienda-item-categoria.active .tienda-enlace-categoria {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--accent-rose) 100%);
    color: white;
}

.modal-filtros-movil .tienda-item-categoria.active .tienda-enlace-categoria i {
    color: white;
}

/* Botón de aplicar filtros */
.btn-aplicar-filtros {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--accent-rose) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--tienda-fuente-cuerpo);
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.btn-aplicar-filtros:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.btn-aplicar-filtros:active {
    transform: translateY(0);
}

/* Temas para el botón flotante */
body.tema-nutricion .btn-filtros-movil {
    background: var(--nutricion-gradient-main);
    box-shadow: 0 6px 20px var(--nutricion-shadow);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

body.tema-nutricion .btn-filtros-movil:hover {
    box-shadow: 0 8px 25px var(--nutricion-shadow);
    border-color: rgba(255, 255, 255, 0.5);
}

body.tema-belleza .btn-filtros-movil {
    background: var(--belleza-gradient-main);
    box-shadow: 0 6px 20px var(--belleza-shadow);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

body.tema-belleza .btn-filtros-movil:hover {
    box-shadow: 0 8px 25px var(--belleza-shadow);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Ajustes finales para alineación perfecta */
@media (max-width: 768px) {
    /* Contenedor de botones flotantes */
    .tienda-carrito-flotante,
    .btn-filtros-movil {
        border: 3px solid rgba(255, 255, 255, 0.3);
    }

    .tienda-carrito-flotante:hover,
    .btn-filtros-movil:hover {
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* Asegurar que ambos botones están en la misma columna vertical */
    .btn-filtros-movil {
        right: 20px;
    }

    .tienda-carrito-flotante {
        right: 20px;
    }
}

/* Ajuste del scroll en móviles */
@media (max-width: 768px) {
    .tienda-contenedor-principal {
        scroll-margin-top: 80px;
    }
}

/* ============================================
   OPTIMIZACIONES MÓVILES - PRODUCTOS AL INICIO
============================================ */

@media (max-width: 768px) {
    /* 1. HERO SECTION MÁS COMPACTO */
    .hero-section {
        height: 25vh !important;
        min-height: 200px !important;
    }

    .hero-content {
        padding: 15px !important;
    }

    .hero-subtitle {
        font-size: 0.75rem !important;
        margin-bottom: 5px !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    .hero-text {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
        display: none !important; /* Ocultar texto largo en móvil */
    }

    .btn-elegant {
        padding: 8px 18px !important;
        font-size: 0.85rem !important;
    }

    /* 2. FEATURES BAR - CONVERTIR EN MINI CARRUSEL */
    .features-bar {
        padding: 15px 0 !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .features-bar .row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding: 0 15px;
    }

    .features-bar .row::-webkit-scrollbar {
        display: none;
    }

    .features-bar [class*="col-"] {
        flex: 0 0 200px !important;
        max-width: 200px !important;
        scroll-snap-align: center;
    }

    .feature-item {
        padding: 15px !important;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .feature-icon {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    .feature-title {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }

    .feature-text {
        font-size: 0.75rem !important;
    }

    /* 3. SELECTOR DE LÍNEAS - TABS COMPACTOS HORIZONTALES */
    .lineas-selector-section {
        padding: 15px 0 !important;
        background: transparent !important;
    }

    .lineas-titulo {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    .lineas-subtitulo {
        font-size: 0.8rem !important;
        margin-bottom: 15px !important;
        display: none !important; /* Ocultar en móvil */
    }

    .lineas-toggle-container {
        padding: 0 !important;
    }

    .lineas-toggle {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .linea-option {
        flex: 1 !important;
        padding: 15px 10px !important;
        min-height: auto !important;
    }

    .linea-icon {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    .linea-content h4 {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

    .linea-content p {
        font-size: 0.7rem !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    .linea-features {
        gap: 4px !important;
    }

    .feature-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* 4. OCULTAR BANNER DE OFERTAS EN MÓVIL */
    .banner-ofertas {
        display: none !important;
    }

    /* 5. OCULTAR ENCABEZADO REDUNDANTE */
    .tienda-encabezado {
        display: none !important;
    }

    /* 6. BARRA DE BÚSQUEDA MÁS COMPACTA */
    .tienda-busqueda-superior {
        margin-bottom: 15px !important;
        position: sticky;
        top: 60px;
        z-index: 100;
        background: var(--cream);
        padding: 10px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .barra-busqueda-input {
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
        height: 40px !important;
    }

    .barra-busqueda-boton {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }

    /* 7. GRID DE PRODUCTOS - 1 COLUMNA EN MÓVIL */
    .tienda-grid-productos {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 !important;
    }

    /* 8. REDUCIR PADDING DEL CONTENEDOR PRINCIPAL */
    .tienda-contenedor-principal .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 9. CARDS DE PRODUCTOS OPTIMIZADAS PARA 1 COLUMNA */
    .tienda-card-producto {
        padding: 12px !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .tienda-imagen-contenedor {
        width: 120px !important;
        min-width: 120px !important;
        height: 120px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .tienda-info-producto {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .tienda-nombre-producto {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    .tienda-descripcion-corta {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
        max-height: 36px !important;
        overflow: hidden !important;
        line-height: 1.4 !important;
    }

    .tienda-categoria-producto {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
        margin-bottom: 6px !important;
        display: inline-block !important;
        width: fit-content !important;
    }

    .tienda-precio-contenedor {
        margin: 6px 0 !important;
    }

    .tienda-precio-actual {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
    }

    .tienda-stock-info {
        margin: 4px 0 !important;
    }

    .tienda-acciones-producto {
        margin-top: 6px !important;
    }

    .tienda-boton-principal {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
    }

    .producto-badges {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        display: flex !important;
        gap: 4px !important;
    }

    .producto-badges .badge {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }

    /* Overlay de acciones - ocultar en vista horizontal */
    .tienda-overlay-acciones {
        display: none !important;
    }

    /* 10. OCULTAR SECCIONES NO ESENCIALES EN MÓVIL */
    .herramientas-interactivas {
        display: none !important;
    }

    .seccion-educativa {
        margin-top: 30px !important;
    }

    .seccion-educativa h3 {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }

    .consejo-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    .consejo-card h5 {
        font-size: 0.95rem !important;
    }

    .consejo-card p {
        font-size: 0.8rem !important;
    }

    .seccion-testimonios {
        margin-top: 30px !important;
    }

    .seccion-testimonios h3 {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }

    .testimonios-grid {
        gap: 15px !important;
    }

    /* 11. AJUSTAR BOTONES FLOTANTES PARA NO SUPERPONER */
    .btn-filtros-movil {
        bottom: 90px !important;
    }

    .tienda-carrito-flotante {
        width: 55px !important;
        height: 55px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 1.2rem !important;
    }

    /* 12. SCROLL INDICATOR - Mostrar que hay más productos */
    .tienda-grid-productos::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--primary-gold);
        border-radius: 2px;
        opacity: 0.5;
    }
}

/* OPTIMIZACIÓN EXTRA - Pantallas muy pequeñas */
@media (max-width: 360px) {
    .hero-section {
        height: 25vh !important;
        min-height: 200px !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
    }

    .linea-option {
        padding: 12px 8px !important;
    }

    .linea-content h4 {
        font-size: 0.9rem !important;
    }

    .linea-content p {
        font-size: 0.65rem !important;
    }

    .tienda-grid-productos {
        gap: 8px !important;
    }

    .tienda-card-producto {
        min-height: 320px !important;
    }
}

/* ============================================
   OPTIMIZACIONES RESPONSIVE COMPLETAS
   Para todos los dispositivos
============================================ */

/* Desktop Grande (1400px - 1920px+) */
@media (min-width: 1400px) and (max-width: 1920px) {
    .navbar-container {
        max-width: 1400px;
    }

    .tienda-contenedor-principal .container-fluid {
        max-width: 1600px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .hero-section {
        height: 65vh;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        transform: scale(1.25);
    }
}

/* Desktop Mediano (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .navbar-container {
        max-width: 1200px;
        padding: 0 30px;
    }

    .tienda-contenedor-principal .container-fluid {
        max-width: 1300px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        transform: scale(1.25);
    }
}

/* Desktop Pequeño / Laptop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-container {
        max-width: 100%;
        padding: 0 25px;
    }

    .navbar-logo {
        font-size: 32px;
    }

    .navbar-menu > li > a {
        padding: 10px 18px;
        font-size: 14px;
    }

    .tienda-contenedor-principal .container-fluid {
        max-width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero-section {
        height: 55vh;
        min-height: 450px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        transform: scale(1.1);
    }

    .tienda-card-producto {
        min-height: 420px;
    }

    .lineas-selector-container {
        padding: 30px 25px;
    }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-container {
        padding: 0 20px;
    }

    .navbar-logo {
        font-size: 28px;
    }

    .navbar-menu > li > a {
        padding: 10px 15px;
        font-size: 13px;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero-section {
        height: 45vh;
        min-height: 350px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .tienda-card-producto {
        min-height: 400px;
    }

    .lineas-toggle {
        flex-direction: row;
        gap: 15px;
    }

    .linea-option {
        flex: 1;
        padding: 20px 15px;
    }

    /* Sidebar visible pero compacta */
    .tienda-barra-lateral {
        padding-right: 10px;
    }

    .tienda-card-filtro {
        margin-bottom: 15px;
    }
}

/* Tablet Portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .navbar-container {
        padding: 0 15px;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero-section {
        height: 35vh;
        min-height: 280px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 0.85rem;
    }

    .btn-elegant {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    /* 1 COLUMNA para mejor legibilidad */
    .tienda-grid-productos {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .tienda-card-producto {
        min-height: auto;
        padding: 12px;
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .tienda-imagen-contenedor {
        width: 140px;
        min-width: 140px;
        height: 140px;
        margin-bottom: 0;
    }

    .tienda-info-producto {
        flex: 1;
    }

    .tienda-nombre-producto {
        font-size: 1rem;
    }

    .tienda-precio-actual {
        font-size: 1.4rem;
    }

    /* Features bar scroll horizontal */
    .features-bar .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .feature-item {
        min-width: 180px;
    }
}

/* Móvil Grande (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .navbar-container {
        padding: 0 12px;
    }

    .navbar-logo {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-section {
        height: 30vh;
        min-height: 250px;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    /* 1 COLUMNA - Layout horizontal */
    .tienda-grid-productos {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .tienda-card-producto {
        min-height: auto;
        padding: 10px;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .tienda-imagen-contenedor {
        width: 110px;
        min-width: 110px;
        height: 110px;
        margin-bottom: 0;
    }

    .tienda-info-producto {
        flex: 1;
    }

    .tienda-nombre-producto {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .tienda-descripcion-corta {
        font-size: 0.75rem;
    }

    .tienda-precio-actual {
        font-size: 1.25rem;
    }

    .tienda-boton-principal {
        padding: 9px 14px;
        font-size: 0.8rem;
        width: 100%;
    }

    /* Botones flotantes ajustados y alineados */
    .tienda-carrito-flotante {
        width: 55px !important;
        height: 55px !important;
        bottom: 15px !important;
        right: 15px !important;
        font-size: 1.2rem !important;
    }

    .btn-filtros-movil {
        width: 55px !important;
        height: 55px !important;
        bottom: 85px !important;
        right: 15px !important;
        font-size: 22px !important;
    }
}

/* Móvil Pequeño (320px - 479px) */
@media (min-width: 320px) and (max-width: 479px) {
    .navbar-container {
        padding: 0 10px;
    }

    .navbar-logo {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .navbar-action-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .hero-section {
        height: 30vh;
        min-height: 240px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.75rem;
    }

    .btn-elegant {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .tienda-card-producto {
        min-height: 330px;
        padding: 6px;
    }

    .tienda-imagen-contenedor {
        height: 140px;
    }

    .producto-badges .badge {
        font-size: 0.6rem !important;
        padding: 3px 6px !important;
    }

    .tienda-nombre-producto {
        font-size: 0.8rem;
        line-height: 1.2;
    }

    .tienda-descripcion-corta {
        font-size: 0.7rem;
        max-height: 28px;
    }

    .tienda-precio-actual {
        font-size: 1.1rem;
    }

    .tienda-boton-principal {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    /* Botones flotantes más pequeños y alineados */
    .tienda-carrito-flotante {
        width: 50px !important;
        height: 50px !important;
        bottom: 12px !important;
        right: 12px !important;
        font-size: 1.1rem !important;
    }

    .tienda-carrito-flotante .badge {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
        top: -6px !important;
        right: -6px !important;
    }

    .btn-filtros-movil {
        width: 50px !important;
        height: 50px !important;
        bottom: 75px !important;
        right: 12px !important;
        font-size: 20px !important;
    }

    /* Lineas selector más compacto */
    .lineas-titulo {
        font-size: 1rem !important;
    }

    .linea-option {
        padding: 10px 8px !important;
    }

    .linea-content h4 {
        font-size: 0.85rem !important;
    }

    .linea-content p {
        font-size: 0.65rem !important;
    }

    /* Barra de búsqueda */
    .barra-busqueda-input {
        font-size: 0.8rem !important;
        height: 36px !important;
    }

    .barra-busqueda-boton {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* Móvil Extra Pequeño (< 320px) */
@media (max-width: 319px) {
    .navbar-logo {
        font-size: 18px;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .tienda-grid-productos {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .tienda-carrito-flotante {
        width: 45px !important;
        height: 45px !important;
        bottom: 10px !important;
        right: 10px !important;
        font-size: 1rem !important;
    }

    .btn-filtros-movil {
        width: 45px !important;
        height: 45px !important;
        bottom: 65px !important;
        right: 10px !important;
        font-size: 18px !important;
    }
}

/* Corregir overflow en elementos específicos */
@media (max-width: 991px) {
    /* Asegurar que ningún elemento cause scroll horizontal */
    .hero-section,
    .features-bar,
    .lineas-selector-section,
    .tienda-contenedor-principal,
    .footer3 {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Container fluid sin padding excesivo */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Row sin margin negativo que cause overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Imagenes responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Prevenir que botones salgan del viewport */
    button,
    .btn,
    .tienda-boton-principal {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Ajustes específicos para landscape en móviles */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        height: 50vh;
        min-height: 280px;
    }

    .navbar-content {
        padding: 12px 0;
    }

    .tienda-card-producto {
        min-height: 340px;
    }
}

/* Optimización para pantallas de alta densidad (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .navbar-logo {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .tienda-card-producto {
        border-width: 0.5px;
    }
}

/* === tienda-sliders.css === */
/**
 * Estilos para Sliders de Productos - Tienda Morfeo
 * Diseño premium responsive optimizado
 */

/* ============================================
   SECCIÓN DE SLIDERS
============================================ */
.productos-sliders-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    position: relative;
    overflow-x: hidden;
}

.productos-sliders-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

/* ============================================
   CONTENEDOR DE SLIDER
============================================ */
.slider-linea {
    margin-bottom: 80px;
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    overflow: hidden;
}

.slider-linea:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* ============================================
   HEADER DEL SLIDER
============================================ */
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f5f5f5;
    gap: 20px;
}

.slider-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

.slider-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
}

.slider-linea:hover .slider-icon {
    transform: scale(1.05);
}

.slider-icon.nutricion-icon {
    background: linear-gradient(135deg, #00B4A6 0%, #4CAF50 100%);
}

.slider-icon.belleza-icon {
    background: linear-gradient(135deg, #E91E63 0%, #F48FB1 100%);
}

.slider-icon.top-icon {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
}

.slider-header-text {
    flex: 1;
    min-width: 0;
}

.slider-header-text h2.slider-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.slider-header-text p.slider-subtitulo {
    font-size: 16px;
    color: #7f8c8d;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   NAVEGACIÓN DEL SLIDER
============================================ */
.slider-navegacion {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.slider-btn {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: white;
    color: #d4af37;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.slider-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    color: white;
    border-color: #d4af37;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.slider-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.slider-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    border-color: #e0e0e0;
    color: #bdbdbd;
}

/* ============================================
   CONTENEDOR Y TRACK DEL SLIDER
============================================ */
.slider-container {
    overflow: hidden;
    position: relative;
    margin: 0 -5px;
}

.slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 10px;
}

.slider-item {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
    min-width: 260px;
}

/* ============================================
   CARDS DE PRODUCTOS EN SLIDERS
============================================ */
.producto-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #f0f0f0;
}

.producto-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #e0e0e0;
}

/* ============================================
   SLIDER TOP 10 DESTACADO
============================================ */
.slider-top-destacado {
    background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
    border: 2px solid #f4d03f;
}

.top-badge-title {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    margin-right: 5px;
    box-shadow: 0 2px 6px rgba(255, 165, 0, 0.3);
}

/* Ranking para Top 10 */
.producto-ranking {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    transition: transform 0.3s ease;
}

.producto-card:hover .producto-ranking {
    transform: scale(1.1) rotate(5deg);
}

/* Medallas Top 3 */
.producto-ranking.medalla-oro {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    width: 46px;
    height: 46px;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.6);
    animation: pulseGold 2s infinite;
}

.producto-ranking.medalla-plata {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    width: 44px;
    height: 44px;
    font-size: 18px;
    box-shadow: 0 3px 12px rgba(192, 192, 192, 0.5);
}

.producto-ranking.medalla-bronce {
    background: linear-gradient(135deg, #CD7F32 0%, #B8732E 100%);
    width: 42px;
    height: 42px;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(205, 127, 50, 0.5);
}

@keyframes pulseGold {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: 0 6px 25px rgba(255, 215, 0, 0.9);
    }
}

/* Badge Best Seller */
.badge-mejor-vendido {
    position: absolute;
    top: 60px;
    left: 0;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 5px;
}

.badge-mejor-vendido i {
    font-size: 11px;
    animation: flame 1.5s infinite;
}

@keyframes flame {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Producto Destacado (Top 3) */
.producto-card.producto-destacado {
    border: 2px solid #FFD700;
    background: linear-gradient(135deg, #fffef8 0%, #ffffff 100%);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.producto-card.producto-destacado:hover {
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3);
    transform: translateY(-8px) scale(1.02);
}

/* Texto recomendado */
.producto-recomendado {
    font-size: 13px;
    color: #27ae60;
    margin: 0 0 10px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.producto-recomendado i {
    font-size: 14px;
    color: #f39c12;
}

/* ============================================
   IMAGEN DEL PRODUCTO
============================================ */
.producto-imagen-container {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #f8f8f8;
}

.producto-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
    background: white;
}

.producto-card:hover .producto-imagen {
    transform: scale(1.08);
}

/* ============================================
   OVERLAY DE ACCIONES RÁPIDAS EN SLIDERS
   Diseño moderno con glassmorphism y micro-interacciones
============================================ */
.producto-card .tienda-overlay-acciones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 5;
    pointer-events: none;
}

.producto-card:hover .tienda-overlay-acciones {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Botones con efecto glassmorphism */
.producto-card .tienda-boton-accion {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #2c3e50;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo en hover */
.producto-card .tienda-boton-accion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    transition: width 0.4s ease, height 0.4s ease;
    transform: translate(-50%, -50%);
}

.producto-card .tienda-boton-accion:hover::before {
    width: 100%;
    height: 100%;
}

/* Hover con colores específicos por acción */
.producto-card .tienda-boton-accion:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35), 0 4px 10px rgba(212, 175, 55, 0.2);
    color: white;
}

/* Botón de Ver - Azul */
.producto-card .tienda-boton-accion:nth-child(1):hover {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 12px 30px rgba(52, 152, 219, 0.35), 0 4px 10px rgba(52, 152, 219, 0.2);
}

/* Botón de Carrito - Dorado */
.producto-card .tienda-boton-accion:nth-child(2):hover {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35), 0 4px 10px rgba(212, 175, 55, 0.2);
}

/* Botón de Favoritos - Rosa/Rojo */
.producto-card .tienda-boton-accion:nth-child(3):hover {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 12px 30px rgba(231, 76, 60, 0.35), 0 4px 10px rgba(231, 76, 60, 0.2);
}

/* Animación de entrada escalonada */
.producto-card:hover .tienda-boton-accion:nth-child(1) {
    animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s both;
}

.producto-card:hover .tienda-boton-accion:nth-child(2) {
    animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
}

.producto-card:hover .tienda-boton-accion:nth-child(3) {
    animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s both;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.producto-card .tienda-boton-accion:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* ============================================
   BADGES DE PRODUCTOS - COMPACTO
============================================ */
.producto-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
    white-space: nowrap;
    width: auto;
    max-width: fit-content;
}

.producto-card:hover .producto-badge {
    opacity: 1;
    transform: scale(1.05);
}

.producto-badge i {
    font-size: 10px;
    flex-shrink: 0;
}

.producto-badge.nutricion-badge {
    background: linear-gradient(135deg, rgba(0, 180, 166, 0.95) 0%, rgba(76, 175, 80, 0.95) 100%);
}

.producto-badge.belleza-badge {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.95) 0%, rgba(244, 143, 177, 0.95) 100%);
}

.producto-badge.top-badge {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.95) 0%, rgba(247, 147, 30, 0.95) 100%);
}

/* ============================================
   INFORMACIÓN DEL PRODUCTO
============================================ */
.producto-info {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.producto-nombre {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 47px;
}

.producto-categoria {
    font-size: 13px;
    color: #95a5a6;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.producto-vendidos {
    font-size: 14px;
    color: #27ae60;
    margin: 0 0 10px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.producto-vendidos i {
    font-size: 13px;
}

.producto-precio {
    font-size: 26px;
    font-weight: 700;
    color: #d4af37;
    margin: 10px 0 15px 0;
}

/* ============================================
   BOTÓN AGREGAR AL CARRITO
============================================ */
.btn-agregar-carrito {
    width: 100%;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: auto;
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.35) !important;
}

.btn-agregar-carrito:hover {
    background: linear-gradient(135deg, #f4d03f 0%, #d4af37 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.btn-agregar-carrito:active {
    transform: translateY(0);
}

.btn-agregar-carrito i {
    font-size: 17px !important;
    color: white !important;
}

/* ============================================
   VARIANTES DE CARDS POR LÍNEA
   Cada slider mantiene su color SIEMPRE
   NO cambian con los temas
============================================ */

/* Slider de Nutrición - VERDE SIEMPRE */
.nutricion-card {
    border-top: 3px solid #00B4A6 !important;
}

.nutricion-card .producto-precio {
    color: #00B4A6 !important;
}

.nutricion-card .btn-agregar-carrito {
    background: linear-gradient(135deg, #00B4A6 0%, #4CAF50 100%) !important;
}

.nutricion-card .btn-agregar-carrito:hover {
    background: linear-gradient(135deg, #4CAF50 0%, #00B4A6 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 180, 166, 0.4) !important;
}

/* Slider de Belleza - ROSA SIEMPRE */
.belleza-card {
    border-top: 3px solid #E91E63 !important;
}

.belleza-card .producto-precio {
    color: #E91E63 !important;
}

.belleza-card .btn-agregar-carrito {
    background: linear-gradient(135deg, #E91E63 0%, #F48FB1 100%) !important;
}

.belleza-card .btn-agregar-carrito:hover {
    background: linear-gradient(135deg, #F48FB1 0%, #E91E63 100%) !important;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4) !important;
}

/* Slider Top 10 - NARANJA/DORADO SIEMPRE */
.top-card {
    border-top: 3px solid #FF6B35 !important;
}

.top-card .producto-precio {
    color: #FF6B35 !important;
}

.top-card .btn-agregar-carrito {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%) !important;
}

.top-card .btn-agregar-carrito:hover {
    background: linear-gradient(135deg, #F7931E 0%, #FF6B35 100%) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4) !important;
}

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

.slider-linea {
    animation: slideInUp 0.5s ease backwards;
}

.slider-linea:nth-child(1) {
    animation-delay: 0.1s;
}

.slider-linea:nth-child(2) {
    animation-delay: 0.2s;
}

.slider-linea:nth-child(3) {
    animation-delay: 0.3s;
}

/* ============================================
   RESPONSIVE - TABLETS (hasta 992px)
============================================ */
@media (max-width: 992px) {
    .productos-sliders-section {
        padding: 50px 0;
    }

    .slider-linea {
        padding: 20px;
        margin-bottom: 40px;
    }

    .slider-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .slider-header-content {
        width: 100%;
        gap: 12px;
    }

    .slider-navegacion {
        width: 100%;
        justify-content: flex-end;
    }

    .slider-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 22px;
    }

    .slider-header-text h2.slider-titulo {
        font-size: 20px;
    }

    .slider-header-text p.slider-subtitulo {
        font-size: 12px;
    }

    .slider-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 15px;
    }

    .slider-item {
        flex: 0 0 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
        min-width: 200px;
    }

    .producto-imagen-container {
        height: 200px;
    }

    .producto-nombre {
        font-size: 14px;
        min-height: 36px;
    }

    .producto-precio {
        font-size: 18px;
    }
}

/* ============================================
   RESPONSIVE - TABLETS PEQUEÑAS (hasta 768px)
============================================ */
@media (max-width: 768px) {
    .productos-sliders-section {
        padding: 40px 0;
    }

    .slider-linea {
        padding: 18px;
        margin-bottom: 35px;
        border-radius: 12px;
    }

    .slider-header {
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .slider-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 20px;
        border-radius: 10px;
    }

    .slider-header-text h2.slider-titulo {
        font-size: 18px;
    }

    .slider-header-text p.slider-subtitulo {
        font-size: 11px;
    }

    .slider-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 14px;
    }

    .slider-item {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        min-width: 180px;
    }

    .slider-track {
        gap: 12px;
    }

    .producto-imagen-container {
        height: 200px;
    }

    .producto-info {
        padding: 15px;
    }

    .producto-nombre {
        font-size: 14px;
        min-height: 34px;
    }

    .producto-categoria {
        font-size: 10px;
    }

    .producto-precio {
        font-size: 17px;
        margin: 6px 0 10px 0;
    }

    .btn-agregar-carrito {
        padding: 14px 18px !important;
        font-size: 14px !important;
    }

    .btn-agregar-carrito i {
        font-size: 15px !important;
    }

    .producto-ranking {
        width: 30px;
        height: 30px;
        font-size: 12px;
        top: 10px;
        left: 10px;
    }

    .producto-badge {
        padding: 2px 4px;
        font-size: 6px;
        top: 5px;
        right: 5px;
        gap: 1px;
    }

    .producto-badge i {
        font-size: 6px;
    }

    .producto-card .tienda-boton-accion {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .producto-card .tienda-overlay-acciones {
        gap: 8px;
    }
}

/* ============================================
   RESPONSIVE - MÓVILES (hasta 576px)
============================================ */
@media (max-width: 576px) {
    .productos-sliders-section {
        padding: 30px 0;
    }

    .slider-linea {
        padding: 15px;
        margin-bottom: 30px;
        border-radius: 10px;
    }

    .slider-header {
        padding-bottom: 12px;
        margin-bottom: 15px;
    }

    .slider-header-content {
        gap: 10px;
    }

    .slider-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 18px;
    }

    .slider-header-text h2.slider-titulo {
        font-size: 16px;
    }

    .slider-header-text p.slider-subtitulo {
        font-size: 10px;
        display: none; /* Ocultar subtítulo en móviles pequeños */
    }

    .slider-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 13px;
    }

    .slider-item {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .slider-track {
        gap: 10px;
    }

    .slider-container {
        margin: 0;
    }

    .producto-card {
        max-width: 100%;
        margin: 0 auto;
    }

    .producto-imagen-container {
        height: 240px;
    }

    .producto-info {
        padding: 16px;
    }

    .producto-nombre {
        font-size: 15px;
        min-height: 38px;
        -webkit-line-clamp: 2;
    }

    .producto-categoria {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .producto-vendidos {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .producto-precio {
        font-size: 19px;
        margin: 8px 0 12px 0;
    }

    .btn-agregar-carrito {
        padding: 16px 20px !important;
        font-size: 15px !important;
        gap: 9px !important;
    }

    .btn-agregar-carrito i {
        font-size: 16px !important;
    }

    .producto-ranking {
        width: 32px;
        height: 32px;
        font-size: 13px;
        top: 12px;
        left: 12px;
    }

    .producto-badge {
        padding: 2px 5px;
        font-size: 7px;
        top: 6px;
        right: 6px;
        gap: 2px;
    }

    .producto-badge i {
        font-size: 7px;
    }

    .producto-card .tienda-boton-accion {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .producto-card .tienda-overlay-acciones {
        gap: 8px;
    }
}

/* ============================================
   RESPONSIVE - MÓVILES MUY PEQUEÑOS (hasta 400px)
============================================ */
@media (max-width: 400px) {
    .productos-sliders-section {
        padding: 25px 0;
    }

    .slider-linea {
        padding: 12px;
        margin-bottom: 25px;
    }

    .slider-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 16px;
    }

    .slider-header-text h2.slider-titulo {
        font-size: 15px;
    }

    .slider-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 12px;
    }

    .producto-imagen-container {
        height: 200px;
    }

    .producto-info {
        padding: 14px;
    }

    .producto-nombre {
        font-size: 14px;
    }

    .producto-precio {
        font-size: 18px;
    }

    .btn-agregar-carrito {
        padding: 14px 18px !important;
        font-size: 14px !important;
    }

    .btn-agregar-carrito i {
        font-size: 15px !important;
    }
}

/* ============================================
   MEJORAS DE ACCESIBILIDAD
============================================ */
.slider-btn:focus {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

.btn-agregar-carrito:focus {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

/* ============================================
   OPTIMIZACIONES DE RENDIMIENTO
============================================ */
.producto-imagen {
    will-change: transform;
}

.slider-track {
    will-change: transform;
}

.producto-card {
    will-change: transform;
}

/* ============================================
   MEJORAS DE SCROLL Y CENTRADO
============================================ */

/* Espacio superior para mejor visualización al hacer scroll */
.slider-linea {
    scroll-margin-top: 100px;
}

/* Transición suave de la sección de productos */
.productos-sliders-section {
    transition: opacity 0.3s ease;
}

/* Animación de destaque cuando se filtra */
@keyframes highlightSlider {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 20px 60px rgba(212, 175, 55, 0.2), 0 0 0 3px rgba(212, 175, 55, 0.1);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
}

/* Clase para aplicar el resaltado via JS */
.slider-linea.destacado {
    animation: highlightSlider 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto de brillo en el título cuando se filtra */
@keyframes titleGlow {
    0%, 100% {
        color: inherit;
        text-shadow: none;
    }
    50% {
        color: var(--primary-gold, #D4AF37);
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }
}

.slider-titulo.resaltado {
    animation: titleGlow 1s ease;
}

/* Indicador visual de filtro activo en slider */
.slider-linea::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-gold, #D4AF37) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.slider-linea.filtrado-activo::after {
    opacity: 1;
}

/* Badge de categoría filtrada */
.slider-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-gold, #D4AF37) 0%, #C4991F 100%);
    color: white;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
    animation: fadeInScale 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mejoras responsive para scroll */
@media (max-width: 768px) {
    .slider-linea {
        scroll-margin-top: 80px;
    }
}

@media (max-width: 480px) {
    .slider-linea {
        scroll-margin-top: 70px;
    }
}


/* === tienda-espaciado.css === */
/* ============================================
   ESPACIADO OPTIMIZADO - CONSOLIDADO
   Versión consolidada de 3 archivos duplicados
   Fecha: 2025-12-01

   ARCHIVOS REEMPLAZADOS:
   - tienda-spacing-sections.css
   - tienda-espaciado-optimizado.css
   - tienda-espacio-blanco-fix.css
============================================ */

/* ============================================
   HERO SECTION
============================================ */
.hero-section {
    height: 60vh !important;
    min-height: 400px !important;
    max-height: 600px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* ============================================
   FEATURES BAR
============================================ */
.features-bar {
    padding: 25px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================
   SELECTOR DE LÍNEAS
============================================ */
.lineas-selector-section {
    padding: 40px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

.lineas-selector-container {
    padding: 30px 20px !important;
    min-height: auto !important;
    height: auto !important;
}

.lineas-titulo {
    margin-bottom: 10px !important;
}

.lineas-subtitulo {
    margin-bottom: 25px !important;
}

/* ============================================
   CONTENEDOR PRINCIPAL
============================================ */
.tienda-contenedor-principal {
    padding: 30px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

.tienda-contenedor-principal .row {
    min-height: auto !important;
    height: auto !important;
}

.tienda-contenedor-principal .col-lg-10,
.tienda-contenedor-principal .col-md-9,
.tienda-contenedor-principal .col-lg-2,
.tienda-contenedor-principal .col-md-3 {
    min-height: auto !important;
    height: auto !important;
}

/* ============================================
   ENCABEZADO DE TIENDA
============================================ */
.tienda-encabezado {
    margin-bottom: 30px !important;
}

.tienda-titulo-principal {
    margin-bottom: 15px !important;
}

/* ============================================
   BARRA DE BÚSQUEDA
============================================ */
.tienda-busqueda-superior {
    margin-bottom: 25px !important;
}

/* ============================================
   GRID DE PRODUCTOS
============================================ */
.tienda-grid-productos {
    margin-top: 0 !important;
    gap: 20px !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Grid vacío no debe ocupar espacio */
.tienda-grid-productos:empty {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tienda-card-producto {
    margin-bottom: 0 !important;
}

/* ============================================
   PAGINACIÓN
============================================ */
.pagination-container {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

/* ============================================
   SECCIÓN EDUCATIVA (Consejos del Día)
============================================ */
.seccion-educativa {
    margin: 30px 0 20px 0 !important;
    padding: 25px 20px !important;
    min-height: auto !important;
    height: auto !important;
}

.seccion-educativa h3 {
    margin-bottom: 20px !important;
    text-align: center;
    color: var(--charcoal);
    font-weight: 700;
}

.consejo-card {
    margin-bottom: 15px !important;
}

/* ============================================
   SECCIÓN TESTIMONIOS
============================================ */
.seccion-testimonios {
    margin: 20px 0 40px 0 !important;
    padding: 30px 20px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    min-height: auto !important;
    height: auto !important;
}

.seccion-testimonios h3 {
    text-align: center;
    margin-bottom: 30px !important;
    color: var(--charcoal);
    font-weight: 700;
}

.testimonios-grid {
    margin-bottom: 25px !important;
}

/* ============================================
   FOOTER
============================================ */
.tienda-footer {
    margin-top: 40px !important;
    padding: 40px 0 20px 0 !important;
}

/* ============================================
   ELIMINAR ELEMENTOS VACÍOS
============================================ */
div:empty:not([data-role="placeholder"]) {
    display: none !important;
}

/* Loading spinner oculto por defecto */
.loading-spinner,
#loadingSpinner {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.loading-spinner.active,
.loading-spinner.show,
#loadingSpinner.active,
#loadingSpinner.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Eliminar espacios invisibles */
.hero-section[style*="visibility: hidden"],
.features-bar[style*="visibility: hidden"],
.lineas-selector-section[style*="visibility: hidden"] {
    display: none !important;
}

/* Flujo continuo sin espacios extras */
body > section,
body > div {
    margin-top: 0 !important;
}

.modern-navbar + * {
    margin-top: 0 !important;
}

/* ============================================
   RESPONSIVE - DESKTOP
============================================ */
@media (min-width: 992px) {
    .lineas-selector-section {
        padding: 50px 0 !important;
    }

    .tienda-contenedor-principal {
        padding: 40px 0 !important;
    }

    .tienda-encabezado {
        margin-bottom: 40px !important;
    }

    .hero-section {
        height: 60vh !important;
        min-height: 450px !important;
        max-height: 650px !important;
    }
}

/* ============================================
   RESPONSIVE - TABLETS
============================================ */
@media (max-width: 991px) and (min-width: 768px) {
    .hero-section {
        height: 50vh !important;
        min-height: 400px !important;
        max-height: 500px !important;
    }

    .features-bar {
        padding: 20px 0 !important;
    }

    .lineas-selector-section {
        padding: 35px 0 !important;
    }

    .tienda-contenedor-principal {
        padding: 25px 0 !important;
    }

    .tienda-encabezado {
        margin-bottom: 25px !important;
    }

    .seccion-educativa {
        margin: 25px 0 15px 0 !important;
        padding: 20px 15px !important;
    }

    .seccion-testimonios {
        margin: 15px 0 30px 0 !important;
        padding: 25px 15px !important;
    }

    .seccion-testimonios h3 {
        margin-bottom: 25px !important;
    }
}

/* ============================================
   RESPONSIVE - MÓVILES
============================================ */
@media (max-width: 767px) {
    .hero-section {
        height: 45vh !important;
        min-height: 350px !important;
        max-height: 450px !important;
    }

    .hero-content {
        padding: 20px !important;
    }

    .features-bar {
        padding: 20px 0 !important;
    }

    .feature-item {
        padding: 0 10px !important;
        margin-bottom: 15px;
    }

    .lineas-selector-section {
        padding: 25px 0 !important;
    }

    .lineas-selector-container {
        padding: 20px 15px !important;
    }

    .lineas-titulo {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    .lineas-subtitulo {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
    }

    .tienda-contenedor-principal {
        padding: 20px 0 !important;
    }

    .tienda-encabezado {
        margin-bottom: 20px !important;
    }

    .tienda-titulo-principal {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }

    .tienda-grid-productos {
        gap: 15px !important;
    }

    .tienda-busqueda-superior {
        margin-bottom: 20px !important;
    }

    .pagination-container {
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }

    .seccion-educativa {
        margin: 20px 0 10px 0 !important;
        padding: 20px 15px !important;
    }

    .seccion-educativa h3 {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }

    .seccion-testimonios {
        margin: 10px 0 25px 0 !important;
        padding: 20px 15px !important;
    }

    .seccion-testimonios h3 {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
    }

    .testimonios-grid {
        margin-bottom: 20px !important;
    }
}

/* ============================================
   RESPONSIVE - MÓVILES PEQUEÑOS
============================================ */
@media (max-width: 480px) {
    .hero-section {
        height: 45vh !important;
        min-height: 350px !important;
    }

    .lineas-selector-section {
        padding: 20px 0 !important;
    }

    .lineas-selector-container {
        padding: 15px 10px !important;
    }

    .lineas-titulo {
        font-size: 1.3rem !important;
        margin-bottom: 6px !important;
    }

    .lineas-subtitulo {
        font-size: 0.85rem !important;
        margin-bottom: 15px !important;
    }

    .tienda-contenedor-principal {
        padding: 15px 0 !important;
    }

    .tienda-encabezado {
        margin-bottom: 15px !important;
    }

    .tienda-titulo-principal {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    .features-bar {
        padding: 15px 0 !important;
    }

    .feature-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .feature-title {
        font-size: 1rem !important;
        margin-bottom: 3px !important;
    }

    .feature-text {
        font-size: 0.8rem !important;
    }

    .tienda-grid-productos {
        gap: 12px !important;
    }

    .seccion-educativa {
        margin: 15px 0 8px 0 !important;
        padding: 15px 10px !important;
    }

    .seccion-educativa h3 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }

    .seccion-testimonios {
        margin: 8px 0 20px 0 !important;
        padding: 15px 10px !important;
    }

    .seccion-testimonios h3 {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }
}


/* === tienda-sidebar-sticky.css === */
/* ============================================
   SIDEBAR STICKY - CONSOLIDADO Y OPTIMIZADO
   Versión consolidada de 4 archivos duplicados
   Fecha: 2025-12-01

   ARCHIVOS REEMPLAZADOS:
   - tienda-sticky-fix.css
   - tienda-sticky-final.css
   - tienda-sticky-enhanced.css
   - tienda-sticky-force.css
============================================ */

/* ============================================
   SOLO DESKTOP (992px+)
============================================ */
@media screen and (min-width: 992px) {

    /* Preparar HTML y BODY para permitir scroll */
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        height: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* Contenedor principal - overflow visible para sticky */
    .tienda-contenedor-principal {
        overflow: visible !important;
        overflow-x: hidden !important;
        position: relative !important;
        transform: none !important;
    }

    /* Container fluid */
    .tienda-contenedor-principal > .container-fluid,
    .tienda-contenedor-principal .tienda-container-fluid {
        overflow: visible !important;
        overflow-x: hidden !important;
        position: relative !important;
        transform: none !important;
    }

    /* Row principal */
    .tienda-contenedor-principal .row,
    .tienda-contenedor-principal .tienda-row-principal {
        overflow: visible !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        transform: none !important;
    }

    /* Columna de sidebar */
    .tienda-contenedor-principal .col-lg-2,
    .tienda-contenedor-principal .col-md-3 {
        overflow: visible !important;
        overflow-x: hidden !important;
        position: relative !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
        transform: none !important;
    }

    /* ============================================
       STICKY EN LA BARRA LATERAL
       Máxima especificidad para sobrescribir todo
    ============================================ */
    body .tienda-contenedor-principal .col-lg-2 .tienda-barra-lateral,
    body .tienda-contenedor-principal .col-md-3 .tienda-barra-lateral,
    .tienda-contenedor-principal .tienda-barra-lateral,
    div.tienda-barra-lateral,
    .tienda-barra-lateral {
        /* STICKY POSITION - CRÍTICO */
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px !important;

        /* Dimensiones */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 120px) !important;

        /* Overflow para scroll interno */
        overflow-x: hidden !important;
        overflow-y: auto !important;

        /* Display */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Z-index */
        z-index: 100 !important;

        /* RESETEAR TRANSFORMS - Rompen sticky */
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        will-change: auto !important;
        filter: none !important;
        perspective: none !important;

        /* Espaciado */
        margin: 0 !important;
        padding: 20px !important;
        padding-right: 15px !important;

        /* Alineación */
        align-self: flex-start !important;

        /* Estilo visual */
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
        transition: box-shadow 0.3s ease !important;
    }

    /* Hover effect */
    .tienda-barra-lateral:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    }

    /* Hijos de la sidebar no deben interferir */
    .tienda-barra-lateral > *,
    .tienda-barra-lateral .tienda-card-filtro {
        position: relative !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* ============================================
       SCROLLBAR PERSONALIZADO
    ============================================ */
    .tienda-barra-lateral::-webkit-scrollbar {
        width: 6px;
    }

    .tienda-barra-lateral::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    .tienda-barra-lateral::-webkit-scrollbar-thumb {
        background: var(--primary-gold, #D4AF37);
        border-radius: 10px;
        transition: background 0.3s ease;
    }

    .tienda-barra-lateral::-webkit-scrollbar-thumb:hover {
        background: var(--dark-navy, #1a1f36);
    }

    /* Columna de productos debe tener altura suficiente */
    .tienda-contenedor-principal .col-lg-10,
    .tienda-contenedor-principal .col-md-9 {
        flex-grow: 1 !important;
        min-height: 100vh !important;
        position: relative !important;
    }
}

/* ============================================
   MÓVILES - Ocultar sidebar
============================================ */
@media screen and (max-width: 991px) {
    .tienda-barra-lateral {
        position: relative !important;
        display: none !important;
    }
}


/* === tienda-contenedor-profesional.css === */
/* ============================================
   MAQUETADO PROFESIONAL UX/UI OPTIMIZADO
   Archivo: tienda-contenedor-profesional.css
   Descripción: Diseño profesional con tipografía balanceada
============================================ */

/* ============================================
   CONTENEDOR PRINCIPAL - ESTRUCTURA LIMPIA
============================================ */
.tienda-contenedor-principal {
    background: #FAFAFA;
    padding: 40px 0 60px;
    min-height: auto;
    overflow: visible;
}

.tienda-container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.tienda-row-principal {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

/* ============================================
   BARRA LATERAL - DISEÑO MINIMALISTA
============================================ */
.tienda-barra-lateral {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 0;
    transition: all 0.3s ease;
}

.tienda-barra-lateral:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Scrollbar minimalista */
.tienda-barra-lateral::-webkit-scrollbar {
    width: 5px;
}

.tienda-barra-lateral::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 10px;
}

.tienda-barra-lateral::-webkit-scrollbar-thumb {
    background: #D4AF37;
    border-radius: 10px;
}

.tienda-barra-lateral::-webkit-scrollbar-thumb:hover {
    background: #C19F30;
}

/* Cards de filtro minimalistas */
.tienda-card-filtro {
    background: white;
    border: none;
    margin-bottom: 0;
    border-radius: 0;
}

.tienda-card-filtro:first-child {
    border-radius: 12px 12px 0 0;
}

.tienda-card-filtro:last-child {
    border-radius: 0 0 12px 12px;
}

.tienda-card-filtro:not(:last-child) {
    border-bottom: 1px solid #F0F0F0;
}

.tienda-card-encabezado {
    padding: 18px 20px 14px;
    background: #FAFAFA;
    border-bottom: 2px solid #D4AF37;
}

.tienda-card-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1f36;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tienda-card-titulo i {
    color: #D4AF37;
    font-size: 0.9rem;
}

.tienda-lista-categorias {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tienda-item-categoria {
    border-bottom: 1px solid #F8F8F8;
    transition: all 0.2s ease;
}

.tienda-item-categoria:last-child {
    border-bottom: none;
}

.tienda-item-categoria:hover {
    background: #FAFAFA;
}

.tienda-item-categoria.active {
    background: linear-gradient(90deg, #FFF9E6 0%, #FFFFFF 100%);
    border-left: 3px solid #D4AF37;
}

.tienda-enlace-categoria {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tienda-enlace-categoria:hover {
    color: #D4AF37;
    padding-left: 24px;
}

.tienda-item-categoria.active .tienda-enlace-categoria {
    color: #D4AF37;
    font-weight: 600;
}

.tienda-enlace-categoria i {
    font-size: 0.95rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.tienda-enlace-categoria:hover i,
.tienda-item-categoria.active .tienda-enlace-categoria i {
    opacity: 1;
    transform: scale(1.1);
}

/* ============================================
   ÁREA PRINCIPAL - PRODUCTOS
============================================ */
.tienda-busqueda-superior {
    background: white;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.barra-busqueda-input {
    border: 2px solid #E8E8E8;
    border-radius: 8px 0 0 8px;
    padding: 12px 18px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.barra-busqueda-input:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    outline: none;
}

.barra-busqueda-boton {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    border: none;
    color: #1a1f36;
    padding: 12px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.barra-busqueda-boton:hover {
    background: linear-gradient(135deg, #C19F30 0%, #E4D4AC 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.25);
}

/* Banner de ofertas - COLOR NARANJA ORIGINAL */
.banner-ofertas {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FDC830 100%);
    color: white;
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 40px;
    box-shadow: 0 6px 24px rgba(255, 107, 53, 0.25);
    overflow: hidden;
    position: relative;
}

.banner-ofertas::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.banner-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.oferta-icono {
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.oferta-texto h3 {
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin: 0 0 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.oferta-texto p {
    color: white;
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.95;
}

.oferta-contador {
    display: flex;
    gap: 12px;
}

.contador-item {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 10px 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.contador-numero {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    margin-bottom: 4px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.contador-label {
    display: block;
    font-size: 0.65rem;
    color: white;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Encabezado principal - PRIMERA SECCIÓN */
.tienda-encabezado {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tienda-titulo-principal {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.tienda-subtitulo {
    font-size: 1.05rem;
    color: #555;
    opacity: 0.85;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   GRID DE PRODUCTOS - UX/UI OPTIMIZADO
============================================ */
.tienda-grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

/* Card de producto */
.producto-contenedor {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tienda-card-producto {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #F0F0F0;
}

.tienda-card-producto:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    border-color: #E0E0E0;
}

/* Badges de producto - MÁS PEQUEÑOS */
.producto-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    gap: 6px;
}

.producto-badges .badge {
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.badge-nutricion {
    background: linear-gradient(135deg, rgba(0, 180, 166, 0.95) 0%, rgba(76, 175, 80, 0.95) 100%);
    color: white;
}

.badge-belleza {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.95) 0%, rgba(244, 143, 177, 0.95) 100%);
    color: white;
}

/* Imagen del producto - COMPACTA */
.tienda-imagen-contenedor {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #FAFAFA;
}

.tienda-imagen-producto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tienda-card-producto:hover .tienda-imagen-producto {
    transform: scale(1.05);
}

/* ============================================
   OVERLAY DE ACCIONES - DISEÑO PREMIUM GLASSMORPHISM
   Sin fondo oscuro, centrado con animaciones
============================================ */
.tienda-overlay-acciones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 5;
    pointer-events: none;
}

.tienda-card-producto:hover .tienda-overlay-acciones {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tienda-boton-accion {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #2c3e50;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo */
.tienda-boton-accion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    transition: width 0.4s ease, height 0.4s ease;
    transform: translate(-50%, -50%);
}

.tienda-boton-accion:hover::before {
    width: 100%;
    height: 100%;
}

.tienda-boton-accion:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35), 0 4px 10px rgba(212, 175, 55, 0.2);
    color: white;
}

/* Colores específicos por botón */
.tienda-boton-accion:nth-child(1):hover {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    box-shadow: 0 12px 30px rgba(52, 152, 219, 0.35), 0 4px 10px rgba(52, 152, 219, 0.2);
}

.tienda-boton-accion:nth-child(2):hover {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35), 0 4px 10px rgba(212, 175, 55, 0.2);
}

.tienda-boton-accion:nth-child(3):hover {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 12px 30px rgba(231, 76, 60, 0.35), 0 4px 10px rgba(231, 76, 60, 0.2);
}

/* Animación de entrada */
.tienda-card-producto:hover .tienda-boton-accion:nth-child(1) {
    animation: bounceInBtn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s both;
}

.tienda-card-producto:hover .tienda-boton-accion:nth-child(2) {
    animation: bounceInBtn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
}

.tienda-card-producto:hover .tienda-boton-accion:nth-child(3) {
    animation: bounceInBtn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s both;
}

@keyframes bounceInBtn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tienda-boton-accion:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Información del producto - TIPOGRAFÍA BALANCEADA */
.tienda-info-producto {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tienda-categoria-producto {
    font-size: 0.7rem;
    color: #D4AF37;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.tienda-nombre-producto {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1f36;
    margin-bottom: 8px;
    line-height: 1.35;
    min-height: 2.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tienda-nombre-producto a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tienda-nombre-producto a:hover {
    color: #D4AF37;
}

.tienda-descripcion-corta {
    font-size: 0.8rem;
    color: #666;
    opacity: 0.85;
    margin-bottom: 10px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3rem;
}

.tienda-precio-contenedor {
    margin-bottom: 8px;
}

.tienda-precio-actual {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1f36;
    font-family: 'Inter', sans-serif;
}

.tienda-stock-info {
    margin-bottom: 10px;
}

.stock-disponible {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #4CAF50;
    font-weight: 600;
}

.stock-disponible i {
    font-size: 0.85rem;
}

/* Botón principal de producto - COMPACTO */
.tienda-acciones-producto {
    margin-top: auto;
}

.tienda-boton-principal {
    width: 100%;
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    border: none;
    color: #1a1f36;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tienda-boton-principal:hover {
    background: linear-gradient(135deg, #C19F30 0%, #E4D4AC 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.tienda-boton-principal:active {
    transform: translateY(0);
}

.tienda-boton-principal i {
    font-size: 0.85rem;
}

/* ============================================
   PAGINACIÓN - MINIMALISTA
============================================ */
.tienda-paginacion-premium {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tienda-paginacion-premium .page-item {
    list-style: none;
}

.tienda-paginacion-premium .page-link {
    background: white;
    border: 2px solid #E8E8E8;
    color: #1a1f36;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.tienda-paginacion-premium .page-link:hover {
    background: #FAFAFA;
    border-color: #D4AF37;
    color: #D4AF37;
}

.tienda-paginacion-premium .page-item.active .page-link {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    border-color: #D4AF37;
    color: #1a1f36;
}

/* ============================================
   RESPONSIVE - MOBILE OPTIMIZADO
============================================ */
@media (max-width: 991px) {
    .tienda-row-principal {
        flex-direction: column;
    }

    .tienda-barra-lateral {
        position: static;
        max-height: none;
        margin-bottom: 25px;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    .tienda-titulo-principal {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .tienda-contenedor-principal {
        padding: 30px 0 50px;
    }

    .tienda-titulo-principal {
        font-size: 1.6rem;
    }

    .tienda-subtitulo {
        font-size: 0.95rem;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .oferta-texto h3 {
        font-size: 1.2rem;
    }

    .oferta-contador {
        justify-content: center;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .tienda-imagen-contenedor {
        height: 180px;
    }

    .tienda-nombre-producto {
        font-size: 0.9rem;
        min-height: 2.4rem;
    }

    .tienda-precio-actual {
        font-size: 1.2rem;
    }

    .tienda-boton-principal {
        font-size: 0.8rem;
        padding: 9px 14px;
    }
}

@media (max-width: 576px) {
    .tienda-titulo-principal {
        font-size: 1.4rem;
    }

    .tienda-subtitulo {
        font-size: 0.9rem;
    }

    .tienda-grid-productos {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .tienda-imagen-contenedor {
        height: 150px;
    }

    .tienda-info-producto {
        padding: 12px;
    }

    .tienda-nombre-producto {
        font-size: 0.85rem;
    }

    .tienda-descripcion-corta {
        font-size: 0.75rem;
    }

    .tienda-boton-principal {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
}


/* === tienda-ajuste-espaciado-superior.css === */
/**
 * AJUSTE DE ESPACIADO SUPERIOR - TIENDA MORFEO
 * Reduce el padding superior de los sliders y selector de líneas
 * para que los títulos suban más arriba
 */

/* ============================================
   SLIDERS DE PRODUCTOS - SUBIR ARRIBA
============================================ */
.productos-sliders-section {
    padding: 40px 0 100px 0 !important;
}

/* ============================================
   SELECTOR DE LÍNEAS - SUBIR ARRIBA
============================================ */
.lineas-selector-section {
    padding: 40px 0 80px 0 !important;
}

/* Ajuste del título del selector */
.lineas-titulo {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* ============================================
   HEADER DE SLIDERS - REDUCIR ESPACIO
============================================ */
.slider-header {
    margin-bottom: 25px !important;
    padding-bottom: 20px !important;
}

/* Reducir padding del contenedor de slider */
.slider-linea {
    padding: 30px 40px 40px 40px !important;
}

/* ============================================
   RESPONSIVE - TABLETS
============================================ */
@media (max-width: 992px) {
    .productos-sliders-section {
        padding: 30px 0 50px 0 !important;
    }

    .lineas-selector-section {
        padding: 30px 0 60px 0 !important;
    }

    .slider-linea {
        padding: 20px 20px 30px 20px !important;
    }
}

/* ============================================
   RESPONSIVE - MÓVILES
============================================ */
@media (max-width: 768px) {
    .productos-sliders-section {
        padding: 25px 0 40px 0 !important;
    }

    .lineas-selector-section {
        padding: 25px 0 50px 0 !important;
    }

    .slider-linea {
        padding: 18px 18px 25px 18px !important;
    }

    .slider-header {
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
    }
}

/* ============================================
   RESPONSIVE - MÓVILES PEQUEÑOS
============================================ */
@media (max-width: 576px) {
    .productos-sliders-section {
        padding: 20px 0 30px 0 !important;
    }

    .lineas-selector-section {
        padding: 20px 0 40px 0 !important;
    }

    .slider-linea {
        padding: 15px 15px 20px 15px !important;
    }

    .slider-header {
        margin-bottom: 15px !important;
        padding-bottom: 12px !important;
    }
}


/* === sweetalert-fix.css === */
/**
 * Fix para notificaciones SweetAlert2
 * Asegura que las alertas aparezcan sobre el navbar y todo el contenido
 */

/* SweetAlert2 Container - Máxima prioridad */
.swal2-container {
    z-index: 999999 !important;
}

/* SweetAlert2 Popup */
.swal2-popup {
    z-index: 999999 !important;
}

/* SweetAlert2 Toast (notificaciones pequeñas) */
.swal2-toast {
    z-index: 999999 !important;
}

/* SweetAlert2 Overlay/Backdrop */
.swal2-backdrop-show {
    z-index: 999998 !important;
}

/* Asegurar que los toasts estén en la posición correcta */
.swal2-top-end,
.swal2-top-right,
.swal2-top-start,
.swal2-top-left,
.swal2-top,
.swal2-bottom-end,
.swal2-bottom-right,
.swal2-bottom-start,
.swal2-bottom-left,
.swal2-bottom,
.swal2-center-start,
.swal2-center-end,
.swal2-center-left,
.swal2-center-right,
.swal2-center {
    z-index: 999999 !important;
}

/* Navbar debe estar debajo */
.navbar,
nav.navbar,
.navbar-fixed-top,
.fixed-top {
    z-index: 1050 !important;
    max-z-index: 1050 !important;
}

/* Header */
header {
    z-index: 1050 !important;
}

/* Modales de Bootstrap debajo de SweetAlert */
.modal,
.modal-backdrop {
    z-index: 1060 !important;
}

.modal-backdrop.show {
    z-index: 1055 !important;
}


/* === barra-busqueda-premium.css === */
/* ============================================
   BARRA DE BÚSQUEDA PREMIUM - DISEÑO MEJORADO
   Fecha: 2025-12-01
============================================ */

.barra-busqueda-premium {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}

.busqueda-contenedor-premium {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e0e7ee;
    border-radius: 50px;
    padding: 8px 8px 8px 20px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.busqueda-contenedor-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-gold, #D4AF37) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.busqueda-contenedor-premium:hover,
.busqueda-contenedor-premium:focus-within {
    border-color: var(--primary-gold, #D4AF37);
    box-shadow:
        0 15px 40px rgba(212, 175, 55, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.busqueda-contenedor-premium:focus-within::before {
    opacity: 1;
}

/* Icono de búsqueda */
.icono-busqueda-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    color: var(--primary-gold, #D4AF37);
    font-size: 18px;
    transition: all 0.3s ease;
}

.busqueda-contenedor-premium:focus-within .icono-busqueda-premium {
    transform: scale(1.1) rotate(5deg);
}

/* Input de búsqueda */
.input-busqueda-premium {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 15px;
    font-size: 15px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #2c3e50;
    font-weight: 400;
    outline: none;
    transition: all 0.3s ease;
}

.input-busqueda-premium::placeholder {
    color: #95a5a6;
    font-weight: 300;
    transition: all 0.3s ease;
}

.input-busqueda-premium:focus::placeholder {
    color: #bdc3c7;
    transform: translateX(5px);
}

/* Botón de buscar */
.btn-buscar-premium {
    background: linear-gradient(135deg, var(--primary-gold, #D4AF37) 0%, #C4991F 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(212, 175, 55, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-right: 8px;
}

.btn-buscar-premium::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-buscar-premium:hover::before {
    width: 300px;
    height: 300px;
}

.btn-buscar-premium:hover {
    background: linear-gradient(135deg, #C4991F 0%, var(--primary-gold, #D4AF37) 100%);
    box-shadow:
        0 6px 20px rgba(212, 175, 55, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-buscar-premium:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Botón de limpiar */
.btn-limpiar-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(231, 76, 60, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 16px;
}

.btn-limpiar-premium:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    box-shadow:
        0 6px 20px rgba(231, 76, 60, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px) rotate(90deg);
}

.btn-limpiar-premium:active {
    transform: translateY(0) rotate(90deg);
    box-shadow:
        0 2px 8px rgba(231, 76, 60, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Resultados de búsqueda */
.resultados-busqueda-premium {
    margin-top: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e0e7ee;
    border-radius: 12px;
    color: #2c3e50;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .barra-busqueda-premium {
        max-width: 100%;
    }

    .busqueda-contenedor-premium {
        padding: 6px 6px 6px 15px;
        border-radius: 40px;
    }

    .icono-busqueda-premium {
        width: 20px;
        height: 20px;
        font-size: 16px;
        margin-right: 8px;
    }

    .input-busqueda-premium {
        padding: 10px 10px;
        font-size: 14px;
    }

    .btn-buscar-premium {
        padding: 10px 20px;
        font-size: 13px;
        margin-right: 6px;
    }

    .btn-limpiar-premium {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .busqueda-contenedor-premium {
        flex-wrap: wrap;
        padding: 10px;
        border-radius: 20px;
    }

    .icono-busqueda-premium {
        margin-right: 8px;
    }

    .input-busqueda-premium {
        width: 100%;
        margin-bottom: 10px;
        padding: 10px;
        text-align: center;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.5);
    }

    .btn-buscar-premium {
        flex: 1;
        margin-right: 8px;
        padding: 10px 16px;
        font-size: 12px;
    }

    .btn-limpiar-premium {
        width: 40px;
        height: 40px;
    }
}

/* Animación de carga en el input */
.input-busqueda-premium.searching {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 175, 55, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: searching 1.5s linear infinite;
}

@keyframes searching {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Estado con resultados */
.resultados-busqueda-premium.has-results {
    border-color: #27ae60;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.resultados-busqueda-premium.no-results {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

/* Efecto de brillo sutil */
.busqueda-contenedor-premium::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    transition: all 0.6s ease;
    pointer-events: none;
    opacity: 0;
}

.busqueda-contenedor-premium:hover::after {
    opacity: 1;
    animation: shine 2s ease infinite;
}

@keyframes shine {
    0% {
        left: -50%;
    }
    100% {
        left: 150%;
    }
}

/* ============================================
   FILTROS HORIZONTALES PREMIUM - DISEÑO COMPACTO
============================================ */

.filtros-horizontales-premium {
    margin-top: 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(248, 250, 252, 0.85) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 10px 20px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(229, 231, 235, 0.5);
    position: relative;
    overflow: hidden;
}

.filtros-horizontales-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.03),
        transparent
    );
    transition: left 0.6s ease;
}

.filtros-horizontales-premium:hover::before {
    left: 100%;
}

.grupo-filtros-premium {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.grupo-filtros-premium:last-child {
    margin-bottom: 0;
}

.titulo-grupo-filtros {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.titulo-grupo-filtros i {
    color: var(--primary-gold, #D4AF37);
    font-size: 14px;
}

.contenedor-chips-filtros {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Chips de filtros - Versión compacta */
.chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    color: #374151;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    white-space: nowrap;
}

.chip-filtro i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.chip-filtro span {
    transition: transform 0.25s ease;
}

.chip-filtro::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.08);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.chip-filtro:hover::before {
    width: 120px;
    height: 120px;
}

.chip-filtro:hover {
    border-color: var(--primary-gold, #D4AF37);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(212, 175, 55, 0.12);
}

.chip-filtro:hover i {
    transform: scale(1.15);
}

.chip-filtro:active {
    transform: translateY(0);
}

/* Estado activo del chip */
.chip-filtro.active {
    background: linear-gradient(135deg, var(--primary-gold, #D4AF37) 0%, #C4991F 100%);
    border-color: #C4991F;
    color: white;
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.25);
    font-weight: 600;
}

.chip-filtro.active i {
    animation: gentlePulse 2s ease infinite;
}

@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* Variantes de colores para chips de nutrición */
.chip-nutricion:not(.active):hover {
    border-color: #4CAF50;
    background: #f1f8f4;
}

.chip-nutricion.active {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    border-color: #388E3C;
}

/* Variantes de colores para chips de belleza */
.chip-belleza:not(.active):hover {
    border-color: #E91E63;
    background: #fef0f5;
}

.chip-belleza.active {
    background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
    border-color: #C2185B;
}

/* Variantes de colores para categorías */
.chip-categoria:not(.active):hover {
    border-color: #3B82F6;
    background: #eff6ff;
}

.chip-categoria.active {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-color: #2563EB;
}

/* Botón de limpiar filtros - Versión compacta */
.btn-limpiar-filtros-premium {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1.5px solid #ef4444;
    border-radius: 20px;
    color: #ef4444;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.1);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.btn-limpiar-filtros-premium::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.btn-limpiar-filtros-premium:hover::before {
    width: 200px;
    height: 200px;
}

.btn-limpiar-filtros-premium:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: #dc2626;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

.btn-limpiar-filtros-premium:active {
    transform: translateY(0);
}

.btn-limpiar-filtros-premium i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-limpiar-filtros-premium:hover i {
    transform: rotate(180deg);
}

/* Responsive para filtros */
@media (max-width: 768px) {
    .filtros-horizontales-premium {
        padding: 12px 15px;
    }

    .grupo-filtros-premium {
        gap: 6px;
    }

    .titulo-grupo-filtros {
        font-size: 11px;
        width: 100%;
        margin-bottom: 5px;
    }

    .titulo-grupo-filtros i {
        font-size: 12px;
    }

    .contenedor-chips-filtros {
        gap: 5px;
        width: 100%;
    }

    .chip-filtro {
        padding: 5px 10px;
        font-size: 11px;
    }

    .chip-filtro i {
        font-size: 11px;
    }

    .btn-limpiar-filtros-premium {
        padding: 5px 12px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .filtros-horizontales-premium {
        padding: 10px 12px;
        margin-top: 15px;
    }

    .grupo-filtros-premium {
        margin-bottom: 10px;
    }

    .titulo-grupo-filtros {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .contenedor-chips-filtros {
        gap: 5px;
    }

    .chip-filtro {
        padding: 5px 10px;
        font-size: 11px;
    }

    .chip-filtro i {
        font-size: 11px;
    }
}

/* Animación de entrada para los filtros */
.filtros-horizontales-premium {
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Indicador visual de filtro activo */
.chip-filtro.active::after {
    content: '✓';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 1.5px solid white;
    border-radius: 50%;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    box-shadow:
        0 2px 6px rgba(16, 185, 129, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.1);
    animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Efecto de brillo en chips - solo cuando NO está activo */
.chip-filtro:not(.active)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    transition: left 0.5s ease;
    pointer-events: none;
}

.chip-filtro:not(.active):hover::after {
    left: 100%;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Separador sutil entre grupos de filtros */
.grupo-filtros-premium:not(:last-child) {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.3);
}


/* === slider-promociones.css === */
/* ============================================
   SLIDER DE PROMOCIONES - RESPONSIVE
   Sistema dinámico de promociones con contador regresivo
   Paleta de colores armonizada con la tienda
============================================ */

:root {
    --promo-primary-gold: #D4AF37;
    --promo-secondary-gold: #F4E4BC;
    --promo-accent-rose: #D4A574;
    --promo-dark-navy: #1a1f36;
    --promo-medium-navy: #2d3561;
    --promo-cream: #FAF8F5;
}

.promociones-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 60px;
    margin: 2rem auto;
    max-width: 1400px;
}

.promociones-slider {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 0;
}

.promo-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
}

.promo-slide.active {
    display: block;
    opacity: 1;
    animation: fadeInScale 0.6s ease-in-out;
    margin: 0;
    position: relative;
    visibility: visible;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Banner de Ofertas Base - Gradiente Dorado Premium */
.banner-ofertas {
    background: linear-gradient(135deg, #D4AF37 0%, #E8C468 50%, #F4E4BC 100%);
    border-radius: 24px;
    padding: 2.8rem 3.5rem;
    box-shadow:
        0 12px 45px rgba(212, 175, 55, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.6);
    margin: 0;
    display: block;
}

.banner-ofertas:hover {
    box-shadow:
        0 15px 50px rgba(212, 175, 55, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

/* Overlay sutil para profundidad */
.banner-ofertas::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(212, 175, 55, 0.1) 0%,
        transparent 40%,
        rgba(244, 228, 188, 0.15) 100%);
    pointer-events: none;
    z-index: 0;
}

.banner-ofertas::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
    border-radius: 50%;
    animation: floatCircle 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes floatCircle {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-20px, 20px);
    }
}

.banner-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    position: relative;
    z-index: 2;
}

.oferta-icono {
    background: linear-gradient(135deg, #1a1f36, #2d3561);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: #D4AF37;
    flex-shrink: 0;
    box-shadow:
        0 10px 25px rgba(26, 31, 54, 0.45),
        inset 0 2px 10px rgba(255, 255, 255, 0.12);
    border: 3px solid rgba(212, 175, 55, 0.35);
    animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 8px 20px rgba(26, 31, 54, 0.4),
            inset 0 2px 8px rgba(255, 255, 255, 0.1),
            0 0 0 0 rgba(212, 175, 55, 0);
    }
    50% {
        transform: scale(1.08);
        box-shadow:
            0 12px 30px rgba(26, 31, 54, 0.5),
            inset 0 2px 8px rgba(255, 255, 255, 0.15),
            0 0 20px 5px rgba(212, 175, 55, 0.3);
    }
}

.oferta-texto {
    flex: 1;
    padding: 0.5rem 2rem;
}

.oferta-texto h3 {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.35;
    color: #1a1f36;
    text-shadow:
        2px 2px 5px rgba(255, 255, 255, 0.85),
        1px 1px 3px rgba(255, 255, 255, 0.65),
        0 2px 4px rgba(26, 31, 54, 0.25);
    font-family: 'Playfair Display', serif;
    word-spacing: 3px;
}

.oferta-texto p {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3561;
    line-height: 1.6;
    letter-spacing: 0.3px;
    word-spacing: 2px;
    text-shadow:
        1px 1px 3px rgba(255, 255, 255, 0.75),
        0 1px 2px rgba(26, 31, 54, 0.18);
}

.oferta-contador {
    display: flex;
    gap: 1.4rem;
    flex-shrink: 0;
}

.contador-item {
    background: linear-gradient(135deg, #1a1f36, #2d3561);
    border: 2px solid rgba(212, 175, 55, 0.42);
    border-radius: 18px;
    padding: 1.4rem 1.7rem;
    text-align: center;
    min-width: 105px;
    box-shadow:
        0 8px 24px rgba(26, 31, 54, 0.4),
        inset 0 1px 4px rgba(255, 255, 255, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.contador-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(212, 175, 55, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contador-item:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow:
        0 8px 25px rgba(26, 31, 54, 0.45),
        inset 0 1px 3px rgba(255, 255, 255, 0.15),
        0 0 15px rgba(212, 175, 55, 0.3);
}

.contador-item:hover::before {
    opacity: 1;
}

.contador-numero {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: #D4AF37;
    line-height: 1;
    margin-bottom: 0.4rem;
    text-shadow:
        0 3px 10px rgba(212, 175, 55, 0.45),
        0 1px 4px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 1;
}

.contador-label {
    display: block;
    font-size: 0.75rem;
    color: #F4E4BC;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 1;
}

/* Flechas de Navegación */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #1a1f36, #2d3561);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    box-shadow:
        0 8px 24px rgba(26, 31, 54, 0.45),
        inset 0 1px 4px rgba(255, 255, 255, 0.12);
}

.slider-arrow:hover {
    background: linear-gradient(135deg, #D4AF37, #E8C468);
    border-color: rgba(212, 175, 55, 0.8);
    transform: translateY(-50%) scale(1.12);
    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.5),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        0 0 20px rgba(212, 175, 55, 0.3);
}

.slider-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.slider-arrow i {
    font-size: 1.5rem;
    color: #D4AF37;
    font-weight: 900;
    transition: all 0.4s ease;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}

.slider-arrow:hover i {
    color: #1a1f36;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

.slider-arrow-prev {
    left: 0;
}

.slider-arrow-next {
    right: 0;
}

/* Indicadores (Dots) */
.promociones-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.6rem;
}

.promo-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(26, 31, 54, 0.45);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(26, 31, 54, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.promo-dot:hover {
    background: rgba(212, 175, 55, 0.65);
    transform: scale(1.3);
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.35);
}

.promo-dot.active {
    background: linear-gradient(135deg, #D4AF37, #E8C468);
    width: 42px;
    border-radius: 11px;
    border-color: #D4AF37;
    box-shadow:
        0 4px 14px rgba(212, 175, 55, 0.45),
        0 0 18px rgba(212, 175, 55, 0.25);
}

/* Responsive Design */
@media (max-width: 992px) {
    .promociones-slider-container {
        padding: 0 40px;
    }

    .slider-arrow {
        width: 45px;
        height: 45px;
    }

    .slider-arrow i {
        font-size: 1.2rem;
    }

    .banner-contenido {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .oferta-icono {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .oferta-texto h3 {
        font-size: 1.5rem;
    }

    .oferta-texto p {
        font-size: 1rem;
    }

    .oferta-contador {
        gap: 0.8rem;
    }

    .contador-item {
        min-width: 80px;
        padding: 0.8rem 1rem;
    }

    .contador-numero {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .promociones-slider-container {
        padding: 0 35px;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
    }

    .slider-arrow i {
        font-size: 1.1rem;
    }

    .banner-ofertas {
        padding: 1.8rem 1.2rem;
        border-radius: 16px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 1.2rem;
    }

    .oferta-icono {
        width: 65px;
        height: 65px;
        font-size: 1.8rem;
        margin: 0 auto;
    }

    .oferta-texto h3 {
        font-size: 1.35rem;
        letter-spacing: 1.5px;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    .oferta-texto p {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .oferta-contador {
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
        flex-wrap: nowrap;
    }

    .contador-item {
        min-width: 70px;
        padding: 0.8rem 0.7rem;
        border-radius: 12px;
    }

    .contador-numero {
        font-size: 1.8rem;
        margin-bottom: 0.3rem;
    }

    .contador-label {
        font-size: 0.7rem;
        letter-spacing: 1.5px;
    }

    .promociones-dots {
        margin-top: 1.2rem;
        gap: 0.7rem;
    }

    .promo-dot {
        width: 11px;
        height: 11px;
    }

    .promo-dot.active {
        width: 30px;
    }
}

@media (max-width: 480px) {
    .promociones-slider-container {
        padding: 0 25px;
    }

    .slider-arrow {
        width: 32px;
        height: 32px;
        border-width: 1.5px;
    }

    .slider-arrow i {
        font-size: 0.85rem;
    }

    .banner-ofertas {
        padding: 1rem 0.8rem;
        border-radius: 12px;
        margin: 0 0.3rem;
    }

    .banner-ofertas::before {
        width: 250px;
        height: 250px;
    }

    .banner-contenido {
        gap: 0.8rem;
    }

    .oferta-icono {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
        border-width: 2px;
    }

    .oferta-texto h3 {
        font-size: 0.95rem;
        letter-spacing: 0.8px;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }

    .oferta-texto p {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .oferta-contador {
        gap: 0.35rem;
        margin-top: 0.5rem;
    }

    .contador-item {
        min-width: 52px;
        padding: 0.5rem 0.4rem;
        border-radius: 8px;
        border-width: 1.5px;
    }

    .contador-numero {
        font-size: 1.3rem;
        margin-bottom: 0.2rem;
    }

    .contador-label {
        font-size: 0.55rem;
        letter-spacing: 0.8px;
    }

    .promo-dot {
        width: 8px;
        height: 8px;
    }

    .promo-dot.active {
        width: 20px;
    }

    .promociones-dots {
        margin-top: 0.8rem;
        gap: 0.5rem;
    }
}

@media (max-width: 400px) {
    .promociones-slider-container {
        padding: 0 22px;
    }

    .banner-ofertas {
        padding: 0.9rem 0.7rem;
        margin: 0 0.25rem;
    }

    .banner-contenido {
        gap: 0.7rem;
    }

    .oferta-icono {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .oferta-texto h3 {
        font-size: 0.9rem;
        letter-spacing: 0.6px;
    }

    .oferta-texto p {
        font-size: 0.68rem;
    }

    .contador-item {
        min-width: 48px;
        padding: 0.45rem 0.35rem;
        border-radius: 7px;
    }

    .contador-numero {
        font-size: 1.2rem;
    }

    .contador-label {
        font-size: 0.5rem;
    }
}

@media (max-width: 360px) {
    .promociones-slider-container {
        padding: 0 20px;
    }

    .slider-arrow {
        width: 30px;
        height: 30px;
    }

    .slider-arrow i {
        font-size: 0.8rem;
    }

    .banner-ofertas {
        padding: 0.8rem 0.6rem;
    }

    .banner-contenido {
        gap: 0.6rem;
    }

    .oferta-icono {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .oferta-texto h3 {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .oferta-texto p {
        font-size: 0.65rem;
    }

    .oferta-contador {
        gap: 0.3rem;
    }

    .contador-item {
        min-width: 45px;
        padding: 0.4rem 0.3rem;
    }

    .contador-numero {
        font-size: 1.15rem;
    }

    .contador-label {
        font-size: 0.48rem;
    }
}


/* === slider-promociones-responsive.css === */
/* ============================================
   SLIDER DE PROMOCIONES - RESPONSIVE OPTIMIZADO
   Versión mejorada con breakpoints completos
   Desktop → Tablet → Mobile
   Centrado perfecto y altura automática
============================================ */

/* ============================================
   AJUSTE DEL CONTENEDOR - Slider funcional correcto
============================================ */

.promociones-slider-container {
    position: relative !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
}

.promociones-slider {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Slides inactivos ocultos con position absolute */
.promo-slide {
    display: none !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    visibility: hidden !important;
}

/* Slide activo visible con position relative */
.promo-slide.active {
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Restablecer estilos originales de la tarjeta */
.banner-ofertas {
    /* Los estilos se manejan en slider-promociones.css y los breakpoints específicos */
}

.banner-contenido {
    /* Los estilos se manejan en slider-promociones.css y los breakpoints específicos */
}

/* ============================================
   DESKTOP (>1200px) - Diseño completo
============================================ */
@media (min-width: 1201px) {
    .promociones-slider-container {
        padding: 0 70px;
        max-width: 1450px;
        margin: 2rem auto;
    }

    .banner-ofertas {
        padding: 2.8rem 3.5rem;
        border-radius: 24px;
    }

    .banner-contenido {
        gap: 3rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .oferta-icono {
        width: 105px;
        height: 105px;
        font-size: 2.9rem;
    }

    .oferta-texto {
        flex: 1;
        padding: 0.5rem 2rem;
    }

    .oferta-texto h3 {
        font-size: 2.3rem;
        line-height: 1.35;
        margin-bottom: 1rem;
        letter-spacing: 1.5px;
        word-spacing: 3px;
    }

    .oferta-texto p {
        font-size: 1.3rem;
        line-height: 1.6;
        letter-spacing: 0.3px;
        word-spacing: 2px;
    }

    .oferta-contador {
        gap: 1.2rem;
        flex-direction: row;
    }

    .contador-item {
        min-width: 95px;
        padding: 1.2rem 1.4rem;
        border-radius: 18px;
    }

    .contador-numero {
        font-size: 2.1rem;
        margin-bottom: 0.45rem;
    }

    .contador-label {
        font-size: 0.78rem;
        letter-spacing: 2.2px;
    }

    .slider-arrow {
        width: 60px;
        height: 60px;
    }

    .slider-arrow i {
        font-size: 1.55rem;
    }
}

/* ============================================
   LAPTOP (993px - 1200px)
============================================ */
@media (min-width: 993px) and (max-width: 1200px) {
    .promociones-slider-container {
        padding: 0 60px;
        max-width: 1250px;
        margin: 2rem auto;
    }

    .banner-ofertas {
        padding: 2.4rem 2.8rem;
        border-radius: 22px;
    }

    .banner-contenido {
        gap: 2.6rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .oferta-icono {
        width: 95px;
        height: 95px;
        font-size: 2.5rem;
    }

    .oferta-texto {
        flex: 1;
        padding: 0.4rem 1.8rem;
    }

    .oferta-texto h3 {
        font-size: 2.1rem;
        line-height: 1.35;
        margin-bottom: 0.9rem;
        letter-spacing: 1.3px;
        word-spacing: 2.5px;
    }

    .oferta-texto p {
        font-size: 1.2rem;
        line-height: 1.55;
        letter-spacing: 0.3px;
        word-spacing: 2px;
    }

    .oferta-contador {
        gap: 1.1rem;
        flex-direction: row;
    }

    .contador-item {
        min-width: 88px;
        padding: 1.1rem 1.3rem;
        border-radius: 17px;
    }

    .contador-numero {
        font-size: 1.9rem;
        margin-bottom: 0.4rem;
    }

    .contador-label {
        font-size: 0.74rem;
        letter-spacing: 2.1px;
    }

    .slider-arrow {
        width: 54px;
        height: 54px;
    }

    .slider-arrow i {
        font-size: 1.4rem;
    }
}

/* ============================================
   TABLET (769px - 992px)
============================================ */
@media (min-width: 769px) and (max-width: 992px) {
    .promociones-slider-container {
        padding: 0 50px;
        max-width: 1050px;
        margin: 1.8rem auto;
    }

    .banner-ofertas {
        padding: 2rem 2.5rem;
        border-radius: 20px;
    }

    .banner-contenido {
        gap: 1.8rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .oferta-icono {
        width: 88px;
        height: 88px;
        font-size: 2.3rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        text-align: center;
        padding: 0.4rem 1.5rem;
    }

    .oferta-texto h3 {
        font-size: 1.9rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
        letter-spacing: 1px;
        word-spacing: 2px;
    }

    .oferta-texto p {
        font-size: 1.15rem;
        line-height: 1.6;
        letter-spacing: 0.2px;
        word-spacing: 1.5px;
    }

    .oferta-contador {
        gap: 0.9rem;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .contador-item {
        min-width: 80px;
        padding: 1rem 1.1rem;
        border-radius: 15px;
    }

    .contador-numero {
        font-size: 1.8rem;
        margin-bottom: 0.35rem;
    }

    .contador-label {
        font-size: 0.68rem;
        letter-spacing: 1.9px;
    }

    .slider-arrow {
        width: 50px;
        height: 50px;
    }

    .slider-arrow i {
        font-size: 1.28rem;
    }
}

/* ============================================
   TABLET PEQUEÑO (577px - 768px)
============================================ */
@media (min-width: 577px) and (max-width: 768px) {
    .promociones-slider-container {
        padding: 0 20px;
        margin: 1.5rem auto;
    }

    /* Ocultar flechas en tablet pequeño */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 2.2rem 2.4rem;
        border-radius: 18px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .oferta-icono {
        width: 82px;
        height: 82px;
        font-size: 2.15rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.3rem 1.4rem;
    }

    .oferta-texto h3 {
        font-size: 1.75rem;
        line-height: 1.4;
        margin-bottom: 0.7rem;
        letter-spacing: 0.8px;
        word-spacing: 2px;
    }

    .oferta-texto p {
        font-size: 1.1rem;
        line-height: 1.55;
        letter-spacing: 0.2px;
        word-spacing: 1.5px;
    }

    .oferta-contador {
        justify-content: center;
        gap: 0.75rem;
        width: 100%;
        flex-wrap: nowrap;
    }

    .contador-item {
        min-width: 72px;
        padding: 0.9rem 0.95rem;
        border-radius: 14px;
    }

    .contador-numero {
        font-size: 1.65rem;
        margin-bottom: 0.32rem;
    }

    .contador-label {
        font-size: 0.64rem;
        letter-spacing: 1.8px;
    }

    .promociones-dots {
        margin-top: 1.3rem;
        gap: 0.7rem;
    }

    .promo-dot {
        width: 11px;
        height: 11px;
    }

    .promo-dot.active {
        width: 32px;
    }
}

/* ============================================
   MÓVIL GRANDE (481px - 576px)
============================================ */
@media (min-width: 481px) and (max-width: 576px) {
    .promociones-slider-container {
        padding: 0 18px;
        margin: 1.3rem auto;
    }

    /* Ocultar flechas en móvil grande */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 2rem 2.2rem;
        border-radius: 16px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 1.3rem;
    }

    .oferta-icono {
        width: 76px;
        height: 76px;
        font-size: 1.95rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.3rem 1.2rem;
    }

    .oferta-texto h3 {
        font-size: 1.55rem;
        line-height: 1.4;
        margin-bottom: 0.65rem;
        letter-spacing: 0.6px;
        word-spacing: 1.5px;
    }

    .oferta-texto p {
        font-size: 1.02rem;
        line-height: 1.5;
        letter-spacing: 0.2px;
    }

    .oferta-contador {
        gap: 0.65rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 68px;
        padding: 0.75rem 0.75rem;
        border-radius: 12px;
    }

    .contador-numero {
        font-size: 1.5rem;
        margin-bottom: 0.28rem;
    }

    .contador-label {
        font-size: 0.6rem;
        letter-spacing: 1.5px;
    }

    .promociones-dots {
        margin-top: 1.1rem;
        gap: 0.65rem;
    }

    .promo-dot {
        width: 10px;
        height: 10px;
    }

    .promo-dot.active {
        width: 28px;
    }
}

/* ============================================
   MÓVIL MEDIANO (401px - 480px)
============================================ */
@media (min-width: 401px) and (max-width: 480px) {
    .promociones-slider-container {
        padding: 0 16px;
        margin: 1.2rem auto;
    }

    /* Ocultar flechas en móvil mediano */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 1.8rem 1.8rem;
        border-radius: 15px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
        gap: 1.1rem;
    }

    .oferta-icono {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.25rem 1rem;
    }

    .oferta-texto h3 {
        font-size: 1.38rem;
        line-height: 1.4;
        margin-bottom: 0.55rem;
        letter-spacing: 0.5px;
        word-spacing: 1.5px;
    }

    .oferta-texto p {
        font-size: 0.94rem;
        line-height: 1.5;
        letter-spacing: 0.2px;
    }

    .oferta-contador {
        gap: 0.6rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 62px;
        padding: 0.7rem 0.6rem;
        border-radius: 11px;
    }

    .contador-numero {
        font-size: 1.35rem;
        margin-bottom: 0.25rem;
    }

    .contador-label {
        font-size: 0.58rem;
        letter-spacing: 1.3px;
    }

    .promociones-dots {
        margin-top: 1rem;
        gap: 0.6rem;
    }

    .promo-dot {
        width: 9px;
        height: 9px;
    }

    .promo-dot.active {
        width: 26px;
    }
}

/* ============================================
   MÓVIL PEQUEÑO (361px - 400px)
============================================ */
@media (min-width: 361px) and (max-width: 400px) {
    .promociones-slider-container {
        padding: 0 14px;
        margin: 1.1rem auto;
    }

    /* Ocultar flechas en móvil pequeño */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 1.6rem 1.5rem;
        border-radius: 14px;
    }

    .banner-contenido {
        gap: 1rem;
    }

    .oferta-icono {
        width: 65px;
        height: 65px;
        font-size: 1.6rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.25rem 0.9rem;
    }

    .oferta-texto h3 {
        font-size: 1.25rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        letter-spacing: 0.4px;
        word-spacing: 1.2px;
    }

    .oferta-texto p {
        font-size: 0.87rem;
        line-height: 1.45;
        letter-spacing: 0.15px;
    }

    .oferta-contador {
        gap: 0.52rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 58px;
        padding: 0.6rem 0.52rem;
        border-radius: 10px;
    }

    .contador-numero {
        font-size: 1.25rem;
        margin-bottom: 0.2rem;
    }

    .contador-label {
        font-size: 0.54rem;
        letter-spacing: 0.9px;
    }

    .promociones-dots {
        margin-top: 0.9rem;
        gap: 0.55rem;
    }

    .promo-dot {
        width: 8px;
        height: 8px;
    }

    .promo-dot.active {
        width: 23px;
    }
}

/* ============================================
   MÓVIL MUY PEQUEÑO (≤360px)
============================================ */
@media (max-width: 360px) {
    .promociones-slider-container {
        padding: 0 12px;
        margin: 1rem auto;
    }

    /* Ocultar flechas en móvil muy pequeño */
    .slider-arrow {
        display: none !important;
    }

    .banner-ofertas {
        padding: 1.5rem 1.4rem;
        border-radius: 13px;
    }

    .banner-contenido {
        gap: 0.9rem;
    }

    .oferta-icono {
        width: 62px;
        height: 62px;
        font-size: 1.5rem;
        margin: 0 auto;
    }

    .oferta-texto {
        width: 100%;
        padding: 0.2rem 0.8rem;
    }

    .oferta-texto h3 {
        font-size: 1.15rem;
        line-height: 1.4;
        margin-bottom: 0.45rem;
        letter-spacing: 0.3px;
        word-spacing: 1px;
    }

    .oferta-texto p {
        font-size: 0.82rem;
        line-height: 1.4;
        letter-spacing: 0.1px;
    }

    .oferta-contador {
        gap: 0.45rem;
        justify-content: center;
        width: 100%;
    }

    .contador-item {
        min-width: 54px;
        padding: 0.55rem 0.48rem;
        border-radius: 9px;
    }

    .contador-numero {
        font-size: 1.18rem;
        margin-bottom: 0.16rem;
    }

    .contador-label {
        font-size: 0.52rem;
        letter-spacing: 0.75px;
    }

    .promociones-dots {
        margin-top: 0.8rem;
        gap: 0.5rem;
    }

    .promo-dot {
        width: 7px;
        height: 7px;
    }

    .promo-dot.active {
        width: 21px;
    }
}

/* ============================================
   AJUSTES POR ALTURA DE PANTALLA
============================================ */

/* Pantallas cortas en móvil */
@media (max-width: 480px) and (max-height: 700px) {
    .banner-ofertas {
        padding: 0.8rem 0.7rem !important;
    }

    .oferta-icono {
        width: 42px !important;
        height: 42px !important;
    }

    .contador-item {
        padding: 0.4rem 0.35rem !important;
    }

    .contador-numero {
        font-size: 1.1rem !important;
    }
}

/* Pantallas muy cortas */
@media (max-width: 360px) and (max-height: 640px) {
    .banner-ofertas {
        padding: 0.7rem 0.6rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.85rem !important;
    }

    .oferta-texto p {
        font-size: 0.62rem !important;
    }

    .contador-numero {
        font-size: 1rem !important;
    }

    .contador-label {
        font-size: 0.45rem !important;
    }
}


/* === slider-productos-promocion.css === */
/* ============================================
   SLIDER DE PRODUCTOS EN PROMOCIÓN
   Estilos para el slider de productos con descuentos
   ============================================ */

/* Sección de productos en promoción */
.seccion-productos-promocion {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    padding: 60px 0;
    margin: 40px 0;
}

/* Contenedor del slider de promoción */
.slider-promocion-destacado {
    position: relative;
}

/* Header del slider de promoción */
.slider-promocion-destacado .slider-header {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    padding: 30px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
    margin-bottom: 0;
}

.slider-promocion-destacado .slider-icon.promocion-icon {
    background: rgba(255, 255, 255, 0.95);
    color: #ff4757;
    font-size: 2rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 255, 255, 1);
    animation: pulsePromo 2s infinite;
}

@keyframes pulsePromo {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }
}

.slider-promocion-destacado .slider-titulo {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.promocion-badge-title {
    background: rgba(255, 255, 255, 0.95);
    color: #d32f2f;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
}

.slider-promocion-destacado .slider-subtitulo {
    color: #ffffff;
    font-size: 1.1rem;
    margin: 8px 0 0 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

/* Contenedor del slider */
.slider-promocion-destacado .slider-container {
    background: white;
    border-radius: 0 0 20px 20px;
    padding: 40px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* Card de producto en promoción */
.producto-card.promocion-card {
    background: white;
    border: 2px solid #ffe8e8;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.15);
    position: relative;
}

.producto-card.promocion-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(255, 107, 107, 0.35);
    border-color: #ff6b6b;
}

/* Badge de descuento */
.badge-descuento-promocion {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #ff3838 0%, #ff1744 100%);
    color: white;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(255, 23, 68, 0.5);
    animation: bounce 2s infinite;
    display: flex;
    align-items: center;
    gap: 6px;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.badge-descuento-promocion i {
    font-size: 0.9rem;
}

/* Badge de oferta en la imagen */
.producto-badge.promocion-badge {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 5px 15px rgba(238, 90, 111, 0.4);
    animation: glow 2s infinite;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(238, 90, 111, 0.4);
    }
    50% {
        box-shadow: 0 8px 25px rgba(238, 90, 111, 0.6);
    }
}

/* Precios en promoción */
.producto-precios-promocion {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 12px 0;
}

.producto-precio-original {
    color: #999;
    text-decoration: line-through;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

.producto-precio-descuento {
    color: #ff3838;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 4px rgba(255, 56, 56, 0.1);
}

/* Ahorro */
.producto-ahorro {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    color: #ff3838;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    box-shadow: 0 3px 10px rgba(255, 56, 56, 0.1);
}

.producto-ahorro i {
    font-size: 1.1rem;
}

/* Botón de agregar al carrito en promoción */
.btn-agregar-carrito.btn-promocion {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
    width: 100%;
    margin-top: 15px;
}

.btn-agregar-carrito.btn-promocion:hover {
    background: linear-gradient(135deg, #ff5252 0%, #e53935 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.5);
}

.btn-agregar-carrito.btn-promocion:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

/* Navegación del slider de promoción */
.slider-promocion-destacado .slider-navegacion .slider-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #d32f2f;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.slider-promocion-destacado .slider-navegacion .slider-btn:hover {
    background: white;
    color: #d32f2f;
    border-color: white;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 992px) {
    .seccion-productos-promocion {
        padding: 50px 0;
        margin: 30px 0;
    }

    .slider-promocion-destacado .slider-header {
        padding: 25px;
        border-radius: 18px 18px 0 0;
    }

    .slider-promocion-destacado .slider-icon.promocion-icon {
        width: 65px;
        height: 65px;
        font-size: 1.9rem;
    }

    .slider-promocion-destacado .slider-titulo {
        font-size: 1.7rem;
    }

    .slider-promocion-destacado .slider-subtitulo {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .seccion-productos-promocion {
        padding: 40px 0;
        margin: 20px 0;
    }

    .slider-promocion-destacado .slider-header {
        padding: 20px 15px;
        border-radius: 16px 16px 0 0;
    }

    .slider-promocion-destacado .slider-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .slider-promocion-destacado .slider-titulo {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .promocion-badge-title {
        font-size: 0.75rem;
        padding: 6px 15px;
        letter-spacing: 1px;
    }

    .slider-promocion-destacado .slider-subtitulo {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .slider-promocion-destacado .slider-icon.promocion-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .badge-descuento-promocion {
        padding: 8px 14px;
        font-size: 0.9rem;
        top: 12px;
        left: 12px;
    }

    .producto-precio-descuento {
        font-size: 1.5rem;
    }

    .producto-precio-original {
        font-size: 0.9rem;
    }

    .producto-ahorro {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .slider-promocion-destacado .slider-container {
        padding: 30px 15px;
        border-radius: 0 0 16px 16px;
    }

    .slider-promocion-destacado .slider-navegacion {
        gap: 8px;
    }

    .slider-promocion-destacado .slider-navegacion .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .seccion-productos-promocion {
        padding: 30px 0;
        margin: 15px 0;
    }

    .slider-promocion-destacado .slider-header {
        padding: 18px 12px;
    }

    .slider-promocion-destacado .slider-titulo {
        font-size: 1.3rem;
        line-height: 1.25;
    }

    .promocion-badge-title {
        font-size: 0.7rem;
        padding: 5px 12px;
    }

    .slider-promocion-destacado .slider-subtitulo {
        font-size: 0.88rem;
    }

    .slider-promocion-destacado .slider-icon.promocion-icon {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }

    .producto-card.promocion-card {
        border-radius: 16px;
    }

    .badge-descuento-promocion {
        padding: 7px 12px;
        font-size: 0.85rem;
        top: 10px;
        left: 10px;
    }

    .producto-precios-promocion {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .producto-precio-descuento {
        font-size: 1.4rem;
    }

    .producto-precio-original {
        font-size: 0.85rem;
    }

    .producto-ahorro {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    .slider-promocion-destacado .slider-container {
        padding: 25px 12px;
    }

    .btn-agregar-carrito.btn-promocion {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .seccion-productos-promocion {
        padding: 25px 0;
        margin: 12px 0;
    }

    .slider-promocion-destacado .slider-header {
        padding: 15px 10px;
        border-radius: 14px 14px 0 0;
    }

    .slider-promocion-destacado .slider-header-content {
        gap: 12px;
    }

    .slider-promocion-destacado .slider-titulo {
        font-size: 1.15rem;
        line-height: 1.2;
    }

    .promocion-badge-title {
        font-size: 0.65rem;
        padding: 4px 10px;
        letter-spacing: 0.8px;
    }

    .slider-promocion-destacado .slider-subtitulo {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .slider-promocion-destacado .slider-icon.promocion-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    .badge-descuento-promocion {
        padding: 6px 10px;
        font-size: 0.8rem;
        top: 8px;
        left: 8px;
        gap: 4px;
    }

    .badge-descuento-promocion i {
        font-size: 0.75rem;
    }

    .producto-precios-promocion {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .producto-precio-descuento {
        font-size: 1.3rem;
    }

    .producto-precio-original {
        font-size: 0.8rem;
    }

    .producto-ahorro {
        font-size: 0.75rem;
        padding: 5px 8px;
    }

    .producto-ahorro i {
        font-size: 0.9rem;
    }

    .slider-promocion-destacado .slider-container {
        padding: 20px 10px;
        border-radius: 0 0 14px 14px;
    }

    .slider-promocion-destacado .slider-navegacion {
        gap: 6px;
    }

    .slider-promocion-destacado .slider-navegacion .slider-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .btn-agregar-carrito.btn-promocion {
        padding: 11px 20px;
        font-size: 0.9rem;
        border-radius: 25px;
    }
}

@media (max-width: 400px) {
    .slider-promocion-destacado .slider-titulo {
        font-size: 1.05rem;
    }

    .slider-promocion-destacado .slider-subtitulo {
        font-size: 0.78rem;
    }

    .slider-promocion-destacado .slider-icon.promocion-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .badge-descuento-promocion {
        padding: 5px 8px;
        font-size: 0.75rem;
    }

    .producto-precio-descuento {
        font-size: 1.2rem;
    }

    .btn-agregar-carrito.btn-promocion {
        padding: 10px 18px;
        font-size: 0.85rem;
    }
}

@media (max-width: 360px) {
    .seccion-productos-promocion {
        padding: 20px 0;
    }

    .slider-promocion-destacado .slider-header {
        padding: 12px 8px;
        border-radius: 12px 12px 0 0;
    }

    .slider-promocion-destacado .slider-titulo {
        font-size: 1rem;
    }

    .promocion-badge-title {
        font-size: 0.6rem;
        padding: 4px 8px;
    }

    .slider-promocion-destacado .slider-subtitulo {
        font-size: 0.75rem;
    }

    .slider-promocion-destacado .slider-icon.promocion-icon {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .producto-precio-descuento {
        font-size: 1.15rem;
    }

    .producto-precio-original {
        font-size: 0.75rem;
    }

    .producto-ahorro {
        font-size: 0.7rem;
        padding: 4px 7px;
    }

    .slider-promocion-destacado .slider-container {
        padding: 18px 8px;
        border-radius: 0 0 12px 12px;
    }

    .slider-promocion-destacado .slider-navegacion .slider-btn {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .btn-agregar-carrito.btn-promocion {
        padding: 9px 16px;
        font-size: 0.8rem;
    }
}


/* === carrito-promociones-slider.css === */
/* ============================================
   SLIDER DE PROMOCIONES EN MODAL DEL CARRITO
   Estilos para el slider pequeño de productos en promoción
   ============================================ */

/* Contenedor del slider de promociones - OPTIMIZADO */
.carrito-promociones-container {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    padding: 20px;
    margin: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.15);
    border: 2px solid #ffe0e0;
    position: relative;
    overflow: hidden;
}

/* Patrón decorativo de fondo sutil */
.carrito-promociones-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Header del slider de promociones - Mejorado */
.carrito-promociones-header {
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

.carrito-promociones-titulo {
    color: #ff3838;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(255, 56, 56, 0.1);
}

.carrito-promociones-titulo i {
    font-size: 1.3rem;
    animation: pulse-gift 1.5s infinite;
    filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.3));
}

@keyframes pulse-gift {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

.carrito-promociones-descripcion {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
    font-weight: 500;
}

/* Wrapper del slider */
.carrito-promociones-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow: hidden;
}

/* Botones de navegación del slider */
.carrito-promo-btn {
    background: white;
    border: 2px solid #ff6b6b;
    color: #ff6b6b;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
}

.carrito-promo-btn:hover {
    background: #ff6b6b;
    color: white;
    transform: scale(1.1);
}

.carrito-promo-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.carrito-promo-btn:disabled:hover {
    transform: none;
    background: white;
    color: #ff6b6b;
}

.carrito-promo-btn i {
    font-size: 0.9rem;
}

/* Track del slider */
.carrito-promociones-track {
    display: flex;
    gap: 12px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    flex: 1;
    transition: transform 0.3s ease;
    position: relative;
}

/* Indicador de scroll/más productos (gradient fade en el borde derecho) */
.carrito-promociones-slider-wrapper::after {
    content: '';
    position: absolute;
    right: 40px;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(255, 249, 240, 0.95));
    pointer-events: none;
    z-index: 5;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Item individual del producto - Base (desktop) */
.carrito-promo-item {
    flex: 0 0 160px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
    width: 160px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
}

.carrito-promo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
    border-color: rgba(255, 107, 107, 0.2);
}

/* Efecto táctil en móvil */
.carrito-promo-item:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Badge de descuento en el item */
.carrito-promo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ff3838 0%, #ff1744 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 0.75rem;
    z-index: 5;
    box-shadow: 0 3px 10px rgba(255, 23, 68, 0.4);
}

.carrito-promo-badge i {
    font-size: 0.7rem;
    margin-right: 2px;
}

/* Imagen del producto */
.carrito-promo-imagen {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: #f8f8f8;
}

/* Información del producto */
.carrito-promo-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.carrito-promo-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

/* Precios */
.carrito-promo-precios {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.carrito-promo-precio-original {
    font-size: 0.75rem;
    color: #999;
    text-decoration: line-through;
}

.carrito-promo-precio-descuento {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ff3838;
}

/* Botón de agregar */
.carrito-promo-btn-agregar {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.carrito-promo-btn-agregar:hover {
    background: linear-gradient(135deg, #ff5252 0%, #e53935 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.carrito-promo-btn-agregar:active {
    transform: translateY(0);
}

.carrito-promo-btn-agregar i {
    font-size: 0.75rem;
}

/* ============================================
   RESPONSIVE - DISEÑO MEJORADO PARA MÓVIL
   Muestra múltiples productos con scroll horizontal
   ============================================ */

@media (max-width: 768px) {
    /* ===== DISEÑO REPLANTEADO PARA MÓVILES ===== */

    /* Container compacto y limpio */
    .carrito-promociones-container {
        margin: 12px 8px !important;
        padding: 12px !important;
        background: linear-gradient(135deg, #fff9f9 0%, #ffeded 100%) !important;
        border: 1.5px solid #ffd0d0 !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 10px rgba(255, 107, 107, 0.1) !important;
    }

    /* Fondo decorativo desactivado en móvil */
    .carrito-promociones-container::before {
        display: none !important;
    }

    /* Header compacto */
    .carrito-promociones-header {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px dashed rgba(255, 107, 107, 0.2) !important;
    }

    .carrito-promociones-titulo {
        font-size: 0.9rem !important;
        gap: 6px !important;
        margin-bottom: 4px !important;
        font-weight: 700 !important;
        color: #ff3838 !important;
    }

    .carrito-promociones-titulo i {
        font-size: 1rem !important;
    }

    /* Descripción compacta en una línea */
    .carrito-promociones-descripcion {
        font-size: 0.7rem !important;
        color: #888 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Wrapper del slider - diseño limpio */
    .carrito-promociones-slider-wrapper {
        gap: 6px !important;
        padding: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Botones de navegación más pequeños */
    .carrito-promo-btn {
        width: 28px !important;
        height: 28px !important;
        border-width: 1.5px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 6px rgba(255, 107, 107, 0.15) !important;
        background: white !important;
        border-color: #ff6b6b !important;
        color: #ff6b6b !important;
    }

    .carrito-promo-btn i {
        font-size: 0.75rem !important;
    }

    /* Track - Flex con scroll-snap para productos completos */
    .carrito-promociones-track {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        padding: 4px 2px !important;
        scroll-padding: 0 !important;
        scroll-behavior: smooth !important;
    }

    /* Ocultar scrollbar */
    .carrito-promociones-track::-webkit-scrollbar {
        display: none !important;
    }

    /* Card de producto - ANCHO FIJO para scroll correcto */
    .carrito-promo-item {
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        scroll-snap-align: center !important;
        border: 1px solid rgba(255, 107, 107, 0.1) !important;
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
        width: calc(50% - 4px) !important;
        min-width: 145px !important;
        max-width: 160px !important;
    }

    .carrito-promo-item:active {
        transform: scale(0.98) !important;
    }

    /* Ocultar gradiente en móvil - innecesario con grid */
    .carrito-promociones-slider-wrapper::after {
        display: none !important;
    }

    /* Imagen compacta pero visible */
    .carrito-promo-imagen {
        height: 100px !important;
        width: 100% !important;
        object-fit: contain !important;
        background: #fafafa !important;
        padding: 8px !important;
    }

    /* Info del producto compacta */
    .carrito-promo-info {
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* Nombre en 1 línea con ellipsis */
    .carrito-promo-nombre {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-weight: 600 !important;
        color: #333 !important;
    }

    /* Badge compacto */
    .carrito-promo-badge {
        padding: 2px 6px !important;
        font-size: 0.6rem !important;
        top: 4px !important;
        left: 4px !important;
        border-radius: 10px !important;
    }

    .carrito-promo-badge i {
        font-size: 0.55rem !important;
        margin-right: 1px !important;
    }

    /* Precios compactos */
    .carrito-promo-precios {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        margin: 0 !important;
    }

    .carrito-promo-precio-original {
        font-size: 0.6rem !important;
        line-height: 1 !important;
    }

    .carrito-promo-precio-descuento {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    /* Botón compacto pero funcional */
    .carrito-promo-btn-agregar {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
        gap: 3px !important;
        border-radius: 6px !important;
        margin-top: 4px !important;
        width: 100% !important;
        font-weight: 700 !important;
    }

    .carrito-promo-btn-agregar i {
        font-size: 0.6rem !important;
    }
}

/* Móviles pequeños - 480px */
@media (max-width: 480px) {
    .carrito-promociones-container {
        margin: 10px 6px !important;
        padding: 10px !important;
    }

    .carrito-promociones-header {
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    .carrito-promociones-titulo {
        font-size: 0.85rem !important;
        gap: 5px !important;
    }

    .carrito-promociones-titulo i {
        font-size: 0.95rem !important;
    }

    .carrito-promociones-descripcion {
        font-size: 0.68rem !important;
    }

    .carrito-promociones-slider-wrapper {
        gap: 5px !important;
    }

    .carrito-promociones-track {
        gap: 6px !important;
    }

    .carrito-promo-btn {
        width: 26px !important;
        height: 26px !important;
    }

    .carrito-promo-btn i {
        font-size: 0.7rem !important;
    }

    .carrito-promo-item {
        width: calc(50% - 3px) !important;
        min-width: 135px !important;
        max-width: 150px !important;
    }

    .carrito-promo-imagen {
        height: 95px !important;
        padding: 6px !important;
    }

    .carrito-promo-info {
        padding: 7px !important;
        gap: 3px !important;
    }

    .carrito-promo-nombre {
        font-size: 0.68rem !important;
    }

    .carrito-promo-badge {
        padding: 2px 5px !important;
        font-size: 0.58rem !important;
    }

    .carrito-promo-precio-original {
        font-size: 0.58rem !important;
    }

    .carrito-promo-precio-descuento {
        font-size: 0.8rem !important;
    }

    .carrito-promo-btn-agregar {
        padding: 5px 7px !important;
        font-size: 0.62rem !important;
    }

    .carrito-promo-btn-agregar i {
        font-size: 0.58rem !important;
    }
}

/* Pantallas muy pequeñas (iPhone SE) - 375px */
@media (max-width: 375px) {
    .carrito-promociones-container {
        margin: 8px 5px !important;
        padding: 8px !important;
    }

    .carrito-promociones-header {
        margin-bottom: 6px !important;
        padding-bottom: 5px !important;
    }

    .carrito-promociones-titulo {
        font-size: 0.8rem !important;
        gap: 4px !important;
    }

    .carrito-promociones-titulo i {
        font-size: 0.88rem !important;
    }

    .carrito-promociones-descripcion {
        font-size: 0.65rem !important;
    }

    .carrito-promociones-slider-wrapper {
        gap: 4px !important;
    }

    .carrito-promociones-track {
        gap: 5px !important;
    }

    .carrito-promo-btn {
        width: 24px !important;
        height: 24px !important;
    }

    .carrito-promo-btn i {
        font-size: 0.65rem !important;
    }

    .carrito-promo-item {
        width: calc(50% - 2.5px) !important;
        min-width: 125px !important;
        max-width: 140px !important;
    }

    .carrito-promo-imagen {
        height: 85px !important;
        padding: 5px !important;
    }

    .carrito-promo-info {
        padding: 6px !important;
        gap: 2px !important;
    }

    .carrito-promo-nombre {
        font-size: 0.65rem !important;
    }

    .carrito-promo-badge {
        padding: 1px 4px !important;
        font-size: 0.55rem !important;
    }

    .carrito-promo-precio-original {
        font-size: 0.55rem !important;
    }

    .carrito-promo-precio-descuento {
        font-size: 0.75rem !important;
    }

    .carrito-promo-btn-agregar {
        padding: 5px 6px !important;
        font-size: 0.6rem !important;
    }

    .carrito-promo-btn-agregar i {
        font-size: 0.55rem !important;
    }
}

/* Animación de entrada */
@keyframes slideInPromo {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carrito-promociones-container {
    animation: slideInPromo 0.4s ease-out;
}


/* === carrito-scroll-control.css === */
/* ============================================
   CONTROL DE SCROLL EN MODAL DEL CARRITO
   Estilos para indicador de scroll y botón bloqueado
   ============================================ */

/* Indicador de scroll */
.scroll-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff6b6b;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-radius: 25px;
    border: 2px solid #ff6b6b;
    animation: pulse-indicator 2s infinite;
}

.scroll-indicator i {
    font-size: 1.1rem;
    animation: bounce-arrow 1.5s infinite;
}

@keyframes pulse-indicator {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
    }
}

@keyframes bounce-arrow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

/* Botón de pago bloqueado */
.btn-pagar[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, #999 0%, #777 100%) !important;
    border-color: #999 !important;
}

.btn-pagar[disabled]:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Estado normal del botón */
.btn-pagar:not([disabled]) {
    background: linear-gradient(135deg, #d4af37 0%, #c9a030 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.btn-pagar:not([disabled]):hover {
    background: linear-gradient(135deg, #e0bd45 0%, #d4af37 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
}

.btn-pagar:not([disabled]):active {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* Texto del botón bloqueado */
#btn-pago-locked {
    color: white;
    display: none;
}

.btn-pagar[disabled] #btn-pago-locked {
    display: inline;
}

.btn-pagar[disabled] #btn-pago-text {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-indicator {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .scroll-indicator i {
        font-size: 1rem;
    }

    .btn-pagar {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    #btn-pago-locked {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .scroll-indicator {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    #btn-pago-locked {
        font-size: 0.8rem;
    }

    .btn-pagar {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* Animación de desbloqueo */
@keyframes unlock-animation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.btn-pagar:not([disabled]).just-unlocked {
    animation: unlock-animation 0.5s ease;
}

/* Barra de progreso de scroll (opcional) */
.scroll-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b 0%, #ff3838 100%);
    transition: width 0.2s ease;
    border-radius: 0 2px 2px 0;
}


/* === tienda-responsive-fix.css === */
/* ============================================
   TIENDA RESPONSIVE FIX - OPTIMIZACIÓN MÓVIL
   Fecha: 2025-12-01

   SOLUCIÓN: Unificar sistema de filtros en móviles
   - Ocultar filtros horizontales en m├│viles
   - Mantener solo el modal de filtros con bot├│n flotante
   - Optimizar dise├▒o responsive general
============================================ */

/* ============================================
   1. OCULTAR FILTROS HORIZONTALES EN MÓVILES
   Solo mostrar el modal de filtros con bot├│n flotante
============================================ */
@media (max-width: 768px) {
    /* Ocultar completamente los filtros horizontales premium en m├│viles */
    .filtros-horizontales-premium {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    /* Asegurar que el bot├│n flotante de filtros sea visible */
    .btn-filtros-movil {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* En pantallas grandes (desktop), mantener filtros horizontales */
@media (min-width: 769px) {
    /* Mostrar filtros horizontales en desktop */
    .filtros-horizontales-premium {
        display: block !important;
    }

    /* Ocultar bot├│n flotante de filtros en desktop */
    .btn-filtros-movil {
        display: none !important;
    }

    /* Ocultar modal de filtros m├│vil en desktop */
    .modal-filtros-movil {
        display: none !important;
    }
}

/* ============================================
   2. OPTIMIZAR SELECTOR DE LÍNEAS PARA MÓVILES
   Hacerlo más compacto y accesible
============================================ */
@media (max-width: 768px) {
    .lineas-selector-section {
        padding: 20px 0 !important;
    }

    .lineas-selector-container {
        padding: 20px 12px !important;
        border-radius: 16px !important;
    }

    .lineas-titulo {
        font-size: 1.4rem !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .lineas-subtitulo {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    .lineas-toggle-container {
        width: 100% !important;
    }

    .lineas-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .linea-option {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .linea-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .linea-content {
        flex: 1 !important;
        text-align: left !important;
    }

    .linea-content h4 {
        font-size: 1.05rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }

    .linea-content p {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .linea-features {
        display: flex !important;
        gap: 5px !important;
        margin-top: 6px !important;
    }

    .feature-dot {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
    }
}

@media (max-width: 480px) {
    .lineas-selector-section {
        padding: 15px 0 !important;
    }

    .lineas-titulo {
        font-size: 1.25rem !important;
    }

    .lineas-subtitulo {
        font-size: 0.8rem !important;
        margin-bottom: 16px !important;
    }

    .linea-option {
        padding: 14px 12px !important;
    }

    .linea-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    .linea-content h4 {
        font-size: 0.98rem !important;
    }

    .linea-content p {
        font-size: 0.74rem !important;
    }
}

/* ============================================
   3. OPTIMIZAR BANNER DE OFERTAS PARA MÓVILES
   Hacer el diseño más compacto y legible
============================================ */
@media (max-width: 768px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
    }

    .banner-ofertas {
        padding: 16px 14px !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
    }

    .banner-contenido {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .oferta-icono {
        font-size: 2.2rem !important;
        margin-bottom: 0 !important;
    }

    .oferta-texto {
        width: 100% !important;
    }

    .oferta-texto h3 {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    .oferta-texto p {
        font-size: 0.85rem !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .oferta-contador {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .contador-item {
        padding: 8px 12px !important;
        border-radius: 8px !important;
        min-width: 65px !important;
        text-align: center !important;
    }

    .contador-numero {
        font-size: 1.4rem !important;
        display: block !important;
        line-height: 1 !important;
    }

    .contador-label {
        font-size: 0.65rem !important;
        display: block !important;
        margin-top: 3px !important;
        text-transform: uppercase !important;
    }
}

@media (max-width: 480px) {
    .banner-ofertas {
        padding: 14px 12px !important;
        margin-bottom: 16px !important;
    }

    .oferta-icono {
        font-size: 1.8rem !important;
    }

    .oferta-texto h3 {
        font-size: 1rem !important;
    }

    .oferta-texto p {
        font-size: 0.8rem !important;
    }

    .contador-item {
        padding: 7px 10px !important;
        min-width: 60px !important;
    }

    .contador-numero {
        font-size: 1.2rem !important;
    }

    .contador-label {
        font-size: 0.6rem !important;
    }
}

/* ============================================
   4. OPTIMIZAR BARRA DE BÚSQUEDA PARA MÓVILES
   Mejorar espaciado y usabilidad
============================================ */
@media (max-width: 768px) {
    .barra-busqueda-premium {
        margin-bottom: 20px !important;
        padding: 0 !important;
    }

    .busqueda-contenedor-premium {
        border-radius: 14px !important;
        padding: 6px !important;
    }

    .input-busqueda-premium {
        font-size: 0.88rem !important;
        padding: 11px 12px !important;
    }

    .input-busqueda-premium::placeholder {
        font-size: 0.85rem !important;
    }

    .btn-buscar-premium {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
    }

    .btn-limpiar-premium {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .busqueda-contenedor-premium {
        border-radius: 12px !important;
        padding: 5px !important;
    }

    .input-busqueda-premium {
        font-size: 0.85rem !important;
        padding: 10px 10px !important;
    }

    .input-busqueda-premium::placeholder {
        font-size: 0.82rem !important;
    }

    .btn-buscar-premium {
        padding: 9px 16px !important;
        font-size: 0.75rem !important;
    }

    .btn-limpiar-premium {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   5. OPTIMIZAR SLIDERS DE PRODUCTOS EN MÓVILES
   Mejorar espaciado y presentaci├│n
============================================ */
@media (max-width: 768px) {
    .productos-sliders-section {
        padding: 20px 0 !important;
    }

    .slider-linea {
        margin-bottom: 30px !important;
    }

    .slider-header {
        margin-bottom: 18px !important;
        padding: 0 10px !important;
    }

    .slider-header-content {
        flex: 1 !important;
    }

    .slider-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
        margin-right: 12px !important;
    }

    .slider-titulo {
        font-size: 1.3rem !important;
        margin-bottom: 4px !important;
    }

    .slider-subtitulo {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    .slider-navegacion {
        gap: 8px !important;
    }

    .slider-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    /* Cards de productos en sliders */
    .producto-card {
        margin: 0 8px !important;
    }

    .producto-imagen-container {
        height: 200px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .producto-imagen {
        height: 100% !important;
        object-fit: cover !important;
    }

    .producto-info {
        padding: 14px !important;
    }

    .producto-nombre {
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        min-height: auto !important;
    }

    .producto-categoria {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }

    .producto-precio {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .producto-vendidos,
    .producto-recomendado {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }

    .btn-agregar-carrito {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* Badges de productos */
    .producto-badge {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
    }

    /* Overlay de acciones */
    .tienda-overlay-acciones {
        gap: 6px !important;
        padding: 8px !important;
    }

    .tienda-boton-accion {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    /* Rankings del Top 10 */
    .producto-ranking {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
        top: 10px !important;
        left: 10px !important;
    }

    .badge-mejor-vendido {
        padding: 4px 10px !important;
        font-size: 0.65rem !important;
        top: 10px !important;
        right: 10px !important;
    }
}

@media (max-width: 480px) {
    .slider-linea {
        margin-bottom: 25px !important;
    }

    .slider-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }

    .slider-titulo {
        font-size: 1.15rem !important;
    }

    .slider-subtitulo {
        font-size: 0.78rem !important;
    }

    .slider-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

    .producto-imagen-container {
        height: 180px !important;
    }

    .producto-info {
        padding: 12px !important;
    }

    .producto-nombre {
        font-size: 0.92rem !important;
    }

    .producto-precio {
        font-size: 1.1rem !important;
    }

    .btn-agregar-carrito {
        padding: 9px 14px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   6. OPTIMIZAR HERO SECTION PARA MÓVILES
   Hacer más compacto y atractivo
============================================ */
@media (max-width: 768px) {
    .hero-section {
        height: 35vh !important;
        min-height: 260px !important;
        max-height: 350px !important;
    }

    .hero-content {
        padding: 1.2rem 1rem !important;
    }

    .hero-subtitle {
        font-size: 0.7rem !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 6px !important;
    }

    .hero-title {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    .hero-text {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .btn-elegant {
        padding: 9px 22px !important;
        font-size: 0.82rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        height: 32vh !important;
        min-height: 240px !important;
    }

    .hero-title {
        font-size: 1.4rem !important;
    }

    .hero-text {
        font-size: 0.8rem !important;
    }

    .btn-elegant {
        padding: 8px 20px !important;
        font-size: 0.78rem !important;
    }
}

/* ============================================
   7. OPTIMIZAR FEATURES BAR PARA MÓVILES
   Mejor distribuci├│n y legibilidad
============================================ */
@media (max-width: 768px) {
    .features-bar {
        padding: 20px 0 !important;
    }

    .features-bar .row {
        margin: 0 !important;
    }

    .features-bar .col-6 {
        padding: 0 6px !important;
        margin-bottom: 16px !important;
    }

    .feature-item {
        padding: 14px 10px !important;
        text-align: center !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.5) !important;
        backdrop-filter: blur(10px) !important;
    }

    .feature-icon {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }

    .feature-title {
        font-size: 0.82rem !important;
        margin-bottom: 3px !important;
        font-weight: 600 !important;
    }

    .feature-text {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    .features-bar {
        padding: 16px 0 !important;
    }

    .feature-item {
        padding: 12px 8px !important;
    }

    .feature-icon {
        font-size: 1.4rem !important;
    }

    .feature-title {
        font-size: 0.78rem !important;
    }

    .feature-text {
        font-size: 0.65rem !important;
    }
}

/* ============================================
   8. MEJORAR BOTONES FLOTANTES EN MÓVILES
   Mejor posicionamiento y accesibilidad
============================================ */
@media (max-width: 768px) {
    /* Bot├│n de filtros m├│vil - ALINEADO CON CARRITO */
    .btn-filtros-movil {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 998 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
    }

    .btn-filtros-movil:active {
        transform: scale(0.95) !important;
    }

    /* Carrito flotante */
    .tienda-carrito-flotante {
        position: fixed !important;
        bottom: 16px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        z-index: 999 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    }
}

@media (max-width: 480px) {
    .btn-filtros-movil {
        width: 52px !important;
        height: 52px !important;
        bottom: 14px !important;
        left: 14px !important;
        font-size: 1.1rem !important;
    }

    .tienda-carrito-flotante {
        width: 52px !important;
        height: 52px !important;
        bottom: 14px !important;
        right: 14px !important;
        font-size: 1.2rem !important;
    }
}

/* ============================================
   9. MODAL DE FILTROS MÓVIL - OPTIMIZACIÓN
   Mejorar presentaci├│n y usabilidad
============================================ */
@media (max-width: 768px) {
    .modal-filtros-movil {
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    .modal-filtros-contenido {
        border-radius: 18px 18px 0 0 !important;
        padding: 18px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    }

    .modal-filtros-header {
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
    }

    /* Título del modal con alta especificidad */
    .modal-filtros-movil .modal-filtros-header h3,
    body.tema-nutricion .modal-filtros-movil .modal-filtros-header h3,
    body.tema-belleza .modal-filtros-movil .modal-filtros-header h3,
    .modal-filtros-header h3 {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #1a1a1a !important;
        margin: 0 !important;
    }

    .modal-filtros-movil .modal-filtros-header h3 i,
    body.tema-nutricion .modal-filtros-movil .modal-filtros-header h3 i,
    body.tema-belleza .modal-filtros-movil .modal-filtros-header h3 i,
    .modal-filtros-header h3 i {
        color: #D4AF37 !important;
    }

    .tienda-card-filtro {
        margin-bottom: 16px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    .tienda-card-encabezado {
        padding: 12px 14px !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    }

    /* Títulos con alta especificidad para override */
    .modal-filtros-movil .tienda-card-filtro .tienda-card-titulo,
    body.tema-nutricion .modal-filtros-movil .tienda-card-titulo,
    body.tema-belleza .modal-filtros-movil .tienda-card-titulo,
    .tienda-card-titulo {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #1a1a1a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .modal-filtros-movil .tienda-card-titulo i,
    body.tema-nutricion .modal-filtros-movil .tienda-card-titulo i,
    body.tema-belleza .modal-filtros-movil .tienda-card-titulo i,
    .tienda-card-titulo i {
        color: #D4AF37 !important;
        font-size: 1rem !important;
    }

    .tienda-enlace-categoria {
        padding: 11px 14px !important;
        font-size: 0.88rem !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #333 !important;
    }

    .tienda-enlace-categoria:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        color: #1a1a1a !important;
    }

    .tienda-enlace-categoria i {
        transition: all 0.2s ease !important;
        color: #666 !important;
    }

    .tienda-enlace-categoria:hover i {
        color: #D4AF37 !important;
        transform: translateX(2px) !important;
    }

    .tienda-item-categoria {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
    }

    .tienda-item-categoria:last-child {
        border-bottom: none !important;
    }

    .tienda-item-categoria.active .tienda-enlace-categoria {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%) !important;
        color: #1a1a1a !important;
        font-weight: 700 !important;
        border-left: 4px solid #D4AF37 !important;
        padding-left: 10px !important;
        box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.3) !important;
    }

    .tienda-item-categoria.active .tienda-enlace-categoria i {
        color: #D4AF37 !important;
        transform: scale(1.1) !important;
    }

    /* Checkmark visual para filtro activo */
    .tienda-item-categoria.active::after {
        content: '✓';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, #D4AF37 0%, #C4991F 100%);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
        animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .tienda-item-categoria {
        position: relative;
    }

    @keyframes popIn {
        0% {
            transform: translateY(-50%) scale(0);
            opacity: 0;
        }
        100% {
            transform: translateY(-50%) scale(1);
            opacity: 1;
        }
    }

    .btn-aplicar-filtros {
        padding: 13px !important;
        border-radius: 14px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
}

@media (max-width: 480px) {
    .modal-filtros-contenido {
        padding: 16px !important;
    }

    /* Títulos en móviles pequeños con alta especificidad */
    .modal-filtros-movil .modal-filtros-header h3,
    body.tema-nutricion .modal-filtros-movil .modal-filtros-header h3,
    body.tema-belleza .modal-filtros-movil .modal-filtros-header h3,
    .modal-filtros-header h3 {
        font-size: 1.05rem !important;
        color: #1a1a1a !important;
    }

    .modal-filtros-movil .tienda-card-filtro .tienda-card-titulo,
    body.tema-nutricion .modal-filtros-movil .tienda-card-titulo,
    body.tema-belleza .modal-filtros-movil .tienda-card-titulo,
    .tienda-card-titulo {
        font-size: 0.9rem !important;
        color: #1a1a1a !important;
    }

    .tienda-enlace-categoria {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        color: #333 !important;
    }
}

/* ============================================
   10. PREVENIR PROBLEMAS DE OVERFLOW
   Asegurar que no haya scroll horizontal
============================================ */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .container, .container-fluid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ============================================
   11. MEJORAS DE ACCESIBILIDAD TÁCTIL
   Aumentar áreas táctiles para mejor UX
============================================ */
@media (max-width: 768px) {
    /* Asegurar ├íreas t├íctiles m├şnimas de 44x44px */
    button, .btn, a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Feedback visual en toques */
    button:active, .btn:active {
        opacity: 0.85 !important;
        transform: scale(0.98) !important;
    }
}

/* ============================================
   FIN DE OPTIMIZACIONES RESPONSIVE
============================================ */


/* === tienda-mobile-improvements.css === */
/* ============================================
   MEJORAS RESPONSIVE PARA DISPOSITIVOS MÓVILES - VERSIÓN CORREGIDA
   Optimizaciones profesionales para Morfeo Tienda
   Soluciona conflictos con tienda.css
   Autor: Claude Code
   Fecha: 2025-11-24
============================================ */

/* ============================================
   IMPORTANTE: Usar !important solo donde sea necesario
   para sobrescribir el CSS original que tiene conflictos
============================================ */

/* ============================================
   1. HERO SECTION - OPTIMIZACIÓN MÓVIL
============================================ */
@media (max-width: 768px) {
    .hero-section {
        height: 40vh !important;
        min-height: 300px !important;
        margin-top: 0 !important;
    }

    .hero-content {
        padding: 1.5rem 1rem !important;
    }

    .hero-subtitle {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-title {
        font-size: 1.8rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.2 !important;
    }

    .hero-text {
        font-size: 0.9rem !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.5 !important;
    }

    .btn-elegant {
        padding: 10px 25px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        height: 35vh !important;
        min-height: 250px !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
    }

    .hero-text {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }

    .btn-elegant {
        padding: 8px 20px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   2. FEATURES BAR - MEJOR DISTRIBUCIÓN MÓVIL
============================================ */
@media (max-width: 768px) {
    .features-bar {
        padding: 25px 0 !important;
    }

    .features-bar .col-6 {
        margin-bottom: 20px !important;
    }

    .feature-item {
        padding: 15px 10px !important;
        text-align: center !important;
    }

    .feature-icon {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    .feature-title {
        font-size: 0.85rem !important;
        margin-bottom: 3px !important;
    }

    .feature-text {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 480px) {
    .feature-icon {
        font-size: 1.5rem !important;
    }

    .feature-title {
        font-size: 0.75rem !important;
    }

    .feature-text {
        font-size: 0.65rem !important;
    }
}

/* ============================================
   3. SELECTOR DE LÍNEAS - OPTIMIZADO MÓVIL
============================================ */
@media (max-width: 768px) {
    .lineas-selector-section {
        padding: 30px 0 !important;
    }

    .lineas-selector-container {
        padding: 25px 15px !important;
    }

    .lineas-titulo {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }

    .lineas-subtitulo {
        font-size: 0.9rem !important;
        margin-bottom: 25px !important;
    }

    .lineas-toggle {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        max-width: 100% !important;
    }

    .linea-option {
        padding: 20px 15px !important;
        flex-direction: row !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .linea-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .linea-content {
        text-align: left !important;
    }

    .linea-content h4 {
        font-size: 1.1rem !important;
        margin-bottom: 5px !important;
    }

    .linea-content p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .linea-features {
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .feature-dot {
        width: 8px !important;
        height: 8px !important;
    }
}

@media (max-width: 480px) {
    .lineas-titulo {
        font-size: 1.4rem !important;
    }

    .lineas-subtitulo {
        font-size: 0.85rem !important;
    }

    .linea-option {
        padding: 15px 12px !important;
    }

    .linea-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.1rem !important;
    }

    .linea-content h4 {
        font-size: 1rem !important;
    }

    .linea-content p {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   4. CONTENEDOR PRINCIPAL - LAYOUT MÓVIL Y ESCRITORIO
============================================ */

/* Escritorio */
@media (min-width: 992px) {
    .tienda-contenedor-principal {
        padding-top: 20px !important;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (max-width: 991px) {
    .tienda-contenedor-principal {
        padding-top: 10px !important;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 768px) {
    .tienda-contenedor-principal {
        padding-top: 5px !important;
    }

    .tienda-contenedor-principal .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Ocultar barra lateral en móviles - MUY IMPORTANTE */
    .tienda-contenedor-principal .col-lg-2,
    .tienda-contenedor-principal .col-md-3 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* Ocultar directamente la barra lateral por clase */
    .tienda-barra-lateral {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* Área principal ocupa todo el ancho */
    .tienda-contenedor-principal .col-lg-10,
    .tienda-contenedor-principal .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}

/* ============================================
   5. BARRA DE BÚSQUEDA - MÓVIL Y ESCRITORIO MEJORADO
============================================ */

/* Estilos para escritorio */
@media (min-width: 769px) {
    .tienda-busqueda-superior {
        margin-bottom: 30px !important;
        margin-top: 20px !important;
        padding: 0 !important;
    }

    .tienda-busqueda-superior .input-group {
        max-width: 700px !important;
        margin: 0 auto !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .barra-busqueda-input {
        border: 2px solid #e0e0e0 !important;
        border-right: none !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
        transition: all 0.3s ease !important;
        background: white !important;
    }

    .barra-busqueda-input:focus {
        border-color: var(--primary-gold) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .barra-busqueda-boton {
        border: 2px solid #e0e0e0 !important;
        border-left: none !important;
        background: white !important;
        color: var(--dark-navy) !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        transition: all 0.3s ease !important;
        min-width: 60px !important;
    }

    .barra-busqueda-boton:hover {
        background: var(--primary-gold) !important;
        color: var(--dark-navy) !important;
        border-color: var(--primary-gold) !important;
    }

    .barra-busqueda-boton:last-child {
        background: #dc3545 !important;
        color: white !important;
        border: 2px solid #dc3545 !important;
        margin-left: 0 !important;
    }

    .barra-busqueda-boton:last-child:hover {
        background: #c82333 !important;
        border-color: #c82333 !important;
    }

    #resultados-busqueda {
        text-align: center !important;
        margin-top: 12px !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }
}

/* Estilos para móviles */
@media (max-width: 768px) {
    .tienda-busqueda-superior {
        margin-bottom: 80px !important;
        margin-top: 5px !important;
        padding: 0 10px 0 10px !important;
        position: relative !important;
        z-index: 10 !important;
        clear: both !important;
        display: block !important;
    }

    .tienda-busqueda-superior .input-group {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: white !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .barra-busqueda-input {
        font-size: 0.9rem !important;
        padding: 12px 15px !important;
        border: 2px solid #e0e0e0 !important;
        border-right: none !important;
        background: white !important;
        flex: 1 !important;
    }

    .barra-busqueda-input:focus {
        border-color: var(--primary-gold) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .barra-busqueda-input::placeholder {
        font-size: 0.85rem !important;
        color: #999 !important;
    }

    .barra-busqueda-boton {
        padding: 12px 15px !important;
        font-size: 1rem !important;
        border: 2px solid #e0e0e0 !important;
        border-left: none !important;
        background: white !important;
        color: var(--dark-navy) !important;
        transition: all 0.2s ease !important;
        min-width: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .barra-busqueda-boton:active {
        background: var(--primary-gold) !important;
        color: var(--dark-navy) !important;
        transform: scale(0.95) !important;
    }

    /* Botón de limpiar (X roja) */
    .barra-busqueda-boton:last-child {
        background: #dc3545 !important;
        color: white !important;
        border: 2px solid #dc3545 !important;
        border-left: none !important;
        margin-left: 0 !important;
    }

    .barra-busqueda-boton:last-child:active {
        background: #c82333 !important;
        border-color: #c82333 !important;
    }

    #resultados-busqueda {
        font-size: 0.85rem !important;
        padding: 10px !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 480px) {
    .tienda-busqueda-superior {
        margin-top: 5px !important;
        margin-bottom: 70px !important;
        padding: 0 8px 0 8px !important;
    }

    .barra-busqueda-input {
        font-size: 0.85rem !important;
        padding: 11px 12px !important;
    }

    .barra-busqueda-input::placeholder {
        font-size: 0.8rem !important;
    }

    .barra-busqueda-boton {
        padding: 11px 12px !important;
        font-size: 0.95rem !important;
        min-width: 45px !important;
    }

    #resultados-busqueda {
        font-size: 0.8rem !important;
        padding: 8px !important;
    }
}

@media (max-width: 360px) {
    .tienda-busqueda-superior {
        margin-top: 5px !important;
        margin-bottom: 65px !important;
    }

    .barra-busqueda-input {
        font-size: 0.82rem !important;
        padding: 10px 10px !important;
    }

    .barra-busqueda-boton {
        padding: 10px 10px !important;
        min-width: 42px !important;
    }
}

/* ============================================
   6. BANNER DE OFERTAS - OPTIMIZADO MÓVIL
============================================ */
@media (max-width: 768px) {
    .banner-ofertas {
        padding: 20px 15px !important;
        margin-bottom: 25px !important;
        margin-top: 0 !important;
        border-radius: 12px !important;
        display: block !important;
    }

    .banner-contenido {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        text-align: left !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .oferta-icono {
        font-size: 2.5rem !important;
        flex-shrink: 0 !important;
    }

    .oferta-texto {
        flex: 1 !important;
        min-width: 200px !important;
    }

    .oferta-texto h3 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    .oferta-texto p {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    .oferta-contador {
        gap: 10px !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin-top: 5px !important;
    }

    .contador-item {
        padding: 10px 15px !important;
        border-radius: 10px !important;
        min-width: 70px !important;
    }

    .contador-numero {
        font-size: 1.5rem !important;
        display: block !important;
    }

    .contador-label {
        font-size: 0.7rem !important;
        display: block !important;
        margin-top: 2px !important;
    }
}

@media (max-width: 480px) {
    .banner-ofertas {
        padding: 18px 12px !important;
        margin-bottom: 20px !important;
    }

    .oferta-icono {
        font-size: 2rem !important;
    }

    .oferta-texto h3 {
        font-size: 1.1rem !important;
    }

    .oferta-texto p {
        font-size: 0.85rem !important;
    }

    .contador-item {
        padding: 8px 12px !important;
        min-width: 65px !important;
    }

    .contador-numero {
        font-size: 1.3rem !important;
    }

    .contador-label {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 360px) {
    .banner-ofertas {
        padding: 15px 10px !important;
    }

    .oferta-texto h3 {
        font-size: 1rem !important;
    }

    .oferta-texto p {
        font-size: 0.8rem !important;
    }

    .contador-item {
        padding: 7px 10px !important;
        min-width: 60px !important;
    }

    .contador-numero {
        font-size: 1.2rem !important;
    }
}

/* ============================================
   7. ENCABEZADO DE TIENDA - MÓVIL Y ESCRITORIO
============================================ */

/* Escritorio */
@media (min-width: 769px) {
    .tienda-encabezado {
        padding: 0 15px 20px 15px !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .tienda-titulo-principal {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
        font-weight: 700 !important;
        color: var(--dark-navy) !important;
    }

    .tienda-subtitulo {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        color: #666 !important;
        margin-bottom: 0 !important;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .tienda-encabezado {
        padding: 0 10px 30px 10px !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .tienda-titulo-principal {
        font-size: 1.5rem !important;
        margin-bottom: 6px !important;
        font-weight: 700 !important;
        color: var(--dark-navy) !important;
        line-height: 1.3 !important;
    }

    .tienda-subtitulo {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        color: #666 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .tienda-encabezado {
        padding: 0 8px 25px 8px !important;
    }

    .tienda-titulo-principal {
        font-size: 1.3rem !important;
        margin-bottom: 5px !important;
    }

    .tienda-subtitulo {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 360px) {
    .tienda-encabezado {
        padding: 0 6px 10px 6px !important;
    }

    .tienda-titulo-principal {
        font-size: 1.2rem !important;
    }

    .tienda-subtitulo {
        font-size: 0.78rem !important;
    }
}

/* ============================================
   8. GRID DE PRODUCTOS - RESPONSIVE MEJORADO (FIX CRÍTICO)
============================================ */

/* Desktop grande (más de 1200px) */
@media (min-width: 1201px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        padding: 0 10px !important;
        margin-top: 0 !important;
    }
}

/* Móviles - IMPORTANTE: Agregar margen superior al grid */
@media (max-width: 768px) {
    .tienda-grid-productos {
        margin-top: 30px !important;
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
    }
}

/* Desktop mediano (992px - 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
        padding: 0 10px !important;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }
}

/* Móviles grandes (577px - 767px) */
@media (min-width: 577px) and (max-width: 767px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 10px !important;
    }
}

/* Móviles (hasta 576px) */
@media (max-width: 576px) {
    .tienda-grid-productos {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 5px !important;
    }
}

/* ============================================
   9. TARJETAS DE PRODUCTO - MÓVIL (FIX CRÍTICO)
============================================ */
@media (max-width: 768px) {
    .tienda-card-producto {
        border-radius: 15px !important;
        margin-bottom: 0 !important;
        min-height: auto !important; /* FIX: Eliminar altura mínima excesiva */
    }

    .tienda-imagen-contenedor,
    .tienda-contenedor-imagen {
        height: 200px !important; /* FIX: Altura optimizada para móvil */
    }

    .tienda-imagen-producto {
        height: 100% !important;
        object-fit: cover !important;
    }

    .producto-badges {
        top: 10px !important;
        left: 10px !important;
    }

    .badge-nutricion,
    .badge-belleza {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }

    .tienda-info-producto {
        padding: 15px !important;
        min-height: auto !important;
    }

    .tienda-categoria-producto {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
    }

    .tienda-nombre-producto {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        min-height: auto !important; /* FIX: Eliminar altura mínima */
    }

    .tienda-descripcion-corta {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        min-height: auto !important; /* FIX: Eliminar altura mínima */
        /* Limitar a 2 líneas en móvil */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .tienda-precio-contenedor {
        margin-bottom: 10px !important;
    }

    .tienda-precio-actual {
        font-size: 1.3rem !important;
    }

    .tienda-stock-info {
        font-size: 0.75rem !important;
        margin-bottom: 12px !important;
    }

    /* Overlay de acciones - Siempre visible en móvil con diseño glassmorphism */
    .tienda-overlay-acciones {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        justify-content: space-around !important;
        margin-top: 10px !important;
        gap: 10px !important;
        background: transparent !important;
    }

    .tienda-boton-accion {
        width: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Botón principal más grande y táctil */
    .tienda-acciones-producto {
        margin-top: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .tienda-acciones-producto::before {
        display: none !important; /* Eliminar línea decorativa en móvil */
    }

    .tienda-boton-principal {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
    }

    /* Desactivar hover en móvil */
    .tienda-card-producto:hover {
        transform: none !important;
    }

    .tienda-card-producto:hover .tienda-imagen-producto {
        transform: none !important;
    }
}

@media (max-width: 576px) {
    .tienda-imagen-contenedor,
    .tienda-contenedor-imagen {
        height: 180px !important; /* Más compacto en pantallas muy pequeñas */
    }
}

@media (max-width: 480px) {
    .tienda-imagen-contenedor,
    .tienda-contenedor-imagen {
        height: 200px !important;
    }

    .tienda-info-producto {
        padding: 12px !important;
    }

    .tienda-nombre-producto {
        font-size: 0.95rem !important;
    }

    .tienda-descripcion-corta {
        font-size: 0.75rem !important;
    }

    .tienda-precio-actual {
        font-size: 1.2rem !important;
    }

    .tienda-boton-principal {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }

    .tienda-boton-accion {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }
}

/* ============================================
   10. HERRAMIENTAS INTERACTIVAS - MÓVIL
============================================ */
@media (max-width: 768px) {
    .herramientas-interactivas {
        padding: 30px 0 !important;
    }

    .herramienta-card {
        padding: 20px 15px !important;
        margin-bottom: 15px !important;
    }

    .herramienta-icon {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }

    .herramienta-card h4 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    .herramienta-card p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    .btn-herramienta {
        padding: 8px 20px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .herramienta-icon {
        font-size: 1.8rem !important;
    }

    .herramienta-card h4 {
        font-size: 1rem !important;
    }

    .herramienta-card p {
        font-size: 0.8rem !important;
    }
}

/* ============================================
   11. SECCIÓN EDUCATIVA - MÓVIL
============================================ */
@media (max-width: 768px) {
    .seccion-educativa {
        padding: 40px 15px !important;
        margin-top: 30px !important;
        background: #FAF8F5 !important;
    }

    .seccion-educativa h3 {
        font-size: 1.4rem !important;
        margin-bottom: 25px !important;
        text-align: center !important;
        font-weight: 700 !important;
        color: var(--dark-navy) !important;
    }

    .seccion-educativa .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 20px !important;
    }

    .seccion-educativa .col-md-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 20px !important;
    }

    .consejo-card {
        padding: 25px 20px !important;
        margin-bottom: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
        background: white !important;
        border: 1px solid #f0f0f0 !important;
    }

    .consejo-header {
        font-size: 0.9rem !important;
        margin-bottom: 12px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .consejo-header i {
        font-size: 1.1rem !important;
    }

    .consejo-card h5 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
        color: var(--dark-navy) !important;
    }

    .consejo-card p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        color: #555 !important;
        margin-bottom: 15px !important;
    }

    .consejo-link {
        font-size: 0.9rem !important;
        margin-top: 10px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
}

/* Móviles pequeños - Mayor separación */
@media (max-width: 480px) {
    .seccion-educativa {
        padding: 35px 12px !important;
    }

    .seccion-educativa h3 {
        font-size: 1.3rem !important;
        margin-bottom: 22px !important;
    }

    .seccion-educativa .row {
        gap: 18px !important;
    }

    .seccion-educativa .col-md-6 {
        margin-bottom: 18px !important;
    }

    .consejo-card {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    .consejo-card h5 {
        font-size: 1.05rem !important;
    }

    .consejo-card p {
        font-size: 0.88rem !important;
    }

    .consejo-link {
        font-size: 0.88rem !important;
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 360px) {
    .seccion-educativa {
        padding: 30px 10px !important;
    }

    .seccion-educativa h3 {
        font-size: 1.2rem !important;
    }

    .consejo-card {
        padding: 20px 16px !important;
    }
}

/* ============================================
   12. TESTIMONIOS - MÓVIL
============================================ */
@media (max-width: 768px) {
    .seccion-testimonios {
        padding: 30px 15px !important;
    }

    .seccion-testimonios h3 {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
    }

    .testimonios-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .testimonio-card {
        padding: 20px 15px !important;
    }

    .testimonio-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .cliente-avatar {
        width: 45px !important;
        height: 45px !important;
    }

    .cliente-avatar img {
        width: 45px !important;
        height: 45px !important;
    }

    .cliente-datos h5 {
        font-size: 0.95rem !important;
    }

    .estrellas {
        font-size: 0.85rem !important;
    }

    .tiempo-uso {
        font-size: 0.75rem !important;
    }

    .testimonio-card p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .producto-resenado small {
        font-size: 0.75rem !important;
    }

    .linea-badge {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }

    .btn-ver-mas-testimonios {
        padding: 10px 25px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   13. BOTONES FLOTANTES - MÓVIL
============================================ */

/* Ocultar botón de filtros en escritorio */
@media (min-width: 769px) {
    .btn-filtros-movil {
        display: none !important;
    }
}

/* Mostrar botón de filtros SOLO en móviles */
@media (max-width: 768px) {
    /* Botón de filtros móvil */
    .btn-filtros-movil {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        background: var(--primary-gold) !important;
        color: var(--dark-navy) !important;
        border: none !important;
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
        font-size: 1.2rem !important;
        z-index: 999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .btn-filtros-movil:active {
        transform: scale(0.95) !important;
    }

    /* Carrito flotante optimizado - ESTILOS MOVIDOS A carrito-badge-mobile.css */
    /* Para evitar conflictos, los estilos del carrito ahora están centralizados */
}

@media (max-width: 480px) {
    .btn-filtros-movil {
        width: 55px !important;
        height: 55px !important;
        font-size: 1.1rem !important;
        bottom: 20px !important;
        left: 15px !important;
    }

    /* Estilos del carrito en carrito-badge-mobile.css */
}

/* ============================================
   14. MODAL DE FILTROS MÓVIL
============================================ */
@media (max-width: 768px) {
    .modal-filtros-movil {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .modal-filtros-movil.show {
        display: block !important;
        opacity: 1 !important;
    }

    .modal-filtros-contenido {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-height: 80vh !important;
        background: white !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 20px !important;
        overflow-y: auto !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease !important;
    }

    .modal-filtros-movil.show .modal-filtros-contenido {
        transform: translateY(0) !important;
    }

    .modal-filtros-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
        border-bottom: 2px solid var(--silver) !important;
    }

    .modal-filtros-header h3 {
        font-size: 1.2rem !important;
        color: var(--dark-navy) !important;
        margin: 0 !important;
    }

    .btn-cerrar-filtros {
        background: none !important;
        border: none !important;
        font-size: 1.5rem !important;
        color: var(--charcoal) !important;
        padding: 0 !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transition: all 0.2s ease !important;
    }

    .btn-cerrar-filtros:active {
        background: var(--silver) !important;
    }

    .btn-aplicar-filtros {
        width: 100% !important;
        padding: 14px !important;
        background: var(--gold-gradient) !important;
        color: var(--dark-navy) !important;
        border: none !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin-top: 20px !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    .btn-aplicar-filtros:active {
        transform: scale(0.98) !important;
    }

    /* Estilos para los filtros dentro del modal */
    .modal-filtros-movil .tienda-card-filtro {
        margin-bottom: 20px !important;
        border: 1px solid var(--silver) !important;
        border-radius: 12px !important;
    }

    .modal-filtros-movil .tienda-card-encabezado {
        padding: 15px !important;
        background: var(--pearl) !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .modal-filtros-movil .tienda-card-titulo {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .modal-filtros-movil .tienda-enlace-categoria {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
    }

    .modal-filtros-movil .tienda-item-categoria.active {
        background: var(--secondary-gold) !important;
    }
}

/* ============================================
   15. MODAL DEL CARRITO - ESTILOS BASE (DESKTOP)
============================================ */
/* Estilos para escritorio (se sobrescriben en móvil) */
.carrito-modal-dialog {
    margin: 0 auto;
    height: 100vh;
    max-height: 100vh;
}

.carrito-modal-content {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.carrito-modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.carrito-header {
    flex-shrink: 0;
}

/* ============================================
   15. MODAL DEL CARRITO - MÓVIL MEJORADO
============================================ */
@media (max-width: 768px) {
    /* Modal dialog - Ocupar 85% de la altura en lugar del 100% */
    #carritoModal .modal-dialog,
    #carritoModal .carrito-modal-dialog,
    .carrito-modal-dialog {
        margin: 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: 85vh !important;
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
    }

    #carritoModal .modal-content,
    #carritoModal .carrito-modal-content,
    .carrito-modal-content {
        height: auto !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3) !important;
    }

    #carritoModal .modal-header,
    #carritoModal .carrito-header,
    .carrito-header {
        flex-shrink: 0 !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #carritoModal .modal-body,
    #carritoModal .carrito-modal-body,
    .carrito-modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        padding: 15px !important;
        max-height: calc(85vh - 140px) !important; /* Altura máxima restando header y footer */
    }

    #carritoModal .modal-footer {
        flex-shrink: 0 !important;
        padding: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .carrito-header {
        padding: 15px !important;
    }

    .carrito-header h5 {
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    /* Carrito vacío - Más compacto */
    #carrito-vacio {
        padding: 30px 20px !important;
    }

    #carrito-vacio i {
        font-size: 2.5rem !important;
    }

    #carrito-vacio h4 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }

    #carrito-vacio p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Items del carrito - Diseño compacto y limpio */
    .carrito-items-container,
    #carrito-lista {
        padding: 0 !important;
        background: transparent !important;
    }

    /* DISEÑO COMPLETAMENTE NUEVO Y OPTIMIZADO PARA MÓVIL */
    .carrito-item {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
        background: white !important;
        border: 1px solid #e8e8e8 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        gap: 12px !important;
        position: relative !important;
    }

    .carrito-item:hover {
        transform: none !important;
        padding-left: 15px !important;
        border-left: 1px solid #e8e8e8 !important;
    }

    /* FILA SUPERIOR: Imagen + Info + Eliminar */
    .carrito-item > * {
        margin: 0 !important;
    }

    .carrito-item-imagen {
        width: 80px !important;
        height: 80px !important;
        border-radius: 10px !important;
        object-fit: cover !important;
        border: 1px solid #e8e8e8 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
        flex-shrink: 0 !important;
        float: left !important;
        margin-right: 12px !important;
    }

    .carrito-item-info {
        flex: 1 !important;
        padding: 0 !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .carrito-item-nombre {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        color: #2C2C2C !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .carrito-item-detalles {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
        margin-bottom: 4px !important;
        background: rgba(212, 175, 55, 0.1) !important;
        border-radius: 4px !important;
        width: fit-content !important;
        display: inline-block !important;
    }

    .carrito-item-precio-unitario {
        font-size: 0.8rem !important;
        color: #666 !important;
        margin-top: 4px !important;
    }

    .carrito-item-precio-unitario strong {
        color: #D4AF37 !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }

    /* Botón eliminar - Esquina superior derecha */
    .carrito-item-acciones {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        margin: 0 !important;
    }

    .btn-eliminar-item {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: #fff !important;
        border: 1px solid #e8e8e8 !important;
        color: #dc3545 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.2s ease !important;
    }

    .btn-eliminar-item:active {
        background: #dc3545 !important;
        color: white !important;
        transform: scale(0.95) !important;
    }

    /* FILA INFERIOR: Controles de cantidad + Subtotal */
    .carrito-item-controles {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 0 0 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        gap: 12px !important;
        margin-top: 8px !important;
        clear: both !important;
        min-width: auto !important;
    }

    /* Control de cantidad - Diseño compacto y profesional */
    .cantidad-control {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: #f8f8f8 !important;
        border-radius: 10px !important;
        padding: 6px 12px !important;
        box-shadow: none !important;
        border: 1px solid #e8e8e8 !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .cantidad-btn {
        background: white !important;
        border: 1px solid #d4d4d4 !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        color: #2C2C2C !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        padding: 0 !important;
    }

    .cantidad-btn:active {
        background: #D4AF37 !important;
        color: white !important;
        border-color: #D4AF37 !important;
        transform: scale(0.95) !important;
    }

    .cantidad-btn:hover {
        transform: none !important;
    }

    .cantidad-valor {
        min-width: 30px !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        color: #2C2C2C !important;
        user-select: none !important;
    }

    /* Subtotal - Alineado a la derecha */
    .carrito-item-subtotal {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 2px !important;
    }

    .carrito-item-subtotal-label {
        font-size: 0.7rem !important;
        color: #999 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-weight: 500 !important;
    }

    .carrito-item-subtotal-valor {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #2C2C2C !important;
    }

    /* Resumen y totales - Compacto y moderno */
    .carrito-resumen {
        padding: 16px !important;
        background: #f8f9fa !important;
        border-radius: 12px !important;
        margin: 16px 15px !important;
        border: 1px solid #e8e8e8 !important;
    }

    .resumen-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        font-size: 0.9rem !important;
        color: #555 !important;
    }

    .resumen-item:not(:last-child) {
        border-bottom: 1px solid #e8e8e8 !important;
    }

    .resumen-item span:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-weight: 500 !important;
    }

    .resumen-item span:last-child {
        font-weight: 600 !important;
        color: #2C2C2C !important;
    }

    .resumen-item.total {
        padding: 14px 0 10px 0 !important;
        border-top: 2px solid #D4AF37 !important;
        border-bottom: none !important;
        margin-top: 8px !important;
    }

    .resumen-item.total span {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: #2C2C2C !important;
    }

    .resumen-item.total span:last-child {
        color: #D4AF37 !important;
    }

    /* Iconos en el resumen */
    .resumen-item i {
        font-size: 0.9rem !important;
        opacity: 0.8 !important;
    }

    /* Footer del carrito - Botones de acción */
    .carrito-footer {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        background: white !important;
        border-top: 1px solid #e8e8e8 !important;
    }

    .carrito-footer .btn,
    .carrito-footer a.btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        border: none !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Botón continuar comprando */
    .carrito-footer .btn:not(#btn-proceder-pago):not([href*="checkout"]) {
        background: #f8f9fa !important;
        color: #2C2C2C !important;
        border: 1px solid #e8e8e8 !important;
    }

    .carrito-footer .btn:not(#btn-proceder-pago):active {
        background: #e9ecef !important;
        transform: scale(0.98) !important;
    }

    /* Botón proceder al pago - Destacado */
    #btn-proceder-pago,
    .carrito-footer a[href*="checkout"] {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
        font-weight: 700 !important;
    }

    #btn-proceder-pago:active,
    .carrito-footer a[href*="checkout"]:active {
        background: linear-gradient(135deg, #20c997 0%, #28a745 100%) !important;
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4) !important;
    }

    /* Estado deshabilitado del botón */
    #btn-proceder-pago:disabled,
    #btn-proceder-pago[disabled] {
        background: #ccc !important;
        color: #666 !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

    /* Slider de promociones en el carrito - ELIMINADO
       Los estilos están en carrito-promociones-slider.css
       para evitar conflictos y mantener el diseño de 1.5 productos visible */

    /* Botón proceder al pago */
    #btn-proceder-pago {
        padding: 14px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }

    /* Indicador de scroll */
    #scroll-indicator {
        padding: 8px !important;
        font-size: 0.8rem !important;
    }
}

/* Dispositivos móviles pequeños (menos de 480px) */
@media (max-width: 480px) {
    #carritoModal .modal-dialog,
    .carrito-modal-dialog {
        max-height: 90vh !important;
    }

    #carritoModal .modal-content,
    .carrito-modal-content {
        max-height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    #carritoModal .modal-body,
    .carrito-modal-body {
        max-height: calc(90vh - 130px) !important;
        padding: 12px !important;
    }

    .carrito-header h5 {
        font-size: 1rem !important;
    }

    /* Items del carrito más compactos */
    .carrito-item {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .carrito-item-imagen {
        width: 70px !important;
        height: 70px !important;
        margin-right: 10px !important;
    }

    .carrito-item-nombre {
        font-size: 0.9rem !important;
    }

    .carrito-item-detalles {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
    }

    .carrito-item-precio-unitario {
        font-size: 0.75rem !important;
    }

    .carrito-item-precio-unitario strong {
        font-size: 0.9rem !important;
    }

    .btn-eliminar-item {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }

    /* Controles de cantidad */
    .cantidad-control {
        padding: 5px 10px !important;
        gap: 8px !important;
    }

    .cantidad-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem !important;
    }

    .cantidad-valor {
        min-width: 25px !important;
        font-size: 0.95rem !important;
    }

    .carrito-item-subtotal-label {
        font-size: 0.65rem !important;
    }

    .carrito-item-subtotal-valor {
        font-size: 1rem !important;
    }

    /* Resumen */
    .carrito-resumen {
        margin: 12px !important;
        padding: 14px !important;
    }

    .resumen-item {
        font-size: 0.85rem !important;
        padding: 8px 0 !important;
    }

    .resumen-item.total span {
        font-size: 1.1rem !important;
    }

    /* Footer */
    .carrito-footer {
        padding: 12px !important;
    }

    .carrito-footer .btn {
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
    }
}

/* Pantallas muy pequeñas (menos de 360px) */
@media (max-width: 360px) {
    #carritoModal .modal-dialog,
    .carrito-modal-dialog {
        max-height: 92vh !important;
    }

    #carritoModal .modal-content,
    .carrito-modal-content {
        max-height: 92vh !important;
        border-radius: 14px 14px 0 0 !important;
    }

    #carritoModal .modal-body,
    .carrito-modal-body {
        max-height: calc(92vh - 120px) !important;
        padding: 10px !important;
    }

    .carrito-header h5 {
        font-size: 0.95rem !important;
    }

    /* Items ultra compactos */
    .carrito-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    .carrito-item-imagen {
        width: 65px !important;
        height: 65px !important;
        margin-right: 8px !important;
    }

    .carrito-item-nombre {
        font-size: 0.85rem !important;
    }

    .carrito-item-detalles {
        font-size: 0.6rem !important;
    }

    .carrito-item-precio-unitario {
        font-size: 0.7rem !important;
    }

    .carrito-item-precio-unitario strong {
        font-size: 0.85rem !important;
    }

    .btn-eliminar-item {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    .cantidad-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.75rem !important;
    }

    .cantidad-valor {
        min-width: 22px !important;
        font-size: 0.9rem !important;
    }

    .carrito-item-subtotal-valor {
        font-size: 0.95rem !important;
    }

    .carrito-resumen {
        margin: 10px !important;
        padding: 12px !important;
    }

    .resumen-item {
        font-size: 0.8rem !important;
    }

    .resumen-item.total span {
        font-size: 1rem !important;
    }

    .carrito-footer .btn {
        padding: 11px 14px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   16. FOOTER - MÓVIL
============================================ */
@media (max-width: 768px) {
    #footer {
        padding: 30px 0 80px 0 !important; /* Espacio para botones flotantes */
    }

    #footer .widget {
        margin-bottom: 25px !important;
    }

    #footer h4 {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    #footer .links li {
        margin-bottom: 8px !important;
    }

    #footer .links a {
        font-size: 0.85rem !important;
    }

    #footer p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .contact-info p {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
    }

    .certificaciones .badge {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    #footer-bottom {
        padding: 15px 0 !important;
    }

    .copyright-text {
        font-size: 0.75rem !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .social-links {
        justify-content: center !important;
        margin-bottom: 15px !important;
    }

    .payment-security h6 {
        font-size: 0.75rem !important;
    }

    .payment-methods img {
        height: 25px !important;
        margin-right: 8px !important;
    }

    .security-badges span {
        font-size: 0.7rem !important;
        padding: 2px 5px !important;
    }
}

/* ============================================
   17. PAGINACIÓN - MÓVIL
============================================ */
@media (max-width: 768px) {
    .tienda-paginacion-premium {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .tienda-paginacion-premium .page-item {
        margin: 0 !important;
    }

    .tienda-paginacion-premium .page-link {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    #info-paginacion {
        font-size: 0.85rem !important;
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* ============================================
   18. MEJORAS DE ACCESIBILIDAD TÁCTIL
============================================ */
@media (max-width: 768px) {
    /* Aumentar área táctil de enlaces y botones */
    a, button, .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Mejorar espacio entre elementos clicables */
    .tienda-enlace-categoria {
        margin-bottom: 2px !important;
    }
}

/* ============================================
   19. OPTIMIZACIÓN DE RENDIMIENTO MÓVIL
============================================ */
@media (max-width: 768px) {
    /* Reducir animaciones complejas en móvil */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }

    /* Simplificar sombras para mejor rendimiento */
    .tienda-card-producto {
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }

    .tienda-card-producto:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    }
}

/* ============================================
   20. ORIENTACIÓN LANDSCAPE EN MÓVILES
============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        height: 50vh !important;
        min-height: 300px !important;
    }

    .modal-filtros-contenido {
        max-height: 90vh !important;
    }
}

/* ============================================
   21. MEJORAS PARA PANTALLAS MUY PEQUEÑAS
============================================ */
@media (max-width: 360px) {
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .tienda-grid-productos {
        padding: 0 3px !important;
        gap: 10px !important;
    }

    .tienda-card-producto {
        border-radius: 12px !important;
    }

    .tienda-imagen-contenedor,
    .tienda-contenedor-imagen {
        height: 180px !important;
    }

    .tienda-info-producto {
        padding: 10px !important;
    }

    .tienda-nombre-producto {
        font-size: 0.9rem !important;
    }

    .tienda-precio-actual {
        font-size: 1.1rem !important;
    }

    .tienda-boton-principal {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   22. FIXED - Prevenir scroll horizontal
============================================ */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    /* Ajustar imágenes que puedan causar overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   23. MEJORAS DE UX - FEEDBACK VISUAL
============================================ */
@media (max-width: 768px) {
    /* Feedback táctil para botones */
    button:active, .btn:active {
        opacity: 0.8 !important;
        transform: scale(0.98) !important;
    }

    /* Smooth scroll mejorado */
    html {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================
   FIN DE MEJORAS RESPONSIVE MÓVILES - VERSIÓN CORREGIDA
============================================ */


/* === tienda-mobile-fixes.css === */
/* ============================================
   CORRECCIONES CRÍTICAS DE DISEÑO MÓVIL - TIENDA
   Fecha: 2025-12-04
   Propósito: Corregir problemas visuales específicos en móviles
============================================ */

/* ============================================
   1. NAVBAR - REDUCIR ALTURA EN MÓVILES Y OCULTAR ELEMENTOS
============================================ */
@media (max-width: 992px) {
    /* Reducir padding del body para compensar navbar más pequeño */
    body {
        padding-top: 60px !important;
    }

    /* Navbar más compacto */
    .modern-navbar {
        min-height: 60px !important;
    }

    .navbar-content {
        padding: 10px 0 !important;
        min-height: 60px !important;
    }

    .navbar-container {
        padding: 0 10px !important;
    }

    /* Logo más pequeño */
    .navbar-logo {
        font-size: 20px !important;
        letter-spacing: 1.5px !important;
    }

    /* OCULTAR elementos del navbar en móviles (solo mostrar logo + hamburguesa) */
    .navbar-menu > li {
        display: none !important;
    }

    .navbar-actions > *:not(.mobile-menu-btn) {
        display: none !important;
    }

    /* Botón hamburguesa más pequeño y VISIBLE */
    .mobile-menu-btn {
        display: flex !important;
        padding: 6px !important;
    }

    .mobile-menu-btn span {
        width: 24px !important;
        height: 2.5px !important;
    }

    .navbar-actions {
        gap: 6px !important;
    }

    /* Ajustar posición del menú desplegable lateral */
    .navbar-menu {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }

    /* Mostrar items cuando el menú está activo */
    .navbar-menu.active > li {
        display: block !important;
    }

    /* Ajustar overlay */
    .mobile-menu-overlay {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }
}

@media (max-width: 768px) {
    /* Confirmar ocultamiento en móviles pequeños */
    .navbar-menu > li {
        display: none !important;
    }

    .navbar-menu.active > li {
        display: block !important;
    }

    .navbar-actions > *:not(.mobile-menu-btn) {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
    }
}

/* ============================================
   2. HERO SECTION - ELIMINAR ESPACIO SUPERIOR
============================================ */
@media (max-width: 768px) {
    .hero-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: 35vh !important;
        min-height: 280px !important;
    }

    .hero-content {
        padding: 1.2rem 1rem !important;
    }

    .hero-title {
        font-size: 1.6rem !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-subtitle {
        font-size: 0.7rem !important;
        margin-bottom: 0.4rem !important;
    }

    .hero-text {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }

    .btn-elegant {
        padding: 9px 22px !important;
        font-size: 0.82rem !important;
    }
}

/* ============================================
   3. FEATURES BAR - SLIDER MÓVIL PERFECTAMENTE CENTRADO
============================================ */
@media (max-width: 768px) {
    .features-bar {
        padding: 30px 0 !important;
        margin: 0 auto !important;
        background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }

    .features-bar .container {
        padding: 0 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Grid desktop oculto en móvil */
    .features-desktop {
        display: none !important;
    }

    /* Slider móvil visible y centrado */
    .features-slider-mobile {
        display: block !important;
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 400px) {
    .features-bar .container {
        padding: 0 15px !important;
    }

    .features-slider-mobile {
        max-width: 320px !important;
    }
}

/* ============================================
   4. SELECTOR DE LÍNEAS - OPTIMIZAR ESPACIO
============================================ */
@media (max-width: 768px) {
    .lineas-selector-section {
        padding: 20px 0 !important;
        margin: 0 !important;
    }

    .lineas-selector-container {
        padding: 20px 12px !important;
        margin: 0 10px !important;
    }

    .lineas-titulo {
        font-size: 1.4rem !important;
        margin-bottom: 6px !important;
    }

    .lineas-subtitulo {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }

    .lineas-toggle-container {
        margin-top: 15px !important;
    }

    .lineas-toggle {
        gap: 12px !important;
    }

    .linea-option {
        padding: 16px 12px !important;
    }

    .linea-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
    }

    .linea-content h4 {
        font-size: 1.05rem !important;
        margin-bottom: 4px !important;
    }

    .linea-content p {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .linea-features {
        gap: 5px !important;
        margin-top: 6px !important;
    }

    .feature-dot {
        width: 7px !important;
        height: 7px !important;
    }
}

/* ============================================
   5. BANNER DE OFERTAS Y BÚSQUEDA - COMPACTAR
============================================ */
@media (max-width: 768px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    .seccion-busqueda-ofertas .container {
        padding: 0 10px !important;
    }

    /* Banner de ofertas más compacto */
    .banner-ofertas {
        padding: 15px 12px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
    }

    .banner-contenido {
        gap: 12px !important;
    }

    .oferta-icono {
        font-size: 2.2rem !important;
    }

    .oferta-icono i {
        font-size: 2.2rem !important;
    }

    .oferta-texto h3 {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    .oferta-texto p {
        font-size: 0.85rem !important;
    }

    .oferta-contador {
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .contador-item {
        padding: 8px 12px !important;
        min-width: 65px !important;
    }

    .contador-numero {
        font-size: 1.4rem !important;
    }

    .contador-label {
        font-size: 0.65rem !important;
    }

    /* Barra de búsqueda más compacta */
    .barra-busqueda-premium {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .busqueda-contenedor-premium {
        padding: 0 !important;
        border-radius: 10px !important;
    }

    .input-busqueda-premium {
        padding: 11px 15px !important;
        font-size: 0.88rem !important;
    }

    .btn-buscar-premium,
    .btn-limpiar-premium {
        padding: 11px 15px !important;
        font-size: 0.88rem !important;
    }
}

/* ============================================
   6. FILTROS HORIZONTALES - COMPACTAR
============================================ */
@media (max-width: 768px) {
    .filtros-horizontales-premium {
        padding: 15px 10px !important;
        margin: 0 !important;
        gap: 12px !important;
    }

    .grupo-filtros-premium {
        margin-bottom: 0 !important;
    }

    .titulo-grupo-filtros {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
        padding: 0 4px !important;
    }

    .titulo-grupo-filtros i {
        font-size: 0.8rem !important;
    }

    .contenedor-chips-filtros {
        gap: 6px !important;
    }

    .chip-filtro {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
    }

    .chip-filtro i {
        font-size: 0.75rem !important;
    }

    .btn-limpiar-filtros-premium {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
    }
}

/* ============================================
   7. SLIDERS DE PRODUCTOS - REDUCIR ESPACIADO
============================================ */
@media (max-width: 768px) {
    .productos-sliders-section {
        padding-top: 15px !important;
        margin-top: 0 !important;
    }

    .slider-linea {
        margin-bottom: 30px !important;
    }

    .slider-header {
        padding: 0 10px !important;
        margin-bottom: 15px !important;
    }

    .slider-header-content {
        gap: 10px !important;
    }

    .slider-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }

    .slider-titulo {
        font-size: 1.3rem !important;
        margin-bottom: 3px !important;
    }

    .slider-subtitulo {
        font-size: 0.8rem !important;
    }

    .slider-btn {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   8. OCULTAR ELEMENTOS DUPLICADOS EN MÓVIL
============================================ */
@media (max-width: 768px) {
    /* Si hay botones o iconos duplicados, ocultarlos */

    /* Ocultar botón de búsqueda del navbar (ya hay uno en la sección de búsqueda) */
    .navbar-actions .navbar-action-btn[title*="búsqueda"],
    .navbar-actions .navbar-action-btn[onclick*="toggleSearch"] {
        display: none !important;
    }

    /* Asegurar que solo haya un botón de carrito visible */
    .navbar-actions .navbar-action-btn[href*="checkout"] {
        display: flex !important;
    }
}

/* ============================================
   9. ESPACIADO GENERAL ENTRE SECCIONES
============================================ */
@media (max-width: 768px) {
    /* Eliminar márgenes excesivos entre secciones */
    section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Espaciado consistente para contenedores */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Reducir gaps en todas las secciones */
    .row {
        row-gap: 15px !important;
    }
}

/* ============================================
   10. BOTONES FLOTANTES - AJUSTAR POSICIÓN (ALINEADOS)
============================================ */
@media (max-width: 768px) {
    /* Botón de filtros - ALINEADO con el carrito */
    .btn-filtros-movil {
        bottom: 20px !important;
        left: 15px !important;
        width: 60px !important;
        height: 60px !important;
        font-size: 1.15rem !important;
    }

    /* Botón de carrito - estilos definidos en carrito-badge-mobile.css */
}

/* ============================================
   11. PANTALLAS MUY PEQUEÑAS (< 400px)
============================================ */
@media (max-width: 400px) {
    body {
        padding-top: 55px !important;
    }

    .modern-navbar {
        min-height: 55px !important;
    }

    .navbar-content {
        padding: 8px 0 !important;
        min-height: 55px !important;
    }

    .navbar-logo {
        font-size: 18px !important;
    }

    .navbar-action-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    .hero-section {
        height: 30vh !important;
        min-height: 250px !important;
    }

    .hero-title {
        font-size: 1.4rem !important;
    }

    .features-bar {
        padding: 15px 0 !important;
    }

    .feature-icon {
        font-size: 1.4rem !important;
    }

    .feature-title {
        font-size: 0.75rem !important;
    }

    .feature-text {
        font-size: 0.6rem !important;
    }
}

/* ============================================
   12. PREVENIR SCROLLING HORIZONTAL
============================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    * {
        max-width: 100% !important;
    }

    /* Asegurar que ningún elemento se salga */
    .container,
    .container-fluid,
    .row,
    section,
    div {
        max-width: 100% !important;
    }
}

/* ============================================
   FIN DE CORRECCIONES MÓVILES
============================================ */


/* === features-slider-mobile.css === */
/* ============================================
   SLIDER DE CARACTERÍSTICAS PARA MÓVILES
   Fecha: 2025-12-04
   Propósito: Mostrar features como slider en móviles
============================================ */

/* ============================================
   DESKTOP: Mostrar grid normal, ocultar slider
============================================ */
@media (min-width: 769px) {
    .features-desktop {
        display: block !important;
    }

    .features-slider-mobile {
        display: none !important;
    }
}

/* ============================================
   MÓVILES: Ocultar grid, mostrar slider
============================================ */
@media (max-width: 768px) {
    .features-desktop {
        display: none !important;
    }

    .features-slider-mobile {
        display: block !important;
    }

    /* Contenedor del slider */
    .features-slider-container {
        position: relative;
        width: 100%;
        max-width: 400px; /* Ancho máximo para centrar */
        margin: 0 auto; /* Centrar horizontalmente */
        overflow: hidden;
        padding: 20px 0;
    }

    /* Track que contiene todos los slides */
    .features-slider-track {
        display: flex;
        transition: transform 0.4s ease-in-out;
        width: 400%; /* 4 slides = 400% */
    }

    /* Cada slide individual */
    .feature-slide {
        min-width: calc(100% - 20px); /* Restar márgenes */
        padding: 30px 25px;
        text-align: center;
        background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        margin: 0 10px;
        transition: all 0.3s ease;
    }

    /* Icono del feature */
    .feature-slide .feature-icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 15px auto;
        background: linear-gradient(135deg, #D4AF37, #F4E4BC);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    }

    .feature-slide .feature-icon i {
        font-size: 32px;
        color: #2C2C2C;
    }

    /* Título del feature */
    .feature-slide .feature-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2C2C2C;
        margin-bottom: 8px;
        font-family: 'Playfair Display', serif;
    }

    /* Texto del feature */
    .feature-slide .feature-text {
        font-size: 0.9rem;
        color: #666;
        margin: 0;
        line-height: 1.4;
    }

    /* Indicadores (dots) */
    .features-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        padding: 10px 0;
        width: 100%;
    }

    .features-dots .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #D0D0D0;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
    }

    .features-dots .dot.active {
        background: linear-gradient(135deg, #D4AF37, #F4E4BC);
        width: 30px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
    }

    .features-dots .dot:hover {
        background: #B8B8B8;
    }

    .features-dots .dot.active:hover {
        background: linear-gradient(135deg, #D4AF37, #F4E4BC);
    }

    /* Ajuste del contenedor de features-bar */
    .features-bar {
        padding: 30px 0 !important;
        margin: 0 auto !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .features-bar .container {
        padding: 0 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .features-slider-mobile {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }
}

/* ============================================
   ANIMACIÓN DE SWIPE TÁCTIL
============================================ */
@media (max-width: 768px) {
    .features-slider-track {
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .feature-slide {
        pointer-events: none;
    }

    .feature-slide * {
        pointer-events: auto;
    }
}

/* ============================================
   PANTALLAS MUY PEQUEÑAS (< 400px)
============================================ */
@media (max-width: 400px) {
    .features-slider-container {
        max-width: 320px; /* Más pequeño en pantallas chicas */
        padding: 15px 0;
    }

    .feature-slide {
        padding: 25px 20px;
        margin: 0 8px;
    }

    .feature-slide .feature-icon {
        width: 65px;
        height: 65px;
        margin-bottom: 12px;
    }

    .feature-slide .feature-icon i {
        font-size: 30px;
    }

    .feature-slide .feature-title {
        font-size: 1.05rem;
        margin-bottom: 6px;
    }

    .feature-slide .feature-text {
        font-size: 0.88rem;
    }

    .features-dots .dot {
        width: 8px;
        height: 8px;
    }

    .features-dots .dot.active {
        width: 24px;
    }

    .features-bar .container {
        padding: 0 15px !important;
    }
}

/* ============================================
   MEJORA VISUAL - EFECTOS DE PROFUNDIDAD
============================================ */
@media (max-width: 768px) {
    .feature-slide {
        position: relative;
        overflow: hidden;
    }

    .feature-slide::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .feature-slide:active::before {
        opacity: 1;
    }
}

/* ============================================
   ESTADO DE CARGA (SKELETON)
============================================ */
@media (max-width: 768px) {
    .features-slider-mobile.loading .feature-slide {
        animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.6;
        }
    }
}

/* ============================================
   ACCESIBILIDAD
============================================ */
@media (max-width: 768px) {
    .features-dots .dot:focus {
        outline: 2px solid #D4AF37;
        outline-offset: 3px;
    }

    .feature-slide {
        scroll-snap-align: center;
    }

    .features-slider-container {
        scroll-snap-type: x mandatory;
    }
}


/* === carrito-badge-mobile.css === */
/* ============================================
   BADGE DEL CARRITO MÓVIL - MEJORADO Y VISIBLE
   Fecha: 2025-12-04
   Propósito: Hacer el contador del carrito más visible en móviles
============================================ */

/* ============================================
   DESKTOP: Badge normal arriba a la derecha
============================================ */
@media (min-width: 769px) {
    .carrito-badge-mobile {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        min-width: 22px !important;
        height: 22px !important;
        border-radius: 11px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 6px !important;
        background: #dc3545 !important;
        color: white !important;
        border: 2px solid #FAF8F5 !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
        z-index: 1060 !important;
    }
}

/* ============================================
   MÓVILES: Badge más grande y visible DEBAJO del icono
============================================ */
@media (max-width: 768px) {
    /* Botón del carrito flotante */
    .tienda-carrito-flotante {
        position: fixed !important;
        bottom: 20px !important;
        right: 15px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #D4AF37, #F4E4BC) !important;
        color: #2C2C2C !important;
        border: none !important;
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5) !important;
        font-size: 1.1rem !important;
        z-index: 1055 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        padding: 0 !important;
        transition: all 0.3s ease !important;
    }

    .tienda-carrito-flotante:active {
        transform: scale(0.95) !important;
    }

    /* Icono del carrito - tamaño reducido y más proporcionado */
    .tienda-carrito-flotante i {
        font-size: 1.05rem !important;
        margin-bottom: 2px !important;
    }

    /* Badge DEBAJO del icono - Visible pero proporcionado */
    .carrito-badge-mobile {
        position: relative !important;
        bottom: auto !important;
        top: 6px !important;
        right: auto !important;
        left: auto !important;

        /* Tamaño proporcionado y visible */
        min-width: 22px !important;
        height: 16px !important;

        /* Diseño */
        border-radius: 8px !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;

        /* Layout */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 6px !important;

        /* Colores */
        background: #dc3545 !important;
        color: white !important;

        /* Sombra y borde */
        border: 2px solid white !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5) !important;

        /* Z-index */
        z-index: 1060 !important;

        /* Animación */
        transition: all 0.3s ease !important;
    }

    /* Animación cuando hay items */
    .carrito-badge-mobile:not(:empty) {
        animation: badgePulse 2s ease-in-out infinite !important;
    }

    @keyframes badgePulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 3px 10px rgba(220, 53, 69, 0.6);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.8);
        }
    }

    /* Cuando el badge está en 0, hacerlo más discreto */
    .carrito-badge-mobile:empty,
    .carrito-badge-mobile:contains("0") {
        opacity: 0.6 !important;
        animation: none !important;
    }
}

/* ============================================
   MÓVILES PEQUEÑOS (< 480px)
============================================ */
@media (max-width: 480px) {
    .tienda-carrito-flotante {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.05rem !important;
    }

    .tienda-carrito-flotante i {
        font-size: 1rem !important;
        margin-bottom: 2px !important;
    }

    .carrito-badge-mobile {
        min-width: 20px !important;
        height: 15px !important;
        font-size: 0.6rem !important;
        padding: 0 5px !important;
        top: 5px !important;
    }
}

/* ============================================
   PANTALLAS MUY PEQUEÑAS (< 360px)
============================================ */
@media (max-width: 360px) {
    .tienda-carrito-flotante {
        width: 48px !important;
        height: 48px !important;
        font-size: 1rem !important;
    }

    .tienda-carrito-flotante i {
        font-size: 0.95rem !important;
        margin-bottom: 1px !important;
    }

    .carrito-badge-mobile {
        min-width: 18px !important;
        height: 14px !important;
        font-size: 0.58rem !important;
        padding: 0 4px !important;
        top: 5px !important;
    }
}

/* ============================================
   ESTADO CUANDO HAY MUCHOS ITEMS (10+)
============================================ */
@media (max-width: 768px) {
    /* Badge con 2 dígitos */
    .carrito-badge-mobile[data-count="2-digits"],
    .carrito-badge-mobile:matches([^0-9][0-9]{2}$]) {
        min-width: 32px !important;
        padding: 0 8px !important;
        font-size: 0.68rem !important;
    }

    /* Badge con 3+ dígitos (99+) */
    .carrito-badge-mobile[data-count="3-digits"] {
        min-width: 36px !important;
        padding: 0 9px !important;
        font-size: 0.65rem !important;
    }
}

/* ============================================
   ACCESIBILIDAD - CONTRASTE ALTO
============================================ */
@media (max-width: 768px) {
    /* Aumentar contraste para mejor visibilidad */
    .carrito-badge-mobile {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }

    /* Focus visible para accesibilidad */
    .tienda-carrito-flotante:focus {
        outline: 3px solid #D4AF37 !important;
        outline-offset: 3px !important;
    }

    .tienda-carrito-flotante:focus .carrito-badge-mobile {
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.9) !important;
    }
}

/* ============================================
   ANIMACIÓN AL AGREGAR ITEMS
============================================ */
@media (max-width: 768px) {
    @keyframes badgeBounce {
        0%, 100% {
            transform: scale(1);
        }
        25% {
            transform: scale(1.3);
        }
        50% {
            transform: scale(0.9);
        }
        75% {
            transform: scale(1.1);
        }
    }

    /* Clase para animar cuando se agrega un item */
    .carrito-badge-mobile.item-agregado {
        animation: badgeBounce 0.5s ease !important;
    }
}

/* ============================================
   VARIANTE: Badge a un LADO del botón (alternativa)
============================================ */
@media (max-width: 768px) {
    /* Descomentar para badge en esquina superior derecha del botón */
    /*
    .tienda-carrito-flotante {
        flex-direction: row !important;
        position: relative !important;
    }

    .carrito-badge-mobile {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        bottom: auto !important;
        left: auto !important;
    }
    */
}


/* === tienda-mobile-compact.css === */
/* ============================================
   DISEÑO COMPACTO PARA MÓVILES - TIENDA
   Reduce el espacio vertical en dispositivos pequeños
   Optimiza el banner de promociones y barra de búsqueda
============================================ */

/* Espaciado general de secciones en móvil */
@media (max-width: 576px) {
    .seccion-busqueda-ofertas {
        padding: 1rem 0 !important;
        margin: 0.8rem 0 !important;
    }

    .seccion-busqueda-ofertas .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Reducir espacio del banner */
    .promociones-slider-container {
        margin-bottom: 8px !important;
    }

    .banner-ofertas {
        padding: 1.2rem 1rem !important;
        margin-bottom: 0 !important;
    }

    /* Barra de búsqueda más compacta */
    .barra-busqueda-premium {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }

    /* Filtros más compactos */
    .filtros-horizontales-premium {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

/* Ajustes para dispositivos muy pequeños (480px y menores) */
@media (max-width: 480px) {
    /* Eliminar TODOS los espacios innecesarios */
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* CONTENEDOR - Slider funcional sin espacios duplicados */
    .promociones-slider-container {
        padding: 0 18px !important;
        margin: 1.2rem auto !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Ocultar flechas en dispositivos pequeños */
    .slider-arrow {
        display: none !important;
    }

    .promociones-slider {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
    }

    /* Slides inactivos completamente ocultos */
    .promo-slide {
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
        opacity: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        visibility: hidden !important;
    }

    /* Solo el slide activo visible */
    .promo-slide.active {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        opacity: 1 !important;
        position: relative !important;
        visibility: visible !important;
    }

    /* Banner con más padding interno */
    .banner-ofertas {
        padding: 1.8rem 1.8rem !important;
    }

    /* Eliminar pseudo-elementos decorativos en móvil */
    .banner-ofertas::before,
    .banner-ofertas::after {
        display: none !important;
        content: none !important;
    }

    /* Icono más pequeño */
    .oferta-icono {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        flex-shrink: 0 !important;
    }

    /* Texto compacto */
    .oferta-texto {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .oferta-texto h3 {
        font-size: 0.88rem !important;
        line-height: 1.1 !important;
        margin: 0 0 0.2rem 0 !important;
    }

    .oferta-texto p {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    /* Contador compacto */
    .oferta-contador {
        gap: 0.3rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .contador-item {
        min-width: 45px !important;
        max-width: 45px !important;
        padding: 0.35rem 0.25rem !important;
        border-radius: 8px !important;
    }

    .contador-numero {
        font-size: 1.15rem !important;
        margin: 0 0 0.1rem 0 !important;
        line-height: 1 !important;
    }

    .contador-label {
        font-size: 0.5rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* Dots compactos - SIN margen superior */
    .promociones-dots {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        gap: 0.35rem !important;
    }

    .promo-dot {
        width: 7px !important;
        height: 7px !important;
    }

    .promo-dot.active {
        width: 18px !important;
    }

    /* Barra de búsqueda compacta - SIN margen superior */
    .barra-busqueda-premium {
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .busqueda-contenedor-premium {
        padding: 5px 5px 5px 8px !important;
        border-radius: 25px !important;
    }

    .icono-busqueda-premium {
        width: 16px !important;
        height: 16px !important;
        font-size: 13px !important;
        margin-right: 5px !important;
    }

    .input-busqueda-premium {
        padding: 6px 7px !important;
        font-size: 11px !important;
    }

    .btn-buscar-premium {
        padding: 6px 12px !important;
        font-size: 10px !important;
        margin-right: 4px !important;
    }

    .btn-limpiar-premium {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    /* Filtros horizontales compactos - SIN margen superior */
    .filtros-horizontales-premium {
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        padding: 5px 6px !important;
        border-radius: 10px !important;
    }

    .grupo-filtros-premium {
        margin-bottom: 4px !important;
        gap: 3px !important;
    }

    .grupo-filtros-premium:last-child {
        margin-bottom: 0 !important;
    }

    .titulo-grupo-filtros {
        font-size: 9px !important;
        gap: 3px !important;
        margin-bottom: 3px !important;
    }

    .titulo-grupo-filtros i {
        font-size: 10px !important;
    }

    .contenedor-chips-filtros {
        gap: 3px !important;
    }

    .chip-filtro {
        padding: 3px 8px !important;
        font-size: 9px !important;
        border-radius: 15px !important;
    }

    .chip-filtro i {
        font-size: 9px !important;
    }

    .btn-limpiar-filtros-premium {
        padding: 3px 8px !important;
        font-size: 8px !important;
    }
}

/* Ajustes extremos para pantallas de 400px y menores */
@media (max-width: 400px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    .promociones-slider-container {
        padding: 0 14px !important;
        margin: 1.1rem auto !important;
    }

    .banner-ofertas {
        padding: 1.6rem 1.6rem !important;
    }

    .banner-contenido {
        gap: 1rem !important;
    }

    .oferta-icono {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.05rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.8rem !important;
        margin-bottom: 0.15rem !important;
    }

    .oferta-texto p {
        font-size: 0.62rem !important;
    }

    .contador-item {
        min-width: 42px !important;
        max-width: 42px !important;
        padding: 0.32rem 0.22rem !important;
    }

    .contador-numero {
        font-size: 1.05rem !important;
    }

    .contador-label {
        font-size: 0.46rem !important;
    }

    .promociones-dots {
        margin-top: 4px !important;
    }

    .barra-busqueda-premium {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }

    .busqueda-contenedor-premium {
        padding: 4px 4px 4px 7px !important;
    }

    .icono-busqueda-premium {
        width: 15px !important;
        height: 15px !important;
        font-size: 12px !important;
    }

    .input-busqueda-premium {
        padding: 5px 6px !important;
        font-size: 10px !important;
    }

    .btn-buscar-premium {
        padding: 5px 10px !important;
        font-size: 9px !important;
    }

    .btn-limpiar-premium {
        width: 30px !important;
        height: 30px !important;
    }

    .filtros-horizontales-premium {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        padding: 4px 5px !important;
    }

    .chip-filtro {
        padding: 2px 7px !important;
        font-size: 8px !important;
    }
}

/* Ajustes para 360px y menores */
@media (max-width: 360px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    .seccion-busqueda-ofertas .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .promociones-slider-container {
        padding: 0 12px !important;
        margin: 1rem auto !important;
    }

    .banner-ofertas {
        padding: 1.4rem 1.3rem !important;
        border-radius: 12px !important;
    }

    .banner-contenido {
        gap: 0.85rem !important;
    }

    .oferta-icono {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.75rem !important;
        letter-spacing: 0.3px !important;
        margin-bottom: 0.12rem !important;
    }

    .oferta-texto p {
        font-size: 0.58rem !important;
        line-height: 1.15 !important;
    }

    .oferta-contador {
        gap: 0.22rem !important;
    }

    .contador-item {
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 0.28rem 0.2rem !important;
        border-radius: 6px !important;
    }

    .contador-numero {
        font-size: 0.95rem !important;
        margin-bottom: 0.08rem !important;
    }

    .contador-label {
        font-size: 0.43rem !important;
        letter-spacing: 0.4px !important;
    }

    .promociones-dots {
        margin-top: 3px !important;
        gap: 0.25rem !important;
    }

    .promo-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .promo-dot.active {
        width: 14px !important;
    }

    .barra-busqueda-premium {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        padding: 0 5px !important;
    }

    .busqueda-contenedor-premium {
        padding: 3px 3px 3px 6px !important;
        border-radius: 22px !important;
    }

    .icono-busqueda-premium {
        width: 14px !important;
        height: 14px !important;
        font-size: 11px !important;
        margin-right: 4px !important;
    }

    .input-busqueda-premium {
        padding: 4px 5px !important;
        font-size: 9px !important;
    }

    .btn-buscar-premium {
        padding: 4px 8px !important;
        font-size: 8px !important;
        letter-spacing: 0.1px !important;
    }

    .btn-limpiar-premium {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    .filtros-horizontales-premium {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        padding: 3px 4px !important;
        border-radius: 8px !important;
    }

    .grupo-filtros-premium {
        margin-bottom: 3px !important;
        gap: 2px !important;
    }

    .grupo-filtros-premium:last-child {
        margin-bottom: 0 !important;
    }

    .titulo-grupo-filtros {
        font-size: 8px !important;
        gap: 2px !important;
        margin-bottom: 2px !important;
    }

    .titulo-grupo-filtros i {
        font-size: 9px !important;
    }

    .contenedor-chips-filtros {
        gap: 2px !important;
    }

    .chip-filtro {
        padding: 2px 6px !important;
        font-size: 8px !important;
        border-radius: 12px !important;
    }

    .chip-filtro i {
        font-size: 8px !important;
    }

    .btn-limpiar-filtros-premium {
        padding: 2px 6px !important;
        font-size: 7px !important;
    }
}

/* Optimización de altura para evitar scroll excesivo */
@media (max-width: 480px) and (max-height: 700px) {
    .seccion-busqueda-ofertas {
        padding: 3px 0 !important;
        margin: 2px 0 !important;
    }

    .banner-ofertas {
        padding: 1.5rem 1.5rem !important;
    }

    .banner-contenido {
        gap: 0.9rem !important;
    }

    .contador-item {
        padding: 0.7rem 0.6rem !important;
        min-width: 64px !important;
    }

    .contador-numero {
        font-size: 1.5rem !important;
    }

    .contador-label {
        font-size: 0.6rem !important;
    }

    .barra-busqueda-premium {
        margin-top: 6px !important;
        margin-bottom: 5px !important;
    }

    .filtros-horizontales-premium {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
}

/* Para pantallas muy pequeñas en altura */
@media (max-width: 360px) and (max-height: 640px) {
    .seccion-busqueda-ofertas {
        padding: 1px 0 !important;
        margin: 0 !important;
    }

    .banner-ofertas {
        padding: 1.2rem 1.1rem !important;
    }

    .banner-contenido {
        gap: 0.7rem !important;
    }

    .oferta-icono {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.1 !important;
    }

    .oferta-texto p {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }

    .oferta-contador {
        gap: 0.4rem !important;
    }

    .contador-item {
        min-width: 52px !important;
        padding: 0.5rem 0.42rem !important;
    }

    .contador-numero {
        font-size: 1.2rem !important;
        margin-bottom: 0.15rem !important;
    }

    .contador-label {
        font-size: 0.52rem !important;
        letter-spacing: 0.6px !important;
    }

    .promociones-dots {
        margin-top: 0.6rem !important;
    }

    .barra-busqueda-premium {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    .filtros-horizontales-premium {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }
}


/* === tienda-productos-mobile-optimizado.css === */
/* ============================================
   OPTIMIZACIÓN DE PRODUCTOS PARA MÓVILES
   Mejora la visualización de tarjetas de productos en dispositivos móviles
   - Etiquetas de línea más visibles y legibles
   - Imágenes más pequeñas para mostrar el producto completo
   - Diseño más compacto y profesional
============================================ */

/* ============================================
   TABLETS (hasta 768px)
============================================ */
@media (max-width: 768px) {
    /* Ajustar altura de imagen para tablets */
    .producto-imagen-container {
        height: 180px !important;
    }

    /* Etiquetas más visibles */
    .producto-badge {
        padding: 4px 8px !important;
        font-size: 9px !important;
        top: 8px !important;
        right: 8px !important;
        gap: 3px !important;
        border-radius: 6px !important;
    }

    .producto-badge i {
        font-size: 8px !important;
    }
}

/* ============================================
   MÓVILES (hasta 576px)
============================================ */
@media (max-width: 576px) {
    /* Imagen más grande para mejor visualización */
    .producto-imagen-container {
        height: 200px !important;
    }

    /* La imagen debe ajustarse para mostrar el producto completo */
    .producto-imagen {
        object-fit: contain !important; /* Cambiado de cover a contain */
        padding: 8px !important; /* Espacio alrededor de la imagen */
    }

    /* Etiquetas de línea más compactas - Solo icono en móviles */
    .producto-badge {
        padding: 6px !important;
        font-size: 0 !important; /* Ocultar texto */
        top: 6px !important;
        right: 6px !important;
        gap: 0 !important;
        border-radius: 50% !important; /* Circular para solo icono */
        font-weight: 700 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
        opacity: 1 !important;
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .producto-badge i {
        font-size: 13px !important; /* Icono más grande */
        margin: 0 !important;
    }

    /* Card más compacto */
    .producto-card {
        border-radius: 12px !important;
    }

    /* Info del producto más compacta y centrada */
    .producto-info {
        padding: 12px !important;
        text-align: center !important;
        align-items: center !important;
    }

    .producto-nombre {
        font-size: 13px !important;
        min-height: 32px !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .producto-categoria {
        font-size: 9px !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .producto-precio {
        font-size: 16px !important;
        margin: 6px 0 8px 0 !important;
        text-align: center !important;
    }

    /* Stock más compacto y centrado */
    .producto-stock {
        font-size: 10px !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    /* Info de ventas y recomendaciones centradas */
    .producto-vendidos,
    .producto-recomendado {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Precios en promoción centrados */
    .producto-precios-promocion {
        text-align: center !important;
    }

    .producto-precio-original,
    .producto-precio-descuento {
        text-align: center !important;
    }

    .producto-ahorro {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Botón más compacto */
    .btn-agregar-carrito {
        padding: 12px 16px !important;
        font-size: 13px !important;
        gap: 6px !important;
    }

    .btn-agregar-carrito i {
        font-size: 13px !important;
    }

    /* Overlay de acciones más pequeño */
    .producto-card .tienda-boton-accion {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    .producto-card .tienda-overlay-acciones {
        gap: 6px !important;
    }
}

/* ============================================
   MÓVILES PEQUEÑOS (hasta 480px)
============================================ */
@media (max-width: 480px) {
    /* Imagen un poco más grande */
    .producto-imagen-container {
        height: 190px !important;
    }

    .producto-imagen {
        padding: 6px !important;
    }

    /* Etiquetas más compactas - Solo icono */
    .producto-badge {
        padding: 5px !important;
        font-size: 0 !important;
        top: 5px !important;
        right: 5px !important;
        gap: 0 !important;
        width: 26px !important;
        height: 26px !important;
    }

    .producto-badge i {
        font-size: 12px !important;
    }

    /* Info más compacta y centrada */
    .producto-info {
        padding: 10px !important;
        text-align: center !important;
    }

    .producto-nombre {
        font-size: 12px !important;
        min-height: 30px !important;
        text-align: center !important;
    }

    .producto-categoria {
        text-align: center !important;
    }

    .producto-precio {
        font-size: 15px !important;
        margin: 5px 0 7px 0 !important;
        text-align: center !important;
    }

    .producto-stock {
        text-align: center !important;
    }

    .btn-agregar-carrito {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   MÓVILES MUY PEQUEÑOS (hasta 400px)
============================================ */
@media (max-width: 400px) {
    /* Imagen más grande */
    .producto-imagen-container {
        height: 180px !important;
    }

    .producto-imagen {
        padding: 5px !important;
    }

    /* Etiquetas más pequeñas - Solo icono */
    .producto-badge {
        padding: 5px !important;
        font-size: 0 !important;
        gap: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }

    .producto-badge i {
        font-size: 11px !important;
    }

    /* Info compacta y centrada */
    .producto-info {
        padding: 9px !important;
        text-align: center !important;
    }

    .producto-nombre {
        font-size: 11px !important;
        min-height: 28px !important;
        text-align: center !important;
    }

    .producto-categoria {
        font-size: 8px !important;
        margin-bottom: 5px !important;
        text-align: center !important;
    }

    .producto-precio {
        font-size: 14px !important;
        margin: 4px 0 6px 0 !important;
        text-align: center !important;
    }

    .producto-stock {
        text-align: center !important;
    }

    .btn-agregar-carrito {
        padding: 9px 12px !important;
        font-size: 11px !important;
    }

    .btn-agregar-carrito i {
        font-size: 11px !important;
    }
}

/* ============================================
   MÓVILES EXTRA PEQUEÑOS (hasta 360px)
============================================ */
@media (max-width: 360px) {
    /* Imagen con buen tamaño */
    .producto-imagen-container {
        height: 170px !important;
    }

    .producto-imagen {
        padding: 4px !important;
    }

    /* Etiquetas pequeñas - Solo icono */
    .producto-badge {
        padding: 4px !important;
        font-size: 0 !important;
        top: 5px !important;
        right: 5px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .producto-badge i {
        font-size: 10px !important;
    }

    /* Info mínima y centrada */
    .producto-info {
        padding: 8px !important;
        text-align: center !important;
    }

    .producto-nombre {
        font-size: 11px !important;
        min-height: 26px !important;
        text-align: center !important;
    }

    .producto-categoria {
        text-align: center !important;
    }

    .producto-precio {
        font-size: 13px !important;
        text-align: center !important;
    }

    .producto-stock {
        text-align: center !important;
    }
}

/* ============================================
   OPTIMIZACIÓN PARA SLIDER DE PROMOCIONES
============================================ */
@media (max-width: 576px) {
    /* Imagen para productos en promoción */
    .promocion-card .producto-imagen-container {
        height: 200px !important;
    }

    .promocion-card .producto-imagen {
        object-fit: contain !important;
        padding: 8px !important;
    }

    /* Badge de descuento más visible */
    .badge-descuento-promocion {
        padding: 4px 8px !important;
        font-size: 9px !important;
        top: 6px !important;
        left: 6px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }

    .badge-descuento-promocion i {
        font-size: 8px !important;
    }

    /* Etiqueta "OFERTA" del producto - Solo icono */
    .promocion-card .producto-badge {
        padding: 6px !important;
        font-size: 0 !important;
        width: 28px !important;
        height: 28px !important;
    }

    .promocion-card .producto-badge i {
        font-size: 13px !important;
    }

    /* Precios en promoción */
    .producto-precios-promocion {
        margin: 6px 0 !important;
    }

    .producto-precio-original {
        font-size: 11px !important;
    }

    .producto-precio-descuento {
        font-size: 16px !important;
    }

    .producto-ahorro {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }
}

@media (max-width: 480px) {
    .promocion-card .producto-imagen-container {
        height: 190px !important;
    }

    .promocion-card .producto-imagen {
        padding: 6px !important;
    }

    .badge-descuento-promocion {
        padding: 3px 7px !important;
        font-size: 8px !important;
    }

    .producto-precio-descuento {
        font-size: 15px !important;
    }
}

@media (max-width: 400px) {
    .promocion-card .producto-imagen-container {
        height: 180px !important;
    }

    .promocion-card .producto-imagen {
        padding: 5px !important;
    }

    .badge-descuento-promocion {
        padding: 3px 6px !important;
        font-size: 7px !important;
    }

    .producto-precio-descuento {
        font-size: 14px !important;
    }
}

/* ============================================
   OPTIMIZACIÓN PARA TOP 10
============================================ */
@media (max-width: 576px) {
    /* Imagen para productos Top 10 */
    .top-card .producto-imagen-container {
        height: 200px !important;
    }

    .top-card .producto-imagen {
        object-fit: contain !important;
        padding: 8px !important;
    }

    /* Ranking más pequeño pero visible */
    .producto-ranking {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        top: 6px !important;
        left: 6px !important;
    }

    .producto-ranking.medalla-oro {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .producto-ranking.medalla-plata {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    .producto-ranking.medalla-bronce {
        width: 29px !important;
        height: 29px !important;
        font-size: 12px !important;
    }

    /* Badge "BEST SELLER" - Ajustado al texto */
    .badge-mejor-vendido {
        padding: 3px 8px !important;
        font-size: 7px !important;
        top: 40px !important;
        width: auto !important;
        max-width: max-content !important;
        white-space: nowrap !important;
    }

    .badge-mejor-vendido i {
        font-size: 7px !important;
    }

    /* Info de ventas */
    .producto-vendidos {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .producto-recomendado {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
}

@media (max-width: 480px) {
    .top-card .producto-imagen-container {
        height: 190px !important;
    }

    .top-card .producto-imagen {
        padding: 6px !important;
    }

    .producto-ranking {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    .badge-mejor-vendido {
        padding: 2px 6px !important;
        font-size: 6px !important;
        top: 38px !important;
        width: auto !important;
        max-width: max-content !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 400px) {
    .top-card .producto-imagen-container {
        height: 180px !important;
    }

    .top-card .producto-imagen {
        padding: 5px !important;
    }

    .producto-ranking {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .badge-mejor-vendido {
        padding: 2px 5px !important;
        font-size: 6px !important;
        width: auto !important;
        max-width: max-content !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   MEJORAS GENERALES DE LEGIBILIDAD
============================================ */
@media (max-width: 576px) {
    /* Asegurar que las etiquetas sean siempre legibles */
    .producto-badge {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        min-height: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Mejorar contraste del texto */
    .producto-nombre,
    .producto-categoria,
    .producto-precio {
        text-shadow: none !important;
    }

    /* Asegurar que los botones sean tocables */
    .btn-agregar-carrito {
        min-height: 40px !important;
        touch-action: manipulation !important;
    }

    .producto-card .tienda-boton-accion {
        min-width: 36px !important;
        min-height: 36px !important;
        touch-action: manipulation !important;
    }
}

/* ============================================
   PREVENIR DESBORDAMIENTO EN MÓVILES
============================================ */
@media (max-width: 576px) {
    .slider-item {
        overflow: hidden !important;
    }

    .producto-card {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    .producto-imagen-container {
        overflow: hidden !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Evitar que el texto se desborde */
    .producto-nombre,
    .producto-categoria,
    .producto-precio,
    .producto-stock {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
}


/* === tienda-overlay-mobile-fix.css === */
/* ============================================
   FIX: ICONOS FLOTANTES CON CLICK

   COMPORTAMIENTO IGUAL EN DESKTOP Y MÓVIL:
   - Iconos OCULTOS por defecto
   - Desktop: Se muestran al CLICK (clase 'active')
   - Móvil: Se muestran al CLICK/TAP (clase 'active')

   IMPORTANTE: Este archivo debe cargarse DESPUÉS de otros CSS
   para sobrescribir estilos conflictivos
============================================ */

/* ============================================
   TODOS LOS DISPOSITIVOS: Comportamiento con click
============================================ */

/* OCULTOS por defecto en todos los dispositivos */
.producto-card .tienda-overlay-acciones,
.producto-imagen-container .tienda-overlay-acciones {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
}

/* VISIBLES cuando el producto está activo (clickeado) - Desktop y Móvil */
.producto-card.active .tienda-overlay-acciones,
.producto-imagen-container.active .tienda-overlay-acciones {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Oscurecer imagen cuando está activa */
.producto-imagen-container.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 8;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Asegurar contenedor con posición relative */
.producto-imagen-container {
    position: relative !important;
}

    /* Botones más grandes para facilitar el toque */
    .producto-card .tienda-boton-accion,
    .producto-imagen-container .tienda-boton-accion {
        width: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
        /* Asegurar que sean tocables */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Ajustar espaciado entre botones */
    .producto-card .tienda-overlay-acciones {
        gap: 10px !important;
    }
}

/* ============================================
   MÓVILES (hasta 576px)
   Optimización adicional para pantallas pequeñas
============================================ */
@media (max-width: 576px) {
    /* REFORZAR posición absolute */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Botones un poco más pequeños pero tocables */
    .producto-card .tienda-boton-accion,
    .producto-imagen-container .tienda-boton-accion {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }

    /* Reducir gap entre botones */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        gap: 8px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    /* Mejorar contraste de los botones */
    .producto-card .tienda-boton-accion {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

    /* Efectos visuales al tocar */
    .producto-card .tienda-boton-accion:active {
        transform: scale(0.92) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }
}

/* ============================================
   MÓVILES PEQUEÑOS (hasta 480px)
============================================ */
@media (max-width: 480px) {
    /* REFORZAR posición absolute */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Botones más compactos */
    .producto-card .tienda-boton-accion,
    .producto-imagen-container .tienda-boton-accion {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Gap más pequeño */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        gap: 6px !important;
        padding: 6px !important;
    }
}

/* ============================================
   MÓVILES MUY PEQUEÑOS (hasta 400px)
============================================ */
@media (max-width: 400px) {
    /* REFORZAR posición absolute */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Botones mínimos pero tocables */
    .producto-card .tienda-boton-accion,
    .producto-imagen-container .tienda-boton-accion {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    /* Gap mínimo */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        gap: 5px !important;
        padding: 5px !important;
    }
}

/* ============================================
   MÓVILES EXTRA PEQUEÑOS (hasta 360px)
============================================ */
@media (max-width: 360px) {
    /* REFORZAR posición absolute */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Botones compactos pero funcionales */
    .producto-card .tienda-boton-accion,
    .producto-imagen-container .tienda-boton-accion {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    /* Gap mínimo */
    .producto-card .tienda-overlay-acciones,
    .producto-imagen-container .tienda-overlay-acciones {
        gap: 4px !important;
        padding: 4px !important;
    }
}

/* ============================================
   AJUSTES ADICIONALES PARA MEJOR UX
============================================ */
@media (max-width: 768px) {
    /* Prevenir selección de texto al tocar botones */
    .producto-card .tienda-boton-accion {
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }

    /* Mejorar feedback visual */
    .producto-card .tienda-boton-accion:hover {
        transform: scale(1.05) !important;
    }

    /* Asegurar que los iconos se vean sobre la imagen */
    .producto-card .tienda-overlay-acciones {
        z-index: 10 !important;
    }

    /* Asegurar que el contenedor de imagen no oculte el overlay */
    .producto-imagen-container {
        position: relative !important;
        overflow: visible !important;
    }
}

/* ============================================
   RESPONSIVE: Tamaños óptimos para móviles pequeños
============================================ */