@font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-Bd.eot'); src: url('../fonts/HelveticaNeueLTStd-Bd.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2'), url('../fonts/HelveticaNeueLTStd-Bd.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Bd.ttf') format('truetype'), url('../fonts/HelveticaNeueLTStd-Bd.svg#HelveticaNeueLTStd-Bd') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Std'; src: url('../fonts/HelveticaNeueLTStd-Roman.eot'); src: url('../fonts/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeueLTStd-Roman.woff2') format('woff2'), url('../fonts/HelveticaNeueLTStd-Roman.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Roman.ttf') format('truetype'), url('../fonts/HelveticaNeueLTStd-Roman.svg#HelveticaNeueLTStd-Roman') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Georgia'; src: url('../fonts/Georgia.eot'); src: url('../fonts/Georgia.eot?#iefix') format('embedded-opentype'), url('../fonts/Georgia.woff2') format('woff2'), url('../fonts/Georgia.woff') format('woff'), url('../fonts/Georgia.ttf') format('truetype'), url('../fonts/Georgia.svg#Georgia') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } .iqitfake{ display: none;} /*** Style mixins ***/ /*** Variables mixins and functions ***/ .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1440px; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #000000; } a:hover:not(.nav-link):not(.btn) { color: #999999; } .pagination .page-list li:hover { border-color: #999999; } .pagination .page-list li.current { border-color: #999999; } .pagination .page-list li.current a { color: #999999; } #mobile-header { background: #0d3429; border-bottom: solid 1px rgba(255, 255, 255, 0.08); } #mobile-header #mobile-header-sticky { background: #0d3429; } #mobile-header .mobile-main-bar { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; } #mobile-header .m-nav-btn { color: #ffffff; } #mobile-header .m-nav-btn:hover { color: #d5fe00; } #mobile-header .m-nav-btn > span { display: none !important; } #mobile-header .mobile-buttons-bar { background: #c9c9c9; } html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } body { line-height: 1.4rem; } body { font-family: "Helvetica Neue LT Std", sans-serif; } .h1, .h2, .block-title, .page-title, .modal-title, .step-title { font-family: "Georgia", serif; } #blockcart-content { background: #ffffff; border: none 1px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } /*** Secondary button ***/ .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled, .bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default { background: #ffffff; color: #0f2f2c; border: solid 1px #28645c; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary :active, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled :active, .btn-secondary:disabled:hover, .btn-secondary:disabled:focus, .btn-secondary:disabled :active, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:hover, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:focus, .bootstrap-touchspin .group-span-filestyle .btn-touchspin :active, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:hover, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:focus, .group-span-filestyle .bootstrap-touchspin .btn-touchspin :active, .group-span-filestyle .btn-default:hover, .group-span-filestyle .btn-default:focus, .group-span-filestyle .btn-default :active { background: #28645c; color: #ffffff; border-color: #28645c; } .btn-secondary:not(:disabled):not(.disabled):active { background: #28645c; color: #ffffff; border-color: #28645c; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #ffffff; color: #0f2f2c; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #28645c; color: #ffffff; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #0f2f2c; color: #ffffff; border: solid 1px #0f2f2c; } .btn-primary:hover, .btn-primary:focus, .btn-primary :active, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled :active, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled :active { background: #28645c; color: #ffffff; border-color: #28645c; } .btn-primary:not(:disabled):not(.disabled):active { background: #28645c; color: #ffffff; border-color: #28645c; } #wrapper .breadcrumb { padding-top: 0.7142857143rem; padding-bottom: 0.7142857143rem; margin-top: -1.0714285714rem; margin-bottom: 1.0714285714rem; font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #434d4e; } #wrapper .breadcrumb li:after { color: #434d4e; } #wrapper .breadcrumb a { color: #434d4e; } /*** Text fields ***/ .form-control { background-color: #ffffff; color: #000000; border: solid 1px #e3e3e3; } .custom-select2, .custom-select2 option { background-color: #ffffff; } .custom-select2:after { color: #000000; } .bootstrap-touchspin .btn-touchspin { background-color: #ffffff; color: #000000; border: solid 1px #e3e3e3; } .bootstrap-touchspin .btn-touchspin:hover { color: #000000; } .form-control::-webkit-input-placeholder { color: #000000; } .form-control::-moz-placeholder { color: #000000; } .form-control:-ms-input-placeholder { color: #000000; } .form-control:-moz-placeholder { color: #000000; } .form-control:focus { color: #000000; border-color: #8a8a8a; } /*** Radio buttons and checkboxes ***/ .custom-checkbox input[type=checkbox] + span .checkbox-checked { color: #000000; } .custom-radio input[type=radio]:checked + span { background-color: #000000; } .custom-checkbox input[type=checkbox] + span:not(.color), .custom-radio { background: #ffffff; color: #000000; border-color: #e3e3e3; } /*** Dropdowns ***/ .dropdown-menu, .autocomplete-suggestions { background: #ffffff; border: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item, .autocomplete-suggestions .dropdown-item { color: #474747!important; border-bottom: solid 1px #e3e3e3; } .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .autocomplete-suggestions .dropdown-item:focus, .autocomplete-suggestions .dropdown-item:hover { background: rgba(71, 71, 71, 0.05); } /*** Tooltips ***/ .tooltip-inner { background: #333333!important; color: #ffffff!important; } .tooltip { --bs-tooltip-bg: #333333; --bs-tooltip-color: #ffffff; } /*** Modals ***/ .modal-backdrop { background: rgba(194, 194, 194, 0.7); } .modal-content { background: #ffffff; border: none 1px; } .js-quickview-np-btn { background: #ffffff; } /*** Notifications ***/ .ns-box { background: #ffffff; color: #000000; border: none 1px; box-shadow: 0px 30px 30px -15px rgba(0, 0, 0, 0.25); } .product-price { color: #0f2f2c; } .iqit-review-star { color: #e0d041; } .product-flags .product-flag { font-size: 0.7857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #eba53d; color: #ffffff; } .product-flags .new { background: #1bd33f; color: #ffffff; } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000000; } .product-flags .out_of_stock { background: #a17738; color: #fff7f7; } .discount { background: #eba53d; color: #ffffff; } .product-available { background: #67a675; color: #ffffff; } .product-unavailable { background: #a17738; color: #fff7f7; } .product-unavailable-allow-oosp { background: #17459e; color: #0dd138; } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { text-decoration: underline; } #iqitcompare-floating { background: #ffffff; border-top: none 1px #a53737; border-left: none 1px #a53737; border-right: none 1px #a53737; box-shadow: 0px 4px 19px 6px rgba(92, 81, 81, 0.16); } #iqitcompare-floating a { color: #242424; } #page-preloader { background: #ffffff; } #back-to-top { background: #0f2f2c; color: #ffffff; display: none; } #back-to-top:hover { background: #28645c; color: #ffffff; } ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { background: #28645c; } ::-webkit-scrollbar-track { background: #efefef; } body { scrollbar-face-color: #28645c; scrollbar-track-color: #efefef; } #header, #checkout-header { background: #0d3429; border-top: none 1px; border-bottom: none 1px; } .sticky-desktop-wrapper #desktop-header.stuck-header { background: #0d3429; border-bottom: none 1px; } #header .header-nav { color: #cfe3de; background: #0a2a21; border-bottom: none 1px; padding-top: 0.6428571429rem; padding-bottom: 0.6428571429rem; font-size: 0.8571428571rem; } #header .header-nav a { color: #ffffff; } #header .header-nav a:hover { color: #d5fe00; } #header .header-nav .social-links._topbar { font-size: 1rem; } #header .header-nav .social-links._topbar a:not(:hover) { color: #ffffff !important; } #header .header-nav .social-links._topbar a:hover { color: #d5fe00 !important; } .header-top { padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; color: #ffffff; } .header-top a:not(.btn):not(.nav-link) { color: #ffffff; } .header-top a:not(.btn):not(.nav-link):hover { color: #cdcf3b; } .header-top .form-search-control { background: rgba(0, 0, 0, 0); color: #ffffff; border: solid 1px rgba(255, 255, 255, 0.25); } .header-top input.form-search-control::-webkit-input-placeholder { color: #ffffff; } .header-top input.form-search-control:-moz-placeholder { color: #ffffff; } .header-top input.form-search-control:-ms-input-placeholder { color: #ffffff; } .header-top input.form-search-control:-moz-placeholder { color: #ffffff; } .header-top .search-btn { color: #ffffff; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.5714285714rem; display: block; } .header-top .header-btn-w .header-btn .title { display: none !important; } .header-top .header-cart-default a.cart-toogle { background: #0f2f2c; color: #ffffff; padding: 0.6428571429rem 0.6428571429rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #ffffff; } .header-top a.header-cart-btn:not(:hover) { color: #ffffff; } .stuck-header .header-top { padding-top: 0.3571428571rem; padding-bottom: 0.3571428571rem; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: #ffffff; } .header-top { transition: padding 0.3s ease; } .cart-products-count-btn { background: #d5fe00; color: #0f2f2c; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 50%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { border-top: none 1px rgba(255, 255, 255, 0.1); border-right: none 3px #38b82c; border-bottom: none 3px #457deb; border-left: none 3px #a6cc0f; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { line-height: 4rem; max-width: 14.2857142857rem; color: #ffffff; padding-left: 1.1428571429rem; padding-right: 1.1428571429rem; border-left: none 2px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #ffffff; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.4285714286rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 4rem !important; } .cbp-vertical-on-top .cbp-vertical-title-text { display: none !important; } .cbp-horizontal > ul > li.cbp-hropen > a, .cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li.cbp-hropen > a:hover { color: #cdcf3b; } .cbp-horizontal .cbp-tab-title { font-size: 0.9285714286rem; letter-spacing: 0.0714285714rem; font-style: normal; font-weight: bold; text-transform: uppercase; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #0f2f2c; color: #d5fe00; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.4285714286rem; max-height: 1.4285714286rem; } .cbp-horizontal > ul { text-align: center; } .cbp-horizontal > ul > li { float: none; text-align: left; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 0.8571428571rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 0.7142857143rem; padding-right: 0.7142857143rem; } } #cbp-hrmenu .cbp-hrsub { transform: translateY(-10px); } #cbp-hrmenu .cbp-hropen .cbp-hrsub { transform: translateY(0px); } #cbp-hrmenu .cbp-hrsub, #cbp-hrmenu .cbp-hrsub-level2, #cbp-hrmenu .cbp-hrsub-wrapper { transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } .iqitmegamenu-submenu-container { padding: 0; } /*** VERTICAL MENU ***/ .cbp-vertical-on-top #cbp-hrmenu1-ul { background: #ffffff; border: solid 1px #e3e3e3; } #content-wrapper #cbp-hrmenu1 { background: #ffffff; border: solid 1px #e3e3e3; } #cbp-hrmenu1 .cbp-vertical-title { font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background: #000000; line-height: 3.5714285714rem; } #cbp-hrmenu1 .cbp-vertical-title:hover { color: #ffffff; background: #000000; } #cbp-hrmenu1 > ul > li > a, #cbp-hrmenu1 > ul > li > span.cbp-main-link { font-style: normal; font-weight: normal; text-transform: none; padding-top: 0.5714285714rem; padding-bottom: 0.5714285714rem; border-top: solid 1px rgba(227, 227, 227, 0.35); } #cbp-hrmenu1 > ul > li > a .cbp-mainlink-icon, #cbp-hrmenu1 > ul > li > a .cbp-mainlink-iicon { font-size: 1.7142857143rem; max-height: 1.7142857143rem; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333333; } #cbp-hrmenu1 .cbp-legend { background: #ca5058; color: #ffffff; } #cbp-hrmenu1 .cbp-hrsub, #cbp-hrmenu1 > ul, #cbp-hrmenu1 .cbp-hrsub-level2, #cbp-hrmenu1 .cbp-hrsub-wrapper { transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #ffffff; background: #000000; } .cbp-not-on-top #cbp-hrmenu1-ul { position: relative; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-wrapper { top: 0; margin-top: 0px !important; min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-hrsub { min-height: 100%; } .cbp-hrmenu.cbp-vertical .cbp-show { -js-display: flex; display: flex; flex-wrap: wrap; } .cbp-hrmenu.cbp-vertical .cbp-hrsub-inner { width: 100%; } /*** SUBMENU ***/ .cbp-hrmenu .cbp-hrsub { font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #ffffff; border: none 1px #37a625; box-shadow: 0px 15px 25px 0px rgba(74, 63, 63, 0.15); } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu .cbp-hrsub-inner a, .cbp-hrmenu .cbp-hrsub-inner a:link { color: !important; } .cbp-hrmenu .cbp-hrsub-inner a:hover { color: #333333 !important; } .cbp-hrmenu .tabs-links { background: #f7f7f7; } .cbp-hrmenu .cbp-tabs-names li a { color: #777777 !important; } .cbp-hrmenu .cbp-tabs-names li a:hover, .cbp-hrmenu .cbp-tabs-names li a.active { background: #ffffff; color: #777777 !important; } .cbp-hrmenu .cbp-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #333333 !important; border-bottom: none 3px #c2bc29; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: uppercase; } .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:hover { color: !important; } /*** MOBILE MENU ***/ #mobile-header .col-mobile-menu-dropdown.show { background: #ffffff; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #595050 !important; } #iqitmegamenu-mobile { background: #ffffff; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab { min-height: 3.8571428571rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__tab:not(:last-child) { border-bottom: none 1px; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__arrow { padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; } #iqitmegamenu-mobile li > ul.mobile-menu__submenu--accordion .mobile-menu__link { color: #595050 !important; padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; font-size: 1.2857142857rem; font-style: normal; font-weight: normal; text-transform: none; } .col-mobile-menu-push #iqitmegamenu-mobile { border: none 1px; } .col-mobile-menu-push #_mobile_iqitmegamenu-mobile { box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } .mobile-menu__submenu { background: #ffffff; } .mobile-menu__tab { border-bottom: none 1px; min-height: 4.4285714286rem; } .mobile-menu__link { color: #595050 !important; padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__arrow { padding-top: 1.4285714286rem; padding-bottom: 1.4285714286rem; color: #595050; font-size: 1.5714285714rem; } .mobile-menu__tab-icon { font-size: 1.5714285714rem; } .mobile-menu__tab-icon--img { max-height: 1.5714285714rem; } .mobile-menu__legend { font-size: 0.8571428571rem; font-style: normal; font-weight: normal; text-transform: none; color: #ffffff; background-color: #595050; } .mobile-menu__header-wrapper { color: #595050; background-color: #f4f4f4; border-bottom: none 1px; display: none; } .mobile-menu__title { font-size: 1.5714285714rem; font-style: normal; font-weight: normal; text-transform: none; } .mobile-menu__column-title { font-size: 1.4285714286rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050 !important; } .mobile-menu__column { font-size: 1.1428571429rem; font-style: normal; font-weight: normal; text-transform: none; color: #595050; margin-bottom: 2.8571428571rem; } .mobile-menu__column-categories:not(:last-child) { margin-bottom: 2.8571428571rem; } .mobile-menu__links-list-li { padding-top: 0.4285714286rem; padding-bottom: 0.4285714286rem; } .mobile-menu__close, .mobile-menu__back-btn { color: #595050; } .mobile-menu__footer { border-top: none 1px; color: #595050; background-color: #f4f4f4; display: none; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .swiper-button-next, .swiper-button-prev { background: #0f2f2c; color: #ffffff; } .swiper-pagination-bullet { background: #28645c; } /*** Product miniature ***/ .products.row { margin: -1.0714285714rem; } .products.row > .col, .products.row > [class*=col-] { padding: 1.0714285714rem; } .swiper-container-wrapper { margin: -1.0714285714rem; } .swiper-container-wrapper .products.swiper-container { padding: 1.0714285714rem; } .swiper-container-wrapper .product-carousel { padding: 1.0714285714rem; } .swiper-products-carousel.swiper-arrows-above .swiper-button { margin: 1.0714285714rem; } .product-miniature { border: none 1px; outline: 1px none transparent; } .product-miniature .thumbnail-container .product-thumbnail-second { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.3s ease; backface-visibility: hidden; } .product-miniature .thumbnail-container:hover .product-thumbnail-second { opacity: 1; } .product-miniature .thumbnail-container:hover .product-thumbnail-first { opacity: 0; } .product-miniature .thumbnail-container:hover picture:last-child .product-thumbnail-first { opacity: 1; } .product-miniature-grid { padding: 1.0714285714rem; } .product-miniature-grid .product-title { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-price { font-size: 1rem; font-style: normal; font-weight: normal; text-transform: none; } @media (hover: hover) { .product-miniature:hover { outline: none 1px; box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15); } } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { color: #434d4e !important; } .product-miniature-grid .product-functional-buttons a { display: block; border-radius: 50%; margin: 5px 0; padding: 8px; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1); } .product-miniature-grid .product-functional-buttons i { font-size: 1rem; } .product-miniature-grid .product-functional-buttons a:link, .product-miniature-grid .product-functional-buttons a:visited, .product-miniature-grid .product-functional-buttons a:hover { background: #ffffff; } .product-miniature-grid .product-functional-buttons-bottom { bottom: auto; top: 0.7rem; right: 0rem; left: auto; min-width: auto; padding: 0; transform: translate(0, 0); } .products-grid .product-miniature .product-category-name { display: none !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-description-short { display: none !important; } .products-grid .product-miniature .flag-discount-value { display: none !important; } .product-miniature .input-qty, .product-miniature .input-group-add-cart .bootstrap-touchspin { display: none !important; } .btn-product-list { padding: 0.5357142857rem 1.0714285714rem; background: #ffffff; color: #28645c; border: solid 1px #28645c; } .btn-product-list:hover { background: #28645c; color: #ffffff; border-color: #28645c; } .products-grid .product-miniature-default { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; } .products-grid .product-miniature-default .product-description { -webkit-box-flex: auto; -ms-flex: auto; flex: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; } .products-grid .product-add-cart { margin: auto auto 0 auto; } .product-carousel { height: 100%; } .products.swiper-container .swiper-slide { height: auto; } .products-grid .product-miniature-layout-1 .product-description { padding: 1.0714285714rem; } .products-grid .product-miniature-layout-2 .product-description { padding: 1.0714285714rem; } .products-grid .product-miniature-layout-3 .product-description { background: rgba(40, 44, 51, 0.93); } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-rows: 1fr; grid-auto-rows: 0; display: grid; overflow-y: hidden; } .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .layout-full-width .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(5, 1fr); } .layout-left-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper, .layout-right-column .swiper-default-carousel:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.2857142857rem; font-style: normal; font-weight: bold; text-transform: none; } #product .images-container .product-cover { border: none 1px; } .images-container .swiper-button-arrow, #product .product-cover .expander > span, #product-modal .modal-body .swiper-button-arrow { color: #ffffff; background: #0f2f2c; } .images-container .swiper-button-arrow:hover, #product .product-cover .expander > span:hover, #product-modal .modal-body .swiper-button-arrow:hover { opacity: 0.6 !important; } .product-cover .expander { width: 100%; height: 100%; padding: 0; bottom: 0; right: 0; } .product-cover .expander > span { position: absolute; bottom: 1rem; right: 1rem; padding: 0.6rem; } #product .product-cover .expander > span { color: #ffffff; background: #0f2f2c; transition: opacity 0.2s cubic-bezier(0.7, 0, 0.3, 1), color 0.2s cubic-bezier(0.7, 0, 0.3, 1); } #product .product-cover .expander > span:hover { opacity: 0.6 !important; } .product-variants > .product-variants-item { display: inline-block; margin-right: 1rem; vertical-align: top; } #main #main-product-wrapper { transition: opacity 0.3s ease; } #main.-combinations-loading { position: relative; } #main.-combinations-loading #product-preloader { display: block; position: absolute; z-index: 10; top: -10px; } #main.-combinations-loading #main-product-wrapper { opacity: 0.3; } @media screen and (max-width: 768px) { .col-left-product-cover, .col-left-product-thumbs { flex: 0 0 100%; max-width: 100%; } .col-left-product-thumbs { order: 2; margin-top: 2rem; } } #checkout #header { display: none !important; } #checkout #footer, #checkout #iqitcompare-floating-wrapper { display: none !important; } #wrapper { border-top: none 1px; border-bottom: none 1px; padding-top: 1.0714285714rem; padding-bottom: 1.0714285714rem; color: #434d4e; } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 0rem; padding-bottom: 0rem; } #content-wrapper .page-title { color: #434d4e; font-size: 1.5714285714rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #434d4e; } #content-wrapper .section-title { color: #434d4e; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #434d4e; } .nav-tabs .nav-link { color: #434d4e; font-size: 1.1428571429rem; font-style: normal; font-weight: bold; text-transform: none; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: #434d4e; border-bottom: solid 3px #28645c; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #28645c; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #434d4e; border-bottom: solid 3px #28645c; } #wrapper .block-title { color: #333333; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #wrapper .block-title a:link, #wrapper .block-title a:visited { color: #333333; } #left-column .block, #right-column .block { border: none 1px; } #footer, #checkout-footer { background: #0f2f2c; } #footer .ps-emailsubscription-block .newsletter-input-group, #checkout-footer .ps-emailsubscription-block .newsletter-input-group { border: solid 1px #e3e3e3; background: #ffffff; } #footer .ps-emailsubscription-block .newsletter-input-group .input-subscription, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .input-subscription { color: #000000; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe { color: #777777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe:hover { color: #bd4e0f; } #footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-webkit-input-placeholder { color: #000000; } #footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #000000; } #footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder { color: #000000; } #footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder { color: #000000; } #footer .social-links._footer, #checkout-footer .social-links._footer { font-size: 1.5rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #ffffff !important; } #footer .social-links._footer a:hover, #checkout-footer .social-links._footer a:hover { color: #ffffff !important; } #footer .block-title, #checkout-footer .block-title { color: #000000; font-size: 1rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: none 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:link, #checkout-footer .block-title a:visited { color: #000000; } #footer-container-first { border-top: none 1px; padding-top: 2.1428571429rem; padding-bottom: 2.1428571429rem; background: #3782ef; color: #ffffff; } #footer-container-first .h5 { font-size: 1.5rem; font-style: normal; font-weight: bold; text-transform: none; } #footer-container-main, #checkout-footer { border-top: none 1px; color: #cfe3de; } #footer-container-main a, #checkout-footer a { color: #ffffff; } #footer-container-main a:hover, #checkout-footer a:hover { color: #d5fe00; } #footer-copyrights { border-top: none 1px; background: #0a2420; padding-top: 1.1428571429rem; padding-bottom: 1.1428571429rem; } #maintenance-page { background: #e3e3e3; color: #333333; } #maintenance-page a, #maintenance-page a:link { color: #333333; } .maintenance-page-newsletter .maintenance-page-newsletter-btn { background: #000000; color: #ffffff; } .maintenance-page-newsletter .maintenance-page-newsletter-btn:hover { background: #333333; color: #ffffff; } .maintenance-page-newsletter input[type=email] { border: solid 1px #333333; background: #e3e3e3; color: #333333; } .maintenance-page-newsletter input[type=email]::-webkit-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]::-moz-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email]:-ms-input-placeholder { color: #333333; } .maintenance-page-newsletter input[type=email] :-moz-placeholder { color: #333333; }/* Marta Benítez · portada nativa (gdw-mb2 v3). Colores, textos, tipografías, fondos, bordes, sombras y animaciones van en los controles de cada widget; aquí solo queda lo que el editor no permite: colocación (badge, cruz, botones en línea, chips), alturas iguales, recortes y detalles de hover. */ .gdw-mb2{--mb-oscuro:#0f2f2c;--mb-oscuro2:#28645c;--mb-suave:#7dd0c1;--mb-acento:#d5fe00} .gdw-mb2 .elementor-heading-title em{font-style:italic;color:var(--mb-oscuro2)} .gdw-mb2.mb2-oscuro .elementor-heading-title em,.gdw-mb2 .mb2-oscuro .elementor-heading-title em{color:var(--mb-acento)} .gdw-mb2 .elementor-text-editor p:last-child{margin-bottom:0} /* Hero */ .gdw-mb2.mb2-hero{overflow:hidden} .gdw-mb2.mb2-hero .elementor-heading-title em{color:var(--mb-acento)} .gdw-mb2 .mb2-hero-foto,.gdw-mb2 .mb2-hero-foto>.elementor-column-wrap,.gdw-mb2 .mb2-hero-foto .elementor-widget-wrap{height:100%;position:relative} .gdw-mb2 .mb2-hero-foto .elementor-widget-image,.gdw-mb2 .mb2-hero-foto .elementor-widget-image .elementor-image, .gdw-mb2 .mb2-hero-foto .elementor-widget-container{height:100%} .gdw-mb2 .mb2-hero-foto .elementor-widget-image img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:60% 30%} .gdw-mb2 .mb2-hero-foto::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,var(--mb-oscuro) 0,rgba(15,47,44,0) 22%)} .gdw-mb2 .mb2-hero-foto::after{content:"";position:absolute;left:-40px;bottom:40px;width:150px;height:200px;z-index:2;opacity:.9; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' fill='none' stroke='%237dd0c1' stroke-width='2'%3E%3Cpath d='M40 250C70 190 110 120 160 20'/%3E%3Cpath d='M70 195c-30-6-45-24-48-48 26 2 44 20 48 48zM86 165c28-10 42-30 42-54-26 8-40 28-42 54zM104 130c-28-8-42-28-44-52 26 4 42 24 44 52zM120 100c26-12 38-32 36-56-24 10-36 30-36 56zM138 66c-24-10-34-30-34-52 22 6 34 26 34 52z'/%3E%3C/svg%3E"); animation:mb2Flota 6s ease-in-out infinite} .gdw-mb2 .mb2-badge{position:absolute !important;top:28px;left:24px;z-index:3;width:auto !important;animation:mb2Flota 5s ease-in-out infinite} .gdw-mb2 .mb2-badge .elementor-widget-container{width:118px;height:118px;display:flex;align-items:center;justify-content:center;text-align:center} .gdw-mb2 .mb2-badge strong{display:block;font:400 34px/1 Georgia,serif} .gdw-mb2 .mb2-botones .elementor-widget-button{display:inline-block;width:auto;margin:0 12px 12px 0} .gdw-mb2 .elementor-button{transition:transform .25s,background-color .25s,color .25s,border-color .25s} .gdw-mb2 .elementor-button:hover{transform:translateY(-2px)} /* Barra de valores: tarjeta que monta sobre el hero */ .gdw-mb2.mb2-valores{position:relative;z-index:5} .gdw-mb2.mb2-valores .elementor-column:last-child{border-right:0 !important} .gdw-mb2 .elementor-widget-icon-box .elementor-icon-box-description p{margin:0} /* Cabeceras de bloque: título a la izquierda, enlace a la derecha */ .gdw-mb2 .mb2-enlace .elementor-button{padding-left:0;padding-right:0} .gdw-mb2 .mb2-enlace .elementor-button-icon{transition:transform .25s} .gdw-mb2 .mb2-enlace .elementor-button:hover .elementor-button-icon{transform:translateX(4px)} /* Tarjetas (banner): misma altura, imagen recortada y elevación al pasar el ratón */ .gdw-mb2 .mb2-tarjetas .elementor-widget-wrap,.gdw-mb2 .mb2-tarjetas .elementor-widget-banner, .gdw-mb2 .mb2-tarjetas .elementor-widget-banner>.elementor-widget-container,.gdw-mb2 .mb2-tarjetas .elementor-iqit-banner, .gdw-mb2 .mb2-tarjetas .elementor-iqit-banner>a{height:100%} .gdw-mb2 .mb2-tarjetas .elementor-widget-banner>.elementor-widget-container{overflow:hidden;transition:transform .3s,box-shadow .3s} .gdw-mb2 .mb2-tarjetas .elementor-widget-banner:hover>.elementor-widget-container{transform:translateY(-6px);box-shadow:0 26px 44px -28px rgba(15,47,44,.55)} .gdw-mb2 .mb2-tarjetas .elementor-iqit-banner>a{display:flex;flex-direction:column;text-decoration:none} .gdw-mb2 .mb2-tarjetas .elementor-iqit-banner-img{margin:0;overflow:hidden} .gdw-mb2 .mb2-tarjetas .elementor-iqit-banner-img img{width:100%;display:block;transition:transform .6s} .gdw-mb2 .mb2-tarjetas .elementor-widget-banner:hover .elementor-iqit-banner-img img{transform:scale(1.06)} .gdw-mb2 .mb2-tarjetas .elementor-iqit-banner-content-below{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px} .gdw-mb2 .mb2-tarjetas .elementor-iqit-banner-content-below>div:last-child{margin-top:auto;padding-top:8px} .gdw-mb2 .mb2-cats .elementor-iqit-banner-img img{aspect-ratio:4/3;object-fit:cover} /* Chips de «¿Qué te preocupa?» */ .gdw-mb2 .mb2-chips .elementor-widget-wrap{display:flex;flex-wrap:wrap;gap:10px} .gdw-mb2 .mb2-chips .elementor-widget-button{width:auto;margin:0 !important} /* Productos (las miniaturas están en estilos-tienda.css, para toda la tienda) */ .gdw-mb2 .swiper-button-prev,.gdw-mb2 .swiper-button-next{background:#fff !important;color:var(--mb-oscuro) !important;border:1px solid #dfe6e3 !important;border-radius:50% !important} /* Instagram: etiqueta, icono de vídeo y tarjeta comprable */ .gdw-mb2 .mb2-reels .elementor-iqit-banner-img{position:relative} .gdw-mb2 .mb2-reels .elementor-iqit-banner-img img{aspect-ratio:3/4;object-fit:cover} .gdw-mb2 .mb2-reels .elementor-iqit-banner-img::after{content:"\f04b";font:900 13px/34px "Font Awesome 6 Free";position:absolute;top:12px;right:12px; width:34px;height:34px;text-align:center;border-radius:8px;background:rgba(15,47,44,.72);color:#fff} .gdw-mb2 .mb2-reels .elementor-iqit-banner-subtitle{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px; background:rgba(255,255,255,.9);color:var(--mb-oscuro);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase} /* Rutinas (image-box con la foto a la derecha) */ .gdw-mb2 .mb2-rutinas .elementor-widget-image-box>.elementor-widget-container{overflow:hidden;height:100%;transition:transform .3s,box-shadow .3s} .gdw-mb2 .mb2-rutinas .elementor-widget-image-box:hover>.elementor-widget-container{transform:translateY(-4px);box-shadow:0 20px 36px -26px rgba(15,47,44,.5)} .gdw-mb2 .mb2-rutinas .elementor-image-box-wrapper{display:flex;align-items:stretch;height:100%} .gdw-mb2 .mb2-rutinas .elementor-image-box-img{margin:0 !important;flex:0 0 42%} .gdw-mb2 .mb2-rutinas .elementor-image-box-img img{width:100%;height:100%;object-fit:cover} .gdw-mb2 .mb2-rutinas .elementor-image-box-content{padding:20px 16px 20px 20px;align-self:center} /* Sobre mí */ .gdw-mb2 .mb2-sobre-foto .elementor-widget-wrap{position:relative} .gdw-mb2 .mb2-cruz{position:absolute !important;right:12%;bottom:-6px;width:auto !important;z-index:2;animation:mb2Flota 6s ease-in-out infinite} @keyframes mb2Flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* Tablet y móvil */ @media (max-width:1023px){ .gdw-mb2 .mb2-hero-foto .elementor-widget-image img{min-height:420px} .gdw-mb2 .mb2-rutinas .elementor-image-box-img{flex-basis:38%} } @media (max-width:767px){ /* Hero: la foto de móvil (4:5) va a su proporción. Con height:100% se estiraba a la altura de la columna (1033 px a 402 de ancho) y solo se veía una franja. */ .gdw-mb2 .mb2-hero-foto,.gdw-mb2 .mb2-hero-foto>.elementor-column-wrap,.gdw-mb2 .mb2-hero-foto .elementor-widget-wrap, .gdw-mb2 .mb2-hero-foto .elementor-widget-image,.gdw-mb2 .mb2-hero-foto .elementor-widget-image .elementor-image, .gdw-mb2 .mb2-hero-foto .elementor-widget-container{height:auto} .gdw-mb2 .mb2-hero-foto::before{display:none} .gdw-mb2 .mb2-hero-foto::after{display:none} .gdw-mb2 .mb2-hero-foto .elementor-widget-image img{height:auto;min-height:0;aspect-ratio:4/5;object-position:50% 25%} .gdw-mb2 .mb2-badge{top:auto;bottom:44px;left:auto;right:16px} /* Rejillas: calle de 10 px entre tarjetas en las dos direcciones */ .gdw-mb2 .mb2-tarjetas>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap, .gdw-mb2 .mb2-rutinas>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap{padding:5px !important} .gdw-mb2.mb2-ventajas>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap{padding:10px 6px !important} /* El carrusel de productos lleva márgenes negativos y ensanchaba la página 4 px */ .gdw-mb2.mb2-productos{overflow:hidden} .gdw-mb2 .mb2-badge .elementor-widget-container{width:96px;height:96px} .gdw-mb2.mb2-valores .elementor-column{border-right:0 !important} .gdw-mb2 .mb2-chips .elementor-widget-wrap,.gdw-mb2 .mb2-reels>.elementor-container>.elementor-row{flex-wrap:nowrap;overflow-x:auto; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .gdw-mb2 .mb2-chips .elementor-widget-button{flex:0 0 auto;scroll-snap-align:start} .gdw-mb2 .mb2-reels>.elementor-container>.elementor-row>.elementor-column{flex:0 0 78%;max-width:78%;scroll-snap-align:start} } @media (prefers-reduced-motion:reduce){ .gdw-mb2 *,.gdw-mb2 *::before,.gdw-mb2 *::after{animation:none !important;transition:none !important} } /* Marta Benítez · cabecera y pie (gdw-mbh v3). Los colores, fuentes, menú, logo, textos y enlaces se editan en el Theme Editor, el megamenú, «HTML y banners» y Elementor; aquí solo hay ajustes de presentación. */ #desktop_logo img.logo{width:120px;height:auto} #mobile-header img.logo{width:78px;height:auto} /* Top bar: mensajes (iqithtmlandbanners en displayNavCenter). Escritorio en línea; móvil, rotando */ .header-nav .center-nav .rte-content{display:flex !important;align-items:center;justify-content:center;gap:26px} .header-nav .center-nav .rte-content p{margin:0;white-space:nowrap;letter-spacing:.4px} .header-nav .center-nav .rte-content p+p::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#d5fe00;margin:0 26px 2px 0;vertical-align:middle} .header-nav .center-nav strong{color:#d5fe00;font-weight:700} /* Datos de contacto de la top bar (iqitcontactpage): móvil y email en una línea */ .block-iqitcontactpage-top-bar{display:flex;align-items:center;gap:18px} .block-iqitcontactpage-top-bar hr{display:none} .block-iqitcontactpage-top-bar .part{display:flex;align-items:center;gap:6px;white-space:nowrap} .block-iqitcontactpage-top-bar .part .icon{margin:0} @media (max-width:1199px){ .header-nav .center-nav .rte-content{display:block !important;position:relative;height:18px;overflow:hidden;min-width:260px} .header-nav .center-nav .rte-content p{position:absolute;inset:0;opacity:0;animation:mbhRota 16s infinite} .header-nav .center-nav .rte-content p:nth-child(2){animation-delay:4s} .header-nav .center-nav .rte-content p:nth-child(3){animation-delay:8s} .header-nav .center-nav .rte-content p:nth-child(4){animation-delay:12s} .header-nav .center-nav .rte-content p+p::before{content:none} } @keyframes mbhRota{0%{opacity:0;transform:translateY(6px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-6px)}} /* Buscador redondeado, como en las webs de referencia */ #search_widget .form-search-control{border-radius:999px;padding-left:22px;height:46px} #search_widget .search-btn,#search_widget button[type=submit]{border-radius:0 999px 999px 0} /* Menú: subrayado lima al pasar, etiquetas en píldora y pestaña destacada «Rutinas» */ #cbp-hrmenu>ul>li>a .cbp-tab-title{position:relative} #cbp-hrmenu>ul>li>a .cbp-tab-title::after{content:"";position:absolute;left:0;right:14px;bottom:-9px;height:2px;border-radius:2px;background:#d5fe00;transform:scaleX(0);transform-origin:left;transition:transform .25s} #cbp-hrmenu>ul>li:hover>a .cbp-tab-title::after{transform:scaleX(1)} #cbp-hrmenu .cbp-legend{border-radius:999px;padding:2px 8px;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase} #cbp-hrmenu-tab-1>a{background:#eaf6f3;border-radius:999px;margin:9px 4px} #cbp-hrmenu-tab-1>a .cbp-tab-title::after{display:none} #cbp-hrmenu-tab-1:hover>a{background:#d5fe00} /* Submenú (rejilla del megamenú) */ #cbp-hrmenu .cbp-hrsub-inner{border-radius:0 0 20px 20px;box-shadow:0 30px 60px -30px rgba(15,47,44,.45);padding:26px 10px} #cbp-hrmenu .cbp-column-title{font:400 19px/1.2 Georgia,serif;text-transform:none;color:#0f2f2c;margin-bottom:10px} /* padding-left: el tema pinta la flecha con un ::before absoluto a la izquierda del enlace */ #cbp-hrmenu .cbp-category-link-w a{display:inline-block;position:relative;text-transform:lowercase;padding:3px 0 3px 14px;transition:color .2s,transform .2s} #cbp-hrmenu .cbp-category-link-w a::first-letter{text-transform:uppercase} #cbp-hrmenu .cbp-category-link-w a:hover{transform:translateX(3px)} #cbp-hrmenu .cbp-banner-image{border-radius:16px} /* Pie (Elementor en displayFooterBefore) */ #footer-container-main{padding-top:0;padding-bottom:0} /* El Theme Editor pinta los enlaces del pie con #footer-container-main a (1,0,1), que pisa el color del texto de los botones de Elementor (quedaba blanco sobre lima). Los botones del pie del kit son de acento con texto oscuro */ #footer-container-main a.elementor-button,#footer-container-main a.elementor-button:hover{color:var(--mb-oscuro)} .mbf .mbf-enlaces .elementor-icon-list-item a{transition:color .2s} .mbf .mbf-enlaces .elementor-icon-list-item a:hover .elementor-icon-list-text{color:#d5fe00 !important} .mbf-newsletter .elementor-newsletter-form input[type=email],.mbf-newsletter .elementor-newsletter-form .form-control{border-radius:999px;padding-left:22px} .mbf-newsletter .elementor-newsletter-btn{border-radius:999px !important;padding:0 26px !important;font-weight:700;letter-spacing:1.2px;text-transform:uppercase} #footer-copyrights{font-size:13px} #footer-copyrights .copyrightYear{display:none} #footer-copyrights,#footer-copyrights a{color:#cfe3de} #footer-copyrights a:hover{color:#d5fe00} @media (prefers-reduced-motion:reduce){.header-nav .center-nav .rte-content p{animation:none}} .mbf .elementor-widget-image img{max-width:150px !important} /* Consentimiento RGPD de la newsletter (psgdpr): sobre la franja lima heredaba el gris claro del pie a 9,6 px */ .mbf-newsletter .text-muted,.mbf-newsletter .psgdpr_consent_message{color:#0f2f2c !important;font-size:12px;line-height:1.45} .mbf-newsletter .psgdpr_consent_message a{color:#0f2f2c !important;text-decoration:underline} /* Las rejillas y carruseles del tema llevan márgenes negativos y la página se desplazaba de lado (406 px en un móvil de 402, 1445 en la categoría a 1440). clip no crea contenedor de scroll: no rompe la cabecera fija */ #main-page-content{overflow-x:clip} /* Móvil (iPhone 16 Pro = 402 px) */ @media (max-width:767px){ /* Top bar en una sola línea: solo los mensajes rotando y el icono de Instagram (el email ya está en el pie) */ .header-nav .left-nav{display:none !important} .header-nav .row{flex-wrap:nowrap;align-items:center} .header-nav .center-nav{flex:1 1 auto;min-width:0;text-align:center} .header-nav .center-nav>.d-inline-block{display:block !important} .header-nav .center-nav .rte-content{min-width:0;width:100%;height:20px} .header-nav .center-nav .rte-content p{font-size:12px;line-height:20px} .header-nav .right-nav{flex:0 0 auto} #mobile-header img.logo{width:92px} /* Pie: aire entre bloques y copyright centrado */ .mbf-principal>.elementor-container>.elementor-row>.elementor-column{margin-bottom:28px} .mbf-principal>.elementor-container>.elementor-row>.elementor-column:last-child{margin-bottom:0} #footer-copyrights .copyright-txt,#footer-copyrights .copyright-txt p,#footer-copyrights .copyright-img{text-align:center !important} } /* Menú móvil (iqitmegamenu › Mobile menu: categorías reales + enlaces Rutinas y Contacto). Los nombres de categoría vienen en mayúsculas del catálogo: se muestran en minúscula con inicial mayúscula */ #iqitmegamenu-mobile .mobile-menu__link{text-transform:lowercase;color:#0f2f2c} #iqitmegamenu-mobile .mobile-menu__link::first-letter{text-transform:uppercase} #iqitmegamenu-mobile .mobile-menu__scroller>.mobile-menu__tab{border-bottom:1px solid #e6ebe9;padding:4px 0} #iqitmegamenu-mobile .mobile-menu__scroller>.mobile-menu__tab>.mobile-menu__link{font:400 19px/1.6 Georgia,serif} #iqitmegamenu-mobile .mobile-menu__submenu .mobile-menu__link{font-size:14px;color:#55605e;padding:3px 0} #iqitmegamenu-mobile .mobile-menu__arrow{color:#28645c} /* La fila footerBefore trae 30 px de relleno oscuro encima de la franja de newsletter */ #footer .footerBefore{padding-top:0} /* Marta Benítez · resto de la tienda (gdw-mbt v1): listados, ficha de producto, contacto, botones del tema y WhatsApp. Solo presentación: no cambia ningún comportamiento (carrito, filtros, formularios). Los colores y las fuentes base del tema siguen en el Theme Editor; esto afina lo que el Theme Editor no alcanza. */ :root{--mb-oscuro:#0f2f2c;--mb-oscuro2:#28645c;--mb-suave:#7dd0c1;--mb-claro:#eaf6f3;--mb-acento:#d5fe00;--mb-linea:#e6ebe9;--mb-texto:#55605e} /* Botones del tema: píldora verde (se cancela el borde rojo del tema) */ .btn-primary,.btn-primary:disabled{background:var(--mb-oscuro);border:1px solid var(--mb-oscuro) !important;color:#fff;border-radius:999px;font-weight:700;letter-spacing:.6px} .btn-primary:hover,.btn-primary:focus{background:var(--mb-acento);border-color:var(--mb-acento) !important;color:var(--mb-oscuro)} .btn-secondary,.btn-default{border-radius:999px;border:1px solid var(--mb-linea) !important} /* Miniaturas de producto (listados, carruseles, «otros productos») */ .product-miniature .thumbnail-container{border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .25s,transform .25s} .product-miniature:hover .thumbnail-container{box-shadow:0 18px 36px -26px rgba(15,47,44,.5);transform:translateY(-3px)} .product-miniature .product-brand a,.product-miniature .product-category-name{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mb-oscuro2)} .product-miniature .product-title a{color:var(--mb-oscuro)} .product-miniature .btn-product-list{border:1px solid var(--mb-oscuro2) !important;color:var(--mb-oscuro2) !important;background:transparent !important;border-radius:999px !important;padding:7px 18px;transition:background-color .2s,color .2s} .product-miniature .btn-product-list:hover{background:var(--mb-oscuro2) !important;color:#fff !important} .product-miniature .product-functional-buttons a,.product-miniature .product-functional-buttons button{border-radius:50%} /* Listado de categoría: subcategorías en píldora, orden y cajas laterales */ .block-categories .category-sub-menu a{display:inline-block;border-radius:999px !important;border-color:var(--mb-linea) !important;padding:7px 16px;text-transform:lowercase;color:var(--mb-oscuro);transition:background-color .2s,border-color .2s} .block-categories .category-sub-menu a::first-letter{text-transform:uppercase} .block-categories .category-sub-menu a:hover{background:var(--mb-claro);border-color:var(--mb-suave) !important} .products-sort-order .select-title{border-radius:999px} #left-column .block,#left-column .iqitfreedeliverycount,.product-recibelo,#product .iqitfreedeliverycount{border-radius:16px !important;border-color:var(--mb-linea) !important;background:#fff} .iqitfreedeliverycount .progress{border-radius:999px;background:var(--mb-claro)} .iqitfreedeliverycount .progress-bar{background:var(--mb-oscuro2)} /* Ficha de producto */ #product h1.page-title,.page-title{font-weight:400;color:var(--mb-oscuro)} #product .product-thumbs img,#product .js-thumb{border-radius:10px} #product .nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;color:#8a9491} #product .nav-tabs .nav-link.active,#product .nav-tabs .nav-link:hover{color:var(--mb-oscuro);border-bottom-color:var(--mb-acento)} .section-title{font-family:Georgia,serif;font-weight:400;color:var(--mb-oscuro)} /* Contacto: página nativa /contactenos y widget ContactForm de Elementor */ .contact-form .form-control,.elementor-contact-form .form-control{border-radius:12px;border-color:var(--mb-linea);background:#fbfcfb} .contact-form .form-control:focus,.elementor-contact-form .form-control:focus{border-color:var(--mb-oscuro2);box-shadow:0 0 0 3px rgba(125,208,193,.35)} .contact-form .btn-primary,.elementor-contact-form .btn-primary{padding:12px 30px} .contact-rich .part .icon i{color:var(--mb-oscuro2)} /* WhatsApp (iqitcontactpage en displayFooter): se oculta su bloque de pie, que duplica el de Elementor, y queda solo el botón flotante. El número y los textos se cambian en Módulos › iqitcontactpage */ #footer .block-iqitcontactpage{display:none !important} .whatsappFooter .whatsappIconText{background:#fff;color:var(--mb-oscuro);border-radius:14px;box-shadow:0 10px 30px -12px rgba(15,47,44,.45);font-weight:600} /* El .row>*{width:100%} de Bootstrap 5 (Warehouse 4.8) estira el contenedor fijo del botón a todo el ancho: una franja transparente de ~79 px que se quedaba los clics de la parte baja de la pantalla. Solo reciben clics el icono y el bocadillo */ .row>.whatsappFooter{width:auto;left:auto} .whatsappFooter{pointer-events:none} .whatsappFooter>*{pointer-events:auto} .whatsappFooter>.hideWhatsappIconText{pointer-events:none} /* Página de contacto (CMS 15 «Contacto», con Elementor: generar_contacto.py). Empieza directamente en el hero: fuera la miga de pan y el título automático de la página CMS (el H1 es el titular del hero) */ .cms-id-15 h1.page-title,.cms-id-15 .page-header,.cms-id-15 .pageHeader,.cms-id-15 #wrapper .breadcrumb,.cms-id-15 nav.breadcrumb{display:none !important} .cms-id-15 #wrapper{padding-top:0} .cms-id-15 #content-wrapper .page-content,.cms-id-15 #main .page-content{padding-top:0;margin-top:0} .mbc-hero .elementor-heading-title em{display:block;color:var(--mb-acento)} .mbc-foto img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%} .mbc-canales{position:relative;z-index:3} .mbc-canales .elementor-widget-wrap,.mbc-canales .elementor-widget-icon-box,.mbc-canales .elementor-widget-icon-box>.elementor-widget-container{height:100%} .mbc-canales .elementor-widget-icon-box>.elementor-widget-container{transition:transform .25s,box-shadow .25s} .mbc-canales .elementor-widget-icon-box:hover>.elementor-widget-container{transform:translateY(-4px)} .mbc-canales .elementor-icon-box-description p{margin:0} .mbc-canales .elementor-icon-box-description{overflow-wrap:anywhere} .mbc-canales .elementor-icon-box-title a,.mbc-canales .elementor-icon a{color:inherit} .mbc-faq .elementor-accordion-item{border-radius:14px;overflow:hidden;margin-bottom:10px} .mbc-faq .elementor-tab-content a{color:var(--mb-oscuro2);text-decoration:underline} .mbc-form .form-footer,.mbc-form .form-group:last-child{margin-bottom:0} @media (max-width:767px){ .mbc-canales>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap{padding:5px !important} .mbc-hero .mb2-botones .elementor-widget-button{display:block;margin-right:0} } /* Marta Benítez · cabecera de martabenitezfarma.es (gdw-mbc v2, 28-09-2026). Respeta el diseño de la clienta (boceto y /themes/gpdw/assets/css/custom.css): dos estados en escritorio. · Normal: fondo verde corporativo (Theme Editor › hw_bg_color, en #header); menú, iconos, buscador y logo en blanco. · Al pasar el ratón sin estar fija, o fija al bajar: fondo blanco (h_sticky_bg y esta hoja) y todo en verde oscuro; fija, con el logo a 90 px (como en el custom.css). Colores del Theme Editor que lo hacen posible: h_sticky_bg #ffffff, hm_bg_color vacío (el menú no tiene fondo propio), buscador transparente. Aquí solo va lo que el editor no permite. */ /* Logo. El del tema va con ruta relativa (img/cms/…) y fuera de la home no carga, así que la caja se encogía y el logo blanco del custom.css (#desktop_logo::after, a tamaño natural) se montaba sobre el menú. Los dos logos se pintan aquí con ruta absoluta y se funden con opacity; la imagen del tema se queda transparente (conserva su alt y el enlace) */ #desktop_logo{position:relative;display:inline-block;width:120px;height:70px;transition:width .4s,height .4s} #desktop_logo a{display:block;width:100%;height:100%;background:none !important} #desktop_logo a img.logo{display:block;width:100% !important;height:100% !important;opacity:0 !important} #desktop_logo::before,#desktop_logo::after{content:"" !important;position:absolute;top:0;left:0;width:100%;height:100%; background:no-repeat left center/contain;pointer-events:none;transition:opacity .4s} #desktop_logo::after{background-image:url(/img/cms/logo-martaBenitezFarma-white.svg);opacity:1} #desktop_logo::before{background-image:url(/img/cms/logo-martaBenitezFarma.svg);opacity:0} .stuck-header #desktop_logo::after,#desktop-header:hover #desktop_logo::after{opacity:0 !important} .stuck-header #desktop_logo::before,#desktop-header:hover #desktop_logo::before{opacity:1} .stuck-header #desktop_logo{width:90px;height:52px} /* Estado blanco al pasar el ratón (el fijo ya lo da el custom.css con h_sticky_bg): las mismas reglas que la clienta puso para .stuck-header */ #desktop-header{transition:background-color .6s} #desktop-header:not(.stuck-header):hover{background-color:#fff} #desktop-header:hover .header-top .form-search-control{border-color:rgb(13 53 42 / 25%);color:#171717} #desktop-header:hover .header-top .form-search-control::placeholder{color:#171717} #desktop-header:hover .header-top .search-btn, #desktop-header:hover .header-top .header-btn-w .header-btn>.icon{color:#0d3429} #desktop-header:hover .cbp-horizontal>ul>li>a,#desktop-header:hover .cbp-horizontal>ul>li>a:not([href]):not([tabindex]), #desktop-header:hover .cbp-horizontal>ul>li>.cbp-main-link{color:#0d3429} /* En blanco, el lima del paso del ratón apenas se ve: verde medio */ .stuck-header .cbp-horizontal>ul>li:hover>a,.stuck-header .cbp-horizontal>ul>li:hover>a .cbp-tab-title, #desktop-header:hover .cbp-horizontal>ul>li:hover>a,#desktop-header:hover .cbp-horizontal>ul>li:hover>a .cbp-tab-title{color:#28645c} /* Buscador en el estado verde: texto de ayuda claro */ #desktop-header:not(.stuck-header):not(:hover) .header-top .form-search-control::placeholder{color:rgba(255,255,255,.72);opacity:1} #desktop-header:not(.stuck-header):not(:hover) .header-top .search-btn{color:#fff} /* Pestaña destacada «Rutinas» en píldora: translúcida en verde, suave en blanco; al pasar, lima con texto verde */ #cbp-hrmenu-tab-1>a{background:rgba(255,255,255,.1)} .stuck-header #cbp-hrmenu-tab-1>a,#desktop-header:hover #cbp-hrmenu-tab-1>a{background:rgba(13,52,41,.07)} #cbp-hrmenu-tab-1:hover>a{background:#d5fe00 !important} #cbp-hrmenu-tab-1:hover>a,#cbp-hrmenu-tab-1:hover>a .cbp-tab-title{color:#0d3429 !important} /* Separador fino entre la barra superior y la cabecera; sin sombra que corte el verde del hero (la fija lleva la línea que le pone el custom.css) */ #header .header-nav{border-bottom:1px solid rgba(255,255,255,.08)} #desktop-header .iqit-megamenu-container{border-top:0} #header,#desktop-header:not(.stuck-header),#mobile-header{box-shadow:none;border-bottom:0} /* Móvil: la cabecera es verde (no cambia de estado) y el logo del tema es oscuro: se pinta el blanco */ #mobile-header .mobile-main-bar .col-mobile-logo a,#mobile-header #mobile_logo a{ display:inline-block;background:url(/img/cms/logo-martaBenitezFarma-white.svg) no-repeat left center/contain} #mobile-header .col-mobile-logo a img.logo,#mobile-header #mobile_logo a img.logo{opacity:0} /* Marta Benítez · martabenitezfarma.es (gdw-mbp v1). Solo lo propio de la tienda real, que no está en las hojas comunes (web nativa + cabecera integrada). La portada de la clienta usa además /themes/gpdw/assets/css/custom.css (clases home*), que no se toca. */ /* Pie: el bloque de iqitcontactpage sigue enganchado a displayFooter (de él sale el botón de WhatsApp) pero su contenido ya está en el pie de Elementor; los bloques de enlaces del tema se desenganchan en Diseño › Posiciones */ #footer .block-iqitcontactpage{display:none !important} /* Portada (layout 2): los dos botones del hero en línea; en el móvil, uno debajo de otro */ .elementor-widget-button.mbp-hero-btn{display:inline-block;width:auto;position:relative;z-index:3} @media (max-width:767px){.elementor-widget-button.mbp-hero-btn{display:block}} /* Contacto (CMS 15): el hero lleva H2 (gen/contacto_produccion.py) y el H1 es el título de la CMS. La hoja común lo oculta con display:none (en la demo el H1 es el hero): aquí se deja fuera de la vista pero no de los lectores de pantalla ni de los buscadores, y la franja de cabecera no ocupa sitio */ .cms-id-15 .pageHeader{display:block !important;padding:0 !important;margin:0 !important;border:0 !important;min-height:0 !important;height:0 !important;background:none !important} .cms-id-15 .pageHeader h1.page-title{display:block !important;position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0);white-space:nowrap;border:0 !important} /* Envío gratis (iqitfreedeliverycount: ficha, categoría y carrito) y «Recíbelo» de la ficha: el verde de la marca, como el pie, en vez del rojo por defecto de Warehouse y el lima sobre blanco */ .iqitfreedeliverycount,.iqitfreedeliverycount strong,.iqitfreedeliverycount .cantidad-falta-envio-gratis, .iqitfreedeliverycount .ifdc-remaining-price{color:#0d3429 !important} .iqitfreedeliverycount .iqitfreedeliverycount-title strong{font-weight:600} .iqitfreedeliverycount-product{color:#55605e !important} .iqitfreedeliverycount .icon-envio-2,.iqitfreedeliverycount .icon-envio-2::before, .product-recibelo .iconContent-envioRecibelo,.product-recibelo .iconContent-envioRecibelo::before{color:#28645c !important} .iqitfreedeliverycount .progress{background:#e3ebe7 !important;height:8px !important;border-radius:999px;overflow:hidden} .iqitfreedeliverycount .progress-bar{background-color:#28645c !important;background-image:none !important;border-radius:999px} .product-recibelo{color:#0d3429} /* Pestaña de cookies y corazón de favoritos de la ficha: sin rojo ni lima sobre blanco */ #cookiesplus-tab,#cookiesplus-tab .cookiesplus-tab-text,#cookiesplus-tab .fa-cookie{color:#0d3429 !important} .icon-favorito.not-added,.icon-favorito.not-added::before,.icon-favorito-lleno.added,.icon-favorito-lleno.added::before{color:#28645c !important} /* Portada · rutinas (boceto): a la izquierda la foto de fondo con el titular; a la derecha el carrusel de tarjetas de rutina (imagen + título sobre los colores corporativos, compuestas a partir de las fotos de la clienta: /img/cms/homeRutinas/rutina-*.jpg). El fondo de la columna es fijo en escritorio (parallax sencillo) */ .mbp-rut-foto>.elementor-column-wrap{border-radius:24px;overflow:hidden} .mbp-rut-foto .titleSerif .italic{color:#28645c} .mbp-rut-carrusel img,.mbp-marcas-carrusel img{border-radius:20px;width:100%;height:auto} .mbp-rut-carrusel .slick-slide,.mbp-rut-carrusel .swiper-slide,.mbp-marcas-carrusel .slick-slide,.mbp-marcas-carrusel .swiper-slide{padding:0 8px} .mbp-rut-carrusel a img,.mbp-marcas-carrusel a img{transition:transform .35s ease,box-shadow .35s ease} .mbp-rut-carrusel a:hover img,.mbp-marcas-carrusel a:hover img{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(13,52,41,.55)} @media (max-width:1024px){.mbp-rut-foto>.elementor-column-wrap{background-attachment:scroll !important}} @media (max-width:767px){.mbp-rut-foto>.elementor-column-wrap{min-height:360px}} /* 29-09-2026 (Mario). Carruseles de la portada y de las páginas con Elementor: - flechas redondas en verde oscuro corporativo (#0d3429) que pasan al verde manzana (#d5fe00) al pasar el ratón, en todos los carruseles (productos, marcas y rutinas); más pequeñas en el móvil; - marcas y rutinas con el mismo ancho que el resto de secciones: las tarjetas llevan 8 px de aire a cada lado (padding de la diapositiva) y el carrusel lo compensa para que la primera y la última toquen el borde */ .elementor-swiper-button.swiper-button-prev,.elementor-swiper-button.swiper-button-next{width:44px!important;height:44px!important;padding:0!important;margin-top:-22px!important;border-radius:50%!important;background:#0d3429!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center;box-shadow:0 8px 18px -10px rgba(13,52,41,.6);transition:background-color .25s ease,color .25s ease,transform .25s ease} .elementor-swiper-button.swiper-button-prev:hover,.elementor-swiper-button.swiper-button-next:hover,.elementor-swiper-button.swiper-button-prev:focus-visible,.elementor-swiper-button.swiper-button-next:focus-visible{background:#d5fe00!important;color:#0d3429!important;transform:scale(1.06)} .elementor-swiper-button.swiper-button-prev:after,.elementor-swiper-button.swiper-button-next:after{font-size:18px!important;line-height:1!important;color:inherit!important} .elementor-swiper-button.swiper-button-prev:after{margin-right:2px} .elementor-swiper-button.swiper-button-next:after{margin-left:2px} .elementor-swiper-button.swiper-button-disabled{opacity:.35!important} .mbp-marcas-carrusel .elementor-image-carousel-wrapper,.mbp-rut-carrusel .elementor-image-carousel-wrapper{margin-left:-8px;margin-right:-8px} /* Rutinas: la foto homeRutinas.jpg deja la pared a la izquierda y la cara a la derecha; el texto ocupa la mitad izquierda para no tapar la cara (fondo normal, no fijo: fijo se ajusta a la pantalla y la cara quedaba oculta) */ .mbp-rut-foto .elementor-widget-heading,.mbp-rut-foto .elementor-widget-text-editor{max-width:46%} /* Ventajas antes del pie: iconos SVG de 72 px (el control nativo solo admite %), con un leve salto al pasar el ratón */ .mbp-confianza .mbp-ventaja .elementor-image-box-img{width:72px!important;flex:0 0 72px} .mbp-confianza .mbp-ventaja .elementor-image-box-img img{width:72px;height:72px;filter:drop-shadow(0 8px 14px rgba(13,52,41,.12));transition:transform .3s ease} .mbp-confianza .mbp-ventaja:hover .elementor-image-box-img img{transform:translateY(-4px) rotate(-4deg)} @media (max-width:767px){.mbp-confianza .mbp-ventaja .elementor-image-box-img{width:60px!important;margin:0 auto 10px!important}.mbp-confianza .mbp-ventaja .elementor-image-box-img img{width:60px;height:60px}} @media (max-width:767px){.elementor-swiper-button.swiper-button-prev,.elementor-swiper-button.swiper-button-next{width:36px!important;height:36px!important;margin-top:-18px!important}.elementor-swiper-button.swiper-button-prev:after,.elementor-swiper-button.swiper-button-next:after{font-size:15px!important}} /* 30-09-2026 (Mario, cambios de la clienta) */ /* Lima más potente en todo el sitio: el custom.css de la clienta lo define como --verde (#cdcf3b) */ html:root{--verde:#d5fe00} /* Hero: carrusel de ofertas en lugar de la foto */ .mbp-hero-carrusel .swiper-slide-image{width:100%;height:auto;border-radius:24px;display:block} .mbp-hero-carrusel .swiper-pagination-bullet{background:#fff;opacity:.55;width:9px;height:9px} .mbp-hero-carrusel .swiper-pagination-bullet-active{background:#d5fe00;opacity:1;width:26px;border-radius:9px} /* Categorías: 5 fotos verticales con desfase alterno al hacer scroll (como 24hfarmaciaonline.es) */ .mbp-cat5 .mbp-cat5-img img{width:100%;height:auto;border-radius:20px;display:block;transition:transform .5s ease,box-shadow .5s ease} .mbp-cat5 .mbp-cat5-img a:hover img{transform:scale(1.025);box-shadow:0 24px 44px -26px rgba(13,52,41,.55)} @supports (animation-timeline:view()){@media (min-width:768px) and (prefers-reduced-motion:no-preference){ .mbp-cat5 .mbp-cat5-col>.elementor-column-wrap{animation:mbpCatSube linear both;animation-timeline:view();animation-range:cover 0% cover 100%} .mbp-cat5 .mbp-cat5-col:nth-child(even)>.elementor-column-wrap{animation-name:mbpCatBaja} @keyframes mbpCatSube{from{transform:translateY(70px)}to{transform:translateY(-70px)}} @keyframes mbpCatBaja{from{transform:translateY(-40px)}to{transform:translateY(60px)}}}} @media (max-width:767px){.mbp-cat5>.elementor-container>.elementor-row{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px} .mbp-cat5 .mbp-cat5-col{flex:0 0 46%!important;width:46%!important;scroll-snap-align:start}} /* Dos banners de oferta 3:2 */ .mbp-ofertas2 .mbp-oferta-img img{width:100%;height:auto;border-radius:20px;display:block;transition:transform .4s ease,box-shadow .4s ease} .mbp-ofertas2 .mbp-oferta-img a:hover img{transform:translateY(-4px);box-shadow:0 26px 46px -28px rgba(13,52,41,.55)} /* Carruseles de productos montados sobre la imagen lateral y su fondo por debajo de ella (como sanenriquefarma.com) */ @media (min-width:1025px){ .homeSectionCarousel .mbp-car-img{z-index:2} .homeSectionCarousel .mbp-car-prod>.elementor-column-wrap{background:transparent!important} .homeSectionCarousel .mbp-car-prod::before{content:"";position:absolute;top:0;bottom:0;border-radius:15px;z-index:0} /* 01-10-2026: el fondo llega bajo toda la imagen lateral (la columna de la imagen mide la mitad que la de productos) y la imagen se acorta 44 px arriba y abajo, para que se vea el fondo por encima y por debajo de ella */ /* (01-10-2026, Mario: el fondo solo un 25 % por debajo de la imagen: hueco de 14 px + 25 % de la imagen, que mide la mitad de la columna de productos menos el hueco → 12,5 % + 10,5 px) */ .homeSectionCarousel .mbp-car-izq::before{left:0;right:calc(-12.5% - 10.5px);background:#d2e7da} .homeSectionCarousel .mbp-car-der::before{left:calc(-12.5% - 10.5px);right:0;background:#f6fdd6} .homeSectionCarousel .mbp-car-img>.elementor-column-wrap{margin-top:44px;margin-bottom:44px} .homeSectionCarousel .mbp-car-prod .elementor-widget-wrap{position:relative;z-index:3} .homeSectionCarousel .mbp-car-izq .elementor-widget-wrap{width:calc(100% + 100px)!important;margin-right:-100px} .homeSectionCarousel .mbp-car-der .elementor-widget-wrap{width:calc(100% + 100px)!important;margin-left:-100px}} /* 01-10-2026 (Mario): en los carruseles de productos asomaba una franja blanca de la tarjeta siguiente (y de la anterior al avanzar). El tema deja ver la zona del relleno del carrusel (15 px; 12,9 en el móvil) y cada tarjeta solo tiene 7 px (6) de margen: se recortan 10 px por lado, que tapan la franja y no cortan las flechas (medido de 375 a 1920) */ .homeSectionCarousel .mbp-car-prod .swiper-container-wrapper{clip-path:inset(0 10px)} /* Hero: flechas abajo a la derecha (en medio tapaban el titular). 01-10-2026 (Mario): la rama floral blanca y la forma verde de la clienta van POR ENCIMA del carrusel, y todas las diapositivas en 3:2 (la foto de la farmacéutica es 1,78:1) */ .mbp-hero-ofertas .shapeHomeImgTop{z-index:3} .elementor-widget.floralHomeImgTop{z-index:4} .mbp-hero-carrusel .swiper-slide-image{aspect-ratio:3/2;object-fit:cover} .mbp-hero-carrusel .elementor-swiper-button{top:auto!important;bottom:22px;margin-top:0!important} .mbp-hero-carrusel .elementor-swiper-button-prev{left:auto!important;right:78px!important} .mbp-hero-carrusel .elementor-swiper-button-next{right:22px!important} /* 01-10-2026 (Mario): controles del carrusel del hero en lima para que destaquen; la rama floral, a ras del final del fondo verde (se coloca respecto a su contenedor, que acaba 102 px antes por el relleno de la columna) */ .mbp-hero-carrusel .elementor-swiper-button.swiper-button-prev,.mbp-hero-carrusel .elementor-swiper-button.swiper-button-next{background:#d5fe00!important;color:#0d3429!important} .mbp-hero-carrusel .elementor-swiper-button.swiper-button-prev:hover,.mbp-hero-carrusel .elementor-swiper-button.swiper-button-next:hover{background:#fff!important;color:#0d3429!important} .mbp-hero-carrusel .swiper-pagination-bullet{background:#d5fe00!important;opacity:.45} .mbp-hero-carrusel .swiper-pagination-bullet-active{opacity:1} .elementor-widget.floralHomeImgTop{bottom:-102px!important} /* Categorías: banner nativo con el texto editable encima de la foto */ .mbp-cat5-banner .elementor-iqit-banner{border-radius:20px;overflow:hidden} .mbp-cat5-banner .elementor-iqit-banner-img img{width:100%;height:auto;display:block;transition:transform .6s ease} .mbp-cat5-banner:hover .elementor-iqit-banner-img img{transform:scale(1.04)} /* El tema solo enseña la capa del banner al pasar el ratón (opacity:0): aquí, fija y más intensa para leer el texto */ .elementor-widget.mbp-cat5-banner .elementor-iqit-banner-overlay{opacity:1;background-image:linear-gradient(180deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.72) 70%,rgba(255,255,255,.94) 100%)!important} .mbp-cat5-banner .elementor-iqit-banner-title::before{content:"";display:block;width:34px;height:3px;background:#28645c;margin-bottom:12px} /* Marcas: el nombre es texto (lo pinta el script del Theme Editor desde el «Image alt» de cada diapositiva) */ .mbp-marcas-carrusel .swiper-slide-inner{position:relative;border-radius:20px;overflow:hidden} .mbp-marcas-carrusel .swiper-slide-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(255,255,255,.85) 0%,rgba(255,255,255,.45) 20%,rgba(255,255,255,0) 45%);pointer-events:none} .mbp-marcas-carrusel .mbp-marca-nombre{position:absolute;z-index:1;left:18px;right:14px;bottom:16px;font:400 20px/1.1 Georgia,'Times New Roman',serif;color:#0d3429;pointer-events:none} .mbp-marcas-carrusel .mbp-marca-nombre::before{content:"";display:block;width:28px;height:2px;background:#28645c;margin-bottom:9px} @media (max-width:767px){.mbp-marcas-carrusel .mbp-marca-nombre{font-size:16px;left:12px;bottom:12px}} /* Menú: iconos de línea delante de cada pestaña (como farmaciapedromorenoarroyo.es); blancos en la cabecera verde y verde oscuro en la blanca (al pasar el ratón o fija) */ .cbp-horizontal .cbp-mainlink-iicon{width:17px;height:17px;margin-right:6px;vertical-align:-3px;filter:brightness(0) invert(1);transition:filter .3s} .stuck-header .cbp-horizontal .cbp-mainlink-iicon,#desktop-header:hover .cbp-horizontal .cbp-mainlink-iicon{filter:none} /* Con los iconos y la pestaña nueva el menú no cabía en una fila (1661 px en 1412): letra de 12 px, menos espaciado y sin la flecha de desplegable (los submenús se abren igual al pasar el ratón). Medido: una fila desde 1025 px */ @media (min-width:1025px){.cbp-horizontal>ul>li>a{padding-left:9px!important;padding-right:9px!important} .cbp-horizontal>ul>li>a .cbp-tab-title{font-size:12px!important;letter-spacing:.6px!important} .cbp-horizontal>ul>li>a .cbp-submenu-aindicator{display:none}} @media (min-width:1025px) and (max-width:1365px){.cbp-horizontal>ul>li>a{padding-left:6px!important;padding-right:6px!important} .cbp-horizontal>ul>li>a .cbp-tab-title{font-size:11.5px!important;letter-spacing:.3px!important}.cbp-horizontal .cbp-mainlink-iicon{margin-right:4px}} @media (min-width:1025px) and (max-width:1199px){.cbp-horizontal .cbp-mainlink-iicon{display:none}} /* «Promociones» (pestaña 12, la primera), destacada en píldora lima en los dos estados de la cabecera */ #cbp-hrmenu-tab-12>a{background:#d5fe00!important;border-radius:999px;box-shadow:0 6px 16px -8px rgba(213,254,0,.8)} #cbp-hrmenu-tab-12>a,#cbp-hrmenu-tab-12>a .cbp-tab-title,#cbp-hrmenu-tab-12:hover>a,#cbp-hrmenu-tab-12:hover>a .cbp-tab-title{color:#0d3429!important} #cbp-hrmenu-tab-12 .cbp-mainlink-iicon{filter:none!important} #cbp-hrmenu-tab-12:hover>a{background:#fff!important;box-shadow:inset 0 0 0 2px #0d3429} /* 01-10-2026 (Mario): la imagen de los desplegables del menú ocupa toda su columna (la última), de arriba abajo y hasta el borde derecho, sin márgenes (como farmaciapedromorenoarroyo.es). Recorte centrado; en Infantil y Ortopedia, desplazado para no cortar la cara del bebé ni la rodilla */ @media (min-width:1025px){.cbp-horizontal .cbp-hrsub-inner{position:relative} .cbp-horizontal .cbp-hrsub .cbp-menu-column:last-child:has(.cbp-banner-image){position:absolute;top:0;right:0;bottom:0;width:25%;max-width:none;margin:0!important;padding:0!important} .cbp-horizontal .cbp-hrsub .cbp-menu-column:last-child:has(.cbp-banner-image) .cbp-menu-column-inner,.cbp-horizontal .cbp-hrsub .cbp-menu-column:last-child:has(.cbp-banner-image) a{display:block;height:100%} .cbp-horizontal .cbp-hrsub .cbp-menu-column:last-child .cbp-banner-image{width:100%;height:100%;object-fit:cover;border-radius:0 0 20px 0;display:block} .cbp-horizontal .cbp-banner-image[src*="homeCatCard-bebes"]{object-position:85% 50%} .cbp-horizontal .cbp-banner-image[src*="homeCatCard-ortopedia"]{object-position:70% 50%} .cbp-horizontal .cbp-hrsub .cbp-menu-column.col-4:last-child:has(.cbp-banner-image){width:33.333%} .cbp-horizontal .cbp-hrsub .cbp-menu-column.col-6:last-child:has(.cbp-banner-image){width:50%}} /* 01-10-2026 (Mario): en los carruseles de productos y en rutinas, la columna izquierda entra con fadeInLeft y la derecha con fadeInRight (animación de la columna, en el editor). En escritorio, la columna de productos no se mueve entera: si se moviera, sus tarjetas quedarían bajo la imagen lateral mientras dura la animación. Se animan por separado su fondo y sus tarjetas, con el mismo movimiento, y cada capa sigue en su sitio */ @media (min-width:1025px){.homeSectionCarousel .mbp-car-prod.animated{animation-name:none!important} .homeSectionCarousel .mbp-car-prod.fadeInLeft::before,.homeSectionCarousel .mbp-car-prod.fadeInLeft>.elementor-column-wrap>.elementor-widget-wrap{animation:fadeInLeft 1.25s both} .homeSectionCarousel .mbp-car-prod.fadeInRight::before,.homeSectionCarousel .mbp-car-prod.fadeInRight>.elementor-column-wrap>.elementor-widget-wrap{animation:fadeInRight 1.25s both}} /* 01-10-2026 (Mario): logo de la cabecera a 170 px de ancho y a 120 px cuando se fija (logo-martaBenitezFarma.svg y -white.svg, que subió Mario a /img/cms). La imagen de header-2.tpl está oculta y los logos son ::after (blanco) y ::before (oscuro) de #desktop_logo: basta con cambiar la caja, sin tocar el tpl */ #desktop_logo{width:170px;height:73px} .stuck-header #desktop_logo{width:120px;height:52px} /* Móvil (mobile-header-2): el mismo sistema, con los mismos tamaños. Al fijarse al bajar (#mobile-header-sticky.stuck) pasa a blanco con el logo oscuro y los iconos en verde oscuro, como la de escritorio. La barra pierde algo de relleno para que el logo grande no la haga demasiado alta */ #mobile-header .mobile-main-bar .col-mobile-logo a{position:relative;display:block;width:170px;height:73px;background:none!important;transition:width .4s,height .4s} #mobile-header .mobile-main-bar .col-mobile-logo a img.logo{display:block;width:100%!important;height:100%!important;opacity:0} #mobile-header .mobile-main-bar .col-mobile-logo a::before,#mobile-header .mobile-main-bar .col-mobile-logo a::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:no-repeat left center/contain;pointer-events:none;transition:opacity .4s} #mobile-header .mobile-main-bar .col-mobile-logo a::after{background-image:url(/img/cms/logo-martaBenitezFarma-white.svg);opacity:1} #mobile-header .mobile-main-bar .col-mobile-logo a::before{background-image:url(/img/cms/logo-martaBenitezFarma.svg);opacity:0} #mobile-header .mobile-main-bar{padding-top:12px;padding-bottom:12px;transition:padding .4s} #mobile-header #mobile-header-sticky{transition:background-color .6s} #mobile-header #mobile-header-sticky.stuck{background:#fff;box-shadow:0 1px 0 rgba(13,52,41,.1)} #mobile-header-sticky.stuck .mobile-main-bar{padding-top:8px;padding-bottom:8px} #mobile-header-sticky.stuck .mobile-main-bar .col-mobile-logo a{width:120px;height:52px} #mobile-header-sticky.stuck .mobile-main-bar .col-mobile-logo a::after{opacity:0} #mobile-header-sticky.stuck .mobile-main-bar .col-mobile-logo a::before{opacity:1} #mobile-header-sticky.stuck .m-nav-btn{color:#0d3429} #mobile-header-sticky.stuck .m-nav-btn:hover{color:#28645c} /* 05-10-2026 (MEJORAS WEB 2, punto 4): los textos del hero por encima de la rama floral, que se quedaba sobre las palabras; en el móvil, además, la rama más transparente (en la imagen: el widget lleva su propia animación de opacidad) */ .mbp-hero-textos .elementor-widget:not(.floralHomeImgTop){position:relative;z-index:5} @media (max-width:767px){.elementor-widget.floralHomeImgTop img{opacity:.35!important}} /* 13-10-2026 (la clienta: la rama sigue montándose sobre los textos). Mide el 100 % del alto de la columna de textos, así que cuanto más estrecha la pantalla, más grande y más se mete en el texto (a 1060 px, 327 x 692 sobre el titular, «en tu día a día», el párrafo y el botón). En escritorio, como mucho 380 px de alto (180 de ancho): cabe entre los textos y el carrusel, anclada abajo, sin tocar ninguna letra (medido con sus píxeles de 1025 a 1920 px). En móvil y tablet, con las columnas apiladas, el texto ocupa todo el ancho y no hay hueco: se quita */ @media (min-width:1025px){.elementor-widget.floralHomeImgTop{height:min(100%,380px)!important}} @media (max-width:1024px){.elementor-widget.floralHomeImgTop{display:none!important}} /* Punto 5: tarjetas de producto de los carruseles a la misma altura: el nombre en 2 líneas como máximo (siempre ocupa 2) y el botón abajo. La clase d-block del tema fuerza display:block, de ahí el !important */ .elementor-widget-prestashop-widget-ProductsList .swiper-slide{height:auto;display:flex} .elementor-widget-prestashop-widget-ProductsList .js-product-miniature-wrapper{display:flex;width:100%} .elementor-widget-prestashop-widget-ProductsList .product-miniature{display:flex;flex-direction:column;width:100%} .elementor-widget-prestashop-widget-ProductsList .product-description{flex:1 1 auto;display:flex;flex-direction:column} .elementor-widget-prestashop-widget-ProductsList .product-title{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25em;min-height:2.5em} .elementor-widget-prestashop-widget-ProductsList .product-add-cart{margin-top:auto} /* Punto 11: paginación de los listados redonda, como las flechas de los carruseles (la actual en verde oscuro y lima al pasar el ratón); el tema la pintaba en cuadrados con borde gris */ .page-list{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px} .page-list::before,.page-list::after{display:none} .page-list li{border:0!important;margin:0!important} .page-list li a{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:999px;border:1px solid rgba(13,52,41,.2);color:#0d3429!important;font-weight:600;transition:background-color .25s,color .25s,border-color .25s} .page-list li a:hover{background:#d5fe00;border-color:#d5fe00;color:#0d3429!important} .page-list li.current a{background:#0d3429;border-color:#0d3429;color:#fff!important} /* 08-10-2026 (auditoría móvil y tablet). En tablet (768-1024) el editor mantiene las columnas de escritorio: el titular del hero se partía palabra a palabra en 307 px, las 5 categorías quedaban en 134 px y en «Rutinas» el titular de la foto iba palabra a palabra y el carrusel, en tarjetas de 95 px. El hero y «Rutinas» se apilan (como en el móvil) y las categorías pasan a la tira deslizable del móvil, con 3 y algo a la vista, sin el desfase de escritorio (dentro de la tira no se ve) y sin su hueco de 90 px debajo. El pie de la clienta (displayFooterBefore) va en tablet sin margen lateral: 35 px + los 15 de la columna, como el resto de la página, y el texto bajo el logo, centrado como él. Elementor solo deja saltar de línea a las columnas por debajo de 1024 (max-width:1023px): a 1024 justos hay que ponerlo en cada fila que se apila */ @media (min-width:768px) and (max-width:1024px){ .elementor-row:has(>.mbp-hero-textos),.mbp-rutinas2>.elementor-container>.elementor-row{flex-wrap:wrap} .elementor-column.mbp-hero-textos,.elementor-column.mbp-hero-ofertas{width:100%!important} .mbp-hero-textos>.elementor-column-wrap{padding-bottom:8px!important} .mbp-hero-ofertas>.elementor-column-wrap{padding-left:50px!important;padding-right:50px!important} .mbp-cat5>.elementor-container>.elementor-row{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:6px;scrollbar-width:thin} .mbp-cat5 .mbp-cat5-col{flex:0 0 30%!important;width:30%!important;scroll-snap-align:start} .mbp-cat5 .mbp-cat5-col>.elementor-column-wrap{animation:none!important;transform:none!important} .elementor-section.mbp-cat5{padding-bottom:40px!important} .mbp-rutinas2 .elementor-column{width:100%!important} .mbp-rutinas2 .elementor-column:not(.mbp-rut-foto)>.elementor-column-wrap{padding:28px 0 0!important} .elementor-displayFooterBefore .elementor-top-section>.elementor-container{padding-left:35px;padding-right:35px} .elementor-displayFooterBefore .elementor-md-100 .elementor-text-editor{text-align:center}} /* Carruseles de productos por debajo de 1025: el custom.css de la tienda pone gap:1rem en la fila y la columna de la imagen caía debajo, en una franja de 50 px (la altura del espaciador). Se apilan: la imagen arriba, como una banda, y los productos a todo el ancho */ @media (max-width:1024px){ .homeSectionCarousel .elementor-row{flex-wrap:wrap;row-gap:14px;column-gap:0} .homeSectionCarousel .elementor-column.mbp-car-prod,.homeSectionCarousel .elementor-column.mbp-car-img{width:100%!important} .homeSectionCarousel .elementor-column.mbp-car-img{order:-1} .homeSectionCarousel .mbp-car-img>.elementor-column-wrap{min-height:220px;border-radius:15px;background-size:cover!important;background-position:center!important} .homeSectionCarousel .mbp-car-img .elementor-widget-spacer{display:none}} @media (max-width:767px){.homeSectionCarousel .mbp-car-img>.elementor-column-wrap{min-height:150px;margin-top:10px}} /* 16-10-2026 (Mario: «haz las miniaturas de los productos más atractivas»). Tarjeta de producto en todos los listados y carruseles: tarjeta blanca con borde suave que se eleva al pasar el ratón; la foto, sobre blanco, con aire alrededor y un pequeño zoom al pasar el ratón (sin fondo de color ni mix-blend-mode: los envases claros se vuelven translúcidos, regla 15 de la base de conocimiento); marca en verde, nombre en 2 líneas, precio más visible y «Comprar» relleno a todo el ancho, con el lima al pasar el ratón. Corazón y vista rápida, en círculos blancos */ .product-miniature-default.product-miniature-grid{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(13,52,41,.08);border-radius:18px;padding:10px;transition:box-shadow .3s,transform .3s,border-color .3s} @media (hover:hover){.product-miniature-default.product-miniature-grid:hover{box-shadow:0 24px 40px -28px rgba(13,52,41,.5);border-color:rgba(13,52,41,.18);transform:translateY(-3px)}} .product-miniature-default.product-miniature-grid .thumbnail-container{background:#fff;border-radius:13px;box-shadow:none!important;transform:none!important} .product-miniature-default.product-miniature-grid .product-thumbnail img{padding:6%;transition:transform .5s cubic-bezier(.2,.7,.2,1)} @media (hover:hover){.product-miniature-default.product-miniature-grid:hover .product-thumbnail img{transform:scale(1.05)}} .product-miniature-default.product-miniature-grid .product-description{flex:1 1 auto;display:flex;flex-direction:column;padding:14px 6px 4px!important} .product-miniature-default.product-miniature-grid .product-brand a{font-weight:700;color:#28645c} .product-miniature-default.product-miniature-grid .product-title{min-height:0} .product-miniature-default.product-miniature-grid .product-title a{font-size:14.5px;font-weight:500;line-height:1.3;height:auto;min-height:2.6em;color:#0d3429} .product-miniature-default.product-miniature-grid .product-title a:hover{color:#28645c} .product-miniature-default.product-miniature-grid .product-price-and-shipping{margin:8px 0 12px;padding:0} .product-miniature-default.product-miniature-grid .product-price{color:#0d3429;font-weight:700} .product-miniature-default.product-miniature-grid .precioValorEntero{font-size:22px} .product-miniature-default.product-miniature-grid .precioValorDecimales{font-size:15px} .product-miniature-default.product-miniature-grid .precioValorSimbolo{font-size:13px;margin-left:1px} .product-miniature-default.product-miniature-grid .product-add-cart{margin-top:auto;width:100%} .product-miniature-default.product-miniature-grid .product-add-cart form,.product-miniature-default.product-miniature-grid .input-group-add-cart{display:flex;width:100%} .product-miniature-default.product-miniature-grid .btn-product-list{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#0d3429!important;border-color:#0d3429!important;color:#fff!important;font-weight:600;padding:10px 16px} .product-miniature-default.product-miniature-grid .btn-product-list:hover,.product-miniature-default.product-miniature-grid .btn-product-list:focus-visible{background:#d5fe00!important;border-color:#d5fe00!important;color:#0d3429!important} .product-miniature-default.product-miniature-grid .product-functional-buttons-bottom{inset:10px 10px auto auto} .product-miniature-default.product-miniature-grid .product-functional-buttons a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin:0 0 6px;box-shadow:0 4px 12px -4px rgba(13,52,41,.35)} .product-miniature-default.product-miniature-grid .product-functional-buttons i{font-size:15px;color:#0d3429} @media (max-width:767px){ .product-miniature-default.product-miniature-grid{padding:7px;border-radius:15px} .product-miniature-default.product-miniature-grid .thumbnail-container{border-radius:11px} .product-miniature-default.product-miniature-grid .product-thumbnail img{padding:4%} .product-miniature-default.product-miniature-grid .product-description{padding:10px 3px 2px!important} .product-miniature-default.product-miniature-grid .product-title a{font-size:13px} .product-miniature-default.product-miniature-grid .precioValorEntero{font-size:19px} .product-miniature-default.product-miniature-grid .btn-product-list{padding:9px 10px;font-size:13px} .product-miniature-default.product-miniature-grid .product-functional-buttons-bottom{inset:7px 7px auto auto} .product-miniature-default.product-miniature-grid .product-functional-buttons a{width:30px;height:30px} .product-miniature-default.product-miniature-grid .product-functional-buttons i{font-size:13px} } /* 20-10-2026 (MEJORAS WEB 3, Mario: «sí, hazla»). Móvil: los banners de ofertas y lo que va detrás pasan debajo de novedades (order; las dos secciones de novedades llevan mbp-nov), sin la foto de encima de los carruseles de productos (punto 10), carrusel del hero en 16:9 para que el hero quepa en una pantalla (punto 1), «Compra según tu necesidad» y «Ver rutinas» en una fila, la foto de rutinas sin su alto mínimo de 360 px (punto 6) y el ancla de «¿Qué necesitas hoy?» sin que la tape la cabecera fija. «Ver rutinas», como enlace (la hoja de la tienda pone borde con !important a .btn-secondary). Escritorio: la foto de rutinas pasa al 33 % (como la de novedades); al ser más estrecha, el titular caía sobre la cara: degradado claro a la izquierda y textos al 62 % del ancho */ #necesidades{scroll-margin-top:96px} .mbp-hero-rutinas .elementor-button{border:0!important;border-radius:0;padding-left:0;padding-right:0} @media (min-width:1025px){ .mbp-rut-foto>.elementor-column-wrap{position:relative} .mbp-rut-foto>.elementor-column-wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(244,239,232,.94) 0%,rgba(244,239,232,.8) 45%,rgba(244,239,232,0) 75%);pointer-events:none} .mbp-rut-foto .elementor-widget-wrap{position:relative;z-index:1} .mbp-rut-foto .elementor-widget-heading,.mbp-rut-foto .elementor-widget-text-editor{max-width:62%}} @media (max-width:767px){ .elementor:has(>.mbp-chips){display:flex;flex-direction:column} .elementor>.mbp-ofertas2,.elementor>.mbp-ofertas2~.elementor-top-section:not(.mbp-nov){order:1} .homeSectionCarousel .elementor-column.mbp-car-img{display:none!important} .mbp-hero-carrusel .swiper-slide-image{aspect-ratio:16/9} .mbp-hero-textos .elementor-widget.mbp-hero-movil,.mbp-hero-textos .elementor-widget.mbp-hero-rutinas{display:inline-block;width:auto;vertical-align:middle;margin-bottom:0} .mbp-hero-textos .elementor-widget.mbp-hero-movil{margin-right:8px} .mbp-hero-rutinas .elementor-button{text-decoration:underline;text-underline-offset:3px} .mbp-rut-foto>.elementor-column-wrap{min-height:0} .mbp-chips-fila{margin-left:-4px;margin-right:-4px} .mbp-chips-fila .elementor-column>.elementor-column-wrap{padding:4px!important} } /* 20-10-2026 (Mario: «mete un gap vertical entre los banners de ofertas y que el banner de rutinas sea igual de alto en móvil que los banners de ofertas»). En el móvil: 12 px entre los dos banners de ofertas y la foto de rutinas con su proporción (1340 x 600, 362 x 162 a 402 px), los textos centrados en vertical y el mismo degradado claro que en escritorio para que se lean sobre la foto (tamaños de letra y relleno, en el editor) */ @media (max-width:767px){ .mbp-ofertas2 .mbp-oferta-col+.mbp-oferta-col{margin-top:12px} .mbp-rut-foto>.elementor-column-wrap{aspect-ratio:1340/600;position:relative;align-items:center} .mbp-rut-foto>.elementor-column-wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(244,239,232,.92) 0%,rgba(244,239,232,.75) 50%,rgba(244,239,232,0) 80%);pointer-events:none} .mbp-rut-foto .elementor-widget-wrap{position:relative;z-index:1} .mbp-rut-foto .elementor-widget-heading,.mbp-rut-foto .elementor-widget-text-editor{max-width:62%} } /* 21-10-2026 (MEJORAS WEB 3, punto 9). «Para quién es» en la ficha de producto: va al final de la descripción corta de cada producto (bloque mbp-paraquien, una lista que se edita en el back office). La hoja de la tienda corta la descripción corta a 2 líneas: el corte pasa al párrafo y la lista se ve entera. Al lado del precio, el precio por 100 ml (mbp-precio-ud, lo escribe el script del Theme Editor con el precio por unidad del producto) */ #product .pageHeader .product-description:has(.mbp-paraquien){display:block;-webkit-line-clamp:unset;overflow:visible} #product .pageHeader .product-description:has(.mbp-paraquien)>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0} .mbp-paraquien{margin:14px 0 2px} .mbp-paraquien p.mbp-paraquien-t{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0d3429} .mbp-paraquien ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .mbp-paraquien li{margin:0;padding:6px 14px;border-radius:999px;background:#eaf6f3;color:#0d3429;font-size:13px;line-height:1.3;list-style:none} .mbp-precio-ud{display:inline-block;margin-left:14px;font-size:13px;color:#55605e;white-space:nowrap} /* 21-10-2026 (Mario: «oculta el contenido del pack en el stickyProductContent»). Al bajar por la ficha, el script de la tienda pasa el formulario de compra a la barra fija y, en los packs (rutinas), con él la lista «Este pack contiene»: la barra crecía a unos 465 px. En la barra fija no se ve; en la ficha, sí */ .productContentSticky .product-pack{display:none} /* 21-10-2026 (Mario: «haz mucho más atractiva visualmente la vista de producto y adáptala al diseño del sitio… algo parecido a grupodwkitb.es», y las pestañas de descripción, detalles y opiniones). Ficha de producto: la columna de compra pasa a ser una tarjeta blanca con borde suave y sombra; dentro, «Recíbelo entre…» en una línea con separador, el contador del envío gratis en una caja menta con el título y la barra, las tres ventajas en fichas en fila y los logos de pago pequeños y centrados. Cantidad y «Comprar» en píldora. Pestañas en píldoras (activa en verde) y su contenido en una tarjeta, también en el móvil. Entrada suave de la tarjeta y de las ventajas (sin ella con «reducir movimiento») */ #product #col-product-info{background:#fff;border:1px solid #e3e9e6;border-radius:24px;padding:26px 26px 20px;box-shadow:0 34px 70px -52px rgba(13,52,41,.55)} #product .product-reference{font-size:13px;color:#55605e} #product .product-reference .label{font-weight:400;color:inherit} #product .product-add-to-cart{padding-top:8px!important} #product .product-add-to-cart .add-to-cart{border-radius:999px} #product .product-add-to-cart .qty .input-group{border-radius:999px;overflow:hidden} #product .product-recibelo{font-size:14px;color:#55605e;margin:18px 0 0!important;padding:16px 0 0!important;border:0!important;border-top:1px solid #e3e9e6!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} #product .product-recibelo .row{align-items:center;flex-wrap:nowrap;justify-content:flex-start;gap:12px} #product .product-recibelo i{font-size:24px;color:#28645c} #product .product-recibelo strong{color:#0d3429} #product .iqitfreedeliverycount{color:#0d3429;margin:12px 0 0!important;border:0!important;border-radius:14px!important;background:#eaf6f3!important;padding:10px 14px 12px!important} #product .iqitfreedeliverycount-progress .row,#product .iqitfreedeliverycount-product{display:none!important} #product .iqitfreedeliverycount-title{font-size:13.5px;line-height:1.4} #product .iqitfreedeliverycount-progress:not(.progress-bar){margin:8px 0 0!important} #product .iqitfreedeliverycount-progress>.col{padding:0} #product .iqitfreedeliverycount .progress{height:6px;background:#fff;border-radius:999px} #product .iqitfreedeliverycount .progress-bar{background:#28645c;border-radius:999px} #product #iqithtmlandbanners-block-7,#product #iqithtmlandbanners-block-8{flex:0 0 auto;width:100%;max-width:100%;margin:14px 0 0;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} #product #iqithtmlandbanners-block-7 .block-content,#product #iqithtmlandbanners-block-8 .block-content{width:100%;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} #product .iconosVentajas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #product .iconosVentajas .icono{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:12px 6px;border-radius:14px;background:#f6f4ee;text-align:center;border:0!important} #product .iconosVentajas .icono>.col{flex:0 0 auto;width:auto;max-width:none;padding:0;font-size:12.5px;line-height:1.3;color:#0d3429} #product .iconosVentajas .icono i{font-size:22px;color:#28645c} #product .logosPago{text-align:center} #product .logosPago img{max-width:100%;opacity:.9;display:inline-block!important;width:170px!important;height:auto!important;padding:0!important} #product .product-tabs{margin-top:44px} #product .product-tabs .nav-tabs{border:0;gap:8px;flex-wrap:wrap;margin-bottom:16px} #product .product-tabs .nav-tabs .nav-item{margin:0} #product .product-tabs .nav-tabs .nav-link{border-radius:999px;background:#eaf6f3;padding:9px 18px;font-weight:700;font-size:14px;transition:background-color .2s,color .2s;border:0!important;color:#0d3429!important;opacity:1!important} #product .product-tabs .nav-tabs .nav-link.active,#product .product-tabs .nav-tabs .nav-link:hover{background:#0d3429;color:#fff!important} #product .product-tabs .nav-tabs .nav-link .iqitreviews-nb{color:inherit;opacity:.75;margin-left:4px} #product .product-tabs .tab-content{background:#fff;border:1px solid #e3e9e6;border-radius:24px;padding:26px 30px;box-shadow:0 30px 60px -54px rgba(13,52,41,.5)} #product #product-availability{border-radius:999px;padding:5px 12px} @media (hover:hover){#product .iconosVentajas .icono{transition:transform .25s,box-shadow .25s} #product .iconosVentajas .icono:hover{transform:translateY(-2px);box-shadow:0 14px 22px -18px rgba(13,52,41,.6)}} @keyframes mbpFichaSube{from{opacity:0;translate:0 24px}} @media screen and (prefers-reduced-motion:no-preference){ #product #col-product-info{animation:mbpFichaSube .7s cubic-bezier(.2,.8,.2,1) .15s backwards} #product .iconosVentajas .icono{animation:mbpFichaSube .6s cubic-bezier(.2,.8,.2,1) .45s backwards} #product .iconosVentajas .icono:nth-child(2){animation-delay:.52s} #product .iconosVentajas .icono:nth-child(3){animation-delay:.59s} } @media (max-width:767px){ #product #col-product-info{padding:20px 18px 16px;border-radius:20px} #product .product-tabs{margin-top:32px} #product .product-tabs .nav-tabs{display:flex;flex-direction:row} #product .product-tabs .nav-tabs .nav-item{flex:0 0 auto;width:auto} #product .product-tabs .nav-tabs .nav-link{padding:8px 14px;font-size:13px} #product .product-tabs .tab-content{padding:20px 18px} } /* 21-10-2026 (Mario: «el botón de compra cuando se mueve y se pone en el stickyProductContent genera un hueco que no debería generar»). El script de la tienda pasa el formulario de compra a la barra fija cuando su marca (#productInfoEndAnchor, encima del botón) sale de la pantalla y deja en su sitio un relleno de la misma altura: al bajar se veía ese hueco. La marca pasa a cubrir todo el bloque de compra: el formulario solo se va a la barra fija cuando el bloque entero ya no se ve, y vuelve en cuanto asoma, así que el relleno nunca está a la vista. 23-10-2026 (Mario: «al poner esta regla rompes el comportamiento del cambio de posición del botón de compra al quedar fuera del canvas»): cubriendo todo el bloque (con el Instagram, «Recíbelo», el envío gratis… debajo del botón), el botón seguía en su sitio aunque ya no se viera. Ahora la marca cubre solo el formulario de compra (o su hueco cuando está en la barra fija): la coloca el script de codes_js («Marca de la barra fija de compra»), porque en las rutinas (módulo de Manuel, #cp-section) el formulario no está arriba del bloque. Sin el script, una marca sin altura arriba */ #product .product-information{position:relative} #product #productInfoEndAnchor{position:absolute;top:0;bottom:auto;left:0;width:1px;height:0;pointer-events:none} /* 21-10-2026 (Mario: «no quites el icono del contador, hazlo más pequeño… y métele alguna animación en loop a los dos iconos»). Icono del envío gratis en un círculo blanco de 30 px: el camión (aún no llega) va y viene; la cara con corazón (ya llega) late. Sin animación con «reducir movimiento» */ #product .iqitfreedeliverycount>.row{align-items:center} #product .iqitfreedeliverycount .col-icon{display:flex!important;align-items:center;padding-right:0} #product .iqitfreedeliverycount .col-icon i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#28645c;font-size:16px;box-shadow:0 6px 12px -8px rgba(13,52,41,.6)} #product .iqitfreedeliverycount .col-icon i::before{display:inline-block} @keyframes mbpCamion{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px) translateY(-1px)}} @keyframes mbpLatido{0%,45%,100%{transform:scale(1)}12%,32%{transform:scale(1.2)}22%{transform:scale(1.04)}} @media screen and (prefers-reduced-motion:no-preference){ #product .iqitfreedeliverycount .icon-envio-2::before{animation:mbpCamion 1.1s ease-in-out infinite} #product .iqitfreedeliverycount .icon-cara-corazon::before{animation:mbpLatido 1.6s ease-in-out infinite} } /* 21-10-2026 (Mario: «los nombres del producto e iconos de eliminar el producto no se ven»). El carrito lateral está dentro de la cabecera verde y heredaba su regla de enlaces en blanco (.header-top a): nombres en verde, papelera en un círculo y la fila de cantidad, precio y papelera sin salirse del panel con precios largos */ #blockcart-content a:not(.btn){color:#0d3429} #blockcart-content a:not(.btn):hover{color:#28645c} #blockcart-content .remove-from-cart{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#f6f4ee} #blockcart-content .remove-from-cart i{color:#0d3429;font-size:14px} #blockcart-content .remove-from-cart:hover{background:#0d3429} #blockcart-content .remove-from-cart:hover i{color:#fff} #blockcart-content .cart-products .col-info .row{flex-wrap:nowrap} #blockcart-content .cart-products .col-info .row>.col{min-width:92px} #blockcart-content .cart-products .col-info .row>.col-auto{white-space:nowrap} /* 21-10-2026 (Mario: «adapta también los carruseles de productos de la vista de producto al diseño del sitio y hazlos más atractivos visualmente» y «también la vista del listado de productos»). Ficha: «También podría interesarle» y «Otros productos en la misma categoría» en un panel crema redondeado, título en serif verde con un trazo lima debajo (sin la raya gris) y flechas redondas blancas. Listados (categoría, marca, búsqueda, novedades, ofertas): las subcategorías en píldoras menta con su título como antetítulo, la barra de orden en una franja crema con los desplegables en píldora y, en la columna izquierda, el contador del envío gratis, las ventajas y los logos de pago con el estilo compacto de la ficha (los iconos del contador, animados como en la ficha) */ #product :is(.product-accessories,.category-products){margin-top:48px;padding:30px 28px 18px;border-radius:28px;background:#f6f4ee} #product :is(.product-accessories,.category-products) .section-title{margin:0 0 20px;padding:0;border:0;font:400 28px/1.15 Georgia,serif;color:#0d3429} #product :is(.product-accessories,.category-products) .section-title::after{content:"";display:block;width:44px;height:3px;margin-top:12px;border-radius:3px;background:#d5fe00} #product :is(.product-accessories,.category-products) :is(.swiper-button-prev,.swiper-button-next){width:42px;height:42px;margin-top:-21px;border-radius:50%;background:#fff;box-shadow:0 10px 22px -12px rgba(13,52,41,.6);opacity:1} #product :is(.product-accessories,.category-products) :is(.swiper-button-prev,.swiper-button-next)::after{font-size:18px;color:#0d3429} #product :is(.product-accessories,.category-products) .swiper-pagination-bullet-active{background:#0d3429} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #main .block-categories{margin:0 0 14px;padding:0;border:0} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #main .block-categories .block-title{margin:0 0 10px;padding:0;border:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #main .block-categories .block-title a{color:#28645c} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #main .block-categories .category-sub-menu{gap:8px} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #main .block-categories .category-sub-menu li{margin:0} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #main .block-categories .category-sub-menu li a{margin:0;padding:9px 16px;border:0;background:#eaf6f3;color:#0d3429;font-weight:600;transition:background-color .2s,color .2s} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #main .block-categories .category-sub-menu li a:hover{background:#0d3429;color:#fff} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #js-product-list-top{margin-bottom:18px;padding:8px 14px;border-radius:16px;background:#f6f4ee} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #js-product-list-top .view-switcher a{color:#9aa5a2} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #js-product-list-top .view-switcher a.current{color:#0d3429} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #js-product-list-top .showing{font-size:13px;color:#55605e} :is(#category,#manufacturer,#search,#prices-drop,#new-products,#best-sales) #js-product-list-top .select-title{height:auto;padding:6px 14px;border:1px solid #e3e9e6;background:#fff;color:#0d3429} #left-column .iqitfreedeliverycount{color:#0d3429;margin:0!important;border:0!important;border-radius:18px!important;background:linear-gradient(140deg,#eaf6f3,#f7fbfa)!important;padding:14px 16px 16px!important} #left-column .iqitfreedeliverycount>.row{align-items:center;margin:0} #left-column .iqitfreedeliverycount>.row>.col,#left-column .iqitfreedeliverycount>.row>.col-icon{padding-left:0} #left-column .iqitfreedeliverycount .col-icon i{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 8px 16px -10px rgba(13,52,41,.5);font-size:20px;color:#28645c} #left-column .iqitfreedeliverycount .col-icon i::before{display:inline-block} #left-column .iqitfreedeliverycount-title{font-size:14px;line-height:1.35} #left-column .iqitfreedeliverycount-progress:not(.progress-bar){padding:0;margin:12px 0 0!important} #left-column .iqitfreedeliverycount-progress .row{margin:0 0 6px!important;font-size:12px;color:#55605e} #left-column .iqitfreedeliverycount-progress .row>.col,#left-column .iqitfreedeliverycount-progress>.col{padding:0} #left-column .iqitfreedeliverycount-progress strong{font-weight:600} #left-column .iqitfreedeliverycount .progress{height:8px;background:#fff;border-radius:999px} #left-column .iqitfreedeliverycount .progress-bar{background:linear-gradient(90deg,#7dd0c1,#28645c);border-radius:999px} #left-column .iqitfreedeliverycount-product{display:none!important} #left-column #iqithtmlandbanners-block-7,#left-column #iqithtmlandbanners-block-8{flex:0 0 auto;width:100%;max-width:100%;margin:12px 0 0;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} #left-column #iqithtmlandbanners-block-7 .block-content,#left-column #iqithtmlandbanners-block-8 .block-content{width:100%;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} #left-column .iconosVentajas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #left-column .iconosVentajas .icono{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:10px 4px;border-radius:14px;background:#f6f4ee;text-align:center;border:0!important} #left-column .iconosVentajas .icono>.col{flex:0 0 auto;width:auto;max-width:none;padding:0;font-size:11.5px;line-height:1.3;color:#0d3429} #left-column .iconosVentajas .icono i{font-size:20px;color:#28645c} #left-column .logosPago{text-align:center} #left-column .logosPago img{max-width:100%;opacity:.9;display:inline-block!important;width:160px!important;height:auto!important;padding:0!important} @media screen and (prefers-reduced-motion:no-preference){ #left-column .iqitfreedeliverycount .icon-envio-2::before{animation:mbpCamion 1.1s ease-in-out infinite} #left-column .iqitfreedeliverycount .icon-cara-corazon::before{animation:mbpLatido 1.6s ease-in-out infinite} } @media (max-width:767px){ #product :is(.product-accessories,.category-products){margin-top:32px;padding:22px 14px 12px;border-radius:22px} #product :is(.product-accessories,.category-products) .section-title{font-size:22px} #product :is(.product-accessories,.category-products) :is(.swiper-button-prev,.swiper-button-next){display:none!important} } /* 21-10-2026 (Mario: «quita el en lugar de de los packs y reduce el padding entre productos en los carruseles de productos de la vista de producto»). Carruseles de la ficha: 12 px entre tarjetas (antes 30: 15 px de relleno a cada lado de cada producto). (22-10-2026, Mario: «quita eso que ocultaste de “en lugar de”»: Manuel ha rehecho las rutinas con un módulo que deja elegir unidades de cada producto; ya no se oculta .product-pack-price) */ #product :is(.product-accessories,.category-products) .js-product-miniature-wrapper{padding:6px} /* 21-10-2026 (Mario: «adapta también el recuadro del pack»). «Este pack contiene» (las rutinas): caja crema redondeada sin el borde gris, título en serif verde y cada producto en una tarjeta blanca con su foto, el nombre, la cantidad en píldora menta y el precio en verde */ #product .product-pack{margin:6px 0 14px;padding:16px 16px 8px;border:0;border-radius:18px;background:#f6f4ee} #product .product-pack>.h4{margin:0 0 12px;font:400 20px/1.2 Georgia,serif;color:#0d3429} #product .product-pack article{margin:0 0 8px;padding:0;border:0} #product .product-pack .pack-product-container{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:14px;background:#fff;box-shadow:0 8px 18px -16px rgba(13,52,41,.5)} #product .product-pack .pack-product-thumb{order:1;flex:0 0 56px;width:56px;max-width:none;padding:0} #product .product-pack .pack-product-thumb img{width:56px;height:56px;object-fit:contain;border-radius:10px} #product .product-pack .pack-product-name{order:2;flex:1 1 auto;min-width:0;max-width:none;padding:0;font-size:13.5px;line-height:1.35} #product .product-pack .pack-product-name a{color:#0d3429} #product .product-pack .pack-product-name a:hover{color:#28645c} #product .product-pack .pack-product-quantity{order:3;flex:0 0 auto;max-width:none;padding:3px 9px;border-radius:999px;background:#eaf6f3;color:#28645c;font-size:12px;font-weight:700} #product .product-pack .pack-product-price{order:4;flex:0 0 auto;max-width:none;padding:0;font-size:14px;color:#0d3429;white-space:nowrap} #product .product-pack .pack-product-price strong{font-weight:700} /* 21-10-2026 (Mario, con captura: el nombre y la cantidad del carrito lateral «deberían estar a la derecha de la imagen del producto, no debajo»). Con la fila de cantidad, precio y papelera sin partir (9.77), el bloque del nombre no podía estrecharse y bajaba debajo de la foto: foto y bloque, siempre en la misma fila, y el bloque se estrecha */ #blockcart-content .cart-products li>.row{flex-wrap:nowrap} #blockcart-content .cart-products .col-info{min-width:0} /* 21-10-2026 (Mario: «con respecto al contador del envío gratis haz la barra de progreso más atractiva visualmente»). En la ficha, los listados, el carrito lateral y el carrito: carril blanco con sombra interior y la barra dentro, en degradado menta → verde, con un brillo que la recorre en bucle y un punto lima al final que marca por dónde va (no sale con el carrito vacío). Al llegar al envío gratis, la barra pasa a verde oscuro y el punto queda dentro. Sin el brillo con «reducir movimiento» */ :is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress{position:relative;height:12px!important;padding:3px;border-radius:999px;background:#fff!important;box-shadow:inset 0 1px 3px rgba(13,52,41,.18);overflow:visible} :is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress-bar{position:relative;height:100%;border-radius:999px;background:linear-gradient(90deg,#7dd0c1,#28645c)!important;box-shadow:0 2px 8px -2px rgba(40,100,92,.6);overflow:visible;transition:width .9s cubic-bezier(.2,.8,.2,1)} :is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress-bar::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 65%);background-size:220% 100%;animation:mbpBrillo 2.4s linear infinite} :is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress-bar::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border:3px solid #fff;border-radius:50%;background:#d5fe00;box-shadow:0 2px 6px rgba(13,52,41,.35)} :is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress-bar[style*="width: 0"]::after{display:none} :is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress-bar[style*="100%"]{background:linear-gradient(90deg,#28645c,#0d3429)!important} :is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress-bar[style*="100%"]::after{right:0} @keyframes mbpBrillo{0%{background-position:120% 0}100%{background-position:-120% 0}} @media (prefers-reduced-motion:reduce){:is(#product,#left-column,#blockcart-content,#cart,#checkout) .iqitfreedeliverycount .progress-bar::before{animation:none;background:none}} /* 22-10-2026 (Mario: «ponlo como en la captura», demo2.presta-demos.com/instagram): cabecera del bloque de Instagram de la portada (módulo DW Instagram Reels en el widget «Module», clase mbp-instagram): «Instagram» y la cuenta debajo, a la izquierda, sin la foto de perfil; el botón «Síguenos en Instagram» a la derecha. El título, el texto del botón y su color se cambian en el módulo; aquí solo la colocación. La cabecera, con .dwigr delante: la hoja del módulo va detrás en el CSS combinado y su «.dwigr--align-left .dwigr__head{gap:1rem 2rem}» separaba la cuenta del título */ /* 22-10-2026 (Mario: «adapta el título tb del carrusel de la home al diseño del sitio»): el título, como los de sección («Novedades», «Nuestros favoritos»): Georgia, 42 px y 36 px en el móvil, verde oscuro. En el móvil va arriba a todo el ancho y debajo, la cuenta y el botón (a 36 px no cabe al lado del botón) */ /* 22-10-2026 (Mario, con captura: «quita el @grupodw.es y destaca el ver todo como si fuera un botón del sitio… ponlo debajo del carrusel»): la cabecera deja de ser una caja (display:contents) y sus piezas van a la rejilla del bloque: título a la izquierda y el botón de seguir a la derecha; debajo, el carrusel, y al final «Ver todo» (la galería del módulo, /instagram; se activa en el módulo) centrado y como los botones lima de la web («Descubre todas mis rutinas»). «Ver todo», con .dwigr__head y la «a» delante: el tema pinta los enlaces de negro con «a:link:not(.nav-link):not(.btn)» (0,3,1). Así no depende de la «Cabecera» del módulo (centrada o a la izquierda). 22-10-2026 (Mario, con captura: «vuelve a dejar visible el usuario»): la cuenta vuelve, con su foto, a la derecha y junto al botón de seguir (el enlace del perfil, en flex, en la columna 2); en el móvil, debajo del título. «Ver todo», a la derecha (Mario, con captura: «este botón que te marco alinéalo a la derecha») */ .mbp-instagram .dwigr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px} .mbp-instagram .dwigr .dwigr__head{display:contents} .mbp-instagram .dwigr__title{grid-column:1;grid-row:1;margin:0;color:#0d3429;font-family:Georgia,serif;font-size:42px;font-weight:400;line-height:1;text-align:left} .mbp-instagram .dwigr .dwigr__profile{grid-column:2;grid-row:1;justify-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px} .mbp-instagram .dwigr__user{color:#0d3429;font-size:14px;font-weight:600} .mbp-instagram .dwigr__follow{padding:11px 20px;font-size:13px;letter-spacing:.3px;white-space:nowrap;transition:background-color .25s,color .25s} .mbp-instagram .dwigr__follow:hover{background:#d5fe00;color:#0d3429} .mbp-instagram .dwigr .dwigr__body{grid-column:1/-1;grid-row:2;min-width:0;margin-top:22px} .mbp-instagram .dwigr .dwigr__head a.dwigr__all{grid-column:1/-1;grid-row:3;justify-self:end;display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:15px 30px;border:1px solid #e6ebe9;border-radius:999px;background:#d5fe00;color:#0d3429;font-size:13px;font-weight:700;letter-spacing:1.5px;line-height:1.2;text-transform:uppercase;text-decoration:none;transition:transform .25s,background-color .25s,color .25s} .mbp-instagram .dwigr .dwigr__head a.dwigr__all::after{content:"\2192";font-size:15px;letter-spacing:0} .mbp-instagram .dwigr .dwigr__head a.dwigr__all:hover,.mbp-instagram .dwigr .dwigr__head a.dwigr__all:focus-visible{background:#fff;color:#0d3429;opacity:1;transform:translateY(-2px);text-decoration:none} @media (max-width:767px){ .mbp-instagram .dwigr__title{grid-column:1/-1;font-size:36px} .mbp-instagram .dwigr .dwigr__profile{grid-column:1/-1;grid-row:2;justify-self:start;margin-top:14px} .mbp-instagram .dwigr .dwigr__body{grid-row:3;margin-top:18px} .mbp-instagram .dwigr .dwigr__head a.dwigr__all{grid-row:4;margin-top:24px} } @media (max-width:480px){ .mbp-instagram .dwigr__follow{padding:9px 14px;font-size:12px} } /* 22-10-2026 (Mario: «adapta ahora el diseño del carrusel de la home al diseño del sitio»): carrusel de Instagram de la portada con el estilo de los demás carruseles: tarjetas de 20 px de radio (como las de marcas) con fondo menta mientras carga la foto y que se elevan al pasar el ratón; el texto, sobre un degradado verde; flechas redondas en verde oscuro que pasan a lima (como las de Elementor). El track lleva aire arriba y abajo (compensado con margen negativo) para que la elevación y la sombra no se corten con su overflow. En el móvil, sin flechas, como hasta ahora (se desliza). Los puntos de producto, en lima con el número en verde, solo aquí (el color del módulo, en Ajustes, vale para toda la tienda) */ .mbp-instagram .dwigr{--dwigr-radius:20px;--dwigr-accent:#d5fe00} .mbp-instagram .dwigr .dwigr__track{padding:6px 0 24px;margin:-6px 0 -24px} .mbp-instagram .dwigr .dwigr__card{background:#eaf6f3;border:1px solid rgba(13,52,41,.08);transition:transform .3s ease,box-shadow .3s ease} .mbp-instagram .dwigr .dwigr__item:hover .dwigr__card{transform:translateY(-4px);box-shadow:0 22px 34px -24px rgba(13,52,41,.65)} .mbp-instagram .dwigr .dwigr__overlay{padding:3rem 1rem 1rem;background:linear-gradient(to top,rgba(13,52,41,.92) 0%,rgba(13,52,41,.55) 55%,rgba(13,52,41,0) 100%)} .mbp-instagram .dwigr .dwigr__excerpt{font-size:13px;line-height:1.45} .mbp-instagram .dwigr .dwigr__spot-dot{background:#d5fe00;color:#0d3429} .mbp-instagram .dwigr .dwigr__spot-label{color:#0d3429} .mbp-instagram .dwigr .dwigr__nav{background:#0d3429;color:#fff;box-shadow:0 8px 18px -10px rgba(13,52,41,.6);transition:background-color .25s ease,color .25s ease,transform .25s ease} .mbp-instagram .dwigr .dwigr__nav:hover,.mbp-instagram .dwigr .dwigr__nav:focus-visible{background:#d5fe00;color:#0d3429;transform:scale(1.06)} .mbp-instagram .dwigr .dwigr__nav svg{width:18px;height:18px} @media (prefers-reduced-motion:reduce){.mbp-instagram .dwigr .dwigr__item:hover .dwigr__card{transform:none}} /* 22-10-2026 (Mario: «haz lo mismo con el bloque de instagram en la vista de producto»): el bloque de Instagram de la ficha (DW Instagram Reels, «junto al botón de comprar», dentro de la tarjeta de compra), con el estilo del de la portada a su tamaño: tarjetas de 16 px de radio, fondo menta y borde fino, elevación al pasar el ratón, texto sobre degradado verde, puntos de producto en lima y flechas verde oscuro de 36 px que pasan a lima. Su título se quita en el módulo (vacío = no sale). #product es el body de la ficha; la ventana de la publicación (.dwigr-modal) no entra */ #product .dwigr{--dwigr-radius:16px;--dwigr-accent:#d5fe00} #product .dwigr .dwigr__track{padding:4px 0 18px;margin:-4px 0 -18px} #product .dwigr .dwigr__card{background:#eaf6f3;border:1px solid rgba(13,52,41,.08);transition:transform .3s ease,box-shadow .3s ease} #product .dwigr .dwigr__item:hover .dwigr__card{transform:translateY(-3px);box-shadow:0 16px 26px -18px rgba(13,52,41,.6)} #product .dwigr .dwigr__overlay{padding:2.2rem .7rem .7rem;background:linear-gradient(to top,rgba(13,52,41,.92) 0%,rgba(13,52,41,.55) 55%,rgba(13,52,41,0) 100%)} #product .dwigr .dwigr__excerpt{font-size:12px;line-height:1.4} #product .dwigr .dwigr__spot-dot{background:#d5fe00;color:#0d3429} #product .dwigr .dwigr__spot-label{color:#0d3429} #product .dwigr .dwigr__nav{width:36px;height:36px;margin-top:-18px;background:#0d3429;color:#fff;box-shadow:0 8px 18px -10px rgba(13,52,41,.6);transition:background-color .25s ease,color .25s ease,transform .25s ease} #product .dwigr .dwigr__nav:hover,#product .dwigr .dwigr__nav:focus-visible{background:#d5fe00;color:#0d3429;transform:scale(1.06)} #product .dwigr .dwigr__nav svg{width:16px;height:16px} @media (prefers-reduced-motion:reduce){#product .dwigr .dwigr__item:hover .dwigr__card{transform:none}} /* 22-10-2026 (Mario: «adapta la página de la galería tb»): la galería del módulo (/instagram, body #module-dwinstagramreels-gallery, rejilla) con el estilo del carrusel de la portada: tarjetas de 20 px de radio, fondo menta y borde fino, elevación al pasar el ratón, texto sobre degradado verde y puntos de producto en lima; la cuenta en verde y el botón de seguir como en la portada; «Cargar más», como los botones lima de la web. La página (migas y título) es la del tema, como las demás */ #module-dwinstagramreels-gallery .dwigr{--dwigr-radius:20px;--dwigr-accent:#d5fe00} /* (Mario: «aplica el mismo diseño fullwidth de la home con los mismos paddings a la vista de la galería de instagram»): la página a todo el ancho, como las secciones de la portada (full_width, 50 px a cada lado; 20 px en el móvil), en lugar del contenedor de 1440 px del tema: el de las migas y el título (.pageHeader) y el del contenido (#inner-wrapper) */ #module-dwinstagramreels-gallery :is(.pageHeader>.container,#inner-wrapper){max-width:none;padding-left:50px;padding-right:50px} @media (max-width:767px){#module-dwinstagramreels-gallery :is(.pageHeader>.container,#inner-wrapper){padding-left:20px;padding-right:20px}} /* (Mario, con captura: «distribuye estos elementos para que el perfil quede a la izquierda y el botón a la derecha»): el enlace del perfil, a todo el ancho de la rejilla, y el botón empujado a la derecha */ #module-dwinstagramreels-gallery .dwigr .dwigr__head{margin-bottom:26px;align-items:stretch} #module-dwinstagramreels-gallery .dwigr .dwigr__profile{display:flex;width:100%;justify-content:flex-start} #module-dwinstagramreels-gallery .dwigr .dwigr__user{color:#0d3429;font-size:14px;font-weight:600} #module-dwinstagramreels-gallery .dwigr .dwigr__follow{margin-left:auto;padding:11px 20px;font-size:13px;letter-spacing:.3px;white-space:nowrap;transition:background-color .25s,color .25s} @media (max-width:480px){#module-dwinstagramreels-gallery .dwigr .dwigr__follow{padding:9px 14px;font-size:12px}} #module-dwinstagramreels-gallery .dwigr .dwigr__follow:hover{background:#d5fe00;color:#0d3429} #module-dwinstagramreels-gallery .dwigr .dwigr__card{background:#eaf6f3;border:1px solid rgba(13,52,41,.08);transition:transform .3s ease,box-shadow .3s ease} #module-dwinstagramreels-gallery .dwigr .dwigr__item:hover .dwigr__card{transform:translateY(-4px);box-shadow:0 22px 34px -24px rgba(13,52,41,.65)} #module-dwinstagramreels-gallery .dwigr .dwigr__overlay{padding:3rem 1rem 1rem;background:linear-gradient(to top,rgba(13,52,41,.92) 0%,rgba(13,52,41,.55) 55%,rgba(13,52,41,0) 100%)} #module-dwinstagramreels-gallery .dwigr .dwigr__excerpt{font-size:13px;line-height:1.45} #module-dwinstagramreels-gallery .dwigr .dwigr__spot-dot{background:#d5fe00;color:#0d3429} #module-dwinstagramreels-gallery .dwigr .dwigr__spot-label{color:#0d3429} #module-dwinstagramreels-gallery .dwigr .dwigr__more-wrap{margin-top:34px} #module-dwinstagramreels-gallery .dwigr .dwigr__more{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border:1px solid #e6ebe9;border-radius:999px;background:#d5fe00;color:#0d3429;font-size:13px;font-weight:700;letter-spacing:1.5px;line-height:1.2;text-transform:uppercase;transition:transform .25s,background-color .25s,color .25s} #module-dwinstagramreels-gallery .dwigr .dwigr__more:hover,#module-dwinstagramreels-gallery .dwigr .dwigr__more:focus-visible{background:#fff;color:#0d3429;opacity:1;transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){#module-dwinstagramreels-gallery .dwigr .dwigr__item:hover .dwigr__card{transform:none}} /* ---------- Entrada y salida de cada página (22-10-2026, Mario: «implementa animaciones entre páginas de salida y entrada del header y wrapper & footer como en https://www.grupodwkitb.es/»): la misma que grupodwkitb.es (allí, 19-10-2026), con el prefijo de esta tienda. En todas las páginas. Al cargar, la cabecera entera (#header: barra superior y cabecera) baja desde arriba y el contenido (#wrapper) y el pie (#footer) aparecen. Al pulsar un enlace a otra página de la tienda, el script de codes_js pone .mbp-sale en <html>: la cabecera sube y el contenido se desvanece mientras carga la siguiente. Si se ha bajado por la página, sube la cabecera fija (#desktop-header.stuck-header en escritorio, #mobile-header-sticky en el móvil; .mbp-fija). Si el enlace está en el carrito o el menú del móvil (paneles fijos dentro de #header), la cabecera no se mueve: se desvanece (.mbp-panel). Las entradas no dejan nada puesto al acabar («backwards»): un transform en #header cambiaría la referencia de sus paneles fijos. Con «reducir movimiento», nada */ /* 22-10-2026 (Mario: «hace un extraño al cargar, como parpadeo, y algunas veces no llega a completar bien el cambio de color del header o lo deja a medias»): con #header desplazado al cargar, la cabecera fija del tema (Waypoint.Sticky sobre #desktop-header, que calcula al arrancar en qué punto se fija) lo medía fuera de la pantalla, calculaba un punto negativo y la dejaba fija y en blanco (con transición) estando arriba del todo, hasta recargar (grupodwkitb.es tiene lo mismo). Ahora la entrada no mueve nada: #header se revela de arriba abajo con clip-path (no cambia ninguna medida; misma curva y duración: el borde de abajo baja igual). Tampoco se anima lo de dentro: el tema envuelve #desktop-header y #mobile-header-sticky al arrancar (cabecera fija) y, al moverlos, el navegador reinicia sus animaciones (se veía el contenido desaparecer y volver a entrar). El «to» de clip-path va escrito: de inset() a «none» no se interpola y salta */ @media screen and (prefers-reduced-motion:no-preference){ #header{animation:mbpCabRevela .7s cubic-bezier(.2,.8,.2,1) backwards} #wrapper,#footer{animation:mbpAparece .7s ease .18s backwards} /* La salida arranca enseguida (curva estándar): si la siguiente página llega en 200 ms, ya se ha visto. La cabecera sube y a la vez se desvanece, con lo que lleva dentro (un desplegable abierto cuelga por debajo de ella) */ html.mbp-sale #header{animation:mbpCabSube .38s cubic-bezier(.4,0,.2,1) forwards} html.mbp-sale.mbp-fija #header{animation:none} html.mbp-sale.mbp-fija:not(.mbp-panel) #desktop-header.stuck-header,html.mbp-sale.mbp-fija:not(.mbp-panel) #mobile-header-sticky.stuck{animation:mbpCabSube .38s cubic-bezier(.4,0,.2,1) forwards} html.mbp-sale.mbp-panel #header{animation:mbpDesaparece .3s ease forwards} /* Desplegables abiertos (submenús del megamenú, cuenta, búsqueda, menú del móvil): se van los primeros */ html.mbp-sale #header .cbp-hrsub,html.mbp-sale #header .dropdown-menu{animation:mbpDesaparece .16s ease forwards} html.mbp-sale #wrapper,html.mbp-sale #footer{animation:mbpDesaparece .32s ease forwards} /* Al volver con «Atrás» (página guardada en memoria), el script quita .mbp-sale y pone .mbp-vuelta: sin repetir la entrada, que con la cabecera fija a medio scroll la escondería un momento */ html.mbp-vuelta #header,html.mbp-vuelta #wrapper,html.mbp-vuelta #footer{animation:none} } @keyframes mbpCabRevela{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}} @keyframes mbpCabSube{to{translate:0 -100%;opacity:0}} @keyframes mbpAparece{from{opacity:0}} @keyframes mbpDesaparece{to{opacity:0}} /* ---------- Filtros de las categorías (22-10-2026, Mario: «adapta el diseño de los filtros al diseño del sitio»). Búsqueda por facetas (ps_facetedsearch): Marca y Precio, en la columna izquierda (en el móvil, en el panel de «Filtrar»). Títulos en Georgia verde como los de sección; cada filtro en una caja blanca de 20 px de radio con borde suave y sombra, como las de la ficha. Marcas: casillas redondeadas que al marcarse pasan a verde oscuro con la marca en lima, el número en una píldora menta y la fila en menta al pasar el ratón o al estar elegida; la lista se desplaza dentro de la caja (300 px, la del tema) con una barra fina. Precio: barra menta, tramo elegido en verde y tiradores redondos lima (noUiSlider). Filtros activos, sobre el listado: píldoras verdes con la «×» en lima. El número de cada marca, en la fila: el tema lo pone en position:absolute arriba a la derecha (#search_filters .facet .facet-label a span.magnitude). La caja, con «aside»: la del tema (#search_filters .facet > ul) tiene la misma especificidad y va detrás en el CSS combinado */ #search_filters .facet{padding-top:22px} #search_filters .facet:first-child{padding-top:0} #search_filters .facet-title{margin:0 0 12px;font-family:Georgia,serif;font-size:22px;font-weight:400;line-height:1.15;color:#0d3429;text-transform:none;letter-spacing:0} #search_filters aside.facet>ul{margin:0;padding:10px 8px 10px 10px;background:#fff;border:1px solid #e3e9e6;border-radius:20px;box-shadow:0 30px 60px -54px rgba(13,52,41,.5)} #search_filters .facet>.facet-type-checkbox{scrollbar-width:thin;scrollbar-color:rgba(40,100,92,.35) transparent} #search_filters .facet .facet-label{display:flex;align-items:center;gap:10px;margin:0 0 2px;padding:7px 10px;border-radius:12px;cursor:pointer;transition:background-color .2s} #search_filters .facet .facet-label:hover,#search_filters .facet .facet-label.active{background:#eaf6f3} #search_filters .facet .facet-label a{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;line-height:1.3;color:#0d3429!important;text-decoration:none} #search_filters .facet .facet-label.active a{font-weight:700} #search_filters .facet ul .facet-label a span.magnitude{position:static;flex:0 0 auto;min-width:30px;padding:2px 8px;border-radius:999px;background:#eaf6f3;color:#28645c;font-size:12px;font-weight:600;line-height:1.4;text-align:center} #search_filters .facet-label:hover .magnitude,#search_filters .facet-label.active .magnitude{background:#fff} #search_filters .custom-checkbox{flex:0 0 auto;display:inline-flex} #search_filters .custom-checkbox input[type=checkbox]{top:0;left:0;width:18px;height:18px;margin:0} #search_filters .custom-checkbox input[type=checkbox]+span{width:18px;height:18px;margin:0;border:1.5px solid #b9ccc5;border-radius:6px;background:#fff;box-shadow:none;transition:background-color .2s,border-color .2s} #search_filters .facet-label:hover .custom-checkbox input[type=checkbox]+span{border-color:#28645c} #search_filters .custom-checkbox input[type=checkbox]:checked+span{background:#0d3429;border-color:#0d3429} #search_filters .custom-checkbox input[type=checkbox]:checked+span .checkbox-checked{inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#d5fe00} #search_filters .custom-checkbox input[type=checkbox]:focus-visible+span{outline:3px solid #d5fe00;outline-offset:2px} #search_filters .facet>ul.faceted-slider{padding:16px 22px 22px} #search_filters .faceted-slider p{margin:0 0 18px;font-size:14px;font-weight:700;color:#0d3429} #search_filters .noUi-target{height:6px;border:0;border-radius:999px;background:#e3efe9;box-shadow:none} #search_filters .noUi-connects{border-radius:999px} #search_filters .noUi-connect{background:linear-gradient(90deg,#28645c,#0d3429)} #search_filters .noUi-horizontal .noUi-handle{top:-8px;right:-11px;width:22px;height:22px;border:2px solid #0d3429;border-radius:50%;background:#d5fe00;box-shadow:0 4px 10px -4px rgba(13,52,41,.6);cursor:grab} #search_filters .noUi-handle::before,#search_filters .noUi-handle::after{display:none} #search_filters .noUi-handle:focus-visible{outline:3px solid rgba(213,254,0,.6);outline-offset:2px} #js-active-search-filters .active-filter-title{font-size:13px;font-weight:600;color:#55605e} #js-active-search-filters .filter-block .btn{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:0;border-radius:999px;background:#0d3429;color:#fff;font-size:13px;font-weight:600;transition:background-color .2s,color .2s} #js-active-search-filters .filter-block .btn i{color:#d5fe00;transition:color .2s} #js-active-search-filters .filter-block .btn:hover,#js-active-search-filters .filter-block .btn:focus-visible{background:#d5fe00;color:#0d3429} #js-active-search-filters .filter-block .btn:hover i,#js-active-search-filters .filter-block .btn:focus-visible i{color:#0d3429} /* 23-10-2026 (Mario: «en la página de contacto quita el form y pon el mapa de localización en su lugar»): el mapa de Google Maps va en la tarjeta blanca donde estaba el formulario (sección .mbc-mapa), con las esquinas redondeadas; en el móvil, más bajo. El alto de escritorio es el del widget (su CSS va en la página, detrás de esta hoja: de ahí el body en la regla del móvil) */ .mbc-mapa .elementor-widget-google_maps iframe{display:block;width:100%;border:0;border-radius:16px} @media (max-width:767px){body .mbc-mapa .elementor-widget-google_maps iframe{height:320px}}