/* RESET BÁSICO */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: #ffffff; 
    color: #000;
    font-family: 'Arial', sans-serif; 
    font-size: 11px; 
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    
}
::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        background: transparent !important;
    }
header {
   display: flex;          
    align-items: center;    
    
    /* PADDING NORMAL: Esto mantiene el Login/Cart pegados a la derecha */
    padding: 30px 40px;     
    
    background-color: #ffffff;
    width: 100%;            
    position: sticky;       
    top: 0;
    z-index: 11;
    box-sizing: border-box; /* Importante */
}



.center-menu {
    margin-left: 60px;
    display: flex;
    margin-top: -10px;
    height: 40px;           
    align-items: center;   
    gap: 40px; /* El espacio entre palabras */
}


.right-menu {
    margin-left: auto;      
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-item {
    text-decoration: none;
    color: #000;
    font-size: 11px;
    font-weight: normal;
    padding: 2px 5px;
}

.nav-item.active {
    background-color: #e0e0e0;
    cursor: default;
}

.marca {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 17.5px;
    letter-spacing: -1px;
    margin-left: 20px;  
}
.blink { animation: parpadeo 1s infinite; }


/* BUSCA ESTO Y DÉJALO ASÍ */
.producto img {
    width: 100%;
    height: auto;
    
    display: block;

}

.info-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #000;
    color: #fff;
    padding: 2px 5px;
    font-family: monospace;
}
/* ESTILO PARA EL BOTÓN CART CON FONDO NEGRO */
.carrito {
    background-color: #000000; /* Fondo Negro Sólido */
    color: #ffffff;            /* Texto Blanco */
    padding: 6px 12px;         /* Relleno: 8px arriba/abajo, 15px lados */
    font-weight: 500;          /* Letra muy gruesa */
    border: 1px solid #000000; /* Borde negro */
    cursor: pointer;           /* Que aparezca la manito */
    display: inline-block;     /* Para que respete el tamaño */
    transition: all 0.3s ease; /* Suaviza el cambio de color */
}


.nav-item {
    text-decoration: none;
    color: #000;
    font-size: 11px;
    font-weight: normal; /* <--- AQUÍ ESTÁ EL CAMBIO (antes decía bold) */
    letter-spacing: 0.5px;
    padding: 2px 5px;
}


/* Efecto sutil al pasar el mouse por el menú (solo para los que NO están activos) */
.nav-item:not(.active):hover {
    color: #666; 
}

