/* ========================================================================== MIBRASA HOME - CSS del redisseny nou (unificat) Conte: header, footer, home, pagina producte, herencia, kitchen, cocina-chef, slider home, blog "que se cocina". NO conte: estils.css, icons.css ni llibreries (aos, jquery-ui, owl, fonts). Breakpoints consolidats (2026-08-12): 1100px (laptop petit), 900px (tablet), 640px (mobile). Tot el responsive va agrupat al final del fitxer en 3 blocs @media, un per breakpoint (abans escampat en 46 @media amb 12 mides diferents). Literals a cada @media (CSS no admet variables a la condicio); si canvien, canviar-los als 3 blocs. ========================================================================== */ :root{ /* Colors */ --c-dark:#2b2b2b; /* fons fosc principal (header, footer, botons, textos titol) */ --c-dark-2:#242424; /* variant fosc (panell cerca header, calaix mobil) */ --c-tan:#b39b80; /* accent marca (links, icones, overlines) */ --c-beige:#d5d0cb; /* fons beix clar (seccions home/producte) */ --c-white:#fff; --c-black:#000; --c-text:#555; /* text de paragraf */ --c-text-muted:#666; /* text secundari */ --c-text-dark:#333; --c-border:#ddd; --c-border-light:#eee; --c-border-warm:#e2ddd6; /* vora calida (cards models producte) */ --c-gray-1:#8f8f8f; /* tagline/placeholder sobre fons fosc */ --c-gray-2:#b5b5b5; /* links footer sobre fons fosc */ --c-gray-3:#cfcfcf; /* text secundari sobre fons fosc */ --c-gray-4:#dcdcdc; /* icones header sobre fons fosc */ /* Tipografia */ --f-serif:'Playfair Display',serif; --f-sans:'Open Sans',sans-serif; --h2-home:50px; /* titol de seccio a la HOME (categories/herencia/kitchen/contacte/chefs) */ --h2-product:40px; /* titol de seccio a la pagina PRODUCTE (pp-h-italic/pp-h-serif) */ /* Layout */ --max-w:1440px; /* ample maxim de contingut, compartit per totes les pagines */ --side-xl:35px; /* marge lateral de pagina a <=1100px (tablet) */ --side-md:20px; /* marge lateral de pagina a <=800px (mobile) */ } /* ========================================================================== HEADER ========================================================================== */ .hdr{background:var(--c-dark);color:var(--c-white);font-family:var(--f-sans);position:relative;z-index:200} .hdr a{text-decoration:none;color:var(--c-white)} .hdr-c{max-width:var(--max-w);margin:0 auto;padding:0 34px} /* barra superior */ .hdr-top{border-bottom:1px solid #454545} .hdr-top .hdr-c{display:flex;align-items:center;justify-content:space-between;padding:9px 34px} .hdr-top .tagline{font-size:12px;color:var(--c-gray-1);letter-spacing:.3px} .hdr-top .right{display:flex;align-items:center;gap:22px} .hdr-top .right .ms{font-size:18px;color:var(--c-gray-4);cursor:pointer} .hdr-top .right a{display:inline-flex} .hdr-lang{position:relative;user-select:none} .hdr-lang .cur{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--c-gray-4);letter-spacing:.5px;cursor:pointer;text-transform:uppercase} .hdr-lang .cur .ms-language{font-size:15px} .hdr-lang .cur .ms-expand{font-size:16px} .hdr-lang ul{position:absolute;right:0;top:150%;background:var(--c-dark);border:1px solid #454545;list-style:none;margin:0;padding:5px 0;min-width:64px;display:none} .hdr-lang.open ul{display:block} .hdr-lang ul li a{display:block;padding:5px 16px;font-size:12px;color:var(--c-gray-3);text-transform:uppercase} .hdr-lang ul li a:hover{background:#3a3a3a;color:var(--c-white)} /* nav principal */ .hdr-nav .hdr-c{display:flex;align-items:center;justify-content:space-between;padding:16px var(--side-xl);} .nav-left,.nav-right{display:flex;align-items:center;gap:36px;flex:1} .nav-right{justify-content:flex-end} .hdr-nav .nav-left a,.hdr-nav .nav-right a,.hdr-nav .nav-left .nav-item-trigger{text-transform:uppercase;font-size:13px;letter-spacing:1.5px;white-space:nowrap} .hdr-nav .nav-left a:hover,.hdr-nav .nav-right a:hover,.hdr-nav .nav-left .nav-item-trigger:hover{color:var(--c-tan)} .hdr-logo{padding:0 24px;flex:0 0 auto} .hdr-logo img{height:34px;width:auto;display:block} .btn-configure{background:var(--c-tan);color:var(--c-white)!important;border-radius:30px;padding:10px 26px;letter-spacing:1.5px;font-weight:600} .btn-configure:hover{color:var(--c-white)!important;filter:brightness(1.06)} .hdr-burger{display:none;font-size:26px;cursor:pointer;color:var(--c-white)} /* megamenu */ .hdr-nav .nav-left .nav-item{position:static;display:flex;align-items:center;padding-bottom:4px;margin-bottom:-4px} .hdr-nav .nav-left .nav-item>a,.hdr-nav .nav-left .nav-item-trigger{display:inline-flex;align-items:center;gap:4px;cursor:pointer} .hdr-nav .nav-left .nav-caret{font-size:16px} .hdr-nav .nav-left .megamenu{position:absolute;left:0;right:0;top:100%;background:var(--c-dark);border-top:1px solid #3a3a3a;box-shadow:0 14px 26px rgba(0,0,0,.35);padding:36px 0;z-index:150;visibility:hidden;opacity:0;transition:opacity .2s ease .35s,visibility 0s linear .35s} .hdr-nav .nav-left .nav-item.has-mega.mega-open .megamenu{visibility:visible;opacity:1;transition:opacity .18s ease,visibility 0s} .mega-inner{max-width:var(--max-w);margin:0 auto;padding:0;display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start} .hdr-nav .nav-left .megamenu .mega-col{min-width:150px;max-width:210px;display:flex;flex-direction:column} .hdr-nav .nav-left .megamenu .mega-imglink{margin-bottom:12px} .hdr-nav .nav-left .megamenu .mega-img{width:100%;max-width:180px;height:auto;display:block} .hdr-nav .nav-left .megamenu .mega-title{color:var(--c-white);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:1px;margin-bottom:12px} .hdr-nav .nav-left .megamenu .mega-title:hover{color:var(--c-tan)} .hdr-nav .nav-left .megamenu .mega-link{color:var(--c-gray-2);text-transform:none;letter-spacing:0;font-size:13px;margin-bottom:7px} .hdr-nav .nav-left .megamenu .mega-link:hover{color:var(--c-tan)} /* megamenu OVENS & GRILLS: tabs de familia + gammes + panell info + imatge */ .hdr-nav .nav-left .megamenu.og-mega{background: #ffffffcc;padding:0;overflow:hidden} .og-inner{display:block;max-width:var(--max-w);margin:0 auto;padding:0} .og-tabs{display:flex;gap: 5px;/* background:var(--c-white); */} .og-tab{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 20px;margin:0;background:var(--c-border-light);border:0;outline:none;color:var(--c-text-dark);font-family:var(--f-sans);font-size:15px;cursor:pointer;transition:background .15s ease;margin-bottom: 10px;} .og-tab:hover{background:var(--c-beige)} .og-tab.active{background:var(--c-white)} .og-tab-ico{width: 40px;height: 40px;object-fit:contain;filter: invert(1);} .og-body{position:relative;display:grid} .og-panel{grid-area:1/1;display:flex;gap:5px;margin-bottom:10px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s ease} /* visibility/opacity nomes amb el megamenu obert: un fill pot trencar la visibility heretada de l'ancestre .megamenu (visibility:hidden) i el panell per defecte quedava focusable amb Tab */ .hdr-nav .nav-left .nav-item.has-mega.mega-open .og-panel.active{visibility:visible;opacity:1;pointer-events:auto} .og-models{flex:0 0 230px;display:flex;flex-direction:column;gap: 5px;/* background:var(--c-white); */overflow-y:auto} .og-model-row{appearance:none;-webkit-appearance:none;-moz-appearance:none;flex:1 1 0;display:flex;align-items:center;gap:14px;padding:16px 20px;margin:0;cursor:pointer;background:var(--c-border-light);border:0;outline:none;transition:background .15s ease} .og-model-row:hover{background:var(--c-beige)} .og-model-row.active{background:var(--c-white)} .og-model-thumb{flex:0 0 56px;width:56px;height:56px;background-size:contain;background-position:center;background-repeat:no-repeat} .og-model-txt{font-size:14px;font-weight:600;color:var(--c-text-dark);letter-spacing:.3px} .og-info{flex:0 0 420px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:40px 44px;background:var(--c-white)} .og-info-title{margin:0;font-family:var(--f-sans);font-size:20px;font-weight:700;letter-spacing:.3px;color:var(--c-text-dark);text-transform:uppercase} .og-info-sub{margin:0;font-size:15px;line-height:1.6;color:var(--c-text-muted)} .og-info-btns{display:flex;gap:14px;margin-top:8px} .og-btn{padding:12px 24px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-align:center;cursor:pointer} .og-btn-outline{background:transparent;border:1px solid var(--c-dark);color:var(--c-dark)!important} .og-btn-outline:hover{background:var(--c-dark);color:var(--c-white)!important} .og-btn-solid{background:var(--c-dark);border:1px solid var(--c-dark);color:var(--c-white)!important} .og-btn-solid:hover{background:#000} .og-image{flex:1;background-size:cover;background-position:center} /* cerca */ .hdr-search-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--c-dark-2);border-top:1px solid #3a3a3a} .hdr.search-open .hdr-search-panel{max-height:120px} .hdr-search-panel .hdr-c{display:flex;align-items:center;gap:14px;padding:16px 34px} .hdr-search-panel .camp-recerca{flex:1} .hdr-search-panel form{display:flex;align-items:center;gap:10px;margin:0; position: relative;} .hdr-search-panel input[type=text]{flex:1;background:transparent;border:0;border-bottom:1px solid #6a6a6a;color:var(--c-white);padding:9px 4px;font-size:16px;font-family:inherit;outline:none} .hdr-search-panel input[type=text]::placeholder{color:var(--c-gray-1)} .hdr-search-panel form i{position: absolute; right: 1%; font-size: 20px;} .hdr-search-panel .search-close{cursor:pointer;color:var(--c-gray-4);font-size:22px;flex:0 0 auto;display: flex;} /* menu mobil (burger). EXCEPCIO INTENCIONAL als breakpoints del projecte (1100/800): el nav desktop ja no hi cap a partir de ~1010px, per aixo aqui es 1010 i no 1100. Mateix cas al @1010 dels banners de categoria (mes avall). Si es canvia, canviar-ho als dos llocs. */ .hdr-mobile{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:var(--c-dark-2);z-index:320;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;display:flex;flex-direction:column} .hdr.mobile-open .hdr-mobile{transform:translateX(0)} .hdr-mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:310;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s} .hdr.mobile-open .hdr-mobile-overlay{opacity:1;visibility:visible;transition:opacity .3s ease} .hdr-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #3a3a3a} .hdr-mobile-head img{height:26px;display:block} .hdr-mobile-head .m-close{color:var(--c-white);font-size:26px;cursor:pointer;line-height:1} .hdr-mobile-nav{padding:6px 0;flex:1} .hdr-mobile-nav .m-item{border-bottom:1px solid #333} .hdr-mobile-nav .m-item-head{display:flex;align-items:center;justify-content:space-between} .hdr-mobile-nav .m-item-head a,.hdr-mobile-nav .m-item-trigger{color:var(--c-white);text-transform:uppercase;font-size:14px;letter-spacing:1px;text-decoration:none;flex:1;padding:14px 20px;cursor:pointer} .hdr-mobile-nav .m-caret{color:var(--c-tan);font-size:24px;padding:12px 20px;cursor:pointer;transition:transform .2s} .hdr-mobile-nav .m-item.open .m-caret{transform:rotate(180deg)} .hdr-mobile-nav .m-sub{display:none;flex-direction:column;padding:0 20px 12px 34px} .hdr-mobile-nav .m-item.open .m-sub{display:flex} .hdr-mobile-nav .m-sub a{color:var(--c-gray-2);font-size:13px;padding:7px 0;text-decoration:none} .hdr-mobile-nav .m-sub a:hover{color:var(--c-tan)} .hdr-mobile-nav .m-config{display:block;margin:16px 20px;background:var(--c-tan);color:var(--c-dark-2)!important;text-align:center;padding:12px;border-radius:30px;text-transform:uppercase;font-weight:600;letter-spacing:1px;text-decoration:none} .hdr-mobile-nav .m-item-link{display:block;padding:14px 20px;color:var(--c-white);text-transform:uppercase;font-size:14px;letter-spacing:1px;text-decoration:none;border-bottom:1px solid #333} .hdr-mobile-foot{padding:16px 20px;border-top:1px solid #3a3a3a} .hdr-mobile-foot .m-lang{display:flex;gap:16px;flex-wrap:wrap} .hdr-mobile-foot .m-lang a{color:var(--c-gray-4);text-transform:uppercase;font-size:13px;text-decoration:none} .hdr-mobile-foot .m-lang a.active,.hdr-mobile-foot .m-lang a:hover{color:var(--c-tan)} /* header responsive: marge lateral igual a la resta de blocs (1100/800) */ /* ========================================================================== FOOTER ========================================================================== */ footer{background:var(--c-dark);color:var(--c-gray-3);font-family:var(--f-sans)} footer a{text-decoration:none;display:flex;color:var(--c-white);font-size:11px} .footer-container{max-width:var(--max-w);margin:0 auto;padding:0 30px} .f-main{padding:46px 0;min-width:0} .f-main .footer-container{display:flex;gap:100px;flex-wrap:wrap;padding:0 30px;min-width:0;justify-content:space-between} .f-left{display:flex;flex-direction:column;align-items:center;gap:30px;min-width:0} .f-left .logo{height:200px;width:auto} .f-tag{color:var(--c-gray-1);font-size:12px} .f-right{min-width:280px;width:60%} .f-news{padding-bottom:26px;border-bottom:1px solid #4a4a4a;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;flex-direction:column;min-width:0} .f-news h3{font-size:20px;font-weight:600;letter-spacing:.5px;color:var(--c-white);text-transform:uppercase;margin:0} .f-news form{display:flex;flex-wrap:wrap;margin:0;width:100%;min-width:0} .f-news .row{display:flex;width:100%;min-width:0} .f-news input[type=email]{flex:1;min-width:0;background:var(--c-white);border:0;border-right:0;color:#6a6a6a;padding:11px 15px;font-size:13px;font-family:inherit} .f-news input[type=email]::placeholder{color:var(--c-gray-1)} .f-news button{background:var(--c-tan);border:0;color:var(--c-white);padding:11px 24px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;white-space:nowrap} .f-news .chk{width:100%;font-size:11px;color:#9a9a9a;margin-top:8px;display:flex;gap:8px;align-items:center;cursor:default} /* inline, no inline-flex: si no, l'enllac legal queda despenjat a la dreta */ .f-news .chk span{display:inline} .f-news .chk span a{white-space:nowrap} .f-news .chk input{accent-color:#c9b48a} .f-cols{display:flex;gap:48px;flex-wrap:wrap;padding-top:30px} .f-col h4{color:var(--c-white);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:15px} .f-col.links a{display:block;color:var(--c-gray-2);font-size:13px;margin-bottom:9px;line-height:1.3} .f-col.links a:hover{color:var(--c-white)} .f-col.contact .line{color:var(--c-gray-2);font-size:13px;margin-bottom:11px;display:flex;gap:8px;align-items:center} .f-col.contact a.line:hover{color:var(--c-white)} .f-col.contact .line .ms{font-size:16px;color:var(--c-gray-2);flex:0 0 auto} .f-social{display:flex;gap:13px;margin-top:5px} .f-social a{display:inline-flex} .f-social .svg-social{font-size:17px;fill:var(--c-gray-2)} .f-social a:hover .svg-social{fill:var(--c-white)} .f-bottom{border-top:1px solid #4a4a4a;padding:15px 0} .f-bottom .footer-container{display:flex;justify-content:center;gap:26px;font-size:11px;color:var(--c-gray-1);flex-wrap:wrap;align-items:center} .f-bottom a{color:var(--c-gray-1)} .f-bottom a:hover{color:var(--c-white)} /* ========================================================================== HOME ========================================================================== */ .home-cats{background:var(--c-white);font-family:var(--f-sans)} .home-cats-intro{text-align:center;padding:74px var(--side-xl) 44px} .home-cats-intro h1,.home-cats-intro h2{font-family:var(--f-serif);font-weight:400;font-size:var(--h2-home);color:var(--c-dark);margin:0} .home-cats-intro p{color:var(--c-text);font-size:15px;max-width:620px;margin:16px auto 0;line-height:1.6} .hc-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px} .hc-tabs .hc-tab{display:inline-block;text-decoration:none;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:600;color:var(--c-dark);border:1px solid var(--c-dark);border-radius:0px;padding:11px 26px;transition:background .2s ease,color .2s ease} .hc-tabs .hc-tab:hover{background:var(--c-beige)} .hc-tabs .hc-tab.active{background:var(--c-dark);color:var(--c-white)} .home-cat-row{display:flex;min-height:440px} .home-cat-row.rev{flex-direction:row-reverse} .home-cat-row .hc-img{flex:0 0 62%;display:block;min-height:340px;position:relative;overflow:hidden} .home-cat-row .hc-img .hc-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1);transform-origin:center;will-change:opacity,transform} .home-cat-row .hc-img .hc-slide.on{opacity:1} .home-cat-row .hc-txt{flex:0 0 38%;background:var(--c-beige);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:44px 6%} .home-cat-row .hc-txt h3{font-family:var(--f-serif);font-weight:400;font-size:40px;color:var(--c-dark);margin:0 0 14px} .home-cat-row .hc-txt .hc-over{color:var(--c-tan);text-transform:uppercase;letter-spacing:2px;font-size:15px;font-weight:600;margin-bottom:18px} .home-cat-row .hc-txt p{color:var(--c-text);font-size:15px;line-height:1.6;max-width:360px;margin:0 0 22px} .home-cat-row .hc-txt .hc-link{color:var(--c-tan);text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--c-tan);padding-bottom:3px} .home-cat-row .hc-txt .hc-link:hover{color:var(--c-dark);border-color:var(--c-dark)} /* "ver mas" - enllacos dels teasers home (herencia/kitchen) cap a la pagina completa */ .home-heritage .hh-link,.home-kitchen .hk-link{display:inline-block;color:var(--c-tan);text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--c-tan);padding-bottom:3px;margin-top:20px} .home-heritage .hh-link:hover,.home-kitchen .hk-link:hover{color:var(--c-dark);border-color:var(--c-dark)} /* Nuestra herencia (teaser home) */ .home-heritage{background:var(--c-white);padding:72px var(--side-xl);font-family:var(--f-sans);margin:0 auto;max-width:var(--max-w)} .home-heritage .hh-head{text-align:center;max-width:780px;margin:0 auto 50px} .home-heritage .hh-head h1,.home-heritage .hh-head h2{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:var(--h2-home);color:var(--c-dark);margin:0 0 20px} .home-heritage .hh-sub{color:var(--c-tan);text-transform:uppercase;letter-spacing:2px;font-size:15px;font-weight:600;line-height:1.5;margin-bottom:22px} .home-heritage .hh-p{color:var(--c-text);font-size:15px;line-height:1.6;max-width:630px;margin:0 auto} .home-heritage .hh-cols{display:flex;gap:38px;max-width:none;margin:0 auto} .home-heritage .hh-col{flex:1} .home-heritage .hh-col .hh-img{width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;margin-bottom:20px} .home-heritage .hh-col h3{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:32px;color:var(--c-tan);margin:0 0 14px} .home-heritage .hh-col p{color:var(--c-text);font-size:14px;line-height:1.6;margin:0 0 12px} .home-heritage .hh-col p.b{color:var(--c-dark);font-weight:700} /* Chefs (title band beix + graella 2x2) */ .home-chefs{font-family:var(--f-sans)} .home-chefs .hcf-titleband{background:#d9d3c7;text-align:center;padding:56px var(--side-xl)} .home-chefs .hcf-titleband h2{font-family:var(--f-serif);font-weight:400;font-size:var(--h2-home);color:#25231f;margin:0;font-style:italic} .home-chefs .hcf-grid{display:flex;flex-wrap:wrap} .home-chefs .hcf-cell{width:50%;min-height:560px;box-sizing:border-box;display:flex;flex-direction:column} .home-chefs .hcf-txt{background:#25231f;justify-content:center;padding:64px 80px} .home-chefs .hcf-txt p{font-family:var(--f-serif);font-weight:400;font-size:33px;line-height:1.32;color:#f3efe8;margin:0;max-width:527px} .home-chefs .hcf-txt--right{align-items:flex-end} .home-chefs .hcf-txt--right p{text-align:right} .home-chefs .hcf-txt--left{align-items:flex-start} .home-chefs .hcf-txt--left p{text-align:left;max-width:388px} .home-chefs .hcf-photo{position:relative;background-color:#000;background-size:cover;background-position:center;justify-content:flex-end;overflow:hidden} .home-chefs .hcf-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border:0;pointer-events:none;z-index:0} .home-chefs .hcf-photo--g{background-position:52% 24%} .home-chefs .hcf-cap{padding:22px 26px;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s cubic-bezier(.22,.61,.36,1);transform:translateY(100%);opacity:0} .home-chefs .hcf-photo:hover .hcf-cap,.home-chefs .hcf-photo:focus-within .hcf-cap{transform:translateY(0);opacity:1} .home-chefs .hcf-name{font-family:var(--f-serif);font-weight:500;font-size:24px;color:var(--c-white);margin-bottom:4px} .home-chefs .hcf-role{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#c7ab7d} /* The Mibrasa kitchen (teaser home) */ .home-kitchen{background:var(--c-white);padding:70px var(--side-xl);font-family:var(--f-sans);text-align:center;max-width:var(--max-w);margin:0 auto} .pag-producte #pp-insp{padding-bottom:20px} .home-kitchen h2{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:var(--h2-home);color:var(--c-dark);margin:0 0 44px} .home-kitchen .hk-grid{display:flex;gap:26px;max-width:none;margin:0 auto} .home-kitchen .hk-card{flex:1;text-align:left;display:block;color:inherit;text-decoration:none;overflow:hidden} .home-kitchen .hk-img{width:100%;aspect-ratio:1/1;background-size:100%;background-position:center;margin-bottom:16px;transition:background-size .7s cubic-bezier(.22,.61,.36,1);} .home-kitchen .hk-card:hover .hk-img{background-size:110%} .home-kitchen .hk-t{color:var(--c-tan);text-transform:uppercase;letter-spacing:1.5px;font-size:16px;font-weight:700;margin-bottom:10px;line-height:1.3} .home-kitchen .hk-card p{color:var(--c-text);font-size:14px;line-height:1.6;margin:0} .home-kitchen .hk-link{margin-top:40px} /* Contacto */ .home-contact{background:var(--c-beige);display:flex;align-items:stretch;font-family:var(--f-sans)} .home-contact .hco-img{flex:0 0 40%;background-size:cover;background-position:center;min-height:400px} .home-contact .hco-inner{flex:1;min-width:0;max-width:none;margin:0;padding:70px 60px;text-align:center;align-self:center;width:100%;box-sizing:border-box} .home-contact .hco-inner form{max-width:640px;margin:0 auto} .home-contact h2{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:var(--h2-home);color:var(--c-dark);margin:0 0 14px} .home-contact .hco-sub{color:var(--c-text);font-size:15px;line-height:1.6;margin:0 0 30px} .home-contact form{text-align:left} .home-contact .hco-row{display:flex;gap:16px;margin-bottom:16px} .home-contact .hco-row>*{flex:1;min-width:0} .home-contact input,.home-contact textarea,.home-contact select{width:100%;background:var(--c-white);border:1px solid #c3bdb4;padding:12px 15px;font-size:14px;font-family:inherit;color:var(--c-text-dark);box-sizing:border-box} .home-contact .hco-sel{height:45px;appearance:auto} .home-contact .hco-sel:invalid{color:#8a857c} .home-contact textarea{margin-bottom:16px;resize:vertical} .home-contact .hco-chk{display:flex;gap:9px;align-items:flex-start;justify-content:center;font-size:12px;color:var(--c-text-muted);margin-bottom:22px;line-height:1.5} .home-contact .hco-chk input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;background:var(--c-white);border:1px solid #c3bdb4;padding:0;margin-top:1px} .home-contact .hco-chk span{max-width:420px} .home-contact .hco-chk a{color:var(--c-tan)} .home-contact button{background:var(--c-dark);color:var(--c-white);border:0;padding:14px 40px;text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:600;cursor:pointer;display:block;margin:0 auto} .home-contact button:hover{background:var(--c-tan);color:var(--c-dark)} /* ---- HOME responsive (1100/800), + breakpoints propis existents ---- */ /* ========================================================================== PAGINA PRODUCTE (horno-brasa, scoped a .pag-producte) ========================================================================== */ .pag-producte{font-family:var(--f-sans)} .pag-producte .pp-c{max-width:var(--max-w);margin:0 auto;padding:0 var(--side-xl)} /* hero video full-bleed (reutilitza bloc_video_mb). Mateixa tecnica de "cover" que la home (vw/vh en lloc de object-fit, que un iframe no respecta), perque no quedi tallat per les bandes. */ .pag-producte .bloc_video{position:relative;width:100%} .pag-producte .bloc_video .div_video{position:relative;height:70vh;min-height:460px;width:100%;overflow:hidden} .pag-producte .bloc_video .div_video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0} /* intro "culinary excellence" */ .pag-producte .pp-intro{background:var(--c-beige);padding:56px 0 72px} .pag-producte .pp-intro-head{text-align:center;margin-bottom:20px} .pag-producte .pp-intro-head h1{font-family:var(--f-serif);font-weight:400;font-size:52px;color:var(--c-text-dark);line-height:1.1;margin:0} .pag-producte .pp-over{color:var(--c-tan);text-transform:uppercase;letter-spacing:3px;font-size:14px;font-weight:600;margin-top:10px} .pag-producte .pp-intro-body{display:flex;align-items:center;gap:20px} .pag-producte .pp-intro-left{flex:1;position:relative;z-index:2} .pag-producte .pp-big{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:96px;line-height:.9;color:var(--c-white);padding-left:.8em;text-indent:-1em} .pag-producte .pp-desc{color:var(--c-text);font-size:14px;margin:22px 0 0;line-height:1.5} /* CONFIGURE: boto petit + linia fins a la vora esquerra de la pagina */ .pag-producte .pp-conf-row{position:relative;display:flex;justify-content:flex-end;align-items:center;margin-top:34px} .pag-producte .pp-conf-row::before{content:'';position:absolute;top:50%;left:-60vw;right:170px;height:1px;background:#8a857f} .pag-producte .pp-conf{position:relative;display:inline-block;background:var(--c-dark);color:var(--c-white);text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:600;padding:11px 24px;text-decoration:none} .pag-producte .pp-conf:hover{background:var(--c-black);color:var(--c-white)} .pag-producte .pp-intro-right{flex:1;position:relative;display:flex;justify-content:center;align-items:center} .pag-producte .pp-render{width:100%;max-width:440px;aspect-ratio:4/3;object-fit:contain;display:block} .pag-producte .pp-360{position:absolute;top:6px;right:0;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--c-text);font-size:11px} .pag-producte .pp-360 svg{width:34px;height:34px;fill:none;stroke:var(--c-text);stroke-width:1.5} .pag-producte .pp-mv{width:100%;max-width:500px;height:480px;background:transparent;--poster-color:transparent} .pag-producte .pp-mv-spinner{display:flex;justify-content:center;align-items:center;width:100%;height:100%} .pag-producte .pp-mv-spinner i{font-size:48px;color:var(--c-dark)} .pag-producte .pp-360-on{top:6px} /* helpers tipografia compartits dins la pagina producte */ .pag-producte .pp-h-italic{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--c-dark);font-size:var(--h2-product);line-height:1.1;text-align:center;margin:0 0 40px} .pag-producte .pp-h-italic.pp-sm{font-size:26px;text-align:left;margin:0 0 14px} .pag-producte .pp-h-over{font-family:var(--f-sans);text-transform:uppercase;letter-spacing:8px;font-weight:600;font-size:24px;color:var(--c-tan);text-align:center;margin:0 0 34px} .pag-producte .pp-h-serif{font-family:var(--f-serif);font-weight:400;font-size:var(--h2-product);line-height:1.12;color:var(--c-dark);overflow-wrap:break-word} .pag-producte .pp-h-serif-lg{font-family:var(--f-serif);font-weight:400;font-size:var(--h2-product);line-height:1.1;color:var(--c-dark)} .pag-producte .pp-center{text-align:center} .pag-producte .pp-light{color:var(--c-white)} .pag-producte section{padding: 70px var(--side-xl);} html{scroll-behavior:smooth} .pag-producte section[id^="pp-"],.pag-producte .pp-config-anchor,.pag-producte #pp-config{scroll-margin-top:120px} .pag-producte #pp-config{padding-top:70px} .pag-producte .pp-video-box,.pag-producte .pp-b-video iframe{position:relative;width:100%;aspect-ratio:16/9;background:#111} .pag-producte .pp-video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Original grill (hotspot slider) */ .pag-producte .pp-og-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:44px;align-items:stretch} .pag-producte .pp-og-main{position:relative} .pag-producte .pp-og-main img{width:100%;height:100%;min-height:480px;display:block;object-fit:cover} .pag-producte .pp-hot{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.65);border:1px solid var(--c-dark);cursor:pointer;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:transform .2s,background .2s;z-index:2} .pag-producte .pp-hot::before{content:'+';position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-size:18px;line-height:1;color:var(--c-dark)} .pag-producte .pp-hot.on{background:var(--c-dark);border-color:var(--c-dark)} .pag-producte .pp-hot.on::before{content:'\2212';color:var(--c-white)} .pag-producte .pp-hot:hover{transform:translate(-50%,-50%) scale(1.12)} .pag-producte .pp-og-side{padding-top:6px;display:flex;flex-direction:column;height:100%} .pag-producte .pp-og-dots{display:flex;gap:9px;margin-bottom:22px;flex:none} .pag-producte .pp-og-dots i{width:9px;height:9px;border-radius:50%;border:1px solid var(--c-tan);display:block;cursor:pointer;transition:background .2s} .pag-producte .pp-og-dots i.on{background:var(--c-tan)} .pag-producte .pp-og-slides{position:relative;min-height:150px;flex:1;display:grid} .pag-producte .pp-og-slide{grid-area:1/1;display:flex;flex-direction:column;width:100%;visibility:hidden;pointer-events:none} .pag-producte .pp-og-slide.on{visibility:visible;pointer-events:auto} .pag-producte .pp-og-side .pp-h-italic.pp-sm{text-align:left;margin:0 0 12px;flex:none} .pag-producte .pp-og-side p{color:var(--c-text);font-size:14px;line-height:1.6;max-width:460px;margin:0 0 12px;flex:none} /* Imatge que acompanya cada punt: mai fa creixer la caixa -- omple nomes l'espai que queda sota el text, sense sobrepassar l'alcada de la imatge principal (amb els punts). */ .pag-producte .pp-og-life{margin-top:auto;aspect-ratio:1/1;height:auto;flex:none} .pag-producte .pp-og-life img{width:100%;height:100%;display:block;object-fit:contain} /* Functionality — nomes titols a primera vista, desplega detall en clicar "+" */ .pag-producte .pp-func-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center} .pag-producte .pp-func-list{list-style:none;margin:0;padding:0} .pag-producte .pp-func-item{margin-bottom:14px;border-bottom:1px solid var(--c-border-light,#e5e1da)} .pag-producte .pp-func-head{display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;padding:10px 0;cursor:pointer;text-align:left;font-family:inherit} .pag-producte .pp-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--c-dark);color:var(--c-white);font-size:13px;font-style:italic;display:flex;align-items:center;justify-content:center;font-family:var(--f-serif)} .pag-producte .pp-func-head h4{flex:1;margin:0;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--c-dark)} .pag-producte .pp-func-plus{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--c-dark);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--c-dark);transition:transform .3s ease} .pag-producte .pp-func-item.pp-open .pp-func-plus span{display:inline-block;transform:rotate(45deg)} .pag-producte .pp-func-plus span{display:inline-block;transition:transform .3s ease} .pag-producte .pp-func-txt{max-height:0;overflow:hidden;transition:max-height .35s ease} .pag-producte .pp-func-item.pp-open .pp-func-txt{max-height:240px} .pag-producte .pp-func-txt-in{padding:0 0 16px 42px} .pag-producte .pp-func-txt p{margin:0;color:var(--c-text);font-size:14px;line-height:1.55} .pag-producte .pp-func-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} /* Build mosaic */ .pag-producte .pp-build-head{text-align:center} .pag-producte .pp-build-sub{color:var(--c-text);font-size:14px;margin:0 0 34px} .pag-producte .pp-build-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,0.85fr) minmax(0,0.6fr);grid-template-rows:300px 220px;gap:14px;max-width:var(--max-w);margin:0 auto;padding:0} .pag-producte .pp-build-grid>div{background-size:cover;background-position:center;border-radius:2px} .pag-producte .pp-b-fire{grid-column:1/3;grid-row:1} .pag-producte .pp-b-s1{grid-column:1;grid-row:2} .pag-producte .pp-b-s2{grid-column:2;grid-row:2} .pag-producte .pp-b-video{grid-column:3;grid-row:1/3;position:relative;overflow:hidden;background:#111} .pag-producte .pp-b-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;aspect-ratio:16/9;height:auto;border:0} .pag-producte .pp-b-txt{grid-column:4;grid-row:1;background:none!important;padding:6px 8px;display:flex;flex-direction:column;justify-content:center;min-width:0} .pag-producte .pp-b-txt p{color:var(--c-text);font-size:14px;line-height:1.6;margin-top:14px} .pag-producte .pp-b-weld{grid-column: 5;grid-row:1} .pag-producte .pp-b-detail{grid-column: 4 / 6;grid-row: 2;} /* Models */ .pag-producte .pp-models{background:var(--c-beige)} .pag-producte .pp-models-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center;margin-bottom:46px} .pag-producte .pp-mi-col p{color:var(--c-text);font-size:14px;line-height:1.6;margin-top:12px} .pag-producte .pp-mi-left{text-align:right} .pag-producte .pp-mi-right{text-align:left} .pag-producte .pp-mi-kick{display:block;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;color:var(--c-dark);margin-top:4px} .pag-producte .pp-mi-img img{width:100%;aspect-ratio:49/32;object-fit:contain;display:block} /* Sense columnes de text al costat (ex: Parrilla) -> el render ocupa tota l'amplada, mes gran */ .pag-producte .pp-models-intro.pp-mi-solo{grid-template-columns:1fr} .pag-producte .pp-mi-solo .pp-mi-img{max-width:640px;margin:0 auto} .pag-producte .pp-mi-solo .pp-mi-col{display:none} .pag-producte .pp-models-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;align-items:start} .pag-producte .pp-mcard{background:var(--c-white);padding:30px 22px;text-align:center;position:relative;display:flex;flex-direction:column;border:1px solid var(--c-border-warm)} .pag-producte .pp-mcard-head{display:flex;flex-direction:column;flex:1 0 auto} .pag-producte .pp-mcard-head h4{font-size:24px;letter-spacing:3px;margin:0 0 10px;color:var(--c-dark);font-weight:400} .pag-producte .pp-mcard-tag{flex:1 0 auto;color:var(--c-black);font-size:13px;min-height:36px;margin:0} .pag-producte .pp-mcard-sep{display:block;width:30px;height:1px;background:#ccc;margin:14px auto} .pag-producte .pp-mcard-dim{color:var(--c-dark);font-size:13px;margin:0} .pag-producte .pp-mcard-medidas{font-size:16px;margin:0;color:var(--c-black)} .pag-producte .pp-mcard-toggle{display:block;margin:18px auto 0;width:34px;height:34px;border-radius:50%;background:var(--c-dark);color:var(--c-white);border:0;font-size:20px;line-height:1;cursor:pointer} .pag-producte .pp-models-specs-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:22px;align-items:start} .pag-producte .pp-mcard-specs{display:grid;grid-template-rows:0fr;background:transparent;border:0;text-align:left;transition:grid-template-rows .35s ease} .pag-producte .pp-mcard-specs.pp-open{grid-template-rows:1fr;background:var(--c-white);border:1px solid var(--c-border-warm)} .pag-producte .pp-mcard-specs-inner{overflow:hidden;min-height:0;padding:0 22px;transition:padding .35s ease} .pag-producte .pp-mcard-specs.pp-open .pp-mcard-specs-inner{padding:24px 22px} .pag-producte .pp-mcard.pp-open .pp-mcard-toggle span{display:inline-block;transform:rotate(45deg)} .pag-producte .pp-spec-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--c-border-light);font-size:16px} .pag-producte .pp-spec-lbl{color:var(--c-black);display:flex;align-items:center;gap:8px} .pag-producte .pp-spec-ico{width:20px;height:16px;flex:0 0 auto;opacity:.75;object-fit:contain} .pag-producte .pp-spec-val{color:var(--c-black)} /* Cook like a chef (dins la pagina producte): sistema pp-cc-*, compartit amb pag_cocina_chef.php */ .pag-producte .pp-chef{padding-bottom:50px;padding-top:20px} /* Tabs nav (sticky, ancoratge seccions) */ .pag-producte .pp-tabs{position:sticky;top:0;z-index:40;background:var(--c-white);border-bottom:1px solid var(--c-border-light);padding:16px 0} .pag-producte .pp-tabs-in{display:flex;justify-content:center;gap:0;flex-wrap:wrap} .pag-producte .pp-tab{padding:10px 26px;border:1px solid var(--c-border);color:var(--c-dark);text-decoration:none;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-left:-1px} .pag-producte .pp-tab.pp-active,.pag-producte .pp-tab:hover{background:var(--c-dark);color:var(--c-white);border-color:var(--c-dark)} /* Configure: specs de la talla en fila (no apilades). Sense scope: igual a les 3 plantilles que usen el configurador (base a estils.css). */ .configurator .caixa_select_modelo .estil_radio .desc_mides_modelo div.col2{display:flex;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:16px} .configurator .caixa_select_modelo .estil_radio .desc_mides_modelo div.col2 .cfg-spec-line{margin-bottom:0;justify-content:flex-start} /* Configure: talla seleccionada, vora negra ben visible */ .configurator .caixa_select_modelo .estil_radio:has(input:checked){border-color:#000;border-width:2px} /* Configure: totes les talles nomes mostren el nom a la primera vista; la seleccionada desplega les specs nomes en fer-hi clic (.cfg-expanded via JS, no automatic amb :checked, perque cap targeta ha de sortir oberta d'entrada). */ .configurator .caixa_select_modelo .estil_radio.cfg-talla-row .desc_mides_modelo div.col2.cfg-talla-detall{display:none} .configurator .caixa_select_modelo .estil_radio.cfg-talla-row.cfg-expanded .desc_mides_modelo div.col2.cfg-talla-detall{display:flex;margin-top:8px} /* Configure: accesorios incluidos, dins la card de la talla seleccionada, nomes quan s'expandeix */ .configurator .estil_radio .cfg-incluidos-talla{display:none} /* padding, no margin: el bloc hereta width:100% i el margin el feia sortir de la card */ .configurator .estil_radio.cfg-expanded .cfg-incluidos-talla:not(:empty){display:block;margin: 0 0 15px;padding: 0 15px;/* background:var(--c-white,#fff); */border-radius:12px;font-size:12px;color:var(--c-text-muted,#707070)} .configurator .estil_radio .cfg-incluidos-talla span{font-weight:600;color:var(--c-black,#000);display:block;margin-bottom:4px;font-size:12px} .configurator .estil_radio .cfg-incluidos-talla ul{padding-left:16px;margin:0 0 10px} .configurator .estil_radio .cfg-incluidos-talla li{margin-bottom:3px} .configurator .cfg-ref-hidden{display:none} /* Configure: garantia (checkbox blocat) i mueble a mida; estil .cfg-opt-card sense imatge */ .configurator .cfg-opt-simple{margin-top:16px} .configurator .cfg-opt-simple + .cfg-opt-simple{margin-top:12px} .configurator .cfg-opt-simple label{padding:14px 40px 14px 18px;justify-content:flex-start} .configurator .cfg-opt-simple .cfg-opt-nom{font-size:13px;font-weight:600;color:var(--c-text-dark,#1b1b1b);text-align:left} .configurator .cfg-opt-simple input[type="checkbox"]{top:50%;transform:translateY(-50%)} .configurator .cfg-opt-card-locked input[type="checkbox"]{cursor:default;opacity:.7} .configurator .cfg-opt-card-locked{background:#ececec} .configurator .cfg-opt-card-locked label{cursor:default} .configurator .cfg-opt-incluido{font-style:italic;color:#707070;font-size:11px} .configurator .cfg-pack-card{flex-direction:column;align-items:stretch;margin-top:14px} .configurator .cfg-pack-card label{padding:14px 40px 14px 18px;justify-content:flex-start} .configurator .cfg-pack-card .cfg-opt-nom{text-align:left} .configurator .cfg-pack-list{list-style:disc;margin:0 18px 16px;padding:0 0 0 18px;font-size:12px;color:#707070} .configurator .cfg-pack-list li{margin-bottom:3px} /* Configure: accesorios opcionales, cards seleccionables (checkbox) estil pack */ .configurator .cfg-opt-card label{text-align:left} .caixa_select_opcionales .cfg-opcionales-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;flex-direction: column;} .cfg-opt-card{position:relative;width:100%;/* max-width:440px; */border:0.5px solid #707070;border-radius:12px;background:#F2F2F2;overflow: hidden;} /* sense text-align: el defineix la regla .configurator .cfg-opt-card label (text-align:left), que sempre guanya */ .cfg-opt-card label{display:flex;/* flex-direction:column; */align-items:center;gap: 15px;padding: 0px;cursor:pointer;width: 100%;margin:0} .cfg-opt-card input[type="checkbox"]{position:absolute;top:10px;right:10px;width:18px;height:18px;margin:0;accent-color:#000;cursor:pointer;z-index:1} .cfg-opt-img{width: 25%;height: 70px;border-radius: 0;flex:0 0 auto;background-color:#fff;background-size: 70%;background-position:center;background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,")} /* reserva a la dreta: el checkbox i la "i" son absoluts i els noms llargs hi passaven per sota */ .cfg-opt-nom{font-size:11px;color:#707070;font-weight:500;line-height:1.3;min-width:0;flex:1 1 auto;padding-right:26px;overflow-wrap:break-word} .cfg-opt-info{position:absolute;bottom:8px;right:8px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-style:italic;font-family:Georgia,serif;line-height:1;color:#707070;border:1px solid #707070;border-radius:50%;text-decoration:none;cursor:pointer;z-index:1} /* Configure: titol overline + frase intro */ .pag-producte .pp-config-intro{max-width:640px;margin:0 auto 36px;text-align:center;font-size:15px;line-height:1.6;color:var(--c-text-muted)} /* Configure: selector de gama (SPACE|COMPACT...) */ .pag-producte #pp-config-family{margin-bottom:36px} .pag-producte .pp-conf-question{text-align:center;margin-bottom:26px} .pag-producte .pp-conf-question p{font-size:14px;color:var(--c-text);margin:0 0 14px} .pag-producte .pp-conf-question-opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .pag-producte .pp-conf-q-btn{background:var(--c-white);border:1px solid var(--c-dark);color:var(--c-dark);text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:600;padding:12px 26px;cursor:pointer;border-radius:8px;transition:background .15s,color .15s} .pag-producte .pp-conf-q-btn:hover{background:var(--c-dark);color:var(--c-white)} .pag-producte .pp-conf-family{display:flex;gap:16px;flex-wrap:wrap;justify-content:center} .pag-producte .pp-conf-fam-card{display:flex;align-items:center;gap:12px;padding:14px 22px;border:1px solid var(--c-border);cursor:pointer;transition:background .15s,border-color .15s;min-width:180px;border-radius:12px} .pag-producte .pp-conf-fam-card:hover{border-color:var(--c-tan)} .pag-producte .pp-conf-fam-card.pp-active{background:#ececec;border-color:#ccc} .pag-producte .pp-conf-fam-card img{width:64px;height:64px;object-fit:contain;flex:none} .pag-producte .pp-conf-fam-card img[src$=".svg"]{filter:invert(1)} .pag-producte .pp-conf-fam-txt{display:flex;flex-direction:column;gap:2px} .pag-producte .pp-conf-fam-txt b{font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--c-dark);text-transform:uppercase} .pag-producte .pp-conf-fam-txt span{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.5px} /* ---- PRODUCTE responsive: 900/640 (per component) + 1100/800 (marge/alineacio) ---- */ /* ========================================================================== NUESTRA HERENCIA (pagina Explore) ========================================================================== */ .pp-her-hero{position:relative;height:52vh;min-height:380px;background-size:cover;background-position:center;overflow:hidden} .pp-her-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none} .pp-her-intro{padding-top:80px;padding-bottom:10px} .pp-her-rows{display:flex;flex-direction:column} .pp-her-row{display:flex;min-height:560px} .pp-her-row.rev{flex-direction:row-reverse} .pp-her-row-img{flex:1 1 50%;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#0d0d0d} .pp-her-row-txt{flex:1 1 50%;background:#f2efe9;display:flex;align-items:center} .pp-her-row-txt-inner{max-width:520px;padding:60px 60px;font-family:var(--f-sans)} .pp-her-row-txt-inner h3{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:36px;color:var(--c-tan);margin:0 0 18px} .pp-her-row-txt-inner p.b{color:var(--c-dark);font-weight:700;font-size:16px;line-height:1.5;margin:0 0 16px} .pp-her-row-txt-inner p{color:var(--c-text-muted);font-size:15px;line-height:1.7;margin:0 0 14px} .pp-her-row[data-pp-her-titol="Artesanía"] .pp-her-row-txt-inner{text-align:right;margin-left:auto} /* ========================================================================== TEASER ESSENCIALS dins pagina de producte (abans de "The Mibrasa kitchen") ========================================================================== */ .pp-essencials-teaser{padding:60px 0 20px} .pp-et-grid{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:50px} .pp-et-cell{flex:1 1 160px;position:relative;text-decoration:none} .pp-et-photo{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .pp-et-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.22,.61,.36,1)} .pp-et-cell:hover .pp-et-img{transform:scale(1.05)} .pp-et-photo::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.32)} .pp-et-name{position:relative;z-index:1;color:#fff;font-family:var(--f-sans);font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;text-align:center;padding:0 10px} /* Producte flotant sota la targeta, mateix estil que /es/esenciales (mibrasa.com/es/esenciales) */ .pp-et-float-prod{position:absolute;left:50%;bottom:0;transform:translate(-50%,60%);width:68%;aspect-ratio:4/3;background-size:contain;background-repeat:no-repeat;background-position:center;z-index:2} /* ========================================================================== THE MIBRASA KITCHEN (pagina Explore) ========================================================================== */ .pp-kit-wrap{padding:60px 0 90px} .pp-kit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px} .pp-kit-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;overflow:hidden} .pp-kit-img{aspect-ratio:1/1;background-size:100%;background-position:center;margin-bottom:18px;transition:background-size .7s cubic-bezier(.22,.61,.36,1)} .pp-kit-card:hover .pp-kit-img{background-size:110%} .pp-kit-card h3{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:22px;color:var(--c-tan);margin:0 0 10px} .pp-kit-card p{color:var(--c-text-muted);font-size:14px;line-height:1.6;margin:0} /* marge lateral propi: el `padding:60px 0` anul.la el de .contenidor_centrat */ /* ========================================================================== COCINA COMO UN CHEF (pagina standalone Explore) ========================================================================== */ .pp-cc-wrap{padding: 60px 0 60px;} .pp-cc-mes{text-align:center;margin-top:50px;display: flex;justify-content: center;} .pp-cc-mes .pp-cc-link:hover{color:var(--c-dark);border-color:var(--c-dark)} .pp-cc-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:40px} .pp-cc-tab{background:var(--c-white);border:1px solid var(--c-border);color:var(--c-dark);padding:10px 20px;font-size:12px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;font-family:var(--f-sans)} .pp-cc-tab.pp-active{background:var(--c-dark);color:var(--c-white);border-color:var(--c-dark)} .pp-cc-panel{display:none} .pp-cc-panel.pp-active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap: 15px;} .pp-cc-stack{display:flex;flex-direction:column;gap: 15px;} .pp-cc-stack-img{flex:1 1 50%;background-size:cover;background-position:center;min-height:180px} .pp-cc-chefpanel{position:relative;display:grid;grid-template-columns: minmax(0,0.8fr) minmax(0,1fr);gap: 15px;min-height:780px} .pp-cc-photo{position:relative;overflow:hidden;background:var(--c-border-light)} .pp-cc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Video del xef actiu es reprodueix sol (autoplay JS, ppActivateChefVideo). La caixa manté sempre la mateixa alçada (640px, min-height a .pp-cc-chefpanel) encara que els vídeos tinguin proporcions diferents entre xefs -- es retalla (cover, ancorat dalt-esquerra via inset:0 + width/height explícits) en comptes de canviar la mida del panell. */ .pp-cc-photo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none} .pp-cc-info{padding:40px 50px;color:var(--c-white);display:flex;flex-direction:column;justify-content:flex-end;background:var(--c-dark);gap: 10px;} /* noms llargs amb letter-spacing sortien de la caixa del panell */ .pp-cc-name{font-family:var(--f-sans);font-size:28px;letter-spacing:3px;text-transform:uppercase;color:var(--c-tan);font-weight:400;/* margin:0 0 12px; */overflow-wrap:break-word;min-width:0} .pp-cc-rest{color:var(--c-white);font-size:18px;margin:0} .pp-cc-loc{color:var(--c-gray-3);font-size:16px;/* margin:0 0 24px; */} .pp-cc-quote{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--c-white);font-size:32px;line-height:1.15;margin:0 0 24px;overflow-wrap:break-word;min-width:0} .pp-cc-quote--long{font-size:20px;line-height:1.4} .pp-cc-link{align-self:flex-start;color:var(--c-tan);font-size:13px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--c-tan);padding-bottom:4px;line-height: 1;} .pp-cc-link:hover{color:var(--c-white);border-color:var(--c-white)} /* mateix cas que .pp-kit-wrap: marge lateral propi */ /* banner superior "Chefs who brought their Mibrasa home" (mateix contingut que la HOME, id_home_chefs) */ .pp-cc-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--c-dark);min-height:640px} .pp-cc-teaser-info{padding: 60px 60px;color:var(--c-white);display:flex;flex-direction:column;justify-content:center;align-items: flex-end;text-align: end;} .pp-cc-teaser-title{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--c-white);font-size: 75px;line-height: normal;margin:0 0 24px} .pp-cc-teaser-names{display:flex;flex-wrap:wrap;gap: 60px;margin-bottom: 40px;} .pp-cc-teaser-names span{color:var(--c-gray-3);font-size:14px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;padding-bottom:4px;border-bottom:1px solid transparent} .pp-cc-teaser-names span.pp-active{color:var(--c-tan);border-color:var(--c-tan)} .pp-cc-teaser-names span:hover{color:var(--c-white)} .pp-cc-teaser-info p{color:var(--c-gray-3);font-size: 30px;line-height: normal;margin:0;max-width:460px;font-family: 'Playfair Display';} .pp-cc-teaser-photo{position:relative;overflow:hidden;background:var(--c-dark)} .pp-cc-teaser-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0} .pp-cc-teaser-photo iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;pointer-events:none} /* ========================================================================== SLIDER HOME (hero) - aspect-ratio Ken Burns (fix nostre sobre el carrusel vell) ========================================================================== */ .banners_pc{display:block} .banners_mobil{display:none} .banners_mobil_630{display:none} #slide_home{background:var(--c-black);position:relative} #slide_home img{width:auto!important;margin:auto} #slide_home .caixa_img_slide img{width:100%!important} #slide_home a.enllac_amb_fletxa img{margin:0;display:inherit} #slide_home .owl-dots{display:none} #slide_home .owl-prev{position:absolute;left:2%;top:50%;transform:translateY(-50%);font-size:40px;color:var(--c-white)} #slide_home .owl-next{position:absolute;right:2%;top:50%;transform:translateY(-50%);font-size:40px;color:var(--c-white)} #slide_home .slide{background-size:cover!important;position:relative} #slide_home .slide .container{width:100%;max-width:var(--max-w);margin:0 auto;display:flex;justify-content:center;flex-direction:column;height:auto!important;color:var(--c-white);padding:0 var(--side-xl);position:absolute;bottom:5%;left:0;right:0} #slide_home .slide .container .caixa_fletxa{position:absolute;bottom:20px} #slide_home .slide .container .s{max-width:50%;padding-left:5%;display:flex;flex-direction:column;gap:10px} #slide_home .slide .container .s .t{font-style:italic;font-family:var(--f-serif);font-size:50px;font-weight:400;line-height:1;margin-bottom:10px} #slide_home .slide .container .s .st{font-family:var(--f-sans);font-size:14px;font-weight:400} /* hover neutralitzat a proposit: anul.la el .btn_unificat:hover generic d'estils.css i manté el botó blanc/negre */ #slide_home .btn_unificat:hover{background:var(--c-white);color:var(--c-black)} #slide_home .btn_unificat{margin-top:30px;background-color:var(--c-white);color:var(--c-black);text-align:center;max-width:200px} /* hero: aspect-ratio fix (editable) + media cover full-width; mateix aspect a video i imatge -> slides Owl uniformes */ #slide_home .caixa_video_slide_home,#slide_home .caixa_img_slide{position:relative;width:100%;padding:0;aspect-ratio:3/1;overflow:hidden} #slide_home .caixa_video_slide_home iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:56.25vw;min-height:100%;max-width:none;border:0} #slide_home .caixa_img_slide img{width:100%!important;height:100%;object-fit:cover;margin:0} .slide video{position:absolute;left:0;width:100%;height:auto;top:0} /* ========================================================================== BLOG "QUE SE COCINA?" (pagina nova blog.php, .qsc) + teaser home antic (.blog_home) ========================================================================== */ .blog_home{margin:85px 0} .blog_home .container_web{max-width:1500px;margin:0 auto;padding:0} .blog_home .titol_destacat{color:var(--c-black);font-size:14px;font-family:var(--f-sans);margin-bottom:45px;padding-right:60%} .blog_home .titol_destacat h2{color:var(--c-black);font-family:var(--f-serif);font-size:40px;line-height:1.1;margin-bottom:15px} .blog_home .b,.blog_page .b{position:relative} .blog_home .b img,.blog_page .b img{border-radius:15px} .blog_home .b .t,.blog_page .b .t{position:absolute;bottom:0;width:100%;padding-left:5%;padding-bottom:5%;padding-right:5%;color:var(--c-white);height:100%;display:flex;flex-direction:column;justify-content:end;background-color:rgba(0,0,0,.2);gap:15px;border-radius:15px} .blog_home .b .t h4,.blog_page .b .t h4{font-family:var(--f-serif);font-size:25px;line-height:1.2;font-weight:300} .blog_home .b .t .btn_unificat,.blog_page .b .t .btn_unificat{background:var(--c-white);color:var(--c-black);max-width:20%;padding:3px 10px;text-align:center;border-radius:15px;font-size:13px} /* Que se cocina: cards estil "The Mibrasa kitchen", 4 columnes */ .blog_page.qsc{background:var(--c-white);padding:70px clamp(20px,5vw,90px) 60px;font-family:var(--f-sans)} .blog_page.qsc .contenidor_centrat{width:100%;max-width:var(--max-w);margin:0 auto;box-sizing:border-box} .blog_page.qsc .caixa_titol{text-align:center;margin-bottom:44px} .blog_page.qsc .titol_destacat{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:var(--h2-home);color:var(--c-dark);margin:0} .blog_page.qsc .qsc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px} .blog_page.qsc .qsc-card{display:block;text-align:left;text-decoration:none;color:inherit} .blog_page.qsc .qsc-img{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:16px;background:var(--c-border-light)} .blog_page.qsc .qsc-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .5s ease} .blog_page.qsc .qsc-card:hover .qsc-img img{transform:scale(1.05)} .blog_page.qsc .qsc-t{color:var(--c-tan);text-transform:uppercase;letter-spacing:1.5px;font-size:16px;font-weight:700;line-height:1.3;margin-bottom:10px} .blog_page.qsc .qsc-p{color:var(--c-text);font-size:14px;line-height:1.6;margin:0} .blog_page.qsc .paginacio{margin-top:50px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap} .tit_seccio_cerca{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:28px;color:var(--c-dark);margin:50px 0 24px;text-align:center} .blog_page.qsc .paginacio a{color:var(--c-dark);text-decoration:none} .blog_page.qsc .paginacio a:hover{color:var(--c-tan)} .blog_page.qsc .paginacio .numero_pag{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-dark);background:var(--c-white);border:1px solid var(--c-beige);padding:0 10px;text-decoration:none;font-size:14px;line-height:1;transition:all .15s ease} .blog_page.qsc .paginacio .numero_pag:hover{border-color:var(--c-tan);color:var(--c-tan)} .blog_page.qsc .paginacio .numero_pag.selected,.blog_page.qsc .paginacio .numero_pag.actual{background:var(--c-dark);color:var(--c-white);border-color:var(--c-dark);font-weight:600} .owl-nt-home .owl-prev{position:absolute;top:40%;left:0} .owl-nt-home .owl-next{position:absolute;top:40%;right:0} /* Responsive .qsc en cadena DESCENDENT i tota junta: abans les regles de 900 i 560 anaven ABANS del @1100 d'aqui sobre i, amb la mateixa especificitat, el 1100 les sobreescrivia (a 400px el llistat sortia a 2 columnes en lloc d'1). L'ordre d'aquests blocs importa. */ /* ========================================================================== FORMULARIS (compartit - formularis de contacte/configurador/opinions) ========================================================================== */ .field input,.field select,.field textarea{width:100%;padding:10px 15px} .field{margin-bottom:10px} .legals{display:flex;flex-direction:column} .legals .punt_legal{display:flex;margin-bottom:10px;gap:.5em;align-items:center} .wrap_btn .send{padding:10px 25px;margin-bottom:25px} .g-recaptcha{margin-top:25px;margin-bottom:20px} /* ========================================================================== BANNER CATEGORIA (banner_home.php / banner_categoria_*_mb.php) reutilitzat per pag_categoria_nou.php (bloc id_plantilla=29) i les plantilles de categoria antigues (pag_categoria_mb/principal_mb) ========================================================================== */ .banner_home{background-size:cover!important} .banner_home .container_web{min-height:80vh;display:flex;flex-direction:column;justify-content:center;color:var(--c-white);width:100%;max-width:100%;padding:0} .banner_home .container_web .t{font-size:35px;font-weight:bold;margin-bottom:10px} .banner_home .container_web .d{margin-bottom:35px;font-size:50px;color:var(--c-white);font-family:var(--f-serif);font-style:italic;font-weight:400;line-height:1.6;text-align:right} .banner_home .container_web .btn{background-color:var(--c-black);color:var(--c-white);padding:12px 45px;display:inline-block} .banner_pag_categoria{background-size:cover!important;background-position-y:top!important} .banner_pag_categoria .container_web{min-height:80vh;display:flex;flex-direction:column;justify-content:center;color:var(--c-white);width:100%;max-width:100%;padding:0} .banner_pag_categoria .container_web .t{font-size:35px;font-weight:bold;margin-bottom:10px} .banner_pag_categoria .container_web .d{margin-bottom:35px;font-size:50px;color:var(--c-white);font-family:var(--f-serif);font-style:italic;font-weight:400;line-height:1.6;text-align:right} .banner_pag_categoria .container_web .d span{color:var(--c-white);background-color:var(--c-black);padding-top:5px;padding-bottom:5px;padding-left:1%;padding-right:5%} .banner_pag_categoria .container_web .btn{background-color:var(--c-black);color:var(--c-white);padding:12px 45px;display:inline-block} .banner_pag_categoria .container_web .titol_img_boto{padding-left:5%;display:flex;flex-direction:column;gap:10px;max-width:600px} .banner_pag_categoria.banner_cat_principal .container_web .titol_img_boto{max-width:50%} .banner_pag_categoria .container_web .titol_img_boto img,.video_banner_pag_cat .titol_img_boto img{max-width:150px;margin-bottom:0} .banner_pag_categoria .container_web .titol_img_boto .btn_unificat{background-color:var(--c-white);color:var(--c-black);text-align:center;max-width:200px} .banner_pag_categoria .container_web .titol_img_boto .st{font-family:var(--f-sans);font-size:16px;font-weight:400} .banner_pag_categoria .container_web .titol_img_boto .t,.banner_pag_categoria .container_web .titol_img_boto .t h1{font-family:var(--f-serif);font-size:70px;font-weight:400;line-height:1} .banner_pag_categoria.banner_cat_principal .container_web .titol_img_boto .t{font-style:italic} .banner_pag_categoria.banner_cat_principal .container_web .titol_img_boto .btn_unificat{margin-top:30px} /* 1010 i no 1100: excepcio intencional, alineada amb el breakpoint del burger (veure HEADER) */ /* ========================================================================== PAGINA CONTACTE (mateix aire que .home-contact: beige, camps blancs, serif italic). Dreta visual (.right, per row-reverse) = mapa OSM/CARTO a sencer, sense caixa de text/adreca. ========================================================================== */ .pagina_contacte{background:var(--c-beige);display:flex;align-items:stretch;flex-direction:row-reverse;justify-content:flex-start;margin:0;font-family:var(--f-sans)} .pagina_contacte .left{width: 45%;display:block} .pagina_contacte .right{width: 55%;background:transparent;color:inherit} .pagina_contacte .left .inner{width:100%;padding:70px 60px;box-sizing:border-box} .pagina_contacte h1{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:var(--h2-home);color:var(--c-dark);margin:0 0 14px} .pagina_contacte .left .inner .s{font-size:15px;line-height:1.6;color:var(--c-text);margin-bottom:30px} .pagina_contacte #frm_contacte{max-width: auto;margin:0 auto} .pagina_contacte #frm_contacte input,.pagina_contacte #frm_contacte textarea,.pagina_contacte #frm_contacte select{width:100%;background:var(--c-white);border:1px solid #c3bdb4;border-radius:0;padding:12px 15px;font-size:14px;font-family:inherit;color:var(--c-text-dark);box-sizing:border-box} .pagina_contacte #frm_contacte .field.contact{margin-bottom:16px} .pagina_contacte #frm_contacte .field.contact span{display:block;font-size:12px;color:var(--c-text-muted);margin-bottom:6px} .pagina_contacte #frm_contacte .btn_unificat.send{background:var(--c-dark);color:var(--c-white);border:0;padding:14px 40px;text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:600} .pagina_contacte #frm_contacte .btn_unificat.send:hover{background:var(--c-tan);color:var(--c-dark)} .pagina_contacte .right,.pagina_contacte .mapa_contacte{min-height:520px} .pagina_contacte .mapa_contacte{width:100%;height:100%} .pagina_contacte .right{position:relative} .pagina_contacte .right .inner{padding:70px 60px;box-sizing:border-box} .pagina_contacte .mapa_info_card{position:absolute;top:24px;right: 24px;z-index:400;background:var(--c-white);padding:22px 26px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-family:var(--f-sans);max-width:260px} .pagina_contacte .mic-row{font-size:14px;line-height:1.6;margin-bottom:6px;color:var(--c-text-dark)} .pagina_contacte .mic-row a{display:flex;align-items:center;gap:8px;color:var(--c-text-dark);text-decoration:none} .pagina_contacte .mic-row a:hover{color:var(--c-tan)} .pagina_contacte .mic-row i{font-size:14px;color:var(--c-tan);flex:0 0 auto} .pagina_contacte .mic-btn{display:block;text-align:center;margin-top:14px;background:var(--c-dark);color:var(--c-white);border:0;padding:12px 20px;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:600;text-decoration:none} .pagina_contacte .mic-btn:hover{background:var(--c-tan);color:var(--c-dark)} .pagina_contacte #frm_contacte .disclaimer,.pagina_contacte #frm_contacte .disclaimer *{color:var(--c-text-muted)!important} .pagina_contacte #frm_contacte .disclaimer{line-height:1.6} .pagina_contacte #frm_contacte .disclaimer p{margin:0 0 10px} .pagina_contacte #frm_contacte .disclaimer a{text-decoration:underline; margin-left: 0.5ex} .pagina_contacte #frm_contacte .legals{display:flex;flex-direction:column;gap:12px;margin-bottom:16px} .pagina_contacte #frm_contacte .punt_legal{display:flex;align-items:flex-start;gap:10px;color:var(--c-text-muted);font-size:12px;line-height:1.5} .pagina_contacte #frm_contacte .punt_legal,.pagina_contacte #frm_contacte .punt_legal *{color:var(--c-text-muted)} .pagina_contacte #frm_contacte .punt_legal a{text-decoration:underline} .pagina_contacte #frm_contacte .punt_legal input[type=checkbox]{flex:0 0 auto;margin-top:2px} /* ========================================================================== ESENCIALES (ajustos comentaris client jul-2026) ========================================================================== */ .caixa_continguts_categoria_esenciales{width: 100%;max-width: 100%; margin: 5% 0px 0%} .caixa_continguts_categoria_esenciales h1 {margin-bottom: 30px;} .caixa_panells_essencials .titol_panel_essencials{font-style:normal;margin-bottom: 10px;} .caixa_panells_essencials {max-width: var(--max-w);margin: 0 auto; padding: 0 var(--side-xl);} /* Aspecte "professional" (mibrasa.com/es/esenciales): foto de producte flotant mig sortint per sota de cada targeta de categoria. */ .llistat_cat_principal_esenciales{margin-bottom:110px;max-width: var(--max-w);margin: 0 auto;margin-bottom: 110px;padding: 0 var(--side-xl);} .llistat_cat_principal_esenciales a.single_cat_esenciales{position:relative} .llistat_cat_principal_esenciales a.single_cat_esenciales .ess-float-prod{position:absolute;left:50%;bottom:0;transform:translate(-50%,60%);width:70%;aspect-ratio:4/3;background-size:contain;background-repeat:no-repeat;background-position:center;z-index:2} /* Graella de categories: el min-height del h3 (estils.css) era mes alt que la tile i les files se sobreposaven. Aqui min-height 0 + 3 col / 2 col amb gap. */ .essencials_intro_desc{max-width:720px;margin: 0px auto 30px;text-align:center;font-size: 15px;line-height:1.7;color:var(--c-text)} .llistat_cat_esenciales .caixa_img{aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center} .llistat_cat_esenciales .caixa_img img{width:100%;height:100%;object-fit:contain} /* Tile de tab sense foto (categoria sense imatge assignada): fons fosc de fallback perque el h3 blanc es llegeixi. */ .llistat_cat_principal_esenciales a.single_cat_esenciales .part_superior{background-color:#232323} a.single_cat_esenciales{cursor:pointer;text-decoration:none} /* Popup d'accessori (click sobre una targeta -> imatge dalt gran + descripcio a sota). */ .popup_essencial{display:flex;flex-direction:column;gap:25px} .popup_essencial .popup_essencial_img{width:100%} .popup_essencial .popup_essencial_img img{width:100%;max-height:480px;height:auto;object-fit:contain} .popup_essencial .popup_essencial_desc{width:100%} .popup_essencial .popup_essencial_desc h3{font-family:'Open Sans Condensed';color:#040405;text-transform:uppercase;font-size:28px;line-height:1.2;margin-bottom:15px} .popup_essencial .popup_essencial_desc .text{font-family:'Open Sans';color:#040405;font-size:16px;line-height:1.5} /* Accordion de subcategories (Essencials): sense caixa/fons de jQuery UI, nomes linia + simbol +/- dibuixat en CSS. */ .accordion_esenciales .ui-accordion-header, .accordion_esenciales .ui-accordion-content{background:none;border:none;padding-left:0;padding-right:0;border-radius:0} .accordion_esenciales .ui-accordion-header{border-bottom:1px solid} .accordion_esenciales .titol_subcategoria_esenciales{position:relative;padding-right:45px;cursor:pointer} .accordion_esenciales .titol_subcategoria_esenciales::before, .accordion_esenciales .titol_subcategoria_esenciales::after{content:'';position:absolute;right:10px;top:50%;width:18px;height:2px;background:#000;transform:translateY(-50%);transition:transform 0.3s} .accordion_esenciales .titol_subcategoria_esenciales::after{transform:translateY(-50%) rotate(90deg)} .accordion_esenciales .titol_subcategoria_esenciales.ui-accordion-header-active::after{transform:translateY(-50%) rotate(0deg)} /* Mobiliario*/ .caixa_panells_essencials:has(#cat-36610.panel_essencials.actiu){ width: 100%; max-width: 100%; padding: 0px; } .caixa_text_mes_imatge.fons_negre{background-color:#232323} .caixa_text_mes_imatge.fons_negre .zona_text{color:#fff} .caixa_text_mes_imatge.fons_negre .zona_text h3{font-style:italic;font-weight:400} .caixa_text_mes_imatge.fons_negre .caixa_titol_centrat h3{color:#fff;font-style:italic} #cat-36610 .caixa_text_mes_imatge{padding-top:0;padding-bottom:0} #cat-36610 .caixa_text_mes_imatge .contenidor_centrat{width:100%;max-width:100%} /* FAQ (pag_faq.php) */ .pag-producte .pp-faq{padding:60px 0 90px} .pag-producte .pp-faq .pp-c{max-width:860px} .pag-producte .pp-faq-item{border-bottom:1px solid var(--c-border-light,#e5e1da)} .pag-producte .pp-faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 4px;cursor:pointer;font-family:var(--f-serif);font-size:20px;color:var(--c-text-dark);} .pag-producte .pp-faq-ico{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--c-border,#ddd);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--c-tan);transition:transform .25s ease} .pag-producte .pp-faq-item.pp-open .pp-faq-ico{transform:rotate(45deg)} .pag-producte .pp-faq-a{display:none;padding:0 4px 26px;color:var(--c-text);font-size:15px;line-height:1.7;max-width:720px} .pag-producte .pp-faq-item.pp-open .pp-faq-a{display:block} /* ========================================================================== RESPONSIVE - breakpoints consolidats: 1100px (laptop petit) / 900px (tablet) / 640px (mobile) ========================================================================== */ /* ---- laptop petit (<=1100px) ---- */ @media (max-width:1100px){ /* original: @media(max-width:1010px) */ .hdr-nav .nav-left,.hdr-nav .nav-right{display:none} .hdr-burger{display:block} .hdr-logo{padding:0} .hdr-top .tagline{display:none} /* original: @media(max-width:1100px) */ .hdr-top .hdr-c,.hdr-nav .hdr-c,.hdr-search-panel .hdr-c{padding-left:var(--side-xl);padding-right:var(--side-xl)} /* original: @media(max-width:1100px) */ .f-left .logo{height:150px} .f-main .footer-container{gap:60px;padding-left:var(--side-xl);padding-right:var(--side-xl)} .f-bottom .footer-container{padding-left:var(--side-xl);padding-right:var(--side-xl)} /* original: @media(max-width:1000px) */ .home-chefs .hcf-cell{min-height:400px} .home-chefs .hcf-txt{padding:48px} .home-chefs .hcf-txt p{font-size:24px} /* original: @media(max-width:1100px) */ .home-cats-intro{padding-left:var(--side-xl);padding-right:var(--side-xl)} .home-heritage{padding:72px var(--side-xl)} .home-kitchen{padding:70px var(--side-xl)} .home-cat-row .hc-txt h3{font-size:36px} .home-heritage .hh-head h1,.home-heritage .hh-head h2{font-size:40px} .home-kitchen h2{font-size:40px} .home-contact h2{font-size:40px} .home-contact .hco-inner{padding:70px var(--side-xl)} /* original: @media(max-width:1100px) */ /* marge lateral unic: el posa la section i .pp-c queda a 0 (si el posen tots dos es duplica i els blocs no s'alineen amb el header) */ .pag-producte section{padding-left:var(--side-xl);padding-right:var(--side-xl)} /* #pp-config i .pp-tabs son div/nav (no
) -> els cal el marge propi */ .pag-producte .pp-intro,.pag-producte #pp-config,.pag-producte .pp-tabs{padding-left:var(--side-xl);padding-right:var(--side-xl)} .pag-producte .pp-c{padding:0} .pag-producte .pp-big{font-size:68px} /* minmax(0,...) obligatori: sense ell les cards desborden horitzontalment (bug ja corregit una vegada) */ .pag-producte .pp-models-cards,.pag-producte .pp-models-specs-row{grid-template-columns:repeat(2,minmax(0,1fr))} /* mosaic BUILD a 2 col: a 5 la cel.la de text era massa estreta i el titol desbordava */ .pag-producte .pp-build-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:220px} .pag-producte .pp-b-fire,.pag-producte .pp-b-s1,.pag-producte .pp-b-s2,.pag-producte .pp-b-video,.pag-producte .pp-b-txt,.pag-producte .pp-b-weld,.pag-producte .pp-b-detail{grid-column:auto;grid-row:auto} .pag-producte .pp-b-txt{grid-column:1/-1;height:auto} /* original: @media(max-width:1100px) */ .contenidor_centrat.pp-kit-wrap{max-width:100%;padding-left:var(--side-xl);padding-right:var(--side-xl)} /* original: @media(max-width:1100px) */ /* nomes la pagina standalone; dins de producte el marge ja el posa la section */ .contenidor_centrat.pp-cc-wrap{max-width:100%;padding-left:var(--side-xl);padding-right:var(--side-xl)} /* tabs de xefs: en flex-wrap centrat queden escalonades (4+2) */ .pp-cc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px} .pp-cc-tab{border:1px solid var(--c-border);text-align:center} /* original: @media(max-width:1100px) */ #slide_home .slide .container .s{max-width:70%} #slide_home .slide .container .s .t{font-size:38px} /* original: @media screen and (max-width:1100px) */ .blog_home .llistat .b{width:100%;padding-right:0} .blog_home .container_web{display:flex;flex-direction:column;padding-left:5%;padding-right:5%} .blog_home .titol_destacat{padding-left:5%;padding-right:5%;font-size:14px} .blog_home .titol_destacat h2{font-weight:500;font-size:30px} .blog_home .b .t{padding-top:5%} .blog_home .b .t h4{font-size:16px} .blog_home .b .t .btn_unificat{max-width:50%} .blog_page.qsc{padding-left:var(--side-xl);padding-right:var(--side-xl)} /* original: @media(max-width:1100px) */ .blog_page.qsc .qsc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .blog_page.qsc .titol_destacat{font-size:40px} /* original: @media screen and (max-width:1010px) */ .banner_home .container_web,.banner_pag_categoria .container_web{padding:0 25px} /* original: @media(max-width:1100px) */ .pagina_contacte .left .inner{padding:56px var(--side-xl)} .pagina_contacte h1{font-size:40px} .pagina_contacte .right .inner{padding:56px var(--side-xl)} /* original: @media(max-width:1100px) */ /* el max-width:98% del contenidor deixava 4-8px de marge, desalineat amb el header */ .caixa_continguts_categoria_esenciales,.caixa_continguts_subcategoria_esenciales>.contenidor_centrat{max-width:100%;padding-left:var(--side-xl);padding-right:var(--side-xl);box-sizing:border-box} .llistat_cat_principal_esenciales{flex-wrap:wrap;justify-content:center;gap:14px;padding-left:0;padding-right:0;margin-top:44px} .llistat_cat_principal_esenciales a.single_cat_esenciales{width:calc(33.333% - 10px)} .llistat_cat_principal_esenciales a.single_cat_esenciales .part_superior h3{font-size:16px;min-height:0;padding:0 8px} } /* ---- tablet (<=900px) ---- */ @media (max-width:900px){ /* original: @media(max-width:800px) */ .hdr-top .hdr-c,.hdr-nav .hdr-c,.hdr-search-panel .hdr-c{padding-left:var(--side-md);padding-right:var(--side-md)} /* original: @media(max-width:800px) */ .f-main .footer-container{flex-direction:column;gap:32px} .f-news{flex-direction:column;align-items:flex-start} .f-cols{gap:28px} .f-right{min-width:0;width:100%} .f-news .row{flex-wrap:wrap} .f-news input[type=email]{min-width:120px} .f-news button{padding:11px 16px;width: 100%;} /* original: @media(max-width:800px) */ .f-main .footer-container,.f-bottom .footer-container{padding-left:var(--side-md);padding-right:var(--side-md)} /* original: @media(max-width:800px) */ .home-cat-row,.home-cat-row.rev{flex-direction:column} .home-cat-row .hc-img,.home-cat-row .hc-txt{flex:1 1 auto} .home-cat-row .hc-img{min-height:260px} .home-cats-intro h1,.home-cats-intro h2{font-size:32px} .home-cat-row .hc-txt h3{font-size:34px} .home-heritage .hh-cols{flex-direction:column;gap:30px} .home-kitchen .hk-grid{flex-wrap:wrap;gap:20px} .home-kitchen .hk-card{flex:1 1 45%} .home-contact{flex-direction:column} .home-contact .hco-img{flex:none;min-height:240px} .home-contact button{width:100%} /* tabs en graella 2 col: amb flex-wrap centrat queden escalonades */ .hc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .hc-tabs .hc-tab{padding:11px 10px;text-align:center;letter-spacing:1px} /* original: @media(max-width:700px) */ .home-chefs .hcf-titleband h2{font-size:32px} .home-chefs .hcf-cell{width:100%;min-height:250px} .home-chefs .hcf-photo{min-height:360px} .home-chefs .hcf-txt{padding:40px 30px} .home-chefs .hcf-txt p{font-size:21px;max-width:none} .home-chefs .hcf-txt--right,.home-chefs .hcf-txt--left{align-items:center} .home-chefs .hcf-txt--right p,.home-chefs .hcf-txt--left p{text-align:center} /* original: @media(max-width:800px) */ /* va despres del @1100: repetir aqui els selectors tocats alla */ .home-cats-intro{padding-left:var(--side-md);padding-right:var(--side-md)} .home-heritage{padding:56px var(--side-md)} .home-kitchen{padding:56px var(--side-md)} .home-contact .hco-inner{padding:48px var(--side-md)} .home-chefs .hcf-titleband{padding-left:var(--side-md);padding-right:var(--side-md)} .home-chefs .hcf-titleband h2{font-size:28px} .home-contact h2{font-size:32px} /* original: @media(max-width:900px) */ .pag-producte .pp-intro-body{flex-direction:column} .pag-producte .pp-big{font-size:54px} .pag-producte .pp-intro-left{order:2} /* .pp-intro-body es columna amb align-items:center -> els fills prenen l'amplada del CONTINGUT. El model-viewer (.pp-mv, max-width:500px) forcava 500px dins de 375px i feia scroll horitzontal a la pagina (mesurat: 438px de scrollWidth a 375). min-width:0 permet encongir el flex item. */ .pag-producte .pp-intro-right{order:1;margin-bottom:20px;width:100%;max-width:100%;min-width:0} .pag-producte .pp-mv,.pag-producte .pp-render{max-width:100%;min-width:0} .pag-producte .pp-360{top:0} .pag-producte .pp-og-grid{grid-template-columns:1fr;gap:24px} .pag-producte .pp-og-main img{min-height:340px} .pag-producte .pp-func-grid{grid-template-columns:1fr;gap:28px} .pag-producte .pp-build-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:170px} .pag-producte .pp-b-fire,.pag-producte .pp-b-s1,.pag-producte .pp-b-s2,.pag-producte .pp-b-video,.pag-producte .pp-b-txt,.pag-producte .pp-b-weld,.pag-producte .pp-b-detail{grid-column:auto;grid-row:auto} .pag-producte .pp-b-txt{grid-column:1/-1;height:auto} .pag-producte .pp-models-intro{grid-template-columns:1fr;text-align:center} /* les 2 columnes centrades igual (abans nomes ho estava la primera) */ .pag-producte .pp-mi-left,.pag-producte .pp-mi-right{text-align:center} /* original: @media(max-width:800px) */ .pag-producte section{padding-left:var(--side-md);padding-right:var(--side-md)} .pag-producte .pp-intro,.pag-producte #pp-config,.pag-producte .pp-tabs{padding-left:var(--side-md);padding-right:var(--side-md)} .pag-producte .pp-c{padding:0} /* overlines de seccio: letter-spacing 8px desbordava la caixa a 390px */ .pag-producte .pp-h-over{font-size:18px;letter-spacing:4px;overflow-wrap:break-word} .pag-producte .pp-intro-head h1{font-size:32px} .pag-producte .pp-big{font-size:44px;padding-left:.5em;text-indent:-.6em} .pag-producte .pp-desc{font-size:14px} .pag-producte .pp-conf-row::before{display:none} .pag-producte .pp-models-cards,.pag-producte .pp-models-specs-row{grid-template-columns:1fr} .pag-producte .pp-mcard-head h4{font-size:22px} .pag-producte .pp-spec-row{font-size:15px} .pag-producte .pp-chef-name{font-size:26px} .pag-producte .pp-chef-rest,.pag-producte .pp-chef-loc{font-size:16px} .pag-producte .pp-conf-fam-card{flex:1 1 100%} /* el marge lateral el posa la pagina; sense aixo les cards queden 15px endins */ .configurator .right-panel{padding-left:0;padding-right:0} /* cards de talla a 1 columna: a 2 (48%, base d'estils.css) el text no hi cap */ .configurator .caixa_select_modelo .estil_radio{width:100%} .configurator .caixa_select_modelo span{width:auto} /* original: @media(max-width:900px) */ .pp-her-hero{height:38vh;min-height:260px} .pp-her-row,.pp-her-row.rev{flex-direction:column;min-height:0} .pp-her-row-img{flex:1 1 auto;height:280px} .pp-her-row-txt-inner{max-width:none;padding:40px 24px} /* original: @media(max-width:900px) */ .pp-et-cell{flex:1 1 45%} /* original: @media(max-width:900px) */ .pp-kit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} /* original: @media(max-width:800px) */ .contenidor_centrat.pp-kit-wrap{padding-left:var(--side-md);padding-right:var(--side-md)} /* original: @media(max-width:900px) */ .pp-cc-panel.pp-active{grid-template-columns:1fr} .pp-cc-stack{flex-direction:row;height:220px} .pp-cc-chefpanel{grid-template-columns:1fr} .pp-cc-photo{min-height:320px} .pp-cc-info{padding:26px 24px 36px} .pp-cc-quote{font-size:24px} /* original: @media(max-width:800px) */ .contenidor_centrat.pp-cc-wrap{padding-left:var(--side-md);padding-right:var(--side-md)} .pp-cc-tabs{grid-template-columns:1fr} /* original: @media(max-width:900px) */ .pp-cc-teaser{grid-template-columns:1fr;min-height:0} .pp-cc-teaser-info{padding:40px var(--side-md)} .pp-cc-teaser-photo{min-height:260px} /* original: @media all and (max-width:768px) */ .titol_home{font-size:25px} #slide_home .slide .container .d{max-width:none} #slide_home .slide .container{height:30vh} #slide_home .slide .container .s{padding-left:1%;padding-right:1%;max-width:100%;z-index:9999} #slide_home .slide .container a{font-size:14px;margin-top:0;max-width:120px} #slide_home .slide .container .caixa_fletxa{display:none} .banners_mobil #slide_home .slide{padding-bottom:110%;overflow:hidden} .banners_mobil .slide video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;width:initial} .container.blackfriday{bottom:16%!important;color:var(--c-black)!important} #slide_home .slide .container.blackfriday .s p{color:var(--c-black)!important} #slide_home .slide .container .s .t{font-size:30px} #slide_home .slide .container .s .st{font-size:12px} #slide_home .caixa_video_slide_home,#slide_home .caixa_img_slide{padding:0;aspect-ratio:4/5} #slide_home .caixa_video_slide_home iframe{top:0;left:0;transform:none;width:100%;height:100%;min-height:0} /* original: @media(max-width:900px) */ .blog_page.qsc .titol_destacat{font-size:34px} /* original: @media(max-width:800px) */ .blog_page.qsc{padding-left:var(--side-md);padding-right:var(--side-md)} .blog_page.qsc .qsc-t{font-size:14px} /* original: @media all and (max-width:768px) */ .banner_home .container_web .t{font-size:25px} .banner_home .container_web .d{font-size:16px} .banner_home .container_web{padding:50px 25px;min-height:inherit} .banner_pag_categoria .container_web .t{font-size:25px} .banner_pag_categoria .container_web .d{font-size:25px;line-height:1.8} .banner_pag_categoria .container_web{padding:50px 0;min-height:inherit;background-color:rgba(0,0,0,.4)} .banner_pag_categoria .container_web .d span{padding-left:2%;padding-right:10%} .banner_pag_categoria .container_web .titol_img_boto img,.video_banner_pag_cat .titol_img_boto img{max-width:80px;margin-bottom:0} .banner_pag_categoria .container_web .titol_img_boto .st{font-size:15px} .banner_pag_categoria .container_web .titol_img_boto .t{font-size:50px} .banner_pag_categoria.banner_cat_principal .container_web .titol_img_boto{max-width:95%} /* original: @media(max-width:800px) */ .pagina_contacte{flex-direction:column-reverse} .pagina_contacte .left,.pagina_contacte .right{width:100%} .pagina_contacte .left .inner{padding:40px var(--side-md)} .pagina_contacte h1{font-size:32px} .pagina_contacte .right,.pagina_contacte .mapa_contacte{min-height:340px} .pagina_contacte .right .inner{padding:40px var(--side-md)} .pagina_contacte .mapa_info_card{top:16px;left:16px;padding:16px 18px;max-width:210px} /* original: @media(max-width:800px) */ .caixa_continguts_categoria_esenciales,.caixa_continguts_subcategoria_esenciales>.contenidor_centrat{padding-left:var(--side-md);padding-right:var(--side-md)} .llistat_cat_principal_esenciales{gap:12px;padding-left:0;padding-right:0;margin-top:32px} .llistat_cat_principal_esenciales a.single_cat_esenciales{width:calc(50% - 6px);aspect-ratio:4/3} .llistat_cat_principal_esenciales a.single_cat_esenciales .part_superior h3{font-size:14px} /* original: @media(max-width:800px) */ .accordion_esenciales .titol_subcategoria_esenciales::before, .accordion_esenciales .titol_subcategoria_esenciales::after{width:14px} /* original: @media(max-width:800px) */ .pag-producte .pp-faq-q{font-size:17px;padding:20px 2px} } /* ---- mobile (<=640px) ---- */ @media (max-width:640px){ /* original: @media(max-width:600px) */ .home-contact .hco-row{flex-direction:column} /* original: @media(max-width:500px) */ .home-kitchen .hk-card{flex:1 1 100%} /* original: @media(max-width:640px) */ .pag-producte .pp-conf-fam-card{min-width:0;flex:1 1 45%} /* original: @media(max-width:560px) */ .pp-et-cell{flex:1 1 100%} /* original: @media(max-width:560px) */ .pp-kit-grid{grid-template-columns:minmax(0,1fr)} /* original: @media all and (max-width:630px) */ .banners_mobil_630 #slide_home .slide{padding-bottom:110%;overflow:hidden} .banners_mobil_630 .slide video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;width:initial} .banners_mobil_630 #slide_home{background:var(--c-white)!important} .banners_mobil_630 #slide_home .container .s p{margin-top:20px;margin-bottom:20px;font-family:'Source Sans Pro'!important;font-size:15px;font-weight:normal!important;color:var(--c-black)!important} .banners_mobil_630 #slide_home .container .s{font-size:35px;font-weight:bold;line-height:1.2;margin-bottom:25px;font-family:'Oswald';margin:20px;color:var(--c-black)!important} .banners_mobil_630 #slide_home .container .s .btn_unificat{margin-top:20px;margin-bottom:20px;font-family:'Source Sans Pro'!important;font-size:15px;font-weight:bold} #slide_home .owl-prev,#slide_home .owl-next{top:30%} /* original: @media all and (max-width:500px) */ #slide_home .slide .container .s{font-size:25px} /* original: @media(max-width:560px) */ .blog_page.qsc .qsc-grid{grid-template-columns:minmax(0,1fr)} }