/* ============================================================ custom.css — child_gaia (Selene) Reorganizado por secciones. El orden de los bloques que se sobreescriben entre sí (base -> overrides "legacy parity", duplicados de cookies, etc.) se ha conservado para no alterar la cascada. ÍNDICE ------------------------------------------------------------ 1. Variables (:root) 2. Fuentes (@font-face) 3. Base y tipografía 4. Layout y utilidades 5. Header / Menú 6. Home · Slider 7. Home · Banners 8. Categoría 9. Ficha de producto 10. Off-canvas y filtros 11. Calcula tu talla 12. Mapa de distribuidores 13. Buscador 14. Formularios 15. Editorial 16. Noticias / Blog 17. Prefooter y Footer 18. Cookies 19. Páginas especiales (landing, popups, etc.) 20. Animaciones 21. Miniaturas hover 22. Overrides / Legacy parity (van al final a propósito) ============================================================ */ /* ============================================================ 1. VARIABLES (:root) ============================================================ */ /* =================== NO BORRAR =============================== */ :root { font-size: 20px; --blue: #cae8f3; --indigo: #331177; --purple: #8e44ad; --red: #e74c3c; --orange: #f39c12; --yellow: #F4D03F; --green: #2ecc71; --teal: #27ae60; --cyan: #16a085; --white: #fff; --gray: #bdc3c7; --gray-light: #d9dcde; --gray-dark: #95a5a6; --primary: #000000; --secondary: #666; --success: #54d98c; --info: #1abc9c; --warning: #e67e22; --danger: #c0392b; --lighter: #f6f5f8; --light: #f0eff3; --light-2: #f0eff3; --light-3: #efedf5; --light-4: #e0ddec; --dark: #343a40; --dark-blue: #222; --darker: #141414; --black: #080808; /* --pink: #f6e7e6; */ --pink: #F0EEE9; --dark-pink: #a2977c; --light-pink: #F7F6F4; --new-blue: #dde5ed; --new-dark-blue: #61768b; --new-light-blue: #d1d9e1; --heading-font-family: "Domaine-Disp-regular", serif; --general-text-font-family: "poppins", sans-serif; --menu-font-family: "poppins", sans-serif; /* Paleta Cloud Dancer */ --cd-base: #F0EEE9; --cd-light: #F7F5F2; --cd-header: #EAE4DD; --cd-socket: #D8CEBE; --cd-border: #DDD6CE; --cd-mid: #EDE7E0; } /* ============================================================ 2. FUENTES (@font-face) ============================================================ */ @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); } @font-face { font-family: 'Domaine-Disp-regular'; src: url('../fonts/DomaineDisp-Regular.eot'); src: url('../fonts/DomaineDisp-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDisp-Regular.woff2') format('woff2'), url('../fonts/DomaineDisp-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Domaine-Disp-regular'; src: url('../fonts/DomaineDisp-Regular.eot'); src: url('../fonts/DomaineDisp-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDisp-Regular.woff2') format('woff2'), url('../fonts/DomaineDisp-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Domaine-Disp-regular'; src: url('../fonts/DomaineDisp-Regular.eot'); src: url('../fonts/DomaineDisp-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDisp-Regular.woff2') format('woff2'), url('../fonts/DomaineDisp-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Domaine-Disp-regular'; src: url('../fonts/DomaineDisp-Regular.eot'); src: url('../fonts/DomaineDisp-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDisp-Regular.woff2') format('woff2'), url('../fonts/DomaineDisp-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Domaine-Disp-medium'; src: url('../fonts/DomaineDispMedium.eot'); src: url('../fonts/DomaineDispMedium.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDispMedium.woff2') format('woff2'), url('../fonts/DomaineDispMedium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Domaine-Disp-medium'; src: url('../fonts/DomaineDispMedium.eot'); src: url('../fonts/DomaineDispMedium.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDispMedium.woff2') format('woff2'), url('../fonts/DomaineDispMedium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Domaine-Disp-medium'; src: url('../fonts/DomaineDispMedium.eot'); src: url('../fonts/DomaineDispMedium.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDispMedium.woff2') format('woff2'), url('../fonts/DomaineDispMedium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Domaine-Disp-medium'; src: url('../fonts/DomaineDispMedium.eot'); src: url('../fonts/DomaineDispMedium.eot?#iefix') format('embedded-opentype'), url('../fonts/DomaineDispMedium.woff2') format('woff2'), url('../fonts/DomaineDispMedium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } /* =================== NO BORRAR =============================== */ /* ============================================================ 3. BASE Y TIPOGRAFÍA ============================================================ */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ccc; } ::-moz-placeholder { /* Firefox 19+ */ color: #ccc; } :-ms-input-placeholder { /* IE 10+ */ color: #ccc; } :-moz-placeholder { /* Firefox 18- */ color: #ccc; } .btn{text-transform: uppercase;} /* Fix horizontal scroll on touch devices */ html { overflow-x: hidden; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .title { margin-bottom: 25px; } .content-text .h1, .content-text .h2, .content-text .h3, .content-text .h4, .content-text .h5, .content-text .h6, .content-text h1, .content-text h2, .content-text h3, .content-text h4, .content-text h5, .content-text h6, .content-text .title {margin-bottom: 15px;} .content-text p + h2{margin-top: 30px;} .content-text p + h3{margin-top: 25px;} .content-text h5 + h3, .content-text h4 + h3{margin-top: 25px;} .content-text p + h5, .content-text p + h4{margin-top: 20px;} .content-text p + h5, .content-text p + h4, .content-text p:has( + p){margin-bottom: 15px;} /* ============================================================ 4. LAYOUT Y UTILIDADES ============================================================ */ .navigation-wrap { z-index: 8000;} .navbar { width: 100%;} .navbar-nav { margin-right: 0!important;} .navigation-wrap{ padding: 0 15px;} @media (min-width: 1430px){ .navigation-wrap{ padding: 0 5vw;} } @media (min-width: 1200px){ .navbar-collapse--inner{ flex-basis: 100%; flex-grow: 1; display: flex; flex-direction: column; align-items: end; } .main-navigation .dropdown-menu{ padding: 8px 0; } .main-navigation .nav-item.show .dropdown-menu{margin-top: 34px;} } .main-navigation .dropdown-menu{ border-top: 2px solid #000000; } .main-navigation .nav-item.show > .dropdown-menu{ padding: 8px 0; } @media (min-width: 576px){ /* .main-navigation .nav-item.doble ul{column-count: 2;} */ .main-navigation .nav-item.doble ul { display: grid; grid-template-rows: repeat(10, 1fr); flex-wrap: wrap; grid-auto-flow: column; } } .main-navigation .dropdown-menu .nav-item .nav-link{padding: 0 20px;} .navbar-actions--wrapper{ display: flex; justify-content: end; width: 100%; align-items: center;} .navbar-actions--wrapper .languages{padding:0; gap: 15px; align-items: center;} .navbar-actions--wrapper .languages .lang-item {line-height: 1;} .navbar-actions--wrapper .languages .lang-item.active{font-weight: 300;} .navbar-actions--wrapper .languages .lang-item.active a{ color: var(--main-color-3);} .navbar-actions--wrapper .languages .lang-item a{padding: 0; font-size: 12px; text-decoration: none; color: #333333;} .navigation-wrap .main-navigation {padding-top: 15px; padding-bottom: 15px;} .navigation-wrap .main-navigation .navbar-brand{margin-top: 0; margin-bottom: 0;} .aspectratio16_9 iframe{aspect-ratio:16/9; object-fit:cover;} .row.fullwidth{margin-left:0; margin-right:0;} .row.fullwidth .row{margin-left:0; margin-right:0;} .row.fullwidth div{padding-left:0; padding-right:0;} #index main > div { padding-top: 0;} #index .margin-principal {margin-top: 121px;} .video-home iframe{ width: 100%; height: 100%; } /* ============================================================ 5. HEADER / MENÚ ============================================================ */ #index .main-navigation .navbar-nav .nav-link {color: var(--black) !important;} .main-navigation .navbar-nav .nav-link:hover { opacity:0.8;} .nav-item.dropdown a:after { margin-left: 5px; font-size: 14px;} .navbar-light .navbar-brand { padding: 0 0; height: 90px;} .cbp-af-header.cbp-af-header-shrink .navbar-brand { height: 70px;} .dropdown-item { color:#000; padding: 0 20px;} #index .cbp-af-header .dropdown-menu{ background-color: rgba(255,255,255,0.7);} #index .cbp-af-header.header-transparent.cbp-af-header-shrink .dropdown-menu{ background-color: rgba(255,255,255,1);} #index .cbp-af-header.header-transparent.cbp-af-header-shrink .main-navigation .navbar-nav .nav-link { color: var(--black)!important;} #index .cbp-af-header.header-transparent {border:none;background-color: var(--pink);} #index .cbp-af-header.cbp-af-header-shrink .nav-item.dropdown .navitem.dropdown-menu{background-color: rgba(255,255,255,1);} #index .navbar-brand img { filter: brightness(0%);-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} #index .cbp-af-header.cbp-af-header-shrink .navbar-brand img { filter: brightness(0%);} .cbp-af-header.cbp-af-header-shrink .dropdown-menu { margin-top: 10px!important;} .navbar-brand img { filter: brightness(0%);} .navbar-light .navbar-nav .nav-link { color: rgba(0,0,0,1); font-weight: 500; font-size: 18px;white-space: nowrap;} .navbar-light .navbar-nav .nav-link.active{color:var(--new-blue);} #index .btn-icon-transparent {color: #333;} #index .cbp-af-header-shrink .btn-icon-transparent { color: #333;} .dropdown-item{font-weight: 500;} .lazo{align-items: center;} .lazo.data{order: 0;} .lazo::before { order: 1; transition: all 0.3s ease-out; content: url("/media/images/general/pink-ribbon.svg"); width: 15px !important; height: auto !important; display: inline-block; line-height: 0; } .cbp-af-header.cbp-af-header-shrink .nav-item.ribbon::after { transition: all 0.3s ease-out; top: 7px;} .nav-item.ribbon.dropdown a::after { margin-left: 30px;} /* Nav spacing: single source ≤1199px */ @media (max-width: 1199px) { .main-navigation .navbar-nav > .nav-item + .nav-item { margin-top: 10px; } } @media (max-width: 991px){ .navigation-wrap{padding: 0;} .navigation-wrap .fullwidth{padding: 0 15px;} .navbar-collapse--inner { flex-basis: 100%; flex-grow: 1; display: flex; flex-direction: column; align-items: start; justify-content: space-between; } .main-navigation .navbar-nav{margin-left: 0 !important;} .navbar-actions--wrapper{width: auto; flex-direction: row; align-items: end; margin-left: auto;} .navbar-actions--wrapper .languages{flex-direction: row;} .main-navigation .dropdown-menu.show{margin-top: 15px;} .main-navigation .dropdown-menu ul { padding-right: 10px !important; } .main-navigation .dropdown-menu .nav-item { margin-bottom: 10px; } .main-navigation .dropdown-menu .nav-item .nav-link{padding-left: 0; padding-right: 0;} .main-navigation .dropdown-menu .nav-item .toggler-inside{display: none;} .buscador-list-item .btn-search-expand, .buscador-list-item .search-toggler.btn-search-expand{padding: 0; margin-bottom: 0;} } /* ============================================================ 6. HOME · SLIDER ============================================================ */ #Sliders-swiper .row{margin-left:0; margin-right:0;} #Sliders-swiper .item .row{margin-left: -15px; margin-right: -15px;} #Sliders-swiper { margin-bottom: 0; width: 100%; } #Sliders-swiper .portfolio-thumb{margin-bottom:0; width: 100%;} #Sliders-swiper .banner-content .content-title{font-size: min(max(16px, 3.8vw), 60px); text-decoration: none;} #Sliders-swiper .banner-content .content-title a{ text-decoration: none;} #Sliders-swiper .sliderbanner .btn{ margin-top: 35px; font-family: 'Poppins', sans-serif; } #Sliders-swiper .swiper-button-prev { padding: 15px; padding-left: 45px; height: 44px; width: 44px; line-height: 36px; font-size: 40px; font-weight: normal; } #Sliders-swiper .swiper-button-prev::after{content: unset;} #Sliders-swiper .swiper-button-next { padding: 15px; padding-right: 45px; height: 44px; width: 44px; line-height: 36px; font-size: 40px; font-weight: normal; } #Sliders-swiper .swiper-button-next::after{content: unset;} /* Alçada del contenidor: imprescindible en direction:vertical */ @media (min-width: 992px) { #Sliders-swiper { height: calc(100vh - 120px); overflow: hidden;} #Sliders-swiper .item img { height: calc(100vh - 120px); object-position: top; object-fit: cover;} } @media (max-width: 991px) { #Sliders-swiper { height: 62vw; overflow: hidden; display: block; } #Sliders-swiper .swiper-wrapper, #Sliders-swiper .swiper-slide { height: 100%; } #Sliders-swiper .item img { width: 100%; height: 100%; object-fit: cover; object-position: top; } } /* Dots (paginació) a baix i centrats com l'Owl */ #Sliders-swiper .swiper-pagination { top: auto; bottom: 12px; left: 0; right: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; transform: none; width: 100%; } #Sliders-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #eee; opacity: 1; margin: 0 5px !important; } #Sliders-swiper .swiper-pagination-bullet-active { background: var(--new-dark-blue); } /* Fletxes prev/next en blanc sobre la imatge */ #Sliders-swiper .swiper-button-prev, #Sliders-swiper .swiper-button-next { color: #fff; } #Sliders-swiper { touch-action: pan-y; } /* ============================================================ 7. HOME · BANNERS ============================================================ */ .individualbanner1{ display: flex; justify-content: center; align-items: center;} .individualbanner1 figure,.individualbanner2 figure { margin: 0;} .individualbanner1 .caption{ margin-top: 16vw!important; max-width: 65%; margin-left: inherit; padding: 0 5vw!important;} .individualbanner1 .caption h2{ font-size: min(max(16px, 3vw), 55px);} .individualbanner1 .caption h3{ font-size: min(max(16px, 3vw), 55px);} .individualbanner1.right{ justify-content: flex-end;} .individualbanner1.left .caption{ max-width: 65%; margin-left: inherit;} .individualbanner1.right .caption{ max-width: 65%; margin-left: inherit; justify-content: flex-end; left: inherit;} .individualbanner1.center .caption{ max-width: 65%; margin-left: inherit; left: 0; right: 0; margin-left: auto; margin-right:auto;} .individualbanner1 .caption .projectebotservei a {margin-top:25px;} .individualbanner2{margin-bottom:1px!important;} .bloque.iz .individualbanner2:after{display: none} .bloque.de .row div:last-child .individualbanner2:after{display:none;} .individualbanner2 .caption{ margin: 0 auto!important; padding: 0 3vw!important;} .individualbanner2{ --content-heading-color: #ffffff; justify-content: start !important; align-items: end !important; } .individualbanner2 .caption { padding: 30px !important; max-width: unset !important; pointer-events: unset !important; } .individualbanner2 .caption h2 { font-size: clamp(32px, 27.964px + 1.261vw, 46px); text-align: left; } #slogan{padding:clamp(25px, 17.793px + 2.252vw, 50px) 0;} #banners .big{} #banners .iz {} #banners .iz div,#banners .de div,#banners div{padding:0;margin:0;} #bannerspink{margin-top:6px;padding:0;} #bannerspink .iz{padding:0 6px 0 12px;} #bannerspink .de{padding:0 12px 0 6px;} .individualbanner3{ aspect-ratio: 16/7; display: flex; justify-content: center; align-items: center; position:relative;min-height: 240px; background-color: #f6e7e6;} .captionbanner3{ max-width: 80%; text-align: center; font-size: 50px; line-height: normal; color: #444;} .individualbanner3 .zonalink { position: absolute; left: 0; top: 0; width: 100%; height: 100%;display: flex; justify-content: center; align-items: center; min-height: 240px;} .individualbanner3:hover a{background-color: transparent!important;} /* Banner mod2 + Video overlay */ .individualbanner2video{--content-heading-color: #fff; --content-a-color: #ffffff; --content-a-hover-color: #ffffff;} .individualbanner2video .video-overlay{transition:opacity .3s ease;} .individualbanner2video .caption{transition:opacity .3s ease; z-index: 3;} .individualbanner2video .portfolio-thumb{width: 100%;} .individualbanner3 h1,.individualbanner3 h2,.individualbanner3 h3,.individualbanner3 h4, .individualbanner2 h1,.individualbanner2 h2,.individualbanner2 h3,.individualbanner2 h4, .individualbanner13 h1,.individualbanner1 h2,.individualbanner1 h3,.individualbanner1 h4{-webkit-transition: all .2s ease-in; transition: all .2s ease-in;} .banner img{-webkit-transition: all .2s ease-in; transition: all .2s ease-in;filter: brightness(100%); width:100%;} /* ===== Apple-style home banners ===== */ #home-banners { display: none; } #index #home-banners { display: flex; flex-direction: row; margin-bottom: 100px;} #index #home-banners .home-apple-banner { flex: 1; border-right: 1px solid rgba(0,0,0,0.06); } #index #home-banners .home-apple-banner:last-child { border-right: none; } #Sliders-swiper .sliderbanner .content-title a, #Sliders-swiper .sliderbanner .content-title{color: #fff;} @media (max-width: 767px) { #index #home-banners { flex-direction: column; } } @media (max-width: 767px) { #index #home-banners { flex-direction: column; } } @media (max-width: 767px) { #index #home-banners { flex-direction: column; } } @media (max-width: 767px) { #index #home-banners { flex-direction: column; } } .home-apple-banner { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 300px; text-decoration: none !important; position: relative; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.06); transition: background-color 0.35s ease; } .home-apple-banner__inner { text-align: center; padding: 20px; max-width: 750px; } .home-apple-banner__title { font-family: "Domaine-Disp-regular", serif; font-size: clamp(36px, 33.405px + 0.811vw, 45px); font-weight: 300; line-height: 1.1; margin-bottom: 15px; color: inherit; } .home-apple-banner__cta { font-size: 20px; font-weight: 300; color: inherit; opacity: 0.55; transition: opacity 0.2s ease; } .home-apple-banner:hover .home-apple-banner__cta { opacity: 1; } .banner-talla {background-color: var(--new-blue);color: #1d1d1f;} .banner-talla:hover { background-color: var(--new-light-blue); color: #1d1d1f; } .banner-tienda { background-color: var(--light-pink); color: #1d1d1f; } .banner-tienda:hover { background-color: var(--pink); color: #1d1d1f; } /* ============================================================ 8. CATEGORÍA ============================================================ */ /*CATEGORIA NIV 1*/ .product-list .no-results{ margin: 14% auto;} .product-list .no-results p{border:1px solid #333; padding:15px 30px;} #categoria .product-list .item h3{font-family: 'Poppins', sans-serif;padding-left: 15px; font-size:16px; font-size: min(max(16px, 1.5vw), 18px); margin-bottom: 0;} .product-list .item a{display:block;position: relative;} .product-list .item a img{ width:100%;} .product-list .franja{height: 6px;background: #fff;position: absolute;bottom: 0;} .product-list .single-post-slide-wrap .foto2 { -webkit-transition: all .5s ease-in; transition: all .5s ease-in;position: absolute;top: 0;left:0; width: 100%; opacity:0;visibility: hidden;} .product-list .single-post-slide-wrap .foto1{-webkit-transition: all .5s ease-in; transition: all .5s ease-in;opacity:1;} .product-list .single-post-slide-wrap:hover .foto1{opacity:0;} .product-list .single-post-slide-wrap:hover .foto2{visibility: visible;opacity:1;} #category-list{margin-bottom: 50px;} #category-list .owl-stage{gap: 10px;} #category-list .foto2{display:none;} #subategories #category-list .owl-carousel .owl-item:first-child img { background-color:var(--pink);} #subategories #category-list .owl-carousel .owl-item:first-child .single-post-slide-wrap{justify-content: center; align-items: center; display: flex} #subategories #category-list .owl-carousel .owl-item:first-child .post-details{ position: absolute;pointer-events: none;} #subategories #category-list .owl-carousel .owl-item:first-child .post-content{pointer-events: none; color:#000;} #category-list .owl-carousel .item img{padding:0px;} #category-list .owl-carousel .item img{-webkit-transition: all .2s ease-in; transition: all .2s ease-in;} #category-list .owl-carousel .item.all{background-color:#D2ACA9;} #category-list .owl-carousel .item h3{font-family: 'Poppins', sans-serif;padding-left: 15px; font-size:10px; font-size: min(max(10px, 1.5vw), 14px);line-height: normal; margin-top: 10px;text-align: center; margin-bottom: 0;} #category-list .owl-carousel.owl-drag .owl-item { padding-bottom: 0px;} .Productos.lev-1 .main-content-wrap,.Productos.lev-2 .main-content-wrap{ margin-top: 0!important;} #category-list .owl-carousel img:hover{opacity:0.6;} #category-list .owl-carousel .owl-nav button.owl-next, #category-list .owl-carousel .owl-nav button.owl-prev {border: none!important; background-color: transparent!important; outline: none;} #category-list .owl-carousel .owl-prev.disabled,#category-list .owl-carousel .owl-next.disabled{display:none;} #category-list .owl-carousel .owl-nav .owl-next { right: -60px;} #category-list .owl-carousel .owl-nav .owl-prev { left: -60px;} #category-list .owl-carousel .owl-nav button { top: 28%;} #category-list .owl-carousel .owl-nav button span{font-size:0;} #category-list .owl-carousel .owl-nav button span { color: #ccc !important;} #category-list .owl-carousel .owl-nav button.owl-next span:before{content:"\e84b"; } #category-list .owl-carousel .owl-nav button.owl-prev span:before{content:"\e848"; } #category-list .owl-carousel .owl-nav button span:before{ font-family: "unicons"; font-size: 40px; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 1px 1px 1px rgb(127 127 127 / 30%);} .owl-theme .owl-dots .owl-dot span { background-color: #eee !important; width: 10px; height: 10px;} .owl-theme .owl-dots .owl-dot.active span{ background-color: var(--new-dark-blue) !important;} .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color: var(--new-dark-blue) !important; } #category-list .owl-dots { width: 150px; position: absolute; left: 0; right: 0;} /* ============================================================ 9. FICHA DE PRODUCTO ============================================================ */ /*Fitxa Producte*/ .Productos.fitxa .margin-principal{padding: 0;} .Productos.fitxa .margin-principal .row.fullwidth{padding: 0 5vw;} .Productos.fitxa .videocontainer{padding: 0 7px;} #ficha{} #resultado #ver-todos, #ficha #ver-todos,#borrar-filtros { display: inline-block; width: auto; background: transparent; border: 1px solid #333; text-transform: uppercase; font-size: min(max(16px, 1.28vw), 16px); padding: 5px 35px; height: auto; border-radius: 0; color: #333; font-family: 'Poppins',sans-serif; font-weight: 300; font-size: 12px; } #galeria .gallerycontent article { padding: 0 2.5px; margin-bottom: 5px } #galeria .gallerycontent article .single-post-slide-wrap{border:1px solid #eee} #description{ padding: 2vw 40px;} #description h1{font-size: 26px; line-height: normal; font-weight: 600;} #description p { color: #666; font-size: 16px; line-height: 22px; } #description h4,#description h5{ font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 500; color: #333;margin-bottom: 10px;} .fondorosa {background-color: var(--pink);padding:40px 0;} /*botons filtres*/ .filtrar{ display: flex; flex-wrap: wrap; justify-content: flex-end;margin-bottom: 20px;margin-top: 10px;} .filtrar .btn {background-color: #fff; color:#333; margin-left:10px; text-transform:uppercase;font-size: 12px; padding: 0 5px;padding: 0 15px; gap: 15px; border: 1px solid #111;} .filtrar .dropdown-menu{transform: translate3d(10px, 23px, 0px)!important;} .filtrar button.filtro img{width: 16px; height: 16px; opacity: 0.7; margin-top: -4px;} .filtrar .btn:hover{background-color: #fff; color:#111;} .filtrar .btn:hover img{opacity: 1;} .disabled,#borrar-filtros[disabled="disabled"]{opacity:0!important;cursor: default!important;} .checkbox-color:checked + label.white::after, .checkbox-color:not(:checked) + label.white::after { color: #000;} .popover {font-size:12px!important;} #relacionados h2{font-family: 'Poppins', sans-serif;} #relacionados article .post-details h2{font-family: 'Poppins', sans-serif; padding-left: 15px; font-size: min(max(10px, 1.5vw), 18px);} #relacionados .main-content-wrap{padding-left: 5px; padding-right: 5px;} /*Fi Fitxa Producte*/ /* --- CSS: zoom en hover sense opacitat --- */ .single-post-slide-wrap { position: relative; overflow: hidden; } .single-post-slide-wrap img { display: block; width: 100%; height: auto; transition: transform 0.5s ease-out; transform-origin: center center; will-change: transform, transform-origin; } .single-post-slide-wrap.zoom-active img { transform: scale(2.5); } #guia-tallas .modal-dialog, #guia-tallas .modal-content { max-width: 1000px; max-height: 700px; overflow: auto; } #guia-tallas .container{ padding-right:0px!important; padding-left:0px!important; } #guia-tallas{ --light-2: var(--new-light-blue); } #guia-tallas .table .thead-light th{background-color: var(--new-blue);} .Productos.fitxa:has(.contenido-composicion:empty) .titulo-composicion, .Productos.fitxa:not(:has(.contenido-composicion:not(p))) .titulo-composicion{display: none;} /* Galería en desktop: grid envuelto sin swiper */ @media (max-width: 991px){ #Productos_cat_1-swiper-2776{width: 100% !important;} .Productos.fitxa #contentfitxa #galeria{order: 1;} .Productos.fitxa #contentfitxa #galeria .gallerycontent {padding-left: 12.5px; padding-right: 12.5px;} .Productos.fitxa #contentfitxa #description{order: 0; padding: 0 15px;} } @media screen and (min-width: 991px) { .Productos.fitxa #contentfitxa .gallery .swiper-wrapper{flex-wrap: wrap; transform: unset !important; gap: 5px;} .Productos.fitxa #contentfitxa .gallery [class*="swiper-button-"]{display: none;} .Productos.fitxa #contentfitxa .gallery .item{margin: 0 !important; padding: 0 !important;} .Productos.fitxa .galeria-producto .swiper-pagination{display: none;} } /* Botón popup tallas */ .button-popup--wrapper{ background-color: var(--cd-mid); margin-bottom:14px; transition: all .3s ease-in-out;} .button-popup--wrapper button { padding: 15px 30px; display: block; font-family: 'Poppins', serif; color: #333; font-size: 18px; outline: none; border: none; width: 100%; text-align: left; background-color: transparent; font-weight: 300; display: flex; align-items: center; justify-content: space-between; text-decoration: none; } .button-popup--wrapper:has(button:hover){background-color: var(--cd-base);} .button-popup--wrapper button::after{ content: "\f105"; font-family: "FontAwesome"; font-size: 16px; color: #333; } /* Combinaciones no disponibles (combo color×talla inexistente) */ .variations .variation-item .options .option-button.out-of-stock, .variations .variation-item .options .variation-select option[data-out-of-stock="1"] { opacity: .35; text-decoration: line-through; cursor: pointer; } .variations .variation-item .options .option-button.out-of-stock:hover { opacity: .5; border-color: #ccc; box-shadow: none; } /* [IRIDIAN 2026-06-16] Tallas: grid -> flex mantenint l'estil; cada copa en fila propia. Override sobre ecommerce.css (selector .item-variations.variations per guanyar especificitat, ja que ecommerce.css usa .variations amb la mateixa especificitat). El salt de copa el fa un separador .copa-break (flex-basis:100%) que insereix custom.js detectant el canvi de lletra de copa al label ("C - 90" -> "D - 85"). */ .item-variations.variations .variation-item .options:has(.option-button[data-attribute-id="2"]){ display:flex; flex-wrap:wrap; gap:10px; grid-template-columns:none; } .item-variations.variations .variation-item .options .option-button[data-attribute-id="2"]{ min-width:60px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; } .variations .variation-item .options .copa-break{ flex-basis:100%; width:100%; height:0; margin:0; padding:0; border:0; list-style:none; grid-column:1 / -1; } /* Boton "Mostrar todos" colores */ .variations .variation-item .options .option-button.option-button--show-all{ position: relative; background: transparent; border: 1px dashed #999; } .variations .variation-item .options .option-button.option-button--show-all .option-button--miniature{ display: none; } .variations .variation-item .options .option-button.option-button--show-all .option-button--label{ position: static; opacity: 1; background: transparent; color: #333; padding: 0; font-size: 9px; font-weight: 500; text-transform: uppercase; transform: none; display: block; white-space: nowrap; text-align: center; } .variations .variation-item .options .option-button.option-button--show-all .option-button--label::after{ display: none; } .variations .variation-item .options .option-button.option-button--show-all:hover{ border-color: #000; border-style: solid; } /* Show-all circular como swatches color */ .variations .variation-item .options .option-button.option-button--show-all{ display: block; aspect-ratio: 1/1; border-radius: 100px; width: auto; min-width: 30px; padding: 2px; border: 1px dashed #999; } .variations .variation-item .options .option-button.option-button--show-all .option-button--label{ font-size: 8px; line-height: 1; } .variations .variation-item .options .option-button.out-of-stock { display: none !important; } /* ============================================================ 10. OFF-CANVAS Y FILTROS ============================================================ */ /*================================= Start Off Canvas Area Wrapper ==================================*/ .off-canvas-area-wrapper, .off-canvas-responsive-menu, .off-canvas-search-box { opacity: 0; visibility: hidden; pointer-events: none; position: fixed; top: 0; right: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 100vh; width: 100vw; } .off-canvas-area-wrapper .off-canvas-content-wrap, .off-canvas-responsive-menu .off-canvas-content-wrap, .off-canvas-search-box .off-canvas-content-wrap { background-color: white; margin-left: auto; height: 100%; position: relative; -webkit-transform: translateX(calc(100% + 40px)); -ms-transform: translateX(calc(100% + 40px)); transform: translateX(calc(100% + 40px)); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; max-width: 360px; width: 100%; } @media only screen and (max-width: 575.98px) { .off-canvas-area-wrapper .off-canvas-content-wrap, .off-canvas-responsive-menu .off-canvas-content-wrap, .off-canvas-search-box .off-canvas-content-wrap { max-width: 250px !important; } } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content { padding: 40px; height: 100%; overflow-y: auto; } @media only screen and (max-width: 575.98px) { .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content { padding: 30px 15px; } } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content .off-canvas-item, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content .off-canvas-item { margin-bottom: 60px; } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child { margin-bottom: 0; } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2 { font-size: 16px; line-height: 1; font-weight: 500; text-transform: uppercase; margin-bottom: 23px; margin-top: -2px; } .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close, .off-canvas-responsive-menu .off-canvas-content-wrap .btn-close, .off-canvas-search-box .off-canvas-content-wrap .btn-close { background-color: white; position: absolute; right: 100%; top: 100px; line-height: 40px; height: 40px; width: 40px; } .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close:hover, .off-canvas-responsive-menu .off-canvas-content-wrap .btn-close:hover, .off-canvas-search-box .off-canvas-content-wrap .btn-close:hover { background-color: #1F49B6; color: white; } .off-canvas-area-wrapper.show, .off-canvas-responsive-menu.show, .off-canvas-search-box.show { opacity: 1; visibility: visible; pointer-events: visible; z-index: 9999; } .off-canvas-area-wrapper.show .off-canvas-overlay, .off-canvas-responsive-menu.show .off-canvas-overlay, .off-canvas-search-box.show .off-canvas-overlay { background-color: rgba(0, 0, 0, 0.5); content: ""; cursor: url("../img/icons/cancel.png"), auto; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; } .off-canvas-area-wrapper.show .off-canvas-content-wrap, .off-canvas-responsive-menu.show .off-canvas-content-wrap, .off-canvas-search-box.show .off-canvas-content-wrap { -webkit-transform: none; -ms-transform: none; transform: none; } .search-box-wrap { background-color: #f4f4f4; margin: -40px -40px 0 -40px; padding: 35px 40px; } @media only screen and (max-width: 575.98px) { .search-box-wrap { margin: -30px -15px 0 -15px; } } .search-box-wrap form { position: relative; } .search-box-wrap form input { background-color: transparent; border: none; display: block; padding-right: 20px; outline: none; width: 100%; } .search-box-wrap form .btn-search { font-size: 13px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .useful-link-menu { margin-top: -20px; overflow: hidden; } .useful-link-menu li { float: left; margin-top: 20px; max-width: 50%; width: 100%; } .useful-link-menu li a { color: #666666; font-size: 14px; line-height: 1; font-weight: 500; text-transform: uppercase; } .useful-link-menu li a:hover { color: #1F49B6; } .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close.trio-tooltip{border:none;outline:none;} .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close:hover{ background-color: var(--pink);} .btn-accordion {color: var(--black);} .off-canvas-content{ padding: 30px!important;} #accordionFilters .card{ border: none; margin-bottom: 0; border-radius:0;} #accordionFilters .card-header .btn-accordion{ padding: 12px 0px;} #accordionFilters .card-body{ padding: 12px 0px;} #accordionFilters #tallas .card-body ul.talla{display:flex;padding: 0;} #accordionFilters .card-body ul{margin-bottom:0;} #accordionFilters .card-body ul li { font-size: 13px; margin: 0 10px 0 0;} #accordionFilters .card-body ul li a{padding:5px;} #accordionFilters .card-body ul li a:hover{color:#000!important;} #accordionFilters #tallas .card-body ul.talla li{list-style:none;} #accordionFilters #tallas .card-body ul.talla li a{ color: #888;} #accordionFilters #copas .card-body{ padding: 12px 0px;} #accordionFilters #copas .card-body ul.copa{display:flex;padding: 0;} #accordionFilters #copas .card-body ul.copa li{list-style:none;margin: 0 40px 0 0;} #accordionFilters #copas .card-body ul.copa li a{ color: #888;} #accordionFilters .col{flex-grow: inherit; margin-bottom: 10px;} .Productos #accordionFilters { margin-bottom: 25px;} .checkbox-color:checked + label, .checkbox-color:not(:checked) + label {border-radius:50%; width: 30px; height: 30px; border: 0px solid #ccc;} #accordionFilters label.white{border:2px solid #ccc!important;} .checkbox-color:not(:checked) + label.white { border: 2px solid #ccc !important;} .filtro-2 .checkbox-color:checked + label,.filtro-2 .checkbox-color:not(:checked) + label {border-radius:50%; width: 15px; height: 15px; border: 0px solid #ccc;} .filtro-2 .form-group{ display: flex; } .filtro-2 .checkbox-color:checked + label::after,.filtro-2 .checkbox-color:not(:checked) + label::after { cursor: auto; } .filtro-2 .form-group {margin-top: -15px;} .checkbox-size:checked + label, .checkbox-size:not(:checked) + label { width: 40px; height: 40px; color:#000;} .checkbox-color:checked + label::after { opacity: 1;} .checkbox-color:checked + label::after, .checkbox-color:not(:checked) + label::after { line-height: 28px;} #accordionFilters .form-group input[type="radio"],#accordionFilters .form-group input[type="checkbox"] { visibility: hidden; display: none;} .checkbox-color[disabled]+ label { pointer-events: none; } .colores .nofoto:hover{ opacity:0.4!important;cursor:not-allowed} .checkbox-size:not(:checked) + label:hover { background-color: #888;} .checkbox-size:checked + label { background-color: var(--new-dark-blue); color: #fff;} .checkbox-color:checked + label { border-color: #888;} .checkbox-color:not(:checked) + label:hover { border-color: #888;} /* ============================================================ FILTRO DE PRODUCTOS COMO OFF-CANVAS (panel propio, independiente del off-canvas del carrito) ============================================================ */ /* WHY: El listado vive dentro de un contenedor .anim-* cuya animacion de entrada usa transform; un ancestro con transform rompe position:fixed. PERO ese transform tambien hace la animacion de aparicion del listado al hacer scroll, asi que solo lo neutralizamos MIENTRAS el filtro esta ABIERTO (html.filter-offcanvas-open). Para entonces la animacion ya termino (scale(1)) y quitar el transform es visualmente identico, pero permite que el panel fixed se ancle al viewport. */ html.filter-offcanvas-open .anim-zoom:has(.has-offcanvas-filter), html.filter-offcanvas-open .anim-up:has(.has-offcanvas-filter), html.filter-offcanvas-open .anim-down:has(.has-offcanvas-filter), html.filter-offcanvas-open .anim-left:has(.has-offcanvas-filter), html.filter-offcanvas-open .anim-right:has(.has-offcanvas-filter){ transform: none !important; } /* Panel oculto por defecto; se abre con .is-open (ver custom.js) */ .filter-offcanvas{ position: fixed; inset: 0; z-index: 12000; --filter-panel-w: 380px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } .filter-offcanvas.is-open{ opacity: 1; visibility: visible; pointer-events: auto; } .filter-offcanvas__overlay{ position: absolute; inset: 0; background: rgba(0,0,0,.5); } .filter-offcanvas__panel{ position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: var(--filter-panel-w); background: #fff; transform: translateX(100%); transition: transform .35s ease; overflow-y: auto; padding: 30px; } .filter-offcanvas.is-open .filter-offcanvas__panel{ transform: none; } .filter-offcanvas__close{ position: absolute; top: 14px; right: var(--filter-panel-w); z-index: 12001; background: #fff; border: 0; padding: 12px; cursor: pointer; color: #111; line-height: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12); } .filter-offcanvas__close:hover{ opacity: .6; } /* El form es .collapse (oculto por defecto): dentro del panel debe verse siempre */ .filter-offcanvas .filters-list.collapse{ display: block !important; } .filter-offcanvas .filter-title{ pointer-events: none; margin-bottom: 10px;} .filter-offcanvas .filter-title i{ display: none; } /* Bloqueo de scroll del fondo mientras el filtro esta abierto */ html.filter-offcanvas-open, html.filter-offcanvas-open body{ overflow: hidden; } /* WHY: Al ser off-canvas, el contenedor del filtro no reserva columna y el listado pasa a ancho completo. Lo marca el wrapper server-side (.has-offcanvas-filter), no el JS: sin flash de layout ni dependencia de :has(). */ .has-offcanvas-filter .filter-box{ flex: 0 0 100% !important; max-width: 100% !important; height: 0; padding: 0 !important; } .has-offcanvas-filter .item-list-box{ flex: 0 0 100% !important; max-width: 100% !important; } @media (max-width: 575.98px){ .filter-offcanvas{ --filter-panel-w: 88%; } } /* ============================================================ FILTRO OFF-CANVAS · Botón disparador "Filtros" (server-side) ============================================================ */ /* Barra que aloja el boton, alineado a la derecha como .filtrar */ .filter-offcanvas-bar{ display: flex; justify-content: flex-end; margin-bottom: 20px; } /* El boton vive en el HTML siempre; solo se muestra cuando hay filtro off-canvas */ .filter-offcanvas-trigger{ display: none; } .has-offcanvas-filter .filter-offcanvas-trigger{ display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; background: #fff; color: #111; border: 1px solid #111; border-radius: 0; font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: background .2s ease, color .2s ease; } .filter-offcanvas-trigger svg{ width: 18px; height: 18px; } .has-offcanvas-filter .filter-offcanvas-trigger:hover{ background: #111; color: #fff; } .filter-offcanvas-trigger:focus-visible{ outline: 2px solid #111; outline-offset: 2px; } /* Pie del panel: el boton "cancelar" (limpiar filtros) a ancho completo */ .filter-offcanvas .filter-buttons{ margin-top: 24px; } .filter-offcanvas .filter-buttons #cancelar{ width: 100%; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; padding: 12px 18px; border-radius: 0; background: #fff; color: #111; border: 1px solid #111; } .filter-offcanvas .filter-buttons #cancelar:hover{ background: #f0eff3; } /* ============================================================ FILTRO OFF-CANVAS · Variaciones (Colores / Tallas) Botones toggle. Input oculto + estado via :checked + label (sin JS). ============================================================ */ .var-fields-wrapper .var-filter-field + .var-filter-field{ margin-top: 4px; } .filter-offcanvas .var-fields{ display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; } .filter-offcanvas .var-fields .var-field{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .filter-offcanvas .var-fields .var-button{ cursor: pointer; user-select: none; margin: 0; border: 1px solid #ccc; border-radius: 0; padding: 7px 14px; min-width: 38px; text-align: center; font-size: 12px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; background: #fff; color: #111; transition: background .15s ease, color .15s ease, border-color .15s ease; } .filter-offcanvas .var-fields .var-button:hover{ border-color: #111; } .filter-offcanvas .var-fields .var-field:checked + .var-button{ background: #111; color: #fff; border-color: #111; } .filter-offcanvas .var-fields .var-field:focus-visible + .var-button{ outline: 2px solid #111; outline-offset: 2px; } /* Colores como boletas (swatch). El color de fondo lo aporta el mapa CSS de la ficha: .options .option-button[data-id] .option-button--miniature (ecommerce.css). */ .filter-offcanvas .var-fields.var-swatches{ gap: 10px; align-items: center; } .filter-offcanvas .var-swatch{ display: inline-block; cursor: pointer; margin: 0; padding: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ccc; box-sizing: border-box; position: relative; transition: box-shadow .15s ease, border-color .15s ease; } .filter-offcanvas .var-swatch .option-button--miniature{ display: block; width: 100%; height: 100%; border-radius: 50%; } .filter-offcanvas .var-swatch:hover{ border-color: #111; } .filter-offcanvas .var-fields .var-field:checked + .var-swatch{ border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; } .filter-offcanvas .var-fields .var-field:focus-visible + .var-swatch{ outline: 2px solid #111; outline-offset: 3px; } /* [IRIDIAN 2026-06-16] Filtre de productes: separar tallas per copa (mateix criteri que la fitxa). .filter-offcanvas .var-fields ja es flex-wrap; el break .copa-break (flex-basis:100%) l'insereix custom.js abans de l'input.var-field de cada copa nova -> fila nova. */ .filter-offcanvas .var-fields .copa-break{ flex-basis:100%; width:100%; height:0; margin:0; padding:0; border:0; } /* ============================================================ 11. CALCULA TU TALLA ============================================================ */ /*Calcula tu talla*/ body.page .margin-principal{ padding: 80px 0;} body.page p{font-size:20px;} #calcula .margin-principal{ padding: 80px 0 0;} body.page h1{margin-bottom:30px;} body.page .row.fullwidth{padding:0 5vw} body.page .row.fullwidth.fondorosa,body.page .row.fullwidth.fondogris{padding:0 5vw;} #calcula .fondorosa{padding:40px 5vw 60px; margin-top: 60px;} #calcula .pasos:nth-child(odd) img{padding: 0 6px 0 0; margin-bottom:30px;} #calcula .pasos:nth-child(even) img{padding: 0 0 0 6px; margin-bottom:30px;} #calcula .pasos p{font-size:28px; color:#333;max-width: 75%;} #calcular-talla .medida,#calcular-talla .search{padding:0 15px;} #calcular-talla .search{ display: flex; align-items: flex-end;} #calcular-talla .search .btn{ background-color: #000; border-radius: 0; padding: 26px 20px;} #calcular-talla .search .btn:hover, #calcular-talla .search .btn:active, #calcular-talla .search .btn:focus, #calcular-talla .search .btn:hover { background-color: #666!important;} #calcular-talla input{padding: 30px 20px; height: auto; font-size: 28px; text-transform: uppercase; border-radius: 0; border: 0;} #calcular-talla label{font-size: 28px;} #calcular-talla .medida:first-child{padding-left:0;} #resultado{ text-align: center; } #resultado p{max-width: 100%!important;} #resultado:empty{display:none;} #consejos{margin:60px 0 40px;} #consejos .bloque{margin-bottom:40px;} #consejos img{border:1px solid #eee;} #consejos p{ font-size: 28px;} #consejos .text{ padding: 15px 40px 0 20px;} #consejos h3{font-size: 50px;} #consejos h2{margin-bottom:40px;} /*Fi Calcula tu talla*/ /* [IRIDIAN 2026-06-16] Modul CalculadorTallas: unificacio estils amb el modal previ #guia-tallas */ #modalCalculadorTallas .modal-dialog { max-width: 1000px; } #modalCalculadorTallas .container { padding-right: 0 !important; padding-left: 0 !important; } #modalCalculadorTallas { --light-2: var(--new-light); } #modalCalculadorTallas .table .thead-light th { background-color: var(--new-blue); color: #fff; } /* [IRIDIAN 2026-06-16] CalculadorTallas modal: alçada limitada + header del site per sota del backdrop */ #modalCalculadorTallas .modal-content { max-height: 85vh; } body.modal-open .sticky-header, body.modal-open .cbp-af-header, body.modal-open .navigation-wrap, body.modal-open .class-header { z-index: 1 !important; } /* [IRIDIAN 2026-06-16] CalculadorTallas: bloqueig d'scroll de fons. El tema fa scroll a (BS nomes bloqueja body) -> bloquegem html quan el modal esta obert (.show). */ html:has(#modalCalculadorTallas.show) { overflow: hidden; } html:has(#modalCalculadorTallas.show) body { overflow: hidden; } /* MODAL CALCULADOR TALLAS */ .calculador-tallas-form{background-color: var(--new-blue);} .form-control:focus{outline: none;} /* [IRIDIAN 2026-06-16] CalculadorTallas responsive: neutralitza la regla global @media<=576px (.modal-dialog{width:90%!important;margin:1% 5%!important} + .modal-body{min-height:82vh}) que descol·locava el modal centrat en mobil. */ @media (max-width: 576px) { #modalCalculadorTallas .modal-dialog { width: auto !important; margin: 0.5rem !important; max-width: calc(100% - 1rem) !important; } #modalCalculadorTallas .modal-body { min-height: auto; } } /* ============================================================ 12. MAPA DE DISTRIBUIDORES ============================================================ */ /*MAPA*/ .blocpanelmap label{display:block;} .blocpanelmap{display:flex; align-items: flex-end;flex-wrap: wrap; padding: 0 15px!important; margin-bottom: 25px;} .blocpanelmap.boton .btn { padding: 15px 80px; width: 100%; --button-bg-color: #000000; --button-bg-color-hover: #666666; --button-color: #ffffff; --button-border-color-hover: #666666;} #lista_distribuidores li{list-style:none;} #lista_distribuidores .item{ border-bottom: 1px solid #333; padding: 15px; font-size: 14px; display:block; } #lista_distribuidores .item .ubicacion span{display:block;} #lista_distribuidores .item .name{font-family: 'Poppins', sans-serif;} #lista_distribuidores .item a{display:block;} #lista_distribuidores .item a:hover{color:#666; margin-left:5px;} #mapadistribuidores #mapresult #map{width:100%; object-fit:cover; height:710px;} #mapresult .mapa{margin-top: 35px;} /* #mapadistribuidores #panel-map{height: 600px;} */ #mapadistribuidores #int-panel{height: 150px;} #mapadistribuidores #panel-map #lista_distribuidores{overflow-y: scroll; height:450px;} .gm-style-iw-d p{margin-bottom: 0px; font-size: 14px;} .gm-style-iw-d p[style*="font-weight:bold"]{font-family: 'Poppins', sans-serif;} .gm-style-iw button{ right: 5px!important; top: 5px!important;} .gm-style-iw,.gm-style-iw-d {background-color: var(--pink)!important} .gm-style .gm-style-iw-t::after {background: var(--pink)!important} .gm-style-iw-d > div > div{ padding: 15px 25px!important;} .gm-style-iw-d { overflow: auto!important;} .gm-style-iw-d p{ font-size:12px!important;} .gm-control-active { margin-top: 0px !important; margin-right: 20px !important;} /*FI MAPA*/ .store-locator .sl-empty{color:#999;padding:14px 2px;margin:0} #lista_distribuidores .item{cursor:pointer;transition:background .15s} #lista_distribuidores .item.active{background:#f6f6f6} #lista_distribuidores .item .sl-ico{max-width:14px;width:14px;height:auto;margin-right:5px;vertical-align:middle;display:inline-block} #lista_distribuidores .item .web i{margin-right:5px;color:#178acc} #lista_distribuidores .item .web a{display:inline;color:#178acc;text-decoration:none;word-break:break-all} #lista_distribuidores .item .web a:hover{text-decoration:underline;margin-left:0} .store-locator .sl-iw{font-size:14px;max-width:250px;color:#222} .store-locator .sl-iw h4{margin:0 0 4px;font-size:15px} .store-locator .sl-iw .sl-addr{color:#666;font-size:13px;margin-bottom:6px} .store-locator .sl-iw a{color:#178acc;text-decoration:none;display:inline-block;margin-right:10px} #lista_distribuidores .item .ubicacion{transition:transform .15s ease} #lista_distribuidores .item:hover .ubicacion{transform:translateX(6px)} /* ============================================================ 13. BUSCADOR ============================================================ */ .form-group input.search::placeholder { color: var(--new-blue); opacity: 0.7; -webkit-transition: all 200ms linear; transition: all 200ms linear;} .search-form .btn-search { border: none; background: transparent; font-size: 80px; color: var(--new-blue);} .modal-search .color-gray-dark { color: #ccc;} .modal-search .modal-content.bg-light-3{background-color: #fff!important;} .form-style.search { font-size: 3.5vw;} /* --- Buscador fullscreen (trigger en el header = solo la lupa) --- */ /* WHY: En el header mostramos únicamente el botón lupa y ocultamos el input pill inline. El formulario se mueve dentro de #fullscreen-search al abrir (ver custom.js). */ .buscador-list-item .buscador-expander { display: flex !important; } .buscador-list-item .buscador-group { display: none; } /* WHY: El botón lupa lleva también la clase .search-toggler, que el tema padre oculta (display:none) en pantallas >=1440px. Hay que forzar el display en el propio botón, no solo en su wrapper. */ .buscador-list-item .btn-search-expand, .buscador-list-item .search-toggler.btn-search-expand { display: inline-flex !important; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--black); line-height: 0; } .buscador-list-item .btn-search-expand svg { stroke: currentColor; width: 20px; height: 20px; } /* Bloqueo de scroll del fondo cuando el buscador está abierto */ html.search-open, html.search-open body { overflow: hidden; } /* --- Overlay a pantalla completa --- */ #fullscreen-search { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } #fullscreen-search.is-open { opacity: 1; visibility: visible; pointer-events: auto; } #fullscreen-search .fullscreen-search__backdrop { position: absolute; inset: 0; background: var(--cd-light); } #fullscreen-search .fullscreen-search__inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; padding: 0 30px; transform: translateY(14px); transition: transform .35s ease; } #fullscreen-search.is-open .fullscreen-search__inner { transform: translateY(0); } #fullscreen-search .fullscreen-search__close { position: absolute; top: 30px; right: 40px; z-index: 2; background: transparent; border: 0; cursor: pointer; color: #333; line-height: 0; padding: 10px; transition: opacity .2s ease; } #fullscreen-search .fullscreen-search__close:hover { opacity: .6; } #fullscreen-search .fullscreen-search__close svg { width: 32px; height: 32px; stroke: currentColor; } #fullscreen-search .fullscreen-search__hint { margin: 28px 0 0; text-align: center; color: #999; font-size: 14px; font-family: 'Poppins', sans-serif; } /* Formulario movido dentro del overlay */ #fullscreen-search .buscador-wrapper, #fullscreen-search .buscador-form { position: static; width: 100%; margin: 0; } #fullscreen-search .buscador-expander { display: none !important; } #fullscreen-search .btn-search-close { display: none !important; } #fullscreen-search .buscador-group { display: block; position: relative; top: auto; left: auto; width: 100%; max-width: none; min-width: 0; margin: 0; float: none; padding: 0 !important; background: transparent; border: 0; box-shadow: none; border-radius: 0; opacity: 1 !important; visibility: visible !important; max-height: none !important; transform: none !important; } #fullscreen-search .buscador-group-inner { position: relative; display: flex; align-items: center; border-bottom: 2px solid #333; } #fullscreen-search .search-input::placeholder { color: #bbb; opacity: 1; } #fullscreen-search .search-input::placeholder { color: var(--new-blue); font-size: 3.5vw; } #fullscreen-search .search-input { padding: 13px 20px; height: 48px; width: 100%; font-weight: 400; border-radius: 4px; line-height: 22px; letter-spacing: 0.5px; outline: none; color: var(--dark-blue); background-color: var(--white); border: 1px solid rgba(200, 200, 200, .5); -webkit-transition: all 200ms linear; transition: all 200ms linear; padding: 10px 15px; height: auto; font-weight: 700; border-radius: 0; color: var(--dark); background-color: transparent; border: none; /* border-bottom: 3px solid rgba(200, 200, 200, .4); */ -webkit-transition: all 200ms linear; transition: all 200ms linear; font-size: 3.5vw; } #fullscreen-search .btn-search-submit { position: absolute !important; right: 15px; left: unset !important; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 0; cursor: pointer; color: #333; } #fullscreen-search .btn-search-submit svg { width: 60px; height: 60px; stroke: var(--new-blue); stroke-width: 3px; } #fullscreen-search .search-spinner { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); } /* Dropdown de resultados AJAX dentro del overlay */ #fullscreen-search .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0; text-align: left; max-height: 56vh; overflow-y: auto; background: #fff; border: 1px solid #eee; box-shadow: 0 12px 30px rgba(0,0,0,.10); } @media (max-width: 575.98px) { #fullscreen-search .fullscreen-search__close { top: 18px; right: 18px; } #fullscreen-search .fullscreen-search__inner { padding: 0 18px; } } @media (max-width: 1430px){ .search-results-list{margin-left: 0; margin-right: 0;} } /* ============================================================ 14. FORMULARIOS ============================================================ */ /*unete a nuestro directorio*/ #directorio h2{font-family: 'Poppins',sans-serif; font-size:24px;} #directorio .form{padding:0 15px} #directorio .form .introform{padding:0 15px;} #directorio .foto{padding:0 15px} .pinkform input,.pinkform textarea, .pinkform select, .pinkform .select2-selection--multiple{ border-radius:0; background-color: var(--pink); border:none; } .pinkform .select2-selection--multiple{ height: 48px!important; } .pinkform label{ margin-top: 10px; font-size: 18px; color: #666;} .pinkform button { display: inline-block; width: auto; background: transparent; border: 1px solid #333; text-transform: uppercase; font-size: min(max(16px, 1.28vw), 16px); padding: 6px 35px; height: auto; border-radius: 0; color:#333; font-family: 'Poppins',sans-serif; font-weight: 300; margin-top:30px; } .pinkform small{line-height:normal; margin:30px 0; display:block;} .pinkform .col{padding:0 15px!important;} .pinkform .row.form-group{display: flex;} /*contacto*/ #contacto h2{font-family: 'Poppins',sans-serif; font-size:24px;} #contacto .form{padding:0 15px} #contacto .form .introform{padding:0 15px;} #contacto .foto{padding:0 15px} #contacto .form-input-item{padding:0 15px;} #contacto .form-input-item label{padding:0;} #distribuidor .margin-principal img{width:100%;} #distribuidor h2{font-family: 'Poppins',sans-serif;text-align:left; text-transform:uppercase;color:#333;font-size: 20px;} /* FORM LOADING */ .custom-form .loader{transition:opacity .5s linear;opacity: 0;} .custom-form.loading .loader { opacity: 1; display: inline-block; width: auto; margin-left: 15px; } .custom-form.loading .loader:before { content: "\f021"; font: normal normal normal 14px/1 FontAwesome; -webkit-font-smoothing: antialiased; font-weight: 100; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; color: #666; font-size: 24px; transform: rotate(90deg); animation: lds-dual-ring 1.2s linear infinite; } .lds-dual-ring { display: inline-block; width: 80px; height: 80px; } .lds-dual-ring:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid currentColor; border-color: currentColor transparent currentColor transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .form-style { padding: 13px 20px; height: 48px; width: 100%; font-weight: 400; border-radius: 4px; font-size: 14px; line-height: 22px; letter-spacing: 0.5px; outline: none; color: var(--dark-blue); background-color: var(--white); border: 1px solid rgba(200, 200, 200, .5); -webkit-transition: all 200ms linear; transition: all 200ms linear; } /* ============================================================ 15. EDITORIAL ============================================================ */ #editorial .item{ --content-heading-color: #fff; --content-p-color: #fff; } #editorial .item {margin-bottom:30px;} #editorial .item .item-miniature{width: 100%;} #editorial .item .item-details{position: absolute; z-index: 10;} #editorial .item .single-post-slide-wrap{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;} #editorial .item .item-title{font-family: 'Domaine-Disp-regular', serif;font-size: clamp(30px,3vw,45px) !important; text-align: center;line-height: normal;} #editorial .item .item-title-link{text-decoration: none;} #editorial .item .item-summary, #editorial .item .item-summary p { font-size: 2vw; text-align: center; } .Editorial.fitxa #video{margin:60px 0;} .Editorial.fitxa .fotos .destacada{ margin-bottom: 60px;} .Editorial.fitxa .maintitle h1{ font-size: 5vw; line-height: normal; padding-top: 30%; text-align:left;color:#333;} .Editorial.fitxa .subtitulo h2{ font-family: 'Poppins',sans-serif;text-align:left; text-transform:uppercase;color:#333;font-size: 2vw;} .Editorial.fitxa .info{padding-left:60px;} .Editorial.fitxa .descripcion{margin-top: calc(30% + 60px);} .Editorial.fitxa .descripcion p{font-size:20px;} /* ============================================================ 16. NOTICIAS / BLOG ============================================================ */ .item-list.Blog {max-width: 1140px; margin-left: auto; margin-right: auto;} .item-list.Blog .item .item-content .item-title{font-size: clamp(16px,2vw,24px); line-height: normal; margin-bottom: 10px;} .item-list.Blog .item img{margin-bottom:10px;} .item-list.Blog .item .item-summary *{font-size: clamp(12px,2vw,16px); line-height: normal; font-family: 'Poppins', sans-serif;} .item-list.Blog .item {margin-bottom: 15px;} /* ============================================================ 17. PREFOOTER Y FOOTER ============================================================ */ /*prefooter*/ #mailchimpform {text-align:center; padding: 30px 20px 20px;} #mailchimpform h4, #mailchimpform h4, #mailchimpform label { font-family: "Poppins", sans-serif; color: #333; margin-bottom: 20px; font-size: 16px; text-transform: uppercase; font-weight: 400; } #mailchimpform form{margin:0 auto 10px;justify-content: center;} #mailchimpform button { color: #ddd; padding: 0 16px; border: 0; border-bottom: 1px solid #ddd; } #mailchimpform input { font-size: 18px; width: 400px; border: 0; border-bottom: 1px solid #ddd; color: #666666;} #mailchimpform input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #666666; } #mailchimpform input::-moz-placeholder { /* Firefox 19+ */ color: #666666; } #mailchimpform input:-ms-input-placeholder { /* IE 10+ */ color: #666666; } #mailchimpform input:-moz-placeholder { /* Firefox 18- */ color: #666666; } .social-icons h4 { line-height: 1.65; font-family: 'Domaine-Disp-regular', serif; color: #666666; font-size:clamp(20px, 17.694px + 0.721vw, 28px); margin-bottom: 20px; } .intsocial{justify-content: center;} .intsocial li a{color:#111;} /*footer*/ footer,footer .bg-dark { background-color: #f1f1f1!important;} footer .footer-title{font-family: 'Poppins', sans-serif; text-transform: uppercase;font-size: 20px; font-weight: 300; margin-bottom: 10px;} footer .padding-top { padding-top: 50px;} footer ul{padding:0;} footer ul li{list-style:none; text-align:left; margin-bottom: 10px;} footer li,footer p,footer a{color:#333;} footer .columna.doble ul{column-count: 2;} footer h2,footer h3,footer h4{color:var(--black);} footer .socket{background-color:var(--black); padding:5px 10px;} footer .socket,footer .socket p,footer .socket a{color:var(--white); font-size: 12px!important;} #prefooter{padding:0px 0 30px;} .progress-wrap::after, .progress-wrap::before { font-family: 'FontAwesome'; content: '\f106'; line-height: 40px;color:#333; } .social-icons ul { display: flex; flex-wrap: wrap; padding: 0; flex-direction: column; width: 100%; padding-left: 15px;} /* NUEVOS ESTILOS FOOTER */ #footer .enlaces{padding: 20px 30px;} #footer ul {margin-bottom: 0;} #footer ul li, #footer ul li a, #footer .footer-title { font-size: 13px !important; text-transform: none; font-weight: 500; margin-bottom: 0; color: #000; font-weight: normal; } #footer .footer-title { text-transform: uppercase; font-weight: 500; font-size: 14px !important; } #footer .sociallist a{text-decoration: underline;} @media (max-width: 991px){ #footer .fullwidth{padding-left: 15px !important; padding-right: 15px !important;} #footer .fullwidth:not(:last-child) .col-12{margin-bottom: 10px;} #footer .enlaces{padding: 0;} #footer ul{padding-left: 0;} #footer .intsocial{margin-left: 0 !important; margin-right: 0 !important;} #footer .logo > .row {justify-content: center;} #footer .footer-logo img{margin-left: auto; margin-right: auto; display: block;} .h2.banner.sliderbanner{margin-bottom: 0 !important;} } /* ============================================================ 18. COOKIES ============================================================ */ /************GESTION DE COOKIES************/ .slide.round { border-radius: 34px; } .politicas-cookie { background: rgba(0,0,0,0.6); right: 0; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; } .boton-subir, .politicas-cookie { position: fixed; } #politicas-cookie .modal-dialog, #politicas-cookie .modal-content{ max-width: 700px; } .boton-cookie.big { background: var(--pink); font-size: 14px; margin: 35px auto; border-radius: 6px; font-weight: bold; border: 1px solid #000; } .boton-cookie { color: #111; background: #ccc; border-radius: 0px; margin-left: 5px; font-size: 14px; padding: 10px 25px; text-decoration: none; transition: .5s; border: none; } .info-cookie { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; color: #fff; font-size: 1.2em; margin-bottom: 0; margin-top: 0; } .card .icons{border:1px solid #ccc; margin-left:10px; width: 35px; height: 35px;display: inline-block; border-radius: 50%;} .card .icons i { line-height: 30px; display: block;} .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; } .modal-header { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: .3rem; border-top-right-radius: .3rem; } #accordion-cookies .card { border: none; background-color: #fff; } #accordion-cookies .card .card-header { border: none; background-color: #fff; text-align: center; cursor: pointer; padding: 0.4rem 1.25rem; } #accordion-cookies .card .card-header h3 { margin: 0; } #accordion-cookies h3, #accordion-cookies h2 { color: #666; font-size: 20px; } .cookies_titulo h3{ font-weight: bold; } .bloccookie .cookies_titulo { margin-bottom: 5px; font-weight: bold; color: #666; } .bloccookie .column { border: 1px solid #eee; padding: 15px 20px; } .bloccookie { margin-bottom: 15px; } #editcookies { font-size: 12px; } #accordion-cookies h3 { font-size: 16px; margin-top: 15px; } footer .btn-brand { color: #000; background-color: #ddd; padding: 10px 20px; } #gestion_cookies .switch { position: relative; display: inline-block; width: 110px; height: 34px; border-radius: 34px; } .switch input {display:none;} .slide { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; padding: 8px; color: #fff; } .slide:before { position: absolute; content: ""; height: 26px; width: 26px; left: 78px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } #filtrebox input[type="checkbox"] { visibility: hidden; display: none; } input:checked + .slide { background-color: #d2aca9; padding-left: 40px; } input:focus + .slide { box-shadow: 0 0 1px #d2aca9; } input:checked + .slide:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); left: -20px; } .slide.round { border-radius: 34px; } .slide.round:before { border-radius: 50%; background: #ddd;content: "OFF";text-indent: -45px; line-height: 25px; } input:checked + .slide.round:before { border-radius: 50%; background: #fff;content: "";text-indent: 45px; line-height: 25px; } #politicas-cookie .modal-body{ padding: 10px 20px; margin: 0; } #politicas-cookie .modal-body p{ font-size: 15px; margin-bottom: 0; } /********Estils***********/ #accordion-cookies .title-aviso{ border-top: 1px solid #eee; padding-top: 5%; max-width: 90%; flex: 0 0 90%; margin: 5%; } #accordion-cookies .texto-privacidad{ max-width: 90%; margin: 0 auto; } @media (max-width: 576px){ .modal.show .modal-dialog{ transform: none; } .modal-dialog{ width: 90%!important; margin: 1% 5%!important; } .modal-body{ min-height: 82vh; padding: 10px 15px; } #accordion-cookies .card .card-header h3{ width: 245px; text-align: center; } #politicas-cookie .modal-body p{ font-size: 14px; } #accordion-cookies .card .card-header { padding: 0.7rem 1.25rem; } #mapadistribuidores #panel-map{ height: 100%!important; } } .btn-decline{margin: 0 auto; background-color: #fff; color: #000; font-size: 12px;} .btn-decline:hover{border: 1px solid #000;color: #000; background-color: #fff; } .buttons-cookies{display: inline-block; margin: 1% 4%; padding: 0 2%; width: 92%;} .buttons-cookies button{margin: 0 1%;} .b-boton-cookie{display: flex;} .boton-cookie:hover{border: 1px solid #000;} /* ============================================================ 19. PÁGINAS ESPECIALES ============================================================ */ #pagina-cada-momento .individualbanner1 .caption{ margin-top: 5vw!important; max-width: 70%!important; padding: 0!important; } #pagina-cada-momento .individualbanner1 .caption a{ color: #000; } #pagina-cada-momento .individualbanner1 .caption h3 { font-size: min(max(15px, 3vw), 50px); } #pagina-cada-momento .individualbanner1 .details{ display: none; } #landing-campana .newsletter-campana{ top: 0px;} .ytplayer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .ytplayer::before { content: url(/img/ytplayer.svg); position: absolute; z-index: 10; pointer-events: none; } #landing-campana .titol h1{font-size: clamp(24px,5vw,50px); padding-top: 0;} #landing-campana .clear > div{all:unset;} #landing-campana .individualbanner3{aspect-ratio: unset;height: 100%; } .vdistrib > div{height: 100%; display: block; } .vdistrib > div > div{height: 33.3333%;} #landing-campana .captionbanner3{font-size: clamp(20px,2vw,50px);} #landing-campana #mailchimpform h4{font-size: clamp(16px,1.2vw,40px);line-height: normal;} #landing-campana .individualbanner3,#landing-campana .individualbanner3 .zonalink{min-height: unset;} #landing-campana .legal { line-height: normal; display: block; } #landing-campana .video { padding-right: 6px; } #landing-campana .lateral { padding-left: 6px; } #landing-campana.fitxa .descripcion { margin-top: 0px; } #landing-campana #prefooter .fila1{display:none;} #landing-campana #prefooter .fila2 .news{display:none;} #landing-campana #prefooter .fila2 .xxss{ flex: 0 0 100%; max-width: 100%;} #popup-aviso { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); max-width: 320px; background-color: #fdecea; color: #5f2120; border: 1px solid #f5c6cb; padding: 12px 16px; border-radius: 8px; font-family: Arial, sans-serif; font-size: 14px; display: flex; align-items: flex-start; align-items: center; box-shadow: 0 0 8px rgba(0,0,0,0.1); opacity: 0; animation: fadeIn 0.6s ease-out forwards; z-index: 1000; } #popup-aviso::before { content: "❗"; font-size: 18px; margin-right: 8px; margin-top: 2px; } @keyframes fadeIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ============================================================ 20. ANIMACIONES ============================================================ */ /* --- Keyframes --- */ @keyframes seleneInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes seleneInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes seleneZoomIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } @keyframes seleneZoomIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } @keyframes seleneZoomIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } @keyframes seleneZoomIn { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: scale(1); } } /* --- Propietats comunes --- */ .anim-up, .anim-down, .anim-left, .anim-right, .anim-zoom { animation-duration: 0.65s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* --- Animació en carrega (sense anim-scroll) --- */ .anim-up { animation-name: seleneInUp; animation-delay: 0.35s; } .anim-down { animation-name: seleneInDown; animation-delay: 0.35s; } .anim-left { animation-name: seleneInLeft; animation-delay: 0.35s; } .anim-right { animation-name: seleneInRight; animation-delay: 0.35s; } .anim-zoom { animation-name: seleneZoomIn; animation-delay: 0.35s; } /* --- Delays opcionals --- */ .anim-delay-1 { animation-delay: 0.45s; } .anim-delay-2 { animation-delay: 0.55s; } .anim-delay-3 { animation-delay: 0.65s; } .anim-delay-4 { animation-delay: 0.75s; } .anim-delay-5 { animation-delay: 0.85s; } /* --- Activació per scroll --- */ .anim-scroll { opacity: 0; } .anim-scroll.anim-up, .anim-scroll.anim-down, .anim-scroll.anim-left, .anim-scroll.anim-right, .anim-scroll.anim-zoom { animation-name: none; } /* Quan entra al viewport: activa l'animació */ .anim-scroll.is-visible.anim-up { animation-name: seleneInUp; animation-delay: 0s; } .anim-scroll.is-visible.anim-down { animation-name: seleneInDown; animation-delay: 0s; } .anim-scroll.is-visible.anim-left { animation-name: seleneInLeft; animation-delay: 0s; } .anim-scroll.is-visible.anim-right { animation-name: seleneInRight; animation-delay: 0s; } .anim-scroll.is-visible.anim-zoom { animation-name: seleneZoomIn; animation-delay: 0s; } /* Delays per scroll (s'apliquen sobre el 0s base) */ .anim-scroll.is-visible.anim-delay-1 { animation-delay: 0.1s; } .anim-scroll.is-visible.anim-delay-2 { animation-delay: 0.2s; } .anim-scroll.is-visible.anim-delay-3 { animation-delay: 0.3s; } .anim-scroll.is-visible.anim-delay-4 { animation-delay: 0.4s; } .anim-scroll.is-visible.anim-delay-5 { animation-delay: 0.5s; } /* ============================================================ 21. MINIATURAS HOVER ============================================================ */ /* === Miniature 2 hover swap === */ .item-miniature.fade-image, .post-miniature.fade-image { position: relative; overflow: hidden; } .item-miniature.fade-image .img-main, .post-miniature.fade-image .img-main { display: block; transition: opacity .5s ease-in; opacity: 1; } .item-miniature.fade-image .img-hover, .post-miniature.fade-image .img-hover { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .5s ease-in, visibility .5s ease-in; } .item-miniature.fade-image .img-hover img, .post-miniature.fade-image .img-hover img { width: 100%; height: 100%; object-fit: cover; } .item-miniature.fade-image:hover .img-main, .post-miniature.fade-image:hover .img-main { opacity: 0; } .item-miniature.fade-image:hover .img-hover, .post-miniature.fade-image:hover .img-hover { opacity: 1; visibility: visible; } /* ============================================================ 22. OVERRIDES / LEGACY PARITY (van al final a propósito) ============================================================ */ /* === prefooter newsletter/social fixes (legacy parity) === */ #mailchimpform input { background:#fff; border:none; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-top:1px solid #ddd; color:#666; } #mailchimpform button { background:#fff; border:none; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-top:1px solid #ddd; color:#ddd; padding:0 16px; } .btn-newsletter { background:#fff!important; border:none!important; border-right:1px solid #ddd!important; border-bottom:1px solid #ddd!important; border-top:1px solid #ddd!important; } #prefooter { background-color:#fff !important; } .bloque.xxss { justify-content:center !important; } /* === footer columnas (legacy parity) === */ footer .fullwidth.pt-s { padding-top:50px; padding-bottom:24px; } footer .fullwidth.pt-s .col-lg-4.bloque ul { column-count:2; column-gap:20px; } footer .fullwidth.pt-s .bloque h4 { font-family:"Poppins",sans-serif !important; text-transform:uppercase !important; font-size:20px !important; color:#000 !important; margin-bottom:15px !important; font-weight:300 !important; } footer .fullwidth.pt-s .bloque ul li a { text-decoration:none; font-weight: 300; } footer .fullwidth.pt-s .bloque.center.right { text-align:left !important; } footer .fullwidth.pt-s .bloque .content-text { text-align:left; } footer .fullwidth.pt-s .col-lg-3.bloque:first-child .image img { width:262px; max-width:262px; height:auto; } footer .fullwidth.pt-s .col-lg-3.bloque:first-child { padding-top:10px; } /* BANNER INDIVIDUAL HOME */ .individualbanner1--home{ --content-a-color: #ffffff; --content-a-hover-color: #ffffff; } .individualbanner1--home .btn{ margin-top: 35px;} .individualbanner1--home .content-title a, .individualbanner1--home .content-title{text-decoration: none;} /* LISTADO CATEGORIAS LVL 1 */ .item-list.swiper.Productos_cat_1 {padding-bottom: 30px;} @media (max-width:992px) { .item-list.swiper.Productos_cat_1 { width: 100% !important; } } .item-list.swiper.Productos_cat_1 .item .title--wrapper{text-decoration: none;} .item-list.swiper.Productos_cat_1 .item .title{ font-family: 'Poppins', sans-serif; padding-left: 15px; font-size: 10px; font-size: min(max(10px, 1.5vw), 14px); line-height: normal; margin-top: 10px; text-align: center; margin-bottom: 0; } .item-list.swiper.Productos_cat_1 .swiper-pagination { bottom: 5px; left: 0; right: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; transform: none; width: 100%; } .item-list.swiper.Productos_cat_1 .swiper-pagination-bullet { width: 10px; height: 10px; background: #eee; opacity: 1; margin: 0 5px !important; } .item-list.swiper.Productos_cat_1 .swiper-pagination-bullet-active { background: var(--new-dark-blue); } /* FICHA CATEGORIA LVL 1 */ @media (min-width: 1199px){ :root{ --container-max-width: 90%; } } .Productos.fitxa main > div, .Productos.lev-2 main > div, .Productos.lev-1 main > div{padding-top: 0;} .Productos.fitxa .breadcrumb-container, .Productos.lev-2 .breadcrumb-container, .Productos.lev-1 .breadcrumb-container{padding: 0;} .Productos.fitxa .breadcrumb-container ul li , .Productos.lev-2 .breadcrumb-container ul li , .Productos.lev-1 .breadcrumb-container ul li { list-style: none; font-size: 14px; } .breadcrumb-container ul {flex-wrap: wrap; margin: 0; display: flex; padding: 8px 0;} .breadcrumb-container ul li[data-bread-ref="categoria"][data-bread-lvl="1"] ~ li[data-bread-ref="categoria"][data-bread-lvl="1"], .breadcrumb-container ul li[data-bread-ref="categoria"][data-bread-lvl="3"] ~ li[data-bread-ref="categoria"][data-bread-lvl="3"], .breadcrumb-container ul li[data-bread-ref="categoria"][data-bread-lvl="2"] ~ li[data-bread-ref="categoria"][data-bread-lvl="2"]{ display: none; } .breadcrumb-container a{text-decoration: none;} .breadcrumb-container{border:0; margin-bottom: 30px; display: flex; flex-wrap: wrap; padding: 30px 0;} /* LISTADO PRODUCTOS */ .item-list.Productos .item {padding: 2.5px; margin-bottom: 30px;} .item-list.Productos .item .title--wrapper{text-decoration: none;} .item-list.Productos .item .title { font-family: 'Poppins', sans-serif; padding-left: 15px; font-size: 16px; font-size: min(max(16px, 1.5vw), 18px); margin-bottom: 0; line-height: 40px;} .item-list.Productos .item#cabecera-aqui .cabecera{padding-left: 0; padding-right: 0; max-width: 100%; flex: 0 0 100%;} .item-list.Productos .item#cabecera-aqui .cabecera > .row{justify-content: center; align-items: center;} .item-list.Productos .item#cabecera-aqui .cabecera .captioncategoria{position: absolute; z-index: 1;} .item-list.Productos .item#cabecera-aqui .cabecera .captioncategoria .title{ color: #fff; text-align: center; font-size: clamp(36px, 33.117px + 0.901vw, 46px); text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); font-family: var(--heading-font-family);} .item-list.Productos .item#cabecera-aqui .cabecera img{aspect-ratio: 3/2; object-fit: cover;} /* FICHA PRODUCTOS */ .Productos.fitxa .title.h1{margin-bottom: 10px;} .Productos.fitxa #description .content-text{margin-bottom: 25px;} .Productos.fitxa .add-to-cart{margin-bottom: 25px;} .Productos.fitxa .item-list--rel .item{margin-bottom: 0;} .Productos.fitxa #gallery-6{width: 100%;} /* Paleta Cloud Dancer: overrides que usan las variables --cd-* */ body { background-color: var(--cd-light) !important; } .cbp-af-header, .cbp-af-header.header-transparent, #index .cbp-af-header.header-transparent, .cbp-af-header.cbp-af-header-shrink { background-color: var(--cd-header) !important; } .cbp-af-header .dropdown-menu, .cbp-af-header.header-transparent .dropdown-menu, .cbp-af-header.header-transparent.cbp-af-header-shrink .dropdown-menu, .cbp-af-header.cbp-af-header-shrink .dropdown-menu { background-color: var(--cd-header) !important; } footer, footer .bg-dark { background-color: var(--cd-header) !important; } footer .socket { background-color: var(--cd-socket) !important; } /* A11y: text fosc sobre socket crema (contrast AA) + enllaços distingibles sense dependre del color */ footer .socket, footer .socket p, footer .socket span, footer .socket a { color: #333 !important; } footer .socket a { text-decoration: underline; } .off-canvas-area-wrapper .off-canvas-content-wrap, .off-canvas-responsive-menu .off-canvas-content-wrap, .off-canvas-search-box .off-canvas-content-wrap { background-color: var(--cd-light) !important; } .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close, .off-canvas-responsive-menu .off-canvas-content-wrap .btn-close, .off-canvas-search-box .off-canvas-content-wrap .btn-close { background-color: var(--cd-light) !important; } .search-box-wrap { background-color: var(--cd-mid) !important; } .filtrar .btn { background-color: var(--cd-light) !important; } .modal-search .modal-content.bg-light-3, .modal-content { background-color: var(--cd-light) !important; } #accordion-cookies .card { background-color: var(--cd-light) !important; } #accordion-cookies .card .card-header { background-color: var(--cd-light) !important; } .fondorosa { background-color: var(--cd-base) !important; } .pinkform input, .pinkform textarea, .pinkform select { background-color: var(--cd-base) !important; } .banner-tienda { background-color: var(--cd-mid) !important; } .banner-tienda:hover { background-color: var(--cd-base) !important; } /* Dev: panel toggle paleta Cloud Dancer */ #cd-switch-panel { position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: rgba(255,255,255,0.95); border: 1px solid var(--cd-border, #ddd); border-radius: 24px; padding: 6px 14px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-family: 'Poppins', sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,0.12); user-select: none; } #cd-switch-panel .cd-switch-label { color: #333; font-weight: 500; letter-spacing: 0.02em; } .cd-switch { position: relative; display: inline-block; width: 36px; height: 20px; } .cd-switch input { opacity: 0; width: 0; height: 0; } .cd-switch-slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; border-radius: 20px; transition: background-color .2s; } .cd-switch-slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; top: 3px; background-color: #fff; border-radius: 50%; transition: transform .2s; } .cd-switch input:checked + .cd-switch-slider { background-color: #9E8E7A; } .cd-switch input:checked + .cd-switch-slider::before { transform: translateX(16px); } /* [IRIDIAN 2026-06-16] Color generic de fletxes de carrusels (Swiper): #333, i #666 quan estan disabled / no usables. Prefix ".swiper" per guanyar especificitat a swiper-bundle.min.css. Els carrusels amb color propi de mes especificitat (#Sliders-swiper = blanc sobre imatge, .carrusel-actividades = blanc sobre negre) NO es veuen afectats. */ .swiper .swiper-button-prev, .swiper .swiper-button-next { color:#333; } .swiper .swiper-button-prev.swiper-button-disabled, .swiper .swiper-button-next.swiper-button-disabled { color:#666; opacity:1; } /* [IRIDIAN 2026-06-16] Fletxes de carrusel que van FORA del .swiper (markup class="swiper-button swiper-button-next/prev", SVG lucide amb stroke=currentColor). La regla anterior exigia ancestre .swiper i no les agafava. Doble-class per especificitat; disabled per classe i per aria-disabled. */ .swiper-button.swiper-button-next, .swiper-button.swiper-button-prev { color:#333; } .swiper-button.swiper-button-next.swiper-button-disabled, .swiper-button.swiper-button-prev.swiper-button-disabled, .swiper-button.swiper-button-next[aria-disabled="true"], .swiper-button.swiper-button-prev[aria-disabled="true"] { color:#666; opacity:1; } /* MENU RESPONSIVE */ @media (min-width: 1200px) and (max-width: 1430px){ :root{ --header-menu-font-size: 15px; } } .dropdown-menu .nav-item { margin: 0; padding: 0; display: block; width: 100%; height: 33px; display: block; vertical-align: middle; display: flex; align-items: center; transition: all .3s ease-in-out;} .dropdown-menu .nav-item:hover{transform: translateX(3px);} .form-control:focus-visible{text-shadow: none;} /* ============================================================= Reveal progresivo del listado de productos ------------------------------------------------------------- Estado inicial oculto aplicado desde CSS. Los scripts van con defer, asi que scrollReveal tarda en arrancar: sin esta regla los items se pintan visibles y desaparecen un segundo despues. La libreria marca data-scroll-reveal-initialized cuando toma el control con estilo inline, y ahi esta regla deja de aplicar. ============================================================= */ .item-list [data-scroll-reveal]:not([data-scroll-reveal-initialized]) { opacity: 0; transform: translateY(10px); } @media (scripting: none) { .item-list [data-scroll-reveal] { opacity: 1; transform: none; } } /* [IRIDIAN 2026-07-15] Calculador de tallas inline (fora del modal) */ section.calculador-tallas { max-width: 1000px; margin: 0 auto; } /* [IRIDIAN 2026-07-15] Panel mapa distribuidores — separación inferior hasta 768px */ @media (max-width: 768px){ #mapadistribuidores #panel-map{padding-bottom: 30px;} } /* [IRIDIAN 2026-07-21] Galeries lightGallery: el header sticky (.navigation-wrap, z-index 8000) quedava per sobre del lightbox (.lg-backdrop 1040 / .lg-outer 1050) i tapava la part alta de la imatge. Mentre la galeria esta oberta lightGallery afegeix .lg-on a -> baixem el header, igual que ja es fa amb body.modal-open. */ html.lg-on .sticky-header, html.lg-on .cbp-af-header, html.lg-on .navigation-wrap, html.lg-on .class-header { z-index: 1 !important; } /* [IRIDIAN 2026-07-21] Menu mobil/tablet: acordio determinista. El menu es .navbar-expand-xl -> el burger esta actiu fins a 1199px, pero les regles del submenu nomes existien fins a 991px. Entre 992 i 1199 no hi havia ni fletxa ni control d'obertura. A mes, a <=991 la regla ".navbar-collapse.show .dropdown-menu {display:block!important}" deixava tots els submenus oberts alhora. Aqui l'obertura la controla max-height sobre .nav-item.dropdown.show. */ @media (max-width: 1199px) { .main-navigation .navbar-collapse .nav-item.dropdown > .dropdown-menu { display: block !important; position: static; float: none; width: 100%; max-height: 0; overflow: hidden; padding: 0; margin: 0; border: 0; box-shadow: none; transition: max-height .35s ease; } .main-navigation .navbar-collapse .nav-item.dropdown.show > .dropdown-menu { max-height: 2000px; padding: 8px 0; } .main-navigation .navbar-collapse .nav-item .dropdown-menu::before { content: none; } /* Area tactil de la fletxa: abans 20x20px a right:-35px, o sigui fora de l'enllac */ .main-navigation .nav-item.dropdown > a.nav-link { position: relative; padding-right: 40px; } .main-navigation .nav-item.dropdown > a.nav-link .toggler { position: absolute; right: 0; top: 0; bottom: 0; left: auto; width: 40px; height: auto; display: flex; align-items: center; justify-content: center; } .main-navigation .nav-item.dropdown > a.nav-link .toggler:after { content: "\f107"; font-family: FontAwesome; display: block; transform: rotate(-90deg); transition: transform .2s linear; } .main-navigation .nav-item.dropdown.show > a.nav-link .toggler:after { transform: rotate(0deg); } }