/* =======================================================
       FOOTER PREMIUM (SOLUCIÓN ANIMACIÓN CIERRE PERFECTA)
       ======================================================= */
    .system-footer {
        background-color: #FFFFFF;
        border-top: 1px solid #E5E5E5;
        color: #111;
        padding: 80px 60px 40px 60px;
        font-family: 'Helvetica', 'Arial', sans-serif;
        font-size: 12px;
        margin-top: 100px;
        text-transform: none !important;
    }

    .footer-inner { max-width: 1400px; margin: 0 auto; }

    /* --- GRID DE 4 COLUMNAS (PC) --- */
    .footer-columns-wrapper {
        display: grid;
        grid-template-columns: 1.2fr 1.2fr 1.2fr 1.5fr;
        gap: 40px;
        margin-bottom: 80px;
    }

    /* Títulos */
    .f-header h4 {
        font-size: 11px; 
        font-weight: 700;
        margin: 0 0 20px 0;
        color: #000;
        text-transform: uppercase; 
        letter-spacing: 0.5px;
    }
    
    .acc-symbol { display: none; } /* Oculto en PC */

    /* Enlaces */
    .f-content a {
        display: block; color: #444; text-decoration: none; margin-bottom: 12px; 
        transition: color 0.2s; font-size: 12px; font-weight: 400; text-transform: none !important;
    }
    .f-content a:hover { color: #000; text-decoration: underline; }

    /* --- NEWSLETTER --- */
    .news-desc { margin-bottom: 15px; color: #666; line-height: 1.4; text-transform: none !important;}
    
    .newsletter-box {
        display: flex;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
        margin-bottom: 30px;
    }
    
    .news-input {
        border: none; outline: none; flex-grow: 1; font-size: 12px;
        background: transparent; padding: 5px 0;
    }
    
    .news-btn { background: none; border: none; cursor: pointer; font-size: 16px; }

    /* Redes */
    .socials-wrapper h4 { margin-bottom: 15px; font-size: 11px; text-transform: uppercase; font-weight: 700; }
    .icons { display: flex; gap: 20px; }
    .icons a { color: #000; transition: opacity 0.3s; }
    .icons a:hover { opacity: 0.6; }

    /* --- BARRA INFERIOR --- */
    .footer-bottom-bar {
        border-top: 1px solid #F0F0F0; padding-top: 25px;
        display: flex; justify-content: space-between; align-items: center;
        color: #777; font-size: 11px;
    }
    .bottom-left { display: flex; gap: 20px; align-items: center; }
    .bottom-right-payments { display: flex; gap: 8px; opacity: 0.8; }
    .pay-icon { width: 34px; height: 22px; }

     .empty-msg { color: #ffffff; font-size: 10px; font-family: Arial, sans-serif; font-weight: normal; }

    /* =======================================================
       MÓVIL MEJORADO (ANIMACIÓN FLUIDA)
       ======================================================= */
    @media (max-width: 1024px) {
        .system-footer { padding: 40px 20px; }
        
        .footer-columns-wrapper { display: block; margin-bottom: 40px; }
        
        /* Líneas divisorias */
        .accordion-item { border-bottom: 1px solid #E5E5E5; }

        /* Header del Acordeón */
        .f-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px 0; cursor: pointer;
            background: transparent;
        }
        .f-header h4 { margin: 0; }
        
        .acc-symbol { 
            display: block; 
            font-family: 'Courier New', monospace; 
            font-size: 14px; 
            transition: transform 0.3s ease; 
        }

        /* --- AQUÍ ESTÁ LA SOLUCIÓN DE LA ANIMACIÓN --- */
        .f-content { 
            /* Estado CERRADO */
            max-height: 0;
            opacity: 0;
            padding-bottom: 0; /* Importante: animar el padding a 0 */
            margin-top: 0;     /* Importante: animar el margen a 0 */
            overflow: hidden;
            
            /* Curva Bezier para que sea suave y no robótica */
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.4s ease,
                        padding 0.4s ease,
                        margin 0.4s ease;
        }

        .accordion-item.active .f-content { 
            /* Estado ABIERTO */
            max-height: 500px; /* Suficiente espacio pero no excesivo */
            opacity: 1;
            padding-bottom: 20px;
            margin-top: 5px;
        }
        
        /* Newsletter Limpio */
        .newsletter-col { 
            margin-top: 40px; 
            padding-top: 0; 
            border: none !important; 
        }

        .newsletter-box {
            border-bottom: 1px solid #E5E5E5;
            margin-bottom: 20px;
        }
        
        .footer-bottom-bar { flex-direction: column-reverse; gap: 20px; align-items: flex-start; }
        .bottom-left { flex-direction: column; align-items: flex-start; gap: 5px; }
        .bottom-right-payments { flex-wrap: wrap; margin-bottom: 10px; }
    }
      


/* --- TEXTO DEBAJO DEL PRODUCTO --- */
.data-text {
    margin-top: 8px;       /* Un pequeño espacio entre foto y texto */
    font-size: 11px;       /* Letra pequeña técnica */
    color: #000000;        /* Negro puro */
    text-align: left;      /* Alineado a la izquierda */
    font-family: 'Arial', sans-serif;
    font-weight: normal;   /* Sin negrita */
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Opcional: Convierte todo a MAYÚSCULAS */
}
/* --- ACTIVAR LA MANITO (CURSOR) --- */
.producto {
    cursor: pointer; /* <--- ESTO ES LA CLAVE */
}
/* CONTENEDOR DE LA BARRA LEGAL */
.legal-menu-container {
    width: 100%;
    background-color: #fff;
    
    /* ESPACIADO: */
    margin-top: 80px;      /* Separa la barra del producto de arriba */
    padding-bottom: 40px;  /* Separa la barra del footer de abajo */
    
    /* Opcional: Línea divisoria suave arriba */
    border-top: 1px solid #f0f0f0; 
}


/* Hover: Subrayar al pasar el mouse */
.legal-item:hover {
    text-decoration: underline;
}



#cart-overlay {
            position: fixed; 
            top: 0; left: 0; width: 100%; height: 100%; 
            display: none;
            
        }

        #cart-sidebar {
            position: fixed; 
            top: 0; /* OBLIGATORIO: Empieza desde el pixel 0 */
            right: -450px; 
            width: 400px;
            height: 100vh; /* Ocupa el 100% de la altura */
            background: #000; /* FONDO NEGRO SÓLIDO */
            color: #fff;      
            z-index: 20 !important;  /* Z-INDEX MÁXIMO (Más que el header 2000) */
            padding: 0; 
            box-sizing: border-box;
            transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex; flex-direction: column;
            border-left: 1px solid #333; 
        }

        #cart-sidebar.open { right: 0; }

        /* === AQUÍ ESTABA EL ERROR: ESTA BARRA DEBE SER NEGRA === */
       .sidebar-top-section {
            height: 140px; 
            width: 100%;
            display: flex !important;
            justify-content: space-between !important; 
            
            /* Los centramos verticalmente usando su eje exacto */
            align-items: center !important; 
            
            padding-bottom: 20px; 
            padding-left: 40px !important; 
            padding-right: 40px !important; 
            
            box-sizing: border-box;
            background-color: #000 !important; 
            border-bottom: none !important; 
            position: relative;
        }

        #cart-items-container { 
            flex-grow: 1; 
            overflow-y: auto; 
            padding: 10px 40px 40px 40px;
            background: #000; /* Aseguramos fondo negro */
        }

        .cart-item {
            display: flex; 
              gap: 20px; 
              
              margin-bottom: 30px; 
              font-size: 11px; 
              color: #fff;
               font-weight: normal !important; /* <--- FUERZA LETRA FINA */
}    
        .cart-item img {
            width: 70px; height: auto; object-fit: contain;
            
            
        }
        .cart-item-info {
            display: flex; flex-direction: column; justify-content: space-between; width: 100%;
        }
        .item-name { font-weight: normal !important; /* <--- ANTES ERA BOLD */
    text-transform: uppercase; 
    margin-bottom: 4px; 
    display: block;
}
        .remove-btn {
            cursor: pointer; text-decoration: none; color: #666; font-size: 10px; margin-top: 10px;
            text-transform: uppercase;
        }
        .remove-btn:hover { color: #fff; }

        .cart-footer {
            border-top: 1px solid #333; 
            padding: 40px; 
            margin-top: auto;
            background: #000; /* Aseguramos fondo negro */
        }
        .cart-total {
            display: flex; justify-content: space-between; font-size: 11px;
            font-weight: normal; margin-bottom: 20px; color: #fff;
        }
      #cart-count-header,
        .sidebar-top-section .carrito {
            color: #fff !important;
            font-size: 10px !important;
            font-weight: normal !important;
            
            /* EL SECRETO: 0 márgenes, 0 paddings y altura de línea 1 */
            margin: 0 !important; 
            padding: 0 !important; 
            line-height: 1 !important; 
            padding-bottom: 30px !important;
            
            display: block !important;
            background: transparent !important;
            border: none !important;
        }
        
        .checkout-btn {
            width: 100%;
            background: #fff; 
            color: #000;      
            border: none;
            padding: 16px;
            font-size: 11px;
            text-transform: uppercase;
            
            cursor: pointer;
            font-weight: bold;
            letter-spacing: 1px;
            transition: background 1s;
        }
        .checkout-btn:hover { background: #ccc; }z
        
       
/* === SCROLLBAR SUTIL (ESTILO MODERNO) === */

/* 1. Ancho (Fina pero usable) */
::-webkit-scrollbar {
    width: 10px; 
    height: 10px;
}

/* 2. El Riel (Track): TOTALMENTE TRANSPARENTE
   Esto es lo que hace que se "integre" con el fondo. 
   No verás una caja blanca ni gris, solo el contenido de tu web. */
::-webkit-scrollbar-track {
    background: transparent; 
}

/* 3. La Barra (Thumb): GRIS SUAVE Y REDONDEADA */
::-webkit-scrollbar-thumb {
    /* Color gris oscuro pero con transparencia (0.3) para que no sea fuerte */
    background-color: rgba(0, 0, 0, 0.3); 
    
    border-radius: 10px; /* Bordes muy redondos (cápsula) */
    
    /* ESTE TRUCO ES CLAVE: 
       Crea un borde transparente alrededor de la barra para que parezca
       más fina y que "flota" en el espacio, sin tocar los bordes. */
    border: 3px solid transparent; 
    background-clip: content-box; 
}

/* 4. Al pasar el mouse (Se oscurece un poco para indicar que está activa) */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Gris más sólido */
}
/* === SCROLLBAR INTELIGENTE (MODO CARRITO) === */

/* Cuando el carrito está abierto, el fondo de la barra se vuelve NEGRO */
body.cart-active::-webkit-scrollbar-track {
    background-color: #000 !important; /* Fondo negro sólido */
}

/* Y la barra se vuelve un gris técnico para resaltar sobre el negro */
body.cart-active::-webkit-scrollbar-thumb {
    background-color: #666 !important; 
    border: 2px solid #000 !important; /* Borde negro para integrarse */
}

/* Al pasar el mouse en modo carrito */
body.cart-active::-webkit-scrollbar-thumb:hover {
    background-color: #fff !important; /* Se ilumina al tocarla (efecto cool) */
}
#loader-heliot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
    -webkit-font-smoothing: antialiased;
    color: #b0b0b0; /* Gris suave minimalista */
}

#loader-heliot.fade-out { 
    opacity: 0; 
    visibility: hidden; 
}

.loader-inner-container {
    width: 65%;
    max-width: 850px;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* MARCO NUMÉRICO SIMÉTRICO */
.header-top, .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#coord-x, #coord-y, .tag {
    font-size: 18px; /* Tamaño unificado */
    letter-spacing: 5px;
    font-weight: normal; /* Sin negrillas */
}

.center-brand {
    flex-grow: 1;
}
/* =========================================
   SYSTEM TOP BAR (ESTILO INDUSTRIAL)
   ========================================= */

/* 1. Ajuste del cuerpo y header para que bajen suavemente */
body {
    transition: padding-top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Si tu header es fijo (fixed), también necesita bajar */
header {
    transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. La Barra Superior */
#system-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    
    background-color: #ffffff;
    
    /* === CAMBIOS PARA QUE SE VEA EL BORDE === */
    /* 1. Pon el borde NEGRO para que se vea bien */
    border-bottom: 11px solid #d8d8d8; 
    z-index: 10;

    /* 2. ESTA ES LA CLAVE: Mete el borde dentro de la caja */
    box-sizing: border-box; 

    /* 3. Asegura que esté justo encima de tu menú (que suele ser 100 o 1000) */
    
    /* ======================================== */

    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.5px;
}


/* Texto central */
#sys-text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Botón cerrar */
#sys-close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    font-size: 11px;
    padding: 5px;
    line-height: 1;
}
#sys-close:hover { color: #666; }

/* === ESTADOS ACTIVOS === */

/* Cuando la barra está activa, empujamos el body y el header */
body.has-system-bar {
    padding-top: 30px;
}
/* Opcional: Si tu header es 'fixed', esto lo baja */
body.has-system-bar header {
    top: 30px; 
}

/* Cuando cerramos la barra (Clase para ocultar) */
#system-bar.closed {
    transform: translateY(-100%); /* Se va hacia arriba */
}
/* Solo afecta a las páginas de categoría */
.image-stack {
    display: grid;
    width: 100%;
    position: relative;
}

.image-stack img {
    grid-area: 1 / 1; /* Pone una foto encima de la otra */
    width: 110% !important; /* Mantiene tu estilo ancho */
    max-width: none !important;
    height: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.1s ease;
}

.img-hover { opacity: 0; z-index: 2; }
.img-base { opacity: 1; z-index: 1; }

/* Al pasar el mouse, muestra la foto hover */
.producto:hover .img-hover { opacity: 1; }

@media (max-width: 768px) {
    header {
        height: 55px; /* Más delgado en celular */
        padding: 0 20px; /* Menos margen a los lados */
    }

    .marca {
        font-size: 14px; /* Logo un poco más pequeño */
        margin-left: 2px;
    }

    /* Ocultamos el LOGIN en móvil para ahorrar espacio */
    .login-btn {
        display: none;
    }

    .carrito {
        font-size: 10px;
        padding: 6px 12px; /* Botón más compacto */
    }
}

