/* ==========================================================================
   2026-disto-unificat-01.css

   Fusio de tres fulls que sempre es carregaven junts i en aquest ordre:
     1. 2026-disto-01.css                (peu corporatiu, fitxes de cataleg, pdf-banner)
     2. 2026-disto-capcalera-menu-01.css (barra superior, cercador, menu)
     3. 2026-disto-intro-01.css          (contenidors, graelles, targetes, carro mobil)

   Que s'ha canviat respecte de la suma dels tres:
   - Duplicats: .disto-page__search-box form, .disto-page__search-button i
     .disto-page__search-button .disto-page__search-icon hi eren dos cops. Es
     conserva la versio de la capcalera, que es la que manava per ordre de carrega.
   - Hi havia un @media 1024 escrit DESPRES del de 768. En una pantalla de 700px
     casen tots dos i guanyava el darrer, o sigui que .productes-grid sortia a 4
     columnes en mobil en lloc de 2. Els breakpoints ara van de gran a petit
     (1024 > 900 > 768 > 600 > 480) i el comportament es el previst.
   - Hi havia un @media 768 imbricat dins del de 1024. S'ha aplanat.
   - Els blocs @media repetits del mateix ample s'han ajuntat, respectant l'ordre
     original perque les regles que es trepitjaven segueixin guanyant igual.
   - Comentaris reescrits sense accents: els originals barrejaven dues
     codificacions i es veien trencats.

   Nota de desplegament: el bloc "FITXES DE CATALEG" i el "PEU CORPORATIU" venen
   de 2026-disto-01.css, que nomes carregaven 40 pagines. Hi ha 18 selectors que
   tambe son a 2026-disto-style-35.css.
   ========================================================================== */


/* ==========================================================================
   1. BASE
   ========================================================================== */

