/* ============================================
   APLICACIÓN DE VARIABLES CSS - TEMA
   Aplica las variables del tema a elementos principales
   ============================================ */

/* Body y contenedor principal */
body {
    background-color: var(--color-light) !important;
    color: var(--color-secondary) !important;
}

/* Header y navegación */
.header {
    background: linear-gradient(180deg, rgba(10, 10, 20, 0.92) 0%, rgba(10, 10, 20, 0.75) 60%, transparent 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Store en tema claro: sin hero detrás → header sólido, sin blur ── */
:root:not([data-theme="dark"]) body.page-store .header {
    background: var(--color-accent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--color-border-muted);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
}

/* Al hacer scroll en store (tema claro): sombra un poco más marcada */
:root:not([data-theme="dark"]) body.page-store .header.scrolled {
    background: var(--color-accent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--color-border-muted);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.11);
    opacity: 1;
}

.nav-menu a,
.logo {
    color: var(--color-secondary) !important;
}

/* Footer */
.footer {
    background-color: var(--color-light);
    color: var(--color-secondary);
}

/* Transiciones suaves */
body,
.header,
.footer,
.nav-menu a,
.logo {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header cuando el usuario hace scroll: usa un degradado que parte de --color-accent hacia transparente */
.header.scrolled {
    background: var(--color-accent);
    opacity: 1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Cuando el menú móvil está abierto queremos que el header muestre el mismo color/gradiente del menú */
.header.menu-open {
    background: var(--color-accent);
    opacity: 0.98;
}

.nav-menu.show {
    background: var(--color-accent);
    border: 1px solid var(--color-primary);
    color: var(--color-secondary);
}