.iqitfake{} /*** Style mixins ***/ /*** Variables mixins and functions ***/ body { background: #fff; } .container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1750px; } a:link:not(.nav-link):not(.btn), a:visited:not(.nav-link):not(.btn) { color: #000; } a:hover:not(.nav-link):not(.btn) { color: #f7b800; } .pagination .page-list li:hover { border-color: #f7b800; } .pagination .page-list li.current { border-color: #f7b800; } .pagination .page-list li.current a { color: #f7b800; } #mobile-header { background: #000; border-bottom: solid 1px #e3e3e3; } #mobile-header #mobile-header-sticky { background: #000; } #mobile-header .mobile-main-bar { padding-top: 0.6666666667rem; padding-bottom: 0.6666666667rem; } #mobile-header .m-nav-btn { color: #fff; } #mobile-header .m-nav-btn:hover { color: #fff; } #mobile-header .mobile-buttons-bar { background: #000; } #mobile-header .m-nav-btn { padding-top: 0.6666666667rem; padding-bottom: 0.6666666667rem; border: none 1px; border-left: none; } #mobile-header .m-nav-btn:hover { background: #bababa; } #mobile-header .col-mobile-btn:last-child .m-nav-btn { border-right: none; } html { font-size: 15px; } @media (max-width: 767px) { html { font-size: 14px; } } body { line-height: 1.5rem; } body { font-family: 'Archivo', sans-serif; } #blockcart-content { background: #fff; color: #000; border: solid 1px; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.15); } #blockcart-content a:not(.btn) { color: #000; } #blockcart-content a:not(.btn):hover { color: #000; } #blockcart-content .cart-products > li, #blockcart-content .cart-subtotals { border-color: #000; } #blockcart-content .cart-products::-webkit-scrollbar-thumb { background-color: #000; } /*** 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: #f8f8f8; color: #000; border: none 1px #f0f0f0; } .btn-secondary:hover, .btn-secondary.disabled:hover, .btn-secondary:disabled:hover, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:hover, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:hover, .group-span-filestyle .btn-default:hover, .btn-secondary:focus, .btn-secondary.disabled:focus, .btn-secondary:disabled:focus, .bootstrap-touchspin .group-span-filestyle .btn-touchspin:focus, .group-span-filestyle .bootstrap-touchspin .btn-touchspin:focus, .group-span-filestyle .btn-default:focus, .btn-secondary :active, .btn-secondary.disabled :active, .btn-secondary:disabled :active, .bootstrap-touchspin .group-span-filestyle .btn-touchspin :active, .group-span-filestyle .bootstrap-touchspin .btn-touchspin :active, .group-span-filestyle .btn-default :active { background: #dedede; color: #2e2e2e; } .btn-secondary:not(:disabled):not(.disabled):active { background: #d09c03; color: #fff; } .btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background: #f8f8f8; color: #000; border: solid 1px #e3e3e3; } .btn-outline-secondary:hover, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover { background: #dedede; color: #2e2e2e; border: solid 1px #e3e3e3; } /*** Primary button ***/ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: #000; color: #fff; border: none 1px; } .btn-primary:hover, .btn-primary.disabled:hover, .btn-primary:disabled:hover, .btn-primary:focus, .btn-primary.disabled:focus, .btn-primary:disabled:focus, .btn-primary :active, .btn-primary.disabled :active, .btn-primary:disabled :active { background: #d09c03; color: #fff; } .btn-primary:not(:disabled):not(.disabled):active { background: #d09c03; color: #fff; } #wrapper .breadcrumb { padding-top: 0.6666666667rem; padding-bottom: 0.6666666667rem; margin-top: -1.3333333333rem; margin-bottom: 1.3333333333rem; font-size: 0.8rem; font-style: normal; font-weight: normal; text-transform: none; color: #8f8f8f; } #wrapper .breadcrumb li:after { color: #8f8f8f; } #wrapper .breadcrumb a { color: #8f8f8f; } /*** Text fields ***/ .form-control { background-color: #fff; color: #777; border: solid 1px #e3e3e3; } .custom-select2, .custom-select2 option { background-color: #fff; } .custom-select2:after { color: #777; } .bootstrap-touchspin .btn-touchspin { background-color: #fff; color: #777; border: solid 1px #e3e3e3; } .bootstrap-touchspin .btn-touchspin:hover { color: #777; } .form-control::-webkit-input-placeholder { color: #777; } .form-control::-moz-placeholder { color: #777; } .form-control:-ms-input-placeholder { color: #777; } .form-control:-moz-placeholder { color: #777; } .form-control:focus { color: #777; border-color: #8a8a8a; } /*** Radio buttons and checkboxes ***/ .custom-checkbox input[type=checkbox] + span .checkbox-checked { color: #000; } .custom-radio input[type=radio]:checked + span { background-color: #000; } .custom-checkbox input[type=checkbox] + span:not(.color), .custom-radio { background: #fff; color: #000; border-color: #e3e3e3; } /*** Dropdowns ***/ .dropdown-menu, .autocomplete-suggestions { background: #fff; 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, .autocomplete-suggestions .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .autocomplete-suggestions .dropdown-item:hover { background: rgba(71, 71, 71, 0.05); } /*** Tooltips ***/ .tooltip-inner { background: #333; color: #fff; } .tooltip.bs-tether-element-attached-bottom .tooltip-inner:before, .tooltip.tooltip-top .tooltip-inner:before, .bs-tooltip-auto[x-placement^=top] .arrow:before, .bs-tooltip-top .arrow:before { border-top-color: #333; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #333; } /*** Modals ***/ .modal-backdrop { background: rgba(194, 194, 194, 0.7); } .modal-content { background: #fff; border: none 1px; } .js-quickview-np-btn { background: #fff; } /*** Notifications ***/ .ns-box { background: #ca5058; color: #fff; border: none 1px; } .product-price { color: #1c1d21; } .iqit-review-star { color: #000; } .product-flags .product-flag { font-size: 0.9333333333rem; font-style: normal; font-weight: bold; text-transform: none; } .product-flags .discount, .product-flags .on-sale { background: #000; color: #fff; } .product-flags .new { background: #969696; color: #fff; } .product-flags .online-only, .product-flags .pack { background: #e0e0e0; color: #000; } .discount { background: #000; color: #fff; } .product-available { background: #67a675; color: #fff; } .product-unavailable { background: #a17738; color: #fff7f7; } .alert-success { background: #d4edda; color: #155724; border-color: #d4edda; } .alert-success a:link:not(.nav-link):not(.btn), .alert-success a:visited:not(.nav-link):not(.btn) { color: #155724; text-decoration: underline; } .alert-info { background: #cce5ff; color: #004085; border-color: #cce5ff; } .alert-info a:link:not(.nav-link):not(.btn), .alert-info a:visited:not(.nav-link):not(.btn) { color: #004085; text-decoration: underline; } .alert-warning { background: #fff3cd; color: #856404; border-color: #fff3cd; } .alert-warning a:link:not(.nav-link):not(.btn), .alert-warning a:visited:not(.nav-link):not(.btn) { color: #856404; text-decoration: underline; } .alert-danger { background: #f8d7da; color: #721c24; border-color: #f8d7da; } .alert-danger a:link:not(.nav-link):not(.btn), .alert-danger a:visited:not(.nav-link):not(.btn) { color: #721c24; text-decoration: underline; } #iqitcompare-floating { background: #fff; border-top: none 1px; border-left: none 1px; border-right: none 1px; } #page-preloader { background: #fff; } #back-to-top { background: #000; color: #fff; } #back-to-top:hover { background: #333; color: #fff; } #header, #checkout-header { border-top: none 1px; border-bottom: none 1px; } .sticky-desktop-wrapper #desktop-header.stuck-header { border-bottom: none 1px; } #header .header-nav { color: #fff; background: #000; border-bottom: none 1px; padding-top: 0.2666666667rem; padding-bottom: 0.2666666667rem; font-size: 1.0666666667rem; } #header .header-nav a { color: #fff; } #header .header-nav a:hover { color: #fff; } #header .header-nav .social-links._topbar { font-size: 1.3333333333rem; } #header .header-nav .social-links._topbar a:not(:hover) { color: #fff !important; } #header .header-nav .social-links._topbar a:hover { color: #fff !important; } .header-top { padding-top: 1rem; padding-bottom: 1rem; color: #777; } .header-top a:not(.btn):not(.nav-link) { color: #777; } .header-top a:not(.btn):not(.nav-link):hover { color: #333; } .header-top .form-search-control { background: #fff; border: solid 1px #e3e3e3; } .header-top .header-btn-w .header-btn > .icon { font-size: 1.7333333333rem; display: block; } .header-top .header-cart-default a.cart-toogle { background: #000; color: #6a6a6a; padding: 0.6rem 0.6rem; } .header-top .header-cart-default a.cart-toogle:hover { color: #6a6a6a; } .header-top a.header-cart-btn:not(:hover) { color: #6a6a6a; } .stuck-header .header-top { padding-top: 1rem; padding-bottom: 1rem; } .sticky-desktop-wrapper #desktop-header.stuck-header, .stuck-menu { background: rgba(255, 255, 255, 0.82); } .header-top { transition: padding 0.3s ease; } .cart-products-count-btn { background: #f00; color: #fff; } .desktop-header-style-1 .search-widget, .desktop-header-style-2 .search-widget { max-width: 50%; } /*** HORIZONTAL MENU ***/ #iqitmegamenu-horizontal { background: rgba(0, 0, 0, 0); border-top: none 3px #521919; 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: 3.3333333333rem; max-width: 13.3333333333rem; color: #fff; padding-left: 1rem; padding-right: 1rem; border-left: groove 2px rgba(87, 87, 87, 0.57); } #sticky-cart-wrapper a.header-cart-btn:not(:hover) { color: #fff; } #sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: -1.1333333333rem; } .cbp-vertical-on-top .cbp-vertical-title { line-height: 3.3333333333rem !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 { background: #f8f8f8; color: #000; } .cbp-horizontal .cbp-tab-title { font-size: 0.9333333333rem; font-style: normal; font-weight: normal; text-transform: none; line-height: 1em; } .cbp-horizontal .cbp-legend { background: #ca5058; color: #fff; } .cbp-horizontal .cbp-mainlink-icon, .cbp-horizontal .cbp-mainlink-iicon { font-size: 1.3333333333rem; max-height: 1.3333333333rem; } @media (max-width: 1300px) { .cbp-horizontal .cbp-tab-title { font-size: 0.9333333333rem; } .cbp-horizontal > ul > li > a, .cbp-horizontal > ul > li > a:not([href]):not([tabindex]), .cbp-horizontal > ul > li > .cbp-main-link { padding-left: 2rem; padding-right: 2rem; } } #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; } .container-iqitmegamenu, .iqit-megamenu-container, .cbp-hrsub-narrow, #desktop-header-container.container { position: static !important; } .iqitmegamenu-submenu-container { width: auto !important; max-width: 100% !important; padding: 0; } .cbp-vertical-on-top #cbp-hrmenu1-ul { /*** VERTICAL MENU ***/ background: #fff; border: solid 1px #e3e3e3; box-shadow: 0px 0px 13px 0px rgba(36, 18, 18, 0.35); } #content-wrapper #cbp-hrmenu1 { background: #fff; border: solid 1px #e3e3e3; box-shadow: 0px 0px 13px 0px rgba(36, 18, 18, 0.35); } #cbp-hrmenu1 .cbp-vertical-title { font-size: 1.2rem; font-style: normal; font-weight: normal; text-transform: none; color: #000; background: rgba(0, 0, 0, 0); line-height: 3.3333333333rem; } #cbp-hrmenu1 .cbp-vertical-title:hover { color: #fff; background: rgba(0, 0, 0, 0); } #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.5333333333rem; padding-bottom: 0.5333333333rem; 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.6rem; max-height: 1.6rem; } #cbp-hrmenu1 > ul > li.cbp-hropen > a, #cbp-hrmenu1 > ul > li.cbp-hropen > a:hover { background: #f8f8f8; color: #333; } #cbp-hrmenu1 .cbp-legend { background: #ca5058; color: #fff; } .cbp-vert-expanded #cbp-hrmenu1 .cbp-vertical-title { color: #fff; background: rgba(0, 0, 0, 0); } .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-size: 0.9333333333rem; font-style: normal; font-weight: normal; text-transform: none; } .cbp-hrmenu .cbp-hrsub-inner, .cbp-hrmenu ul.cbp-hrsub-level2 { background: #fff; border: none 1px #37a625; } .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: #333 !important; } .cbp-hrmenu .tabs-links { background: #f7f7f7; } .cbp-hrmenu .cbp-tabs-names li a { color: #777 !important; } .cbp-hrmenu .cbp-tabs-names li a:hover, .cbp-hrmenu .cbp-tabs-names li a.active { background: #fff; color: #777 !important; } .cbp-hrmenu .cbp-hrsub-inner .cbp-column-title, .cbp-hrmenu .cbp-hrsub-inner a.cbp-column-title:link { color: #333 !important; border-bottom: none 3px #c2bc29; font-size: 0.9333333333rem; 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: #000; } #mobile-header .col-mobile-menu-dropdown.show .m-nav-btn { color: #fff; } #iqitmegamenu-mobile { background: #000; color: #fff; } #iqitmegamenu-mobile a, #iqitmegamenu-mobile a:link, #iqitmegamenu-mobile a:visited, #iqitmegamenu-mobile a:hover { color: #fff; } #iqitmegamenu-mobile li > ul { background: #1f1f1f; } #iqitmegamenu-mobile li > ul > li > ul { background: #292929; } #iqitmegamenu-mobile > li > a { border-bottom: none 1px; } .col-mobile-menu-push #_mobile_iqitmegamenu-mobile { border: none 1px; } /*** PS_FacatedSearch ***/ /*** Carousels ***/ .slick-arrow { background: #333; color: #fff; } ul.slick-dots li button:before, ul.slick-dots li.slick-active button:before { color: #333; } /*** Product miniature ***/ .products.row { margin: -1.0666666667rem; } .products.row > .col, .products.row > [class*="col-"] { padding: 1.0666666667rem; } .slick-products-carousel { margin: -1.0666666667rem; } .slick-products-carousel .slick-list { padding: 1.0666666667rem; } .slick-products-carousel .product-carousel { padding: 1.0666666667rem; } .slick-products-carousel.slick-arrows-above .slick-next, .slick-products-carousel.slick-arrows-above .slick-prev { margin: 1.0666666667rem; } .product-miniature { border: solid 1px #e3e3e3; outline: 1px none transparent; background: #fff; } .product-miniature .product-price { color: #070707; } .product-miniature .iqit-review-star { color: #f7b800; } .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-grid { padding: 1.2666666667rem; } .product-miniature-grid .product-title { font-size: 1.0666666667rem; font-style: normal; font-weight: bold; text-transform: none; } .product-miniature-grid .product-price { font-size: 1.3333333333rem; font-style: normal; font-weight: normal; text-transform: none; } .product-miniature-grid .product-title { overflow: hidden; height: 2.2666666667rem; } .product-miniature:hover { outline: none 1px rgba(161, 161, 161, 0.25); } .product-miniature-grid .product-functional-buttons { display: none; } .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: !important; } .products-grid .product-miniature .product-reference { display: none !important; } .products-grid .product-miniature .product-description-short { display: none !important; } .products-grid .product-miniature .input-qty, .products-grid .product-miniature .input-group-add-cart .bootstrap-touchspin { display: none !important; } .products-grid .product-miniature .product-add-cart { display: none !important; } .products-grid .product-miniature .flag-discount-value { display: none !important; } .btn-product-list { padding: 0.6666666667rem 1.3333333333rem; background: #000; color: #fff; border: none 1px; } .btn-product-list:hover { background: #e0a700; color: #000; border-color: #f7b800; } .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; } .products-grid .slick-slide > div:only-child, .products-grid .slick-slide > div > .product-carousel { height: 100%; } .products-grid .product-miniature-layout-2 .product-add-cart { display: none !important; } .products-grid .product-miniature-layout-2 .products-variants { padding-top: 0rem; } .products-grid .product-miniature-layout-3 .product-description { background: #fff; } .product_header_container .product-price, .product_p_price_container .product-price { font-size: 1.6rem; font-style: normal; font-weight: bold; text-transform: none; } #product .images-container .product-cover { border: none 1px; } .images-container .slick-arrow, #product .product-cover .expander > span, #product-modal .modal-body .slick-arrow { color: #000; background: rgba(0, 0, 0, 0); } .images-container .slick-arrow:hover, #product .product-cover .expander > span:hover, #product-modal .modal-body .slick-arrow:hover { opacity: 0.6 !important; } #col-product-info { position: -webkit-sticky; position: sticky; z-index: 1; top: 30px; transition: top 300ms ease 0s; } .modal-open #col-product-info { position: static; } #product .product-cover .expander { color: #000; background: rgba(0, 0, 0, 0); } #product .product-cover .expander: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; } #wrapper { background: #fafafa; border-top: none 1px; border-bottom: none 1px; padding-top: 1.3333333333rem; padding-bottom: 1.3333333333rem; color: #000; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3); } #index #wrapper, #module-iqitelementor-Preview.elementor-landing-body #wrapper { padding-top: 1.3333333333rem; padding-bottom: 1.3333333333rem; } #content-wrapper .page-title { color: #000; font-size: 2.1333333333rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; position: relative; -js-display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } #content-wrapper .page-title a:link, #content-wrapper .page-title a:visited { color: #000; } #content-wrapper .page-title span { margin-right: 0.5rem; } #content-wrapper .page-title:after { content: ""; display: block; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-bottom: solid 5px #f7b800; } #content-wrapper .section-title { color: #333; font-size: 1.2rem; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0.8em; position: relative; -js-display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } #content-wrapper .section-title a:link, #content-wrapper .section-title a:visited { color: #333; } #content-wrapper .section-title span { margin-right: 0.5rem; } #content-wrapper .section-title:after { content: ""; display: block; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-bottom: solid 3px #f7b800; } .nav-tabs .nav-link { color: #000; font-size: 1.3333333333rem; 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: #000; border-bottom: solid 3px #f7b800; } .iqit-accordion .title { font-style: normal; font-weight: normal; text-transform: none; } .iqit-accordion .nav-link { border-bottom: solid 3px #f7b800; border-bottom-color: transparent; } .iqit-accordion .nav-link:not(.collapsed) { color: #000; border-bottom: solid 3px #f7b800; } #wrapper .block-title { color: #000; font-size: 1.0666666667rem; 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: #000; } #left-column .block, #right-column .block { background: #fff; padding: 1rem; border: solid 1px #f0f0f0; } #footer, #checkout-footer { background: #000; } #footer .ps-emailsubscription-block .newsletter-input-group, #checkout-footer .ps-emailsubscription-block .newsletter-input-group { border: solid 1px #e3e3e3; background: #fff; } #footer .ps-emailsubscription-block .newsletter-input-group .input-subscription, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .input-subscription { color: #777; } #footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe, #checkout-footer .ps-emailsubscription-block .newsletter-input-group .btn-subscribe { color: #777; } #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: #777; } #footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription::-moz-placeholder { color: #777; } #footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription:-ms-input-placeholder { color: #777; } #footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder, #checkout-footer .ps-emailsubscription-block input.input-subscription :-moz-placeholder { color: #777; } #footer .social-links._footer, #checkout-footer .social-links._footer { font-size: 1.8666666667rem; } #footer .social-links._footer a:not(:hover), #checkout-footer .social-links._footer a:not(:hover) { color: #f7a717 !important; } #footer .block-title, #checkout-footer .block-title { color: #333; font-size: 0.9333333333rem; font-style: normal; font-weight: bold; text-transform: none; border-bottom: solid 1px #e3e3e3; margin-bottom: 0.8em; padding-bottom: 0.5em; } #footer .block-title a:link, #checkout-footer .block-title a:link, #footer .block-title a:visited, #checkout-footer .block-title a:visited { color: #333; } #footer-container-first { border-top: none 1px; padding-top: 2rem; padding-bottom: 2rem; background: #212121; color: #fff; } #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; padding-top: 2.6666666667rem; padding-bottom: 1.6666666667rem; color: #fff; } #footer-container-main a, #checkout-footer a { color: #fff; } #footer-container-main a:hover, #checkout-footer a:hover { color: #fff; } #footer-copyrights { border-top: none 1px; background: #fff; padding-top: 1rem; padding-bottom: 1rem; } #maintenance-page { background: #e3e3e3; color: #333; } #maintenance-page a, #maintenance-page a:link { color: #333; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } .product-miniature-grid .product-availability{ display: none !important; } .simpleblog__listing__post__wrapper__footer__block span, .simpleblog__listing__post__wrapper__footer__block time, .simpleblog__listing__post__wrapper__content__footer__category a{ top: -5px !important; } .ed_countdown, .date_green { color: #ffc107; font-weight: bold; } #product .product_header_container .product-manufacturer { float: right !important; margin-bottom: 0px !important; } #product table.table.table-bordered.table-product-discounts { display: none !important; } .header-nav .left-nav{ position:initial; } .whats-float.position-left{ position: fixed; top: 25%; width: 160px; background-color: rgb(37, 211, 102); color: rgb(255, 255, 255); z-index: 10; vertical-align: middle; overflow: hidden; transition: all 0.5s ease-in-out 0s; left: 0px; transform: translate(-118px, 0px); border-radius: 0px 10px 10px 0px; } .whats-float.position-left span{ color: white; font-size: 14px; padding-top: 6px; padding-bottom: 5px; position: absolute; line-height: 16px; font-weight: bolder; } .whats-float.position-left img{ transform: rotate(0deg); padding: 10px; transition: all 0.5s ease-in-out 0s; float: right; } .whats-float.position-left:hover { color: rgb(255, 255, 255); transform: translate(0px, 0px); padding-left: 6px; } /*Textos en colores de productos*/ span.color.texture span.sr-only { position: relative; } span.color.texture span { top: 60px; font-size: 11px; } .clearfix.product-variants-item ul li { margin-bottom: 35px; } span.color.texture span.sr-only { position: relative; display: table-cell; max-width: 60px !important; } .block-categories li ul { margin-top: 16px; } .jmdTopBar { margin: 0px; } #manufacturer .block.block-toggle.block-categories.block-links.js-block-toggle { display:none } #manufacturer #left-column .block { background-color: #F6F6F6; border-radius: 10px; } @media (min-width: 768px) { @media (min-width: 768px) { .page-only-brands #content-wrapper { width: 100%; max-width: 100%; } .page-only-brands #left-column { display: none; /* Oculta el left-column */ } .page-only-brands .col-md-9 { flex: 0 0 100%!important; max-width: 100%!important; } } /* HEADER TRANSPARENTE INICIAL */ #header { position: fixed; top: 0; left: 0; width: 100%; background: transparent; transition: background 0.3s ease, box-shadow 0.3s ease; z-index: 999; } /* Texto del menú en blanco */ #header a, #header .menu a { color: #fff; } /* Evitar que el contenido se suba debajo */ body { padding-top: 90px; /* ajusta a la altura real del header */ } /* HEADER AL HACER SCROLL */ #header.scrolled { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } /* Texto negro al scrollear */ #header.scrolled a, #header.scrolled .menu a { color: #000; } /* ====================================== HEADER ESCRITORIO EN BLANCO (Warehouse + IqitMegaMenu) ====================================== */ /* SOLO escritorio */ @media (min-width: 992px) { /* Textos del menú principal */ #desktop-header .cbp-hrmenu > ul > li > a, #desktop-header .cbp-hrmenu > ul > li > a span { color: #ffffff !important; } /* Iconos flecha del menú */ #desktop-header .cbp-submenu-aindicator { color: #ffffff !important; } /* Botones header: buscar, usuario, carrito */ #desktop-header .header-btn, #desktop-header .header-btn .title, #desktop-header .header-btn i { color: #ffffff !important; } /* Contador del carrito */ #desktop-header .cart-products-count-btn { background: #ffffff; color: #000000; } } /* ========================= HEADER: blanco arriba / negro al hacer scroll (solo escritorio) ========================= */ @media (min-width: 992px){ /* --- ESTADO INICIAL (sin scroll): texto/iconos blancos --- */ #desktop-header:not(.stuck) .cbp-hrmenu > ul > li > a, #desktop-header:not(.stuck) .cbp-hrmenu > ul > li > a .cbp-tab-title, #desktop-header:not(.stuck) .header-btn, #desktop-header:not(.stuck) .header-btn .title, #desktop-header:not(.stuck) .header-btn i, #desktop-header:not(.stuck) .cbp-submenu-aindicator{ color:#fff !important; } /* Por si el tema mete "text-faded" (carrito) */ #desktop-header:not(.stuck) .text-faded{ color: rgba(255,255,255,.85) !important; } /* --- ESTADO STICKY (con scroll): fondo blanco + texto/iconos negros --- */ #desktop-header.stuck, #desktop-header.stuck .header-top{ background:#fff !important; } #desktop-header.stuck .cbp-hrmenu > ul > li > a, #desktop-header.stuck .cbp-hrmenu > ul > li > a .cbp-tab-title, #desktop-header.stuck .header-btn, #desktop-header.stuck .header-btn .title, #desktop-header.stuck .header-btn i, #desktop-header.stuck .cbp-submenu-aindicator{ color:#111 !important; } #desktop-header.stuck .text-faded{ color: rgba(0,0,0,.65) !important; } /* --- LOGO: en sticky lo hacemos oscuro (APAÑO) --- */ #desktop-header.stuck #desktop_logo img.logo{ filter: brightness(0) invert(0) !important; /* lo deja negro */ } /* Si tu logo es blanco y NO cambia con lo anterior, usa esta línea en su lugar: filter: invert(1) brightness(0) !important; */ /* Transición suave */ #desktop-header .header-btn, #desktop-header .cbp-hrmenu > ul > li > a, #desktop-header #desktop_logo img.logo{ transition: color .2s ease, filter .2s ease, background .2s ease; } } /* HOME: sube el hero para que quede pegado al header (solo escritorio) */ @media (min-width: 992px){ body#index #wrapper{ margin-top: -50px; } } @media (min-width: 992px){ /* Reduce padding vertical del header */ #desktop-header .header-top{ padding-top: 6px !important; padding-bottom: 6px !important; } /* Opcional: reduce un poco el logo para compactar */ #desktop_logo img.logo{ max-height: 44px !important; height: auto !important; } } /* ========================= VESTYPRO FOOTER 2026 (Nike-style) ========================= */ /* Fondo + estructura */ #footer-container-main.footer-style-1{ background:#0b0c0f; color:#fff; padding:64px 0 28px; border-top:1px solid rgba(255,255,255,.08); } /* Columnas con más aire */ #footer-container-main .block{ margin-bottom:26px; } /* Títulos */ #footer-container-main .block-title{ margin:0 0 14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:12px; opacity:.95; } #footer-container-main .block-title span{ color:#fff; } /* Listas */ #footer-container-main .block-content ul{ margin:0; padding:0; list-style:none; } #footer-container-main .block-content li{ margin:10px 0; line-height:1.35; } /* Links */ #footer-container-main a{ color:rgba(255,255,255,.72); text-decoration:none; transition:opacity .2s ease, transform .2s ease, color .2s ease; } #footer-container-main a:hover{ color:#fff; opacity:1; } /* Separación visual entre columnas (sutil) */ @media (min-width: 768px){ #footer-container-main .block-links{ position:relative; } #footer-container-main .block-links:after{ content:""; position:absolute; top:6px; right:18px; width:1px; height:calc(100% - 12px); background:rgba(255,255,255,.06); } /* no línea en la última columna de links */ #footer-container-main .block-links.block-iqitlinksmanager-7:after{ display:none; } } /* Social links como “chips” */ #footer-container-main .social-links._footer{ display:flex; gap:10px; flex-wrap:wrap; } #footer-container-main .social-links._footer li a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:#fff; transition:transform .2s ease, background .2s ease, border-color .2s ease; } #footer-container-main .social-links._footer li a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); } /* Newsletter “pill” */ #footer-container-main .newsletter-input-group{ gap:10px; } #footer-container-main .input-subscription{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; height:46px; border-radius:999px; padding:0 18px; } #footer-container-main .input-subscription::placeholder{ color:rgba(255,255,255,.55); } #footer-container-main .btn-subscribe{ height:46px; border-radius:999px; padding:0 18px; border:1px solid rgba(255,255,255,.18); background:#fff; color:#0b0c0f; font-weight:700; letter-spacing:.02em; text-transform:uppercase; transition:transform .2s ease, opacity .2s ease; } #footer-container-main .btn-subscribe:hover{ transform:translateY(-1px); opacity:.95; } /* Ajuste icono flecha */ #footer-container-main .btn-subscribe i{ margin-left:10px; } /* Compactar en móvil */ @media (max-width: 767px){ #footer-container-main.footer-style-1{ padding:44px 0 22px; } #footer-container-main .block-title{ font-size:12px; } #footer-container-main .block-content li{ margin:8px 0; } } /* (Opcional) Subfooter si lo activas con HTML (ver punto 2) */ #footer-container-main .vyp-subfooter{ margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.55); font-size:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } #footer-container-main .vyp-subfooter a{ color:rgba(255,255,255,.65); } #footer-container-main .vyp-subfooter a:hover{ color:#fff; } /* FOOTER acorde 2026: acordeón solo en móvil */ @media (max-width: 991px){ #footer-container-main .js-block-toggle .block-title{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:14px 0; border-top:1px solid rgba(255,255,255,.08); } /* flecha */ #footer-container-main .js-block-toggle .block-title:after{ content:""; width:10px;height:10px; border-right:2px solid rgba(255,255,255,.65); border-bottom:2px solid rgba(255,255,255,.65); transform:rotate(45deg); transition:transform .2s ease, opacity .2s ease; opacity:.9; } /* contenido cerrado por defecto */ #footer-container-main .js-block-toggle .block-content{ display:none; padding:8px 0 16px; } /* cuando esté abierto (clase típica) */ #footer-container-main .js-block-toggle.active .block-content{ display:block; } #footer-container-main .js-block-toggle.active .block-title:after{ transform:rotate(-135deg); } } /* Newsletter estilo "card" premium */ #footer-container-main .newsletter-footer{ padding-left:18px; } #footer-container-main .block-newsletter{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px; } #footer-container-main .block-newsletter .block-title{ margin-bottom:10px; } #footer-container-main .block-newsletter .block-content{ margin-top:8px; } /* layout input + botón */ #footer-container-main .block-newsletter .newsletter-input-group{ display:flex; gap:10px; flex-wrap:wrap; } #footer-container-main .block-newsletter .input-newsletter-footer{ flex:1 1 260px; } #footer-container-main .block-newsletter .button-newsletter-footer{ flex:0 0 auto; } /* input */ #footer-container-main .block-newsletter .input-subscription{ width:100%; height:48px; border-radius:999px; padding:0 18px; } /* botón tipo Nike */ #footer-container-main .block-newsletter .btn-subscribe{ height:48px; border-radius:999px; padding:0 18px; background:#fff; color:#0b0c0f; border:1px solid rgba(255,255,255,.18); font-weight:800; } /* microtexto */ #footer-container-main .block-newsletter .text-muted{ color:rgba(255,255,255,.55) !important; font-size:12px; } /* =========================== FOOTER MOBILE 2026 (Nike-ish) - Acordeón: Enlaces/Ayuda/Personalización - Visible: Síguenos + Newsletter =========================== */ @media (max-width: 991px){ /* Ajustes generales del footer */ #footer-container-main{ padding-top: 18px; padding-bottom: 18px; } #footer-container-main .block{ margin-bottom: 0; } /* --- SOLO ACORDEÓN PARA LINKS (marcados con data-accordion="1") --- */ #footer-container-main .js-block-toggle[data-accordion="1"] .block-title{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:16px 0; margin:0; border-top:1px solid rgba(255,255,255,.12); user-select:none; letter-spacing:.2px; } /* Flecha */ #footer-container-main .js-block-toggle[data-accordion="1"] .block-title::after{ content:""; width:10px; height:10px; border-right:2px solid rgba(255,255,255,.75); border-bottom:2px solid rgba(255,255,255,.75); transform:rotate(45deg); transition:transform .2s ease; margin-left:12px; flex:0 0 auto; } /* Cerrado */ #footer-container-main .js-block-toggle[data-accordion="1"] .block-content{ display:none; padding:8px 0 14px; } /* Abierto */ #footer-container-main .js-block-toggle[data-accordion="1"].is-open .block-content{ display:block; } #footer-container-main .js-block-toggle[data-accordion="1"].is-open .block-title::after{ transform:rotate(-135deg); } /* Links dentro del acordeón */ #footer-container-main .js-block-toggle[data-accordion="1"] ul{ margin:0; padding:0; list-style:none; } #footer-container-main .js-block-toggle[data-accordion="1"] ul li a{ display:block; padding:10px 0; opacity:.92; font-size:14px; line-height:1.2; } #footer-container-main .js-block-toggle[data-accordion="1"] ul li a:hover{ opacity:1; } /* --- SIEMPRE VISIBLE: SÍGUENOS --- */ #footer-container-main .block-social-links .block-title{ border-top:1px solid rgba(255,255,255,.12); padding:18px 0 10px; margin:0; letter-spacing:.2px; } #footer-container-main .social-links._footer{ display:flex; gap:14px; padding:8px 0 18px; margin:0; list-style:none; } #footer-container-main .social-links._footer li a{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(255,255,255,.08); transition:transform .15s ease, background .15s ease; } #footer-container-main .social-links._footer li a:hover{ transform:translateY(-1px); background:rgba(255,255,255,.12); } #footer-container-main .social-links._footer i{ font-size:18px; } /* --- SIEMPRE VISIBLE: NEWSLETTER (diseño 2026) --- */ #footer-container-main .block-newsletter .block-title{ border-top:1px solid rgba(255,255,255,.12); padding:18px 0 10px; margin:0; letter-spacing:.2px; } #footer-container-main .ps-emailsubscription-block form{ margin-top:6px; } #footer-container-main .newsletter-input-group{ display:flex; flex-direction:column; gap:10px; } #footer-container-main .input-subscription{ height:48px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; padding:0 14px; } #footer-container-main .input-subscription::placeholder{ color:rgba(255,255,255,.55); } #footer-container-main .btn-subscribe{ height:48px; border-radius:14px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; justify-content:center; gap:10px; } #footer-container-main .btn-subscribe i{ margin-left:0; } } /* TOPBAR: más aire y look premium */ .header-nav{ padding: 8px 0; line-height: 1; } .header-nav .row{ align-items: center; } /* Links derecha: separar y que no se peguen */ .header-nav .block-links-inline ul{ display: flex; gap: 18px; margin: 0; padding: 0; } .header-nav .block-links-inline ul li{ margin: 0 !important; } .header-nav .block-links-inline a{ font-size: 12px; letter-spacing: .02em; opacity: .9; } /* RRSS izquierda: separar iconos */ .social-links._topbar{ display: flex; gap: 12px; margin: 0; padding: 0; } .social-links._topbar li{ margin: 0 !important; } .social-links._topbar i{ font-size: 14px; } /* En móvil: ocultar esta barra (se ve mejor sin ella) */ @media (max-width: 991px){ .header-nav{ display:none; } } /* 1) Por defecto: header top TRANSPARENTE (para Home/hero) */ #header .header-top{ background: transparent; } /* 2) En páginas que NO son la home: header top NEGRO desde el inicio */ body:not(#index) #header .header-top{ background: rgba(0,0,0,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Opcional: un poco de borde para que se vea premium */ body:not(#index) #header .header-top{ border-bottom: 1px solid rgba(255,255,255,.08); } /* 3) Asegurar que textos/iconos se ven en negro (en no-home) */ body:not(#index) #header .header-top, body:not(#index) #header .header-top a, body:not(#index) #header .header-top .title, body:not(#index) #header .header-top .icon{ /*color: #fff !important;*/ } body:not(#index) #header .header-top .logo{ filter: none; } .social-links{ display: none !important; } /* =========================== CONTACT PAGE – Vestypro 2026 Estilo premium (sin tocar HTML) =========================== */ /* Base */ #contact, .page-contact #main, body#contact #main, #module-contactform-contactform #main{ padding: 28px 0; } #main .page-header{ margin: 10px 0 18px; border: 0; } #main .page-title{ font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; margin: 0; } /* Breadcrumb más limpio */ .breadcrumb{ margin: 10px 0 22px; padding: 0; background: transparent; } .breadcrumb ol{ display:flex; gap:10px; flex-wrap:wrap; margin:0; padding:0; } .breadcrumb li{ font-size: 12px; opacity: .85; } /* Mapa: card premium */ #iqitcontactpage-map{ border-radius: 18px; overflow: hidden; margin: 16px 0 26px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 50px rgba(0,0,0,.35); } #iqitcontactpage-map iframe{ width: 100%; height: 340px; display:block; } /* Card contenedor del formulario */ .page-contact .contact-form, #content .contact-form{ background: rgba(15,15,15,.78); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.35); backdrop-filter: blur(10px); } /* Limpiar el H4 duplicado */ .contact-form h4{ font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; opacity: .95; } /* Layout más cómodo */ .contact-form .form-group.row{ margin-bottom: 14px; } .contact-form .form-control-label{ font-size: 12px; letter-spacing: .03em; text-transform: uppercase; opacity: .8; padding-top: 10px; } /* Inputs modernos */ .contact-form .form-control, .contact-form select.form-control{ height: 46px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .contact-form textarea.form-control{ height: auto; min-height: 140px; padding-top: 12px; border-radius: 16px; } /* Focus: premium */ .contact-form .form-control:focus{ outline: none; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(255,255,255,.06); } /* Placeholder */ .contact-form .form-control::placeholder{ color: rgba(255,255,255,.55); } /* Select: flecha más elegante */ .contact-form .form-control-select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%), linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; } /* Input file: que no parezca “antiguo” */ .bootstrap-filestyle .form-control{ border-top-right-radius: 0; border-bottom-right-radius: 0; } .bootstrap-filestyle .btn{ height: 46px; border-radius: 0 14px 14px 0; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; } .bootstrap-filestyle .btn:hover{ background: rgba(255,255,255,.10); } /* Comentario “Opcional” */ .form-control-comment{ font-size: 12px; opacity: .65; padding-top: 12px; } /* GDPR: más limpio y plegable (con details-like) */ .gdpr_module{ border-top: 1px solid rgba(255,255,255,.08); margin-top: 18px; padding-top: 14px; } .gdpr_module .custom-checkbox{ gap: 10px; align-items: flex-start; } .gdpr_module input[type="checkbox"]{ margin-top: 4px; width: 18px; height: 18px; accent-color: #ffffff; } .gdpr_module .psgdpr_consent_message p{ margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.45 !important; color: rgba(255,255,255,.78) !important; font-family: inherit !important; } .gdpr_module .psgdpr_consent_message a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: .9; } /* Footer del form */ .contact-form .form-footer{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); } /* Botón “Nike”: sólido y con aire */ .contact-form .btn.btn-primary{ height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.12); background: #fff; color: #000; transition: transform .12s ease, opacity .12s ease; } .contact-form .btn.btn-primary:hover{ transform: translateY(-1px); } .contact-form .btn.btn-primary[disabled]{ opacity: .35; cursor: not-allowed; transform: none; } /* Ajuste a tu grid: tu .col-sm-8 se ve raro suelto */ .page-contact #content .col-sm-8{ max-width: 860px; margin: 0 auto; float: none; } /* Responsive: en móvil, etiquetas arriba + paddings */ @media (max-width: 767px){ #iqitcontactpage-map iframe{ height: 260px; } .page-contact .contact-form{ padding: 16px; border-radius: 16px; } .contact-form .form-control-label{ padding-top: 0; margin-bottom: 6px; } .contact-form .form-group.row{ margin-bottom: 12px; } /* Columnas a 100% */ .contact-form .col-md-3, .contact-form .col-md-6, .contact-form .col-md-9{ flex: 0 0 100%; max-width: 100%; } .contact-form .offset-md-3{ margin-left: 0; } } /* ========================= CONTACTO (solo /contactenos) ========================= */ /* Card general */ body#contact #content-wrapper .contact-form{ background: rgba(20,20,20,.92); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 28px; box-shadow: 0 22px 60px rgba(0,0,0,.35); backdrop-filter: blur(10px); } /* Título del form */ body#contact #content-wrapper .contact-form h4{ color:#fff; font-weight:800; letter-spacing:.02em; margin:0 0 14px 0; } /* Labels: blanco + negrita */ body#contact #content-wrapper .contact-form .form-control-label{ color: rgba(255,255,255,.92); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; } /* Inputs / select / textarea */ body#contact #content-wrapper .contact-form .form-control{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color:#fff; border-radius: 14px; height: 46px; padding: 10px 14px; transition: all .2s ease; } body#contact #content-wrapper .contact-form textarea.form-control{ height: 140px; padding-top: 12px; } body#contact #content-wrapper .contact-form .form-control::placeholder{ color: rgba(255,255,255,.55); } body#contact #content-wrapper .contact-form .form-control:focus{ outline:none; border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 4px rgba(255,255,255,.08); } /* Archivo (bootstrap-filestyle) */ body#contact #content-wrapper .contact-form .bootstrap-filestyle .form-control{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); border-radius: 14px 0 0 14px; height: 46px; } body#contact #content-wrapper .contact-form .bootstrap-filestyle .btn{ height: 46px; border-radius: 0 14px 14px 0; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.10); color:#fff; font-weight:700; } /* Botón enviar */ body#contact #content-wrapper .contact-form .form-footer .btn.btn-primary{ border-radius: 999px; padding: 12px 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.18); background:#fff; color:#000; } /* GDPR a ancho completo y mejor legible */ body#contact #content-wrapper .contact-form .gdpr_module{ width: 100%; margin-top: 14px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } /* El GDPR viene con estilos inline: los reforzamos */ body#contact #content-wrapper .contact-form .psgdpr_consent_message p{ color: rgba(255,255,255,.78) !important; font-size: 12.5px !important; line-height: 1.55 !important; margin-bottom: 10px !important; font-family: inherit !important; } body#contact #content-wrapper .contact-form .psgdpr_consent_message a{ color:#fff !important; text-decoration: underline; text-underline-offset: 3px; } /* Mapa más bajo + bonito */ body#contact #iqitcontactpage-map{ border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.18); margin-bottom: 18px; } body#contact #iqitcontactpage-map iframe{ width: 100%; height: 340px; display:block; } /* ====== MÓVIL: que sí se aplique ====== */ @media (max-width: 991px){ /* Asegura ancho completo del bloque */ body#contact #content-wrapper .col-sm-8{ max-width: 100%; flex: 0 0 100%; } body#contact #content-wrapper .contact-form{ padding: 18px; border-radius: 18px; } /* Labels encima del input (mejor UX) */ body#contact #content-wrapper .contact-form .form-group.row{ display:block; margin-bottom: 14px; } body#contact #content-wrapper .contact-form .form-group.row > label{ display:block; margin-bottom: 8px; } /* Botón full width */ body#contact #content-wrapper .contact-form .form-footer{ text-align: left !important; } body#contact #content-wrapper .contact-form .form-footer .btn.btn-primary{ width: 100%; } /* Mapa más bajo en móvil */ body#contact #iqitcontactpage-map iframe{ height: 240px; } } body#contact #content-wrapper .contact-form .offset-md-3.col-md-9{ margin-left: 0 !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Ocultar mapa en página de contacto */ body#contact #iqitcontactpage-map{ display: none !important; } /* Ocultar título H1 solo en página contacto */ body#contact .page-header{ display: none !important; } /* ========================= CONTACT FORM — MOBILE 2026 ========================= */ @media (max-width: 991px){ /* Contenedor general */ body#contact #content-wrapper #content .col-sm-8{ width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 14px !important; } /* “Card” del formulario */ body#contact .contact-form form{ background: rgba(20,20,20,.96); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 18px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } /* Título dentro del formulario */ body#contact .contact-form h4{ margin: 0 0 14px 0 !important; color: #fff !important; font-weight: 800 !important; letter-spacing: .01em; } /* Cada fila del formulario en columna */ body#contact .contact-form .form-group.row{ display: block !important; margin-bottom: 14px !important; } /* Labels arriba y visibles */ body#contact .contact-form .form-control-label{ display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 8px 0 !important; color: rgba(255,255,255,.92) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; } /* Campos al 100% */ body#contact .contact-form .col-md-6, body#contact .contact-form .col-md-9, body#contact .contact-form .offset-md-3{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body#contact .contact-form .form-control, body#contact .contact-form textarea, body#contact .contact-form select{ width: 100% !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; border-radius: 14px !important; min-height: 48px; } body#contact .contact-form textarea{ min-height: 140px !important; } body#contact .contact-form .form-control::placeholder, body#contact .contact-form textarea::placeholder{ color: rgba(255,255,255,.55) !important; } /* Archivo: que no quede raro */ body#contact .bootstrap-filestyle.input-group{ width: 100% !important; } body#contact .bootstrap-filestyle .btn{ border-radius: 12px !important; } /* GDPR a todo el ancho, mejor legibilidad */ body#contact #gdpr_consent_1{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 14px 12px; } body#contact #gdpr_consent_1 .psgdpr_consent_message, body#contact #gdpr_consent_1 .psgdpr_consent_message p{ color: rgba(255,255,255,.80) !important; font-size: 12.5px !important; line-height: 1.45 !important; } body#contact #gdpr_consent_1 a{ color: #fff !important; text-decoration: underline; } /* Checkbox alineado */ body#contact #gdpr_consent_1 .custom-checkbox{ align-items: flex-start !important; gap: 10px; } body#contact #gdpr_consent_1 input[type="checkbox"]{ margin-top: 3px; } /* Botón enviar: grande y premium */ body#contact .contact-form .form-footer{ text-align: left !important; margin-top: 12px; } body#contact .contact-form .form-footer .btn-primary{ width: 100% !important; border-radius: 14px !important; min-height: 50px; font-weight: 800; letter-spacing: .02em; } /* Ocultar “Opcional” lateral (en móvil molesta) */ body#contact .contact-form .form-control-comment{ display: none !important; } } /* ========================= VYP – HEADER APPLE MODE (DESKTOP) ========================= */ /* 1) Barra superior: más fina */ .header-top{ padding: 8px 0 !important; /* altura total */ background: rgba(0,0,0,.92) !important; /* negro elegante */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* 2) Contenedor sin padding extra */ #desktop-header-container{ padding-top: 0 !important; padding-bottom: 0 !important; } /* 3) Logo más pequeño */ #desktop_logo img.logo{ max-height: 30px !important; width: auto; } /* 4) Menú principal: tipografía fina + spacing premium */ #cbp-hrmenu > ul{ display: flex; align-items: center; gap: 22px; /* aire entre items */ } #cbp-hrmenu > ul > li > a.nav-link{ font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 500 !important; padding: 12px 0 !important; /* sin “bloques” */ opacity: .92; } /* Quitar el “angle down” si quieres más Apple (opcional) */ /* #cbp-hrmenu i.cbp-submenu-aindicator{ display:none !important; } */ /* 5) Iconos derecha: más pequeños y sin texto */ .header-btn .icon{ font-size: 16px !important; opacity: .92; } .header-btn .title{ display: none !important; /* adiós a Buscar/Entrar/Carrito */ } /* Ajustar separación iconos */ .customer-header{ gap: 14px; } .header-btn-w{ margin-left: 10px !important; } /* 6) Carrito: contador más discreto */ .cart-products-count-btn{ font-size: 10px !important; min-width: 16px; height: 16px; line-height: 16px; } /* 7) Reducir altura del megamenu wrapper (evita “aire raro”) */ .iqitmegamenu-wrapper, .container-iqitmegamenu{ padding: 0 !important; } /* 8) Submenú: fondo premium (cuando abre) */ .cbp-hrsub{ background: rgba(0,0,0,.96) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.08); } .cbp-hrsub a{ color: rgba(255,255,255,.92) !important; } @media (max-width: 991px){ .header-top{ padding: 10px 0 !important; } #desktop_logo img.logo{ max-height: 26px !important; } } /* ========================= 1) HEADER VISIBLE EN PÁGINAS INTERNAS (NO HOME) ========================= */ /* Prestashop suele poner id="index" en Home. En el resto: fondo negro */ /*body:not(#index) #header, body:not(#index) .header-top{ background: #000 !important; } */ /* Textos del menú + topbar en blanco */ /*body:not(#index) #header a, body:not(#index) #header .nav-link, body:not(#index) #header .cbp-tab-title, body:not(#index) #header .header-btn .title{ color: #fff !important; }*/ /* Iconos en blanco */ body:not(#index) #header i, body:not(#index) #header .icon{ /*color: #fff !important;*/ } /* Subrayados/indicadores (flechas) en blanco */ body:not(#index) #header .cbp-submenu-aindicator, body:not(#index) #header .fa-angle-down{ color: #fff !important; } /* Desplegables del megamenu: fondo negro + texto blanco (para que no “mueran” en blanco) */ body:not(#index) .cbp-hrsub, body:not(#index) .iqitmegamenu-submenu-container{ /*background: #000 !important;*/ } body:not(#index) .cbp-hrsub a, body:not(#index) .cbp-hrsub .cbp-column-title{ /*color: #fff !important;*/ } /* ========================= 2) MANTENER TU EFECTO “SCROLL” (cuando aparece sticky) (Pon aquí el selector real de tu sticky si lo sabes) ========================= */ /* Opciones típicas: .sticky, .is-sticky, .stuck, .header-sticky, body.sticky-header */ #header.sticky, #header.is-sticky, #header.stuck, #header.header-sticky, body.sticky-header #header{ background: #000 !important; } /* ========================= 3) ULTRA MINIMAL (Apple): más pequeño, más aire ========================= */ .header-top{ padding: 10px 0 !important; /* más respiración */ } #desktop_logo img.logo{ max-height: 34px !important; /* logo más pequeño */ width: auto !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a{ font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase; padding: 12px 10px !important; /* menos “mazacote” */ } .header-btn .icon{ font-size: 16px !important; } .header-btn .title{ font-size: 11px !important; opacity: .9; } /* En pantallas medianas: aún más compacto */ @media (max-width: 1200px){ #desktop_logo img.logo{ max-height: 30px !important; } #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a{ padding: 10px 8px !important; } } /* ???? Reducir altura general del mega menú */ .cbp-hrsub-inner{ padding:28px 40px !important; /* antes era mucho mayor */ } /* Eliminar doble padding interno */ .cbp-hrsub-inner .container{ padding:0 !important; } /* Más espacio entre columnas */ .cbp-menu-column{ padding-right:40px !important; } /* Títulos categoría más finos */ .cbp-column-title{ font-size:13px !important; font-weight:600 !important; letter-spacing:.08em; margin-bottom:14px; color:#fff !important; text-transform:uppercase; } /* Links más elegantes */ .cbp-hrsub a{ font-size:14px !important; font-weight:400; padding:6px 0; display:block; color:rgba(255,255,255,.85) !important; transition:all .2s ease; } /* Hover más premium */ .cbp-hrsub a:hover{ color:#fff !important; transform:translateX(4px); } .cbp-hrsub-inner{ padding:22px 40px !important; } /* ========================= VYP HOME 2026 (Apple-ish) Pegar 1 vez (global) ========================= */ :root{ --vyp-bg:#0A0A0A; --vyp-bg2:#0F0F10; --vyp-card:#141416; --vyp-white:#FFFFFF; --vyp-muted:rgba(255,255,255,.72); --vyp-dim:rgba(255,255,255,.55); --vyp-line:rgba(255,255,255,.12); --vyp-soft:rgba(255,255,255,.08); --vyp-radius:18px; --vyp-radius-sm:14px; --vyp-shadow: 0 18px 50px rgba(0,0,0,.45); --vyp-max: 1200px; --vyp-pad: clamp(18px, 3vw, 34px); --vyp-section: clamp(64px, 8vw, 132px); --vyp-section-sm: clamp(42px, 6vw, 90px); --vyp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif; } .vyp2026 *{ box-sizing:border-box; } .vyp2026{ font-family:var(--vyp-font); color:var(--vyp-white); background:transparent; } .vyp2026 a{ color:inherit; text-decoration:none; } .vyp2026 img{ max-width:100%; height:auto; display:block; } .vyp-wrap{ width:100%; padding-left: var(--vyp-pad); padding-right: var(--vyp-pad); } .vyp-container{ max-width: var(--vyp-max); margin: 0 auto; } .vyp-section{ padding-top: var(--vyp-section); padding-bottom: var(--vyp-section); background: var(--vyp-bg); } .vyp-section--soft{ background: linear-gradient(180deg, var(--vyp-bg) 0%, var(--vyp-bg2) 100%); } .vyp-section--light{ background: #fff; color:#111; } .vyp-section--light .vyp-muted{ color:rgba(0,0,0,.65); } .vyp-section--light .vyp-line{ border-color:rgba(0,0,0,.12); } .vyp-eyebrow{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--vyp-muted); margin:0 0 10px 0; } .vyp-h1{ font-size: clamp(32px, 4.4vw, 58px); line-height: 1.06; font-weight: 650; letter-spacing: -.02em; margin:0 0 14px 0; } .vyp-h2{ font-size: clamp(24px, 3.2vw, 42px); line-height: 1.12; font-weight: 650; letter-spacing: -.02em; margin:0 0 12px 0; } .vyp-h3{ font-size: 18px; line-height: 1.2; font-weight: 600; margin:0 0 8px 0; } .vyp-lead{ font-size: clamp(15px, 1.45vw, 18px); line-height: 1.55; color: var(--vyp-muted); margin:0 0 22px 0; max-width: 720px; } .vyp-muted{ color: var(--vyp-muted); } .vyp-dim{ color: var(--vyp-dim); } .vyp-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; } .vyp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 18px; border-radius: 999px; font-size: 14px; letter-spacing: .01em; border: 1px solid var(--vyp-line); background: transparent; transition: transform .22s ease, background .22s ease, border-color .22s ease, opacity .22s ease; will-change: transform; } .vyp-btn:hover{ transform: translateY(-1px); } .vyp-btn--primary{ background: var(--vyp-white); color:#111; border-color: transparent; } .vyp-btn--primary:hover{ opacity:.92; } .vyp-btn--ghost{ background: transparent; color: var(--vyp-white); } .vyp-btn--ghost:hover{ background: var(--vyp-soft); } .vyp-grid{ display:grid; gap: clamp(14px, 2.2vw, 26px); } .vyp-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .vyp-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .vyp-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .vyp-card{ background: rgba(255,255,255,.04); border: 1px solid var(--vyp-line); border-radius: var(--vyp-radius); padding: clamp(18px, 2.3vw, 26px); box-shadow: none; transition: transform .22s ease, background .22s ease, border-color .22s ease; } .vyp-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); } .vyp-media{ border-radius: var(--vyp-radius); overflow:hidden; border: 1px solid var(--vyp-line); background: #101012; } .vyp-media img{ width:100%; height:100%; object-fit:cover; } .vyp-kpis{ display:grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 10px; } .vyp-kpi{ border: 1px solid var(--vyp-line); border-radius: 14px; padding: 16px 14px; background: rgba(255,255,255,.03); } .vyp-kpi b{ display:block; font-size: 14px; margin-bottom: 4px; font-weight:600; } .vyp-kpi span{ display:block; font-size: 13px; color: var(--vyp-muted); line-height:1.35; } .vyp-divider{ border:0; border-top:1px solid var(--vyp-line); margin: clamp(20px, 3vw, 34px) 0; } .vyp-pillrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; } .vyp-pill{ display:inline-flex; align-items:center; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--vyp-line); background: rgba(255,255,255,.03); font-size: 14px; transition: background .22s ease, transform .22s ease; } .vyp-pill:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); } .vyp-sector{ position:relative; border-radius: var(--vyp-radius); overflow:hidden; border: 1px solid var(--vyp-line); background:#0d0d0e; min-height: 220px; transition: transform .22s ease, border-color .22s ease; } .vyp-sector:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); } .vyp-sector__img{ position:absolute; inset:0; background-size:cover; background-position:center; filter: saturate(.95) contrast(1.02); opacity:.7; } .vyp-sector__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.78) 100%); } .vyp-sector__body{ position:relative; padding: 22px; display:flex; height:100%; align-items:flex-end; } .vyp-sector__title{ font-size: 18px; font-weight: 650; letter-spacing:-.01em; } .vyp-sector__sub{ margin-top: 6px; font-size: 13px; color: var(--vyp-muted); } .vyp-newsletter{ border-radius: var(--vyp-radius); border: 1px solid var(--vyp-line); background: rgba(255,255,255,.03); padding: clamp(18px, 3vw, 34px); display:flex; align-items:center; justify-content:space-between; gap: 16px; } .vyp-form{ display:flex; gap: 10px; flex-wrap:wrap; } .vyp-input{ min-width: 260px; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--vyp-line); background: rgba(255,255,255,.04); color: var(--vyp-white); outline:none; } .vyp-input::placeholder{ color: rgba(255,255,255,.55); } @media (max-width: 991px){ .vyp-grid-3{ grid-template-columns: 1fr; } .vyp-grid-4{ grid-template-columns: 1fr 1fr; } .vyp-grid-2{ grid-template-columns: 1fr; } .vyp-kpis{ grid-template-columns: 1fr 1fr; } .vyp-newsletter{ flex-direction:column; align-items:flex-start; } .vyp-input{ min-width: 100%; } } /* ========================= PARALLAX BACKGROUND (suave) ========================= */ .vyp-parallax{ position: relative; overflow: hidden; } .vyp-parallax::before{ content:""; position:absolute; inset:-12%; background-image: var(--vyp-bgimg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; /* parallax */ transform: translateZ(0); opacity: .55; filter: saturate(.95) contrast(1.05); } .vyp-parallax::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.70) 70%, rgba(0,0,0,.88) 100%); } .vyp-parallax > *{ position: relative; z-index: 1; } /* En móvil desactiva el fixed (rendimiento) */ @media (max-width: 991px){ .vyp-parallax::before{ background-attachment: scroll; inset:0; } } /* ========================= FIX BOTONES HERO (visibles en dark) ========================= */ /* Base por si el theme pisa colores */ .vyp2026 .vyp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding: 14px 18px; border-radius: 999px; font-weight: 600; text-decoration: none !important; line-height: 1; transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; user-select:none; } /* Primario (blanco) */ .vyp2026 .vyp-btn--primary{ background:#fff !important; color:#0b0b0b !important; border:1px solid rgba(255,255,255,.15) !important; } .vyp2026 .vyp-btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.35); } /* Ghost (ahí está tu fallo) */ .vyp2026 .vyp-btn--ghost{ background: rgba(255,255,255,.08) !important; /* antes estaba casi transparente */ color: #fff !important; /* fuerza texto blanco */ border: 1px solid rgba(255,255,255,.28) !important; /* borde visible */ backdrop-filter: blur(8px); } .vyp2026 .vyp-btn--ghost:hover{ background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.45) !important; transform: translateY(-1px); } /* Focus accesible (Apple-ish) */ .vyp2026 .vyp-btn:focus, .vyp2026 .vyp-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.35); } /* Si dentro hay o herencias raras del theme */ .vyp2026 .vyp-btn--ghost *, .vyp2026 .vyp-btn--primary *{ color: inherit !important; } .vyp2026 .vyp-cta{ position: relative; z-index: 2; } /* ================================ /* ========================= VYP HOME 2026 — Apple-style system Dark, premium, lots of air, sharp hierarchy ========================= */ :root{ --bg: #07070A; --bg2:#0B0B10; --panel:#0F0F15; --panel2:#12121A; --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.16); --text:#FFFFFF; --muted: rgba(255,255,255,.72); --muted2: rgba(255,255,255,.52); --accent:#FFFFFF; /* Apple: blanco/negro limpio */ --shadow: 0 24px 70px rgba(0,0,0,.62); --shadow2: 0 12px 40px rgba(0,0,0,.45); --r: 22px; --r2: 28px; --pad: clamp(18px, 2.1vw, 36px); --max: 1200px; --h1: clamp(40px, 5.8vw, 74px); --h2: clamp(28px, 3.6vw, 46px); --h3: clamp(18px, 1.9vw, 22px); --p: clamp(15px, 1.35vw, 18px); --kicker: 12px; --track: .24em; --btnH: 44px; --navH: 54px; } /* Reset safe */ .vyp-home-2026, .vyp-home-2026 * { box-sizing: border-box; } .vyp-home-2026{ background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } /* Prevent theme overrides (buttons disappearing / opacity 0 / weird visibility) */ .vyp-home-2026 a, .vyp-home-2026 button{ opacity: 1 !important; visibility: visible !important; text-decoration: none; color: inherit; } .vyp-home-2026 img{ max-width:100%; height:auto; display:block; } /* Layout container */ .vyp-c{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } /* Section rhythm like Apple */ .vyp-sec{ padding: clamp(54px, 7vw, 92px) 0; } .vyp-divider{ border-top: 1px solid var(--line); } /* Typography */ .vyp-k{ font-size: var(--kicker); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted2); } .vyp-h1{ font-size: var(--h1); line-height: 1.02; margin: 14px 0 12px; font-weight: 850; } .vyp-h2{ font-size: var(--h2); line-height: 1.08; margin: 8px 0 10px; font-weight: 820; } .vyp-h3{ font-size: var(--h3); line-height: 1.2; margin: 0; font-weight: 760; } .vyp-p{ font-size: var(--p); line-height: 1.55; color: var(--muted); max-width: 68ch; margin: 0; } .vyp-sub{ margin-top: 10px; color: var(--muted2); font-size: 14px; line-height:1.55; } /* Apple-like buttons */ .vyp-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; } .vyp-btn{ height: var(--btnH); padding: 0 18px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight: 700; font-size: 14px; transition: transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease; position: relative; z-index: 2; /* avoid overlay issues */ } .vyp-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.28); } .vyp-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18); } .vyp-btn--solid{ background: #fff; color: #07070A; border-color: #fff; } .vyp-btn--solid:hover{ filter: brightness(.95); } .vyp-btn--ghost{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); } /* Cards (Apple glass) */ .vyp-card{ border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: var(--shadow2); } .vyp-card:hover{ border-color: rgba(255,255,255,.18); } /* Grids */ .vyp-grid2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; } .vyp-grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .vyp-grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 980px){ .vyp-grid2{ grid-template-columns: 1fr; } .vyp-grid3{ grid-template-columns: 1fr; } .vyp-grid4{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 520px){ .vyp-grid4{ grid-template-columns: 1fr; } } /* Hero / Parallax sections */ .vyp-hero{ min-height: calc(100vh - var(--navH)); display:flex; align-items:center; position: relative; overflow: hidden; } .vyp-parallax{ background-attachment: fixed; background-size: cover; background-position: center; } @media (max-width: 980px){ .vyp-parallax{ background-attachment: scroll; } .vyp-hero{ min-height: 74vh; } } /* Apple-like “soft spotlight” */ .vyp-spot{ position:absolute; inset:-120px; background: radial-gradient(900px 520px at 18% 25%, rgba(255,255,255,.12), transparent 60%), radial-gradient(900px 520px at 82% 30%, rgba(255,255,255,.08), transparent 62%), radial-gradient(1200px 800px at 50% 110%, rgba(255,255,255,.05), transparent 55%); pointer-events:none; filter: blur(0px); } /* Apple “pill chips” */ .vyp-chiprow{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; } .vyp-chip{ padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(255,255,255,.86); font-weight: 700; font-size: 13px; transition: transform .18s ease, border-color .18s ease; } .vyp-chip:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); } /* “Big feature” cards like Apple Store */ .vyp-feature{ border-radius: var(--r2); border: 1px solid var(--line); background: radial-gradient(1100px 600px at 20% 20%, rgba(255,255,255,.10), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: var(--shadow); overflow:hidden; position:relative; } .vyp-feature .vyp-inner{ padding: clamp(20px, 2.6vw, 34px); } .vyp-feature .vyp-badge{ display:inline-flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); font-weight: 800; font-size: 12px; letter-spacing: .10em; text-transform: uppercase; } /* Trust row */ .vyp-trust{ display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; } @media (max-width: 980px){ .vyp-trust{ grid-template-columns: repeat(2,1fr);} } @media (max-width: 520px){ .vyp-trust{ grid-template-columns: 1fr;} } /* Small link style */ .vyp-link{ color: rgba(255,255,255,.86); font-weight: 750; display:inline-flex; align-items:center; gap:8px; } .vyp-link:hover{ color:#fff; } /* Optional: hide any theme margin/padding collisions inside the wrapper */ .vyp-home-2026 section{ margin:0; } /* ========================================================= VYP • CE HOME 2026 — GLOBAL SYSTEM (no colisiona con theme) Prefijo: .ce-vyp ========================================================= */ .ce-vyp, .ce-vyp *{ box-sizing:border-box; } .ce-vyp{ --bg:#07070A; --bg2:#0B0B10; --panel:#0F0F15; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16); --text:#fff; --muted:rgba(255,255,255,.72); --muted2:rgba(255,255,255,.52); --shadow:0 24px 70px rgba(0,0,0,.62); --shadow2:0 12px 40px rgba(0,0,0,.45); --r:22px; --r2:28px; --pad:clamp(18px, 2.1vw, 36px); --max:1200px; --h1:clamp(40px, 5.8vw, 74px); --h2:clamp(28px, 3.6vw, 46px); --h3:clamp(18px, 1.9vw, 22px); --p: clamp(15px, 1.35vw, 18px); --k:12px; --track:.24em; --btnH:44px; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display","SF Pro Text", Segoe UI, Roboto, Helvetica, Arial; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } /* Neutraliza “cosas raras” del theme dentro de CE */ .ce-vyp a, .ce-vyp button{ opacity:1 !important; visibility:visible !important; text-decoration:none !important; color:inherit; } .ce-vyp img{ max-width:100%; height:auto; display:block; } /* Container */ .ce-vyp__c{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); } .ce-vyp__sec{ padding:clamp(54px, 7vw, 92px) 0; } .ce-vyp__div{ border-top:1px solid var(--line); } /* Type */ .ce-vyp__k{ font-size:var(--k); letter-spacing:var(--track); text-transform:uppercase; color:var(--muted2); } .ce-vyp__h1{ font-size:var(--h1); line-height:1.02; margin:14px 0 12px; font-weight:850; } .ce-vyp__h2{ font-size:var(--h2); line-height:1.08; margin:8px 0 10px; font-weight:820; } .ce-vyp__h3{ font-size:var(--h3); line-height:1.2; margin:0; font-weight:760; } .ce-vyp__p{ font-size:var(--p); line-height:1.55; color:var(--muted); max-width:68ch; margin:0; } .ce-vyp__sub{ margin-top:10px; color:var(--muted2); font-size:14px; line-height:1.55; } /* Buttons */ .ce-vyp__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; } .ce-vyp__btn{ height:var(--btnH); padding:0 18px; border-radius:999px; border:1px solid var(--line2); background:transparent; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:14px; transition: transform .18s ease, border-color .18s ease, background .18s ease, filter .18s ease; position:relative; z-index:2; } .ce-vyp__btn:hover{ transform: translateY(-1px); border-color:rgba(255,255,255,.28); } .ce-vyp__btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.18); } .ce-vyp__btn--solid{ background:#fff; color:#07070A; border-color:#fff; } .ce-vyp__btn--solid:hover{ filter:brightness(.95); } .ce-vyp__btn--ghost{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); } /* Cards */ .ce-vyp__card{ border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow:var(--shadow2); } .ce-vyp__card:hover{ border-color:rgba(255,255,255,.18); } /* Feature card */ .ce-vyp__feature{ border-radius:var(--r2); border:1px solid var(--line); background: radial-gradient(1100px 600px at 20% 20%, rgba(255,255,255,.10), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow); overflow:hidden; position:relative; } .ce-vyp__inner{ padding:clamp(20px, 2.6vw, 34px); } .ce-vyp__badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.88); font-weight:800; font-size:12px; letter-spacing:.10em; text-transform:uppercase; } .ce-vyp__link{ color:rgba(255,255,255,.86); font-weight:750; display:inline-flex; align-items:center; gap:8px; } .ce-vyp__link:hover{ color:#fff; } /* Grids */ .ce-vyp__g2{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; } .ce-vyp__g3{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } .ce-vyp__g4{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; } @media (max-width:980px){ .ce-vyp__g2{ grid-template-columns:1fr; } .ce-vyp__g3{ grid-template-columns:1fr; } .ce-vyp__g4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .ce-vyp__g4{ grid-template-columns:1fr; } } /* Chips */ .ce-vyp__chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; } .ce-vyp__chip{ padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(255,255,255,.86); font-weight:700; font-size:13px; transition: transform .18s ease, border-color .18s ease; } .ce-vyp__chip:hover{ transform: translateY(-1px); border-color:rgba(255,255,255,.22); } /* Trust row */ .ce-vyp__trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media (max-width:980px){ .ce-vyp__trust{ grid-template-columns:repeat(2,1fr);} } @media (max-width:520px){ .ce-vyp__trust{ grid-template-columns:1fr;} } /* Hero / Parallax */ .ce-vyp__hero{ min-height: 92vh; display:flex; align-items:center; position:relative; overflow:hidden; } .ce-vyp__parallax{ background-attachment:fixed; background-size:cover; background-position:center; } @media (max-width:980px){ .ce-vyp__parallax{ background-attachment:scroll; } .ce-vyp__hero{ min-height:74vh; } } .ce-vyp__spot{ position:absolute; inset:-120px; background: radial-gradient(900px 520px at 18% 25%, rgba(255,255,255,.12), transparent 60%), radial-gradient(900px 520px at 82% 30%, rgba(255,255,255,.08), transparent 62%), radial-gradient(1200px 800px at 50% 110%, rgba(255,255,255,.05), transparent 55%); pointer-events:none; } /* ================================= /* ===== REDUCIR ALTURA HEADER ===== */ .header-top{ padding: 6px 0 !important; /* antes suele estar en 15-25px */ min-height: auto !important; } /* Ajustar alineación vertical */ #desktop-header-container{ padding-top: 0 !important; padding-bottom: 0 !important; } /* Reducir altura enlaces superiores (Nuestras tiendas, Blog, etc) */ .header-nav, .header-top .container{ margin-bottom: 0 !important; } /* Ajustar altura menú principal */ #iqitmegamenu-horizontal > nav > ul > li > a{ padding-top: 18px !important; padding-bottom: 18px !important; } /* Compactar botones derecha */ .header-btn{ padding-top: 12px !important; padding-bottom: 12px !important; } /* Opcional: reducir logo si genera altura extra */ #desktop_logo img{ max-height: 42px; } #iqitmegamenu-horizontal > nav > ul > li > a{ padding: 14px 18px !important; font-size: 14px; letter-spacing: .04em; } /* ========================================================= SISTEMA DE CONTRASTE INTELIGENTE CE-VYP ========================================================= */ /* Secciones claras */ .ce-vyp--light, .ce-vyp-m10, .ce-vyp-m07, .ce-vyp-m03 { --vyp-text: #0b0b0f; --vyp-muted: rgba(10,10,15,.70); } /* Secciones oscuras */ .ce-vyp--dark, .ce-vyp__hero, .ce-vyp-m02, .ce-vyp-m04 { --vyp-text: #ffffff; --vyp-muted: rgba(255,255,255,.75); } /* Aplicación automática */ .ce-vyp h1, .ce-vyp h2, .ce-vyp h3, .ce-vyp h4, .ce-vyp p, .ce-vyp .ce-vyp__h1, .ce-vyp .ce-vyp__h2, .ce-vyp .ce-vyp__h3, .ce-vyp .ce-vyp__p { color: var(--vyp-text) !important; } .ce-vyp .ce-vyp__sub, .ce-vyp .ce-vyp-m10__text, .ce-vyp .ce-vyp-m10__lead { color: var(--vyp-muted) !important; } /* ========================================================= FIX VISIBILIDAD TEXTOS SOBRE FONDOS OSCUROS SOLO PARA BLOQUES CE-VYP ========================================================= */ /* Si el bloque tiene fondo oscuro */ .ce-vyp[class*="dark"], .ce-vyp[class*="black"], .ce-vyp--dark, .ce-vyp--black{ color:#fff !important; } /* Forzar textos internos en blanco */ .ce-vyp--dark .ce-vyp__k, .ce-vyp--dark .ce-vyp__h1, .ce-vyp--dark .ce-vyp__h2, .ce-vyp--dark .ce-vyp__h3, .ce-vyp--dark .ce-vyp__p, .ce-vyp--dark .ce-vyp__sub, .ce-vyp--dark a{ color:#fff !important; } /* Botones en fondo oscuro */ .ce-vyp--dark .ce-vyp__btn{ color:#fff !important; border-color:#fff !important; } .ce-vyp--dark .ce-vyp__btn--solid{ background:#ffd100 !important; color:#000 !important; } .ce-vyp--dark .ce-vyp__btn--ghost{ background:transparent !important; border:1px solid #fff !important; } /* Chips */ .ce-vyp--dark .ce-vyp__chip{ background:rgba(255,255,255,.08); color:#fff !important; border:1px solid rgba(255,255,255,.2); } /* Cards */ .ce-vyp--dark .ce-vyp__card{ background:rgba(255,255,255,.05); color:#fff !important; border:1px solid rgba(255,255,255,.12); } /* ========================================== FIX BOTÓN MARCAS · SECCIÓN DARK ========================================== */ .ce-vyp--dark .ce-vyp__btn--outline{ background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,.6) !important; border-radius: 40px; padding: 14px 32px; font-weight: 600; letter-spacing: .02em; transition: all .3s ease; } /* Hover premium */ .ce-vyp--dark .ce-vyp__btn--outline:hover{ background: #ffd100 !important; color: #000 !important; border-color: #ffd100 !important; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255,209,0,.35); } .ce-vyp--dark .ce-vyp__btn--outline{ background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }