/* * Custom code goes here. * A template should always ship with an empty custom.css */ /* === Owl v1 base (como la demo) === */ .owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden} .owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)} .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .owl-carousel .owl-item img{display:block;width:100%} .owl-carousel .owl-nav.disabled,.owl-carousel .owl-dots.disabled{display:none} .owl-carousel .owl-nav .owl-prev{left:-5px} .owl-carousel .owl-nav .owl-next{right:-5px} .owl-carousel .owl-nav .owl-prev,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-dot{cursor:pointer;user-select:none} .owl-carousel.owl-loaded{display:block} .owl-carousel.owl-loading{opacity:0;display:block} .owl-carousel.owl-hidden{opacity:0} .owl-carousel.owl-refresh .owl-item{visibility:hidden} .owl-carousel.owl-drag .owl-item{user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} .no-js .owl-carousel{display:block} .owl-height{transition:height 500ms ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity 400ms ease} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000} @media (max-width:767px){ .owl-carousel .owl-nav .owl-prev{left:3px} .owl-carousel .owl-nav .owl-next{right:3px} } /* Wrapper con flex como en la demo (no afecta al flujo horizontal gracias a float:left) */ .owl-carousel .owl-wrapper{ display:flex!important; flex-wrap:wrap; position:relative; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .owl-carousel .owl-wrapper:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0 } .owl-carousel .owl-wrapper-outer{ overflow-x:clip; position:relative; float:left; width:100%; padding:0 } /* ===== Flechas carrusel destacados (igual que la demo) ===== */ /* Estado base para cualquier barra de navegacion (products, testimonials, etc.) */ .customNavigation { position: absolute; z-index: 9; width: 100%; top: 58%; direction: ltr!important; right: 0; left: auto; opacity: 0; opacity: 0; transition: opacity .25s ease; } /* contenedor de navegacion dentro del bloque de productos */ .products .customNavigation { position: absolute; z-index: 9; width: 100%; top: 48%; left: 0; right: 0; } /* mostrar flechas cuando: - se hace hover sobre el carrusel de productos - o se hace hover sobre el bloque de testimonios - o se hace hover sobre otros sliders del tema - o se pasa por encima de la propia barra de navegacion */ .products:hover .customNavigation, .testimonial-block-part:hover .customNavigation, .tmblog-latest:hover .customNavigation, #tminstagramblock:hover .customNavigation, .product-accessories:hover .customNavigation, .productscategory-products:hover .customNavigation, .customNavigation:hover { opacity: 1; } /* reglas adicionales por si el carrusel de productos usa estos ids/clases */ #feature-carousel:hover ~ .customNavigation, .cp-carousel:hover ~ .customNavigation { opacity: 1; } /* ===== Botones base (tal cual la demo) ===== */ .customNavigation i { color: #222 !important; cursor: pointer; font-size: 0; font-weight: 500; height: 38px; line-height: 32px; overflow: hidden; padding: 0; position: absolute; text-align: center; width: 38px; background: transparent; border-radius: 0; font-style: unset; box-shadow: 0 0 16px 0 rgba(0,0,0,.11); } .customNavigation i.prev { background: #fff; border-radius: 50%; right: auto; left: -5px; } .customNavigation i.next { background: #fff; border-radius: 50%; right: -5px; } /* posiciones especiales que usa el tema para otros sliders */ .tmcategorylist .customNavigation i.prev, .testimonial-block-part .customNavigation i.prev, #tminstagramblock .btn.prev.instagram_prev, .special-products .customNavigation i.prev, .btn.prev.accessories_prev { left: -20px; } .tmcategorylist .customNavigation i.next, .testimonial-block-part .customNavigation i.next, #tminstagramblock .btn.next.instagram_next, .special-products .customNavigation i.next, .btn.next.accessories_next { right: -20px; } .testimonial-block-part .customNavigation i.prev, .testimonial-block-part .customNavigation i.next { display: block; } /* flecha izquierda, igual que en la demo (con mask + data URI) */ .customNavigation i.prev::before { content: ''; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDMxLjU2IDc2Mi4wOCI+PHBhdGggZD0iTTMwLjEsMzUxLjE5LDEzNy4yOSwyNDRxMjUuNjEtMjUuNjIsNTEuOTQtNTEuOTNDMjQyLjM4LDEzOSwyOTcuMzQsODQsMzUxLjE4LDMwYzguNjQtOS4xNSwzMS4zNC0zMyw2NS41NS0yOS43YTcwLjYsNzAuNiwwLDAsMSw2NC44Miw3M2MtLjc0LDI3LjctMTguNzcsNDYtMjYuNTMsNTMuODNsLS4yMS4yMWMtNDAuMTksNDAtODAuOTEsODAuNzEtMTIwLjI4LDEyMC4wOEwzMjcsMjU0LjkzYy0xNy4wNywxNy4xNi0zNS41NSwzNS42Ni01NSw1NS4xMyw1Mi42NSwwLDEwNy44OSwwLDE2MS41MywwbDk0LjkxLDBoMTE4LjNjMTQ3LjU5LDAsMzAwLjIxLDAsNDMxLjY4LS4xLDMtLjA3LDcuMTQtLjE2LDEyLC4wOSw4OS41NSwwLDE3Ny4xNywwLDI1Ny0uMDksMTIuNzMtLjMsNDYuMTYtMSw2OCwyNi4yOGw4LjM3LDEwLjUzVjM0OWE3MC40MSw3MC40MSwwLDAsMS0xNC41MSw4My42N2MtMTguNTQsMTcuOS00Mi4yLDE5LjA5LTUxLjE5LDE5LjU0SDg3Mi44NmMtMTkyLjM5LDAtNDA5LjQsMC02MDAuODUtLjA5LDE5Ljk0LDE5LjkzLDQwLjYsNDAuNTcsNjIuNzIsNjIuNjJxMzEuMzUsMzEuMzUsNjIuMiw2Mi4xNCwzMC4zLDMwLjI3LDYwLjQsNjAuMzZsMS40LDEuNDFjMjAuODcsMjIuMTIsMjMuOTMsNDMuNDMsMjIuOCw1Ny40Ni0yLjE1LDM2LjA5LTMyLjEzLDY1LjA3LTY4LjMyLDY2aC0yLjY1Yy0zMCwwLTQ5LjEtMTkuNDUtNTkuMjctMjkuODNsLTIuMzktMi4zOUMyNjIuOTMsNjQ0LjEsMTc1LjgyLDU1Nyw5MS41Nyw0NzIuNzNMMCwzODEuMTZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8+PC9zdmc+); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDMxLjU2IDc2Mi4wOCI+PHBhdGggZD0iTTMwLjEsMzUxLjE5LDEzNy4yOSwyNDRxMjUuNjEtMjUuNjIsNTEuOTQtNTEuOTNDMjQyLjM4LDEzOSwyOTcuMzQsODQsMzUxLjE4LDMwYzguNjQtOS4xNSwzMS4zNC0zMyw2NS41NS0yOS43YTcwLjYsNzAuNiwwLDAsMSw2NC44Miw3M2MtLjc0LDI3LjctMTguNzcsNDYtMjYuNTMsNTMuODNsLS4yMS4yMWMtNDAuMTksNDAtODAuOTEsODAuNzEtMTIwLjI4LDEyMC4wOEwzMjcsMjU0LjkzYy0xNy4wNywxNy4xNi0zNS41NSwzNS42Ni01NSw1NS4xMyw1Mi42NSwwLDEwNy44OSwwLDE2MS41MywwbDk0LjkxLDBoMTE4LjNjMTQ3LjU5LDAsMzAwLjIxLDAsNDMxLjY4LS4xLDMtLjA3LDcuMTQtLjE2LDEyLC4wOSw4OS41NSwwLDE3Ny4xNywwLDI1Ny0uMDksMTIuNzMtLjMsNDYuMTYtMSw2OCwyNi4yOGw4LjM3LDEwLjUzVjM0OWE3MC40MSw3MC40MSwwLDAsMS0xNC41MSw4My42N2MtMTguNTQsMTcuOS00Mi4yLDE5LjA5LTUxLjE5LDE5LjU0SDg3Mi44NmMtMTkyLjM5LDAtNDA5LjQsMC02MDAuODUtLjA5LDE5Ljk0LDE5LjkzLDQwLjYsNDAuNTcsNjIuNzIsNjIuNjJxMzEuMzUsMzEuMzUsNjIuMiw2Mi4xNCwzMC4zLDMwLjI3LDYwLjQsNjAuMzZsMS40LDEuNDFjMjAuODcsMjIuMTIsMjMuOTMsNDMuNDMsMjIuOCw1Ny40Ni0yLjE1LDM2LjA5LTMyLjEzLDY1LjA3LTY4LjMyLDY2aC0yLjY1Yy0zMCwwLTQ5LjEtMTkuNDUtNTkuMjctMjkuODNsLTIuMzktMi4zOUMyNjIuOTMsNjQ0LjEsMTc1LjgyLDU1Nyw5MS41Nyw0NzIuNzNMMCwzODEuMTZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8+PC9zdmc+); mask-position: center; mask-repeat: no-repeat; background-color: #000; mask-size: 18px; font-size: 18px; width: 38px; height: 38px; display: block; -webkit-mask-size: 18px; } /* flecha derecha, igual que en la demo */ .customNavigation i.next::before { content: ''; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDMxLjU2IDc2Mi4wOCI+PHBhdGggZD0iTTE0MDEuNDYsMzUxLjE5LDEyOTQuMjcsMjQ0cS0yNS42MS0yNS42Mi01MS45NC01MS45M0MxMTg5LjE4LDEzOSwxMTM0LjIyLDg0LDEwODAuMzgsMzBjLTguNjQtOS4xNS0zMS4zNC0zMy02NS41NS0yOS43YTcwLjU4LDcwLjU4LDAsMCwwLTY0LjgyLDczYy43NCwyNy43LDE4Ljc3LDQ2LDI2LjUzLDUzLjgzbC4yMS4yMWM0MC4xOSw0MCw4MC45LDgwLjcxLDEyMC4yOCwxMjAuMDhsNy40OCw3LjQ4YzE3LjA4LDE3LjE2LDM1LjU2LDM1LjY2LDU1LDU1LjEzLTUyLjY1LDAtMTA3Ljg5LDAtMTYxLjU0LDBsLTk0LjksMEg3ODQuOGMtMTQ3LjU5LDAtMzAwLjIxLDAtNDMxLjY4LS4xLTMtLjA3LTcuMTQtLjE2LTEyLC4wOS04OS41NiwwLTE3Ny4xNywwLTI1Ny0uMDktMTIuNzMtLjMtNDYuMTctMS02Ny45NSwyNi4yOEw3LjgxLDM0Ni43OVYzNDlhNzAuNDEsNzAuNDEsMCwwLDAsMTQuNTEsODMuNjdjMTguNTQsMTcuOSw0Mi4yLDE5LjA5LDUxLjE5LDE5LjU0SDU1OC43YzE5Mi4zOCwwLDQwOS4zOSwwLDYwMC44NC0uMDktMTkuOTMsMTkuOTMtNDAuNTksNDAuNTctNjIuNzEsNjIuNjJxLTMxLjM1LDMxLjM1LTYyLjIsNjIuMTQtMzAuMywzMC4yNy02MC40LDYwLjM2bC0xLjQsMS40MUM5NTIsNjYwLjc0LDk0OC45LDY4Mi4wNSw5NTAsNjk2LjA4YzIuMTUsMzYuMDksMzIuMTQsNjUuMDcsNjguMzIsNjZIMTAyMWMzMCwwLDQ5LjEtMTkuNDUsNTkuMjctMjkuODNsMi4zOS0yLjM5Yzg2LTg1Ljc2LDE3My4wOC0xNzIuODgsMjU3LjMzLTI1Ny4xM2w5MS41Ny05MS41N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+PC9zdmc+); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDMxLjU2IDc2Mi4wOCI+PHBhdGggZD0iTTE0MDEuNDYsMzUxLjE5LDEyOTQuMjcsMjQ0cS0yNS42MS0yNS42Mi01MS45NC01MS45M0MxMTg5LjE4LDEzOSwxMTM0LjIyLDg0LDEwODAuMzgsMzBjLTguNjQtOS4xNS0zMS4zNC0zMy02NS41NS0yOS43YTcwLjU4LDcwLjU4LDAsMCwwLTY0LjgyLDczYy43NCwyNy43LDE4Ljc3LDQ2LDI2LjUzLDUzLjgzbC4yMS4yMWM0MC4xOSw0MCw4MC45LDgwLjcxLDEyMC4yOCwxMjAuMDhsNy40OCw3LjQ4YzE3LjA4LDE3LjE2LDM1LjU2LDM1LjY2LDU1LDU1LjEzLTUyLjY1LDAtMTA3Ljg5LDAtMTYxLjU0LDBsLTk0LjksMEg3ODQuOGMtMTQ3LjU5LDAtMzAwLjIxLDAtNDMxLjY4LS4xLTMtLjA3LTcuMTQtLjE2LTEyLC4wOS04OS41NiwwLTE3Ny4xNywwLTI1Ny0uMDktMTIuNzMtLjMtNDYuMTctMS02Ny45NSwyNi4yOEw3LjgxLDM0Ni43OVYzNDlhNzAuNDEsNzAuNDEsMCwwLDAsMTQuNTEsODMuNjdjMTguNTQsMTcuOSw0Mi4yLDE5LjA5LDUxLjE5LDE5LjU0SDU1OC43YzE5Mi4zOCwwLDQwOS4zOSwwLDYwMC44NC0uMDktMTkuOTMsMTkuOTMtNDAuNTksNDAuNTctNjIuNzEsNjIuNjJxLTMxLjM1LDMxLjM1LTYyLjIsNjIuMTQtMzAuMywzMC4yNy02MC40LDYwLjM2bC0xLjQsMS40MUM5NTIsNjYwLjc0LDk0OC45LDY4Mi4wNSw5NTAsNjk2LjA4YzIuMTUsMzYuMDksMzIuMTQsNjUuMDcsNjguMzIsNjZIMTAyMWMzMCwwLDQ5LjEtMTkuNDUsNTkuMjctMjkuODNsMi4zOS0yLjM5Yzg2LTg1Ljc2LDE3My4wOC0xNzIuODgsMjU3LjMzLTI1Ny4xM2w5MS41Ny05MS41N1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+PC9zdmc+); mask-position: center; mask-repeat: no-repeat; background-color: #000; mask-size: 18px; font-size: 18px; width: 38px; height: 38px; display: block; -webkit-mask-size: 18px; } .customNavigation i.next:hover::before, .customNavigation i.prev:hover::before { color: #fff; } /* ===== TESTIMONIOS: flechas centradas verticalmente ===== */ /* Posicion base en escritorio (rompemos los top:-24/-40/-36 del tema padre) */ #tmtestimonialcmsblock .customNavigation, #index #tmtestimonialcmsblock .customNavigation { position: absolute; z-index: 9; width: 100%; top: 50% !important; transform: translateY(-50%); left: 0; right: 0; } /* Aseguramos misma posicion en los breakpoints que usa el tema padre */ @media (max-width: 1199px) { #tmtestimonialcmsblock .customNavigation, #index #tmtestimonialcmsblock .customNavigation { top: 50% !important; transform: translateY(-50%); } } /* En movil: flechas siempre visibles y centradas */ @media (max-width: 767px) { .customNavigation { opacity: 1; } #tmtestimonialcmsblock .customNavigation, #index #tmtestimonialcmsblock .customNavigation { top: 50% !important; transform: translateY(-50%); } .tmcategorylist .customNavigation i.prev,.testimonial-block-part .customNavigation i.prev,#tminstagramblock .btn.prev.instagram_prev,.special-products .customNavigation i.prev,.btn.prev.accessories_prev { left: 0 } .tmcategorylist .customNavigation i.next,.testimonial-block-part .customNavigation i.next,#tminstagramblock .btn.next.instagram_next,.special-products .customNavigation i.next,.btn.next.accessories_next { right: 0 } } /*Banner rojoen movimiento*/ #cpcmsbanner5 .marquee .marquee_content .list-inline .offer-image1::before { content: ''; -webkit-mask-image: url(../img/megnor/Artboard-11-1.svg); mask-image: url(../img/megnor/Artboard-11-1.svg); mask-size: 22px; -webkit-mask-size: 22px; height: 24px; width: 24px; left: 0; top: -1px; position: absolute; background-color: #fff; mask-repeat: no-repeat; } #cpcmsbanner5 .marquee .marquee_content .list-inline .offer-image2::before { content: ''; -webkit-mask-image: url(../img/megnor/Artboard-1.svg); mask-image: url(../img/megnor/Artboard-1.svg); mask-size: 24px; -webkit-mask-size: 24px; height: 24px; width: 24px; left: 0; top: -4px; position: absolute; background-color: #fff; mask-repeat: no-repeat; } #cpcmsbanner5 .marquee .marquee_content .list-inline .offer-image3::before { content: ''; -webkit-mask-image: url(../img/megnor/Artboard-40-1.svg); mask-image: url(../img/megnor/Artboard-40-1.svg); mask-size: 28px; -webkit-mask-size: 28px; height: 26px; width: 28px; left: 0; top: -6px; position: absolute; background-color: #fff; mask-repeat: no-repeat; } /* Ocultar comparador y lista de deseos del header */ .header-top .head-compare, .header-top .head-wishlist { display: none !important; } /* ============================================================ Reunion con la clienta del 25/09/2026. Gecko Studio. ============================================================ */ /* 1. Paginas de categoria que tienen subcategorias: no se muestra la foto de la categoria padre (solo las miniaturas de las hijas) ni el titulo "Subcategorias". En una categoria sin hijas la portada se sigue viendo. */ #content-wrapper:has(#subcategories) .block-category .category-cover { display: none; } #subcategories .subcategory-heading { display: none; } /* 2. Ficha de producto: WhatsApp sustituye a Pinterest en los botones de compartir. El tema no trae icono de WhatsApp en assets/img/megnor, asi que va embebido como data URI. El
  • lo pinta el override de ps_sharebuttons en este mismo tema hijo. */ .social-sharing li.whatsapp { background: #25D366; } .whatsapp.icon-gray::after { content: ""; background-image: url("data:image/svg+xml,"); } /* 3. Portada, tarjeta "Peluqueria canina" (cp_cmsbanner6): debajo del fijo de cada tienda va su movil de WhatsApp, en su propia linea. El icono va como mascara para poder pintarlo del verde de WhatsApp. */ #cpcmsbanner6_block1 a.shop-tel.shop-wa { display: flex; margin-top: 6px; } #cpcmsbanner6_block1 .shop-wa .wa-ico { flex: 0 0 18px; width: 18px; height: 18px; background-color: currentColor; /* mismo negro que el icono del telefono */ -webkit-mask: url("data:image/svg+xml,") no-repeat center / contain; mask: url("data:image/svg+xml,") no-repeat center / contain; } /* ============================================================ 4. Boton flotante de WhatsApp con la chica de Cora. Gecko Studio, 25/09/2026; mascota cambiada el 29/09/2026. Misma estructura, posicion y comportamiento de siempre: solo cambia la capa de mascota, que antes era el gato y ahora es la chica con el logo de Cora. La chica va DETRAS del circulo, que sigue siendo el elemento principal. Para retocar la composicion basta con estas variables. ============================================================ */ .wa-cora { --wa-circulo: 70px; /* diametro del circulo verde */ --wa-chica: 143px; /* ancho de la chica */ --wa-chica-top: -63px; /* cuanto sobresale por arriba */ --wa-chica-left: -80px; /* la chica va a la IZQUIERDA y el circulo queda a su derecha, con la mano encima */ --wa-abajo: 18px; /* separacion al borde inferior */ --wa-dcha: 18px; /* separacion al borde derecho */ position: fixed; right: max(var(--wa-dcha), env(safe-area-inset-right)); bottom: max(var(--wa-abajo), env(safe-area-inset-bottom)); /* El aviso de cookies del tema es fixed abajo con z-index 99999 y tapaba media bola al visitante nuevo; el boton va justo encima. */ /* Por DEBAJO del aviso de cookies (99999). Con 100000 la chica tapaba el enlace a la politica de cookies y el borde del boton Aceptar en movil. Gecko Studio, 30/09/2026. */ z-index: 99998; display: block; width: var(--wa-circulo); height: var(--wa-circulo); text-decoration: none; -webkit-tap-highlight-color: transparent; } /* Halo suave que late por detras de todo */ .wa-cora::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(37,211,102,.18) 0%, rgba(37,211,102,.07) 48%, transparent 70%); animation: wa-cora-halo 4.2s ease-in-out infinite; pointer-events: none; z-index: 0; } /* La chica: capa de mascota, DETRAS del circulo */ .wa-cora__mascota { position: absolute; z-index: 1; top: var(--wa-chica-top); left: var(--wa-chica-left); width: var(--wa-chica); max-width: none; height: auto; pointer-events: none; filter: drop-shadow(0 6px 12px rgba(10,60,42,.22)); transition: translate .22s cubic-bezier(.22,.61,.36,1); } /* Circulo verde con aro crema: por delante de la chica */ .wa-cora__circulo { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 24%, #5FE996 0%, #25D366 40%, #12A05C 74%, #0B7A46 100%); box-shadow: 0 0 0 4px #F3EBDA, 0 14px 26px rgba(10,60,42,.32), 0 4px 10px rgba(10,60,42,.22), inset 0 2px 3px rgba(255,255,255,.30), inset 0 -9px 16px rgba(4,45,32,.28); transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s cubic-bezier(.22,.61,.36,1); } /* El tema trae "svg:not(:root){width:50px;height:50px}" (theme.css), que gana por especificidad a una sola clase: por eso se encadenan las dos. */ .wa-cora .wa-cora__logo { width: 34px; height: 34px; fill: #F3EBDA; filter: drop-shadow(0 1px 2px rgba(4,45,32,.35)); } .wa-cora:hover .wa-cora__circulo, .wa-cora:focus-visible .wa-cora__circulo { transform: scale(1.06); } .wa-cora:hover .wa-cora__mascota { translate: 0 -3px; } .wa-cora:active .wa-cora__circulo { transform: scale(.96); } .wa-cora:focus-visible { outline: 2px solid #0B6B4A; outline-offset: 6px; border-radius: 50%; } @keyframes wa-cora-halo { 0%, 100% { opacity: .35; } 50% { opacity: .70; } } /* El boton de "volver arriba" del tema vive en la misma esquina: se sube para que no se monte con la mascota. */ .top_button { bottom: 130px; } @media (max-width: 575px) { .wa-cora { --wa-circulo: 50px; --wa-chica: 96px; --wa-chica-top: -42px; --wa-chica-left: -54px; --wa-abajo: 12px; --wa-dcha: 12px; } .wa-cora .wa-cora__logo { width: 24px; height: 24px; } .top_button { bottom: 110px; } } @media (prefers-reduced-motion: reduce) { .wa-cora::before { animation: none; } } /* ============================================================ 5. Reunion del 25/09/2026, segunda tanda. Gecko Studio. - Slider de portada: fuera el boton "Comprar ahora" y una tercera linea con el codigo del cupon. - Banner de Gosbi y Amanova (cpcmsbanner3): fuera el boton "Consultar" y una segunda linea de texto. Las clases .slidertext3 y .offer-text3 no existen en el tema, se definen aqui a juego con las que ya habia. ============================================================ */ /* El tema pone capitalize al titular del slider y escribia "15% De Descuento En Tu Primera Compra". */ .carousel .carousel-item .caption .slide-text .slidertext2 { text-transform: none; } .carousel .carousel-item .caption .slide-text .slidertext3 { font-size: 22px; line-height: 30px; font-weight: 600; color: #000; margin-top: 18px; } #cpcmsbanner3 .cms-block .offer-text3 { font-size: 22px; line-height: 30px; font-weight: 600; color: #000; margin-top: -10px; } @media (max-width: 1199px) { .carousel .carousel-item .caption .slide-text .slidertext3 { font-size: 18px; line-height: 24px; margin-top: 12px; } #cpcmsbanner3 .cms-block .offer-text3 { font-size: 18px; line-height: 24px; } } @media (max-width: 767px) { .carousel .carousel-item .caption .slide-text .slidertext3 { font-size: 14px; line-height: 18px; margin-top: 8px; } #cpcmsbanner3 .cms-block .offer-text3 { font-size: 15px; line-height: 20px; margin-top: 0; } } @media (max-width: 575px) { .carousel .carousel-item .caption .slide-text .slidertext3 { font-size: 11px; line-height: 14px; margin-top: 5px; } } /* Banner de Gosbi y Amanova: el bloque de texto ocupaba todo el ancho del contenedor (1400 px) y el titular se montaba sobre la foto. Se acota a la mitad izquierda y se baja un punto el tamano del titular para que quepa. Reunion del 25/09/2026. */ /* El fondo nuevo lleva los productos a los lados y el hueco en el centro, asi que el texto va centrado (29/09/2026). Y se quita el parallax SOLO en este banner: con background-attachment:fixed el fondo se escala contra la VENTANA, no contra la seccion, y con una imagen de 2084x754 eso recortaba mas de 1000 px, comiendose los sacos de los lados. Con scroll, el cover se calcula contra el banner y se ve la composicion. */ #cpcmsbanner3 { background-attachment: scroll; background-position: center center; } #cpcmsbanner3 .cms-block { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; } #cpcmsbanner3 .left-side.main-content { width: 100%; } #cpcmsbanner3 .cms-block .offer-text3 { margin-top: 6px; } #cpcmsbanner3 .cms-block .offer-text2 { font-size: 38px; line-height: 46px; } @media (max-width: 1199px) { #cpcmsbanner3 .cms-block { max-width: 480px; } #cpcmsbanner3 .cms-block .offer-text2 { font-size: 31px; line-height: 39px; } } @media (max-width: 991px) { #cpcmsbanner3 .cms-block { max-width: 78%; } #cpcmsbanner3 .cms-block .offer-text2 { font-size: 25px; line-height: 32px; } } @media (max-width: 767px) { #cpcmsbanner3 .cms-block { max-width: 92%; } #cpcmsbanner3 .cms-block .offer-text2 { font-size: 20px; line-height: 26px; } #cpcmsbanner3 .cms-block .offer-text3 { font-size: 13px; line-height: 18px; } } /* ============================================================ 6. Listados: fotos que se salian de su tarjeta. Gecko Studio, 29/09/2026. Algunos productos (los FIDELIS y algun Royal Canin) traen la miniatura con un ANCHO EN PIXELES mayor que la tarjeta que la contiene: 158-212 px dentro de tarjetas de 138. El resultado en movil era que la foto pisaba el titulo del producto de al lado y que /22-perros cogia scroll lateral (417 px en una ventana de 390). El max-width gana al width, asi que basta con acotar el contenedor y la propia imagen. Va con !important porque el ancho lo escribe el tema en linea. ============================================================ */ .product-miniature, .product-miniature > .row, .product-miniature .thumbnail-container { min-width: 0 !important; /* la clave: sin esto la pista del grid crece hasta el min-content de la foto y el max-width no llega a acotar nada */ } .product-miniature > .row { grid-template-columns: minmax(0, 1fr) !important; } .product-miniature .thumbnail-container, .product-miniature .thumbnail-container .thumbnail, .product-miniature .thumbnail-container picture, .product-miniature .thumbnail-container img { max-width: 100% !important; } .product-miniature .thumbnail-container img { height: auto !important; } /* ============================================================ 7. Listado de categoria: scroll lateral residual en movil. Gecko Studio, 29/09/2026. ============================================================ */ /* El arreglo del bloque 6 quito el grueso (fotos de 158-212 px dentro de tarjetas de 138), pero en /22-perros a 390 px seguian quedando 41 px de scroll lateral real: window.scrollX llegaba a 41, no era un artefacto de medida, aguantaba un reflow forzado. Se persiguio elemento a elemento. Con min-width 0 y max-width 100% aplicados a TODOS los descendientes del articulo no queda ni un solo elemento con el borde derecho fuera de la ventana, y aun asi el documento seguia midiendo 416. No son pseudoelementos, ni posiciones absolutas, ni transforms: se descarto cada caso por separado. Lo unico que cierra el desbordamiento es acotar el propio listado. Se usa "clip" y no "hidden" a proposito: clip no crea contenedor de scroll, asi que no rompe los position: sticky de dentro ni deja desplazar el bloque con el teclado. Y se acota a #js-product-list para no tocar los carruseles de la portada, que comparten la clase .product_list pero ya se recortan solos con .owl-wrapper-outer. */ #js-product-list .products, #js-product-list .product_list { overflow-x: clip; } /* Cinturon y tirantes: los hijos de la tarjeta son items de un grid y conservan min-width: auto, asi que sin esto vuelven a crecer hasta su min-content en cuanto un producto trae una foto o un titulo anchos. */ .product_list .product_item { min-width: 0; } .product-miniature > .row > * { min-width: 0; max-width: 100%; } /* ============================================================ 8. Carruseles de la portada: las flechas pisaban el titulo. Gecko Studio, 29/09/2026. ============================================================ */ /* El carrusel FUNCIONA: lo mueven las flechas propias del tema (div.customNavigation con i.feature_prev / i.feature_next), no la paginacion de Owl. Los puntos de Owl existen en el DOM pero su contenedor .owl-controls lo oculta el tema a proposito, porque la navegacion son las flechas. No se tocan: pintarlos seria duplicar el control. Lo que si estaba mal es donde caen las flechas. El tema les calcula el top por JS y en MOVIL aterrizan sobre el titulo del producto: medido a 390 px, la navegacion queda en top 152 y el titulo empieza en 153, asi que el circulo blanco se come la primera letra. En tablet y escritorio caen sobre la foto, que es lo correcto, y por eso solo se corrige el tramo movil. 15vw deja el boton centrado en la banda de la foto en todo el tramo: a 390 px son 58 (foto de 0 a 148) y a 575 px son 86 (foto de 0 a 224). Lleva !important porque el valor lo escribe el JS del tema. */ @media (max-width: 575px) { .customNavigation { top: 15vw !important; } } /* ============================================================ 9. Banner de Gosbi en movil: el titular rozaba los sacos. Gecko Studio, 29/09/2026. ============================================================ */ @media (max-width: 767px) { #cpcmsbanner3 .cms-block .offer-text2 { font-size: 18px; line-height: 24px; } } @media (max-width: 479px) { #cpcmsbanner3 .cms-block { max-width: 96%; } #cpcmsbanner3 .cms-block .offer-text2 { font-size: 16px; line-height: 22px; } #cpcmsbanner3 .cms-block .offer-text3 { font-size: 12px; line-height: 17px; } } /* ------------------------------------------------------------------ * Nombres de producto que se salian de la tarjeta (movil) * Gecko Studio, 30/09/2026. * * Los nombres llegan de Exit con comas sin espacio ("BONIATO,ZANAHORIA"), * y el navegador los trata como una sola palabra larguisima. Con * overflow-wrap normal no hay donde partir, asi que a 360 y 390 px el * titulo se salia hasta 91 px y tocaba el de la tarjeta de al lado. * ------------------------------------------------------------------ */ .product-miniature .product-title, .product-miniature .product-title a, .product-miniature h3, .product-miniature h3 a { overflow-wrap: anywhere !important; word-break: break-word !important; hyphens: auto; } /* ================================================================== * Retoques de la revision del 30/09/2026 (lo "medio") * ================================================================== */ /* 1) Banner de Gosbi y Amanova: en movil el texto caia encima de los sacos. * El fondo es 2084x754 y con background-size: cover, a 375 px de ancho * se recortan ~180 px horizontales, asi que los productos de los lados * se meten hacia el centro, justo donde va el texto. En vez de pelearse * con el encuadre, se le pone al bloque de texto un panel translucido * del color crema del propio fondo: se lee siempre y no mueve nada. * A partir de 768 px no hace falta, ahi ya se ve bien. */ @media (max-width: 767px) { #cpcmsbanner3 .cms-block { background: rgba(250, 247, 240, 0.82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: 10px; padding: 10px 12px; } } /* 2) El indicador del carrusel de la portada. * El slider tiene UNA sola diapositiva, asi que la pildora roja de * Bootstrap no indica nada: encima de la foto parecia una mancha. * child-init.js marca el carrusel con .gecko-una-diapositiva cuando * solo hay una, y aqui se oculta. Si algun dia se anaden mas, la clase * no se pone y el indicador vuelve solo. */ .carousel.gecko-una-diapositiva .carousel-indicators { display: none !important; } /* ------------------------------------------------------------------ * Banner lateral de Gosbi y Amanova (cp_leftbanner1) * Gecko Studio, 30/09/2026. * * La imagen nueva tiene fondo crema claro y trae los logotipos ya * incrustados arriba. El modulo superpone dos lineas de texto en BLANCO, * que con la foto antigua (hierba verde) se leian y con esta no. * * - .text1 decia "Gosbi y Amanova": se oculta, porque la imagen ya lo * pone con los logotipos de verdad. * - .text2 ("Pidelos en tienda o por telefono") pasa a color oscuro. * La posicion se deja como estaba: con .text1 oculto, el bloque cae * solo en la banda crema, bajo los logotipos. * * Va con !important porque las reglas hermanas viven en el Custom CSS * del tema, que se inyecta en linea y gana por orden. * ------------------------------------------------------------------ */ #cpleftbanner1 .left-offer-block .text1 { display: none !important; } /* Nada de tocar el `top`: el bloque NO se posiciona respecto al banner * sino respecto a #left-column, que mide mas de 1.200 px. El 40% que pone * el tema cae justo en la banda crema, bajo los logotipos. */ #cpleftbanner1 .left-offer-block .text2 { color: #1b1b1b !important; text-shadow: none !important; } /* ------------------------------------------------------------------ * Menu superior: que quepan las once entradas * Gecko Studio, 30/09/2026. * * Al anadir HIGIENE el menu pasa a once entradas y con el espaciado de * serie (20 px) no cabe a ningun ancho: el tema las mete en el * desplegable "MAS". Medido a 1366, 1440, 1600 y 1920 sacandolas todas: * * espaciado 20 (actual) -> dos lineas en los cuatro anchos * espaciado 14 -> solo cabe a 1920 * letra 16 -> solo de 1600 para arriba * letra 15 -> solo de 1600 para arriba * letra 14 + espaciado 7 -> cabe de 1440 para arriba <== elegido * letra 13 + espaciado 7 -> cabe tambien a 1366 * * Se elige 14 + 7: es la letra mas grande que mantiene las once visibles * de 1440 para arriba. Con 16 px solo caben de 1600 en adelante y en un * portatil quedarian SEIS categorias dentro de "MAS". * * Solo de 1200 px para arriba: por debajo el menu es hamburguesa y va en * vertical, asi que no necesita apretarse. * ------------------------------------------------------------------ */ @media (min-width: 1200px) { #_top_main_menu ul#top-menu > li > a { padding-left: 7px !important; padding-right: 7px !important; font-size: 14px !important; } } /* ================================================================== * Retoques de movil del 30/09/2026 (segunda tanda de lo "medio") * ================================================================== */ @media (max-width: 767px) { /* 1) El cupon del slider caia sobre el perro y se leia mal. * Mismo remedio que en el banner de Gosbi: un panel translucido * del color crema del fondo detras del texto. No mueve nada de * sitio y se lee siempre, con cualquier foto que se ponga. */ .carousel .slide-text { background: rgba(250, 247, 240, 0.80); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: 10px; padding: 10px 12px !important; } /* 2) Hueco blanco entre el slider y los bloques de garantias. * Eran 60 px, de los cuales 40 venian del margen superior de * #cpserviceblock. En movil sobra tanto aire. */ #cpserviceblock { margin-top: 16px !important; } /* 3) El banner naranja "Solo en tienda" quedaba apelotonado. * Su imagen es de 1400x180, asi que a 335 px de ancho se queda en * una tira de 43 px de alto, y el modulo le superpone encima el * antetitulo, el titulo de dos lineas y el boton. Imposible de * leer. En movil se deja de superponer: el texto pasa a ir DEBAJO * de la imagen, con tamanos normales. */ #cpcmsbanner2 .cms-block { position: static !important; transform: none !important; width: auto !important; max-width: none !important; padding: 12px 4px 4px !important; text-align: center !important; } #cpcmsbanner2 .cms-block .offer-text1 { position: static !important; font-size: 13px !important; line-height: 18px !important; margin-bottom: 2px !important; } #cpcmsbanner2 .cms-block .offer-text2 { position: static !important; font-size: 15px !important; line-height: 21px !important; margin-bottom: 10px !important; } #cpcmsbanner2 .cms-block .offer-button { position: static !important; } /* 4) Las flechas del slider, fuera de la pantalla y sin funcion. * Con una sola diapositiva no llevan a ninguna parte; ademas a * 360 y 390 caen fuera del ancho de la ventana. La clase * .gecko-una-diapositiva la pone child-init.js solo cuando hay * una: si algun dia hay mas, las flechas vuelven solas. */ .carousel.gecko-una-diapositiva .carousel-control-prev, .carousel.gecko-una-diapositiva .carousel-control-next { display: none !important; } } /* Colores del banner naranja al pasar el texto DEBAJO de la imagen. * Estaba todo en blanco porque el diseno lo superponia sobre el naranja; * sobre el fondo blanco de la pagina se volvia invisible. Solo en movil: * en escritorio el texto sigue encima de la foto y en blanco, como estaba. * Gecko Studio, 30/09/2026. */ @media (max-width: 767px) { #cpcmsbanner2 .cms-block .offer-text1, #cpcmsbanner2 .cms-block .offer-text1 span { color: #e2001a !important; } #cpcmsbanner2 .cms-block .offer-text2, #cpcmsbanner2 .cms-block .offer-text2 span { color: #1b1b1b !important; } #cpcmsbanner2 .cms-block .offer-text2 span { font-size: 13px !important; line-height: 18px !important; } #cpcmsbanner2 .cms-block .offer-button a.btn { background-color: #e2001a !important; border-color: #e2001a !important; color: #fff !important; font-size: 13px !important; padding: 8px 18px !important; display: inline-block !important; } } /* El bloque del banner naranja es un GRID, y por eso el antetitulo, el * titulo y el boton se colocaban en fila aunque se quitara el * posicionamiento. En movil pasa a bloque, uno debajo de otro y * centrados. Gecko Studio, 30/09/2026. */ @media (max-width: 767px) { #cpcmsbanner2 .cms-block { display: block !important; } #cpcmsbanner2 .cms-block .offer-text1, #cpcmsbanner2 .cms-block .offer-text2, #cpcmsbanner2 .cms-block .offer-button { display: block !important; width: 100% !important; max-width: none !important; text-align: center !important; } #cpcmsbanner2 .cms-block .offer-text1 { justify-content: center !important; } } /* ================================================================== * Bloque de reseñas propio (sustituye al widget de Elfsight) * Gecko Studio, 30/09/2026. REDISEÑADO el mismo dia a peticion de Eva: * el anterior dejaba muchisimo hueco vacio en las tarjetas cortas. * * Sin scripts externos ni iframes: todo se pinta desde la plantilla del * tema hijo. Las estrellas son el caracter ★ y no SVG, a proposito: * theme.css tiene un `svg:not(:root){width:300px;height:300px}` global * que revienta cualquier SVG que se meta. La "G" de Google SI es SVG, * pero lleva su tamano clavado aqui abajo justo por ese motivo. * * Es un carrusel: tres tarjetas a la vista en escritorio, dos en tablet * y una en movil, con scroll-snap. Sin JavaScript sigue siendo usable * (se arrastra con el dedo o con la barra); child-init.js le anade las * flechas, los puntos, la rotacion automatica y el resalte de la * tarjeta del centro. * ================================================================== */ /* --- la fila --- */ .gecko-resenas__lista { list-style: none; margin: 0; padding: 0 0 4px; /* El ancho explicito es imprescindible: el .container del tema deja la lista con ancho 0 si no se le dice nada, y entonces cada tarjeta se estruja a 46 px y el texto se apila en vertical (2.536 px de alto). */ width: 100%; min-width: 0; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge viejo */ } .gecko-resenas__lista::-webkit-scrollbar { /* Chrome y Safari */ display: none; } /* Tres a la vista, descontando los dos huecos de 18 px */ .gecko-resenas__item { flex: 0 0 calc((100% - 36px) / 3); min-width: 0; /* sin esto, un texto largo estira la columna */ display: flex; scroll-snap-align: start; } /* --- la tarjeta --- */ .gecko-resenas__tarjeta { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } /* La tarjeta del centro NO se resalta: las tres van en blanco (Eva, 30/09/2026). child-init.js le sigue poniendo la clase `es-destacada` segun donde este el scroll; simplemente ya no pinta nada. Para volver a resaltarla basta con devolver aqui estas tres lineas: border-color: #f2b9c1; background: #fff7f8; box-shadow: 0 4px 16px rgba(226, 0, 26, .08); */ /* --- cabecera: la G de Google y las estrellas --- */ .gecko-resenas__cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } /* Tamano clavado por el `svg:not(:root)` global del tema, que si no deja esta "G" a 300x300 px y descuadra la pagina entera. */ .gecko-resenas__g { flex: 0 0 auto; width: 20px !important; height: 20px !important; display: block; } .gecko-resenas__estrellas { line-height: 1; white-space: nowrap; } .gecko-resenas__estrella { font-size: 17px; color: #dcdcdc; letter-spacing: .5px; } .gecko-resenas__estrella.es-llena { color: #fbbc05; } /* --- el texto --- */ .gecko-resenas__texto { margin: 0 0 12px; padding: 0; border: 0; font-size: 14.5px; line-height: 22px; color: #4a4a4a; text-align: left; overflow-wrap: anywhere; /* los nombres largos no rompen la tarjeta */ flex: 1 1 auto; /* Corta las resenas kilometricas a seis lineas: era lo que disparaba la altura de todas las tarjetas y dejaba las cortas medio vacias. El texto completo esta a un clic, en el boton de abajo. */ display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } /* --- pie: linea, avatar con la inicial y el nombre --- */ .gecko-resenas__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; /* pegado abajo aunque el texto sea corto */ padding-top: 11px; border-top: 1px solid #f0f0f0; } .gecko-resenas__avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #e2001a; color: #fff; font-size: 14px; font-weight: 700; line-height: 32px; text-align: center; text-transform: uppercase; } .gecko-resenas__autor { font-weight: 700; font-size: 14px; color: #1b1b1b; } .gecko-resenas__fecha { font-size: 12.5px; color: #8a8a8a; } /* --- flechas y puntos, que los crea child-init.js --- */ /* Los 52 px de cada lado son el carril de las flechas: asi quedan FUERA de las tarjetas sin salirse nunca de la pantalla. Colgarlas con `left` negativo se salia del viewport en cuanto la ventana bajaba de 1200 px. */ .gecko-resenas__marco { position: relative; padding: 0 52px; } .gecko-resenas__flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid #f0e2e4; border-radius: 50%; background: #fff; color: #e2001a; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .10); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .gecko-resenas__flecha:hover, .gecko-resenas__flecha:focus-visible { background: #e2001a; border-color: #e2001a; color: #fff; } .gecko-resenas__flecha[disabled] { opacity: .35; cursor: default; box-shadow: none; } .gecko-resenas__flecha.es-anterior { left: 5px; } .gecko-resenas__flecha.es-siguiente { right: 5px; } .gecko-resenas__puntos { display: flex; justify-content: center; gap: 7px; margin-top: 14px; } .gecko-resenas__punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #dcdcdc; cursor: pointer; transition: background-color .15s ease, width .15s ease; } .gecko-resenas__punto.es-activo { background: #e2001a; width: 20px; border-radius: 4px; } /* --- boton de cierre --- */ .gecko-resenas__cierre { margin-top: 16px; text-align: center; } .gecko-resenas__enlace { display: inline-flex; align-items: center; gap: 10px; background: #e2001a; color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1; padding: 11px 22px; border-radius: 999px; text-decoration: none; transition: background-color .15s ease; } /* La "G" sobre el rojo no se leeria: va dentro de un circulito blanco. */ .gecko-resenas__enlace .gecko-resenas__g { width: 18px !important; height: 18px !important; background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; } .gecko-resenas__flechita { font-size: 16px; line-height: 1; } .gecko-resenas__enlace:hover, .gecko-resenas__enlace:focus { background: #b80016; color: #fff !important; text-decoration: none; } /* --- Tablet: dos a la vista --- */ @media (max-width: 991px) { .gecko-resenas__item { flex: 0 0 calc((100% - 18px) / 2); } .gecko-resenas__marco { padding: 0 50px; } .gecko-resenas__flecha.es-anterior { left: 4px; } .gecko-resenas__flecha.es-siguiente { right: 4px; } } /* --- Movil: una a la vista, sin flechas (se arrastra con el dedo) --- */ @media (max-width: 575px) { .gecko-resenas__lista { gap: 12px; } .gecko-resenas__item { flex: 0 0 100%; } .gecko-resenas__tarjeta { padding: 14px 16px 12px; } .gecko-resenas__texto { font-size: 14px; line-height: 21px; -webkit-line-clamp: 8; /* en movil cabe mas alto sin molestar */ } .gecko-resenas__marco { padding: 0; /* sin flechas, no hace falta carril */ } .gecko-resenas__flecha { display: none; } } /* ================================================================== * Tablas de las paginas legales * Gecko Studio, 06/10/2026. * * Los textos de ADELOPD traen tablas (las cookies que usa la web, las * tarifas de transporte). En movil miden mas que la pantalla y el * contenedor del tema, `.page-content`, las recorta con * `overflow-x: hidden`: se perdia la columna de la derecha y NO habia * forma de llegar a ella. En un texto legal eso es contenido que el * visitante no puede leer. * * `display: block` convierte la tabla en un bloque con scroll propio, * que es el mismo recurso que usa `.table-responsive` de Bootstrap. * ================================================================== */ @media (max-width: 991px) { .page-cms table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Sin un ancho minimo las columnas se estrujan y el texto largo de la celda "Finalidad" se apila letra sobre letra: una fila de PHPSESSID llegaba a ocupar varias pantallas de alto. Con 560 px el texto respira y la tabla se recorre deslizando, que es lo esperable. */ .page-cms table > tbody, .page-cms table > thead { display: table; width: 100%; min-width: 560px; } } /* ================================================================== * Banner lateral: el texto se iba sobre los productos * Gecko Studio, 06/10/2026. * * El rotulo "Pidelos en tienda o por telefono" esta en absoluto con * `top: 40%`, pero su contenedor posicionado mas cercano era * **#left-column**, no el banner: ningun elemento intermedio tenia * `position`. Como la columna izquierda mide distinto en cada pagina * (1.262 px en una categoria, 1.570 px en /contactenos), ese 40% caia * en un sitio distinto segun donde estuvieras: * * categoria -> 40% de 1.262 = 505 px -> 50 px dentro del banner, bien * /contactenos -> 40% de 1.570 = 628 px -> 213 px, encima de los sacos * * Se ancla el texto AL BANNER dandole `position: relative` al
  • que * lo envuelve, que mide justo lo que la imagen. Asi el porcentaje se * calcula siempre sobre la misma altura y el rotulo cae en el mismo * sitio en todas las paginas. El 17% reproduce los 50 px que ya tenia * en las categorias, que es como debe verse. * ================================================================== */ #cpleftbanner1 .cpleftbanner1-container { position: relative; } #cpleftbanner1 .left-offer-block { top: 17%; }