@media (min-width: 769px) {
    .store-toolbar {
        display: none !important;
    }
}
    /* === TOOLBAR DE LA TIENDA (NEW ARRIVALS | 2 \ 1 | FILTER) === */
    .store-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;
        padding: 15px 22px; /* Alineado con los márgenes de tus fotos */
        background: #ffffff;
        
        /* Tipografía fina a juego con tu menú */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: normal !important;
        color: #000;
        letter-spacing: 0.5px;
    }

    .toolbar-center {
        display: flex;
        gap: 6px;
    }

    .grid-toggle {
        cursor: pointer;
        color: #cccccc; /* Color gris para el inactivo */
        transition: color 0.3s;
    }

    .grid-toggle.active {
        color: #000000; /* Color negro para el activo */
    }

    .separator {
        color: #000000;
    }

    .toolbar-right {
        cursor: pointer;
    }

    /* === MODIFICADORES DE COLUMNAS (JS) === */
    /* Cuando se activan 2 columnas */
    #contenedor-productos.two-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
    }

    /* Cuando se activa 1 columna */
    #contenedor-productos.one-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 50px !important; /* Mucho espacio de separación entre cada producto */
    }

    #contenedor-productos.one-column .producto {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Destruimos la altura fija (300px) para que la foto no aplaste el texto */
    #contenedor-productos.one-column .img-container,
    #contenedor-productos.one-column .contenedor-capas {
        position: relative !important;
        height: auto !important; 
        aspect-ratio: auto !important;
        margin-bottom: 10px !important;
    }

    #contenedor-productos.one-column .producto img,
    #contenedor-productos.one-column .capa-imagen {
        position: relative !important;
        height: auto !important;
        max-height: none !important; 
        object-fit: contain !important;
        display: block !important;
    }

    /* Obligamos al texto y precio a quedarse abajo, a salvo y visibles */
    #contenedor-productos.one-column .info-producto {
        display: block !important;
        position: relative !important;
        z-index: 10 !important;
        background: #ffffff !important;
        padding-top: 5px !important;
    }
    
    #contenedor-productos.one-column .nombre-producto,
    #contenedor-productos.one-column .precio-producto {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
     @media (max-width: 768px) {
        header {
            height: 55px; 
            padding: 0 20px; 
        }

        .marca {
            font-size: 14px; 
            margin-left: 2px;
        }

        .login-btn {
            display: none;
        }

        .carrito {
            font-size: 10px;
            padding: 6px 12px; 
        } }

        * {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

   
#viewport { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

/* === RESPONSIVE MÓVIL === */
    @media (max-width: 768px) {
   

        /* AJUSTE VISUAL REFERENCIA (2 columnas + fondo gris) */
        #contenedor-productos {
            padding: 0 10px; 
            grid-template-columns: repeat(2, 1fr);
            gap: 15px 10px; /* Más espacio vertical entre filas */
            margin-top: 0px;
        }

        /* Caja gris detrás de la foto en móvil */
        .img-container {
            background-color: #F6F6F6; /* El gris suave de la referencia */
            aspect-ratio: 3 / 4; /* Formato vertical técnico */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 4px !important; /* Texto pegado a la imagen */
        }

        .producto img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            mix-blend-mode: multiply; /* Mezcla el fondo de la foto con el gris */
        }

        .info-producto {
            margin-top: -6px !important;
            padding: 0 2px;
        }

        .nombre-producto {
            font-size: 9px !important;
            font-weight: none;
            letter-spacing: 0.5px;
        }

        .precio-producto {
            font-family: 'Courier New', monospace; /* Toque técnico */
            font-size: 9px !important;
            margin-top: 0px !important;
            color: #000;
        }

        #contenedor-productos.masonry-lookbook {
            display: block;
            column-count: 2; 
            column-gap: 10px;
        }
        
        #contenedor-productos.masonry-lookbook .producto {
            margin-bottom: 10px;
        }
    }

    /* === LÓGICA DEL MENÚ LATERAL & HEADER MÓVIL === */
    .mobile-trigger { display: none; }
    #mobile-sidebar-container { display: none; }
    #sidebar-overlay { display: none; }

    @media (max-width: 768px) {
        #menu-principal { display: none !important; }
        .login-btn { display: none !important; }
        .legal-menu { display: none !important; }

        .right-menu {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .mobile-trigger {
            display: block;
            font-size: 10px; 
            font-weight: normal;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        #mobile-sidebar-container {
            display: block;
            position: fixed;
            top: 0; left: 0;
            width: 80%; max-width: 300px;
            height: 100vh;
            background: #fff;
            z-index: 2000;
            border-right: 1px solid #ffffff;
            transform: translateX(-100%);
            transition: transform 0.4s ease;
            padding: 20px;
            box-sizing: border-box;
        }

        #mobile-sidebar-container.active { transform: translateX(0); }

        .sidebar-header { text-align: right; margin-bottom: 40px; font-size: 10px; margin-top: 3px; font-weight: normal; }
        .sidebar-links { display: flex; flex-direction: column; gap: 25px; }
        .side-link { font-size: 18px; font-weight: none; text-decoration: none; color: #000; }
        
        .sidebar-legal { 
            margin-top: 50px; border-top: 1px solid #eee; padding-top: 20px;
            display: flex; flex-direction: column; gap: 10px; 
        }
        .sidebar-legal a { font-size: 10px; color: #666; text-decoration: none; }

        #sidebar-overlay {
            display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1500;
            opacity: 0; visibility: hidden; transition: opacity 0.3s;
        }
        #sidebar-overlay.active { opacity: 1; visibility: visible; }
    } 
    /* === ESTILOS BASE (PC) === */

/* Reseteo de H3 y P para que no crezcan ni se pongan negritas */
.nombre-producto {
    font-size: 11px !important; /* Tamaño pequeño como lo tenías */
    font-weight: normal !important; /* QUITA LA NEGRILLA */
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    color: #000;
}

.precio-producto {
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 0;
    padding: 0;
    color: #666; /* Un gris sutil para el precio */
    display: none; /* OCULTO EN PC para que no se dañe nada */
}

.info-producto {
    margin-top: 5px; /* Controla el espacio con la foto */
    text-align: left;
}

/* El contenedor de la imagen en PC */
.img-container {
    background: transparent;
    margin-bottom: 5px;
}

.img-container img {
    width: 100%;
    height: auto;
    display: block;
}



/* === RESPONSIVE MÓVIL (Look Heliot Emil) === */
@media (max-width: 768px) {
    
    #contenedor-productos {
        padding: 0 10px;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 10px;
    }

   

    .img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: multiply;
    }

    /* Mostramos el precio SOLO en móvil */
    .precio-producto {
        display: block !important;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10.50px !important;
        margin-top: 2px !important;
        
    }

    .nombre-producto {
       
        font-weight: normal !important; /* Solo negrita en móvil si quieres resaltar el nombre */
        margin-top: 8px !important;
    }
}

