/* * Boton de favoritos de la tarjeta de producto. * * `woo-smart-wishlist` se puso en modo «solo icono» (opcion woosw_button_icon=icon) * para quitar el texto «Añadir a la lista de deseos», que envolvia en vertical sobre * la imagen. Pero entonces salen DOS corazones sobre la misma tarjeta: * * 1. `button.woosw-btn::before` -> \f004 en «Font Awesome 5 Free», que pinta el * TEMA, centrado en el boton de 40x40. Es el que encaja con el diseño. * 2. `span.woosw-btn-icon.woosw-icon-5` -> \e90d en la fuente `woosw`, del plugin, * 14x14 y descolocado 20 px a la derecha. * * Se esconde el del plugin. No se toca la opcion: sin ella el plugin vuelve a * imprimir el TEXTO, que es justo lo que el usuario pidio quitar. */ .woosw-btn.woosw-btn-has-icon .woosw-btn-icon { display: none !important; } /* * Los 20 px de desborde horizontal de la home a 390 px. * * QUIEN ERA, MEDIDO (no deducido). A 390 px `document.scrollWidth` daba 410 y * `clientWidth` 390. De los 570 elementos cuyo `rect` se sale de la ventana, * 567 estan RECORTADOS por un ancestro con `overflow-x` distinto de `visible` * (casi todos, el menu desplegable del movil) y no cuentan para el scroll. Los * que quedan sin recortar son las flechas del carrusel de productos: * * span.vamtam-nav-btn.vamtam-nav-btn-next -> x 350, ancho 60, right 410 * * 410 es EXACTAMENTE el `scrollWidth`: esa flecha es el desborde entero. (Los * tres `call-to-action` «Ver» de la seccion 6dd9762f, que se habian senalado * antes, dan `right` 395: estan por debajo de 410 y ademas van recortados, asi * que no son la causa.) * * POR QUE PASA. El tema saca las flechas MEDIO FUERA del carrusel a proposito: * elementor-all.css:1807 ... .vamtam-nav-btn-prev { left: -30px } * elementor-all.css:1813 ... .vamtam-nav-btn-next { right: -30px } * A 1440 px eso no desborda porque el contenedor va de 30 a 1410 y los 30 px * que sobresalen caben justo en los margenes laterales (medido: right = 1440, * desborde 0). A 390 px no hay margen que los absorba y se salen. * * Solo se corrige por debajo de 768 px, y solo se anula el desplazamiento: las * flechas siguen ahi, del mismo tamano y pulsables, pegadas al borde del * carrusel en vez de medio fuera de la pantalla. * * ESPECIFICIDAD: el selector del tema son SEIS clases (0,6,0). Se repite igual * y se le antepone `body` -> (0,6,1), que gana sin `!important` y sin depender * del orden de carga (el minify de WP-Optimize reordena los ficheros). */ @media (max-width: 767px) { body .elementor-widget.vamtam-has-theme-widget-styles.vamtam-has-hr-layout.vamtam-has-nav .vamtam-nav-btn.vamtam-nav-btn-prev { left: 0; } body .elementor-widget.vamtam-has-theme-widget-styles.vamtam-has-hr-layout.vamtam-has-nav .vamtam-nav-btn.vamtam-nav-btn-next { right: 0; } } /* * Peso del NOMBRE DE PRODUCTO en las tarjetas del catalogo. * * Solo el PESO. La familia NO se toca a proposito: `na-tipografia.css` deja * `.woocommerce-loop-product__title` deliberadamente fuera de la capa de * encabezados (ver su nota de la linea ~239) porque el kit le asigna su propia * tipografia («Product Title»); pasar cientos de nombres de producto a una * fuente de display es un cambio de legibilidad que no esta aprobado. Aqui se * respeta esa familia y solo se sube el grosor a 700. * * 700 es un peso REAL de Nunito: se pide a Google Fonts en el lote * 300,400,600,700,800,900 (`includes/theme/na-tipografia.php`), asi que no lo * sintetiza el navegador. * * ESPECIFICIDAD — MEDIDA EN PRODUCCION (4-sep-2026), no estimada. * * El primer intento fue `body .woocommerce ul.products li.product * .woocommerce-loop-product__title` (0-4-3) y PERDIO. El competidor real es el * CSS que Elementor genera para el propio widget del catalogo: * * .elementor-element.elementor-element-1ef44f0c.elementor-wc-products * ul.products li.product .woocommerce-loop-product__title -> 0-6-2 * * que aplica `font-weight: var( --e-global-typography-589a7a7-font-weight )`, * de donde salia el 500 que se veia en pantalla. * * NO se copia esa cadena: `elementor-element-1ef44f0c` es un hash de widget y * los ids de Elementor NO COINCIDEN entre dev y produccion (clavarlo romperia * el estilo en el otro entorno sin dar ningun error). * * La salida es repetir una clase ESTABLE del widget (`.elementor-wc-products`) * hasta superar al competidor. Repetir una clase es una tecnica valida: suma * especificidad sin cambiar a que elementos casa el selector. * * .elementor-wc-products x3 + .products + .product + .woocommerce-loop-... -> 6 clases * ul + li + h2 -> 3 elementos * = 0-6-3, que gana a 0-6-2 (empatan en clases, decide el 3 > 2) * * Se conserva la rama de `.woocommerce ul.products` para el caso en que el * catalogo lo pinte la plantilla de WooCommerce y no el widget. * * POR QUE SI LLEVA `!important` (medido, no por reflejo). * Se escalo la especificidad DOS veces y se verifico en produccion que: * - la regla LLEGA al navegador (esta en el lote de wpo-minify servido), * - el selector de 0-6-3 CASA con el h2 real, * - y aun asi el peso computado seguia siendo 500. * La unica fuente que queda es CSS inline: el widget cuelga de un ancestro con * la clase `vamtam-has-theme-widget-styles`, o sea que el TEMA inyecta estilos * de widget en un `