/* ========================================================= DEPORTES JIMMY — EL CELULAR, LIGERO (v11.18.0) --------------------------------------------------------- Un solo archivo con TODO lo que se apaga en pantallas táctiles, y va cargado el último para que siempre gane. Se hizo así —en su propio archivo, no repartido por dentro de home.css, hero.css y alive.css— por una razón práctica: cuando dentro de seis meses alguien se pregunte "¿por qué en el celular no se ve tal efecto?", la respuesta tiene que estar en UN sitio y no en cinco. Y si algún día se quiere recuperar alguno, se borra la regla y ya. --------------------------------------------------------- POR QUÉ SE QUITAN, Y NO ES "PORQUE SÍ" El teléfono se quejaba justo donde más se nota: los carruseles de la portada iban a tirones al arrastrarlos. Y no era el carrusel — era todo lo que estaba animándose ALREDEDOR mientras el dedo lo movía. El navegador tiene un solo hilo para pintar. Cada efecto que respira de fondo le roba fotogramas al gesto que el cliente está haciendo AHORA. En una computadora sobra potencia y no se nota; en un teléfono de gama media, sí. Lo que se apaga, de más caro a menos: 1. LOS DESENFOQUES QUE SE MUEVEN. `filter: blur()` sobre algo animado obliga a recalcular el desenfoque entero en CADA fotograma. Es, con diferencia, lo más caro que hay aquí. 2. `backdrop-filter`. Peor todavía en un sitio: encima de un carrusel que se desplaza, porque obliga a releer lo que hay detrás mientras eso se mueve. Todos los que había ya tenían un fondo sólido debajo, así que quitarlo no deja nada ilegible — solo menos vidrio. 3. LAS PARTÍCULAS. Nueve puntitos animados por sección, en cinco secciones, corriendo para siempre. De día, con la mano encima, no se ven; la batería sí los nota. 4. `will-change` EN CADA LETRA. Los títulos entran letra por letra con un desenfoque, y cada letra pedía su propia capa en memoria. En un título largo son cuarenta capas para un efecto de medio segundo. ⚠️ NO SE APAGA TODO. Las entradas siguen ahí, con opacidad y desplazamiento, que son las dos cosas que un teléfono mueve gratis. La portada sigue viva; lo que se va es lo que costaba caro y casi no se veía. ========================================================= */ @media (max-width: 900px), (pointer: coarse) { /* --------------------------------------------------------- 1. LAS PARTÍCULAS — FUERA --------------------------------------------------------- Están en el hero, en Hombre/Mujer, en el banner de la liga, en los reels y en la portada de la tienda. Se apagan las cinco de un tiro. `display:none` y no `opacity:0`: con opacidad cero el navegador las sigue animando y pintando, invisibles pero cobrando igual. Ocultas de verdad, dejan de existir. */ .dj-particles, .dj-particle { display: none !important; } /* --------------------------------------------------------- 2. EL FUEGO DE "LAS ESTRELLAS DE LA CASA" --------------------------------------------------------- Eran tres manchas con `blur(28px)` respirando a la vez. El desenfoque es lo caro, no la mancha: se quita el desenfoque y la animación, y quedan los degradados quietos. No se apaga entero a propósito — sin nada, esa sección queda un rectángulo negro plano. Con las manchas quietas sigue habiendo lumbre detrás del producto, que es para lo único que estaban. */ .dj-star__llama { animation: none !important; filter: none !important; opacity: .34; } .dj-star__llama--3, .dj-star__chispa { display: none !important; } /* --------------------------------------------------------- 3. LOS TÍTULOS: ENTRAN, PERO SIN DESENFOQUE --------------------------------------------------------- Se conserva la aparición (la opacidad), que es lo que se ve. Se va el desenfoque por letra y, sobre todo, el `will-change: filter` que pedía una capa de memoria por cada letra de cada título de la página. */ .dj-word__i, .dj-split.is-in .dj-word__i { filter: none !important; will-change: opacity; } /* --------------------------------------------------------- 4. EL VIDRIO ESMERILADO — FUERA --------------------------------------------------------- Los cuatro sitios donde estaba ya tenían un fondo sólido debajo, así que no se pierde legibilidad: se pierde el efecto de vidrio y se gana el arrastre del carrusel. El de las flechas del carrusel es el más importante de los cuatro: estaba ENCIMA de lo que se desplaza, que es el peor sitio posible para poner un backdrop-filter. */ .dj-carousel__arrow, .dj-reel__mute, .dj-reel__icon, .dj-shipping-banner--photo .dj-shipping-banner__inner, [class*="dj-"][style*="backdrop"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* La píldora del banner de envío perdía contraste al irse el vidrio (venía de un fondo al 28%): se compensa con algo más de fondo sólido, no con el efecto. */ .dj-shipping-banner--photo .dj-shipping-banner__inner { background: rgba(0, 0, 0, .48); } /* --------------------------------------------------------- 5. NADA DE CAPAS RESERVADAS "POR SI ACASO" --------------------------------------------------------- `will-change` reserva memoria de video por adelantado. Puesto en pocos elementos ayuda; puesto en muchos, el teléfono se queda sin memoria de sobra justo cuando hay que mover el carrusel — que es el momento en que sí hacía falta. */ .dj-reveal, .dj-depth, .dj-tilt { will-change: auto !important; } } /* ========================================================= Y SI EL SISTEMA PIDE MENOS MOVIMIENTO, EN TODAS PARTES --------------------------------------------------------- Esto no es rendimiento, es respeto: quien lo activó suele hacerlo porque el movimiento le marea. Vale para computadora también. ========================================================= */ @media (prefers-reduced-motion: reduce) { .dj-particles, .dj-particle { display: none !important; } .dj-star__llama { animation: none !important; } }