/* Commercial polish layer (safe overrides). Scope: only active when is present. */ body.prod-commercial { /* Fallbacks para páginas standalone que aún no cargan product_system.css. */ --bg: var(--prod-bg, #08111d); --panel: var(--prod-panel, #0d1728); --panel-soft: rgba(15, 23, 39, 0.84); --line: var(--prod-line, rgba(144, 161, 185, 0.22)); --ink: var(--prod-text, #f5f7fa); --muted: var(--prod-muted, #91a1b9); --accent: var(--prod-secondary, #f4b400); --pitch: var(--prod-primary, #2f7d32); color: var(--ink); font-family: var(--prod-font-ui, "Avenir Next", "Inter", "Segoe UI", sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; background: radial-gradient(circle at 14% -12%, rgba(47, 125, 50, 0.22), transparent 52%), radial-gradient(circle at 88% -6%, rgba(244, 180, 0, 0.18), transparent 46%), radial-gradient(circle at 70% 120%, rgba(34, 211, 238, 0.12), transparent 52%), linear-gradient(180deg, #02060d 0%, #08111d 58%, #050a13 100%) !important; background-attachment: fixed; } /* Mobile/performance: - `background-attachment: fixed` y `backdrop-filter` pueden ir a tirones en iOS/Android. - En pantallas táctiles priorizamos fluidez y batería. */ @media (hover: none), (pointer: coarse), (max-width: 820px) { body.prod-commercial { background-attachment: scroll; } body.prod-commercial .topbar, body.prod-commercial .hero, body.prod-commercial .panel, body.prod-commercial .card, body.prod-commercial .product-card { backdrop-filter: none; } } body.prod-commercial :focus-visible { outline: 2px solid rgba(244, 180, 0, 0.65); outline-offset: 3px; } body.prod-commercial a, body.prod-commercial button { transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease; } body.prod-commercial .topbar, body.prod-commercial .hero, body.prod-commercial .panel, body.prod-commercial .card, body.prod-commercial .product-card { backdrop-filter: blur(8px) saturate(1.14); } body.prod-commercial .module-tab:hover, body.prod-commercial .tab:hover, body.prod-commercial .button:hover, body.prod-commercial button:hover { border-color: rgba(244, 180, 0, 0.32); } body.prod-commercial .module-tab:hover, body.prod-commercial .button:hover { transform: translateY(-1px); } body.prod-commercial .product-card, body.prod-commercial .hero, body.prod-commercial .topbar { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32); } @media (prefers-reduced-motion: reduce) { body.prod-commercial a, body.prod-commercial button { transition: none; } body.prod-commercial .module-tab:hover, body.prod-commercial .button:hover { transform: none; } }