/* ============================================================ FONDO PREMIUM GLOBAL · Apple Mac Solutions Atmósfera cinematográfica oscura + oro (curvas metálicas, circuitos, glow ámbar). Capa fija al viewport, detrás de TODO el contenido, coherente en todas las secciones. Uso: cargar este archivo DESPUÉS del CSS de la página y añadir justo tras : Sistema por capas, reutilizable y liviano (1 imagen WebP). ============================================================ */ .page-bg{ position:fixed; inset:0; z-index:-10; pointer-events:none; overflow:hidden; background:#07070a; /* base/fallback */ contain:strict; } /* Capa 1 — imagen cinematográfica (curvas metálicas + filo dorado) con deriva Ken Burns muy lenta para dar profundidad viva */ .page-bg::before{ content:""; position:absolute; inset:0; background:url(../img/bg-premium.webp) center center / cover no-repeat; transform:scale(1.05) translateZ(0); /* base >1 evita que se vean bordes al derivar */ will-change:transform; animation:bgDrift 46s ease-in-out infinite alternate; } @keyframes bgDrift{ from{ transform:scale(1.05) translate3d(0,0,0) } to { transform:scale(1.10) translate3d(-1.6%,-1.3%,0) } } /* Capa 2 — scrim + viñeta para legibilidad. Más claro en el centro-derecha (zona naturalmente oscura de la imagen) y más oscuro hacia los bordes y la izquierda (donde vive el oro), así el texto siempre contrasta y el oro queda como acento, no como capa. */ .page-bg::after{ content:""; position:absolute; inset:0; background: radial-gradient(135% 105% at 76% 44%, rgba(7,7,10,0) 0%, rgba(7,7,10,.42) 52%, rgba(7,7,10,.82) 100%), linear-gradient(180deg, rgba(7,7,10,.5) 0%, rgba(7,7,10,.08) 16%, rgba(7,7,10,.08) 66%, rgba(7,7,10,.72) 100%); } /* Capa 3 — vida dorada: glow que deriva (arriba-izq) + glow que pulsa (abajo-der, como la referencia) + destello diagonal que barre lento. Todo con opacidad baja para no saturar ni tapar el contenido. */ .page-bg__glow{ position:absolute; inset:0; width:auto; height:auto; left:0; top:0; /* glow inferior-derecha que respira */ background:radial-gradient(38% 42% at 88% 84%, rgba(212,175,55,.10), transparent 70%); animation:pgPulse 12s ease-in-out infinite alternate; } .page-bg__glow::before{ /* glow superior-izquierda que deriva */ content:""; position:absolute; left:-6%; top:16%; width:46%; height:54%; background:radial-gradient(closest-side, rgba(212,175,55,.14), transparent 72%); filter:blur(48px); will-change:transform,opacity; animation:pgGlow 18s ease-in-out infinite alternate; } .page-bg__glow::after{ /* destello dorado diagonal que cruza muy espaciado */ content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:26%; background:linear-gradient(90deg, transparent, rgba(240,220,160,.05) 42%, rgba(240,220,160,.11) 50%, rgba(240,220,160,.05) 58%, transparent); filter:blur(6px); will-change:transform,opacity; transform:rotate(9deg) translateX(-40vw); animation:pgSweep 17s ease-in-out infinite; } @keyframes pgGlow{ from{ transform:translate3d(0,0,0) scale(1); opacity:.5 } to { transform:translate3d(5%,-4%,0) scale(1.14); opacity:.82 } } @keyframes pgPulse{ from{opacity:.5} to{opacity:1} } @keyframes pgSweep{ 0%{ transform:rotate(9deg) translateX(-40vw); opacity:0 } 12%{ opacity:1 } 45%{ opacity:1 } 60%{ transform:rotate(9deg) translateX(135vw); opacity:0 } 100%{ transform:rotate(9deg) translateX(135vw); opacity:0 } } /* ---- Integración: dejar ver el fondo detrás del contenido ---- */ html body{ background:transparent !important; } .footer{ background:rgba(12,12,15,.72) !important; backdrop-filter:blur(4px); } #ams-bg{ opacity:.32; } /* atenúa partículas sobre la imagen (landing) */ .site-bg{ display:none !important; } /* oculta el fondo animado viejo (catálogo) */ /* ---- Móvil: imagen más oscura y liviana + scrim reforzado ---- */ @media (max-width:760px){ .page-bg::before{ background-image:url(../img/bg-premium-mobile.webp); animation:none; transform:scale(1) translateZ(0); } .page-bg__glow::after{ display:none; } /* sin destello en móvil (batería) */ .page-bg::after{ background: radial-gradient(150% 105% at 55% 40%, rgba(7,7,10,.12) 0%, rgba(7,7,10,.55) 58%, rgba(7,7,10,.86) 100%), linear-gradient(180deg, rgba(7,7,10,.62), rgba(7,7,10,.22) 18%, rgba(7,7,10,.22) 66%, rgba(7,7,10,.82)); } .page-bg__glow{ opacity:.5; } } @media (prefers-reduced-motion:reduce){ .page-bg::before, .page-bg__glow, .page-bg__glow::before, .page-bg__glow::after{ animation:none !important; } .page-bg::before{ transform:scale(1.05) translateZ(0); } } /* ---- Catálogo en tema claro: conserva su propio fondo claro ---- */ :root[data-theme="light"] .page-bg{ display:none; } :root[data-theme="light"] html body{ background:var(--bg) !important; }