/* ───────────────────────────────────────────────────────────── MOVA · Fondo minimalista con gradiente flotante Un lienzo grafito neutro sobre el que flotan dos manchas de color muy difuminadas. El tono cambia según la sección en la que esté el visitante, con una transición larga para que se sienta como una atmósfera y no como un cambio de página. ───────────────────────────────────────────────────────────── */ :root{ --grafito: #101013; /* base neutra, sin tinte de color */ --grafito-2: #0b0b0d; /* borde inferior, para dar profundidad */ --g1: 123, 47, 255; /* mancha superior (morado) */ --g2: 255, 45, 120; /* mancha inferior (rosa) */ --g-fuerza: 1; /* intensidad global */ } /* El color base vive en , no en . Si lo dejamos en body, su fondo opaco tapa la capa del gradiente (z-index:-1) y no se ve nada. */ html{ background: var(--grafito); } body{ background: transparent !important; } /* El lienzo va detrás de todo y no intercepta clics */ #fondoMova{ position: fixed; inset: -20vh -20vw; /* desborda para que las manchas nunca corten */ z-index: -1; pointer-events: none; background: radial-gradient(46vw 46vw at var(--x1, 22%) var(--y1, 18%), rgba(var(--g1), calc(.30 * var(--g-fuerza))) 0%, rgba(var(--g1), 0) 62%), radial-gradient(52vw 52vw at var(--x2, 82%) var(--y2, 76%), rgba(var(--g2), calc(.24 * var(--g-fuerza))) 0%, rgba(var(--g2), 0) 60%), linear-gradient(180deg, var(--grafito) 0%, var(--grafito-2) 100%); /* La transición larga es lo que hace que se sienta "flotante" */ transition: --g1 1.6s ease, --g2 1.6s ease; animation: flotar 26s ease-in-out infinite alternate; will-change: transform; } /* Deriva lenta: sin esto el gradiente se ve estático y plano */ @keyframes flotar{ 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); } } /* Los colores se interpolan de verdad solo si el navegador sabe que son colores. Sin esto, el cambio sería un salto seco. */ @property --g1 { syntax: '#'; inherits: true; initial-value: 123, 47, 255; } @property --g2 { syntax: '#'; inherits: true; initial-value: 255, 45, 120; } /* Respeta a quien pidió menos movimiento en su sistema */ @media (prefers-reduced-motion: reduce){ #fondoMova{ animation: none; transition: none; } } /* En móvil bajamos la intensidad: pantalla pequeña, menos aire */ @media (max-width: 768px){ :root{ --g-fuerza: .8; } } /* ───────────────────────────────────────────────────────────── Dejar pasar el fondo El sitio alternaba franjas #101013 / #13132A sección por sección. Con un gradiente flotante detrás, esas franjas lo tapaban por completo. Las volvemos transparentes: una sola atmósfera continua en lugar de bandas. Eso es lo minimalista. ───────────────────────────────────────────────────────────── */ #hero, #configurador, #beneficios, #proceso, #galeria, #comparador, #testimonios, #faq, #logo-acrilico, #stats, .how-section, .tipos-section{ background-color: transparent !important; } /* Estos dos traían un velo propio que se recortaba como un rectángulo visible sobre el gradiente. Fuera: la atmósfera debe ser continua. */ #logo-acrilico, #stats{ background-image: none !important; } /* Separación entre secciones: antes la daba el cambio de color. Ahora una línea de un pixel, casi invisible pero suficiente. */ #configurador, #proceso, #comparador, #stats, .how-section, .tipos-section{ border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); } /* Las tarjetas pasan a ser vidrio: se sigue leyendo el gradiente por detrás y el contenido no pierde contraste. */ .showcase-card, .gal-item, .testi-card, .faq-item, .comp-card, .benefit-card, .proceso-card, .product-card{ background-color: rgba(26, 26, 53, .55) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* El footer sí cierra la página: se queda sólido. */ footer{ background-color: #0b0b0d !important; }