.disto-page{background:#fff;color:#222;}
.disto-page,.disto-page div,.disto-page nav,.disto-page ul,.disto-page li,.disto-page a,.disto-page p,.disto-page img,.disto-page input,.disto-page label{box-sizing:border-box;}
.disto-page img{border:0;max-width:100%;height:auto;}
.disto-page__site{margin:0 auto;background:#fff;}


/* ==========================================================================
   2. BARRA SUPERIOR
   ========================================================================== */

.disto-page__topbar{position:fixed;z-index:1200;width:100%;min-height:28px;line-height:28px;background:#d60000;}
.disto-page__topbar-inner{max-width:1046px;margin:0 auto;padding:0 11px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;font:11px Arial,Helvetica,sans-serif;color:#fff;}
.disto-page__links{display:flex;flex-wrap:wrap;align-items:center;width:100%}
.disto-page__links-item{position:relative;list-style:none;background:#d60000;}
.disto-page__links-item::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:60%;background:#fff;}
.disto-page__links-item:last-child::after{display:none;}
.disto-page__links-item a{display:block;padding:6px 13px;color:#fff;text-decoration:none;font-size:13px;line-height:1.2;white-space:nowrap;}
.disto-page__links-item a:hover{background:#640012;}

.link-shop-carro{margin-left:auto;display:inline-flex;align-items:center;gap:8px;}
.cart-count-text{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:#c00000;font-weight:700;font-size:11px;line-height:1;flex-shrink:0;}


/* ==========================================================================
   3. CERCADOR
   ========================================================================== */

.disto-page__searchbar{background:#e6e6e6;padding:40px 0 5px;}
.disto-page__searchbar-inner{max-width:1046px;margin:0 auto;padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font:11px Verdana,Arial,sans-serif;color:#626262;}
.disto-page__search-box{position:relative;margin:10px auto;max-width:330px;width:100%;}
.disto-page__search-box form{position:relative;margin:0;}
.disto-page__search-input{width:100%;height:36px;padding:0 42px 0 12px;border:1px solid #999;font:15px Verdana,Tahoma,sans-serif;outline:0;}
.disto-page__search-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:24px;height:24px;}
.disto-page__search-button{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;padding:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.disto-page__search-button .disto-page__search-icon{position:static;transform:none;width:24px;height:24px;}
.disto-page__dealer{max-width:330px;}


/* ==========================================================================
   4. RESULTATS DE CERCA EN VIU
   ========================================================================== */

#disto-live-results{display:none;position:absolute;left:50%;right:auto;top:calc(100% + 4px);transform:translateX(-50%);z-index:99999;width:min(560px,calc(100vw - 24px));background:#fff;border:1px solid #bbb;box-shadow:0 8px 22px rgba(0,0,0,.22);max-height:72vh;overflow:auto;text-align:left;font-family:Arial,Helvetica,sans-serif;color:#333;}
#disto-live-results a{color:inherit;text-decoration:none;}
#disto-live-results .resultats-info{margin:8px 10px 10px;text-align:center;font-size:15px;line-height:1.25;color:#333;}
#disto-live-results .live-layout,#disto-live-results .live-layout-products{display:block!important;width:100%!important;}
#disto-live-results .live-left{display:none!important;}
#disto-live-results .live-main{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
#disto-live-results #resultats-wrap-live{display:block!important;width:100%!important;margin:0!important;padding:0!important;}
#disto-live-results .card-producte{display:grid!important;grid-template-columns:74px 1fr!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:84px!important;margin:0!important;padding:8px 10px!important;border:0!important;border-bottom:1px solid #e5e5e5!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;}
#disto-live-results .card-producte:hover{background:#f7f7f7!important;}
#disto-live-results .card-producte .card-img{display:flex!important;align-items:center!important;justify-content:center!important;width:74px!important;height:74px!important;min-width:74px!important;max-width:74px!important;overflow:hidden!important;background:#fff!important;}
#disto-live-results .card-producte .card-img img{display:block!important;width:74px!important;height:74px!important;max-width:74px!important;max-height:74px!important;object-fit:contain!important;}
#disto-live-results .card-info{display:block!important;min-width:0!important;padding:0!important;margin:0!important;}
#disto-live-results .card-top,#disto-live-results .card-bottom,#disto-live-results .card-text{display:block!important;margin:0!important;padding:0!important;}
#disto-live-results .ref{display:block!important;margin:0 0 3px!important;font-size:12px!important;line-height:1.2!important;font-weight:700!important;color:#244a7f!important;}
#disto-live-results .titol{display:block!important;font-size:14px!important;line-height:1.2!important;font-weight:700!important;color:#333!important;}
#disto-live-results .live-preu{font-size:12px!important;line-height:1.2!important;margin-top:4px!important;color:#222!important;}
#disto-live-results .boto-carro,#disto-live-results .carro-ico{display:none!important;}
#disto-live-results .descatalogat{font-size:10px!important;line-height:1.2!important;color:#777!important;margin-top:4px!important;}
#disto-live-results .highlight-live{background:#fff27a!important;padding:0 2px!important;}

#ajax_listOfOptions,
#ajax_listOfOptions_iframe{z-index:9999 !important;}


/* ==========================================================================
   5. MENU
   ========================================================================== */

.menu-container33{position:relative;background:transparent;margin:0;padding:0;}
#menu-toggle{display:none;}
.menu-icon{display:none;}
nav.menu{width:100%;box-sizing:border-box;background:#f9f9f9;border-bottom:1px solid #ccc;position:relative;z-index:1000;font-family:Arial,sans-serif;}
nav.menu ul{list-style:none;margin:0;padding:0;}
nav.menu > ul{display:flex;justify-content:center;width:100%;}
nav.menu > ul > li{position:relative;}
nav.menu > ul > li > a{display:block;padding:10px 14px;font-size:14px;font-weight:500;color:#444;text-decoration:none;position:relative;transition:color .3s,background .3s;}
nav.menu > ul > li:not(:last-child) > a::after{content:"";position:absolute;right:0;top:25%;height:50%;width:1px;background:#ddd;}
nav.menu > ul > li > a:hover{background:#d60000;color:#fff;}

/* submenus d'escriptori */
nav.menu li ul{display:none;position:absolute;top:100%;left:0;background:#fefefe;min-width:290px;border:1px solid #888;box-shadow:0 10px 30px rgba(0,0,0,.3);flex-direction:column;z-index:1000;}
nav.menu li:hover > ul{display:flex;}
nav.menu li ul li{position:relative;}
nav.menu li ul li a{display:flex;align-items:center;gap:10px;padding:9px 18px;min-height:26px;font-size:15px;color:#555;text-decoration:none;width:100%;box-sizing:border-box;border-bottom:1px solid #ddd;transition:background .3s,color .3s;}
nav.menu li ul li a:hover{background:#f2f2f2;color:#c00000;}
nav.menu li ul li:first-child > a{background:#d0d0d0;font-weight:700;}
nav.menu li ul li ul{display:none;position:absolute;top:0;left:100%;min-width:260px;background:#fff;border:1px solid #ddd;box-shadow:0 4px 12px rgba(0,0,0,.08);}
nav.menu li ul li:hover > ul{display:flex;flex-direction:column;}

/* panell ample alineat a la dreta */
nav.menu li.mega-right > ul{right:20px;left:auto;width:60vw;max-width:800px;min-width:400px;flex-wrap:wrap;flex-direction:row;padding:10px;box-sizing:border-box;}
nav.menu li.mega-right > ul > li{width:25%;box-sizing:border-box;}

/* mega menu de drons */
nav.menu li.mega-drones{position:relative;}
nav.menu li.mega-drones > ul.mega-panel{display:none;position:fixed;top:170px;left:50%;transform:translateX(-50%);width:920px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #888;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:0;box-sizing:border-box;grid-template-columns:1fr 1fr;gap:12px;}
nav.menu li.mega-drones:hover > ul.mega-panel{display:grid;}
nav.menu li.mega-drones > ul.mega-panel > li.mega-col{min-width:0;}
nav.menu li.mega-drones ul.mega-list{display:flex;flex-direction:column;position:static;border:0;box-shadow:none;min-width:0;}
nav.menu li.mega-drones ul.mega-list > li > a{border-bottom:1px solid #ddd;}

.menu-img{width:44px;height:44px;object-fit:contain;flex-shrink:0;margin:0;}


/* ==========================================================================
   6. ESTRUCTURA DE LA PAGINA
   ========================================================================== */

#site{display:flex;flex-direction:column;min-height:100vh;}

#contingut2,
#contingut{padding-bottom:10px;position:relative;z-index:1;}

#contingut2{width:100%;background-color:#FFF;margin-top:0;}
#contingut{margin:0 auto;width:1046px;height:auto;}

.contenidor-1050{
  width:100%;
  max-width:1050px;
  margin:0 auto;
  padding:0 15px;
  background-color:#fff;
  display:flex;
  flex-wrap:wrap;
  box-sizing:border-box;
  overflow-x:hidden;        /* evita desbordament horitzontal del contingut intern */
}

.contenidor-1050 *,
.contenidor-1050 *::before,
.contenidor-1050 *::after{box-sizing:border-box;max-width:100%;overflow-wrap:break-word;word-break:break-word;}

.contenidor-1050 img,
.contenidor-1050 table,
.contenidor-1050 iframe{max-width:100%;height:auto;display:block;}

.barra-intro{height:27px;background-color:#fff;}

.intro17,
.intro17 *{max-width:100% !important;overflow-wrap:break-word;}


/* ==========================================================================
   7. ZONA DE BANNER
   ========================================================================== */

.banner-zone{position:relative;overflow:hidden;}
.banner-zone:has(> *){min-height:250px;}  /* nomes reserva espai si te contingut */
.banner-zone::after{content:"";display:block;clear:both;}


/* ==========================================================================
   8. BLOCS D'INTRODUCCIO PER SECTORS
   ========================================================================== */

.instop-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:1050px;margin:0 auto;}
.instop-grid > *{box-sizing:border-box;min-width:0;overflow-x:auto;}

.instop-item{
  display:flex;
  flex-direction:row;
  background:#f5f5f5;
  border-radius:0 16px 16px 0;   /* nomes les cantonades de la dreta */
  overflow:hidden;
  box-shadow:0 0 8px rgba(0,0,0,0.1);
  width:calc(50% - 10px);
  min-height:150px;
  transition:box-shadow 0.3s ease,transform 0.3s ease;
}
.instop-item:hover{box-shadow:0 10px 24px rgba(0,0,0,0.2);transform:translateY(-2px);}

.instop-item140{
  display:flex;
  flex-direction:row;
  background:#f5f5f5;
  border-radius:0 16px 16px 0;
  overflow:hidden;
  box-shadow:0 0 8px rgba(0,0,0,0.1);
  width:calc(50% - 10px);
  min-height:140px;
  transition:box-shadow 0.3s ease,transform 0.3s ease;
  align-items:stretch;
}
.instop-item140:hover{box-shadow:0 10px 24px rgba(0,0,0,0.2);transform:translateY(-2px);}

.instop-img125{
  width:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f5f5f5;
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
  height:100%;
}
.instop-img125 img{max-width:100%;max-height:100%;object-fit:contain;display:block;overflow:visible;}
.instop-item140:hover .instop-img125{background-color:#e0e0e0;transition:background-color 0.3s ease;}
.instop-item140.sense-arrodonit-esquerra .instop-img125{border-top-left-radius:0;border-bottom-left-radius:0;}

.instop-img{flex:0 0 200px;display:flex;align-items:center;justify-content:center;background:#fff;}
.instop-img img{display:block;width:100%;height:auto;border-radius:0;}

.instop-text{padding:16px;flex:1;background-color:#fff;}
.instop-text.dreta{border-top-right-radius:16px;border-bottom-right-radius:16px;}


/* ==========================================================================
   9. GRAELLES I TARGETES DE PRODUCTE
   ========================================================================== */

.productes-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px 30px;
  justify-content:center;
  max-width:1050px;
  margin:0 auto;
  box-sizing:border-box;
  padding:20px 10px;
}
.producte{display:flex;flex-direction:column;align-items:center;max-width:200px;}
.producte .titol-Porducte10{font-size:16px;font-weight:bold;color:#000;margin-top:8px;margin-bottom:4px;}
.producte .normal{font-size:13px;color:#333;line-height:1.4;}

/* contenidor generic per a 1 o 2 per fila */
.productes-flexline,
.grup-productes-dos{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin:20px 0;}
.productes-flexline{justify-content:flex-start;}

.producte-flex{
  display:flex;
  flex-direction:row;
  align-items:center;
  background-color:#EEEEEE;
  padding:12px;
  text-decoration:none;
  color:inherit;
  transition:background-color 0.3s ease,box-shadow 0.3s ease;
}
.producte-flex:hover{background-color:#e0e0e0;box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.productes-flexline .producte-flex{flex:1 1 calc(30%);min-width:280px;}   /* 3 per linia */
.grup-productes-dos .producte-flex{flex:1 1 44%;min-width:280px;}         /* 2 per linia */
.producte-flex img{width:125px;height:125px;object-fit:contain;margin-right:16px;flex-shrink:0;}
.producte-flex img.standard{width:125px;height:125px;}
.producte-flex img.wide{width:250px;height:123px;}
.producte-flex .info{display:flex;flex-direction:column;justify-content:center;}

/* factors d'equips */
.factors-flexline{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:20px auto;max-width:1050px;}
.factor-flex{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:130px;
  padding:12px;
  background-color:#fff;
  border:1px solid #ddd;
  text-decoration:none;
  color:inherit;
  transition:box-shadow .3s ease,transform .3s ease;
}
.factor-flex:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px);}
.factor-flex img{width:90px;height:90px;object-fit:contain;margin-bottom:8px;}
.factor-flex .normal{text-align:center;font-size:12px;line-height:1.4;}

/* casos d'estudi */
.factors-grid-casos{display:flex;flex-wrap:wrap;gap:24px;justify-content:flex-start;max-width:1100px;margin:20px auto;}
.caso-flex{display:flex;flex-direction:column;align-items:center;width:250px;text-align:center;text-decoration:none;color:inherit;transition:transform 0.2s ease,box-shadow 0.2s ease;}
.caso-flex:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.caso-flex img{width:250px;height:auto;border:1px solid #ccc;margin-bottom:8px;}
.caso-flex p{margin:0;padding:0 8px;}

/* imatge amb canvi al passar el cursor */
.contenedor{
  position:relative;
  max-width:180px;
  width:100%;
  max-height:200px;
  overflow:hidden;
  border-radius:12px;
  transition:box-shadow 0.3s ease;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fff;
  aspect-ratio:unset !important;
}
.contenedor:hover{box-shadow:0 8px 20px rgba(0,0,0,0.3);}
.contenedor img{width:100%;height:auto;object-fit:contain;position:relative;transition:opacity 0.3s ease;border-radius:12px;}
.contenedor img.img-hover{position:absolute;top:0;left:0;opacity:0;}
.contenedor:hover img.img-hover{opacity:1;}
.contenedor:hover img.img-default{opacity:0;}

.grid-accessoris{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:1050px;margin:auto;}
.bloc-accessori{width:230px;flex:1 1 230px;text-align:center;}


/* ==========================================================================
   10. FITXES DE CATALEG
   Ve de 2026-disto-01.css. 18 d'aquests selectors tambe son a
   2026-disto-style-35.css; vegeu la nota de desplegament de dalt.
   ========================================================================== */

#titol_items2{font-family:Arial,Helvetica,sans-serif;color:#333;font-size:22px;font-weight:bold;padding-left:25px;margin-bottom:20px;float:left;width:625px;}
#nomCat{font-family:Arial,Helvetica,sans-serif;color:#333;font-size:22px;font-weight:bold;padding-left:25px;margin-bottom:20px;float:left;width:1000px;margin-top:10px;}

#item{float:left;width:180px;margin-left:20px;margin-bottom:20px;border:#CCC solid;border-width:1px;height:265px;border-radius:10px;}
.imatge_producte{padding:5px 8px 0 7px;cursor:pointer;}
.referencia{font-size:13px;font-weight:bold;width:170px;padding:5px;text-align:center;border-bottom:#E2E2E2 solid 1px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}
.nom_producte{font-size:11px;text-align:center;width:170px;height:30px;padding:2px 5px;border-bottom:#E2E2E2 solid 1px;line-height:14px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}
.preu_producte{font-size:18px;font-weight:bold;width:120px;text-align:right;padding:7px 0 0 5px;float:left;font-family:Arial,Helvetica,sans-serif;}
.carro_compra{padding-left:10px;padding-top:8px;}

#item_2{float:left;width:190px;margin-left:14px;margin-bottom:14px;height:315px;}
#item_2:hover{background-color:#DDDDDD;}
.imatge_producte_2{padding:5px 0 2px 5px;cursor:pointer;}
.referencia_2{font-size:12px;font-weight:bold;width:180px;padding:4px 5px 3px 5px;text-align:center;border-bottom:#E2E2E2 solid 1px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}
.nom_producte_2{font-size:12px;text-align:center;width:180px;height:40px;padding:4px 5px 2px 5px;border-bottom:#E2E2E2 solid 1px;line-height:12px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}
.preu_producte_2{font-size:15px;font-weight:bold;width:120px;text-align:right;padding:7px 0 0 5px;float:left;font-family:Arial,Helvetica,sans-serif;}
.carro_compra_2{padding-left:20px;padding-top:6px;}

#marc33{float:left;width:235px;margin-left:20px;margin-bottom:20px;height:380px;}
#marc3{float:left;width:235px;margin-left:20px;margin-bottom:20px;height:445px;}
.nom_producte3{font-size:15px;text-align:center;width:225px;height:35px;padding:3px 5px;border-bottom:#E2E2E2 solid 1px;border-top:#E2E2E2 solid 1px;line-height:17px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;font-weight:bold;margin-top:10px;}
.preu_producte3{font-size:18px;font-weight:bold;width:140px;text-align:right;padding:7px 12px 0 5px;float:left;font-family:Arial,Helvetica,sans-serif;}
.carro_compra3{padding-left:10px;padding-top:8px;}
.atribut{font-size:12px;width:80px;text-align:left;padding:4px 12px 3px 5px;float:left;font-family:Arial,Helvetica,sans-serif;}
.valor{font-size:12px;width:110px;text-align:left;padding:4px 5px 3px 5px;float:left;font-family:Arial,Helvetica,sans-serif;}
.stock3{font-size:14px;text-align:center;width:200px;height:25px;padding:8px 20px 3px 20px;line-height:14px;font-family:Arial,Helvetica,sans-serif;cursor:pointer;}

hr.separador-lleuger{border:none;height:1px;background-color:#fff;margin:40px auto;width:80%;}


/* ==========================================================================
   11. BANNER DE PDF
   ========================================================================== */

.pdf-banner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;max-width:1046px;margin:40px auto;padding:20px 10px;font-family:Arial,sans-serif;}
.pdf-banner .bloc{flex:1 1 22%;max-width:22%;text-align:center;}
.pdf-banner .bloc img{width:100%;height:auto;max-height:150px;object-fit:contain;}
.pdf-banner .bloc-text{flex:1 1 100%;max-width:100%;text-align:center;font-size:14px;line-height:1.5;margin-top:10px;padding:0 10px;}
.pdf-banner .bloc-text strong{color:#d00;font-weight:bold;font-size:16px;}
.pdf-banner .bloc-text span.normal-REF{color:#333;}
.pdf-banner .bloc-text span.normal-centre{font-size:13px;color:#555;}


/* ==========================================================================
   12. PEU CORPORATIU
   Ve de 2026-disto-01.css.
   ========================================================================== */

#atencio_client{margin:0 auto;width:1046px;height:25px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;color:#F00;padding-top:5px;}
#franja_roja{width:100%;background-color:#F00;height:3px;}

#footer5{width:100%;height:370px;background-color:#CCC;}
#footer5 a,
#footer5 a:link,
#footer5 a:visited,
#footer5 a:hover{color:#333;text-decoration:none;}
#corporatiu_footer{margin:0 auto;width:1046px;height:370px;}
#footer{width:1046px;background-color:#CCC;}

.empresa_footer{width:330px;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;color:#333;line-height:18px;display:block;float:left;padding:5px 0 10px 15px;}
.empresa_footer2{width:100%;padding:5px 0 5px 10px;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;color:#333;line-height:18px;float:left;}
.barra_swiss{margin:0;background:#FFF;padding-top:5px;}
.texte_footer{margin:5px 10px;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9px;color:#333;text-align:justify;line-height:14px;}
.separador_footer{margin:0 8px;}

#barra_inferior{background-color:#333;width:100%;height:20px;color:#FFF;font-size:10px;font-family:Verdana,Geneva,sans-serif;}
#barra_inferior a,
#barra_inferior a:link,
#barra_inferior a:visited,
#barra_inferior a:hover{color:#FFF;text-decoration:none;}
.copyright{width:1046px;margin:0 auto;text-align:left;padding-top:2px;}


/* ==========================================================================
   13. CARRO FLOTANT DE MOBIL
   ========================================================================== */

@media screen and (max-width:768px){
  #cart-panel{
    position:fixed;
    top:0;right:0;
    width:80%;max-width:300px;
    height:100%;
    background:#fff;
    box-shadow:-2px 0 8px rgba(0,0,0,0.2);
    transform:translateX(100%);
    transition:transform 0.3s ease;
    z-index:2000;
  }
  #cart-panel:target{transform:translateX(0);}

  .cart-toggle-icon{
    display:block !important;
    position:fixed;
    top:80px !important;
    bottom:auto !important;
    right:10px;
    width:38px;
    height:38px;
    background-color:#d60000;
    background-image:url('/ic/carro.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    z-index:2100;
    border-radius:50%;
  }

  .close-cart{display:block;position:absolute;top:10px;right:10px;font-size:1.5em;text-decoration:none;color:#333;z-index:2200;}
}

@media screen and (min-width:769px){
  .cart-toggle-icon,
  .close-cart{display:none !important;}
  #cart-panel{position:static !important;transform:none !important;width:auto !important;height:auto !important;box-shadow:none !important;}
}


/* ==========================================================================
   14. BREAKPOINTS, de gran a petit
   ========================================================================== */

/* ---------- fins a 1024px ---------- */
@media (max-width:1024px){
  .productes-flexline .producte-flex,
  .grup-productes-dos .producte-flex{flex:1 1 48%;}

  .productes-grid{grid-template-columns:repeat(4,1fr);}
}

/* ---------- fins a 900px ---------- */
@media (max-width:900px){
  .pdf-banner .bloc{flex:1 1 45%;max-width:45%;}
}

/* ---------- fins a 768px ---------- */
@media (max-width:768px){
  body,html{overflow-x:hidden;}

  /* barra superior i cercador */
  .disto-page__topbar{position:static;min-height:auto;line-height:1.2;padding:4px 0;}
  .disto-page__topbar-inner{padding:0 8px;gap:8px;}
  .disto-page__links{justify-content:center;}
  .disto-page__links-item:nth-child(n+4){display:none;}
  .disto-page__searchbar{padding-top:12px;}
  .disto-page__searchbar-inner{flex-direction:column;align-items:center;}
  .disto-page__dealer{display:none;}

  /* resultats en viu a tota l'amplada */
  #disto-live-results{left:0;right:0;top:calc(100% + 4px);transform:none;width:100%;max-height:70vh;}
  #disto-live-results .card-producte{grid-template-columns:64px 1fr!important;min-height:74px!important;}
  #disto-live-results .card-producte .card-img,
  #disto-live-results .card-producte .card-img img{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important;}

  /* menu desplegable */
  nav.menu > ul{display:none;flex-wrap:wrap;align-items:stretch;justify-content:space-between;background:#fff;}
  nav.menu > ul > li{width:50%;box-sizing:border-box;}
  nav.menu > ul > li > a{text-align:left;padding:12px 14px;font-size:15px;border-bottom:1px solid #eee;}
  nav.menu > ul > li:nth-child(odd) > a{border-right:1px solid #eee;}
  .menu-icon{display:block;position:absolute;top:-95px;left:10px;z-index:1100;padding:8px 12px;background:#eee;border:1px solid #ccc;border-radius:10px;font-size:24px;cursor:pointer;line-height:1;}
  #menu-toggle:checked + .menu-icon + nav.menu > ul{display:flex;}
  nav.menu ul ul,
  nav.menu li:hover > ul{display:none !important;}
  #cart-panel,.bdreta,#cart,.close-cart{display:none !important;}

  /* contenidors */
  .contenidor-1050{width:100% !important;padding:10px !important;}
  .intro17{width:100% !important;padding:10px !important;box-sizing:border-box;}
  .intro17 p,.intro17 li,.intro17 ul{word-break:break-word;}
  .subtext,.titol_Producte_28_ROIG{max-width:100%;white-space:normal;word-wrap:break-word;}
  img{max-width:100%;height:auto !important;}
  .interes{display:block;max-width:100%;text-align:center;margin:0 auto 10px auto;}

  /* blocs de sectors */
  .instop-grid{display:flex;flex-direction:column;gap:16px;}
  .instop-item,
  .instop-item140{flex-direction:column;width:100%;border-radius:16px;}
  .instop-item{display:flex;max-width:100%;overflow:hidden;}
  .instop-img{width:100%;height:auto;}
  .instop-img img{width:100%;height:auto;display:block;}
  .instop-img125{height:auto;width:100%;}
  .instop-text{padding:16px;}
  .instop-text.dreta{border-radius:0 0 16px 16px;}

  /* graelles */
  .productes-grid{grid-template-columns:repeat(2,1fr);}
  .grup-productes-dos,
  .productes-flexline{flex-direction:column;}
  .grup-productes-dos .producte-flex,
  .productes-flexline .producte-flex{flex:1 1 100%;width:100%;}
  .factor-flex{width:45%;}
}

/* ---------- fins a 767px ---------- */
@media (max-width:767px){
  .banner-zone{display:none;}   /* en pantalla estreta no reserva ni espai */
}

/* ---------- fins a 600px ---------- */
@media (max-width:600px){
  .pdf-banner{flex-direction:column;align-items:center;}
  .pdf-banner .bloc{flex:1 1 100%;max-width:100%;}
  .pdf-banner .bloc img{max-height:120px;}
}

/* ---------- fins a 480px ---------- */
@media (max-width:480px){
  .productes-grid{grid-template-columns:1fr;}
  .factor-flex{width:100%;}
}