/* Fondo global premium por capas para toda la tienda. Se activa con: . Variante intensa premium: .layered-bg--vivid. */ body.layered-bg { --layer-base: #f7f1e8; --layer-a: rgba(190, 111, 72, 0.2); --layer-b: rgba(227, 176, 122, 0.22); --layer-c: rgba(121, 88, 72, 0.16); --layer-d: rgba(255, 252, 247, 0.78); --mesh-opacity: 0.26; min-height: 100vh; position: relative; isolation: isolate; overflow-x: hidden; background-color: var(--layer-base); background-image: radial-gradient(1200px 620px at -8% -12%, var(--layer-a), transparent 62%), radial-gradient(980px 520px at 108% -10%, var(--layer-b), transparent 64%), radial-gradient(1180px 660px at 50% 114%, var(--layer-c), transparent 68%), linear-gradient(180deg, var(--layer-d), transparent 46%); background-size: 124% 124%, 120% 120%, 132% 132%, 100% 100%; background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; background-repeat: no-repeat; background-attachment: fixed, fixed, fixed, fixed; animation: layeredPan 22s ease-in-out infinite alternate; } body.layered-bg::before, body.layered-bg::after { content: ""; position: fixed; inset: -18vmax; pointer-events: none; } body.layered-bg::before { z-index: -2; background: repeating-linear-gradient( -17deg, rgba(255, 255, 255, 0.36) 0, rgba(255, 255, 255, 0.36) 1px, transparent 1px, transparent 30px ); opacity: var(--mesh-opacity); animation: meshDrift 32s linear infinite; } body.layered-bg::after { z-index: -1; background: radial-gradient(38vmax 38vmax at 22% 18%, rgba(255, 245, 232, 0.45), transparent 72%), radial-gradient(34vmax 34vmax at 84% 26%, rgba(255, 233, 210, 0.3), transparent 74%), radial-gradient(42vmax 42vmax at 50% 88%, rgba(255, 239, 220, 0.28), transparent 76%); filter: blur(14px) saturate(1.06); animation: orbFloat 18s ease-in-out infinite alternate; } body.layered-bg.layered-bg--vivid { --layer-a: rgba(190, 111, 72, 0.27); --layer-b: rgba(227, 176, 122, 0.27); --layer-c: rgba(121, 88, 72, 0.19); --mesh-opacity: 0.34; animation-duration: 16s; } body.layered-bg.layered-bg--vivid::after { filter: blur(12px) saturate(1.12); animation-duration: 12s; } [data-theme="dark"] body.layered-bg { --layer-base: #14100d; --layer-a: rgba(242, 171, 143, 0.16); --layer-b: rgba(217, 162, 102, 0.14); --layer-c: rgba(132, 102, 86, 0.16); --layer-d: rgba(16, 14, 12, 0.58); --mesh-opacity: 0.1; } [data-theme="dark"] body.layered-bg::before { background: repeating-linear-gradient( -17deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 30px ); } [data-theme="dark"] body.layered-bg::after { background: radial-gradient(38vmax 38vmax at 22% 18%, rgba(242, 171, 143, 0.2), transparent 72%), radial-gradient(34vmax 34vmax at 84% 26%, rgba(217, 162, 102, 0.16), transparent 74%), radial-gradient(42vmax 42vmax at 50% 88%, rgba(140, 108, 92, 0.16), transparent 76%); } @keyframes layeredPan { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } 50% { background-position: 7% 4%, 93% 4%, 47% 96%, 0 0; } 100% { background-position: 13% 9%, 87% 8%, 43% 92%, 0 0; } } @keyframes meshDrift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 100% { transform: translate3d(-2.2%, -1.4%, 0) rotate(2.8deg); } } @keyframes orbFloat { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(1.2%, -1.1%, 0) scale(1.03); } 100% { transform: translate3d(-1.1%, 1.3%, 0) scale(0.985); } } @media (prefers-reduced-motion: reduce) { body.layered-bg, body.layered-bg::before, body.layered-bg::after { animation: none !important; } }