/* DENTRO DE @media (max-width: 768px) */

   /* DENTRO DE @media (max-width: 768px) */

    .contenedor-capas {
        position: relative;
        width: 100%;
        height: 300px;
        margin-bottom: 10px;
        /* IMPORTANTE: No usamos overflow hidden para permitir que el gris se salga */
    }

    .capa-fondo {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      
        z-index: 0;
        
        /* === EL TRUCO PARA RELLENAR HUECOS === */
        /* Esto expande el color gris 20px hacia afuera por todos lados */
       box-shadow: -10px 0 0 0 #ededed, 10px 0 0 0 #ededed;
    }

    .capa-imagen {
        position: relative;
        width: 100%; height: 100%;
        object-fit: contain;
        z-index: 1;
        mix-blend-mode: multiply; /* Fusión para quitar el blanco de la foto */
    }

    .capa-imagen {
        position: relative;
        width: 100%; height: 100%;
        object-fit: contain;
        z-index: 1;
        mix-blend-mode: multiply; /* Fusión para quitar el blanco de la foto */
    }@media (min-width: 769px) {
    .capa-fondo { display: none; }
    .contenedor-capas { height: auto; }
    .capa-imagen { mix-blend-mode: normal; }
}

/* =======================================================
   ESTILOS EXCLUSIVOS DEL MENÚ MÓVIL (CLEAN & WHITE)
   ======================================================= */
