. */ .xpro-woo-product-grid-content-sec p.xpro-woo-product-grid-category-wrapper{ margin:0 0 6px!important} /* H2 de la franja de confianza: el contenedor es flex en fila con wrap, asi que este hijo al 100% se lleva su propia linea encima de los distintivos. */ .pf-h2-confianza{flex:0 0 100%!important;max-width:100%!important;margin:0 0 4px!important} /* En movil la barra de anuncio solo muestra el primer mensaje. Va en una sola linea sin partirse, y antes se cortaba antes del importe. */ @media (max-width:600px){ .pf-announce__seg + .pf-announce__seg{display:none!important} /* Y aun asi, el primer mensaje a 15 px mide 442 px y el hueco son 358. */ /* Ojo: .xpro-theme-builder-header .elementor-widget-heading .elementor-heading-title ya fuerza 15px!important aqui mismo. Hacen falta las tres clases para ganarle. */ .xpro-theme-builder-header .pf-announce .elementor-heading-title, .pf-announce .elementor-heading-title{ font-size:11px!important;letter-spacing:.03em!important} } /* --------------------------------------------------------------------------- Descripcion breve bajo el nombre, en las tarjetas del catalogo. La inserta pf_tarjeta_descripcion_rejilla() (profit-shop.php) a partir de la descripcion corta del producto. Se recorta a tres lineas para que las tarjetas de una misma fila midan parecido; el texto entero sigue en el HTML y en la ficha. --------------------------------------------------------------------------- */ .xpro-woo-product-grid-content-sec .pf-tarjeta__desc{ margin:2px 0 10px!important; font-size:13px; line-height:1.45; color:#5b5b5b; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; } @media (max-width:600px){ .xpro-woo-product-grid-content-sec .pf-tarjeta__desc{ font-size:12px; line-height:1.4; margin:2px 0 8px!important; } } /* --------------------------------------------------------------------------- La foto de la tarjeta lleva a la ficha del producto. Xpro ya envuelve las dos imagenes en el mismo que el titulo, pero pinta encima .xpro-woo-product-img-section::after: una capa con inset 0 y z-index 1, de fondo transparente (#fff0), pensada para oscurecer la foto al pasar el raton en los layouts 2, 3, 5, 6, 7 y 10. Este catalogo usa el layout 1, asi que esa capa no pinta nada... pero se comia todos los clics: el pseudo-elemento pertenece a .xpro-woo-product-img-section, que esta FUERA del enlace, asi que el clic no encontraba ningun encima y no pasaba nada. Con pointer-events:none el clic atraviesa la capa y llega a la imagen, que si esta dentro del enlace. El :hover de la seccion no depende de ella, asi que el cambio de foto al pasar el raton sigue igual. --------------------------------------------------------------------------- */ .xpro-woo-product-grid-item .xpro-woo-product-img-section::after{ pointer-events:none; } .xpro-woo-product-grid-item .xpro-woo-product-img-section, .xpro-woo-product-grid-item .xpro-woo-product-grid-title-wrapper, .xpro-woo-product-grid-item .xpro-woo-product-grid-img img{ cursor:pointer; } /* Tabla de dos columnas (Linea Ortomolecular). El min-width de 560 px de .pf-table esta pensado para las tablas de 3 y 4 columnas; con dos sobra y obligaba a arrastrar la tabla de lado en el telefono. */ .pf-table.pf-table--2col table{min-width:0} /* =========================================================================== AJUSTES RESPONSIVE — móvil y tableta Añadido el 16/09/2026. Todo vive aquí y no en cada widget de Elementor, para que se pueda revisar y revertir de un solo sitio. Medido antes de tocar nada, en 390 px: no había desbordamiento horizontal, el relleno lateral ya era de 16 px, los botones ya median 48-56 px de alto y el acordeón ya ocupaba el 100 % con pestañas de 68 px. Eso NO se toca. Lo que sí faltaba está abajo. =========================================================================== */ /* --- Titular principal en móvil ------------------------------------------ El H1 salía a 32 px en todas las páginas y partía palabras en pantallas de 390 px. 26 px entra en el rango pedido (24-28) y mantiene la jerarquía frente al H2, que ya estaba en 25 px y se deja como está. */ @media (max-width: 767px) { h1.elementor-heading-title, .elementor-widget-heading h1.elementor-heading-title, h1.entry-title, h1.product_title { font-size: 26px !important; line-height: 1.22 !important; } } /* --- Botones de llamada a la acción en móvil ------------------------------ En el banner los botones quedaban pegados a la izquierda y con anchos distintos (199 y 214 px). A ancho completo se centran solos, se alinean entre sí y el área de toque pasa de cómoda a evidente. */ @media (max-width: 767px) { .elementor-widget-button { width: 100% !important; max-width: 100% !important; } .elementor-widget-button .elementor-button { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 48px; } /* La cabecera, el pie y las tarjetas del catálogo conservan su ancho: ahí el botón ya estaba resuelto y estirarlo rompería la maqueta. */ .xpro-theme-builder-header .elementor-widget-button, .xpro-theme-builder-footer .elementor-widget-button, .cbp-item .elementor-widget-button { width: auto !important; } .xpro-theme-builder-header .elementor-widget-button .elementor-button, .xpro-theme-builder-footer .elementor-widget-button .elementor-button, .cbp-item .elementor-widget-button .elementor-button { width: auto; } } /* --- Menú móvil: cajón oscuro -------------------------------------------- ElementsKit abría el cajón con fondo transparente y enlaces en negro sobre la propia página, que se transparentaba detrás. Se pinta en #181818 y todo el texto de dentro pasa a blanco, incluido el megamenú de líneas que va anidado en el mismo cajón. 1024 px es el punto donde ElementsKit convierte el menú en hamburguesa (ekit_menu_responsive_tablet). Por encima de ese ancho no aplica nada de esto y el menú de escritorio queda intacto. */ @media (max-width: 1024px) { .elementskit-menu-offcanvas-elements, .elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel { background-color: #181818 !important; } .elementskit-menu-offcanvas-elements a.ekit-menu-nav-link, .elementskit-menu-offcanvas-elements .elementskit-menu-close, .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel .elementor-heading-title, .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel .elementor-icon-box-title, .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel .elementor-icon-box-description, .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel p, .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel a { color: #FFFFFF !important; } .elementskit-menu-offcanvas-elements a.ekit-menu-nav-link svg, .elementskit-menu-offcanvas-elements .elementskit-menu-close svg { fill: #FFFFFF !important; color: #FFFFFF !important; } /* El megamenú trae su propio fondo claro; dentro del cajón estorba. */ .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel, .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel .e-con, .elementskit-menu-offcanvas-elements .elementskit-megamenu-panel .e-con-inner { background-color: transparent !important; } /* Una línea de separación tenue para que se distingan los enlaces. */ .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li + li { border-top: 1px solid rgba(255, 255, 255, .12); } /* Área de toque holgada en cada entrada del menú. */ .elementskit-menu-offcanvas-elements a.ekit-menu-nav-link { min-height: 48px; display: flex; align-items: center; } } /* --- Áreas de toque en móvil -------------------------------------------- Medido en la ficha de PROFIT C a 390 px: los selectores de gramaje salían a 35 px de alto, y elegir la presentación es justo el toque que decide la compra. La hamburguesa y la X del menú andaban en 29-30 px. Se agranda el ÁREA, no el icono ni la letra. */ @media (max-width: 767px) { /* El plugin escribe min-height:24px EN LINEA y su CSS usa dos clases, asi que hay que igualar o superar esa especificidad: con una sola clase el !important perdia y el selector salia a 27 px, mas pequenio todavia. */ .cfvsw-swatches-container .cfvsw-swatches-option, .woocommerce div.product .cfvsw-swatches-container .cfvsw-swatches-option { min-height: 44px !important; min-width: 44px !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; } .elementskit-menu-hamburger, .elementskit-menu-offcanvas-elements .elementskit-menu-close { min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; } } /* ---------- Tablas comparativas en movil ---------- La tabla base lleva min-width:560px, asi que dentro de un envoltorio de 342 px obligaba a arrastrar de lado para leerla. Con 2 o 3 columnas cabe entera si se suelta ese minimo y se ajusta la tipografia. Las de 4 columnas (Inicio y Suplementos) siguen desplazandose: apretarlas a 85 px por columna seria ilegible. :has() elige cual es cual; si el navegador no lo soporta, la tabla de 4 columnas se estrecha pero no se rompe. */ @media (max-width: 600px) { .pf-table table { min-width: 0; font-size: 12.5px; } .pf-table th, .pf-table td { padding: 10px 8px; } .pf-table thead th { font-size: 10px; letter-spacing: .04em; } .pf-table table:has(thead th:nth-child(4)) { min-width: 520px; } } /* ---------- Mi cuenta / checkout: areas de toque ---------- El ojo de "mostrar contrasenia" mide 13x13 px. En vez de agrandar el icono (quedaria enorme junto al campo) se le cuelga un ::before invisible de 44x44 (el ::after lo usa WooCommerce para dibujar el ojo con su tipografia de iconos; pisarlo lo dejaba en 0x0): el boton ya es position:absolute, asi que sirve de bloque contenedor y el area de toque crece sin que cambie nada a la vista. La casilla "Recuerdame" se pulsa por su etiqueta, que medía 26 px de alto. */ @media (max-width: 767px) { .woocommerce .password-input .show-password-input::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .woocommerce-form__label-for-checkbox { display: flex !important; align-items: center; min-height: 44px; gap: 8px; } .woocommerce-form__label-for-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; } } /* ---------- Carrito en movil: areas de toque ---------- La equis de "quitar" mide 26x26 y el campo de cantidad 74x35. La equis se dibuja con ::before (tipografia de iconos), asi que el area invisible va en ::after; al reves borraria el icono, como paso con el ojo de la contrasenia. */ @media (max-width: 767px) { .woocommerce a.remove::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .woocommerce .quantity .qty, .woocommerce table.cart td.product-quantity .qty { min-height: 44px; } } /* ---------- Listas desplegables en movil ---------- El desplegable de /contacto/ media 43 px: un pelo por debajo del minimo comodo de 44. Se iguala en todo el sitio sin tocar su aspecto. */ @media (max-width: 767px) { select, .elementor-field-type-select select, .woocommerce select, .wpforms-field select, .mf-input select { min-height: 44px; } } /* ---------- Casilla de consentimiento (Fluent Forms) ---------- La etiqueta, que es lo que se pulsa, medía 39 px de alto. */ @media (max-width: 767px) { .ff-el-form-check-label { display: flex !important; align-items: center; gap: 8px; min-height: 44px; } .ff-el-form-check-label input[type="checkbox"] { flex: 0 0 auto; margin: 0; } } /* ---------- Tableta (768-1024): escalon intermedio ---------- Medido: H1 58 px en escritorio, 40 en tableta, 26 en movil; H2 30 y 30 y 25. El H2 no bajaba nada entre escritorio y tableta, y el H1 de 40 px pesaba demasiado en 768. Este escalon deja la progresion 58 / 34 / 26 y 30 / 27 / 25. El menu hamburguesa aparece hasta 1024 px, asi que su area de toque de 44 px tiene que llegar hasta ahi y no cortarse en 767. */ @media (min-width: 768px) and (max-width: 1024px) { h1.elementor-heading-title, .elementor-widget-heading h1.elementor-heading-title, h1.entry-title, h1.product_title { font-size: 34px !important; line-height: 1.2 !important; } h2.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title { font-size: 27px !important; line-height: 1.25 !important; } } @media (min-width: 768px) and (max-width: 1024px) { .elementskit-menu-hamburger, .elementskit-menu-offcanvas-elements .elementskit-menu-close { min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; } } .pf-hero{isolation:isolate} /* El overlay de Elementor se dibuja en ::before del contenedor. El ajuste de modo de fusion del panel no llego a salir en el CSS generado (medido: mix-blend-mode normal), asi que se fuerza aqui. */ .pf-hero::before{mix-blend-mode:multiply!important} /* ::after era una franja verde inclinada decorativa; sobre una foto sobraba. Ahora es el velo que oscurece SOLO el lado del texto. Sin el, el blanco caia a 4,3:1 sobre el ventanal y la norma pide 4,5. Con el: 7,3:1. */ .pf-hero::after{content:"";position:absolute;inset:0;right:auto;top:auto;width:100%;height:100%;left:0;background:linear-gradient(90deg,rgba(24,24,24,.5) 0%,rgba(24,24,24,0) 62%);transform:none;pointer-events:none;z-index:0} @media (max-width:767px){.pf-hero::after{background:linear-gradient(180deg,rgba(24,24,24,.55) 0%,rgba(24,24,24,.2) 55%,rgba(24,24,24,.5) 100%)}} /* ---------- Hero: colores de texto sobre la foto ---------- Medido sobre la imagen ya compuesta con overlay y velo: el gris #B0B0B0 del parrafo caia a 3,4:1 y el verde #00a100 de los contadores a 2,8:1. Los dos funcionaban sobre el fondo plano #212121 de antes, no sobre una foto. Con estos valores: parrafo 5,5:1 y numeros 5,1:1. El verde claro no es inventado, es --pf-green-300, que ya estaba en la paleta. */ .pf-hero .elementor-widget-text-editor, .pf-hero .elementor-widget-text-editor p{color:#E0E0E0!important} .pf-hero .elementor-counter-number, .pf-hero .elementor-counter-number-prefix, .pf-hero .elementor-counter-number-suffix{color:var(--pf-green-300)!important} /* ---------- Hero: panel derecho ---------- Era un recuadro opaco #2C2C2C pensado para un fondo plano; sobre la foto tapaba justo a la persona del gimnasio. Se vuelve transparente para que se vea la imagen limpia: sin fondo, sin borde y sin la etiqueta. El contenedor se deja en su sitio como espacio vacio para que la columna de texto conserve su ancho y el largo de linea del titular no se dispare. */ .pf-hero .elementor-element-90588df{background-color:transparent!important;border:0!important} .pf-hero .elementor-element-90588df .elementor-heading-title{display:none!important} /* En movil el texto ocupa todo el ancho, asi que un degradado de izquierda a derecha deja la mitad de cada linea sobre la zona menos oscura. El ajuste "angulo en movil" del panel de Elementor no llego al CSS generado (medido: seguia en 90deg), igual que paso con el modo de fusion. Se fuerza a vertical. */ @media (max-width:767px){ .pf-hero::before{background-image:linear-gradient(180deg,rgba(0,161,0,.7) 0%,rgba(24,24,24,.92) 100%)!important} } /* El antetitulo "Entrena duro. Recupera mejor." va en verde claro a 11 px, y a ese tamanio la norma pide 4,5:1. Con --pf-green-300 medía 3,7 / 3,8 / 4,2 en escritorio, tableta y movil. Al acortarse el hero en tableta la foto de detras cambio y el #8CE68C se quedaba en 4,32. Este da 5,1 / 4,8 / 5,9 sin salirse de la familia. Solo aplica dentro del hero. */ .pf-hero .elementor-element-96ccd1d .elementor-heading-title{color:#9CF09C!important} /* En escritorio el contenedor vacio sigue siendo util: sostiene la segunda columna y evita que el titular se estire a todo el ancho. Pero en tableta y movil los bloques se apilan, asi que alli eran 420 px de nada al final del hero. Medido: la seccion pasa de 1391 a 971 px en tableta y de 1374 a 954 en movil. */ @media (max-width:1024px){.pf-hero .elementor-element-90588df{display:none!important}} /* ---------- Hero adaptado a tableta y movil ---------- Al ocultar el panel derecho quedo un problema de herencia: la columna de texto tiene un ancho fijo de 366 px con flex-grow:0, asi que en tableta ocupaba la mitad de un hero de 705 px y la otra mitad quedaba vacia. Por eso los dos botones se apilaban (199+12+214 = 425 no cabe en 366) y los dos datos tambien. Con el ancho completo entran en linea y el hero se acorta. */ @media (max-width:1024px){ .pf-hero .elementor-element-ca8928c{ width:100%!important; max-width:100%!important; flex-basis:auto!important; } /* A 705 px de ancho el parrafo saldria a ~95 caracteres por linea, que se lee mal. Se limita a una medida comoda sin tocar el resto. */ .pf-hero .elementor-element-0f28024{max-width:58ch} } /* En movil los dos datos se apilaban porque cada contenedor iba al 100%. En dos columnas el hero baja lo suficiente para entrar en una pantalla. */ @media (max-width:767px){ .pf-hero .elementor-element-de897a7, .pf-hero .elementor-element-d31e999{ flex:1 1 0!important; width:auto!important; min-width:0!important; } .pf-hero .elementor-counter-number, .pf-hero .elementor-counter-number-prefix, .pf-hero .elementor-counter-number-suffix{font-size:44px!important} } /* ---------- Icono hamburguesa: arreglo de un error propio ---------- Al agrandar el area de toque a 44x44 se le puso display:flex al boton, y flex por defecto ordena en FILA: las tres barras del icono, que son hijas directas, pasaron a ponerse una al lado de la otra (medido: x = 9, 18 y 27) en vez de apiladas. De ahi el recuadro con dos rayitas sueltas. La direccion en columna las devuelve a su sitio. De paso se quita el borde gris que trae ElementsKit por defecto, porque los otros iconos de la cabecera (buscar, cuenta, carrito) no lo llevan, y se pasa la barra de rgba(0,0,0,.5) al negro de la marca para que pesen igual que sus vecinos. */ @media (max-width:1024px){ .elementskit-menu-hamburger{ flex-direction:column!important; gap:5px; border:0!important; padding:0!important; background:transparent!important; } .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{ width:24px!important; height:2px!important; margin:0!important; border-radius:1px; background-color:var(--pf-black)!important; } }