/* VARIABLES GLOBALES */
:root {
    --bg-main: #ffffff; 
    --bg-card: #f5f5f7; 
    --bg-header: rgba(255, 255, 255, 0.85);
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --border-color: rgba(0, 0, 0, 0.08);
    --btn-bg: #1d1d1f;
    --btn-text: #ffffff;
    --btn-hover: #000000;
    --cart-badge: #e30000;
    
    /* MAGIA PARA IMÁGENES EN MODO CLARO */
    --img-box-bg: #ffffff;
    --img-mix-blend: multiply;
    --img-filter: none;
    --box-filter: none;
}

[data-theme="dark"] {
    --bg-main: #000000; 
    --bg-card: #1c1c1e; 
    --bg-header: rgba(0, 0, 0, 0.85);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --border-color: rgba(255, 255, 255, 0.1);
    --btn-bg: #f5f5f7;
    --btn-text: #000000;
    --btn-hover: #ffffff;
    --cart-badge: #ff453a;
    
    /* MAGIA PARA IMÁGENES EN MODO OSCURO (Doble Inversión) */
    --img-box-bg: #ffffff; /* Sigue siendo blanco para que funcione el screen */
    --img-mix-blend: screen; 
    --img-filter: invert(1) hue-rotate(180deg); 
    --box-filter: invert(1) hue-rotate(180deg);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ================= HEADER ================= */
header {
    position: sticky; top: 0; 
    background: var(--bg-header);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000; padding: 15px 0;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.header-content { max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
.header-left { display: flex; align-items: center; gap: 40px; flex-grow: 1; }
.header-right { display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo-box { background: var(--text-primary); color: var(--bg-main); padding: 4px 10px; font-weight: 800; font-size: 18px; border-radius: 6px; letter-spacing: -1px; transition: 0.4s ease; }
h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }

/* ================= BUSCADOR ================= */
.search-container { position: relative; max-width: 300px; width: 100%; }
.search-input-wrapper { display: flex; align-items: center; background: var(--bg-card); border: 1px solid transparent; border-radius: 20px; padding: 8px 16px; transition: all 0.3s ease; }
.search-input-wrapper:focus-within { border-color: var(--text-secondary); background: transparent; }
.search-icon { width: 18px; height: 18px; color: var(--text-secondary); }
.search-input-wrapper input { border: none; background: transparent; color: var(--text-primary); outline: none; width: 100%; margin-left: 10px; font-family: inherit; font-size: 14px; }
.search-suggestions { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); max-height: 300px; overflow-y: auto; z-index: 1200; display: none; padding: 10px; }
.search-suggestion-item { padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 12px; border-radius: 10px; transition: background 0.2s; }
.search-suggestion-item:hover { background: var(--bg-card); }
.search-suggestion-item img { width: 35px; height: 35px; object-fit: contain; border-radius: 6px; mix-blend-mode: var(--img-mix-blend); filter: var(--img-filter); background: var(--img-box-bg); }

/* FILTROS TIPO APPLE */
.filter-nav { display: flex; gap: 8px; }
.filter-btn { border: none; padding: 8px 18px; border-radius: 40px; background: transparent; cursor: pointer; font-weight: 500; color: var(--text-secondary); transition: all 0.3s ease; font-size: 14px; }
.filter-btn:hover { color: var(--text-primary); }
.filter-btn.active { background: var(--text-primary); color: var(--bg-main); font-weight: 600; }

/* ACCIONES (TEMA Y CARRITO) */
.header-actions { display: flex; align-items: center; gap: 20px; }
.theme-toggle { background: transparent; border: none; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; transition: 0.3s; }
.theme-toggle:hover { background: var(--border-color); }
.theme-toggle svg { width: 22px; height: 22px; }

.cart-container { position: relative; }
.cart-icon-wrapper { position: relative; padding: 2px; cursor: pointer; color: var(--text-primary); }
.cart-count { position: absolute; top: -4px; right: -6px; background: var(--cart-badge); color: #fff; font-size: 10px; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.cart-dropdown { position: absolute; top: 50px; right: 0; width: 340px; background: var(--bg-main); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); padding: 20px; border: 1px solid var(--border-color); z-index: 1100; transition: 0.3s ease; }
.hidden { display: none; }
.cart-items-list { max-height: 300px; overflow-y: auto; margin-bottom: 20px; padding-right: 10px;}
.total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; margin-bottom: 15px; border-top: 1px solid var(--border-color); padding-top: 15px;}
.checkout-btn { width: 100%; background: var(--btn-bg); color: var(--btn-text); padding: 16px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.3s;}
.checkout-btn:hover { background: var(--btn-hover); }

/* ================= HERO SECTION ================= */
.hero-section { max-width: 900px; margin: 80px auto 60px auto; padding: 0 40px; text-align: center; }
.hero-section h2 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 15px; line-height: 1.1; color: var(--text-primary); }
.hero-section p { font-size: clamp(18px, 2.5vw, 22px); color: var(--text-secondary); font-weight: 400; max-width: 600px; margin: 0 auto; }

/* ================= PRODUCTOS Y MAGIA CSS ================= */
.product-grid { max-width: 1300px; margin: 0 auto 100px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; padding: 0 40px; }

.product-card { background: var(--bg-card); border-radius: 20px; padding: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.4s ease; border: 1px solid transparent; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.06); }

/* CONTENEDOR DE IMAGEN (Aquí ocurre la magia del fondo) */
.image-box { 
    background: var(--img-box-bg); 
    border-radius: 16px; height: 280px; 
    display: flex; align-items: center; justify-content: center; 
    margin-bottom: 15px; overflow: hidden; transition: 0.4s ease;
    filter: var(--box-filter); /* Inversión de contenedor en Dark Mode */
}

.image-box img { 
    max-width: 80%; 
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.4s ease;
    mix-blend-mode: var(--img-mix-blend); /* Multiply en Claro, Screen en Oscuro */
    filter: var(--img-filter); /* Pre-inversión de imagen en Dark Mode */
}
.product-card:hover .image-box img { transform: scale(1.08); }

.product-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.price { font-weight: 700; font-size: 18px; color: var(--text-secondary); margin-bottom: 15px; display: block; }

.add-btn { width: 100%; padding: 12px; background: transparent; color: var(--text-primary); border: 2px solid var(--border-color); border-radius: 10px; font-weight: 600; cursor: pointer; transition: 0.3s ease; font-size: 14px; }
.product-card:hover .add-btn { background: var(--btn-bg); color: var(--btn-text); border-color: transparent;}

/* ================= NOTIFICACIÓN ================= */
.notification { position: fixed; bottom: 30px; right: 30px; background: var(--text-primary); color: var(--bg-main); padding: 15px 25px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transform: translateY(100px); opacity: 0; transition: 0.4s ease; z-index: 2000; }
.notification.show { transform: translateY(0); opacity: 1; }

/* ================= RESPONSIVO ================= */
@media (max-width: 1000px) {
    .header-content { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
    .header-left, .header-right { flex-direction: column; gap: 15px; }
    .brand { align-self: flex-start; }
    .header-actions { position: absolute; top: 20px; right: 20px; }
    .search-container { max-width: 100%; }
    .filter-nav { overflow-x: auto; padding-bottom: 5px; width: 100%; justify-content: flex-start; }
    .hero-section { margin: 30px auto; padding: 0 20px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 0 20px; gap: 15px;}
    .image-box { height: 180px; }
    .cart-dropdown { width: 300px; right: -20px; }
}