@media (max-width: 768px) {

    /* === CONTENEDOR PRINCIPAL === */
    #mobile-sidebar-container {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background-color: #ffffff !important; /* Blanco absoluto */
        z-index: 2000;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        padding: 0;
        overflow-y: auto;
    }

    #mobile-sidebar-container.active { transform: translateX(0); }

    /* === HEADER === */
    .sidebar-header {
        display: flex; justify-content: flex-end;
        padding: 30px 30px 10px 30px; /* Más aire arriba */
        background: #fff;
    }
    .close-btn {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px; /* Letra pequeña */
        margin-top: -10px;
        cursor: pointer;
        color: #333333;
        letter-spacing: 0.5px;
    }

    /* === LISTA DE MENÚ === */
    .sidebar-menu-list {
        display: flex;
        flex-direction: column;
        background: #fff;
        padding-top: 20px; /* Separación del header */
    }

    /* ITEMS PRINCIPALES (Sin bordes) */
    .menu-item-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 30px; /* Espaciado vertical más compacto */
        background: #fff;
        cursor: pointer;
        text-decoration: none;
        border: none !important; /* ADIÓS LÍNEAS */
    }

    /* TEXTOS (11px, fino) */
    .menu-text, .invisible-input, .icon-toggle {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px !important; /* TAMAÑO PEQUEÑO */
        font-weight: normal !important; /* SIN NEGRILLA */
        text-transform: uppercase;
        color: #000;
        letter-spacing: 1px; /* Tracking para legibilidad */
    }

    .icon-toggle { font-size: 12px; } /* Icono proporcional */

    /* === SUBMENÚ (MEN / WOMEN) === */
    .submenu-container {
        max-height: 0; 
        font-weight: normal !important;
        overflow: hidden;
        transition: max-height 0.4s ease;
        background-color: #ffffff;
    }

    .submenu-container.open {
        max-height: 100px;
        margin-bottom: 5px; /* Un pequeño respiro */
    }

    .sub-link {
        display: block;
        padding: 8px 30px; 
        padding-left: 45px; /* Indentado */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px; /* Aún más pequeño para jerarquía */
        color: #666; /* Gris técnico */
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* === INPUT DE BÚSQUEDA === */
    .invisible-input {
        border: none; outline: none; background: transparent; width: 100%;
        color: #000;
    }
    .invisible-input::placeholder { color: #888; }

    /* OVERLAY */
    #sidebar-overlay {
        display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 1500;
        opacity: 0; visibility: hidden; transition: opacity 0.3s;
    }
    #sidebar-overlay.active { opacity: 1; visibility: visible; }
}
/* === FOOTER DEL MENÚ LATERAL === */
    .sidebar-footer {
        margin-top: auto; /* Empuja el footer al fondo de la pantalla */
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footer-links {
        display: flex;
        gap: 15px;
    }

    .footer-links a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px; /* Aún más pequeño que el menú (11px) */
        font-weight: normal !important;
        color: #000;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .footer-sys {
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0; /* Una línea gris muuuuy clara */
    }

    .footer-sys span {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px; /* Micro-tipografía técnica */
        color: #999; /* Gris sutil para que no compita con el menú */
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: normal !important;
    }

    /* =======================================================
   ✨ HEADER GLOBAL (MÓVIL) ✨
   ======================================================= */
@media (max-width: 768px) {
    header {
        padding: 15px 20px; /* Un poco más de aire vertical */
    }

    .center-menu {
        display: none;
    }

    .right-menu {
        display: flex;
        align-items: center;
        gap: 20px; /* Espacio más limpio entre MENU y CART */
        font-weight: normal !important;
    }

    .mobile-trigger {
        display: block;
        cursor: pointer;
        font-size: 11px;
        text-transform: uppercase;
    }

    /* === CONTENEDOR PRINCIPAL === */
    .cart-container, .shipping-wrapper {
        margin: 40px 20px; /* Márgenes simétricos */
        padding-bottom: 30px;
    }
}